/* Owner support board. Same palette as the Dialer; follows its dark theme. */
:root { --ink:#17201d; --muted:#68736f; --canvas:#f5f7f6; --panel:#fff; --line:#dfe5e2; --line-strong:#cdd6d2;
  --green:#176b50; --green-dark:#10523e; --green-soft:#e8f4ef; --amber:#a66814; --amber-soft:#faf1df; --red:#943535; --red-soft:#fbeeee; --blue:#315d9d; --blue-soft:#edf3fb;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.5; color:var(--ink); background:var(--canvas); }
[data-theme="dark"] { --ink:#e6ece9; --muted:#9aa6a1; --canvas:#111614; --panel:#1a211e; --line:#2b332f; --line-strong:#3a4540;
  --green:#3fae84; --green-dark:#8fe0bd; --green-soft:#16362a; --amber:#d8a758; --amber-soft:#3a2e17; --red:#ff8a8a; --red-soft:#3a1d1d; --blue:#8fb4e6; --blue-soft:#1a2942; }
* { box-sizing:border-box; } body { margin:0; background:var(--canvas); color:var(--ink); } [hidden] { display:none !important; }
button, select, textarea { font:inherit; color:inherit; }
button { min-height:40px; border:1px solid var(--line-strong); border-radius:8px; background:var(--panel); padding:8px 14px; cursor:pointer; }
button:hover:not(:disabled) { background:var(--green-soft); } button:disabled { opacity:.55; cursor:not-allowed; }
button:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.primary { background:var(--green); border-color:var(--green); color:#fff; font-weight:700; }
.primary:hover:not(:disabled) { background:var(--green-dark); color:var(--panel); }
.danger { color:var(--red); }
a { color:var(--green); }
.top { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 24px; background:var(--panel); border-bottom:1px solid var(--line); }
.brand { display:flex; gap:10px; align-items:center; } .brand strong { font-size:18px; display:block; } .brand small { color:var(--muted); }
.top-right { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.worker { display:flex; gap:8px; align-items:center; font-weight:600; font-size:14px; }
.worker select { min-height:38px; border:1px solid var(--line-strong); border-radius:8px; background:var(--panel); padding:6px 10px; }
main { max-width:1100px; margin:0 auto; padding:20px 24px 60px; }
.gate { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tabs button[aria-pressed="true"] { background:var(--ink); color:var(--canvas); border-color:var(--ink); }
.tabs span:not(:empty) { display:inline-block; min-width:22px; padding:0 6px; margin-left:4px; border-radius:11px; background:var(--green-soft); color:var(--green-dark); font-size:12px; font-weight:700; }
.ship-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:var(--green-soft); border:1px solid var(--green); border-radius:10px; padding:10px 14px; margin-bottom:12px; }
.ship-bar p { margin:0; font-size:14px; }
.feedback:empty { display:none; } .feedback { background:var(--panel); border-left:4px solid var(--green); padding:10px 14px; border-radius:6px; }
.list { display:grid; gap:12px; }
.empty { color:var(--muted); background:var(--panel); border:1px dashed var(--line-strong); border-radius:10px; padding:28px; text-align:center; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; display:grid; gap:10px; }
.card-head { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.card-head h2 { margin:0; font-size:17px; line-height:1.35; overflow-wrap:anywhere; flex:1 1 300px; }
.meta { color:var(--muted); font-size:13px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { font-size:12px; font-weight:700; padding:2px 9px; border-radius:11px; background:var(--canvas); border:1px solid var(--line); white-space:nowrap; }
.chip.good { background:var(--green-soft); color:var(--green-dark); border-color:transparent; }
.chip.warn { background:var(--amber-soft); color:var(--amber); border-color:transparent; }
.chip.bad { background:var(--red-soft); color:var(--red); border-color:transparent; }
.chip.info { background:var(--blue-soft); color:var(--blue); border-color:transparent; }
.block h3 { margin:0 0 2px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.block p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.checks { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.checks li { font-size:14px; } .checks .ok::before { content:'✓ '; color:var(--green); font-weight:700; } .checks .no::before { content:'✗ '; color:var(--red); font-weight:700; }
details { border:1px solid var(--line); border-radius:8px; padding:6px 10px; } summary { cursor:pointer; font-weight:600; font-size:14px; }
pre { margin:8px 0 0; max-height:420px; overflow:auto; font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre; background:var(--canvas); padding:10px; border-radius:6px; }
pre .add { color:var(--green); } pre .del { color:var(--red); } pre .hunk { color:var(--blue); }
.stuck { background:var(--amber-soft); border-radius:8px; padding:8px 12px; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.revise { display:grid; gap:8px; } .revise textarea { width:100%; min-height:80px; border:1px solid var(--line-strong); border-radius:8px; padding:8px; background:var(--panel); }
@media (max-width:640px) { .top { padding:12px 14px; } main { padding:14px 12px 40px; } .actions button { flex:1 1 45%; } .ship-bar button { width:100%; } }
.health { background:var(--amber-soft); color:var(--ink); border-left:4px solid var(--amber); border-radius:6px; padding:10px 14px; margin:0 0 14px; }
.conversation .thread { display:grid; gap:6px; margin:8px 0; max-height:360px; overflow:auto; }
.conversation .msg { padding:7px 10px; border-radius:8px; background:var(--canvas); }
.conversation .msg.owner { background:var(--blue-soft); } .conversation .msg.system { background:var(--green-soft); }
.conversation .msg small { color:var(--muted); font-size:12px; } .conversation .msg p { margin:2px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.reply { display:grid; gap:8px; } .reply textarea { width:100%; min-height:64px; border:1px solid var(--line-strong); border-radius:8px; padding:8px; background:var(--panel); }
.reply button { justify-self:start; }
.brand strong { font-size:18px; }
.card-head h2 { flex:1 1 240px; }
.card.done { opacity:.75; }
.done-list { border:0; padding:0; margin-top:8px; } .done-list > summary { color:var(--muted); padding:8px 0; }
.done-list .card { margin-top:10px; }
.thread { display:grid; gap:4px; } .thread .msg { margin:0; font-size:14px; padding:6px 10px; border-radius:8px; background:var(--canvas); white-space:pre-wrap; overflow-wrap:anywhere; }
.thread .msg.owner { background:var(--blue-soft); }
.reply { display:flex; gap:8px; } .reply input { flex:1; min-height:40px; border:1px solid var(--line-strong); border-radius:8px; padding:6px 10px; background:var(--panel); font:inherit; }
.worker select { max-width:min(260px, 60vw); }
.top-right { min-width:0; } body { overflow-x:hidden; }
/* Overview. Series colors validated for both modes (dataviz validator, 2026-09-29). */
:root { --series-1:#2a78d6; --series-2:#eb6834; --grid:#e8ecea; }
[data-theme="dark"] { --series-1:#3987e5; --series-2:#d95926; --grid:#2b332f; }
.overview { display:grid; gap:14px; }
.tiles { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:grid; gap:2px; }
.tile span { font-size:13px; color:var(--muted); } .tile strong { font-size:28px; line-height:1.1; font-variant-numeric:tabular-nums; }
.chart { margin:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 14px 8px; }
.chart figcaption { font-weight:700; font-size:14px; }
.legend { display:flex; gap:14px; margin:6px 0 4px; font-size:13px; color:var(--muted); }
.legend .key { display:flex; align-items:center; gap:6px; } .legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.legend i.s1 { background:var(--series-1); } .legend i.s2 { background:var(--series-2); }
.plot { position:relative; } .plot svg { display:block; max-width:100%; height:auto; }
.plot .bar.s1 { fill:var(--series-1); } .plot .bar.s2 { fill:var(--series-2); }
.plot .grid { stroke:var(--grid); stroke-width:1; } .plot .axis { stroke:var(--line-strong); stroke-width:1; }
.plot .tick { fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.plot .hit { fill:transparent; } .plot .hit.on { fill:var(--ink); fill-opacity:.05; }
.tip { position:absolute; z-index:2; pointer-events:none; display:grid; gap:2px; min-width:140px; padding:8px 10px; border-radius:8px; background:var(--panel); border:1px solid var(--line-strong); box-shadow:0 6px 18px rgba(0,0,0,.12); font-size:13px; }
.table-wrap { overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
table.plain { width:100%; border-collapse:collapse; font-size:14px; }
table.plain th { text-align:left; font-size:12px; color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line); }
table.plain td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
table.plain tr:last-child td { border-bottom:0; }
table.plain td.title { overflow-wrap:anywhere; min-width:180px; } table.plain td.num { font-variant-numeric:tabular-nums; }
table.plain .empty-row { color:var(--muted); text-align:center; }
@media (max-width:640px) { .tiles { grid-template-columns:repeat(2, minmax(0,1fr)); } }
