/* FF Ideas. Dark, quiet, fast. Nothing decorative. */

:root {
  --bg: #0a0a0c;
  --raise: #131317;
  --raise-2: #1b1b21;
  --line: #24242c;
  --ink: #f2f1ef;
  --dim: #8f8d99;
  --faint: #5f5d6a;
  --hot: #ff4438;
  --go: #34d67f;
  --warm: #ffc93c;
  --r: 14px;
  --w: 620px;
}

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

/* Any element given a display of its own beats the browser's [hidden] rule, which turned
   the fullscreen presenter into a permanent empty overlay. Make hidden mean hidden. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* System fonts only. No webfont means no extra network round trip and no flash of
     unstyled text, which is the biggest single win on perceived load speed. */
  font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
  overscroll-behavior-y: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h2, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }

/* ---------- chrome ---------- */

.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  max-width: var(--w); margin: 0 auto;
  padding: 14px 20px 12px;
  background: var(--bg);
}
/* Brand hard left, nav hard right. If they cannot share a line the nav drops underneath
   and the logo stays where it belongs rather than drifting into the middle. */
.brand { margin-right: auto; }

/* His own app icon, cut out of its tile so the cloud sits straight on the dark header.
   The whole thing is the home button. */
.brand {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 3px 8px 3px 3px; margin-left: -3px;
  border: 0; border-radius: 10px;
  background: none; color: var(--ink);
}
.brand img { display: block; width: 30px; height: 30px; object-fit: contain; }
.brand span {
  font-size: 15px; font-weight: 650; letter-spacing: -0.025em;
  white-space: nowrap;
}
.loginmark { display: block; margin: 0 auto 14px; }

.brand:hover { background: var(--raise); }
.brand:active { transform: scale(0.98); }

@media (max-width: 520px) {
  .brand span { display: none; }
}

.nav { display: flex; gap: 2px; margin-left: auto; }

.nv {
  padding: 7px 11px; border: 0; border-radius: 8px;
  background: transparent; color: var(--dim);
  font-size: 14px; font-weight: 500;
}
.nv:hover { color: var(--ink); }
.nv.is-on { background: var(--raise-2); color: var(--ink); }

.nv i {
  display: inline-block; min-width: 17px; margin-left: 5px; padding: 0 4px;
  background: var(--hot); color: #fff; border-radius: 20px;
  font-size: 11px; font-weight: 700; font-style: normal;
}

main { max-width: var(--w); margin: 0 auto; padding: 4px 20px 60px; }
.view { display: none; }
.view.is-on { display: block; }

/* ---------- mode switch ---------- */

.seg {
  display: flex; gap: 3px; padding: 3px; margin-bottom: 18px;
  background: var(--raise); border-radius: 11px;
}
.sg {
  flex: 1; padding: 9px 6px; border: 0; border-radius: 8px;
  background: transparent; color: var(--dim);
  font-size: 14px; font-weight: 500;
}
.sg.is-on { background: var(--raise-2); color: var(--ink); }

.pane { display: none; }
.pane.is-on { display: block; }
.pane p { margin: 0 0 14px; color: var(--dim); font-size: 14px; }

/* Four modes now, so the labels need to survive a narrow phone. */
.seg .sg { padding: 9px 4px; font-size: 13.5px; }

.pane input, .pane textarea { margin-bottom: 10px; }
.own-acts { display: flex; gap: 8px; justify-content: flex-end; }

