/* demo/css/views.css — screen-specific layouts. One principal focus per screen; most content sits on cream. */

/* ---- overview */
.ov-focus { display: grid; gap: var(--s6); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 960px) { .ov-focus { grid-template-columns: 1.15fr 1fr; } }
.hero-tile { padding: var(--s8); gap: var(--s4); }
.hero-tile h2 { font-size: clamp(28px, 3.2vw, 38px); }
.hero-tile .btn-row { margin-top: auto; padding-top: var(--s2); }
.hero-tile .btn-quiet:hover { background: rgba(255, 255, 255, 0.55); }
.hero-tile .btn-primary { --bg: var(--panel); }
.tile-covers { display: flex; flex-wrap: wrap; gap: 6px; }
.tile-covers .thumb { width: 54px !important; border-radius: 7px; }
.hero-tile .insufficient { background-color: var(--panel); }
.ov-side { display: grid; gap: var(--s6); align-content: start; }
.ov-compare { display: grid; gap: var(--s4); padding: var(--s2) 0; }
.try-note { display: grid; gap: var(--s3); justify-items: start; align-content: start; padding: var(--s5); border-radius: var(--r-xl); background: var(--apricot); }
.try-text { font: 500 var(--fs-xl)/1.3 var(--font-display); }
.ov-explain { padding: var(--s6); border-radius: var(--r-xl); background: var(--panel); border: 1.5px solid var(--ink-line); animation: viewIn 260ms var(--ease-settle) both; }
.ov-explain .facts { margin-top: var(--s5); }
.ev-strip { display: flex; gap: var(--s4); overflow-x: auto; padding: 4px 4px var(--s3); margin: 0 -4px; scroll-snap-type: x proximity; border-radius: var(--r-lg); }
.ev-strip.lit .ev-card { animation: litCard 900ms var(--ease-settle) both; }
.ev-strip.lit .ev-card:nth-child(2) { animation-delay: 60ms; } .ev-strip.lit .ev-card:nth-child(3) { animation-delay: 120ms; } .ev-strip.lit .ev-card:nth-child(n + 4) { animation-delay: 180ms; }
@keyframes litCard { 30% { border-color: var(--ink); background: var(--mint); } }
.ev-card { flex: none; width: 184px; display: grid; gap: 8px; justify-items: start; padding: 8px 8px 12px; border: 1.5px solid var(--ink-line); border-radius: var(--r-lg); background: var(--panel); text-align: left; scroll-snap-align: start; transition: border-color 150ms, transform var(--dur-press) ease-out, opacity 200ms; }
.ev-card:hover { border-color: var(--ink); }
.ev-card:active { transform: translateY(1px); }
.ev-card.dim-card { opacity: 0.35; }
.ev-card-title { font: 600 var(--fs-sm)/1.25 var(--font-display); }
.recap-teaser { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.recap-teaser li { padding-left: 16px; position: relative; }
.recap-teaser li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.recap-teaser li:first-child { padding-left: 0; } .recap-teaser li:first-child::before { display: none; }

/* ---- patterns */
.finding-grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.finding-tile { min-height: 240px; }
.big-readout { padding: var(--s5) var(--s6); border-radius: var(--r-xl); background: var(--fog); align-self: flex-start; }
.big-readout.state-working { background: var(--mint); } .big-readout.state-slipping { background: var(--apricot); } .big-readout.state-emerging { background: var(--lilac); }
.pattern-watch { padding-top: var(--s6); border-top: 1.5px dashed var(--ink-line); display: grid; gap: var(--s2); }
.rules { list-style: none; padding: 0; display: grid; gap: 10px; }
.rules li { display: grid; grid-template-columns: 170px 1fr; gap: var(--s3); align-items: center; }
@media (max-width: 520px) { .rules li { grid-template-columns: 1fr; gap: 4px; } }

/* ---- channel history */
.boundary-cards { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .boundary-cards { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }
.bc { display: grid; gap: 6px; align-content: start; justify-items: start; padding: var(--s6); border-radius: var(--r-xl); }
.bc.hist { background: var(--fog); }
.bc.obs { background: var(--panel); border: var(--line); }
.bc b { font: 600 52px/1 var(--font-display); margin-top: var(--s2); }
.bc .backfill-label { margin-top: var(--s2); }
.bc-line { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 var(--fs-xs)/1.2 var(--font-body); text-align: center; }
.bc-line i { flex: 1; min-height: 40px; border-left: 2px dashed var(--ink); }
@media (max-width: 899px) { .bc-line { flex-direction: row; } .bc-line i { min-height: 0; min-width: 40px; border-left: 0; border-top: 2px dashed var(--ink); } }
.status-panel { padding: var(--s4) var(--s5); border-radius: var(--r-xl); border: 1.5px solid var(--ink-line); }
.status-panel.s-err { background: var(--apricot); }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.status-text { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; }
.log { list-style: none; margin: 0; padding: 0; display: grid; }
.log-item { display: grid; grid-template-columns: 116px 14px 1fr; gap: var(--s3); align-items: baseline; padding: 10px 0; border-bottom: 1.5px solid var(--ink-line); font-size: var(--fs-sm); }
.log-when { color: var(--ink-muted); }
.log-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--panel); align-self: center; }
.t-error .log-dot { background: var(--apricot); } .t-finding .log-dot { background: var(--lilac); } .t-backfill .log-dot { background: var(--fog); } .t-reading .log-dot { background: var(--mint); }
@media (max-width: 560px) { .log-item { grid-template-columns: 14px 1fr; } .log-when { grid-column: 2; order: -1; } .log-dot { grid-row: span 2; } }

/* ---- videos */
.table-wrap { overflow-x: auto; border-radius: var(--r-xl); border: 1.5px solid var(--ink-line); background: var(--panel); }
.vtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.vtable th { text-align: left; padding: 12px 14px; font: 700 var(--fs-xs)/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); border-bottom: 1.5px solid var(--ink-line); }
.vtable td { padding: 10px 14px; border-bottom: 1px solid var(--ink-line); vertical-align: middle; }
.vtable tr:last-child td { border-bottom: 0; }
.vtable tbody tr { transition: background-color 150ms; }
.vtable tbody tr:hover { background: color-mix(in srgb, var(--mint) 30%, var(--panel)); }
.vtable .r { text-align: right; }
.vtable input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }
.vcell { display: flex; gap: var(--s3); align-items: center; text-decoration: none; }
.vcell strong { display: block; font: 600 var(--fs-sm)/1.25 var(--font-display); }
@media (max-width: 640px) { .hide-sm { display: none; } .vcell .thumb { width: 64px !important; } .vtable td, .vtable th { padding: 8px; } }
.vp { display: grid; gap: var(--s3); }
.vp-screen { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.vp-screen .thumb { width: 100% !important; border-radius: var(--r-lg); }
.vp-screen.in-seg .thumb { box-shadow: 0 0 0 4px var(--mint-deep); }
.vp-sample { position: absolute; left: 10px; top: 10px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--panel); border: var(--line); font: 700 11px/1.4 var(--font-body); }
.vp-controls { display: flex; align-items: center; gap: var(--s3); }
.vp-scrub { flex: 1; accent-color: var(--ink); }
.vp-time { font-size: var(--fs-sm); }
.vp-caption { font-size: var(--fs-sm); font-weight: 600; }
.vp-jumps { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.jump { cursor: pointer; background: var(--panel); border: 1.5px solid var(--ink-line); }
.chip.jump.focus { border-color: var(--ink); }
.chip.jump.active { background: var(--mint); border-color: var(--ink); }
.pad { padding: var(--s4); }

/* ---- compare */
.cmp-picks { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cmp-pick { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; padding: 10px; border-radius: var(--r-lg); border: var(--line); animation: viewIn 260ms var(--ease-settle) both; }
.cmp-pick span { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.cmp-pick strong { font: 600 var(--fs-sm)/1.25 var(--font-display); }
.cmp-pick.t-accent { background: var(--mint); } .cmp-pick.t-violet { background: var(--lilac); } .cmp-pick.t-amber { background: var(--apricot); } .cmp-pick.t-base { background: var(--fog); }
.add-pick { margin-top: var(--s3); display: inline-block; }
.cmp-lists { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--s4); }

/* ---- weekly recap: numbered notes */
.recap { display: grid; gap: 0; max-width: 780px; }
.recap-note { display: grid; grid-template-columns: 44px 1fr; gap: var(--s4); padding: var(--s6) 0; border-bottom: 1.5px solid var(--ink-line); }
.recap-note > div { display: grid; gap: var(--s2); justify-items: start; min-width: 0; }
.recap-note h2 { font-size: var(--fs-xl); }
.recap-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lilac); font: 600 var(--fs-md)/1 var(--font-display); }
.recap > .fine { padding-top: var(--s4); }
.brief-videos { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.brief-videos li { display: flex; gap: var(--s3); align-items: center; }
.brief-videos li span { display: grid; }
.brief-videos a { font-weight: 700; }
.plain-list .chips { gap: 6px; }

/* ---- experiments board */
.board { display: grid; gap: var(--s5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.board-col { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-xl); background: var(--fog); }
.board-col.col-active { background: color-mix(in srgb, var(--apricot) 55%, var(--paper)); }
.board-col.col-outcome { background: color-mix(in srgb, var(--mint) 55%, var(--paper)); }
.board-col h2 { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-lg); }
.count { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-pill); background: var(--panel); border: var(--line); font: 600 var(--fs-sm)/1 var(--font-display); }
.col-empty { font-size: var(--fs-sm); padding: var(--s2); }
.iv-card { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-lg); background: var(--panel); border: var(--line); box-shadow: var(--shadow); }
.iv-card.advanced { animation: viewIn 300ms var(--ease-settle) both; }
.iv-card header { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.iv-card h3 { font-size: var(--fs-lg); }
.iv-card .facts { margin: 0; }
.iv-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; font: 700 11px/1.2 var(--font-body); }
.iv-track li { flex: 1; display: grid; gap: 4px; color: var(--ink-muted); }
.iv-track i { height: 6px; border-radius: 3px; background: var(--fog); }
.iv-track li.done i { background: var(--ink); }
.iv-track li.now { color: var(--ink); }
.iv-track li.now i { background: var(--mint-deep); }
.iv-applied { display: grid; gap: 8px; font-size: var(--fs-sm); }
.iv-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.iv-outcome { display: grid; gap: var(--s2); padding: var(--s3); border-radius: var(--r-md); background: var(--paper); }
.creator-note { font-size: var(--fs-sm); padding: 8px 12px; border-radius: var(--r-sm); background: var(--apricot); }

