/* Tissue Mast web app. Every colour is a --tissue-* token from /css/tokens.css,
   so a dark stamp on <html> repaints the whole app. Square corners, one weight
   of hairline, no masks, filters or blurs (Safari). */

*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0; min-height: 100% }
body {
  font-family: var(--tissue-font-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  font-size: 13px; line-height: 1.55;
  color: var(--tissue-ink); background: var(--tissue-bg);
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important }
a { color: var(--tissue-accent) }
a:hover { color: var(--tissue-accent-dp) }
:focus-visible { outline: 2px solid var(--tissue-accent); outline-offset: 2px }
h1 { font-size: 24px; font-weight: 500; margin: 0; line-height: 1.25; overflow-wrap: anywhere }
h2 { font-size: 15px; font-weight: 500; margin: 0 }
p { margin: 0 }
p + p { margin-top: 8px }
em { font-style: italic }
ol, ul { margin: 0; padding-left: 20px }
.boot { padding: 40px }

/* text */
.sage { color: var(--tissue-ink-2) }
.dim { color: var(--tissue-ink-3) }
.num { font-variant-numeric: tabular-nums }
.help { font-size: 12px; font-style: italic; color: var(--tissue-ink-2); margin-top: 6px }
.err { color: var(--tissue-danger) }
.ok-text { color: var(--tissue-accent) }
code { background: var(--tissue-panel); font-family: inherit; font-size: 12.5px; padding: 0 3px }
pre {
  background: var(--tissue-panel); border: 1px solid var(--tissue-line);
  padding: 12px 14px; font-size: 12.5px; margin: 6px 0 0; font-family: inherit;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.mono-big { font-size: 34px; font-weight: 500; letter-spacing: .08em }

/* controls */
input, select, textarea, button { font: inherit; color: inherit }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=url], input[type=date], input[type=month], select, textarea {
  border: 1px solid var(--tissue-line-2); background: var(--tissue-bg);
  padding: 7px 10px; border-radius: 0; max-width: 100%;
}
textarea { width: 100%; resize: vertical }
input[type=checkbox], input[type=radio] { accent-color: var(--tissue-accent); margin: 3px 0 0 }
input.short { width: 7em }
input.mid { width: 14em }
input.wide, select.wide { width: 100% }
.btn, .btn2, .btn3, .btnd {
  display: inline-block; cursor: pointer; text-decoration: none;
  border-radius: 0; font-size: 13px; line-height: 1.4;
}
.btn { background: var(--tissue-accent); color: var(--tissue-on-accent); border: 1px solid var(--tissue-accent); padding: 8px 14px; font-weight: 500 }
.btn:hover { color: var(--tissue-on-accent); background: var(--tissue-accent-dp) }
.btn2 { background: var(--tissue-bg); color: var(--tissue-ink); border: 1px solid var(--tissue-line-2); padding: 7px 13px }
.btn2:hover { color: var(--tissue-ink); border-color: var(--tissue-ink-3) }
.btn2.up { color: var(--tissue-accent); border-color: var(--tissue-accent) }
.btn2.up:hover { color: var(--tissue-accent-dp); border-color: var(--tissue-accent-dp) }
.btn3 { background: none; border: 0; padding: 0; color: var(--tissue-ink-2); text-decoration: underline; text-underline-offset: 2px }
.btn3:hover { color: var(--tissue-ink) }
.btnd { background: var(--tissue-bg); color: var(--tissue-danger); border: 1px solid var(--tissue-danger); padding: 7px 13px }
button:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed }
.actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 12px }
.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }

/* state tags */
.st { display: inline-block; padding: 0 6px; font-size: 12px; font-weight: 500; border: 1px solid; line-height: 18px; white-space: nowrap }
.st-ok { color: var(--tissue-accent); border-color: var(--tissue-accent) }
.st-late { color: var(--tissue-amber); border-color: var(--tissue-amber) }
.st-flat { color: var(--tissue-on-accent); background: var(--tissue-danger); border-color: var(--tissue-danger) }
.st-mute { color: var(--tissue-ink-3); border-color: var(--tissue-line-2) }
.st-blk { color: var(--tissue-plate-ink); background: var(--tissue-plate-paper); border-color: var(--tissue-rail) }

