:root {
  --bg: #15171c; --alt: #1a1d24; --hover: #1e222b; --raise: #232833;
  --ink: #e4e7ec; --dim: #b9c0ca; --faint: #95b3da;
  --rule: #4d5560; --hairline: #333944;
  --accent: #7cb1aa; --feedback: #cfa96b; --feedback-line: #8a7548;
  --good: #8db98a; --bad: #c88b8b;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* author display rules must not defeat the attribute */
body {
  font-family: var(--sans);
  color: var(--ink); background: var(--bg);
  margin: 0; font-size: 16px; line-height: 1.55;
}
.kbd, .mdfile, .prog { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* small-caps utility labels — chrome reads smaller and tighter than content */
.lbl {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.meta, .hint { font-family: var(--sans); font-size: 12.5px; color: var(--faint); }
.muted { color: var(--faint); }
.ok, .ins { color: var(--good); }
.no { color: var(--bad); }
.del { color: var(--bad); text-decoration: line-through; }
.yourwords { color: var(--feedback); font-style: italic; }

/* text-only status tags — no boxes, no pills */
.tag {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
.tag.ok { color: var(--good); } .tag.no { color: var(--bad); }
.tag.fbk { color: var(--feedback); } .tag.acc { color: var(--accent); }

/* ---------- chrome ---------- */
#chrome {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
#chrome .inner {
  max-width: 960px; margin: 0 auto; padding: 0 1.2rem;
  display: flex; gap: 4px; align-items: center; height: 54px;
}
#chrome .app {
  font-style: italic; font-weight: 700; font-size: 19px;
  color: var(--ink); text-decoration: none; margin-right: 22px;
}
.tab {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); text-decoration: none;
  padding: 0 11px; align-self: stretch; display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent; margin-bottom: -1px;
}
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--ink); } }
.tab .count { color: var(--accent); margin-left: 5px; letter-spacing: 0; }
#chrome .right { margin-left: auto; display: flex; gap: 16px; align-items: center; }
details.more { position: relative; }
details.more summary {
  list-style: none; cursor: pointer; color: var(--faint);
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
details.more summary::-webkit-details-marker { display: none; }
details.more[open] summary { color: var(--ink); }
details.more .more-menu {
  position: absolute; right: 0; top: calc(100% + 12px);
  background: var(--raise); border: 1px solid var(--rule);
  padding: 5px 0; min-width: 150px; display: flex; flex-direction: column; z-index: 60;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
details.more .more-menu a {
  padding: 6px 14px; color: var(--dim); text-decoration: none;
  font-family: var(--sans); font-size: 13px;
}
details.more .more-menu a:hover { background: var(--hover); color: var(--ink); }

/* ---------- layout ---------- */
.wrap { max-width: 960px; margin: 0 auto; padding: 1.8rem 1.2rem 6rem; }
/* the session view earns the extra column-width: title, date, rationale */
body.wide .wrap, body.wide #chrome .inner { max-width: 1280px; }
h1.scr {
  font-size: 27px; font-weight: 400; margin: 0 0 1.4rem;
  line-height: 1.25; letter-spacing: -0.005em;
}
.pagesub { font-style: italic; color: var(--faint); font-size: 15px; margin: -1.15rem 0 1.6rem; }
.pagesub .kbd { font-style: normal; }
.scr-row { display: flex; align-items: baseline; gap: 12px; }
.scr-row .aside { margin-left: auto; position: relative; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--rule); padding: 4px 12px;
  background: transparent; color: var(--dim); white-space: nowrap; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; line-height: 1.5;
  text-decoration: none; border-radius: 0;
  transition: transform 120ms var(--ease-out), background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
.btn.big { padding: 6px 16px; font-size: 13.5px; }
.btn.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 55%, var(--bg)); }
.btn.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--bg)); }
.btn.fbk { color: var(--feedback); border-color: var(--feedback-line); }
.btn.quiet { border-color: transparent; color: var(--faint); padding: 4px 8px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--ink); border-color: var(--dim); background: transparent; }
  .btn.primary:hover { background: #f2f4f7; color: var(--bg); border-color: #f2f4f7; }
  .btn.good:hover { color: var(--good); border-color: var(--good); }
  .btn.bad:hover { color: var(--bad); border-color: var(--bad); }
  .btn.fbk:hover { color: var(--feedback); border-color: var(--feedback); }
  .btn.quiet:hover { border-color: transparent; }
}
button.btn { appearance: none; }
.kbd {
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0 5px; font-size: 11px; background: none; color: var(--faint);
}

