/* peak.css — the Peak ASO shell.
 *
 * Two jobs in one sheet, in this order:
 *
 *   1. TRANSLATION. Upstream's 6,500 lines of markup paint themselves dark
 *      with a very regular palette: the Tailwind `slate` ramp, a few white/N
 *      overlays, and one hard-coded hex (#1e293b) used for cards. Rewriting
 *      that markup would make every upstream sync a conflict, so this sheet
 *      re-points those same utilities at a light, glassy ramp instead.
 *
 *   2. COMPONENTS. The `.pro-*` system the fork's own templates are built on
 *      — shell, sidebar, cards, tables, meters, buttons, tabs.
 *
 * Everything is scoped under `body.pro-light`, which base.html adds when
 * aso_pro is installed. Loaded after tailwind.css; the two-class selectors
 * outrank Tailwind's single-class utilities without !important, except where
 * Tailwind's own variants (hover:, focus:) already carry a pseudo-class.
 *
 * The aesthetic: frosted glass over a pale gradient sky. Panels are
 * translucent so the background reads through them, but anywhere numbers are
 * meant to be *read* — table bodies, KPI values — the surface goes near-opaque
 * on purpose. Legibility outranks the effect.
 */

/* ===================================================================== */
/* Tokens                                                                */
/* ===================================================================== */

