/* Deliberately plain. A demo wearing a logo looks like a mock-up; a demo that
   looks like a tool looks like a tool. Built mobile-first — she will open it on
   a phone in front of two people. */
:root{
  --ink:#16202b; --ink-2:#5a6672; --ink-3:#8a949e; --line:#e2e6ea; --bg:#f6f7f9; --card:#fff;
  --accent:#1f6f5c; --accent-soft:#e8f2ef; --warn:#b4451f; --ok:#1f7a45;
  --radius:5px;   /* superseded by --r-2 in shell.css; kept so the
                     sign-in page, which sits outside the shell, matches */
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:inherit;text-decoration:none}
.muted{color:var(--ink-2)}
.wrap{max-width:760px;margin:0 auto;padding:18px 16px 64px}

/* ---- top bar ---- */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5
}
.bar strong{font-size:15px;letter-spacing:.01em}
.back{font-size:14px;color:var(--accent);font-weight:600}
.who{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.role{
  background:var(--accent-soft);color:var(--accent);border-radius:99px;
  padding:2px 9px;font-size:11px;font-weight:700;text-transform:capitalize;letter-spacing:.02em
}
.linkbtn{
  border:none;background:none;color:var(--accent);font:inherit;font-size:13px;
  font-weight:600;cursor:pointer;padding:0
}

h1{font-size:22px;margin:14px 0 4px;letter-spacing:-.01em}
h2{font-size:15px;margin:26px 0 8px;letter-spacing:.01em}

/* ---- job list ---- */
.list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.card{
  display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 14px;transition:border-color .12s
}
.card:hover{border-color:#c7d0d8}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cust{font-weight:650;font-size:16px}
.card-mid{font-size:14px;color:var(--ink-2);margin-top:3px}
.card-bot{
  display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;
  font-size:12.5px;color:var(--ink-2)
}
.stage{
  font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 9px;
  background:#eef1f4;color:var(--ink-2);white-space:nowrap
}
.s-new-lead{background:#eaf0fb;color:#2a5599}
.s-consultation-booked{background:#fdf3e3;color:#8a5a12}
.s-consultation-sat{background:#fdf3e3;color:#8a5a12}
.s-sold{background:var(--accent-soft);color:var(--accent)}
.s-not-sold{background:#f2eef0;color:#7c6069}
.s-install-scheduled{background:#e9f1f8;color:#255f8a}
.s-installed{background:var(--accent-soft);color:var(--accent)}

/* ---- job detail ---- */
.ref{color:var(--ink-2);font-size:14px;margin:2px 0 18px}
.detail{
  display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px
}
.detail dt{color:var(--ink-2);font-size:13.5px}
.detail dd{margin:0;font-size:14.5px}

.assign{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px;margin-top:18px
}
.assign form{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
select,input{
  font:inherit;padding:10px 11px;border:1px solid #cfd6dc;border-radius:5px;
  background:#fff;color:inherit;min-width:0
}
select{flex:1 1 180px}
button[type=submit]{
  font:inherit;font-weight:650;padding:10px 18px;border:none;border-radius:5px;
  background:var(--accent);color:#fff;cursor:pointer
}
button[type=submit]:hover{background:#1a5e4e}

.history ul{list-style:none;padding:0;margin:8px 0 0}
.history li{
  font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink)
}
.history li:last-child{border-bottom:none}
.when{color:var(--ink-2);font-variant-numeric:tabular-nums;margin-right:8px;font-size:12.5px}

.empty{
  background:var(--card);border:1px dashed #cfd6dc;border-radius:var(--radius);
  padding:28px 20px;text-align:center;color:var(--ink-2)
}
.empty.notfound{text-align:left;padding:26px 22px}
.empty.notfound h1{margin-top:0;color:var(--ink)}

.result{font-size:14px;font-weight:600;margin:10px 0 0;min-height:1.2em}
.result.ok{color:var(--ok)}
.result.err{color:var(--warn)}

/* ---- login ---- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:20px}
.login{
  background:var(--card);border:1px solid var(--line);border-radius:5px;
  padding:28px 26px;width:100%;max-width:390px
}
.login h1{margin:0;font-size:21px}
.login .sub{margin:2px 0 20px;color:var(--ink-2);font-size:13.5px}
.login label{display:block;font-size:13px;font-weight:650;margin:12px 0 5px}
.login input{width:100%}
.login button{width:100%;margin-top:18px}
.logins{margin-top:22px;font-size:13px;color:var(--ink-2)}
.logins summary{cursor:pointer;font-weight:650;color:var(--accent)}
.logins table{margin-top:8px;border-collapse:collapse;width:100%}
.logins td{padding:3px 0;font-size:13px}
.logins td:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;width:38%}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eef1f4;padding:1px 5px;border-radius:3px}
.fine{margin-top:20px;font-size:11.5px;color:var(--ink-2);line-height:1.45}

@media (min-width:640px){ .wrap{padding-top:24px} h1{font-size:26px} }

/* ---- stage filter chips ---- */
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);font-size:13.5px;font-weight:600;
  color:var(--ink-2);white-space:nowrap
}
.chip:hover{border-color:#c7d0d8}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .n{font-size:12px;font-weight:600;opacity:.65;font-variant-numeric:tabular-nums}
.chip.on .n{opacity:.85}

/* ---- stage control + notes on the job page ---- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px;margin-top:16px}
.panel h2{margin:0 0 4px;font-size:15px}
.panel .hint{margin:0 0 12px;font-size:12.5px;color:var(--ink-2)}
.stage-row{display:flex;gap:8px;flex-wrap:wrap}
.stage-btn{
  padding:9px 14px;border-radius:5px;border:1px solid var(--line);background:#fff;
  font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer
}
.stage-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.stage-btn.now{background:var(--accent);border-color:var(--accent);color:#fff;cursor:default}
.stage-btn:disabled{opacity:.5;cursor:default}
.note-form{display:flex;flex-direction:column;gap:8px}
.note-form textarea{
  font:inherit;font-size:14.5px;padding:10px 12px;border:1px solid #d5d8dc;border-radius:5px;
  min-height:70px;resize:vertical;width:100%;box-sizing:border-box
}
.note-form button{align-self:flex-start}
.notes{list-style:none;padding:0;margin:12px 0 0}
.notes li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5}
.notes li:last-child{border-bottom:none}
.notes .meta{display:block;font-size:12px;color:var(--ink-2);margin-top:4px}

/* ---- evidence / compliance checklist ---- */
.ev-count{font-size:11.5px;font-weight:700;border-radius:99px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.ev-count.ok{background:var(--accent-soft);color:var(--accent)}
.ev-count.bad{background:#fdeeea;color:var(--warn)}
.evidence{list-style:none;padding:0;margin:10px 0 0}
.evidence li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.evidence li:last-child{border-bottom:none}
.evidence .tick{width:18px;text-align:center;font-weight:700}
.evidence li.has .tick{color:var(--ok)}
.evidence li.needs .tick{color:var(--warn)}
.evidence li.needs .lab{font-weight:600}
.evidence .lab{flex:1}
.evidence .scheme{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--ink-2);background:#eef1f4;border-radius:5px;padding:2px 7px}

.tracklink a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--accent);
  background:var(--accent-soft);border-radius:5px;padding:7px 11px;display:inline-block;word-break:break-all}

/* ---- customer-facing tracking page ---- */
.track-body{background:#fff}
.track-wrap{max-width:520px;margin:0 auto;padding:38px 22px 70px}
.track-brand{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.track-wrap h1{font-size:25px;line-height:1.25;margin:0 0 6px;letter-spacing:-.015em}
.track-sub{color:var(--ink-2);font-size:13.5px;margin:0 0 28px}
.track-wrap .lead{font-size:16.5px;line-height:1.55;color:var(--ink-2)}
ol.track{list-style:none;padding:0;margin:0}
ol.track li{display:flex;gap:14px;padding:0 0 22px;position:relative}
ol.track li:not(:last-child)::before{content:"";position:absolute;left:8px;top:20px;bottom:0;width:2px;background:var(--line)}
ol.track li.done::before,ol.track li.now::before{background:var(--accent)}
ol.track .dot{width:18px;height:18px;border-radius:99px;border:2px solid var(--line);background:#fff;flex:none;margin-top:2px;z-index:1}
ol.track li.done .dot{background:var(--accent);border-color:var(--accent)}
ol.track li.now .dot{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
ol.track .lab{font-size:16.5px;font-weight:600;display:block}
ol.track li.todo .lab{color:var(--ink-2);font-weight:500}
ol.track .blurb{display:block;font-size:14.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.track-wrap .foot{margin-top:14px;font-size:13.5px;color:var(--ink-2);line-height:1.55}

/* ---- tabs + calendar ---- */
.tabs{display:flex;gap:4px;margin-top:6px;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
/* Six tabs do not fit a phone. On a wide screen the strip scrolls inside itself
   rather than pushing the page sideways — a page that scrolls horizontally reads
   as broken. On a phone it wraps instead: a scroller with no visible affordance
   is a tab nobody finds, and this is a screen somebody is being shown. */
.tab{padding:9px 14px;font-size:14px;font-weight:600;color:var(--ink-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;flex:none}
@media (max-width:640px){
  .tabs{flex-wrap:wrap;overflow-x:visible;border-bottom:0;gap:2px 0;margin-bottom:4px}
  .tab{padding:8px 12px 8px 0;margin-bottom:0;border-bottom:0}
  .tab.on{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.cal-day{margin-bottom:18px}
.cal-date{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.cal-row{display:flex;align-items:center;gap:12px;margin-bottom:7px}
.cal-time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;font-weight:600;color:var(--accent);flex:none;width:44px}
.cal-main{flex:1;min-width:0}
.cal-main .cust{display:block;font-size:15.5px}
.s-consult{background:#fdf3e3;color:#8a5a12}
.s-install{background:#e9f1f8;color:#255f8a}

/* ---- handover page ---- */
.people{list-style:none;padding:0;margin:0}
.people li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.people li:last-child{border-bottom:none}
.pn{flex:1;font-size:15px;font-weight:600}
.pu{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:400;color:var(--ink-2);margin-top:1px}
.people select{flex:0 1 190px;font-size:14px;padding:8px 10px}
.fieldgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:7px;margin-top:10px}
.fchk{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:5px;font-size:14px;cursor:pointer}
.fchk.locked{opacity:.55;cursor:default;background:var(--bg)}
.fchk input{margin:0}

/* ---- one thread ---- */
.thread{list-style:none;padding:0;margin:14px 0 0}
.thread li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.thread li:last-child{border-bottom:none}
.t-ico{flex:none;width:22px;height:22px;border-radius:99px;background:var(--bg);display:flex;
  align-items:center;justify-content:center;font-size:12px;color:var(--ink-2);margin-top:1px}
.thread li.t-note .t-ico{background:var(--accent-soft);color:var(--accent)}
.thread li.t-stage .t-ico{background:#e9f1f8;color:#255f8a}
.t-text{display:block;font-size:14.5px;line-height:1.5}
.thread .meta{display:block;font-size:12px;color:var(--ink-2);margin-top:3px}
.s-approved{background:var(--accent-soft);color:var(--accent)}
.s-returned{background:#e9f1f8;color:#255f8a}
.s-requested{background:#fdf3e3;color:#8a5a12}

/* ---- oversight tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
/* Three across, even on a phone. Two-and-an-orphan reads as a layout accident,
   and these three numbers are a single sentence — they belong on one line. */
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:13px 12px;min-width:0}
.tile.ok{border-color:#bfe0d3}.tile.bad{border-color:#f0cfc4}
.tn{display:block;font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1}
.tile.ok .tn{color:var(--accent)}.tile.bad .tn{color:var(--warn)}
.tl{display:block;font-size:11.5px;color:var(--ink-2);margin-top:5px;line-height:1.3}

/* ---- eligibility check ---- */
.narrow{max-width:560px}
.step{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 6px}
.q{font-size:21px;line-height:1.3;margin:0 0 6px;letter-spacing:-.01em}
.choices{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.choice{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px;font:inherit;font-size:16px;color:var(--ink);cursor:pointer}
.choice:hover,.choice:focus-visible{border-color:var(--accent);outline:none}
.choice:active{transform:translateY(1px)}
.linkish{background:none;border:0;color:var(--ink-3);font:inherit;font-size:13px;
  text-decoration:underline;cursor:pointer;padding:14px 0}
.verdict{border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px;margin-top:16px;background:var(--card)}
.verdict.yes{border-color:#bfe0d3;background:#f2faf6}
.verdict.no{border-color:var(--line)}
.v-route{display:block;font-size:23px;font-weight:700;letter-spacing:-.02em}
.verdict.yes .v-route{color:var(--accent)}
.v-blurb{display:block;font-size:14px;color:var(--ink-2);margin-top:5px;line-height:1.45}
.v-prov{display:block;font-size:12.5px;color:var(--warn);margin-top:9px}
.reasons{margin:4px 0 0;padding-left:18px}
.reasons li{font-size:14px;line-height:1.5;color:var(--ink-2);margin:7px 0}
/* Emphasis by weight and ground, not a ribbon down the side. */
.unlock{font-size:14px;line-height:1.55;margin:12px 0 0;padding:11px 13px;
  background:#eef3f1;border:1px solid #d6e2dd;border-radius:5px;font-weight:500}
form label{display:block;font-size:12.5px;color:var(--ink-2);margin:12px 0 0}
form input,form select{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:11px 12px;
  font:inherit;font-size:16px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink)}
form input:focus,form select:focus{outline:none;border-color:var(--accent)}
/* The primary action is ink, not brand green. On a board where colour means
   status, a green button competes with "Sold" for the same attention. */
button.primary{margin-top:16px;width:100%;padding:13px;font:inherit;font-size:15.5px;font-weight:600;
  border:0;border-radius:3px;background:var(--ink);color:#fff;cursor:pointer;
  transition:background .12s}
button.primary:hover{background:#0a1219}
button.primary:active{background:#000}
button.primary:disabled{opacity:.6}
.err{color:var(--warn);font-size:13.5px;margin:12px 0 0}

/* ---- who to ring next ---- */
.count{display:inline-block;margin-left:7px;font-size:12.5px;font-weight:600;color:var(--ink-2);
  background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:1px 8px;vertical-align:middle}
.reason{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.also{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}

/* ---- more than one company ---- */
.entities{margin-bottom:2px}
.chip.alt{background:#fff;border-style:dashed}
.chip.alt.on{background:#eef1f3;border-color:var(--ink-2);border-style:solid;color:var(--ink)}
.card-bot .ent{color:var(--accent);font-weight:600}
.ent-line{font-size:12.5px;color:var(--accent);font-weight:600;margin:0 0 2px}

/* ---- who has been reading what ---- */
.watch-p.look .ev-count{background:#fbe9e2;color:var(--warn)}
.watch-p.note .ev-count{background:#fbf1dc;color:#8a6a1a}
.watch-p .role{margin-left:7px}
.wstat{margin:9px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.signals{list-style:none;margin:12px 0 0;padding:0}
.signals li{padding:9px 0;border-top:1px solid var(--line)}
.slab{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.sdet{display:block;font-size:13px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.caveat-note{margin:22px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.55;font-style:italic}

/* ---- what is waiting ---- */
/* The badge already says how bad it is. A coloured stripe repeating it is the
   single most reliable tell of a generated interface. */
.card.wait-unowned .ev-count{background:#f6ded4;color:#8f3516}
.card.wait-bad .ev-count{background:#f9e7db;color:#96501f}
.card.wait-late .ev-count{background:#fbf1dc;color:#7d6115}

/* ---- ready to install? ---- */
.panel.readiness h2{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel.readiness.blocked{border-color:#f0cfc4}
.panel.readiness.ok{border-color:#bfe0d3}
.evidence li.blocks .tick{color:var(--warn);font-weight:700}
.evidence li.blocks .lab{color:var(--ink)}
.evidence .lab .sdet{display:block;font-size:12.5px;font-weight:400;color:var(--ink-2);margin-top:3px;line-height:1.45}
.evidence li.clash .tick{color:#b8860b;font-weight:700}

/* ---- audit pack ---- */
.range{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:16px}
.range label{margin:0;flex:1 1 130px}
.range button.primary{margin-top:0;width:auto;flex:0 0 auto;padding:11px 18px}
.quote-row.warn .ev-count{background:#fbe9e2;color:var(--warn)}
.quote-row .detail{margin-top:10px}
@media print{
  .no-print,.bar{display:none!important}
  body{background:#fff}
  .panel{break-inside:avoid;page-break-inside:avoid;box-shadow:none}
  .wrap{max-width:none;padding:0}
}

/* A status on a card, when the board's solid block would be too heavy. */
.stage.chip-stat{color:#fff;background:var(--st-grey)}
.card .stage.st-new-lead{background:var(--st-blue)}
.card .stage.st-consultation-booked{background:var(--st-amber)}
.card .stage.st-consultation-sat{background:#e79b34}
.card .stage.st-sold{background:var(--st-green)}
.card .stage.st-not-sold{background:var(--st-red)}
.card .stage.st-install-scheduled{background:var(--st-purple)}
.card .stage.st-installed{background:var(--st-dark)}