/* --- 1111 Studios brand fonts (self-hosted, Liquid Sky) --- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/archivo-500.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/archivo-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/archivo-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');}
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/michroma-400.woff2') format('woff2');}

/* Shared portal design system + layout + loading states
 *
 * 1111 Studios (2026-07-09): black + 1111 Studios brass (#2f5f86).
 * Token names keep --metal-* for call-site compatibility; values are teal/black.
 * White-label later: override :root without rewriting components.
 * Legacy alias: --portal-brand → --metal-accent.
 */

/* ============================================================
   Design tokens — 1111 Studios brass + black
   ============================================================ */
:root {
    /* Structure (black / near-black) */
    --metal-void: #000000;
    --metal-ink: #000000;
    --metal-charcoal: #0a0a0a;
    --metal-slate: #141414;

    /* Surfaces */
    --metal-page: #eef1f4;
    --metal-surface: #f6f8fa;
    --metal-card: #ffffff;
    --metal-border: #c5ced9;
    --metal-border-soft: #dce3eb;
    --metal-muted: #94a3b8;
    --metal-text: #0f172a;
    --metal-text-secondary: #475569;
    --metal-text-on-dark: #f8fafc;
    --metal-text-on-accent: #000000;

    /* Accent — 1111 Studios brass (official #2f5f86 family) */
    --metal-accent: #2f5f86;
    --metal-accent-hover: #274f6e;
    /* Small-text variants for AA on light/dark */
    --metal-accent-on-light: #2c5578;
    --metal-accent-on-dark: #9cc9e8;
    --metal-accent-soft: rgba(47, 95, 134, 0.14);
    --metal-accent-ring: rgba(47, 95, 134, 0.35);
    --metal-accent-border: #26547a;

    /* Secondary process (deeper teal) */
    --metal-process: #274f6e;
    --metal-process-soft: rgba(143, 106, 48, 0.12);

    /* Status */
    --metal-ok: #059669;
    --metal-ok-soft: #d1fae5;
    --metal-warn: #b45309;
    --metal-warn-soft: #fef3c7;
    --metal-danger: #dc2626;
    --metal-danger-soft: #fee2e2;
    --metal-info: #0369a1;
    --metal-info-soft: #e0f2fe;

    /* Production / in-shop (redesign v2) — violet, distinct from teal brand
       so an "in production" state never reads as an accent/CTA. */
    --metal-prod: #6a4df0;
    --metal-prod-soft: #ece7fe;

    /* Elevation */
    --metal-shadow-sm: 0 1px 2px rgba(11, 15, 20, 0.06);
    --metal-shadow-md: 0 4px 14px rgba(11, 15, 20, 0.10);
    --metal-shadow-lg: 0 12px 40px rgba(11, 15, 20, 0.16);
    --metal-shadow-sticky: 0 8px 24px rgba(11, 15, 20, 0.28);

    /* Shape + type */
    --metal-radius-sm: 0.375rem;
    --metal-radius: 0.5rem;
    --metal-radius-lg: 0.75rem;
    --metal-radius-xl: 1rem;
    --metal-radius-pill: 9999px;
    --metal-font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --metal-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    --metal-font-display: "Michroma", "Eurostile", var(--metal-font);
    --metal-transition: 150ms ease;

    /* Touch + legacy */
    --portal-touch-min: 44px;
    /* Keep --portal-brand as alias so existing CSS/JS call sites pick up teal */
    --portal-brand: var(--metal-accent);
    --portal-brand-hover: var(--metal-accent-hover);
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    font-family: var(--metal-font);
    color: var(--metal-text);
    background-color: var(--metal-page);
}

