/*
 * Global hub theme. Loaded by App.razor for all pages (public + admin).
 * Tokens align with the 2025 GDOTS brand book:
 *   docs/superpowers/references/gdots-brand-book-2025.pdf
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
    /* Brand-mandated palette (brand book pages 6-7) */
    --brand-foundation: #666666;     /* Cool Gray, Primary Foundation */
    --brand-primary: #074973;        /* Regatta Blue, Primary Accent */
    --brand-primary-dark: #003047;   /* Regatta Blue gradient dark */
    --brand-gd-blue: #003087;        /* GD Blue — logo color in light contexts */
    --brand-gold: #ECB85D;           /* Golden secondary accent */
    --brand-sienna: #AC4B38;         /* Burnt Sienna secondary accent */
    --brand-green: #7E8C66;          /* Green secondary accent */

    /* Tints from the brand book */
    --brand-foundation-50: #B2B3B3;
    --brand-foundation-30: #D1D1D1;
    --brand-foundation-10: #EFF0F0;
    --brand-primary-50: #82A4B8;
    --brand-primary-30: #B4C8D4;
    --brand-primary-10: #E6ECF1;

    /* Surfaces and neutrals */
    --surface-canvas: #faf9f8;
    --surface-card: #ffffff;
    --border-color: #edebe9;
    --text-primary: #201f1e;
    --text-secondary: #605e5c;
    --text-heading: var(--brand-foundation);   /* Cool Gray #666 — H1/H2 color across hub + admin */

    /* FluentUI accent override */
    --accent-base-color: var(--brand-primary);
    --accent-fill-rest: var(--brand-primary);
    --accent-fill-hover: var(--brand-primary-dark);
    --accent-fill-active: var(--brand-primary-dark);
    --accent-foreground-rest: var(--brand-primary);
    --accent-foreground-hover: var(--brand-primary-dark);
    --neutral-foreground-rest: var(--text-primary);
    --type-ramp-base-font-family: 'Roboto', system-ui, -apple-system, sans-serif;

    /* Typography ramp tokens — public-page scale only. The .admin-page
       rules below intentionally hard-code their own sizes (22/18/12/14)
       and do not consume these tokens; update both if you change the
       public ramp. */
    --type-eyebrow-size: 11px;
    --type-eyebrow-weight: 700;
    --type-eyebrow-tracking: 0.12em;

    --type-h1-size: 36px;
    --type-h1-weight: 300;

    --type-subtitle-size: 16px;
    --type-subtitle-weight: 300;

    --type-h2-size: 26px;
    --type-h2-weight: 300;

    --type-h3-size: 14px;
    --type-h3-weight: 700;
    --type-h3-tracking: 0.08em;

    --type-h4-size: 15px;
    --type-h4-weight: 500;

    --type-body-size: 16px;
    --type-body-weight: 300;
    --type-body-line-height: 1.6;

    --type-caption-size: 13px;
    --type-caption-weight: 300;

    --type-code-size: 14px;
    --type-code-weight: 400;
}

body {
    margin: 0;
    background: var(--surface-canvas);
    color: var(--text-primary);
    font-family: var(--type-ramp-base-font-family);
    font-weight: 300;
}

/* ---- Typography hierarchy (brand book pages 14-15) ---- */
.hub-page h1,
.hub-page-title {
    font-family: 'Roboto', sans-serif;
    font-weight: var(--type-h1-weight);
    font-size: var(--type-h1-size);
    color: var(--text-heading);
    line-height: 1.15;
    margin: 0 0 6px;
}
/* FocusOnNavigate (Routes.razor) programmatically focuses h1 on route changes
   so screen readers announce the new page. Blazor adds tabindex="-1" so the
   element can receive .focus() — but tabindex="-1" also means it isn't part
   of the tab order, so a keyboard user can never tab to it. The focus ring
   is always programmatic, never keyboard, so :focus-visible never legitimately
   applies here.
   Target the tabindex="-1" marker directly (works on both .hub-page and
   .admin-page headings — the prior class-scoped rule missed admin pages). */
