/* ═══════════════════════════════════════════════════════════════════
   Zaravan OS — interface
   ═══════════════════════════════════════════════════════════════════

   Dark, right-to-left, Persian, and entirely self-contained. There is not
   one external request in this file: no CDN, no web font, no icon set. That
   is a hard requirement (§6.7), and it is also why the Content-Security-
   Policy can be as strict as it is — 'self' genuinely covers everything.

   Fonts come from the system stack. Vazirmatn and IRANSans are named first
   because most Iranian users already have one installed; Tahoma is the
   universal fallback and renders Persian correctly everywhere, including on
   Windows where it is the default UI face.

   Colour is a language here, not decoration:
     ok    green   the site is answering
     warn  amber   something needs attention today
     bad   red     something needs attention now
     idle  grey    we do not know, or nobody is watching
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Surfaces, darkest to lightest */
    --bg:          #0b0f14;
    --surface:     #111820;
    --surface-2:   #0d141c;
    --raised:      #16202b;
    --border:      #1e2833;
    --border-soft: #182029;

    /* Text */
    --text:        #e6edf3;
    --text-dim:    #9fb0c3;
    --text-faint:  #6b7d92;

    /* Status */
    --ok:          #3fb950;
    --ok-dim:      #1c3d24;
    --warn:        #d29922;
    --warn-dim:    #3d3117;
    --bad:         #f85149;
    --bad-dim:     #45201f;
    --idle:        #56657a;
    --idle-dim:    #212b36;
    --accent:      #58a6ff;
    --accent-dim:  #17324f;

    --radius:      14px;
    --radius-sm:   9px;
    --gap:         20px;

    --font: "Vazirmatn", "Vazir", "IRANSans", "IRANYekan", "Shabnam",
            Tahoma, "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", "Fira Mono", "Cascadia Mono", Consolas,
            "DejaVu Sans Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.75;
    direction: rtl;
    text-align: right;
    /* A quiet gradient rather than a flat field — enough depth that the
       cards read as raised without anything glowing. */
    background-image:
        radial-gradient(900px 500px at 85% -10%, #101d2b 0%, transparent 70%),
        radial-gradient(700px 400px at 10% 0%, #0f1a24 0%, transparent 60%);
    background-attachment: fixed;
}

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* Keyboard users get to the content without tabbing the whole header. */
.skip {
    position: absolute; inset-inline-start: -9999px; top: 0;
    background: var(--accent); color: #06121f; padding: 10px 18px;
    border-radius: 0 0 var(--radius-sm) 0; z-index: 100;
}
.skip:focus { inset-inline-start: 0; }

/* ── Header ──────────────────────────────────────────────────────── */

.topbar {
    border-bottom: 1px solid var(--border);
    background: rgba(11, 15, 20, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: sticky; top: 0; z-index: 40;
}

.topbar__inner {
    display: flex; align-items: center; gap: var(--gap);
    min-height: 66px; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }

.brand__mark {
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    background: linear-gradient(140deg, var(--accent), #1f6feb 55%, #164a8f);
    box-shadow: 0 0 0 1px #2a4a6d inset, 0 3px 14px rgba(88, 166, 255, .28);
    position: relative;
}
/* A pulse mark, drawn rather than imported. */
.brand__mark::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(to right, transparent 22%, #cfe6ff 22%, #cfe6ff 30%, transparent 30%),
        linear-gradient(to right, transparent 45%, #cfe6ff 45%, #cfe6ff 53%, transparent 53%);
    background-size: 100% 32%, 100% 58%;
    background-position: 0 60%, 0 30%;
    background-repeat: no-repeat;
    opacity: .9;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.3; }
.brand__text strong { font-size: 15px; font-weight: 700; }
.brand__text small  { font-size: 11px; color: var(--text-faint); }

.mainnav { display: flex; gap: 4px; margin-inline-start: 8px; }
.mainnav a {
    color: var(--text-dim); text-decoration: none; font-size: 14px;
    padding: 7px 14px; border-radius: var(--radius-sm);
}
.mainnav a:hover { color: var(--text); background: var(--raised); }

.switcher { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; flex-wrap: wrap; }

.switcher__current,
.switcher__link {
    display: flex; flex-direction: column; line-height: 1.25;
    padding: 7px 14px; border-radius: var(--radius-sm);
    font-size: 13px; text-decoration: none;
}
.switcher__current { background: var(--raised); border: 1px solid var(--border); color: var(--text); }
.switcher__link    { color: var(--text-dim); border: 1px solid transparent; }
.switcher__link:hover { color: var(--text); border-color: var(--border); background: var(--surface-2); }
.switcher__current small,
.switcher__link small { font-size: 10px; color: var(--text-faint); }

.switcher__logout button {
    background: none; border: 1px solid transparent; color: var(--text-faint);
    font-family: inherit; font-size: 13px; cursor: pointer;
    padding: 7px 12px; border-radius: var(--radius-sm);
}
.switcher__logout button:hover { color: var(--bad); border-color: var(--bad-dim); }

/* ── Layout ──────────────────────────────────────────────────────── */

main { padding: 28px 0 64px; display: flex; flex-direction: column; gap: var(--gap); }

.footer { border-top: 1px solid var(--border); padding: 18px 0 30px; }
.footer__inner {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 12px; color: var(--text-faint);
}
.footer__age { margin-inline-start: auto; }
.footer__degraded { color: var(--warn); }

/* Pages with no session: login, 404, 500. */
.bare {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
}
.bare__inner { width: min(400px, 100%); text-align: center; }
.bare__brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 28px; }
.bare__brand strong { font-size: 17px; }
.bare__brand small  { font-size: 12px; color: var(--text-faint); }

/* ── Status dots and badges ──────────────────────────────────────── */

.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot--ok   { background: var(--ok);   box-shadow: 0 0 0 3px var(--ok-dim); }
.dot--warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-dim); }
.dot--bad  { background: var(--bad);  box-shadow: 0 0 0 3px var(--bad-dim); }
.dot--idle { background: var(--idle); box-shadow: 0 0 0 3px var(--idle-dim); }

/* A live outage is the one thing on the page allowed to move. */
.dot--bad { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--bad-dim); }
    50%      { box-shadow: 0 0 0 6px rgba(248, 81, 73, .12); }
}
@media (prefers-reduced-motion: reduce) {
    .dot--bad { animation: none; }
}

.badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 11.5px; line-height: 1.7; white-space: nowrap;
    border: 1px solid transparent;
}
.badge--ok    { background: var(--ok-dim);   color: var(--ok);     border-color: #245c30; }
.badge--warn  { background: var(--warn-dim); color: var(--warn);   border-color: #5c4a1c; }
.badge--bad   { background: var(--bad-dim);  color: var(--bad);    border-color: #6b2b28; }
.badge--idle,
.badge--muted { background: var(--idle-dim); color: var(--text-faint); border-color: var(--border); }
.badge--info  { background: var(--accent-dim); color: var(--accent); border-color: #24507d; }
.badge--flag  { background: var(--warn-dim); color: var(--warn); border-color: #5c4a1c; font-family: var(--mono); }

/* ── Summary strip ───────────────────────────────────────────────── */

.summary { display: flex; gap: 12px; flex-wrap: wrap; }

.summary__card {
    flex: 1 1 130px;
    display: flex; flex-direction: column; gap: 2px;
    padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); text-decoration: none; color: inherit;
}
a.summary__card:hover { border-color: #2b3947; background: var(--raised); }
.summary__card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

.summary__number { font-size: 27px; font-weight: 700; line-height: 1.2; }
.summary__label  { font-size: 12px; color: var(--text-faint); }

.summary__card--ok   .summary__number { color: var(--ok); }
.summary__card--warn .summary__number { color: var(--warn); }
.summary__card--bad  .summary__number { color: var(--bad); }
.summary__card--idle .summary__number { color: var(--text-faint); }

/* ── Site list ───────────────────────────────────────────────────── */

.section-title {
    font-size: 13px; font-weight: 600; color: var(--text-faint);
    margin: 8px 0 -6px;
}

.sites, .incidents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sites--quiet { opacity: .72; }
.sites--quiet:hover { opacity: 1; }

.site {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.site:hover { border-color: #2b3947; }
.site--bad  { border-inline-start: 3px solid var(--bad); }
.site--warn { border-inline-start: 3px solid var(--warn); }
.site--idle { border-inline-start: 3px solid var(--idle); }

.site__link {
    display: grid; align-items: center; gap: 14px;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    padding: 13px 18px; text-decoration: none; color: inherit;
}

.site__identity { display: flex; flex-direction: column; min-width: 0; }
.site__domain {
    font-family: var(--mono); font-size: 14px; direction: ltr; text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site__label { font-size: 11.5px; color: var(--text-faint); }

.site__status { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

.site__metric { text-align: center; min-width: 62px; font-size: 15px; }
.site__metric strong { font-weight: 700; }
.site__metric small  { font-size: 10px; color: var(--text-faint); margin-inline-start: 2px; }

.site__age { font-size: 11.5px; color: var(--text-faint); min-width: 88px; text-align: end; }

.site__error {
    margin: 0; padding: 9px 18px 12px;
    font-size: 12.5px; color: var(--text-dim);
    border-top: 1px solid var(--border-soft); background: var(--surface-2);
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

.score { font-weight: 700; }
.score--excellent, .score--ok  { color: var(--ok); }
.score--good                   { color: var(--ok); }
.score--warning, .score--warn  { color: var(--warn); }
.score--critical, .score--bad  { color: var(--bad); }
.score--idle                   { color: var(--text-faint); }

/* ── Incident list ───────────────────────────────────────────────── */

.incident {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.incident--bad  { border-inline-start: 3px solid var(--bad); }
.incident--warn { border-inline-start: 3px solid var(--warn); }
.incident--info { border-inline-start: 3px solid var(--accent); }
.incident--idle { border-inline-start: 3px solid var(--idle); }
.incident:not(.is-active) { opacity: .68; }
.incident:hover { border-color: #2b3947; opacity: 1; }

.incident__link {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px; align-items: start; padding: 14px 18px;
    text-decoration: none; color: inherit;
}
.incident__marker { padding-top: 7px; }
.incident__body   { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.incident__head   { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.incident__id     { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.incident__title  { font-size: 14.5px; font-weight: 600; }
.incident__meta   { font-size: 12px; color: var(--text-faint); display: flex; gap: 6px; flex-wrap: wrap; }
.incident__cause  { font-size: 12.5px; color: var(--text-dim); }
.incident__badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Page header ─────────────────────────────────────────────────── */

.crumbs { font-size: 12.5px; color: var(--text-faint); display: flex; gap: 8px; }

.page-head {
    display: flex; gap: var(--gap); align-items: flex-start; flex-wrap: wrap;
    padding: 20px 22px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.page-head--bad  { border-inline-start: 3px solid var(--bad); }
.page-head--warn { border-inline-start: 3px solid var(--warn); }
.page-head--ok   { border-inline-start: 3px solid var(--ok); }
.page-head--idle { border-inline-start: 3px solid var(--idle); }

.page-head__main  { flex: 1 1 320px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.page-head__title { margin: 0; font-size: 20px; font-weight: 700; }
.page-head__sub   { margin: 0; font-size: 12.5px; color: var(--text-faint); }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sep { color: var(--text-faint); }
.mono { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--text-faint); }

/* ── Buttons and links ───────────────────────────────────────────── */

.btn {
    display: inline-block; padding: 9px 18px; border-radius: var(--radius-sm);
    background: var(--accent); color: #06121f; font-weight: 700; font-size: 13.5px;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    font-family: inherit;
}
.btn:hover { background: #79b8ff; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); font-weight: 500; }
.btn--ghost:hover { background: var(--raised); border-color: #2b3947; }
.btn--block { display: block; width: 100%; }

.link { color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }

.pager { display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--text-faint); }

/* ── Cards ───────────────────────────────────────────────────────── */

.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 22px;
}
.card__title    { margin: 0 0 14px; font-size: 14.5px; font-weight: 600; }
.card__subtitle { margin: 22px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--text-faint); }
.card__body     { margin: 0; color: var(--text-dim); font-size: 14px; }
.card__note     { margin: -8px 0 14px; font-size: 12px; }

.notice {
    padding: 13px 18px; border-radius: var(--radius-sm); font-size: 13.5px;
    border: 1px solid var(--border); background: var(--surface-2);
}
.notice--warn { border-color: #5c4a1c; background: var(--warn-dim); color: #f0d190; }
.notice--ok   { border-color: #245c30; background: var(--ok-dim);   color: #9fe0ab; }
.notice--bad  { border-color: #6b2b28; background: var(--bad-dim);  color: #ffb3ae; }

.empty { padding: 48px 20px; text-align: center; color: var(--text-faint); }
.empty__title { font-size: 15px; margin: 0 0 12px; }

/* ── Facts grid ──────────────────────────────────────────────────── */

.facts {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.fact {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 13px 16px;
    display: flex; flex-direction: column; gap: 2px;
}
.fact__label { font-size: 11.5px; color: var(--text-faint); }
.fact__value { font-size: 15px; font-weight: 600; }

/* ── The four-layer problem block (§12) ──────────────────────────── */

.problem {
    background: var(--surface); border: 1px solid var(--border);
    border-inline-start: 3px solid var(--bad);
    border-radius: var(--radius); padding: 20px 22px;
}
.problem--warn { border-inline-start-color: var(--warn); }
.problem--idle { border-inline-start-color: var(--idle); }
.problem__title { margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.problem__block { margin-bottom: 14px; }
.problem__block p { margin: 3px 0 0; color: var(--text-dim); font-size: 14px; }
.problem__label { font-size: 11.5px; color: var(--text-faint); }

/* Layer 2 is folded away, never removed. */
.problem__technical summary {
    cursor: pointer; font-size: 12.5px; color: var(--text-faint);
    padding: 5px 0; user-select: none;
}
.problem__technical summary:hover { color: var(--text-dim); }
.problem__technical pre,
.timeline__detail pre {
    margin: 8px 0 0; padding: 13px 15px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px; color: var(--text-dim); line-height: 1.7;
    direction: ltr; text-align: left;
    white-space: pre-wrap; word-break: break-word;
    overflow-x: auto;
}

/* ── Pulse: gauge and headline stats ─────────────────────────────── */

.pulse {
    display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 22px;
}
.pulse__gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.pulse__caption { font-size: 12px; color: var(--text-faint); display: flex; gap: 6px; align-items: baseline; }
.pulse__stats {
    flex: 1 1 340px; display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat__label { font-size: 11.5px; color: var(--text-faint); }
.stat__value { font-size: 21px; font-weight: 700; }
.stat__value small { font-size: 11px; color: var(--text-faint); margin-inline-start: 3px; }

/* ── Health factors ──────────────────────────────────────────────── */

.factors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.factor {
    display: flex; gap: 12px; align-items: baseline;
    padding: 9px 13px; background: var(--surface-2);
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    font-size: 13.5px;
}
.factor__delta {
    font-family: var(--mono); font-weight: 700; color: var(--bad);
    min-width: 40px; text-align: center;
}
.factor__label   { flex: 1; }
.factor__context { font-size: 12px; color: var(--text-faint); font-family: var(--mono); }

/* ── State transitions ───────────────────────────────────────────── */

.transitions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.transition {
    display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
    padding: 9px 13px; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border-soft);
    font-size: 13px;
}
.transition--bad  { border-inline-start: 2px solid var(--bad); }
.transition--warn { border-inline-start: 2px solid var(--warn); }
.transition--ok   { border-inline-start: 2px solid var(--ok); }
.transition__when   { color: var(--text-faint); font-size: 12px; min-width: 96px; }
.transition__states { color: var(--text-dim); }
.transition__reason { color: var(--text); }

/* ── Timeline ────────────────────────────────────────────────────── */

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
    content: ""; position: absolute; top: 8px; bottom: 8px;
    inset-inline-start: 62px; width: 1px; background: var(--border);
}
.timeline__item {
    display: grid; grid-template-columns: 52px 14px minmax(0, 1fr);
    gap: 10px; align-items: start; padding: 7px 0; position: relative;
}
.timeline__time { font-size: 12px; color: var(--text-faint); padding-top: 2px; }
.timeline__dot {
    width: 9px; height: 9px; border-radius: 50%; margin-top: 8px;
    background: var(--idle); box-shadow: 0 0 0 3px var(--surface);
    justify-self: center;
}
.timeline__item--bad  .timeline__dot { background: var(--bad); }
.timeline__item--warn .timeline__dot { background: var(--warn); }
.timeline__item--ok   .timeline__dot { background: var(--ok); }
.timeline__body    { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.timeline__type    { font-size: 11px; color: var(--text-faint); }
.timeline__message { font-size: 13.5px; }
.timeline__detail summary {
    cursor: pointer; font-size: 11.5px; color: var(--text-faint); padding: 3px 0;
}

/* ── Change journal ──────────────────────────────────────────────── */

.changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.change {
    display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
    padding: 10px 13px; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border-soft);
    font-size: 13px;
}
/* The prime suspect: close enough in time to be the thing that broke it. */
.change--suspect { border-color: #5c4a1c; background: var(--warn-dim); }
.change__when     { color: var(--text-faint); font-size: 12px; min-width: 130px; }
.change__what     { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; flex: 1; }
.change__category { color: var(--text-faint); font-size: 12px; }
.change__subject  { font-weight: 600; }
.change__version  { font-size: 12px; color: var(--text-dim); }
.change__actor    { font-size: 11.5px; color: var(--text-faint); }

.children { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.children li { background: var(--surface-2); border: 1px solid var(--border-soft);
               border-radius: var(--radius-sm); padding: 5px 12px; font-size: 12.5px; }

/* ── Charts ──────────────────────────────────────────────────────── */

.chart { width: 100%; height: auto; display: block; }
.chart--line { margin-top: 4px; }

.bar        { fill: var(--idle); }
.bar--ok    { fill: var(--ok); }
.bar--warn  { fill: var(--warn); }
.bar--bad   { fill: var(--bad); }
/* No data is drawn as a hollow slot: the honest shape of a gap. */
.bar--empty { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }

.axis { fill: var(--text-faint); font-size: 9px; font-family: var(--font); }

.area { fill: rgba(88, 166, 255, .10); stroke: none; }
.line { fill: none; stroke: var(--accent); stroke-width: 1.8;
        stroke-linejoin: round; stroke-linecap: round; }
.chart circle.dot { fill: var(--accent); }

.gauge { width: 132px; height: 132px; }
.gauge__track { fill: none; stroke: var(--border); stroke-width: 9; stroke-linecap: round; }
.gauge__value { fill: none; stroke: var(--idle); stroke-width: 9; stroke-linecap: round;
                transition: stroke-dasharray .6s ease; }
.gauge--ok   .gauge__value { stroke: var(--ok); }
.gauge--warn .gauge__value { stroke: var(--warn); }
.gauge--bad  .gauge__value { stroke: var(--bad); }
.gauge__number { fill: var(--text); font-size: 30px; font-weight: 700; font-family: var(--font); }

.hist { display: flex; flex-direction: column; gap: 5px; }
.hist__row   { display: grid; grid-template-columns: 96px minmax(0, 1fr) 54px;
               gap: 10px; align-items: center; font-size: 12px; }
.hist__label { color: var(--text-faint); }
.hist__track { background: var(--surface-2); border-radius: 4px; height: 15px; overflow: hidden; }
.hist__bar   { display: block; height: 100%; background: var(--accent); opacity: .75; border-radius: 4px; }
.hist__count { color: var(--text-dim); text-align: end; font-family: var(--mono); font-size: 11px; }

/* ── Actions and forms inside cards ──────────────────────────────── */

.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions form { display: inline-flex; gap: 8px; align-items: center; margin: 0; }

.inline-form {
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); padding: 8px 12px;
}
.inline-form__label { font-size: 12px; color: var(--text-faint); }
.inline-form select {
    background: var(--bg); color: var(--text); font-family: inherit; font-size: 13px;
    border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px;
}
.inline-form select:focus { outline: none; border-color: var(--accent); }

/* The pair code: meant to be read aloud and typed, so it is large,
   monospaced and widely spaced. */
.paircode {
    margin: 6px 0 4px; padding: 18px 22px; text-align: center;
    background: var(--surface-2); border: 1px dashed var(--accent);
    border-radius: var(--radius-sm);
    font-size: 27px; font-weight: 700; letter-spacing: 5px;
    color: var(--accent); user-select: all;
}

/* ── Login and message pages ─────────────────────────────────────── */

.login {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 28px 26px;
    display: flex; flex-direction: column; gap: 16px; text-align: right;
}
.login__title { margin: 0; font-size: 17px; font-weight: 700; text-align: center; }
.login__error {
    margin: 0; padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--bad-dim); border: 1px solid #6b2b28;
    color: #ffb3ae; font-size: 13px;
}
.login__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.login__field span { color: var(--text-faint); }
.login__field input {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 11px 14px;
    color: var(--text); font-family: var(--mono); font-size: 15px;
}
.login__field input:focus { outline: none; border-color: var(--accent);
                            box-shadow: 0 0 0 3px var(--accent-dim); }

.message { text-align: center; display: flex; flex-direction: column; gap: 14px; }
.message__title { margin: 0; font-size: 19px; }
.message__body  { margin: 0; color: var(--text-faint); font-size: 14px; }

/* ── The public passport (§5) ────────────────────────────────────── */
/*
   Read as a certificate, not a dashboard. It gets shown to somebody else's
   client, so it is calmer and more formal than the rest of the interface.
*/

.bare__inner--wide { width: min(560px, 100%); }

.passport {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 32px 28px; text-align: center;
    position: relative; overflow: hidden;
}
.passport::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
    background: linear-gradient(to left, var(--ok), var(--accent));
}

.passport__head { margin-bottom: 26px; }
.passport__seal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-bottom: 12px;
    border-radius: 50%; background: var(--ok-dim); color: var(--ok);
    border: 1px solid #245c30; font-size: 21px;
}
.passport__eyebrow { margin: 0 0 4px; font-size: 12px; color: var(--ok); letter-spacing: .5px; }
.passport__domain  { margin: 0 0 10px; font-size: 21px; font-weight: 700; word-break: break-all; }
.passport__claim   { margin: 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.9; }

.passport__facts {
    display: grid; gap: 10px; margin: 0 0 24px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.passport__fact {
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); padding: 12px 14px; text-align: center;
}
.passport__fact dt { font-size: 11.5px; color: var(--text-faint); margin-bottom: 3px; }
.passport__fact dd { margin: 0; font-size: 14.5px; font-weight: 600; }

.tone-ok   { color: var(--ok); }
.tone-warn { color: var(--warn); }
.tone-bad  { color: var(--bad); }
.tone-idle { color: var(--text-faint); }

.passport__stamps h2 { font-size: 13px; color: var(--text-faint); margin: 0 0 12px; font-weight: 600; }

.stamps { list-style: none; margin: 0 0 24px; padding: 0;
          display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.stamp {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 12px 14px; min-width: 92px;
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
}
.stamp__icon  { font-size: 21px; line-height: 1.2; }
.stamp__label { font-size: 12px; font-weight: 600; }
.stamp__date  { font-size: 10.5px; color: var(--text-faint); }

.passport__foot { border-top: 1px solid var(--border-soft); padding-top: 18px; }
.passport__code {
    margin: 0 0 10px; font-size: 15px; letter-spacing: 2px;
    color: var(--accent); user-select: all;
}
/* Saying what this does not prove is what makes the rest believable. */
.passport__note { margin: 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.9; }

.verify-form {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px 22px; margin-top: 18px;
    display: flex; flex-direction: column; gap: 14px; text-align: right;
}
.verify-form__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.verify-form__field span { color: var(--text-faint); }
.verify-form__field input {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px 14px;
    color: var(--text); font-family: var(--mono); font-size: 16px;
    letter-spacing: 2px; text-align: center;
}
.verify-form__field input:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}

.public-foot { margin-top: 22px; font-size: 11.5px; color: var(--text-faint); }

/* ── The monthly report (§15) ────────────────────────────────────── */
/*
   Carries the designer's brand, not ours: --brand is set inline from the
   stored colour and everything accent-coloured follows it. Printed and handed
   to a client, so the print block below matters as much as the screen one.
*/

.report { --brand: var(--accent); text-align: right; }

.report__head { text-align: center; margin-bottom: 28px; }
.report__brand {
    margin: 0 0 6px; font-size: 15px; font-weight: 700;
    color: var(--brand); letter-spacing: .3px;
}
.report__title { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.report__site  { margin: 0; font-size: 13px; color: var(--text-faint); }

.report__figures {
    display: grid; gap: 10px; margin-bottom: 26px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.figure {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 14px 16px; text-align: center;
}
/* Uptime is the number the whole report exists to state. */
.figure--hero { grid-column: span 2; border-color: var(--brand); }
.figure--hero .figure__value { font-size: 30px; color: var(--brand); }
.figure__label { display: block; font-size: 11.5px; color: var(--text-faint); margin-bottom: 3px; }
.figure__value { display: block; font-size: 21px; font-weight: 700; }
.figure__value--sm { font-size: 15px; }
.figure__value small { font-size: 11px; color: var(--text-faint); margin-inline-start: 3px; display: block; }

.report__section { margin-bottom: 24px; }
.report__section h2 { font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--text-dim); }

.report__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report__table th {
    text-align: right; font-weight: 600; font-size: 11.5px; color: var(--text-faint);
    padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.report__table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); }

.report__clean { margin: 0; color: var(--ok); font-size: 14px; }

.report__changes { list-style: none; margin: 0; padding: 0;
                   display: flex; gap: 8px; flex-wrap: wrap; }
.report__changes li {
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); padding: 7px 13px; font-size: 12.5px;
}
.report__change-count { font-weight: 700; color: var(--brand); margin-inline-end: 4px; }

.report__foot {
    border-top: 1px solid var(--border); padding-top: 16px;
    font-size: 11.5px; color: var(--text-faint); text-align: center;
}
.report__foot p { margin: 0 0 6px; }
.report__provenance { font-style: normal; }
.report__actions { margin-top: 14px; }

/* ── Public status page (§15) ────────────────────────────────────── */

.status { text-align: right; }
.status__head { text-align: center; margin-bottom: 26px; }
.status__brand { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--accent); }
.status__title { margin: 0 0 12px; font-size: 20px; font-weight: 700; }

.status__overall {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
    background: var(--surface); border: 1px solid var(--border);
}
.status__overall--ok   { color: var(--ok);   border-color: #245c30; }
.status__overall--warn { color: var(--warn); border-color: #5c4a1c; }
.status__overall--bad  { color: var(--bad);  border-color: #6b2b28; }

.status__sites { list-style: none; margin: 0; padding: 0;
                 display: flex; flex-direction: column; gap: 12px; }
.status__site {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px;
}
.status__site-head { display: flex; justify-content: space-between;
                     align-items: baseline; gap: 12px; margin-bottom: 10px; }
.status__name  { font-size: 14.5px; font-weight: 600; }
.status__state { font-size: 12.5px; font-weight: 600; }

/* Ninety bars. `direction: rtl` puts the newest day on the right, which is
   where a Persian reader's eye starts. */
.status__bars { display: flex; gap: 2px; height: 30px; align-items: stretch; }
.status__bar  { flex: 1 1 0; min-width: 2px; border-radius: 2px; }
.status__bar--ok    { background: var(--ok); }
.status__bar--warn  { background: var(--warn); }
.status__bar--bad   { background: var(--bad); }
/* A day nobody measured is hollow — never green. */
.status__bar--empty { background: none; border: 1px dashed var(--border); }

.status__site-foot {
    display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px;
    font-size: 12px; color: var(--text-dim);
}
.status__foot { margin-top: 22px; font-size: 11.5px; color: var(--text-faint); text-align: center; }

/* ── Narrow screens ──────────────────────────────────────────────── */
/*
   Mobile-first is a stated requirement (§18), and the fleet row is the one
   layout that genuinely has to change shape: six columns of numbers do not
   survive a 380px screen. Below 760px it becomes two rows.
*/
@media (max-width: 760px) {
    body { font-size: 14.5px; }

    .site__link {
        grid-template-columns: auto minmax(0, 1fr) auto;
        row-gap: 8px;
    }
    .site__status  { grid-column: 2 / -1; justify-content: flex-start; }
    .site__metric  { grid-row: 1; }
    .site__age     { grid-column: 2 / -1; text-align: start; min-width: 0; }

    .incident__link { grid-template-columns: auto minmax(0, 1fr); }
    .incident__badges { grid-column: 2; justify-content: flex-start; }

    .timeline::before { inset-inline-start: 52px; }
    .timeline__item { grid-template-columns: 44px 12px minmax(0, 1fr); }

    .hist__row { grid-template-columns: 76px minmax(0, 1fr) 44px; }

    .topbar__inner { min-height: 58px; padding-block: 8px; }
    .switcher__current small, .switcher__link small { display: none; }
}

@media (max-width: 480px) {
    .mainnav { order: 3; width: 100%; }
    .switcher { width: 100%; justify-content: space-between; }
}

/* ── Print ───────────────────────────────────────────────────────── */
/*
   Reports and incident pages get printed and handed to clients, so they
   should not print as a black rectangle.
*/
@media print {
    body { background: #fff; color: #000; background-image: none; }
    .topbar, .footer, .page-head__actions, .skip, .pager,
    .report__actions, .bare__brand, .public-foot { display: none; }
    .card, .site, .incident, .page-head, .pulse, .facts .fact {
        border-color: #ccc; background: #fff; break-inside: avoid;
    }
    .muted, .stat__label, .fact__label { color: #555; }
    a { color: #000; text-decoration: none; }

    /* The report is the page most likely to be printed — §15 says it is
       handed to a client, and the browser's save-as-PDF is why this project
       ships no PDF library. */
    .bare, .bare__inner, .bare__inner--wide { display: block; width: auto; min-height: 0; padding: 0; }
    .report { --brand: #1a5fb4; }
    .figure, .report__table td, .report__table th {
        border-color: #ddd; background: #fff;
    }
    .figure--hero { border-color: #1a5fb4; }
    .figure--hero .figure__value, .report__brand, .report__change-count { color: #1a5fb4; }
    .report__changes li { border-color: #ddd; background: #fff; }
    .tone-ok { color: #1a7f37; }
    .tone-warn { color: #9a6700; }
    .tone-bad { color: #b42318; }

    /* Status pages print too — an agency puts one in a monthly summary. */
    .status__site { border-color: #ddd; background: #fff; break-inside: avoid; }
    .status__bar--empty { border-color: #ccc; }

    @page { margin: 14mm; }
}