/* Device guides (kaffeemaschine.html; the grill is next). Layered on css/home.css (palette, type, nav,
   footer, .faq, .table-wrap) and css/ankunft.css (.ahead, .acard, .aclosing): the guides belong to
   "Anreise & Hausinfo" and look like it. This file holds the guide's own parts: the exploded view
   (drawn by scripts/build-drawings.mjs), the display simulator, the step lists and the device passport. */

/* ---------- head ---------- */
.ghead-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
@media (max-width: 899px) { .ghead-grid { grid-template-columns: 1fr; } }

.brief { position: relative; overflow: hidden; padding: clamp(18px, 2.4vw, 26px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.brief::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--sun); }
.brief-title { margin: 0 0 .7em; font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; }
.brief ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: brief; }
.brief li { position: relative; padding-left: 40px; font-size: 15.5px; line-height: 1.55; text-wrap: pretty; counter-increment: brief; }
.brief li::before { content: counter(brief); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--sun) 14%, var(--card)); color: var(--sun-ink); font-size: 14px; font-weight: 700; }
.brief-print { margin-top: 18px; padding: .7em 1.3em; }
/* buttons that only work with JavaScript stay hidden until js/anleitung.js reveals them (their display
   rules would otherwise beat the hidden attribute) */
.brief-print[hidden], .xv-toggle[hidden] { display: none; }

/* ---------- sections ---------- */
.gsec { padding: clamp(52px, 7vw, 100px) 0; background: var(--paper); }
.gsec-sand { background: var(--sand); }
.gsec-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px clamp(14px, 2vw, 24px); align-items: start; max-width: 880px; margin-bottom: clamp(26px, 4vw, 46px); }
.gsec-head .gsec-num { margin: .02em 0 0; font-family: var(--serif); font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; color: var(--sun-ink); }
.gsec-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: .3em; }
.gsec-head p { max-width: 66ch; margin: 0; color: var(--ink-soft); text-wrap: pretty; }

.key { display: inline-block; padding: 0 .45em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--card); color: var(--ink); font-size: .92em; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.gnote { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--sea) 8%, var(--card)); font-size: 15.5px; text-wrap: pretty; }
.gnote .ico { margin-top: .15em; color: var(--sea-ink); }
.gnote-warn { background: color-mix(in srgb, var(--sun) 12%, var(--card)); }
.gnote-warn .ico { color: var(--sun-ink); }
.gnote-stop { max-width: 900px; margin-top: 26px; border: 1px solid var(--line); background: var(--card); }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
@media (max-width: 979px) { .notes { grid-template-columns: 1fr; } }

