/* Hoskins Carpet Gallery — job board.
   Harvey's restraint, pushed modern: warm near-white paper, hairlines instead of
   shadows, one accent. The accent is the steel-blue circle from the Hoskins logo;
   the four greys beside it become the neutrals. Dark is soft charcoal, never black.
   Inter for reading, Inter Tight for names and figures that matter, Geist Mono
   for measurements. The theme follows the device until the button picks one. */
:root{
  --bg:#F7F7F5;
  --surface:#FFFFFF;
  --raised:#F1F0EC;
  --ink:#121211;
  --muted:#6E6D68;
  --hairline:#E6E4DF;
  --azure:#506C8F;
  --azure-50:rgba(80,108,143,.05);
  --azure-100:rgba(80,108,143,.09);
  --azure-200:rgba(80,108,143,.26);
  --azure-700:#435B79;
  --on-accent:#FFFFFF;
  --good:#2F7A4E;
  --good-wash:#EFF6F1;
  --warn:#A2621A;
  --warn-wash:#FBF4EA;
  --radius:12px;
  --radius-sm:8px;
  --shadow:none;
  --shadow-lg:0 24px 48px -24px rgba(18,18,17,.18);
  --glass:rgba(247,247,245,.78);

  --display:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --brand:"Jost","Century Gothic","Futura",-apple-system,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#232527; --surface:#2B2E30; --raised:#323538; --ink:#EDECE8;
    --muted:#A2A19C; --hairline:#3A3D40;
    --azure:#8DA7C8; --azure-50:rgba(141,167,200,.06); --azure-100:rgba(141,167,200,.12);
    --azure-200:rgba(141,167,200,.30); --azure-700:#A3BAD6; --on-accent:#16202B;
    --good:#7CC59A; --good-wash:#233229; --warn:#E0A860; --warn-wash:#352C1F;
    --shadow-lg:0 24px 48px -24px rgba(0,0,0,.6); --glass:rgba(35,37,39,.78);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#232527; --surface:#2B2E30; --raised:#323538; --ink:#EDECE8;
  --muted:#A2A19C; --hairline:#3A3D40;
  --azure:#8DA7C8; --azure-50:rgba(141,167,200,.06); --azure-100:rgba(141,167,200,.12);
  --azure-200:rgba(141,167,200,.30); --azure-700:#A3BAD6; --on-accent:#16202B;
  --good:#7CC59A; --good-wash:#233229; --warn:#E0A860; --warn-wash:#352C1F;
  --shadow-lg:0 24px 48px -24px rgba(0,0,0,.6); --glass:rgba(35,37,39,.78);
  color-scheme:dark;
}

