/* ==========================================================================
   ATP Spedition — design tokens & primitives
   Aesthetic: clean operational data-tool (Linear shell + Stripe density).
   Brand: azure #1B5F9E (primary), navy #204176 (ink). Light + dark, WCAG 2.2 AA.
   Load once per host: <link href="_content/ATP.Shared/atp.css" />.
   ========================================================================== */

/* ---- brand + primitive ramps (theme-independent) ---- */
:root {
    /* brand */
    --atp-azure: #1B5F9E;
    --atp-azure-600: #17537f;
    --atp-azure-700: #124469;
    --atp-azure-400: #4C93D6;
    --atp-azure-300: #7DB2E2;
    --atp-navy: #204176;
    --atp-navy-700: #1a3560;

    /* fixed accents used for the on-brand focus ring / selection */
    --atp-focus: rgba(27, 95, 158, 0.45);

    /* spacing — 4pt scale */
    --atp-space-0: 0;
    --atp-space-1: 4px;
    --atp-space-2: 8px;
    --atp-space-3: 12px;
    --atp-space-4: 16px;
    --atp-space-5: 20px;
    --atp-space-6: 24px;
    --atp-space-8: 32px;
    --atp-space-10: 40px;
    --atp-space-12: 48px;
    --atp-space-16: 64px;

    /* radius */
    --atp-radius-sm: 5px;
    --atp-radius-md: 8px;
    --atp-radius-lg: 12px;
    --atp-radius-pill: 999px;

    /* type */
    --atp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, system-ui, sans-serif;
    --atp-font-mono: "SF Mono", "JetBrains Mono", "Cascadia Mono", ui-monospace, Menlo,
        Consolas, monospace;

    --atp-text-xs: 11px;
    --atp-text-sm: 12px;
    --atp-text-base: 13px;   /* dense but legible operational baseline */
    --atp-text-md: 14px;
    --atp-text-lg: 16px;
    --atp-text-xl: 20px;
    --atp-text-2xl: 26px;
    --atp-text-3xl: 34px;

    --atp-weight-normal: 400;
    --atp-weight-medium: 500;
    --atp-weight-semibold: 600;

    --atp-leading-tight: 1.25;
    --atp-leading-normal: 1.5;

    /* motion */
    --atp-ease: cubic-bezier(0.2, 0, 0, 1);
    --atp-dur-fast: 120ms;
    --atp-dur: 180ms;

    /* layout metrics */
    --atp-sidebar-w: 232px;
    --atp-topbar-h: 52px;
    --atp-measure: 68ch;
}

/* ---- semantic tokens: LIGHT (default) ---- */
:root,
[data-theme="light"] {
    color-scheme: light;

    --atp-bg: #F7F8FA;
    --atp-surface: #FFFFFF;
    --atp-surface-2: #F1F3F6;
    --atp-surface-3: #E9ECF1;
    --atp-overlay: rgba(19, 23, 32, 0.42);

    --atp-border: #E2E6EC;
    --atp-border-strong: #CBD2DB;

    --atp-text: #131720;
    --atp-text-muted: #566072;
    --atp-text-subtle: #838D9C;

    --atp-primary: var(--atp-azure);
    --atp-primary-hover: var(--atp-azure-600);
    --atp-primary-active: var(--atp-azure-700);
    --atp-primary-contrast: #FFFFFF;
    --atp-primary-soft: rgba(27, 95, 158, 0.10);
    --atp-link: var(--atp-azure-600);

    --atp-heading: var(--atp-navy);

    --atp-success: #1B7A3D;
    --atp-success-soft: #E7F6EC;
    --atp-warn: #9A6400;
    --atp-warn-soft: #FCF1DC;
    --atp-danger: #C02A2A;
    --atp-danger-soft: #FBE9E9;
    --atp-danger-contrast: #FFFFFF;

    --atp-shadow-sm: 0 1px 2px rgba(19, 23, 32, 0.06), 0 1px 1px rgba(19, 23, 32, 0.04);
    --atp-shadow-md: 0 4px 12px rgba(19, 23, 32, 0.10), 0 1px 2px rgba(19, 23, 32, 0.06);
    --atp-shadow-lg: 0 16px 40px rgba(19, 23, 32, 0.18), 0 2px 8px rgba(19, 23, 32, 0.08);
}

/* ---- semantic tokens: DARK ---- */
[data-theme="dark"] {
    color-scheme: dark;

    --atp-bg: #0E1116;
    --atp-surface: #161B22;
    --atp-surface-2: #1C222B;
    --atp-surface-3: #232B36;
    --atp-overlay: rgba(3, 6, 10, 0.62);

    --atp-border: #262D38;
    --atp-border-strong: #3A4451;

    --atp-text: #E6EAF0;
    --atp-text-muted: #A2ACBA;
    --atp-text-subtle: #6E7887;

    --atp-primary: var(--atp-azure);
    --atp-primary-hover: var(--atp-azure-400);
    --atp-primary-active: var(--atp-azure-300);
    --atp-primary-contrast: #FFFFFF;
    --atp-primary-soft: rgba(76, 147, 214, 0.16);
    --atp-link: var(--atp-azure-300);

    --atp-heading: #DCE6F2;

    --atp-success: #4ADE80;
    --atp-success-soft: rgba(74, 222, 128, 0.14);
    --atp-warn: #F1C15A;
    --atp-warn-soft: rgba(241, 193, 90, 0.14);
    --atp-danger: #F87171;
    --atp-danger-soft: rgba(248, 113, 113, 0.14);
    --atp-danger-contrast: #14181F;

    --atp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --atp-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.50);
    --atp-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.62);
}

