:root{
  --paper:#EEF0EC;
  --surface:#FFFFFF;
  --ink:#1E2320;
  --ink-soft:#5B635D;
  --ink-faint:#8A928B;
  --hairline:#D7DCD5;
  --hairline-strong:#BCC3BB;
  --accent:#C4872E;
  --accent-ink:#7A4E10;
  --accent-soft:#F3E4CB;
  --ontrack:#2E6E68;
  --ontrack-soft:#E1EEEC;
  --duesoon:#C4872E;
  --duesoon-soft:#F5E9D6;
  --overdue:#B14432;
  --overdue-soft:#F5E1DC;
  --blocked:#6B5C86;
  --blocked-soft:#E9E5F0;
  --done:#3D7A46;
  --done-soft:#E1EEE2;
  --radius:4px;
  --sidebar-w:220px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.wordmark,.nav-item,.btn,th{ font-family:"Space Grotesk","Inter",sans-serif; }
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }

/* ---------- boot error banner ---------- */
.boot-error{
  margin:16px 28px 0; padding:12px 16px; border:1px solid var(--overdue);
  background:var(--overdue-soft); color:var(--overdue); border-radius:var(--radius);
  font-size:13px;
}
.boot-error[hidden]{display:none;}

/* ---------- layout ---------- */
.app{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--surface); border-right:1px solid var(--hairline);
  display:flex; flex-direction:column; padding:22px 0;
}
.wordmark{ font-weight:700; font-size:20px; letter-spacing:0.01em; padding:0 22px 4px; }
.wordmark span{color:var(--accent);}
.tagline{ padding:0 22px 22px; font-size:12px; color:var(--ink-faint); border-bottom:1px solid var(--hairline); margin-bottom:14px; }
nav.nav{display:flex; flex-direction:column; gap:2px; padding:0 10px;}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius);
  color:var(--ink-soft); font-size:14px; font-weight:500; border-left:3px solid transparent;
  cursor:pointer; background:transparent; text-align:left; width:100%; border-top:none; border-right:none; border-bottom:none;
}
.nav-item .dot{width:7px; height:7px; border-radius:50%; background:var(--hairline-strong); flex:0 0 auto;}
.nav-item:hover{background:var(--paper); color:var(--ink);}
.nav-item.active{ color:var(--ink); background:var(--accent-soft); border-left-color:var(--accent); font-weight:600; }
.nav-item.active .dot{background:var(--accent);}
.sidebar-foot{ margin-top:auto; padding:14px 22px 0; font-size:11.5px; color:var(--ink-faint); border-top:1px solid var(--hairline); }

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:20px 28px; border-bottom:1px solid var(--hairline); background:var(--surface); }
.topbar h1{margin:0; font-size:19px; font-weight:600;}
.topbar-sub{font-size:12.5px; color:var(--ink-faint); margin-top:2px;}

.view{padding:24px 28px 40px; flex:1;}
.view[hidden]{display:none;}

.app-footer{ padding:12px 28px; font-size:12px; color:var(--ink-faint); border-top:1px solid var(--hairline); background:var(--surface); }

/* ---------- controls ---------- */
.btn{ font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:var(--radius); border:1px solid var(--hairline-strong); background:var(--surface); color:var(--ink); cursor:pointer; }
.btn:hover{border-color:var(--ink-faint);}
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover{background:var(--accent-ink); border-color:var(--accent-ink);}
.btn-quiet{border-color:transparent; background:transparent; color:var(--ink-soft);}
.btn-quiet:hover{color:var(--ink); background:var(--paper);}
.btn-danger-quiet{border-color:transparent; background:transparent; color:var(--overdue);}
.btn-danger-quiet:hover{background:var(--overdue-soft);}
.btn:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, .nav-item:focus-visible, .link-btn:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

select, input[type="text"], input[type="number"], input[type="date"], textarea{
  font-family:inherit; font-size:13.5px; padding:8px 10px; border-radius:var(--radius);
  border:1px solid var(--hairline-strong); background:var(--surface); color:var(--ink);
}
textarea{resize:vertical; min-height:56px;}
label{font-size:12.5px; color:var(--ink-soft); font-weight:600; display:block; margin-bottom:4px;}
.field{margin-bottom:14px;}
.field-row{display:flex; gap:12px;}
.field-row .field{flex:1;}
.search-input{min-width:180px;}
.check-label{ font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; font-weight:500; cursor:pointer; }
.check-label input{margin:0;}

