/* ============================================================
   PolicySims — Apple-inspired editorial precision system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Inter+Tight:wght@400;500;600;700&display=swap');

:root {
    /* ---------- DESIGN TOKENS ---------- */
    --color-black: #000000;
    --color-pale-gray: #f5f5f7;
    --color-near-black: #1d1d1f;

    --color-action-blue: #0071e3;
    --color-link-blue: #0066cc;
    --color-bright-blue: #2997ff;
    --color-cge-violet: #7c3aed;
    /* Regional CGE (IndoTERM/tripterm) — its own brand colour so the
       sub-national model is distinguishable at a glance from the two
       single-country CGE models (violet) and the GTAP family (blue).
       Same hue as --color-success so the palette stays coherent; kept as a
       separate token because this is a brand rail, not a status. */
    --color-regional-green: #0a8754;

    --color-white: #ffffff;
    --color-graphite: #272729;

    --color-neutral-secondary: #6e6e73;
    --color-border-soft: #d2d2d7;
    --color-border-mid: #86868b;
    --color-border-hairline: #e8e8ed;
    --color-utility-dark: #424245;

    --color-success: #0a8754;
    --color-warning: #c77800;
    --color-danger: #b3261e;

    /* Semantic */
    --bg-canvas: var(--color-white);
    --bg-subtle: var(--color-pale-gray);
    --bg-inverse: var(--color-black);

    --fg-primary: var(--color-near-black);
    --fg-secondary: var(--color-neutral-secondary);
    --fg-inverse: var(--color-white);
    --fg-muted: var(--color-utility-dark);

    --link: var(--color-link-blue);
    --action: var(--color-action-blue);
    --action-fg: var(--color-white);

    --border-subtle: var(--color-border-soft);
    --border-hairline: var(--color-border-hairline);

    /* Legacy variable aliases — used by templates not yet migrated */
    --color-primary: var(--color-action-blue);
    --color-primary-hover: #005bb5;
    --color-primary-light: #e8f0fd;
    --color-primary-text: #003d80;
    --color-bg: var(--bg-subtle);
    --color-card: var(--bg-canvas);
    --color-border: var(--border-subtle);
    --color-border-light: var(--border-hairline);
    --color-text: var(--fg-primary);
    --color-text-secondary: var(--fg-muted);
    --color-text-muted: var(--fg-secondary);
    --color-text-faint: var(--color-border-mid);

    /* Fonts */
    --font-display: 'Inter Tight', 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-text: 'Inter', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

    /* Radii */
    --radius-xs: 5px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-2xl: 28px;
    --radius-capsule: 980px;

    /* Elevation */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.08);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.14);

    /* Motion */
    --ease-standard: cubic-bezier(0.28, 0.11, 0.32, 1);
    --dur-fast: 140ms;
    --dur-base: 240ms;
}

/* ============================================================
   BASE
   ============================================================ */

html {
    scroll-behavior: smooth;
    font-family: var(--font-text);
}
body {
    font-family: var(--font-text);
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg-primary);
    background: var(--bg-subtle);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

/* Display family for headings */
h1, h2, h3, h4, h5,
.font-display {
    font-family: var(--font-display);
    letter-spacing: -0.014em;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-border-soft);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-mid);
    background-clip: content-box;
    border: 2px solid transparent;
}

/* ===== Utilities ===== */
[x-cloak] { display: none !important; }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* HTMX loading */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

/* ============================================================
   PAGE HEADER
   ============================================================ */

.page-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fg-primary);
    line-height: 1.1;
    margin: 0;
}
.page-subtitle {
    font-family: var(--font-text);
    font-size: 15px;
    color: var(--fg-secondary);
    margin-top: 6px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.ps-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 28px;
}
.ps-page-header__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   MODEL BREADCRUMB PILL
   ============================================================ */

.ps-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 14px;
}
.ps-breadcrumb__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ps-breadcrumb__pill--gtap { background: rgba(0,113,227,0.10); color: var(--color-action-blue); }
.ps-breadcrumb__pill--cge  { background: rgba(124,58,237,0.10); color: var(--color-cge-violet); }
.ps-breadcrumb__pill--regional { background: rgba(10,135,84,0.10); color: var(--color-regional-green); }
.ps-breadcrumb__pill--neutral { background: var(--bg-subtle); color: var(--fg-muted); }
.ps-breadcrumb__dot {
    width: 5px; height: 5px; border-radius: 50%;
}
.ps-breadcrumb__sub { font-weight: 500; opacity: 0.78; }
.ps-breadcrumb__chevron { color: var(--color-border-mid); }
.ps-breadcrumb__page { color: var(--fg-secondary); font-weight: 500; }

/* ============================================================
   CARDS
   ============================================================ */