/* system-preference dark, unless the user has explicitly chosen light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --atp-bg: #0E1116;
        --atp-surface: #161B22;
        --atp-surface-2: #1C222B;
        --atp-surface-3: #232B36;
        --atp-overlay: rgba(3, 6, 10, 0.62);

        --atp-border: #262D38;
        --atp-border-strong: #3A4451;

        --atp-text: #E6EAF0;
        --atp-text-muted: #A2ACBA;
        --atp-text-subtle: #6E7887;

        --atp-primary-hover: var(--atp-azure-400);
        --atp-primary-active: var(--atp-azure-300);
        --atp-primary-soft: rgba(76, 147, 214, 0.16);
        --atp-link: var(--atp-azure-300);
        --atp-heading: #DCE6F2;

        --atp-success: #4ADE80;
        --atp-success-soft: rgba(74, 222, 128, 0.14);
        --atp-warn: #F1C15A;
        --atp-warn-soft: rgba(241, 193, 90, 0.14);
        --atp-danger: #F87171;
        --atp-danger-soft: rgba(248, 113, 113, 0.14);
        --atp-danger-contrast: #14181F;

        --atp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
        --atp-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.50);
        --atp-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.62);
    }
}

/* ---- base ---- */
.atp-root,
.atp-app {
    font-family: var(--atp-font-sans);
    font-size: var(--atp-text-base);
    line-height: var(--atp-leading-normal);
    color: var(--atp-text);
    background: var(--atp-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Proportional figures for prose; data contexts (tables, money, KPIs) opt
       into tabular-nums explicitly so columns still align. */
    font-feature-settings: "cv05" 1, "ss01" 1;
}

.atp-root *,
.atp-root *::before,
.atp-root *::after {
    box-sizing: border-box;
}

::selection { background: var(--atp-primary-soft); color: var(--atp-heading); }

/* focus ring — consistent, on-brand, keyboard-visible.
   Baseline outline for links / nav / generic controls; primitives with a
   bespoke ring (buttons, inputs) opt out below so we never double-ring. */
.atp-root :focus-visible {
    outline: 2px solid var(--atp-primary);
    outline-offset: 2px;
    border-radius: var(--atp-radius-sm);
}

/* Headings are the programmatic focus target of <FocusOnNavigate Selector="h1">
   (moves focus to the top of new page content so screen readers announce it).
   They are NOT interactive — never paint the keyboard focus box on them. */
.atp-root h1:focus,
.atp-root h1:focus-visible,
.atp-root h2:focus,
.atp-root h2:focus-visible,
.atp-root h3:focus,
.atp-root h3:focus-visible,
.atp-root [tabindex="-1"]:focus:not(:focus-visible) {
    outline: none;
}

/* Primitives own their focus ring (see below) — suppress the generic outline. */
.atp-root .atp-btn:focus-visible,
.atp-root .atp-iconbtn:focus-visible,
.atp-root .atp-input:focus-visible,
.atp-root .atp-select:focus-visible,
.atp-root .atp-linkbtn:focus-visible {
    outline: none;
}

/* ---- typography helpers ---- */
.atp-h1 { font-size: var(--atp-text-3xl); font-weight: var(--atp-weight-semibold); line-height: var(--atp-leading-tight); color: var(--atp-heading); letter-spacing: -0.02em; margin: 0; }
.atp-h2 { font-size: var(--atp-text-2xl); font-weight: var(--atp-weight-semibold); line-height: var(--atp-leading-tight); color: var(--atp-heading); letter-spacing: -0.015em; margin: 0; }
.atp-h3 { font-size: var(--atp-text-xl); font-weight: var(--atp-weight-semibold); line-height: var(--atp-leading-tight); color: var(--atp-heading); margin: 0; }
.atp-eyebrow { font-size: var(--atp-text-xs); font-weight: var(--atp-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--atp-text-subtle); margin: 0; }
.atp-muted { color: var(--atp-text-muted); }
.atp-subtle { color: var(--atp-text-subtle); }
.atp-mono { font-family: var(--atp-font-mono); font-variant-numeric: tabular-nums; }
.atp-measure { max-width: var(--atp-measure); }

a.atp-link, .atp-link { color: var(--atp-link); text-decoration: none; }
a.atp-link:hover, .atp-link:hover { text-decoration: underline; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.atp-btn {
    --_bg: transparent;
    --_fg: var(--atp-text);
    --_bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atp-space-2);
    height: 32px;
    padding: 0 var(--atp-space-3);
    font-family: inherit;
    font-size: var(--atp-text-md);
    font-weight: var(--atp-weight-medium);
    line-height: 1;
    color: var(--_fg);
    background: var(--_bg);
    border: 1px solid var(--_bd);
    border-radius: var(--atp-radius-md);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;   /* anchor-styled buttons (<a class="atp-btn">) must not underline */
    transition: background var(--atp-dur-fast) var(--atp-ease),
        border-color var(--atp-dur-fast) var(--atp-ease),
        color var(--atp-dur-fast) var(--atp-ease);
    user-select: none;
}
.atp-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.atp-btn--sm { height: 26px; padding: 0 var(--atp-space-2); font-size: var(--atp-text-sm); }
.atp-btn--lg { height: 38px; padding: 0 var(--atp-space-5); font-size: var(--atp-text-lg); }
.atp-btn--block { width: 100%; }

/* consistent, on-brand focus ring — a soft azure halo (not a hard box) */
.atp-btn:focus-visible { box-shadow: 0 0 0 3px var(--atp-focus); }

/* primary: azure with a subtle vertical sheen + hairline inset highlight for depth */
.atp-btn--primary {
    --_fg: var(--atp-primary-contrast); --_bd: var(--atp-primary);
    background: linear-gradient(180deg, color-mix(in srgb, var(--atp-primary) 86%, #FFFFFF), var(--atp-primary));
    box-shadow: var(--atp-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.atp-btn--primary:hover:not(:disabled) {
    --_bd: var(--atp-primary-hover);
    background: linear-gradient(180deg, color-mix(in srgb, var(--atp-primary-hover) 90%, #FFFFFF), var(--atp-primary-hover));
}
.atp-btn--primary:active:not(:disabled) {
    --_bd: var(--atp-primary-active);
    background: var(--atp-primary-active);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20);
}
.atp-btn--primary:focus-visible { box-shadow: 0 0 0 3px var(--atp-focus), inset 0 1px 0 rgba(255, 255, 255, 0.16); }

.atp-btn--ghost { --_bg: transparent; --_fg: var(--atp-text); --_bd: var(--atp-border-strong); box-shadow: var(--atp-shadow-sm); }
.atp-btn--ghost:hover:not(:disabled) { --_bg: var(--atp-surface-2); --_bd: var(--atp-border-strong); }
.atp-btn--ghost:active:not(:disabled) { --_bg: var(--atp-surface-3); box-shadow: none; }

.atp-btn--subtle { --_bg: var(--atp-surface-2); --_fg: var(--atp-text); --_bd: transparent; }
.atp-btn--subtle:hover:not(:disabled) { --_bg: var(--atp-surface-3); }

.atp-btn--danger {
    --_fg: var(--atp-danger-contrast); --_bd: var(--atp-danger);
    background: linear-gradient(180deg, color-mix(in srgb, var(--atp-danger) 88%, #FFFFFF), var(--atp-danger));
    box-shadow: var(--atp-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.atp-btn--danger:hover:not(:disabled) { filter: brightness(0.95); }
.atp-btn--danger:active:not(:disabled) { filter: brightness(0.88); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20); }
.atp-btn--danger:focus-visible { box-shadow: 0 0 0 3px var(--atp-danger-soft), inset 0 1px 0 rgba(255, 255, 255, 0.16); }

/* ==========================================================================
   Card / surfaces
   ========================================================================== */
.atp-card {
    background: var(--atp-surface);
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg);
    box-shadow: var(--atp-shadow-sm);
}
.atp-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--atp-space-3);
    padding: var(--atp-space-4) var(--atp-space-5);
    border-bottom: 1px solid var(--atp-border);
}
.atp-card__title { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-card__body { padding: var(--atp-space-5); }
.atp-card__footer { padding: var(--atp-space-4) var(--atp-space-5); border-top: 1px solid var(--atp-border); }
.atp-card--flush .atp-card__body { padding: 0; }

/* ==========================================================================
   Badge & KPI tile
   ========================================================================== */
.atp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--atp-space-1);
    height: 20px;
    padding: 0 var(--atp-space-2);
    font-size: var(--atp-text-xs);
    font-weight: var(--atp-weight-medium);
    border-radius: var(--atp-radius-sm);
    background: var(--atp-surface-2);
    color: var(--atp-text-muted);
    border: 1px solid var(--atp-border);
}
.atp-badge--primary { background: var(--atp-primary-soft); color: var(--atp-link); border-color: transparent; }
.atp-badge--success { background: var(--atp-success-soft); color: var(--atp-success); border-color: transparent; }
.atp-badge--warn { background: var(--atp-warn-soft); color: var(--atp-warn); border-color: transparent; }
.atp-badge--danger { background: var(--atp-danger-soft); color: var(--atp-danger); border-color: transparent; }

.atp-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--atp-space-2);
    padding: var(--atp-space-5);
    background: var(--atp-surface);
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg);
    box-shadow: var(--atp-shadow-sm);
}
.atp-kpi__label { font-size: var(--atp-text-sm); color: var(--atp-text-muted); font-weight: var(--atp-weight-medium); }
.atp-kpi__value { font-size: var(--atp-text-2xl); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.atp-kpi__foot { display: flex; align-items: center; gap: var(--atp-space-2); font-size: var(--atp-text-sm); color: var(--atp-text-subtle); }
.atp-kpi__delta--up { color: var(--atp-success); }
.atp-kpi__delta--down { color: var(--atp-danger); }

/* ==========================================================================
   Status pill  (colors map from ATP.Contracts.JobStatusProjections.StatusPill)
   ========================================================================== */
.atp-pill {
    --_bg: var(--atp-surface-2);
    --_fg: var(--atp-text-muted);
    --_dot: var(--atp-text-subtle);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 var(--atp-space-2) 0 var(--atp-space-2);
    font-size: var(--atp-text-xs);
    font-weight: var(--atp-weight-semibold);
    letter-spacing: 0.01em;
    border-radius: var(--atp-radius-pill);
    background: var(--_bg);
    color: var(--_fg);
    white-space: nowrap;
}
.atp-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--_dot); flex: none; }

/* status-pill hues — palette tokens (light + dark), referenced by the .atp-pill--* rules */
:root {
    --atp-pill-slate-bg: #EEF1F5; --atp-pill-slate-fg: #47536A; --atp-pill-slate-dot: #64748B;
    --atp-pill-gray-bg: #EFF0F2; --atp-pill-gray-fg: #4B5563; --atp-pill-gray-dot: #6B7280;
    --atp-pill-amber-bg: #FBF0D9; --atp-pill-amber-fg: #8A5A00; --atp-pill-amber-dot: #D08700;
    --atp-pill-blue-bg: #E4EFFB; --atp-pill-blue-fg: #175487; --atp-pill-blue-dot: #2A78C2;
    --atp-pill-indigo-bg: #E9E9FC; --atp-pill-indigo-fg: #3B3B9A; --atp-pill-indigo-dot: #5B5BD6;
    --atp-pill-violet-bg: #F0E8FB; --atp-pill-violet-fg: #6428A8; --atp-pill-violet-dot: #8B46D6;
    --atp-pill-green-bg: #E4F5EA; --atp-pill-green-fg: #1B7A3D; --atp-pill-green-dot: #22A155;
    --atp-pill-teal-bg: #DDF3F1; --atp-pill-teal-fg: #10726C; --atp-pill-teal-dot: #17948C;
    --atp-pill-red-bg: #FBE7E7; --atp-pill-red-fg: #B32424; --atp-pill-red-dot: #DC3B3B;
}
[data-theme="dark"] {
    --atp-pill-slate-bg: rgba(100,116,139,0.20); --atp-pill-slate-fg: #A9B6CC; --atp-pill-slate-dot: #8595AE;
    --atp-pill-gray-bg: rgba(107,114,128,0.20); --atp-pill-gray-fg: #B0B6C0; --atp-pill-gray-dot: #8A909B;
    --atp-pill-amber-bg: rgba(208,135,0,0.18); --atp-pill-amber-fg: #F1C15A; --atp-pill-amber-dot: #E0A429;
    --atp-pill-blue-bg: rgba(42,120,194,0.20); --atp-pill-blue-fg: #7DB2E2; --atp-pill-blue-dot: #4C93D6;
    --atp-pill-indigo-bg: rgba(91,91,214,0.22); --atp-pill-indigo-fg: #A9A9F0; --atp-pill-indigo-dot: #7C7CE6;
    --atp-pill-violet-bg: rgba(139,70,214,0.22); --atp-pill-violet-fg: #C6A2EC; --atp-pill-violet-dot: #A97CE0;
    --atp-pill-green-bg: rgba(34,161,85,0.20); --atp-pill-green-fg: #5BD98A; --atp-pill-green-dot: #34C46E;
    --atp-pill-teal-bg: rgba(23,148,140,0.20); --atp-pill-teal-fg: #4FCFC5; --atp-pill-teal-dot: #23A79E;
    --atp-pill-red-bg: rgba(220,59,59,0.20); --atp-pill-red-fg: #F5908F; --atp-pill-red-dot: #E85D5D;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --atp-pill-slate-bg: rgba(100,116,139,0.20); --atp-pill-slate-fg: #A9B6CC; --atp-pill-slate-dot: #8595AE;
        --atp-pill-gray-bg: rgba(107,114,128,0.20); --atp-pill-gray-fg: #B0B6C0; --atp-pill-gray-dot: #8A909B;
        --atp-pill-amber-bg: rgba(208,135,0,0.18); --atp-pill-amber-fg: #F1C15A; --atp-pill-amber-dot: #E0A429;
        --atp-pill-blue-bg: rgba(42,120,194,0.20); --atp-pill-blue-fg: #7DB2E2; --atp-pill-blue-dot: #4C93D6;
        --atp-pill-indigo-bg: rgba(91,91,214,0.22); --atp-pill-indigo-fg: #A9A9F0; --atp-pill-indigo-dot: #7C7CE6;
        --atp-pill-violet-bg: rgba(139,70,214,0.22); --atp-pill-violet-fg: #C6A2EC; --atp-pill-violet-dot: #A97CE0;
        --atp-pill-green-bg: rgba(34,161,85,0.20); --atp-pill-green-fg: #5BD98A; --atp-pill-green-dot: #34C46E;
        --atp-pill-teal-bg: rgba(23,148,140,0.20); --atp-pill-teal-fg: #4FCFC5; --atp-pill-teal-dot: #23A79E;
        --atp-pill-red-bg: rgba(220,59,59,0.20); --atp-pill-red-fg: #F5908F; --atp-pill-red-dot: #E85D5D;
    }
}

