.hc-kb-sidebar{position:sticky;top:92px;align-self:start;padding:18px;border:1px solid var(--card-border);border-radius:20px;background:rgba(255,255,255,.78);box-shadow:0 18px 54px rgba(15,23,42,.07);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hc-kb-sidebar-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.hc-kb-nav{display:grid;gap:8px}
.hc-kb-nav>.hc-kb-entry{display:block}
/* PHASE10K32_2026-08-13 — THE SIDEBAR SCROLLBAR, AND WHAT GECKO WILL ACTUALLY DO.
   Owner: "make side bar scroll bar 2px… research for firefox to make it tiny."

   Researched: Firefox implements the standard `scrollbar-width`, which takes
   KEYWORDS ONLY — auto | thin | none. There is no pixel value, and Gecko has
   never supported ::-webkit-scrollbar, so 2px is reachable in Chromium and
   nowhere else. The pixel request is open on the CSSWG (css-scrollbars #6263)
   and unresolved; the about:config knobs people cite are per-user settings a
   site cannot reach. So `thin` is Gecko's floor and the only thing below it is
   hiding the bar altogether — which is why that is offered as its own choice
   rather than pretended at.

   Default is 2px, per the owner. Firefox gets `thin` for the same setting. */
.hc-kb-sidebar.is-collapsible .hc-kb-nav{max-height:min(62vh,620px);overflow:auto;padding-right:4px;scrollbar-gutter:stable both-edges}
.hc-kb-sidebar.is-collapsible .hc-kb-nav.is-trimmed>.hc-kb-entry:nth-child(n+11){display:none}
.hc-kb-group{display:block}
.hc-kb-group>summary{list-style:none;cursor:pointer}
.hc-kb-group>summary::-webkit-details-marker{display:none}
.hc-kb-group>.hc-kb-children{display:grid;gap:8px;padding-top:8px}
.hc-kb-group:not([open])>.hc-kb-children{display:none}
.hc-kb-more{margin-top:12px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--card-border);background:color-mix(in srgb,var(--card-bg) 92%,var(--brand) 8%);color:var(--text-primary);font-size:12px;font-weight:800;cursor:pointer;transition:all .18s var(--ease)}
.hc-kb-more:hover{border-color:rgba(var(--br),.34);background:color-mix(in srgb,var(--card-bg) 84%,var(--brand) 16%)}
.hc-kb-more:focus-visible{outline:2px solid rgba(var(--br),.35);outline-offset:2px}
/* THE 2px, AND WHY scrollbar-width IS NOT SET ALONGSIDE IT.
   Chromium supports the standard `scrollbar-width` too, and the moment an element
   declares it the ::-webkit-scrollbar rules for that element are IGNORED. The
   base rule used to carry `scrollbar-width:thin`, so this 2px never applied
   anywhere: measured in Chrome, the rail reserved 20px — Chromium's own thin bar,
   10px an edge — while the sheet said 2. The two systems do not compose; each
   browser gets exactly one of them. */
.hc-kb-sidebar.is-collapsible .hc-kb-nav::-webkit-scrollbar{width:2px;height:2px}
.hc-kb-sidebar.is-collapsible .hc-kb-nav::-webkit-scrollbar-track{background:transparent}
.hc-kb-sidebar.is-collapsible .hc-kb-nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--brand) 34%,transparent);border-radius:999px}
.hc-kb-sidebar.is-collapsible .hc-kb-nav::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--brand) 48%,transparent)}
/* FIREFOX ONLY. It has no ::-webkit-scrollbar to support, so this query is true
   there and false in Chromium and Safari — which is what keeps the standard
   property away from the engines that would let it cancel the 2px above.
   `thin` is Gecko's floor: scrollbar-width takes auto | thin | none and nothing
   else, so a pixel value here would be inert. Hidden is the only step below it,
   and it is offered as its own choice rather than faked. */
@supports not selector(::-webkit-scrollbar){
  .hc-kb-sidebar.is-collapsible .hc-kb-nav{scrollbar-width:thin;scrollbar-color:rgba(var(--br),.36) transparent}
}
/* HIDDEN — the only thing thinner than `thin` in Gecko. The rail still scrolls
   by wheel, drag, keyboard and touch; only its indicator goes. */
.hc-kb-sidebar.hc-kb-sb-hidden.is-collapsible .hc-kb-nav{scrollbar-width:none;-ms-overflow-style:none;scrollbar-gutter:auto;padding-right:0}
.hc-kb-sidebar.hc-kb-sb-hidden.is-collapsible .hc-kb-nav::-webkit-scrollbar{width:0;height:0;display:none}
/* STANDARD — the browser's own bar, for anyone who wants the familiar target. */
.hc-kb-sidebar.hc-kb-sb-standard.is-collapsible .hc-kb-nav{scrollbar-width:auto;scrollbar-color:auto}
.hc-kb-sidebar.hc-kb-sb-standard.is-collapsible .hc-kb-nav::-webkit-scrollbar{width:auto;height:auto}
.hc-kb-sidebar.hc-kb-sb-standard.is-collapsible .hc-kb-nav::-webkit-scrollbar-thumb{background:initial;border-radius:0}
.hc-kb-cat-link{display:grid;grid-template-columns:38px minmax(0,1fr) 16px;gap:12px;align-items:center;padding:12px;border:1px solid transparent;border-radius:14px;color:inherit;text-decoration:none;background:rgba(255,255,255,.45);transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}
.hc-kb-cat-link:hover{transform:translateX(4px);border-color:rgba(var(--br),.18);background:rgba(255,255,255,.86);box-shadow:0 12px 30px rgba(15,23,42,.07)}
.hc-kb-sidebar.hc-kb-style-compact .hc-kb-nav{gap:4px}
.hc-kb-sidebar.hc-kb-style-compact .hc-kb-group>.hc-kb-children{gap:4px;padding-top:2px}
.hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-link{grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:6px 10px!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:10px!important}
.hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-link:hover{transform:none!important;background:rgba(var(--br),.06)!important;border-color:transparent!important;box-shadow:none!important}
.hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-icon,.hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-arrow,.hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-desc,.hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-count{display:none!important}
.hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-name{font-size:13.5px!important;font-weight:600!important;line-height:1.35!important;white-space:normal!important;color:var(--text-secondary)!important}
.hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-link.is-active{background:rgba(var(--br),.10)!important;border-left:3px solid var(--brand)!important;padding-left:10px!important}
.hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-link.is-active .hc-kb-cat-name{color:var(--brand-ink,var(--brand))!important;font-weight:700!important}
.hc-kb-cat-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--brand-10);border:1px solid var(--brand-15);font-size:18px;line-height:1}
.hc-kb-cat-copy{min-width:0;display:grid;gap:3px}
.hc-kb-cat-name{font-size:14px;font-weight:850;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-kb-cat-desc{font-size:12px;line-height:1.4;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hc-kb-cat-count{font-size:11.5px;font-weight:750;color:var(--brand-ink,var(--brand));margin-top:2px}
.hc-kb-cat-arrow{color:var(--g300);font-weight:900;transition:transform .18s var(--ease),color .18s var(--ease)}
.hc-kb-cat-link:hover .hc-kb-cat-arrow{color:var(--brand-ink,var(--brand));transform:translateX(2px)}
.hc-kb-content{min-width:0}.hc-kb-content .hc-pop-shell{margin-bottom:0}.hc-kb-empty{min-height:260px;display:grid;place-items:center;text-align:center}
.surface-smoke .hc-kb-sidebar,.layout-obsidian .hc-kb-sidebar,.layout-command .hc-kb-sidebar{background:rgba(15,23,42,.72);border-color:rgba(255,255,255,.12)}
.surface-smoke .hc-kb-cat-link,.layout-obsidian .hc-kb-cat-link,.layout-command .hc-kb-cat-link{background:rgba(2,6,23,.26);color:#f8fafc}.surface-smoke .hc-kb-cat-link:hover,.layout-obsidian .hc-kb-cat-link:hover,.layout-command .hc-kb-cat-link:hover{background:rgba(15,23,42,.84)}
.surface-smoke .hc-kb-cat-name,.layout-obsidian .hc-kb-cat-name,.layout-command .hc-kb-cat-name{color:#f8fafc}.surface-smoke .hc-kb-cat-desc,.layout-obsidian .hc-kb-cat-desc,.layout-command .hc-kb-cat-desc{color:#cbd5e1}
@media(max-width:920px){.hc-kb-shell{grid-template-columns:1fr;gap:18px}.hc-kb-sidebar{position:relative;top:auto}.hc-kb-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.hc-kb-sidebar.is-collapsible .hc-kb-nav{max-height:min(50vh,420px)}}
@media(max-width:560px){.hc-kb-shell{gap:14px}.hc-kb-sidebar{padding:14px;border-radius:16px}.hc-kb-nav{grid-template-columns:1fr}.hc-kb-cat-link{grid-template-columns:34px minmax(0,1fr) 14px;padding:10px}.hc-kb-cat-icon{width:34px;height:34px}}

/* Persistent right-side category rail */
.hc-page-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:24px;align-items:start}
.hc-page-content{min-width:0}.hc-page-shell>.hc-kb-sidebar{grid-column:2;grid-row:1;position:sticky;top:92px}.hc-page-shell>.hc-page-content{grid-column:1;grid-row:1}
/* PHASE_HC_MORE_CONFIG — category rail on the LEFT (default keeps it right).
   Must out-rank the ID-level `#hc-page:not(.view-article) .hc-page-shell`
   !important grid rule further down, so mirror that specificity + !important. */
/* (1,4,0) specificity so it beats the later `#hc-page:not(.view-article)
   .hc-page-shell>.hc-kb-sidebar{grid-column:2;justify-self:end}` "final rail" rule. */
#hc-page:not(.view-article) .hc-page-shell.hc-rail-left{grid-template-columns:clamp(260px,22vw,340px) minmax(0,1fr)!important}
#hc-page:not(.view-article) .hc-page-shell.hc-rail-left>.hc-kb-sidebar{grid-column:1!important;grid-row:1!important;justify-self:start!important}
#hc-page:not(.view-article) .hc-page-shell.hc-rail-left>.hc-page-content{grid-column:2!important;grid-row:1!important}
@media(max-width:920px){#hc-page:not(.view-article) .hc-page-shell.hc-rail-left{grid-template-columns:1fr!important}#hc-page:not(.view-article) .hc-page-shell.hc-rail-left>.hc-kb-sidebar,#hc-page:not(.view-article) .hc-page-shell.hc-rail-left>.hc-page-content{grid-column:1!important;justify-self:stretch!important}}
.hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link.is-active{border-color:rgba(var(--br),.30);background:rgba(var(--br),.10);box-shadow:0 14px 34px rgba(var(--br),.12)}
.hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link.is-active .hc-kb-cat-name,.hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link.is-active .hc-kb-cat-arrow{color:var(--brand-ink,var(--brand))}
@media(max-width:1100px){.hc-page-shell{grid-template-columns:minmax(0,1fr) minmax(220px,260px);gap:18px}.hc-art-layout{grid-template-columns:1fr!important}.hc-sidebar{order:0}}
/* PHASE_HC_MOBILE_2026-08-17 — EVERY rail occupant drops below the content on a phone, not
   only .hc-kb-sidebar: the help / quick-links / channels cards are direct shell children and
   kept order:0, so "Still need help?" led the category page above the categories (measured
   at 390px). */
@media(max-width:820px){.hc-page-shell{grid-template-columns:1fr}.hc-page-shell>*{grid-column:1;grid-row:auto}.hc-page-shell>.hc-kb-sidebar{position:relative;top:auto}.hc-page-shell>*{order:2}.hc-page-shell>.hc-page-content{order:1}.hc-page-shell>.hc-kb-sidebar .hc-kb-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hc-page-shell>.hc-kb-sidebar .hc-kb-nav{grid-template-columns:1fr}}

/* Public layout refinement: category rail belongs in the sidebar stack */
html,body{min-height:100%}
body{min-height:100vh;display:flex;flex-direction:column}
#hc-page{flex:1 0 auto;display:flex;flex-direction:column}
#hc-page .hc-main{flex:1 0 auto;width:100%}
.hc-foot{flex-shrink:0;margin-top:0!important}
.hc-page-shell{display:block!important;max-width:none!important}
.hc-page-content{min-width:0!important}
.hc-sidebar{display:flex;flex-direction:column;gap:18px}
.hc-sidebar .hc-kb-sidebar{position:relative!important;top:auto!important;width:100%;padding:22px!important;border:1px solid rgba(255,255,255,.76)!important;border-radius:28px!important;background:rgba(255,255,255,.68)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 24px 70px rgba(15,23,42,.08)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.hc-sidebar .hc-kb-sidebar-head{margin-bottom:14px}.hc-sidebar .hc-kb-nav{display:grid;gap:10px}.hc-sidebar .hc-kb-cat-link{grid-template-columns:42px minmax(0,1fr) 14px;padding:12px;border-radius:18px;background:rgba(255,255,255,.46);border:1px solid rgba(148,163,184,.18);box-shadow:none}.hc-sidebar .hc-kb-cat-link:hover{transform:translateX(3px);box-shadow:0 14px 34px rgba(15,23,42,.08)}.hc-sidebar .hc-kb-cat-icon{width:42px;height:42px;border-radius:16px}.hc-sidebar .hc-kb-cat-desc{display:none}.hc-sidebar .hc-kb-cat-name{font-size:14px;white-space:normal}.hc-sidebar .hc-kb-cat-count{display:none}
@media(max-width:1100px){.hc-art-layout{grid-template-columns:minmax(0,1fr) 270px!important}.hc-sidebar{order:0!important}}
@media(max-width:920px){.hc-art-layout{grid-template-columns:1fr!important}.hc-sidebar{position:relative;top:auto}.hc-sidebar .hc-kb-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hc-sidebar .hc-kb-nav{grid-template-columns:1fr}.hc-sidebar .hc-kb-sidebar{padding:16px!important;border-radius:20px!important}.hc-sidebar .hc-kb-cat-link{grid-template-columns:36px minmax(0,1fr) 14px}.hc-sidebar .hc-kb-cat-icon{width:36px;height:36px;border-radius:13px}}
.hc-home-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:24px;align-items:start}
.hc-home-main{min-width:0}
.hc-home-layout>.hc-kb-sidebar{grid-column:2;grid-row:1;position:sticky;top:92px}
.hc-home-layout>.hc-kb-sidebar .hc-kb-cat-link.is-active{border-color:rgba(var(--br),.30);background:rgba(var(--br),.10);box-shadow:0 14px 34px rgba(var(--br),.12)}
.hc-home-layout>.hc-kb-sidebar .hc-kb-cat-link.is-active .hc-kb-cat-name,.hc-home-layout>.hc-kb-sidebar .hc-kb-cat-link.is-active .hc-kb-cat-arrow{color:var(--brand-ink,var(--brand))}
@media(max-width:920px){.hc-home-layout{grid-template-columns:1fr}.hc-home-layout>.hc-kb-sidebar{grid-column:1;grid-row:auto;position:relative;top:auto}.hc-home-layout>.hc-kb-sidebar .hc-kb-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hc-home-layout>.hc-kb-sidebar .hc-kb-nav{grid-template-columns:1fr}}
.hc-category-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:24px;align-items:start}
.hc-category-main{min-width:0}
.hc-category-layout>.hc-kb-sidebar{grid-column:2;grid-row:1;position:sticky;top:92px}
.hc-category-layout>.hc-kb-sidebar .hc-kb-cat-link.is-active{border-color:rgba(var(--br),.30);background:rgba(var(--br),.10);box-shadow:0 14px 34px rgba(var(--br),.12)}
.hc-category-layout>.hc-kb-sidebar .hc-kb-cat-link.is-active .hc-kb-cat-name,.hc-category-layout>.hc-kb-sidebar .hc-kb-cat-link.is-active .hc-kb-cat-arrow{color:var(--brand-ink,var(--brand))}
@media(max-width:920px){.hc-category-layout{grid-template-columns:1fr}.hc-category-layout>.hc-kb-sidebar{grid-column:1;grid-row:auto;position:relative;top:auto}.hc-category-layout>.hc-kb-sidebar .hc-kb-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hc-category-layout>.hc-kb-sidebar .hc-kb-nav{grid-template-columns:1fr}}

/* Final persistent right-side category rail */
.hc-page-shell{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(240px,300px)!important;gap:24px!important;align-items:start!important;max-width:none!important}
.hc-page-content{grid-column:1!important;grid-row:1!important;min-width:0!important}
.hc-page-shell>.hc-kb-sidebar{grid-column:2!important;grid-row:1!important;position:sticky!important;top:92px!important;width:100%;padding:22px!important;border:1px solid rgba(255,255,255,.76)!important;border-radius:28px!important;background:rgba(255,255,255,.68)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 24px 70px rgba(15,23,42,.08)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.hc-page-shell>.hc-kb-sidebar .hc-kb-sidebar-head{margin-bottom:14px}
.hc-page-shell>.hc-kb-sidebar .hc-kb-nav{display:grid;gap:10px}
.hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link{grid-template-columns:42px minmax(0,1fr) 14px;padding:12px;border-radius:18px;background:rgba(255,255,255,.46);border:1px solid rgba(148,163,184,.18);box-shadow:none}
.hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link:hover{transform:translateX(3px);box-shadow:0 14px 34px rgba(15,23,42,.08)}
.hc-page-shell>.hc-kb-sidebar .hc-kb-cat-icon{width:42px;height:42px;border-radius:16px}
.hc-page-shell>.hc-kb-sidebar .hc-kb-cat-desc{display:none}
.hc-page-shell>.hc-kb-sidebar .hc-kb-cat-name{font-size:14px;white-space:normal}
.hc-page-shell>.hc-kb-sidebar .hc-kb-cat-count{display:none}
@media(max-width:1100px){.hc-page-shell{grid-template-columns:minmax(0,1fr) minmax(220px,260px)!important;gap:18px!important}.hc-art-layout{grid-template-columns:1fr!important}}
@media(max-width:920px){.hc-page-shell{grid-template-columns:1fr!important}.hc-page-content,.hc-page-shell>.hc-kb-sidebar{grid-column:1!important;grid-row:auto!important}.hc-page-shell>.hc-kb-sidebar{position:relative!important;top:auto!important}.hc-page-shell>.hc-kb-sidebar .hc-kb-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hc-page-shell>.hc-kb-sidebar{padding:16px!important;border-radius:20px!important}.hc-page-shell>.hc-kb-sidebar .hc-kb-nav{grid-template-columns:1fr}.hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link{grid-template-columns:36px minmax(0,1fr) 14px}.hc-page-shell>.hc-kb-sidebar .hc-kb-cat-icon{width:36px;height:36px;border-radius:13px}}

/* Article pages keep category under On this page, without reserving the global right rail */
#hc-page.view-article .hc-page-shell{display:block!important;grid-template-columns:1fr!important}
#hc-page.view-article .hc-page-content{grid-column:auto!important;width:100%!important}
#hc-page.view-article .hc-sidebar .hc-kb-sidebar{position:relative!important;top:auto!important;width:100%;padding:22px!important;border:1px solid rgba(255,255,255,.76)!important;border-radius:28px!important;background:rgba(255,255,255,.68)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 24px 70px rgba(15,23,42,.08)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#hc-page.view-article .hc-sidebar .hc-kb-cat-desc,#hc-page.view-article .hc-sidebar .hc-kb-cat-count{display:none}

/* Universal public KB polish: gutters, readable articles, non-overlapping rails */
#hc-page .hc-main{box-sizing:border-box!important;width:100%!important;max-width:1400px!important;margin-left:auto!important;margin-right:auto!important;padding-left:clamp(22px,4vw,56px)!important;padding-right:clamp(22px,4vw,56px)!important}
#hc-page .hc-page-shell{box-sizing:border-box!important;width:100%!important;max-width:100%!important}
#hc-page:not(.view-article) .hc-page-shell{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(260px,22vw,340px)!important;gap:clamp(28px,4vw,56px)!important;align-items:start!important}
/* NO CLIPPING HERE. This box is exactly as wide as the cards inside it — a
   measured row starts and ends on the content box to the pixel — so ANY clip on
   this element cuts every hover effect the cards paint outside their border box
   (shadow, ring, glow) flush against their own edge. That is the "cut on hover"
   the owner reported, and it happened on all twelve listing styles at once
   because the clip is on their shared container, not on any one design.
   `min-width:0` is what actually stops a wide child from blowing out the grid
   track; the clip was never carrying that load. */
#hc-page:not(.view-article) .hc-page-content{min-width:0!important;overflow:visible!important}
#hc-page:not(.view-article) .hc-page-shell>.hc-kb-sidebar{position:sticky!important;top:92px!important;grid-column:2!important;grid-row:1!important;width:100%!important;max-width:340px!important;justify-self:end!important}
#hc-page .hc-pop-shell,#hc-page .hc-alist,#hc-page .hc-pop-list{min-width:0!important;max-width:100%!important}
#hc-page .hc-pop-item,#hc-page .hc-arow{min-width:0!important;max-width:100%!important;overflow:hidden!important}
#hc-page .hc-pop-body,#hc-page .hc-arow-body{min-width:0!important;overflow:hidden!important}
#hc-page .hc-pop-title,#hc-page .hc-pop-exc,#hc-page .hc-arow-title,#hc-page .hc-arow-exc{min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}
#hc-page.view-article .hc-main{max-width:1320px!important}
#hc-page.view-article .hc-page-shell{display:block!important}
#hc-page.view-article .hc-art-layout{grid-template-columns:minmax(0,1fr) clamp(240px,22vw,300px)!important;gap:clamp(24px,4vw,48px)!important;max-width:1180px!important;margin-left:auto!important;margin-right:auto!important}
#hc-page.view-article .hc-art-card{box-sizing:border-box!important;min-width:0!important;max-width:100%!important;padding:clamp(28px,4vw,52px)!important}
#hc-page.view-article .hc-art-title{font-size:clamp(34px,4.6vw,64px)!important;line-height:1.03!important;letter-spacing:0!important;max-width:100%!important;overflow-wrap:anywhere!important;margin-bottom:clamp(24px,3vw,38px)!important}
#hc-page.view-article .hc-body{font-size:clamp(17px,1.28vw,21px)!important;line-height:1.78!important;max-width:920px!important;overflow-wrap:anywhere!important}
#hc-page.view-article .hc-body h1,#hc-page.view-article .hc-body h1[style]{font-size:clamp(32px,4vw,54px)!important;line-height:1.08!important;margin:0 0 26px!important;max-width:100%!important;overflow-wrap:anywhere!important}
#hc-page.view-article .hc-body h2,#hc-page.view-article .hc-body h2[style]{font-size:clamp(26px,2.7vw,38px)!important;line-height:1.18!important;margin:42px 0 18px!important;max-width:100%!important}
#hc-page.view-article .hc-body h3,#hc-page.view-article .hc-body h3[style]{font-size:clamp(21px,2vw,28px)!important;line-height:1.25!important;margin:32px 0 14px!important}
#hc-page.view-article .hc-body p,#hc-page.view-article .hc-body li{max-width:900px!important}

/* Inherit template surface for the side category rail */
#hc-page .hc-kb-sidebar,#hc-page .hc-sidebar .hc-kb-sidebar,#hc-page .hc-page-shell>.hc-kb-sidebar,#hc-page.view-article .hc-sidebar .hc-kb-sidebar{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#hc-page .hc-kb-cat-link,#hc-page .hc-sidebar .hc-kb-cat-link,#hc-page .hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link{background:transparent!important;box-shadow:none!important}
#hc-page .hc-kb-cat-link:hover{background:rgba(var(--br),.06)!important}
#hc-page .hc-kb-cat-link.is-active,#hc-page .hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link.is-active,#hc-page.view-article .hc-sidebar .hc-kb-cat-link.is-active{background:rgba(var(--br),.08)!important}
.layout-minimal#hc-page .hc-main{max-width:1400px!important;padding-left:clamp(28px,4vw,68px)!important;padding-right:clamp(28px,4vw,68px)!important}
.layout-minimal#hc-page:not(.view-article) .hc-page-shell>.hc-kb-sidebar{border-radius:28px!important;border:1px solid rgba(24,23,19,.10)!important;background:rgba(248,247,242,.86)!important;box-shadow:0 26px 80px rgba(24,23,19,.10)!important}
.layout-minimal#hc-page .hc-kb-cat-link{border-radius:18px!important;border:1px solid rgba(24,23,19,.10)!important;background:rgba(255,255,255,.48)!important}
.layout-minimal#hc-page .hc-pop-list{border-top:1px solid #181713!important}
.layout-minimal#hc-page .hc-pop-item{display:flex!important;align-items:center!important;gap:14px!important;padding:18px 0!important}
@media(max-width:1100px){#hc-page:not(.view-article) .hc-page-shell{grid-template-columns:minmax(0,1fr) minmax(230px,280px)!important;gap:24px!important}#hc-page.view-article .hc-art-layout{grid-template-columns:minmax(0,1fr) 260px!important}}
@media(max-width:920px){#hc-page .hc-main{padding-left:18px!important;padding-right:18px!important}#hc-page:not(.view-article) .hc-page-shell,#hc-page.view-article .hc-art-layout{grid-template-columns:1fr!important}#hc-page:not(.view-article) .hc-page-shell>.hc-kb-sidebar{position:relative!important;top:auto!important;grid-column:1!important;max-width:none!important;justify-self:stretch!important}#hc-page.view-article .hc-sidebar{position:relative!important;top:auto!important;order:0!important}#hc-page.view-article .hc-body{font-size:17px!important}}
@media(max-width:560px){#hc-page.view-article .hc-art-card{padding:22px 18px!important}#hc-page.view-article .hc-art-title{font-size:clamp(30px,10vw,42px)!important}.layout-minimal#hc-page .hc-main{padding-left:16px!important;padding-right:16px!important}}

/* Final width and Lumen hero correction */
.layout-minimal .hc-minimal-kicker{display:none!important}
.layout-minimal .hc-hero-minimal{min-height:auto!important;padding:clamp(42px,6vw,76px) clamp(22px,4vw,64px) clamp(34px,5vw,58px)!important}
.layout-minimal .hc-lumen-layout{grid-template-columns:minmax(0,1fr) minmax(300px,430px)!important;gap:clamp(24px,4vw,46px)!important;align-items:center!important;max-width:1280px!important;margin:0 auto!important}
.layout-minimal .hc-lumen-index{display:none!important}
.layout-minimal .hc-lumen-title h1{font-size:clamp(44px,6.2vw,88px)!important;line-height:.92!important;max-width:680px!important;margin:0!important}
#hc-page.view-article .hc-main{max-width:none!important;width:100%!important}
#hc-page.view-article .hc-art-layout{width:100%!important;max-width:none!important;grid-template-columns:minmax(0,1fr) clamp(240px,22vw,300px)!important;gap:clamp(24px,4vw,52px)!important;margin:0!important}
#hc-page.view-article .hc-art-card{width:100%!important;max-width:none!important}
#hc-page.view-article .hc-body{max-width:none!important;width:100%!important}
#hc-page.view-article .hc-body p,#hc-page.view-article .hc-body li,#hc-page.view-article .hc-body h1,#hc-page.view-article .hc-body h2,#hc-page.view-article .hc-body h3{max-width:none!important}
/* PHASE_HC_MORE_CONFIG — sidebar-left ALSO on the article reading page (its own
   .hc-art-layout grid; matches the winning #hc-page.view-article rule + a class
   so it wins, and flips the sidebar into column 1 via order). */
#hc-page.view-article .hc-art-layout.hc-art-rail-left{grid-template-columns:clamp(240px,22vw,300px) minmax(0,1fr)!important}
#hc-page.view-article .hc-art-layout.hc-art-rail-left>.hc-sidebar{order:-1}
@media(max-width:920px){.layout-minimal .hc-lumen-layout{grid-template-columns:1fr!important}.layout-minimal .hc-lumen-title h1{font-size:clamp(38px,10vw,64px)!important}#hc-page.view-article .hc-art-layout{grid-template-columns:1fr!important}
/* PHASE_HC_MOBILE_WIDGET — the rail-left rule above carries an EXTRA class
   (.hc-art-rail-left), so it outranks the plain .hc-art-layout collapse and kept
   a 2-column grid at every width. With order reset below, the article text was
   squeezed into the 240-300px rail column while the sidebar took the wide one.
   The collapse has to repeat the class to match that specificity. */
#hc-page.view-article .hc-art-layout.hc-art-rail-left{grid-template-columns:1fr!important}#hc-page.view-article .hc-art-layout.hc-art-rail-left>.hc-sidebar{order:0}}

/* Final Lumen scale trim */
.layout-minimal .hc-lumen-title h1{font-size:clamp(36px,4.6vw,64px)!important;line-height:.98!important;max-width:620px!important}
.layout-minimal .hc-hero-minimal{padding-top:clamp(34px,5vw,58px)!important;padding-bottom:clamp(28px,4vw,44px)!important}
@media(max-width:920px){.layout-minimal .hc-lumen-title h1{font-size:clamp(34px,8vw,52px)!important}}

/* Absolute final: side category rail inherits every template surface */
#hc-page .hc-kb-sidebar,#hc-page .hc-sidebar .hc-kb-sidebar,#hc-page .hc-page-shell>.hc-kb-sidebar,#hc-page.view-article .hc-sidebar .hc-kb-sidebar,.layout-minimal#hc-page:not(.view-article) .hc-page-shell>.hc-kb-sidebar{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#hc-page .hc-kb-cat-link,#hc-page .hc-sidebar .hc-kb-cat-link,#hc-page .hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link,.layout-minimal#hc-page .hc-kb-cat-link{background:transparent!important;box-shadow:none!important}
#hc-page .hc-kb-cat-link:hover{background:rgba(var(--br),.06)!important}
#hc-page .hc-kb-cat-link.is-active,#hc-page .hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link.is-active,#hc-page.view-article .hc-sidebar .hc-kb-cat-link.is-active{background:rgba(var(--br),.08)!important}
/* Final surface sync: right rails and side cards match article surfaces */
#hc-page .hc-side-card,#hc-page .hc-kb-sidebar,#hc-page .hc-sidebar .hc-kb-sidebar,#hc-page .hc-page-shell>.hc-kb-sidebar,#hc-page.view-article .hc-sidebar .hc-kb-sidebar{background:var(--card-fill)!important;border:var(--card-border-w) solid var(--card-edge)!important;box-shadow:var(--card-shadow)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#hc-page .hc-kb-cat-link,#hc-page .hc-sidebar .hc-kb-cat-link,#hc-page .hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link{background:var(--card-bg)!important;border-color:var(--card-border)!important;box-shadow:none!important}
#hc-page .hc-kb-cat-link:hover{background:var(--card-bg)!important;border-color:rgba(var(--br),.24)!important;box-shadow:0 14px 34px rgba(15,23,42,.08)!important}
#hc-page .hc-kb-cat-link.is-active,#hc-page .hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link.is-active,#hc-page.view-article .hc-sidebar .hc-kb-cat-link.is-active{background:color-mix(in srgb,var(--card-bg) 88%,var(--brand) 12%)!important;border-color:rgba(var(--br),.28)!important}
.surface-smoke#hc-page .hc-side-card,.surface-smoke#hc-page .hc-kb-sidebar,.surface-smoke#hc-page .hc-kb-cat-link{background:rgba(15,23,42,.58)!important;border-color:rgba(255,255,255,.12)!important;color:#f8fafc!important}
.layout-horizon#hc-page .hc-side-card,.layout-horizon#hc-page .hc-kb-sidebar,.layout-horizon#hc-page .hc-sidebar .hc-kb-sidebar,.layout-horizon#hc-page .hc-page-shell>.hc-kb-sidebar,.layout-horizon#hc-page.view-article .hc-sidebar .hc-kb-sidebar{background:rgba(255,255,255,.64)!important;border-color:rgba(255,255,255,.72)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 16px 38px rgba(15,23,42,.06)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
.layout-horizon#hc-page .hc-kb-cat-link{background:rgba(255,255,255,.64)!important;border-color:rgba(255,255,255,.72)!important}
.layout-horizon#hc-page .hc-pop-list,.layout-horizon#hc-page .hc-pop-list-horizon{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;overflow:visible!important}
.layout-horizon#hc-page .hc-pop-item{flex:auto!important;display:grid!important;grid-template-columns:50px minmax(0,1fr) auto auto!important;align-items:start!important;gap:16px!important;min-height:220px!important;padding:28px 30px!important;background:rgba(255,255,255,.64)!important;border-color:rgba(255,255,255,.72)!important}
.layout-horizon#hc-page .hc-pop-num{width:50px!important;height:50px!important;margin:0!important;display:grid!important;place-items:center!important;border-radius:16px!important;background:rgba(var(--br),.10)!important;color:var(--brand-ink,var(--brand))!important;font-size:16px!important}
.layout-horizon#hc-page .hc-pop-body{display:flex!important;flex-direction:column!important;gap:10px!important;min-width:0!important}
.layout-horizon#hc-page .hc-pop-title{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-height:1.25!important;font-size:18px!important;overflow:hidden!important;text-overflow:clip!important}
.layout-horizon#hc-page .hc-pop-exc{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:10!important;line-height:1.6!important;font-size:14px!important;overflow:hidden!important;text-overflow:clip!important}
.layout-horizon#hc-page .hc-pop-views,.layout-horizon#hc-page .hc-arr{align-self:end!important;margin-top:auto!important}
.layout-horizon#hc-page .hc-arow{align-items:flex-start!important;min-height:130px!important;padding:24px 28px!important;background:rgba(255,255,255,.64)!important;border-color:rgba(255,255,255,.72)!important}
.layout-horizon#hc-page .hc-arow-title{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-height:1.28!important;overflow:hidden!important}
.layout-horizon#hc-page .hc-arow-exc{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:5!important;line-height:1.55!important;overflow:hidden!important}
@media(max-width:760px){.layout-horizon#hc-page .hc-pop-item{grid-template-columns:44px minmax(0,1fr)!important}.layout-horizon#hc-page .hc-pop-views,.layout-horizon#hc-page .hc-arr{grid-column:2!important;justify-self:start!important}.layout-horizon#hc-page .hc-pop-exc{-webkit-line-clamp:6!important}}

/* Explicit side-surface matches for layouts with custom article card paint */
.layout-command#hc-page .hc-side-card,.layout-command#hc-page .hc-kb-sidebar,.layout-command#hc-page .hc-kb-cat-link{background:#020617!important;border-color:rgba(125,211,252,.22)!important;color:#e5eefb!important}
.layout-vault#hc-page .hc-side-card,.layout-vault#hc-page .hc-kb-sidebar,.layout-vault#hc-page .hc-kb-cat-link{background:linear-gradient(145deg,#fffaf0,#f7efe0)!important;border-color:rgba(161,98,7,.22)!important;box-shadow:0 22px 0 rgba(161,98,7,.05),0 30px 70px rgba(68,64,60,.10)!important}
.layout-sonar#hc-page .hc-side-card,.layout-sonar#hc-page .hc-kb-sidebar,.layout-sonar#hc-page .hc-kb-cat-link{background:rgba(6,78,59,.72)!important;border-color:rgba(94,234,212,.22)!important;color:#d1fae5!important}
.layout-editorial#hc-page .hc-side-card,.layout-editorial#hc-page .hc-kb-sidebar,.layout-editorial#hc-page .hc-kb-cat-link{background:#fff!important;border-color:#e7d8c9!important;box-shadow:10px 10px 0 rgba(124,45,18,.08)!important}
.layout-ledger#hc-page .hc-side-card,.layout-ledger#hc-page .hc-kb-sidebar,.layout-ledger#hc-page .hc-kb-cat-link{background:#fff!important;border-color:#cbd5e1!important;box-shadow:none!important;border-radius:6px!important}
.layout-mosaic#hc-page .hc-side-card,.layout-mosaic#hc-page .hc-kb-sidebar,.layout-mosaic#hc-page .hc-kb-cat-link{background:#fff!important;border-color:#111827!important;box-shadow:8px 8px 0 rgba(17,24,39,.14)!important;border-radius:0!important}
.layout-zenith#hc-page .hc-side-card,.layout-zenith#hc-page .hc-kb-sidebar,.layout-zenith#hc-page .hc-kb-cat-link{background:linear-gradient(180deg,#fff,#e0f2fe)!important;border-color:#bae6fd!important}
.layout-gallery#hc-page .hc-side-card,.layout-gallery#hc-page .hc-kb-sidebar,.layout-gallery#hc-page .hc-kb-cat-link{background:#fff!important;border-color:#fff!important;box-shadow:0 24px 70px rgba(17,24,39,.14)!important;border-radius:3px!important}
.layout-stack#hc-page .hc-side-card,.layout-stack#hc-page .hc-kb-sidebar,.layout-stack#hc-page .hc-kb-cat-link{background:#fff!important;border-color:#dbeafe!important;box-shadow:0 8px 0 #dbeafe!important}
.layout-sanctuary#hc-page .hc-side-card,.layout-sanctuary#hc-page .hc-kb-sidebar,.layout-sanctuary#hc-page .hc-kb-cat-link,.layout-orbit#hc-page .hc-side-card,.layout-orbit#hc-page .hc-kb-sidebar,.layout-orbit#hc-page .hc-kb-cat-link{background:rgba(255,255,255,.70)!important;border-color:rgba(20,83,45,.14)!important}
.layout-runway#hc-page .hc-side-card,.layout-runway#hc-page .hc-kb-sidebar,.layout-runway#hc-page .hc-kb-cat-link{background:#fff!important;border-color:#facc15!important}

/* Absolute final: category rail mirrors side-card surfaces on every view */
#hc-page .hc-sidebar .hc-kb-sidebar,#hc-page.view-article .hc-sidebar .hc-kb-sidebar,#hc-page .hc-page-shell>.hc-kb-sidebar{background:var(--card-bg)!important;border:1.5px solid var(--card-border)!important;color:var(--text-primary)!important;box-shadow:var(--shadow-sm)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#hc-page .hc-sidebar .hc-kb-sidebar .hc-sec-label,#hc-page .hc-page-shell>.hc-kb-sidebar .hc-sec-label,#hc-page .hc-kb-sidebar .hc-kb-cat-name{color:var(--text-primary)!important}
#hc-page .hc-kb-sidebar .hc-kb-cat-desc,#hc-page .hc-kb-sidebar .hc-kb-cat-count,#hc-page .hc-kb-sidebar .hc-kb-cat-arrow{color:var(--text-secondary)!important}
#hc-page .hc-sidebar .hc-kb-cat-link,#hc-page.view-article .hc-sidebar .hc-kb-cat-link,#hc-page .hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link{background:color-mix(in srgb,var(--card-bg) 92%,var(--brand) 8%)!important;border:1px solid var(--card-border)!important;color:var(--text-primary)!important;box-shadow:none!important}
#hc-page .hc-sidebar .hc-kb-cat-link:hover,#hc-page .hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link:hover{background:color-mix(in srgb,var(--card-bg) 84%,var(--brand) 16%)!important;border-color:rgba(var(--br),.30)!important}
#hc-page.layout-command .hc-side-card,#hc-page.layout-command .hc-sidebar .hc-kb-sidebar,#hc-page.layout-command.view-article .hc-sidebar .hc-kb-sidebar,#hc-page.layout-command .hc-page-shell>.hc-kb-sidebar{background:rgba(2,6,23,.66)!important;border-color:rgba(125,211,252,.16)!important;color:#e5eefb!important;box-shadow:0 22px 70px rgba(0,0,0,.18)!important}
#hc-page.layout-command .hc-sidebar .hc-kb-cat-link,#hc-page.layout-command .hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link{background:rgba(2,6,23,.66)!important;border-color:rgba(125,211,252,.16)!important;color:#e5eefb!important}
#hc-page.layout-command .hc-kb-sidebar .hc-sec-label,#hc-page.layout-command .hc-kb-sidebar .hc-kb-cat-name{color:#e5eefb!important}
#hc-page.layout-command .hc-kb-sidebar .hc-kb-cat-arrow,#hc-page.layout-command .hc-kb-sidebar .hc-kb-cat-desc,#hc-page.layout-command .hc-kb-sidebar .hc-kb-cat-count{color:#cbd5e1!important}
#hc-page.layout-obsidian .hc-side-card,#hc-page.layout-obsidian .hc-sidebar .hc-kb-sidebar,#hc-page.layout-obsidian.view-article .hc-sidebar .hc-kb-sidebar,#hc-page.layout-obsidian .hc-page-shell>.hc-kb-sidebar{background:#10131a!important;border-color:#252a35!important;color:#f5f7fb!important;box-shadow:0 22px 70px rgba(0,0,0,.24)!important}
#hc-page.layout-obsidian .hc-sidebar .hc-kb-cat-link,#hc-page.layout-obsidian .hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link{background:#10131a!important;border-color:#252a35!important;color:#f5f7fb!important}
#hc-page.layout-obsidian .hc-kb-sidebar .hc-sec-label,#hc-page.layout-obsidian .hc-kb-sidebar .hc-kb-cat-name{color:#f5f7fb!important}
#hc-page.layout-obsidian .hc-kb-sidebar .hc-kb-cat-arrow,#hc-page.layout-obsidian .hc-kb-sidebar .hc-kb-cat-desc,#hc-page.layout-obsidian .hc-kb-sidebar .hc-kb-cat-count{color:#a5adbb!important}
#hc-page.layout-sonar .hc-side-card,#hc-page.layout-sonar .hc-sidebar .hc-kb-sidebar,#hc-page.layout-sonar.view-article .hc-sidebar .hc-kb-sidebar,#hc-page.layout-sonar .hc-page-shell>.hc-kb-sidebar{background:rgba(6,78,59,.72)!important;border-color:rgba(94,234,212,.22)!important;color:#d1fae5!important}
#hc-page.layout-sonar .hc-sidebar .hc-kb-cat-link,#hc-page.layout-sonar .hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link{background:rgba(6,78,59,.72)!important;border-color:rgba(94,234,212,.22)!important;color:#d1fae5!important}
#hc-page.surface-smoke .hc-side-card,#hc-page.surface-smoke .hc-sidebar .hc-kb-sidebar,#hc-page.surface-smoke.view-article .hc-sidebar .hc-kb-sidebar,#hc-page.surface-smoke .hc-page-shell>.hc-kb-sidebar{background:rgba(15,23,42,.58)!important;border-color:rgba(255,255,255,.12)!important;color:#f8fafc!important}
#hc-page.surface-smoke .hc-sidebar .hc-kb-cat-link,#hc-page.surface-smoke .hc-page-shell>.hc-kb-sidebar .hc-kb-cat-link{background:rgba(15,23,42,.58)!important;border-color:rgba(255,255,255,.12)!important;color:#f8fafc!important}
#hc-page.surface-smoke .hc-kb-sidebar .hc-sec-label,#hc-page.surface-smoke .hc-kb-sidebar .hc-kb-cat-name{color:#f8fafc!important}
#hc-page.surface-smoke .hc-kb-sidebar .hc-kb-cat-arrow,#hc-page.surface-smoke .hc-kb-sidebar .hc-kb-cat-desc,#hc-page.surface-smoke .hc-kb-sidebar .hc-kb-cat-count{color:#cbd5e1!important}

/* FINAL SIDEBAR PARITY: Browse by category always matches side card language */
#hc-page .hc-kb-sidebar{background:var(--card-bg)!important;border:1.5px solid var(--card-border)!important;box-shadow:var(--shadow-sm)!important;color:var(--text-primary)!important}
#hc-page .hc-kb-sidebar .hc-sec-label{font-size:11px!important;font-weight:800!important;color:var(--text-muted)!important;letter-spacing:.06em!important;text-transform:uppercase!important}
#hc-page .hc-kb-sidebar .hc-sec-line{opacity:.9}
#hc-page .hc-kb-sidebar .hc-kb-cat-name{color:var(--text-primary)!important}
#hc-page .hc-kb-sidebar .hc-kb-cat-desc,#hc-page .hc-kb-sidebar .hc-kb-cat-count,#hc-page .hc-kb-sidebar .hc-kb-cat-arrow{color:var(--text-secondary)!important}
#hc-page .hc-kb-sidebar .hc-kb-cat-link{background:color-mix(in srgb,var(--card-bg) 92%,var(--brand) 8%)!important;border:1px solid var(--card-border)!important;box-shadow:none!important;color:var(--text-primary)!important}
#hc-page .hc-kb-sidebar .hc-kb-cat-link:hover{background:color-mix(in srgb,var(--card-bg) 86%,var(--brand) 14%)!important;border-color:rgba(var(--br),.30)!important;box-shadow:none!important}
#hc-page .hc-kb-sidebar .hc-kb-cat-link.is-active{background:color-mix(in srgb,var(--card-bg) 82%,var(--brand) 18%)!important;border-color:rgba(var(--br),.36)!important}

/* Compact mode should look like On this page / Related articles list style */
#hc-page .hc-kb-sidebar.hc-kb-style-compact .hc-kb-nav{gap:0!important}
#hc-page .hc-kb-sidebar.hc-kb-style-compact .hc-kb-entry{padding:0!important;border-bottom:1px solid var(--g100)!important}
#hc-page .hc-kb-sidebar.hc-kb-style-compact .hc-kb-entry:last-child{border-bottom:none!important}
#hc-page .hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-link{grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:9px 0 9px 12px!important;border:0!important;border-left:3px solid transparent!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
#hc-page .hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-link:hover{background:transparent!important;border-left-color:rgba(var(--br),.30)!important;transform:none!important}
#hc-page .hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-link.is-active{background:color-mix(in srgb,var(--card-bg) 88%,var(--brand) 12%)!important;border-left-color:var(--brand)!important;padding-left:12px!important}
#hc-page .hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-name{font-size:13px!important;font-weight:500!important;color:var(--text-secondary)!important;line-height:1.45!important}
#hc-page .hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-link.is-active .hc-kb-cat-name{color:var(--brand-ink,var(--brand))!important;font-weight:700!important}
#hc-page .hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-icon,#hc-page .hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-arrow,#hc-page .hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-desc,#hc-page .hc-kb-sidebar.hc-kb-style-compact .hc-kb-cat-count{display:none!important}
/* PHASE_HC_MORE_CONFIG — two more polished category-sidebar styles.
   These match the compact rules' specificity (1,3,0) and come after, so they win. */
/* PILL — rounded chip links, filled when active. */
#hc-page .hc-kb-sidebar.hc-kb-style-pill .hc-kb-nav{gap:7px!important}
#hc-page .hc-kb-sidebar.hc-kb-style-pill .hc-kb-cat-link{grid-template-columns:24px minmax(0,1fr)!important;gap:9px!important;align-items:center!important;padding:9px 15px!important;border:1px solid transparent!important;border-radius:999px!important;background:rgba(var(--br),.07)!important;box-shadow:none!important}
#hc-page .hc-kb-sidebar.hc-kb-style-pill .hc-kb-cat-link:hover{background:rgba(var(--br),.15)!important;transform:none!important}
#hc-page .hc-kb-sidebar.hc-kb-style-pill .hc-kb-cat-link.is-active{background:var(--brand)!important;border-color:var(--brand)!important;box-shadow:0 10px 24px rgba(var(--br),.28)!important}
#hc-page .hc-kb-sidebar.hc-kb-style-pill .hc-kb-cat-link.is-active .hc-kb-cat-name{color:#fff!important}
#hc-page .hc-kb-sidebar.hc-kb-style-pill .hc-kb-cat-icon{width:24px!important;height:24px!important;font-size:15px!important;background:transparent!important;border:0!important;box-shadow:none!important}
#hc-page .hc-kb-sidebar.hc-kb-style-pill .hc-kb-cat-name{font-size:13.5px!important;font-weight:700!important}
#hc-page .hc-kb-sidebar.hc-kb-style-pill .hc-kb-cat-arrow,#hc-page .hc-kb-sidebar.hc-kb-style-pill .hc-kb-cat-desc,#hc-page .hc-kb-sidebar.hc-kb-style-pill .hc-kb-cat-count{display:none!important}
/* BORDERED — clean outlined boxes with a coloured left accent on hover/active. */
#hc-page .hc-kb-sidebar.hc-kb-style-bordered .hc-kb-cat-link{grid-template-columns:34px minmax(0,1fr) 14px!important;gap:11px!important;padding:12px 14px!important;border:1.5px solid var(--card-border)!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important}
#hc-page .hc-kb-sidebar.hc-kb-style-bordered .hc-kb-cat-link:hover{border-color:rgba(var(--br),.55)!important;background:rgba(var(--br),.05)!important;transform:translateX(2px)!important}
#hc-page .hc-kb-sidebar.hc-kb-style-bordered .hc-kb-cat-link.is-active{border-color:var(--brand)!important;background:rgba(var(--br),.08)!important;box-shadow:inset 3px 0 0 var(--brand)!important}
#hc-page .hc-kb-sidebar.hc-kb-style-bordered .hc-kb-cat-icon{width:34px!important;height:34px!important;font-size:16px!important;border-radius:10px!important}
#hc-page .hc-kb-sidebar.hc-kb-style-bordered .hc-kb-cat-name{font-size:13.5px!important;font-weight:700!important}
#hc-page .hc-kb-sidebar.hc-kb-style-bordered .hc-kb-cat-desc,#hc-page .hc-kb-sidebar.hc-kb-style-bordered .hc-kb-cat-count{display:none!important}
/* ══════════════════════════════════════════════════════════════════════════
   PHASE2_2026-08-06 — RAIL STYLE VARIANTS: flat and floating.

   cards | compact | pill | bordered already existed as modifier classes over a
   `cards` base. These two complete the set the owner asked for. They are built
   on the card TOKENS rather than literals, so the rail follows the theme
   palette, the Colour Studio and any per-surface override instead of pinning
   its own colours — the same contract the rest of the card system now honours.

   The two are deliberately opposite ends of one axis: how much the rail reads
   as a PANEL. `flat` removes the panel entirely; `floating` makes it a detached
   object. compact/pill/bordered all sit between them and change the LINKS, so
   the six do not overlap.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── flat: no panel at all ────────────────────────────────────────────────
   The rail stops being a card and becomes a list living directly on the page.
   Zeroing the tokens is what does it — the shared consumer reads them, so no
   !important arms race with the panel rules, and a per-surface override can
   still step over the top. */
/* THE DOUBLED CLASS IS DELIBERATE — it buys specificity, nothing else.
   .hc-kb-sidebar has collected competing !important background and box-shadow
   rules across several phases, including per-layout ones written as
   `.layout-stack#hc-page .hc-kb-sidebar{background:#fff!important}` at (1,2,0).
   A single-class variant selector is also (1,2,0), so it ties and loses on
   document order — which is exactly why the tokens resolved correctly here
   while the rail still painted white. Repeating the class makes it (1,3,0) and
   the variant wins wherever it sits in the sheet, without another !important
   arms race further down. The tokens stay the override point regardless. */
#hc-page .hc-kb-sidebar.hc-kb-style-flat.hc-kb-style-flat{
  --card-fill:transparent;
  --card-edge:transparent;
  --card-border-w:0px;
  --card-shadow:none;
  background:transparent!important;
  box-shadow:none!important;
  padding-left:0;
  padding-right:0;
}
/* !important here for the same reason as the rail above: the link surface is
   painted by three separate !important rules layered in by earlier phases
   (`#hc-page .hc-kb-sidebar .hc-kb-cat-link{background:color-mix(…)!important}`
   among them). Without it the rows keep their tinted card fill and "flat" only
   removes the panel behind them — which is what the first attempt did. */
#hc-page .hc-kb-sidebar.hc-kb-style-flat .hc-kb-cat-link{
  border-radius:0!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 12%, transparent)!important;
  background:transparent!important;
  box-shadow:none!important;
  padding-left:0;
  padding-right:0;
}
#hc-page .hc-kb-sidebar.hc-kb-style-flat .hc-kb-cat-link:hover{
  background:transparent!important;
  border-bottom-color:var(--brand)!important;
  transform:none;
  box-shadow:none!important;
}
/* the last row would otherwise leave a rule hanging under nothing */
#hc-page .hc-kb-sidebar.hc-kb-style-flat .hc-kb-nav>:last-child .hc-kb-cat-link,
#hc-page .hc-kb-sidebar.hc-kb-style-flat .hc-kb-children>:last-child .hc-kb-cat-link{
  border-bottom-color:transparent!important;
}
#hc-page .hc-kb-sidebar.hc-kb-style-flat .hc-kb-sidebar-head{
  padding-left:0;
  padding-right:0;
}

/* ── floating: a detached, elevated panel ─────────────────────────────────
   Rounder, lifted and sticky, so it reads as an object sitting above the page
   rather than a column beside it. The sticky offset clears the header; `top`
   is the one geometry value here that cannot come from a card token because it
   is about the page chrome, not the card. */
#hc-page .hc-kb-sidebar.hc-kb-style-floating.hc-kb-style-floating{
  --card-radius:20px;
  --card-border-w:0px;
  --card-edge:transparent;
  --card-shadow:0 24px 60px rgba(15,23,42,.14);
  box-shadow:var(--card-shadow)!important;
  position:sticky!important;
  top:88px;
}
#hc-page .hc-kb-sidebar.hc-kb-style-floating .hc-kb-cat-link{
  border-radius:12px;
  border-color:transparent;
}
#hc-page .hc-kb-sidebar.hc-kb-style-floating .hc-kb-cat-link:hover{
  background:rgba(var(--br),.08);
  border-color:transparent;
}
/* Sticky needs a scroll container that is not clipped. A rail taller than the
   viewport would otherwise stick at a point the reader can never scroll to, so
   it scrolls internally past that height. */
