/* v8.samples.v1.css - Simplicity Idea Tech v8, sample pages (S3a). Loads after v8.v1.css; own classes use the x- prefix. Flat drawn objects, light paper, navy fills allowed inside the drawings. */
:root{--navy:#17306F;--navy-2:#2D4A8F;--navy-t:#DCE4F5;--mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Liberation Mono",Menlo,monospace}
.nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}

/* page head: text left, drawn object right */
.x-hero{padding:24px 0 44px}
.x-hg{display:grid;gap:26px}
.x-hero h1{max-width:12em;font-size:clamp(36px,4.8vw,62px)}
.x-voice{max-width:26em;margin-top:14px;font-size:19px;line-height:1.45;color:var(--ink2)}
@media (min-width:960px){.x-hero{padding:44px 0 72px}.x-hg{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}.x-voice{font-size:21px}}

/* drawn-object surface (a container: the drawings answer to their own width, so index thumbnails can reuse them) */
.x-obj{container-type:inline-size;margin:0;padding:14px 14px 16px;background:var(--surf);border:1px solid var(--line);border-radius:4px}
.x-obj>.tag{margin-bottom:12px}
@media (min-width:720px){.x-obj{padding:20px 22px 22px}}
@media (max-width:420px){.x-obj{padding:10px 8px 12px}}
@media (max-width:340px){.x-obj{padding:8px 5px 10px}}
.x-s{--i:0}
@media (prefers-reduced-motion:no-preference){.x-s{animation:v8settle .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*70ms)}}

