/* ==========================================================================
   ZenGuides — app stylesheet.
   Built on the Daitalens tokens in dl-tokens.css. The shape comes from the
   signed-off spec (AI_Docs/mocks/DLInstructions_Roko.html in the daitalens
   repo): a CSA-shaped slim utility bar, a category rail, one internal scroll
   region per column, cards not long row stacks, no horizontal scrollbars.
   ========================================================================== */

/* --brand flips to the accent in dark, where the primary blue is too heavy.
   Everything else composes alpha over --dl-primary-rgb / --dl-accent-rgb. */
:root { --brand: rgb(var(--dl-primary-rgb)); --brand-rgb: var(--dl-primary-rgb); }
[data-theme="dark"] { --brand: rgb(var(--dl-accent-rgb)); --brand-rgb: var(--dl-accent-rgb); }

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--dl-font-display);
    font-size: 14px;
    line-height: 1.55;
    background: var(--dl-bg-primary);
    color: var(--dl-text-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: var(--dl-tracking-tight); }
p { margin: 0; }
code {
    font-family: var(--dl-font-mono); font-size: 0.86em;
    background: var(--dl-bg-secondary); color: var(--dl-text-secondary);
    padding: 1px 5px; border-radius: 4px;
}
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .35); border-radius: var(--dl-radius-sm); }

/* Blazor's FocusOnNavigate puts tabindex="-1" on the page heading and focuses it on
   every navigation, so the focus ring drew a box around the title of every page. The
   heading is a screen-reader landing point, not something the reader tabbed to, so it
   keeps the focus without advertising it. Anything genuinely reachable by keyboard
   still gets the ring. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { box-shadow: none; outline: none; }

/* ── App shell ─────────────────────────────────────────────────────────── */
.hc-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--dl-bg-primary); }

/* ── Top bar (ZG-45) ───────────────────────────────────────────────────────
   Three things: the brand, one search box, the reader's menu. A grid, so the search box
   takes the middle and a long brand name truncates instead of wrapping the bar. Colours
   are all tokens; the brand's own come from the white-label's style block in App.razor. */
.hc-util {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
    flex: 0 0 auto; position: relative;
    background: var(--dl-surface); border-bottom: 1px solid var(--dl-border-light);
    padding: 9px 22px; box-shadow: var(--dl-shadow-sm); z-index: 10;
}

.hc-logo {
    display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 340px;
    font-weight: 800; font-size: 15px; color: var(--brand); letter-spacing: var(--dl-tracking-tight);
    white-space: nowrap;
}
.hc-logo:hover { text-decoration: none; }
/* 22px, matching the height the Daitalens FE renders its wordmark at. */
.hc-logo .mark { height: 22px; width: auto; max-width: 160px; object-fit: contain; display: block; flex: 0 0 auto; }
.hc-logo .mark.dark { display: none; }
[data-theme="dark"] .hc-logo .mark.light { display: none; }
[data-theme="dark"] .hc-logo .mark.dark { display: block; }
/* A hairline between a logo and the name, so a wordmark and "… Help" read as two things. */
.hc-logo .mark + .mark + .hc-logo-name { padding-left: 9px; border-left: 1px solid var(--dl-border-light); }
.hc-logo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* ZG-62: a logo whose file is missing hides itself; [hidden] must beat the light/dark
   display rules, and the name then stands alone without the divider. */
.hc-logo .mark[hidden] { display: none !important; }
.hc-logo .mark[hidden] + .mark[hidden] + .hc-logo-name { padding-left: 0; border-left: 0; }

/* The bar's search box: the page box, slimmer, centred in the middle column. */
.hc-barsearch-box { min-width: 0; }
.hc-searchwrap.hc-searchbox--bar { max-width: 520px; margin: 0 auto; width: 100%; }
.hc-searchbox--bar .hc-searchbox {
    padding: 7px 14px; gap: 9px; border-radius: var(--dl-radius-full);
    background: var(--dl-bg-primary); box-shadow: none;
}
.hc-searchbox--bar .hc-searchbox .ico { font-size: 16px; }
.hc-searchbox--bar .hc-searchbox input { font-size: 13.5px; }

/* The phone's search icon. Hidden on desktop, where the box is in the bar. */
.hc-barsearch { display: none; }
.hc-barsearch > summary {
    list-style: none; cursor: pointer; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--brand); border: 1px solid var(--dl-border-light);
}
.hc-barsearch > summary::-webkit-details-marker { display: none; }
.hc-barsearch > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hc-barsearch[open] > summary { background: rgba(var(--brand-rgb), .11); }

.hc-ufirst { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

.hc-uchip {
    display: flex; align-items: center; gap: 7px; margin-left: 6px; padding: 4px 11px 4px 4px;
    border-radius: var(--dl-radius-full); background: var(--dl-bg-secondary);
    font-size: 12px; font-weight: 600; color: var(--dl-text-secondary); white-space: nowrap;
}
.hc-av {
    width: 25px; height: 25px; border-radius: 50%; background: var(--brand); color: #fff;
    font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* ZG-99: the plain "Sign in" a stranger sees where the name menu sits, on a help centre that
   has a sign-in. The chip's footprint and the brand's ink, no fill, so it reads as a door and
   not as a call to action competing with the page. Tokens only: dark mode follows. */
.hc-signin-link {
    display: inline-flex; align-items: center; height: 33px; margin-left: 6px; padding: 0 14px;
    border-radius: var(--dl-radius-full); border: 1px solid var(--dl-border-light);
    font-size: 13px; font-weight: 700; color: var(--brand); white-space: nowrap;
    transition: background var(--dl-duration-fast) var(--dl-ease-smooth);
}
.hc-signin-link:hover { background: rgba(var(--brand-rgb), .08); text-decoration: none; }
.hc-signin-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── User menu (DL-3039) ───────────────────────────────────────────────────
   A <details> dropdown, so the utility bar needs no circuit and no JS. All
   tokens, so it follows the theme with no [data-theme] block of its own. */
.hc-umenu { position: relative; margin-left: 6px; }
.hc-umenu > summary {
    margin-left: 0; cursor: pointer; list-style: none; user-select: none;
    transition: background var(--dl-duration-fast) var(--dl-ease-smooth);
}
.hc-umenu > summary::-webkit-details-marker { display: none; }
.hc-umenu > summary:hover { background: var(--dl-border-light); }
.hc-umenu > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hc-ucaret { display: inline-flex; color: var(--dl-text-muted); margin-left: 1px; }
.hc-umenu[open] .hc-ucaret { transform: rotate(180deg); }

.hc-umenu-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 226px;
    background: var(--dl-surface); border: 1px solid var(--dl-border-light);
    border-radius: var(--dl-radius-md); box-shadow: var(--dl-shadow-lg);
    padding: var(--dl-space-2); animation: hc-umenu-in var(--dl-duration-fast) var(--dl-ease-out);
}
@keyframes hc-umenu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.hc-umenu-who { padding: 6px 9px 8px; border-bottom: 1px solid var(--dl-border-subtle); margin-bottom: 5px; }
.hc-umenu-who .n { font-size: 13px; font-weight: 700; color: var(--dl-text-primary); }
.hc-umenu-who .e { font-size: 11.5px; color: var(--dl-text-muted); margin-top: 1px; }

.hc-umenu-form { margin: 0; }
.hc-umenu-item {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px;
    background: transparent; border: 0; border-radius: var(--dl-radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
    color: var(--dl-text-primary);
    transition: background var(--dl-duration-fast) var(--dl-ease-smooth);
}
.hc-umenu-item:hover { background: var(--dl-bg-secondary); }
.hc-umenu-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* The fear-killer sits under the action, not in a tooltip: a reader deciding
   whether to click should not have to hover to find out what it costs them. */
.hc-umenu-note { padding: 3px 9px 4px; font-size: 11.5px; color: var(--dl-text-muted); }

@media (prefers-reduced-motion: reduce) {
    .hc-umenu-pop { animation: none; }
}
[data-theme="dark"] .hc-av { color: #0f1117; }

/* Phone (A3): brand, search icon, initial. The first name hides; the search box drops
   out of the bar and opens full width under it when the icon is tapped. */
@media (max-width: 640px) {
    .hc-util { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 9px 14px; }
    .hc-logo { max-width: none; }
    .hc-barsearch { display: block; }
    .hc-barsearch-box { display: none; }
    .hc-barsearch[open] ~ .hc-barsearch-box {
        display: block; position: absolute; left: 0; right: 0; top: 100%;
        padding: 10px 14px; background: var(--dl-surface);
        border-bottom: 1px solid var(--dl-border-light); box-shadow: var(--dl-shadow-md);
    }
    .hc-searchwrap.hc-searchbox--bar { max-width: none; }
    .hc-ufirst, .hc-ucaret { display: none; }
    .hc-uchip { padding: 4px; }
}

.hc-themebtn {
    background: transparent; border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-sm);
    color: var(--dl-text-secondary); font-family: inherit; font-size: 14px; line-height: 1;
    padding: 6px 9px; cursor: pointer; margin-left: 4px;
}
.hc-themebtn:hover { background: var(--dl-bg-secondary); }
.hc-themebtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* ZG-172: the icon shows the choice in force, from <html data-theme-pref>, so it needs no circuit. */
.hc-themebtn .ti { display: none; }
.hc-themebtn .ti > * { display: block; }
:root:not([data-theme-pref="light"]):not([data-theme-pref="dark"]) .hc-themebtn .ti-system,
:root[data-theme-pref="light"] .hc-themebtn .ti-light,
:root[data-theme-pref="dark"] .hc-themebtn .ti-dark { display: block; }
/* The bar's right-hand end: the theme switch, then the name menu or "Sign in". */
.hc-util-end { display: flex; align-items: center; gap: 6px; justify-self: end; }
.hc-util-end .hc-themebtn { margin-left: 0; }
.hc-util-end .hc-umenu { margin-left: 0; }

/* ── Chips ─────────────────────────────────────────────────────────────── */
.hc-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
    border-radius: var(--dl-radius-full); padding: 3px 10px; letter-spacing: .02em; white-space: nowrap;
}
.hc-chip.lock { background: rgba(11, 63, 104, .10); color: var(--dl-nav-text); }
[data-theme="dark"] .hc-chip.lock { background: rgba(255, 255, 255, .08); color: var(--dl-nav-text); }
.hc-chip.neutral { background: var(--dl-bg-secondary); color: var(--dl-text-secondary); border: 1px solid var(--dl-border-subtle); }
.hc-chip.brand { background: rgba(var(--brand-rgb), .12); color: var(--brand); }
/* ZG-103, also fixed: GuideStatus.Chip has always said "ok" for a published guide, and no rule drew it. */
.hc-chip.ok { background: rgba(56, 161, 105, .12); color: #22754b; }
[data-theme="dark"] .hc-chip.ok { color: #68d391; }
.hc-chip.warn { background: rgba(214, 158, 46, .14); color: #8a6415; }
[data-theme="dark"] .hc-chip.warn { color: var(--dl-warning); }
/* ZG-67: a version an AI wrote for a person. Brand-tinted and dashed: made, not yet checked. */
.hc-chip.ai { background: rgba(var(--brand-rgb), .08); color: var(--brand); border: 1px dashed rgba(var(--brand-rgb), .45); }
[data-theme="dark"] .hc-chip.ai { background: rgba(var(--brand-rgb), .16); border-color: rgba(var(--brand-rgb), .6); }
.hc-verr .hc-chip { padding: 1px 7px; font-size: 10.5px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.hc-btn {
    display: inline-flex; align-items: center; gap: 7px; background: var(--brand); color: #fff;
    border: 1px solid transparent; border-radius: var(--dl-radius-sm); padding: 8px 15px;
    font-size: 13px; font-weight: 600; font-family: inherit; white-space: nowrap; cursor: pointer;
    transition: filter var(--dl-duration-fast) var(--dl-ease-smooth);
}
.hc-btn:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
[data-theme="dark"] .hc-btn { color: #0f1117; }
[data-theme="dark"] .hc-btn:hover { color: #0f1117; }
.hc-btn.ghost { background: transparent; color: var(--dl-text-secondary); border-color: var(--dl-border-light); }
.hc-btn.ghost:hover { background: var(--dl-bg-secondary); color: var(--dl-text-primary); filter: none; }

/* ── Body: rail + main (+ optional TOC) ────────────────────────────────── */
.hc-body { flex: 1 1 auto; display: grid; grid-template-columns: 236px 1fr; min-height: 0; }
.hc-body.with-toc { grid-template-columns: 236px 1fr 210px; }

.hc-rail {
    background: var(--dl-surface); border-right: 1px solid var(--dl-border-subtle);
    padding: 16px 12px; overflow-y: auto; overflow-x: hidden; min-height: 0;
}
.hc-rail-h {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--dl-tracking-wider);
    color: var(--dl-text-muted); padding: 0 9px; margin-bottom: 8px;
}
/* The rail: a category is a twisty, a section is a label, only a guide is a link. */
.hc-catgroup { margin-bottom: 2px; }
.hc-catgroup > summary { list-style: none; cursor: pointer; }
.hc-catgroup > summary::-webkit-details-marker { display: none; }

.hc-cat {
    display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--dl-radius-sm);
    font-size: 13.5px; color: var(--dl-text-secondary); font-weight: 500;
}

/* A category holding one readable guide links straight to it. Same row metrics as a
   twisty so the rail stays one aligned column, but it is an <a>, not a <summary>. */
.hc-catlink { margin-bottom: 2px; text-decoration: none; }
.hc-catlink .t { flex: 1; min-width: 0; }
.hc-catlink:hover { background: var(--dl-bg-secondary); color: var(--dl-text-primary); text-decoration: none; }
.hc-catlink:hover .ico { color: var(--dl-text-primary); }

.hc-seclabel {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: var(--dl-tracking-wide); color: var(--dl-text-muted);
    padding: 10px 9px 3px 32px;
}

.hc-guide {
    display: flex; align-items: center; gap: 6px; padding: 5px 9px 5px 32px;
    border-radius: var(--dl-radius-sm); font-size: 13px; color: var(--dl-text-secondary);
    line-height: 1.35;
}
.hc-guide:hover { background: var(--dl-bg-secondary); color: var(--dl-text-primary); text-decoration: none; }
.hc-guide.on { background: rgba(var(--brand-rgb), .12); color: var(--brand); font-weight: 700; }
.hc-cat:hover { background: var(--dl-bg-secondary); text-decoration: none; }
.hc-cat .ico { font-size: 15px; width: 17px; text-align: center; color: var(--dl-text-muted); line-height: 1; }
.hc-cat.on { background: rgba(var(--brand-rgb), .12); color: var(--brand); font-weight: 700; }
.hc-cat.on .ico { color: var(--brand); }
.hc-cat.internal { color: var(--dl-nav-text); font-weight: 600; }
.hc-cat .ct { margin-left: auto; font-size: 11px; color: var(--dl-text-muted); font-weight: 600; }
.hc-sub {
    display: block; padding: 5px 9px 5px 35px; font-size: 12.5px; color: var(--dl-text-secondary);
    border-radius: var(--dl-radius-sm);
}
.hc-sub:hover { background: var(--dl-bg-secondary); text-decoration: none; }
.hc-sub.on { color: var(--brand); font-weight: 700; }

/* ── Help home, the phone "All guides" drawer, Next guide (ZG-48) ─────────
   The rail's list renders twice: the sidebar above 900px, the drawer at 900px and below.
   The drawer is a <details>; open, its summary also draws the scrim and the "Close" bar,
   so a tap on either closes it with no script. */
.hc-rail-home { margin-bottom: 10px; font-weight: 600; text-decoration: none; }
.hc-rail-home .t { flex: 1; min-width: 0; }
.hc-rail-home:hover { color: var(--dl-text-primary); }
.hc-rail-home:hover .ico { color: var(--dl-text-primary); }

.hc-alldrawer { display: none; }
.hc-alldrawer > summary { list-style: none; cursor: pointer; }
.hc-alldrawer > summary::-webkit-details-marker { display: none; }
.hc-alldrawer-btn {
    display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px;
    font-size: 14px; font-weight: 700; color: var(--dl-text-primary);
}
.hc-alldrawer-btn .tp {
    color: var(--dl-text-muted); font-weight: 600; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-alldrawer-btn .tp::before { content: "· "; }
.hc-alldrawer-btn .cv { margin-left: auto; color: var(--dl-text-muted); display: inline-flex; }
.hc-alldrawer > summary:hover .hc-alldrawer-btn { background: var(--dl-bg-secondary); }
.hc-alldrawer-head { display: none; }
.hc-alldrawer-panel { display: none; }

.hc-alldrawer[open] > summary::before {
    content: ""; position: fixed; inset: 0; z-index: 60; background: rgba(15, 17, 23, .45);
}
.hc-alldrawer[open] .hc-alldrawer-head {
    display: flex; align-items: center; position: fixed; top: 0; right: 0; z-index: 62;
    width: min(86vw, 340px); height: 52px; padding: 0 16px;
    background: var(--dl-surface); border-bottom: 1px solid var(--dl-border-subtle);
}
.hc-alldrawer-head .k { font-size: 15px; font-weight: 800; color: var(--dl-text-primary); }
.hc-alldrawer-head .x { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand); padding: 12px 0 12px 16px; }
.hc-alldrawer[open] .hc-alldrawer-panel {
    display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
    width: min(86vw, 340px); padding: 64px 12px 24px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--dl-surface); box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
}
[data-theme="dark"] .hc-alldrawer[open] > summary::before { background: rgba(0, 0, 0, .6); }
[data-theme="dark"] .hc-alldrawer[open] .hc-alldrawer-panel { box-shadow: -8px 0 24px rgba(0, 0, 0, .5); }
/* The page behind stays put while the drawer scrolls. On a phone the WINDOW scrolls (ZG-122),
   and only the root element's overflow reaches the window, so the lock sits on <html>. The
   scroll position is kept while it is locked, so closing the drawer leaves the reader where
   they were. */
html:has(.hc-alldrawer[open]), body:has(.hc-alldrawer[open]) { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
    .hc-alldrawer[open] .hc-alldrawer-panel { animation: hc-drawer-in var(--dl-duration-fast) var(--dl-ease-smooth); }
}
@keyframes hc-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* The guide's ending: a full-width card to the next guide, or a plain line when the topic
   is done. Never a dead stop (Peak-End). */
.hc-next {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px;
    margin-top: 16px; padding: 13px 16px; border-radius: var(--dl-radius-md);
    background: var(--dl-surface); border: 1px solid var(--dl-border-light); text-decoration: none;
    transition: border-color var(--dl-duration-fast) var(--dl-ease-smooth), box-shadow var(--dl-duration-fast) var(--dl-ease-smooth);
}
.hc-next:hover { text-decoration: none; border-color: rgba(var(--brand-rgb), .5); box-shadow: 0 2px 10px rgba(var(--brand-rgb), .12); }
.hc-next .k {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: var(--dl-tracking-wide); color: var(--dl-text-muted);
}
.hc-next .t { grid-column: 1; font-size: 15px; font-weight: 800; color: var(--brand); line-height: 1.35; }
.hc-next .ar { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; color: var(--brand); transform: rotate(-90deg); }
.hc-next.end { display: block; background: transparent; border-style: dashed; }
.hc-next.end .k { display: block; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--dl-text-secondary); }
.hc-next.end a { display: inline-block; margin-top: 4px; font-size: 13.5px; font-weight: 700; }
[data-theme="dark"] .hc-next { background: var(--dl-surface); border-color: var(--dl-border-light); }
[data-theme="dark"] .hc-next.end { background: transparent; }

.hc-main { padding: 26px 34px 40px; overflow-y: auto; overflow-x: hidden; min-width: 0; min-height: 0; }
.hc-main-narrow { max-width: 860px; }

/* ── B1 home ───────────────────────────────────────────────────────────── */
.hc-hero { text-align: center; padding: 22px 0 10px; }
.hc-hero h1 { font-size: 30px; color: var(--dl-text-primary); }
.hc-hero p { font-size: 14px; color: var(--dl-text-secondary); margin-top: 7px; }

.hc-searchwrap { position: relative; max-width: 560px; margin: 20px auto 0; }
.hc-searchbox {
    display: flex; align-items: center; gap: 11px; background: var(--dl-surface);
    border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-md);
    padding: 12px 17px; box-shadow: var(--dl-shadow-md);
}
.hc-searchbox:focus-within { border-color: rgba(var(--brand-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18), var(--dl-shadow-md); }
.hc-searchbox .ico { font-size: 18px; color: var(--brand); line-height: 1; }
.hc-searchbox input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 15px; color: var(--dl-text-primary);
}
.hc-searchbox input::placeholder { color: var(--dl-text-muted); }

.hc-sugg {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
    background: var(--dl-surface); border: 1px solid var(--dl-border-light);
    border-radius: var(--dl-radius-md); box-shadow: var(--dl-shadow-lg); overflow: hidden; text-align: left;
}
.hc-sugg a {
    display: flex; align-items: center; gap: 9px; padding: 9px 16px; font-size: 13px;
    color: var(--dl-text-secondary); border-bottom: 1px solid var(--dl-border-subtle);
}
.hc-sugg a:last-child { border-bottom: none; }
.hc-sugg a:hover { background: rgba(var(--brand-rgb), .07); text-decoration: none; }
.hc-sugg .ico { font-size: 14px; color: var(--dl-text-muted); line-height: 1; }
.hc-sugg .t { color: var(--dl-text-primary); font-weight: 600; }
.hc-sugg .empty { padding: 11px 16px; font-size: 13px; color: var(--dl-text-muted); }

/* ── ZG-160: the reader Ask box (plan R1, R2). One question, one answer card under the box;
      in the top bar it drops over the page like the suggestions. ── */
.hc-ask-btn {
    flex: 0 0 auto; border: none; border-radius: var(--dl-radius-sm); padding: 6px 13px; cursor: pointer;
    background: var(--brand); color: #fff; font: inherit; font-size: 13px; font-weight: 700;
}
.hc-ask-btn:disabled { opacity: .6; cursor: default; }
.hc-searchbox--bar .hc-ask-btn { padding: 4px 10px; font-size: 12.5px; }
.hc-ask {
    margin-top: 10px; text-align: left; background: var(--dl-surface); border: 1px solid var(--dl-border-light);
    border-radius: var(--dl-radius-md); box-shadow: var(--dl-shadow-md); padding: 14px 16px; font-size: 14px;
    color: var(--dl-text-secondary); overflow-wrap: anywhere;
}
.hc-searchbox--bar .hc-ask {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; margin: 0;
    box-shadow: var(--dl-shadow-lg); max-height: min(70vh, 560px); overflow: auto;
}
.hc-ask-working { display: flex; align-items: center; gap: 9px; color: var(--dl-text-muted); font-weight: 600; }
.hc-ask-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); animation: hc-ask-pulse 1s ease-in-out infinite; }
@keyframes hc-ask-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .hc-ask-dot { animation: none; } }
.hc-ask-from { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .03em; }
.hc-ask-text { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--dl-text-primary); }
.hc-ask-text b { font-weight: 800; }
.hc-ask-src {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-top: 12px; padding: 10px 12px; border-radius: var(--dl-radius-sm); background: rgba(var(--brand-rgb), .06);
    border: 1px solid rgba(var(--brand-rgb), .18);
}
.hc-ask-src-t { display: flex; flex-direction: column; min-width: 0; }
.hc-ask-src-t .t { font-weight: 700; color: var(--dl-text-primary); }
.hc-ask-src-t .cr { font-size: 12.5px; color: var(--dl-text-muted); }
.hc-ask-go { display: flex; align-items: center; gap: 8px; }
.hc-ask-go .hc-btn.sm, .hc-ask-did .hc-btn.sm, .hc-ask-note-acts .hc-btn.sm { padding: 5px 11px; font-size: 13px; }
.hc-ask-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    color: var(--brand); border: 1px solid rgba(var(--brand-rgb), .35); background: var(--dl-surface); text-decoration: none;
}
.hc-ask-chip:hover { background: rgba(var(--brand-rgb), .08); text-decoration: none; }
.hc-ask-also { margin-top: 10px; font-size: 13px; color: var(--dl-text-muted); }
.hc-ask-did { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dl-border-subtle); font-size: 13px; font-weight: 600; }
.hc-ask-sorry { display: flex; flex-direction: column; gap: 4px; width: 100%; font-weight: 400; }
.hc-ask-sorry b { color: var(--dl-text-primary); }
.hc-ask-sorry label { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--dl-text-secondary); }
.hc-ask-sorry label i { font-weight: 400; color: var(--dl-text-muted); }
.hc-ask-sorry textarea {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 10px; resize: vertical;
    border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-sm); background: var(--dl-bg-primary); color: var(--dl-text-primary);
}
.hc-ask-note-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.hc-ask-none { display: flex; flex-direction: column; gap: 5px; }
.hc-ask-none b { color: var(--dl-text-primary); font-size: 15px; }
.hc-ask-problem { margin: 0 0 6px; }
.hc-ask-search { font-size: 13px; font-weight: 600; }
/* "Go to step N" lands on the step, lit for a moment. */
.hc-step:target, .hc-step.hc-step-lit { background: rgba(var(--brand-rgb), .08); box-shadow: inset 3px 0 0 var(--brand); border-radius: var(--dl-radius-sm); padding-left: 10px; padding-right: 10px; }
@media (max-width: 480px) {
    .hc-ask-src { flex-direction: column; align-items: stretch; }
    .hc-ask-go .hc-btn { flex: 1 1 auto; justify-content: center; }
}

