/* The brand palette is dusty rose, on white.

   Every color in the product is one of these tokens. No template and no
   other stylesheet writes a hex, so a change of shade is a change here.
   Changing a brand value is a question for Michael, never a tweak. */
:root {
  /* The four the brand is made of. */
  --wp-white: #FFFFFF;
  --wp-dusty-rose: #BC8089;    /* the brand color: control borders, the mirror's frame */
  --wp-coral-rose: #EBA59C;    /* soft coral rose: the cards in the drawing, small accents */
  --wp-antique-rose: #96586A;  /* the deep one: headings, links, the main button */

  /* What they are used for. */
  --wp-bg: #FFFFFF;            /* the page, cards and bars */
  --wp-wash: #FBF4F3;          /* a breath of dusty rose: the stage and quiet panels */
  --wp-blush: #F6E4E2;         /* a fuller tint: the lit tab, measurement chips, a press */
  --wp-glass: #F1E6E7;         /* the mirror's glass in the drawing */
  --wp-line: #EAD3D5;          /* hairlines and card edges */
  --wp-ink: #3B272C;           /* words */
  --wp-muted: #76595F;         /* quieter words */
  --wp-press: #7E4757;         /* antique rose, pressed */
  --wp-problem: #A8323E;       /* something is wrong */
  --wp-veil: rgba(59, 39, 44, 0.92);    /* behind a photo opened large */
  --wp-shadow: rgba(59, 39, 44, 0.18);

  /* On paper. Names print in true black unless she picks a rose; cut lines
     are a gray light enough to disappear in the cut. */
  --wp-print-black: #000000;
  --wp-cut: #9A9A9A;

  --wp-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --wp-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* The status page's own rules, served right after the app's static/css/brand.css, so every --wp- token here is
   the brand's own. The only colors written in this file are the status signals the brand has none for: working
   (green) and slow (amber). Down is the brand's --wp-problem. Light only, as the app is.
   test/worker.test.mjs holds every pair these rules draw to its contrast. */
:root {
  --st-ok: #24694C;        /* "Working", in words */
  --st-ok-bar: #3E9A6E;    /* a good day's bar, the banner's dot */
  --st-ok-soft: #E7F3EC;   /* behind "Working" and the all-good banner */
  --st-slow: #8A5300;      /* "Slow", in words */
  --st-slow-bar: #C27C0E;  /* a day with a few bad minutes */
  --st-slow-soft: #FBF0DF;
  --st-down-soft: #F9E5E7; /* behind "Down" and the down banner */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; background: var(--wp-bg); }
body {
  margin: 0;
  font-family: var(--wp-sans); font-size: 16px; line-height: 1.5;
  color: var(--wp-ink); background: var(--wp-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--wp-antique-rose); }
:focus-visible { outline: 2px solid var(--wp-antique-rose); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--wp-serif); font-weight: 600; line-height: 1.25; color: var(--wp-antique-rose); text-wrap: balance; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.wrap {
  width: 100%; max-width: 760px; margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left));
}

/* ---- the bar across the top */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding-top: env(safe-area-inset-top);
  margin-bottom: 20px; border-bottom: 1px solid var(--wp-line);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0;
  font-family: var(--wp-serif); font-size: 20px; font-weight: 600; white-space: nowrap;
  color: var(--wp-antique-rose); text-decoration: none;
}
.wordmark .tag { font-family: var(--wp-sans); font-size: 15px; font-weight: 600; color: var(--wp-muted); }
.mark { flex: 0 0 auto; width: 30px; height: 30px; fill: none; stroke-width: 1.7; }
.mark-a { stroke: var(--wp-dusty-rose); }
.mark-b { stroke: var(--wp-antique-rose); }
.top .back { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ---- the one sentence that says it all */
.banner {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 14px; background: var(--wp-wash);
}
.banner .dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--wp-muted); }
.banner h1 { font-size: 22px; color: var(--wp-ink); }
.banner p { margin-top: 2px; font-size: 14px; color: var(--wp-muted); }
.banner.ok { background: var(--st-ok-soft); }
.banner.ok .dot { background: var(--st-ok-bar); }
.banner.degraded { background: var(--st-slow-soft); }
.banner.degraded .dot { background: var(--st-slow-bar); }
.banner.down { background: var(--st-down-soft); }
.banner.down .dot { background: var(--wp-problem); }

section { margin-top: 28px; }
h2 { margin-bottom: 12px; font-size: 20px; }
.since { margin: -4px 0 12px; font-size: 14px; color: var(--wp-muted); }

