/* IT Status — operations aesthetic: dense, quiet, legible at a glance.
   No animation, no gradients; colour carries meaning and nothing else. */
:root{
  --bg:#0d1117; --panel:#151b23; --panel2:#1b232d; --line:#262d38;
  --ink:#e6edf3; --dim:#8b949e; --accent:#3b82f6;
  --ok:#3fb950; --warn:#d29922; --part:#db6d28; --bad:#f85149; --maint:#58a6ff; --unk:#6e7681;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:light){
  :root{--bg:#f6f8fa;--panel:#fff;--panel2:#f0f3f6;--line:#d0d7de;--ink:#1f2328;--dim:#636c76;}
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
main{max-width:1100px;margin:0 auto;padding:0 20px 64px}

.top{max-width:1100px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center}
/* Black band: the supplied artwork has a black background and is used
   untouched, so the header meets it instead of the image being altered. */
/* Full-bleed black band while the content stays in the 1100px column: the
   logo artwork is black-backed, so the band must reach the viewport edges or
   the artwork sits in a visible box. */
.top{background:#000;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax)}
.logo{height:46px;width:auto;display:block}
@media(max-width:560px){.logo{height:34px}}
.top nav{display:flex;gap:18px;font-size:.9rem;color:#8b949e}
.top nav a:hover{color:#fff}

.hero{padding:26px 0 12px;border-bottom:1px solid var(--line);margin-bottom:24px}
.hero h1{margin:0 0 8px;font-size:clamp(1.5rem,3.5vw,2rem);letter-spacing:-.02em}
.kicker{margin:0 0 4px;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.headline{margin:6px 0;font-size:1.15rem;font-weight:600}
.headline.ok{color:var(--ok)} .headline.bad{color:var(--bad)}
.counts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0 0;padding:0;color:var(--dim);font-size:.92rem}
.counts strong{color:var(--ink)}
.meta,.muted{color:var(--dim);font-size:.86rem}
.note{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--warn);padding:9px 12px;border-radius:6px;font-size:.9rem}
.note.ok{border-left-color:var(--ok)}
.crumbs{padding:16px 0 0;color:var(--dim);font-size:.86rem}
.crumbs a:hover{color:var(--ink)}

.block{margin:28px 0}
.block h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin:0 0 12px;font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:11px 13px}
.card:hover{border-color:var(--accent)}
.card .n{font-weight:500}
.card.status-major_outage{border-left:3px solid var(--bad)}
.card.status-partial_outage{border-left:3px solid var(--part)}
.card.status-degraded{border-left:3px solid var(--warn)}
.card.status-maintenance{border-left:3px solid var(--maint)}
.card.status-unknown{opacity:.72}

.incidents{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.incidents li{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.incidents li.sev-major_outage{border-left:3px solid var(--bad)}
.incidents li.sev-partial_outage{border-left:3px solid var(--part)}
.incidents li.sev-degraded{border-left:3px solid var(--warn)}
.incidents a{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.incidents .v{font-weight:600}
.incidents .t{color:var(--ink)}
.incidents a:hover .t{color:var(--accent)}
.incidents .meta{margin:5px 0 0}
.incidents.compact li{padding:9px 12px}

.facts dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:0}
.facts dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.facts dd{margin:3px 0 0;font-weight:500}

.strip{display:flex;flex-wrap:wrap;gap:2px}
.sq{width:9px;height:22px;border-radius:2px;background:var(--ok);display:inline-block}
.sq.s-degraded{background:var(--warn)} .sq.s-partial_outage{background:var(--part)}
.sq.s-major_outage{background:var(--bad)} .sq.s-maintenance{background:var(--maint)}
.sq.s-unknown{background:var(--unk)}

.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 18px 18px}
.timeline li::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;
  background:var(--panel);border:2px solid var(--accent)}
.timeline .ts{font-family:var(--mono);font-size:.8rem;color:var(--dim);margin-right:10px}
.timeline .st{font-weight:600}
.timeline .src{font-family:var(--mono);font-size:.72rem;color:var(--dim);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;margin-left:8px}
.timeline p{margin:6px 0 0;color:var(--ink);font-size:.92rem;white-space:pre-wrap}

.source{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.source a{color:var(--accent)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.filters select,.filters input,.editor input,.editor select{background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:6px;padding:8px 10px;font:inherit;font-size:.9rem}
button{background:var(--accent);color:#fff;border:0;border-radius:6px;padding:8px 16px;font:inherit;
  font-size:.9rem;font-weight:500;cursor:pointer}
button:hover{filter:brightness(1.1)}
.inline{display:inline}
.editor{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:18px 0}
.editor label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--dim)}
.editor label.chk{flex-direction:row;align-items:center;text-transform:none;letter-spacing:0;font-size:.9rem}
.editor .actions{grid-column:1/-1;display:flex;gap:10px}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:.88rem;background:var(--panel)}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);
  padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td a{color:var(--accent)}
.err{color:var(--bad)}
tr.lvl-error td{background:color-mix(in srgb,var(--bad) 9%,transparent)}
tr.lvl-warn td{background:color-mix(in srgb,var(--warn) 8%,transparent)}
code{font-family:var(--mono);font-size:.86em;background:var(--panel2);padding:2px 6px;border-radius:4px}

.foot{max-width:1100px;margin:0 auto;padding:24px 20px 40px;border-top:1px solid var(--line);
  color:var(--dim);font-size:.84rem}
.foot a{color:var(--accent)}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}}

