/*!
 * Help center (#373, #382): the "Live View" design on ICR Core tokens only (css/tokens.css, v0.1).
 * The standard it is held to is docs/adr/0005-help-center-design-standard.md; HelpCssTokensTest
 * fails the build on a literal colour, an off-scale type size, an off-grid space or an unknown radius.
 *
 * Type: six sizes from the ICR scale on any page (14 labels, 16 interface, 18 body, 24 subheads,
 * 30 section heads, 48 page titles; 36 for page titles on phones). Space: the 4px grid. Radius:
 * sm 4, md 8, lg 16, pill. Targets: 44px for every control outside running text.
 */

/* ---- the support shell (layouts/help.blade.php) ------------------------------------------- */
body.hs { margin: 0; background: var(--icr-white); color: var(--icr-color-text); font: var(--icr-weight-regular) var(--icr-text-18)/1.6 var(--icr-font-body); -webkit-font-smoothing: antialiased; }
.hs *, .hs *::before, .hs *::after { box-sizing: border-box; }
.hs :focus-visible { outline: var(--icr-focus-outline); outline-offset: 2px; box-shadow: var(--icr-focus-shadow); border-radius: var(--icr-radius-sm); }
.hs-skip { position: absolute; left: var(--icr-space-4); top: calc(-1 * var(--icr-space-16)); z-index: 100; padding: var(--icr-space-3) var(--icr-space-4); background: var(--icr-ink-900); color: var(--icr-white); border-radius: var(--icr-radius-md); font-size: var(--icr-text-16); }
.hs-skip:focus { top: var(--icr-space-2); }
.hs-top { background: var(--icr-white); border-bottom: 1px solid var(--icr-line-subtle); }
.hs-bar { max-width: var(--icr-container); margin: 0 auto; padding: var(--icr-space-2) var(--icr-space-6); min-height: var(--icr-space-16); display: flex; align-items: center; gap: var(--icr-space-6); flex-wrap: wrap; }
.hs-brand { display: flex; align-items: center; gap: var(--icr-space-3); margin-right: auto; }
.hs-brand a { display: inline-flex; align-items: center; min-height: var(--icr-control-height); text-decoration: none; }
.hs-logo img { display: block; height: var(--icr-space-8); width: auto; }
.hs-name { font: var(--icr-weight-bold) var(--icr-text-24)/1 var(--icr-font-display); color: var(--icr-ink-900); padding-left: var(--icr-space-3); border-left: 1px solid var(--icr-line); }
.hs-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--icr-space-1); flex-wrap: wrap; }
.hs-nav a { display: inline-flex; align-items: center; min-height: var(--icr-control-height); padding: 0 var(--icr-space-3); border-radius: var(--icr-radius-md); color: var(--icr-ink-700); font: 500 var(--icr-text-16)/1.2 var(--icr-font-body); text-decoration: none; }
.hs-nav a:hover { background: var(--icr-surface); color: var(--icr-ink-900); }
.hs-nav a[aria-current="page"] { color: var(--icr-ink-900); box-shadow: inset 0 -2px 0 var(--icr-red-600); border-radius: 0; }
.hs-nav .hs-contact { border: 1px solid var(--icr-line); margin-left: var(--icr-space-2); }
.hs-menu-btn { display: none; }
.hs-foot { margin-top: var(--icr-space-16); background: var(--icr-surface); border-top: 1px solid var(--icr-line-subtle); }
.hs-foot-in { max-width: var(--icr-container); margin: 0 auto; padding: var(--icr-space-8) var(--icr-space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--icr-space-4) var(--icr-space-8); font-size: var(--icr-text-14); color: var(--icr-ink-500); }
.hs-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--icr-space-2); }
.hs-foot a { display: inline-flex; align-items: center; min-height: var(--icr-control-height); padding: 0 var(--icr-space-2); color: var(--icr-ink-700); text-decoration: none; }
.hs-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .hs-bar { padding: var(--icr-space-2) var(--icr-space-4); gap: var(--icr-space-2); }
  .hs-name { font-size: var(--icr-text-18); }
  .js .hs-menu-btn { display: inline-flex; align-items: center; gap: var(--icr-space-2); min-height: var(--icr-control-height); padding: 0 var(--icr-space-4); border: 1px solid var(--icr-line); border-radius: var(--icr-radius-pill); background: var(--icr-white); color: var(--icr-ink-900); font: 500 var(--icr-text-16)/1 var(--icr-font-body); cursor: pointer; }
  .hs-nav { flex-basis: 100%; }
  .js .hs-nav:not(.is-open) { display: none; }
  .hs-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--icr-space-2); }
  .hs-nav a { width: 100%; }
  .hs-nav .hs-contact { margin: var(--icr-space-2) 0 0; justify-content: center; }
  .hs-foot-in { padding: var(--icr-space-6) var(--icr-space-4); }
}

