:root {
  --canvas:#FAF8F4; --surface:#FFFFFF; --surface-muted:#F2F0EC; --surface-accent:#FFF3EF;
  --text:#1F241F; --muted:#565953; --subtle:#696B65; --border:#E4E3DE; --strong:#868781;
  --orange:#C9501F; --orange-pale:#FFF3EF;
  --green-bg:#DEF3E3; --green:#176435; --red-bg:#FFE6E6; --red:#912939;
  --violet-bg:#EFE9FE; --violet:#5E4190; --amber-bg:#F7ECD3; --amber:#6F4D13;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--canvas); color:var(--text); font:15px/1.5 "Red Hat Text",system-ui,sans-serif; -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
button { font:inherit; cursor:pointer }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--orange); outline-offset:3px; border-radius:4px }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.shell { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh }
.side { display:flex; flex-direction:column; gap:16px; position:sticky; top:0; height:100vh; border-right:1px solid var(--border); padding:14px 12px 20px }
.brand { display:flex; align-items:center; gap:9px; padding:8px 10px 18px; border-bottom:1px solid var(--border); font:600 20px/1 "Red Hat Display",sans-serif; letter-spacing:-.04em }
.brand img { width:31px; height:31px; object-fit:contain }
.workspace { display:flex; align-items:center; gap:9px; padding:0 10px; height:38px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font-weight:600 }
.workspace .mono { display:grid; place-items:center; width:20px; height:20px; border-radius:4px; color:var(--canvas); background:var(--text); font-size:12px }
.nav { display:grid; gap:4px }
.nav a { display:flex; align-items:center; gap:10px; min-height:38px; border-radius:8px; padding:0 10px; color:var(--muted); font-weight:500 }
.nav a:hover,.side a:hover { background:var(--surface-muted) }
.nav a[aria-current] { color:var(--text); background:var(--surface-accent); font-weight:600 }
.nav a[aria-current] .nav-icon { color:var(--orange) }
.nav-icon { width:19px; text-align:center; color:var(--subtle); font:18px/1 "Red Hat Text",sans-serif }
.side-note { margin-top:auto; border-top:1px solid var(--border); padding:17px 10px 0; color:var(--subtle); font-size:13px }
.side-note strong { display:block; color:var(--text); font-weight:600 }
.main { min-width:0 }
.topbar { display:flex; align-items:center; min-height:56px; gap:12px; padding:8px 32px; border-bottom:1px solid var(--border); background:var(--canvas) }
.topbar strong { font-size:16px }
.topbar .spacer { flex:1 }
.topbar .meta { white-space:nowrap }
.top-link { font-size:13px; color:var(--muted); border:1px solid var(--border); border-radius:8px; background:var(--surface); padding:7px 11px }
.top-link:hover { border-color:var(--strong) }
.content { max-width:1320px; padding:32px; margin:0 auto }
.eyebrow { margin:0 0 7px; color:var(--subtle); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.085em }
h1 { font:600 clamp(27px,3vw,36px)/1.18 "Red Hat Display",sans-serif; letter-spacing:-.035em; margin:0 }
h2 { font:600 20px/1.3 "Red Hat Display",sans-serif; letter-spacing:-.02em; margin:0 }
h3 { font-size:15px; line-height:1.4; margin:0 }
p { margin:0 }
.lede { color:var(--muted); margin-top:8px; max-width:72ch }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:25px }
.page-head .actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:6px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font-weight:500; white-space:nowrap }
.btn:hover { border-color:var(--strong) }
.btn.primary { color:#fff; border-color:var(--text); background:var(--text) }
.btn.primary:hover { background:#373B35 }
.btn.small { min-height:30px; padding:4px 9px; font-size:13px }
.crumbs { display:flex; flex-wrap:wrap; gap:7px; align-items:center; color:var(--subtle); margin-bottom:20px; font-size:13px }
.crumbs a:hover,.text-link:hover { text-decoration:underline }
.crumbs span { color:var(--text) }
.grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:start; gap:24px }
.stack { display:grid; gap:24px }
.card { overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--surface) }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 20px; border-bottom:1px solid var(--border) }
.card-head h2 { font-size:18px }
.card-head .meta { margin-top:2px }
.card-body { padding:20px }
.card-foot { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:13px 20px; border-top:1px solid var(--border); color:var(--subtle); font-size:13px }
.meta { color:var(--subtle); font-size:13px }
.muted { color:var(--muted) }
.mono { font-family:"Red Hat Mono",monospace; font-variant-numeric:tabular-nums }
.num { font-variant-numeric:tabular-nums }
.text-link { color:var(--text); font-weight:600; text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:3px }
.badge { display:inline-flex; align-items:center; gap:6px; width:max-content; border:1px solid currentColor; border-radius:999px; padding:2px 8px; font-size:12px; font-weight:600; line-height:18px; white-space:nowrap }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
.badge.down { color:var(--red); background:var(--red-bg) }
.badge.stale { color:var(--violet); background:var(--violet-bg) }
.badge.healthy { color:var(--green); background:var(--green-bg) }
.badge.degraded { color:var(--amber); background:var(--amber-bg) }
.badge.resolved { color:var(--muted); border-color:var(--border); background:var(--surface-muted) }
.attention { display:grid }
.attention-row { display:grid; grid-template-columns:145px 76px minmax(0,1fr) 125px; align-items:center; gap:16px; padding:12px 20px; min-height:76px; border-bottom:1px solid var(--border) }
.attention-row:last-child { border-bottom:0 }
.attention-row:hover,.table tbody tr:hover { background:var(--surface-muted) }
.attention-row .who { display:flex; gap:9px; align-items:center; font-weight:600 }
.monogram { display:inline-grid; place-items:center; width:28px; height:28px; flex:none; border:1px solid var(--border); border-radius:6px; background:var(--surface-muted); font-weight:600; font-size:12px }
.attention-row .reason { font-weight:500 }
.attention-row .destination { justify-self:end; color:var(--muted); font-size:13px; font-weight:500 }
.table-wrap { overflow-x:auto }
.table { width:100%; border-collapse:collapse; text-align:left }
.table th,.table td { border-bottom:1px solid var(--border); padding:12px 18px; vertical-align:middle }
.table th { color:var(--subtle); font-size:12px; font-weight:600; white-space:nowrap }
.table tr:last-child td { border-bottom:0 }
.table td { white-space:nowrap }
.table td:first-child { font-weight:600 }
.table .sub { display:block; color:var(--subtle); font-size:12px; font-weight:400 }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 }
.stat { padding:17px 20px; border-right:1px solid var(--border) }
.stat:last-child { border:0 }
.stat .value { display:block; margin-top:5px; font:600 24px/1.3 "Red Hat Display",sans-serif; font-variant-numeric:tabular-nums }
.stat .sub { color:var(--subtle); font-size:12px }
.notice { padding:14px 17px; border:1px solid var(--border); border-left:3px solid var(--orange); border-radius:8px; background:var(--surface); font-size:13px }
.notice strong { display:block; font-size:14px }
.timeline { list-style:none; padding:0; margin:0 }
.timeline li { display:grid; grid-template-columns:60px 16px minmax(0,1fr); gap:12px; position:relative; padding:0 0 22px }
.timeline li:last-child { padding-bottom:0 }
.timeline li:not(:last-child)::before { content:""; position:absolute; left:79px; top:18px; bottom:-2px; width:1px; background:var(--border) }
.timeline time { color:var(--subtle); font:12px/18px "Red Hat Mono",monospace }
.timeline .dot { z-index:1; width:11px; height:11px; margin:4px 2px; border:2px solid var(--strong); border-radius:50%; background:var(--surface) }
.timeline .dot.fail { border-color:var(--red); background:var(--red-bg) }
.timeline .dot.ok { border-color:var(--green); background:var(--green-bg) }
.timeline .detail { color:var(--subtle); font-size:13px; margin-top:2px }
.dl { margin:0 }
.dl > div { display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; padding:9px 0; border-bottom:1px solid var(--border) }
.dl > div:last-child { border-bottom:0 }
.dl dt { color:var(--subtle); font-size:13px }
.dl dd { margin:0; font-size:13px }
.service { display:flex; align-items:center; gap:10px; padding:13px 20px; border-bottom:1px solid var(--border) }
.service:last-child { border-bottom:0 }
.service .detail { flex:1 }
.service .detail strong { display:block; font-size:13px }
.service .detail span { color:var(--subtle); font-size:12px }
.service a { font-size:13px; color:var(--muted); text-decoration:underline; text-underline-offset:2px }
.email-wrap { min-height:calc(100vh - 56px); display:grid; place-items:start center; padding:56px 20px }
.email { width:min(100%,610px); padding:30px; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:0 6px 30px rgb(31 36 31 / .06) }
.email .email-meta { border-bottom:1px solid var(--border); padding-bottom:20px; margin-bottom:28px; color:var(--subtle); font-size:13px }
.email h1 { font-size:27px; margin-bottom:13px }
.email p { margin:14px 0 }
.email .btn { margin-top:9px }
.scenario { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:18px; color:var(--subtle); font-size:13px }
.scenario a[aria-current] { color:var(--text); border-color:var(--strong) }
.mobile-nav { display:none }
@media (max-width:960px) {
  .shell { grid-template-columns:70px minmax(0,1fr) }
  .side { padding:12px 8px }
  .brand { justify-content:center; padding:8px 0 18px }
  .brand .word,.workspace,.nav .label,.side-note { display:none }
  .nav a { justify-content:center; padding:0 }
  .grid { grid-template-columns:minmax(0,1fr) }
}
@media (max-width:640px) {
  .shell { display:block; padding-bottom:64px }
  .side { display:none }
  .mobile-nav { position:fixed; z-index:10; bottom:0; left:0; right:0; display:flex; justify-content:space-around; padding:6px 4px max(6px,env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--surface) }
  .mobile-nav a { display:grid; justify-items:center; gap:1px; min-width:58px; padding:2px 5px; color:var(--muted); font-size:11px }
  .mobile-nav a[aria-current] { color:var(--orange); font-weight:600 }
  .mobile-nav .nav-icon { font-size:17px }
  .topbar { min-height:50px; padding:7px 18px }
  .topbar .meta { display:none }
  .content { padding:22px 16px }
  .page-head { display:block }
  .page-head .actions { justify-content:flex-start; margin-top:14px }
  .attention-row { grid-template-columns:minmax(0,1fr) auto; gap:5px 10px; padding:15px }
  .attention-row .who { grid-column:1 }
  .attention-row .badge { grid-column:2; grid-row:1 }
  .attention-row .copy { grid-column:1/-1 }
  .attention-row .destination { grid-column:1/-1; justify-self:start }
  .card-head,.card-body,.card-foot { padding:15px }
  .stats { grid-template-columns:1fr }
  .stat { border-right:0; border-bottom:1px solid var(--border) }
  .stat:last-child { border-bottom:0 }
  .email-wrap { padding:20px 12px }
  .email { padding:20px }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }