/* ============================================================
   Hub 2026 Template — design tokens + base + components
   Ported from claude_design/SNI - Hub/design_handoff_hub_template/hub/
   (tokens.css + components.css).
   ALL rules are scoped under `.template-hub2026` so this stylesheet
   can be loaded site-wide without leaking into other templates or
   the SuperAdmin / Dashboard / Account UIs.
   ============================================================ */

.template-hub2026 {
    /* ---- Theme layer (recolorable via SNI Theme — these are defaults). ---- */
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --bs-info: #22d3ee;
    --bs-info-rgb: 34, 211, 238;
    --h26-accent: var(--bs-primary);
    --h26-accent-2: var(--bs-info);

    /* status */
    --h26-danger: #ef4444;
    --h26-warning: #f59e0b;
    --h26-success: #22c55e;

    /* surfaces */
    --h26-bg: #07080d;
    --h26-bg-2: #0a0c13;
    --h26-surface: #10131c;
    --h26-surface-2: #161a26;
    --h26-surface-3: #1c2130;
    --h26-elevated: #20263a;

    /* text */
    --h26-text: #f1f3f9;
    --h26-text-2: #aab2c5;
    --h26-text-3: #6f7891;
    --h26-text-faint: #4a5167;

    /* lines */
    --h26-line: rgba(255, 255, 255, 0.08);
    --h26-line-2: rgba(255, 255, 255, 0.12);
    --h26-line-strong: rgba(255, 255, 255, 0.18);

    /* glass */
    --h26-glass-bg: rgba(18, 22, 34, 0.62);
    --h26-glass-line: rgba(255, 255, 255, 0.10);
    --h26-glass-blur: 18px;

    /* radii */
    --h26-r-sm: 8px;
    --h26-r: 12px;
    --h26-r-lg: 16px;
    --h26-r-xl: 22px;
    --h26-r-pill: 999px;

    /* shadow */
    --h26-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --h26-shadow: 0 12px 32px -12px rgba(0,0,0,.7);
    --h26-shadow-lg: 0 30px 70px -24px rgba(0,0,0,.8);
    --h26-glow: 0 0 0 1px rgba(var(--bs-primary-rgb), .25), 0 18px 50px -16px rgba(var(--bs-primary-rgb), .45);

    /* type */
    --h26-font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --h26-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --h26-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

    /* layout */
    --h26-maxw: 1240px;
    --h26-gutter: 28px;

    /* Logo height (Sites.BrandLogoHeight, 1.0200). The shell overrides --sn-logo-h inline on this element;
       this is the fallback for anything rendering the template without it. The header height DERIVES from
       it so a taller logo widens the bar instead of hanging out of it — --h26-header-h is also what the
       sticky offsets below key off, so deriving here keeps them all in step. At the 38px default the max()
       resolves to 66px, exactly the height this header has always had. */
    --sn-logo-h: 38px;
    --h26-header-h: max(66px, calc(var(--sn-logo-h) + 28px));

    background: var(--h26-bg);
    color: var(--h26-text);
    font-family: var(--h26-font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
}

/* Network mesh background — a fixed layer behind the template's content. Two
   soft radial accent glows + a faint 26px dot-grid masked to fade out toward
   the bottom. Lives under .template-hub2026 .sn-h-bg so it only applies
   inside the Hub Template DOM. */
.template-hub2026 .sn-h-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 600px at 78% -8%, rgba(var(--bs-primary-rgb), .16), transparent 60%),
        radial-gradient(800px 560px at 8% 4%, rgba(var(--bs-info-rgb), .10), transparent 55%),
        var(--h26-bg);
}
.template-hub2026 .sn-h-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}

.template-hub2026 .sn-h-app { position: relative; z-index: 1; }

/* ---------- typography ---------- */
.template-hub2026 h1,
.template-hub2026 h2,
.template-hub2026 h3,
.template-hub2026 h4 {
    font-family: var(--h26-font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--h26-text);
}
.template-hub2026 .h-display {
    font-family: var(--h26-font-display);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.02;
}
.template-hub2026 .h-grad-text {
    background: linear-gradient(100deg, var(--h26-accent) 0%, var(--h26-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.template-hub2026 .h-eyebrow {
    font-family: var(--h26-font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--h26-text-3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.template-hub2026 .h-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--h26-accent); box-shadow: 0 0 10px var(--h26-accent);
}
.template-hub2026 .h-mono { font-family: var(--h26-font-mono); }
.template-hub2026 .h-muted { color: var(--h26-text-2); }
.template-hub2026 .h-faint { color: var(--h26-text-3); }

/* ---------- container ---------- */
.template-hub2026 .h-wrap { max-width: var(--h26-maxw); margin: 0 auto; padding: 0 var(--h26-gutter); }

/* ---------- buttons ---------- */
.template-hub2026 .h-btn {
    font-family: var(--h26-font-body);
    font-weight: 600;
    font-size: 14.5px;
    border: 1px solid transparent;
    border-radius: var(--h26-r-sm);
    padding: 10px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
    transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease;
    white-space: nowrap;
}
.template-hub2026 .h-btn:active { transform: translateY(1px); }
/* Primary button — solid accent with a subtle gradient. Strong white text and
   a small (not glowing) lift shadow. Earlier version used color-mix() + a heavy
   purple bloom shadow; the bloom dominated and washed out the text contrast in
   the CTA panel where the surrounding background was already accent-tinted. */
.template-hub2026 .h-btn-primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, transparent 100%), var(--h26-accent);
    color: #fff !important;
    border-color: var(--h26-accent);
    box-shadow: 0 4px 12px -6px rgba(var(--bs-primary-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.template-hub2026 .h-btn-primary:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, transparent 100%), var(--h26-accent);
    box-shadow: 0 6px 16px -6px rgba(var(--bs-primary-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.template-hub2026 .h-btn-primary i { color: #fff; }
.template-hub2026 .h-btn-ghost {
    background: rgba(255,255,255,.04);
    color: var(--h26-text);
    border-color: var(--h26-line-2);
}
.template-hub2026 .h-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--h26-line-strong); }
.template-hub2026 .h-btn-quiet { background: transparent; color: var(--h26-text-2); }
.template-hub2026 .h-btn-quiet:hover { color: var(--h26-text); background: rgba(255,255,255,.05); }
.template-hub2026 .h-btn-lg { padding: 13px 22px; font-size: 15.5px; border-radius: var(--h26-r); }
.template-hub2026 .h-btn-sm { padding: 7px 12px; font-size: 13px; }

/* ---------- cards / glass / hairline ---------- */
.template-hub2026 .h-section-card {
    background: var(--h26-surface);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r);
    box-shadow: var(--h26-shadow-sm);
}
.template-hub2026 .h-glass {
    background: var(--h26-glass-bg);
    -webkit-backdrop-filter: blur(var(--h26-glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--h26-glass-blur)) saturate(140%);
    border: 1px solid var(--h26-glass-line);
}
.template-hub2026 .h-hairline {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--h26-line-2) 20%, var(--h26-line-2) 80%, transparent);
    border: 0; margin: 0;
}

/* ---------- chips / pills ---------- */
.template-hub2026 .h-chip {
    font-family: var(--h26-font-mono);
    font-size: 12.5px;
    color: var(--h26-text-2);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r-pill);
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: all .14s ease;
    text-decoration: none;
}
.template-hub2026 .h-chip:hover {
    color: var(--h26-text);
    border-color: var(--h26-accent);
    background: rgba(var(--bs-primary-rgb), .10);
}
.template-hub2026 .h-chip .ct { color: var(--h26-text-3); font-size: 11px; }
.template-hub2026 .h-chip:hover .ct { color: var(--h26-accent-2); }