body.pro-light {
    /* Sky — sampled from the app mark: periwinkle, lilac, rose-lilac. */
    --p-sky-1: #A8C3EE;   /* top-left, cool */
    --p-sky-2: #CBBEEA;   /* centre, lilac */
    --p-sky-3: #EDBBD3;   /* bottom-right, warm */
    --p-sky-4: #BCDCE8;   /* bottom-left, faint mint */
    --p-sky-base: #DFE3F1;

    /* Glass. `--p-surface` is the panel; `--p-solid` is where digits live. */
    --p-surface: rgb(255 255 255 / 0.40);
    --p-surface-strong: rgb(255 255 255 / 0.62);
    --p-solid: #FFFFFF;
    --p-canvas: transparent;
    --p-sunken: rgb(255 255 255 / 0.42);   /* inputs, secondary buttons */
    --p-muted: rgb(25 22 48 / 0.07);       /* meter tracks, pressed states */
    --p-hover: rgb(255 255 255 / 0.55);

    /* Ink, darkest to lightest. */
    --p-ink: #14121F;
    --p-ink-2: #23203A;
    --p-ink-3: #3D3956;
    --p-ink-4: #524E6C;
    --p-ink-5: #6C6785;
    --p-ink-6: #9B96AF;

    /* Hairlines. On glass a border is mostly a light catch, not a rule. */
    --p-line: rgb(255 255 255 / 0.62);
    --p-line-soft: rgb(25 22 48 / 0.05);
    --p-line-strong: rgb(25 22 48 / 0.12);
    --p-ring: rgb(25 22 48 / 0.07);

    /* Accent — the deep facet of the peak. */
    --p-accent: #4B3AA8;
    --p-accent-ink: #3B2E7E;
    --p-accent-soft: rgb(75 58 168 / 0.10);
    --p-accent-wash: rgb(75 58 168 / 0.06);

    /* Semantics, tuned for a pale field rather than a dark one. */
    --p-good: #16794F;
    --p-good-wash: rgb(22 121 79 / 0.10);
    --p-warn: #A9660A;
    --p-warn-wash: rgb(169 102 10 / 0.10);
    --p-bad: #BC2C34;
    --p-bad-wash: rgb(188 44 52 / 0.09);
    --p-info: #2255BC;
    --p-info-wash: rgb(34 85 188 / 0.09);

    /* Elevation. Three stacked shadows: contact, lift, and ambient. */
    --p-lip: inset 0 1px 0 rgb(255 255 255 / 0.85),
             inset 0 -1px 0 rgb(20 18 31 / 0.04);

    --p-shadow-sm: 0 1px 2px rgb(20 18 31 / 0.04), 0 2px 6px -2px rgb(20 18 31 / 0.06);
    --p-shadow: 0 1px 2px rgb(20 18 31 / 0.04),
                0 8px 20px -8px rgb(20 18 31 / 0.10),
                0 24px 48px -28px rgb(20 18 31 / 0.18);
    --p-shadow-lg: 0 2px 4px rgb(20 18 31 / 0.05),
                   0 16px 32px -12px rgb(20 18 31 / 0.14),
                   0 48px 80px -40px rgb(20 18 31 / 0.28);

    --p-blur: saturate(190%) blur(30px);
    --p-r-panel: 22px;
    --p-r-card: 16px;
    --p-r-inner: 11px;

    --p-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system,
              "Segoe UI", Roboto, sans-serif;
    --p-display: "Gabarito", "Hanken Grotesk", ui-sans-serif, system-ui,
                 -apple-system, "Segoe UI", sans-serif;
    --p-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ===================================================================== */
/* The sky                                                               */
/* ===================================================================== */

body.pro-light {
    background: var(--p-sky-base);
    color: var(--p-ink-2);
    font-family: var(--p-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Four soft lights over a flat base. Fixed, so the gradient stays put while
 * a long table scrolls past it — a background that scrolls reads as a very
 * tall image and gives the whole page a seam. */
body.pro-light::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(85% 65% at 8% 0%, var(--p-sky-1) 0%, transparent 62%),
        radial-gradient(70% 60% at 96% 8%, var(--p-sky-2) 0%, transparent 60%),
        radial-gradient(90% 75% at 88% 100%, var(--p-sky-3) 0%, transparent 66%),
        radial-gradient(70% 60% at 0% 96%, var(--p-sky-4) 0%, transparent 60%),
        var(--p-sky-base);
}

/* Grain. Without it a four-stop gradient bands visibly on a wide monitor;
 * the noise is what makes it read as paper rather than as a JPEG artefact. */
body.pro-light::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

body.pro-light h1,
body.pro-light h2,
body.pro-light h3,
body.pro-light .pro-kpi__value,
body.pro-light .pro-display {
    font-family: var(--p-display);
    letter-spacing: -0.015em;
}

/* ===================================================================== */
/* Translation layer — upstream's dark utilities                         */
/* ===================================================================== */

/* `bg-slate-900` wore two hats upstream: the page itself, and the small dark
 * chips it floats above the page — tooltips, code blocks, the download-range
 * popovers. The page no longer needs it (the sky is the background now), and
 * making it transparent left every tooltip as unreadable text hanging in mid
 * air. So the darkest step becomes a raised WHITE popover instead: the text
 * inside it is already inverted to dark ink by the rules further down, and a
 * white chip with a real shadow is exactly what reads on a pale field. */
body.pro-light .bg-slate-900 {
    background-color: var(--p-solid);
    border-radius: var(--p-r-inner);
    box-shadow: var(--p-shadow-lg);
}

/* The washed-out variants are inset panels inside a card, not chips. */
body.pro-light .bg-slate-900\/60,
body.pro-light .bg-slate-900\/40,
body.pro-light .bg-slate-900\/20 { background-color: rgb(25 22 48 / 0.035); }

/* Upstream's card colour becomes a glass panel. */
body.pro-light .bg-\[\#1e293b\],
body.pro-light .bg-slate-800,
body.pro-light .bg-slate-800\/80,
body.pro-light .bg-slate-800\/90,
body.pro-light .bg-slate-800\/50 {
    background-color: var(--p-surface);
    -webkit-backdrop-filter: var(--p-blur);
    backdrop-filter: var(--p-blur);
}

body.pro-light .bg-\[\#1e293b\],
body.pro-light .bg-slate-800 {
    box-shadow: var(--p-shadow-sm), inset 0 1px 0 rgb(255 255 255 / 0.6);
    border-radius: var(--p-r-card);
}

body.pro-light .bg-slate-700,
body.pro-light .bg-slate-700\/60,
body.pro-light .bg-slate-700\/50,
body.pro-light .bg-slate-700\/40 { background-color: var(--p-sunken); }

body.pro-light .bg-slate-600,
body.pro-light .bg-slate-500,
body.pro-light .bg-slate-500\/20,
body.pro-light .bg-slate-500\/10,
body.pro-light .bg-slate-400\/20 { background-color: var(--p-muted); }

/* Text — the dark ramp runs bright-to-dim, so it inverts wholesale. */
body.pro-light .text-white { color: var(--p-ink); }
body.pro-light .text-slate-200 { color: var(--p-ink-2); }
body.pro-light .text-slate-300 { color: var(--p-ink-3); }
body.pro-light .text-slate-400 { color: var(--p-ink-4); }
body.pro-light .text-slate-500,
body.pro-light .text-slate-500\/70 { color: var(--p-ink-5); }
body.pro-light .text-slate-600 { color: var(--p-ink-6); }

body.pro-light .placeholder-slate-500::placeholder,
body.pro-light .placeholder-slate-400::placeholder { color: var(--p-ink-6); }

body.pro-light .border-white\/5,
body.pro-light .divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-color: var(--p-line-soft); }
body.pro-light .border-white\/10 { border-color: var(--p-line-soft); }
body.pro-light .border-white\/20,
body.pro-light .border-slate-500,
body.pro-light .border-slate-500\/20 { border-color: var(--p-line-strong); }

/* Interaction states carry a pseudo-class, so they need the weight. */
body.pro-light .hover\:bg-white\/5:hover,
body.pro-light .hover\:bg-white\/10:hover,
body.pro-light .hover\:bg-slate-700:hover,
body.pro-light .hover\:bg-slate-700\/60:hover,
body.pro-light .hover\:bg-slate-800:hover,
body.pro-light .hover\:bg-slate-900\/60:hover { background-color: var(--p-hover) !important; }

body.pro-light .hover\:bg-slate-600:hover,
body.pro-light .hover\:bg-slate-500:hover,
body.pro-light .hover\:bg-white:hover { background-color: var(--p-muted) !important; }

body.pro-light .hover\:text-white:hover { color: var(--p-ink) !important; }
body.pro-light .hover\:text-slate-200:hover { color: var(--p-ink-2) !important; }
body.pro-light .hover\:text-slate-300:hover { color: var(--p-ink-3) !important; }
body.pro-light .hover\:border-white\/20:hover { border-color: var(--p-line-strong) !important; }

/* The -300/-400 tints were chosen to glow on a dark field; on a pale one they
 * fall under 3:1. Each drops down the ramp to stay readable. */
body.pro-light .text-purple-300,
body.pro-light .text-purple-100,
body.pro-light .text-purple-200 { color: var(--p-accent-ink); }
body.pro-light .text-purple-400 { color: var(--p-accent); }
body.pro-light .text-emerald-300,
body.pro-light .text-green-300 { color: var(--p-good); }
body.pro-light .text-emerald-400,
body.pro-light .text-green-400 { color: var(--p-good); }
body.pro-light .text-red-300,
body.pro-light .text-red-400 { color: var(--p-bad); }
body.pro-light .text-orange-400,
body.pro-light .text-amber-200,
body.pro-light .text-amber-300,
body.pro-light .text-amber-400,
body.pro-light .text-yellow-400 { color: var(--p-warn); }
body.pro-light .text-blue-300,
body.pro-light .text-blue-400 { color: var(--p-info); }

body.pro-light .bg-purple-600\/20,
body.pro-light .bg-purple-500\/10,
body.pro-light .bg-purple-900\/30 { background-color: var(--p-accent-soft); }
body.pro-light .bg-emerald-500\/10,
body.pro-light .bg-emerald-500\/20,
body.pro-light .bg-emerald-900\/30 { background-color: var(--p-good-wash); }
body.pro-light .bg-red-900\/30,
body.pro-light .bg-red-500\/10 { background-color: var(--p-bad-wash); }
body.pro-light .bg-amber-900\/30,
body.pro-light .bg-amber-900\/40,
body.pro-light .bg-yellow-900\/30 { background-color: var(--p-warn-wash); }
body.pro-light .bg-blue-900\/30 { background-color: var(--p-info-wash); }

body.pro-light .border-purple-500\/20,
body.pro-light .border-purple-500\/30 { border-color: rgb(75 58 168 / 0.22); }
body.pro-light .border-emerald-500\/20,
body.pro-light .border-emerald-500\/30 { border-color: rgb(22 121 79 / 0.22); }
body.pro-light .border-red-500\/30 { border-color: rgb(188 44 52 / 0.22); }
body.pro-light .border-amber-500\/30 { border-color: rgb(169 102 10 / 0.22); }
body.pro-light .border-blue-500\/30 { border-color: rgb(34 85 188 / 0.22); }

/* ------------------------------------------------------------------- */
/* The rest of the ramp, by semantic family                            */
/* ------------------------------------------------------------------- */
/* The rules above cover the tints upstream used most. The audit that
 * produced this block found another forty in the templates — text-sky-300,
 * text-yellow-300, text-amber-100 — each of which was picked to glow on a
 * dark field and lands under 2:1 on a pale one. One of them, the
 * "High Competition" insight badge, was literally unreadable.
 *
 * Substring matching rather than a list of forty selectors: it also covers
 * the tint an upstream sync introduces tomorrow, which a hand-kept list
 * would only cover once somebody noticed the badge had gone invisible.
 * The cost is that a `hover:text-*` no longer changes hue — an affordance
 * worth trading for text that can be read at rest.
 */

body.pro-light [class*="text-green-"],
body.pro-light [class*="text-emerald-"],
body.pro-light [class*="text-lime-"],
body.pro-light [class*="text-teal-"] { color: var(--p-good); }

body.pro-light [class*="text-red-"],
body.pro-light [class*="text-rose-"],
body.pro-light [class*="text-pink-"],
body.pro-light [class*="text-fuchsia-"] { color: var(--p-bad); }

body.pro-light [class*="text-amber-"],
body.pro-light [class*="text-yellow-"],
body.pro-light [class*="text-orange-"] { color: var(--p-warn); }

body.pro-light [class*="text-blue-"],
body.pro-light [class*="text-sky-"],
body.pro-light [class*="text-cyan-"],
body.pro-light [class*="text-indigo-"] { color: var(--p-info); }

body.pro-light [class*="text-purple-"],
body.pro-light [class*="text-violet-"] { color: var(--p-accent); }

/* Dark washes — `bg-<hue>-900/20` and friends — become the pale tint of the
 * same semantic. Matched with the slash included so a solid fill below is
 * never caught by these. */
body.pro-light [class*="bg-green-900/"], body.pro-light [class*="bg-green-800/"],
body.pro-light [class*="bg-emerald-900/"], body.pro-light [class*="bg-lime-900/"],
body.pro-light [class*="bg-teal-900/"], body.pro-light [class*="bg-green-500/"],
body.pro-light [class*="bg-emerald-500/"] { background-color: var(--p-good-wash); }

body.pro-light [class*="bg-red-900/"], body.pro-light [class*="bg-red-800/"],
body.pro-light [class*="bg-rose-900/"], body.pro-light [class*="bg-pink-900/"],
body.pro-light [class*="bg-fuchsia-900/"], body.pro-light [class*="bg-red-500/"] { background-color: var(--p-bad-wash); }

body.pro-light [class*="bg-amber-900/"], body.pro-light [class*="bg-yellow-900/"],
body.pro-light [class*="bg-orange-900/"], body.pro-light [class*="bg-amber-500/"],
body.pro-light [class*="bg-yellow-500/"] { background-color: var(--p-warn-wash); }

body.pro-light [class*="bg-blue-900/"], body.pro-light [class*="bg-sky-900/"],
body.pro-light [class*="bg-cyan-900/"], body.pro-light [class*="bg-indigo-900/"],
body.pro-light [class*="bg-blue-500/"], body.pro-light [class*="bg-sky-500/"] { background-color: var(--p-info-wash); }

body.pro-light [class*="bg-purple-900/"], body.pro-light [class*="bg-violet-900/"],
body.pro-light [class*="bg-purple-500/"], body.pro-light [class*="bg-purple-600/"] { background-color: var(--p-accent-soft); }

/* Tinted borders on those washes. */
body.pro-light [class*="border-green-500/"], body.pro-light [class*="border-emerald-500/"] { border-color: rgb(22 121 79 / 0.22); }
body.pro-light [class*="border-red-500/"], body.pro-light [class*="border-rose-500/"] { border-color: rgb(188 44 52 / 0.22); }
body.pro-light [class*="border-amber-500/"], body.pro-light [class*="border-yellow-500/"],
body.pro-light [class*="border-orange-500/"] { border-color: rgb(169 102 10 / 0.22); }
body.pro-light [class*="border-blue-500/"], body.pro-light [class*="border-sky-500/"] { border-color: rgb(34 85 188 / 0.22); }
body.pro-light [class*="border-purple-500/"], body.pro-light [class*="border-violet-500/"] { border-color: rgb(75 58 168 / 0.22); }

/* Solid fills. These carry white text, so they keep their saturation and
 * only move to the palette's own hue. */
body.pro-light .bg-green-500, body.pro-light .bg-green-600, body.pro-light .bg-emerald-600,
body.pro-light .hover\:bg-green-500:hover, body.pro-light .hover\:bg-green-600:hover { background-color: var(--p-good); }
body.pro-light .bg-red-500, body.pro-light .bg-red-600, body.pro-light .bg-red-700,
body.pro-light .hover\:bg-red-500:hover, body.pro-light .hover\:bg-red-600:hover { background-color: var(--p-bad); }
body.pro-light .bg-amber-500, body.pro-light .bg-yellow-500, body.pro-light .bg-orange-500 { background-color: var(--p-warn); }
body.pro-light .bg-blue-500, body.pro-light .bg-blue-600, body.pro-light .bg-sky-500,
body.pro-light .bg-sky-600, body.pro-light .hover\:bg-sky-500:hover { background-color: var(--p-info); }
body.pro-light .bg-purple-500, body.pro-light .bg-purple-700, body.pro-light .bg-violet-600,
body.pro-light .hover\:bg-purple-600:hover, body.pro-light .hover\:bg-purple-700:hover { background-color: var(--p-accent-ink); }

/* A filled badge or button keeps white text. The ramp inversion above turns
 * `.text-white` near-black, which on a saturated fill reads as a printing
 * error — and upstream writes `bg-purple-600 text-white` on every primary
 * button it has. */
body.pro-light .bg-purple-500.text-white,
body.pro-light .bg-purple-600.text-white,
body.pro-light .bg-purple-700.text-white,
body.pro-light .bg-violet-600.text-white,
body.pro-light .bg-green-500.text-white,
body.pro-light .bg-green-600.text-white,
body.pro-light .bg-emerald-600.text-white,
body.pro-light .bg-red-500.text-white,
body.pro-light .bg-red-600.text-white,
body.pro-light .bg-red-700.text-white,
body.pro-light .bg-amber-500.text-white,
body.pro-light .bg-yellow-500.text-white,
body.pro-light .bg-orange-500.text-white,
body.pro-light .bg-blue-500.text-white,
body.pro-light .bg-blue-600.text-white,
body.pro-light .bg-sky-500.text-white,
body.pro-light .bg-sky-600.text-white { color: #FFFFFF; }

/* Solid-fill borders that used to trace a dark badge. */
body.pro-light .border-green-500, body.pro-light .border-emerald-500 { border-color: rgb(22 121 79 / 0.3); }
body.pro-light .border-yellow-500, body.pro-light .border-amber-500, body.pro-light .border-orange-500 { border-color: rgb(169 102 10 / 0.3); }
body.pro-light .border-sky-500, body.pro-light .border-blue-500 { border-color: rgb(34 85 188 / 0.3); }
body.pro-light .border-slate-600 { border-color: var(--p-line-strong); }

/* Focus rings and the odd gradient upstream paints behind a hero panel. */
body.pro-light .focus\:ring-purple-500:focus { --tw-ring-color: var(--p-accent); }
body.pro-light .focus\:border-sky-500:focus { border-color: var(--p-info); }
body.pro-light [class*="from-purple-900"] { --tw-gradient-from: var(--p-accent-soft) var(--tw-gradient-from-position); }
body.pro-light [class*="to-slate-800"] { --tw-gradient-to: rgb(255 255 255 / 0.5) var(--tw-gradient-to-position); }

/* Upstream's filled purple buttons keep their colour; only the hue moves. */
body.pro-light .bg-purple-600 { background-color: var(--p-accent); }
body.pro-light .hover\:bg-purple-500:hover { background-color: var(--p-accent-ink) !important; }

/* Form controls: upstream styles inputs with the slate ramp, which the rules
 * above turn nearly invisible on glass. Give them a real edge back. */
body.pro-light input[type="text"],
body.pro-light input[type="search"],
body.pro-light input[type="password"],
body.pro-light input[type="number"],
body.pro-light input[type="email"],
body.pro-light textarea,
body.pro-light select {
    border-radius: var(--p-r-inner);
    border: 1px solid var(--p-line-strong);
    background-color: var(--p-surface-strong);
    color: var(--p-ink);
    font-family: inherit;
}

body.pro-light input:focus-visible,
body.pro-light textarea:focus-visible,
body.pro-light select:focus-visible,
body.pro-light button:focus-visible,
body.pro-light a:focus-visible {
    outline: 2px solid var(--p-accent);
    outline-offset: 2px;
}

/* ===================================================================== */
/* Shell                                                                 */
/* ===================================================================== */

.pro-shell {
    display: flex;
    flex: 1;
    min-height: 0;
    align-items: stretch;
    gap: 0;
    padding: 16px 22px 16px 18px;
}

.pro-main {
    flex: 1;
    min-width: 0;
    padding: 0 0 0 18px;
}

/* --- Sidebar ---------------------------------------------------------- */

/* The rail sits directly on the sky — no panel of its own. A card around the
 * navigation competes with the cards holding the data, and the data is what
 * the eye should land on. Only the active item gets a surface. */
.pro-sidebar {
    width: 232px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: calc(100vh - 32px);
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* The nav scrolls; the account block below it does not, so it stays pinned to
 * the bottom-left corner however long the list gets. */
.pro-sidebar__scroll { overflow-y: auto; flex: 1; min-height: 0; }

.pro-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px 11px;
    text-decoration: none;
}

.pro-brand__mark {
    width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
    box-shadow: 0 1px 3px rgb(20 18 31 / 0.22);
}

.pro-brand__name {
    font-family: var(--p-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--p-ink);
}

/* The app switcher. Everything below it is scoped to the chosen app, so it
 * sits at the top and looks like a control, not a heading. */
.pro-appswitch {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 10px 6px;
    padding: 8px 10px;
    border-radius: var(--p-r-card);
    background: var(--p-surface);
    -webkit-backdrop-filter: var(--p-blur);
    backdrop-filter: var(--p-blur);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow-sm), var(--p-lip);
    text-decoration: none;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.pro-appswitch:hover { box-shadow: var(--p-shadow); transform: translateY(-1px); }
.pro-appswitch img { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; }

/* The switcher's menu floats over the nav. It can, because the <details>
 * lives OUTSIDE .pro-sidebar__scroll — inside it, overflow-y would clip the
 * popover, which is why the first version pushed the links down instead. */
summary.pro-appswitch { list-style: none; cursor: pointer; }
summary.pro-appswitch::-webkit-details-marker { display: none; }
.pro-appswitch-menu { position: relative; }
.pro-appswitch-menu[open] summary.pro-appswitch { box-shadow: var(--p-shadow); }

.pro-appswitch-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 10px;
    right: 10px;
    z-index: 40;
    padding: 4px;
    border-radius: var(--p-r-card);
    /* Near-opaque: this floats over nav text, and legibility beats the glass. */
    background: rgb(255 255 255 / 0.94);
    -webkit-backdrop-filter: var(--p-blur);
    backdrop-filter: var(--p-blur);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow);
}

.pro-appswitch-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--p-r-inner);
    font-size: 12.5px;
    color: var(--p-ink-3);
    text-decoration: none;
}

