/* VELOCITY — what opens over the instrument: the year's cards, the
 * journal, the trees, the detail view, the routine, settings, menus.
 */

/* ============ the reader card: a frame that stays, pages that turn ============ */
#card-layer.active { background: radial-gradient(ellipse at 50% 45%, rgba(3, 8, 14, 0.64), rgba(2, 5, 10, 0.86)); }
.card {
  --cpx: var(--card-pad);
  --kind: var(--amber);
  position: relative;
  width: min(740px, 66vw);
  max-height: 90vh;
  background: linear-gradient(180deg, rgba(20, 31, 48, 0.98), rgba(9, 15, 25, 0.99));
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: var(--shadow-card), 0 0 80px color-mix(in srgb, var(--kind) 14%, transparent), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 400ms var(--ease-out);
  perspective: 1400px;
}
.card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--kind), transparent); opacity: 0.8; pointer-events: none; }
.card.k-tech_unlock { --kind: var(--c-tech); }
.card.k-tech_unlock.k-personal { --kind: var(--accent); }
.card.k-world_event { --kind: var(--c-world); }
.card.k-life_event { --kind: var(--c-people); }
.card.k-biomarker_threshold { --kind: var(--c-body); }
.card.entering { animation: card-in 620ms var(--ease-out) backwards; }
.card.leaving { animation: card-out 220ms var(--ease-in-out) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(34px) scale(0.955); } to { opacity: 1; transform: none; } }
@keyframes card-out { to { opacity: 0; transform: translateY(14px) scale(0.975); } }

.card-top {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 12px 14px 12px var(--cpx);
  background: linear-gradient(90deg, color-mix(in srgb, var(--kind) 16%, transparent), transparent 70%);
  border-bottom: 1px solid color-mix(in srgb, var(--kind) 22%, transparent);
  transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.card-kind {
  font: 750 calc(10.5px * var(--text-scale))/1.4 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--kind);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 320ms var(--ease-out);
}
.card-kind .ico { width: 24px; height: 24px; padding: 5px; border-radius: 8px; background: color-mix(in srgb, var(--kind) 16%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--kind) 30%, transparent); }
.card-toc { display: flex; gap: 5px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.toc-seg {
  --k: var(--amber);
  appearance: none; border: none; cursor: pointer; padding: 0; position: relative;
  flex: 0 1 26px; min-width: 8px; height: 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--k) 22%, transparent);
  transition: background 240ms var(--ease-out), transform 240ms var(--ease-spring), flex-basis 320ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.toc-seg::after { content: ''; position: absolute; inset: -9px -2px; }
.toc-seg.k-tech_unlock { --k: var(--c-tech); }
.toc-seg.k-world_event { --k: var(--c-world); }
.toc-seg.k-life_event { --k: var(--c-people); }
.toc-seg.k-biomarker_threshold { --k: var(--c-body); }
.toc-seg.seen { background: color-mix(in srgb, var(--k) 50%, transparent); }
.toc-seg.read { background: color-mix(in srgb, var(--k) 70%, transparent); }
.toc-seg.cur { background: var(--k); flex-basis: 44px; box-shadow: 0 0 10px var(--k); }
.toc-seg:hover { transform: scaleY(1.6); }
.card-close { flex: none; gap: 6px; }

.card-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--cpx); min-height: 0; overscroll-behavior: contain; }
.card.has-more .card-nav { box-shadow: 0 -18px 24px -12px rgba(0, 0, 0, 0.55); }
.card-page { padding-bottom: 26px; transform-origin: 50% 50%; }
.card-page.pg-next { animation: pg-next 440ms var(--ease-out) backwards; }
.card-page.pg-prev { animation: pg-prev 440ms var(--ease-out) backwards; }
@keyframes pg-next { from { opacity: 0; transform: translateX(40px) rotateY(-7deg); } to { opacity: 1; transform: none; } }
@keyframes pg-prev { from { opacity: 0; transform: translateX(-40px) rotateY(7deg); } to { opacity: 1; transform: none; } }