/* tables: each sits in its own scroller, so a phone never scrolls the page sideways */
.tw { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch }
table { border-collapse: collapse; width: 100%; font-size: 13px }
th { font-size: 12px; font-weight: 400; color: var(--tissue-ink-2); text-align: left; border-bottom: 1px solid var(--tissue-line-2); padding: 0 12px 6px 0; white-space: nowrap }
td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--tissue-line); vertical-align: top }
tr.sel td { background: var(--tissue-panel); border-bottom-color: var(--tissue-accent) }
td.out { max-width: 32em; overflow-wrap: anywhere }
td.nw, .nw { white-space: nowrap }
/* a probe's last result: wraps at a readable width instead of widening the table */
td.nm { max-width: 24em; overflow-wrap: break-word }
td.res { min-width: 12em; max-width: 22em; overflow-wrap: anywhere }

/* shell */
.skip { position: absolute; left: -9999px }
.skip:focus { left: 8px; top: 8px; background: var(--tissue-bg); padding: 6px 10px; z-index: 10 }
.top {
  height: 48px; display: flex; align-items: center; gap: 16px; padding: 0 20px;
  border-bottom: 1px solid var(--tissue-line);
}
.crumb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.crumb a { color: var(--tissue-ink); text-decoration: none }
.crumb .brand { font-weight: 600 }
.top-r { display: flex; gap: 16px; align-items: center; white-space: nowrap }
.top-r a { color: var(--tissue-ink-2) }
.menu { display: none }
.body { display: flex; min-height: calc(100vh - 48px) }
/* The shared header from /chrome.js. Its left zone is the top of this nav
   column, so the two read the same width and panel. Until the element
   upgrades it holds the bar's height, so the page does not jump. */
:root { --tissue-nav-w: 216px }
tissue-app-header { display: block; min-height: 48px }
.nav { width: var(--tissue-nav-w); flex: none; background: var(--tissue-panel); border-right: 1px solid var(--tissue-line); padding-bottom: 24px }
.nav .grp { padding: 16px 16px 4px; font-size: 11px; color: var(--tissue-ink-3) }
.nav a { display: block; padding: 5px 16px 5px 22px; color: var(--tissue-ink-2); text-decoration: none; border-left: 2px solid transparent }
.nav a:hover { color: var(--tissue-ink) }
.nav a.on { color: var(--tissue-ink); background: var(--tissue-bg); border-left-color: var(--tissue-accent) }
main { flex: 1; min-width: 0; padding: 30px 40px 40px; display: flex; flex-direction: column; gap: 28px }
main:focus { outline: none }

/* page furniture */
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap }
.head > div:first-child { max-width: 46em; display: flex; flex-direction: column; gap: 6px }
.head-side { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.sec { font-size: 15px; font-weight: 500; padding-bottom: 8px; border-bottom: 1px solid var(--tissue-line-2); margin-bottom: 4px }
.sec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--tissue-line-2); padding-bottom: 8px; margin-bottom: 4px }
.sec-row .sec { border: 0; padding: 0; margin: 0 }
.row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--tissue-line) }
.row > :last-child { text-align: right; overflow-wrap: anywhere }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start }
.cols-even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start }
.stack { display: flex; flex-direction: column; gap: 24px; min-width: 0 }
.stack-s { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.panel { background: var(--tissue-panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px }
.panel-title { font-weight: 500 }
.note { border-left: 2px solid var(--tissue-rail); background: var(--tissue-panel); padding: 10px 14px; max-width: 52em }
.note-err { border-left-color: var(--tissue-danger) }
.unbuilt { font-size: 12px; color: var(--tissue-ink-2); border-left: 2px solid var(--tissue-amber); padding: 2px 0 2px 10px }
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center }
.loading { padding: 8px 0 }
.msg-line { min-height: 1.55em }

/* stat grid on the overview */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--tissue-line) }
.budget { margin: 10px 0 0 }
.evidence { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 0 }
.evidence dt { color: var(--tissue-sage, inherit) }
.evidence dd { margin: 0 }
.stats > div { padding: 14px 16px; border-right: 1px solid var(--tissue-line); display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.stats > div:last-child { border-right: 0 }
.stats .big { font-size: 26px; font-weight: 500; line-height: 1.2 }
.stats .big.alarm { color: var(--tissue-danger) }

/* forms */
.fld { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 28px; padding: 16px 0; border-bottom: 1px solid var(--tissue-line) }
.lbl { font-weight: 500; padding-top: 8px }
.radio { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; cursor: pointer }
.radios { display: flex; flex-direction: column; gap: 2px }
.pair { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 8px 12px; align-items: center }

/* charts */
.spark { display: block; overflow: visible }
/* A full-width strip shrinks with the column instead of pushing the page sideways. */
.spark.fluid { width: 100%; max-width: 640px; height: auto }
.tk { stroke-width: 1.5 }
.tk-ok { stroke: var(--tissue-accent) }
.tk-fail, .tk-down, .tk-page { stroke: var(--tissue-danger) }
.tk-late, .tk-slow, .tk-tls, .tk-loud { stroke: var(--tissue-amber) }
.tk-blocked { stroke: var(--tissue-rail) }
.tk-quiet, .tk-start { stroke: var(--tissue-ink-3) }
.tk-base { stroke: var(--tissue-line-2); stroke-width: 1 }
.axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--tissue-ink-3); margin-top: 4px }
.bars { display: flex; gap: 1px; height: 26px; align-items: stretch; min-width: 0 }
.bar { flex: 1; min-width: 1px }
.bar-ok { background: var(--tissue-accent) }
.bar-late { background: var(--tissue-amber) }
.bar-down { background: var(--tissue-danger) }
.bar-none { background: var(--tissue-line) }
.bar-pad { flex: 0 1 0; min-width: 0; border-bottom: 1px solid var(--tissue-line) }
/* a probe's round sheet: one row per place, one column per round, each cell
   a check's milliseconds shaded by --shade (set per cell, 3% to 30% of ink) */