/* shared sheet pieces */
.x-shh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px;padding:10px 12px 8px;border-bottom:1px solid var(--line);font-size:14.5px}
.x-shh span{color:var(--ink2)}
.x-tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.3}
.x-tbl th,.x-tbl td{padding:6px 0 6px 6px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
.x-tbl th:first-child,.x-tbl td:first-child{padding-left:12px;text-align:left}
.x-tbl th:last-child,.x-tbl td:last-child{padding-right:12px}
.x-tbl th{font-size:13.5px;font-weight:600;color:var(--ink2)}
.x-tbl tr.sel td{background:var(--acc-t);font-weight:600;border-top:2px solid var(--ink)}
@container (min-width:560px){.x-tbl{font-size:15px}.x-tbl th,.x-tbl td{padding:7px 0 7px 10px}.x-tbl th:first-child,.x-tbl td:first-child{padding-left:16px}.x-tbl th:last-child,.x-tbl td:last-child{padding-right:16px}.x-shh{padding-left:16px;padding-right:16px;font-size:15.5px}}
@container (max-width:360px){.x-tbl{font-size:12.5px;letter-spacing:-.01em}.x-tbl th{font-size:12.5px}.x-tbl th,.x-tbl td{padding-left:3px}.x-tbl th:first-child,.x-tbl td:first-child{padding-left:8px}.x-tbl th:last-child,.x-tbl td:last-child{padding-right:8px}}
@container (max-width:270px){.x-tbl{letter-spacing:-.025em}.x-tbl th,.x-tbl td{padding-left:2px}.x-tbl th:first-child,.x-tbl td:first-child{padding-left:6px}.x-tbl th:last-child,.x-tbl td:last-child{padding-right:6px}}

/* backup: NAS tower, today's tray pulled out and railed into the sheet */
.x-bk{--prot:16px;--rl:12px;display:grid;grid-template-columns:90px minmax(0,1fr);gap:0 calc(var(--prot) + var(--rl));align-items:start}
.x-tw{position:relative;padding:10px 10px 34px;background:var(--navy);border-radius:3px}
.x-bays{display:grid;grid-auto-rows:6px;row-gap:3px}
.x-bays i{position:relative;display:block;border-radius:1px;background:var(--navy-2)}
.x-bays i:first-child{z-index:1;height:10px;margin:-2px calc(-10px - var(--prot)) -2px 0;background:var(--acc)}
.x-bays i:first-child::after{content:"";position:absolute;left:100%;top:3px;width:var(--rl);height:4px;background:var(--acc)}
.x-tw small{position:absolute;left:10px;right:6px;bottom:9px;font-size:13px;line-height:1;font-weight:500;color:#C9D4EE}
.x-sh{margin-top:10px;border:1px solid var(--ink);border-top:7px solid var(--acc);background:var(--surf)}
.x-fl li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;padding:7px 12px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.3}
.x-fl li span:last-child{color:var(--ok-ink);font-weight:600}
.x-ok{padding:10px 12px 12px;background:var(--ok-t);color:var(--ok-ink)}
.x-ok b{display:block;font-size:20px;line-height:1.2}
.x-ok span{display:block;margin-top:2px;font-size:14px;line-height:1.35}
@container (min-width:560px){.x-bk{--prot:26px;--rl:14px;grid-template-columns:104px minmax(0,1fr)}.x-tw{padding:12px 12px 38px}.x-bays{grid-auto-rows:7px}.x-bays i:first-child{height:12px;margin:-2.5px calc(-12px - var(--prot)) -2.5px 0}.x-bays i:first-child::after{top:4px}.x-sh{margin-top:12px}.x-fl li{font-size:15.5px;padding-left:16px;padding-right:16px}.x-ok{padding:12px 16px 14px}.x-ok b{font-size:22px}.x-ok span{font-size:15px}}

/* hr: seven forms into one import sheet */
.x-hr{display:grid;gap:0}
.x-stack{position:relative;width:236px;height:262px;max-width:100%;margin-inline:auto}
.x-f{position:absolute;left:calc(var(--n)*14px);top:calc(var(--n)*24px);width:150px;height:112px;padding:8px 10px;background:var(--surf);border:1px solid var(--ink2);border-radius:2px}
.x-f p{font-size:13.5px;font-weight:600;line-height:1.25;white-space:nowrap}
.x-f i{display:block;height:1px;margin-top:11px;background:var(--line)}
.x-f p+i{margin-top:12px}
.x-f b{position:absolute;right:10px;bottom:8px;width:30px;height:8px;border-bottom:1.5px solid var(--ink2);transform:skewX(-20deg)}
.x-rail{display:block;width:6px;height:26px;margin:0 auto;background:var(--ink)}
.x-sht{border:1px solid var(--ink);border-top:6px solid var(--ink);background:var(--surf)}
.x-sht .x-shh{padding-top:9px}
.x-rev{padding:10px 12px 12px}
.x-rev b{display:block;font-size:20px;line-height:1.2}
.x-rev span{font-size:14.5px;color:var(--ink2)}
@container (min-width:560px){.x-rev{padding:12px 16px 14px}.x-rev b{font-size:22px}}
@container (min-width:640px){.x-hr{grid-template-columns:236px 28px minmax(0,1fr);align-items:center}.x-rail{width:100%;height:6px;margin:0}.x-stack{margin:0;height:280px}}

/* migration: old printout behind, new sheet over it, one stamp across the two TOTAL rows */
.x-mg{position:relative;padding-top:6px}
.x-pr{position:relative;background:var(--surf);border:1px solid var(--ink)}
.x-prt{padding:8px 10px 7px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.3;font-weight:600}
.x-po{background:#FAFAF6;border-style:dashed;font-family:var(--mono);transform:rotate(-1.5deg);transform-origin:0 100%}
.x-po::before,.x-po::after{content:"";position:absolute;top:0;bottom:0;width:7px;background:radial-gradient(circle at 3.5px 7px,var(--line) 1.6px,transparent 2px) 0 0/7px 14px}
.x-po::before{left:0}.x-po::after{right:0}
.x-po .x-prt{font-family:var(--mono);color:var(--ink2);border-bottom-style:dashed}
.x-po .x-tbl{font-family:var(--mono);font-size:13.5px}
.x-po .x-tbl th,.x-po .x-tbl td{padding-left:4px}
.x-po .x-tbl th:first-child,.x-po .x-tbl td:first-child{padding-left:14px}
.x-po .x-tbl th:last-child,.x-po .x-tbl td:last-child{padding-right:14px}
.x-pr .x-tbl tr.tot td{border-bottom:0;border-top:2px solid var(--ink);font-weight:600}
.x-po thead,.x-po tbody tr:not(.tot){display:none}
.x-pn{margin:26px 0 0 14%}
.x-stamp{position:absolute;left:46%;top:86px;z-index:2;transform:translate(-50%,-50%) rotate(3deg);padding:3px 10px;border:3px solid var(--ok);border-radius:4px;background:rgba(231,243,236,.88);color:var(--ok-ink);font-size:17px;line-height:1.1;font-weight:600;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
@container (min-width:560px){
 .x-mg{min-height:286px}
 .x-po{width:84%}
 .x-po thead{display:table-header-group}
 .x-po tbody tr:not(.tot){display:table-row}
 .x-po .x-tbl td{padding-top:15px;padding-bottom:15px}
 .x-pn{position:absolute;right:0;top:40px;width:68%;margin:0}
 .x-pn .x-tbl td,.x-pn .x-tbl th{padding-top:3px;padding-bottom:3px}
 .x-stamp{left:49.5%;top:245px;font-size:18px;padding:3px 12px}
}

/* video block: plain border, caption */
.x-vid{margin:0;max-width:960px}
.x-vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ink);border:1px solid var(--line);border-radius:4px}
.x-vid figcaption{margin-top:10px;font-size:15px;line-height:1.45;color:var(--ink2)}
.x-vl{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin-top:6px}
.x-vl span{font-size:15px;color:var(--ink2)}

/* story cards */
.x-cards{display:grid;gap:32px;margin-top:28px}
.x-card h3{margin:14px 0 6px}
.x-card p{max-width:34em;color:var(--ink2);font-size:17px}
@media (min-width:900px){.x-cards{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:40px}}
.x-art{position:relative;min-height:190px;padding:10px 12px 14px;background:var(--surf);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.x-art>.tag{margin-bottom:10px}
.x-two{display:grid;gap:8px 10px;align-items:start}
.x-bx{padding:8px 10px;background:var(--surf);border:1px solid var(--ink2);font-size:14px;line-height:1.35}
.x-bx b{display:block;font-weight:600;font-size:13.5px;color:var(--ink2)}
.x-bx span{display:block;padding:4px 0;border-bottom:1px solid var(--line)}
.x-bx span:last-child{border-bottom:0}
.x-gone{display:block;height:24px;border:1px dashed var(--ink2)}
.x-nv{font-weight:600;color:var(--ink)}

/* backup: server / copy / log diagram */
.x-fail{display:grid;gap:6px;max-width:820px}
.x-wire{position:relative;justify-self:center;min-height:50px;width:0;border-left:2px dashed var(--ink2)}
.x-wire em{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-style:normal;font-size:13.5px;white-space:nowrap;color:var(--ink2)}
@media (min-width:720px){.x-fail{grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr);align-items:center}.x-wire{width:100%;min-height:0;height:0;border-left:0;border-top:2px dashed var(--ink2)}.x-wire em{left:50%;top:8px;transform:translateX(-50%)}}
.x-fail+.x-fh{margin-top:18px}
.x-fh{max-width:30em;font-size:24px;line-height:1.15}
.x-fp{max-width:34em;margin-top:6px;color:var(--ink2)}

/* accordion (v7.ui.v1.js hooks: .v7-acc, .v7-acc-p.is-open, .v7-acc-b[aria-expanded]). List below 720 px and without scripting; yj's pick-5 flex accordion from 720 px. */
.v7-acc{margin-top:28px;border-top:2px solid var(--ink)}
.v7-acc-p{border-bottom:1px solid var(--line)}
.v7-acc-h{margin:0;font-size:inherit;letter-spacing:0}
.v7-acc-art{display:none}
.v7-acc-b{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:56px;padding:12px 0;border:0;background:none;color:var(--ink);font:600 20px/1.2 var(--sans);letter-spacing:-.01em;text-align:left;cursor:pointer}
.v7-acc-b::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ink2);border-radius:4px;font:500 20px/1 var(--sans);color:var(--ink2)}
.v7-acc-b[aria-expanded="true"]::after{content:"\2212"}
.v7-acc-b:focus-visible{outline-offset:-3px}
.v7-acc-body{display:none;padding:2px 0 24px}
.v7-acc-p.is-open .v7-acc-body{display:grid;gap:14px 40px}
.v7-acc-body>p{max-width:30em;color:var(--ink2);font-size:17px}
@media (scripting:none){.v7-acc-body{display:grid;gap:14px 40px}.v7-acc-b::after{display:none}}
@media (min-width:720px) and (scripting:enabled){
 .v7-acc{display:flex;gap:8px;height:400px;border-top:0}
 .v7-acc-p{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border:1px solid var(--line);background:var(--surf);border-radius:4px}
 .v7-acc-p.is-open{flex-grow:4}
 .v7-acc-b::after{display:none}
 .v7-acc-p:not(.is-open) .v7-acc-b{display:block;position:absolute;left:0;right:0;top:0;height:50%;padding:14px 12px;text-align:end;font-size:18px;writing-mode:vertical-rl;transform:rotate(180deg)}
 .v7-acc-p.is-open .v7-acc-b{padding:16px 22px 4px;font-size:22px}
 .v7-acc-p.is-open .v7-acc-body{display:block;padding:0 22px 16px}
 .v7-acc-p.is-open .v7-acc-body>p{margin-top:10px;max-width:none;font-size:16px;line-height:1.4}
 .v7-acc-p.is-open .x-led{max-width:none;padding:6px 14px 8px;font-size:15px}
 .v7-acc-p.is-open .x-led div{padding:6px 0}
 .v7-acc-p.is-open .x-led .sig{height:24px}
 .v7-acc-art{position:absolute;left:50%;top:calc(50% + 12px);width:46px;height:46px;transform:translateX(-50%)}
 .v7-acc-p:not(.is-open) .v7-acc-art{display:grid}
}
@media (min-width:900px) and (max-width:1099px) and (scripting:enabled){.v7-acc{height:380px}}
@media (min-width:1100px) and (scripting:enabled){
 .v7-acc{height:clamp(300px,22vw,340px)}
 .v7-acc-p.is-open .v7-acc-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:0 20px;align-items:start}
 .v7-acc-p.is-open .v7-acc-body>p{margin-top:2px}
 .v7-acc-p.is-open .x-led{font-size:14.5px}
 .v7-acc-p.is-open .x-led div{padding:4px 0}
}
@media (min-width:720px) and (scripting:enabled) and (prefers-reduced-motion:no-preference){.v7-acc-p{transition:flex-grow .45s cubic-bezier(.2,.7,.2,1)}}
@media (hover:hover) and (pointer:fine){.v7-acc-b:hover::after{border-color:var(--ink);color:var(--ink)}}
/* panel glyphs: the v7 art re-inked navy on white */
.x-gl{gap:4px;padding:7px;border:1px solid var(--line);border-radius:3px;background:var(--surf)}
.x-gl i{display:block;background:var(--navy)}
.gl-l{align-content:center}.gl-l i{height:5px;background:var(--navy-t)}.gl-l i:nth-child(2){width:45%;margin-inline:auto;background:var(--navy)}
.gl-g{grid-template-columns:repeat(4,1fr);align-content:center}.gl-g i{height:7px;background:var(--navy-t)}.gl-g i:last-child{background:var(--navy)}
.gl-s{align-content:start}.gl-s i{height:3px;background:var(--navy-t)}.gl-s i:last-child{background:var(--navy)}
.gl-t{grid-template-columns:1fr 1fr}.gl-t i{height:100%;background:var(--navy-t)}.gl-t i:first-child{background:var(--navy)}
.gl-r{align-content:center}.gl-r i{height:6px;background:var(--navy-t);border-left:4px solid var(--navy)}
.gl-e{grid-template-columns:1fr 1fr}.gl-e i{height:100%;background:var(--navy-t)}.gl-e i:last-child{background:none;border:1px dashed var(--navy)}
.gl-n{grid-template-columns:1fr}.gl-n i{height:100%;background:none;border:1.5px solid var(--navy-t)}

