/* TurboTwin Cloud status page.
 *
 * One rule carries the design: colour means status. The page itself is ink on a quiet ground, the TurboTwin mark is
 * plain ink as in the product, and green, amber, red, blue and grey appear only where they say how a service is
 * doing. Every state also has its own icon and word, so nothing depends on colour alone.
 *
 * Colour tokens live on :root; the dark set follows the viewer's system preference (there is no theme switch:
 * review, cuts). Components take colours from the tokens only. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("./assets/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* the page: ink on a cool, faintly green ground */
  --ground: #f3f5f4;
  --surface: #ffffff;
  --sunken: #ebefed;
  --ink: #121715;
  --ink-2: #4f5a56;
  --ink-3: #737e7a;
  --rule: #dce2df;
  --rule-strong: #c5cdc9;
  --focus: #2557b8;

  /* status: text-safe colour, bar fill, and a wash for backgrounds */
  --ok: #17784f;    --ok-fill: #2aa16b;    --ok-wash: #e3f3eb;
  --warn: #8f5400;  --warn-fill: #e09a1f;  --warn-wash: #fbefd9;
  --bad: #b02c2c;   --bad-fill: #db4a47;   --bad-wash: #fbe5e4;
  --info: #2353b0;  --info-fill: #3f7be0;  --info-wash: #e4ecfb;
  --none: #5f6a66;  --none-fill: #c2cac6;  --none-wash: #eaeeec;
  --pre-fill: #e3e8e6;

  --radius: 12px;
  --radius-sm: 7px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0e1211;
    --surface: #151a19;
    --sunken: #1c2321;
    --ink: #e6ebe9;
    --ink-2: #a3aeaa;
    --ink-3: #7d8884;
    --rule: #262f2c;
    --rule-strong: #34403c;
    --focus: #8db3fa;

    --ok: #66d6a0;    --ok-fill: #2fae72;    --ok-wash: #12291e;
    --warn: #f2b85e;  --warn-fill: #df9a29;  --warn-wash: #2e2410;
    --bad: #f39490;   --bad-fill: #e0524f;   --bad-wash: #341918;
    --info: #94b8fa;  --info-fill: #4d86e8;  --info-wash: #16233a;
    --none: #a0aaa6;  --none-fill: #3b4542;  --none-wash: #1e2523;
    --pre-fill: #212927;
  }
}

/* ---------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}

/* No tabular figures anywhere: this face also gives the full stop and the colon tabular width, which opens gaps in
   "99.9 %" and "2:43". */

a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; }
p { margin: 0; }
code { font-family: var(--mono); font-size: 0.86em; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.empty { color: var(--ink-2); padding: 24px 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- top bar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The TurboTwin mark, painted in the ink colour so it follows the theme. */
.brand-mark {
  width: 26px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("./assets/turbotwin-mark.svg") center / contain no-repeat;
  mask: url("./assets/turbotwin-mark.svg") center / contain no-repeat;
}

.brand-sub { color: var(--ink-3); font-weight: 500; }

/* The live indicator: the page is pushed every probe result as it lands, and the dot beats once when one does. */
.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.86rem;
  white-space: nowrap;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--none-fill);
}

.live.on .live-dot { background: var(--ok-fill); }

.live-dot.beat { animation: beat 1.2s ease-out; }

@keyframes beat {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok-fill) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ok-fill) 0%, transparent); }
}

/* ---------------------------------------------------------------- stale strip */

.stale {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px 20px;
  background: var(--bad-wash);
  color: var(--bad);
  border-bottom: 1px solid color-mix(in srgb, var(--bad-fill) 35%, transparent);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------- state glyphs and labels */

.glyph {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  background: var(--none-fill);
}

.glyph svg { width: 62%; height: 62%; }

.glyph.ok { background: var(--ok-fill); }
.glyph.warn { background: var(--warn-fill); }
.glyph.bad { background: var(--bad-fill); }
.glyph.info { background: var(--info-fill); }
.glyph.none { background: var(--none-fill); color: var(--ink-2); }

.state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}

.state.ok { color: var(--ok); }
.state.warn { color: var(--warn); }
.state.bad { color: var(--bad); }
.state.info { color: var(--info); }
.state.none { color: var(--none); }

/* ---------------------------------------------------------------- hero: the answer to "is it working?" */

.hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 20px;
  align-items: center;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--rule);
}

.hero > .glyph {
  grid-row: span 2;
  width: 58px;
  height: 58px;
}

.hero > .glyph svg { width: 54%; height: 54%; }

/* Neutral (pre-launch, unknown, saved copy): an outlined disc, so the icon keeps its contrast in both themes. */
.hero > .glyph.none { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--rule-strong); }