/* ---------- inputs ---------- */
.input, textarea.input, select.input {
  display: block; width: 100%;
  border: 1px solid var(--hairline); border-radius: 0;
  background: var(--alt); padding: 8px 12px; color: var(--ink);
  font-family: inherit; font-size: 15px; line-height: 1.55;
  resize: vertical; transition: border-color .12s, box-shadow .12s;
  appearance: none;
}
.input:focus, textarea.input:focus { outline: none; border-color: var(--faint); box-shadow: 0 1px 0 0 var(--faint); }
.input::placeholder { color: var(--faint); font-style: italic; }
/* the user's words are amber; italics stay on placeholders and quotes, not
   on text being typed */
textarea.fb { color: var(--feedback); border-color: var(--feedback-line); background: #1c1a15; }
textarea.fb:focus { border-color: var(--feedback); box-shadow: 0 1px 0 0 var(--feedback); }
.field { margin-bottom: 1.3rem; }
.field label { display: block; margin-bottom: 6px; }
.field > label {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}

/* ---------- thumbs ---------- */
.thumb {
  flex: none; width: 30px; height: 40px; border-radius: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-style: italic;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.07);
  object-fit: cover; overflow: hidden;
}
img.thumb { display: block; font-style: normal; }
.cellflex { display: flex; gap: 12px; align-items: flex-start; }

/* ---------- NOW block: typographic lede, rules not boxes ---------- */
.now { padding: 0 0 1.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.4rem; }
.now .nowlabel { margin-bottom: 10px; }
.nowlabel {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--feedback);
}
.nowlabel.acc { color: var(--accent); }
.nowlabel.plain { color: var(--faint); }
.now .body { display: flex; gap: 16px; align-items: flex-start; }
.now .thumb { width: 46px; height: 62px; font-size: 22px; margin-top: 4px; }
.now h2 { font-size: 22px; font-weight: 400; margin: 0 0 2px; line-height: 1.3; }
.now h2 a { color: var(--ink); text-decoration: none; }
.now h2 a:hover { text-decoration: underline; text-decoration-color: var(--faint); }
.now .acts { display: flex; gap: 10px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.now [data-row].cursor { box-shadow: -10px 0 0 -8px var(--ink); }

/* ---------- queue lanes: zebra rows under a ruled small-caps header ---------- */
.lane-h {
  display: flex; align-items: baseline; gap: 8px;
  margin: 1.9rem 0 0; padding: 0 10px 5px;
  border-bottom: 1px solid var(--rule);
}
.lane-h .n { color: var(--dim); font-weight: 400; letter-spacing: 0; font-size: 12px; }
.rowitem { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.rowitem.alt { background: var(--alt); }
.rowitem.cursor { background: var(--raise); box-shadow: inset 2px 0 0 var(--ink); }
@media (hover: hover) and (pointer: fine) { .rowitem:hover { background: var(--hover); } }
.rowitem .twrap { min-width: 0; }
.rowitem .t {
  font-size: 15.5px; color: var(--ink); text-decoration: none;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .rowitem .t:hover { text-decoration: underline; text-decoration-color: var(--faint); }
}
.rowact { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; position: relative; }

/* ---------- example sessions: the queue's empty-state cards ---------- */
.excards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 1rem; }
@media (max-width: 700px) { .excards { grid-template-columns: 1fr; } }
.excard {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--hairline); padding: 14px 16px 12px;
}
.excard .exgoal {
  margin: 10px 0 12px; font-size: 15px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.excard .exview { margin-top: 8px; font-family: var(--sans); font-size: 12.5px; color: var(--dim); }
.excard:hover .exview { color: var(--ink); }

/* ---------- session list: ruled entries, goal as the headline ---------- */
.sessrow {
  display: block; text-decoration: none; color: inherit;
  padding: 13px 10px 14px; border-bottom: 1px solid var(--hairline); cursor: pointer;
}
.sessrow:first-of-type { border-top: 1px solid var(--rule); }
.sessrow.alt { background: var(--alt); }
@media (hover: hover) and (pointer: fine) { .sessrow:hover, .excard:hover { background: var(--hover); } }
.sessrow .goal { font-size: 18px; margin-bottom: 3px; display: flex; gap: 14px; align-items: baseline; line-height: 1.35; }
.sessrow .goal .status { margin-left: auto; flex: none; }

/* ---------- tables: header rule, zebra body, no cell borders ---------- */
table.list, table.wf { width: 100%; border-collapse: collapse; }
table.list th, table.wf th {
  text-align: left; padding: 4px 10px 6px; border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--faint); font-weight: 600; background: none;
}
table.list td, table.wf td { padding: 9px 10px; vertical-align: top; }
table.list tr.alt td, table.wf tr:nth-child(even) td { background: var(--alt); }
table.list tr.cursor td { background: var(--raise); }
table.list tr.cursor td:first-child { box-shadow: inset 2px 0 0 var(--ink); }
.rationale { font-size: 14px; color: var(--dim); line-height: 1.5; }
/* date is a first-class column, not a scrap of the byline: tabular figures so
   the years line up and the list can be read down the column */
