/* the status page of Void. landing.css is loaded before this file and gives the plate: the pixel face, the greys, the bar
   at the top, the buttons, the foot, no scroll bar, stillness when motion is not welcome. here is only what this page adds,
   and everything it needs beyond that plate, so that it stands on any landing.css that has those things.

   the page answers one question first: does it work? on a wide screen the answer is a column on the left, where the eye
   lands: a sentence that names what does not work, a card for each such thing with what it means for a customer, how
   fresh the answer is, and under it the outages that are over. beside it the rack, drawn by the script in the pixel
   language of the landing's pictures (3px to a picture pixel, five greys, dither), a unit to a component, and its legend
   at the height of the units (the script gives the heights: --y0, --unit, --pitch, --rack). on a narrower screen the
   answer stands above the rack. the colours of a state are the muted three of the panel (ok / warn / bad): on lights and
   day cells, and on what is not well — its word, its card, its unit and the line from it. a day without trouble is a
   quieter green, so that a strip of them stays calm and a bad day is seen at once */
:root{--warn:#d9b06a;--bad:#e07a7a;--ok-q:#4b735b}
/* the page is short: its foot stands at the foot of the window */
body{min-height:100svh;display:flex;flex-direction:column}
.foot{margin-top:auto}
.st{width:100%;max-width:var(--w);margin:0 auto;padding:calc(var(--headh) + 24px) var(--gut) 32px;background:var(--bg);
  --lamp:var(--faint);--small:400 11px/18px "Void Mono Small",ui-monospace,monospace;--cap:700 11px/18px "Void Mono Small",ui-monospace,monospace}
.st :where(h1,h2,h3,ul,ol,p){margin:0}
.st :where(ul,ol){padding:0;list-style:none}
.st :where(i){font-style:normal}
.st-nos{color:var(--ink)}
/* said to a screen reader, not drawn */
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.st-cap{font:var(--cap);letter-spacing:1px;text-transform:uppercase;color:var(--faint)}
/* the colour of a state, for whatever carries one */
.s-ok{--c:var(--ok)}
.s-degraded{--c:var(--warn)}
.s-down{--c:var(--bad)}

/* ---------- the scene: the answer, the rack, the legend, what the cells mean ---------- */
.st-scene{--colw:clamp(360px,36vw,420px);display:grid;grid-template-columns:var(--colw) auto minmax(0,1fr);grid-template-areas:"col rk lg" "col key key";grid-template-rows:auto 1fr;align-items:start}
.st-col{grid-area:col;display:flex;flex-direction:column;min-height:var(--rack);margin-right:40px}
.st-rk{grid-area:rk;min-width:0}
#rack{display:block;image-rendering:pixelated}
.st-lg{grid-area:lg;min-width:0}
.st-key{grid-area:key}

/* ---------- the answer: a square lamp and a sentence; how many work; how fresh the answer is ---------- */
.st[data-lamp="ok"]{--lamp:var(--ok)}
.st[data-lamp="degraded"]{--lamp:var(--warn)}
.st[data-lamp="down"]{--lamp:var(--bad)}
.st-say{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;padding-bottom:16px}
.st h1{display:flex;align-items:baseline;gap:20px;font-size:48px;line-height:52px;color:var(--top)}
.st-lamp{flex:none;position:relative;top:-3px;width:20px;height:20px;background:var(--lamp);transition:background-color .3s ease}
#say{min-width:0}
/* a sentence longer than two lines of the large face is set a size down */
.st h1.st-h-s{gap:16px;font-size:32px;line-height:38px}
.st h1.st-h-s .st-lamp{top:-1px;width:16px;height:16px}
.st-count{margin-top:12px;padding-left:40px;color:var(--ink)}
.st-h-s+.st-count{padding-left:32px}
.st-count:empty{display:none}
.st-fresh{margin-top:10px;padding-left:40px;font:var(--small);letter-spacing:.5px}
.st-h-s~.st-fresh,div:has(>.st-h-s)+.st-fresh{padding-left:32px}
.st-f1,.st-f2{display:block}
.st-f1{color:var(--hi)}
.st-f2{color:var(--mute)}
/* without a fresh answer the words of freshness are the news: they are said brighter */
.st[data-state="old"] .st-f1,.st[data-state="none"] .st-f1,.st[data-state="outside"] :is(.st-f1,.st-f2){color:var(--top)}

/* what is wrong now: a card to each thing that is not well, framed, with a rule in its colour */
.st-now{display:grid;gap:8px;margin-top:18px}
.st-card{padding:8px 14px 10px;background:var(--pn);border:1px solid var(--line2);border-left:3px solid var(--c)}
.st-dot{flex:none;display:inline-block;width:10px;height:10px;margin-right:10px;background:var(--c)}
.st-card-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;color:var(--top)}
.st-card-h .st-dot{position:relative;top:-1px;margin-right:0}
.st-card-w{font-weight:700;color:var(--c)}
.st-card-t{display:flex;align-items:center;font:var(--small);letter-spacing:.5px;color:var(--hi)}
.st-card-h+.st-card-t{padding-left:20px}
.st-card-x{margin-top:4px;color:var(--ink)}
.st-card-h~.st-card-x{padding-left:20px}
/* with more than one card each says its meaning in the small face, so that three of them stay in the column */
.st-now:has(>li+li) .st-card-x{font:var(--small);letter-spacing:.5px;color:var(--hi)}