.pro-appswitch-item:hover { background: var(--p-hover); color: var(--p-ink); }
.pro-appswitch-item img { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; }
.pro-appswitch-item--active { font-weight: 600; color: var(--p-ink); background: var(--p-solid); }
.pro-appswitch-item--manage { color: var(--p-ink-6); border-top: 1px solid var(--p-line); margin-top: 2px; }
.pro-appswitch-item--manage:hover { color: var(--p-ink); }
.pro-appswitch-item--manage svg { width: 22px; flex-shrink: 0; }

.pro-sidebar__section {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--p-ink-6);
    padding: 12px 20px 4px;
}

.pro-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 10px;
    padding: 7px 11px;
    border-radius: var(--p-r-inner);
    font-size: 13.5px;
    color: var(--p-ink-3);
    text-decoration: none;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.pro-nav-link:hover { background: var(--p-hover); color: var(--p-ink); }

.pro-nav-link--active {
    color: var(--p-ink);
    font-weight: 600;
    background: var(--p-solid);
    box-shadow: var(--p-shadow-sm), inset 0 1px 0 rgb(255 255 255 / 0.9);
}

/* The accent lives on a marker rather than the whole pill: on glass a filled
 * accent block is loud, and the marker still says "you are here". */
.pro-nav-link--active::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    width: 3px;
    height: 15px;
    margin-top: -7.5px;
    border-radius: 2px;
    background: var(--p-accent);
}