.hero h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  letter-spacing: -0.025em;
  font-weight: 750;
  text-wrap: balance;
}

.hero-sub { color: var(--ink-2); max-width: 60ch; }

.hero-envs {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 8px;
}

.hero-env {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}

.hero-env .glyph { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- sections */

.section { margin-top: 36px; }

.section > h2 {
  margin-bottom: 12px;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}

/* An environment: one panel, its services as rows inside it. */
.env {
  margin-top: 36px;
}

.env-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 10px;
}

.env-head h2 { font-size: 1.18rem; letter-spacing: -0.01em; }

.env-note { flex-basis: 100%; color: var(--ink-2); font-size: 0.9rem; }

.services {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.service { padding: 16px 18px 14px; }
.service + .service { border-top: 1px solid var(--rule); }

.service-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.service-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: 1.02rem;
}

/* The disclosure chevron: it turns when the details are open. */
.service-name::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.service-head[aria-expanded="true"] .service-name::after { transform: rotate(45deg); }

.override-tag {
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-2);
  font-size: 0.74rem;
  font-weight: 600;
}

.service-desc {
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 0.9rem;
}

.service-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 18px;
  margin: 12px 0 2px;
  padding: 12px 14px;
  background: var(--sunken);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.service-details dt { color: var(--ink-2); }
.service-details dd { margin: 0; overflow-wrap: anywhere; }
.service-details .note { grid-column: 1 / -1; color: var(--ink-2); }

/* ---------------------------------------------------------------- the 90-day bar */

.uptime { margin-top: 12px; }

.bar {
  display: flex;
  gap: 2px;
  height: 30px;
  border-radius: 4px;
  cursor: crosshair;
  touch-action: pan-y;
}

.bar > i {
  flex: 1 1 0;
  min-width: 1px;
  border-radius: 2px;
  background: var(--none-fill);
}

.bar > i.pre { background: var(--pre-fill); }
.bar > i.ok { background: var(--ok-fill); }
.bar > i.warn { background: var(--warn-fill); }
.bar > i.bad { background: var(--bad-fill); }
.bar > i.info { background: var(--info-fill); }

/* The day under the pointer or the keyboard cursor. */
.bar > i.at { box-shadow: 0 0 0 2px var(--ink); }

.uptime-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-height: 1.5em;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 0.8rem;
}

.uptime-pct { color: var(--ink-2); font-weight: 600; }

.uptime-meta.reading { justify-content: flex-start; color: var(--ink); }

/* ---------------------------------------------------------------- incidents and maintenance happening now */

.notice-card {
  margin-top: 12px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--none-wash);
}

.notice-card.warn { background: var(--warn-wash); }
.notice-card.bad { background: var(--bad-wash); }
.notice-card.info { background: var(--info-wash); }

.notice-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.notice-head h3 { flex: 1 1 260px; font-size: 1.1rem; letter-spacing: -0.01em; }

.notice-when { margin-top: 6px; color: var(--ink-2); font-size: 0.9rem; }

.affects { margin-top: 6px; font-size: 0.92rem; }
.affects .label { color: var(--ink-2); }

.message-link { overflow-wrap: anywhere; }

.timeline {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.timeline li {
  position: relative;
  padding: 0 0 14px 20px;
}

/* The timeline's spine: a dot per update, joined by a line. */
.timeline li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-3);
}

.timeline li:first-child::before { background: var(--ink); }

.timeline li + li::after,
.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 0;
  width: 1px;
  background: var(--rule-strong);
}

.timeline li:last-child { padding-bottom: 0; }

.timeline .entry-head { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.timeline .status { font-weight: 650; }
.timeline .when { color: var(--ink-2); font-size: 0.86rem; }
.timeline .author { color: var(--ink-3); font-size: 0.86rem; }
.timeline .message { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline li.empty { color: var(--ink-2); }
.timeline li.empty::before { display: none; }

/* ---------------------------------------------------------------- history */

.history-day { margin-top: 18px; }

.history-day h3 {
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: var(--ink-2);
  font-weight: 600;
}

.history-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.history-list > li + li { border-top: 1px solid var(--rule); }

details.past summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

details.past summary::-webkit-details-marker { display: none; }

details.past .title { font-weight: 600; }
details.past .lasted { color: var(--ink-2); font-size: 0.86rem; white-space: nowrap; }
details.past .body { padding: 0 16px 16px 46px; }
details.past .glyph { width: 16px; height: 16px; }

.history-more { margin-top: 16px; }

.history-day-more { padding: 10px 16px; }

.history-quiet { color: var(--ink-2); }

/* ---------------------------------------------------------------- buttons */

.btn {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ground);
  cursor: pointer;
}

.btn:hover { background: color-mix(in srgb, var(--ink) 86%, var(--ground)); }
.btn:disabled { opacity: 0.45; cursor: default; }

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}

