/* Public status page. Design "Grafiet en goud": bone white, warm graphite ink, gold only as
   hairlines and markers. Self-hosted fonts only (SIL OFL, see fonts/OFL.txt); no external requests.
   Layout is mobile-first: narrow (< 640 px) is the default, then medium (640-999 px) and
   wide (>= 1000 px). The team diagram is HTML/CSS; connectors are aria-hidden boxes whose lines
   are drawn with borders and whose small arrowheads are border triangles. */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500 600; font-display: swap; src: url(fonts/source-serif-4-var.woff2) format('woff2'); 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; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/ibm-plex-sans-var.woff2) format('woff2'); 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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400.woff2) format('woff2'); 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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500.woff2) format('woff2'); 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 {
  --bg: #F3F0E8; --surface: #FBFAF6; --tint: #EDE9DF; --line: #D9D3C5; --line-strong: #B8B1A1;
  --ink: #1D1C19; --muted: #615E55; --gold: #A98A3F; --gold-ink: #8C6F2E; --bronze: #4B3B1F;
  --conn: #8A8374;            /* connectors: >= 3:1 against bg, surface and tint */
  --s-ok: #2F4F3A; --s-info: #615E55; --s-warn: #7A4A1E; --s-down: #6E2B2B;
  --active: #B3261E;
  --shadow: 0 1px 2px rgba(29, 28, 25, .05), 0 3px 10px -6px rgba(29, 28, 25, .14);
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --g: 48px;                  /* gap column in the team, env and medium top grids */
  --pp: 12px;                 /* padding of the team panel (medium and narrow) */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1D1C19; --surface: #25241F; --tint: #2A2925; --line: #3A3934; --line-strong: #57554D;
    --ink: #E9E5DA; --muted: #A39F93; --gold: #C9A75A; --gold-ink: #C9A75A; --bronze: #E9E5DA;
    --conn: #7A766B;
    --s-ok: #8DB49A; --s-info: #A39F93; --s-warn: #D9A066; --s-down: #E08A84;
    --active: #E5534B;
    --shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 12px -6px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 14px/22px var(--sans); color: var(--ink); background: var(--bg); overflow-x: hidden; }
p { margin: 0; }
.page { max-width: 1120px; margin: 0 auto; padding: 32px 16px 32px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; line-height: 18px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header */
.head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 14px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.mark { width: 40px; height: 40px; border: 1px solid var(--gold); border-radius: 2px; color: var(--gold-ink); font: 500 22px/38px var(--serif); text-align: center; }
h1 { font: 500 clamp(28px, 4.2vw, 40px)/1.1 var(--serif); letter-spacing: -.01em; color: var(--bronze); margin: 0; }
.lede { color: var(--muted); max-width: 60ch; margin-top: 6px; }
.live { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; justify-self: start; font: 400 12px/18px var(--mono); color: var(--muted); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px dashed var(--muted); flex: none; }
.live[data-kind="live"] .live-dot { border: 0; background: var(--s-ok); animation: pulse 2.4s ease-out infinite; }
.live[data-kind="stale"] .live-dot { border: 0; border-radius: 0; width: 6px; height: 6px; background: var(--s-warn); transform: rotate(45deg); }
.live[data-kind="stale"] { color: var(--s-warn); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 79, 58, .35); } 70%, 100% { box-shadow: 0 0 0 6px rgba(47, 79, 58, 0); } }

/* Sections */
section { margin-top: 40px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 18px; }
h2.label { display: flex; align-items: center; gap: 10px; font: 500 11px/16px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
h2.label::before { content: ''; width: 16px; height: 1px; background: var(--gold); }
.legend { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 14px; height: 10px; border: 1.5px solid var(--active); border-radius: 2px; }
h3 { font: 500 18px/24px var(--serif); margin: 0; }

.notice { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 10px 14px; border: 1px solid var(--line); border-left: 2px solid var(--s-warn); background: var(--surface); color: var(--s-warn); font-weight: 500; border-radius: 4px; }
.notice[hidden] { display: none; }

/* ---------- Team diagram ---------- */
.org { position: relative; }
.tier { display: flex; flex-direction: column; }

.blk { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); padding: 12px 14px; }
.blk .role { font: 500 16px/21px var(--serif); color: var(--ink); overflow-wrap: break-word; }
.blk .kind { font: 400 12px/16px var(--sans); color: var(--muted); white-space: nowrap; }
.blk .sub { font-size: 12.5px; line-height: 17px; color: var(--muted); margin-top: 3px; }
.blk .sub.mono { font: 400 12px/17px var(--mono); }
.blk .sub.mono:empty { display: none; }
.blk.env { border-top-color: var(--gold); }

