/* ============================================================ help.css — self-contained customer help-center stylesheet. Does NOT depend on framework.css / variables.css / sidebar.css. Brand: "Signal" — cool graphite grounds + a single signal-cyan accent, no violet, no glow. Five color schemes selected by : signal — cool graphite + signal-cyan, dark-committed (DEFAULT; matches app) aurora — signal-cyan on airy cool-light paper, search-first (light/auto) ledger — warm cream, forest green, Fraunces serif docs (per-tenant option) mosaic — bone paper + cobalt/ember, editorial bento grid (light/auto) beacon — warm lamplight dark + amber/teal, AI-ask-first (dark-committed) Each scheme themes light AND dark (prefers-color-scheme + data-theme). The canonical name list lives in branding.HELP_TEMPLATES. Type stack (Fraunces + Hanken Grotesk) and layout are unchanged — colours only. ============================================================ */ /* ---------- Structural tokens shared by every scheme ---------- */ :root{ --sans:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --serif:"Fraunces",Georgia,"Times New Roman",serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* Per-brand font-pair hooks. When a brand selects a font pair, base.html sets --hc-font-heading / --hc-font-body inline on ; otherwise these resolve to each template's built-in stack (below), so the default look is unchanged. --font-heading defaults to the sans stack here (aurora/signal) and is overridden to the serif stack under the ledger template. */ --font-body:var(--hc-font-body,var(--sans)); --font-heading:var(--hc-font-heading,var(--sans)); --fs-caption:.75rem; --fs-sm:.8125rem; --fs-body:.9375rem; --fs-lead:1.0625rem; --fs-h3:1.25rem; --fs-h2:1.5rem; --fs-h1:clamp(2rem,4.5vw,3rem); --lh-tight:1.1; --lh-snug:1.3; --lh-body:1.6; --track-caps:.09em; --measure:65ch; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px; --content:1080px; } /* ============================================================ SCHEME PALETTES Light values apply to [data-template] and [data-template][data-theme="light"]. Dark values apply to prefers-color-scheme:dark (no explicit theme) and [data-template][data-theme="dark"]. ============================================================ */ /* ---------- AURORA (signal-cyan on airy cool-light paper; light/auto) ---------- */ html[data-template="aurora"], html[data-template="aurora"][data-theme="light"]{ --brand:#107b86; --brand-2:#2cc9d6; --brand-ink:#FFFFFF; --accent:#E0603F; --ink:#12181C; --ink-2:#41525A; --ink-3:#5B6A72; --paper:#F5F8F9; --card:#FFFFFF; --line:#E2E9EA; --e-1:0 1px 2px rgba(11,14,18,.05), 0 1px 3px rgba(11,14,18,.06); --e-2:0 4px 14px -4px rgba(11,14,18,.14), 0 2px 6px rgba(11,14,18,.07); --e-3:0 26px 52px -18px rgba(11,14,18,.30), 0 10px 24px -10px rgba(11,14,18,.16); } @media (prefers-color-scheme: dark){ html[data-template="aurora"]:not([data-theme]){ --brand:#2cc9d6; --brand-2:#66e6ee; --brand-ink:#07161a; --accent:#FF8A66; --ink:#EAF1F3; --ink-2:#B4C4C8; --ink-3:#7E9195; --paper:#0C1116; --card:#141B22; --line:#243039; --e-1:0 1px 2px rgba(0,0,0,.5); --e-2:0 6px 18px -6px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); --e-3:0 30px 60px -20px rgba(0,0,0,.75), 0 10px 24px -10px rgba(0,0,0,.5); } } html[data-template="aurora"][data-theme="dark"]{ --brand:#2cc9d6; --brand-2:#66e6ee; --brand-ink:#07161a; --accent:#FF8A66; --ink:#EAF1F3; --ink-2:#B4C4C8; --ink-3:#7E9195; --paper:#0C1116; --card:#141B22; --line:#243039; --e-1:0 1px 2px rgba(0,0,0,.5); --e-2:0 6px 18px -6px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); --e-3:0 30px 60px -20px rgba(0,0,0,.75), 0 10px 24px -10px rgba(0,0,0,.5); } /* ---------- LEDGER (warm cream paper, forest green, terracotta) ---------- */ /* Ledger's built-in heading stack is the Fraunces serif; a brand font pair (--hc-font-heading) still overrides it. Body stays the sans stack. */ html[data-template="ledger"]{ --font-heading:var(--hc-font-heading,var(--serif)); } html[data-template="ledger"], html[data-template="ledger"][data-theme="light"]{ --brand:#1B6B4C; --brand-2:#2E8B63; --brand-ink:#FFFFFF; --accent:#C2703D; --ink:#2A2119; --ink-2:#5A4B3C; --ink-3:#6B5D4E; --paper:#FAF6EE; --card:#FFFDF8; --line:#E7DECB; --e-1:0 1px 2px rgba(42,33,25,.05), 0 1px 3px rgba(42,33,25,.06); --e-2:0 4px 14px -4px rgba(42,33,25,.14), 0 2px 6px rgba(42,33,25,.07); --e-3:0 26px 52px -18px rgba(42,33,25,.28), 0 10px 24px -10px rgba(42,33,25,.15); } @media (prefers-color-scheme: dark){ html[data-template="ledger"]:not([data-theme]){ --brand:#5FBF93; --brand-2:#7FD3AC; --brand-ink:#0F1512; --accent:#E0966A; --ink:#F2EADB; --ink-2:#CDBFA8; --ink-3:#9C8F79; --paper:#161310; --card:#201B15; --line:#33291F; --e-1:0 1px 2px rgba(0,0,0,.5); --e-2:0 6px 18px -6px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); --e-3:0 30px 60px -20px rgba(0,0,0,.75), 0 10px 24px -10px rgba(0,0,0,.5); } } html[data-template="ledger"][data-theme="dark"]{ --brand:#5FBF93; --brand-2:#7FD3AC; --brand-ink:#0F1512; --accent:#E0966A; --ink:#F2EADB; --ink-2:#CDBFA8; --ink-3:#9C8F79; --paper:#161310; --card:#201B15; --line:#33291F; --e-1:0 1px 2px rgba(0,0,0,.5); --e-2:0 6px 18px -6px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); --e-3:0 30px 60px -20px rgba(0,0,0,.75), 0 10px 24px -10px rgba(0,0,0,.5); } /* ---------- SIGNAL (cool graphite + signal-cyan; dark-committed, DEFAULT) ---------- Dark graphite is the out-of-the-box look (matches the app). The theme toggle still offers a cool-light reading variant for long-form KB articles. Grounds: #0b0e12 / #0f1318 / #141922 / #19202a; accent = signal-cyan. */ html[data-template="signal"], html[data-template="signal"][data-theme="dark"]{ --brand:#2cc9d6; --brand-2:#66e6ee; --brand-ink:#07161a; --accent:#FF8A66; --ink:#e7ecf1; --ink-2:#9ba7b4; --ink-3:#7b8693; --paper:#0b0e12; --card:#141922; --line:#2c3540; --e-1:0 1px 2px rgba(0,0,0,.6); --e-2:0 6px 18px -6px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.45); --e-3:0 30px 60px -20px rgba(0,0,0,.8), 0 10px 24px -10px rgba(0,0,0,.55); } /* OS dark with no explicit toggle — same graphite (kept for selector parity). */ @media (prefers-color-scheme: dark){ html[data-template="signal"]:not([data-theme]){ --brand:#2cc9d6; --brand-2:#66e6ee; --brand-ink:#07161a; --accent:#FF8A66; --ink:#e7ecf1; --ink-2:#9ba7b4; --ink-3:#7b8693; --paper:#0b0e12; --card:#141922; --line:#2c3540; --e-1:0 1px 2px rgba(0,0,0,.6); --e-2:0 6px 18px -6px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.45); --e-3:0 30px 60px -20px rgba(0,0,0,.8), 0 10px 24px -10px rgba(0,0,0,.55); } } /* Explicit light toggle — cool graphite-tinted light paper, deep signal-cyan brand. */ html[data-template="signal"][data-theme="light"]{ --brand:#107b86; --brand-2:#2cc9d6; --brand-ink:#FFFFFF; --accent:#E0603F; --ink:#10171b; --ink-2:#3c4a50; --ink-3:#586870; --paper:#F4F7F8; --card:#FFFFFF; --line:#DEE7E8; --e-1:0 1px 2px rgba(11,14,18,.05), 0 1px 3px rgba(11,14,18,.06); --e-2:0 4px 14px -4px rgba(11,14,18,.14), 0 2px 6px rgba(11,14,18,.07); --e-3:0 26px 52px -18px rgba(11,14,18,.30), 0 10px 24px -10px rgba(11,14,18,.16); } /* ---------- MOSAIC (bone paper, cobalt brand, ember accent; light/auto) ---------- Editorial: high-contrast ink on warm bone paper with a saturated cobalt for links/brand and an ember accent for focus + numerals. */ html[data-template="mosaic"], html[data-template="mosaic"][data-theme="light"]{ --brand:#1F4FD8; --brand-2:#5C86FF; --brand-ink:#FFFFFF; --accent:#C2620B; --ink:#14161C; --ink-2:#464C59; --ink-3:#666D7B; --paper:#F6F4EF; --card:#FFFFFF; --line:#E3DFD5; --e-1:0 1px 2px rgba(20,22,28,.05), 0 1px 3px rgba(20,22,28,.06); --e-2:0 4px 14px -4px rgba(20,22,28,.14), 0 2px 6px rgba(20,22,28,.07); --e-3:0 26px 52px -18px rgba(20,22,28,.28), 0 10px 24px -10px rgba(20,22,28,.15); } @media (prefers-color-scheme: dark){ html[data-template="mosaic"]:not([data-theme]){ --brand:#8AA9FF; --brand-2:#B3C6FF; --brand-ink:#0A1024; --accent:#F0B45C; --ink:#ECEEF3; --ink-2:#B6BCC8; --ink-3:#868D9B; --paper:#0D0E12; --card:#171921; --line:#262A34; --e-1:0 1px 2px rgba(0,0,0,.5); --e-2:0 6px 18px -6px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); --e-3:0 30px 60px -20px rgba(0,0,0,.75), 0 10px 24px -10px rgba(0,0,0,.5); } } html[data-template="mosaic"][data-theme="dark"]{ --brand:#8AA9FF; --brand-2:#B3C6FF; --brand-ink:#0A1024; --accent:#F0B45C; --ink:#ECEEF3; --ink-2:#B6BCC8; --ink-3:#868D9B; --paper:#0D0E12; --card:#171921; --line:#262A34; --e-1:0 1px 2px rgba(0,0,0,.5); --e-2:0 6px 18px -6px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); --e-3:0 30px 60px -20px rgba(0,0,0,.75), 0 10px 24px -10px rgba(0,0,0,.5); } /* ---------- BEACON (warm lamplight dark, amber brand, teal accent) ---------- Dark-committed like signal, but WARM rather than graphite: near-black brown grounds, an amber brand and a cool teal accent for focus/contrast. The theme toggle still offers a warm-light reading variant. */ html[data-template="beacon"], html[data-template="beacon"][data-theme="dark"]{ --brand:#F0A93B; --brand-2:#FFC978; --brand-ink:#1E1305; --accent:#4FD6C2; --ink:#F5EFE7; --ink-2:#C6BCB0; --ink-3:#968C80; --paper:#100E0C; --card:#1B1815; --line:#2E2823; --e-1:0 1px 2px rgba(0,0,0,.6); --e-2:0 6px 18px -6px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.45); --e-3:0 30px 60px -20px rgba(0,0,0,.8), 0 10px 24px -10px rgba(0,0,0,.55); } /* OS dark with no explicit toggle — same lamplight (kept for selector parity). */ @media (prefers-color-scheme: dark){ html[data-template="beacon"]:not([data-theme]){ --brand:#F0A93B; --brand-2:#FFC978; --brand-ink:#1E1305; --accent:#4FD6C2; --ink:#F5EFE7; --ink-2:#C6BCB0; --ink-3:#968C80; --paper:#100E0C; --card:#1B1815; --line:#2E2823; --e-1:0 1px 2px rgba(0,0,0,.6); --e-2:0 6px 18px -6px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.45); --e-3:0 30px 60px -20px rgba(0,0,0,.8), 0 10px 24px -10px rgba(0,0,0,.55); } } /* Explicit light toggle — warm paper, deep amber brand, deep teal accent. */ html[data-template="beacon"][data-theme="light"]{ --brand:#9A5B10; --brand-2:#C97C1C; --brand-ink:#FFFFFF; --accent:#0B7A69; --ink:#1B1611; --ink-2:#4F463C; --ink-3:#6E6558; --paper:#FCF8F3; --card:#FFFFFF; --line:#EBE2D6; --e-1:0 1px 2px rgba(27,22,17,.05), 0 1px 3px rgba(27,22,17,.06); --e-2:0 4px 14px -4px rgba(27,22,17,.14), 0 2px 6px rgba(27,22,17,.07); --e-3:0 26px 52px -18px rgba(27,22,17,.28), 0 10px 24px -10px rgba(27,22,17,.15); } /* Fallback palette for an unknown/missing data-template — Signal cyan on cool-light paper (mirrors aurora's light values; no violet anywhere). EVERY known template must be excluded here: this selector carries three (now five) :not() attribute tests, so it out-specifies a bare html[data-template="x"] palette block and would otherwise override it. */ html:not([data-template="aurora"]):not([data-template="ledger"]):not([data-template="signal"]):not([data-template="mosaic"]):not([data-template="beacon"]){ --brand:#107b86; --brand-2:#2cc9d6; --brand-ink:#FFFFFF; --accent:#E0603F; --ink:#12181C; --ink-2:#41525A; --ink-3:#5B6A72; --paper:#F5F8F9; --card:#FFFFFF; --line:#E2E9EA; --e-1:0 1px 2px rgba(11,14,18,.05), 0 1px 3px rgba(11,14,18,.06); --e-2:0 4px 14px -4px rgba(11,14,18,.14), 0 2px 6px rgba(11,14,18,.07); --e-3:0 26px 52px -18px rgba(11,14,18,.30), 0 10px 24px -10px rgba(11,14,18,.16); } /* ============================================================ BASE ============================================================ */ *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{margin:0;background:var(--paper);color:var(--ink); font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; min-height:100vh;display:flex;flex-direction:column;overflow-x:clip;} a{color:inherit;text-decoration:none;} h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:var(--lh-tight);} p{margin:0;} img,svg{max-width:100%;} button{font:inherit;} ::placeholder{color:var(--ink-3);opacity:1;} *{min-width:0;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} :where(a,button,input,summary,[tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); } /* Sprite symbols are stroke-drawn; the wrapper in the sprite is NOT cloned through , so the paint must be (re)applied at every use site or icons render as solid black blobs. */ .icon{width:1.25em;height:1.25em;flex:0 0 auto;display:inline-block;vertical-align:-.15em; fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} .hc-shell{max-width:var(--content);margin:0 auto;width:100%;padding:0 28px;} /* ============================================================ SHARED COMPONENTS ============================================================ */ .btn{font-weight:600;font-size:var(--fs-sm);border-radius:var(--r-md); padding:10px 16px;min-height:40px;cursor:pointer;border:1px solid transparent; display:inline-flex;gap:8px;align-items:center;justify-content:center; line-height:1;transition:background .15s,color .15s,border-color .15s,transform .12s; text-align:center;} .btn .icon{width:1.05em;height:1.05em;} .btn-primary{background:var(--brand);color:var(--brand-ink);} .btn-primary:hover{background:color-mix(in srgb,var(--brand) 88%,#000);} .btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line);} .btn-ghost:hover{border-color:var(--ink-3);color:var(--ink);} .btn-lg{padding:13px 22px;min-height:48px;font-size:var(--fs-body);} .navlink{color:var(--ink-2);font-weight:500;font-size:var(--fs-sm); padding:6px 2px;border-radius:var(--r-sm);} .navlink:hover{color:var(--ink);} .signin{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2); font-weight:600;font-size:var(--fs-sm);} .signin:hover{color:var(--ink);} .count{font-family:var(--mono);font-size:var(--fs-caption);color:var(--ink-3); letter-spacing:0;white-space:nowrap;} .search{display:flex;align-items:center;gap:10px;background:var(--card); border:1px solid var(--line);border-radius:var(--r-md);padding:11px 15px; color:var(--ink-3);transition:border-color .15s,box-shadow .15s;} .search .icon{color:var(--ink-3);} .search input{border:0;background:transparent;font:inherit;color:var(--ink); width:100%;outline:none;} /* Bare (icon-only) submit inside a compact search. MUST stay :not(.btn): this selector is (0,1,1) and .btn-primary is only (0,1,0), so an unqualified reset blanks the background+color of any .btn placed inside a .search — which is how every hero search shipped with an invisible grey "Search" label until it was scoped. Kept as a guard now that .search is header-only. */ .search button:not(.btn){border:0;background:transparent;color:var(--ink-3); display:inline-flex;cursor:pointer;padding:2px;border-radius:var(--r-sm);} .search button:not(.btn):hover{color:var(--brand);} .search:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent);} /* .search is now the compact HEADER search only: the big hero search boxes were replaced by the unified .hc-ask search+Ask-AI component, so the old .search--hero component and its per-layout placements are gone. */ .search--sm{padding:8px 12px;flex:1 1 240px;max-width:360px;} .tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption); font-weight:600;padding:3px 9px;border-radius:var(--r-pill); background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand); letter-spacing:0;white-space:nowrap;} .tag--accent{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);} html[data-theme="light"] .tag--accent{color:color-mix(in srgb,var(--accent) 68%,#000);} /* Darken the accent text only for schemes that actually go light under an OS-light preference — signal and beacon are dark-committed, so they keep the bright accent (a darkened one would sit on their dark card). */ @media (prefers-color-scheme: light){ html:not([data-theme]):not([data-template="signal"]):not([data-template="beacon"]) .tag--accent{color:color-mix(in srgb,var(--accent) 68%,#000);} } /* Staff-only marker: the "Internal" pill on an internal article shown inline on the help center, and the "Staff" pill beside the signed-in name in the header. Only ever rendered in staff-brand mode (see routes/kb_routes._staff_brand_mode), never on a public render. Built from the SAME accent tokens and light/dark handling as .tag--accent above, plus an outline so it reads as a state marker rather than another category tag. */ .hc-internal-badge{display:inline-flex;align-items:center; font-size:var(--fs-caption,.75rem);font-weight:700;padding:2px 8px; border-radius:var(--r-pill);letter-spacing:var(--track-caps,.08em); text-transform:uppercase;white-space:nowrap;margin-left:6px; background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);} html[data-theme="light"] .hc-internal-badge{color:color-mix(in srgb,var(--accent) 68%,#000);} @media (prefers-color-scheme: light){ html:not([data-theme]):not([data-template="signal"]):not([data-template="beacon"]) .hc-internal-badge{color:color-mix(in srgb,var(--accent) 68%,#000);} } .clamp2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2; -webkit-box-orient:vertical;overflow:hidden;} .clamp3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3; -webkit-box-orient:vertical;overflow:hidden;} .logo{display:flex;align-items:center;gap:10px;font-weight:700; letter-spacing:-.02em;font-size:1.0625rem;max-width:220px; white-space:nowrap;flex:0 0 auto;} .logo img{height:30px;width:auto;max-width:180px;display:block;object-fit:contain;} .brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .logo .mark{width:28px;height:28px;border-radius:var(--r-sm);flex:0 0 auto; background:var(--brand);color:var(--brand-ink);display:grid;place-items:center; font-weight:700;font-size:.9rem;} .kicker{font-size:var(--fs-caption);text-transform:uppercase; letter-spacing:var(--track-caps);color:var(--ink-3);font-weight:700;} /* ---------- shared header ---------- */ .hc-header{border-bottom:1px solid var(--line);background:var(--paper);} .hc-header .in{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px; padding:14px 28px;max-width:var(--content);margin:0 auto;} .hc-header nav.hc-nav{display:flex;gap:18px;flex-wrap:wrap;} .hc-header .search--sm{margin-left:auto;} .hc-header .hc-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .hc-theme-btn{border:1px solid var(--line);background:var(--card);color:var(--ink-2); width:40px;height:40px;border-radius:var(--r-md);cursor:pointer; display:grid;place-items:center;flex:0 0 auto;} .hc-theme-btn:hover{color:var(--ink);border-color:var(--ink-3);} /* ---------- main + CTA + footer ---------- */ .hc-main{flex:1 0 auto;width:100%;} .help-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px; background:color-mix(in srgb,var(--brand) 7%,var(--card)); border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 28px;} .help-cta .hc-ic{width:44px;height:44px;border-radius:var(--r-md);flex:0 0 auto; display:grid;place-items:center;color:var(--brand); background:color-mix(in srgb,var(--brand) 14%,transparent);} .help-cta h2,.help-cta h3{font-size:var(--fs-h3);letter-spacing:-.01em;} .help-cta p{color:var(--ink-3);font-size:var(--fs-sm);margin-top:3px;} .help-cta .hc-txt{flex:1 1 240px;} .help-cta .hc-act{display:flex;gap:10px;flex-wrap:wrap;} .hc-cta-wrap{max-width:var(--content);margin:36px auto 0;padding:0 28px;} .hc-footer{border-top:1px solid var(--line);margin-top:32px;} .hc-footer .in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px; padding:26px 28px;max-width:var(--content);margin:0 auto;} .hc-footer .logo{font-size:1rem;} .hc-footer nav{display:flex;flex-wrap:wrap;gap:16px 20px;margin-left:auto;} .hc-footer a{color:var(--ink-3);font-size:var(--fs-sm);font-weight:500;} .hc-footer a:hover{color:var(--ink);} .hc-footer .copy{color:var(--ink-3);font-size:var(--fs-caption);width:100%; border-top:1px solid var(--line);padding-top:14px;} .empty{color:var(--ink-3);font-size:var(--fs-sm);background:var(--card); border:1px dashed var(--line);border-radius:var(--r-md);padding:20px 22px;} .empty a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;} /* flash messages */ .hc-flashes{margin:24px auto 0;display:grid;gap:10px;} .hc-flash{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px; font-size:var(--fs-sm);font-weight:600;background:var(--card);color:var(--ink);} .hc-flash--success{border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); background:color-mix(in srgb,var(--brand) 10%,var(--card));color:var(--brand);} .hc-flash--danger,.hc-flash--error{border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); background:color-mix(in srgb,var(--accent) 10%,var(--card));color:var(--accent);} /* ============================================================ AURORA HOME — search-first, calm category cards ============================================================ */ /* Full-width BAND whose content is inset to a 720px column via padding (the signal-template pattern). Painting a background on .au-hero must span the whole viewport — the old max-width:720px on the section itself boxed every themed hero into a floating tablet-width panel (every AI remix hit this). */ .au-hero{margin:0;text-align:center; padding:72px max(24px,calc((100% - 720px)/2)) 20px;} .au-hero h1{font-family:var(--font-heading);font-size:var(--fs-h1);letter-spacing:-.03em;} .au-hero .lede{color:var(--ink-2);margin:16px auto 30px;max-width:52ch; font-size:var(--fs-lead);line-height:var(--lh-snug);} .au-chips{max-width:680px;margin:18px auto 0;display:flex;flex-wrap:wrap; gap:8px;justify-content:center;align-items:center;} .au-chips .lbl{font-size:var(--fs-caption);color:var(--ink-3); text-transform:uppercase;letter-spacing:var(--track-caps);font-weight:700;margin-right:2px;} .chip{border:1px solid var(--line);background:var(--card);color:var(--ink-2); border-radius:var(--r-pill);padding:7px 14px;font-size:var(--fs-sm); font-weight:500;cursor:pointer;transition:border-color .15s,color .15s,background .15s;} .chip:hover{border-color:var(--accent);color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent);} .au-body{max-width:900px;margin:0 auto;padding:56px 28px 8px;display:grid;gap:44px;} .au-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px;} .au-sec-head h2{font-family:var(--font-heading);font-size:var(--fs-h3);letter-spacing:-.01em;} .au-sec-head a{color:var(--brand);font-weight:600;font-size:var(--fs-sm); display:inline-flex;align-items:center;gap:6px;} .au-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;} .au-cat{display:flex;gap:16px;align-items:flex-start;background:var(--card); border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px; box-shadow:var(--e-1);transition:transform .15s,box-shadow .15s,border-color .15s;} .au-cat:hover{transform:translateY(-2px);box-shadow:var(--e-2);border-color:color-mix(in srgb,var(--brand) 30%,var(--line));} .au-cat .ic{width:42px;height:42px;border-radius:var(--r-md);flex:0 0 auto; display:grid;place-items:center;color:var(--brand); background:color-mix(in srgb,var(--brand) 12%,transparent);} .au-cat h3{font-family:var(--font-heading);font-size:1rem;letter-spacing:-.01em;margin-bottom:3px;overflow-wrap:anywhere;} .au-cat p{font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-snug);margin-bottom:8px;} .au-updated{display:grid;gap:2px;} .au-row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-top:1px solid var(--line);} .au-row:first-child{border-top:0;} .au-row .icon.doc{color:var(--ink-3);} .au-row .t{font-size:var(--fs-body);font-weight:500;min-width:0;} /* flex:0 0 auto so the tag+date column is never squeezed below its content (a squeezed .m lets the tag pill overflow left across the title). */ .au-row .m{margin-left:auto;display:flex;align-items:center;gap:12px;flex:0 0 auto;} .au-row .date{font-size:var(--fs-caption);color:var(--ink-3);white-space:nowrap;} .au-row:hover .t{color:var(--brand);} /* ============================================================ LEDGER HOME/LAYOUT — rail + doc + on-this-page TOC ============================================================ */ .le-body{display:grid;grid-template-columns:240px minmax(0,1fr) 200px; align-items:start;max-width:var(--content);margin:0 auto;position:relative;} .le-rail{border-right:1px solid var(--line);padding:24px 16px;position:sticky;top:0;} .le-rail > summary{list-style:none;display:none;align-items:center;gap:10px; font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm); padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md); cursor:pointer;color:var(--ink);} .le-rail > summary::-webkit-details-marker{display:none;} .le-rail .rail-inner{display:block;} .le-group{margin-bottom:20px;} .le-group .lbl{font-family:var(--font-body);font-size:var(--fs-caption); text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink-3); font-weight:700;margin:0 8px 8px;} .le-rail a{display:flex;justify-content:space-between;align-items:center;gap:10px; padding:8px 12px;border-radius:var(--r-sm);font-family:var(--font-body); font-size:var(--fs-sm);color:var(--ink-2);transition:background .12s,color .12s;} .le-rail a:hover{background:color-mix(in srgb,var(--brand) 9%,transparent);color:var(--ink);} .le-rail a.on{background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand);font-weight:600;box-shadow:inset 2px 0 0 var(--accent);} .le-rail a > span:first-child{overflow-wrap:anywhere;} .le-doc{padding:34px 44px;min-width:0;} .le-crumb{display:flex;align-items:center;gap:8px;font-family:var(--font-body); font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:20px;flex-wrap:wrap;} .le-crumb a:hover{color:var(--brand);} .le-crumb .icon{width:1em;height:1em;} .le-crumb [aria-current]{color:var(--ink-2);font-weight:600;} .le-hero{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:30px;} .le-hero .eyebrow{font-family:var(--font-body);font-size:var(--fs-caption); letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--brand);font-weight:700;} .le-hero h1{font-family:var(--font-heading);font-weight:600;font-size:clamp(2rem,3.4vw,2.6rem); letter-spacing:-.01em;margin:10px 0 12px;line-height:var(--lh-tight);} .le-hero p{font-family:var(--font-body);color:var(--ink-2);font-size:var(--fs-lead); max-width:var(--measure);line-height:var(--lh-body);} .le-sec{margin-bottom:38px;} .le-sec > h2{font-family:var(--font-heading);font-weight:600;font-size:var(--fs-h2); letter-spacing:-.01em;margin-bottom:6px;scroll-margin-top:20px;} .le-sec > .sec-sub{font-family:var(--font-body);color:var(--ink-3); font-size:var(--fs-sm);margin-bottom:16px;max-width:var(--measure);} .le-art{padding:16px 0;border-top:1px solid var(--line);max-width:var(--measure);} .le-art:first-of-type{border-top:0;} .le-art h3{font-family:var(--font-heading);font-weight:600;font-size:var(--fs-h3);letter-spacing:-.01em;} .le-art h3 a:hover{color:var(--brand);} .le-art p{font-family:var(--font-body);color:var(--ink-2);font-size:var(--fs-body); margin:6px 0 10px;line-height:var(--lh-body);} .le-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px; font-family:var(--font-body);font-size:var(--fs-caption);color:var(--ink-3);} .le-meta span{display:inline-flex;align-items:center;gap:6px;} .le-meta .icon{width:1.05em;height:1.05em;} .le-badge{font-family:var(--font-body);font-size:var(--fs-caption);font-weight:700; padding:2px 8px;border-radius:var(--r-pill); background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);} html[data-theme="light"] .le-badge{color:color-mix(in srgb,var(--accent) 68%,#000);} @media (prefers-color-scheme: light){ html:not([data-theme]):not([data-template="signal"]):not([data-template="beacon"]) .le-badge{color:color-mix(in srgb,var(--accent) 68%,#000);} } .le-toc{position:sticky;top:0;padding:34px 20px 34px 0;font-family:var(--font-body);} .le-toc .lbl{font-size:var(--fs-caption);text-transform:uppercase; letter-spacing:var(--track-caps);color:var(--ink-3);font-weight:700;margin-bottom:12px;} .le-toc a{display:block;padding:6px 0 6px 12px;font-size:var(--fs-sm); color:var(--ink-3);border-left:2px solid var(--line);} .le-toc a:hover{color:var(--ink);border-color:var(--ink-3);} .le-toc a.on{color:var(--brand);border-color:var(--accent);font-weight:600;} /* ============================================================ SIGNAL HOME — branded hero band + product tiles ============================================================ */ /* Deep graphite band with a restrained signal-cyan cast (no glow). Anchored to the graphite ground so white hero text stays AA in both light and dark. The band's own colors are exposed as scoped custom properties (defaults below render byte-identically) so injected AI CSS can retheme the whole band with a single var override instead of fighting hard-coded graphite hexes: --si-hero-bg the full-width band background (gradient or solid) --si-hero-ink solid on-band text (status/headline/subhead) --si-hero-ink-muted muted on-band text (subhead + status pill label) --si-hero-chip translucent status-pill surface on the band --si-status-dot the "operational" status dot color */ .si-hero{background:var(--si-hero-bg,linear-gradient(160deg,color-mix(in srgb,var(--brand) 26%,#0b0e12),#0b0e12)); color:var(--si-hero-ink,#fff);position:relative;} .si-hero .wrap{padding:44px 24px 90px;max-width:var(--content);margin:0 auto;} .si-status{display:inline-flex;align-items:center;gap:8px; font-size:var(--fs-sm);color:var(--si-hero-ink-muted,rgba(255,255,255,.92)); background:var(--si-hero-chip,rgba(255,255,255,.14));border-radius:var(--r-pill);padding:6px 14px;} .si-status .dot{width:8px;height:8px;border-radius:50%;background:var(--si-status-dot,#39c07e); box-shadow:0 0 0 3px rgba(57,192,126,.28);flex:0 0 auto;} .si-headline{max-width:640px;margin-top:22px;} .si-headline h1{font-family:var(--font-heading);font-size:var(--fs-h1);letter-spacing:-.03em;color:var(--si-hero-ink,#fff);} .si-headline p{color:var(--si-hero-ink-muted,rgba(255,255,255,.9));font-size:var(--fs-lead); margin-top:14px;max-width:46ch;line-height:var(--lh-snug);} .si-tiles{max-width:var(--content);margin:-56px auto 0;padding:0 24px; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative;z-index:2;} .si-tile{position:relative;display:flex;flex-direction:column;gap:6px; background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:22px;box-shadow:var(--e-2);transition:transform .15s,box-shadow .15s;} .si-tile:hover{transform:translateY(-3px);box-shadow:var(--e-3);} .si-tile .ic{width:46px;height:46px;border-radius:var(--r-md);flex:0 0 auto; display:grid;place-items:center;color:var(--brand-ink);background:var(--brand);margin-bottom:6px;} .si-tile h3{font-family:var(--font-heading);font-size:var(--fs-h3);letter-spacing:-.01em;overflow-wrap:anywhere;} .si-tile p{font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-snug);flex:1 0 auto;} .si-tile .count{margin-top:6px;} .si-band{max-width:var(--content);margin:40px auto 0;padding:0 24px;} .si-pop{max-width:var(--content);margin:40px auto 0;padding:0 24px;} .si-pop .head{display:flex;align-items:baseline;justify-content:space-between; gap:14px;flex-wrap:wrap;margin-bottom:14px;} .si-pop .head h2{font-family:var(--font-heading);font-size:var(--fs-h3);letter-spacing:-.01em;} .si-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} .si-item{display:flex;align-items:center;gap:12px;background:var(--card); border:1px solid var(--line);border-radius:var(--r-md);padding:15px 16px; box-shadow:var(--e-1);transition:border-color .15s,transform .12s;} .si-item:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--line));transform:translateY(-1px);} .si-item .icon.doc{color:var(--ink-3);flex:0 0 auto;} .si-item .t{font-size:var(--fs-body);font-weight:500;} .si-item .r{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto;} /* ============================================================ MOSAIC HOME — asymmetric masthead band + editorial bento grid ============================================================ */ /* Every distinctive surface is exposed as a scoped custom property with a byte-identical default (the .si-hero pattern), so injected AI CSS can retheme the whole template from a handful of var overrides instead of fighting component rules: --mo-mast-bg / --mo-mast-ink / --mo-mast-ink-muted / --mo-mast-rule --mo-card-bg / --mo-card-rule (every bento card) --mo-feature-bg / --mo-feature-rule (the lead story card) --mo-tile-rule (topic tile top rule) --mo-num (topic tile numerals) */ .mo-mast{background:var(--mo-mast-bg,var(--paper));color:var(--mo-mast-ink,var(--ink)); border-bottom:1px solid var(--mo-mast-rule,var(--line));} .mo-mast .in{max-width:var(--content);margin:0 auto;padding:58px 28px 50px; display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px 52px;align-items:end;} .mo-mast .eyebrow{font-size:var(--fs-caption);text-transform:uppercase; letter-spacing:var(--track-caps);color:var(--brand);font-weight:700;} .mo-mast h1{font-family:var(--font-heading);font-size:clamp(2.25rem,5vw,3.5rem); letter-spacing:-.035em;margin-top:14px;} .mo-mast .lede{color:var(--mo-mast-ink-muted,var(--ink-2));font-size:var(--fs-lead); line-height:var(--lh-snug);margin-top:14px;max-width:48ch;} .mo-find{display:grid;gap:14px;min-width:0;} .mo-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;} .mo-chips .lbl{font-size:var(--fs-caption);color:var(--ink-3);text-transform:uppercase; letter-spacing:var(--track-caps);font-weight:700;} /* Bento. The 6-column track list is kept at EVERY width and only the spans change per breakpoint — a `span 6` in a narrower explicit grid would create implicit columns and overflow the page. */ .mo-grid{max-width:var(--content);margin:0 auto;padding:34px 28px 8px; display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-items:start;} .mo-card{background:var(--mo-card-bg,var(--card)); border:1px solid var(--mo-card-rule,var(--line));border-radius:var(--r-lg); padding:22px 24px;box-shadow:var(--e-1);min-width:0;} .mo-lbl{display:block;font-size:var(--fs-caption);text-transform:uppercase; letter-spacing:var(--track-caps);font-weight:700;color:var(--ink-3);margin-bottom:12px;} /* span 6 (full width): the AI panel used to occupy the other 2 tracks on this row, but the unified search box now lives in the masthead, so a span-4 lead story would leave a permanent 2-column hole. */ .mo-feature{grid-column:span 6;display:flex;flex-direction:column; background:var(--mo-feature-bg,color-mix(in srgb,var(--brand) 6%,var(--card))); border-color:var(--mo-feature-rule,color-mix(in srgb,var(--brand) 22%,var(--line)));} .mo-feature .mo-lbl{color:var(--brand);} .mo-feature h2{font-family:var(--font-heading);font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.025em;overflow-wrap:anywhere;} .mo-feature h2 a:hover{color:var(--brand);} .mo-feature .sum{color:var(--ink-2);font-size:var(--fs-body);margin-top:10px; line-height:var(--lh-body);max-width:60ch;} .mo-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px; font-size:var(--fs-caption);color:var(--ink-3);} .mo-meta span{display:inline-flex;align-items:center;gap:6px;} .mo-meta .icon{width:1.05em;height:1.05em;} .mo-more{margin-top:18px;padding-top:6px;border-top:1px solid var(--line);display:grid;gap:2px;} .mo-cats{grid-column:span 6;} .mo-head{display:flex;align-items:baseline;justify-content:space-between; gap:12px;margin-bottom:16px;} .mo-head h2{font-family:var(--font-heading);font-size:var(--fs-h2);letter-spacing:-.02em;} .mo-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px; counter-reset:mo-tile;} .mo-tile{display:flex;flex-direction:column;gap:6px;padding:14px 2px 0; border-top:2px solid var(--mo-tile-rule,var(--ink)); transition:border-color .15s,color .15s;} .mo-tile::before{counter-increment:mo-tile; content:counter(mo-tile,decimal-leading-zero); font-family:var(--mono);font-size:var(--fs-caption);font-weight:700; color:var(--mo-num,var(--accent));} .mo-tile h3{font-family:var(--font-heading);font-size:1.0625rem; letter-spacing:-.015em;overflow-wrap:anywhere;} .mo-tile p{font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-snug);} .mo-tile .count{margin-top:auto;padding-top:6px;} .mo-tile:hover{border-color:var(--brand);} .mo-tile:hover h3{color:var(--brand);} .mo-list{grid-column:span 3;} .mo-row{display:flex;align-items:center;gap:12px;padding:11px 2px; border-top:1px solid var(--line);} .mo-row:first-child{border-top:0;} .mo-row .icon.doc{color:var(--ink-3);} .mo-row .t{font-size:var(--fs-body);font-weight:500;min-width:0;} /* flex:0 0 auto — never let the meta column be squeezed under its content width, or the tag pill overflows across the title (see .au-row). */ .mo-row .m{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto;} .mo-row .date{font-size:var(--fs-caption);color:var(--ink-3);white-space:nowrap;} .mo-row:hover .t{color:var(--brand);} /* No-hole guard: the two list cards are each optional (a tenant may have only popular OR only recent articles), and a lone span-3 card leaves three dead columns beside it. Everything else in this grid is full width, so this is the only pairing that can go half-empty. */ .mo-grid:not(:has(.mo-list + .mo-list)) .mo-list{grid-column:span 6;} /* ============================================================ BEACON HOME — ask-first sticky lead pane + scrolling feed ============================================================ */ /* Scoped, AI-overridable surfaces (byte-identical defaults): --be-stage-bg / --be-glow (the full-width stage + its spotlight) --be-ask-bg / --be-ask-rule (the focal Ask-AI panel) --be-card-bg / --be-card-rule (topic rows in the feed) */ .be-stage{background:var(--be-stage-bg,var(--paper));position:relative;isolation:isolate;} .be-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:var(--be-glow,radial-gradient(58% 52% at 20% 6%, color-mix(in srgb,var(--brand) 18%,transparent) 0%,transparent 72%));} .be-split{max-width:var(--content);margin:0 auto;padding:52px 28px 44px; display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr); gap:36px 56px;align-items:start;} .be-lead{position:sticky;top:24px;min-width:0;} /* A sticky element TALLER than the viewport pins its top and never scrolls, so the tail is unreachable — which is exactly what a long AI answer + sources does to this pane. Let the pane scroll itself, but only once the answer region is actually showing (the JS un-hides .hc-ask-result), so in the common short state the ask panel's shadow is not clipped by a scroll container. Suspended again while the typeahead is open: the hits list is an absolutely positioned overlay now, and a scroll container here would clip it against the pane instead of letting it float over the feed. (Only reachable when they type a NEW query with an answer already on screen.) */ @media (min-width:981px){ .be-lead:has(.hc-ask-result:not([hidden])):not(:has(.hc-ask-hits:not([hidden]))){ max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain;} } .be-lead .eyebrow{font-size:var(--fs-caption);text-transform:uppercase; letter-spacing:var(--track-caps);color:var(--brand);font-weight:700;} .be-lead h1{font-family:var(--font-heading);font-size:clamp(2rem,4vw,2.9rem); letter-spacing:-.03em;margin-top:12px;} .be-lead .lede{color:var(--ink-2);font-size:var(--fs-lead); line-height:var(--lh-snug);margin-top:14px;max-width:42ch;} .be-lead .hc-ask{max-width:none;margin:22px 0 0; background:var(--be-ask-bg,var(--card)); border-color:var(--be-ask-rule,color-mix(in srgb,var(--brand) 28%,var(--line))); box-shadow:var(--e-3);} .be-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;} .be-chips .lbl{font-size:var(--fs-caption);color:var(--ink-3);text-transform:uppercase; letter-spacing:var(--track-caps);font-weight:700;} .be-feed{display:grid;gap:28px;min-width:0;} .be-sec-head{display:flex;align-items:baseline;justify-content:space-between; gap:12px;margin-bottom:12px;} .be-sec-head h2{font-family:var(--font-heading);font-size:var(--fs-h3);letter-spacing:-.015em;} .be-topics{display:grid;gap:10px;} .be-topic{display:flex;align-items:flex-start;gap:14px; background:var(--be-card-bg,var(--card)); border:1px solid var(--be-card-rule,var(--line));border-radius:var(--r-md); padding:15px 18px;box-shadow:var(--e-1);transition:border-color .15s,transform .12s;} .be-topic:hover{border-color:color-mix(in srgb,var(--brand) 34%,var(--line)); transform:translateX(2px);} .be-topic .ic{width:38px;height:38px;border-radius:var(--r-pill);flex:0 0 auto; display:grid;place-items:center;color:var(--brand); background:color-mix(in srgb,var(--brand) 14%,transparent);} .be-topic .body{flex:1 1 auto;min-width:0;} .be-topic h3{font-family:var(--font-heading);font-size:1rem; letter-spacing:-.01em;overflow-wrap:anywhere;} .be-topic p{font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-snug);margin-top:3px;} .be-topic .count{flex:0 0 auto;margin-left:auto;padding-left:6px;} .be-topic:hover h3{color:var(--brand);} .be-rows{display:grid;gap:2px;} .be-row{display:flex;align-items:center;gap:12px;padding:12px 2px; border-top:1px solid var(--line);} .be-row:first-child{border-top:0;} .be-row .icon.doc{color:var(--ink-3);} .be-row .t{font-size:var(--fs-body);font-weight:500;min-width:0;} .be-row .m{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto;} .be-row .date{font-size:var(--fs-caption);color:var(--ink-3);white-space:nowrap;} .be-row:hover .t{color:var(--brand);} /* ============================================================ SHARED PAGE LAYOUTS — category / article / search Adapt automatically to the active scheme via tokens. ============================================================ */ .hc-doc{max-width:860px;margin:0 auto;padding:32px 28px 8px;} .hc-article{max-width:860px;margin:0 auto;padding:32px 28px 8px;} .hc-crumb{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm); color:var(--ink-3);margin-bottom:18px;flex-wrap:wrap;} .hc-crumb a:hover{color:var(--brand);} .hc-crumb .icon{width:1em;height:1em;} .hc-crumb [aria-current]{color:var(--ink-2);font-weight:600;overflow-wrap:anywhere;} .hc-page-head{margin-bottom:22px;} .hc-page-head .eyebrow{font-size:var(--fs-caption);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--brand);font-weight:700;} .hc-page-head h1{font-family:var(--font-heading);font-size:clamp(1.75rem,3.4vw,2.4rem);letter-spacing:-.02em; margin:8px 0 8px;overflow-wrap:anywhere;} html[data-template="ledger"] .hc-page-head h1{font-family:var(--font-heading);font-weight:600;} .hc-page-head p{color:var(--ink-2);font-size:var(--fs-lead); line-height:var(--lh-snug);} .hc-page-head .meta{color:var(--ink-3);font-size:var(--fs-sm);margin-top:10px; display:flex;flex-wrap:wrap;gap:6px 16px;} .hc-page-head .meta span{display:inline-flex;align-items:center;gap:6px;} .hc-list{display:grid;gap:2px;margin-top:4px;} .hc-list-item{display:flex;align-items:flex-start;gap:14px;padding:13px 6px; border-top:1px solid var(--line);transition:background .12s;} .hc-list-item:first-child{border-top:0;} .hc-list-item .icon.doc{color:var(--ink-3);margin-top:2px;flex:0 0 auto;} .hc-list-item .body{min-width:0;} .hc-list-item .t{font-size:var(--fs-body);font-weight:600;overflow-wrap:anywhere;} .hc-list-item:hover .t{color:var(--brand);} .hc-list-item .s{color:var(--ink-3);font-size:var(--fs-sm);margin-top:3px;line-height:var(--lh-snug);} .hc-list-item .m{margin-left:auto;display:flex;align-items:center;gap:12px;flex:0 0 auto;} .hc-list-item .date{font-size:var(--fs-caption);color:var(--ink-3);white-space:nowrap;} /* article body (sanitized KB HTML) */ .hc-body{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--ink);} /* Readable text measure: prose is capped at ~66ch for comfortable reading, while media (screenshots, tables, code, video) stays full column width so detail is still legible. Image-bearing paragraphs opt out via :has(). */ .hc-body > p,.hc-body > ul,.hc-body > ol,.hc-body > h1,.hc-body > h2, .hc-body > h3,.hc-body > h4,.hc-body > blockquote{max-width:66ch;} .hc-body > p:has(img),.hc-body > p:has(iframe),.hc-body > p:has(.fr-video), .hc-body > figure,.hc-body > .hc-table-scroll,.hc-body > pre,.hc-body > table{max-width:none;} .hc-body h1,.hc-body h2,.hc-body h3,.hc-body h4{font-family:var(--font-heading);margin:1.2em 0 .45em;letter-spacing:-.01em;line-height:var(--lh-snug);} html[data-template="ledger"] .hc-body h1, html[data-template="ledger"] .hc-body h2, html[data-template="ledger"] .hc-body h3{font-family:var(--font-heading);font-weight:600;} /* Ledger's built-in look keeps

in the body sans stack (only h1–h3 are the Fraunces serif); preserve that when no brand font pair is active. */ html[data-template="ledger"] .hc-body h4{font-family:var(--font-body);} .hc-body h2{font-size:var(--fs-h2);} .hc-body h3{font-size:var(--fs-h3);} .hc-body p{margin:0 0 .9em;} .hc-body ul,.hc-body ol{margin:0 0 .9em;padding-left:1.4em;} .hc-body li{margin:.35em 0;} .hc-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;} .hc-body a:hover{color:color-mix(in srgb,var(--brand) 80%,#000);} .hc-body img{border-radius:var(--r-md);margin:1em 0;height:auto;} .hc-body code{font-family:var(--mono);font-size:.85em; background:color-mix(in srgb,var(--ink) 8%,transparent);padding:.15em .4em;border-radius:var(--r-sm);} .hc-body pre{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); padding:16px;overflow-x:auto;margin:0 0 1.1em;} .hc-body pre code{background:none;padding:0;} .hc-body blockquote{margin:0 0 1.1em;padding:6px 0 6px 18px; border-left:3px solid var(--brand);color:var(--ink-2);} .hc-body table{width:100%;border-collapse:collapse;margin:0 0 1.1em;font-size:var(--fs-body);} .hc-body th,.hc-body td{border:1px solid var(--line);padding:8px 12px;text-align:left;} .hc-table-scroll{overflow-x:auto;} /* Safety net for imported 
: wrap long prose lines instead of forcing a
   single horizontally-scrolling monospace line. overflow-x:auto (above) is kept
   so genuinely un-wrappable code (long tokens) can still scroll. */
.hc-body pre{white-space:pre-wrap;overflow-wrap:break-word;}

/* ---------- callouts (imported FreshDesk fd-callout boxes) ----------
   Token-driven so each scheme's palette drives legibility. The hue tints the
   card background (via color-mix so it darkens/lightens with the theme) and
   colours the left border; body text stays --ink so it is always legible in
   light AND dark across aurora / ledger / signal. */
.hc-callout{
  --hc-callout-hue:var(--ink-3);          /* neutral default (bare fd-callout) */
  margin:1.2em 0;padding:14px 16px 14px 18px;
  border:1px solid var(--line);
  border-left:5px solid var(--hc-callout-hue);
  border-radius:var(--r-md);
  background:color-mix(in srgb,var(--hc-callout-hue) 10%,var(--card));
  color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);}
.hc-callout > :first-child{margin-top:0;}
.hc-callout > :last-child{margin-bottom:0;}
.hc-callout--note{--hc-callout-hue:#e86f25;}          /* orange */
.hc-callout--idea{--hc-callout-hue:#2c5cc5;}          /* blue */
.hc-callout--success{--hc-callout-hue:#1f9d57;}       /* green */
.hc-callout--warning{--hc-callout-hue:#d99e00;}       /* amber */
.hc-callout--other-articles{--hc-callout-hue:var(--ink-3);}  /* neutral/ink */

/* ---------- video embeds (imported allowlisted iframes) ----------
   Responsive 16:9 wrapper; the iframe absolute-fills it. Radius + margin match
   article images/figures. */
.hc-embed{position:relative;aspect-ratio:16/9;margin:1.2em 0;
  border-radius:var(--r-md);overflow:hidden;
  background:color-mix(in srgb,var(--ink) 6%,var(--card));}
.hc-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* image lightbox — article images zoom on click (help_lightbox.js) */
.hc-body img{cursor:zoom-in;}
.hc-body img:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
.hc-lightbox{position:fixed;inset:0;z-index:1000;display:flex;padding:28px;
  background:rgba(10,9,14,.85);cursor:zoom-out;overflow:auto;
  opacity:0;transition:opacity .16s ease;}
.hc-lightbox.on{opacity:1;}
.hc-lightbox img{margin:auto;max-width:100%;max-height:100%;border-radius:var(--r-md);
  box-shadow:var(--e-3);cursor:zoom-in;}
.hc-lightbox img.zoomed{max-width:none;max-height:none;border-radius:0;
  cursor:grab;touch-action:none;}
.hc-lightbox img.zoomed:active{cursor:grabbing;}
.hc-lightbox .close,.hc-lightbox .zoom{position:fixed;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  border-radius:var(--r-pill);background:rgba(255,255,255,.14);color:#fff;
  font-size:24px;line-height:1;}
.hc-lightbox .close:hover,.hc-lightbox .zoom:hover{background:rgba(255,255,255,.26);}
.hc-lightbox .close{top:14px;right:14px;}
.hc-lightbox .zoom{bottom:16px;left:50%;transform:translateX(-50%);font-size:28px;}
.hc-lightbox .cap{position:fixed;bottom:72px;left:50%;transform:translateX(-50%);
  max-width:80%;text-align:center;color:rgba(255,255,255,.78);font-size:var(--fs-sm);}
@media (prefers-reduced-motion:reduce){.hc-lightbox{transition:none;}}

.hc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
/* Tag pills in .hc-tags are LINKS to the branded tag listing (help/tag.html),
   so they need a hover affordance and a comfortable tap target on phones.
   Scoped to a.tag so the read-only category pills in list rows (span.tag) are
   untouched. */
a.tag:hover,a.tag:focus-visible{background:color-mix(in srgb,var(--brand) 22%,transparent);}
@media (max-width:640px){a.tag{padding:7px 12px;}}

/* was this helpful */
.hc-helpful{margin-top:24px;padding:20px 22px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--card);display:flex;flex-wrap:wrap;
  align-items:center;gap:14px 18px;}
.hc-helpful h2{font-size:var(--fs-h3);letter-spacing:-.01em;flex:1 1 auto;}
.hc-helpful form{display:inline;}
.hc-helpful .acts{display:flex;gap:10px;}

/* related */
.hc-related{margin-top:24px;border-top:1px solid var(--line);padding-top:22px;}
.hc-related h2{font-size:var(--fs-h3);letter-spacing:-.01em;margin-bottom:10px;}

/* search summary */
.hc-searchbar{max-width:720px;margin:0 auto;padding:40px 28px 0;}
.hc-searchsum{color:var(--ink-3);font-size:var(--fs-sm);margin-top:16px;}
.hc-searchsum b{color:var(--ink);font-weight:700;}
/* Search results list container. The spacing above the results was an inline
   style on the markup (unbeatable by injected AI CSS without !important); moved
   here as a stable, overridable class. Identical rendering (only padding-top is
   set, over .hc-doc's shorthand). */
.hc-search-results{padding-top:28px;}

/* ============================================================
   ASK AI — public help center (all schemes, light + dark).
   Token-driven so it inherits each scheme's palette automatically.
   ============================================================ */
/* The unified search + Ask-AI box. This is now the ONE input on the page (the
   separate .search--hero hero form was removed from every home layout), so it
   carries the hero's visual weight: e-3 elevation and a slightly larger measure. */
/* --hc-ask-pad-x is the card's horizontal padding AND the inset of the overlay
   dropdown below, so the panel lines up with the input at every breakpoint from
   one value. */
.hc-ask{
  --hc-ask-pad-x:22px;
  max-width:680px;margin:26px auto 0;text-align:left;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--e-3);padding:20px var(--hc-ask-pad-x);
  position:relative;}
/* Per-scheme placement so it lines up with each layout. */
.au-hero .hc-ask{margin:28px auto 0;}
.le-hero .hc-ask{max-width:none;margin:26px 0 0;}
.si-hero .hc-ask{max-width:600px;margin:24px 0 0;}
.mo-find .hc-ask{max-width:none;margin:0;}
.be-lead .hc-ask{max-width:none;}
.hc-searchbar .hc-ask{max-width:720px;margin:0 auto;}

.hc-ask-head{display:flex;align-items:center;gap:10px;}
.hc-ask-head h2{font-size:var(--fs-h3);letter-spacing:-.01em;margin:0;}
.hc-ask-badge{display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-caption);font-weight:700;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--brand-ink);background:var(--brand);
  border-radius:var(--r-pill);padding:4px 10px;}
.hc-ask-badge .icon{width:.95em;height:.95em;}
.hc-ask-sub{color:var(--ink-2);font-size:var(--fs-sm);margin:8px 0 14px;}

.hc-ask-form{display:flex;gap:10px;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);padding:6px 6px 6px 14px;}
.hc-ask-form:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}
.hc-ask-input{flex:1 1 auto;border:0;background:transparent;font:inherit;
  color:var(--ink);padding:9px 0;min-width:0;}
