/* The status page's look: Daobook's own (flat white panels on the paper, green
   ink labels, Nature Soft pills), written out by hand because nothing here may
   depend on the app or its build. Colours are the nature palette's. */
:root {
  --paper: #F5F5F4;
  --panel: #FFFFFF;
  --edge: #DFDCDB;
  --line: #E7E5E4;
  --ink: #1C1917;
  --muted: #6B6560;
  --green: #3B5134;
  --green-fill: #E3F2DD;
  --green-line: #ADCCA0;
  --amber: #9B4E0F;
  --amber-fill: #FFE5C7;
  --amber-line: #FBAD6B;
  --red: #8C392B;
  --red-fill: #FFE5DF;
  --red-line: #F1A598;
  --blue: #27506D;
  --blue-fill: #DAF0FF;
  --blue-line: #98C8E9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.page { max-width: 720px; margin: 0 auto; padding: 32px 16px 48px; }

.masthead { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.masthead img { display: block; height: 37px; width: auto; }
.masthead-title { font-size: 20px; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--edge); }

h1, h2, h3, p { margin: 0; }
.label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin: 28px 0 8px; }
.region { font-size: 15px; font-weight: 600; margin: 32px 0 10px; }

.panel { background: var(--panel); border: 1px solid var(--edge); border-radius: 12px; }

/* The one thing to read first */
.banner { padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; }
.banner-mark { flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: 7px; }
.banner h1 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.banner p { color: var(--muted); font-size: 15px; margin-top: 2px; }
.banner.ok .banner-mark { background: #6B8E5B; }
.banner.notice { border-color: var(--amber-line); background: #FFF2E1; }
.banner.notice .banner-mark { background: #B65B16; }
.banner.problem { border-color: var(--red-line); background: #FFF2EF; }
.banner.problem .banner-mark { background: #B84D3B; }
.banner.planned { border-color: var(--blue-line); background: #ECF9FF; }
.banner.planned .banner-mark { background: #366990; }

/* Rows on hairlines */
.rows > * { padding: 12px 20px; border-top: 1px solid var(--line); }
.rows > *:first-child { border-top: 0; }
.part { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.pill { font-size: 13px; font-weight: 500; padding: 2px 10px; border-radius: 999px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--green-line); background: var(--green-fill); color: var(--green); }
.pill.degraded { box-shadow: inset 0 0 0 1px var(--amber-line); background: var(--amber-fill); color: var(--amber); }
.pill.outage { box-shadow: inset 0 0 0 1px var(--red-line); background: var(--red-fill); color: var(--red); }
.pill.maintenance { box-shadow: inset 0 0 0 1px var(--blue-line); background: var(--blue-fill); color: var(--blue); }

/* An incident and its updates, newest first */
.incident h3 { font-size: 16px; font-weight: 600; }
.incident .when { color: var(--muted); font-size: 14px; }
.updates { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.updates li { padding-left: 14px; border-left: 2px solid var(--line); }
.updates .state { font-size: 13px; font-weight: 600; color: var(--ink); }
.updates .at { font-size: 13px; color: var(--muted); margin-left: 6px; }
.updates p { font-size: 15px; white-space: pre-line; }

.quiet { color: var(--muted); font-size: 15px; }
.loading { color: var(--muted); }
.foot { margin-top: 36px; color: var(--muted); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
a { color: var(--green); }

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1B1917; --panel: #24211E; --edge: #3A3531; --line: #332F2B; --ink: #F1EEEA; --muted: #A8A29E;
    --green: #ADCCA0; --green-fill: #2C3D26; --green-line: #4B6542;
    --amber: #FBAD6B; --amber-fill: #4A2A0C; --amber-line: #9B4E0F;
    --red: #F1A598; --red-fill: #4A1F18; --red-line: #8C392B;
    --blue: #98C8E9; --blue-fill: #15303F; --blue-line: #27506D;
  }
  .banner.notice { background: #33200E; }
  .banner.problem { background: #331813; }
  .banner.planned { background: #12242F; }
}