@media (min-height:640px){
  #hc-page .hc-kb-sidebar.hc-kb-style-floating.hc-kb-style-floating{
    max-height:calc(100vh - 112px);
    overflow-y:auto;
  }
}
/* On phones the rail is stacked above the content, where sticky would pin it
   over the article the reader came for. */
@media (max-width:900px){
  #hc-page .hc-kb-sidebar.hc-kb-style-floating.hc-kb-style-floating{
    position:static!important;
    max-height:none;
    overflow-y:visible;
  }
}
/* ══ end rail style variants ═══════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   PHASE2_2026-08-06 — QUICK LINKS and CONTACT CHANNELS rail cards.

   Both reuse the help card SHELL (.hc-help-card + its six style variants), so
   everything below styles CONTENT only — no fill, no edge, no shadow, no
   radius. That is what keeps three rail modules on one vocabulary instead of
   eighteen variants drifting apart, and it means the card tokens and the
   Colour Studio already reach these two for free.
   ══════════════════════════════════════════════════════════════════════════ */

/* the two list cards have no icon chip, so the body should not reserve room for one */
#hc-page .hc-side-quick .hc-help-card-body,
#hc-page .hc-side-channels .hc-help-card-body{width:100%}

#hc-page .hc-side-quick-list,
#hc-page .hc-side-channel-list{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* ── quick links: a stacked list, chevron on the right ─────────────────── */
#hc-page .hc-side-quick-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:9px;
  text-decoration:none;
  color:inherit;
  font-size:13.6px;
  font-weight:600;
  line-height:1.35;
  transition:background .18s var(--ease,ease),transform .18s var(--ease,ease);
}
#hc-page .hc-side-quick-list a:hover{
  background:color-mix(in srgb, currentColor 8%, transparent);
}
#hc-page .hc-side-quick-list svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
  opacity:.5;
  transition:transform .18s var(--ease,ease),opacity .18s var(--ease,ease);
}
#hc-page .hc-side-quick-list a:hover svg{transform:translateX(3px);opacity:1}

/* ── contact channels: icon, label, and the value under it ─────────────── */
#hc-page .hc-side-channel-list a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 10px;
  border-radius:10px;
  text-decoration:none;
  color:inherit;
  transition:background .18s var(--ease,ease);
}
#hc-page .hc-side-channel-list a:hover{
  background:color-mix(in srgb, currentColor 8%, transparent);
}
#hc-page .hc-side-channel-ico{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:9px;
  background:color-mix(in srgb, currentColor 12%, transparent);
}
#hc-page .hc-side-channel-ico svg{width:16px;height:16px}
#hc-page .hc-side-channel-copy{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;   /* long addresses must be able to shrink, not push the card wide */
}
#hc-page .hc-side-channel-label{
  font-size:13.2px;
  font-weight:650;
  line-height:1.3;
}
/* The address or number is reference detail, not the action, so it sits quieter.
   currentColor keeps it legible on the brand and glass variants, where a fixed
   muted grey would drop out against the fill. */
#hc-page .hc-side-channel-value{
  font-size:12.2px;
  line-height:1.3;
  opacity:.72;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ══ end rail modules ══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   PHASE3_2026-08-06 — DIRECTORY CARDS.

   Geometry and paint come from the card tokens, so the directory follows the
   theme palette, the Colour Studio and any per-surface override exactly like
   every other card surface. Nothing here hardcodes a colour.
   ══════════════════════════════════════════════════════════════════════════ */

#hc-page .hc-dir{
  display:grid;
  gap:var(--card-gap,18px);
  grid-template-columns:1fr;
  margin-top:8px;
  /* A grid stretches its items to the tallest in the row by default, so a
     COLLAPSED card kept occupying the full height of its open neighbour and the
     collapse looked broken even though it worked. Each card takes its own
     height instead. Only visible once a card is actually collapsed, which is
     why it survived until the interaction was tried in the browser. */
  align-items:start;
}
@media (min-width:720px){
  #hc-page .hc-dir-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  #hc-page .hc-dir-c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1080px){
  #hc-page .hc-dir-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

#hc-page .hc-dir-card{
  display:flex;
  flex-direction:column;
  min-width:0;                        /* long titles must wrap, not widen the track */
  background:var(--card-fill);
  border:var(--card-border-w) solid var(--card-edge);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;                    /* the header band must not escape the radius */
  transition:box-shadow .22s var(--ease,ease);
}
#hc-page .hc-dir-card:hover{box-shadow:var(--card-shadow-hover)}

/* ── the header band ───────────────────────────────────────────────────── */
/* PHASE0.5_2026-08-09 — the header IS the disclosure control, so it says so.
   Measured: the chevron is 28x28 inside a 529x57 header — 3% of a row that reads as
   entirely clickable. Clicking it did nothing (dead space) or navigated away (the
   title is a link), so the collapse looked broken while working perfectly. The whole
   header now toggles; the title keeps its link and its own cursor. */
/* PHASE0.5_2026-08-09 — cards past the category rule's limit are RENDERED and hidden,
   never omitted: they stay real crawlable links and "Show all" reveals them with no
   round-trip. Mirrors .hc-home-cat-more on the tiles, including the expanded class the
   same control adds. */
#hc-page .hc-dir:not(.hc-cats-expanded) .hc-dir-card-more{display:none}
#hc-page .hc-dir-card.is-collapsible .hc-dir-head{cursor:pointer}
#hc-page .hc-dir-card.is-collapsible .hc-dir-head:hover{background:color-mix(in srgb, var(--brand) 16%, transparent)}
#hc-page .hc-dir-card.is-collapsible .hc-dir-title{cursor:pointer}
#hc-page .hc-dir-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px var(--card-pad-x,20px);
  background:color-mix(in srgb, var(--brand) 10%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 10%, transparent);
}
#hc-page .hc-dir-title{
  display:flex;
  align-items:center;
  gap:9px;
  flex:1 1 auto;
  min-width:0;
  /* A category name with no spaces in it — a long slug-like string, or German,
     or a product code — has no break opportunity, so it overruns its box and the
     card CLIPS it rather than widening. Measured: 553px of text inside a 451px
     title. `anywhere` lets it break mid-word; the page never scrolls sideways
     either way, so without this the tail of the name is simply invisible. */
  overflow-wrap:anywhere;
  text-decoration:none;
  color:inherit;
  font-size:15.4px;
  font-weight:700;
  line-height:1.3;
}
#hc-page .hc-dir-title:hover{color:var(--brand-ink,var(--brand))}
#hc-page .hc-dir-count{
  flex:0 0 auto;
  font-size:11.6px;
  font-weight:700;
  padding:2px 8px;
  border-radius:999px;
  background:color-mix(in srgb, var(--brand) 16%, transparent);
}
#hc-page .hc-dir-toggle{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  transition:background .18s var(--ease,ease),transform .22s var(--ease,ease);
}
#hc-page .hc-dir-toggle:hover{background:color-mix(in srgb, currentColor 10%, transparent)}
#hc-page .hc-dir-toggle svg{width:17px;height:17px}
#hc-page .hc-dir-card.is-closed .hc-dir-toggle{transform:rotate(-90deg)}

/* ── the body ──────────────────────────────────────────────────────────── */
#hc-page .hc-dir-body{
  padding:10px var(--card-pad-x,20px) 14px;
  /* grid-template-rows animates to zero cleanly, which max-height cannot do
     without guessing a height that is wrong for some card. */
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .26s var(--ease,ease),padding .26s var(--ease,ease),opacity .2s var(--ease,ease);
}
#hc-page .hc-dir-card.is-closed .hc-dir-body{
  grid-template-rows:0fr;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
}
#hc-page .hc-dir-inner{min-height:0;overflow:hidden}

#hc-page .hc-dir-list{
  list-style:none;
  margin:0;
  padding:0;
}
#hc-page .hc-dir-list li+li{
  border-top:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 9%, transparent);
}
#hc-page .hc-dir-list a{
  display:block;
  padding:9px 0;
  overflow-wrap:anywhere;
  text-decoration:none;
  color:inherit;
  font-size:13.8px;
  line-height:1.45;
  transition:color .16s var(--ease,ease),padding-left .16s var(--ease,ease);
}
#hc-page .hc-dir-list a:hover{color:var(--brand-ink,var(--brand));padding-left:4px}

#hc-page .hc-dir-more{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  text-decoration:none;
  color:var(--brand-ink,var(--brand));
  font-size:13.2px;
  font-weight:650;
}
#hc-page .hc-dir-more svg{width:15px;height:15px;transition:transform .18s var(--ease,ease)}
#hc-page .hc-dir-more:hover svg{transform:translateX(3px)}

/* ── accordion: one column, headings first ────────────────────────────────
   A different reading contract rather than a different skin — the reader scans
   every heading, then opens what they want. Full width, so the headings form a
   single scannable column instead of a zig-zag across a grid. */
#hc-page .hc-dir-v-accordion{grid-template-columns:1fr!important;gap:10px}
#hc-page .hc-dir-v-accordion .hc-dir-head{padding:16px var(--card-pad-x,20px)}
#hc-page .hc-dir-v-accordion .hc-dir-title{font-size:16px}
/* Rows are a list, so the seam between them should read as one rule, not two
   stacked card edges. */
#hc-page .hc-dir-v-accordion .hc-dir-card{box-shadow:none}
#hc-page .hc-dir-v-accordion .hc-dir-card:hover{box-shadow:var(--card-shadow)}

/* ── compact: a dense index for large knowledge bases ────────────────────
   No card chrome at all. At 40+ categories the card edges become the loudest
   thing on the page and the reader loses the names among the boxes. */
#hc-page .hc-dir-v-compact{gap:22px 28px}
#hc-page .hc-dir-v-compact .hc-dir-card{
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
}
#hc-page .hc-dir-v-compact .hc-dir-card:hover{box-shadow:none}
#hc-page .hc-dir-v-compact .hc-dir-head{
  background:transparent;
  padding:0 0 8px;
  border-bottom:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 14%, transparent);
}
#hc-page .hc-dir-v-compact .hc-dir-title{
  font-size:12.4px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
#hc-page .hc-dir-v-compact .hc-dir-body{padding:8px 0 0}
#hc-page .hc-dir-v-compact .hc-dir-list li+li{border-top:0}
#hc-page .hc-dir-v-compact .hc-dir-list a{padding:5px 0;font-size:13.4px}
#hc-page .hc-dir-v-compact .hc-dir-count{
  background:transparent;
  opacity:.6;
  padding:0;
  font-weight:700;
}

/* ── split: one promoted category, then the rest ─────────────────────────
   The lead card spans every column it can and shows more of its articles. On a
   single-column grid there is nothing to span, so it simply reads as the first
   card — no special case needed. */
#hc-page .hc-dir-v-split .hc-dir-card.is-lead{grid-column:1/-1}
#hc-page .hc-dir-v-split .hc-dir-card.is-lead .hc-dir-head{
  padding:18px var(--card-pad-x,20px);
  background:color-mix(in srgb, var(--brand) 16%, transparent);
}
#hc-page .hc-dir-v-split .hc-dir-card.is-lead .hc-dir-title{font-size:18px}
@media (min-width:720px){
  /* the promoted card's own list goes two-up so the card does not become a
     tall column of links on a wide screen */
  #hc-page .hc-dir-v-split .hc-dir-card.is-lead .hc-dir-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:28px;
  }
  #hc-page .hc-dir-v-split .hc-dir-card.is-lead .hc-dir-list li:nth-child(2){border-top:0}
}
/* ══════════════════════════════════════════════════════════════════════════
   PHASE3B_2026-08-06 — four presentations in the house design language.

   Built to match the marketing site's own vocabulary: a gradient top edge, a
   soft icon chip, one large styled wrapper holding a group, and a numbered
   rail. Every colour still derives from --brand and the card tokens, so these
   follow the theme and the Colour Studio like everything else.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ribbon: gradient top edge, icon chip, description, article list ─────
   The edge is a pseudo-element rather than a border-image so it can sit inside
   the card's own radius without fighting it. */
#hc-page .hc-dir-v-ribbon .hc-dir-card{position:relative;overflow:hidden}
#hc-page .hc-dir-v-ribbon .hc-dir-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,
    var(--brand),
    color-mix(in srgb, var(--brand) 45%, #22d3ee),
    color-mix(in srgb, var(--brand) 55%, #a855f7));
}
#hc-page .hc-dir-v-ribbon .hc-dir-head{
  background:transparent;
  border-bottom:0;
  padding-top:20px;
  flex-wrap:wrap;
  gap:14px;
}
#hc-page .hc-dir-v-ribbon .hc-dir-title{
  order:2;
  flex:1 0 100%;
  font-size:19px;
  font-weight:800;
}
#hc-page .hc-dir-v-ribbon .hc-dir-ico{
  order:1;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #22d3ee));
  box-shadow:0 10px 24px color-mix(in srgb, var(--brand) 32%, transparent);
}
#hc-page .hc-dir-v-ribbon .hc-dir-ico svg,
#hc-page .hc-dir-v-ribbon .hc-dir-ico i{width:24px;height:24px;font-size:22px}
/* Everything in this header is explicitly ordered. flex `order` defaults to 0,
   so an element WITHOUT one jumps ahead of anything given a positive order —
   which put the collapse chevron in front of the icon on the first render. */
#hc-page .hc-dir-v-ribbon .hc-dir-count{order:3;margin-left:auto}
#hc-page .hc-dir-v-ribbon .hc-dir-toggle{order:4}
#hc-page .hc-dir-v-ribbon .hc-dir-body{padding-top:0}
#hc-page .hc-dir-v-ribbon .hc-dir-desc{
  margin:0 0 14px;
  font-size:14.2px;
  line-height:1.55;
  opacity:.72;
}
/* bullets, not rules: this reads as a feature list rather than an index */
#hc-page .hc-dir-v-ribbon .hc-dir-list li+li{border-top:0}
#hc-page .hc-dir-v-ribbon .hc-dir-list a{
  position:relative;
  padding:5px 0 5px 18px;
  font-weight:650;
  font-size:13.6px;
}
#hc-page .hc-dir-v-ribbon .hc-dir-list a::before{
  content:"";
  position:absolute;
  left:2px;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:var(--brand);
}
#hc-page .hc-dir-v-ribbon .hc-dir-list a:hover{padding-left:22px}

/* ── panel: ONE styled wrapper holding every category ────────────────────
   The group is the object, not each card. A soft outer shell with an inner
   grid, so the categories read as one considered block rather than a scatter
   of tiles. */
#hc-page .hc-dir-v-panel{
  position:relative;
  padding:26px;
  border-radius:calc(var(--card-radius) + 10px);
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 60%),
    color-mix(in srgb, var(--card-bg,#fff) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 8%, transparent);
  box-shadow:var(--card-shadow);
  gap:16px;
}
/* the inner cards give up their own shell so the wrapper is the only frame */
#hc-page .hc-dir-v-panel .hc-dir-card{
  background:color-mix(in srgb, var(--card-bg,#fff) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 6%, transparent);
  box-shadow:none;
}
#hc-page .hc-dir-v-panel .hc-dir-card:hover{
  box-shadow:0 12px 30px color-mix(in srgb, var(--text-primary,#0f172a) 8%, transparent);
}
#hc-page .hc-dir-v-panel .hc-dir-head{
  background:transparent;
  border-bottom:0;
  padding-bottom:4px;
  gap:12px;
}
#hc-page .hc-dir-v-panel .hc-dir-ico{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  color:var(--brand-ink,var(--brand));
  background:color-mix(in srgb, var(--brand) 12%, transparent);
}
#hc-page .hc-dir-v-panel .hc-dir-ico svg,
#hc-page .hc-dir-v-panel .hc-dir-ico i{width:20px;height:20px;font-size:19px}
#hc-page .hc-dir-v-panel .hc-dir-desc{
  margin:0 0 10px;
  font-size:13.4px;
  line-height:1.5;
  opacity:.7;
}

/* ── journey: categories as a numbered sequence ──────────────────────────
   A connected rail. The connector is drawn on the wrapper, not between cards,
   so it never breaks when the grid wraps to a new row. */
#hc-page .hc-dir-v-journey{
  position:relative;
  gap:0;
  padding:22px 0;
  border-radius:var(--card-radius);
  background:color-mix(in srgb, var(--card-bg,#fff) 60%, transparent);
  border:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 8%, transparent);
}
#hc-page .hc-dir-v-journey .hc-dir-card{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0 24px;
  text-align:center;
  align-items:center;
}
#hc-page .hc-dir-v-journey .hc-dir-card:hover{box-shadow:none}
/* the divider belongs between siblings, so it goes on the card, not the grid */
@media (min-width:720px){
  #hc-page .hc-dir-v-journey .hc-dir-card+.hc-dir-card{
    border-left:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 10%, transparent);
  }
}
#hc-page .hc-dir-v-journey .hc-dir-head{
  flex-direction:column;
  align-items:center;
  gap:12px;
  background:transparent;
  border-bottom:0;
  padding:0 0 8px;
}
#hc-page .hc-dir-v-journey .hc-dir-num{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:14px;
  color:#fff;
  font-size:15px;
  font-weight:800;
  background:linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #a855f7));
  box-shadow:0 10px 22px color-mix(in srgb, var(--brand) 30%, transparent);
}
#hc-page .hc-dir-v-journey .hc-dir-title{justify-content:center;font-size:15.5px}
#hc-page .hc-dir-v-journey .hc-dir-body{padding:0}
#hc-page .hc-dir-v-journey .hc-dir-list a{text-align:center;font-size:13px}
#hc-page .hc-dir-v-journey .hc-dir-more{justify-content:center}

/* ── editorial: no card at all, typography does the work ─────────────────
   A large numeral, a rule, and the name at size. For help centres whose
   categories are few and deliberately chosen. */
#hc-page .hc-dir-v-editorial{gap:0}
#hc-page .hc-dir-v-editorial .hc-dir-card{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  border-top:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 14%, transparent);
  padding:26px 0;
}
#hc-page .hc-dir-v-editorial .hc-dir-card:hover{box-shadow:none}
#hc-page .hc-dir-v-editorial .hc-dir-card:first-child{border-top:0}
#hc-page .hc-dir-v-editorial .hc-dir-head{
  background:transparent;
  border-bottom:0;
  padding:0;
  align-items:baseline;
  gap:18px;
}
#hc-page .hc-dir-v-editorial .hc-dir-num{
  font-size:34px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  color:color-mix(in srgb, var(--brand) 55%, transparent);
}
#hc-page .hc-dir-v-editorial .hc-dir-title{font-size:26px;font-weight:800;letter-spacing:-.015em}
#hc-page .hc-dir-v-editorial .hc-dir-desc{
  margin:8px 0 12px;
  font-size:15px;
  line-height:1.6;
  opacity:.7;
  max-width:62ch;                 /* prose, so it gets a measure */
}
#hc-page .hc-dir-v-editorial .hc-dir-body{padding:10px 0 0}
#hc-page .hc-dir-v-editorial .hc-dir-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}
#hc-page .hc-dir-v-editorial .hc-dir-list li+li{border-top:0}
/* links become chips here: a wrapped row scans faster than a tall column when
   the card has already spent its height on the heading */
#hc-page .hc-dir-v-editorial .hc-dir-list a{
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  background:color-mix(in srgb, var(--text-primary,#0f172a) 6%, transparent);
}
#hc-page .hc-dir-v-editorial .hc-dir-list a:hover{
  padding-left:12px;
  background:color-mix(in srgb, var(--brand) 14%, transparent);
  color:var(--brand-ink,var(--brand));
}
/* ── subcategory chips (cat_hierarchy = nested) ──────────────────────────
   Deliberately NOT styled like the article links beside them: a chip goes
   deeper into the tree, a plain row opens an article, and a reader should be
   able to tell which is which without reading the URL. */
#hc-page .hc-dir-kids{
  list-style:none;
  margin:0 0 12px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
#hc-page .hc-dir-kids a{
  overflow-wrap:anywhere;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  text-decoration:none;
  color:inherit;
  font-size:12.6px;
  font-weight:650;
  line-height:1.3;
  background:color-mix(in srgb, var(--brand) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  transition:background .16s var(--ease,ease),color .16s var(--ease,ease);
}
#hc-page .hc-dir-kids a:hover{
  background:color-mix(in srgb, var(--brand) 18%, transparent);
  color:var(--brand-ink,var(--brand));
}
#hc-page .hc-dir-kids span{
  font-size:11px;
  font-weight:700;
  opacity:.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE6_2026-08-07 — ARTICLE DISCUSSIONS.

   FIVE presentations off ONE markup tree. The renderer emits the same <li> at every
   depth for all five, so a variant is a paint choice and never a structural fork —
   the same rule the category presentations follow. Adding a sixth is a block of CSS,
   not a branch in JS.

     cards     each comment boxed, on the global card tokens
     flat      hairline-separated rows, nothing but type
     threaded  replies step in behind a rail
     bubbles   chat shape, avatar outside the bubble, tail on the parent
     timeline  a spine down the left with a node per comment

   Every colour is a token. Nothing here hardcodes one, so the Colour Studio and the
   card palette drive a discussion exactly as they drive every other surface.
   ══════════════════════════════════════════════════════════════════════════ */
#hc-page .hc-disc{
  margin-top:52px;
  padding-top:32px;
  border-top:1px solid var(--card-border,#e5e7eb);
}
#hc-page .hc-disc-head{
  display:flex;align-items:center;gap:11px;
  margin-bottom:22px;
}
#hc-page .hc-disc-title{
  margin:0;font-size:20px;font-weight:800;
  color:var(--text-primary,#111827);letter-spacing:-.018em;
}
/* The count is a pill, not a sentence: it is a quantity, and it reads as one. */
#hc-page .hc-disc-count{
  font-size:12px;font-weight:800;letter-spacing:.01em;
  padding:3px 10px;border-radius:999px;
  color:var(--text-secondary,#6b7280);
  background:var(--card-border,#eef0f4);
}
#hc-page .hc-disc-loading,
#hc-page .hc-disc-empty{
  margin:0;padding:26px 2px;font-size:14px;color:var(--text-secondary,#6b7280);
}
#hc-page .hc-disc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
#hc-page .hc-disc-item{display:flex;gap:13px;align-items:flex-start}
#hc-page .hc-disc-av{
  flex:0 0 36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;letter-spacing:.02em;
  color:var(--btn-text,#fff);
  /* deterministic per author — see hue() in the client */
  background:hsl(var(--h,250) 58% 52%);
  box-shadow:0 1px 2px rgba(0,0,0,.10);
}
#hc-page .hc-disc-main{flex:1 1 auto;min-width:0}
#hc-page .hc-disc-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;margin-bottom:4px;
}
#hc-page .hc-disc-name{font-size:14.5px;font-weight:800;color:var(--text-primary,#111827);letter-spacing:-.005em}
#hc-page .hc-disc-when{font-size:12.5px;color:var(--text-secondary,#6b7280)}
#hc-page .hc-disc-pending{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 8px;border-radius:999px;
  background:var(--card-border,#e5e7eb);color:var(--text-secondary,#6b7280);
}
#hc-page .hc-disc-text{
  margin:0;font-size:15px;line-height:1.68;color:var(--text-primary,#111827);
  overflow-wrap:anywhere;
}
#hc-page .hc-disc-removed .hc-disc-text{font-style:italic;color:var(--text-secondary,#6b7280)}
#hc-page .hc-disc-replies{
  list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-direction:column;gap:16px;
}

/* ── 1. CARDS ─────────────────────────────────────────────────────────────
   Each comment carries the GLOBAL card tokens, so a discussion inherits whatever
   radius, depth and fill the operator chose for every other card. */
#hc-page .hc-disc-cards .hc-disc-item{
  background:var(--card-bg,#fff)!important;
  border:1px solid var(--card-border,#e5e7eb)!important;
  border-radius:var(--card-radius,16px)!important;
  box-shadow:var(--card-shadow,0 1px 2px rgba(15,23,42,.04))!important;
  padding:16px 18px;
  transition:box-shadow .16s,border-color .16s;
}
#hc-page .hc-disc-cards .hc-disc-item:hover{
  box-shadow:0 8px 24px -6px rgba(15,23,42,.12)!important;
}
#hc-page .hc-disc-cards .hc-disc-replies{padding-left:18px;gap:12px}