/* ---------- what is over: under the answer, quiet ---------- */
.st-past{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;padding-top:12px;border-top:1px solid var(--line)}
.st-past h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px;font-size:16px;line-height:26px}
.st-past-n{color:var(--hi)}
#hist{margin-top:6px}
#hist li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline;padding:5px 0 6px;border-top:1px solid var(--line)}
#hist:focus-visible{outline-offset:2px}
.st-h-n{display:flex;align-items:baseline;gap:10px;min-width:0;color:var(--hi);overflow-wrap:anywhere}
.st-h-n .led{position:relative;top:-2px}
.st-h-n b{font-weight:700;color:var(--ink)}
.st-h-k,.st-h-l,.st-h-w{font:var(--small);letter-spacing:.5px}
.st-h-k{color:var(--mute);white-space:nowrap}
.st-h-l{color:var(--hi);white-space:nowrap}
.st-h-w{grid-column:1 / -1;padding-left:16px;color:var(--mute)}
.st-fold{padding-top:8px;border-top:1px solid var(--line)}
.st-more{margin:0;padding:0;border:0;border-radius:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  font:var(--small);letter-spacing:.5px;color:var(--hi);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px;text-decoration-thickness:1px}
.st-more:hover{color:var(--top);text-decoration-color:var(--top)}
/* all of them shown beside the rack: the column keeps the height of the rack and the lines under it, and the list turns
   inside it (under the rack, on a narrower screen, the list simply goes on down the page) */
@media (min-width:1081px){
  .st-col.st-open{height:var(--room,var(--rack))}
  .st-col.st-open .st-say{flex:0 0 auto;justify-content:flex-start}
  .st-col.st-open .st-past{flex:1 1 0}
  .st-col.st-open #hist{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;position:relative}
}

