/* pages.css — landing, sign in, home (your review), set up. */

/* ---------- welcome ---------- */
.welcome { max-width: 600px; margin: 0 auto; padding: var(--space-7) var(--page-pad) var(--space-9); }
.welcome .wordmark { display: inline-block; margin-bottom: var(--space-6); }
@media (max-width: 639px) { .welcome { padding-top: var(--space-5); } .welcome .wordmark { margin-bottom: var(--space-5); } .welcome h1 { font-size: 2.1rem; } }
.welcome h1 { font-family: var(--font-reading); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--fw-semibold); margin-top: var(--space-4); }
.welcome .sub { font-size: var(--fs-lg); color: var(--text-secondary); margin-top: var(--space-5); max-width: 46ch; }
.promise { list-style: none; counter-reset: step; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.promise li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: var(--space-2); color: var(--text-secondary); }
.promise li::before { content: counter(step); font-family: var(--font-reading); font-size: var(--fs-xl); line-height: 1.1; color: var(--text-secondary); font-weight: var(--fw-semibold); }
.promise b { color: var(--text); font-weight: var(--fw-semibold); }
.welcome-form { display: grid; gap: var(--space-4); margin-top: var(--space-6); max-width: 400px; }
.welcome .promise { padding-top: var(--space-5); border-top: 1px solid var(--border); }
.welcome-form .btn { justify-self: start; }
/* sign-in with Auth0: Google on top, "or", then email + password */
.welcome-auth .btn.lg, .auth-email .btn.primary { justify-self: stretch; }
.btn.google { background: #fff; border-color: #747775; color: #1F1F1F; gap: var(--space-3); } /* Google's standard button */
.btn.google:hover { background: #F8F9FA; }
.or { display: flex; align-items: center; gap: var(--space-3); color: var(--text-secondary); font-size: var(--fs-sm); }
.or::before, .or::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.auth-email { display: grid; gap: var(--space-4); }
/* the optional contact box, above both ways in */
.consent { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text); cursor: pointer; }
.consent input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); }
.consent .muted { display: block; margin-top: 2px; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.field-head .btn.quiet, .welcome-auth .switch .btn.quiet { height: auto; padding: 0; vertical-align: baseline; }
.say { padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: var(--fs-sm); }
.say.notice { background: var(--accent-soft); }
.say.error { background: var(--danger-bg); color: var(--danger); }
.say ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.say li.sub { margin-left: var(--space-4); list-style: circle; }

/* ---------- home: your review ---------- */
.review-head { display: flex; gap: var(--space-5); align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.review-head h1 { font-family: var(--font-reading); font-size: var(--fs-3xl); font-weight: var(--fw-semibold); line-height: var(--lh-display); letter-spacing: var(--track-display); margin-top: var(--space-2); }
.review-section { margin-top: var(--space-7); }
.review-section > h2 { font-family: var(--font-reading); font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin-bottom: var(--space-4); }
.chapters { display: grid; gap: var(--space-3); }
.card.chapter-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.chapter-row .title { font-family: var(--font-reading); font-size: var(--fs-xl); line-height: var(--lh-heading); }
.chapter-row .meta { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 2px; }
.chapter-row .go { color: var(--text-secondary); }
.chapter-row.pending { cursor: default; }
.chapter-row.pending .title { color: var(--text-secondary); }

/* ---------- stages ---------- */
.stages { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: 0; }
.stage { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-4); position: relative; padding-bottom: var(--space-6); }
.stage:last-child { padding-bottom: 0; }
.stage::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: var(--border); }
.stage:last-child::before { display: none; }
.stage .dot { width: 28px; height: 28px; border-radius: var(--radius-full); border: 1.5px solid var(--border-strong); background: var(--bg); display: grid; place-items: center; color: var(--text-faint); }
.stage.done .dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.stage.now .dot { border-color: var(--accent); }
.stage.now .dot .spinner { width: 16px; height: 16px; }
.stage.stopped .dot { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.stage .label { font-family: var(--font-reading); font-size: var(--fs-xl); line-height: 28px; }
.stage:not(.done):not(.now):not(.stopped) .label { color: var(--text-secondary); }
.stage .when { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 2px; }
.stage .detail { margin-top: var(--space-3); }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.files li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); min-width: 0; }
.files li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage > div { min-width: 0; }
.files li.bad { color: var(--danger); }
.waiting-note { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--text-secondary); font-size: var(--fs-sm); max-width: 62ch; }