.hc-ask-input:focus{outline:none;}
.hc-ask-input::placeholder{color:var(--ink-3);}
.hc-ask-submit{white-space:nowrap;}
.hc-ask-submit:disabled{opacity:.6;cursor:progress;}

.hc-ask-icon{color:var(--ink-3);flex:0 0 auto;}

/* ---------- typeahead matches (kb.suggest) ----------
   An OVERLAY dropdown anchored under the form. In flow (the previous shape) it
   pushed the whole page down on every keystroke, and once an answer could render
   it also sat between the question and its answer — the list, not the answer,
   read as the response.

   `top` is deliberately left auto so the panel takes its STATIC position, i.e.
   exactly where it would have been in flow: directly below the form. That needs
   no knowledge of the head/sub block above it, which all five templates restyle
   independently, and it survives the phone breakpoint where the form wraps to
   two rows. It must therefore stay a SIBLING of .hc-ask-form in the markup (the
   sr-only hint between them is itself out of flow, so it does not shift this).
   .hc-ask is position:relative, so the containing block is its padding box. */
.hc-ask-hits{position:absolute;z-index:60;
  left:var(--hc-ask-pad-x);right:var(--hc-ask-pad-x);margin-top:8px;
  background:var(--hc-ask-hits-bg,var(--card));border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--e-3);padding:6px;
  display:grid;gap:2px;max-height:min(46vh,320px);overflow-y:auto;
  overscroll-behavior:contain;
  animation:hc-ask-drop .12s ease-out;}