/* ---- each part, with its days */
.parts { border: 1px solid var(--wp-line); border-radius: 14px; background: var(--wp-bg); overflow: hidden; }
.part { padding: 16px; border-top: 1px solid var(--wp-line); }
.part:first-child { border-top: 0; }
.phead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.phead > div { min-width: 0; }
.phead h3 { font-size: 18px; }
.phead .desc { margin-top: 2px; font-size: 14px; color: var(--wp-muted); }
.pill { flex: 0 0 auto; font-size: 13px; font-weight: 700; line-height: 1.3; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill.ok { color: var(--st-ok); background: var(--st-ok-soft); }
.pill.degraded { color: var(--st-slow); background: var(--st-slow-soft); }
.pill.down { color: var(--wp-problem); background: var(--st-down-soft); }
.pill.unknown { color: var(--wp-muted); background: var(--wp-wash); }
.bars { --gap: 1px; display: flex; justify-content: flex-end; gap: var(--gap); height: 30px; margin-top: 12px; }
.bars i { flex: 0 0 calc((100% - 89 * var(--gap)) / 90); width: calc((100% - 89 * var(--gap)) / 90); min-width: 0; border-radius: 1px; background: var(--wp-line); }
.bars i.ok { background: var(--st-ok-bar); }
.bars i.degraded { background: var(--st-slow-bar); }
.bars i.down { background: var(--wp-problem); }
.axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--wp-muted); font-variant-numeric: tabular-nums; }
/* While there are 30 days or fewer, each day is a bar wide enough to see rather than a ninetieth of the row. */
.bars.few i { flex: 0 0 8px; width: 8px; border-radius: 2px; }
@media (min-width: 600px) {
  .bars { --gap: 2px; height: 34px; }
  .bars i { border-radius: 2px; }
}

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 13px; color: var(--wp-muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--wp-line); }
.sw.ok { background: var(--st-ok-bar); }
.sw.degraded { background: var(--st-slow-bar); }
.sw.down { background: var(--wp-problem); }

/* ---- incidents */
.list { display: grid; gap: 12px; }
.inc { padding: 16px; border: 1px solid var(--wp-line); border-radius: 14px; background: var(--wp-bg); }
.inc h3 { font-size: 18px; }
.inc .meta { margin: 2px 0 10px; font-size: 14px; color: var(--wp-muted); }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tl li { display: grid; grid-template-columns: minmax(0, 1fr); font-size: 15px; }
.tl time { font-size: 13px; color: var(--wp-muted); }
@media (min-width: 600px) { .tl li { grid-template-columns: 180px minmax(0, 1fr); gap: 12px; } }
.empty { padding: 16px; border: 1px dashed var(--wp-dusty-rose); border-radius: 14px; font-size: 15px; color: var(--wp-muted); }

footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 28px; font-size: 14px; color: var(--wp-muted); }
footer span, footer a { display: inline-flex; align-items: center; min-height: 44px; }
footer a { color: var(--wp-muted); }

/* ---- the admin */
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.admin-head h1 { font-size: 24px; }
.admin-head form { margin: 0; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  font: 700 15px/1 var(--wp-sans); color: var(--wp-white); background: var(--wp-antique-rose);
  border: 1px solid var(--wp-antique-rose); border-radius: 12px; cursor: pointer; text-decoration: none;
}
.btn:active { background: var(--wp-press); border-color: var(--wp-press); }
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.note { margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 15px; background: var(--wp-wash); }
.note.problem { color: var(--wp-problem); background: var(--st-down-soft); }
.note.good { color: var(--st-ok); background: var(--st-ok-soft); }
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; margin: 0; font-size: 15px; }
.facts dt { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--wp-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .facts { grid-template-columns: 160px minmax(0, 1fr); }
  .facts dt { margin-top: 0; padding-top: 6px; }
  .facts dd { padding-top: 6px; }
}
.box { padding: 16px; border: 1px solid var(--wp-line); border-radius: 14px; }
.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alerts li { padding: 12px 14px; border: 1px solid var(--wp-line); border-radius: 12px; font-size: 15px; overflow-wrap: anywhere; }
.alerts .when { display: block; font-size: 13px; color: var(--wp-muted); }
.alerts .state { font-weight: 700; }
.alerts .state.sent { color: var(--st-ok); }
.alerts .state.failed, .alerts .state.unsent { color: var(--wp-problem); }