/* ═══════════════════════════════════════════════════════════════════════════
   ▲ ENGINEER MATE ELECTRICAL — theme layer over Bootstrap 5
   by Apex Pylon

   Palette: black · white · yellow. One accent, and only one — so yellow always
   means "attention / act here" and a PASS-FAIL, phase or kAIC warning never has
   to shout over the chrome.

   This file replaces public/css/northstar.css. It supersedes the navy/gold
   layer entirely and completes rows 2, 3, 5 and 6 of the rebrand table in
   PROJECT-TRUTH §"Rebrand migration status".

   ┌─ HOW THE TOKENS WORK ────────────────────────────────────────────────────┐
   │ RAW tokens (--ap-black, --ap-yellow …) never change between modes.       │
   │ SEMANTIC tokens (--ap-bg, --ap-text, --ap-accent-text …) DO.             │
   │                                                                          │
   │ Components must only ever reference SEMANTIC tokens. That is the whole   │
   │ reason dark mode is a ~90-line block at the top of this file instead of  │
   │ a second stylesheet: a component written against --ap-text is correct    │
   │ in both modes by construction and cannot drift.                          │
   └──────────────────────────────────────────────────────────────────────────┘

   CONTRAST — measured with the WCAG 2.1 relative-luminance formula, not
   guessed. Every pair below is a real computed ratio:

     LIGHT                                        DARK
     ─────────────────────────────────────        ─────────────────────────────
     text        #141414 on #ffffff  17.1:1       #ededea on #1a1a1a  14.8:1
     muted       #5c5c58 on #ffffff   6.7:1       #a8a8a2 on #1a1a1a   7.3:1
     faint       #767670 on #ffffff   4.6:1       #94948e on #1a1a1a   5.7:1
     accent-text #8a6200 on #ffffff   5.5:1       #ffd400 on #1a1a1a  12.2:1
     on-accent   #0a0a0a on #ffd400  13.8:1       #0a0a0a on #ffd400  13.8:1
     PASS        #15803d on #ffffff   5.0:1       #4ade80 on #1a1a1a  10.0:1
     FAIL        #c62828 on #ffffff   5.6:1       #f87171 on #1a1a1a   6.3:1
     field edge  #8f8f8a on #ffffff   3.3:1       #6b6b6b on #1a1a1a   3.3:1

   Two things fall out of that table and they are non-negotiable:

   1. --ap-yellow (#ffd400) is 1.43:1 on white — it is a FILL or a RULE in
      light mode, never body text. Use --ap-accent-text, which resolves to
      #8a6200 on light and #ffd400 on dark. In dark mode yellow becomes a legal
      text colour, which is why the token flips rather than the rule bending.

   2. PASS/FAIL cannot keep the same hex in both modes. #15803d is 3.5:1 on a
      dark card — unreadable on a phone in daylight. The semantic tokens carry
      mode-specific values so a load schedule stays legible either way.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── RAW BRAND TOKENS — identical in both modes ──────────────────────────── */
:root {
    --ap-black: #0a0a0a;
    --ap-ink: #141414;
    --ap-white: #ffffff;
    --ap-yellow: #ffd400;
    --ap-yellow-deep: #c79100;   /* fills only, never text on white */
    --ap-yellow-lift: #ffe066;   /* dark-mode hover on the accent */

    /* Phase identity follows the PH 3Ø conductor convention (red/yellow/blue),
       deliberately outside the brand triad — an engineer matches these against
       a real panel, so brand colour stops at the chrome. */
    --ap-ph-a: #c62828;
    --ap-ph-b: #e8b400;
    --ap-ph-c: #1e40af;

    /* Type */
    --ap-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ap-font-cond: 'Barlow Condensed', 'Barlow', sans-serif;
    --ap-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* Geometry */
    --ap-radius: .5rem;
    --ap-radius-sm: .35rem;
    --ap-appbar-h: 58px;
    --ap-sidebar-w: 224px;

    /* Motion — one duration, honoured everywhere */
    --ap-ease: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* ── SEMANTIC TOKENS — LIGHT (default) ───────────────────────────────────── */
:root,
[data-theme="light"] {
    color-scheme: light;

    --ap-bg: #f6f6f4;
    --ap-surface: #ffffff;
    --ap-surface-2: #f6f6f4;
    --ap-surface-3: #ffffff;
    --ap-surface-sunk: #eeeeeb;

    --ap-border: #e4e4e1;
    --ap-border-strong: #cfcfca;
    --ap-field-bg: #ffffff;
    --ap-field-border: #8f8f8a;      /* 3.25:1 on white — a field must be findable */
    --ap-field-disabled: #f0f0ed;

    --ap-text: #141414;
    --ap-text-muted: #5c5c58;
    --ap-text-faint: #767670;

    --ap-accent: #ffd400;
    --ap-accent-press: #c79100;
    --ap-accent-text: #8a6200;        /* the ONLY yellow allowed as text here */
    --ap-accent-wash: #fff6cc;
    --ap-accent-wash-line: #f0dc8a;
    --ap-on-accent: #0a0a0a;

    --ap-chrome: #0a0a0a;
    --ap-chrome-2: #141414;
    --ap-chrome-line: #242424;
    --ap-chrome-text: #ffffff;
    --ap-chrome-muted: rgba(255, 255, 255, .68);
    --ap-chrome-faint: rgba(255, 255, 255, .40);

    --ap-pass: #15803d;
    --ap-pass-wash: #e8f5ed;
    --ap-fail: #c62828;
    --ap-fail-wash: #fdecec;
    --ap-warn-fill: #ffd400;
    --ap-warn-text: #0a0a0a;

    --ap-ph-a-text: #c62828;
    --ap-ph-b-text: #7a5e00;
    --ap-ph-c-text: #1e40af;

    --ap-shadow: 0 1px 2px rgba(10, 10, 10, .05), 0 4px 16px rgba(10, 10, 10, .07);
    --ap-shadow-lg: 0 8px 32px rgba(10, 10, 10, .14);
    --ap-scrim: rgba(10, 10, 10, .45);
}

/* ── SEMANTIC TOKENS — DARK ──────────────────────────────────────────────── */
/*  The chrome stays the darkest element, exactly as it is in light mode, so
    the sidebar still reads as chrome rather than as another card. What keeps
    it from vanishing into the page ground is the 3 px yellow keyline it
    already carries — the brand rule doing structural work.                   */
[data-theme="dark"] {
    color-scheme: dark;

    --ap-bg: #121212;
    --ap-surface: #1a1a1a;
    --ap-surface-2: #212121;
    --ap-surface-3: #272727;
    --ap-surface-sunk: #0e0e0e;

    --ap-border: #2e2e2e;
    --ap-border-strong: #3d3d3d;
    --ap-field-bg: #232323;
    --ap-field-border: #6b6b6b;       /* 3.27:1 on the card — measured */
    --ap-field-disabled: #1c1c1c;

    --ap-text: #ededea;
    --ap-text-muted: #a8a8a2;
    --ap-text-faint: #94948e;

    --ap-accent: #ffd400;
    --ap-accent-press: #ffe066;       /* on dark, press goes UP not down */
    --ap-accent-text: #ffd400;        /* 12.2:1 — legal as text here */
    --ap-accent-wash: #332b00;
    --ap-accent-wash-line: #5c4d00;
    --ap-on-accent: #0a0a0a;

    --ap-chrome: #000000;
    --ap-chrome-2: #0e0e0e;
    --ap-chrome-line: #262626;
    --ap-chrome-text: #ffffff;
    --ap-chrome-muted: rgba(255, 255, 255, .70);
    --ap-chrome-faint: rgba(255, 255, 255, .45);

    --ap-pass: #4ade80;
    --ap-pass-wash: #10281a;
    --ap-fail: #f87171;
    --ap-fail-wash: #2c1414;
    --ap-warn-fill: #ffd400;
    --ap-warn-text: #0a0a0a;

    --ap-ph-a-text: #ff7a7a;
    --ap-ph-b-text: #e8b400;
    --ap-ph-c-text: #7ab0ff;

    --ap-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .45);
    --ap-shadow-lg: 0 10px 36px rgba(0, 0, 0, .62);
    --ap-scrim: rgba(0, 0, 0, .68);
}

/* Follow the operating system until the user chooses for themselves. The
   server writes data-theme once a choice is made, and an explicit choice
   always wins over this block. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --ap-bg: #121212;
        --ap-surface: #1a1a1a;
        --ap-surface-2: #212121;
        --ap-surface-3: #272727;
        --ap-surface-sunk: #0e0e0e;
        --ap-border: #2e2e2e;
        --ap-border-strong: #3d3d3d;
        --ap-field-bg: #232323;
        --ap-field-border: #6b6b6b;
        --ap-field-disabled: #1c1c1c;
        --ap-text: #ededea;
        --ap-text-muted: #a8a8a2;
        --ap-text-faint: #94948e;
        --ap-accent-press: #ffe066;
        --ap-accent-text: #ffd400;
        --ap-accent-wash: #332b00;
        --ap-accent-wash-line: #5c4d00;
        --ap-chrome: #000000;
        --ap-chrome-2: #0e0e0e;
        --ap-chrome-line: #262626;
        --ap-pass: #4ade80;
        --ap-pass-wash: #10281a;
        --ap-fail: #f87171;
        --ap-fail-wash: #2c1414;
        --ap-ph-a-text: #ff7a7a;
        --ap-ph-b-text: #e8b400;
        --ap-ph-c-text: #7ab0ff;
        --ap-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .45);
        --ap-shadow-lg: 0 10px 36px rgba(0, 0, 0, .62);
        --ap-scrim: rgba(0, 0, 0, .68);
    }
}

/* ═══ BASE ═══════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

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

body {
    font-family: var(--ap-font);
    background: var(--ap-bg);
    color: var(--ap-text);
    font-size: 14px;
    line-height: 1.5;
    /* Notched phones: the sticky wizard bar sits on the home indicator without
       this, and the last field becomes untappable. */
    padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4, h5, .ap-display, .ap-brand {
    font-family: var(--ap-font-cond);
    letter-spacing: .01em;
}

.ap-mono, .ns-mono { font-family: var(--ap-font-mono); font-variant-numeric: tabular-nums; }

a { color: var(--ap-accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ap-accent-text); }

hr { border-color: var(--ap-border); opacity: 1; }

::selection { background: var(--ap-accent); color: var(--ap-on-accent); }

/* One focus treatment everywhere. Yellow is 12–13:1 against both grounds, so
   the ring is the same colour in both modes and always clears 3:1. */
:focus-visible {
    outline: 3px solid var(--ap-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══ BOOTSTRAP OVERRIDES ════════════════════════════════════════════════ */
.card, .modal-content, .dropdown-menu, .offcanvas, .list-group-item, .accordion-item {
    background-color: var(--ap-surface);
    color: var(--ap-text);
}

.card {
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
}

.card-header {
    background: var(--ap-chrome);
    color: var(--ap-chrome-text);
    font-family: var(--ap-font-cond);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--ap-accent);
    border-radius: calc(var(--ap-radius) - 1px) calc(var(--ap-radius) - 1px) 0 0 !important;
    padding: .55rem .95rem;
}

.card-footer { background: var(--ap-surface-2); border-top: 1px solid var(--ap-border); }

.text-muted { color: var(--ap-text-muted) !important; }
.text-body-secondary { color: var(--ap-text-muted) !important; }
.small, small { font-size: .82em; }

.bg-white { background-color: var(--ap-surface) !important; }
.bg-light { background-color: var(--ap-surface-2) !important; }
.border { border-color: var(--ap-border) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--ap-border) !important; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-label {
    font-size: .68rem;
    font-weight: 700;
    color: var(--ap-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 3px;
}

.form-text { color: var(--ap-text-faint); font-size: .76rem; }

.form-control,
.form-select,
.input-group-text {
    background-color: var(--ap-field-bg);
    border: 1px solid var(--ap-field-border);
    color: var(--ap-text);
    border-radius: var(--ap-radius-sm);
    transition: border-color var(--ap-ease), box-shadow var(--ap-ease);
}

.form-control::placeholder { color: var(--ap-text-faint); opacity: 1; }

.form-control:focus,
.form-select:focus {
    background-color: var(--ap-field-bg);
    color: var(--ap-text);
    border-color: var(--ap-accent-press);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-accent) 42%, transparent);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--ap-field-disabled);
    color: var(--ap-text-muted);
}

.input-group-text {
    background-color: var(--ap-surface-2);
    color: var(--ap-text-muted);
    font-size: .78rem;
    font-weight: 600;
}

/* The caret is a background image, so it does not inherit currentColor. */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a8a8a2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input {
    background-color: var(--ap-field-bg);
    border-color: var(--ap-field-border);
}

.form-check-input:checked {
    background-color: var(--ap-accent);
    border-color: var(--ap-accent-press);
}

/* A checked switch must not render a white knob on yellow — invisible. */
.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230a0a0a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230a0a0a'/%3e%3c/svg%3e");
}

.form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-accent) 42%, transparent); }

