/* ============================================================================
   TXTR — styles.css
   Dark only. Futuristic: one sans family, a centred column, neon used as
   signal rather than decoration.

   The reading column is centred in the viewport and nothing sits beside it.
   A sheet's tag is the only thing to the right of its title, and the only
   colour that moves is the line under the sheet you are on.

   Sections are marked with banner comments; each is a candidate for its own
   file later. Selectors stay flat and single-class so splitting them never
   changes specificity.

   01. TOKENS
   02. RESET & STAGE
   03. AMBIENT (neon bloom)
   04. CHROME (topbar, tag rail, status bar, menu)
   05. SHELF (the Binders)
   06. SHEETS (index, expansion, the lightline)
   07. PROSE (rendered text)
   08. TAGS (chips, editor)
   09. EDITOR
   10. PALETTE (find / ask / speak)
   11. PRESENT MODE
   12. TOAST, SELECTION ACTION
   13. PRINT
   ========================================================================= */


/* == 01. TOKENS ===========================================================
   Tokyo Night, pushed brighter. Cyan is where you are, magenta is a tag,
   blue is a link or a person, orange is a time. Nothing else glows.        */

:root {
  --void:        #101018;   /* chrome, overlays */
  --ink:         #16161f;   /* page */
  --raised:      #1d1e2b;   /* inputs, code */
  --hover:       #24263a;
  --line:        #2b2d42;   /* hairline */

  --fg:          #d5def5;
  --fg-dim:      #98a0c4;
  --faint:       #5b6488;   /* labels, metadata */

  --cyan:        #7dcfff;
  --cyan-hot:    #a9e6ff;
  --blue:        #7aa2f7;
  --magenta:     #bb9af7;
  --green:       #9ece6a;
  --orange:      #ff9e64;
  --red:         #f7768e;

  --glow-cyan:    0 0 18px rgba(125, 207, 255, .55);
  --glow-magenta: 0 0 16px rgba(187, 154, 247, .40);

  /* One sans family for everything the reader reads. Monospace appears only
     where the content really is code or raw text. No webfonts: a Binder has
     to render the same offline and inside its exported file. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --measure: 36rem;          /* the reading column, centred, nothing beside it */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* == 02. RESET & STAGE ==================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Layout classes set display, which silently beats the hidden attribute.
   Say it once here so hiding anything actually hides it. */
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* the stage scrolls, not the page */
}

button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }

a {
  color: var(--blue);
  text-decoration-color: rgba(122, 162, 247, .35);
  text-underline-offset: .2em;
  transition: color .15s, text-shadow .15s;
}
a:hover { color: var(--cyan); text-decoration-color: currentColor; text-shadow: var(--glow-cyan); }

:focus-visible { outline: 1px solid var(--cyan); outline-offset: 4px; }
::selection { background: rgba(187, 154, 247, .3); }

.stage {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  padding: 5rem 1.5rem 45vh;
}

.stage::-webkit-scrollbar { width: 10px; }
.stage::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
  border: 3px solid var(--ink);
}
.stage::-webkit-scrollbar-thumb:hover { background: #3a3d59; }
.stage { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* Everything readable lives in here, dead centre of the window. */
.column { max-width: var(--measure); margin: 0 auto; }

/* Kept for links, print and export; never shown. */
.sheet-anchor {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}


/* == 03. AMBIENT ==========================================================
   Two soft blooms and a vignette: enough to feel lit from somewhere, not
   enough to notice. One layer, no animation, no pattern.                   */

.ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(125, 207, 255, .10), transparent 70%),
    radial-gradient(55rem 38rem at 92% 108%, rgba(187, 154, 247, .09), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .5) 100%);
}
/* Stacking order, decided once, here. The ambient layer is positioned, so
   without this every later child of the body would paint underneath it.
   body is a flex container, so z-index applies to these children without
   also positioning them — which matters, because the overlay, the toast and
   the selection action each set their own position and must keep it. Every
   rule below carries the same `body >` prefix so the ladder is decided by
   what it says, not by specificity. */
body > *:not(.ambient) { z-index: 1; }
body > .topbar         { z-index: 50; }   /* its menu hangs over the stage */
body > .overlay        { z-index: 60; }
body > .toast          { z-index: 70; }