.atp-pill--slate { --_bg: var(--atp-pill-slate-bg); --_fg: var(--atp-pill-slate-fg); --_dot: var(--atp-pill-slate-dot); }
.atp-pill--gray { --_bg: var(--atp-pill-gray-bg); --_fg: var(--atp-pill-gray-fg); --_dot: var(--atp-pill-gray-dot); }
.atp-pill--amber { --_bg: var(--atp-pill-amber-bg); --_fg: var(--atp-pill-amber-fg); --_dot: var(--atp-pill-amber-dot); }
.atp-pill--blue { --_bg: var(--atp-pill-blue-bg); --_fg: var(--atp-pill-blue-fg); --_dot: var(--atp-pill-blue-dot); }
.atp-pill--indigo { --_bg: var(--atp-pill-indigo-bg); --_fg: var(--atp-pill-indigo-fg); --_dot: var(--atp-pill-indigo-dot); }
.atp-pill--violet { --_bg: var(--atp-pill-violet-bg); --_fg: var(--atp-pill-violet-fg); --_dot: var(--atp-pill-violet-dot); }
.atp-pill--green { --_bg: var(--atp-pill-green-bg); --_fg: var(--atp-pill-green-fg); --_dot: var(--atp-pill-green-dot); }
.atp-pill--teal { --_bg: var(--atp-pill-teal-bg); --_fg: var(--atp-pill-teal-fg); --_dot: var(--atp-pill-teal-dot); }
.atp-pill--red { --_bg: var(--atp-pill-red-bg); --_fg: var(--atp-pill-red-fg); --_dot: var(--atp-pill-red-dot); }

/* ==========================================================================
   Form fields
   ========================================================================== */
.atp-field { display: flex; flex-direction: column; gap: var(--atp-space-1); }
.atp-field__label { font-size: var(--atp-text-sm); font-weight: var(--atp-weight-medium); color: var(--atp-text); }
.atp-field__req { color: var(--atp-danger); margin-left: 2px; }
.atp-field__hint { font-size: var(--atp-text-xs); color: var(--atp-text-subtle); }
.atp-field__error { font-size: var(--atp-text-xs); color: var(--atp-danger); }

.atp-input, .atp-select {
    width: 100%;
    height: 32px;
    padding: 0 var(--atp-space-3);
    font-family: inherit;
    font-size: var(--atp-text-md);
    color: var(--atp-text);
    background: var(--atp-surface);
    border: 1px solid var(--atp-border-strong);
    border-radius: var(--atp-radius-md);
    transition: border-color var(--atp-dur-fast) var(--atp-ease), box-shadow var(--atp-dur-fast) var(--atp-ease);
}
.atp-select { appearance: none; padding-right: var(--atp-space-8);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23838D9C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right var(--atp-space-3) center; }
.atp-input::placeholder { color: var(--atp-text-subtle); }
.atp-input:focus, .atp-select:focus {
    outline: none;
    border-color: var(--atp-primary);
    box-shadow: 0 0 0 3px var(--atp-focus);
}
.atp-input:disabled, .atp-select:disabled { background: var(--atp-surface-2); color: var(--atp-text-subtle); cursor: not-allowed; }
.atp-input--invalid, .atp-select--invalid { border-color: var(--atp-danger); }
.atp-input--invalid:focus, .atp-select--invalid:focus { box-shadow: 0 0 0 3px var(--atp-danger-soft); }

/* ==========================================================================
   Data table
   ========================================================================== */
.atp-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--atp-radius-lg); }
.atp-table { width: 100%; border-collapse: collapse; font-size: var(--atp-text-base); }
.atp-table th, .atp-table td {
    text-align: left;
    padding: var(--atp-space-2) var(--atp-space-4);
    border-bottom: 1px solid var(--atp-border);
    vertical-align: middle;
}
.atp-table thead th {
    position: sticky; top: 0;
    background: var(--atp-surface-2);
    color: var(--atp-text-muted);
    font-size: var(--atp-text-xs);
    font-weight: var(--atp-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    height: 36px;
    white-space: nowrap;
    z-index: 1;
}
.atp-table tbody tr { background: var(--atp-surface); transition: background var(--atp-dur-fast) var(--atp-ease); }
.atp-table tbody tr:hover { background: var(--atp-surface-2); }
.atp-table tbody tr:last-child td { border-bottom: none; }
.atp-table td.atp-num, .atp-table th.atp-num { text-align: right; font-variant-numeric: tabular-nums; }
.atp-table tbody tr.atp-tr--risk { background: var(--atp-danger-soft); box-shadow: inset 3px 0 0 var(--atp-danger); }
.atp-table tbody tr.atp-tr--risk:hover { background: color-mix(in srgb, var(--atp-danger-soft) 75%, var(--atp-surface-2)); }

.atp-th-sort {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; letter-spacing: inherit; text-transform: inherit;
    color: inherit; cursor: pointer;
}
.atp-th-sort:hover { color: var(--atp-text); }
.atp-th-sort__arrow { font-size: 9px; line-height: 1; opacity: 0.9; }
.atp-th-sort[aria-sort="none"] .atp-th-sort__arrow { opacity: 0; }

/* ==========================================================================
   Empty state
   ========================================================================== */
.atp-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--atp-space-3);
    padding: var(--atp-space-12) var(--atp-space-6);
    color: var(--atp-text-muted);
}
.atp-empty__icon {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: var(--atp-radius-lg);
    background: var(--atp-surface-2); color: var(--atp-text-subtle);
}
.atp-empty__title { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-text); }
.atp-empty__desc { font-size: var(--atp-text-sm); max-width: 42ch; }

/* ==========================================================================
   App shell
   ========================================================================== */
.atp-shell {
    display: grid;
    grid-template-columns: var(--atp-sidebar-w) 1fr;
    grid-template-rows: 100vh; grid-template-rows: 100dvh;
    min-height: 100vh; min-height: 100dvh;
    background: var(--atp-bg);
}
.atp-sidebar {
    grid-row: 1;
    display: flex; flex-direction: column;
    background: var(--atp-surface);
    border-right: 1px solid var(--atp-border);
    overflow-y: auto;
}
.atp-sidebar__brand {
    display: flex; align-items: center; gap: var(--atp-space-2);
    height: var(--atp-topbar-h); padding: 0 var(--atp-space-4);
    border-bottom: 1px solid var(--atp-border);
    font-weight: var(--atp-weight-semibold); color: var(--atp-heading);
}
.atp-sidebar__brand img { height: 34px; width: auto; display: block; }

/* ---- brand lockup (mark + wordmark) used in app + public bars ---- */
.atp-brand { display: inline-flex; align-items: center; gap: var(--atp-space-2); text-decoration: none; color: inherit; min-width: 0; }
.atp-brand__mark { height: 34px; width: auto; display: block; flex: none; }
.atp-brand__name {
    display: inline-flex; align-items: baseline; gap: 5px;
    font-size: 15px; font-weight: var(--atp-weight-semibold);
    letter-spacing: -0.005em; color: var(--atp-heading);
    line-height: 1; white-space: nowrap;
}
.atp-brand__name b { font-weight: var(--atp-weight-semibold); }
.atp-brand__name span { font-weight: var(--atp-weight-medium); color: var(--atp-text-muted); letter-spacing: 0; }
.atp-sidebar__nav { padding: var(--atp-space-3) var(--atp-space-2); display: flex; flex-direction: column; gap: 2px; }
.atp-sidebar__group-label {
    padding: var(--atp-space-3) var(--atp-space-3) var(--atp-space-1);
    font-size: var(--atp-text-xs); font-weight: var(--atp-weight-semibold);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--atp-text-subtle);
}
.atp-navlink {
    display: flex; align-items: center; gap: var(--atp-space-2);
    padding: var(--atp-space-2) var(--atp-space-3);
    font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium);
    color: var(--atp-text-muted); border-radius: var(--atp-radius-md);
    text-decoration: none; cursor: pointer;
    transition: background var(--atp-dur-fast) var(--atp-ease), color var(--atp-dur-fast) var(--atp-ease);
}
.atp-navlink:hover { background: var(--atp-surface-2); color: var(--atp-text); }
.atp-navlink.active { background: var(--atp-primary-soft); color: var(--atp-link); }
.atp-navlink__icon { display: inline-flex; width: 16px; height: 16px; flex: none; }
.atp-sidebar__foot { margin-top: auto; padding: var(--atp-space-3); border-top: 1px solid var(--atp-border); }

.atp-main { grid-column: 2; display: flex; flex-direction: column; min-width: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.atp-topbar {
    display: flex; align-items: center; gap: var(--atp-space-3);
    height: var(--atp-topbar-h); padding: 0 var(--atp-space-5);
    background: var(--atp-surface); border-bottom: 1px solid var(--atp-border);
    flex: none;
}
.atp-topbar__title { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-topbar__spacer { flex: 1; }
.atp-content { flex: 1; overflow-y: auto; padding: var(--atp-space-6); }
.atp-content__inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--atp-space-6); }

.atp-iconbtn {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; border-radius: var(--atp-radius-md);
    background: transparent; border: 1px solid transparent; color: var(--atp-text-muted);
    cursor: pointer; transition: background var(--atp-dur-fast) var(--atp-ease), color var(--atp-dur-fast) var(--atp-ease);
}
.atp-iconbtn:hover { background: var(--atp-surface-2); color: var(--atp-text); }
.atp-iconbtn:active { background: var(--atp-surface-3); }
.atp-iconbtn:focus-visible { box-shadow: 0 0 0 3px var(--atp-focus); color: var(--atp-text); }

/* mobile nav trigger + scrim — inert above the md breakpoint */
.atp-navtoggle { display: none; }
.atp-scrim { display: none; }

/* topbar identity chip collapses first on narrow screens (nav toggle + title keep priority).
   Scoped to .atp-topbar so it wins over the later unconditional .atp-user definition. */
@media (max-width: 560px) { .atp-topbar .atp-user { display: none; } }

@media (max-width: 860px) {
    /* Sidebar becomes an off-canvas drawer; main is the sole in-flow column. */
    .atp-shell { grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .atp-sidebar {
        position: fixed; inset: 0 auto 0 0;
        grid-row: auto; grid-column: 1;
        width: min(272px, 84vw); z-index: 70;
        border-right: 1px solid var(--atp-border);
        transform: translateX(-100%);
        transition: transform var(--atp-dur) var(--atp-ease);
    }
    .atp-shell--nav-open .atp-sidebar { transform: none; box-shadow: var(--atp-shadow-lg); }
    .atp-scrim {
        display: block; position: fixed; inset: 0; z-index: 65;
        background: var(--atp-overlay);
        opacity: 0; visibility: hidden;
        transition: opacity var(--atp-dur) var(--atp-ease), visibility var(--atp-dur) var(--atp-ease);
    }
    .atp-shell--nav-open .atp-scrim { opacity: 1; visibility: visible; }
    .atp-main { grid-column: 1; height: 100vh; height: 100dvh; }
    .atp-navtoggle { display: inline-grid; margin-left: calc(var(--atp-space-2) * -1); }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
    .atp-sidebar, .atp-scrim { transition: none; }
}

/* ==========================================================================
   Drawer (right-side detail)
   ========================================================================== */
.atp-drawer-overlay {
    position: fixed; inset: 0; background: var(--atp-overlay);
    display: flex; justify-content: flex-end; z-index: 60;
    animation: atp-fade var(--atp-dur) var(--atp-ease);
}
.atp-drawer {
    width: min(480px, 100vw); height: 100%;
    background: var(--atp-surface); border-left: 1px solid var(--atp-border);
    box-shadow: var(--atp-shadow-lg);
    display: flex; flex-direction: column;
    animation: atp-slide-in var(--atp-dur) var(--atp-ease);
}
.atp-drawer__header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-3);
    padding: var(--atp-space-4) var(--atp-space-5); border-bottom: 1px solid var(--atp-border);
}
.atp-drawer__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-drawer__body { padding: var(--atp-space-5); overflow-y: auto; flex: 1; }
.atp-drawer__footer { padding: var(--atp-space-4) var(--atp-space-5); border-top: 1px solid var(--atp-border); display: flex; gap: var(--atp-space-2); justify-content: flex-end; }

@keyframes atp-slide-in { from { transform: translateX(16px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes atp-fade { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Wizard (multi-step)
   ========================================================================== */
.atp-wizard { display: flex; flex-direction: column; gap: var(--atp-space-6); }
.atp-steps { display: flex; align-items: center; gap: var(--atp-space-2); flex-wrap: wrap; }
.atp-step { display: flex; align-items: center; gap: var(--atp-space-2); color: var(--atp-text-subtle); font-size: var(--atp-text-sm); font-weight: var(--atp-weight-medium); }
.atp-step__num {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--atp-surface-2); color: var(--atp-text-subtle);
    font-size: var(--atp-text-xs); font-weight: var(--atp-weight-semibold); border: 1px solid var(--atp-border);
}
.atp-step--active { color: var(--atp-text); }
.atp-step--active .atp-step__num { background: var(--atp-primary); color: var(--atp-primary-contrast); border-color: var(--atp-primary); }
.atp-step--done .atp-step__num { background: var(--atp-primary-soft); color: var(--atp-link); border-color: transparent; }
.atp-step__bar { flex: 1 1 16px; min-width: 16px; height: 1px; background: var(--atp-border-strong); }
.atp-wizard__actions { display: flex; justify-content: space-between; gap: var(--atp-space-3); }

/* ==========================================================================
   Toasts
   ========================================================================== */
.atp-toaster {
    position: fixed; bottom: var(--atp-space-6); right: var(--atp-space-6);
    display: flex; flex-direction: column; gap: var(--atp-space-2);
    z-index: 80; max-width: min(380px, calc(100vw - 32px));
}
.atp-toast {
    display: flex; align-items: flex-start; gap: var(--atp-space-3);
    padding: var(--atp-space-3) var(--atp-space-4);
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-left: 3px solid var(--atp-text-subtle);
    border-radius: var(--atp-radius-md); box-shadow: var(--atp-shadow-md);
    animation: atp-slide-in var(--atp-dur) var(--atp-ease);
}
.atp-toast--success { border-left-color: var(--atp-success); }
.atp-toast--warn { border-left-color: var(--atp-warn); }
.atp-toast--danger { border-left-color: var(--atp-danger); }
.atp-toast--info { border-left-color: var(--atp-primary); }
.atp-toast__body { flex: 1; min-width: 0; }
.atp-toast__title { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-text); }
.atp-toast__msg { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-toast__close { background: none; border: none; color: var(--atp-text-subtle); cursor: pointer; padding: 2px; line-height: 1; font-size: 15px; }
.atp-toast__close:hover { color: var(--atp-text); }

/* ==========================================================================
   Proof48 footer attribution
   ========================================================================== */
.atp-proof48 {
    font-size: var(--atp-text-xs);
    color: var(--atp-text-subtle);
    letter-spacing: 0.01em;
}
.atp-proof48 a {
    color: var(--atp-text-muted);
    font-weight: var(--atp-weight-semibold);
    text-decoration: none;
    border-bottom: 1px solid var(--atp-border-strong);
    transition: color var(--atp-dur-fast) var(--atp-ease), border-color var(--atp-dur-fast) var(--atp-ease);
}
.atp-proof48 a:hover { color: var(--atp-link); border-bottom-color: var(--atp-link); }

/* utilities */
.atp-row { display: flex; align-items: center; gap: var(--atp-space-3); }
.atp-col { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--atp-space-4); }
.atp-spacer { flex: 1; }

@media (prefers-reduced-motion: reduce) {
    .atp-drawer, .atp-drawer-overlay, .atp-toast { animation: none; }
    .atp-btn, .atp-navlink, .atp-input, .atp-select, .atp-iconbtn, .atp-table tbody tr { transition: none; }
}

/* ==========================================================================
   Ops console — page scaffolding (login, page headers, split, forms, detail)
   ========================================================================== */

/* page header row: title left, actions right */
.atp-page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--atp-space-4); flex-wrap: wrap;
}

/* two-column split: primary form/content + secondary rail; stacks on narrow */
.atp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--atp-space-6); align-items: start; }
@media (max-width: 980px) { .atp-split { grid-template-columns: 1fr; } }

/* paired fields on one row */
.atp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--atp-space-3); align-items: end; }
@media (max-width: 560px) { .atp-form-row { grid-template-columns: 1fr; } }

/* checkbox row */
.atp-check { display: inline-flex; align-items: center; gap: var(--atp-space-2); font-size: var(--atp-text-md); color: var(--atp-text); cursor: pointer; user-select: none; }
.atp-check input { width: 16px; height: 16px; accent-color: var(--atp-primary); }

/* definition list (job overview) */
.atp-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--atp-space-2) var(--atp-space-5); margin: 0; }
.atp-dl dt { color: var(--atp-text-muted); font-size: var(--atp-text-sm); }
.atp-dl dd { margin: 0; color: var(--atp-text); font-size: var(--atp-text-md); text-align: right; }

/* quote totals block */
.atp-totals { display: flex; flex-direction: column; gap: var(--atp-space-1); margin-left: auto; min-width: 200px; }
.atp-totals > div { display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-4); font-size: var(--atp-text-md); }
.atp-totals__grand { border-top: 1px solid var(--atp-border); margin-top: var(--atp-space-1); padding-top: var(--atp-space-2); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }

/* wizard headline price */
.atp-price { display: flex; align-items: baseline; gap: var(--atp-space-3); }
.atp-price__value { font-size: var(--atp-text-2xl); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }

/* ==========================================================================
   Login / auth — branded split (brand panel + form card), stacks under md
   ========================================================================== */
.atp-auth {
    min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
    padding: clamp(var(--atp-space-4), 4vw, var(--atp-space-10));
    background:
        radial-gradient(120% 90% at 50% -20%, var(--atp-primary-soft), transparent 60%),
        var(--atp-bg);
}
.atp-auth__shell {
    width: min(940px, 100%);
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-lg);
    overflow: hidden;
}

/* left: branded panel (azure -> navy) — always renders white text */
.atp-auth__panel {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; gap: var(--atp-space-8);
    padding: var(--atp-space-10) var(--atp-space-8);
    color: #fff;
    background:
        radial-gradient(130% 120% at 85% 8%, rgba(255, 255, 255, 0.16), transparent 46%),
        linear-gradient(158deg, var(--atp-azure) 0%, var(--atp-navy) 100%);
}
/* concentric orbit rings echoing the logo swoosh */
.atp-auth__panel::before,
.atp-auth__panel::after {
    content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
    border: 1.5px solid rgba(255, 255, 255, 0.16);
}
.atp-auth__panel::before { width: 320px; height: 320px; right: -90px; bottom: -110px; }
.atp-auth__panel::after  { width: 190px; height: 190px; right: -22px; bottom: -40px; border-color: rgba(255, 255, 255, 0.11); }
.atp-auth__panel > * { position: relative; z-index: 1; }

.atp-auth__brandline { display: flex; align-items: center; gap: var(--atp-space-3); }
.atp-auth__badge {
    display: grid; place-items: center; width: 46px; height: 46px; flex: none;
    background: #fff; border-radius: var(--atp-radius-md); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.atp-auth__badge img { width: 30px; height: auto; display: block; }
.atp-auth__wordmark { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-medium); letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.92); }
.atp-auth__wordmark b { font-weight: var(--atp-weight-semibold); color: #fff; }

.atp-auth__pitch { margin-top: auto; display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-auth__tagline { font-size: var(--atp-text-xs); font-weight: var(--atp-weight-semibold); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.80); }
.atp-auth__headline { margin: 0; font-size: var(--atp-text-2xl); font-weight: var(--atp-weight-semibold); line-height: var(--atp-leading-tight); letter-spacing: -0.015em; color: #fff; max-width: 20ch; }

.atp-auth__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-auth__trust li { display: flex; align-items: center; gap: var(--atp-space-2); font-size: var(--atp-text-sm); color: rgba(255, 255, 255, 0.86); }
.atp-auth__trust svg { flex: none; color: rgba(255, 255, 255, 0.9); }

/* right: form column */
.atp-auth__form {
    display: flex; flex-direction: column; justify-content: center; gap: var(--atp-space-5);
    padding: var(--atp-space-10) var(--atp-space-8);
}
/* Full-colour lockup above the sign-in form. The raster carries navy ink, so a
   white plate keeps the wordmark AA-legible on the dark form surface too. */
.atp-auth__logo {
    height: 52px; width: auto; display: block; align-self: flex-start;
    padding: var(--atp-space-2) var(--atp-space-3); box-sizing: content-box;
    background: #fff; border: 1px solid var(--atp-border); border-radius: var(--atp-radius-md);
}
.atp-auth__form-head { display: flex; flex-direction: column; gap: var(--atp-space-1); }
.atp-auth__sub { margin: 0; font-size: var(--atp-text-md); }
.atp-auth__error {
    font-size: var(--atp-text-sm); color: var(--atp-danger);
    background: var(--atp-danger-soft); border-radius: var(--atp-radius-md);
    padding: var(--atp-space-2) var(--atp-space-3);
}
.atp-danger { color: var(--atp-danger); }

/* stack under md: compact brand band on top, form below */
@media (max-width: 768px) {
    .atp-auth { padding: 0; place-items: stretch; }
    .atp-auth__shell {
        width: 100%; min-height: 100vh; min-height: 100dvh; border: none; border-radius: 0; box-shadow: none;
        grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start;
    }
    .atp-auth__panel {
        flex-direction: row; align-items: center; justify-content: space-between;
        gap: var(--atp-space-4); padding: var(--atp-space-6);
    }
    .atp-auth__pitch, .atp-auth__trust { display: none; }
    .atp-auth__panel::before { width: 200px; height: 200px; right: -70px; bottom: -90px; }
    .atp-auth__panel::after  { width: 120px; height: 120px; right: -18px; bottom: -35px; }
    .atp-auth__form { justify-content: flex-start; padding: var(--atp-space-8) var(--atp-space-6); }
    /* the collapsed brand band already carries the mark + wordmark here, so the
       full form logo would repeat the brand within one screen — hide it. */
    .atp-auth__logo { display: none; }
}

/* topbar user identity chip */
.atp-user { display: inline-flex; align-items: center; gap: var(--atp-space-2); font-size: var(--atp-text-sm); color: var(--atp-text-muted); }

/* market / language segmented control (topbar + public bars) */
.atp-langswitch {
    display: inline-flex; align-items: center; gap: 2px; flex: none;
    padding: 2px; background: var(--atp-surface-2);
    border: 1px solid var(--atp-border); border-radius: var(--atp-radius-md);
}
.atp-langswitch__opt {
    display: inline-grid; place-items: center; min-width: 30px; height: 24px;
    padding: 0 var(--atp-space-2); font: inherit; font-size: var(--atp-text-xs);
    font-weight: var(--atp-weight-semibold); letter-spacing: 0.04em;
    color: var(--atp-text-subtle); background: transparent; border: none;
    border-radius: var(--atp-radius-sm); cursor: pointer;
    transition: background var(--atp-dur-fast) var(--atp-ease), color var(--atp-dur-fast) var(--atp-ease);
}
.atp-langswitch__opt:hover { color: var(--atp-text); }
.atp-langswitch__opt--on { background: var(--atp-surface); color: var(--atp-heading); box-shadow: var(--atp-shadow-sm); }
.atp-langswitch__opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--atp-focus); color: var(--atp-text); }
@media (prefers-reduced-motion: reduce) { .atp-langswitch__opt { transition: none; } }

