/* tmux-trainer :: app.css — chrome around the terminal */

:root {
  --bg:        #0d1117;
  --bg-2:      #131a24;
  --bg-3:      #1b2430;
  --line:      #263141;
  --text:      #c9d4e2;
  --text-dim:  #7d8ea3;
  --text-fade: #55637a;
  --accent:    #4db8a5;
  --accent-2:  #6aa8ff;
  --warn:      #e0a458;
  --bad:       #e06c75;
  --good:      #7fc98a;

  --term-bg:     #0b0f14;
  --term-fg:     #cdd6e3;
  --term-dim:    #6f7d90;
  --status-bg:   #2f7d6b;
  --status-fg:   #06120f;
  --status-cur:  #d7e4dd;
  --border:      #3c4a5c;
  --border-live: #4db8a5;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas,
               "DejaVu Sans Mono", monospace;
  --radius: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  overflow: hidden;
}

#app {
  display: grid;
  /* Third row is the legal/footer strip. fit() sizes the terminal to whatever
     box it gets, so the ~28px comes out of the terminal as about one row --
     not out of the layout. */
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

/* ---- footer ------------------------------------------------------------ */

/* The Impressum and privacy links live here rather than in the header: the
   header is flex-wrap:nowrap, already sheds furniture at 1060px and 1000px,
   and must not grow (see the note on `header` below -- it once jumped 51px ->
   99px and stole that height from the terminal). A footer row cannot scroll
   away and cannot wrap, so the links are reachable at every width and in
   every mode. Nothing in here may use <nav>: that element is styled for the
   mode bar. */
footer {
  display: flex; align-items: center; gap: 13px;
  padding: 6px 16px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-fade);
  flex-wrap: nowrap; white-space: nowrap;
}
footer a { color: var(--text-dim); text-decoration: none; }
footer a:hover { color: var(--accent); text-decoration: underline; }
footer a:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.ft-dot { color: var(--text-fade); margin: 0 3px; }
.ft-all { color: var(--text-fade); }
.ft-more-short { display: none; }

/* The cross-sell collapses to one link before the legal links are ever at
   risk; the legal links themselves are never hidden at any width. */
@media (max-width: 860px) {
  .ft-more { display: none; }
  .ft-more-short { display: inline; }
}
/* Below the supported range the header already overflows on its own (it is
   the widest row at every width). Drop the optional parts so the strip never
   adds to that -- the two legal links stay, at every width, always. */
@media (max-width: 700px) {
  .ft-copy { display: none; }
  .ft-more-short { display: none; }
}

/* ---- header ------------------------------------------------------------ */

header {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  /* Nothing in the header may wrap: it used to grow from 51px to 99px as soon
     as the tagline ran out of room, stealing that height from the terminal. */
  flex-wrap: nowrap;
}

.brand { display: flex; align-items: baseline; gap: 9px; flex: none; white-space: nowrap; }
.brand b { font-size: 15px; letter-spacing: .3px; }
.brand span { color: var(--text-fade); font-size: 12px; }
.brand .dot { color: var(--accent); }
/* The wordmark is a link to the family site. It must read as the brand, not
   as a link: no underline, no link colour, and the footer links' hover
   treatment (accent + underline) so the two agree. */
.brand a { color: inherit; text-decoration: none; }
.brand a:hover { color: var(--accent); text-decoration: underline; }
.brand a:focus-visible {
  outline: 1px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}

nav { display: flex; gap: 4px; flex: none; }
nav button {
  background: transparent; color: var(--text-dim);
  border: 1px solid transparent; border-radius: 6px;
  padding: 6px 13px; font: inherit; font-size: 13px; cursor: pointer;
}
nav button:hover { color: var(--text); background: var(--bg-3); }
nav button.on {
  color: var(--bg); background: var(--accent); font-weight: 600;
}

.spacer { flex: 1; }

.mode-pick {
  display: flex; align-items: center; gap: 7px; flex: none;
  font-size: 11px; color: var(--text-fade); white-space: nowrap;
}
.mode-pick span { text-transform: uppercase; letter-spacing: .7px; }
.mode-pick select {
  background: var(--bg-3); color: var(--text); font: inherit; font-size: 12px;
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px;
  cursor: pointer;
}
.mode-pick select:hover { border-color: var(--text-fade); }
.mode-pick select:focus { outline: none; border-color: var(--accent); }

.mouse-pick {
  display: flex; align-items: center; gap: 6px; flex: none; cursor: pointer;
  font-size: 11px; color: var(--text-fade); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .7px;
}
.mouse-pick input { accent-color: var(--accent); cursor: pointer; margin: 0; }
.mouse-pick:hover { color: var(--text-dim); }

.hdr-stat {
  display: flex; align-items: center; gap: 8px; flex: none;
  font-size: 12px; color: var(--text-dim); white-space: nowrap;
}
.hdr-stat .bar {
  width: 120px; height: 6px; border-radius: 3px;
  background: var(--bg-3); overflow: hidden;
}
.hdr-stat .bar i { display: block; height: 100%; background: var(--accent); }
#mastery-bar { width: 0; }

/* The same arrangement for every other bar fill whose width is a computed
   percentage: the markup carries data-w and js/ui/panel.js applies the width
   by CSSOM right after the innerHTML write. width:0 is the pre-write default,
   so a bar that never gets filled cannot flash at a block's full width. */
[data-w] { width: 0; }

.icon-btn {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 12px;
  cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--text-fade); }

/* ---- main split -------------------------------------------------------- */

main {
  display: grid;
  grid-template-columns: 1fr 372px;
  min-height: 0;
}
main.wide { grid-template-columns: 1fr; }

/* Reference has no use for the terminal, so it takes the whole width and
   flows into columns instead of squeezing into the rail. */