.hc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 30px; }
.hc-panel {
    background: var(--dl-surface); border: 1px solid var(--dl-border-subtle);
    border-radius: var(--dl-radius-md); padding: 15px 17px; box-shadow: var(--dl-shadow-sm);
}
.hc-panel h3 {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--dl-tracking-wider);
    color: var(--dl-text-muted); margin-bottom: 9px;
}
.hc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--dl-border-subtle); }
.hc-row:last-child { border-bottom: none; }
.hc-row:hover { text-decoration: none; }
.hc-row:hover .t { color: var(--brand); }
.hc-row .ico { font-size: 15px; color: var(--dl-text-muted); width: 17px; text-align: center; line-height: 1; }
.hc-row .t { font-size: 13px; font-weight: 600; color: var(--dl-text-primary); line-height: 1.35; }
.hc-row .d { font-size: 12px; color: var(--dl-text-muted); margin-left: auto; white-space: nowrap; }

/* ── /search results ───────────────────────────────────────────────────── */
.hc-results { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.hc-hit {
    display: block; background: var(--dl-surface); border: 1px solid var(--dl-border-subtle);
    border-radius: var(--dl-radius-md); padding: 13px 16px; box-shadow: var(--dl-shadow-sm);
}
.hc-hit:hover { border-color: rgba(var(--brand-rgb), .4); text-decoration: none; }
.hc-hit .crumb { font-size: 11.5px; font-weight: 600; color: var(--dl-text-muted); }
.hc-hit .t { font-size: 15px; font-weight: 700; color: var(--dl-text-primary); margin-top: 3px; }

/* ── B2 article ────────────────────────────────────────────────────────── */
.hc-crumb { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dl-text-muted); font-weight: 600; margin-bottom: 9px; }
.hc-crumb .sep { opacity: .5; }
.hc-crumb .cur { color: var(--dl-text-secondary); }
.hc-art h1 { font-size: 27px; color: var(--dl-text-primary); line-height: 1.25; }
.hc-artmeta {
    display: flex; align-items: center; gap: 14px; margin-top: 9px; flex-wrap: wrap;
    font-size: 12px; color: var(--dl-text-muted); font-weight: 600;
}
.hc-artmeta span { display: inline-flex; align-items: center; gap: 5px; }

.hc-art h2 { font-size: 19px; color: var(--dl-text-primary); margin: 26px 0 10px; scroll-margin-top: 20px; }
.hc-art h3 { font-size: 16px; color: var(--dl-text-primary); margin: 20px 0 8px; scroll-margin-top: 20px; }
.hc-art p { font-size: 14px; color: var(--dl-text-secondary); margin: 10px 0; }
.hc-art p b, .hc-art p strong { color: var(--dl-text-primary); }
.hc-art ul, .hc-art ol { font-size: 14px; color: var(--dl-text-secondary); padding-left: 22px; margin: 10px 0; }
.hc-art li { margin: 4px 0; }
.hc-art img { max-width: 100%; height: auto; border-radius: var(--dl-radius-sm); border: 1px solid var(--dl-border-light); }
.hc-art table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hc-art .table-scroll { overflow-x: auto; overflow-y: hidden; }

