/* ============================================================================
   vespa-discovery-reader: the reading modes of "AI Product Discovery for
   Marketplaces: Building the Retrieval Foundation". 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. One mode is new to the
   factory: panel.
   ========================================================================= */

:root{
  --split-gap:clamp(1.75rem,4vw,4.5rem);
  /* THE MARK SIZE (round 3). One base height per place, --mh, and each mark
     a declared factor of it, --oh (doc_discovery.OPTICAL, written on the
     element): equal OPTICAL weight, not equal area. Equal area left the
     stacked Kleinanzeigen mark reading smallest and GEM's type heaviest. */
  --mh:clamp(1.25rem,1.1rem + .6vw,1.75rem);
}

/* A long URL never pushes a phone wide. */
.prose p,.dv-p,.dv-visit,.dv-reflist p,.close__note{overflow-wrap:break-word}
/* FIX ROUND (2026-10-28): no one-word last lines. Headings balance (doc.css);
   paragraphs, references and captions take `pretty`; the last two words of
   every heading, reference and companion title, and of every proof label, are
   kept together in the markup (doc_discovery.keep_last, label_html). The
   digital-commerce address breaks only after its slashes: its pieces are
   nowrap spans with a <wbr> after each "/", and it never hyphenates. */
p,li,figcaption{text-wrap:pretty}
/* A split column paragraph's words as one run (doc_discovery.in_run). */
.dv-run{display:inline}
.dv-visit .link{hyphens:none;overflow-wrap:normal}

.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 .link,.act--mist .link,.dv-panel .link{color:var(--ink)}

/* ============================== customer marks ============================ */
/* Height from the factor, width from the file's own aspect; object-fit keeps
   the aspect if a narrow cell ever caps the width. */
.dv-logo{display:block;height:calc(var(--mh) * var(--oh));width:auto;max-width:100%;object-fit:contain}
/* GEM has no logo in the factory (D-G): its name in the brand's display face,
   ink, weight 500 (round 3: 600 read as the heaviest mark of the four). */
.dv-wm{
  display:block;font-family:var(--sans-display);font-weight:500;color:var(--ink);
  font-size:calc(var(--mh) * var(--oh));line-height:1;letter-spacing:.05em;
}

/* ============================== 0 the cover =============================== */
.dv-cover{justify-content:space-between;gap:calc(var(--u) * 3)}
.dv-cover__mast{max-width:var(--max)}
.dv-cover__h1{color:var(--paper);max-width:20ch}
.dv-h1__lead{display:block}
.dv-h1__rest{display:block;font-size:var(--t-h2);line-height:1.14;letter-spacing:-.015em;margin-top:.35em;color:var(--paper-72)}
/* The four marketplaces, on a paper band of their own: three of the marks are
   the customers' own files on white, so the band is their ground, not a hole
   in the ink. Two by two on a phone, one row from 40rem. */
