/* ── tokens ─────────────────────────────────────────────────
   Light is the design's "bone paper". Dark keeps the same warm
   paper temperature, inverted. Everything below reads tokens,
   so the two themes stay structurally identical.            */

:root {
  color-scheme: light dark;

  --bg:         #f5f3ee;
  --surface:    #fffefa;
  --surface-2:  #f8f6f1;
  --sunken:     #f5f3ee;

  --ink:        #1b1a17;
  --ink-body:   #26241f;
  --ink-quote:  #3a372f;
  --ink-1:      rgba(0, 0, 0, .52);
  --ink-2:      rgba(0, 0, 0, .45);
  --ink-3:      rgba(0, 0, 0, .36);
  --ink-4:      rgba(0, 0, 0, .29);

  --line-1:     rgba(0, 0, 0, .075);
  --line-2:     rgba(0, 0, 0, .10);
  --line-3:     rgba(0, 0, 0, .14);

  --fill:       rgba(0, 0, 0, .05);
  --fill-2:     rgba(0, 0, 0, .06);
  --fill-3:     rgba(0, 0, 0, .09);

  --accent:        oklch(.62 .13 250);
  --accent-ink:    oklch(.55 .13 250);
  --accent-strong: oklch(.45 .13 250);
  --accent-soft:   oklch(.94 .03 250);
  --accent-tint:   oklch(.97 .015 250);
  --on-accent:     #fff;
  --danger:        oklch(.55 .16 25);

  --invert-bg:  #1b1a17;
  --invert-ink: #fff;
  --toast-bg:   rgba(27, 26, 23, .94);
  --toast-ink:  #f5f3ee;

  --scrim:      rgba(20, 18, 14, .30);
  --scrim-dark: rgba(20, 18, 14, .36);
  --veil:       rgba(245, 243, 238, .72);

  --sh-bar:    0 1px 2px rgba(0, 0, 0, .04);
  --sh-fab:    0 6px 18px rgba(0, 0, 0, .22);
  --sh-sheet:  0 -8px 40px rgba(0, 0, 0, .20);
  --sh-modal:  0 18px 50px rgba(0, 0, 0, .26);
  --sh-toast:  0 8px 24px rgba(0, 0, 0, .24);

  --ui:    'Libre Franklin', system-ui, -apple-system, sans-serif;
  --serif: Spectral, Georgia, serif;
  --mono:  ui-monospace, Menlo, monospace;

  /* Decelerating curve for things arriving, accelerating for things leaving —
     the asymmetry is most of what reads as "native". */
  --ease-out: cubic-bezier(.32, .72, 0, 1);
  --ease-in:  cubic-bezier(.4, 0, .8, .4);
  --t-screen: .34s;
  --t-sheet:  .34s;
  --t-quick:  .2s;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #14130f;
    --surface:    #1d1c16;
    --surface-2:  #232118;
    --sunken:     #100f0c;

    --ink:        #f3f0e6;
    --ink-body:   #e3dfd2;
    --ink-quote:  #cfcabb;
    --ink-1:      rgba(255, 252, 242, .58);
    --ink-2:      rgba(255, 252, 242, .48);
    --ink-3:      rgba(255, 252, 242, .38);
    --ink-4:      rgba(255, 252, 242, .30);

    --line-1:     rgba(255, 252, 242, .09);
    --line-2:     rgba(255, 252, 242, .13);
    --line-3:     rgba(255, 252, 242, .19);

    --fill:       rgba(255, 252, 242, .07);
    --fill-2:     rgba(255, 252, 242, .10);
    --fill-3:     rgba(255, 252, 242, .13);

    --accent:        oklch(.72 .13 250);
    --accent-ink:    oklch(.78 .11 250);
    --accent-strong: oklch(.85 .08 250);
    --accent-soft:   oklch(.33 .06 250);
    --accent-tint:   oklch(.26 .04 250);
    --on-accent:     #10131c;
    --danger:        oklch(.72 .15 25);

    --invert-bg:  #f0ecdf;
    --invert-ink: #16150f;
    --toast-bg:   rgba(240, 236, 223, .95);
    --toast-ink:  #1b1a17;

    --scrim:      rgba(0, 0, 0, .52);
    --scrim-dark: rgba(0, 0, 0, .62);
    --veil:       rgba(20, 19, 15, .74);

    --sh-bar:    0 1px 2px rgba(0, 0, 0, .35);
    --sh-fab:    0 6px 18px rgba(0, 0, 0, .5);
    --sh-sheet:  0 -8px 40px rgba(0, 0, 0, .55);
    --sh-modal:  0 18px 50px rgba(0, 0, 0, .6);
    --sh-toast:  0 8px 24px rgba(0, 0, 0, .5);
  }
}

