/* ==========================================================================
   Power & Sun sizing tool — component layer
   Plain CSS on purpose: these classes must render correctly even before the
   Tailwind CDN finishes, and on a production server with no build step.
   Tailwind utilities still handle layout in the markup.
   ========================================================================== */

:root {
    --brand-primary: #EF5423;   /* Power orange  */
    --brand-secondary: #F5A93C; /* Sun amber     */
    --brand-accent: #1B4F9C;    /* Deep navy     */
    --brand-sky: #0EA5E9;
    --brand-success: #16A34A;
    --brand-warning: #F59E0B;
    --brand-danger: #E11D48;

    --ink: #0F172A;
    --ink-muted: #64748B;      /* 4.8:1 on white */
    /* For small text sitting on the grey canvas, where --ink-muted only
       reaches 4.3:1. This clears AA on both white and the canvas. */
    --ink-soft: #5B6980;       /* 5.6:1 on white, 5.1:1 on canvas */
    /* Brand orange is 3.5:1 on white - fine as a fill, too pale as small
       text. Fills keep --brand-primary; small orange text uses this. */
    --brand-primary-text: #C03F17;   /* 5.3:1 on white */
    --line: #E2E8F0;
    --surface: #FFFFFF;
    --canvas: #F1F5F9;

    --radius: 14px;
    --radius-sm: 12px;
    --radius-field: 14px;   /* text boxes, selects, textareas */
    /* Layered shadows: a tight contact shadow plus a wider ambient one reads
       as real depth, where a single blurred drop reads as a grey smudge. */
    --shadow-sm:
        0 1px 2px rgba(15, 23, 42, .05),
        0 1px 3px rgba(15, 23, 42, .04);
    --shadow:
        0 1px 2px rgba(15, 23, 42, .05),
        0 6px 16px -4px rgba(15, 23, 42, .09);
    --shadow-md:
        0 1px 2px rgba(15, 23, 42, .05),
        0 10px 26px -6px rgba(15, 23, 42, .13);
    --shadow-lg:
        0 2px 4px rgba(15, 23, 42, .05),
        0 18px 44px -10px rgba(15, 23, 42, .20);
    /* Brand-tinted lift, used on hover so the colour comes with the motion. */
    --shadow-brand: 0 10px 28px -8px rgba(239, 84, 35, .38);
    --shadow-blue: 0 10px 28px -8px rgba(19, 76, 151, .34);

    /* One easing curve and three durations, so everything moves together. */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast: .14s;
    --t: .22s;
    --t-slow: .42s;

    /* Brand blues, both sampled from the artwork rather than approximated.
       --ps-blue is the blue of the three buttons in the Power & Sun mark and
       is what the nav rail uses; --og-blue is the Orange Group indigo. */
    --ps-blue: #134C97;
    --og-blue: #34498A;

    --rail-bg: #134C97;           /* white text measures 8.4:1 — AAA */
    --rail-bg-hover: #1B5EB6;
    --rail-border: #2A6BC0;
    --rail-text: #DCE8F7;         /* 6.8:1 */
    --rail-text-muted: #AECDF0;   /* 5.1:1 — AA at 10px */

    /* Every group logo in the footer renders at exactly this width. */
    --group-logo-w: 132px;

    --header-h: 64px;

    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { -webkit-tap-highlight-color: transparent; }

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

body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-feature-settings: "cv11" 1, "ss01" 1;   /* Inter: single-storey a, nicer l */
    letter-spacing: -.006em;
}

/* Headings take the display face and a tighter track - the two things that
   separate a designed page from a default one. */
h1, h2, h3, h4, .font-display {
    font-family: var(--font-display);
    letter-spacing: -.021em;
}

/* Every figure the engine produces should line up in its column. */
.tabular,
.metric-value,
.td,
table { font-variant-numeric: tabular-nums; }

::selection { background: rgba(239, 84, 35, .18); color: var(--ink); }

/* A slim, unobtrusive scrollbar on the surfaces that scroll. */
.scroll-y::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll-y::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .34);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.scroll-y::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .55); background-clip: content-box; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }

[x-cloak] { display: none !important; }

/* ---------------------------------------------------------------- surfaces */