.dv-marks{
  --mh:clamp(1.6rem,1.35rem + .8vw,2.2rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--ink-14);border-radius:12px;overflow:hidden;max-width:var(--max);
}
@media (min-width:40rem){.dv-marks{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dv-marks__i{
  background:var(--paper);display:flex;align-items:center;justify-content:center;
  min-height:calc(var(--mh) * 2.9);padding:calc(var(--u) * 1.5);
}
/* FIX ROUND: A TURNED PHONE SEES THE MARKS ON ITS FIRST SCREEN. At 664x390 the
   cover was 555px tall and the four marks sat under the fold. On a short
   landscape screen the cover's air, the wordmark, the h1 and the marks band
   step down, every band still 16px clear of the next (discovery-check
   `cover`), the smallest mark 16px tall (`marks`), all type above the floor. */
@media (orientation:landscape) and (max-height:30rem){
  .dv-cover{padding-top:calc(3.4rem + var(--u));padding-bottom:calc(var(--u) * 1.5);gap:1rem}
  .dv-cover .wordmark{height:1.5rem}
  .dv-cover__mast{gap:1rem}
  .dv-cover__h1{font-size:2.1rem;max-width:none}
  .dv-h1__rest{font-size:1.35rem;margin-top:.25em}
  .dv-marks{--mh:1.2rem}
  .dv-marks__i{padding:calc(var(--u) * 1)}
}

/* ============================== 1 casebook ================================ */
.dv-lead{font-size:var(--t-serif);line-height:1.5;color:var(--on-ground-soft)}
/* Four cases, two across from 48rem. Each is the customer's mark, then the
   doc's paragraph, its bold line set larger in place (a span around the doc's
   own <strong> and the stop the doc leaves outside it). */
.dv-cases{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
/* Two across from 60rem (fix round 3: at 48rem a 780px phone turned on its
   side set each card about 300px wide and the balanced bold line left
   "Kleinanzeigen" alone on its first line; discovery-check `case-leads`). */
@media (min-width:60rem){.dv-cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dv-case{
  background:var(--paper);border:1px solid var(--hair);border-top:3px solid var(--green);
  border-radius:12px;padding:calc(var(--u) * 2.5) calc(var(--u) * 3);
  display:flex;flex-direction:column;gap:calc(var(--u) * 2);
}
/* FIX ROUND: every case's mark box is ONE height, Kleinanzeigen's (its factor
   1.9 in doc_discovery.OPTICAL, the same on the cover and in the evidence
   blocks), about 56px at 1440 and scaling with --mh; the stacked mark fills
   it and the three one-line marks sit on its bottom edge, so the gap from
   mark to lead is one value in all four cards (v1: 27.9px against 40 to 42 at
   1440). Its wordmark's x-height, about 6px at 1440, is the logo's own
   proportion, accepted and declared (discovery-check `marks`). */
.dv-case__mark{--mh:clamp(1.5rem,1.3rem + .6vw,2rem);height:calc(var(--mh) * 1.9);display:flex;align-items:flex-end}
/* GEM's type: its line box trimmed to the capitals, so the box's bottom edge
   is the letters' baseline and it bottom-aligns like the three files. */
.dv-case__mark .dv-wm{line-height:.74}
/* FIX ROUND: the stories at body size in the body's ink, as the prose. */
.dv-case__p{font-size:var(--t-body);line-height:1.6;color:var(--on-ground)}
.dv-case__lead{
  display:block;font-family:var(--sans-display);font-size:var(--t-deck);line-height:1.25;
  letter-spacing:-.01em;color:var(--on-ground);margin-bottom:.55em;
  /* Fix round: balanced, so no line of a case's bold line is a single word
     (at 360 "required" stood alone between its neighbours). */
  text-wrap:balance;
}
.dv-case__lead strong{font-weight:500}
.dv-pull{border-left:3px solid var(--green);padding-left:calc(var(--u) * 2.5);max-width:46rem}
.dv-pull blockquote{margin:0}
.dv-pull blockquote p{font-family:var(--serif);font-size:var(--t-serif);line-height:1.55}
.dv-pull figcaption{margin-top:calc(var(--u) * 1.5)}
.dv-pull cite{font-style:normal;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.06em;color:var(--on-ground-soft)}

/* ============================== 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:22rem}
}
/* Clear space round every drawing, the same on every figure. */
.dv-fig{margin-block:calc(var(--u)*2)}

/* ================================ panel =================================== */
/* NEW MODE. The doc's own sidebar, the "[PANEL]" its author marked: set apart
   from the reading line in a framed box on its own ground, at the act's full
   width, its heading and prose on the page's spine inside the frame, and no
   sticky head, so a reader can take it or pass it. Equal padding on every
   side, from one token. */
.dv-panelact{padding-block:calc(var(--shelf) * .75)}
/* FIX ROUND: the panel's ground was --mist, the same blue as the Limits,
   Workflow and Foundation acts on either side of both panels, so a panel read
   as a piece of its neighbour. Its ground is now the brand's mint tint
   (--green-22 over the white act, #DCF6E7), which no act uses, under the same
   green rule. Ink and --ink-72 clear 4.8:1 on it (text-contrast measures). */
.dv-panel{
  --pp:clamp(1.25rem,1rem + 2.6vw,3.25rem);
  display:flex;flex-direction:column;gap:calc(var(--u) * 3);
  background:var(--green-22);border-radius:16px;border-top:4px solid var(--green);
  padding:var(--pp);
}
/* FIX ROUND: ON THE PAGE'S SPINE. Inside the panel's padding the 5fr/7fr split
   divides a narrower box, so its prose column began --pp/6 (8.7px at 1440)
   left of every other second column on the page. The first column is set to
   the page's own first column less the panel's padding, so the second starts
   exactly on the spine: (inner + 2pp - gap) x 5/12 - pp. */
@media (min-width:64rem){
  .dv-panel > .split{
    grid-template-columns:minmax(0,calc((100% + 2 * var(--pp) - var(--split-gap)) * 5 / 12 - var(--pp))) minmax(0,1fr);
  }
  /* The verifier's read (2026-10-28): that first column is narrower than the
     page's, and at --t-title the two panel titles broke into lone words in it
     ("Product" / "Discovery", "Outgrows", "Search"). The heading stays in the
     head column beside its prose, sticky there like every act's (the
     orchestrator's rule, same day), and steps down the scale: --t-section,
     held at 2.25rem, sets both titles with no one-word line from 1024 to
     1920 (discovery-check `headings`). */
  .dv-panel h2.title{font-size:min(var(--t-section), 2.25rem)}
}
.dv-visit{font-size:var(--t-small);line-height:1.55}
.dv-info{display:flex;flex-direction:column;gap:calc(var(--u) * 1.25);min-width:0}
.dv-info__img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--hair);background:var(--paper)}

/* THE VIEWER (the tensor reader's figure viewer, this build's viewer.js).
   The figure is a link to its 2800px file. Round 3: the label is a
   button-like line of the link's own text UNDER the image, at least 44px
   tall, outlined and in full ink, so a reader on a phone finds it. It is
   static markup and covers nothing. */
.zoom__link{display:block;text-decoration:none;color:var(--on-ground)}
.zoom__link:focus-visible{outline:2px solid var(--green-ink);outline-offset:3px}
.zoom__hint{
  display:inline-flex;align-items:center;gap:.6em;
  min-height:2.75rem;min-width:2.75rem;margin-top:calc(var(--u) * 1.25);
  padding:0 1.1rem;border:1px solid var(--ink);border-radius:999px;background:var(--paper);
  color:inherit;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;
  line-height:1;font-size:var(--t-mono);
}
.zoom__link:hover .zoom__hint{background:var(--ink);color:var(--paper)}
dialog.zoom{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;overflow:hidden;
  background:var(--ink);color:var(--paper);
}
dialog.zoom::backdrop{background:var(--ink)}
.zoom[open]{display:flex;flex-direction:column}
.zoom__bar{
  flex:none;display:flex;justify-content:flex-end;
  padding:calc(var(--u)*1.25) var(--pad-x);border-bottom:1px solid var(--paper-14);
}
.zoom__close{
  background:transparent;color:var(--paper);cursor:pointer;
  border:1px solid var(--paper-54);border-radius:6px;padding:.6rem 1rem;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;
}
.zoom__close:hover{border-color:var(--green);color:var(--green)}
/* Round 3: THE WHOLE IMAGE, FITTED, on open. At its natural 2800px a phone
   showed only the image's empty top-left corner. The image is the 2800w file,
   so it stays sharp at 3x, and both limits are set with width and height
   auto, which keeps its aspect: wide screens fit the width, short ones the
   height. Pinch zoom (the viewport's own) and scroll take it from there. */
.zoom__pane{
  flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  padding:var(--gap);touch-action:pan-x pan-y pinch-zoom;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.zoom__img{width:auto;height:auto;max-width:100%;max-height:100%;margin:auto}
/* FIX ROUND: PORTRAIT PHONES FIT THE HEIGHT. Fitted to a 390px width the
   2800px image was 357px wide, barely larger than the 298px figure on the page,
   so opening it gained the reader nothing. On a portrait phone it now fills the
   pane's height below the bar (about 2.5 times the inline figure), starts at
   its left edge, and pans sideways; the viewport's pinch zoom still works.
   Landscape phones and desks keep the whole image fitted. */
@media (orientation:portrait) and (max-width:47.99rem){
  .zoom__pane{justify-content:flex-start;align-items:stretch;padding:0}
  .zoom__img{flex:none;height:100%;width:auto;max-width:none;max-height:none;margin:0}
}
/* The touch hint, left in the bar, only where the image pans. */
.zoom__bar{align-items:center;gap:var(--gap)}
.zoom__tip{display:none;margin-right:auto;font-family:var(--mono);font-size:max(.75rem,var(--t-mono));letter-spacing:.04em;color:var(--paper-72)}
@media (orientation:portrait) and (max-width:47.99rem) and (hover:none){
  .zoom__tip{display:block}
}
@media (prefers-reduced-motion:no-preference){
  .zoom[open]{animation:zoom-in .2s ease-out}
}
@keyframes zoom-in{from{opacity:0}to{opacity:1}}

/* ============================== 4 sequence ================================ */
.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)}
.part__head{gap:calc(var(--u)*1.25)}
/* The orchestrator's sticky rule (2026-10-28): the capability heads were
   sticky in name only. A grid item stretches to its row, so the head's box was
   as tall as the text beside it and had no room to travel (discovery-check
   `sticky-heads` measured 0px). Aligned to the start of its row, it sticks
   while its part's text scrolls and stops at the end of it. */
@media (min-width:64rem){.part__head{align-self:start}}
/* The doc numbers its capabilities ("1. Retrieve ..."), so the number is the
   heading's own first word, set large in place in a span. */
.dv-cap__h{font-size:var(--t-section);line-height:1.2;margin-top:0;text-wrap:balance}
/* The verifier's read: in the pillar's 5fr column at --t-section, capability
   2's "through experimentation" could not share a line and both words stood
   alone. On a desk the four capability titles step down one size in the
   scale, to --t-deck, which every one of them sets with two words a line. */
@media (min-width:64rem){.dv-cap__h{font-size:var(--t-deck)}}
.dv-num{
  display:block;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);margin-bottom:.3em;
}
.dv-flow{gap:calc(var(--u) * 2.5)}
.dv-cont{margin-top:calc(var(--u) * 2.5)}
.dv-p{line-height:1.6}
/* EVIDENCE: a customer's paragraphs under its mark, on paper on the mist act,
   so the reader can see which claims each marketplace stands behind. */
