/* 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%, color-mix(in oklab, var(--color-accent-500, #10b981) 5%, transparent), transparent);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #04080d;
    color: #ecfdf5;
    font-family: "Plus Jakarta Sans", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    /* #161 typography: the app pages use 1.6 (25.6px at 16px); this page was on 1.5
       (24px), so the two renderers had a different vertical rhythm for identical text. */
    line-height: 1.6;
}

.status-main {
    flex: 1;
    position: relative;
    z-index: 1;
    width: 100%;
    /* #161: 1080 was a bespoke width that predated the system, so /status's content edge (x=204)
       never lined up with the header or the app pages (x=104). 1280 + the same 24px gutter is the
       house column - the footer and the app pages already use max-w-7xl with px-6. The 84-row model
       table has min-width 820px and gains from the width rather than suffering. */
    max-width: 1280px;
    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: #34d399; margin-bottom: 8px;
}
.st-page-head h1 {
    margin: 0; font-size: clamp(28px, 4vw, 36px); line-height: 1.15; letter-spacing: -.02em;
}

/* ---- notice / error ---- */
.status-notice {
    margin: 16px 0; padding: 12px 16px; border-radius: 12px;
    background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); color: #a7f3d0;
}
.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;
    /* #195: the operational state used a hardcoded blue border while degraded
       and down already used semantic amber/rose. Operational is the brand
       state, so it follows the accent now (the page loads the app stylesheet,
       hence the accent vars). */
    border: 1px solid color-mix(in oklab, var(--color-accent-500, #10b981) 22%, transparent); 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: color-mix(in oklab, var(--color-accent-500, #10b981) 15%, transparent); color: var(--color-accent-300, #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: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 70%, transparent); 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: color-mix(in oklab, var(--color-accent-500, #10b981) 15%, transparent); stroke-width: 3; }
.st-ring-fill {
    fill: none; stroke: var(--color-accent-400, #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: var(--color-accent-300, #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 color-mix(in oklab, var(--color-accent-500, #10b981) 25%, transparent); background: rgba(6,14,20,.3);
    color: var(--color-accent-300, #6ee7b7); font-size: 13px; font-weight: 700;
    transition: border-color .2s, background .2s, transform .2s;
}
.st-refresh-btn:hover { border-color: var(--color-accent-400, #34d399); background: color-mix(in oklab, var(--color-accent-500, #10b981) 10%, transparent); }
.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 color-mix(in oklab, var(--color-accent-500, #10b981) 15%, transparent); 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: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 70%, transparent); font-size: 12px; font-weight: 600; }
.st-stat-icon { width: 19px; height: 19px; color: var(--color-accent-400, #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: var(--color-accent-500, #10b981); }
.st-spark-mint { stroke: var(--color-accent-400, #34d399); }
.st-spark-blue { stroke: #2dd4bf; }
.st-spark-cyan { stroke: #22d3ee; }

/* ---- daily usage strip ---- */
.st-daily { margin-top: 20px; }
.st-daily h2 {
    /* #161 hierarchy: the LAST of the three section headings still under the 16px body size. Its two
       siblings are already 17px. */
    margin: 0 0 12px; font-size: 17px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--color-accent-400, #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 color-mix(in oklab, var(--color-accent-500, #10b981) 15%, transparent); 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: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 70%, transparent); 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 {
    /* #161 hierarchy: this was 15px against a 16px body, i.e. the section heading rendered SMALLER
       than the text it introduced. 17px keeps it above the body while staying a compact uppercase
       label, which is what this element is. */
    margin: 0 0 6px; font-size: 17px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--color-accent-400, #34d399);
}
.st-history-desc, .st-models-desc { color: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 70%, transparent); 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: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 80%, transparent); }
.st-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.st-dot-green { background: var(--color-accent-500, #10b981); }
/* The amber state had a bar colour (st-bar-yellow, #f59e0b) but no legend dot,
   and the legend named only Healthy and Down - so a partial-outage day (issue
   #140: a down day with recorded healthy time) rendered amber with nothing
   explaining it. The label already existed in every language
   (T.partialDowntime). */
.st-dot-yellow { background: #f59e0b; }
.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 color-mix(in oklab, var(--color-accent-500, #10b981) 15%, transparent); 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: var(--color-accent-300, #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: var(--color-accent-500, #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 var(--color-accent-400, #34d399); outline-offset: 1px; }
.st-bar-labels { display: flex; justify-content: space-between; margin-top: 8px; color: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 55%, transparent); font-size: 11px; }

/* ---- models filter ---- */
.st-models-filter {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid color-mix(in oklab, var(--color-accent-500, #10b981) 20%, transparent); 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: var(--color-accent-400, #34d399); flex-shrink: 0; }
.st-models-filter input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: var(--color-accent-50, #ecfdf5); font-family: inherit;
    /* >=16px on phones: smaller computed sizes make mobile browsers
       auto-zoom the viewport on focus (issue #193 D1). Desktop keeps the
       original 13px. */
    font-size: 16px;
}
@media (min-width: 768px) {
    .st-models-filter input { font-size: 13px; }
}
.st-models-filter input::placeholder { color: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 60%, transparent); }
.st-models-filter:focus-within { border-color: var(--color-accent-400, #34d399); }

/* ---- table ---- */
.st-table-card {
    margin-top: 12px; border: 1px solid color-mix(in oklab, var(--color-accent-500, #10b981) 15%, transparent); 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: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 60%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--color-accent-500, #10b981) 15%, transparent); white-space: nowrap;
}
.st-table tbody td {
    padding: 12px 16px; border-bottom: 1px solid color-mix(in oklab, var(--color-accent-500, #10b981) 8%, transparent);
    vertical-align: top;
}
.st-table tbody tr:last-child td { border-bottom: none; }

.st-sortable {
    /* #161 round 28: padding:0 left the sort controls 17px tall - under the
       24px target floor, and a real control (not an inline prose link).
       min-height gives the floor; the negative margin keeps the header row
       the same visual height, so no layout shifts. */
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: none; cursor: pointer; padding: 0;
    min-height: 24px; margin-block: -4px;
    color: inherit; font-size: inherit; font-weight: inherit; text-transform: inherit;
    letter-spacing: inherit; font-family: inherit;
}
.st-sortable:hover { color: var(--color-accent-300, #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: 12px; font-weight: 800; white-space: nowrap; }
.st-badge-operational { background: color-mix(in oklab, var(--color-accent-500, #10b981) 18%, transparent); color: var(--color-accent-300, #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 {
    /* #161 round 28: 22x22 was 2px under the floor. */
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; margin-inline-start: 6px; border-radius: 6px;
    background: transparent; border: 1px solid color-mix(in oklab, var(--color-accent-500, #10b981) 20%, transparent); cursor: pointer;
    color: var(--color-accent-300, #6ee7b7); vertical-align: middle;
}
.st-expand:hover { background: color-mix(in oklab, var(--color-accent-500, #10b981) 10%, transparent); }
.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: var(--color-accent-50, #ecfdf5); }
.st-model-id { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 75%, transparent); }

.st-tier { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.st-tier-free { background: color-mix(in oklab, var(--color-accent-500, #10b981) 15%, transparent); color: var(--color-accent-300, #6ee7b7); }
.st-tier-paid { background: color-mix(in oklab, var(--color-accent-500, #10b981) 15%, transparent); color: #5eead4; }
.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: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 60%, transparent); font-size: 12px; }
.st-billing-v { font-weight: 700; color: var(--color-accent-50, #ecfdf5); font-variant-numeric: tabular-nums; }
.st-billing-note { color: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 65%, transparent); font-size: 12px; }

/* 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: var(--color-accent-400, #34d399); }
.st-detail-line { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.st-detail-k { color: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 60%, transparent); font-size: 12px; min-width: 70px; }
.st-detail-v { color: var(--color-accent-50, #ecfdf5); font-size: 12px; }

/* empty state */
.st-empty { padding: 32px 16px; text-align: center; }
.st-empty-title { font-size: 16px; font-weight: 800; }
.st-empty-desc { margin-top: 4px; color: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 70%, transparent); 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 color-mix(in oklab, var(--color-accent-500, #10b981) 15%, transparent);
    color: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 70%, transparent); font-size: 12px;
}
.st-pulse { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 70%, transparent); }
.st-pulse svg { width: 13px; height: 13px; color: var(--color-accent-400, #34d399); }
.st-pulse.is-active { color: var(--color-accent-300, #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 color-mix(in oklab, var(--color-accent-500, #10b981) 12%, transparent); 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: color-mix(in oklab, var(--color-accent-200, #a7f3d0) 55%, transparent);
        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). ---- */

/* #161: the brand face is Latin-only, so the localized pages must not be left
   to fall through to whatever the OS supplies. Same pattern as the landing's
   index.css: the token is redefined per language, and the family is set on body
   for the pages that do not use the utility classes. */
/* Match BOTH hooks: the app shell sets data-language, but the SSR status page
   sets only lang + dir (measured: /fa/status/ has lang=fa dir=rtl and NO
   data-language, while /fa/docs/ has all three). A data-language-only rule was
   dead on /status and would have left Persian on a Latin-only face - worse than
   the OS fallback it replaced. */
html[lang="fa"] body, html[data-language="fa"] body { font-family: "IranYekan", "Vazirmatn", Tahoma, sans-serif; }
html[lang="zh"] body, html[data-language="zh"] body { font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; }

/* #161 typography: the per-model metadata tier (billing keys, status/tier badges, billing notes)
   was 11px. Measured on /status: 450 elements at 11px, of which 425 were these four classes - the
   model table's own data at the page's smallest tier, i.e. the primary content rendered smallest.
   Lifted to 12px. The table HEADERS and the uppercase micro-labels stay at 11px: they are labels
   rather than data, and the rater did not flag them. Colours are untouched, and both 11px and 12px
   sit in the same "small text" band, so the AA requirement is 4.5:1 either way - these classes were
   already re-measured as passing, so enlarging them cannot regress contrast. */