.template-hub2026 .h-pill {
    font-family: var(--h26-font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: var(--h26-r-pill);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--h26-line-2);
    color: var(--h26-text-2);
}
.template-hub2026 .h-pill-accent { color: var(--h26-accent); border-color: rgba(var(--bs-primary-rgb), .4); background: rgba(var(--bs-primary-rgb), .12); }
.template-hub2026 .h-pill-info { color: var(--h26-accent-2); border-color: rgba(var(--bs-info-rgb), .4); background: rgba(var(--bs-info-rgb), .10); }
.template-hub2026 .h-pill-live { color: var(--h26-success); border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.10); }
.template-hub2026 .h-pill-live .blip {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--h26-success); box-shadow: 0 0 8px var(--h26-success);
    animation: snH26Blip 1.8s ease-in-out infinite;
}
@keyframes snH26Blip { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- favicon avatar + image placeholder ---------- */
.template-hub2026 .h-favi {
    width: 38px; height: 38px;
    border-radius: 9px;
    display: grid; place-items: center;
    font-family: var(--h26-font-display);
    font-weight: 600; font-size: 16px;
    color: #fff;
    flex: none;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.template-hub2026 .h-imgph {
    position: relative;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, rgba(255,255,255,.05) 10px 20px),
        var(--h26-surface-2);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r-sm);
    display: grid; place-items: center; overflow: hidden;
}
.template-hub2026 .h-imgph .lbl {
    font-family: var(--h26-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--h26-text-faint);
    text-transform: uppercase;
}