.dv-ev{
  --mh:clamp(1.25rem,1.15rem + .3vw,1.45rem);
  background:var(--paper);border-left:3px solid var(--green);border-radius:0 12px 12px 0;
  padding:calc(var(--u) * 2.25) calc(var(--u) * 2.75);
  display:flex;flex-direction:column;gap:calc(var(--u) * 1.5);
}
.dv-ev__who{min-height:calc(var(--mh) * 2);display:flex;align-items:center}
.dv-ev .prose p{font-size:var(--t-small);line-height:1.6}
/* VINTED'S PROOF ROW. Two grids, four then three, so neither leaves a hole.
   FIX ROUND (2026-10-28): every item is the quoted VALUE, large, then a short
   authored LABEL, in DOM order and on screen alike (v1 lifted the value out of
   its sentence fragment with `order:-1`, so labels dangled on "by" and "from").
   Each item is a two-row subgrid of its row, so every label in a row starts on
   one line however many lines its value takes. The value is sized from the
   CARD's width (container query units on .dv-proof), one size for all seven,
   and wraps only between words. */
.dv-proof{
  --mh:clamp(1.25rem,1.15rem + .3vw,1.45rem);
  background:var(--paper);border-radius:12px;border-top:3px solid var(--green);
  padding:calc(var(--u) * 2.5) calc(var(--u) * 3);
  display:flex;flex-direction:column;gap:calc(var(--u) * 2.5);margin-block:calc(var(--u) * 2);
}
.dv-proof__row{display:grid;gap:calc(var(--u) * 2.5) calc(var(--u) * 3);grid-template-columns:minmax(0,1fr)}
/* Round 1 of the fix (by eye): at four across a desk cell was about 205px,
   so "search latency improvement" broke as "search / latency improvement"
   and "documents in the search index, November 2024" took three lines. The
   four sit two by two from 36rem, where each of their labels is one line on a
   desk. */
