/* BeargrassAI 2.0.0 · page prototype: Scout. Loads after /brand/tokens.css and /brand/base.css; only this page's own.
   Night (the question goes out), dawn into day (the scroll walks four trails), day (the page you get, how it works),
   then the night panel and the night footer. Motion only under html.m; html.js means scripts on. */

.nav-list a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.35em; }
/* ?draft in the address outlines every sentence written for this prototype (data-draft) */
.show-draft [data-draft] { outline: 2px dashed var(--barn); outline-offset: 3px; }
.show-draft .vh[data-draft] { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; margin-top: 10px; font-size: 13px; }
.ask4 { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 26px 0 22px; }
.tl4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.tl4 li { container-type: inline-size; font: 500 clamp(8px, 10.2cqw, 13px)/1.2 var(--mono); text-align: center; padding: 10px 3px; border: 1px solid rgba(240, 230, 207, 0.3); color: var(--cream-2); background: rgba(10, 16, 36, 0.94); white-space: nowrap; overflow: hidden; letter-spacing: 0; transition: border-color 0.45s, color 0.45s, box-shadow 0.45s; }
/* Under 390px "Perplexity" ran past its cell (5.8px at 314) or sat 2.9px from it (360); the names size to the width */
@media (max-width: 389px) { .tl4 { gap: 5px; } .tl4 li { font-size: min(11.5px, 3vw); letter-spacing: -0.01em; } }
.tl4 li.lit, html:not(.m) .tl4 li { border-color: var(--gold-bright); color: var(--gold-bright); box-shadow: 0 0 22px rgba(244, 196, 90, 0.3); }
.fan { position: relative; flex: 1 1 auto; min-height: 56px; max-height: 190px; }
html:not(.js) .fan { flex: 0 0 84px; }
html:not(.js) .fan::before, html:not(.js) .fan::after { content: ""; position: absolute; top: 0; height: 50%; border: 2px dotted rgba(244, 196, 90, 0.85); border-top: 0; }
html:not(.js) .fan::before { left: 12.5%; right: 12.5%; }
html:not(.js) .fan::after { left: 37.5%; right: 37.5%; border-bottom: 0; }
html:not(.js) .fan i { position: absolute; left: 50%; top: 50%; bottom: 4px; border-left: 2px dotted rgba(244, 196, 90, 0.85); }
.thd { display: grid; justify-items: center; gap: 10px; }
.th { display: block; width: 13px; height: 13px; background: var(--x) center / 11px no-repeat; }
.m12 { display: flex; gap: 5px; }
.m12 i { width: 15px; height: 15px; border: 1px solid rgba(244, 196, 90, 0.5); transition: background-color 0.3s, box-shadow 0.3s; }
.m12 i.on { background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: 0 0 10px rgba(244, 196, 90, 0.45); }
.q { text-align: center; font: 400 12.5px/1.5 var(--mono); color: var(--cream); }
.q small { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-2); }
.incl { margin-top: 12px; max-width: 40ch; font: 600 16px/1.4 var(--sans); color: var(--white); }

/* 2 · Four trails (night, dawn, then day). A night heading, then a stage the scroll walks. Without motion the stage is
   a still map with every trail lit and the four findings in a column. */