main.ref { grid-template-columns: 1fr; }
main.ref .stage { display: none; }
main.ref aside { border-left: 0; }
main.ref .panel-body { display: block; }
@media (min-width: 900px) {
  /* Reference columns: multicol on the INNER .ref-cols wrapper (height auto),
     NOT on the fixed-height scroll pane. The pane keeps its vertical scroll;
     the wrapper balances groups into side-by-side columns that fill top-to-
     bottom — no sideways spill (the bug when multicol sat on the pane) and no
     grid-row voids (the bug when the pane was a row-flow grid). break-inside
     keeps each group whole. Third time; measured at 980/1180/1466/1680. */
  main.ref .ref-cols { columns: 340px; column-gap: 30px; }
  main.ref .ref-cols > .ref-group { break-inside: avoid; margin: 0 0 14px; }
  main.ref .search { max-width: 520px; }
  /* Topics still lays its equal-height cards out as a real grid. */
  main.ref .panel-body > .tier-card { align-self: start; }
  /* Topics proper IS a grid: row-major fill, equal heights, no rag. */
  main.topics .panel-body {
    column-width: auto; column-gap: normal;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 12px; align-items: stretch; align-content: start;
  }
  main.topics .panel-body > .tier-card { margin-top: 0; }
  /* The footer button was stretching to the full 1550px row. */
  main.topics .panel-foot .btn { max-width: 420px; }
}

.stage {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  padding: 16px;
  gap: 10px;
}

/* ---- the terminal ------------------------------------------------------ */

.term-wrap {
  flex: 1; min-height: 0;
  /* Deliberately NOT a flex container. Chromium will not run a text-selection
     drag inside one here, so with tmux's mouse off — the mode whose entire
     point is that the browser keeps the mouse — dragging across terminal
     output selected nothing at all. Measured: identical markup selects fine
     under `display: block` and never under `display: flex` or `grid`.
     The terminal is sized to the wrap by JS, so `margin: 0 auto` keeps it
     centred; the only loss is that spare vertical space now sits below it
     rather than being split, which is under ten pixels. */
  display: block;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  position: relative;
}
.term-wrap.focused { border-color: var(--accent); }
.term-wrap.mouse-on #term { user-select: none; }
#term ::selection { background: #33455c; color: #eaf2ff; }

#term {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.28;
  background: var(--term-bg);
  color: var(--term-fg);
  white-space: pre;
  border-radius: 4px;
  padding: 6px 8px;
  outline: none;
  /* Terminal text is selectable, so Ctrl-C can copy it like anywhere else.
     Turning tmux's mouse mode on takes selection away — which is exactly what
     happens in a real terminal, and the trade-off the mouse cards describe. */
  user-select: text;
  margin: 0 auto;                        /* centred without a flex parent */
  box-shadow: 0 8px 34px rgba(0,0,0,.45);
}
#term .row { height: 1.28em; }

#term .dim      { color: var(--term-dim); }
#term .border   { color: var(--border); }
#term .border-active { color: var(--border-live); }
#term .border-marked { color: var(--warn); }
#term .copytag { background: var(--warn); color: #201503; }
#term .cursor   { background: var(--accent); color: var(--term-bg); }
#term .sel      { background: #33455c; color: #eaf2ff; }
#term .match    { background: rgba(229,192,123,.35); color: #f4e8c8; }
#term .host     { color: #9fb3c8; }
#term .clock    { color: var(--accent); }

#term .status        { background: var(--status-bg); color: var(--status-fg); }
#term .status-left   { font-weight: 700; }
#term .status-current{ background: var(--status-cur); color: #0b2b23; font-weight: 700; }

#term .msgline { background: var(--warn); color: #201503; }
#term .cmdline { background: var(--warn); color: #201503; }
#term .chooser { background: #16202c; color: #b9c8da; }
#term .chooser-title { color: var(--accent); }
#term .chooser-sel { background: var(--accent); color: #06120f; }
#term .keylist { background: #11161f; color: var(--text-dim); }
#term .keylist-head { color: var(--accent); }
#term .keylist-key { color: #e6b673; }
#term .keylist-status { background: var(--accent); color: #06120f; }
#term .pnum { color: var(--accent-2); }
#term .pnum-active { color: #fff; background: var(--accent-2); }

/* Recall surface: free-recall and drill questions deliberately hide the
   terminal, so there is nothing on screen to read the answer off. */
.recall {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 20px; padding: 40px;
  background: var(--bg-2); border-radius: var(--radius); text-align: center;
}
.recall[hidden] { display: none; }
.recall-eyebrow {
  font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.recall-q {
  font-size: clamp(18px, 2.4vw, 30px); line-height: 1.45; max-width: 22em;
  color: var(--text); font-weight: 500;
}
.recall-keys { min-height: 40px; gap: 6px; }
.recall-keys kbd { font-size: 17px; padding: 7px 13px; border-bottom-width: 3px; }
.recall-wait { color: var(--text-dim); opacity: .55; font-size: 13px;
               font-family: var(--font-mono); }
.recall-verdict { font-size: 14px; line-height: 1.6; min-height: 3em; max-width: 30em; }
.recall-verdict .ok  { color: var(--good); }
.recall-verdict .no  { color: var(--bad); }
.reveal {
  margin-top: 16px; padding: 12px 14px; max-width: 34em;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-3);
  text-align: left;
}
.reveal h5 {
  margin: 0 0 6px; font-size: 10.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.reveal p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }
.reveal .fam { display: flex; flex-direction: column; gap: 5px; }
.reveal .famrow {
  /* Long typed commands must be able to take the whole row and wrap —
     flex:none on the key column let a 460px command sit in a 309px rail. */
  display: flex; flex-wrap: wrap; gap: 4px 9px; align-items: baseline;
  font-size: 12px;
}
.reveal .famrow .fk {
  flex: 0 1 auto; max-width: 100%; min-width: 0;
  display: flex; align-items: center;
}
.reveal .famrow .fk code { min-width: 0; }
.reveal .famrow .fd { flex: 1 1 14em; }
.reveal .famrow .fd { color: var(--text-fade); line-height: 1.45; }
.reveal .famrow .fd em { font-style: normal; color: var(--text-fade); opacity: .8; }
.reveal .famrow code {
  font-family: var(--font-mono); font-size: 11px; background: var(--bg-2);
  padding: 2px 5px; border-radius: 3px; color: var(--text-dim);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.recall-verdict .cmd {
  display: block; margin-top: 8px; font-family: var(--font-mono);
  font-size: 12.5px; color: var(--text-fade);
}

/* the "not focused, click to type" veil */
.veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,11,16,.72); backdrop-filter: blur(2px);
  border-radius: var(--radius);
  cursor: pointer; font-size: 14px; color: var(--text);
  flex-direction: column; gap: 8px;
}
.veil small { color: var(--text-dim); font-size: 12px; }
.term-wrap.focused .veil { display: none; }
/* Over the recall surface the veil is a hint bar, not a blackout — the
   question has to stay readable while you decide to click. */
.term-wrap:has(.recall:not([hidden])) .veil {
  background: none; backdrop-filter: none;
  justify-content: flex-end; padding-bottom: 22px;
}
.term-wrap:has(.recall:not([hidden])) .veil > span { display: none; }

/* ---- key readout ------------------------------------------------------- */

.keybar {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px;
  padding: 7px 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12.5px; color: var(--text-dim);
}
.keybar .label { color: var(--text-fade); }
.keys { display: flex; gap: 4px; align-items: center; }

kbd {
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px; padding: 2px 6px; color: var(--text);
  white-space: nowrap;
}
kbd.hot { background: var(--accent); border-color: var(--accent); color: #06120f; }
kbd.bad { background: var(--bad); border-color: var(--bad); color: #2a0a0c; }

.prefix-led {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-fade);
}
.prefix-led i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--line);
}
.prefix-led.armed { color: var(--warn); }
.prefix-led.armed i { background: var(--warn); border-color: var(--warn);
  box-shadow: 0 0 8px var(--warn); }

/* ---- side panel -------------------------------------------------------- */

aside {
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
}
main.wide aside { display: none; }

.panel-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.panel-head .eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--accent); font-weight: 700;
}
.panel-head h2 { margin: 5px 0 0; font-size: 16px; font-weight: 600; }
.panel-head .sub { margin-top: 4px; font-size: 12px; color: var(--text-fade); }

.panel-body {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
/* Flex items shrink by default, so once a card is taller than the panel every
   child got squashed and clipped its own text instead of the panel scrolling.
   A one-line code block was the worst hit: it needed 36px and was given 22. */
.panel-body > * { flex-shrink: 0; }
.panel-foot {
  padding: 12px 16px; border-top: 1px solid var(--line);
  display: flex; gap: 8px; flex-wrap: wrap;
}
/* Three buttons with key hints do not fit a narrow rail in one row. */
.panel-foot .btn { flex: 1 1 auto; min-width: 0; }

.step-dots { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px; }
.step-dots i {
  width: 20px; height: 4px; border-radius: 2px; background: var(--bg-3);
}
.step-dots i.done { background: var(--accent); }
/* A dot you got WRONG must not wear the success colour. */
.step-dots i.miss { background: var(--bad); opacity: .6; }
.step-dots i.now  { background: var(--warn); }
/* CSP: the discrimination block's wrong-trial dot used to carry
   style="background:var(--bad)" from js/ui/panel.js. style-src 'self' blocks
   attribute styles even when they come in through .innerHTML, so it is a
   state class now. NOT .miss — that one also dims to .6 opacity. */
.step-dots i.is-bad { background: var(--bad); }

.task {
  background: var(--bg-3); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px; padding: 13px 14px;
  font-size: 14px; line-height: 1.55;
}
.task .goal { color: var(--text); }
.task .why {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-dim); line-height: 1.5;
}
/* CSP: a scenario checkpoint row, formerly an inline style on the div that
   panel.js builds inside .task .goal. The tick turns green by state class. */
.ckpt-row {
  display: flex; gap: 8px; padding: 3px 0;
  font-size: 13px; color: var(--text-dim);
}
.ckpt-row.is-good { color: var(--good); }

.hint {
  font-size: 13px; color: var(--text-dim); line-height: 1.55;
  background: rgba(224,164,88,.08); border: 1px solid rgba(224,164,88,.28);
  border-radius: 6px; padding: 10px 12px;
}
.hint .keys { margin-top: 7px; }

.verdict { font-size: 13px; border-radius: 6px; padding: 10px 12px; line-height: 1.5; }
.verdict.good { background: rgba(127,201,138,.10); border: 1px solid rgba(127,201,138,.34); color: var(--good); }
.verdict.bad  { background: rgba(224,108,117,.10); border: 1px solid rgba(224,108,117,.34); color: var(--bad); }
.verdict.note { background: rgba(229,192,123,.08); border: 1px solid rgba(229,192,123,.28); color: var(--warn); }
/* CSP: two verdicts that panel.js spaced with an inline margin — the review
   run's finished banner and the course's "read this card first" note. */
.verdict.run-summary { margin-bottom: 16px; }
.verdict.intro-note     { margin-bottom: 12px; }