@media (min-width:36rem){.dv-proof__row--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:48rem){.dv-proof__row--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dv-proof{container-type:inline-size}
.dv-proof__i{
  border-top:1px solid var(--hair);padding-top:calc(var(--u) * 1.5);min-width:0;
  display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:calc(var(--u) * .6);
}
.dv-proof__i p{display:contents}
.dv-proof__v{
  display:block;align-self:end;font-family:var(--sans-display);
  font-size:clamp(1.5rem,2.9cqi,2.4rem);line-height:1.08;
  letter-spacing:-.015em;font-weight:500;color:var(--green-ink);
  font-variant-numeric:tabular-nums;overflow-wrap:normal;hyphens:none;
}
.dv-proof__l{
  display:block;align-self:start;
  font-size:var(--t-small);line-height:1.45;color:var(--on-ground-soft);
  overflow-wrap:normal;hyphens:none;
}

/* ============================== 7 turn ==================================== */
.ask{max-width:46rem}
.ask__h{color:var(--paper)}
.dv-nowrap{white-space:nowrap}
.ask__p{font-size:var(--t-small);line-height:1.55;color:var(--paper-72)}
.plate__cta{font-family:var(--sans-display);font-size:var(--t-deck);line-height:1.3;font-weight:500}
.plate .link{color:var(--green)}

/* ============================== 8 list ==================================== */
.dv-reflead{font-size:var(--t-body);line-height:1.55}
.dv-refs{gap:calc(var(--u) * 3.5)}
.dv-refgroup{display:flex;flex-direction:column;gap:calc(var(--u) * 1)}
.dv-refgroup__h{font-family:var(--sans-display);font-size:var(--t-label);font-weight:600;letter-spacing:.02em}
.register{display:flex;flex-direction:column}
.register li{border-top:1px solid var(--hair);padding:calc(var(--u)*1.5) 0}
.register li:last-child{border-bottom:1px solid var(--hair)}
.dv-reflist p{font-size:var(--t-small);line-height:1.5}

/* ============================== 9 close =================================== */
.close__note{font-size:var(--t-small);line-height:1.55;color:var(--paper-72);max-width:var(--measure)}
.close__mark{height:3rem;width:3rem;align-self:flex-start}

/* ============================ contents panel ============================== */
.toc__row--sub{padding:calc(var(--u) * 1.1) 0}
.toc__row--sub .toc__t{grid-column:2 / -1;font-family:var(--sans);font-size:var(--t-small);line-height:1.4}

/* ============================ 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))}
/* Fix round: figure captions at 12px at least (11.55px at 1440 before). */
.figcap{font-size:max(.75rem, var(--t-micro))}
/* The orchestrator's decision (2026-10-28): the act titles stop growing at
   their 1440 size. --t-title is 1.35rem + 1.9vw = 48.96px (3.06rem) at 1440,
   where the head column stops widening; above it the ramp ran on to its 3.5rem
   cap in a column that did not, and at 1920 "Product Discovery" and "Building
   the Retrieval" broke into lone words. This build only; doc.css's token is
   unchanged. The panel titles keep their own smaller rule above. */
.act .title{font-size:min(var(--t-title), 3.06rem)}