/* NAMCHE documents: invoice, offer, doc (A4) and deck (16:9), sites/documents/, with the DocBlocks and Slide components.
   Tokens only. On screen the sheets sit on the second GAIA tone; in print each sheet or slide is one page. A4 sheets take
   the page ground and the GAIA ink, the deck takes the DS deck surfaces (white and black, "for the deck only"). One line
   strength everywhere: the hairline (--rule). No muted text: every line takes the ink of its ground. */
@page{size:A4;margin:0}
@page deck{size:A4 landscape;margin:0}

/* the production bar and the grid overlay are tooling of the brand pages: a template page (main.docs) has none; the skip
   link stays, off screen until focused (the same rule as site.css, which a template page does not load). The Documents
   overview is a brand page and keeps them. */
body:has(> .docs) :is(.prodbar,.gridlines){display:none}
body:has(> .docs) .skip{position:absolute;top:0;clip-path:inset(50%)}
body:has(> .docs) .skip:focus{clip-path:none;z-index:30;padding:var(--space-8) var(--space-16);background:var(--surface-page);color:var(--text-primary)}

.docs{margin:0;padding:var(--space-64) var(--gutter);background:var(--family-gaia-rotation-2);color:var(--text-primary);display:grid;justify-items:center;gap:var(--space-64);min-width:0}
.docs__pages{display:grid;justify-items:center;gap:var(--space-64);width:100%;min-width:0}
.docview{display:flex;gap:var(--space-8)}
.docview__opt{padding:0 var(--space-16);border:var(--rule);border-radius:var(--radius-pill);background:none;color:inherit;font:var(--role-label-caption);line-height:var(--space-32);text-transform:var(--role-label-case);cursor:pointer}
.docview__opt:hover{background:var(--surface-page)}
.docview__opt[aria-pressed="true"],.docview__opt[aria-pressed="true"]:hover{background:var(--text-primary);color:var(--surface-page)}
.docview__opt:focus-visible{outline:var(--space-2) solid var(--focus-ring);outline-offset:var(--space-4)}
.meta{margin:0;font:var(--role-label-caption);text-transform:var(--role-label-case)}
.doc-label{display:flex;align-items:center;gap:var(--space-8)}
.doc-sq,.doc-dot{flex:none;width:var(--bullet-square-sm);height:var(--bullet-square-sm);background:currentColor}
.doc-dot{border-radius:50%}
:is(.docs,.doc-frame) strong{font-weight:var(--weight-display)}

/* A4 sheet */
.sheet{box-sizing:border-box;width:100%;max-width:calc(var(--grid-x) * 6);aspect-ratio:210 / 297;padding:var(--space-64);display:flex;flex-direction:column;gap:var(--space-16);background:var(--surface-page);color:var(--text-primary);font:var(--role-text-small);overflow:hidden}
.sheet p{margin:0}
/* two line strengths, as in the originals: the stroke (1px) closes the masthead and a table or a block of layers, the
   hairline divides the rows inside */
.sheet__mast{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-16);padding-bottom:var(--space-8);margin-bottom:var(--space-16);border-bottom:var(--stroke) solid currentColor}
.sheet__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);padding-top:var(--space-8);margin-top:var(--space-16);border-top:var(--rule)}
.sheet__end{margin-top:auto}
.sheet__title{margin:0;font:var(--role-headline-title)}
.sheet__h{margin:var(--space-16) 0 0;font:var(--role-text-lede)}
.sheet__head{display:grid;gap:var(--space-8)}
.sheet__lede{font:var(--role-text-body)}
.parties{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-32)}
.parties .meta{margin-bottom:var(--space-8)}
.sign{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-32);padding-top:var(--space-64)}
.sign p{padding-top:var(--space-8);border-top:var(--rule)}

/* the running document, before it is packed into pages: one long sheet; the frame table repeats head and foot
   on every printed page. Once js/doc-pages.js has run, the whitepaper is .sheet--page sheets, one layout. */