/* ---------- 01 the exploded view ---------- */
.xv-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 979px) { .xv-grid { grid-template-columns: 1fr; } }
.xv { margin: 0; padding: clamp(10px, 2vw, 22px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
/* a dotted drawing board behind the drawing */
.xv-stage { border-radius: 12px; background-image: radial-gradient(color-mix(in srgb, var(--sea-ink) 20%, transparent) 1px, transparent 1.3px); background-size: 20px 20px; }
.xv-svg { display: block; width: 100%; height: auto; overflow: visible; }
.xv figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); }
.xv-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--sea-ink); border-radius: 999px; background: transparent; color: var(--sea-ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.xv-toggle:hover { background: color-mix(in srgb, var(--sea) 10%, transparent); }

.xl-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.xl-btn { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: default; transition: background .2s, border-color .2s; }
.xl-btn:hover, .xl-btn.is-on { background: var(--card); border-color: var(--line); }
.xl-btn.is-on { border-color: var(--sun); }
.xl-n { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto; border: 1.5px solid var(--sea-ink); border-radius: 50%; color: var(--sea-ink); font-size: 14px; font-weight: 700; }
.xl-sq { border-color: var(--sun-ink); border-radius: 8px; color: var(--sun-ink); }
.xl-wide { width: 46px; border-radius: 999px; font-size: 12.5px; }
.xl-txt { display: grid; gap: 1px; }
.xl-txt b { font-weight: 600; }
.xl-txt span { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

/* the drawing: three shades per material, light from the top left */
.xv-svg, .xf {
  --st: #35525c; --t: #fbf7f0; --f: #eee3d2; --s: #dccbb2;
  --metal-t: #f1f2f0; --metal-f: #dfe2e1; --metal-s: #c9cecd;
  --dark: #222c30; --dark-2: #31404a; --brew-t: #d9e0e2; --brew-f: #c3cdd1; --brew-s: #aebbc0;
  --grounds-t: #d2bea3; --grounds-f: #bba487; --grounds-s: #a58e72;
  --water: rgba(15, 74, 90, .2); --glass: rgba(124, 195, 212, .16); --red: #c62828;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xv-svg, :root:not([data-theme="light"]) .xf {
    --st: #a9cbd5; --t: #33424a; --f: #2a363c; --s: #212b30;
    --metal-t: #48545a; --metal-f: #3d484d; --metal-s: #343e43;
    --dark: #0e1416; --dark-2: #172024; --brew-t: #4c5b62; --brew-f: #424f56; --brew-s: #38444a;
    --grounds-t: #6d5a46; --grounds-f: #5f4e3c; --grounds-s: #524333;
    --water: rgba(124, 195, 212, .26); --glass: rgba(124, 195, 212, .12); --red: #ef5350;
  }
}
:root[data-theme="dark"] .xv-svg, :root[data-theme="dark"] .xf {
  --st: #a9cbd5; --t: #33424a; --f: #2a363c; --s: #212b30;
  --metal-t: #48545a; --metal-f: #3d484d; --metal-s: #343e43;
  --dark: #0e1416; --dark-2: #172024; --brew-t: #4c5b62; --brew-f: #424f56; --brew-s: #38444a;
  --grounds-t: #6d5a46; --grounds-f: #5f4e3c; --grounds-s: #524333;
  --water: rgba(124, 195, 212, .26); --glass: rgba(124, 195, 212, .12); --red: #ef5350;
}
.xv-svg :is(polygon, path, circle, rect), .xf :is(polygon, path, circle, rect) { stroke: var(--st); stroke-width: 1.15; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.f-t { fill: var(--t); } .f-f { fill: var(--f); } .f-s { fill: var(--s); }
.f-s.m-cover { fill: color-mix(in srgb, var(--sea) 10%, var(--s)); }
.f-t.m-lid { fill: color-mix(in srgb, var(--sea-deep) 6%, var(--t)); }
.m-tank { fill: var(--glass); }
.f-t.m-tank { fill: color-mix(in srgb, var(--sea) 7%, var(--t)); }
.water { fill: var(--water); stroke: none !important; }
.m-spout.f-t, .m-plate.f-t { fill: var(--metal-t); } .m-spout.f-f, .m-plate.f-f { fill: var(--metal-f); } .m-spout.f-s, .m-plate.f-s { fill: var(--metal-s); }
.m-tray.f-t { fill: var(--metal-f); } .m-tray.f-f { fill: var(--metal-s); } .m-tray.f-s { fill: color-mix(in srgb, var(--metal-s) 80%, var(--dark)); }
.m-float { fill: var(--metal-t); }
.m-brew.f-t { fill: var(--brew-t); } .m-brew.f-f { fill: var(--brew-f); } .m-brew.f-s { fill: var(--brew-s); }
.m-grounds.f-t { fill: var(--grounds-t); } .m-grounds.f-f { fill: var(--grounds-f); } .m-grounds.f-s { fill: var(--grounds-s); }
.hole, .dark, .cavity, .slot, .window, .strip, .m-display { fill: var(--dark); }
.cavity { fill: var(--dark-2); }
.window { fill-opacity: .75; }
.bean { fill: #6d4c33; stroke: none !important; }
.m-knob, .m-btn, .m-power { fill: var(--dark-2); }
.m-knob-rim { fill: var(--metal-s); }
.m-led { fill: #f0a57f; stroke: none !important; }
.knob-mark, .lever { stroke: #f0a57f !important; stroke-width: 2.2 !important; }
.plate { fill: #f6f1e7; }
.plate-line { stroke-opacity: .45; }
.seam, .rib, .vent, .perf, .mark { fill: none; stroke-opacity: .45; }
.perf { fill: var(--st); fill-opacity: .4; stroke: none !important; }
.ring { fill: none; stroke-opacity: .6; }
.grip { fill: color-mix(in srgb, var(--dark) 55%, var(--s)); }
.handle { fill: #3b4950; }
.hub { fill: var(--dark); }
.accent { fill: var(--red); stroke: color-mix(in srgb, var(--red) 70%, #000) !important; }
.guides path { fill: none; stroke: var(--ink-soft); stroke-dasharray: 2 6; stroke-opacity: .7; }
.arw path { fill: none; stroke: var(--sun-ink) !important; stroke-width: 2 !important; }
.arw polygon { fill: var(--sun-ink); stroke: none !important; }
.arw-strong path { stroke-width: 2.6 !important; }
.ghost { opacity: .4; }
.ghost :is(polygon, path, circle) { fill: none !important; stroke-dasharray: 3 3; }

/* callouts: the manual's numbers in circles, the parts behind them in squares */
.co-l { fill: none; stroke: var(--ink-soft) !important; stroke-width: 1 !important; }
.co-d { fill: var(--ink-soft); stroke: none !important; }
.co-b { fill: var(--card); stroke: var(--sea-ink) !important; stroke-width: 1.6 !important; }
.co-t { fill: var(--sea-ink); font: 700 16px/1 var(--sans); text-anchor: middle; dominant-baseline: central; }
.co-sq .co-b { stroke: var(--sun-ink) !important; }
.co-sq .co-t { fill: var(--sun-ink); }
.co-pill .co-t { font-size: 14.5px; }
.co-step .co-b { fill: var(--sun); stroke: none !important; }
.co-step .co-t { fill: #fff; font-size: 24px; }
/* on a phone the drawing is shown at about 40 %: the badges keep a readable size */
.co-b, .co-t { transform-box: fill-box; transform-origin: center; }
@media (max-width: 640px) { .xv-svg .co-b, .xv-svg .co-t { transform: scale(1.6); } }

/* explode / assemble: the parts carry their offset in --ex/--ey (written by the generator) */
.xv-svg .xp, .xf .xp { transform: translate(var(--ex, 0px), var(--ey, 0px)); }
.xv-svg .xp { transition: transform 1.15s cubic-bezier(.2, .7, .1, 1), opacity .3s; }
.xv-svg .inner, .xv-svg .guides, .xv-svg [data-part="spout-arrow"] { transition: opacity .35s; }
.xv.is-built .xv-svg .xp { transform: none; }
.xv.is-built .xv-svg :is(.inner, .guides, [data-part="spout-arrow"]) { opacity: 0; transition: opacity .3s .55s; }
/* assembled, the machine is the "before" picture: its numbers belong to the parts once they are apart */
.xv-svg .co { transition: opacity .35s .5s; }
.xv.is-built .xv-svg .co { opacity: 0; transition: opacity .2s; }
.xv.no-anim .xv-svg :is(.xp, .inner, .guides, [data-part="spout-arrow"]) { transition: none; }
@media (prefers-reduced-motion: reduce) { .xv-svg .xp, .xv-svg .inner, .xv-svg .guides { transition: none !important; } }
/* the legend lights a part; the others step back */
.xv-svg[data-active] .xp:not(.is-on):not([data-part="body"]) { opacity: .35; }
.xv-svg[data-active] [data-part="body"] { opacity: .55; }
.xv-svg .xp.is-on :is(polygon, path, circle) { stroke: var(--sun) !important; stroke-width: 2 !important; }
.xv-svg .xp.is-on .co-b { fill: var(--sun); stroke: var(--sun) !important; }
.xv-svg .xp.is-on .co-t { fill: #fff; }

/* ---------- 02 making coffee ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 24px 22px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); counter-increment: step; }
.step::after { content: counter(step); position: absolute; top: 18px; right: 20px; font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--sun-ink); }
.step-ico { display: block; width: 46px; height: 46px; padding: 9px; margin-bottom: 14px; border-radius: 14px; background: color-mix(in srgb, var(--sea) 11%, var(--card)); color: var(--sea-ink); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { font-size: 1.35rem; margin: 0 0 .4em; padding-right: 36px; }
.step p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }

/* ---------- 03 the display ---------- */
.dp-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.dp-fig { position: sticky; top: 92px; z-index: 2; margin: 0; padding: clamp(12px, 2vw, 22px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.dp-fig figcaption { display: grid; gap: 4px; margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }
.dp-status { min-height: 1.4em; font-size: 15px; font-weight: 600; color: var(--ink); }
@media (max-width: 979px) {
  .dp-grid { grid-template-columns: 1fr; }
  .dp-fig { top: 74px; padding: 10px 12px; }
  .dp-fig figcaption > span:last-child { display: none; }
}
.panel { display: block; width: 100%; height: auto; overflow: visible; }
.pn-face { fill: color-mix(in srgb, var(--sand) 55%, var(--card)); stroke: var(--line); }
.pn-strip { fill: #162024; }
.pn-knob-rim { fill: #b8c1c5; }
.pn-knob { fill: #eceff0; stroke: #9aa5ab; }
.pn-mark { stroke: #33505a; stroke-width: 4; stroke-linecap: round; }
.pn-btn circle { fill: #222c30; stroke: #45545a; stroke-width: 1.5; }
.pn-power > circle:not(.pn-knob-rim) { fill: #222c30; stroke: #45545a; stroke-width: 1.5; }
.panel use { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pn-btn, .pn-power { color: #c7d1d5; }
.ps { color: #4a5a61; transition: color .2s; }
.pn-sep { stroke: #34444b; stroke-width: 1.5; }
.pn-co path { stroke: var(--ink-soft); stroke-width: 1; }
.pn-co circle { fill: var(--card); stroke: var(--sea-ink); stroke-width: 1.6; }
.pn-co text { fill: var(--sea-ink); font: 700 14px/1 var(--sans); text-anchor: middle; dominant-baseline: central; }
/* what is lit: the symbol the visitor chose (and, as on the real display, the chosen strength) */
.panel { --lit: #ffd6bf; }
.panel[data-lit="ready"] :is([data-sym="ready"], [data-n="1"], [data-n="2"]),
.panel[data-lit="bean"] :is([data-n="1"], [data-n="2"]),
.panel[data-lit="water"] [data-sym="water"],
.panel[data-lit="tray"] [data-sym="tray"],
.panel[data-lit="filter"] [data-sym="filter"],
.panel[data-lit="clean"] [data-sym="clean"],
.panel[data-lit="descale"] [data-sym="descale"],
.panel[data-lit="air"] [data-sym="air"],
.panel[data-lit="alt"] :is([data-sym="ready"], [data-sym="clean"]) { color: var(--lit); }
.panel[data-lit="eco"] .ps, .panel[data-lit="eco"] :is(.pn-btn, .pn-power) { color: color-mix(in srgb, var(--lit) 38%, #4a5a61); }
.panel[data-mode="blink"]:is([data-lit="ready"]) [data-sym="ready"],
.panel[data-mode="blink"][data-lit="bean"] :is([data-n="1"], [data-n="2"]),
.panel[data-mode="blink"]:is([data-lit="water"], [data-lit="tray"], [data-lit="filter"], [data-lit="clean"], [data-lit="descale"]) .ps:is([data-sym="water"], [data-sym="tray"], [data-sym="filter"], [data-sym="clean"], [data-sym="descale"]) { animation: pn-blink 1s steps(1) infinite; }
.panel[data-lit="alt"] [data-sym="ready"] { animation: pn-blink 1s steps(1) infinite; }
.panel[data-lit="alt"] [data-sym="clean"] { animation: pn-blink 1s steps(1) infinite -.5s; }
.panel[data-lit="chase"] :is(.pn-btn, .pn-power) { animation: pn-chase 1.6s steps(1) infinite; color: var(--lit); }
.panel[data-lit="chase"] [data-part="cup2"] { animation-delay: .4s; }
.panel[data-lit="chase"] [data-part="strength"] { animation-delay: .8s; }
.panel[data-lit="chase"] [data-part="power"] { animation-delay: 1.2s; }
@keyframes pn-blink { 0% { opacity: 1; } 50% { opacity: .12; } }
@keyframes pn-chase { 0% { opacity: 1; } 25% { opacity: .15; } }
/* without motion a blinking symbol is drawn dashed instead */
@media (prefers-reduced-motion: reduce) {
  .panel * { animation: none !important; }
  .panel[data-mode="blink"] .ps, .panel:is([data-lit="alt"], [data-lit="chase"]) :is(.ps, .pn-btn, .pn-power) { stroke-dasharray: 2 2; }
}

.syms { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sym { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.sym-ico { grid-row: span 2; width: 48px; height: 48px; padding: 10px; border-radius: 12px; background: #172024; color: #ffd6bf; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sym-dim { color: #8c7a70; }
.sym-fault .sym-ico { background: color-mix(in srgb, var(--sun) 14%, var(--card)); color: var(--sun-ink); }
.sym h3 { margin: .1em 0 .3em; font-family: var(--sans); font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.sym dl { display: grid; gap: 8px; margin: 0; }
.sym dl > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; }
.sym dt { margin: 0; }
.sym dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.sym dd a { color: var(--sea-ink); font-weight: 600; }
.sym-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 88px; min-height: 32px; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.sym-btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }
.sym-btn[data-mode="blink"]::before { background: transparent; box-shadow: inset 0 0 0 2px var(--sun); }
.sym-btn:hover { border-color: var(--sea-ink); }
.sym-btn[aria-pressed="true"] { background: var(--sea); border-color: var(--sea); color: #fff; }
.sym-btn[aria-pressed="true"]::before { background: #ffd6bf; box-shadow: none; }

/* ---------- 04 care ---------- */
.care-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 22px; align-items: start; }
@media (max-width: 979px) { .care-grid { grid-template-columns: 1fr; } }
.care-grid .acard h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; margin: 0 0 .5em; }
.care-grid .acard h3 + p { margin-top: 0; }
.care-grid .acard p + h3 { margin-top: 1.2em; }
.tag-when { display: inline-block; margin: 0 0 .7em; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--sea) 11%, var(--card)); color: var(--sea-ink); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.brew-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 18px; }
.brew-frames figure { margin: 0; padding: 8px 8px 10px; border-radius: 12px; background-color: var(--paper); background-image: radial-gradient(color-mix(in srgb, var(--sea-ink) 16%, transparent) 1px, transparent 1.3px); background-size: 16px 16px; }
.xf { display: block; width: 100%; height: auto; overflow: visible; }
.brew-frames figcaption { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.xf-n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--sun); color: #fff; font-size: 13px; }
@media (max-width: 520px) { .brew-frames { grid-template-columns: 1fr; } .brew-frames figure { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 10px; } }

.glist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: g; }
.glist > li { position: relative; padding-left: 40px; text-wrap: pretty; counter-increment: g; }
.glist > li::before { content: counter(g); position: absolute; left: 0; top: .05em; display: grid; place-items: center; width: 27px; height: 27px; border: 1.5px solid var(--sea-ink); border-radius: 50%; color: var(--sea-ink); font-size: 13.5px; font-weight: 700; }
.phase { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; padding: 1px 10px; border-radius: 999px; background: #172024; color: #ffd6bf; font-size: 12.5px; font-weight: 600; vertical-align: .1em; }
.phase::after { content: ""; height: 8px; background: radial-gradient(circle, currentColor 3.2px, transparent 3.6px) 0 0 / 10px 8px repeat-x; }
.phase[data-n="1"]::after { width: 10px; }
.phase[data-n="2"]::after { width: 20px; }
.phase[data-n="3"]::after { width: 30px; }

.prog { margin-top: clamp(36px, 5vw, 60px); }
.prog-title { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin: 0 0 .35em; }
.prog-lead { max-width: 70ch; margin: 0 0 20px; color: var(--ink-soft); text-wrap: pretty; }
.prog-table { margin-bottom: 18px; }
.gtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.gtable th, .gtable td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); text-wrap: pretty; }
.gtable thead th { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; background: color-mix(in srgb, var(--sand) 70%, var(--card)); }
.gtable tbody th { font-weight: 600; }
.gtable tbody th a { display: inline-flex; align-items: center; min-height: 24px; color: var(--sea-ink); text-underline-offset: 3px; }
.gtable tr:last-child > * { border-bottom: 0; }
@media (max-width: 700px) {
  .gtable thead { display: none; }
  .gtable tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .gtable tr:last-child { border-bottom: 0; }
  .gtable th, .gtable td { padding: 0; border: 0; }
  .gtable tbody th { grid-column: 1 / -1; margin-bottom: 4px; }
  .gtable td::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sea-ink); }
  .gtable td { grid-column: 1 / -1; margin-bottom: 6px; }
}
.pd { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.pd > summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 56px 12px 18px; position: relative; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.22rem; }
.pd > summary::-webkit-details-marker { display: none; }
.pd > summary .ico { color: var(--sea-ink); flex: none; }
.pd > summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border: 1px solid var(--line); border-radius: 50%; background: linear-gradient(var(--sun-ink), var(--sun-ink)) center / 11px 1.5px no-repeat, linear-gradient(var(--sun-ink), var(--sun-ink)) center / 1.5px 11px no-repeat; transition: transform .3s; }
.pd[open] > summary::after { transform: rotate(135deg); }
.pd > summary:hover { color: var(--sun-ink); }
.pd > :not(summary) { margin: 0 18px 16px; }
.pd > .gnote { margin-bottom: 16px; }
.pd .table-wrap { box-shadow: none; }

/* ---------- 05 trouble ---------- */
.trouble { max-width: 900px; }
.trouble summary { font-size: 1.22rem; }
.tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0 48px 22px 0; }
.tr dt { padding-top: .2em; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sea-ink); }
.tr dt:nth-of-type(odd) { color: var(--ink-soft); }
.tr dd { margin: 0; color: var(--ink); text-wrap: pretty; }
.tr dd:nth-of-type(odd) { color: var(--ink-soft); }
.tr dd:nth-of-type(even) { margin-bottom: 10px; }
.tr-old { margin: -10px 48px 22px 0; font-size: 14.5px; font-style: italic; color: var(--ink-soft); }
@media (max-width: 600px) { .tr { grid-template-columns: 1fr; gap: 0; margin-right: 0; } .tr dd:nth-of-type(odd) { margin-bottom: 8px; } .tr-old { margin-right: 0; } }

/* ---------- 06 the device passport: a data plate and its rows ---------- */
.pass { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: clamp(18px, 3vw, 34px); align-items: start; }
@media (max-width: 979px) { .pass { grid-template-columns: 1fr; } }
.pass-plate {
  position: relative; padding: 30px 28px 26px; border-radius: 14px; color: #e8f1f3;
  background:
    radial-gradient(circle at 16px 16px, #9fb8bf 0 3px, #5d7a83 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 16px) 16px, #9fb8bf 0 3px, #5d7a83 3.5px, transparent 4px),
    radial-gradient(circle at 16px calc(100% - 16px), #9fb8bf 0 3px, #5d7a83 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 16px) calc(100% - 16px), #9fb8bf 0 3px, #5d7a83 3.5px, transparent 4px),
    linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 45%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 5px),
    var(--sea-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), var(--shadow);
}
.pass-kicker { margin: 0 0 .5em; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #ffd6bf; }
.pass-model { margin: 0 0 .7em; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; color: #fff; }
.pass-model sup, .alead sup { font-size: .5em; vertical-align: .9em; line-height: 0; }
.pass-ids { display: grid; gap: 10px; margin: 0; }
.pass-ids > div { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .16); }
.pass-ids dt { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #b9cdd3; }
.pass-ids dd { margin: 2px 0 0; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.pass-rows { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.pass-rows > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 20px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.pass-rows > div:last-child { border-bottom: 0; }
.pass-rows dt { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sea-ink); padding-top: .25em; }
.pass-rows dd { margin: 0; font-size: 15.5px; text-wrap: pretty; }
.pass-rows a { color: var(--sea-ink); text-underline-offset: 3px; }
/* links inside the passport rows and the symbol cards sit in running text: a little padding gives them a
   24px hit area (WCAG 2.5.8) without opening up the line height */
.pass-rows dd a, .sym dd a { padding-block: 3px; }
@media (max-width: 640px) { .pass-rows > div { grid-template-columns: 1fr; padding: 14px 16px; } }

/* ---------- sources and privacy ---------- */
.src-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: start; }
@media (max-width: 899px) { .src-grid { grid-template-columns: 1fr; } }
.src-title { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: .5em; }
.src { display: grid; gap: 8px; margin: 0 0 1em; padding-left: 1.2em; font-size: 15px; color: var(--ink-soft); }
.src a, .privacy a { color: var(--sea-ink); text-underline-offset: 3px; }
.src-fine { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.privacy { padding: clamp(18px, 2.4vw, 26px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.privacy p { margin: 0; font-size: 15px; color: var(--ink-soft); text-wrap: pretty; }

/* ---------- print: the guide on paper, next to the machine ---------- */
@media print {
  .nav, .footer, .skip, .jump, .brief-print, .xv-toggle, .aclosing, .dp-status, .sym-btn::before { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  .ahead::before { display: none; }
  .gsec, .gsec-sand, .ahead { padding: 14pt 0; background: none !important; }
  .dp-fig { position: static; }
  .xv-svg .xp { transform: translate(var(--ex, 0px), var(--ey, 0px)) !important; }
  .xv-svg :is(.inner, .guides) { opacity: 1 !important; }
  .step, .sym, .acard, .pd, .xv, .pass-rows, .brief, .dp-fig { box-shadow: none; break-inside: avoid; }
  .gsec-head { break-after: avoid; }
}