/* ---- the topic tree (#388, help/partials/tree.blade.php) ------------------------------------ */
.has-side .hs-bar, .has-side .hs-foot-in { max-width: var(--icr-container-wide); }
.hs-docs { max-width: var(--icr-container-wide); margin: 0 auto; display: grid; grid-template-columns: 296px minmax(0, 1fr); }
.hs-doc { min-width: 0; border-left: 1px solid var(--icr-line-subtle); }
.h-side { position: sticky; top: 0; align-self: start; }
.h-side-sum { display: none; }
/* The filter stays put; the tree scrolls in its own area below it. */
.h-side-in { display: flex; flex-direction: column; max-height: 100vh; padding: var(--icr-space-6) var(--icr-space-3) 0 var(--icr-space-6); }
.h-tree-sc { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0 calc(-1 * var(--icr-space-3)); padding: var(--icr-space-1) var(--icr-space-3) var(--icr-space-10); }
.h-filter { display: none; align-items: center; gap: var(--icr-space-2); min-height: var(--icr-control-height); margin: 0 0 var(--icr-space-3); padding: 0 var(--icr-space-3); border-radius: var(--icr-radius-md); background: var(--icr-surface); color: var(--icr-ink-500); }
.js .h-filter { display: flex; flex: none; }
.h-filter:focus-within { box-shadow: 0 0 0 2px var(--icr-red-600); }
.h-filter input:focus-visible { outline: 0; box-shadow: none; }
.h-filter input { flex: 1; min-width: 0; min-height: var(--icr-control-height); border: 0; outline: 0; background: transparent; color: var(--icr-ink-900); font: var(--icr-weight-regular) var(--icr-text-16)/1 var(--icr-font-body); }
.h-filter input::placeholder { color: var(--icr-ink-500); }
.h-tree-none { margin: 0 0 var(--icr-space-2); padding: 0 var(--icr-space-3); font-size: var(--icr-text-14); color: var(--icr-ink-500); }
.h-tree-none:empty { display: none; }
.h-tree, .h-tree ul { list-style: none; margin: 0; padding: 0; }
.h-tree ul { padding-left: var(--icr-space-4); }
.h-tree ul.is-leaves { padding-left: var(--icr-space-10); } /* rows without a disclosure: indent past the parent's chevron */
.h-tw { display: flex; align-items: flex-start; }
.h-tree a { flex: 1; min-width: 0; display: flex; align-items: center; min-height: var(--icr-control-height); padding: var(--icr-space-2) var(--icr-space-3) var(--icr-space-2) var(--icr-space-2); border-radius: var(--icr-radius-md); color: var(--icr-ink-700); font: var(--icr-weight-regular) var(--icr-text-14)/1.35 var(--icr-font-body); text-decoration: none; overflow-wrap: anywhere; }
.h-tw a { font-size: var(--icr-text-16); line-height: 1.3; }
.h-tw.is-top a { color: var(--icr-ink-900); font-weight: 500; }
.h-tree a:hover { background: var(--icr-surface); color: var(--icr-ink-900); }
.h-tree a.is-on { color: var(--icr-ink-900); font-weight: 500; }
.h-tree a[aria-current="page"] { background: var(--icr-surface-2); color: var(--icr-ink-900); font-weight: 500; box-shadow: inset 3px 0 0 var(--icr-red-600); }
/* The disclosure: a 44px target whose chevron sits in the 24px before the label. */
.h-tt { flex: none; display: grid; place-items: center; width: var(--icr-control-height); height: var(--icr-control-height); margin: 0 calc(-1 * var(--icr-space-2)) 0 calc(-1 * var(--icr-space-3)); padding: 0; border: 0; border-radius: var(--icr-radius-md); background: transparent; color: var(--icr-ink-500); cursor: pointer; }
.h-tt::before { content: ""; width: var(--icr-space-2); height: var(--icr-space-2); border: solid currentColor; border-width: 0 2px 2px 0; transform: translateX(-1px) rotate(-45deg); transition: transform .15s ease; }
.h-tt[aria-expanded="true"]::before { transform: translateY(-2px) rotate(45deg); }
.h-tt:hover { color: var(--icr-ink-900); }
html:not(.js) .h-tt { visibility: hidden; }
@media (max-width: 1023px) {
  .hs-docs { display: block; }
  .hs-doc { border-left: 0; }
  .h-side { position: static; max-height: none; overflow: visible; border-bottom: 1px solid var(--icr-line-subtle); background: var(--icr-white); }
  .h-side-sum { display: flex; align-items: center; gap: var(--icr-space-3); min-height: 56px; padding: 0 var(--icr-space-6); list-style: none; cursor: pointer; color: var(--icr-ink-900); font: 500 var(--icr-text-16)/1.2 var(--icr-font-body); }
  .h-side-sum::-webkit-details-marker { display: none; }
  .h-side-sum small { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--icr-ink-500); font-size: var(--icr-text-14); font-weight: var(--icr-weight-regular); }
  .h-side-sum::after { content: ""; flex: none; margin-left: auto; width: var(--icr-space-2); height: var(--icr-space-2); border: solid var(--icr-ink-500); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
  .h-side-d[open] .h-side-sum::after { transform: translateY(2px) rotate(-135deg); }
  .h-side-in { display: block; max-height: none; padding: 0 var(--icr-space-4) var(--icr-space-4) var(--icr-space-6); }
  .h-tree-sc { overflow: visible; margin: 0; padding: 0; }
}
@media (max-width: 575px) {
  .h-side-sum { padding: 0 var(--icr-space-4); }
  .h-side-in { padding: 0 var(--icr-space-2) var(--icr-space-4) var(--icr-space-4); }
}