.form-range::-webkit-slider-thumb { background: var(--ap-accent); }
.form-range::-moz-range-thumb { background: var(--ap-accent); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { border-radius: var(--ap-radius-sm); font-weight: 600; transition: all var(--ap-ease); }

.btn-ap, .btn-primary {
    background: var(--ap-chrome);
    border: 1px solid var(--ap-chrome);
    color: var(--ap-chrome-text);
}

.btn-ap:hover, .btn-primary:hover,
.btn-ap:focus, .btn-primary:focus {
    background: var(--ap-chrome-2);
    border-color: var(--ap-accent);
    color: var(--ap-chrome-text);
}

[data-theme="dark"] .btn-ap,
[data-theme="dark"] .btn-primary {
    background: var(--ap-surface-3);
    border-color: var(--ap-border-strong);
    color: var(--ap-text);
}

[data-theme="dark"] .btn-ap:hover,
[data-theme="dark"] .btn-primary:hover {
    background: var(--ap-surface-2);
    border-color: var(--ap-accent);
    color: var(--ap-text);
}

/* The one loud control on the page. Black on yellow, 13.8:1, both modes. */
.btn-volt, .btn-gold {
    background: var(--ap-accent);
    border: 1px solid var(--ap-accent);
    color: var(--ap-on-accent);
    font-weight: 700;
}

.btn-volt:hover, .btn-gold:hover,
.btn-volt:focus, .btn-gold:focus {
    background: var(--ap-accent-press);
    border-color: var(--ap-accent-press);
    color: var(--ap-on-accent);
}

.btn-outline-secondary {
    border-color: var(--ap-border-strong);
    color: var(--ap-text-muted);
}

.btn-outline-secondary:hover {
    background: var(--ap-surface-2);
    border-color: var(--ap-text-muted);
    color: var(--ap-text);
}

.btn-outline-danger { border-color: var(--ap-fail); color: var(--ap-fail); }
.btn-outline-danger:hover { background: var(--ap-fail); color: var(--ap-white); border-color: var(--ap-fail); }
[data-theme="dark"] .btn-outline-danger:hover { color: var(--ap-black); }

.btn-link { color: var(--ap-accent-text); }

/* ── Chrome: appbar & sidebar ────────────────────────────────────────────── */
.ap-appbar, .ns-appbar {
    background: var(--ap-chrome);
    color: var(--ap-chrome-text);
    border-bottom: 3px solid var(--ap-accent);
    padding: .55rem 1rem;
    min-height: var(--ap-appbar-h);
    position: sticky;
    top: 0;
    z-index: 1030;
    padding-top: calc(.55rem + env(safe-area-inset-top));
}

.ap-brand, .ns-brand {
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: .05em;
    color: var(--ap-chrome-text);
    text-decoration: none;
    line-height: 1.1;
    display: inline-flex;
    align-items: baseline;
    gap: .1em;
}

.ap-brand:hover, .ns-brand:hover { color: var(--ap-chrome-text); }
.ap-brand .mark, .ns-brand .star { color: var(--ap-accent); }

/* The discipline line. "Engineer Mate" alone does not say what the tool is
   for, so ELECTRICAL sits under the name — small, letterspaced, in the accent
   on dark chrome where yellow is a legal text colour at 13.8:1. */
.ap-brand-stack { display: inline-flex; flex-direction: column; line-height: 1; }
.ap-brand-stack .ap-discipline {
    font-family: var(--ap-font);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .34em;
    color: var(--ap-accent);
    text-transform: uppercase;
    margin-top: 1px;
    padding-left: 1px;
}
.ap-brand .co {
    font-family: var(--ap-font);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--ap-chrome-faint);
    text-transform: uppercase;
    margin-left: .5em;
}

.ap-subtitle, .ns-subtitle {
    font-size: .66rem;
    color: var(--ap-chrome-faint);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ap-sidebar, .ns-sidebar {
    background: var(--ap-chrome);
    border-right: 1px solid var(--ap-chrome-line);
    min-height: calc(100vh - var(--ap-appbar-h));
    padding: 1rem .7rem;
}

.ap-sidebar .nav-link, .ns-sidebar .nav-link {
    color: var(--ap-chrome-muted);
    font-family: var(--ap-font-cond);
    font-weight: 600;
    font-size: .98rem;
    letter-spacing: .04em;
    border-radius: var(--ap-radius-sm);
    padding: .55rem .8rem;
    margin-bottom: .15rem;
    border-left: 3px solid transparent;
    transition: all var(--ap-ease);
}

.ap-sidebar .nav-link:hover, .ns-sidebar .nav-link:hover {
    color: var(--ap-chrome-text);
    background: rgba(255, 255, 255, .07);
}

/* The 3 px yellow left-rule marks the active item — a fill, not text. */
.ap-sidebar .nav-link.active, .ns-sidebar .nav-link.active {
    color: var(--ap-accent);
    background: rgba(255, 212, 0, .10);
    border-left-color: var(--ap-accent);
    font-weight: 700;
}

.ap-sidebar .nav-label, .ns-sidebar .nav-label {
    font-size: .62rem;
    letter-spacing: .13em;
    color: var(--ap-chrome-faint);
    text-transform: uppercase;
    padding: .85rem .8rem .25rem;
}

.ap-main, .ns-main { padding: 1.3rem 1.5rem 3rem; min-width: 0; }

.avatar-initials {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ap-accent);
    color: var(--ap-on-accent);
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .02em;
}

/* ── Theme toggle ────────────────────────────────────────────────────────── */
.ap-theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ap-radius-sm);
    background: transparent;
    border: 1px solid var(--ap-chrome-line);
    color: var(--ap-chrome-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--ap-ease);
}

.ap-theme-toggle:hover {
    color: var(--ap-accent);
    border-color: var(--ap-accent);
    background: rgba(255, 212, 0, .08);
}

.ap-theme-toggle .icon-dark { display: none; }
[data-theme="dark"] .ap-theme-toggle .icon-dark { display: block; }
[data-theme="dark"] .ap-theme-toggle .icon-light { display: none; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table { --bs-table-color: var(--ap-text); --bs-table-bg: transparent; color: var(--ap-text); }
.table > :not(caption) > * > * { background-color: transparent; color: var(--ap-text); box-shadow: none; }
.table > thead > tr > th { border-bottom: 0; }
.table > tbody > tr > td, .table > tbody > tr > th { border-top: 1px solid var(--ap-border); }

.res-table thead th, .table-dark thead th, .table > thead.table-dark th {
    background: var(--ap-chrome);
    color: var(--ap-chrome-text);
    font-family: var(--ap-font-cond);
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .5rem .55rem;
    white-space: nowrap;
}

.res-table tbody td { font-size: .82rem; padding: .42rem .55rem; }
.res-table tbody tr:nth-child(even) td { background: var(--ap-surface-2); }
.res-table tbody tr:hover td { background: var(--ap-accent-wash); }
.res-table tfoot td, .res-table tr.total td {
    background: var(--ap-chrome);
    color: var(--ap-chrome-text);
    font-weight: 700;
}

.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--ap-surface-2); color: var(--ap-text); }
.table-hover > tbody > tr:hover > * { background-color: var(--ap-accent-wash); color: var(--ap-text); }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* ── Verdict & status chips ──────────────────────────────────────────────── */
.badge-pass, .badge-fail, .ct-badge, .ph-a, .ph-b, .ph-c, .ph-3, .ap-chip {
    display: inline-block;
    font-family: var(--ap-font-cond);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .04em;
    padding: .12rem .45rem;
    border-radius: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-pass { background: var(--ap-pass-wash); color: var(--ap-pass); border: 1px solid var(--ap-pass); }
.badge-fail { background: var(--ap-fail-wash); color: var(--ap-fail); border: 1px solid var(--ap-fail); }

.vd-flag, .text-fail { color: var(--ap-fail) !important; font-weight: 700; }
.text-pass { color: var(--ap-pass) !important; font-weight: 700; }
.text-volt, .text-gold { color: var(--ap-accent-text) !important; }

.upgraded, .override {
    background: var(--ap-accent);
    color: var(--ap-on-accent);
    font-size: .66rem;
    font-weight: 700;
    padding: .05rem .3rem;
    border-radius: 2px;
    text-transform: uppercase;
}

.ct-badge { background: var(--ap-surface-2); color: var(--ap-text-muted); border: 1px solid var(--ap-border); }

/* Phase pills keep the PH conductor convention in both modes; only the
   luminance moves so the text stays ≥6:1 on a dark card. */
.ph-a { background: color-mix(in srgb, var(--ap-ph-a) 16%, transparent); color: var(--ap-ph-a-text); border: 1px solid var(--ap-ph-a-text); }
.ph-b { background: color-mix(in srgb, var(--ap-ph-b) 18%, transparent); color: var(--ap-ph-b-text); border: 1px solid var(--ap-ph-b-text); }
.ph-c { background: color-mix(in srgb, var(--ap-ph-c) 16%, transparent); color: var(--ap-ph-c-text); border: 1px solid var(--ap-ph-c-text); }
/* A three-phase circuit loads every line, so it takes no line's colour. */
.ph-3 { background: color-mix(in srgb, var(--ap-text) 8%, transparent); color: var(--ap-text); border: 1px solid var(--ap-text-muted); }

/* ── Mixed-phase method: balance bars ───────────────────────────────────────
   One bar per line, scaled to the heaviest, so an unbalanced MDP is visible
   before anyone reads a number. */
.mx-bars { display: grid; grid-template-columns: auto 1fr auto; gap: .25rem .5rem; align-items: center; }
.mx-bar { height: .55rem; border-radius: 2px; background: var(--ap-surface-2); overflow: hidden; }
.mx-bar > span { display: block; height: 100%; }
.mx-bar > span.ph-a-fill { background: var(--ap-ph-a); }
.mx-bar > span.ph-b-fill { background: var(--ap-ph-b); }
.mx-bar > span.ph-c-fill { background: var(--ap-ph-c); }
.mx-row-space td { opacity: .6; font-style: italic; }
.mx-row-spare td { opacity: .75; }

/* ── Metrics, callouts, written specs ────────────────────────────────────── */
.metric {
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-bottom: 3px solid var(--ap-accent);
    border-radius: var(--ap-radius-sm);
    padding: .55rem .7rem;
    min-width: 0;
}

.metric .k {
    font-size: .63rem;
    font-weight: 700;
    color: var(--ap-text-faint);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.metric .v {
    font-family: var(--ap-font-cond);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ap-text);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.formula-box {
    background: var(--ap-accent-wash);
    border: 1px solid var(--ap-accent-wash-line);
    border-left: 3px solid var(--ap-accent);
    border-radius: var(--ap-radius-sm);
    padding: .6rem .75rem;
    font-size: .82rem;
    color: var(--ap-text);
}

.written-out {
    background: var(--ap-surface-2);
    border-left: 3px solid var(--ap-accent);
    border-radius: 0 var(--ap-radius-sm) var(--ap-radius-sm) 0;
    padding: .6rem .8rem;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--ap-text);
}

.empty-note {
    border: 1px dashed var(--ap-border-strong);
    border-radius: var(--ap-radius-sm);
    padding: 1.1rem;
    text-align: center;
    color: var(--ap-text-faint);
    font-size: .85rem;
}

.alert { border-radius: var(--ap-radius-sm); border-width: 1px; }
.alert-warning { background: var(--ap-accent-wash); border-color: var(--ap-accent-wash-line); color: var(--ap-text); }
.alert-danger { background: var(--ap-fail-wash); border-color: var(--ap-fail); color: var(--ap-fail); }
.alert-success { background: var(--ap-pass-wash); border-color: var(--ap-pass); color: var(--ap-pass); }
.alert-info { background: var(--ap-surface-2); border-color: var(--ap-border); color: var(--ap-text); }

/* ── Wizard progress ─────────────────────────────────────────────────────── */
.ap-progress {
    height: 6px;
    background: var(--ap-surface-sunk);
    border-radius: 3px;
    overflow: hidden;
}

.ap-progress .bar {
    height: 100%;
    background: var(--ap-accent);
    transition: width 260ms cubic-bezier(.4, 0, .2, 1);
}

.wizard-steps .step { color: var(--ap-text-faint); }
.wizard-steps .step.done { background: var(--ap-accent); color: var(--ap-on-accent); }
.wizard-steps .step.current { box-shadow: inset 0 0 0 2px var(--ap-text); color: var(--ap-text); }

/* ── Modals, dropdowns, offcanvas ────────────────────────────────────────── */
.modal-content { border: 1px solid var(--ap-border); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--ap-border); }
.modal-backdrop.show { background: var(--ap-scrim); opacity: 1; }

.dropdown-menu {
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    box-shadow: var(--ap-shadow-lg);
    background: var(--ap-surface-3);
}

.dropdown-item { color: var(--ap-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ap-surface-2); color: var(--ap-text); }
.dropdown-divider { border-color: var(--ap-border); }
.dropdown-item-text { color: var(--ap-text-muted); }

.offcanvas { background: var(--ap-chrome); color: var(--ap-chrome-text); }
.offcanvas-header { border-bottom: 1px solid var(--ap-chrome-line); }
.offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(2); }

[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.nav-tabs { border-bottom-color: var(--ap-border); }
.nav-tabs .nav-link { color: var(--ap-text-muted); border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link:hover { color: var(--ap-text); border-bottom-color: var(--ap-border-strong); }
.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--ap-text);
    font-weight: 700;
    border-bottom-color: var(--ap-accent);
}