/* ==========================================================================
   Customer booking (/book) + public tracking (/track)
   ========================================================================== */
.atp-book, .atp-track { display: flex; flex-direction: column; gap: var(--atp-space-5); }
.atp-book__head { display: flex; flex-direction: column; gap: var(--atp-space-1); }
.atp-book__done { align-items: flex-start; text-align: left; gap: var(--atp-space-3); }
.atp-book__done-icon {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--atp-radius-pill);
    background: var(--atp-success-soft); color: var(--atp-success);
}

.atp-track__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--atp-space-5); align-items: start; }
@media (max-width: 860px) { .atp-track__grid { grid-template-columns: 1fr; } }
.atp-track__summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--atp-space-3); }
.atp-track__job { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-track__eta { display: flex; flex-direction: column; gap: var(--atp-space-1); padding-top: var(--atp-space-2); border-top: 1px solid var(--atp-border); }
.atp-track__eta p { margin: 0; color: var(--atp-text); }
.atp-track__map {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--atp-space-3);
    min-height: 220px; border-radius: var(--atp-radius-md); color: var(--atp-text-subtle);
    background:
        linear-gradient(var(--atp-border) 1px, transparent 1px) 0 0 / 100% 28px,
        linear-gradient(90deg, var(--atp-border) 1px, transparent 1px) 0 0 / 28px 100%,
        var(--atp-surface-2);
    text-align: center; padding: var(--atp-space-6);
}
.atp-track__mapframe {
    width: 100%; min-height: 260px; border: 0; border-radius: var(--atp-radius-md);
    background: var(--atp-surface-2); display: block;
}
.atp-track__mapmeta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-3);
    flex-wrap: wrap; font-size: var(--atp-text-sm);
}

/* ---- vertical stage timeline (tracking) ---- */
.atp-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.atp-timeline__item {
    position: relative; display: flex; align-items: center; gap: var(--atp-space-3);
    padding: var(--atp-space-2) 0 var(--atp-space-2) var(--atp-space-1); min-height: 34px; color: var(--atp-text-subtle);
}
.atp-timeline__item::before {
    content: ""; position: absolute; left: 6px; top: 24px; bottom: -10px; width: 2px; background: var(--atp-border-strong);
}
.atp-timeline__item:last-child::before { display: none; }
.atp-timeline__dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--atp-surface-3); border: 2px solid var(--atp-border-strong); z-index: 1; }
.atp-timeline__label { font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium); }
.atp-timeline__item--done { color: var(--atp-text); }
.atp-timeline__item--done .atp-timeline__dot { background: var(--atp-primary); border-color: var(--atp-primary); }
.atp-timeline__item--done::before { background: var(--atp-primary); }
.atp-timeline__item--current { color: var(--atp-heading); font-weight: var(--atp-weight-semibold); }
.atp-timeline__item--current .atp-timeline__dot { box-shadow: 0 0 0 4px var(--atp-primary-soft); }

/* ==========================================================================
   Driver app (offline-first shell)
   ========================================================================== */
.atp-driver { display: flex; flex-direction: column; gap: var(--atp-space-4); max-width: 640px; margin: 0 auto; width: 100%; }
.atp-driver__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--atp-space-3); }
.atp-driver__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-3); }
.atp-driver__back { align-self: flex-start; }

.atp-linkbtn {
    display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0;
    font: inherit; font-size: var(--atp-text-sm); color: var(--atp-link); cursor: pointer; text-decoration: none;
}
.atp-linkbtn:hover { text-decoration: underline; }

/* shift toggle */
.atp-switch { display: inline-flex; align-items: center; gap: var(--atp-space-2); cursor: pointer; user-select: none; font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.atp-switch__track { position: relative; width: 40px; height: 22px; border-radius: var(--atp-radius-pill); background: var(--atp-surface-3); border: 1px solid var(--atp-border-strong); transition: background var(--atp-dur) var(--atp-ease); flex: none; }
.atp-switch__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--atp-surface); box-shadow: var(--atp-shadow-sm); transition: transform var(--atp-dur) var(--atp-ease); }
.atp-switch input:checked + .atp-switch__track { background: var(--atp-primary); border-color: var(--atp-primary); }
.atp-switch input:checked + .atp-switch__track .atp-switch__thumb { transform: translateX(18px); }
.atp-switch input:focus-visible + .atp-switch__track { outline: 2px solid var(--atp-primary); outline-offset: 2px; }

/* offline / pending banner */
.atp-offline {
    display: flex; align-items: center; gap: var(--atp-space-2);
    padding: var(--atp-space-2) var(--atp-space-3); border-radius: var(--atp-radius-md);
    background: var(--atp-warn-soft); color: var(--atp-warn); font-size: var(--atp-text-sm); font-weight: var(--atp-weight-medium);
    border: 1px solid transparent;
}
.atp-offline--pending { background: var(--atp-primary-soft); color: var(--atp-link); }
.atp-offline__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.atp-offline__count { margin-left: var(--atp-space-2); font-variant-numeric: tabular-nums; }

/* job row (route list) */
.atp-stoplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-jobrow {
    display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-3); width: 100%;
    padding: var(--atp-space-4); background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm); cursor: pointer; text-align: left;
    transition: border-color var(--atp-dur-fast) var(--atp-ease), background var(--atp-dur-fast) var(--atp-ease);
}
.atp-jobrow:hover { border-color: var(--atp-border-strong); background: var(--atp-surface-2); }
.atp-jobrow__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atp-jobrow__num { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-jobrow__sub { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-jobrow__end { display: flex; align-items: center; gap: var(--atp-space-2); flex: none; }
.atp-jobrow__chevron { color: var(--atp-text-subtle); }

/* stop cards (job detail steps) */
.atp-steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-stopcard {
    display: flex; flex-direction: column; gap: var(--atp-space-3);
    padding: var(--atp-space-4); background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-left: 3px solid var(--atp-border-strong); border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
}
.atp-stopcard--active { border-left-color: var(--atp-primary); }
.atp-stopcard--done { border-left-color: var(--atp-success); opacity: 0.85; }
.atp-stopcard__head { display: flex; align-items: flex-start; gap: var(--atp-space-3); }
.atp-stopcard__seq { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--atp-surface-2); color: var(--atp-text-muted); font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); }
.atp-stopcard--active .atp-stopcard__seq { background: var(--atp-primary); color: var(--atp-primary-contrast); }
.atp-stopcard__addr { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.atp-stopcard__line1 { font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium); color: var(--atp-text); }
.atp-stopcard__note { font-size: var(--atp-text-sm); color: var(--atp-text-subtle); font-style: italic; }
.atp-stopcard__actions { display: flex; gap: var(--atp-space-2); flex-wrap: wrap; padding-left: calc(26px + var(--atp-space-3)); }

/* proof-of-delivery capture */
.atp-pod { display: flex; flex-direction: column; gap: var(--atp-space-3); padding: var(--atp-space-4); background: var(--atp-surface-2); border-radius: var(--atp-radius-md); }
.atp-pod__captures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--atp-space-3); }
@media (max-width: 480px) { .atp-pod__captures { grid-template-columns: 1fr; } }
.atp-capture {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--atp-space-2);
    min-height: 96px; padding: var(--atp-space-4); cursor: pointer; text-align: center;
    background: var(--atp-surface); color: var(--atp-text-muted); font-size: var(--atp-text-sm);
    border: 1.5px dashed var(--atp-border-strong); border-radius: var(--atp-radius-md);
    transition: border-color var(--atp-dur-fast) var(--atp-ease), color var(--atp-dur-fast) var(--atp-ease);
}
.atp-capture:hover { border-color: var(--atp-primary); color: var(--atp-text); }
.atp-capture--set { border-style: solid; border-color: var(--atp-primary); color: var(--atp-link); background: var(--atp-primary-soft); }

/* ---- customer public layout ---- */
.atp-public { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--atp-bg); }
.atp-public__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-3); height: var(--atp-topbar-h); padding: 0 var(--atp-space-5); background: var(--atp-surface); border-bottom: 1px solid var(--atp-border); }
.atp-public__brand { display: flex; align-items: center; gap: var(--atp-space-2); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); text-decoration: none; }
.atp-public__brand img { height: 34px; width: auto; display: block; }
.atp-public__brand:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 3px; border-radius: var(--atp-radius-sm); }
.atp-public__main { flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: var(--atp-space-8) var(--atp-space-5); }
.atp-public__foot { padding: var(--atp-space-5); border-top: 1px solid var(--atp-border); display: flex; justify-content: center; }

/* ==========================================================================
   App-shell loading (auth bootstrap) — calm centered spinner, no layout jump
   ========================================================================== */
.atp-shell-loading {
    min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: var(--atp-bg);
}
.atp-shell-loading::after {
    content: ""; width: 26px; height: 26px; border-radius: 50%;
    border: 2.5px solid var(--atp-border-strong); border-top-color: var(--atp-primary);
    animation: atp-spin 0.7s linear infinite;
}
@keyframes atp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .atp-shell-loading::after { animation-duration: 1.6s; } }

