/* Prozollo — documentation.
   Loaded only by /docs/. Tokens, nav, buttons and footer come from site.css;
   this file is the manual's own composition.

   The idea: the manual is set like the product's own Dossier theme —
   oversized sequence numerals, hairlines running to the measure, no cards.
   Documentation for a document tool should look like a document. */

.dx-shell{padding-top:66px}                 /* clears the fixed site header */

/* ---------- masthead ----------
   Front matter, not a hero: a title, a standfirst and a printed-looking
   colophon rule. Nothing is centred and nothing sits in a box. */
.dx-mast{background:var(--paper-2);border-bottom:1px solid var(--line)}
.dx-mast-in{max-width:var(--wrap);margin:0 auto;padding:78px 24px 54px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:end}
.dx-kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px}
.dx-title{font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(50px,7.6vw,104px);line-height:.94;letter-spacing:-.025em;margin:0}
.dx-title em{font-style:italic;color:var(--accent)}
.dx-stand{font-size:18px;line-height:1.55;color:var(--body);margin:0 0 6px;max-width:46ch}
.dx-colophon{border-top:2px solid var(--ink);padding-top:12px;
  font-size:13px;line-height:1.7;color:var(--muted)}
.dx-colophon b{color:var(--ink-2);font-weight:600}

/* ---------- the counted facts ----------
   Numbers do the selling that a feature grid would otherwise do badly. */
.dx-count{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.dx-count-in{display:grid;grid-template-columns:repeat(6,1fr);
  border-bottom:1px solid var(--line)}
.dx-count-i{padding:30px 18px 26px;border-left:1px solid var(--line)}
.dx-count-i:first-child{border-left:0;padding-left:0}
.dx-count-n{font-family:var(--display);font-size:clamp(34px,3.6vw,50px);
  line-height:1;color:var(--ink);display:block}
.dx-count-l{font-size:12.5px;line-height:1.4;color:var(--muted);display:block;margin-top:7px}

/* ---------- body grid ---------- */
.dx-body{max-width:var(--wrap);margin:0 auto;padding:0 24px 90px;
  display:grid;grid-template-columns:216px minmax(0,1fr);gap:70px;align-items:start}

/* Contents rail. Sticky, numbered, hairline-ruled — a book's contents page,
   not a shaded sidebar panel. */
.dx-toc{position:sticky;top:92px;align-self:start}
.dx-toc-h{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.dx-toc a{display:grid;grid-template-columns:26px 1fr;gap:6px;
  padding:7px 0;font-size:14px;line-height:1.35;color:var(--body);text-decoration:none;
  border-bottom:1px solid var(--line)}
.dx-toc a span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.dx-toc a:hover{color:var(--ink)}
.dx-toc a.on{color:var(--accent)}
.dx-toc a.on span{color:var(--accent)}

/* ---------- chapters ---------- */
.dx-ch{padding:58px 0 4px;border-top:1px solid var(--line-2);scroll-margin-top:88px}
.dx-ch:first-child{border-top:0;padding-top:40px}
.dx-ch-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:baseline;
  margin:0 0 22px}
.dx-n{font-family:var(--display);font-size:clamp(38px,4.6vw,62px);line-height:.78;
  color:var(--accent);font-variant-numeric:tabular-nums}
.dx-ch-h h2{font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(28px,3.4vw,44px);line-height:1.02;letter-spacing:-.02em}
.dx-ch p{max-width:68ch;margin:0 0 15px}
.dx-ch h3{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink);
  letter-spacing:.005em;margin:30px 0 10px}
.dx-ch ul{max-width:68ch;margin:0 0 15px;padding-left:19px}
.dx-ch li{margin:0 0 7px}
.dx-ch b{color:var(--ink-2);font-weight:600}
.dx-lead{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:60ch}

/* Control reference. A definition list ruled like a spec sheet — the control
   on the left, what it actually does on the right. Never a card. */
.dx-dl{display:grid;grid-template-columns:212px minmax(0,1fr);
  margin:18px 0 22px;border-top:1px solid var(--line)}
.dx-dl dt{grid-column:1;font-weight:600;color:var(--ink);font-size:14.5px;
  padding:13px 22px 13px 0;border-bottom:1px solid var(--line)}
.dx-dl dd{grid-column:2;margin:0;padding:13px 0;font-size:15.5px;
  border-bottom:1px solid var(--line)}
.dx-dl dd b{font-weight:600}

/* Callout: a rule and a shift of ground, no rounded box, no icon. */
.dx-note{border-left:3px solid var(--accent);background:var(--paper-2);
  padding:16px 20px;margin:20px 0;max-width:66ch;font-size:15.5px;line-height:1.55}
.dx-note b{color:var(--ink)}
.dx-note.warn{border-left-color:var(--ink)}

/* Theme comparison — three columns, but ruled and typographic rather than
   three shaded boxes. Each is a specimen, not a feature card. */
.dx-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line-2);margin:22px 0 26px}
.dx-theme{padding:22px 24px 24px;border-left:1px solid var(--line)}
.dx-theme:first-child{border-left:0;padding-left:0}
.dx-theme h3{font-family:var(--display);font-weight:400;font-size:29px;
  color:var(--ink);margin:0 0 10px;letter-spacing:-.015em}