/* The old warm names still used in places, mapped onto the new set. */
:root{
  --oat:var(--bg); --madder:var(--azure); --madder-wash:var(--azure-100);
  --moss:var(--good); --moss-wash:var(--good-wash); --amber:var(--warn);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.5; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
.num{font-variant-numeric:tabular-nums}
button{font:inherit; cursor:pointer}
a{color:var(--azure)}
::selection{background:var(--azure-200)}

/* ---------- header: glass, sticky, the wordmark goes home ---------- */
.shopbar{
  position:sticky; top:0; z-index:20;
  background:var(--glass); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; gap:14px; padding:10px 22px; min-height:56px; flex-wrap:wrap;
}
.shopbar.bare{background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none;
  border-radius:var(--radius-sm); padding:4px 6px; margin-left:-6px}
.brand:hover{background:var(--azure-50)}
.brand:focus-visible{outline:2px solid var(--azure); outline-offset:2px}
.brand .word{font-family:var(--brand); font-size:21px; font-weight:500; letter-spacing:-.01em; line-height:1}
.marks{display:inline-flex; gap:3px; align-items:center}
.marks i{width:9px; height:9px; background:#3D4041; display:block}
.marks i:nth-child(2){background:#5A5858}
.marks i:nth-child(3){background:#818182}
.marks i:nth-child(5){background:#959494}
.marks i.dot{border-radius:50%; background:#506C8F}
:root[data-theme="dark"] .marks i:nth-child(1){background:#8A8D8F}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .marks i:nth-child(1){background:#8A8D8F} }
.shoptag{font-size:13px; color:var(--muted); padding-left:14px; border-left:1px solid var(--hairline)}
.who{margin-left:auto; display:flex; align-items:center; gap:4px; font-size:13px; color:var(--muted)}
#who{margin-right:8px}
.who button{
  background:none; border:1px solid transparent; color:var(--muted);
  border-radius:var(--radius-sm); padding:6px 10px; font-size:13px; font-weight:500;
}
.who button:hover{background:var(--raised); color:var(--ink)}
.themebtn{display:grid; place-items:center; width:34px; height:34px; padding:0 !important;
  border:1px solid var(--hairline) !important; margin-left:6px}
.themebtn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.themebtn .moon{display:none}
.themebtn[data-mode="dark"] .sun{display:none}
.themebtn[data-mode="dark"] .moon{display:block}
@media (max-width:640px){ .shoptag,#who{display:none} .shopbar{padding:8px 14px} }

/* ---------- forms ---------- */
label{display:block; font-size:12.5px; font-weight:500; color:var(--muted); margin-bottom:6px}
input{
  width:100%; padding:11px 13px; font:inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-sm);
  margin-bottom:16px; transition:border-color .15s, box-shadow .15s;
}
input:focus{outline:none; border-color:var(--azure); box-shadow:0 0 0 3px var(--azure-100)}
.primary{
  width:100%; padding:11px 14px; background:var(--ink); color:var(--bg); border:0;
  border-radius:var(--radius-sm); font-size:14px; font-weight:500; letter-spacing:0;
  transition:opacity .15s;
}
.primary:hover{opacity:.86}
.err{color:#B03A2E; font-size:13.5px; margin:0 0 14px; min-height:1.2em}
:root[data-theme="dark"] .err{color:#F0A195}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .err{color:#F0A195} }

/* ---------- sign in: nothing but the form ---------- */
.gate{min-height:calc(100dvh - 56px); display:grid; place-items:center; align-content:center;
  padding:24px 16px 48px; gap:22px}
.gatecard{width:min(380px,100%); background:none; border:0; padding:0}
.gatecard h1{font-family:var(--display); font-weight:600; font-size:30px; letter-spacing:-.025em; margin:0 0 6px}
.gatecard .sub{color:var(--muted); font-size:14.5px; margin:0 0 26px}
.gatecard .note{text-align:center; margin-top:16px}
.gatefoot{margin:0; font-size:12.5px; color:var(--muted); text-align:center}

/* ---------- job list ---------- */
.page{max-width:1180px; margin:0 auto; padding:26px 22px 70px}
.pagehead{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:20px}
.pagehead h2{font-family:var(--display); font-weight:600; font-size:27px; margin:0;
  letter-spacing:-.015em}
.search{margin-left:auto; width:min(320px,100%)}
.search input{margin:0}

.jobs{background:var(--surface); border:1px solid var(--hairline);
  box-shadow:var(--shadow); border-radius:var(--radius); overflow:hidden}
.job{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto;
  gap:18px; align-items:center; width:100%; text-align:left;
  padding:16px 20px; background:none; border:0;
  border-bottom:1px solid var(--hairline);
}
.job:last-child{border-bottom:0}
.job:hover{background:var(--madder-wash)}
.job:focus-visible{outline:2px solid var(--madder); outline-offset:-2px}
.job .name{font-family:var(--display); font-weight:600; font-size:18px}
.job .meta{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px}
.job .fig{font-family:var(--mono); font-size:14px; text-align:right; white-space:nowrap}
.job .fig small{display:block; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
@media (max-width:720px){
  .job{grid-template-columns:1fr auto; row-gap:10px}
}
.pill{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; white-space:nowrap;
  background:var(--moss-wash); color:var(--moss); border:1px solid currentColor;
}
.pill.quoted{background:var(--madder-wash); color:var(--madder)}
.pill.fitter{background:transparent; color:var(--amber)}

/* ---------- job card ---------- */
.back{
  background:none; border:0; color:var(--madder); padding:0; margin-bottom:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}
.card{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:960px){ .card{grid-template-columns:1fr} }

.panel{background:var(--surface); border:1px solid var(--hairline);
  box-shadow:var(--shadow); border-radius:var(--radius)}
.panel h3{font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0; padding:15px 18px 0; font-weight:400}

.levels{display:flex; gap:7px; padding:12px 18px; flex-wrap:wrap}
.levels button{
  border:1px solid var(--hairline); background:none; color:var(--muted);
  border-radius:999px; padding:6px 13px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
}
.levels button[aria-pressed="true"]{background:var(--azure); color:#fff; border-color:var(--azure)}
.plan{background:var(--oat); border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline); touch-action:none; overflow:hidden}
.plan svg{display:block; width:100%; height:auto}
.room{cursor:pointer}
.planfoot{padding:10px 18px; font-family:var(--mono); font-size:10px;
  color:var(--muted); letter-spacing:.06em; display:flex; gap:14px; flex-wrap:wrap}

.tabs{display:flex; border-bottom:1px solid var(--hairline)}
.tabs button{
  flex:1; background:none; border:0; border-bottom:2px solid transparent;
  padding:15px 10px 12px; color:var(--muted);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--madder)}
.tabbody{padding:18px}

.kv{display:flex; justify-content:space-between; gap:14px; padding:9px 0;
  border-bottom:1px solid var(--hairline); font-size:15px}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{font-family:var(--mono); font-size:13.5px}
.total{display:flex; justify-content:space-between; align-items:baseline;
  border-top:2px solid var(--ink); margin-top:12px; padding-top:13px}
.total b{font-family:var(--display); font-weight:600; font-size:26px; letter-spacing:-.02em}

table{border-collapse:collapse; width:100%}
th,td{padding:9px 8px; text-align:right; border-bottom:1px solid var(--hairline); font-size:13.5px}
th:first-child,td:first-child{text-align:left}
thead th{font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-weight:400}
tbody td{font-family:var(--mono)}
tbody td:first-child{font-family:var(--body); font-size:14.5px}

.drop{display:flex; gap:11px; align-items:baseline; padding:8px 0;
  border-bottom:1px solid var(--hairline)}
.drop b{font-family:var(--mono); font-size:12.5px}
.drop small{font-family:var(--mono); font-size:10px; color:var(--muted)}
.drop .n{
  font-family:var(--mono); font-size:10px; color:#fff; background:var(--madder);
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:none;
}
.cutroom{margin-bottom:20px}
.cutroom h4{font-family:var(--display); font-weight:600; font-size:17px; margin:0 0 3px}
.cutroom .meta{font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-bottom:8px}
.stairsnote{border-left:3px solid var(--amber); padding-left:12px; margin-bottom:20px}
.note{font-size:14px; color:var(--muted); margin:10px 0 0}

.sendbar{display:flex; gap:10px; padding:16px 18px; border-top:1px solid var(--hairline);
  flex-wrap:wrap; align-items:center}
.sendbar input{margin:0; flex:1 1 200px}
.sendbar button{
  background:var(--azure); color:#fff; border:0; border-radius:var(--radius-sm); padding:12px 18px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
}
.sendbar button:hover{background:var(--azure-700)}

.history{list-style:none; margin:0; padding:0}
.history li{padding:9px 0; border-bottom:1px solid var(--hairline); font-size:14px}
.history li:last-child{border-bottom:0}
.history .when{font-family:var(--mono); font-size:10px; color:var(--muted); display:block}

.empty{padding:50px 20px; text-align:center; color:var(--muted)}

/* ---------- expanding room rows ---------- */
.rrow{cursor:pointer}
.rrow:hover{background:var(--madder-wash)}
.rrow:focus-visible{outline:2px solid var(--madder); outline-offset:-2px}
.rrow.open{background:var(--madder-wash)}
.rrow .tw{color:var(--madder); font-size:11px; display:inline-block; width:11px}
.rdetail td{background:var(--oat); padding:14px 12px}
.detailgrid{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:10px}
.detailgrid small{display:block; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.detailgrid b{font-family:var(--mono); font-size:12.5px; font-weight:500}
.detaildrops{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px}
.dropchip{font-family:var(--mono); font-size:10.5px; padding:4px 9px;
  border:1px solid var(--hairline); background:var(--surface); border-radius:var(--radius-sm)}
.detailwalls{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.detailwalls span{font-family:var(--mono); font-size:10.5px; color:var(--muted);
  border:1px solid var(--hairline); padding:2px 6px; border-radius:var(--radius-sm)}
.detailwalls em{font-family:var(--mono); font-size:9px; font-style:normal;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-left:4px}

/* ---------- cutting sheet: open a room, change a drop ---------- */
.cuthead{
  display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left;
  background:none; border:0; border-top:1px solid var(--hairline); padding:13px 0;
}
.cuthead:hover h4{color:var(--madder)}
.cuthead .tw{color:var(--madder); font-size:12px; padding-top:3px}
.cuthead h4{margin:0}
.cuthead .meta{margin:0}
.edited{font-style:normal; font-family:var(--mono); font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--madder);
  border:1px solid var(--madder); border-radius:var(--radius-sm); padding:1px 5px; vertical-align:middle}
.cutbody{padding:6px 0 16px 31px}
.droplabel{display:block; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.dropinput{
  width:130px; margin:0 0 4px; padding:9px 11px; font-family:var(--mono); font-size:14px;
}
.cutnote{
  width:100%; padding:10px 12px; font:inherit; font-size:14px; color:var(--ink);
  background:var(--oat); border:1px solid var(--hairline); border-radius:var(--radius-sm); resize:vertical;
}
.cutnote:focus,.dropinput:focus{outline:2px solid var(--madder); outline-offset:-1px}
.saverow{display:flex; gap:12px; align-items:center; margin-top:16px}
.saverow button{
  background:var(--moss); color:#fff; border:0; border-radius:var(--radius-sm); padding:11px 20px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
}
.saverow button:hover{filter:brightness(1.12)}
.saverow .meta{font-family:var(--mono); font-size:11px; color:var(--moss)}

/* ---------- accounts ---------- */
.formpanel{padding:22px}
.formpanel h3{padding:0}
.person{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:14px;
  align-items:center; padding:14px 20px; border-bottom:1px solid var(--hairline);
}
.person:last-child{border-bottom:0}
.person .name{font-family:var(--display); font-weight:600; font-size:17px}
.person .meta{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px}
@media (max-width:720px){ .person{grid-template-columns:1fr auto} }
.ghost{
  background:none; border:1px solid var(--hairline); color:var(--muted);
  border-radius:var(--radius-sm); padding:7px 12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
}
.ghost:hover{border-color:var(--madder); color:var(--madder)}
.shout{
  background:var(--moss-wash); border:1px solid var(--moss); border-left-width:4px;
  padding:16px 18px; margin-bottom:18px; border-radius:var(--radius-sm);
}
.shout b{display:block; font-family:var(--mono); font-size:15px; word-break:break-all}
.shout span{display:block; margin-top:5px; font-size:13px; color:var(--muted)}

/* ---------- cutting sheet toolbar and the full-width sheet ---------- */
.cuttools{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--hairline);
}
.cuttools .meta{font-family:var(--mono); font-size:10.5px; color:var(--muted)}

/* Full width: the plan steps aside and the sheet takes the page. */
.card.wide{grid-template-columns:minmax(0,1fr)}
.card.wide > section:first-child{display:none}
.card.wide .cutroom{
  border-bottom:1px solid var(--hairline);
}
/* With room to spare, the drops sit in a row instead of a column. */
.card.wide .cutbody{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:4px 26px; align-items:start;
}
.card.wide .cutbody > .droplabel,
.card.wide .cutbody > textarea{grid-column:1 / -1}
.card.wide .tabbody{padding:22px 26px}
.card.wide .cuthead h4{font-size:20px}

/* ---------- the model ---------- */
.model{background:var(--raised); border:1px solid var(--hairline);
  border-radius:var(--radius); overflow:hidden; padding:8px}
.model svg{display:block; width:100%; height:auto}
.slider{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted)}
.slider input{width:120px; margin:0; accent-color:var(--azure)}

/* ---------- the cutter's sign-off ---------- */
.signoff{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:14px;
  border:1px solid var(--hairline); border-left:3px solid var(--muted);
  border-radius:var(--radius); background:var(--raised);
}
.signoff.done{border-left-color:var(--good); background:var(--good-wash)}
.signoff.stale{border-left-color:var(--warn); background:var(--warn-wash)}
.signoff b{display:block; font-size:15px}
.signoff span{display:block; font-size:13px; color:var(--muted); margin-top:2px; max-width:62ch}
.signoff button{
  margin-left:auto; background:var(--good); color:#fff; border:0;
  border-radius:var(--radius-sm); padding:11px 18px; white-space:nowrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
}
.signoff button:hover{filter:brightness(1.1)}
.signoff button.ghost{background:none; color:var(--muted); border:1px solid var(--hairline)}
.signoff button.ghost:hover{border-color:var(--warn); color:var(--warn); filter:none}
.pill.cut{background:var(--good-wash); color:var(--good)}

/* ---------- the modern pass ----------
   Harvey-plain: sentence-case buttons in Inter, no tracking-heavy mono caps,
   hairline surfaces, the accent kept for the one thing to act on. Mono stays
   only where the numbers are measurements. */
.pagehead h2{font-family:var(--display); font-weight:600; font-size:28px; letter-spacing:-.025em}
.jobs,.panel{box-shadow:none; border-radius:var(--radius)}
.job{padding:15px 20px; transition:background .12s}
.job:hover{background:var(--raised)}
.job .name,.person .name,.cutroom h4{font-family:var(--display); font-weight:600; letter-spacing:-.015em}
.job .name{font-size:16.5px}
.job .meta,.person .meta{font-family:var(--body); font-size:12.5px}
.job .fig{font-size:13.5px}
.job .fig small,.detailgrid small,.droplabel,thead th{
  font-family:var(--body); font-size:11px; letter-spacing:0; text-transform:none; font-weight:500}
.pill{font-family:var(--body); font-size:11.5px; letter-spacing:0; text-transform:none; font-weight:500;
  padding:3px 9px; border:0}
.pill.fitter{background:var(--warn-wash)}

.back{font-family:var(--body); font-size:13px; letter-spacing:0; text-transform:none; font-weight:500;
  color:var(--muted); padding:4px 0}
.back:hover{color:var(--ink)}
.panel h3{font-family:var(--body); font-size:12.5px; letter-spacing:0; text-transform:none; font-weight:600;
  color:var(--ink)}
.levels button,.tabs button,.ghost,.sendbar button,.saverow button,.signoff button{
  font-family:var(--body); font-size:13px; letter-spacing:0; text-transform:none; font-weight:500}
.levels button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.tabs button{padding:13px 10px 11px}
.tabs button[aria-selected="true"]{border-bottom-color:var(--ink)}
.sendbar button{background:var(--ink); color:var(--bg)}
.sendbar button:hover{background:var(--ink); opacity:.86}
.ghost{border-radius:var(--radius-sm)}
.ghost:hover{border-color:var(--ink); color:var(--ink)}
.drop .n{background:var(--azure); color:var(--on-accent)}
.total{border-top:1px solid var(--ink)}
.total b{font-family:var(--display); letter-spacing:-.03em}
.shout{border-left-width:1px; border-radius:var(--radius)}
.signoff{border-left-width:1px; border-radius:var(--radius)}
.edited{font-family:var(--body); letter-spacing:0; text-transform:none; font-size:11px}
.planfoot,.cuttools .meta,.drop small,.detailwalls em{font-family:var(--body); letter-spacing:0}
.detailwalls em{text-transform:none}
.page{padding-top:30px}
/* The page's slight negative tracking is an absolute length once inherited, and
   the plan and 3D drawings are scaled up many times: keep their text untracked. */
svg{letter-spacing:normal}
.panel:not(.formpanel) > h3{padding:16px 20px 6px !important}
/* The 3D house turns under a mouse or a finger, so the page must not scroll instead. */
.model{touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none}
.model.dragging{cursor:grabbing}

/* ---------- cutting sheet, at a glance ---------- */
.adjusthead,.glancehead{font-family:var(--body); font-size:13px; font-weight:600; margin:26px 0 10px}
.adjusthead{padding-top:18px; border-top:1px solid var(--hairline)}
.glance{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; margin:4px 0 14px}
.stat{border:1px solid var(--hairline); border-radius:var(--radius); padding:12px 14px; background:var(--surface)}
.stat b{display:block; font-family:var(--display); font-size:28px; font-weight:600; letter-spacing:-.03em; line-height:1.05}
.stat span{display:block; font-size:13px; font-weight:500; margin-top:2px}
.stat small{display:block; font-size:11.5px; color:var(--muted); margin-top:2px}
.stat:first-child{border-color:var(--ink)}
.rollbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.rollbar label{margin:0; color:var(--ink)}
.rollbar input{width:86px; margin:0; padding:7px 10px; font-family:var(--mono)}
.warnline{margin:10px 0 0; padding:9px 12px; border-radius:var(--radius-sm); background:var(--warn-wash);
  color:var(--warn); font-size:13px}
.rolls{display:grid; gap:10px}
.roll{margin:0}
.roll figcaption{font-size:12.5px; color:var(--muted); margin-bottom:4px}
.roll figcaption b{color:var(--ink); font-weight:600}
.roll svg{display:block; width:100%; height:auto}
.rollbody{fill:var(--raised); stroke:var(--hairline)}
.offcut{fill:none; stroke:var(--muted); stroke-dasharray:4 4; stroke-width:1}
.rip{stroke:var(--ink); stroke-width:1.5; stroke-dasharray:6 4}
.cutname{font:600 12px var(--body); fill:var(--ink)}
.cutlen{font:11px var(--mono); fill:var(--muted)}
.tickm{font:10px var(--mono); fill:var(--muted)}
.roomcuts{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.roomcut{border:1px solid var(--hairline); border-radius:var(--radius); padding:12px; background:var(--surface)}
.roomcut header{display:flex; justify-content:space-between; gap:8px; font-size:13.5px; margin-bottom:8px}
.roomcut header span{color:var(--muted); font-size:12px}
.roomcut svg{display:block; width:100%; height:auto; max-height:190px}
.roomline{fill:none; stroke:var(--ink); stroke-width:.07}
.seam{stroke:#C0392B; stroke-width:.05; stroke-dasharray:.18 .12}
.dropno{fill:var(--ink); font-family:var(--display); font-weight:600; text-anchor:middle; dominant-baseline:middle}
.pile{stroke:var(--muted); stroke-width:.05}
.pilehead{fill:var(--muted)}
.cutline{margin:8px 0 0; font-size:12.5px; color:var(--muted); line-height:1.45}
.cutline b{color:var(--ink); font-family:var(--mono); font-weight:500}
.panel h3.glancehead,.panel h3.adjusthead{padding:0; color:var(--ink)}
.panel h3.adjusthead{padding-top:18px}
.glancehead small{font-weight:400; color:var(--muted); margin-left:6px}
.riptag{fill:var(--ink); opacity:.55}
.rolls{gap:16px}

/* ---------- the timeline: contact to install, in one line ---------- */
.job .track{grid-column:1 / -1}
.track{list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr))}
.step{position:relative; display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding-right:6px}
.step::before{content:""; position:absolute; top:5px; left:12px; right:0; height:2px; background:var(--hairline)}
.step:last-child::before{display:none}
.step.done::before{background:var(--ink)}
.dot{position:relative; z-index:1; width:12px; height:12px; border-radius:50%; padding:0;
  border:2px solid var(--hairline); background:var(--surface); display:block}
.step.done .dot{background:var(--ink); border-color:var(--ink)}
.step.next .dot{border-color:var(--azure); box-shadow:0 0 0 3px var(--azure-100)}
.slabel{font-size:11.5px; font-weight:500; margin-top:6px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.step.done .slabel,.step.next .slabel{color:var(--ink)}
.snote{font-size:11px; color:var(--muted); font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.step.next .snote{color:var(--azure)}
.snote.late-amber{color:var(--warn)}
.snote.late-red{color:#C0392B}
.timeline{padding:16px 20px 14px; margin-bottom:20px}
.track.big .dot{width:18px; height:18px; cursor:pointer; transition:transform .12s}
.track.big .dot:hover{transform:scale(1.15)}
.track.big .step::before{top:8px; left:18px}
.track.big .slabel{font-size:13px}
.track.big .snote{font-size:12px}
@media (max-width:720px){ .slabel{font-size:10.5px} .snote{font-size:10px} }
.step.next .snote.late-amber{color:var(--warn)}
.step.next .snote.late-red{color:#C0392B; font-weight:500}
:root[data-theme="dark"] .step.next .snote.late-red{color:#F0A195}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .step.next .snote.late-red{color:#F0A195} }
.track .short{display:none}
@media (max-width:720px){ .track .long{display:none} .track .short{display:inline} }

/* ---------- job list: one slim line per job ---------- */
.jobs{overflow:visible}
.jhead,.jrow{display:grid; grid-template-columns:minmax(0,2.1fr) minmax(170px,1.3fr) 120px 70px 96px;
  gap:16px; align-items:center; padding:0 18px}
.jhead{min-height:38px; border-bottom:1px solid var(--hairline); background:var(--raised);
  border-radius:var(--radius) var(--radius) 0 0}
.jrow{width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--hairline);
  min-height:54px; padding-top:7px; padding-bottom:7px; color:inherit; transition:background .12s}
.jrow:last-child{border-bottom:0}
.jrow:hover{background:var(--raised)}
.jrow:focus-visible{outline:2px solid var(--azure); outline-offset:-2px}
.jcol{min-width:0; display:flex; align-items:center; gap:4px}
.jcol.c-name{flex-direction:column; align-items:flex-start; gap:0}
.jcol.c-name b{font-family:var(--display); font-weight:600; font-size:14.5px; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.jcol.c-name small{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.jcol.c-area,.jcol.c-total{justify-content:flex-end; font-family:var(--mono); font-size:13px}
.jhead .jcol.c-area,.jhead .jcol.c-total{justify-content:flex-end}
.sorter{background:none; border:0; padding:4px 0; font-size:12px; font-weight:600; color:var(--muted); display:inline-flex; gap:3px}
.sorter.on,.sorter:hover{color:var(--ink)}
.arrow{min-width:.8em}
.filterbtn{background:none; border:1px solid transparent; border-radius:6px; padding:1px 5px; font-size:11px; color:var(--muted)}
.filterbtn:hover{border-color:var(--hairline); color:var(--ink)}
.filterbtn.on{background:var(--ink); color:var(--bg)}
.filtermenu{position:absolute; z-index:40; width:220px; background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:8px}
.filtermenu label{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink); font-weight:400;
  margin:0; padding:6px 6px; border-radius:6px; cursor:pointer}
.filtermenu label:hover{background:var(--raised)}
.filtermenu input{width:auto; margin:0}
.filtermenu .clear{width:100%; margin-top:4px; background:none; border:0; border-top:1px solid var(--hairline);
  padding:8px 6px 4px; text-align:left; font-size:12.5px; color:var(--muted)}

/* the compact timeline in a row */
.mini{display:flex; flex-direction:column; gap:4px; min-width:0}
.dots{display:flex; align-items:center}
.dots i{width:8px; height:8px; border-radius:50%; border:1px solid var(--muted); background:var(--surface); flex:none}
.dots i + i{margin-left:14px; position:relative}
.dots i + i::before{content:""; position:absolute; right:9px; top:3px; width:14px; height:1px; background:var(--hairline)}
.dots i.done{background:var(--ink); border-color:var(--ink)}
.dots i.done + i::before{background:var(--ink)}
.dots i.next{border-color:var(--azure); box-shadow:0 0 0 2px var(--azure-100)}
.mininote{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mininote .amber{color:var(--warn)}
.mininote .red{color:#C0392B}
:root[data-theme="dark"] .mininote .red{color:#F0A195}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .mininote .red{color:#F0A195} }

/* likelihood */
.lpill{display:inline-block; min-width:44px; text-align:center; font-family:var(--mono); font-size:12px; font-weight:500;
  padding:2px 8px; border-radius:999px; background:var(--raised); color:var(--muted)}
.lpill.won{background:var(--good-wash); color:var(--good)}
.lpill.hot{background:var(--azure-100); color:var(--azure)}
.lpill.warm{background:var(--warn-wash); color:var(--warn)}
.lpill.cold{background:var(--raised); color:var(--muted)}
.jcol.c-likely small{font-size:10.5px; color:var(--muted); margin-left:2px}
.muted{color:var(--muted)}
.pipeline{display:flex; gap:22px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin:-6px 0 12px}
.pipeline b{color:var(--ink); font-family:var(--display); font-weight:600; font-size:16px; margin-right:4px}
.likelyset{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--hairline); font-size:13px}
.likelyset .lhead{font-weight:600}
.lchoices{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
.lchoices button{background:none; border:1px solid var(--hairline); border-radius:6px; padding:4px 9px; font-size:12.5px; color:var(--muted)}
.lchoices button:hover{color:var(--ink); border-color:var(--ink)}
.lchoices button.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}

/* thinner lines on the big timeline too */
.step::before{height:1px; top:6px}
.track.big .step::before{top:8px}
.track.big .dot{width:14px; height:14px; border-width:1.5px}
.dot{border-width:1.5px}

@media (max-width:760px){
  .jhead{display:none}
  .jrow{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name total" "progress likely"; row-gap:6px; padding:10px 14px}
  .jrow .c-name{grid-area:name} .jrow .c-total{grid-area:total} .jrow .c-progress{grid-area:progress}
  .jrow .c-likely{grid-area:likely; justify-content:flex-end} .jrow .c-area{display:none}
}
.filterbtn{display:inline-flex; align-items:center; gap:2px; padding:3px 5px}
.filterbtn svg{width:12px; height:12px; fill:currentColor}
.filterbtn span{font-size:10.5px; font-weight:600}

/* ---------- job summary ---------- */
.summary{padding:18px 20px; margin-bottom:20px}
.sumgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.3fr); gap:26px}
@media (max-width:960px){ .sumgrid{grid-template-columns:1fr} }
.sumblock h4{font-size:12px; font-weight:600; color:var(--muted); margin:0 0 8px; text-transform:none; letter-spacing:0}
.sumblock p{margin:0 0 4px; font-size:13.5px}
.sumblock p.big{font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.015em; margin-bottom:6px}
.sumblock a{color:var(--ink); text-decoration-color:var(--hairline); text-underline-offset:3px}
.sumblock a:hover{text-decoration-color:var(--azure)}
.sumblock .scope{color:var(--muted); margin-bottom:8px}
.sumblock textarea{width:100%; font:inherit; font-size:13.5px; color:var(--ink); background:var(--bg);
  border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:9px 11px; resize:vertical}
.sumblock textarea:focus{outline:none; border-color:var(--azure); box-shadow:0 0 0 3px var(--azure-100)}
.savenote{font-size:11.5px; color:var(--good)}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:6px 16px}
.facts div{display:flex; flex-direction:column; min-width:0}
.facts span{font-size:11.5px; color:var(--muted)}
.facts b{font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.facts.dates{margin-top:12px; padding-top:10px; border-top:1px solid var(--hairline); grid-template-columns:repeat(3,1fr)}
.producttable{margin-top:18px; overflow-x:auto}
.producttable table{min-width:640px}
.producttable td small{display:block; font-family:var(--body); font-size:11.5px; color:var(--muted); font-weight:400; white-space:normal}
.producttable td b{font-weight:600}
.producttable tbody td:first-child{font-family:var(--body)}
.producttable tfoot td{border-bottom:0; padding-top:12px; font-size:13px; color:var(--muted)}
.producttable tfoot td:first-child{font-family:var(--body)}
.producttable tfoot b{color:var(--ink); font-size:15px}
.producttable .note{font-size:12.5px}
.producttable td.num{white-space:nowrap}

/* ---------- help: the guide and the ? hints ---------- */
.helpbtn{font-weight:600; font-size:14px; color:var(--muted)}
.hint{display:inline-grid; place-items:center; width:16px; height:16px; margin-left:4px; padding:0; vertical-align:middle;
  border:1px solid var(--hairline); border-radius:50%; background:var(--surface); color:var(--muted);
  font:600 10px/1 var(--body); cursor:help; flex:none}
.hint:hover,.hint[aria-expanded="true"]{border-color:var(--azure); color:var(--azure)}
.hinttip{position:absolute; z-index:60; background:var(--ink); color:var(--bg); border-radius:var(--radius-sm);
  padding:11px 13px 9px; box-shadow:var(--shadow-lg); font-size:13px; line-height:1.45}
.hinttip p{margin:0 0 6px}
.hintmore{background:none; border:0; padding:0; color:inherit; opacity:.75; font-size:12px; text-decoration:underline; text-underline-offset:3px}
.hintmore:hover{opacity:1}
.panelhint{float:right; margin:-4px -6px 0 0}
.helpveil{position:fixed; inset:0; background:rgba(18,18,17,.28); opacity:0; pointer-events:none; transition:opacity .2s; z-index:70}
.helpdrawer{position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); z-index:71; background:var(--surface);
  border-left:1px solid var(--hairline); box-shadow:var(--shadow-lg); transform:translateX(102%); transition:transform .22s ease;
  display:flex; flex-direction:column}
body.helpopen .helpdrawer{transform:none}
body.helpopen .helpveil{opacity:1; pointer-events:auto}
.helpdrawer header{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--hairline)}
.helpdrawer header b{font-family:var(--display); font-size:18px; letter-spacing:-.015em}
.helpclose{background:none; border:0; font-size:24px; line-height:1; color:var(--muted); padding:0 4px}
.helpclose:hover{color:var(--ink)}
.helpbody{overflow-y:auto; padding:6px 20px 30px; font-size:14px; line-height:1.55}
.helpbody section{padding:14px 0; border-bottom:1px solid var(--hairline)}
.helpbody section:last-child{border-bottom:0}
.helpbody h3{font-family:var(--display); font-size:15.5px; font-weight:600; margin:0 0 8px; letter-spacing:-.01em}
.helpbody p{margin:0 0 8px}
.helpbody ul,.helpbody ol{margin:0 0 8px; padding-left:20px}
.helpbody li{margin-bottom:6px}
.flow li::marker{font-weight:600}
.warnbox{background:var(--warn-wash); color:var(--ink); border-radius:var(--radius-sm); padding:9px 11px; font-size:13.5px}
.glossary{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px}
.glossary dt{font-weight:600; white-space:nowrap}
.glossary dd{margin:0; color:var(--muted)}
@media (max-width:520px){ .glossary{grid-template-columns:1fr} .glossary dd{margin-bottom:6px} }

/* ---------- editing a job ---------- */
.editbar{margin:0 0 16px; display:flex; flex-direction:column; gap:8px}
.editbar .editstart{align-self:flex-start}
.editbar > .muted{font-size:12.5px}
.editnow{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px; border-radius:var(--radius);
  background:var(--azure-100); border:1px solid var(--azure-200)}
.edittitle{display:flex; flex-direction:column}
.edittitle b{font-size:14px}
.edittitle span{font-size:13px; color:var(--muted)}
.edittitle em{font-style:normal; font-family:var(--mono); margin-left:4px}
.edittitle em.up{color:var(--warn)} .edittitle em.down{color:var(--good)}
.editactions{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.editactions .primary{width:auto; padding:8px 14px}
.editactions .primary:disabled{opacity:.35; cursor:default}
.edithelp{margin:0; font-size:12.5px; color:var(--muted)}
.roomedit,.edrow{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.roomedit label,.edrow label{display:flex; flex-direction:column; gap:4px; margin:0; font-size:12px}
.roomedit input,.edrow input,.roomedit select,.edrow select{margin:0; width:auto; min-width:120px; padding:7px 9px; font:inherit; font-size:13.5px;
  color:var(--ink); background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-sm)}
.roomedit .roomfig{font-family:var(--mono); font-size:12.5px; color:var(--muted); padding-bottom:8px}
.roomedit .danger{margin-left:auto}
.ghost.danger:hover{border-color:#C0392B; color:#C0392B}
.edpanel{border:1px solid var(--hairline); border-radius:var(--radius); padding:14px 16px; background:var(--surface);
  display:flex; flex-direction:column; gap:10px}
.edpanel > b{font-size:13px}
.edpanel .primary{width:auto; padding:8px 14px}
.edlabel{font-size:13px; font-weight:500; padding-bottom:8px; min-width:150px}
.corner{fill:var(--surface); stroke:var(--azure); stroke-width:.03; cursor:grab}
.corner.on{fill:var(--azure)}
.wallchip{cursor:pointer}
.wallchip rect{fill:var(--ink); opacity:.85}
.wallchip text{fill:var(--bg); font-family:var(--mono)}
body.editing .plan{outline:2px solid var(--azure-200); outline-offset:-2px; cursor:move}
body.editing .saverow,body.editing .signoff,body.editing .sendbar,body.editing #rolllen,
body.editing .cutbody,body.editing .likelyset .lchoices,body.editing .track.big .dot{pointer-events:none; opacity:.55}
body.editing .planfoot span:last-child{visibility:hidden}
.pendingbox{display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:14px 18px; margin-bottom:16px;
  border-radius:var(--radius); background:var(--warn-wash); border:1px solid var(--warn)}
.pendingbox b{display:block; font-size:14px}
.pendingbox span{display:block; font-size:13px; color:var(--muted); margin-top:2px; max-width:70ch}
.pendingactions{margin-left:auto; display:flex; gap:6px}
.pendingactions .primary{width:auto; padding:8px 14px}
.heldtag{display:inline-block; font-size:10.5px; font-weight:600; color:var(--warn); background:var(--warn-wash);
  border-radius:4px; padding:0 5px; margin-right:4px}
body.editing .plan svg .room path{cursor:move}

/* ---------- products, the flooring dropdown, and the notes log ---------- */
.productpick{max-width:100%; font:inherit; font-size:13px; color:var(--ink); background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:5px 8px}
.kv .productpick{max-width:260px}
.roomedit .productpick{min-width:260px; padding:7px 9px}
.productwarn{margin:0 0 16px}
.productgroup{margin-bottom:14px; padding:4px 18px 10px}
.productgroup h3{padding:12px 0 6px !important; font-size:14px !important}
.productgroup td:first-child{font-family:var(--body); font-size:14px}
.priceinput{width:96px; margin:0; padding:5px 8px; text-align:right; font-family:var(--mono); font-size:13px}
.settag{font-family:var(--body); font-size:11px; font-weight:600; color:var(--good); background:var(--good-wash); padding:1px 6px; border-radius:4px}
.notelog{padding:16px 20px; margin-bottom:20px}
.notehead{display:flex; align-items:baseline; gap:10px; margin-bottom:10px}
.notehead h4{margin:0; font-size:14px}
.noteadd{display:flex; gap:8px; align-items:flex-end}
.noteadd textarea{flex:1; font:inherit; font-size:13.5px; color:var(--ink); background:var(--bg); border:1px solid var(--hairline);
  border-radius:var(--radius-sm); padding:9px 11px; resize:vertical}
.noteadd textarea:focus{outline:none; border-color:var(--azure); box-shadow:0 0 0 3px var(--azure-100)}
.noteadd .primary{width:auto; padding:9px 14px; white-space:nowrap}
.notes{list-style:none; margin:10px 0 0; padding:0}
.notes li{padding:10px 0; border-top:1px solid var(--hairline)}
.notes p{margin:0 0 3px; font-size:14px}
.notes span{font-size:12px; color:var(--muted)}
.linkish{background:none; border:0; padding:0; margin-left:8px; color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:2px}
.linkish:hover{color:#C0392B}
body.editing .notelog{opacity:1}

/* ---------- client and notes side by side ---------- */
.clientrow{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px; margin-bottom:20px; align-items:start}
.clientrow > .panel{margin-bottom:0}
.clientgrid{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}
.sumgrid.jobonly{grid-template-columns:1fr}
.sumgrid.jobonly .facts{grid-template-columns:repeat(6,minmax(0,1fr))}
.sumgrid.jobonly .facts.dates{grid-template-columns:repeat(6,minmax(0,1fr))}
.summary{margin-top:20px}
.clientpanel{margin-top:0}
@media (max-width:960px){
  .clientrow{grid-template-columns:1fr}
  .clientgrid{grid-template-columns:1fr}
  .sumgrid.jobonly .facts,.sumgrid.jobonly .facts.dates{grid-template-columns:repeat(2,minmax(0,1fr))}
}