.pro-nav-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.55; }
.pro-nav-link--active svg { opacity: 1; color: var(--p-accent); }

.pro-nav-link__badge {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--p-warn-wash);
    color: var(--p-warn);
}

/* Signed-in identity + the way out, pinned to the bottom of the rail. */
.pro-user {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding: 10px 12px;
    margin: 10px 10px 0;
    border-radius: var(--p-r-card);
    background: var(--p-surface);
    -webkit-backdrop-filter: var(--p-blur);
    backdrop-filter: var(--p-blur);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow-sm), var(--p-lip);
}

.pro-user__avatar {
    width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--p-display);
    font-size: 12px; font-weight: 700; color: #fff;
    background: linear-gradient(140deg, var(--p-accent), var(--p-accent-ink));
}

.pro-user__out {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px;
    color: var(--p-ink-5);
    background: transparent; border: 0; cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease;
}
.pro-user__out:hover { background: var(--p-bad-wash); color: var(--p-bad); }
.pro-user__out svg { width: 15px; height: 15px; }

/* --- Top bar ---------------------------------------------------------- */

.pro-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.pro-topbar__title {
    font-family: var(--p-display);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--p-ink);
    line-height: 1.15;
}

.pro-topbar__sub { font-size: 12px; color: var(--p-ink-5); margin-top: 2px; }
.pro-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* --- Dashboard: one screen, no page scroll ----------------------------- */
/* The dashboard is a cockpit, not a document: on a desktop viewport every
 * card gets a fixed slice of the height and scrolls INSIDE itself when its
 * content runs long. Below the breakpoint the grid stacks and the page
 * scrolls normally — pinning heights on a phone would crush the cards. */