[tabindex="-1"]:focus {
    outline: none;
}
.hub-page-subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: var(--type-subtitle-weight);
    font-size: var(--type-subtitle-size);
    color: var(--text-secondary);
    margin: 0 0 28px;
    max-width: 60ch;
}
.hub-page h2,
.hub-section-heading {
    font-family: 'Roboto', sans-serif;
    font-weight: var(--type-h2-weight);
    font-size: var(--type-h2-size);
    color: var(--text-heading);
    line-height: 1.2;
    margin: 32px 0 4px;
    padding: 0;
    border: 0;
}
.hub-page h2::after,
.hub-section-heading::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background: var(--brand-primary);
    margin-top: 8px;
    margin-bottom: 16px;
}
.hub-page h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: var(--type-h3-weight);
    font-size: var(--type-h3-size);
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: var(--type-h3-tracking);
    margin: 24px 0 8px;
}
.hub-page h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: var(--type-h4-weight);
    font-size: var(--type-h4-size);
    color: var(--text-primary);
    margin: 20px 0 8px;
}
.hub-eyebrow,
.hub-section-overline {
    font-family: 'Roboto', sans-serif;
    font-weight: var(--type-eyebrow-weight);
    font-size: var(--type-eyebrow-size);
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: var(--type-eyebrow-tracking);
    margin: 0 0 8px;
    display: block;
}
.hub-page p,
.hub-page li {
    font-family: 'Roboto', sans-serif;
    font-weight: var(--type-body-weight);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
    margin: 0 0 12px;
}
.hub-page ul,
.hub-page ol {
    margin: 0 0 12px;
    padding-left: 24px;
}
.hub-page code {
    font-family: 'Consolas', monospace;
    font-weight: var(--type-code-weight);
    font-size: var(--type-code-size);
    background: var(--brand-foundation-10);
    padding: 1px 6px;
    border-radius: 2px;
}
.hub-page a {
    color: var(--brand-primary);
}

/* Raw <table> markup in guide content. FluentUI Blazor doesn't style native
   tables (it ships FluentDataGrid for data); without these rules tables
   collapse to borderless text rows. Scoped to .hub-page so FluentDataGrid's
   internal <table> rendering is untouched. */
.hub-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
}
.hub-page thead {
    background: var(--brand-primary);
    color: #ffffff;
}
.hub-page th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--brand-primary-dark);
}
.hub-page td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 300;
    vertical-align: top;
}
.hub-page tbody tr:last-child td {
    border-bottom: none;
}
.hub-page tbody tr:nth-child(even) {
    background: var(--surface-canvas);
}

/* Stacked FluentMessageBar callouts need vertical breathing room;
   the custom element renders flush by default. */
.hub-page fluent-message-bar {
    margin-block: 12px;
}

/* (FocusOnNavigate H1 outline suppression now lives near `.hub-page-title`
    via the [tabindex="-1"]:focus selector — broader and class-agnostic.) */

/* ---- Layout containers — FluentUI elevated-card pattern ----
   Body canvas (--surface-canvas) is the "frame"; .hub-page and .admin-page
   render as floating white cards with a soft shadow. Left rail and right
   TOC sit on the canvas so the card is the visual focus. */
.hub-page {
    padding: 28px 36px;
    max-width: 920px;
    margin: 24px auto;
    background: var(--surface-card);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Two-column shell: card grows to fill the body area; TOC stays at 220px right. */
.hub-page-with-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 32px;
    margin: 24px;
    padding: 0;
    align-items: start;
}
.hub-page-with-toc > .hub-page {
    margin: 0;
    max-width: none;
}
.hub-page-with-toc > .hub-toc {
    position: sticky;
    top: 24px;
    background: transparent;
    border-left: none;
}

@media (max-width: 1200px) {
    .hub-page-with-toc {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .hub-page-with-toc > .hub-toc {
        display: none;
    }
}
.hub-home-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 28px 48px;
}
.hub-form-page {
    max-width: 680px;
}

