/* ============================================================================
   Mindbranch — one committed GREEN palette, no theme toggle.
   No external fonts, no external anything: the page works offline.

   Background layers, in z-order:
     .bg      base wash + five drifting colour blobs (multiply, not screen —
              on a light base screen-blended colour is invisible)
     .canopy  a tiled branching texture that sways, with sap climbing the
              trunks and junction nodes breathing inside the <pattern>
     .vine    two climbing vines at the page edges, each with a light
              travelling up it and leaves that open in sequence
     .motes   slow rising pollen
     .leaves  falling leaves, randomised size, spin, drift and duration
   ========================================================================== */

:root {
  --paper:   #c7ddc8;
  --panel:   #ffffff;
  --panel2:  #f1f6ed;
  --sunk:    #f5f9f2;
  --line:    #dbe5d4;
  --line2:   #bfd0b6;
  --ink:     #16241b;
  --ink2:    #3b5443;
  --dim:     #6b8473;
  --cool:    #2f6b4f;
  --cool2:   #dbebe0;
  --gold:    #86671a;
  --gold2:   #f7f0d6;
  --amber:   #927028;
  --clay:    #a8453a;
  --clay2:   #fae9e5;
  --moss:    #3d7a4c;
  --serif:   "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --shadow:  0 1px 2px rgba(21,36,44,.05), 0 8px 24px rgba(21,36,44,.06);
}