/* callouts */
.hc-call { display: flex; gap: 11px; border-radius: var(--dl-radius-sm); padding: 13px 15px; margin: 16px 0; font-size: 13.5px; line-height: 1.55; }
.hc-call .ico { font-size: 17px; flex-shrink: 0; line-height: 1.3; }
.hc-call .ch { display: block; color: var(--dl-text-primary); margin-bottom: 3px; font-size: 13.5px; font-weight: 700; }
.hc-call .body { min-width: 0; }
.hc-call .body p { font-size: 13.5px; margin: 4px 0 0; }
.hc-call.note, .hc-call.prereq { background: rgba(var(--brand-rgb), .07); border-left: 3px solid var(--brand); color: var(--dl-text-secondary); }
.hc-call.warning { background: rgba(214, 158, 46, .12); border-left: 3px solid var(--dl-warning); color: #7a5a12; }
[data-theme="dark"] .hc-call.warning { color: #e8c97a; }
[data-theme="dark"] .hc-call.warning .ch { color: #f0d89a; }
.hc-call.tip { background: rgba(56, 161, 105, .10); border-left: 3px solid var(--dl-success); color: var(--dl-text-secondary); }

/* phases + steps */
.hc-phase { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; flex-wrap: wrap; }
.hc-phase .n {
    width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff;
    font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
[data-theme="dark"] .hc-phase .n { color: #0f1117; }
.hc-phase .t { font-size: 16px; font-weight: 800; color: var(--dl-text-primary); }
.hc-phase .w { margin-left: auto; font-size: 12px; color: var(--dl-text-muted); font-weight: 600; }

.hc-step { display: flex; gap: 13px; padding: 14px 0; border-top: 1px solid var(--dl-border-subtle); }
.hc-step .sn {
    width: 22px; height: 22px; border-radius: 5px; background: var(--dl-bg-secondary); color: var(--dl-text-secondary);
    font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
}
.hc-step .sb { flex: 1; min-width: 0; }
.hc-step .sb > p:first-child { margin-top: 0; }

/* A titled step (::: step <title>, ZG-56). The id on .hc-step is the anchor a deep link
   lands on, so the heading scrolls clear of the top edge. Not in the "On this page" rail.
   A step reads on its own (ZG-143): nothing in it seeks the video or lights while it plays. */
.hc-step { scroll-margin-top: 20px; }
.hc-art .hc-step .st {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 6px; font-size: 15px; line-height: 1.35; color: var(--dl-text-primary);
}
.hc-step .st-t { font-weight: 800; }
.hc-step .st + p { margin-top: 0; }

/* ── Guide video (ZG-58, plan B1) ─────────────────────────────────────────
   The peak screen: the video first, full column width, one chip per step under it.
   Colours derive from --brand, so every help centre's player wears its own colours.
   Only a guide with a video renders any of this. */
.hc-vid { margin: 18px 0 8px; }
.hc-vid [hidden] { display: none !important; }

/* The player stays in place (ZG-143): no corner player, no phone bar. */
.hc-vid-frame {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--dl-radius-md); background: #0b0f17; box-shadow: var(--dl-shadow-md);
}
.hc-vid-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b0f17; }

/* Step chips: the video's chapters are the guide's steps. The row scrolls sideways. */
.hc-vchips { list-style: none; margin: 10px 0 0; padding: 2px 2px 6px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.hc-vchips li { flex: 0 0 auto; margin: 0; }
.hc-art .hc-vchips { padding-left: 2px; }
.hc-vchip {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--dl-text-secondary);
    background: var(--dl-surface); border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-full);
    padding: 4px 11px 4px 4px; cursor: pointer;
    transition: background var(--dl-duration-fast, .15s), border-color var(--dl-duration-fast, .15s), color var(--dl-duration-fast, .15s);
}
.hc-vchip:hover { border-color: rgba(var(--brand-rgb), .45); color: var(--dl-text-primary); }
.hc-vchip .n {
    width: 20px; height: 20px; border-radius: 50%; background: var(--dl-bg-secondary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.hc-vchip .tm { color: var(--dl-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Finished: a tick where the number was. */
.hc-vchip.done .n { background: rgba(56, 161, 105, .16); color: var(--dl-success); font-size: 0; }
.hc-vchip.done .n::before { content: "✓"; font-size: 11px; }
/* Playing: filled in the brand. */
.hc-vchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.hc-vchip.on .n { background: rgba(255, 255, 255, .22); color: inherit; }
.hc-vchip.on .tm { color: inherit; opacity: .85; }
[data-theme="dark"] .hc-vchip.on { color: #0f1117; }
[data-theme="dark"] .hc-vchip.on .n { background: rgba(15, 17, 23, .16); }

@media (prefers-reduced-motion: reduce) {
    .hc-vchip { transition: none; }
}

@media (max-width: 900px) {
    /* One row of chips the reader swipes: each snaps to the row's start, no scrollbar, and
       the row fades at the right edge until the script marks it scrolled to the end. */
    .hc-vchips {
        scroll-snap-type: x mandatory; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    }
    .hc-vchips::-webkit-scrollbar { display: none; }
    .hc-vchips.at-end { -webkit-mask-image: none; mask-image: none; }
    .hc-vchips li { scroll-snap-align: start; }
    /* 44px tap targets. */
    .hc-vchip { min-height: 44px; padding: 4px 13px 4px 6px; font-size: 13px; }
    .hc-vchip .n { width: 22px; height: 22px; }
    /* The top bar pins on a phone: a step linked by its anchor lands clear of it. */
    .hc-step { scroll-margin-top: 68px; }
}

.hc-shot { margin-top: 10px; }
.hc-shot figcaption, .hc-cap { font-size: 12px; color: var(--dl-text-muted); margin-top: 5px; font-style: italic; }
.hc-shot-missing {
    border: 1px dashed var(--dl-border-emphasis); border-radius: var(--dl-radius-sm); background: var(--dl-bg-secondary);
    min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px;
}
.hc-shot-missing .ico { font-size: 20px; color: var(--dl-text-muted); line-height: 1; }
.hc-shot-missing .pth { font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-text-muted); word-break: break-all; text-align: center; }

/* done block — Peak-End: an article never ends on a full stop */
.hc-done {
    margin-top: 26px; background: rgba(56, 161, 105, .10); border: 1px solid rgba(56, 161, 105, .32);
    border-radius: var(--dl-radius-md); padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start;
}
.hc-done .tick {
    width: 32px; height: 32px; border-radius: 50%; background: var(--dl-success); color: #fff;
    font-size: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hc-done h4 { font-size: 15px; font-weight: 800; color: #20693f; }
[data-theme="dark"] .hc-done h4 { color: #7fd6a3; }
.hc-done p { font-size: 13.5px; color: var(--dl-text-secondary); margin-top: 4px; }
.hc-done .nx { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; }

/* internal note — server-side gated, never in the DOM for a customer reader */
.hc-intnote {
    margin-top: 16px; border: 1px dashed rgba(var(--brand-rgb), .45); background: rgba(var(--brand-rgb), .05);
    border-radius: var(--dl-radius-sm); padding: 12px 15px;
}
.hc-intnote .hd {
    display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: var(--dl-tracking-wide); color: var(--brand);
}
.hc-intnote p { font-size: 13px; color: var(--dl-text-secondary); margin-top: 6px; }

/* footer: thumbs + related */
.hc-foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--dl-border-subtle); }
.hc-helpful { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--dl-text-secondary); font-weight: 600; flex-wrap: wrap; }
.hc-thumb {
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--dl-border-light);
    background: var(--dl-surface); border-radius: var(--dl-radius-sm); padding: 6px 14px;
    font-size: 15px; font-family: inherit; cursor: pointer; color: var(--dl-text-secondary);
}
.hc-thumb:hover { border-color: rgba(var(--brand-rgb), .45); background: rgba(var(--brand-rgb), .06); }
.hc-thumb:disabled { cursor: default; opacity: .55; }
.hc-thanks { font-size: 13px; color: var(--dl-success); font-weight: 600; }
.hc-rel { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.hc-rel a {
    font-size: 12.5px; font-weight: 600; color: var(--dl-text-secondary); background: var(--dl-surface);
    border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-full); padding: 5px 13px;
}
.hc-rel a:hover { border-color: rgba(var(--brand-rgb), .45); color: var(--brand); text-decoration: none; }

/* on-this-page rail */
.hc-toc { padding: 26px 20px 26px 14px; border-left: 1px solid var(--dl-border-subtle); overflow-y: auto; overflow-x: hidden; min-height: 0; }
.hc-toc h3 {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--dl-tracking-wider);
    color: var(--dl-text-muted); margin-bottom: 9px;
}
.hc-toc a { display: block; font-size: 12.5px; color: var(--dl-text-secondary); padding: 5px 0; line-height: 1.35; }
.hc-toc a:hover { color: var(--brand); text-decoration: none; }
.hc-toc a.on { color: var(--brand); font-weight: 700; border-left: 2px solid var(--brand); padding-left: 9px; margin-left: -11px; }

/* ── B3 gated / not found ──────────────────────────────────────────────── */
.hc-gate { max-width: 500px; margin: 72px auto; text-align: center; }
.hc-gate .lock {
    width: 68px; height: 68px; border-radius: var(--dl-radius-lg); background: rgba(var(--brand-rgb), .10);
    color: var(--brand); font-size: 31px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.hc-gate h2 { font-size: 22px; color: var(--dl-text-primary); }
.hc-gate p { font-size: 14px; color: var(--dl-text-secondary); margin-top: 9px; }
.hc-gate .acts { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.hc-gate .nearest { margin-top: 20px; font-size: 13px; color: var(--dl-text-muted); }
.hc-gate .nearest a { font-weight: 700; }

/* ── Interstitial (direct visit, no cookie) ────────────────────────────── */
.hc-inter-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: var(--dl-bg-primary);
}
.hc-inter {
    width: 320px; max-width: 100%; background: var(--dl-surface); border: 1px solid var(--dl-border-light);
    border-radius: var(--dl-radius-md); box-shadow: var(--dl-shadow-lg); padding: 28px 30px; text-align: center;
}
.hc-inter .mark {
    display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px;
    color: var(--brand); letter-spacing: var(--dl-tracking-tight);
}
.hc-inter .mark .glyph { font-size: 22px; line-height: 1; }
.hc-inter .hd { font-size: 15px; font-weight: 700; color: var(--dl-text-primary); margin-top: 16px; line-height: 1.4; }
.hc-inter .sub { font-size: 13px; color: var(--dl-text-secondary); margin-top: 6px; }
.hc-spin {
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--dl-border-light);
    border-top-color: var(--brand); margin: 16px auto 0; animation: hc-rot 900ms linear infinite;
}
@keyframes hc-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hc-spin { animation: none; border-top-color: var(--dl-border-emphasis); } }

/* ── Error / failure states ────────────────────────────────────────────── */
.hc-fail { max-width: 460px; margin: 72px auto; text-align: center; }
.hc-fail .glyph { font-size: 38px; line-height: 1; }
.hc-fail h2 { font-size: 20px; color: var(--dl-text-primary); margin-top: 14px; }
.hc-fail p { font-size: 14px; color: var(--dl-text-secondary); margin-top: 9px; }
.hc-fail .acts { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* ── Responsive: single-column degrade ─────────────────────────────────── */
@media (max-width: 900px) {
    /* ZG-122: the WINDOW is the scroll container on a phone, never <body>. html's overflow-x
       goes to the window (no sideways scroll); body grows with the page and only clips
       sideways (clip, unlike hidden, makes no scroll container). A body that scrolled itself
       kept iOS from collapsing its address bar and from jumping to the top on a status-bar
       tap. Desktop keeps its fixed shell with one scroll region per column. */
    body { height: auto; min-height: 100%; overflow-x: clip; }
    .hc-app { height: auto; min-height: 100vh; overflow: visible; }
    /* ZG-138: rows pack at the top. .hc-app is at least the screen's height and .hc-body
       grows into it, so on a short page (a refusal, a missing guide) the spare height was
       shared between the rows and stretched the "All guides" drawer into an empty band. */
    .hc-body, .hc-body.with-toc { grid-template-columns: 1fr; align-content: start; }
    /* ZG-48: the sidebar no longer stacks above the guide; "All guides" opens it as a drawer. */
    .hc-rail { display: none; }
    .hc-alldrawer { display: block; background: var(--dl-surface); border-bottom: 1px solid var(--dl-border-subtle); }
    .hc-main { padding: 20px 18px 32px; overflow: visible; }
    .hc-toc { display: none; }
    /* ZG-59 (plan B2): the window scrolls on a phone, so the top bar pins to stay in reach,
       and "All guides" scrolls away beneath it. */
    .hc-util { position: sticky; top: 0; }
}

/* ── Image upload (DL-3021) ────────────────────────────────────────────── */
.hc-upload-drop {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    border: 1px dashed var(--dl-border-emphasis); border-radius: var(--dl-radius-sm);
    background: var(--dl-bg-secondary); padding: 12px 14px; font-size: 13px; color: var(--dl-text-secondary);
}
.hc-upload-drop:hover { border-color: rgba(var(--brand-rgb), .5); background: rgba(var(--brand-rgb), .05); }
.hc-upload-drop.busy { opacity: .7; cursor: default; }
.hc-upload-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hc-upload-drop .dest { margin-left: auto; font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-text-muted); }

.hc-upload-row {
    display: flex; align-items: center; gap: 10px; margin-top: 10px; background: var(--dl-surface);
    border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-sm); padding: 9px 12px;
}
.hc-upload-row .meta { flex: 1; min-width: 0; }
.hc-upload-row .name {
    font-size: 12px; font-weight: 700; color: var(--dl-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hc-upload-row .pct { font-size: 12px; font-weight: 700; color: var(--dl-text-muted); font-family: var(--dl-font-mono); }
.hc-bar { height: 5px; border-radius: var(--dl-radius-full); background: var(--dl-bg-secondary); overflow: hidden; margin-top: 5px; }
.hc-bar i { display: block; height: 100%; background: var(--brand); border-radius: var(--dl-radius-full); transition: width 120ms linear; }
@media (prefers-reduced-motion: reduce) { .hc-bar i { transition: none; } }

/* ── Manage: master-detail (DL-3019) ───────────────────────────────────── */
/* Per /dl-design-defaults: list left, detail right, ONE internal scroll region per
   column, no card inside a card, no horizontal scroll at any width. */
.hc-manage { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

.hc-mhead {
    display: flex; align-items: center; gap: 14px; flex: 0 0 auto; flex-wrap: wrap;
    padding: 14px 26px; background: var(--dl-surface); border-bottom: 1px solid var(--dl-border-subtle);
}
.hc-mhead .t { font-size: 18px; font-weight: 800; color: var(--dl-text-primary); letter-spacing: var(--dl-tracking-tight); }
.hc-mhead .s { font-size: 12.5px; color: var(--dl-text-muted); margin-top: 2px; }
.hc-mhead .acts { margin-left: auto; display: flex; gap: 9px; align-items: center; }

.hc-md { flex: 1 1 auto; display: grid; grid-template-columns: 340px 1fr; min-height: 0; }

.hc-md-l {
    border-right: 1px solid var(--dl-border-subtle); background: var(--dl-surface);
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
.hc-md-search {
    display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
    padding: 11px 16px; border-bottom: 1px solid var(--dl-border-subtle); color: var(--dl-text-muted);
}
.hc-md-search input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 13px; color: var(--dl-text-primary);
}
.hc-chips {
    display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto;
    padding: 10px 16px; border-bottom: 1px solid var(--dl-border-subtle);
}
.hc-fchip {
    font-size: 11.5px; font-weight: 700; border-radius: var(--dl-radius-full); padding: 3px 11px;
    border: 1px solid var(--dl-border-light); color: var(--dl-text-secondary);
    background: transparent; font-family: inherit; cursor: pointer;
}
.hc-fchip:hover { border-color: rgba(var(--brand-rgb), .45); }
.hc-fchip.on { background: rgba(var(--brand-rgb), .12); border-color: rgba(var(--brand-rgb), .35); color: var(--brand); }

/* The list is the one scroll region in this column. */
.hc-md-list { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.hc-ali {
    display: block; width: 100%; text-align: left; background: transparent; cursor: pointer;
    border: none; border-bottom: 1px solid var(--dl-border-subtle); padding: 12px 16px; font-family: inherit;
}
.hc-ali:hover { background: var(--dl-bg-secondary); }
.hc-ali.on { background: rgba(var(--brand-rgb), .07); box-shadow: inset 3px 0 0 var(--brand); }
.hc-ali .t { font-size: 13.5px; font-weight: 700; color: var(--dl-text-primary); line-height: 1.35; }
.hc-ali .m { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.hc-ali .e { font-size: 11.5px; color: var(--dl-text-muted); margin-top: 6px; }
.hc-md-empty { padding: 18px 16px; font-size: 13px; color: var(--dl-text-muted); text-align: center; }

/* The detail column's one scroll region. */
.hc-md-r { padding: 20px 26px 32px; overflow-y: auto; overflow-x: hidden; min-height: 0; min-width: 0; }
.hc-dt-hd {
    display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
    padding-bottom: 14px; border-bottom: 1px solid var(--dl-border-subtle);
}
.hc-dt-hd .t { font-size: 19px; font-weight: 800; color: var(--dl-text-primary); letter-spacing: var(--dl-tracking-tight); }
.hc-dt-hd .s { font-size: 12.5px; color: var(--dl-text-muted); margin-top: 4px; }

.hc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 11px; margin-top: 16px; }
.hc-kvi { background: var(--dl-surface); border: 1px solid var(--dl-border-subtle); border-radius: var(--dl-radius-sm); padding: 10px 13px; }
.hc-kvi .k {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: var(--dl-tracking-wide); color: var(--dl-text-muted);
}
.hc-kvi .v { font-size: 13px; font-weight: 600; color: var(--dl-text-primary); margin-top: 4px; }

.hc-outline { margin-top: 20px; }

@media (max-width: 900px) {
    .hc-manage { overflow: visible; }
    .hc-md { grid-template-columns: 1fr; }
    .hc-md-l { border-right: none; border-bottom: 1px solid var(--dl-border-subtle); }
    .hc-md-list { max-height: 360px; }
    .hc-md-r { padding: 18px; overflow: visible; }
    .hc-mhead { padding: 12px 16px; }
}

/* ── Manage: editor (DL-3020) ──────────────────────────────────────────── */
/* Markdown left, the reader's exact rendering right. One scroll region per column. */
.hc-ed { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; border-top: 1px solid var(--dl-border-subtle); }
.hc-ed-l {
    border-right: 1px solid var(--dl-border-subtle); background: var(--dl-surface);
    padding: 16px 20px 28px; overflow-y: auto; overflow-x: hidden; min-height: 0; min-width: 0;
}
.hc-ed-r { padding: 16px 24px 28px; overflow-y: auto; overflow-x: hidden; min-height: 0; min-width: 0; background: var(--dl-bg-primary); }

.hc-fld { margin-bottom: 13px; }
.hc-fld .lb {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: var(--dl-tracking-wide); color: var(--dl-text-muted); margin-bottom: 5px;
}
.hc-fld .hint { font-size: 11.5px; color: var(--dl-text-muted); margin-top: 5px; line-height: 1.45; }
.hc-in {
    display: block; width: 100%; background: var(--dl-surface); border: 1px solid var(--dl-border-light);
    border-radius: var(--dl-radius-sm); padding: 9px 12px; font-size: 13px; font-family: inherit;
    color: var(--dl-text-primary); outline: none;
}
.hc-in:focus { border-color: rgba(var(--brand-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); }
.hc-in.readonly { background: var(--dl-bg-secondary); color: var(--dl-text-secondary); }
select.hc-in { cursor: pointer; }
.hc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.hc-aud { display: flex; flex-direction: column; gap: 7px; }
.hc-audr {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-sm);
    padding: 10px 13px; background: var(--dl-surface); font-family: inherit;
}
.hc-audr.on { border-color: rgba(var(--brand-rgb), .45); background: rgba(var(--brand-rgb), .06); }
.hc-radio {
    width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--dl-border-emphasis);
    flex-shrink: 0; margin-top: 2px;
}
.hc-audr.on .hc-radio { border-color: var(--brand); box-shadow: inset 0 0 0 3px var(--dl-surface); background: var(--brand); }
.hc-audr .t { display: block; font-size: 13px; font-weight: 700; color: var(--dl-text-primary); }
.hc-audr .d { display: block; font-size: 11.5px; color: var(--dl-text-muted); margin-top: 2px; }

.hc-tools { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0 10px; border-bottom: 1px solid var(--dl-border-subtle); margin-bottom: 10px; }
.hc-tool {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
    border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-sm); padding: 4px 10px;
    color: var(--dl-text-secondary); background: var(--dl-surface); font-family: inherit; cursor: pointer;
}
.hc-tool:hover { border-color: rgba(var(--brand-rgb), .45); color: var(--brand); }

.hc-code {
    display: block; width: 100%; min-height: 340px; resize: vertical;
    background: #12151F; color: #D7DEE9; border: 1px solid var(--dl-border-light);
    border-radius: var(--dl-radius-sm); padding: 13px 15px;
    font-family: var(--dl-font-mono); font-size: 12.5px; line-height: 1.65; outline: none;
}
.hc-code:focus { border-color: rgba(var(--brand-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); }

.hc-ver { margin-top: 18px; }
.hc-verr {
    display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--dl-text-secondary);
    padding: 7px 0; border-bottom: 1px solid var(--dl-border-subtle);
}
.hc-verr:last-child { border-bottom: none; }
.hc-verr .vn { font-family: var(--dl-font-mono); font-weight: 700; color: var(--dl-text-primary); }
.hc-verr .rs {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 700; color: var(--brand);
    background: transparent; border: none; font-family: inherit; cursor: pointer;
}
.hc-verr .rs.current { color: var(--dl-text-muted); cursor: default; }
.hc-verr .rs:hover:not(.current) { text-decoration: underline; }

@media (max-width: 1100px) {
    .hc-ed { grid-template-columns: 1fr; }
    .hc-ed-l { border-right: none; border-bottom: 1px solid var(--dl-border-subtle); overflow: visible; }
    .hc-ed-r { overflow: visible; }
    .hc-2 { grid-template-columns: 1fr; }
}

/* Syntax hint under the snippet buttons (DL-3020). */
.hc-syntax-note {
    display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 12px;
    font-size: 12px; line-height: 1.5; color: var(--dl-text-muted);
}
.hc-syntax-note b { color: var(--dl-text-secondary); }

/* Slug field on the create form (DL-3020). */
.hc-slugrow { display: flex; align-items: center; gap: 0; }
.hc-slugrow .prefix {
    font-family: var(--dl-font-mono); font-size: 13px; color: var(--dl-text-muted);
    background: var(--dl-bg-secondary); border: 1px solid var(--dl-border-light); border-right: none;
    border-radius: var(--dl-radius-sm) 0 0 var(--dl-radius-sm); padding: 9px 10px;
}
.hc-slugrow .hc-in { border-radius: 0 var(--dl-radius-sm) var(--dl-radius-sm) 0; font-family: var(--dl-font-mono); }

/* ── S1 Settings (ZG-104) ───────────────────────────────────────────────────
   Master-detail per /dl-design-defaults: the settings list left, the detail right (the
   connections card until a row is picked, then that row's editor), the live sign-in
   preview under either. One scroll region per column, no horizontal scroll at any width.
   Phone: one column; picking a row swaps the list for its editor, "All settings" swaps
   back. Every colour is a token, so dark mode comes from dl-tokens. */
.hc-set { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 0; }
.hc-set-l {
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
    border-right: 1px solid var(--dl-border-subtle); background: var(--dl-bg-primary);
}
.hc-set-list { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 4px 22px 28px; }
.hc-set-r { overflow-y: auto; overflow-x: hidden; min-height: 0; min-width: 0; padding: 18px 22px 28px; background: var(--dl-bg-primary); }
.hc-set-solo { padding: 22px 26px; max-width: 560px; overflow-y: auto; overflow-x: hidden; }

.hc-set-grp { margin-top: 14px; }
.hc-set-grph {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--dl-tracking-wide);
    color: var(--dl-text-muted); margin: 0 2px 6px;
}
.hc-set-rows {
    background: var(--dl-surface); border: 1px solid var(--dl-border-subtle);
    border-radius: var(--dl-radius-md); overflow: hidden;
}
.hc-set-row {
    display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 12px; align-items: center;
    width: 100%; text-align: left; background: transparent; cursor: pointer; font-family: inherit;
    border: none; border-top: 1px solid var(--dl-border-subtle); padding: 10px 14px; color: var(--dl-text-primary);
    transition: background var(--dl-duration-fast) var(--dl-ease-smooth);
}
.hc-set-row:first-child { border-top: none; }
.hc-set-row:hover { background: var(--dl-bg-secondary); }
.hc-set-row.on { background: rgba(var(--brand-rgb), .07); box-shadow: inset 3px 0 0 var(--brand); }
.hc-set-row .k { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-set-row .v {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    font-size: 12.5px; color: var(--dl-text-secondary);
}
.hc-set-row .v .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hc-set-row .v.empty { color: var(--dl-text-muted); font-style: italic; }
.hc-set-row .sw { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; border: 1px solid var(--dl-border-light); }
.hc-set-row .s { display: inline-flex; align-items: center; gap: 6px; }
.hc-set-row .lockd { color: var(--dl-text-muted); display: inline-flex; }

.hc-set-src {
    display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; white-space: nowrap;
    border-radius: var(--dl-radius-full); padding: 2px 9px;
}
.hc-set-src.conv { background: var(--dl-bg-secondary); color: var(--dl-text-secondary); border: 1px solid var(--dl-border-subtle); }
.hc-set-src.override { background: rgba(var(--brand-rgb), .12); color: var(--brand); }

.hc-set-card {
    background: var(--dl-surface); border: 1px solid var(--dl-border-subtle);
    border-radius: var(--dl-radius-md); padding: 16px; margin-bottom: 14px;
}
.hc-set-h { font-size: 15px; font-weight: 800; margin-bottom: 4px; color: var(--dl-text-primary); }
.hc-set-edh { display: flex; align-items: center; gap: 10px; }
.hc-set-edh .t { font-size: 17px; font-weight: 800; color: var(--dl-text-primary); letter-spacing: var(--dl-tracking-tight); }
.hc-set-x {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: inherit;
    font-size: 12px; font-weight: 700; color: var(--dl-text-secondary); background: transparent;
    border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-full); padding: 4px 10px; cursor: pointer;
}
.hc-set-x:hover { color: var(--brand); border-color: rgba(var(--brand-rgb), .45); }
.hc-set-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.hc-set-desc { font-size: 12.5px; color: var(--dl-text-secondary); margin: 8px 0 0; line-height: 1.5; }
.hc-set-now {
    font-size: 12.5px; color: var(--dl-text-secondary); background: var(--dl-bg-primary);
    border: 1px solid var(--dl-border-subtle); border-radius: var(--dl-radius-sm); padding: 9px 11px; margin: 12px 0;
    overflow-wrap: anywhere;
}
.hc-set-now b { color: var(--dl-text-primary); }
.hc-set-now .by, .hc-set-now .conv { font-size: 11.5px; color: var(--dl-text-muted); margin-top: 3px; }
.hc-set-locked {
    display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5;
    background: rgba(214, 158, 46, .12); color: #8a6415; border-radius: var(--dl-radius-sm); padding: 9px 11px;
}
[data-theme="dark"] .hc-set-locked { color: var(--dl-warning); }
.hc-fld .lb .opt { text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: 4px; }
.hc-set-hex { display: flex; gap: 8px; align-items: center; }
.hc-set-hex input[type="color"] {
    width: 42px; height: 38px; flex: 0 0 auto; padding: 3px; cursor: pointer;
    border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-sm); background: var(--dl-surface);
}
.hc-set-hex .hc-in { max-width: 140px; font-family: var(--dl-font-mono); }
.hc-set-contrast { font-size: 12px; color: var(--dl-text-secondary); margin-top: 6px; }
.hc-set-contrast .ok { color: var(--dl-success); font-weight: 700; }
.hc-set-contrast .low { color: #8a6415; font-weight: 700; }
[data-theme="dark"] .hc-set-contrast .low { color: var(--dl-warning); }
.hc-set-json { min-height: 180px; }
.hc-set-contacts { display: flex; flex-direction: column; gap: 10px; }
.hc-set-contact {
    display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px;
    padding: 10px; border: 1px solid var(--dl-border-subtle); border-radius: var(--dl-radius-sm);
}
.hc-set-contact > :nth-child(n+3) { grid-column: 1 / -1; }
.hc-set-contact .hc-set-lnk { justify-self: start; }
.hc-set-lnk {
    display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: 12px; font-weight: 700;
    color: var(--brand); background: transparent; border: none; padding: 0; cursor: pointer;
}
.hc-set-lnk:hover { text-decoration: underline; }
.hc-set-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.hc-set-acts .hc-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.hc-set-micro { font-size: 11.5px; color: var(--dl-text-muted); margin-top: 7px; line-height: 1.5; }
.hc-set-off { font-size: 13px; color: var(--dl-text-secondary); margin-top: 6px; }
.hc-set-err {
    font-size: 12.5px; color: var(--dl-danger); margin-top: 8px; line-height: 1.5;
    background: rgba(229, 62, 62, .08); border-radius: var(--dl-radius-sm); padding: 8px 10px;
}
.hc-set-done {
    display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; font-weight: 600; line-height: 1.5;
    color: var(--dl-success); background: rgba(56, 161, 105, .10); border-radius: var(--dl-radius-sm);
    padding: 8px 10px; margin-top: 10px;
}
.hc-set-check { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--dl-text-primary); margin-top: 4px; cursor: pointer; }
.hc-set-check input { margin-top: 3px; accent-color: var(--brand); }
.hc-set-confirm {
    margin-top: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--dl-text-primary); line-height: 1.5;
    border: 1px solid var(--dl-border-light); border-left: 3px solid var(--dl-danger); border-radius: var(--dl-radius-sm);
}
.hc-btn.hc-set-danger { background: var(--dl-danger); color: #fff; }
[data-theme="dark"] .hc-btn.hc-set-danger { color: #fff; }
.hc-btn.ghost.hc-set-danger-ghost { color: var(--dl-danger); border-color: rgba(229, 62, 62, .35); }

.hc-set-seg {
    display: inline-flex; border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-full); overflow: hidden; max-width: 100%; flex-wrap: wrap;
}
.hc-set-seg button {
    font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border: none; cursor: pointer;
    background: var(--dl-surface); color: var(--dl-text-secondary);
}
.hc-set-seg button.on { background: rgba(var(--brand-rgb), .14); color: var(--brand); }
.hc-set-conn {
    display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 8px 0;
    border-top: 1px solid var(--dl-border-subtle); color: var(--dl-text-secondary); min-width: 0;
}
.hc-set-conn:first-of-type { border-top: none; }
.hc-set-conn .who { font-weight: 700; color: var(--dl-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hc-set-conn .when { margin-left: auto; color: var(--dl-text-muted); white-space: nowrap; font-size: 11.5px; }
.hc-set-conn.gone { opacity: .55; }
.hc-set-secret { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.hc-set-secret label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--dl-text-muted); }
.hc-set-secret input {
    font-family: var(--dl-font-mono); font-size: 12px; color: var(--dl-text-primary); background: var(--dl-bg-primary);
    border: 1px dashed var(--dl-border-emphasis); border-radius: var(--dl-radius-sm); padding: 7px 9px; width: 100%; min-width: 0;
}
.hc-set-test { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dl-border-subtle); }
.hc-set-test > .t { font-size: 13.5px; font-weight: 800; color: var(--dl-text-primary); }
.hc-set-who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 0; font-size: 12.5px; }
.hc-set-who dt { color: var(--dl-text-muted); font-weight: 700; }
.hc-set-who dd { margin: 0; color: var(--dl-text-primary); overflow-wrap: anywhere; }

.hc-set-pvh { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--dl-text-muted); margin-bottom: 8px; min-width: 0; }
.hc-set-pvh > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-set-pvh .unsaved { color: #8a6415; white-space: nowrap; }
[data-theme="dark"] .hc-set-pvh .unsaved { color: var(--dl-warning); }
/* The real sign-in card, scaled to the panel: same markup, tighter padding. */
.hc-set-pv .hc-signin { grid-template-columns: 44% minmax(0, 1fr); font-size: 12px; }
.hc-set-pv .hc-signin-brand { padding: 20px 18px; gap: 10px; }
.hc-set-pv .hc-signin-form { padding: 18px 16px; }
.hc-set-pv .hc-signin-tagline { font-size: 16px; }
.hc-set-pv .hc-signin-intro { font-size: 12px; }
.hc-set-pv .hc-signin-logo img { max-width: 140px; max-height: 32px; }

/* ZG-62: the preview's Light/Dark switch. The frame carries its own data-theme, so the real
   card draws in either theme whatever theme the page is in. The dark tokens hang off
   [data-theme="dark"] and follow on their own; the light ones live on :root, so a light
   frame inside a dark page restates the ones the card reads. */
.hc-preview-theme { display: inline-flex; flex: none; border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-full); overflow: hidden; }
.hc-preview-theme button {
    font: inherit; font-size: 11px; font-weight: 700; border: 0; background: transparent; color: var(--dl-text-secondary);
    padding: 2px 10px; cursor: pointer;
}
.hc-preview-theme button.on { background: var(--dl-text-primary); color: var(--dl-surface); }
.hc-preview-frame { border-radius: var(--dl-radius-sm); overflow: hidden; border: 1px solid var(--dl-border-light); }
.hc-preview-frame[data-theme="light"] {
    --dl-bg-primary: #F7F9FC; --dl-bg-secondary: #EDF2F7; --dl-surface: #FFFFFF; --dl-surface-sunken: #F7FAFC;
    --dl-text-primary: #1A202C; --dl-text-secondary: #4A5568; --dl-text-muted: #636E80;
    --dl-border-light: rgba(0, 0, 0, 0.10); --dl-border-emphasis: rgba(0, 0, 0, 0.16);
    color-scheme: light;
}
.hc-preview-frame[data-theme="dark"] { color-scheme: dark; }
.hc-preview-ink { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--dl-text-secondary); }
.hc-preview-ink .sw { width: 14px; height: 14px; margin-top: 1px; border-radius: 4px; flex: none; border: 1px solid var(--dl-border-light); }
.hc-preview-ink b { color: var(--dl-text-primary); font-family: var(--dl-font-mono); font-size: 11.5px; }