.accordion-button { background: var(--ap-surface-2); color: var(--ap-text); }
.accordion-button:not(.collapsed) { background: var(--ap-accent-wash); color: var(--ap-text); box-shadow: none; }
.accordion-button::after { filter: var(--ap-caret-filter, none); }
[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.6); }

.page-link { background: var(--ap-surface); border-color: var(--ap-border); color: var(--ap-text); }
.page-item.active .page-link { background: var(--ap-chrome); border-color: var(--ap-chrome); color: var(--ap-chrome-text); }
.page-item.disabled .page-link { background: var(--ap-surface-2); color: var(--ap-text-faint); }

.plan-card { border: 1px solid var(--ap-border); border-radius: var(--ap-radius); background: var(--ap-surface); }
.plan-card.featured { border: 2px solid var(--ap-accent); }
.plan-card.featured .plan-badge { background: var(--ap-chrome); color: var(--ap-accent); }

.ap-hero, .ns-hero { background: var(--ap-chrome); color: var(--ap-chrome-text); border-bottom: 3px solid var(--ap-accent); }
.auth-shell { background: var(--ap-bg); min-height: 100vh; }

/* ── Single-line diagram ─────────────────────────────────────────────────── */
/*  The SVG carries explicit pixel dimensions because a percentage on the root
    collapses the drawing to nothing in dompdf and in every rasteriser. The
    responsive scaling therefore belongs on the container.
    The diagram always renders on white — a drawing sheet is white paper even
    in dark mode, and inverting the ink would make the exported SVG wrong.    */
.sld-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    padding: 1rem;
}

.sld-wrap svg { max-width: 100%; height: auto; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE  —  everything below 992 px / 768 px / 576 px

   The rule this section exists to enforce: every field an engineer must fill
   in has to be reachable and tappable on a 360 px phone without pinch-zoom
   and without horizontal scrolling. A load schedule that needs two hands and
   a magnifier on site is a load schedule that does not get filled in.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tap targets. Anything interactive gets 44 px of height, which is the
      smallest reliable finger target. Below that, mis-taps delete circuits. */
@media (max-width: 991.98px) {
    .btn, .form-control, .form-select, .nav-link, .dropdown-item, .page-link {
        min-height: 44px;
    }

    .btn-sm, .form-control-sm, .form-select-sm { min-height: 40px; }

    .btn { padding-inline: .85rem; }

    .form-check-input { width: 1.35em; height: 1.35em; margin-top: .1em; }
    .form-switch .form-check-input { width: 2.6em; }
    .form-check-label { padding-left: .25rem; }
}

/* ── iOS zooms the whole page when a focused input is under 16 px. That zoom
      is what makes a wizard step feel broken on a phone: the layout jumps and
      the next field ends up off-screen. 16 px on every text input stops it. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }

    .input-group-text { font-size: .82rem; }

    body { font-size: 15px; }

    .ap-main, .ns-main { padding: 1rem .85rem 5.5rem; }

    .card-header { font-size: .88rem; padding: .55rem .75rem; }
    .card-body { padding: .85rem .75rem; }

    .metric { padding: .5rem .6rem; }
    .metric .v { font-size: 1.05rem; }
    .metric .k { font-size: .6rem; }

    h1, .h1 { font-size: 1.55rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.12rem; }

    .modal-dialog { margin: .5rem; }
    .modal-body { max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .modal-footer .btn { flex: 1 1 auto; }

    /* Bootstrap's .row gutters are generous for a phone. */
    .row { --bs-gutter-x: .75rem; }
}

/* ── STACKED TABLES ──────────────────────────────────────────────────────────
   Below 768 px, a wide edit table becomes one card per row. Horizontal scroll
   inside .table-responsive technically "works", but on a phone it hides half
   the columns behind a scroll the user cannot see, which is exactly the
   complaint: fields that are not accessible on smaller devices.

   Opt in by putting .ap-stack on the <table> and a data-label on every <td>.
   Tables without .ap-stack keep the old scroll behaviour, so nothing that
   already works is disturbed.                                                */
@media (max-width: 767.98px) {
    .ap-stack,
    .ap-stack thead,
    .ap-stack tbody,
    .ap-stack tr,
    .ap-stack td {
        display: block;
        width: 100%;
    }

    .ap-stack thead { display: none; }

    .ap-stack > tbody > tr {
        background: var(--ap-surface);
        border: 1px solid var(--ap-border);
        border-left: 3px solid var(--ap-accent);
        border-radius: var(--ap-radius-sm);
        padding: .6rem .7rem;
        margin-bottom: .7rem;
        box-shadow: var(--ap-shadow);
    }

    .ap-stack > tbody > tr:nth-child(even) { background: var(--ap-surface); }

    .ap-stack > tbody > tr > td {
        border: 0 !important;
        border-top: 1px solid var(--ap-border) !important;
        padding: .45rem 0 !important;
        display: grid;
        grid-template-columns: minmax(88px, 38%) 1fr;
        align-items: center;
        gap: .6rem;
        background: transparent !important;
    }

    .ap-stack > tbody > tr > td:first-child { border-top: 0 !important; }

    .ap-stack > tbody > tr > td::before {
        content: attr(data-label);
        font-size: .66rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--ap-text-faint);
    }

    /* Cells with no label — the row index, the delete button — go full width
       and right-align, so a card does not open with a stray empty column. */
    .ap-stack > tbody > tr > td[data-label=""],
    .ap-stack > tbody > tr > td:not([data-label]) {
        display: flex;
        justify-content: flex-end;
    }

    .ap-stack > tbody > tr > td[data-label=""]::before,
    .ap-stack > tbody > tr > td:not([data-label])::before { content: none; }

    /* The row number reads as the card's heading rather than as data. */
    .ap-stack > tbody > tr > td.ap-stack-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: var(--ap-font-cond);
        font-weight: 800;
        font-size: .95rem;
        color: var(--ap-text);
        padding-bottom: .5rem !important;
    }

    .ap-stack > tbody > tr > td.ap-stack-head::before { content: none; }

    /* A results table is read, not edited — keep it dense and scrollable
       rather than exploding 14 columns into 14 rows per circuit. */
    .ap-scroll-sm { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ap-scroll-sm > table { min-width: 720px; }
    .ap-scroll-hint {
        display: block;
        font-size: .7rem;
        color: var(--ap-text-faint);
        text-align: right;
        margin-bottom: .2rem;
    }
}

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

/* ── Sticky wizard action bar. On a phone the Back/Next pair is otherwise at
      the bottom of a long scroll; pinning it means a step is always one tap
      from being finished. */
.ap-step-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 767.98px) {
    .ap-step-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        background: var(--ap-surface);
        border-top: 2px solid var(--ap-accent);
        padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 18px rgba(0, 0, 0, .16);
    }

    .ap-step-actions .btn { flex: 1 1 0; min-height: 46px; font-size: .95rem; }
    .ap-step-actions .btn-icon-only { flex: 0 0 auto; }
}

/* ── Grid & metric strips ────────────────────────────────────────────────── */
/*  Two metrics per row on a phone rather than one — a demand figure and its
    unit read better side by side than stacked down a whole screen.          */
@media (max-width: 575.98px) {
    .metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .metric-grid > * { width: auto !important; max-width: none !important; }
}

.method-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }

@media (max-width: 575.98px) {
    .method-grid { grid-template-columns: 1fr; }
}

/* ── Long values must wrap, never widen the page. A written specification is
      a 200-character sentence full of "mm²" and "AT/AF" with no spaces in the
      worst places. */
.written-out, .metric .v, .ap-wrap { overflow-wrap: anywhere; word-break: break-word; }

/* Nothing may push the document wider than the viewport. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
    .ap-appbar, .ap-sidebar, .ns-appbar, .ns-sidebar,
    .ap-step-actions, .ap-theme-toggle, .btn, .offcanvas { display: none !important; }

    body { background: #fff; color: #000; }
    .card { box-shadow: none; border: 1px solid #999; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC LANDING + AUTH + PROJECT WORKSPACE REFRESH — 2026-09-19

   This layer stays inside the existing black / white / yellow system. It adds
   hierarchy and responsive composition without introducing a second UI stack.
   ═══════════════════════════════════════════════════════════════════════════ */

.small-note {
    color: var(--ap-text-muted);
    font-size: .78rem;
}

.section-title {
    font-family: var(--ap-font-cond);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ap-text-muted);
}

.btn-outline-dark {
    border-color: var(--ap-text);
    color: var(--ap-text);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background: var(--ap-text);
    border-color: var(--ap-text);
    color: var(--ap-surface);
}

/* ── Marketing navigation ───────────────────────────────────────────────── */
.ap-marketing-nav {
    padding-inline: 0;
}

.ap-marketing-nav .container-xl {
    min-height: 42px;
    padding-right: 4.4rem;
}

.ap-marketing-links {
    margin-left: auto;
    margin-right: auto;
}

.ap-marketing-link {
    color: var(--ap-chrome-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: .82rem;
    padding: .5rem .7rem;
    border-radius: var(--ap-radius-sm);
    transition: color var(--ap-ease), background var(--ap-ease);
}

.ap-marketing-link:hover,
.ap-marketing-link:focus {
    color: var(--ap-chrome-text);
    background: rgba(255, 255, 255, .08);
}

.ap-marketing-nav-actions .btn {
    white-space: nowrap;
}

/* ── Landing hero ───────────────────────────────────────────────────────── */
.ap-landing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 16%, rgba(255, 212, 0, .16), transparent 23rem),
        linear-gradient(135deg, #050505 0%, #0b0b0b 54%, #15130a 100%);
    color: var(--ap-white);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ap-landing-hero::before,
.ap-landing-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.ap-landing-hero::before {
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 88%);
}

.ap-landing-hero::after {
    width: 32rem;
    height: 32rem;
    right: -14rem;
    bottom: -20rem;
    border: 1px solid rgba(255, 212, 0, .20);
    border-radius: 50%;
    box-shadow: 0 0 0 5rem rgba(255, 212, 0, .025), 0 0 0 10rem rgba(255, 212, 0, .015);
}

.ap-hero-row {
    min-height: 690px;
    padding-block: 5.5rem;
}

.ap-eyebrow,
.ap-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .68rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ap-eyebrow {
    color: var(--ap-accent);
}

.ap-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ap-accent);
    box-shadow: 0 0 0 5px rgba(255, 212, 0, .12);
}

.ap-landing-title {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.8rem, 6vw, 5.25rem);
    line-height: .92;
    letter-spacing: -.025em;
    font-weight: 900;
    text-wrap: balance;
}

.ap-landing-lead {
    max-width: 660px;
    color: rgba(255, 255, 255, .72);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.68;
}

.ap-hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 640px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.ap-hero-proof > div {
    padding: .85rem 1rem .85rem 0;
    min-width: 0;
}

.ap-hero-proof > div + div {
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.ap-hero-proof b {
    display: block;
    font-family: var(--ap-font-cond);
    font-size: 1.45rem;
    line-height: 1;
    color: var(--ap-white);
}

.ap-hero-proof span {
    display: block;
    margin-top: .25rem;
    color: rgba(255, 255, 255, .52);
    font-size: .68rem;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ap-legal-note {
    max-width: 650px;
    color: rgba(255, 255, 255, .42);
    font-size: .72rem;
    line-height: 1.5;
}

/* The preview deliberately resembles an engineering result surface rather than
   a generic SaaS browser mock-up. */
.ap-engineering-preview {
    position: relative;
    max-width: 610px;
    margin-left: auto;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .15);
    border-top: 3px solid var(--ap-accent);
    border-radius: .8rem;
    padding: 1.1rem;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
    backdrop-filter: blur(14px);
}

.ap-engineering-preview::before {
    content: "";
    position: absolute;
    inset: .5rem -.5rem -.5rem .5rem;
    z-index: -1;
    border: 1px solid rgba(255, 212, 0, .16);
    border-radius: .8rem;
}

.ap-preview-topbar,
.ap-preview-board-head,
.ap-proof-terminal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ap-preview-kicker {
    display: block;
    color: rgba(255, 255, 255, .42);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ap-preview-title {
    font-family: var(--ap-font-cond);
    font-size: 1.15rem;
    font-weight: 800;
}

.ap-preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin-top: 1rem;
}

.ap-preview-metric {
    min-width: 0;
    padding: .75rem;
    background: rgba(0, 0, 0, .30);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--ap-radius-sm);
}

.ap-preview-metric span {
    display: block;
    color: rgba(255, 255, 255, .44);
    font-size: .61rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ap-preview-metric strong {
    display: block;
    margin-top: .2rem;
    font-family: var(--ap-font-cond);
    font-size: 1.45rem;
    line-height: 1;
}

.ap-preview-metric small {
    color: rgba(255, 255, 255, .52);
    font-family: var(--ap-font);
    font-size: .58rem;
    font-weight: 700;
}

.ap-preview-system {
    display: grid;
    grid-template-columns: 115px minmax(36px, 1fr) 205px;
    align-items: center;
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(0, 0, 0, .24);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--ap-radius-sm);
}

.ap-preview-source,
.ap-preview-board {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .035);
    border-radius: .3rem;
}

.ap-preview-source {
    padding: .75rem;
    text-align: center;
}

.ap-preview-node-label,
.ap-preview-node-value {
    display: block;
}