/* ---------- set up ---------- */
.setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); margin-top: var(--space-6); }
.setup fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.setup legend { font-family: var(--font-reading); font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); padding: 0; }
.grid-3 { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .grid-3 { grid-template-columns: 2fr 2fr 1fr; } }
.sdg-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
@media (max-width: 419px) { .sdg-picker { grid-template-columns: 1fr 1fr; } }
.sdg-tile .t { min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; padding-right: 14px; }
.sdg-tile { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-2); align-items: start; padding: var(--space-3); min-height: 84px; text-align: left; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font-size: var(--fs-sm); line-height: 1.3; transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
.sdg-tile:hover { border-color: var(--border-control); }
.sdg-tile .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--sdg); color: var(--sdg-ink); font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.sdg-tile[aria-pressed="true"] { background: var(--sdg); border-color: var(--sdg); color: var(--sdg-ink); }
.sdg-tile[aria-pressed="true"] .n { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.sdg-tile[aria-pressed="true"]::after { content: '✓'; position: absolute; bottom: 8px; right: 10px; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.sdg-tile:disabled { opacity: .45; cursor: not-allowed; }
.picker-note { font-size: var(--fs-sm); color: var(--text-secondary); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.drop { display: grid; place-items: center; text-align: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1); }
.drop:hover { border-color: var(--border-control); }
.drop.over { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.drop .line { font-family: var(--font-reading); font-size: var(--fs-xl); }
.drop .line u { text-decoration-color: var(--rule); text-underline-offset: 4px; }
.drop:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.drop .hint { color: var(--text-secondary); font-size: var(--fs-sm); }
.file-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.file-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border); font-size: var(--fs-md); }
.file-list li > .icon, .file-list .size, .file-list .why, .file-list .icon-btn { flex: none; }
.file-list .name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list li.refused .name { color: var(--text-secondary); }
.file-list li:first-child { border-top: 0; }
.file-list .size { color: var(--text-secondary); font-size: var(--fs-sm); }
.file-list .why { color: var(--danger); font-size: var(--fs-sm); }
.submit-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.review-head .summary { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-secondary); }
h1[tabindex="-1"]:focus { outline: none; }
.chapter-row .go .icon { width: 20px; height: 20px; }
.prototype-note { margin-top: var(--space-7); font-size: var(--fs-sm); color: var(--text-secondary); }
.drop .when-tap { display: none; }
@media (hover: none), (max-width: 639px) { .drop .when-drag { display: none; } .drop .when-tap { display: inline; } }
@media (max-width: 639px) { .file-list .name { white-space: normal; overflow-wrap: anywhere; } .file-list li { align-items: flex-start; flex-wrap: wrap; } }
.refs-foot { margin-top: var(--space-6); font-size: var(--fs-sm); color: var(--text-secondary); }
.waiting-note.add-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: space-between; }

/* The sample chapter's run: overall bar, a bar on the running stage, what just happened */
.run { margin-top: var(--space-6); padding: var(--space-5); }
.run-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.run-head .pct { font-family: var(--font-reading); font-size: var(--fs-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.run-head .left { font-size: var(--fs-md); color: var(--text-secondary); }
.run-note { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.bar { height: 6px; border-radius: var(--radius-full); background: var(--accent-soft); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 600ms ease; }
.stage .bar { margin-top: var(--space-2); max-width: 420px; }
.stage .doing { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage .focus { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--fs-md); }
.picked { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.picked li { display: grid; grid-template-columns: 16px 1fr; gap: var(--space-2); font-size: var(--fs-sm); min-width: 0; }
.picked li .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--text-secondary); }
.picked li div { min-width: 0; }
.picked li span { display: block; color: var(--text-secondary); }
.activity { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.activity h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-secondary); font-weight: var(--fw-medium); margin: 0 0 var(--space-3); }
.activity ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.activity li { display: grid; grid-template-columns: 3.5em 1fr; gap: var(--space-3); font-size: var(--fs-sm); }
.activity time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sample-note { margin-top: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-secondary); }
.sample-note p { margin: 0; max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .bar > span { transition: none; } }

