/* isaidangerous — styles
 *
 * Settled 13 September 2026, by looking rather than arguing:
 *   warm parchment page, cards a shade darker than it, 1px near-black line,
 *   square corners, Literata, four bright question colours by position.
 *   Dark is the same geometry with the lights off and the questions hollow
 *   and glowing.
 *
 * Every image sits on a permanent light plate, so one asset serves both
 * themes — that was the thing that made a second theme expensive.
 *
 * The rule that holds everywhere: ANSWERS are bordered panels the reader
 * reads; QUESTIONS carry the colour. True whether a box is open or collapsed.
 */

:root, [data-mode="light"] {
  --bg:          #efece4;
  --ink:         #232019;
  --ink-soft:    #5a5549;
  --ink-faint:   #8b8577;

  --answer-bg:   #e9e4d6;
  --answer-line: #2b2822;

  --accent:      #1f6a58;
  --link:        #1b6252;
  --led-seen:    rgba(0,0,0,.30);
  --led-on:      rgba(0,0,0,.72);

  --evidence-bg: #f5f2e8;
  --rule:        #d9d3c6;
  --field-bg:    #f5f2e8;
  --detail-bg:   #dfdace;
}

[data-mode="dark"] {
  --bg:          #15140f;
  --ink:         #ece9df;
  --ink-soft:    #a29d91;
  --ink-faint:   #746f65;

  --answer-bg:   #1e1d17;
  --answer-line: #6a655a;

  --accent:      #5fc9ae;
  --link:        #6fd6ba;
  --led-seen:    rgba(236,233,223,.26);
  --led-on:      #ece9df;

  --evidence-bg: #272519;
  --rule:        #322f28;
  --field-bg:    #1a1914;
  --detail-bg:   #191811;
}

:root {
  /* the four question colours, applied by position in the block.
     14 September 2026: pushed a little more saturated and laid at 78% opacity
     in light mode (Alex's recipe), so they blend back to nearly the same
     colour over the parchment while the backdrop network shows through them.
     The solid values are still used for dark mode's hollow glowing buttons. */
  --c0: #38d2c3;  --c1: #6ea9f7;  --c2: #fbcd33;  --c3: #f584c2;
  --c0-rgb: 56,210,195; --c1-rgb: 110,169,247; --c2-rgb: 251,205,51; --c3-rgb: 245,132,194;
  --q-alpha: .78;
  --c0-ink: #06302b; --c1-ink: #06203f; --c2-ink: #382b00; --c3-ink: #3d0c2a;

  /* never themed: pictures always sit on this */
  --plate:      #f4f1e7;
  --plate-line: #cdc6b5;

  --font: "Literata", Georgia, "Iowan Old Style", serif;
  --radius: 0px;
  --bw: 1px;
  --maxw: 40rem;
  --lh: 1.52;
  --fade: 260ms;

  /* the question type size — set ONCE, used by both the live button and the
     one-liner it becomes, so the two can never drift apart */
  --q-size: 16px;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  /* The intro screen fits without a scrollbar; the first move makes the page
     taller and the bar appears, and on desktop the centred column jumps left
     by the bar's width. Keep the gutter from the start so nothing moves.
     (Alex saw it on 14 September 2026.) */
  overflow-y: scroll;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs, 17px)/var(--lh) var(--font);
  padding: 1.4rem .85rem 1.2rem;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  transition: background .25s ease, color .25s ease;
}

.thread { width: 100%; max-width: var(--maxw); }
#tail { width: 100%; }

/* The backdrop network sits behind everything and takes no clicks. The content
   is lifted above it; the cards stay opaque, so it shows only in the gaps and
   on the intro screen, which is where it earns its place. */
#backdrop {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.thread, .foot, #tail { position: relative; z-index: 1; }

/* ---------- ANSWERS ---------- */

.card {
  background: var(--answer-bg);
  border: var(--bw) solid var(--answer-line);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  margin: .5rem 0;
}
.card h2 {
  margin: 0 0 .75rem;
  font-size: 1.42rem; line-height: 1.24;
  font-weight: 600; letter-spacing: -.018em;
  text-wrap: balance;
}
.card p { margin: 0 0 .8rem; }
.card p:last-child { margin-bottom: 0; }
.card strong { font-weight: 700; }
.card ul { margin: 0 0 .8rem; padding-left: 1.15rem; }
.card li { margin: .28rem 0; }