/* ── 2. FLAT ───────────────────────────────────────────────────────────────
   No boxes at all. Hairlines and rhythm do the work. */
#hc-page .hc-disc-flat .hc-disc-list{gap:0}
#hc-page .hc-disc-flat .hc-disc-item{
  padding:18px 0;border-bottom:1px solid var(--card-border,#eef0f4);
}
#hc-page .hc-disc-flat .hc-disc-item:last-child{border-bottom:0}
#hc-page .hc-disc-flat .hc-disc-replies{
  margin-top:14px;padding-left:20px;gap:0;
  border-left:2px solid var(--card-border,#eef0f4);
}
#hc-page .hc-disc-flat .hc-disc-replies .hc-disc-item{padding:12px 0 12px 0;border-bottom:0}

/* ── 3. THREADED ───────────────────────────────────────────────────────────
   Replies step in behind a rail that picks up the brand on hover, so the shape of
   a conversation is legible before any of it is read. */
#hc-page .hc-disc-threaded .hc-disc-item{
  background:var(--card-bg,#fff);
  border:1px solid var(--card-border,#e5e7eb);
  border-radius:var(--card-radius,14px);
  padding:15px 17px;
}
#hc-page .hc-disc-threaded .hc-disc-replies{
  margin-left:6px;padding-left:20px;
  border-left:2px solid var(--card-border,#e5e7eb);
  transition:border-color .18s;
}
#hc-page .hc-disc-threaded .hc-disc-item:hover>.hc-disc-main>.hc-disc-replies{
  border-left-color:var(--brand,#2563eb);
}

/* ── 4. BUBBLES ────────────────────────────────────────────────────────────
   Chat shape. The avatar sits OUTSIDE the bubble and the top-level bubble grows a
   tail, which is what makes it read as speech rather than as another card. */
#hc-page .hc-disc-bubbles .hc-disc-main{
  position:relative;
  background:var(--card-bg,#f6f7f9);
  border:1px solid var(--card-border,#e9ecf3);
  border-radius:4px 18px 18px 18px;
  padding:14px 17px;
}
#hc-page .hc-disc-bubbles .hc-disc-item>.hc-disc-main::before{
  content:'';position:absolute;left:-7px;top:12px;
  width:12px;height:12px;transform:rotate(45deg);
  background:var(--card-bg,#f6f7f9);
  border-left:1px solid var(--card-border,#e9ecf3);
  border-bottom:1px solid var(--card-border,#e9ecf3);
  border-bottom-left-radius:3px;
}
#hc-page .hc-disc-bubbles .hc-disc-replies{
  margin-top:14px;padding-left:16px;gap:12px;
}
/* A reply is a quieter bubble with no tail — depth without another rail. */
#hc-page .hc-disc-bubbles .hc-disc-replies .hc-disc-main{
  border-radius:16px;
  background:color-mix(in srgb,var(--card-bg,#f6f7f9) 60%,transparent);
}
#hc-page .hc-disc-bubbles .hc-disc-replies .hc-disc-main::before{display:none}
#hc-page .hc-disc-bubbles .hc-disc-replies .hc-disc-av{flex-basis:28px;height:28px;font-size:11px}

/* ── 5. TIMELINE ───────────────────────────────────────────────────────────
   A single spine down the left with a node per comment. Reads as a record of what
   happened, which is the right frame for a long-running question. */
#hc-page .hc-disc-timeline .hc-disc-list{
  position:relative;gap:0;padding-left:30px;
}
#hc-page .hc-disc-timeline .hc-disc-list::before{
  content:'';position:absolute;left:11px;top:6px;bottom:6px;width:2px;
  background:var(--card-border,#e9ecf3);border-radius:2px;
}
#hc-page .hc-disc-timeline .hc-disc-item{
  position:relative;padding:0 0 24px;display:block;
}
#hc-page .hc-disc-timeline .hc-disc-item:last-child{padding-bottom:0}
/* The avatar becomes the node, sitting ON the spine. */
#hc-page .hc-disc-timeline .hc-disc-av{
  position:absolute;left:-30px;top:0;
  flex-basis:24px;width:24px;height:24px;font-size:9.5px;
  box-shadow:0 0 0 3px var(--body-bg,#fff);
}
#hc-page .hc-disc-timeline .hc-disc-replies{
  position:relative;margin-top:14px;padding-left:30px;gap:0;
}
#hc-page .hc-disc-timeline .hc-disc-replies::before{
  content:'';position:absolute;left:11px;top:2px;bottom:2px;width:2px;
  background:var(--card-border,#e9ecf3);border-radius:2px;
}

/* ── the composer, the sign-in prompt, and row actions ────────────────────── */
#hc-page .hc-disc-foot{margin-top:26px}
#hc-page .hc-disc-signin{
  margin:0;padding:16px 18px;font-size:14px;
  color:var(--text-secondary,#6b7280);
  background:var(--card-bg,#f9fafb);
  border:1px dashed var(--card-border,#e5e7eb);
  border-radius:var(--card-radius,14px);
}
#hc-page .hc-disc-signin a{color:var(--brand-ink,var(--brand,#2563eb));font-weight:700}
#hc-page .hc-disc-form{display:flex;flex-direction:column;gap:11px}
#hc-page .hc-disc-input{
  width:100%;min-height:96px;resize:vertical;
  padding:13px 15px;font:inherit;font-size:15px;line-height:1.6;
  color:var(--text-primary,#111827);
  background:var(--card-bg,#fff);
  border:1px solid var(--card-border,#e5e7eb);
  border-radius:var(--card-radius,14px);
  transition:border-color .14s,box-shadow .14s;
}
#hc-page .hc-disc-input:focus{
  outline:none;
  border-color:var(--brand,#2563eb);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#2563eb) 16%,transparent);
}
#hc-page .hc-disc-actions{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
#hc-page .hc-disc-send{
  padding:10px 20px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  color:var(--btn-text,#fff);background:var(--btn,var(--brand,#2563eb));
  border:0;border-radius:999px;
  transition:filter .14s,transform .14s;
}
#hc-page .hc-disc-send:hover{filter:brightness(1.06);transform:translateY(-1px)}
#hc-page .hc-disc-send[disabled]{opacity:.55;cursor:default;transform:none;filter:none}
#hc-page .hc-disc-note{margin:0;font-size:12.5px;color:var(--text-secondary,#6b7280)}
#hc-page .hc-disc-err{margin:0;font-size:13px;font-weight:600;color:var(--hc-danger,#b91c1c)}

/* Row actions stay quiet until the comment is hovered — a discussion is for
   reading, and four buttons under every line turns it into a control panel. */
#hc-page .hc-disc-acts{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
#hc-page .hc-disc-act{
  padding:4px 10px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  color:var(--text-secondary,#6b7280);
  background:transparent;border:1px solid transparent;border-radius:999px;
  opacity:.62;transition:opacity .14s,background .14s,color .14s;
}
#hc-page .hc-disc-item:hover>.hc-disc-main>.hc-disc-acts .hc-disc-act,
#hc-page .hc-disc-act:focus-visible{opacity:1}
#hc-page .hc-disc-act:hover{background:var(--card-border,#eef0f4);color:var(--text-primary,#111827)}
#hc-page .hc-disc-act.is-armed{
  opacity:1;
  color:var(--hc-danger,#b91c1c);
  border-color:var(--hc-danger-line,#fca5a5);
  background:var(--hc-danger-soft,#fef2f2);
}
#hc-page .hc-disc-slot:not(:empty){margin-top:12px}
#hc-page .hc-disc-form-inline .hc-disc-input{min-height:72px}
#hc-page .hc-disc-watch{
  display:flex;align-items:center;gap:9px;margin-top:14px;
  font-size:13px;color:var(--text-secondary,#6b7280);cursor:pointer;
}
#hc-page .hc-disc-watch input{width:15px;height:15px;accent-color:var(--brand,#2563eb);cursor:pointer}

@media (max-width:620px){
  #hc-page .hc-disc-av{flex-basis:30px;height:30px;font-size:11px}
  #hc-page .hc-disc-cards .hc-disc-replies,
  #hc-page .hc-disc-bubbles .hc-disc-replies{padding-left:10px}
  #hc-page .hc-disc-threaded .hc-disc-replies,
  #hc-page .hc-disc-flat .hc-disc-replies{padding-left:12px}
  #hc-page .hc-disc-timeline .hc-disc-list{padding-left:26px}
  #hc-page .hc-disc-timeline .hc-disc-av{left:-26px}
  #hc-page .hc-disc-acts{opacity:1}
  #hc-page .hc-disc-act{opacity:1}
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE4_2026-08-06 — READER ACTIONS: copy link, share, print.
   ══════════════════════════════════════════════════════════════════════════ */
#hc-page .hc-art-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 22px;
}
#hc-page .hc-art-act{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid var(--card-border,#e5e7eb);
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:12.8px;
  font-weight:650;
  line-height:1.3;
  cursor:pointer;
  transition:background .16s var(--ease,ease),border-color .16s var(--ease,ease),color .16s var(--ease,ease);
}
#hc-page .hc-art-act:hover{
  background:color-mix(in srgb, var(--brand) 8%, transparent);
  border-color:color-mix(in srgb, var(--brand) 30%, transparent);
  color:var(--brand-ink,var(--brand));
}
/* Focus is drawn explicitly. These are buttons in a content column, and the
   default ring is easy to lose against a light card. */
#hc-page .hc-art-act:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
#hc-page .hc-art-act.is-done{
  background:color-mix(in srgb, var(--brand) 14%, transparent);
  border-color:color-mix(in srgb, var(--brand) 40%, transparent);
  color:var(--brand-ink,var(--brand));
}
#hc-page .hc-art-act svg{width:15px;height:15px;flex:0 0 15px}
/* icons-only still needs an accessible name, so the label is moved off-screen
   rather than removed with display:none, which would take it out of the
   accessibility tree entirely. */
#hc-page .hc-art-actions-icons .hc-art-act span{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
#hc-page .hc-art-actions-icons .hc-art-act{padding:8px}
#hc-page .hc-art-actions-labels .hc-art-act svg{display:none}
/* The actions are page furniture, not content: a printed article should not
   carry a Print button. */
@media print{
  #hc-page .hc-art-actions{display:none}
}
/* ── previous / next, and the reading progress bar ─────────────────────── */
#hc-page .hc-art-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:26px 0 0;
}
@media (max-width:640px){ #hc-page .hc-art-nav{grid-template-columns:1fr} }
#hc-page .hc-art-nav a{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  padding:14px 16px;
  border-radius:var(--card-radius);
  border:1px solid var(--card-edge);
  background:var(--card-fill);
  text-decoration:none;
  color:inherit;
  transition:border-color .18s var(--ease,ease),box-shadow .18s var(--ease,ease);
}
#hc-page .hc-art-nav a:hover{
  border-color:color-mix(in srgb, var(--brand) 34%, transparent);
  box-shadow:var(--card-shadow);
}
#hc-page .hc-art-nav-r{text-align:right;align-items:flex-end}
#hc-page .hc-art-nav-k{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.6px;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.62;
}
#hc-page .hc-art-nav-k svg{width:14px;height:14px}
/* The neighbour title is the payload, so it gets room to wrap — and
   overflow-wrap for the same unbreakable-token reason as the category headings. */
#hc-page .hc-art-nav-t{
  font-size:14.4px;
  font-weight:650;
  line-height:1.4;
  overflow-wrap:anywhere;
}
@media print{ #hc-page .hc-art-nav{display:none} }

#hc-page .hc-read-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0;
  z-index:60;
  background:linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #22d3ee));
  transition:width .08s linear;
  pointer-events:none;
}
@media print{ #hc-page .hc-read-progress{display:none} }
@media (prefers-reduced-motion:reduce){ #hc-page .hc-read-progress{transition:none} }

/* ── reading measure ──────────────────────────────────────────────────────
   Measured on the live article page at a 1440px viewport: no max-width at all,
   giving ~83 characters per line at 18.4px, growing without limit on a wider
   monitor. Comfortable is 45-75.

   The cap is on the BODY only. Headings, images, tables and code keep the full
   column, because narrowing a table to prose width is the opposite of helpful.
   Left-aligned rather than centred so the text stays in line with the article
   title above it. */
/* !important AND the raised specificity are both required. An existing rule sets
 * `#hc-page.view-article .hc-body p{max-width:none!important}`, which itself
 * overrode an older 900px cap. A measure the operator has explicitly chosen has
 * to outrank that, or the control saves and changes nothing. Verified in Chrome:
 * without it, all four values rendered at 82 characters.
 *
 * !important alone was not enough: that rule is (1,2,1) and the first version of
 * this one was (1,1,1), so with both marked important the OLDER rule still won
 * and the measure still did nothing. The class is repeated to reach (1,3,1). */
#hc-page.view-article .hc-body-m-narrow.hc-body-m-narrow>p,
#hc-page.view-article .hc-body-m-narrow.hc-body-m-narrow>ul,
#hc-page.view-article .hc-body-m-narrow.hc-body-m-narrow>ol,
#hc-page.view-article .hc-body-m-narrow.hc-body-m-narrow>blockquote{max-width:62ch!important}
#hc-page.view-article .hc-body-m-normal.hc-body-m-normal>p,
#hc-page.view-article .hc-body-m-normal.hc-body-m-normal>ul,
#hc-page.view-article .hc-body-m-normal.hc-body-m-normal>ol,
#hc-page.view-article .hc-body-m-normal.hc-body-m-normal>blockquote{max-width:68ch!important}
#hc-page.view-article .hc-body-m-wide.hc-body-m-wide>p,
#hc-page.view-article .hc-body-m-wide.hc-body-m-wide>ul,
#hc-page.view-article .hc-body-m-wide.hc-body-m-wide>ol,
#hc-page.view-article .hc-body-m-wide.hc-body-m-wide>blockquote{max-width:76ch!important}
/* A measure is a reading aid on screen and meaningless on paper, where the
   page width already decides the line length. */
@media print{
  #hc-page [class*="hc-body-m-"]>p,
  #hc-page [class*="hc-body-m-"]>ul,
  #hc-page [class*="hc-body-m-"]>ol,
  #hc-page [class*="hc-body-m-"]>blockquote{max-width:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE5_2026-08-06 — the FOUR CTA variants that had no styling.

   hc_render_cta() accepts ten values. Five carried real rules; `prompt` is the
   base so it correctly has none of its own. The remaining four — contact, split,
   gradient, fullbleed — were live dropdown entries that rendered identically to
   prompt. Same defect shape as the five card settings earlier in this programme:
   the value validates, saves and changes nothing.

   Each sets --hce-cta-surface, the token the existing variants already use, so
   they follow the theme and the Colour Studio rather than pinning their own
   colours. */

/* contact — a quiet, tinted support prompt. The least shouty of the ten. */
#hc-page .hce-cta-contact{
  --hce-cta-surface:color-mix(in srgb, var(--brand) 8%, var(--card-bg,#fff));
}
#hc-page .hce-cta-contact .hce-cta-inner{border:1px solid color-mix(in srgb, var(--brand) 20%, transparent);border-radius:var(--card-radius,16px)}

/* split — copy on one side, actions on the other, with a real divider. */
#hc-page .hce-cta-split{
  --hce-cta-surface:var(--card-bg,#fff);
}
#hc-page .hce-cta-split .hce-cta-inner{
  justify-content:space-between;
  gap:clamp(20px,4vw,48px);
}
#hc-page .hce-cta-split .hce-cta-copy{flex:1 1 340px;min-width:0}
/* The basis is a WIDTH here. If this ever gains a column breakpoint it must be
   reset there — the page-header band shipped a 486px-tall widget panel because a
   340px width basis became a height when its row flipped to a column. */
#hc-page .hce-cta-split .hce-cta-actions{flex:0 0 auto}
@media (min-width:860px){
  #hc-page .hce-cta-split .hce-cta-actions{
    padding-left:clamp(20px,3vw,44px);
    border-left:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 12%, transparent);
  }
}

/* gradient — a brand-led band, white ink. */
#hc-page .hce-cta-gradient{
  --hce-cta-surface:linear-gradient(120deg, var(--brand), color-mix(in srgb, var(--brand) 45%, #22d3ee) 55%, color-mix(in srgb, var(--brand) 60%, #a855f7));
  color:#fff;
}
#hc-page .hce-cta-gradient .hce-cta-title,
#hc-page .hce-cta-gradient .hce-cta-body,
#hc-page .hce-cta-gradient .hce-cta-eyebrow,
#hc-page .hce-cta-gradient .hce-cta-subhead,
#hc-page .hce-cta-gradient .hce-cta-note{color:#fff}
#hc-page .hce-cta-gradient .hce-cta-body,
#hc-page .hce-cta-gradient .hce-cta-note{opacity:.9}

/* fullbleed — edge to edge, no rounding, for the bottom of a page. */
#hc-page .hce-cta-fullbleed{
  --hce-cta-surface:color-mix(in srgb, var(--brand) 12%, var(--card-bg,#fff));
  border-radius:0;
  border-inline:0;
}
#hc-page .hce-cta-fullbleed .hce-cta-inner{
  max-width:var(--hc-shell,1180px);
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,40px);
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE5_2026-08-06 — three more quick-links presentations.

   home_quick_style was a tabs/tiles binary. These restyle the same tab rail
   rather than introducing new markup, so the tab behaviour, the panels and the
   soft-nav rebinding all keep working untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   PHASE8_2026-08-08 — THE STANDALONE QUICK-LINKS MODULE, fifteen presentations.

   Every colour is a declared token (--text-primary / --text-secondary / --card-bg /
   --card-border / --brand / --card-radius), never a literal, so the Colour Studio and
   dark mode both reach this block. Geometry differs per type because each type is a
   different structure, not a repaint.
   ══════════════════════════════════════════════════════════════════════════ */
#hc-page .hc-links{margin:34px 0}
#hc-page .hc-links a{text-decoration:none;color:inherit}
#hc-page .hc-links-name{font-weight:750;color:var(--text-primary,#111827);letter-spacing:-.01em}
#hc-page .hc-links-desc{display:block;font-size:13px;line-height:1.5;color:var(--text-secondary,#6b7280);margin-top:4px}
#hc-page .hc-links-count{
  font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;
  background:var(--card-border,#eef0f4);color:var(--text-secondary,#6b7280);
}
#hc-page .hc-links-go{
  font-size:12.5px;font-weight:800;color:var(--brand-ink,var(--brand,#2563eb));
}

/* 1. GRID — equal-weight tiles. */
#hc-page .hc-links-grid{display:grid;grid-template-columns:repeat(var(--hcl-cols,3),minmax(0,1fr));gap:12px}
#hc-page .hc-links-tile{
  display:flex;flex-direction:column;gap:4px;padding:16px 18px;
  background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);
  border-radius:var(--card-radius,16px);transition:transform .14s,box-shadow .14s,border-color .14s;
}
#hc-page .hc-links-tile:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(15,23,42,.16);border-color:var(--brand,#2563eb)}
#hc-page .hc-links-tile .hc-links-count{align-self:flex-start;margin-top:6px}

/* 2. LIST — rows, hairline separated, count on the right. */
#hc-page .hc-links-list{list-style:none;margin:0;padding:0}
#hc-page .hc-links-list li{border-bottom:1px solid var(--card-border,#eef0f4)}
#hc-page .hc-links-list li:last-child{border-bottom:0}
#hc-page .hc-links-list a{display:grid;grid-template-columns:minmax(200px,34%) minmax(0,1fr) auto;align-items:center;column-gap:22px;padding:14px 4px}
#hc-page .hc-links-list .hc-links-name{grid-column:1;min-width:0}
#hc-page .hc-links-list .hc-links-desc{grid-column:2;margin-top:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#hc-page .hc-links-list .hc-links-count{grid-column:3;justify-self:end}
#hc-page .hc-links-list a:not(:has(.hc-links-desc)){grid-template-columns:minmax(0,1fr) auto}
@media(max-width:720px){#hc-page .hc-links-list a{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}#hc-page .hc-links-list .hc-links-desc{grid-column:1/-1}}
#hc-page .hc-links-list .hc-links-name{flex:1 1 auto;min-width:0}
#hc-page .hc-links-list a:hover .hc-links-name{color:var(--brand-ink,var(--brand,#2563eb))}

/* 3. COLUMNS — a sitemap index. CSS columns keep reading order vertical. */
#hc-page .hc-links-cols{list-style:none;margin:0;padding:0;column-count:var(--hcl-cols,3);column-gap:28px}
#hc-page .hc-links-cols li{break-inside:avoid;padding:6px 0}
#hc-page .hc-links-cols a{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;color:var(--text-primary,#111827)}
#hc-page .hc-links-cols a:hover{color:var(--brand-ink,var(--brand,#2563eb))}

/* 4. STRIP — one horizontal row that scrolls; edge fades show there is more, cards are uniform. */
#hc-page .hc-links-strip{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
#hc-page .hc-links-strip::-webkit-scrollbar{display:none}
#hc-page .hc-links-strip:focus-visible{outline:2px solid var(--brand,#2563eb);outline-offset:4px;border-radius:12px}
/* Customers-only article gate. */
#hc-page .hc-gate{display:flex;align-items:center;gap:16px;padding:22px 24px;margin:8px 0 24px;border:1px solid var(--card-border,#e5e7eb);border-radius:14px;background:var(--card-bg,#fff);color:var(--text-primary,#111827)}
#hc-page .hc-gate>svg{flex:0 0 auto;color:var(--brand,#2563eb)}
#hc-page .hc-gate-copy{flex:1;min-width:0}
#hc-page .hc-gate-copy strong{display:block;font-size:15px;margin-bottom:2px}
#hc-page .hc-gate-copy p{margin:0;font-size:14px;color:var(--text-secondary,#4b5563)}
#hc-page .hc-gate-btn{flex:0 0 auto;display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;background:var(--brand,#2563eb);color:var(--brand-on,#fff);font-weight:700;text-decoration:none}
html[data-theme="dark"] #hc-page .hc-gate{background:var(--hc-d-card,#151b25);border-color:var(--hc-d-line,#2b3646);color:var(--hc-d-ink,#e8edf5)}
html[data-theme="dark"] #hc-page .hc-gate-copy p{color:var(--hc-d-ink-2,#a9b4c4)}
@media(max-width:560px){#hc-page .hc-gate{flex-wrap:wrap}#hc-page .hc-gate-btn{width:100%;justify-content:center}}

/* Search results pager. */
#hc-page .hc-pager{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:28px 0 8px}
#hc-page .hc-pager-list{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
#hc-page .hc-pager-num,#hc-page .hc-pager-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--card-border,#e5e7eb);background:var(--card-bg,#fff);color:var(--text-primary,#111827);font-weight:650;font-size:14px;text-decoration:none;transition:border-color .15s,background-color .15s}
#hc-page .hc-pager-num:hover,#hc-page .hc-pager-btn:hover{border-color:var(--brand,#2563eb);color:var(--brand,#2563eb)}
#hc-page .hc-pager-num.is-current{background:var(--brand,#2563eb);border-color:var(--brand,#2563eb);color:var(--brand-on,#fff)}
#hc-page .hc-pager-gap{color:var(--text-secondary,#6b7280);padding:0 4px}
html[data-theme="dark"] #hc-page .hc-pager-num,html[data-theme="dark"] #hc-page .hc-pager-btn{background:var(--hc-d-card,#151b25);border-color:var(--hc-d-line,#2b3646);color:var(--hc-d-ink,#e8edf5)}
@media(max-width:560px){#hc-page .hc-pager-btn{padding:0 10px}#hc-page .hc-pager-num{min-width:34px;height:34px}}

#hc-page .hc-links-scard{
  flex:0 0 clamp(220px,26vw,300px);scroll-snap-align:start;min-width:0;
  display:flex;flex-direction:column;gap:8px;padding:15px 17px;
  background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);
  border-radius:var(--card-radius,16px);
}
#hc-page .hc-links-scard:hover{border-color:var(--brand,#2563eb)}
#hc-page .hc-links-scard .hc-links-count{align-self:flex-start}
#hc-page .hc-links-scard .hc-links-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}

/* 5. ACCORDION — collapsible, works with JS off. */
#hc-page .hc-links-acc{display:flex;flex-direction:column;gap:8px}
#hc-page .hc-links-item{
  background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);
  border-radius:var(--card-radius,14px);overflow:hidden;
}
#hc-page .hc-links-item summary{
  display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:14px 16px;font-weight:750;color:var(--text-primary,#111827);
}
#hc-page .hc-links-item summary::-webkit-details-marker{display:none}
#hc-page .hc-links-item summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.5;transition:transform .16s}
#hc-page .hc-links-item[open] summary::after{transform:rotate(-135deg)}
#hc-page .hc-links-acc-body{padding:0 16px 14px}

/* 6. SPOTLIGHT — one lead, the rest small beside it. */
#hc-page .hc-links-spot{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
#hc-page .hc-links-lead{
  display:flex;flex-direction:column;gap:6px;justify-content:center;padding:26px 28px;
  background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);
  border-radius:var(--card-radius,18px);
}
#hc-page .hc-links-lead .hc-links-name{font-size:21px}
#hc-page .hc-links-lead .hc-links-count{align-self:flex-start}
#hc-page .hc-links-rest{display:flex;flex-direction:column;gap:8px}
#hc-page .hc-links-small{
  padding:11px 14px;font-weight:650;font-size:14px;
  background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);
  border-radius:var(--card-radius,12px);
}
#hc-page .hc-links-small:hover{border-color:var(--brand,#2563eb);color:var(--brand-ink,var(--brand,#2563eb))}

/* 7. NUMBERED — a ranked list, the number is the ornament. */
#hc-page .hc-links-num{list-style:none;margin:0;padding:0;counter-reset:hcl}
#hc-page .hc-links-num li{counter-increment:hcl;border-bottom:1px solid var(--card-border,#eef0f4)}
#hc-page .hc-links-num li:last-child{border-bottom:0}
#hc-page .hc-links-num a{display:flex;align-items:center;gap:14px;padding:13px 4px}
#hc-page .hc-links-num a::before{
  content:counter(hcl);flex:0 0 30px;height:30px;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:900;border-radius:50%;
  background:var(--card-border,#eef0f4);color:var(--text-secondary,#6b7280);
}
#hc-page .hc-links-num a:hover::before{background:var(--brand,#2563eb);color:var(--btn-text,#fff)}
#hc-page .hc-links-num .hc-links-name{flex:1 1 auto;min-width:0}

/* 8. CHIPS — densest. Everything on as few lines as possible. */
#hc-page .hc-links-chips{display:flex;flex-wrap:wrap;gap:8px}
#hc-page .hc-links-chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;
  font-size:13.5px;font-weight:700;color:var(--text-primary,#111827);
  background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);border-radius:999px;
}
#hc-page .hc-links-chip:hover{border-color:var(--brand,#2563eb);color:var(--brand-ink,var(--brand,#2563eb))}
#hc-page .hc-links-chip .hc-links-count{padding:1px 7px;font-size:10.5px}

/* 9. CARDS — a call to action per item. */
#hc-page .hc-links-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
#hc-page .hc-links-card{
  display:flex;flex-direction:column;gap:6px;padding:18px 20px;
  background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);
  border-radius:var(--card-radius,16px);box-shadow:var(--card-shadow,none);
}
#hc-page .hc-links-card:hover{border-color:var(--brand,#2563eb)}
#hc-page .hc-links-card .hc-links-name{font-size:16px}
#hc-page .hc-links-card .hc-links-go{margin-top:auto;padding-top:8px}

/* 10. STACK — a column flow so uneven heights interlock. */
#hc-page .hc-links-stack{column-count:var(--hcl-cols,3);column-gap:14px}
#hc-page .hc-links-scell{
  display:block;break-inside:avoid;margin:0 0 14px;padding:16px 18px;
  background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);
  border-radius:var(--card-radius,16px);
}
#hc-page .hc-links-scell:hover{border-color:var(--brand,#2563eb)}
#hc-page .hc-links-scell .hc-links-count{display:inline-block;margin-top:8px}

/* 11. BENTO — an asymmetric discovery board with a true lead route. */
#hc-page .hc-links-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:12px}
#hc-page .hc-links-bento-item{
  position:relative;grid-column:span 2;min-height:150px;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:20px;
  background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);
  border-radius:var(--card-radius,18px);box-shadow:var(--card-shadow,none);
  transition:transform .16s var(--ease,ease),border-color .16s var(--ease,ease),box-shadow .16s var(--ease,ease);
}
#hc-page .hc-links-bento-item.is-lead{grid-column:span 3;grid-row:span 2;min-height:312px;justify-content:flex-end;padding:28px}
#hc-page .hc-links-bento-item.is-wide{grid-column:span 3}
#hc-page .hc-links-bento-item:hover{transform:translateY(-2px);border-color:rgba(var(--br),.48);box-shadow:0 18px 44px rgba(15,23,42,.12)}
#hc-page .hc-links-bento-index{font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--text-secondary,#6b7280)}
#hc-page .hc-links-bento-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(var(--br),.10);color:var(--brand-ink,var(--brand))}
#hc-page .hc-links-bento-item.is-lead .hc-links-name{font-size:clamp(22px,2.4vw,34px);line-height:1.04;max-width:14ch}
#hc-page .hc-links-bento-item .hc-links-count{margin-top:auto}
#hc-page .hc-links-bento-item .hc-links-arrow{position:absolute;inset-inline-end:18px;inset-block-end:18px;color:var(--brand-ink,var(--brand));transition:transform .16s var(--ease,ease)}
#hc-page .hc-links-bento-item:hover .hc-links-arrow{transform:translateX(3px)}

/* 12. COMMAND — a keyboard-like route palette with its own scan behaviour. */
#hc-page .hc-links-command{
  --hcl-command-bg:#111827;--hcl-command-fg:#f8fafc;--hcl-command-muted:#a8b3c7;
  overflow:hidden;border:1px solid rgba(var(--br),.28);border-radius:calc(var(--card-radius,16px) + 2px);
  background:var(--hcl-command-bg);color:var(--hcl-command-fg);box-shadow:0 24px 54px rgba(15,23,42,.18);
}
#hc-page .hc-links-command-bar{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.11);color:var(--hcl-command-muted);font:700 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.08em}
#hc-page .hc-links-command-bar i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.38}
#hc-page .hc-links-command-bar span{margin-inline-start:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hc-page .hc-links-command-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto 18px;align-items:center;gap:14px;padding:14px 17px;border-bottom:1px solid rgba(255,255,255,.09);color:var(--hcl-command-fg)!important;transition:background .15s var(--ease,ease)}
#hc-page .hc-links-command-row:last-child{border-bottom:0}
#hc-page .hc-links-command-row:hover{background:rgba(255,255,255,.075)}
#hc-page .hc-links-command-key{display:grid;place-items:center;width:30px;height:25px;border:1px solid rgba(255,255,255,.16);border-radius:7px;background:rgba(255,255,255,.06);color:var(--hcl-command-muted);font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
#hc-page .hc-links-command-copy{display:block;min-width:0}
#hc-page .hc-links-command .hc-links-name{display:block;color:var(--hcl-command-fg);font-size:14px}
#hc-page .hc-links-command .hc-links-desc{color:var(--hcl-command-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hc-page .hc-links-command .hc-links-count{background:rgba(255,255,255,.10);color:var(--hcl-command-fg)}
#hc-page .hc-links-command .hc-links-arrow{color:var(--hcl-command-muted);transition:transform .16s var(--ease,ease),color .16s var(--ease,ease)}
#hc-page .hc-links-command-row:hover .hc-links-arrow{color:var(--hcl-command-fg);transform:translateX(2px)}

/* 13. LAUNCH — a connected horizontal sequence for guided starts. */
#hc-page .hc-links-launch{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--hcl-cols,3),minmax(0,1fr));gap:0;border:1px solid var(--card-border,#e5e7eb);border-radius:var(--card-radius,18px);background:var(--card-bg,#fff);overflow:hidden}
#hc-page .hc-links-launch li{position:relative;min-width:0;border-inline-end:1px solid var(--card-border,#e5e7eb)}
#hc-page .hc-links-launch li:last-child{border-inline-end:0}
#hc-page .hc-links-launch a{min-height:152px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;transition:background .15s var(--ease,ease)}
#hc-page .hc-links-launch a:hover{background:rgba(var(--br),.06)}
#hc-page .hc-links-launch-step{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(var(--br),.24);border-radius:11px;background:rgba(var(--br),.08);color:var(--brand-ink,var(--brand));font-size:11px;font-weight:900;letter-spacing:.06em}
#hc-page .hc-links-launch-copy{display:block;min-width:0}
#hc-page .hc-links-launch .hc-links-count{margin-top:auto}

/* 14. EDITORIAL — one authored lead beside a restrained reading index. */
#hc-page .hc-links-editorial{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);border-block:1px solid var(--card-border,#e5e7eb)}
#hc-page .hc-links-editorial-lead{position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;padding:clamp(24px,4vw,44px);border-inline-end:1px solid var(--card-border,#e5e7eb)}
#hc-page .hc-links-editorial-mark{position:absolute;inset-block-start:25px;inset-inline-start:clamp(24px,4vw,44px);font-size:10px;font-weight:900;letter-spacing:.16em;color:var(--brand-ink,var(--brand))}
#hc-page .hc-links-editorial-lead .hc-links-name{font-size:clamp(27px,3.4vw,44px);line-height:1.02;max-width:15ch}
#hc-page .hc-links-editorial-lead .hc-links-desc{max-width:48ch;font-size:14px}
#hc-page .hc-links-editorial-lead .hc-links-go{margin-top:8px}
#hc-page .hc-links-editorial-index{margin:0;padding:0;list-style:none;counter-reset:hcl-editorial 1}
#hc-page .hc-links-editorial-index li{counter-increment:hcl-editorial;border-bottom:1px solid var(--card-border,#e5e7eb)}
#hc-page .hc-links-editorial-index li:last-child{border-bottom:0}
#hc-page .hc-links-editorial-index a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:11px;align-items:center;padding:17px 18px}
#hc-page .hc-links-editorial-index a::before{content:counter(hcl-editorial,decimal-leading-zero);font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--text-secondary,#6b7280)}
#hc-page .hc-links-editorial-index a:hover .hc-links-name{color:var(--brand-ink,var(--brand))}

/* 15. TIMELINE — a vertical path whose rail makes order explicit. */
#hc-page .hc-links-timeline{list-style:none;margin:0;padding:3px 0;position:relative}
#hc-page .hc-links-timeline::before{content:"";position:absolute;inset-block:24px;inset-inline-start:21px;width:1px;background:var(--card-border,#e5e7eb)}
#hc-page .hc-links-timeline li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:8px 0}
#hc-page .hc-links-timeline-node{position:relative;z-index:1;display:grid;place-items:center;width:43px;height:43px;border:1px solid rgba(var(--br),.28);border-radius:50%;background:var(--card-bg,#fff);color:var(--brand-ink,var(--brand));font-size:10px;font-weight:900;letter-spacing:.06em}
#hc-page .hc-links-timeline a{min-height:64px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;column-gap:12px;padding:10px 16px;border:1px solid transparent;border-radius:var(--card-radius,14px)}
#hc-page .hc-links-timeline a:hover{border-color:var(--card-border,#e5e7eb);background:var(--card-bg,#fff)}
#hc-page .hc-links-timeline .hc-links-desc{grid-column:1;margin-top:2px}
#hc-page .hc-links-timeline .hc-links-count{grid-column:2;grid-row:1;align-self:center}

[dir=rtl] #hc-page .hc-links-arrow{transform:scaleX(-1)}
[dir=rtl] #hc-page .hc-links-bento-item:hover .hc-links-arrow,[dir=rtl] #hc-page .hc-links-command-row:hover .hc-links-arrow{transform:scaleX(-1) translateX(3px)}


@media (max-width:760px){
  #hc-page .hc-links-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #hc-page .hc-links-cols,#hc-page .hc-links-stack{column-count:1}
  #hc-page .hc-links-spot{grid-template-columns:1fr}
  #hc-page .hc-links-bento{grid-template-columns:1fr}
  #hc-page .hc-links-bento-item,#hc-page .hc-links-bento-item.is-lead,#hc-page .hc-links-bento-item.is-wide{grid-column:1;grid-row:auto;min-height:148px;padding:19px}
  #hc-page .hc-links-bento-item.is-lead{min-height:220px}
  #hc-page .hc-links-command-row{grid-template-columns:30px minmax(0,1fr) 16px;gap:10px;padding:13px}
  #hc-page .hc-links-command-row>.hc-links-count{display:none}
  #hc-page .hc-links-command .hc-links-desc{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  #hc-page .hc-links-launch{grid-template-columns:1fr}
  #hc-page .hc-links-launch li{border-inline-end:0;border-bottom:1px solid var(--card-border,#e5e7eb)}
  #hc-page .hc-links-launch li:last-child{border-bottom:0}
  #hc-page .hc-links-launch a{min-height:0;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:start;padding:16px}
  #hc-page .hc-links-launch .hc-links-count{margin-top:0;align-self:center}
  #hc-page .hc-links-editorial{grid-template-columns:1fr}
  #hc-page .hc-links-editorial-lead{min-height:250px;border-inline-end:0;border-bottom:1px solid var(--card-border,#e5e7eb)}
  #hc-page .hc-links-editorial-index a{padding-inline:4px}
  #hc-page .hc-links-timeline li{gap:11px}
  #hc-page .hc-links-timeline a{padding-inline:11px}
}

/* WITHDRAWN 2026-08-07 — the icons/pills/boxed rules lived here.
   They restyled `.hce-tab*`, which belongs to the auto-topic tab rail, a complete
   feature with its own contract (rail + panels + multi-open + auto article lookup).
   Bolting three presentations onto it squeezed the rail into its 281px column and
   wrapped "Getting Started" as "Getttin g Started". The block is left as it was; if
   these presentations are wanted they need their OWN block and their OWN controls,
   not a third value on someone else's setting. */

/* ══ end quick link styles ═════════════════════════════════════════════ */

/* ══ end CTA variants ══════════════════════════════════════════════════ */