.sheet-w { margin-top: 4px }
.sheet { width: auto; font-variant-numeric: tabular-nums; font-size: 12px }
.sheet th, .sheet td { border: 0; padding: 0; white-space: nowrap }
.sheet .sp { color: var(--tissue-ink-2); text-align: left; padding: 0 14px 0 0; font-size: 12px; position: sticky; left: 0; background: var(--tissue-bg) }
.sheet thead th { font-size: 11px; color: var(--tissue-ink-3); padding: 0 0 4px; text-align: left }
.sheet .rt { min-width: 46px }
.sheet .sm { color: var(--tissue-ink-2); text-align: right; padding: 0 0 0 14px; border-left: 1px solid var(--tissue-line-2) }
.sheet thead .sm { padding-left: 14px; text-align: right }
.sc { min-width: 46px; height: 24px; text-align: right; padding: 0 6px !important; border-right: 1px solid var(--tissue-bg) !important; border-bottom: 1px solid var(--tissue-bg) !important; background: color-mix(in srgb, var(--tissue-ink) var(--shade, 0%), transparent) }
.sc-slow { background: color-mix(in srgb, var(--tissue-amber) 32%, transparent); color: var(--tissue-ink) }
.sc-tls { box-shadow: inset 0 -2px 0 var(--tissue-amber) }
.sc-down { background: var(--tissue-danger); color: var(--tissue-on-accent); text-align: center }
.sc-blocked { background: var(--tissue-plate-paper); color: var(--tissue-plate-ink); box-shadow: inset 0 0 0 1px var(--tissue-rail); text-align: center }
.sc-none { background: transparent; box-shadow: inset 0 0 0 1px var(--tissue-line) }
.meter { display: inline-block; width: 140px; height: 6px; background: var(--tissue-line); vertical-align: middle; margin-right: 10px }
.meter > span { display: block; height: 100%; background: var(--tissue-accent) }
.usage-row { display: grid; grid-template-columns: 9em minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--tissue-line); align-items: center }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--tissue-line) }
.week > div { padding: 8px; border-right: 1px solid var(--tissue-line); min-width: 0; overflow-wrap: anywhere }
.week > div:last-child { border-right: 0 }
.phone-card { border: 1px solid var(--tissue-line-2); padding: 12px 14px; max-width: 30em; display: flex; flex-direction: column; gap: 6px }

/* policy step grid */
.steps { display: grid; grid-template-columns: 5em 11em minmax(0, 1fr) 7em 5em; gap: 8px 12px; align-items: center }
.steps .h { font-size: 12px; color: var(--tissue-ink-2) }
.order-item { display: flex; gap: 12px; align-items: center; padding: 5px 0 }