/* ---- the help center ------------------------------------------------------------------------ */
.help {
  --h-fill: var(--icr-surface); --h-fill-2: var(--icr-surface-2); --h-ink: var(--icr-ink-900); --h-ink-2: var(--icr-ink-700); --h-muted: var(--icr-ink-500);
  --h-sep: var(--icr-line-subtle); --h-accent: var(--icr-red-600); --h-accent-press: var(--icr-red-700);
  --h-display: var(--icr-font-display); --h-body: var(--icr-font-body); --h-mono: var(--icr-font-mono);
  color: var(--h-ink-2); font-family: var(--h-body); font-size: var(--icr-text-18); line-height: 1.6;
  max-width: var(--icr-container); margin: 0 auto; padding: 0 var(--icr-space-6) var(--icr-space-8);
}
.help *, .help *::before, .help *::after { box-sizing: border-box; }
.help p, .help li, .help td { text-align: left; }
.help h1, .help h2, .help h3, .help h4, .help h5 { margin: 0; color: var(--h-ink); text-transform: none; letter-spacing: 0; text-wrap: balance; }
.help a { color: var(--h-accent); text-decoration: none; }
.help a:hover { text-decoration: underline; text-underline-offset: 3px; }
.help :focus-visible { outline: var(--icr-focus-outline); outline-offset: 2px; box-shadow: var(--icr-focus-shadow); border-radius: var(--icr-radius-sm); }
.help .sr-only, .hs .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h-dot { width: var(--icr-space-2); height: var(--icr-space-2); border-radius: 50%; background: var(--h-accent); display: inline-block; flex: none; }
.h-label { font-size: var(--icr-text-14); font-weight: 500; color: var(--h-muted); }

/* hero and search field */
.h-hero { padding: var(--icr-space-16) 0 var(--icr-space-10); display: grid; gap: var(--icr-space-5); max-width: 860px; }
.h-hero.is-compact { padding: var(--icr-space-8) 0 var(--icr-space-6); gap: var(--icr-space-3); }
.h-status { font: 500 var(--icr-text-14)/1 var(--h-mono); color: var(--h-muted); display: flex; align-items: center; gap: var(--icr-space-3); letter-spacing: .02em; text-transform: uppercase; }
.h-hero h1 { font: var(--icr-weight-bold) var(--icr-text-48)/1.05 var(--h-display); letter-spacing: -.01em; }
.h-hero .h-sub { font-size: var(--icr-text-24); line-height: 1.35; color: var(--h-muted); margin: 0; }
.h-field { position: relative; display: flex; align-items: center; gap: var(--icr-space-3); height: var(--icr-space-16); padding: 0 var(--icr-space-3) 0 var(--icr-space-5); background: var(--icr-white); border-radius: var(--icr-radius-lg); box-shadow: 0 0 0 1px var(--icr-line), var(--icr-shadow-1); }
.is-compact .h-field { height: 56px; }
.h-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: var(--icr-weight-regular) var(--icr-text-18)/1 var(--h-body); color: var(--h-ink); }
.h-field input::placeholder { color: var(--icr-ink-500); }
.h-field svg { flex: none; color: var(--h-muted); }
.h-field:focus-within { box-shadow: 0 0 0 2px var(--icr-red-600), var(--icr-focus-shadow); }
.h-key { font: 500 var(--icr-text-14)/1 var(--h-mono); color: var(--h-muted); background: var(--h-fill); border-radius: var(--icr-radius-sm); padding: var(--icr-space-1) var(--icr-space-2); }
.h-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--icr-space-2); font-size: var(--icr-text-16); color: var(--h-muted); }
.h-popular a { display: inline-flex; align-items: center; min-height: var(--icr-control-height); padding: 0 var(--icr-space-2); color: var(--h-ink-2); }

