/* Component classes for the server-rendered catalogue.
   Every value is taken from the inline styles of the design's .dc.html files (catalogue.css has no component classes),
   so the markup stays composable in Jinja. Source file for each block is named in the comment. No new colours. */

/* No global box-sizing reset: catalogue.css has none, so a box with padding or a border renders at the mockup's size
   (a gap chip is 28 px tall, a bordered link 46 px). border-box is set only where a .dc.html sets it. */
.ct-page{min-height:100vh;background:var(--bg);color:var(--ink)}
.ct-container{max-width:1440px;margin:0 auto;padding:20px clamp(16px,2.5vw,40px) 64px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}
.ct-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* page footer: the data-as-of line, how to cite, and the agent links (02 §3 rule 7) */
.ct-footer{max-width:1440px;margin:0 auto;padding:16px clamp(16px,2.5vw,40px) 32px;box-sizing:border-box;border-top:1px solid var(--line);color:var(--ink2);font-size:12.5px;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.ct-footer p{margin:0}
.ct-skip{position:absolute;left:-999px;top:0;background:var(--invert-bg);color:var(--invert-ink);padding:8px 12px;z-index:100}.ct-skip:focus{left:8px;top:8px}

/* ---- Header.dc.html ---- */
.ct-header{background:var(--surface);border-bottom:1px solid var(--line)}
.ct-header__bar{display:flex;align-items:center;justify-content:center;gap:8px;min-height:26px;padding:3px 16px;background:var(--invert-bg);color:var(--invert-ink);font-size:12px;font-weight:500;text-align:center}
.ct-header__diamond{width:7px;height:7px;flex:none;background:var(--quote-line);transform:rotate(45deg)}
.ct-header__row{display:flex;align-items:center;gap:16px 20px;min-height:64px;padding:0 32px;flex-wrap:wrap}
.ct-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.ct-logo__mark{display:block;flex:none;width:27px;height:20px}
.ct-logo__text{display:flex;flex-direction:column;line-height:1.1}.ct-logo__text b{font-size:16px;font-weight:600;letter-spacing:-.01em}.ct-logo__text span{font-size:11px;color:var(--ink-3)}
.ct-nav{display:flex;align-items:center;gap:2px}
.ct-nav a{display:flex;align-items:center;min-height:44px;padding:0 10px;white-space:nowrap;font-size:14px;color:var(--ink-2);text-decoration:none}
.ct-nav a:hover{color:var(--ink);background:var(--surface-2)}
.ct-nav a[aria-current=page]{font-weight:600;color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.ct-search{flex:1 1 160px;max-width:340px;min-width:160px;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface-2);color:var(--ink-3);font-size:14px}
.ct-search__icon{width:11px;height:11px;border:1.5px solid var(--ink-3);border-radius:50%;flex:none}
.ct-search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14px;color:var(--ink)}
.ct-search:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.ct-header__tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}

/* ---- controls (Component Sheet §14, Header seg/switch) ---- */
.ct-seg{display:flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.ct-seg button,.ct-seg a{min-height:44px;padding:0 12px;border:0;font-size:13px;cursor:pointer;background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;text-decoration:none}
.ct-seg [aria-pressed=true],.ct-seg [aria-current=true]{font-weight:600;background:var(--invert-bg);color:var(--invert-ink)}
.ct-switch{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px 0 8px;border:0;background:none;font-size:13px;font-weight:500;cursor:pointer}
.ct-switch__track{position:relative;width:34px;height:20px;border-radius:999px;box-sizing:border-box;background:var(--surface-3);border:1px solid var(--line-2);transition:background .15s}
.ct-switch__knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ink-3);transition:left .15s}
.ct-switch[aria-checked=true] .ct-switch__track{background:var(--t-official);border-color:var(--t-official)}
.ct-switch[aria-checked=true] .ct-switch__knob{left:16px;background:var(--surface)}
.ct-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;color:var(--ink)}
.ct-btn:hover{background:var(--surface-2);color:var(--ink)}
/* Component Sheet §14 disabled: still readable, clearly not a control */
.ct-btn:disabled,.ct-btn[aria-disabled=true],.ct-seg button:disabled:not([aria-pressed=true]){border-color:var(--line);background:var(--surface-2);color:var(--ink-3);cursor:not-allowed}.ct-btn--primary{background:var(--invert-bg);color:var(--invert-ink);border:0}.ct-btn--primary:hover{background:var(--invert-bg);color:var(--invert-ink);opacity:.9}
.ct-field{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%;font-size:12.5px;color:var(--ink-2)}
.ct-field select{max-width:100%;min-width:0;text-overflow:ellipsis}
.ct-field select,.ct-field input[type=text],.ct-field input[type=number],.ct-field input[type=search]{min-height:44px;padding:0 10px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);font-size:14px;color:var(--ink)}
/* The native arrow sits flush against the border; draw it instead, inset 14px. Stroke is --ink-2 per theme. */
:root,[data-theme=light]{--ct-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23434b58' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-theme=dark]{--ct-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b5bdc9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ct-field input[type=text],.ct-field input[type=search]{padding:0 12px}
/* text inputs are 44 px tall like the selects and buttons beside them: the Checker's input, the one text input a screen
   draws, sets border-box (the Component Sheet's does not, and renders 46 px; the screen wins) */
.ct-field input[type=text],.ct-field input[type=number],.ct-field input[type=search],.ct-field input[type=date],.ct-stepper>input{box-sizing:border-box}
.ct-field select{-webkit-appearance:none;appearance:none;padding-right:38px;background:var(--surface) var(--ct-chev) no-repeat right 14px center/12px 8px}
.ct-chip-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:13px;color:var(--ink-2);text-decoration:none;cursor:pointer}
.ct-chip-btn[aria-pressed=true],.ct-chip-btn[aria-current=true]{background:var(--invert-bg);color:var(--invert-ink);border-color:var(--invert-bg);font-weight:600}

/* ---- Status.dc.html ---- */
.ct-status{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;border:1px solid color-mix(in oklab,var(--c) 35%,transparent);color:var(--c);background:var(--cbg)}
.ct-status--lg{height:28px;padding:0 10px;font-size:13px}
.ct-status__dot{flex:none;width:8px;height:8px;box-sizing:border-box}.ct-status--lg .ct-status__dot{width:9px;height:9px}
.ct-status--announced{--c:var(--info);--cbg:var(--info-bg)}.ct-status--announced .ct-status__dot{border:1.5px solid var(--c);border-radius:50%}
.ct-status--current{--c:var(--ok);--cbg:var(--ok-bg)}.ct-status--current .ct-status__dot{background:var(--c);border-radius:50%}
.ct-status--legacy{--c:var(--warn);--cbg:var(--warn-bg)}.ct-status--legacy .ct-status__dot{border:1.5px solid var(--c);border-radius:50%;background:linear-gradient(90deg,var(--c) 50%,transparent 50%)}
.ct-status--eol{--c:var(--bad);--cbg:var(--bad-bg)}.ct-status--eol .ct-status__dot{background:var(--c);border-radius:1px}
.ct-status__scope{font-weight:400;opacity:.85}