/* ── article meta: views and the freshness badge ─────────────────────────── */
#hc-page .hc-art-views{display:inline-flex;align-items:center;gap:5px}
#hc-page .hc-art-fresh{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:999px;
  font-size:11.6px;
  font-weight:700;
  /* derived from the brand, so it follows the theme and the Colour Studio like
     every other chip rather than pinning a "success green" of its own */
  color:var(--brand-ink,var(--brand));
  background:color-mix(in srgb, var(--brand) 12%, transparent);
}
@media print{ #hc-page .hc-art-fresh{display:none} }

#hc-page .hc-art-cta{margin-top:28px}
#hc-page .hc-art-cta .hce-cta{margin-block-end:0}
@media print{ #hc-page .hc-art-cta{display:none} }

/* ══════════════════════════════════════════════════════════════════════════
   PHASE4_2026-08-07 — STRUCTURED CONTENT in an article body.

   Measured across the 1,279 published articles first: 84 carry <code>, 59 <pre>,
   47 <table>, 7 <blockquote>. An earlier note in this programme said there was
   none — that was read from ONE article and was wrong.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── tables: scrollable, not clipped ─────────────────────────────────────
   Measured on a live article at 1440px: 855px of table inside an 842px column
   with overflow-x:hidden, so the right-hand column was CUT OFF with no way to
   reach it. That is content loss, so this is unconditional and has no setting.
   display:block is what makes a table scrollable at all; it keeps rendering
   normally and simply allows the box to overflow its own scroller. */
#hc-page .hc-body table{
  display:block;
  width:max-content;
  max-width:100%;
  overflow-x:auto!important;
  border-collapse:collapse;
  margin:18px 0;
  font-size:14px;
}
#hc-page .hc-body table th,
#hc-page .hc-body table td{
  padding:9px 14px;
  border:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 12%, transparent);
  text-align:left;
  vertical-align:top;
}
#hc-page .hc-body table th{
  background:color-mix(in srgb, var(--brand) 8%, transparent);
  font-weight:700;
}
/* on paper the page width decides, and a scroller is meaningless */
@media print{ #hc-page .hc-body table{display:table;width:100%;overflow:visible!important} }

/* ── code ────────────────────────────────────────────────────────────────── */
#hc-page .hc-body pre{
  position:relative;
  margin:18px 0;
  padding:16px 18px;
  border-radius:var(--card-radius,14px);
  border:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 12%, transparent);
  background:color-mix(in srgb, var(--text-primary,#0f172a) 5%, transparent);
  overflow-x:auto;
  font-size:13.4px;
  line-height:1.6;
}
#hc-page .hc-body :not(pre)>code{
  padding:2px 6px;
  border-radius:6px;
  font-size:.92em;
  background:color-mix(in srgb, var(--text-primary,#0f172a) 8%, transparent);
}
#hc-page .hc-code-copy{
  position:absolute;
  top:8px;
  right:8px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--card-border,#e5e7eb);
  background:var(--card-bg,#fff);
  color:inherit;
  font:inherit;
  font-size:11.6px;
  font-weight:650;
  cursor:pointer;
  opacity:0;
  transition:opacity .16s var(--ease,ease),color .16s var(--ease,ease);
}
/* revealed on hover OR focus — keyboard users never hover, so opacity alone
   would hide the control from them entirely */
#hc-page .hc-body pre:hover .hc-code-copy,
#hc-page .hc-code-copy:focus-visible{opacity:1}
#hc-page .hc-code-copy.is-done{color:var(--brand-ink,var(--brand));border-color:color-mix(in srgb, var(--brand) 40%, transparent)}
@media print{ #hc-page .hc-code-copy{display:none} }

/* ── blockquote callouts ─────────────────────────────────────────────────── */
#hc-page .hc-body blockquote{
  margin:18px 0;
  padding:14px 18px;
  border-left:3px solid var(--brand);
  border-radius:0 var(--card-radius,12px) var(--card-radius,12px) 0;
  background:color-mix(in srgb, var(--brand) 7%, transparent);
}
#hc-page .hc-body blockquote>:first-child{margin-top:0}
#hc-page .hc-body blockquote>:last-child{margin-bottom:0}

/* ══ end structured content ════════════════════════════════════════════ */

/* ══ end reader actions ════════════════════════════════════════════════ */

/* Motion is a preference, not a decoration. */
@media (prefers-reduced-motion:reduce){
  #hc-page .hc-dir-body,
  #hc-page .hc-dir-toggle,
  #hc-page .hc-dir-list a,
  #hc-page .hc-dir-more svg{transition:none}
}

/* ══ end directory cards ═══════════════════════════════════════════════ */
/* Small polish on the default (cards) hover — a touch more lift + brand tint. */
#hc-page .hc-kb-sidebar.hc-kb-style-cards .hc-kb-cat-link:hover{border-color:rgba(var(--br),.35)!important;transform:translateY(-2px)!important;box-shadow:0 14px 32px rgba(15,23,42,.10)!important}

/* Border and radius parity with side cards */
#hc-page .hc-side-card,#hc-page .hc-kb-sidebar,#hc-page .hc-sidebar .hc-kb-sidebar,#hc-page .hc-page-shell>.hc-kb-sidebar,#hc-page.view-article .hc-sidebar .hc-kb-sidebar{border-style:solid!important;border-width:var(--card-border-w)!important;border-color:var(--card-edge)!important;border-radius:var(--card-radius)!important}
#hc-page.cards-bordered .hc-kb-sidebar,#hc-page.cards-bordered .hc-sidebar .hc-kb-sidebar,#hc-page.cards-bordered .hc-page-shell>.hc-kb-sidebar{box-shadow:none!important;border:1.5px solid rgba(148,163,184,.28)!important}
#hc-page.cards-soft .hc-kb-sidebar,#hc-page.cards-soft .hc-sidebar .hc-kb-sidebar,#hc-page.cards-soft .hc-page-shell>.hc-kb-sidebar{box-shadow:0 8px 28px rgba(15,23,42,.045)!important;border-radius:20px!important}
#hc-page.radius-sharp .hc-kb-sidebar,#hc-page.radius-sharp .hc-sidebar .hc-kb-sidebar,#hc-page.radius-sharp .hc-page-shell>.hc-kb-sidebar{border-radius:6px!important}
#hc-page.radius-soft .hc-kb-sidebar,#hc-page.radius-soft .hc-sidebar .hc-kb-sidebar,#hc-page.radius-soft .hc-page-shell>.hc-kb-sidebar{border-radius:22px!important}
#hc-page.layout-minimal .hc-kb-sidebar,#hc-page.layout-minimal .hc-sidebar .hc-kb-sidebar,#hc-page.layout-minimal .hc-page-shell>.hc-kb-sidebar{border:1px solid var(--g200)!important;border-radius:10px!important}
/* ══════════════════════════════════════════════════════════════════════════════
   PHASE9_2026-08-09 — six more browse architectures.

   Each differs in GEOMETRY or INFORMATION ARCHITECTURE. Every rule below is scoped
   to one .hc-dir-v-* class, so none of them can reach a layout it does not own, and
   they are appended after the existing eight so source order settles any tie.

   The shared card chrome (.hc-dir-card / -head / -title / -list) is reused on purpose:
   the Design Studio's Category cards group targets those classes, so an operator who
   recolours the header band gets it in all fifteen layouts rather than the first nine.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── BENTO — asymmetric grid ───────────────────────────────────────────────────
   A 2x2 lead, two 2x1 seconds, the rest 1x1. Distinct from `tiles` (every cell the
   same) and from `split` (one full-width lead, then a uniform grid). */
#hc-page .hc-dir-v-bento{
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(120px,auto);
}
#hc-page .hc-dir-v-bento .hc-dir-card{padding:0}
#hc-page .hc-dir-v-bento .hc-dir-card:nth-child(1){grid-column:span 2;grid-row:span 2}
#hc-page .hc-dir-v-bento .hc-dir-card:nth-child(2),
#hc-page .hc-dir-v-bento .hc-dir-card:nth-child(3){grid-column:span 2}
#hc-page .hc-dir-v-bento .hc-dir-head{
  background:color-mix(in srgb, var(--brand) 8%, transparent);
  border-bottom:0;
  padding:15px 18px 10px;
}
#hc-page .hc-dir-v-bento .hc-dir-body{flex:1}
#hc-page .hc-dir-v-bento .hc-dir-inner{padding:0 18px 15px}
#hc-page .hc-dir-v-bento .hc-dir-desc{
  margin:0 0 10px;font-size:13.2px;line-height:1.5;opacity:.72;
}
#hc-page .hc-dir-v-bento .hc-dir-card:nth-child(1) .hc-dir-title{font-size:17px}
#hc-page .hc-dir-v-bento .hc-dir-ico{font-size:19px}
@media (max-width:900px){
  #hc-page .hc-dir-v-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  #hc-page .hc-dir-v-bento .hc-dir-card:nth-child(1),
  #hc-page .hc-dir-v-bento .hc-dir-card:nth-child(2),
  #hc-page .hc-dir-v-bento .hc-dir-card:nth-child(3){grid-column:span 2;grid-row:auto}
}

/* ── CONSOLE — command-palette rows ───────────────────────────────────────────
   One dense line per category with a ↵ affordance. Not a restyle of `compact`:
   compact is a typographic index with no chrome; this is a palette, and the row —
   not the title — is the target. */
#hc-page .hc-dir-v-console{
  gap:0;
  border:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 11%, transparent);
  border-radius:var(--card-radius);
  overflow:hidden;
  background:color-mix(in srgb, var(--card-bg,#fff) 72%, transparent);
}
#hc-page .hc-dir-v-console .hc-dir-card{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  border-bottom:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 8%, transparent);
}
#hc-page .hc-dir-v-console .hc-dir-card:last-child{border-bottom:0}
#hc-page .hc-dir-v-console .hc-dir-head{
  background:transparent;border-bottom:0;padding:11px 16px;gap:11px;position:relative;
}
#hc-page .hc-dir-v-console .hc-dir-card:hover .hc-dir-head{
  background:color-mix(in srgb, var(--brand) 7%, transparent);
}
#hc-page .hc-dir-v-console .hc-dir-title{
  font-size:14px;font-weight:650;letter-spacing:-.01em;
}
#hc-page .hc-dir-v-console .hc-dir-ico{
  font-size:14px;opacity:.62;flex:none;width:20px;text-align:center;
}
/* The return key hint. content:"" + a glyph in a pseudo-element keeps it out of the
   accessibility tree — it is a visual affordance, not information. */
#hc-page .hc-dir-v-console .hc-dir-head::after{
  content:"\21B5";
  flex:none;font-size:13px;line-height:1;opacity:0;
  padding:3px 7px;border-radius:6px;
  border:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 16%, transparent);
  color:var(--brand-ink,var(--brand));
  transition:opacity .14s var(--ease,ease);
}
#hc-page .hc-dir-v-console .hc-dir-card:hover .hc-dir-head::after{opacity:.85}
/* Article previews run inline, comma-free, as a wrapped chip row — a vertical list
   under every row would undo the density the layout exists for. */
#hc-page .hc-dir-v-console .hc-dir-inner{padding:0 16px 11px 47px}
#hc-page .hc-dir-v-console .hc-dir-list{display:flex;flex-wrap:wrap;gap:5px 8px}
#hc-page .hc-dir-v-console .hc-dir-list li+li{border-top:0}
#hc-page .hc-dir-v-console .hc-dir-list a{
  padding:2px 8px;border-radius:6px;font-size:12.2px;
  background:color-mix(in srgb, var(--text-primary,#0f172a) 5%, transparent);
}
#hc-page .hc-dir-v-console .hc-dir-list a:hover{
  padding-left:8px;background:color-mix(in srgb, var(--brand) 12%, transparent);
  color:var(--brand-ink,var(--brand));
}

/* ── RAIL — a horizontally snap-scrolling deck ────────────────────────────────
   The only layout in the set that scrolls sideways. overflow-x on a grid needs an
   explicit auto-flow, or the columns wrap instead of extending. */
#hc-page .hc-dir-v-rail{
  display:grid;
  /* MUST reset the template. .hc-dir-c2 sets an explicit two-column template earlier in
     this same sheet at equal specificity, and grid-auto-columns only sizes IMPLICIT
     tracks — so with auto-flow:column the cards packed into the two explicit columns and
     rendered 2px wide by 4,771px tall. Measured in the browser; the markup was fine and
     the structure check passed, because this is a pure cascade fault. */
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:minmax(260px,300px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* room for the cards' shadow, which a clipped overflow would shave off */
  padding:4px 4px 14px;
  margin:0;
  box-sizing:border-box;
  max-width:100%;
  scrollbar-width:thin;
}
#hc-page .hc-dir-v-rail .hc-dir-card{scroll-snap-align:start;min-height:100%}
#hc-page .hc-dir-v-rail .hc-dir-head{padding:14px 17px 10px;border-bottom:0}
#hc-page .hc-dir-v-rail .hc-dir-inner{padding:0 17px 15px}
#hc-page .hc-dir-v-rail .hc-dir-desc{margin:0 0 9px;font-size:13px;line-height:1.5;opacity:.72}
#hc-page .hc-dir-v-rail .hc-dir-title{font-size:15px}
#hc-page .hc-dir-v-rail::-webkit-scrollbar{height:8px}
#hc-page .hc-dir-v-rail::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--text-primary,#0f172a) 18%, transparent);border-radius:999px;
}
/* Standard properties win over the -webkit- ones where both are supported, so the
   track has to be declared in both vocabularies or it is left at the UA default. */
#hc-page .hc-dir-v-rail{scrollbar-color:color-mix(in srgb, var(--text-primary,#0f172a) 18%, transparent) transparent}

/* ── MASONRY — natural heights ────────────────────────────────────────────────
   CSS multi-column, not grid. A grid row is as tall as its tallest cell, so a
   category with two articles left a hole beside one with nine. Columns pack. */
#hc-page .hc-dir-v-masonry{
  display:block;
  column-count:3;
  column-gap:var(--card-gap,18px);
}
#hc-page .hc-dir-v-masonry .hc-dir-card{
  /* A card split across a column break renders its header in one column and its list
     in the next, which reads as two broken cards. */
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  display:inline-flex;
  width:100%;
  margin:0 0 var(--card-gap,18px);
}
@media (max-width:1100px){#hc-page .hc-dir-v-masonry{column-count:2}}
@media (max-width:720px){#hc-page .hc-dir-v-masonry{column-count:1}}

/* ── INDEX — grouped A–Z ──────────────────────────────────────────────────────
   The one architecture of the six that needed markup: CSS cannot group siblings, so
   help.php emits a .hc-dir-letter before the first card of each initial. */
#hc-page .hc-dir-v-index{gap:0}
#hc-page .hc-dir-v-index .hc-dir-letter{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  align-items:center;
  gap:10px;
  margin:22px 0 4px;
  padding:7px 0 7px 2px;
  font-size:15px;font-weight:900;letter-spacing:.06em;line-height:1;
  color:var(--brand-ink,var(--brand));
  /* --body-bg, NOT --page-bg. --page-bg is declared nowhere in the Help Center, so
     var(--page-bg, …) always fell through to the literal #fff — a hardcoded white bar
     that vanished on a white page and flashed on a dark one. --body-bg is declared and
     IS remapped by the dark palette, so this follows the theme. A sticky element MUST
     be opaque: a transparent one lets the rows scroll through it. */
  background:var(--body-bg,var(--card-bg,#fff));
  border-bottom:1px solid color-mix(in srgb, var(--brand) 26%, transparent);
}
/* A rule that runs to the end of the row, so the marker reads as a divider rather than
   as a very short word. */
#hc-page .hc-dir-v-index .hc-dir-letter::after{
  content:"";
  flex:1;
  height:1px;
  background:color-mix(in srgb, var(--brand) 14%, transparent);
}
#hc-page .hc-dir-v-index .hc-dir-letter:first-child{margin-top:0}
#hc-page .hc-dir-v-index .hc-dir-card{
  background:transparent;border:0;border-radius:0;box-shadow:none;
}
#hc-page .hc-dir-v-index .hc-dir-head{
  background:transparent;border-bottom:0;padding:7px 0 7px 2px;
}
#hc-page .hc-dir-v-index .hc-dir-title{font-size:14px;font-weight:600}
#hc-page .hc-dir-v-index .hc-dir-inner{padding:0 0 4px 2px}
#hc-page .hc-dir-v-index .hc-dir-list{display:flex;flex-wrap:wrap;gap:4px 16px}
#hc-page .hc-dir-v-index .hc-dir-list li+li{border-top:0}
#hc-page .hc-dir-v-index .hc-dir-list a{padding:2px 0;font-size:12.6px;opacity:.72}
#hc-page .hc-dir-v-index .hc-dir-list a:hover{opacity:1;color:var(--brand-ink,var(--brand))}

/* POSTER was removed 2026-08-09: it was a card with a faint glyph on it, which is the
   thing the four layouts below exist to stop being. */


/* ══════════════════════════════════════════════════════════════════════════════
   PHASE9b_2026-08-09 — FOUR ARCHITECTURES WITH NO CARD.

   Every layout before these was the same rounded box in a different arrangement.
   These four remove the box entirely and carry the design in TYPE, RULES and SPACE.
   Each therefore has to null out the shared card chrome first — background, border,
   radius, shadow, and the header band — or it inherits a box it never asked for.
   ══════════════════════════════════════════════════════════════════════════════ */

#hc-page .hc-dir-v-toc .hc-dir-card,
#hc-page .hc-dir-v-cloud .hc-dir-card,
#hc-page .hc-dir-v-marquee .hc-dir-card{
  background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;
}
#hc-page .hc-dir-v-toc .hc-dir-head,
#hc-page .hc-dir-v-cloud .hc-dir-head,
#hc-page .hc-dir-v-marquee .hc-dir-head{
  background:none;border-bottom:0;padding:0;
}

/* ── TOC — a book's table of contents ─────────────────────────────────────────
   Name, dot leaders, count. The leaders are a repeating radial-gradient rather than
   a row of full stops, so they stay put at any zoom and never wrap. */
#hc-page .hc-dir-v-toc{
  display:block;
  column-count:2;
  column-gap:56px;
  margin-top:14px;
}
#hc-page .hc-dir-v-toc .hc-dir-card{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  display:block;
}
#hc-page .hc-dir-v-toc .hc-dir-title{
  display:flex;
  align-items:baseline;
  gap:0;
  width:100%;
  padding:7px 0;
  font-size:14.5px;font-weight:500;
  text-decoration:none;
}
#hc-page .hc-dir-v-toc .hc-dir-title>span{flex:0 1 auto;min-width:0}
/* The leader. flex:1 with a dotted background sits between the name and the number and
   absorbs whatever width is left, which is exactly what a printed contents page does. */
#hc-page .hc-dir-v-toc .hc-dir-title::after{
  content:"";
  flex:1 1 auto;
  min-width:22px;
  align-self:flex-end;
  height:1px;
  margin:0 9px 5px;
  background-image:radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size:5px 2px;
  background-repeat:repeat-x;
  opacity:.3;
}
#hc-page .hc-dir-v-toc .hc-dir-count{
  background:none;padding:0;font-size:12.6px;font-weight:600;opacity:.55;
  flex:none;order:3;
}
#hc-page .hc-dir-v-toc .hc-dir-title:hover{color:var(--brand-ink,var(--brand))}
#hc-page .hc-dir-v-toc .hc-dir-title:hover::after{opacity:.5}
#hc-page .hc-dir-v-toc .hc-dir-body{display:none}
@media (max-width:760px){#hc-page .hc-dir-v-toc{column-count:1}}


/* ── CLOUD — weighted names as running text ───────────────────────────────────
   The shape of the knowledge base before a word of it is read. Sized in PHP into five
   buckets on the square root of the count (see help.php) — CSS cannot read a number
   out of a child element. */
#hc-page .hc-dir-v-cloud{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 22px;
  margin-top:16px;
  padding:6px 0;
}
#hc-page .hc-dir-v-cloud .hc-dir-card{display:inline-flex;margin:0}
#hc-page .hc-dir-v-cloud .hc-dir-head{display:inline-flex}
#hc-page .hc-dir-v-cloud .hc-dir-title{
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.015em;
  transition:color .15s var(--ease,ease);
}
#hc-page .hc-dir-v-cloud .hc-dir-title:hover{color:var(--brand-ink,var(--brand))}
#hc-page .hc-dir-v-cloud .hc-dir-count{display:none}
#hc-page .hc-dir-v-cloud .hc-dir-body{display:none}
/* Five buckets. Opacity carries the weight as much as size does, so a wall of names
   still has a reading order at a glance. */
#hc-page .hc-dir-v-cloud .hc-dir-w1 .hc-dir-title{font-size:14px;opacity:.5;font-weight:500}
#hc-page .hc-dir-v-cloud .hc-dir-w2 .hc-dir-title{font-size:18px;opacity:.62}
#hc-page .hc-dir-v-cloud .hc-dir-w3 .hc-dir-title{font-size:24px;opacity:.76}
#hc-page .hc-dir-v-cloud .hc-dir-w4 .hc-dir-title{font-size:32px;opacity:.88;font-weight:700}
#hc-page .hc-dir-v-cloud .hc-dir-w5 .hc-dir-title{
  font-size:42px;opacity:1;font-weight:800;color:var(--brand-ink,var(--brand));
}
@media (max-width:760px){
  #hc-page .hc-dir-v-cloud{gap:2px 16px}
  #hc-page .hc-dir-v-cloud .hc-dir-w5 .hc-dir-title{font-size:30px}
  #hc-page .hc-dir-v-cloud .hc-dir-w4 .hc-dir-title{font-size:24px}
  #hc-page .hc-dir-v-cloud .hc-dir-w3 .hc-dir-title{font-size:19px}
}

/* ── MARQUEE — oversized editorial lines ──────────────────────────────────────
   One category per row, a hairline between, the count set small and right. The whole
   row is the target, and it slides on hover. */
#hc-page .hc-dir-v-marquee{display:block;margin-top:12px}
#hc-page .hc-dir-v-marquee .hc-dir-card{
  display:block;
  border-top:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 12%, transparent);
}
#hc-page .hc-dir-v-marquee .hc-dir-card:last-child{
  border-bottom:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 12%, transparent);
}
#hc-page .hc-dir-v-marquee .hc-dir-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:16px 2px;
  font-size:clamp(22px,3.1vw,38px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
  transition:padding-left .22s var(--ease,ease),color .18s var(--ease,ease);
}
#hc-page .hc-dir-v-marquee .hc-dir-title>span{min-width:0}
#hc-page .hc-dir-v-marquee .hc-dir-title:hover{
  padding-left:16px;
  color:var(--brand-ink,var(--brand));
}
#hc-page .hc-dir-v-marquee .hc-dir-count{
  background:none;padding:0;
  font-size:12.5px;font-weight:700;
  opacity:.4;
  flex:none;
  align-self:center;
  letter-spacing:.04em;
}
#hc-page .hc-dir-v-marquee .hc-dir-body{display:none}

/* ══════════════════════════════════════════════════════════════════════════════
   PHASE9c_2026-08-09 — the six new quick-links presentations.

   Four of them (rows, inline, columns, marquee) have no box at all. Each is scoped
   to its own .hc-quick-* container class, and each container is a DIFFERENT element
   tree emitted by its own branch in hc_render_quick() — so none of these rules can
   reach a presentation it does not own.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── ROWS ─────────────────────────────────────────────────────────────────── */
#hc-page .hc-qrows{list-style:none;margin:10px 0 0;padding:0}
#hc-page .hc-qrows li{
  border-bottom:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 10%, transparent);
}
#hc-page .hc-qrows li:first-child{
  border-top:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 10%, transparent);
}
#hc-page .hc-qrows a,
#hc-page .hc-qrows>li>span{
  display:flex;align-items:baseline;gap:14px;
  padding:13px 4px;
  text-decoration:none;color:inherit;
  transition:padding-left .16s var(--ease,ease),color .16s var(--ease,ease);
}
#hc-page .hc-qrows a:hover{padding-left:12px;color:var(--brand-ink,var(--brand))}
#hc-page .hc-qr-label{font-size:15px;font-weight:650;flex:none}
#hc-page .hc-qr-desc{font-size:13.2px;opacity:.6;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hc-page .hc-qr-arrow{width:17px;height:17px;flex:none;opacity:0;transition:opacity .16s var(--ease,ease);align-self:center}
#hc-page .hc-qrows a:hover .hc-qr-arrow{opacity:.7}
@media (max-width:640px){
  #hc-page .hc-qrows a,#hc-page .hc-qrows>li>span{flex-direction:column;gap:3px}
  #hc-page .hc-qr-desc{white-space:normal}
}

/* ── INLINE — one paragraph ───────────────────────────────────────────────── */
#hc-page .hc-qinline{
  margin:10px 0 0;
  font-size:14.6px;line-height:2;
}
#hc-page .hc-qinline a,
#hc-page .hc-qinline>span{
  text-decoration:none;color:inherit;font-weight:600;
}
#hc-page .hc-qinline a:hover{color:var(--brand-ink,var(--brand))}
/* The separator is a pseudo-element so it is never selected, copied or announced. */
#hc-page .hc-qinline a:not(:last-child)::after,
#hc-page .hc-qinline>span:not(:last-child)::after{
  content:"·";
  margin:0 12px;
  opacity:.35;
  font-weight:400;
}

/* ── NUMBERED — big numerals, no boxes ────────────────────────────────────── */
#hc-page .hc-qnum{
  list-style:none;
  counter-reset:hcq;
  margin:12px 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:6px 34px;
}
#hc-page .hc-qnum li{counter-increment:hcq}
#hc-page .hc-qnum a,
#hc-page .hc-qnum>li>span{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:15px;
  align-items:baseline;
  padding:11px 0;
  text-decoration:none;color:inherit;
}
#hc-page .hc-qnum a::before,
#hc-page .hc-qnum>li>span::before{
  content:counter(hcq,decimal-leading-zero);
  grid-row:1/3;
  font-size:26px;font-weight:800;line-height:1;
  color:var(--brand-ink,var(--brand));
  opacity:.34;
  font-variant-numeric:tabular-nums;
}
#hc-page .hc-qnum a:hover::before{opacity:.8}
#hc-page .hc-qn-label{font-size:14.6px;font-weight:650}
#hc-page .hc-qn-desc{font-size:12.8px;opacity:.6;line-height:1.5;margin-top:2px}

/* ── COLUMNS — a sitemap list ─────────────────────────────────────────────── */
#hc-page .hc-qcols{
  list-style:none;margin:12px 0 0;padding:0;
  column-count:3;
  column-gap:40px;
}
#hc-page .hc-qcols li{break-inside:avoid;-webkit-column-break-inside:avoid}
#hc-page .hc-qcols a,
#hc-page .hc-qcols>li>span{
  display:block;
  padding:6px 0;
  font-size:13.8px;
  text-decoration:none;color:inherit;opacity:.8;
  transition:opacity .14s var(--ease,ease),color .14s var(--ease,ease);
}
#hc-page .hc-qcols a:hover{opacity:1;color:var(--brand-ink,var(--brand))}
@media (max-width:900px){#hc-page .hc-qcols{column-count:2}}
@media (max-width:560px){#hc-page .hc-qcols{column-count:1}}

/* ── MARQUEE — oversized lines ────────────────────────────────────────────── */
#hc-page .hc-qmarquee{display:block;margin-top:10px}
#hc-page .hc-qm-line{
  display:flex;align-items:baseline;justify-content:space-between;gap:22px;
  padding:15px 2px;
  text-decoration:none;color:inherit;
  border-top:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 12%, transparent);
  transition:padding-left .22s var(--ease,ease),color .18s var(--ease,ease);
}
#hc-page .hc-qm-line:last-child{
  border-bottom:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 12%, transparent);
}
#hc-page .hc-qm-line:hover{padding-left:16px;color:var(--brand-ink,var(--brand))}
#hc-page .hc-qm-label{
  font-size:clamp(20px,2.6vw,32px);font-weight:800;line-height:1.1;letter-spacing:-.03em;
}
#hc-page .hc-qm-desc{
  font-size:13px;opacity:.55;flex:0 1 auto;min-width:0;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:640px){#hc-page .hc-qm-desc{display:none}}

/* ── SPLIT — one promoted, the rest listed ────────────────────────────────── */
#hc-page .hc-qsplit{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--card-gap,18px);
  margin-top:12px;
  align-items:stretch;
}
#hc-page .hc-qs-lead{
  display:flex;flex-direction:column;justify-content:flex-end;gap:7px;
  padding:22px;
  min-height:150px;
  border-radius:var(--card-radius);
  text-decoration:none;color:inherit;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--brand) 15%, transparent),
    color-mix(in srgb, var(--brand) 5%, transparent));
  transition:transform .18s var(--ease,ease);
}
#hc-page .hc-qs-lead:hover{transform:translateY(-2px)}
#hc-page .hc-qs-ico{font-size:24px;opacity:.75;color:var(--brand-ink,var(--brand))}
#hc-page .hc-qs-label{font-size:19px;font-weight:800;letter-spacing:-.02em}
#hc-page .hc-qs-desc{font-size:13.4px;opacity:.7;line-height:1.5}
#hc-page .hc-qs-rest{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;justify-content:center;
}
#hc-page .hc-qs-rest li+li{
  border-top:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 10%, transparent);
}
#hc-page .hc-qs-rest a,
#hc-page .hc-qs-rest>li>span{
  display:block;padding:11px 4px;font-size:14px;font-weight:600;
  text-decoration:none;color:inherit;
  transition:padding-left .16s var(--ease,ease),color .16s var(--ease,ease);
}
#hc-page .hc-qs-rest a:hover{padding-left:9px;color:var(--brand-ink,var(--brand))}
@media (max-width:760px){#hc-page .hc-qsplit{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════════════
   PHASE9d_2026-08-10 — SOFT CARDS, the pattern the owner approved.

   Modelled on the OpsIQ onboarding checklist: a soft-tinted icon chip, the name,
   a count pill hard right, then hairline rows each carrying a marker and an action
   that appears on hover. Named `onboard` after that surface so the reference is
   findable rather than folklore.

   It reuses the shared .hc-dir-* chrome, which means the Design Studio's Category
   cards group recolours it like every other layout.
   ══════════════════════════════════════════════════════════════════════════════ */

#hc-page .hc-dir-v-onboard{gap:var(--card-gap,18px)}

#hc-page .hc-dir-v-onboard .hc-dir-card{
  background:var(--card-bg,#fff);
  border:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 9%, transparent);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  overflow:hidden;
}

/* ── the header: chip, name, pill ─────────────────────────────────────────── */
/* THE HEADER IS ITS OWN BAND.
   A tint rather than the card fill, so the header reads as a header and the rows below it
   read as a list — which is what the reference does. Neutral, not brand-tinted: the chip
   already carries the brand and two brand washes stacked make the header louder than the
   article titles it introduces.
   OVERRIDABLE. Colour Studio -> Category cards -> "Card header background" (ds_dir_head)
   emits with !important, so an operator pick beats this in every one of the nineteen
   layouts at once. */
#hc-page .hc-dir-v-onboard .hc-dir-head{
  background:color-mix(in srgb, var(--text-primary,#0f172a) 3%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 8%, transparent);
  padding:16px 20px;
  gap:14px;
  align-items:center;
}
/* The chip. A fixed square with the glyph centred — flex:none so a long category name
   can never squeeze it into a rectangle. */
#hc-page .hc-dir-v-onboard .hc-dir-ico{
  flex:none;
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  font-size:17px;
  color:var(--brand-ink,var(--brand));
  background:color-mix(in srgb, var(--brand) 12%, transparent);
}
/* The title takes the row and pushes the pill to the far edge, which is what makes the
   header read as a header rather than as a sentence with a number after it. */
#hc-page .hc-dir-v-onboard .hc-dir-title{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:16.5px;font-weight:750;letter-spacing:-.015em;
}
#hc-page .hc-dir-v-onboard .hc-dir-title>span:first-child{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#hc-page .hc-dir-v-onboard .hc-dir-count{
  flex:none;
  padding:4px 12px;
  border-radius:999px;
  font-size:12px;font-weight:700;
  color:var(--text-2,#64748b);
  background:color-mix(in srgb, var(--text-primary,#0f172a) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 8%, transparent);
}

#hc-page .hc-dir-v-onboard .hc-dir-inner{padding:0}
#hc-page .hc-dir-v-onboard .hc-dir-desc{
  margin:0;
  padding:13px 20px;
  font-size:13.4px;line-height:1.55;
  opacity:.66;
  border-bottom:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 7%, transparent);
}

/* ── the rows ─────────────────────────────────────────────────────────────── */
#hc-page .hc-dir-v-onboard .hc-dir-list li+li{
  border-top:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 7%, transparent);
}
#hc-page .hc-dir-v-onboard .hc-dir-list a{
  display:flex;align-items:center;gap:14px;
  padding:15px 20px;
  transition:background .14s var(--ease,ease);
}
#hc-page .hc-dir-v-onboard .hc-dir-rowtext{
  display:flex;flex-direction:column;gap:3px;
  flex:1;min-width:0;
}
#hc-page .hc-dir-v-onboard .hc-dir-rowtitle{
  font-size:14.6px;font-weight:700;line-height:1.35;color:var(--text-primary,#0f172a);
}
#hc-page .hc-dir-v-onboard .hc-dir-rowdesc{
  font-size:13px;line-height:1.45;color:var(--text-2,#64748b);
}
/* The action. Held at 0 opacity rather than display:none so the row never REFLOWS on
   hover — a button appearing would shove the title sideways on every pass of the mouse. */
#hc-page .hc-dir-v-onboard .hc-dir-open{
  flex:none;
  padding:7px 14px;
  border-radius:9px;
  font-size:12.8px;font-weight:650;white-space:nowrap;
  color:var(--brand-ink,var(--brand));
  background:color-mix(in srgb, var(--brand) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  opacity:0;
  transition:opacity .14s var(--ease,ease);
}
#hc-page .hc-dir-v-onboard .hc-dir-rowchev{
  flex:none;width:17px;height:17px;
  color:var(--text-3,#94a3b8);
  transition:color .14s var(--ease,ease),transform .14s var(--ease,ease);
}
#hc-page .hc-dir-v-onboard .hc-dir-list a:hover .hc-dir-open{opacity:1}
#hc-page .hc-dir-v-onboard .hc-dir-list a:hover .hc-dir-rowchev{
  color:var(--brand-ink,var(--brand));transform:translateX(2px);
}
/* Keyboard users get the same affordance mouse users get. */
#hc-page .hc-dir-v-onboard .hc-dir-list a:focus-visible .hc-dir-open{opacity:1}

/* NO MARKER. The reference screen is a checklist and its rows carry a status circle;
   these rows are articles and have no state to report, so a circle would be decoration
   pretending to be information. Owner: "these check mark and select won't be in it". */
#hc-page .hc-dir-v-onboard .hc-dir-list a:hover{
  background:color-mix(in srgb, var(--brand) 5%, transparent);
}

/* SUBCATEGORIES AS ROWS, not chips.
   Everywhere else a subcategory is a chip, because it sits under a description as an
   aside. Here it is one of the two things the card can be made of, so it takes the same
   row shape as an article and the card reads as one list rather than two treatments
   stacked. The count keeps its own pill so a reader can still tell the two apart. */
#hc-page .hc-dir-v-onboard .hc-dir-kids{
  display:block;
  margin:0;
  padding:0;
}
#hc-page .hc-dir-v-onboard .hc-dir-kids li+li,
#hc-page .hc-dir-v-onboard .hc-dir-list li:first-child{
  border-top:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 7%, transparent);
}
#hc-page .hc-dir-v-onboard .hc-dir-kids a{
  display:flex;align-items:center;gap:10px;
  padding:13px 20px;
  border:0;border-radius:0;background:none;
  font-size:14.4px;font-weight:700;line-height:1.4;
  transition:background .14s var(--ease,ease),color .14s var(--ease,ease);
}
#hc-page .hc-dir-v-onboard .hc-dir-kids a:hover{
  background:color-mix(in srgb, var(--brand) 5%, transparent);
  color:var(--brand-ink,var(--brand));
}
#hc-page .hc-dir-v-onboard .hc-dir-kids a>span{
  margin-left:auto;flex:none;
  padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:700;opacity:1;
  color:var(--text-2,#64748b);
  background:color-mix(in srgb, var(--text-primary,#0f172a) 5%, transparent);
}

#hc-page .hc-dir-v-onboard .hc-dir-more{
  display:flex;align-items:center;gap:7px;
  padding:13px 20px;
  font-size:13.2px;font-weight:650;
  color:var(--brand-ink,var(--brand));
  border-top:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 7%, transparent);
}

/* NO TOGGLE IN THE HEADER. The reference header carries three things — chip, name,
   pill — and nothing else. The variant is non-collapsible in help.php, so the control is
   not rendered at all rather than hidden here; this rule remains only to catch a card
   that somehow arrives collapsible. Owner: "are you not seeing the header has no toggle?" */
#hc-page .hc-dir-v-onboard .hc-dir-toggle{display:none}

/* PHASE9d_2026-08-10 — the trimmed-children chip. Reads as a count, not as another
   subcategory, so nobody mistakes "+7" for a category called "+7". */
#hc-page .hc-dir-kids .hc-dir-kidsmore{
  font-variant-numeric:tabular-nums;
  font-weight:800;
  background:color-mix(in srgb, var(--text-primary,#0f172a) 6%, transparent);
  border-color:color-mix(in srgb, var(--text-primary,#0f172a) 12%, transparent);
  opacity:.75;
}
#hc-page .hc-dir-kids .hc-dir-kidsmore:hover{opacity:1}
/* In the soft card the children are ROWS, so the count sits as a row-end pill instead. */
#hc-page .hc-dir-v-onboard .hc-dir-kids .hc-dir-kidsmore{
  justify-content:flex-start;
  font-size:13px;font-weight:700;
  color:var(--text-2,#64748b);
  background:none;border:0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PHASE9e_2026-08-10 — five presentations for the "Show all / Show more" control.

   The base .hc-cats-more rule stays where it was; these only modify it, so an
   operator who never opens the control keeps exactly what shipped (pill).
   ══════════════════════════════════════════════════════════════════════════════ */

#hc-page .hc-cats-more{display:inline-flex;align-items:center;gap:10px}
#hc-page .hc-cats-more-arrow{width:17px;height:17px;flex:none;opacity:.7;transition:transform .16s var(--ease,ease)}
#hc-page .hc-cats-more:hover .hc-cats-more-arrow{transform:translateX(3px)}

/* PILL — what shipped. The arrow is redundant next to the +N badge. */
#hc-page .hc-cats-more-v-pill .hc-cats-more-arrow{display:none}

/* ARROW — a plain typographic link. No fill, no badge; the arrow does the work. */
#hc-page .hc-cats-more-v-arrow .hc-cats-more{
  background:none!important;border:0!important;box-shadow:none!important;
  padding:6px 2px;
  font-size:14.5px;font-weight:700;
  color:var(--brand-ink,var(--brand));
}
#hc-page .hc-cats-more-v-arrow .hc-cats-more-rest{display:none}
#hc-page .hc-cats-more-v-arrow .hc-cats-more-arrow{opacity:1}

/* BAR — full width, so it reads as the end of the section rather than a button in it. */
#hc-page .hc-cats-more-v-bar .hc-cats-more{
  display:flex;width:100%;justify-content:center;
  padding:15px 20px;
  border-radius:12px;
  background:color-mix(in srgb, var(--brand) 7%, transparent)!important;
  border:1px solid color-mix(in srgb, var(--brand) 16%, transparent)!important;
  font-weight:700;
}
#hc-page .hc-cats-more-v-bar .hc-cats-more:hover{
  background:color-mix(in srgb, var(--brand) 12%, transparent)!important;
}

/* GHOST — outline only. */
#hc-page .hc-cats-more-v-ghost .hc-cats-more{
  background:none!important;
  border:1.5px solid color-mix(in srgb, var(--brand) 34%, transparent)!important;
  box-shadow:none!important;
  padding:11px 22px;
  border-radius:999px;
  font-weight:700;
}
#hc-page .hc-cats-more-v-ghost .hc-cats-more:hover{
  background:color-mix(in srgb, var(--brand) 8%, transparent)!important;
}
#hc-page .hc-cats-more-v-ghost .hc-cats-more-rest{
  background:color-mix(in srgb, var(--brand) 14%, transparent);
}