/* ── reset ──────────────────────────────────────────────── */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior-y: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  /* Chrome is UI, not a document: no long-press callouts, no accidental
     text selection when swiping a list. Prose opts back in below. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.editor__body, .preview, .answer__body, .answer__q, .sheet__preview, .row__preview {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

/* App surfaces scroll; the page itself never does. */
.list, .editor, .answer, .settings, .versions, .landing, .sheet__preview {
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.list::-webkit-scrollbar, .editor::-webkit-scrollbar, .answer::-webkit-scrollbar,
.settings::-webkit-scrollbar, .versions::-webkit-scrollbar, .landing::-webkit-scrollbar,
.sheet__preview::-webkit-scrollbar { display: none; }

button {
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

input, textarea {
  font-family: inherit;
  color: inherit;
}
input:focus, textarea:focus { outline: none; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }

[hidden] { display: none !important; }

/* ── motion ─────────────────────────────────────────────────
   Every entrance has a matching exit. Classes are applied by js/motion.js;
   nothing here animates on its own except the loops.                     */

@keyframes blink   { 0%, 100% { opacity: .22 } 50% { opacity: 1 } }
@keyframes shimmer { from { background-position: -180% 0 } to { background-position: 180% 0 } }

@keyframes fade-in   { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade-out  { from { opacity: 1 } to { opacity: 0 } }

@keyframes sheet-in  { from { transform: translateY(100%) } to { transform: none } }
@keyframes sheet-out { from { transform: none } to { transform: translateY(100%) } }

@keyframes pop-in    { from { opacity: 0; transform: translateY(12px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes pop-out   { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(6px) scale(.98) } }

@keyframes rise-in   { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes rise-out  { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(10px) } }

@keyframes screen-in       { from { transform: translateX(100%) }   to { transform: none } }
@keyframes screen-out      { from { transform: none } to { transform: translateX(-24%) } }
@keyframes screen-back-in  { from { transform: translateX(-24%) }   to { transform: none } }
@keyframes screen-back-out { from { transform: none } to { transform: translateX(100%) } }

@keyframes row-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* Fades and slides first, then collapses the gap it left behind. */
@keyframes row-out {
  0%   { opacity: 1; transform: none; max-height: 140px }
  55%  { opacity: 0; transform: translateX(-16%); max-height: 140px }
  100% { opacity: 0; transform: translateX(-16%); max-height: 0;
         padding-top: 0; padding-bottom: 0; border-bottom-width: 0 }
}

.a-fade-in   { animation: fade-in   var(--t-quick) var(--ease-out) both }
.a-fade-out  { animation: fade-out  var(--t-quick) var(--ease-in)  both }
.a-sheet-in  { animation: sheet-in  var(--t-sheet) var(--ease-out) both }
.a-sheet-out { animation: sheet-out .26s           var(--ease-in)  both }
.a-pop-in    { animation: pop-in    .26s           var(--ease-out) both }
.a-pop-out   { animation: pop-out   .18s           var(--ease-in)  both }
.a-rise-in   { animation: rise-in   .28s           var(--ease-out) both }
.a-rise-out  { animation: rise-out  .18s           var(--ease-in)  both }

@keyframes dim-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes dim-out { from { opacity: 1 } to { opacity: 0 } }

/* z-index is set explicitly rather than left to DOM order: whichever screen is
   conceptually on top must render on top, in both directions. */
.a-screen-in       { animation: screen-in       var(--t-screen) var(--ease-out) both; z-index: 2 }
.a-screen-out      { animation: screen-out      var(--t-screen) var(--ease-out) both; z-index: 1 }
.a-screen-back-in  { animation: screen-back-in  var(--t-screen) var(--ease-out) both; z-index: 1 }
.a-screen-back-out { animation: screen-back-out var(--t-screen) var(--ease-out) both; z-index: 2 }

/* The screen on top casts onto the one behind it. */
.a-screen-in, .a-screen-back-out { box-shadow: -10px 0 30px rgba(0, 0, 0, .13); }

/* The screen underneath dims while it is covered. */
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .16);
  opacity: 0;
  pointer-events: none;
}
.a-screen-out::after     { animation: dim-in  var(--t-screen) var(--ease-out) both }
.a-screen-back-in::after { animation: dim-out var(--t-screen) var(--ease-out) both }

.a-row-out { animation: row-out .3s var(--ease-in) both; overflow: hidden }

/* The FAB lands just after the list settles, each time the list becomes current. */
.screen--current .fab { animation: pop-in .34s var(--ease-out) .1s both }

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

/* ── shell ──────────────────────────────────────────────── */

.app {
  position: relative;
  height: 100%;
  max-width: 620px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* Absolute so an outgoing and an incoming screen can overlap mid-transition. */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.screen--leaving { pointer-events: none; }

/* ── press feedback ─────────────────────────────────────── */

.btn, .tool, .iconbtn, .chip, .pill--ask, .gbtn, .titlebtn, .fab, .account,
.version__cta, .back, .switch, .source, .menu__item, .row {
  transition: transform .16s var(--ease-out), background-color .16s ease, opacity .16s ease;
}

.btn:active, .tool:active, .iconbtn:active, .chip:active, .pill--ask:active,
.gbtn:active, .titlebtn:active, .account:active, .version__cta:active {
  transform: scale(.94);
}
.fab:active { transform: scale(.9); }
.back:active { opacity: .5; }
.row:active, .menu__item:active, .source:active { background: var(--fill-2); }
.row:active { transform: scale(.985); }

/* ── landing ────────────────────────────────────────────── */

.landing {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-t) + 44px) 26px calc(var(--safe-b) + 28px);
}

.landing__mark { line-height: 0; }

.landing__title {
  margin: 26px 0 0;
  font: 500 32px/1.15 var(--serif);
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

.landing__lede {
  margin: 14px 0 0;
  font: 400 16px/1.6 var(--serif);
  color: var(--ink-body);
  text-wrap: pretty;
}

.landing__points {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.landing__points li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
  position: relative;
}
.landing__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.landing__point-title { font: 600 13px/1.3 var(--ui); color: var(--ink); }
.landing__point-body {
  font: 400 13.5px/1.55 var(--ui);
  color: var(--ink-1);
  text-wrap: pretty;
}

.landing__foot { margin-top: auto; padding-top: 40px; }

.landing__fine {
  margin: 14px 0 0;
  font: 400 11.5px/1.55 var(--ui);
  color: var(--ink-2);
  text-align: center;
  text-wrap: pretty;
}

/* Google's branded sign-in button. Colours and proportions follow their
   identity guidelines; only the corner radius is matched to the app. */
.gbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #747775;
}
.gbtn__logo { display: flex; flex: none; }
.gbtn__label {
  font-family: Roboto, var(--ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #1f1f1f;
}
@media (prefers-color-scheme: dark) {
  .gbtn { background: #131314; border-color: #8e918f; }
  .gbtn__label { color: #e3e3e3; }
}

/* ── list: header ───────────────────────────────────────── */

.head {
  flex: none;
  padding: calc(var(--safe-t) + 6px) 16px 10px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
}

.wordmark {
  font: 500 18px/1 var(--serif);
  letter-spacing: -.01em;
  color: var(--ink);
}

.topbar__right { display: flex; align-items: center; gap: 8px; }

.syncdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.account {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--fill);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 0;
}
.account img { width: 100%; height: 100%; object-fit: cover; }
.account__initial {
  display: flex;
  align-items: center;
  font: 500 12px/1 var(--ui);
  color: var(--ink-1);
  text-transform: uppercase;
}

.searchbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-bar);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.searchbar:focus-within {
  border-color: var(--accent);
  box-shadow: var(--sh-bar), 0 0 0 3px var(--accent-soft);
}
.searchbar__glyph {
  width: 15px; height: 15px;
  flex: none;
  border: 1.6px solid var(--ink-2);
  border-radius: 50%;
  transition: border-color .2s ease;
}
.searchbar:focus-within .searchbar__glyph { border-color: var(--accent); }
.searchbar__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: 400 15px/1.3 var(--ui);
  color: var(--ink);
  padding: 12px 0;
}

.pill--ask {
  flex: none;
  padding: 6px 9px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 11px/1 var(--ui);
}

.resultline {
  padding: 9px 3px 0;
  font: 400 11.5px/1 var(--ui);
  color: var(--ink-2);
}

/* ── list: rows ─────────────────────────────────────────── */

.skeleton {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.skeleton__item { display: flex; flex-direction: column; gap: 8px; }
.skeleton__bar {
  height: 13px;
  border-radius: 4px;
  background: var(--fill-3);
  background-image: linear-gradient(90deg, transparent 20%, var(--fill) 50%, transparent 80%);
  background-size: 180% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton__bar--sub { height: 10px; width: 82%; background-color: var(--fill-2); }

/* Rows arrive once, on the first list paint — not on every keystroke. */
.rows--enter .row {
  animation: row-in .34s var(--ease-out) both;
  animation-delay: calc(var(--i) * 28ms);
}

.list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 calc(var(--safe-b) + 100px);
}

.row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-1);
  cursor: pointer;
}
.row__main { flex: 1; min-width: 0; }
.row__head { display: flex; align-items: baseline; gap: 7px; }
.row__title {
  font: 500 16px/1.25 var(--serif);
  color: var(--ink);
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag {
  flex: none;
  font: 500 9.5px/1 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 4px 6px;
  border-radius: 5px;
}
.row__meta {
  display: flex;
  gap: 7px;
  margin-top: 4px;
  font: 400 12.5px/1.45 var(--ui);
  color: var(--ink-2);
}
.row__date { flex: none; color: var(--ink-3); }
.row__preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__dots {
  flex: none;
  width: 28px; height: 28px;
  margin-top: -2px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  padding: 0;
}
.row__dots i, .iconbtn--dots i {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-2);
}
.iconbtn--dots i { background: var(--ink-1); }

@media (hover: hover) {
  .row__dots:hover, .tool:hover:not(.tool--link), .menu__item:hover { background: var(--fill-2); }
}

.empty { padding: 64px 26px; text-align: center; }
.empty__title { font: 400 20px/1.35 var(--serif); color: var(--ink); }
.empty__sub {
  font: 400 13px/1.6 var(--ui);
  color: var(--ink-1);
  margin-top: 8px;
}
.empty .btn { margin-top: 16px; }

.noresults { padding: 48px 20px; text-align: center; }
.noresults__title { font: 400 16px/1.4 var(--serif); color: var(--ink-1); }
.noresults .btn { margin-top: 14px; }

.fab {
  position: absolute;
  right: 18px;
  bottom: calc(var(--safe-b) + 32px);
  width: 54px; height: 54px;
  border-radius: 17px;
  background: var(--invert-bg);
  color: var(--invert-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 300 28px/1 var(--ui);
  box-shadow: var(--sh-fab);
  z-index: 5;
}

/* ── shared bits ────────────────────────────────────────── */

.subhead {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-t) + 10px) 16px 10px;
}
.back {
  font: 500 14px/1 var(--ui);
  color: var(--accent-ink);
  padding: 0;
}
.back--pad { padding: 0 4px; }