/* ==========================================================================
   Blazor error UI
   Hidden by default; the Blazor runtime sets `display:block` inline on a real
   unhandled error. This rule was missing from the host, which left the
   "An unhandled error has occurred. Reload" bar visible on every page.
   (Reconnect UI is handled separately by the <ReconnectModal> dialog.)
   ========================================================================== */
#blazor-error-ui {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    padding: var(--atp-space-3) var(--atp-space-10) var(--atp-space-3) var(--atp-space-5);
    font-family: var(--atp-font-sans); font-size: var(--atp-text-md);
    color: var(--atp-danger-contrast);
    background: var(--atp-danger);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
}
#blazor-error-ui .reload {
    color: inherit; font-weight: var(--atp-weight-semibold);
    text-decoration: underline; text-underline-offset: 2px; margin-left: var(--atp-space-2);
}
#blazor-error-ui .dismiss {
    cursor: pointer; position: absolute; right: var(--atp-space-4); top: 50%; transform: translateY(-50%);
    line-height: 1; opacity: 0.85;
}
#blazor-error-ui .dismiss:hover { opacity: 1; }

/* ==========================================================================
   Marketing landing (public "/") — built on the same tokens as the ops tool.
   Full-bleed sections; larger, editorial type; light + dark; WCAG 2.2 AA.
   ========================================================================== */
.atp-mkt {
    min-height: 100vh; min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--atp-bg);
    overflow-x: clip;              /* the page body must never scroll sideways */
}

/* keyboard skip link — off-screen until focused */
.atp-mkt__skip {
    position: absolute; left: 50%; top: var(--atp-space-2); transform: translate(-50%, -160%);
    z-index: 60; padding: var(--atp-space-2) var(--atp-space-4);
    background: var(--atp-primary); color: var(--atp-primary-contrast);
    border-radius: var(--atp-radius-md); font-weight: var(--atp-weight-medium);
    text-decoration: none; box-shadow: var(--atp-shadow-md);
    transition: transform var(--atp-dur) var(--atp-ease);
}
.atp-mkt__skip:focus-visible { transform: translate(-50%, 0); }

/* ops-console skip link — mirrors the marketing one, scoped to the app shell */
.atp-skip {
    position: absolute; left: var(--atp-space-4); top: var(--atp-space-2); transform: translateY(-160%);
    z-index: 90; padding: var(--atp-space-2) var(--atp-space-4);
    background: var(--atp-primary); color: var(--atp-primary-contrast);
    border-radius: var(--atp-radius-md); font-weight: var(--atp-weight-medium);
    text-decoration: none; box-shadow: var(--atp-shadow-md);
    transition: transform var(--atp-dur) var(--atp-ease);
}
.atp-skip:focus-visible { transform: translateY(0); }

/* --- sticky top bar --- */
.atp-mkt__bar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--atp-space-3) var(--atp-space-4); flex-wrap: wrap;
    min-height: var(--atp-topbar-h);
    padding: var(--atp-space-2) clamp(var(--atp-space-4), 4vw, var(--atp-space-10));
    background: color-mix(in srgb, var(--atp-surface) 88%, transparent);
    backdrop-filter: saturate(1.1) blur(10px);
    -webkit-backdrop-filter: saturate(1.1) blur(10px);
    border-bottom: 1px solid var(--atp-border);
}
.atp-mkt__brand { display: inline-flex; align-items: center; gap: var(--atp-space-2); text-decoration: none; color: var(--atp-heading); font-weight: var(--atp-weight-semibold); min-width: 0; }
.atp-mkt__brand:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 3px; border-radius: var(--atp-radius-sm); }
.atp-mkt__bar-actions { display: flex; align-items: center; gap: var(--atp-space-2) var(--atp-space-3); flex-wrap: wrap; justify-content: flex-end; }
.atp-mkt__track-cta { text-decoration: none; }
.atp-mkt__login {
    color: var(--atp-text-muted); text-decoration: none; font-size: var(--atp-text-md);
    font-weight: var(--atp-weight-medium); padding: var(--atp-space-1) var(--atp-space-2);
    border-radius: var(--atp-radius-sm); white-space: nowrap;
}
.atp-mkt__login:hover { color: var(--atp-text); text-decoration: underline; text-underline-offset: 3px; }
.atp-mkt__login:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }

.atp-mkt__main { flex: 1; width: 100%; }
.atp-mkt__foot { padding: var(--atp-space-6) var(--atp-space-5); border-top: 1px solid var(--atp-border); display: flex; justify-content: center; background: var(--atp-surface); }

/* --- shared section shell --- */
.atp-mkt-shell { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: clamp(var(--atp-space-5), 5vw, var(--atp-space-12)); }
.atp-mkt-section { padding-block: clamp(var(--atp-space-12), 8vw, 96px); }
.atp-mkt-section--alt { background: var(--atp-surface-2); border-block: 1px solid var(--atp-border); }
.atp-mkt-section__head { max-width: 56ch; margin: 0 auto clamp(var(--atp-space-8), 5vw, var(--atp-space-12)); text-align: center; display: flex; flex-direction: column; gap: var(--atp-space-3); }

.atp-mkt-eyebrow { font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--atp-primary); margin: 0; }
.atp-mkt-eyebrow--onbrand { color: rgba(255, 255, 255, 0.82); }
.atp-mkt-h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: var(--atp-weight-semibold); line-height: 1.12; letter-spacing: -0.02em; color: var(--atp-heading); margin: 0; }
.atp-mkt-lead { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }

/* --- on-brand (dark gradient) context: hero + final band --- */
.atp-mkt-onbrand {
    position: relative;
    background: linear-gradient(135deg, var(--atp-navy) 0%, var(--atp-azure-600) 52%, var(--atp-azure) 100%);
    color: #fff; isolation: isolate;
}
.atp-mkt-onbrand .atp-btn--primary {
    --_fg: var(--atp-navy); --_bd: #fff;
    background: #fff; box-shadow: var(--atp-shadow-md);
}
.atp-mkt-onbrand .atp-btn--primary:hover:not(:disabled) { --_bd: #eef2f7; background: #eef2f7; }
.atp-mkt-onbrand .atp-btn--primary:active:not(:disabled) { background: #e2e8f0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.18); }
.atp-mkt-onbrand .atp-btn--primary:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.55); }
.atp-mkt-onbrand .atp-btn--ghost {
    --_fg: #fff; --_bg: transparent; --_bd: rgba(255, 255, 255, 0.55); box-shadow: none;
}
.atp-mkt-onbrand .atp-btn--ghost:hover:not(:disabled) { --_bg: rgba(255, 255, 255, 0.14); --_bd: rgba(255, 255, 255, 0.8); }
.atp-mkt-onbrand .atp-btn--ghost:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.5); }

/* --- hero --- */
.atp-mkt-hero { position: relative; overflow: clip; padding-block: clamp(var(--atp-space-16), 12vw, 132px); }
.atp-mkt-hero__bg { position: absolute; inset: 0; z-index: -1; }
.atp-mkt-hero__bg svg { width: 100%; height: 100%; display: block; }
.atp-mkt-hero__inner { position: relative; width: 100%; max-width: 880px; margin: 0 auto; padding-inline: clamp(var(--atp-space-5), 5vw, var(--atp-space-12)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--atp-space-5); }
.atp-mkt-hero__title { font-size: clamp(2.1rem, 6vw, 3.5rem); font-weight: var(--atp-weight-semibold); line-height: 1.06; letter-spacing: -0.03em; color: #fff; margin: 0; max-width: 18ch; }
.atp-mkt-hero__sub { font-size: clamp(1.02rem, 1.9vw, 1.28rem); line-height: 1.55; color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 60ch; }
.atp-mkt-hero__cta { display: flex; flex-wrap: wrap; gap: var(--atp-space-3); justify-content: center; margin-top: var(--atp-space-2); }
.atp-mkt-hero__chips { list-style: none; margin: var(--atp-space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--atp-space-2); justify-content: center; }
.atp-mkt-hero__chips li {
    font-size: var(--atp-text-sm); font-weight: var(--atp-weight-medium); color: #fff;
    padding: var(--atp-space-1) var(--atp-space-3);
    background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--atp-radius-pill);
}

/* --- services cards --- */
.atp-mkt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--atp-space-5); }
.atp-mkt-card {
    display: flex; flex-direction: column; gap: var(--atp-space-3);
    padding: var(--atp-space-6);
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
    transition: transform var(--atp-dur) var(--atp-ease), border-color var(--atp-dur) var(--atp-ease), box-shadow var(--atp-dur) var(--atp-ease);
}
.atp-mkt-card:hover { transform: translateY(-3px); border-color: var(--atp-border-strong); box-shadow: var(--atp-shadow-md); }
.atp-mkt-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--atp-radius-md); background: var(--atp-primary-soft); color: var(--atp-primary); }
.atp-mkt-card__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-mkt-card__desc { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }

/* --- split (visibility / platform) --- */
.atp-mkt-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--atp-space-8), 5vw, var(--atp-space-16)); align-items: center; }
.atp-mkt-split__copy { display: flex; flex-direction: column; gap: var(--atp-space-4); }
.atp-mkt-split__copy .atp-mkt-eyebrow, .atp-mkt-split__copy .atp-mkt-h2, .atp-mkt-split__copy .atp-mkt-lead { text-align: left; }
.atp-mkt-featlist { list-style: none; margin: var(--atp-space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-mkt-featlist li { display: flex; align-items: flex-start; gap: var(--atp-space-3); font-size: var(--atp-text-md); color: var(--atp-text); line-height: var(--atp-leading-normal); }
.atp-mkt-featlist svg { flex: none; margin-top: 2px; color: var(--atp-primary); }
.atp-mkt-viz { border-radius: var(--atp-radius-lg); background: var(--atp-surface-2); border: 1px solid var(--atp-border); box-shadow: var(--atp-shadow-md); padding: var(--atp-space-4); }
.atp-mkt-viz svg { width: 100%; height: auto; display: block; }

/* --- coverage --- */
.atp-mkt-coverage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--atp-space-4); }
.atp-mkt-coverage__item {
    display: flex; align-items: center; gap: var(--atp-space-3);
    padding: var(--atp-space-4) var(--atp-space-5);
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
}
.atp-mkt-coverage__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--atp-text-subtle); }
.atp-mkt-coverage__dot--active { background: var(--atp-success); box-shadow: 0 0 0 4px var(--atp-success-soft); }
.atp-mkt-coverage__dot--soon { background: var(--atp-warn); box-shadow: 0 0 0 4px var(--atp-warn-soft); }
.atp-mkt-coverage__name { flex: 1; font-weight: var(--atp-weight-medium); color: var(--atp-text); }