/* Tabular nums for dimensions / money when marked */
.portal-num,
.total-box #grand-total,
.leg-input {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Shared chrome (token-backed — use these instead of inline #hex)
   ============================================================ */
.portal-header,
.portal-header-bar {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.875rem 1rem !important;
    background: var(--metal-ink);
    color: var(--metal-text-on-dark);
    border-bottom: 1px solid var(--metal-accent-border);
}

@media (min-width: 640px) {
    .portal-header,
    .portal-header-bar {
        padding: 1rem 1.5rem !important;
    }
}

.portal-header-tagline,
.portal-brand-text {
    color: var(--metal-accent);
}

.portal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

@media (min-width: 768px) {
    .portal-nav {
        width: auto;
    }
}

.portal-nav a,
.portal-nav button {
    min-height: var(--portal-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.portal-main {
    padding: 1rem;
}

@media (min-width: 640px) {
    .portal-main {
        padding: 1.5rem;
    }
}

.portal-page-title {
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--metal-text);
}

@media (min-width: 640px) {
    .portal-page-title {
        font-size: 1.875rem;
    }
}

.portal-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
}

.portal-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.portal-action-bar .btn,
.portal-action-bar a,
.portal-action-bar button {
    min-height: 2.25rem;
}

/* Cards + surfaces */
.portal-card {
    background: var(--metal-card);
    border: 1px solid var(--metal-border-soft);
    border-radius: var(--metal-radius-lg);
    box-shadow: var(--metal-shadow-sm);
    padding: 1.25rem;
    transition: border-color var(--metal-transition), box-shadow var(--metal-transition);
}

.portal-card:hover {
    border-color: var(--metal-accent-border);
    box-shadow: var(--metal-shadow-md);
}

.portal-card-static:hover {
    border-color: var(--metal-border-soft);
    box-shadow: var(--metal-shadow-sm);
}

/* Primary CTA — teal accent, dark text for readability */
.portal-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--portal-touch-min);
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--metal-radius);
    border: 1px solid var(--metal-accent);
    background: var(--metal-accent);
    color: var(--metal-text-on-accent);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--metal-transition), border-color var(--metal-transition);
}

.portal-btn-primary:hover {
    background: var(--metal-accent-hover);
    border-color: var(--metal-accent-hover);
    color: var(--metal-text-on-accent);
}

.portal-btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--metal-accent-ring);
}

/* Outline CTA (secondary next to teal primary) */
.portal-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--portal-touch-min);
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--metal-radius);
    border: 2px solid var(--metal-accent);
    background: var(--metal-card);
    color: var(--metal-accent);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--metal-transition), border-color var(--metal-transition);
}

.portal-btn-outline:hover {
    background: var(--metal-accent-soft);
    color: var(--metal-accent-hover);
    border-color: var(--metal-accent-hover);
}

.portal-btn-ghost-on-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: var(--metal-radius-sm);
    border: 1px solid rgba(248, 250, 252, 0.3);
    color: var(--metal-text-on-dark);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--metal-transition);
}

.portal-btn-ghost-on-dark:hover {
    background: rgba(248, 250, 252, 0.1);
}

/* Focus ring for inputs when pages use .input without local styles */
.input:focus,
.leg-input:focus {
    outline: none;
    border-color: var(--metal-accent);
    box-shadow: 0 0 0 1px var(--metal-accent);
}

/* Accent icon / link helpers */
.portal-accent {
    color: var(--metal-accent);
}

.portal-link {
    color: var(--metal-accent);
    text-decoration: none;
}

.portal-link:hover {
    text-decoration: underline;
    color: var(--metal-accent-hover);
}

/* Auth storefront shell (login / request-access / activate) */
.portal-auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, var(--metal-accent-soft), transparent 55%),
        var(--metal-page);
}

.portal-auth-card {
    width: 100%;
    max-width: 28rem;
    background: var(--metal-card);
    border: 1px solid var(--metal-border-soft);
    border-radius: var(--metal-radius-xl);
    box-shadow: var(--metal-shadow-md);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

@media (min-width: 640px) {
    .portal-auth-card {
        padding: 2rem;
    }
}

/* ---- D1 storefront: hub hero + refined tiles + auth card edge ---- */

.portal-hub-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 90% 45% at 50% -8%, var(--metal-accent-soft), transparent 50%),
        linear-gradient(180deg, var(--metal-surface) 0%, var(--metal-page) 40%, var(--metal-page) 100%);
}

