/* ============================================================
   VISTRUX OS — application shell

   Brand rules applied, not approximated:
     · Open Sauce One carries identity and emphasis; Inter carries
       information. Both are served from /fonts by this application; nothing
       here is fetched from Google.
     · Warm Off-White is the page, White is the card, Deep Teal is
       structure and emphasis — roughly 60/20/10/7/3.
     · Engineering precision through thin rules, fine grids, exact
       alignment and generous whitespace. Not through decoration.
   ============================================================ */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/Inter-Regular.ttf') format('truetype');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/Inter-Medium.ttf') format('truetype');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/Inter-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Open Sauce One';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/OpenSauceOne-Regular.ttf') format('truetype');}
@font-face{font-family:'Open Sauce One';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/OpenSauceOne-Medium.ttf') format('truetype');}
@font-face{font-family:'Open Sauce One';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/OpenSauceOne-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Open Sauce One';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/OpenSauceOne-Bold.ttf') format('truetype');}

:root{
  --teal:#204141;
  --teal-2:#3C6463;
  --sage:#829795;
  --sand:#D8CBB8;
  --bg:#F7F5F0;
  --surface:#FFFFFF;
  --ink:#151A19;
  --muted:#66706E;

  /* Derived, so every tint stays inside the palette */
  --line:#E4E0D7;
  --line-soft:#EFEBE3;
  --teal-tint:#EDF1F0;
  --sand-tint:#FBF7F1;

  /* Status. Kept deliberately muted: this is an engineering tool,
     not a dashboard that shouts. */
  --ok:#3C6463;
  --warn:#B4762A;
  --risk:#A8443C;
  --hold:#7B6CA6;

  --f-head:'Open Sauce One', 'Segoe UI', sans-serif;
  --f-body:'Inter', -apple-system, 'Segoe UI', sans-serif;
  --rail:216px;
  --r:5px;
  --shadow:0 1px 2px rgba(21,26,25,.04), 0 4px 16px rgba(21,26,25,.05);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:13.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--teal-2); outline-offset:2px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#DCD7CC; border-radius:5px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--sage); }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* ============ SHELL ============ */
.app{ display:grid; grid-template-columns:var(--rail) 1fr; height:100vh; }

