/* Public status page (issue #87). Dark emerald theme matching the landing
   page; first-party only (no new CSP allowances, no external fonts/images).
   All layout uses logical sides so the rtl Persian shell flips cleanly. */
:root { color-scheme: dark; }

/* Aurora background layer: inline style attributes are blocked by the CSP
   (style-src 'self'), so the radial glow lives here as a class. */
.status-aurora {
    background: radial-gradient(60% 40% at 50% 0%, rgba(59, 130, 246, 0.05), transparent);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #04080d;
    color: #eff6ff;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.status-main {
    flex: 1;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 64px 24px 64px;
}

/* >=sm: the landing hero widens its top gap (sm:pt-24); mirror it here so
   the desktop shells keep the same rhythm. */
@media (min-width: 640px) {
    .status-main { padding-top: 96px; }
}

/* ---- page head ---- */
.st-page-head { margin-bottom: 24px; }
.st-kicker {
    font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #60a5fa; margin-bottom: 8px;
}
.st-page-head h1 {
    margin: 0; font-size: clamp(28px, 4.5vw, 40px); line-height: 1.15; letter-spacing: -.02em;
}

/* ---- notice / error ---- */
.status-notice {
    margin: 16px 0; padding: 12px 16px; border-radius: 12px;
    background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.3); color: #bfdbfe;
}
.status-error {
    margin: 16px 0; padding: 12px 16px; border-radius: 12px;
    background: rgba(244,63,94,.12); border: 1px solid rgba(244,63,94,.3); color: #fda4af;
}

