/* ─────────────────────────────────────────────────────────────────────────────
   A1 MANUAL PAGE — the production stylesheet.

   The screen version of the A1 manual and nothing else: phone, tablet, desktop.
   No printed sheet, no constructor, no specimen / capture modes. Taken rule for
   rule from the Manual project (a1-manual.html, the ribbon; manual-kit.css, the
   components) on 2026-10-17, with everything the screen never uses left out.
   The selectors keep `[data-media="screen"]` where Manual had it — the page
   carries it on <html> — so the cascade is exactly what it was there.

   Requires the kit (synced into assets/ui-kit by ../ui-kit/sync.mjs):
   tokens.css · number.css · hotspot.css · header.css — loaded before this file.

   Breakpoints (docs/DESIGN.md): 360 · 6 cols / 768 · 8 / 1024 · 12 / 1440 / 1920 · 20.
   ───────────────────────────────────────────────────────────────────────────── */

/* ══════════════ TOKENS ══════════════ */
:root{
  --u:1px;                               /* one mock-up unit = 1 px on screen */
  /* the mock-up library's colours, named as in Figma */
  --m-ink     : #010006;
  --m-paper   : #FDFEFF;
  --m-grey-20 : #E9EEF6;
  --m-ink-2   : #6B7070;
  /* the page */
  --paper      : var(--white);
  --paper-sunk : var(--black-50);
  --ink        : var(--black);
  --ink-2      : var(--black-350);
  --ink-3      : var(--black-250);
  --rule       : var(--black-150);
  --rule-soft  : var(--black-100);
  /* what the kit does not have yet — built from kit values */
  --hairline      : 1px;
  --r-bar-h       : var(--space-80);
  --r-frost-paper : rgba(252, 255, 254, .72);
  --r-paper-0     : rgba(252, 255, 254, 0);
  --r-lift        : 0 var(--space-2) var(--space-8) rgba(17, 18, 17, .16);
  --r-dur         : .2s;
  --r-acc-dur     : .3s;
  --r-ease        : cubic-bezier(.2, 0, 0, 1);
  --r-num-active  : 1.6;
  --lh-tight      : 1.2;
  --lh-snug       : 1.3;
  --lh-body       : 1.4;
  --fw-medium     : 500;
  --fw-semibold   : 600;
  --reveal-rise:var(--space-16);--reveal-dur:.5s;--reveal-step:60ms;--reveal-ease:cubic-bezier(.2, .7, .2, 1);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font-primary);font-size:var(--text-13);line-height:1.4;-webkit-font-smoothing:antialiased}

/* ══════════════ COMPONENTS (from Manual's manual-kit.css, 2026-10-17) ══════════════ */

/* ── TYPE ── */
.m-title, .m-label{margin:0;font-family:var(--font-primary);font-weight:500;font-style:normal;color:var(--m-ink);font-feature-settings:"lnum" 1, "pnum" 1}
.m-title{font-size:calc(36.955 * var(--u));line-height:1.12}
.m-label{font-size:calc(16 * var(--u));line-height:1.46}

/* ── ITEM — one thing in the box ── */
.m-item{display:flex;flex-direction:column;align-items:center;gap:calc(8 * var(--u));margin:0}
.m-item-art{position:relative;width:100%;aspect-ratio:1;border-radius:calc(12 * var(--u));background:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.m-item-art > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.m-item > .m-label{text-align:center}
/* the name under a missing picture; a loaded picture replaces it */
.m-ph{padding:calc(8 * var(--u));text-align:center;font-family:var(--font-primary);font-weight:500;font-size:calc(12 * var(--u));line-height:1.3;color:var(--m-ink-2)}
.m-item-art:has(> img) > .m-ph{display:none}

/* ── TEXT ── */
.m-text{margin:0;font-family:var(--font-primary);font-weight:500;color:var(--m-ink);font-size:calc(14 * var(--u));line-height:1.5}

/* ── SPEC — one figure of the specifications ── */
.m-spec{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--u));text-align:center;margin:0;font-family:var(--font-primary);font-weight:500}
.m-spec-icon{display:block;width:calc(32 * var(--u));height:calc(32 * var(--u));border-radius:calc(8 * var(--u));background:var(--m-grey-20)}
.m-spec-icon > img{display:block;width:100%;height:100%}
.m-spec-value{font-size:calc(12 * var(--u));line-height:1.54;color:var(--m-ink);font-feature-settings:"lnum" 1, "pnum" 1}
.m-spec-what{font-size:calc(8 * var(--u));line-height:1.3;color:var(--m-ink-2)}