/* public status page */
.pub { max-width: 820px; margin: 0 auto; padding: 40px 16px 60px; display: flex; flex-direction: column; gap: 24px }
.pub-comp { display: grid; grid-template-columns: 11em minmax(0, 1fr) 5em; gap: 12px; align-items: center; padding: 8px 0 }
.banner { padding: 12px 16px; border: 1px solid var(--tissue-line-2) }
.banner-ok { border-color: var(--tissue-accent) }
.banner-degraded { border-color: var(--tissue-amber) }
.banner-down { border-color: var(--tissue-danger) }

@media (max-width: 960px) {
  .cols, .cols-even { grid-template-columns: minmax(0, 1fr) }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .stats > div:nth-child(2n) { border-right: 0 }
  .stats > div:nth-child(-n+4) { border-bottom: 1px solid var(--tissue-line) }
}

@media (max-width: 760px) {
  /* tables drop the columns a row's own page repeats, so the result stays on screen */
  th.extra, td.extra { display: none }
  td.res { min-width: 10em }
  td.nm .dim { display: none }
  .top { padding: 0 16px; gap: 12px }
  .menu { display: inline-block }
  .top-r a:not(:first-child) { display: none }
  .body { display: block }
  .nav { display: none; width: auto; border-right: 0; border-bottom: 1px solid var(--tissue-line) }
  body.nav-open .nav { display: block }
  main { padding: 20px 16px 32px; gap: 22px }
  h1 { font-size: 21px }
  .fld { grid-template-columns: minmax(0, 1fr); gap: 6px }
  .lbl { padding-top: 0 }
  .pair { grid-template-columns: minmax(0, 1fr) }
  .usage-row { grid-template-columns: minmax(0, 1fr) }
  .steps { grid-template-columns: minmax(0, 1fr) }
  .steps .h { display: none }
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .pub-comp { grid-template-columns: minmax(0, 1fr) 4em }
  .pub-comp .bars { grid-column: 1 / -1; grid-row: 2 }
  .meter { width: 90px }
  .mono-big { font-size: 28px }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* incident: what Mast knows */
.knows { margin-top: 20px }
.knows > p { margin: 8px 0 }
.flags { list-style: none; padding: 0; margin: 4px 0 }
.flags li { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--tissue-line) }
.flags .mark { width: 1ch; flex: none; font-weight: 500 }
.flags .warn .mark { color: var(--tissue-amber) }
.flags .ok .mark { color: var(--tissue-accent) }
.flags .info .mark { color: var(--tissue-ink-3) }
.knows .row > :last-child { text-align: left }
.knows .cannot { font-size: 12px; margin-top: 8px }

/* in-page confirm: a plain modal, no blur behind it (Safari) */
.dlg { border: 1px solid var(--tissue-line-2); background: var(--tissue-bg); color: var(--tissue-ink); padding: 20px 22px; width: min(30em, calc(100vw - 32px)); max-width: calc(100vw - 32px) }
.dlg::backdrop { background: rgba(0, 0, 0, .35) }
.dlg h2 { font-size: 17px }
.dlg .actions { margin-top: 8px }