/* ledger: the drawn sample inside an accordion panel */
.x-led{max-width:520px;padding:10px 14px 12px;background:var(--surf);border:1px solid var(--line);border-radius:4px;font-size:16px;line-height:1.4}
.x-led>.tag{margin:2px 0 10px}
.x-led div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.x-led div:last-of-type{border-bottom:0}
.x-led div span:last-child{flex:none;text-align:right;font-weight:600}
.x-led small{display:block;font-size:13.5px;color:var(--ink2)}
.x-led .eq{justify-content:center;padding:2px 0;border-bottom:0;font-size:26px;line-height:1;font-weight:600;color:var(--ink2)}
.x-led .tt{border-top:2px solid var(--ink);border-bottom:0;font-weight:600}
.x-led .ac{justify-content:flex-start;border-bottom:0;color:var(--ink2)}
.x-led .sig{display:block;position:relative;height:30px;margin-top:4px;border-bottom:1.5px solid var(--ink2)}
.x-led .sig small{position:absolute;right:0;bottom:4px}
.x-led .ok{color:var(--ok-ink)}
.x-chip{align-self:center;padding:1px 10px;border:1px solid var(--ink2);border-radius:999px;font-size:13.5px;font-weight:600;white-space:nowrap}
.x-nr{text-decoration:underline dashed var(--ink2);text-underline-offset:4px}
.x-em{display:inline-block;vertical-align:middle;width:56px;height:18px;border:1px dashed var(--ink2)}