.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.toolbar-filters{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.toolbar-filters label{margin:0; font-size:12px;}
.toolbar-right{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}

.segmented{display:flex; border:1px solid var(--hairline-strong); border-radius:4px; overflow:hidden;}
.segmented-btn{ padding:7px 13px; font-size:12.5px; font-weight:600; background:var(--surface); border:none; border-right:1px solid var(--hairline-strong); cursor:pointer; color:var(--ink-soft); }
.segmented-btn:last-child{border-right:none;}
.segmented-btn.active{background:var(--accent-soft); color:var(--accent-ink);}

/* ---------- ledger tables ---------- */
.table-wrap{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); overflow-x:auto; }
table{width:100%; border-collapse:collapse; min-width:640px;}
thead th{ text-align:left; font-size:12px; font-weight:600; color:var(--ink-soft); padding:10px 14px; border-bottom:1px solid var(--hairline-strong); white-space:nowrap; }
th[data-sort]{cursor:pointer; user-select:none;}
th[data-sort]:hover{color:var(--ink);}
th.sort-asc::after{content:" \25B2"; font-size:9px;}
th.sort-desc::after{content:" \25BC"; font-size:9px;}
tbody td{ padding:11px 14px; border-bottom:1px solid var(--hairline); font-size:13.5px; vertical-align:middle; }
tbody tr:last-child td{border-bottom:none;}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}
td.muted{color:var(--ink-faint);}
tr.row-archived td{color:var(--ink-faint);}
tr.row-archived .status-pill{opacity:0.6;}
.archived-tag{font-size:10.5px; font-weight:700; color:var(--ink-faint); border:1px solid var(--hairline-strong); border-radius:3px; padding:1px 5px; margin-left:6px;}
.empty-row td{padding:22px 14px; color:var(--ink-faint); font-style:normal;}
.actions-cell{display:flex; gap:10px; white-space:nowrap;}
.link-btn{background:none; border:none; color:var(--ink-soft); font-size:12.5px; font-weight:600; cursor:pointer; padding:2px 0;}
.link-btn:hover{color:var(--accent-ink); text-decoration:underline;}
.link-btn.danger{color:var(--overdue);}

.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 7px; border-radius:3px; font-size:12px; font-weight:600; }
.status-pill .dot{width:6px; height:6px; border-radius:50%;}
.status-ontrack{background:var(--ontrack-soft); color:var(--ontrack);}
.status-ontrack .dot{background:var(--ontrack);}
.status-duesoon{background:var(--duesoon-soft); color:var(--accent-ink);}
.status-duesoon .dot{background:var(--duesoon);}
.status-overdue{background:var(--overdue-soft); color:var(--overdue);}
.status-overdue .dot{background:var(--overdue);}
.status-blocked{background:var(--blocked-soft); color:var(--blocked);}
.status-blocked .dot{background:var(--blocked);}
.status-done{background:var(--done-soft); color:var(--done);}
.status-done .dot{background:var(--done);}
.status-todo{background:var(--paper); color:var(--ink-soft);}
.status-todo .dot{background:var(--ink-faint);}
.status-inprogress{background:var(--ontrack-soft); color:var(--ontrack);}
.status-inprogress .dot{background:var(--ontrack);}

select.status-select{ border:1px solid var(--hairline); font-size:12.5px; font-weight:600; padding:5px 8px; border-radius:3px; }

.progress{width:100px; height:6px; background:var(--paper); border-radius:3px; overflow:hidden; border:1px solid var(--hairline);}
.progress-fill{height:100%; background:var(--ontrack);}
.progress-cell{display:flex; align-items:center; gap:8px;}
.progress-label{font-size:12px; color:var(--ink-faint); white-space:nowrap;}

/* ---------- dashboard ---------- */
.kpi-strip{ display:grid; grid-template-columns:repeat(4, 1fr); background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); margin-bottom:22px; overflow:hidden; }
.kpi{padding:18px 20px; border-right:1px solid var(--hairline);}
.kpi:last-child{border-right:none;}
.kpi-value{font-family:"Space Grotesk",sans-serif; font-size:28px; font-weight:700; font-variant-numeric:tabular-nums;}
.kpi-label{font-size:12.5px; color:var(--ink-faint); margin-top:2px;}