/* deleted channels that still get sends */
.retired td { vertical-align: baseline }
.retired td:first-child, .retired td:last-child { white-space: nowrap }
.soon { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; line-height: 1.2 }
.soon img { opacity: .45 }
/* The link-code QR keeps its white plate in dark mode too: a camera reads dark on light. */
.qr { width: 160px; margin: 12px 0 4px; background: #fff; line-height: 0 }
.qr svg { display: block; width: 100%; height: auto }

/* widgets: rose */
.rose { display: block; flex: none; overflow: visible; font-family: inherit }
.rose-ring { fill: none; stroke: var(--tissue-line) }
.rose-rim { fill: none; stroke: var(--tissue-line-2) }
.rose-tick { fill: var(--tissue-ink-3); font-size: 9px }
.rose-label { fill: var(--tissue-ink-2); font-size: 10.5px }
.rose-mid { fill: var(--tissue-ink); font-size: 12px; font-weight: 500 }
.rose-sp { stroke-linecap: square }
.rose-sp.rose-ok { stroke: var(--tissue-accent) }
.rose-sp.rose-slow { stroke: var(--tissue-amber) }
.rose-sp.rose-down { stroke: var(--tissue-danger); opacity: .3 }
.rose-sp.rose-blocked { stroke: var(--tissue-amber); opacity: .3 }
.rose-sp.rose-absent { stroke: var(--tissue-line-2) }
.rose-dot.rose-ok { fill: var(--tissue-accent) }
.rose-dot.rose-slow, .rose-dot.rose-blocked { fill: var(--tissue-amber) }
.rose-x { fill: none; stroke: var(--tissue-danger); stroke-width: 2 }
.rose-mid.rose-down { fill: var(--tissue-danger) }
.rose-mid.rose-blocked { fill: var(--tissue-amber) }
.rose-area { fill: var(--tissue-accent); fill-opacity: .1; stroke: none }

/* widgets: chain */
.chain { display: flex; flex-direction: column; gap: 16px; padding-top: 8px }
.chain .lane { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.chain .who { font-size: 12px; overflow-wrap: anywhere }
.chain .who b { font-weight: 500 }
.chain .links { display: flex; align-items: center; min-width: 0; flex-wrap: wrap; row-gap: 18px; padding-top: 14px }
.hop { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border: 1px solid var(--tissue-line-2); font-size: 11.5px; background: var(--tissue-bg) }
.hop b { font-weight: 500; font-size: 12px }
.hop.ok { border-color: var(--tissue-accent) }
.hop.bad { border-color: var(--tissue-danger); color: var(--tissue-danger) }
.hop.wait { border-style: dashed; color: var(--tissue-ink-3) }
.wire { height: 1px; flex: 1 1 18px; min-width: 14px; font-size: 10px; background: var(--tissue-line-2); position: relative }
.wire.t { min-width: 6.2em }
.wire > span { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); color: var(--tissue-ink-3); white-space: nowrap }
.wire.cut { background: none; height: 0; border-top: 1px dashed var(--tissue-danger) }
.chain-c { display: flex; flex-direction: column; gap: 4px; font-size: 12px }
.chain-c b { font-weight: 500 }

/* widgets: spine */
.spine { list-style: none; margin: 8px 0 0; padding: 0; position: relative }
.spine::before { content: ""; position: absolute; left: 5.8em; top: 8px; bottom: 8px; width: 1px; background: var(--tissue-line-2) }
.spine li { display: grid; grid-template-columns: 5em 1.6em minmax(0, 1fr); padding: 5px 0; align-items: start; text-align: left }
.spine .t { color: var(--tissue-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px }
.spine .dot { width: 9px; height: 9px; background: var(--tissue-bg); border: 1.5px solid var(--tissue-ink-3); margin: 5px 0 0 calc(.8em - 4.5px); position: relative; z-index: 1 }
.spine .dot.r { border-color: var(--tissue-danger); background: var(--tissue-danger) }
.spine .dot.g { border-color: var(--tissue-accent) }
.spine .dot.w { border-style: dashed }
.spine .e b { font-weight: 500 }
.spine .e .d { display: block; color: var(--tissue-ink-3); font-size: 11.5px }
.spine .gap { color: var(--tissue-ink-3); font-size: 11.5px; font-style: italic; grid-column: 3; padding: 0 0 2px }
.spine .day .gap { font-style: normal; color: var(--tissue-ink-2) }

/* screen: incident */
kbd { font-family: inherit; font-size: 10.5px; border: 1px solid currentColor; padding: 0 4px; margin-left: 4px; opacity: .75 }
.keys { font-size: 12px }
.keys kbd { margin: 0 2px 0 0 }
.inc-page { gap: 20px }
.inc-sticky { position: sticky; top: 0; z-index: 3; background: var(--tissue-bg); padding: 10px 0 0; border-bottom: 1px solid var(--tissue-line-2) }
.inc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap }
.inc-head h1 { font-size: 20px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline }
.inc-head .acts { display: flex; gap: 8px; flex-wrap: wrap }
.inc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start }
.inc-where { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-top: 8px }
.inc-where .stack-s { flex: 1 1 12em }
.inc-more > summary { display: none }
.phone-card .pc-top { display: flex; justify-content: space-between; gap: 12px }
td .d { display: block; font-size: 12px }
tr.kid td:first-child { padding-left: 10px; border-left: 2px solid var(--tissue-line-2) }
tr.grp [data-expand] { font-size: 12px; margin-left: 6px }
@media (max-width: 960px) {
  .inc-grid { grid-template-columns: minmax(0, 1fr) }
}