.card,
.ps-card {
    background: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: none;
    overflow: hidden;
}
.card-header,
.ps-card-header {
    padding: 20px 24px 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--fg-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.card-header { padding: 16px 24px; border-bottom: 1px solid var(--border-hairline); }
.card-body,
.ps-card-body {
    padding: 24px;
}

/* KPI / metric tile (used by .metric-card and Kpi templates) */
.kpi-tile {
    background: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 16px 18px;
    min-width: 0;
}
.kpi-tile__label {
    font-family: var(--font-text);
    font-size: 11px;
    font-weight: 500;
    color: var(--fg-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.kpi-tile__value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--fg-primary);
    letter-spacing: -0.014em;
    margin-top: 4px;
    line-height: 1.1;
}
.kpi-tile__delta {
    font-family: var(--font-text);
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
    color: var(--fg-secondary);
}
.kpi-tile__delta--pos { color: var(--color-success); }
.kpi-tile__delta--neg { color: var(--color-danger); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary,
.ps-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    background: var(--color-action-blue);
    color: var(--color-white);
    font-family: var(--font-text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-action-blue);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard);
    text-decoration: none;
    white-space: nowrap;
}
.btn-primary:hover,
.ps-btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-white);
    text-decoration: none;
}
.btn-primary:disabled,
.ps-btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-secondary,
.ps-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: var(--bg-canvas);
    color: var(--fg-primary);
    font-family: var(--font-text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    box-shadow: none;
    transition: background var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard);
    text-decoration: none;
    white-space: nowrap;
}
.btn-secondary:hover,
.ps-btn-secondary:hover {
    background: var(--bg-subtle);
    border-color: var(--color-border-mid);
    color: var(--fg-primary);
    text-decoration: none;
}
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary.text-xs { height: 30px; font-size: 12px; padding: 0 10px; }
.btn-secondary.text-sm { height: 34px; font-size: 13px; padding: 0 12px; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    background: transparent;
    color: var(--fg-primary);
    font-family: var(--font-text);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}
.btn-ghost:hover { background: var(--bg-subtle); }

.btn-add-shock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    background: var(--color-action-blue);
    color: var(--color-white);
    font-family: var(--font-text);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-action-blue);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-standard);
}
.btn-add-shock:hover { background: var(--color-primary-hover); }

.btn-run {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    background: var(--color-action-blue);
    color: var(--color-white);
    font-family: var(--font-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-action-blue);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 113, 227, 0.16);
    transition: background var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
}
.btn-run:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.22);
}
.btn-run:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}
.btn-run .spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.32);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.btn-clear {
    font-family: var(--font-text);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-danger);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease-standard);
}
.btn-clear:hover { background: rgba(179,38,30,0.06); color: #8a1f17; }

@keyframes subtle-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,113,227,0.28); }
    50% { box-shadow: 0 0 0 8px rgba(0,113,227,0); }
}
.btn-run-pulse { animation: subtle-pulse 2.5s ease-in-out infinite; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */

.form-label {
    display: block;
    font-family: var(--font-text);
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-primary);
    letter-spacing: -0.005em;
    margin-bottom: 6px;
}
.form-control {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-family: var(--font-text);
    font-size: 13px;
    line-height: 40px;
    color: var(--fg-primary);
    background: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
}
.form-control::placeholder {
    color: var(--color-border-mid);
    font-weight: 400;
}
.form-control:hover { border-color: var(--color-border-mid); }
.form-control:focus {
    outline: none;
    border-color: var(--color-action-blue);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14);
}

textarea.form-control {
    height: auto;
    padding: 10px 12px;
    line-height: 1.5;
}

select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2386868b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Multi-select: let the `size` attribute dictate visible-row count and
   restore native scroll behaviour. Without this the single-row height +
   line-height inherited from .form-control would crush the listbox down
   to a few pixels regardless of `size`. */
select[multiple].form-control {
    height: auto;
    min-height: 7rem;       /* sensible floor when size attr is small */
    padding: 6px 10px;
    line-height: 1.4;
    background-image: none;
    padding-right: 10px;
    appearance: listbox;
    -webkit-appearance: listbox;
    -moz-appearance: listbox;
}
select[multiple].form-control option {
    padding: 4px 8px;
    line-height: 1.4;
}

.input-suffix-wrap { position: relative; display: flex; align-items: center; }
.input-suffix-wrap .form-control { padding-right: 36px; }
.input-suffix-wrap .input-suffix {
    position: absolute; right: 12px;
    font-size: 13px; font-weight: 500;
    color: var(--fg-secondary);
    pointer-events: none;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--color-action-blue); }

.form-section {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border-hairline);
}
.form-section-title {
    font-family: var(--font-text);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-action-blue);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

/* ============================================================
   TABS — pill primary, segmented secondary
   ============================================================ */