/* ZG-62: the logo upload on the Logo row, in the screenshot uploader's look. */
.hc-logo-up { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; min-width: 0; }
.hc-logo-up .hc-upload-drop { position: relative; flex-wrap: wrap; }
.hc-logo-up .hc-upload-drop:focus-within { border-color: rgba(var(--brand-rgb), .7); }
.hc-logo-up .hc-upload-row { margin-top: 0; }
.hc-logo-up-file .th {
    flex: none; width: 60px; height: 38px; display: grid; place-items: center; border-radius: 6px;
    background: var(--hc-logo-tile); border: 1px solid var(--dl-border-light);
}
.hc-logo-up-file .th img { display: block; max-width: 52px; max-height: 30px; }
.hc-logo-up-file .hint { font-size: 11.5px; color: var(--dl-text-muted); }
.hc-logo-up-or { font-size: 11.5px; color: var(--dl-text-muted); margin: 0 0 6px; }

@media (max-width: 1100px) {
    .hc-set-pv .hc-signin { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .hc-set { grid-template-columns: 1fr; }
    .hc-set-l { border-right: none; }
    .hc-set-list { overflow: visible; padding: 4px 14px 20px; }
    .hc-set-r { overflow: visible; padding: 14px; }
    .hc-set.editing .hc-set-l { display: none; }
    .hc-set:not(.editing) .hc-set-r { border-top: 1px solid var(--dl-border-subtle); }
    .hc-set-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
    .hc-set-row .v { grid-column: 1 / -1; grid-row: 2; }
    .hc-set-solo { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .hc-set-row { transition: none; }
}

/* ── S1 "Who sees which guides" (ZG-64) ─────────────────────────────────────
   The role map as a table: role | Can see | Runs this help centre. A grid, not a <table>,
   so it can stack: under 620px of its own width (the phone, or a narrow detail column)
   each row becomes a card with labelled groups. Unmapped rows are tinted so the thing to
   do is the first thing seen. The detail column widens while it is open (.hc-set.wide).
   Every colour is a token or composed over one, so dark mode comes from dl-tokens. */
.hc-set.wide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }
.hc-rolemap { container-type: inline-size; }
.hc-rolemap-t {
    border: 1px solid var(--dl-border-subtle); border-radius: var(--dl-radius-md);
    overflow: hidden; margin-top: 12px; background: var(--dl-surface);
}
.hc-rolemap-h, .hc-rolemap-r {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, 1.1fr);
    gap: 6px 12px; align-items: start; padding: 10px 12px;
}
.hc-rolemap-h {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--dl-tracking-wide);
    color: var(--dl-text-muted); background: var(--dl-bg-secondary); border-bottom: 1px solid var(--dl-border-subtle);
}
.hc-rolemap-r { border-top: 1px solid var(--dl-border-subtle); }
.hc-rolemap-h + .hc-rolemap-r { border-top: none; }
.hc-rolemap-r.unmapped { background: rgba(214, 158, 46, .08); }
.hc-rolemap-r.other { background: var(--dl-bg-primary); }
.hc-rolemap-r .who { min-width: 0; }
.hc-rolemap-r .role { font-size: 13px; font-weight: 700; color: var(--dl-text-primary); overflow-wrap: anywhere; }
.hc-rolemap-r .seen { font-size: 11.5px; color: var(--dl-text-muted); }
.hc-rolemap-r .lbl {
    display: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: var(--dl-tracking-wide); color: var(--dl-text-muted); margin-bottom: 4px;
}
.hc-rolemap-r .pills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.hc-rolemap-state {
    display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 800;
    border-radius: var(--dl-radius-full); padding: 1px 8px;
}
.hc-rolemap-state.no { background: rgba(229, 62, 62, .10); color: var(--dl-danger); }
.hc-rolemap-state.as { background: var(--dl-bg-secondary); color: var(--dl-text-secondary); }
.hc-rolemap-pill {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; line-height: 1.4;
    color: var(--dl-text-secondary); background: var(--dl-surface); cursor: pointer; user-select: none;
    border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-full); padding: 3px 10px;
    transition: background var(--dl-duration-fast) var(--dl-ease-smooth), border-color var(--dl-duration-fast) var(--dl-ease-smooth);
}
.hc-rolemap-pill input { margin: 0; accent-color: var(--brand); }
.hc-rolemap-pill.on { color: var(--brand); background: rgba(var(--brand-rgb), .10); border-color: rgba(var(--brand-rgb), .45); }
.hc-rolemap-pill:has(input:disabled) { cursor: default; }
.hc-rolemap-pill.ro { opacity: .8; }
.hc-rolemap-pill.gone { color: var(--dl-danger); background: rgba(229, 62, 62, .08); border-style: dashed; border-color: rgba(229, 62, 62, .45); cursor: default; }
.hc-rolemap-pill.gone button {
    font: inherit; color: inherit; background: transparent; border: none; padding: 0 0 0 2px; cursor: pointer; line-height: 1;
}
.hc-rolemap-none { font-size: 12px; color: var(--dl-text-muted); }
.hc-rolemap-note, .hc-rolemap-bad { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; }
.hc-rolemap-note { color: #8a6415; }
.hc-rolemap-bad { color: var(--dl-danger); }
[data-theme="dark"] .hc-rolemap-note { color: var(--dl-warning); }
[data-theme="dark"] .hc-rolemap-r.unmapped { background: rgba(214, 158, 46, .10); }
.hc-rolemap-tomap {
    font-size: 11px; font-weight: 800; white-space: nowrap; border-radius: var(--dl-radius-full);
    padding: 2px 9px; background: rgba(214, 158, 46, .16); color: #8a6415;
}
[data-theme="dark"] .hc-rolemap-tomap { color: var(--dl-warning); }
.hc-rolemap-empty {
    font-size: 12.5px; color: var(--dl-text-secondary); margin-top: 12px; padding: 12px;
    border: 1px dashed var(--dl-border-light); border-radius: var(--dl-radius-sm);
}
.hc-rolemap-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.hc-rolemap-add .hc-in { flex: 1 1 220px; min-width: 0; }
.hc-rolemap-who .t { display: flex; align-items: center; gap: 8px; }
.hc-rolemap-who .unsaved { font-size: 11px; font-weight: 800; color: #8a6415; }
[data-theme="dark"] .hc-rolemap-who .unsaved { color: var(--dl-warning); }
.hc-rolemap-who .sees { font-weight: 700; }
.hc-rolemap-skel {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 14px 12px;
    border-top: 1px solid var(--dl-border-subtle);
}
.hc-rolemap-skel:first-child { border-top: none; }
.hc-rolemap-skel span {
    height: 12px; border-radius: var(--dl-radius-sm); background: var(--dl-bg-secondary);
    animation: hc-rolemap-pulse 1.2s ease-in-out infinite;
}
@keyframes hc-rolemap-pulse { 50% { opacity: .5; } }
@container (max-width: 620px) {
    .hc-rolemap-h { display: none; }
    .hc-rolemap-r { grid-template-columns: minmax(0, 1fr); }
    .hc-rolemap-r .lbl { display: block; }
}
@media (max-width: 900px) {
    .hc-set.wide { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .hc-rolemap-pill { transition: none; }
    .hc-rolemap-skel span { animation: none; }
}

/* ── Category admin (DL-3048) ──────────────────────────────────────────── */
.hc-iconpick { display: flex; gap: 8px; flex-wrap: wrap; }
.hc-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--dl-radius-sm);
    border: 1px solid var(--dl-border-light); background: var(--dl-surface);
    color: var(--dl-text-secondary); cursor: pointer;
}
.hc-iconbtn:hover { border-color: rgba(var(--brand-rgb), .45); color: var(--brand); }
.hc-iconbtn.on { border-color: rgba(var(--brand-rgb), .6); background: rgba(var(--brand-rgb), .10); color: var(--brand); }

/* A delete that is offered looks like an action; one that is not offered is simply
   absent, with the reason where the control would have been. */
.hc-linkbtn {
    background: transparent; border: none; padding: 0; font-family: inherit;
    font-size: 12.5px; font-weight: 700; color: var(--dl-danger); cursor: pointer;
}
.hc-linkbtn:hover { text-decoration: underline; }
.hc-why { font-size: 12px; font-weight: 500; color: var(--dl-text-muted); font-style: italic; }

.hc-sectionlist { margin-top: 10px; border-top: 1px solid var(--dl-border-subtle); }
.hc-sectionrow {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 0; border-bottom: 1px solid var(--dl-border-subtle); font-size: 13px;
}
.hc-sectionrow:last-child { border-bottom: none; }
.hc-sectionrow .nm { font-weight: 600; color: var(--dl-text-primary); }
.hc-sectionrow .ct { font-size: 12px; color: var(--dl-text-muted); margin-left: auto; }

/* The restricted-guide lock: present, muted, never competing with the title. */
.hc-lock { display: inline-flex; align-items: center; color: var(--dl-text-muted); flex: 0 0 auto; }
.hc-guide .t { flex: 1; min-width: 0; }

/* ── Branded sign-in (ZG-49, screens A1 / A2) ─────────────────────────────
   One page for every product: the brand panel takes the white-label's own colour
   (--hc-signin-bg) and the ink that reaches 4.5:1 on it (--hc-signin-on), both set
   inline by SignInCard from the row. Dark mode keeps the brand panel and darkens the
   form column through the surface tokens. No horizontal scroll at 360px. */
:root { --hc-logo-tile: #FFFFFF; --hc-logo-tile-ink: #1A202C; }

.hc-signin {
    min-height: 100vh; display: grid; grid-template-columns: 44% 1fr;
    background: var(--dl-surface);
}
.hc-signin-brand {
    background: var(--hc-signin-bg, var(--brand)); color: var(--hc-signin-on, #fff);
    padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; gap: var(--dl-space-5);
    min-width: 0;
}
/* Logos are drawn for white, so the tile stays white in dark mode too. */
.hc-signin-logo {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
    background: var(--hc-logo-tile); color: var(--hc-logo-tile-ink);
    border-radius: var(--dl-radius-md); padding: 10px 14px; box-shadow: var(--dl-shadow-sm); max-width: 100%;
}
.hc-signin-logo img { display: block; width: auto; max-width: 240px; object-fit: contain; }
/* ZG-62: the monogram behind a logo stays hidden until the logo fails to load; the
   tile's own display rules would otherwise override the hidden attribute. */
.hc-signin-logo [hidden] { display: none !important; }
.hc-signin-logo .mono {
    width: 30px; height: 30px; border-radius: var(--dl-radius-sm); display: inline-grid; place-items: center;
    background: var(--hc-signin-bg, var(--brand)); color: var(--hc-signin-on, #fff); font-weight: 800; font-size: 16px;
}
.hc-signin-logo .name { font-weight: 800; font-size: 15px; letter-spacing: var(--dl-tracking-tight); }
.hc-signin-tagline {
    margin: 0; font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: var(--dl-tracking-tight);
    color: inherit; overflow-wrap: anywhere;
}
.hc-signin-intro { margin: 0; font-size: 15.5px; line-height: 1.55; opacity: .9; max-width: 440px; }

.hc-signin-form {
    display: flex; flex-direction: column; justify-content: space-between; padding: 56px 48px 28px; min-width: 0;
    background: var(--dl-surface);
}
.hc-signin-col { width: 100%; max-width: 380px; margin: auto 0; align-self: center; }
.hc-signin-h { margin: 0; font-size: 22px; font-weight: 800; color: var(--dl-text-primary); line-height: 1.3; letter-spacing: var(--dl-tracking-tight); }
.hc-signin-hint { margin: 6px 0 0; font-size: 14px; color: var(--dl-text-secondary); }
.hc-signin-field { margin-top: var(--dl-space-5); display: flex; flex-direction: column; gap: 6px; }
.hc-signin-field label { font-size: 13px; font-weight: 700; color: var(--dl-text-primary); }
.hc-signin-input {
    width: 100%; font: inherit; font-size: 14.5px; color: var(--dl-text-primary); background: var(--dl-surface);
    border: 1px solid var(--dl-border-emphasis); border-radius: var(--dl-radius-sm); padding: 10px 12px;
    transition: border-color var(--dl-duration-fast) var(--dl-ease-smooth), box-shadow var(--dl-duration-fast) var(--dl-ease-smooth);
}
.hc-signin-input::placeholder { color: var(--dl-text-muted); }
.hc-signin-input:focus { outline: none; border-color: var(--dl-text-secondary); box-shadow: 0 0 0 3px var(--dl-border-light); }
.hc-signin-input:disabled { background: var(--dl-surface-sunken); }
.hc-signin-input.invalid { border-color: var(--dl-danger); }
.hc-signin-err { font-size: 12.5px; color: var(--dl-danger); }

/* The button wears the brand: the same fill and ink as the panel. */
.hc-signin-submit {
    width: 100%; justify-content: center; margin-top: var(--dl-space-6); padding: 11px 16px; font-size: 14.5px;
    background: var(--hc-signin-bg, var(--brand)); color: var(--hc-signin-on, #fff);
}
.hc-signin-submit:hover { color: var(--hc-signin-on, #fff); }
[data-theme="dark"] .hc-signin-submit, [data-theme="dark"] .hc-signin-submit:hover { color: var(--hc-signin-on, #0f1117); }
.hc-signin-submit:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* Links in the form column use the text ink, underlined: a light brand colour (Iswara's
   gold) would fail contrast on white, and ZG-45's derived link ink isn't here yet. */
.hc-signin-reset, .hc-signin-small { margin: 14px 0 0; font-size: 13px; color: var(--dl-text-secondary); }
.hc-signin-reset a, .hc-signin-foot a { color: var(--dl-text-primary); text-decoration: underline; }
/* ZG-168: read before the password, so it sits above the form rather than under it. */
.hc-signin-sessions { margin: 10px 0 16px; }

.hc-signin-banner {
    margin-top: var(--dl-space-5); padding: 11px 14px; border-radius: var(--dl-radius-sm);
    border: 1px solid var(--dl-border-light); border-left: 3px solid var(--dl-danger);
    background: var(--dl-surface-sunken); color: var(--dl-text-primary); font-size: 13.5px; line-height: 1.5;
}
.hc-signin-state p { margin: 10px 0 0; font-size: 14.5px; color: var(--dl-text-secondary); line-height: 1.55; }
.hc-signin-state p b { color: var(--dl-text-primary); }
.hc-signin-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--dl-space-6); }
.hc-signin-acts form { margin: 0; }
.hc-signin-acts .hc-btn:not(.ghost) { background: var(--hc-signin-bg, var(--brand)); color: var(--hc-signin-on, #fff); }

/* ZG-147: connecting Claude. A2's one consent line on the branded sign-in, the Cancel that
   names what it does, and A3's Connected page: the peak, in the help centre's own colours. */
.hc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hc-connect-consent {
    display: flex; gap: 12px; align-items: flex-start; margin-top: var(--dl-space-5); padding: 12px 14px;
    border: 1px solid var(--dl-border-light); border-left: 3px solid var(--hc-signin-bg, var(--brand));
    border-radius: var(--dl-radius-sm); background: var(--dl-surface-sunken);
}
.hc-connect-consent .t { font-size: 14px; font-weight: 700; color: var(--dl-text-primary); line-height: 1.4; }
.hc-connect-consent .h { margin-top: 4px; font-size: 13px; color: var(--dl-text-secondary); line-height: 1.5; }
.hc-connect-glyph, .hc-connected-join .claude {
    flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center;
    background: #d97757; color: #fff; font-size: 16px; font-weight: 800; line-height: 1;
}
.hc-connect-cancel { width: 100%; justify-content: center; margin-top: 10px; }
.hc-signin-small a { color: var(--dl-text-primary); text-decoration: underline; }

.hc-connected-join { display: flex; align-items: center; gap: 0; margin-bottom: var(--dl-space-5); }
.hc-connected-join .line { width: 44px; height: 2px; background: var(--hc-signin-bg, var(--brand)); }
.hc-connected-join .brand {
    width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; font-weight: 800; font-size: 15px;
    background: var(--hc-signin-bg, var(--brand)); color: var(--hc-signin-on, #fff);
}
.hc-connected-who { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 14.5px; color: var(--dl-text-secondary); }
.hc-connected-who b { color: var(--dl-text-primary); }
.hc-connected-can { list-style: none; margin: var(--dl-space-5) 0 0; padding: 0; display: grid; gap: 10px; }
.hc-connected-can li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--dl-text-primary); }
.hc-connected-can li.no { color: var(--dl-text-secondary); }
.hc-connected-can .mark {
    flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: inline-grid; place-items: center;
    font-size: 12px; font-weight: 800; background: rgba(56, 161, 105, .14); color: #2f855a;
}
.hc-connected-can li.no .mark { background: var(--dl-surface-sunken); color: var(--dl-text-muted); }
[data-theme="dark"] .hc-connected-can .mark { color: #68d391; }
[data-theme="dark"] .hc-connected-can li.no .mark { color: var(--dl-text-muted); }
.hc-connected-try { margin-top: var(--dl-space-5); padding: 12px 14px; border-radius: var(--dl-radius-sm); background: var(--dl-surface-sunken); }
.hc-connected-try .lb { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dl-text-muted); }
.hc-connected-try q { display: block; margin-top: 6px; font-size: 14px; color: var(--dl-text-primary); quotes: "\201C" "\201D"; }
/* ZG-166: the reach line (mock D5 4), and the help centre's own MCP link in Settings → Connections. */
.hc-connected-reach { margin: var(--dl-space-4) 0 0; padding: 10px 12px; border-radius: var(--dl-radius-sm); border: 1px solid var(--dl-border-subtle); font-size: 13.5px; line-height: 1.5; color: var(--dl-text-secondary); }
.hc-connected-reach b { color: var(--dl-text-primary); }
.hc-set-mcplink { display: flex; gap: 8px; align-items: center; margin: 6px 0 2px; min-width: 0; }
.hc-set-mcplink input { flex: 1 1 auto; min-width: 0; font-family: var(--dl-font-mono, ui-monospace, monospace); font-size: 13px; }
.hc-set-mcplink .hc-btn { flex: 0 0 auto; }

.hc-signin-foot {
    display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-top: var(--dl-space-8);
    font-size: 12px; color: var(--dl-text-muted);
}

.hc-signin.is-preview { min-height: 0; border-radius: var(--dl-radius-md); overflow: hidden; }

@media (max-width: 640px) {
    .hc-signin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .hc-signin-brand { padding: 22px 20px; gap: var(--dl-space-3); }
    .hc-signin-tagline { font-size: 22px; }
    .hc-signin-intro { display: none; }
    .hc-signin-form { padding: 28px 20px 20px; }
    .hc-signin-col { margin: 0; max-width: none; }
}

/* The one-time "Signed in as …" strip under the utility bar. */
.hc-welcome {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 20px; font-size: 13px;
    background: var(--dl-surface-sunken); color: var(--dl-text-primary);
    border-bottom: 1px solid var(--dl-border-subtle); border-left: 3px solid var(--dl-success);
}
.hc-welcome svg { color: var(--dl-success); }

/* ── Reconnect dialog ───────────────────────────────────────────────────
   Moved here from ReconnectModal.razor.css (ZG-45): it was the only scoped stylesheet, and
   its bundle file name put "ZenGuides" in every page's source. Every selector is the
   #components-reconnect-modal id or a components-* class blazor.web.js drives, so nothing
   here can reach another element. */
/* The circuit-drop dialog.

   Built on --dl-* tokens like every other surface, so it follows the reader's theme.
   The tokens already flip under [data-theme="dark"] in dl-tokens.css, so this file
   needs no dark block of its own — and no raw hex, which is what it used to be.

   The selectors are the contract blazor.web.js drives. Do not rename them. */

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal {
    width: 22rem;
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: var(--dl-space-8);
    border: 1px solid var(--dl-border-light);
    border-radius: var(--dl-radius-lg);
    background: var(--dl-surface);
    color: var(--dl-text-primary);
    font-family: var(--dl-font-display);
    font-size: 13px;
    line-height: 1.55;
    box-shadow: var(--dl-shadow-lg);
    opacity: 0;
    transition: display var(--dl-duration-normal) allow-discrete, overlay var(--dl-duration-normal) allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity var(--dl-duration-normal) both;
}

#components-reconnect-modal[open] {
    animation: components-reconnect-modal-slideUp 1.5s var(--dl-ease-out) 0.3s,
               components-reconnect-modal-fadeInOpacity var(--dl-duration-normal) var(--dl-ease-smooth) 0.3s;
    animation-fill-mode: both;
}

#components-reconnect-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.45);
    animation: components-reconnect-modal-fadeInOpacity var(--dl-duration-normal) var(--dl-ease-smooth);
    opacity: 1;
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dl-space-4);
}

#components-reconnect-modal p {
    margin: 0;
    text-align: center;
    color: var(--dl-text-secondary);
}

#components-reconnect-modal p b {
    display: inline-block;
    margin-bottom: var(--dl-space-1);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: var(--dl-tracking-tight);
    color: var(--dl-text-primary);
}

/* Matches .hc-btn, so the one button a reader meets in a bad moment looks like every
   other button in the app rather than like a browser dialog. */
#components-reconnect-modal button {
    border: 1px solid transparent;
    background: rgb(var(--dl-primary-rgb));
    color: #fff;
    padding: 8px 15px;
    border-radius: var(--dl-radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--dl-duration-fast) var(--dl-ease-smooth);
}

#components-reconnect-modal button:hover {
    filter: brightness(1.08);
}

[data-theme="dark"] #components-reconnect-modal button {
    color: var(--dl-dark-bg);
}