.ap-preview-node-label {
    color: var(--ap-accent);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.ap-preview-node-value {
    margin-top: .2rem;
    font-family: var(--ap-font-cond);
    font-weight: 700;
}

.ap-preview-line {
    height: 2px;
    background: rgba(255, 255, 255, .34);
    position: relative;
}

.ap-preview-line::before,
.ap-preview-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--ap-accent);
}

.ap-preview-line::before { left: -2px; }
.ap-preview-line::after { right: -2px; }

.ap-preview-board {
    padding: .65rem;
}

.ap-preview-board-head {
    font-size: .62rem;
    letter-spacing: .06em;
}

.ap-preview-board-head b { color: var(--ap-accent); }

.ap-preview-circuits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .3rem;
    margin-top: .55rem;
}

.ap-preview-circuits span {
    height: 18px;
    border-left: 2px solid var(--ap-accent);
    background: rgba(255, 255, 255, .07);
}

.ap-preview-checks {
    display: grid;
    gap: .45rem;
}

.ap-preview-checks > div {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: .45rem;
    padding: .55rem .65rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .70);
    font-size: .72rem;
}

.ap-preview-checks i { color: #4ade80; }
.ap-preview-checks b { color: var(--ap-white); font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }

/* ── Capability strip ───────────────────────────────────────────────────── */
.ap-trust-strip {
    background: var(--ap-accent);
    color: var(--ap-on-accent);
    border-bottom: 1px solid color-mix(in srgb, var(--ap-black) 18%, transparent);
}

.ap-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ap-trust-grid > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem;
    font-weight: 700;
    font-size: .76rem;
    line-height: 1.25;
}

.ap-trust-grid > div + div {
    border-left: 1px solid rgba(10, 10, 10, .16);
}

.ap-trust-grid i {
    font-size: 1.1rem;
    flex: 0 0 auto;
}

/* ── Landing sections ───────────────────────────────────────────────────── */
.ap-landing-section {
    padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.ap-section-white { background: var(--ap-surface); }
.ap-section-muted { background: var(--ap-surface-2); border-block: 1px solid var(--ap-border); }

.ap-section-kicker {
    color: var(--ap-accent-text);
    margin-bottom: .65rem;
}

.ap-section-kicker-dark { color: var(--ap-accent); }

.ap-section-title {
    margin: 0;
    font-size: clamp(2.1rem, 4vw, 3.65rem);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.ap-section-title-light { color: var(--ap-white); }

.ap-section-intro {
    color: var(--ap-text-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.ap-section-heading-narrow { max-width: 760px; }

.ap-value-card {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
    transition: transform var(--ap-ease), border-color var(--ap-ease), box-shadow var(--ap-ease);
}

.ap-value-card:hover {
    transform: translateY(-3px);
    border-color: var(--ap-border-strong);
    box-shadow: var(--ap-shadow-lg);
}

.ap-value-no {
    position: absolute;
    top: .9rem;
    right: 1rem;
    font-family: var(--ap-font-cond);
    font-size: 2.4rem;
    font-weight: 900;
    color: color-mix(in srgb, var(--ap-text) 7%, transparent);
    line-height: 1;
}

.ap-value-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1.3rem;
    border-radius: .35rem;
    background: var(--ap-accent);
    color: var(--ap-on-accent);
    font-size: 1.1rem;
}

.ap-value-card h3,
.ap-workflow-step h3 {
    font-size: 1.3rem;
    font-weight: 800;
}

.ap-value-card p,
.ap-workflow-step p {
    margin-bottom: 0;
    color: var(--ap-text-muted);
    font-size: .85rem;
    line-height: 1.65;
}

/* ── Methods ────────────────────────────────────────────────────────────── */
.ap-method-proof {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: .8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ap-border);
}

.ap-method-proof > i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ap-accent-wash);
    color: var(--ap-accent-text);
}

.ap-method-proof b,
.ap-method-proof span { display: block; }
.ap-method-proof span { margin-top: .2rem; color: var(--ap-text-muted); font-size: .78rem; line-height: 1.5; }

.ap-method-board {
    display: grid;
    gap: 1rem;
}

.ap-method-group {
    position: relative;
    padding: 1.35rem;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
}

.ap-method-group-featured {
    border-left: 4px solid var(--ap-accent);
}

.ap-method-group-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}

.ap-method-group-head span:not(.ap-method-count),
.ap-method-group-head b { display: block; }

.ap-method-group-head span:not(.ap-method-count) {
    color: var(--ap-text-faint);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ap-method-group-head b {
    margin-top: .15rem;
    font-family: var(--ap-font-cond);
    font-size: 1.25rem;
}

.ap-method-count {
    white-space: nowrap;
    padding: .22rem .5rem;
    border-radius: 999px;
    background: var(--ap-surface-2);
    border: 1px solid var(--ap-border);
    color: var(--ap-text-muted);
    font-size: .68rem;
    font-weight: 700;
}

.ap-method-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 1rem 0;
}

.ap-method-chips span {
    min-width: 42px;
    padding: .28rem .5rem;
    border-radius: .25rem;
    background: var(--ap-chrome);
    color: var(--ap-chrome-text);
    border-bottom: 2px solid var(--ap-accent);
    font-family: var(--ap-font-mono);
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
}

.ap-method-group p {
    margin: 0;
    color: var(--ap-text-muted);
    font-size: .82rem;
    line-height: 1.6;
}

/* ── Workflow ───────────────────────────────────────────────────────────── */
.ap-workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    overflow: hidden;
}

.ap-workflow-step {
    position: relative;
    min-width: 0;
    padding: 1.5rem;
    background: var(--ap-surface);
}

.ap-workflow-step + .ap-workflow-step { border-left: 1px solid var(--ap-border); }

.ap-workflow-step > i {
    display: block;
    margin: 1.5rem 0 1rem;
    font-size: 1.45rem;
    color: var(--ap-accent-text);
}

.ap-workflow-index {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ap-chrome);
    color: var(--ap-accent);
    font-family: var(--ap-font-mono);
    font-size: .68rem;
    font-weight: 700;
}

/* ── Verification section ───────────────────────────────────────────────── */
.ap-landing-proof-section {
    padding-block: clamp(4.5rem, 8vw, 7.5rem);
    background:
        linear-gradient(90deg, rgba(255, 212, 0, .05) 1px, transparent 1px),
        linear-gradient(rgba(255, 212, 0, .04) 1px, transparent 1px),
        var(--ap-chrome);
    background-size: 52px 52px;
    color: var(--ap-chrome-text);
    border-block: 3px solid var(--ap-accent);
}

.ap-proof-terminal {
    overflow: hidden;
    background: #050505;
    border: 1px solid #2a2a2a;
    border-radius: var(--ap-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}

.ap-proof-terminal-head {
    padding: .85rem 1rem;
    border-bottom: 1px solid #2a2a2a;
    color: rgba(255, 255, 255, .64);
    font-family: var(--ap-font-mono);
    font-size: .68rem;
}

.ap-proof-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #1c1c1c;
    font-family: var(--ap-font-mono);
    font-size: .72rem;
}

.ap-proof-row:last-child { border-bottom: 0; }
.ap-proof-row span { color: rgba(255, 255, 255, .48); }
.ap-proof-row b { color: #7ee7a3; font-weight: 600; text-align: right; }

.ap-proof-copy {
    color: rgba(255, 255, 255, .62);
    font-size: 1rem;
    line-height: 1.72;
}

.ap-proof-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.35rem;
}

.ap-proof-tags span {
    padding: .38rem .62rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: rgba(255, 255, 255, .72);
    font-size: .7rem;
}

/* ── Pricing ────────────────────────────────────────────────────────────── */
.ap-pricing-section { background: var(--ap-bg); }

.ap-pricing-note {
    display: inline-flex;
    align-items: center;
    color: var(--ap-pass);
    font-size: .78rem;
    font-weight: 700;
}

.ap-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--ap-shadow);
}

.ap-plan-card.featured {
    border: 2px solid var(--ap-accent);
    box-shadow: var(--ap-shadow-lg);
}

.ap-plan-featured-label {
    margin: -1rem -1rem 1rem;
    padding: .42rem 1rem;
    background: var(--ap-accent);
    color: var(--ap-on-accent);
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    text-align: center;
}

.ap-plan-name {
    font-size: 1.45rem;
    font-weight: 900;
}

.ap-plan-badge {
    flex: 0 0 auto;
    padding: .28rem .5rem;
    border-radius: .25rem;
    background: var(--ap-chrome);
    color: var(--ap-accent);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ap-plan-price-row {
    display: flex;
    align-items: baseline;
    margin-top: .5rem;
}

.ap-plan-currency {
    margin-right: .15rem;
    font-family: var(--ap-font-cond);
    font-size: 1.35rem;
    font-weight: 800;
}

.ap-plan-price-row strong {
    font-family: var(--ap-font-cond);
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -.02em;
}

.ap-plan-price-row > span:last-child {
    margin-left: .25rem;
    color: var(--ap-text-muted);
    font-size: .72rem;
}

.ap-plan-annual {
    margin-top: .4rem;
    min-height: 20px;
    color: var(--ap-pass);
    font-size: .72rem;
    font-weight: 600;
}

.ap-plan-rule {
    height: 1px;
    background: var(--ap-border);
    margin: 1.1rem 0;
}

.ap-plan-features {
    display: grid;
    gap: .45rem;
    flex: 1 1 auto;
}

.ap-plan-feature {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: .35rem;
    color: var(--ap-text);
    font-size: .76rem;
    line-height: 1.35;
}

.ap-plan-feature i { color: var(--ap-pass); font-size: .85rem; }
.ap-plan-feature.is-muted { color: var(--ap-text-faint); }
.ap-plan-feature.is-muted i { color: var(--ap-text-faint); }

/* ── Final CTA / footer ─────────────────────────────────────────────────── */
.ap-final-cta {
    padding-block: 4rem;
    background: var(--ap-chrome);
    color: var(--ap-chrome-text);
}

.ap-final-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-left: 4px solid var(--ap-accent);
    border-radius: var(--ap-radius);
    background: rgba(255, 255, 255, .035);
}

.ap-final-cta h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    font-weight: 900;
}

.ap-final-cta p {
    max-width: 700px;
    margin: .65rem 0 0;
    color: var(--ap-chrome-muted);
}

.ap-marketing-footer {
    padding-block: 2.5rem;
    background: #050505;
    color: rgba(255, 255, 255, .50);
    border-top: 1px solid #222;
    font-size: .76rem;
}

.ap-marketing-footer p { color: rgba(255, 255, 255, .42); }

.ap-footer-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem 1.2rem;
}

/* ═══ AUTH ════════════════════════════════════════════════════════════════ */
.ap-auth-shell {
    min-height: 100svh;
    padding: 0;
}

.ap-auth-grid {
    display: grid;
    grid-template-columns: minmax(420px, 44%) minmax(0, 1fr);
    min-height: 100svh;
}

.ap-auth-brand-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 5vw, 4.5rem);
    background:
        radial-gradient(circle at 18% 80%, rgba(255, 212, 0, .16), transparent 22rem),
        linear-gradient(145deg, #050505 0%, #101010 62%, #171407 100%);
    color: var(--ap-white);
    border-right: 3px solid var(--ap-accent);
}

.ap-auth-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(120deg, #000, transparent 76%);
    pointer-events: none;
}

.ap-auth-brand,
.ap-auth-brand-copy,
.ap-auth-brand-foot { position: relative; z-index: 1; }

.ap-auth-brand { align-self: flex-start; }

.ap-auth-brand-copy {
    max-width: 600px;
    margin: auto 0;
    padding-block: 4rem;
}

.ap-auth-brand-copy h1 {
    margin: 0;
    max-width: 560px;
    font-size: clamp(2.7rem, 5vw, 4.8rem);
    line-height: .94;
    font-weight: 900;
    letter-spacing: -.02em;
}

.ap-auth-brand-copy > p {
    margin: 1.2rem 0 0;
    max-width: 560px;
    color: rgba(255, 255, 255, .62);
    font-size: 1rem;
    line-height: 1.65;
}

.ap-auth-points {
    display: grid;
    gap: .8rem;
    margin-top: 2rem;
}

.ap-auth-points > div {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: .65rem;
    align-items: start;
}

.ap-auth-points i {
    color: var(--ap-accent);
    font-size: 1rem;
    margin-top: .1rem;
}

.ap-auth-points b,
.ap-auth-points small { display: block; }
.ap-auth-points b { color: var(--ap-white); font-size: .84rem; }
.ap-auth-points small { margin-top: .12rem; color: rgba(255, 255, 255, .48); font-size: .72rem; line-height: 1.4; }

.ap-auth-brand-foot {
    color: rgba(255, 255, 255, .36);
    font-size: .7rem;
}

.ap-auth-form-panel {
    display: grid;
    place-items: center;
    padding: clamp(2rem, 6vw, 5rem);
    background: var(--ap-bg);
}

.ap-auth-card-wrap {
    width: min(100%, 450px);
}

.ap-auth-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: 2.2rem;
    color: var(--ap-text-muted);
    text-decoration: none;
    font-size: .76rem;
    font-weight: 600;
}

.ap-auth-back:hover { color: var(--ap-text); }

.ap-auth-heading { margin-bottom: 2rem; }

.ap-auth-heading h2 {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    line-height: 1;
    font-weight: 900;
}

