/* ============================================================
   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;

    --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--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
   ============================================================ */

.tab-l1 {
    display: flex;
    gap: 0;
    padding: 0 24px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-subtle);
}
.tab-l1::-webkit-scrollbar { display: none; }

.tab-l1-btn {
    position: relative;
    padding: 12px 16px;
    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__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--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__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-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); }

/* 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);
}
.ps-main__inner {
    padding: 32px 48px 80px;
    max-width: 1280px;
    margin: 0 auto;
}
.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);
}

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

#ai-rendered { font-size: 14px; line-height: 1.65; color: var(--fg-primary); }
#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); }

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