.portal-hub-hero {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.25rem 1.35rem;
    border-radius: var(--metal-radius-xl);
    background:
        linear-gradient(135deg, var(--metal-ink) 0%, var(--metal-charcoal) 55%, #0a1214 100%);
    color: var(--metal-text-on-dark);
    box-shadow: var(--metal-shadow-md);
    border: 1px solid rgba(47, 95, 134, 0.35);
    position: relative;
    overflow: hidden;
}

.portal-hub-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            -18deg,
            transparent,
            transparent 11px,
            rgba(148, 163, 184, 0.04) 11px,
            rgba(148, 163, 184, 0.04) 12px
        );
    pointer-events: none;
}

.portal-hub-hero::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    /* Fixed 1111 Studios brass — the hero is 1111 Studios-branded for EVERY customer and must
       never pick up a tenant's accent, so this is hard-pinned, not var(--metal-accent). */
    background: linear-gradient(180deg, #2f5f86, #26547a);
}

.portal-hub-hero-inner {
    position: relative;
    z-index: 1;
}

.portal-hub-kicker {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Fixed 1111 Studios brass (see .portal-hub-hero::after) — never tenant-branded. */
    color: #9cc9e8;
    margin-bottom: 0.5rem;
}

.portal-hub-hero h1 {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--metal-text-on-dark);
}

@media (min-width: 640px) {
    .portal-hub-hero h1 {
        font-size: 1.65rem;
    }
}

.portal-hub-hero p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(248, 250, 252, 0.78);
    max-width: 36rem;
}

.portal-hub-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
    list-style: none;
    padding: 0;
}

.portal-hub-pill {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: var(--metal-radius-pill);
    border: 1px solid rgba(47, 95, 134, 0.45);
    background: rgba(47, 95, 134, 0.14);
    color: #e6d6b6;
}

.portal-hub-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--metal-text-secondary);
    margin: 0 0 0.75rem;
}

/* Hub portal tiles */
.portal-hub-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .portal-hub-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.portal-hub-tile {
    display: flex;
    flex-direction: column;
    background: var(--metal-card);
    border: 1px solid var(--metal-border-soft);
    border-radius: var(--metal-radius-xl);
    box-shadow: var(--metal-shadow-sm);
    padding: 1.25rem 1.25rem 1.1rem;
    text-decoration: none;
    color: inherit;
    min-height: 10.5rem;
    position: relative;
    overflow: hidden;
    transition: border-color var(--metal-transition), box-shadow var(--metal-transition), transform var(--metal-transition);
}

.portal-hub-tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--metal-accent);
    opacity: 0.85;
}

/* Company + admin tiles use 1111 Studios brass (same family as default tiles).
   Admin uses deeper process teal for light distinction. */
.portal-hub-tile.portal-hub-tile-company::before {
    background: var(--metal-accent);
}

.portal-hub-tile.portal-hub-tile-admin::before {
    background: var(--metal-process);
}

.portal-hub-tile:hover {
    border-color: var(--metal-accent-border);
    box-shadow: var(--metal-shadow-md);
    transform: translateY(-2px);
}

.portal-hub-tile .portal-hub-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--metal-radius);
    background: var(--metal-accent-soft);
    color: var(--metal-accent);
    font-size: 1.15rem;
    margin-bottom: 0.85rem;
}

.portal-hub-tile.portal-hub-tile-company .portal-hub-icon {
    background: var(--metal-accent-soft);
    color: var(--metal-accent);
}

.portal-hub-tile.portal-hub-tile-admin .portal-hub-icon {
    background: var(--metal-process-soft);
    color: var(--metal-process);
}

.portal-hub-tile-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--metal-text);
    margin: 0 0 0.35rem;
}

.portal-hub-tile-desc {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--metal-text-secondary);
    margin: 0;
    flex: 1;
}

.portal-hub-tile-cta {
    margin-top: 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--metal-accent-on-light);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.portal-hub-tile.portal-hub-tile-company .portal-hub-tile-cta {
    color: var(--metal-accent-on-light);
}