.trails { --fw: min(460px, 33vw); }
.trails-head { padding: 72px 0 56px; background: #0a1024; }
.trails-head h2 { color: var(--white); max-width: 13ch; }
.trails-say { margin-top: 16px; max-width: 32ch; font-size: 18px; line-height: 1.5; color: var(--cream); }
html:not(.m) .trails-head { padding-bottom: 210px; background: linear-gradient(180deg, #0a1024 0, #0a1024 calc(100% - 300px), #2b4563 calc(100% - 205px), #6f6577 calc(100% - 150px), #e2ac68 calc(100% - 96px), #f5e3bd calc(100% - 40px), var(--paper) 100%); }
.trails .stage { background: var(--paper); padding: 6px 0 64px; }
.st-top { position: relative; z-index: 3; }
.st-top .sample { margin-top: 0; }
.st-top .ask { margin-top: 14px; max-width: 24ch; font-size: clamp(21px, 5.6vw, 32px); text-shadow: 0 0 2px var(--paper), 0 0 5px var(--paper), 0 0 10px var(--paper), 0 0 16px var(--paper); }
.st-map { position: relative; display: flex; justify-content: center; padding: 26px 0 30px; }
.js .st-map { display: block; height: 290px; padding: 0; }
.js .trails .sign { cursor: default; min-height: 0; padding: 9px 4px 10px; text-align: center; }
.js .trails .sign:hover { background: var(--paper-hi); }
.trails .sign .sg-k { font-size: 18px; }
.trails .sign .sg-q { display: none; }
.js .trails .sign.on { background: var(--ink); color: var(--paper-hi); box-shadow: inset 0 -3px 0 var(--gold-bright); }
.js .trails .sign.walked { box-shadow: inset 0 -3px 0 var(--gold); }
.js .trails .finds { position: relative; top: auto; z-index: 3; }
.cons { position: relative; height: 104px; margin-top: 14px; background: linear-gradient(180deg, var(--night-2), var(--canvas)); border: 1px solid var(--ink-2); }
.cons canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
html:not(.js) .cons { display: none; }

/* the night heading lies over the stage's first screen, so the scene starts as the heading reaches the top, with no
   screen of empty night between them (Mark, 2026-10-24: "a huge gap in the scroll") */
.m .trails { position: relative; }
.m .trails-head { position: absolute; left: 0; right: 0; top: 0; z-index: 4; background: none; }
/* the stage in motion: sticky, one screen tall, everything placed on it; page.js sets each part's place and light */
.m .trails .track { height: 600vh; }
.m .trails .stage { padding: 0; background: #0a1024; }
.m .st-top { position: absolute; left: 0; right: 0; top: calc(12px + env(safe-area-inset-top, 0px)); opacity: 0; }
.m .st-map { position: absolute; inset: 0; height: auto; z-index: 2; }
.m .st-map .disk, .m .signs .sign { opacity: 0; }
.m .trails .finds { position: absolute; left: 0; right: 0; top: 60%; display: grid; }
.m .trails .find { grid-area: 1 / 1; align-self: start; opacity: 0; }
.m .trails .find .move-k, .m .trails .find .move { opacity: 0; }

/* Day sections in two parts: on a phone, one column (the side's words around the main part); from 900px, the side
   column holds still on the left while the card or the rows go by on the right. */
.two { display: flex; flex-direction: column; }
.two .side { display: contents; }
.two .rp-say, .two .rp-real, .two .buy { order: 2; }

/* 3 · The page you get (day): a cardstock mock of the report, on the land. */
.report { position: relative; padding: 72px 0 34px; }
.report h2 { max-width: 15ch; }
.rp-c { max-width: 100%; margin-top: 30px; }
.rp { background: var(--paper-hi); border: 1px solid var(--ink-2); box-shadow: 0 34px 70px -40px rgba(35, 31, 26, 0.6); }
.rp-head { padding: 16px 18px 15px; }
.rp-k, .rp-h { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.rp-s { margin-top: 7px; font: 500 12.5px/1.5 var(--mono); color: var(--ink); }
.rp-b { padding: 16px 18px 18px; border-top: 1px solid var(--rule-ink); }
.survey { position: relative; height: 84px; margin-top: 10px; }
.sv-disk { position: absolute; left: 0; top: 18px; width: 26px; height: 26px; overflow: visible; }
.sv-line { position: absolute; left: 34px; right: 4px; top: 31px; height: 1px; background: rgba(35, 31, 26, 0.24); }
.sv-line::before { content: ""; position: absolute; left: 0; right: -1px; top: -4px; height: 9px; border-right: 1px solid var(--ink-3); background: linear-gradient(90deg, var(--ink-3) 1px, transparent 1px) 0 0 / calc(100% / 12) 100% repeat-x; }
.sv-fill { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--ink); transform-origin: 0 50%; }
.sv-m { position: absolute; top: 0; left: calc(var(--at) / 12 * 100%); width: 0; height: 0; }
.sv-m::before { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; background: var(--ink); box-shadow: 0 0 0 2px var(--paper-hi), 0 0 0 3px var(--ink); transform: scale(var(--s, 1)); }
.sv-nb::before { background: var(--ink-3); box-shadow: 0 0 0 2px var(--paper-hi), 0 0 0 3px var(--ink-3); }
.sv-m b { position: absolute; white-space: nowrap; font: 500 12px/1.2 var(--mono); color: var(--ink); }
.sv-you b { bottom: 14px; left: 0; transform: translateX(-50%); }
.sv-nb b { top: 14px; right: -14px; }
.sv-end { position: absolute; top: 66px; font: 500 11px/1 var(--mono); color: var(--ink-2); }
.sv-0 { left: 34px; }
.sv-12 { right: 4px; }
.m .sv-fill { transform: scaleX(0); }
.m .sv-m { opacity: 0; }
.rp-read { display: grid; gap: 6px; margin-top: 12px; max-width: 240px; }
.rr-k { display: flex; justify-content: space-between; gap: 12px; font: 500 12.5px/1.4 var(--mono); color: var(--ink); }
.rr-n { color: var(--ink-2); }
.rp-read .meter { margin: 0 0 8px; }
.rp-move .move { margin: 8px 0 0; }
.rp-four { display: grid; margin-top: 6px; }
.rp-four div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--rule-ink); }
.rp-four div:first-child { border-top: 0; }
.rp-four dt { font: 400 19px/1.25 var(--display); color: var(--ink); }
.rp-four dd { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.rp-say { margin-top: 28px; max-width: 24ch; font: 400 var(--fs-pull)/1.2 var(--display); color: var(--ink); text-wrap: balance; }
/* Pappenfüs' one real reading (BGA 46, 85), beside the sample report on a laptop, under it on a phone */
.rp-real { margin-top: 22px; max-width: 42ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.rp-real strong { color: var(--ink); }
.rp-real a { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* 4 · How it works (day): short rows, numbered like sections. */
.how { position: relative; padding: 64px 0 30px; }
.rows { margin-top: 24px; max-width: 760px; border-top: 1px solid var(--ink); }
.rows li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 15px 0 16px; border-bottom: 1px solid var(--rule-ink); }
.rn { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ink-2); background: var(--paper-hi); font: 500 12px/1 var(--mono); color: var(--ink); }
.rows p { padding-top: 2px; max-width: 44ch; font-size: 18px; line-height: 1.45; color: var(--ink); }
/* each method line's own source and date (go-live item 12) */
.rows .rsrc { display: block; margin-top: 6px; font: 400 13px/1.45 var(--mono); color: var(--ink-3); }
.x12 { grid-column: 2; display: grid; grid-template-columns: repeat(4, 15px); gap: 4px; margin-top: 12px; }
.x12 i { width: 15px; height: 15px; border: 1px solid var(--ink-2); background: var(--ink); }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.buy-k { font: 500 13px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.buy-k::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px; background: var(--x-ink) center / 9px no-repeat; }

/* 5 · The AI box: the night panel in the day. */
.askai { position: relative; padding: 30px 0 100px; }
.askai .aibox { max-width: 820px; margin-top: 0; }
/* the honest limit, once, before the AI box (BGA 28) */
.limit-wrap { position: relative; padding-top: 40px; }
.limit { max-width: 820px; margin: 0 auto; font: 400 var(--fs-pull)/1.2 var(--display); color: var(--ink); text-wrap: balance; }

/* Short phones: the same first screen, set tighter */
@media (max-height: 740px) and (max-width: 899px) {
  .ask4 { padding: 16px 0 14px; }
  .incl { margin-top: 8px; font-size: 15px; }
  .m .st-top .sample { font-size: 12px; padding: 7px 11px 8px; }
  .m .st-top .ask { font-size: 18px; margin-top: 8px; }
  .m .trails .sign { padding: 6px 4px 7px; }
  .m .trails .sign .sg-k { font-size: 17px; }
  .m .trails .find { padding: 14px 16px 6px; }
  .m .trails .finding { font-size: 22px; margin-top: 6px; }
  .m .trails .meter { margin-top: 10px; }
  .m .trails .move-k { margin-top: 14px; padding-top: 10px; }
  .m .trails .move { font-size: 16.5px; margin-bottom: 12px; }
  .m .cons { height: 80px; margin-top: 10px; }
}
@media (min-width: 900px) {
  .ask4 { grid-column: 2; grid-row: 1 / -1; align-self: center; height: min(620px, calc(100svh - 190px)); min-height: 440px; padding: 0; }
  .tl4 { gap: 14px; }
  .tl4 li { font-size: clamp(8px, 10.2cqw, 13px); padding: 12px 3px; }
  .fan { max-height: none; }
  .m12 { gap: 6px; }
  .m12 i { width: 17px; height: 17px; }
  .q { font-size: 14px; }
  .trails-head { padding: 112px 0 84px; }
  .st-top .ask { max-width: 18ch; }
  .js .st-map { height: 540px; }
  .js .trails .sign { padding: 10px 13px 11px; text-align: left; }
  .trails .sign .sg-k { font-size: 22px; }
  .trails .sign .sg-q { display: block; }
  .js:not(.m) .trails .finds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m .st-top { left: var(--read-x); right: auto; width: min(520px, calc(100vw - var(--read-x) * 2 - var(--fw) - 48px)); top: 34px; padding-left: 0; padding-right: 0; }
  .m .trails .finds { left: auto; right: var(--read-x); width: var(--fw); padding: 0; margin: 0; }
  .cons { height: 128px; }
  .two { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
  .two .side { display: block; position: sticky; top: 104px; }
  .two .rp-c, .two .rows { margin-top: 10px; }
  .report { padding: 112px 0 40px; }
  .report h2 { max-width: 100%; font-size: clamp(32px, 3vw, 48px); }
  .rp-say { margin-top: 26px; font-size: 26px; }
  .how h2 { margin-top: 0; }
  .askai .aibox { margin-inline: auto; }
  .rp-head, .rp-b { padding-left: 28px; padding-right: 28px; }
  .rp-b { padding-top: 20px; padding-bottom: 22px; }
  .survey { max-width: 560px; }
  .rp-read { max-width: 560px; grid-template-columns: 170px auto; align-items: center; column-gap: 18px; row-gap: 10px; }
  .rp-read .meter { margin: 0; }
  .rp-four div { grid-template-columns: 130px minmax(0, 1fr); }
  .how { padding: 96px 0 40px; }
  .rows p { font-size: 19px; }
  .askai { padding: 40px 0 130px; }
}
/* Under 360px "Neighbors" ran 5.4px past its sign (314): the row takes 12px gutters (page.js) and the names size down */
@media (max-width: 359px) { .js .trails .sign .sg-k { font-size: min(17px, 4.8vw); } }
#sky1 { z-index: 1; }
/* the gauge stands between the trailhead and the meter: page.js sets --gl, the gauge's depth below its hub */
.hero.placed .thd { gap: 0; }
/* the meter is the gauge's readout, a night window on its brass band; the question stands under the gauge's foot */
.hero.placed .m12 { gap: var(--mg, 5px); margin-top: var(--gl, 60px); padding: 3px 4px; background: rgba(8, 13, 30, 0.88); box-shadow: 0 0 0 1px rgba(244, 196, 90, 0.42), 0 2px 10px rgba(8, 13, 30, 0.5); }
.hero.placed .m12 i { width: var(--mc, 15px); height: var(--mc, 15px); }
@media (max-width: 899px) {
  .hero.placed .ask4 { padding: 12px 0 10px; }
  .hero.placed .fan { min-height: 40px; }
}
/* short phones: the trails shorten and the tools stand on the gauge's far rim, so Start keeps its room */
@media (max-height: 700px) and (max-width: 599px) { .hero.placed .fan { min-height: 28px; } .hero.placed .ask4 { padding: 10px 0 8px; } }
/* scripts off: nothing places the picture, so the question stands on a plate of night wherever the gauge falls */
html:not(.js) .q { padding: 6px 10px 7px; background: rgba(8, 13, 30, 0.9); }