.rail{
  background:var(--teal);
  display:flex; flex-direction:column;
  height:100vh; overflow:hidden;
}
.brand{ padding:22px 20px 18px; }
.brand-mark{
  font-family:var(--f-head); font-weight:700; font-size:21px;
  letter-spacing:.16em; color:#fff; line-height:1; margin:0;
}
.brand-sub{
  font-size:8.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-top:8px;
}
.nav{ flex:1; overflow-y:auto; padding:4px 10px 16px; }
.nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-color:transparent; }
.nav-group{
  font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.34); padding:16px 10px 7px;
}
.nav-item{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; text-align:left; cursor:pointer;
  padding:8px 11px; border-radius:var(--r); color:rgba(255,255,255,.74);
  font-size:13px; font-weight:400; position:relative;
}
.nav-item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav-item.on{ background:rgba(255,255,255,.12); color:#fff; font-weight:500; }
.nav-item.on::before{
  content:""; position:absolute; left:-10px; top:7px; bottom:7px;
  width:2px; background:var(--sand); border-radius:0 2px 2px 0;
}
.nav-item .badge{
  margin-left:auto; background:var(--sand); color:var(--teal);
  font-family:var(--f-head); font-weight:600; font-size:10px;
  min-width:19px; text-align:center; padding:1px 6px; border-radius:9px;
}
.rail-foot{
  padding:12px 14px 16px; border-top:1px solid rgba(255,255,255,.1);
  font-size:10px; color:rgba(255,255,255,.4); display:flex;
  justify-content:space-between; align-items:center;
}
.dot{ width:6px; height:6px; border-radius:50%; display:inline-block; }
.dot.live{ background:#6FBF8E; }
.dot.off{ background:rgba(255,255,255,.28); }

/* ============ MAIN ============ */
.main{ display:flex; flex-direction:column; min-width:0; height:100vh; }

.topbar{
  display:flex; align-items:stretch; background:var(--surface);
  border-bottom:1px solid var(--line); flex-shrink:0;
}
.tb-cell{
  padding:11px 20px; border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; justify-content:center; min-width:0;
}
.tb-lab{
  font-family:var(--f-head); font-size:8px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:2px;
}
.tb-val{
  font-family:var(--f-head); font-weight:600; font-size:15px;
  font-variant-numeric:tabular-nums; line-height:1.2; white-space:nowrap;
}
.tb-grow{ flex:1; border-right:1px solid var(--line-soft); }
.tb-actions{ display:flex; align-items:center; gap:8px; padding:0 16px; }

.view{ flex:1; overflow-y:auto; padding:26px 30px 90px; }
.view-inner{ max-width:1420px; }
.view-head{ display:flex; align-items:flex-end; gap:18px; margin-bottom:22px; flex-wrap:wrap; }
.view-title{
  font-family:var(--f-head); font-weight:600; font-size:25px;
  letter-spacing:-.015em; margin:0; line-height:1.15;
}
.view-note{ color:var(--muted); font-size:12.5px; max-width:64ch; margin:5px 0 0; }
.spacer{ flex:1; }

/* ============ PRIMITIVES ============ */
.btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:7px 14px; border-radius:var(--r); font-size:12.5px; font-weight:500;
  white-space:nowrap; transition:border-color .12s, background .12s;
}
.btn:hover{ border-color:var(--teal-2); }
.btn-primary{ background:var(--teal); border-color:var(--teal); color:#fff; }
.btn-primary:hover{ background:#1A3636; border-color:#1A3636; }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--muted); }
.btn-ghost:hover{ background:var(--teal-tint); color:var(--teal); border-color:transparent; }
.btn-sm{ padding:4px 10px; font-size:11.5px; }
.btn-danger{ color:var(--risk); }
.btn-danger:hover{ border-color:var(--risk); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
}
.card-head{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line-soft);
}
.card-title{
  font-family:var(--f-head); font-weight:600; font-size:13.5px;
  letter-spacing:.01em; margin:0;
}
.card-body{ padding:18px; }
.card-body.flush{ padding:0; }

.grid{ display:grid; gap:16px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1180px){ .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px){ .g4,.g3,.g2{ grid-template-columns:1fr; } }

.eyebrow{
  font-family:var(--f-head); font-size:8.5px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.num{ font-variant-numeric:tabular-nums; }
.big{
  font-family:var(--f-head); font-weight:600; font-size:26px;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15;
}
.mid{ font-family:var(--f-head); font-weight:600; font-size:17px; font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted); }
.right{ text-align:right; }
.center{ text-align:center; }
.c-ok{ color:var(--ok); } .c-warn{ color:var(--warn); }
.c-risk{ color:var(--risk); } .c-teal{ color:var(--teal); }
.small{ font-size:11.5px; }
.nowrap{ white-space:nowrap; }
.stack{ display:flex; flex-direction:column; gap:16px; }
.row{ display:flex; align-items:center; gap:10px; }
.wrap{ flex-wrap:wrap; }

/* stat tile: the number first, the label under it, a hairline above */
.stat{ padding:16px 18px; }
.stat .eyebrow{ display:block; margin-bottom:9px; }
.stat .big{ display:block; }
.stat .sub{ font-size:11.5px; color:var(--muted); margin-top:5px; }
.stat.accent{ border-top:2px solid var(--teal); }

/* ============ TABLES ============ */
.tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
.tbl th{
  font-family:var(--f-head); font-size:8.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-align:left;
  padding:9px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td{ padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr.click{ cursor:pointer; }
.tbl tbody tr.click:hover td{ background:var(--sand-tint); }
.tbl td.num, .tbl th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.tbl td.mono{ font-variant-numeric:tabular-nums; }
.tbl .strong{ font-weight:600; }
.tbl-empty{ padding:34px 18px; text-align:center; color:var(--muted); font-size:12.5px; }

/* ============ TAGS ============ */
.tag{
  display:inline-block; font-family:var(--f-head); font-size:9.5px; font-weight:600;
  letter-spacing:.05em; padding:2.5px 8px; border-radius:3px;
  background:var(--teal-tint); color:var(--teal-2); white-space:nowrap;
}
.tag-ok{ background:#E6EEEA; color:#2C5B45; }
.tag-warn{ background:#FAF0E0; color:#8A5A1C; }
.tag-risk{ background:#F8E9E7; color:#8E3831; }
.tag-hold{ background:#EFEBF6; color:#5B4E80; }
.tag-teal{ background:var(--teal); color:#fff; }
.tag-sand{ background:var(--sand); color:#5A4B33; }
.tag-quiet{ background:var(--line-soft); color:var(--muted); }

/* ============ PROGRESS ============ */
.bar{ height:5px; background:var(--line-soft); border-radius:3px; overflow:hidden; }
.bar > i{ display:block; height:100%; background:var(--teal); border-radius:3px; }
.bar.thin{ height:3px; }
.bar-lab{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:5px; }

/* ============ FORMS ============ */
.field{ display:block; margin-bottom:14px; }
.field > label, .lab{
  display:block; font-family:var(--f-head); font-size:8.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.inp, select.inp, textarea.inp{
  width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:8px 11px; font-size:13px; color:var(--ink);
}
.inp:focus{ border-color:var(--teal-2); outline:none; }
textarea.inp{ resize:vertical; min-height:80px; line-height:1.6; }
.inp.num{ text-align:right; font-variant-numeric:tabular-nums; }
.check{ display:flex; align-items:center; gap:8px; font-size:12.5px; cursor:pointer; }
.check input{ width:15px; height:15px; accent-color:var(--teal); }
.hint{ font-size:11px; color:var(--muted); margin-top:5px; }

/* ============ MODAL ============ */
.scrim{
  position:fixed; inset:0; background:rgba(21,26,25,.4); z-index:200;
  display:flex; align-items:flex-start; justify-content:center;
  padding:5vh 24px; overflow-y:auto; backdrop-filter:blur(2px);
}
.modal{
  background:var(--bg); border-radius:8px; width:100%; max-width:620px;
  box-shadow:0 16px 48px rgba(21,26,25,.22); display:flex; flex-direction:column;
  max-height:90vh;
}
.modal.wide{ max-width:1080px; }
.modal.xwide{ max-width:1320px; }
.modal-head{
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  border-bottom:1px solid var(--line); background:var(--surface);
  border-radius:8px 8px 0 0; flex-shrink:0;
}
.modal-head h3{ font-family:var(--f-head); font-weight:600; font-size:15px; margin:0; flex:1; }
.modal-body{ padding:20px; overflow-y:auto; flex:1; }
.modal-foot{
  display:flex; gap:9px; justify-content:flex-end; padding:14px 20px;
  border-top:1px solid var(--line); background:var(--surface);
  border-radius:0 0 8px 8px; flex-shrink:0;
}
.x{ background:none; border:0; cursor:pointer; color:var(--muted); font-size:17px; line-height:1; padding:4px; }
.x:hover{ color:var(--ink); }

/* ============ TABS ============ */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.tab{
  background:none; border:0; cursor:pointer; padding:9px 15px;
  font-size:12.5px; color:var(--muted); border-bottom:2px solid transparent;
  margin-bottom:-1px; font-weight:500;
}
.tab:hover{ color:var(--ink); }
.tab.on{ color:var(--teal); border-bottom-color:var(--teal); font-family:var(--f-head); font-weight:600; }

/* ============ PIPELINE BOARD ============ */
.board{ display:grid; grid-template-columns:repeat(5,minmax(190px,1fr)); gap:12px; }
.col{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); min-height:190px; }
.col-head{ padding:11px 13px; border-bottom:1px solid var(--line-soft); }
.col-head .eyebrow{ display:block; }
.col-head .n{ font-family:var(--f-head); font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; margin-top:3px; }
.col-body{ padding:9px; display:flex; flex-direction:column; gap:8px; min-height:70px; }
.col.drop{ border-color:var(--teal-2); background:var(--teal-tint); }
.lead-card{
  background:var(--bg); border:1px solid var(--line); border-radius:4px;
  padding:10px 11px; cursor:grab; font-size:12px;
}
.lead-card:hover{ border-color:var(--teal-2); }
.lead-card .t{ font-weight:600; margin-bottom:3px; line-height:1.35; }
.lead-card .m{ color:var(--muted); font-size:11px; display:flex; justify-content:space-between; gap:8px; }

/* ============ DELIVERY TRACKER ============
   A phase grid, not a Gantt: what matters is which of nine steps each
   sheet is on, and whether anything is stuck. */
.tracker{ width:100%; border-collapse:separate; border-spacing:0; font-size:12px; }
.tracker th{
  font-family:var(--f-head); font-size:8px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); padding:0 4px 9px;
  text-align:center; vertical-align:bottom;
}
.tracker th.sheet-col{ text-align:left; padding-left:14px; width:auto; min-width:190px; }
.tracker th.rot{ width:38px; }
.tracker th.rot span{ display:block; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; height:104px; }
.tracker td{ padding:5px 4px; border-bottom:1px solid var(--line-soft); text-align:center; }
.tracker td.sheet-col{ text-align:left; padding-left:14px; }
.tracker tbody tr:hover td{ background:var(--sand-tint); }
.tracker tr.out td{ opacity:.42; }
.ph{
  width:26px; height:26px; border-radius:4px; border:1px solid var(--line);
  background:var(--surface); cursor:pointer; padding:0; position:relative;
}
.ph:hover{ border-color:var(--teal-2); }
.ph.done{ background:var(--teal); border-color:var(--teal); }
.ph.done::after{
  content:""; position:absolute; left:8px; top:5px; width:6px; height:11px;
  border:solid #fff; border-width:0 1.8px 1.8px 0; transform:rotate(42deg);
}
.ph.wip{ background:var(--sand); border-color:#C6B79F; }
.ph.wip::after{ content:""; position:absolute; inset:8px; background:#7A6647; border-radius:50%; }
.ph.blocked{ background:#F8E9E7; border-color:#D9A9A3; }
.ph.blocked::after{ content:"!"; position:absolute; inset:0; color:#8E3831; font-weight:700; font-size:13px; line-height:24px; }
.ph.na{ background:repeating-linear-gradient(45deg,var(--line-soft),var(--line-soft) 3px,transparent 3px,transparent 6px); }
.sheet-name{ font-weight:500; }
.sheet-meta{ font-size:10.5px; color:var(--muted); margin-top:1px; }

/* phase funnel: where the work actually is */
.funnel{ display:flex; gap:3px; align-items:flex-end; height:78px; }
.funnel-col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; }
.funnel-seg{ border-radius:2px 2px 0 0; }
.funnel-lab{ font-size:8.5px; color:var(--muted); text-align:center; margin-top:6px; line-height:1.25; height:26px; overflow:hidden; }

/* ============ MISC ============ */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--teal); color:#fff; padding:11px 20px; border-radius:var(--r);
  font-size:12.5px; z-index:400; box-shadow:0 8px 24px rgba(21,26,25,.24);
  animation:rise .2s ease-out;
}
.toast.bad{ background:var(--risk); }
@keyframes rise{ from{ opacity:0; transform:translate(-50%,10px); } }

.empty{
  padding:44px 22px; text-align:center; color:var(--muted);
  border:1px dashed var(--line); border-radius:var(--r); background:var(--surface);
}
.empty h4{ font-family:var(--f-head); font-weight:600; font-size:14px; color:var(--ink); margin:0 0 6px; }
.empty p{ margin:0 0 14px; font-size:12.5px; max-width:44ch; margin-inline:auto; }

.note{
  background:var(--sand-tint); border-left:3px solid var(--sand);
  padding:12px 15px; border-radius:0 var(--r) var(--r) 0; font-size:12.5px;
}
.note.teal{ background:var(--teal-tint); border-left-color:var(--teal-2); }
.note .lab{ margin-bottom:4px; }

.kv{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px; }
.kv:last-child{ border-bottom:0; }
.kv > span:first-child{ color:var(--muted); }
.kv > span:last-child{ font-weight:500; font-variant-numeric:tabular-nums; text-align:right; }
.kv.total{ border-top:1.5px solid var(--teal); border-bottom:0; margin-top:5px; padding-top:10px; font-family:var(--f-head); font-weight:600; font-size:14px; color:var(--teal); }

.link{ color:var(--teal-2); cursor:pointer; text-decoration:none; border-bottom:1px solid transparent; }
.link:hover{ border-bottom-color:var(--teal-2); }

.editor-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.editor-grid.thirds{ grid-template-columns:2fr 1fr; }
@media (max-width:900px){ .editor-grid, .editor-grid.thirds{ grid-template-columns:1fr; } }

.row-tbl{ width:100%; border-collapse:collapse; font-size:12px; }
.row-tbl th{
  font-family:var(--f-head); font-size:8px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); text-align:left; padding:0 6px 6px;
}
.row-tbl td{ padding:3px 4px; vertical-align:top; }
.row-tbl .inp{ padding:6px 8px; font-size:12px; }
.icon-btn{
  background:none; border:0; cursor:pointer; color:var(--muted);
  padding:5px 7px; border-radius:4px; font-size:13px; line-height:1;
}
.icon-btn:hover{ background:var(--line-soft); color:var(--risk); }

.doc-frame{ width:100%; height:74vh; border:1px solid var(--line); border-radius:var(--r); background:#fff; }

.spinner{
  width:15px; height:15px; border:2px solid var(--line);
  border-top-color:var(--teal); border-radius:50%;
  animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.drop-zone{
  border:1.5px dashed var(--line); border-radius:var(--r); padding:26px;
  text-align:center; color:var(--muted); cursor:pointer; background:var(--surface);
}
.drop-zone:hover, .drop-zone.over{ border-color:var(--teal-2); background:var(--teal-tint); color:var(--teal); }

/* ---------- template editor ---------- */
/* The prose on the left, what it asks for on the right. Side by side because
   the two are written together: you add a blank to a sentence and want to see
   it become a field without leaving the sentence. */
.tpl-split{ display:grid; grid-template-columns:minmax(0,1fr) 288px; gap:18px; align-items:start; }
.tpl-side{
  border-left:1px solid var(--line); padding-left:16px;
  max-height:520px; overflow-y:auto; position:sticky; top:0;
}
.tpl-preview{
  min-height:420px; border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; background:var(--surface); overflow-y:auto; max-height:520px;
}
.tpl-preview h2{ font-family:var(--f-head); font-size:15px; color:var(--teal); margin:18px 0 8px; }
.tpl-preview h3{ font-family:var(--f-head); font-size:13px; margin:14px 0 6px; }
.tpl-preview p, .tpl-preview li{ font-size:12.8px; line-height:1.65; }
.tpl-preview ul{ padding-left:18px; margin:6px 0; }
.tpl-preview .tok{
  background:var(--teal-tint); color:var(--teal); border-radius:3px;
  padding:1px 5px; font-size:11.5px; font-weight:600; white-space:nowrap;
}

.token-chip{
  display:inline-flex; align-items:center; gap:5px; margin:0 5px 5px 0;
  background:var(--teal-tint); border:1px solid transparent; color:var(--teal);
  border-radius:4px; padding:4px 8px; font-size:11.5px; font-weight:600;
  cursor:pointer; font-family:var(--f-body);
}
.token-chip:hover{ border-color:var(--teal-2); }
.token-chip .token-kind{
  font-weight:500; font-size:10px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.05em;
}
.var-card{
  border:1px solid var(--line); border-radius:var(--r);
  padding:11px 12px; margin-bottom:9px; background:var(--sand-tint);
}
.var-card .var-token{
  background:var(--surface); border:1px solid var(--line);
  border-radius:3px; padding:2px 6px; font-size:11.5px; color:var(--teal);
}

/* The blanks a quote is still missing, shown before it is sent. */
.fill-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }

@media (max-width:1180px){
  .tpl-split{ grid-template-columns:minmax(0,1fr); }
  .tpl-side{ border-left:0; border-top:1px solid var(--line); padding:16px 0 0; position:static; max-height:none; }
}

/* ============ TIME LEDGER ============
   The stopwatch is a face, not a form: one large tabular figure, one button.
   Everything else on the page is ordinary cards and tables. */
.sw-wrap{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:22px; align-items:start; }
.sw-face{
  border:1px solid var(--line); border-radius:var(--r); padding:16px; text-align:center;
  background:linear-gradient(180deg,var(--surface),var(--sand-tint));
}
.sw-time{
  font-family:var(--f-head); font-weight:600; font-size:31px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--teal); line-height:1.1;
}
.sw-state{ font-size:11.5px; color:var(--muted); margin:4px 0 12px; min-height:16px; }
.sw-tick{ height:1px; background:var(--line); position:relative; margin:12px 0 12px; }
.sw-tick:before, .sw-tick:after{ content:""; position:absolute; top:-3px; width:1px; height:7px; background:var(--sage); }
.sw-tick:before{ left:0; } .sw-tick:after{ right:0; }
.sw-face .btn{ width:100%; justify-content:center; }
@media (max-width:900px){ .sw-wrap{ grid-template-columns:1fr; } }

/* running clock in the top bar — visible from every screen */
.livechip{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  border:1px solid var(--teal); border-radius:999px; padding:4px 12px 4px 10px;
  background:var(--surface); color:var(--ink); font-size:12px; margin-right:6px;
}
.livechip[hidden]{ display:none; }
.livechip .pulse{ width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.livechip b{ font-family:var(--f-head); font-weight:600; font-variant-numeric:tabular-nums; }
.livechip span{ color:var(--muted); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* the nudge */
.remind{
  display:flex; align-items:center; gap:12px; border:1px solid var(--teal-2);
  border-left:3px solid var(--teal); background:var(--teal-tint); border-radius:var(--r);
  padding:11px 14px; margin-bottom:16px; font-size:12.5px;
}
.remind[hidden]{ display:none; }
.remind p{ margin:0; flex:1; }

/* date presets */
.pill{
  border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:4px 12px; font-size:12px; color:var(--muted); cursor:pointer;
}
.pill:hover{ border-color:var(--teal-2); color:var(--teal); }
.pill.on{ border-color:var(--teal); color:var(--teal); background:var(--teal-tint); font-weight:500; }

/* job / bucket tag on an entry row */
.jobtag{
  display:inline-block; font-family:var(--f-head); font-size:10.5px; font-weight:600;
  padding:1.5px 7px; border-radius:3px; background:var(--teal-tint); color:var(--teal);
  border:1px solid #DCE3E1; white-space:nowrap;
}
.jobtag.int{ background:var(--sand-tint); color:#7A6446; border-color:#E6DCCB; }
.jobtag.none{ background:#F8E9E7; color:#8E3831; border-color:#E8CBC7; }

/* horizontal bar rows (day by day, budget) */
.barrow{ display:grid; grid-template-columns:150px minmax(0,1fr) 70px; gap:10px; align-items:center; margin-bottom:7px; font-size:12.5px; }
.barrow .lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.barrow .track{ height:12px; background:var(--line-soft); border-radius:2px; overflow:hidden; }
.barrow .fill{ display:block; height:100%; background:var(--teal-2); border-radius:2px; }
.barrow .fill.over{ background:var(--risk); }
.barrow .v{ text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; }

/* donut + legend: the share of the fortnight, drawn */
.donut-row{ display:flex; align-items:center; gap:18px; }
.donut-row svg{ flex:0 0 auto; }
.legend{ flex:1; min-width:0; font-size:12.5px; }
.legend .lg{ display:grid; grid-template-columns:10px minmax(0,1fr) 62px 44px; gap:9px; align-items:center; padding:5px 0; border-bottom:1px solid var(--line-soft); }
.legend .lg:last-child{ border-bottom:0; }
.legend .sw{ width:10px; height:10px; border-radius:2px; }
.legend .lbl{ line-height:1.3; overflow-wrap:anywhere; }
.legend .h{ text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.legend .p{ text-align:right; font-family:var(--f-head); font-weight:600; color:var(--teal); font-variant-numeric:tabular-nums; }

/* a work-area chip with its remove control */
.areachip{
  display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line);
  border-radius:999px; padding:2px 5px 2px 10px; font-size:12px; margin:0 6px 6px 0; background:var(--surface);
}
.areachip button{ border:0; background:none; cursor:pointer; color:var(--muted); padding:0 3px; font-size:13px; line-height:1; }
.areachip button:hover{ color:var(--risk); }

/* a line the AI sorted, waiting to be checked */
.draft{
  display:grid; grid-template-columns:minmax(0,1fr) 80px auto; gap:12px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--line-soft);
}
.draft:last-child{ border-bottom:0; }
.draft .meta{ font-size:11.5px; color:var(--muted); margin-top:3px; }
.draft .hrs{ text-align:right; font-family:var(--f-head); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- desks: the template editor ----------
   Your words as text; fields and AI paragraphs as chips the app fills. */
.tpl-ed{ min-height:180px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  font-size:13px; line-height:1.65; white-space:pre-wrap; outline:none; }
.tpl-ed:focus{ border-color:var(--teal-2); box-shadow:0 0 0 3px var(--teal-tint); }
.tpl-ed.one-line{ min-height:0; white-space:nowrap; overflow-x:auto; }
.tpl-ed:empty::before{ content:attr(data-placeholder); color:var(--muted); }
.chip-f{ display:inline-block; padding:0 7px; margin:0 1px; border-radius:5px; background:var(--teal-tint);
  color:var(--teal); font-size:12px; font-weight:500; line-height:1.7; user-select:all; }
.chip-ai{ display:block; margin:4px 0; padding:8px 10px; border:1px dashed var(--teal-2); border-radius:7px;
  background:#FBFAF6; color:var(--teal); font-size:12.5px; cursor:pointer; white-space:normal; }
.chip-ai::before{ content:'✦ AI paragraph — '; font-weight:600; }
.slash-menu{ position:fixed; z-index:400; width:300px; max-height:320px; overflow-y:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:9px; box-shadow:0 10px 30px rgba(21,26,25,.14); padding:6px; }
.slash-menu input{ width:100%; margin-bottom:6px; }
.slash-menu .grp{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:6px 8px 3px; }
.slash-menu button{ display:flex; justify-content:space-between; gap:10px; width:100%; text-align:left; padding:6px 8px;
  border:0; background:none; border-radius:6px; font-size:12.5px; cursor:pointer; color:var(--ink); }
.slash-menu button:hover, .slash-menu button.on{ background:var(--teal-tint); }
.slash-menu button span{ color:var(--muted); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-body{ min-height:220px; padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  font-family:Arial,Helvetica,sans-serif; font-size:14px; line-height:1.5; outline:none; }
.mail-body:focus{ border-color:var(--teal-2); }
.mail-sig{ padding:10px 16px; border:1px dashed var(--line); border-top:0; border-radius:0 0 8px 8px; font-family:Arial,Helvetica,sans-serif;
  font-size:13px; color:#444; background:#FCFBF8; }
.desk-row{ display:flex; gap:14px; align-items:flex-start; padding:12px 16px; border-bottom:1px solid var(--line-soft); cursor:pointer; }
.desk-row:hover{ background:#FCFBF8; }
.desk-row:last-child{ border-bottom:0; }

/* ============ WORK STAGES ============
   A stage's code in a circle: outlined while it is open, filled teal with
   white figures and a tick beside it once it is Done. */
.stage-mark{ display:inline-flex; align-items:center; gap:5px; }
.stage-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 5px; border-radius:999px;
  border:1.5px solid var(--teal); color:var(--teal); background:var(--surface);
  font-family:var(--f-head); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
  cursor:pointer; user-select:none;
}
.stage-badge:hover{ background:var(--teal-tint); }
.stage-badge.done{ background:var(--teal); color:#fff; }
.stage-badge.done:hover{ background:var(--teal-2, var(--teal)); }
.stage-tick{ color:var(--teal); font-size:17px; font-weight:800; width:14px; line-height:1; }
.stage-id{
  display:inline-block; margin-left:10px; padding:3px 9px; border-radius:3px;
  background:var(--teal-tint); color:var(--teal); font-family:var(--f-head);
  font-size:11.5px; font-weight:600; letter-spacing:.01em; vertical-align:middle;
}
.phase-head{
  display:flex; align-items:center; gap:10px; padding:14px 18px 6px;
  border-top:1px solid var(--line-soft);
}
.phase-head:first-child{ border-top:0; }
.phase-head .phase-no{ font-family:var(--f-head); font-size:10px; font-weight:700; letter-spacing:.08em;
  color:var(--muted); text-transform:uppercase; }
.phase-head .phase-name{ font-family:var(--f-head); font-weight:700; font-size:13.5px; cursor:text; }
/* Work areas side by side: the list on the left, the picked area on the
   right, each scrolling on its own. fitWork() sets the height; below 900 px
   the list folds into a dropdown above the stages. */
.wk-split{ display:grid; grid-template-columns:290px minmax(0,1fr); gap:16px; min-height:420px; }
.wk-list, .wk-detail{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.wk-list > .card-head{ flex-shrink:0; }
.wk-list-body{ flex:1; overflow-y:auto; padding:6px; }
.wk-detail{ overflow-y:auto; display:block; }
.wk-detail-head{ position:sticky; top:0; z-index:2; background:var(--surface); flex-wrap:wrap; }
.wk-pick{ display:none; }
.wk-item{ padding:10px 12px; border-radius:6px; cursor:pointer; border:1px solid transparent; margin-bottom:2px; }
.wk-item:hover{ background:#FCFBF8; border-color:var(--line-soft); }
.wk-item.on{ background:var(--teal-tint); border-color:var(--teal); }
.wk-item-name{ font-family:var(--f-head); font-weight:600; font-size:13px; line-height:1.3; }
.wk-item.on .wk-item-name{ color:var(--teal); }
.wk-item-where{ font-size:11.5px; color:var(--teal); margin-top:3px; }
.wk-item-meta{ display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--muted);
  margin-top:5px; font-variant-numeric:tabular-nums; }
.wk-item .bar{ margin-top:6px; }
@media (max-width:900px){
  .wk-split{ display:block; height:auto!important; }
  .wk-list{ display:none; }
  .wk-pick{ display:flex; gap:8px; margin-bottom:12px; }
  .wk-pick .inp{ flex:1; }
  .wk-detail{ overflow:visible; }
}
.stage-row td{ vertical-align:top; }
.stage-row .stage-text{ font-size:12px; color:var(--muted); margin-top:3px; max-width:620px; }