.portal-hub-tile.portal-hub-tile-admin .portal-hub-tile-cta {
    color: var(--metal-process);
}

.portal-hub-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--metal-border-soft);
    font-size: 0.7rem;
    color: var(--metal-muted);
    text-align: center;
}

/* Auth card: teal top edge + mark row */
.portal-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--metal-accent), var(--metal-accent-border), transparent 90%);
}

.portal-auth-mark {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--metal-border-soft);
}

.portal-auth-mark img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--metal-radius);
}

.portal-auth-mark-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--metal-text);
    letter-spacing: -0.01em;
}

.portal-auth-mark-sub {
    font-size: 0.7rem;
    color: var(--metal-text-secondary);
    margin-top: 0.1rem;
}

.portal-auth-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--metal-text);
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
}

.portal-auth-lead {
    font-size: 0.875rem;
    color: var(--metal-text-secondary);
    margin: 0 0 1.35rem;
    line-height: 1.45;
}

.portal-field-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--metal-text-secondary);
    margin-bottom: 0.35rem;
}

.portal-auth-input {
    width: 100%;
    border: 1px solid var(--metal-border);
    border-radius: var(--metal-radius);
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    background: var(--metal-card);
    color: var(--metal-text);
    box-sizing: border-box;
    min-height: var(--portal-touch-min);
    transition: border-color var(--metal-transition), box-shadow var(--metal-transition);
}

.portal-auth-input:focus {
    outline: none;
    border-color: var(--metal-accent);
    box-shadow: 0 0 0 3px var(--metal-accent-ring);
}

.portal-auth-error {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #991b1b;
    background: var(--metal-danger-soft);
    border: 1px solid #fecaca;
    border-radius: var(--metal-radius);
    padding: 0.5rem 0.75rem;
}

.portal-auth-error.hidden {
    display: none !important;
}

.portal-auth-foot {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--metal-text-secondary);
}

/* Sticky quote total on phones */
@media (max-width: 639px) {
    .portal-total-sticky {
        position: sticky;
        bottom: 0.75rem;
        z-index: 20;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        box-shadow: var(--metal-shadow-sticky);
    }

    .portal-total-sticky .total-box #grand-total {
        font-size: 2.5rem !important;
    }
}

.portal-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}

.portal-table-wrap::after {
    content: "";
    display: block;
    height: 1px;
}

.portal-scroll-hint {
    font-size: 10px;
    color: var(--metal-muted);
    margin-top: 0.35rem;
}

@media (min-width: 768px) {
    .portal-scroll-hint {
        display: none;
    }
}

/* Line items: larger touch targets on mobile */
@media (max-width: 639px) {
    .line-item .input,
    .line-item select.input {
        font-size: 16px; /* prevents iOS zoom on focus */
        min-height: var(--portal-touch-min);
    }

    .line-item .leg-input {
        min-height: 2.25rem;
        width: 4.5rem;
    }

    .line-item > .flex.items-center.justify-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ---- Loading: full-page overlay ---- */
.portal-page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 15, 20, 0.5);
    backdrop-filter: blur(2px);
    padding: 1rem;
}

.portal-page-loader.hidden {
    display: none !important;
}

.portal-page-loader-card {
    background: var(--metal-card);
    border-radius: var(--metal-radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--metal-shadow-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 12rem;
    max-width: 20rem;
    text-align: center;
    border: 1px solid var(--metal-border-soft);
}

.portal-page-loader-text {
    font-size: 0.875rem;
    color: var(--metal-text-secondary);
    margin: 0;
}

/* ---- Loading: spinners ---- */
.portal-spinner {
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid var(--metal-border-soft);
    border-top-color: var(--metal-accent);
    border-radius: 50%;
    animation: portal-spin 0.7s linear infinite;
    flex-shrink: 0;
}

.portal-spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.portal-spinner-xs {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 2px;
    display: inline-block;
    vertical-align: middle;
}

@keyframes portal-spin {
    to {
        transform: rotate(360deg);
    }
}

.portal-inline-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--metal-muted);
}

.portal-region-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 2.5rem 1rem;
    color: var(--metal-text-secondary);
    font-size: 0.875rem;
}