/* == 04. CHROME ===========================================================
   Context left, actions right, everything else inside the menu. Small,
   tracked, uppercase — the same sans as the text, so nothing reads as a
   terminal.                                                               */

.chrome {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  background: rgba(16, 16, 24, .82);
  backdrop-filter: blur(14px);
  flex: 0 0 auto;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.4rem;
  border-bottom: 1px solid var(--line);
}

.crumbs { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.crumb {
  color: var(--faint);
  letter-spacing: .14em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .15s, text-shadow .15s;
}
.crumb:hover { color: var(--fg-dim); }
.crumb-current { color: var(--fg); max-width: 46vw; }
.crumb-current:hover { color: var(--cyan); text-shadow: var(--glow-cyan); }
.crumb-sep { color: var(--line); }

.actions { display: flex; align-items: center; gap: .15rem; }

.icon-btn {
  width: 2.1rem; height: 2.1rem;
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--faint);
  font-size: .95rem;
  transition: color .15s, background .15s, box-shadow .15s;
}
.icon-btn:hover { color: var(--fg); background: var(--hover); }

/* Tag rail — the horizontal dimension of the Binder (spec 8, 9, 10). */
.tagrail {
  display: flex; justify-content: center; align-items: center;
  gap: 1.6rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tagrail::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  color: var(--faint);
  letter-spacing: .16em;
  white-space: nowrap;
  padding: .2rem 0 .3rem;
  transition: color .18s;
}
.tab:hover { color: var(--fg-dim); }
.tab.is-on { color: var(--cyan); text-shadow: var(--glow-cyan); }
.tab.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.3rem; height: 1px;
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
}
.tab-count { color: var(--line); margin-left: .45em; font-variant-numeric: tabular-nums; }

kbd {
  font-family: var(--font);
  font-size: .625rem;
  font-weight: 500;
  color: var(--fg-dim);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .2em .45em;
  letter-spacing: .04em;
}

/* Three-dot menu. Account-level things live here and nowhere else (spec 29). */
.menu-wrap { position: relative; }
.menu {
  position: absolute; top: calc(100% + .6rem); right: 0;
  min-width: 16rem;
  background: rgba(16, 16, 24, .96);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 40px rgba(125, 207, 255, .05);
  padding: .4rem;
  z-index: 40;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  animation: pop .16s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
.menu-item {
  display: flex; justify-content: space-between; gap: 1.5rem;
  width: 100%;
  padding: .6rem .75rem;
  border-radius: 6px;
  color: var(--fg-dim);
  transition: background .12s, color .12s;
}
.menu-item:hover { background: var(--hover); color: var(--fg); }
.menu-item.is-danger:hover { color: var(--red); }
.menu-item-key { color: var(--faint); letter-spacing: .1em; }
.menu-sep { border: 0; border-top: 1px solid var(--line); margin: .4rem .35rem; }

/* The shortcuts, in the menu rather than along the foot of every screen:
   they are documentation, so they sit where the rest of the answers are. */
.menu-label {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .5rem .75rem .3rem;
  color: var(--line);
  font-size: .625rem;
  letter-spacing: .18em;
}
.menu-label span:last-child { font-variant-numeric: tabular-nums; }
.menu-key {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: .3rem .75rem;
  color: var(--faint);
}
.menu-key .menu-keys { display: inline-flex; gap: .25rem; flex: 0 0 auto; }
.menu-note {
  padding: .3rem .75rem .5rem;
  color: var(--line);
  text-transform: none;
  letter-spacing: .02em;
  line-height: 1.5;
}


/* == 05. SHELF ============================================================
   Not a dashboard. The Binders, and nothing else (spec 28).                */

.shelf-item {
  display: block; width: 100%;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
  transition: padding-left .3s var(--ease);
}
.shelf-item:last-of-type { border-bottom: 1px solid var(--line); }
.shelf-item:hover, .shelf-item.is-cur { padding-left: .6rem; }
.shelf-item:hover .shelf-item-title,
.shelf-item.is-cur .shelf-item-title { color: var(--cyan); text-shadow: var(--glow-cyan); }

.shelf-item-title {
  font-size: 1.875rem; font-weight: 300; letter-spacing: -.025em; line-height: 1.15;
  margin: 0 0 .6rem;
  transition: color .2s, text-shadow .2s;
}
.shelf-item-meta {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.shelf-empty { color: var(--faint); padding: 2rem 0; border-top: 1px solid var(--line); }


/* == 06. SHEETS ===========================================================
   Collapsed, the sheets are an index: title left, tag right, nothing else.
   The signature is the lightline — the rule above the current sheet ignites,
   so position is shown without putting anything beside the text (spec 5).  */

.lead { color: var(--fg-dim); font-size: 1.125rem; margin: 0 0 4rem; }
.lead.trail { margin: 2.5rem 0 4rem; }

.index { list-style: none; margin: 0; padding: 0; }

.sheet {
  position: relative;
  border-top: 1px solid var(--line);
  scroll-margin-top: 1.25rem;
}
.sheet:last-child { border-bottom: 1px solid var(--line); }
.sheet.is-hidden { display: none; }

.sheet::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan) 20%, var(--cyan-hot) 50%, var(--cyan) 80%, transparent);
  box-shadow: 0 0 14px rgba(125, 207, 255, .5);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.sheet.is-cur::before { opacity: 1; }