/* type-ahead sheet */
.h-search { position: relative; }
.h-sheet { position: absolute; left: 0; right: 0; top: calc(100% + var(--icr-space-2)); z-index: 50; background: var(--icr-white); border-radius: var(--icr-radius-lg); box-shadow: 0 0 0 1px var(--icr-line-subtle), var(--icr-shadow-2); max-height: min(70vh, 520px); overflow-y: auto; padding: var(--icr-space-2); }
.h-sheet[hidden] { display: none; }
.h-grp { font-size: var(--icr-text-14); font-weight: 500; color: var(--h-muted); padding: var(--icr-space-3) var(--icr-space-3) var(--icr-space-1); }
.h-hit { display: flex; gap: var(--icr-space-3); align-items: center; padding: var(--icr-space-2) var(--icr-space-3); border-radius: var(--icr-radius-md); min-height: 52px; color: var(--h-ink); font-size: var(--icr-text-16); }
.h-hit:hover, .h-hit[aria-selected="true"] { background: var(--h-fill); text-decoration: none; }
.h-hit .t { flex: 1; min-width: 0; display: grid; gap: 0; }
.h-hit b { font-weight: 500; }
.h-hit small { color: var(--h-muted); font-size: var(--icr-text-14); }
.h-hit mark, .h-results mark { background: var(--icr-highlight); color: inherit; border-radius: var(--icr-radius-sm); padding: 0; }
.h-sheet .h-icon { width: 36px; height: 36px; border-radius: var(--icr-radius-md); } .h-sheet .h-icon svg { width: 20px; height: 20px; }
.h-sheet-empty { padding: var(--icr-space-5) var(--icr-space-3); color: var(--h-muted); font-size: var(--icr-text-16); }
.h-sheet-all { display: flex; align-items: center; min-height: var(--icr-control-height); padding: 0 var(--icr-space-3); font-size: var(--icr-text-16); font-weight: 500; }

/* segmented control */
.h-seg { display: inline-flex; justify-self: start; background: var(--h-fill); border-radius: var(--icr-radius-md); padding: var(--icr-space-1); gap: var(--icr-space-1); }
.h-seg button { border: 0; background: transparent; color: var(--h-ink-2); font: 500 var(--icr-text-14)/1 var(--h-body); padding: 0 var(--icr-space-4); border-radius: var(--icr-radius-sm); cursor: pointer; min-height: var(--icr-control-height); }
.h-seg button[aria-pressed="true"] { background: var(--icr-white); color: var(--h-ink); box-shadow: var(--icr-shadow-1); }

/* notice row */
.h-alert { display: flex; align-items: center; gap: var(--icr-space-3); flex-wrap: wrap; min-height: 56px; padding: var(--icr-space-4) var(--icr-space-5); border-radius: var(--icr-radius-lg); background: var(--h-fill); font-size: var(--icr-text-16); color: var(--h-ink-2) !important; }
.h-alert:hover { background: var(--h-fill-2); text-decoration: none !important; }
.h-alert strong { color: var(--h-ink); font-weight: 500; }
.h-alert .h-label { margin-left: auto; }
.h-alert > span:not(.h-label) { flex: 1 1 14rem; min-width: 0; }

/* sections */
.h-block { margin-top: var(--icr-space-16); }
.h-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--icr-space-4); flex-wrap: wrap; margin-bottom: var(--icr-space-5); }
.h-head h2 { font: var(--icr-weight-bold) var(--icr-text-30)/1.1 var(--h-display); }
.h-head a { display: inline-flex; align-items: center; min-height: var(--icr-control-height); font-size: var(--icr-text-16); }

/* hardware photo cards */
.h-hardware { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--icr-space-5); }
.h-photo { position: relative; display: block; min-height: 300px; border-radius: var(--icr-radius-lg); overflow: hidden; background: var(--icr-surface-2); color: var(--icr-ink-900) !important; }
.h-photo:hover { text-decoration: none !important; }
.h-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.h-photo:hover img { transform: scale(1.03); }
.h-photo .txt { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--icr-space-5) var(--icr-space-6); display: grid; gap: var(--icr-space-1); background: linear-gradient(to top, color-mix(in srgb, var(--icr-surface) 95%, transparent) 40%, color-mix(in srgb, var(--icr-surface) 0%, transparent)); }
.h-photo b { font: var(--icr-weight-bold) var(--icr-text-30)/1.1 var(--h-display); }
.h-photo span { font-size: var(--icr-text-16); color: var(--icr-ink-700); }
.h-photo .go { color: var(--icr-ink-900); font-weight: 500; }

/* app icons */
.h-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--icr-space-6) var(--icr-space-3); margin-top: var(--icr-space-8); }
.h-app { display: grid; justify-items: center; gap: var(--icr-space-2); text-align: center; color: var(--h-ink) !important; font-size: var(--icr-text-16); font-weight: 500; line-height: 1.25; }
.h-app:hover { text-decoration: none !important; }
.h-app small { display: block; color: var(--h-muted); font-weight: var(--icr-weight-regular); font-size: var(--icr-text-14); }
.h-icon { width: 72px; height: 72px; border-radius: 22.5%; display: grid; place-items: center; flex: none; box-shadow: var(--icr-shadow-1); }
.h-icon svg { width: 36px; height: 36px; }
.h-app:hover .h-icon { transform: translateY(-2px); transition: transform .2s; }
.t-ink { background: linear-gradient(160deg, var(--icr-ink-700), var(--icr-ink-900)); color: var(--icr-white); }
.t-red { background: linear-gradient(160deg, var(--icr-red-600), var(--icr-red-700)); color: var(--icr-white); }
.t-steel { background: linear-gradient(160deg, var(--icr-surface), var(--icr-line)); color: var(--icr-ink-900); }
.h-more { margin-top: var(--icr-space-6); font-size: var(--icr-text-16); color: var(--h-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--icr-space-2); }
.h-more a { display: inline-flex; align-items: center; min-height: var(--icr-control-height); padding: 0 var(--icr-space-2); color: var(--h-ink-2); }