* { box-sizing: border-box; }
/* The fixed .bg layer IS the background, so body must not paint over it. */
html { background: var(--paper); }
body {
  margin: 0; background: transparent; color: var(--ink);
  font: 16px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ------------------------------------------------------- living background */
/* Eight layers. Every rule animates transform or opacity only, so none of it
   triggers layout; `will-change` is set on the handful that move continuously
   and deliberately NOT on the rest, since a compositor layer per element costs
   more than it saves. */

.bg {
  position: fixed; inset: 0; z-index: -6; overflow: hidden;
  background:
    radial-gradient(1200px 720px at 78% -12%, #a8d0ad 0%, transparent 62%),
    radial-gradient(980px 620px at 4% 104%, #bdd5ad 0%, transparent 60%),
    radial-gradient(700px 700px at 50% 50%, #d4e8d1 0%, transparent 70%),
    linear-gradient(180deg, #d7ead6 0%, #c5ddc4 52%, #b8d3b8 100%);
}
/* Sized in vmax and pulled inside the viewport: edge-anchored vw blobs sit
   almost entirely offscreen on a tall phone and the effect disappears. */
.blob {
  position: absolute; border-radius: 50%; filter: blur(80px);
  mix-blend-mode: multiply; will-change: transform;
}
.b1 { width: 92vmax; height: 92vmax; left: -36vmax; top: -32vmax; opacity: .55;
      background: radial-gradient(circle, #8fc49b 0%, rgba(143,196,155,.42) 38%, rgba(143,196,155,0) 68%);
      animation: drift1 38s ease-in-out infinite; }
.b2 { width: 80vmax; height: 80vmax; right: -33vmax; top: 8vh; opacity: .5;
      background: radial-gradient(circle, #abc98f 0%, rgba(171,201,143,.40) 38%, rgba(171,201,143,0) 68%);
      animation: drift2 50s ease-in-out infinite; }
.b3 { width: 76vmax; height: 76vmax; left: -14vmax; bottom: -38vmax; opacity: .5;
      background: radial-gradient(circle, #bcd9c4 0%, rgba(188,217,196,.38) 38%, rgba(188,217,196,0) 68%);
      animation: drift3 44s ease-in-out infinite; }
.b4 { width: 62vmax; height: 62vmax; right: -18vmax; bottom: -26vmax; opacity: .42;
      background: radial-gradient(circle, #8fbb96 0%, rgba(143,187,150,.34) 40%, rgba(143,187,150,0) 70%);
      animation: drift4 61s ease-in-out infinite; }
.b5 { width: 54vmax; height: 54vmax; left: 22vw; top: 26vh; opacity: .36;
      background: radial-gradient(circle, #b8d39f 0%, rgba(184,211,159,.30) 42%, rgba(184,211,159,0) 72%);
      animation: drift5 73s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); }    50% { transform: translate(13vw,9vh) scale(1.15); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1.07); } 50% { transform: translate(-12vw,13vh) scale(.93); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(.95); }  50% { transform: translate(11vw,-11vh) scale(1.11); } }
@keyframes drift4 { 0%,100% { transform: translate(0,0) scale(1.02); } 50% { transform: translate(-9vw,-14vh) scale(.88); } }
@keyframes drift5 { 0%,100% { transform: translate(0,0) scale(.9); }   50% { transform: translate(16vw,7vh) scale(1.22); } }

/* No viewBox on purpose: one user unit stays one CSS pixel, so the canopy tiles
   at a constant size on a phone and a desktop alike instead of being scaled up
   into four enormous shapes. */
.canopy {
  position: fixed; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px);
  z-index: -4; pointer-events: none; opacity: .72;
  animation: sway 70s ease-in-out infinite; will-change: transform;
}
@keyframes sway {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  33%     { transform: translate(-26px,16px) rotate(.25deg); }
  66%     { transform: translate(18px,-12px) rotate(-.2deg); }
}
/* Inside the <pattern>. CSS animation on pattern content does repaint in
   Chromium — verified by freezing every other animation and diffing frames —
   but it is engine-dependent, so this is decoration that degrades to a static
   highlight, never a load-bearing effect. */
.node { animation: breathe 6.5s ease-in-out infinite; }
.node.n2 { animation-duration: 8.5s; animation-delay: -3s; }
@keyframes breathe { 0%,100% { opacity: .30; } 50% { opacity: .62; } }
.sap { stroke-dasharray: 26 300; animation: flow 9s linear infinite; will-change: stroke-dashoffset; }
.sap.s2 { animation-duration: 12s; animation-delay: -4.5s; }
@keyframes flow { to { stroke-dashoffset: -326; } }

/* Two climbing vines at the page edges. Each has a light travelling up it and
   leaves that open in sequence, and the whole vine sways against the canopy on
   a different clock so the two never line up. */
.vine {
  position: fixed; top: 0; height: 100%; width: 15vw; max-width: 230px; min-width: 96px;
  z-index: -3; pointer-events: none; opacity: 1; will-change: transform;
}
.vl { left: 0;  animation: vsway 33s ease-in-out infinite; transform-origin: left bottom; }
.vr { right: 0; animation: vsway 41s ease-in-out infinite reverse; transform-origin: right bottom; }
@keyframes vsway {
  0%,100% { transform: translateX(0) rotate(0deg); }
  50%     { transform: translateX(6px) rotate(.5deg); }
}
.stem.glow {
  stroke: #46a074;
  animation: climb 15s cubic-bezier(.5,0,.5,1) infinite;
  will-change: stroke-dashoffset;
}
.stem.glow.g2 { animation-duration: 19s; animation-delay: -7s; }
@keyframes climb { from { stroke-dashoffset: 1990; } to { stroke-dashoffset: 0; } }
.vleaf ellipse { transform-box: fill-box; transform-origin: center; animation: unfurl 11s ease-in-out infinite; }
.vleaf.v2 ellipse { animation-duration: 14s; }
.vleaf ellipse:nth-child(1) { animation-delay: -0s; }
.vleaf ellipse:nth-child(2) { animation-delay: -1.6s; }
.vleaf ellipse:nth-child(3) { animation-delay: -3.2s; }
.vleaf ellipse:nth-child(4) { animation-delay: -4.8s; }
.vleaf ellipse:nth-child(5) { animation-delay: -6.4s; }
.vleaf ellipse:nth-child(6) { animation-delay: -8s; }
.vleaf ellipse:nth-child(7) { animation-delay: -9.6s; }
@keyframes unfurl {
  0%,100% { transform: scale(.72) rotate(-3deg); opacity: .5; }
  50%     { transform: scale(1.1) rotate(3deg);  opacity: 1; }
}

.motes, .leaves { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.mote {
  position: absolute; bottom: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,224,193,.82) 0%, rgba(122,168,132,.55) 55%, rgba(122,168,132,0) 100%);
  will-change: transform, opacity;
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translate3d(0,0,0) scale(.7); opacity: 0; }
  14%  { opacity: .75; }
  50%  { transform: translate3d(calc(var(--sway, 16px) * .5), -55vh, 0) scale(1.15); }
  86%  { opacity: .4; }
  100% { transform: translate3d(var(--sway, 16px), -112vh, 0) scale(.8); opacity: 0; }
}

/* Falling leaves. Three silhouettes, five tints and randomised size, spin,
   drift and duration, so no two fall the same way and the loop never shows. */
.leaf { position: absolute; top: -50px; will-change: transform, opacity; animation: leafFall linear infinite; }
.leaf svg { display: block; width: 100%; height: auto; }
@keyframes leafFall {
  0%   { transform: translate3d(0,-50px,0) rotate(0deg) rotateY(0deg); opacity: 0; }
  9%   { opacity: .8; }
  35%  { transform: translate3d(calc(var(--sx, 60px) * .7), 34vh, 0) rotate(calc(var(--spin, 480deg) * .35)) rotateY(140deg); }
  70%  { transform: translate3d(calc(var(--sx, 60px) * -.4), 72vh, 0) rotate(calc(var(--spin, 480deg) * .72)) rotateY(300deg); }
  90%  { opacity: .6; }
  100% { transform: translate3d(var(--sx, 60px), 112vh, 0) rotate(var(--spin, 480deg)) rotateY(520deg); opacity: 0; }
}
@media (max-width: 700px) { .vine { display: none; } }

/* ------------------------------------------------------------------ shell */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px 80px; }

header.top {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 26px 0 18px; border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
header.top h1 { font: 600 25px/1.2 var(--serif); margin: 0; letter-spacing: .2px; }
header.top h1 span { color: var(--cool); }
header.top .sub { color: var(--dim); font-size: 13.5px; }
header.top .spacer { flex: 1 1 auto; }

.btn {
  font: 500 14px/1 var(--sans); color: var(--ink2);
  background: var(--panel); border: 1px solid var(--line2);
  padding: 9px 15px; border-radius: 7px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: var(--cool2); color: var(--ink); border-color: var(--cool); }
.btn.ghost { background: rgba(255,255,255,.6); }
.btn.primary { background: var(--cool); border-color: var(--cool); color: #fff; font-weight: 650; box-shadow: 0 2px 8px rgba(47,107,79,.26); }
.btn.primary:hover { background: #245740; border-color: #245740; color: #fff; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.sm { padding: 6px 11px; font-size: 12.5px; }

/* --------------------------------------------------------------- landing */
.landing { max-width: 760px; margin: 4vh auto 0; }
.landing h2 { font: 600 32px/1.22 var(--serif); margin: 0 0 6px; }
.landing .lede { color: var(--ink2); font-size: 17px; margin: 0 0 26px; }
.landing p { color: var(--ink2); }
.landing ol { color: var(--ink2); padding-left: 20px; }
.landing ol li { margin-bottom: 9px; }
.landing ol b { color: var(--ink); font-weight: 650; }

.warn {
  border: 1px solid #e3bcb4; background: var(--clay2);
  border-left: 3px solid var(--clay);
  padding: 15px 18px; border-radius: 8px; margin: 24px 0;
}
.warn h4 { margin: 0 0 6px; font: 700 12px/1.3 var(--sans); color: var(--clay); letter-spacing: .7px; text-transform: uppercase; }
.warn p { margin: 0; font-size: 14.5px; color: #6d3931; }

.landing .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

/* -------------------------------------------------------------- question */
/* The trailing space is load-bearing, not decoration. Moving to the next
   question re-anchors the scroll so the question text does not move, and when
   the incoming photograph is taller that correction needs to scroll DOWN — if
   the document ends right below the card the browser clamps at the bottom and
   the text jumps by exactly the shortfall. 45vh of slack means the correction
   can always be applied in full. The background is fixed, so the extra space
   costs nothing visually. */
.qlayout {
  display: grid; grid-template-columns: 232px 1fr; gap: 40px; align-items: start;
  min-height: 76vh; padding-bottom: max(50vh, 560px);
}
@media (max-width: 880px) { .qlayout { grid-template-columns: 1fr; gap: 22px; } .spine { display: none; } }

.spine { position: sticky; top: 24px; }
.spine .lab { font: 700 11px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.spine ul { list-style: none; margin: 0; padding: 0; position: relative; }
.spine ul::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line2); }
.spine li { position: relative; padding: 5px 0 5px 20px; font-size: 13.5px; color: var(--dim); }
.spine li::before {
  content: ""; position: absolute; left: 2px; top: 12px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--line2);
}
.spine li.done { color: var(--ink2); }
.spine li.done::before { background: var(--line2); border-color: var(--line2); }
.spine li.now { color: var(--cool); font-weight: 650; }
.spine li.now::before { background: var(--cool); border-color: var(--cool); box-shadow: 0 0 0 3px rgba(47,107,79,.16); }

.qcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 30px 32px 26px; max-width: 720px;
  box-shadow: var(--shadow);
}

/* Chapter photograph, full-bleed to the card edges. Negative margins rather
   than restructuring the card, so the padding below it stays one rule. */
.artband, .chapband, .hero {
  margin: 0; border-radius: 11px 11px 0 0; overflow: hidden;
  line-height: 0; position: relative; background: var(--panel2);
}
.artband { margin: -30px -32px 22px; border-bottom: 1px solid var(--line); animation: bandin .45s ease both; }
@keyframes bandin { from { opacity: 0; } }
/* Whole frame, never a crop. No aspect-ratio and no object-fit: the image is
   shown at its own proportions. A landscape shot fills the card width; a
   portrait one sits centred at its natural width rather than being blown up
   and cut. `width`/`height` on the <img> reserve the space so nothing jumps. */
.artband img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
/* Held back so the photograph never competes with the question above it. One
   filter declaration only — two rules writing `filter` on the same element
   silently overwrite each other rather than combining. */
.artband img, .chapband img, .hero img { filter: saturate(.88) contrast(1.02); }
/* Chapter header. The box hugs the photograph (`max-content`) rather than
   spanning the panel: with an uncropped image letterboxed inside a full-width
   frame, the leftover grey reads as an empty box rather than as a mat. */
.chaphead {
  position: relative; margin: 22px auto 12px; width: max-content; max-width: 100%;
  border-radius: 11px; overflow: hidden; border: 1px solid var(--line);
}
.chaphead:first-of-type { margin-top: 0; }
/* Section headers are capped in height so they cannot tower over the cards
   underneath. `object-fit: contain` is REQUIRED here, not optional: with both
   max-width and max-height binding, the default `fill` stretches the photo to
   the box and silently distorts every one of them — which looks like a bad
   crop and is actually worse than one. `contain` letterboxes instead, so the
   whole frame survives at the right proportions. */
.chapband img { display: block; height: 260px; width: auto; max-width: 100%; }
@media (max-width: 700px) { .chapband img { height: 165px; } }
.chaplabel {
  position: absolute; left: 16px; bottom: 11px;
  font: 600 15px/1 var(--serif); color: var(--ink);
  background: rgba(255,255,255,.86); border: 1px solid var(--line);
  padding: 7px 12px; border-radius: 6px; backdrop-filter: blur(3px);
}

/* Landing hero. */
.hero { border-radius: 12px; border: 1px solid var(--line); margin-bottom: 26px; box-shadow: var(--shadow); }
.hero img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* Attribution. Collapsed by default, but present on the page — CC BY and
   CC BY-SA both require it, so this block is load-bearing, not decoration. */
.credits { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 16px; }
.credits summary { cursor: pointer; font: 600 13px/1.4 var(--sans); color: var(--ink2); }
.credits summary:hover { color: var(--cool); }
.credits p { font-size: 13px; margin: 12px 0; }
/* 152 rows, so three columns and a scroll cap rather than a page of credits. */
.credits ul {
  list-style: none; padding: 0 4px 0 0; margin: 0; columns: 3; column-gap: 26px;
  max-height: 420px; overflow-y: auto;
}
@media (max-width: 1000px) { .credits ul { columns: 2; } }
@media (max-width: 700px) { .credits ul { columns: 1; } }
.credits li { font-size: 12px; color: var(--dim); margin-bottom: 8px; break-inside: avoid; line-height: 1.45; }
.credits li b { color: var(--ink2); font-weight: 650; }
.credits li a { color: var(--cool); }
.credits li span { color: var(--dim); }

.qmeta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.chip {
  font: 700 11px/1 var(--sans); letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--cool); background: var(--cool2);
  border: 1px solid #aecdb8; padding: 5px 9px; border-radius: 5px;
}
.qmeta .count { color: var(--dim); font-size: 12.5px; margin-left: auto; font-family: var(--mono); }

.qtext { font: 500 21px/1.42 var(--serif); margin: 0 0 8px; color: var(--ink); }
.qhelp { font-size: 14px; color: var(--dim); margin: 0 0 22px; border-left: 2px solid var(--line2); padding-left: 12px; }
.qhint { font-size: 13px; color: var(--dim); margin: -8px 0 18px; }

.opts { display: flex; flex-direction: column; gap: 9px; }
.opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: var(--sunk); border: 1px solid var(--line);
  color: var(--ink2); padding: 13px 16px; border-radius: 9px; cursor: pointer;
  font: 15px/1.45 var(--sans); transition: all .13s;
}
.opt:hover { border-color: var(--line2); background: var(--panel2); color: var(--ink); }
.opt .box {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px; margin-top: 2px;
  border: 1.5px solid var(--line2); display: grid; place-items: center;
  font-size: 12px; color: #fff; background: var(--panel);
}
.opt.radio .box { border-radius: 50%; }
.opt.on { border-color: var(--cool); background: var(--cool2); color: var(--ink); }
.opt.on .box { background: var(--cool); border-color: var(--cool); }
.opt.on .box::after { content: "\2713"; font-weight: 700; }

.qnav { display: flex; gap: 10px; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.qnav .spacer { flex: 1 1 auto; }
.bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 18px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cool), var(--gold)); transition: width .3s; }