.sheet.is-cur {
  background: linear-gradient(180deg, rgba(125, 207, 255, .055), transparent 4rem);
}

/* Dropping is announced with a line of its own, so it never reads as the
   lightline above the current sheet (spec 9). */
.sheet.is-dragging { opacity: .35; }
.sheet.is-drop-before::after, .sheet.is-drop-after::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--magenta);
  box-shadow: var(--glow-magenta);
}
.sheet.is-drop-before::after { top: -1px; }
.sheet.is-drop-after::after { bottom: -1px; }

.sheet-hit {
  display: flex; align-items: baseline; gap: 1.25rem;
  width: 100%;
  padding: 1.15rem 0;
}
.sheet-hit .tag { margin-left: auto; }

/* Out of the way until the row is worth picking up, and gone once it is
   open — reordering is an index thing, not a writing thing. */
.drag-handle {
  flex: 0 0 auto;
  align-self: center;
  font-size: .8125rem;
  letter-spacing: -.2em;
  color: var(--line);
  cursor: grab;
  opacity: 0;
  transition: opacity .15s, color .15s;
}
.sheet-hit:hover .drag-handle { opacity: 1; }
.drag-handle:hover { color: var(--fg-dim); }
.sheet.is-open .drag-handle { display: none; }

.sheet-title {
  font-size: 1.5rem; font-weight: 300; letter-spacing: -.022em; line-height: 1.25;
  margin: 0;
  transition: color .2s, text-shadow .2s;
}
.sheet.is-cur .sheet-title { color: var(--cyan); }
.sheet-hit:hover .sheet-title { color: var(--cyan); text-shadow: var(--glow-cyan); }
.sheet-sub { font-size: 1.25rem; color: var(--fg-dim); }

/* Open: a title, its tag beside it, both centred, and the text underneath. */
.sheet.is-open { padding: 2.5rem 0 .5rem; }
.sheet.is-open .sheet-hit {
  display: block; position: relative;
  padding: .5rem 0 2.5rem;
}
.sheet.is-open .tag { position: absolute; top: .75rem; right: 0; }
.sheet.is-open .sheet-title {
  font-size: clamp(2.125rem, 5.5vw, 3.125rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.05;
  text-align: center;
  padding: 0 5rem;
  color: var(--fg);
  text-shadow: none;
}
.sheet-body { padding-bottom: 2.75rem; animation: unfold .3s var(--ease); }
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 46rem) {
  .stage { padding-top: 2.5rem; }
  .sheet-title { font-size: 1.375rem; }
  .sheet-hit { gap: .85rem; }
  .sheet.is-open .sheet-title { padding: 0 4rem; }
}


/* == 07. PROSE ============================================================
   Rendered text. Quotes are the discussion (16), tasks are lines with a
   box (15).                                                                */

