/* ============================================================================
   vespa-agents-reader: the reading modes of "Retrieval Engineering for
   Agents". doc.css is the shared design system and is byte-identical across
   every reader. Everything this document needs that the others do not is
   here. No mode is new: statement, sequence, argument, turn, audit, close.
   ========================================================================= */

:root{
  --split-gap:clamp(1.75rem,4vw,4.5rem);
  /* EQUAL INSETS. Every framed box takes ONE of these on all four sides:
     --pp for the plate, --tp for the tiles (the nine assessment cards).
     agents-check's `insets` row measures all four on every [data-inset]. */
  --pp:clamp(1.25rem,1rem + 1.4vw,2.25rem);
  --tp:clamp(1.1rem,.95rem + .7vw,1.6rem);
}

.prose p,.ag-q p,.ag-diag p,.ag-ask__p{overflow-wrap:break-word}
p,li,figcaption{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}

.figcap{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.03em;line-height:1.5;
  color:var(--on-ground-soft);max-width:48rem;
}

/* LINKS ON A LIGHT GROUND ARE INK, NOT THE LINK BLUE (#4A86E8 is 3.58:1 on
   white). Ink keeps doc.css's underline. On ink the links are doc.css green. */
.act--paper .prose a,.act--mist .prose a,.act--sage .prose a,
.act--paper .link,.act--mist .link,.act--sage .link{color:var(--ink)}

/* ============================== the diagrams ============================== */
/* Two layouts each. Wide from 48rem (the act is at least 691px wide there, so
   a 16-unit label is 11.06px at the least), tall below (15 units of 360). */
.dfig{display:flex;flex-direction:column;gap:calc(var(--u)*1.5);min-width:0}
.dfig__art svg{width:100%;height:auto}
.dg{border-radius:14px}
.dg--tall{display:none}
@media (max-width:47.99rem){
  .dg--wide{display:none}
  .dg--tall{display:block;max-width:28rem;margin-inline:auto}
}
@media (max-width:47.99rem) and (orientation:landscape) and (max-height:30rem){
  .dg--tall{max-width:24rem}
}
.ag-fig{margin-block:calc(var(--u)*2)}

/* ============================== 0 the cover =============================== */
.ag-cover{justify-content:space-between;gap:calc(var(--u) * 3)}
.ag-cover__mast{max-width:var(--max)}
.ag-cover__h1{color:var(--paper);max-width:14ch}
/* The doc's own pull, quoted as the standfirst. */
.ag-blurb{max-width:var(--max);margin-top:calc(var(--u) * 2)}
.ag-blurb__p{font-family:var(--sans-display);font-size:var(--t-deck);line-height:1.35;letter-spacing:-.008em;color:var(--paper-72);max-width:34rem}
/* ONE COMPOSED COLUMN ON A PORTRAIT PHONE (the orchestrator's review,
   2026-10-30). doc.css spreads the cover's bands over the whole screen
   (space-between), which on a phone put about 330px of ground between the
   wordmark and the title and 400px between the title and the standfirst. The
   five bands now keep the series' band rhythm (the cover gap, the mast's own
   stack, the standfirst's 2u) and the free height is shared evenly above and
   below the column, never inside it (agents-check `cover-gaps`). */
@media (max-width:47.99rem) and (orientation:portrait){
  .ag-cover{justify-content:center}
}
/* A SHORT DESK SEES THE WHOLE COVER: below 760px of height the cover's air
   and its display size follow the screen's height, so the title and the
   standfirst sit on the first screen (agents-check `cover`). Desks only, as
   the scaling reader scopes it: on a phone the H1 keeps the series' size. */
@media (min-width:48rem) and (max-height:47.5rem) and (orientation:landscape) and (min-height:30.01rem){
  .ag-cover{padding-block:calc(2.5rem + 2vh);gap:calc(var(--u) * 2)}
  .ag-cover__mast{gap:calc(var(--u) * 2)}
  .ag-cover__h1{font-size:min(var(--t-display), 10vh, 12vw)}
}
@media (orientation:landscape) and (max-height:30rem){
  .ag-cover{padding-top:calc(3.4rem + var(--u));padding-bottom:calc(var(--u) * 2);gap:1.1rem}
  .ag-cover .wordmark{height:1.5rem}
  .ag-cover__mast{gap:1rem}
  .ag-cover__h1{font-size:2.2rem;max-width:none}
  .ag-blurb{margin-top:0}
  .ag-blurb__p{font-size:1.05rem;line-height:1.4;max-width:none}
}
/* THE FAN (the brief's Cover v2, 2026-10-30): one request fanning out to the
   five kinds of search Figure 1 names, each looping back. Decorative and
   aria-hidden, not a figure (agents_diagrams.cover_fan). Beside the standfirst
   on desks, under it below, its height capped so the title and the standfirst
   stay on the first screen, gone on short landscape phones. The lines draw
   in, then the points travel out and back (SMIL, each hidden until its begin).
   Reduced motion: drawn and still, no points (agents-check `cover fan`). */