.btn {
  flex: 1; padding: 9px 12px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  background: var(--bg-3); color: var(--text); border: 1px solid var(--line);
}
.btn:hover { border-color: var(--text-fade); }
.btn.primary { background: var(--accent); color: #06120f; border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .4; cursor: default; }
/* CSP: buttons panel.js used to style with a style attribute (blocked by
   style-src 'self', .innerHTML included). .choice is a Predict step's
   full-width answer; .reset is the small "reset the mailbox" button that
   sits under a try-it block — and under .reveal it is one pixel lower, which
   is how it has always rendered, so the context keeps the pixel. */
.btn.choice { width: 100%; margin-bottom: 6px; text-align: left; font-weight: 400; }
.btn.reset-btn  { margin-top: 10px; padding: 6px 10px; font-size: 12px; }
.reveal .btn.reset-btn { margin-top: 11px; }
.btn-hint {
  display: block; margin-top: 4px; font-weight: 400; opacity: .72;
  font-size: 9.5px; line-height: 1.5; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.btn-hint kbd {
  font-size: 9px; padding: 1px 4px; border-bottom-width: 1px;
  background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.16);
  color: inherit;
}
.btn-hint .plus { font-size: 9px; padding: 0; }

/* ---- guide cards -------------------------------------------------------- */

.keys-big {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 4px 0 12px;
}
.keys-big kbd {
  font-size: 15px; padding: 7px 12px; border-bottom-width: 3px;
  background: var(--bg-3); color: var(--text);
}
.keys-big .chord { display: inline-flex; align-items: center; gap: 7px;
                   white-space: nowrap; }
.keys-big .then { font-size: 12px; padding: 0 4px; }
.keys-big .plus { font-size: 15px; }

/* The two separators carry real meaning, so they must not look alike:
   + is "held down together", then is "let go and press the next thing". */
.plus {
  color: var(--text-dim); font-weight: 600; padding: 0 1px;
  font-family: var(--font-mono);
}
.then {
  font-size: 10.5px; color: var(--text-fade); text-transform: uppercase;
  letter-spacing: .9px; padding: 0 5px; font-style: normal;
}
/* A third separator, and the distinction matters as much as the other two:
   "or" is a list of keys that each do the job on their own, where "then" is
   an order you must press them in. */
.alt {
  font-size: 10.5px; color: var(--text-fade); text-transform: lowercase;
  letter-spacing: .5px; padding: 0 4px; font-style: italic;
}
kbd.unbound {
  border-style: dashed; color: var(--text-fade); font-style: italic;
  border-bottom-width: 1px;
}

.keys-legend {
  display: flex; gap: 16px; flex-wrap: wrap; margin: -6px 0 14px;
  font-size: 11px; color: var(--text-fade);
}
.keys-legend b {
  color: var(--text-dim); font-family: var(--font-mono); font-weight: 600;
  margin-right: 3px;
}
.keys-big .nokey {
  font-size: 12.5px; color: var(--warn); font-style: italic;
}

.cmd-block {
  font-family: var(--font-mono); font-size: 14px; line-height: 1.5;
  scrollbar-width: thin;
  background: var(--term-bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 12px; margin: 4px 0 7px;
  color: var(--text); overflow-x: auto; white-space: pre;
}
.cmd-block .ps1 { color: var(--accent); margin-right: 9px; user-select: none; }
.copyable { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.copy-btn {
  flex: none; font: inherit; font-size: 9.5px; line-height: 1;
  text-transform: uppercase; letter-spacing: .6px;
  background: var(--bg-3); color: var(--text-fade);
  border: 1px solid var(--line); border-radius: 4px;
  /* A rest opacity of .55 read as disabled; .82 keeps it quiet but clearly
     live, hover/done still take it to full. */
  padding: 3px 6px; cursor: pointer; opacity: .82;
  /* Wide enough for the longest thing it ever says — "blocked" — so it does
     not jump a few pixels wider the moment you click it. */
  min-width: 7.4em; text-align: center;
}
.copy-btn:hover { opacity: 1; color: var(--text); border-color: var(--text-fade); }
.copy-btn.done { color: var(--good); border-color: var(--good); opacity: 1; }
.cmd-block { display: flex; align-items: center; gap: 10px; }

/* The command block scrolls sideways when the command is long, so the copy
   button must not live inside it — it would slide out of reach. It hangs off
   the bottom-left corner instead, always in the same place. */
.cmd-wrap { position: relative; padding-bottom: 9px; }
.copy-btn.badge {
  position: absolute; left: 10px; bottom: -1px;
  background: var(--bg-2); opacity: .8;
  padding: 2px 7px; font-size: 9px; border-radius: 0 0 4px 4px;
  border-top: 0;
}
/* The whole-file button is a normal .btn and sizes itself; leave it alone. */
.btn.copy-btn { min-width: 0; }
.copy-btn.badge:hover { opacity: 1; }

.cmd-note {
  font-size: 12px; color: var(--text-fade); line-height: 1.5; margin-bottom: 12px;
}
.cmd-note b { color: var(--text-dim); font-family: var(--font-mono); }

.sect { margin-top: 16px; }
.sect > h4 {
  margin: 0 0 6px; font-size: 10.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.sect p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.sect p:last-child { margin-bottom: 0; }
.sect code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--bg-3); padding: 1px 5px; border-radius: 3px; color: var(--text);
}

ol.press { margin: 0; padding-left: 20px; }
ol.press li {
  font-size: 13.5px; line-height: 1.65; color: var(--text);
  margin-bottom: 5px;
}
ol.press li::marker { color: var(--accent); font-weight: 700; }

.altrow {
  display: flex; gap: 9px; align-items: baseline; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: 12.5px;
  /* The key column used to be flex:none, so a long command like
     `split-window -h -c "#{pane_current_path}"` pushed the row straight out
     of the card. Let the row wrap and both columns give way instead. */
  flex-wrap: wrap;
}
.altrow:last-child { border-bottom: 0; }
.altrow .ak {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  display: flex; gap: 3px; align-items: center; flex-wrap: wrap;
}
.altrow .an { flex: 1 1 12em; min-width: 0; color: var(--text-dim); line-height: 1.5; }
.altrow code { white-space: pre-wrap; overflow-wrap: anywhere; }
/* CSP: "at the : prompt (or in ~/.muttrc)" — the where-to-type line under an
   option's note, previously an inline style in panel.js. */
.opt-where {
  color: var(--text-fade); font-size: 11px; margin-top: 2px;
}

.gotcha {
  background: rgba(224,164,88,.08); border: 1px solid rgba(224,164,88,.3);
  border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.6;
  color: var(--text-dim);
}

.tryit {
  border: 1px solid var(--accent); border-radius: 7px;
  background: rgba(77,184,165,.06); padding: 12px 13px;
}
.tryit.done { border-color: var(--good); background: rgba(127,201,138,.09); }
.tryit .goal { font-size: 13.5px; line-height: 1.55; color: var(--text); }
.tryit .state {
  margin-top: 9px; font-size: 12px; display: flex; align-items: center; gap: 7px;
  color: var(--text-dim);
}
.tryit .state .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--warn);
  animation: pulse 1.4s ease-in-out infinite;
}
.tryit.done .state { color: var(--good); }
.tryit.done .state .dot { background: var(--good); animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.tier-card {
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-3);
  padding: 12px 13px; cursor: pointer; width: 100%; text-align: left;
  color: inherit; font: inherit; display: block;
}
.tier-card + .tier-card { margin-top: 8px; }
.tier-card:hover { border-color: var(--accent); }
.tier-card .th { display: flex; align-items: baseline; gap: 8px; }
.tier-card .th b { font-size: 14px; }
.tier-card .th em { font-style: normal; font-size: 11.5px; color: var(--text-fade); }
.tier-card .tb { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
.levelbar {
  display: flex; gap: 14px; margin-top: 9px;
  font-size: 11px; color: var(--text-fade);
}
.levelbar b { color: var(--text-dim); font-family: var(--font-mono); }
.levelbar span.none { opacity: .35; }

.tier-card .bar { margin-top: 9px; height: 4px; border-radius: 2px; background: var(--bg-2); }
.tier-card .bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

.cardlist { margin-top: 6px; }
.cardlist button {
  width: 100%; text-align: left; background: none; border: 0; color: inherit;
  font: inherit; padding: 8px 10px; border-radius: 5px; cursor: pointer;
  display: flex; gap: 9px; align-items: baseline; font-size: 13px;
}
.cardlist button:hover { background: var(--bg-3); }
.cardlist button .ck {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-fade);
  min-width: 68px;
}
/* A command-only card puts a ':' prompt glyph in the chord slot and its
   command under the title, so every Learn row shares one left edge. */