/* Wraps rather than scrolls: a hidden-scrollbar overflow silently clipped the
   right-most tabs on narrow panels, with no cue that more existed. */
.tab-l1 {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.tab-l1-btn {
    position: relative;
    padding: 12px 13px;
    font-family: var(--font-text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--fg-secondary);
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}
.tab-l1-btn:hover { color: var(--fg-primary); }
.tab-l1-btn.active {
    color: var(--fg-primary);
    font-weight: 600;
    border-bottom-color: var(--fg-primary);
}

.tab-l2 {
    display: inline-flex;
    gap: 0;
    padding: 3px;
    background: var(--bg-subtle);
    border-radius: 9px;
    margin-top: 4px;
    margin-bottom: 8px;
}
.tab-l2-btn {
    padding: 6px 14px;
    font-family: var(--font-text);
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-secondary);
    border-radius: 7px;
    cursor: pointer;
    background: transparent;
    border: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
}
.tab-l2-btn:hover { color: var(--fg-primary); }
.tab-l2-btn.active {
    background: var(--bg-canvas);
    color: var(--color-action-blue);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* ============================================================
   SHOCK PILL & BADGES
   ============================================================ */

.shock-pill {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
    border: 1px solid var(--border-hairline);
    transition: border-color var(--dur-fast) var(--ease-standard);
}
.shock-pill:hover { border-color: var(--border-subtle); }

.shock-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
    background: rgba(0,113,227,0.10);
    color: var(--color-action-blue);
    line-height: 1.4;
}

.shock-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    border-radius: 99px;
    background: rgba(0,113,227,0.10);
    color: var(--color-action-blue);
    margin-left: 8px;
}

.baseline-box {
    font-size: 12px;
    color: var(--fg-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    padding: 10px 16px;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.ps-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-subtle);
}

.ps-sidebar {
    width: 296px;
    flex-shrink: 0;
    background: var(--bg-canvas);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ps-sidebar__brand {
    padding: 20px 22px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ps-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--fg-primary);
    letter-spacing: -0.012em;
}
.ps-logo-img {
    height: 44px;
    width: auto;
    max-width: 100%;
    display: block;
}
.ps-logo__dot {
    position: absolute;
    top: -2px;
    left: 100%;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: var(--color-action-blue);
    margin-left: -1px;
}

.ps-sidebar__search {
    padding: 0 14px 8px;
    position: relative;
}
.ps-sidebar__search-icon {
    position: absolute;
    left: 24px;
    top: 8px;
    color: var(--color-border-mid);
}
.ps-sidebar__search input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    font-family: var(--font-text);
    font-size: 12px;
    color: var(--fg-primary);
    outline: none;
}
.ps-sidebar__search input:focus {
    border-color: var(--color-action-blue);
    background: var(--bg-canvas);
}

.ps-sidebar__scroll {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 16px;
}

.ps-nav-group { padding: 0 10px; display: flex; flex-direction: column; gap: 1px; }
.ps-nav-group + .ps-nav-group { margin-top: 4px; }

.ps-nav-section-label {
    padding: 0 14px 6px;
    margin-top: 14px;
    font-family: var(--font-text);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-border-mid);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ps-nav-divider {
    margin: 14px 14px 0;
    padding-top: 14px;
    border-top: 1px solid var(--border-hairline);
}

.ps-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 0;
    background: transparent;
    color: var(--fg-primary);
    font-family: var(--font-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard);
    width: 100%;
}
.ps-nav-item:hover { background: var(--bg-subtle); color: var(--fg-primary); text-decoration: none; }
.ps-nav-item--active {
    background: rgba(0,113,227,0.10);
    color: var(--color-action-blue);
    font-weight: 600;
}
.ps-nav-item--active:hover { background: rgba(0,113,227,0.14); color: var(--color-action-blue); }
.ps-nav-item--gtap-active { background: rgba(0,113,227,0.10); color: var(--color-action-blue); font-weight: 600; }
.ps-nav-item--cge-active  { background: rgba(124,58,237,0.10); color: var(--color-cge-violet); font-weight: 600; }
.ps-nav-item--regional-active { background: rgba(10,135,84,0.10); color: var(--color-regional-green); font-weight: 600; }
.ps-nav-item--gtap-active:hover { background: rgba(0,113,227,0.14); color: var(--color-action-blue); }
.ps-nav-item--cge-active:hover  { background: rgba(124,58,237,0.14); color: var(--color-cge-violet); }
.ps-nav-item--regional-active:hover { background: rgba(10,135,84,0.14); color: var(--color-regional-green); }
.ps-nav-item__icon { flex-shrink: 0; }