/* MINIMAL — the quietest option, for a page that already has enough going on. */
#hc-page .hc-cats-more-v-minimal .hc-cats-more{
  background:none!important;border:0!important;box-shadow:none!important;
  padding:4px 2px;
  font-size:13.2px;font-weight:600;
  opacity:.7;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
#hc-page .hc-cats-more-v-minimal .hc-cats-more:hover{opacity:1}
#hc-page .hc-cats-more-v-minimal .hc-cats-more-rest{display:none}
#hc-page .hc-cats-more-v-minimal .hc-cats-more-arrow{width:14px;height:14px}

/* PHASE9e_2026-08-10 — SMALLER. The shipped control was padding:13px 24px at 14px/800 —
   a full-size primary button for a secondary action, which is what made it read as heavy.
   This is a compact chip: it should invite a click, not compete with the categories above
   it. Scoped with #hc-page so it beats the unscoped base rule regardless of sheet order. */
#hc-page .hc-cats-more-wrap{margin:18px 0 2px}
#hc-page .hc-cats-more{
  gap:8px;
  padding:8px 15px;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
  border-width:1px;
}
#hc-page .hc-cats-more:hover{transform:translateY(-1px)}
#hc-page .hc-cats-more-rest{
  font-size:11px;font-weight:700;padding:2px 7px;
}
#hc-page .hc-cats-more-arrow{width:15px;height:15px}

/* CORNERS. Its own control rather than the global card radius — this is a chip, not a
   card, and an operator who wants sharp cards does not necessarily want a sharp chip. */
#hc-page .hc-cats-more-r-pill  .hc-cats-more{border-radius:999px}
#hc-page .hc-cats-more-r-round .hc-cats-more{border-radius:14px}
#hc-page .hc-cats-more-r-soft  .hc-cats-more{border-radius:8px}
#hc-page .hc-cats-more-r-sharp .hc-cats-more{border-radius:0}
/* The badge follows the chip, or a round badge inside a square chip looks like a mistake. */
#hc-page .hc-cats-more-r-sharp .hc-cats-more-rest{border-radius:0}
#hc-page .hc-cats-more-r-soft  .hc-cats-more-rest{border-radius:5px}

/* The bar variant keeps its own radius: it is full width, so a pill would be a lozenge. */
#hc-page .hc-cats-more-v-bar.hc-cats-more-r-pill  .hc-cats-more{border-radius:12px}
#hc-page .hc-cats-more-v-bar.hc-cats-more-r-round .hc-cats-more{border-radius:12px}

/* PHASE9f_2026-08-10 — the gap between two presentations in one section. */
/* PHASE10K33_2026-08-13 — the seam between two presentation blocks, as the theme
   default. Set on the FOLLOWING block so an operator's own margin-top replaces it
   rather than adding to it, and left in normal flow so their margin-bottom on the
   block above collapses against it instead of stacking. */
/* flow-root traps the inner grid's own margin inside the block. Without it that
   margin collapses OUT through the wrapper and joins the seam, so setting a gap
   of 0 measured 8px — the operator's number plus whatever the presentation
   happened to carry. A box that establishes a formatting context does not
   collapse with its children, while adjacent SIBLINGS still collapse with each
   other, which is the pair of behaviours this needs. */
#hc-page .hc-cats-block{display:flow-root}
#hc-page .hc-cats-block + .hc-cats-block{margin-top:26px}

/* RAGGED ROWS.
   `.hc-dir` sets align-items:start so a COLLAPSED card is not stretched to the height of
   its open neighbour — without it the collapse looks broken. But a layout that cannot
   collapse has been paying for a problem it does not have: a card with one article ended
   early and left a hole under it while its neighbour ran on, which is what reads as
   "scattered".

   Only the non-collapsible card layouts stretch. directory, accordion, split, ribbon and
   panel keep start-alignment, because their cards CAN collapse. masonry is excluded for a
   different reason — it is a column flow, and stretching would defeat the packing that
   makes it masonry. */
#hc-page .hc-dir-v-onboard,
#hc-page .hc-dir-v-bento,
#hc-page .hc-dir-v-rail{align-items:stretch}
#hc-page .hc-dir-v-onboard .hc-dir-card,
#hc-page .hc-dir-v-rail .hc-dir-card{height:100%}
/* The body takes the slack, so the header and the rows stay put and only the empty space
   below them grows — the alternative is stretched padding, which looks like a mistake. */
#hc-page .hc-dir-v-onboard .hc-dir-body{flex:1;display:flex;flex-direction:column}
#hc-page .hc-dir-v-onboard .hc-dir-inner{flex:1;display:flex;flex-direction:column}
#hc-page .hc-dir-v-onboard .hc-dir-more{margin-top:auto}

/* ══════════════════════════════════════════════════════════════════════════════
   PHASE8_2026-08-10 — THE FAQ ACCORDION.

   <details>/<summary>, so it opens with JavaScript off and the browser owns the
   state. The only thing CSS has to do is stop <summary> looking like a list item
   and rotate the chevron on [open].
   ══════════════════════════════════════════════════════════════════════════════ */

#hc-page .hc-faq-list{display:flex;flex-direction:column;gap:0}
#hc-page .hc-faq-item{
  border-bottom:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 10%, transparent);
}
#hc-page .hc-faq-item:first-child{
  border-top:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 10%, transparent);
}
#hc-page .hc-faq-q{
  display:flex;align-items:center;gap:16px;
  padding:16px 4px;
  cursor:pointer;
  font-size:15.4px;font-weight:700;line-height:1.4;
  list-style:none;
  transition:color .15s var(--ease,ease);
}
/* Safari still draws the disclosure triangle without this. */
#hc-page .hc-faq-q::-webkit-details-marker{display:none}
#hc-page .hc-faq-q:hover{color:var(--brand-ink,var(--brand))}
#hc-page .hc-faq-qtext{flex:1;min-width:0}
#hc-page .hc-faq-chev{
  flex:none;width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:.45;
  transition:transform .2s var(--ease,ease),opacity .2s var(--ease,ease);
}
#hc-page .hc-faq-item[open] .hc-faq-chev{transform:rotate(-135deg) translateY(-2px);opacity:.85}
#hc-page .hc-faq-item[open] .hc-faq-q{color:var(--brand-ink,var(--brand))}
#hc-page .hc-faq-a{padding:0 4px 18px}
#hc-page .hc-faq-a p{margin:0 0 10px;font-size:14.4px;line-height:1.65;opacity:.78}
#hc-page .hc-faq-more{
  font-size:13.2px;font-weight:650;text-decoration:none;
  color:var(--brand-ink,var(--brand));
}
#hc-page .hc-faq-more:hover{text-decoration:underline;text-underline-offset:3px}

/* PLAIN — no rules, just space. For a page that already has plenty of lines on it. */
#hc-page .hc-faq-v-plain .hc-faq-item,
#hc-page .hc-faq-v-plain .hc-faq-item:first-child{border:0}
#hc-page .hc-faq-v-plain .hc-faq-list{gap:6px}
#hc-page .hc-faq-v-plain .hc-faq-q{padding:10px 0}