/* ---- overall banner ---- */
.st-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
    border: 1px solid rgba(59,130,246,.22); border-radius: 16px;
    background: rgba(10,18,32,.6); padding: 20px 22px;
}
.st-banner.is-degraded { border-color: rgba(245,158,11,.35); }
.st-banner.is-down, .st-banner.is-error { border-color: rgba(244,63,94,.35); }
.st-banner-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.st-banner-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: rgba(16,185,129,.15); color: #6ee7b7;
}
.st-banner-icon svg { width: 26px; height: 26px; }
.st-banner.is-degraded .st-banner-icon { background: rgba(245,158,11,.15); color: #fcd34d; }
.st-banner.is-down .st-banner-icon, .st-banner.is-error .st-banner-icon { background: rgba(244,63,94,.15); color: #fda4af; }
.st-banner.is-unknown .st-banner-icon { background: rgba(148,163,184,.15); color: #cbd5e1; }
.st-banner-text { min-width: 0; }
.st-banner-title { font-size: 18px; font-weight: 800; line-height: 1.3; }
.st-banner-sub { margin-top: 2px; color: rgba(167,243,208,.7); font-size: 13px; }

.st-refresh-row { display: flex; align-items: center; gap: 14px; }
.st-ring { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.st-ring-svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.st-ring-track { fill: none; stroke: rgba(16,185,129,.15); stroke-width: 3; }
.st-ring-fill {
    fill: none; stroke: #34d399; stroke-width: 3; stroke-linecap: round;
    transition: stroke-dashoffset .3s linear;
}
.st-ring-val {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #6ee7b7; font-variant-numeric: tabular-nums;
}
.st-refresh-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(16,185,129,.25); background: rgba(6,14,20,.3);
    color: #6ee7b7; font-size: 13px; font-weight: 700;
    transition: border-color .2s, background .2s, transform .2s;
}
.st-refresh-btn:hover { border-color: #34d399; background: rgba(16,185,129,.1); }
.st-refresh-btn:active { transform: translateY(1px); }
.st-refresh-btn svg { width: 15px; height: 15px; }
.st-refresh-btn.is-loading svg { animation: st-spin 1s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* ---- stat cards ---- */
.st-stat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px;
}
.st-stat-card {
    border: 1px solid rgba(16,185,129,.15); border-radius: 14px;
    background: rgba(6,14,20,.6); padding: 16px 18px;
}
.st-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.st-stat-value { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.st-stat-label { margin-top: 4px; color: rgba(167,243,208,.7); font-size: 12px; font-weight: 600; }
.st-stat-icon { width: 19px; height: 19px; color: #34d399; flex-shrink: 0; }
.st-stat-spark { display: block; width: 100%; height: 44px; margin-top: 12px; }
.st-stat-spark[hidden] { display: none; }
.st-spark-green { stroke: #10b981; }
.st-spark-mint { stroke: #34d399; }
.st-spark-blue { stroke: #38bdf8; }
.st-spark-cyan { stroke: #22d3ee; }

/* ---- daily usage strip ---- */
.st-daily { margin-top: 20px; }
.st-daily h2 {
    margin: 0 0 12px; font-size: 15px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: #34d399;
}
.st-daily-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.st-daily-item {
    display: flex; flex-direction: column; gap: 4px;
    border: 1px solid rgba(16,185,129,.15); border-radius: 14px;
    background: rgba(6,14,20,.6); padding: 14px 16px;
}
.st-daily-val { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.st-daily-label { color: rgba(167,243,208,.7); font-size: 12px; font-weight: 600; }

/* ---- section headings (history + models) ---- */
.st-history-head, .st-models-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-top: 32px;
}
.st-history-head h2, .st-models-head h2 {
    margin: 0 0 6px; font-size: 15px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: #34d399;
}
.st-history-desc, .st-models-desc { color: rgba(167,243,208,.7); font-size: 13px; }

.st-legend { display: flex; align-items: center; gap: 16px; }
.st-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(167,243,208,.8); }
.st-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.st-dot-green { background: #10b981; }
.st-dot-red { background: #f43f5e; }
.st-dot-none { background: rgba(148,163,184,.35); }

/* ---- history card ---- */
.st-history-card {
    margin-top: 12px; border: 1px solid rgba(16,185,129,.15); border-radius: 14px;
    background: rgba(6,14,20,.6); padding: 16px 18px;
}
.st-history-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.st-history-row-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.st-history-row-name .st-dot { width: 8px; height: 8px; border-radius: 50%; }
.st-history-row-pct { font-size: 13px; font-weight: 800; color: #6ee7b7; font-variant-numeric: tabular-nums; }
.st-bars { display: flex; gap: 2px; height: 34px; align-items: stretch; }
.st-bar { flex: 1 1 0; min-width: 0; border-radius: 2px; }
.st-bar-green { background: #10b981; }
.st-bar-yellow { background: #f59e0b; }
.st-bar-red { background: #f43f5e; }
.st-bar-none { background: rgba(148,163,184,.18); }
.st-bar:focus-visible { outline: 2px solid #34d399; outline-offset: 1px; }
.st-bar-labels { display: flex; justify-content: space-between; margin-top: 8px; color: rgba(167,243,208,.55); font-size: 11px; }

/* ---- models filter ---- */
.st-models-filter {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid rgba(16,185,129,.2); border-radius: 10px;
    background: rgba(6,14,20,.3); padding: 0 12px; height: 40px; min-width: 220px;
}
.st-models-filter svg { width: 15px; height: 15px; color: #34d399; flex-shrink: 0; }
.st-models-filter input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: #ecfdf5; font-size: 13px; font-family: inherit;
}
.st-models-filter input::placeholder { color: rgba(167,243,208,.5); }
.st-models-filter:focus-within { border-color: #34d399; }

/* ---- table ---- */
.st-table-card {
    margin-top: 12px; border: 1px solid rgba(16,185,129,.15); border-radius: 14px;
    background: rgba(6,14,20,.6); overflow: hidden;
}
.st-table-wrap { overflow-x: auto; }
.st-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-table thead th {
    text-align: start; padding: 12px 16px; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; color: rgba(167,243,208,.6);
    border-bottom: 1px solid rgba(16,185,129,.15); white-space: nowrap;
}
.st-table tbody td {
    padding: 12px 16px; border-bottom: 1px solid rgba(16,185,129,.08);
    vertical-align: top;
}
.st-table tbody tr:last-child td { border-bottom: none; }

.st-sortable {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: none; cursor: pointer; padding: 0;
    color: inherit; font-size: inherit; font-weight: inherit; text-transform: inherit;
    letter-spacing: inherit; font-family: inherit;
}
.st-sortable:hover { color: #6ee7b7; }
.st-sortable .st-chevron { width: 12px; height: 12px; transition: transform .2s; }
.st-sortable[data-dir="asc"] .st-chevron { transform: rotate(180deg); }
.st-sortable[data-dir="desc"] .st-chevron { transform: rotate(0deg); }
.st-sortable[data-dir=""] .st-chevron { opacity: .4; }

/* badges */
.st-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.st-badge-operational { background: rgba(16,185,129,.18); color: #6ee7b7; }
.st-badge-degraded { background: rgba(245,158,11,.18); color: #fcd34d; }
.st-badge-down { background: rgba(244,63,94,.18); color: #fda4af; }
.st-badge-unknown { background: rgba(148,163,184,.18); color: #cbd5e1; }

.st-cell-status { min-width: 120px; }
.st-reason { display: block; margin-top: 4px; color: #fda4af; font-size: 11px; max-width: 220px; }
.st-expand {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-inline-start: 6px; border-radius: 6px;
    background: transparent; border: 1px solid rgba(16,185,129,.2); cursor: pointer;
    color: #6ee7b7; vertical-align: middle;
}
.st-expand:hover { background: rgba(16,185,129,.1); }
.st-expand .st-chevron { width: 12px; height: 12px; transition: transform .2s; }
.st-expand[aria-expanded="true"] .st-chevron { transform: rotate(180deg); }

.st-model-name { font-weight: 700; color: #ecfdf5; }
.st-model-id { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: rgba(167,243,208,.75); }

.st-tier { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.st-tier-free { background: rgba(16,185,129,.15); color: #6ee7b7; }
.st-tier-paid { background: rgba(56,189,248,.15); color: #7dd3fc; }
.st-tier-premium { background: rgba(245,158,11,.15); color: #fcd34d; }
.st-tier-standard { background: rgba(148,163,184,.15); color: #cbd5e1; }
.st-tier-other { background: rgba(148,163,184,.15); color: #cbd5e1; }

.st-billing { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.st-billing-pair { display: inline-flex; align-items: baseline; gap: 4px; }
.st-billing-k { color: rgba(167,243,208,.6); font-size: 11px; }
.st-billing-v { font-weight: 700; color: #ecfdf5; font-variant-numeric: tabular-nums; }
.st-billing-note { color: rgba(167,243,208,.5); font-size: 11px; }

/* detail (downtime) rows */
.st-detail-row td { background: rgba(4,8,13,.5); padding: 14px 16px; }
.st-detail { display: flex; flex-direction: column; gap: 12px; }
.st-detail-block { display: flex; flex-direction: column; gap: 6px; }
.st-detail-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #34d399; }
.st-detail-line { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.st-detail-k { color: rgba(167,243,208,.6); font-size: 12px; min-width: 70px; }
.st-detail-v { color: #ecfdf5; font-size: 12px; }

/* empty state */
.st-empty { padding: 32px 16px; text-align: center; }
.st-empty-title { font-size: 15px; font-weight: 800; }
.st-empty-desc { margin-top: 4px; color: rgba(167,243,208,.7); font-size: 13px; }

/* table foot */
.st-table-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px; border-top: 1px solid rgba(16,185,129,.15);
    color: rgba(167,243,208,.7); font-size: 12px;
}
.st-pulse { display: inline-flex; align-items: center; gap: 6px; color: rgba(167,243,208,.7); }
.st-pulse svg { width: 13px; height: 13px; color: #34d399; }
.st-pulse.is-active { color: #6ee7b7; }
.st-pulse.is-active svg { animation: st-pop .4s ease; }
@keyframes st-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---- responsive ---- */
@media (max-width: 900px) {
    .st-stat-grid, .st-daily-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .st-stat-grid, .st-daily-grid { grid-template-columns: 1fr; }
    .st-banner { flex-direction: column; align-items: stretch; }
    .st-refresh-row { justify-content: space-between; }
    .st-models-filter { min-width: 0; width: 100%; }
    /* collapse table to stacked cards on very small screens */
    .st-table thead { display: none; }
    .st-table, .st-table tbody, .st-table tr, .st-table td { display: block; width: 100%; }
    .st-table tbody tr { border-bottom: 1px solid rgba(16,185,129,.12); padding: 8px 0; }
    .st-table tbody td { border-bottom: none; padding: 4px 16px; }
    .st-table tbody td::before {
        content: attr(data-label); display: block; font-size: 10px; font-weight: 800;
        text-transform: uppercase; letter-spacing: .06em; color: rgba(167,243,208,.55);
        margin-bottom: 2px;
    }
    .st-detail-row td { padding: 4px 16px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .st-ring-fill, .st-refresh-btn, .st-sortable .st-chevron, .st-expand .st-chevron,
    .st-pulse.is-active svg { transition: none; animation: none; }
    .st-refresh-btn.is-loading svg { animation: none; }
}

/* ---- theme sync (owner round): light mode via .light (theme-sync.js) or
       the OS preference; blue chrome on the paper base. Health bars keep
       their semantic colors (green/amber/red). ---- */
@media (prefers-color-scheme: light) {
    :root:not(.light) { color-scheme: light; }
    html:not(.light) body { background: #f2f7f4; color: #0f172a; }
    html:not(.light) .status-aurora { background: radial-gradient(60% 40% at 50% 0%, rgba(37,99,235,.07), transparent); }
    html:not(.light) .st-kicker { color: #2563eb; }
    html:not(.light) .status-notice { background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.28); color: #1e40af; }
    html:not(.light) .st-banner { background: rgba(255,255,255,.75); border-color: rgba(37,99,235,.22); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
    html:not(.light) .st-banner.is-degraded { border-color: rgba(217,119,6,.4); }
    html:not(.light) .st-banner.is-down, html:not(.light) .st-banner.is-error { border-color: rgba(225,29,72,.4); }
}
html.light { color-scheme: light; }
html.light body { background: #f2f7f4; color: #0f172a; }
html.light .status-aurora { background: radial-gradient(60% 40% at 50% 0%, rgba(37,99,235,.07), transparent); }
html.light .st-kicker { color: #2563eb; }
html.light .status-notice { background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.28); color: #1e40af; }
html.light .st-banner { background: rgba(255,255,255,.75); border-color: rgba(37,99,235,.22); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
html.light .st-banner.is-degraded { border-color: rgba(217,119,6,.4); }
html.light .st-banner.is-down, html.light .st-banner.is-error { border-color: rgba(225,29,72,.4); }