/* ══ Redesign (2026-08-24): incidents first, vendors second ═══════════════
   Severity carries meaning through colour and SIZE, not decoration. Blue is
   reserved for maintenance and information — never for an outage. */

.tagline{max-width:1100px;margin:0 auto;padding:10px 20px 0;color:var(--dim);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em}

/* ── global status ── */
.hero.global{border-bottom:1px solid var(--line);padding-bottom:20px}
.eyebrow{margin:0 0 6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--dim);font-weight:600}
.eyebrow a{color:inherit}
.verdict-line{display:flex;align-items:baseline;gap:12px;margin:0;
  font-size:clamp(1.35rem,3.4vw,2rem);line-height:1.2;letter-spacing:-.02em}
.tone-bad .verdict-line{color:var(--bad)}
.tone-info .verdict-line{color:var(--maint)}
.tone-ok .verdict-line{color:var(--ok)}
.tally{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;padding:0;
  font-size:.92rem;color:var(--dim)}
.tally strong{color:var(--ink);font-variant-numeric:tabular-nums}
.freshness{margin:14px 0 0;color:var(--dim);font-size:.82rem;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.freshness strong{color:var(--ink)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:pulse 2.4s ease-out infinite}
.live-word{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--ok)}
/* Each fact is one unbreakable chunk and carries its own trailing separator.
   As a leading character the "·" became the first thing on a wrapped line, and
   at 320px the count and its noun were landing on different lines entirely. */
.fresh-bit{white-space:nowrap}
.fresh-bit:not(:last-child)::after{content:" ·";color:var(--unk)}
@keyframes pulse{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* ── incident cards: the loudest thing on the page ── */
.incident-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px}
.icard{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--unk);
  border-radius:10px;padding:16px 18px}
.icard.sev-major_outage{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 6%,var(--panel))}
.icard.sev-partial_outage{border-left-color:var(--part)}
.icard.sev-degraded{border-left-color:var(--warn)}
.icard.sev-maintenance{border-left-color:var(--maint)}
.ic-sev{margin:0 0 8px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--dim)}
.ic-sev.big{font-size:.9rem;letter-spacing:.06em;color:var(--ink)}
.icard h3{margin:0 0 8px;font-size:1.12rem;line-height:1.35;letter-spacing:-.01em}
.icard h3 a:hover{color:var(--accent)}
.ic-vendor{margin:0 0 10px;font-size:.9rem}
.ic-vendor a{font-weight:600}
.ic-vendor a:hover{color:var(--accent)}
.ic-state{color:var(--dim);margin-left:8px}
.ic-loc{margin:0 0 10px;font-size:.85rem;color:var(--dim)}
.ic-times{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 12px}
.ic-times dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.ic-times dd{margin:2px 0 0;font-size:.88rem;font-variant-numeric:tabular-nums}
.ic-cta a{font-size:.86rem;color:var(--accent)}
.incident-hero{border:0;padding-bottom:8px}
.incident-hero h1{margin:6px 0 8px;font-size:clamp(1.4rem,3.6vw,2rem);letter-spacing:-.02em}
.state-line{margin:0;color:var(--dim)}