.eyebrow {
  font: 600 9.5px/1 var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow--section { padding: 26px 0 10px; }
.eyebrow--tight { padding-bottom: 7px; }

.rule { height: 1px; background: var(--line-2); margin: 18px 0 16px; }

.dots { display: flex; gap: 5px; }
.dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1s infinite;
}
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
.dots--left { padding: 22px 0; }

.actions { display: flex; gap: 9px; padding: 24px 0 0; }
.actions--stack { padding: 14px 0 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 12px;
  font: 600 13px/1 var(--ui);
  color: var(--ink);
}
.btn--grow { flex: 1; }
.btn--block { display: flex; width: 100%; }
.btn--dark   { background: var(--invert-bg); color: var(--invert-ink); }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--ghost  { flex: none; border: 1px solid var(--line-3); }
.btn--quiet  { color: var(--danger); margin-top: 30px; }

/* ── answer ─────────────────────────────────────────────── */

.answer {
  flex: 1;
  overflow-y: auto;
  padding: 6px 20px calc(var(--safe-b) + 28px);
}
.answer__q {
  font: 400 22px/1.32 var(--serif);
  color: var(--ink);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
/* Says which note the answer was confined to, so the scope is never implied. */
.answer__scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font: 500 11.5px/1.3 var(--ui);
  max-width: 100%;
}
.answer__scope span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.answer__body { display: flex; flex-direction: column; gap: 12px; }
.answer__body p {
  margin: 0;
  font: 400 16px/1.7 var(--serif);
  color: var(--ink-body);
  text-wrap: pretty;
}