@keyframes components-reconnect-modal-slideUp {
    0% { transform: translateY(30px) scale(0.95); }
    100% { transform: translateY(0); }
}

@keyframes components-reconnect-modal-fadeInOpacity {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.components-rejoining-animation {
    position: relative;
    width: 72px;
    height: 72px;
}

.components-rejoining-animation div {
    position: absolute;
    border: 3px solid rgb(var(--dl-accent-rgb));
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation {
    0%   { top: 36px; left: 36px; width: 0;    height: 0;    opacity: 0; }
    4.9% { top: 36px; left: 36px; width: 0;    height: 0;    opacity: 0; }
    5%   { top: 36px; left: 36px; width: 0;    height: 0;    opacity: 1; }
    100% { top: 0;    left: 0;    width: 72px; height: 72px; opacity: 0; }
}

/* The spinner keeps people company; it must not be the thing that makes them ill. */
@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal,
    #components-reconnect-modal[open],
    .components-rejoining-animation div {
        animation: none;
        opacity: 1;
    }
}

/* ── Manage: the two-screen switch (ZG-103, decision 27) ───────────────── */
.hc-mnav { margin-left: auto; display: flex; gap: 4px; }
.hc-mnav a {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--dl-radius-full);
    font-size: 13px; font-weight: 700; color: var(--dl-text-secondary); text-decoration: none;
}
.hc-mnav a:hover { background: var(--dl-bg-secondary); color: var(--dl-text-primary); text-decoration: none; }
.hc-mnav a.on { background: rgba(var(--brand-rgb), .10); color: var(--brand); }

/* ── Manage: R1 Review (ZG-103) ────────────────────────────────────────── */
/* Inbox left, the reader's own layout right. One scroll region per column, no horizontal
   scroll at any width. On a phone the list and the open guide take turns. */
.hc-rv-grid { flex: 1 1 auto; display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.25fr); min-height: 0; }
.hc-rv-l {
    border-right: 1px solid var(--dl-border-subtle); background: var(--dl-surface);
    overflow-y: auto; overflow-x: hidden; min-height: 0; min-width: 0; padding-bottom: 18px;
}
.hc-rv-l .hc-chips { position: sticky; top: 0; z-index: 1; background: var(--dl-surface); }
.hc-rv-r { padding: 16px 26px 32px; overflow-y: auto; overflow-x: hidden; min-height: 0; min-width: 0; background: var(--dl-bg-primary); }