/* ── FAULTS TABLE — Troubleshooting (768+) ── */
.m-faults{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-family:var(--font-primary);font-size:var(--text-16);line-height:var(--lh-body);color:var(--m-ink)}
.m-faults{--f1:2;--f2:3;--f-col:var(--col, 8%);--f-gg:var(--gg, var(--space-8))}
@media (min-width:1920px){ .m-faults{--f1:4;--f2:5} }
.m-faults th, .m-faults td{text-align:left;vertical-align:top;padding:var(--space-12) var(--f-gg) var(--space-12) 0;font-weight:var(--fw-medium)}
.m-faults thead th:nth-child(1){width:calc(var(--f1) * (var(--f-col) + var(--f-gg)))}
.m-faults thead th:nth-child(2){width:calc(var(--f2) * (var(--f-col) + var(--f-gg)))}
.m-faults td.m-fault-cause, .m-faults thead th:nth-child(2){padding-right:calc(var(--f-gg) + var(--f-col) / 2)}
.m-faults td.m-fault-fix, .m-faults thead th:nth-child(3){padding-right:calc(var(--f-col) / 2)}
.m-faults thead th{position:sticky;top:0;z-index:1;font-weight:var(--fw-semibold);background:var(--m-paper);box-shadow:inset 0 calc(var(--space-2) * -1) 0 var(--m-ink)}
@media (min-width:1024px){ .m-faults thead th{top:calc(var(--r-bar-h) + env(safe-area-inset-top))} }
.m-faults tbody th{font-weight:var(--fw-semibold)}
.m-faults tbody td{border-top:var(--hairline) solid var(--black-100)}
.m-faults tbody tr.is-first th, .m-faults tbody tr.is-first td{border-top:var(--hairline) solid var(--black-150)}
.m-faults tbody tr:first-child th, .m-faults tbody tr:first-child td{border-top:0}
.m-faults td.m-fault-fix{color:var(--black-350)}
/* ── FAULTS LIST — the phone's form of the table ── */
.m-faultlist{display:none;font-family:var(--font-primary);color:var(--m-ink)}
@media (max-width:767px){ .m-faults{display:none} .m-faultlist{display:block} }
.m-fault{border-top:var(--hairline) solid var(--black-150)}
.m-fault:first-child{border-top:var(--space-2) solid var(--m-ink)}
.m-fault > summary{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) 0;cursor:pointer;list-style:none}
.m-fault > summary::-webkit-details-marker{display:none}
.m-fault-t{flex:1 1 auto;font-size:var(--text-16);font-weight:var(--fw-semibold);line-height:var(--lh-body)}
.m-fault-chev{flex:0 0 auto;width:var(--space-8);height:var(--space-8);margin-right:var(--space-4);border-right:var(--space-2) solid currentColor;border-bottom:var(--space-2) solid currentColor;transform:rotate(-45deg);transition:transform var(--r-dur) var(--r-ease)}
.m-fault[open] > summary .m-fault-chev{transform:rotate(45deg)}
.m-fault ol{list-style:none;margin:0;padding:0}
.m-fault li{padding:var(--space-12) 0;border-top:var(--hairline) solid var(--black-100)}
.m-fault li p{margin:0;font-size:var(--text-16);line-height:var(--lh-body);font-weight:var(--fw-medium)}
.m-faultlist .m-fault-fix{margin-top:var(--space-4);color:var(--black-350)}

/* ── CARD · CAPTION · PAGE ──
   A card is its art (exported from Figma with no number, caption, marks, rule or
   corner) with the number, caption and marks set over it and the frame drawn
   here. `.m-page` is one printed page of cards: a phone stacks them, from 768
   they stand as on the printed page. */
.m-pages{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--space-12)}
.m-page{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--space-12)}
.m-card{--m-card-in:var(--space-12);--num-size:var(--space-40);position:relative;margin:0;min-width:0;aspect-ratio:var(--w) / var(--h);container-type:inline-size}
.m-card{--m-card-rule:1.5px;--m-card-r:var(--radius-16);overflow:hidden;border-radius:var(--m-card-r)}
@media (min-width:768px){ .m-card{--m-card-rule:2px} }
@media (min-width:1600px){ .m-card{--m-card-rule:2.5px} }
.m-card-art{--bleed:calc(2 * 100cqw / var(--w) - var(--m-card-rule));position:absolute;left:calc(var(--bleed) * -1);top:calc(var(--bleed) * -1);
  width:calc(100% + 2 * var(--bleed));height:calc(100% + 2 * var(--bleed));max-width:none;display:block;object-fit:cover;background:var(--m-grey-20)}
.m-card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 0 var(--m-card-rule) var(--m-ink);border-radius:inherit}
.m-card > .num{--num-size:var(--space-40);position:absolute;z-index:2;left:var(--m-card-in);top:var(--m-card-in)}
.m-card > .m-cap{position:absolute;z-index:2;left:var(--m-card-in);bottom:var(--m-card-in);max-width:calc(100% - 2 * var(--m-card-in))}
.m-cap{--cap-ink:var(--m-ink);--cap-paper:var(--m-paper);display:inline-flex;align-items:center;gap:var(--space-8);margin:0;
  min-height:var(--space-24);padding:var(--space-4) var(--space-8);border-radius:var(--radius-12);background:var(--cap-paper);color:var(--cap-ink);
  font-family:var(--font-primary);font-weight:var(--fw-medium);font-size:var(--text-14);line-height:var(--lh-tight);font-feature-settings:"lnum" 1, "pnum" 1}
.m-cap[data-mode="black"]{--cap-ink:var(--m-paper);--cap-paper:var(--m-ink)}
.m-cap-i{flex:none;width:var(--space-16);height:var(--space-16);margin-left:calc(var(--space-4) * -1)}
.m-cap-i-in{fill:var(--cap-paper)}
@media (min-width:768px){
  .m-pages{gap:var(--space-24)}
  .m-page{container-type:inline-size;display:block;position:relative;aspect-ratio:var(--pw) / var(--ph)}
  .m-page > .m-card{position:absolute;aspect-ratio:auto;
    left:calc(var(--x) / var(--pw) * 100%);top:calc(var(--y) / var(--ph) * 100%);
    width:calc(var(--w) / var(--pw) * 100%);height:calc(var(--h) / var(--ph) * 100%)}
}
@media (min-width:1440px){
  .m-card{--m-card-in:var(--space-16);--num-size:var(--space-40)}
  .m-cap{min-height:var(--space-32);padding:var(--space-4) var(--space-12);border-radius:var(--radius-16);font-size:var(--text-16)}
  .m-cap-i{width:var(--space-24);height:var(--space-24);margin-left:calc(var(--space-8) * -1)}
}