/* green emphasis: a date that opens a paragraph (automatic, see blocks.js) and
   anything marked ==like this== in the text, mostly the names of the people
   the page quotes (Alex, 14 September 2026) */
.date, .hl { color: var(--accent); font-weight: 600; }

.card a, .detail-body a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.card a:hover, .detail-body a:hover { text-decoration-thickness: 2px; }

.card-line {
  display: flex; align-items: center;
  width: 100%; min-height: 2.7rem;
  background: var(--answer-bg);
  border: var(--bw) solid var(--answer-line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font: inherit; font-size: 15px;
  text-align: left; padding: 0 .8rem; margin: .3rem 0;
  cursor: pointer; white-space: nowrap; overflow: hidden;
}
.card-line:hover { color: var(--ink); border-color: var(--accent); }
.card-line .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The untaken-questions count on a collapsed card. A flex item AFTER the text,
   so the text ellipsises before it can reach the badge, never under it. */
.badge {
  flex: none;
  margin-left: .6rem;
  min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  border-radius: 999px;
  border: 1px solid var(--answer-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; line-height: 1; font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg);
}
.card-line:hover .badge { color: var(--ink); border-color: var(--accent); }
[data-mode="dark"] .badge { background: var(--answer-bg); }

/* ---------- QUESTIONS ---------- */

.qblock { margin: .35rem 0 .9rem; }

.q, .q-line {
  border: var(--bw) solid var(--answer-line);
  border-radius: var(--radius);
}
.q {
  position: relative; display: block; width: 100%;
  text-align: left;
  font: inherit; font-size: var(--q-size); line-height: 1.4;
  padding: .72rem 2.2rem .72rem .85rem;
  margin: .4rem 0;
  cursor: pointer;
  transition: filter .12s ease, box-shadow .16s ease;
}
.q:active { transform: scale(.996); }
.q:hover { filter: brightness(1.06); }

/* Identical to .q in every respect that can be seen — same type, same weight,
   same padding, same box. It differs only by being one line tall and clipped.
   Nothing about a question changes size when it becomes one, so it simply
   slides up and stays there. */
.q-line {
  display: block; width: 100%;
  text-align: left;
  font: inherit; font-size: var(--q-size); line-height: 1.4;
  padding: .72rem 2.2rem .72rem .85rem;
  margin: .4rem 0;
  cursor: pointer;
}
.q-line .txt {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.q.c0, .q-line.c0 { background: rgba(var(--c0-rgb), var(--q-alpha)); color: var(--c0-ink); }
.q.c1, .q-line.c1 { background: rgba(var(--c1-rgb), var(--q-alpha)); color: var(--c1-ink); }
.q.c2, .q-line.c2 { background: rgba(var(--c2-rgb), var(--q-alpha)); color: var(--c2-ink); }
.q.c3, .q-line.c3 { background: rgba(var(--c3-rgb), var(--q-alpha)); color: var(--c3-ink); }

/* dark: hollow and glowing rather than filled */
[data-mode="dark"] .q,
[data-mode="dark"] .q-line { background: transparent; }
[data-mode="dark"] .q.c0, [data-mode="dark"] .q-line.c0 {
  color: var(--c0); border-color: var(--c0); box-shadow: 0 0 14px rgba(78,201,189,.22); }
[data-mode="dark"] .q.c1, [data-mode="dark"] .q-line.c1 {
  color: var(--c1); border-color: var(--c1); box-shadow: 0 0 14px rgba(127,176,245,.22); }
[data-mode="dark"] .q.c2, [data-mode="dark"] .q-line.c2 {
  color: var(--c2); border-color: var(--c2); box-shadow: 0 0 14px rgba(247,207,74,.20); }
[data-mode="dark"] .q.c3, [data-mode="dark"] .q-line.c3 {
  color: var(--c3); border-color: var(--c3); box-shadow: 0 0 14px rgba(240,145,198,.22); }
[data-mode="dark"] .q:hover { filter: brightness(1.3); }

.led {
  position: absolute; right: .85rem; top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--led-seen);
}
.q.on-path { box-shadow: inset 0 0 0 2px var(--answer-line); }
.q.on-path .led { background: var(--led-on); }
[data-mode="dark"] .q.on-path { box-shadow: inset 0 0 0 1px currentColor, 0 0 18px rgba(95,201,174,.22); }
[data-mode="dark"] .q.on-path .led { background: currentColor; box-shadow: 0 0 7px currentColor; }

/* Questions carry no border in light mode: the colour is the button. In dark
   the border IS the button, so it stays. */
[data-mode="light"] .q,
[data-mode="light"] .q-line { border-color: transparent; }
[data-mode="light"] .q.on-path { box-shadow: inset 0 0 0 2px rgba(0,0,0,.26); }

/* ---------- objections: questions that open inside the card ----------
 * Settled 14 September 2026, with Alex. An objection ("But isn't this just
 * marketing?") is the same coloured button as a road question, smaller, so it
 * reads as a genuine question and not a footnote. It opens in place, like
 * "read more", and never enters the ladder: an objection is a stop on the
 * argument, not a step of it. The answer panel takes the button's colour on
 * its left edge so the eye pairs them. One open at a time keeps the card
 * short on a phone.
 */
.objs { margin-top: 1.05rem; }
.q.obj {
  font-size: 14.5px; line-height: 1.35;
  padding: .52rem 2.1rem .52rem .75rem;
  margin: .32rem 0;
}
.q.obj .icon {
  position: absolute; right: .7rem; top: 50%;
  width: 13px; height: 13px;
  transform: translateY(-50%);
  transition: transform .18s ease;
}
.q.obj[aria-expanded="true"] .icon { transform: translateY(-50%) rotate(90deg); }

.obj-answer {
  margin: .1rem 0 .7rem;
  padding: .75rem .9rem;
  background: var(--detail-bg);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  font-size: 15.5px; line-height: 1.5;
  color: var(--ink);
}
.obj-answer.c0 { border-left-color: var(--c0); }
.obj-answer.c1 { border-left-color: var(--c1); }
.obj-answer.c2 { border-left-color: var(--c2); }
.obj-answer.c3 { border-left-color: var(--c3); }
.obj-answer p:last-child { margin-bottom: 0; }
.obj-answer .quote { font-size: 15.5px; margin: .5rem 0; }
.obj-answer .links:last-child { margin-bottom: 0; }

@media (min-width: 1040px) {
  .q.obj { font-size: 15px; }
}

/* ---------- the opening screen ---------- */

.intro {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 1rem 1rem 0;
  justify-content: center;
}
.intro-quote {
  margin: 0 0 1.1rem;
  max-width: 30rem;
  font-size: 1.5rem; line-height: 1.34;
  font-weight: 400; font-style: italic;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--ink);
}
.intro-who {
  font-size: 1rem; font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
}
.intro-role {
  margin-top: .3rem;
  max-width: 26rem;
  font-size: 13.5px; line-height: 1.45;
  color: var(--ink-faint);
}

