/* Wondering local demo. The typographic home leads into a command-bar conversation
   modelled closely on Mercury's in-app Command (light) and, for ?tone=night, its
   public dark demo. Notes: wondering/design/COMMAND-BAR-NOTES.md.
   Fonts: an installed face (local()) first, then the WOFF2 copy that only the static
   demo build serves from /fonts/ (converted from the installed faces at build time, never
   committed; Noah approved publishing them for the demo, 2026-10-28). The local host has
   no /fonts/, so there it relies on local(). Families are reached only through --font and --logo. */
@font-face { font-family: "W Logotype"; src: local("Omnes Medium"), local("Omnes-Medium"), url("/fonts/omnes-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "W Text"; src: local("ABC Areal Regular"), local("ABCAreal-Regular"), url("/fonts/ABCAreal-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "W Text"; src: local("ABC Areal Medium"), local("ABCAreal-Medium"), url("/fonts/ABCAreal-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Day: Mercury Command light, measured */
  --page: #fff;
  --ink: rgb(30 30 42);          /* headings, logotype */
  --text: rgb(54 54 68);         /* body, messages */
  --muted: rgb(112 112 125);     /* meta, status */
  --faint: rgb(112 112 125 / .62);
  --fill: rgb(112 115 147 / .10);/* the visitor's message, chips, idle send */
  --fill-2: rgb(112 115 147 / .16);
  --line: rgb(112 115 147 / .18);
  --ring: rgb(112 115 147);      /* bar focus ring */
  --bar: #fff;
  --bar-border: rgb(112 115 147 / .30);
  --bar-busy: rgb(112 115 147 / .06);
  --you: var(--fill);
  --you-ink: var(--text);
  --card: #fff;
  --accent: rgb(84 98 228);      /* Mercury's blue, used only for focus outlines */
  --shimmer: rgb(30 30 42);
  --veil: rgb(255 255 255 / .86);

  --font: "W Text", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --logo: "W Logotype", "W Text", ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --logo-size: clamp(3.25rem, 2.2rem + 5vw, 5.75rem);
  --column: 38.75rem;            /* 620px, Mercury's conversation column */
  --ease: cubic-bezier(.22, 1, .36, 1);      /* calm ease-out */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t: 220ms;
  color-scheme: light;
}
:root[data-tone="night"] {
  /* Night: Mercury's public Command demo */
  --page: rgb(23 23 33);
  --ink: rgb(244 245 249);
  --text: rgb(237 237 243);
  --muted: rgb(157 157 168);
  --faint: rgb(157 157 168 / .6);
  --fill: rgb(157 152 195 / .16);
  --fill-2: rgb(157 152 195 / .24);
  --line: rgb(112 115 147 / .22);
  --ring: rgb(157 152 195 / .7);
  --bar: rgb(39 39 53);
  --bar-border: rgb(112 115 147 / .22);
  --bar-busy: rgb(39 39 53 / .6);
  --you: linear-gradient(to left, rgb(157 152 195 / .40), rgb(157 152 195 / .22));
  --you-ink: rgb(244 245 249);
  --card: linear-gradient(to left, rgb(39 39 53), rgb(30 30 42));
  --accent: rgb(140 150 255);
  --shimmer: rgb(251 252 253);
  --veil: rgb(23 23 33 / .86);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; background: var(--page); }
body {
  margin: 0; min-block-size: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--page); color: var(--text); font: 400 .9375rem/1.6 var(--font);
  font-feature-settings: "kern", "liga", "calt"; font-kerning: normal;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--page); padding: .5rem .75rem; z-index: 10; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
kbd { display: inline-grid; place-items: center; min-inline-size: 1.25rem; block-size: 1.25rem; padding: 0 .3rem; border: 1px solid var(--line); border-radius: .3rem; font: 500 .6875rem/1 var(--font); color: var(--muted); }
#view { display: flex; flex-direction: column; min-inline-size: 0; }
#view > * { flex: 1 0 auto; }

/* ---------- Header ---------- */
.bar {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: max(.625rem, env(safe-area-inset-top)) clamp(.75rem, 2vw, 1.25rem) .5rem;
  view-transition-name: none;
}
.title { display: flex; align-items: baseline; gap: .875rem; min-inline-size: 0; }
.mark { text-decoration: none; color: var(--ink); padding: .125rem .25rem; border-radius: 8px; }
.mark-word { display: inline-block; font: 500 1.4375rem/.9 var(--logo); letter-spacing: -.045em; view-transition-name: logo; }
.context { font-size: .9375rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.context:empty { display: none; }
.is-home:not(.is-convo) .title { visibility: hidden; }
.is-home:not(.is-convo) .mark-word { view-transition-name: none; }
.tools { display: flex; gap: .25rem; view-transition-name: tools; }
.tool { inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--muted); transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.tool:hover { background: var(--fill); color: var(--ink); }
.tool svg { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.tool .dots circle, .tool .dot { fill: currentColor; stroke: none; }
.is-convo .bar { position: sticky; top: 0; z-index: 5; background: var(--page); }
.is-convo .bar::after { content: ""; position: absolute; inset: 100% 0 auto; block-size: 1.25rem; background: linear-gradient(var(--page), transparent); pointer-events: none; }

/* ---------- Home: the empty state ---------- */
.home { display: grid; justify-items: center; align-content: center; gap: clamp(1.5rem, 1rem + 2vw, 2.25rem); padding: 0 1rem 14vh; }
.logotype { margin: 0; color: var(--ink); font: 500 var(--logo-size)/.9 var(--logo); letter-spacing: -.045em; view-transition-name: logo; user-select: none; }
.home-talk { inline-size: min(100%, var(--column)); display: grid; gap: 1rem; }
.home-actions { display: flex; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem; block-size: 2rem; padding: 0 1rem 0 .75rem; border: 0; border-radius: 9999px;
  background: var(--fill); color: var(--text); font-size: .8125rem; cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.chip:hover { background: var(--fill-2); color: var(--ink); }
.chip svg { inline-size: .875rem; block-size: .875rem; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chip[aria-pressed="true"] svg { fill: none; stroke-width: 2.2; }
.home-thread:empty { display: none; }

/* ---------- The bar (one element on home and in the conversation) ---------- */
.box {
  position: relative; inline-size: 100%; display: flex; align-items: flex-end; gap: .5rem;
  padding: .5rem .5rem .5rem 1.25rem; background: var(--bar); border: 1px solid var(--bar-border); border-radius: 1.5rem;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  view-transition-name: box;
}
.box:focus-within { border-color: transparent; box-shadow: 0 0 0 2px var(--ring); }
.field { position: relative; flex: 1; min-inline-size: 0; display: grid; }
.field > * { grid-area: 1 / 1; }
.field textarea, .ghost, .mirror { font: inherit; font-size: 1.125rem; line-height: 1.5; padding: .3125rem 0; letter-spacing: 0; }
.field textarea { resize: none; border: 0; outline: 0; background: transparent; color: var(--ink); max-block-size: 40vh; overflow-y: auto; field-sizing: content; min-block-size: 1.5em; caret-color: var(--ink); }
.ghost { pointer-events: none; color: var(--muted); white-space: pre-wrap; transition: opacity 160ms var(--ease); }
.ghost.is-hidden { opacity: 0; }
.mirror { pointer-events: none; justify-self: start; align-self: start; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.mirror:empty { display: none; }
.box.is-lifting textarea, .box.is-lifting .ghost { color: transparent; opacity: 0; }
.caret { display: inline-block; inline-size: 1.5px; block-size: 1.1em; margin-inline-start: 1px; vertical-align: -.15em; background: var(--muted); animation: blink 1.05s steps(1) infinite; }
.typing .caret { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
.send {
  flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--ink); color: var(--page); cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease), transform 120ms var(--ease);
}
.send:disabled { background: var(--fill); color: var(--muted); cursor: default; }
.send:not(:disabled):active { transform: scale(.94); }
.send svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.skip-q { flex: none; align-self: center; display: inline-flex; align-items: center; gap: .375rem; border: 0; background: none; color: var(--muted); font-size: .8125rem; padding: .375rem .5rem; border-radius: 9999px; cursor: pointer; }
.skip-q:hover { color: var(--ink); background: var(--fill); }
.box[aria-busy="true"] { background: var(--bar-busy); border-color: transparent; box-shadow: none; }
.box[aria-busy="true"] textarea { color: var(--muted); }

/* ---------- Conversation ---------- */
.is-convo .foot { display: none; }
.is-convo .logotype { display: none; }
.is-convo :is(.home, .convo) {
  display: flex; flex-direction: column; inline-size: min(100% - 2rem, var(--column)); margin-inline: auto; padding: 0; gap: 0;
}
.is-convo .home-talk { display: flex; flex-direction: column; flex: 1; inline-size: 100%; gap: 0; }
.thread { display: flex; flex-direction: column; flex: 1; padding-block: clamp(1rem, 4vh, 2.5rem) 1.5rem; }
.dock { display: grid; gap: .625rem; }
.is-convo .dock { margin-block-start: auto; position: sticky; bottom: 0; z-index: 4; padding-block: 1rem max(1rem, env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--page) 1rem); }
.is-convo .dock .home-actions { order: -1; justify-content: flex-start; }
.note { margin: 0; font-size: .8125rem; color: var(--muted); display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.note:empty { display: none; }
/* Static demo: one quiet line under the bar, always in view (Mercury-style disclaimer) */
.demo-line { margin: 0; text-align: center; font-size: .75rem; line-height: 1.25rem; letter-spacing: .2px; color: var(--muted); }
.is-convo .dock .demo-line { margin-block-start: -.125rem; }
.dock .hint { justify-content: flex-start; }
.hint .chip svg { fill: none; stroke-width: 2; }
.note button { border: 0; background: var(--fill); border-radius: 9999px; padding: .25rem .75rem; font-size: .8125rem; cursor: pointer; }

/* Messages */
.said { margin: 0; max-inline-size: 100%; overflow-wrap: anywhere; text-wrap: pretty; }
.said.w { color: var(--text); font-size: .9375rem; line-height: 1.6; }
.said.w.ask { color: var(--ink); }
.said.w.aside { color: var(--muted); }
.said.you {
  align-self: flex-end; max-inline-size: min(30rem, 85%); padding: .5rem .75rem; border-radius: .75rem;
  background: var(--you); color: var(--you-ink); white-space: pre-wrap;
}
.said.you.skipped { background: none; padding: 0; color: var(--muted); font-size: .8125rem; }
.meta { margin: .25rem 0 0; font-size: .75rem; line-height: 1.25rem; letter-spacing: .2px; color: var(--muted); }
.said.you + .meta { align-self: flex-end; }
/* Rhythm: a turn change breathes more than a run from the same side. */
.thread > * + * { margin-block-start: .875rem; }
.thread > .said.you, .thread > .said.you + .meta + .said.w, .thread > .said.you + .said.w { margin-block-start: 1.5rem; }
.thread > .meta { margin-block-start: .25rem; }
.thread > .said.you + .meta + * { margin-block-start: 1.25rem; }

/* Under each drafting reply: copy, thumbs, and who said it (Mercury's row) */
.reply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem; margin-block-start: .375rem !important; color: var(--muted); }
.act { inline-size: 1.75rem; block-size: 1.75rem; display: grid; place-items: center; border: 0; background: none; border-radius: .5rem; color: var(--muted); cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.act:hover { background: var(--fill); color: var(--ink); }
.act svg { inline-size: .9375rem; block-size: .9375rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.act[aria-pressed="true"] { color: var(--ink); }
.act[aria-pressed="true"] svg { fill: var(--fill-2); }
.reply-actions .by { margin-inline-start: .5rem; font-size: .75rem; letter-spacing: .2px; }
.why { flex-basis: 100%; display: flex; gap: .5rem; align-items: center; margin-block-start: .375rem; animation: rise 360ms var(--ease) both; }
.why input { flex: 0 1 24rem; min-inline-size: 0; border: 1px solid var(--bar-border); border-radius: 9999px; background: var(--bar); color: var(--ink); padding: .375rem .875rem; font: inherit; font-size: .8125rem; outline: 0; }
.why input:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring); }
.why .saved { font-size: .75rem; }

/* Word-by-word arrival, with a short blur (Mercury's blur-in, kept subtle) */
.word { display: inline-block; animation: word-in 560ms var(--ease) both; }
@keyframes word-in { from { opacity: 0; filter: blur(5px); transform: translateY(.14em); } }
.rise { animation: rise 620ms var(--ease) both; }
@keyframes rise { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }
.is-waiting { visibility: hidden; }

/* Status: one grey line with light sweeping through it */
.status { align-self: flex-start; margin: 0; font-size: .9375rem; color: var(--muted); }
.status.shimmer {
  background: linear-gradient(100deg, var(--muted) 0 38%, var(--shimmer) 50%, var(--muted) 62% 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 1.9s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.status .phrase { display: inline-block; animation: rise 420ms var(--ease) both; }

/* Divider: where the sample ends and the visitor's own study begins */
.divider { display: flex; align-items: center; gap: .75rem; margin-block: 1.75rem .25rem !important; font-size: .75rem; letter-spacing: .2px; color: var(--muted); text-align: center; }
.divider::before, .divider::after { content: ""; flex: 1; border-block-start: 1px solid var(--line); }
.divider:first-child { margin-block-start: 0 !important; }

/* The draft, as a quiet card */
.draft { border: 1px solid var(--line); border-radius: 1rem; background: var(--card); overflow: hidden; color: var(--text); }
.draft-head { padding: .875rem 1rem .75rem; }
.draft .kicker { margin: 0 0 .125rem; font-size: .75rem; letter-spacing: .2px; color: var(--muted); }
.draft h2 { margin: 0; color: var(--ink); font: 500 1.0625rem/1.4 var(--font); letter-spacing: -.005em; text-wrap: balance; }
.draft dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; padding: .75rem 1rem; border-block-start: 1px solid var(--line); font-size: .875rem; }
.draft dt { color: var(--muted); }
.draft dd { margin: 0; }
.draft .qs { padding: .75rem 1rem; border-block-start: 1px solid var(--line); }
.draft .qs-label { margin: 0 0 .375rem; font-size: .75rem; letter-spacing: .2px; color: var(--muted); }
.draft ol { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .375rem; font-size: .9375rem; }
.draft ol li::marker { color: var(--muted); font-size: .8125rem; }
.draft .open { margin: 0; padding: 0 1rem .75rem; color: var(--muted); font-size: .8125rem; }
.draft-foot { display: flex; justify-content: flex-end; padding: .625rem .75rem; border-block-start: 1px solid var(--line); }
.pill { display: inline-flex; align-items: center; gap: .375rem; block-size: 2rem; padding: 0 .875rem; border: 0; border-radius: 9999px; background: var(--fill); color: var(--text); font-size: .8125rem; text-decoration: none; cursor: pointer; transition: background var(--t) var(--ease); }
.pill:hover { background: var(--fill-2); color: var(--ink); }
.pill.primary { background: var(--ink); color: var(--page); }
.pill svg { inline-size: .625rem; block-size: .625rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Pages ---------- */
.page { inline-size: min(100% - 2rem, var(--column)); margin: clamp(1rem, 6vh, 4rem) auto 3rem; }
.page h1 { font: 500 1.5rem/1.25 var(--font); color: var(--ink); letter-spacing: -.015em; margin: 0 0 1.25rem; }
.page .label { display: inline-flex; font-size: .75rem; letter-spacing: .2px; color: var(--muted); background: var(--fill); border-radius: 9999px; padding: .125rem .625rem; margin-block-end: 1rem; }
.works { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); }
.works li { border-block-end: 1px solid var(--line); }
.works a { display: grid; gap: .125rem; padding: .875rem .25rem; text-decoration: none; transition: background var(--t) var(--ease); }
.works a:hover { background: var(--fill); }
.works .name { font-weight: 500; color: var(--ink); }
.works .meta { margin: 0; }
.new { margin-block-end: 1.25rem; }
.mock { border: 1px solid var(--line); border-radius: 1rem; background: var(--card); padding: 1.25rem; }
.preview-q { font-size: 1.0625rem; color: var(--ink); margin: 0 0 .75rem; }
.facts { color: var(--muted); font-size: .875rem; }
.mock-nav { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-start: 1rem; }

/* ---------- Footer, help ---------- */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding: .75rem clamp(.75rem, 2vw, 1.5rem) max(.75rem, env(safe-area-inset-bottom)); font-size: .75rem; color: var(--muted); }
.foot p { margin: 0; }
.legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.legal a { text-decoration: none; } .legal a:hover { color: var(--ink); text-decoration: underline; }
dialog { border: 1px solid var(--line); border-radius: 1.25rem; padding: 0; inline-size: min(100% - 2rem, 30rem); background: var(--page); box-shadow: 0 30px 80px -30px rgb(30 30 42 / .35); color: var(--text); }
dialog::backdrop { background: var(--veil); backdrop-filter: blur(6px); }
dialog[open] { animation: rise 320ms var(--ease) both; }
.help { padding: 1.5rem 1.5rem 1.25rem; }
.help h2 { font: 500 1.75rem/1 var(--logo); color: var(--ink); letter-spacing: -.045em; margin: 0 0 1rem; }
.help p { margin: 0 0 .875rem; }
.help-mode, .help-legal { font-size: .8125rem; color: var(--muted); }
.help-actions { display: flex; justify-content: space-between; align-items: center; margin-block-start: 1.25rem !important; }
.help-actions button { border: 0; background: var(--ink); color: var(--page); border-radius: 9999px; padding: .375rem 1rem; cursor: pointer; }

/* ---------- Motion: home → conversation ----------
   One view transition. The logotype shrinks into the header mark, the box glides
   down to become the bar, the visitor's words lift out of the box into their
   message, and everything else blurs in after them. Later sends repeat the lift. */
::view-transition-group(*) { animation-duration: 560ms; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(logo) { animation-duration: 760ms; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
::view-transition-group(box) { animation-duration: 720ms; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
::view-transition-group(lift) { animation-duration: 640ms; animation-timing-function: cubic-bezier(.5, 0, .1, 1); }
::view-transition-old(lift) { animation: 280ms ease-out both vt-fade-out; }
::view-transition-new(lift) { animation: 420ms var(--ease) 120ms both vt-fade-in; }
html.vt-enter::view-transition-old(root) { animation: 220ms ease-out both vt-fade-out; }
html.vt-enter::view-transition-new(root) { animation: 640ms var(--ease) 340ms both vt-blur-in; }
html.vt-page::view-transition-old(root) { animation: 160ms ease-out both vt-fade-out; }
html.vt-page::view-transition-new(root) { animation: 360ms var(--ease) 60ms both vt-blur-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-blur-in { from { opacity: 0; filter: blur(8px); transform: translateY(8px); } }

@media (max-width: 40rem) {
  .field textarea, .ghost, .mirror { font-size: 1rem; }
  .context { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .status.shimmer { color: var(--muted); background: none; }
}