.cardlist button.cmd-row .ck { color: var(--text-fade); }
.cardlist .cd-cmd {
  display: block; margin-top: 2px; font-family: var(--font-mono);
  font-size: 11px; color: var(--text-dim);
}
.cardlist button .cd { flex: 1; }
.cardlist button .tick { color: var(--good); font-size: 12px; }

/* ---- home cards + strength map ----------------------------------------- */

.card {
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-3);
  padding: 13px 14px; cursor: pointer; text-align: left; width: 100%;
  color: inherit; font: inherit; display: block;
}
.card + .card { margin-top: 8px; }
.card:hover { border-color: var(--text-fade); }
.card.primary { border-color: var(--accent); background: rgba(77,184,165,.07); }
.card .t { font-size: 14px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.card .t em { font-style: normal; color: var(--accent); font-weight: 500; font-size: 12px; }
.card .d { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
/* CSP: the step's "new to this?" / "lost?" link card. panel.js used to squeeze
   it with inline padding, a 2px top margin, a flush .d and a bright <b>;
   style-src 'self' forbids all four, so they are a modifier class now. */
.card.step-note { margin-top: 2px; padding: 9px 11px; }
.card.step-note .d { margin: 0; }
.card.step-note .d b { color: var(--text); }

.map { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }
.map b {
  min-width: 27px; padding: 0 3px; height: 23px; border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--text-fade);
  cursor: default;
}
.map b.s1 { color: var(--text-dim); }
.map b.s2 { background: rgba(77,184,165,.15); color: var(--text); border-color: rgba(77,184,165,.3); }
.map b.s3 { background: rgba(77,184,165,.32); color: var(--text); border-color: rgba(77,184,165,.5); }
.map b.s4 { background: var(--accent); color: #06120f; border-color: var(--accent); }
.map-legend {
  display: flex; gap: 12px; margin-top: 9px; font-size: 11px; color: var(--text-fade);
  align-items: center; flex-wrap: wrap;
}
.map-legend i { width: 12px; height: 10px; border-radius: 3px; display: inline-block;
  border: 1px solid var(--line); background: var(--bg-3); margin-right: 4px;
  vertical-align: -1px; }
/* CSP: the three strength-map legend swatches. They used to be inline
   backgrounds in panel.js, which style-src 'self' blocks (an .innerHTML
   string is no exception). Tones match .map b.s2/.s3/.s4 above. */
.map-legend i.sw-learning { background: rgba(77,184,165,.15); }
.map-legend i.sw-solid    { background: rgba(77,184,165,.32); }
.map-legend i.sw-mastered { background: var(--accent); border-color: var(--accent); }

/* ---- chapter list / reference / drill ---------------------------------- */

.chapter {
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg-3); overflow: hidden;
}
.chapter + .chapter { margin-top: 8px; }
.chapter button.ch-head {
  width: 100%; text-align: left; background: none; border: 0;
  color: inherit; font: inherit; padding: 11px 13px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.chapter button.ch-head:hover { background: rgba(255,255,255,.03); }
.chapter .num {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-fade);
  min-width: 18px;
}
.chapter .ttl { flex: 1; font-size: 13.5px; }
/* CSP: the goal / "locked · finish chapter 3 first" line under a chapter
   title, formerly an inline style in panel.js. */
.chapter .ch-sub { color: var(--text-fade); font-size: 11.5px; margin-top: 2px; }
.chapter .ring {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
}
.chapter.locked { opacity: .45; }
.chapter.done .ring { color: var(--good); }

.ref-group { margin-bottom: 18px; }
.ref-group h3 {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .9px;
  text-transform: uppercase; color: var(--accent);
}
.ref-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.45;
}
.ref-row .rk { min-width: 108px; display: flex; gap: 3px; flex-wrap: wrap; }
.ref-row .rd { flex: 1; color: var(--text-dim); }
/* CSP: two reference-row bits panel.js used to style inline — the sandbox's
   1–9 key range, which must stay on one line, and .rn, the mutt function
   name under a binding's description (named for the .rk/.rd column idiom). */