.ap-auth-heading p {
    margin: .6rem 0 0;
    color: var(--ap-text-muted);
    line-height: 1.55;
}

.ap-auth-mobile-mark {
    display: none;
    margin-bottom: .7rem;
    color: var(--ap-accent-text);
    font-family: var(--ap-font-cond);
    font-size: 1.5rem;
    font-weight: 900;
}

.ap-auth-form .form-label { margin-bottom: .45rem; }

.ap-auth-input-wrap {
    position: relative;
}

.ap-auth-input-wrap > i {
    position: absolute;
    top: 50%;
    left: .9rem;
    transform: translateY(-50%);
    color: var(--ap-text-faint);
    z-index: 2;
}

.ap-auth-input-wrap .form-control {
    min-height: 50px;
    padding-left: 2.65rem;
}

.ap-auth-submit { min-height: 50px; }

.ap-auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .8rem;
    margin: 1.4rem 0;
    color: var(--ap-text-faint);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ap-auth-divider::before,
.ap-auth-divider::after {
    content: "";
    height: 1px;
    background: var(--ap-border);
}

.ap-auth-legal {
    margin-top: 2rem;
    color: var(--ap-text-faint);
    font-size: .68rem;
    line-height: 1.55;
    text-align: center;
}

/* ═══ CUSTOMER PROJECT DASHBOARD ═════════════════════════════════════════ */
.ap-dashboard-shell { max-width: 1540px; margin-inline: auto; }

.ap-dashboard-hero {
    overflow: hidden;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-top: 4px solid var(--ap-accent);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
}

.ap-dashboard-hero-main {
    padding: 1.4rem 1.5rem 1.2rem;
}

.ap-dashboard-title {
    font-size: clamp(2.15rem, 4vw, 3.2rem);
    line-height: .95;
    font-weight: 900;
}

.ap-dashboard-subtitle {
    max-width: 720px;
    color: var(--ap-text-muted);
    font-size: .88rem;
}

.ap-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, .75fr)) minmax(220px, 1.25fr);
    border-top: 1px solid var(--ap-border);
    background: var(--ap-surface-2);
}

.ap-dashboard-metric {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1.2rem;
}

.ap-dashboard-metric + .ap-dashboard-metric,
.ap-dashboard-plan { border-left: 1px solid var(--ap-border); }

.ap-dashboard-metric-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: .35rem;
    background: var(--ap-accent-wash);
    color: var(--ap-accent-text);
}

.ap-dashboard-metric b,
.ap-dashboard-metric span { display: block; }
.ap-dashboard-metric b { font-family: var(--ap-font-cond); font-size: 1.45rem; line-height: 1; }
.ap-dashboard-metric div > span { margin-top: .15rem; color: var(--ap-text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }

.ap-dashboard-plan {
    padding: .9rem 1.2rem;
    min-width: 0;
}

.ap-dashboard-plan > div:first-child span {
    color: var(--ap-text-muted);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ap-dashboard-plan > div:first-child b { font-size: .78rem; }

.ap-plan-usage {
    height: 6px;
    margin-top: .55rem;
    background: var(--ap-border);
}

.ap-plan-usage .progress-bar,
.ap-resume-progress .progress-bar,
.ap-project-progress .progress-bar {
    background: var(--ap-accent);
}

.ap-dashboard-plan small {
    display: block;
    margin-top: .35rem;
    color: var(--ap-text-faint);
    font-size: .65rem;
}

.ap-plan-usage-unlimited {
    margin-top: .55rem;
    color: var(--ap-pass);
    font-size: .72rem;
    font-weight: 700;
}

/* Recent project / resume rail */
.ap-resume-card {
    position: relative;
    overflow: hidden;
    background: var(--ap-chrome);
    color: var(--ap-chrome-text);
    border: 1px solid var(--ap-chrome-line);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
}

.ap-resume-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--ap-accent);
}

.ap-resume-body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(190px, .7fr) auto;
    align-items: center;
    gap: 1.3rem;
    padding: 1rem 1rem 1rem 1.25rem;
}

.ap-resume-kicker {
    margin-bottom: .35rem;
    color: var(--ap-accent);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ap-resume-title {
    font-size: 1.25rem;
    font-weight: 800;
}

.ap-resume-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .8rem;
    color: var(--ap-chrome-muted);
    font-size: .7rem;
}

.ap-resume-meta span + span::before {
    content: "•";
    margin-right: .8rem;
    color: var(--ap-chrome-faint);
}

.ap-resume-progress-wrap { min-width: 0; color: var(--ap-chrome-muted); }
.ap-resume-progress-wrap b { color: var(--ap-chrome-text); }
.ap-resume-progress { height: 6px; background: #2a2a2a; }

.ap-resume-button {
    border-color: #3b3b3b;
    background: #202020;
    white-space: nowrap;
}

/* Filters */
.ap-project-filters {
    box-shadow: none;
}

.ap-project-filters .card-body { padding: .9rem 1rem; }

.ap-filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .55rem;
    border-top: 1px solid var(--ap-border);
    color: var(--ap-text-muted);
    font-size: .7rem;
}

/* Project cards */
.ap-project-card {
    border-top: 3px solid var(--ap-border-strong);
    transition: transform var(--ap-ease), border-color var(--ap-ease), box-shadow var(--ap-ease);
}

.ap-project-card:hover {
    transform: translateY(-2px);
    border-top-color: var(--ap-accent);
    box-shadow: var(--ap-shadow-lg);
}

.ap-project-card .card-body { padding: 1.15rem; }

.ap-project-name {
    margin: 0;
    font-family: var(--ap-font-cond);
    font-size: 1.32rem;
    font-weight: 800;
    line-height: 1.15;
}

.ap-project-code {
    margin-top: .22rem;
    color: var(--ap-text-faint);
    font-size: .7rem;
}

.ap-project-meta {
    display: grid;
    gap: .38rem;
    margin: 1rem 0 1.1rem;
    color: var(--ap-text-muted);
    font-size: .76rem;
}

.ap-project-meta > div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: .35rem;
    align-items: start;
}

.ap-project-meta i {
    color: var(--ap-text-faint);
    margin-top: .05rem;
}

.ap-project-progress {
    padding-top: .8rem;
    border-top: 1px solid var(--ap-border);
    color: var(--ap-text-muted);
    font-size: .68rem;
}

.ap-project-progress b { color: var(--ap-text); }
.ap-project-progress .progress { height: 5px; background: var(--ap-border); }

.ap-project-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 36px);
    gap: .35rem;
}

.ap-project-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ap-project-icon-btn {
    display: inline-grid;
    place-items: center;
    padding-inline: 0;
}

.status-pill,
.ap-computed-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
    border-radius: 999px;
    padding: .18rem .45rem;
    font-family: var(--ap-font-cond);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.status-pill {
    background: var(--ap-surface-2);
    color: var(--ap-text-muted);
    border: 1px solid var(--ap-border);
}

.st-completed { color: var(--ap-pass); border-color: color-mix(in srgb, var(--ap-pass) 55%, var(--ap-border)); background: var(--ap-pass-wash); }
.st-in_progress { color: var(--ap-accent-text); border-color: var(--ap-accent-wash-line); background: var(--ap-accent-wash); }
.st-archived { opacity: .68; }

.ap-computed-chip {
    color: var(--ap-pass);
    background: var(--ap-pass-wash);
    border: 1px solid color-mix(in srgb, var(--ap-pass) 45%, var(--ap-border));
}

.ct-lighting { border-color: var(--ap-accent-wash-line); background: var(--ap-accent-wash); color: var(--ap-accent-text); }
.ct-motor { border-color: var(--ap-border-strong); background: var(--ap-surface-2); color: var(--ap-text); }

.ap-project-empty { border-style: dashed; box-shadow: none; }
.ap-empty-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--ap-accent-wash);
    color: var(--ap-accent-text);
    font-size: 1.25rem;
}

.ap-dashboard-pagination .pagination { margin-bottom: 0; }

.ap-create-project-modal .modal-header {
    align-items: flex-start;
    border-bottom-color: var(--ap-border);
}

.ap-method-selection {
    border-left: 3px solid var(--ap-accent);
    box-shadow: none;
}

/* ═══ RESPONSIVE MARKETING / AUTH / DASHBOARD ════════════════════════════ */
@media (max-width: 1199.98px) {
    .ap-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-trust-grid > div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(10, 10, 10, .16); }
    .ap-trust-grid > div:nth-child(4) { border-top: 1px solid rgba(10, 10, 10, .16); }

    .ap-workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-workflow-step:nth-child(3) { border-left: 0; border-top: 1px solid var(--ap-border); }
    .ap-workflow-step:nth-child(4) { border-top: 1px solid var(--ap-border); }

    .ap-auth-grid { grid-template-columns: minmax(360px, 40%) minmax(0, 1fr); }

    .ap-dashboard-metrics { grid-template-columns: repeat(3, 1fr); }
    .ap-dashboard-plan { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ap-border); }
}

@media (max-width: 991.98px) {
    .ap-marketing-nav .container-xl { padding-right: 4rem; }
    .ap-hero-row { min-height: 0; padding-block: 4.5rem; }
    .ap-engineering-preview { margin: 0 auto; }

    .ap-final-cta-inner { align-items: flex-start; flex-direction: column; }
    .ap-footer-meta { justify-content: flex-start; }

    .ap-auth-grid { grid-template-columns: 1fr; }
    .ap-auth-brand-panel {
        min-height: auto;
        padding: 1.5rem;
        border-right: 0;
        border-bottom: 3px solid var(--ap-accent);
    }
    .ap-auth-brand-copy { margin: 0; padding: 2.2rem 0 .75rem; }
    .ap-auth-brand-copy h1 { font-size: 2.5rem; }
    .ap-auth-brand-copy > p { max-width: 720px; }
    .ap-auth-points { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .ap-auth-brand-foot { display: none; }
    .ap-auth-form-panel { padding: 3rem 1.25rem; }

    .ap-resume-body { grid-template-columns: minmax(0, 1fr) auto; }
    .ap-resume-progress-wrap { grid-column: 1 / -1; grid-row: 2; }
    .ap-resume-button { grid-column: 2; grid-row: 1; }
}

@media (max-width: 767.98px) {
    .ap-marketing-nav { min-height: 62px; }
    .ap-marketing-nav .container-xl { padding-left: .85rem; padding-right: 3.65rem; }
    .ap-marketing-nav .ap-brand { font-size: 1rem; }
    .ap-marketing-nav .ap-discipline { font-size: .48rem; }
    .ap-marketing-nav-actions { gap: .35rem !important; }
    .ap-marketing-nav-actions .btn { padding-inline: .7rem !important; font-size: .75rem; }

    .ap-landing-title { font-size: clamp(2.55rem, 13vw, 4rem); }
    .ap-landing-lead { font-size: .98rem; }
    .ap-hero-proof { grid-template-columns: 1fr; }
    .ap-hero-proof > div { display: grid; grid-template-columns: 75px 1fr; gap: .7rem; align-items: center; padding: .65rem 0; }
    .ap-hero-proof > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
    .ap-hero-proof b { font-size: 1.15rem; }
    .ap-hero-proof span { margin: 0; }

    .ap-engineering-preview { padding: .85rem; }
    .ap-preview-metrics { grid-template-columns: 1fr; }
    .ap-preview-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
    .ap-preview-metric strong { margin: 0; font-size: 1.2rem; }
    .ap-preview-system { grid-template-columns: 1fr; gap: .5rem; }
    .ap-preview-line { width: 2px; height: 28px; margin-inline: auto; }
    .ap-preview-line::before { top: -1px; left: 50%; margin: 0 0 0 -4px; }
    .ap-preview-line::after { top: auto; right: auto; bottom: -1px; left: 50%; margin: 0 0 0 -4px; }
    .ap-preview-checks > div { grid-template-columns: 18px 1fr; }
    .ap-preview-checks b { grid-column: 2; }

    .ap-trust-grid { grid-template-columns: 1fr; }
    .ap-trust-grid > div + div,
    .ap-trust-grid > div:nth-child(3),
    .ap-trust-grid > div:nth-child(4) { border-left: 0; border-top: 1px solid rgba(10, 10, 10, .16); }

    .ap-landing-section,
    .ap-landing-proof-section { padding-block: 4rem; }

    .ap-workflow-grid { grid-template-columns: 1fr; }
    .ap-workflow-step + .ap-workflow-step,
    .ap-workflow-step:nth-child(3),
    .ap-workflow-step:nth-child(4) { border-left: 0; border-top: 1px solid var(--ap-border); }

    .ap-proof-row { grid-template-columns: 1fr; gap: .25rem; }
    .ap-proof-row b { text-align: left; }
    .ap-proof-terminal-head { align-items: flex-start; flex-direction: column; }

    .ap-final-cta { padding-block: 2.5rem; }
    .ap-final-cta-inner { padding: 1.4rem; }

    .ap-auth-brand-panel { display: none; }
    .ap-auth-form-panel { min-height: 100svh; padding: 5rem 1rem 2rem; }
    .ap-auth-mobile-mark { display: block; }
    .ap-auth-back { margin-bottom: 1.5rem; }
    .ap-auth-heading { margin-bottom: 1.5rem; }

    .ap-dashboard-hero-main { padding: 1.1rem; }
    .ap-dashboard-actions { width: 100%; }
    .ap-dashboard-actions .btn { flex: 1 1 auto; }
    .ap-dashboard-metrics { grid-template-columns: repeat(3, 1fr); }
    .ap-dashboard-metric { display: block; padding: .8rem .6rem; text-align: center; }
    .ap-dashboard-metric-icon { margin: 0 auto .45rem; }
    .ap-dashboard-metric + .ap-dashboard-metric { border-left: 1px solid var(--ap-border); }
    .ap-dashboard-metric b { font-size: 1.2rem; }
    .ap-dashboard-metric div > span { font-size: .58rem; }

    .ap-resume-body { display: flex; flex-direction: column; align-items: stretch; gap: .85rem; }
    .ap-resume-button { width: 100%; }
    .ap-resume-meta { display: grid; gap: .2rem; }
    .ap-resume-meta span + span::before { display: none; }

    .ap-project-filters .card-body { padding: .8rem; }
    .ap-project-card .card-body { padding: 1rem; }
    .ap-project-actions { grid-template-columns: minmax(0, 1fr) repeat(3, 42px); }
    .ap-project-icon-btn { min-height: 42px; }
}

@media (max-width: 575.98px) {
    .ap-marketing-nav .ap-brand .co { display: none !important; }
    .ap-section-title { font-size: 2.2rem; }
    .ap-method-group-head { flex-direction: column; gap: .55rem; }
    .ap-plan-card { padding: 1.15rem !important; }

    .ap-dashboard-metrics { grid-template-columns: repeat(3, 1fr); }
    .ap-dashboard-metric-icon { width: 30px; height: 30px; }
    .ap-dashboard-plan { padding: .8rem 1rem; }
    .ap-project-actions { grid-template-columns: repeat(3, 1fr); }
    .ap-project-open { grid-column: 1 / -1; min-height: 44px; }
    .ap-project-icon-btn { width: auto; }

    .ap-filter-summary { align-items: flex-start; flex-direction: column; gap: .25rem; }
}

/* Registration shares the auth system but needs a slightly wider form surface. */
.ap-auth-form-panel-wide { padding-inline: clamp(1.25rem, 4vw, 4rem); }
.ap-auth-card-wide { width: min(100%, 620px); }

@media (max-width: 767.98px) {
    .ap-auth-form-panel-wide { padding-inline: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENGINEERMATE BRAND + MARKETING MOTION — UI refresh 2
   Motion is progressive enhancement: the page remains complete without JS,
   and reduced-motion users receive the same content without kinetic effects.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Supplied EngineerMate logo ─────────────────────────────────────────── */
.ap-logo-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .15rem .55rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .55rem;
    background: #ffffff;
    box-shadow: 0 7px 24px rgba(0, 0, 0, .18);
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.ap-logo-link:hover,
.ap-logo-link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 212, 0, .70);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .24), 0 0 0 1px rgba(255, 212, 0, .12);
}