.datecell, .numcell {
  font-variant-numeric: tabular-nums; font-family: var(--sans); font-size: 12.5px;
  color: var(--dim); white-space: nowrap;
}
.numcell { text-align: right; }
/* the list is talked about by position ("number 7"), so the row index is its
   own column — dim, tabular, out of the title's way */
td.idx {
  font-family: var(--sans); font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--faint); text-align: right; padding-top: 12px;
}
.datecell .undated { color: var(--rule); }
/* sort controls: the column head and the queue's order switch are links that
   look like the label they replace, and go bright when they are what's on */
.sorth, .sortbar a { color: inherit; text-decoration: none; }
.sorth.on, .sortbar a.on { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .sorth:hover, .sortbar a:hover { color: var(--dim); }
}
.sortbar {
  display: inline-flex; gap: 10px; align-items: baseline;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
tr.dismissed .t { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--rule); }
tr.dismissed .thumb { opacity: .4; }
tr.noterow td { background: #1c1a15; border-top: 1px solid var(--feedback-line); border-bottom: 1px solid var(--feedback-line); }
tr.noterow.alt td { background: #1c1a15; }

/* ---------- clarify wizard: one decision at a time, chips then own words ---------- */
.wiz { max-width: 680px; }
.wizq { border: 0; margin: 0 0 2rem; padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* re-display restarts the animation, so each step entered gets one rise */
  form[data-wizard] .wizq { animation: wizstep 170ms var(--ease-out); }
}
@keyframes wizstep { from { opacity: 0; transform: translateY(5px); } }
.wizhead { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; }
.wizquestion { font-size: 19px; line-height: 1.45; margin: 0 0 14px; }

/* option rows: full-row targets, a drawn mark instead of the native widget —
   the native control can't match the square, hairline, accent language */
.wizopt {
  position: relative; display: grid; grid-template-columns: 15px 1fr;
  column-gap: 12px; row-gap: 1px; align-items: start;
  padding: 10px 14px; margin-bottom: 6px; cursor: pointer;
  border: 1px solid var(--hairline);
  transition: border-color 120ms ease, background-color 120ms ease,
              transform 100ms var(--ease-out);
}
.wizopt::before {
  content: "✓"; grid-row: 1 / span 2; margin-top: 4px;
  width: 15px; height: 15px; border: 1px solid var(--rule);
  font-size: 10px; line-height: 14px; text-align: center; color: transparent;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.wizopt .opt-label { font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.wizopt .opt-detail {
  grid-column: 2; font-family: var(--sans); font-size: 12.5px;
  color: var(--faint); line-height: 1.45;
}
.wizopt input { position: absolute; opacity: 0; pointer-events: none; }
.wizopt:active { transform: scale(0.995); }
@media (hover: hover) and (pointer: fine) {
  .wizopt:hover { border-color: var(--rule); background: var(--hover); }
}
.wizopt:has(input:checked) { border-color: var(--accent); background: var(--raise); }
.wizopt:has(input:checked)::before {
  background: var(--accent); border-color: var(--accent); color: var(--bg);
}
.wizopt:has(input:focus-visible) { outline: 1px solid var(--accent); outline-offset: 1px; }
.wiz textarea.fb { margin-top: 6px; }
.wiznav { display: flex; gap: 10px; margin-top: 16px; }
.wiznav .primary { margin-left: auto; }
.wizfoot { margin-top: 1.4rem; border-top: 1px solid var(--rule); padding-top: 1rem; }

/* the wizard's answers under a session title: an addendum, not a second title */
.addendum {
  display: flex; flex-wrap: wrap; gap: 5px 22px; align-items: baseline;
  margin: -1rem 0 1.7rem;
}
.addendum .qa { font-size: 13.5px; color: var(--feedback); line-height: 1.5; }
.addendum .qa .q {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
  margin-right: 7px;
}

/* ---------- stat line (no boxed strips) ---------- */
.statline, .strip {
  display: flex; gap: 1.5rem; row-gap: .3rem; align-items: baseline; flex-wrap: wrap;
  font-family: var(--sans); font-size: 13px; color: var(--dim);
  padding: 0 0 .8rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.2rem;
}
.statline .num, .strip .num { font-size: 15px; }
tr.waiting td, tr.waiting .t { color: var(--faint); }
.bar {
  width: 150px; height: 3px; background: var(--raise); overflow: hidden;
  position: relative; align-self: center;
}
.bar i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: var(--accent); animation: shimmer 1.1s ease-in-out infinite alternate;
}
@keyframes shimmer { from { left: 0; } to { left: 60%; } }
.prog { color: var(--faint); font-size: 13px; }
.prog b { color: var(--accent); }

/* ---------- popover ---------- */
.pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--raise); border: 1px solid var(--rule);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 5px 0; min-width: 230px;
  display: flex; flex-direction: column;
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
  transform-origin: top right;
  @starting-style { opacity: 0; transform: scale(0.97); }
}
.pop .ph { padding: 5px 14px 6px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
.pop form { display: contents; }
.pop button {
  text-align: left; background: none; border: 0; color: var(--dim);
  padding: 6px 14px; cursor: pointer; font-family: var(--sans); font-size: 13px;
}
.pop button:hover { background: var(--hover); color: var(--ink); }

/* ---------- modal ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(8,10,14,.74); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  transition: opacity 150ms ease;
  @starting-style { opacity: 0; }
}
.modal {
  width: min(640px, 94vw); max-height: 90vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--rule);
  padding: 1.4rem 1.6rem 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
  @starting-style { transform: scale(0.97); opacity: 0; }
}
.mhead {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 1.1rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--hairline);
}
.mhead .thumb { width: 38px; height: 50px; font-size: 18px; }
.mhead .mtitle { font-size: 18px; line-height: 1.35; }

/* segmented yes/no — hidden radios, :has() styles the label */
.seg { display: inline-flex; border: 1px solid var(--rule); }
.seg label {
  color: var(--faint); padding: 4px 16px; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px;
  transition: background 100ms ease, color 100ms ease;
}
.seg label + label { border-left: 1px solid var(--rule); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--raise); color: var(--ink); font-weight: 600; }
.seg label.y:has(input:checked) { color: var(--good); }
.seg label.n:has(input:checked) { color: var(--bad); }
.segrow { display: flex; gap: 1.8rem; align-items: center; margin-bottom: 1.2rem; flex-wrap: wrap; }
.segrow .q { font-style: italic; font-size: 15px; color: var(--dim); margin-right: 6px; }

.fmtbar { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.wys {
  min-height: 120px; cursor: text; border: 1px solid var(--feedback-line);
  padding: 9px 12px; color: var(--feedback); background: #1c1a15;
  font-size: 15px;
  transition: border-color .12s, box-shadow .12s;
}
.wys:focus { outline: none; border-color: var(--feedback); box-shadow: 0 1px 0 0 var(--feedback); }
.wys:empty::before { content: attr(data-ph); color: var(--faint); font-style: italic; }
.wys b { color: #e2bf85; }
.wys ul { margin: 2px 0 2px 1.3rem; padding: 0; }
.wys.invalid, .wys.invalid:focus { border-color: var(--bad); box-shadow: 0 1px 0 0 var(--bad); }

/* ---------- compose: a writing sheet, for goals long enough to need one ---------- */
.compose { max-width: 720px; }
.frontmatter {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: .7rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--hairline);
}
.frontmatter label {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.fm-input {
  border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0;
  background: none; color: var(--ink); font-family: var(--sans); font-size: 15px;
  padding: 1px 2px 2px; width: 200px; appearance: none; transition: border-color .12s;
}
.fm-input:focus { outline: none; border-bottom-color: var(--feedback); }
/* known domains, one click away while the field is still empty */
.fm-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.fm-chips .chip {
  background: none; appearance: none; cursor: pointer; line-height: 1.55;
  transition: color .12s, border-color .12s;
}
.fm-chips .chip:hover, .fm-chips .chip:focus-visible {
  color: var(--ink); border-color: var(--faint); outline: none;
}
/* long-form prose: upright, roomier, and it grows with what you write */
.wys.sheet, textarea.input.sheet {
  min-height: 320px; font-style: normal; font-size: 17px; line-height: 1.72;
  padding: 14px 17px;
}
.wys.sheet p { margin: 0 0 .75em; }
.wys.sheet div + div { margin-top: .35em; }
.editor-foot { margin-top: 7px; }
.chip.no { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--bg)); }

/* ---------- under the hood: the live pipeline feed ---------- */
.feed, .spend { border-bottom: 1px solid var(--hairline); margin-bottom: 1.2rem; }
.feed-h {
  display: flex; gap: 12px; align-items: baseline; cursor: pointer;
  padding: 0 2px .5rem; list-style: none;
}
.feed-h::-webkit-details-marker { display: none; }
details.feed .feed-h::before, details.spend .feed-h::before {
  content: "▸"; color: var(--faint); font-size: 10px; margin-right: -6px;
}
details.feed[open] .feed-h::before, details.spend[open] .feed-h::before { content: "▾"; }
details.spend { border-bottom: 0; margin-top: 1.6rem; border-top: 1px solid var(--hairline); padding-top: .9rem; }
.feed-body {
  max-height: 210px; overflow-y: auto; padding: 0 2px .8rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px;
  line-height: 1.75; overscroll-behavior: contain;
}
.feed-body.tall { max-height: 420px; }
.fl { color: var(--dim); white-space: pre-wrap; word-break: break-word; }
.fl .at { color: var(--rule); margin-right: 10px; }
.fl.phase { color: var(--ink); font-weight: 600; margin-top: 4px; }
.fl.ok { color: var(--good); }
.fl.no { color: var(--bad); }
.fl.dim, .fl.quiet { color: var(--faint); }
.fl.cost { color: var(--accent); }

/* ---------- reader: stored fulltext, not a pdf in a viewport ---------- */
.reader { max-width: 660px; margin: 0 auto; }
.reader h1 { font-size: 30px; font-weight: 400; line-height: 1.22; margin: 0 0 .5rem; }
.reader .byline { font-family: var(--sans); font-size: 13px; color: var(--faint); margin: 0 0 .3rem; }
.reader p { font-size: 17.5px; line-height: 1.72; margin: 0 0 1.15em; }

/* ---------- toasts (flash messages + transient) ---------- */
#toasts {
  position: fixed; bottom: 20px; right: 20px; z-index: 70;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
  background: var(--raise); border: 1px solid var(--rule);
  padding: 8px 14px; font-family: var(--sans); font-size: 13px; color: var(--ink);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  display: flex; gap: 8px; align-items: center;
  transition: transform 300ms var(--ease-out), opacity 300ms ease;
  @starting-style { transform: translateY(10px); opacity: 0; }
}
.toast.out { opacity: 0; transform: translateY(4px); }
.toast.no { color: var(--bad); }
.toast.dim { color: var(--faint); }