/* ---- Landing hero: half-photo + brand-angle composition (brand book p18) ----
   Layer stack (z-index, bottom→top):
     0. .hub-hero            — solid Regatta Blue base / left-half color
     1. .hub-hero-photo      — photograph, positioned right 50%
     2. .hub-hero-tint       — full-hero blue multiply tint (visible over photo)
     2. .hub-hero-scrim      — 125° gradient bridging the blue↔photo seam
     3. .hub-hero-inner      — content (overline, h1, paragraph)
*/
.hub-hero {
    position: relative;
    background: var(--brand-primary);
    border-bottom: 1px solid var(--brand-primary-dark);
    overflow: hidden;
}
.hub-hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    z-index: 1;
    background-image: url('/assets/photos/hero-mountain.jpg');
    background-size: cover;
    background-position: center;
}
.hub-hero-tint {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--brand-primary);
    mix-blend-mode: multiply;
    opacity: 0.45;
}
.hub-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        125deg,
        var(--brand-primary) 0%,
        var(--brand-primary-dark) 50%,
        rgba(7, 73, 115, 0.85) 65%,
        rgba(7, 73, 115, 0.30) 75%,
        rgba(7, 73, 115, 0) 82%
    );
}
.hub-hero-inner {
    position: relative;
    z-index: 3;
    max-width: 980px;
    margin: 0 auto;
    padding: 44px 28px;
    width: 70%;
    box-sizing: border-box;
}
.hub-hero .hub-section-overline {
    color: var(--brand-gold);
    /* Hero markup uses <span class="hub-section-overline">; keep its old
       inline-block behavior so the overline shrink-wraps to its label
       width instead of stretching the full inner column. */
    display: inline-block;
    margin: 0 0 6px;
}
.hub-hero h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 38px;
    line-height: 1.12;
    letter-spacing: -0.005em;
    margin: 10px 0 18px;
    max-width: 620px;
    color: #ffffff;
}
.hub-hero p {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 580px;
    color: rgba(255, 255, 255, 0.92);
}

/* ---- Landing migration ribbon ---- */
.hub-migration-ribbon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-top: 28px;
    background: var(--brand-primary-10);
    border-left: 3px solid var(--brand-primary);
    font-size: 13px;
    color: var(--text-primary);
}
.hub-migration-ribbon a {
    color: var(--brand-primary);
    font-weight: 500;
    text-decoration: none;
    margin-left: auto;
    white-space: nowrap;
}
.hub-migration-ribbon strong {
    font-weight: 500;
}

/* ---- Landing audience doors ----
   The whole card is the anchor; .hub-door-cta is presentational text,
   not a nested <a>. HTML5 forbids nested anchors — keep the CTA a span. */
.hub-doors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 22px;
}
.hub-door {
    position: relative;
    display: block;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 22px 22px 20px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hub-door:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 14px rgba(7, 73, 115, 0.08);
}
.hub-door-num {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: var(--brand-primary);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.hub-door h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 17px;
    color: var(--text-primary);
    margin: 6px 0 8px;
}
.hub-door p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 16px;
}
.hub-door-cta {
    font-size: 13px;
    color: var(--brand-primary);
    font-weight: 500;
}
.hub-door-cta::after {
    content: ' →';
}