.fan-wrap{margin-top:calc(var(--u) * 2)}
.fan{display:block;overflow:visible;width:100%;height:auto}
.fan--row{display:none}
@media (min-width:64rem){
  .ag-cover .ag-blurb{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 3)}
  .fan-wrap{margin:0;flex:0 1 36rem}
  .fan--row{display:block;max-height:40vh;width:auto;margin-left:auto}.fan--tall{display:none}
}
@media (max-width:63.99rem){.fan-wrap{max-width:28rem}.fan--tall{max-height:30svh;width:auto;max-width:100%}}
@media (orientation:landscape) and (max-height:30rem){.fan-wrap{display:none}}
.fan__out{fill:none;stroke:rgba(255,255,255,.36);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:fan-draw 1.1s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(450ms + var(--i) * 110ms)}
.fan__back{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1;stroke-dasharray:3 5;opacity:0;animation:fan-fade .9s ease forwards 1.4s}
.fan__node{fill:var(--ink);stroke:var(--green);stroke-width:1.5;opacity:0;animation:fan-fade .5s ease forwards;animation-delay:calc(1050ms + var(--i) * 110ms)}
.fan__label{font-family:var(--mono);fill:rgba(255,255,255,.72);letter-spacing:.02em;opacity:0;animation:fan-fade .6s ease forwards;animation-delay:calc(1150ms + var(--i) * 110ms)}
.fan__label--o{fill:var(--green);animation-delay:350ms}
.fan__origin{fill:var(--green)}
.fan__halo{fill:none;stroke:var(--green);stroke-opacity:.4;stroke-width:1}
.fan__pulse{fill:var(--green)}
@keyframes fan-draw{to{stroke-dashoffset:0}}
@keyframes fan-fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .fan__out,.fan__back,.fan__node,.fan__label{animation:none;opacity:1;stroke-dashoffset:0}
  .fan__pulse{display:none}
}

/* ============================== the parts ================================= */
/* A part: its head sticky beside its text from 64rem (doc.css .pillar), the
   figure after the paragraph it draws at the act's width, and the part's
   remaining paragraphs in a second row beside an empty head cell. */
.parts{display:flex;flex-direction:column}
.part{border-top:1px solid var(--hair);padding-top:calc(var(--u)*4);margin-top:calc(var(--u)*4);display:flex;flex-direction:column;gap:calc(var(--u)*4)}
/* A grid item stretches to its row and then has no room to stick: aligned to
   its row's start it sticks while its text scrolls. */
@media (min-width:64rem){.part__head{align-self:start}}
.pillar__title{font-size:var(--t-section);line-height:1.2;margin-top:0}
h4.pillar__title{font-size:clamp(1.3rem,1.05rem + 1.1vw,2.1rem)}
/* `sequence` numbers parts the doc does not number: a counter, generated,
   never typed into the markup. The four capabilities carry the doc's own. */
.parts--count{counter-reset:part}
.part--count{counter-increment:part}
.part--count .part__head::before{
  content:counter(part,decimal-leading-zero);
  font-family:var(--sans-display);font-weight:500;font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:.9;letter-spacing:-.03em;color:var(--green-ink);
}
.act--sage .part--count .part__head::before{color:var(--ink)}
/* the workflow's own head beside its two paragraphs */
.ag-wf{border-top:1px solid var(--hair);padding-top:calc(var(--u)*4)}
@media (min-width:64rem){.ag-wf__head{align-self:start}}

/* ============================== 2 argument ================================ */
/* The doc's bold pull, the act's claim, set large in its own bold. */
.ag-pull{font-family:var(--sans-display);font-size:var(--t-deck);line-height:1.3;letter-spacing:-.01em}
.ag-pull strong{font-weight:600}
.ag-lead{font-weight:500}
.register{display:flex;flex-direction:column}
.register li{border-top:1px solid var(--hair);padding:calc(var(--u)*1.25) 0}
.register li:last-child{border-bottom:1px solid var(--hair)}