/* widgets: pcard */
.pcard, .pcard-msg { display: none }
@media (max-width: 760px) {
  .pcard { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--tissue-line-2); padding: 14px 16px; margin-bottom: 8px }
  .pcard-msg { display: block }
  .pcard-msg:empty { display: none }
  /* Room under the page for the fixed bar. */
  .inc-more { margin-bottom: 72px }
  .pcard-title { font-size: 19px }
  .pcard-rose { align-self: center }
  .pcard-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--tissue-bg); border-top: 1px solid var(--tissue-line-2);
  }
  .pcard-bar button { flex: 1 }
  .inc-more > summary { display: list-item; cursor: pointer; color: var(--tissue-ink-2); padding: 8px 0 }
  .inc-sticky { position: static }
  .inc-more .acts { display: none }
  .keys { display: none }
}

/* widgets: night */
.night { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 14px }
.night > div { flex: 1 1 16em; min-width: 0 }
.night-clock { display: block; flex: none; overflow: visible; font-family: inherit }
.night-wedge { fill: var(--tissue-panel); stroke: none }
.night-ring { fill: none; stroke: var(--tissue-line) }
.night-tick { fill: var(--tissue-ink-3); font-size: 10px }
.night-dot-n { fill: var(--tissue-danger); fill-opacity: .9 }
.night-dot-d { fill: var(--tissue-ink-3); fill-opacity: .55 }
.night-mid { fill: var(--tissue-ink); font-size: 20px; font-weight: 500 }
.night-sub { fill: var(--tissue-ink-3); font-size: 9.5px }

/* widgets: wake */
.wake { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px }
.wake-row { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 12px; align-items: center }
.wake-name { font-size: 12px; overflow-wrap: anywhere }
.wake-track { position: relative; height: 40px; min-width: 0 }
.wake-svg { display: block; overflow: visible }
.wake-seg.wake-a { fill: var(--tissue-panel) }
.wake-seg.wake-b { fill: var(--tissue-bg); stroke: var(--tissue-line-2) }
.wake-hatch { stroke: var(--tissue-ink-3); stroke-width: 1; opacity: .5 }
.wake-tick { stroke: var(--tissue-ink-2); stroke-width: 1.5 }
.wake-now { stroke: var(--tissue-accent); stroke-width: 2 }
.wake-who { position: absolute; top: 0; height: 26px; line-height: 26px; padding: 0 6px; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none }
.wake-at { position: absolute; top: 27px; transform: translateX(-50%); font-size: 10px; color: var(--tissue-ink-3); white-space: nowrap }
.wake-axis { position: relative; height: 14px; font-size: 10px; color: var(--tissue-ink-3) }
.wake-axis > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap }
.wake-axis > span:first-child { transform: none }
.wake-axis > span:last-child { transform: translateX(-100%) }
.wake-none { margin: 14px 0 4px }
.wake-silent { color: var(--tissue-danger) }
@media (max-width: 760px) {
  .wake-row { grid-template-columns: minmax(0, 1fr); gap: 2px }
}

/* screen: skeleton */
.skeleton td, .skeleton th { padding-top: 10px; padding-bottom: 10px }
.skel { display: block; height: 10px; background: var(--tissue-line); max-width: 100% }
.skel-h { height: 8px; background: var(--tissue-line-2) }

/* screen: tokens */
.scope-gloss { display: block; font-style: normal }
.tok-scopes { display: block; font-size: 12px; color: var(--tissue-ink-2) }

/* screen: overview */
.lead-line { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 16px; margin: 4px 0 14px }
.lead-line.alarm > span { color: var(--tissue-danger) }
.stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.stats > div.stat-wide { grid-column: span 2 }
.stats > div.stat-wide .big { font-size: 34px }
.down-probe { display: flex; gap: 10px; align-items: center }
@media (max-width: 960px) {
  .stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .stats > div.stat-wide { grid-column: 1 / -1; border-right: 0 }
}

/* screen: phones */
.phone-quiet { display: block; color: var(--tissue-ink-2); max-width: 26em; margin-bottom: 4px }
.link-mk { font-size: 16px; padding: 12px 20px }
.code-exp { font-size: 12px; letter-spacing: 0; font-weight: 400; color: var(--tissue-ink-2) }

