/* Radar's look: OxygenHub's (Primer colours, system fonts, rounded boxes,
   underline navigation, sentence case), light or dark with the system. */
:root {
  --bg:#ffffff; --soft:#f6f8fa; --ink:#1f2328; --mute:#59636e; --line:#d1d9e0; --dim:#818b98;
  --acc:#0969da; --ok:#1a7f37; --bad:#d1242f; --warn:#9a6700; --busy:#8250df;
  --header:#f6f8fa; --btn:#f6f8fa; --btn-line:#d1d9e0; --primary:#1f883d; --primary-ink:#ffffff; --banner:#fff8c5;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0d1117; --soft:#151b23; --ink:#f0f6fc; --mute:#9198a1; --line:#3d444d; --dim:#656c76;
    --acc:#4493f8; --ok:#3fb950; --bad:#f85149; --warn:#d29922; --busy:#a371f7;
    --header:#010409; --btn:#212830; --btn-line:#3d444d; --primary:#238636; --banner:#3b2e00;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .mono { font-family: var(--mono); font-size: 12px; }
header { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--header); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 16px; }
.brand svg { height: 28px; width: auto; }
header .grow { flex: 1; }
header .who { color: var(--mute); }
nav.band { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--header); }
nav.band a { padding: 8px 12px; color: var(--ink); border-bottom: 2px solid transparent; }
nav.band a.now { border-bottom-color: #fd8c73; font-weight: 600; }
nav.band a:hover { text-decoration: none; background: var(--soft); border-radius: 6px 6px 0 0; }
.banner { background: var(--banner); border-bottom: 1px solid var(--line); padding: 6px 24px; color: var(--ink); font-size: 13px; }
main { max-width: 1180px; margin: 0 auto; padding: 24px; }
h1 { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
h2 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
.box { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.box > .row { padding: 8px 16px; border-top: 1px solid var(--line); }
.box > .row:first-child { border-top: 0; }
.box > .head { padding: 8px 16px; background: var(--soft); border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; font-weight: 600; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; }
.card .name { font-weight: 600; font-size: 15px; }
.mute { color: var(--mute); }
.dim { color: var(--dim); }
.pill { display: inline-block; padding: 0 8px; border-radius: 2em; border: 1px solid var(--line); font-size: 12px; line-height: 20px; color: var(--mute); }
.p-online { color: var(--ok); border-color: var(--ok); }
.p-busy { color: var(--busy); border-color: var(--busy); }
.p-blocked, .p-paused { color: var(--warn); border-color: var(--warn); }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.msg { display: flex; flex-direction: column; gap: 2px; }
.msg .meta { color: var(--mute); font-size: 12px; }
.msg .body p { margin: 4px 0; }
.msg .body pre { background: var(--soft); padding: 8px; border-radius: 6px; overflow-x: auto; }
.redacted { color: var(--dim); font-style: italic; }
form.compose { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
textarea { width: 100%; min-height: 80px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; }
button { padding: 5px 16px; border: 1px solid var(--btn-line); border-radius: 6px; background: var(--btn); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; }
button.primary { background: var(--primary); border-color: rgba(31,35,40,.15); color: var(--primary-ink); align-self: flex-start; }
details > summary { cursor: pointer; list-style: none; }
details[open] > summary { margin-bottom: 6px; }
pre.payload { background: var(--soft); padding: 8px 12px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
table.facts td { padding: 2px 12px 2px 0; vertical-align: top; }
table.facts td:first-child { color: var(--mute); white-space: nowrap; }
form.inline { display: inline; }
.filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filters a { padding: 2px 10px; border: 1px solid var(--line); border-radius: 2em; color: var(--ink); font-size: 12px; }
.filters a.now { background: var(--acc); border-color: var(--acc); color: #fff; }
footer { max-width: 1180px; margin: 24px auto; padding: 0 24px; color: var(--dim); font-size: 12px; }