/* ---- Gap.dc.html ---- */
.ct-gap{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:2px 8px 2px 4px;border-radius:4px;font-size:12px;font-weight:500;line-height:1.2;color:var(--gap);background:var(--gap-bg);border:1px dashed var(--line-2)}
.ct-gap__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:15px;height:15px;border-radius:50%;border:1.25px solid currentColor;font-size:10px;font-weight:600;line-height:1}
.ct-gap--quote_only{color:var(--quote);background:var(--quote-bg);border:1px solid var(--quote-line)}
.ct-gap--muted{color:var(--ink-3);opacity:.7}

/* ---- Evidence.dc.html ---- */
.ct-ev{position:relative;display:inline-flex;vertical-align:middle}
.ct-ev__btn{display:inline-flex;align-items:center;min-height:44px;margin:-11px 0;padding:0;border:0;background:none;cursor:pointer}
.ct-ev__chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border-radius:4px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;color:var(--tc);background:var(--tbg);border:1px solid transparent}
.ct-ev__chip small{font-size:inherit;opacity:.85}
.ct-ev--derived .ct-ev__chip{border:1px dashed var(--line-2)}
.ct-ev--open .ct-ev__chip{box-shadow:inset 0 0 0 1px var(--tc)}
.ct-ev__shape{flex:none;box-sizing:content-box;display:block}
.ct-ev--circle .ct-ev__shape{width:8px;height:8px;border-radius:50%;background:var(--tc)}
.ct-ev--square .ct-ev__shape{width:7px;height:7px;border-radius:1px;background:var(--tc)}
.ct-ev--diamond .ct-ev__shape{width:6px;height:6px;background:var(--tc);transform:rotate(45deg)}
.ct-ev--hsquare .ct-ev__shape{width:5px;height:5px;border:1.5px solid var(--tc)}
.ct-ev--triangle .ct-ev__shape{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-bottom:8px solid var(--tc)}
.ct-ev--hdiamond .ct-ev__shape{width:5px;height:5px;border:1.5px solid var(--tc);transform:rotate(45deg)}
.ct-ev--bar .ct-ev__shape{width:9px;height:3px;border-radius:1px;background:var(--tc)}
.ct-ev--vbar .ct-ev__shape{width:3px;height:10px;border-radius:1px;background:var(--tc)}
.ct-ev--target .ct-ev__shape{width:6px;height:6px;border-radius:50%;border:1.5px solid var(--tc);background:radial-gradient(circle,var(--tc) 0 1.5px,transparent 2px)}
.ct-ev--hcircle .ct-ev__shape{width:5px;height:5px;border-radius:50%;border:1.5px solid var(--tc)}
.ct-ev--dash .ct-ev__shape{width:10px;height:0;border-top:2px dashed var(--tc)}
.ct-ev__bang{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;background:var(--bad);color:var(--surface);font-size:10px;font-weight:600}
.ct-ev__pop{display:none;position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:300px;flex-direction:column;gap:8px;padding:12px;background:var(--surface);border:1px solid var(--line-2);border-radius:6px;box-shadow:var(--shadow);font-size:12.5px;line-height:1.45;color:var(--ink);text-align:left;white-space:normal}
/* open state is driven by app.js (hover, focus, click to pin, Esc), as Evidence.dc.html's show/hide/toggle */
.ct-ev--open .ct-ev__pop{display:flex}
.ct-ev__raw{font-weight:500}
.ct-ev__open{display:inline-flex;align-items:center;align-self:flex-start;min-height:32px;font-size:12.5px;font-weight:500}
/* Product Page cite: the design defines the citation text and its toast but draws no button; these follow "Open source" */
.ct-ev__acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.ct-ev__cite{min-height:32px;padding:0;border:0;background:none;font:inherit;font-size:12.5px;font-weight:500;color:var(--link);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.ct-ev__cite:hover{color:var(--ink)}
.ct-section__tools{display:flex;justify-content:flex-end;margin:-6px 0 6px}
.ct-citebtn{min-height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer}.ct-citebtn:hover{color:var(--ink)}
.ct-ev__f{display:flex;flex-direction:column;gap:2px}.ct-ev__k{color:var(--ink-3);font-size:11.5px}
.ct-ev__pop .ct-mono{font-size:11.5px;color:var(--ink-2);word-break:break-all}
.ct-ev__facts{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--ink-2);font-size:11.5px}.ct-ev__facts--top{padding-top:6px;border-top:1px solid var(--line)}
.ct-ev__warn{padding:6px 8px;border-radius:4px;background:var(--bad-bg);color:var(--bad);font-size:12px}
.ct-ev__note{display:none;padding:6px 8px;border-radius:4px;background:var(--gap-bg);color:var(--gap);font-size:12px}
.ct-mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
/* tier colours: --tc / --tbg come from the t-* tokens */
.ct-ev[data-tier=official],[data-tier=official]{--tc:var(--t-official);--tbg:var(--t-official-bg)}
.ct-ev[data-tier=lab],[data-tier=internal]{--tc:var(--t-lab);--tbg:var(--t-lab-bg)}
[data-tier=partner]{--tc:var(--t-partner);--tbg:var(--t-partner-bg)}[data-tier=vendor]{--tc:var(--t-vendor);--tbg:var(--t-vendor-bg)}
[data-tier=reseller]{--tc:var(--t-reseller);--tbg:var(--t-reseller-bg)}[data-tier=rental]{--tc:var(--t-rental);--tbg:var(--t-rental-bg)}
[data-tier=press]{--tc:var(--t-press);--tbg:var(--t-press-bg)}[data-tier=regulator]{--tc:var(--t-regulator);--tbg:var(--t-regulator-bg)}
[data-tier=financial]{--tc:var(--t-financial);--tbg:var(--t-financial-bg)}[data-tier=community]{--tc:var(--t-community);--tbg:var(--t-community-bg)}
[data-tier=derived]{--tc:var(--t-derived);--tbg:var(--t-derived-bg)}
/* "Display legacy products" (home page): legacy-only family cards, sections and counts are hidden while it is off */
[data-legacy=off] [data-legacy-only]{display:none}
/* "Official only": non-official values are greyed in place, never hidden (Product Page, Catalogue Screens decision) */
/* muted (Evidence.dc.html): text, shape and ring all take --ink-3; the ring is off */
[data-official=on] .ct-ev[data-tier]:not([data-tier=official]){--tc:var(--ink-3)}
[data-official=on] .ct-ev[data-tier]:not([data-tier=official]) .ct-ev__chip{background:transparent;border:1px dashed var(--line-2);box-shadow:none}
[data-official=on] .ct-ev[data-tier]:not([data-tier=official]) .ct-ev__note{display:block}
/* "Not counted in completeness" is only true on pages whose meters drop under Official only (app.js sets data-counts) */
.ct-ev__notecount{display:none}[data-counts] .ct-ev__notecount{display:inline}
/* the value is greyed (design: opacity .45 on the value). Done on the text colour, because an opacity on the cell
   would also fade the chip's popover; chips and gaps set their own colours */
[data-official=on] [data-valtier]:not([data-valtier=official]):not([data-valtier=""]){color:color-mix(in oklab,var(--ink) 45%,transparent)}
[data-official=on] [data-valtier]:not([data-valtier=official]):not([data-valtier=""]) .ct-specval,
html[data-units=imperial][data-official=on] [data-valtier]:not([data-valtier=official]):not([data-valtier=""]) .ct-unit__i{color:inherit}
.ct-official-banner{display:none;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:6px;background:var(--t-official-bg);color:var(--t-official);font-size:13.5px;font-weight:500}
[data-official=on] .ct-official-banner{display:flex}