/* Model picker — segmented control */
.ps-model-picker-wrap {
    margin-top: 18px;
    padding: 0 14px;
}
.ps-model-picker-wrap__label {
    font-family: var(--font-text);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-border-mid);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    padding: 0 4px;
}
.ps-model-picker {
    display: flex;
    flex-direction: column;
    background: var(--bg-subtle);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
}
.ps-model-picker__opt {
    padding: 7px 10px;
    border-radius: 7px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--fg-secondary);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease-standard);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ps-model-picker__opt:hover { color: var(--fg-primary); text-decoration: none; }
.ps-model-picker__opt-dot { width: 6px; height: 6px; border-radius: 50%; }
.ps-model-picker__opt--active-gtap {
    background: var(--bg-canvas);
    color: var(--color-action-blue);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.ps-model-picker__opt--active-cge {
    background: var(--bg-canvas);
    color: var(--color-cge-violet);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.ps-model-picker__opt--active-regional {
    background: var(--bg-canvas);
    color: var(--color-regional-green);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.ps-sidebar__user {
    padding: 14px;
    border-top: 1px solid var(--border-hairline);
    display: flex;
    align-items: center;
    gap: 10px;
}
.ps-sidebar__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-action-blue);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}
.ps-sidebar__user-meta { flex: 1; min-width: 0; }
.ps-sidebar__user-name {
    font-family: var(--font-text);
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ps-sidebar__user-role {
    font-family: var(--font-text);
    font-size: 11px;
    color: var(--fg-secondary);
}
.ps-sidebar__signout {
    background: transparent;
    border: 0;
    color: var(--color-border-mid);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease-standard),
                background var(--dur-fast) var(--ease-standard);
}
.ps-sidebar__signout:hover { color: var(--color-danger); background: rgba(179,38,30,0.06); }

/* Regional CGE policy-verdict tiles (results Ringkasan tab).
   A dashboard is scanned, not read: the chip encodes direction in FORM as
   well as number, and the left rail repeats it as colour, so "what needs
   attention" reads before any figure is parsed. Semantic colour here
   (good / bad / neutral) is separate from the Regional brand green used
   for chrome. */
.rc-verdicts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.rc-verdict {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 13px;
    overflow: hidden;
    background: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 10px);
}
.rc-verdict::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--color-border-mid);
}
.rc-verdict--pos::before  { background: var(--color-success); }
.rc-verdict--neg::before  { background: var(--color-danger); }
.rc-verdict--warn::before { background: var(--color-warning); }
.rc-verdict--flat::before { background: var(--color-border-mid); }
.rc-verdict__head {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.rc-verdict__name {
    font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--fg-secondary);
}
.rc-verdict__chip {
    flex: none;
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 99px;
    white-space: nowrap;
    background: var(--bg-subtle); color: var(--fg-secondary);
}
.rc-verdict__chip--pos  { background: rgba(10,135,84,0.12);  color: var(--color-success); }
.rc-verdict__chip--neg  { background: rgba(179,38,30,0.12);  color: var(--color-danger); }
.rc-verdict__chip--warn { background: rgba(199,120,0,0.14);  color: var(--color-warning); }
.rc-verdict__fig {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 640; letter-spacing: -0.02em; line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--fg-primary);
}
.rc-verdict__fig--pos { color: var(--color-success); }
.rc-verdict__fig--neg { color: var(--color-danger); }
.rc-verdict__what {
    font-size: 11px; line-height: 1.4; color: var(--fg-muted); margin: 0;
}
.rc-verdict__nat {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px;
    padding-top: 6px; margin-top: auto;
    border-top: 1px dashed var(--border-subtle);
    font-size: 10.5px; color: var(--fg-secondary);
}
.rc-verdict__nat b { font-weight: 640; font-variant-numeric: tabular-nums; }
.rc-verdict__nat b.pos { color: var(--color-success); }
.rc-verdict__nat b.neg { color: var(--color-danger); }
.rc-verdict__natnote { opacity: 0.85; }

/* Winners / losers split bar on the inter-regional view. */
.rc-gainbar {
    display: flex; height: 24px; border-radius: var(--radius-sm, 6px);
    overflow: hidden; border: 1px solid var(--border-subtle);
}
.rc-gainbar b {
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 650; color: #fff; white-space: nowrap;
    overflow: hidden;
}

@media (max-width: 1100px) { .rc-verdicts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .rc-verdicts { grid-template-columns: 1fr; } }

