/* Notepad page styles. Loaded after site.css; every rule is scoped under
   .notepad-app so nothing leaks into other pages, and the palette reuses
   the site.css custom properties. (Editor-local dark mode was removed
   2026-08-20 in favor of a future sitewide dark mode.)

   Layout is editor-first: a compact page bar (h1 + actions) sits above the
   surface, the toolbar row combines pad tabs with the count/save state, and
   the lead copy renders below the surface — so typing starts above the fold. */

.notepad-app {
  margin: 0 0 1rem;
}

/* Desktop: center the whole page as a paper column in the space beside
   the sidebar (per the editor-first design). Scoped here so only the
   notepad page gets the narrower main; --sidebar-w tracks the collapsible
   sidebar, so the column re-centers when the sidebar is minimized. */
@media (min-width: 761px) {
  main {
    max-width: 980px;
    margin-left: max(calc(var(--sidebar-w) + 16px), calc((100vw - 980px) / 2));
    margin-right: 16px;
  }
}

/* ── Page bar: h1 + actions ──────────────────────────────────────── */

.notepad-app .notepad-pagebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.notepad-app .notepad-pagebar h1 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 650;
}

.notepad-app .notepad-pagebar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.notepad-app .notepad-pagebar-actions .btn {
  min-height: 34px;
  min-width: 0;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  border-radius: 7px;
}

.notepad-app .notepad-lead {
  margin: 0.9rem 0 0;
}

/* ── Floating "Use in a tool" split button ───────────────────────── */

/* Zero-height sticky anchor placed right after the editor: the split
   button renders at the pad's bottom-right corner, and when that corner
   is below the fold the anchor sticks so the button stays in view at
   the viewport's bottom right. Sticky (not fixed) so it can never
   escape the pad or float over unrelated page sections. */
.notepad-sendto {
  position: sticky;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  height: 0;
  /* Above the editor surface and neighbors, below modal overlays. */
  z-index: 60;
}

@media (max-width: 760px) {
  /* Clear the fixed mobile tabbar... */
  .notepad-sendto {
    bottom: calc(0.75rem + var(--mobile-tool-tabbar-height) + env(safe-area-inset-bottom, 0px));
  }

  /* ...and the Infolinks anchor ad, which site-common.js pins directly
     above the tabbar at --infolinks-mobile-infold-height. Keyed on the
     runtime infolinks-infold-pinned class (set the moment an ad is
     actually pinned), NOT the build-time has-infolinks-infold class:
     Pro visitors and visitors without ad consent never get the ad, and
     their button must sit right above the tabbar, not 90px in the air. */
  html.infolinks-infold-pinned .notepad-sendto {
    bottom: calc(0.75rem + var(--mobile-tool-tabbar-height) + var(--infolinks-mobile-infold-height) + env(safe-area-inset-bottom, 0px));
  }

  /* ...and the AdSense anchor unit in its owned slot. Keyed on the runtime
     anchor-slot-filled class, set only once the ad has real height: Pro
     visitors, visitors without ad consent, and unfilled slots must leave
     the button sitting right above the tabbar rather than in the air. */
  html.anchor-slot-filled .notepad-sendto {
    bottom: calc(0.75rem + var(--mobile-tool-tabbar-height) + var(--anchor-ad-height) + env(safe-area-inset-bottom, 0px));
  }
}

.notepad-fab {
  position: absolute;
  right: 0.9rem;
  bottom: 0.7rem;
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(20, 18, 40, 0.18);
}

.notepad-fab .btn {
  min-height: 40px;
}

/* Drop-up menu, opening from the floating button. It shares the sticky
   anchor, so it stays in view whenever the button does. */
.notepad-sendto-menu {
  position: absolute;
  right: 0.9rem;
  bottom: calc(0.7rem + 46px);
  width: max-content;
  min-width: 240px;
  max-width: min(280px, calc(100vw - 2rem));
  max-height: min(420px, 55vh);
  overflow-y: auto;
  padding: 0.5rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(20, 18, 40, 0.16);
}

/* Flipped variant: no room above the button (pad bottom scrolled near
   the viewport top), so the menu drops below the anchor line instead.
   notepad.js toggles this and caps max-height to the free space. */
.notepad-sendto-menu.notepad-sendto-menu-down {
  bottom: auto;
  top: 0.5rem;
}