/* ---------- where it comes from: a box, its documents, and curved lines between (evidence.js) ---------- */
[data-link-frame] { position: relative; }
svg.links { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
svg.links path { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-linecap: round; transition: stroke var(--dur-1); }
svg.links path.grow { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-link 640ms var(--ease-out) forwards; }
svg.links circle.end { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; transition: stroke var(--dur-1); }
@keyframes draw-link { to { stroke-dashoffset: 0; } }
.src { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.src-head { display: grid; gap: 2px; width: 100%; padding: var(--space-2) var(--space-3); text-align: start; background: none; border: 0; border-radius: inherit; font: inherit; color: inherit; }
button.src-head { cursor: pointer; }
button.src-head:hover { background: var(--surface-muted); }
.src-name { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-ui); min-width: 0; }
.src-name bdi { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.src-name .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--text-secondary); }
.src-pages { font-size: var(--fs-xs); color: var(--text-secondary); padding-left: 23px; }
.src-toggle { font-size: var(--fs-xs); color: var(--accent); padding-left: 23px; }
.src.open { border-color: var(--rule); }
.src-quotes { padding: 0 var(--space-3) var(--space-3); display: grid; gap: var(--space-2); }
.src-quotes blockquote { margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--rule); font-family: var(--font-reading); font-size: var(--read-small); line-height: 1.5; overflow-wrap: anywhere; }
.src-quotes .q-page { display: block; margin-top: 2px; font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--text-secondary); }
.src-more, .src-none { font-size: var(--fs-xs); color: var(--text-secondary); margin: 0; }
@media (prefers-reduced-motion: reduce) { svg.links path.grow { animation: none; stroke-dashoffset: 0; } }