/* ---- Landing resource index ---- */
.hub-index {
    columns: 2;
    column-gap: 36px;
    margin-top: 4px;
}
.hub-index a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 9px 0;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--brand-foundation-30);
    font-size: 13px;
    break-inside: avoid;
}
.hub-index a:hover {
    color: var(--brand-primary);
}
.hub-index-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---- Landing responsive ---- */
@media (max-width: 760px) {
    .hub-doors { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    /* Hide the half-photo composition on narrow viewports — the photo
       compresses to a sliver that competes with the headline. Mobile
       falls back to the solid blue + scrim. */
    .hub-hero-photo,
    .hub-hero-tint {
        display: none;
    }
    .hub-hero-inner {
        width: 100%;
        padding: 32px 24px;
    }
    .hub-hero h1 { font-size: 30px; }
    .hub-index { columns: 1; }
}

/* ---- Make HubNavRail blend into the canvas (FluentUI elevated-card pattern) ----
   FluentNavGroup uses FluentAccordionItem under the hood; its visible surface
   is `.positioning-region` which defaults to ~rgb(251,251,251) — one shade
   lighter than --surface-canvas (#faf9f8). Match the canvas exactly so the
   rail recedes and the content card stands forward.
   UPGRADE HAZARD: re-verify after the FluentUI Blazor v5 migration —
   v5 reworks accordion internals and this selector may silently no-op. */
.fluent-nav-menu .positioning-region {
    background: var(--surface-canvas) !important;
}

/* FluentUI Blazor's stock CSS gives .fluent-nav-text a fixed pixel width,
   which truncates labels like "Managing My Account" or "SharePoint migration"
   well before the rail's actual right edge. Let the text fill whatever space
   the link container has after the icon. Ellipsis still kicks in if the
   label genuinely overflows.
   UPGRADE HAZARD: same as the .positioning-region override above —
   re-verify after the FluentUI Blazor v5 migration. */
.fluent-nav-menu .fluent-nav-text {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
}

/* ---- HubStep ---- */
.hub-step {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 14px 18px 14px 56px;
    position: relative;
    margin: 12px 0;
    background: var(--surface-card);
}
.hub-step-number {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hub-step p {
    margin: 0 0 8px;
}
.hub-step img {
    display: block;
    max-width: 480px;
    margin: 12px auto 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* ---- Logo ---- */
.hub-logo {
    display: inline-block;
    line-height: 0;
}
.hub-logo--light { color: #fff; }
.hub-logo--dark { color: var(--brand-gd-blue); }
.hub-logo svg { display: block; height: 18px; }

/* ---- In-page TOC (right-side rail on guide pages 1200px+) ---- */
.hub-toc {
    width: 220px;
    padding: 18px 0;
    background: transparent;
    font-family: 'Roboto', sans-serif;
}
.hub-toc-label {
    font-weight: var(--type-eyebrow-weight);
    font-size: var(--type-eyebrow-size);
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: var(--type-eyebrow-tracking);
    padding-left: 16px;
    margin-bottom: 12px;
}
.hub-toc-list {
    border-left: 2px solid var(--border-color);
}
.hub-toc a {
    display: block;
    padding: 6px 0 6px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.hub-toc a:hover {
    color: var(--brand-primary);
}
.hub-toc a.is-active {
    color: var(--brand-primary);
    font-weight: 500;
    border-left-color: var(--brand-primary);
    background: linear-gradient(90deg, rgba(7, 73, 115, 0.06), transparent 70%);
}
@media (max-width: 1200px) {
    .hub-toc { display: none; }
}

/* ---- Admin typography & page chrome (smaller-scale variant of .hub-page) ---- */
.admin-page {
    padding: 28px 36px;
    max-width: 1400px;
    margin: 24px auto;
    background: var(--surface-card);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
}
.admin-page > h1,
.admin-page h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: var(--text-heading);
    line-height: 1.2;
    margin: 0 0 12px 0;
}
.admin-page h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--text-heading);
    line-height: 1.2;
    margin: 24px 0 4px;
    padding: 0;
    border: 0;
}
.admin-page h2::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    background: var(--brand-primary);
    margin-top: 6px;
    margin-bottom: 12px;
}
.admin-page h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 16px 0 6px;
}
.admin-page p,
.admin-page li {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0 0 10px;
}
.admin-breadcrumb {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.admin-detail-list {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 6px 16px;
    max-width: 720px;
}
.admin-detail-list dt {
    font-weight: 600;
    color: var(--text-primary);
}
.admin-detail-list dd {
    margin: 0;
    color: var(--text-primary);
}
.admin-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}
.admin-timeline li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.admin-notes {
    list-style: none;
    padding: 0;
    margin: 0;
}
.admin-notes li {
    padding: 12px;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 8px;
}

/* ---- B2B form cards ---- */
.hub-form-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.hub-form-card h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: var(--type-h3-weight);
    font-size: var(--type-h3-size);
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: var(--type-h3-tracking);
    margin: 0 0 12px;
}
.hub-form-card .hub-field {
    margin-bottom: 12px;
}
.hub-form-card .hub-field:last-child { margin-bottom: 0; }
.hub-form-card label {
    display: block;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.hub-form-card .hub-hint {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* --- Launcher: avatar, waffle, popover, tiles --- */

.hub-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-gold);
    color: var(--brand-gd-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    border: none;
    padding: 0;
}

.hub-avatar--lg {
    width: 48px;
    height: 48px;
    font-size: 18px;
}

.hub-waffle-btn {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #fff;
    border-radius: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

.hub-waffle-btn:hover,
.hub-waffle-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.12);
}

.hub-brand-logo {
    height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    color: #fff;
    text-decoration: none;
}
/* FluentUI Blazor injects a global a:hover that recolors links to its
   accent. Re-assert white so the brand chrome doesn't tint on hover. */
.hub-brand-logo:hover,
.hub-brand-logo:focus-visible {
    color: #fff;
    text-decoration: none;
}

.hub-brand-pipe {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.32);
    margin: 0 4px;
    flex-shrink: 0;
    align-self: center;
}