.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.35em; }
.prose h3, .prose h4 {
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan);
  margin: 2.75em 0 1em;
}
.prose ul, .prose ol { margin: 0 0 1.35em; padding-left: 1.35em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--faint); }
.prose img { max-width: 100%; height: auto; margin: 1.75em 0; border-radius: 8px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.75em 0; }
.prose strong { color: #fff; font-weight: 600; }
.prose del { color: var(--faint); }

code {
  font-family: var(--font-mono);
  font-size: .8125em;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .12em .38em;
  color: var(--cyan);
  letter-spacing: 0;
}
.prose pre {
  font-family: var(--font-mono);
  font-size: .8125rem; line-height: 1.75; letter-spacing: 0;
  background: rgba(10, 10, 16, .6);
  border: 1px solid var(--line);
  border-left: 2px solid var(--magenta);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  margin: 1.85em 0;
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--fg-dim); }

.quote {
  margin: 1.85em 0;
  padding-left: 1.35rem;
  border-left: 2px solid var(--line);
  color: var(--fg-dim);
}
.quote p { margin: 0 0 .6em; }
.reply {
  color: var(--fg);
  border-left: 2px solid var(--magenta);
  margin: -1.85em 0 1.85em;
  padding: .15rem 0 .15rem 1.35rem;
}
.reply-who {
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
  margin-left: .5em;
}

table[data-b="table"] {
  width: 100%;
  margin: 1.85em 0;
  border-collapse: collapse;
  font-size: .9375rem;
}
table[data-b="table"] th, table[data-b="table"] td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
table[data-b="table"] th {
  color: var(--faint);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--fg-dim);
}
table[data-b="table"] td:first-child, table[data-b="table"] th:first-child { padding-left: 0; }
table[data-b="table"] td:last-child, table[data-b="table"] th:last-child { padding-right: 0; }

.mention { color: var(--blue); }
.mention.is-me {
  color: var(--cyan);
  background: rgba(125, 207, 255, .12);
  border-radius: 4px;
  padding: 0 .2em;
}

.task { list-style: none; margin-left: -1.35em; }
.task-box {
  font-family: var(--font-mono);
  font-size: .8125em;
  color: var(--faint);
  margin-right: .55em;
  transition: color .15s, text-shadow .15s;
}
.task-box:hover { color: var(--cyan); text-shadow: var(--glow-cyan); }
.task.is-done { color: var(--faint); }
.task.is-done .task-box { color: var(--green); text-shadow: 0 0 12px rgba(158, 206, 106, .5); }
.task.is-done { text-decoration: line-through; text-decoration-color: var(--line); }
.task.is-done .task-box { text-decoration: none; }


/* == 08. TAGS =============================================================
   One tag per sheet, to the right of its title. A pill, not a hashtag: the
   hash belongs to the text, the chip belongs to the interface (spec 9).    */

.tag {
  flex: 0 0 auto;
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--magenta);
  background: rgba(187, 154, 247, .10);
  border: 1px solid rgba(187, 154, 247, .28);
  border-radius: 999px;
  padding: .3em .7em .26em;
  white-space: nowrap;
  transition: background .15s, box-shadow .15s, color .15s;
}
.tag[data-tag] { cursor: pointer; }
.tag[data-tag]:hover {
  color: var(--cyan);
  background: rgba(125, 207, 255, .14);
  border-color: rgba(125, 207, 255, .45);
  box-shadow: var(--glow-cyan);
}


/* The tag popover: the words this Binder already uses, and a field for one it
   does not. Anchored to whatever was clicked, closed by clicking anywhere. */
.tag-menu {
  position: fixed; z-index: 65;
  display: flex; flex-direction: column; gap: .2rem;
  min-width: 11rem; max-height: 60vh; overflow-y: auto;
  background: rgba(20, 20, 30, .97);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 40px rgba(187, 154, 247, .06);
  padding: .4rem;
  animation: pop .16s var(--ease);
}
.tag-menu-item {
  text-align: left;
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-dim);
  border-radius: 6px;
  padding: .5rem .6rem;
  transition: background .12s, color .12s;
}
.tag-menu-item:hover { background: var(--hover); color: var(--magenta); }
.tag-menu-item.is-on { color: var(--magenta); }
.tag-menu-item.is-on::after { content: " \2713"; }
.tag-menu-item.is-danger:hover { color: var(--red); }