/* Working: the only bright red on the page (Down uses a muted red). Blinking border without
   layout shift; still and slightly thicker with reduced motion. */
.blk.is-active { border-color: var(--active); box-shadow: 0 0 0 1.5px var(--active), var(--shadow); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { border-color: var(--line); box-shadow: 0 0 0 1.5px rgba(179, 38, 30, 0), var(--shadow); } }

.working { margin-top: 18px; color: var(--muted); font-size: 12.5px; line-height: 18px; }

/* Connectors */
.cn { position: relative; flex: none; }
.cn::before, .cn::after { content: ''; position: absolute; }
.cn.v { height: 32px; }
.cn.v.short { height: 24px; }
.cn.v::before { left: calc(50% - .5px); top: 0; bottom: 0; border-left: 1px solid var(--conn); }
.cn.h::before { top: calc(50% - .5px); left: 0; right: 0; border-top: 1px solid var(--conn); }
.cn.v.dash::before { border-left-style: dashed; }
.cn.h.dash::before { border-top-style: dashed; }
.cn.v2 { height: 40px; }
.cn.v2::before, .cn.v2::after { top: 0; bottom: 0; border-left: 1px solid var(--conn); }
.cn.v2::before { left: calc(50% - 12.5px); }
.cn.v2::after { left: calc(50% + 11.5px); }

.hd { position: absolute; width: 0; height: 0; border: 4px solid transparent; }
.hd-d { bottom: 0; left: calc(50% - 4px); border-top: 6px solid var(--conn); border-bottom-width: 0; }
.hd-u { top: 0; left: calc(50% - 4px); border-bottom: 6px solid var(--conn); border-top-width: 0; }
.hd-r { right: 0; top: calc(50% - 4px); border-left: 6px solid var(--conn); border-right-width: 0; }
.hd-l { left: 0; top: calc(50% - 4px); border-right: 6px solid var(--conn); border-left-width: 0; }
.hd-d.off-l { left: calc(50% - 16px); }
.hd-u.off-r { left: calc(50% + 8px); }

.cl { position: absolute; font: 400 11.5px/14px var(--sans); color: var(--muted); white-space: nowrap; }
.cn.h .cl, .cn.lm .cl, .cn.lx-h .cl { left: 0; right: 0; bottom: calc(50% + 5px); text-align: center; white-space: normal; }
.cn.v .cl, .cl.side { left: calc(50% + 10px); top: 50%; transform: translateY(-50%); }
.cl.left { left: auto; right: calc(50% + 10px); top: 50%; transform: translateY(-50%); }

/* Visibility per breakpoint (narrow is the default) */
.only-w, .only-m, .not-n { display: none; }

/* Narrow: one vertical flow in reading order. Expert and Monitor hang off a spine on the left
   that runs from the Project Manager to the delivery team. */
.tier-top .a-fo, .tier-top .a-co, .tier-top .a-dr, .tier-top .a-pm { width: 100%; }
.cn.sp { height: 30px; }
.cn.sp::before { left: 12px; top: 0; bottom: 0; border-left: 1px solid var(--conn); }
.cn.sp .cl { left: 32px; top: 50%; transform: translateY(-50%); }
.hd.at-sp { left: 8.5px; }
.blk.side { margin-left: 32px; }
.blk.side::before { left: -21px; top: -1px; bottom: -1px; border-left: 1px solid var(--conn); }
.blk.side::after { left: -21px; width: 20px; top: 50%; border-top: 1px solid var(--conn); }
.blk.side::before, .blk.side::after { content: ''; position: absolute; }
.a-ex.side::after { border-top-style: dashed; }
.tk { display: block; position: absolute; left: -20px; top: calc(50% - 3.5px); width: 0; height: 0; border: 4px solid transparent; border-right: 6px solid var(--conn); border-left-width: 0; }
.tier-team { background: var(--tint); border: 1px solid var(--line); border-radius: 6px; padding: var(--pp); }
.tier-team .a-bo { margin-top: 12px; }