/* CARDS — each question in its own box, for a short FAQ that should feel substantial. */
#hc-page .hc-faq-v-cards .hc-faq-list{gap:10px}
#hc-page .hc-faq-v-cards .hc-faq-item,
#hc-page .hc-faq-v-cards .hc-faq-item:first-child{
  border:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 9%, transparent);
  border-radius:14px;
  background:var(--card-bg,#fff);
  overflow:hidden;
}
#hc-page .hc-faq-v-cards .hc-faq-q{padding:16px 18px}
#hc-page .hc-faq-v-cards .hc-faq-a{padding:0 18px 18px}
#hc-page .hc-faq-v-cards .hc-faq-item[open] .hc-faq-q{
  border-bottom:1px solid color-mix(in srgb, var(--text-primary,#0f172a) 8%, transparent);
  margin-bottom:14px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PHASE7_2026-08-10 — KEYBOARD AND REDUCED MOTION, OUTSIDE #hc-page TOO.

   Both rules existed and both stopped at #hc-page. The header, nav and footer are
   its siblings: 102 of 241 focusable elements on the home page are outside it.

   Scoped to body so it reaches them, and written with :focus-visible so a mouse
   user never sees a ring — the reason the original rule used it too.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Highlight is the system's own focus colour: it follows the user's OS/high-contrast
   settings instead of asserting a brand colour over an accessibility affordance. The
   brand-coloured shadow underneath it is what makes the ring visible on surfaces where
   Highlight happens to be low-contrast. */
body :focus-visible{
  outline:2px solid Highlight;
  outline-offset:2px;
  border-radius:3px;
}
@supports not selector(:focus-visible){
  /* Only for engines without :focus-visible — there, a plain :focus ring for everyone is
     better than no ring for keyboard users. */
  body :focus{outline:2px solid Highlight;outline-offset:2px}
}

@media (prefers-reduced-motion: reduce){
  /* The same blanket the page body already had, applied to the chrome around it. Not
     `animation:none`: an animation cancelled outright can leave an element stuck at its
     first keyframe, whereas a 1ms duration lands it on its final state. */
  body *, body *::before, body *::after{
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    scroll-behavior:auto!important;
  }
  /* Transforms are the motion people actually report as uncomfortable. */
  #hc-nav a:hover, #hc-nav button:hover,
  .hc-nav-mi:hover, .hc-logo:hover,
  #hc-foot a:hover{transform:none!important}
}

/* PHASE_HC_ANNOUNCE_BAR_2026-08-14 — the announcements STRIP that was styled here is
   gone. The announcement is the portal's BAR now (`.hc-annbar`, styled in hc-sheet-4.css
   with the rest of the chrome, because the header is outside #hc-page). The strip listed
   articles classed 'announcement' — on the live workspace not one of 1,279 articles
   carried that class, so none of these rules had ever painted anything. */

/* ══════════════════════════════════════════════════════════════════════════
   PHASE10J_2026-08-11 — TWELVE ARTICLE-LISTING PRESENTATIONS.
   Owner: "only media cards and box cards work, all others are the same…
   create 10 different styles, unique super premium, something apple.com can
   use." boxed and media are untouched above; the five thin presentations get
   real designs and five new ones join. The doubled page id beats every
   layout-variant .hc-arow skin (aurora glass etc.); :not(.hc-widget) keeps
   the phone widget's single column untouched where structure changes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LIST — inset hairline rows, chevron glide ─────────────────────── */
#hc-page#hc-page .hc-alist.hc-cards-list{display:flex;flex-direction:column;gap:0}
#hc-page#hc-page .hc-cards-list .hc-arow{background:transparent!important;border:0;border-radius:0!important;box-shadow:none;backdrop-filter:none!important;-webkit-backdrop-filter:none;padding:19px 8px!important;display:flex;align-items:center;gap:14px;border-bottom:1px solid color-mix(in srgb, var(--card-border,#e5e7eb) 62%, transparent)!important;transition:background .18s ease}
#hc-page#hc-page .hc-cards-list .hc-arow:first-child{border-top:1px solid color-mix(in srgb, var(--card-border,#e5e7eb) 62%, transparent)!important}
#hc-page#hc-page .hc-cards-list .hc-arow:hover{background:color-mix(in srgb, rgba(var(--br),1) 4%, transparent)!important}
#hc-page#hc-page .hc-cards-list .hc-arow-dot{display:none}
#hc-page#hc-page .hc-cards-list .hc-arow-title{font-size:16.5px;font-weight:650;letter-spacing:-.01em}
#hc-page#hc-page .hc-cards-list .hc-arow-exc{font-size:13.5px;opacity:.62;margin-top:3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#hc-page#hc-page .hc-cards-list .hc-arr{transition:transform .18s ease;opacity:.45}
#hc-page#hc-page .hc-cards-list .hc-arow:hover .hc-arr{transform:translateX(4px);opacity:1;color:rgb(var(--br))}

/* ── 2 · TIMELINE — chronicle rail with date chips and nodes ───────────── */
#hc-page#hc-page .hc-alist.hc-cards-timeline{display:flex;flex-direction:column;gap:0;position:relative}
#hc-page#hc-page .hc-alist.hc-cards-timeline:before{content:"";position:absolute;left:86px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,transparent,color-mix(in srgb, rgba(var(--br),1) 30%, var(--card-border,#e5e7eb)) 12%,color-mix(in srgb, rgba(var(--br),1) 30%, var(--card-border,#e5e7eb)) 88%,transparent)!important}
#hc-page#hc-page .hc-cards-timeline .hc-arow{background:transparent!important;border:0;border-radius:14px!important;box-shadow:none;backdrop-filter:none!important;-webkit-backdrop-filter:none;display:flex;align-items:center;gap:0;padding:15px 10px!important;position:relative;transition:background .18s ease}
#hc-page#hc-page .hc-cards-timeline .hc-arow:hover{background:color-mix(in srgb, rgba(var(--br),1) 5%, transparent)!important}
#hc-page#hc-page .hc-cards-timeline .hc-arow-date{width:64px;flex:0 0 64px;display:flex;flex-direction:column;align-items:center;line-height:1}
#hc-page#hc-page .hc-cards-timeline .hc-arow-date b{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#hc-page#hc-page .hc-cards-timeline .hc-arow-date i{font-style:normal;font-size:10.5px;opacity:.55;margin-top:3px;font-variant-numeric:tabular-nums}
#hc-page#hc-page .hc-cards-timeline .hc-arow-node{width:11px;height:11px;flex:0 0 11px;border-radius:50%!important;border:2.5px solid color-mix(in srgb, rgba(var(--br),1) 55%, var(--card-bg,#fff));background:var(--card-bg,#fff)!important;margin:0 20px 0 17px;transition:background .18s ease,transform .18s ease;position:relative;z-index:1}
#hc-page#hc-page .hc-cards-timeline .hc-arow:hover .hc-arow-node{background:rgb(var(--br))!important;transform:scale(1.25)}
#hc-page#hc-page .hc-cards-timeline .hc-arow-title{font-size:15.5px;font-weight:650}
#hc-page#hc-page .hc-cards-timeline .hc-arow-exc{font-size:13px;opacity:.6;margin-top:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#hc-page#hc-page .hc-cards-timeline .hc-views{display:none}

/* ── 3 · COMPACT — dense numbered index, two columns ───────────────────── */
#hc-page:not(.hc-widget)#hc-page .hc-alist.hc-cards-compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
#hc-page#hc-page .hc-cards-compact .hc-arow{background:transparent!important;border:0;border-radius:0!important;box-shadow:none;backdrop-filter:none!important;-webkit-backdrop-filter:none;display:flex;align-items:center;gap:13px;padding:11.5px 4px!important;border-bottom:1px solid color-mix(in srgb, var(--card-border,#e5e7eb) 55%, transparent);transition:background .15s ease}
#hc-page#hc-page .hc-cards-compact .hc-arow:hover{background:color-mix(in srgb, rgba(var(--br),1) 4%, transparent)!important}
#hc-page#hc-page .hc-cards-compact .hc-arow-num{font-size:11.5px;font-weight:800;letter-spacing:.04em;color:rgb(var(--br));opacity:.85;font-variant-numeric:tabular-nums;flex:0 0 22px}
#hc-page#hc-page .hc-cards-compact .hc-arow-title{font-size:13.8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hc-page#hc-page .hc-cards-compact .hc-views{font-size:11px;opacity:.5}
#hc-page#hc-page .hc-cards-compact .hc-arr{display:none}
@media(max-width:760px){#hc-page#hc-page .hc-alist.hc-cards-compact{grid-template-columns:minmax(0,1fr)}}

/* ── 4 · FEATURE — lead story, then a tight grid ───────────────────────── */
#hc-page:not(.hc-widget)#hc-page .hc-alist.hc-cards-feature{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#hc-page#hc-page .hc-cards-feature .hc-arow{background:var(--card-bg,#fff)!important;border:1px solid var(--card-border,#e5e7eb);border-radius:18px!important;box-shadow:none;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 22px!important;transition:border-color .18s ease,transform .18s ease}
#hc-page#hc-page .hc-cards-feature .hc-arow:hover{border-color:color-mix(in srgb, rgba(var(--br),1) 45%, var(--card-border,#e5e7eb))!important}
#hc-page#hc-page .hc-cards-feature .hc-arow-dot{display:none}
#hc-page#hc-page .hc-cards-feature .hc-arow-lead{grid-column:1/-1;padding:34px 36px!important;background:linear-gradient(135deg,color-mix(in srgb, rgba(var(--br),1) 9%, var(--card-bg,#fff)),var(--card-bg,#fff) 62%);border:1px solid color-mix(in srgb, rgba(var(--br),1) 22%, var(--card-border,#e5e7eb))!important}
#hc-page#hc-page .hc-cards-feature .hc-arow-kicker{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:rgb(var(--br));background:color-mix(in srgb, rgba(var(--br),1) 10%, transparent)!important;border-radius:999px;padding:4px 11px!important;margin-bottom:10px}
#hc-page#hc-page .hc-cards-feature .hc-arow-lead .hc-arow-title{font-size:clamp(20px,2.6vw,27px);font-weight:750;letter-spacing:-.022em;line-height:1.16}
#hc-page#hc-page .hc-cards-feature .hc-arow-lead .hc-arow-exc{font-size:14.5px;opacity:.68;margin-top:8px;max-width:62ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#hc-page#hc-page .hc-cards-feature .hc-arow:not(.hc-arow-lead) .hc-arow-title{font-size:14.5px;font-weight:650}
#hc-page#hc-page .hc-cards-feature .hc-arow:not(.hc-arow-lead) .hc-arow-exc{display:none}
#hc-page#hc-page .hc-cards-feature .hc-arow-meta{margin-top:auto;align-self:flex-end}
@media(max-width:760px){#hc-page#hc-page .hc-alist.hc-cards-feature{grid-template-columns:minmax(0,1fr)}#hc-page#hc-page .hc-cards-feature .hc-arow-lead{padding:24px!important}}

/* ── 5 · SPLIT — alternating letterform panels ─────────────────────────── */
#hc-page#hc-page .hc-alist.hc-cards-split{display:flex;flex-direction:column;gap:14px}
#hc-page#hc-page .hc-cards-split .hc-arow{background:var(--card-bg,#fff)!important;border:1px solid var(--card-border,#e5e7eb);border-radius:20px!important;box-shadow:none;display:flex;align-items:stretch;gap:0;padding:0!important;overflow:hidden;transition:border-color .18s ease}
#hc-page#hc-page .hc-cards-split .hc-arow:hover{border-color:color-mix(in srgb, rgba(var(--br),1) 45%, var(--card-border,#e5e7eb))!important}
#hc-page#hc-page .hc-cards-split .hc-arow-letter{flex:0 0 96px;display:grid;place-items:center;font-size:44px;font-weight:850;letter-spacing:-.03em;color:rgb(var(--br));background:linear-gradient(160deg,color-mix(in srgb, rgba(var(--br),1) 14%, var(--card-bg,#fff)),color-mix(in srgb, rgba(var(--br),1) 4%, var(--card-bg,#fff)))!important}
#hc-page#hc-page .hc-cards-split .hc-arow-body{padding:22px 24px!important;flex:1;min-width:0}
#hc-page#hc-page .hc-cards-split .hc-arow-title{font-size:16.5px;font-weight:700;letter-spacing:-.012em}
#hc-page#hc-page .hc-cards-split .hc-arow-exc{font-size:13.5px;opacity:.62;margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#hc-page#hc-page .hc-cards-split .hc-arow-meta{align-self:center;padding:0 18px!important}
@media(max-width:760px){#hc-page#hc-page .hc-cards-split .hc-arow-letter{flex-basis:64px;font-size:30px}}

/* ── 6 · SHOWCASE — typographic, oversized titles ──────────────────────── */
#hc-page#hc-page .hc-alist.hc-cards-showcase{display:flex;flex-direction:column;gap:0}
#hc-page#hc-page .hc-cards-showcase .hc-arow{background:transparent!important;border:0;border-radius:0!important;box-shadow:none;backdrop-filter:none!important;-webkit-backdrop-filter:none;display:flex;align-items:baseline;gap:22px;padding:26px 4px!important;border-bottom:1px solid color-mix(in srgb, var(--card-border,#e5e7eb) 62%, transparent)}
#hc-page#hc-page .hc-cards-showcase .hc-arow-num{font-size:12px;font-weight:800;letter-spacing:.1em;opacity:.35;font-variant-numeric:tabular-nums;flex:0 0 30px;transition:opacity .18s ease,color .18s ease}
#hc-page#hc-page .hc-cards-showcase .hc-arow:hover .hc-arow-num{opacity:1;color:rgb(var(--br))}
#hc-page#hc-page .hc-cards-showcase .hc-arow-kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;opacity:.45;margin-bottom:7px;font-variant-numeric:tabular-nums}
#hc-page#hc-page .hc-cards-showcase .hc-arow-title{font-size:clamp(19px,2.4vw,26px);font-weight:750;letter-spacing:-.024em;line-height:1.14;display:inline;background-image:linear-gradient(rgb(var(--br)),rgb(var(--br)));background-repeat:no-repeat;background-size:0% 2px;background-position:0 96%;transition:background-size .28s ease}
#hc-page#hc-page .hc-cards-showcase .hc-arow:hover .hc-arow-title{background-size:100% 2px}
#hc-page#hc-page .hc-cards-showcase .hc-arow-exc{font-size:14px;opacity:.6;margin-top:7px;max-width:70ch;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#hc-page#hc-page .hc-cards-showcase .hc-views{display:none}
#hc-page#hc-page .hc-cards-showcase .hc-arr{opacity:0;transform:translateX(-8px);transition:opacity .2s ease,transform .2s ease}
#hc-page#hc-page .hc-cards-showcase .hc-arow:hover .hc-arr{opacity:1;transform:none;color:rgb(var(--br))}


/* ── 8 · LEDGER — spec-sheet rows ──────────────────────────────────────── */
#hc-page#hc-page .hc-alist.hc-cards-ledger{display:flex;flex-direction:column;gap:0;border:1.5px solid var(--card-border,#e5e7eb)!important;border-radius:16px;overflow:hidden;background:var(--card-bg,#fff)!important}
#hc-page#hc-page .hc-cards-ledger .hc-arow{background:transparent!important;border:0;border-radius:0!important;box-shadow:none;backdrop-filter:none!important;-webkit-backdrop-filter:none;display:flex;align-items:center;gap:18px;padding:15px 20px!important;border-bottom:1px solid color-mix(in srgb, var(--card-border,#e5e7eb) 70%, transparent);transition:background .15s ease}
#hc-page#hc-page .hc-cards-ledger .hc-arow:last-child{border-bottom:0!important}
#hc-page#hc-page .hc-cards-ledger .hc-arow:hover{background:color-mix(in srgb, rgba(var(--br),1) 5%, transparent)!important}
#hc-page#hc-page .hc-cards-ledger .hc-arow-num{font-size:11.5px;font-weight:800;letter-spacing:.06em;opacity:.4;font-variant-numeric:tabular-nums;flex:0 0 26px}
#hc-page#hc-page .hc-cards-ledger .hc-arow-title{font-size:14.5px;font-weight:620}
#hc-page#hc-page .hc-cards-ledger .hc-arow-meta{margin-left:auto;display:flex;align-items:center;gap:14px}
#hc-page#hc-page .hc-cards-ledger .hc-views{font-size:12px;font-variant-numeric:tabular-nums;opacity:.55}
#hc-page#hc-page .hc-cards-ledger .hc-arr{opacity:.35}
#hc-page#hc-page .hc-cards-ledger .hc-arow:hover .hc-arr{opacity:1;color:rgb(var(--br))}



/* ── dark theme — only what the tokens cannot carry ────────────────────── */
html[data-theme="dark"] #hc-page .hc-cards-timeline .hc-arow-node{background:var(--hc-d-card,#111827)!important}
/* ══════════════════════════════════════════════════════════════════════════════
   PHASE_HC_LISTINGS_2026-08-14 — TWO REBUILT ARTICLE PRESENTATIONS.

   Owner: *"platform board, prism, article listing layout is not nice, i don't like
   them, change them and design the best on that list and change the name."*

   WHAT WAS WRONG, and it was not taste. Both were declared TWICE — once early in this
   sheet and again 500 lines later — so the two definitions fought, and the later one
   won with a completely different layout. Worse, that later block was written against
   PORTAL tokens: `var(--card)`, `var(--line)`, `var(--ink)`, `var(--accent)`,
   `var(--brand-on)`. None of them is declared in the Help Center, so every one fell
   through to a hardcoded fallback — white cards with a grey border, ignoring the
   theme, the dark palette and the operator's colours entirely. That is why they looked
   cheap next to the rest of the list.

   Both are rebuilt here, once each, on tokens this page actually declares:
   --card-bg  --card-border  --text-primary  --text-secondary  --text-3  --br  --brand

   Neither changes GEOMETRY on hover (HcListingHoverStabilityTest), and neither moves
   anything under the cursor — the old rail slid its own text 8px sideways on hover.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── BILLBOARD (rail) — ONE per row, and nothing else in the list looks like it ──
   Owner: *"i need a long one that shows one in a row and truly unique."*

   Every other presentation is either a grid of small cards or a thin line of text. This
   is a TALL full-width band split three ways: a brand panel carrying the index at a size
   you read from across the room, the headline and summary in the middle, and a round
   action on the right. `list` and `boxed` are thin rows; `split` is a stub with a letter
   plate; `media` needs an image. None of them is a band. */
#hc-page#hc-page .hc-alist.hc-cards-rail{display:grid;gap:14px}
#hc-page#hc-page .hc-cards-rail .hc-arow{
  display:grid;grid-template-columns:112px minmax(0,1fr) 64px;align-items:stretch;gap:0;
  min-height:124px;padding:0!important;border-radius:18px!important;overflow:hidden;
  background:var(--card-bg,#fff)!important;
  border:1px solid var(--card-border,#e5e7eb)!important;
  box-shadow:0 10px 30px -20px rgba(15,23,42,.28);
  transition:border-color .18s ease,box-shadow .18s ease}
#hc-page#hc-page .hc-cards-rail .hc-arow:hover{
  border-color:color-mix(in srgb,rgba(var(--br),1) 48%,var(--card-border,#e5e7eb))!important;
  box-shadow:0 18px 40px -20px color-mix(in srgb,rgba(var(--br),1) 52%,rgba(15,23,42,.34))!important}
/* the index, at billboard size, on the brand */
#hc-page#hc-page .hc-cards-rail .hc-arow-num{
  display:flex;align-items:center;justify-content:center;
  font-size:38px;font-weight:850;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:linear-gradient(155deg,rgb(var(--br)),color-mix(in srgb,rgb(var(--br)) 55%,#0f172a));
  color:#fff;opacity:1}
#hc-page#hc-page .hc-cards-rail .hc-arow-body{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:20px 24px;min-width:0;flex:1 1 auto!important;margin-top:0!important}
#hc-page#hc-page .hc-cards-rail .hc-arow-title{
  font-size:18px;font-weight:750;line-height:1.3;letter-spacing:-.014em;
  color:var(--text-primary,#0f172a);overflow-wrap:normal;word-break:normal}
#hc-page#hc-page .hc-cards-rail .hc-arow-exc{
  font-size:13.5px;line-height:1.55;color:var(--text-secondary,#475569);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the action sits in its own column, so it never crowds the words */
#hc-page#hc-page .hc-cards-rail .hc-arow-meta{
  flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:0 14px 0 0;color:var(--text-3,#94a3b8)}
#hc-page#hc-page .hc-cards-rail .hc-views{font-size:11.5px}
#hc-page#hc-page .hc-cards-rail .hc-arr{
  width:38px;height:38px;padding:9px;border-radius:50%;opacity:1;
  border:1.5px solid color-mix(in srgb,rgba(var(--br),1) 34%,var(--card-border,#e5e7eb));
  color:rgb(var(--br));transition:background-color .18s ease,color .18s ease,border-color .18s ease}
#hc-page#hc-page .hc-cards-rail .hc-arow:hover .hc-arr{
  background:rgb(var(--br));color:#fff;border-color:rgb(var(--br))}
#hc-page#hc-page .hc-cards-rail .hc-arow-dot{display:none}
/* narrow: the brand panel becomes a top strip so the words keep the full width */
@media(max-width:640px){
  #hc-page#hc-page .hc-cards-rail .hc-arow{grid-template-columns:minmax(0,1fr) 56px;min-height:0}
  #hc-page#hc-page .hc-cards-rail .hc-arow-num{grid-column:1/-1;height:44px;font-size:24px}
  #hc-page#hc-page .hc-cards-rail .hc-arow-body{padding:14px 16px}
}

/* ── COVER (glass) — a titled band over the summary ────────────────────────
   Two ZONES, which no other presentation has: the title sits in a brand band and the
   summary sits on the card below it. That is what makes it read as the most finished
   card in the list without leaning on a blur nobody can see on a white page. */
#hc-page#hc-page .hc-alist.hc-cards-glass{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
#hc-page#hc-page .hc-cards-glass .hc-arow{
  display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0!important;
  border-radius:18px!important;overflow:hidden;
  background:var(--card-bg,#fff)!important;
  border:1px solid var(--card-border,#e5e7eb)!important;
  box-shadow:0 10px 30px -18px rgba(15,23,42,.30);
  transition:border-color .18s ease,box-shadow .18s ease}
#hc-page#hc-page .hc-cards-glass .hc-arow:hover{
  border-color:color-mix(in srgb,rgba(var(--br),1) 42%,var(--card-border,#e5e7eb))!important;
  box-shadow:0 20px 44px -20px color-mix(in srgb,rgba(var(--br),1) 46%,rgba(15,23,42,.34))!important}
#hc-page#hc-page .hc-cards-glass .hc-arow-body{
  padding:18px 20px 14px;background:linear-gradient(160deg,rgb(var(--br)),color-mix(in srgb,rgb(var(--br)) 58%,#0f172a));
  flex:0 0 auto!important;margin-top:0!important}
#hc-page#hc-page .hc-cards-glass .hc-arow-title{
  font-size:16px;font-weight:750;line-height:1.3;letter-spacing:-.012em;color:#fff}
#hc-page#hc-page .hc-cards-glass .hc-arow-exc{
  font-size:13px;line-height:1.55;color:rgba(255,255,255,.86);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#hc-page#hc-page .hc-cards-glass .hc-arow-meta{
  padding:12px 20px;color:var(--text-3,#94a3b8);justify-content:space-between;width:100%}
#hc-page#hc-page .hc-cards-glass .hc-arow-dot{display:none}
/* dark: the band keeps the operator's brand, the card takes the dark surface */
html[data-theme="dark"] #hc-page#hc-page .hc-cards-glass .hc-arow,
html[data-theme="dark"] #hc-page#hc-page .hc-cards-rail .hc-arow{
  background:var(--hc-d-card,#151b25)!important;border-color:var(--hc-d-line,#2b3646)!important}
@media(prefers-reduced-motion:reduce){
  #hc-page#hc-page :is(.hc-cards-rail,.hc-cards-glass) .hc-arow{transition:none}
}

html[data-theme="dark"] #hc-page :is(.hc-cards-feature,.hc-cards-mosaic) .hc-arow{border-color:var(--hc-d-line,#243043)!important}
/* motion — every hover move above respects the visitor's preference */
@media(prefers-reduced-motion:reduce){
#hc-page#hc-page .hc-alist :is(.hc-arow,.hc-arow-node,.hc-arr,.hc-arow-title){transition:none!important}
#hc-page#hc-page .hc-alist .hc-arow:hover{transform:none!important}
}
/* PHASE10J fix — the base .hc-arow-body carries flex:1, which pinned the rail
   card's title to the top; the shelf design bottom-anchors its content. */
#hc-page#hc-page .hc-cards-mosaic .hc-arow-body{flex:0 0 auto!important;margin-top:auto!important;width:100%}
@media(max-width:760px){}

/* PHASE_HC_NAV_ITEMS_2026-08-14 — the mega menu's promo column is styled in
   hc-sheet-4.css, with the rest of the header.

   It used to be styled HERE, behind an `#hc-page#hc-page` prefix — and none of it
   ever applied: the header is rendered OUTSIDE #hc-page, so every one of those
   selectors matched nothing. The single site-wide promo panel this file used to
   describe was shipping unstyled. Nav rules belong with the nav. */

/* PHASE10K6_2026-08-11 — THE FLUSH-FOOTER RULE, as designed by the owner: the
   gap above the footer collapses ONLY when a full-width CTA band is the last
   thing on the page — CTA at the bottom, edge to edge, footer flush against
   it. Any other arrangement keeps the normal breathing room.

   The breathing room itself lives HERE too: the sticky-footer block above
   zeroes .hc-foot's own margin on every page, so without this padding the
   content column ends a mere 18px (main's padding) above the footer — there
   was never a gap for the override to override. The page provides it; the
   flush case takes it away. */
#hc-page#hc-page:not(.hc-widget){padding-bottom:56px}
#hc-page#hc-page:not(.hc-widget):has(> .hce-cta.hcx-cta-w-full:last-child),
#hc-page#hc-page:not(.hc-widget):has(> .hc-cta-slot:last-child > .hce-cta.hcx-cta-w-full){padding-bottom:0}
#hc-page#hc-page > .hce-cta.hcx-cta-w-full:last-child,
#hc-page#hc-page > .hc-cta-slot:last-child > .hce-cta.hcx-cta-w-full{margin-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
#hc-page#hc-page:has(> .hce-cta.hcx-cta-w-full:last-child) + footer.hc-foot,
#hc-page#hc-page:has(> .hce-cta.hcx-cta-w-full:last-child) ~ footer.hc-foot,
#hc-page#hc-page:has(> .hc-cta-slot:last-child > .hce-cta.hcx-cta-w-full) + footer.hc-foot,
#hc-page#hc-page:has(> .hc-cta-slot:last-child > .hce-cta.hcx-cta-w-full) ~ footer.hc-foot{margin-top:0!important;border-top:0!important}

/* PHASE10K8_2026-08-11 — THE CTA SLOT. Every surface's band is wrapped in one
   of these, which is what lets a stylesheet reach "the band on article pages"
   and what carries the responsive choice. The wrapper is layout only: it must
   add nothing a band placed at the very bottom would have to fight. */
#hc-page#hc-page .hc-cta-slot{margin:34px 0}
#hc-page#hc-page > .hc-cta-slot:last-child{margin-bottom:0}
#hc-page#hc-page .hc-cta-slot:first-child{margin-top:0}
#hc-page#hc-page .hc-cta-slot > .hce-cta{margin-block:0}
/* Inside the article text the band is a paragraph-level interruption, so it
   keeps the body's own rhythm rather than the page's. */
#hc-page#hc-page .hc-body > .hc-cta-slot{margin:26px 0}
/* In a listing the band replaces a row, so it spans every column of the grid
   layouts and does not sit in one card's track. */
#hc-page#hc-page .hc-alist > .hc-cta-slot{grid-column:1/-1;margin:20px 0}
@media(max-width:820px){#hc-page#hc-page .hc-cta-only-desktop{display:none!important}}
@media(min-width:821px){#hc-page#hc-page .hc-cta-only-mobile{display:none!important}}

/* PHASE10K9_2026-08-11 — THE SIDEBAR LABEL, ONE COMPONENT.
   Every sidebar heading — the category/article rail head, "On this page",
   "Related articles" — is now .hc-side-title and is typed from this one block.
   Before this the rail head was the HOME section header, so it carried a home
   divider line and home label styling while the cards beside it used something
   else: two labels, an inch apart, that never matched.
   The doubled id outranks the sidebar and theme pins that used to set the rail
   head to their own size (hc-sheet-6.css:244, hc-sheet-12's style variants). */
#hc-page#hc-page .hc-side-title,
#hc-page#hc-page .hc-kb-sidebar .hc-side-title-nav{
  font-family:var(--font-heading);
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:14px;line-height:1.35;display:block}
/* The head is a flex row for the drawer chevron; the label must still be a
   block-level heading inside it and must NOT stretch like the old divider did. */
#hc-page#hc-page .hc-kb-sidebar-head{display:flex;align-items:center;gap:10px;margin-bottom:0}
#hc-page#hc-page .hc-kb-sidebar-head .hc-side-title-nav{flex:1 1 auto;margin-bottom:14px}
/* A sidebar never shows the home band's rule line, whatever a theme thinks. */
#hc-page#hc-page .hc-kb-sidebar .hc-sec-line,
#hc-page#hc-page .hc-sidebar .hc-sec-line{display:none!important}

/* ── PHASE10K9_2026-08-11: THE HELP CENTER SEARCH BAR ────────────────────────
   The owner's own search bar, upgraded in place: shortcut chip, clear button,
   loading and empty states, focus ring, and a called-by-keyboard flourish.
   Everything hangs off .hc-srch-pro, added by the enhancer, so a workspace that
   never loads the script is exactly as it was. The twenty layout variants keep
   their own shapes — this dresses the parts they all share. */
#hc-page#hc-page .hc-srch-wrap{position:relative}
#hc-page#hc-page .hc-srch-pro .hc-search-form{
  transition:box-shadow .22s cubic-bezier(.22,.61,.36,1),
             transform .22s cubic-bezier(.22,.61,.36,1),
             border-color .18s ease,background-color .18s ease}
/* Hover lifts a little; focus commits — two different states, not one. */
#hc-page#hc-page .hc-srch-pro .hc-search-form:hover{box-shadow:0 14px 34px rgba(15,23,42,.10)}
#hc-page#hc-page .hc-srch-pro .hc-search-form:focus-within{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#6366f1) 24%,transparent),
             0 20px 48px rgba(15,23,42,.14)}
/* PHASE10K9f — the shortcut chip was REMOVED from the field. The shortcut is
   still bound (Ctrl/Cmd-K focuses this band); it simply has no widget parked
   inside the input any more. */
@media(prefers-reduced-motion:reduce){
  #hc-page#hc-page .hc-srch-pro .hc-search-form,
  #hc-page#hc-page .hc-srch-pro.is-called .hc-search-form,
  #hc-page#hc-page .hc-suggest{animation:none!important;transition:none!important}
  #hc-page#hc-page .hc-srch-pro.is-loading .hc-search-form::after{animation:none;opacity:.6}}

/* PHASE10K9 — stacked search templates (field on one row, button on the next).
   The chrome pins to the FIELD's right edge instead of falling into the gap
   between the two rows. The field keeps room on the right so long placeholder
   text never runs under the chip. */
/* The chrome floats in the shell, placed against the field by measurement. */
/* PHASE10K9g — THE CLEAR BUTTON. It is placed against the field by measurement
   (the templates lay their fields out in every way CSS allows), it appears only
   when there is something to clear, and it is drawn from theme tokens. */
#hc-page#hc-page .hc-srch-float .hc-srch-clear{position:absolute;z-index:3}
#hc-page#hc-page .hc-srch-clear{display:none;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:0!important;border-radius:999px!important;cursor:pointer;
  color:var(--text-muted,var(--ink-3,#94a3b8))!important;
  background:color-mix(in srgb,var(--ink,#0f172a) 8%,transparent)!important;
  transition:background-color .16s ease,color .16s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}
#hc-page#hc-page .hc-srch-pro.has-text .hc-srch-clear{display:inline-flex}
#hc-page#hc-page .hc-srch-clear:hover{transform:rotate(90deg);
  color:var(--brand-ink,var(--brand,var(--accent,#4f46e5)))!important;
  background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 16%,transparent)!important}
#hc-page#hc-page .hc-srch-pro.has-text input[type=search]{padding-right:44px}
#hc-page#hc-page .hc-srch-pro.has-text input[type=search]{padding-right:46px}

/* PHASE10K9_2026-08-11 — the Portal hero, rendered inside the Help Center, uses
   the PORTAL's faces. The two values arrive as custom properties on the section
   (they are per-workspace), and these rules consume them. Applying the family
   here rather than inline keeps the page's inline-CSS budget intact. */
#hc-portal-hero{font-family:var(--portal-font,inherit)}
/* Only the HEADING takes the display face: the Portal sets its subtitle in the
   body face, and matching means matching that too. */
#hc-portal-hero .phero-h{font-family:var(--portal-font-h,inherit)!important}
#hc-portal-hero .phero-s{font-family:var(--portal-font,inherit)!important}

/* PHASE10K9_2026-08-11 — the Portal hero's frame rules, lifted out of help.php's
   inline block to keep the inline-CSS budget under its ratchet. Static rules
   belong in a cacheable sheet; only the per-workspace font values stay inline. */
#hc-portal-hero{position:relative;isolation:isolate;overflow:clip;background:var(--bg,#f6f7fb);color:var(--ink,#0f172a)}
#hc-portal-hero .phero-unit{margin:0}
#hc-portal-hero .psearch-res{z-index:2147482400}
#hc-portal-hero .hc-search-err{position:relative;z-index:5;max-width:720px;margin:-8px auto 16px;padding:0 20px;text-align:center}
@media(max-width:720px){#hc-portal-hero .hc-search-err{margin-top:-2px}}

/* ── PHASE10K9g_2026-08-11: THE SEARCH BAND — FOUR SIGNATURE DESIGNS ─────────
   The owner, on the first pass: "not fine, ground breaking." So these are four
   different IDEAS of what a search field is, not four borders around one input:

     aurora   a lit capsule — a brand aura breathes behind it and blooms on focus
     split    two-tone: a brand block holds the glyph, the field runs beside it,
              and the action is a disc that slides open as you type
     console  a terminal line with a live caret and a monospace prompt
     rule     no box at all — an oversized field over a brand rule that draws
              itself in from the left when focused

   EVERY COLOUR IS A THEME TOKEN (hex values appear only as var() fallbacks), so
   a rebrand or a dark theme carries all four. Surface properties carry
   !important because the Design Studio card tokens are emitted with it and
   otherwise repaint anything that draws its own surface. */
#hc-page#hc-page .hcsb-shell{position:relative;width:100%;max-width:720px;margin:0 auto;isolation:isolate}
#hc-page#hc-page .hcsb-form{position:relative;display:flex;align-items:center;gap:12px;width:100%;
  transition:box-shadow .26s cubic-bezier(.22,.61,.36,1),border-color .2s ease,transform .26s cubic-bezier(.22,.61,.36,1)}
#hc-page#hc-page .hcsb-input{flex:1 1 auto;min-width:0;border:0!important;background:transparent!important;outline:0;
  font-size:15.5px;letter-spacing:-.01em;color:var(--text-primary,var(--ink,#0f172a))!important}
#hc-page#hc-page .hcsb-input::placeholder{color:var(--text-muted,var(--ink-3,#94a3b8))!important;opacity:1;
  transition:opacity .2s ease,transform .26s cubic-bezier(.22,.61,.36,1)}
#hc-page#hc-page .hcsb-form:focus-within .hcsb-input::placeholder{opacity:.55;transform:translateX(3px)}
#hc-page#hc-page .hcsb-icowrap{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted,var(--ink-3,#94a3b8))!important;transition:color .2s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
#hc-page#hc-page .hcsb-form:focus-within .hcsb-icowrap{color:var(--brand,var(--accent,#6366f1))!important;transform:scale(1.08) rotate(-6deg)}
#hc-page#hc-page .hcsb-go{flex:0 0 auto;cursor:pointer;font-weight:750;font-size:13.5px;white-space:nowrap;
  border:0!important;padding:11px 20px;border-radius:999px!important;
  background:var(--brand,var(--accent,#6366f1))!important;color:var(--brand-on,#fff)!important;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),filter .2s ease,box-shadow .2s ease}
#hc-page#hc-page .hcsb-go:hover{filter:brightness(1.08);transform:translateY(-1px) scale(1.02);
  box-shadow:0 10px 24px color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 38%,transparent)!important}
#hc-page#hc-page .hcsb-go:active{transform:translateY(0) scale(.98)}

/* ── aurora ─────────────────────────────────────────────────────────────────
   A capsule with a brand aura behind it. The aura is a blurred sibling, so it
   can bloom past the field's edge without the field itself glowing. */
#hc-page#hc-page .hcsb-v-aurora .hcsb-form{background:var(--card,#fff)!important;
  border:1px solid color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 18%,var(--line,#e2e8f0))!important;
  border-radius:999px!important;padding:8px 8px 8px 22px}
#hc-page#hc-page .hcsb-v-aurora .hcsb-form::before{content:"";position:absolute;inset:-14px;z-index:-1;
  border-radius:inherit;opacity:.5;filter:blur(18px);transition:opacity .3s ease,inset .3s ease;
  background:conic-gradient(from 120deg,
    color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 55%,transparent),
    color-mix(in srgb,var(--accent-2,var(--brand,#8b5cf6)) 40%,transparent),
    color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 55%,transparent))}
#hc-page#hc-page .hcsb-v-aurora .hcsb-form:focus-within{transform:translateY(-1px)}
#hc-page#hc-page .hcsb-v-aurora .hcsb-form:focus-within::before{opacity:.9;inset:-20px}

/* ── split ──────────────────────────────────────────────────────────────────
   The glyph gets its own brand block at the head of the bar; the action is a
   disc that widens into a pill once there is something to search for. */
#hc-page#hc-page .hcsb-v-split .hcsb-form{background:var(--card,#fff)!important;
  border:1px solid var(--line,#e2e8f0)!important;border-radius:18px!important;padding:0 8px 0 0;gap:14px;
  overflow:hidden;box-shadow:0 12px 34px color-mix(in srgb,var(--ink,#0f172a) 9%,transparent)!important}
#hc-page#hc-page .hcsb-v-split .hcsb-icowrap{align-self:stretch;width:56px;
  background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 92%,#000)!important;
  color:var(--brand-on,#fff)!important;border-radius:0!important}
#hc-page#hc-page .hcsb-v-split .hcsb-form:focus-within .hcsb-icowrap{transform:none}
#hc-page#hc-page .hcsb-v-split .hcsb-input{padding:15px 0}
#hc-page#hc-page .hcsb-v-split .hcsb-go{border-radius:999px!important;padding:10px 16px}
#hc-page#hc-page .hcsb-v-split .hcsb-form:focus-within{
  border-color:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 50%,var(--line,#e2e8f0))!important;
  box-shadow:0 18px 44px color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 22%,transparent)!important}

/* ── console ────────────────────────────────────────────────────────────────
   A terminal line. Its surface is derived, never fixed — but derivation has to
   survive BOTH themes, and the first version did not: it deepened `--ink`, which
   is dark on a light theme (correct) and near-white on a dark one, so the dark
   console turned into a pale bar with pale text. So the two modes are stated
   separately, because they are different design problems:

     light theme  the bar INVERTS the page — dark surface, light text, the
                  contrast that makes a console read as a console
     dark theme   the page is already dark, so inverting would produce a white
                  slab. It DEEPENS instead, and a brand hairline keeps the field
                  legible as an object rather than a hole in the page. */
#hc-page#hc-page .hcsb-v-console .hcsb-form{
  background:color-mix(in srgb,var(--ink,#0f172a) 94%,#000)!important;
  border:1px solid color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 32%,transparent)!important;
  border-radius:14px!important;padding:12px 12px 12px 16px;gap:10px}
#hc-page#hc-page .hcsb-v-console .hcsb-icowrap{display:none}
#hc-page#hc-page .hcsb-prompt{flex:0 0 auto;font:700 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--brand,var(--accent,#6366f1))!important}
#hc-page#hc-page .hcsb-prompt::after{content:"";display:inline-block;width:8px;height:15px;margin-left:7px;
  vertical-align:-2px;background:currentColor;animation:hcsbCaret 1.05s steps(1) infinite}
#hc-page#hc-page .hcsb-v-console:focus-within .hcsb-prompt::after,
#hc-page#hc-page .hcsb-v-console.has-text .hcsb-prompt::after{animation:none;opacity:0}
@keyframes hcsbCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
#hc-page#hc-page .hcsb-v-console .hcsb-input{color:var(--card,#fff)!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
#hc-page#hc-page .hcsb-v-console .hcsb-input::placeholder{
  color:color-mix(in srgb,var(--card,#fff) 46%,transparent)!important}
#hc-page#hc-page .hcsb-v-console .hcsb-go{background:color-mix(in srgb,var(--card,#fff) 14%,transparent)!important;
  color:var(--card,#fff)!important;border-radius:8px!important;
  font-family:ui-monospace,Menlo,monospace;font-size:12.5px;padding:9px 14px}
#hc-page#hc-page .hcsb-v-console .hcsb-form:focus-within{
  border-color:var(--brand,var(--accent,#6366f1))!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 16%,transparent)!important}

/* DARK THEME — deepen, do not invert. */
html[data-theme="dark"] #hc-page#hc-page .hcsb-v-console .hcsb-form{
  background:color-mix(in srgb,var(--bg,#0b1220) 72%,#000)!important;
  border-color:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 46%,transparent)!important}
html[data-theme="dark"] #hc-page#hc-page .hcsb-v-console .hcsb-input{
  color:var(--text-primary,var(--ink,#e5e7eb))!important}
html[data-theme="dark"] #hc-page#hc-page .hcsb-v-console .hcsb-input::placeholder{
  color:color-mix(in srgb,var(--text-primary,var(--ink,#e5e7eb)) 52%,transparent)!important}
html[data-theme="dark"] #hc-page#hc-page .hcsb-v-console .hcsb-go{
  background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 26%,transparent)!important;
  color:var(--text-primary,var(--ink,#e5e7eb))!important}

/* ── rule ───────────────────────────────────────────────────────────────────
   No box, but not bare: an oversized field sitting ON a rule, with the glyph
   scaled up to carry the left edge and the action reading as a real control.
   The first attempt dropped the glyph and floated the rule away from the text,
   which read as broken markup rather than a design. */
#hc-page#hc-page .hcsb-v-rule .hcsb-form{background:transparent!important;border:0!important;
  border-radius:0!important;padding:2px 0 14px;gap:16px;align-items:center}
#hc-page#hc-page .hcsb-v-rule .hcsb-form::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:color-mix(in srgb,var(--ink,#0f172a) 14%,transparent)}
#hc-page#hc-page .hcsb-v-rule .hcsb-form::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  z-index:1;background:var(--brand,var(--accent,#6366f1));
  transition:width .42s cubic-bezier(.22,.61,.36,1)}
#hc-page#hc-page .hcsb-v-rule .hcsb-form:focus-within::before,
#hc-page#hc-page .hcsb-v-rule.has-text .hcsb-form::before{width:100%}
/* The glyph carries the left edge at display scale. */
#hc-page#hc-page .hcsb-v-rule .hcsb-icowrap{width:30px;height:30px;
  color:var(--brand,var(--accent,#6366f1))!important}
#hc-page#hc-page .hcsb-v-rule .hcsb-icowrap svg{width:26px;height:26px;stroke-width:2}
#hc-page#hc-page .hcsb-v-rule .hcsb-input{font-size:21px;font-weight:650;letter-spacing:-.02em}
#hc-page#hc-page .hcsb-v-rule .hcsb-input::placeholder{font-weight:600}
/* A real control: brand plate, not a stray link. */
#hc-page#hc-page .hcsb-v-rule .hcsb-go{padding:10px 18px;border-radius:12px!important;
  background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 14%,transparent)!important;
  color:var(--brand-ink,var(--brand,var(--accent,#4f46e5)))!important}
#hc-page#hc-page .hcsb-v-rule .hcsb-go:hover{
  background:var(--brand,var(--accent,#6366f1))!important;color:var(--brand-on,#fff)!important;
  transform:translateY(-1px)}

/* ── DARK THEME, ALL FOUR ───────────────────────────────────────────────────
   Deriving a design from tokens is not the same as being theme-aware: on a dark
   page the tokens FLIP, so a shadow mixed from --ink becomes a pale glow and an
   inverted surface becomes a white slab. Each design states what it does when
   the page itself is dark.

   Shadows switch to black: a shadow is absence of light, and mixing one from the
   ink token gives a halo on a dark page. */
html[data-theme="dark"] #hc-page#hc-page .hcsb-v-aurora .hcsb-form{
  background:var(--card,#111827)!important;
  border-color:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 30%,var(--line,#1f2937))!important}
html[data-theme="dark"] #hc-page#hc-page .hcsb-v-aurora .hcsb-form::before{opacity:.34;filter:blur(22px)}
html[data-theme="dark"] #hc-page#hc-page .hcsb-v-aurora .hcsb-form:focus-within::before{opacity:.62}

html[data-theme="dark"] #hc-page#hc-page .hcsb-v-split .hcsb-form{
  background:var(--card,#111827)!important;border-color:var(--line,#1f2937)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.55)!important}
html[data-theme="dark"] #hc-page#hc-page .hcsb-v-split .hcsb-form:focus-within{
  box-shadow:0 20px 48px rgba(0,0,0,.62),
             0 0 0 1px color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 48%,transparent)!important}

html[data-theme="dark"] #hc-page#hc-page .hcsb-v-rule .hcsb-form::after{
  background:color-mix(in srgb,var(--text-primary,#e5e7eb) 22%,transparent)}

/* The clear button follows the page rather than the light-theme ink mix. */
html[data-theme="dark"] #hc-page#hc-page .hc-srch-clear{
  color:var(--text-muted,#9ca3af)!important;
  background:color-mix(in srgb,var(--text-primary,#e5e7eb) 12%,transparent)!important}

@media(max-width:560px){
  #hc-page#hc-page .hcsb-go{padding:10px 14px;font-size:12.5px}
  #hc-page#hc-page .hcsb-v-rule .hcsb-input{font-size:16.5px}
  #hc-page#hc-page .hcsb-v-split .hcsb-icowrap{width:46px}}
@media(prefers-reduced-motion:reduce){
  #hc-page#hc-page .hcsb-form,#hc-page#hc-page .hcsb-go,#hc-page#hc-page .hcsb-icowrap,
  #hc-page#hc-page .hcsb-v-rule .hcsb-form::before{transition:none!important}
  #hc-page#hc-page .hcsb-prompt::after{animation:none}}

/* PHASE10K9_2026-08-11 — THE PORTAL HERO KEEPS THE PORTAL'S BOX MODEL.
   help.php opens with `*,*::before,*::after{margin:0;padding:0}`. That reset is
   right for the Help Center's own markup and wrong for the Portal's: it is
   inline, so it lands after portal-hero.css and stripped the padding off the
   Portal search field, which is why the same field measured 407px wide with its
   text hard against the edge on /hc and inset by 14px on the Portal. Restoring
   the Portal sheet's own values inside the hero is what "use the Portal hero"
   has to mean; nothing outside the hero is affected. */
/* Superseded: the Help Center reset now stops at the hero boundary, so the
   Portal sheet supplies every padding, radius and background exactly as it does
   on the Portal itself. Re-declaring individual values here was how the search
   capsule ended up flattened from 62px to 44px. */

/* PHASE10K10_2026-08-11 — the content column is a MEASUREMENT, not a surface.
   hc-sheet-1 gives `.hc-main{background:var(--body-bg)}` from the days when the
   column was the page. Now that it carries a container width, that fill draws a
   flat rectangle behind the cards with a visible edge under the last row. The
   page paints the page; the column carries nothing. */
#hc-page#hc-page .hc-main{background:transparent}

/* ── PHASE10K10_2026-08-11: SHADOWS MUST FIT THEIR GAP ───────────────────────
   The owner: "look in between the cards." Each card was dropping
   `0 18px 48px rgba(15,23,42,.12)` into a grid whose gap is 16px. A 48px blur
   pushed 18px down cannot stay inside a 16px gutter: every gap collected shadow
   from the card on each side AND from the row above, so the gaps filled with a
   continuous grey wash that read as a panel behind the grid, with a hard edge
   where the last row's shadows stopped. Nothing was painting a background —
   the "panel" was pooled shadow.

   In a tight grid the resting shadow is scaled to the gutter it has to live in.
   The card keeps its elevation where elevation is actually read: on hover, and
   in the deeper themes, which get a proportionally larger lift. */
#hc-page#hc-page .hc-alist > *,
#hc-page#hc-page .hc-home-cats > *,
#hc-page#hc-page .hc-dir > *{
  box-shadow:0 2px 8px color-mix(in srgb,var(--ink,#0f172a) 6%,transparent)!important}
#hc-page#hc-page .hc-alist > *:hover,
#hc-page#hc-page .hc-home-cats > *:hover,
#hc-page#hc-page .hc-dir > *:hover{
  box-shadow:0 10px 26px color-mix(in srgb,var(--ink,#0f172a) 12%,transparent)!important}

/* PHASE10K11_2026-08-11 — RELATED ARTICLES IN THE READING COLUMN.
   The fallback placement when the article rail is off. It is the same component
   as the sidebar card — same heading class, same list, same link styling — so
   every Related Articles setting carries over; only the container differs,
   because a full-width block under the rating is not a 300px rail card. */
#hc-page#hc-page .hc-rel-block{margin-top:34px;padding:22px 24px;
  background:var(--card,#fff);border:1px solid var(--line,#e2e8f0);border-radius:18px;
  box-shadow:0 2px 8px color-mix(in srgb,var(--ink,#0f172a) 6%,transparent)}
#hc-page#hc-page .hc-rel-block .hc-rel-list{display:grid;gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
#hc-page#hc-page .hc-rel-block .hc-rel-link{display:block;padding:9px 0}
@media(max-width:640px){#hc-page#hc-page .hc-rel-block{padding:18px 16px;margin-top:26px}}

/* PHASE10K11_2026-08-11 — NO RAIL, NO RAIL TRACK. Every theme defines
   .hc-art-layout as a two-column grid; with the article rail switched off the
   aside is not rendered, so the article card took the rail's own track and the
   reader ended up in a 300px column. One column, full width, whichever theme
   is in play — and the reading measure still applies inside it. */
#hc-page#hc-page .hc-art-layout.hc-art-no-rail{grid-template-columns:minmax(0,1fr)!important;max-width:100%!important}

/* ── PHASE10K12_2026-08-11: TITLES SHOW, CARDS DON'T CLIP ────────────────────
   Two rules written to stop long words breaking the layout were doing far more
   than that:

     .hc-arow{overflow:hidden}        clipped anything that left the card — which
                                      is every hover lift, scale and glow. The
                                      owner: "on hover part of it gets cut."
     .hc-arow-title{overflow:hidden;  cut every title to one line with an
       text-overflow:ellipsis}        ellipsis, so a reader never saw the whole
                                      subject of an article in a list of them.

   The original problem — a long unbroken word widening the row — is solved by
   letting the text WRAP instead, which is what it should have done from the
   start. Titles wrap to as many lines as they need; only excerpts are trimmed,
   because an excerpt is a preview and a title is the thing itself. */
#hc-page#hc-page .hc-arow,
#hc-page#hc-page .hc-arow-body,
#hc-page#hc-page .hc-pop-item{overflow:visible!important}
#hc-page#hc-page .hc-arow-title,
#hc-page#hc-page .hc-pop-title{
  overflow:visible!important;text-overflow:clip!important;white-space:normal!important;
  -webkit-line-clamp:none!important;line-clamp:none!important;display:block!important;
  overflow-wrap:anywhere;word-break:normal;hyphens:auto}
/* The excerpt keeps its trim, and keeps it HONEST: the ellipsis marks text that
   continues, and the line count is the only thing bounded. */
#hc-page#hc-page .hc-arow-exc,
#hc-page#hc-page .hc-pop-exc{
  display:-webkit-box!important;-webkit-box-orient:vertical!important;
  overflow:hidden!important;overflow-wrap:anywhere}
/* A hover lift needs somewhere to go: the list must not clip its own children. */
#hc-page#hc-page .hc-alist{overflow:visible}


/* ══ PHASE10K12_2026-08-12: SEVEN LISTINGS, REDESIGNED ═══════════════════════
   The owner named these as not good enough and asked for new ones — corporate,
   distinct, animated, and NOT all cards. So three of the seven are not cards at
   all: two are typeset lists and one is a table. The keys are unchanged, so a
   workspace keeps whichever it had; what it renders is new.

     boxed    → LEDGER      an accounting table: ruled rows, aligned columns,
                            a hairline that ignites on hover. No card at all.
     showcase → BROADSHEET   newspaper typesetting: a rule above, a standfirst,
                            and the title at display size. No card at all.
     ledger   → DOSSIER      a numbered file line, monospace reference, and a
                            rule that draws itself across on hover. No card.
     rail     → PLATFORM     a departure board: the number as a plate, the row
                            sliding a notch as it is read.
     glass    → PRISM        an edge-lit panel; the light sweeps once on hover.
     mosaic   → STACK        offset panels that square up under the cursor.
     feature  → MASTHEAD     one lead story at display scale over a quiet list.

   Every colour is a token, every motion respects reduced-motion, and no title
   is ever clipped. */

/* ── LEDGER (boxed) — a table, not a card ─────────────────────────────────── */
#hc-page#hc-page .hc-alist.hc-cards-boxed{display:block;border-top:2px solid var(--ink,#0f172a);
  background:transparent!important;box-shadow:none!important}
#hc-page#hc-page .hc-cards-boxed .hc-arow{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;gap:6px 22px;padding:18px 4px;border:0!important;border-radius:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--ink,#0f172a) 12%,transparent)!important;
  background:transparent!important;box-shadow:none!important;position:relative;
  transition:padding-left .24s cubic-bezier(.22,.61,.36,1),background-color .24s ease}
#hc-page#hc-page .hc-cards-boxed .hc-arow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--brand,var(--accent,#6366f1));transition:width .24s cubic-bezier(.22,.61,.36,1)}
/* The row's own padding does NOT move on hover — a padding change can re-wrap a
   title, which changes the row's height, which moves the rows under the cursor.
   The step-in is done by translating the row's CONTENT instead (see K13). */
#hc-page#hc-page .hc-cards-boxed .hc-arow:hover{
  background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 5%,transparent)!important}
#hc-page#hc-page .hc-cards-boxed .hc-arow:hover::before{width:4px}
#hc-page#hc-page .hc-cards-boxed .hc-arow-dot{display:none}
#hc-page#hc-page .hc-cards-boxed .hc-arow-title{font-size:16px;font-weight:680;letter-spacing:-.012em}
#hc-page#hc-page .hc-cards-boxed .hc-arow-exc{-webkit-line-clamp:1;font-size:13px;opacity:.6;margin-top:4px}
#hc-page#hc-page .hc-cards-boxed .hc-arow-meta{font-variant-numeric:tabular-nums;opacity:.55}

/* ── BROADSHEET (showcase) — newspaper typesetting, no card ───────────────── */
#hc-page#hc-page .hc-alist.hc-cards-showcase{display:grid;gap:0;background:transparent!important}
#hc-page#hc-page .hc-cards-showcase .hc-arow{display:block;padding:26px 0 24px;border:0!important;
  border-top:1px solid color-mix(in srgb,var(--ink,#0f172a) 14%,transparent)!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important}
#hc-page#hc-page .hc-cards-showcase .hc-arow:first-child{border-top:0!important}
#hc-page#hc-page .hc-cards-showcase .hc-arow-num{display:inline-block;font:700 11px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.16em;color:var(--brand,var(--accent,#6366f1));margin-bottom:10px;
  transition:letter-spacing .3s cubic-bezier(.22,.61,.36,1)}
#hc-page#hc-page .hc-cards-showcase .hc-arow:hover .hc-arow-num{letter-spacing:.34em}
#hc-page#hc-page .hc-cards-showcase .hc-arow-kicker{display:inline-block;margin-left:12px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.5}
#hc-page#hc-page .hc-cards-showcase .hc-arow-title{font-family:var(--font-heading);
  font-size:clamp(21px,2.1vw,30px);font-weight:760;letter-spacing:-.022em;line-height:1.16;
  background-image:linear-gradient(var(--brand,var(--accent,#6366f1)),var(--brand,var(--accent,#6366f1)));
  background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .38s cubic-bezier(.22,.61,.36,1)}
#hc-page#hc-page .hc-cards-showcase .hc-arow:hover .hc-arow-title{background-size:100% 2px}
#hc-page#hc-page .hc-cards-showcase .hc-arow-exc{-webkit-line-clamp:2;max-width:62ch;font-size:14.5px;
  line-height:1.6;opacity:.66;margin-top:8px}

/* ── DOSSIER (ledger) — a numbered file line, no card ─────────────────────── */
#hc-page#hc-page .hc-alist.hc-cards-ledger{display:grid;gap:0;background:transparent!important}
#hc-page#hc-page .hc-cards-ledger .hc-arow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:18px;padding:15px 2px;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;position:relative}
#hc-page#hc-page .hc-cards-ledger .hc-arow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:color-mix(in srgb,var(--ink,#0f172a) 12%,transparent);transform-origin:left;
  transform:scaleX(1);transition:transform .001s}
#hc-page#hc-page .hc-cards-ledger .hc-arow::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--brand,var(--accent,#6366f1));transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.22,.61,.36,1)}
#hc-page#hc-page .hc-cards-ledger .hc-arow:hover::before{transform:scaleX(1)}
#hc-page#hc-page .hc-cards-ledger .hc-arow-num{font:700 11.5px/1 ui-monospace,Menlo,monospace;
  color:var(--text-muted,#94a3b8);letter-spacing:.06em}
#hc-page#hc-page .hc-cards-ledger .hc-arow-title{font-size:15.5px;font-weight:640}
#hc-page#hc-page .hc-cards-ledger .hc-arow-meta{font-variant-numeric:tabular-nums;opacity:.5;font-size:12px}

/* ── PLATFORM (rail) — a departure board ──────────────────────────────────── */

/* ── PRISM (glass) — an edge-lit panel, light sweeps once on hover ────────── */

/* ── STACK (mosaic) — offset panels that square up under the cursor ───────── */
#hc-page#hc-page .hc-alist.hc-cards-mosaic{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
#hc-page#hc-page .hc-cards-mosaic .hc-arow{position:relative;padding:20px;border-radius:16px!important;
  background:var(--card,#fff)!important;border:1px solid var(--line,#e2e8f0)!important;overflow:visible;
  transform:rotate(-.5deg);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .26s ease}
#hc-page#hc-page .hc-cards-mosaic .hc-arow:nth-child(even){transform:rotate(.55deg)}
#hc-page#hc-page .hc-cards-mosaic .hc-arow::after{content:"";position:absolute;inset:6px -6px -6px 6px;z-index:-1;
  border-radius:inherit;background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 12%,transparent);
  transition:inset .3s cubic-bezier(.34,1.56,.64,1)}
#hc-page#hc-page .hc-cards-mosaic .hc-arow:hover::after{inset:0}
#hc-page#hc-page .hc-cards-mosaic .hc-arow-num{font:800 11px/1 ui-monospace,Menlo,monospace;
  color:var(--brand,var(--accent,#6366f1));letter-spacing:.14em}
#hc-page#hc-page .hc-cards-mosaic .hc-arow-title{font-size:15.5px;font-weight:680;margin-top:8px}

/* ── MASTHEAD (feature) — one lead at display scale over a quiet list ─────── */
#hc-page#hc-page .hc-alist.hc-cards-feature{display:grid;gap:0}
#hc-page#hc-page .hc-cards-feature .hc-arow{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;gap:8px 20px;padding:16px 0;border:0!important;border-radius:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--ink,#0f172a) 10%,transparent)!important;
  background:transparent!important;box-shadow:none!important;
  transition:padding-left .22s cubic-bezier(.22,.61,.36,1)}
/* Same reason as LEDGER above: the content steps in, the row does not. */
#hc-page#hc-page .hc-cards-feature .hc-arow-lead{display:block;padding:0 0 26px;margin-bottom:8px;
  border-bottom:2px solid var(--ink,#0f172a)!important}
#hc-page#hc-page .hc-cards-feature .hc-arow-lead .hc-arow-kicker{display:inline-block;
  font:800 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-on,#fff);background:var(--brand,var(--accent,#6366f1));
  padding:6px 10px;border-radius:6px;margin-bottom:14px}
#hc-page#hc-page .hc-cards-feature .hc-arow-lead .hc-arow-title{font-family:var(--font-heading);
  font-size:clamp(26px,3.2vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
#hc-page#hc-page .hc-cards-feature .hc-arow-lead .hc-arow-exc{-webkit-line-clamp:3;max-width:64ch;
  font-size:16px;line-height:1.62;opacity:.7;margin-top:12px}
#hc-page#hc-page .hc-cards-feature .hc-arow-title{font-size:15.5px;font-weight:640}

@media(prefers-reduced-motion:reduce){
  #hc-page#hc-page .hc-alist .hc-arow,
  #hc-page#hc-page .hc-alist .hc-arow::before,
  #hc-page#hc-page .hc-alist .hc-arow::after,
  #hc-page#hc-page .hc-alist .hc-arow-title,
  #hc-page#hc-page .hc-alist .hc-arow-num{transition:none!important;animation:none!important}
  #hc-page#hc-page .hc-cards-mosaic .hc-arow{transform:none}
}

/* PHASE10K12_2026-08-12 — THE LETTER BADGE SITS ON THE RIGHT, ALWAYS.
   It used to swap sides on every other row (.hc-arow-alt reversed the flex),
   which the owner asked to stop — a badge that moves between rows reads as a
   mistake, not a rhythm. The alternating class is gone from the markup; the
   badge is ordered last so it lands on the right edge of every row, and the
   card's own overflow stays visible so the hover ring is never clipped. */
#hc-page#hc-page .hc-cards-split .hc-arow{flex-direction:row!important}
#hc-page#hc-page .hc-cards-split .hc-arow-letter{order:9}
#hc-page#hc-page .hc-cards-split .hc-arow-body{order:1}
#hc-page#hc-page .hc-cards-split .hc-arow-meta{order:5}

/* ══ PHASE10K13_2026-08-12: THE SIDEBAR IS ONE COLUMN ════════════════════════
   The owner: the "Still need help?" card "travels all the way from Nigeria to
   London" — it sat at the very bottom of the page, thousands of pixels below
   the category rail it belongs to.

   The cause is grid auto-placement. `.hc-page-shell` is a two-column grid whose
   row 1 holds the content column and the rail. The help, quick-answers and
   channels cards are SIBLINGS of both, so they auto-placed into row 2 — and
   row 1 is as tall as the article listing, so row 2 begins after it. The card
   was not styled to the bottom of the page; it was placed there.

   Wrapping the rail and its modules in one element would be the obvious fix and
   is the wrong one: fifty-four rules across six stylesheets and the widget's
   own JS select `.hc-page-shell > .hc-kb-sidebar` as a DIRECT child, and every
   one of them would stop matching.

   So the ROWS are made explicit instead. The rail takes row 1, each module
   auto-places into the rows under it, and the content column spans the lot.
   The last track is flexible on purpose: a spanning item's extra height is not
   distributed across intrinsic tracks when it crosses a FLEXIBLE one, so the
   tall content column can no longer stretch the rows beneath the rail — which
   is what pushed the card down when the same layout was tried with auto rows.
   The article page already stacks its rail in one <aside>; this gives the
   category, search and browse pages the same column. */
/* The doubled id is not decoration: the rail-side rules above carry
   `#hc-page:not(.view-article) .hc-page-shell.hc-rail-left>.hc-page-content
   {grid-row:1!important}` — one id and four classes — and pinning the content
   to row 1 is exactly what strands the modules below it. Two ids outrank any
   single-id rule whatever its class count. */
#hc-page#hc-page:not(.view-article) .hc-page-shell{
  grid-template-rows:repeat(6,min-content) 1fr!important;align-content:start;
  /* The COLUMN gap keeps the theme's generous 56px between rail and content;
     the ROW gap is the sidebar's own rhythm, and matches the article rail's
     18px so the same column reads identically on both pages. */
  row-gap:18px!important}
#hc-page#hc-page:not(.view-article) .hc-page-shell>.hc-page-content{grid-row:1/-1!important}
#hc-page#hc-page:not(.view-article) .hc-page-shell>.hc-kb-sidebar{grid-row:1!important}
/* Each module lands in the RAIL's column, whichever side the operator put it. */
#hc-page#hc-page:not(.view-article) .hc-page-shell.hc-rail-left>:is(.hc-help-card,.hc-side-card){
  grid-column:1!important}
#hc-page#hc-page:not(.view-article) .hc-page-shell:not(.hc-rail-left)>:is(.hc-help-card,.hc-side-card){
  grid-column:2!important}
/* ONE RHYTHM DOWN THE COLUMN. The help card carries an 18px top margin from the
   days when it followed the content, and its container already provides an 18px
   gap — so it sat at double the distance of every other module. The owner, of
   the article rail: "spaced too much compared with the above." The container's
   gap owns the spacing now, on both pages, so every card in the column is the
   same distance from the one above it. */
#hc-page .hc-page-shell>:is(.hc-help-card,.hc-side-card,.hc-kb-sidebar),
#hc-page .hc-sidebar>:is(.hc-help-card,.hc-side-card,.hc-kb-sidebar){
  margin-top:0!important;margin-bottom:0!important}

/* THE COLUMN STICKS, BY DEFAULT. The rail has always been sticky; its modules
   were not, so they slid up and over it as the page scrolled. hcSideStick()
   measures the rail and stamps each module with the offset it already sits at,
   so the whole column holds its arrangement — the article page's <aside> gets
   this for free from one rule, and this is how the category page earns it.
   The class is only added once the offsets exist, so a page without JavaScript
   scrolls exactly as it did before. */
#hc-page .hc-page-shell.hc-side-stuck>:is(.hc-help-card,.hc-side-card){
  position:sticky;top:var(--hc-side-top);align-self:start}
/* The RAIL takes its offset from the same measurement. When the column is
   taller than the screen its top goes slightly negative, which is what lets the
   last card finish inside the viewport instead of being pinned below it — with
   the rail left at a flat 92px the card underneath simply covered the rail's
   own "Show all categories" button. Two ids because the rail's 92px is pinned
   with !important by three separate rules above. */
#hc-page#hc-page .hc-page-shell.hc-side-stuck>.hc-kb-sidebar{top:var(--hc-side-top)!important}
/* THE OPTION: let it scroll away with the page instead. Both surfaces, one
   class — the category rail with its modules, and the article page's aside. */
#hc-page.hc-side-scroll .hc-page-shell>.hc-kb-sidebar,
#hc-page.hc-side-scroll .hc-page-shell>:is(.hc-help-card,.hc-side-card),
#hc-page.hc-side-scroll .hc-sidebar{position:static!important;top:auto!important}
@media(max-width:920px){
  #hc-page#hc-page:not(.view-article) .hc-page-shell{grid-template-rows:none!important}
  #hc-page#hc-page:not(.view-article) .hc-page-shell>.hc-page-content{grid-row:auto!important}
  #hc-page#hc-page:not(.view-article) .hc-page-shell>:is(.hc-kb-sidebar,.hc-help-card,.hc-side-card){
    grid-column:1!important;grid-row:auto!important}
}

/* ══ PHASE10K13_2026-08-12: ONE HOVER PER DESIGN — AND THE ROW NEVER MOVES ══
   Three complaints, one cause. The owner: the cards "jump up" on hover, the
   hover "flicks most times", and something "cuts" the card on hover.

     THE JUMP    every card design lifted itself with translateY.
     THE FLICKER a row that moves is a row that slides out from under the
                 cursor. The pointer lands on what is now empty space, :hover
                 drops, the row snaps back under the cursor, :hover fires again
                 — a loop that reads as flicker and is caused BY the lift, not
                 by the timing.
     THE CUT     the shared container clipped whatever the card painted outside
                 its own box (see .hc-page-content above).

   So the rule for every design in this file from here on:

     THE ROW ITSELF NEVER TRANSFORMS AND NEVER CHANGES ITS OWN SIZE.

   Motion lives where it cannot cost the cursor its target — in paint
   (background, border, shadow), in absolutely-positioned pseudo-elements
   (bars, rules, sweeps, backing panels), and in the row's CHILDREN, whose
   movement never alters the row's own hit area. Every one of the twelve
   listings keeps a signature move; none of them can flicker. */

/* The shared depth, brand-tinted, declared once where every row can read it. */
#hc-page#hc-page .hc-alist{
  --hc-hov-shadow:0 14px 34px -16px color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 38%,rgba(15,23,42,.32));
  --hc-hov-edge:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 46%,var(--line,var(--card-border,#e2e8f0)));
  --hc-hov-wash:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 5%,transparent)}

/* THE ANTI-JUMP RULE. It also beats the Card FX engine's lift, which applies
   translateY to `.hc-arow` with !important from inline CSS — the FX lift is a
   card effect and a listing row is not a card in eight of these designs.
   Only the MOTION is taken: every FX paint value still lands, and where a
   design sets its own hover depth it reads `--hc-fx-hshadow` first, so an
   operator's custom hover shadow still wins over the design's default. */
#hc-page#hc-page .hc-alist .hc-arow:hover,
#hc-page#hc-page .hc-alist .hc-arow:focus-within{transform:none!important}

/* Children may move; the row may not. One transition covers every design. */
#hc-page#hc-page .hc-alist .hc-arow-body,
#hc-page#hc-page .hc-alist .hc-arow-letter,
#hc-page#hc-page .hc-alist .hc-arow-num,
#hc-page#hc-page .hc-alist .hc-arow-node,
#hc-page#hc-page .hc-alist .hc-arr{transition:transform .26s cubic-bezier(.22,.61,.36,1),
  color .2s ease,background-color .2s ease,box-shadow .24s ease,opacity .2s ease,letter-spacing .3s ease}

/* Plates, fills and sweeps clip to the card's own corner again. With the
   container no longer clipping, a card can hold its children inside its radius
   and still paint its shadow outside — overflow never clips an element's own
   box-shadow, only its descendants. STACK is the exception: its backing panel
   is meant to sit outside the card. */
#hc-page#hc-page .hc-alist .hc-arow{overflow:hidden!important}
#hc-page#hc-page .hc-cards-mosaic .hc-arow{overflow:visible!important}

/* ── 1 · LIST — the row lights, a brand rule grows, the text steps aside ── */
#hc-page#hc-page .hc-cards-list .hc-arow{position:relative;
  transition:background-color .22s ease,box-shadow .24s ease}
#hc-page#hc-page .hc-cards-list .hc-arow::before{content:"";position:absolute;left:0;top:7px;bottom:7px;
  width:3px;border-radius:3px;background:var(--brand,var(--accent,#6366f1));
  transform:scaleY(0);transform-origin:center;transition:transform .26s cubic-bezier(.22,.61,.36,1)}
#hc-page#hc-page .hc-cards-list .hc-arow:hover{background:var(--hc-hov-wash)!important}
#hc-page#hc-page .hc-cards-list .hc-arow:hover::before{transform:scaleY(1)}
#hc-page#hc-page .hc-cards-list .hc-arow:hover .hc-arow-body{transform:translateX(12px)}

/* ── 2 · TIMELINE — the node fills and haloes, the date takes the brand ── */
#hc-page#hc-page .hc-cards-timeline .hc-arow:hover .hc-arow-node{
  box-shadow:0 0 0 6px color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 15%,transparent)}
#hc-page#hc-page .hc-cards-timeline .hc-arow-date b{transition:color .2s ease}
#hc-page#hc-page .hc-cards-timeline .hc-arow:hover .hc-arow-date b{color:var(--brand,var(--accent,#6366f1))}

/* ── 3 · COMPACT — the index number becomes a filled brand chip ─────────── */
#hc-page#hc-page .hc-cards-compact .hc-arow-num{border-radius:6px;text-align:center;
  padding:3px 0;line-height:1.1}
#hc-page#hc-page .hc-cards-compact .hc-arow:hover .hc-arow-num{opacity:1;
  background:var(--brand,var(--accent,#6366f1));color:var(--brand-on,#fff)}

/* ── 4 · MASTHEAD (feature) — the rule under the line takes the brand ──── */
#hc-page#hc-page .hc-cards-feature .hc-arow{transition:border-color .22s ease,background-color .22s ease}
#hc-page#hc-page .hc-cards-feature .hc-arow:hover{
  border-bottom-color:var(--brand,var(--accent,#6366f1))!important;
  background:var(--hc-hov-wash)!important}
#hc-page#hc-page .hc-cards-feature .hc-arow:hover .hc-arow-body{transform:translateX(10px)}

/* ── 5 · SPLIT — a ticket stub: perforation, plate, and a letter that turns ─
   The owner asked for better than the first pass. It is a stub now: the body
   is the ticket, a dashed perforation separates it from the plate, and the
   plate carries the letter. On hover the plate deepens to the full brand and
   the letter turns white and grows — all inside the plate, so the row's own
   geometry never changes and the title never re-wraps. */
#hc-page#hc-page .hc-cards-split .hc-arow{position:relative;
  transition:border-color .22s ease,box-shadow .26s ease}
#hc-page#hc-page .hc-cards-split .hc-arow-letter{flex:0 0 104px;
  border-left:1px dashed color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 34%,transparent)!important;
  font-family:var(--font-heading);font-size:42px;font-weight:800;letter-spacing:-.03em}
#hc-page#hc-page .hc-cards-split .hc-arow:hover{border-color:var(--hc-hov-edge)!important;
  box-shadow:var(--hc-fx-hshadow,var(--hc-hov-shadow))!important}
#hc-page#hc-page .hc-cards-split .hc-arow:hover .hc-arow-letter{
  background:var(--brand,var(--accent,#6366f1))!important;color:var(--brand-on,#fff)!important;
  transform:scale(1.06)}
@media(max-width:760px){#hc-page#hc-page .hc-cards-split .hc-arow-letter{flex:0 0 68px;font-size:28px}
  #hc-page#hc-page .hc-cards-split .hc-arow-letter::before{display:none}}
/* PHASE_HC_MOBILE_2026-08-17 — a ROW on a phone. Measured at 390px on the search page: the
   68px letter plate + an 89px meta column (views + chevron) left the title 176px, five lines
   deep, and the excerpt one word long. Below 560px the meta lets the title have the row
   (views tuck under the title, the chevron stays at the edge) and the plate shrinks. */
@media(max-width:560px){
  #hc-page#hc-page .hc-arow{flex-wrap:wrap}
  #hc-page#hc-page .hc-arow-body{flex:1 1 100%;min-width:0}
  #hc-page#hc-page .hc-arow-meta{flex:1 1 100%;justify-content:flex-end;margin-top:6px}
  #hc-page#hc-page .hc-arow-meta .hc-views{font-size:11px}
  /* the split plate is a desktop flourish; at phone width it is a third of the card */
  #hc-page#hc-page .hc-cards-split .hc-arow-letter{display:none}
}

/* ── 6 · LEDGER (boxed) — the rule ignites, the line steps in ───────────── */
#hc-page#hc-page .hc-cards-boxed .hc-arow{transition:background-color .22s ease}
#hc-page#hc-page .hc-cards-boxed .hc-arow:hover::before{width:3px}
#hc-page#hc-page .hc-cards-boxed .hc-arow:hover .hc-arow-body,
#hc-page#hc-page .hc-cards-boxed .hc-arow:hover .hc-arow-title{transform:translateX(14px)}

/* ── 7 · BROADSHEET (showcase) — the headline underlines itself ─────────── */
#hc-page#hc-page .hc-cards-showcase .hc-arow{transition:background-color .22s ease}
#hc-page#hc-page .hc-cards-showcase .hc-arow:hover .hc-arow-meta{color:var(--brand,var(--accent,#6366f1))}

/* ── 8 · PRISM (glass) — the light sweeps, the edge glows, depth arrives ── */

/* ── 9 · DOSSIER (ledger) — the rule draws across, the reference lights ── */
#hc-page#hc-page .hc-cards-ledger .hc-arow:hover .hc-arow-num{color:var(--brand,var(--accent,#6366f1))}
#hc-page#hc-page .hc-cards-ledger .hc-arow:hover .hc-arow-body{transform:translateX(8px)}

/* ── 10 · PLATFORM (rail) — the board flips: plate deepens, row steps ──── */

/* ── 11 · STACK (mosaic) — the panel behind squares up under the cursor ───
   The tilt moved to the BACKING PANEL. It used to sit on the card itself and
   straighten on hover, which moved the card under the cursor: the flicker,
   exactly. A pseudo-element has no hit area, so it can move all it likes. */
#hc-page#hc-page .hc-cards-mosaic .hc-arow{transform:none!important;
  transition:border-color .22s ease,box-shadow .26s ease}
#hc-page#hc-page .hc-cards-mosaic .hc-arow::after{inset:10px -10px -10px 10px;
  transform:rotate(-1.1deg);transform-origin:bottom right;
  transition:inset .3s cubic-bezier(.22,.61,.36,1),transform .3s cubic-bezier(.22,.61,.36,1),
    background-color .24s ease}
#hc-page#hc-page .hc-cards-mosaic .hc-arow:nth-child(even)::after{transform:rotate(1.1deg)}
#hc-page#hc-page .hc-cards-mosaic .hc-arow:hover::after,
#hc-page#hc-page .hc-cards-mosaic .hc-arow:nth-child(even):hover::after{inset:0;transform:rotate(0deg);
  background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 20%,transparent)}
#hc-page#hc-page .hc-cards-mosaic .hc-arow:hover{border-color:var(--hc-hov-edge)!important}

/* ── 12 · MEDIA — the thumbnail pushes in behind its own frame ──────────── */
#hc-page#hc-page .hc-cards-media .hc-arow{transition:border-color .22s ease,box-shadow .26s ease}
#hc-page#hc-page .hc-cards-media .hc-arow:hover{border-color:var(--hc-hov-edge)!important;
  box-shadow:var(--hc-fx-hshadow,var(--hc-hov-shadow))!important}
/* The thumbnail is a background-image span, not an <img>, and the card already
   clips — so the push happens inside the frame, never against the layout. */
#hc-page#hc-page .hc-cards-media .hc-arow-media{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
#hc-page#hc-page .hc-cards-media .hc-arow:hover .hc-arow-media{transform:scale(1.06)}

/* Dark theme: the tinted washes and the depth both need a darker floor, since
   a shadow mixed against a light slate reads as grey haze on a dark surface. */
html[data-theme="dark"] #hc-page#hc-page .hc-alist{
  --hc-hov-shadow:0 16px 38px -18px rgba(0,0,0,.72);
  --hc-hov-wash:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 12%,transparent)}
html[data-theme="dark"] #hc-page#hc-page .hc-cards-split .hc-arow-letter::before{
  background:var(--hc-d-bg,#0b1220);box-shadow:0 calc(100% + 7px) 0 0 var(--hc-d-bg,#0b1220)}

/* Reduced motion: the signatures stay, the movement goes. */
@media(prefers-reduced-motion:reduce){
  #hc-page#hc-page .hc-alist .hc-arow,
  #hc-page#hc-page .hc-alist .hc-arow::before,
  #hc-page#hc-page .hc-alist .hc-arow::after,
  #hc-page#hc-page .hc-alist :is(.hc-arow-body,.hc-arow-letter,.hc-arow-num,.hc-arow-node,.hc-arr){
    transition:none!important}
  #hc-page#hc-page .hc-alist .hc-arow:hover :is(.hc-arow-body,.hc-arow-letter,.hc-arow-num){
    transform:none!important}
}


/* ══ PHASE_HC_READER_VARIANTS · PHASE10K14_2026-08-12 ════════════════════════
   TEN ARTICLE READERS, TEN CARD DESIGNS

   The reader variants LIVE HERE now, not in hc-sheet-12 where they started.
   They had to move: the doubled page id is the only specificity that beats the
   Design Studio's card tokens, and this is the sheet that carries that
   convention. hc-sheet-6 is linked well before the unified-portal branch, so
   standalone /help receives it — the load-order invariant the extraction guard
   protects is unchanged, only the sheet is different.
   The owner: "article reading layout doesn't change the layout designs… when
   you select layout things need to be different. mature, premium, enterprise."
   Then, on the first pass: "everything in card… different card designs only",
   "only one won't be card", "font or font size is not included, those are done
   from text and typography", "no hardcoding", "don't give dark colour to light
   theme".

   So the rules of this block are:

     · A layout is a CARD DESIGN. Nine of the ten keep the card; FOCUS is the
       one that does not, and its sidebar drops its cards to match.
     · NO TYPOGRAPHY. Not one font-family, font-size, line-height, font-weight
       or letter-spacing. Type belongs to Text & Typography and an operator's
       choice there must survive every layout. What differs here is structure:
       the card's chrome, how a section announces itself, how steps, callouts,
       tables and code are framed, and the spacing rhythm.
     · NO HARDCODED VALUES. Colour comes from the workspace's tokens; spacing
       is in `em`, so it scales with whatever type size the operator set.
     · NO DARK SURFACE IN A LIGHT THEME. The console reads as a console through
       structure; its dark treatment lands only in the dark theme.

   Why they were invisible before: five were written at
   `#hc-page.view-article .hc-reader-layout-X` — one id, three classes — which
   loses to the Design Studio's `var(--card-*)!important` card tokens. Measured
   live: resolution asks for a 4px brand edge and computed 1px. Everything here
   is under the doubled page id with !important on surface properties, which is
   the escalation those tokens force. */

#hc-page#hc-page .hc-art-card{
  --hc-rd-accent:var(--brand,var(--accent,#6366f1));
  --hc-rd-rule:color-mix(in srgb,var(--ink,#0f172a) 12%,transparent);
  --hc-rd-ink:color-mix(in srgb,var(--ink,#0f172a) 55%,transparent);
  --hc-rd-wash:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 5%,transparent)}

/* ── 1 · STANDARD — the default card, with the edge it has always had ─────── */
#hc-page#hc-page .hc-reader-card-standard>header{padding-bottom:1em;
  border-bottom:1px solid var(--hc-rd-rule)}
#hc-page#hc-page .hc-reader-card-standard #hc-article-body>h2{margin-top:2em}

/* ── 2 · DOCUMENTATION — a manual: flat, square, every section ruled and numbered */
#hc-page#hc-page .hc-art-card.hc-reader-card-documentation{border-radius:8px!important;
  box-shadow:none!important;border:1px solid var(--hc-rd-rule)!important}
#hc-page#hc-page .hc-reader-card-documentation>header{padding-bottom:1em;
  border-bottom:2px solid var(--ink,#0f172a)}
#hc-page#hc-page .hc-reader-card-documentation #hc-article-body{counter-reset:hcdoc}
#hc-page#hc-page .hc-reader-card-documentation #hc-article-body>h2{counter-increment:hcdoc;
  margin-top:2.4em;padding-top:.8em;border-top:1px solid var(--hc-rd-rule)}
#hc-page#hc-page .hc-reader-card-documentation #hc-article-body>h2::before{
  content:counter(hcdoc) ".";margin-inline-end:.5em;color:var(--hc-rd-accent);
  font-variant-numeric:tabular-nums}
#hc-page#hc-page .hc-reader-card-documentation #hc-article-body :is(pre,table){
  border-radius:6px!important;border:1px solid var(--hc-rd-rule)!important}

/* ── 3 · RESOLUTION — a support case: a status edge, steps as pill rows ───── */
#hc-page#hc-page .hc-art-card.hc-reader-card-resolution{
  border-inline-start:5px solid var(--hc-rd-accent)!important;
  border-radius:0 16px 16px 0!important}
#hc-page#hc-page .hc-reader-card-resolution .hc-art-meta{padding-bottom:.8em;
  border-bottom:1px dashed var(--hc-rd-rule)}
#hc-page#hc-page .hc-reader-card-resolution #hc-article-body>ol{counter-reset:hcres;
  list-style:none;padding-inline-start:0}
#hc-page#hc-page .hc-reader-card-resolution #hc-article-body>ol>li{counter-increment:hcres;
  position:relative;padding:.8em 1em .8em 3.2em;margin:0 0 .6em;
  border:1px solid var(--hc-rd-rule);border-radius:12px;background:var(--hc-rd-wash)}
#hc-page#hc-page .hc-reader-card-resolution #hc-article-body>ol>li::before{
  content:counter(hcres);position:absolute;inset-inline-start:1em;top:.75em;
  width:1.7em;height:1.7em;display:grid;place-items:center;border-radius:50%;
  background:var(--hc-rd-accent);color:var(--brand-on,#fff);
  font-variant-numeric:tabular-nums}
#hc-page#hc-page .hc-reader-card-resolution #hc-article-body>blockquote{
  border-inline-start:3px solid var(--hc-rd-accent);border-radius:0 10px 10px 0;
  background:var(--hc-rd-wash);padding:.9em 1.1em}

/* ── 4 · EDITORIAL — a masthead card: heavy ink rule above, square shoulders ─ */
#hc-page#hc-page .hc-art-card.hc-reader-card-editorial{
  background:var(--card,#fff)!important;border-radius:4px!important;
  border:1px solid var(--hc-rd-rule)!important;
  border-top:6px solid var(--ink,#0f172a)!important;box-shadow:none!important}
#hc-page#hc-page .hc-reader-card-editorial>header{padding-bottom:1.4em;
  border-bottom:3px solid var(--ink,#0f172a)}
#hc-page#hc-page .hc-reader-card-editorial #hc-article-body>h2{margin-top:2.2em}
#hc-page#hc-page .hc-reader-card-editorial #hc-article-body>blockquote{border:0;
  border-top:2px solid var(--hc-rd-accent);border-bottom:2px solid var(--hc-rd-accent);
  padding:.7em 0;margin:1.6em 0}

/* ── 5 · REFERENCE — an API page: tabbed sections, zebra tables, tight frames ─ */
#hc-page#hc-page .hc-art-card.hc-reader-card-reference{border-radius:6px!important;
  box-shadow:none!important;border:1px solid var(--hc-rd-rule)!important}
#hc-page#hc-page .hc-reader-card-reference #hc-article-body>h2{margin-top:2.4em;
  padding:.45em .7em;border-inline-start:3px solid var(--hc-rd-accent);
  background:var(--hc-rd-wash)}
/* No width override here: the base sheet already lays tables out as
   width:max-content / max-width:100% with their own horizontal scroll, which
   is what keeps a wide reference table inside the card. */
#hc-page#hc-page .hc-reader-card-reference #hc-article-body tbody tr:nth-child(even){
  background:color-mix(in srgb,var(--ink,#0f172a) 3%,transparent)}
#hc-page#hc-page .hc-reader-card-reference #hc-article-body :is(pre,code){
  border-radius:4px!important}

/* ── 6 · POLICY — a governing document: centred head, numbered clauses ────── */
#hc-page#hc-page .hc-art-card.hc-reader-card-policy{border-radius:2px!important;
  box-shadow:none!important;border:1px solid var(--hc-rd-rule)!important}
#hc-page#hc-page .hc-reader-card-policy>header{padding-bottom:1.2em;text-align:center;
  border-bottom:1px solid var(--ink,#0f172a)}
#hc-page#hc-page .hc-reader-card-policy .hc-art-meta{justify-content:center}
#hc-page#hc-page .hc-reader-card-policy #hc-article-body{counter-reset:hcclause}
#hc-page#hc-page .hc-reader-card-policy #hc-article-body>h2{counter-increment:hcclause;
  counter-reset:hcsub;margin-top:2.6em}
#hc-page#hc-page .hc-reader-card-policy #hc-article-body>h2::before{
  content:counter(hcclause) ". ";color:var(--hc-rd-ink);font-variant-numeric:tabular-nums}
#hc-page#hc-page .hc-reader-card-policy #hc-article-body>h3{counter-increment:hcsub;margin-top:1.8em}
#hc-page#hc-page .hc-reader-card-policy #hc-article-body>h3::before{
  content:counter(hcclause) "." counter(hcsub) " ";color:var(--hc-rd-ink);
  font-variant-numeric:tabular-nums}
#hc-page#hc-page .hc-reader-card-policy #hc-article-body>p{text-align:justify;hyphens:auto}

/* ── 7 · FOCUS — THE ONE WITHOUT A CARD, AND ITS SIDEBAR MATCHES ─────────────
   Owner: "only one won't be card", and then: "the one without card, we must
   have sidebar options that don't have cards that render just links too to
   match, so sidebar article, related on the page will be displayed same way."
   So the rail and every side module drop their surfaces here as well, and the
   links stand on hairlines. The reading column and the rail then read as one
   page rather than a bare column beside a stack of cards. */
/* The measure is !important because the reading column carries its own
   `max-width` pin: without it FOCUS filled the full column with the rail off,
   which is the one place its narrow measure matters most. */
#hc-page#hc-page .hc-art-card.hc-reader-card-focus{max-width:800px!important;
  margin-left:auto!important;margin-right:auto!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;padding-left:0!important;padding-right:0!important}
#hc-page#hc-page .hc-reader-card-focus>header{padding-bottom:1.1em;
  border-bottom:1px solid var(--hc-rd-rule)}
#hc-page#hc-page .hc-reader-layout-focus :is(.hc-kb-sidebar,.hc-side-card,.hc-help-card,.hc-rel-block){
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;padding-left:0!important;padding-right:0!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#hc-page#hc-page .hc-reader-layout-focus :is(.hc-kb-cat-link,.hc-rel-link,.hc-side-quick-list a){
  background:transparent!important;border:0!important;border-radius:0!important;
  border-bottom:1px solid var(--hc-rd-rule)!important;box-shadow:none!important;
  padding-inline:0!important}
#hc-page#hc-page .hc-reader-layout-focus :is(.hc-kb-cat-link,.hc-rel-link):hover{
  background:transparent!important;color:var(--hc-rd-accent)!important}
#hc-page#hc-page .hc-reader-layout-focus .hc-kb-cat-icon{display:none!important}

/* ── 8 · STEPS — a rail down the card: each section a numbered stop ───────── */
#hc-page#hc-page .hc-art-card.hc-reader-card-steps{border-radius:18px!important}
#hc-page#hc-page .hc-reader-card-steps #hc-article-body{counter-reset:hcstep;position:relative}
#hc-page#hc-page .hc-reader-card-steps #hc-article-body>h2{counter-increment:hcstep;
  position:relative;padding:.3em 0 .3em 2.6em;margin-top:2.2em;
  display:flex;align-items:center;min-height:2.2em}
#hc-page#hc-page .hc-reader-card-steps #hc-article-body>h2::before{
  content:counter(hcstep,decimal-leading-zero);position:absolute;inset-inline-start:0;top:50%;
  transform:translateY(-50%);width:2em;height:2em;display:grid;place-items:center;
  border-radius:.6em;background:var(--hc-rd-accent);color:var(--brand-on,#fff);
  font-variant-numeric:tabular-nums}
#hc-page#hc-page .hc-reader-card-steps #hc-article-body>h2::after{content:"";position:absolute;
  inset-inline-start:1em;top:calc(50% + 1.2em);bottom:-2.2em;width:2px;
  background:color-mix(in srgb,var(--hc-rd-accent) 26%,transparent)}
/* The indent must come OUT of the width, not be added to it: a table or a
   code block is already max-width:100% of the column, so an added start margin
   pushes exactly that margin past the card edge. */
#hc-page#hc-page .hc-reader-card-steps #hc-article-body>h2~*:not(h2){
  margin-inline-start:2.6em;max-width:calc(100% - 2.6em)}

/* ── 9 · MAGAZINE — a brand-washed masthead band and a drop cap ───────────── */
#hc-page#hc-page .hc-art-card.hc-reader-card-magazine{border-radius:22px!important}
#hc-page#hc-page .hc-reader-card-magazine>header{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--hc-rd-accent) 16%,var(--card,#fff)),var(--card,#fff) 70%)!important;
  margin:-1px -1px 1.2em;padding:1.6em 1.8em 1.3em;border-radius:22px 22px 0 0}
#hc-page#hc-page .hc-reader-card-magazine #hc-article-body>p:first-of-type::first-letter{
  float:inline-start;font-size:3.4em;line-height:.86;padding:.06em .3em 0 0;
  color:var(--hc-rd-accent)}
#hc-page#hc-page .hc-reader-card-magazine #hc-article-body>h2{margin-top:1.9em}
#hc-page#hc-page .hc-reader-card-magazine #hc-article-body>h2::after{content:"";display:block;
  width:3em;height:3px;background:var(--hc-rd-accent);margin-top:.4em;border-radius:2px}

/* ── 10 · TERMINAL — a console by structure, dark only in the dark theme ──── */
#hc-page#hc-page .hc-art-card.hc-reader-card-terminal{border-radius:10px!important;
  background:var(--card,#fff)!important;color:var(--ink,#0f172a)!important;
  border:1px solid var(--hc-rd-rule)!important;box-shadow:none!important}
#hc-page#hc-page .hc-reader-card-terminal :is(.hc-art-title,h1,h2,h3,#hc-article-body){
  color:var(--ink,#0f172a)!important}
#hc-page#hc-page .hc-reader-card-terminal>header{padding-bottom:.9em;
  border-bottom:1px dashed var(--hc-rd-rule)}
#hc-page#hc-page .hc-reader-card-terminal .hc-art-title::before{content:"$ ";
  color:var(--hc-rd-accent)}
#hc-page#hc-page .hc-reader-card-terminal #hc-article-body>h2{margin-top:2.2em}
#hc-page#hc-page .hc-reader-card-terminal #hc-article-body>h2::before{content:"## ";
  color:var(--hc-rd-accent)}
#hc-page#hc-page .hc-reader-card-terminal #hc-article-body :is(pre,code){
  background:color-mix(in srgb,var(--ink,#0f172a) 5%,var(--card,#fff))!important;
  border:1px solid var(--hc-rd-rule)!important;border-radius:6px!important}
#hc-page#hc-page .hc-reader-card-terminal #hc-article-body a{color:var(--hc-rd-accent)!important}
html[data-theme="dark"] #hc-page#hc-page .hc-art-card.hc-reader-card-terminal{
  background:var(--hc-d-card,#0b1020)!important;border-color:var(--hc-d-line,#1f2a44)!important}
html[data-theme="dark"] #hc-page#hc-page .hc-reader-card-terminal #hc-article-body :is(pre,code){
  background:color-mix(in srgb,var(--hc-d-bg,#050914) 88%,#000)!important;
  border-color:var(--hc-d-line,#1f2a44)!important}

/* ── EVERY READER, WITH THE RAIL SWITCHED OFF ────────────────────────────────
   Owner: "you must fix each so when sidebar is turned off, they are well
   positioned and not shifted to one side."

   The reading column lives in a two-column grid. With the rail off the aside
   is not rendered at all, so the card kept whichever track it was assigned —
   and on a left-rail workspace that is column 2, which parks the article
   against the right edge with a rail-width hole beside it. One column, centred,
   whichever side the rail was on and whichever layout is selected. The card's
   own max-width still applies, so FOCUS stays its narrow measure and the rest
   fill the column. */
#hc-page#hc-page .hc-art-layout.hc-art-no-rail{grid-template-columns:minmax(0,1fr)!important;
  max-width:100%!important;justify-items:center!important}
#hc-page#hc-page .hc-art-layout.hc-art-no-rail>.hc-art-card{grid-column:1!important;
  width:100%;margin-inline:auto!important}

/* ══ PHASE10K17_2026-08-12: CATEGORY ARCHITECTURES ═══════════════════════════
   Owner: "I do not want more ordinary category cards, basic accordions, simple
   lists, or slightly modified grids… The goal is not simply to make the cards
   prettier. The goal is to create different information architectures."

   THE SEPARATION THIS BLOCK OBEYS, which is the owner's §25:

     an ARCHITECTURE defines   hierarchy, grid, columns, grouping, density,
                               navigation and responsive behaviour;
     the DESIGN SYSTEM defines colour, type, radius, border, shadow, hover.

   So there is not one font-family, font-size, hardcoded colour, fixed max-width
   or invented card style below. Colour comes from the workspace tokens, spacing
   is in `em` so it scales with the operator's type, and anything drawing a card
   inherits the Design Studio card tokens rather than replacing them. A layout
   that wants a surface asks for `var(--card)`; a layout that wants no surface
   simply does not draw one.

   The retired five (compact index, accordion sections, editorial index,
   weighted names, editorial lines) resolve to these in help.php. */

#hc-page#hc-page .hc-dir{
  --hc-a-accent:var(--brand,var(--accent,#6366f1));
  --hc-a-rule:color-mix(in srgb,var(--ink,#0f172a) 12%,transparent);
  --hc-a-rule-soft:color-mix(in srgb,var(--ink,#0f172a) 7%,transparent);
  --hc-a-quiet:color-mix(in srgb,var(--ink,#0f172a) 58%,transparent);
  --hc-a-wash:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 5%,transparent)}

/* ── ARCHITECTURAL DIRECTORY ─────────────────────────────────────────────────
   §3. Each category is a structured information SECTION, not a card: a numeric
   marker in its own column, the name and description as the spine, and the
   articles set in columns beside them. Hierarchy, alignment and a hairline do
   the work that a border and a shadow were doing before. */
#hc-page#hc-page .hc-dir.hc-dir-v-archdir{display:block;background:transparent!important}
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-card{
  display:grid;grid-template-columns:4.5em minmax(0,15em) minmax(0,1fr);
  align-items:start;gap:0 2.4em;padding:2.2em 0;
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-top:1px solid var(--hc-a-rule)!important;border-radius:0!important}
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-card:first-child{border-top:0!important}
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-head{display:contents}
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-num{grid-column:1;grid-row:1/span 2;
  color:var(--hc-a-accent);font-variant-numeric:tabular-nums;opacity:.9}
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-title{grid-column:2;grid-row:1;
  display:block;padding:0;text-transform:uppercase}
/* The description and the article list live INSIDE the body wrapper, so the
   wrapper and its inner box are flattened with display:contents — otherwise the
   description inherits the body's grid cell and sits in the article column,
   which is exactly what it did on the first render. Flattening is safe here
   because this architecture is never collapsible. */
#hc-page#hc-page .hc-dir-v-archdir :is(.hc-dir-body,.hc-dir-inner){display:contents}
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-desc{grid-column:2;grid-row:2;
  margin:.5em 0 0;color:var(--hc-a-quiet)}
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-list{grid-column:3;grid-row:1/span 3}
/* PHASE_HC_PRESETS_20 — the subcategory chips (.hc-dir-kids, drawn when the card
   content is "both"/"subcategories") were never placed: with the body flattened they
   auto-placed into column 1 — the 4.5em NUMBER column — and every chip wrapped one
   syllable per line ("DNS Man age ment"). They belong under the description. */
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-kids{grid-column:2;grid-row:3;margin:.9em 0 0}
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-list{
  display:grid;grid-template-columns:repeat(var(--hc-archdir-cols,2),minmax(0,1fr));
  gap:.1em 2.4em;align-content:start}
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-list a{padding:.45em 0;border-bottom:0}
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-list a:hover{padding-inline-start:.5em}
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-more{grid-column:3;margin-top:1em;justify-self:start}
#hc-page#hc-page .hc-dir-v-archdir .hc-dir-toggle{display:none}
@media(max-width:1100px){
  #hc-page#hc-page .hc-dir-v-archdir .hc-dir-card{grid-template-columns:3.4em minmax(0,1fr);gap:0 1.6em}
  #hc-page#hc-page .hc-dir-v-archdir .hc-dir-title,
  #hc-page#hc-page .hc-dir-v-archdir .hc-dir-kids,
  #hc-page#hc-page .hc-dir-v-archdir .hc-dir-desc{grid-column:2}
  #hc-page#hc-page .hc-dir-v-archdir .hc-dir-body{grid-column:2;grid-row:auto;margin-top:1.1em}
  #hc-page#hc-page .hc-dir-v-archdir .hc-dir-more{grid-column:2}}
@media(max-width:640px){
  #hc-page#hc-page .hc-dir-v-archdir .hc-dir-card{grid-template-columns:minmax(0,1fr);gap:0}
  #hc-page#hc-page .hc-dir-v-archdir .hc-dir-num{grid-row:auto;grid-column:1;margin-bottom:.4em}
  #hc-page#hc-page .hc-dir-v-archdir :is(.hc-dir-title,.hc-dir-desc,.hc-dir-kids,.hc-dir-body,.hc-dir-more){grid-column:1}
  #hc-page#hc-page .hc-dir-v-archdir .hc-dir-list{grid-template-columns:minmax(0,1fr)}}

/* ── COMMAND DIRECTORY ───────────────────────────────────────────────────────
   §10. Built for a knowledge base that is too large for cards: a category is a
   heading with its count on the far right, a rule under it, and its articles in
   tight columns. Density first, scanned top to bottom, still premium because the
   rhythm and the alignment are exact. */
#hc-page#hc-page .hc-dir.hc-dir-v-cmddir{display:grid;gap:2.2em;background:transparent!important}
#hc-page#hc-page .hc-dir-v-cmddir .hc-dir-card{
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;padding:0}
#hc-page#hc-page .hc-dir-v-cmddir .hc-dir-head{
  display:flex;align-items:baseline;gap:1em;padding:0 0 .5em;
  border-bottom:1px solid var(--hc-a-rule)}
#hc-page#hc-page .hc-dir-v-cmddir .hc-dir-title{flex:1;padding:0;
  text-transform:uppercase}
#hc-page#hc-page .hc-dir-v-cmddir .hc-dir-count{
  margin-inline-start:auto;color:var(--hc-a-quiet);font-variant-numeric:tabular-nums}
#hc-page#hc-page .hc-dir-v-cmddir .hc-dir-body{height:auto!important;overflow:visible!important;opacity:1!important}
#hc-page#hc-page .hc-dir-v-cmddir .hc-dir-list{
  display:grid;grid-template-columns:repeat(var(--hc-cmddir-cols,2),minmax(0,1fr));
  gap:0 2.4em;margin-top:.7em}
#hc-page#hc-page .hc-dir-v-cmddir .hc-dir-list a{padding:.34em 0;border-bottom:0}
#hc-page#hc-page .hc-dir-v-cmddir .hc-dir-list a:hover{color:var(--hc-a-accent)}
#hc-page#hc-page .hc-dir-v-cmddir .hc-dir-more{margin-top:.7em;justify-self:start}
#hc-page#hc-page .hc-dir-v-cmddir .hc-dir-toggle{display:none}
@media(max-width:900px){#hc-page#hc-page .hc-dir-v-cmddir .hc-dir-list{grid-template-columns:minmax(0,1fr)}}

/* ── KNOWLEDGE BLUEPRINT ─────────────────────────────────────────────────────
   §4. A category BRANCHES into its articles. The connectors are drawn with
   hairlines from the theme's own ink, not a filesystem-tree glyph, and several
   branches sit beside one another wherever the width allows — which is the
   difference between an information map and a folder listing. Disclosure is
   kept from the accordion it replaces, because a blueprint you can fold is what
   makes a large one readable. */
#hc-page#hc-page .hc-dir.hc-dir-v-blueprint{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(22em,100%),1fr));
  gap:1.6em;align-items:start}
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-card{padding:1.4em 1.5em}
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-head{align-items:center;gap:.7em}
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-desc{margin:.6em 0 .9em;color:var(--hc-a-quiet)}
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-list{position:relative;
  margin-inline-start:.55em;padding-inline-start:1.5em}
/* The spine: one line, stopping at the last branch rather than running past it. */
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-list::before{content:"";position:absolute;
  inset-inline-start:0;top:0;bottom:calc(100% - .95em);width:1px;
  background:var(--hc-a-rule);height:auto}
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-list{--hc-bp-spine:1px}
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-list li{position:relative}
/* Each branch draws its own share of the spine plus the stub into the row, so
   the last item ends the line naturally — no separate "last child" hack. */
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-list li::before{content:"";position:absolute;
  inset-inline-start:-1.5em;top:0;height:.95em;width:1px;background:var(--hc-a-rule)}
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-list li:not(:last-child)::after{content:"";
  position:absolute;inset-inline-start:-1.5em;top:.95em;bottom:0;width:1px;background:var(--hc-a-rule)}
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-list li>a::before{content:"";position:absolute;
  inset-inline-start:-1.5em;top:.95em;width:1.1em;height:1px;background:var(--hc-a-rule)}
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-list a{padding:.42em 0;border-bottom:0}
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-list a:hover{color:var(--hc-a-accent)}
#hc-page#hc-page .hc-dir-v-blueprint .hc-dir-more{margin-top:.9em}

/* ── CORPORATE KNOWLEDGE GRID ────────────────────────────────────────────────
   §5. Categories as knowledge MODULES on a twelve-column field, deliberately
   not all the same size: the first is a featured module, the next two are wide,
   the rest are standard. That is where the rhythm comes from — a generic grid
   gives every module the same weight, which is the thing this replaces. */
#hc-page#hc-page .hc-dir.hc-dir-v-kgrid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.3em;align-items:stretch}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card{grid-column:span 4;
  display:flex;flex-direction:column;padding:1.5em 1.6em}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card:first-child{grid-column:span 6}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card:nth-child(2),
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card:nth-child(3){grid-column:span 3}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card:nth-child(7n+6){grid-column:span 6}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-num{color:var(--hc-a-accent);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:.35em}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-head{display:block}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-title{padding:0;text-transform:uppercase}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-count{margin-inline-start:.6em;color:var(--hc-a-quiet)}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-desc{margin:.5em 0 1em;color:var(--hc-a-quiet)}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-body{flex:1}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-list a{display:flex;align-items:center;gap:.6em;
  padding:.5em 0;border-bottom:1px solid var(--hc-a-rule-soft)}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-list a::after{content:"→";margin-inline-start:auto;
  color:var(--hc-a-quiet);transition:transform .2s ease,color .2s ease}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-list a:hover::after{color:var(--hc-a-accent);transform:translateX(.25em)}
#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-more{margin-top:auto;padding-top:1em}
@media(max-width:1100px){#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card,
  #hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card:first-child,
  #hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card:nth-child(2),
  #hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card:nth-child(3),
  #hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card:nth-child(7n+6){grid-column:span 6}}
@media(max-width:720px){#hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card,
  #hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card:first-child,
  #hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card:nth-child(2),
  #hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card:nth-child(3),
  #hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card:nth-child(7n+6){grid-column:span 12}}

/* ── KNOWLEDGE CAMPUS ────────────────────────────────────────────────────────
   §6. Categories as DEPARTMENTS: columns of a single directory rather than a
   row of cards, so a Help Center with many product areas reads as one map. No
   surfaces at all — the separation is done with column rules and heading scale. */
#hc-page#hc-page .hc-dir.hc-dir-v-campus{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15em,100%),1fr));
  gap:2.4em 2.6em;align-items:start;background:transparent!important}
#hc-page#hc-page .hc-dir-v-campus .hc-dir-card{
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;padding:0;
  border-inline-start:1px solid var(--hc-a-rule)!important;padding-inline-start:1.4em}
#hc-page#hc-page .hc-dir-v-campus .hc-dir-head{display:block;padding:0}
#hc-page#hc-page .hc-dir-v-campus .hc-dir-num{display:block;color:var(--hc-a-accent);
  font-variant-numeric:tabular-nums;margin-bottom:.3em}
#hc-page#hc-page .hc-dir-v-campus .hc-dir-title{padding:0;display:block;
  text-transform:uppercase}
#hc-page#hc-page .hc-dir-v-campus .hc-dir-list{margin-top:.8em}
#hc-page#hc-page .hc-dir-v-campus .hc-dir-list a{padding:.34em 0;border-bottom:0;
  color:var(--hc-a-quiet)}
#hc-page#hc-page .hc-dir-v-campus .hc-dir-list a:hover{color:var(--hc-a-accent)}
#hc-page#hc-page .hc-dir-v-campus .hc-dir-more{margin-top:.7em}
#hc-page#hc-page .hc-dir-v-campus .hc-dir-toggle,

/* ── THE INDEX ───────────────────────────────────────────────────────────────
   Owner supplied a reference for this one — a run of links in columns, each name
   set in the brand with a chevron after it and two quiet lines underneath — and
   asked for it "but better", card-less, at 2 to 4 across from the settings.

   Better, concretely:
     · the chevron TRAILS the name instead of floating at the far right of an
       empty column, so a long name and a short one both read as one object, and
       it advances on hover;
     · the second line is real information — the category's own description and
       how much is inside it — not a tagline someone has to write;
     · the whole entry is a hit target, not just the words, and it has a visible
       focus ring, which a bare run of links usually does not;
     · every entry is the same shape. Owner: "only categories, it shouldn't show
       sub in it" — children under some entries and not others make the columns
       ragged and turn a flat index into a half-shown tree.

   Column count is the operator's: --hc-krail-cols carries "Columns" from the
   presentation options, 1 to 4, and falls back to a responsive auto-fit so the
   default is sensible without anyone touching it.

   No card, no rule, no panel — the entries are held apart by space alone, which
   is what makes it read as an index rather than a table. Nothing here sets type;
   the brand name colour and the quiet supporting colour are both tokens. */
#hc-page#hc-page .hc-dir.hc-dir-v-krail{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(20em,100%),1fr));
  gap:.9em 1em;align-items:start;background:transparent!important;
  /* pulled out by exactly the entry's own padding, so the first column still
     lines up with the section label above it */
  margin-inline:-1.1em}
/* The entry carries REAL padding rather than relying on the hover box hanging
   outside it. With padding:0 the wash was the text's own box: the description
   wrapped to the full column width and every line ended ON the wash's edge,
   which reads as text pressed against a border. Padding also makes the breathing
   room independent of the title's font size, which a negative em inset was not. */
#hc-page#hc-page .hc-dir-v-krail .hc-dir-card{
  position:relative;margin:0;padding:.85em 1.1em;display:block;
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important}
/* One hit target. The name is the link; this stretches it over the whole entry
   so the description and the count are clickable too — without nesting anything
   inside the anchor, which would be invalid. */
/* The hit target and the wash are the entry's padded box exactly — its
   containing block is the card, not the title. */
#hc-page#hc-page .hc-dir-v-krail .hc-dir-title::before{
  content:"";position:absolute;inset:0;border-radius:.7em;z-index:1}
#hc-page#hc-page .hc-dir-v-krail .hc-dir-card:hover .hc-dir-title::before{
  background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 6%,transparent)}
#hc-page#hc-page .hc-dir-v-krail .hc-dir-title:focus-visible::before{
  outline:2px solid var(--hc-a-accent);outline-offset:0}
#hc-page#hc-page .hc-dir-v-krail .hc-dir-title:focus-visible{outline:none}

#hc-page#hc-page .hc-dir-v-krail .hc-dir-head{
  display:flex;align-items:center;gap:.5em;padding:0;margin:0;
  background:transparent!important;border:0!important}
/* The icon is the reference's one omission worth correcting: a run of names in
   one colour is hard to re-find, and a glyph gives each entry a landmark. Sized
   in em so it tracks the name, tinted so it never competes with it. */
#hc-page#hc-page .hc-dir-v-krail .hc-dir-ico{
  flex:0 0 auto;width:1.15em;height:1.15em;padding:0;
  color:var(--hc-a-accent);opacity:.75;
  background:none!important;border:0!important;box-shadow:none!important}
#hc-page#hc-page .hc-dir-v-krail .hc-dir-title{
  display:inline-flex;align-items:center;gap:.45em;padding:0;
  color:var(--hc-a-accent)!important}
/* The chevron, drawn rather than shipped: two borders turned 45°, sized in em so
   it tracks whatever size the operator has set the name to. */
#hc-page#hc-page .hc-dir-v-krail .hc-dir-title::after{
  content:"";flex:0 0 auto;width:.5em;height:.5em;margin-inline-start:.2em;
  border-top:.1em solid currentColor;border-right:.1em solid currentColor;
  transform:rotate(45deg);transition:transform .18s ease,margin .18s ease}
#hc-page#hc-page .hc-dir-v-krail .hc-dir-card:hover .hc-dir-title::after{
  margin-inline-start:.45em}
/* The two quiet lines. */
#hc-page#hc-page .hc-dir-v-krail .hc-dir-body{
  height:auto!important;overflow:visible!important;opacity:1!important;
  display:block;padding:0!important;background:none!important;border:0!important}
#hc-page#hc-page .hc-dir-v-krail .hc-dir-inner{padding:0!important}
#hc-page#hc-page .hc-dir-v-krail .hc-dir-desc{
  margin:.45em 0 0;color:var(--hc-a-quiet);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#hc-page#hc-page .hc-dir-v-krail .hc-dir-count{
  display:block;margin:.2em 0 0;padding:0;background:none!important;
  color:var(--hc-a-quiet);font-variant-numeric:tabular-nums}
#hc-page#hc-page .hc-dir-v-krail .hc-dir-more{display:none}
#hc-page#hc-page .hc-dir-v-krail .hc-dir-toggle{display:none}
/* A FIXED COLUMN COUNT NEEDS SHRINKABLE TRACKS.
   With no setting, auto-fit decides and the 20em minimum is what keeps a name
   from being squeezed. The moment the operator names a count, that minimum
   becomes a floor the grid cannot honour: measured in Chrome, an explicit 3 at a
   760px container laid out 3 × 300px inside 793px of room and pushed the page
   sideways. So a chosen count sizes on minmax(0,1fr) — exactly N columns, each
   free to shrink — and the count steps down on its own before the columns get
   too narrow to read. */
#hc-page#hc-page .hc-dir.hc-dir-v-krail.hc-arch-cols-set{
  grid-template-columns:repeat(var(--hc-krail-cols,2),minmax(0,1fr))}