.hub-brand-title {
    height: 48px;
    display: inline-flex;
    align-items: center;
    /* Asymmetric top padding optically centers uppercase-only text in the
       header row. Roboto's line-box reserves descender space that "GUEST HUB"
       doesn't use, so geometric centering looks ~2-3px too high. */
    padding: 2px 16px 0 10px;
    color: #fff;
    text-decoration: none;
    font-family: var(--type-ramp-base-font-family);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.hub-brand-title:hover,
.hub-brand-title:focus-visible {
    color: #fff;
    text-decoration: none;
}

.hub-avatar-btn {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.hub-avatar-btn:hover,
.hub-avatar-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.12);
}

.hub-waffle {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
    gap: 3px;
}

.hub-waffle span {
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 1px;
}

.hub-popover-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1000;
}

.hub-waffle-anchor,
.hub-profile-menu-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.hub-popover {
    position: absolute;
    top: calc(100% + 6px);
    background: var(--surface-card);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 13px;
    color: #201f1e;
    min-width: 280px;
    z-index: 1001;
}

.hub-popover--left  { left: 0; }
.hub-popover--right { right: 0; }

.hub-popover-foot {
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--surface-canvas);
    text-align: center;
    cursor: pointer;
    color: var(--brand-primary);
    font-size: 12px;
    text-decoration: none;
    display: block;
}

.hub-popover-foot:hover {
    background: #f3f2f1;
}

.hub-app-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 8px;
    gap: 4px;
}

.hub-app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 6px;
    border-radius: 4px;
    text-align: center;
    color: #201f1e;
    text-decoration: none;
    cursor: pointer;
}

.hub-app-tile:hover {
    background: #f3f2f1;
}

.hub-app-tile-label {
    font-family: var(--type-ramp-base-font-family);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.3;
    margin-top: 6px;
}

.hub-app-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.hub-app-icon--lg {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    font-size: 16px;
}

.hub-app-icon--regatta { background: var(--brand-primary); }
.hub-app-icon--gold    { background: var(--brand-gold); color: var(--brand-gd-blue); }
.hub-app-icon--sienna  { background: var(--brand-sienna); }
.hub-app-icon--green   { background: var(--brand-green); }
.hub-app-icon--cool-gray { background: var(--brand-foundation); }

.hub-section-h {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--brand-foundation);
    margin: 0 0 10px;
    font-weight: 500;
}

.hub-section-h:not(:first-of-type) {
    margin-top: 28px;
}

.hub-section-h .hub-section-h-aside {
    color: #999;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 8px;
}

.hub-section-h .hub-section-h-aside--stale {
    color: var(--brand-sienna);
}

.hub-app-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.hub-app-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
    color: #201f1e;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.hub-app-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 2px 6px rgba(7, 73, 115, 0.08);
}

.hub-app-card-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

/* Override FluentUI's internal header gutter so our header content sits flush
   with the viewport edges. .header-gutters ships with margin: 8px 24px; we
   zero the horizontal margin and keep the 8px vertical so the 32px content
   cluster stays centered in the 48px header.

   !important is required because FluentUI ships this rule from a Blazor-scoped
   stylesheet whose [b-XXXX] attribute selector (hash rotates per build)
   outscores any global selector we can author. */
.header > .header-gutters {
    margin-inline: 0 !important;
}

.hub-profile-menu {
    width: 320px;
}

.hub-profile-menu-head {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
}

.hub-profile-menu-name {
    font-family: var(--type-ramp-base-font-family);
    font-size: 15px;
    font-weight: 500;
    color: #201f1e;
}

.hub-profile-menu-email {
    font-family: var(--type-ramp-base-font-family);
    font-size: 12px;
    font-weight: 300;
    color: var(--brand-foundation);
    margin-top: 2px;
}

.hub-profile-menu-row {
    font-family: var(--type-ramp-base-font-family);
    font-size: 14px;
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #201f1e;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.hub-profile-menu-row:hover {
    background: #f3f2f1;
}

.hub-profile-menu-row .hub-profile-menu-ext {
    margin-left: auto;
    font-size: 11px;
    color: #999;
}

.hub-profile-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

.hub-signin-link {
    height: 48px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 13px;
    padding: 0 16px;
    border-radius: 0;
    text-decoration: none;
}

.hub-signin-link:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Entra group picker (admin tile editor) */
.entra-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.entra-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--surface-canvas);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 12px;
}

.entra-group-chip-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--brand-foundation);
}