.ref-row .rk.rk-range { white-space: nowrap; }
.ref-row .rd-sub {
  color: var(--text-fade); font-family: var(--font-mono);
  font-size: 11px; margin-top: 3px;
}
.ref-row .strength {
  width: 34px; height: 4px; border-radius: 2px; background: var(--bg-3);
  margin-top: 6px; overflow: hidden; flex: none;
}
.ref-row .strength i { display: block; height: 100%; background: var(--accent); }

.search {
  width: 100%; padding: 8px 11px; margin-bottom: 14px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 6px; color: var(--text); font: inherit; font-size: 13px;
}
.search:focus { outline: none; border-color: var(--accent); }

.drill-q { text-align: center; padding: 6px 0 2px; }
.drill-q .prompt-text { font-size: 16px; line-height: 1.5; margin-bottom: 14px; }
.timer {
  height: 5px; background: var(--bg-3); border-radius: 3px;
  overflow: hidden; margin-bottom: 2px;
}
.timer i { display: block; height: 100%; background: var(--warn); transition: width .1s linear; }
/* The timed step's bar starts full and is drained by CSSOM in js/app.js
   (updateTimer sets .style.width and .style.background). The full start used
   to be a style="width:100%" attribute in the panel markup, which
   style-src 'self' blocks, so it is the CSS default now — same shape as
   #mastery-bar. */
#step-timer-bar { width: 100%; }

.drill-q .timer {
  height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden;
}
.drill-q .timer i { display: block; height: 100%; background: var(--warn); }
.scoreline {
  display: flex; justify-content: space-around; text-align: center;
  font-size: 12px; color: var(--text-fade); padding-top: 6px;
}
.scoreline b { display: block; font-size: 19px; color: var(--text); font-weight: 600; }

.empty { color: var(--text-fade); font-size: 13px; line-height: 1.6; }

pre.conf {
  background: var(--term-bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 11px 13px; margin: 0; overflow-x: auto;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55;
  color: var(--text-dim); white-space: pre;
}
/* CSP: the blurb above your generated .muttrc and the copy-the-file button
   below it. Both were inline margins in panel.js. */
.conf-note { margin-bottom: 8px; }
.conf-copy { margin-top: 8px; }

/* Keyboard focus must be visible — tabbing was invisible everywhere. */
button:focus-visible, select:focus-visible, input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--line); }

/* The pickers live in the settings popover now, so the header carries only
   the nav, the stat and one button — it fits far below 1000px. One shed
   remains, measured like the old ones were. */
@media (max-width: 1060px) {
  .hdr-stat .bar { display: none; }
  header { gap: 12px; }
}
@media (max-width: 1000px) {
  .hdr-stat { display: none; }
  nav button { padding: 6px 9px; }
}

@media (max-width: 1080px) {
  main { grid-template-columns: 1fr 320px; }
}


/* ==== Home dashboard & settings popover ==================================
   From the dashboard design round: Home is a full-width surface like Topics
   and Reference — no terminal. Selectors are the mock's spec, adapted to the
   panel-body container the app already scrolls. */
nav .nav-sep {
  width: 1px; align-self: stretch; margin: 3px 7px;
  background: var(--line); border: 0; padding: 0;
}
nav button.tool { color: var(--text-fade); }
nav button.tool:hover { color: var(--text); }
.hdr-stat b { color: var(--text); font-weight: 600; }

.settings-wrap { position: relative; flex: none; }
.settings-pop {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 40;
  width: 300px; padding: 6px 0;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.settings-pop .sp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; font-size: 12.5px; color: var(--text);
  width: 100%; background: none; border: 0; font-family: inherit;
  text-align: left; cursor: pointer;
}
.settings-pop .sp-row .sp-hint {
  display: block; margin-top: 2px; font-size: 11px; color: var(--text-fade);
  line-height: 1.45;
}
.settings-pop .sp-sep { height: 1px; background: var(--line); margin: 6px 0; }
.settings-pop select {
  background: var(--bg-3); color: var(--text); font: inherit; font-size: 12px;
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px;
}
.settings-pop input[type=checkbox] { accent-color: var(--accent); }
.settings-pop .sp-danger { color: var(--bad); }
.settings-pop .sp-danger:hover { background: rgba(224,108,117,.07); }

/* A wide single-column surface withOUT the reference's column flow — the
   Review launcher was being shredded into ragged CSS columns by main.ref. */
main.launcher { grid-template-columns: 1fr; }
main.launcher .stage { display: none; }
main.launcher aside { border-left: 0; }
main.launcher .panel-body { display: block; }

main.home { grid-template-columns: 1fr; }
/* Only the dashboard hides the panel chrome — the placement runs on Home too
   and needs its header and its Begin buttons. */
main.home.dash .panel-head, main.home.dash .panel-foot { display: none; }
main.home .stage { display: none; }
main.home aside { border-left: 0; }
main.home .panel-body { display: block; }
.home-wrap { max-width: 1080px; margin: 0 auto; padding: 30px 24px 48px; }