.pro-dash { display: flex; flex-direction: column; }
.pro-dash .pro-topbar { margin-bottom: 14px; }
.pro-dash__kpis { margin-bottom: 14px; }
.pro-dash__grid { display: grid; gap: 14px; }
.pro-dash__card { display: flex; flex-direction: column; min-height: 0; }
.pro-dash__card .pro-card__head { flex-shrink: 0; }
.pro-dash__body { flex: 1; min-height: 0; overflow-y: auto; }
.pro-dash__foot { flex-shrink: 0; border-top: 1px solid var(--p-line-soft); }

@media (min-width: 1100px) {
    /* The shell pads 16px top and bottom; what is left is the cockpit. */
    .pro-dash { height: calc(100vh - 32px); }
    .pro-dash__grid {
        flex: 1;
        min-height: 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 42fr) minmax(0, 58fr);
    }
    .pro-dash__chart { grid-column: span 2; }
}

/* ===================================================================== */
/* Components                                                            */
/* ===================================================================== */

.pro-card {
    background: var(--p-surface);
    -webkit-backdrop-filter: var(--p-blur);
    backdrop-filter: var(--p-blur);
    border: 1px solid var(--p-line);
    border-radius: var(--p-r-panel);
    box-shadow: var(--p-shadow), var(--p-lip);
}

