/* ============================================================================
   dashboard.autocomputing.host — hosting-only Gridtop.
   Loads AFTER shell/autocomputing.host.css + shell/desktop_poc.css and only
   adds what those two don't cover: the page shell, the left-nav treatment on
   top of .descriptor-panel, and the ChemiCloud-modelled main area.
   Nothing here restyles the header — that is carried over untouched.
   ============================================================================ */

:root {
    --hd-slate:      #44465E;
    --hd-slate-deep: #33344a;
    --hd-glow:       #7F78C5;
    --hd-link:       #AAA348;
    --hd-accent:     #FFEC64;
    --hd-olive:      #AAA348;
    --hd-paper:      #EEEEEE;
    --hd-ink:        #1D070E;
    --hd-danger:     #AA3333;
    --hd-ok:         #2e7d32;
    /* the Gridtop's brushed-silver pane gradient, reused for nav items */
    --hd-silver: linear-gradient(to bottom,
        #808390 0%, #a8abb8 15%, #dbdce6 45%, #c0c3cf 80%, #9598a6 100%);
}

/* ---- the hidden attribute must always win --------------------------------
   The UA stylesheet implements [hidden] as `display:none`, so ANY author
   `display` rule silently defeats it. That is what pinned "Loading your
   dashboard…" over the whole page: .hd-boot sets display:flex, so
   `hd-boot.hidden = true` did nothing. The same trap was hiding in
   .hd-navitem (display:block) — it would have shown the operator-only
   "Provision" nav item to every customer. One guard closes both.        */
[hidden] { display: none !important; }

/* ---- page shell ---------------------------------------------------------- */
body.hd-body {
    margin: 0;
    min-height: 100vh;
    background: var(--hd-slate);
    color: var(--hd-ink);
    font-family: 'Afacad', system-ui, sans-serif;
    font-size: 16px;
    overflow-x: hidden;
    cursor: url('shell/sprites/cursor_default.ico'), auto;
}
body.hd-body a,
body.hd-body button { cursor: url('shell/sprites/cursor_point.ico'), pointer; }
body.hd-body input,
body.hd-body textarea { cursor: url('shell/sprites/cursor_input.ico'), text; }
/* Dropdowns and form labels had the browser's own cursor (2026-09-21). */
body.hd-body select { cursor: url('shell/sprites/cursor_point.ico'), pointer; }
body.hd-body label { cursor: url('shell/sprites/cursor_default.ico'), default; }

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.86em; }

.hd-boot {
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    color: var(--hd-paper); text-align: center; font-size: 19px;
}
.hd-boot-title { font-size: 26px; font-weight: 700; }
.hd-boot-sub   { font-size: 17px; opacity: 0.8; margin-bottom: 8px; }

/* ---- shell --------------------------------------------------------------
   FLUSH. No padding, no gap, no radius: the left pane must meet the viewport
   edge and the header with nothing between them, the way it does on the Gridtop.
   --hd-header-h is measured at runtime (the header is position:fixed, so the
   shell has to be offset by its real height rather than a guessed constant). */
.hd-shell {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin-top: var(--hd-header-h, 84px);
    height: calc(100vh - var(--hd-header-h, 84px));
    overflow: hidden;
}

/* ---- LEFT PANE ----------------------------------------------------------
   Deliberately almost empty. #poc-left-pane / .poc-side-pane / .poc-pane-content
   / .descriptor-panel / .fisher-panel all come from desktop_poc.css untouched —
   that is what makes this a carbon copy. The ONLY thing overridden is the pane's
   flex sizing, because the Gridtop sits it between two panes and here it has one
   neighbour. Panel heights are left entirely to the native percentage basis:
   .descriptor-panel = 12.5% (one cell), .fisher-panel = 25% (two).            */
/* Width depends on viewport WIDTH ONLY — this is the fix for the fullscreen morph.
   The previous rule derived it from pane HEIGHT, mirroring the Gridtop's grid maths
   (paneWidth = (100vw - paneHeight*1.5) / 2). Correct for the Gridtop, wrong here:
   going fullscreen makes the window taller, which made the panel narrower. The Gridtop
   escapes this because #poc-desktop-environment is capped at max-height:900px, so it
   letterboxes instead of re-solving. This page has no grid to letterbox, so height is
   removed from the equation altogether.

   345px = the Gridtop's width at a 1920-wide window (the reference screenshot).
   276px = exactly 80% of that, so the panel can never shrink more than the 20% allowed,
   and only ever when the window is genuinely NARROW. It never grows past base.        */
#poc-left-pane {
    flex: 0 0 auto;
    width: clamp(276px, 18vw, 345px);
    min-width: 276px;    /* the 20% floor */
    max-width: 345px;    /* base; never wider */
}

/* nav items are .descriptor-panel; these are ONLY the anchor resets it needs to
   behave as a link. No sizing, no spacing — those stay native. */