/* ---------- check the findings (findings.js) ---------- */
.findings-page { padding-bottom: var(--space-6); }
.f-eyebrow { display: flex; align-items: center; gap: var(--space-2); }
.findings-page .lede { max-width: 64ch; }
.f-legend { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.f-legend .icon { width: 16px; height: 16px; flex: none; }
.f-group { margin-top: var(--space-7); }
.f-group > h2, .f-reference > summary { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-reading); font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.f-group .count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--accent-soft); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.f-reference > summary { cursor: pointer; list-style: none; }
.f-reference > summary::-webkit-details-marker { display: none; }
.f-reference > summary::before { content: '▸'; font-size: 0.8em; color: var(--text-secondary); transition: transform var(--dur-1); }
.f-reference[open] > summary::before { transform: rotate(90deg); }
.f-reference > p { margin-top: var(--space-2); }
.f-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.f-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); column-gap: 96px; align-items: center; }
.f-card { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4) var(--space-5); transition: opacity var(--dur-2), background var(--dur-2), border-color var(--dur-1); }
.f-card h3 { font-family: var(--font-reading); font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.f-text { margin: var(--space-2) 0 var(--space-3); font-size: var(--fs-md); line-height: var(--lh-ui); color: var(--text); }
.f-gap { display: inline-block; margin-bottom: var(--space-2); padding: 1px 6px; border-radius: var(--radius-sm); background: var(--warning-bg); color: var(--warning); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.f-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-3); border: 0; background: var(--surface); font: inherit; font-size: var(--fs-md); color: var(--text-secondary); cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border-strong); }
.seg-btn .icon { width: 15px; height: 15px; }
.seg-btn:hover { background: var(--surface-muted); color: var(--text); }
.seg-btn[data-action="keep"][aria-pressed="true"] { background: var(--success-bg); color: var(--success); font-weight: var(--fw-medium); }
.seg-btn[data-action="drop"][aria-pressed="true"] { background: var(--danger-bg); color: var(--danger); font-weight: var(--fw-medium); }
.f-note-btn .icon { width: 15px; height: 15px; }
.f-note { margin-top: var(--space-3); display: grid; gap: var(--space-1); }
.f-note[hidden] { display: none; }
.f-note label { font-size: var(--fs-sm); color: var(--text-secondary); }
.f-note textarea { width: 100%; min-height: 64px; resize: vertical; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-base); background: var(--surface); }
.f-docs { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); min-width: 0; }
.f-row:hover .f-card, .f-row:focus-within .f-card { border-color: var(--border-strong); }
.f-row:hover svg.links path, .f-row:focus-within svg.links path, .f-row:hover svg.links circle.end, .f-row:focus-within svg.links circle.end { stroke: var(--accent); }
.f-row:hover .src, .f-row:focus-within .src { border-color: var(--border-strong); }
.f-row.dropped .f-card { background: var(--surface-muted); }
.f-row.dropped .f-card h3, .f-row.dropped .f-text { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: var(--border-control); }
.f-row.dropped .f-docs { opacity: 0.55; }
.f-row.dropped svg.links path, .f-row.dropped svg.links path.grow { stroke-dasharray: 0.012 0.018; stroke: var(--border-strong); }
.f-bar { position: sticky; bottom: var(--space-4); z-index: 5; margin-top: var(--space-7); }
.f-bar-inner { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.f-count { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.f-time { font-size: var(--fs-sm); color: var(--text-secondary); }
.review-ready { margin-top: var(--space-6); }
.stage .when a { color: var(--accent); font-weight: var(--fw-medium); }
@media (max-width: 899px) {
  .f-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  .f-docs { margin-left: 44px; }
  .f-card { padding: var(--space-4); }
  .f-time { display: none; }
}
/* a document's passages, beside its box (findings.js, >= 900px) */
.src.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.src.active .src-toggle { font-weight: var(--fw-medium); }
.passage-pop { position: absolute; z-index: var(--z-popover); display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); animation: rise var(--dur-2) var(--ease-out); outline: none; }
.passage-pop::before { content: ''; position: absolute; top: 20px; width: 12px; height: 12px; background: var(--surface); border: 1px solid var(--border); transform: rotate(45deg); }
.passage-pop[data-side="left"]::before { right: -7px; border-left: 0; border-bottom: 0; }
.passage-pop[data-side="right"]::before { left: -7px; border-right: 0; border-top: 0; }
.pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.pp-head .src-name { font-size: var(--fs-md); }
.pp-pages { font-size: var(--fs-xs); color: var(--text-secondary); padding-left: 23px; margin-top: 2px; }
.pp-for { font-size: var(--fs-xs); color: var(--text-secondary); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.pp-quotes { padding: var(--space-1) 0 0; max-height: min(50vh, 420px); overflow: auto; overscroll-behavior: contain; }
.pp-quotes blockquote { font-size: var(--fs-base); }

/* ---------- choosing the sample chapter (home.js) ---------- */
.choose { margin-top: var(--space-6); }
.choose > h2 { font-family: var(--font-reading); font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.choose-lede { margin-top: var(--space-2); color: var(--text-secondary); max-width: 62ch; }
.choose fieldset { border: 0; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-2); min-width: 0; }
.choose legend { display: flex; gap: var(--space-2); align-items: baseline; margin-bottom: var(--space-2); padding: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-secondary); }
.choose legend .muted { text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); }
.opt { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; min-width: 0; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.opt:hover { border-color: var(--border-strong); }
.opt.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt input { flex: none; margin-top: 3px; accent-color: var(--accent); }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.goal-opt { align-items: center; }
.goal-opt .t { flex: 1; font-weight: var(--fw-medium); }
.goal-opt .level { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-secondary); }
.choose-note { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); max-width: 62ch; border-radius: var(--radius); background: var(--accent-soft); color: var(--text); }
.choose-warn { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); max-width: 62ch; border-radius: var(--radius); background: var(--warning-bg); color: var(--text); }
.goal-opt .chip { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--success-bg); color: var(--success); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.doc-opt > span { min-width: 0; }
.doc-opt .t { display: block; font-size: var(--fs-md); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.doc-opt .d { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--text-secondary); }
/* the documents read, when none says enough about any goal */
.read-docs { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; max-width: 62ch; }
.read-docs li { padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--surface, rgba(255,255,255,.6)); }
.read-docs .t { display: block; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.read-docs .d { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--text-secondary); }
.callout .replace-note { margin-top: var(--space-2); color: var(--text-secondary); }
.choose-docs .choose-warn { margin-top: var(--space-3); }
.stop-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.choose-go { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }
.choose-go .muted { max-width: 42ch; }
/* a finding's other sentences and its figures (findings.js) */
.f-more-btn { margin: calc(-1 * var(--space-2)) 0 var(--space-2) calc(-1 * var(--space-2)); font-size: var(--fs-sm); }
.f-more { margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-muted); display: grid; gap: var(--space-3); }
.f-more[hidden] { display: none; }
.f-sentences { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-2); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.f-table-wrap { overflow-x: auto; }
.f-table { border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; min-width: 60%; }
.f-table caption { text-align: start; font-weight: var(--fw-medium); padding-bottom: var(--space-1); }
.f-table th, .f-table td { padding: 4px var(--space-3) 4px 0; border-bottom: 1px solid var(--border); text-align: start; }
.f-table th { color: var(--text-secondary); font-weight: var(--fw-medium); }