/* The opening question is an ordinary question — same size, same weight — so
   that pressing it changes nothing about it except where it sits.
   The one exception on the page: it is centred, and it stays centred after it
   is pressed, because it belongs to the opening screen rather than to the
   ladder. Both selectors matter — the live block, and the one-liner it becomes. */
.intro + .qblock,
.intro + .q-line {
  margin-top: 1.6rem;
  max-width: 26rem;
  margin-inline: auto;
}
.intro + .qblock .q,
.intro + .q-line {
  text-align: center;
  padding-left: 2.2rem;      /* matched to the right padding, so the text sits
                                on the true centre rather than the LED's left */
}

/* ---------- the opening screen, as a measured layout ----------
 * Three fixed points, on every device:
 *   the quote is centred in the space above the button,
 *   the button's top edge sits at the top of the bottom third,
 *   the light/dark control rests on the floor of the screen.
 * The variable height of a phone is absorbed by the gap between the button
 * and the footer, and by the air above the quote — never by the quote itself,
 * which stays at full size. What keeps that possible is the length cap in
 * check.py: a quote too long for this layout is too long to be an opener.
 * dvh rather than vh, because mobile browser chrome slides in and out and vh
 * does not notice.
 */
[data-screen="intro"] .intro {
  /* The button's top edge = body padding-top (1.4rem) + this height + the
     button's own margin-top (1.6rem). Set the height so that sum is 2/3 of
     the screen exactly, and the button lands where it was asked to land. */
  min-height: calc(66.6dvh - 3rem);
  justify-content: center;
}