textarea, input[type=text], input[type=password], input[type=number], select {
  width: 100%; padding: 12px 14px;
  background: var(--raise); color: var(--ink);
  border: 1px solid transparent; border-radius: 11px;
  outline: 0; resize: none;
}
textarea:focus, input:focus, select:focus { border-color: #35353f; }
textarea::placeholder, input::placeholder { color: var(--faint); }

.go {
  width: 100%; margin-top: 12px; padding: 15px;
  border: 0; border-radius: 12px;
  background: var(--ink); color: #111;
  font-size: 15px; font-weight: 600;
}
.go:active { transform: scale(0.99); }
.go b { opacity: 0.45; font-weight: 600; }

.ghost {
  padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px;
  background: transparent; color: var(--ink); font-size: 14px;
}
.ghost:hover { background: var(--raise); }

.msg { min-height: 18px; margin: 12px 2px 0; color: var(--warm); font-size: 13px; }

/* ---------- the card ---------- */

.pos {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; color: var(--faint); font-size: 13px;
}
.posnote {
  overflow: hidden; margin-left: auto;
  max-width: 58%;
  white-space: nowrap; text-overflow: ellipsis; color: var(--faint); font-size: 12px;
}
.txt { border: 0; background: none; color: var(--faint); font-size: 13px; text-decoration: underline; }

/* Back, not "start over". Leaving a batch half-swiped must never throw it away. */
.back {
  display: grid; place-items: center;
  width: 30px; height: 30px; margin-left: -7px; padding: 0;
  border: 0; border-radius: 9px;
  background: none; color: var(--dim);
}
.back:hover { background: var(--raise-2); color: var(--ink); }

/* Undo is always on screen now, dimmed when there is nothing behind you. */
.act.undo:disabled { opacity: 0.28; cursor: default; }
.back svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- the backlog tab ---------- */

/* The backlog is a stack of live panels now, not a list of buttons, so it needs no
   container chrome of its own. */
#resumeList .empty { padding: 34px 10px; }
.run-bin:hover { color: var(--hot); }

/* The count badge on the Backlog tab. */
.sg i {
  margin-left: 4px; padding: 1px 5px; border-radius: 5px;
  background: var(--raise-2); color: var(--faint);
  font-size: 10.5px; font-style: normal; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sg.is-on i { background: #2f2f3a; color: var(--dim); }
.sg i:empty { display: none; }

.rsm {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.rsm:first-child { border-top: 0; }
.rsm-txt { flex: 1; min-width: 0; }
.rsm-txt b { display: block; font-size: 14px; font-weight: 600; }
.rsm-txt small {
  display: block; overflow: hidden;
  margin-top: 2px;
  white-space: nowrap; text-overflow: ellipsis;
  color: var(--faint); font-size: 12px;
}
.rsm .x {
  flex: 0 0 auto;
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 7px;
  background: none; color: var(--faint); font-size: 18px; line-height: 1;
}
.rsm .x:hover { background: var(--raise-2); color: var(--hot); }

.card {
  display: block; padding: 22px;
  background: var(--raise); border-radius: var(--r);
}

.ttl {
  margin: 0 0 12px; margin-left: -5px; padding: 2px 5px 3px;
  font-size: 25px; font-weight: 650; line-height: 1.2; letter-spacing: -0.03em;
  border-radius: 7px; outline: 0;
}
.one {
  margin: 0 0 16px; margin-left: -5px; padding: 4px 5px;
  font-size: 16px; line-height: 1.55; color: #d9d6d1;
  border-radius: 7px; outline: 0;
}
.ttl:focus, .one:focus, .tn span:focus {
  background: #1f1f26; box-shadow: inset 0 0 0 1px var(--warm);
}

.tn {
  margin: 0 0 16px; padding: 12px 14px;
  background: var(--raise-2); border-radius: 10px;
  font-size: 14px; line-height: 1.5; color: var(--dim);
}
.tn b {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--faint);
}
/* Editable too: it feeds the thumbnail director, and a fixed line kept describing the
   idea as first written rather than the version he actually kept. */
.tn span {
  display: block; margin: -3px -5px; padding: 3px 5px;
  border-radius: 7px; outline: 0;
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  padding: 4px 9px; border-radius: 7px;
  background: var(--raise-2); color: var(--dim);
  font-size: 11px; font-weight: 600;
}
.tag.sc { color: var(--go); }
.tag.ed { color: var(--warm); }
/* Already paid for in an earlier batch and re-checked against what it has learned since. */
.tag.rc { color: #6ea8ff; }

.why {
  margin-top: 16px; padding: 14px;
  background: var(--raise); border-radius: 12px;
}
.why:focus { border-color: var(--hot); }

.acts { display: flex; gap: 14px; margin-top: 14px; }

.act {
  flex: 1; display: grid; place-items: center;
  height: 58px; border: 0; border-radius: 13px;
  background: var(--raise-2);
  transition: background 0.12s, transform 0.08s;
}
.act:active { transform: scale(0.97); }
.act svg { width: 24px; height: 24px; fill: none; stroke-width: 2.6; stroke-linecap: round; }
.act.no svg { stroke: var(--hot); }
.act.yes svg { stroke: var(--go); }
.act.no:hover { background: #2b1614; }
.act.yes:hover { background: #13291d; }

.note { color: var(--dim); font-size: 13px; line-height: 1.5; }
.lesson { min-height: 20px; margin: 14px 2px 0; color: var(--warm); text-align: center; }

/* ---------- waiting ---------- */

/* ---------- stacked format runs ----------

   Each Generate in Format mode drops a panel here. Newest on top, all independent, all
   swipeable at once. The learned feed sits below the whole stack. */

#runStack { margin-top: 20px; }

.run {
  margin-bottom: 14px; padding: 14px 16px 16px;
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--r);
}
.run-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.run-top b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-state {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 7px;
  background: var(--raise-2); color: var(--faint);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.run-state.bad { color: var(--hot); }
.run-x {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 7px;
  background: none; color: var(--faint); font-size: 18px; line-height: 1;
}
.run-x:hover { background: var(--raise-2); color: var(--hot); }

.run-prog { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.run-now { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--ink); }
.run-steps { margin: 8px 0 0; }
.run-steps li { padding: 5px 0; }
.run-steps b { font-size: 13px; }

/* The card inside a panel sits directly on the panel, not on another raised block. */
.run-stage .card { padding: 0; background: none; }
.run-stage .ttl { font-size: 21px; }
.run-stage .one { font-size: 15px; }
.run-stage .acts { margin-top: 12px; }
.run-stage .act { height: 46px; }
.run-stage .why { margin-top: 12px; background: var(--raise-2); }
.run-stage .act { background: #23232b; }
.run-stage .pos { margin-bottom: 10px; }
.run-done { padding: 18px 0; text-align: center; color: var(--faint); font-size: 13.5px; }

/* ---------- search over the whole Saved page ---------- */

.searchbar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; margin-bottom: 12px;
  background: var(--raise); border: 1px solid var(--line); border-radius: 12px;
}
.searchbar:focus-within { border-color: #39394a; }
.searchbar svg {
  flex: 0 0 auto; width: 16px; height: 16px;
  fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round;
}
.searchbar input {
  flex: 1; padding: 13px 0;
  background: none; border: 0; border-radius: 0; font-size: 15px;
}
.searchbar input:focus { border: 0; }
.searchbar input::-webkit-search-cancel-button { display: none; }
.searchbar button {
  flex: 0 0 auto;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
  background: none; color: var(--faint); font-size: 19px; line-height: 1;
}
.searchbar button:hover { background: var(--raise-2); color: var(--ink); }

mark {
  padding: 0 2px; border-radius: 3px;
  background: rgba(255, 201, 60, 0.26); color: inherit;
}

/* ---------- Saved, split into Ideas / Starred / Aspects ---------- */

.sgb {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1; padding: 9px 6px; border: 0; border-radius: 8px;
  background: transparent; color: var(--dim);
  font-size: 14px; font-weight: 500;
}
.sgb.is-on { background: var(--raise-2); color: var(--ink); }

/* The Saved sub-tabs ride along under the header, so Ideas / Starred / Team / Aspects
   are always one tap away no matter how far down the library he has scrolled. */
#savedSeg {
  position: sticky; top: var(--barh, 60px); z-index: 9;
  box-shadow: 0 8px 14px -8px var(--bg), 0 -10px 0 0 var(--bg);
}
.sgb i {
  padding: 1px 6px; border-radius: 5px;
  background: var(--raise-2); color: var(--faint);
  font-size: 11px; font-style: normal; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sgb.is-on i { background: #2a2a34; color: var(--dim); }

.spane { display: none; }
.spane.is-on { display: block; }

.sv-btns { display: flex; align-items: flex-start; gap: 2px; flex: 0 0 auto; }

/* Saved means worth keeping. Starred means we should actually shoot this. */
.st-btn {
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 8px;
  background: none; color: var(--faint);
}
.st-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8;
              stroke-linejoin: round; }
.st-btn:hover { background: var(--raise-2); color: var(--warm); }
.st-btn.on { color: var(--warm); }
.st-btn.on svg { fill: var(--warm); }

/* ---------- writing your own version, and capturing aspects ---------- */

.side { display: flex; gap: 8px; margin: 10px 0 0; }
.sidebtn {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: none; color: var(--dim);
  font-size: 13px; font-weight: 500;
}
.sidebtn:hover { border-color: #39394a; background: var(--raise); color: var(--ink); }

.drawer {
  margin-top: 10px; padding: 14px 16px;
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--r);
}
.drawer h5 {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--faint);
}
.drawer input, .drawer textarea {
  display: block; width: 100%; margin-bottom: 8px; padding: 10px 12px;
  background: var(--raise-2); border: 1px solid transparent; border-radius: 9px;
  font-size: 15px; resize: vertical;
}
.drawer input:focus, .drawer textarea:focus { outline: 0; border-color: var(--warm); }
.drawer-acts { display: flex; justify-content: flex-end; gap: 8px; }
.go.sm { width: auto; margin: 0; padding: 9px 18px; font-size: 14px; }

/* ---------- aspects shelf ---------- */

.aspects .add { display: flex; gap: 8px; margin: 10px 0 14px; }
.aspects .add input { flex: 1; }

/* An aspect reads as a card: a one-to-three word headline you can scan a shelf of, the
   first sentence or two underneath, and the rest behind More. */
.aspc {
  margin-bottom: 10px; padding: 14px 16px;
  background: var(--raise-2); border-radius: 12px;
}
.aspc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.aspc h5 {
  margin: 0;
  font-size: 17px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink);
}
.asplabel { padding: 1px 5px; margin-left: -5px; border-radius: 6px; outline: 0; }
.asplabel:focus { background: #23232b; box-shadow: inset 0 0 0 1px var(--warm); }

.aspc-body {
  margin: 7px 0 0; padding: 3px 5px; margin-left: -5px;
  border-radius: 7px; outline: 0;
  font-size: 14px; line-height: 1.55; color: var(--dim);
}
.aspc-body:focus { background: #23232b; box-shadow: inset 0 0 0 1px var(--warm); }
.aspc.editing .aspc-body { color: var(--ink); }
.aspc-src { display: block; margin-top: 8px; color: var(--faint); font-size: 11.5px; }

.aspc-acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.aspc-acts button {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: none; color: var(--dim); font-size: 12.5px; font-weight: 500;
}
.aspc-acts button:hover { color: var(--ink); border-color: #39394a; background: var(--raise); }
.aspgo { margin-left: auto; }
.aspgo:hover { border-color: var(--hot) !important; color: var(--hot) !important; }

.aspx {
  flex: 0 0 auto;
  min-width: 26px; height: 26px; padding: 0 8px;
  border: 0; border-radius: 7px;
  background: none; color: var(--faint); font-size: 19px; line-height: 1;
}
.aspx:hover { background: var(--raise); color: var(--hot); }

/* Two-step delete. The button says "Sure?" and reverts itself if you walk away. */
.confirming {
  background: var(--hot) !important; color: #fff !important;
  border-color: var(--hot) !important;
  font-size: 12px !important; font-weight: 700;
  min-width: 54px; padding: 0 9px !important;
}

/* ---------- pitch decks ---------- */

.dk {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; margin-bottom: 8px;
  background: var(--raise); border-radius: var(--r);
}
.dk-txt { flex: 1; min-width: 0; cursor: pointer; }
.dk-txt b { display: block; font-size: 16px; font-weight: 600; }
.dk-txt small { display: block; margin-top: 3px; color: var(--faint); font-size: 12.5px; }
.dk .x {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--faint); font-size: 19px; line-height: 1;
}
.dk .x:hover { background: var(--raise-2); color: var(--hot); }

#deckDetail .head { align-items: center; gap: 10px; }
#deckTitle {
  flex: 1; padding: 2px 6px; margin-left: -6px;
  border-radius: 8px; outline: 0; font-size: 22px;
}
#deckTitle:focus { background: var(--raise); box-shadow: inset 0 0 0 1px var(--warm); }

.dki {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; margin-bottom: 7px;
  background: var(--raise); border-left: 3px solid transparent; border-radius: 11px;
}
.dki.in  { border-left-color: var(--go); }
.dki.out { border-left-color: var(--hot); opacity: 0.6; }
.dki-n {
  flex: 0 0 auto; width: 22px;
  color: var(--faint); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.dki-txt { flex: 1; min-width: 0; cursor: pointer; }
.dki-txt b { font-size: 15px; font-weight: 600; }
.dki-txt p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--dim); }
.dki-notes {
  margin-top: 8px; padding: 8px 10px;
  background: var(--raise-2); border-radius: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--dim); white-space: pre-wrap;
}
.dki-v { flex: 0 0 auto; font-size: 15px; color: var(--faint); }
.dki.in .dki-v { color: var(--go); }
.dki.out .dki-v { color: var(--hot); }
.dki .x {
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 7px;
  background: none; color: var(--faint); font-size: 17px; line-height: 1;
}
.dki .x:hover { background: var(--raise-2); color: var(--hot); }

.deckpick { width: auto; max-width: 150px; padding: 7px 10px; font-size: 12.5px; }
.seriespick { width: auto; max-width: 210px; padding: 7px 10px; font-size: 12.5px; }
.sv-tools { gap: 7px; }
.in-deck { color: #6ea8ff; }
.newdeck { display: flex; gap: 8px; margin-top: 10px; }
.newdeck input { flex: 1; }

/* ---------- fullscreen presenter ---------- */

body.presenting { overflow: hidden; }

.present {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.pr-top {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 26px;
  color: var(--faint); font-size: 13px;
}
.pr-pos { margin-left: auto; font-variant-numeric: tabular-nums; }
.pr-close {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px;
  background: none; color: var(--faint); font-size: 24px; line-height: 1;
}
.pr-close:hover { background: var(--raise); color: var(--ink); }

.pr-body {
  display: flex; gap: 40px; align-items: flex-start;
  flex: 1; overflow: auto;
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 12px 32px 24px;
}
.pr-slide { flex: 1 1 62%; min-width: 0; }
.pr-slide h1 {
  margin: 0 0 22px; padding: 4px 8px; margin-left: -8px;
  border-radius: 10px; outline: 0;
  font-size: clamp(30px, 4.2vw, 52px); font-weight: 680;
  line-height: 1.08; letter-spacing: -0.035em;
}
.pr-slide > p {
  margin: 0 0 22px; padding: 4px 8px; margin-left: -8px;
  border-radius: 10px; outline: 0;
  font-size: clamp(17px, 1.7vw, 23px); line-height: 1.55; color: #d9d6d1;
}
.pr-slide h1:focus, .pr-slide p:focus, .pr-thumb span:focus {
  background: var(--raise); box-shadow: inset 0 0 0 1px var(--warm);
}
.pr-thumb {
  padding: 14px 16px;
  background: var(--raise); border-radius: 12px;
  font-size: 15px; line-height: 1.5; color: var(--dim);
}
.pr-thumb b {
  display: block; margin-bottom: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--faint);
}
.pr-thumb span { display: block; padding: 2px 4px; margin: -2px -4px;
                 border-radius: 7px; outline: 0; }
.pr-shots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 16px;
}
.pr-shots img { width: 100%; border: 2px solid transparent; border-radius: 10px; }
.pr-shots img.pick { border-color: var(--go); }

.pr-notes { flex: 1 1 34%; min-width: 240px; }
.pr-notes label {
  display: block; margin-bottom: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--faint);
}
.pr-notes textarea {
  min-height: 190px; background: var(--raise);
  font-size: 15px; line-height: 1.55; resize: vertical;
}

.pr-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 26px 10px;
}
.pr-nav {
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: none; color: var(--dim);
}
.pr-nav:hover { background: var(--raise); color: var(--ink); }
.pr-nav svg, .pr-vote svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.pr-vote {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 26px;
  border: 1px solid var(--line); border-radius: 12px;
  background: none; font-size: 15px; font-weight: 600;
}
.pr-vote.yes { color: var(--go); }
.pr-vote.no  { color: var(--hot); }
.pr-vote.yes:hover, .pr-vote.yes.on { background: rgba(52, 214, 127, 0.14); border-color: var(--go); }
.pr-vote.no:hover,  .pr-vote.no.on  { background: rgba(255, 68, 56, 0.14); border-color: var(--hot); }

/* One tick per slide along the bottom, so the room can see how far in they are. */
.pr-rail { display: flex; gap: 4px; justify-content: center; padding: 0 26px 20px; }
.pr-rail i {
  width: 26px; height: 3px; border-radius: 3px; background: var(--raise-2);
}
.pr-rail i.in { background: var(--go); }
.pr-rail i.out { background: var(--hot); }
.pr-rail i.at { box-shadow: 0 0 0 2px var(--ink); }

/* Ctrl+P on an open deck gives a clean handout without needing an export step. */
@media print {
  body { background: #fff; color: #000; }
  .bar, .row-tools, .present, .undobar, .toast, #deckList, .dki .x, .dki-v { display: none !important; }
  .view { display: none !important; }
  #view-decks { display: block !important; }
  .dki { background: none; border-left: 2px solid #ccc; page-break-inside: avoid; }
  .dki-txt p, .dki-notes { color: #333; }
  .dki-notes { background: #f4f4f4; }
  #deckTitle { font-size: 26px; }
}

/* ---------- team shelf and the writers' room doc ---------- */

.tm-thumb { margin-top: 8px !important; font-size: 12.5px !important; color: var(--faint) !important; }
.tm-thumb b { color: var(--dim); }
.tm-room { margin-top: 10px; display: grid; gap: 6px; }
.tm-room div {
  padding: 9px 11px;
  background: var(--raise-2); border-radius: 9px;
  font-size: 12.5px; line-height: 1.5; color: var(--dim); white-space: pre-wrap;
}
.tm-room em {
  display: block; margin-bottom: 3px;
  color: var(--faint); font-size: 10.5px; font-style: normal;
  letter-spacing: 0.06em; text-transform: uppercase;
}

.docwrap {
  position: fixed; inset: 0; z-index: 55;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(6, 6, 8, 0.82);
}
.doc {
  display: flex; flex-direction: column;
  width: 100%; max-width: 760px; max-height: 88vh;
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--r);
}
.doc-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
}
.doc-top b { font-size: 15px; }
.doc-close {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--faint); font-size: 22px; line-height: 1;
}
.doc-close:hover { background: var(--raise-2); color: var(--ink); }
.doc pre {
  overflow: auto; flex: 1;
  margin: 0; padding: 0 20px 16px;
  font: 400 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; color: #d9d6d1;
}
.doc-acts {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--line);
}
.doc-acts a { text-decoration: none; display: inline-flex; align-items: center; }
.doc .note { padding: 0 20px 16px; margin: 0; }

/* ---------- reference pictures on an idea ---------- */

/* Icon buttons. A card's tools row was five labelled buttons of prose; as symbols it
   reads in one glance. Everything keeps a title so the meaning is one hover away, and
   anything that spends money says its price in that tooltip. */
.icons { display: inline-flex; gap: 4px; }

.ibtn {
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 9px;
  background: none; color: var(--dim); cursor: pointer;
}
.ibtn svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ibtn:hover { color: var(--ink); border-color: #39394a; background: var(--raise-2); }
.ibtn.clr:hover { color: var(--hot); border-color: var(--hot); }
.ibtn.mk:hover { color: var(--warm); border-color: var(--warm); }
.ibtn:disabled { opacity: 0.45; cursor: default; }
.ibtn.busy svg { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

.in-deck svg { width: 13px; height: 13px; vertical-align: -2px;
               fill: none; stroke: currentColor; stroke-width: 1.8; }

.pics {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px;
  margin-top: 14px;
}
.pic { position: relative; margin: 0; overflow: hidden; border-radius: 10px;
       background: var(--raise-2); }
.pic img { display: block; width: 100%; height: 110px; object-fit: cover; }
.pic-dl, .pic-x {
  position: absolute; top: 5px; z-index: 2;
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 7px;
  background: rgba(10, 10, 12, 0.8); color: #fff;
  font-size: 14px; line-height: 1; text-decoration: none;
  opacity: 0; transition: opacity 0.15s ease;
}
.pic-dl { left: 5px; }
.pic-x { right: 5px; font-size: 17px; }
.pic:hover .pic-dl, .pic:hover .pic-x { opacity: 1; }
.pic-dl:hover { background: var(--go); color: #0a0a0c; }
.pic-x:hover { background: var(--hot); }

/* Bottom LEFT on purpose: the undo bar owns the centre and the cards own the right. */
.totop {
  position: fixed; left: 22px; bottom: 22px; z-index: 30;
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: #23232c; color: var(--dim);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.totop:hover { color: var(--ink); border-color: #3a3a46; }
.totop svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- undo bar ---------- */

.undobar {
  position: fixed; left: 50%; bottom: 22px; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px 11px 18px;
  background: #23232c; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color: var(--ink); font-size: 14px;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.undobar.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.undobar button {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 0; border-radius: 9px;
  background: var(--warm); color: #1a1a1f;
  font-size: 13px; font-weight: 700;
}
.undobar svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* The pitch behind an idea he rewrote himself. */
.src { margin-top: 8px; }
.src summary {
  cursor: pointer; color: var(--faint); font-size: 12px; list-style: none;
}
.src summary::before { content: "▸ "; }
.src[open] summary::before { content: "▾ "; }
.src b { display: block; margin-top: 6px; font-size: 13px; color: var(--dim); }
.src p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--faint); }

.yours {
  padding: 2px 7px; border-radius: 6px;
  background: rgba(110, 168, 255, 0.14); color: #6ea8ff;
  font-size: 10px; font-style: normal; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle;
}

/* Bin one bad thumbnail without touching the others. */
.tv { position: relative; }
.tx {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 7px;
  background: rgba(10, 10, 12, 0.78); color: #fff;
  font-size: 17px; line-height: 1;
  opacity: 0; transition: opacity 0.15s ease;
}
.tv:hover .tx, .tx:focus { opacity: 1; }
.tx:hover { background: var(--hot); }

/* ---------- the run, narrating itself ----------

   One white line for what is happening now, a ticked list underneath for what is
   already done. The bar tracks real work finishing, so the number can be trusted. */

.wait { padding: 44px 0 56px; }

.prog { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }

.track {
  position: relative; overflow: hidden;
  flex: 1; height: 4px;
  background: var(--raise-2); border-radius: 4px;
}
.track i {
  display: block; width: 0; height: 100%;
  background: linear-gradient(90deg, var(--hot), #ff7a52);
  border-radius: 4px;
  transition: width 0.55s cubic-bezier(0.22, 0.9, 0.3, 1);
}
/* A sheen travelling over the filled part, so a long stage still looks alive even
   while the number legitimately is not moving. */
.track i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: sheen 1.8s ease-in-out infinite;
}
@keyframes sheen {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.pct {
  min-width: 42px; text-align: right;
  color: var(--dim); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.now {
  margin: 0 0 3px;
  font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink);
}
.nowsub { display: block; min-height: 18px; color: var(--faint); font-size: 13px; }

.steps { margin: 14px 0 0; padding: 0; list-style: none; }
.steps li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0;
  opacity: 0; transform: translateY(-5px);
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.steps li.in { opacity: 1; transform: none; }
.steps b {
  display: block;
  font-size: 14px; font-weight: 500; color: var(--dim);
}
.steps em {
  display: block; margin-top: 1px;
  font-size: 12.5px; font-style: normal; line-height: 1.45; color: var(--faint);
}
.steps li.skipped b, .steps li.skipped em { color: #4a4855; }

.ck {
  flex: 0 0 auto;
  width: 15px; height: 15px; margin-top: 3px;
  fill: none; stroke: var(--go); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.steps li.skipped .ck { stroke: #4a4855; }

/* ---------- learning feed ---------- */

.brain { margin-top: 26px; padding: 16px 18px; background: var(--raise); border-radius: var(--r); }
.brain h4 {
  margin-bottom: 12px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}
.brain h4 small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.brain ol { margin: 0; padding: 0; list-style: none; }
.brain li { margin-bottom: 10px; font-size: 13.5px; line-height: 1.5; color: #d9d6d1; }
.brain li:last-child { margin-bottom: 0; }
.brain li b {
  display: inline-block; min-width: 44px; margin-right: 8px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--go);
}
.brain li.dislike b { color: var(--hot); }
.brain li.fresh { animation: land 1.8s ease; border-radius: 6px; }
@keyframes land { from { background: rgba(255,201,60,0.2); } to { background: transparent; } }

/* ---------- saved ---------- */

.head {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between; align-items: center; margin: 4px 0 18px;
}
.head h2 { font-size: 21px; }
.row-tools { display: flex; gap: 8px; }
.row-tools select { width: auto; padding: 9px 11px; }

.grp { margin-bottom: 24px; }
.grp h3 {
  margin: 0 0 10px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}

.sv { padding: 16px 18px; margin-bottom: 10px; background: var(--raise); border-radius: var(--r); }
.sv-top { display: flex; gap: 14px; justify-content: space-between; }
.sv h4 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.sv p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--dim); }
/* Every small close/delete control on a card looks the same. Without this the segment
   delete inherited the default button chrome and rendered as a white box. */
.sv .rm, .sv .x, .sv-btns .x {
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 8px;
  background: none; color: var(--faint); font-size: 20px; line-height: 1;
}
.sv .rm:hover, .sv .x:hover, .sv-btns .x:hover { background: var(--raise-2); color: var(--hot); }
/* Everything on a saved card edits in place. Empty fields still render, with a prompt,
   so an idea that never had a description can get one. */
.sv-body { flex: 1; min-width: 0; }
.sv-body [contenteditable] {
  padding: 2px 5px; margin-left: -5px; border-radius: 7px; outline: 0;
}
.sv-body [contenteditable]:focus { background: #1f1f26; box-shadow: inset 0 0 0 1px var(--warm); }
.sv-body [contenteditable]:empty::before {
  content: attr(data-empty); color: var(--faint); font-style: italic;
}
.sv-tn { font-size: 12.5px !important; color: var(--faint) !important; }

.sv-desc.clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sv-more {
  margin-top: 4px; padding: 3px 8px; margin-left: -8px;
  border: 0; border-radius: 7px;
  background: none; color: var(--faint); font-size: 12px; font-weight: 600;
}
.sv-more:hover { background: var(--raise-2); color: var(--ink); }

/* Series groups collapse, so Saved opens as a short list of series with counts. Each one
   carries an emoji and its own hue, running round the wheel in series order. Only the
   edge is coloured; the text stays plain so nothing gets harder to read. */
.grp { --hue: 220; margin-bottom: 8px; }
.grp summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-radius: var(--r);
  border-left: 3px solid hsl(var(--hue) 72% 58%);
  background: linear-gradient(90deg, hsl(var(--hue) 60% 50% / 0.10), transparent 55%),
              var(--raise);
  cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600;
}
.grp.plain summary {
  border-left-color: #3a3a46;
  background: var(--raise);
}
.grp summary::-webkit-details-marker { display: none; }
.grp summary::after {
  content: "▸"; margin-left: 2px;
  color: var(--faint); font-size: 12px; font-weight: 400;
  transition: transform 0.15s ease;
}
.grp[open] summary::after { transform: rotate(90deg); }
.grp-emoji { font-size: 17px; line-height: 1; }
.grp summary span { flex: 1; }
.grp summary i {
  padding: 2px 9px; border-radius: 7px;
  background: hsl(var(--hue) 45% 50% / 0.20); color: hsl(var(--hue) 70% 78%);
  font-size: 12px; font-style: normal; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.grp.plain summary i { background: var(--raise-2); color: var(--dim); }
.grp summary:hover { filter: brightness(1.18); }

/* Expanded, the whole group sits inside its own colour without tinting the cards. */
.grp-body {
  padding: 12px 0 4px 14px; margin-top: 6px;
  border-left: 2px solid hsl(var(--hue) 55% 45% / 0.45);
}
.grp.plain .grp-body { border-left-color: #2b2b34; }

/* Drag a card onto a series header to re-file it. */
.sv[draggable="true"] { cursor: grab; }
.sv.dragging { opacity: 0.4; }
.grp summary.dropping, .newgrp.dropping {
  outline: 2px dashed hsl(var(--hue, 40) 75% 60%); outline-offset: -2px;
}
.newgrp {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; margin-top: 10px;
  border: 1px dashed var(--line); border-radius: var(--r);
  color: var(--faint); font-size: 13px;
}
.newgrp input { flex: 1; min-width: 190px; padding: 9px 12px; font-size: 13.5px; }

.sv-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }

.tset {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.tv { margin: 0; overflow: hidden; background: var(--raise-2); border: 2px solid transparent; border-radius: 11px; }
.tv.pick { border-color: var(--go); }
.tv img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.tv figcaption { padding: 9px 11px; font-size: 12px; line-height: 1.45; color: var(--dim); }
.tv figcaption b {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px;
  background: var(--hot); color: #fff; border-radius: 5px; font-size: 10px;
}
.tv.pick figcaption b { background: var(--go); color: #06210f; }
.tv button {
  width: 100%; margin-top: 8px; padding: 7px;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; font-size: 12px; font-weight: 600;
}
.tv.pick button { border-color: var(--go); color: var(--go); }

.empty { padding: 48px 20px; text-align: center; color: var(--faint); font-size: 14px; }

/* ---------- ledger breakdown ---------- */

.period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; }
.period select { width: auto; min-width: 118px; padding: 9px 11px; font-size: 13.5px; }
.period select:disabled { opacity: 0.4; }
.period .note { margin-left: auto; font-variant-numeric: tabular-nums; }

.bd { padding: 12px 0; border-top: 1px solid var(--line); }
.bd:first-of-type { border-top: 0; }
.bd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bd-head b { font-size: 14.5px; font-weight: 600; }
.bd-head span { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-head em {
  margin-left: 8px; color: var(--faint);
  font-size: 12px; font-style: normal; font-weight: 500;
}
.bd-bar { height: 4px; margin: 8px 0; background: var(--raise-2); border-radius: 4px; }
.bd-bar i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--hot), #ff7a52);
}
.bd small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.bd-unit { margin-top: 3px; color: var(--faint) !important; }

/* ---------- settings ---------- */

.box { padding: 6px 18px; margin-bottom: 12px; background: var(--raise); border-radius: var(--r); }
.box h4 { padding: 14px 0 4px; font-size: 14px; }

.ln {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.ln:last-child { border-bottom: 0; }
.ln span { display: grid; gap: 2px; }
.ln em { color: var(--faint); font-size: 12px; font-style: normal; }
.ln input[type=number] { width: 74px; text-align: center; }
.ln select { width: auto; min-width: 160px; }
.ln input[type=range] { width: 120px; accent-color: var(--hot); }
.ln input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--go); }

.stack { display: grid; gap: 9px; padding: 14px 0; font-size: 14.5px; }

.st { display: flex; gap: 10px; align-items: center; padding: 7px 0; font-size: 14px; }
.st i { width: 7px; height: 7px; border-radius: 50%; background: var(--go); flex: 0 0 auto; }
.st.off i { background: var(--hot); }
.st small { color: var(--faint); }

.add { display: flex; gap: 8px; padding: 4px 0 14px; }
.add input { flex: 1; }
.add select { width: auto; }

/* ---------- what it studies on YouTube ---------- */

.cat { border-bottom: 1px solid var(--line); }
.cat:last-child { border-bottom: 0; }
.cat.off { opacity: 0.45; }

.cathead { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.cathead b { font-size: 14px; text-transform: uppercase; letter-spacing: .03em; }
.cathead small { color: var(--dim); font-size: 12px; }
.catbtns { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.catbtns button, .cattoggle {
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: transparent; color: var(--dim); font-size: 11px; cursor: pointer;
}
.catbtns button:hover, .cattoggle:hover { color: var(--fg); border-color: var(--dim); }
.cattoggle { width: 28px; padding: 5px 0; text-align: center; }

/* A grid rather than a list: he is scanning thumbnails, not reading. */
.catgrid {
  display: grid; gap: 10px; padding: 4px 0 16px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.vid {
  position: relative; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; cursor: pointer; background: var(--line);
  transition: border-color .12s, opacity .12s;
}
.vid:hover { border-color: var(--dim); }
.vid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vid.off { opacity: .34; }
.vid.off img { filter: grayscale(1); }
.vidmeta { padding: 7px 9px 9px; }
.vidviews { display: block; font-size: 12px; font-weight: 700; }
.vidviews i { margin-left: 5px; font-style: normal; font-weight: 500; color: var(--dim); }
.vidtitle {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--dim);
}
.vidoff {
  position: absolute; top: 7px; right: 7px; padding: 2px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .74); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

/* Group mute controls. The bar sticks to the top of the pane so the state of every
   group stays readable while you scroll a long list. */
.lrnbar {
  position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 7px;
  padding: 11px 0; margin-bottom: 4px; background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.lrnbulk {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--dim); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.lrnbulk:hover { color: var(--fg); border-color: var(--dim); }
.lrnbulk b {
  padding: 1px 7px; border-radius: 999px; background: var(--line);
  color: var(--dim); font-size: 11px; font-weight: 700;
}
/* Muted groups invert, so "all off" is obvious without reading the label. */
.lrnbulk.on { background: var(--dim); border-color: var(--dim); color: var(--bg); }
.lrnbulk.on b { background: rgba(0, 0, 0, .22); color: var(--bg); }
.lrnbulk:disabled { opacity: .5; cursor: default; }
/* Without this the browser leaves the last-clicked pill filled, which reads as "muted"
   when it is not. */
.lrnbulk:focus { outline: none; }
.lrnbulk:focus-visible { outline: 2px solid var(--dim); outline-offset: 2px; }

.lrngroup { margin-top: 16px; }
.lrngroup h5 {
  margin: 0 0 2px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dim);
}
.lrngroup h5 small { margin-left: 7px; text-transform: none; letter-spacing: 0; opacity: .75; }
.lrnmore {
  width: 100%; margin-top: 10px; padding: 9px; border: 1px dashed var(--line);
  border-radius: 9px; background: transparent; color: var(--dim); font-size: 12px;
  cursor: pointer;
}
.lrnmore:hover { color: var(--fg); border-color: var(--dim); }

.lrn { display: flex; gap: 10px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.lrn:last-child { border-bottom: 0; }
.lrn:hover { background: var(--line); }
.lrn textarea, .lrn button { cursor: auto; }
.lrn button { cursor: pointer; }
.lrn.off { opacity: 0.42; }
/* The textarea fills the row, so a bare row click almost always lands in the text.
   The icon is the reliable one-click mute target. */
.lrntoggle {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0; font-size: 15px;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  cursor: pointer; line-height: 1;
}
.lrntoggle:hover { border-color: var(--line); background: var(--line); }
.lrn.off .lrntoggle { opacity: 1; }
.lrn textarea { flex: 1; min-height: 68px; padding: 9px 11px; font-size: 13px; line-height: 1.45; }
.lrn div { display: grid; gap: 4px; flex: 0 0 auto; }
.lrn button {
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: transparent; color: var(--dim); font-size: 11px;
}

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 40;
  max-width: 88vw; padding: 12px 18px;
  transform: translate(-50%, 150%);
  background: var(--ink); color: #111;
  border-radius: 11px; font-size: 14px; font-weight: 550;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.toast.is-on { transform: translate(-50%, 0); }

/* ---------- login ---------- */

.login { max-width: 320px; margin: 24vh auto; padding: 20px; text-align: center; }
.login h1 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -0.03em; }
.login .sub { margin: 6px 0 24px; color: var(--dim); font-size: 14px; }
.login input { margin-bottom: 10px; text-align: center; }
.login button { width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--hot); color: #fff; font-weight: 600; }
.login .err { margin: 0 0 12px; color: var(--hot); font-size: 13px; }

/* ---------- undo ---------- */

.act.undo { flex: 0 0 66px; }
.act.undo svg { stroke: var(--warm); }
.act.undo:hover { background: #2b2413; }

/* Lessons in the feed are editable in place: a wrong lesson is worse than none. */
.brain li p {
  display: inline; margin: 0; padding: 1px 4px;
  border-radius: 5px; outline: 0;
}
.brain li p:hover { background: rgba(255,255,255,0.04); }
.brain li p:focus { background: #1f1f26; box-shadow: inset 0 0 0 1px var(--warm); }
.brain li .x {
  margin-left: 6px; border: 0; background: none;
  color: var(--faint); font-size: 15px; line-height: 1;
}
.brain li .x:hover { color: var(--hot); }

/* ---------- pre-click cost estimate ---------- */

.est { margin: 9px 2px 0; color: var(--faint); font-size: 12.5px; }

/* ---------- ledger ---------- */

.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.tile { padding: 15px 16px; background: var(--raise); border-radius: var(--r); }
.tile b {
  display: block; margin-bottom: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--faint);
}
.tile span { font-size: 22px; font-weight: 650; letter-spacing: -0.03em; }
.tile em { display: block; margin-top: 3px; color: var(--faint); font-size: 12px; font-style: normal; }

.chartbox h4 small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.chartscroll { overflow-x: auto; padding: 4px 0 2px; }

/* A plain CSS bar chart. No library, so nothing to download and nothing to break. */
.chart { display: flex; align-items: flex-end; gap: 3px; min-width: 100%; height: 132px; }
.bar {
  position: relative; flex: 1 1 0; min-width: 9px;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; border: 0; padding: 0; background: none;
}
.bar i {
  display: block; width: 100%; min-height: 2px;
  background: var(--raise-2); border-radius: 3px 3px 0 0;
  transition: background 0.12s;
}
.bar.has i { background: #3d6bd6; }
.bar.top i { background: var(--warm); }
.bar.sel i { background: var(--ink); }
.bar:hover i { background: var(--go); }
.bar u {
  margin-top: 6px; font-size: 9px; font-style: normal; text-decoration: none;
  color: var(--faint); white-space: nowrap;
}

.kinds { display: grid; gap: 8px; margin: 12px 0 4px; }
.kind { display: flex; justify-content: space-between; font-size: 14px; }
.kind span { color: var(--dim); }

.mrow {
  display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.mrow:last-child { border-bottom: 0; }
.mrow b { font-size: 15px; font-weight: 600; }
.mrow small { display: block; margin-top: 3px; color: var(--faint); font-size: 12px; }
.mrow span { font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }

.dlist { display: grid; gap: 8px; margin-top: 12px; }
.dlist p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #d9d6d1; }
.dlist p b { display: block; font-weight: 600; }

/* ==================== RESEARCH ====================

   Same dark, quiet shell as the idea side. What changes is what a card carries: a find is
   a briefing, not a pitch, so the facts get their own block and the sources are always
   visible. He has to be able to go and check any of it in one tap. */

/* ---------- the app switcher ---------- */

/* Logo and switcher are one unit, hard left; this app's tabs sit hard right. Given three
   things in a 620px bar the nav has to wrap on a narrow window, and when it does these two
   must stay together rather than the logo being stranded alone on the first row. */
.barleft { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand { margin-right: 0; }

.appsw {
  display: flex; gap: 2px;
  padding: 3px; border-radius: 10px; background: var(--raise);
}
.aw {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--faint);
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.aw:hover { color: var(--dim); }
.aw.is-on { background: var(--raise-2); color: var(--ink); }
/* Research gets its own accent when it is the side you are on, so a glance at the header
   tells you which half of the app you are in without reading anything. */
body[data-app="research"] .aw.is-on { color: #c08bff; }

.aw i {
  display: inline-block; min-width: 16px; padding: 0 4px;
  background: var(--hot); color: #fff; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; font-style: normal;
}
.aw i:empty { display: none; }
/* Same rule for the tab badges on this side: blank means nothing waiting, so show nothing
   rather than a zero the eye has to read and discard. */
.nav[data-nav="research"] .nv i:empty { display: none; }

@media (max-width: 560px) {
  .aw { padding: 6px 9px; font-size: 12.5px; }
}

/* ---------- a find ---------- */

.find { display: block; }
.find .tags { margin-bottom: 12px; }
.find .ttl { margin-bottom: 10px; font-size: 23px; }
.find .one { margin-bottom: 14px; color: #d9d6d1; }

.tag.md { background: #1f1f26; }
.tag.nx { color: var(--warm); }

/* The numbers that prove the thing is real. This block is the whole promise of the
   research side, so it is styled to be the first thing the eye lands on after the name. */
.fact {
  margin: 0 0 12px; padding: 12px 14px;
  background: var(--raise-2); border-radius: 10px;
  border-left: 2px solid #2f2f3a;
}
.fact b {
  display: block; margin-bottom: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--faint);
}
.fact p {
  margin: 0; padding: 2px 4px; margin-left: -4px;
  font-size: 14px; line-height: 1.55; color: #cfccd6;
  border-radius: 7px; outline: 0;
}
/* Deliberately not called .why: that class already belongs to the note input on a card,
   and a second element wearing it made querySelector(".why") return this div instead of
   the box, which silently broke every keep and pass. */
.fact.hands { border-left-color: var(--go); }
.fact p:focus, .find .ttl:focus, .find .one:focus, .angle:focus {
  background: #1f1f26; box-shadow: inset 0 0 0 1px var(--warm);
}

/* A nudge, not a pitch. He writes the idea; this just says which way it points. */
.angle {
  margin: 0 0 12px; padding: 9px 12px 9px 30px;
  border-radius: 9px; background: #16161b;
  font-size: 14px; line-height: 1.5; color: var(--dim); font-style: italic;
  position: relative; outline: 0;
}
.angle::before {
  content: "\2192"; position: absolute; left: 12px; top: 9px;
  font-style: normal; color: var(--faint);
}

.srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.srcs a {
  padding: 4px 9px; border-radius: 7px;
  background: #16161b; border: 1px solid var(--line);
  color: var(--faint); font-size: 11.5px; font-weight: 500; text-decoration: none;
}
.srcs a:hover { color: #6ea8ff; border-color: #2f3f5a; background: #14161d; }

.run-stage .find .ttl { font-size: 21px; }
.sweep .run-stage .card { padding: 0; }

/* ---------- the sample crate ---------- */

.sample {
  position: relative;
  padding: 20px; margin-bottom: 10px;
  background: var(--raise); border-radius: var(--r);
}
.sample.star { box-shadow: inset 0 0 0 1px #4a3f18; }

.s-acts {
  display: flex; gap: 6px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.s-star.on { color: var(--warm); border-color: #4a3f18; }
.s-star.on svg { fill: var(--warm); }
.s-ideas:hover { color: var(--warm); border-color: var(--warm); }

/* ---------- ground covered ---------- */

.terr h4 small { margin-left: 8px; color: var(--faint); font-weight: 500; }

.trow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.terr .trow:first-of-type { border-top: 0; }

.t-toggle {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--line); border-radius: 7px;
  background: none; color: var(--go); font-size: 13px; line-height: 1;
}
.t-toggle:hover { border-color: #39394a; background: var(--raise-2); }
.t-name { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
.t-n {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 20px;
  background: var(--raise-2); color: var(--faint); font-size: 11px; font-weight: 600;
}
/* Reopened ground: fair game again, and it says so by going quiet rather than vanishing. */
.trow.off .t-name { color: var(--faint); text-decoration: line-through; }
.trow.off .t-toggle { color: var(--warm); }

#rLauncher textarea { width: 100%; }
#rLauncher .pane p b { color: var(--ink); font-weight: 650; }

/* The facts block is the point of a find, but on a phone a 180-word evidence paragraph is
   a wall. Clamp the long ones the same way saved ideas clamp, so the shape of a card stays
   scannable and the detail is one tap away. Six lines, not three: the numbers ARE the
   value here, so more of them should be visible before anyone has to ask. */
.fact p.clamped {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fact .sv-more { margin-left: -4px; }

/* Confidence, said out loud. A find that could not be fully confirmed must not look
   identical to one that was: the whole promise of this side is that the thing is real. */
.tag.cf.solid  { color: var(--go); }
.tag.cf.likely { color: var(--dim); }
.tag.cf.shaky  { color: var(--warm); background: #241f10; }

/* ---------- Fan ideas ----------

   The queue of what viewers sent in at familyfriendlyideas.com. Same dark shell as the
   rest of the app; the white-and-orange styling belongs to the public site only. */

#view-fan .fan-empty { text-align: center; padding: 60px 20px; color: var(--dim); }
#view-fan .fan-empty h3 { margin: 0 0 8px; color: var(--ink); font-size: 20px; }
#view-fan .fan-empty p { margin: 0; }

.fan-card {
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 18px 16px;
}
.fan-from {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: baseline;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.fan-who { font-weight: 700; color: var(--ink); }
.fan-contacts { color: var(--dim); font-size: 13px; }
.fan-when { color: var(--faint); font-size: 13px; margin-left: auto; }

.fan-lab {
  display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint); margin: 14px 0 6px; font-weight: 700;
}
.fan-card input.fan-title, .fan-card textarea.fan-idea {
  width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  font: inherit; line-height: 1.5;
}
.fan-card input.fan-title { font-size: 18px; font-weight: 700; }
.fan-card textarea.fan-idea { resize: vertical; min-height: 130px; }
.fan-card input.fan-title:focus, .fan-card textarea.fan-idea:focus {
  outline: none; border-color: var(--dim);
}
.fan-sum { margin: 0; color: var(--ink); opacity: 0.85; }

.fan-orig { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.fan-orig summary { cursor: pointer; color: var(--dim); font-size: 13px; }
.fan-orig-t { color: var(--dim); font-weight: 700; margin: 10px 0 4px; }
.fan-orig-b { color: var(--dim); margin: 0; white-space: pre-wrap; }

.fan-acts { justify-content: center; margin-top: 20px; }
/* Text buttons rather than the icon ones used elsewhere, so the colour has to carry the
   meaning on its own. */
.fan-acts .act {
  min-width: 150px; font-weight: 700; font-size: 15px; color: var(--ink);
}
.fan-acts .act.no { color: var(--hot); }
.fan-acts .act.yes { color: var(--go); }
.fan-hint { text-align: center; color: var(--faint); font-size: 12px; margin: 12px 0 0; }

.fan-note { color: var(--dim); font-size: 14px; margin: 0 0 14px; }
.fan-list { display: flex; flex-direction: column; gap: 10px; }
.fan-row {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--raise); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 14px;
}
.fan-row-main { min-width: 0; flex: 1; }
.fan-row-main h4 { margin: 0 0 4px; font-size: 15px; overflow-wrap: anywhere; }
.fan-row-main p {
  margin: 0 0 6px; color: var(--dim); font-size: 14px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fan-row-meta { color: var(--faint); font-size: 12px; }
.fan-reason {
  color: var(--warm); border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 8px; margin-left: 8px; font-size: 11px; white-space: nowrap;
}
.fan-row-act { flex-shrink: 0; }
.fan-tag { color: var(--go); font-size: 12px; font-weight: 700; }

.fan-rule-add { display: flex; gap: 10px; margin-bottom: 14px; }
.fan-rule-add input {
  flex: 1; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit;
}
.fan-rule-add input:focus { outline: none; border-color: var(--dim); }
.fan-rules { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.fan-rule {
  display: flex; align-items: center; gap: 12px;
  background: var(--raise); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
}
.fan-rule span { flex: 1; overflow-wrap: anywhere; }
.fan-rule.off span { color: var(--faint); text-decoration: line-through; }
.fan-spend { color: var(--faint); font-size: 13px; margin-top: 18px; }

.linky {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--dim); font: inherit; font-size: 13px; text-decoration: underline;
}
.linky:hover { color: var(--ink); }
.linky.danger:hover { color: var(--hot); }
.ghost.small { padding: 6px 12px; font-size: 13px; }

/* Who to go and talk to. The kept count is the whole signal, so it gets the weight. */
.fan-row-act { text-align: right; }
.fan-kept-n { display: block; font-size: 22px; font-weight: 700; color: var(--faint); }
.fan-kept-n.good { color: var(--go); }
.fan-kept-l { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); }