.sheet--flow{aspect-ratio:auto;padding:var(--space-32) var(--space-64)}
.sheet--page{width:calc(var(--grid-x) * 6);max-width:none}
.sheet--page>.sheet__foot{margin-top:0}
.sheet__body{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--space-16);overflow:hidden}
.sheet__body>.sheet__h{margin:0}
.frame{width:100%;border-collapse:collapse}
.frame td{padding:0}
.frame__body{display:flex;flex-direction:column;gap:var(--space-16)}
.db-section{display:flex;flex-direction:column;gap:var(--space-16);margin-top:var(--space-16)}

/* tables: amounts in Sans with tabular figures, right aligned */
.tab{width:100%;border-collapse:collapse;border-top:var(--stroke) solid currentColor;border-bottom:var(--stroke) solid currentColor}
.tab th{text-align:start;font:var(--role-label-caption);text-transform:var(--role-label-case);padding:var(--space-8) var(--space-16) var(--space-8) 0;border-bottom:var(--stroke) solid currentColor;vertical-align:top}
.tab td{vertical-align:top;padding:var(--space-8) var(--space-16) var(--space-8) 0}
.tab tbody tr+tr td,.tab tbody tr+tr th{border-top:var(--rule)}
.tab td:last-child,.tab th:last-child{padding-right:0}
.tab .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.inv tfoot th,.inv tfoot td{border-top:var(--rule);border-bottom:0}
.inv__due th,.inv__due td{font:var(--role-text-lede);text-transform:none}

/* DocBlocks */
.db-note{font:var(--role-label-caption)}
.db-ul{margin:0;padding-left:var(--space-16);display:grid;gap:var(--space-4)}
.db-ul li{list-style:square;padding-left:var(--space-4)}
.db-layers{display:grid;border-top:var(--stroke) solid currentColor;border-bottom:var(--stroke) solid currentColor}
.db-layer{display:grid;gap:var(--space-4);padding:var(--space-16) 0;break-inside:avoid}
.db-layer+.db-layer{border-top:var(--rule)}
.db-layer h3{margin:0;font:var(--role-text-body)}
.db-steps td:first-child{width:var(--space-32)}
.db-facts th{width:33%}
.db-callout{display:grid;gap:var(--space-8);padding:var(--space-16) var(--space-32);background:var(--family-gaia-rotation-2);color:var(--family-gaia-rotation-2-ink);break-inside:avoid}
.db-stats{display:flex;flex-wrap:wrap;gap:var(--space-32);padding-top:var(--space-16);border-top:var(--stroke) solid currentColor}
.db-stats>div{display:grid;gap:var(--space-4)}
.db-stat{font:var(--role-number-title)}

/* deck: the slides stand on the stage of libraries/Slide (css/slides.css: 1920 by 1080, scaled to the frame). These are
   the parts of a slide body (DeckSlide), drawn at the stage's size with its five voices. */
.docs--deck{gap:var(--space-32)}
.dk-page{width:100%;max-width:calc(var(--grid-x) * 10)}
.dk-lede{max-width:calc(var(--grid-x) * 11)}
/* a deck slide carries more parts than a master: the parts stand 32 apart instead of 64 */
:is(.dk-page,.doc-thumb) .slide__body{gap:var(--space-32);padding-top:var(--space-32)}
:is(.dk-page,.doc-thumb) .sl-stack{gap:var(--space-16)}
:is(.dk-page,.doc-thumb) .slide__body>.cta{align-self:flex-start}
.dk-draft{justify-self:start;padding:var(--space-4) var(--space-16);border:var(--rule);border-radius:var(--radius-pill)}
.dk-stats{display:flex;flex-wrap:wrap;gap:var(--space-32) var(--space-64)}
.dk-stats>div{display:grid;gap:var(--space-16);align-content:start;max-width:calc(var(--grid-x) * 6)}
.dk-stat{margin:0;font:var(--role-headline-hero)}
.dk-stats--small{gap:var(--space-16) var(--space-64)}
.dk-stats--small>div{gap:var(--space-4)}
.dk-cols{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--space-32)}
.dk-cols--flow{display:flex;align-items:stretch}
.dk-cols--flow .dk-col{flex:1}
.dk-arrow{align-self:center;font:var(--role-headline-title)}
.dk-col{display:grid;gap:var(--space-8);align-content:start;padding-top:calc(var(--space-16) - var(--hairline));border-top:var(--rule)}
.dk-col--strong,.dk-field{padding:var(--space-16) var(--space-32) var(--space-32);border-top:0}
/* the ink field (the part the slide is about, as in the Cards master) and the family tones of a card or a ratio part:
   one family per slide, the ink of each tone chosen by contrast (--family-*-rotation-n-ink) */