/* A card that exists to be read rather than admired. */
.pro-card--solid { background: var(--p-surface-strong); }

.pro-card__head {
    padding: 15px 18px 13px;
    border-bottom: 1px solid var(--p-line-soft);
}

.pro-card__title { font-size: 13.5px; font-weight: 600; color: var(--p-ink); }
.pro-card__sub { font-size: 11.5px; color: var(--p-ink-5); margin-top: 2px; line-height: 1.5; }

.pro-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.pro-kpi { padding: 16px 20px; border-left: 1px solid var(--p-line-soft); }
.pro-kpi:first-child { border-left: 0; }
.pro-kpi__value {
    font-family: var(--p-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--p-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.pro-kpi__label {
    font-size: 11px;
    color: var(--p-ink-5);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Tables ----------------------------------------------------------- */
/* Micro uppercase headers, roomy rows, hairline separators. The body sits on
 * near-white rather than glass: a column of digits over a live gradient is
 * pretty and unreadable. */

.pro-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.pro-table thead th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--p-ink-5);
    font-weight: 600;
    text-align: left;
    padding: 10px 16px;
    background: rgb(255 255 255 / 0.42);
    border-bottom: 1px solid var(--p-line-soft);
    white-space: nowrap;
}
.pro-table tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--p-line-soft);
    background: rgb(255 255 255 / 0.55);
}
.pro-table tbody tr:last-child td { border-bottom: 0; }
.pro-table tbody tr:hover td { background: rgb(255 255 255 / 0.82); }
.pro-num { font-variant-numeric: tabular-nums; text-align: right; }
.pro-mono { font-family: var(--p-mono); font-size: 11.5px; }

/* --- Meters ----------------------------------------------------------- */