/* ── MARK · ok / error ── one size everywhere, the step number's */
.m-mark{position:absolute;z-index:2;width:var(--space-40);height:var(--space-40);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:#34AB62 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath transform='translate(7.35 8.78)' fill='white' d='M 19.62457863815853 0.0610019738697246 L 26.000000000000004 3.494689350502867 L 25.505191177886932 3.7149168154901777 C 15.125391189323896 8.33684219029044 9.816649718139027 17.726241048559544 8.466339208321296 21.820612839552588 L 8.40724260810941 22 L 5.308677646152365 22 L 5.236559761148031 21.93693016260927 L 0.10817682750650102 17.4372591408967 L 0 17.34213741893035 L 0.021034383126264086 17.196870006579566 L 1.1283444091303092 9.4790863802989 L 6.141038235577387 15.470203966538207 C 9.255575595324089 10.427225027757542 12.083269564733218 6.823506109046022 14.365482037946645 4.361124165805057 C 16.68719389190865 1.856123585687095 18.456340771498486 0.518604684810529 19.395704516998943 0.05686624682770937 L 19.51089280554753 0 L 19.62457863815853 0.0610019738697246 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat}
.m-mark[data-corner]{left:auto;top:var(--m-card-in);right:var(--m-card-in);transform:none}
.m-mark[data-mark="error"]{background:#FF001E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath transform='translate(6.2 7.9)' fill='white' d='M 27 4.247699079631853 L 26.63603606899201 4.388755502200881 C 23.173527804300686 5.7318919999640485 19.753294909335963 8.128763956754575 16.641596400417026 10.891356542617046 C 16.724535391097984 10.980675190913768 16.80714275283427 11.06992596385478 16.889012858266423 11.159463785514205 C 20.10060916687339 14.671862641540992 22.502395639651027 18.352047361913517 23.73420152543303 20.675270108043218 L 23.80926599967077 20.816826730692277 L 21.486218060102793 24.052120848339335 L 21.282753827300496 23.76200480192077 C 18.82259631982423 20.257889777004554 15.817056449181385 17.18661341489721 12.80392515501253 14.61984793917567 C 9.216919907621222 18.406091684720764 6.346376053422165 22.28666002533826 4.76017412616831 24.776910764305722 L 4.617946701296801 25 L 1.6879629798986704 22.92266906762705 L 1.7980904651290401 22.72108843537415 C 4.139461557592985 18.426786241840485 6.673902984134079 14.78508151307398 9.170211987635579 11.751700680272108 C 5.619084065360758 9.152213619822929 2.3769334947951917 7.335801813401142 0.39853309677537363 6.432072829131653 L 0 6.25 L 5.014010571945933 2.58203281312525 L 5.139941104384248 2.628551420568227 C 7.998627609334704 3.6814574462597536 10.668539847851088 5.421130121970663 13.05874929124065 7.448979591836735 C 17.07183276915994 3.415190294867947 20.632350623072345 1.0277596145880228 22.645766648985788 0.07603041216486595 L 22.806266347191485 0 L 27 4.247699079631853 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat}

/* ── HOTSPOT · POP-UP ── the kit's `.hotspot` on a card; a tap opens `.m-pop` */
.m-hot{--m-hot-dx:10px;position:absolute;z-index:2;margin:calc(var(--hot-size) / -2) 0 0 calc(var(--hot-size) / -2 + var(--m-hot-dx))}
@media (max-width:767px){ .m-hot{--hot-size:var(--space-24)} }
@media (min-width:1440px){ .m-hot{--hot-size:var(--space-40)} }
.m-pop{box-sizing:border-box;width:min(22.5rem, calc(100vw - 2 * var(--space-16)));max-height:calc(100vh - 2 * var(--space-16));
  margin:auto;padding:var(--space-12);border:0;border-radius:var(--radius-24, 24px);overflow:auto;
  background:var(--m-paper);color:var(--m-ink);font-family:var(--font-primary);box-shadow:0 var(--space-16) var(--space-48) rgba(1, 0, 6, .24)}
.m-pop:focus{outline:none}
.m-pop::backdrop{background:rgba(1, 0, 6, .4)}
.m-pop[open]{animation:m-pop-in .25s cubic-bezier(.2, .7, .2, 1)}
@keyframes m-pop-in{from{opacity:0;transform:translateY(var(--space-16))}}
@media (prefers-reduced-motion: reduce){ .m-pop[open]{animation:none} }
.m-pop-art{display:flex;align-items:center;justify-content:center;aspect-ratio:4 / 3;padding:var(--space-24)}
.m-pop-art img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;object-fit:contain}
.m-pop-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-16);padding:var(--space-16) var(--space-8) var(--space-8)}
.m-pop-text{flex:1 1 auto;min-width:0}
.m-pop .btn[hidden]{display:none}
.m-pop-name{margin:0;font-size:var(--text-20, 20px);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.m-pop-desc{margin:var(--space-4) 0 0;font-size:var(--text-14);font-weight:var(--fw-medium);line-height:var(--lh-tight);opacity:.56}
.m-pop-desc:empty{display:none}
.m-pop-x{position:absolute;z-index:2;right:var(--space-12);top:var(--space-12);width:var(--space-40);height:var(--space-40);padding:0;
  border:0;border-radius:50%;background:var(--m-grey-20);color:var(--m-ink);cursor:pointer;transition:background .15s, color .15s, transform .08s}
.m-pop-x::before,.m-pop-x::after{content:'';position:absolute;left:50%;top:50%;width:var(--space-16);height:var(--space-2);
  margin:calc(var(--space-2) / -2) 0 0 calc(var(--space-16) / -2);background:currentColor;border-radius:1px;transform:rotate(45deg)}
.m-pop-x::after{transform:rotate(-45deg)}
.m-pop-x:active{transform:scale(.94)}
.m-pop-x:focus-visible{outline:var(--space-2) solid var(--m-ink);outline-offset:var(--space-2)}
@media (hover:hover){ .m-pop-x:hover{background:var(--m-ink);color:var(--m-paper)} }
@media (max-width:767px){
  .m-pop-art{aspect-ratio:1 / 1}
  .m-pop-text{min-height:calc(var(--text-20, 20px) * var(--lh-tight, 1.15) + var(--space-4) + var(--text-14) * var(--lh-tight, 1.15))}
}

/* ── STAGES ── Installation in parts: links at the top, a heading per part */
.m-stages{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:0 0 var(--space-24)}
.m-stages a{display:inline-flex;align-items:center;height:var(--space-32);padding:0 var(--space-12);
  border-radius:var(--radius-16);background:var(--m-grey-20);color:var(--m-ink);text-decoration:none;white-space:nowrap;
  font-family:var(--font-primary);font-size:var(--text-14);font-weight:var(--fw-semibold);line-height:1}
@media (hover:hover){ .m-stages a:hover{background:var(--m-ink);color:var(--m-paper)} }
.m-stage{scroll-margin-top:var(--space-16)}
.m-stage + .m-stage{margin-top:var(--space-32)}
.m-stage-title{margin:0 0 var(--space-12);font-family:var(--font-primary);font-size:var(--text-18, 18px);font-weight:var(--fw-semibold);line-height:var(--lh-tight);color:var(--m-ink)}
@media (min-width:1024px){
  .m-stage{scroll-margin-top:calc(var(--r-bar-h) + var(--space-24))}
  .m-stage + .m-stage{margin-top:var(--space-48)}
  .m-stage-title{font-size:var(--text-20, 20px);margin-bottom:var(--space-16)}
}

/* ── BUY ── the faucet a page offers (on paper: a QR code) */
.m-buy{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-8) var(--space-12) var(--space-8) var(--space-8);border-radius:var(--radius-16);
  background:var(--m-grey-20);font-family:var(--font-primary);color:var(--m-ink)}
