/* Inter variable font (merged from fonts/inter/inter.css to cut one
   render-blocking request — Phase 7 performance pass). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter/inter-latin-wght-normal.woff2') format('woff2');
}

/*
 * PMP theme layer (light mode) — design tokens from specs/08 and design/.
 * Built token-first so the dark-mode mapping can be added post-MVP without
 * touching markup. Layered on top of Bootstrap 5.3.
 */

:root {
    /* Brand */
    --pmp-primary: #1B3A6B;
    --pmp-primary-rgb: 27, 58, 107;
    --pmp-primary-700: #14294c;
    --pmp-gold: #C9A227;
    --pmp-gold-ink: #8a6d00;       /* AA-passing gold as text/ink */

    /* Surfaces & ink */
    --pmp-bg: #F5F7FA;
    --pmp-surface: #ffffff;
    --pmp-ink: #1a1a1a;            /* near-black; all numerals */
    --pmp-muted: #5b6470;
    --pmp-line: #e6e9ef;

    /* Performance bands (fills). Labels/text use --*-ink to pass AA. */
    --pmp-band-exceeds: #1e7e34;
    --pmp-band-meets: #28a745;
    --pmp-band-partial: #ffc107;
    --pmp-band-partial-ink: #8a6d00;
    --pmp-band-below: #dc3545;

    /* Type scale (px / line-height) */
    --pmp-fs-display: 2.5rem;     /* 40 / 44 */
    --pmp-lh-display: 2.75rem;
    --pmp-fs-h1: 1.5rem;          /* 24 / 30 */
    --pmp-lh-h1: 1.875rem;
    --pmp-fs-h2: 1.125rem;        /* 18 / 26 */
    --pmp-lh-h2: 1.625rem;
    --pmp-fs-body: 0.9375rem;     /* 15 / 22 */
    --pmp-lh-body: 1.375rem;
    --pmp-fs-caption: 0.8125rem;  /* 13 / 18 */
    --pmp-lh-caption: 1.125rem;
    --pmp-fs-overline: 0.6875rem; /* 11 / 16 */
    --pmp-lh-overline: 1rem;

    /* Spacing (8px base) */
    --pmp-s1: 0.5rem;
    --pmp-s2: 1rem;
    --pmp-s3: 1.5rem;
    --pmp-s4: 2rem;
    --pmp-s5: 2.5rem;

    /* Structure */
    --pmp-radius: 12px;
    --pmp-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --pmp-sidebar-w: 260px;
    --pmp-appbar-h: 56px;
    --pmp-bottomnav-h: 64px;

    /* Bootstrap overrides */
    --bs-primary: var(--pmp-primary);
    --bs-primary-rgb: var(--pmp-primary-rgb);
    --bs-body-bg: var(--pmp-bg);
    --bs-body-color: var(--pmp-ink);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-border-color: var(--pmp-line);
}

body {
    background: var(--pmp-bg);
    color: var(--pmp-ink);
    font-family: var(--bs-body-font-family);
    font-size: var(--pmp-fs-body);
    line-height: var(--pmp-lh-body);
    -webkit-font-smoothing: antialiased;
}

/* Numerals: tabular figures everywhere a score/delta appears. */
.pmp-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--pmp-ink);
}

/* --- Type utilities ------------------------------------------------------ */
.pmp-display {
    font-size: var(--pmp-fs-display);
    line-height: var(--pmp-lh-display);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pmp-h1 { font-size: var(--pmp-fs-h1); line-height: var(--pmp-lh-h1); font-weight: 600; }
.pmp-h2 { font-size: var(--pmp-fs-h2); line-height: var(--pmp-lh-h2); font-weight: 600; }
.pmp-caption { font-size: var(--pmp-fs-caption); line-height: var(--pmp-lh-caption); color: var(--pmp-muted); }
.pmp-overline {
    font-size: var(--pmp-fs-overline);
    line-height: var(--pmp-lh-overline);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pmp-muted);
}

/* --- Cards --------------------------------------------------------------- */
.pmp-card {
    background: var(--pmp-surface);
    border: 1px solid var(--pmp-line);
    border-radius: var(--pmp-radius);
    box-shadow: var(--pmp-shadow);
    padding: var(--pmp-s2);
}
@media (min-width: 992px) {
    .pmp-card { padding: var(--pmp-s3); }
}

/* --- Buttons ------------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--pmp-primary);
    --bs-btn-border-color: var(--pmp-primary);
    --bs-btn-hover-bg: var(--pmp-primary-700);
    --bs-btn-hover-border-color: var(--pmp-primary-700);
    --bs-btn-active-bg: var(--pmp-primary-700);
    --bs-btn-disabled-bg: var(--pmp-primary);
    --bs-btn-disabled-border-color: var(--pmp-primary);
}

/* --- Band badges (fill + AA-safe label) ---------------------------------- */
.pmp-band {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: var(--pmp-fs-caption);
    font-weight: 600;
    padding: .125rem .5rem;
    border-radius: 999px;
    line-height: 1.2;
}
.pmp-band--exceeds { background: rgba(30, 126, 52, .12); color: var(--pmp-band-exceeds); }
.pmp-band--meets   { background: transparent; color: var(--pmp-band-meets); border: 1px solid var(--pmp-band-meets); }
.pmp-band--partial { background: rgba(255, 193, 7, .18); color: var(--pmp-band-partial-ink); }
.pmp-band--below   { background: rgba(220, 53, 69, .12); color: var(--pmp-band-below); }