.dx-theme p{font-size:14.5px;line-height:1.5;margin:0}

/* Palette specimens. The colours themselves are the list — a swatch over its
   name, ruled to a grid, rather than twelve labelled chips. */
.dx-pal{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);
  gap:16px 12px;margin:20px 0 24px;padding:0;max-width:660px}
.dx-pal li{font-size:12.5px;line-height:1.3;color:var(--muted)}
.dx-pal i{display:block;height:40px;margin-bottom:7px;border:1px solid rgba(0,0,0,.12)}

/* FAQ — native details, hairline ruled, no chevron graphics. */
.dx-faq{margin:16px 0 0;max-width:74ch;border-top:1px solid var(--line)}
.dx-faq details{border-bottom:1px solid var(--line)}
.dx-faq summary{cursor:pointer;list-style:none;padding:15px 34px 15px 0;position:relative;
  font-weight:600;color:var(--ink);font-size:15.5px}
.dx-faq summary::-webkit-details-marker{display:none}
.dx-faq summary::after{content:"+";position:absolute;right:4px;top:12px;
  font-family:var(--display);font-size:24px;color:var(--accent);line-height:1}
.dx-faq details[open] summary::after{content:"–"}
.dx-faq .a{padding:0 0 18px;font-size:15.5px;line-height:1.6;max-width:66ch}
.dx-faq .a p{margin:0 0 11px}
.dx-faq .a p:last-child{margin:0}

/* Closing band — the one dark moment on the page, matching the app's ground. */
.dx-end{background:#1d1613;color:#cdc5bf;margin-top:24px}
.dx-end-in{max-width:var(--wrap);margin:0 auto;padding:64px 24px 68px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.dx-end h2{font-family:var(--display);font-weight:400;color:#fff;
  font-size:clamp(30px,3.8vw,50px);line-height:1.03;letter-spacing:-.02em;margin:0 0 10px}
.dx-end h2 em{font-style:italic;color:#e0384a}
.dx-end p{margin:0;max-width:52ch;font-size:16px}
.dx-end .btn{white-space:nowrap}

/* ---------- tablet ---------- */
@media (max-width:1000px){
  .dx-mast-in{grid-template-columns:1fr;gap:32px;padding:60px 24px 44px}
  .dx-colophon{max-width:420px}
  .dx-count-in{grid-template-columns:repeat(3,1fr)}
  .dx-count-i{border-top:1px solid var(--line)}
  .dx-count-i:nth-child(-n+3){border-top:0}
  .dx-count-i:nth-child(4){border-left:0;padding-left:0}
  .dx-body{grid-template-columns:1fr;gap:0}
  .dx-themes{grid-template-columns:1fr}
  .dx-theme{border-left:0;padding:20px 0;border-top:1px solid var(--line)}
  .dx-theme:first-child{border-top:0}

  /* The contents rail becomes a sticky chapter strip that scrolls sideways —
     recomposed for the top of the screen rather than stacked into the flow. */
  .dx-toc{position:sticky;top:66px;z-index:5;background:var(--paper);
    margin:0 -24px;padding:10px 24px 0;border-bottom:1px solid var(--line-2);
    overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dx-toc-h{display:none}
  .dx-toc-in{display:flex;gap:0;min-width:max-content}
  .dx-toc a{display:flex;align-items:baseline;gap:7px;border-bottom:2px solid transparent;
    padding:9px 16px;white-space:nowrap}
  .dx-toc a:first-child{padding-left:0}
  .dx-toc a.on{border-bottom-color:var(--accent)}
}

/* ---------- phone ---------- */
@media (max-width:620px){
  .dx-mast-in{padding:44px 20px 34px}
  .dx-pal{grid-template-columns:repeat(3,1fr)}
  .dx-count-in{grid-template-columns:repeat(2,1fr)}
  .dx-count-i:nth-child(-n+3){border-top:1px solid var(--line)}
  .dx-count-i:nth-child(-n+2){border-top:0}
  .dx-count-i:nth-child(odd){border-left:0;padding-left:0}
  .dx-ch{padding-top:44px}
  .dx-ch-h{grid-template-columns:1fr;gap:2px}
  .dx-n{font-size:34px;line-height:1}
  /* dt/dd carry explicit grid-column in the base rule; without resetting both
     to column 1 the single-column track is joined by an implicit second one and
     the terms collapse to ~38px. */
  .dx-dl{grid-template-columns:minmax(0,1fr);border-top:0}
  .dx-dl dt{grid-column:1;border-bottom:0;padding:14px 0 2px;border-top:1px solid var(--line)}
  .dx-dl dd{grid-column:1;padding:0 0 14px;border-bottom:0}
  .dx-end-in{grid-template-columns:1fr;padding:48px 20px 52px}
}

@media (prefers-reduced-motion:reduce){
  .dx-toc a,.dx-faq summary{transition:none}
}

@media print{
  .dx-toc,.dx-end,.cta-bar{display:none!important}
  .dx-body{grid-template-columns:1fr}
  .dx-ch{page-break-inside:auto}
  .dx-ch-h{page-break-after:avoid}
}