/* Medium */
@media (min-width: 640px) {
  .page { padding: 44px 28px 36px; }
  .head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .live { grid-column: auto; justify-self: end; align-self: start; }
  :root { --pp: 16px; }
  .only-n { display: none; }
  .only-m, .not-n { display: block; }
  .blk { text-align: center; padding: 14px 16px; }
  .blk.side { margin-left: 0; }
  .blk.side::before, .blk.side::after, .tk { display: none; }
  .tier-team .a-bo { margin-top: 0; }
  .cn.v.a-t2 { height: auto; }
  .cn.v.del { height: 28px; }

  .tier { display: grid; grid-template-columns: minmax(0, 1fr) var(--g) minmax(0, 1fr); }
  .tier-top { grid-template-areas:
      "fo fo fo" "c1 c1 c1" "co co co" "c2 c2 c2" "dr dr dr" "c3 c3 c3" "pm pm pm" "ma t1 mb" "ex t2 mo"; }
  .tier-top .a-fo, .tier-top .a-co, .tier-top .a-dr, .tier-top .a-pm { width: 64%; justify-self: center; }
  .cn.a-ma, .cn.a-t1, .cn.a-mb { height: 36px; }
  .tier-team { grid-template-areas: "bu br re" ". . rv" "bo . se"; }
  .tier-env { grid-template-areas: "cs cs cs" "te dp pr"; }

  /* Security -> Test: an L from the Security column of the padded panel to the Test column. */
  .cn.lm { height: 48px; }
  .cn.lm::before { top: 0; height: 50%; left: calc((100% - var(--g)) / 4); right: calc((100% - 2 * var(--pp) - 2px - var(--g)) / 4 + var(--pp) + 1px); border-right: 1px solid var(--conn); border-bottom: 1px solid var(--conn); }
  .cn.lm::after { top: 50%; bottom: 0; left: calc((100% - var(--g)) / 4); border-left: 1px solid var(--conn); }
  .cn.lm .hd-d { left: calc((100% - var(--g)) / 4 - 3.5px); }
  .cn.lm .cl { left: calc((100% - var(--g)) / 4); right: calc((100% - var(--g)) / 4); }
}

/* Wide: the full team chart */
@media (min-width: 1000px) {
  .page { padding: 56px 40px 40px; }
  .only-m, .not-w { display: none; }
  .only-w { display: block; }
  .tier-top { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) 96px minmax(0, 1fr);
    grid-template-areas:
      ".  .  fo .  ." ".  .  c1 .  ." "lh lh co .  ." "lv .  c2 .  ." "lv .  dr .  ." "lv .  c3 .  ." "ex cx pm cm mo"; }
  .tier-top .a-fo, .tier-top .a-co, .tier-top .a-dr, .tier-top .a-pm { width: auto; justify-self: stretch; }
  .tier-team { grid-template-columns: repeat(3, minmax(0, 1fr) var(--g)) minmax(0, 1fr); grid-template-areas: "bu br re rs se . bo";
    background: none; border: 0; border-radius: 0; padding: 0; }
  .tier-env { grid-template-columns: repeat(3, minmax(0, 1fr) var(--g)) minmax(0, 1fr); grid-template-areas: ". . . . cs . ." ". . . . te dp pr"; }
  .cn.v.a-cs { height: 40px; }

  /* Expert -> Consultant: dashed L from the top of the Expert block to the Consultant's side. */
  .cn.lx-h::before { top: calc(50% - .5px); left: calc((100% - 96px) / 2); right: 0; border-top: 1px dashed var(--conn); }
  .cn.lx-h::after { top: 50%; bottom: 0; left: calc((100% - 96px) / 2); border-left: 1px dashed var(--conn); }
  .cn.lx-h .cl { left: calc((100% - 96px) / 2); }
  .cn.lx-v::before { left: calc(50% - .5px); top: 0; bottom: 0; border-left: 1px dashed var(--conn); }

  /* Project Manager -> the four: trunk, bus and four drops at the card centres. */
  .cn.bus { height: 40px; }
  .cn.bus::before { left: calc(50% - .5px); top: 0; height: 50%; border-left: 1px solid var(--conn); }
  .cn.bus::after { top: calc(50% - .5px); left: calc((100% - 3 * var(--g)) / 8); right: calc((100% - 3 * var(--g)) / 8); border-top: 1px solid var(--conn); }
  .drop { position: absolute; top: 50%; bottom: 0; width: 0; border-left: 1px solid var(--conn); }
  .drop::after { content: ''; position: absolute; bottom: 0; left: -4.5px; border: 4px solid transparent; border-top: 6px solid var(--conn); border-bottom-width: 0; }
  .drop:nth-child(1) { left: calc((100% - 3 * var(--g)) / 8 - .5px); }
  .drop:nth-child(2) { left: calc((100% - 3 * var(--g)) * 3 / 8 + var(--g) - .5px); }
  .drop:nth-child(3) { left: calc((100% - 3 * var(--g)) * 5 / 8 + 2 * var(--g) - .5px); }
  .drop:nth-child(4) { left: calc((100% - 3 * var(--g)) * 7 / 8 + 3 * var(--g) - .5px); }
  /* "change as draft" sits just left of the Back-office drop, below the bus line. */
  .cn.bus .bus-l { top: calc(50% + 3px); right: calc(100% - (100% - 3 * var(--g)) * 7 / 8 - 3 * var(--g) + 8px); }
}