.sources { display: flex; flex-direction: column; gap: 7px; }
.source {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  width: 100%;
  text-align: left;
}
.source__dot {
  width: 5px; height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}
.source__title {
  flex: 1;
  min-width: 0;
  font: 500 13.5px/1.3 var(--ui);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source__chev { font: 400 13px/1 var(--ui); color: var(--ink-4); }

/* ── editor ─────────────────────────────────────────────── */

.subhead__tools { display: flex; align-items: center; gap: 5px; }
.iconbtn {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--fill);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  font: 400 15px/1 var(--ui);
  color: var(--ink);
  padding: 0;
}

.editor {
  flex: 1;
  overflow-y: auto;
  padding: 4px 20px 18px;
}
.editor__title {
  width: 100%;
  border: none;
  background: transparent;
  font: 500 25px/1.2 var(--serif);
  color: var(--ink);
  letter-spacing: -.015em;
  padding: 0 0 5px;
}
.editor__metarow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 26px;
  padding-bottom: 14px;
}
.editor__meta {
  font: 400 11.5px/1 var(--ui);
  color: var(--ink-3);
}
.titlebtn {
  margin-left: auto;
  flex: none;
  padding: 6px 9px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font: 600 11px/1 var(--ui);
}
.editor__body {
  display: block;
  width: 100%;
  min-height: 390px;
  border: none;
  background: transparent;
  resize: none;
  font: 400 15.5px/1.75 var(--serif);
  color: var(--ink-body);
}

.preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
}
.preview .md-h1 {
  font: 500 22px/1.25 var(--serif);
  color: var(--ink);
  letter-spacing: -.01em;
}
.preview .md-p {
  font: 400 15.5px/1.72 var(--serif);
  color: var(--ink-body);
}
.preview .md-li {
  font: 400 15.5px/1.7 var(--serif);
  color: var(--ink-body);
  padding-left: 16px;
  text-indent: -16px;
}
.preview b { font-weight: 600; }
.preview i { font-style: italic; }

.toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 12px calc(var(--safe-b) + 14px);
  background: var(--surface);
  border-top: 1px solid var(--line-1);
}
.tool {
  width: 33px; height: 33px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  padding: 0;
}
.tool--wide {
  width: auto;
  height: auto;
  padding: 9px 11px;
  background: var(--fill);
  font: 500 12px/1 var(--ui);
}
.tool--b { font: 600 14px/1 var(--ui); }
.tool--i { font: italic 400 16px/1 var(--serif); }
.tool--bullet { font: 400 17px/1 var(--ui); }
.tool--h { font: 600 13px/1 var(--ui); }
.tool--link {
  width: auto;
  height: auto;
  padding: 9px 10px;
  font: 500 12px/1 var(--ui);
  color: var(--accent-ink);
}
.tool__divider {
  width: 1px; height: 20px;
  background: var(--line-2);
  margin: 0 4px;
}
.tool__spacer { flex: 1; }

/* ── settings ───────────────────────────────────────────── */

.settings {
  flex: 1;
  overflow-y: auto;
  padding: 6px 20px calc(var(--safe-b) + 40px);
}
.settings__lede {
  font: 400 15px/1.6 var(--serif);
  color: var(--ink-body);
  padding: 4px 0 18px;
  text-wrap: pretty;
}
.settings__note {
  font: 400 12.5px/1.55 var(--ui);
  color: var(--ink-2);
  padding-top: 12px;
  text-wrap: pretty;
}
.settings__version {
  font: 400 11px/1 var(--mono);
  color: var(--ink-4);
  padding-top: 34px;
}

.profile { display: flex; align-items: center; gap: 12px; padding: 6px 0 2px; }
.profile__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  flex: none;
  background: var(--fill);
  border: 1px solid var(--line-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 15px/1 var(--ui);
  color: var(--ink-1);
  text-transform: uppercase;
}
.profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile__name { font: 500 16px/1.25 var(--serif); color: var(--ink); }
.profile__mail { font: 400 12.5px/1.4 var(--ui); color: var(--ink-2); margin-top: 2px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
}
.card__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  min-height: 50px;
}
.card__row + .card__row { border-top: 1px solid var(--line-1); }
.card__label { flex: 1; font: 500 14px/1.3 var(--ui); color: var(--ink); }
.card__value { font: 400 13px/1.3 var(--ui); color: var(--ink-2); text-align: right; }

.pill--test {
  flex: none;
  padding: 7px 12px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font: 600 12px/1 var(--ui);
}

/* Diagnostics, so a broken model can be identified without a terminal. */
.probe {
  margin: 10px 0 0;
  padding: 12px 13px;
  border-radius: 12px;
  background: var(--sunken);
  border: 1px solid var(--line-1);
  font: 400 11.5px/1.6 var(--mono);
  color: var(--ink-body);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  user-select: text;
  -webkit-user-select: text;
}