.allclear{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
.ac-line{margin:0 0 6px;font-size:1.05rem;color:var(--ok);font-weight:600}
.block h2.sub{margin-top:26px}

/* ── latest activity ── */
.activity{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);overflow:hidden}
.activity li{display:flex;align-items:baseline;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:.9rem}
.activity li:last-child{border-bottom:0}
.activity .ago{font-family:var(--mono);font-size:.76rem;color:var(--dim);min-width:82px}
.activity a:hover{color:var(--accent)}
.activity .src{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--dim);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px}

/* ── categories + vendor cards ── */
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.cat-head h2{margin:0}
.cat-sum{margin:0;font-size:.82rem;color:var(--dim)}
.cat-sum .warn{color:var(--part);font-weight:600}
.cat-sum .info{color:var(--maint)}
.cat-sum .dimmed{color:var(--unk)}
.vcard{display:flex;flex-direction:column;gap:3px;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:11px 13px}
.vcard:hover{border-color:var(--accent)}
.vc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vc-name{font-weight:600;font-size:.94rem}
.vc-state{font-size:.82rem;color:var(--dim)}
.vc-meta{font-size:.72rem;color:var(--unk)}
.vcard.status-major_outage{border-left:3px solid var(--bad)}
.vcard.status-partial_outage{border-left:3px solid var(--part)}
.vcard.status-degraded{border-left:3px solid var(--warn)}
.vcard.status-maintenance{border-left:3px solid var(--maint)}
.vcard.status-operational .vc-state{color:var(--ok)}
.vcard.status-unknown{opacity:.78}

/* ── tables ── */
.incident-table td{vertical-align:middle}
.nw{white-space:nowrap}
.incidents.maint li{border-left:3px solid var(--maint)}

/* ── footer ── */
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.foot-brand{margin:0 0 4px;color:var(--ink);font-weight:700}
.foot-links{display:flex;gap:16px}
.foot-legal{margin:18px 0 0;font-size:.8rem}

@media(max-width:820px){.incident-cards{grid-template-columns:1fr}}

/* Polish pass: severity ≠ lifecycle. Breakdown row sits above the calm counts. */
.tally.severity{margin-top:12px;font-size:1rem}
.tally.severity strong{font-size:1.05rem}
.vc-inc{font-size:.78rem;color:var(--ink);opacity:.85;line-height:1.3}
.note-line{margin:22px 0 0;padding:12px 14px;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;color:var(--dim);font-size:.84rem}
.note-line a{color:var(--accent)}
.diag{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  font-family:var(--mono);font-size:.78rem;line-height:1.5;white-space:pre-wrap;overflow-x:auto;color:var(--ink)}
.brk{word-break:break-all}

/* ── vendor marks ─────────────────────────────────────────────────────────
   Icons are the vendor's own, fetched once and served from this origin. A
   vendor whose icon we could not obtain gets a monogram, never a broken
   image — and never someone else's logo. */