.notepad-sendto-menu[hidden] {
  display: none;
}

.notepad-sendto-hint {
  margin: 0 0 0.35rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

.notepad-sendto-hint-tip {
  margin: 0.4rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}




.notepad-app .notepad-surface {
  padding: 0;
  margin: 0;
  /* No overflow:hidden — it would make the card the scrollport for the
     sticky "Use in a tool" anchor inside it, so the floating button
     could never stick to the viewport. The full-bleed child rows clip
     to the card's rounded corners with their own border-radius below. */
  display: flex;
  flex-direction: column;
}

/* ── Row 1: toolbar (pad tabs + count/save) ──────────────────────── */

.notepad-app .notepad-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.4rem 0.75rem;
  background: var(--surface-dim);
  border-bottom: 1px solid var(--border);
  border-radius: 11px 11px 0 0;
  min-height: 44px;
}

.notepad-app .notepad-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  min-width: 0;
}

.notepad-app .notepad-tab {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 220px;
  border-radius: 7px;
  background: transparent;
}

.notepad-app .notepad-tab.active {
  background: var(--primary-ghost);
}

.notepad-app .notepad-tab-label {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0.4rem 0.7rem;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 7px;
}

.notepad-app .notepad-tab:not(.active) .notepad-tab-label:hover {
  color: var(--primary-dark);
  background: rgba(85, 88, 217, 0.07);
}

.notepad-app .notepad-tab.active .notepad-tab-label {
  color: var(--primary-dark);
  font-weight: 600;
  padding-right: 0.25rem;
}

.notepad-app .notepad-tab-close {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  margin-right: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.notepad-app .notepad-tab-close:hover {
  background: rgba(85, 88, 217, 0.12);
  color: var(--primary-dark);
}

.notepad-app .notepad-tab-new {
  appearance: none;
  cursor: pointer;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: 0 0.1rem;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notepad-app .notepad-tab-new:hover {
  background: #f3f4f8;
  color: var(--primary-dark);
}

.notepad-app .notepad-status-left {
  display: flex;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  color: #9096a5;
  font-size: 0.8rem;
  min-width: 0;
  flex: 0 0 auto;
}

.notepad-app .notepad-count,
.notepad-app .notepad-save {
  margin: 0;
}

.notepad-app .notepad-save {
  font-weight: 500;
  color: #35845c;
}

/* Account-sync chip in the statusbar: text-sized like the save status but
   interactive (opt-in button, then a state chip that manages sync). */
.notepad-app .notepad-sync {
  margin: 0;
}

.notepad-app .notepad-sync-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 500;
  color: var(--primary-dark, #35508a);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.notepad-app .notepad-sync-btn:hover {
  text-decoration-style: solid;
}

.notepad-app .notepad-sync-btn.is-synced {
  color: #35845c;
  text-decoration: none;
}

.notepad-app .notepad-sync-btn.is-syncing {
  color: #6b7280;
  text-decoration: none;
}

.notepad-app .notepad-sync-btn.is-error {
  color: #a33a2f;
}

.notepad-app .notepad-sync-btn.is-premium {
  color: #8a5a10;
}

/* ── Row 2: title ────────────────────────────────────────────────── */

.notepad-app .notepad-titlebar {
  padding: 0.9rem 1.25rem 0;
}

.notepad-app .notepad-title-input {
  width: 100%;
  min-height: 2.3rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 0.1rem 0;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: inherit;
}

.notepad-app .notepad-title-input:focus-visible {
  outline: none;
  border-bottom-color: var(--focus);
}

.notepad-app .notepad-title-input::placeholder {
  color: #9096a5;
  font-weight: 600;
}

/* ── Row 3: the editor ───────────────────────────────────────────── */

.notepad-app .notepad-editor {
  display: block;
  width: 100%;
  min-height: max(46vh, calc(100vh - 21rem));
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  /* Bottom padding clears the floating "Repeat text" button so the last
     lines of a note are never hidden under it. */
  padding: 0.7rem 1.25rem 3.6rem;
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1.65;
  resize: vertical;
}

.notepad-app .notepad-editor:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus);
}

.notepad-app .notepad-editor::placeholder {
  color: #9096a5;
}

