/* See ahead: the lamp (a ripple map of consequences), 10/10/10, the pre-mortem card and the
   planning figure. Tokens only (assets/css/tokens.css). Ink lines, paper nodes, lamp yellow for
   light (always ink on yellow), Prussian blue for what the visitor adds. */

.marks { position: absolute; width: 0; height: 0; overflow: hidden; }
.mk-g { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk-dash { stroke-dasharray: 2.2 1.8; }
.mk { width: 16px; height: 16px; flex: none; color: inherit; }

/* ---------- Layout of the instrument ---------- */
.try { padding-bottom: var(--s8); }
.lamp {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  grid-template-areas:
    "choices map"
    "ask map"
    "gaps map"
    "own map";
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--s6);
}
.lamp-choices { grid-area: choices; display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin: calc(var(--s2) * -1) 0 var(--s3); }
.lamp-caption { display: none; }
.lamp-map { grid-area: map; position: relative; height: 590px; min-width: 0; }
.lamp-ask { grid-area: ask; padding-top: var(--s2); }
.gaps { grid-area: gaps; margin-top: var(--s5); padding-top: var(--s4); border-top: var(--bw) solid var(--ink); }
.own-form { grid-area: own; margin-top: var(--s5); padding-top: var(--s4); border-top: var(--bw) solid var(--ink); align-self: start; }
.lamp-list { display: none; }

/* The everyday choices: the same tab-like buttons as the home page. */
.ex { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink); font-size: var(--fs-small); font-weight: 560; cursor: pointer; }
.ex:hover { border-bottom-color: var(--hair); }
.ex[aria-pressed="true"] { border-bottom-color: var(--ink); font-weight: 760; }

/* "And then what?": the one big control. Outline only (the header owns the solid button). */
.btn-ask { width: 100%; min-height: 64px; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); font-weight: 780; letter-spacing: -0.01em; border-width: 3px; }
.btn-ask:disabled { opacity: 0.4; }
.lamp-status { margin: var(--s2) 0 0; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.4; }

/* The payoff: the dark slices, named. */
.gaps-h { margin: 0; font-size: var(--fs-small); font-weight: 700; }
.gaps-names { margin: var(--s1) 0 var(--s1); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; font-weight: 820; letter-spacing: -0.02em; }
.gaps-line { margin: 0 0 var(--s3); font-size: var(--fs-small); color: var(--ink-2); }
/* The names already carry the highlighter. When an action changes them, it sweeps across them again
   (motion.js adds .flash; nothing is added under reduced motion). */
.gaps-names .hl.flash { background-repeat: no-repeat; animation: gaps-resweep 700ms var(--ease) both; }
.gaps-names .hl.flash::after { display: none; }
@keyframes gaps-resweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
.areas li { display: flex; align-items: center; gap: var(--s2); margin: 0; padding: 5px 0; border-bottom: var(--bw) solid var(--hair); font-size: var(--fs-small); line-height: 1.25; }
.areas .aw { flex: 1; min-width: 0; }
.areas .ac { font-weight: 700; }
.areas li.is-dark { color: var(--ink-2); }
.areas li.is-dark .ac { font-weight: 400; font-style: italic; }

/* Add your own. */
.own-q { display: block; width: fit-content; font-size: var(--fs-small); font-weight: 700; line-height: 1.35; margin-bottom: var(--s3); }
.own-text, .own-area { min-height: 44px; border: var(--bw) solid var(--ink); border-radius: var(--r-control); background: var(--paper); font-size: var(--fs-small); }
.own-text { width: 100%; padding: 0 var(--s3); }
.own-text::placeholder { color: var(--ink-2); opacity: 1; }
.own-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s2); }
.own-l { font-size: var(--fs-small); }
.own-area { flex: 1; min-width: 8rem; padding: 0 var(--s2); }
.own-reset { margin-top: var(--s4); font-weight: 560; }
.own-form :disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- The map ---------- */
.lamp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lamp-nodes, .lamp-rim { position: absolute; inset: 0; pointer-events: none; }
.lamp-nodes > *, .lamp-core { pointer-events: auto; }

.light { fill: var(--yellow); opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.light.r1.on { opacity: 0.78; }
.light.r2.on { opacity: 0.5; }
.light.r3.on { opacity: 0.28; }
.pool { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; }
.spoke { stroke: var(--hair); stroke-width: 1; }
.ring { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 3 6; transition: stroke var(--t-mid) var(--ease); }
.ring.on { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: none; }
.link { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--t-mid) var(--ease); }
.link.on { opacity: 1; }
.link.own { stroke: var(--blue); }