/* screen: account */
.seg-pick { display: inline-flex; border: 1px solid var(--tissue-line-2) }
.seg-pick button { background: none; border: 0; padding: 5px 12px; font: inherit; font-size: 12px; color: var(--tissue-ink-2); cursor: pointer }
.seg-pick button[aria-pressed="true"] { background: var(--tissue-panel); color: var(--tissue-ink) }

/* screen: status page */
.pub-since { margin-top: -6px }
.pub-day { font-size: 12px }

/* widgets: thumb */
.thumb { display: block; flex: none }
.thumb-cell { width: 1%; white-space: nowrap }
.thumb-ok-1 { fill: var(--tissue-accent) }
.thumb-ok-2 { fill: var(--tissue-accent); fill-opacity: .7 }
.thumb-ok-3 { fill: var(--tissue-accent); fill-opacity: .45 }
.thumb-slow, .thumb-blocked, .thumb-tls { fill: var(--tissue-amber) }
.thumb-down { fill: var(--tissue-danger) }
.thumb-none { fill: none; stroke: var(--tissue-line-2); stroke-width: 1 }

/* widgets: beat */
.beat { display: block; min-width: 520px; overflow: visible; font-family: inherit }
.beat-base { stroke: var(--tissue-line-2) }
.beat-gone { fill: var(--tissue-line); fill-opacity: .6 }
.beat-band { fill: var(--tissue-line); fill-opacity: .7 }
.beat-band.beat-miss { fill: var(--tissue-danger); fill-opacity: .14 }
.beat-band.beat-pending { fill: none; stroke: var(--tissue-line-2); stroke-dasharray: 2 2 }
.beat-due { stroke: var(--tissue-ink-3) }
.beat-x { fill: none; stroke: var(--tissue-danger); stroke-width: 1.6 }
.beat-tick { stroke-width: 2 }
.beat-ok { stroke: var(--tissue-accent) }
.beat-late, .beat-extra { stroke: var(--tissue-amber) }
.beat-fail { stroke: var(--tissue-danger) }
.beat-dot { fill: var(--tissue-amber) }
.beat-start { stroke: var(--tissue-ink-3) }
.beat-now { stroke: var(--tissue-ink-2); stroke-dasharray: 2 2 }
.beat-label { fill: var(--tissue-ink-3); font-size: 10px }

/* widgets: storm */
.storm-w { display: flex; gap: 16px; align-items: center; flex-wrap: wrap }
.storm-w p { margin: 0 0 4px }
.storm { display: block; flex: none; overflow: visible; font-family: inherit }
.storm path { fill: none; stroke-width: 10 }
.storm-track { stroke: var(--tissue-line) }
.storm-red { stroke: var(--tissue-danger); stroke-opacity: .3 }
.storm-fill { stroke: var(--tissue-accent) }
.storm-near { stroke: var(--tissue-amber) }
.storm-over { stroke: var(--tissue-danger) }
.storm-needle { stroke: var(--tissue-ink); stroke-width: 2 }
.storm-hub { fill: var(--tissue-ink) }
.storm-tick { fill: var(--tissue-ink-3); font-size: 10px }
.storm-now { fill: var(--tissue-ink); font-size: 22px; font-weight: 500 }

/* folded runs in a log: one line per run, opened in place */
.fold-btn { text-align: left }
.fold-in td { background: var(--tissue-panel) }
.fold-in td:first-child { padding-left: 16px }

/* screen: probes */
.probe-list td.nm { max-width: 15em }
.probe-list td.res { min-width: 10em; max-width: 16em }
.grp-row th { text-align: left; font-weight: 500; padding-top: 18px }
.head-acts { margin: 6px 0 0 }
.probe-round { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap }
.probe-round .stack-s { flex: 1 1 16em }
.probe-table > summary { cursor: pointer; color: var(--tissue-ink-2) }
.probe-table[open] > summary { margin-bottom: 8px }

/* screen: probes, path traces */
.trace + .trace { margin-top: 6px }

/* screen: reports */
.rp-frame { width: 100%; height: 480px; border: 1px solid var(--tissue-line-2); background: #fff; margin: 8px 0 }

/* screen: vitals */
.vt-next { color: var(--tissue-ink-2); white-space: nowrap }

@media (max-width: 760px) {
  .probe-round { flex-direction: column }
  .head-acts { width: 100% }
}
/* Keeps the responder note to a line or two instead of a narrow column of words. */
.oncall-note { min-width: 16ch }