/* Validated.Directory 2.0.0 · the learn library's scene (DIR 2.0.0 part D, BEA-432): "a scene sized to the answer", a
   short pinned run of steps that guide.js drives, and the pieces each guide draws it with. Loads after guide.css on every
   guide that has one. Still first, for scripts off and reduced motion: the headline, the drawing finished, every step
   written out. In motion the stage pins for --gs-len screens: the headline at the top, the drawing in the middle, the
   step in hand at the foot; laptops put the drawing at the right, as the waterfall does. */

.gs { position: relative; z-index: 1; }
.gs-stage { position: relative; display: grid; gap: 22px; width: 100%; max-width: var(--max); margin: 0 auto; padding: 36px var(--gut-r) 52px var(--gut); }
.gs-head h2 { margin-top: 10px; max-width: 17ch; font-size: clamp(30px, 8.6vw, 54px); line-height: 1.06; color: var(--ink); }
.gs-tag { display: inline-block; margin-top: 12px; padding: 6px 10px 7px; border: 1px solid var(--ink-2); background: var(--paper-hi); font: 500 12px/1.4 var(--mono); color: var(--ink); }
.gs-art { position: relative; min-width: 0; }
.gs-fit { position: relative; width: 100%; margin: 0 auto; }
.gs-fx { display: none; }
.gs-steps { display: grid; gap: 14px; }
.gs-steps > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 3px 10px; padding-top: 12px; border-top: 1px solid rgba(35, 31, 26, 0.24); }
.gs-n { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.gs-k { font: 600 16.5px/1.3 var(--sans); color: var(--ink); }
.gs-t { grid-column: 1 / -1; font-size: 16px; line-height: 1.45; color: var(--ink); }
.gs-tk { display: none; }

.m .gs-track { height: calc(var(--gs-len, 3.4) * 100vh); height: calc(var(--gs-len, 3.4) * 100svh); }
.m .gs-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; gap: 12px; grid-template-rows: auto minmax(0, 1fr) auto; padding-top: calc(78px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.m .gs-head h2 { margin-top: 8px; font-size: clamp(25px, 7.4vw, 44px); }
.m .gs-tag { margin-top: 8px; padding: 4px 8px 5px; font-size: 11.5px; }
.m .gs-art { display: grid; place-items: center; min-height: 0; }
.m .gs-fit { transform-origin: 50% 50%; }
.js .gs-fx { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.m .gs-out { padding-top: 10px; border-top: 1px solid rgba(35, 31, 26, 0.24); }
.m .gs-steps { display: grid; gap: 0; }
.m .gs-steps > li { grid-area: 1 / 1; padding-top: 0; border-top: 0; opacity: 0; transition: opacity 0.35s; }
.m .gs-steps > li.cur { opacity: 1; }
.m .gs-t { min-height: calc(3 * 1.45em); }
.m .gs-tk { display: flex; gap: 4px; margin-top: 8px; }
.m .gs-tk i { flex: 0 1 22px; height: 4px; background: rgba(35, 31, 26, 0.18); transition: background-color 0.3s; }
.m .gs-tk i.on { background: var(--gold-ink); }

/* The step states guide.js sets: .on from a step on (data-at), .fixed from a later one (data-fix), .now while its step is
   the one in hand (data-now). Each class below says what .on means; the still composition is the finished state. */
.m .ap:not(.on) { opacity: 0; transform: translateY(6px); }
.ap, .dp { transition: opacity 0.45s, transform 0.45s; }
.m .dp.on { opacity: 0; }
html:not(.m) .dp { display: none; }
.sw { display: inline-grid; }
.sw > * { grid-area: 1 / 1; }
/* a value that changes in a card keeps to the card: it may take two lines, and the shorter one hugs its own words */
.gf .sw { min-width: 0; max-width: 100%; }
.gf .sw > .gv { justify-self: end; white-space: normal; text-align: right; }

/* ==== The scene's pieces ============================================================================================== */
/* A source: a card with a few facts. Its values light when read, show a barn hatch when wrong, and swap when fixed. */
.gc { position: relative; z-index: 2; padding: 9px 11px 10px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.45); box-shadow: 0 16px 30px -24px rgba(35, 31, 26, 0.6); }
.gc-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.gc-n { margin-top: 3px; font: 400 18px/1.15 var(--display); color: var(--ink); }
.gf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--rule-ink); font: 500 12px/1.35 var(--mono); color: var(--ink); }
.gf > b { font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.gv { padding: 1px 4px; transition: background-color 0.35s, box-shadow 0.35s, color 0.35s, opacity 0.35s; }
.gf .gv, .gai .gv { white-space: nowrap; }
.lt.on, html:not(.m) .lt { background: rgba(244, 196, 90, 0.36); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.m .bdf.on:not(.fixed), .bd.on, html:not(.m) .bd { color: #8a3a2c; background: repeating-linear-gradient(135deg, rgba(166, 75, 59, 0.16) 0 2px, transparent 2px 5px); box-shadow: inset 0 -2px 0 var(--barn); }
.gc.lt.on, html:not(.m) .gc.lt { background: #fbf3dc; box-shadow: inset 0 0 0 1px var(--gold-ink), 0 16px 30px -24px rgba(35, 31, 26, 0.6); }
.gflag { display: inline-block; padding: 2px 6px 3px; font: 600 10px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #fff8ea; background: var(--barn); vertical-align: 2px; }
.gflag.ok { color: var(--ink); background: var(--gold-bright); }

/* What an AI assistant answers: always a panel of night, since AI lives at night (FOUNDATION 2). */
.gai { position: relative; z-index: 2; padding: 11px 13px 12px; background: linear-gradient(180deg, var(--night-2), var(--night)); border: 1px solid rgba(35, 31, 26, 0.55); color: var(--cream); box-shadow: 0 20px 38px -24px rgba(10, 16, 36, 0.85); --cm: rgba(240, 230, 207, 0.62); }
.gai-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-2); }
.gai-a { margin-top: 6px; font: 400 18px/1.28 var(--display); color: var(--white); }
.gai-a b { font-weight: 400; color: var(--gold-bright); }
.gai .gv.lt.on, html:not(.m) .gai .gv.lt { color: var(--canvas); background: var(--gold-bright); box-shadow: none; }
/* The customer's question, and the tools an answer goes to. */
.gq { position: relative; z-index: 2; padding: 9px 12px 10px; background: var(--paper-hi); border: 1px solid var(--ink-2); }
.gq-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.gq-a { margin-top: 3px; font: 400 18px/1.22 var(--display); color: var(--ink); }
.gtools { display: flex; flex-wrap: wrap; gap: 6px; }
.gtool { position: relative; z-index: 2; padding: 6px 8px 7px; font: 500 11.5px/1 var(--mono); color: var(--ink); background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.4); white-space: nowrap; }
.gtool.lt.on, html:not(.m) .gtool.lt { border-color: var(--gold-ink); }

/* A column: a drawing over what AI answers (the valley, a drawn site, a record). */
.valley { display: grid; gap: 12px; width: min(100%, 460px); margin: 0 auto; }
.valley .gai, .valley .gq { width: 100%; }

/* Flows: sources, then what AI answers (most guides). Phone: two columns of sources over the answer. Laptop: sources at
   the left, the answer at the right. */
.flow { display: grid; gap: 22px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 560px); margin: 0 auto; }
.flow > .wide, .flow > .gai, .flow > .gq { grid-column: 1 / -1; }
.flow > .gai { margin-top: 4px; }

/* A value that leaves once its fix lands; the valley's written sentence and its AI answer; a week; who reads what. */
.m .xf.fixed { opacity: 0; }
html:not(.m) .xf { display: none; }
.gr { margin-top: 4px; font: 400 16px/1.25 var(--display); color: var(--ink); }
.gai-f { margin-top: 5px; font: 500 11.5px/1.4 var(--mono); color: var(--cream); }
.gai-f b { font-weight: 500; color: var(--gold-bright); }
.gad > span { color: var(--ink-2); }
.gad > b { padding: 1px 4px; color: #fff8ea !important; background: var(--ink-2); }
.tools4 { justify-content: space-between; }
.tools4 .gtool { flex: 1 1 0; text-align: center; }

@media (max-width: 380px) {
  .flow { gap: 18px 8px; }
  .gc { padding: 8px 9px 9px; }
  .gf { font-size: 11.5px; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .m .gs-head h2 { font-size: clamp(22px, 6.6vw, 28px); }
  .m .gs-stage { padding-top: calc(70px + env(safe-area-inset-top, 0px)); gap: 8px; }
  .m .gs-t { min-height: calc(2 * 1.45em); font-size: 15px; }
  .m .gs-tag { display: none; }
}

@media (min-width: 900px) {
  .gs-stage { max-width: none; width: 100%; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(28px, 4vw, 56px); padding: 72px var(--read-x) 80px; }
  .gs-head { grid-column: 1; grid-row: 1; }
  .gs-out { grid-column: 1; grid-row: 2; }
  .gs-art { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .m .gs-stage { grid-template-rows: auto minmax(0, 1fr) auto; padding-top: 108px; padding-bottom: 48px; padding-left: var(--read-x); padding-right: var(--read-x); }
  .m .gs-head { grid-row: 1; }
  .m .gs-art { grid-row: 1 / 4; }
  .m .gs-out { grid-row: 3; align-self: end; }
  .m .gs-head h2 { font-size: clamp(40px, 3.8vw, 58px); }
  .gs-n { font-size: 12.5px; }
  .gs-k { font-size: 20px; }
  .gs-t { font-size: 20px; line-height: 1.42; }
  .m .gs-t { min-height: calc(3 * 1.42em); }
  .flow { width: min(100%, 600px); }
  .gc-n { font-size: 20px; }
  .gf { font-size: 13px; }
  .gai-a { font-size: 21px; }
  .gq-a { font-size: 21px; }
}