/* bars: two columns of equal daily or file counts */
.x-dist{max-width:640px;margin-top:28px}
.x-dist .x-art{padding-bottom:12px}
.x-row{display:grid;grid-template-columns:92px 1fr;align-items:end;gap:12px;margin-top:8px}
.x-row em{padding-bottom:4px;font-style:normal;font-size:14px;line-height:1.3;color:var(--ink2)}
.x-bars{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;align-items:end;height:60px;border-bottom:1px solid var(--ink2)}
.x-bars i{display:block;height:var(--h);background:var(--navy)}
.x-eqr span{padding-left:4px;font-size:26px;line-height:1;font-weight:600}
.x-lead{max-width:36em;margin-top:12px;color:var(--ink2)}

/* hr: before / after */
.x-ba{display:grid;gap:28px;margin-top:28px}
.x-ba>div{padding-top:16px;border-top:2px solid var(--ink)}
.x-ba h3{margin-bottom:6px}
.x-ba p{max-width:30em;color:var(--ink2)}
.x-nums{display:grid;gap:0;margin-top:18px}
.x-nums li{display:grid;grid-template-columns:11rem minmax(0,1fr);align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.x-nums b{white-space:nowrap;font-size:clamp(24px,5vw,30px);line-height:1;font-weight:600;letter-spacing:-.02em}
.x-nums span{font-size:17px;line-height:1.3}
@media (min-width:900px){.x-ba{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}}

/* samples index list */
.x-idx{margin-top:8px;border-top:2px solid var(--ink)}
.x-idx a{display:grid;gap:8px 24px;padding:20px 0 18px;border-bottom:1px solid var(--line);text-decoration:none}
.x-idx h2,.x-idx h3{font-size:24px}
.x-idx p{max-width:34em;color:var(--ink2);font-size:17px}
.x-idx .go{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:16px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.x-idx small{display:block;font-size:14.5px;color:var(--ink2)}
.x-thumb{position:relative;width:252px;max-width:100%;height:150px;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:var(--surf)}
.x-thumb .x-obj{position:absolute;left:0;top:0;width:700px;margin:0;padding:20px 22px 22px;border:0;transform:scale(.36);transform-origin:0 0}
.x-thumb .x-s{animation:none}
.x-thumb .x-tw small{color:#fff}
@media (min-width:800px){.x-idx a{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 160px;align-items:center}.x-idx--t a{grid-template-columns:252px minmax(0,1fr) minmax(0,1.1fr) 140px;gap:8px 28px}.x-idx .go{justify-content:flex-end}}
@media (hover:hover) and (pointer:fine){.x-idx a:hover h2,.x-idx a:hover h3{text-decoration:underline;text-underline-offset:.2em}}
.x-grp{margin:36px 0 10px;font-size:15px;font-weight:600;color:var(--ink2)}

/* demos: interactive mock UIs, re-skinned to the light system */
.dm-hero{padding:24px 0 8px}
.dm-eye{margin-bottom:10px;font-size:15px;font-weight:600;color:var(--ink2)}
.dm-chip{margin-bottom:14px}
.dm-h1{max-width:16em;font-size:clamp(34px,4.6vw,56px)}
.dm-lead{max-width:36em;margin-top:14px;color:var(--ink2)}
.dm-sec{padding:20px 0 32px}
.dm-doc{padding:16px 14px 18px;background:var(--surf);border:1px solid var(--line);border-top:2px solid var(--ink);border-radius:0 0 4px 4px}
.dm-doc-head{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:flex-start}
.dm-doc-t{font-size:clamp(22px,3vw,28px);line-height:1.15}
.dm-doc-s{margin-top:8px}
.dm-doc-foot{margin-top:16px;font-size:15px;color:var(--ink2)}
.dm-h2{margin-bottom:16px}
.dm button{font:inherit;color:inherit;cursor:pointer}
.dm-filter{display:flex;flex-wrap:wrap;gap:6px}
.dm-filter button{min-height:44px;padding:0 16px;border:1px solid var(--ink2);border-radius:4px;background:var(--surf);font-size:15px;font-weight:600}
.dm-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.dm-fix{margin-top:18px;border-top:2px solid var(--ink)}
.dm-fix>li{border-bottom:1px solid var(--line)}
.dm-row{display:grid;grid-template-columns:1.8em minmax(0,1fr) auto;align-items:start;gap:10px;width:100%;padding:14px 0;border:0;background:none;text-align:left}
.dm-row[aria-expanded="true"]{background:var(--acc-t);box-shadow:inset 3px 0 0 var(--acc);padding-left:10px;padding-right:10px}
.dm-n{padding-left:2px;font-size:20px;line-height:1.3;font-weight:600;color:var(--ink2)}
.dm-t{padding-top:2px;font-size:17px;font-weight:600;line-height:1.35}
.dm-t::after{content:"Show";display:block;margin-top:4px;font-size:14.5px;font-weight:500;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.dm-row[aria-expanded="true"] .dm-t::after{content:"Hide"}
.dm-imp{margin-top:2px;font-size:15px;font-weight:600;white-space:nowrap}
.dm-imp::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;background:currentColor;vertical-align:.04em}
.dm-imp--hi{color:var(--warn)}
.dm-imp--md{color:var(--ink2)}
.dm-imp--md::before{background:none;border:1.5px solid currentColor}
.dm-det{padding:2px 0 20px calc(1.8em + 10px)}
.dm-det dl{display:grid;gap:12px}
.dm-det dt{font-size:14px;font-weight:600;color:var(--ink2)}
.dm-det dd{max-width:60ch;margin-top:2px;font-size:16.5px;line-height:1.5}
.dm-steps{display:grid;gap:0;border-top:2px solid var(--ink)}
.dm-steps li{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--line)}
.dm-steps b{font-size:20px;line-height:1.2}
.dm-steps span{color:var(--ink2);font-size:17px}
@media (min-width:800px){.dm-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;border-top:0}.dm-steps li{border-top:2px solid var(--ink);border-bottom:0}.dm-doc{padding:22px 26px 26px}}
@media (max-width:520px){.dm-det{padding-left:0}}
.bh-grid{display:grid;gap:18px}
@media (min-width:900px){.bh-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;gap:24px}.bh-grid .dm-doc{padding-inline:26px}}
.bh-state{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:16px;padding:12px 16px;background:var(--ok-t);border-left:6px solid var(--ok);color:var(--ok-ink)}
.bh-state b{font-size:clamp(26px,4vw,34px);line-height:1.1;font-weight:600}
.bh-state span{font-size:16px;color:var(--ink2)}
.bh-state[data-s="alert"]{background:var(--soft);border-left:6px double var(--ink);color:var(--ink)}
.bh-rec{margin-top:12px;border-top:2px solid var(--ink)}
.bh-rec>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;padding:11px 0;border-bottom:1px solid var(--line)}
.bh-rec dt{font-size:16px;color:var(--ink2)}
.bh-rec dd{margin-left:auto;font-size:17px;font-weight:600;text-align:right}
.bh-rec dd.is-warn{text-decoration:underline dashed;text-underline-offset:4px}
.bh-restore{margin-top:16px;font-size:16.5px;line-height:1.5}
.bh-restore b{display:block;margin-bottom:2px;font-size:20px;line-height:1.2}
.bh-quote{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink2)}
.bh-nights{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;min-height:122px;margin-top:14px}
@media (min-width:520px){.bh-nights{gap:6px}}
.bh-nights button{display:grid;place-content:center;gap:2px;width:100%;min-height:58px;padding:4px 0;border:1px solid var(--line);border-radius:4px;background:var(--soft)}
.bh-nights button[data-s="alert"]{border:2px dashed var(--ink)}
.bh-nights button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.bh-d{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.bh-n{font-size:20px;line-height:1;font-weight:600}
.bh-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:14.5px;color:var(--ink2)}
.bh-key i{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;background:var(--soft);border:1px solid var(--ink2)}
.bh-key i.w{background:var(--surf);border:2px dashed var(--ink)}
.dm-note{margin-top:6px}
@media (forced-colors:active){.x-stamp,.x-ok,.bh-state{border:1px solid CanvasText}.x-bays i{border:1px solid CanvasText}}
.x-bx i.l{display:block;height:1px;margin-top:10px;background:var(--line)}
.x-sd{background:var(--navy-t)}
.x-id{font-family:var(--mono);font-weight:600;font-size:14px}
.x-sg{display:block;height:22px;margin-top:6px;border-bottom:1.5px solid var(--ink2)}
.x-tbl tr.sel td{border-top:2px solid var(--ink)}
.x-tbl tr.sel td:first-child{box-shadow:none}
@media (min-width:1180px){.x-hg--w{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}}
.x-grp--first{margin-top:0}
.x-art+.x-fh{margin-top:20px}
.x-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.x-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.x-cap{margin-top:8px;font-size:14.5px}
.x-dist+.sheet{margin-top:28px}
.x-hg--w h1 span{white-space:nowrap}
@media (max-width:340px){.x-hg--w h1{font-size:34px}}
@media (min-width:1180px){.x-hg--w h1{font-size:clamp(40px,3.7vw,54px)}}