.dk-col--strong{background:var(--text-primary);color:var(--surface-page)}
.dk-tone--okeanos-1{background:var(--family-okeanos-rotation-1);color:var(--family-okeanos-rotation-1-ink)}
.dk-tone--okeanos-2{background:var(--family-okeanos-rotation-2);color:var(--family-okeanos-rotation-2-ink)}
.dk-tone--okeanos-3{background:var(--family-okeanos-rotation-3);color:var(--family-okeanos-rotation-3-ink)}
.dk-tone--helios-1{background:var(--family-helios-rotation-1);color:var(--family-helios-rotation-1-ink)}
.dk-tone--helios-2{background:var(--family-helios-rotation-2);color:var(--family-helios-rotation-2-ink)}
.dk-tone--helios-3{background:var(--family-helios-rotation-3);color:var(--family-helios-rotation-3-ink)}
.dk-tone--helios-4{background:var(--family-helios-rotation-4);color:var(--family-helios-rotation-4-ink)}
/* the ratio bar: the parts share the width by their value (70 and 30 take 70 % and 30 %) */
.dk-ratio{display:flex;gap:var(--space-8)}
.dk-ratio__part{flex-basis:0;min-width:0;display:grid;gap:var(--space-16);align-content:space-between;min-height:calc(var(--grid-x) * 1.5)}
.dk-split{grid-template-columns:1fr 1fr;column-gap:var(--space-64)}
.dk-tags{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-16)}
.dk-tags li{padding:var(--space-8) var(--space-32);border:var(--rule);border-radius:var(--radius-pill)}
.dk-tags li.is-on{background:var(--text-primary);color:var(--surface-page)}
.dk-band{display:grid;gap:var(--space-8);padding:var(--space-16) 0;border-top:var(--rule);border-bottom:var(--rule)}
.dk-mock{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-32)}
.dk-mock__main,.dk-mock__panel{display:grid;align-content:start;gap:var(--space-16);padding:var(--space-32);border:var(--rule)}
.dk-mock__bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-32);margin:calc(var(--space-32) * -1) calc(var(--space-32) * -1) 0;padding:var(--space-16) var(--space-32);background:var(--text-primary);color:var(--surface-page)}
.dk-mock__bar .dk-tags li.is-on{background:var(--surface-page);color:var(--text-primary)}
.dk-tab{width:100%;border-collapse:collapse;font:var(--role-label-nav)}
.dk-tab th{text-align:start;font:var(--role-label-nav);text-transform:var(--role-label-case);padding:var(--space-8) var(--space-16) var(--space-8) 0;border-bottom:var(--rule)}
.dk-tab td{padding:var(--space-8) var(--space-16) var(--space-8) 0;border-bottom:var(--rule)}
.dk-tab .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.dk-small{margin:0;font:var(--role-label-nav)}

/* the Documents overview: the deck as a slider of small slides, the sheets small on the page.
   No inner scrollbar: the invoice and the whitepaper sit in full and the page scrolls. The offer
   runs sideways, like the slider, and its bar is hidden. */
