/* Recruit CRM status page. Light content area under a navy (#152E4A) band.
   Two brand variants on the navy band, set on <html data-variant="...">:
     white - white logo and white highlights (default)
     blue  - #1070CA logo mark and highlights
   Status colours were checked with the dataviz palette validator:
     - content area (white): operational days use a light green so problem days
       stand out by lightness as well as hue (all pairs pass CVD separation);
     - navy band: brighter steps, all >= 3:1 on #152E4A, always paired with a
       distinct icon shape and a text label. */

:root {
  color-scheme: light;
  --navy: #152e4a;
  --navy-raised: #1c3a5b;
  --navy-line: rgba(255, 255, 255, 0.16);
  --on-navy: #ffffff;
  --on-navy-muted: rgba(255, 255, 255, 0.74);
  --brand: #1070ca;
  --brand-hover: #0c5aa3;

  --page: #f4f6f9;
  --card: #ffffff;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --ink: #0a1c29;
  --ink-2: #314855;
  --ink-3: #5b6b7c;

  /* Status, content area */
  --ok: #0ca30c;
  --ok-bar: #86cf93;
  --degraded: #e3a400;
  --partial: #e5600a;
  --major: #b42318;
  --nodata: #e2e8f0;

  /* Status, on the navy band */
  --ok-navy: #4ade80;
  --degraded-navy: #facc15;
  --partial-navy: #fb923c;
  --major-navy: #f87171;

  /* Variant: highlights on navy */
  --pill-active-bg: #ffffff;
  --pill-active-ink: #152e4a;

  --radius: 10px;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-head: "Montserrat", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

:root[data-variant="blue"] {
  --pill-active-bg: #1070ca;
  --pill-active-ink: #ffffff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: var(--brand-hover); }
h1, h2, h3 { font-family: var(--font-head); color: var(--ink-2); margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Navy band ─────────────────────────────────────────────── */
.band { background: var(--navy); color: var(--on-navy); padding-bottom: 28px; }
.band :focus-visible { outline-color: #ffffff; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 22px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--on-navy); }
.brand img { height: 30px; width: auto; display: block; }
.brand-divider { width: 1px; height: 22px; background: var(--navy-line); }
.brand-label { font-family: var(--font-head); font-weight: 600; font-size: 16px; letter-spacing: 0.01em; }
.topbar a.help { color: var(--on-navy); font-size: 14px; font-weight: 500; text-decoration: none; padding: 7px 12px;
                 border: 1px solid var(--navy-line); border-radius: 8px; white-space: nowrap; }
.topbar a.help:hover { background: var(--navy-raised); color: var(--on-navy); }

.regions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.region-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
               border: 1px solid var(--navy-line); color: var(--on-navy); text-decoration: none; font-size: 14px; font-weight: 500; }
.region-pill:hover { background: var(--navy-raised); color: var(--on-navy); }
.region-pill[aria-current="page"] { background: var(--pill-active-bg); color: var(--pill-active-ink); border-color: transparent; }
.region-pill .icon { width: 16px; height: 16px; }

.overall { display: flex; align-items: flex-start; gap: 14px; }
.overall .icon { width: 34px; height: 34px; flex: none; margin-top: 2px; }
.overall h1 { color: var(--on-navy); font-size: 26px; line-height: 1.25; font-weight: 700; }
.overall p { margin: 6px 0 0; color: var(--on-navy-muted); font-size: 14px; }

/* Status icon colours: the icon shape differs per status, colour reinforces it */
.st-operational { color: var(--ok); }
.st-degraded_performance { color: var(--degraded); }
.st-partial_outage { color: var(--partial); }
.st-major_outage { color: var(--major); }
.band .st-operational { color: var(--ok-navy); }
.band .st-degraded_performance { color: var(--degraded-navy); }
.band .st-partial_outage { color: var(--partial-navy); }
.band .st-major_outage { color: var(--major-navy); }
/* Selected pill: white variant sits on white, so use the content-area status colours;
   blue variant sits on #1070CA, so the icon goes white. */
.region-pill[aria-current="page"] .st-operational { color: var(--ok); }
.region-pill[aria-current="page"] .st-degraded_performance { color: var(--degraded); }
.region-pill[aria-current="page"] .st-partial_outage { color: var(--partial); }
.region-pill[aria-current="page"] .st-major_outage { color: var(--major); }
:root[data-variant="blue"] .region-pill[aria-current="page"] .icon { color: #ffffff; }
.icon svg { width: 100%; height: 100%; display: block; }
.icon { display: inline-flex; }

/* ── Content ───────────────────────────────────────────────── */
main.wrap { padding-top: 24px; padding-bottom: 48px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
             padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-head h2 { font-size: 17px; font-weight: 700; }
.card-body { padding: 4px 20px 16px; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius);
          border: 1px solid var(--line-strong); background: var(--card); margin-bottom: 20px; font-size: 14px; color: var(--ink-2); }
.notice .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* Overall uptime */
.card-note { font-size: 13px; color: var(--ink-3); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 4px; }
.tile { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.tile-label { font-size: 12.5px; color: var(--ink-3); }
.tile-value { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.2;
              margin-top: 2px; font-variant-numeric: tabular-nums; }
.tile-note { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* Uptime by section (under the tiles) */
.section-uptime { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.section-uptime caption { text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-2); padding-bottom: 6px; }
.section-uptime th, .section-uptime td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right;
                                         font-variant-numeric: tabular-nums; }
.section-uptime thead th { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.section-uptime th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink-2); padding-left: 0; }
.section-uptime tbody td { font-weight: 700; color: var(--ink); }
.section-uptime tbody tr:last-child > * { border-bottom: 0; }

/* Custom dates (system status) */
.range { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
         margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); }
.range-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.range label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.range input[type="date"] { font: inherit; font-size: 14px; color: var(--ink); background: var(--card); min-height: 34px;
                            border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 8px; }
.range input[type="date"]:hover { border-color: var(--ink-3); }
.range-groups { margin: 14px 20px 0; }
.range-note { font-size: 12px; color: var(--ink-3); }
@media (max-width: 600px) {
  .tiles { gap: 8px; }
  .tile { padding: 10px; }
  .tile-value { font-size: 19px; }
  .range { padding: 12px; }
  .range-fields { width: 100%; }
  .range label { flex: 1 1 100%; display: grid; grid-template-columns: 38px 1fr; }
  .range input[type="date"] { font-size: 16px; min-height: 40px; width: 100%; }   /* 16px: no zoom-on-focus on iOS */
  .range-groups { margin: 12px 14px 0; }
  .section-uptime { font-size: 12.5px; }
  .section-uptime th, .section-uptime td { padding: 7px 4px; }
}

/* Uptime period toggle (last month / 90 days / custom) */
.toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.toggle button { background: var(--card); border: 0; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--ink-3); cursor: pointer;
                 white-space: nowrap; }
.toggle button + button { border-left: 1px solid var(--line-strong); }
.toggle button[aria-checked="true"] { background: var(--brand); color: #ffffff; }
.toggle button:not([aria-checked="true"]):hover { background: var(--page); color: var(--ink); }

/* Sections: services we run, and ones that rely on third-party providers */
.svc-section + .svc-section { margin-top: 6px; border-top: 1px solid var(--line-strong); }
.section-head { padding: 18px 0 2px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.section-head h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.section-pct { font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.section-desc { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); max-width: 620px; }

/* Groups and components */
.group { padding: 16px 0; border-bottom: 1px solid var(--line); }
.group:last-child { border-bottom: 0; }
.row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.row-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.row-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.row-status .icon { width: 15px; height: 15px; }
.row-pct { margin-left: auto; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.info { width: 15px; height: 15px; color: var(--ink-3); cursor: help; display: inline-flex;
        background: none; border: 0; padding: 0; }
.info:hover { color: var(--ink); }
.info .icon { width: 100%; height: 100%; color: inherit; }

/* Daily bars */
.bars { display: flex; gap: 2px; height: 30px; align-items: stretch; cursor: default; touch-action: pan-y; }
.bar { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: var(--nodata); }
.bar.s-operational { background: var(--ok-bar); }
.bar.s-degraded_performance { background: var(--degraded); }
.bar.s-partial_outage { background: var(--partial); }
.bar.s-major_outage { background: var(--major); }
.bar.s-none { background: var(--nodata); }
.bar.out { opacity: 0.3; }   /* outside the selected uptime period */
.bar.active { outline: 2px solid var(--ink); outline-offset: 1px; opacity: 1; }
.bars-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
@media (max-width: 600px) { .bars { gap: 1px; } }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 20px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 14px; border-radius: 2px; display: inline-block; }

/* Tooltip */
.tooltip { position: fixed; z-index: 10; pointer-events: none; max-width: 280px; background: var(--ink); color: #ffffff;
           border-radius: 8px; padding: 10px 12px; font-size: 13px; box-shadow: 0 8px 24px rgba(10, 28, 41, 0.25); }
.tooltip[hidden] { display: none; }
.tooltip .t-date { color: rgba(255, 255, 255, 0.72); font-size: 12px; }
.tooltip .t-desc { line-height: 1.45; }
.tooltip .t-value { font-weight: 700; font-size: 15px; margin: 2px 0; }
.tooltip .t-status { display: flex; align-items: center; gap: 6px; }
.tooltip .t-status i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.tooltip ul { margin: 6px 0 0; padding-left: 16px; color: rgba(255, 255, 255, 0.86); }

/* Incidents and maintenance */
.incident { padding: 16px 0; border-bottom: 1px solid var(--line); }
.incident:last-child { border-bottom: 0; }
.incident-active { border-left: 4px solid var(--line-strong); padding: 16px 20px; margin: 0; }
.incident-active.st-border-degraded_performance { border-left-color: var(--degraded); }
.incident-active.st-border-partial_outage { border-left-color: var(--partial); }
.incident-active.st-border-major_outage { border-left-color: var(--major); }
/* Maintenance notices are announcements, not a status: brand blue, wrench icon. */
.incident-active.notice { border-left-color: var(--brand); }
.notice-icon { color: var(--brand); }
.incident-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.incident-title h3 { font-size: 16px; color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-2);
        border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 9px 2px 7px; }
.chip .icon { width: 13px; height: 13px; }
.meta { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.updates { list-style: none; margin: 12px 0 0; padding: 0; }
.updates li { padding: 8px 0 8px 14px; border-left: 2px solid var(--line); }
.updates .phase { font-weight: 600; color: var(--ink); margin-right: 6px; }
.updates .when { font-size: 12px; color: var(--ink-3); display: block; margin-top: 2px; }
details.incident summary { list-style: none; cursor: pointer; }
details.incident summary::-webkit-details-marker { display: none; }
details.incident summary .chev { width: 12px; height: 12px; color: var(--ink-3); transition: transform 0.15s ease; }
details.incident[open] summary .chev { transform: rotate(90deg); }
.empty { padding: 16px 0; color: var(--ink-3); font-size: 14px; }

footer { border-top: 1px solid var(--line); padding: 20px 0 32px; font-size: 13px; color: var(--ink-3); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
footer a { color: var(--ink-3); }

@media (max-width: 600px) {
  .overall h1 { font-size: 21px; }
  .overall .icon { width: 28px; height: 28px; }
  .brand img { height: 24px; }
  .brand-label { font-size: 14px; }
  .card-head, .card-body, .legend { padding-left: 14px; padding-right: 14px; }
  .incident-active { padding: 14px; }
  .row-pct { width: 100%; margin-left: 0; }
  .toggle button { padding: 6px 9px; }
}

@media (forced-colors: active) {
  .bar { border: 1px solid CanvasText; }
  .bar.s-operational { background: Canvas; }
  .bar:not(.s-operational):not(.s-none) { background: Highlight; }
}