/* ── Shared-view status bar ──────────────────────────────────────── */

.notepad-app .notepad-statusbar {
  display: flex;
  align-items: center;
  gap: 0.6rem 1rem;
  flex-wrap: wrap;
  padding: 0.55rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface-dim);
  border-radius: 0 0 11px 11px;
  color: #9096a5;
  font-size: 0.8rem;
}

/* ── Share result row ────────────────────────────────────────────── */

.notepad-app .notepad-share-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.65rem 1.25rem;
  border-top: 1px dashed var(--border);
  background: var(--surface-dim);
  border-radius: 0 0 11px 11px;
}

.notepad-share-row[hidden] {
  display: none;
}

.notepad-app .notepad-share-url {
  flex: 1 1 220px;
  width: auto;
  min-height: 2.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: inherit;
}

.notepad-app .notepad-share-row .btn {
  min-height: 2.4rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
}

/* Attention pulse when the share link appears; an inset overlay so the
   same animation reads correctly on the light and dark row backgrounds. */
.notepad-app .notepad-share-reveal {
  animation: notepad-share-pulse 1.2s ease-out 1;
}

@keyframes notepad-share-pulse {
  0% {
    box-shadow: inset 0 0 0 999px rgba(85, 88, 217, 0.2);
  }
  100% {
    box-shadow: inset 0 0 0 999px rgba(85, 88, 217, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notepad-app .notepad-share-reveal {
    animation: none;
  }
}

.notepad-app .notepad-error {
  margin: 0;
  padding: 0.6rem 1.25rem 0.9rem;
  font-size: 0.92rem;
  color: #b3261e;
}

/* ── Share result modal ──────────────────────────────────────────── */
/* Centered on purpose: anchor ads pinned to the bottom of the screen
   can cover content brought in at the viewport edge, so the link is
   presented mid-screen instead of scrolled to. */

.notepad-modal-overlay {
  position: fixed;
  inset: 0;
  /* Above the mobile tabbar (2147483000 in site.css). Anchor-ad iframes
     can sit at the int32 max where no z-index wins, so the bottom padding
     below also reserves space to keep the card clear of bottom-pinned UI. */
  z-index: 2147483100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem calc(2rem + 56px + env(safe-area-inset-bottom, 0px));
  background: rgba(24, 22, 44, 0.55);
}

.notepad-modal-overlay[hidden] {
  display: none;
}

/* Keep the page still while the dialog is open. */
body.notepad-modal-open {
  overflow: hidden;
}

.notepad-modal {
  width: 100%;
  max-width: 460px;
  max-height: 100%;
  overflow: auto;
  padding: 1.25rem 1.4rem 1.1rem;
  border-radius: 14px;
  background: #fff;
  color: #1c1e26;
  box-shadow: 0 18px 48px rgba(20, 18, 40, 0.35);
}

.notepad-modal-title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.notepad-modal-meta {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  color: #6b7080;
}

.notepad-modal-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.notepad-modal-row .btn {
  min-height: 2.4rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
}

.notepad-modal-close {
  display: block;
  margin-left: auto;
}

/* ── Mobile ──────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .notepad-app .notepad-pagebar {
    margin-bottom: 0.55rem;
  }

  .notepad-app .notepad-pagebar-actions {
    width: 100%;
    flex-wrap: nowrap;
    gap: 0.3rem;
  }

  .notepad-app .notepad-pagebar-actions .btn {
    flex: 1 1 0;
    padding: 0.45rem 0.3rem;
    font-size: 0.76rem;
    white-space: nowrap;
  }


  .notepad-app .notepad-toolbar {
    padding: 0.35rem 0.5rem;
    flex-wrap: wrap;
  }

  .notepad-app .notepad-status-left {
    font-size: 0.74rem;
  }

  .notepad-app .notepad-editor {
    min-height: max(48vh, calc(100vh - 24rem));
    font-size: 1rem;
    padding: 0.6rem 0.9rem 1rem;
  }

  .notepad-app .notepad-titlebar {
    padding: 0.7rem 0.9rem 0;
  }

  .notepad-app .notepad-title-input {
    font-size: 1.2rem;
  }

  .notepad-app .notepad-statusbar,
  .notepad-app .notepad-share-row {
    padding: 0.55rem 0.9rem;
  }
}