/* Results-interrogation chat (Regional CGE report tab). */
.rc-chat__log { display: flex; flex-direction: column; gap: 14px; }
.rc-chat__log:empty { display: none; }
.rc-chat__turn {
    display: flex; flex-direction: column; gap: 8px;
    padding-bottom: 14px; border-bottom: 1px solid var(--border-hairline);
}
.rc-chat__turn:last-child { border-bottom: 0; padding-bottom: 0; }
.rc-chat__row { display: flex; align-items: flex-start; gap: 10px; }
.rc-chat__who {
    flex: none; width: 34px; padding: 2px 0; text-align: center;
    border-radius: 6px; font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.rc-chat__who--user { background: var(--bg-subtle); color: var(--fg-secondary); }
.rc-chat__who--ai   { background: rgba(10,135,84,0.12); color: var(--color-regional-green); }
.rc-chat__body { flex: 1; font-size: 13px; line-height: 1.55; color: var(--fg-primary); min-width: 0; }
.rc-chat__body--ai { color: var(--fg-muted); }
.rc-chat__body p { margin: 0 0 7px; }
.rc-chat__body p:last-child { margin-bottom: 0; }
.rc-chat__h { font-weight: 650; color: var(--fg-primary); }
.rc-chat__ul { margin: 0 0 7px; padding-left: 18px; }
.rc-chat__ul li { margin: 3px 0; }
.rc-chat__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; background: var(--bg-subtle);
    padding: 1px 5px; border-radius: 4px;
}
.rc-chat__form { display: flex; gap: 8px; margin-top: 12px; }
.rc-chat__form .form-control { flex: 1; margin: 0; }
.rc-chat__pending {
    display: none; align-items: center; gap: 8px; margin-top: 10px;
    font-size: 12px; color: var(--fg-secondary);
}
.rc-chat__pending.htmx-request { display: flex; }
.rc-chat__spinner {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--color-regional-green);
    animation: rc-spin 0.7s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rc-chat__spinner { animation: none; } }
.rc-chat__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.rc-chat__chip {
    background: var(--bg-subtle); border: 1px solid var(--border-hairline);
    border-radius: 99px; padding: 4px 11px; font-size: 11.5px;
    color: var(--fg-secondary); cursor: pointer; text-align: left;
    transition: color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}
.rc-chat__chip:hover { color: var(--fg-primary); border-color: var(--border-subtle); }

/* Inter-regional map hover card. */
.rc-maptip {
    display: none; position: fixed; z-index: 200; pointer-events: none;
    min-width: 232px; max-width: 300px; padding: 10px 12px;
    background: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-2, 0 8px 24px -8px rgba(0,0,0,0.24));
    font-size: 11.5px; color: var(--fg-primary);
}
.rc-maptip__title {
    font-weight: 650; font-size: 12.5px; margin-bottom: 6px;
    padding-bottom: 5px; border-bottom: 1px solid var(--border-hairline);
}
.rc-maptip__row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 1.5px 0; color: var(--fg-secondary);
}
.rc-maptip__row b { font-variant-numeric: tabular-nums; color: var(--fg-primary); }
.rc-maptip__row b.pos { color: var(--color-success); }
.rc-maptip__row b.neg { color: var(--color-danger); }
.rc-maptip__note {
    margin-top: 6px; padding-top: 5px;
    border-top: 1px solid var(--border-hairline);
    font-size: 10px; color: var(--fg-secondary);
}

/* ============================================================
   Regional CGE results redesign (2026-09-05)
   Scenario banner, pill tab bar, map-led summary grid, sector
   comparison controls, report/chat two-column layout. Scoped
   rc-* so no other blueprint's page is touched.
   ============================================================ */

/* Light banner (2026-09-05 owner revision): the first cut was a deep
   green block, which read as another product's hero rather than this
   app's own chrome — restyled onto the standard card surface with the
   design system's tokens; the regional family green survives only where
   the rest of the app already uses it (the region chip's tint, matching
   the breadcrumb pill, and the sign colours on the hero figures). */
.rc-banner {
    background: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    color: var(--fg-primary);
    border-radius: 14px;
    padding: 22px 26px 20px;
    margin-bottom: 14px;
}
.rc-banner__top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rc-banner__title {
    font-family: var(--font-display);
    font-size: 21px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--fg-primary); margin: 0;
}
.rc-banner__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-chip {
    font-size: 11px; font-weight: 600; padding: 2.5px 10px; border-radius: 999px;
    background: var(--bg-subtle); color: var(--fg-secondary);
    border: 1px solid var(--border-hairline); white-space: nowrap;
}
.rc-chip--region {
    background: rgba(10,135,84,0.10); color: var(--color-regional-green);
    border-color: rgba(10,135,84,0.22);
}
.rc-banner__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rc-banner__grid {
    display: flex; gap: 36px; align-items: flex-end; margin-top: 12px; flex-wrap: wrap;
}
.rc-hero { display: flex; gap: 32px; }
.rc-hero__lbl { font-size: 11.5px; color: var(--fg-secondary); margin-bottom: 2px; }
.rc-hero__val {
    font-family: var(--font-display); font-weight: 700; font-size: 38px;
    line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
    color: var(--fg-primary);
}
.rc-hero__val--pos { color: var(--color-success); }
.rc-hero__val--neg { color: var(--color-danger); }
.rc-hero__val--small { font-size: 24px; padding-top: 12px; }
.rc-hero__sub { font-size: 11.5px; color: var(--fg-muted); margin-top: 5px; }
.rc-banner__headline {
    max-width: 560px; font-size: 14px; line-height: 1.55;
    color: var(--fg-primary); flex: 1 1 300px; margin: 0;
}
.rc-banner__shocks { font-size: 12px; color: var(--fg-secondary); margin: 6px 0 0; }