/* A phone turned sideways, and nothing else. A small phone held upright keeps
   the quote at full size — that is what the length cap is for. Landscape has
   barely 300px above the button, so here, and only here, the type yields. */
@media (max-height: 560px) {
  [data-screen="intro"] .intro { min-height: calc(66.6dvh - 2.4rem); }
  .intro-quote { font-size: 1.15rem; margin-bottom: .6rem; }
  .intro-role { display: none; }
  .intro + .qblock { margin-top: 1rem; }
}

/* ---------- movement ---------- */

.fading {
  transition: opacity var(--fade) cubic-bezier(.4,0,.6,1);
  opacity: 0 !important; pointer-events: none;
}
.reveal { opacity: 0; transform: translateY(6px); }
.reveal.shown {
  opacity: 1; transform: none;
  transition: opacity .46s cubic-bezier(.22,.61,.36,1),
              transform .46s cubic-bezier(.22,.61,.36,1);
}

/* Card surface (14 September 2026). Three textures were tried in one evening
   and each was removed by Alex's eye: a sheen crossing the arriving card
   ("so 2012, Windows Vista"); a paper grain (too faint to see, and stronger
   would look old); and a staggered lattice of small plus signs (fashionable,
   and the page turned out not to need it). The cards are plain parchment
   with a one-pixel line. Nobody should try a fourth without reading this. */

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .reveal.shown, .fading { transition: none; }
}

/* ---------- media ---------- */

.figure { margin: 1rem 0 .9rem; }
.figure img {
  display: block; width: 100%; height: auto;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  padding: .55rem;
}
.figure figcaption {
  margin-top: .45rem;
  font-size: 13.5px; line-height: 1.45;
  color: var(--ink-faint);
}

.video-poster {
  display: block; position: relative; width: 100%;
  padding: 0; border: 1px solid var(--answer-line);
  background: none; cursor: pointer;
}
.video-poster img { display: block; width: 100%; height: auto; border: 0; padding: 0; }
.video-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform .15s ease;
}
.video-play .icon { width: 46px; height: 46px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.video-poster:hover .video-play { transform: scale(1.07); }
.figure.video iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 1px solid var(--answer-line);
}

.callout {
  margin: 1rem 0; padding: .9rem 1rem;
  border-left: 4px solid var(--accent);
  background: var(--detail-bg);
}
.callout-value {
  font-size: 2.1rem; line-height: 1.05; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink);
}
[data-mode="dark"] .callout-value { color: var(--accent); text-shadow: 0 0 18px rgba(95,201,174,.3); }
.callout-label { margin-top: .3rem; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }

.links { margin: 1rem 0 .3rem; }
.links-head {
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .5rem;
}
.link-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .6rem 0; border-top: 1px solid var(--rule);
  text-decoration: none; color: var(--ink);
}
.link-row:last-child { border-bottom: 1px solid var(--rule); }
.link-text { font-size: 15.5px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.link-note { font-size: 13.5px; color: var(--ink-faint); }
.link-row .icon { width: 13px; height: 13px; color: var(--ink-faint); margin-left: auto; }
.link-row:hover .link-text { text-decoration-thickness: 2px; }

/* ---------- evidence ----------
 * The CARD looks like every other card. Only the quote inside it is
 * formatted, because that is content rather than a category. Giving each
 * kind of card its own colour would end in a palette nobody can read.
 */

.quote { font-size: 17px; line-height: 1.55; border-left: 3px solid var(--accent); padding-left: .9rem; margin: .7rem 0; }
.quote p { margin: 0 0 .6rem; }
.quote p:last-child { margin-bottom: 0; }
.source { font-size: 13.5px; color: var(--ink-faint); margin-top: .5rem; }
.evnote { font-size: 15px; color: var(--ink-soft); margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--rule); }

/* ---------- details ---------- */