.tag-menu-row { display: flex; align-items: stretch; gap: .2rem; }
.tag-menu-row .tag-menu-item { flex: 1; }
.tag-menu-drop {
  flex: 0 0 auto;
  align-self: center;
  color: var(--line);
  font-size: .8125rem; line-height: 1;
  padding: .1rem .5rem;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.tag-menu-drop:hover { color: var(--red); background: rgba(247, 118, 142, .12); }

.tag-menu input {
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--magenta);
  background: var(--raised);
  border: 1px solid rgba(187, 154, 247, .35);
  border-radius: 6px;
  padding: .5rem .6rem;
  margin-top: .2rem;
}
.tag-menu input:focus { outline: none; border-color: var(--magenta); }
.tag-menu input::placeholder { color: var(--faint); }

/* An untagged sheet asks for one, but only once it is open. */
.tag.is-untagged { color: var(--faint); border-color: var(--line); }
.tag.is-untagged:hover { color: var(--magenta); border-color: var(--magenta); }
.sheet:not(.is-open) .tag.is-untagged { display: none; }


/* == 09. WRITING =========================================================
   There is no editor to style, because there is no editor: the sheet on
   screen is the one being written in. What is left is the small amount of
   feedback that writing needs — where the caret is, what an empty line is
   for, and which line is about to become a sheet.                          */

.prose[contenteditable], .sheet-title[contenteditable], .shelf-item-title[contenteditable] {
  outline: none;
  caret-color: var(--cyan);
}
/* An unnamed sheet says so in the index, and asks for a name once it is open. */
.sheet-title:empty::before {
  content: "Untitled";
  color: var(--faint);
  pointer-events: none;
}
.sheet-title[contenteditable]:empty::before,
.shelf-item-title[contenteditable]:empty::before,
.prose > p:only-child:empty::before {
  content: attr(data-hint);
  color: var(--line);
  pointer-events: none;
}
/* An emptied line still has to be tall enough to hold a caret. */
.prose > *:empty, .prose li:empty { min-height: 1.5em; }

/* A line that starts with # is a heading straight away; Enter is what makes
   it a sheet of its own, so until then it says so. */
.prose .sheet-title.is-pending {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 300; letter-spacing: -.03em; line-height: 1.15;
  color: var(--fg);
  /* It is a line in the body, not the sheet's own title: it reads from the
     left like everything else around it. */
  text-align: left;
  margin: 1.85em 0 .6em;
  padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--cyan);
  box-shadow: -2px 0 18px rgba(125, 207, 255, .16);
}
.prose .sheet-title.is-pending::after {
  content: "Enter";
  display: inline-block; vertical-align: middle;
  font-size: .5625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); background: var(--cyan);
  border-radius: 3px; padding: .25em .5em; margin-left: .9rem;
  transform: translateY(-.15em);
}

/* Selecting inside a sheet has to read as writing, not as reading. */
.sheet.is-open { background: linear-gradient(180deg, rgba(125, 207, 255, .03), transparent 8rem); }
.sheet.is-open .sheet-hit { cursor: text; }
.sheet-hit { cursor: pointer; }

/* == 10. PALETTE ==========================================================
   One surface for find, ask and speak (spec 12, 13, 14). A single lit panel
   floating over a blurred page.                                            */

.overlay {
  position: fixed; inset: 0;
  background: rgba(8, 8, 14, .72);
  backdrop-filter: blur(10px);
  display: flex; justify-content: center; align-items: flex-end;
  padding: 6vh 1.25rem 16vh;
  animation: fade .18s var(--ease);
}
.overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }

.term {
  width: 100%; max-width: 42rem;
  max-height: 78vh;
  display: flex; flex-direction: column;
  background: rgba(20, 20, 30, .96);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(125, 207, 255, .08),
    0 0 70px rgba(125, 207, 255, .07);
  overflow: hidden;
  animation: rise .22s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985); } }