/* --------------------------------------------------------------- results */
.res h2 { font: 600 27px/1.25 var(--serif); margin: 0 0 4px; }
.res .resub { color: var(--dim); font-size: 14px; margin: 0 0 26px; }

.panelbox {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 24px; margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.panelbox > h3 { font: 700 12px/1 var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); margin: 0 0 4px; }
.panelbox > .note { color: var(--dim); font-size: 13.5px; margin: 0 0 18px; }

.dx { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 11px; background: var(--sunk); }
.dx.met  { border-color: #dcc37f; background: var(--gold2); }
.dx.near { border-color: #d6c3a2; background: #faf7ee; }
.dx.out  { background: rgba(255,255,255,.5); }
.dx .hd { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.dx .nm { font: 600 17px/1.3 var(--serif); color: var(--ink); }
.dx.out .nm { color: var(--ink2); font-weight: 500; }
.dx .tag { font: 700 10.5px/1 var(--sans); letter-spacing: 1.1px; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; }
.dx.met .tag  { background: var(--gold); color: #fff; }
.dx.near .tag { background: #f1e6d0; color: var(--amber); border: 1px solid #d6c3a2; }
.dx.out .tag  { background: transparent; color: var(--dim); border: 1px solid var(--line2); }
.dx .chapname { color: var(--dim); font-size: 12.5px; margin-left: auto; }
.dx .blurb { color: var(--ink2); font-size: 14px; margin: 9px 0 0; }
.dx .why { color: var(--ink2); font-size: 14.2px; margin: 10px 0 0; line-height: 1.58; border-left: 2px solid var(--line2); padding-left: 13px; }
.dx.out .why { border-left-color: #d9a79f; }
.dx .taint {
  margin-top: 10px; font-size: 13.4px; color: #7d332b;
  background: var(--clay2); border: 1px solid #e3bcb4; border-radius: 6px; padding: 8px 11px;
}
.dx .sev { font-size: 13px; color: var(--gold); margin-top: 7px; text-transform: capitalize; font-weight: 600; }
.dx .crit { margin-top: 13px; display: none; }
.dx.open .crit { display: block; }
.dx .crit .row { display: flex; gap: 10px; align-items: flex-start; font-size: 13.6px; padding: 7px 0; border-top: 1px solid var(--line); }
.dx .crit .row .mk { flex: 0 0 auto; width: 16px; text-align: center; font-weight: 700; }
.dx .crit .row.ok .mk { color: var(--moss); }
.dx .crit .row.no .mk { color: var(--clay); }
.dx .crit .row .lb { color: var(--ink2); }
.dx .crit .row .lb b { color: var(--ink); font-weight: 650; display: block; }
.dx .crit .row .lb i { color: var(--dim); font-style: normal; }
.dx .toggle { margin-top: 11px; }

.ledger .item { padding: 15px 0; border-top: 1px solid var(--line); }
.ledger .item:first-of-type { border-top: none; padding-top: 0; }
.ledger .item h4 { margin: 0 0 6px; font: 600 15px/1.35 var(--serif); color: var(--gold); display: flex; gap: 9px; align-items: baseline; }
.ledger .item h4 code { font: 600 10.5px/1 var(--mono); color: var(--dim); border: 1px solid var(--line2); padding: 4px 6px; border-radius: 4px; }
.ledger .item p { margin: 0; color: var(--ink2); font-size: 14.3px; line-height: 1.6; }

/* ------------------------------------------------------------ path replay */
.path .row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: 18px;
  align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.path .row:first-of-type { border-top: none; }
.path .row .q { color: var(--ink2); min-width: 0; }
.path .row .q em { color: var(--dim); font-style: normal; font-size: 12.5px; display: block; }
.path .row .a { color: var(--cool); font-weight: 650; text-align: right; min-width: 0; }
.path .row .a button {
  background: none; border: none; color: var(--cool); font: inherit; cursor: pointer;
  border-bottom: 1px dashed rgba(47,107,79,.55); padding: 0; text-align: right; line-height: 1.45;
}
.path .row .a button:hover { color: var(--gold); border-bottom-color: var(--gold); }
/* Stacked on a phone: the answer sits under its question, so it reads left. */
@media (max-width: 700px) {
  .path .row { grid-template-columns: 1fr; gap: 4px; }
  .path .row .a, .path .row .a button { text-align: left; }
}
.path .editor { grid-column: 1 / -1; padding: 14px 0 6px; }

/* The queue shrinking is the feature made visible, so it gets announced. */
.pruneNote {
  border: 1px solid #a9cbb4; background: #eef6f0; border-left: 3px solid var(--moss);
  border-radius: 9px; padding: 14px 17px; margin: 0 0 22px; max-width: 720px;
  animation: notein .35s ease both;
}
@keyframes notein { from { opacity: 0; transform: translateY(-6px); } }
.pruneNote b { display: block; font: 700 12px/1 var(--sans); letter-spacing: .9px; text-transform: uppercase; color: var(--moss); margin-bottom: 6px; }
.pruneNote p { margin: 0; font-size: 14.2px; color: #2f5b3d; }
.pruneNote p.sub { margin-top: 8px; font-size: 13.4px; color: #4a6b55; border-left: 2px solid #a9cbb4; padding-left: 11px; }

.panelbox.needs { border-color: var(--cool); box-shadow: 0 0 0 3px rgba(47,107,79,.10), var(--shadow); }
.dx.unresolved { border-color: #aecdb8; background: var(--cool2); }
.dx.unresolved .tag { background: var(--cool); color: #fff; }

.diff { border: 1px solid #dcc37f; background: var(--gold2); border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; }
.diff h4 { margin: 0 0 9px; font: 700 12px/1 var(--sans); letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold); }
.diff ul { margin: 0; padding-left: 18px; color: #5b451c; font-size: 14.2px; }
.diff li { margin-bottom: 6px; }
.diff b { color: var(--ink); }
.diff .none { color: var(--ink2); font-size: 14px; margin: 0; }

.resactions { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 0; }
.foot { color: var(--dim); font-size: 12.5px; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); }