/* EmergencyChat: mobile-first, light/dark, no external fonts. */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --text: #16181d;
  --muted: #5d6573;
  --border: #dde1e7;
  --accent: #c62828;
  --accent-text: #ffffff;
  --link: #1a5fb4;
  --ok: #1b7a3d;
  --warn-bg: #fff4e5;
  --warn-border: #f0b45a;
  --info-bg: #e8f1fd;
  --info-border: #8db4ea;
  --err-bg: #fdecec;
  --err-border: #e59a9a;
  --mention: #fff6d6;
  --radius: 10px;
  --side-w: 260px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111317;
    --surface: #1a1d23;
    --surface-2: #232730;
    --text: #e8eaee;
    --muted: #9aa3b2;
    --border: #2e333d;
    --accent: #ef5350;
    --link: #79aef2;
    --ok: #5fcf88;
    --warn-bg: #3a2c12;
    --warn-border: #8a6420;
    --info-bg: #15263d;
    --info-border: #2f5584;
    --err-bg: #3b1717;
    --err-border: #8a3434;
    --mention: #3a3214;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); min-height: 100vh; }
a { color: var(--link); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 4px; word-break: break-all; }
h1 { font-size: 1.45rem; margin: 0 0 0.6rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }
.nowrap { white-space: nowrap; }
.ok { color: var(--ok); font-weight: 600; }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */
.banner { background: var(--accent); color: var(--accent-text); padding: 0.5rem 1rem; font-weight: 600; text-align: center; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.topnav { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.topnav a { text-decoration: none; }
form.inline, .inline { display: inline; margin: 0; }
.linklike { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; }
.linklike:hover { text-decoration: underline; }
.danger-text { color: var(--accent); }

/* ---------- generic pages ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin: 1rem auto; max-width: 900px; }
.card.narrow { max-width: 460px; margin-top: 2rem; }
.card.attention { border-color: var(--warn-border); background: var(--warn-bg); }
main.wide { max-width: 1200px; margin: 0 auto; padding: 0 1rem 2rem; }
main.wide > .card { max-width: none; }
.stack { display: flex; flex-direction: column; gap: 0.85rem; }
label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 500; }
label.check { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 400; }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.7rem; width: 100%; }
input[type="checkbox"], input[type="radio"] { width: auto; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.row2 { display: grid; grid-template-columns: 1fr; gap: 0.85rem; }
@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; } }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.85rem; align-items: end; }
.inline-form { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 0.15rem 0; }
.inline-form input, .inline-form select { width: auto; min-width: 8rem; padding: 0.35rem 0.5rem; }
.inline-form label { flex-direction: row; align-items: center; }
fieldset.formats { border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 0.3rem; }

.btn { display: inline-block; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border-radius: 8px; padding: 0.55rem 1rem; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.btn:hover { filter: brightness(0.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.danger { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn.small { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.icon-btn { background: none; border: 0; font-size: 1.3rem; padding: 0.25rem 0.5rem; cursor: pointer; color: var(--text); }

.alert { padding: 0.65rem 0.85rem; border-radius: 8px; border: 1px solid var(--err-border); background: var(--err-bg); margin: 0.75rem 0; }
.alert.info { border-color: var(--info-border); background: var(--info-bg); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 1rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.steps { padding-left: 1.2rem; }
.qr { display: block; margin: 0.5rem auto; background: #fff; padding: 8px; border-radius: 8px; image-rendering: pixelated; }
.secret { font-size: 1rem; letter-spacing: 0.05em; }
.copy { font-family: ui-monospace, monospace; margin: 0.5rem 0; }
.joincode code { font-size: 1.6rem; letter-spacing: 0.15em; padding: 0.3rem 0.7rem; }

.subnav { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 1rem 0; border-bottom: 1px solid var(--border); }
.subnav a { padding: 0.5rem 0.8rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--text); border-bottom-color: var(--accent); }

.grid.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; display: flex; flex-direction: column; }
.stat-n { font-size: 1.7rem; font-weight: 700; }
.stat-l { color: var(--muted); font-size: 0.9rem; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
tr.dim td { opacity: 0.6; }
td.actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }
table.audit td { font-size: 0.88rem; }
td.payload code { white-space: pre-wrap; word-break: break-word; background: none; padding: 0; }

/* ---------- chat ---------- */
body.chat-body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.chat { flex: 1; display: flex; min-height: 0; position: relative; }
.sidebar { width: var(--side-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.side-head { display: flex; justify-content: space-between; align-items: center; }
.side-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0.8rem 0 0.2rem; }
.conn { font-size: 0.8rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--surface-2); }
.conn::before { content: "●"; margin-right: 0.35rem; }
.conn.online::before { color: var(--ok); }
.conn.connecting::before { color: #d29a00; }
.conn.offline { background: var(--err-bg); }
.conn.offline::before { color: var(--accent); }
.search input { padding: 0.4rem 0.6rem; }
.chan-list, .people { list-style: none; margin: 0; padding: 0; }
.chan { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.55rem; border-radius: 6px; color: var(--text); text-decoration: none; }
.chan:hover { background: var(--surface-2); }
.chan.active { background: var(--accent); color: var(--accent-text); }
.chan.unread .chan-name { font-weight: 700; }
.chan-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { background: var(--surface-2); color: var(--text); border-radius: 999px; font-size: 0.75rem; padding: 0 0.45rem; font-weight: 700; }
.badge.mention { background: var(--accent); color: var(--accent-text); }
.people li { display: flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.3rem; font-size: 0.93rem; }
.people .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.people li.on .dot { background: var(--ok); }
.people li.off { color: var(--muted); }
.pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-tag { font-size: 0.7rem; border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3rem; color: var(--muted); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.chan-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.chan-head h1 { font-size: 1.1rem; margin: 0; }
.chan-head p { margin: 0; font-size: 0.88rem; }
.chan-head > div { flex: 1; min-width: 0; }
.pill { background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.85rem; }
.notice { background: var(--info-bg); border-bottom: 1px solid var(--info-border); padding: 0.45rem 1rem; font-size: 0.92rem; }
.messages { flex: 1; overflow-y: auto; padding: 0.5rem 0; overscroll-behavior: contain; }
#load-older { display: block; margin: 0.5rem auto; }
.msg-list { list-style: none; margin: 0; padding: 0; }
.msg { padding: 0.35rem 1rem 0.35rem 1rem; position: relative; }
.msg:hover { background: var(--surface-2); }
.msg.cont { padding-top: 0; }
.msg.cont .msg-head { display: none; }
.msg.mention { background: var(--mention); border-left: 3px solid #d29a00; }
.msg-head { display: flex; gap: 0.5rem; align-items: baseline; }
.author { font-weight: 700; }
.ts { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.edited { color: var(--muted); font-size: 0.78rem; }
.msg-body { overflow-wrap: anywhere; }
.msg-body p { margin: 0.1rem 0; }
.msg-body pre { background: var(--surface-2); padding: 0.5rem; border-radius: 6px; overflow-x: auto; }
.msg-body pre code { background: none; padding: 0; }
.msg-body blockquote { margin: 0.2rem 0; padding-left: 0.7rem; border-left: 3px solid var(--border); color: var(--muted); }
.msg-body ul, .msg-body ol { margin: 0.2rem 0; padding-left: 1.4rem; }
.msg-body.deleted { color: var(--muted); font-style: italic; }
.msg-actions { position: absolute; top: 0.3rem; right: 1rem; display: flex; gap: 0.7rem; font-size: 0.8rem; opacity: 0; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; }
@media (hover: none) { .msg-actions { position: static; opacity: 0.85; justify-content: flex-end; } }
.edit-box { min-height: 4rem; margin: 0.3rem 0; }
.edit-bar { display: flex; gap: 0.5rem; align-items: center; }
.day-sep { text-align: center; margin: 0.8rem 0 0.3rem; position: relative; }
.day-sep::before { content: ""; position: absolute; left: 1rem; right: 1rem; top: 50%; border-top: 1px solid var(--border); }
.day-sep span { position: relative; background: var(--bg); padding: 0 0.7rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.empty { padding: 2rem 1rem; text-align: center; }
.typing { min-height: 1.3rem; padding: 0 1rem; font-size: 0.82rem; }
.composer { display: flex; gap: 0.5rem; padding: 0.5rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); align-items: flex-end; }
.composer textarea { resize: none; min-height: 2.6rem; max-height: 200px; overflow-y: hidden; }
.readonly { padding: 0.8rem 1rem; background: var(--surface); border-top: 1px solid var(--border); text-align: center; }

.search-results { position: absolute; inset: 0 0 0 auto; width: min(480px, 100%); background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; z-index: 20; box-shadow: -6px 0 20px rgba(0,0,0,0.12); }
.search-results header { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); }
.search-results h2 { margin: 0; }
.search-results ol { overflow-y: auto; flex: 1; }
.msg.result { cursor: pointer; border-bottom: 1px solid var(--border); }

.only-mobile { display: none; }
@media (max-width: 760px) {
  .only-mobile { display: inline-block; }
  .sidebar { position: absolute; inset: 0 auto 0 0; z-index: 30; transform: translateX(-100%); transition: transform 0.18s ease; width: min(300px, 85vw); box-shadow: 6px 0 20px rgba(0,0,0,0.18); }
  .chat.side-open .sidebar { transform: none; }
  .topbar { padding: 0.45rem 0.75rem; }
  .topnav { gap: 0.7rem; font-size: 0.92rem; }
  .card { margin: 0.75rem; }
  .card.narrow { margin: 1rem 0.75rem; }
}

@media print {
  .topbar, .subnav, .sidebar, .composer, form { display: none !important; }
}

/* ---------- Phase 2: incidents, board, coordination ---------- */
.side-row { display: flex; align-items: center; justify-content: space-between; }
.mini-btn { font: inherit; font-size: 0.8rem; padding: 0.15rem 0.5rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; text-transform: none; letter-spacing: 0; }
.mini-btn:hover { border-color: var(--accent); }
.side-empty { padding: 0.2rem 0.55rem; }
.chan.resolved { opacity: 0.6; }

.sev { display: inline-block; font-size: 0.72rem; font-weight: 800; padding: 0 0.35rem; border-radius: 4px; color: #fff; background: #6b7280; margin-right: 0.15rem; vertical-align: 1px; }
.sev-P1 { background: #c62828; }
.sev-P2 { background: #e65100; }
.sev-P3 { background: #b28704; }
.sev-P4 { background: #546e7a; }
.status { display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.st-investigating { border-color: #c62828; color: var(--accent); }
.st-identified { border-color: #e65100; }
.st-mitigating { border-color: #b28704; }
.st-monitoring { border-color: #1a5fb4; color: var(--link); }
.st-resolved { border-color: var(--ok); color: var(--ok); }

.alerts:empty { display: none; }
.alerts { display: flex; flex-direction: column; gap: 1px; background: var(--border); }
.alert-item { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0.55rem 1rem; background: var(--warn-bg); border-left: 4px solid var(--warn-border); }
.alert-item.bcast { border-left-color: var(--accent); }
.alert-text { flex: 1; min-width: 200px; }
.alert-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 0.15rem; }
.alert-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.board { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.55rem 1rem 0.6rem; border-left: 4px solid var(--border); max-height: 45vh; overflow-y: auto; }
.board.sev-border-P1 { border-left-color: #c62828; }
.board.sev-border-P2 { border-left-color: #e65100; }
.board.sev-border-P3 { border-left-color: #b28704; }
.board.resolved { border-left-color: var(--ok); }
.board-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.board-top .spacer { flex: 1; }
.status-select { width: auto; padding: 0.2rem 0.4rem; font-size: 0.85rem; }
.board-tabs { display: flex; gap: 0.25rem; margin: 0.5rem 0 0.4rem; border-bottom: 1px solid var(--border); }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.3rem 0.6rem; font: inherit; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.35rem 1rem; }
.bf { display: flex; flex-direction: column; min-width: 0; }
.bf.wide { grid-column: 1 / -1; }
.bf-l { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.bf-v { overflow-wrap: anywhere; }
.bf.pre .bf-v { white-space: pre-wrap; }
.bf.overdue .bf-v, .overdue { color: var(--accent); font-weight: 700; }
.board-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.55rem; }
.board-panel { padding-top: 0.2rem; }
.action-list { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.action { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.action input { width: auto; margin-top: 0.25rem; }
.action-body { flex: 1; display: flex; flex-direction: column; }
.action.done .action-title { text-decoration: line-through; color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; }
.tl { display: grid; grid-template-columns: max-content max-content max-content 1fr; gap: 0.5rem; align-items: baseline; padding: 0.25rem 0; border-bottom: 1px solid var(--border); cursor: default; }
.tl[class*="tl-decision"], .tl[class*="tl-action"], .tl[class*="tl-key_event"] { cursor: pointer; }
.tl-actor { font-weight: 600; font-size: 0.9rem; }
.tl-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; }
@media (max-width: 760px) { .tl { grid-template-columns: max-content 1fr; } .tl-actor { display: none; } }

.k { display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.k-decision { background: #e3f2fd; border-color: #90caf9; color: #0d47a1; }
.k-action { background: #fff3e0; border-color: #ffb74d; color: #8a4b00; }
.k-key_event { background: #f3e5f5; border-color: #ce93d8; color: #6a1b9a; }
.k-declared, .k-resolved, .k-reopened { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.k-broadcast { background: #fff8e1; border-color: #ffd54f; color: #7a5b00; }
.k-rollcall { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; }
.tag-btn { cursor: pointer; font-size: 0.72rem; }

.msg.kind-status { margin: 0.35rem 1rem; padding: 0.5rem 0.75rem; border: 1px solid var(--info-border); background: var(--info-bg); border-radius: 8px; }
.msg.kind-broadcast { margin: 0.35rem 1rem; padding: 0.5rem 0.75rem; border: 1px solid var(--warn-border); background: var(--warn-bg); border-left: 4px solid var(--accent); border-radius: 8px; }
.msg.kind-rollcall { margin: 0.35rem 1rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); background: var(--surface); border-left: 4px solid var(--ok); border-radius: 8px; }
.msg.kind-status .msg-actions, .msg.kind-broadcast .msg-actions, .msg.kind-rollcall .msg-actions { right: 0.75rem; }
.msg.tagged { border-left: 3px solid var(--border); }
.msg.tag-decision { border-left-color: #1e88e5; }
.msg.tag-action { border-left-color: #fb8c00; }
.msg.tag-key_event { border-left-color: #8e24aa; }
.msg.flash { animation: flash 1.5s ease; }
@keyframes flash { 0% { background: var(--mention); } 100% { background: transparent; } }
.kind-label { font-weight: 800; font-size: 0.8rem; }
.msg-actions.open { opacity: 1; position: static; flex-wrap: wrap; margin-top: 0.3rem; align-items: center; }
.seen { margin-left: auto; color: var(--muted); font-size: 0.75rem; cursor: default; }
.bcast-foot { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.35rem; }

.rc-card { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem; }
.rc-tally, .rc-actions, .rc-manage { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.rc-pill { font-size: 0.8rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.rc-pill.rc-available { border-color: #66bb6a; }
.rc-pill.rc-unavailable { border-color: #bdbdbd; }
.rc-pill.rc-need_help { border-color: #ef5350; font-weight: 700; }
.btn.rc-available { border-color: #66bb6a; }
.btn.rc-need_help { border-color: #ef5350; color: var(--accent); }
.btn.chosen { outline: 2px solid var(--link); }
.rc-h.rc-need_help { color: var(--accent); }

.attachment { margin-top: 0.35rem; }
.attachment > a:first-child:has(img) { display: block; margin-bottom: 0.2rem; }
.att-img { max-width: min(360px, 100%); max-height: 260px; border-radius: 6px; border: 1px solid var(--border); display: block; }
.att-link { font-size: 0.9rem; }
.tools { display: flex; gap: 0.4rem; padding: 0.35rem 1rem 0; background: var(--surface); border-top: 1px solid var(--border); }
.tools[hidden] + .composer { border-top: 1px solid var(--border); }
.tools:not([hidden]) + .composer { border-top: 0; }
.attach-btn { flex-direction: row; cursor: pointer; font-size: 1.25rem; padding: 0.35rem 0.2rem; user-select: none; }

.dlg { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.1rem 1.25rem; }
.dlg::backdrop { background: rgba(0, 0, 0, 0.45); }
.dlg h3 { font-size: 0.95rem; margin: 0.8rem 0 0.3rem; }
.dlg-bar { display: flex; gap: 0.5rem; }
.plist { margin: 0; padding-left: 1.2rem; font-size: 0.92rem; }

@media (prefers-color-scheme: dark) {
  .k-decision { background: #0d2b4a; color: #90caf9; border-color: #1e5a96; }
  .k-action { background: #3d2600; color: #ffcc80; border-color: #8a5a00; }
  .k-key_event { background: #331a3d; color: #e1bee7; border-color: #6a1b9a; }
  .k-declared, .k-resolved, .k-reopened { background: #3b1717; color: #ef9a9a; border-color: #8a3434; }
  .k-broadcast { background: #3a2c12; color: #ffe082; border-color: #8a6420; }
  .k-rollcall { background: #12301a; color: #a5d6a7; border-color: #2e7d32; }
}
.chip-group { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0 0.3rem; }
.board-actions { align-items: center; }

/* ---------- Phase 3: directory, runbooks, status ---------- */
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.card-head h1 { margin: 0; }
.card-head .actions { display: flex; gap: 0.4rem; }
.filter { margin-top: 0.5rem; }
.pre { white-space: pre-wrap; }
.span-all { grid-column: 1 / -1; }
table.contacts td { font-size: 0.93rem; }
.docs { list-style: none; margin: 0; padding: 0; }
.docs li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.doc-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.doc-title { font-weight: 600; }
.drill-banner { background: repeating-linear-gradient(45deg, #b26a00, #b26a00 12px, #8f5500 12px, #8f5500 24px); color: #fff; padding: 0.45rem 1rem; font-weight: 800; text-align: center; letter-spacing: 0.04em; }
.drill-tag { display: inline-block; font-size: 0.7rem; font-weight: 800; padding: 0 0.35rem; border-radius: 4px; background: #b26a00; color: #fff; }
.actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.status-page main { max-width: 760px; }
.status-ok { color: var(--ok); font-weight: 700; font-size: 1.15rem; }
.status-bad { color: var(--accent); font-weight: 700; font-size: 1.15rem; }
.pub-inc { border-left: 4px solid var(--border); padding: 0.4rem 0.9rem; margin: 0.9rem 0; }
.pub-inc h2 { margin: 0 0 0.2rem; }
.pub-inc.impact-major { border-left-color: #c62828; }
.pub-inc.impact-partial { border-left-color: #e65100; }
.pub-inc.impact-minor { border-left-color: #b28704; }
.pub-inc.resolved { border-left-color: var(--ok); opacity: 0.8; }
.card h3 { font-size: 1rem; margin: 0.8rem 0 0; }
.push-ctl { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.push-ctl .btn { width: 100%; }
.hold-tag, .pub-tag { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0 0.4rem; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); }
.hold-tag { border-color: #6a1b9a; }
.pub-tag { border-color: var(--link); }
.chan .drill-tag { margin-right: 0.2rem; }
.dlg label.check { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 400; flex-wrap: wrap; }