.hc-rv-card {
    display: block; margin: 10px 14px 0; padding: 11px 13px; border-radius: var(--dl-radius-md);
    background: var(--dl-surface); border: 1px solid var(--dl-border-light); color: inherit; text-decoration: none;
    transition: border-color var(--dl-duration-fast) var(--dl-ease-smooth), transform var(--dl-duration-fast) var(--dl-ease-out);
}
.hc-rv-card:hover { border-color: rgba(var(--brand-rgb), .45); text-decoration: none; transform: translateY(-1px); }
.hc-rv-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .16); }
.hc-rv-card > span { display: block; }
.hc-rv-card .cr { font-size: 11.5px; color: var(--dl-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-rv-card .t { font-size: 14px; font-weight: 800; color: var(--dl-text-primary); margin: 2px 0 6px; line-height: 1.3; }
.hc-rv-card .m { display: flex; gap: 6px; flex-wrap: wrap; }
.hc-rv-card .e { font-size: 12px; color: var(--dl-text-secondary); margin-top: 7px; overflow-wrap: anywhere; }
.hc-rv-empty { display: flex; flex-direction: column; gap: 4px; padding: 26px 18px; }
.hc-rv-empty b { color: var(--dl-text-primary); }

/* ZG-72: the cards of runs being written (ZG-71 moved "Ask for a guide" into the panel) */
.hc-rv-run { border-style: dashed; }
.hc-rv-run:hover { transform: none; border-color: var(--dl-border-light); }
.hc-rv-run.failed { border-style: solid; border-color: rgba(229, 62, 62, .45); }
.hc-rv-run.failed:hover { border-color: rgba(229, 62, 62, .45); }
.hc-rv-run .hc-rv-error { margin-top: 8px; }
.hc-rv-run .hc-rv-acts { margin-top: 9px; }
.hc-rv-lines { list-style: none; margin: 7px 0 0; padding: 0; font-size: 12.5px; color: var(--dl-text-secondary); }
.hc-rv-lines li { display: flex; gap: 7px; align-items: center; padding: 1px 0; }
.hc-rv-lines li.done svg { color: #22754b; }
[data-theme="dark"] .hc-rv-lines li.done svg { color: #68d391; }
.hc-rv-lines li.failed svg { color: #b42323; }
[data-theme="dark"] .hc-rv-lines li.failed svg { color: #fc8181; }
.hc-rv-lines li.todo { color: var(--dl-text-muted); }
.hc-rv-lines .dot { width: 13px; height: 13px; display: grid; place-items: center; }
.hc-rv-lines .dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }

.hc-chip.bad { background: rgba(229, 62, 62, .10); color: #b42323; }
[data-theme="dark"] .hc-chip.bad { color: #fc8181; }
.hc-rv-spin { animation: hc-rv-spin 1s linear infinite; }
@keyframes hc-rv-spin { to { transform: rotate(360deg); } }

.hc-rv-flash, .hc-rv-error {
    display: flex; gap: 8px; align-items: flex-start; margin: 10px 14px 0; padding: 8px 11px;
    border-radius: var(--dl-radius-sm); font-size: 12.5px; font-weight: 600;
}
.hc-rv-flash.ok { background: rgba(56, 161, 105, .12); color: #22754b; }
.hc-rv-flash.note { background: rgba(var(--brand-rgb), .08); color: var(--brand); }
[data-theme="dark"] .hc-rv-flash.ok { color: #68d391; }
.hc-rv-error { margin: 12px 0 0; background: rgba(229, 62, 62, .10); color: #b42323; }
[data-theme="dark"] .hc-rv-error { color: #fc8181; }

.hc-rv-back { display: none; }
.hc-rv-pick { margin-top: 60px; }
.hc-rv-missing { max-width: 460px; margin: 60px auto; text-align: center; }
.hc-rv-missing h2 { font-size: 19px; color: var(--dl-text-primary); }
.hc-rv-missing p { font-size: 13.5px; color: var(--dl-text-secondary); margin-top: 6px; }

.hc-rv-pvbar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.hc-rv-pvbar .lb { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--dl-tracking-wide); color: var(--dl-text-muted); }
.hc-rv-brand {
    font: inherit; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--dl-radius-full);
    border: 1px solid var(--dl-border-light); background: var(--dl-surface); color: var(--dl-text-primary);
}
/* ZG-61: the help centre staff review on the staff door. Tokens only, so dark mode follows. */
.hc-rv-hc { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.hc-rv-hc > span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--dl-tracking-wide); color: var(--dl-text-muted); }
@media (max-width: 600px) { .hc-rv-hc { display: flex; } .hc-rv-hc .hc-rv-brand { flex: 1; min-width: 0; } }
.hc-rv-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-rv-seg button {
    font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 12px; cursor: pointer; border-radius: var(--dl-radius-full);
    border: 1px solid var(--dl-border-light); background: var(--dl-surface); color: var(--dl-text-secondary);
}
.hc-rv-seg button:hover { border-color: rgba(var(--brand-rgb), .45); }
.hc-rv-seg button.on { background: var(--brand); border-color: var(--brand); color: var(--brand-on, #fff); }
[data-theme="dark"] .hc-rv-seg button.on { color: #0f1117; }

.hc-rv-banner {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--dl-radius-md);
    background: var(--dl-surface); border: 1px solid var(--dl-border-light); font-size: 13px; color: var(--dl-text-secondary);
}
.hc-rv-banner b { color: var(--dl-text-primary); }
.hc-rv-banner > svg { flex: 0 0 auto; margin-top: 2px; color: var(--brand); }
.hc-rv-banner.ai { background: rgba(var(--brand-rgb), .05); border: 1px dashed rgba(var(--brand-rgb), .4); }
.hc-rv-ver { font-size: 12px; color: var(--dl-text-muted); margin: 8px 2px 0; }
.hc-rv-verdict {
    display: flex; gap: 8px; align-items: center; margin: 8px 0 10px; padding: 7px 11px;
    border-radius: var(--dl-radius-sm); font-size: 13px; font-weight: 700;
}
.hc-rv-verdict.yes { background: rgba(56, 161, 105, .12); color: #22754b; }
.hc-rv-verdict.no { background: rgba(214, 158, 46, .14); color: #8a6415; }
[data-theme="dark"] .hc-rv-verdict.yes { color: #68d391; }
[data-theme="dark"] .hc-rv-verdict.no { color: var(--dl-warning); }

/* The reader's own article, framed so it reads as "this is the page", not as an editor. */
.hc-rv-pv {
    background: var(--dl-surface); border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-md);
    padding: 18px 22px 22px; box-shadow: var(--dl-shadow-xs);
}
.hc-rv-pv .hc-art { max-width: none; margin: 0; padding: 0; }
.hc-rv-instead { margin: 28px auto; }

.hc-rv-dock {
    position: sticky; bottom: 0; z-index: 2; margin: 12px -26px 0; padding: 10px 26px 12px;
    background: var(--dl-bg-primary); border-top: 1px solid var(--dl-border-subtle);
    box-shadow: 0 -8px 14px -12px rgba(0, 0, 0, .35);
}
.hc-rv-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hc-rv-note {
    flex: 1 1 220px; min-width: 0; font: inherit; font-size: 13px; padding: 8px 13px; border-radius: var(--dl-radius-full);
    border: 1px solid var(--dl-border-light); background: var(--dl-surface); color: var(--dl-text-primary); outline: none;
}
.hc-rv-note:focus { border-color: rgba(var(--brand-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); }
.hc-rv-acts .hc-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.hc-rv-micro { font-size: 12px; color: var(--dl-text-secondary); margin-top: 7px; }
.hc-rv-more {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding-top: 11px;
    border-top: 1px solid var(--dl-border-subtle); font-size: 12.5px;
}
.hc-rv-more a, .hc-rv-link {
    display: inline-flex; gap: 5px; align-items: center; font: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--brand); background: none; border: 0; padding: 0; cursor: pointer;
}
.hc-rv-more .why, .hc-rv-retire .why { color: var(--dl-text-muted); font-size: 12px; }
.hc-rv-retire { margin-top: 10px; font-size: 12.5px; }
.hc-rv-retire summary { cursor: pointer; font-weight: 700; color: var(--dl-text-secondary); }
.hc-rv-retire .row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px; }
.hc-rv-retire select {
    flex: 1 1 220px; min-width: 0; font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: var(--dl-radius-sm);
    border: 1px solid var(--dl-border-light); background: var(--dl-surface); color: var(--dl-text-primary);
}
.hc-btn.danger { background: transparent; color: #b42323; border-color: rgba(229, 62, 62, .4); }
.hc-btn.danger:hover { background: rgba(229, 62, 62, .08); color: #b42323; filter: none; }
[data-theme="dark"] .hc-btn.danger, [data-theme="dark"] .hc-btn.danger:hover { color: #fc8181; }

/* The ending (Peak-End): a real screen, never a toast. */
.hc-rv-done { max-width: 520px; margin: 64px auto; text-align: center; }
.hc-rv-done .tick {
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px;
    background: rgba(56, 161, 105, .14); color: #22754b; border: 2px solid rgba(56, 161, 105, .35);
}
[data-theme="dark"] .hc-rv-done .tick { color: #68d391; }
.hc-rv-done h2 { font-size: 23px; color: var(--dl-text-primary); letter-spacing: var(--dl-tracking-tight); }
.hc-rv-done p { font-size: 14px; color: var(--dl-text-secondary); margin-top: 8px; }
.hc-rv-done .acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
@media (prefers-reduced-motion: no-preference) {
    .hc-rv-done .tick { animation: hc-rv-pop 420ms var(--dl-ease-out) both; }
    @keyframes hc-rv-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
    .hc-rv-spin { animation: none; }
    .hc-rv-card { transition: none; }
    .hc-rv-card:hover { transform: none; }
}

@media (max-width: 900px) {
    .hc-rv-grid { grid-template-columns: 1fr; }
    .hc-rv-l { border-right: none; overflow: visible; }
    .hc-rv-r { padding: 14px 16px 26px; overflow: visible; }
    .hc-rv-grid.open .hc-rv-l { display: none; }
    .hc-rv-grid:not(.open) .hc-rv-r { display: none; }
    .hc-rv-back { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
    .hc-rv-pv { padding: 14px; }
    .hc-rv-dock { margin: 12px -16px 0; padding: 10px 16px 12px; }
    .hc-rv-note { flex-basis: 100%; }
    .hc-rv-acts .hc-btn { flex: 1 1 0; justify-content: center; padding: 8px 10px; }
    .hc-mnav { margin-left: 0; }
}

/* ZG-94: a connection's "Claude may publish" switch (S1 Settings → Connections). */
.hc-set-pub { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0 10px 23px; min-width: 0; }
.hc-set-pub .tx { min-width: 0; }
.hc-set-pub .t { font-size: 12.5px; font-weight: 700; color: var(--dl-text-primary); }
.hc-set-pub .h { font-size: 11.5px; color: var(--dl-text-muted); line-height: 1.5; margin-top: 2px; }
.hc-set-pub.on .t { color: var(--brand); }

/* ZG-152: the library glossary card on Settings. */
.hc-gl-view { margin: 4px 0 6px; display: grid; gap: 10px; }
.hc-gl-sec dt { font-size: 12px; font-weight: 700; color: var(--dl-text-primary); margin-bottom: 3px; }
.hc-gl-sec dt .n { font-weight: 600; color: var(--dl-text-muted); margin-left: 4px; }
.hc-gl-sec dd { margin: 0 0 2px; font-size: 12px; color: var(--dl-text-muted); line-height: 1.5; overflow-wrap: anywhere; }
.hc-gl-sec dd b { color: var(--dl-text-primary); font-weight: 600; }
.hc-gl-sec dd.more { font-style: italic; }
.hc-gl-ed { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.hc-gl-ed legend { font-size: 12px; font-weight: 700; color: var(--dl-text-primary); padding: 0; margin-bottom: 6px; }
.hc-gl-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.hc-gl-add { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) {
    .hc-gl-row { grid-template-columns: minmax(0, 1fr) auto; }
    .hc-gl-row .hc-in:nth-child(2) { grid-column: 1; grid-row: 2; }
}
.hc-switch {
    position: relative; flex: 0 0 auto; width: 34px; height: 20px; margin-top: 1px; border-radius: 999px; cursor: pointer;
    background: var(--dl-border-light); border: 1px solid var(--dl-border-light); transition: background .15s ease, border-color .15s ease;
}
.hc-switch .knob {
    position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.hc-switch[aria-checked="true"] { background: var(--brand); border-color: var(--brand); }
.hc-switch[aria-checked="true"] .knob { transform: translateX(14px); }
.hc-switch:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .hc-switch, .hc-switch .knob { transition: none; } }

/* ── Manage: Connected AI (ZG-70) ──────────────────────────────────────────
   Staff only: everyone's Claude connections, one card each (/dl-design-defaults), live ones
   first, ended ones greyed. One scroll region, no horizontal scroll at any width. On a phone
   the cards stack, chips wrap under the name, and Revoke goes full width. */
.hc-connectedai-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
    font-size: 12.5px; font-weight: 700; color: var(--brand);
}
.hc-connectedai-crumb { font-size: 12px; color: var(--dl-text-muted); margin-bottom: 2px; }
.hc-connectedai-crumb a { font-weight: 700; }
.hc-connectedai-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 26px 28px; background: var(--dl-bg-primary); }
.hc-connectedai-sec {
    font-size: 11px; font-weight: 800; letter-spacing: var(--dl-tracking-wide); text-transform: uppercase;
    color: var(--dl-text-muted); margin: 16px 2px 8px;
}
.hc-connectedai-micro { font-size: 12.5px; color: var(--dl-text-muted); margin: 14px 2px; }
.hc-connectedai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.hc-connectedai-card {
    display: flex; flex-direction: column; gap: 9px; min-width: 0;
    padding: 12px 14px; border-radius: var(--dl-radius-md);
    background: var(--dl-surface); border: 1px solid var(--dl-border-light);
}
.hc-connectedai-card.gone { opacity: .62; }
.hc-connectedai-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hc-connectedai-who .hc-av { width: 30px; height: 30px; flex: 0 0 auto; font-size: 11.5px; font-weight: 800; }
.hc-connectedai-who .id { min-width: 0; }
.hc-connectedai-who .n { font-size: 13.5px; font-weight: 800; color: var(--dl-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-connectedai-who .e { font-size: 12px; color: var(--dl-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-connectedai-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.hc-connectedai-chips .hc-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-connectedai-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto;
    font-size: 12px; color: var(--dl-text-secondary);
}
.hc-connectedai-foot .ended { font-weight: 700; }
.hc-connectedai-confirm { margin-top: 0; display: flex; flex-direction: column; gap: 6px; }
.hc-connectedai-confirm .hc-set-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-connectedai-empty {
    margin: 18px 0; padding: 24px; text-align: center; border-radius: var(--dl-radius-md);
    background: var(--dl-surface); border: 1px dashed var(--dl-border-emphasis); color: var(--dl-text-secondary);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hc-connectedai-empty b { color: var(--dl-text-primary); }

/* The toast: what just happened, after the card has already greyed in place. */
.hc-connectedai-toast {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30;
    display: flex; align-items: flex-start; gap: 9px; max-width: min(480px, calc(100vw - 32px));
    padding: 11px 12px 11px 14px; border-radius: var(--dl-radius-md);
    background: var(--dl-text-primary); color: var(--dl-bg-primary);
    font-size: 13px; font-weight: 700; line-height: 1.45; box-shadow: var(--dl-shadow-lg, 0 8px 24px rgba(0, 0, 0, .22));
}
.hc-connectedai-toast > svg { flex: 0 0 auto; margin-top: 2px; color: #68d391; }
.hc-connectedai-toast.warn > svg { color: #f6c26b; }
.hc-connectedai-toast .x {
    flex: 0 0 auto; margin-left: 4px; border: none; background: none; color: inherit; opacity: .7; cursor: pointer;
    padding: 2px; display: grid; place-items: center; border-radius: var(--dl-radius-sm);
}
.hc-connectedai-toast .x:hover { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .hc-connectedai-card { transition: opacity var(--dl-duration-fast) var(--dl-ease-out); }
    .hc-connectedai-toast { animation: hc-connectedai-in 180ms var(--dl-ease-out) both; }
    @keyframes hc-connectedai-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
}
@media (prefers-reduced-motion: reduce) {
    .hc-connectedai-card, .hc-connectedai-toast { transition: none; animation: none; }
}
@media (max-width: 640px) {
    .hc-connectedai-body { padding: 4px 16px 24px; overflow: visible; }
    .hc-connectedai-grid { grid-template-columns: minmax(0, 1fr); }
    .hc-connectedai-foot { flex-direction: column; align-items: stretch; }
    .hc-connectedai-foot .hc-btn { width: 100%; justify-content: center; }
    .hc-connectedai-confirm .hc-btn { flex: 1 1 0; justify-content: center; }
}
[data-theme="dark"] .hc-connectedai-card { background: var(--dl-surface); border-color: var(--dl-border-light); }
[data-theme="dark"] .hc-connectedai-card.gone { opacity: .55; }
[data-theme="dark"] .hc-connectedai-toast { background: #e4e4e7; color: #0f1117; }
[data-theme="dark"] .hc-connectedai-toast > svg { color: #22754b; }
[data-theme="dark"] .hc-connectedai-toast.warn > svg { color: #8a6415; }
[data-theme="dark"] .hc-connectedai-who .hc-av { color: #0f1117; }

/* ── S1 Address and its certificate (ZG-109) ───────────────────────────────────────────
   The chip sits beside the host in the list row and in the detail panel. Amber and red
   text use the same light/dark pairs as .hc-set-locked and .hc-set-err. */
.hc-cert {
    display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; white-space: nowrap;
    font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: var(--dl-radius-full);
}
.hc-cert::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hc-cert.ok { color: var(--dl-success); background: rgba(56, 161, 105, .12); }
.hc-cert.wait { color: #8a6415; background: rgba(214, 158, 46, .14); }
.hc-cert.busy { color: rgb(var(--dl-primary-rgb)); background: rgba(var(--dl-primary-rgb), .10); }
.hc-cert.bad { color: var(--dl-danger); background: rgba(229, 62, 62, .10); }
.hc-cert.none { color: var(--dl-text-secondary); background: var(--dl-bg-secondary); }
[data-theme="dark"] .hc-cert.wait { color: var(--dl-warning); }
[data-theme="dark"] .hc-cert.busy { color: rgb(var(--dl-accent-rgb)); background: rgba(var(--dl-accent-rgb), .12); }
.hc-addr { font-size: 17px; font-weight: 800; color: var(--dl-text-primary); margin-top: 12px; overflow-wrap: anywhere; }
.hc-addr-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; margin: 12px 0 0; font-size: 12.5px; }
.hc-addr-kv dt { color: var(--dl-text-muted); }
.hc-addr-kv dd { margin: 0; color: var(--dl-text-primary); overflow-wrap: anywhere; }
.hc-addr-raw { font-size: 12px; color: var(--dl-text-secondary); margin-top: 8px; }
.hc-addr-raw summary { cursor: pointer; }
.hc-addr-raw pre {
    white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; margin: 6px 0 0; padding: 8px 10px;
    background: var(--dl-bg-primary); border-radius: var(--dl-radius-sm); font-family: var(--dl-font-mono); font-size: 11.5px;
}
.hc-addr-foot { border-top: 1px solid var(--dl-border-subtle); padding-top: 10px; margin-top: 14px; }

/* ---- ZG-63: staff sign-in page — adapter settings and "Test sign-in" -------------------------------- */
.hc-adapter { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 22px 26px 40px; }
.hc-adapter-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; max-width: 1180px; }
.hc-adapter-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hc-adapter-card {
    background: var(--dl-surface); border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-lg);
    padding: 18px 20px; box-shadow: var(--dl-shadow-xs); min-width: 0;
}
.hc-adapter-card h2 { margin: 0 0 3px; font-size: 16px; font-weight: 800; color: var(--dl-text-primary); }
.hc-adapter-sub { font-size: 13px; color: var(--dl-text-muted); margin: 0 0 14px; line-height: 1.5; }
.hc-adapter-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.hc-adapter-opt {
    text-align: left; font-family: inherit; cursor: pointer; background: var(--dl-surface);
    border: 1.5px solid var(--dl-border-light); border-radius: var(--dl-radius-md); padding: 10px 12px;
    font-size: 12.5px; line-height: 1.45; color: var(--dl-text-secondary);
}
.hc-adapter-opt b { display: block; font-size: 13.5px; color: var(--dl-text-primary); margin-bottom: 2px; }
.hc-adapter-opt.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.hc-adapter-opt.off { border-style: dashed; opacity: .65; cursor: not-allowed; }
.hc-adapter-req { display: flex; align-items: center; gap: 8px; }
.hc-adapter-req .m {
    flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: var(--dl-tracking-wide);
    background: var(--dl-bg-secondary); color: var(--dl-text-secondary); border-radius: 5px; padding: 3px 7px;
}
.hc-mono { font-family: var(--dl-font-mono); font-size: 12.5px; }
.hc-adapter-num { max-width: 110px; }
.hc-adapter-map { resize: vertical; min-height: 180px; line-height: 1.5; }
.hc-adapter-more { margin: 4px 0 6px; }
.hc-adapter-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--brand); margin-bottom: 10px; }
.hc-adapter-fold {
    display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 10px; padding: 0; border: none; background: none;
    font-family: inherit; font-size: 13px; font-weight: 700; color: var(--brand); cursor: pointer;
}
.hc-adapter-secret { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; margin-top: 5px; }
.hc-adapter-secret.ok { color: var(--dl-success); }
.hc-adapter-secret.missing { color: #8a6415; }
.hc-adapter-lock {
    display: flex; gap: 7px; align-items: flex-start; margin-top: 12px; padding: 9px 11px; border-radius: var(--dl-radius-sm);
    font-size: 12.5px; font-weight: 700; line-height: 1.45; background: rgba(214, 158, 46, .14); color: #8a6415;
}
.hc-adapter-spin {
    display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: hc-adapter-spin .8s linear infinite; vertical-align: -2px;
}
@keyframes hc-adapter-spin { to { transform: rotate(360deg); } }
.hc-adapter-open { border-style: dashed; }
.hc-adapter-toast {
    display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: var(--dl-radius-md);
    background: #1f2937; color: #fff; font-weight: 700; font-size: 14px;
}

.hc-test-result { border-radius: var(--dl-radius-md); padding: 13px 15px; margin-top: 14px; font-size: 13px; }
.hc-test-result.ok { background: rgba(56, 161, 105, .10); border: 1px solid rgba(56, 161, 105, .35); }
.hc-test-result.bad { background: rgba(214, 158, 46, .12); border: 1px solid rgba(214, 158, 46, .40); }
.hc-test-result .h { display: flex; gap: 8px; align-items: flex-start; font-weight: 800; font-size: 14px; line-height: 1.45; }
.hc-test-result.ok .h { color: #22754b; }
.hc-test-result.bad .h { color: #8a6415; }
.hc-test-result dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 4px; }
.hc-test-result dt { color: var(--dl-text-muted); font-weight: 700; }
.hc-test-result dd { margin: 0; color: var(--dl-text-primary); overflow-wrap: anywhere; }
.hc-test-result .nha { color: #8a6415; font-weight: 800; }
.hc-test-result .hint { color: var(--dl-text-secondary); margin: 6px 0 0; line-height: 1.5; }
.hc-test-result .foot { font-size: 12px; color: var(--dl-text-muted); margin: 8px 0 0; line-height: 1.5; }

[data-theme="dark"] .hc-adapter-secret.missing,
[data-theme="dark"] .hc-adapter-lock,
[data-theme="dark"] .hc-test-result.bad .h,
[data-theme="dark"] .hc-test-result .nha { color: #f6c768; }
[data-theme="dark"] .hc-test-result.ok .h { color: #68d391; }
[data-theme="dark"] .hc-adapter-toast { background: #e6e8ee; color: #0f1117; }

@media (prefers-reduced-motion: reduce) { .hc-adapter-spin { animation: none; } }

@media (max-width: 860px) {
    .hc-adapter { padding: 16px 16px 32px; }
    .hc-adapter-grid, .hc-adapter-cards { grid-template-columns: 1fr; }
}

/* ── ZG-71: Draft a guide with AI (the panel) ── */
/* Review's header carries the loudest button beside the two-screen switch. */
.hc-mhead-acts { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hc-mhead-acts .hc-mnav { margin-left: 0; }
.hc-rv-card .m .hc-rv-link { margin-left: auto; }

/* The panel: a native modal <dialog>, sliding in from the right over a scrim. */
.hc-aidraft {
    position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
    padding: 0; border: 0; border-left: 1px solid var(--dl-border-light); background: var(--dl-surface); color: var(--dl-text-primary);
    box-shadow: var(--dl-shadow-lg, -12px 0 32px rgba(0, 0, 0, .18)); font-family: inherit;
}
.hc-aidraft[open] { display: flex; flex-direction: column; }
.hc-aidraft::backdrop { background: rgba(15, 17, 23, .42); }
.hc-aidraft-h { display: flex; gap: 11px; align-items: flex-start; padding: 18px 20px 14px; border-bottom: 1px solid var(--dl-border-subtle); }
.hc-aidraft-h .ico { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--brand-rgb), .10); color: var(--brand); }
.hc-aidraft-h .tt { min-width: 0; flex: 1 1 auto; }
.hc-aidraft-h h2 { font-size: 17px; font-weight: 800; letter-spacing: var(--dl-tracking-tight); margin: 0; }
.hc-aidraft-h .s { font-size: 12.5px; color: var(--dl-text-muted); margin-top: 2px; }
.hc-aidraft-x { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: var(--dl-text-secondary); cursor: pointer; }
.hc-aidraft-x:hover { background: var(--dl-bg-secondary); color: var(--dl-text-primary); }
.hc-aidraft-b { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 16px 20px 20px; min-height: 0; }
.hc-aidraft-f {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 13px 20px 16px;
    border-top: 1px solid var(--dl-border-subtle); background: var(--dl-surface);
}
.hc-aidraft-f .micro { font-size: 12px; color: var(--dl-text-secondary); flex: 1 1 180px; min-width: 0; }
.hc-aidraft-f .hc-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }

.hc-aidraft-form { display: flex; flex-direction: column; }
.hc-aidraft-form .lab { font-size: 13px; font-weight: 800; color: var(--dl-text-primary); margin: 14px 0 6px; }
.hc-aidraft-form .lab:first-child { margin-top: 0; }
.hc-aidraft-form textarea.hc-in { resize: vertical; min-height: 84px; max-height: 160px; line-height: 1.5; font: inherit; font-size: 14px; }
.hc-aidraft-form select.hc-in { font: inherit; font-size: 13.5px; }
.hc-aidraft-form .hc-in:disabled { opacity: .6; cursor: not-allowed; }
.hc-aidraft-form .help { font-size: 12px; color: var(--dl-text-muted); margin-top: 5px; line-height: 1.5; }
.hc-aidraft-form .help.warn { color: #8a6415; font-weight: 700; }
.hc-aidraft-hc {
    display: inline-flex; gap: 6px; align-items: center; padding: 4px 11px; border-radius: var(--dl-radius-full);
    background: rgba(var(--brand-rgb), .10); color: var(--brand); font-size: 13px; font-weight: 800;
}
.hc-aidraft-note, .hc-aidraft-explain {
    display: flex; gap: 9px; align-items: flex-start; margin-top: 16px; padding: 10px 12px; border-radius: var(--dl-radius-sm);
    background: rgba(var(--brand-rgb), .06); border-left: 3px solid rgba(var(--brand-rgb), .55); font-size: 12.5px; line-height: 1.55; color: var(--dl-text-secondary);
}
.hc-aidraft-note > svg, .hc-aidraft-explain > svg { flex: 0 0 auto; margin-top: 2px; color: var(--brand); }
.hc-aidraft-explain { margin: 0 0 16px; font-size: 13px; color: var(--dl-text-primary); }
.hc-aidraft-explain p { margin: 0; }

.hc-aidraft-ask { font-size: 14px; font-weight: 700; color: var(--dl-text-primary); line-height: 1.45; margin: 0 0 6px; overflow-wrap: anywhere; }
.hc-aidraft-lines { font-size: 13.5px; margin-top: 10px; }
.hc-aidraft-lines li { padding: 4px 0; }

/* The peak: the draft is in. Designed, never a toast. */
.hc-aidraft-done { text-align: center; padding: 8px 0 4px; }
.hc-aidraft-done .tick {
    width: 60px; height: 60px; margin: 4px auto 12px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(var(--brand-rgb), .12); color: var(--brand); border: 2px solid rgba(var(--brand-rgb), .35);
}
.hc-aidraft-done h3 { font-size: 21px; font-weight: 800; letter-spacing: var(--dl-tracking-tight); margin: 0; }
.hc-aidraft-done .ttl { font-size: 15px; font-weight: 700; color: var(--dl-text-primary); margin: 8px 0 0; overflow-wrap: anywhere; }
.hc-aidraft-done .meta { font-size: 12.5px; color: var(--dl-text-muted); margin: 4px 0 0; }
.hc-aidraft-steps {
    text-align: left; margin: 14px 0 0; padding: 10px 14px 10px 34px; border-radius: var(--dl-radius-md);
    background: var(--dl-bg-primary); border: 1px solid var(--dl-border-subtle); font-size: 13px; color: var(--dl-text-secondary);
}
.hc-aidraft-steps li { padding: 2px 0; overflow-wrap: anywhere; }
.hc-aidraft-steps li::marker { color: var(--brand); font-weight: 800; }
.hc-aidraft-done .more { font-size: 12px; color: var(--dl-text-muted); margin: 6px 0 0; text-align: left; }
.hc-aidraft-done .media { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 12.5px; color: var(--dl-text-secondary); margin: 10px 0 0; }
.hc-aidraft-next { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.hc-aidraft-next .q { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--dl-tracking-wide); color: var(--dl-text-muted); }
.hc-aidraft-choice {
    display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left; font: inherit; cursor: pointer;
    padding: 11px 13px; border-radius: var(--dl-radius-md); border: 1px solid var(--dl-border-light); background: var(--dl-surface); color: inherit;
    transition: border-color var(--dl-duration-fast) var(--dl-ease-smooth), transform var(--dl-duration-fast) var(--dl-ease-out);
}
.hc-aidraft-choice:hover { border-color: rgba(var(--brand-rgb), .5); transform: translateY(-1px); }
.hc-aidraft-choice:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hc-aidraft-choice .ic { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: rgba(var(--brand-rgb), .10); color: var(--brand); }
.hc-aidraft-choice .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-aidraft-choice b { font-size: 14px; color: var(--dl-text-primary); }
.hc-aidraft-choice .tx > span { font-size: 12.5px; color: var(--dl-text-secondary); line-height: 1.45; }
.hc-aidraft-choice.primary { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .14); }
.hc-aidraft-choice.primary .ic { background: var(--brand); color: var(--brand-on, #fff); }
.hc-aidraft-choice.off { cursor: default; opacity: .62; }
.hc-aidraft-choice.off:hover { border-color: var(--dl-border-light); transform: none; }

.hc-aidraft-fail { text-align: center; padding: 6px 0 10px; }
.hc-aidraft-fail .x {
    width: 54px; height: 54px; margin: 4px auto 12px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(229, 62, 62, .10); color: #b42323; border: 2px solid rgba(229, 62, 62, .3);
}
.hc-aidraft-fail h3 { font-size: 19px; font-weight: 800; margin: 0; }
.hc-aidraft-fail p { font-size: 13.5px; color: var(--dl-text-secondary); margin: 8px 0 0; line-height: 1.55; }

@media (prefers-reduced-motion: no-preference) {
    .hc-aidraft[open] { animation: hc-aidraft-in 220ms var(--dl-ease-out) both; }
    .hc-aidraft[open]::backdrop { animation: hc-aidraft-fade 220ms ease-out both; }
    .hc-aidraft-done .tick { animation: hc-rv-pop 420ms var(--dl-ease-out) both; }
    @keyframes hc-aidraft-in { from { transform: translateX(36px); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes hc-aidraft-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
    .hc-aidraft-choice, .hc-aidraft-choice:hover { transition: none; transform: none; }
}
@media (max-width: 600px) {
    .hc-aidraft { width: 100vw; border-left: 0; }
    .hc-aidraft-f .hc-btn { flex: 1 1 100%; justify-content: center; }
    .hc-aidraft-f .micro { flex-basis: 100%; order: 2; }
}

/* An AI draft names its steps with no screenshot (Review). */
.hc-rv-miss { display: flex; gap: 6px; align-items: flex-start; margin: 8px 2px 0; font-size: 12.5px; font-weight: 600; color: #8a6415; }
.hc-rv-miss svg { flex: 0 0 auto; margin-top: 1px; }

[data-theme="dark"] .hc-aidraft::backdrop { background: rgba(0, 0, 0, .6); }
[data-theme="dark"] .hc-aidraft-form .help.warn, [data-theme="dark"] .hc-rv-miss { color: var(--dl-warning); }
[data-theme="dark"] .hc-aidraft-fail .x { color: #fc8181; }
[data-theme="dark"] .hc-aidraft-choice.primary .ic { color: #0f1117; }

/* ---- ZG-151: Review's "checked against the product" list (plan D1). Amber is "please look", never red. ---- */
.hc-ck { margin: 10px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.hc-ck-sum {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 8px 11px; border-radius: var(--dl-radius-sm);
    background: rgba(214, 158, 46, .10); border: 1px solid rgba(214, 158, 46, .34); font-size: 13px; color: var(--dl-text-secondary);
}
.hc-ck-sum.all { background: rgba(56, 161, 105, .10); border-color: rgba(56, 161, 105, .30); }
.hc-ck-sum > svg { flex: 0 0 auto; color: #8a6415; }
.hc-ck-sum.all > svg { color: #22754b; }
.hc-ck-sum b { color: var(--dl-text-primary); }
.hc-ck-bar { flex: 1 1 60px; max-width: 140px; height: 6px; border-radius: 3px; background: var(--dl-warning); overflow: hidden; display: flex; }
.hc-ck-bar i { display: block; height: 100%; background: var(--dl-success); }
.hc-ck-bar i.no { flex: 1; background: var(--dl-warning); }
.hc-ck-jump { font-weight: 700; color: #8a6415; }
.hc-ck-list { list-style: none; margin: 0; padding: 0; }
.hc-ck-step {
    display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start;
    padding: 7px 0; border-top: 1px solid var(--dl-border-subtle); scroll-margin-top: 80px;
}
.hc-ck-step .sn {
    width: 20px; height: 20px; border-radius: 5px; background: var(--dl-bg-secondary); color: var(--dl-text-secondary);
    font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.hc-ck-step .tt { font-size: 13px; font-weight: 700; color: var(--dl-text-primary); overflow-wrap: anywhere; }
.hc-ck-step .seen { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 2px; font-size: 12px; font-weight: 700; color: #22754b; }
.hc-ck-step .seen a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hc-ck-step.flag {
    background: rgba(214, 158, 46, .07); box-shadow: inset 3px 0 0 var(--dl-warning);
    border-radius: 0 var(--dl-radius-sm) var(--dl-radius-sm) 0; padding: 9px 8px 10px 6px; border-top-color: transparent;
}
.hc-ck-step.flag .sn { background: var(--dl-warning); color: #fff; }
.hc-ck-flag {
    margin-top: 7px; background: var(--dl-surface); border: 1px solid rgba(214, 158, 46, .45);
    border-radius: var(--dl-radius-sm); padding: 9px 11px;
}
.hc-ck-flag .fh { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: #8a6415; }
.hc-ck-flag p { font-size: 12.5px; color: var(--dl-text-secondary); line-height: 1.5; margin: 3px 0 0; }
.hc-ck-flag .ac { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hc-ck-flag .hc-btn.sm { padding: 5px 10px; font-size: 12.5px; gap: 5px; }
.hc-ck-flag .hc-ck-danger { color: var(--dl-danger); border-color: rgba(229, 62, 62, .35); }
.hc-ck-micro { font-size: 12px; color: var(--dl-text-muted); }
[data-theme="dark"] .hc-ck-sum > svg, [data-theme="dark"] .hc-ck-jump, [data-theme="dark"] .hc-ck-flag .fh { color: var(--dl-warning); }
[data-theme="dark"] .hc-ck-sum.all > svg, [data-theme="dark"] .hc-ck-step .seen { color: #68d391; }
[data-theme="dark"] .hc-ck-step.flag .sn { color: #0f1117; }
@media (max-width: 480px) {
    .hc-ck-flag .ac .hc-btn { flex: 1 1 100%; justify-content: center; }
    .hc-ck-bar { max-width: none; flex-basis: 100%; order: 3; }
}
/* ── ZG-162: one makers' door ─────────────────────────────────────────────────────────── */
/* "Makers" on a brand link's sign-in, "Staff" on the bare door: a quiet word under the tile. */
.hc-signin-badge {
    align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
    letter-spacing: .02em; background: rgb(255 255 255 / .18); color: inherit; border: 1px solid rgb(255 255 255 / .35);
}
.hc-signin-small a { color: var(--dl-text-primary); text-decoration: underline; overflow-wrap: anywhere; }
/* The reader site's "Make guides": one quiet line at the foot of every page. */
.hc-foot {
    flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 6px 16px;
    border-top: 1px solid var(--dl-border-light); background: var(--dl-bg-primary); font-size: 12.5px;
}
.hc-foot a { color: var(--dl-text-secondary); text-decoration: none; }
.hc-foot a:hover, .hc-foot a:focus-visible { color: var(--dl-text-primary); text-decoration: underline; }
/* The door's "Nothing here" (unknown and not-live codes alike): no rail, centred. */
.hc-nothing-here { flex: 1 1 auto; overflow: auto; display: grid; place-items: start center; padding: 48px 16px; }


/* ---- ZG-158: Review's "out of date at step N" (plan M6). Amber like the step checks: readers are being misled, nothing is broken. ---- */
.hc-st {
    margin: 10px 0 12px; padding: 11px 12px; border-radius: var(--dl-radius-sm);
    background: rgba(214, 158, 46, .08); border: 1px solid rgba(214, 158, 46, .45); box-shadow: inset 3px 0 0 var(--dl-warning);
}
.hc-st-h { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--dl-text-secondary); overflow-wrap: anywhere; }
.hc-st-h > svg { flex: 0 0 auto; color: #8a6415; }
.hc-st-h b { color: var(--dl-text-primary); }
.hc-st-words { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--dl-text-secondary); overflow-wrap: anywhere; }
.hc-st-words b { color: var(--dl-text-primary); }
.hc-st-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0 6px; }
.hc-st-shots figure { margin: 0; min-width: 0; }
.hc-st-shots img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--dl-border-subtle); background: var(--dl-surface); }
.hc-st-shots .none {
    display: flex; align-items: center; justify-content: center; min-height: 90px; padding: 10px; text-align: center;
    border-radius: 6px; border: 1px dashed var(--dl-border-subtle); font-size: 12px; color: var(--dl-text-muted);
}
.hc-st-shots figcaption { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--dl-text-muted); }
.hc-st-ac { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hc-st-ac .hc-btn.sm { padding: 5px 10px; font-size: 12.5px; gap: 5px; }
.hc-st-micro { margin: 4px 0 0; font-size: 12px; color: var(--dl-text-muted); }
[data-theme="dark"] .hc-st-h > svg { color: var(--dl-warning); }
@media (max-width: 480px) {
    .hc-st-shots { grid-template-columns: minmax(0, 1fr); }
    .hc-st-ac .hc-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── ZG-164: the makers' workspace on a brand link, and "Nothing to make here" (mock D3, D4) ── */
/* "CSA Help · Admin" beside the name in the bar: the help centre and the role, no picker. */
.hc-util-mid { min-width: 0; display: flex; align-items: center; }
.hc-role-chip {
    flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
    color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
    white-space: nowrap;
}
@media (max-width: 640px) { .hc-role-chip { font-size: 11.5px; padding: 2px 8px; } }
.hc-foot-makers { justify-content: flex-start; color: var(--dl-text-secondary); }
.hc-foot-makers a { color: var(--dl-text-primary); text-decoration: underline; }

/* D4: phone-first; a brand bar, then one column of plain facts and one filled button. */
.hc-ntm { min-height: 100vh; background: var(--dl-bg-primary); color: var(--dl-text-primary); }
.hc-ntm-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
    background: var(--hc-ntm-bg, var(--brand)); color: var(--hc-ntm-on, #fff);
}
.hc-ntm-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 800; }
.hc-ntm-brand img { height: 28px; width: auto; max-width: 160px; object-fit: contain; }
.hc-ntm-brand .mono {
    width: 28px; height: 28px; border-radius: var(--dl-radius-sm); display: inline-grid; place-items: center;
    background: rgb(255 255 255 / .18); font-size: 15px;
}
.hc-ntm-brand img:not([hidden]) + .mono { display: none; }
.hc-ntm-brand .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-ntm-bar .hc-av { background: rgb(255 255 255 / .2); color: inherit; }
.hc-ntm-main { max-width: 520px; margin: 0 auto; padding: 28px 16px 40px; }
.hc-ntm-h { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: var(--dl-tracking-tight); }
.hc-ntm-lead { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--dl-text-secondary); }
.hc-ntm-facts {
    margin: 20px 0 0; padding: 4px 14px; border: 1px solid var(--dl-border-light); border-radius: var(--dl-radius-md);
    background: var(--dl-surface);
}
.hc-ntm-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; }
.hc-ntm-facts div + div { border-top: 1px solid var(--dl-border-light); }
.hc-ntm-facts dt { color: var(--dl-text-secondary); font-size: 13.5px; }
.hc-ntm-facts dd { margin: 0; font-weight: 700; font-size: 13.5px; text-align: right; overflow-wrap: anywhere; }
.hc-ntm-go {
    display: flex; justify-content: center; margin-top: 22px; width: 100%;
    background: var(--hc-ntm-bg, var(--brand)); color: var(--hc-ntm-on, #fff);
}
.hc-ntm-go:hover { color: var(--hc-ntm-on, #fff); }
[data-theme="dark"] .hc-ntm-go, [data-theme="dark"] .hc-ntm-go:hover { color: var(--hc-ntm-on, #0f1117); }
.hc-ntm-small { margin: 8px 0 0; font-size: 13px; color: var(--dl-text-secondary); line-height: 1.5; }
.hc-ntm-note {
    margin: 22px 0 0; padding: 12px 14px; border-radius: var(--dl-radius-md); background: var(--dl-surface-sunken);
    font-size: 14px; line-height: 1.55; color: var(--dl-text-primary);
}
.hc-ntm-quiet { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.hc-ntm-quiet form { margin: 0; }
.hc-ntm-link {
    padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--dl-text-primary);
    text-decoration: underline; cursor: pointer;
}
.hc-ntm-calm { display: flex; align-items: center; gap: 6px; margin-top: 22px; }
@media (min-width: 900px) { .hc-ntm-main { padding-top: 64px; } .hc-ntm-h { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .hc-ntm * { transition: none !important; } }

/* ==========================================================================
   Ask ZenGuides (ZG-156): M1 home, M2 conversation, M7 on a help centre's link.
   The chat is the whole page: a quiet bar, one column, the box at the bottom.
   Tokens only, so dark mode follows; a help centre's own colour arrives as
   --hc-chip (a validated #RRGGBB) on its chips and its recipe card.
   ========================================================================== */
.hc-ask { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--dl-bg-primary); color: var(--dl-text-primary); }
.hc-ask .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hc-ask-bar {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; background: var(--dl-surface); border-bottom: 1px solid var(--dl-border-subtle);
}
.hc-ask-brand { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--dl-text-primary); text-decoration: none; font-weight: 800; }
.hc-ask-brand:hover { text-decoration: none; color: var(--dl-text-primary); }
.hc-ask-brand .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-ask-mark {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    background: var(--brand); color: var(--brand-on, #fff); font-size: 13px; font-weight: 800;
}
.hc-ask-reach {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--dl-radius-full);
    border: 1px solid var(--dl-border-light); font-size: 12px; font-weight: 700; color: var(--dl-text-secondary); white-space: nowrap;
}
.hc-ask-sp { flex: 1 1 auto; }

.hc-ask-main { flex: 1 1 auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 16px 28px; display: flex; flex-direction: column; gap: 14px; }

/* M1: one box that says what it's for. */
.hc-ask-home { margin-top: clamp(8px, 10vh, 96px); display: flex; flex-direction: column; gap: 14px; }
.hc-ask-hi { font-size: 15px; font-weight: 700; color: var(--dl-text-secondary); }
.hc-ask-home h1 { font-size: clamp(22px, 4vw, 28px); font-weight: 800; letter-spacing: var(--dl-tracking-tight); line-height: 1.2; }
.hc-ask-sub { color: var(--dl-text-secondary); font-size: 14px; }
.hc-ask-home .hc-btn { align-self: flex-start; }
.hc-ask-try { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hc-ask-try .k { font-size: 11px; font-weight: 800; letter-spacing: var(--dl-tracking-wider); text-transform: uppercase; color: var(--dl-text-muted); }
.hc-ask-ex {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 13px; border-radius: var(--dl-radius-full);
    border: 1px solid var(--dl-border-light); background: var(--dl-surface); color: var(--dl-text-secondary);
    font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
.hc-ask-ex:hover, .hc-ask-ex:focus-visible { border-color: rgba(var(--brand-rgb), .45); color: var(--dl-text-primary); }
.hc-ask-reachline { font-size: 12.5px; color: var(--dl-text-muted); }
.hc-ask-off {
    display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px;
    background: var(--dl-surface); border: 1px solid var(--dl-border-light); color: var(--dl-text-secondary); font-size: 14px;
}

/* The box: big on the home page, docked under the conversation. */
.hc-ask-box {
    display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 14px;
    background: var(--dl-surface); border: 1px solid var(--dl-border-light); box-shadow: var(--dl-shadow-sm);
}
.hc-ask-box:focus-within { border-color: rgba(var(--brand-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.hc-ask-box.big { padding: 14px 12px 14px 18px; }
.hc-ask-box input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--dl-text-primary); font: inherit; font-size: 15px; }
.hc-ask-box input::placeholder { color: var(--dl-text-muted); }
.hc-ask-chat + .hc-ask-box { position: sticky; bottom: 12px; }
.hc-ask-send {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center;
    background: var(--brand); color: var(--brand-on, #fff); cursor: pointer;
}
.hc-ask-send:disabled { opacity: .4; cursor: default; }
.hc-ask-send.stop { background: var(--dl-bg-secondary); color: var(--dl-text-primary); }
.hc-ask-note { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--dl-text-secondary); }
.hc-ask-note.warn { color: var(--dl-text-primary); }
.hc-ask-note.warn .hc-icon { color: var(--dl-warning); }

/* M2: the conversation. */
.hc-ask-chat { display: flex; flex-direction: column; gap: 14px; }
.hc-ask-me { display: flex; justify-content: flex-end; }
.hc-ask-me .b {
    max-width: min(78%, 520px); padding: 10px 14px; border-radius: 14px 14px 4px 14px;
    background: rgba(var(--brand-rgb), .12); border: 1px solid rgba(var(--brand-rgb), .22); font-size: 14px; overflow-wrap: anywhere;
}
.hc-ask-it { display: flex; gap: 10px; align-items: flex-start; }
.hc-ask-it > .b { font-size: 14px; line-height: 1.55; padding-top: 3px; white-space: pre-line; overflow-wrap: anywhere; min-width: 0; }
.hc-ask-z {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    background: var(--dl-bg-secondary); color: var(--brand);
}
.hc-ask-choice { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hc-ask-choice .q { font-size: 14px; font-weight: 700; padding-top: 4px; }
.hc-ask-choice .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-ask-choice .hint { font-size: 12.5px; color: var(--dl-text-muted); }
.hc-ask-chip {
    --hc-chip: var(--brand);
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 10px;
    border: 1px solid var(--dl-border-light); background: var(--dl-surface); color: var(--dl-text-primary);
    font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.hc-ask-chip .i, .hc-ask-card .hd .i {
    width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
    background: var(--hc-chip); color: #fff; font-size: 11px; font-weight: 800;
}
.hc-ask-chip:hover:not(:disabled) { border-color: var(--hc-chip); }
.hc-ask-chip:disabled { cursor: default; opacity: .55; }
.hc-ask-chip.on { opacity: 1; border-color: var(--hc-chip); box-shadow: 0 0 0 1px var(--hc-chip) inset; }

/* The recipe, as cards: all shown up front, still-to-come dimmed, ticks only when real. */
.hc-ask-card {
    --hc-chip: var(--brand);
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px;
    border-radius: 14px; background: var(--dl-surface); border: 1px solid var(--dl-border-light); box-shadow: var(--dl-shadow-xs);
}
.hc-ask-card .hd { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; font-size: 13px; min-width: 0; }
.hc-ask-card .hd .n { font-weight: 800; color: var(--hc-chip); white-space: nowrap; }
.hc-ask-card .hd .t { color: var(--dl-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hc-ask-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--dl-surface-sunken); border: 1px solid var(--dl-border-subtle); }
.hc-ask-row .st {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    border: 1px dashed var(--dl-border-emphasis); color: var(--dl-text-muted);
}
.hc-ask-row.done .st { border: 0; background: var(--dl-success); color: #fff; }
.hc-ask-row.working .st { border: 0; color: var(--hc-chip); }
.hc-ask-row.failed .st { border: 0; background: rgba(214, 158, 46, .16); color: var(--dl-warning); }
.hc-ask-row.pending { opacity: .62; }
.hc-ask-row .tx { min-width: 0; flex: 1 1 auto; }
.hc-ask-row .tt { font-size: 14px; font-weight: 700; }
.hc-ask-row .nt { font-size: 12.5px; color: var(--dl-text-muted); margin-top: 2px; }
.hc-ask-row.failed .nt { color: var(--dl-text-secondary); }
.hc-ask-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.hc-ask-looks figure { margin: 0; min-width: 0; }
.hc-ask-looks img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--dl-border-light); background: var(--dl-bg-secondary); }
.hc-ask-looks figcaption { margin-top: 5px; font-size: 12px; color: var(--dl-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-ask-looks figcaption code { font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-text-muted); }
.hc-ask-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dl-text-secondary); padding-left: 38px; }
.hc-ask-status.warn .hc-icon { color: var(--dl-warning); }
.hc-ask-busy { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dl-text-muted); padding-left: 38px; }
.hc-ask .spin { animation: hc-ask-spin 1s linear infinite; }
@keyframes hc-ask-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hc-ask .spin { animation: none; } }

.hc-ask-gone { min-height: 100vh; display: grid; place-items: start center; padding: 48px 16px; background: var(--dl-bg-primary); }

@media (max-width: 560px) {
    .hc-ask-bar { gap: 8px; padding: 8px 12px; }
    .hc-ask-reach { padding: 3px 9px; }
    .hc-ask-main { padding: 16px 12px 20px; }
    .hc-ask-me .b { max-width: 88%; }
    .hc-ask-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-ask-status, .hc-ask-busy { padding-left: 0; }
}

/* ---- ZG-159: Waiting for you (M1, M6) beside the box; one line on a phone. ---- */
.hc-ask-main:has(.hc-ask-homegrid) { max-width: 1120px; }
.hc-ask-homegrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1000px) { .hc-ask-homegrid { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; } .hc-ask-wait { margin-top: clamp(8px, 10vh, 96px); } }
.hc-ask-wait .fold { border-radius: 14px; background: var(--dl-surface); border: 1px solid var(--dl-border-light); padding: 12px; }
.hc-ask-wait summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 2px 2px 8px; }
.hc-ask-wait summary::-webkit-details-marker { display: none; }
.hc-ask-wait .k { font-size: 11px; font-weight: 800; letter-spacing: var(--dl-tracking-wider); text-transform: uppercase; color: var(--dl-text-muted); }
.hc-ask-wait .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--dl-radius-full); display: grid; place-items: center; background: var(--brand); color: var(--brand-on, #fff); font-size: 11px; font-weight: 800; }
.hc-ask-wait .sp { flex: 1 1 auto; }
.hc-ask-wait .car { color: var(--dl-text-muted); transition: transform var(--dl-duration-fast, .15s); }
.hc-ask-wait details:not([open]) .car { transform: rotate(-90deg); }
.hc-ask-wait .card {
    --hc-chip: var(--brand);
    display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: 10px;
    background: var(--dl-surface-sunken); border: 1px solid var(--dl-border-subtle);
}
.hc-ask-wait .card .kk { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.hc-ask-wait .card.ood .kk { color: var(--dl-danger); }
.hc-ask-wait .card.dh .kk { color: #8a6415; }
.hc-ask-wait .card.dr .kk { color: var(--brand); }
[data-theme="dark"] .hc-ask-wait .card.dh .kk { color: var(--dl-warning); }
.hc-ask-wait .card .tt { font-size: 14px; font-weight: 800; color: var(--dl-text-primary); overflow-wrap: anywhere; }
.hc-ask-wait .card .ln { font-size: 12.5px; color: var(--dl-text-muted); overflow-wrap: anywhere; }
.hc-ask-wait .card .ln b { color: var(--dl-text-secondary); }
.hc-ask-wait .card .dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--hc-chip); vertical-align: 1px; }
.hc-ask-wait .card .ac { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hc-ask-wait .card .ac .hc-btn.sm { padding: 5px 10px; font-size: 12.5px; }
.hc-ask-wait .card .ac .hc-btn:not(.ghost) { background: var(--hc-chip); border-color: var(--hc-chip); }
.hc-ask-wait .card .ac .quiet { border-color: transparent; color: var(--dl-text-muted); }
.hc-ask-wait .empty { display: flex; gap: 10px; align-items: flex-start; padding: 6px 2px; color: var(--dl-success); }
.hc-ask-wait .empty b { color: var(--dl-text-primary); font-size: 14px; }
.hc-ask-wait .empty p { margin-top: 2px; font-size: 12.5px; color: var(--dl-text-muted); }
.hc-ask-wait .note { margin-top: 8px; font-size: 12.5px; color: var(--dl-text-secondary); }
.hc-ask-wait .mail { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dl-border-subtle); font-size: 12.5px; color: var(--dl-text-secondary); }
.hc-ask-wait .linkish { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--brand); text-decoration: underline; cursor: pointer; }
@media (max-width: 999px) { .hc-ask-wait .fold:not([open]) { padding: 8px 12px; } }
.hc-tn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hc-tn-row input { flex: 1 1 260px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--dl-border-light); background: var(--dl-surface); color: var(--dl-text-primary); font: inherit; font-size: 13.5px; }
.hc-tn .warn { color: var(--dl-danger); }
.hc-tn .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- ZG-157: the result card (M3), the publish ending (M4), admin by sentence (M5) and Undo. ----
   The card wears its help centre's colour (--hc-chip); the chat around it stays the page's. */
.hc-ask-result {
    --hc-chip: var(--brand);
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px;
    border-radius: 14px; background: var(--dl-surface); border: 1px solid var(--hc-chip); box-shadow: var(--dl-shadow-sm);
}
.hc-ask-result.old { border-color: var(--dl-border-light); box-shadow: none; opacity: .8; }
.hc-ask-result .top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.hc-ask-result .top .ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--dl-success); }
.hc-ask-result .top .who {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--dl-radius-full);
    border: 1px solid var(--dl-border-light); color: var(--dl-text-secondary); font-weight: 600;
}
.hc-ask-result .top .sp { flex: 1 1 auto; }
.hc-ask-result .top .hc { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--hc-chip); }
.hc-ask-result .top .hc .i {
    width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; background: var(--hc-chip); color: #fff; font-size: 10px;
}
.hc-ask-result .t { font-size: 19px; font-weight: 800; letter-spacing: var(--dl-tracking-tight); }
.hc-ask-result .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--dl-text-muted); }
.hc-ask-result .meta span { display: inline-flex; align-items: center; gap: 5px; }
.hc-ask-result .meta .good { color: var(--dl-success); font-weight: 700; }
.hc-ask-result .meta .flag { color: var(--dl-text-secondary); font-weight: 700; }
.hc-ask-result .meta .flag .hc-icon { color: var(--dl-warning); }
.hc-ask-result .older { font-size: 12.5px; color: var(--dl-text-muted); }
.hc-ask-result .pv {
    max-height: 520px; overflow: auto; padding: 14px 16px; border-radius: 10px;
    background: var(--dl-bg-primary); border: 1px solid var(--dl-border-subtle);
}
.hc-ask-result .pv .hc-art { max-width: none; margin: 0; padding: 0; }
.hc-ask-result .pv img { max-width: 100%; height: auto; }
.hc-ask-result .fix { display: flex; flex-direction: column; gap: 4px; }
.hc-ask-result .fix .k { font-size: 11px; font-weight: 800; letter-spacing: var(--dl-tracking-wider); text-transform: uppercase; color: var(--dl-text-muted); }
.hc-ask-result .fix .k span { text-transform: none; letter-spacing: 0; font-weight: 600; }
.hc-ask-result .fix .row { display: flex; align-items: flex-start; gap: 8px; }
.hc-ask-result .fix .n {
    flex: 0 0 auto; width: 22px; height: 22px; margin-top: 4px; border-radius: 6px; display: grid; place-items: center;
    background: var(--hc-chip); color: #fff; font-size: 11px; font-weight: 800;
}
.hc-ask-result .fix .words {
    flex: 1 1 auto; min-width: 0; text-align: left; padding: 4px 8px; border-radius: 8px; border: 1px solid transparent;
    background: transparent; color: var(--dl-text-secondary); font: inherit; font-size: 13.5px; line-height: 1.5; cursor: text; overflow-wrap: anywhere;
}
.hc-ask-result .fix .words b { color: var(--dl-text-primary); margin-right: 4px; }
.hc-ask-result .fix .words:hover:not(:disabled), .hc-ask-result .fix .words:focus-visible { border-color: var(--dl-border-light); background: var(--dl-surface-sunken); }
.hc-ask-result .fix .ed {
    flex: 1 1 auto; min-width: 0; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--hc-chip);
    background: var(--dl-surface); color: var(--dl-text-primary); font: inherit; font-size: 13.5px;
}
.hc-ask-result .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-ask-result .acts .hc-btn:first-child:not(.ghost) { background: var(--hc-chip); border-color: var(--hc-chip); }
.hc-ask-result .acts .quiet { border-color: transparent; }
.hc-ask-result .micro { font-size: 12.5px; color: var(--dl-text-muted); }
.hc-ask-result .micro b { color: var(--dl-text-secondary); }

/* M4 and M5: before and after. */
.hc-ask-ba, .hc-ask-change .cols { display: flex; flex-direction: column; gap: 6px; }
.hc-ask-ba .h { font-size: 13px; font-weight: 800; }
.hc-ask-ba .cols, .hc-ask-change .cols { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
.hc-ask-ba .was, .hc-ask-ba .now, .hc-ask-change .was, .hc-ask-change .now {
    flex: 1 1 0; min-width: 0; padding: 8px 10px; border-radius: 8px; font-size: 13px; overflow-wrap: anywhere;
    background: var(--dl-surface-sunken); border: 1px solid var(--dl-border-subtle);
}
.hc-ask-ba .now, .hc-ask-change .now { background: rgba(56, 161, 105, .08); border-color: rgba(56, 161, 105, .35); }
.hc-ask-ba .was s, .hc-ask-change .was s { color: var(--dl-text-muted); }
.hc-ask-ba .k, .hc-ask-change .k { font-size: 10.5px; font-weight: 800; letter-spacing: var(--dl-tracking-wider); text-transform: uppercase; color: var(--dl-text-muted); margin-bottom: 3px; }
.hc-ask-ba .arr, .hc-ask-change .arr { align-self: center; color: var(--dl-text-muted); }
.hc-ask .flip { transform: rotate(180deg); }

.hc-ask-change {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
    border-radius: 14px; background: var(--dl-surface); border: 1px solid var(--dl-border-light);
}
.hc-ask-change .h { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.hc-ask-change .h > .hc-icon { color: var(--dl-success); }
.hc-ask-change .h .sp { flex: 1 1 auto; }
.hc-ask-change .nt { font-size: 12.5px; color: var(--dl-text-secondary); }
.hc-ask-undobtn {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--dl-radius-full);
    border: 1px solid rgba(56, 161, 105, .45); background: transparent; color: var(--dl-text-primary); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.hc-ask-undobtn .cd, .hc-ask-undo .cd { font-family: var(--dl-font-mono); font-size: 12px; color: var(--dl-text-muted); }

/* M4's ending: never "Done." on its own. */
.hc-ask-live {
    --hc-chip: var(--brand);
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px;
    text-align: center; border-radius: 14px; background: var(--dl-surface); border: 1px solid rgba(56, 161, 105, .4);
}
.hc-ask-live .tick { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--dl-success); color: #fff; box-shadow: 0 0 0 8px rgba(56, 161, 105, .15); }
.hc-ask-live h3 { font-size: 18px; font-weight: 800; }
.hc-ask-live p { font-size: 13px; color: var(--dl-text-muted); }
.hc-ask-live .url { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: 100%; }
.hc-ask-live .url code {
    max-width: 100%; padding: 6px 10px; border-radius: 8px; background: var(--dl-surface-sunken); border: 1px solid var(--dl-border-subtle);
    font-family: var(--dl-font-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-ask-live .url .hc-btn:not(.ghost) { background: var(--hc-chip); border-color: var(--hc-chip); }
.hc-ask .hc-btn.sm { padding: 5px 10px; font-size: 12.5px; gap: 5px; }
.hc-ask-undo {
    display: flex; align-items: center; gap: 10px; margin-left: 38px; padding: 10px 12px; border-radius: 12px;
    background: var(--dl-text-primary); color: var(--dl-bg-primary); font-size: 13.5px; font-weight: 600;
}
.hc-ask-undo .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-ask-undo .cd { color: inherit; opacity: .75; }
.hc-ask-undo .hc-btn { background: var(--dl-bg-primary); color: var(--dl-text-primary); border-color: transparent; }

/* Change: the guide rides on the box. */
.hc-ask-about {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; max-width: 45%; padding: 3px 4px 3px 9px; border-radius: var(--dl-radius-full);
    background: rgba(var(--brand-rgb), .12); color: var(--dl-text-primary); font-size: 12px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.hc-ask-about button { border: 0; background: transparent; color: var(--dl-text-muted); cursor: pointer; display: grid; place-items: center; padding: 2px; }

@media (max-width: 560px) {
    .hc-ask-ba .cols, .hc-ask-change .cols { flex-direction: column; }
    .hc-ask-ba .arr, .hc-ask-change .arr { display: none; }
    .hc-ask-undo { margin-left: 0; }
    .hc-ask-result .pv { max-height: 380px; padding: 10px; }
}

/* ── ZG-164: the Ask home's staff picker (mock D2) and a brand link's readers line (mock D3) ── */
.hc-ask-pick {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 11px; border-radius: var(--dl-radius-full);
    border: 1px solid var(--dl-border-light); font-size: 12px; font-weight: 700; color: var(--dl-text-secondary); min-width: 0;
}
.hc-ask-pick select {
    border: 0; background: transparent; font: inherit; color: var(--dl-text-primary); padding: 2px 4px; max-width: 220px;
    text-overflow: ellipsis; cursor: pointer;
}
.hc-ask-pick:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.hc-ask-readers { margin: 0; font-size: 12.5px; color: var(--dl-text-muted); }
.hc-ask-readers a { color: var(--dl-text-secondary); text-decoration: underline; }
@media (max-width: 480px) { .hc-ask-pick select { max-width: 140px; } }