/* Interactive states extracted from the design components.
   Hover styling: elements carry data-hv="N"; rules below win over inline styles via !important. */
/* Skip link — off-canvas until it takes focus, then it lands over the nav.
   It sits inside the page wrapper, not as body's first child, because
   mobile-nav.js reads body.firstElementChild to derive the bar's colour. */
.skip-link{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;left:12px;top:12px;z-index:100;background:var(--ice);color:var(--navy-deepest);border-radius:4px;padding:10px 16px;font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-decoration:none;outline:2px solid var(--navy-accent);outline-offset:2px}
.qtab{background:transparent;color:var(--ink-60);box-shadow:none}
.qtab[aria-selected="true"]{background:var(--surface-sunken);color:var(--ink-100);box-shadow:inset 2px 0 0 var(--navy-accent)}
/* Selecting a tab swaps its ground to --surface-sunken, which is darker than
   the base the eyebrow was set against: --ink-50 falls from 4.51 to 4.13 and
   drops under AA. Only the selected tab needs the step down to --ink-60. */
.qtab[aria-selected="true"] > span:first-child{color:var(--ink-60) !important}
.qpanel{display:grid;gap:24px;align-content:start;min-width:0}
.qpanel[hidden]{display:none}
.prod-chev{transition:transform 150ms}
[data-prod-toggle][aria-expanded="true"] .prod-chev{transform:rotate(180deg)}
.fld:focus{border-color:var(--navy-accent) !important}
[data-hv="0"]:hover{color:var(--ice) !important;background:var(--ice-grid) !important}
[data-hv="1"]:hover{color:var(--ice) !important}
[data-hv="2"]:hover{background:rgba(224,242,250,0.85) !important}
[data-hv="3"]:hover{color:var(--ink-100) !important;background:var(--surface-sunken) !important}
[data-hv="4"]:hover{color:var(--ink-100) !important}
[data-hv="5"]:hover{background:var(--navy-mid) !important}
[data-hv="6"]:hover{border-color:var(--ice) !important}
[data-hv="7"]:hover{color:var(--ice) !important;border-color:var(--ice) !important}
[data-hv="8"]:hover{background:var(--navy-accent) !important}
[data-hv="9"]:hover{color:var(--ice) !important;border-color:var(--ice-dim) !important}