.btn-quiet:hover { background: var(--sunken); }

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- footer */

.footer {
  display: grid;
  gap: 4px;
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 0.84rem;
}

.footer-admin { color: var(--ink-2); }

/* ---------------------------------------------------------------- operator console */

.console-back { padding-top: 6px; font-size: 0.9rem; }

.console-intro { margin-top: 18px; }

.console-intro h1 { font-size: 2rem; letter-spacing: -0.025em; }

.lede { margin-top: 6px; color: var(--ink-2); font-size: 1.05rem; max-width: 60ch; }

.console-when {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.console-when summary { cursor: pointer; font-weight: 650; }
.console-when-body { margin-top: 8px; max-width: 66ch; }
.console-when-body ul { margin: 6px 0 10px; padding-left: 20px; }
.console-when-body li + li { margin-top: 4px; }

.signin {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.signin h2 { font-size: 1.15rem; }
.signin > .hint { margin-top: 4px; max-width: 66ch; }

.signin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.signin-row input { flex: 1 1 260px; }

.signin-status { margin-top: 10px; font-weight: 600; color: var(--ink-2); }
.signin-status.ok { color: var(--ok); }
.signin-status.err { color: var(--bad); }

.signin-target { margin-top: 2px; color: var(--ink-3); font-size: 0.84rem; overflow-wrap: anywhere; }

.notice {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bad-wash);
  color: var(--bad);
  font-weight: 500;
}

.tabs {
  display: flex;
  gap: 4px;
  margin-top: 28px;
  border-bottom: 1px solid var(--rule);
}

.tabs [role="tab"] {
  padding: 10px 14px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.actions { margin: 0; padding: 0; border: 0; min-width: 0; }

.actions-locked {
  float: left;
  width: 100%;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--sunken);
  color: var(--ink-2);
  font-weight: 600;
}

.actions:not([disabled]) > .actions-locked { display: none; }
.actions[disabled] .task { opacity: 0.6; }

.actions > section { clear: both; }

.open-now { margin-top: 18px; }

.open-now h3 { font-size: 1rem; margin-bottom: 8px; }

.open-now ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}

.open-now li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 14px;
}

.open-now li + li { border-top: 1px solid var(--rule); }
.open-now .meta { color: var(--ink-2); font-size: 0.86rem; }
.open-now .quiet { color: var(--ink-2); }

.task {
  margin-top: 18px;
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.task h3, .task-title { font-size: 1.12rem; letter-spacing: -0.01em; font-weight: 700; }

.task-when { margin-top: 4px; color: var(--ink-2); max-width: 66ch; }

.task label,
.task .field {
  display: block;
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 650;
}

.task .field-label { display: block; }

.hint {
  display: block;
  color: var(--ink-3);
  font-size: 0.84rem;
  font-weight: 400;
}

.task input:not([type="checkbox"]),
.task select,
.task textarea,
.signin input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
}

.task textarea { min-height: 76px; resize: vertical; }

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px 14px;
  margin-top: 8px;
}

.checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 400;
}

.checks input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }

.checks .quiet { color: var(--ink-3); font-weight: 400; }

.task-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.result { font-size: 0.9rem; overflow-wrap: anywhere; }
.result.ok { color: var(--ok); }
.result.err { color: var(--bad); }

.task-advanced { padding-top: 14px; }
.task-advanced > summary { cursor: pointer; }
.task-advanced > summary .hint { display: inline; margin-left: 6px; }

.time-invalid { font-family: var(--mono); font-size: 0.85em; }

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 600px) {
  body { font-size: 15px; }
  .wrap { padding: 0 16px 32px; }
  .topbar { flex-wrap: wrap; padding: 16px 0 12px; }
  .hero { padding: 22px 0 24px; gap: 4px 14px; }
  .hero > .glyph { width: 44px; height: 44px; grid-row: auto; }
  .hero-sub, .hero-envs { grid-column: 1 / -1; }
  .service { padding: 14px 14px 12px; }
  .bar { gap: 1px; height: 26px; }
  .field-pair { grid-template-columns: 1fr; }
  details.past summary { grid-template-columns: auto minmax(0, 1fr); }
  details.past .lasted { grid-column: 2; }
  details.past .body { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot.beat { animation: none; }
  .service-name::after { transition: none; }
}