@keyframes hc-ask-drop{from{opacity:0;transform:translateY(-4px);}}
/* The UA's `[hidden]{display:none}` is a TYPE-less rule, so ANY author
   `display:` on the same element beats it and the element stays visible while
   the JS believes it is hidden. Every region below is toggled via the hidden
   attribute, so each needs its own reset. Without it: an empty bordered strip
   sits under the idle input, and "Thinking…" never leaves once the answer
   arrives (that second one had been live for every visitor who asked a
   question). !important is not an option here — help.css forbids it outside the
   reduced-motion kill switch. */
.hc-ask-hits[hidden],.hc-ask-loading[hidden],.hc-ask-related[hidden]{display:none;}
.hc-ask-hit{display:flex;align-items:center;gap:10px;padding:9px 8px;
  border-radius:var(--r-sm);color:var(--ink);font-size:var(--fs-sm);
  transition:background .12s,color .12s;}
.hc-ask-hit .icon.doc{color:var(--ink-3);flex:0 0 auto;}
.hc-ask-hit-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:500;}
.hc-ask-hit .tag{margin-left:auto;flex:0 0 auto;}
.hc-ask-hit:hover,.hc-ask-hit.is-active{
  background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--brand);}
.hc-ask-hit:hover .icon.doc,.hc-ask-hit.is-active .icon.doc{color:var(--brand);}
.hc-ask-hit--more{justify-content:center;font-weight:600;color:var(--brand);}
/* The zero-hit invitation. A