.entra-group-error {
    color: var(--brand-sienna);
    font-size: 12px;
    margin: 6px 0 0;
}

.entra-group-empty {
    color: var(--brand-foundation);
    font-size: 12px;
    margin: 6px 0 0;
}

.entra-group-results {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.entra-group-result {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font: inherit;
}

.entra-group-result:hover {
    background: var(--surface-canvas);
}

.entra-group-result-id {
    font-size: 11px;
    color: var(--brand-foundation);
    font-family: monospace;
}

/* Tile editor color swatches */
.tile-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    padding: 0;
}

.tile-color-swatch--selected {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.hub-field-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-foundation);
    margin-bottom: 4px;
}

/* ==== Header help (?) menu ==== */

.hub-help-menu-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.hub-help-btn {
    appearance: none;
    background: transparent;
    border: none;
    /* Override user-agent <button> padding (varies 1-2px by browser) — it was
       squeezing the 22px glyph circle into a 20px oval. */
    padding: 0;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 8px;
    transition: background-color 120ms ease;
}

.hub-help-btn:hover,
.hub-help-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    outline: none;
}

.hub-help-glyph {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Roboto's ? glyph is top-heavy in its em-box, so geometric centering
       looks ~1.5px high. Nudge the glyph down. */
    padding-top: 2px;
    box-sizing: border-box;
}

.hub-help-menu {
    min-width: 240px;
}

/* Download-as-PDF button on guide pages.
   Wrapper has .hub-no-print so the button is suppressed in PDF output. */
.hub-pdf-download {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.4em 0.85em;
    border: 1px solid var(--brand-primary);
    border-radius: 4px;
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95em;
    background: #ffffff;
    transition: background 0.15s, color 0.15s;
}
.hub-pdf-download:hover {
    background: var(--brand-primary);
    color: #ffffff;
}

/* ====================================================================
   /admin/egs/detail two-column layout
   See docs/superpowers/specs/2026-04-27-egs-detail-redesign-design.md
   ==================================================================== */

.admin-page--egs-detail .egs-detail-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 960px) {
    .admin-page--egs-detail .egs-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Sticky rail — admin header is ~56px; add some breathing room. */
.admin-page--egs-detail .egs-detail-rail {
    position: sticky;
    top: 72px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 960px) {
    .admin-page--egs-detail .egs-detail-rail {
        position: static;
    }
}

.admin-page--egs-detail .egs-rail-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 13px;
}

.admin-page--egs-detail .egs-rail-card--actions {
    border-color: var(--brand-primary);
}

.admin-page--egs-detail .egs-rail-card .egs-rail-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-foundation);
    margin-bottom: 4px;
}

.admin-page--egs-detail .egs-rail-card .egs-rail-display-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--brand-primary);
    line-height: 1.25;
}

.admin-page--egs-detail .egs-rail-card .egs-rail-secondary {
    font-size: 12px;
    color: var(--brand-foundation);
}

.admin-page--egs-detail .egs-rail-card .egs-rail-mono {
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: 11px;
    background: var(--brand-foundation-10);
    padding: 2px 4px;
    border-radius: 2px;
    word-break: break-all;
}

.admin-page--egs-detail .egs-rail-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.admin-page--egs-detail .egs-rail-pill {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--brand-foundation-10);
    color: var(--brand-primary);
}

.admin-page--egs-detail .egs-rail-pill--success {
    background: #e7f5ec;
    color: #2b6a3f;
}

.admin-page--egs-detail .egs-rail-pill--warning {
    background: #fff4e5;
    color: var(--brand-sienna);
}

.admin-page--egs-detail .egs-rail-pill--error {
    background: #fde7e3;
    color: #c2410c;
}

.admin-page--egs-detail .egs-verdict {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
}