/* Inter-regional map card (2026-09-05 owner revision): the map used to
   set its own height from the page width (~44% of it), which made the
   summary's first row very tall — capped instead; the SVG letterboxes
   inside the box, so the fill/aspect stay correct. */
#spillover-map-wrap svg.idn-region-map { width: 100%; height: 300px; }

/* Compact tile variant (Trade tab, 2026-09-05 owner revision). */
.kpi-tile--sm { padding: 10px 14px; border-radius: 10px; }
.kpi-tile--sm .kpi-tile__value { font-size: 18px; margin-top: 2px; }
.kpi-tile--sm .kpi-tile__label { font-size: 10px; }
.kpi-tile--sm .kpi-tile__nat { font-size: 10.5px; margin-top: 2px; }

.rc-tabbar-wrap {
    position: sticky; top: 0; z-index: 20;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-hairline);
    padding: 8px 0;
    margin-bottom: 18px;
}
.rc-tabbar { display: flex; gap: 4px; flex-wrap: wrap; }
.rc-tab {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; background: transparent; color: var(--fg-secondary);
    font-family: var(--font-text); font-size: 13px; font-weight: 600;
    padding: 7px 13px; border-radius: 9px; cursor: pointer;
}
.rc-tab svg { width: 14px; height: 14px; stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rc-tab:hover { background: var(--bg-subtle); color: var(--fg-primary); }
.rc-tab.active { background: var(--color-regional-green); color: #ffffff; }
.rc-tab:focus-visible { outline: 2px solid var(--color-regional-green); outline-offset: 2px; }

.rc-grid-main {
    display: grid; gap: 16px; align-items: start;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
@media (max-width: 980px) { .rc-grid-main { grid-template-columns: 1fr; } }

/* Sector-tab group-filter chips + comparison controls */
.rc-ctlrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rc-ctlrow label { font-size: 11.5px; font-weight: 600; color: var(--fg-secondary); }
.rc-fchip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border-subtle); background: var(--bg-canvas);
    color: var(--fg-secondary); cursor: pointer;
    font-family: var(--font-text); font-size: 11.5px; font-weight: 600;
    padding: 3.5px 11px; border-radius: 999px;
}
.rc-fchip .rc-fchip__dot { width: 8px; height: 8px; border-radius: 50%; }
.rc-fchip.on { background: var(--fg-primary); border-color: var(--fg-primary); color: #ffffff; }
.rc-fchip:focus-visible { outline: 2px solid var(--color-regional-green); outline-offset: 2px; }

/* National sub-line inside a kpi-tile (Income Distribution / Trade tiles) */
.kpi-tile__nat {
    font-size: 11px; color: var(--fg-muted); margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.kpi-tile__value--pos { color: var(--color-success); }
.kpi-tile__value--neg { color: var(--color-danger); }

/* APBD placeholder ribbon (replaces the generic warning flash there) */
.rc-ribbon {
    display: flex; gap: 10px; align-items: flex-start;
    background: rgba(199,120,0,0.08); border: 1px solid rgba(199,120,0,0.35);
    color: #7a5410; border-radius: 10px; padding: 10px 14px;
    font-size: 12.5px; margin-bottom: 14px;
}
.rc-ribbon svg { flex: none; margin-top: 2px; }

/* AI report + chat two-column layout */
.rc-grid-report {
    display: grid; gap: 16px; align-items: start;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
@media (max-width: 980px) { .rc-grid-report { grid-template-columns: 1fr; } }
.rc-chatpane { position: sticky; top: 62px; }
@media (max-width: 980px) { .rc-chatpane { position: static; } }
.rc-paper { padding: 26px 30px; }

/* Language toggle — a two-state segmented control showing BOTH languages
   with the active one filled in. The previous single button rendered only
   the language you were about to switch TO ("EN" while reading Indonesian),
   which reads as a status label rather than a control: users could not tell
   whether it meant "you are in English" or "switch to English", and several
   never found it at all. Both states visible removes the ambiguity. */
.ps-langtoggle {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    gap: 2px;
    border-radius: 99px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-hairline);
}
.ps-langtoggle__opt {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 2px 7px;
    border-radius: 99px;
    font-family: var(--font-text);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--fg-secondary);
    transition: color var(--dur-fast) var(--ease-standard),
                background var(--dur-fast) var(--ease-standard);
}
.ps-langtoggle__opt:hover { color: var(--fg-primary); }
.ps-langtoggle__opt--active {
    background: var(--bg-canvas);
    color: var(--color-action-blue);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    cursor: default;
}
.ps-langtoggle__opt--active:hover { color: var(--color-action-blue); }
/* Slightly larger on the unauthenticated (login) layout, where it is the
   only chrome on the page and has room to breathe. */
.ps-langtoggle--lg .ps-langtoggle__opt { font-size: 12px; padding: 4px 11px; }
/* On the sidebar brand row: pushed to the right edge, opposite the logo.
   flex-shrink guards the pill against being squeezed by the logo image on a
   narrow sidebar. */
.ps-langtoggle--brand { margin-left: auto; flex-shrink: 0; }

/* Main column */
.ps-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.ps-main__topbar-mobile {
    display: none;
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 18px;
    align-items: center;
    gap: 12px;
}
.ps-main__content {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-subtle);
}
/* Left-aligned rather than centred: a centred 1280px cap left ~220px of dead
   space between the sidebar and the content on a 1920px screen (~540px at
   2560px). Hugging the sidebar keeps that gap at 36px on any monitor; surplus
   width past the cap collects on the right. */
.ps-main__inner {
    padding: 32px 36px 80px;
    max-width: 1880px;
    margin: 0;
}
/* Simulation input pages (cge, cge_dynamic, gtap, gtap_dynamic): a fluid shock
   panel beside a fixed-width shock rail, so every extra pixel of window width
   goes to the panel and its tab strip instead of being split proportionally.
   The 1536px breakpoint matches the Tailwind `2xl` this replaced. */
.sim-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}
@media (min-width: 1536px) {
    .sim-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}