/* grouped lists */
.h-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--icr-space-10); }
.h-group { background: var(--h-fill); border-radius: var(--icr-radius-lg); overflow: hidden; }
.h-row { display: flex; align-items: center; gap: var(--icr-space-3); min-height: 56px; padding: var(--icr-space-3) var(--icr-space-4); color: var(--h-ink) !important; position: relative; font-size: var(--icr-text-18); }
.h-row:hover { text-decoration: none !important; background: var(--h-fill-2); }
.h-row + .h-row::before { content: ""; position: absolute; top: 0; left: var(--icr-space-4); right: 0; height: 1px; background: var(--h-sep); }
.h-row .t { flex: 1; min-width: 0; display: grid; gap: 0; }
.h-row .t b { font-weight: 500; }
.h-row .t small { color: var(--h-muted); font-size: var(--icr-text-14); }
.h-row .n, .h-row time { color: var(--h-muted); font-size: var(--icr-text-16); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-row time { font-size: var(--icr-text-14); }
.h-chev { color: var(--h-muted); flex: none; }
.h-tag-hot { color: var(--h-accent) !important; font-weight: 500; }
.h-group-title { font-size: var(--icr-text-16); font-weight: 500; color: var(--h-muted); margin: 0 0 var(--icr-space-3) var(--icr-space-1); }

/* breadcrumbs */
.h-crumbs { font-size: var(--icr-text-14); color: var(--h-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--icr-space-1); margin: 0 0 var(--icr-space-2); }
.h-crumbs a { display: inline-flex; align-items: center; min-height: var(--icr-control-height); color: var(--h-muted); }

/* product page */
.h-product { padding: var(--icr-space-10) 0 var(--icr-space-8); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--icr-space-6); align-items: center; }
.h-product .h-icon { width: 112px; height: 112px; } .h-product .h-icon svg { width: 56px; height: 56px; }
.h-product .h-photo-sm { width: 220px; height: 148px; border-radius: var(--icr-radius-lg); overflow: hidden; background: var(--icr-surface-2); }
.h-product .h-photo-sm img { width: 100%; height: 100%; object-fit: cover; }
.h-product h1 { font: var(--icr-weight-bold) var(--icr-text-48)/1.05 var(--h-display); }
.h-product p { margin: var(--icr-space-2) 0 var(--icr-space-4); color: var(--h-muted); font-size: var(--icr-text-24); line-height: 1.35; }
.h-btns { display: flex; flex-wrap: wrap; gap: var(--icr-space-3); align-items: center; }
.h-btn { display: inline-flex; align-items: center; gap: var(--icr-space-2); min-height: 48px; padding: 0 var(--icr-space-6); border-radius: var(--icr-radius-pill); background: var(--h-accent); color: var(--icr-white) !important; font-weight: 500; font-size: var(--icr-text-16); border: 0; }
.h-btn:hover { background: var(--h-accent-press); text-decoration: none !important; }
.h-btn.sec { background: var(--h-fill); color: var(--h-ink) !important; }
.h-btn.sec:hover { background: var(--h-fill-2); }
.h-btn small { font-size: var(--icr-text-14); font-weight: var(--icr-weight-regular); }
.h-card .h-btn.sec { background: var(--icr-white); }
.h-card .h-btn.sec:hover { background: var(--h-fill-2); }