.home-hero h1 {
  margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -.2px;
  color: var(--text);
}
.home-hero .tagline {
  margin: 9px 0 0; font-size: 14.5px; line-height: 1.6;
  color: var(--text-dim); max-width: 48em;
}
.home-statusline {
  display: flex; gap: 14px; align-items: center; overflow: hidden;
  margin-top: 18px; padding: 3px 10px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 12px; white-space: nowrap;
  background: var(--status-bg); color: var(--status-fg);
}
.home-statusline .sl-left { font-weight: 700; }
.home-statusline .sl-cur {
  background: var(--status-cur); color: #0b2b23; font-weight: 700;
  padding: 0 5px;
}
.home-statusline .sl-right { margin-left: auto; }

.home-sect {
  margin: 30px 0 10px; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.home-sect small {
  margin-left: 10px; text-transform: none; letter-spacing: 0;
  font-size: 11.5px; color: var(--text-fade); font-weight: 400;
}
/* CSP: the "Today" heading sits closer to the hero than the sections below
   it do — an inline margin-top in panel.js until style-src 'self'. */
.home-sect.tight { margin-top: 22px; }

.home-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.path-card {
  display: flex; flex-direction: column; gap: 0; text-align: left;
  padding: 17px 18px 15px; cursor: pointer; color: inherit; font: inherit;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.path-card:hover { border-color: var(--text-fade); }
.path-card:hover .go { color: var(--accent); }
.path-card.primary {
  border-color: var(--accent); background: rgba(77,184,165,.06);
}
.path-card.primary:hover { box-shadow: 0 0 0 1px var(--accent); }
.path-card .pc-eyebrow {
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700; color: var(--text-fade);
}
.path-card.primary .pc-eyebrow { color: var(--accent); }
.path-card h3 { margin: 7px 0 0; font-size: 16.5px; font-weight: 600; color: var(--text); }
.path-card p {
  margin: 7px 0 0; font-size: 12.8px; line-height: 1.55; color: var(--text-dim);
  flex: 1;
}
.path-card .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.chip {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 4px; padding: 2px 7px;
}
.path-card .pc-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 14px;
}
.path-card .go { font-size: 13px; font-weight: 600; color: var(--text); }
.path-card.primary .go { color: var(--accent); }
.path-card .meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-fade);
  white-space: nowrap;
}
.path-card .bar {
  height: 4px; border-radius: 2px; background: var(--bg-3);
  overflow: hidden; margin-top: 12px;
}
.path-card .bar i { display: block; height: 100%; background: var(--accent); }

.home-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tool-card {
  display: flex; align-items: baseline; gap: 12px; text-align: left;
  padding: 13px 16px; cursor: pointer; color: inherit; font: inherit;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tool-card:hover { border-color: var(--text-fade); }
.tool-card b { font-size: 14px; font-weight: 600; flex: none; }
.tool-card span { font-size: 12.3px; color: var(--text-dim); line-height: 1.5; }
.tool-card .go { margin-left: auto; flex: none; color: var(--text-fade); font-size: 13px; }
.tool-card:hover .go { color: var(--accent); }

.home-status { display: grid; grid-template-columns: 1.9fr 1fr 1.15fr; gap: 14px; }
.status-card {
  padding: 17px 18px 16px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--line);
  display: flex; flex-direction: column; text-align: left; font: inherit;
  color: inherit;
}
.status-card .sc-eyebrow {
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700; color: var(--text-fade);
}
.status-card.continue { border-color: var(--accent); background: rgba(77,184,165,.06); cursor: pointer; }
/* CSP: the Review status card is a button you can click without wearing the
   continue card's accent. It carried style="cursor:pointer" in panel.js. */
.status-card.clickable { cursor: pointer; }
.status-card.continue:hover { box-shadow: 0 0 0 1px var(--accent); }
.status-card.continue .sc-eyebrow { color: var(--accent); }
.status-card h3 { margin: 8px 0 0; font-size: 17px; font-weight: 600; color: var(--text); }
.status-card .sc-sub { margin-top: 5px; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.status-card .sc-spacer { flex: 1; min-height: 12px; }
.status-card .bar {
  height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden;
}
.status-card .bar i { display: block; height: 100%; background: var(--accent); }
.status-card .sc-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; gap: 10px;
}
.status-card .go { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.status-card .meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-fade);
}
.status-card .big {
  margin-top: 8px; font-size: 34px; font-weight: 650; line-height: 1.15;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.status-card .big small {
  font-size: 15px; font-weight: 500; color: var(--text-fade); margin-left: 2px;
}
.status-card .big.due { color: var(--warn); }
.status-card .big.zero { color: var(--text-fade); }
.status-card .map { margin-top: 10px; }
.status-card .map b { min-width: 22px; height: 19px; font-size: 9.5px; }

.home-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.how-step {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--radius);
  border: 1px dashed var(--line); background: transparent;
}
.how-step .n {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--accent); background: rgba(77,184,165,.1);
  border: 1px solid rgba(77,184,165,.35); border-radius: 5px;
  padding: 2px 7px; flex: none; margin-top: 1px;
}
.how-step b { display: block; font-size: 13px; color: var(--text); font-weight: 600; }
.how-step span { display: block; margin-top: 3px; font-size: 12px; color: var(--text-fade); line-height: 1.5; }

.home-paths.compact .path-card { padding: 13px 16px 12px; }
.home-paths.compact .path-card h3 { font-size: 14.5px; margin-top: 5px; }
.home-paths.compact .path-card p { font-size: 12.2px; margin-top: 5px; }
.home-paths.compact .path-card .pc-foot { margin-top: 10px; }
.home-paths.compact .path-card .go { font-size: 12.5px; }

