/* ============================================================
   FIREBREAK — reactive-work tracker
   Design thesis: the interface is cool greyscale. The ONLY warm
   colours in the product encode age. Warmth = information.
   (Carried over from the original prototype — this part earned
   its keep. Everything about state and data is new.)
   ============================================================ */
:root{
  --ink:#14171a;
  --ink-2:#3d4448;
  --muted:#6b7376;
  --paper:#eef0ef;
  --surf:#f8f9f8;
  --surf-2:#f1f3f2;
  --surf-3:#e8ebea;
  --rule:#d3d8d7;
  --rule-2:#e3e7e6;

  --accent:#1c5c8a;
  --accent-ink:#12405f;

  --heat-1:#2f7d6a;
  --heat-2:#8a7a24;
  --heat-3:#c06416;
  --heat-4:#b0271a;
  --heat-5:#7a1210;

  --st-new:#1c5c8a;
  --st-working:#2f7d6a;
  --st-waiting:#8a7a24;
  --st-resolved:#8a9195;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --rail:248px;
  --rec:400px;
  --r:3px;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:13.5px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; padding:0; }
a{ color:var(--accent); }

.eyebrow{
  font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

.app{ height:100%; display:flex; flex-direction:column; }

.top{
  display:flex; align-items:center; gap:22px;
  padding:0 18px; height:58px; flex:0 0 auto;
  background:var(--surf); border-bottom:1px solid var(--rule);
}
.brand{ display:flex; align-items:baseline; gap:9px; flex:0 0 auto; }
.mark{
  width:11px; height:11px; background:var(--ink); display:inline-block;
  transform:translateY(1px);
}
.brand-name{
  font-size:15px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.brand-sub{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  border-left:1px solid var(--rule); padding-left:10px;
}

.intake{
  flex:1 1 auto; display:flex; align-items:center; gap:10px; min-width:0;
  height:36px; padding:0 12px;
  background:var(--surf-2); border:1px solid var(--rule); border-radius:var(--r);
  transition:border-color .12s, background .12s, box-shadow .12s;
}
.intake:focus-within{
  background:#fff; border-color:var(--ink-2); box-shadow:0 0 0 3px rgba(20,23,26,.06);
}
.intake-caret{ color:var(--muted); font-family:var(--mono); font-size:14px; }
#intakeInput{
  flex:1 1 auto; min-width:0; border:none; outline:none; background:transparent;
  font-size:13.5px;
}
#intakeInput::placeholder{ color:#9aa1a3; }
.intake kbd{
  font-family:var(--mono); font-size:10px; color:var(--muted);
  border:1px solid var(--rule); border-radius:2px; padding:1px 5px; background:var(--surf);
}
.top-actions{ flex:0 0 auto; display:flex; gap:10px; align-items:center; }
.conn-state{ font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.conn-state.is-live{ color:var(--heat-1); }
.conn-state.is-down{ color:var(--heat-4); }
.icon-btn{
  width:30px; height:30px; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--surf); color:var(--ink-2); font-weight:700; font-size:13px;
  display:grid; place-items:center; transition:background .12s, border-color .12s;
}
.icon-btn:hover{ background:var(--surf-2); border-color:var(--ink-2); }

.board{ flex:1 1 auto; display:flex; min-height:0; }

.rail{
  flex:0 0 var(--rail); width:var(--rail);
  background:var(--surf); border-right:1px solid var(--rule);
  overflow-y:auto; padding:14px 0 22px;
}
.rail-sec{ padding:0 14px; margin-bottom:6px; }
.rail-sec + .rail-sec{ margin-top:20px; }
.rail-sec-head{ padding:0 0 7px; }
.rail-view{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:6px 9px; margin-bottom:1px; border-radius:var(--r);
  text-align:left; color:var(--ink-2);
  transition:background .1s, color .1s;
}
.rail-view:hover{ background:var(--surf-2); color:var(--ink); }
.rail-view.is-on{ background:var(--ink); color:#fff; }
.rail-view.is-on .rail-count{ color:#fff; border-color:rgba(255,255,255,.3); }
.rail-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.rail-label{ flex:1 1 auto; font-size:13px; }
.rail-count{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  border:1px solid var(--rule); border-radius:9px; padding:0 6px; min-width:22px; text-align:center;
}
/* the ONE place the sidebar is allowed to turn red: something in Ageing
   is actually on fire right now. Never a fixed "you're on this tab" color. */
.rail-count.is-hot{ color:#fff; background:var(--heat-4); border-color:var(--heat-4); }
.rail-note{
  font-size:11.5px; color:var(--muted); line-height:1.5;
  padding:9px 10px; background:var(--surf-2); border-radius:var(--r);
  border:1px solid var(--rule-2);
}
.rail-actions{ display:flex; flex-wrap:wrap; gap:5px; padding:0 14px; }
.mini-btn{
  font-size:11px; padding:4px 8px; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--surf-2); color:var(--ink-2); transition:background .1s, border-color .1s;
}
.mini-btn:hover{ background:#fff; border-color:var(--ink-2); color:var(--ink); }
.me-row{ display:flex; align-items:center; gap:7px; padding:0 14px; }
.me-row input{
  flex:1 1 auto; min-width:0; background:var(--surf-2); border:1px solid var(--rule);
  border-radius:var(--r); padding:4px 8px; font-size:12px; outline:none;
}
.me-row input:focus{ border-color:var(--ink-2); background:#fff; }

.ledger{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0; }
.ledger-head{
  flex:0 0 auto; padding:16px 22px 12px; border-bottom:1px solid var(--rule);
  background:var(--paper);
}
.ledger-title{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.ledger-title h1{ font-size:19px; margin:0; font-weight:800; letter-spacing:-.01em; }
.ledger-sub{ font-size:12px; color:var(--muted); }
.ledger-tools{ display:flex; gap:8px; align-items:center; margin-top:11px; flex-wrap:wrap; }
#search{
  flex:1 1 200px; min-width:140px; max-width:320px;
  background:var(--surf); border:1px solid var(--rule); border-radius:var(--r);
  padding:6px 10px; font-size:12.5px; outline:none;
}
#search:focus{ border-color:var(--ink-2); background:#fff; }
.seg{ display:flex; border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
.seg button{
  padding:5px 10px; font-size:11.5px; color:var(--ink-2); background:var(--surf);
  border-right:1px solid var(--rule);
}
.seg button:last-child{ border-right:none; }
.seg button.is-on{ background:var(--ink); color:#fff; }

.ledger-body{ flex:1 1 auto; overflow-y:auto; padding:0 0 60px; }

.heatstrip{
  display:flex; height:34px; margin:0; border-bottom:1px solid var(--rule);
  background:var(--surf);
}
.heatseg{
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-width:0; overflow:hidden; position:relative;
  border-right:1px solid rgba(255,255,255,.5); color:#fff;
  font-family:var(--mono); font-size:11px; font-weight:700;
  transition:opacity .12s;
}
.heatseg:last-child{ border-right:none; }
.heatseg.is-zero{ opacity:.28; }
.heatseg-lab{
  font-family:var(--sans); font-size:9.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; opacity:.85;
}
.heatseg-n{ font-size:12px; }

.group{ border-bottom:1px solid var(--rule); }
.group-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 22px 8px;
}
.group-head h2{
  font-size:12px; margin:0; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
}
.group-head .n{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  border:1px solid var(--rule); border-radius:9px; padding:0 6px;
}
.group-note{ font-size:11.5px; color:var(--muted); padding:0 22px 8px; max-width:62ch; }
.group.is-clear{ opacity:.6; }
.group-clear{ font-size:11.5px; color:var(--muted); padding:0 22px 14px; }

.row{
  display:flex; align-items:stretch; gap:0;
  padding:0 22px; border-top:1px solid var(--rule-2);
  cursor:pointer; position:relative; background:transparent;
  transition:background .1s;
}
.row:hover{ background:var(--surf); }
.row.is-sel{ background:#fff; }
.row.is-sel::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ink);
}
.row.is-flash{ animation:flash .9s ease-out; }
@keyframes flash{ 0%{ background:rgba(28,92,138,.14);} 100%{ background:transparent; } }

.row-status{ flex:0 0 8px; align-self:stretch; width:8px; margin-right:12px; }
.row-status i{ display:block; width:3px; height:100%; }
.row-main{ flex:1 1 auto; min-width:0; padding:10px 0 9px; }
.row-top{ display:flex; align-items:baseline; gap:9px; }
.row-title{
  flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:700; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row.is-resolved .row-title{ color:var(--muted); font-weight:500; text-decoration:line-through; text-decoration-color:var(--rule); }
.row-meta{
  display:flex; align-items:center; gap:10px; margin-top:4px;
  font-size:11.5px; color:var(--muted); flex-wrap:wrap;
}
.tag-urgent{
  font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--heat-4); border-radius:2px; padding:1px 5px;
}
.warn-icon{ display:inline-flex; align-items:center; }
.warn-icon svg{ width:15px; height:15px; flex:0 0 auto; }
.tag-unclaimed{
  font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--heat-5); border:1px solid currentColor; border-radius:2px; padding:0 4px;
}
.row-side{
  flex:0 0 118px; padding:10px 0 9px; display:flex; flex-direction:column;
  align-items:flex-end; gap:5px;
}
.row-age{ font-family:var(--mono); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.agebar{ width:104px; height:4px; background:var(--surf-3); border-radius:2px; overflow:hidden; }
.agefill{ height:100%; border-radius:2px; transition:width .3s ease; }
.row-sub{ font-family:var(--mono); font-size:10px; color:var(--muted); }

.record{
  flex:0 0 var(--rec); width:var(--rec);
  background:var(--surf); border-left:1px solid var(--rule);
  display:flex; flex-direction:column; min-height:0;
}
.rec-head{
  flex:0 0 auto; padding:14px 18px 12px; border-bottom:1px solid var(--rule);
  display:flex; align-items:flex-start; gap:10px;
}
.rec-head-main{ flex:1 1 auto; min-width:0; }
.rec-id{ font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.rec-close{ font-size:16px; color:var(--muted); line-height:1; padding:2px 4px; border-radius:2px; }
.rec-close:hover{ background:var(--surf-3); color:var(--ink); }
.rec-body{ flex:1 1 auto; overflow-y:auto; padding:14px 18px 30px; }

.field{ margin-bottom:15px; }
.field > .eyebrow{ display:block; margin-bottom:5px; }
.field-title textarea{
  width:100%; border:1px solid transparent; background:transparent; border-radius:var(--r);
  padding:5px 7px; font-size:14.5px; font-weight:650; line-height:1.35; resize:none; outline:none;
}
.field-title textarea:hover{ background:var(--surf-2); }
.field-title textarea:focus{ background:#fff; border-color:var(--rule); }
.inp{
  width:100%; background:var(--surf-2); border:1px solid var(--rule); border-radius:var(--r);
  padding:6px 9px; font-size:12.5px; outline:none;
}
.inp:focus{ background:#fff; border-color:var(--ink-2); }

.statgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule-2);
  border:1px solid var(--rule-2); border-radius:var(--r); overflow:hidden; margin-bottom:15px; }
.stat{ background:var(--surf); padding:8px 10px; }
.stat-lab{ font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.stat-val{ font-family:var(--mono); font-size:14px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; }

.statuses{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.status-btn{
  display:flex; align-items:center; gap:7px; padding:7px 9px;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--surf-2);
  font-size:12px; color:var(--ink-2); text-align:left;
  transition:background .1s, border-color .1s;
}
.status-btn:hover{ background:#fff; border-color:var(--ink-2); color:var(--ink); }
.status-btn.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.status-btn .swatch{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.status-btn.is-on .swatch{ box-shadow:0 0 0 2px rgba(255,255,255,.35); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 12px; border-radius:var(--r); font-size:12.5px; font-weight:600;
  border:1px solid var(--rule); background:var(--surf-2); color:var(--ink-2);
  transition:background .1s, border-color .1s, color .1s;
}
.btn:hover{ background:#fff; border-color:var(--ink-2); color:var(--ink); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-ink); border-color:var(--accent-ink); color:#fff; }
.btn-resolve{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn-resolve:hover{ background:#000; border-color:#000; color:#fff; }
.btn-row{ display:flex; gap:6px; flex-wrap:wrap; }

.timeline{ margin-top:4px; }
.tl-item{ display:flex; gap:9px; padding:7px 0; border-top:1px solid var(--rule-2); }
.tl-item:first-child{ border-top:none; }
.tl-dot{ flex:0 0 5px; width:5px; height:5px; border-radius:50%; background:var(--rule); margin-top:6px; }
.tl-dot.t-status{ background:var(--accent); }
.tl-dot.t-resolve{ background:var(--st-working); }
.tl-dot.t-note{ background:var(--muted); }
.tl-main{ flex:1 1 auto; min-width:0; }
.tl-text{ font-size:12.5px; color:var(--ink-2); word-wrap:break-word; }
.tl-time{ font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-top:2px; }

.note-add{ display:flex; gap:6px; margin-top:10px; }
.note-add textarea{
  flex:1 1 auto; min-width:0; background:var(--surf-2); border:1px solid var(--rule);
  border-radius:var(--r); padding:6px 9px; font-size:12.5px; resize:vertical; min-height:36px; outline:none;
}
.note-add textarea:focus{ background:#fff; border-color:var(--ink-2); }

.empty{ padding:34px 22px 40px; max-width:56ch; }
.empty h3{ font-size:13px; margin:0 0 6px; font-weight:700; }
.empty p{ margin:0 0 8px; color:var(--muted); font-size:12.5px; }
.empty kbd{
  font-family:var(--mono); font-size:11px; border:1px solid var(--rule);
  border-radius:2px; padding:1px 5px; background:var(--surf);
}

.modal-wrap{
  position:fixed; inset:0; background:rgba(20,23,26,.34);
  display:grid; place-items:center; padding:24px; z-index:60;
}
.modal{
  width:min(640px,100%); max-height:82vh; overflow:auto;
  background:var(--surf); border:1px solid var(--ink-2); border-radius:var(--r);
  box-shadow:0 24px 60px rgba(20,23,26,.28);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 18px; border-bottom:1px solid var(--rule);
}
.modal-head h2{ font-size:13px; margin:0; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.modal-body{ padding:16px 18px 20px; }
.shortcut-grid{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:12.5px; }
.shortcut-grid kbd{
  font-family:var(--mono); font-size:11px; border:1px solid var(--rule);
  border-radius:2px; padding:2px 6px; background:var(--surf-2); text-align:center;
}
.hint-text{ font-size:12px; color:var(--muted); margin:0 0 10px; line-height:1.55; }
.hint-text code{ background:var(--surf-2); border:1px solid var(--rule); border-radius:2px; padding:1px 4px; }

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:12.5px;
  padding:8px 14px; border-radius:var(--r); z-index:80;
  box-shadow:0 10px 30px rgba(20,23,26,.3);
}

.statusbar{
  flex:0 0 auto; height:26px; display:flex; align-items:center; gap:14px;
  padding:0 18px; background:var(--surf); border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
}
.statusbar .sb-sep{ color:var(--rule); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

@media (max-width:1180px){ :root{ --rec:360px; } }
@media (max-width:980px){
  :root{ --rail:64px; }
  .rail-label,.rail-count,.brand-sub,.rail-note{ display:none; }
  .rail-view{ justify-content:center; }
  .rail-sec,.me-row,.rail-actions{ padding-left:8px; padding-right:8px; }
  .record{ position:fixed; inset:58px 0 26px 0; width:auto; z-index:50; }
  body{ overflow:auto; }
}
@media (max-width:720px){
  .row-side{ flex:0 0 84px; }
  .agebar{ width:72px; }
  .ledger-head,.group-head,.group-note,.group-clear,.row{ padding-left:14px; padding-right:14px; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }