/* The shell and the pages around a session. */

/* ─── Shell ── */
.top { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--grid); }
.top-in { max-width: 1040px; margin: 0 auto; height: 60px; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.875rem; }
.top-date { font-size: .75rem; line-height: 1.3; font-weight: 500; text-align: right; }
.top-nav { display: none; gap: .25rem; }
.top-nav a { padding: 0 .875rem; height: 40px; display: inline-flex; align-items: center; border-radius: var(--pill); font-size: .9375rem; color: var(--muted); font-weight: 600; letter-spacing: -.02em; transition: color .2s; }
.top-nav a:hover { color: var(--fg); }
.top-nav a[aria-current] { color: var(--fg); font-weight: 800; }
.tabs { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: .25rem .5rem calc(.25rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--grid); }
.tabs a { flex: 1; max-width: 96px; min-height: 48px; display: grid; justify-items: center; align-content: center; gap: 2px; font-size: .6875rem; font-weight: 600; color: var(--muted); border-radius: var(--r-sm); }
.tabs a[aria-current] { color: var(--fg); font-weight: 800; }
#main { outline: none; }
body[data-view="bare"] .top, body[data-view="bare"] .tabs, body[data-view="session"] .tabs { display: none; }
body.focused { overflow: hidden; }
@media (min-width: 760px) { .top-nav { display: flex; } .tabs, .top-date { display: none; } }

/* ─── Pages ── */
.page { max-width: var(--col); margin: 0 auto; padding: 1.75rem var(--pad) 7rem; display: grid; gap: 2.5rem; align-content: start; }
.page > * { min-width: 0; }
.page.wide { max-width: 1040px; }
.page.narrow { max-width: 440px; padding-top: 4rem; gap: 1.25rem; }
@media (min-width: 760px) { .page { padding-top: 3rem; padding-bottom: 5rem; } }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.page-head > div:first-child { display: grid; gap: .625rem; max-width: 60ch; flex: 1 1 16rem; }
section { display: grid; gap: .875rem; min-width: 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 28px; }
.sec-head .link { min-height: 28px; }
.sec-note { margin-top: -.375rem; max-width: 60ch; }
.crumb { gap: .125rem; margin-bottom: -1.5rem; justify-self: start; text-decoration: none; color: var(--fg2); }
.foot { margin-top: -.5rem; }
.empty { border: var(--stroke) dashed var(--border2); border-radius: var(--r-lg); padding: 2rem 1.5rem; display: grid; gap: 1rem; justify-items: start; }
.lead { font-size: 1.0625rem; line-height: 1.55; color: var(--fg2); }
.pre { white-space: pre-wrap; }
.clamp1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cap { font-size: .8125rem; line-height: 1.3; font-weight: 500; }