/* The lamp at the centre, with the choice written on its pool of light. */
.lamp-core {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  max-width: 10.5rem; padding: var(--s1) var(--s2); border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--ink); cursor: pointer; text-align: center;
}
.lamp-core:focus-visible { outline-offset: 0; }
.lamp-art { width: 52px; height: auto; overflow: visible; }
.lamp-art .body { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.lamp-art .flame { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.lamp-art .wick { fill: var(--paper); }
.core-text { font-size: 1.0625rem; font-weight: 780; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }

/* Consequences: paper nodes with an ink edge. The visitor's own are Prussian blue. */
.node {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 6px;
  max-width: 9.75rem; min-height: 44px; padding: 5px 10px 6px 8px;
  border: 2px solid var(--ink); border-radius: var(--r-control);
  background: var(--paper); color: var(--ink);
  font-size: 1rem; line-height: 1.18; font-weight: 580; font-stretch: 92%; text-align: left;
  cursor: pointer;
  transition: opacity var(--t-mid) var(--ease), scale var(--t-slow) var(--ease-swing), background var(--t-fast) var(--ease);
}
.node.is-placed { transition: opacity var(--t-mid) var(--ease), scale var(--t-slow) var(--ease-swing), translate var(--t-slow) var(--ease), background var(--t-fast) var(--ease); }
.node:hover { background: var(--paper-2); }
.node.own { background: var(--blue); border-color: var(--blue); color: var(--paper); }
.node.own:hover { background: var(--ink); border-color: var(--ink); }
.node[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.node.is-hidden { visibility: hidden; opacity: 0; }
.node.is-new { opacity: 0; scale: 0.9; }
.node .nplus { flex: none; align-self: flex-start; margin: 1px -4px 0 0; font-weight: 800; color: var(--ink-2); }
.node.is-open .nplus { visibility: hidden; }
.node.own .nplus { color: var(--paper); }

/* Phones: the consequences are dots on the map, written out underneath. */
.lamp.is-dots .node { width: 36px; height: 36px; min-height: 0; max-width: none; padding: 0; justify-content: center; border-radius: 50%; }
/* The dot stays 36px to the eye; the finger gets 44px. */
.lamp.is-dots .node::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.lamp.is-dots .node::before { content: ""; position: absolute; inset: -5px; }
.lamp.is-dots .node .nt, .lamp.is-dots .node .nplus { display: none; }
.lamp.is-dots .core-text { display: none; }
.lamp.is-dots .lamp-art { width: 44px; }

/* The area names round the rim. Dark slices read lighter and say so in words. */
.rim { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; font-size: var(--fs-small); line-height: 1.1; color: var(--ink); }
.rim .rt { display: inline-flex; align-items: center; gap: 5px; font-weight: 720; }
.rim .rd { visibility: hidden; font-weight: 400; font-style: italic; color: var(--ink-2); }
.rim.is-dark .rt { font-weight: 420; color: var(--ink-2); }
.rim.is-dark .rd { visibility: visible; }
.lamp.is-dots .rim .rw, .lamp.is-dots .rim .rd { display: none; }
.lamp.is-dots .rim .mk { width: 18px; height: 18px; }

/* The list under the dots (phones only). */
.lamp.is-dots .lamp-list { display: block; }
.lamp-list { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.lamp-list > li { margin: 0; padding: var(--s2) 0; border-top: var(--bw) solid var(--ink); }
.lamp-list .lr { margin: 0 0 var(--s1); font-size: var(--fs-small); font-weight: 700; }
.lamp-list ul { list-style: none; margin: 0; padding: 0; }
.lamp-list ul li { margin: 0; }
.li-node { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 44px; padding: 2px 0; border: 0; background: none; color: var(--ink); font-size: var(--fs-small); font-weight: 560; text-align: left; cursor: pointer; }
.li-dot { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.li-node.own .li-dot { background: var(--blue); border-color: var(--blue); color: var(--paper); }
.li-node.own .lt { color: var(--blue); font-weight: 700; }
.li-node[aria-pressed="true"] .lt { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* ---------- 10/10/10 and the pre-mortem ---------- */
.tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); margin-top: var(--s8); padding-top: var(--s4); border-top: var(--bw-strong) solid var(--ink); }
.tools h3 { margin-top: 0; }
.tools-sub { font-size: var(--fs-small); color: var(--ink-2); max-width: 34rem; }
.tt-chart { height: 132px; margin-top: var(--s4); }
.tt-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tt-zero { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 3 5; }
.tt-axis { font-size: 1rem; fill: var(--ink-2); }
.tt-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tt-dot { fill: var(--ink); }
.tt-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s3); }
.tt-col { display: flex; flex-direction: column; gap: var(--s1); border-top: var(--bw) solid var(--ink); padding-top: var(--s2); text-align: center; }
.tt-when { font-weight: 760; font-size: var(--fs-small); }
.tt-text { width: 100%; min-height: 44px; padding: var(--s1) var(--s2); border: var(--bw) solid var(--ink); border-radius: var(--r-control); background: var(--paper); font-size: var(--fs-small); line-height: 1.3; text-align: center; resize: none; }
.tt-feel { font-size: var(--fs-small); color: var(--ink-2); margin-top: var(--s2); }
.tt-feel output { color: var(--ink); font-weight: 700; }
.tt-read { width: fit-content; margin-top: var(--s4); font-size: 1.25rem; font-weight: 720; line-height: 1.3; }

.pm-card { border: var(--bw-strong) solid var(--ink); padding: var(--s5); background: var(--paper); margin-top: var(--s4); }
.pm-head { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 780; line-height: 1.22; letter-spacing: -0.01em; margin-bottom: var(--s2); }
.pm-row { margin-top: var(--s4); }
.pm-row label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.pm-in { display: block; width: 100%; min-height: 44px; padding: var(--s2) 0; border: 0; border-bottom: var(--bw) solid var(--ink); border-radius: 0; background: transparent; font-size: var(--fs-body); line-height: 1.4; resize: vertical; }
.pm-in:focus-visible { outline-offset: 2px; }
.pm-fix label { color: var(--ink); font-weight: 700; }

/* ---------- What just happened ---------- */
#happened .prose h3 { margin-top: var(--s7); }
#happened .verse { margin: var(--s4) 0 var(--s5); }
.plan { margin: var(--s5) 0 var(--s6); }
.plan-chart { height: 140px; }
.plan-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pl-axis { stroke: var(--ink); stroke-width: 2; }
.pl-tick { stroke: var(--ink); stroke-width: 1.5; }
.pl-num { font-size: 1rem; fill: var(--ink-2); text-anchor: middle; font-variant-numeric: tabular-nums lining-nums; }
.pl-mark { stroke: var(--ink); stroke-width: 2; }
.pl-mark.soft { stroke-dasharray: 3 3; }
.pl-word { font-size: 1rem; fill: var(--ink); font-weight: 650; text-anchor: middle; }
.pl-val { font-size: 1rem; fill: var(--ink-2); text-anchor: middle; font-variant-numeric: tabular-nums lining-nums; }
.pl-you { stroke: var(--blue); stroke-width: 3; }
.pl-you-dot { fill: var(--blue); }
.pl-real { opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.pl-real.on { opacity: 1; }
.pl-real rect { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.5; }
.pl-real .pl-word, .pl-real .pl-val { fill: var(--ink); }
.plan-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-top: var(--s1); }
.plan-l { margin: 0; font-size: var(--fs-small); font-weight: 600; }
.plan-l output { color: var(--blue); font-weight: 760; }
.plan-read { margin: var(--s3) 0 0; font-weight: 650; min-height: 1.6em; }
.plan-took { display: inline-block; }
.plan figcaption { margin-top: var(--s3); font-size: var(--fs-meta); line-height: 1.5; color: var(--ink-2); }

/* ---------- Where you'll meet this ---------- */
.meet-table tbody th { width: 30%; font-size: 1.0625rem; }
.meet-table td:nth-child(2) { width: 24%; }
.meet-table tbody tr:hover { background: var(--paper-2); }

/* ---------- Scripture ---------- */
.ahead-verses .verse:last-child { margin-bottom: 0; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  .lamp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "choices choices"
      "ask ask"
      "map map"
      "list list"
      "gaps own";
    grid-template-rows: none;
  }
  .lamp-ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-bottom: var(--s4); }
  .btn-ask { width: auto; padding: 0 var(--s6); }
  .lamp-status { margin: 0; }
  .lamp-map { height: 620px; }
}
@media (max-width: 900px) {
  .tools { grid-template-columns: 1fr; gap: var(--s7); }
}
@media (max-width: 760px) {
  .lamp { grid-template-columns: 1fr; grid-template-areas: "choices" "caption" "ask" "map" "list" "gaps" "own"; }
  .lamp-choices { gap: 0 var(--s4); margin-bottom: var(--s2); }
  .lamp-caption { display: block; grid-area: caption; margin: var(--s2) 0 0; font-size: 1.375rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; }
  .lamp-map { height: 380px; }
  .lamp-ask { margin: var(--s3) 0 var(--s2); }
  .btn-ask { width: 100%; }
  .gaps, .own-form { margin-top: var(--s5); }
  .tt-cols { gap: var(--s2); }
  .tt-text { padding: var(--s1); }
  .pm-card { padding: var(--s4); }
  .meet-table thead { display: none; }
  .meet-table, .meet-table tbody, .meet-table tr, .meet-table th, .meet-table td { display: block; width: auto !important; }
  .meet-table tr { padding: var(--s3) 0; border-bottom: var(--bw) solid var(--hair); }
  .meet-table th, .meet-table td { border: 0; padding: 0; }
  .meet-table td:nth-child(2) { margin: var(--s1) 0; }
  .meet-table td:nth-child(2)::before { content: "First: "; font-weight: 650; }
  .meet-table td:nth-child(3)::before { content: "Easy to miss: "; font-weight: 650; }
  .meet-table td:nth-child(3) { color: var(--ink-2); }
}