/* ---- inferred / low confidence / chips ---- */
.ct-inferred{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:4px;background:var(--inferred-bg);color:var(--inferred);font-size:11.5px;font-weight:600}
.ct-lowconf{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:4px;background:var(--warn-bg);color:var(--warn);font-size:11.5px;font-weight:600}
.ct-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--info-bg);color:var(--info)}
.ct-pill--ok{background:var(--ok-bg);color:var(--ok)}.ct-pill--warn{background:var(--warn-bg);color:var(--warn)}.ct-pill--bad{background:var(--bad-bg);color:var(--bad)}.ct-pill--gap{background:var(--gap-bg);color:var(--gap)}
.ct-tag{display:inline-block;padding:4px 8px;border:1px solid var(--line);border-radius:4px;font-size:12.5px}
.ct-chiplist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ct-stale{display:inline-block;align-self:flex-start;padding:1px 6px;border-radius:4px;background:var(--warn-bg);color:var(--warn);font-size:11.5px;font-weight:600;white-space:nowrap}
/* Component Sheet §03 conflict: two overlapping squares read without colour */
.ct-claims__btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-10px 0;padding:0 6px;border:0;background:none;color:var(--conflict);font-size:12.5px;font-weight:600;cursor:pointer}
.ct-claims__icon{position:relative;flex:none;width:15px;height:12px}
.ct-claims__icon i{position:absolute;width:8px;height:8px;box-sizing:border-box;border-radius:2px}
.ct-claims__icon i:first-child{left:0;top:0;border:1.5px solid var(--conflict)}.ct-claims__icon i+i{right:0;bottom:0;background:var(--conflict)}
.ct-claims{align-self:stretch;margin-top:8px;border:1px solid var(--conflict);border-radius:6px;overflow:hidden;color:var(--ink);font-weight:400}
.ct-claims[hidden]{display:none}
.ct-claims__head{padding:8px 12px;background:var(--conflict-bg);color:var(--conflict);font-size:12.5px;font-weight:600}
.ct-claims__row{display:grid;grid-template-columns:minmax(90px,3fr) minmax(120px,2fr) auto;gap:12px;align-items:center;min-height:44px;padding:0 12px;border-top:1px solid var(--line);font-size:13px}
.ct-claims__row b{font-weight:600;overflow-wrap:anywhere}.ct-claims__row>span{color:var(--ink-2);overflow-wrap:anywhere}
@media (max-width:700px){.ct-claims__row{grid-template-columns:minmax(0,1fr) auto}.ct-claims__row>span{grid-column:1/-1;order:3}}
/* Component Sheet §16 search: no results, with "Did you mean" rows above */
.ct-searchempty{display:flex;flex-direction:column;max-width:560px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);font-size:13px}
.ct-searchempty__row{display:flex;flex-direction:column;gap:2px;padding:10px 12px;min-height:44px;box-sizing:border-box;text-decoration:none;color:var(--ink)}
.ct-searchempty__row+.ct-searchempty__row{border-top:1px solid var(--line)}
a.ct-searchempty__row b{font-weight:600;text-decoration:underline}a.ct-searchempty__row:hover{background:var(--surface-2)}
.ct-flag{align-self:flex-start;display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border-radius:4px;background:var(--warn-bg);color:var(--warn);font-size:12px;font-weight:600;white-space:nowrap}
/* Component Sheet §18 vocabulary chips */
.ct-vchip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:4px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.ct-vchip--ok{background:var(--ok-bg);color:var(--ok);border:0}.ct-vchip--info{background:var(--info-bg);color:var(--info);border:0}
.ct-vchip--warn{background:var(--warn-bg);color:var(--warn);border:0}.ct-vchip--bad{background:var(--bad-bg);color:var(--bad);border:0}
.ct-vchip--gap{background:var(--gap-bg);color:var(--gap);border:0}.ct-vchip--quote{background:var(--quote-bg);color:var(--quote);border:0}
/* Component Sheet §16 toast */
.ct-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 64px);padding:12px 16px;border-radius:6px;background:var(--invert-bg);color:var(--invert-ink);font-size:13px;box-shadow:var(--shadow)}
/* Component Sheet §16 cookie notice, non-blocking: fixed in the corner until OK (app.js) */
.ct-cookie{position:fixed;left:16px;bottom:16px;z-index:40;width:min(360px,calc(100vw - 32px));box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);box-shadow:var(--shadow);font-size:12.5px;line-height:1.45}
.ct-cookie[hidden]{display:none}.ct-cookie__row{display:flex;gap:8px}
.ct-cookie__ok{min-height:44px;padding:0 12px;border:0;border-radius:6px;background:var(--invert-bg);color:var(--invert-ink);font-size:13px;font-weight:600;cursor:pointer}
.ct-cookie__row a{display:flex;align-items:center;min-height:44px;font-size:13px}
.ct-toast:empty{display:none}.ct-toast::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.ct-differs{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px;background:var(--ink);color:var(--surface);font-size:10.5px;font-weight:600}
.ct-badge-current{display:inline-block;padding:1px 6px;border-radius:3px;background:var(--ink);color:var(--surface);font-size:10.5px;font-weight:600}
.ct-placeholder{padding:1px 6px;border-radius:3px;background:var(--gap-bg);color:var(--gap);font-size:11px;font-weight:600}