.ap-brand-logo {
    display: block;
    height: auto;
    object-fit: contain;
}

.ap-brand-logo-nav { width: 205px; }
.ap-brand-logo-footer { width: 225px; }
.ap-brand-logo-app { width: 185px; }
.ap-brand-logo-auth { width: min(270px, 78vw); }

/* ── Landing navigation ────────────────────────────────────────────────── */
.ap-marketing-nav {
    background: rgba(5, 5, 5, .84);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transition: background 220ms ease, box-shadow 220ms ease;
}

.ap-marketing-nav.is-scrolled {
    background: rgba(0, 0, 0, .94);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}

.ap-marketing-nav .container-xl { min-height: 54px; }
.ap-marketing-nav .ap-logo-link { flex: 0 0 auto; }

.ap-marketing-link {
    position: relative;
    overflow: hidden;
}

.ap-marketing-link::after {
    content: "";
    position: absolute;
    left: .7rem;
    right: .7rem;
    bottom: .25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ap-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms ease;
}

.ap-marketing-link:hover::after,
.ap-marketing-link:focus-visible::after,
.ap-marketing-link.is-active::after { transform: scaleX(1); }
.ap-marketing-link.is-active { color: var(--ap-chrome-text); }

.ap-nav-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
}

.ap-nav-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ffd400, #fff0a3, #ffd400);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* ── Kinetic hero ──────────────────────────────────────────────────────── */
.ap-landing-hero {
    min-height: min(850px, calc(100svh - 60px));
    background:
        radial-gradient(circle at 72% 24%, rgba(255, 212, 0, .14), transparent 29rem),
        radial-gradient(circle at 13% 90%, rgba(255, 212, 0, .09), transparent 24rem),
        linear-gradient(128deg, #020202 0%, #080808 43%, #0d0c08 72%, #050505 100%);
}

.ap-landing-hero::before {
    opacity: .72;
    background-size: 48px 48px;
    animation: apHeroGridDrift 18s linear infinite;
}

.ap-landing-hero::after {
    width: 38rem;
    height: 38rem;
    right: -16rem;
    bottom: -22rem;
    border-color: rgba(255, 212, 0, .24);
    box-shadow: 0 0 0 5rem rgba(255, 212, 0, .022), 0 0 0 11rem rgba(255, 212, 0, .012);
}

.ap-hero-container { z-index: 2; }
.ap-hero-row { min-height: 760px; padding-block: 6.2rem 5.7rem; }
.ap-hero-copy { position: relative; z-index: 4; }

.ap-hero-pointer-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        440px circle at var(--ap-pointer-x, 72%) var(--ap-pointer-y, 34%),
        rgba(255, 212, 0, .10),
        rgba(255, 212, 0, .025) 42%,
        transparent 72%
    );
    transition: opacity 220ms ease;
}

.ap-hero-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.ap-hero-grid-plane {
    position: absolute;
    left: 32%;
    right: -10%;
    bottom: -25%;
    height: 64%;
    opacity: .26;
    background-image:
        linear-gradient(rgba(255, 212, 0, .25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 212, 0, .20) 1px, transparent 1px);
    background-size: 44px 44px;
    transform: perspective(720px) rotateX(62deg) translate3d(0, var(--ap-parallax-scroll, 0), 0) scale(1.35);
    transform-origin: center bottom;
    mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.65) 48%, transparent 92%);
}

.ap-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: translate3d(0, var(--ap-parallax-scroll, 0), 0);
    filter: blur(1px);
}

.ap-hero-orb-one {
    width: 30rem;
    height: 30rem;
    right: 8%;
    top: 8%;
    border: 1px solid rgba(255, 212, 0, .20);
    box-shadow: inset 0 0 80px rgba(255, 212, 0, .035), 0 0 90px rgba(255, 212, 0, .04);
    animation: apOrbBreathe 5.8s ease-in-out infinite;
}

.ap-hero-orb-two {
    width: 13rem;
    height: 13rem;
    left: 38%;
    bottom: 4%;
    background: radial-gradient(circle, rgba(255, 212, 0, .09), transparent 68%);
    animation: apOrbBreathe 4.6s ease-in-out -1.7s infinite reverse;
}

.ap-hero-energy-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .68;
}

.ap-energy-path {
    fill: none;
    stroke: rgba(255, 212, 0, .40);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-dasharray: .035 .025;
    filter: drop-shadow(0 0 5px rgba(255, 212, 0, .45));
    animation: apEnergyRun 7.5s linear infinite;
}

.ap-energy-path-two {
    opacity: .42;
    stroke-width: .8;
    animation-duration: 11s;
    animation-direction: reverse;
}

.ap-energy-path-three {
    opacity: .30;
    animation-duration: 14s;
}

.ap-energy-nodes circle {
    fill: #ffd400;
    stroke: rgba(255,255,255,.92);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: apNodePulse 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 7px #ffd400);
}

.ap-energy-nodes circle:nth-child(2) { animation-delay: -.5s; }
.ap-energy-nodes circle:nth-child(3) { animation-delay: -1s; }
.ap-energy-nodes circle:nth-child(4) { animation-delay: -1.5s; }
.ap-energy-nodes circle:nth-child(5) { animation-delay: -2s; }

.ap-eyebrow-dot {
    animation: apStatusPulse 2.2s ease-out infinite;
}

.ap-landing-title {
    max-width: 700px;
    font-size: clamp(3.15rem, 5.7vw, 5.7rem);
    line-height: .91;
    letter-spacing: -.035em;
}

.ap-title-accent {
    display: inline;
    color: var(--ap-accent);
    text-shadow: 0 0 28px rgba(255, 212, 0, .08);
}

.ap-hero-actions .btn {
    position: relative;
    overflow: hidden;
}

.ap-hero-primary::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -25%;
    width: 30%;
    height: 340%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent);
    transform: rotate(20deg);
    animation: apButtonSheen 5.4s ease-in-out infinite;
    pointer-events: none;
}

.ap-hero-secondary {
    background: rgba(255, 255, 255, .025);
    backdrop-filter: blur(8px);
}

.ap-magnetic {
    --ap-magnetic-x: 0px;
    --ap-magnetic-y: 0px;
    transform: translate3d(var(--ap-magnetic-x), var(--ap-magnetic-y), 0);
    transition: transform 130ms ease-out, background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
    will-change: transform;
}

.ap-hero-signal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    max-width: 650px;
    color: rgba(255,255,255,.46);
    font-family: var(--ap-font-mono);
    font-size: .64rem;
    letter-spacing: .025em;
}

.ap-signal-live {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    color: #8ef0ae;
    font-weight: 700;
}

.ap-signal-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .42);
    animation: apGreenPulse 2s ease-out infinite;
}

.ap-signal-sequence b { color: var(--ap-accent); font-weight: 500; }

.ap-hero-proof {
    border-color: rgba(255, 212, 0, .20);
    background: linear-gradient(90deg, rgba(255, 212, 0, .035), transparent 72%);
}

.ap-hero-visual {
    position: relative;
    min-height: 565px;
    display: grid;
    align-items: center;
    padding: 2.8rem 1.2rem 2.4rem 2.1rem;
    isolation: isolate;
}

.ap-engineering-preview {
    z-index: 4;
    max-width: 625px;
    margin-left: auto;
    border-top: 1px solid rgba(255, 212, 0, .75);
    background: linear-gradient(145deg, rgba(23,23,23,.90), rgba(8,8,8,.94));
    box-shadow:
        0 38px 95px rgba(0, 0, 0, .50),
        0 0 0 1px rgba(255, 212, 0, .025),
        0 0 75px rgba(255, 212, 0, .055);
    transform-style: preserve-3d;
    will-change: transform;
}

.ap-engineering-preview::before {
    inset: .65rem -.65rem -.65rem .65rem;
    border-color: rgba(255, 212, 0, .20);
}

.ap-engineering-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
}

.ap-engineering-preview::after {
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--ap-spot-x, 50%) var(--ap-spot-y, 50%), rgba(255, 212, 0, .095), transparent 52%);
}

.ap-engineering-preview:hover::after { opacity: 1; }
.ap-engineering-preview > * { position: relative; z-index: 1; }

.ap-preview-glare {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.ap-preview-glare::before {
    content: "";
    position: absolute;
    width: 45%;
    height: 180%;
    left: -65%;
    top: -40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent);
    transform: rotate(18deg);
    animation: apPreviewSweep 8.5s ease-in-out infinite;
}

.ap-preview-brandline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ap-preview-mark {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 10px rgba(255, 212, 0, .18));
}

.ap-preview-status {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.ap-preview-metric {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(0, 0, 0, .42), rgba(255,255,255,.025));
}

.ap-preview-metric::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--ap-accent);
    animation: apMetricLine 4.8s ease-in-out infinite;
}

.ap-preview-metric:nth-child(2)::after { animation-delay: -.8s; }
.ap-preview-metric:nth-child(3)::after { animation-delay: -1.6s; }

.ap-preview-metric em {
    display: block;
    margin-top: .42rem;
    color: #7ee7a3;
    font-size: .56rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ap-preview-system {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        rgba(0,0,0,.30);
    background-size: 22px 22px;
}

.ap-preview-source,
.ap-preview-board {
    position: relative;
    z-index: 2;
}

.ap-preview-line {
    overflow: visible;
    box-shadow: 0 0 10px rgba(255, 212, 0, .14);
}

.ap-current-pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #fff4a6;
    box-shadow: 0 0 5px #ffd400, 0 0 14px rgba(255,212,0,.75);
    animation: apCurrentTravel 2.6s linear infinite;
}

.ap-current-pulse-b { animation-delay: -1.3s; }

.ap-preview-bus {
    position: relative;
    height: 1px;
    margin: .5rem 0 .3rem;
    background: rgba(255,255,255,.20);
}

.ap-preview-bus span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    background: var(--ap-accent);
    box-shadow: 0 0 9px rgba(255,212,0,.65);
    animation: apBusScan 2.8s ease-in-out infinite alternate;
}

.ap-preview-circuits span {
    position: relative;
    overflow: hidden;
}

.ap-preview-circuits span::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 42%;
    background: #fff3a0;
    box-shadow: 0 0 8px rgba(255,212,0,.72);
    animation: apCircuitDrop 2.9s ease-in-out infinite;
}

.ap-preview-circuits span:nth-child(2)::after { animation-delay: -.45s; }
.ap-preview-circuits span:nth-child(3)::after { animation-delay: -.9s; }
.ap-preview-circuits span:nth-child(4)::after { animation-delay: -1.35s; }
.ap-preview-circuits span:nth-child(5)::after { animation-delay: -1.8s; }
.ap-preview-circuits span:nth-child(6)::after { animation-delay: -2.25s; }