.portal-btn-loading {
    pointer-events: none;
    opacity: 0.85;
}

.portal-btn-loading .portal-spinner-sm {
    margin-right: 0.35rem;
}

/* Price pending pulse */
#grand-total.price-pending {
    opacity: 0.65;
}

#price-status .portal-inline-loading {
    justify-content: center;
}

/* Sketch import dropzone */
.sketch-dropzone.importing {
    pointer-events: none;
    position: relative;
}

.sketch-dropzone.importing::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--metal-accent-soft);
    border-radius: inherit;
    z-index: 1;
}

.sketch-dropzone.importing::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.75rem 0 0 -0.75rem;
    border: 3px solid var(--metal-border);
    border-top-color: var(--metal-accent);
    border-radius: 50%;
    animation: portal-spin 0.7s linear infinite;
    z-index: 2;
}

/* Table skeleton */
.portal-skeleton {
    background: linear-gradient(
        90deg,
        var(--metal-surface) 25%,
        var(--metal-border-soft) 50%,
        var(--metal-surface) 75%
    );
    background-size: 200% 100%;
    animation: portal-shimmer 1.2s ease-in-out infinite;
    border-radius: 0.25rem;
}

.portal-skeleton-cell {
    height: 0.875rem;
    width: 100%;
    max-width: 6rem;
}

.portal-skeleton-row td {
    vertical-align: middle;
}

@keyframes portal-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Admin button stack on mobile */
.portal-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portal-admin-actions > * {
    flex: 1 1 auto;
    min-width: min(100%, 10rem);
    justify-content: center;
    text-align: center;
}

@media (min-width: 640px) {
    .portal-admin-actions > * {
        flex: 0 0 auto;
    }
}

/* Admin settings — on/off toggles (persist as 0/1) */
.admin-setting-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    min-height: var(--portal-touch-min);
    padding: 0.375rem 0;
}

.admin-setting-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.admin-setting-toggle-track {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: var(--metal-radius-pill);
    background: var(--metal-border);
    transition: background-color 0.2s ease;
}

.admin-setting-toggle input:focus-visible + .admin-setting-toggle-track {
    box-shadow: 0 0 0 3px var(--metal-accent-ring);
}

.admin-setting-toggle input:checked + .admin-setting-toggle-track {
    background: var(--metal-accent);
}

.admin-setting-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--metal-radius-pill);
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
    transition: transform 0.2s ease;
}

.admin-setting-toggle input:checked + .admin-setting-toggle-track .admin-setting-toggle-thumb {
    transform: translateX(1.25rem);
}

.admin-setting-toggle-status.is-on {
    color: var(--metal-ok);
}

.admin-setting-toggle-status.is-off {
    color: var(--metal-text-secondary);
}

/* ============================================================
   REDESIGN v2 — fabrication-native component layer
   (2026-07-17) Additive + namespaced `portal-*` so it never
   collides with existing .card/.badge/.chip/.total-box etc.
   Shared vocabulary for all screens: state badges, spec chips,
   severity stripes, spec grids, KPIs, brake-shape cards,
   data tables, empty/error states, mono data.
   ============================================================ */

/* Mono data helper — dimensions, part #s, money line up in columns */
.portal-data {
    font-family: var(--metal-font-mono);
    font-variant-numeric: tabular-nums;
}
.portal-pn { font-family: var(--metal-font-mono); color: var(--metal-accent-on-light); font-weight: 600; }

/* --- State badge: state reads as form, not just text --- */
.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.22rem 0.55rem;
    border-radius: var(--metal-radius-pill);
    line-height: 1.1;
    white-space: nowrap;
}
.portal-badge::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.portal-badge--ok   { color: var(--metal-ok);    background: var(--metal-ok-soft); }
.portal-badge--warn { color: var(--metal-warn);  background: var(--metal-warn-soft); }
.portal-badge--err  { color: var(--metal-danger);background: var(--metal-danger-soft); }
.portal-badge--info { color: var(--metal-info);  background: var(--metal-info-soft); }
.portal-badge--prod { color: var(--metal-prod);  background: var(--metal-prod-soft); }
.portal-badge--teal { color: var(--metal-accent-on-light); background: var(--metal-accent-soft); }