.term-bar {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.term-mode { color: var(--cyan); text-shadow: var(--glow-cyan); }

.term-input-row {
  display: flex; align-items: center; gap: .85rem;
  padding: .5rem 1.1rem;
  flex: 0 0 auto;              /* the field never shrinks to fit results */
}
.term-caret { color: var(--cyan); font-size: 1.1rem; text-shadow: var(--glow-cyan); }
.term-input {
  flex: 1;
  background: none; border: 0;
  font-size: 1.0625rem;
  padding: .7rem 0;
  color: var(--fg);
}
.term-input:focus { outline: none; }
.term-input::placeholder { color: var(--faint); }

.mic {
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4em .8em;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.mic:hover { color: var(--fg); border-color: var(--fg-dim); }
.mic.is-live {
  color: var(--red); border-color: var(--red);
  box-shadow: 0 0 18px rgba(247, 118, 142, .5);
  animation: pulse 1.4s infinite;
}
@keyframes pulse { 50% { opacity: .45; } }

/* The results scroll, the field does not: whatever room is left over in the
   panel is theirs, and the newest match stays nearest the caret. */
.results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border-bottom: 1px solid var(--line);
}
.results:empty { display: none; }

.res-group {
  font-size: .5625rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--line);
  padding: 1rem 1.1rem .4rem;
}
.res {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline;
  width: 100%;
  padding: .6rem 1.1rem;
  border-left: 2px solid transparent;
}
.res.is-sel {
  background: linear-gradient(90deg, rgba(125, 207, 255, .12), transparent);
  border-left-color: var(--cyan);
}
.res-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-sub {
  font-size: .625rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.res mark { background: none; color: var(--cyan); text-shadow: var(--glow-cyan); }

.answer { padding: 1.25rem 1.1rem 1.4rem; }
.answer-body { margin: 0 0 1rem; }
.answer-body p { margin: 0 0 .85em; }
.answer-note {
  font-size: .5625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
  margin-top: 1rem;
}
.answer-quote {
  border-left: 2px solid var(--magenta);
  padding-left: 1rem; margin: 0 0 .9rem;
  color: var(--fg-dim);
}


/* == 11. TOAST, SELECTION ACTION =========================================== */

.toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg);
  background: rgba(16, 16, 24, .96);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6), -2px 0 20px rgba(125, 207, 255, .2);
  padding: .7rem 1.1rem;
  animation: rise .2s var(--ease);
}
.toast[hidden] { display: none; }
.toast-undo {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: .2em;
  margin-left: .3em;
  transition: text-shadow .15s;
}
.toast-undo:hover { text-shadow: var(--glow-cyan); }



/* == 12. PRINT ============================================================
   Chrome disappears, every sheet opens, the Binder becomes a document
   (spec 20). The browser's own print pipeline, no server.                  */

@media print {
  body { background: #fff; color: #111; display: block; overflow: visible; font-size: 11pt; }
  .ambient, .topbar, .tagrail, .overlay, .toast,
  .tag, .drag-handle { display: none !important; }
  .stage { overflow: visible; padding: 0; }
  .column { max-width: none; }
  .sheet { break-inside: avoid; border: 0; padding: 0 0 1.5rem !important; }
  .sheet::before { display: none; }
  .sheet-hit { padding: 0 !important; display: block; }
  .sheet-title {
    font-size: 19pt !important; font-weight: 600; text-align: left !important;
    color: #111 !important; margin: 1.5rem 0 .5rem; text-shadow: none !important;
  }
  .sheet-body { display: block !important; padding: 0; }
  .prose a { color: #111; }
  code, .prose pre { background: #f4f4f7; border-color: #ddd; color: #111; }
  .quote { border-left-color: #bbb; color: #333; }
  .reply { border-left-color: #888; box-shadow: none; }
  .print-sheet-only .sheet:not(.is-print) { display: none; }
  /* Placeholder hints ("Write. A line starting with # is a heading.", "Name
     this sheet", the trail's "Write more...") guide someone typing — on
     paper there's no caret to guide, so an empty line just prints blank. */
  .sheet-title[contenteditable]:empty::before,
  .shelf-item-title[contenteditable]:empty::before,
  .prose > p:only-child:empty::before { content: none; }
}


/* == 13. TAG REFERENCES ===================================================
   A hashtag written inside the body is not the sheet's tag — that one lives
   on the title line. It reads as a mention of a column, and jumps to it.   */

.tagref {
  color: var(--magenta);
  cursor: pointer;
  border-bottom: 1px dotted rgba(187, 154, 247, .45);
  transition: color .15s, text-shadow .15s;
}
.tagref:hover { color: var(--cyan); border-bottom-color: var(--cyan); text-shadow: var(--glow-cyan); }