.m-buy-art{flex:none;display:flex;align-items:center;justify-content:center;width:var(--space-64);height:var(--space-64);padding:var(--space-4)}
.m-buy-art img{max-width:100%;max-height:100%;display:block;object-fit:contain}
.m-buy-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.m-buy-name{font-size:var(--text-16);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.m-buy-kind{font-size:var(--text-14);font-weight:var(--fw-medium);line-height:var(--lh-tight);opacity:.56}
/* the kit's `.btn`, restated — this page does not load kit.css */
.m-buy .btn,.m-pop .btn{flex:none;display:flex;align-items:center;justify-content:center;gap:var(--space-8);
  width:auto;height:var(--number-48);padding:0 var(--space-24);border-radius:9999px;border:none;background:var(--m-ink);color:var(--m-paper);
  font-size:var(--text-13);font-weight:600;font-family:var(--font-primary);line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background .15s, color .15s, transform .08s}
.m-buy .btn:hover,.m-pop .btn:hover{background:var(--black-700)}
.m-buy .btn:active,.m-pop .btn:active{transform:scale(.98)}
.m-buy .btn:focus-visible,.m-pop .btn:focus-visible{outline:2px solid var(--m-ink);outline-offset:2px}
@media (min-width:768px){
  .m-buy{gap:var(--space-16);padding:var(--space-12) var(--space-16) var(--space-12) var(--space-12)}
  .m-buy-art{width:var(--space-80, 80px);height:var(--space-80, 80px)}
}

/* ── INDICATORS ── the four lights */
.m-ind{font-family:var(--font-primary);font-weight:var(--fw-medium);color:var(--m-ink);font-size:var(--text-16);line-height:var(--lh-body)}
.m-ind-row{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--space-8);padding:var(--space-12) 0;border-top:var(--hairline) solid var(--black-150)}
.m-ind-row.is-key{border-top:var(--space-2) solid var(--m-ink);border-bottom:var(--space-2) solid var(--m-ink)}
.m-ind-row.is-key + .m-ind-row{border-top:0}
.m-ind-row.is-key .m-ind-name{display:none}
.m-ind-row.is-key .m-ind-states{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-24)}
.m-ind-name{margin:0;font-size:inherit;line-height:inherit;font-weight:var(--fw-semibold)}
.m-ind-states{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--space-8)}
.m-ind-states li{display:flex;align-items:center;gap:var(--space-8);min-width:0}
.m-ind-lights{display:inline-flex;gap:var(--space-4);flex:none}
.m-light{--c:var(--m-ink);flex:none;width:var(--space-12);height:var(--space-12);border-radius:50%;background:var(--c)}
.m-light[data-c="blue"]{--c:#1C87FF}
.m-light[data-c="red"]{--c:#E8212B}
.m-light[data-m="flashing"], .m-light[data-m="breathing"]{width:calc(var(--space-12) + var(--space-2));height:calc(var(--space-12) + var(--space-2));
  background:radial-gradient(circle closest-side, var(--c) 0 46%, transparent 52%);border:calc(var(--hairline) * 1.5) dashed var(--c)}
.m-light[data-m="breathing"]{border-style:solid;background:radial-gradient(circle closest-side, color-mix(in srgb, var(--c) 45%, transparent) 0 46%, transparent 52%)}
@media (prefers-reduced-motion:no-preference){
  .m-light[data-m="flashing"]{animation:m-light-flash 1s steps(1, end) infinite}
  .m-light[data-m="breathing"]{animation:m-light-breathe 3s ease-in-out infinite}
}
@keyframes m-light-flash{ 0%{opacity:1} 50%{opacity:.25} }
@keyframes m-light-breathe{ 0%,100%{opacity:1} 50%{opacity:.35} }
@media (min-width:768px){
  .m-ind-row{grid-template-columns:minmax(0, 3fr) minmax(0, 9fr);gap:var(--gg, var(--space-8));align-items:start}
  .m-ind-row.is-key .m-ind-name{display:block}
  .m-ind-states, .m-ind-row.is-key .m-ind-states{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--space-8) var(--gg, var(--space-8))}
  .m-ind-row.is-alarm .m-ind-states{grid-template-columns:minmax(0, 1fr)}
}

/* ── REVEAL ── blocks rise and fade in as they are scrolled to (manual.js puts
   `has-reveal` on <html>; without the script nothing is hidden) */
.has-reveal .m-reveal{opacity:0;transform:translateY(var(--reveal-rise));
  transition:opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms), transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms);will-change:opacity, transform}