/* article */
.h-art { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: var(--icr-space-16); padding-top: var(--icr-space-2); }
.h-art-main { max-width: 720px; min-width: 0; }
.h-art h1 { font: var(--icr-weight-bold) var(--icr-text-48)/1.05 var(--h-display); letter-spacing: -.01em; }
.h-meta { margin: var(--icr-space-4) 0 var(--icr-space-10); color: var(--h-muted); font-size: var(--icr-text-16); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--icr-space-5); }
.h-meta a { display: inline-flex; align-items: center; min-height: var(--icr-control-height); }
.h-meta b { color: var(--h-ink-2); font-weight: 500; }
.h-art h1.sr-only + .h-meta { margin-bottom: var(--icr-space-6); }
.h-prose { font-size: var(--icr-text-18); line-height: 1.7; color: var(--h-ink-2); }
.h-prose > * + * { margin-top: var(--icr-space-5); }
.h-prose p { margin: 0; }
.h-prose :is(p, li, td, dd, blockquote) a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.h-prose > p, .h-prose > ul, .h-prose > ol, .h-prose > blockquote { max-width: 36rem; }
.h-prose h2 { font: var(--icr-weight-bold) var(--icr-text-30)/1.15 var(--h-display); margin-top: var(--icr-space-12); scroll-margin-top: calc(var(--icr-space-16) + var(--icr-space-8)); }
.h-prose h3 { font: var(--icr-weight-bold) var(--icr-text-24)/1.25 var(--h-display); margin-top: var(--icr-space-8); scroll-margin-top: calc(var(--icr-space-16) + var(--icr-space-8)); }
.h-prose ul, .h-prose ol { padding-left: var(--icr-space-6); }
.h-prose li + li { margin-top: var(--icr-space-2); }
.h-prose img { max-width: 100%; height: auto; border-radius: var(--icr-radius-md); box-shadow: 0 0 0 1px var(--h-sep); cursor: zoom-in; }
.h-prose blockquote { margin: 0; padding: var(--icr-space-4) var(--icr-space-5); border-radius: var(--icr-radius-lg); background: var(--h-fill); font-size: var(--icr-text-16); }
.h-prose code { font: 500 var(--icr-text-16) var(--h-mono); background: var(--h-fill); border-radius: var(--icr-radius-sm); padding: 0 var(--icr-space-1); color: var(--h-ink); }
.h-prose pre { background: var(--icr-ink-900); color: var(--icr-surface); padding: var(--icr-space-4) var(--icr-space-5); border-radius: var(--icr-radius-md); overflow-x: auto; font: var(--icr-text-14)/1.6 var(--h-mono); }
.h-prose pre code { background: transparent; color: inherit; padding: 0; font-size: var(--icr-text-14); }
.h-prose .help-table { overflow-x: auto; }
.h-prose table { border-collapse: collapse; width: 100%; font-size: var(--icr-text-16); line-height: 1.5; }
.h-prose th, .h-prose td { padding: var(--icr-space-2) var(--icr-space-3); border-bottom: 1px solid var(--h-sep); vertical-align: top; }
.h-prose th { color: var(--h-ink); font-weight: 500; }
.h-prose .help-video { position: relative; aspect-ratio: 16 / 9; }
.h-prose .help-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--icr-radius-md); }
.h-prose .help-menu { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--icr-space-2); font: 500 var(--icr-text-16)/1.4 var(--h-mono); color: var(--h-ink); background: var(--h-fill); border-radius: var(--icr-radius-md); padding: var(--icr-space-1) var(--icr-space-3); vertical-align: baseline; }
.h-prose .help-menu i { font-style: normal; color: var(--h-muted); }
.h-prose .help-value { display: inline-flex; align-items: center; gap: var(--icr-space-2); vertical-align: baseline; white-space: nowrap; }
.h-prose .help-value code { font-size: var(--icr-text-16); padding: var(--icr-space-1) var(--icr-space-2); }
.h-prose .help-copy { border: 0; background: var(--icr-white); color: var(--h-ink); font: 500 var(--icr-text-14)/1 var(--h-body); padding: 0 var(--icr-space-3); min-height: 32px; border-radius: var(--icr-radius-md); cursor: pointer; box-shadow: 0 0 0 1px var(--icr-line); }
.h-prose .help-copy.done { color: var(--icr-success); }
.h-prose h2 > .help-anchor, .h-prose h3 > .help-anchor { opacity: 0; margin-left: var(--icr-space-2); color: var(--h-muted); font-weight: var(--icr-weight-regular); }
.h-prose h2:hover > .help-anchor, .h-prose h3:hover > .help-anchor, .help-anchor:focus { opacity: 1; }
.h-toc { position: sticky; top: var(--icr-space-6); align-self: start; display: grid; gap: var(--icr-space-2); font-size: var(--icr-text-14); max-height: calc(100vh - var(--icr-space-12)); overflow-y: auto; }
.h-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.h-toc a { display: flex; align-items: center; min-height: var(--icr-control-height); padding: var(--icr-space-1) 0; line-height: 1.35; color: var(--h-muted); }
.h-toc .is-sub a { padding-left: var(--icr-space-3); }
.h-toc a.on, .h-toc a:hover { color: var(--h-ink); }
.h-jump { display: none; }
.h-card { margin-top: var(--icr-space-12); padding: var(--icr-space-6); border-radius: var(--icr-radius-lg); background: var(--h-fill); display: grid; gap: var(--icr-space-4); }
.h-card h2 { font: var(--icr-weight-bold) var(--icr-text-30)/1.1 var(--h-display); }
.h-card p { margin: 0; }
.h-ready { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--icr-space-2) var(--icr-space-4); font-size: var(--icr-text-16); }
.h-ready span::before { content: "○"; color: var(--h-muted); margin-right: var(--icr-space-2); }
.h-related { margin-top: var(--icr-space-12); }

/* search results page */
.h-results { list-style: none; margin: 0; padding: 0; }
.h-results .h-row { align-items: flex-start; padding-top: var(--icr-space-4); padding-bottom: var(--icr-space-4); }
.h-results p { margin: var(--icr-space-1) 0 0; font-size: var(--icr-text-16); color: var(--h-muted); max-width: 40rem; }

/* image zoom */
.help-zoom { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; }
.help-zoom::backdrop { background: var(--icr-scrim); }
.help-zoom img { max-width: 96vw; max-height: 90vh; display: block; cursor: zoom-out; border-radius: var(--icr-radius-md); }

