/* page background BELOW the hero = portal --bg (the hero keeps its own bg)

   PHASE10K10_2026-08-11 — ONLY THE PAGE PAINTS THE PAGE. The inner wrappers used
   to carry the same fill, which was invisible while they were full width and the
   colour matched. Once the content column took a container width it became a
   1360px rectangle of flat colour sitting on the page — a panel behind the cards
   with a visible edge under the last row, and obvious on the portal-matched
   surface where the page's own colour differs from the Help Center's. A column
   is a measurement, not a surface: it is transparent now and the page shows
   through it. */
body,#hc-page{background-color:var(--bg,#f6f7fb)!important}
.hc-main,.hc-app,.hc-shell,.hc-content{background-color:transparent!important}
#hc-page,.hc-main,.hc-app,.hc-shell,.hc-content{background-image:none!important}
/* .hc-body is the ARTICLE PROSE, not a page wrapper — it must sit on its card, so it gets no page background. */
#hc-page .hc-body{background:transparent!important}
/* PHASE_HC_HERO_MATCH — HERO WEARS THE PORTAL BAND (was: a mix-blend-mode:color
   overlay that only hue-shifted the layout's own hero, so a light theme stayed
   light and never actually matched the portal).

   Works for ALL 20 layouts with plain CSS, no JS: every layout paints its hero
   via `.layout-x .hc-hero` / `.hc-hero-<layout>` (2 classes). `#hc-hero` carries
   an ID, and an ID outranks any number of classes, so this wins everywhere.

   Only STABLE shared classes are used (.hc-hero-pill/.hc-hero-sub/.hc-hero-stats/
   .hc-srch-wrap come from the one shared $search + hero partial). Deliberately NO
   [class*="..."] substring matching: layouts name whole content columns things like
   .hc-lumen-search and .hc-nebula-grid, and a substring match hits those and eats
   real content. Child positioning is left alone so absolutely-positioned decorative
   backdrops (obsidian/aurora/minimal svgs) stay where their layout put them. */
#hc-hero,#hc-page .hc-subhero{
  background:var(--accent-bg,linear-gradient(135deg,var(--accent),var(--accent-d)))!important;
  background-image:var(--accent-bg,linear-gradient(135deg,var(--accent),var(--accent-d)))!important;
  background-size:cover!important;background-repeat:no-repeat!important;
  position:relative!important;isolation:isolate}
/* the old colour-blend overlay is now the band itself — retire it, and add a soft
   top wash so the band has the same depth as the portal hero */
#hc-hero::after,#hc-page .hc-subhero::after{display:none!important}
#hc-hero::before{content:""!important;position:absolute!important;inset:0!important;z-index:0!important;background:radial-gradient(900px 380px at 50% -30%,rgba(255,255,255,.20),transparent)!important;pointer-events:none!important;mix-blend-mode:normal!important;filter:none!important;border:0!important;animation:none!important}
/* the layout's own decorative backdrop → texture on the band. aria-hidden direct
   children only (that is how every layout marks its decor); obsidian's bezel is
   nested, so it keeps full colour. */
#hc-hero>[aria-hidden="true"]:not(svg),#hc-hero>canvas{opacity:.30!important;mix-blend-mode:soft-light}
#hc-hero>svg{opacity:.45!important;mix-blend-mode:soft-light}
/* hero copy → white, whatever the layout wanted */
#hc-hero h1,#hc-hero h2,#hc-hero p,#hc-hero .hc-hero-sub,#hc-hero .hc-hero-stats,#hc-hero .hc-hero-stats strong,
#hc-page .hc-subhero h1,#hc-page .hc-subhero h2,#hc-page .hc-subhero p{color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 24px rgba(10,8,30,.18)}
#hc-hero .hc-hero-sub,#hc-hero .hc-hero-stats{color:rgba(255,255,255,.92)!important;-webkit-text-fill-color:rgba(255,255,255,.92)!important}
#hc-hero .hc-hero-pill{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.30)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
#hc-hero .hc-hero-pill .hc-hero-dot{background:#fff!important}
/* Catch-all for the bits each layout names its own way (minimal's "01" index and
   label, zenith's topline, ledger's masthead, gallery's eyebrow): anything sitting
   ON the band is hero text and goes white. The ONE exception is the search dock —
   6 layouts paint a light card there, and its text must stay dark. The rules above
   are more specific, so .hc-hero-sub/.hc-hero-stats keep their softer white. */
#hc-hero *:not(svg):not(path):not(.hc-srch-wrap):not(.hc-srch-wrap *){color:#fff!important;-webkit-text-fill-color:#fff!important}
/* The SEARCH BAR keeps the layout's own design — no card is added here. Painting one
   produced a card-inside-a-card (a white .hc-srch-wrap nested in the layout's own white
   dock). The toggle repaints the hero BACKGROUND and TEXT only.

   The one exception is TEXT, which is the toggle's job: where the field sits directly on
   the band, its text IS hero text and must go white. Nothing below adds a background,
   border-box or shadow.

   Which layouts are truly card-less was settled by TYPING into every layout's field and
   measuring the typed text against what is actually behind it. Careful: six layouts
   (prism, mosaic, zenith, ledger, gallery, sanctuary) paint their card in a CHILD of the
   shell, not on the shell itself — they look card-less if you only inspect the shell, but
   they are not. They ship dark ink because they are right, and they are left alone, as are
   the six that card the shell directly (nebula, aurora, minimal, obsidian, classic,
   command). Only these eight put the field on the band or on a dark/glass surface: */
