/* Jarvis activity board (docs/BOARD.md). One stylesheet, no scripts. Light and dark follow the phone or computer. */
:root { --bg:#f4f6f9; --card:#fff; --ink:#1d2330; --muted:#677184; --line:#dde2ea; --ok:#167a3a; --okbg:#e5f4ea; --warn:#9a5b00; --warnbg:#fdf1dc;
  --bad:#b4233a; --badbg:#fbe7ea; --quiet:#5c6676; --quietbg:#eef1f5; --accent:#1f5fbf; --quote:#f7f8fb; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12161d; --card:#1a2029; --ink:#e7ebf2; --muted:#98a2b3; --line:#2b3340; --ok:#5bd38a; --okbg:#173325; --warn:#f0b357; --warnbg:#3a2c12;
    --bad:#ff7d8e; --badbg:#3b1a21; --quiet:#a8b2c2; --quietbg:#252c37; --accent:#7fb0ff; --quote:#151a22; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif; }
a { color: var(--accent); }
.top { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); }
.out { display: flex; gap: 10px; align-items: center; margin: 0; color: var(--muted); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 0 0 10px; } h2 { font-size: 17px; margin: 22px 0 10px; }
.muted, .of { color: var(--muted); font-weight: 400; font-size: 13px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.narrow { max-width: 420px; margin: 40px auto; }
.stack { display: grid; gap: 12px; } label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
input, select { font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); width: 100%; }
button, .button { font: inherit; font-weight: 600; padding: 9px 14px; border-radius: 8px; border: 0; background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
.out button { background: transparent; color: var(--accent); padding: 4px 6px; }
.err { color: var(--bad); background: var(--badbg); padding: 8px 10px; border-radius: 8px; }
.qr { background: #fff; padding: 12px; border-radius: 8px; width: 220px; margin: 6px auto; } .qr svg { width: 100%; height: auto; display: block; }
code { font-size: 13px; word-break: break-all; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.tile .v { font-size: 28px; font-weight: 700; } .tile .l { color: var(--muted); font-size: 13px; }
.tile.bad .v { color: var(--bad); }
.state { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.state .k { color: var(--muted); margin-right: 4px; }
.ok { color: var(--ok); } .bad { color: var(--bad); } .quiet { color: var(--quiet); }
.bar { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: var(--quietbg); margin-left: 8px; vertical-align: middle; overflow: hidden; }
.bar .fill { display: block; height: 100%; background: var(--ok); } .bar .fill.hot { background: var(--bad); }
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}
.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}
.filter { display: flex; gap: 8px; align-items: end; margin-top: 16px; } .filter label { width: 200px; }
.ev { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.ev.brain { border-left-color: var(--accent); } .ev.email { border-left-color: var(--ok); } .ev.alert { border-left-color: var(--warn); } .ev.inbound { border-left-color: var(--quiet); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; color: var(--muted); }
.meta .load { font-weight: 700; } .meta .carrier { color: var(--ink); }
.part { margin-top: 6px; } .lbl { display: inline-block; min-width: 92px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
blockquote { margin: 4px 0 0; padding: 8px 10px; background: var(--quote); border-radius: 8px; white-space: pre-wrap; word-wrap: break-word; }
pre.mail { margin: 4px 0 0; padding: 8px 10px; background: var(--okbg); border-radius: 8px; white-space: pre-wrap; word-wrap: break-word; font: inherit; }
pre.mail.sugg { background: var(--warnbg); }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.badge.ok { color: var(--ok); background: var(--okbg); } .badge.warn { color: var(--warn); background: var(--warnbg); } .badge.bad { color: var(--bad); background: var(--badbg); } .badge.quiet { color: var(--quiet); background: var(--quietbg); }
.reason { color: var(--ink); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; } .facts dt { color: var(--muted); }
@media (max-width: 700px) {
  main { padding: 10px; } .tiles { grid-template-columns: repeat(2, 1fr); } .tile .v { font-size: 24px; }
  .state { flex-direction: column; align-items: flex-start; gap: 4px; } .lbl { display: block; } .filter label { width: 100%; }
}