.has-reveal .m-reveal.is-in{opacity:1;transform:none;will-change:auto}
.has-reveal .m-card-art{opacity:0;transition:opacity .4s ease}
.has-reveal .m-card-art.is-loaded{opacity:1}
@media (prefers-reduced-motion: reduce){
  .has-reveal .m-reveal{opacity:1;transform:none;transition:none}
  .has-reveal .m-card-art{opacity:1;transition:none}
}

/* ══════════════ THE PAGE (from Manual's a1-manual.html, the ribbon, 2026-10-17) ══════════════ */

.ribbon{display:block;margin:0 auto;padding:var(--space-24) var(--space-16) var(--space-64);color:var(--m-ink)}
.ribbon .m-title{font-size:var(--text-32)}
.r-flow{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--space-48);margin-top:0}

/* the bar from 768: the Akvantis mark on the left margin, the sections in the
   middle (centred while they fit), the language on the right margin */
@media (min-width:768px){
  [data-media="screen"] .r-bar .header-nav{flex:1 1 auto;min-width:0;margin:0 var(--space-16);padding:0;scroll-padding:0}
}
/* tablet: the sideways rows of In the box and Tools run edge to edge */
@media (min-width:768px) and (max-width:1023px){
  html[data-media="screen"] .ribbon .r-scroll:has(> .m-rows){width:100vw;margin-left:calc(50% - 50vw)}
  html[data-media="screen"] .ribbon .r-scroll > .m-rows{--bleed:calc((100vw - 100cqw) / 2);margin:0;padding:0 var(--bleed) var(--space-4);scroll-padding:0 var(--bleed)}
  html[data-media="screen"] .ribbon .r-scroll:has(> .m-rows)::after{right:0}
}
/* a sideways row never scrolls up and down */
html[data-media="screen"] .ribbon .m-rows,
html[data-media="screen"] .ribbon .r-row,
html[data-media="screen"] .ribbon .m-specs{overflow-y:hidden;overscroll-behavior-y:auto;touch-action:pan-x pan-y}
@media (max-width:1023px){ html[data-media="screen"] body .ribbon{padding-top:0} }
/* specs as tiles on a phone and a tablet; the desktop keeps the row */
@media (max-width:1023px){
  html[data-media="screen"] .ribbon .m-specs{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--gg);overflow:visible;margin:0;padding:0;cursor:auto;scroll-snap-type:none}
  html[data-media="screen"] .ribbon .m-spec{flex:none;min-width:0;padding:var(--space-16) var(--space-12);border-radius:var(--radius-16);background:var(--paper-sunk)}
  html[data-media="screen"] .ribbon .m-spec-icon{width:var(--space-48);height:var(--space-48)}
  html[data-media="screen"] .ribbon .m-spec-icon img{width:100%;height:100%}
  html[data-media="screen"] .ribbon .m-spec-value{margin-top:var(--space-8);font-size:var(--text-24);line-height:var(--lh-tight)}
  html[data-media="screen"] .ribbon .m-spec-what{font-size:var(--text-14)}
  .ribbon .r-scroll:has(> .m-specs)::after{display:none}
}
@media (min-width:768px) and (max-width:1023px){
  html[data-media="screen"] .ribbon .m-specs{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
/* the Akvantis mark in the bar: at the left margin from 1024; in the row on a phone */
[data-media="screen"] .r-bar .header-mark, [data-media="screen"] .r-bar .header-mark-in{display:none}
@media (min-width:768px){ [data-media="screen"] .r-bar .header-mark{display:block;flex:none} }

/* ── SECTIONS — every one an accordion ── */
.r-flow > .m-sec{min-width:0;scroll-margin-top:calc(var(--r-bar-h) + env(safe-area-inset-top) + var(--space-8))}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent;padding-bottom:var(--space-16);border-bottom:0;min-height:var(--space-32)}
.acc-head::-webkit-details-marker{display:none}
.acc-head::marker{content:''}
.ribbon .acc-head .m-title{margin:0;font-size:var(--text-24);line-height:var(--space-32)}
.acc-chev{flex:0 0 auto;width:var(--space-8);height:var(--space-8);margin-right:var(--space-4);border-right:var(--space-2) solid var(--ink);border-bottom:var(--space-2) solid var(--ink);
  transform:translateY(-25%) rotate(45deg);transition:transform var(--r-dur) var(--r-ease)}
/* the one chevron of the page: the accordion's, and the same mark beside the language */
.r-locale-chev{flex:0 0 auto;display:block;width:var(--space-8);height:var(--space-8);margin:0 var(--space-4);border-right:var(--space-2) solid var(--ink);border-bottom:var(--space-2) solid var(--ink);transform:translateY(-25%) rotate(45deg)}
.m-sec.is-acc:not(.is-open) .acc-chev{transform:translateY(0) rotate(-45deg)}
.m-sec.is-acc:not(.is-open) .acc-head{padding-bottom:0}
.m-sec.is-acc,.m-sec.is-acc .acc-head{transition:padding var(--r-acc-dur) var(--r-ease)}
.acc-chev{transition-duration:var(--r-acc-dur)}
@media (prefers-reduced-motion: reduce){ .m-sec.is-acc,.m-sec.is-acc .acc-head,.acc-chev{transition:none} }
.acc-head:focus-visible{outline:var(--space-2) solid var(--m-ink);outline-offset:var(--space-4);border-radius:var(--radius-4)}
.r-flow > .m-sec.is-acc{border-bottom:var(--hairline) solid var(--rule-soft);padding:var(--space-16) 0}
.r-flow > .m-sec.is-acc:last-child{border-bottom:0}
html{--acc-gap:var(--space-24)}
@media (min-width:1024px){ html{--acc-gap:var(--space-32)} }
.r-flow > .m-sec.is-acc.is-open{padding-bottom:var(--acc-gap)}
.r-flow > .m-sec.is-acc.is-open + .m-sec.is-acc{padding-top:var(--acc-gap)}
.r-flow{row-gap:0}
.ribbon .m-sec-body{display:flex;flex-direction:column;gap:var(--space-12)}

/* ── ROWS — In the box, Tools, Filter replacement ── */
.r-row{display:flex;gap:var(--space-12);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--space-12);
  margin:0 calc(var(--space-12) * -1);padding:0 var(--space-12) var(--space-4);scrollbar-width:none}