.panels{display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; margin-bottom:20px;}
.panel{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius);}
.panel-head{padding:14px 16px; border-bottom:1px solid var(--hairline); font-weight:600; font-size:14px;}
.panel-body{padding:6px 16px 12px;}
.pulse-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--hairline);}
.pulse-row:last-child{border-bottom:none;}
.pulse-name{font-weight:600; font-size:13.5px;}
.pulse-sub{font-size:12px; color:var(--ink-faint); margin-top:1px;}
.util-row{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--hairline);}
.util-row:last-child{border-bottom:none;}
.util-name{flex:1; font-size:13px; font-weight:500;}
.util-hours{font-size:12.5px; color:var(--ink-faint); width:54px; text-align:right; font-variant-numeric:tabular-nums;}
.util-bar{width:80px; height:6px; background:var(--paper); border:1px solid var(--hairline); border-radius:3px; overflow:hidden;}
.util-fill{height:100%; background:var(--accent);}
.chart-wrap{padding:16px 18px 10px;}

/* ---------- kanban board ---------- */
.board{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
.board-col{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); display:flex; flex-direction:column; min-height:140px;}
.board-col-head{ padding:10px 12px; border-bottom:1px solid var(--hairline); display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.board-col-body{padding:10px; display:flex; flex-direction:column; gap:8px; flex:1; min-height:70px;}
.board-col-body.drag-over{background:var(--accent-soft);}
.board-card{background:var(--paper); border:1px solid var(--hairline); border-radius:4px; padding:9px 10px; cursor:grab;}
.board-card:active{cursor:grabbing;}
.board-card.dragging{opacity:0.4;}
.board-card-title{font-weight:600; font-size:13px; margin-bottom:5px;}
.board-card-meta{color:var(--ink-faint); font-size:11.5px; display:flex; justify-content:space-between; gap:6px;}
.board-empty{color:var(--ink-faint); font-size:12px; padding:10px 2px;}

/* ---------- weekly grid ---------- */
.week-nav{display:flex; align-items:center; gap:10px; margin:2px 0 16px;}
.week-label{font-weight:600; font-size:13.5px;}
.week-grid-wrap{overflow-x:auto; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius);}
table.week-grid{width:100%; border-collapse:collapse; min-width:760px;}
.week-grid th, .week-grid td{border-bottom:1px solid var(--hairline); padding:9px 10px; font-size:12.5px;}
.week-grid thead th{background:var(--paper); text-align:center; font-weight:600; border-bottom:1px solid var(--hairline-strong);}
.week-grid td.task-name{text-align:left; font-weight:500; max-width:220px;}
.week-grid td.task-name .task-sub{display:block; font-size:11px; color:var(--ink-faint); font-weight:400;}
.week-grid input.hour-cell{ width:54px; text-align:center; padding:5px 4px; font-variant-numeric:tabular-nums; }
.week-grid td.total-cell, .week-grid th.total-col{font-weight:700; background:var(--paper); text-align:center;}
.week-grid tfoot td{font-weight:700; background:var(--paper); text-align:center;}

/* ---------- modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(20,22,20,0.42); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; }
.modal-overlay[hidden]{display:none;}
.modal{ background:var(--surface); border-radius:6px; width:100%; max-width:440px; max-height:88vh; overflow-y:auto; border:1px solid var(--hairline-strong); }
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--hairline);}
.modal-head h2{margin:0; font-size:16px; font-weight:600;}
.modal-close{background:none; border:none; font-size:20px; line-height:1; cursor:pointer; color:var(--ink-faint); padding:2px 4px;}
.modal-close:hover{color:var(--ink);}
.modal-body{padding:18px 20px 20px;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:6px;}

/* ---------- toast ---------- */
.toast{ position:fixed; bottom:22px; right:22px; background:var(--ink); color:#fff; padding:10px 16px; border-radius:4px; font-size:13px; font-weight:500; opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease; pointer-events:none; z-index:60; }
.toast.show{opacity:1; transform:translateY(0);}
.toast.error{background:var(--overdue);}

/* ---------- mobile ---------- */
@media (max-width: 860px){
  .app{flex-direction:column;}
  .sidebar{ width:100%; flex:0 0 auto; flex-direction:row; align-items:center; padding:12px 14px; gap:14px; overflow-x:auto; }
  .wordmark, .tagline, .sidebar-foot{display:none;}
  nav.nav{flex-direction:row; padding:0;}
  .nav-item{white-space:nowrap; border-left:none; border-bottom:3px solid transparent;}
  .nav-item.active{border-left-color:transparent; border-bottom-color:var(--accent);}
  .kpi-strip{grid-template-columns:repeat(2,1fr);}
  .kpi:nth-child(2){border-right:none;}
  .panels{grid-template-columns:1fr;}
  .board{grid-template-columns:1fr 1fr;}
  .view{padding:18px 16px 32px;}
  .topbar{padding:16px;}
}
@media (max-width: 520px){ .board{grid-template-columns:1fr;} }