.detail { margin-top: 1.05rem; padding-top: .85rem; border-top: 1px dashed var(--answer-line); }
.detail-toggle {
  display: flex; align-items: center; gap: .4rem;
  width: 100%; text-align: left;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 1.08rem; font-weight: 600; line-height: 1.3;
  color: var(--accent);
  cursor: pointer;
}
.detail-toggle .icon { width: 15px; height: 15px; flex: none; transition: transform .18s ease; }
.detail-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
.detail-toggle:hover { filter: brightness(1.2); }

.detail-body {
  margin-top: .75rem; padding: .85rem .95rem;
  background: var(--detail-bg);
  border: 1px solid var(--rule);
  font-size: 15.5px; color: var(--ink-soft);
}
.detail-body p:last-child { margin-bottom: 0; }
.detail-body .figure:last-child,
.detail-body .links:last-child { margin-bottom: 0; }

.collapse-link {
  background: none; border: 0; color: var(--ink-faint);
  font: inherit; font-size: 13.5px;
  padding: 0; margin-top: .9rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.collapse-link:hover { color: var(--ink); }

/* ---------- ask box ---------- */

.askbox {
  margin: .8rem 0 .5rem; padding: 1rem;
  background: var(--answer-bg);
  border: var(--bw) dashed var(--answer-line);
  border-radius: var(--radius);
}
.askbox label { display: block; font-size: 15px; color: var(--ink-soft); margin: .8rem 0 .4rem; }
.ask-head { font-size: 1.2rem; font-weight: 600; letter-spacing: -.012em; margin-bottom: .35rem; }
.ask-text { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 .4rem; }
.ask-notice { font-size: 13.5px; color: var(--accent); margin: .2rem 0 .2rem; padding: .45rem .6rem; border: 1px dashed var(--accent); }
.askbox input[type="email"],
.askbox textarea {
  width: 100%;
  font: inherit; font-size: 16px; padding: .6rem .7rem;
  border: 1px solid var(--answer-line); border-radius: var(--radius);
  background: var(--field-bg); color: var(--ink);
}
.askbox textarea { min-height: 4.2rem; resize: vertical; }
.ask-consent { font-size: 13.5px; line-height: 1.45; color: var(--ink-faint); margin: .7rem 0 0; }
.askbox button {
  margin-top: .6rem; font: inherit; font-size: 15px; font-weight: 600;
  padding: .5rem 1.1rem;
  border: var(--bw) solid var(--answer-line); border-radius: var(--radius);
  background: var(--accent); color: var(--bg);
  cursor: pointer;
}
.askbox .sent { font-size: 14px; color: var(--accent); margin-top: .5rem; }

/* ---------- doors ---------- */

.doors { width: 100%; max-width: var(--maxw); margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.doors-label { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .6rem; }
.doors-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.door {
  font: inherit; font-size: 14.5px; padding: .45rem .85rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: none; color: var(--ink-soft); cursor: pointer;
}
.door:hover { border-color: var(--accent); color: var(--ink); }

/* ---------- foot ---------- */

.foot {
  width: 100%; max-width: var(--maxw);
  margin-top: auto;              /* always on the floor of the screen */
  padding: .9rem 0 .4rem;
  border-top: 1px solid var(--rule);
}
.foot-label { /* unused while the skeleton has no label */
  display: block;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .5rem;
}
.foot-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.swatch {
  font: inherit; font-size: 12.5px; padding: .32rem .85rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: none; color: var(--ink-soft); cursor: pointer;
}
.swatch.active { border-color: var(--accent); color: var(--ink); }

@media (min-width: 640px) {
  body { font-size: var(--fs, 17px); }
  .card { padding: 1.3rem 1.45rem; }
}

/* Desktop. The extra width goes into LAYOUT — two text columns and questions
   side by side — rather than into line length, which is what made the first
   attempt read as a stretched phone. */
@media (min-width: 1040px) {
  :root { --maxw: 47rem; }
  body { font-size: var(--fs, 17px); padding-top: 2rem; }
  .intro + .qblock { max-width: 26rem; margin-inline: auto; }
  .card { padding: 1.5rem 1.7rem; }
  .card h2 { font-size: 1.5rem; }
  :root { --q-size: 16.5px; }
  .intro-quote { font-size: 1.85rem; max-width: 32rem; }
  [data-screen="intro"] .intro { min-height: calc(66.6dvh - 3.6rem); }
}