.ap-preview-flow {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    align-items: center;
    gap: .4rem;
    margin-bottom: .55rem;
    padding: .58rem .65rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--ap-radius-sm);
    background: rgba(0,0,0,.22);
    color: rgba(255,255,255,.52);
    font-family: var(--ap-font-mono);
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .045em;
}

.ap-preview-flow span {
    white-space: nowrap;
    transition: color 180ms ease, text-shadow 180ms ease;
}

.ap-preview-flow span.is-live { color: var(--ap-accent); text-shadow: 0 0 10px rgba(255,212,0,.25); }

.ap-preview-flow i {
    position: relative;
    display: block;
    height: 1px;
    overflow: hidden;
    background: rgba(255,255,255,.15);
}

.ap-preview-flow i::after {
    content: "";
    position: absolute;
    inset: 0 100% 0 0;
    background: var(--ap-accent);
    animation: apFlowLink 3.3s ease-in-out infinite;
}

.ap-preview-flow i:nth-of-type(2)::after { animation-delay: -.65s; }
.ap-preview-flow i:nth-of-type(3)::after { animation-delay: -1.3s; }

.ap-floating-proof {
    position: absolute;
    z-index: 8;
    min-width: 150px;
    padding: .72rem .8rem;
    border: 1px solid rgba(255,212,0,.28);
    border-radius: .55rem;
    background: rgba(8,8,8,.86);
    box-shadow: 0 18px 42px rgba(0,0,0,.40), 0 0 24px rgba(255,212,0,.04);
    backdrop-filter: blur(12px);
    color: #fff;
    pointer-events: none;
    animation: apFloatProof 5.6s ease-in-out infinite;
}

.ap-floating-proof span,
.ap-floating-proof strong,
.ap-floating-proof small { display: block; }

.ap-floating-proof span {
    color: var(--ap-accent);
    font-family: var(--ap-font-mono);
    font-size: .51rem;
    font-weight: 700;
    letter-spacing: .09em;
}

.ap-floating-proof strong {
    margin-top: .22rem;
    font-family: var(--ap-font-cond);
    font-size: 1.06rem;
    line-height: 1;
}

.ap-floating-proof small {
    margin-top: .28rem;
    color: rgba(255,255,255,.48);
    font-size: .58rem;
}

.ap-floating-proof-annex { left: -2.2rem; top: 3.1rem; animation-delay: -.4s; }
.ap-floating-proof-output { right: -2.7rem; top: 10.8rem; animation-delay: -2s; }
.ap-floating-proof-path { right: .6rem; bottom: 1.7rem; animation-delay: -3.6s; }

.ap-hero-scrollcue {
    position: absolute;
    left: .75rem;
    bottom: 1.2rem;
    align-items: center;
    gap: .55rem;
    color: rgba(255,255,255,.38);
    font-family: var(--ap-font-mono);
    font-size: .58rem;
    letter-spacing: .05em;
    text-decoration: none;
    text-transform: uppercase;
}

.ap-hero-scrollcue:hover { color: var(--ap-accent); }
.ap-hero-scrollcue i { animation: apScrollCue 1.8s ease-in-out infinite; }

/* ── Interactive marketing sections ───────────────────────────────────── */
.ap-trust-strip {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ap-trust-sweep {
    position: absolute;
    inset: 0 auto 0 -30%;
    width: 24%;
    z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
    transform: skewX(-24deg);
    animation: apTrustSweep 7s ease-in-out infinite;
}

.ap-interactive-section {
    position: relative;
    overflow: hidden;
}

.ap-section-orb {
    position: absolute;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    pointer-events: none;
    opacity: .72;
    transform: translate3d(0, var(--ap-parallax-scroll, 0), 0);
    background: radial-gradient(circle, rgba(255,212,0,.085), rgba(255,212,0,.025) 36%, transparent 70%);
}

.ap-section-orb-left { left: -13rem; top: 15%; }
.ap-section-orb-right { right: -12rem; top: 20%; }

[data-ap-spotlight] {
    --ap-spot-x: 50%;
    --ap-spot-y: 50%;
}

[data-ap-spotlight]:not(.ap-engineering-preview) {
    position: relative;
    isolation: isolate;
}

[data-ap-spotlight]:not(.ap-engineering-preview)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
    background: radial-gradient(360px circle at var(--ap-spot-x) var(--ap-spot-y), rgba(255,212,0,.12), transparent 52%);
}

[data-ap-spotlight]:not(.ap-engineering-preview):hover::before { opacity: 1; }

.ap-value-card,
.ap-method-group,
.ap-plan-card {
    transform-style: preserve-3d;
    will-change: transform;
}

.ap-value-card::after,
.ap-method-group::after,
.ap-plan-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--ap-accent), transparent);
    transform: scaleX(0);
    transition: transform 260ms ease;
    pointer-events: none;
}

.ap-value-card:hover::after,
.ap-method-group:hover::after,
.ap-plan-card:hover::after { transform: scaleX(1); }

.ap-value-card:hover .ap-value-icon {
    transform: rotate(-4deg) scale(1.06);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--ap-accent) 20%, transparent);
}

.ap-value-icon { transition: transform 220ms ease, box-shadow 220ms ease; }

.ap-card-arrow {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--ap-border);
    color: var(--ap-text-faint);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 180ms ease, transform 180ms ease, color 180ms ease, border-color 180ms ease;
}

.ap-value-card:hover .ap-card-arrow {
    opacity: 1;
    transform: translate(0,0);
    color: var(--ap-accent-text);
    border-color: var(--ap-accent-wash-line);
}

.ap-method-group {
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.ap-method-group:hover {
    border-color: var(--ap-border-strong);
    box-shadow: var(--ap-shadow-lg);
}

.ap-method-chips span {
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.ap-method-chips span:hover {
    transform: translateY(-2px);
    border-bottom-color: #fff1a6;
}

.ap-workflow-progress-line {
    position: relative;
    height: 3px;
    margin: 0 4% -2px;
    overflow: hidden;
    background: var(--ap-border);
    z-index: 3;
}

.ap-workflow-progress-line span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--ap-accent), #fff0a1, var(--ap-accent));
    box-shadow: 0 0 14px color-mix(in srgb, var(--ap-accent) 35%, transparent);
    transform: scaleX(var(--ap-workflow-progress, 0));
    transform-origin: left center;
    transition: transform 80ms linear;
}

.ap-workflow-step {
    overflow: hidden;
    transition: background 200ms ease, transform 200ms ease;
}

.ap-workflow-step:hover {
    background: color-mix(in srgb, var(--ap-surface) 94%, var(--ap-accent) 6%);
    z-index: 2;
}

.ap-workflow-step > i,
.ap-workflow-index { transition: transform 200ms ease, box-shadow 200ms ease; }
.ap-workflow-step:hover > i { transform: translateY(-3px) scale(1.08); }
.ap-workflow-step:hover .ap-workflow-index { transform: scale(1.08); box-shadow: 0 0 0 4px var(--ap-accent-wash); }

.ap-landing-proof-section { position: relative; overflow: hidden; }

.ap-proof-scanline {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: -2px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,212,0,.9), transparent);
    box-shadow: 0 0 18px rgba(255,212,0,.52);
    animation: apProofScan 7s linear infinite;
    pointer-events: none;
}

.ap-proof-terminal {
    position: relative;
    overflow: hidden;
}

.ap-proof-terminal::after {
    content: "";
    position: absolute;
    inset: -80% 0 auto;
    height: 70%;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(126,231,163,.045), transparent);
    animation: apTerminalScan 5.8s linear infinite;
}

.ap-proof-row {
    transition: background 170ms ease, padding-left 170ms ease;
}

.ap-proof-row:hover {
    padding-left: 1.15rem;
    background: rgba(126,231,163,.035);
}

.ap-proof-tags span {
    transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}

.ap-proof-tags span:hover {
    transform: translateY(-2px);
    border-color: rgba(255,212,0,.42);
    background: rgba(255,212,0,.055);
}

.ap-plan-card {
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.ap-plan-card:hover {
    border-color: var(--ap-border-strong);
    box-shadow: var(--ap-shadow-lg);
}

.ap-plan-card.featured:hover {
    border-color: var(--ap-accent);
    box-shadow: 0 16px 44px color-mix(in srgb, var(--ap-accent) 11%, rgba(0,0,0,.18));
}

.ap-final-cta-inner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ap-final-circuit {
    position: absolute;
    right: -7%;
    top: -70%;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255,212,0,.18);
    box-shadow: 0 0 0 3rem rgba(255,212,0,.022), 0 0 0 7rem rgba(255,212,0,.014);
    animation: apCtaOrbit 9s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.ap-final-circuit::before,
.ap-final-circuit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--ap-accent);
    box-shadow: 0 0 16px rgba(255,212,0,.75);
}

.ap-final-circuit::before { width: 8px; height: 8px; top: 18%; left: 9%; }
.ap-final-circuit::after { width: 5px; height: 5px; right: 4%; bottom: 28%; }

/* AOS is fail-safe: if its script is blocked, content is still visible. */
html:not(.ap-aos-ready) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Motion keyframes ──────────────────────────────────────────────────── */
@keyframes apHeroGridDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 48px 48px, 48px 48px; }
}

@keyframes apEnergyRun {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -1; }
}

@keyframes apNodePulse {
    0%, 100% { transform: scale(.82); opacity: .62; }
    50% { transform: scale(1.45); opacity: 1; }
}

@keyframes apOrbBreathe {
    0%, 100% { opacity: .48; filter: blur(1px); }
    50% { opacity: .9; filter: blur(3px); }
}

@keyframes apStatusPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 212, 0, .44); }
    72%, 100% { box-shadow: 0 0 0 8px rgba(255, 212, 0, 0); }
}

@keyframes apGreenPulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .44); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
}

@keyframes apButtonSheen {
    0%, 56% { left: -32%; opacity: 0; }
    64% { opacity: .78; }
    79%, 100% { left: 125%; opacity: 0; }
}

@keyframes apPreviewSweep {
    0%, 58% { left: -65%; opacity: 0; }
    66% { opacity: 1; }
    84%, 100% { left: 135%; opacity: 0; }
}

@keyframes apMetricLine {
    0%, 22% { right: 100%; opacity: .25; }
    48%, 72% { right: 0; opacity: 1; }
    100% { right: 0; opacity: .2; }
}

@keyframes apCurrentTravel {
    0% { left: 0; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { left: calc(100% - 8px); opacity: 0; }
}

@keyframes apBusScan {
    from { width: 16%; }
    to { width: 92%; }
}

@keyframes apCircuitDrop {
    0%, 20% { top: -45%; opacity: 0; }
    35% { opacity: 1; }
    80% { top: 105%; opacity: 1; }
    100% { top: 105%; opacity: 0; }
}

@keyframes apFlowLink {
    0%, 12% { right: 100%; }
    42%, 58% { right: 0; }
    100% { right: 0; opacity: .15; }
}

@keyframes apFloatProof {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -9px, 0); }
}

@keyframes apScrollCue {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

@keyframes apTrustSweep {
    0%, 14% { left: -35%; opacity: 0; }
    26% { opacity: .72; }
    52%, 100% { left: 120%; opacity: 0; }
}

@keyframes apProofScan {
    from { top: 0; opacity: 0; }
    8% { opacity: 1; }
    88% { opacity: .55; }
    to { top: 100%; opacity: 0; }
}

@keyframes apTerminalScan {
    from { top: -80%; }
    to { top: 120%; }
}

@keyframes apCtaOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Responsive motion composition ─────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .ap-brand-logo-nav { width: 185px; }
    .ap-hero-row { min-height: 700px; }
    .ap-hero-visual { min-height: 525px; padding-inline: 1rem; }
    .ap-floating-proof-annex { left: -.4rem; top: 1.1rem; }
    .ap-floating-proof-output { right: -.2rem; top: 9rem; }
    .ap-floating-proof-path { right: .2rem; bottom: .7rem; }
}

@media (max-width: 991.98px) {
    .ap-landing-hero { min-height: 0; }
    .ap-hero-row { padding-block: 4.6rem 5.2rem; }
    .ap-hero-visual { min-height: 545px; max-width: 720px; margin-inline: auto; padding: 3rem 2rem 2.4rem; }
    .ap-engineering-preview { margin-inline: auto; }
    .ap-floating-proof-annex { left: .2rem; }
    .ap-floating-proof-output { right: .2rem; }
    .ap-floating-proof-path { right: 1.6rem; }
    .ap-hero-grid-plane { left: 0; right: -20%; bottom: -19%; }
    .ap-section-orb { opacity: .48; }
}