.switch {
  flex: none;
  width: 44px; height: 26px;
  border-radius: 13px;
  background: var(--fill-3);
  padding: 3px;
  transition: background .16s ease;
}
.switch span {
  display: block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .16s ease;
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] span { transform: translateX(18px); }

/* ── overlays ───────────────────────────────────────────── */

.scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  z-index: 20;
}
.scrim--dark { background: var(--scrim-dark); }

.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 21;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  padding: 12px 10px calc(var(--safe-b) + 26px);
  box-shadow: var(--sh-sheet);
}
.sheet--history {
  max-height: 70%;
  display: flex;
  flex-direction: column;
  padding: 14px 14px calc(var(--safe-b) + 26px);
}
#sheetSave { padding: 16px 18px calc(var(--safe-b) + 28px); }

.sheet__grab {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--line-3);
  margin: 0 auto 10px;
}
.sheet__caption {
  padding: 4px 12px 10px;
  font: 500 13px/1.3 var(--serif);
  color: var(--ink-2);
}
.sheet__heading {
  padding: 2px 6px 10px;
  font: 500 18px/1.3 var(--serif);
  color: var(--ink);
}
.sheet__title { font: 500 19px/1.3 var(--serif); color: var(--ink); padding-top: 4px; }
.sheet__sub {
  font: 400 13px/1.55 var(--ui);
  color: var(--ink-1);
  margin-top: 6px;
}
.sheet__preview {
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: 12px;
  background: var(--sunken);
  border: 1px solid var(--line-1);
  max-height: 120px;
  overflow-y: auto;
  font: 400 13.5px/1.6 var(--serif);
  color: var(--ink-quote);
  white-space: pre-wrap;
}

.menu { display: flex; flex-direction: column; }
.menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 12px;
  width: 100%;
  text-align: left;
}
.menu__icon {
  width: 22px;
  flex: none;
  text-align: center;
  font: 400 15px/1 var(--ui);
  color: var(--ink-1);
}
.menu__label { flex: 1; font: 500 15px/1.2 var(--ui); }
.menu__chev { font: 400 14px/1 var(--ui); color: var(--ink-4); }

.modal {
  position: absolute;
  left: 16px; right: 16px;
  top: calc(var(--safe-t) + 96px);
  z-index: 21;
  background: var(--surface);
  border-radius: 20px;
  padding: 20px 18px;
  box-shadow: var(--sh-modal);
}
.modal__title { font: 500 19px/1.25 var(--serif); color: var(--ink); }
.modal__sub {
  font: 400 12.5px/1.5 var(--ui);
  color: var(--ink-1);
  margin-top: 5px;
}
.modal__input {
  width: 100%;
  height: 66px;
  resize: none;
  border: 1px solid var(--line-3);
  border-radius: 12px;
  padding: 10px 11px;
  background: var(--surface-2);
  font: 400 13.5px/1.5 var(--ui);
  color: var(--ink);
}
.modal .actions { padding-top: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 14px; }
.chip {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-3);
  background: transparent;
  color: var(--ink);
  font: 500 12.5px/1 var(--ui);
}
.chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.working {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--veil);
  display: flex;
  align-items: center;
  justify-content: center;
}
.working__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.working__label { font: 400 13.5px/1 var(--serif); color: var(--ink-1); }

.versions {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.version {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
}
.version--current {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.version__label {
  flex: none;
  font: 600 11px/1 var(--mono);
  color: var(--ink-1);
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--fill);
}
.version--current .version__label { color: var(--accent-strong); }
.version__main { flex: 1; min-width: 0; }
.version__note {
  font: 500 13.5px/1.25 var(--ui);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.version__when { font: 400 11.5px/1.3 var(--ui); color: var(--ink-2); margin-top: 3px; }
.version__cta {
  flex: none;
  padding: 8px 11px;
  border-radius: 9px;
  font: 600 12px/1 var(--ui);
  color: var(--accent-ink);
}
.version__cta[disabled] { color: var(--ink-4); cursor: default; }

/* The landing page's call to action owns the bottom of the screen. */
.app[data-screen="landing"] .toast {
  top: calc(var(--safe-t) + 12px);
  bottom: auto;
}

.toast {
  position: absolute;
  left: 16px; right: 16px;
  bottom: calc(var(--safe-b) + 96px);
  z-index: 40;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--toast-bg);
  color: var(--toast-ink);
  font: 500 13px/1.3 var(--ui);
  box-shadow: var(--sh-toast);
}