.r-row::-webkit-scrollbar{display:none}
@media (hover:hover){ .ribbon .r-row{cursor:grab} .ribbon .r-row:active{cursor:grabbing} }
.r-row img{-webkit-user-drag:none;user-select:none}
.ribbon .r-row > .m-item{flex:0 0 38%;scroll-snap-align:start}
.ribbon .m-rows > .m-items + .m-items{margin-top:var(--space-16);padding-top:var(--space-16);border-top:var(--hairline) solid var(--rule)}
.ribbon .r-row .m-label{font-size:var(--text-24);line-height:var(--lh-tight);text-align:center}
.ribbon .m-item .m-desc{display:block;margin-top:var(--space-4);font-size:var(--text-14);line-height:var(--lh-snug);font-weight:var(--fw-medium);color:var(--ink-3)}
.ribbon .m-item .m-desc.is-name{color:var(--ink)}
.ribbon .m-item .m-desc.m-sub{margin-top:0;color:var(--ink-3)}
.ribbon .r-row .m-item-art > img{padding:8%;box-sizing:border-box}

/* ── SPECS ── */
.ribbon .m-specs{display:flex;flex-wrap:nowrap;gap:var(--space-16);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding:0 var(--gm);margin:0 calc(var(--gm) * -1);padding:var(--space-4) var(--gm) var(--space-4);scrollbar-width:none}
.ribbon .m-specs::-webkit-scrollbar{display:none}
.ribbon .m-spec{flex:0 0 auto;min-width:var(--space-112);scroll-snap-align:start}
.ribbon .m-spec-icon{background:none}
@media (hover:hover){ .ribbon .m-specs{cursor:grab} .ribbon .m-specs:active{cursor:grabbing} }
.ribbon .m-spec-value{font-size:var(--text-14)}
.ribbon .m-spec-what{font-size:var(--text-11)}
.ribbon .m-text{font-size:var(--text-16)}

@media (min-width:600px){
  .ribbon{padding:var(--space-32) var(--space-24) var(--space-80)}
  .ribbon .r-row > .m-item{flex-basis:22%}
}
@media (min-width:1024px){
  .ribbon{padding:var(--space-48) var(--space-32) var(--space-96)}
  .r-flow{grid-template-columns:minmax(0, 1fr);gap:0}
  .r-flow > .m-sec{grid-column:1 / -1}
  .ribbon .r-row{overflow:visible;flex-wrap:wrap;margin:0;padding:0 0 var(--space-4);cursor:auto}
  .ribbon .r-row > .m-item{flex:0 0 calc((100% - 5 * var(--space-12)) / 6)}
}