/* --- Spec chip: a tagged fabrication attribute --- */
.portal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: var(--metal-radius-pill);
    border: 1px solid var(--metal-border-soft);
    background: var(--metal-surface);
    color: var(--metal-text-secondary);
    white-space: nowrap;
    line-height: 1.2;
}
.portal-chip .portal-chip-k { color: var(--metal-muted); font-weight: 500; }
.portal-chip--mono { font-family: var(--metal-font-mono); font-size: 0.7rem; }

/* --- Severity stripe: left edge, apply to a positioned card --- */
.portal-stripe { position: relative; }
.portal-stripe::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: var(--metal-border);
}
.portal-stripe--ok::before   { background: var(--metal-ok); }
.portal-stripe--warn::before { background: var(--metal-warn); }
.portal-stripe--err::before  { background: var(--metal-danger); }
.portal-stripe--teal::before { background: var(--metal-accent); }
.portal-stripe--prod::before { background: var(--metal-prod); }

/* --- Spec grid: compact monospace attribute block --- */
.portal-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 1px;
    border: 1px solid var(--metal-border-soft);
    border-radius: var(--metal-radius);
    overflow: hidden;
    background: var(--metal-border-soft);
}
.portal-spec {
    padding: 0.55rem 0.7rem;
    background: var(--metal-card);
}
.portal-spec-k {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--metal-muted);
    font-weight: 600;
}
.portal-spec-v {
    font-family: var(--metal-font-mono);
    font-size: 0.88rem;
    color: var(--metal-text);
    margin-top: 0.15rem;
    font-weight: 500;
}

/* --- KPI (summary before detail) — place inside .portal-card --- */
.portal-kpi-k {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--metal-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.portal-kpi-v {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--metal-text);
    margin-top: 0.2rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.portal-kpi-d { font-size: 0.72rem; color: var(--metal-muted); margin-top: 0.15rem; }
.portal-kpi-up   { color: var(--metal-ok); font-weight: 700; }
.portal-kpi-down { color: var(--metal-danger); font-weight: 700; }

/* --- Brake-shape card: a piece rendered as a fabrication object --- */
.portal-brake {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 0.8rem;
    align-items: center;
}
.portal-brake-fig {
    width: 4rem;
    height: 3rem;
    background: var(--metal-surface);
    border: 1px solid var(--metal-border-soft);
    border-radius: var(--metal-radius-sm);
    display: grid;
    place-items: center;
}
.portal-brake-fig svg { width: 3rem; height: 2.25rem; }
.portal-brake-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }

/* --- Data table: consistent, scrollable, tabular --- */
.portal-datatable { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.portal-datatable thead th {
    text-align: left;
    font-size: 0.63rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--metal-muted);
    font-weight: 700;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--metal-border-soft);
    background: var(--metal-surface);
}
.portal-datatable td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--metal-border-soft);
    color: var(--metal-text-secondary);
    vertical-align: middle;
}
.portal-datatable tbody tr:last-child td { border-bottom: 0; }
.portal-datatable tbody tr:hover td { background: var(--metal-accent-soft); }
.portal-datatable .portal-td-num {
    font-family: var(--metal-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--metal-text);
}

/* --- Segmented tabs --- */
.portal-tabs {
    display: inline-flex;
    border: 1px solid var(--metal-border);
    border-radius: var(--metal-radius);
    overflow: hidden;
    background: var(--metal-card);
}
.portal-tabs button {
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    border: 0;
    background: transparent;
    color: var(--metal-text-secondary);
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    border-right: 1px solid var(--metal-border);
    min-height: 2.25rem;
}
.portal-tabs button:last-child { border-right: 0; }
.portal-tabs button[aria-selected="true"] { background: var(--metal-slate); color: #fff; }

/* --- Empty state: purposeful, with a next action --- */
.portal-emptybox {
    text-align: center;
    padding: 2.25rem 1rem;
    border: 1.5px dashed var(--metal-border);
    border-radius: var(--metal-radius-lg);
    background: var(--metal-surface);
}
.portal-emptybox-ico {
    width: 3rem; height: 3rem;
    border-radius: var(--metal-radius);
    background: var(--metal-accent-soft);
    color: var(--metal-accent-on-light);
    display: grid;
    place-items: center;
    margin: 0 auto 0.75rem;
}
.portal-emptybox h4 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--metal-text); }
.portal-emptybox p {
    margin: 0 auto 1rem;
    font-size: 0.85rem;
    color: var(--metal-text-secondary);
    max-width: 34ch;
}