/* ─── Start ── */
.start { gap: 1.25rem; padding-top: .75rem; }
@media (min-width: 760px) { .start { padding-top: 1.5rem; } }
.display { font-size: min(4.75rem, 15.8vw); line-height: .86; letter-spacing: -.065em; font-weight: 800; white-space: nowrap; }
.start-form { display: grid; gap: 1.25rem; margin-top: .5rem; }
.start-field, .how-long { display: grid; gap: .5rem; }
.composer { border: var(--stroke) solid var(--line); border-radius: var(--r-lg); transition: box-shadow .2s; display: grid; }
.composer:focus-within { box-shadow: 0 0 0 3px var(--ring); }
.composer textarea { display: block; width: 100%; border: 0; background: none; resize: none; padding: 1rem 1.25rem .25rem; min-height: 5.5rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; outline: none; }
.composer textarea::placeholder { color: var(--faint); font-weight: 400; }
.composer-foot { display: flex; align-items: center; justify-content: flex-end; padding: 0 .5rem .5rem; gap: .5rem; }
.pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.pills button { min-height: 48px; padding: 0 .25rem; border-radius: var(--pill); border: var(--stroke) solid var(--line); font-size: 1rem; font-weight: 700; letter-spacing: -.03em; text-align: center; white-space: nowrap; transition: background .2s, color .2s; }
.pills button[aria-pressed="true"] { background: var(--primary); color: var(--primary-fg); }
.thumbs { display: flex; gap: .5rem; padding: .5rem 1.25rem 0; flex-wrap: wrap; }
.ask .thumbs { padding: 0; }
.thumb { position: relative; width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-x { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border-radius: 50%; background: rgba(18, 64, 44, .78); color: #F1F0EA; display: grid; place-items: center; }
.thumb-x svg { width: 14px; height: 14px; }
.thumb-x::after { content: ""; position: absolute; inset: -10px; }
.suggested { display: grid; gap: .75rem; padding-top: .25rem; }
#suggest { justify-self: start; }

.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 620px) { .quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chip-card { display: grid; gap: .25rem; align-content: start; padding: .875rem 1rem; min-height: 84px; border: var(--stroke) solid var(--line); border-radius: var(--r); transition: background .2s; }
.chip-card:hover, .tile:hover { background: var(--surface); }
.chip-title { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-weight: 700; font-size: 1rem; letter-spacing: -.03em; line-height: 1.15; }
.chip-title .tiny { white-space: nowrap; font-weight: 500; letter-spacing: -.01em; }

.rows { display: grid; border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2); gap: 0; }
.s-row { display: flex; align-items: center; gap: .875rem; padding: .875rem .125rem; min-height: 64px; transition: background .2s; }
.s-row + .s-row { border-top: 1px solid var(--border); }
.s-row:hover { background: var(--surface); }
.s-row .grow { display: grid; gap: 2px; }
.s-row-title { font-weight: 700; font-size: 1rem; letter-spacing: -.03em; line-height: 1.2; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.s-thumb { width: 44px; height: 44px; border-radius: 23%; overflow: hidden; flex: none; }
.s-thumb img, .s-thumb svg, .s-cover img, .s-cover svg { width: 100%; height: 100%; object-fit: cover; }
.frame-row { align-items: flex-start; padding: 1rem .125rem; }
.frame-row .grow { gap: .25rem; }

.tiles { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tile { display: grid; gap: .375rem; align-content: start; padding: 1rem 1.125rem; border: var(--stroke) solid var(--line); border-radius: var(--r); transition: background .2s; }
.tile-title { font-weight: 700; font-size: 1.0625rem; letter-spacing: -.03em; line-height: 1.15; }
.tile-text { font-size: .875rem; line-height: 1.4; color: var(--fg2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { margin-top: .25rem; }

/* ─── Covers and cards ── */
.cover-bg { fill: var(--cover); }
.cover-grid { fill: none; stroke: rgba(241, 240, 234, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cover-cross { fill: none; stroke: rgba(241, 240, 234, .9); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.s-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--border2); border-radius: var(--r-lg); overflow: hidden; transition: background .2s; }
.s-card:hover { background: var(--surface); }
.s-cover { position: relative; aspect-ratio: 2 / 1; background: var(--cover); }
.s-open { position: absolute; left: .75rem; top: .75rem; background: #F1F0EA; color: #12402C; border-color: transparent; }
.s-body { padding: 1rem 1.125rem 1.125rem; display: grid; gap: .375rem; align-content: start; }
.s-body h3 { font-size: 1.25rem; letter-spacing: -.04em; line-height: 1.1; }
.s-path { color: var(--fg2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.s-path .arrow { color: var(--faint); margin: 0 .35em; }
.s-marks { display: flex; flex-wrap: wrap; gap: .375rem .625rem; align-items: center; color: var(--muted); }
.s-marks:empty { display: none; }
.s-marks svg { width: 15px; height: 15px; }

/* ─── Sign in, onboarding: a top block and a bottom block, with the page's air between them ── */
.gate { position: relative; min-height: 100dvh; display: grid; padding: calc(3.5rem + env(safe-area-inset-top)) var(--pad) calc(2rem + env(safe-area-inset-bottom)); justify-items: center; }
.gate-box { width: min(100%, 400px); display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
.gate-box.onb { width: min(100%, 480px); }
.gate-top, .gate-mid, .gate-end { display: grid; gap: 1rem; }
.gate-top > h1 { font-size: clamp(5.5rem, 31vw, 8.5rem); line-height: .9; margin-left: -.04em; }
.onb-hello { font-size: clamp(2.25rem, 10vw, 2.75rem); line-height: .95; letter-spacing: -.055em; }
.gate-top .blurb { max-width: 15rem; font-size: .8125rem; line-height: 1.3; font-weight: 500; }
.gate-end { gap: .5rem; }
.gate .cross { left: 50%; top: 35%; }
@media (min-width: 600px) { .gate { align-content: center; } .gate-box { justify-content: flex-start; gap: 3rem; } .gate .cross { left: 25%; } }
.onb-top { display: flex; justify-content: space-between; align-items: center; }
.onb-q { display: grid; gap: .625rem; }
.onb-q h1 { font-size: clamp(2.5rem, 12vw, 3.25rem); line-height: .9; letter-spacing: -.06em; }

/* ─── Options (questions, onboarding, settings, suggestions): tall pills, filled when chosen ── */
.opts { display: grid; gap: .5rem; }
.opt { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 56px; padding: .75rem 1rem .75rem 1.25rem; border: var(--stroke) solid var(--line); border-radius: 26px; transition: background .2s, color .2s; }
.opt:hover { background: var(--surface); }
.opt-text { flex: 1; min-width: 0; display: grid; gap: .125rem; }
.opt-label { font-weight: 700; font-size: 1.0625rem; letter-spacing: -.03em; line-height: 1.2; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.opt-desc { font-size: .875rem; line-height: 1.35; color: var(--fg2); }
/* An empty ring for pick-one, an empty square for pick-any; what is picked gets the bloom. */
.opt-mark { width: 22px; height: 22px; border-radius: 50%; border: var(--stroke) solid var(--border2); flex: none; transition: background .2s; }
.opt[role="checkbox"] .opt-mark { border-radius: 7px; }
.opt[aria-checked="true"] { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.opt[aria-checked="true"] .opt-desc { color: inherit; opacity: .82; }
.opt[aria-checked="true"] .opt-mark { border: 0; border-radius: 0; background: var(--bloom-inv); -webkit-mask: var(--bloom-mask) center / contain no-repeat; mask: var(--bloom-mask) center / contain no-repeat; }
.opt[aria-checked="true"] .tag.accent { color: inherit; background: none; border-color: currentColor; }
.opt.else { border-style: dashed; color: var(--fg2); min-height: 48px; padding-block: .5rem; }
.opt.else[aria-expanded="true"] { border-style: solid; background: var(--surface); }
.opts.compact .opt { min-height: 52px; padding-block: .5rem; }

/* ─── Lists and facts ── */
.numbered { counter-reset: n; display: grid; gap: .625rem; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 1.75rem 1fr; }
.numbered li::before { content: counter(n); font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 800; }
.lines { border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2); }
.lines li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0 .25rem .125rem; min-height: 52px; font-size: .9375rem; }
.lines li + li { border-top: 1px solid var(--border); }
.facts { display: grid; gap: 0; border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2); margin: 0; }
.facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .875rem .125rem; font-size: .9375rem; }
.facts > div + div { border-top: 1px solid var(--border); }
.facts dt { color: var(--fg2); } .facts dd { margin: 0; text-align: right; font-weight: 600; }
.faq { border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2); }
.faq details + details { border-top: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem .125rem; min-height: 56px; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.03em; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .prose { padding: 0 .125rem 1.25rem; color: var(--fg2); max-width: 62ch; }
.menu { display: grid; margin: 0 -.5rem; }
.menu-item { display: flex; align-items: center; gap: .75rem; min-height: 50px; padding: 0 .875rem; border-radius: var(--pill); font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.menu-item:hover { background: var(--surface2); }
.menu-item.danger { color: var(--danger); }
.sheet h2 { overflow-wrap: anywhere; font-size: 1.5rem; }

/* ─── Lab ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border2); border-radius: var(--r); }
.table { width: 100%; border-collapse: collapse; font-size: .8125rem; white-space: nowrap; }
.table th, .table td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }
.table tr.on td { background: var(--surface2); }
.table .wide-col { width: 34%; min-width: 120px; }
.bar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; min-width: 40px; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--faint); border-radius: 3px; }
.bar b { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px; }
.scores { display: grid; gap: .25rem; margin-top: .25rem; }
.score { display: grid; grid-template-columns: 5.5rem 1fr 1.75rem; align-items: center; gap: .5rem; }
.score .bar i { background: var(--fg2); }
.lab-notes { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: .75rem; margin: 0; font-family: inherit; }
.facts.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 1.5rem; border: 0; }
.facts.grid > div { border-top: 0; border-bottom: 1px solid var(--border); }
.bars { display: grid; gap: .375rem; }
.bar-row { display: grid; grid-template-columns: 9rem 1fr 2.5rem; gap: .75rem; align-items: center; }
.two { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .two { grid-template-columns: 1fr 1fr; } }
.hists { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.hist { display: grid; gap: .375rem; }
.hist-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: .375rem; height: 110px; align-items: end; border-bottom: 1px solid var(--border2); }
.hist-bars span { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.hist-bars i { display: block; width: 100%; background: var(--faint); border-radius: 3px 3px 0 0; min-height: 1px; }
.hist-bars b { position: absolute; bottom: 4px; font-weight: 600; color: var(--bg); mix-blend-mode: difference; }
.lab-panel { display: grid; gap: .875rem; align-content: start; font-size: .9375rem; }
.lab-panel details { border-top: 1px solid var(--border); padding-top: .75rem; display: grid; gap: .5rem; }
.lab-panel summary { font-weight: 700; cursor: pointer; min-height: 32px; font-size: .9375rem; }
.lab-panel blockquote { margin: .5rem 0; padding-left: .75rem; border-left: 2px solid var(--accent); color: var(--fg2); }
.lab-block { margin-top: .625rem; font-size: .875rem; line-height: 1.5; }
.dots { list-style: disc; padding-left: 1.1rem; }
.lab-events { display: grid; gap: .5rem; }
.lab-events li { display: grid; grid-template-columns: auto auto 1fr; gap: .5rem; align-items: baseline; }
code { font-family: inherit; font-size: .9375em; font-weight: 600; background: var(--surface2); padding: .1em .4em; border-radius: 6px; }

/* ─── Shared page ── */
.shared { padding-top: 0; gap: 1.75rem; }
.sh-cover { margin: 0 calc(-1 * var(--pad)); aspect-ratio: 2 / 1; max-height: 340px; overflow: hidden; background: var(--cover); width: calc(100% + 2 * var(--pad)); }
.sh-cover img, .sh-cover svg { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .shared { padding-top: 2rem; } .sh-cover { margin: 0; width: 100%; border-radius: var(--r-lg); } }
.sh-head { display: grid; gap: .75rem; }
.sh-head .btn { margin-top: .5rem; }
.sh-foot { border-top: 1px solid var(--border2); padding-top: 1.5rem; display: grid; gap: .25rem; justify-items: center; text-align: center; }
.made { display: inline-flex; align-items: baseline; gap: .35em; font-weight: 500; font-size: .9375rem; min-height: 44px; }
.made .wordmark { font-size: 1.375rem; }

/* What a run found, on the lab page. */
.lab-found { display: grid; gap: .75rem; padding: 1.25rem; border: 1px solid var(--border2); border-radius: var(--r); background: var(--surface); max-width: 70ch; }
.lab-found > p { margin: 0; }
.lab-found summary { cursor: pointer; font-weight: 600; padding: .25rem 0; }
.lab-issues { margin: .5rem 0 0; padding-left: 1.25rem; display: grid; gap: .875rem; }
.lab-issues p { margin: 0 0 .25rem; }