/* ---- units: both twins are always in the DOM; the toggle only reorders/mutes (Product Page v/c marks) ---- */
.ct-unit{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.ct-unit__side{white-space:nowrap}.ct-unit__side .ct-mark{margin-left:4px}
.ct-unit__m{order:0;font-weight:600}.ct-unit__i{order:1;color:var(--ink-3);font-weight:400}
.ct-unit__i::before{content:"("}.ct-unit__i::after{content:")"}
html[data-units=imperial] .ct-unit__i{order:0;color:var(--ink);font-weight:600}html[data-units=imperial] .ct-unit__m{order:1;color:var(--ink-3);font-weight:400}
html[data-units=imperial] .ct-unit__i::before,html[data-units=imperial] .ct-unit__i::after{content:none}
html[data-units=imperial] .ct-unit__m::before{content:"("}html[data-units=imperial] .ct-unit__m::after{content:")"}
/* Compare cells (Compare.dc.html v/sub): one line, the selected system as the value (14px/600), the other in brackets at 12px, ink-2 */
.ct-unit--cell{flex-wrap:nowrap}.ct-unit--cell .ct-unit__side:only-child{white-space:normal}
html .ct-unit--cell .ct-unit__side{font-size:12px;font-weight:400;color:var(--ink-2)}
html:not([data-units=imperial]) .ct-unit--cell .ct-unit__m,html[data-units=imperial] .ct-unit--cell .ct-unit__i{font-size:14px;font-weight:600;color:var(--ink)}
.ct-mark{font-size:11px;font-weight:600;color:var(--ink-3)}
.ct-null{color:var(--ink-3)}

/* ---- section shell (Product Page) ---- */
.ct-layout{display:flex;gap:24px;align-items:flex-start}
.ct-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.ct-section{background:var(--surface);border:1px solid var(--line);border-radius:6px}
.ct-section>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px;cursor:pointer;box-sizing:border-box}
.ct-section>summary::-webkit-details-marker{display:none}
.ct-section__chev{flex:none;width:7px;height:7px;border-right:1.75px solid var(--ink-2);border-bottom:1.75px solid var(--ink-2);transform:rotate(-45deg);transition:transform .15s}
.ct-section[open]>summary .ct-section__chev{transform:rotate(45deg) translateY(-2px)}
.ct-section__num{font-size:12px;font-weight:600;color:var(--ink-3);width:18px;flex:none}
.ct-section__title{display:flex;flex-direction:column;gap:2px;min-width:0}.ct-section__title b{font-size:16px;font-weight:600}.ct-section__title span{font-size:12.5px;color:var(--ink-3);font-weight:400}
.ct-section__meta{margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;color:var(--ink-3)}
.ct-bar{display:block;width:44px;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden}.ct-bar>i{display:block;height:100%;background:var(--ink-2)}
/* "Official only" (Product Page): counts drop to the official figure, bars turn official blue, a note says what depends on others */
.ct-meter{display:flex;align-items:center;gap:8px}
.ct-meter--off,.ct-cnt--off{display:none}
[data-official=on] .ct-meter--all,[data-official=on] .ct-cnt--all{display:none}
[data-official=on] .ct-meter--off{display:flex}[data-official=on] .ct-cnt--off{display:inline}[data-official=on] .ct-bar.ct-cnt--off{display:block}
[data-official=on] .ct-bar>i{background:var(--t-official)}
.ct-depnote{display:none;align-items:center;gap:8px;margin:0 16px 12px;padding:8px 10px;border-radius:4px;background:var(--gap-bg);color:var(--gap);font-size:12.5px;font-weight:500}
.ct-depnote>span{flex:none;width:7px;height:7px;box-sizing:border-box;border:1.5px solid var(--gap);border-radius:50%}
[data-official=on] .ct-depnote{display:flex}
/* Component Sheet §10 empty section: dashed, "Never updated" */
.ct-section--empty{border:1px dashed var(--line-2)}
.ct-section__body{border-top:1px solid var(--line);padding:16px}
.ct-h3{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--ink-3)}.ct-h3--ink{font-size:13px;color:var(--ink)}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.ct-stack{display:flex;flex-direction:column;gap:8px}
.ct-box{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:6px}
.ct-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;font-size:13.5px}
.ct-list>*{display:flex;flex-direction:column;gap:6px;padding:10px 12px}.ct-list>*+*{border-top:1px solid var(--line)}
.ct-note{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:4px;background:var(--gap-bg);color:var(--gap);font-size:12.5px;font-weight:500}
.ct-dim{color:var(--ink-3)}.ct-sub{font-size:12.5px;color:var(--ink-3)}.ct-ink2{color:var(--ink-2)}
.ct-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-size:13.5px}
.ct-sharebar{align-items:flex-end;gap:8px 12px}.ct-sharebar>.ct-dim{display:inline-flex;align-items:center;min-height:44px;margin-left:12px}
/* section rows (Product Page and Core Service Page `sec.rows`): 48 px plus 4 px padding (6 px on the service page) */
.ct-kv{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:12px;align-items:center;min-height:48px;padding:4px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ct-svcpage .ct-kv{grid-template-columns:minmax(140px,240px) minmax(0,1fr);padding:6px 0}
.ct-kv dt{color:var(--ink-2)}.ct-kv dd{margin:0;font-weight:500}.ct-kvs{margin:0;border-top:1px solid var(--line)}

/* ---- tables (Product Page spec table, Compare) ---- */
.ct-scroll{overflow-x:auto;overflow-y:hidden;margin:0 -16px;padding:0 16px}
.ct-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.ct-table caption{text-align:left;padding:0 0 10px;font-size:12.5px;color:var(--ink-3)}
.ct-table thead th{text-align:left;padding:8px 12px;font-size:12px;font-weight:500;color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.ct-table thead th:first-child,.ct-table tbody th[scope=row]{position:sticky;left:0;z-index:1;background:var(--surface)}
.ct-table tbody th[scope=colgroup]{text-align:left;padding:14px 0 6px;font-size:12px;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line)}
.ct-table tbody th[scope=row]{text-align:left;vertical-align:top;padding:12px 12px 12px 0;font-weight:400;color:var(--ink-2);border-bottom:1px solid var(--line)}
.ct-table td{vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.ct-table tr:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ct-table tr.is-diff td,.ct-table tr.is-diff th[scope=row]{background:var(--hl)}
.ct-table .ct-num{text-align:right;white-space:nowrap}
.ct-varies{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3)}
.ct-varies::before{content:"";width:6px;height:6px;border:1.5px solid var(--ink-3);transform:rotate(45deg)}
.ct-cond{font-size:12.5px;color:var(--ink-2)}

/* ---- right rail (Product Page <aside>) ---- */
.ct-rail{width:300px;box-sizing:content-box;flex:none;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:13px}
.ct-rail__block{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}.ct-rail__block:last-child{border-bottom:0}
.ct-rail__line{display:flex;justify-content:space-between;align-items:center;gap:12px}.ct-rail__line>span:first-child{color:var(--ink-3)}
.ct-rail__title{font-size:12px;font-weight:600;color:var(--ink-3)}
.ct-conv{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:2px;font-size:12px;color:var(--ink-3);text-align:left}.ct-conv .ct-vchip{height:auto;min-height:24px;white-space:normal}
.ct-quote{display:inline-flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left}.ct-ask{font-size:12px;color:var(--ink-3)}
.ct-price{display:flex;flex-direction:column;gap:2px}.ct-price__top{display:flex;justify-content:space-between;align-items:baseline}.ct-price b{font-size:15px;font-weight:600}.ct-price__meta{font-size:12px;color:var(--ink-3)}
.ct-sources{max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:6px;font-size:12.5px;margin:0;padding:0;list-style:none}
.ct-sources li{display:flex;flex-direction:column;gap:2px}
/* ---- variant picker ---- */
.ct-variants{display:flex;flex-direction:column;gap:6px;flex:0 1 300px;min-width:240px}
.ct-variants__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ct-variant{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:2px;align-items:flex-start;justify-content:center;min-height:52px;padding:0 14px;box-sizing:border-box;border:1px solid var(--line-2);border-radius:6px;background:transparent;cursor:pointer;text-align:left;font-size:14px}
.ct-variant small{font-size:12px;color:var(--ink-3)}
/* the design's variant is a <button> (border-box): 52 px with a 1 px border, or a 2 px one when chosen */
.ct-variant[aria-checked=true]{background:var(--surface);border:2px solid var(--ink)}
.ct-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ct-title h1{margin:0;font-size:clamp(24px,3.2vw,32px);line-height:1.15;font-weight:600;letter-spacing:-.015em}
.ct-lede{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:760px}.ct-lede--tool{font-size:14.5px}
.ct-crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink-3)}.ct-crumbs [aria-current=page]{color:var(--ink-2)}
.ct-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.ct-tabs a{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;color:var(--ink-2);text-decoration:none;font-size:14px;white-space:nowrap}
.ct-tabs a[aria-current=page]{font-weight:600;color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.ct-tabs a:hover{background:var(--surface-2)}.ct-tabs .ct-count{font-size:12px;color:var(--ink-3)}

/* ---- compatibility groups / protocol cells (Compatibility Checker, Product Page §03) ---- */
.ct-group{border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.ct-group{overflow:hidden}
.ct-group>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;cursor:pointer;font-size:15px;font-weight:600;background:var(--gcbg);color:var(--gc)}
.ct-group>summary::-webkit-details-marker{display:none}
.ct-group__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--gc);font-size:11px;box-sizing:border-box;color:var(--gc)}
.ct-group--full{--gc:var(--ok);--gcbg:var(--ok-bg)}.ct-group--limited{--gc:var(--warn);--gcbg:var(--warn-bg)}.ct-group--local_only{--gc:var(--info);--gcbg:var(--info-bg)}
.ct-group--none{--gc:var(--bad);--gcbg:var(--bad-bg)}.ct-group--unknown{--gc:var(--gap);--gcbg:var(--gap-bg)}
.ct-group__count{margin-left:auto;font-size:13px;font-weight:500}
.ct-edge{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-top:1px solid var(--line);font-size:13.5px}
.ct-edge:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ct-edge__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}.ct-edge__head>b{font-size:14.5px;font-weight:600}
.ct-edge__summary{font-size:13.5px;color:var(--ink)}
.ct-levelnote{padding:1px 6px;border-radius:3px;border:1px solid var(--line-2);font-size:11.5px;color:var(--ink-2)}
.ct-edge__facts{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 16px;padding:10px 12px;border-radius:4px;background:var(--surface-2);font-size:12.5px}
.ct-edge__facts>div{display:flex;flex-direction:column;gap:2px}.ct-edge__facts dt{color:var(--ink-3)}.ct-edge__facts dd{margin:0;font-weight:500}
.ct-edge__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:12.5px;color:var(--ink-3)}
.ct-cell{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:4px;font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--gc);background:var(--gcbg)}
.ct-state--ok{--gc:var(--ok);--gcbg:var(--ok-bg)}.ct-state--warn{--gc:var(--warn);--gcbg:var(--warn-bg)}.ct-state--bad{--gc:var(--bad);--gcbg:var(--bad-bg)}.ct-state--gap{--gc:var(--gap);--gcbg:var(--gap-bg)}
.ct-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;font-size:12px;color:var(--ink-2)}
.ct-legend>span{display:flex;align-items:center;gap:5px}.ct-legend b{font-weight:600}
.ct-legend .ok{color:var(--ok)}.ct-legend .warn{color:var(--warn)}.ct-legend .bad{color:var(--bad)}.ct-legend .gap{color:var(--gap)}
.ct-table--plans thead th{padding-top:10px;padding-bottom:10px;vertical-align:bottom}.ct-table--plans thead th:first-child{padding-left:0}
.ct-table--proto{min-width:760px;font-size:13px}.ct-table--proto tbody th[scope=row]{padding:10px 12px 10px 0;font-weight:600;color:var(--ink)}
.ct-table--proto td{padding:10px}.ct-table--proto .ct-basis{color:var(--ink-2);font-size:12.5px}
.ct-table--gating{min-width:760px}.ct-table--gating tbody th[scope=row]{font-weight:500;color:var(--ink)}
.ct-derived{padding:1px 6px;border-radius:3px;border:1px solid var(--line-2);font-size:11px;font-weight:600;color:var(--ink-2)}
.ct-lockin{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.ct-lockin>div{display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:13px;align-items:flex-start}
.ct-lockin>div>span:first-child{font-size:12px;color:var(--ink-3)}.ct-lockin b{font-weight:500;line-height:1.45}
.ct-fit--core{--gc:var(--ok);--gcbg:var(--ok-bg)}.ct-fit--supporting{--gc:var(--info);--gcbg:var(--info-bg)}.ct-fit--optional{--gc:var(--warn);--gcbg:var(--warn-bg)}.ct-fit--not_suitable{--gc:var(--bad);--gcbg:var(--bad-bg)}
.ct-count-row{display:flex;gap:10px;font-size:13px;flex-wrap:wrap}.ct-count-row .ok{color:var(--ok)}.ct-count-row .warn{color:var(--warn)}.ct-count-row .info{color:var(--info)}.ct-count-row .bad{color:var(--bad)}.ct-count-row .gap{color:var(--gap)}.ct-count-row span{font-weight:600}

/* ---- cards / lists (home, product list) ---- */
.ct-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ct-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);text-decoration:none}
.ct-card:hover{border-color:var(--line-2);background:var(--surface-2);color:var(--ink)}
.ct-card h3,.ct-card h2{margin:0;font-size:15px;font-weight:600}.ct-card p{margin:0;font-size:13px;color:var(--ink-2)}
.ct-card__meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12.5px;color:var(--ink-3);align-items:center}
.ct-h2{margin:8px 0 4px;font-size:17px;font-weight:600}
.ct-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.ct-check{display:flex;gap:8px;align-items:center;min-height:44px;font-size:13px}
.ct-empty{padding:24px;border:1px dashed var(--line-2);border-radius:6px;color:var(--ink-3);text-align:center}
.ct-banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-radius:6px;font-size:13.5px;font-weight:500;background:var(--warn-bg);color:var(--warn)}
.ct-banner--bad{background:var(--bad-bg);color:var(--bad)}.ct-banner--info{background:var(--info-bg);color:var(--info)}
/* Component Sheet §04 legacy / EOL banner */
.ct-alert{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:6px;background:var(--warn-bg);border:1px solid var(--quote-line);color:var(--ink)}
.ct-alert--bad{background:var(--bad-bg);border-color:color-mix(in oklab,var(--bad) 40%,transparent)}
.ct-alert__text{display:flex;flex-direction:column;gap:4px;font-size:13.5px;line-height:1.45}.ct-alert__text b{font-weight:600}.ct-alert__text span{color:var(--ink-2)}
.ct-alert__btn{margin-left:auto;flex:none}
@media (max-width:700px){.ct-alert{flex-wrap:wrap}.ct-alert__btn{margin-left:0}}
.ct-pager{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-3)}