/* the plate: the engraving, redrawn in light */
.card-plate, .journal-plate {
  --pl: 127, 243, 226;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(var(--pl), 0.14), transparent 70%),
    linear-gradient(180deg, rgba(var(--pl), 0.05), transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.card-plate { height: clamp(150px, 25vh, 236px); margin: 0 calc(-1 * var(--cpx)) 6px; }
.card-plate svg, .journal-plate svg { display: block; max-width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 3px rgba(var(--pl), 0.45)); }
.card-plate svg g, .card-plate svg path, .journal-plate svg g, .journal-plate svg path { stroke: url(#pg-noon); }
.card-plate svg .plate-paper-stroke, .journal-plate svg .plate-paper-stroke { stroke: #0C1422 !important; }
.plate-paper { fill: #0C1422; }
[data-light="dawn"] { --pl: 255, 160, 140; }
[data-light="dawn"] svg g, [data-light="dawn"] svg path { stroke: url(#pg-dawn); }
[data-light="noon"] { --pl: 150, 230, 255; }
[data-light="dusk"] { --pl: 200, 130, 255; }
[data-light="dusk"] svg g, [data-light="dusk"] svg path { stroke: url(#pg-dusk); }
[data-light="overcast"] { --pl: 160, 190, 215; }
[data-light="overcast"] svg g, [data-light="overcast"] svg path { stroke: url(#pg-overcast); }
[data-light="night"] { --pl: 110, 130, 255; }
[data-light="night"] svg g, [data-light="night"] svg path { stroke: url(#pg-night); }
.card-plate.inked svg, .journal-plate.inked svg { animation: ink-in 1200ms var(--ease-out) backwards; }
@keyframes ink-in { 0% { opacity: 0; filter: blur(3px) drop-shadow(0 0 3px rgba(var(--pl), 0.45)); transform: scale(1.03); } 60% { opacity: 1; } 100% { opacity: 1; filter: drop-shadow(0 0 3px rgba(var(--pl), 0.45)); transform: none; } }

.card-head { padding-top: 2px; }
.card-title { font: 700 calc(28px * var(--text-scale))/1.16 var(--font-display); letter-spacing: -0.02em; color: #fff; text-wrap: balance; margin-bottom: 10px; }
.card-head > .card-title:last-child { margin-bottom: 20px; }
.card-title-rule { width: 84px; border: none; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--kind), transparent); box-shadow: 0 0 10px var(--kind); margin: 2px 0 14px; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 calc(11.5px * var(--text-scale))/1.6 var(--font-mono); color: var(--text-3); margin-bottom: 18px; }
.card-badge { display: inline-flex; align-items: center; gap: 6px; font: 650 calc(11px * var(--text-scale))/1 var(--font-sans); letter-spacing: 0.02em; padding: 6px 11px 6px 8px; border-radius: 999px; }
.card-badge.b-personal { background: rgba(47, 227, 203, 0.14); color: var(--teal-ink); box-shadow: inset 0 0 0 1px rgba(47, 227, 203, 0.35), 0 0 14px rgba(47, 227, 203, 0.2); }
.card-badge.b-follow { background: var(--well-2); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.card-badge.b-global { background: rgba(167, 139, 250, 0.14); color: var(--c-tech-ink); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35); }
.card-datum { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 16px; padding: 14px 16px; margin: 0 0 20px; background: rgba(2, 7, 13, 0.5); border: 1px solid var(--line); border-radius: 14px; }
.card-datum .bio-bar { height: 8px; }
.datum-val .bio-value { font-size: calc(18px * var(--text-scale)); }
.datum-range { grid-column: 1 / -1; }
.card-effects { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px; }
.card-effects .chip { font-weight: 650; padding: 5px 11px; }
.card-prose { font: 400 calc(17px * var(--text-scale))/1.72 var(--font-prose); color: #D5DFEA; hanging-punctuation: first; }
.card-prose p { margin-bottom: calc(var(--unit) * 2.2); text-wrap: pretty; }
.card-prose p:last-child { margin-bottom: 0; }
.card-prose strong { color: #fff; }
.rv-hide { color: transparent; }
.reveal-cursor { display: inline-block; width: 2px; height: 0.9em; background: var(--kind); vertical-align: baseline; margin: 0 1px; transform: translateY(0.12em); border-radius: 1px; box-shadow: 0 0 8px var(--kind), 0 0 2px #fff; }
.card-citations { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.card-citations .caps { font-size: calc(9.5px * var(--text-scale)); margin-right: 2px; }
.cite { font: 450 calc(11px * var(--text-scale))/1.7 var(--font-mono); color: var(--text-3); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; border-bottom: 1px solid transparent; transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out); }
a.cite:hover { color: var(--teal-ink); border-bottom-color: rgba(47, 227, 203, 0.5); }
.card-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: none; padding: 12px var(--cpx) 14px; border-top: 1px solid var(--line-soft); background: rgba(6, 11, 19, 0.6); transition: box-shadow 240ms var(--ease-out); }
.card-nav .btn { min-width: 116px; }

/* ============ journal ============ */
.journal-scroll { overflow-y: auto; max-height: min(60vh, 540px); margin: 0 -8px; padding: 0 8px; }
.journal-year { font: 700 calc(12px * var(--text-scale))/1.6 var(--font-display); letter-spacing: 0.12em; color: var(--teal-ink); margin: 16px 0 6px; padding: 4px 2px 5px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: linear-gradient(180deg, rgba(18, 28, 44, 1), rgba(16, 25, 39, 0.96)); z-index: 1; }
.journal-year:first-child { margin-top: 0; }
.journal-row { --jk: var(--amber); display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background 140ms var(--ease-out), transform 160ms var(--ease-out); }
.journal-row.k-tech_unlock { --jk: var(--c-tech); }
.journal-row.k-world_event { --jk: var(--c-world); }
.journal-row.k-life_event { --jk: var(--c-people); }
.journal-row.k-biomarker_threshold { --jk: var(--c-body); }
.journal-row:hover, .journal-row.focused { background: color-mix(in srgb, var(--jk) 10%, transparent); transform: translateX(3px); }
.journal-row.focused { box-shadow: inset 0 0 0 1px var(--accent); }
.journal-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--jk); background: color-mix(in srgb, var(--jk) 14%, transparent); flex: none; }
.journal-name { flex: 1 1 auto; min-width: 0; font: 500 calc(14px * var(--text-scale))/1.45 var(--font-sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-skip { flex: none; font: 600 calc(9.5px * var(--text-scale))/1.6 var(--font-mono); color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.journal-whose { flex: none; font: 650 calc(9.5px * var(--text-scale))/1.6 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0 8px; }
.journal-whose.global { color: var(--c-tech-ink); background: rgba(167, 139, 250, 0.12); }
.journal-whose.personal { color: var(--teal-ink); background: rgba(47, 227, 203, 0.12); }
.journal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.journal-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.journal-tab {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  font: 600 calc(12px * var(--text-scale))/1 var(--font-sans); color: var(--text-2);
  background: var(--well); border: 1px solid var(--line-soft); border-radius: 999px; padding: 7px 11px;
  transition: border-color 140ms var(--ease-out), color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.journal-tab:hover { color: #fff; border-color: var(--line-strong); }
.journal-tab.on { color: #fff; border-color: rgba(47, 227, 203, 0.55); background: rgba(47, 227, 203, 0.1); }
.journal-tab.focused { box-shadow: 0 0 0 2px var(--accent-glow); border-color: var(--accent); }
.jt-n { font: 650 calc(10px * var(--text-scale))/1 var(--font-mono); color: var(--text-3); }
.journal-tab.on .jt-n { color: var(--teal-ink); }
.journal-plate { height: 160px; margin: 0 -8px 8px; border-radius: 12px; }
.journal-detail .card-kind { display: inline-flex; align-items: center; gap: 6px; color: var(--amber); min-width: 0; --kind: var(--amber); }
.journal-detail .card-kind.k-tech_unlock { color: var(--c-tech); --kind: var(--c-tech); }
.journal-detail .card-kind.k-world_event { color: var(--c-world); --kind: var(--c-world); }
.journal-detail .card-kind.k-life_event { color: var(--c-people); --kind: var(--c-people); }
.journal-detail .card-kind.k-biomarker_threshold { color: var(--c-body); --kind: var(--c-body); }
.journal-detail.journal-scroll { max-height: min(66vh, 620px); }
.journal-prose { font: 400 calc(15.5px * var(--text-scale))/1.7 var(--font-prose); color: #D5DFEA; margin-bottom: calc(var(--unit) * 2); max-width: 64ch; }

/* ============ the routine ============ */
.modal-routine .field-zone .field-bar .zone-bar { height: 8px; }
.sup-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.sup-row { padding: 8px 10px; border: 1px solid transparent !important; border-radius: 10px; background: rgba(255, 255, 255, 0.02); }
.sup-row:hover { border-color: var(--line) !important; }
.sup-row.selected { background: rgba(61, 220, 151, 0.08); border-color: rgba(61, 220, 151, 0.3) !important; }
.check-box { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: #032621; transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.sup-row.selected .check-box { background: var(--c-body); border-color: var(--c-body); box-shadow: 0 0 10px rgba(61, 220, 151, 0.5); }
.tag { font: 550 calc(10.5px * var(--text-scale))/1 var(--font-sans); color: var(--text-3); background: var(--well-2); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.sup-row .row-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sup-row .row-cost { flex: none; }
.bd-v { display: inline-flex; align-items: center; gap: 8px; }
.delta-chip { font: 650 calc(10.5px * var(--text-scale))/1 var(--font-mono); padding: 4px 7px; border-radius: 7px; animation: pop-in 360ms var(--ease-spring) backwards; }
.delta-chip.up { background: rgba(61, 220, 151, 0.14); color: var(--c-body-ink); }
.delta-chip.down { background: rgba(245, 181, 68, 0.16); color: var(--amber-ink); }
.breakdown { margin-top: 18px; background: var(--well); border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px 16px; }
.breakdown-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 450 calc(12.5px * var(--text-scale))/2 var(--font-sans); color: var(--text-2); }
.breakdown-row .mono-s { color: #fff; }
.breakdown-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; font-weight: 650; color: #fff; }
.breakdown-sub { justify-content: flex-end; font: 450 calc(11px * var(--text-scale))/1.5 var(--font-mono); color: var(--text-3); }
/* habits: what each does, in its own words (tone by colour and word; red is never used here) */
.habit-row .hr-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.habit-row .hr-name .ico { color: var(--text-3); }
.habit-row .hr-lines { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 3px 10px; font: 450 calc(11px * var(--text-scale))/1.45 var(--font-sans); color: var(--text-3); }
.habit-row .hr-line.t-good { color: var(--c-body-ink); }
.habit-row .hr-line.t-bad { color: var(--amber-ink); }
.habit-row.locked { cursor: default; }
.habit-row.locked .check-box { background: var(--well-2); border-color: var(--amber); color: var(--amber-ink); box-shadow: none; }
.tag.tag-locked { color: var(--amber-ink); background: rgba(245, 181, 68, 0.12); white-space: normal; }
.set-group, .modal .panel-label { margin-top: 18px; }
.modal .panel-label { margin-bottom: 6px; }
.habit-row .hr-more { appearance: none; background: none; border: none; padding: 0; cursor: pointer; font: 650 calc(11px * var(--text-scale))/1.45 var(--font-sans); color: var(--teal-ink); }
.habit-row .hr-more:hover { text-decoration: underline; }
.rt-fold {
  appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 10px 12px; border-radius: 11px;
  background: var(--well); border: 1px solid var(--line-soft);
  font: 600 calc(12.5px * var(--text-scale))/1.2 var(--font-sans); color: var(--text-2);
  transition: border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.rt-fold .ico { color: var(--c-body-ink); }
.rt-fold .nav-arrow { margin-left: auto; color: var(--text-3); }
.rt-fold:hover { color: #fff; border-color: var(--line-strong); }
.rt-fold.focused { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
/* Confirm stays in reach however far the editor scrolls */
.rt-foot {
  position: sticky; bottom: calc(-1 * var(--mpb)); z-index: 3; /* (a sticky edge sits inside the padding) */
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  margin: 20px calc(-1 * var(--mpx)) calc(-1 * var(--mpb)); padding: 12px var(--mpx) var(--mpb);
  background: linear-gradient(180deg, rgba(14, 22, 35, 0.97), rgba(11, 18, 29, 0.99));
  border-top: 1px solid var(--line);
  box-shadow: 0 -14px 24px -14px rgba(0, 0, 0, 0.7);
}
.rt-sum { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.rt-sum-i { display: inline-flex; align-items: baseline; gap: 8px; }
.rt-sum-i small { font: 650 calc(9.5px * var(--text-scale))/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.rt-sum-i b { font: 650 calc(15px * var(--text-scale))/1 var(--font-mono); color: #fff; font-variant-numeric: tabular-nums; }
.rt-sum-i:first-child b { color: var(--c-energy-ink); }
.rt-btns { margin-left: auto; display: flex; gap: 8px; }
.field-flash, .panel-label.field-flash { animation: field-flash 1800ms var(--ease-out); border-radius: 10px; }
@keyframes field-flash { 0%, 35% { background: rgba(47, 227, 203, 0.12); box-shadow: 0 0 0 1px rgba(47, 227, 203, 0.6); } 100% { background: transparent; box-shadow: 0 0 0 1px transparent; } }

/* ============ system menu, settings, archive ============ */
.modal-system { min-width: 360px; }
.sys-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; font: 550 calc(15px * var(--text-scale))/1.3 var(--font-sans); color: var(--text); cursor: pointer; border: 1px solid transparent; transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out), transform 160ms var(--ease-out); }
.sys-item .ico { color: var(--text-3); width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--well-2); }
.sys-item:hover, .sys-item.focused { background: var(--hover); transform: translateX(3px); }
.sys-item:hover .ico, .sys-item.focused .ico { color: var(--accent); background: rgba(47, 227, 203, 0.12); }
.sys-item.focused { border-color: var(--accent); }
.sys-keys { display: grid; gap: 6px; margin-top: 14px; padding: 12px 4px 0; border-top: 1px solid var(--line-soft); }
.sk-h { font-size: calc(9.5px * var(--text-scale)); color: var(--text-3); margin-bottom: 2px; }
.sk-row { display: grid; grid-template-columns: calc(96px * var(--text-scale)) minmax(0, 1fr); align-items: center; gap: 12px; font: 450 calc(12.5px * var(--text-scale))/1.35 var(--font-sans); color: var(--text-2); }
.sk-keys { display: inline-flex; gap: 3px; }
body.m .sys-keys { display: none; }
/* About: the editor for experts lives here */
.modal-about .mh-text .t2 { letter-spacing: 0.24em; }
.about-review { padding-top: 14px; border-top: 1px solid var(--line-soft); }
.modal-people .people-list { max-height: min(62vh, 560px); overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.modal-settings .field { grid-template-columns: minmax(0, 1fr) auto; }
.set-group { margin: 18px 0 2px; color: var(--teal-ink); }
.set-group:first-of-type { margin-top: 4px; }
.archive-list { display: flex; flex-direction: column; gap: 3px; }
.archive-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line-soft); }
.archive-fam { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex: none; box-shadow: 0 0 8px currentColor; }
.archive-row.fam-biological .archive-fam { background: var(--c-body); }
.archive-row.fam-substrate .archive-fam { background: var(--c-tech); }
.archive-row.fam-preservation .archive-fam { background: var(--c-world); }
.archive-name { flex: 1; font: 600 calc(15px * var(--text-scale))/1.3 var(--font-display); }

/* achievements: the screen, and the notice when one unlocks (ui/achievements.js) */
.modal-achievements { width: min(620px, 94vw); }
.ach-off { margin: -6px 0 12px; }
.ach-list { display: flex; flex-direction: column; max-height: min(64vh, 620px); overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.ach-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); }
.ach-tile { display: block; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: none; }
.ach-tile svg { display: block; width: 100%; height: 100%; }
.ach-row.got .ach-tile { box-shadow: 0 0 16px color-mix(in srgb, var(--ah) 30%, transparent); }
.ach-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ach-txt b { font: 650 calc(15px * var(--text-scale))/1.3 var(--font-display); color: var(--text); }
.ach-txt span { font: 400 calc(12.5px * var(--text-scale))/1.45 var(--font-sans); color: var(--text-2); }
.ach-row.locked .ach-txt b { color: var(--text-2); }
.ach-row.locked .ach-txt span { color: var(--text-3); }
.ach-when { color: var(--text-3); white-space: nowrap; }
.ach-prog { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.ach-prog .mono-s { color: var(--text-3); }
.ach-bar { width: 54px; height: 4px; border-radius: 2px; background: var(--well); overflow: hidden; }
.ach-bar i { display: block; height: 100%; border-radius: 2px; background: var(--teal); opacity: 0.75; }
.ach-hidden .ach-lock { display: grid; place-items: center; color: var(--text-4); background: rgba(4, 9, 16, 0.55); border: 1px dashed var(--line); }
.ach-hidden .ach-txt b { color: var(--text-3); font-weight: 550; }

.ach-note {
  position: fixed; right: 22px; bottom: 22px; z-index: 77; pointer-events: none;
  display: flex; align-items: center; gap: 14px; padding: 10px 22px 10px 10px; overflow: hidden; max-width: min(380px, calc(100vw - 32px));
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--ah) 55%, transparent);
  background: linear-gradient(180deg, rgba(24, 38, 58, 0.97), rgba(12, 20, 32, 0.97));
  box-shadow: var(--shadow-lift), 0 0 44px color-mix(in srgb, var(--ah) 30%, transparent);
  animation: an-in 520ms var(--ease-out) backwards;
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}
.ach-note.out { opacity: 0; transform: translateY(10px); }
.ach-note .ach-tile { width: 46px; height: 46px; }
.an-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.an-txt b { display: inline-flex; align-items: center; gap: 7px; font: 700 calc(17px * var(--text-scale))/1.15 var(--font-display); color: #fff; letter-spacing: -0.01em; }
.an-txt b .ico { color: var(--ah); }
.an-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: translateX(-120%) skewX(-18deg); animation: ms-sweep 900ms var(--ease-in-out) 300ms backwards; }
@keyframes an-in { 0% { opacity: 0; transform: translateY(18px) scale(0.96); } 100% { opacity: 1; transform: none; } }
body.m .ach-note { right: 12px; left: 12px; bottom: auto; top: calc(64px + env(safe-area-inset-top, 0px)); max-width: none; }

/* ============ the tech tree ============ */
.modal-tech { width: min(1240px, 96vw); height: min(860px, 92vh); display: flex; flex-direction: column; padding: 20px 22px 18px; }
.modal-tech .modal-head { flex: none; margin-bottom: 12px; }
.tech-filter { gap: 7px; }
.tech-filter .check-box { width: 15px; height: 15px; border-radius: 5px; }
.tech-filter.on { color: var(--teal-ink); border-color: rgba(47, 227, 203, 0.5); }
.tech-filter.on .check-box { background: var(--accent); border-color: var(--accent); }
.tech-body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
.tech-body > .tree-wrap { flex: 1 1 auto; }
.tech-detail {
  position: absolute; top: 34px; right: 10px; bottom: 10px; z-index: 3;
  width: min(360px, 44%);
  display: flex; flex-direction: column; overflow-y: auto; padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(20, 31, 48, 0.98), rgba(10, 17, 28, 0.98));
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: var(--shadow-lift), -20px 0 40px rgba(0, 0, 0, 0.35);
  transform: translateX(calc(100% + 30px)); opacity: 0; pointer-events: none;
  transition: transform 320ms var(--ease-out), opacity 220ms var(--ease-out);
}
.tech-detail.on { transform: none; opacity: 1; pointer-events: auto; }
.td-x { position: absolute; top: 10px; right: 10px; appearance: none; cursor: pointer; width: 30px; height: 30px; border-radius: 9px; font: 300 20px/1 var(--font-sans); color: var(--text-3); background: none; border: 1px solid transparent; }
.td-x:hover { color: #fff; background: var(--hover); border-color: var(--line); }
/* the filter: what you can act on stays lit, whatever is traced */
.tree-node.n-dim { opacity: 0.22; }
.tree-svg.filtered.tracing .tree-node:not(.n-dim) { opacity: 1; }
.tree-svg.filtered.tracing .tree-node.n-dim:not(.hl-self) { opacity: 0.12; }
/* a phone: the trees as a list by tier */
.tech-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px 10px; }
.tl-tier { margin: 14px 2px 6px; font-size: calc(9.5px * var(--text-scale)); color: var(--c-tech-ink); }
.tl-tier:first-child { margin-top: 2px; }
.tl-row {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 11px 10px; margin-bottom: 3px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line-soft);
  font: 550 calc(13.5px * var(--text-scale))/1.35 var(--font-sans); color: var(--text);
}
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 6px var(--pc); }
.tl-state { font: 600 calc(10.5px * var(--text-scale))/1 var(--font-sans); color: var(--text-3); white-space: nowrap; }
.tl-row.st-yours { border-color: rgba(47, 227, 203, 0.4); background: rgba(47, 227, 203, 0.06); }
.tl-row.st-yours .tl-state { color: var(--teal-ink); }
.tl-row.st-world .tl-state { color: var(--c-tech-ink); }
.tl-row.st-locked { color: var(--text-3); }
.tl-row.st-locked .tl-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pc); }
.tl-row.gap { border-style: dashed; border-color: rgba(245, 181, 68, 0.55); }
.tl-row.on { border-color: var(--accent); background: rgba(47, 227, 203, 0.08); }
.tl-detail { display: flex; flex-direction: column; padding: 12px 12px 14px; margin: -1px 0 10px; border-radius: 0 0 12px 12px; background: rgba(4, 9, 16, 0.55); border: 1px solid var(--line-soft); border-top: none; }
.td-kicker { display: flex; align-items: center; gap: 8px; font: 650 calc(10.5px * var(--text-scale))/1.4 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.td-name { font: 700 calc(22px * var(--text-scale))/1.2 var(--font-display); color: #fff; margin: 6px 0 10px; letter-spacing: -0.01em; }
.td-state { align-self: flex-start; font: 650 calc(11px * var(--text-scale))/1 var(--font-sans); padding: 6px 10px; border-radius: 999px; margin-bottom: 12px; }
.td-state.yours { background: rgba(47, 227, 203, 0.16); color: var(--teal-ink); box-shadow: inset 0 0 0 1px rgba(47, 227, 203, 0.35); }
.td-state.world { background: rgba(167, 139, 250, 0.16); color: var(--c-tech-ink); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35); }
.td-state.locked { background: var(--well-2); color: var(--text-3); }
.td-body { font: 400 calc(13.5px * var(--text-scale))/1.6 var(--font-sans); color: var(--text-2); margin-bottom: 12px; }
.td-rel { margin-bottom: 12px; }
.td-rel .caps { margin-bottom: 6px; font-size: calc(9.5px * var(--text-scale)); }
.td-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.node-chip { appearance: none; cursor: pointer; font: 550 calc(11.5px * var(--text-scale))/1.2 var(--font-sans); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--well); color: var(--text); transition: border-color 140ms var(--ease-out); }
.node-chip:hover { border-color: var(--accent); }
.node-chip.yours { border-color: rgba(47, 227, 203, 0.5); background: rgba(47, 227, 203, 0.08); }
.node-chip.locked { color: var(--text-3); border-style: dashed; }
.td-act { margin: 8px 0 6px; }
.tree-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tree-actions-note { margin-top: 8px; color: var(--text-3); }
.tree-wrap { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tree-scroll {
  overflow: auto; flex: 1 1 auto; min-height: 0;
  border: 1px solid var(--line-soft); border-radius: 14px;
  background:
    radial-gradient(circle at 1px 1px, rgba(150, 200, 255, 0.12) 1px, transparent 1.3px) 0 0 / 20px 20px,
    radial-gradient(80% 60% at 50% 0%, rgba(167, 139, 250, 0.08), transparent 70%),
    rgba(2, 7, 13, 0.6);
}
.tree-svg { display: block; }
.tree-tier-label { font: 700 10px var(--font-sans); letter-spacing: 0.14em; fill: var(--text-3); }
.tree-tier-rule { stroke: var(--line-soft); }
.tree-edge { transition: opacity 220ms var(--ease-out), stroke-width 220ms var(--ease-out); }
.tree-node { cursor: pointer; transition: opacity 220ms var(--ease-out); }
.tree-node .n-box { fill: rgba(16, 26, 41, 0.95); stroke: var(--pc); stroke-width: 1.3; transition: stroke-width 160ms var(--ease-out), filter 160ms var(--ease-out); }
.tree-node .n-accent { fill: var(--pc); }
.tree-node .n-name { font: 600 10.5px var(--font-sans); fill: var(--text); }
.tree-node .n-badge { fill: rgba(16, 26, 41, 1); stroke: var(--pc); stroke-width: 1.4; }
.tree-node:hover .n-box { stroke-width: 2.2; filter: drop-shadow(0 0 8px var(--pc)); }
.n-personal .n-box { fill: color-mix(in srgb, var(--pc) 22%, #0E1826); stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(47, 227, 203, 0.45)); }
.n-personal .n-badge { fill: var(--accent); stroke: #fff; }
.n-personal .n-name { fill: #fff; }
.n-gapring { fill: none; stroke: var(--amber); stroke-width: 1.3; stroke-dasharray: 4 3; opacity: 0.9; animation: gap-ants 1.2s linear infinite; }
@keyframes gap-ants { to { stroke-dashoffset: -14; } }
.n-locked { opacity: 0.55; }
.n-locked .n-box { stroke-dasharray: 4 4; fill: rgba(8, 14, 22, 0.6); stroke-width: 1.1; }
.n-locked .n-name { fill: var(--text-3); }
.n-locked .n-badge { display: none; }
.tree-node.n-sel .n-box { stroke-width: 2.8; filter: drop-shadow(0 0 12px var(--pc)); }
.tree-node.focused .n-box { stroke: var(--accent); stroke-width: 2.2; }
.n-qdot { fill: var(--amber); stroke: #fff; stroke-width: 1.5; animation: qdot-pulse 1.8s var(--ease-out) infinite; }
.n-queued { opacity: 1; }
@keyframes qdot-pulse { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: 0.45; } }
.tree-svg.tracing .tree-node { opacity: 0.2; }
.tree-svg.tracing .tree-node.hl-self, .tree-svg.tracing .tree-node.hl-up, .tree-svg.tracing .tree-node.hl-down { opacity: 1; }
.tree-svg.tracing .n-locked.hl-up, .tree-svg.tracing .n-locked.hl-down { opacity: 0.75; }
.tree-svg.tracing .tree-edge { opacity: 0.1; }
.tree-svg.tracing .tree-edge.hl { opacity: 1; stroke-width: 2.4; stroke-dasharray: 6 5; animation: edge-flow 0.9s linear infinite; }
@keyframes edge-flow { to { stroke-dashoffset: -22; } }
.tree-node.hl-down .n-box { stroke-dasharray: none; }

/* ============ detail view: what moves what (ui/influence.js) ============ */
.modal-influence { width: min(1120px, 96vw); height: min(920px, 94vh); max-height: 94vh; display: flex; flex-direction: column; padding: 18px 22px 0; overflow: hidden; }
.ins-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); flex: none; }
.ins-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ins-title .t2 { overflow: hidden; text-overflow: ellipsis; font-size: calc(24px * var(--text-scale)); }
.ins-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 2px 18px; }
.ins-body > * { animation: rise-in 380ms var(--ease-out) backwards; }
.is-sum { max-width: 780px; }
.is-read { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.is-big { font: 700 calc(34px * var(--text-scale))/1 var(--font-display); color: #fff; letter-spacing: -0.02em; }
.is-big.st-warning { color: var(--amber-ink); }
.is-big.st-critical { color: var(--orange); }
.is-big.st-terminal { color: var(--danger-ink); text-shadow: 0 0 16px rgba(255, 77, 94, 0.5); }
.is-big.unk { color: var(--text-4); }
.is-unit { font: 500 calc(12px * var(--text-scale))/1 var(--font-sans); color: var(--text-3); }
.is-chip { font: 700 calc(10px * var(--text-scale))/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 9px; border-radius: 999px; background: var(--well-2); color: var(--text-2); }
.is-chip.st-healthy, .is-chip.b-strong { background: rgba(61, 220, 151, 0.14); color: var(--c-body-ink); }
.is-chip.st-warning, .is-chip.st-critical, .is-chip.b-impaired, .is-chip.b-failing { background: rgba(245, 181, 68, 0.16); color: var(--amber-ink); }
.is-chip.st-terminal, .is-chip.b-failed { background: rgba(255, 77, 94, 0.16); color: var(--danger-ink); }
.is-chip.b-fair { background: rgba(181, 227, 91, 0.16); color: #D2F28E; }
.is-bar { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; max-width: 540px; }
.is-bar > .bio-bar, .is-bar > .org-gauge { flex: 1 1 auto; margin-top: 0; }
.is-spark { flex: none; }
.is-dyn { margin: 10px 0 2px; display: grid; gap: 4px; }
.is-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 500 calc(12.5px * var(--text-scale))/1.5 var(--font-sans); }
.is-arrow { color: var(--text-4); }
.is-next { font-weight: 650; }
.t-good.mono-s, .is-next.t-good { color: var(--c-body-ink); }
.t-bad.mono-s, .is-next.t-bad { color: var(--fx-bad); }
.is-prose { margin: 10px 0 4px; font: 400 calc(13.5px * var(--text-scale))/1.62 var(--font-sans); color: var(--text-2); max-width: 70ch; }
.is-note { margin: 8px 0 4px; max-width: 70ch; }
.is-acts { margin: 8px 0; }
/* on a narrow sheet a condition's treatment pill wraps; it never widens the page */
.modal-influence .is-acts .tree-actions { flex-wrap: wrap; }
.modal-influence .is-acts .act-pill { max-width: 100%; white-space: normal; text-align: left; }
.is-about-h { margin-top: 20px; }
.is-about { max-width: 780px; padding: 0 4px; }
.is-lbl { font-size: calc(9.5px * var(--text-scale)); color: var(--text-3); }
.is-jump { gap: 7px; }
.ig-toggle { margin-left: 4px; }
.ig-more-link { appearance: none; background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--text-2); border-bottom: 1px dotted var(--line-strong); }
.ig-more-link:hover, .ig-more-link.focused { color: var(--teal-ink); }
.ig-wrap { margin: 16px 0 6px; padding: 14px 10px 10px; background: radial-gradient(70% 70% at 50% 50%, rgba(46, 110, 158, 0.12), transparent), rgba(2, 7, 13, 0.55); border: 1px solid var(--line-soft); border-radius: 14px; }
.ig-graph { position: relative; display: flex; flex-direction: column; align-items: center; }
.ig-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ig-more { text-align: center; font-size: calc(11px * var(--text-scale)); margin-top: 4px; }
.ig-line { fill: none; stroke: var(--line-strong); stroke-linecap: round; opacity: 0.6; }
.ig-edge.t-good .ig-line { stroke: var(--fx-good); filter: drop-shadow(0 0 3px rgba(61, 220, 151, 0.6)); }
.ig-edge.t-bad .ig-line { stroke: var(--fx-bad); filter: drop-shadow(0 0 3px rgba(255, 90, 103, 0.6)); }
.ig-edge.t-neutral .ig-line { stroke: #7D8EA3; }
.ig-edge.dormant .ig-line { stroke: var(--text-4); stroke-dasharray: 3 5; opacity: 0.8; filter: none; }
.ig-chev { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke: #9AA9BB; }
.ig-edge.t-good .ig-chev { stroke: #9FFFD2; }
.ig-edge.t-bad .ig-chev { stroke: #FFB1B8; }
.ig-box { fill: rgba(16, 26, 41, 0.96); stroke: var(--line-strong); stroke-width: 1; }
.ig-node.link { cursor: pointer; }
.ig-node.link:hover .ig-box, .ig-node.link:focus .ig-box { stroke: var(--accent); stroke-width: 1.6; filter: drop-shadow(0 0 8px rgba(47, 227, 203, 0.4)); }
.ig-node:focus { outline: none; }
.ig-node.dormant { opacity: 0.6; }
.ig-node.focal .ig-box { stroke: #fff; stroke-width: 1.6; fill: rgba(24, 38, 58, 1); filter: drop-shadow(0 0 16px rgba(127, 200, 255, 0.25)); }
.ig-tab { fill: var(--text-4); }
.ig-node.k-bm .ig-tab { fill: var(--c-body); }
.ig-node.k-organ .ig-tab { fill: var(--amber); }
.ig-node.k-axis .ig-tab, .ig-node.k-sup .ig-tab { fill: var(--teal); }
.ig-node.k-age .ig-tab { fill: var(--text-3); }
.ig-node.k-energy .ig-tab { fill: var(--c-energy); }
.ig-node.k-money .ig-tab { fill: var(--c-money); }
.ig-node.s-warning .ig-tab, .ig-node.s-critical .ig-tab, .ig-node.s-b-impaired .ig-tab, .ig-node.s-b-failing .ig-tab { fill: var(--orange); }
.ig-node.s-terminal .ig-tab, .ig-node.s-b-failed .ig-tab { fill: var(--danger); }
.ig-node.s-off .ig-tab { fill: var(--text-4); }
.ig-name { font: 600 12px var(--font-sans); fill: var(--text); }
.ig-val { font: 500 10.5px var(--font-mono); fill: var(--text-3); }
.ig-node.focal .ig-name { font-size: 15px; fill: #fff; font-family: var(--font-display); font-weight: 700; }
.ig-node.focal .ig-val { font-size: 12.5px; }
.ig-node.s-warning .ig-val, .ig-node.s-critical .ig-val { fill: var(--amber-ink); }
.ig-node.s-terminal .ig-val { fill: var(--danger-ink); }
.ig-foot { display: flex; justify-content: center; margin-top: 10px; }
.ig-ico { color: var(--text-3); overflow: visible; }
.ig-node.focal .ig-ico { color: var(--text-2); }
.ig-node.k-bm .ig-ico { color: var(--c-body-ink); }
.ig-node.k-organ .ig-ico { color: var(--amber-ink); }
.ig-node.k-axis .ig-ico, .ig-node.k-sup .ig-ico { color: var(--teal-ink); }
.ig-node.k-energy .ig-ico { color: var(--c-energy-ink); }
.ig-node.k-money .ig-ico { color: var(--c-money-ink); }
.ig-node.k-cond .ig-ico { color: var(--c-people-ink); }
.it-ico { display: flex; flex: none; color: var(--text-3); }
.it-ico.k-bm { color: var(--c-body-ink); }
.it-ico.k-organ { color: var(--amber-ink); }
.it-ico.k-axis, .it-ico.k-sup { color: var(--teal-ink); }
.it-ico.k-energy { color: var(--c-energy-ink); }
.it-ico.k-money { color: var(--c-money-ink); }
.it-ico.k-cond { color: var(--c-people-ink); }
.it-wrap { display: grid; gap: 16px; margin-top: 16px; }
.it-h { display: flex; align-items: center; gap: 8px; font-size: calc(10px * var(--text-scale)); color: var(--text-2); padding: 0 4px 7px; border-bottom: 1px solid var(--line); }
.it-n { font: 650 10px var(--font-mono); background: var(--well-2); border-radius: 8px; padding: 2px 7px; color: var(--text-2); }
.it-sub { padding: 8px 4px 2px; font-size: calc(10.5px * var(--text-scale)); text-transform: uppercase; letter-spacing: 0.08em; }
.it-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) 104px 70px; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--line-soft); border-radius: 8px; cursor: pointer; transition: background 140ms var(--ease-out); }
.it-row.fixed { cursor: default; }
.it-row:not(.fixed):hover, .it-row.focused { background: var(--hover); }
.it-row.dormant .it-node, .it-row.dormant .it-eff { opacity: 0.62; }
.it-node { display: flex; align-items: center; gap: 8px; min-width: 0; }
.it-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--text-4); }
.it-dot.k-bm { background: var(--c-body); }
.it-dot.k-organ { background: var(--amber); }
.it-dot.k-axis, .it-dot.k-sup { background: var(--teal); }
.it-dot.k-energy { background: var(--c-energy); }
.it-dot.k-money { background: var(--c-money); }
.it-name { display: flex; flex-direction: column; min-width: 0; font: 600 calc(12.5px * var(--text-scale))/1.3 var(--font-sans); color: var(--text); }
.it-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-val { font: 500 calc(10.5px * var(--text-scale))/1.3 var(--font-mono); }
.it-eff { display: flex; flex-direction: column; min-width: 0; font: 500 calc(12px * var(--text-scale))/1.4 var(--font-sans); color: var(--text-2); }
.it-row.t-good .it-what { color: var(--c-body-ink); }
.it-row.t-bad .it-what { color: #FF9AA3; }
.it-when { font-size: calc(10.5px * var(--text-scale)); line-height: 1.35; }
.it-amt { text-align: right; white-space: nowrap; }
.it-bar { position: relative; height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; }
.it-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #7D8EA3; transition: width 200ms var(--ease-out); }
.it-row.t-good .it-fill { background: var(--fx-good); box-shadow: 0 0 6px var(--fx-good); }
.it-row.t-bad .it-fill { background: var(--fx-bad); box-shadow: 0 0 6px var(--fx-bad); }
@media (max-width: 900px) {
  .it-row { grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "node amt bar" "eff eff eff"; row-gap: 4px; column-gap: 10px; }
  .it-node { grid-area: node; } .it-eff { grid-area: eff; } .it-amt { grid-area: amt; } .it-bar { grid-area: bar; }
}

/* the replacement moment (reader: procedure cards) */
.tx-moment { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 16px; margin: 0 0 20px; border-radius: 16px; background: radial-gradient(80% 90% at 20% 50%, color-mix(in srgb, var(--kc) 16%, transparent), transparent 70%), rgba(2, 7, 13, 0.55); border: 1px solid color-mix(in srgb, var(--kc) 35%, var(--line)); }
.tx-stage { position: relative; width: 170px; height: 170px; border-radius: 14px; overflow: hidden; background: rgba(2, 7, 13, 0.6); display: grid; place-items: center; }
.tx-stage > span { position: absolute; inset: 0; display: grid; place-items: center; }
.tx-grid { background: linear-gradient(rgba(127, 243, 226, 0.06) 1px, transparent 1px) 0 0 / 100% 10px, linear-gradient(90deg, rgba(127, 243, 226, 0.06) 1px, transparent 1px) 0 0 / 10px 100%; pointer-events: none; }
.tx-old { animation: tx-out 1100ms var(--ease-in-out) 350ms both; }
.tx-new { animation: tx-in 1300ms var(--ease-out) 1250ms both; filter: drop-shadow(0 0 10px var(--og)); }
.tx-scan { background: linear-gradient(180deg, transparent 0 46%, color-mix(in srgb, var(--kc) 60%, transparent) 49%, #fff 50%, color-mix(in srgb, var(--kc) 60%, transparent) 51%, transparent 54%); opacity: 0; animation: tx-scan 2300ms var(--ease-in-out) 300ms both; }
@keyframes tx-out { 0% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(100% 0 0 0); opacity: 0.3; } }
@keyframes tx-in { 0% { clip-path: inset(0 0 100% 0); opacity: 0.4; transform: scale(0.96); } 70% { opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 1; transform: none; } }
@keyframes tx-scan { 0% { opacity: 0; transform: translateY(-50%); } 8% { opacity: 1; } 45% { transform: translateY(50%); } 55% { transform: translateY(50%); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%); } }
.tx-moment.still .tx-old, .tx-moment.still .tx-scan { display: none; }
.tx-moment.still .tx-new { animation: none; }
.tx-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tx-kind { font: 750 calc(10px * var(--text-scale))/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--kc); }
.tx-nums { display: flex; align-items: baseline; gap: 10px; }
.tx-before { color: var(--text-3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.3); }
.tx-arrow { color: var(--text-4); }
.tx-after { font-size: calc(26px * var(--text-scale)); font-weight: 700; color: var(--og); text-shadow: 0 0 16px var(--og); animation: pop-in 600ms var(--ease-spring) 2300ms backwards; }
.tx-side .ecg { width: 100%; height: 44px; margin-top: 4px; flex: none; }
body.m .tx-moment { grid-template-columns: 120px minmax(0, 1fr); }
body.m .tx-stage { width: 120px; height: 120px; }

/* milestones: what the year achieved, flashed as it lands */
.milestone {
  position: fixed; top: 92px; left: 50%; z-index: 76; pointer-events: none;
  display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 14px; overflow: hidden;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--mh) 60%, transparent);
  background: linear-gradient(180deg, rgba(24, 38, 58, 0.96), rgba(12, 20, 32, 0.96));
  box-shadow: var(--shadow-lift), 0 0 50px color-mix(in srgb, var(--mh) 35%, transparent);
  animation: ms-life 2300ms var(--ease-out) both;
}
.ms-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--mh); background: color-mix(in srgb, var(--mh) 18%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--mh) 40%, transparent); }
.ms-txt { display: flex; flex-direction: column; gap: 2px; }
.ms-txt b { font: 700 calc(18px * var(--text-scale))/1.1 var(--font-display); color: #fff; letter-spacing: -0.01em; }
.ms-txt small { font: 500 calc(12px * var(--text-scale))/1.2 var(--font-sans); color: var(--text-2); }
.ms-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(-120%) skewX(-18deg); animation: ms-sweep 900ms var(--ease-in-out) 250ms both; }
@keyframes ms-life { 0% { opacity: 0; transform: translate(-50%, -16px) scale(0.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.03); } 20% { transform: translate(-50%, 0) scale(1); } 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }
@keyframes ms-sweep { to { transform: translateX(320%) skewX(-18deg); } }
body.m .milestone { top: calc(80px + env(safe-area-inset-top, 0px)); max-width: calc(100vw - 30px); }

/* ============ decisions: a card that asks ============
   The story grows on the page: what was read stays set, the new part writes
   itself, and then the choices appear. Teal is the action colour, so the
   choices are teal; a chip wears the hue of what it touches. */
.toc-seg.asks { background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: glow-pulse 1.8s ease-in-out infinite; --gp-lo: 0.45; --gp-hi: 1; }
.toc-seg.asks.cur { background: var(--accent); }
.card-prose:empty, .story-after:empty { display: none; }
.card-story > .card-prose + .card-prose { margin-top: calc(var(--unit) * 2.2); }
.story-read > :last-child { margin-bottom: 0; }
.story-read .card-effects, .story-after .card-effects, .journal-story .card-effects { margin: 2px 0 calc(var(--unit) * 2.2); }
.story-after { margin-top: 16px; animation: rise-in 360ms var(--ease-out) backwards; }
.story-after[hidden], .choices[hidden] { display: none; }
.choice-made {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 calc(var(--unit) * 2); padding: 10px 14px 10px 10px;
  border-radius: 12px; border: 1px solid rgba(47, 227, 203, 0.32);
  background: linear-gradient(90deg, rgba(47, 227, 203, 0.13), rgba(47, 227, 203, 0.03));
}
.cm-ico { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.cm-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cm-l small { font: 700 calc(9.5px * var(--text-scale))/1.3 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-ink); }
.cm-l b { font: 650 calc(15px * var(--text-scale))/1.3 var(--font-display); color: #fff; }
/* A decision's answer that is not a choice: what chance decided, and a
   result still to come. Quieter than the choice (no fill, dashed = chance). */
.choice-result, .choice-wait {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 calc(var(--unit) * 2); padding: 10px 14px 10px 10px;
  border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--well-2);
}
.choice-result .cm-ico, .choice-wait .cm-ico { color: var(--text-2); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.choice-result .cm-l small, .choice-wait .cm-l small { color: var(--text-3); }
.choice-wait .cm-l b { font-size: calc(14px * var(--text-scale)); color: var(--text-2); }

.choices { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; animation: rise-in 420ms var(--ease-out) backwards; }
.choices-prompt { display: flex; align-items: center; gap: 8px; font: 700 calc(10.5px * var(--text-scale))/1.4 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 2px; }
.choices-prompt .ico { width: 24px; height: 24px; padding: 5px; border-radius: 8px; background: rgba(47, 227, 203, 0.14); box-shadow: 0 0 14px rgba(47, 227, 203, 0.25); }
/* on the face of a choice a chip is a label, not a control */
.ch-fx .chip { cursor: inherit; }
/* not ready yet: a beat after they appear (or after a press that came too early) */
.choices.arming .choice, .choices.arming .choice-confirm .btn { opacity: 0.62; }
.choices .choice, .choices .choice-confirm .btn { transition-property: opacity, border-color, background, transform, box-shadow; }
.choice {
  appearance: none; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 12px; align-items: start;
  padding: 13px 14px 13px 12px;
  border-radius: 14px; border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  color: var(--text); font: inherit;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 200ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.choice:hover { border-color: rgba(47, 227, 203, 0.7); background: linear-gradient(180deg, rgba(47, 227, 203, 0.12), rgba(47, 227, 203, 0.04)); transform: translateX(3px); box-shadow: 0 0 26px rgba(47, 227, 203, 0.12); }
.choice:active { transform: translateX(3px) scale(0.995); }
.choice.focused { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.ch-key { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(47, 227, 203, 0.12); color: var(--teal-ink); }
.ch-key kbd { margin: 0; border: none; background: none; color: var(--teal-ink); font-size: calc(12px * var(--text-scale)); min-width: 0; height: auto; padding: 0; }
.ch-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ch-label { font: 650 calc(16px * var(--text-scale))/1.3 var(--font-display); color: #fff; letter-spacing: -0.005em; }
.ch-detail { font: 400 calc(13.5px * var(--text-scale))/1.5 var(--font-sans); color: var(--text-2); text-wrap: pretty; }
.ch-go { align-self: center; color: var(--text-4); font: 600 16px/1 var(--font-sans); transition: color 160ms var(--ease-out), transform 200ms var(--ease-out); }
.choice:hover .ch-go { color: var(--accent); transform: translateX(3px); }
.ch-lock { display: flex; align-items: flex-start; gap: 6px; font: 500 calc(12.5px * var(--text-scale))/1.45 var(--font-sans); color: var(--amber-ink); }
.ch-lock .ico { margin-top: 3px; }
.choice.locked, .choice.poor { cursor: not-allowed; border-style: dashed; background: rgba(255, 255, 255, 0.015); }
.choice.locked:hover, .choice.poor:hover { transform: none; box-shadow: none; border-color: var(--line-strong); background: rgba(255, 255, 255, 0.015); }
.choice.locked .ch-label, .choice.poor .ch-label, .choice.locked .ch-detail, .choice.poor .ch-detail { color: var(--text-3); }
.choice.locked .ch-key, .choice.poor .ch-key { background: var(--well-2); color: var(--text-3); }
.choice.locked .ch-go, .choice.poor .ch-go { visibility: hidden; }
.choice.locked .ch-fx, .choice.poor .ch-fx { opacity: 0.6; }
.choice.nudge { animation: nudge 380ms var(--ease-out); }
.card-effects.ch-fx { margin: 2px 0 0; gap: 5px; }
.card-effects.ch-fx .chip { font-weight: 600; padding: 3px 9px; font-size: calc(11px * var(--text-scale)); }
.choice-confirm { padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(245, 181, 68, 0.45); background: linear-gradient(180deg, rgba(245, 181, 68, 0.1), rgba(245, 181, 68, 0.03)); animation: rise-in 300ms var(--ease-out) backwards; }
.cf-title { font: 700 calc(18px * var(--text-scale))/1.25 var(--font-display); color: #fff; margin-bottom: 6px; }
.cf-text { font: 400 calc(14.5px * var(--text-scale))/1.55 var(--font-sans); color: var(--text); margin-bottom: 10px; }
.choice-confirm .btn-row { margin-top: 16px; }

/* effect chips: what landed, or what a choice would do */
.chip.fx-chip { white-space: normal; text-align: left; line-height: 1.35; border-radius: 12px; }
.chip.fx-chip .ico { flex: none; }
.chip.h-body { background: rgba(61, 220, 151, 0.11); color: var(--c-body-ink); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.22); }
.chip.h-body.t-bad { background: rgba(245, 181, 68, 0.12); color: var(--amber-ink); box-shadow: inset 0 0 0 1px rgba(245, 181, 68, 0.28); }
.chip.h-chance { background: var(--well-2); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-strong); border-style: dashed; }
.chip.h-end { background: rgba(245, 181, 68, 0.14); color: var(--amber-ink); box-shadow: inset 0 0 0 1px rgba(245, 181, 68, 0.4); }
.chip.h-cond { --cc: var(--text-2); background: color-mix(in srgb, var(--cc) 12%, transparent); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 42%, transparent); cursor: help; }
.chip.h-cond .ico { color: var(--cc); }
.chip.h-cond.t-good { --cc: var(--c-body); } .chip.h-cond.t-warn { --cc: var(--amber); } .chip.h-cond.t-bad { --cc: var(--orange); } .chip.h-cond.t-mortal { --cc: var(--danger); }
.chip.h-cond.is-note { color: var(--text-2); cursor: default; }
.fx-glyph { font: 600 9px var(--font-sans); color: var(--danger); }

/* the journal: a decision remembered */
.journal-chose { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 calc(11.5px * var(--text-scale))/1.4 var(--font-sans); color: var(--teal-ink); }
.journal-story { max-width: 64ch; }
.journal-story p { font: 400 calc(15.5px * var(--text-scale))/1.7 var(--font-prose); color: #D5DFEA; margin-bottom: calc(var(--unit) * 2); }

/* the detail view: a condition you carry */
.ig-node.k-cond .ig-tab { fill: var(--c-people); }
.ig-node.s-c-good .ig-tab { fill: var(--c-body); } .ig-node.s-c-warn .ig-tab { fill: var(--amber); } .ig-node.s-c-bad .ig-tab { fill: var(--orange); } .ig-node.s-c-mortal .ig-tab { fill: var(--danger); }
.ig-node.s-c-mortal .ig-val { fill: var(--danger-ink); }
.it-dot.k-cond { background: var(--c-people); }
.is-chip.c-good { background: rgba(61, 220, 151, 0.14); color: var(--c-body-ink); }
.is-chip.c-warn { background: rgba(245, 181, 68, 0.16); color: var(--amber-ink); }
.is-chip.c-bad { background: rgba(255, 138, 61, 0.16); color: var(--orange); }
.is-chip.c-mortal { background: rgba(255, 77, 94, 0.16); color: var(--danger-ink); }
.cond-lines { list-style: none; display: grid; gap: 4px; margin: 8px 0 6px; max-width: 70ch; }
.cond-lines .cl { position: relative; padding-left: 16px; font: 500 calc(13px * var(--text-scale))/1.5 var(--font-sans); color: var(--text); }
.cond-lines .cl::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.cond-lines .cl.t-good::before { background: var(--c-body); box-shadow: 0 0 6px var(--c-body); }
.cond-lines .cl.t-bad::before { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.cond-lines .cl.t-mortal { color: var(--danger-ink); font-weight: 650; }
.cond-lines .cl.t-mortal::before { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.cond-act { margin: 12px 0 0; }
.choices.pulse .ch-key { animation: key-pulse 700ms var(--ease-out); }
@keyframes key-pulse { 25% { background: rgba(47, 227, 203, 0.3); box-shadow: 0 0 14px var(--accent-glow); transform: scale(1.08); } }
.ch-cond { font: 450 calc(12.5px * var(--text-scale))/1.45 var(--font-sans); color: var(--text-2); padding-left: 10px; border-left: 2px solid var(--cc, var(--line-strong)); text-wrap: pretty; }
.ch-cond b { font-weight: 650; color: var(--text); }
.ch-cond.t-good { --cc: var(--c-body); } .ch-cond.t-warn { --cc: var(--amber); } .ch-cond.t-bad { --cc: var(--orange); } .ch-cond.t-mortal { --cc: var(--danger); }

/* what an adopted technology opens: its protocols and procedures */
/* the year's headlines: a line per technology the world got, and the two ways to make it yours */
.card-headlines { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 2px; }
.card-headlines[hidden] { display: none; }
.card .card-headlines:not([hidden]) { animation: hl-in 420ms var(--ease-out) backwards; }
@keyframes hl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hl-item { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(2, 7, 13, 0.45); }
.hl-head { display: flex; align-items: baseline; gap: 10px; }
.hl-name { font: 650 calc(14px * var(--text-scale))/1.3 var(--font-sans); color: #fff; }
.hl-tier { font: 500 calc(10.5px * var(--text-scale))/1 var(--font-mono); color: var(--c-tech-ink); }
.hl-line { font: italic 400 calc(16px * var(--text-scale))/1.5 var(--font-prose); color: #D5DFEA; margin: 4px 0 0; text-wrap: pretty; }
.hl-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hl-acts:empty { display: none; }
.hl-way {
  --pc: var(--accent);
  display: inline-flex; align-items: center; gap: 7px; appearance: none; cursor: pointer; white-space: nowrap;
  font: 600 calc(12px * var(--text-scale))/1.3 var(--font-sans); color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px 6px 7px;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.hl-way:hover { border-color: color-mix(in srgb, var(--pc) 55%, transparent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), 0 0 16px color-mix(in srgb, var(--pc) 16%, transparent); }
.hl-way:active { transform: translateY(0) scale(0.98); }
.hl-way:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.hl-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); }
.hl-cost { font: 500 calc(10.5px * var(--text-scale))/1.3 var(--font-mono); color: var(--text-3); }
.hl-way.queued { background: linear-gradient(180deg, rgba(47, 227, 203, 0.2), rgba(47, 227, 203, 0.08)); border-color: rgba(47, 227, 203, 0.6); color: var(--teal-ink); box-shadow: 0 0 16px rgba(47, 227, 203, 0.18); }
.hl-way.queued .hl-ico, .hl-way.queued .hl-cost { color: var(--teal-ink); }
.hl-way.queued .hl-ico { background: rgba(47, 227, 203, 0.2); }
.hl-way.queued .hl-cost { font: 700 calc(9.5px * var(--text-scale))/1.3 var(--font-sans); text-transform: uppercase; letter-spacing: 0.12em; }
.hl-way.disabled { opacity: 0.42; cursor: default; transform: none; box-shadow: none; border-color: var(--line); }
.hl-why.yours { display: inline-flex; align-items: center; gap: 5px; font: 650 calc(11px * var(--text-scale))/1 var(--font-sans); color: var(--teal-ink); padding: 6px 10px; border-radius: 999px; background: rgba(47, 227, 203, 0.12); }
.hl-note { margin-top: 7px; font: 450 calc(11.5px * var(--text-scale))/1.45 var(--font-sans); color: var(--text-3); }
.hl-budget { display: flex; justify-content: flex-end; gap: 14px; margin-top: 2px; font: 500 calc(11.5px * var(--text-scale))/1 var(--font-mono); color: var(--text-3); }
.hl-b { display: inline-flex; align-items: center; gap: 4px; }
.hl-b.c-energy { color: var(--c-energy-ink); }
.hl-b.c-money { color: var(--c-money-ink); }
.journal-headlines { margin: 6px 0 12px; max-width: 64ch; }
/* what an adopted technology opens: each item, where it lives (a link), and how it works there */
.card-opens { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 4px; }
.card-opens[hidden] { display: none; }
.card .card-opens:not([hidden]) { animation: hl-in 420ms var(--ease-out) backwards; }
.card-opens > .caps { color: var(--c-tech-ink); margin-bottom: 2px; }
.op-row { --oc: var(--c-body); display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(2, 7, 13, 0.45); }
.op-row.op-procedure { --oc: var(--c-tech); }
.op-row.op-choice { --oc: var(--c-tech); }
.op-row.op-markers { --oc: var(--c-world); }
.op-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; color: var(--oc); background: color-mix(in srgb, var(--oc) 16%, transparent); }
.op-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.op-what { font: 600 calc(13.5px * var(--text-scale))/1.35 var(--font-sans); color: #fff; }
.op-go {
  flex: none; display: inline-flex; align-items: center; gap: 6px; appearance: none; cursor: pointer; white-space: nowrap;
  font: 650 calc(12px * var(--text-scale))/1 var(--font-sans); color: var(--teal-ink);
  background: rgba(47, 227, 203, 0.08); border: 1px solid rgba(47, 227, 203, 0.4); border-radius: 999px; padding: 8px 12px 8px 13px;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.op-go:hover { background: rgba(47, 227, 203, 0.16); border-color: rgba(47, 227, 203, 0.7); transform: translateX(2px); }
.op-go:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.journal-detail .card-opens { margin: 6px 0 14px; max-width: 64ch; }

/* a technology frozen by the world (a regulator's hold): cold, dashed */
.tree-node.n-frozen .n-box { stroke: #9fd4ff; stroke-dasharray: 5 3; }
.td-state.frozen { margin-left: 6px; background: rgba(159, 212, 255, 0.12); color: #bfe2ff; box-shadow: inset 0 0 0 1px rgba(159, 212, 255, 0.4); }
.node-chip.proto { color: var(--c-body-ink); }

/* the savings options are names in sentence case (the diets capitalize) */
.diet-select.invest-select { text-transform: none; }

/* ============ sliders: a setting you drag (V.panels.slider) ============ */
.zslider { position: relative; display: block; padding: 9px 0; cursor: pointer; touch-action: pan-y; outline: none; -webkit-tap-highlight-color: transparent; }
.zslider .zone-bar, .zslider .mix-bar { pointer-events: none; }
.zslider .zone-mark { width: 16px; height: 16px; cursor: grab; transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out); }
.zslider.zs-mix .mix-mark { top: 50%; --zc: var(--text); }
.zslider:hover .zone-mark, .zslider.focused .zone-mark, .zslider:focus-visible .zone-mark { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 0 4px var(--accent-glow); }
.zslider.dragging .zone-mark { cursor: grabbing; transform: translate(-50%, -50%) scale(1.28); box-shadow: 0 0 0 6px var(--accent-glow); }
.zslider.dragging { cursor: grabbing; }

/* effect sizes: one, two or three thick chevrons, in the chip's tone */
.sfx-chev { width: 10px; height: auto; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.chip.h-body.t-good .sfx-chev { color: var(--c-body); }
.chip.h-body.t-bad .sfx-chev { color: var(--amber); }
.chip.h-body.t-neutral .sfx-chev { color: var(--text-2); }
.sup-row .set-fx.hr-fx { margin-top: 3px; }
.habit-row .hr-lines .set-fx.hr-fx { margin-top: 0; }

/* the editor on a wide screen: the settings, and the diagram of the one in hand */
.modal-routine.rt-wide { width: min(1340px, 96vw); max-height: 92vh; }
.rt-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; align-items: start; }
.rt-wide .rt-list .field { position: relative; }
.rt-wide .field.sel::before, .rt-wide .sup-row.sel::before {
  content: ''; position: absolute; left: -13px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
}
.rt-wide .sup-row { position: relative; }
.rt-wide .sup-row.sel::before { left: -9px; top: 8px; bottom: 8px; }
.rt-wide .field.sel .field-label, .rt-wide .field.sel .field-label .ico { color: var(--teal-ink); }
.rt-pane {
  position: sticky; top: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px 10px; border-radius: 16px; background: var(--well); border: 1px solid var(--line-soft);
  animation: rise-in 300ms var(--ease-out) backwards;
}
.rt-pane-head { display: flex; align-items: center; gap: 12px; }
.rt-pane-t { flex: 1 1 auto; min-width: 0; }
.rt-pane-name { font: 700 calc(19px * var(--text-scale))/1.2 var(--font-display); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-pane-val { font: 600 calc(13px * var(--text-scale))/1 var(--font-mono); color: var(--text-2); white-space: nowrap; }
.rt-pane-val.changed { color: #fff; }
.rt-pane-open { flex: none; gap: 6px; }
.ig-wrap.ig-embed { margin: 4px 0 0; padding: 10px 6px 8px; }

/* the diagram on a draft: what the change adds, ends, and where each node goes */
.ig-edge.gone .ig-line { stroke-dasharray: 2 6; opacity: 0.85; filter: none; }
.ig-edge.gone.t-good .ig-line { stroke: rgba(61, 220, 151, 0.55); }
.ig-edge.gone.t-bad .ig-line { stroke: rgba(255, 90, 103, 0.55); }
.ig-edge.gone.t-neutral .ig-line { stroke: rgba(154, 169, 187, 0.6); }
.ig-edge.new .ig-line { animation: ig-new 1600ms var(--ease-out) backwards; }
@keyframes ig-new { 0% { opacity: 1; filter: drop-shadow(0 0 9px #fff); } 100% { opacity: 0.6; } }
.ig-node.ch-gone { opacity: 0.55; }
.ig-node.cmp .ig-val { fill: #fff; }
.ig-node.cmp-good .ig-val { fill: var(--c-body-ink); }
.ig-node.cmp-bad .ig-val { fill: var(--amber-ink); }
body.reduce-motion .ig-edge.new .ig-line { animation: none; }
.modal-routine .still, .modal-routine .ig-edge.still .ig-line { animation: none; } /* showing before the editor redrew: no entering again */