/* Grid placement (only takes effect where the tier is a grid) */
.a-fo { grid-area: fo; } .a-c1 { grid-area: c1; } .a-co { grid-area: co; } .a-c2 { grid-area: c2; }
.a-dr { grid-area: dr; } .a-c3 { grid-area: c3; } .a-pm { grid-area: pm; } .a-ex { grid-area: ex; }
.a-mo { grid-area: mo; } .a-cx { grid-area: cx; } .a-cm { grid-area: cm; } .a-ma { grid-area: ma; }
.a-mb { grid-area: mb; } .a-t1 { grid-area: t1; } .a-t2 { grid-area: t2; }
.lx-h { grid-area: lh; } .lx-v { grid-area: lv; }
.a-bu { grid-area: bu; } .a-br { grid-area: br; } .a-re { grid-area: re; } .a-rs { grid-area: rs; }
.a-rv { grid-area: rv; } .a-se { grid-area: se; } .a-bo { grid-area: bo; }
.a-cs { grid-area: cs; } .a-te { grid-area: te; } .a-dp { grid-area: dp; } .a-pr { grid-area: pr; }

/* ---------- Shapes + labels, never colour alone ---------- */
.sh { display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; }
.sh-ok, .sh-running { background: var(--s-ok); }
.sh-info { border: 1.5px solid var(--s-info); }
.sh-warn, .sh-updating { width: 8px; height: 8px; border-radius: 0; background: var(--s-warn); transform: rotate(45deg); }
.sh-down { width: 0; height: 0; border-radius: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--s-down); }
.sh-unknown { border: 1.5px dashed var(--muted); }
.st-running { color: var(--s-ok); } .st-updating { color: var(--s-warn); } .st-down { color: var(--s-down); } .st-unknown { color: var(--muted); }

/* ---------- Environment cards ---------- */
.env-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); padding: 20px 22px 18px; }
.card::before { content: ''; position: absolute; left: 22px; top: -1px; width: 28px; height: 1px; background: var(--gold); }
.card h3 { color: var(--muted); font-size: 15px; line-height: 20px; }
.card .state { display: flex; align-items: center; gap: 12px; margin-top: 10px; font: 500 22px/28px var(--serif); }
.card .state .sh { width: 12px; height: 12px; }
.card .state .sh-warn, .card .state .sh-updating { width: 10px; height: 10px; }
.card .state .sh-down { width: 0; height: 0; border-left-width: 7px; border-right-width: 7px; border-bottom-width: 12px; }
.card .release { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.card .release .key { font: 500 11px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card .release .rel { font-size: 13px; }
.card .ready { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); }
.card .ready[hidden] { display: none; }

/* ---------- Updates: quiet timeline ---------- */
.upd-list { list-style: none; margin: 0; padding: 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); }
.upd-list:empty { display: none; }
.upd-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.upd-list li:first-child { border-top: 0; }
.upd-list .when { grid-column: 1 / -1; font: 400 12px/18px var(--mono); color: var(--ink); }
.upd-list .when .rel { margin-left: 8px; color: var(--muted); font: 400 12px/18px var(--sans); }
.upd-list .sh { justify-self: center; }
.upd-list .text { overflow-wrap: anywhere; }
.empty { padding: 4px 0; }

@media (min-width: 640px) {
  .env-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .upd-list { padding: 0 22px; }
  .upd-list li { grid-template-columns: 150px 14px minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
  .upd-list .when { grid-column: auto; }
  .upd-list .when .rel { display: block; margin-left: 0; }
}

.foot { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .blk.is-active { animation: none; box-shadow: 0 0 0 2.5px var(--active), var(--shadow); }
  .live[data-kind="live"] .live-dot { animation: none; }
}