/* ---- drafts */
.script-grid { display: grid; gap: var(--s8); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1180px) { .script-grid { grid-template-columns: 310px 1fr; } .script-grid .output { grid-column: 1 / -1; } }
.sub .step { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: var(--lilac); font-size: var(--fs-sm); vertical-align: 2px; }
.sources { display: grid; gap: var(--s2); align-content: start; }
.sources .sub { margin-top: 0; }
.src { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); border: 1.5px solid var(--ink-line); background: var(--panel); transition: border-color 150ms; }
.src.on { border-color: var(--ink); }
.src label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.src label > span { display: grid; gap: 4px; justify-items: start; }
.src strong { font: 600 var(--fs-sm)/1.25 var(--font-display); }
.src input { width: 18px; height: 18px; accent-color: var(--ink); margin-top: 2px; }
.rules-box { font-size: var(--fs-sm); margin-top: var(--s2); }
.rules-box summary { cursor: pointer; font-weight: 700; }
.rules-box ol { padding-left: 18px; display: grid; gap: 4px; }
.draft-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.draft-head .sub { margin: 0; }
.blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.block { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: start; padding: var(--s3); border-radius: var(--r-md); border: var(--line); background: var(--panel); }
.block.g-grounded { background: color-mix(in srgb, var(--mint) 55%, var(--panel)); }
.block.g-ungrounded { background: var(--panel); border-style: dashed; }
.block.g-structure { background: var(--paper); border-color: var(--ink-line); }
.block.dragging { opacity: 0.5; } .block.over { box-shadow: 0 0 0 3px var(--lilac); }
.drag { cursor: grab; padding-top: 4px; color: var(--ink-muted); }
.block-main { display: grid; gap: 4px; min-width: 0; }
.block-main strong { font: 600 var(--fs-md)/1.25 var(--font-display); }
.block-main p { font-size: var(--fs-sm); }
.block-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 700 11px/1.2 var(--font-body); }
.block-meta .sec { padding: 2px 8px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--ink-line); }
.g-ungrounded .block-meta .gl { padding: 2px 8px; border-radius: var(--r-pill); background: var(--lilac); }
.cite { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); border: var(--line); background: var(--panel); font: 700 11px/1.2 var(--font-body); }
.block-ctl { display: flex; gap: 2px; }
.block-ctl .icon-btn { width: 32px; min-height: 32px; }
@media (max-width: 560px) { .block { grid-template-columns: 1fr; } .drag { display: none; } }
.draft-out { margin: 0; padding: var(--s4); border-radius: var(--r-md); background: var(--panel); border: 1.5px solid var(--ink-line); font: 500 13px/1.6 var(--font-mono); white-space: pre-wrap; word-break: break-word; max-height: 460px; overflow: auto; }