/* ============================== 4 turn ==================================== */
/* The plate: the bounded-autonomy paragraph, ONE padding on four sides. */
.ag-plate{padding:var(--pp)}
/* No max-width: the text fills the plate to its padding on all four sides (a
   capped measure left 252px of empty ink on the right at 1440, agents-check
   `insets`). At the deck size the line still reads as a display line. */
.ag-plate__p{font-family:var(--sans-display);font-size:var(--t-deck);line-height:1.35;letter-spacing:-.008em;color:var(--paper)}
/* The diagnosis: the lead sentence, then one row per failure, the failure's
   own words set larger IN PLACE (a span inside the one sentence). On a desk
   the failure on the left, what it calls for on the right. */
.ag-diag{display:flex;flex-direction:column;gap:calc(var(--u)*1.5)}
.ag-diag__lead{font-weight:500}
.ag-diag__rows{display:flex;flex-direction:column}
.ag-diag__row{border-top:1px solid var(--ink-38);padding:calc(var(--u)*1.25) 0}
.ag-diag__row:last-child{border-bottom:1px solid var(--ink-38)}
.ag-diag__k{display:block;font-family:var(--sans-display);font-weight:500;font-size:var(--t-body);line-height:1.3;margin-bottom:.25em}
@media (min-width:48rem){
  .ag-diag__row p{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:1.5rem;align-items:baseline}
  .ag-diag__k{margin-bottom:0}
}

/* ============================== 5 audit =================================== */
/* Nine numbered questions the reader works through: a counter, generated. */
.ag-audit{counter-reset:q;display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:40rem){.ag-audit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.ag-audit{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ag-q{counter-increment:q;background:var(--mist);border-top:3px solid var(--green);border-radius:12px;padding:var(--tp);display:flex;flex-direction:column;gap:.6em}
.ag-q::before{content:counter(q,decimal-leading-zero);font-family:var(--mono);font-size:max(.75rem,var(--t-mono));letter-spacing:.08em;color:var(--ink)}
.ag-q p{font-size:var(--t-small);line-height:1.5}
.ag-q__k{display:block;font-family:var(--sans-display);font-weight:500;font-size:var(--t-body);line-height:1.3;margin-bottom:.3em}

/* ============================== 7 close =================================== */
.close__mark{height:3rem;width:3rem;align-self:flex-start}
.ag-ask{gap:calc(var(--u)*1.25)}
.ag-ask__h{color:var(--paper)}
.ag-ask__p{font-size:var(--t-body);line-height:1.55;color:var(--paper-72);max-width:var(--measure)}
.ag-ask__cta{font-family:var(--sans-display);font-size:var(--t-deck)}

/* ============================ the type floor, last ======================== */
/* The shared --t-micro is 10.56px at its floor. Lifted here, last, so every
   rule above that sets these runs to it loses. doc.css stays byte-identical. */
.cover__foot,.colophon{font-size:max(.6875rem, var(--t-micro))}
.figcap{font-size:max(.75rem, var(--t-micro))}
/* HEADINGS WITH NO WORD ALONE (agents-check `headings`, first run: 23 at the
   desk widths, the H1 and "What is Retrieval Engineering?" on phones). Each
   heading's last two words, and any hyphenated compound, are kept together
   by a span inside the one heading (doc_agents.hk); the sizes below are the
   ones those kept pairs fit at, measured at 360 to 1920.
   Act titles: two steps down the series' scale in the 5fr head column; on
   phones the size follows the screen's width. */
.ag-nowrap{white-space:nowrap}
.act .title{font-size:min(var(--t-title), 2.1rem, 2.7vw)}
@media (max-width:63.99rem){.act .title{font-size:min(var(--t-title), 2.5rem, 7.2vw)}}
/* The H1 on a phone keeps the series' display size (doc.css --t-display,
   44px at 390 and 360) and breaks "Retrieval / Engineering / for Agents": the
   two long words alone are declared H1 exceptions in agents-check `headings`
   (the orchestrator's review, 2026-10-30), "for Agents" stays together. */
/* part heads, capabilities and the workflow head in the 5fr column */
@media (min-width:64rem){
  .pillar__title,h4.pillar__title,.ag-wf__head .section-title{font-size:min(var(--t-section), 1.75rem)}
}