/* ══════════════ THE BAR — sections, pinned ══════════════
   The kit's top bar (header.css). Full width, white frost. At the top from
   1024; at the bottom, where the thumb is, below that. */
[data-media="screen"] .r-bar.header{top:0;bottom:auto;left:0;transform:none;width:100%;max-width:none;border-radius:0;
  height:calc(var(--r-bar-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);
  background:var(--r-frost-paper);box-shadow:inset 0 calc(var(--hairline) * -1) 0 var(--rule-soft)}
[data-media="screen"] body.bar-away .r-bar.header{transform:translateY(-100%)}
[data-media="screen"] .ribbon{padding-top:calc(var(--r-bar-h) + env(safe-area-inset-top) + var(--space-24));padding-bottom:var(--space-64)}
.r-bar .header-mark{color:var(--ink);width:var(--space-32);height:var(--space-32);align-self:center;margin-left:var(--gm)}
.r-bar .header-mark svg{height:100%}
.header-mark-in{display:none}
[data-media="screen"] .r-bar.header{padding-left:0;padding-right:0}
.r-bar .header-nav{margin-left:0;padding:0 var(--gm);scroll-padding:0 var(--gm)}
@media (max-width:1023px){
  [data-media="screen"] .r-bar.header{top:auto;bottom:0;height:calc(var(--r-bar-h) + env(safe-area-inset-bottom));padding-top:0;padding-bottom:env(safe-area-inset-bottom);
    box-shadow:inset 0 var(--hairline) 0 var(--rule-soft)}
  [data-media="screen"] body.bar-away .r-bar.header{transform:translateY(100%)}
  [data-media="screen"] .ribbon{padding-top:var(--space-24);padding-bottom:calc(var(--r-bar-h) + env(safe-area-inset-bottom) + var(--space-24))}
  .r-flow > .m-sec{scroll-margin-top:var(--space-8)}
  .r-bar .header-mark-in{display:none}
}
@media (max-width:767px){
  .r-bar .header-mark{display:none}
  .header-mark-in{display:flex;align-items:center;flex:0 0 auto;width:var(--space-32);height:100%;color:var(--ink);margin-right:var(--space-12)}
  .header-mark-in svg{width:100%;height:auto;display:block}
}
.r-bar .header-nav a{color:var(--ink-3);flex-direction:column;justify-content:center;gap:var(--space-4);font-size:var(--text-16);padding:0 var(--space-12)}
@media (min-width:768px){ .r-bar .header-nav a{padding:0 var(--space-12)} }
.num.header-num{--num-size:18px;--num-ink:var(--black);--num-paper:var(--white);font-weight:var(--fw-semibold);transition:transform var(--r-dur) var(--r-ease)}
.r-bar .header-num{transform-origin:50% 100%}
.r-bar .header-nav a.is-here .header-num{transform:scale(var(--r-num-active))}
.r-bar .header-label{font-size:var(--text-16);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
@media (prefers-reduced-motion: reduce){ .header-num{transition:none} }
.r-bar .header-nav a:hover,.r-bar .header-nav a.is-here{color:var(--ink)}

/* ══════════════ THE GRID ══════════════
   6 columns · margin 12 / 768 · 8 · 16 / 1024 · 12 · 24 / 1440 · 12 · 32 /
   1920 · 20 · 24, gutter 8. Content is sized in its columns. */
html[data-media="screen"]{--gc:6;--gg:var(--space-8);--gm:var(--space-12)}
@media (min-width:768px){ html[data-media="screen"]{--gc:8;--gm:var(--space-16)} }
@media (min-width:1024px){ html[data-media="screen"]{--gc:12;--gm:var(--space-24)} }
@media (min-width:1440px){ html[data-media="screen"]{--gm:var(--space-32)} }
@media (min-width:1920px){ html[data-media="screen"]{--gc:20;--gm:var(--space-24)} }
[data-media="screen"] .ribbon{max-width:none;padding-left:var(--gm);padding-right:var(--gm)}

html[data-media="screen"]{--span-item:2}
@media (min-width:1920px){ html[data-media="screen"]{--span-item:3} }
.r-flow{container-type:inline-size;
  --col:calc((100cqw - (var(--gc) - 1) * var(--gg)) / var(--gc));
  --w-item:calc(var(--span-item) * var(--col) + (var(--span-item) - 1) * var(--gg))}
@media (max-width:767px){ .r-flow{--w-item:calc((100cqw + var(--gm) - 2 * var(--gg)) / 2.5)} }
html[data-media="screen"] .ribbon .r-row{gap:var(--gg);margin:0 calc(var(--gm) * -1);padding:0 var(--gm) var(--space-4);scroll-padding:0 var(--gm)}
html[data-media="screen"] .ribbon .r-row > .m-item{flex:0 0 var(--w-item);min-width:0}
@media (min-width:1024px){
  html[data-media="screen"] .ribbon .r-row{overflow:visible;flex-wrap:wrap;margin:0;padding:0 0 var(--space-4);row-gap:var(--gg)}
}
/* all the parts of a section are ONE row, scrolled sideways at every width */
html[data-media="screen"] .ribbon .m-rows{display:flex;gap:var(--gg);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding:0 var(--gm);margin:0 calc(var(--gm) * -1);padding:0 var(--gm) var(--space-4);scrollbar-width:none}
html[data-media="screen"] .ribbon .m-rows::-webkit-scrollbar{display:none}
html[data-media="screen"] .ribbon .m-rows > .m-items{display:contents}
html[data-media="screen"] .ribbon .m-rows > .m-items + .m-items{margin:0;padding:0;border:0}
html[data-media="screen"] .ribbon .m-rows .m-item{scroll-snap-align:start}
/* scroll hint: a white fade on the right edge while the row goes on */
.r-scroll{position:relative}
.r-scroll::after{content:"";position:absolute;top:0;bottom:0;right:calc(var(--gm) * -1);width:var(--space-48);
  background:linear-gradient(to right, var(--r-paper-0), var(--paper));pointer-events:none;opacity:0;transition:opacity var(--r-dur) var(--r-ease)}
.r-scroll.has-more::after{opacity:1}
@media (min-width:1024px){
  .r-flow{--w-item:calc((100cqw - 6 * var(--gg)) / 6.5)}
  html[data-media="screen"] .ribbon .m-rows{margin:0;padding:0 0 var(--space-4);scroll-padding:0}
  html[data-media="screen"] .ribbon .m-rows .m-item-art > img{padding:4%}
  html[data-media="screen"] .ribbon .m-rows .m-desc{font-size:var(--text-12)}
  .r-scroll::after{right:0}
}
/* the desktop measure: 8 of 12 columns in the middle (14 of 20 from 1920) */
@media (min-width:1024px){
  html[data-media="screen"]{--g-off:2;--g-in:8}
  html[data-media="screen"] .ribbon{
    --g-col:calc((100% - 2 * var(--gm) - (var(--gc) - 1) * var(--gg)) / var(--gc));
    padding-left:calc(var(--gm) + var(--g-off) * (var(--g-col) + var(--gg)));
    padding-right:calc(var(--gm) + var(--g-off) * (var(--g-col) + var(--gg)))}
  html[data-media="screen"] .r-flow{--gc:var(--g-in)}
}
@media (min-width:1920px){ html[data-media="screen"]{--g-off:3;--g-in:14} }
@media (hover:hover){ html[data-media="screen"] .ribbon .m-rows{cursor:grab} html[data-media="screen"] .ribbon .m-rows:active{cursor:grabbing} }
html[data-media="screen"] .ribbon .m-specs{gap:var(--gg)}
html[data-media="screen"] .ribbon .m-spec{flex:0 0 var(--w-item);min-width:0}

/* ══════════════ LOCATION — globe in the bar, region popup ══════════════
   The product page's picker (ui-kit/kit/locale.css), on this page's light ground:
   the kit's tokens are the dark tools', so the few it reads are set light here. The
   globe sits at the right margin of the bar, after the section row (phone, tablet)
   or after the product (desktop). */
.r-locale, .regions{
  --ink:var(--black);--ink-muted:var(--black-250);
  --tile:var(--black-50);--tile-hover:var(--black-100);
  --on-frost:rgba(1, 0, 6, .05);--on-frost-hover:rgba(1, 0, 6, .09);
  --frost-900:rgba(252, 255, 254, .86);--frost-edge:inset 0 0 0 var(--hairline) var(--rule-soft);
  --scrim-50:rgba(1, 0, 6, .32);--scrim-80:rgba(1, 0, 6, .48)}
.r-bar a.lang-mark.r-locale{align-self:center;flex:none;height:var(--number-40);margin:0 calc(var(--gm) - var(--space-4)) 0 var(--space-4);color:var(--ink)}
.r-bar a.lang-mark.r-locale{gap:var(--space-4);padding:0 var(--space-8) 0 var(--space-12)}
.r-bar a.lang-mark.r-locale .locale-txt{font-size:var(--text-16);font-weight:var(--fw-semibold);color:var(--ink)}
/* on a phone the language is the globe alone: the bar is narrow and the row of
   sections needs the room; from 768 it is the language and the chevron */
.r-locale-globe{display:none}
@media (max-width:767px){
  .r-bar a.lang-mark.r-locale{width:var(--number-40);padding:0;justify-content:center}
  .r-bar a.lang-mark.r-locale .locale-txt, .r-bar .r-locale-chev{display:none}
  .r-locale-globe{display:block;width:var(--space-24);height:var(--space-24);color:var(--ink)}
  .r-locale-globe svg{display:block;width:100%;height:100%}
}
.r-locale:focus-visible, .region:focus-visible, .regions-x:focus-visible{outline:var(--space-2) solid var(--ink);outline-offset:var(--space-2)}
/* the row of sections fades at an edge only while there is more of it that way
   (manual.js sets .fade-l / .fade-r as it scrolls) */
.r-bar .header-nav{--fade-l:0px;--fade-r:0px;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
          mask-image:linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent)}
.r-bar .header-nav.fade-l{--fade-l:var(--space-48)}
.r-bar .header-nav.fade-r{--fade-r:var(--space-48)}
.regions-head h2{font-family:var(--font-primary)}
.region{font-family:var(--font-primary)}

/* ── EMBED ── `?embed` (set by tools/page.html): the guide inside the product
   page's pop-up. The product page has its own header with the language and the
   Akvantis mark, so here the bar keeps only the sections — one language switch
   on the screen, never two that could disagree. The page's language comes from
   the address the product page opens (/, /de/, /ua/). */
.is-embed .r-bar a.lang-mark.r-locale, .is-embed .r-bar .header-mark, .is-embed .r-bar .header-mark-in{display:none}
@media (min-width:768px){ .is-embed[data-media="screen"] .r-bar .header-nav{margin:0 var(--gm)} }