@media (max-width: 767.98px) {
    .ap-marketing-nav .container-xl { min-height: 50px; }
    .ap-logo-link-nav { padding: .08rem .35rem; border-radius: .45rem; }
    .ap-brand-logo-nav { width: 142px; }
    .ap-brand-logo-footer { width: 200px; }
    .ap-landing-title { font-size: clamp(2.75rem, 12.4vw, 4.25rem); line-height: .92; }
    .ap-hero-row { padding-block: 3.9rem 4.2rem; }
    .ap-hero-signal { align-items: flex-start; flex-direction: column; gap: .42rem; }
    .ap-hero-visual { min-height: 0; padding: 2.3rem 0 4.8rem; }
    .ap-floating-proof { min-width: 132px; padding: .6rem .65rem; }
    .ap-floating-proof strong { font-size: .94rem; }
    .ap-floating-proof-annex { left: 0; top: .1rem; }
    .ap-floating-proof-output { display: none; }
    .ap-floating-proof-path { right: .1rem; bottom: .4rem; }
    .ap-engineering-preview { margin-top: 2.1rem; }
    .ap-preview-flow { grid-template-columns: 1fr; gap: .25rem; }
    .ap-preview-flow i { width: 1px; height: 10px; margin-inline: .25rem; }
    .ap-preview-flow span { white-space: normal; }
    .ap-current-pulse {
        top: 0;
        left: 50%;
        margin: 0 0 0 -4px;
        animation-name: apCurrentTravelMobile;
    }
    .ap-hero-orb-one { width: 22rem; height: 22rem; right: -7rem; }
    .ap-energy-path-two { display: none; }
    .ap-workflow-progress-line { display: none; }
    .ap-card-arrow { opacity: .55; transform: none; }
    .ap-final-circuit { width: 90%; right: -50%; top: -35%; }
}

@media (max-width: 575.98px) {
    .ap-logo-link-nav { max-width: 132px; }
    .ap-brand-logo-nav { width: 124px; }
    .ap-marketing-nav-actions .btn { min-height: 36px; }
    .ap-hero-actions .btn { width: 100%; justify-content: center; }
    .ap-hero-visual { padding-top: 2rem; }
    .ap-floating-proof-annex { transform: scale(.92); transform-origin: left top; }
    .ap-floating-proof-path { transform: scale(.92); transform-origin: right bottom; }
    .ap-preview-brandline { align-items: flex-start; }
    .ap-preview-status { font-size: .55rem; }
    .ap-preview-mark { width: 30px; height: 30px; }
}

@keyframes apCurrentTravelMobile {
    0% { top: 0; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { top: calc(100% - 8px); opacity: 0; }
}

/* Reduced-motion is a first-class UX path, not a degraded fallback. */
@media (prefers-reduced-motion: reduce) {
    [data-ap-landing] *,
    [data-ap-landing] *::before,
    [data-ap-landing] *::after,
    .ap-marketing-nav *,
    .ap-marketing-nav *::before,
    .ap-marketing-nav *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    [data-ap-parallax-scroll],
    .ap-hero-grid-plane,
    .ap-floating-proof,
    .ap-magnetic { transform: none !important; }
}

/* Spotlight layer correction: keep the glow above the card fill and below text. */
[data-ap-spotlight]:not(.ap-engineering-preview)::before { z-index: 0; }
.ap-value-card > *,
.ap-method-proof > *,
.ap-method-group > *,
.ap-workflow-step > *,
.ap-proof-terminal > *,
.ap-plan-card > * { position: relative; z-index: 1; }

/* Shared logo sizing on authenticated and auth surfaces. */
.ap-logo-link-app {
    padding: .08rem .42rem;
    border-radius: .45rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.ap-logo-link-offcanvas {
    padding: .08rem .35rem;
    border: 1px solid var(--ap-border);
    box-shadow: none;
}

.ap-brand-logo-offcanvas { width: 170px; }

.ap-logo-area-chip {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 24px;
    padding-inline: .45rem;
    border: 1px solid rgba(255,212,0,.34);
    border-radius: 999px;
    color: var(--ap-accent);
    background: rgba(255,212,0,.08);
    font-family: var(--ap-font-cond);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.ap-logo-area-chip-light {
    color: var(--ap-accent-text);
    background: var(--ap-accent-wash);
    border-color: var(--ap-accent-wash-line);
}

.ap-logo-link-auth {
    padding: .2rem .65rem;
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 16px 44px rgba(0,0,0,.28);
}

.ap-auth-mobile-logo {
    display: none;
    width: 58px;
    height: 58px;
    margin-bottom: .8rem;
    object-fit: contain;
    filter: drop-shadow(0 7px 16px rgba(255,212,0,.12));
}

@media (max-width: 767.98px) {
    .ap-auth-mobile-logo { display: block; }
    .ap-brand-logo-app { width: 158px; }
    .ap-brand-logo-offcanvas { width: 150px; }
}

@media (max-width: 575.98px) {
    .ap-brand-logo-app { width: 136px; }
    .ap-logo-link-app { padding-inline: .3rem; }
}

/* Decorative layers stay behind readable content. */
.ap-trust-sweep { z-index: 0; }
.ap-trust-strip .container-xl { z-index: 1; }
.ap-final-cta-inner > .position-relative { z-index: 2; }
.ap-landing-proof-section > .container-xl { z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   SIGNED-IN SHELL — LIGHT ONLY  (customer /projects and the admin console)
   ───────────────────────────────────────────────────────────────────────────
   Field review, 2026-09-19: "move away from dark mode — white background,
   dark text." Two things made the app read as dark, and only one of them was
   the dark theme:

     1. the theme defaulted to 'system', so a phone or laptop set to dark got
        the dark palette — fixed in the layouts: <html data-theme="light">;
     2. even in LIGHT mode the chrome was black — appbar, sidebar, every card
        header, every table header, the totals rows, the resume banner — close
        to half of every screen. That is what this block changes.

   It re-points the CHROME tokens at light values for [data-shell="app"] only,
   so every component already written against them follows by construction.
   The public landing page does not carry data-shell and is untouched.

   Contrast (WCAG 2.1, computed): text #141414 on #ffffff 18.4:1 · nav text
   #3d3d3a on #fafaf8 10.4:1 · faint #6b6b66 on #fafaf8 5.1:1 · muted #5c5c58
   on #f7f7f5 6.3:1 · accent-text #8a6200 on #fff6cc 5.0:1 · white on the
   #141414 ink button 18.4:1 — every pair clears AA for body text.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-shell="app"] {
    color-scheme: light;

    --ap-bg: #ffffff;
    --ap-surface: #ffffff;
    --ap-surface-2: #f7f7f5;
    --ap-surface-3: #ffffff;
    --ap-surface-sunk: #f1f1ee;
    --ap-border: #e6e6e2;
    --ap-border-strong: #d2d2cc;

    /* Chrome, light: white bars, a warm off-white rail, hairline rules. */
    --ap-chrome: #ffffff;
    --ap-chrome-2: #f7f7f5;
    --ap-chrome-line: #e6e6e2;
    --ap-chrome-text: #141414;
    --ap-chrome-muted: #3d3d3a;
    --ap-chrome-faint: #6b6b66;

    /* The dark ink the primary button keeps — a white page still needs one
       unmistakable "do this" that is not yellow. */
    --ap-ink-btn: #141414;
    --ap-ink-btn-hover: #2b2b28;

    --ap-head-bg: #f3f3f0;           /* table heads */
    --ap-foot-bg: #f7f7f5;           /* totals rows */
}

[data-shell="app"] body { background: var(--ap-bg); color: var(--ap-text); }

/* ── Bars ─────────────────────────────────────────────────────────────────── */
[data-shell="app"] .ap-appbar {
    background: #ffffff;
    border-bottom: 1px solid var(--ap-border);
    box-shadow: inset 0 -3px 0 var(--ap-accent), 0 1px 8px rgba(10, 10, 10, .04);
}
[data-shell="app"] .ap-logo-link {
    border-color: transparent;
    box-shadow: none;
    padding-inline: 0;
}
[data-shell="app"] .ap-logo-link:hover,
[data-shell="app"] .ap-logo-link:focus-visible { box-shadow: none; border-color: transparent; }
[data-shell="app"] .ap-subtitle { color: var(--ap-chrome-faint); }

/* The hamburger borrows the old toggle's class. */
[data-shell="app"] .ap-theme-toggle { border-color: var(--ap-border-strong); color: var(--ap-text); }
[data-shell="app"] .ap-theme-toggle:hover { color: var(--ap-text); background: var(--ap-accent-wash); }

[data-shell="app"] .ap-sidebar {
    background: #fafaf8;
    border-right: 1px solid var(--ap-border);
}
[data-shell="app"] .ap-sidebar .nav-link { color: var(--ap-chrome-muted); }
[data-shell="app"] .ap-sidebar .nav-link:hover { color: var(--ap-text); background: #f0f0ec; }
/* Active: yellow is the RULE and the wash, never the text (1.4:1 on white). */
[data-shell="app"] .ap-sidebar .nav-link.active {
    color: var(--ap-text);
    background: var(--ap-accent-wash);
    border-left-color: var(--ap-accent);
}
[data-shell="app"] .ap-sidebar .nav-label { color: var(--ap-chrome-faint); }
[data-shell="app"] .ap-brand .mark,
[data-shell="app"] .ap-brand-stack .ap-discipline { color: var(--ap-accent-text); }

[data-shell="app"] .offcanvas { background: #ffffff; color: var(--ap-text); }
[data-shell="app"] .offcanvas .btn-close { filter: none; }

/* ── Cards and tables ─────────────────────────────────────────────────────── */
[data-shell="app"] .card { box-shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 2px 10px rgba(10, 10, 10, .04); }
[data-shell="app"] .card-header {
    background: var(--ap-surface-2);
    color: var(--ap-text);
    border-bottom: 2px solid var(--ap-accent);
}
[data-shell="app"] .res-table thead th,
[data-shell="app"] .table-dark thead th,
[data-shell="app"] .table > thead.table-dark th {
    background: var(--ap-head-bg);
    color: var(--ap-text);
    border-bottom: 1px solid var(--ap-border-strong);
}
[data-shell="app"] .res-table tfoot td,
[data-shell="app"] .res-table tr.total td {
    background: var(--ap-foot-bg);
    color: var(--ap-text);
    border-top: 2px solid var(--ap-border-strong);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
[data-shell="app"] .btn-ap,
[data-shell="app"] .btn-primary {
    background: var(--ap-ink-btn);
    border-color: var(--ap-ink-btn);
    color: #ffffff;
}
[data-shell="app"] .btn-ap:hover, [data-shell="app"] .btn-ap:focus,
[data-shell="app"] .btn-primary:hover, [data-shell="app"] .btn-primary:focus {
    background: var(--ap-ink-btn-hover);
    border-color: var(--ap-accent);
    color: #ffffff;
}
[data-shell="app"] .page-item.active .page-link { background: var(--ap-ink-btn); border-color: var(--ap-ink-btn); color: #ffffff; }
[data-shell="app"] .plan-card.featured .plan-badge { background: var(--ap-ink-btn); color: var(--ap-accent); }

/* ── Dashboard: the resume banner was a black slab across the page ──────── */
[data-shell="app"] .ap-resume-card {
    background: #ffffff;
    color: var(--ap-text);
    border: 1px solid var(--ap-border);
}
[data-shell="app"] .ap-resume-kicker { color: var(--ap-accent-text); }
[data-shell="app"] .ap-resume-meta { color: var(--ap-text-muted); }
[data-shell="app"] .ap-resume-meta span + span::before { color: var(--ap-text-faint); }
[data-shell="app"] .ap-resume-progress-wrap { color: var(--ap-text-muted); }
[data-shell="app"] .ap-resume-progress-wrap b { color: var(--ap-text); }
[data-shell="app"] .ap-resume-progress { background: #ecece8; }
[data-shell="app"] .ap-resume-button { background: var(--ap-ink-btn); border-color: var(--ap-ink-btn); color: #ffffff; }
[data-shell="app"] .ap-hero { background: var(--ap-surface-2); color: var(--ap-text); }
[data-shell="app"] .ap-logo-area-chip { border-color: var(--ap-accent-wash-line); }

/* Buttons and text written for the black headers — there is no dark surface
   left in the shell, so "light on dark" variants become "dark on light". */
[data-shell="app"] .btn-light {
    background: #ffffff;
    border: 1px solid var(--ap-border-strong);
    color: var(--ap-text);
}
[data-shell="app"] .btn-light:hover, [data-shell="app"] .btn-light:focus {
    background: var(--ap-accent-wash);
    border-color: var(--ap-accent);
    color: var(--ap-text);
}
[data-shell="app"] .btn-outline-light {
    background: transparent;
    border: 1px solid var(--ap-border-strong);
    color: var(--ap-text-muted);
}
[data-shell="app"] .btn-outline-light:hover, [data-shell="app"] .btn-outline-light:focus {
    background: var(--ap-surface-2);
    border-color: var(--ap-text-muted);
    color: var(--ap-text);
}
[data-shell="app"] .card-header .text-white,
[data-shell="app"] .card-header .text-light,
[data-shell="app"] .card-header .link-light { color: var(--ap-text) !important; }
[data-shell="app"] .card-header .text-white-50 { color: var(--ap-text-muted) !important; }

/* ── KPI tiles written as .metric-label / .metric-value ─────────────────────
   The admin overview and the designer's result tiles use these names; only
   .k / .v were ever styled, so every KPI printed at body size. */
.metric-label {
    font-size: .68rem;
    font-weight: 700;
    color: var(--ap-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.metric-value {
    font-family: var(--ap-font-cond);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ap-text);
    margin: .1rem 0 .15rem;
    overflow-wrap: anywhere;
}
.metric-value small { font-size: .55em; font-weight: 700; color: var(--ap-text-muted); }