.pro-meter { display: inline-flex; align-items: center; gap: 8px; }
.pro-meter__track {
    display: inline-block; width: 54px; height: 5px; border-radius: 3px;
    background: var(--p-muted); overflow: hidden; vertical-align: middle;
}
.pro-meter__fill {
    display: block; height: 5px; border-radius: 3px;
    transform-origin: left center;
    animation: pro-meter-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pro-meter-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.pro-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.7;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--p-line-strong);
    background: rgb(255 255 255 / 0.6);
    color: var(--p-ink-5);
    white-space: nowrap;
}
.pro-pill--good { background: var(--p-good-wash); border-color: rgb(22 121 79 / 0.2); color: var(--p-good); }
.pro-pill--warn { background: var(--p-warn-wash); border-color: rgb(169 102 10 / 0.2); color: var(--p-warn); }
.pro-pill--bad  { background: var(--p-bad-wash);  border-color: rgb(188 44 52 / 0.2);  color: var(--p-bad); }
.pro-pill--accent { background: var(--p-accent-soft); border-color: rgb(75 58 168 / 0.2); color: var(--p-accent); }

/* --- Buttons ---------------------------------------------------------- */

.pro-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit;
    font-size: 13px; font-weight: 500;
    padding: 7px 14px;
    border-radius: var(--p-r-inner);
    border: 1px solid var(--p-line-strong);
    background: var(--p-surface-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--p-ink-2);
    cursor: pointer; text-decoration: none;
    box-shadow: var(--p-shadow-sm);
    transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}
.pro-btn:hover { background: var(--p-solid); transform: translateY(-1px); box-shadow: var(--p-shadow); }
.pro-btn:active { transform: translateY(0); box-shadow: var(--p-shadow-sm); }

.pro-btn--primary {
    background: linear-gradient(150deg, #2E2554, var(--p-ink));
    border-color: transparent;
    color: #FFFFFF;
}
.pro-btn--primary:hover { background: linear-gradient(150deg, #3B2F6B, #211E33); }

.pro-btn--accent {
    background: linear-gradient(150deg, var(--p-accent), var(--p-accent-ink));
    border-color: transparent;
    color: #FFFFFF;
}
.pro-btn--accent:hover { background: linear-gradient(150deg, #5644BE, #33276E); }

.pro-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.pro-btn--ghost:hover { background: var(--p-hover); box-shadow: none; }

.pro-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.pro-btn--sm { padding: 5px 11px; font-size: 12px; }

/* --- Tabs ------------------------------------------------------------- */
/* Segmented rather than underlined: on glass an underline competes with every
 * panel edge behind it. */

.pro-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 13px;
    background: var(--p-surface);
    -webkit-backdrop-filter: var(--p-blur);
    backdrop-filter: var(--p-blur);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow-sm);
}

.pro-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px;
    border-radius: 10px;
    font-size: 12.5px; font-weight: 500;
    color: var(--p-ink-5);
    text-decoration: none;
    transition: background-color 0.16s ease, color 0.16s ease;
}
.pro-tab:hover { color: var(--p-ink-2); background: var(--p-hover); }
.pro-tab--active {
    color: var(--p-ink);
    font-weight: 600;
    background: var(--p-solid);
    box-shadow: var(--p-shadow-sm);
}
.pro-tab__count {
    font-size: 10px;
    background: var(--p-muted);
    color: var(--p-ink-5);
    border-radius: 999px;
    padding: 1px 6px;
}
.pro-tab--active .pro-tab__count { background: var(--p-accent-soft); color: var(--p-accent); }

/* --- Odds and ends ---------------------------------------------------- */

.pro-iconstrip { display: inline-flex; }
.pro-iconstrip img {
    width: 20px; height: 20px; border-radius: 6px;
    border: 1.5px solid rgb(255 255 255 / 0.9); margin-left: -5px;
}
.pro-iconstrip img:first-child { margin-left: 0; }

.pro-delta--up { color: var(--p-good); }
.pro-delta--down { color: var(--p-bad); }
.pro-delta--flat { color: var(--p-ink-6); }

/* A term whose meaning is not obvious, carrying its explanation on hover.
 * Cheaper than a legend nobody reads, and it keeps the number uncluttered. */
.pro-hint {
    border-bottom: 1px dashed var(--p-ink-6);
    cursor: help;
}

/* Code the user is meant to copy. Sunken rather than raised: it is a value,
 * not a control. */
.pro-code {
    background: rgb(25 22 48 / 0.045);
    border: 1px solid var(--p-line-strong);
    border-radius: var(--p-r-inner);
    padding: 11px 13px;
    font-family: var(--p-mono);
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--p-ink-2);
    overflow-x: auto;
    white-space: pre;
}

.pro-empty { padding: 44px 24px; text-align: center; }
.pro-empty__title { font-family: var(--p-display); font-size: 15px; font-weight: 600; color: var(--p-ink-2); }
.pro-empty__body { font-size: 12.5px; color: var(--p-ink-5); margin-top: 6px; line-height: 1.6; max-width: 42ch; margin-left: auto; margin-right: auto; }

.pro-note { font-size: 11.5px; color: var(--p-ink-5); line-height: 1.6; }

/* Share-of-voice / distribution bars. */
.pro-bar { display: flex; align-items: center; gap: 12px; }
.pro-bar__label { font-size: 12px; width: 190px; flex-shrink: 0; color: var(--p-ink-4); }
.pro-bar__track { flex: 1; height: 7px; border-radius: 999px; background: var(--p-muted); overflow: hidden; }
.pro-bar__fill {
    height: 7px; border-radius: 999px; background: #A6A1BC;
    transform-origin: left center;
    animation: pro-meter-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pro-bar--us .pro-bar__label { color: var(--p-accent-ink); font-weight: 600; }
.pro-bar--us .pro-bar__fill { background: linear-gradient(90deg, var(--p-accent), var(--p-accent-ink)); }
.pro-bar__value { font-size: 12px; width: 52px; text-align: right; font-variant-numeric: tabular-nums; color: var(--p-ink-4); }

/* The waiting indicator. Replaces a 4.7 MB animated GIF of the old mascot:
 * same job, five divs, and it inherits the palette instead of baking one in.
 * Bars rise and fall out of phase — a skyline, which is what the product is
 * named after. */
.pro-summit { display: inline-flex; align-items: flex-end; gap: 5px; height: 44px; }
.pro-summit span {
    display: block;
    width: 7px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--p-accent), var(--p-accent-ink));
    animation: pro-summit-rise 1.15s ease-in-out infinite;
}
.pro-summit span:nth-child(1) { animation-delay: 0s; }
.pro-summit span:nth-child(2) { animation-delay: 0.11s; }
.pro-summit span:nth-child(3) { animation-delay: 0.22s; }
.pro-summit span:nth-child(4) { animation-delay: 0.33s; }
.pro-summit span:nth-child(5) { animation-delay: 0.44s; }