:is(.doc-thumb,.master-thumb).slider__slide{flex:0 0 var(--span-6);display:block;color:inherit;text-decoration:none}
:is(.doc-thumb,.master-thumb):focus-visible{outline:var(--stroke-bold) solid var(--hook);outline-offset:var(--space-4)}
.doc-frame{display:grid;justify-items:center;gap:var(--space-32);padding:var(--space-32);background:var(--family-gaia-rotation-2);color:var(--text-primary)}
.doc-frame--row{grid-auto-flow:column;justify-content:start;align-items:start;overflow-x:auto;scrollbar-width:none}
.doc-frame--row::-webkit-scrollbar{display:none}
.doc-frame .sheet{zoom:0.75}
.doc-frame--row .sheet{zoom:0.5;width:calc(var(--grid-x) * 6)}
.doc-frame:focus-visible{outline:var(--stroke-bold) solid var(--hook);outline-offset:var(--space-4)}
.doc-open{margin:var(--space-16) 0 0}
.doc-scope{display:grid;justify-items:center;gap:var(--space-16)}
.doc-scope>.docview{justify-self:start}
.doc-scope>.doc-frame,.doc-scope>.slider{width:100%}

@media screen and (max-width:900px){
  /* the overview previews stay the sheet, scaled to the column: one layout, only smaller. A slide scales itself. */
  :is(.doc-thumb,.master-thumb).slider__slide{flex-basis:100%}
  .doc-frame{container-type:inline-size;padding:var(--space-16)}
  .doc-frame .sheet{--sheet-w:calc(var(--grid-x) * 6);width:var(--sheet-w);zoom:min(1,tan(atan2(100cqw,var(--sheet-w))))}
}
@media screen and (max-width:600px){
  .docs :is(.parties,.sign){grid-template-columns:1fr}
  .docs .sheet:not(.sheet--page){aspect-ratio:auto;padding:var(--space-32)}
}

@media print{
  .docview{display:none}
  .docs{padding:0;gap:0;background:none;display:block}
  .docs__pages{display:block;gap:0}
  .sheet{max-width:none;break-after:page}
  .sheet--page{width:min(210mm,calc(var(--grid-x) * 6));max-width:none;margin-inline:auto}
  .sheet--flow{padding:0 var(--space-64)}
  .frame thead td{padding-top:var(--space-32)}
  .frame tfoot td{padding-bottom:var(--space-32)}
  .dk-page{page:deck;max-width:none;break-after:page}
}

/* paper: selene (the page ground) or white, black on white: the fallback for print and for anyone who wants plain paper.
   The wrapper does not box; it only re-points the ground and the ink of the sheets inside. ?paper=white switches it on a
   template page (js/paper.js). */
.doc-paper{display:contents}
.doc-paper--white .sheet{--surface-page:var(--namche-white);--text-primary:var(--namche-black)}
.doc-paper--white .db-callout{background:none;color:var(--text-primary);border:var(--stroke) solid currentColor}
/* the print fallback on the page: white paper, true A4, the deck at landscape width. The overview
   previews only change paper; their frames already keep the page's layout. */
[data-docscope="print"] .doc-paper .sheet{--surface-page:var(--namche-white);--text-primary:var(--namche-black)}
[data-docscope="print"] .doc-paper .db-callout{background:none;color:var(--text-primary);border:var(--stroke) solid currentColor}
[data-docscope="print"].docs .sheet{width:210mm;max-width:none;aspect-ratio:210 / 297;padding:var(--space-64)}
[data-docscope="print"].docs :is(.parties,.sign){grid-template-columns:1fr 1fr}
[data-docscope="print"].docs--deck .dk-page{max-width:297mm}
[data-docscope="print"]>.slider .slider__slide{flex-basis:297mm}
@media print{ /* print is always white paper; the screen keeps the paper it was given */
  .doc-paper .sheet{--surface-page:var(--namche-white);--text-primary:var(--namche-black)}
  .doc-paper .db-callout{background:none;color:var(--text-primary);border:var(--stroke) solid currentColor}
}