/* ---------- the legend: a line to a unit, at the height of the unit ---------- */
.st-lg-h,.st-u{display:grid;grid-template-columns:minmax(0,1fr) 119px 64px;column-gap:10px;padding:0 8px}
.st-lg-h{align-items:end;height:var(--y0,45px);padding-bottom:5px;font:var(--cap);letter-spacing:1px;text-transform:uppercase;color:var(--faint)}
.st-lg-h span:not(:first-child){text-align:right;white-space:nowrap}
.st-u{grid-template-rows:24px 18px;grid-template-areas:"l l l" "h s p";align-items:center;height:var(--unit,42px);margin-bottom:calc(var(--pitch,54px) - var(--unit,42px))}
.st-u-l{grid-area:l;display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.st-u-n{min-width:0;font-size:16px;line-height:24px;color:var(--hi);white-space:nowrap;overflow:hidden}
.st-u-w{flex:none;font:var(--small);letter-spacing:.5px;color:var(--mute);white-space:nowrap}
.st-u-h{grid-area:h;min-width:0;font:var(--small);letter-spacing:.5px;color:var(--mute);white-space:nowrap;overflow:hidden}
.st-u-p{grid-area:p;font:var(--small);letter-spacing:.5px;color:var(--mute);text-align:right;white-space:nowrap}
.st-u.hot .st-u-n{color:#fff}
/* a component that is not well: its line is lit and framed, its name white, its word large and in its colour */
.st-u.st-bad{background:var(--fill);box-shadow:inset 0 0 0 1px var(--line2)}
.st-u.st-bad .st-u-n{color:var(--top)}
.st-u.st-bad .st-u-w{font:700 16px/24px "Void Mono",ui-monospace,monospace;letter-spacing:0;color:var(--c)}
.st-u.st-bad .st-u-h{color:var(--hi)}
.st-u.st-unk .st-u-n{color:var(--ink)}
.st-u.st-unk .st-u-w{color:var(--faint)}
/* the state mark of the panel: a 6px square (landing.css has a .down of its own, the arrows of the first screen) */
.led{flex:none;display:inline-block;width:6px;height:6px;background:var(--faint)}
.led.s-ok{background:var(--ok)}
.led.s-degraded{background:var(--warn)}
.led.s-down{background:var(--bad)}
/* thirty days, a cell to a day, the last one today. the strip is one control: a pointer, a finger or the arrow keys walk
   along it and the page says what that day was */
.strip{grid-area:s;justify-self:end;display:grid;grid-template-columns:repeat(var(--n),3px);grid-auto-rows:10px;gap:1px;cursor:crosshair;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.strip i,.st-key i{display:block;background:var(--line2)}
.strip i.s-ok,.st-key i.s-ok{background:var(--ok-q)}
.strip i.s-degraded,.st-key i.s-degraded{background:var(--warn)}
.strip i.s-down,.st-key i.s-down{background:var(--bad)}
.strip i.sel{outline:1px solid var(--top);outline-offset:1px}
.strip:focus-visible{outline:1px solid var(--hi);outline-offset:4px}

/* ---------- what the cells and the numbers mean, and what the day under the pointer was ---------- */
.st-key{margin-top:16px;padding:10px 8px 0;border-top:1px solid var(--line);font:var(--small);letter-spacing:.5px;color:var(--mute)}
.st-read{min-height:18px;color:var(--mute)}
.st-read.on{color:var(--top)}
.st-key ul{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:4px}
.st-key li{display:flex;align-items:center;gap:7px}
.st-key i{flex:none;width:6px;height:12px}
.st-key .st-key-t{color:var(--faint)}

/* the page could not ask, or what it knows is old: it shows what it knew, and it looks like it */
.st[data-state="none"] .st-dim,.st[data-state="old"] .st-dim,.st[data-state="outside"] .st-past{opacity:.5}

/* ---------- narrower: the answer above the rack, what is over under the legend ---------- */
@media (max-width:1080px){
  .st-scene{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"say say" "rk lg" "key key" "past past"}
  .st-col{display:contents}
  .st-say{grid-area:say;justify-content:flex-start;padding-bottom:26px}
  .st-now{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .st-past{grid-area:past;margin-top:28px}
}
/* under a finger the strip is taken hold of in a band higher than itself; the band is room around it, the layout stays */
@media (pointer:coarse),(max-width:1080px){
  .strip{padding:8px 0;margin:-8px 0}
  .st-more{padding:13px 0;margin:-13px 0}
}
/* a phone: the rack is a narrow column, a unit is three lines high: the name; how it is and since when (or the day under
   the finger); thirty days and the share of time */
@media (max-width:700px){
  .st{padding-top:calc(var(--headh) + 16px);padding-bottom:28px}
  .st h1{gap:14px}
  .st-lamp{width:16px;height:16px;top:-2px}
  .st h1.st-h-s{gap:12px}
  .st h1.st-h-s .st-lamp{width:14px;height:14px}
  .st-count,.st-fresh,.st-h-s+.st-count,div:has(>.st-h-s)+.st-fresh{padding-left:0}
  .st-say{padding-bottom:22px}
  .st-now{grid-template-columns:minmax(0,1fr);margin-top:18px}
  .st-lg-h,.st-u{grid-template-columns:auto minmax(0,1fr) 64px;column-gap:8px;padding:0 4px}
  .st-lg-h span:nth-child(2){display:none}
  .st-lg-h span:first-child{grid-column:1 / 3}
  .st-u{grid-template-rows:24px 18px 18px;grid-template-areas:"n n n" "w h h" "s s p"}
  .st-u-l{display:contents}
  .st-u-n{grid-area:n}
  .st-u-w{grid-area:w;align-self:center}
  .st-u.st-bad .st-u-w{line-height:18px}
  .strip{justify-self:start}
  .st-u.st-reading .st-u-w{display:none}
  .st-u.st-reading .st-u-h{grid-column:1 / -1;color:var(--top)}
  .st-key{padding:10px 4px 0}
  .st-read{display:none}
}