/* --- App shell: top bar -------------------------------------------------- */
.pmp-appbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--pmp-appbar-h);
    background: var(--pmp-surface);
    border-bottom: 1px solid var(--pmp-line);
    display: flex;
    align-items: center;
    gap: var(--pmp-s2);
    padding: 0 var(--pmp-s2);
}
.pmp-appbar__title { font-weight: 600; font-size: var(--pmp-fs-h2); }

/* Notification bell + unread badge */
.pmp-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--pmp-ink);
    border-radius: 999px;
}
.pmp-bell:hover { background: var(--pmp-bg); }
.pmp-bell__badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pmp-band-below);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 700;
    text-align: center;
    display: none;
}
.pmp-bell__badge.is-visible { display: block; }

/* --- App shell: desktop sidebar ----------------------------------------- */
.pmp-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--pmp-sidebar-w);
    background: var(--pmp-primary);
    color: #fff;
    padding: var(--pmp-s3) var(--pmp-s2);
    overflow-y: auto;
}
.pmp-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--pmp-s1);
    font-weight: 600;
    margin-bottom: var(--pmp-s3);
}
.pmp-sidebar__logo {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: var(--pmp-gold);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
.pmp-sidebar__nav a {
    display: flex;
    align-items: center;
    gap: var(--pmp-s1);
    padding: .625rem .75rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    font-size: var(--pmp-fs-body);
    margin-bottom: 2px;
}
.pmp-sidebar__nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.pmp-sidebar__nav a.is-active { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }

/* --- App shell: content column ------------------------------------------ */
.pmp-content {
    padding: var(--pmp-s2);
    padding-bottom: calc(var(--pmp-bottomnav-h) + var(--pmp-s3));
    max-width: 1200px;
    margin: 0 auto;
}

/* --- App shell: mobile bottom nav --------------------------------------- */
.pmp-bottomnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1020;
    height: var(--pmp-bottomnav-h);
    background: var(--pmp-surface);
    border-top: 1px solid var(--pmp-line);
    display: flex;
}
.pmp-bottomnav a {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 0;
    color: var(--pmp-muted);
    text-decoration: none;
    font-size: var(--pmp-fs-overline);
}
.pmp-bottomnav a .pmp-bottomnav__icon { width: 22px; height: 22px; }
.pmp-bottomnav a.is-active { color: var(--pmp-primary); font-weight: 600; }

/* --- Desktop breakpoint (>=992px) --------------------------------------- */
@media (min-width: 992px) {
    .pmp-sidebar { display: block; }
    .pmp-bottomnav { display: none; }
    .pmp-appbar { padding-left: calc(var(--pmp-sidebar-w) + var(--pmp-s2)); }
    .pmp-shell { padding-left: var(--pmp-sidebar-w); }
    .pmp-content {
        padding: var(--pmp-s3);
        padding-bottom: var(--pmp-s3);
    }
}

/* No element may cause horizontal scroll at any width. */
html, body { overflow-x: hidden; }

/* <button class="pmp-card"> (e.g. notification rows) renders like a card. */
button.pmp-card { cursor: pointer; }
button.pmp-card:hover { border-color: var(--pmp-primary); }

/* --- Segmented 1-10 rating control (design: >=44px touch targets) -------- */
.pmp-rate { display: flex; gap: 4px; flex-wrap: wrap; }
.pmp-rate input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pmp-rate label {
    min-width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--pmp-line); border-radius: 8px;
    background: var(--pmp-surface); color: var(--pmp-ink);
    font-variant-numeric: tabular-nums; font-weight: 600; cursor: pointer;
    flex: 1 0 auto;
}
.pmp-rate input:checked + label {
    background: var(--pmp-primary); border-color: var(--pmp-primary); color: #fff;
}
.pmp-rate input:focus-visible + label { outline: 2px solid var(--pmp-gold); outline-offset: 1px; }

/* --- Gauge (design 6a) --------------------------------------------------- */
.pmp-gauge { position: relative; height: 160px; }
.pmp-gauge canvas { max-height: 160px; }
.pmp-gauge__center {
    position: absolute; left: 0; right: 0; bottom: 8px;
    text-align: center; pointer-events: none;
}
.pmp-gauge--mini { height: 72px; }
.pmp-gauge--mini canvas { max-height: 72px; }
.pmp-gauge--mini .pmp-gauge__center { bottom: 0; }

/* Component bar */
.pmp-compbar { height: 8px; border-radius: 999px; background: var(--pmp-line); overflow: hidden; }
.pmp-compbar > div { height: 100%; border-radius: 999px; background: var(--pmp-band-meets); }

/* --- Brand logo -------------------------------------------------------- */
/* The real logo (public/assets/img/lwp-logo.png) renders as an <img>;
   this styles the temporary "LP" fallback shown until the file is added. */
.pmp-logo-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; flex: 0 0 auto;
    background: var(--pmp-primary); color: var(--pmp-gold);
    border: 1px solid rgba(201, 162, 39, .5);
    font-weight: 800; letter-spacing: .02em; line-height: 1;
}
.pmp-logo { display: inline-block; flex: 0 0 auto; }

/* --- Skeleton shimmer for chart areas (removed on data load) ------------- */
canvas[data-chart]:not(.is-loaded) {
    border-radius: 8px;
    background: linear-gradient(90deg, var(--pmp-bg) 25%, #eceff4 37%, var(--pmp-bg) 63%);
    background-size: 400% 100%;
    animation: pmpShimmer 1.4s ease infinite;
}
@keyframes pmpShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    canvas[data-chart]:not(.is-loaded) { animation: none; }
}