/* ---- workflows / diagrams (Component Sheet §17 slot chain + mermaid) ---- */
/* Component Sheet §17 slot chain */
.ct-chainwrap{overflow-x:auto;padding:4px 0}
.ct-chain{display:flex;align-items:stretch;gap:0;list-style:none;margin:0;padding:0;width:max-content}
.ct-chain__slot{position:relative;display:flex;flex-direction:column;gap:2px;flex:none;max-width:260px;padding:8px 12px;border-radius:6px;background:var(--surface);font-size:13px}
.ct-chain__slot:not(:last-child){margin-right:28px}
.ct-chain__slot:not(:last-child)::after{content:"";position:absolute;top:50%;right:-28px;width:22px;height:1.5px;background:var(--line-2)}
.ct-chain__slot:not(:last-child)::before{content:"";position:absolute;top:calc(50% - 3.25px);right:-28px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--line-2)}
.ct-chain__slot--hw{border:1.5px solid var(--ink-2)}.ct-chain__slot--svc{border:1.5px dashed var(--ink-2)}.ct-chain__slot--companion{border:1.5px dotted var(--ink-3)}
.ct-chain__role{font-size:11px;font-weight:600;color:var(--ink-3)}
.ct-chain__cand{font-weight:600}.ct-chain__qty{font-size:11.5px;color:var(--ink-2)}
.ct-chaintext{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding:10px 12px;border-radius:6px;background:var(--surface-2);font-size:12.5px;line-height:1.5}
.ct-chaintext>span:first-child{font-size:11.5px;font-weight:600;color:var(--ink-3)}.ct-chaintext>span+span{color:var(--ink-2)}
.ct-diagram{overflow:auto;padding:12px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.ct-diagram pre.mermaid{margin:0;background:none}
.ct-diagram [data-mermaid-fallback]{display:none}.ct-diagram.is-failed [data-mermaid-fallback]{display:block}

/* ---- compare ---- */
.ct-compare th.ct-colhead{vertical-align:top;min-width:200px;padding:12px;text-align:left;font-weight:400;border-bottom:1px solid var(--line-2);background:var(--surface)}
.ct-compare tbody th[scope=row]{min-width:220px}
.ct-compare thead th:first-child{font-weight:400;padding:14px 16px;border-right:1px solid var(--line);vertical-align:bottom}
.ct-switch-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.ct-pros-cons{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.ct-claim{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-top:1px solid var(--line);font-size:13px}.ct-claim:first-child{border-top:0}
.ct-claim__both{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-3)}

/* header: the design is one row. Below 1400 px the subtitle goes (as in the design's mobile header) and spacing
   tightens so it stays one row; below 1280 px (the nine-item nav, search and tools no longer fit) the nav takes its own
   row instead of the tools wrapping alone */
@media (max-width:1399px){.ct-logo__text span{display:none}.ct-header__row{padding:0 24px;gap:12px 16px}.ct-nav a{padding:0 8px}.ct-search{flex-basis:120px;min-width:120px}}
@media (max-width:1279px) and (min-width:701px){.ct-header__row{padding:8px 24px 0}.ct-nav{order:3;width:100%;margin:0 -8px}.ct-search{flex:1 1 200px;max-width:none}}
@media (max-width:1100px){.ct-layout{flex-direction:column;align-items:stretch}.ct-rail{width:auto;position:static}.ct-kv{grid-template-columns:1fr}}
.ct-iconbtn{display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.ct-iconbtn__search{width:13px;height:13px;box-sizing:border-box;border:1.75px solid var(--ink);border-radius:50%}
.ct-menubtn{flex-direction:column;gap:4px}.ct-menubtn span{width:18px;height:2px;background:var(--ink)}
.ct-short{display:none}
/* Header.dc.html mobile: 56 px row (mark, name, search, menu), the nav behind the menu, units and the switch below */
@media (max-width:700px){
  .ct-header__row{min-height:56px;padding:0 8px 0 16px;gap:8px}
  .ct-iconbtn{display:flex}.ct-iconbtn--first{margin-left:auto}
  .ct-search{display:none}
  .ct-nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;padding-bottom:8px}
  .ct-header.is-menu .ct-nav{display:flex}
  .ct-nav a[aria-current=page]{box-shadow:inset 2px 0 0 var(--ink)}
  .ct-header__tools{order:4;flex:1 1 100%;margin-left:0;padding:0 8px 8px 0;gap:8px;overflow-x:auto}
  .ct-header__tools>*{flex:none}   /* the design's row scrolls sideways rather than squeezing a control onto two lines */
  .ct-switch{gap:6px;padding:0 4px;white-space:nowrap}
  .ct-long{display:none}.ct-short{display:inline}
}
@media print{.ct-header,.ct-rail,.ct-tabs{display:none}}

.ct-colhead__name{font-size:16px;font-weight:600;line-height:1.25;color:var(--ink)}
.ct-colhead__url{font-size:11.5px;word-break:break-all}
.ct-rowlabel{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--ink)}
.ct-rowpath{display:block;margin-top:2px;font-size:11px;color:var(--ink-3);overflow-wrap:anywhere}
/* Compare "for this job": the design's job note beside the picker and the reason under a promoted row's label */
.ct-jobnote{margin:0;font-size:12.5px;color:var(--ink-3)}
/* Product Page §07: the price table is set at 13 px, and each row links out (↗, new tab) */
.ct-table--prices{font-size:13px}
.ct-golink{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
/* a form's submit is the Checker's "Check again" (13.5 px); primary links and the TCO plan buttons (named) stay at
   13 px, as the Product Page, Core Service and TCO designs draw them */
button.ct-btn--primary:not([name]){font-size:13.5px}
/* the tools' hand-off links (Checker "Cost this kit →", TCO "Check this kit against my gear →"): 13.5 px, 500, no fill;
   their row stretches the button beside them to the link's height, as in the Checker */
.ct-btn--handoff{font-size:13.5px;font-weight:500;background:none}.ct-btnrow{display:flex;flex-wrap:wrap;gap:8px}.ct-btnrow>:not(.ct-btn){align-self:center;margin-top:0}
/* in a filter form every control is 44 px: fields and the submit button are border-box, so the link buttons are too */
.ct-filters a.ct-btn{box-sizing:border-box}
.ct-jobreason{display:block;margin-top:3px;font-size:11.5px;font-weight:400;color:var(--ink-2)}
.ct-cellval{display:block;font-weight:600;margin-bottom:4px}
.ct-notcompared{display:flex;flex-direction:column;gap:8px;padding:14px 16px;margin-top:16px;border:1px dashed var(--line-2);border-radius:6px;font-size:13px}
.ct-compare tr.is-diff th[scope=row]{background:var(--hl)}
.ct-compare thead th,.ct-compare tbody th[scope=row],.ct-compare td{padding:12px 16px;border-right:1px solid var(--line)}
.ct-compare thead th:last-child,.ct-compare td:last-child{border-right:0}
.ct-compare thead th:first-child{padding:14px 16px}.ct-compare tbody th[scope=colgroup]{padding-left:16px}
/* Compare header in two rows (the design has one, which scrolls away): brand and name stick to the top while the table is in view;
   status, links and Remove scroll normally. At rest it reads as the design's single header; the divider shows once the names are stuck. */
.ct-compare thead .ct-compare__names>*{position:sticky;top:0;z-index:2;padding:14px 16px 8px;border-bottom:0;background:var(--surface)}
.ct-compare thead .ct-compare__names>.ct-compare__corner{left:0;z-index:3;border-right:1px solid var(--line)}
.ct-compare thead .ct-compare__meta>*{vertical-align:top;padding:0 16px 14px;font-size:12px;font-weight:400;color:var(--ink-3);border-bottom:1px solid var(--line-2);background:var(--surface)}
.ct-compare thead .ct-compare__meta>.ct-compare__field{width:220px;vertical-align:bottom;padding-top:14px}
@media (max-width:700px){.ct-compare thead .ct-compare__meta>.ct-compare__field,.ct-compare tbody th[scope=row]{width:150px;min-width:150px}}
.ct-compare.is-stuck thead .ct-compare__names>*{box-shadow:inset 0 -1px 0 var(--line-2)}
/* Sticky needs a wrapper that is not a scroll container. compare.js adds is-fit when the table fits its card (desktop);
   otherwise the card scrolls both ways within the viewport height and the names stick inside it. */
.ct-scroll--grid{overflow:auto;max-height:calc(100vh - 16px)}.ct-scroll--grid.is-fit{overflow:visible;max-height:none}
.ct-planhead{vertical-align:bottom}.ct-planhead__name{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.ct-bar--wide{width:100%;margin:2px 0 6px}
.ct-kvs--stack .ct-kv{grid-template-columns:1fr;gap:2px}.ct-kvs--stack dd{text-align:left}
/* Compatibility Checker.dc.html */
.ct-title-row{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between}
.ct-h1,.ct-title h1.ct-h1{margin:0;font-size:clamp(24px,3vw,30px);line-height:normal;font-weight:600;letter-spacing:-.015em}
.ct-checker{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.ct-checker>form{flex:1 1 340px;max-width:420px;min-width:0}
.ct-checker>div{flex:999 1 480px;min-width:0}
/* loading states: a skeleton replaces the results while the next page loads (app.js). The Checker's is gallery frame
   2c, three shimmering cards; the TCO Calculator's (state "loading") is one card, a title bar and six rows. */
[data-skeleton]{display:none}
.ct-results[data-busy]>[data-skeleton]{display:flex}.ct-results[data-busy]>:not([data-skeleton]){display:none}
.ct-checking{flex-direction:column;gap:12px}
.ct-checking__card{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.ct-checking__card>span{height:44px;border-radius:4px;background:var(--surface-2);animation:cat-shimmer 1.4s .15s infinite}
.ct-checking__card>span:first-child{height:14px;width:160px;border-radius:3px;background:var(--surface-3);animation:cat-shimmer 1.4s infinite}
.ct-checking__card>span:last-child{width:80%;animation-delay:.3s}
.ct-calculating{flex-direction:column;gap:10px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.ct-calculating>span{height:48px;border-radius:4px;background:var(--surface-2);animation:cat-shimmer 1.4s infinite}
.ct-calculating>span:first-child{height:28px;width:220px;background:var(--surface-3)}
@media (prefers-reduced-motion:reduce){.ct-checking__card>span,.ct-calculating>span{animation:none}}
.ct-panel{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.ct-panel__title{font-size:12px;font-weight:600;color:var(--ink-3)}
.ct-owned{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 4px 4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);font-size:13.5px}
.ct-owned>.ct-stack{flex:1;min-width:0}
.ct-owned__x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:6px;color:var(--ink-3);font-size:18px;text-decoration:none}
.ct-owned__x:hover{background:var(--surface-3);color:var(--ink)}
.ct-summary{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px 14px;font-size:13px}
.ct-summary__item{display:inline-flex;gap:6px;align-items:center}.ct-summary__item>span{color:var(--gc)}
/* TCO Calculator.dc.html */
.ct-panel--flush{padding:0;gap:0;overflow:hidden}
/* kit builder summary: one line per pick, its quantity and why it is in the kit */
.ct-kitlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.ct-kitlist>li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
/* Product Page.dc.html section link (sec.link) */
.ct-seclink{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:13.5px;font-weight:500}
/* network sheet: groups in columns on wide screens, each column ruled like a panel row */
.ct-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr))}
.ct-sheet>.ct-panel__row{border-bottom:1px solid var(--line);box-shadow:-1px 0 0 var(--line)}
.ct-sheet .ct-kv{grid-template-columns:minmax(120px,40%) minmax(0,1fr)}.ct-sheet .ct-kv dd{overflow-wrap:anywhere}
@media print{.ct-noprint,.ct-official-banner,.ct-skip{display:none!important}.ct-panel__row{break-inside:avoid}}
.ct-table--inset thead th:first-child,.ct-table--inset tbody th[scope=row]{padding-left:16px}
.ct-table--inset thead th:last-child,.ct-table--inset td:last-child{padding-right:16px}
.ct-panel__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600}
.ct-panel__head b{font-weight:600}
/* panel titles are h2, as the TCO design's "Cost lines" and "Sensitivity" heads are; they keep the head's type */
h2.ct-panel__head{margin:0}.ct-panel__head h2{margin:0;font:inherit}.ct-panel__head--sm{font-size:14px}
.ct-panel__row{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:13.5px}.ct-panel__row:last-child{border-bottom:0}
.ct-panel__row--kv{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.ct-seg--wide{display:flex}.ct-seg--wide>button{flex:1;justify-content:center}.ct-seg>button:disabled{cursor:default}
/* TCO Calculator.dc.html horizon radiogroup (segS) and steppers, as native radios and number inputs in a GET form */
.ct-seg--radio>label{flex:1 1 auto;position:relative;display:flex}
.ct-seg--radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ct-seg--radio span{flex:1;min-height:44px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;white-space:nowrap;background:var(--surface);color:var(--ink-2)}
.ct-seg--radio input:checked+span{font-weight:600;background:var(--invert-bg);color:var(--invert-ink)}
.ct-seg--radio input:focus-visible+span{outline:2px solid var(--focus);outline-offset:-2px}
.ct-stepper{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--line)}
.ct-stepper>label{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px;color:var(--ink-2)}.ct-stepper>label .ct-sub{font-size:11.5px}
.ct-stepper>button{flex:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink);font-size:16px;cursor:pointer}
.ct-stepper>input{flex:none;width:64px;min-height:44px;padding:0 4px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink);text-align:center;font:inherit;font-size:15px;font-weight:600;-moz-appearance:textfield}
.ct-stepper>input::-webkit-inner-spin-button,.ct-stepper>input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ct-stepper>input:invalid{border-color:var(--bad)}
.ct-field input[type=date]{min-height:44px;padding:0 10px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);font:inherit;font-size:14px;color:var(--ink)}
.ct-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:6px}
.ct-totals>div{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-left:1px solid var(--line);font-size:13px;color:var(--ink-3)}.ct-totals>div:first-child{border-left:0}
.ct-costlines tbody th[scope=row]{display:table-cell}.ct-costlines tbody th[scope=row] .ct-sub,.ct-costlines td .ct-sub{display:block;margin-top:2px}
.ct-costlines thead th:first-child,.ct-costlines tbody th[scope=row]{padding-left:16px}
.ct-costlines tr.is-open td,.ct-costlines tr.is-open th{background:var(--quote-bg)}
/* TCO Calculator.dc.html results: per-currency totals, plan comparison with the cheapest column tinted and ruled, gap notes */
.ct-tco-amount{display:block;font-size:20px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ct-tcoplans th,.ct-tcoplans td{padding:12px 16px}
.ct-tcoplans thead th{vertical-align:bottom;font-size:13.5px;font-weight:600;color:var(--ink)}.ct-tcoplans thead th .ct-pill{margin-left:6px}
.ct-tcoplans thead th .ct-sub,.ct-tcoplans td .ct-sub{display:block;margin-top:4px;font-weight:400}
.ct-tcoplans .is-rec{background:color-mix(in oklab,var(--info-bg) 70%,var(--surface))}.ct-tcoplans thead th.is-rec{box-shadow:inset 0 3px 0 var(--info)}
.ct-tcoplans tr.is-total th{font-weight:600;color:var(--ink)}.ct-tcoplans tr.is-grand td b{font-size:20px}.ct-tcoplans tr.is-grand td.is-rec b{color:var(--info)}
.ct-tcoplans__use th{vertical-align:middle}
.ct-tco-notes{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.ct-prodhead{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-start}
/* Product Page.dc.html mobile frame: summary strip wherever the rail stacks below the sections (1100 px, see .ct-layout) */
.ct-mstrip{display:none}
@media (max-width:1100px){.ct-mstrip{display:flex;gap:8px;overflow-x:auto;margin:0 calc(-1 * clamp(16px,2.5vw,40px));padding:2px clamp(16px,2.5vw,40px) 6px;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(16px,2.5vw,40px)}}
.ct-mstrip__card{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);text-decoration:none}
a.ct-mstrip__card{gap:6px}a.ct-mstrip__card:hover{color:var(--ink);background:var(--surface-2)}
.ct-mstrip__card>span{font-size:11.5px;color:var(--ink-3)}.ct-mstrip__card>b{font-size:16px;font-weight:600}.ct-mstrip__card>a{font-size:12px}
.ct-mstrip__card>span.ct-mstrip__compat{display:flex;gap:10px;font-size:13px;font-weight:600}
.ct-mstrip__compat .is-full{color:var(--ok)}.ct-mstrip__compat .is-limited{color:var(--warn)}.ct-mstrip__compat .is-local_only{color:var(--info)}.ct-mstrip__compat .is-none{color:var(--bad)}.ct-mstrip__compat .is-unknown{color:var(--gap)}
.ct-mstrip__btn{flex:none;scroll-snap-align:start;align-self:center;font-weight:500}
.ct-railcompat{display:flex;align-items:center;gap:8px;min-height:32px;text-decoration:none;color:var(--ink)}.ct-railcompat>b{margin-left:auto;font-weight:600}
.ct-railcompat:hover{color:var(--ink);background:var(--surface-2)}
.ct-specval{font-weight:600;color:var(--ink)}
[data-theme=dark] .ct-logo__mark{filter:invert(1)}
.ct-tablecard{margin:0;padding:0 4px;background:var(--surface);border:1px solid var(--line);border-radius:6px}.ct-tablecard caption{padding:12px 12px 10px}
.ct-sources--wide{max-height:none;gap:0;padding:4px 14px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.ct-sources--wide li{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:8px 0;border-top:1px solid var(--line)}.ct-sources--wide li:first-child{border-top:0}
.ct-panel .ct-sources--wide{padding:0;border:0}
.ct-notes{margin-top:16px;border:1px solid var(--line);border-radius:6px;font-size:13px}.ct-notes>summary{min-height:40px;display:flex;align-items:center;padding:0 12px;cursor:pointer;font-weight:600;color:var(--ink-2)}
.ct-notes ul{margin:0;padding:4px 16px 12px 30px;display:flex;flex-direction:column;gap:6px;line-height:1.45;color:var(--ink-2)}
/* Component Sheet §07 "Converted for comparison" (derive.comparison): values from the sheet */
.ct-cmp{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line);border-radius:6px}
.ct-cmp__label{font-size:12px;color:var(--ink-3)}
.ct-cmp__top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.ct-cmp__top b{font-size:18px;font-weight:600}.ct-cmp__top span{font-size:13px;color:var(--ink-2)}
.ct-cmp__note{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.ct-cmp .ct-vchip{align-self:flex-start}
/* Core Service Page rail: "≈ €102.34 / mo  DE" over its conversion line */
.ct-railprice{display:flex;flex-direction:column;gap:2px}.ct-railprice__top{display:flex;justify-content:space-between;align-items:baseline}.ct-railprice__top b{font-size:15px;font-weight:600}.ct-railprice__top span{color:var(--ink-3)}.ct-railprice__meta{font-size:12px;color:var(--ink-3)}
/* Core Service Page price display: both figures are rendered; html[data-price] shows one pair (app.js) */
.ct-pd{display:flex;flex-direction:column;gap:3px;align-items:flex-start}.ct-pd__v{font-size:16px;font-weight:600}.ct-pd__sub{font-size:12px;color:var(--ink-3)}
[data-price=local] [data-pd=usd],[data-price=usd] [data-pd=local]{display:none}
/* /reference tables (no design): a stacked sub line per cell, and the reader's or linked country marked */
.ct-reftable .ct-sub{display:block}
.ct-reflines{margin:2px 0 0;padding-left:16px;font-size:12px;color:var(--ink-3);line-height:1.45;max-width:420px}
.ct-reftable tr[aria-current=true]>*,.ct-reftable tr:target>*{background:var(--surface-2)}
/* Core Service Page header: title column, then the 300 px price display aligned to its bottom */
.ct-svchead{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end}.ct-svchead__main{flex:1 1 320px;display:flex;flex-direction:column;gap:10px;min-width:0;max-width:820px;margin-right:auto}
.ct-svchead__main>*{margin:0}
.ct-seg [role=radio][aria-checked=true]{font-weight:600;background:var(--invert-bg);color:var(--invert-ink)}
.ct-pricedisplay{display:flex;flex-direction:column;gap:6px;width:300px;flex:none}.ct-pricedisplay>span{font-size:12px;color:var(--ink-3)}
.ct-pricedisplay .ct-seg{display:grid;grid-template-columns:1fr 1fr}
.ct-pricedisplay .ct-seg button{min-height:44px;padding:0 10px;font-size:13px;white-space:nowrap;justify-content:center}
@media (max-width:700px){.ct-pricedisplay{width:100%}}
/* Header.dc.html country chip: "DE  EUR · VAT incl.  ▾"; the menu lists the countries of data/reference/countries.json */
.ct-country{position:relative;flex:none}
.ct-country__chip{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;box-sizing:border-box;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);font-size:13px;cursor:pointer;list-style:none;color:var(--ink)}
.ct-country__chip::-webkit-details-marker{display:none}.ct-country__chip b{font-weight:600}
.ct-country__cur{color:var(--ink-2)}.ct-country__arrow{color:var(--ink-3)}
.ct-country__menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:280px;max-height:min(70vh,560px);overflow:auto;display:flex;flex-direction:column;gap:4px;padding:8px;box-sizing:border-box;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);box-shadow:var(--shadow);font-size:13px}
.ct-country__head{padding:4px 8px;font-size:12px;font-weight:600;color:var(--ink-3)}
.ct-country__menu ul{list-style:none;margin:0;padding:0}
.ct-country__sep{height:0;margin:4px 0;border-top:1px solid var(--line)}
.ct-country__menu li a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:40px;padding:0 8px;border-radius:4px;color:var(--ink);text-decoration:none}
.ct-country__menu li a:hover{background:var(--surface-2)}.ct-country__menu li a[aria-current=true]{background:var(--invert-bg);color:var(--invert-ink)}.ct-country__menu li a[aria-current=true] .ct-dim{color:inherit}
.ct-country__more{display:flex;align-items:center;min-height:40px;padding:0 8px;border-top:1px solid var(--line);font-weight:500}
@media (max-width:700px){.ct-country__chip{gap:6px;padding:0 10px}.ct-country__arrow{display:none}.ct-country__menu{position:fixed;left:16px;right:16px;width:auto}}
/* the design's one header row holds fewer nav links than this app's nine: from 1200 to 1599 px the chip keeps "DE ▾"
   (the currency and VAT state stay in its label and title) so the tools stay on the nav row */
@media (max-width:420px){.ct-country__vat{display:none}}   /* the phone tools row then fits without scrolling */
@media (max-width:899px) and (min-width:701px){.ct-country__cur{display:none}.ct-search{flex-basis:150px}}
@media (max-width:1599px) and (min-width:1280px){.ct-country__cur{display:none}.ct-search{flex-basis:100px;min-width:100px}}
@media (max-width:1599px) and (min-width:1400px){.ct-header__row{gap:16px}.ct-nav a{padding:0 8px}.ct-search{flex-basis:120px}}