/* Article pages carry the topic tree, so "On this page" moves to the jump menu below 1200px. */
@media (max-width: 1199px) {
  .h-art { grid-template-columns: 1fr; gap: 0; }
  .h-toc { display: none; }
  .h-jump { display: flex; position: sticky; top: 0; z-index: 20; justify-content: space-between; align-items: center; gap: var(--icr-space-3); margin: 0 calc(-1 * var(--icr-space-6)) var(--icr-space-2); padding: var(--icr-space-2) var(--icr-space-6); background: color-mix(in srgb, var(--icr-white) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--h-sep); font-size: var(--icr-text-16); }
  .h-jump select { font: 500 var(--icr-text-16) var(--h-body); min-height: var(--icr-control-height); border: 0; background: var(--h-fill); border-radius: var(--icr-radius-md); padding: 0 var(--icr-space-3); max-width: 60%; color: var(--h-ink); }
}
@media (max-width: 991px) {
  .h-product { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .help { padding: 0 var(--icr-space-4) var(--icr-space-8); }
  .h-hero { padding: var(--icr-space-8) 0 var(--icr-space-6); }
  .h-hero h1, .h-art h1, .h-product h1 { font-size: var(--icr-text-36); }
  .h-hero .h-sub, .h-product p { font-size: var(--icr-text-18); }
  .h-field { height: 56px; }
  .h-photo { min-height: 220px; }
  .h-apps { grid-template-columns: repeat(3, 1fr); gap: var(--icr-space-4) var(--icr-space-2); } .h-icon { width: 60px; height: 60px; }
  .h-jump { margin: 0 calc(-1 * var(--icr-space-4)) var(--icr-space-2); padding: var(--icr-space-2) var(--icr-space-4); }
}
/* ---- Firmware (#398): /firmware and /firmware/{family} ------------------------------------ */
.h-tt-gap { flex: none; width: var(--icr-control-height); margin: 0 calc(-1 * var(--icr-space-2)) 0 calc(-1 * var(--icr-space-3)); }
.h-fw { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--icr-space-8); }
.h-fw > .h-block { margin-top: 0; }
.h-fw-head { display: grid; gap: var(--icr-space-2); }
.h-fw-head h1 { font: var(--icr-weight-bold) var(--icr-text-48)/1.05 var(--h-display); }
.h-fw-head p { margin: 0; color: var(--h-muted); font-size: var(--icr-text-18); max-width: 68ch; }
.h-fw-find { display: flex; gap: var(--icr-space-2); }
.h-fw-find input, .h-fw-field input, .h-fw-field select { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--icr-space-4); border: 1px solid var(--icr-line); border-radius: var(--icr-radius-md); background: var(--icr-white); color: var(--h-ink); font: var(--icr-text-16) var(--h-body); }
.h-fw-find input:focus-visible, .h-fw-field input:focus-visible, .h-fw-field select:focus-visible { outline: var(--icr-focus-outline); outline-offset: 0; border-color: var(--icr-focus-color); }
.h-fw-check { display: grid; gap: var(--icr-space-4); padding: var(--icr-space-6); border-radius: var(--icr-radius-lg); background: var(--h-fill); }
.h-fw-check h2, .h-fw-latest h2 { font: var(--icr-weight-bold) var(--icr-text-24)/1.2 var(--h-display); }
.h-fw-check p { margin: var(--icr-space-1) 0 0; color: var(--h-muted); font-size: var(--icr-text-16); }
.h-fw-check form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: var(--icr-space-3); align-items: end; }
.h-fw-field { display: grid; gap: var(--icr-space-1); min-width: 0; font-size: var(--icr-text-14); font-weight: 500; color: var(--h-muted); }
.h-fw-result { display: grid; gap: var(--icr-space-1); padding: var(--icr-space-4); border-radius: var(--icr-radius-md); background: var(--icr-white); box-shadow: inset 4px 0 0 var(--icr-warning); font-size: var(--icr-text-16); }
.h-fw-result.is-current { box-shadow: inset 4px 0 0 var(--icr-success); }
.h-fw-result strong { color: var(--h-ink); font-weight: 500; }
.h-fw-result span { color: var(--h-ink-2); }
.h-fw-result a { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.h-fw-lines { display: flex; flex-wrap: wrap; gap: var(--icr-space-2); margin-bottom: var(--icr-space-4); }
.h-fw-lines a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--icr-space-4); border-radius: var(--icr-radius-pill); background: var(--h-fill); color: var(--h-ink) !important; font-size: var(--icr-text-16); }
.h-fw-lines a:hover { background: var(--h-fill-2); text-decoration: none !important; }
.h-fw-lines a[aria-current] { background: var(--h-ink); color: var(--icr-white) !important; }
.h-fw-list { border: 1px solid var(--icr-line); border-radius: var(--icr-radius-lg); overflow: hidden; }
.h-fw-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) 112px 96px auto; gap: var(--icr-space-4); align-items: center; padding: var(--icr-space-4) var(--icr-space-5); font-size: var(--icr-text-16); }
.h-fw-row + .h-fw-row { border-top: 1px solid var(--h-sep); }
.h-fw-row .n { display: grid; gap: 0; min-width: 0; }
.h-fw-row .n a { color: var(--h-ink) !important; font-weight: 500; font-size: var(--icr-text-18); }
.h-fw-row .n small { color: var(--h-muted); font-size: var(--icr-text-14); overflow-wrap: anywhere; }
.h-fw .v { font: 500 var(--icr-text-14)/1.35 var(--h-mono); overflow-wrap: anywhere; color: var(--h-ink); }
.h-fw-row .d { color: var(--h-muted); font-size: var(--icr-text-14); font-variant-numeric: tabular-nums; }
.h-fw-row .a { justify-self: end; }
.h-fw-row .h-btn small, .h-fw-latest .h-btn small { font-size: var(--icr-text-14); opacity: .85; }
.h-fw-badge { justify-self: start; padding: var(--icr-space-1) var(--icr-space-2); border-radius: var(--icr-radius-sm); background: var(--h-fill); color: var(--h-muted); font: var(--icr-weight-bold) var(--icr-text-12)/1.2 var(--h-body); letter-spacing: .06em; text-transform: uppercase; }
.h-fw-badge.is-current { color: var(--icr-success); }
.h-fw-none, .h-fw-note { margin: 0; padding: var(--icr-space-5); color: var(--h-muted); font-size: var(--icr-text-16); }
.h-fw-note { padding: 0; }
.h-fw-latest { display: grid; gap: var(--icr-space-3); padding: var(--icr-space-6); border: 2px solid var(--h-ink); border-radius: var(--icr-radius-lg); }
.h-fw-latest .v { margin: 0; font-size: var(--icr-text-18); }
.h-fw-latest .meta .f { overflow-wrap: anywhere; }
.h-fw-latest .meta { display: flex; flex-wrap: wrap; gap: var(--icr-space-1) var(--icr-space-5); margin: 0; color: var(--h-muted); font-size: var(--icr-text-14); }
.h-fw-sha { display: flex; align-items: center; gap: var(--icr-space-3); padding: var(--icr-space-2) var(--icr-space-2) var(--icr-space-2) var(--icr-space-4); border-radius: var(--icr-radius-md); background: var(--h-fill); min-width: 0; }
.h-fw-sha code { flex: 1; min-width: 0; font: 500 var(--icr-text-14)/1.35 var(--h-mono); overflow-wrap: anywhere; }
.h-fw-sha .help-copy { flex: none; min-height: 44px; padding: 0 var(--icr-space-4); border: 0; border-radius: var(--icr-radius-md); background: var(--icr-white); color: var(--h-ink); font: 500 var(--icr-text-14)/1 var(--h-body); cursor: pointer; box-shadow: 0 0 0 1px var(--icr-line); }
.h-fw-sha .help-copy.done { color: var(--icr-success); }
.h-fw-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--icr-space-8); }
.h-fw-notes { margin: 0; padding-left: var(--icr-space-5); display: grid; gap: var(--icr-space-2); font-size: var(--icr-text-16); }
.h-fw-models { display: flex; flex-wrap: wrap; gap: var(--icr-space-2); margin: 0; }
.h-fw-models span { padding: var(--icr-space-2) var(--icr-space-3); border-radius: var(--icr-radius-sm); background: var(--h-fill); font: 500 var(--icr-text-14)/1 var(--h-mono); }
.h-fw-older summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 500; font-size: var(--icr-text-16); }
.h-fw-tw { overflow-x: auto; }
.h-fw-older table { width: 100%; border-collapse: collapse; font-size: var(--icr-text-14); }
.h-fw-older th { text-align: left; color: var(--h-muted); font-weight: 500; padding: var(--icr-space-2) var(--icr-space-3); }
.h-fw-older td { padding: var(--icr-space-3); border-top: 1px solid var(--h-sep); }
.h-fw-older td a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 991px) {
  .h-fw-row { grid-template-columns: minmax(0, 1fr) auto; }
  .h-fw-row .n, .h-fw-row .v { grid-column: 1 / -1; }
  .h-fw-row .a { grid-column: 1 / -1; justify-self: stretch; }
  .h-fw-row .a .h-btn { width: 100%; justify-content: center; }
  .h-fw-check form, .h-fw-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .h-fw-head h1 { font-size: var(--icr-text-36); }
  .h-fw-check, .h-fw-latest { padding: var(--icr-space-4); }
  .h-fw-row { padding: var(--icr-space-4); }
}

@media print {
  .hs-top, .hs-foot, .h-side, .h-hero, .h-toc, .h-card, .h-related, .h-jump { display: none !important; }
  .hs-docs, .h-art { display: block; } .hs-doc { border: 0; } .h-prose { font-size: 12pt; }
}
@media (prefers-reduced-motion: reduce) { .hs *, .hs *::before, .hs *::after { transition: none !important; animation: none !important; } }