.admin-page--egs-detail .egs-verdict--ready { color: var(--brand-green); }
.admin-page--egs-detail .egs-verdict--warning { color: var(--brand-sienna); }
.admin-page--egs-detail .egs-verdict--error { color: #c2410c; }

.admin-page--egs-detail .egs-rail-action-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-page--egs-detail .egs-rail-action-stack > * {
    width: 100%;
}

.admin-page--egs-detail .egs-rail-reason {
    margin-top: 4px;
    font-size: 11px;
    color: var(--brand-foundation);
}

/* Tab pane: flash bar + tabs + tab body. */
.admin-page--egs-detail .egs-detail-pane {
    min-width: 0; /* lets the grid column shrink without overflow when content is wide */
}

.admin-page--egs-detail .egs-flash-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.admin-page--egs-detail .egs-tab-body {
    padding-top: 12px;
}
/* FluentTabs polish — applied to all admin pages so the next page that
   adds tabs inherits the styling. FluentUI Blazor 4.x ships almost no
   visual structure for FluentTabs (no tablist border, no gap, ~20px
   active indicator), which is too austere for our admin shell. */
.admin-page fluent-tabs::part(tablist) {
    border-bottom: 1px solid var(--border-color);
    gap: 4px;
}

.admin-page fluent-tab {
    padding: 8px 16px;
    font-size: 13px;
    color: var(--brand-foundation);
    cursor: pointer;
}

.admin-page fluent-tab[aria-selected="true"] {
    color: var(--brand-primary);
}

.admin-page fluent-tab:hover:not([aria-selected="true"]) {
    color: var(--brand-primary-dark);
    background: var(--brand-foundation-10);
}

.admin-page fluent-tabs::part(activeIndicator) {
    height: 2px;
    background: var(--brand-primary);
}

/* Action card — tone down the accent border so the disabled empty-state
   button doesn't dominate the rail. The page's primary action is already
   obvious from its position below the readiness + UPN-preview cards. */
.admin-page--egs-detail .egs-rail-card--actions {
    border-color: var(--border-color);
    padding: 8px 10px;
}

.admin-page--egs-detail .egs-rail-card--actions .egs-rail-action-stack {
    gap: 6px;
}

/* Tab-body section headings — small uppercase labels instead of full h2. */
.admin-page--egs-detail .egs-tab-body h2 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-foundation);
    margin: 20px 0 8px;
    border-bottom: none;
}

.admin-page--egs-detail .egs-tab-body h2:first-child {
    margin-top: 0;
}

/* ============================================================
   Guide content shortcodes — callouts and numbered steps.
   These replace per-page <FluentMessageBar> and <HubStep> usage
   inside DB-authored guide bodies. CSS-only; no JS, no FluentUI
   dependency.
   ============================================================ */

.hub-callout {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--brand-primary);
    background: #f4f7fa;
    border-radius: 4px;
}

.hub-callout__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--brand-primary);
}

.hub-callout__body > :first-child { margin-top: 0; }
.hub-callout__body > :last-child  { margin-bottom: 0; }

.hub-callout--info    { border-left-color: var(--brand-primary); background: #eef3f8; }
.hub-callout--info    .hub-callout__title { color: var(--brand-primary); }

.hub-callout--warning { border-left-color: var(--brand-gold); background: #fdf6e7; }
.hub-callout--warning .hub-callout__title { color: #8a6515; }

.hub-callout--success { border-left-color: var(--brand-green); background: #f1f4ec; }
.hub-callout--success .hub-callout__title { color: #4f5c3d; }

.hub-callout--error   { border-left-color: var(--brand-sienna); background: #f9ece8; }
.hub-callout--error   .hub-callout__title { color: var(--brand-sienna); }

/* Numbered procedure steps. Counter on the parent, ::before on each item. */
.hub-step-list {
    counter-reset: hub-step;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.hub-step {
    counter-increment: hub-step;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1.25rem 1.5rem 1.25rem 4rem;
    position: relative;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.hub-step::before {
    content: counter(hub-step);
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hub-step__title {
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.hub-step > :last-child { margin-bottom: 0; }

/* Admin tables and badges used by guide list and history. */

.hub-admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.hub-admin-table th,
.hub-admin-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.hub-admin-table th {
    background: #f4f3f2;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-foundation);
}

.hub-admin-table tr:hover td {
    background: #f9f8f7;
}

.hub-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: #e8e6e4;
    color: var(--brand-foundation);
    font-size: 0.8rem;
    font-weight: 600;
}

.hub-badge--accent { background: var(--brand-primary); color: #fff; }
.hub-badge--danger { background: var(--brand-sienna); color: #fff; }

.hub-form-row {
    margin-bottom: 1rem;
}

.hub-form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--brand-foundation);
}

/* Language switcher */
.hub-language-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 16px;
}
.hub-lang-btn {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.hub-lang-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}
.hub-lang-btn.active {
    color: #fff;
    font-weight: 700;
}
.hub-lang-sep {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
}