/* ---- settings */
.set-tabs { overflow-x: auto; scrollbar-width: none; padding-bottom: 3px; }
.set-tabs::-webkit-scrollbar { display: none; }
.set-stack { display: grid; gap: var(--s6); }
.settings .card { display: grid; gap: 0; }
.set-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s6); padding: var(--s4) 0; border-bottom: 1px solid var(--ink-line); }
.set-row:last-child { border-bottom: 0; }
.set-row > div { flex: 1 1 260px; }
.set-row strong { font: 600 var(--fs-md)/1.3 var(--font-display); }
.scopes { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.scopes li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3); border-radius: var(--r-md); border: 1.5px solid var(--ink-line); }
.scopes li.on { border-color: var(--ink); background: color-mix(in srgb, var(--mint) 45%, var(--panel)); }
.scopes .lamp { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--fog); }
.scopes li.on .lamp { background: var(--mint-deep); }
.scopes p { font-size: var(--fs-sm); }
@media (max-width: 560px) { .scopes li { grid-template-columns: auto 1fr; } .scopes li .btn { grid-column: 2; justify-self: start; } }
.danger-zone { border-style: dashed; }
.plan-card { display: grid; gap: var(--s3); }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.plan-head h2 { font-size: var(--fs-2xl); }

/* ---- onboarding tour */
.onboard { min-height: 100vh; display: flex; flex-direction: column; gap: var(--s6); padding: var(--s5) var(--s4) var(--s12); max-width: 960px; margin: 0 auto; }
.onboard-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.onboard-top .logo { margin-right: auto; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.steps li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-pill); background: var(--fog); font: 700 var(--fs-xs)/1.2 var(--font-body); transition: background-color 200ms; }
.steps li .num { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: var(--line); }
.steps li.now { background: var(--mint); box-shadow: inset 0 0 0 1.5px var(--ink); }
.steps li.done { background: color-mix(in srgb, var(--mint) 45%, var(--paper)); }
@media (max-width: 640px) { .steps li { font-size: 0; gap: 0; justify-content: center; } .steps li .num { font-size: 11px; } }
.onboard-main { outline: none; }
.ob-card { display: grid; gap: var(--s4); justify-items: start; padding: var(--s10); border-radius: var(--r-xl); background: var(--panel); border: 1.5px solid var(--ink-line); animation: viewIn 300ms var(--ease-settle) both; }
.ob-card h1 { font-size: clamp(30px, 4vw, 44px); }
@media (max-width: 640px) { .ob-card { padding: var(--s5); } }
.chan-card { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-radius: var(--r-lg); background: var(--paper); }
.chan-dot.big { width: 48px; height: 48px; font-size: var(--fs-sm); }
.consent-sim { display: grid; gap: var(--s2); justify-items: start; padding: var(--s4); border-radius: var(--r-lg); background: var(--lilac); }
.calib { width: 100%; }
.calib .meter { margin: var(--s3) 0 6px; }
.calib-list { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 6px; }
.calib-list li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; font-size: var(--fs-sm); animation: viewIn 240ms var(--ease-settle) both; }
.mini-findings.big { width: 100%; }

/* ---- evidence drawer */
.ev-drawer { display: grid; gap: var(--s4); }
.ev-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); }
.fact { display: grid; gap: 4px; align-content: start; justify-items: start; font-size: var(--fs-sm); padding: 10px 12px; border-radius: var(--r-md); background: var(--panel); font-weight: 600; }
.fact .dim { font-weight: 600; font-size: var(--fs-xs); }
.ev-links { display: flex; flex-wrap: wrap; gap: var(--s2); }
.settings .card + .card, .set-stack > div > .card + .card { margin-top: var(--s6); }