/* --- why ATP --- */
.atp-mkt-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--atp-space-5); }
.atp-mkt-value { display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-mkt-value__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--atp-radius-md); background: var(--atp-primary-soft); color: var(--atp-primary); margin-bottom: var(--atp-space-1); }
.atp-mkt-value__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-mkt-value__desc { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }

/* --- final CTA band --- */
.atp-mkt-cta-band { padding-block: clamp(var(--atp-space-12), 8vw, 96px); }
.atp-mkt-cta-band__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--atp-space-4); }
.atp-mkt-cta-band__title { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: var(--atp-weight-semibold); line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin: 0; max-width: 20ch; }
.atp-mkt-cta-band__sub { font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.5; color: rgba(255, 255, 255, 0.88); margin: 0 0 var(--atp-space-2); max-width: 52ch; }

/* --- public track lookup (/track) --- */
.atp-track-lookup { width: 100%; max-width: 460px; margin: clamp(var(--atp-space-6), 6vw, var(--atp-space-16)) auto 0; }
.atp-track-lookup__head { display: flex; flex-direction: column; gap: var(--atp-space-2); text-align: center; align-items: center; margin-bottom: var(--atp-space-3); }
.atp-track-lookup__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--atp-radius-lg); background: var(--atp-primary-soft); color: var(--atp-primary); margin-bottom: var(--atp-space-1); }
.atp-track-lookup__hint { font-size: var(--atp-text-sm); line-height: var(--atp-leading-normal); text-align: center; margin: 0; }

/* --- responsive --- */
@media (max-width: 860px) {
    .atp-mkt-split { grid-template-columns: 1fr; }
    .atp-mkt-split__media { order: -1; }
}
@media (max-width: 560px) {
    .atp-mkt__brand .atp-brand__name { display: none; }
    .atp-mkt__bar-actions { gap: var(--atp-space-2); }
    .atp-mkt__track-cta span { display: none; }   /* keep the parcel icon, drop the label to save width */
    .atp-mkt__track-cta { padding-inline: var(--atp-space-2); }
}

@media (prefers-reduced-motion: reduce) {
    .atp-mkt__skip, .atp-mkt-card { transition: none; }
    .atp-mkt-card:hover { transform: none; }
}

/* =====================================================================
   MARKETING — NEW COMPONENTS (multi-page)
   Appended by the css-foundation agent. Reuses --atp-* tokens only so
   light + dark auto-adapt. Nothing above this line is modified.
   ===================================================================== */

/* --- anchor offset: keep #section targets clear of the sticky bar --- */
.atp-mkt-anchor { scroll-margin-top: calc(var(--atp-topbar-h) + var(--atp-space-4)); }

/* --- desktop inline nav (lives inside the sticky .atp-mkt__bar) --- */
.atp-mkt__nav { display: flex; align-items: center; gap: var(--atp-space-1); flex-wrap: nowrap; }
.atp-mkt__navlink {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: var(--atp-space-2) var(--atp-space-3);
    font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium);
    color: var(--atp-text-muted); text-decoration: none;
    border-radius: var(--atp-radius-sm);
    transition: color var(--atp-dur-fast) var(--atp-ease), background var(--atp-dur-fast) var(--atp-ease);
}
.atp-mkt__navlink:hover { color: var(--atp-text); background: var(--atp-surface-2); }
.atp-mkt__navlink:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }
.atp-mkt__navlink--active { color: var(--atp-primary); font-weight: var(--atp-weight-semibold); }
.atp-mkt__navlink--active:hover { color: var(--atp-primary); }

/* --- bar CTA ("Book a courier") — compact primary --- */
.atp-mkt__cta {
    display: inline-flex; align-items: center; gap: var(--atp-space-2); white-space: nowrap;
    padding: var(--atp-space-2) var(--atp-space-4);
    font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); line-height: 1;
    color: var(--atp-primary-contrast); background: var(--atp-primary);
    border: 1px solid var(--atp-primary); border-radius: var(--atp-radius-md);
    text-decoration: none; box-shadow: var(--atp-shadow-sm);
    transition: background var(--atp-dur-fast) var(--atp-ease), border-color var(--atp-dur-fast) var(--atp-ease);
}
.atp-mkt__cta:hover { background: var(--atp-primary-hover); border-color: var(--atp-primary-hover); }
.atp-mkt__cta:active { background: var(--atp-primary-active); border-color: var(--atp-primary-active); }
.atp-mkt__cta:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }

/* --- mobile hamburger button (hidden on desktop) --- */
.atp-mkt__menu-btn {
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    color: var(--atp-text); background: transparent;
    border: 1px solid var(--atp-border); border-radius: var(--atp-radius-md);
    cursor: pointer;
    transition: background var(--atp-dur-fast) var(--atp-ease), border-color var(--atp-dur-fast) var(--atp-ease);
}
.atp-mkt__menu-btn:hover { background: var(--atp-surface-2); border-color: var(--atp-border-strong); }
.atp-mkt__menu-btn:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }
.atp-mkt__menu-btn svg { display: block; width: 22px; height: 22px; }

/* --- mobile drawer: collapsed by default, no display:none jump --- */
.atp-mkt__drawer {
    display: flex; flex-direction: column;
    width: 100%; flex-basis: 100%; order: 99;
    max-height: 0; opacity: 0; overflow: hidden;
    visibility: hidden; pointer-events: none;
    transition: max-height var(--atp-dur) var(--atp-ease),
        opacity var(--atp-dur) var(--atp-ease),
        visibility var(--atp-dur) var(--atp-ease);
}
.atp-mkt__drawer--open {
    max-height: 80vh; opacity: 1;
    visibility: visible; pointer-events: auto;
    padding-top: var(--atp-space-2);
    margin-top: var(--atp-space-2);
    border-top: 1px solid var(--atp-border);
    overflow-y: auto;
}
.atp-mkt__drawer-link {
    display: flex; align-items: center;
    padding: var(--atp-space-3) var(--atp-space-2);
    font-size: var(--atp-text-lg); font-weight: var(--atp-weight-medium);
    color: var(--atp-text); text-decoration: none;
    border-radius: var(--atp-radius-sm);
    border-bottom: 1px solid var(--atp-border);
}
.atp-mkt__drawer-link:last-child { border-bottom: 0; }
.atp-mkt__drawer-link:hover { background: var(--atp-surface-2); color: var(--atp-primary); }
.atp-mkt__drawer-link:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }
.atp-mkt__drawer-link.atp-mkt__navlink--active { color: var(--atp-primary); font-weight: var(--atp-weight-semibold); }

/* --- subhero: compact page header, left-aligned, neutral surface --- */
.atp-mkt-subhero {
    background: var(--atp-surface-2);
    border-bottom: 1px solid var(--atp-border);
    padding-block: clamp(var(--atp-space-10), 7vw, var(--atp-space-16));
}
.atp-mkt-subhero__inner {
    width: 100%; max-width: 1120px; margin: 0 auto;
    padding-inline: clamp(var(--atp-space-5), 5vw, var(--atp-space-12));
    display: flex; flex-direction: column; gap: var(--atp-space-3);
    text-align: left;
}
.atp-mkt-subhero__title {
    font-size: clamp(1.9rem, 4.4vw, 2.85rem); font-weight: var(--atp-weight-semibold);
    line-height: 1.1; letter-spacing: -0.025em; color: var(--atp-heading); margin: 0;
    max-width: 20ch;
}
.atp-mkt-subhero__sub {
    font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: var(--atp-leading-normal);
    color: var(--atp-text-muted); margin: 0; max-width: 60ch;
}

/* --- steps: numbered, 1 -> 2 -> 4 columns, optional connector --- */
.atp-mkt-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--atp-space-6);
}
.atp-mkt-step {
    position: relative;
    display: flex; flex-direction: column; gap: var(--atp-space-2);
}
.atp-mkt-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold);
    color: var(--atp-primary-contrast); background: var(--atp-primary);
    border-radius: var(--atp-radius-pill);
    box-shadow: 0 0 0 4px var(--atp-primary-soft);
    margin-bottom: var(--atp-space-1);
}
.atp-mkt-step__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-mkt-step__desc { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }

/* --- feature grid: denser than cards, 1 -> 2 -> 3 columns --- */
.atp-mkt-features {
    display: grid; grid-template-columns: 1fr; gap: var(--atp-space-4);
}
.atp-mkt-feature {
    display: flex; flex-direction: column; gap: var(--atp-space-2);
    padding: var(--atp-space-5);
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
}
.atp-mkt-feature__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--atp-radius-md);
    background: var(--atp-primary-soft); color: var(--atp-primary);
    margin-bottom: var(--atp-space-1);
}
.atp-mkt-feature__title { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-mkt-feature__desc { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }

/* --- capabilities: TRUE facts styled as labels (not fabricated counters) --- */
.atp-mkt-caps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--atp-space-4);
}
.atp-mkt-cap {
    display: flex; flex-direction: column; gap: var(--atp-space-1);
    padding: var(--atp-space-5);
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
    text-align: left;
}
.atp-mkt-cap__k {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: var(--atp-weight-semibold);
    line-height: 1.15; letter-spacing: -0.01em; color: var(--atp-heading); margin: 0;
}
.atp-mkt-cap__v { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }

/* --- callout: tinted bordered panel (compliance note) --- */
.atp-mkt-callout {
    display: grid; grid-template-columns: auto 1fr; gap: var(--atp-space-2) var(--atp-space-4);
    align-items: start;
    padding: clamp(var(--atp-space-5), 4vw, var(--atp-space-8));
    background: var(--atp-primary-soft);
    border: 1px solid var(--atp-border);
    border-left: 3px solid var(--atp-primary);
    border-radius: var(--atp-radius-lg);
}
.atp-mkt-callout__icon {
    grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    color: var(--atp-primary); background: var(--atp-surface);
    border-radius: var(--atp-radius-md); box-shadow: var(--atp-shadow-sm);
}
.atp-mkt-callout__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; align-self: center; }
.atp-mkt-callout__desc { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text); margin: 0; }

/* --- map: Europe SVG wrapper + legend + pin helper --- */
.atp-mkt-map { display: flex; flex-direction: column; align-items: center; gap: var(--atp-space-5); }
.atp-mkt-map__svg { width: 100%; max-width: 640px; }
.atp-mkt-map__svg svg { width: 100%; height: auto; display: block; }
.atp-mkt-map__legend {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--atp-space-3) var(--atp-space-6);
}
.atp-mkt-map__legend li {
    display: inline-flex; align-items: center; gap: var(--atp-space-2);
    font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium); color: var(--atp-text);
}
.atp-mkt-map__pin { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--atp-text-subtle); }
.atp-mkt-map__pin--active { background: var(--atp-success); box-shadow: 0 0 0 4px var(--atp-success-soft); }
.atp-mkt-map__pin--soon { background: var(--atp-warn); box-shadow: 0 0 0 4px var(--atp-warn-soft); }