.hd-navitem { text-decoration: none; color: var(--hd-ink); }
.hd-navitem .descriptor-header-stripe {
    display: flex; align-items: center; gap: 14px; height: 100%;
}
.hd-navitem .descriptor-mini-icon {
    width: clamp(26px, 1.85vw, 34px);
    height: clamp(26px, 1.85vw, 34px);
    flex: 0 0 clamp(26px, 1.85vw, 34px);
}
.hd-navitem .descriptor-mini-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hd-navlabel {
    /* Tracks the pane so the label always fits instead of truncating to "Da...". */
    font-size: clamp(17px, 1.35vw, 25px); font-weight: 500; letter-spacing: 0.3px;
    color: #2b2c3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-navitem:hover { filter: brightness(1.06); }
.hd-navitem.is-active {
    box-shadow: inset 3px 3px 6px rgba(255,255,255,0.8),
                inset -3px -3px 6px rgba(0,0,0,0.25),
                inset 4px 0 0 var(--hd-accent);
}
.hd-navitem.is-active .hd-navlabel { font-weight: 500; }
.hd-navitem-op .hd-navlabel { color: #6a5b1f; }

/* ---- MAIN ----------------------------------------------------------------
   GRID GROUND. The frontpage's .stationary-grid-bg is a 60px grid in
   rgba(68,70,94,0.2), tilted `perspective(700px) rotateX(60deg)` and masked to a
   radial fade — a horizon receding behind a hero section.
   That tilt is deliberately NOT carried over. A receding perspective plane behind a
   working data panel fights the content: the lines converge, so nothing on top shares
   an axis with them, and text sits on a moving density gradient.
   What IS carried over is the motif — the same 60px pitch and the same slate line
   colour, laid FLAT so it reads as ground rather than scenery, and dropped to 0.06
   alpha so it never competes with a table row. Same family as the Gridtop's own
   12x8 desktop grid.
   Dial --hd-grid-alpha to 0 to remove it entirely.                              */
.hd-main {
    --hd-grid-alpha: 0.06;
    --hd-grid-pitch: 60px;
    background-color: #f4f4f6;
    background-image:
        linear-gradient(rgba(68, 70, 94, var(--hd-grid-alpha)) 1px, transparent 1px),
        linear-gradient(90deg, rgba(68, 70, 94, var(--hd-grid-alpha)) 1px, transparent 1px);
    background-size: var(--hd-grid-pitch) var(--hd-grid-pitch);
    background-attachment: local;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6vh 48px 60px;
    overflow-y: auto;
}
.hd-view { display: none; }
.hd-view.is-active { display: block; }

.hd-title {
    font-family: 'Afacad', sans-serif;
    font-size: 24pt; font-weight: 400; line-height: 1.2;
    color: var(--hd-slate); margin: 0 0 30px;
    text-align: left;
}
h1.hd-title.is-mid { margin-top: 34px; }
.hd-crumbs { font-size: 11pt; color: #6d6e80; margin: -20px 0 40px; text-align: left; }
.hd-crumbs a { color: var(--hd-link); text-decoration: none; }
.hd-crumbs a:hover { text-decoration: underline; }
.hd-crumbs span { margin: 0 7px; opacity: 0.5; }
.hd-crumbs em { font-style: normal; color: #4a4b5c; }
.hd-lead { font-size: 13pt; line-height: 1.6; color: var(--hd-slate); margin: 20px 0; max-width: 62ch; }

.hd-msg {
    padding: 11px 15px; border-radius: 2px; margin-bottom: 18px;
    border: 1px solid #cfd0da; background: #fff;
}
.hd-msg.is-error { border-color: var(--hd-danger); background: #fdf1f1; color: #7a1f1f; }

/* Everything inside the dashboard shell sizes by its border, so padding can never push an
   element past its column -- the root cause of the Services module's mobile overflow. The
   Gridtop-borrowed chrome outside .hd-shell is untouched; the QR plate's own content-box
   declaration stands because it re-declares it. */
.hd-shell, .hd-shell *, .hd-shell *::before, .hd-shell *::after { box-sizing: border-box; }

/* ---- product row (ChemiCloud-modelled) ---------------------------------- */
.hd-prod {
    display: grid;
    grid-template-columns: minmax(280px, 1.15fr) minmax(220px, 0.85fr);
    gap: 22px;
    align-items: stretch;
    margin-bottom: 26px;
}

.hd-prodcard {
    /* Lifted from .poc-silver-menu — the right-click menu on an empty side pane. */
    background: linear-gradient(to bottom,
        rgba(255,255,255,0.95) 0%, rgba(240,240,240,0.95) 40%, rgba(220,220,220,0.95) 100%);
    border: 1px solid rgba(68, 70, 94, 0.4);
    box-shadow: 2px 2px 10px rgba(30, 32, 44, 0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
    border-radius: 2px;
    padding: 30px 26px 0;
    color: var(--hd-slate);
    text-align: left;
    min-height: 300px;
    display: flex; flex-direction: column; align-items: flex-start;
    overflow: hidden;
}
.hd-prodcard-art { margin: 8px 0 18px; }
.hd-prodcard-name { font-size: 16pt; font-weight: 400; margin: 0 0 15px; }
.hd-prodcard-status { font-size: 13pt; margin: 0 0 auto; }
.hd-pill {
    display: inline-block; padding: 3px 13px; border-radius: 2px;
    background: var(--hd-slate); color: var(--hd-accent);
    font-size: 11pt; font-weight: 400;
}
.hd-pill.is-ok   { background: var(--hd-slate); color: var(--hd-accent); }
.hd-pill.is-bad  { background: var(--hd-danger); color: #fff; }
.hd-pill.is-idle { background: var(--hd-slate); color: var(--hd-accent); }
.hd-prodcard-domain {
    width: calc(100% + 52px); margin: 30px -26px 0;
    padding: 14px 26px; text-align: left;
    background: var(--hd-slate); color: var(--hd-accent);
    font-size: 14px; word-break: break-all;
}

.hd-side { padding-top: 2px; container-type: inline-size; }
.hd-side-h {
    font-family: 'Afacad', sans-serif; font-size: 24pt; font-weight: 400; line-height: 1.2;
    color: var(--hd-slate); margin: 0 0 15px; text-align: left;
}
.hd-side-info {
    background: rgba(68,70,94,0.06); color: var(--hd-slate); border-radius: 2px;
    padding: 12px 15px; font-size: 12pt; font-weight: 400; margin-bottom: 30px;
}
.hd-actions-list { list-style: none; margin: 0; padding: 0; }
.hd-actions-list li { margin-bottom: 13px; }
.hd-actlink {
    display: inline-block; background: none; border: none; padding: 0;
    font-family: inherit; font-size: 16px; color: var(--hd-link); text-decoration: none;
    text-align: left;
}
.hd-actlink:hover:not(:disabled) { text-decoration: underline; }
.hd-actlink:disabled { color: #a6a7b6; cursor: not-allowed; }
/* "Coming Soon" items (the Gridtop, 2026-09-16): greyed, inert, tooltip from title. */
.hd-actlink.is-soon { color: #a6a7b6; cursor: not-allowed; text-decoration: none; }
.hd-shortcut.is-soon { color: #a6a7b6; background: #f4f4f7; cursor: not-allowed; }
.hd-shortcut.is-soon:hover { border-color: #e0e1e9; box-shadow: none; }
.hd-shortcut.is-soon img { filter: grayscale(1); opacity: 0.5; }

/* ---- CTAs ---------------------------------------------------------------- */
.hd-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hd-cta-row > .hd-cta { flex: 0 1 240px; }
.hd-addactions .hd-cta { flex: 0 1 240px; }
/* Matches .sign-up-btn on autocomputing.host exactly: slate plate, olive text,
   text lights to #FFEC64 on hover, same 0.3s ease transition. */
.hd-cta {
    flex: 1 1 220px;
    display: inline-block; text-align: center; text-decoration: none;
    padding: 14px 20px; border-radius: 2px; border: none;
    background-color: var(--hd-slate);
    color: var(--hd-link);
    font-family: inherit; font-size: 13pt; font-weight: 400;
    transition: color 0.3s ease, background-color 0.3s ease;
}
.hd-cta:hover:not(:disabled) { color: var(--hd-accent); }
.hd-cta-alt { background-color: var(--hd-slate); }
.hd-cta-alt:hover:not(:disabled) { color: var(--hd-accent); }
.hd-cta:disabled { opacity: 0.5; cursor: not-allowed; }

.hd-shortcuts-h { font-size: 16pt; font-weight: 400; color: var(--hd-slate); margin: 0 0 15px; text-align: left; }
.hd-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.hd-shortcut {
    background: #fff; border: 1px solid #e0e1e9; border-radius: 2px;
    padding: 16px 18px; text-align: left; text-decoration: none;
    color: var(--hd-slate); font-size: 12pt;
    display: flex; align-items: center; gap: 12px;
}
.hd-shortcut:hover { border-color: var(--hd-glow); box-shadow: 0 2px 8px rgba(127,120,197,0.25); }
.hd-shortcut img { width: 30px; height: 30px; object-fit: contain; }

/* ---- tables / facts ------------------------------------------------------ */
.hd-table-wrap { overflow-x: auto; }
.hd-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 2px; overflow: hidden; }
.hd-facts, .hd-form, .hd-shortcut, .hd-msg { background-color: #fff; }
.hd-table th, .hd-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid #eceded; font-size: 12pt; }
.hd-table th { background: #f7f7fa; color: #6d6e80; font-weight: 400; font-size: 11pt; }
.hd-table tr:last-child td { border-bottom: none; }
.hd-empty-cell { color: #9a9bac; text-align: center; }

.hd-facts { background: #fff; border: 1px solid #e0e1e9; border-radius: 2px; padding: 6px 18px; max-width: 620px; }
.hd-facts > div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid #f0f0f4; }
.hd-facts > div:last-child { border-bottom: none; }
.hd-facts dt { color: #6d6e80; font-size: 12pt; }
.hd-facts dd { margin: 0; text-align: right; color: var(--hd-slate); font-size: 12pt; }

.hd-meter-wrap { max-width: 620px; }
.hd-meter-top { display: flex; justify-content: space-between; font-size: 15px; color: #5a5b6c; margin-bottom: 7px; }
.hd-meter { height: 10px; background: #e6e7ee; border-radius: 999px; overflow: hidden; }
.hd-meter-fill { height: 100%; background: var(--hd-glow); border-radius: 999px; transition: width 0.5s ease; }
.hd-meter-fill.is-high { background: var(--hd-danger); }

/* ---- operator form ------------------------------------------------------- */
.hd-form {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 15px; align-items: end; max-width: 900px;
    background: #fff; border: 1px solid #e0e1e9; border-radius: 2px; padding: 20px;
}
.hd-form label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: #5a5b6c; }
.hd-form input[type=text], .hd-form input[type=email], .hd-form input[type=password] {
    padding: 10px 12px; border: 1px solid #cfd0da; border-radius: 2px;
    font-family: 'JetBrains Mono', monospace; font-size: 14.5px; color: #2f3042;
}
.hd-form input:focus { outline: 2px solid var(--hd-glow); outline-offset: 1px; }
.hd-check { flex-direction: row !important; align-items: center; gap: 9px !important; }
.hd-check input { width: 16px; height: 16px; }
.hd-result {
    margin-top: 18px; max-width: 900px; padding: 16px 18px; border-radius: 2px;
    border: 1px solid var(--hd-olive); background: #fffbe6;
    font-family: 'JetBrains Mono', monospace; font-size: 13.5px;
    white-space: pre-wrap; word-break: break-all; color: #4a4327;
}

/* ---- responsive ---------------------------------------------------------- */
/* The grid collapses when the METERS would not render, not at a fixed viewport width:
   at the 1.15/0.85 column split the aside falls under the 358px meters threshold when the
   grid itself is under ~842px, so that is the collapse line. Silver box takes the width;
   Overview moves beneath it; Account and Server sit side by side. */
[data-view="overview"] { container-type: inline-size; }
@container (max-width: 841px) {
    .hd-prod { grid-template-columns: 1fr; }
    #hd-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    #hd-info .hd-info-card { margin-bottom: 0; }
}
@media (max-width: 820px) {
    /* Phones (2026-09-17): the page scrolls as a whole, and the left pane becomes a strip of
       icons pinned under the header. The strip keeps the DOM order applyNavOrder() sets, so a
       customer's desktop arrangement carries over. Reordering is desktop-only: the grips are
       hidden here, so no drag can start.
       Why it would not scroll: shell/desktop_poc.css has body:not(.gridtop-ready) {overflow:hidden}
       for the Gridtop's boot cover, and this page never gets .gridtop-ready. That was harmless while
       the shell was exactly viewport-tall, and froze the page once it stacked. shell/autocomputing.host.css
       also gives body min-width:400px, which pushed a 375-390px phone sideways. */
    body.hd-body { overflow-x: hidden; overflow-y: auto; min-width: 0; }
    /* At least a screen tall, so the grid ground (.hd-main grows into it) reaches the bottom on a
       short page instead of stopping above the slate body. lvh: tall enough with the toolbar hidden. */
    .hd-shell {
        flex-direction: column; height: auto; overflow: visible;
        min-height: calc(100vh - var(--hd-header-h, 84px));
        min-height: calc(100lvh - var(--hd-header-h, 84px));
    }
    #poc-left-pane {
        position: sticky; top: var(--hd-header-h, 84px); z-index: 50;
        flex: 0 0 auto; width: 100%; min-width: 0; max-width: none;
        height: auto; overflow: hidden;
        box-shadow: inset 0 -4px 10px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
    }
    #poc-left-pane .poc-pane-content { flex-direction: row; height: auto; }
    #poc-left-pane .fisher-panel { display: none; }
    #poc-left-pane .hd-navitem {
        flex: 1 1 0; width: auto; min-width: 0; height: 52px;
        padding: 0; border-bottom: 0; border-right: 1px solid rgba(68, 70, 94, 0.3);
        justify-content: center;
    }
    #poc-left-pane .hd-navitem .descriptor-header-stripe { justify-content: center; gap: 0; }
    #poc-left-pane .hd-navitem .descriptor-drag-grip { display: none; }
    #poc-left-pane .hd-navitem .descriptor-mini-icon { width: 28px; height: 28px; flex: 0 0 28px; }
    /* Hidden from view but still the link's name for screen readers. */
    #poc-left-pane .hd-navlabel {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    #poc-left-pane .hd-navitem.is-active {
        box-shadow: inset 3px 3px 6px rgba(255,255,255,0.8),
                    inset -3px -3px 6px rgba(0,0,0,0.25),
                    inset 0 -4px 0 var(--hd-accent);
    }
    .hd-prod { grid-template-columns: 1fr; }
    .hd-title { font-size: 30px; }
    .hd-main { padding: 20px 16px 30px; }
}

/* Provisioning still finishing — neither active nor failed. Distinct from is-ok/is-bad so a
   customer mid-setup is never shown a red state for something that is working correctly. */
.hd-pill.is-pending {
    background: var(--hd-link);
    color: var(--hd-ink);
}

/* ---- status box: two columns ------------------------------------------------
   Left is identity (art, plan, status). Right is the working area — domains,
   the add-domain wizard, and the actions. Previously the right half was empty. */
.hd-prodcard {
    display: grid;
    grid-template-columns: minmax(160px, 210px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    text-align: left;
    padding: 24px 26px;
    min-height: 0;
}
.hd-prodcard-id { display: flex; flex-direction: column; align-items: flex-start; }
.hd-prodcard-art { margin: 0 0 12px; }
.hd-prodcard-name { font-size: 15pt; font-weight: 400; margin: 0 0 10px; line-height: 1.25; }
.hd-prodcard-status { font-size: 12pt; margin: 0; }

.hd-prodcard-main { display: flex; flex-direction: column; min-width: 0; }

/* ---- domain list ---- */
.hd-domlist { list-style: none; margin: 0 0 14px; padding: 0; }
.hd-domrow {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid rgba(68,70,94,0.14);
}
.hd-domrow:last-child { border-bottom: none; }
.hd-domname {
    font-size: 12.5pt; color: var(--hd-slate); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hd-domname:hover { color: var(--hd-link); text-decoration: underline; }
.hd-domtag {
    font-size: 9.5pt; letter-spacing: 0.4px; text-transform: uppercase;
    color: #6d6e80; border: 1px solid rgba(68,70,94,0.25); border-radius: 2px;
    padding: 1px 6px; flex: 0 0 auto;
}
.hd-domtag.is-main { color: var(--hd-slate); border-color: var(--hd-link); }
.hd-domtools { margin-left: auto; display: flex; gap: 6px; flex: 0 0 auto; }
.hd-domtool {
    width: 26px; height: 26px; padding: 0; border: 1px solid rgba(68,70,94,0.25);
    background: rgba(255,255,255,0.55); border-radius: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.hd-domtool:hover { background: var(--hd-slate); border-color: var(--hd-slate); }
.hd-domtool img { width: 15px; height: 15px; object-fit: contain; display: block; }
.hd-domempty { font-size: 12pt; color: #6d6e80; margin: 0 0 14px; }
.hd-domlimit { font-size: 10.5pt; color: #6d6e80; margin: 10px 0 0; }

/* ---- actions ---- */
.hd-prodcard-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.hd-cta-sm { flex: 0 0 auto; padding: 9px 18px; font-size: 12pt; }
.hd-cta-ghost {
    background-color: transparent; color: var(--hd-slate);
    box-shadow: inset 0 0 0 1px rgba(68,70,94,0.35);
}
.hd-cta-ghost:hover:not(:disabled) { color: var(--hd-slate); background-color: rgba(68,70,94,0.08); }

/* ---- add-domain wizard ---- */
.hd-addform {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px; margin-bottom: 16px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(68,70,94,0.3); border-radius: 2px;
}
.hd-addfield { display: flex; flex-direction: column; gap: 4px; font-size: 11pt; color: #5a5b6c; }
.hd-addfield input {
    padding: 8px 10px; border: 1px solid rgba(68,70,94,0.3); border-radius: 2px;
    font-family: 'JetBrains Mono', monospace; font-size: 11pt; color: var(--hd-slate);
    background: #fff;
}
.hd-addfield input:focus { outline: 2px solid var(--hd-link); outline-offset: 1px; }
.hd-addcheck { display: flex; align-items: center; gap: 8px; font-size: 11pt; color: #5a5b6c; }
.hd-addactions { display: flex; gap: 8px; }
.hd-addmsg { margin: 0; font-size: 11pt; color: #6d6e80; }
.hd-addmsg.is-error { color: var(--hd-danger); }
.hd-addmsg.is-ok    { color: #2e7d32; }

@media (max-width: 900px) {
    .hd-prodcard { grid-template-columns: 1fr; gap: 18px; }
}

/* ---- DNS on the Domains page (2026-09-16) ------------------------------------------------
   Left-aligned explicitly: the dashboard inherits centred text from the Gridtop chrome. */
#hd-dom-list-wrap, .hd-dns { text-align: left; }
.hd-dns { max-width: 1000px; }
.hd-dns .hd-crumbs { margin: -20px 0 16px; }
.hd-dns-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.hd-dns-title { flex: 1 1 auto; margin: 0; font-size: 16pt; font-weight: 400; color: var(--hd-slate); word-break: break-all; }
.hd-dns-h { flex: 1 1 auto; margin: 0; font-size: 13pt; font-weight: 400; color: var(--hd-slate); }
.hd-dns-card { background: #fff; border: 1px solid #e0e1e9; border-radius: 2px; padding: 16px 18px; margin: 0 0 16px; }
.hd-dns-where { margin: 0 0 12px; font-size: 11.5pt; line-height: 1.45; color: var(--hd-slate); }
.hd-dns-note { margin: 8px 0; max-width: 70ch; font-size: 10.5pt; line-height: 1.5; color: #55566a; }
.hd-dns-note a { color: var(--hd-slate); }

.hd-dns-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.hd-dns-check { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border: 1px solid #e0e1e9; border-left: 4px solid #c4c5d0; border-radius: 2px; }
.hd-dns-check.is-ok { border-left-color: var(--hd-ok); }
.hd-dns-check.is-missing { border-left-color: var(--hd-danger); }
.hd-dns-check.is-elsewhere, .hd-dns-check.is-unknown { border-left-color: var(--hd-link); }
.hd-dns-check-label { font-size: 9pt; letter-spacing: 0.4px; text-transform: uppercase; color: #6d6e80; }
.hd-dns-check-text { font-size: 11pt; color: var(--hd-slate); }
.hd-dns-check-text::before { margin-right: 5px; font-weight: 700; }
.hd-dns-check.is-ok .hd-dns-check-text::before { content: '\2713'; color: var(--hd-ok); }
.hd-dns-check.is-missing .hd-dns-check-text::before { content: '\2715'; color: var(--hd-danger); }
.hd-dns-check.is-elsewhere .hd-dns-check-text::before,
.hd-dns-check.is-unknown .hd-dns-check-text::before { content: '\2022'; color: #7a7640; }

.hd-dns-option { margin: 10px 0 0; border: 1px solid #e0e1e9; border-radius: 2px; }
.hd-dns-option-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 12px; }
.hd-dns-option-title { flex: 1 1 auto; font-size: 11.5pt; color: var(--hd-slate); }
.hd-dns-option-title em { margin-left: 6px; font-style: normal; font-size: 8.5pt; letter-spacing: 0.4px; text-transform: uppercase; color: #7a7640; }
.hd-dns-inuse { padding: 2px 8px; border-radius: 2px; background: var(--hd-ok); color: #fff; font-size: 9pt; letter-spacing: 0.4px; text-transform: uppercase; }
.hd-dns-option-body { padding: 10px 12px 12px; border-top: 1px solid #f0f0f4; }
.hd-dns-steps { margin: 0 0 10px; padding-left: 20px; font-size: 11pt; line-height: 1.6; color: var(--hd-slate); }
.hd-dns-copylist { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.hd-dns-copyitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 8px 5px 12px; background: #f7f7fa; border: 1px solid #e0e1e9; border-radius: 2px; }
.hd-dns-copyitem code, .hd-dns-val { font-family: 'JetBrains Mono', monospace; font-size: 10pt; color: #2f3042; }
.hd-dns-val { max-width: 480px; word-break: break-all; }

.hd-dns-btn {
    flex: 0 0 auto; padding: 3px 9px; background: none; border: 1px solid rgba(68, 70, 94, 0.35); border-radius: 2px;
    font-family: inherit; font-size: 10pt; color: var(--hd-slate); cursor: pointer;
}
.hd-dns-btn:hover { background: rgba(68, 70, 94, 0.08); }
.hd-dns-btn.is-danger:hover { color: var(--hd-danger); border-color: var(--hd-danger); background: #fdf1f1; }
.hd-dns-actions { white-space: nowrap; text-align: right !important; }
.hd-dns-actions .hd-dns-btn + .hd-dns-btn { margin-left: 6px; }
.hd-dns-fixed { font-size: 9.5pt; color: #8a8b9c; }
.hd-dns-table th, .hd-dns-table td { padding: 9px 12px; font-size: 10.5pt; vertical-align: top; }
.hd-dns-sys { display: flex; font-size: 10pt; color: #5a5b6c; }

.hd-dns-form { margin: 0 0 12px; }
.hd-dns-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 10px; }
.hd-dns-fields .hd-dns-value { grid-column: span 2; }
.hd-addfield select {
    padding: 8px 10px; background: #fff; border: 1px solid rgba(68, 70, 94, 0.3); border-radius: 2px;
    font-family: inherit; font-size: 11pt; color: var(--hd-slate);
}
.hd-addfield select:focus { outline: 2px solid var(--hd-link); outline-offset: 1px; }
@media (max-width: 700px) {
    .hd-dns-fields .hd-dns-value { grid-column: auto; }
    .hd-dns-card { padding: 12px; }
}

/* ---- header menu (2026-09-17): the account email on top; items not built yet greyed out ---- */
.dropdown-menu .hd-menu-who {
    padding: 6px 12px 8px; margin-bottom: 4px;
    border-bottom: 1px solid rgba(238, 238, 238, 0.18);
    font-size: 10.5pt; color: rgba(238, 238, 238, 0.72); word-break: break-all; cursor: default;
}
.dropdown-menu li a.is-soon { opacity: 0.45; cursor: not-allowed; }

/* ---- left-pane reordering (2026-09-17): drag a page button by its dotted grip ---- */
#poc-left-pane .hd-navitem .descriptor-drag-grip { touch-action: none; }
#poc-left-pane .hd-navitem.is-dragging { position: relative; z-index: 5; opacity: 0.9; box-shadow: 0 6px 16px rgba(68, 70, 94, 0.35); }

/* ---- Gridtop on phones (2026-09-17): greyed out and inert on phone widths, and on phones held
   sideways (coarse pointer, short screen). Tablets keep it. ---- */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .hd-gridtop-link { pointer-events: none; }
    .hd-actlink.hd-gridtop-link { color: #a6a7b6; text-decoration: none; }
    .hd-shortcut.hd-gridtop-link { color: #a6a7b6; background: #f4f4f7; }
    .hd-shortcut.hd-gridtop-link img { filter: grayscale(1); opacity: 0.5; }
}

/* ---- app drawer off (2026-09-17): the drawer is the Gridtop's. dashboard.js stops the logo click
   that opens it; this keeps it hidden regardless. ---- */
.header-icon-drawer { display: none !important; }

/* ---- Gridtop service + 15-day trial (2026-09-21) -------------------------------------------
   The Gridtop row under Services: greyed while off, lit once on. The trial flow opens below the
   table in the same page. Left-aligned explicitly: the chrome centres text by default. */
.hd-svc-act { text-align: right; white-space: nowrap; width: 1%; }
.hd-svc-gridtop.is-off td:not(.hd-svc-act) { color: #a6a7b6; }
.hd-svc-gridtop.is-on td:first-child { box-shadow: inset 3px 0 0 var(--hd-accent); }
.hd-svc-act .hd-cta { flex: none; }

.hd-gt-flow {
    margin-top: 18px; padding: 22px 24px; text-align: left;
    background: #fff; border: 1px solid #e0e1e9; border-top: 3px solid var(--hd-olive); border-radius: 2px;
    max-width: 640px;
}
.hd-gt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hd-gt-title { margin: 0; font-size: 18pt; font-weight: 400; color: var(--hd-slate); }
.hd-gt-sub { margin: 6px 0 18px; color: #6d6e80; font-size: 12pt; }

.hd-gt-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.hd-gt-plan {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 16px 18px; border: 1px solid #e0e1e9; border-radius: 2px; background: #fafafc;
    font-family: inherit; color: var(--hd-slate); text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hd-gt-plan:hover { border-color: var(--hd-glow); }
.hd-gt-plan.is-selected {
    border-color: var(--hd-olive); background: #fff;
    box-shadow: 0 0 0 1px var(--hd-olive), 0 2px 10px rgba(170,163,72,0.22);
}
.hd-gt-price { font-size: 22pt; line-height: 1.1; }
.hd-gt-per { font-size: 11pt; color: #6d6e80; }

.hd-gt-pay { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.hd-gt-label { font-size: 11pt; color: #5a5b6c; }
.hd-gt-select {
    padding: 9px 10px; border: 1px solid rgba(68,70,94,0.3); border-radius: 2px; background: #fff;
    font-family: inherit; font-size: 12pt; color: var(--hd-slate);
}
.hd-gt-select:focus { outline: 2px solid var(--hd-link); outline-offset: 1px; }
.hd-gt-newcard { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.hd-gt-card-el { padding: 11px 10px; border: 1px solid rgba(68,70,94,0.3); border-radius: 2px; background: #fff; }
.hd-gt-newcard .hd-cta { align-self: flex-start; }

.hd-gt-terms { margin: 0 0 14px; font-size: 11pt; color: #6d6e80; }
/* Order review (2026-09-30) */
.hd-gt-review { margin: 0 0 14px; border-top: 1px solid #d8d9e0; border-bottom: 1px solid #d8d9e0; padding: 8px 0; }
.hd-gt-review-h { font-size: 10pt; letter-spacing: 1px; text-transform: uppercase; color: #6d6e80; margin: 0 0 6px; }
.hd-gt-review-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-size: 11pt; color: #44465E; }
.hd-gt-review-row span:last-child { text-align: right; }
.hd-gt-review-row.is-today { font-weight: 600; }
.hd-gt-actions { display: flex; gap: 10px; margin-bottom: 8px; }
.hd-gt-actions .hd-cta { flex: 0 0 auto; min-width: 180px; }

@media (max-width: 560px) {
    .hd-gt-plans { grid-template-columns: 1fr; }
    .hd-gt-flow { padding: 18px 16px; }
}

/* ---- self-serve cancel + arrival highlight (2026-09-21) ---- */
.hd-svc-act .hd-cx-btn { margin-left: 8px; }
.hd-cx-flow { border-top-color: var(--hd-slate); }
.hd-cx-detail { resize: vertical; min-height: 70px; font-family: inherit; }
.hd-svc-flash td { animation: hd-svc-flash 2.4s ease-out; }
@keyframes hd-svc-flash {
    0%, 35% { background-color: rgba(255, 236, 100, 0.55); }
    100%    { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .hd-svc-flash td { animation: none; background-color: rgba(255, 236, 100, 0.4); }
}

/* Gridtop promo code field (2026-09-21) */
.hd-gt-promo { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; max-width: 280px; }

/* ---- Security view: change password + two-factor (2026-09-23) ----------------
   Adapted from the Gridtop Settings app's 2FA panel (poc-2fa-* in desktop_poc.css):
   same proportions and interaction shape — slider-as-switch, QR plate, manual key,
   6-digit confirm, one-time backup chips, password-gated disable — restated in the
   Dashboard's palette (vars above), Afacad/JetBrains type, and #fff card idiom. */
.hd-pass-row { display: flex; gap: 14px; max-width: 900px; margin-bottom: 18px; }
.hd-pass-row .hd-cta { flex: 0 1 240px; }
.hd-pass-rules {
    grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 6px 16px; font-size: 13px; color: #9a9bac;
}
.hd-pass-rules li::before { content: '—'; margin-right: 8px; color: #cfd0da; }
.hd-pass-rules li.is-met { color: var(--hd-ok); }
.hd-pass-rules li.is-met::before { content: '✓'; color: var(--hd-ok); font-weight: 700; }
.hd-pass-actions { grid-column: 1 / -1; display: flex; gap: 14px; }
.hd-pass-actions .hd-cta { flex: 0 1 240px; }

.hd-2fa-card { background: #fff; border: 1px solid #e0e1e9; border-radius: 2px; padding: 18px 20px; max-width: 620px; }
.hd-2fa-row { display: flex; align-items: center; gap: 12px; }
.hd-2fa-status { flex: 1; font-size: 13px; color: var(--hd-slate); opacity: 0.7; }
.hd-2fa-status.is-on { opacity: 1; color: #5a6b1f; font-weight: 600; }
.hd-2fa-hint { margin: 6px 0 0; font-size: 13px; color: #6d6e80; }
.hd-2fa-btn {
    display: inline-block; padding: 9px 18px; border-radius: 2px; border: none;
    background-color: var(--hd-slate); color: var(--hd-link);
    font-family: inherit; font-size: 12pt; font-weight: 400;
    transition: color 0.3s ease, background-color 0.3s ease;
}
.hd-2fa-btn:hover:not(:disabled) { color: var(--hd-accent); }
.hd-2fa-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hd-2fa-btn.is-danger { background-color: var(--hd-danger); color: #fff; }
.hd-2fa-btn.is-danger:hover:not(:disabled) { color: var(--hd-accent); }
.hd-2fa-cancel {
    appearance: none; background: none; border: none; padding: 2px;
    font-family: inherit; font-size: 13px; color: var(--hd-slate); opacity: 0.7;
    text-decoration: underline; cursor: pointer;
}
.hd-2fa-cancel:hover { opacity: 1; color: var(--hd-olive); }
.hd-2fa-level, .hd-2fa-setup, .hd-2fa-backups, .hd-2fa-disableform {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid #eceded;
}
.hd-2fa-label { font-size: 14px; color: #5a5b6c; }
.hd-2fa-level b { color: #5a6b1f; font-weight: 700; }
.hd-2fa-track { padding: 9px 2px 2px; }
.hd-2fa-slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
    background: #A99FFC; outline: none; border-radius: 2px; margin: 0; cursor: ew-resize;
}
.hd-2fa-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 18px; background: var(--hd-slate); border-radius: 2px;
    cursor: ew-resize; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.35);
}
.hd-2fa-slider::-moz-range-thumb {
    width: 14px; height: 18px; background: var(--hd-slate); border: none;
    border-radius: 2px; cursor: ew-resize;
}
.hd-2fa-ticks {
    display: flex; justify-content: space-between; margin-top: 5px;
    font-size: 9px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--hd-slate);
}
.hd-2fa-ticks span { opacity: 0.5; cursor: pointer; transition: opacity 0.12s ease, color 0.12s ease; }
.hd-2fa-ticks span:hover { opacity: 0.85; }
.hd-2fa-ticks span.is-active { opacity: 1; color: #5a6b1f; font-weight: 700; }
/* Off state, straight from the Gridtop (poc-2fa-level.is-2fa-off): the thumb, the
   level name and the active tick all go red while 2FA is disabled. */
.hd-2fa-level.is-2fa-off .hd-2fa-label b,
.hd-2fa-level.is-2fa-off .hd-2fa-ticks span.is-active { color: #C0392B; }
.hd-2fa-level.is-2fa-off .hd-2fa-slider::-webkit-slider-thumb { background: #C0392B; }
.hd-2fa-level.is-2fa-off .hd-2fa-slider::-moz-range-thumb { background: #C0392B; }
.hd-2fa-qr {
    width: 168px; margin: 0 auto 12px; padding: 8px; box-sizing: content-box;
    background: var(--hd-paper); border: 1px solid #cfd0da; text-align: center;
    font-size: 11px; color: #6d6e80;
}
.hd-2fa-qr img, .hd-2fa-qr canvas, .hd-2fa-qr table { display: block; margin: 0 auto; }
.hd-2fa-secretwrap { text-align: center; margin-bottom: 12px; }
.hd-2fa-secret {
    display: inline-block; margin-top: 4px; padding: 4px 8px;
    font-size: 13px; letter-spacing: 2px; color: var(--hd-ink);
    background: #DAD6EC; border-radius: 2px; word-break: break-all;
    user-select: all; -webkit-user-select: all;
}
.hd-2fa-field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.hd-2fa-field input {
    padding: 10px 12px; border: 1px solid #cfd0da; border-radius: 2px;
    font-family: 'JetBrains Mono', monospace; font-size: 14.5px; color: #2f3042; max-width: 220px;
}
.hd-2fa-field input:focus { outline: 2px solid var(--hd-glow); outline-offset: 1px; }
.hd-2fa-code { letter-spacing: 4px; }
.hd-2fa-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.hd-2fa-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.hd-2fa-code-chip {
    font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 1px; text-align: center;
    padding: 6px 4px; color: var(--hd-ink); background: #DAD6EC; border-radius: 2px;
    user-select: all; -webkit-user-select: all;
}
.hd-2fa-msg { display: block; min-height: 18px; margin-top: 10px; font-size: 13px; color: #6d6e80; }
.hd-2fa-msg.is-error { color: var(--hd-danger); }
.hd-2fa-msg.is-ok { color: var(--hd-ok); }

/* ---- Information cards (Overview, right column) ------------------------------------------ */
#hd-info { margin-bottom: 8px; }
.hd-info-card {
    background: #fff; border: 1px solid #e0e1e9; border-radius: 2px;
    padding: 12px 14px 7px; margin-bottom: 10px;
}
.hd-info-card-h {
    display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--hd-slate); margin: 0 0 4px;
}
.hd-info-list { margin: 0; }
.hd-info-list > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    padding: 4px 0; border-top: 1px solid #ececf2; font-size: 13.5px;
}
.hd-info-list > div:first-child { border-top: 0; }
.hd-info-list dt { color: #5a5b6c; flex: none; }
.hd-info-list dd { margin: 0; color: #2f3042; text-align: right; word-break: break-all; }
.hd-side-print { margin: 6px 0; font-size: 12.5px; color: #8b8c9e; }
.hd-side-print a { color: var(--hd-link); }

/* ---- Overview action row: links and buttons equalized, wrap 3/3 -> 2/2 ------------------- */
#hd-cta-row > .hd-cta { flex: 1 1 30%; min-width: 168px; text-align: center; }
.hd-cta-row-left { justify-content: flex-start; }

/* ---- Services: expandable product details ------------------------------------------------ */
.hd-svc-arrow {
    display: inline-block; width: 19px; height: 19px; padding: 0; margin-right: 7px;
    border: 1px solid #cfd0da; border-radius: 2px; background: #fff; color: var(--hd-slate);
    font-size: 10px; line-height: 17px; text-align: center; cursor: pointer;
    vertical-align: middle; transition: transform .15s ease, background-color .15s ease;
}
.hd-svc-arrow::before { content: '\25B8'; }
.hd-svc-arrow.is-open { transform: rotate(90deg); background: #f0f0f6; }
.hd-svc-detail > td { background: #f7f7fa; border-top: 1px dashed #e0e1e9; }
.hd-svc-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2px 34px; margin: 0; padding: 10px 8px;
}
.hd-svc-facts > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-size: 14px; padding: 3.5px 0;
}
.hd-svc-facts dt { color: #5a5b6c; flex: none; }
.hd-svc-facts dd { margin: 0; display: flex; align-items: center; gap: 8px; color: #2f3042; }

/* ---- Support: ticket form ----------------------------------------------------------------- */
.hd-form textarea {
    padding: 10px 12px; border: 1px solid #cfd0da; border-radius: 2px;
    font-family: 'JetBrains Mono', monospace; font-size: 14.5px; color: #2f3042;
    resize: vertical; background: #fff;
}
.hd-form-wide { grid-column: 1 / -1; }

/* ---- VU meters: pixel-for-pixel port of the Gridtop's descriptor-pane meters ----------------
   Values lifted verbatim from desktop_poc.css (fisher-panel / display-window / meter-*),
   recolored #AAA348 labels and #FFEC64 needle. Width caps at 344px, the glass width measured
   off the Gridtop's own pane. */
.hd-vu-row { display: flex; flex-wrap: nowrap; gap: 14px; margin: 8px 0 26px; }
.hd-vu-panel {
    flex: 1 1 0; min-width: 172px; max-width: 344px; padding: 0;
    background: linear-gradient(180deg, #AAA348 0%, #44465E 5%, #44465E 95%, #44465E 100%);
    border-radius: 0px;
}
.hd-vu-window {
    background: #FFFFFF;
    padding: 2.907% 2.907% 0;
    border-radius: 0px;
    box-shadow: inset 0 0 22px 4px rgba(68,70,94,0.28);
    position: relative;
    overflow: hidden;
}
.hd-vu-window::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 100%);
    pointer-events: none; z-index: 10;
}
.hd-vu-svg { width: 100%; height: auto; display: block; overflow: visible;
             filter: drop-shadow(0 0 3px #59538F); margin-bottom: -1.418%; }
.hd-vu-title { fill: #59538F; font-family: 'Afacad', sans-serif; font-size: 12px;
               letter-spacing: 4px; opacity: 0.8; }
.hd-vu-text { fill: #59538F; font-family: 'Afacad', sans-serif; letter-spacing: 1px; }
.hd-vu-text-big { font-size: 13px; }
.hd-vu-text-sml { font-size: 11px; }
.hd-vu-scale { stroke: #59538F; stroke-width: 2; fill: none; }
.hd-vu-scale-sml { opacity: 0.5; stroke-width: 1; }
.hd-vu-tick { stroke: #59538F; stroke-width: 1.5; stroke-linecap: round; }
.hd-vu-tick-thick { stroke: #59538F; stroke-width: 2; stroke-linecap: round; }
.hd-vu-tick-sml { opacity: 0.5; }
.hd-vu-sub { fill: #59538F; font-family: 'Afacad', sans-serif; font-size: 10px;
             letter-spacing: 2px; opacity: 0.5; }
.hd-vu-needle { stroke: #7C74C2; stroke-width: 2.5; stroke-linecap: round;
                filter: drop-shadow(0 0 6px #7C74C2); }

/* Below the two-half-minimum width (2 x 172 + 14 gap = 358px) the meters do not render. */
@container (max-width: 357px) { .hd-vu-row { display: none; } }

/* ---- Domains page: registration + subdomain management ------------------------------------ */
.hd-reg-searchrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hd-reg-input {
    flex: 1 1 220px; padding: 9px 12px; border: 1px solid #cfd0da; border-radius: 2px;
    font-family: 'JetBrains Mono', monospace; font-size: 14px; color: #2f3042;
}
.hd-reg-sort { flex: 0 0 auto; padding: 8px 10px; border: 1px solid #cfd0da; border-radius: 2px;
               background: #fff; font-family: inherit; font-size: 13.5px; color: #2f3042; }
.hd-reg-results { margin-top: 12px; }
.hd-reg-row {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 8px 4px; border-bottom: 1px solid #ececf2; font-size: 14px;
}
.hd-reg-name { min-width: 0; word-break: break-all; color: #2f3042; }
a.hd-reg-name { color: var(--hd-link); }
.hd-reg-av { margin-left: auto; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.hd-reg-row.is-avail .hd-reg-av { color: var(--hd-ok); }
.hd-reg-price { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #5a5b6c; }
.hd-reg-whois { padding: 6px 4px 10px; border-bottom: 1px solid #ececf2; }
.hd-reg-wline { display: inline-block; margin-right: 18px; font-size: 12.5px; color: #5a5b6c; }
.hd-reg-fmenu {
    position: fixed; z-index: 400; background: #fff; border: 1px solid #cfd0da; border-radius: 2px;
    box-shadow: 0 6px 22px rgba(47,48,66,0.18); padding: 12px 14px; width: 250px; max-height: 320px; overflow-y: auto;
}
.hd-reg-fmenu label { display: block; font-size: 13px; color: #2f3042; padding: 3px 0; }
.hd-sublist { list-style: none; margin: 4px 0 0; padding: 0; }
.hd-sublist li { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                 padding: 5px 0; border-bottom: 1px solid #ececf2; font-size: 13.5px; }

/* ---- Small views: stack wide structures, tools beneath their domains ---------------------- */
@media (max-width: 820px) {
    .hd-gt-pay { flex-wrap: wrap; }
    .hd-gt-select { max-width: 100%; }
    .hd-gt-flow { max-width: 100%; }
    .hd-domrow { flex-wrap: wrap; }
    .hd-domtools { margin-left: 0; flex: 1 1 100%; justify-content: flex-start;
                   padding-left: 26px; padding-top: 4px; }
    .hd-reg-row { flex-wrap: wrap; }
    .hd-reg-av { margin-left: 0; flex: 1; text-align: left; }
    .hd-table { min-width: 0; }
    .hd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Support: refined ticket form (Security-page pattern) ---------------------------------- */
.hd-form select {
    padding: 10px 12px; border: 1px solid #cfd0da; border-radius: 2px;
    font-family: 'JetBrains Mono', monospace; font-size: 14.5px; color: #2f3042; background: #fff;
}
.hd-rep .hd-form-lbl { display: block; font-size: 15px; color: #5a5b6c; margin-bottom: 6px; }
.hd-rep-row { display: flex; gap: 8px; margin-bottom: 6px; }
.hd-rep-row input {
    flex: 1 1 auto; padding: 10px 12px; border: 1px solid #cfd0da; border-radius: 2px;
    font-family: 'JetBrains Mono', monospace; font-size: 14.5px; color: #2f3042; background: #fff;
}
.hd-rep-add {
    background: none; border: none; padding: 0; color: var(--hd-link);
    font-family: inherit; font-size: 13px; cursor: pointer;
}
.hd-rep-add:hover { text-decoration: underline; }
.hd-ticket-actions { display: flex; gap: 8px; }
.hd-ticket-actions .hd-cta { flex: 0 1 240px; }

/* ---- Support hero: the main site's Tampa artwork, ported verbatim --------------------------
   Values lifted from autocomputing.host.css (.oalco-content-wrapper / .support-flex-container /
   .support-map / .support-text / .gold-text): 900px section width, column-to-row at 768px,
   gaps 30/50, map capped 250px, clamped type, number #AAA348 with the shared gold hover. */
.hd-support-hero {
    display: flex; flex-direction: column; align-items: center; gap: 30px;
    width: 100%; max-width: 900px;
    background: #fff; border: 1px solid #e0e1e9; border-top: 3px solid var(--hd-olive);
    border-radius: 2px; padding: 26px 28px; margin: 0 0 26px;
}
.hd-support-map { width: 100%; }
.hd-support-map img { width: 100%; max-width: 250px; height: auto; display: block; margin: 0 auto; }
.hd-support-text { text-align: left; width: 100%; }
.hd-support-h { font-size: clamp(18pt, 2.5vw, 24pt); font-weight: 400; margin: 0 0 20px;
                font-family: 'Afacad', sans-serif; color: var(--hd-slate); }
.hd-support-text p { font-size: clamp(14pt, 1.5vw, 18pt); line-height: 1.6; margin: 0 0 20px;
                     color: #6d6e80; }
.hd-support-phone {
    display: block; font-family: 'Afacad', sans-serif; font-size: 16pt; font-weight: 500;
    line-height: 1.6; margin-bottom: 10px; color: #AAA348; text-decoration: none;
    cursor: url('shell/sprites/cursor_phone.ico'), auto;
    transition: color 0.3s ease, opacity 0.2s ease;
}
.hd-support-phone:hover { color: #44465E; }
@media (min-width: 768px) {
    .hd-support-hero { flex-direction: row; align-items: center; gap: 50px; }
    .hd-support-map img { margin: 0; }
}

/* ---- Tables stack by their own width --------------------------------------------------------
   The wrap is the container; under 720px of real table room a row becomes a card. This fires
   at intermediary page widths too, wherever the table actually lives. */
.hd-table-wrap { overflow-x: auto; container-type: inline-size; }
@container (max-width: 720px) {
    .hd-table-wrap thead { display: none; }
    .hd-table, .hd-table tbody, .hd-table tr, .hd-table td { display: block; width: 100%; }
    .hd-table tr {
        background: #fff; border: 1px solid #e0e1e9; border-radius: 2px;
        padding: 10px 12px 12px; margin-bottom: 10px;
    }
    .hd-table td { border: 0; padding: 4px 2px; min-width: 0; }
    .hd-table td .hd-cta, .hd-table td .hd-cta-sm, .hd-dns-actions .hd-cta-sm {
        display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
        font-size: 12.5pt; flex: none;
    }
}

/* ---- Mobile: publication-grade stacked rows ------------------------------------------------ */
@media (max-width: 820px) {
}

/* Billing (2026-09-25): plans, cards, payment history. The tables stack on narrow screens like
   every other .hd-table; the card actions wrap rather than overflow. */
.hd-bill-h { margin-top: 30px; }
.hd-bill-table td { vertical-align: middle; }
.hd-bill-bad, .hd-table td.hd-bill-bad { color: var(--hd-danger); font-weight: 600; }
.hd-bill-table tr.is-bad td { background: #fdf4f4; }
.hd-bill-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.hd-bill-default { font-size: 11pt; color: #2e7d32; font-weight: 600; padding: 0 6px; }
.hd-bill-add { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 14px 0 0; }
.hd-bill-newcard { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 10px; }
.hd-bill-newcard-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@container (max-width: 560px) {
    .hd-bill-acts { justify-content: flex-start; }
}
.hd-bill-pass { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* The account line fades to the cPanel username on hover (2026-10-12, Matt). Both sit in one grid cell, so the line keeps
   the size of the longer one and nothing moves. */
body.is-authed .dropdown-menu li.hd-menu-who[data-auth="in"] { display: grid; }   /* outranks desktop_poc.css display: block */
.dropdown-menu .hd-menu-who > span { grid-area: 1 / 1; transition: opacity .35s ease; }
.dropdown-menu .hd-menu-who #menuSN { opacity: 0; }
.dropdown-menu .hd-menu-who.has-sn:hover #menuWho { opacity: 0; }
.dropdown-menu .hd-menu-who.has-sn:hover #menuSN { opacity: 1; }
.hd-navitem .descriptor-mini-icon svg { width: 100%; height: 100%; display: block; }
/* The hamburger is a system menu: while open, its header rises above everything. */
header:has(.dropdown-container.open) { z-index: 2147483000; }
.dropdown-container.open .dropdown-menu { z-index: 2147483001; }
/* A phone number takes the phone cursor, on every site. */
a[href^="tel:"], a[href^="tel:"] * { cursor: url('shell/sprites/cursor_phone.ico'), auto !important; }

/* =====================================================================================================================
   REMODEL (p416, 2026-10-13, Matt). Appended last, so it outranks what is above without rewriting it.
   - The Autocomputing Light palette (developer/site_templates/_library/palettes.json): warm paper ground, slate headings,
     purple accent, olive and gold from the brand.
   - Every subpage takes the Overview's language: its two columns (1.15fr / 0.85fr, 22px), its silver card (.hd-prodcard's
     gradient, slate rim and shadow), its uppercase card heads (.hd-info-card-h) and its spacing.
   - Pages scroll in: their blocks rise into place one after another.
   - The left pane: silver plates over the .earth globe (index.html, dashboard.js wirePlates, globe.js).
   ===================================================================================================================== */
:root {
    --ac-bg: #F7F3F0; --ac-card: #FFFFFF; --ac-line: #DEDAE6; --ac-muted: #6A5A75; --ac-link: #5B54A6;
    --ac-accent: #7F78C5; --ac-lilac: #A99FFC; --ac-olive: #AAA348; --ac-gold: #FFEC64; --ac-ink: #1D070E; --ac-slate: #44465E;
    --ac-silver: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(240,240,240,0.95) 40%, rgba(220,220,220,0.95) 100%);
    --ac-rim: rgba(68, 70, 94, 0.4);
    --ac-shadow: 2px 2px 10px rgba(30, 32, 44, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.8);
    --ac-gap: 22px;
}

/* ---- ground ---- */
.hd-main { background-color: var(--ac-bg); --hd-grid-alpha: 0.05; text-align: left; }
.hd-title { margin: 0 0 var(--ac-gap); color: var(--ac-slate); }
.hd-lead { color: var(--ac-muted); font-size: 12.5pt; margin: -8px 0 var(--ac-gap); }
.hd-shortcuts-h { color: var(--ac-slate); margin: 0 0 12px; }
.hd-col-main > .hd-shortcuts-h:not(:first-child), .hd-col-side > .hd-shortcuts-h:not(:first-child), .hd-bill-h { margin-top: 26px; }
.hd-side-print { color: var(--ac-muted); }

/* ---- the Overview's two columns, on every page ---- */
.hd-cols {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--ac-gap); align-items: start;
}
.hd-col-main, .hd-col-side { min-width: 0; display: flex; flex-direction: column; }
.hd-cols.is-dns { grid-template-columns: minmax(0, 1fr); }
.hd-cols.is-dns > .hd-col-side { display: none; }
@media (max-width: 1100px) { .hd-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---- silver panels: the Overview's product card, everywhere ---- */
.hd-dns-card, .hd-panel-table, .hd-facts, .hd-form, .hd-2fa-card, .hd-gt-flow, .hd-support-hero, .hd-ticket, .hd-msg {
    background: var(--ac-silver);
    border: 1px solid var(--ac-rim);
    box-shadow: var(--ac-shadow);
    border-radius: 2px;
}
.hd-dns-card, .hd-2fa-card { padding: 20px 22px; margin: 0 0 var(--ac-gap); max-width: none; }
.hd-facts { max-width: none; padding: 6px 22px; margin: 0 0 var(--ac-gap); }
.hd-facts > div { border-bottom-color: rgba(68, 70, 94, 0.14); }
.hd-facts dt { color: var(--ac-muted); }
.hd-gt-flow { border-top: 3px solid var(--ac-olive); padding: 22px 24px; }
.hd-cx-flow { border-top-color: var(--ac-slate); }
.hd-msg { padding: 11px 15px; }
.hd-msg.is-error { background: #fdf1f1; border-color: var(--hd-danger); }
.hd-info-card { background: var(--ac-silver); border: 1px solid var(--ac-rim); box-shadow: var(--ac-shadow); }
.hd-info-card + .hd-addactions { margin-top: 4px; }

/* card heads: the Overview's uppercase label, with a hairline under it */
.hd-dns-h, .hd-dns-card > .hd-dns-head > .hd-dns-h {
    font-family: 'Afacad', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ac-slate);
}
.hd-dns-card > .hd-dns-h { display: block; margin: 0 0 14px; padding-bottom: 9px; border-bottom: 1px solid rgba(68, 70, 94, 0.16); }
.hd-dns-card > .hd-dns-head { margin: 0 0 14px; padding-bottom: 9px; border-bottom: 1px solid rgba(68, 70, 94, 0.16); }
.hd-h-note { font-style: normal; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--ac-muted); margin-left: 6px; }
.hd-dns-note { color: var(--ac-muted); }
.hd-dns-title { color: var(--ac-slate); }

/* ---- tables in silver: a quiet head, hairline rows, a lilac wash on hover ---- */
.hd-panel-table { padding: 4px 6px; margin: 0 0 6px; }
.hd-panel-table .hd-table { background: transparent; }
.hd-table th {
    background: transparent; color: var(--ac-slate);
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    border-bottom: 1px solid rgba(68, 70, 94, 0.28);
}
.hd-table td { border-bottom: 1px solid rgba(68, 70, 94, 0.12); color: #2f3042; }
.hd-table tbody tr { transition: background-color .2s ease; }
.hd-table tbody tr:hover td { background: rgba(127, 120, 197, 0.07); }
.hd-empty-cell { color: var(--ac-muted); }
.hd-dom-sub td:first-child { padding-left: 34px; position: relative; }
.hd-dom-sub td:first-child::before {      /* a subdomain hangs off its zone */
    content: ''; position: absolute; left: 18px; top: 0; bottom: 50%; width: 9px;
    border-left: 1px solid rgba(68, 70, 94, 0.35); border-bottom: 1px solid rgba(68, 70, 94, 0.35);
}
.hd-dom-sub td { color: #4a4b5c; }
@container (max-width: 720px) {
    .hd-panel-table { background: none; border: 0; box-shadow: none; padding: 0; }
    .hd-table tr { background: var(--ac-silver); border: 1px solid var(--ac-rim); box-shadow: var(--ac-shadow); }
    .hd-dom-sub td:first-child { padding-left: 2px; }
    .hd-dom-sub td:first-child::before { display: none; }
}

/* ---- buttons: the slate plate stays; a danger ghost for removals ---- */
.hd-cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.hd-cta-ghost { background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(68, 70, 94, 0.35); }
.hd-cta-ghost:hover:not(:disabled) { background: rgba(127, 120, 197, 0.12); box-shadow: inset 0 0 0 1px var(--ac-accent); }
.hd-cta-danger:hover:not(:disabled) { color: var(--hd-danger); background: #fdf1f1; box-shadow: inset 0 0 0 1px var(--hd-danger); }
.hd-dns-actions .hd-cta-sm + .hd-cta-sm { margin-left: 6px; }
a.hd-cta-sm { display: inline-flex; align-items: center; justify-content: center; }

/* ---- fields: white wells in the silver, mono, a purple ring on focus ---- */
.hd-main input[type=text], .hd-main input[type=email], .hd-main input[type=tel], .hd-main input[type=password],
.hd-main input[type=search], .hd-main input[type=number], .hd-main select, .hd-main textarea {
    background: #fff; border: 1px solid rgba(68, 70, 94, 0.3); border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(29, 7, 14, 0.07);
    font-family: 'JetBrains Mono', monospace; font-size: 14px; color: #2f3042;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hd-main input:focus, .hd-main select:focus, .hd-main textarea:focus {
    outline: none; border-color: var(--ac-accent);
    box-shadow: inset 0 1px 2px rgba(29, 7, 14, 0.07), 0 0 0 3px rgba(127, 120, 197, 0.22);
}
.hd-main input[readonly] { background: rgba(255, 255, 255, 0.55); color: var(--ac-slate); }
.hd-main select {
    -webkit-appearance: none; appearance: none; padding-right: 30px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2344465E'/%3E%3C/svg%3E") no-repeat right 11px center;
}
.hd-main input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.hd-main input[type=checkbox] { accent-color: var(--ac-accent); }
.hd-main ::placeholder { color: #a3a0b0; }
.hd-form { padding: 20px 22px; max-width: none; text-align: left; }
.hd-form label, .hd-addfield, .hd-gt-label, .hd-2fa-label { color: var(--ac-muted); }
.hd-form label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.hd-form label > input, .hd-form label > select { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hd-form label.hd-check { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ac-slate); }
.hd-form-stack { display: flex; flex-direction: column; align-items: stretch; gap: 12px; background: none; border: 0; box-shadow: none; padding: 0; }
.hd-form-stack .hd-addactions { margin-top: 2px; }
.hd-reg-searchrow { flex-wrap: nowrap; }
.hd-reg-input { min-width: 0; }
.hd-reg-tools { display: flex; gap: 8px; margin-top: 10px; }
.hd-reg-tools .hd-reg-sort { flex: 1 1 auto; min-width: 0; font-size: 13px; }

/* ---- meters (Storage) ---- */
.hd-meter-wrap { max-width: none; }
.hd-meter-top { color: var(--ac-slate); font-size: 14px; }
.hd-meter {
    height: 12px; border-radius: 2px; background: #fff;
    box-shadow: inset 0 1px 3px rgba(29, 7, 14, 0.18); border: 1px solid rgba(68, 70, 94, 0.25);
}
.hd-meter-fill { border-radius: 0; background: linear-gradient(to bottom, #A99FFC, #7F78C5 60%, #59538F); }
.hd-meter-fill.is-high { background: linear-gradient(to bottom, #e06b6b, var(--hd-danger)); }
.hd-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 0; }
.hd-figs > div { padding: 10px 12px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(68, 70, 94, 0.18); border-radius: 2px; }
.hd-figs dt { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-muted); }
.hd-figs dd { margin: 4px 0 0; font-size: 16px; color: var(--ac-slate); }

/* ---- Security ---- */
.hd-2fa-status.is-on { color: #5a6b1f; }
.hd-pass-row { margin-bottom: var(--ac-gap); }

/* ---- Support: the hero stacks in the side column ---- */
.hd-support-hero { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; padding: 22px; margin: 0 0 26px; border-top: 3px solid var(--ac-olive); max-width: none; }
.hd-support-map img { max-width: 100%; margin: 0; }
.hd-support-h { font-size: 18pt; margin: 0 0 10px; }
.hd-support-text p { font-size: 13pt; margin: 0 0 12px; color: var(--ac-muted); }

/* ---- the ticket ------------------------------------------------------------------------------------------------- */
.hd-ticket { padding: 0 0 18px; overflow: hidden; display: flex; flex-direction: column; gap: 16px; }
.hd-ticket > *:not(.hd-ticket-band) { margin-left: 22px; margin-right: 22px; }
.hd-ticket-band {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 22px; background: var(--ac-slate);
    box-shadow: inset 0 -2px 0 var(--ac-olive);
}
.hd-ticket-band-h { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ac-gold); }
.hd-ticket-band-tel { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .06em; color: var(--ac-olive); text-decoration: none; transition: color .3s ease; }
.hd-ticket-band-tel:hover { color: var(--ac-gold); }
.hd-ticket-lbl {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-muted);
}
.hd-ticket-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hd-ticket-field input, .hd-ticket-field textarea { width: 100%; padding: 10px 12px; }
.hd-ticket-field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.hd-ticket-count { font-family: 'JetBrains Mono', monospace; font-weight: 400; letter-spacing: 0; text-transform: none; color: #9a97a8; }
.hd-ticket-cats { border: 0; padding: 0; min-width: 0; }
.hd-ticket-cats legend { padding: 0; margin-bottom: 8px; width: 100%; }
.hd-ticket-catsel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hd-ticket-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* the category plates: small silver plates, purple-edged when chosen (the left pane's language) */
.hd-chip {
    padding: 8px 14px; border-radius: 2px;
    background: linear-gradient(to bottom, #fff, #e3e4ea);
    border: 1px solid rgba(68, 70, 94, 0.3);
    box-shadow: 0 1px 2px rgba(29, 7, 14, 0.08), inset 0 1px 0 #fff;
    font-family: 'Afacad', sans-serif; font-size: 12pt; color: var(--ac-slate);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s cubic-bezier(.3, 1.12, .6, 1);
}
.hd-chip:hover { border-color: var(--ac-accent); transform: translateY(-1px); }
.hd-chip[aria-pressed="true"] {
    background: linear-gradient(to bottom, #F3F2FA, #D9D6EC); color: #2a2560;
    border-color: var(--ac-accent); box-shadow: inset 0 0 0 1px var(--ac-accent), 0 2px 8px rgba(127, 120, 197, 0.3);
}
.hd-ticket-from {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
    padding: 14px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(68, 70, 94, 0.16); border-radius: 2px;
}
.hd-ticket .hd-rep-row { margin: 0 0 6px; }
.hd-ticket .hd-rep-row input { padding: 10px 12px; }
.hd-ticket .hd-rep-add { align-self: flex-start; font-size: 12.5px; color: var(--ac-link); }
.hd-ticket-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.hd-ticket-foot .hd-cta { flex: 0 0 auto; min-width: 200px; }
.hd-ticket .hd-addmsg:empty { display: none; }
@media (max-width: 560px) { .hd-ticket-from { grid-template-columns: 1fr; } }

/* a switch: slate track and a gold knob when on */
.hd-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ac-slate); }
.hd-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hd-switch-track {
    position: relative; width: 36px; height: 18px; flex: 0 0 auto; border-radius: 2px;
    background: #c9cbd3; box-shadow: inset 0 1px 3px rgba(29, 7, 14, 0.25); transition: background-color .25s ease;
}
.hd-switch-track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 1px;
    background: linear-gradient(to bottom, #fff, #d8d9e0); box-shadow: 0 1px 2px rgba(29, 7, 14, 0.3);
    transition: transform .25s cubic-bezier(.3, 1.12, .6, 1), background .25s ease;
}
.hd-switch input:checked + .hd-switch-track { background: var(--ac-slate); }
.hd-switch input:checked + .hd-switch-track::after { transform: translateX(18px); background: linear-gradient(to bottom, #fff7b8, var(--ac-gold)); }
.hd-switch input:focus-visible + .hd-switch-track { box-shadow: 0 0 0 3px rgba(127, 120, 197, 0.35); }

/* ---- pages scroll in: each block rises into place, one after another ---- */
.hd-view.is-entering > *, .hd-view.is-entering .hd-cols > * > * { animation: hd-rise .55s cubic-bezier(.2, .8, .2, 1) both; }
.hd-view.is-entering > :nth-child(2), .hd-view.is-entering .hd-cols > * > :nth-child(1) { animation-delay: .05s; }
.hd-view.is-entering > :nth-child(3), .hd-view.is-entering .hd-cols > * > :nth-child(2) { animation-delay: .1s; }
.hd-view.is-entering > :nth-child(4), .hd-view.is-entering .hd-cols > * > :nth-child(3) { animation-delay: .15s; }
.hd-view.is-entering > :nth-child(n+5), .hd-view.is-entering .hd-cols > * > :nth-child(n+4) { animation-delay: .2s; }
.hd-view.is-entering .hd-cols > .hd-col-side > * { animation-delay: .12s; }
.hd-view.is-entering .hd-cols { animation: none; }
@keyframes hd-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hd-view.is-entering *, .hd-view.is-entering > * { animation: none !important; } }

/* =====================================================================================================================
   LEFT PANE: plates over the globe
   ===================================================================================================================== */
#poc-left-pane.hd-plates { position: relative; overflow: hidden; }
#hd-globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.hd-plate-defs { position: absolute; width: 0; height: 0; }
#poc-left-pane.hd-plates .poc-pane-content { position: relative; z-index: 1; gap: 7px; padding: 10px 0; }

#poc-left-pane .hd-plate {
    position: relative; z-index: 1; flex: 1 1 0; min-height: 46px; max-height: 110px;
    margin-right: 22px; padding: 0; display: block;
    text-decoration: none; color: #2b2c3a; background: none; border: 0; box-shadow: none; filter: none; opacity: 1;
    transform: translateX(-6px);
    transition: transform .32s cubic-bezier(.3, 1.12, .6, 1);
}
#poc-left-pane .hd-plate:hover { transform: translateX(4px); filter: none; }
#poc-left-pane .hd-plate.is-active { transform: translateX(10px); box-shadow: none; }
#poc-left-pane .hd-plate.is-dragging { box-shadow: none; opacity: 1; z-index: 2; }

.hd-plate-glass, .hd-plate-spot { position: absolute; top: 0; bottom: 0; left: -60px; right: 0; pointer-events: none; }
.hd-plate-glass { z-index: 0; -webkit-backdrop-filter: blur(5px) saturate(1.5); backdrop-filter: blur(5px) saturate(1.5); }
.hd-plate-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none;
    filter: drop-shadow(0 4px 7px rgba(29, 7, 14, .14)); transition: filter .25s ease; }
.hd-plate:hover .hd-plate-svg { filter: drop-shadow(0 6px 11px rgba(29, 7, 14, .2)); }
.hd-plate.is-active .hd-plate-svg { filter: drop-shadow(0 6px 12px rgba(78, 72, 132, .32)); }
.hd-plate-face { fill: url(#hdp-face); opacity: .9; transition: opacity .25s; }
.hd-plate:hover .hd-plate-face, .hd-plate.is-active .hd-plate-face, .hd-plate:focus-visible .hd-plate-face { opacity: 1; }
.hd-plate-face-on { fill: url(#hdp-face-on); opacity: 0; transition: opacity .25s; }
.hd-plate.is-active .hd-plate-face-on { opacity: 1; }
.hd-plate-gloss { fill: url(#hdp-gloss); }
.hd-plate-rim { fill: none; stroke: url(#hdp-rim); stroke-width: 1.4; transition: stroke-width .25s; }
.hd-plate:hover .hd-plate-rim { stroke-width: 2; }
.hd-plate.is-active .hd-plate-rim, .hd-plate:focus-visible .hd-plate-rim { stroke-width: 2.4; }
.hd-plate:focus-visible { outline: none; }
.hd-plate-light { transform-box: fill-box; transform: translateX(-100%); }
/* The chosen plate's light (p420, 2026-10-13, Matt): one way only, left to right, from out of frame to out of frame. The pass
   is 40% slower than the old 9s drift (15s), then it waits out of sight three times the old interval (27s): a 42s cycle. */
.hd-plate.is-active .hd-plate-light { animation: hdp-pass 42s ease-in-out infinite; opacity: .55; }
@keyframes hdp-pass {
    0%      { transform: translateX(-100%); }
    35.714% { transform: translateX(230%); }
    100%    { transform: translateX(230%); }
}
.hd-plate-spot {
    z-index: 0; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(350px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px), rgba(255, 255, 255, .45), transparent 80%);
}
.hd-plate:hover .hd-plate-spot { opacity: 1; }

/* the window the cargo rides in: the plate's box, clipping anything that travels out of it */
.hd-plate-body { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hd-plate-cargo { display: flex; align-items: center; gap: 14px; height: 100%; padding: 0 30px 0 16px; will-change: transform; }
.hd-plate-grip {
    width: 6px; align-self: stretch; margin: 14px 0; flex: 0 0 auto;
    background: radial-gradient(circle, rgba(68, 70, 94, .45) 1px, transparent 1.4px) 0 0 / 6px 6px;
    opacity: 0; transition: opacity .2s; touch-action: none;
    cursor: url('shell/sprites/cursor_move.ico') 12 12, move !important;
}
.hd-plate:hover .hd-plate-grip, .hd-plate.is-dragging .hd-plate-grip { opacity: 1; }
body.hd-plate-moving, body.hd-plate-moving * { cursor: url('shell/sprites/cursor_move.ico') 12 12, move !important; }
.hd-plate-icon {
    width: clamp(26px, 1.85vw, 34px); height: clamp(26px, 1.85vw, 34px); flex: 0 0 auto;
    transition: transform .32s cubic-bezier(.3, 1.12, .6, 1);
}
.hd-plate:hover .hd-plate-icon { transform: scale(1.08); }
.hd-plate-icon img, .hd-plate-icon svg { width: 100%; height: 100%; object-fit: contain; display: block; }
#poc-left-pane .hd-plate .hd-navlabel { min-width: 0; }
.hd-plate.is-active .hd-navlabel { color: #2a2560; }
#poc-left-pane .hd-plate.hd-navitem-op .hd-navlabel { color: #6a5b1f; }

@media (prefers-reduced-motion: reduce) {
    #poc-left-pane .hd-plate, .hd-plate-icon, .hd-plate-spot { transition: none; }
    .hd-plate-light { animation: none !important; }
}

/* phones: the pane is the strip of icons under the header, as before; no globe, no shapes */
@media (max-width: 820px) {
    #hd-globe, .hd-plate-glass, .hd-plate-svg, .hd-plate-spot { display: none; }
    #poc-left-pane.hd-plates .poc-pane-content { gap: 0; padding: 0; }
    #poc-left-pane .hd-plate, #poc-left-pane .hd-plate:hover, #poc-left-pane .hd-plate.is-active {
        transform: none; margin: 0; flex: 1 1 0; min-width: 0; height: 52px; min-height: 0; max-height: none;
        background-color: #b9bac4; border-right: 1px solid rgba(68, 70, 94, 0.3);
        box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.8), inset -3px -3px 6px rgba(0, 0, 0, 0.25);
    }
    #poc-left-pane .hd-plate.is-active {
        box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.8), inset -3px -3px 6px rgba(0, 0, 0, 0.25), inset 0 -4px 0 var(--hd-accent);
    }
    .hd-plate-cargo { justify-content: center; padding: 0; gap: 0; }
    .hd-plate-grip { display: none; }
    .hd-plate-icon { width: 28px; height: 28px; }
    .hd-main { padding: 20px 16px 30px; }
}

/* ---- alignment and tables (p416 fit) ---- */
.hd-view { text-align: left; }                          /* the borrowed chrome centres sections */
.hd-form-stack label:not(.hd-check) > input, .hd-form-stack label > select { width: 100%; }
.hd-form-stack .hd-addactions .hd-cta { flex: 0 0 auto; min-width: 120px; }
/* buttons inside table rows: a size down, so a row's tools never push the table wider than its column */
.hd-table td .hd-cta-sm { padding: 5px 12px; font-size: 11pt; }
/* A table only becomes cards when it is genuinely narrow (phones): in a column 460-720px wide it stays a table. */
@container (min-width: 461px) and (max-width: 720px) {
    .hd-table-wrap thead { display: table-header-group; }
    .hd-table { display: table; width: 100%; }
    .hd-table tbody { display: table-row-group; width: auto; }
    .hd-table tr { display: table-row; width: auto; background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
    .hd-table td { display: table-cell; width: auto; padding: 10px 10px; font-size: 11.5pt; border-bottom: 1px solid rgba(68, 70, 94, 0.12); }
    .hd-table th { padding: 10px 10px; }
    .hd-table td:first-child { overflow-wrap: anywhere; }
    .hd-panel-table { background: var(--ac-silver); border: 1px solid var(--ac-rim); box-shadow: var(--ac-shadow); padding: 4px 6px; }
    .hd-dom-sub td:first-child { padding-left: 30px; }
    .hd-dom-sub td:first-child::before { display: block; left: 15px; }
}

/* Your Tickets in the side column: each ticket a compact card (number and status on top, subject, then the date) */
@container (max-width: 460px) {
    #hd-tickets-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
    #hd-tickets-table td { padding: 2px; }
    #hd-tickets-table td:nth-child(1) { grid-column: 1; grid-row: 1; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ac-muted); }
    #hd-tickets-table td:nth-child(3) { grid-column: 2; grid-row: 1; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-slate); }
    #hd-tickets-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 12.5pt; color: #2f3042; }
    #hd-tickets-table td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; font-size: 11px; color: var(--ac-muted); }
    #hd-tickets-table td.hd-empty-cell { grid-column: 1 / -1; grid-row: 1; }
}

/* ---- Payment History documents (p417): Invoice / Receipt, each with a small download ---- */
.hd-bill-docs { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; }
.hd-bill-doc { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hd-bill-doc > a:first-child { color: var(--ac-link); text-decoration: none; }
.hd-bill-doc > a:first-child:hover { text-decoration: underline; }
.hd-dl {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border: 1px solid rgba(68, 70, 94, 0.3); border-radius: 2px; background: linear-gradient(to bottom, #fff, #e3e4ea);
    color: var(--ac-slate); transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.hd-dl svg { width: 12px; height: 12px; display: block; }
.hd-dl:hover { color: #2a2560; border-color: var(--ac-accent); background: linear-gradient(to bottom, #F3F2FA, #D9D6EC); }
@container (max-width: 460px) { .hd-bill-docs { justify-content: flex-start; } }

/* ---- Email page and SEO page (p418, 2026-10-13) ------------------------------------------------------------------ */
.hd-dns-card > .hd-dns-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hd-dns-card > .hd-dns-head > .hd-dns-h { flex: 1 1 auto; }
.hd-mail-domain { min-width: 0; max-width: 260px; padding: 6px 30px 6px 10px; font-size: 13px; }

.hd-mail-list, .hd-auth-list, .hd-seo-list { list-style: none; margin: 0 0 14px; padding: 0; }
.hd-mail-empty { color: var(--ac-muted); font-size: 13.5px; padding: 6px 0; }
.hd-mail-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
    padding: 9px 0; border-bottom: 1px solid rgba(68, 70, 94, 0.12);
}
.hd-mail-row:last-child { border-bottom: 0; }
.hd-mail-name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; color: #2f3042; font-size: 13.5px; }
.hd-mail-use { color: var(--ac-muted); font-size: 12.5px; }
.hd-mail-acts { display: flex; gap: 6px; margin-left: auto; }
.hd-mail-acts .hd-cta-sm { padding: 5px 12px; font-size: 11pt; }
.hd-mail-passform { flex: 1 1 100%; display: flex; gap: 6px; margin-top: 4px; }
.hd-mail-passform input { flex: 1 1 auto; min-width: 0; padding: 7px 10px; }
.hd-mail-passform .hd-cta-sm { padding: 5px 12px; font-size: 11pt; }

.hd-mail-add {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 12px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(68, 70, 94, 0.16); border-radius: 2px;
}
.hd-mail-add input, .hd-mail-add select { padding: 8px 10px; min-width: 0; }
.hd-mail-addr { display: flex; align-items: center; flex: 1 1 220px; min-width: 0; }
.hd-mail-addr input { flex: 1 1 auto; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.hd-mail-at {
    padding: 8px 10px; background: rgba(68, 70, 94, 0.08); border: 1px solid rgba(68, 70, 94, 0.3); border-left: 0;
    border-radius: 0 2px 2px 0; color: var(--ac-slate); font-size: 13px; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis;
}
.hd-mail-pass { display: flex; gap: 6px; flex: 1 1 220px; min-width: 0; }
.hd-mail-pass input { flex: 1 1 auto; }
.hd-mail-arrow { color: var(--ac-muted); }
#hd-fwd-dest { flex: 1 1 200px; }

.hd-auth-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(68, 70, 94, 0.12); }
.hd-auth-row:last-child { border-bottom: 0; }
.hd-auth-k { flex: 1 1 auto; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ac-slate); letter-spacing: .06em; }
.hd-auth-v { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.hd-auth-row.is-ok .hd-auth-v { color: var(--hd-ok); }
.hd-auth-row.is-missing .hd-auth-v { color: var(--hd-danger); }
.hd-auth-row .hd-cta-sm { padding: 4px 12px; font-size: 11pt; }

.hd-gmail-steps { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: #2f3042; }
.hd-gmail-steps code { font-size: 12px; background: rgba(68, 70, 94, 0.08); padding: 1px 5px; border-radius: 2px; }

/* SEO: a score readout over the checks, each a label, a one-word status, and the value it read */
.hd-seo-score { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 0 0 14px; }
.hd-seo-num { font-size: 26px; color: var(--ac-slate); min-width: 70px; }
.hd-seo-when { font-size: 11.5px; color: var(--ac-muted); }
.hd-seo-row {
    display: grid; grid-template-columns: 150px auto 1fr; align-items: baseline; gap: 4px 12px;
    padding: 8px 0 8px 12px; border-bottom: 1px solid rgba(68, 70, 94, 0.12); position: relative;
}
.hd-seo-row::before { content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: 14px; border-radius: 1px; background: #c4c5d0; }
.hd-seo-row.is-ok::before { background: var(--hd-ok); }
.hd-seo-row.is-warn::before { background: var(--ac-olive); }
.hd-seo-row.is-bad::before { background: var(--hd-danger); }
.hd-seo-k { font-size: 13.5px; color: var(--ac-slate); }
.hd-seo-v { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-slate); white-space: nowrap; }
.hd-seo-row.is-bad .hd-seo-v { color: var(--hd-danger); }
.hd-seo-d { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ac-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hd-seo-verify { display: flex; gap: 6px; }
.hd-seo-verify input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 12.5px; }
@media (max-width: 560px) {
    .hd-seo-row { grid-template-columns: 1fr auto; }
    .hd-seo-d { grid-column: 1 / -1; }
}

/* ---- cPanel functions (p419, 2026-10-13) ------------------------------------------------------------------------- */
.hd-mail-add + .hd-mail-add { margin-top: 8px; }
.hd-mail-at.hd-pre { order: -1; border-left: 1px solid rgba(68, 70, 94, 0.3); border-right: 0; border-radius: 2px 0 0 2px; max-width: 45%; }
.hd-mail-addr .hd-pre + input { border-radius: 0 2px 2px 0; }
.hd-mail-addr select.hd-ftp-domain { flex: 0 1 auto; max-width: 55%; border-left: 0; border-radius: 0 2px 2px 0; }
.hd-sub-h { display: block; margin: 4px 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-muted); }
.hd-locked {
    font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-muted);
    padding: 3px 8px; border: 1px dashed rgba(68, 70, 94, 0.3); border-radius: 2px;
}
.hd-state { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 2px 0; }
.hd-state.is-ok { color: var(--hd-ok); }
.hd-state.is-warn { color: #7a7640; }
.hd-state.is-bad { color: var(--hd-danger); }

.hd-spam-more { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0 4px; padding-left: 12px; border-left: 2px solid rgba(127, 120, 197, 0.35); }
#hd-spam .hd-switch { margin: 2px 0; }
#hd-spam select { align-self: flex-start; padding: 6px 30px 6px 10px; font-size: 13px; }
#hd-spam select:disabled { opacity: .5; }

.hd-cron-when { flex: 0 0 auto; color: var(--ac-slate); font-size: 12.5px; background: rgba(68, 70, 94, 0.08); padding: 2px 6px; border-radius: 2px; }
.hd-cron-cmd { flex: 1 1 200px; min-width: 0; font-size: 12.5px; color: #2f3042; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-cron-custom { display: flex; gap: 4px; }
.hd-cron-custom input { width: 58px; padding: 8px 6px; text-align: center; }
#hd-cron-cmd { flex: 1 1 260px; }
.hd-cron { margin-top: var(--ac-gap); }
#hd-deny-ip { flex: 1 1 220px; }
#hd-redir-path { flex: 0 1 140px; }
#hd-redir-dest { flex: 1 1 200px; }
.hd-mail-add select { padding: 8px 30px 8px 10px; }

/* ---- SEO suite (p421, 2026-10-13) --------------------------------------------------------------------------------- */
.seo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: -6px 0 var(--ac-gap); }
.seo-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid rgba(68, 70, 94, 0.2); flex: 1 1 auto; }
.seo-tabs button {
    background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 12px;
    font-family: 'Afacad', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-muted);
    transition: color .2s ease, border-color .2s ease;
}
.seo-tabs button:hover { color: var(--ac-slate); }
.seo-tabs button.is-on { color: var(--ac-slate); border-bottom-color: var(--ac-olive); }
.seo-panel[hidden] { display: none !important; }

.seo-hist-svg { width: 100%; height: 120px; display: block; }
.seo-legend { display: flex; gap: 16px; font-size: 11px; color: var(--ac-muted); margin-top: 6px; }
.seo-legend span::before { content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; }
.seo-legend .is-check::before { background: #7F78C5; }
.seo-legend .is-audit::before { background: #AAA348; }

/* the Gridtop's loading bar: gold over olive, square */
.seo-progress { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin: 4px 0 14px; }
.seo-progress-bar { height: 10px; background: #AAA348; box-shadow: inset 0 1px 2px rgba(29, 7, 14, 0.25); }
.seo-progress-fill { height: 100%; width: 0; background: #FFEC64; transition: width .4s ease; }
.seo-progress-text { font-size: 11px; letter-spacing: .1em; color: var(--ac-slate); }
.seo-audit-top { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; }
.seo-audit-facts { font-size: 12.5px; color: var(--ac-muted); }
.seo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.seo-chip { font-size: 11pt; padding: 5px 10px; }
.seo-chip.is-bad { border-left: 3px solid var(--hd-danger); }
.seo-chip.is-warn { border-left: 3px solid var(--ac-olive); }
.seo-chip.is-info { border-left: 3px solid #c4c5d0; }

.seo-issues, .seo-pages, .seo-bots, .seo-checklist { list-style: none; margin: 0; padding: 0; }
.seo-issue {
    display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 2px 12px; padding: 7px 0 7px 12px;
    border-bottom: 1px solid rgba(68, 70, 94, 0.12); position: relative; font-size: 13px;
}
.seo-issue::before { content: ''; position: absolute; left: 0; top: 9px; width: 4px; height: 14px; border-radius: 1px; background: #c4c5d0; }
.seo-issue.is-bad::before { background: var(--hd-danger); }
.seo-issue.is-warn::before { background: var(--ac-olive); }
.seo-issue-k { color: var(--ac-slate); }
.seo-issue-u, .seo-page-u { color: var(--ac-link); text-decoration: none; overflow-wrap: anywhere; font-size: 12.5px; }
.seo-issue-u:hover, .seo-page-u:hover { text-decoration: underline; }
.seo-issue-d { grid-column: 2; font-size: 11.5px; color: var(--ac-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seo-page { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid rgba(68, 70, 94, 0.12); }
.seo-page:last-child, .seo-issue:last-child { border-bottom: 0; }
.seo-page-t { font-size: 13px; color: #2f3042; }
.seo-page-m { font-size: 11.5px; color: var(--ac-muted); }
.seo-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.seo-flag { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; padding: 1px 5px; border: 1px solid rgba(68, 70, 94, 0.25); border-radius: 2px; color: #a3a0b0; }
.seo-flag.is-on { color: #fff; background: var(--ac-accent); border-color: var(--ac-accent); }

.seo-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.seo-form .hd-ticket-field:has(textarea) { grid-column: 1 / -1; }
.seo-form input:not([type=checkbox]), .seo-form textarea, .seo-form select { width: 100%; padding: 9px 11px; }
.seo-form textarea, .seo-faq-row textarea { resize: vertical; line-height: 1.5; min-height: 0; }
.seo-meter { font-weight: 400; letter-spacing: 0; text-transform: none; }
.seo-meter.is-ok { color: var(--hd-ok); }
.seo-meter.is-short, .seo-meter.is-none { color: #9a97a8; }
.seo-meter.is-long { color: var(--hd-danger); }
.seo-robots-row { grid-column: 1 / -1; display: flex; gap: 22px; flex-wrap: wrap; }
.seo-chiprow { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.seo-chiprow .hd-cta { align-self: flex-start; }
.seo-faq-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 0; border-bottom: 1px solid rgba(68, 70, 94, 0.12); }
.seo-faq-row input, .seo-faq-row textarea { width: 100%; padding: 8px 10px; }
.seo-faq-row textarea { grid-column: 1; }
.seo-faq-row .hd-cta { grid-row: 1; grid-column: 2; padding: 5px 12px; font-size: 11pt; }
#seo-faq + .hd-cta { margin-top: 10px; }

/* previews: a search result, and a share card */
.seo-serp { padding: 12px 14px; background: #fff; border: 1px solid rgba(68, 70, 94, 0.16); border-radius: 2px; font-family: Arial, sans-serif; margin-bottom: 12px; }
.seo-serp-url { font-size: 12px; color: #202124; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seo-serp-title { font-size: 18px; color: #1a0dab; line-height: 1.3; margin-bottom: 3px; }
.seo-serp-desc { font-size: 13px; color: #4d5156; line-height: 1.45; }
.seo-social { border: 1px solid rgba(68, 70, 94, 0.2); border-radius: 2px; background: #fff; overflow: hidden; font-family: Arial, sans-serif; }
.seo-social-img { aspect-ratio: 1200 / 630; background: linear-gradient(135deg, #dcdce6, #c0c3cf) center / cover no-repeat; }
.seo-social-host { font-size: 11px; color: #65676b; padding: 8px 10px 0; letter-spacing: .03em; }
.seo-social-title { font-size: 15px; font-weight: 700; color: #050505; padding: 2px 10px; }
.seo-social-desc { font-size: 13px; color: #65676b; padding: 0 10px 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seo-checklist li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; color: #2f3042; }
.seo-checklist li.is-no { color: var(--ac-muted); }
.seo-dot { width: 16px; text-align: center; font-weight: 700; }
.seo-checklist li.is-ok .seo-dot { color: var(--hd-ok); }
.seo-publish { flex-wrap: wrap; }
.seo-block { margin: 12px 0 0; max-height: 260px; overflow: auto; padding: 10px; background: #2b2c3b; color: #e8e6f5; font-size: 11px; line-height: 1.5; border-radius: 2px; white-space: pre-wrap; word-break: break-all; }

.seo-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(68, 70, 94, 0.12); }
.seo-bot-name { font-size: 13px; color: var(--ac-slate); }
.seo-bot-who { font-size: 12px; color: var(--ac-muted); text-align: right; }
.seo-hard { margin: 14px 0 12px; }
.seo-robots { width: 100%; font-size: 12.5px; line-height: 1.5; padding: 10px; resize: vertical; }

.seo-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.seo-tiles .hd-side-print { grid-column: 1 / -1; }
.seo-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(68, 70, 94, 0.18); border-top: 3px solid #c4c5d0; border-radius: 2px; }
.seo-tile.is-ok { border-top-color: var(--hd-ok); }
.seo-tile.is-warn { border-top-color: var(--ac-olive); }
.seo-tile.is-bad { border-top-color: var(--hd-danger); }
.seo-tile-v { font-size: 28px; color: var(--ac-slate); }
.seo-tile-k { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-muted); }
.seo-metrics { margin: 0; }
.seo-metrics > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(68, 70, 94, 0.12); font-size: 13px; }
.seo-metrics dt { color: var(--ac-muted); }
.seo-metrics dd { margin: 0; color: var(--ac-slate); }
#seo-speed-path, #seo-cmp-url, #seo-kw { flex: 1 1 200px; }

.seo-cmp { width: 100%; border-collapse: collapse; margin-top: 12px; }
.seo-cmp th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-slate); padding: 8px; border-bottom: 1px solid rgba(68, 70, 94, 0.28); }
.seo-cmp td { padding: 7px 8px; font-size: 13px; border-bottom: 1px solid rgba(68, 70, 94, 0.12); color: #2f3042; }
.seo-cmp td.is-ok { color: var(--hd-ok); }
.seo-cmp td.is-warn { color: #7a7640; }
.seo-cmp td.is-bad { color: var(--hd-danger); }

@media (max-width: 700px) {
    .seo-form { grid-template-columns: 1fr; }
    .seo-tiles { grid-template-columns: 1fr 1fr; }
    .seo-issue { grid-template-columns: 1fr; }
    .seo-issue-d { grid-column: 1; }
}

/* ---- SEO > Bing and Automation (p422) ----------------------------------------------------------------------------- */
.seo-rank td:nth-child(n+2) { white-space: nowrap; }
.seo-move { font-size: 11px; margin-left: 4px; }
.seo-move.is-up { color: var(--hd-ok); }
.seo-move.is-down { color: var(--hd-danger); }
.seo-linkers { list-style: none; margin: 6px 0 0; padding: 6px 0 0 10px; border-left: 2px solid rgba(127, 120, 197, 0.35); }
.seo-linkers li { font-size: 11.5px; color: #4a4b5c; padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#seo-bing-key, #seo-bkw { flex: 1 1 220px; }
.seo-autos { list-style: none; margin: 0 0 16px; padding: 0; }
.seo-autos li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid rgba(68, 70, 94, 0.12); }
.seo-auto-n { font-size: 12px; color: var(--ac-muted); }
.seo-auto-email { max-width: 360px; }
.seo-auto-email input { width: 100%; padding: 9px 11px; }

/* p424 held the header at 72px (the Gridtop's); reverted in p425: the dashboard's header is the main site's, 66px. */

/* ---- the header is the main site's (p425, 2026-10-13, Matt: "Derive the header from the main site") ------------------
   Same markup as autocomputing.host's header: its logo, the "Autocomputing" link, the glyph drawer behind the logo (a click
   on the logo opens it; a click on a glyph opens its card), and "Call Support". The drawer was switched off here before. */
body.hd-body .header-icon-drawer { display: flex !important; }

/* ---- Send Documents for Signing: the editor (p426, 2026-10-13) ------------------------------------------------------ */
body.sg-open { overflow: hidden; }
.sg-editor { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: var(--ac-bg); }
.sg-editor[hidden] { display: none !important; }
.sg-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 18px; background: var(--ac-slate);
    box-shadow: inset 0 -2px 0 var(--ac-olive);
}
.sg-bar-h { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ac-gold); }
.sg-title { flex: 1 1 260px; min-width: 0; padding: 7px 10px; font-family: 'Afacad', sans-serif; font-size: 15px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 2px; color: var(--ac-ink); }
.sg-status { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-olive); }
.sg-saved { font-size: 12px; color: rgba(247, 243, 240, 0.65); min-width: 50px; }
.sg-bar .hd-cta-ghost { background: transparent; color: #EEEEEE; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.sg-bar .hd-cta-ghost:hover { color: var(--ac-gold); background: rgba(255, 255, 255, 0.08); }
.sg-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; }
.sg-doc { overflow: auto; padding: 24px 20px 60px; display: flex; flex-direction: column; align-items: center; gap: 18px;
          background-image: linear-gradient(rgba(68, 70, 94, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(68, 70, 94, 0.05) 1px, transparent 1px);
          background-size: 60px 60px; }
.sg-loading { margin-top: 40px; }
.sg-page { position: relative; flex: 0 0 auto; background: #fff; box-shadow: 0 4px 18px rgba(29, 7, 14, 0.18); }
.sg-page canvas { display: block; }
.sg-layer { position: absolute; inset: 0; }
.sg-doc.is-placing .sg-layer { cursor: crosshair !important; }
.sg-field {
    position: absolute; box-sizing: border-box; border: 2px solid; border-radius: 2px; background: rgba(255, 255, 255, 0.55);
    display: flex; align-items: flex-end; padding: 0 4px 1px; font-size: 10px; line-height: 1.2; overflow: visible; user-select: none;
}
.sg-field.is-sig, .sg-field.is-init { border-style: solid; border-width: 0 0 2px; background: rgba(127, 120, 197, 0.08); }
.sg-field.is-name, .sg-field.is-date { border-style: dashed; border-width: 0 0 2px; }
.sg-field.is-edit { cursor: move; }
.sg-field.is-mine { background: rgba(255, 236, 100, 0.22); }
.sg-field-l { font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 2px #fff; }
.sg-field-x { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--ac-slate); color: #fff;
              font-size: 12px; line-height: 18px; padding: 0; display: none; }
.sg-field.is-edit:hover .sg-field-x { display: block; }
.sg-side { overflow: auto; padding: 18px; background: var(--ac-silver); border-left: 1px solid var(--ac-rim); display: flex; flex-direction: column; gap: 18px; }
.sg-sec { display: flex; flex-direction: column; gap: 8px; }
.sg-sec-h { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-slate); padding-bottom: 6px; border-bottom: 1px solid rgba(68, 70, 94, 0.16); }
.sg-sec-h em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ac-muted); }
.sg-signers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sg-signer { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid rgba(68, 70, 94, 0.16); border-radius: 2px; background: rgba(255, 255, 255, 0.6); cursor: pointer; }
.sg-signer.is-active { border-color: var(--ac-accent); box-shadow: inset 0 0 0 1px var(--ac-accent); background: #fff; }
.sg-swatch { width: 10px; height: 26px; border-radius: 1px; flex: 0 0 auto; }
.sg-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sg-who b { font-weight: 500; font-size: 13.5px; color: var(--ac-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-who span { font-size: 11px; color: var(--ac-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-chip { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-muted); }
.sg-chip.is-signed { color: var(--hd-ok); } .sg-chip.is-declined { color: var(--hd-danger); } .sg-chip.is-viewed { color: var(--ac-accent); }
.sg-x { border: 0; background: none; color: var(--ac-muted); font-size: 16px; padding: 0 4px; }
.sg-x:hover { color: var(--hd-danger); }
.sg-signer .hd-cta-sm { padding: 3px 10px; font-size: 10.5pt; }
.sg-addsigner { display: grid; grid-template-columns: 1fr; gap: 6px; }
.sg-addsigner input, .sg-sec textarea { width: 100%; padding: 8px 10px; }
.sg-addsigner .hd-cta { justify-self: start; }
.sg-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-hint { margin: 0; font-size: 13px; color: var(--ac-slate); min-height: 36px; }
.sg-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
@media (max-width: 860px) {
    .sg-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
    .sg-side { max-height: 45vh; border-left: 0; border-top: 1px solid var(--ac-rim); }
}

/* ---- The signing editor in the editors' dress (2026-10-14, Matt: "the same design, typographic and silver gradients"
   as the Web Editor and the Video Editor): their 34px silver bar with the moving 5px strip beneath (#gtbar, #gtgrad),
   their buttons (.gtb), Afacad lettering, the document on the Gridtop's slate, and a silver pane (.gtp) at the side. --- */
.sg-editor { font-family: 'Afacad', system-ui, sans-serif; background: #44465E; }
.sg-editor .sg-bar {
    flex: 0 0 34px; height: 34px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 10px; position: relative;
    margin-bottom: 5px; font: 13px 'Afacad', system-ui, sans-serif; color: #44465E;
    background: linear-gradient(to bottom, rgba(255,255,255,.97) 0%, rgba(240,240,240,.97) 40%, rgba(220,220,220,.97) 100%);
    border-bottom: 1px solid rgba(68,70,94,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 6px rgba(30,32,44,.15); user-select: none;
}
.sg-editor .sg-bar::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 5px; pointer-events: none;
    background: linear-gradient(90deg, #eee 0%, #44465E 50%, #eee 100%); background-size: 200% 100%; animation: sgMove 33s linear infinite;
}
@keyframes sgMove { 0% { background-position: 200% 0; } 100% { background-position: 0 0; } }
.sg-editor .sg-bar-h { font: 600 13px 'Afacad', system-ui, sans-serif; letter-spacing: .02em; text-transform: none; color: #44465E; }
.sg-editor .sg-title { flex: 1 1 260px; height: 24px; box-sizing: border-box; padding: 2px 8px; font: 13px 'Afacad', system-ui, sans-serif; color: #1D070E;
    background: #FFFFFF; border: 1px solid rgba(68,70,94,.45); border-radius: 2px; }
.sg-editor .sg-status { font: 600 11px 'Afacad', system-ui, sans-serif; letter-spacing: .04em; color: #857EB6; }
.sg-editor .sg-saved { font: 12px 'Afacad', system-ui, sans-serif; color: #44465E; opacity: .7; }
/* every button in the editor is a .gtb */
.sg-editor .hd-cta, .sg-editor .hd-chip, .sg-editor .sg-bar .hd-cta-ghost {
    font: 11px 'Afacad', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #1D070E; padding: 4px 12px; min-height: 0;
    background: linear-gradient(180deg, #FDFEFF, #C8CBD5); border: 1px solid #44465E; border-radius: 2px; box-shadow: none;
}
.sg-editor .hd-cta:hover, .sg-editor .hd-chip:hover, .sg-editor .hd-chip[aria-pressed="true"], .sg-editor .sg-bar .hd-cta-ghost:hover {
    color: #1D070E; background: linear-gradient(180deg, #FFF7C4, #FFEC64); border-color: #AAA348;
}
.sg-editor .hd-cta:disabled { opacity: .45; pointer-events: none; }
.sg-editor .hd-cta-danger:hover { background: linear-gradient(180deg, #FFE3E3, #E87A7A); border-color: #8A2B2B; }
/* the document on slate, the pages lifted off it */
.sg-editor .sg-doc { background: #44465E; background-image: none; }
.sg-editor .sg-page { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); }
.sg-editor .sg-loading { color: #EEEEEE; }
/* the side: a silver pane */
.sg-editor .sg-side {
    background-color: #FAFAFA; border-left: 1px solid rgba(68,70,94,.4);
    box-shadow: inset 3px 3px 6px rgba(255,255,255,.8), inset -3px -3px 6px rgba(0,0,0,.18); font-size: 12.5px; color: #44465E;
}
.sg-editor .sg-sec-h { font: 12pt 'Afacad', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #44465E; border-bottom-color: rgba(68,70,94,.3); }
.sg-editor .sg-sec-h em { font-size: 10pt; }
.sg-editor .sg-addsigner input, .sg-editor .sg-sec textarea { font: 13px 'Afacad', system-ui, sans-serif; color: #1D070E; background: #FFFFFF;
    border: 1px solid rgba(68,70,94,.45); border-radius: 2px; }
.sg-editor .sg-signer { border-radius: 2px; }
.sg-editor .sg-hint, .sg-editor .hd-addmsg { font: 12.5px 'Afacad', system-ui, sans-serif; color: #44465E; }