@media (max-width:1000px){
  #hc-page#hc-page .hc-dir.hc-dir-v-krail.hc-arch-cols-set{
    grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* One column on a phone whatever the operator chose: four names across a 390px
   screen is one word per line. */
@media (max-width:640px){
  #hc-page#hc-page .hc-dir.hc-dir-v-krail,
  #hc-page#hc-page .hc-dir.hc-dir-v-krail.hc-arch-cols-set{
    grid-template-columns:1fr;gap:.4em}
}

/* ── SPINE CARD ──────────────────────────────────────────────────────────────
   Replaces the editorial composition, which the owner rejected on sight and was
   right to: with no ability to scale type, an editorial layout collapses into
   small text in a large grid. This one takes its hierarchy from STRUCTURE, which
   is what a layout is allowed to own.

   Two ideas make it unlike every other card in the set:

     THE SPINE — the section number, set vertically, IS a full-height band down
     the leading edge. The card has an axis and a silhouette before a word is
     read, the way a bound volume does.

     THE WELL — the articles sit in a RECESSED panel inside the card rather than
     as rows on its face, so the category identity and its contents read as two
     different kinds of thing.

   THE BAND IS A GRID COLUMN, NOT A POSITIONED OVERLAY. Two earlier attempts put
   the band behind absolutely-positioned children: the first made the head a
   narrow column and the title — a CHILD of the head — could not leave it, so it
   wrapped one letter per line; the second placed the number and count with
   insets, which resolve against the card's PADDING box and landed them on top of
   the title. Flattening the head with `display:contents` makes the number, the
   title and the body siblings in the card's own grid, so each one simply sits in
   its column. No overlay, nothing to mis-resolve.

   Every value is a token: the band is a brand tint, the well a shade of page
   ink, and the card keeps the Design Studio radius, border and shadow. */