@media (max-width: 1240px) {
  .home-wrap { padding: 26px 20px 40px; }
  .home-status { grid-template-columns: 1.6fr 1fr 1.15fr; }
}
@media (max-width: 1000px) {
  .home-paths, .home-how, .home-status { grid-template-columns: 1fr; }
  .home-tools { grid-template-columns: 1fr; }
}

/* Optional subject, switched off: dashed, with the switch on the card. */
.tier-card.optional-off { border-style: dashed; }
.tier-card.optional-off .tb { color: var(--text-fade); }
.tier-card.optional-off .enable { color: var(--accent); font-weight: 600; }
.tier-card .opt-tag { color: var(--accent); font-size: 11px; font-style: normal; }

/* The defaults strip: two visible choices, segmented controls. */
.defaults { display: grid; gap: 10px; }
.def-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 13px 16px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.def-what b { font-size: 13.5px; display: block; }
.def-what span {
  display: block; margin-top: 3px; font-size: 12px; color: var(--text-fade);
  line-height: 1.5; max-width: 44em;
}
.seg { display: flex; flex: none; border: 1px solid var(--line);
       border-radius: 7px; overflow: hidden; }
.seg button {
  font: inherit; font-size: 12.5px; color: var(--text-dim); background: var(--bg-3);
  border: 0; padding: 7px 13px; cursor: pointer; white-space: nowrap;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button small { color: var(--text-fade); font-size: 10.5px; margin-left: 4px; }
.seg button.on { background: var(--accent); color: #06120f; font-weight: 600; }
.seg button.on small { color: rgba(6,18,15,.7); }
.defaults.compact .def-row { padding: 10px 13px; }
.defaults.compact .def-what span { font-size: 11.5px; }
/* CSP: the placement intro puts a small gap between its blurb and the
   defaults strip. It was a <div style="height:10px"> in panel.js. */
.placement-gap { height: 10px; }
@media (max-width: 1000px) {
  .def-row { flex-direction: column; align-items: flex-start; }
}

/* Per-card copy-table flip + the other table's spelling of the same actions. */
.table-flip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 8px 11px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 7px;
}
.table-flip .tf-label {
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-fade); font-weight: 700;
}
.table-flip .seg button { padding: 4px 10px; font-size: 12px; }
.table-flip .tf-hint { font-size: 11px; color: var(--text-fade); }
.other-table {
  margin: 8px 0 2px; font-size: 12px; color: var(--text-dim); line-height: 2;
}
.other-table b { color: var(--text); }
.other-table .dotsep { margin: 0 7px; color: var(--text-fade); }
.seg-inline { display: inline-flex; margin-left: 12px; vertical-align: middle; }
.seg-inline button { padding: 3px 9px; font-size: 11px; }

/* Four review scopes: 2x2 below 1400, 4-up above. */
.review-wrap .home-paths { grid-template-columns: repeat(2, 1fr); }
/* CSP: the review launcher starts higher than a normal home surface — an
   inline padding-top in panel.js until style-src 'self' ruled it out. */
.home-wrap.review-wrap { padding-top: 8px; }
@media (min-width: 1400px) {
  .review-wrap .home-paths { grid-template-columns: repeat(4, 1fr); }
}

/* The bell. No speaker in a div, so the name flinches instead. */
@keyframes bell-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-3px) rotate(-2deg); }
  30% { transform: translateX(3px) rotate(2deg); }
  45% { transform: translateX(-3px) rotate(-1.4deg); }
  60% { transform: translateX(3px) rotate(1.4deg); }
  75% { transform: translateX(-2px) rotate(-.7deg); }
  90% { transform: translateX(2px) rotate(.7deg); }
}
.brand.ring { animation: bell-shake .6s ease-in-out; }

/* The launcher's YOUR KEYS heading follows the section rhythm. */
.review-wrap .ref-group { margin-top: 30px; }

/* ======================================================================
 * mutt-only additions (mutt-trainer). Everything above this line is the
 * tmux-trainer chrome, reused verbatim per docs/ARCHITECTURE.md §2.12.
 * These classes are used by js/render.js when painting the index, pager,
 * and PGP stanzas. One block, appended at the end — the extension rule.
 * ====================================================================== */
.idx-new  { color: #a6e3a1; font-weight: 600; }   /* N — new message rows   */
.idx-del  { color: var(--text-fade); text-decoration: line-through; } /* D  */
.idx-flag { color: #f9e2af; }                     /* ! — flagged rows       */
.idx-tag  { color: #89dceb; }                     /* * — tagged rows        */
.hdr      { color: #89b4fa; }                     /* pager header lines     */
.quote1   { color: #94e2d5; }                     /* > quoted               */
.quote2   { color: #cba6f7; }                     /* >> quoted deeper       */
.sig      { color: var(--text-fade); }            /* signature block        */
.pgp-good { color: #a6e3a1; font-weight: 600; }   /* Good signature from …  */
.pgp-bad  { color: #f38ba8; font-weight: 600; }   /* BAD signature / errors */
.tree     { color: var(--text-dim); }             /* thread tree glyphs     */

/* Layout guards for mutt-sized tokens. tmux's short commands never needed
 * to wrap; mutt brings <display-toggle-weed>-length function names and the
 * full o/O sort prompt into prose, kbd caps and reference rows. These only
 * engage when a token would otherwise overflow — the chrome above is
 * untouched. */
.sect p, .sect li, .sect code { overflow-wrap: anywhere; }
.ref-row { break-inside: avoid; }
.ref-row .rk kbd { white-space: normal; overflow-wrap: anywhere; text-align: left; }
.ref-row .rd { min-width: 0; overflow-wrap: anywhere; }
.reveal .famrow .fd { min-width: 0; overflow-wrap: anywhere; }