/* ---------- section heading ---------- */
.template-hub2026 .h-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.template-hub2026 .h-sec-head .ttl { font-family: var(--h26-font-display); font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.template-hub2026 .h-sec-head .sub { color: var(--h26-text-3); font-size: 13.5px; margin-top: 4px; }
.template-hub2026 .h-sec-link { color: var(--h26-text-2); font-size: 13.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.template-hub2026 .h-sec-link:hover { color: var(--h26-accent-2); }

/* ---------- trend indicator ---------- */
.template-hub2026 .h-trend { font-family: var(--h26-font-mono); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.template-hub2026 .h-trend.up { color: var(--h26-success); }
.template-hub2026 .h-trend.down { color: var(--h26-danger); }
.template-hub2026 .h-trend.flat { color: var(--h26-text-3); }

/* ---------- focus + scrollbar ---------- */
.template-hub2026 a:focus-visible,
.template-hub2026 button:focus-visible,
.template-hub2026 input:focus-visible {
    outline: 2px solid var(--h26-accent);
    outline-offset: 2px;
}

/* Slot dev-tag — hidden by default. The Hub 2026 template renders these next
   to each slot's eyebrow so designers can see the slot wiring; off in normal
   use. Enable per-page via `?slots=1` (the shell flips data-slots="on" on the
   template root) so SuperAdmins / designers can inspect the layout. */
.template-hub2026 .h-slot-tag {
    display: none;
    margin-left: 8px;
    font-family: var(--h26-font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--h26-text-faint);
    border: 1px dashed var(--h26-line-2);
    border-radius: 5px;
    padding: 2px 6px;
}
.template-hub2026[data-slots="on"] .h-slot-tag { display: inline-block; }

/* ============================================================
   Header
   ============================================================ */
.template-hub2026 .sn-h-header {
    position: sticky; top: 0; z-index: 50;
    height: var(--h26-header-h);
    display: flex; align-items: center;
    backdrop-filter: blur(var(--h26-glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--h26-glass-blur)) saturate(140%);
    background: var(--h26-glass-bg);
    border-bottom: 1px solid transparent;
    transition: border-color .15s, box-shadow .15s;
}
.template-hub2026 .sn-h-header.scrolled {
    border-bottom-color: var(--h26-line);
    box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 14px 28px -22px rgba(0,0,0,.6);
}
.template-hub2026 .sn-h-header .wrap-row {
    width: 100%; max-width: var(--h26-maxw); margin: 0 auto;
    padding: 0 var(--h26-gutter);
    display: flex; align-items: center; gap: 16px;
}
.template-hub2026 .sn-h-logo {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--h26-text);
    font-family: var(--h26-font-display); font-weight: 600; font-size: 19px; letter-spacing: -.02em;
}
.template-hub2026 .sn-h-logo .mark {
    width: 28px; height: 28px; border-radius: 8px;
    background: linear-gradient(140deg, var(--h26-accent) 0%, var(--h26-accent-2) 100%);
    display: grid; place-items: center; color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.template-hub2026 .sn-h-logo .net {
    background: linear-gradient(100deg, var(--h26-accent) 0%, var(--h26-accent-2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.template-hub2026 .sn-h-nav { display: flex; gap: 4px; }
.template-hub2026 .sn-h-navlink {
    font-size: 14px; color: var(--h26-text-2); text-decoration: none;
    padding: 8px 12px; border-radius: var(--h26-r-sm);
    transition: color .15s, background .15s;
}
.template-hub2026 .sn-h-navlink:hover { color: var(--h26-text); background: rgba(255,255,255,.05); }
.template-hub2026 .sn-h-navlink.active { color: var(--h26-text); background: rgba(255,255,255,.07); }
.template-hub2026 .sn-h-search {
    flex: 0 0 auto; width: 210px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r-pill);
    padding: 7px 12px;
    display: flex; align-items: center; gap: 8px;
    color: var(--h26-text-2); font-size: 13.5px;
    transition: border-color .15s, background .15s;
}
.template-hub2026 .sn-h-search:focus-within { border-color: var(--h26-accent); background: rgba(255,255,255,.06); }
.template-hub2026 .sn-h-search input {
    background: transparent; border: 0; outline: 0; color: var(--h26-text);
    font-size: 13.5px; flex: 1; font-family: var(--h26-font-body);
}
.template-hub2026 .sn-h-search input::placeholder { color: var(--h26-text-3); }
.template-hub2026 .sn-h-auth { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.template-hub2026 .sn-h-iconbtn {
    position: relative; width: 38px; height: 38px; border-radius: var(--h26-r-sm);
    border: 1px solid var(--h26-line); background: rgba(255,255,255,.03); color: var(--h26-text-2);
    cursor: pointer; display: grid; place-items: center; font-size: 16px; transition: all .15s;
}
.template-hub2026 .sn-h-iconbtn:hover { color: var(--h26-text); border-color: var(--h26-line-2); background: rgba(255,255,255,.07); }
.template-hub2026 .sn-h-iconbtn .dot {
    position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: var(--h26-accent); color: #fff; font-size: 10px;
    font-family: var(--h26-font-mono);
    display: grid; place-items: center; border: 2px solid var(--h26-bg); font-weight: 600;
}
.template-hub2026 .sn-h-ownerbtn {
    display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; cursor: pointer;
    background: rgba(255,255,255,.03); border: 1px solid var(--h26-line); border-radius: var(--h26-r-pill);
    transition: all .15s;
}
.template-hub2026 .sn-h-ownerbtn:hover { border-color: var(--h26-line-2); background: rgba(255,255,255,.07); }
.template-hub2026 .sn-h-burger { display: none; }

/* Logo image (Sites.DefaultImage1) in place of the mark + wordmark.
   ⚠️ The logo is sized HERE and nowhere else — `Sites.DefaultImage1Style` is deliberately NOT applied to
   it. That style belongs to the legacy CONTENT rendering of the same column (on the hub it is
   `float-right rounded-circle mx-3` + `max-height: 150px`, i.e. a floated body image), and an INLINE style
   beats any stylesheet: the logo rendered four times the header's height, overflowed it, and the oversized
   anchor covered the nav so none of it could be clicked (owner, 2026-08-09).

   How TALL it renders is the one thing a site controls, through `Sites.BrandLogoHeight` (1.0200) arriving
   as `--sn-logo-h`. That is a variable and not an inline style on the <img> precisely so it can be
   overridden without discarding the rules below, and so it stays inside the range the server clamps to.

   Height is also the only dimension worth exposing: the logo keeps its own proportions, so width follows.
   The image editor's "Max width" therefore appeared to do nothing on a wide wordmark, which is what
   prompted this (owner, 2026-08-09). `max-width` here is a guard against a very wide banner squeezing the
   nav out, so it scales WITH the height rather than staying at a fixed 260px and re-capping a taller logo.

   No fixed height on the anchor — it also wraps the TEXT fallback (mark + wordmark), and a fixed height
   there would clip it on any font that renders taller. Capping the IMAGE is what bounds the row; the
   `overflow` is only a belt. */
.template-hub2026 .sn-h-logo { overflow: hidden; }
.template-hub2026 .sn-h-logo-img {
    display: block;
    max-height: var(--sn-logo-h, 38px);
    width: auto;
    max-width: calc(var(--sn-logo-h, 38px) * 7);
    object-fit: contain;
}
.template-hub2026 .sn-h-foot-brand .sn-h-logo-img,
.template-hub2026 footer .sn-h-logo-img { max-height: calc(var(--sn-logo-h, 38px) + 8px); }

/* Owner dropdown */
.template-hub2026 .sn-h-ownermenu {
    position: absolute; top: calc(100% + 6px); right: 0;
    width: 280px; padding: 14px;
    background: var(--h26-surface);
    border: 1px solid var(--h26-line-2);
    border-radius: var(--h26-r);
    box-shadow: var(--h26-shadow);
    z-index: 100;
}
.template-hub2026 .sn-h-menurow {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
    text-decoration: none; color: var(--h26-text); transition: background .12s; font-size: 14px;
}
.template-hub2026 .sn-h-menurow:hover { background: rgba(255,255,255,.06); }
/* ⚠️ Rows are a MIX of <a> and <button> (Notifications, My Account, Sign out), and they used to look it:
   site.css has `body[class*="theme-"]:not(.sn-mode-none) a:not(.sn-btn) { color: var(--theme-primary) }` at
   specificity (0,3,1), which outranks `.template-hub2026 .sn-h-menurow` (0,2,0) — so every LINK row rendered
   in the theme accent while the button rows stayed --h26-text. The leading `body` here is deliberate: it
   buys (0,3,2) so this wins regardless of stylesheet order. Resetting the buttons' own appearance here too,
   rather than inline on each one, is what keeps the two kinds of row honestly identical. */
body .template-hub2026 .sn-h-ownermenu a.sn-h-menurow,
body .template-hub2026 .sn-h-ownermenu button.sn-h-menurow { color: var(--h26-text); }
.template-hub2026 .sn-h-ownermenu button.sn-h-menurow {
    width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
    font-family: inherit; font-size: 14px;
}
.template-hub2026 .sn-h-menurow .badge {
    margin-left: auto; font-family: var(--h26-font-mono); font-size: 11px;
    color: var(--h26-text-3); background: rgba(255,255,255,.05);
    border: 1px solid var(--h26-line); border-radius: 6px; padding: 1px 6px;
}

/* ── Administration rows (P7) ───────────────────────────────────────────────────────────────────────
   Added when the admin banner stopped rendering on the Hub, because Admin / SuperAdmin / the active
   company had no other route from here. `body`-prefixed for the same reason as the block above — these
   are <a> rows and site.css's theme-accent link rule (0,3,1) would otherwise recolour them. */
body .template-hub2026 .sn-h-ownermenu a.sn-h-menurow-danger { color: var(--h26-danger, #f87171); }
.template-hub2026 .sn-h-menurow-danger:hover { background: rgba(248,113,113,.10); }

/* The active-company row. Two lines rather than one, because "Operating as" is a LABEL and the company
   name is the value that matters — on one line the name is just more sentence, and this row exists to
   answer "which company am I about to affect?" at a glance. */
.template-hub2026 .sn-h-menurow-context { align-items: flex-start; }
.template-hub2026 .sn-h-ctx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.template-hub2026 .sn-h-ctx-label {
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--h26-text-3);
}
.template-hub2026 .sn-h-ctx-name {
    font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.template-hub2026 .sn-h-ctx-swap { margin-left: auto; font-size: 12px; color: var(--h26-text-3); align-self: center; }

/* ── Messaging, Hub skin ────────────────────────────────────────────────────────────────────────────
   The widget is the ONE #snMsgWidget from _Layout, moved into the header by hub-2026-shell.js. Everything
   below is a reskin over that same markup — no second client, no second unread count, no second transport.
   Base styles live in site.css (.sn-msg-*); these are scoped overrides at (0,2,0), which beats them.

   ⚠️ Self-managing at the breakpoint, and that is by design: below lg the widget is handed back to the
   fixed dock rail, which lives OUTSIDE .template-hub2026 — so every rule here simply stops matching and
   the standard full-height drawer takes over. Don't "fix" that by raising these selectors. */
.template-hub2026 .sn-h-msgslot { display: inline-flex; align-items: center; }
.template-hub2026 .sn-msg-widget { margin-right: 0 !important; }   /* the header's flex gap owns spacing, not .me-2 */
.template-hub2026 .sn-msg-btn {
    width: 38px; height: 38px; border-radius: var(--h26-r-sm);
    border: 1px solid var(--h26-line); background: rgba(255,255,255,.03); color: var(--h26-text-2);
    display: grid; place-items: center; font-size: 16px; padding: 0; transition: all .15s;
}
.template-hub2026 .sn-msg-btn:hover,
.template-hub2026 .sn-msg-btn[aria-expanded="true"] { color: var(--h26-text); border-color: var(--h26-line-2); background: rgba(255,255,255,.07); }
.template-hub2026 .sn-msg-badge {
    top: -5px; right: -5px; min-width: 17px; height: 17px; border-radius: 9px;
    background: var(--h26-accent); font-family: var(--h26-font-mono); font-size: 10px; line-height: 17px;
    border: 2px solid var(--h26-bg);
}
.template-hub2026 .sn-msg-panel {
    width: 27rem; padding: 10px;
    background: var(--h26-surface); border: 1px solid var(--h26-line-2);
    border-radius: var(--h26-r); box-shadow: var(--h26-shadow);
}
/* Top padding so "MESSAGES" isn't jammed against the presence hairline directly above it — presence now
   sits ABOVE this bar in the inbox view. Reads fine in a thread too, where presence is hidden. */
.template-hub2026 .sn-msg-head { padding: 6px 4px 10px; border-bottom: 1px solid var(--h26-line); margin-bottom: 6px; }
.template-hub2026 .sn-msg-title {
    font-family: var(--h26-font-mono); font-size: 11px; letter-spacing: .06em; color: var(--h26-text-3);
}
.template-hub2026 .sn-msg-back, .template-hub2026 .sn-msg-close { color: var(--h26-text-3); }
.template-hub2026 .sn-msg-back:hover, .template-hub2026 .sn-msg-close:hover { color: var(--h26-text); background: rgba(255,255,255,.08); }
/* Presence, inline at the top of the inbox.
   The roster is the SAME #snOnlineWidget from the navbar, moved in by hub-2026-shell.js. In the navbar it is
   a trigger + hover popover; in here it has to read as a section, so the trigger is hidden and the popover is
   forced static. ⚠️ `display: block !important` is not laziness — site.css drives this element with FIVE
   competing rules (`:hover`, `.sn-online-open`, two `body.sn-docked` ones, and `body.sn-msg-open` which hides
   it precisely BECAUSE the panel is open, which is now always). Out-specifying all five individually would be
   a rule nobody could safely edit later. */
.template-hub2026 .sn-msg-presence { margin: 0; }
.template-hub2026 .sn-msg-presence .sn-online-widget { display: block; }
.template-hub2026 .sn-msg-presence .sn-online-trigger { display: none; }
.template-hub2026 .sn-msg-presence .sn-online-pop {
    display: block !important;
    position: static; min-width: 0; max-width: none; width: auto;
    background: none; border: 0; box-shadow: none; padding: 0;
}
.template-hub2026 .sn-msg-presence .sn-online-pop-title {
    font-family: var(--h26-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--h26-text-3); padding: 2px 4px 6px;
}
/* Capped: this sits ABOVE the conversation list and must never be the reason you can't see it. */
.template-hub2026 .sn-msg-presence .sn-online-list { max-height: 9rem; }
.template-hub2026 .sn-msg-presence .sn-online-list li { color: var(--h26-text-2); font-size: 13px; border-radius: var(--h26-r-sm); }
.template-hub2026 .sn-msg-presence .sn-online-list li:hover { background: rgba(255,255,255,.06); }
.template-hub2026 .sn-msg-presence .sn-online-empty,
.template-hub2026 .sn-msg-presence .sn-online-more { color: var(--h26-text-3); font-size: 12.5px; }
/* Hairline between the roster and the conversations below it. */
.template-hub2026 .sn-msg-presence:not(.d-none) { border-bottom: 1px solid var(--h26-line); padding-bottom: 6px; }

/* Compose (M17) */
.template-hub2026 .sn-msg-new { color: var(--h26-text-3); }
.template-hub2026 .sn-msg-new:hover { color: var(--h26-text); background: rgba(255,255,255,.08); }
.template-hub2026 .sn-msg-compose { border-bottom: 1px solid var(--h26-line); }
.template-hub2026 .sn-msg-tosearch, .template-hub2026 .sn-msg-subject {
    background: var(--h26-bg-2); color: var(--h26-text);
    border: 1px solid var(--h26-line); border-radius: var(--h26-r-sm);
}
.template-hub2026 .sn-msg-tosearch:focus, .template-hub2026 .sn-msg-subject:focus { border-color: var(--h26-accent); }
.template-hub2026 .sn-msg-tosearch::placeholder, .template-hub2026 .sn-msg-subject::placeholder { color: var(--h26-text-3); }
.template-hub2026 .sn-msg-toresult { border-radius: var(--h26-r-sm); }
.template-hub2026 .sn-msg-toresult:hover, .template-hub2026 .sn-msg-toresult.sel { background: rgba(255,255,255,.08); }
.template-hub2026 .sn-msg-toname { color: var(--h26-text); }
.template-hub2026 .sn-msg-tocompany { color: var(--h26-text-3); font-family: var(--h26-font-mono); font-size: 10.5px; }
.template-hub2026 .sn-msg-chip-person {
    background: color-mix(in srgb, var(--h26-accent) 30%, var(--h26-surface-2));
    border-color: color-mix(in srgb, var(--h26-accent) 42%, transparent); color: var(--h26-text);
}
.template-hub2026 .sn-msg-composego { background: var(--h26-accent); }
.template-hub2026 .sn-msg-rowgroup, .template-hub2026 .sn-msg-rowcount { color: var(--h26-text-3); }
.template-hub2026 .sn-msg-rowcount { font-family: var(--h26-font-mono); background: rgba(255,255,255,.07); }

/* Inbox rows */
.template-hub2026 .sn-msg-rowbtn { color: var(--h26-text-2); border-radius: var(--h26-r-sm); }
.template-hub2026 .sn-msg-rowbtn:hover { background: rgba(255,255,255,.06); }
.template-hub2026 .sn-msg-rowname { color: var(--h26-text); }
.template-hub2026 .sn-msg-rowprev { color: var(--h26-text-3); }
.template-hub2026 .sn-msg-rowtime { color: var(--h26-text-3); font-family: var(--h26-font-mono); font-size: 10.5px; }
.template-hub2026 .sn-msg-rowunread, .template-hub2026 .sn-msg-badge { background: var(--h26-accent); }
.template-hub2026 .sn-msg-empty { color: var(--h26-text-3); }
/* Thread */
.template-hub2026 .sn-msg-bubble { background: var(--h26-surface-2); border: 1px solid var(--h26-line); }
.template-hub2026 .sn-msg-bubble.mine {
    background: color-mix(in srgb, var(--h26-accent) 26%, var(--h26-surface-2));
    border-color: color-mix(in srgb, var(--h26-accent) 40%, transparent);
}
.template-hub2026 .sn-msg-body { color: var(--h26-text); }
.template-hub2026 .sn-msg-meta { color: var(--h26-text-3); font-family: var(--h26-font-mono); font-size: 10px; }
.template-hub2026 .sn-msg-typing { color: var(--h26-text-3); }
/* Composer */
.template-hub2026 .sn-msg-composer { border-top: 1px solid var(--h26-line); }
.template-hub2026 .sn-msg-input, .template-hub2026 .sn-msg-editinput {
    background: var(--h26-bg-2); color: var(--h26-text);
    border: 1px solid var(--h26-line); border-radius: var(--h26-r-sm);
}
.template-hub2026 .sn-msg-input:focus, .template-hub2026 .sn-msg-editinput:focus { border-color: var(--h26-accent); }
.template-hub2026 .sn-msg-input::placeholder { color: var(--h26-text-3); }
.template-hub2026 .sn-msg-send { background: var(--h26-accent); border-radius: var(--h26-r-sm); }
.template-hub2026 .sn-msg-attach, .template-hub2026 .sn-msg-emoji { color: var(--h26-text-3); }
.template-hub2026 .sn-msg-attach:hover, .template-hub2026 .sn-msg-emoji:hover { color: var(--h26-text); background: rgba(255,255,255,.08); }

/* ── Expandable sub-menu (My Account) ───────────────────────────────────────────────────────────────
   Inline disclosure rather than a flyout: a flyout on a menu already anchored to the right edge of the
   viewport has nowhere to open to, and it needs hover intent, a close delay and a touch story. This
   needs none of that. */
.template-hub2026 .sn-h-menucaret { margin-left: auto; font-size: 10px; color: var(--h26-text-3); transition: transform .15s; }
.template-hub2026 .sn-h-menutoggle[aria-expanded="true"] .sn-h-menucaret { transform: rotate(180deg); }
.template-hub2026 .sn-h-submenu {
    /* The rail lines the children up under the parent row's icon, so the group reads as one thing. */
    margin: 2px 0 2px 19px; padding-left: 10px; border-left: 1px solid var(--h26-line);
}
.template-hub2026 .sn-h-submenu[hidden] { display: none; }
.template-hub2026 .sn-h-submenu .sn-h-menurow { font-size: 13.5px; padding: 7px 10px; }

/* ── Notification bell panel (sn-hub-notifications.js) ───────────────────────────────────────────────
   ⚠️ These [hidden] rules are LOAD-BEARING. `.dot` above is `display: grid` and an author display rule
   beats the `hidden` attribute — without this the bell would show an empty red blob at all times, which
   is exactly the "you have something waiting" signal we're trying to make truthful. */
.template-hub2026 .sn-h-iconbtn .dot[hidden],
.template-hub2026 .sn-h-menurow .badge[hidden],
.template-hub2026 .sn-h-notifpanel[hidden] { display: none; }

.template-hub2026 .sn-h-notifpanel {
    position: absolute; top: calc(100% + 6px); right: 0;
    width: 340px; max-width: min(340px, 92vw); padding: 8px;
    background: var(--h26-surface);
    border: 1px solid var(--h26-line-2);
    border-radius: var(--h26-r);
    box-shadow: var(--h26-shadow);
    z-index: 100; max-height: min(70vh, 26rem); overflow-y: auto;
}
.template-hub2026 .sn-h-notif-head {
    font-family: var(--h26-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--h26-text-3); padding: 4px 6px 8px;
    border-bottom: 1px solid var(--h26-line); margin-bottom: 6px;
}
.template-hub2026 .sn-h-notif-row {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 9px 8px; border-radius: 8px;
}
.template-hub2026 .sn-h-notif-row + .sn-h-notif-row { border-top: 1px solid var(--h26-line); }
.template-hub2026 .sn-h-notif-row:hover { background: rgba(255,255,255,.04); }
.template-hub2026 .sn-h-notif-body { flex: 1 1 auto; min-width: 0; }
.template-hub2026 .sn-h-notif-title { font-weight: 600; font-size: 13.5px; color: var(--h26-text); margin-bottom: 2px; }
/* overflow-wrap: a notification can carry a long unbroken URL, which would otherwise widen the panel. */
.template-hub2026 .sn-h-notif-msg { font-size: 13px; line-height: 1.45; color: var(--h26-text-2); overflow-wrap: anywhere; }
.template-hub2026 .sn-h-notif-msg a { color: var(--h26-accent-2); }
.template-hub2026 .sn-h-notif-x {
    flex: 0 0 auto; border: 0; background: transparent; color: var(--h26-text-3);
    cursor: pointer; padding: 2px 5px; border-radius: 6px; font-size: 11px; line-height: 1;
}
.template-hub2026 .sn-h-notif-x:hover { color: var(--h26-text); background: rgba(255,255,255,.10); }
.template-hub2026 .sn-h-notif-empty { padding: 10px 8px 12px; font-size: 13px; color: var(--h26-text-3); }

/* Mobile drawer */
.template-hub2026 .sn-h-drawer { display: none; flex-direction: column; padding: 16px 20px; gap: 4px; }
.template-hub2026 .sn-h-drawer-link {
    padding: 11px 4px; color: var(--h26-text); text-decoration: none; font-size: 15px;
    border-bottom: 1px solid var(--h26-line);
}
.template-hub2026 .sn-h-drawer-link:hover { color: var(--h26-accent-2); }

/* Owner rows in the drawer (P7). Sign out is a <button> inside a <form> — the row styling has to reach it
   too, or the one destructive row in the menu would be the one that looks like it belongs elsewhere. */
.template-hub2026 button.sn-h-drawer-link {
    width: 100%; background: none; border: 0; border-bottom: 1px solid var(--h26-line);
    text-align: left; cursor: pointer; font-family: inherit; font-size: 15px;
}
body .template-hub2026 .sn-h-drawer a.sn-h-drawer-link { color: var(--h26-text); }
body .template-hub2026 .sn-h-drawer a.sn-h-drawer-danger { color: var(--h26-danger, #f87171); }
/* Separates the site's own navigation from the owner's back-office links: they go to different places
   (and open in new tabs), so running them together as one list misrepresents what the menu is. */
.template-hub2026 .sn-h-drawer-sep {
    border: 0; border-top: 1px solid var(--h26-line); opacity: 1; margin: 10px 0 2px;
}

/* ============================================================
   Homepage Signal layout
   ============================================================ */
.template-hub2026 .sn-h-pitchbar {
    display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin: 22px 0 28px;
    background: var(--h26-surface);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r);
    box-shadow: var(--h26-shadow-sm);
    flex-wrap: wrap;
}
.template-hub2026 .sn-h-pitchbar .pitchcopy { flex: 1; min-width: 240px; font-size: 14.5px; color: var(--h26-text-2); }
.template-hub2026 .sn-h-pitchbar .pitchcopy strong { color: var(--h26-text); font-weight: 600; }
.template-hub2026 .sn-h-pitchbar .pitchctas { display: flex; gap: 8px; }

.template-hub2026 .sn-h-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 36px;
}
.template-hub2026 .sn-h-feat-card {
    padding: 18px;
    background: var(--h26-surface);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r);
    box-shadow: var(--h26-shadow-sm);
    transition: transform .16s ease, border-color .16s ease, box-shadow .2s ease;
    text-decoration: none; color: var(--h26-text);
    display: flex; flex-direction: column; gap: 12px;
}
.template-hub2026 .sn-h-feat-card:hover {
    transform: translateY(-3px);
    border-color: var(--h26-line-strong);
    box-shadow: var(--h26-shadow);
}
.template-hub2026 .sn-h-feat-head { display: flex; gap: 14px; align-items: flex-start; }
.template-hub2026 .sn-h-feat-head .meta { flex: 1; min-width: 0; }
.template-hub2026 .sn-h-feat-head .name { font-family: var(--h26-font-display); font-size: 16px; font-weight: 600; }
.template-hub2026 .sn-h-feat-head .domain { font-family: var(--h26-font-mono); font-size: 12px; color: var(--h26-text-2); }
.template-hub2026 .sn-h-feat-card .blurb { color: var(--h26-text-2); font-size: 14px; line-height: 1.5; }
.template-hub2026 .sn-h-feat-card .foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto; padding-top: 8px; border-top: 1px solid var(--h26-line);
}
.template-hub2026 .sn-h-feat-card .stats {
    display: inline-flex; gap: 12px; font-family: var(--h26-font-mono);
    font-size: 12px; color: var(--h26-text-3);
}

.template-hub2026 .sn-h-signal-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 28px;
    margin-bottom: 36px;
}
.template-hub2026 .sn-h-signal-aside {
    position: sticky;
    top: calc(var(--h26-header-h) + 16px);
    align-self: flex-start;
    display: flex; flex-direction: column; gap: 18px;
}

/* Popular leaderboard */
.template-hub2026 .sn-h-poprows {
    display: flex; flex-direction: column;
    background: var(--h26-surface);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r);
    overflow: hidden;
}
.template-hub2026 .sn-h-poprow {
    display: grid;
    grid-template-columns: 36px 38px 1fr auto auto;
    gap: 14px; align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--h26-line);
    text-decoration: none; color: var(--h26-text);
    transition: background .14s;
}
.template-hub2026 .sn-h-poprow:last-child { border-bottom: 0; }
.template-hub2026 .sn-h-poprow:hover { background: rgba(255,255,255,.04); }
.template-hub2026 .sn-h-poprow .rank { font-family: var(--h26-font-mono); font-size: 13px; color: var(--h26-text-3); }
.template-hub2026 .sn-h-poprow .name { font-size: 14px; font-weight: 500; }
.template-hub2026 .sn-h-poprow .domain { font-family: var(--h26-font-mono); font-size: 11.5px; color: var(--h26-text-3); }
.template-hub2026 .sn-h-poprow .spark svg { display: block; }

/* ============================================================
   Card hovers shared across post / feat
   ============================================================ */
.template-hub2026 .sn-h-post-card {
    background: var(--h26-surface);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r);
    box-shadow: var(--h26-shadow-sm);
    transition: transform .16s ease, border-color .16s ease, box-shadow .2s ease;
    text-decoration: none; color: var(--h26-text);
    display: block; padding: 16px;
}
.template-hub2026 .sn-h-post-card:hover {
    transform: translateY(-3px);
    border-color: var(--h26-line-strong);
    box-shadow: var(--h26-shadow);
}

/* ============================================================
   Prose (Site Page bodies)
   ============================================================ */
.template-hub2026 .sn-h-prose .lead { font-size: 17px; color: var(--h26-text); line-height: 1.6; margin: 0 0 16px; }
.template-hub2026 .sn-h-prose h2 { font-family: var(--h26-font-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 30px 0 10px; }
.template-hub2026 .sn-h-prose h3 { font-family: var(--h26-font-display); font-size: 17px; font-weight: 600; margin: 22px 0 6px; }
.template-hub2026 .sn-h-prose p { color: var(--h26-text-2); font-size: 15.5px; line-height: 1.65; margin: 0 0 14px; }
.template-hub2026 .sn-h-prose ul { color: var(--h26-text-2); font-size: 15.5px; line-height: 1.6; padding-left: 20px; margin: 0 0 14px; }
.template-hub2026 .sn-h-prose li { margin-bottom: 9px; }
.template-hub2026 .sn-h-prose strong { color: var(--h26-text); font-weight: 600; }
/* MainContent component wraps the authored body in .sn-main-content; neutralize
   its default block margin so prose spacing comes from the rules above. */
.template-hub2026 .sn-h-prose .sn-main-content { margin: 0; }

/* Hub landing main-content block (DefaultMainContent on the homepage). Sits between the
   pitch bar and Featured; only rendered when non-empty, so the section never shows when
   blank. Own vertical rhythm so it doesn't crowd Featured below it. */
.template-hub2026 .sn-h-home-main { margin: 0 0 36px; }
.template-hub2026 .sn-h-home-main .sn-h-prose > :first-child { margin-top: 0; }

/* Search results — hub-styled product grid rendered in the page-layout body (search defaults
   to the Site Page view). Cards link out to Amazon. */
.template-hub2026 .sn-h-product-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px;
}
.template-hub2026 .sn-h-product-card {
    display: flex; flex-direction: column; text-decoration: none; color: var(--h26-text);
    background: var(--h26-surface); border: 1px solid var(--h26-line); border-radius: var(--h26-r);
    overflow: hidden; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.template-hub2026 .sn-h-product-card:hover {
    border-color: var(--h26-line-2); transform: translateY(-2px); box-shadow: var(--h26-shadow-sm);
}
.template-hub2026 .sn-h-product-img {
    aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center;
    padding: 12px;
}
.template-hub2026 .sn-h-product-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.template-hub2026 .sn-h-product-img .bi { font-size: 34px; color: #cbd5e1; }
.template-hub2026 .sn-h-product-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 13px 14px; }
.template-hub2026 .sn-h-product-brand { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--h26-text-3); }
.template-hub2026 .sn-h-product-title {
    font-size: 13.5px; line-height: 1.35; color: var(--h26-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.template-hub2026 .sn-h-product-price { margin-top: 2px; font-weight: 600; color: var(--h26-accent, #a855f7); font-size: 14px; }

/* Search empty state */
.template-hub2026 .sn-h-search-empty { text-align: center; padding: 48px 20px; color: var(--h26-text-2); }
.template-hub2026 .sn-h-search-empty .bi { font-size: 40px; color: var(--h26-text-3); display: block; margin-bottom: 14px; }
.template-hub2026 .sn-h-search-empty p { max-width: 420px; margin: 0 auto 18px; line-height: 1.55; }

/* ============================================================
   Site Page layout (breadcrumb + body + sticky sidebar)
   ============================================================ */
.template-hub2026 .sn-h-page-main { padding-top: 34px; padding-bottom: 80px; }
.template-hub2026 .sn-h-breadcrumb {
    font-size: 12px; color: var(--h26-text-3);
    margin-bottom: 20px; display: flex; gap: 8px; align-items: center;
}
.template-hub2026 .sn-h-breadcrumb a { color: var(--h26-text-3); text-decoration: none; }
.template-hub2026 .sn-h-breadcrumb a:hover { color: var(--h26-text-2); }
.template-hub2026 .sn-h-breadcrumb i { font-size: 10px; }
.template-hub2026 .sn-h-breadcrumb span { color: var(--h26-text-2); }
.template-hub2026 .sn-h-page-head { margin-bottom: 30px; }
.template-hub2026 .sn-h-page-grid {
    display: grid;
    grid-template-columns: 1.7fr .9fr;
    gap: 30px;
    align-items: start;
}
.template-hub2026 .sn-h-page-aside {
    display: flex; flex-direction: column; gap: 22px;
    position: sticky;
    top: calc(var(--h26-header-h) + 16px);
    align-self: flex-start;
}
/* Ad placeholder visible only in slot-view mode (?slots=1); the real AdBlock
   component renders alongside it and is shown in all modes. */
.template-hub2026 .sn-h-ad-ph { display: none; }
.template-hub2026[data-slots="on"] .sn-h-ad-ph { display: grid; }

@media (max-width: 1080px) {
    .template-hub2026 .sn-h-page-grid { grid-template-columns: 1fr; }
    .template-hub2026 .sn-h-page-aside { position: static; }
}

/* ============================================================
   Footer
   ============================================================ */
.template-hub2026 .sn-h-footer {
    border-top: 1px solid var(--h26-line);
    padding: 48px 0 28px;
    margin-top: 60px;
}
.template-hub2026 .sn-h-foot-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 36px 24px;
}
.template-hub2026 .sn-h-foot-grid h5 {
    font-family: var(--h26-font-mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--h26-text-3); margin-bottom: 14px;
}
.template-hub2026 .sn-h-foot-link {
    color: var(--h26-text-2); text-decoration: none; font-size: 13.5px;
    display: block; padding: 4px 0; transition: color .14s;
}
.template-hub2026 .sn-h-foot-link:hover { color: var(--h26-text); }
.template-hub2026 .sn-h-foot-blurb { color: var(--h26-text-2); font-size: 13.5px; line-height: 1.55; margin-top: 12px; }

/* BYOD = "Bring Your Own Domain". The <abbr title="…"> supplies the native hover tooltip with the
   full meaning; this just makes the term visibly hoverable (dotted underline + help cursor) and
   on-brand. Scoped to the hub so it can't bleed into other pages. */
.template-hub2026 .sn-byod {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: help;
    font-weight: 600;
    color: var(--h26-accent);
    border: 0;
}
.template-hub2026 .sn-byod:hover { text-decoration-style: solid; }

.template-hub2026 .sn-h-foot-bottom {
    margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--h26-line);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; color: var(--h26-text-3); flex-wrap: wrap; gap: 12px;
}

/* ============================================================
   Responsive breakpoints
   ============================================================ */
@media (max-width: 1080px) {
    .template-hub2026 { --h26-gutter: 22px; }
    .template-hub2026 .sn-h-signal-grid { grid-template-columns: 1fr; }
    .template-hub2026 .sn-h-signal-aside { position: static; }
}
@media (max-width: 860px) {
    .template-hub2026 .sn-h-nav,
    .template-hub2026 .sn-h-search { display: none !important; }
    .template-hub2026 .sn-h-burger { display: grid; }
    .template-hub2026 .sn-h-auth .sn-h-signin { display: none; }
    .template-hub2026 .sn-h-editsite { display: none !important; }
    .template-hub2026 .sn-h-featured-grid { grid-template-columns: repeat(2, 1fr); }
    .template-hub2026 .sn-h-foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .template-hub2026 .sn-h-foot-grid > div:first-child { grid-column: 1 / -1; }
    .template-hub2026 .sn-h-drawer.open { display: flex; }
}
@media (max-width: 560px) {
    /* A logo sized for the desktop bar would swallow a phone header, so cap it here and let the bar height
       follow that capped value. Written as a separate ceiling on the image rather than by redefining
       --sn-logo-h in terms of itself, which is a cycle and makes the property invalid. Header only — the
       footer is not a fixed bar and can show the logo at full size. */
    .template-hub2026 { --h26-gutter: 16px; --h26-header-h: max(60px, calc(min(var(--sn-logo-h), 44px) + 20px)); }
    .template-hub2026 .sn-h-header .sn-h-logo-img { max-height: min(var(--sn-logo-h, 38px), 44px); }
    .template-hub2026 .sn-h-featured-grid { grid-template-columns: 1fr; }
    .template-hub2026 .h-display { letter-spacing: -.02em; }
}
@media (max-width: 380px) {
    .template-hub2026 .sn-h-foot-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .template-hub2026 .h-pill-live .blip { animation: none !important; }
}

/* ============================================================
   Auth modal (sign in / register)
   ============================================================ */
.template-hub2026 .sn-h-authmodal {
    position: fixed; inset: 0; z-index: 300;
    display: grid; place-items: center; padding: 20px;
}
.template-hub2026 .sn-h-authmodal[hidden] { display: none; }
.template-hub2026 .sn-h-authmodal-overlay {
    position: absolute; inset: 0;
    background: rgba(4, 5, 9, .66);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.template-hub2026 .sn-h-authmodal-card {
    position: relative;
    width: min(440px, 100%);
    border-radius: var(--h26-r-lg);
    box-shadow: var(--h26-shadow-lg);
    border: 1px solid var(--h26-line-2);
    background: var(--h26-surface);
}
.template-hub2026 .sn-h-authview[hidden] { display: none; }
.template-hub2026 .sn-h-authhead { padding: 20px 22px 0; display: flex; gap: 13px; align-items: flex-start; }
.template-hub2026 .sn-h-authicon {
    width: 38px; height: 38px; border-radius: 10px; flex: none;
    display: grid; place-items: center; color: #fff; font-size: 17px;
    background: linear-gradient(150deg, var(--h26-accent), var(--h26-accent-2));
    box-shadow: 0 4px 14px -4px rgba(var(--bs-primary-rgb), .7);
}
.template-hub2026 .sn-h-authttl { font-family: var(--h26-font-display); font-weight: 600; font-size: 18px; color: var(--h26-text); }
.template-hub2026 .sn-h-authsub { color: var(--h26-text-2); font-size: 13px; margin-top: 3px; line-height: 1.45; }
.template-hub2026 .sn-h-authbody { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 13px; }
/* Only scroll when the form genuinely exceeds the viewport (header + modal
   padding ≈ 150px). The old min(74vh, 720px) capped at 720px and scrolled even
   on tall windows with room to spare. */
.template-hub2026 .sn-h-authscroll { max-height: calc(100vh - 150px); overflow-y: auto; gap: 14px; }
.template-hub2026 .sn-h-authrow { display: block; }
.template-hub2026 .sn-h-authrow > span:first-child { font-size: 12.5px; color: var(--h26-text-2); display: block; margin-bottom: 6px; }
.template-hub2026 .sn-h-authfield {
    display: flex; align-items: center; gap: 9px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--h26-line-2);
    border-radius: var(--h26-r-sm);
    padding: 0 13px;
}
.template-hub2026 .sn-h-authfield:focus-within { border-color: var(--h26-accent); }
.template-hub2026 .sn-h-authfield > i { color: var(--h26-text-3); }
.template-hub2026 .sn-h-authfield input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: var(--h26-text); font-size: 14px; padding: 12px 0; font-family: var(--h26-font-body);
}
.template-hub2026 .sn-h-authfield input::placeholder { color: var(--h26-text-3); }
/* Override Chrome/WebKit autofill: it forces a pale background + dark text that
   ignores the field's own styling. Repaint the dark field via an inset shadow
   and keep the light text. The 9999s transition defers the autofill repaint so
   the dark fill sticks. */
.template-hub2026 .sn-h-authfield input:-webkit-autofill,
.template-hub2026 .sn-h-authfield input:-webkit-autofill:hover,
.template-hub2026 .sn-h-authfield input:-webkit-autofill:focus,
.template-hub2026 .sn-h-authfield input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--h26-text);
    -webkit-box-shadow: 0 0 0 1000px #0d0f17 inset;
    box-shadow: 0 0 0 1000px #0d0f17 inset;
    caret-color: var(--h26-text);
    transition: background-color 9999s ease-in-out 0s;
}
.template-hub2026 .sn-h-eye { background: transparent; border: none; color: var(--h26-text-3); cursor: pointer; padding: 4px; }
.template-hub2026 .sn-h-eye:hover { color: var(--h26-text-2); }
.template-hub2026 .sn-h-authhint { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 11.5px; }
.template-hub2026 .sn-h-authhint a { color: var(--h26-accent-2); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.template-hub2026 .sn-h-authopts { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.template-hub2026 .sn-h-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--h26-text-2); cursor: pointer; }
.template-hub2026 .sn-h-check input { accent-color: var(--h26-accent); width: 15px; height: 15px; }
.template-hub2026 .sn-h-authopts a { font-size: 13px; color: var(--h26-accent-2); text-decoration: none; }
.template-hub2026 .sn-h-authalt { font-size: 12.5px; text-align: center; line-height: 1.9; color: var(--h26-text-3); margin-top: 6px; }
.template-hub2026 .sn-h-authalt a { color: var(--h26-accent-2); text-decoration: none; }
.template-hub2026 .sn-h-authnotice {
    display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--h26-accent-2);
    background: rgba(var(--bs-info-rgb), .1); border: 1px solid rgba(var(--bs-info-rgb), .35);
    border-radius: var(--h26-r-sm); padding: 11px 14px;
}
.template-hub2026 .sn-h-authoff { position: relative; padding: 34px 28px 28px; text-align: center; }
.template-hub2026 .sn-h-authoff-icon {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 18px; display: grid; place-items: center;
    background: rgba(245, 158, 11, .13); border: 1px solid rgba(245, 158, 11, .4); color: var(--h26-warning); font-size: 24px;
}
@media (max-width: 460px) {
    .template-hub2026 .sn-h-authmodal { padding: 10px; }
    .template-hub2026 .sn-h-authmodal-card { width: 100%; }
}