@keyframes pro-summit-rise {
    0%, 100% { height: 12px; opacity: 0.45; }
    50% { height: 44px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pro-summit span { animation: none; height: 28px; }
}

/* ===================================================================== */
/* Motion                                                                */
/* ===================================================================== */
/* One orchestrated entrance per page load: panels rise in sequence. Anything
 * beyond that on a dashboard is noise you have to sit through every visit. */

@keyframes pro-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pro-rise { animation: pro-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pro-rise-1 { animation-delay: 0.04s; }
.pro-rise-2 { animation-delay: 0.09s; }
.pro-rise-3 { animation-delay: 0.14s; }
.pro-rise-4 { animation-delay: 0.19s; }

@media (prefers-reduced-motion: reduce) {
    .pro-rise, .pro-meter__fill, .pro-bar__fill { animation: none; }
    .pro-btn, .pro-appswitch { transition: none; }
    .pro-btn:hover, .pro-appswitch:hover { transform: none; }
}

/* ===================================================================== */
/* Utilities the compiled Tailwind does not carry                        */
/* ===================================================================== */
/* tailwind.css is generated by scanning upstream's templates, so a class this
 * fork uses but upstream never did produces no rule at all — it fails
 * silently, which is how a two-column layout ends up one column wide. The
 * handful we rely on are written out here at Tailwind's own values
 * (1 unit = 0.25rem, and html is 14px). */

.mt-6 { margin-top: 1.5rem; }
.space-y-1\.5 > * + * { margin-top: 0.375rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-24 { padding-top: 6rem; }
.pl-\[46px\] { padding-left: 46px; }

.w-9 { width: 2.25rem; }
.max-h-80 { max-height: 20rem; }
.max-w-lg { max-width: 32rem; }
.max-w-\[900px\] { max-width: 900px; }
.max-w-\[1200px\] { max-width: 1200px; }
.max-w-\[1400px\] { max-width: 1400px; }
.max-w-\[1500px\] { max-width: 1500px; }

.text-\[13px\] { font-size: 13px; }

.last\:border-0:last-child { border-width: 0; }

@media (min-width: 640px) {
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-\[280px_1fr\] { grid-template-columns: 280px 1fr; }
}

/* ===================================================================== */
/* Narrow screens                                                        */
/* ===================================================================== */

@media (max-width: 900px) {
    .pro-shell { flex-direction: column; padding: 10px; }
    .pro-sidebar {
        width: auto; position: static; height: auto;
        flex-direction: row; align-items: center; gap: 4px;
        overflow-x: auto; padding: 4px 0;
    }
    .pro-sidebar__scroll { display: flex; align-items: center; overflow: visible; }
    .pro-sidebar__section { display: none; }
    .pro-nav-link { white-space: nowrap; margin: 0 2px; }
    .pro-nav-link--active::before { display: none; }
    .pro-appswitch { margin: 0 6px 0 0; }
    /* The horizontal sidebar scrolls on x, which would clip an absolute
     * popover — pin the list to the viewport instead. */
    .pro-appswitch-menu { position: static; }
    .pro-appswitch-list { position: fixed; top: 60px; left: 12px; right: 12px; }
    .pro-user { margin: 0 0 0 6px; flex-shrink: 0; }
    .pro-main { padding: 14px 0 0; }
}