/* --- Error box: recoverable, explains + offers a fix --- */
.portal-errbox {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.8rem 0.9rem;
    border-radius: var(--metal-radius);
    background: var(--metal-danger-soft);
    border: 1px solid #f3c2c2;
    color: #8f2b2b;
}
.portal-errbox .portal-errbox-ico { flex: 0 0 auto; color: var(--metal-danger); margin-top: 0.05rem; }
.portal-errbox b { display: block; font-size: 0.85rem; color: #7a1f1f; }
.portal-errbox p { margin: 0.15rem 0 0; font-size: 0.8rem; color: #8f3b3b; }
.portal-errbox--warn {
    background: var(--metal-warn-soft);
    border-color: #eccf95;
    color: #8a5a12;
}
.portal-errbox--warn .portal-errbox-ico { color: var(--metal-warn); }
.portal-errbox--warn b { color: #7a4e12; }
.portal-errbox--warn p { color: #8a5a12; }

/* --- Inline diff cells (imported -> corrected) --- */
.portal-was { color: var(--metal-danger); text-decoration: line-through; opacity: 0.75; }
.portal-now { color: var(--metal-ok); font-weight: 600; }

/* --- Mini bar sparkline --- */
.portal-spark { display: flex; align-items: flex-end; gap: 0.3rem; height: 3rem; }
.portal-spark > i {
    flex: 1;
    background: var(--metal-accent-soft);
    border-top: 2px solid var(--metal-accent);
    border-radius: 2px 2px 0 0;
    min-height: 0.4rem;
    display: block;
}
.portal-spark > i.portal-spark-hot { background: var(--metal-accent); border-top-color: var(--metal-accent-hover); }

/* --- Document-style dark total box (quote/e-sign, opt-in, distinct
       from the existing centered .total-box used on customer.html) --- */
.portal-total-doc {
    background: linear-gradient(135deg, var(--metal-ink) 0%, var(--metal-slate) 100%);
    color: var(--metal-text-on-dark);
    border-radius: var(--metal-radius-lg);
    padding: 1.1rem 1.25rem;
    position: relative;
    overflow: hidden;
}
.portal-total-doc::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: var(--metal-accent);
}
.portal-total-doc-k {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--metal-accent-on-dark);
}
.portal-total-doc-v {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 0.1rem;
    font-variant-numeric: tabular-nums;
}
.portal-total-doc-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: rgba(248, 250, 252, 0.72);
    margin-top: 0.35rem;
}
.portal-total-doc-row span:last-child { font-family: var(--metal-font-mono); }

/* Shaped skeleton (extends existing .portal-skeleton) */
.portal-skel-line {
    height: 0.9rem;
    border-radius: 0.3rem;
    background: linear-gradient(90deg, var(--metal-surface) 25%, var(--metal-border-soft) 50%, var(--metal-surface) 75%);
    background-size: 200% 100%;
    animation: portal-shimmer 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .portal-skel-line { animation: none; }
}

/* "Sterling is thinking" / working indicator — animated indeterminate bar. Signals an
   in-flight AI assessment (Julie's/Robert's Thoughts) or a running upload (Julie's Mind)
   so a slow AI call never looks broken. Respects prefers-reduced-motion. */
.portal-thinking { display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border-radius:8px; background:#eef2ff; color:#4338ca; font-size:.8rem; font-weight:600; max-width:100%; }
.portal-thinking .pt-spark { animation: pt-pulse 1.2s ease-in-out infinite; }
.portal-thinking .pt-bar { flex:1; min-width:52px; height:5px; border-radius:3px; background:rgba(67,56,202,.15); overflow:hidden; position:relative; }
.portal-thinking .pt-fill { position:absolute; top:0; height:100%; width:40%; border-radius:3px; background:currentColor; opacity:.8; left:-40%; animation: pt-slide 1.1s ease-in-out infinite; }
@keyframes pt-slide { 0%{left:-40%} 100%{left:100%} }
@keyframes pt-pulse { 0%,100%{opacity:.5;transform:scale(.9)} 50%{opacity:1;transform:scale(1.15)} }
@media (prefers-reduced-motion: reduce) { .portal-thinking .pt-fill{animation:none;left:0;width:100%;opacity:.35} .portal-thinking .pt-spark{animation:none} }

/* Liquid Sky wordmark — Michroma is display-only (wordmark + hero) */
.brand-wordmark,
.portal-auth-mark-title { font-family: var(--metal-font-display); font-weight: 400; letter-spacing: 0.045em; }

/* Chrome-tier auth header (login / activate) — white-label-safe sheen, keeps injected logo */
.portal-auth-shell .portal-header { background: linear-gradient(180deg, #161d27 0%, #05070a 92%); border-bottom: 1px solid var(--metal-accent-border); }

/* ===== Dark chrome-tier login splash (white-label-safe: uses the injected brand logo) ===== */
body.chrome-login { background: radial-gradient(130% 100% at 50% -15%, #1B2733 0%, #0A0E13 62%); min-height: 100vh; }
body.chrome-login .portal-header { background: transparent; border-bottom: 0; justify-content: center; padding: 42px 16px 6px; }
body.chrome-login .portal-header .max-w-md { flex-direction: column; align-items: center; gap: 13px; text-align: center; }
body.chrome-login .portal-header img { height: 62px; width: 62px; }
body.chrome-login .portal-header .brand-wordmark { font-size: 1.55rem; }
body.chrome-login .portal-header-tagline { color: var(--metal-accent-on-dark); }
body.chrome-login .portal-auth-card { background: #12181F; border: 1px solid #22303D; box-shadow: 0 26px 64px -30px rgba(0,0,0,.85); }
body.chrome-login .portal-auth-mark-title { color: #fff; }
body.chrome-login .portal-auth-mark-sub { color: #8695A3; }
body.chrome-login .portal-auth-title { color: #fff; }
body.chrome-login .portal-auth-lead { color: #C7D3DC; }
body.chrome-login .portal-field-label { color: #9FB0BD; }
body.chrome-login .portal-auth-input { background: #0E141B; border-color: #253140; color: #fff; }
body.chrome-login .portal-auth-input::placeholder { color: #5C6B79; }
body.chrome-login .auth-eyebrow { color: var(--metal-accent-on-dark); border-color: #2c4560; background: rgba(47,95,134,.18); }
body.chrome-login .portal-btn-outline { color: var(--metal-accent-on-dark); border-color: #2c4560; background: transparent; }
body.chrome-login .portal-auth-foot { color: #8695A3; }
body.chrome-login .auth-trust { color: #8695A3; border-top-color: #22303D; }
body.chrome-login #toggle-password { color: #8695A3; }

/* VFS module chip in the header wordmark (1111 Studios | [tile] VFS) */
.brand-wordmark { display: inline-flex; align-items: center; }
.vfs-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: 9px; vertical-align: middle;
  font-family: var(--metal-font); font-weight: 700; font-size: 0.6em; letter-spacing: 0.06em; color: inherit; opacity: 0.9; }
.vfs-chip-tile { width: 1.2em; height: 1.2em; border-radius: 4px; background: var(--vfs-ground, #2f5f86); position: relative; flex: 0 0 auto; }
.vfs-chip-tile::after { content: ""; position: absolute; left: 34%; top: 20%; width: 17%; height: 60%; background: #cbe4f7; transform: skewX(-11deg); border-radius: 1px; }