#hc-hero .hc-search-shell-atlas input,#hc-hero .hc-search-shell-editorial input,#hc-hero .hc-search-shell-horizon input,
#hc-hero .hc-search-shell-vault input,#hc-hero .hc-search-shell-orbit input,#hc-hero .hc-search-shell-runway input,
#hc-hero .hc-search-shell-sonar input,#hc-hero .hc-search-shell-stack input{color:#fff!important}
#hc-hero .hc-search-shell-atlas input::placeholder,#hc-hero .hc-search-shell-editorial input::placeholder,#hc-hero .hc-search-shell-horizon input::placeholder,
#hc-hero .hc-search-shell-vault input::placeholder,#hc-hero .hc-search-shell-orbit input::placeholder,#hc-hero .hc-search-shell-runway input::placeholder,
#hc-hero .hc-search-shell-sonar input::placeholder,#hc-hero .hc-search-shell-stack input::placeholder{color:rgba(255,255,255,.72)!important;-webkit-text-fill-color:rgba(255,255,255,.72)!important}
/* -webkit-text-fill-color is an INHERITED property, and it BEATS `color` in Chrome.
   The catch-all above never targets the search dock, but the dock still INHERITS the
   band's white fill from its parent — which made the typed text white on the layouts
   that paint a white card (classic/aurora/minimal), i.e. invisible while typing.
   Re-anchor the dock so fill simply follows each element's own `color`: dark ink stays
   dark on a white card, and the card-less docks we set to white stay white. */
#hc-hero .hc-srch-wrap,#hc-hero .hc-srch-wrap *{-webkit-text-fill-color:currentcolor!important}
/* nebula writes white ink on a 16%-white glass. That read fine on its own dark hero but
   only reaches 2.9:1 on the band. Deepen the glass it ALREADY has (no card is added) so
   its white ink clears AA. */
#hc-hero .hc-search-shell-nebula{background:rgba(15,23,42,.34)!important}
/* SEARCH SUBMIT BUTTON → the portal accent, on every layout.
   Only nebula/aurora/prism happened to use the brand token; the other 17 hardcode their
   own colour (classic navy, obsidian cyan, sonar teal, runway yellow, vault amber,
   sanctuary green, ledger/gallery/mosaic near-black …), so the button was the one piece
   of the hero that never followed the portal. This is colour only — no size, radius or
   position is touched, so each layout keeps its own button shape and label.
   Placed AFTER the currentcolor reset above so it wins the tie on equal specificity. */
#hc-hero .hc-srch-wrap button{
  background:var(--accent-bg,linear-gradient(135deg,var(--accent),var(--accent-d)))!important;
  background-image:var(--accent-bg,linear-gradient(135deg,var(--accent),var(--accent-d)))!important;
  border-color:transparent!important}
#hc-hero .hc-srch-wrap button,#hc-hero .hc-srch-wrap button *{color:#fff!important;-webkit-text-fill-color:#fff!important}
/* editorial and horizon are the only two that put the button straight ON the band. An
   accent button on the accent band would disappear, so invert them: white surface, accent
   label. Still unmistakably the brand colour, and it stays legible. */
#hc-hero .hc-search-shell-editorial button,#hc-hero .hc-search-shell-horizon button{
  background:#fff!important;background-image:none!important;border-color:transparent!important}
#hc-hero .hc-search-shell-editorial button,#hc-hero .hc-search-shell-editorial button *,
#hc-hero .hc-search-shell-horizon button,#hc-hero .hc-search-shell-horizon button *{
  color:var(--accent)!important;-webkit-text-fill-color:var(--accent)!important}
/* Search-suggestion dropdown — its --brand-5/--brand tokens resolve badly on
   the unified host (grey-on-grey highlight), so pin it to portal tokens. */
.hc-suggest,.hc-suggest.hc-suggest-portal{background:var(--card,#fff)!important;border:1px solid var(--line,#e2e8f0)!important;box-shadow:0 20px 55px rgba(15,23,42,.16)!important;color:var(--ink,#0f172a)!important}
.hc-suggest .hc-suggest-item{color:var(--ink,#0f172a)!important;background:transparent!important}
.hc-suggest .hc-suggest-item:hover,.hc-suggest .hc-suggest-item.hc-act{background:color-mix(in srgb,var(--accent) 12%,#ffffff)!important;color:var(--ink,#0f172a)!important}
.hc-suggest .hc-suggest-item svg{color:var(--accent)!important}
.hc-suggest .hc-suggest-title{color:inherit!important}
/* Miro-style nav section label: brand | HELP CENTER */
.pnav-hc-sep{width:1px;height:22px;background:var(--line,#e2e8f0);margin:0 14px;flex-shrink:0}
.pnav-hc-label{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2,#475569);white-space:nowrap}
@media(max-width:560px){.pnav-hc-sep{margin:0 10px}.pnav-hc-label{letter-spacing:.08em;font-size:11.5px}}