/* One small stylesheet for the whole Command Center. No framework. */
:root {
    --ink: #1c2430;
    --muted: #5d6877;
    --line: #d6dce4;
    --paper: #f4f6f9;
    --card: #ffffff;
    --accent: #1f3a5f;
    --ok: #17663a;
    --ok-bg: #e2f3e8;
    --warn: #7a5200;
    --warn-bg: #fdf0cf;
    --danger: #a3261d;
    --danger-bg: #fbe5e3;
    color-scheme: light;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; margin: 1rem 0 0.4rem; }
h2 small, h3 small, legend small, label small { color: var(--muted); font-weight: normal; font-size: 0.85rem; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; }
pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
pre.prose { font-family: inherit; font-size: 1rem; }

.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 0.6rem 1rem;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--ink); text-decoration: none; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.topbar nav a { padding: 0.3rem 0.6rem; border-radius: 6px; text-decoration: none; color: var(--ink); }
.topbar nav a:hover { background: var(--paper); }
.topbar nav a[aria-current="page"] { background: var(--accent); color: #fff; }
.topbar-end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.page { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.page-narrow { max-width: 26rem; padding-top: 4rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; margin: 0 0 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.grid .card { margin: 0; }
.stack { display: flex; flex-direction: column; gap: 0.9rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: flex-end; }
.row > label, .row > form { flex: 1 1 14rem; }
.row > .choice { flex: 1 1 14rem; padding-bottom: 0.45rem; }
.grow { flex: 2 1 18rem !important; }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.end { margin-left: auto; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; font-size: 0.92rem; }
label.choice { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: normal; font-size: 1rem; }
input, select, textarea {
    font: inherit;
    font-weight: normal;
    color: inherit;
    padding: 0.45rem 0.55rem;
    border: 1px solid #aab3c0;
    border-radius: 6px;
    background: #fff;
    width: 100%;
}
input[type="checkbox"], input[type="radio"] { width: auto; }
textarea { resize: vertical; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.9rem 0.9rem; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
legend { font-weight: 600; padding: 0 0.35rem; }
:focus-visible { outline: 3px solid #6aa1e0; outline-offset: 1px; }

button, .button {
    font: inherit;
    font-weight: 600;
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.button-quiet { background: #fff; color: var(--accent); border-color: #aab3c0; }
.button-danger { background: var(--danger); border-color: var(--danger); color: #fff; }

.badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: #e7ebf0; color: var(--ink); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }

.flash { padding: 0.6rem 0.9rem; border-radius: 8px; border: 1px solid var(--line); background: var(--card); margin: 0 0 1rem; }
.flash p, .flash ul { margin: 0; }
.flash ul { padding-left: 1.2rem; }
.flash-success { background: var(--ok-bg); border-color: #a9d6b9; }
.flash-error { background: var(--danger-bg); border-color: #e9b1ab; }
.flash-notice { background: var(--warn-bg); border-color: #ecd491; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0 0 0.5rem; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }

.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.card .table-wrap { border: 0; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--line); }
thead th { font-size: 0.85rem; color: var(--muted); }
tbody tr:last-child > * { border-bottom: 0; }
td pre { max-width: 34rem; }

.filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.filters label { flex: 1 1 10rem; }
.pager { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }

.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.item { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.8rem; }
.item-head { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }

.diff .line { display: block; padding: 0 0.4rem; }
.line-added, ins { background: var(--ok-bg); color: var(--ok); text-decoration: none; }
.line-removed, del { background: var(--danger-bg); color: var(--danger); }
.change { border-top: 1px solid var(--line); padding-top: 0.25rem; margin-top: 0.75rem; }
.change:first-of-type { border-top: 0; margin-top: 0; }
ul.plain { list-style: none; margin: 0; padding: 0; }

.qr svg { width: 220px; height: 220px; display: block; }
.codes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.4rem; }
.codes code { font-size: 1.05rem; }

.message-outbound { border-left-color: var(--muted); background: #fafbfc; }
.message-current { box-shadow: 0 0 0 2px #c9d8ec; }
.body-text { max-height: 32rem; overflow: auto; padding: 0.6rem 0.75rem; background: var(--paper); border-radius: 6px; }
.body-html { width: 100%; height: 28rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.headers { max-height: 24rem; overflow: auto; padding: 0.6rem 0.75rem; background: var(--paper); border-radius: 6px; }
details > summary { cursor: pointer; color: var(--accent); }

.banner { border-width: 2px; }
.banner .quote { margin-top: 0.4rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.row-alert > td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.priority-urgent { background: var(--danger-bg); color: var(--danger); }
.priority-high { background: var(--warn-bg); color: var(--warn); }
.priority-low { color: var(--muted); }
.grade { display: inline-block; margin-right: 0.6rem; white-space: nowrap; }
.attention li { padding-left: 0.6rem; border-left: 3px solid var(--warn); margin-bottom: 0.3rem; }
.trail { margin-top: 0.75rem; }
.step { border-left-color: var(--line); gap: 0.4rem; }
.step-failed { border-left-color: var(--danger); }
.json { max-height: 28rem; overflow: auto; padding: 0.6rem 0.75rem; background: var(--paper); border-radius: 6px; font-size: 0.82rem; }

.board { display: grid; grid-template-columns: repeat(5, minmax(13rem, 1fr)); gap: 0.75rem; overflow-x: auto; align-items: start; }
.board-column { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.board-column h2 { font-size: 1rem; margin: 0; }
.task-card { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; padding: 0.5rem 0.6rem; overflow-wrap: anywhere; }
.task-card dl { margin: 0.35rem 0; font-size: 0.9rem; }
.task-card p { margin: 0; }
@media (max-width: 60rem) { .board { grid-template-columns: 1fr; } }

/* Instead of style attributes: the Content-Security-Policy allows no inline styles. */
.section-gap { margin-top: 1.5rem; }