.card {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    outline: 1px solid var(--line);
    outline-offset: -1px;
    transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

/* Opt-in lift for cards that are actually clickable. Plain content cards
   stay still - motion on everything is noise, not polish. */
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* A card that leads a page: a whisper of gradient so it sits above the rest. */
.card-raised {
    background: linear-gradient(180deg, #fff 0%, #FCFDFE 100%);
    box-shadow: var(--shadow);
}

.card-flush { border-radius: var(--radius); overflow: hidden; }

.metric {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #FBFCFE 0%, #F4F7FB 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* A hairline of brand colour along the top edge, revealed on hover. */
.metric::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-slow) var(--ease-out);
}
.metric:hover { border-color: #CBD5E1; box-shadow: var(--shadow-sm); }
.metric:hover::before { transform: scaleX(1); }

.metric-value {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -.02em;
}

.divide-line > * + * { border-top: 1px solid var(--line); }

/* ----------------------------------------------------------------- buttons */

/* Both spellings work: `btn btn-primary` and the older bare `btn-primary`. */
.btn,
.btn-primary,
.btn-accent,
.btn-dark,
.btn-ghost,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;               /* comfortable touch target */
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.008em;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        background-color var(--t-fast) var(--ease),
        box-shadow var(--t) var(--ease),
        border-color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
    text-align: center;
    white-space: nowrap;
}

/* Solid buttons lift on hover and press back down on click. */
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-brand); }
.btn-accent:hover:not(:disabled)  { transform: translateY(-1px); box-shadow: var(--shadow-blue); }
.btn-dark:hover:not(:disabled)    { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost:hover:not(:disabled)   { border-color: #94A3B8; box-shadow: var(--shadow-sm); }
.btn:active, .btn-primary:active, .btn-accent:active,
.btn-dark:active, .btn-ghost:active, .btn-danger:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn:focus-visible, .btn-primary:focus-visible, .btn-accent:focus-visible,
.btn-dark:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}

.btn[disabled], .btn:disabled,
.btn-primary[disabled], .btn-primary:disabled,
.btn-accent[disabled], .btn-accent:disabled,
.btn-dark[disabled], .btn-dark:disabled,
.btn-ghost[disabled], .btn-ghost:disabled,
.btn-danger[disabled], .btn-danger:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #D6461A; }

.btn-accent { background: var(--brand-accent); color: #fff; }
.btn-accent:hover:not(:disabled) { background: #163F7D; }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover:not(:disabled) { background: #1E293B; }

.btn-ghost { background: #fff; color: #334155; border-color: #CBD5E1; }
.btn-ghost:hover:not(:disabled) { background: #F8FAFC; }

.btn-danger { background: var(--brand-danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #BE123C; }

.btn-sm { min-height: 36px; padding: 7px 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------------ forms */

.label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.input,
select.input,
textarea.input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;                /* 16px stops iOS zooming on focus */
    line-height: 1.4;
    color: var(--ink);
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-field);
    box-shadow: var(--shadow-sm);
    appearance: none;
}
@media (min-width: 640px) { .input, select.input, textarea.input { font-size: 14px; } }

textarea.input { min-height: 88px; }

.input {
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:hover:not(:focus):not(:disabled) { border-color: #94A3B8; }
.input:focus {
    outline: none;
    border-color: var(--ps-blue);
    box-shadow: 0 0 0 3px rgba(19, 76, 151, .14);
}
.input::placeholder { color: var(--ink-soft); opacity: .85; }

select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748B'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 34px;
}

.input-error { border-color: var(--brand-danger); }
.field-error { margin-top: 5px; font-size: 12px; color: var(--brand-danger); }
.field-hint { margin-top: 5px; font-size: 12px; color: var(--ink-muted); }

/* ------------------------------------------------------------------ tables */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
}
.td { padding: 12px 16px; font-size: 14px; color: #334155; }

tbody tr { transition: background-color var(--t-fast) var(--ease); }
tbody tr:hover { background: #F8FAFC; }

/* ------------------------------------------------------------------ chips */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
.chip-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }

.swatch {
    width: 26px; height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, .12);
    flex: none;
}

/* --------------------------------------------------------------- nav rail */

.rail { background: var(--rail-bg); }
.rail-divide { border-color: var(--rail-border); }
.rail-muted { color: var(--rail-text-muted); }

.rail-close {
    color: var(--rail-text-muted);
    background: rgba(0, 0, 0, .18);
}
.rail-close:hover { background: var(--rail-bg-hover); color: #fff; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 42px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--rail-text);
    transition: background-color .15s, color .15s;
}
.nav-link:hover { background: var(--rail-bg-hover); color: #fff; }
/* Brand orange on brand blue: the pairing from the logo, and a strong cue. */
.nav-link-active { background: var(--brand-primary); color: #fff; }
.nav-link-active:hover { background: var(--brand-primary); color: #fff; }

.nav-group-label {
    padding: 0 12px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rail-text-muted);
}

/* ------------------------------------------------------------- form bar */

/* Back / Save / Next, pinned above the fold on mobile. */
.form-actions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 12px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.form-actions .spacer { flex: 1 1 auto; }
@media (max-width: 639px) {
    .form-actions { padding: 10px; gap: 8px; }
    .form-actions .btn { flex: 1 1 auto; }
    .form-actions .spacer { display: none; }
}

/* ------------------------------------------------------------ group logos */

.group-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
    align-items: center;
    justify-items: center;
}
@media (min-width: 640px) { .group-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Sidebar logos: fill the rail width exactly, top and bottom. */
.rail-logo {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Every logo gets the identical rendered width. */
.group-logo {
    width: var(--group-logo-w);
    max-width: 100%;
    height: auto;
    display: block;
    filter: saturate(1);
    opacity: .92;
    transition: opacity .15s;
}
.group-logo:hover { opacity: 1; }

/* ------------------------------------------------------------ scroll area */

.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ----------------------------------------------------------------- print */

@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
    .card { box-shadow: none !important; outline: 1px solid #CBD5E1; break-inside: avoid; }
    .form-actions { display: none !important; }
    a[href]:after { content: ""; }
    @page { margin: 14mm; }

    /* The screen styling leans on gradients, glows and lifted shadows. On
       paper those cost ink and gain nothing, so flatten them and keep only
       the structure a printed report needs. */
    .headline, .stat, .metric, .tile, .scenario, .help-card, .help-start, .help-cta {
        box-shadow: none !important;
        transform: none !important;
        background: #fff !important;
        border: 1px solid #CBD5E1 !important;
        outline: none !important;
        break-inside: avoid;
    }
    .headline::after, .stat::after, .metric::before, .help-hero::after { display: none !important; }
    .headline::before, .stat::before { background: #CBD5E1 !important; }
    .help-hero {
        background: #fff !important;
        color: var(--ink) !important;
        border: 1px solid #CBD5E1;
    }
    .help-hero-eyebrow, .help-hero-lede, .help-hero-facts { color: #475569 !important; }
    .help-hero-facts strong { color: var(--ink) !important; }

    /* Entrance animations must not leave anything mid-fade on paper. */
    .rise, .fade-in, .stagger > *, .trend-bar {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* The stepper is navigation, not report content. */
    .stepper { display: none !important; }

    .headline-value, .stat-value { color: #000 !important; }
    tbody tr:hover { background: transparent !important; }
}

/* ----------------------------------------------------------------- motion */
/* Entrance motion is deliberately small: 10px and 0.42s. Enough to make the
   page feel assembled rather than dumped, not enough to make anyone wait. */

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes shimmer {
    from { background-position: -420px 0; }
    to   { background-position: 420px 0; }
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(239, 84, 35, .45); }
    70%  { box-shadow: 0 0 0 9px rgba(239, 84, 35, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 84, 35, 0); }
}

.rise { animation: rise var(--t-slow) var(--ease-out) both; }
.fade-in { animation: fade var(--t-slow) var(--ease-out) both; }

/* Stagger: children of a `.stagger` enter one after another. Capped at 10 so
   a long list never leaves the reader waiting on the last row. */
.stagger > * { animation: rise var(--t-slow) var(--ease-out) both; }
.stagger > *:nth-child(1)  { animation-delay: .02s; }
.stagger > *:nth-child(2)  { animation-delay: .06s; }
.stagger > *:nth-child(3)  { animation-delay: .10s; }
.stagger > *:nth-child(4)  { animation-delay: .14s; }
.stagger > *:nth-child(5)  { animation-delay: .18s; }
.stagger > *:nth-child(6)  { animation-delay: .22s; }
.stagger > *:nth-child(7)  { animation-delay: .26s; }
.stagger > *:nth-child(8)  { animation-delay: .30s; }
.stagger > *:nth-child(9)  { animation-delay: .34s; }
.stagger > *:nth-child(n+10) { animation-delay: .38s; }

/* Placeholder rows while a calculation is in flight. */
.skeleton {
    background: linear-gradient(90deg, #EEF2F7 25%, #F8FAFC 50%, #EEF2F7 75%);
    background-size: 840px 100%;
    animation: shimmer 1.35s linear infinite;
    border-radius: var(--radius-sm);
}

.pulse-cta { animation: pulse-ring 2.4s var(--ease-out) infinite; }

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    /* Entrance animations use `both`, so killing the duration alone would
       leave elements stuck at opacity 0. Put them back explicitly. */
    .rise, .fade-in, .stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .card-hover:hover, .btn-primary:hover, .btn-accent:hover, .btn-dark:hover { transform: none !important; }
}

/* ------------------------------------------------------- in-page tabs */
/* Used where two related screens were merged into one (countries &
   currencies, the help index). Styled as a segmented control so it does not
   read as a second navigation bar. */
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.tab-btn:hover { background: #F1F5F9; color: var(--ink); }
.tab-btn-on,
.tab-btn-on:hover { background: var(--ps-blue); color: #fff; }

.tab-count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #E2E8F0;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tab-btn-on .tab-count { background: #3C6BAE; color: #fff; }   /* 5.4:1 */

[x-cloak] { display: none !important; }

/* ================================================== help & guidance page */

.help-hero {
    position: relative;
    overflow: hidden;
    padding: 40px 24px 34px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--ps-blue) 0%, #1B5EB6 55%, #2A6BC0 100%);
    color: #fff;
    text-align: center;
}
/* A sun-flare in the brand orange, echoing the mark without competing
   with the text sitting on top of it. */
.help-hero::after {
    content: "";
    position: absolute;
    top: -120px;
    right: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 84, 35, .45) 0%, rgba(239, 84, 35, 0) 68%);
    pointer-events: none;
}
.help-hero > * { position: relative; z-index: 1; }

.help-hero-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #AECDF0;
}
.help-hero-title {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.help-hero-lede {
    margin: 10px auto 0;
    max-width: 34rem;
    font-size: 14px;
    line-height: 1.6;
    color: #DCE8F7;
}

.help-search {
    position: relative;
    display: flex;
    gap: 8px;
    margin: 22px auto 0;
    max-width: 32rem;
}
.help-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    color: #94A3B8;
    pointer-events: none;
}
.help-search-input {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 10px 14px 10px 40px;
    font-size: 16px;                /* 16px stops iOS zooming on focus */
    color: var(--ink);
    background: #fff;
    border: 0;
    border-radius: var(--radius-field);
    box-shadow: 0 6px 18px rgba(8, 32, 66, .22);
    appearance: none;
}
.help-search-input:focus {
    outline: none;
    box-shadow: 0 6px 18px rgba(8, 32, 66, .22), 0 0 0 3px rgba(255, 255, 255, .55);
}
.help-search-input::placeholder { color: var(--ink-soft); opacity: .85; }
.help-search-btn {
    flex: none;
    padding: 0 18px;
    min-height: 46px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--brand-primary);
    border: 0;
    border-radius: var(--radius-field);
    cursor: pointer;
    transition: filter .15s;
}
.help-search-btn:hover { filter: brightness(1.07); }
@media (max-width: 420px) {
    .help-search { flex-wrap: wrap; }
    .help-search-btn { width: 100%; }
    /* Once the button wraps onto its own row, "half of the container" is no
       longer the middle of the input - pin the icon to half the input's
       height instead, keeping the centring transform. */
    .help-search-icon { top: 23px; }
}

.help-hero-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    margin-top: 20px;
    font-size: 12px;
    color: #AECDF0;
}
.help-hero-facts strong { color: #fff; font-weight: 800; }

.help-section-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.help-section-count {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #E9EEF4;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
}

/* ---- "start here" numbered cards ---- */
.help-start {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid #E2E8F0;
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.help-start:hover {
    transform: translateY(-2px);
    border-color: #CBD5E1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .09);
}
.help-start-num {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 900;
    /* `color` set inline - see .help-card-badge. */
}
.help-start-title {
    margin-top: 13px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
}
.help-start-sum {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted);
}
.help-start-go {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ps-blue);
}

/* ---- one card per help page ---- */
.help-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid #E2E8F0;
    border-left: 3px solid var(--accent, #CBD5E1);
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.help-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .09);
}
.help-card-badge {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent, #64748B);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
    /* `color` is set inline from App\Support\Contrast::on(), because the
       accent comes from the database and may be light or dark. */
}
.help-card-title {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
}
.help-card:hover .help-card-title { color: var(--accent, var(--ps-blue)); }
.help-card-sum {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-muted);
}
.help-card-chev {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 11px;
    margin-left: auto;
    color: #CBD5E1;
    transition: transform .15s, color .15s;
}
.help-card:hover .help-card-chev { transform: translateX(3px); color: var(--accent); }

/* ---- closing calls to action ---- */
.help-cta {
    padding: 22px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid #E2E8F0;
    box-shadow: var(--shadow-sm);
}
.help-cta-alt { background: #F8FAFC; }
.help-cta-title { font-size: 15px; font-weight: 800; color: var(--ink); }
.help-cta-sum {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-muted);
}

@media (min-width: 640px) {
    .help-hero { padding: 52px 40px 44px; }
    .help-hero-title { font-size: 34px; }
    .help-hero-lede { font-size: 15px; }
}

/* --------------------------------------------- field-rendering repairs */
/* Tailwind's preflight resets every [type="..."] field to square corners.
   Its attribute selectors tie with `.input` on specificity and load after
   us, so they were winning on number fields (and would win on any type we
   did not anticipate). Adding the element name puts these one notch above
   any bare attribute rule, whatever the load order. */
input.input,
select.input,
textarea.input {
    border-radius: var(--radius-field);
}

/* -------------------------------------------------- search-field repair */
/* Chromium draws a *native* search widget whenever -webkit-appearance is
   `textfield`, and that native widget ignores border-radius and padding.
   Tailwind's preflight sets exactly that on [type="search"], which is why
   every search box rendered as a sharp rectangle while text boxes rounded
   correctly. These selectors carry one more class than the attribute
   selector, so they win regardless of load order. */
.input[type="search"],
.help-search-input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--radius-field);
}
.input[type="search"]::-webkit-search-decoration,
.input[type="search"]::-webkit-search-cancel-button,
.help-search-input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
/* Same reason: keep room for the magnifier glyph. */
.help-search .help-search-input { padding-left: 40px; }

/* ================================================================ stepper */
/* One continuous track with a filling bar, rather than four separate boxes:
   the progress is legible at a glance and the steps read as one journey. */

.stepper { position: relative; }

.stepper-track {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 21px;
    height: 2px;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
}
.stepper-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ps-blue), var(--brand-primary));
    transition: width var(--t-slow) var(--ease-out);
}

.stepper-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.step {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 2px 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: center;
}
.step:disabled { cursor: not-allowed; opacity: .45; }

.step-dot {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 2px #CBD5E1 inset;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition:
        background-color var(--t) var(--ease),
        color var(--t) var(--ease),
        box-shadow var(--t) var(--ease),
        transform var(--t) var(--ease);
}
.step:not(:disabled):hover .step-dot { box-shadow: 0 0 0 2px #CBD5E1 inset; color: #64748B; }

.step-done .step-dot {
    background: var(--ps-blue);
    box-shadow: none;
    color: #fff;
}
.step-on .step-dot {
    background: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(239, 84, 35, .16);
    color: #fff;
    transform: scale(1.09);
}

.step-text { display: block; min-width: 0; }
.step-eyebrow {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.step-label {
    display: block;
    margin-top: 1px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    transition: color var(--t) var(--ease);
}
.step-done .step-label { color: var(--ps-blue); }
.step-on .step-label { color: var(--ink); }

@media (max-width: 560px) {
    .stepper-track { top: 19px; }
    .step-dot { width: 30px; height: 30px; font-size: 12px; }
    .step-eyebrow { display: none; }
    .step-label { font-size: 11px; }
}

/* ======================================================= headline results */
/* The three numbers the tool exists to produce. Each gets its own accent,
   a soft wash of that accent behind the figure, and a display-weight value. */

.headline {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: var(--radius);
    background: var(--surface);
    outline: 1px solid var(--line);
    outline-offset: -1px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.headline:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Accent bar along the top, and a matching glow behind the figure. */
.headline::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--accent);
}
.headline::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
}
.headline > * { position: relative; z-index: 1; }

.headline-inverter { --accent: linear-gradient(90deg, #EF5423, #F5A93C); --accent-solid: #EF5423; --accent-glow: rgba(239, 84, 35, .13); --accent-tint: #FDECE6; }
.headline-battery  { --accent: linear-gradient(90deg, #16A34A, #34D399); --accent-solid: #16A34A; --accent-glow: rgba(22, 163, 74, .13); --accent-tint: #E7F6EC; }
.headline-pv       { --accent: linear-gradient(90deg, #F5A93C, #FCD34D); --accent-solid: #D97706; --accent-glow: rgba(245, 169, 60, .16); --accent-tint: #FDF3E3; }

.headline-top { display: flex; align-items: center; gap: 9px; }

.headline-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background: var(--accent-tint);   /* fallback for no color-mix support */
    background: color-mix(in srgb, var(--accent-solid) 12%, #fff);
    color: var(--accent-solid);
}
.headline-icon svg { width: 17px; height: 17px; }

.headline-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.headline-value {
    margin-top: 12px;
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.headline-unit {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink-muted);
}
.headline-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-muted);
}
.headline-em { font-weight: 700; color: #334155; }

@media (min-width: 640px) {
    .headline-value { font-size: 46px; }
}

/* ============================================================ stat tiles */
/* Dashboard counters. The tone rail on the left carries the meaning, so the
   numbers themselves stay a single, calm ink colour. */

.stat {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 18px 21px;
    border-radius: var(--radius);
    background: var(--surface);
    outline: 1px solid var(--line);
    outline-offset: -1px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--tone);
}
.stat::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--tone-glow) 0%, transparent 70%);
    pointer-events: none;
}
.stat > * { position: relative; z-index: 1; }

.stat-blue  { --tone: linear-gradient(180deg, #134C97, #2A6BC0); --tone-glow: rgba(19, 76, 151, .10); }
.stat-amber { --tone: linear-gradient(180deg, #F5A93C, #FCD34D); --tone-glow: rgba(245, 169, 60, .14); }
.stat-green { --tone: linear-gradient(180deg, #16A34A, #34D399); --tone-glow: rgba(22, 163, 74, .11); }
.stat-slate { --tone: linear-gradient(180deg, #64748B, #94A3B8); --tone-glow: rgba(100, 116, 139, .09); }

.stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.stat-value {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.stat-hint {
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------ trend bars */
@keyframes grow-bar { from { height: 2px; opacity: 0; } to { height: var(--h); opacity: 1; } }

.trend {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 112px;
}
.trend-bar {
    flex: 1;
    min-width: 2px;
    height: var(--h);
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--brand-primary) 0%, #F5A93C 100%);
    animation: grow-bar var(--t-slow) var(--ease-out) both;
    animation-delay: calc(var(--i) * 14ms);
    transition: filter var(--t-fast) var(--ease);
}
.trend-bar:hover { filter: brightness(1.12) saturate(1.1); }

@media (prefers-reduced-motion: reduce) {
    .trend-bar { animation: none; height: var(--h); opacity: 1; }
}

/* ============================================================ choice tiles */
/* The site-type picker. A selected tile gets the brand wash, a tinted border
   and a tick, so the choice is unmistakable without relying on colour alone. */

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
    border-radius: var(--radius);
    background: #fff;
    border: 1.5px solid var(--line);
    cursor: pointer;
    text-align: left;
    transition:
        border-color var(--t) var(--ease),
        background-color var(--t) var(--ease),
        box-shadow var(--t) var(--ease),
        transform var(--t) var(--ease);
}
.tile:hover { border-color: #94A3B8; transform: translateY(-2px); box-shadow: var(--shadow); }
.tile:focus-visible { outline: 2px solid var(--ps-blue); outline-offset: 2px; }

.tile-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #F1F5F9;
    color: #64748B;
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.tile-icon svg { width: 19px; height: 19px; }

.tile-title {
    margin-top: 12px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}
.tile-sub {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-muted);
}

.tile-check {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--brand-primary);
    color: #fff;
    opacity: 0;
    transform: scale(.5);
    transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.tile-check svg { width: 11px; height: 11px; }

.tile-on {
    border-color: var(--brand-primary);
    background: linear-gradient(165deg, #FFF7F3 0%, #FFF 62%);
    box-shadow: 0 0 0 3px rgba(239, 84, 35, .10), var(--shadow-sm);
}
.tile-on .tile-icon { background: rgba(239, 84, 35, .12); color: var(--brand-primary); }
.tile-on .tile-check { opacity: 1; transform: scale(1); }

/* --------------------------------------------------------- scenario cards */
.scenario {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 15px 16px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    cursor: pointer;
    text-align: left;
    transition:
        border-color var(--t) var(--ease),
        background-color var(--t) var(--ease),
        box-shadow var(--t) var(--ease),
        transform var(--t) var(--ease);
}
.scenario:hover { border-color: #94A3B8; transform: translateY(-2px); box-shadow: var(--shadow); }
.scenario:focus-visible { outline: 2px solid var(--ps-blue); outline-offset: 2px; }

.scenario-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    padding-right: 22px;    /* clear of the tick */
}
.scenario-desc {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-muted);
}
.scenario-meta {
    margin-top: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--brand-primary-text);
}

.scenario-on {
    border-color: var(--brand-primary);
    background: linear-gradient(165deg, #FFF7F3 0%, #FFF 62%);
    box-shadow: 0 0 0 3px rgba(239, 84, 35, .10), var(--shadow-sm);
}
.scenario-on .tile-check { opacity: 1; transform: scale(1); }

.scenario-blank {
    border-style: dashed;
    background: transparent;
}
.scenario-blank:hover { background: #fff; }

/* ============================================================ auth screens */
/* The sign-in page is the first thing an outside user sees, so it gets a
   branded backdrop rather than a bare card on grey. Two soft brand-coloured
   washes, no imagery to load. */

/* Deliberately NOT full-bleed. Pulling this panel out to the viewport edge
   with negative margins overflowed the page horizontally, because `main` is
   a centred max-width container - the negative margin escaped it. A rounded
   panel inside the normal content width looks designed and cannot overflow. */
.auth-wrap {
    position: relative;
    overflow: hidden;
    padding: 36px 18px 44px;
    border-radius: calc(var(--radius) + 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(58% 48% at 12% 6%, rgba(239, 84, 35, .11) 0%, transparent 62%),
        radial-gradient(54% 50% at 90% 94%, rgba(19, 76, 151, .13) 0%, transparent 64%),
        linear-gradient(180deg, #F8FBFE 0%, #EEF3F9 100%);
}

.auth-col {
    width: 100%;
    max-width: 27rem;
    animation: rise var(--t-slow) var(--ease-out) both;
}
.auth-col-wide { max-width: 42rem; }
.auth-col-lg { max-width: 32rem; }

.auth-card { box-shadow: var(--shadow-lg); }

@media (min-width: 640px) {
    .auth-wrap { padding: 52px 28px 60px; }
}

/* ------------------------------------------------- muted-text legibility */
/* Tailwind's slate-400 (#94A3B8) measures 2.6:1 on white - well under the
   4.5:1 WCAG AA needs for normal text - and it was carrying hint text in
   ~107 places. Remapped to a grey that still reads as "muted" but is
   actually readable. Every usage in this app is on a light surface, so
   there is nowhere this makes contrast worse.

   The class is doubled on purpose: Tailwind's own utility has the same
   specificity and loads after this file, so a single class would lose. */
.text-slate-400.text-slate-400 { color: var(--ink-soft); }
.text-slate-300.text-slate-300 { color: var(--ink-muted); }

/* Same reasoning for the placeholder utility. */
.placeholder\:text-slate-400.placeholder\:text-slate-400::placeholder { color: var(--ink-soft); }

/* Brand orange as TEXT. brand-600 (#D6461A) measures 4.42:1 on white and so
   misses AA by a whisker across ~92 links and labels. --brand-primary-text
   is 5.3:1 and visually near-identical. Fills are untouched: every button,
   badge and active nav pill keeps the real brand orange. */
.text-brand-600.text-brand-600 { color: var(--brand-primary-text); }
.hover\:text-brand-700.hover\:text-brand-700:hover { color: #B23714; }

/* A stat tile that is also a link. */
.stat-link { display: block; padding-right: 40px; }
.stat-go {
    position: absolute;
    top: 50%;
    right: 16px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    border-radius: 999px;
    background: #F1F5F9;
    color: var(--ink-soft);
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.stat-go svg { width: 12px; height: 12px; }
.stat-link:hover .stat-go {
    background: var(--ps-blue);
    color: #fff;
    transform: translateX(2px);
}

/* A single day of data should read as a bar, not a banner. */
.trend-bar { max-width: 56px; }

/* ---------------------------------------------------------- account tile */
/* Initials stand in for a company logo we do not hold. */
.account-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--ps-blue), #2A6BC0);
    color: #fff;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
}
.account-avatar-lg {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 20px;
}