/* ---------- misc ---------- */
.kbdhint { font-family: var(--sans); color: var(--faint); font-size: 12px; margin-top: 1.8rem; padding: 0 10px; }
.helplist { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; margin-top: 10px; }
.helplist .kbd { justify-self: start; }
.prose { max-width: 620px; color: var(--dim); }
.divider { border: 0; border-top: 1px solid var(--hairline); margin: 1.4rem 0; }

.mdfile {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1.05rem 0.4rem; white-space: pre-wrap; color: var(--dim);
  line-height: 1.7; font-size: 13px;
}
.mdfile .h { font-weight: bold; color: var(--accent); }
.mdfile .yw { color: var(--feedback); }

.dropzone {
  text-align: center; border: 1px dashed var(--rule);
  padding: 1.4rem; color: var(--faint); background: var(--alt); margin-bottom: 1rem;
  font-family: var(--sans); font-size: 13px;
}
.chip { border: 1px solid var(--hairline); padding: 0 8px; color: var(--dim); font-family: var(--sans); font-size: 12.5px; }

/* legacy classes still used by secondary pages (import, files, metrics,
   dismissed) — styled to match, converted as those pages are touched */
.btn.ghost { border-color: var(--hairline); color: var(--faint); }
h1.scr .sub { font-family: var(--sans); color: var(--faint); font-weight: 400; font-size: 13px; font-style: italic; }
.badge {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
  background: none; border: 0; padding: 0;
}
.badge.ok { color: var(--good); } .badge.no { color: var(--bad); }
.badge.fbk { color: var(--feedback); } .badge.acc { color: var(--accent); }
.inote { font-size: 12.5px; font-family: var(--sans); }
.inote.ok { color: var(--good); } .inote.no { color: var(--bad); } .inote.dim { color: var(--faint); }
.wsep { opacity: .5; }
.panel {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--hairline);
  padding: .9rem 0.2rem; margin-bottom: 1.2rem;
}
.panel .panel-title { font-weight: 600; margin-bottom: 4px; }

/* accounts: the chrome's which-account chip, and the link code — a string
   that gets read off one screen and typed into another, so it is set large,
   mono, and wide-tracked to keep the characters apart. */
#chrome .acct {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--faint); text-decoration: none; letter-spacing: .04em;
  border: 1px solid var(--hairline); border-radius: 2px; padding: 1px 6px;
}
#chrome .acct:hover { color: var(--dim); border-color: var(--rule); }
#chrome .acct.on { color: var(--accent); border-color: var(--accent); }
.linkcode {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 28px; font-weight: 600; letter-spacing: .22em;
  color: var(--accent); background: var(--alt);
  border: 1px dashed var(--rule); padding: .8rem 1rem;
  text-align: center; margin: 0 0 .4rem; max-width: 22ch;
}
.codeform { display: flex; gap: 10px; align-items: center; max-width: 34ch; }
.codeform .input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em; text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .modal, .overlay, .pop, .toast { transition: opacity 150ms ease; transform: none; }
  .bar i { animation: none; width: 100%; opacity: .35; }
}