#hc-page#hc-page .hc-dir.hc-dir-v-spine{
  --hc-spine-w:3.2em;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(23em,100%),1fr));
  gap:1.4em;align-items:stretch}
#hc-page#hc-page .hc-dir-v-spine .hc-dir-card{
  display:grid;grid-template-columns:var(--hc-spine-w) auto minmax(0,1fr);
  grid-template-rows:auto 1fr;padding:0!important;overflow:hidden}
/* ONLY the head is flattened, and only so the number can become the band. The
   BODY stays a single grid item: flattening it too promoted every inner element
   — subcategory chips included — into grid items, which auto-placed into the
   band column and wrapped one letter per line, leaving the content column of a
   subcategory-only card completely empty. Everything inside the body now flows
   inside the body, where it belongs. */
#hc-page#hc-page .hc-dir-v-spine .hc-dir-head{display:contents}
#hc-page#hc-page .hc-dir-v-spine .hc-dir-body{grid-column:2/-1;grid-row:2;
  height:auto!important;overflow:visible!important;opacity:1!important}
#hc-page#hc-page .hc-dir-v-spine .hc-dir-inner{display:flex;flex-direction:column;
  height:100%;padding:0!important}
/* The number IS the band: it spans every row and paints the tint itself. */
#hc-page#hc-page .hc-dir-v-spine .hc-dir-num{grid-column:1;grid-row:1/-1;
  min-height:100%;
  display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;letter-spacing:.16em;
  color:var(--hc-a-accent);font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 10%,transparent);
  border-inline-end:1px solid var(--hc-a-rule)}
#hc-page#hc-page .hc-dir-v-spine .hc-dir-title{grid-column:3;grid-row:1;
  display:block;padding:1.2em 1.3em 0 .7em}
/* With no icon rendered the name keeps the card's own left margin rather than
   sitting against an empty column. */
#hc-page#hc-page .hc-dir-v-spine .hc-dir-card:not(:has(.hc-dir-ico)) .hc-dir-title{padding-inline-start:1.3em}
#hc-page#hc-page .hc-dir-v-spine .hc-dir-desc{margin:.45em 1.3em 0;color:var(--hc-a-quiet)}
/* The well: recessed, its own hairline, inset from the card's edges. */
#hc-page#hc-page .hc-dir-v-spine .hc-dir-list{margin:1em 1.3em 0;padding:.35em .9em;
  border-radius:calc(var(--card-radius,14px) * .55);
  background:color-mix(in srgb,var(--ink,#0f172a) 4%,transparent);
  border:1px solid var(--hc-a-rule-soft)}
#hc-page#hc-page .hc-dir-v-spine .hc-dir-list a{padding:.46em 0;border-bottom:0}
#hc-page#hc-page .hc-dir-v-spine .hc-dir-list li+li{border-top:1px solid var(--hc-a-rule-soft)}
#hc-page#hc-page .hc-dir-v-spine .hc-dir-list a:hover{color:var(--hc-a-accent)}
/* The continuation link is pinned to the foot of the card, so a category with
   two articles and one with twelve still line up across a row. The gap above it
   is PADDING, not margin: `margin-top:auto` is what does the pinning, so a top
   margin cannot also hold a minimum distance — on a card whose content already
   fills the height the auto resolves to zero and the link ends up tight under
   the well, which is exactly what the owner caught. Padding survives that. */
#hc-page#hc-page .hc-dir-v-spine .hc-dir-more{margin:0 1.3em 1.4em;
  margin-top:auto;padding-top:1.5em;align-self:end}
/* THE ICON SITS WITH THE CATEGORY NAME. Owner: "also let it carry categories
   icons" — then, on seeing it on the band: "no not there, on where the category
   name is." So the card carries a third column: the band, the icon, and the
   content. The icon and the name share the top row as one unit; everything below
   spans from the icon's edge so the block still reads as one column of text. */
#hc-page#hc-page .hc-dir-v-spine .hc-dir-ico{grid-column:2;grid-row:1;
  display:grid;place-items:center;align-self:center;
  margin:1.2em 0 0 1.3em;width:1.8em;height:1.8em;color:var(--hc-a-accent);
  background:none!important;border:0!important;box-shadow:none!important;
  border-radius:0!important}
#hc-page#hc-page .hc-dir-v-spine .hc-dir-ico :is(svg,img,i){width:1.45em;height:1.45em;
  max-width:100%}
#hc-page#hc-page .hc-dir-v-spine .hc-dir-toggle{display:none}
html[data-theme="dark"] #hc-page#hc-page .hc-dir-v-spine .hc-dir-list{
  background:color-mix(in srgb,#000 22%,transparent)}
@media(max-width:520px){#hc-page#hc-page .hc-dir.hc-dir-v-spine{--hc-spine-w:2.6em}}

/* ── THE LARGE BENTO TILE FILLS ITS OWN SPACE ────────────────────────────────
   §11-13. Every other tile obeys the configured article count exactly and is
   untouched. The one tile CSS gives `span 2 / span 2` has roughly four times the
   room, so it showed the same four rows with a hole beneath them. Its extra
   rows ship hidden and the client reveals only as many as measure in — with
   JavaScript off, the tile shows precisely the configured count. */
#hc-page#hc-page .hc-dir-v-bento .hc-bento-extra[hidden]{display:none!important}
#hc-page#hc-page .hc-dir-v-bento .hc-dir-card:nth-child(1) .hc-dir-inner{
  display:flex;flex-direction:column;height:100%}
#hc-page#hc-page .hc-dir-v-bento .hc-dir-card:nth-child(1) .hc-dir-more{margin-top:auto}

/* ══ PHASE10K19_2026-08-12: THE SCROLLING DECK IS A SLIDER ═══════════════════
   Owner §14-15: "it should work like a polished slider/carousel rather than a
   horizontally scrolling container. Remove the visible browser scrollbar. Add
   proper controls… cards need to fit the available width correctly. Do not leave
   random partial cards visible because the layout calculation is poor."

   The scroll container STAYS — it is what gives momentum, snap, touch and
   trackpad support for free, and replacing it with transforms would cost all of
   that and a pile of JavaScript (§32). What changes is everything around it: the
   native scrollbar goes, real controls arrive, and the card width is computed
   from the container so a row always divides evenly.

   Card width: `(100% - gaps) / n`, where n is the number of cards per view for
   the breakpoint. That is why a row never ends in a sliver — the only partial
   card is the one the operator deliberately asks for with Peek. */
/* THE ARROWS RIDE THE SLIDER. Owner: "remove from under, put it on the slider
   left and right." They sat above first, then beneath; on the track itself they
   are where a hand already is.

   The deck is a GRID whose first cell holds both the track and the control
   layer, so the arrows centre on the CARDS exactly — anchoring them to the deck
   instead would centre them on the cards plus the dot rail and sit them low. The
   layer ignores the pointer; only the buttons take it, so a drag across the
   middle of the deck still reaches the track. */
#hc-page#hc-page .hc-deck{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr);
  --hc-deck-per:3;--hc-deck-gap:1.1em}
#hc-page#hc-page .hc-deck .hc-dir-v-rail{grid-area:1/1}
#hc-page#hc-page .hc-deck-head{grid-area:1/1;z-index:2;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 .45em;margin:0}
#hc-page#hc-page .hc-deck-dots{grid-area:2/1}
#hc-page#hc-page .hc-deck-ctrls{display:contents}
#hc-page#hc-page .hc-deck-head .hc-deck-btn{pointer-events:auto;
  box-shadow:0 6px 20px -8px color-mix(in srgb,var(--ink,#0f172a) 45%,transparent)}
/* PLAY EARNS ITS PLACE BY GETTING OUT OF THE WAY. Owner: "do we need play and
   pause? usually it stops on mouse hover and you can operate it manually."

   Hover and manual control do cover a mouse — but there is no hover on touch,
   and a keyboard or screen-reader visitor has no way to stop motion that starts
   on its own, which is what WCAG 2.2.2 asks for on anything moving for more than
   five seconds. So the control stays and hides instead: invisible until the deck
   is hovered or something inside it takes focus. It keeps its box either way, so
   tabbing to it reveals it rather than moving the layout. */
#hc-page#hc-page .hc-deck-play{position:absolute;inset-block-start:.6em;inset-inline-end:.6em;
  opacity:0;transition:opacity .18s ease}
#hc-page#hc-page .hc-deck:hover .hc-deck-play,
#hc-page#hc-page .hc-deck:focus-within .hc-deck-play,
#hc-page#hc-page .hc-deck-play:focus-visible{opacity:1}
/* Once the visitor has driven it themselves, the deck stays where they left it
   and the control reads "play" — the way back, not a toggle they must guess at. */
#hc-page#hc-page .hc-deck.is-stopped .hc-deck-play{opacity:1}
@media(prefers-reduced-motion:reduce){#hc-page#hc-page .hc-deck-play{opacity:1;transition:none}}
#hc-page#hc-page .hc-deck-btn{display:grid;place-items:center;width:2.4em;height:2.4em;
  border-radius:999px;cursor:pointer;
  background:var(--card,#fff);color:var(--ink,#0f172a);
  border:1px solid var(--hc-a-rule);
  transition:background-color .18s ease,border-color .18s ease,opacity .18s ease}
#hc-page#hc-page .hc-deck-btn svg{width:1.1em;height:1.1em}
#hc-page#hc-page .hc-deck-btn:hover{border-color:var(--hc-a-accent);color:var(--hc-a-accent)}
#hc-page#hc-page .hc-deck-btn:focus-visible{outline:2px solid var(--hc-a-accent);outline-offset:2px}
#hc-page#hc-page .hc-deck-btn[disabled]{opacity:0;pointer-events:none!important}
#hc-page#hc-page .hc-deck-btn[disabled]:hover{border-color:var(--hc-a-rule);color:var(--ink,#0f172a)}
/* The play control shows the action it will PERFORM, so a running deck offers
   pause. One icon at a time, swapped by the pressed state. */
#hc-page#hc-page .hc-deck-play .hc-deck-i-play{display:none}
#hc-page#hc-page .hc-deck-play[aria-pressed="false"] .hc-deck-i-play{display:block}
#hc-page#hc-page .hc-deck-play[aria-pressed="false"] .hc-deck-i-pause{display:none}

/* THE TRACK. No native scrollbar in any engine, and no reserved gutter either. */
#hc-page#hc-page .hc-deck .hc-dir-v-rail{
  scrollbar-width:none!important;-ms-overflow-style:none;
  grid-auto-columns:calc((100% - (var(--hc-deck-per) - 1) * var(--hc-deck-gap)) / var(--hc-deck-per))!important;
  gap:var(--hc-deck-gap);scroll-padding-inline:0;scroll-behavior:smooth}
#hc-page#hc-page .hc-deck .hc-dir-v-rail::-webkit-scrollbar{display:none!important;height:0!important;width:0!important}
#hc-page#hc-page .hc-deck .hc-dir-v-rail:focus-visible{outline:2px solid var(--hc-a-accent);outline-offset:3px}
/* Peek is the ONE deliberate partial card: the track shows a slice of the next
   one so the deck reads as continuing. Off by default. */
#hc-page#hc-page .hc-deck.hc-deck-peek .hc-dir-v-rail{
  grid-auto-columns:calc((100% - (var(--hc-deck-per) - 1) * var(--hc-deck-gap) - 3.2em) / var(--hc-deck-per))!important}
#hc-page#hc-page .hc-deck.is-dragging .hc-dir-v-rail{scroll-behavior:auto;cursor:grabbing;scroll-snap-type:none}
#hc-page#hc-page .hc-deck.is-dragging .hc-dir-v-rail a{pointer-events:none}

/* The dot rail: one control per page, not per card. */
#hc-page#hc-page .hc-deck-dots{display:flex;justify-content:center;gap:.45em;margin-top:.7em}
#hc-page#hc-page .hc-deck-dot{width:.55em;height:.55em;border-radius:999px;cursor:pointer;
  border:0;padding:0;background:color-mix(in srgb,var(--ink,#0f172a) 22%,transparent);
  transition:background-color .2s ease,width .2s ease}
#hc-page#hc-page .hc-deck-dot[aria-selected="true"]{background:var(--hc-a-accent);width:1.4em}
#hc-page#hc-page .hc-deck-dot:focus-visible{outline:2px solid var(--hc-a-accent);outline-offset:2px}

/* Cards per view by breakpoint — this is what stops the ragged partial card. */
@media(max-width:1200px){#hc-page#hc-page .hc-deck{--hc-deck-per:2.5}}
@media(max-width:900px){#hc-page#hc-page .hc-deck{--hc-deck-per:2}}
@media(max-width:640px){#hc-page#hc-page .hc-deck{--hc-deck-per:1;--hc-deck-gap:.8em}}
@media(prefers-reduced-motion:reduce){
  #hc-page#hc-page .hc-deck .hc-dir-v-rail{scroll-behavior:auto}
  #hc-page#hc-page .hc-deck-dot{transition:none}}

/* ══ PHASE10K20_2026-08-12: A-Z INDEX, CONTENTS LIST, OUTLINE TREE ═══════════
   §16-19. Three presentations the owner kept but called out for the same fault:
   the text sits too close to its boundaries, and hover makes it worse because
   the hover state itself moves the text toward the edge. Plus the outline tree
   spends a full row on one tree when three fit.

   The rule applied throughout: a hover may change PAINT and it may shift text
   INWARDS, never outwards, and the room it needs is reserved in the resting
   state so nothing reflows. Padding is in `em`, so it tracks the operator's own
   type size rather than fighting it. */

/* ── A–Z INDEX ──────────────────────────────────────────────────────────── */
#hc-page#hc-page .hc-dir-v-index .hc-dir-card{padding:.5em .9em .7em;border-radius:10px;
  transition:background-color .18s ease}
#hc-page#hc-page .hc-dir-v-index .hc-dir-card:hover{
  background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 4%,transparent)}
#hc-page#hc-page .hc-dir-v-index .hc-dir-head{padding:0 0 .2em}
#hc-page#hc-page .hc-dir-v-index .hc-dir-inner{padding:0}
#hc-page#hc-page .hc-dir-v-index .hc-dir-list{gap:.15em 1.4em}
/* The row reserves its hover indent up front, so nothing shifts on the way in. */
#hc-page#hc-page .hc-dir-v-index .hc-dir-list a{padding:.3em .5em .3em .55em;
  border-radius:7px;transition:background-color .16s ease,color .16s ease}
#hc-page#hc-page .hc-dir-v-index .hc-dir-list a:hover{
  background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 8%,transparent);
  color:var(--hc-a-accent);opacity:1}
#hc-page#hc-page .hc-dir-v-index .hc-dir-list a:focus-visible{
  outline:2px solid var(--hc-a-accent);outline-offset:1px}
/* The letter rule becomes a sticky marker: on a long index it is what tells you
   where you are, and it costs nothing but `position:sticky`. */
#hc-page#hc-page .hc-dir-v-index .hc-dir-letter{position:sticky;top:4.4em;z-index:2;
  padding:.35em 0 .3em;margin-top:1.6em;
  background:linear-gradient(var(--bg,#f8fafc) 72%,transparent)}
#hc-page#hc-page .hc-dir-v-index .hc-dir-letter:first-child{margin-top:0}
html[data-theme="dark"] #hc-page#hc-page .hc-dir-v-index .hc-dir-letter{
  background:linear-gradient(var(--hc-d-bg,#0b1220) 72%,transparent)}

/* ── CONTENTS LIST ──────────────────────────────────────────────────────── */
#hc-page#hc-page .hc-dir-v-toc .hc-dir-card{padding:0;margin:0;break-inside:avoid}
#hc-page#hc-page .hc-dir-v-toc .hc-dir-title{padding:.55em .8em;border-radius:9px;
  gap:.7em;transition:background-color .16s ease,color .16s ease}
#hc-page#hc-page .hc-dir-v-toc .hc-dir-title:hover{
  background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 7%,transparent)}
#hc-page#hc-page .hc-dir-v-toc .hc-dir-title:focus-visible{
  outline:2px solid var(--hc-a-accent);outline-offset:1px}
/* The dot leader needs its own breathing room or it collides with both ends. */
#hc-page#hc-page .hc-dir-v-toc .hc-dir-title::after{margin:0 .55em}
#hc-page#hc-page .hc-dir-v-toc .hc-dir-count{padding-inline-start:.2em}


/* ── §26 ARCHITECTURE CONTROLS ───────────────────────────────────────────────
   Each of these changes STRUCTURE only. Colour, type, radius, border, shadow and
   hover remain the design system's, exactly as §25 requires — which is why there
   is not one colour or font declaration in this block. */

/* Density: the rhythm of the whole architecture, expressed as a multiplier on
   the em-based spacing every layout above already uses. */
#hc-page#hc-page .hc-dir.hc-arch-d-compact{--hc-arch-scale:.68}
#hc-page#hc-page .hc-dir.hc-arch-d-roomy{--hc-arch-scale:1.35}
#hc-page#hc-page .hc-arch-d-compact.hc-dir-v-archdir .hc-dir-card{padding:1.5em 0}
#hc-page#hc-page .hc-arch-d-roomy.hc-dir-v-archdir .hc-dir-card{padding:3em 0}
#hc-page#hc-page .hc-arch-d-compact.hc-dir-v-cmddir{gap:1.5em}
#hc-page#hc-page .hc-arch-d-roomy.hc-dir-v-cmddir{gap:3em}
#hc-page#hc-page .hc-arch-d-compact :is(.hc-dir-list a,.hc-dir-list li>a){padding-block:.26em}
#hc-page#hc-page .hc-arch-d-roomy :is(.hc-dir-list a,.hc-dir-list li>a){padding-block:.6em}
#hc-page#hc-page .hc-arch-d-compact.hc-dir-v-blueprint,
#hc-page#hc-page .hc-arch-d-compact.hc-dir-v-spine,
#hc-page#hc-page .hc-arch-d-compact.hc-dir-v-tree{gap:.8em}
#hc-page#hc-page .hc-arch-d-roomy.hc-dir-v-blueprint,
#hc-page#hc-page .hc-arch-d-roomy.hc-dir-v-spine,
#hc-page#hc-page .hc-arch-d-roomy.hc-dir-v-tree{gap:2.2em}

/* Section markers off: the number is the architecture's own marker, so hiding it
   is a structural choice rather than a cosmetic one. */
/* PHASE_HC_MORELINK_2026-08-15 — THE OVERFLOW LINK'S TWO PRESENTATIONS.
   help.php:4673 has always emitted `hc-dir-more-v-pill` / `hc-dir-more-v-quiet`, and not
   one declaration existed for either across the twelve sheets — so "Pill button" and
   "Quiet text" rendered exactly like the default link, on the category AND subcategory
   surfaces. Keyed off the emitted class so each surface obeys its own setting; the older
   inline block styled the bare `.hc-dir-more`, which made the category choice restyle the
   subcategory cards too. */
#hc-page#hc-page .hc-dir-more.hc-dir-more-v-pill{
  display:inline-flex;align-self:flex-start;align-items:center;gap:6px;
  border:1px solid var(--card-border,#e5e7eb);border-radius:999px;
  padding:7px 14px;background:var(--card-bg,#fff)}
#hc-page#hc-page .hc-dir-more.hc-dir-more-v-quiet{
  opacity:.72;font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
#hc-page#hc-page .hc-dir-more.hc-dir-more-v-quiet svg{display:none}

/* PHASE_HC_ARCHNUM_2026-08-15 — `hc-arch-nonum` was written by help.php:4456 for ANY
   variant, but the Studio only offers the toggle for archdir/kgrid/campus/spine. Set it
   off on one of those, switch to `journey`, and journey's numbered rail vanished with no
   control to bring it back. Scoped to the four presentations the toggle is offered for. */
#hc-page#hc-page .hc-dir.hc-arch-nonum:is(.hc-dir-v-archdir,.hc-dir-v-kgrid,.hc-dir-v-campus,.hc-dir-v-spine) .hc-dir-num{display:none}
/* …and the architectures that reserve a column for it close that column up. */
#hc-page#hc-page .hc-arch-nonum.hc-dir-v-archdir .hc-dir-card{grid-template-columns:minmax(0,15em) minmax(0,1fr)}
#hc-page#hc-page .hc-arch-nonum.hc-dir-v-archdir .hc-dir-title{grid-column:1}
#hc-page#hc-page .hc-arch-nonum.hc-dir-v-archdir .hc-dir-desc{grid-column:1}
#hc-page#hc-page .hc-arch-nonum.hc-dir-v-archdir .hc-dir-list{grid-column:2}
#hc-page#hc-page .hc-arch-nonum.hc-dir-v-spine .hc-dir-card{grid-template-columns:auto minmax(0,1fr)}
#hc-page#hc-page .hc-arch-nonum.hc-dir-v-spine .hc-dir-ico{grid-column:1}
#hc-page#hc-page .hc-arch-nonum.hc-dir-v-spine .hc-dir-title{grid-column:2}
#hc-page#hc-page .hc-arch-nonum.hc-dir-v-spine .hc-dir-body{grid-column:1/-1}

/* Rules and connectors off: the hairlines that separate sections and the
   branches that join a category to its articles. */
#hc-page#hc-page .hc-arch-norule.hc-dir-v-archdir .hc-dir-card{border-top:0!important}
#hc-page#hc-page .hc-arch-norule.hc-dir-v-cmddir .hc-dir-head{border-bottom:0}
#hc-page#hc-page .hc-arch-norule.hc-dir-v-campus .hc-dir-card{border-inline-start:0!important;padding-inline-start:0}
#hc-page#hc-page .hc-arch-norule.hc-dir-v-blueprint .hc-dir-list::before,
#hc-page#hc-page .hc-arch-norule.hc-dir-v-blueprint .hc-dir-list li::before,
#hc-page#hc-page .hc-arch-norule.hc-dir-v-blueprint .hc-dir-list li::after,
#hc-page#hc-page .hc-arch-norule.hc-dir-v-blueprint .hc-dir-list li>a::before{display:none}
#hc-page#hc-page .hc-arch-norule.hc-dir-v-blueprint .hc-dir-list{padding-inline-start:0}
#hc-page#hc-page .hc-arch-norule.hc-dir-v-kgrid .hc-dir-list a{border-bottom:0}

/* The knowledge rail can hang on either side. */

/* The knowledge grid's narrowest module. */
#hc-page#hc-page .hc-dir-v-kgrid{--hc-kgrid-min:0px}
@supports (width: min(1px,1px)) {
  #hc-page#hc-page .hc-dir-v-kgrid .hc-dir-card{min-width:min(var(--hc-kgrid-min,0px),100%)}
}

/* ── CATEGORY NUMERAL ───────────────────────────────────────────────────────
   Owner, after a folder, a stack and a brand cover: "no. simple but unique."

   So: one idea and nothing else. The article count is set at display size and
   becomes the subject of the card; a short brand rule sits under it; the name
   and one line of description follow. No article list, no icon, no panel, no
   ornament — the card surface is exactly the Design Studio card every other
   presentation uses. What makes it unique is not decoration, it is WHAT THE
   CARD IS ABOUT: nothing else in the set leads with the size of the section,
   and nothing else is this empty.

   The numeral is the only type declaration here, in `em` and above 2 — the same
   carve-out the magazine reader's drop cap has, and for the same reason: it
   SCALES with the operator's Text & typography setting instead of replacing it.
   Everything else is spacing and tokens.

   Hover extends the rule. The card does not move — the cursor never leaves it,
   which is why this cannot flicker. */
#hc-page#hc-page .hc-dir.hc-dir-v-tree{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17em,100%),1fr));
  gap:1.1em;background:transparent!important}
#hc-page#hc-page .hc-dir-v-tree .hc-dir-card{
  margin:0;padding:1.35em 1.4em 1.25em;display:flex;flex-direction:column}
/* THE NUMERAL. The count lives inside the title link, so the link becomes the
   column and reverses: count first, name under it. */
#hc-page#hc-page .hc-dir-v-tree .hc-dir-head{
  display:block;padding:0;margin:0;background:none!important;border:0!important}
#hc-page#hc-page .hc-dir-v-tree .hc-dir-title{
  display:flex;flex-direction:column-reverse;align-items:flex-start;gap:.5em;padding:0}
#hc-page#hc-page .hc-dir-v-tree .hc-dir-count{
  font-size:2.9em;line-height:1;margin:0;padding:0 0 .18em;
  color:var(--hc-a-accent);background:none!important;
  font-variant-numeric:tabular-nums;
  /* the shared count pill is a 999px capsule; without this the rule under the
     numeral renders as an arc rather than a straight line */
  border-radius:0!important;
  border-bottom:2px solid var(--hc-a-accent);
  width:1.15em;transition:width .2s ease}
#hc-page#hc-page .hc-dir-v-tree .hc-dir-card:hover .hc-dir-count{width:1.9em}
/* THE SHEET — a description and a way in, nothing more. */
#hc-page#hc-page .hc-dir-v-tree .hc-dir-body{
  height:auto!important;overflow:visible!important;opacity:1!important;
  display:flex;flex:1 1 auto;min-height:0;
  padding:0!important;background:none!important;border:0!important}
#hc-page#hc-page .hc-dir-v-tree .hc-dir-inner{
  display:flex;flex-direction:column;flex:1 1 auto;width:100%;padding:0!important}
#hc-page#hc-page .hc-dir-v-tree .hc-dir-desc{
  margin:.5em 0 .9em;color:var(--hc-a-quiet);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#hc-page#hc-page .hc-dir-v-tree .hc-dir-kids{
  display:flex;flex-wrap:wrap;gap:.3em .9em;margin:0 0 .9em;padding:0;list-style:none}
#hc-page#hc-page .hc-dir-v-tree .hc-dir-kids a{
  padding:0;border:0;background:none;color:var(--hc-a-quiet);
  transition:color .16s ease}
#hc-page#hc-page .hc-dir-v-tree .hc-dir-kids a:hover{color:var(--hc-a-accent)}
#hc-page#hc-page .hc-dir-v-tree .hc-dir-more{
  margin:auto 0 0;display:inline-flex;align-items:center;gap:.4em;align-self:flex-start}
#hc-page#hc-page .hc-dir-v-tree .hc-dir-toggle{display:none}

/* ── THE MATRIX ──────────────────────────────────────────────────────────────
   §-final. The last architecture from the brief, and until now it was offered in
   the picker with NO CSS behind it at all — choosing it rendered an unstyled
   grid. That is a dead control, so it is either drawn properly or removed.

   It is drawn as the SEE-EVERYTHING view. Every other presentation shows a
   selection of categories with something about each; this one shows them all at
   once, one small cell apiece, and answers a question none of the others can:
   how big is this knowledge base and what is in it. With 111 categories that is
   the only view where the whole thing fits on a screen.

   The cells share their edges — one hairline between neighbours, not two abutting
   borders — which is the single thing that makes this read as a matrix and not as
   the tile grid it would otherwise duplicate.

   HOW, and why not the obvious way. gap:1px over a ruled background is the usual
   trick and it was the first attempt, but the last row is almost never full and
   the ruled background showed through the unfilled remainder as a grey slab.
   Instead each cell draws its OWN leading and top line as an inset shadow and the
   sheet supplies the closing edge. Between two cells that is still exactly one
   line; past the last cell there is nothing to draw, so the row simply runs out
   into the card and the sheet stays whole.

   Header only: icon, name, count. No description and no article list — at this
   size they would be unreadable, and the renderer already declares the variant
   bodyless so none of it is even sent. */
#hc-page#hc-page .hc-dir.hc-dir-v-matrix{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(11em,100%),1fr));
  gap:0;background:var(--card-fill,#fff)!important;
  border:1px solid var(--hc-a-rule);
  border-radius:var(--card-radius,14px);overflow:hidden}
/* TRAILING and BOTTOM lines, not leading and top — the direction matters and the
   first attempt had it backwards. Drawing the TOP line means a row's boundary
   only exists where a cell exists, so the last row's lone cell had a rule above
   it and the rest of that boundary was blank: a stub hanging in white. Drawing
   the BOTTOM line means every completed row closes itself across the full width,
   so the empty remainder sits under a clean rule and reads as blank space in the
   sheet rather than as something unfinished.
   The sheet's own border closes the far edge; where a cell's line meets it the
   pair is 1px over 1px at 12% alpha, which is not visible. */
#hc-page#hc-page .hc-dir-v-matrix .hc-dir-card{
  margin:0;padding:.95em .9em .85em;min-height:6.4em;
  display:flex;flex-direction:column;gap:.35em;
  background:transparent!important;
  border:0!important;border-radius:0!important;
  box-shadow:inset -1px 0 0 var(--hc-a-rule),inset 0 -1px 0 var(--hc-a-rule)!important;
  transition:background-color .16s ease}
/* The final cell drops its trailing line. When the last row is short that line
   is a column divider running into nothing; without it the row simply continues
   as empty sheet. When the last row happens to be full the line sat under the
   sheet's own border anyway, so nothing is lost either way. */
#hc-page#hc-page .hc-dir-v-matrix .hc-dir-card:last-child{
  box-shadow:inset 0 -1px 0 var(--hc-a-rule)!important}
#hc-page#hc-page .hc-dir-v-matrix .hc-dir-card:hover{
  background:color-mix(in srgb,var(--brand,var(--accent,#6366f1)) 7%,transparent)!important}
#hc-page#hc-page .hc-dir-v-matrix .hc-dir-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:.4em;
  padding:0;margin:0;height:100%;
  background:none!important;border:0!important;border-radius:0!important}
#hc-page#hc-page .hc-dir-v-matrix .hc-dir-ico{
  flex:0 0 auto;width:1.4em;height:1.4em;padding:0;
  color:var(--hc-a-accent);
  background:none!important;border:0!important;box-shadow:none!important}
/* The count is INSIDE the title anchor, so pinning it to the cell floor means
   making the anchor the column — an auto margin on the count alone does nothing
   in a block box, which is what the first attempt got wrong. Every count then
   sits on the same line across the whole grid, which is most of what makes a
   grid this dense scannable. */
#hc-page#hc-page .hc-dir-v-matrix .hc-dir-title{
  padding:0;display:flex;flex-direction:column;align-items:flex-start;
  flex:1 1 auto;gap:.3em;min-height:0}
/* The clamp belongs on the NAME, not on the anchor: a -webkit-box on the anchor
   would swallow the flex column it now is. The cell is fixed-width by design, so
   a long name is clamped rather than allowed to set the height of every cell
   beside it. */
#hc-page#hc-page .hc-dir-v-matrix .hc-dir-title>span:not(.hc-dir-count){
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#hc-page#hc-page .hc-dir-v-matrix .hc-dir-count{
  margin:auto 0 0;padding:0;background:none!important;
  color:var(--hc-a-quiet);font-variant-numeric:tabular-nums}
#hc-page#hc-page .hc-dir-v-matrix .hc-dir-body,
#hc-page#hc-page .hc-dir-v-matrix .hc-dir-toggle{display:none}
#hc-page#hc-page .hc-dir-v-matrix .hc-dir-title:focus-visible{
  outline:2px solid var(--hc-a-accent);outline-offset:2px}
/* Below the tablet step the cells would be narrower than a two-word name. */
@media (max-width:520px){
  #hc-page#hc-page .hc-dir.hc-dir-v-matrix{
    grid-template-columns:repeat(auto-fill,minmax(min(8.5em,100%),1fr))}
  #hc-page#hc-page .hc-dir-v-matrix .hc-dir-card{min-height:5.4em;padding:.75em .7em}
}