:root {
  color-scheme: light;
  --brand: #4338CA;
  --brand-strong: #35299E;
  --paper: #F5F5FB;
  --surface: #FFFFFF;
  --surface-2: #FBFBFE;
  --ink: #17171F;
  --ink-soft: #55556B;
  --ink-mute: #8B8BA3;
  --border: #E3E3F0;
  --border-strong: #CFCFE4;
  --st-good: #0ca30c;
  --st-warn: #c98500;
  --st-serious: #d9663d;
  --st-critical: #d03b3b;
  --waze: #00a9d1;
  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 22px;
  --font: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* Default theme is fixed light — intentionally not following prefers-color-scheme. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); }
button, input, select, textarea { font-family: inherit; font-size: 13px; }
h1, h2, h3 { margin: 0; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.shell { max-width: 880px; margin: 0 auto; padding: 24px 20px 60px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.topbar h1 { font-size: 19px; font-weight: 700; }
.topbar .who { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-soft); }
.btn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); border-radius: var(--radius-s); padding: 8px 14px; font-weight: 600; cursor: pointer; }
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); color: #fff; }
.btn-link { background: none; border: none; color: var(--ink-mute); cursor: pointer; text-decoration: underline; padding: 0; }

.login-card { max-width: 380px; margin: 80px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 32px; text-align: center; }
.login-card h1 { font-size: 20px; margin-bottom: 8px; }
.login-card p { font-size: 13px; color: var(--ink-soft); margin-bottom: 20px; }

.chiprow { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 14px; }
.chip { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft); font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.summary-strip { display: flex; gap: 8px; margin-bottom: 16px; }
.summary-tile { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 10px 6px; text-align: center; }
.summary-tile b { display: block; font-size: 18px; }
.summary-tile span { font-size: 10.5px; color: var(--ink-mute); }
.summary-tile.st-critical b { color: var(--st-critical); }
.summary-tile.st-serious b { color: var(--st-serious); }
.summary-tile.st-warn b { color: var(--st-warn); }
.summary-tile.st-good b { color: var(--st-good); }

.avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0; }

.tcard { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 13px 13px 16px; margin-bottom: 10px; cursor: pointer; }
.tcard::before { content:""; position:absolute; top:0; right:0; bottom:0; width:4px; background: var(--assignee-c, var(--border-strong)); }
.tcard:hover { border-color: var(--border-strong); }
.tcard__top { display: flex; align-items: flex-start; gap: 10px; }
.tcard__body { flex: 1; min-width: 0; }
.tcard__title { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.tcard__sub { font-size: 11.5px; color: var(--ink-soft); }
.tcard__due b { display: block; font-size: 12px; }
.tcard__meter { height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; margin: 10px 0 8px; }
.tcard__meter i { display: block; height: 100%; border-radius: 4px; }
.tcard__foot { display: flex; align-items: center; justify-content: space-between; }
.tcard__who { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
.st-critical-c { color: var(--st-critical); } .meter-critical { background: var(--st-critical); }
.st-serious-c  { color: var(--st-serious); }  .meter-serious  { background: var(--st-serious); }
.st-warn-c     { color: var(--st-warn); }     .meter-warn     { background: var(--st-warn); }
.st-good-c     { color: var(--st-good); }     .meter-good     { background: var(--st-good); }

.empty { text-align: center; padding: 50px 20px; color: var(--ink-mute); font-size: 13px; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(10,10,20,.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 20; }
.modal { width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; background: var(--surface); border-radius: var(--radius-l); padding: 22px; }
.modal h3 { font-size: 16px; margin-bottom: 14px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-s);
  padding: 8px 10px; background: var(--surface); color: var(--ink);
}
.field textarea { min-height: 60px; resize: vertical; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.error-text { color: var(--st-critical); font-size: 12px; margin-top: 6px; }

.hist-row { display: flex; gap: 10px; margin-bottom: 10px; }
.hist-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-top: 5px; flex-shrink: 0; }
.hist-text { font-size: 12.5px; }
.hist-when { font-size: 10.5px; color: var(--ink-mute); }
.waze-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--waze); color: #fff; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 999px; text-decoration: none; }

.coming-soon { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 12px 14px; font-size: 12px; color: var(--ink-mute); margin-top: 18px; }