.ps-footer {
    border-top: 1px solid var(--border-hairline);
    padding: 10px 24px;
    text-align: center;
    font-size: 11px;
    color: var(--color-border-mid);
    background: var(--bg-canvas);
    flex-shrink: 0;
}

/* Sidebar mobile transitions — off-translate only on small screens */
.ps-sidebar { transform: translateX(0); transition: transform .2s ease-in-out; }
@media (max-width: 1023px) {
    .ps-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 50;
    }
    .ps-sidebar--off { transform: translateX(-100%); }
    .ps-main__topbar-mobile { display: flex; }
    .ps-main__inner { padding: 24px 18px 60px; }
}

/* Sidebar overlay */
.ps-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0,0,0,0.30);
}

/* ============================================================
   SPENDING GUARD — dedicated-shock conflict banner
   ============================================================ */

/* Injected above the submit button of any add-shock form that currently
   conflicts with a Govt-Spending scenario (see static/js/spending_guard.js). */
.spend-guard {
    background: #fff8ec;
    border: 1px solid #f5d9a8;
    border-radius: 12px;
    padding: 11px 14px;
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #8a5a00;
}
.spend-guard__msg { margin: 0; }
.spend-guard__actions { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.spend-guard__confirm { display: inline-flex; gap: 8px; align-items: center; }
.spend-guard__confirm[hidden] { display: none; }
.spend-guard__btn {
    border: 1px solid #e0c48a;
    background: #fff;
    color: #8a5a00;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.spend-guard__btn:hover { background: #fffdf8; }
.spend-guard__btn--danger { background: var(--color-danger, #b3261e); border-color: var(--color-danger, #b3261e); color: #fff; }
.spend-guard__btn--danger:hover { filter: brightness(1.08); }
.spend-guard__btn--ghost { border-color: transparent; background: transparent; font-weight: 500; }
.spend-guard__btn[disabled] { opacity: .6; cursor: default; }

/* Blocked submit buttons stay clickable — clicking is how the user gets the
   explanation — but read as unavailable. */
button[data-guard-blocked] { opacity: .55; }

/* ============================================================
   AI-rendered analysis typography
   ============================================================ */

/* Capped independently of the container: prose stays readable now that the
   content column runs to 1880px. */
#ai-rendered { font-size: 14px; line-height: 1.65; color: var(--fg-primary); max-width: 900px; }
#ai-rendered h1 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-action-blue);
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
    letter-spacing: -0.014em;
}
#ai-rendered h2 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fg-primary);
    margin: 1.5rem 0 0.5rem 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-hairline);
    line-height: 1.3;
}
#ai-rendered h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--fg-primary);
    margin: 1.25rem 0 0.5rem 0;
}
#ai-rendered p { margin: 0 0 0.85rem 0; }
#ai-rendered em { color: var(--fg-secondary); font-style: italic; display: block; margin-bottom: 1rem; }
#ai-rendered ul, #ai-rendered ol { margin: 0.5rem 0 1rem 1.5rem; padding: 0; }
#ai-rendered li { margin: 0.25rem 0; }
#ai-rendered strong { font-weight: 600; color: var(--fg-primary); }
#ai-rendered > *:first-child { margin-top: 0; }
#ai-rendered > *:last-child { margin-bottom: 0; }
#ai-rendered table {
    border-collapse: collapse;
    margin: 0.75rem 0 1.25rem 0;
    font-size: 13px;
}
#ai-rendered th, #ai-rendered td {
    border: 1px solid var(--border-hairline);
    padding: 6px 10px;
    text-align: left;
}
#ai-rendered th { background: rgba(0,113,227,0.06); font-weight: 600; }

/* ============================================================
   Page navigation progress bar
   ============================================================ */

#nav-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
}
#nav-progress::before {
    content: "";
    display: block;
    height: 100%;
    width: 30%;
    background: linear-gradient(
        90deg,
        rgba(0, 113, 227, 0) 0%,
        var(--color-action-blue) 50%,
        rgba(0, 113, 227, 0) 100%
    );
    box-shadow: 0 0 6px rgba(0, 113, 227, 0.5);
    transform: translateX(-100%);
}
#nav-progress.nav-progress--loading { opacity: 1; }
#nav-progress.nav-progress--loading::before { animation: nav-progress-sweep 1.2s ease-in-out infinite; }
@keyframes nav-progress-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* ============================================================
   FLASH / ALERTS
   ============================================================ */

.ps-flash {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    font-size: 13px;
    border: 1px solid;
    margin-bottom: 12px;
}
.ps-flash--info    { background: rgba(0,113,227,0.06); color: var(--color-action-blue); border-color: rgba(0,113,227,0.20); }
.ps-flash--success { background: rgba(10,135,84,0.06);  color: var(--color-success);     border-color: rgba(10,135,84,0.20); }
.ps-flash--warning { background: rgba(199,120,0,0.08);  color: var(--color-warning);     border-color: rgba(199,120,0,0.22); }
.ps-flash--error   { background: rgba(179,38,30,0.06); color: var(--color-danger);      border-color: rgba(179,38,30,0.22); }

/* ============================================================
   Data table — neutral, used by history & users screens
   ============================================================ */

.ps-table { width: 100%; border-collapse: collapse; }
.ps-table thead th {
    text-align: left;
    padding: 14px 24px;
    font-family: var(--font-text);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-border-mid);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border-hairline);
    background: var(--bg-canvas);
}
.ps-table tbody td {
    padding: 14px 24px;
    font-family: var(--font-text);
    font-size: 13px;
    color: var(--fg-primary);
    border-bottom: 1px solid var(--border-hairline);
    vertical-align: middle;
}
.ps-table tbody tr:last-child td { border-bottom: 0; }
.ps-table tbody tr:hover { background: var(--bg-subtle); }
.ps-table .mono { font-family: var(--font-mono); font-size: 12px; color: var(--fg-secondary); }
.ps-table .right { text-align: right; }
.ps-table a { color: var(--color-link-blue); font-weight: 500; }
.ps-table a:hover { opacity: 0.72; }

/* Status pills */
.ps-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 6px;
    font-family: var(--font-text);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}
.ps-pill--admin { background: #fff4d6; color: #8a6d00; }
.ps-pill--user  { background: #eef4fd; color: var(--color-link-blue); }
.ps-pill--ok    { background: rgba(10,135,84,0.10); color: var(--color-success); }
.ps-pill--off   { background: var(--bg-subtle); color: var(--fg-secondary); }
.ps-pill__dot   { width: 6px; height: 6px; border-radius: 50%; }
.ps-pill--ok .ps-pill__dot  { background: var(--color-success); }
.ps-pill--off .ps-pill__dot { background: var(--color-border-mid); }

/* Regional CGE -- inter-regional spillover map (Task 12).
 * Default fill is a neutral gray so the map reads sanely before the
 * results page's JS runs (progressive enhancement) -- it's overridden per
 * region via an inline style.fill set by JS, which always wins over this
 * class rule regardless of CSS specificity, so there's no fight between
 * the two. The home-region outline is a stroke, never a fill swap: fill
 * stays reserved for the diverging value scale (dataviz skill -- never
 * encode two channels with the same visual property).
 */
#spillover-map-wrap svg.idn-region-map { width: 100%; height: auto; display: block; }
.region-path {
    fill: var(--bg-subtle, #e5e7eb);
    stroke: #ffffff;
    stroke-width: 1;
    transition: fill 0.15s ease;
}
.region-group.is-home .region-path {
    stroke: var(--fg-primary, #111827);
    /* 4 -> 2 (2026-09-05): the thick outline swallowed small regions
       (DKI, Yogyakarta) and read as a fill of its own on the choropleth. */
    stroke-width: 2;
}

/* Print */
@media print {
    .no-print, nav, aside, footer, header { display: none !important; }
    main { padding: 0 !important; margin: 0 !important; }
}