.vlogo{width:20px;height:20px;flex:none;object-fit:contain;border-radius:4px;
  background:#fff;padding:1px;vertical-align:middle}
.vlogo.sm{width:16px;height:16px;border-radius:3px}
.vlogo.lg{width:30px;height:30px;border-radius:6px;vertical-align:-5px}
.vlogo.mono{display:inline-grid;place-items:center;background:var(--panel2);color:var(--dim);
  font:600 9px/1 var(--mono);letter-spacing:.02em;padding:0;border:1px solid var(--line)}
.vlogo.mono.sm{font-size:8px}
.vlogo.mono.lg{font-size:12px}
.vc-top{gap:8px}
.vc-top .vc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ic-vendor{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.activity li .vlogo{margin-right:-2px}

/* ══ Mobile ═══════════════════════════════════════════════════════════════
   This dashboard gets read on a phone, one-handed, while something is broken.
   So the phone layout is not a shrunken desktop: the nav collapses behind ☰,
   every multi-column grid becomes one column, both tables become cards, and
   nothing is allowed to push the page sideways. CSS only — see view.php for
   why the one interactive piece is a checkbox and not a script.

   The widths are chosen from the content, not from device names: 768 is where
   the nav row stops fitting beside the logo, 700 where six table columns stop
   being readable, 600 where two vendor cards stop being worth it. */

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Long vendor names, machine-shaped incident titles and measured diagnostics
   all arrive from vendors and none of them were written to fit a phone. */
.icard h3,.incidents .t,.vc-name,.vc-inc,.timeline p,.cat-sum,.ic-vendor,
.activity a,.foot p,.note-line{overflow-wrap:break-word}
.note,.diag,.vc-meta,.facts dd,code{overflow-wrap:anywhere;word-break:break-word}

/* The burger and its checkbox are desktop-invisible; the nav is always open. */
.navtoggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.burger{display:none}

@media(max-width:768px){
  .top{flex-wrap:wrap;gap:0 12px;padding:10px 16px}
  .logo{height:30px}
  .burger{display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;margin-right:-10px;border-radius:8px;
    color:#8b949e;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .burger-i{font-size:1.35rem;line-height:1}
  .navtoggle:focus-visible + .burger{outline:2px solid var(--accent);outline-offset:-2px}
  .navtoggle:checked + .burger{color:#fff}

  .top nav{display:none;width:100%;flex-direction:column;gap:0;
    margin:6px 0 2px;border-top:1px solid #1f242c;font-size:1rem}
  .navtoggle:checked ~ nav{display:flex}
  .top nav a{display:flex;align-items:center;min-height:44px;padding:0 2px;
    border-bottom:1px solid #1f242c;color:#c9d1d9}
  .top nav a:last-child{border-bottom:0}

  .tagline{padding:10px 16px 0;font-size:.68rem;letter-spacing:.12em}
  main{padding:0 16px 48px}
  .foot{padding:20px 16px 36px}
}

/* Touch targets share the burger's breakpoint, not the one-column breakpoint:
   a 700px tablet is still a thumb, and leaving these at 600 left the footer
   links and filter controls at 17px on exactly the devices that need them
   biggest. 44px is the smaller of the two platform minimums. */
@media(max-width:768px){
  .top nav a,
  .foot-links a,
  .ic-cta a{display:inline-flex;align-items:center;min-height:44px}
  .foot-links a{display:inline-flex}
  button{min-height:44px;padding:10px 18px}
  .filters select,.filters input{min-height:44px}
  .crumbs a{display:inline-block;padding:6px 0}
  .incidents a,.activity a,.tablewrap td a{min-height:32px}
}

@media(max-width:600px){
  /* ── spacing: a 320px screen cannot afford desktop gutters ── */
  .block{margin:24px 0}
  .hero{padding:20px 0 10px;margin-bottom:20px}
  .hero.global{padding-bottom:16px}

  /* Nothing a person is meant to read drops below 12px on a phone. (The 8px
     inside a monogram chip is exempt: it stands in for an icon, not for text,
     and a larger glyph would not fit the 16px square.) */
  .tagline{font-size:.75rem}
  .live-word{font-size:.75rem}
  .ic-times dt{font-size:.75rem}

  /* ── global status: still the first thing seen, just tighter ── */
  .verdict-line{gap:10px}
  .tally{gap:6px 16px;margin-top:12px}
  .tally.severity{margin-top:10px;font-size:.96rem}
  .freshness{gap:6px 10px;font-size:.8rem}

  /* ── cards: full width, never a desktop minimum ── */
  .incident-cards{grid-template-columns:1fr;gap:10px}
  .icard{padding:14px 15px;border-radius:10px}
  .icard h3{font-size:1.05rem}
  .ic-sev{font-size:.74rem}
  .ic-times{gap:8px 20px}
  .incidents li{padding:12px 14px}

  /* ── latest activity: time, then the event, then a quiet source ──
     Four facts on one line is what pushed this section off-screen; on a phone
     they stack instead, and the source drops to its own muted line. */
  .activity li{display:grid;grid-template-columns:auto auto minmax(0,1fr);
    gap:2px 8px;align-items:center;padding:10px 13px}
  .activity .ago{grid-column:1/-1;min-width:0;font-size:.74rem}
  .activity .d{grid-column:1}
  .activity .vlogo{grid-column:2}
  .activity a{grid-column:3;min-width:0}
  /* On its own line the bordered chip became the boxiest thing in the list —
     eight of them down a section that is meant to be scanned. Same words,
     no box. */
  .activity .src{grid-column:1/-1;justify-self:start;margin:1px 0 0;font-size:.72rem;
    border:0;padding:0;color:var(--unk)}

  /* ── categories: one vendor per row, heading above its summary ── */
  .grid{grid-template-columns:1fr;gap:8px}
  .cat-head{flex-direction:column;align-items:flex-start;gap:3px;margin-bottom:10px}
  .cat-sum{font-size:.8rem}
  .vcard{padding:12px 13px;gap:4px}
  /* Desktop ellipsises a long name to keep the row on one line; a phone has
     the height to spare and truncating "Amazon Web Services" helps nobody. */
  .vc-top .vc-name{white-space:normal;overflow:visible;text-overflow:clip;font-size:.98rem}
  .vc-meta{font-size:.76rem}
  .vc-more{color:var(--accent);white-space:nowrap}

  /* ── incident + vendor pages ── */
  .filters{gap:8px}
  .filters select,.filters input{flex:1 1 46%;min-width:0}
  .facts dl{grid-template-columns:1fr;gap:12px}
  .timeline li{padding-left:16px}
  .timeline .ts,.timeline .st,.timeline .src{display:inline-block}
  .timeline .src{margin:4px 0 0;font-size:.74rem}
  .timeline p{font-size:.9rem}
  .incident-hero h1{font-size:1.35rem}


  /* ── footer ── */
  .foot-grid{grid-template-columns:1fr;gap:14px}
  .foot-links{flex-wrap:wrap;gap:0 20px}
}

/* ── tables become cards ────────────────────────────────────────────────────
   A six-column incident table inside a scroller is honest but unusable with a
   thumb: the severity and duration live off-screen exactly when they matter.
   Same rows, same markup, read as a stack. Headers move into ::before labels
   for the columns that need naming; date, vendor, title and severity name
   themselves. */
@media(max-width:700px){
  .tablewrap{overflow:visible;border:0;border-radius:0;background:none}
  .tablewrap table{background:none;font-size:.92rem}
  .tablewrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tablewrap tr{display:block;background:var(--panel);border:1px solid var(--line);
    border-radius:10px;padding:12px 14px;margin-bottom:8px}
  .tablewrap tr:last-child{margin-bottom:0}
  .tablewrap td{display:block;border:0;padding:2px 0;white-space:normal}
  .tablewrap td.nw{white-space:normal}
  .tablewrap td[data-label]::before{content:attr(data-label) ": ";color:var(--dim);
    font-size:.8rem}
  .tablewrap td[data-label]{font-size:.84rem;color:var(--dim)}
  .tablewrap td.c-date{font-family:var(--mono);font-size:.76rem;color:var(--dim);
    text-transform:uppercase;letter-spacing:.06em}
  .tablewrap td.c-vendor{font-weight:600;padding-top:4px}
  .tablewrap td.c-title a{color:var(--ink)}
  .tablewrap td.c-title{padding-bottom:6px}
  .tablewrap td.c-sev,.tablewrap td.c-status{font-weight:500}
  .tablewrap td[colspan]{color:var(--dim)}
  /* The row is the tap target now, so give it a full-width reach. */
  .tablewrap td a{display:inline-block;min-height:32px;line-height:1.5}
}

/* 414px and up still fits two vendor cards; 320px must never be asked to. */
@media(min-width:601px) and (max-width:820px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}