/* --- FAQ: native <details>/<summary> accordion --- */
.atp-mkt-faq { display: flex; flex-direction: column; gap: var(--atp-space-3); max-width: 780px; margin-inline: auto; }
.atp-mkt-faq__item {
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
    overflow: hidden;
}
.atp-mkt-faq__item[open] { border-color: var(--atp-border-strong); }
.atp-mkt-faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-4);
    padding: var(--atp-space-4) var(--atp-space-5);
    font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold);
    color: var(--atp-heading); cursor: pointer; list-style: none;
}
.atp-mkt-faq__q::-webkit-details-marker { display: none; }
.atp-mkt-faq__q::after {
    content: ""; flex: none; width: 12px; height: 12px; margin-left: auto;
    border-right: 2px solid var(--atp-text-subtle); border-bottom: 2px solid var(--atp-text-subtle);
    transform: rotate(45deg); transform-origin: center;
    transition: transform var(--atp-dur) var(--atp-ease);
}
.atp-mkt-faq__item[open] .atp-mkt-faq__q::after { transform: rotate(-135deg); }
.atp-mkt-faq__q:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: -2px; }
.atp-mkt-faq__q:hover { color: var(--atp-primary); }
.atp-mkt-faq__a {
    padding: 0 var(--atp-space-5) var(--atp-space-5);
    font-size: var(--atp-text-md); line-height: var(--atp-leading-normal);
    color: var(--atp-text-muted); margin: 0;
}
.atp-mkt-faq__a p { margin: 0 0 var(--atp-space-3); }
.atp-mkt-faq__a p:last-child { margin-bottom: 0; }

/* --- contact: responsive grid of contact cards --- */
.atp-mkt-contact {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--atp-space-5);
}
.atp-mkt-contact__card {
    display: flex; flex-direction: column; gap: var(--atp-space-2);
    padding: var(--atp-space-6);
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
}
.atp-mkt-contact__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--atp-radius-md);
    background: var(--atp-primary-soft); color: var(--atp-primary);
    margin-bottom: var(--atp-space-1);
}
.atp-mkt-contact__k { font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--atp-text-subtle); margin: 0; }
.atp-mkt-contact__v { font-size: var(--atp-text-lg); color: var(--atp-text); margin: 0; word-break: break-word; }
a.atp-mkt-contact__v { color: var(--atp-link); text-decoration: none; }
a.atp-mkt-contact__v:hover { text-decoration: underline; text-underline-offset: 3px; }
a.atp-mkt-contact__v:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; border-radius: var(--atp-radius-sm); }

/* --- facts: definition-style list (company / legal facts) --- */
.atp-mkt-facts {
    margin: 0; padding: 0; max-width: 640px;
    display: flex; flex-direction: column;
    border: 1px solid var(--atp-border); border-radius: var(--atp-radius-lg);
    background: var(--atp-surface); box-shadow: var(--atp-shadow-sm);
    overflow: hidden;
}
.atp-mkt-fact {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--atp-space-4);
    padding: var(--atp-space-4) var(--atp-space-5);
    border-bottom: 1px solid var(--atp-border);
}
.atp-mkt-fact:last-child { border-bottom: 0; }
.atp-mkt-fact__k { font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium); color: var(--atp-text-muted); margin: 0; }
.atp-mkt-fact__v { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; text-align: right; }

/* --- prose: readable long-form for legal pages --- */
.atp-mkt-prose { max-width: 68ch; color: var(--atp-text); font-size: var(--atp-text-lg); line-height: var(--atp-leading-normal); }
.atp-mkt-prose > :first-child { margin-top: 0; }
.atp-mkt-prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: var(--atp-weight-semibold); line-height: 1.2; letter-spacing: -0.015em; color: var(--atp-heading); margin: var(--atp-space-10) 0 var(--atp-space-3); }
.atp-mkt-prose h3 { font-size: var(--atp-text-xl); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: var(--atp-space-8) 0 var(--atp-space-2); }
.atp-mkt-prose p { margin: 0 0 var(--atp-space-4); }
.atp-mkt-prose ul, .atp-mkt-prose ol { margin: 0 0 var(--atp-space-4); padding-left: var(--atp-space-6); display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-mkt-prose li { line-height: var(--atp-leading-normal); }
.atp-mkt-prose a { color: var(--atp-link); text-decoration: underline; text-underline-offset: 2px; }
.atp-mkt-prose a:hover { text-decoration-thickness: 2px; }
.atp-mkt-prose a:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; border-radius: var(--atp-radius-sm); }
.atp-mkt-prose strong { font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }

/* --- rich footer --- */
.atp-mkt-footer { background: var(--atp-surface); border-top: 1px solid var(--atp-border); }
.atp-mkt-footer__inner {
    width: 100%; max-width: 1120px; margin: 0 auto;
    padding: clamp(var(--atp-space-10), 6vw, var(--atp-space-16)) clamp(var(--atp-space-5), 5vw, var(--atp-space-12)) var(--atp-space-8);
    display: grid; grid-template-columns: 1fr; gap: clamp(var(--atp-space-8), 5vw, var(--atp-space-12));
}
.atp-mkt-footer__brand { display: flex; flex-direction: column; gap: var(--atp-space-3); max-width: 34ch; }
.atp-mkt-footer__brand p { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }
.atp-mkt-footer__cols {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--atp-space-8) var(--atp-space-6);
}
.atp-mkt-footer__col { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-mkt-footer__title { font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--atp-text-subtle); margin: 0; }
.atp-mkt-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-mkt-footer__link { font-size: var(--atp-text-md); color: var(--atp-text-muted); text-decoration: none; }
.atp-mkt-footer__link:hover { color: var(--atp-text); text-decoration: underline; text-underline-offset: 3px; }
.atp-mkt-footer__link:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; border-radius: var(--atp-radius-sm); }
.atp-mkt-footer__bottom {
    max-width: 1120px; margin: 0 auto;
    padding: var(--atp-space-5) clamp(var(--atp-space-5), 5vw, var(--atp-space-12));
    border-top: 1px solid var(--atp-border);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--atp-space-3) var(--atp-space-5);
    font-size: var(--atp-text-sm); color: var(--atp-text-muted);
}

/* --- responsive scaling for the new components --- */
@media (min-width: 600px) {
    .atp-mkt-steps { grid-template-columns: repeat(2, 1fr); }
    .atp-mkt-features { grid-template-columns: repeat(2, 1fr); }
    .atp-mkt-footer__cols { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
    .atp-mkt-steps { grid-template-columns: repeat(4, 1fr); }
    .atp-mkt-features { grid-template-columns: repeat(3, 1fr); }
    .atp-mkt-footer__inner { grid-template-columns: minmax(240px, 1.2fr) 2fr; align-items: start; }
    /* connector line between step numbers on the 4-col row */
    .atp-mkt-step:not(:last-child) .atp-mkt-step__num::after {
        content: ""; position: absolute; top: 20px; left: 48px; right: calc(-1 * var(--atp-space-6));
        height: 2px; background: var(--atp-border); z-index: 0;
    }
    .atp-mkt-step__num { position: relative; z-index: 1; }
}

/* below 900px: hide inline nav + the BAR's CTA (the drawer keeps its own), expose hamburger */
@media (max-width: 899px) {
    .atp-mkt__nav { display: none; }
    .atp-mkt__bar-actions .atp-mkt__cta { display: none; }
    .atp-mkt__menu-btn { display: inline-flex; }
}
/* the drawer's book CTA stays a full-width primary button on mobile */
.atp-mkt__drawer .atp-mkt__cta { display: flex; justify-content: center; margin-top: var(--atp-space-2); }
/* on desktop the drawer is never shown */
@media (min-width: 900px) {
    .atp-mkt__drawer, .atp-mkt__menu-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .atp-mkt__navlink, .atp-mkt__cta, .atp-mkt__menu-btn, .atp-mkt__drawer,
    .atp-mkt-faq__q::after { transition: none; }
}

/* centred error pages (404 / 500) on the marketing shell */
.atp-mkt-error__inner {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
    padding-block: var(--atp-space-12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--atp-space-4);
}
.atp-mkt-error__code {
    font-family: var(--atp-font-mono);
    font-size: clamp(3.5rem, 12vw, 6rem);
    line-height: 1;
    font-weight: 700;
    color: var(--atp-navy);
    letter-spacing: -0.02em;
    margin: 0;
}
:root[data-theme="dark"] .atp-mkt-error__code { color: var(--atp-azure-300); }
.atp-mkt-error__inner .atp-mkt-hero__cta { margin-top: var(--atp-space-2); }

/* no-JS fallback banner (Blazor Server needs a live circuit) */
.atp-noscript {
    margin: 0;
    padding: var(--atp-space-4) var(--atp-space-6);
    background: var(--atp-navy);
    color: #fff;
    text-align: center;
    font: 500 var(--atp-text-base) / 1.5 var(--atp-font-sans);
}
.atp-noscript a { color: #fff; text-decoration: underline; }

/* inline callout / note box (ops console) — e.g. the freight e-Transport notice */
.atp-callout {
    display: flex;
    align-items: center;
    gap: var(--atp-space-3);
    margin-top: var(--atp-space-3);
    padding: var(--atp-space-3) var(--atp-space-4);
    background: var(--atp-surface-2);
    border: 1px solid var(--atp-border);
    border-inline-start: 3px solid var(--atp-azure);
    border-radius: var(--atp-radius-md);
    font-size: var(--atp-text-base);
    color: var(--atp-text);
}

/* --- reports (analytics / BI) --- */
.atp-reports-range { align-items: flex-end; gap: var(--atp-space-3); flex-wrap: wrap; }
.atp-reports-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--atp-space-4);
    margin-top: var(--atp-space-4);
    margin-bottom: var(--atp-space-4);
}
.atp-bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 30%) 1fr auto;
    align-items: center;
    gap: var(--atp-space-3);
    padding: var(--atp-space-1) 0;
}
.atp-bar-label { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-bar-track {
    display: block;
    height: 10px;
    background: var(--atp-surface-3);
    border-radius: var(--atp-radius-pill);
    overflow: hidden;
}
.atp-bar-fill {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--atp-primary);
    border-radius: var(--atp-radius-pill);
}
.atp-bar-fill--alt { background: var(--atp-success); }
.atp-bar-value { font-size: var(--atp-text-sm); color: var(--atp-text); text-align: end; min-width: 2ch; }