/* NuPod Hub: one stylesheet for the form, dashboards and admin. */
:root{
  --paper:#FBFAF8; --ink:#16202A; --muted:#6B7682; --line:#E3DFD8;
  --field:#FFFFFF; --edge:#C3C9CF; --accent:#2E4A5A; --accent-soft:#EBF1F4;
  --stripe:#F5F3EF; --warn:#A8442A; --ok:#2F6B4F;
  --card:#FFFFFF; --shadow:0 1px 2px rgba(22,32,42,.05), 0 6px 20px rgba(22,32,42,.06);
  --s-sub-bg:#E6EEF2; --s-sub:#2E4A5A;
  --s-des-bg:#FBF0D9; --s-des:#8A5A0B;
  --s-inf-bg:#F8E5DE; --s-inf:#A8442A;
  --s-done-bg:#E1EFE7; --s-done:#2F6B4F;
  --overlay:rgba(16,22,28,.42);
  color-scheme:light;                 /* the browser's own controls (tickboxes, scrollbars) follow the theme */
  /* per-rep chart colours: fixed order, validated for colour-blind separation */
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100;
  --series-5:#e87ba4; --series-6:#008300; --series-7:#4a3aa7; --series-8:#e34948;
  --pf-decide:#F5F2EC; --pf-close:#F0EFEE; --pf-est:#E4DDD0;     /* the process flow's own fills (docs/flowchart.py) */
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
    --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767;
  }
}
:root[data-theme="dark"]{
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
  --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#13171B; --ink:#E9EBED; --muted:#98A2AC; --line:#272E35;
    --field:#1A2026; --edge:#3B444D; --accent:#8FB6C7; --accent-soft:#1D262C;
    --stripe:#181D22; --warn:#E0916F; --ok:#7FC3A2;
    --card:#191E23; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --s-sub-bg:#1F2C33; --s-sub:#9CC3D3;
    --s-des-bg:#2E2615; --s-des:#E5B869;
    --s-inf-bg:#35211B; --s-inf:#EE9C7B;
    --s-done-bg:#17291F; --s-done:#86CBA8;
    --pf-decide:#2A2621; --pf-close:#23282D; --pf-est:#3B3427;
    --overlay:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#13171B; --ink:#E9EBED; --muted:#98A2AC; --line:#272E35;
  --field:#1A2026; --edge:#3B444D; --accent:#8FB6C7; --accent-soft:#1D262C;
  --stripe:#181D22; --warn:#E0916F; --ok:#7FC3A2;
  --card:#191E23; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --s-sub-bg:#1F2C33; --s-sub:#9CC3D3;
  --s-des-bg:#2E2615; --s-des:#E5B869;
  --s-inf-bg:#35211B; --s-inf:#EE9C7B;
  --s-done-bg:#17291F; --s-done:#86CBA8;
  --pf-decide:#2A2621; --pf-close:#23282D; --pf-est:#3B3427;
  --overlay:rgba(0,0,0,.6);
  color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
}
a{ color:var(--accent); }
.muted{ color:var(--muted); }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- buttons & inputs ---------- */
button{
  font:inherit; font-size:.88rem; font-weight:600; border-radius:8px; cursor:pointer;
  padding:11px 18px; min-height:44px; border:1px solid var(--edge);
  background:var(--field); color:var(--ink); flex:0 1 auto;
  transition:filter .12s, background-color .12s, border-color .12s;
}
button:hover:not(:disabled){ filter:brightness(1.05); }
button:disabled{ opacity:.55; cursor:default; }
button.primary{ background:var(--accent); border-color:var(--accent); color:var(--paper); }
button.danger{ background:var(--warn); border-color:var(--warn); color:#fff; }
/* the dark theme's warm red is light, so it takes dark text */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) button.danger{ color:#1A1F24; } }
:root[data-theme="dark"] button.danger{ color:#1A1F24; }
button.ghost{ background:transparent; border-color:transparent; color:var(--accent); padding-left:10px; padding-right:10px; }
button.ghost:hover:not(:disabled){ background:var(--accent-soft); filter:none; }
button.small{ min-height:34px; padding:6px 12px; font-size:.82rem; }
button:focus-visible, a:focus-visible, .tabs a:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }

input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], select, textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--field); border:1px solid var(--edge); border-radius:8px;
  padding:10px 12px; min-height:46px; transition:border-color .12s, box-shadow .12s;
}
select, input.combo-in{
  background-color:var(--accent-soft);
  -webkit-appearance:none; appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%232E4A5A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) input.combo-in{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238FB6C7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }
}
:root[data-theme="dark"] select, :root[data-theme="dark"] input.combo-in{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238FB6C7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
select.empty{ color:var(--muted); }
textarea{ min-height:96px; resize:vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.missing{ border-color:var(--warn) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
input.auto{ background:transparent; border-style:dashed; color:var(--muted); cursor:default; font-weight:500; }
label.check{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.92rem; user-select:none; }
label.check input{ width:20px; height:20px; accent-color:var(--accent); margin:0; flex:none; }

/* ---------- sign-in screens ---------- */
.gate{ min-height:calc(100vh - env(safe-area-inset-top,0px)); display:grid; place-items:center; padding:28px 16px 48px; }
.gate-card{
  width:100%; max-width:410px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:30px 28px 26px;
}
.gate-logos{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
.gate-logos img{ display:block; height:auto; }
.gate h1{ font-size:1.35rem; font-weight:700; letter-spacing:-.015em; margin:0 0 4px; }
.gate p.lede{ color:var(--muted); font-size:.9rem; margin:0 0 20px; }
.gate .field{ margin-bottom:14px; }
.gate .field label{ display:block; font-size:.84rem; font-weight:600; margin-bottom:6px; }
.gate .row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 18px; }
.gate button.primary{ width:100%; }
.gate .alt{ text-align:center; margin-top:16px; font-size:.88rem; }
.pw{ position:relative; }
.pw input{ padding-right:64px; }
.pw .show{ position:absolute; right:4px; top:50%; transform:translateY(-50%); min-height:36px; padding:4px 10px;
  border:0; background:transparent; color:var(--muted); font-size:.8rem; font-weight:600; }
.msg{ border-radius:8px; padding:10px 12px; font-size:.88rem; margin:0 0 14px; line-height:1.45; }
.msg.bad{ background:var(--s-inf-bg); color:var(--s-inf); }
.msg.good{ background:var(--s-done-bg); color:var(--s-done); }
.msg.info{ background:var(--accent-soft); color:var(--ink); }
.msg.warn{ background:var(--s-des-bg); color:var(--s-des); font-weight:500; }
.linkbtn{ background:none; border:0; padding:0; min-height:0; color:var(--accent); font-weight:600; font-size:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ---------- two-step sign-in ---------- */
.gate-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:var(--accent-soft); color:var(--accent); margin:0 0 14px; }
.gate-ic.ok{ background:var(--s-done-bg); color:var(--s-done); }
/* no backup codes (23 Oct 2026): where one was the way back, a quiet line says a lost phone or key is Clinton's reset */
.lost-note{ margin:14px 0 0; color:var(--muted); font-size:.84rem; line-height:1.45; text-align:center; }
.modal .lost-note{ text-align:left; margin:2px 0 4px; }
.modal .msg.lost-note{ color:var(--s-des); font-size:.86rem; }
.gate .lost-note + .alt{ margin-top:12px; }
.gate .on-hint{ color:var(--muted); font-size:.84rem; margin:-4px 0 16px; }
button.wide{ width:100%; }
.modal .gate-ic{ margin-bottom:12px; }
.mfa-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.mfa-head .gate-ic{ margin:0; }
.mfa-head h3{ margin:0 0 3px; }
.chip.c-on{ background:var(--s-done-bg); color:var(--s-done); }
.chip.c-off{ background:var(--stripe); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); }
.mfa-head .mfa-since{ margin-left:8px; font-size:.8rem; color:var(--muted); }
/* passkeys (21 Oct 2026): the sign-in card's "or" and its passkey button, the gate's choice, the dialog's sections */
.or-line{ display:flex; align-items:center; gap:12px; margin:16px 0 14px; color:var(--muted); font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; }
.or-line::before, .or-line::after{ content:""; flex:1; height:1px; background:var(--line); }
button.pk-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:var(--card); color:var(--ink);
  border:1px solid var(--edge); }
button.pk-btn:hover:not(:disabled){ filter:none; border-color:var(--accent); background:var(--accent-soft); }
button.pk-btn svg, button.pk-main svg{ width:19px; height:19px; flex:none; }
button.pk-btn svg{ color:var(--accent); }
button.pk-main{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; text-align:left; }
button.pk-main span, button.pk-btn span{ min-width:0; }
.pk-no{ display:flex; align-items:center; justify-content:center; gap:8px; margin:0; color:var(--muted); font-size:.84rem; text-align:center; }
.pk-no svg{ width:16px; height:16px; flex:none; opacity:.7; }
.gate .pk-main + .field, .gate .pk-main + .hint{ margin-top:12px; }
.gate-choice .hint{ color:var(--muted); font-size:.84rem; margin:8px 0 14px; text-align:center; line-height:1.45; }
.gate-choice .pk-name{ margin-bottom:12px; }
.gate-choice .hint{ margin-bottom:0; }
.mfa-sec #pkStays{ margin:0 0 12px; }
.gate-choice .pk-name input{ min-height:40px; }
.mfa-sec{ border:1px solid var(--line); border-radius:12px; padding:14px 14px 14px; margin:0 0 12px; background:var(--card); }
.mfa-sec + .mfa-sec{ margin-top:0; }
.mfa-sec .sec-h{ display:flex; align-items:center; gap:10px; }
.mfa-sec .sec-h b{ font-size:.95rem; }
.mfa-sec .sec-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); flex:none; }
.mfa-sec .sec-ic svg{ width:17px; height:17px; }
.mfa-sec .sec-n{ margin-left:auto; font-size:.76rem; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.mfa-sec .sec-h .tag{ margin-left:auto; }
.mfa-sec .sec-p{ margin:8px 0 12px; color:var(--muted); font-size:.85rem; line-height:1.45; }
.mfa-sec .msg{ margin:12px 0 0; }
.mfa-sec .pk-no{ justify-content:flex-start; text-align:left; }
.mfa-sec button.small svg{ vertical-align:-3px; margin-right:6px; }
.pk-list{ list-style:none; margin:0 0 12px; padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.pk-list li{ display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--stripe); }
.pk-list li + li{ border-top:1px solid var(--line); }
.pk-list .pk-ic{ color:var(--s-done); display:grid; place-items:center; flex:none; }
.pk-list .pk-ic svg{ width:18px; height:18px; }
.pk-list .pk-t{ flex:1; min-width:0; }
.pk-list .pk-t b{ display:block; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-list small{ display:block; color:var(--muted); font-size:.78rem; }
.pk-list .pk-rm{ color:var(--warn); font-size:.82rem; flex:none; }
.pk-list li.rm{ display:block; background:var(--s-inf-bg); }
.pk-list li.rm .pk-ic{ display:none; }
.pk-rmq b{ display:block; font-size:.9rem; color:var(--ink); }
.pk-rmq small{ margin:2px 0 10px; color:var(--ink); opacity:.8; }
.pk-new{ border-top:1px dashed var(--line); padding-top:12px; }
.pk-new .sec-p{ margin:0 0 10px; }
.pk-new .field, .pk-rmq .field{ margin-bottom:10px; }
.pk-acts{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.pk-acts button svg{ width:15px; height:15px; vertical-align:-3px; margin-right:6px; }
.menu .mi{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tag.ok{ background:var(--s-done-bg); color:var(--s-done); border-color:transparent; }
/* the Users page's two-step sign-in card: compulsory for everyone, always (23 Oct 2026), so it only says so */
.mfa-req .mr-row{ display:flex; align-items:flex-start; gap:14px; }
.mfa-req .gate-ic{ margin:0; }
.mfa-req .mr-text{ flex:1; min-width:0; }
.mfa-req .mr-text > b{ display:block; margin:2px 0 3px; }
.mfa-req .mr-text p{ margin:0; color:var(--muted); font-size:.86rem; max-width:72ch; }
.mfa-req .mr-text p.mr-count{ margin-top:8px; color:var(--ink); }
td.mfa-c .cell-sub{ white-space:nowrap; }
td.mfa-c [title]{ cursor:help; }

/* ---------- app shell ---------- */
.top{
  position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.top-in{ max-width:1180px; margin:0 auto; padding:0 20px; height:60px; display:flex; align-items:center; gap:34px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:none; }
.brand img{ height:26px; width:auto; display:block; }
/* the logos have dark lettering: on dark pages they sit on a light plate */
.plate{ display:inline-flex; align-items:center; border-radius:7px; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .plate{ background:#F4F2EE; padding:5px 8px; } }
:root[data-theme="dark"] .plate{ background:#F4F2EE; padding:5px 8px; }
.tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tscroll table{ min-width:640px; }
/* the app's title: bigger, bolder and in ink, so it can't be mistaken for one of the tabs */
.brand .brand-label{ font-weight:700; font-size:1.08rem; letter-spacing:-.015em; color:var(--ink); padding-left:12px; border-left:1px solid var(--edge); white-space:nowrap; line-height:1.2; }
.tabs{ display:flex; gap:2px; align-self:stretch; }
.tabs a{
  display:flex; align-items:center; padding:0 12px; color:var(--muted); text-decoration:none; font-weight:600;
  font-size:.9rem; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.tabs a:hover{ color:var(--ink); }
.tabs a.on{ color:var(--accent); border-bottom-color:var(--accent); }
.me{ margin-left:auto; position:relative; }
.me > button{ display:flex; align-items:center; gap:9px; border-color:transparent; background:transparent; padding:6px 8px 6px 6px; min-height:40px; }
.me > button:hover{ background:var(--accent-soft); filter:none; }
.avatar{ width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--paper); display:grid; place-items:center;
  font-size:.74rem; font-weight:700; letter-spacing:.02em; flex:none; }
.me .who{ text-align:left; line-height:1.2; }
.me .who b{ display:block; font-size:.86rem; }
.me .who small{ color:var(--muted); font-size:.74rem; font-weight:500; text-transform:capitalize; }
.menu{ position:absolute; right:0; top:calc(100% + 6px); min-width:210px; background:var(--card); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); padding:6px; z-index:50; }
.menu button{ width:100%; text-align:left; border:0; background:transparent; min-height:40px; font-weight:500; }
.menu button:hover{ background:var(--accent-soft); filter:none; }
.menu hr{ border:0; border-top:1px solid var(--line); margin:6px 4px; }
.main{ max-width:1180px; margin:0 auto; padding:26px 20px 64px; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.page-head h1{ font-size:1.5rem; font-weight:700; letter-spacing:-.015em; margin:0; }
.page-head .sub{ color:var(--muted); font-size:.9rem; margin-top:3px; }
.page-head .acts{ display:flex; gap:8px; flex-wrap:wrap; }
.banner{ border-radius:10px; padding:11px 14px; font-size:.9rem; margin-bottom:16px; display:flex; gap:10px; align-items:center; }
.banner.bad{ background:var(--s-inf-bg); color:var(--s-inf); }
.banner.demo{ background:var(--s-des-bg); color:var(--s-des); }

.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.card-pad{ padding:18px 20px; }
.card h2, .h2{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 12px;
}

/* ---------- status chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 10px 3px 8px; font-size:.78rem; font-weight:600; white-space:nowrap; line-height:1.4; }
.chip::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.chip.s-design-request{ background:var(--s-sub-bg); color:var(--s-sub); }
.chip.s-revision-request{ background:var(--s-des-bg); color:var(--s-des); }
.chip.s-info-needed{ background:var(--s-inf-bg); color:var(--s-inf); }
.chip.s-completed{ background:var(--s-done-bg); color:var(--s-done); }
.tag{ display:inline-block; border-radius:5px; padding:1px 6px; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--stripe); color:var(--muted); border:1px solid var(--line); vertical-align:1px; }
.tag.demo{ background:var(--s-des-bg); color:var(--s-des); border-color:transparent; }
.tag.warn{ background:var(--s-inf-bg); color:var(--s-inf); border-color:transparent; }

/* ---------- jobs list ---------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.filters .search{ flex:1 1 240px; min-width:200px; }
.filters select{ width:auto; min-width:150px; flex:0 1 auto; }
.seg{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.seg button{ min-height:36px; padding:6px 12px; font-weight:600; font-size:.84rem; border-radius:999px; background:transparent; border-color:var(--line); color:var(--muted); }
.seg button .n{ font-weight:700; margin-left:4px; color:var(--ink); opacity:.7; }
.seg button.on{ background:var(--accent); border-color:var(--accent); color:var(--paper); }
.seg button.all{ margin-left:auto; }                       /* All sits at the far right */
/* a rep's Info Needed jobs are waiting on them */
table.list tbody tr.attn td{ background:var(--s-inf-bg); }
table.list tbody tr.attn td:first-child{ box-shadow:inset 3px 0 0 var(--warn); }
table.list tbody tr.attn:hover td{ background:color-mix(in srgb, var(--s-inf-bg) 88%, var(--warn)); }
.jobcard.attn{ background:var(--s-inf-bg); box-shadow:inset 3px 0 0 var(--warn); }
tr.attn .chip, .jobcard.attn .chip{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }   /* the chip shares the row's colour */
.seg button.on .n{ color:var(--paper); opacity:.85; }
table.list{ width:100%; border-collapse:separate; border-spacing:0; }
table.list th{ text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.list td{ padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.list tr:last-child td{ border-bottom:0; }
table.list tbody tr.click{ cursor:pointer; }
table.list tbody tr.click:hover td{ background:var(--stripe); }
.jobno{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cell-sub{ display:block; color:var(--muted); font-size:.8rem; margin-top:1px; }
.empty-state{ text-align:center; padding:44px 20px; color:var(--muted); }
.empty-state b{ display:block; color:var(--ink); font-size:1rem; margin-bottom:4px; }
.jobcards{ display:none; }
.jobcard{ display:block; padding:14px 16px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.jobcard:last-child{ border-bottom:0; }
.jobcard .l1{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:4px; }
.jobcard .l2{ font-weight:600; }
.jobcard .l3{ color:var(--muted); font-size:.84rem; }

/* ---------- job detail ---------- */
.back{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-weight:600; font-size:.88rem; margin-bottom:14px; }
.back:hover{ color:var(--accent); }
.job-head{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-start; margin-bottom:20px; }
.job-head .no{ font-size:.86rem; font-weight:700; color:var(--muted); letter-spacing:.02em; display:flex; gap:10px; align-items:center; }
.job-head h1{ font-size:1.55rem; font-weight:700; letter-spacing:-.015em; margin:4px 0 2px; }
.job-head .where{ color:var(--muted); font-size:.95rem; }
.detail{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; }
.detail > div{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.answers .sec{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin:18px 0 6px; padding-bottom:7px; border-bottom:1.5px solid var(--accent); }
.answers .sec:first-child{ margin-top:0; }
.arow{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 18px; padding:8px 10px; margin:0 -10px; border-radius:6px; font-size:.92rem; }
.arow:nth-child(even){ background:var(--stripe); }
.arow .v{ font-weight:600; }
.arow.d1 .k{ padding-left:18px; } .arow.d2 .k{ padding-left:36px; }
.arow.note.d1{ padding-left:28px; } .arow.note.d2{ padding-left:46px; }
.arow.d1 .k::before, .arow.d2 .k::before{ content:"– "; color:var(--muted); }
.arow.note{ grid-template-columns:1fr; color:var(--warn); font-weight:500; font-size:.88rem; }
.notes-box{ white-space:pre-wrap; font-size:.92rem; }
.actions h2{ margin-bottom:10px; }
.actions .btns{ display:flex; flex-direction:column; gap:8px; }
.actions .btns button{ width:100%; }
.actions .hint{ font-size:.82rem; color:var(--muted); margin:8px 0 0; }
.infobox{ border-left:3px solid var(--warn); background:var(--s-inf-bg); padding:12px 14px; border-radius:0 8px 8px 0; margin-bottom:14px; }
.infobox b{ display:block; color:var(--s-inf); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px; }
.infobox p{ margin:0; white-space:pre-wrap; }
.filelist{ list-style:none; margin:0; padding:0; }
.filelist li{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--line); }
.filelist li:last-child{ border-bottom:0; }
.fic{ width:34px; height:40px; border-radius:5px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center;
  font-size:.6rem; font-weight:800; letter-spacing:.04em; flex:none; }
.fic.design{ background:var(--s-done-bg); color:var(--s-done); }
.fic.info{ background:var(--s-des-bg); color:var(--s-des); }
.filelist .fn{ flex:1; min-width:0; }
.filelist .fn b{ display:block; font-weight:600; font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filelist .fn small{ color:var(--muted); font-size:.76rem; }
.filelist li.gone{ opacity:.6; }
.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline li{ position:relative; padding:0 0 16px 24px; }
.timeline li::before{ content:""; position:absolute; left:5px; top:18px; bottom:-2px; width:1.5px; background:var(--line); }
.timeline li:last-child{ padding-bottom:0; }
.timeline li:last-child::before{ display:none; }
.timeline .dot{ position:absolute; left:0; top:5px; width:12px; height:12px; border-radius:50%; border:2.5px solid var(--card); box-shadow:0 0 0 1.5px currentColor; background:currentColor; }
.timeline .t1{ font-weight:600; font-size:.88rem; }
.timeline .t2{ color:var(--muted); font-size:.78rem; }
.timeline .t3{ font-size:.86rem; margin-top:4px; white-space:pre-wrap; background:var(--stripe); border-radius:6px; padding:7px 9px; }
.c-design-request{ color:var(--s-sub); } .c-revision-request{ color:var(--s-des); } .c-info-needed{ color:var(--s-inf); } .c-completed{ color:var(--s-done); }

/* ---------- uploader ---------- */
.drop{
  border:1.5px dashed var(--edge); border-radius:10px; padding:20px 16px; text-align:center; cursor:pointer;
  background:var(--field); transition:border-color .12s, background-color .12s; position:relative;
}
.drop:hover, .drop.over{ border-color:var(--accent); background:var(--accent-soft); }
.drop .big{ font-weight:600; }
.drop .small{ color:var(--muted); font-size:.82rem; margin-top:2px; }
.drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.drop svg{ display:block; margin:0 auto 8px; color:var(--accent); }
.uplist{ list-style:none; margin:10px 0 0; padding:0; }
.uplist li{ display:flex; align-items:center; gap:10px; padding:8px 4px 8px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.uplist li:last-child{ border-bottom:0; }
.uplist .fn{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uplist .fic{ width:30px; height:34px; }
/* a PDF or picture's thumbnail opens it full screen; the badge says so */
.fic-open{ position:relative; min-height:0; padding:0; border:0; font-family:inherit; font-size:.6rem; font-weight:800; letter-spacing:.04em; cursor:pointer; }
.fic-open:hover:not(:disabled){ filter:none; background:var(--accent); color:var(--card); }
.fic-open svg{ position:absolute; right:-6px; bottom:-6px; width:16px; height:16px; padding:3px; border-radius:50%;
  background:var(--accent); color:var(--card); box-shadow:0 0 0 2px var(--paper); }
.uplist .sz{ color:var(--muted); font-size:.8rem; white-space:nowrap; min-width:52px; text-align:right; }
.uplist .x{ min-height:32px; padding:2px 10px; border:0; background:transparent; color:var(--muted); font-size:1.15rem; font-weight:400; }
.uplist .x:hover{ color:var(--warn); background:var(--stripe); filter:none; }
.bar-track{ height:6px; border-radius:6px; background:var(--stripe); overflow:hidden; }
.bar-fill{ height:100%; width:0; background:var(--accent); border-radius:6px; transition:width .2s; }

/* ---------- modal & toast ---------- */
.modal-bg{ position:fixed; inset:0; background:var(--overlay); z-index:100; display:grid; place-items:center; padding:16px; }
.modal{ width:100%; max-width:460px; background:var(--card); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.3); padding:24px; max-height:calc(100vh - 32px); overflow:auto; }
.modal h3{ margin:0 0 6px; font-size:1.15rem; letter-spacing:-.01em; }
.modal p.lede{ margin:0 0 16px; color:var(--muted); font-size:.9rem; }
.modal .field{ margin-bottom:14px; }
.modal .field label{ display:block; font-size:.84rem; font-weight:600; margin-bottom:6px; }
.modal .foot{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap; }
.toast{ position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:120;
  background:var(--ink); color:var(--paper); border-radius:10px; padding:11px 16px; font-size:.9rem; font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:min(560px, calc(100vw - 32px)); }
.toast.bad{ background:var(--warn); color:#fff; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .toast.bad{ color:#1A1F24; } }   /* dark text on the dark theme's light red */
:root[data-theme="dark"] .toast.bad{ color:#1A1F24; }
.sending{ text-align:center; padding:8px 4px; }
.sending .stage{ font-weight:600; margin:14px 0 10px; }
.sending .detail-line{ color:var(--muted); font-size:.84rem; margin-top:8px; min-height:1.3em; }
.done-mark{ width:58px; height:58px; border-radius:50%; background:var(--s-done-bg); color:var(--s-done); display:grid; place-items:center; margin:4px auto 12px; }
.spinner{ width:26px; height:26px; border:3px solid var(--accent-soft); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.linkcopy{ display:flex; gap:8px; margin-top:6px; }
.linkcopy input{ font-size:.82rem; min-height:40px; }

/* ---------- admin tables ---------- */
.inline-form{ display:grid; grid-template-columns:1.2fr 1.4fr 150px auto; gap:10px; align-items:end; }
.inline-form label{ display:block; font-size:.8rem; font-weight:600; margin-bottom:5px; color:var(--muted); }
.role-sel{ min-height:36px; padding:5px 30px 5px 10px; font-size:.86rem; width:auto; background-position:right 10px center; }
.acts-cell{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
/* the Users page: a row's text buttons stand in one column beside its bordered one, a tidy group at the right
   however many there are; the column is as wide as its widest button ("Resend confirm", 126 px), and there on
   every row, so the bordered buttons and the text ones line up down the page. On a phone they run on in the row. */
.acts-more{ display:contents; }
@media (min-width:761px){
  table.users .acts-cell{ flex-wrap:nowrap; align-items:center; }
  table.users .acts-more{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:8rem; }
}
.stack{ display:flex; flex-direction:column; gap:20px; }
tr.off td:not(:last-child){ opacity:.55; }                /* an inactive user: faded, but "Make active" stays clear */
.alias{ color:var(--muted); font-size:.78rem; display:block; margin-top:2px; }
.dot-status{ display:inline-flex; align-items:center; gap:7px; font-size:.86rem; white-space:nowrap; }
.dot-status::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.dot-status.ok::before{ background:var(--ok); } .dot-status.wait::before{ background:var(--s-des); } .dot-status.no::before{ background:var(--warn); }

/* ---------- analytics ---------- */
.kpis{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.kpi{ padding:16px 18px; }
.kpi .k{ font-size:.78rem; font-weight:600; color:var(--muted); }
.kpi .v{ font-size:1.9rem; font-weight:700; letter-spacing:-.02em; margin-top:2px; font-variant-numeric:tabular-nums; line-height:1.15; }
.kpi .v small{ font-size:.9rem; font-weight:600; color:var(--muted); margin-left:3px; letter-spacing:0; }
.kpi .d{ font-size:.8rem; color:var(--muted); margin-top:3px; }
.charts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.charts .wide{ grid-column:1 / -1; }
.chart-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.chart-head h2{ margin:0; }
.chart-head .note{ color:var(--muted); font-size:.8rem; margin-top:4px; }
.acts .period{ display:flex; align-items:center; gap:10px; }
.acts .period span{ font-size:.84rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.acts .period select{ width:auto; min-width:150px; }
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.8rem; color:var(--muted); margin:6px 0 4px; }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
svg.chart{ display:block; width:100%; height:auto; overflow:visible; }
svg.chart text{ font-family:inherit; fill:var(--muted); font-size:11px; }
svg.chart .gl{ stroke:var(--line); stroke-width:1; }
svg.chart .axis{ stroke:var(--edge); stroke-width:1; }
.hbars{ display:flex; flex-direction:column; gap:9px; }
.hbar{ display:grid; grid-template-columns:170px minmax(0,1fr) 64px; gap:10px; align-items:center; font-size:.86rem; }
.hbar .lab{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hbar .track{ height:14px; border-radius:4px; background:var(--stripe); overflow:hidden; }
.hbar .fill{ height:100%; border-radius:4px; background:var(--accent); }
.hbar .val{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.mix{ display:flex; height:30px; border-radius:6px; overflow:hidden; gap:2px; margin:8px 0 10px; }
.mix div{ display:grid; place-items:center; color:#fff; font-size:.78rem; font-weight:700; min-width:0; overflow:hidden; white-space:nowrap; }
.tip{ position:fixed; z-index:130; pointer-events:none; background:var(--ink); color:var(--paper); border-radius:8px; padding:7px 10px; font-size:.8rem; box-shadow:0 6px 20px rgba(0,0,0,.2); }
.tip b{ font-weight:700; }

/* ---------- the request form (carried over from the standalone form) ---------- */
.form-wrap{ max-width:880px; margin:0 auto; }
.form-wrap header .tick{ width:34px; height:3px; background:var(--accent); border-radius:2px; }
.form-wrap h1{ font-size:1.55rem; font-weight:700; letter-spacing:-.015em; margin:14px 0 5px; }
.lede{ color:var(--muted); font-size:.92rem; margin:0 0 4px; max-width:60ch; }
.stamp{ margin:12px 0 0; font-size:.86rem; color:var(--muted); display:flex; gap:18px; flex-wrap:wrap; }
.stamp span{ color:var(--ink); font-weight:600; }
.form-wrap h2{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:34px 0 0; padding-bottom:8px; border-bottom:1.5px solid var(--accent);
}
.row{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:10px 22px; align-items:center; padding:9px 10px; margin:0 -10px; border-radius:7px; }
.row.alt{ background:var(--stripe); }
.row.hidden{ display:none; }
.row.sub{ margin-left:18px; padding-left:24px; border-left:2px solid var(--edge); border-top-left-radius:0; border-bottom-left-radius:0; margin-top:-2px; }
.row.sub.sub2{ margin-left:40px; }
.row.note{ grid-template-columns:1fr; border-left-color:var(--warn); }
.note-text{ margin:0; color:var(--warn); font-size:.9rem; font-weight:500; line-height:1.45; }
.row.sub .lab::before{ content:"\21B3"; color:var(--muted); margin-right:8px; font-weight:400; }
.row .lab{ font-size:.95rem; }
.row .hint{ display:block; color:var(--muted); font-size:.78rem; margin-top:2px; }
.req{ color:var(--warn); font-weight:600; }
.row.full{ grid-template-columns:minmax(0,1fr); }          /* a long file name can't widen the page */
.combo{ position:relative; }
input.combo-in{ cursor:text; }
input.combo-in::placeholder{ color:var(--muted); opacity:1; }
.combo.open input.combo-in{ border-color:var(--accent); }
.combo-list{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; margin:0; padding:4px; list-style:none;
  background:var(--field); border:1px solid var(--edge); border-radius:8px;
  box-shadow:0 2px 6px rgba(16,24,32,.10), 0 14px 34px rgba(16,24,32,.24);
  max-height:min(288px, 46vh); overflow-y:auto; overscroll-behavior:contain;
}
.combo-list.more::after{ content:""; display:block; position:sticky; bottom:-4px; height:18px; margin-top:-18px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--field)); }
.combo-list li{ padding:9px 10px; border-radius:6px; cursor:pointer; line-height:1.3; display:flex; align-items:center; gap:8px; }
.combo-list li .nm{ flex:1 1 auto; min-width:0; }
.combo-list li .forget{ flex:none; min-height:0; margin:-6px -4px -6px 0; padding:4px 9px; border:0; border-radius:5px;
  background:transparent; color:var(--muted); font-size:1.1rem; font-weight:400; line-height:1; }
.combo-list li .forget:hover{ color:var(--warn); background:var(--stripe); filter:none; }
.combo-list li b{ font-weight:700; }
.combo-list li.active{ background:var(--accent-soft); }
@media (hover:hover){ .combo-list li:hover{ background:var(--accent-soft); } }
.combo-list li.new{ color:var(--muted); }
.combo-list li.new span{ color:var(--ink); font-weight:600; }
.combo-list li.new:not(:first-child){ margin-top:4px; border-top:1px solid var(--line); border-top-left-radius:0; border-top-right-radius:0; }
.combo-list li.msg{ color:var(--muted); cursor:default; }
.fbar{
  position:sticky; bottom:0; margin:26px -20px -64px; padding:12px 20px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-top:1px solid var(--line);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; z-index:20;
}
#status{ font-size:.84rem; color:var(--muted); margin-left:auto; }
#status.bad{ color:var(--warn); font-weight:600; }
#status.good{ color:var(--ok); font-weight:600; }
@media (min-width:701px){ .form-wrap{ padding-bottom:40px; } }

/* ---------- ticking jobs (admin) ---------- */
table.list th.ck, table.list td.ck{ width:46px; padding-right:0; cursor:pointer; }
.ck input, .jc-ck input{ width:18px; height:18px; margin:0; accent-color:var(--accent); cursor:pointer; vertical-align:middle; }
table.list tbody tr.sel td, table.list tbody tr.sel:hover td{ background:var(--accent-soft); }
.jobcard.pick{ display:flex; padding:0; }
.jobcard.pick .jc-ck{ display:flex; align-items:flex-start; padding:16px 4px 14px 16px; cursor:pointer; }
.jobcard.pick .jc-main{ flex:1; min-width:0; display:block; padding:14px 16px 14px 10px; text-decoration:none; color:inherit; }
.jobcard.sel{ background:var(--accent-soft); }
.main.has-batch{ padding-bottom:110px; }
.batchbar{
  position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:6px; padding:6px 6px 6px 16px; border-radius:12px; max-width:calc(100vw - 32px);
  background:var(--ink); color:var(--paper); box-shadow:0 12px 34px rgba(0,0,0,.28);
}
.batchbar .cnt{ font-size:.9rem; margin-right:6px; white-space:nowrap; }
.batchbar button{ min-height:40px; padding:8px 14px; border:0; background:transparent; color:inherit; font-size:.86rem; white-space:nowrap; }
.batchbar button:hover:not(:disabled){ background:color-mix(in srgb, var(--paper) 16%, transparent); filter:none; }
.batchbar .bb-del, .batchbar .bb-del:hover:not(:disabled){ background:var(--warn); color:#fff; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .batchbar .bb-del{ color:#1A1F24; } }
:root[data-theme="dark"] .batchbar .bb-del{ color:#1A1F24; }
body:has(.batchbar:not([hidden])) .toast{ bottom:calc(86px + env(safe-area-inset-bottom,0px)); }   /* clear of the selection bar */
.del-list{ list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:10px; max-height:240px; overflow:auto; }
.del-list li{ display:flex; gap:12px; align-items:baseline; padding:9px 12px; border-bottom:1px solid var(--line); font-size:.88rem; }
.del-list li:last-child{ border-bottom:0; }
.del-list .dl-where{ color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.del-list li.more{ color:var(--muted); font-style:italic; }

/* ---------- job page additions ---------- */
/* files: grouped, each name stacked with its earlier versions; the name opens the file */
.fgroup + .fgroup{ margin-top:14px; }
.fg-title{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 2px; }
.fname{ display:block; max-width:100%; min-height:0; padding:0; border:0; background:none; font:inherit; font-weight:600; font-size:.88rem;
  color:var(--ink); text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.fname:hover:not(:disabled){ color:var(--accent); text-decoration:underline; text-underline-offset:2px; filter:none; }
.ver{ display:inline-block; font-size:.68rem; font-weight:700; line-height:1.5; color:var(--accent); background:var(--accent-soft); border-radius:4px; padding:0 5px; }
.filelist li.older{ display:block; padding:0 0 6px 45px; }
.ver-toggle{ display:inline-flex; align-items:center; gap:4px; min-height:0; padding:3px 0; border:0; background:none; color:var(--accent);
  font-size:.8rem; font-weight:600; }
.ver-toggle:hover{ filter:none; text-decoration:underline; text-underline-offset:2px; }
.ver-toggle .chev{ transform:rotate(-90deg); transition:transform .15s; }
.ver-toggle.open .chev{ transform:none; }
.filelist.sub{ border-left:2px solid var(--line); padding-left:10px; margin-top:2px; }
.filelist.sub li{ padding:6px 0; }
.filelist.sub .fic{ width:28px; height:32px; }
.icon-btn{ width:36px; height:36px; min-height:0; padding:0; display:grid; place-items:center; flex:none;
  border:0; border-radius:8px; background:transparent; color:var(--accent); }
.icon-btn:hover:not(:disabled){ background:var(--accent-soft); filter:none; }
.filelist .icon-btn + .icon-btn{ margin-left:-4px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.card-head h2{ margin:0; }
.answers .card-head + .sec{ margin-top:2px; }
.danger-zone{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.danger-zone button{ width:100%; }
button.danger-text{ color:var(--warn); }
button.danger-text:hover:not(:disabled){ background:var(--s-inf-bg); }
.infobox p.mkline{ margin-top:6px; font-size:.84rem; font-weight:600; color:var(--s-inf); }
.infobox.rev{ border-left-color:var(--s-des); background:var(--s-des-bg); }
.infobox.rev b, .infobox.rev p.mkline{ color:var(--s-des); }
.mix2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 32px; }
@media (max-width:700px){ .mix2{ grid-template-columns:minmax(0,1fr); } }
.infobox button{ margin-top:12px; width:100%; }
/* revision requests: a dated summary, newest first; dismissed ones fold away */
.revs .rv-list{ list-style:none; margin:6px 0 0; padding:0; }
.revs .rv{ padding:10px 0; border-top:1px solid color-mix(in srgb, var(--s-des) 22%, transparent); }
.revs .rv:first-child{ border-top:0; padding-top:4px; }
.revs .rv.gone{ display:none; opacity:.6; }
.revs.show-set .rv.gone{ display:block; }
.revs .rv-head{ display:flex; align-items:center; gap:10px; }
.revs .rv-when{ font-weight:700; color:var(--ink); }
.revs .rv-who{ color:var(--muted); font-size:.86rem; }
.revs .rv-head button{ margin:0 0 0 auto; width:auto; min-height:30px; padding:4px 10px; color:var(--s-des); }
.revs .rv-head button:hover:not(:disabled){ background:color-mix(in srgb, var(--s-des) 12%, transparent); }
.revs .rv.gone .rv-when{ text-decoration:line-through; }
.revs .rv-note{ margin:4px 0 0; }
.revs .rv-chg{ margin:6px 0 0; padding-left:18px; font-size:.88rem; }
.revs .rv-chg .cl{ color:var(--muted); }
.revs .rv-chg .cl::after{ content:":"; }
.revs .rv-chg .from{ color:var(--muted); text-decoration:line-through; }
.revs .rv-chg .to{ font-weight:600; color:var(--ink); }
.revs .rv-gone, .revs .rv-none{ margin:4px 0 0; font-size:.82rem; color:var(--muted); font-style:italic; }
.revs .rv-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 2px; }
.revs .rv-thumb{ display:flex; flex-direction:column; gap:4px; width:164px; min-height:0; padding:5px; border:1px solid color-mix(in srgb, var(--s-des) 30%, transparent);
  border-radius:8px; background:var(--card); text-align:left; cursor:zoom-in; }
.revs .rv-thumb:hover:not(:disabled){ filter:none; border-color:var(--s-des); }
.revs .rv-img{ display:grid; place-items:center; height:88px; border-radius:5px; background:#fff; overflow:hidden; }
.revs .rv-img img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.revs .rv-img img:not([src]){ visibility:hidden; }
.revs .rv-thumb.nothumb .rv-img::after{ content:"No preview"; font-size:.72rem; color:#6B7682; }
.revs .rv-name{ font-size:.72rem; font-weight:600; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.revs .rv-more{ margin-top:6px; width:auto; font-size:.84rem; color:var(--s-des); }
.c-edit{ color:var(--accent); }
.timeline li.xp{ cursor:pointer; }
.timeline .hbody{ margin-top:8px; cursor:default; }
.timeline .hbody .changes + .hfiles{ margin-top:8px; }
.timeline .hfiles{ border:1px solid var(--line); border-radius:8px; padding:0 10px; }
.timeline .hfiles li{ padding:7px 0; }
.timeline .hfiles li::before{ display:none; }        /* the history's line is for the steps, not the files inside one */
.timeline .hfiles .fic{ width:28px; height:32px; }
.timeline .hbtn .hcount + .hcount{ margin-left:-2px; }
.timeline .hbtn{ display:flex; align-items:center; gap:8px; width:100%; min-height:0; padding:0; border:0; background:none;
  color:var(--ink); font-weight:600; font-size:.88rem; text-align:left; }
.timeline .hbtn:hover{ filter:none; }
.timeline .hcount{ font-size:.72rem; font-weight:700; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:1px 8px; white-space:nowrap; }
.timeline .chev{ margin-left:auto; color:var(--muted); transition:transform .15s; flex:none; }
.timeline li.open .chev{ transform:rotate(180deg); }
.timeline .changes{ border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:default; }
.chg{ padding:8px 10px; border-bottom:1px solid var(--line); font-size:.84rem; }
.chg:last-child{ border-bottom:0; }
.chg .cl{ color:var(--muted); font-size:.76rem; font-weight:600; margin-bottom:2px; }
.chg .cv{ overflow-wrap:anywhere; }                 /* inline, so a long value flows on with the arrow */
.chg .from{ color:var(--muted); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--warn) 70%, transparent); }
.chg .to{ font-weight:600; }
.chg .arr{ color:var(--muted); margin:0 6px; }
.chg .empty{ font-style:italic; font-weight:400; color:var(--muted); text-decoration:none; }
.timeline .t4{ font-size:.78rem; color:var(--muted); margin-top:4px; }
.timeline .t4 .bad{ color:var(--warn); font-weight:600; }
.timeline .mkreq b{ font-weight:600; }
/* the Process Flow page: the chart drawn in the page (js/flow.js), in the theme */
.flow-card{ padding:20px 18px 16px; }
.flow-chart{ max-width:720px; margin:0 auto; }
.flow-chart svg{ display:block; width:100%; height:auto; }
.flow-note{ margin:14px 0 0; text-align:center; font-size:.84rem; color:var(--muted); }
/* Confirm with Builder on the job: the builder's reply in the history, and tags on the request details */
.timeline li.c-builder{ color:var(--s-des); }
.timeline li.c-builder .t3{ color:var(--ink); }
.timeline li.c-builder .hbtn{ flex-wrap:wrap; row-gap:4px; }
.chg .bby, .chg .bsent{ display:block; font-size:.74rem; font-weight:500; color:var(--muted); margin-top:2px; }
.chg .bsent{ color:var(--warn); font-weight:600; }
.chg .bok{ display:inline-flex; align-items:center; gap:4px; margin-left:8px; font-size:.72rem; font-weight:700; color:var(--s-done); vertical-align:1px; }
.chg .bok svg{ width:12px; height:12px; }
.timeline .bnone{ margin:8px 0 0; font-size:.82rem; color:var(--muted); }
.hchecked{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:.8rem; font-weight:600; color:var(--s-done); }
.hchecked svg{ flex:none; }
.dtag{ display:inline-block; margin-left:8px; font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:4px;
  padding:1px 6px; background:var(--s-des-bg); color:var(--s-des); vertical-align:2px; white-space:nowrap; }
.dtag.ok{ background:var(--s-done-bg); color:var(--s-done); }
.bsaid{ display:block; margin-top:2px; font-size:.78rem; font-weight:600; color:var(--warn); }

/* ---------- asking for a markup (Info Needed) ---------- */
.mk-opt{ margin:2px 0 4px; }
.mk-opt:has(input:disabled){ opacity:.55; cursor:default; }
.mk-why{ font-size:.82rem; margin:2px 0 0 30px; }
.mk-pick{ margin-top:14px; }
.mk-thumb{ height:min(44vh, 360px); display:grid; place-items:center; position:relative; overflow:hidden;
  background:var(--stripe); border:1px solid var(--line); border-radius:10px; padding:10px; }
.mk-thumb canvas{ max-width:100%; max-height:100%; width:auto; height:auto; display:block; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.18); }
.mk-thumb-msg{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; color:var(--muted);
  font-size:.86rem; padding:16px; text-align:center; }
.mk-thumb-msg .bad{ color:var(--warn); font-weight:600; }
.mk-nav{ width:44px; min-height:38px; padding:0 0 3px; font-size:1.45rem; font-weight:500; line-height:1; flex:none; }
.mk-pageline{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; font-size:.88rem; color:var(--muted); }
.mk-pageline input{ width:74px; min-height:36px; padding:4px 8px; margin:0 4px; text-align:center; font:inherit; font-size:15px; color:var(--ink);
  background:var(--field); border:1px solid var(--edge); border-radius:8px; }
.mk-tip{ font-size:.82rem; margin:10px 0 0; text-align:center; }
.mk-preview img{ display:block; width:100%; max-height:40vh; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:8px; margin-bottom:14px; }

/* ---------- pictures, full screen ---------- */
.lightbox{ position:fixed; inset:0; z-index:140; background:#0F1215; display:flex; flex-direction:column; }
.lb-top{ display:flex; align-items:center; gap:10px; padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top,0px)); color:#EEF1F3; font-size:.9rem;
  background:#0B0E11; border-bottom:1px solid rgba(255,255,255,.08); }
.lb-top span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.lb-btn{ min-height:38px; padding:7px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.28); background:transparent; color:#EEF1F3;
  font-weight:600; font-size:.84rem; text-decoration:none; display:inline-flex; align-items:center; }
.lb-top .pv-zoom{ flex:none; }
/* the picture sits in a stage that pans and zooms (common.js lightbox) */
.lb-stage{ flex:1; min-height:0; position:relative; overflow:hidden; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.lb-stage.panning{ cursor:grabbing; }
.lb-stage img{ position:absolute; left:0; top:0; max-width:none; transform-origin:0 0; background:#fff; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.lb-stage > .spinner{ position:absolute; left:50%; top:50%; margin:-13px 0 0 -13px; }
.lb-stage > .msg{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); margin:0; }
.lb-hint{ position:absolute; left:50%; bottom:calc(14px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); pointer-events:none;
  background:rgba(0,0,0,.66); color:#fff; font-size:.8rem; padding:6px 11px; border-radius:8px; white-space:nowrap;
  animation:lb-hint 5s forwards; }
@keyframes lb-hint{ 0%, 70%{ opacity:1; } 100%{ opacity:0; } }
@media (max-width:760px){ .lb-top .lb-btn[href]{ display:none; } .lb-top{ gap:6px; } }

/* ---------- PDF viewer (dark around white pages, like the picture viewer) ---------- */
.pdfv{ position:fixed; inset:0; z-index:140; display:flex; flex-direction:column; background:#2A3036; color:#EEF1F3; }
.pv-top{ display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top,0px));
  background:#1D2226; border-bottom:1px solid rgba(255,255,255,.07); }
.pv-name{ flex:1 1 160px; min-width:0; font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-page{ font-size:.84rem; color:#A9B3BC; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pv-zoom{ display:inline-flex; align-items:center; gap:2px; padding:3px; background:rgba(255,255,255,.07); border-radius:10px; }
.pv-btn{ min-height:36px; padding:6px 12px; border:0; border-radius:8px; background:transparent; color:#DDE3E8; font-weight:600; font-size:.84rem;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.pv-btn:hover{ filter:none; background:rgba(255,255,255,.1); }
.pv-icon{ width:36px; padding:0; font-size:1.2rem; line-height:1; }
.pv-pct{ min-width:56px; font-variant-numeric:tabular-nums; }
.pv-dl{ border:1px solid rgba(255,255,255,.25); }
.pv-body{ flex:1; min-height:0; overflow:auto; position:relative; overscroll-behavior:contain;
  overflow-anchor:none; }                              /* pdfViewer keeps the reading spot itself as page sizes arrive (setSize) */
.pv-pages{ display:flex; flex-direction:column; gap:14px; padding:16px; width:max-content; min-width:100%; }
.pv-pg{ margin:0 auto; background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.45); position:relative; flex:none; }
.pv-pg canvas{ display:block; width:100%; height:100%; }
.pv-pg[data-err]::after{ content:attr(data-err); position:absolute; inset:0; display:grid; place-items:center; color:#A8442A; font-size:.9rem; }
.pv-status{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; color:#C9D1D8; font-size:.9rem; padding:24px; text-align:center; }
.pv-status .msg{ max-width:420px; margin:0; }
.pv-close{ order:1; }                                  /* the far right */
.pv-break{ display:none; }
.pv-body{ touch-action:pan-x pan-y; }                  /* one finger scrolls; a pinch zooms the pages (pdfViewer) */
@media (max-width:760px){
  .pv-name{ flex:1 1 0; }
  .pv-close{ order:0; }                                /* top right, on the name's line */
  .pv-break{ display:block; flex-basis:100%; height:0; }
}

/* ---------- the markup screen (always dark around a white page, like a photo editor) ---------- */
body.mk-open{ overflow:hidden; }
.mk{ position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; background:#2A3036; color:#EEF1F3; }
.mk-top{ display:flex; align-items:center; gap:10px; padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top,0px)); background:#1D2226; }
.mk-title{ min-width:0; line-height:1.25; }
.mk-title b{ display:block; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-title span{ display:block; font-size:.78rem; color:#A9B3BC; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-ask{ padding:9px 14px; background:#3B2B25; color:#F6D8CB; font-size:.88rem; line-height:1.4; max-height:4.8em; overflow:auto; white-space:pre-wrap; }
.mk-ask b{ color:#FFB79C; }
.mk-stage{ flex:1; min-height:0; position:relative; overflow:hidden; touch-action:none; cursor:crosshair; user-select:none; -webkit-user-select:none; }
.mk-stage.move, .mk-stage.panning{ cursor:grab; }
.mk-stage.panning{ cursor:grabbing; }
.mk-paper{ position:absolute; left:0; top:0; transform-origin:0 0; background:#fff; box-shadow:0 6px 30px rgba(0,0,0,.5); }
.mk-paper canvas{ position:absolute; left:0; top:0; width:100%; height:100%; }
#mkInk{ opacity:.45; }
.mk-status{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; color:#C9D1D8; font-size:.9rem;
  text-align:center; padding:24px; }
.mk-status .msg{ max-width:420px; margin:0; }
.mk-hint{ position:absolute; left:50%; top:14px; transform:translateX(-50%); max-width:calc(100% - 32px); text-align:center; pointer-events:none;
  background:rgba(0,0,0,.74); color:#fff; font-size:.84rem; padding:8px 12px; border-radius:8px; }
.mk-tools{ display:flex; align-items:center; justify-content:space-between; gap:8px 10px; flex-wrap:wrap; padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); background:#1D2226; }
.mk-group{ display:flex; gap:2px; align-items:center; padding:3px; background:rgba(255,255,255,.07); border-radius:10px; }
.mk-sw, .mk-sz, .mk-icon{ width:40px; height:40px; min-height:0; padding:0; border:2px solid transparent; border-radius:8px; background:transparent;
  display:grid; place-items:center; color:#DDE3E8; }
.mk-sw::after{ content:""; width:22px; height:22px; border-radius:50%; background:var(--sw); box-shadow:0 0 0 1px rgba(255,255,255,.25); }
.mk-sz i{ display:block; width:var(--d); height:var(--d); border-radius:50%; background:#DDE3E8; }
.mk-sw.on, .mk-sz.on{ border-color:#fff; }
.mk-icon[aria-pressed="true"]{ background:#EEF1F3; color:#1D2226; }
.mk-icon:disabled{ opacity:.35; cursor:default; }
.mk-sw:hover, .mk-sz:hover, .mk-icon:hover:not(:disabled){ filter:none; background-color:rgba(255,255,255,.1); }
.mk-icon[aria-pressed="true"]:hover{ background:#EEF1F3; }
.mk-send{ min-width:104px; margin-left:auto; background:#8FB6C7; border-color:#8FB6C7; color:#13171B; }
.mk-send:disabled{ opacity:.4; }

/* ---------- sorting the jobs list ---------- */
/* each header is a button; the arrow shows the order (up = ascending) */
table.list th.sortable{ padding:0; }
table.list th.sortable button{ display:inline-flex; align-items:center; gap:5px; width:100%; min-height:0; padding:12px 14px; border:0; border-radius:6px;
  background:none; font:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; text-align:inherit; }
table.list th.sortable.r button{ justify-content:flex-end; }
table.list th.sortable button:hover:not(:disabled){ color:var(--ink); filter:none; }
table.list th.sortable .sa{ flex:none; opacity:0; transition:opacity .12s, transform .15s; }
table.list th.sortable button:hover .sa, table.list th.sortable button:focus-visible .sa{ opacity:.5; }
table.list th.sortable.on{ color:var(--accent); }
table.list th.sortable.on .sa{ opacity:1; }
table.list th.sortable.desc .sa, table.list th.sortable.fd .sa{ transform:rotate(180deg); }
.sortbar{ display:none; align-items:center; gap:10px; margin:-2px 0 14px; }
.sortbar label{ font-size:.84rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.sortbar select{ flex:1; min-width:0; }

/* ---------- due dates ---------- */
td.due-c{ white-space:nowrap; }
.due-d{ display:inline-flex; align-items:center; gap:6px; font-weight:500; font-variant-numeric:tabular-nums; }
.late{ --due:var(--warn); } .soon{ --due:var(--s-des); }
.due-d.late, .due-d.soon, .due-r.late, .due-r.soon, .jc-due.late, .jc-due.soon{ color:var(--due); }
.due-r.late, .due-r.soon{ font-weight:600; }
svg.lock{ flex:none; color:var(--muted); }
.jobcard .l2{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.jobcard .jc-b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jc-due{ flex:none; display:inline-flex; align-items:center; gap:5px; font-size:.8rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.jc-due svg.lock{ align-self:center; }
.duecard .card-head{ margin-bottom:8px; }
.due-when b{ display:block; font-size:1.18rem; font-weight:700; letter-spacing:-.01em; }
.due-when span{ display:block; font-size:.86rem; color:var(--muted); margin-top:1px; }
.due-when span::first-letter{ text-transform:uppercase; }
.due-when.late span, .due-when.soon span{ color:var(--due); font-weight:600; }
.due-none{ margin:0; font-size:.9rem; }
.due-lock{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:.88rem; }
.due-locked{ display:flex; align-items:center; gap:7px; margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line); font-size:.84rem; color:var(--muted); }
.due-note{ font-size:.84rem; margin:0; }
.c-due{ color:var(--accent); }
.timeline .due-move{ display:flex; align-items:center; flex-wrap:wrap; gap:0 6px; }
.timeline .due-move .from{ color:var(--muted); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--warn) 70%, transparent); }
.timeline .due-move .arr{ color:var(--muted); }
.timeline .due-move b{ font-weight:600; color:var(--ink); }
.sending .sent-due{ margin-top:-12px; color:var(--ink); font-weight:600; }
/* what the rep gains by sending something (the "if it exists" rows) */
.row .perk{ display:flex; align-items:flex-start; gap:6px; color:var(--ok); font-size:.8rem; font-weight:500; line-height:1.4; margin-top:5px; }
.row .perk svg{ flex:none; margin-top:1px; }

/* ---------- forwarded emails, waiting to be filled in ---------- */
.inbox{ margin-bottom:16px; border-left:3px solid var(--accent); }
.inbox.bigq{ border-left-color:var(--s-des); }
.inbox.bigq .inbox-head, .inbox.bigq .inbox-head h2{ color:var(--s-des); }
.infobox.bigjob{ display:flex; align-items:center; gap:14px; }
.infobox.bigjob > div{ flex:1; min-width:0; }
.infobox.bigjob button{ margin-top:0; width:auto; flex:none; }
.inbox-head{ display:flex; align-items:center; gap:10px; padding:14px 18px 4px; color:var(--accent); }
.inbox-head svg{ width:18px; height:18px; flex:none; }
.inbox-head h2{ margin:0; }
.inbox-n{ margin-left:auto; font-size:.8rem; font-weight:600; color:var(--muted); }
.inbox-list{ list-style:none; margin:0; padding:0 8px 6px; }
.inbox-list li{ display:flex; align-items:center; gap:12px; padding:10px; }
.inbox-list li + li{ border-top:1px solid var(--line); }
.ib-main{ flex:1; min-width:0; }
.ib-main b{ display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ib-main span{ display:block; font-size:.82rem; color:var(--muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ib-acts{ display:flex; gap:6px; flex:none; }
.from-email{ display:inline-flex; align-items:center; gap:4px; flex:none; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:2px 7px; }
.from-email.fb{ color:var(--s-des); background:var(--s-des-bg); }
/* drafts: where each one is up to (the Drafts card), and the form saying it's saved */
em.dstate{ display:inline-flex; align-items:center; gap:5px; font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; border-radius:5px; padding:2px 7px; margin-bottom:5px; }
em.dstate svg{ width:12px; height:12px; flex:none; }
em.dstate.email{ background:var(--accent-soft); color:var(--accent); }
em.dstate.progress{ background:var(--stripe); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); }
em.dstate.wait{ background:var(--s-des-bg); color:var(--s-des); }
em.dstate.replied{ background:var(--s-done-bg); color:var(--s-done); }
.saved-line{ display:flex; align-items:center; gap:7px; margin:10px 0 0; font-size:.84rem; color:var(--muted); }
.saved-line svg{ color:var(--ok); flex:none; }
.saved-line.bad{ color:var(--warn); font-weight:600; }
/* the builder's usual answers (their past jobs), under each question left blank */
.usual{ display:flex; align-items:center; gap:4px 10px; flex-wrap:wrap; }
@media (min-width:701px){ .row .usual{ grid-column:2; } }
.usual .use{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 12px; border-radius:999px; font-size:.82rem; font-weight:600;
  border:1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent); background:var(--accent-soft); color:var(--accent); text-align:left; }
.usual .use:hover{ border-style:solid; filter:none; }
.usual .use svg{ width:14px; height:14px; flex:none; }
.usual small{ font-size:.78rem; color:var(--muted); }
.usual-note{ display:flex; gap:12px; align-items:flex-start; margin:6px 0 8px; padding:12px 14px; border-radius:10px; background:var(--accent-soft); border-left:3px solid var(--accent); }
.usual-note > svg{ flex:none; color:var(--accent); margin-top:2px; }
.usual-note b{ display:block; font-weight:600; }
.usual-note span{ display:block; font-size:.86rem; color:var(--muted); margin-top:2px; line-height:1.45; }
/* Confirm with Builder: the sheet, and the form saying the builder has it */
.c-sheet textarea{ min-height:120px; line-height:1.5; }
.c-sheet .hint{ display:block; color:var(--muted); font-size:.78rem; margin-top:5px; }
.c-sub{ font-size:.84rem; font-weight:600; margin:16px 0 6px; }
.c-list{ list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.c-list li{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; font-size:.9rem; }
.c-list li + li{ border-top:1px solid var(--line); }
.c-list input{ width:20px; height:20px; accent-color:var(--accent); margin:1px 0 0; flex:none; }
.c-list .q{ flex:1; min-width:0; }
.c-list .q b{ display:block; font-weight:600; }
.c-list .q span{ color:var(--muted); font-size:.84rem; }
.c-list li.off .q{ opacity:.55; }
.c-list li.ask{ background:var(--s-des-bg); }
.c-list .qm{ width:20px; height:20px; border-radius:50%; background:var(--s-des); color:var(--card); display:grid; place-items:center; font-size:.75rem; font-weight:700; flex:none; }
.c-src{ display:inline-block; min-height:0; margin-left:8px; padding:1px 7px; border-radius:4px; font-size:.64rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; background:var(--stripe); color:var(--muted); border:1px solid var(--line); vertical-align:1px; }
.c-src:hover{ color:var(--accent); border-color:var(--accent); filter:none; }
.confirm-box{ display:flex; gap:12px; align-items:flex-start; margin:18px 0 0; padding:12px 14px; border-radius:10px; background:var(--s-des-bg); border-left:3px solid var(--s-des); }
.confirm-box > svg{ flex:none; color:var(--s-des); margin-top:1px; }
.confirm-box > div{ flex:1; min-width:0; }
.confirm-box b{ display:block; font-weight:600; }
.confirm-box span{ display:block; font-size:.86rem; color:var(--muted); margin-top:2px; line-height:1.45; }
.confirm-box .linkbtn{ margin-top:6px; font-size:.84rem; font-weight:600; }
/* the builder's reply on the form: what they confirmed, changed and answered, ticked off by the rep */
.reply-box{ display:flex; gap:12px; align-items:flex-start; margin:18px 0 0; padding:12px 14px; border-radius:10px; background:var(--s-des-bg); border-left:3px solid var(--s-des); }
.reply-box > svg{ flex:none; color:var(--s-des); margin-top:1px; }
.reply-box > div{ flex:1; min-width:0; }
.reply-box b{ display:block; font-weight:600; }
.reply-box span{ display:block; font-size:.86rem; color:var(--muted); margin-top:2px; line-height:1.45; }
.reply-box .bnote{ margin:8px 0 0; padding:8px 11px; border-radius:8px; background:color-mix(in srgb, var(--card) 72%, transparent); font-size:.88rem; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.reply-box .bnote b{ font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--s-des); margin-bottom:2px; }
.reply-box.done{ background:var(--s-done-bg); border-left-color:var(--ok); }
.reply-box.done > svg, .reply-box.done .bnote b{ color:var(--s-done); }
.bprog{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:.8rem; font-weight:700; color:var(--s-des); white-space:nowrap; }
.bprog .bar{ flex:1; height:6px; border-radius:99px; background:color-mix(in srgb, var(--s-des) 18%, transparent); overflow:hidden; }
.bprog .bar i{ display:block; height:100%; background:var(--s-des); border-radius:99px; transition:width .25s; }
.reply-box.done .bprog{ color:var(--s-done); }
.reply-box.done .bprog .bar{ background:color-mix(in srgb, var(--ok) 18%, transparent); }
.reply-box.done .bprog .bar i{ background:var(--ok); }
.row.brow{ box-shadow:inset 3px 0 0 var(--s-des); }
.row.brow.bok{ box-shadow:inset 3px 0 0 var(--ok); }
.bline{ display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; }
@media (min-width:701px){ .row .bline{ grid-column:2; } }
.btag{ display:inline-flex; align-items:center; gap:5px; flex:none; font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-radius:5px; padding:2px 7px; background:var(--s-des-bg); color:var(--s-des); }
.btag.ok{ background:var(--s-done-bg); color:var(--s-done); }
.btag svg{ width:11px; height:11px; flex:none; }
.bwas{ font-size:.8rem; color:var(--muted); }
.bwas s{ text-decoration-color:color-mix(in srgb, var(--warn) 70%, transparent); }
.bwas b{ color:var(--ink); font-weight:600; }
.bchk{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:5px 13px; font-size:.82rem; font-weight:600;
  border-radius:999px; border:1.5px solid var(--edge); background:var(--field); color:var(--ink); white-space:nowrap; }
.bchk:hover{ filter:none; border-color:var(--accent); }
.bchk.on{ border-color:color-mix(in srgb, var(--ok) 55%, transparent); background:var(--s-done-bg); color:var(--s-done); }
.bchk svg{ width:13px; height:13px; flex:none; }
.reply-box .ball{ margin:10px 0 0; max-width:100%; white-space:normal; text-align:left; line-height:1.3; }
.reply-box .ball svg{ color:var(--ok); }
.uplist .bchk{ min-height:30px; padding:3px 11px; margin-left:0; font-size:.78rem; flex:none; }
.uplist span.bchk{ cursor:default; }
.uplist .fopen{ display:block; max-width:100%; min-height:0; padding:0; border:0; border-radius:0; background:none; font:inherit; color:inherit; text-align:left;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.uplist .fopen:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; filter:none; }
.send-lock{ display:flex; align-items:center; gap:8px; flex:1 1 100%; font-size:.84rem; font-weight:600; color:var(--s-des); }
.send-lock svg{ flex:none; }
#send.locked{ opacity:.55; }
#send.locked:hover{ filter:none; }
@keyframes bflash{ 30%{ background-color:var(--s-des-bg); } }
.row.flash, .uplist li.flash{ animation:bflash 1.3s ease; }
/* the builder's page (#a/<token>): their answers to check, questions, documents */
.bpage{ max-width:680px; margin:0 auto; padding:24px 16px 40px; }
.bpage .gate-logos{ margin-bottom:22px; }
.bpage .form-wrap h1{ margin-top:12px; }
.cb-site{ display:flex; gap:12px; align-items:flex-start; margin:16px 0 0; padding:12px 14px; border-radius:10px; background:var(--accent-soft); border-left:3px solid var(--accent); }
.cb-site > svg{ flex:none; color:var(--accent); margin-top:1px; }
.cb-site b{ display:block; font-weight:600; }
.cb-site span{ display:block; font-size:.86rem; color:var(--muted); margin-top:2px; }
.cb-note{ margin:14px 0 0; padding:13px 15px; border-radius:12px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); }
.cb-note p{ margin:0; font-size:.95rem; line-height:1.5; white-space:pre-wrap; }
.cb-note .who{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:.82rem; color:var(--muted); }
.cb-note .av{ width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--card); display:grid; place-items:center; font-size:.68rem; font-weight:700; flex:none; }
.cb-item{ padding:12px 12px 14px; margin:0 -12px; border-radius:8px; }
.cb-item.alt{ background:var(--stripe); }
.cb-item.missing{ box-shadow:inset 0 0 0 2px var(--warn); }
.cb-item .lab{ display:block; font-size:1rem; }
.cb-item .perk{ display:flex; align-items:flex-start; gap:6px; color:var(--ok); font-size:.8rem; font-weight:500; line-height:1.4; margin-top:5px; }
.cb-item .perk svg{ flex:none; margin-top:1px; }
.cb-val{ display:flex; align-items:baseline; gap:4px 10px; flex-wrap:wrap; margin-top:4px; }
.cb-val b{ font-size:1.1rem; font-weight:700; }
.cb-val small{ font-size:.8rem; color:var(--muted); }
.cb-seg{ display:flex; gap:8px; margin-top:10px; }
.cb-seg button{ flex:1; min-height:46px; border-radius:10px; border:1.5px solid var(--edge); background:var(--field); color:var(--ink); font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:7px; }
.cb-seg button.ok.on{ background:var(--s-done-bg); border-color:color-mix(in srgb, var(--ok) 55%, transparent); color:var(--s-done); }
.cb-seg button.chg.on{ background:var(--s-des-bg); border-color:color-mix(in srgb, var(--s-des) 55%, transparent); color:var(--s-des); }
.cb-change, .cb-q select, .cb-q input{ margin-top:10px; }
.cb-change{ display:grid; gap:8px; }
.cb-now{ font-size:.84rem; font-weight:600; color:var(--s-des); }
.cb-q{ display:grid; gap:0; }
.cb-q input[data-sub]:not([hidden]), .cb-change input[data-sub]:not([hidden]){ display:block; width:100%; }
.cb-doc .drop{ margin-top:10px; }
.cb-sent{ margin:8px 0 0; font-size:.84rem; color:var(--muted); }
.cb-none{ margin-top:10px; }
.cb-foot{ margin-top:24px; }
.cb-foot button{ width:100%; }
.cb-foot p{ font-size:.82rem; color:var(--muted); text-align:center; margin:10px 0 0; line-height:1.45; }
.cb-done{ text-align:center; }
.cb-done .gate-logos{ margin-bottom:26px; }
.cb-done .big-tick{ width:58px; height:58px; border-radius:50%; background:var(--s-done-bg); color:var(--s-done); display:grid; place-items:center; margin:0 auto 14px; }
.cb-done .big-tick svg{ width:28px; height:28px; }
.cb-done p.small{ font-size:.84rem; color:var(--muted); margin:14px 0 18px; line-height:1.45; }
/* a file going up as it's attached (a draft) */
.uplist li.up .up-pct{ color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }
.uplist li.fail .fn{ color:var(--warn); }
.uplist .up-err{ color:var(--warn); font-size:.8rem; font-weight:600; white-space:nowrap; }
.uplist .up-retry{ min-height:30px; padding:3px 11px; font-size:.8rem; flex:none; }
.from-mail{ display:flex; gap:12px; align-items:flex-start; margin:18px 0 0; padding:12px 14px; border-radius:10px; background:var(--accent-soft); border-left:3px solid var(--accent); }
.from-mail svg{ width:20px; height:20px; flex:none; color:var(--accent); margin-top:2px; }
.from-mail b{ display:block; font-weight:600; overflow-wrap:anywhere; }
.from-mail span{ display:block; font-size:.86rem; color:var(--muted); margin-top:2px; }
/* what the Hub left out of the email (types it doesn't take), under a hairline: never unsaid */
.from-mail .fm-out{ display:flex; gap:7px; align-items:flex-start; margin:9px 0 0; padding-top:8px; font-size:.86rem; font-weight:500; color:var(--warn);
  border-top:1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.from-mail .fm-out svg{ width:15px; height:15px; color:currentColor; margin-top:2px; }
.from-mail .fm-out span{ display:inline; margin:0; font-size:inherit; color:inherit; overflow-wrap:anywhere; }
/* ---------- the plans and the engineering: a box each, the other documents under (Clinton, 3 Oct 2026) ---------- */
.docs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 16px; margin-top:14px; }
.pbox{ display:flex; flex-direction:column; min-width:0; background:var(--card); border:1px solid var(--edge); border-radius:12px;
  container-type:inline-size; transition:border-color .12s, box-shadow .12s, background-color .12s; }
.pb-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.pb-ic{ width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex:none; background:var(--accent-soft); color:var(--accent); }
.pb-head b{ display:block; font-size:.95rem; font-weight:600; line-height:1.25; }
.pb-head small{ display:block; color:var(--muted); font-size:.78rem; margin-top:1px; }
.pb-body{ flex:1; display:flex; flex-direction:column; gap:8px; padding:10px; min-height:172px; }
.pb-empty{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center;
  padding:18px 12px; border:1.5px dashed var(--edge); border-radius:9px; background:var(--field); cursor:pointer; transition:border-color .12s, background-color .12s; }
.pb-empty:hover, .pbox.over .pb-empty{ border-color:var(--accent); background:var(--accent-soft); }
.pb-empty svg{ color:var(--accent); margin-bottom:6px; }
.pb-empty b{ font-weight:600; font-size:.92rem; }
.pb-empty small{ color:var(--muted); font-size:.8rem; }
.pb-empty input, .pb-more input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.pb-files{ display:flex; flex-direction:column; gap:8px; }
.pb-more{ position:relative; display:flex; align-items:center; justify-content:center; gap:6px; min-height:38px; margin-top:auto; border:1.5px dashed var(--edge);
  border-radius:8px; color:var(--accent); font-size:.84rem; font-weight:600; cursor:pointer; transition:border-color .12s, background-color .12s; }
.pb-more:hover{ border-color:var(--accent); background:var(--accent-soft); }
.pb-foot{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:0 12px 12px; }
/* an empty box's offer: the files already here that could go in it, one tap each */
.pb-pick{ display:flex; flex-direction:column; gap:6px; }
.pb-pick-h{ font-size:.78rem; font-weight:600; color:var(--muted); }
.pb-chip{ display:flex; align-items:center; gap:9px; width:100%; min-height:44px; padding:6px 10px 6px 6px; border:1px solid var(--line); border-radius:9px;
  background:var(--field); color:var(--ink); font-size:.84rem; font-weight:600; text-align:left; }
.pb-chip:hover:not(:disabled){ filter:none; border-color:var(--accent); background:var(--accent-soft); }
.pb-chip .fic{ width:28px; height:32px; }
.pb-chip-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pb-pick-more{ font-size:.76rem; color:var(--muted); }
.pb-foot:empty{ display:none; }
/* a file in a box: its first page, its name, the grip it's dragged by */
.pcard{ position:relative; display:flex; align-items:center; gap:12px; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--field);
  user-select:none; -webkit-user-select:none; }
.pcard.fail{ border-color:color-mix(in srgb, var(--warn) 55%, transparent); }
.pc-thumb{ position:relative; flex:none; width:104px; height:74px; min-height:0; padding:0; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); cursor:pointer; }
.pc-thumb:has(img){ background:#fff; }
span.pc-thumb{ cursor:default; }
button.pc-thumb:hover:not(:disabled){ filter:none; border-color:var(--accent); }
.pc-thumb img{ width:100%; height:100%; object-fit:contain; display:block; -webkit-user-drag:none; }
.pc-tile{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.68rem; font-weight:800; letter-spacing:.06em; }
.pc-tile.busy{ animation:pcpulse 1.2s ease-in-out infinite; }
@keyframes pcpulse{ 50%{ opacity:.4; } }
.pc-zoom{ position:absolute; right:5px; bottom:5px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--card); box-shadow:0 1px 4px rgba(0,0,0,.28); transition:transform .12s; }
.pc-zoom svg{ width:12px; height:12px; }
.pc-thumb:hover .pc-zoom{ transform:scale(1.12); }
.pc-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.pc-name{ font-weight:600; font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-sub{ display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; color:var(--muted); font-size:.78rem; }
.pc-acts{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; align-self:stretch; flex:none; }
.pcard .x{ min-height:32px; padding:2px 10px; border:0; background:transparent; color:var(--muted); font-size:1.15rem; font-weight:400; }
.pcard .x:hover{ color:var(--warn); background:var(--stripe); filter:none; }
.pcard .fopen{ display:block; max-width:100%; min-height:0; padding:0; border:0; border-radius:0; background:none; font:inherit; color:inherit; text-align:left;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.pcard .fopen:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; filter:none; }
.pcard .up-pct{ color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }
.pcard .up-err{ color:var(--warn); font-weight:600; white-space:nowrap; }
.pcard .up-retry, .pcard .bchk{ min-height:30px; padding:3px 11px; margin-left:0; font-size:.78rem; flex:none; }
.pcard span.bchk{ cursor:default; }
.pcard.flash{ animation:bflash 1.3s ease; }
/* a narrow box (two side by side on a phone): the page across the top, the grip and the cross over its corners */
@container (max-width:260px){
  .pcard{ flex-direction:column; align-items:stretch; gap:6px; padding:6px; }
  .pc-thumb{ width:100%; height:auto; aspect-ratio:1.414; }
  .pc-acts{ position:absolute; top:11px; left:11px; right:11px; flex-direction:row; align-self:auto; pointer-events:none; }
  .pcard .pc-acts > .grip, .pcard .pc-acts > .x{ pointer-events:auto; background:color-mix(in srgb, var(--card) 92%, transparent); box-shadow:0 1px 4px rgba(0,0,0,.22); border-radius:8px; }
  .pc-meta{ padding:0 2px 2px; }
  .pb-chip{ padding:7px 10px; }
  .pb-chip .fic{ display:none; }                      /* the name has its extension: it gets the room */
  .pb-chip-n{ white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow-wrap:break-word; line-height:1.25; font-size:.8rem; }
}
.docs .perk{ display:flex; align-items:flex-start; gap:6px; margin:0; color:var(--ok); font-size:.8rem; font-weight:500; line-height:1.4; }
.docs .perk svg{ flex:none; margin-top:1px; }
.pb-tick{ min-height:36px; padding:2px 2px 0; font-size:.9rem; }
.pb-note{ grid-column:1 / -1; }
.pb-note:not(:has(.row:not(.hidden))){ display:none; }
.pb-note .row.note{ margin:0; padding:10px 14px; border-left:3px solid var(--warn); border-radius:0 8px 8px 0; background:var(--s-inf-bg); }
.docs-other{ display:flex; align-items:baseline; gap:4px 12px; flex-wrap:wrap; margin:24px 0 2px; }
.docs-other > b{ font-size:.95rem; font-weight:600; }
.docs-other > span{ font-size:.84rem; color:var(--muted); }
.docs-other .sort-hint{ display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-weight:600; }
.docs-other .sort-hint svg{ width:15px; height:15px; flex:none; }
/* dragging a file between the boxes and the list */
.grip{ flex:none; display:grid; place-items:center; width:30px; min-height:34px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--muted);
  cursor:grab; touch-action:none; }
.grip:hover:not(:disabled){ color:var(--accent); background:var(--accent-soft); filter:none; }
@media (pointer:coarse){ .grip{ width:38px; min-height:42px; } }
.slotted .uplist li{ user-select:none; -webkit-user-select:none; }
.slotted .uplist li > .grip{ margin-left:-6px; }
.lifted{ opacity:.4; }
.drag-ghost{ position:fixed; left:0; top:0; z-index:200; pointer-events:none; display:flex; align-items:center; gap:9px; max-width:260px; margin:-30px 0 0 16px;
  padding:7px 14px 7px 7px; border-radius:10px; background:var(--card); color:var(--ink); border:1.5px solid var(--accent);
  box-shadow:0 12px 32px rgba(0,0,0,.3); font-size:.86rem; font-weight:600; }
.drag-ghost .fic{ width:28px; height:32px; }
.drag-ghost .dg-n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.filedrag, body.filedrag *{ cursor:grabbing !important; }
body.filedrag{ user-select:none; -webkit-user-select:none; }
body.filedrag [data-drop-slot]{ outline:2px dashed color-mix(in srgb, var(--accent) 50%, transparent); outline-offset:4px; border-radius:12px; }
body.filedrag [data-drop-slot].over{ outline:2px solid var(--accent); }
.pbox.over{ border-color:var(--accent); background:var(--accent-soft); }
/* tapping a grip: where to */
.mv-menu{ position:absolute; z-index:150; min-width:230px; padding:6px; background:var(--card); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 2px 6px rgba(16,24,32,.10), 0 14px 36px rgba(16,24,32,.24); }
.mv-h{ padding:6px 10px 4px; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.mv-menu button{ display:flex; align-items:center; gap:11px; width:100%; min-height:44px; padding:8px 10px; border:0; background:transparent; text-align:left; font-weight:600; }
.mv-menu button:hover:not(:disabled), .mv-menu button:focus-visible{ background:var(--accent-soft); filter:none; box-shadow:none; }
.mv-menu .mv-ic{ width:28px; height:28px; border-radius:7px; display:grid; place-items:center; flex:none; background:var(--accent-soft); color:var(--accent); }
.mv-menu .mv-ic svg{ width:16px; height:16px; }

/* ---------- phones ---------- */
@media (max-width:900px){
  .detail{ grid-template-columns:1fr; }
  .detail > div.side{ order:-1; }
  .kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .charts{ grid-template-columns:minmax(0,1fr); }
  .inline-form{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .top-in{ height:auto; flex-wrap:wrap; padding:10px 16px 0; gap:8px 12px; }
  .brand .brand-label{ display:none; }
  .me .who{ display:none; }
  .tabs{ order:3; width:calc(100% + 32px); margin:0 -16px; padding:0 10px; overflow-x:auto; scrollbar-width:none; height:44px; }
  .tabs::-webkit-scrollbar{ display:none; }
  .main{ padding:20px 16px 48px; }
  .page-head h1{ font-size:1.3rem; }
  table.jobs{ display:none; }
  .jobcards{ display:block; }
  .sortbar{ display:flex; }
  .inbox-list li{ flex-wrap:wrap; }
  .from-email .fe-t{ display:none; }               /* just the envelope: the name gets the room */
  .from-email{ padding:4px 6px; }
  .ib-acts{ width:100%; }
  .ib-acts .primary{ flex:1; }
  .ib-acts button{ white-space:nowrap; padding-left:10px; padding-right:10px; }   /* an email's three (Quick Estimate First, Fill in Request, Discard) on one line */
  .filters select{ flex:1 1 140px; }
  .hbars{ gap:12px; }
  .hbar{ grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; }
  .hbar .track{ grid-column:1 / -1; grid-row:2; }
  .inline-form{ grid-template-columns:1fr; }
  table.adm thead{ display:none; }
  table.adm, table.adm tbody, table.adm tr, table.adm td{ display:block; width:100%; }
  table.adm tr{ border-bottom:1px solid var(--line); padding:10px 0; }
  table.adm td{ border:0; padding:4px 14px; }
  table.adm td[data-l]{ display:flex; align-items:center; gap:10px; }
  table.adm td[data-l]::before{ content:attr(data-l); width:78px; flex:none; font-size:.76rem; font-weight:600; color:var(--muted); }
  .acts-cell{ justify-content:flex-start; }
  .mfa-req .gate-ic{ display:none; }                 /* its words get the room */
}
@media (max-width:700px){
  .row{ grid-template-columns:minmax(0,1fr); gap:7px; align-items:start; padding:12px 12px 14px; margin:0 -12px; }
  .row .lab{ font-size:1rem; }
  .form-wrap h1{ font-size:1.32rem; }
  .form-wrap h2{ margin-top:28px; }
  .fbar{ position:static; margin:24px -16px -48px; padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
         backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--stripe); }
  .fbar button{ flex:1 1 100%; }
  .combo-list li{ padding:12px; }
  .combo-list li .forget{ padding:9px 13px; margin:-12px -8px -12px 0; }
  #status{ margin-left:0; width:100%; text-align:center; }
  .arow{ grid-template-columns:1fr; gap:1px; }
  .kpi .v{ font-size:1.55rem; }
  .docs{ gap:8px 10px; }
  .pb-ic{ display:none; }
  .pb-head{ padding:10px 11px; }
  .pb-head b{ font-size:.9rem; }
  .pb-body{ padding:7px; min-height:150px; }
  .pb-empty{ padding:14px 8px; }
  .pb-empty b{ font-size:.86rem; }
  .pb-tick{ font-size:.86rem; align-items:flex-start; }
  .pb-tick input{ margin-top:1px; }
  .docs .perk{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .batchbar{ left:16px; right:16px; transform:none; flex-wrap:wrap; justify-content:space-between; padding:8px; }
  .batchbar .cnt{ flex-basis:100%; margin:0 0 2px 8px; }
  .batchbar button{ flex:1 1 auto; padding:8px 10px; }
  .main.has-batch{ padding-bottom:150px; }
  body:has(.batchbar:not([hidden])) .toast{ bottom:calc(122px + env(safe-area-inset-bottom,0px)); }
  .mk-tools{ padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px)); }
  .mk-sw, .mk-sz, .mk-icon{ width:38px; height:38px; }
  .mk-send{ min-width:0; flex:1 1 130px; }            /* shares the second row with undo / move / fit */
  .mk-thumb{ height:min(32vh, 260px); }
}
@media print{
  .top, .fbar, .combo-list, .actions{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ---------- the rep's own markups ---------- */
.mk-addrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.mk-add{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:8px 14px; color:var(--accent); border-color:var(--accent);
  background:var(--accent-soft); }
.mk-add svg{ width:18px; height:18px; }
.mk-addhint{ font-size:.84rem; color:var(--muted); }
.mk-files{ display:flex; flex-direction:column; gap:6px; margin:4px 0 2px; }
.mk-file{ display:flex; align-items:center; gap:11px; width:100%; min-height:52px; padding:8px 12px; text-align:left; font-weight:600; }
.mk-file:hover:not(:disabled){ filter:none; border-color:var(--accent); background:var(--accent-soft); }
.mk-file .mf-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.mk-file small{ display:block; font-weight:500; color:var(--muted); font-size:.76rem; }
/* picking the page: one page at a time, full screen, like the Design Tool's first plan */
.mc-stage{ cursor:default; }
.mc-stage canvas{ position:absolute; inset:0; margin:auto; max-width:calc(100% - 28px); max-height:calc(100% - 28px); background:#fff; box-shadow:0 6px 30px rgba(0,0,0,.5); }
.mc-tools{ justify-content:center; }
.mc-tools .mk-send{ margin-left:0; }
.mc-page{ min-width:110px; text-align:center; font-size:.9rem; font-variant-numeric:tabular-nums; }
.mc-nav{ font-size:1.5rem; line-height:1; }
.btns .dl-design{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* importing the completed-jobs archive */
.arc-prog{ margin:2px 0 8px; }
.arc-prog .stage{ font-weight:600; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arc-prog .detail-line{ font-size:.84rem; margin-top:6px; }

/* ---------- Quick Estimate (Clinton, 20 Oct 2026): a job's optional first step ---------- */
/* its status: violet, apart from the four request statuses' blue, amber, red and green */
:root{ --s-est-bg:#EEEAF7; --s-est:#5B4A99; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --s-est-bg:#26203A; --s-est:#B9ADEB; } }
:root[data-theme="dark"]{ --s-est-bg:#26203A; --s-est:#B9ADEB; }
.chip.s-quick-estimate{ background:var(--s-est-bg); color:var(--s-est); }
.c-quick-estimate{ color:var(--s-est); }
em.dstate.est{ background:var(--s-est-bg); color:var(--s-est); }
.timeline .qe-sum{ font-weight:600; color:var(--ink); }
table.qe-mini{ width:100%; border-collapse:separate; border-spacing:0; font-size:.82rem; color:var(--ink); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
table.qe-mini td{ padding:6px 10px; border-bottom:1px solid var(--line); }
table.qe-mini tr:last-child td{ border-bottom:0; }
table.qe-mini td:first-child{ font-weight:600; white-space:nowrap; }
table.qe-mini td.num{ text-align:right; font-weight:700; }
table.qe-mini tr.m3 td{ border-bottom:0; background:var(--accent-soft); color:var(--accent); font-weight:700; }
.timeline .hbody .changes + table.qe-mini{ margin-top:8px; }

/* New Request: the two ways to start, the estimate first */
.choose{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; max-width:880px; }
.choice{ display:flex; flex-direction:column; gap:8px; padding:22px 22px 20px; border-radius:14px; text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); transition:border-color .12s, transform .12s, box-shadow .12s; }
.choice:hover{ border-color:var(--edge); transform:translateY(-1px); }
.choice.main{ border:1.5px solid var(--s-est); background:linear-gradient(180deg, var(--s-est-bg), var(--card) 70%); }
.choice.main:hover{ box-shadow:0 0 0 3px color-mix(in srgb, var(--s-est) 18%, transparent), var(--shadow); }
.choice .ch-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.choice .ch-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); flex:none; }
.choice.main .ch-ic{ background:var(--s-est); color:var(--card); }
.choice .ch-ic svg{ width:24px; height:24px; }
.choice .ch-badge{ font-size:.72rem; font-weight:700; letter-spacing:.04em; border-radius:999px; padding:4px 10px; background:var(--card); color:var(--s-est);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--s-est) 35%, transparent); white-space:nowrap; }
.choice b{ font-size:1.15rem; letter-spacing:-.01em; }
.choice .ch-say{ color:var(--muted); font-size:.9rem; line-height:1.5; flex:1; }
.choice .ch-go{ display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-weight:700; font-size:.9rem; color:var(--accent); }
.choice.main .ch-go{ color:var(--s-est); }
.choice .ch-go svg{ transition:transform .15s; }
.choice:hover .ch-go svg{ transform:translateX(3px); }
.choose-note{ margin:16px 2px 0; font-size:.86rem; color:var(--muted); }
/* the request form for an estimate: its banner in the estimate's colour */
.from-mail.from-est{ background:var(--s-est-bg); border-left-color:var(--s-est); }
.from-mail.from-est > svg{ color:var(--s-est); }
.from-mail.qe-mail{ margin:0 0 18px; }

/* making or changing one: the job and the calculator beside the estimate, stacked on a phone */
.qe{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.qe-in{ padding-bottom:14px; }
.qe-in .row{ grid-template-columns:minmax(0,1fr) minmax(0,230px); }
.qe-in h2.qe-h2b{ margin-top:22px; }
.qe-f{ min-width:0; }
.qe-err{ margin:6px 0 0; color:var(--warn); font-size:.8rem; font-weight:600; line-height:1.35; }
.qe-err.qe-total{ margin:8px 0 0; padding:9px 12px; border-radius:8px; background:var(--s-inf-bg); color:var(--s-inf); }
.qe-pick, .qe-blank{ margin:4px 0 2px; color:var(--muted); font-size:.84rem; }
.qe-blank{ margin-top:10px; }
.qe-out{ padding:20px 22px; position:sticky; top:76px; }
.qe-out.wait{ border-style:dashed; box-shadow:none; background:transparent; }
.qe-wait{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:46px 18px; color:var(--muted); }
.qe-wait svg{ width:34px; height:34px; color:var(--s-est); margin-bottom:6px; }
.qe-wait b{ color:var(--ink); font-size:1rem; }
.qe-wait span{ font-size:.88rem; max-width:34ch; }
.qe-top{ display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; margin-bottom:14px; }
.qe-top h2{ margin:0; }
.qe-only{ display:inline-flex; align-items:center; border-radius:999px; padding:3px 11px; font-size:.76rem; font-weight:600;
  background:var(--s-des-bg); color:var(--s-des); }
.qe-facts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.qe-facts > div{ background:var(--stripe); border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-width:0; }
.qe-facts span{ display:block; font-size:.74rem; font-weight:600; color:var(--muted); }
.qe-facts b{ display:block; font-size:1.2rem; font-weight:700; letter-spacing:-.01em; margin-top:1px; white-space:nowrap; }
.qe-facts b small{ font-size:.72em; font-weight:600; color:var(--muted); margin-left:3px; letter-spacing:0; }
.qe-facts em{ font-style:normal; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-left:6px; vertical-align:2px; }
.qe-split{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:10px 2px 6px; font-size:.84rem; color:var(--muted); }
.qe-split:empty{ display:none; }
.qe-split b{ color:var(--ink); font-weight:600; margin-left:3px; }
table.qe-table{ margin-top:6px; }
table.qe-table th{ padding:10px 12px; }
table.qe-table th.r, table.qe-table td.r{ text-align:right; }
table.qe-table td{ padding:11px 12px; }
table.qe-table td.code{ font-weight:600; white-space:nowrap; }
table.qe-table td.qty{ font-weight:700; font-size:1.05rem; }
.qe-concrete{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px; padding:14px 16px;
  border-radius:10px; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.qe-concrete .k{ display:block; font-weight:700; color:var(--accent); font-size:.95rem; }
.qe-concrete sup{ font-size:.7em; margin-left:1px; }
.qe-concrete .foot{ display:block; font-size:.78rem; color:var(--muted); margin-top:2px; }
.qe-concrete .v{ font-size:1.9rem; font-weight:700; letter-spacing:-.02em; line-height:1.1; white-space:nowrap; }
.qe-concrete .v small{ font-size:.95rem; font-weight:600; color:var(--muted); margin-left:4px; letter-spacing:0; }
.qe-note{ margin:10px 2px 0; font-size:.8rem; color:var(--muted); }
.qe-acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.qe-acts button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.qe-acts button{ white-space:nowrap; }
.qe-who{ text-align:right; font-size:.88rem; }
@media (max-width:640px){ .qe-who{ text-align:left; flex-basis:100%; } }
.qe-print-head{ display:none; }
/* the estimate's job page: the estimate where a request's details go, what's next beside it */
.detail .qe-out{ position:static; }
@media (max-width:900px){ .qe-detail > div.side{ order:0; } }   /* on a phone the estimate comes first, then what's next */
.qe-next .qe-next-say{ margin:0 0 12px; font-size:.92rem; }
@media (max-width:900px){
  .qe{ grid-template-columns:minmax(0,1fr); }
  .qe-out{ position:static; }
}
@media (max-width:700px){
  .choose{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .choice{ padding:18px 16px 16px; }
  .choice .ch-ic{ width:40px; height:40px; }
  .qe-in .row{ grid-template-columns:minmax(0,1fr); }
  .qe-out{ padding:16px 14px; }
  .qe-wait{ padding:30px 12px; }
  .qe-facts{ grid-template-columns:auto auto minmax(0,1fr); gap:8px; }
  .qe-facts > div{ padding:8px 10px; }
  .qe-facts b{ font-size:1.02rem; }
  table.qe-table th, table.qe-table td{ padding-left:8px; padding-right:8px; }
  .qe-concrete .v{ font-size:1.6rem; }
  .qe-acts button{ flex:1 1 140px; }
}
/* printed (Print / Save PDF): just the estimate, on white, with the logos and the job, whatever the theme on screen
   (:not(#qe) outranks the dark theme's own :root rules) */
@media print{
  :root:not(#qe){
    --paper:#fff; --ink:#16202A; --muted:#5B6672; --line:#D9D4CC; --field:#fff; --edge:#C3C9CF; --accent:#2E4A5A; --accent-soft:#EBF1F4;
    --stripe:#F5F3EF; --card:#fff; --s-des-bg:#FBF0D9; --s-des:#8A5A0B; color-scheme:light;
  }
  body:has(.qe-print) .main :not(.qe-print, .qe-print *, :has(.qe-print)), body:has(.qe-print) .toast{ display:none !important; }
  body:has(.qe-print) .main{ padding:0; max-width:none; }
  body:has(.qe-print) .detail{ display:block; }
  .qe-print{ position:static; border:0; box-shadow:none; padding:0; }
  .qe-print .qe-acts{ display:none; }
  .qe-print-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:14px; margin-bottom:18px; border-bottom:2px solid var(--accent); }
  .qe-print-head b{ display:block; font-size:1.4rem; letter-spacing:-.01em; }
  .qe-print-head span{ display:block; font-size:.85rem; color:var(--muted); margin-top:2px; }
  .qe-logos{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
  .qe-logos img{ display:block; height:auto; }
  .qe-logos img:first-child{ width:30mm; }
  .qe-logos img:last-child{ width:44mm; }
  .qe-only, .qe-facts > div, .qe-concrete{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  table.qe-table tr{ break-inside:avoid; }
}

/* ---------- Quick Estimate, round 2 (Clinton, 20 Oct 2026): autosave, Send to Builder, the builder from the email ---------- */
/* "Auto saved": a quiet, neutral dark green, readable on the dark theme too */
:root{ --saved:#3D6B55; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --saved:#8DBFA5; } }
:root[data-theme="dark"]{ --saved:#8DBFA5; }
.qe-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.qe-head h2{ margin:0; }
.qe-saved{ font-size:.78rem; font-weight:600; color:var(--muted); text-align:right; min-height:1em; }
.qe-saved.saving{ color:var(--muted); }
.qe-saved.saved{ color:var(--saved); }
.qe-saved.saved::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:6px; vertical-align:2px; }
.qe-saved.bad{ color:var(--warn); font-weight:500; max-width:70%; }
.fbar #qeSend{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
/* what Send to Builder did, and the copy on the job */
.qs-keep{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:4px 0 0; padding:10px 12px; border-radius:8px; background:var(--stripe); font-size:.86rem; color:var(--muted); }
.qs-keep.ok{ color:var(--saved); background:color-mix(in srgb, var(--saved) 10%, transparent); font-weight:600; }
.qs-keep.ok svg{ width:15px; height:15px; flex:none; }
.qs-keep.bad{ color:var(--warn); background:var(--s-inf-bg); }
.qs-keep > span:not(.spinner){ flex:1 1 12rem; min-width:0; }
.qs-keep button{ margin-left:auto; }
.spinner.sm{ width:15px; height:15px; border-width:2px; margin:0; flex:none; }
.fic.qty{ background:var(--s-est-bg); color:var(--s-est); }
/* the builder worked out from a forwarded email's address */
.from-domain{ display:flex; align-items:center; gap:9px; margin:2px 0 6px; padding:8px 12px; border-radius:8px; background:var(--accent-soft); color:var(--muted); font-size:.85rem; }
.from-domain svg{ width:15px; height:15px; flex:none; color:var(--accent); }
.from-domain b{ color:var(--ink); font-weight:600; }
@media (max-width:700px){
  .qe-saved.bad{ max-width:60%; }
}
/* an answer carried over from the Quick Estimate into its design request: quiet, in the estimate's violet */
.row .est-carried{ display:flex; align-items:center; gap:6px; font-size:.76rem; font-weight:500; color:var(--s-est); margin-top:-3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.row .est-carried svg{ width:13px; height:13px; flex:none; opacity:.85; }
.row .est-carried span{ overflow:hidden; text-overflow:ellipsis; }
@media (min-width:701px){ .row .est-carried{ grid-column:2; } }
/* The site address in parts (Clinton, 21 Oct 2026: as the NuPod Estimate Tool takes it): the group's heading, the
   state and postcode under the suburb, what's still needed under its row, how it reads, and an old job's free text */
.addr-head{ display:flex; align-items:center; gap:8px; margin:12px 0 2px; padding-top:12px; border-top:1px solid var(--line); color:var(--accent); }
.addr-head svg{ flex:none; }
.addr-head span{ font-size:.76rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.addr-head small{ margin-left:auto; font-size:.76rem; color:var(--muted); text-align:right; }
.row .addr-sp{ margin:-1px 0 0; display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--muted); }
.row .addr-sp[hidden]{ display:none; }
.row .addr-sp b{ font-weight:600; font-size:.82rem; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.03em; padding:1px 9px; border-radius:999px; background:var(--accent-soft); }
.row .addr-why{ margin:-1px 0 0; font-size:.8rem; font-weight:500; color:var(--warn); line-height:1.4; }
@media (min-width:701px){ .row .addr-sp, .row .addr-why{ grid-column:2; } }
.addr-reads{ display:flex; gap:10px; align-items:flex-start; margin:8px 0 4px; padding:10px 14px; border-radius:10px; background:var(--stripe); border:1px dashed var(--edge); color:var(--muted); }
.addr-reads svg{ flex:none; margin-top:2px; }
.addr-reads > div{ min-width:0; }
.addr-reads b{ display:block; font-weight:600; color:var(--muted); overflow-wrap:anywhere; }
.addr-reads small{ display:block; font-size:.76rem; margin-top:2px; }
.addr-reads.done{ background:var(--accent-soft); border:1px solid transparent; border-left:3px solid var(--accent); }
.addr-reads.done svg{ color:var(--accent); }
.addr-reads.done b{ color:var(--ink); }
.addr-was{ display:flex; align-items:center; gap:9px; margin:4px 0 6px; padding:8px 12px; border-radius:8px; background:color-mix(in srgb, var(--warn) 9%, transparent); color:var(--muted); font-size:.85rem; }
.addr-was svg{ flex:none; color:var(--warn); }
.addr-was b{ color:var(--ink); font-weight:600; }
.combo-list li .sub{ flex:none; margin-left:auto; font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.combo-list li.none{ color:var(--muted); }
select optgroup{ font-weight:600; color:var(--muted); }
select optgroup option{ color:var(--ink); font-weight:400; }
/* How a job ends without a design (Clinton, 21 Oct 2026): No Design Needed, a calm green-teal apart from Completed's
   green, and Not Proceeding, a muted grey. Their chips, history dots, the box on an ended job, and the dialog. */
:root{ --s-ndn-bg:#DCEFEC; --s-ndn:#1D6B66; --s-np-bg:#ECEAE6; --s-np:#5D6670; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --s-ndn-bg:#13292A; --s-ndn:#7FCDC5; --s-np-bg:#24282C; --s-np:#A9B2BB; } }
:root[data-theme="dark"]{ --s-ndn-bg:#13292A; --s-ndn:#7FCDC5; --s-np-bg:#24282C; --s-np:#A9B2BB; }
.chip.s-no-design-needed{ background:var(--s-ndn-bg); color:var(--s-ndn); }
.chip.s-not-proceeding{ background:var(--s-np-bg); color:var(--s-np); }
.c-no-design-needed{ color:var(--s-ndn); } .c-not-proceeding{ color:var(--s-np); }
.infobox.outcome{ background:var(--s-np-bg); border-left-color:var(--s-np); }
.infobox.outcome.ndn{ background:var(--s-ndn-bg); border-left-color:var(--s-ndn); }
.infobox.outcome b{ color:var(--s-np); }
.infobox.outcome.ndn b{ color:var(--s-ndn); }
.infobox.outcome .oc-row{ display:flex; align-items:flex-start; gap:14px; }
.infobox.outcome .oc-main{ flex:1; min-width:0; }
.infobox.outcome .oc-note{ margin-top:6px; font-style:italic; }
.infobox.outcome .oc-who{ margin-top:6px; font-size:.8rem; color:var(--muted); }
.infobox.outcome .oc-row button{ margin-top:0; width:auto; flex:none; }
.infobox.outcome .oc-flag{ display:flex; gap:8px; align-items:flex-start; margin-top:10px; padding:9px 11px; border-radius:7px;
  background:var(--s-inf-bg); color:var(--warn); font-weight:600; font-size:.86rem; white-space:normal; }
.infobox.outcome .oc-row + .oc-flag{ margin-top:12px; }
.infobox.outcome > .oc-flag:first-child{ margin-top:0; }
.oc-flag svg{ flex:none; margin-top:2px; }
/* the quiet way out, under a job's actions */
.end-zone{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.end-zone button{ width:100%; color:var(--muted); }
.end-zone button:hover:not(:disabled){ color:var(--ink); }
.end-zone.two{ display:grid; grid-template-columns:1fr; gap:6px; }
/* the reasons, as tappable pills */
.flabel{ display:block; font-size:.84rem; font-weight:600; margin-bottom:6px; }
.field .opt{ font-weight:500; color:var(--muted); font-size:.78rem; margin-left:4px; }
.oc-reasons{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.oc-r{ position:relative; display:flex !important; align-items:center; gap:9px; min-height:46px; padding:9px 12px; border:1.5px solid var(--edge); border-radius:10px;
  background:var(--field); cursor:pointer; font-weight:600 !important; font-size:.9rem !important; margin:0 !important; }
.oc-r input{ width:18px; height:18px; margin:0; flex:none; accent-color:var(--accent); }
.oc-r:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
@media (max-width:420px){ .oc-reasons{ grid-template-columns:1fr; } }
/* the Active list's open estimates, under their own quiet heading */
table.list tbody tr.divider td{ background:var(--stripe); color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 14px; border-top:1px solid var(--line); }
table.list tbody tr.divider td svg, .jc-divider svg{ width:14px; height:14px; vertical-align:-2px; margin-right:7px; color:var(--s-est); }
table.list tbody tr.divider td span, .jc-divider span{ margin-left:8px; color:var(--ink); opacity:.65; }
.jc-divider{ padding:9px 16px; background:var(--stripe); color:var(--muted); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--line); border-top:1px solid var(--line); }
/* Analytics: the Quick Estimates panel (what became of them) and Lost after a design */
.est-kpis{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:4px 0 16px; }
.est-kpis > div{ background:var(--stripe); border-radius:10px; padding:12px 14px; min-width:0; }
.est-kpis span{ display:block; font-size:.78rem; font-weight:600; color:var(--muted); }
.est-kpis b{ display:block; font-size:1.55rem; font-weight:700; letter-spacing:-.02em; line-height:1.2; margin-top:2px; }
.est-kpis b small{ font-size:.85rem; color:var(--muted); margin-left:2px; font-weight:600; }
.est-kpis small.sub{ display:block; font-size:.76rem; color:var(--muted); }
.sharebar{ display:flex; height:16px; border-radius:6px; overflow:hidden; gap:2px; background:var(--stripe); }
.sharebar span{ display:block; min-width:4px; }
.sharelegend{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px 16px; margin-top:12px; font-size:.84rem; }
.sharelegend > div{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:4px 8px; min-width:0; }
.sharelegend i{ width:10px; height:10px; border-radius:3px; display:block; }
.sharelegend span{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.sharelegend b{ font-weight:700; }
.sharelegend small{ grid-column:2 / -1; color:var(--muted); font-size:.76rem; margin-top:-3px; }
.est-why{ margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.est-why .h2{ margin:0 0 8px; color:var(--muted); letter-spacing:.1em; }
.hbar.lostbar{ grid-template-columns:150px minmax(0,1fr) auto; }
/* the reasons are short sentences ("Went with another product"): they wrap rather than lose their end */
#cWhy .hbar .lab{ white-space:normal; overflow:visible; line-height:1.25; }
.hbar.lostbar .track{ display:flex; gap:2px; }
.hbar.lostbar .fill{ border-radius:0; background:var(--s-np); }
.hbar.lostbar .fill.price{ background:var(--warn); }
.lost-price{ color:var(--warn); font-weight:700; font-size:.8rem; margin-left:4px; }
@media (max-width:700px){
  .est-kpis{ grid-template-columns:minmax(0,1fr); }
  .sharelegend{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hbar.lostbar{ grid-template-columns:96px minmax(0,1fr) auto; }
}
.side > .infobox, .detail > div > .infobox{ margin-bottom:0; }
.seg{ gap:5px; }
.seg button{ padding:6px 10px; font-size:.82rem; }
/* Cover for a rep who's away (Clinton, 21 Oct 2026): its notes, the list's tag and chip, the menu's dialog */
:root{ --cover:#2F6F8F; --cover-bg:#E3EFF5; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --cover:#8FC4DD; --cover-bg:#182A33; } }
:root[data-theme="dark"]{ --cover:#8FC4DD; --cover-bg:#182A33; }
.cover-note{ display:flex; gap:11px; align-items:flex-start; padding:11px 14px; margin:0 0 14px; border-radius:10px; background:var(--cover-bg);
  border-left:3px solid var(--cover); color:var(--ink); font-size:.88rem; }
.cover-note > svg{ flex:none; color:var(--cover); margin-top:2px; width:18px; height:18px; }
.cover-note b{ display:block; font-weight:600; color:var(--cover); }
.cover-note span{ color:var(--muted); }
.cover-note.quiet{ background:var(--stripe); border-left-color:var(--edge); }
.cover-note.quiet b{ color:var(--ink); }
.cover-note.mine b{ color:var(--ink); }
.cover-note .linkbtn{ font-size:inherit; }
.tag.cover{ background:var(--cover-bg); color:var(--cover); border-color:transparent; text-transform:none; letter-spacing:0; font-size:.72rem; margin-left:4px; }
.jobcard .l1 .tag.cover{ margin-left:auto; margin-right:2px; }
em.dstate.cover{ background:var(--cover-bg); color:var(--cover); margin-left:6px; }
em.dstate.cover svg{ width:12px; height:12px; }
.cover-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:-6px 0 14px; }
.cchip{ display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:5px 12px; border-radius:999px; font-size:.82rem; font-weight:600;
  background:var(--cover-bg); color:var(--cover); border:1.5px solid transparent; }
.cchip svg{ width:15px; height:15px; }
.cchip .n{ color:var(--ink); opacity:.65; font-weight:700; }
.cchip.on{ border-color:var(--cover); box-shadow:0 0 0 2px color-mix(in srgb, var(--cover) 20%, transparent); }
.cover-now{ display:flex; align-items:center; gap:12px; padding:12px 14px; margin:0 0 16px; border-radius:10px; background:var(--cover-bg); }
.cover-now > svg{ flex:none; color:var(--cover); width:20px; height:20px; }
.cover-now > div{ flex:1; min-width:0; }
.cover-now b{ display:block; color:var(--cover); font-weight:600; }
.cover-now span{ font-size:.8rem; color:var(--muted); }
.cover-now button{ flex:none; }
.cv-until{ margin-bottom:10px; }
#cvDay{ max-width:220px; }
.cv-say{ font-size:.84rem; margin:0 0 12px; min-height:1.2em; }
table.users td.cover-c{ white-space:nowrap; }
@media (max-width:480px){ .cover-now{ flex-wrap:wrap; } .cover-now button{ width:100%; } }
.cv-cell{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.cv-cell .linkbtn{ font-size:.8rem; white-space:nowrap; }
.hbar.coverbar .track{ display:flex; gap:2px; }
.hbar.coverbar .fill{ border-radius:0; }
.hbar.coverbar .fill.cov{ opacity:.85; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 4px, transparent 4px 8px); }
.hbar.coverbar{ grid-template-columns:150px minmax(0,1fr) 110px; }
i.sw{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:8px; }
table.cover-t{ margin-top:16px; }
table.cover-t th.r, table.cover-t td.r{ text-align:right; }
table.cover-t small{ color:var(--muted); font-weight:500; }
@media (max-width:700px){ .hbar.coverbar{ grid-template-columns:96px minmax(0,1fr) auto; } }
.mfa-manage{ display:block; font-size:.78rem; margin-top:2px; }
.mp-sec .h2{ margin:4px 0 8px; color:var(--muted); letter-spacing:.1em; }
.mp-sec .pk-list li button{ flex:none; }
.pk-list li.rm p{ margin:0 0 8px; font-size:.86rem; color:var(--s-inf); }
.pk-list li.rm .foot{ margin:0; padding:0; border:0; justify-content:flex-end; }
.pk-list li.rm p b{ display:block; color:var(--ink); margin-bottom:2px; }
.legend i.hatch{ background:var(--muted); background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.45) 0 3px, transparent 3px 6px); }
em.dstate.cover{ margin-left:0; }
.ib-main em.dstate + em.dstate{ margin-left:6px; }
@media (max-width:480px){ .ib-main em.dstate + em.dstate{ margin-left:0; margin-top:4px; } }
.ib-main em.dstate + em.dstate{ margin-left:0; margin-top:4px; }

/* ---------- resellers (Clinton, 21 Oct 2026; PLAN 5.1): their own colour, a plum-rose apart from the statuses and cover ---------- */
/* --caution: an amber for "check this" (pricing not formalised, demo prices), in both themes */
:root{ --res:#8C3463; --res-bg:#F7E6EF; --caution:#9A5B06; --caution-bg:#FCF1DC; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --res:#E7A3C7; --res-bg:#33212B; --caution:#E9B865; --caution-bg:#2F2614; } }
:root[data-theme="dark"]{ --res:#E7A3C7; --res-bg:#33212B; --caution:#E9B865; --caution-bg:#2F2614; }
.tag.reseller{ display:inline-flex; align-items:center; gap:4px; background:var(--res-bg); color:var(--res); border-color:transparent;
  text-transform:none; letter-spacing:0; font-size:.72rem; margin-left:4px; vertical-align:1px; }
.tag.reseller svg{ width:12px; height:12px; flex:none; }
.tag.reseller.big{ font-size:.8rem; padding:3px 9px; margin-left:0; border-radius:999px; }
.tag.reseller.big svg{ width:14px; height:14px; }
.jobcard .l1 .tag.reseller{ margin-left:auto; margin-right:2px; }
.jobcard .l1 .tag.cover + .tag.reseller{ margin-left:4px; }
.res-badge{ display:inline-flex; align-items:center; gap:6px; vertical-align:4px; margin-left:8px; padding:4px 11px 4px 9px; border-radius:999px;
  background:var(--res-bg); color:var(--res); font-size:.82rem; font-weight:700; letter-spacing:0; }
.res-badge svg{ width:15px; height:15px; }
.res-head{ display:inline-flex; align-items:center; gap:5px; color:var(--res); font-weight:700; }
.res-head svg{ width:14px; height:14px; }
.res-note{ display:flex; gap:11px; align-items:flex-start; padding:11px 14px; margin:0 0 14px; border-radius:10px; background:var(--res-bg);
  border-left:3px solid var(--res); font-size:.88rem; }
.res-note > svg{ flex:none; color:var(--res); width:18px; height:18px; margin-top:2px; }
.res-note b{ display:block; font-weight:600; color:var(--res); }
.res-note span{ color:var(--muted); }
.res-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; }
.cell-sub.warn-t{ color:var(--warn); }

/* the Users page: its plain Last used column, the columns' spacing, the Everyone / Neumann / Resellers filter */
table.users td.seen-c{ white-space:nowrap; font-size:.86rem; }
@media (min-width:761px){ table.users th, table.users td{ padding-left:10px; padding-right:10px; } }
table.users .acts-cell > .small{ white-space:nowrap; }          /* the Last used column mustn't fold "Reset password" in two */
table.users td.cover-c .cv-cell .linkbtn{ font-size:.78rem; }
.seg.ufilt{ margin:0 0 12px; }

/* the Users page's Resellers card: each account with its people */
.resellers .card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.resellers .res-n{ font-size:.84rem; }
.res-say{ font-size:.88rem; margin:2px 0 14px; max-width:720px; }
.inline-form.res-new{ grid-template-columns:minmax(0,360px) auto; justify-content:start; margin-bottom:6px; }
.res-list{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px; }
.res-acct{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
.res-acct.off{ opacity:.78; }
.ra-head{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:linear-gradient(90deg, var(--res-bg), var(--card) 75%); border-bottom:1px solid var(--line); }
.ra-ic{ flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--res); color:var(--card); }
.ra-ic svg{ width:19px; height:19px; }
.ra-t{ min-width:0; }
.ra-t b{ font-size:1rem; font-weight:700; }
.ra-t small{ display:block; color:var(--muted); font-size:.8rem; margin-top:1px; }
.ra-acts{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ra-acts .ghost{ white-space:nowrap; }
.ra-people{ list-style:none; margin:0; padding:4px 14px 8px; }
.ra-people li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto 150px; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.ra-people li:last-child{ border-bottom:0; }
.ra-people li.off{ opacity:.6; }
.avatar.sm{ width:28px; height:28px; font-size:.68rem; background:var(--res); color:var(--card); }
.rp-t{ min-width:0; }
.rp-t b{ font-weight:600; font-size:.9rem; }
.rp-t small{ display:block; color:var(--muted); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-s{ font-size:.84rem; white-space:nowrap; }
.ra-none{ margin:0; padding:12px 14px; color:var(--muted); font-size:.86rem; }
@media (max-width:760px){
  .ra-head{ flex-wrap:wrap; }
  .ra-acts{ width:100%; justify-content:flex-start; }
  .ra-acts button{ flex:1 1 auto; }
  .ra-people li{ grid-template-columns:auto minmax(0,1fr); gap:4px 10px; }
  .ra-people .rp-s{ grid-column:2; }
  .inline-form.res-new{ grid-template-columns:1fr; }
  .res-badge{ font-size:.76rem; vertical-align:3px; }
}

/* ---- Pricing on Quick Estimates (Clinton, 22 Oct 2026; PLAN 5.2): reps, Guy and Clinton only. A money green of its own
   (--price / --price-bg), the estimate's violet beside it, and an amber of its own (--caution) for "not formalised" and demo prices */
:root{ --price:#23664F; --price-bg:#E4F1EA; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --price:#8BCDB0; --price-bg:#15281F; } }
:root[data-theme="dark"]{ --price:#8BCDB0; --price-bg:#15281F; }
.c-price{ color:var(--price); }
table.qe-table th small{ font-size:.7rem; font-weight:600; color:var(--muted); margin-left:2px; letter-spacing:0; text-transform:none; }
table.qe-table td.unit{ color:var(--muted); font-size:.92rem; white-space:nowrap; }
table.qe-table td.ltotal{ font-weight:600; white-space:nowrap; }
table.qe-table.priced td.qty{ font-size:1rem; }
.qe-money{ margin:10px 0 0 auto; max-width:340px; border:1px solid color-mix(in srgb, var(--price) 28%, var(--line)); border-radius:10px; overflow:hidden; background:var(--card); }
.qm-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 14px; font-size:.9rem; }
.qm-row + .qm-row{ border-top:1px solid var(--line); }
.qm-row em{ font-style:normal; color:var(--muted); font-size:.78rem; margin-left:4px; }
.qm-row b{ font-weight:600; white-space:nowrap; }
.qm-row.total{ background:var(--price-bg); color:var(--price); padding:11px 14px; }
.qm-row.total > span{ font-weight:700; }
.qm-row.total b{ font-size:1.35rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.qm-row.total em{ color:var(--price); opacity:.8; }
.qe-asat{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:9px 12px; border-radius:9px; background:var(--stripe); font-size:.84rem; color:var(--muted); }
.qe-asat > svg{ flex:none; color:var(--price); margin-top:1px; }
.qe-asat > div{ flex:1; min-width:0; }
.qe-asat b{ color:var(--ink); font-weight:600; }
.qe-asat .qa-src{ color:var(--ink); }
.qe-asat .tag{ vertical-align:1px; margin-left:4px; }
.qe-asat .qa-nf{ display:block; margin-top:3px; color:var(--caution); font-weight:600; }
.qe-asat.informal{ background:var(--caution-bg); }
.qe-asat.informal > svg{ color:var(--caution); }
.qe-asat .qa-link{ flex:none; font-weight:600; color:var(--price); white-space:nowrap; text-decoration:none; }
.qe-asat .qa-link:hover{ text-decoration:underline; }
.qe-asat.informal .qa-link{ color:var(--caution); }
.qe-update{ display:flex; align-items:center; gap:14px; margin-top:10px; padding:12px 14px; border-radius:10px; background:var(--s-est-bg);
  border:1px solid color-mix(in srgb, var(--s-est) 30%, transparent); }
.qe-update > div{ flex:1; min-width:0; }
.qe-update b{ display:block; color:var(--s-est); font-weight:700; font-size:.92rem; }
.qe-update span{ display:block; color:var(--ink); font-size:.84rem; margin-top:2px; }
.qe-update button{ flex:none; white-space:nowrap; }
.qe-update button.primary{ background:var(--s-est); border-color:var(--s-est); color:var(--card); }
.qe-undo{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:9px 12px; border-radius:9px; border:1px dashed var(--edge); font-size:.84rem; color:var(--muted); }
.qe-undo > svg{ flex:none; color:var(--price); }
.qe-undo span{ flex:1; }
.qe-undo button{ flex:none; display:inline-flex; align-items:center; gap:6px; }
@media print{ .qe-update, .qe-undo, .qe-asat .qa-link, .bp-chip{ display:none !important; } .qe-money, .qm-row.total, .qe-asat{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } }
@media (max-width:640px){
  table.qe-table.priced th.desc, table.qe-table.priced td.desc{ display:none; }
  table.qe-table.priced th, table.qe-table.priced td{ padding-left:6px; padding-right:6px; }
  table.qe-table.priced td.unit{ font-size:.84rem; }
  .qe-money{ max-width:none; }
  .qe-update{ flex-direction:column; align-items:stretch; gap:10px; }
  .qe-undo{ flex-wrap:wrap; }
  .qe-undo button{ margin-left:auto; }
}
/* the builder's name on a job or an estimate: its pricing, a tap away */
.jh-t{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; }
.jh-t h1{ min-width:0; }
.bp-chip{ display:inline-flex; align-items:center; gap:5px; flex:none; padding:3px 10px 3px 8px; border-radius:999px; font-size:.74rem; font-weight:600;
  letter-spacing:0; background:var(--price-bg); color:var(--price); text-decoration:none; border:1px solid color-mix(in srgb, var(--price) 25%, transparent); }
.bp-chip svg{ width:13px; height:13px; }
.bp-chip:hover{ border-color:var(--price); }
button.bp-btn{ display:inline-flex; align-items:center; gap:6px; color:var(--price); }
button.bp-btn svg{ width:14px; height:14px; }
/* Update to today's prices: each line now and new, and the two totals */
.pu-table{ width:100%; border-collapse:collapse; font-size:.88rem; margin:4px 0 12px; }
.pu-table th{ text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--line); }
.pu-table th.r, .pu-table td.r{ text-align:right; }
.pu-table td{ padding:8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.pu-table td.code{ font-weight:600; }
.pu-table td.was{ color:var(--muted); }
.pu-table tr.moved td.was{ text-decoration:line-through; }
.pu-table tr.moved td.new{ color:var(--s-est); font-weight:700; }
.pu-tot{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; background:var(--stripe); }
.pu-tot > div{ display:flex; flex-direction:column; }
.pu-tot > div span{ font-size:.76rem; color:var(--muted); font-weight:600; }
.pu-tot > div b{ font-size:1.15rem; font-weight:700; }
.pu-tot .arr{ color:var(--muted); font-size:1.1rem; }
.pu-tot .new{ margin-left:auto; text-align:right; }
.pu-tot .new b{ color:var(--s-est); font-size:1.35rem; }
.pu-say{ font-size:.82rem; margin:10px 0 0; }
.rs-pdf{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; background:var(--s-est-bg); margin:4px 0 4px; }
.rs-pdf > svg{ flex:none; color:var(--s-est); width:22px; height:22px; }
.rs-pdf b{ display:block; font-size:.84rem; font-weight:600; overflow-wrap:anywhere; }
.rs-pdf span{ display:block; font-size:.78rem; color:var(--muted); }
.modal textarea#rsMsg{ min-height:230px; line-height:1.45; }
.modal .field .hint{ display:block; color:var(--muted); font-size:.78rem; margin-top:5px; }
#rsGo, #rsYes{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
@media (max-width:480px){ .pu-table th:nth-child(2), .pu-table td:nth-child(2){ display:none; } .pu-table td{ padding:7px 5px; } }
/* the price lists (#pricing) and a builder's page (#builder/<name>) */
.pr-stack{ max-width:940px; }
.pr-stack > .pr-demo{ margin:0; }
.pr-demo{ display:flex; gap:11px; align-items:flex-start; padding:12px 14px; margin:0 0 16px; border-radius:10px; background:var(--caution-bg);
  border:1px solid color-mix(in srgb, var(--caution) 30%, transparent); }
.pr-demo > svg{ flex:none; width:20px; height:20px; color:var(--caution); margin-top:1px; }
.pr-demo b{ display:block; color:var(--caution); font-weight:700; }
.pr-demo span{ display:block; color:var(--ink); font-size:.88rem; margin-top:2px; }
.pr-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 20px 6px; }
.pr-head h2{ margin:0; }
.pr-head .muted{ font-size:.84rem; }
.pr-table, .bp-table{ width:100%; border-collapse:collapse; }
.pr-table th, .bp-table th{ text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); }
.pr-table th small, .bp-table th small{ text-transform:none; letter-spacing:0; font-weight:600; }
.pr-table th.r, .pr-table td.r, .bp-table th.r, .bp-table td.r{ text-align:right; }
.pr-table th:first-child, .pr-table td:first-child, .bp-table th:first-child, .bp-table td:first-child{ padding-left:20px; }
.pr-table th:last-child, .pr-table td:last-child, .bp-table th:last-child, .bp-table td:last-child{ padding-right:20px; }
.pr-table td, .bp-table td{ padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.pr-table tbody tr:nth-child(even), .bp-table tbody tr:nth-child(even){ background:var(--stripe); }
.pr-table .code, .bp-table .code{ display:block; font-weight:700; white-space:nowrap; }
.pr-table .desc, .bp-table .desc{ display:block; color:var(--muted); font-size:.8rem; }
.pr-v, .bp-v{ font-weight:600; font-size:1rem; }
.pr-table th.r{ width:22%; }                    /* the three lists' columns the same width */
.money-in{ display:inline-flex; align-items:center; border:1px solid var(--edge); border-radius:8px; background:var(--field); overflow:hidden; width:118px; max-width:100%; }
.money-in span{ padding:0 4px 0 10px; color:var(--muted); font-weight:600; }
.money-in input{ border:0; background:transparent; min-height:40px; padding:6px 10px 6px 2px; width:100%; min-width:0; text-align:right; font-size:16px; font-weight:600; color:var(--ink); box-shadow:none; }
.money-in input:focus{ outline:none; }
.money-in:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.money-in:has(input.missing){ border-color:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb, var(--warn) 16%, transparent); }
.money-in input::placeholder{ color:var(--muted); font-weight:500; opacity:.75; }
.pr-foot, .bp-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 20px 16px; }
.pr-foot .muted, .bp-foot .muted{ font-size:.82rem; margin-right:auto; }
.pr-foot .msg, .bp-foot .msg{ width:100%; margin:0; order:-1; }
.pr-explain ol{ margin:0 0 10px; padding-left:20px; font-size:.9rem; }
.pr-explain li{ margin:4px 0; }
.pr-explain p{ margin:0; font-size:.86rem; }
.pr-log .changes, .bp-chg{ margin-top:8px; }
.bp-detail .side .card{ position:sticky; top:76px; }
@media (max-width:900px){ .bp-detail > div.side{ order:0; } }   /* on a phone the category first, then its changes */
.bp-cat{ display:grid; grid-template-columns:auto minmax(0,260px) minmax(0,1fr); align-items:center; gap:10px 14px; padding:18px 20px; border-bottom:1px solid var(--line);
  border-radius:12px 12px 0 0; }
.bp-cat label{ font-weight:600; font-size:.92rem; }
.bp-cat.unset{ background:linear-gradient(180deg, var(--caution-bg), var(--card)); }
.bp-cat.unset select{ border-color:var(--caution); box-shadow:0 0 0 3px color-mix(in srgb, var(--caution) 20%, transparent); }
.bp-unset, .bp-set{ display:flex; gap:8px; align-items:flex-start; margin:0; grid-column:1 / -1; font-size:.86rem; }
.bp-unset > svg{ flex:none; color:var(--caution); margin-top:1px; }
.bp-unset b{ color:var(--caution); font-weight:700; margin-right:4px; }
.bp-set{ color:var(--muted); }
.bp-set > svg{ flex:none; width:16px; height:16px; color:var(--price); }
.bp-fall{ font-size:.8rem; color:var(--muted); white-space:nowrap; }
.bp-table th.fallc, .bp-table td.fallc{ width:1%; }
.bp-from{ font-size:.84rem; }
/* a job's builder locked once something's been sent (PLAN 5.2): the field reads only, with a lock and why */
input.combo-in.locked{ background:var(--stripe); color:var(--ink); border-style:dashed; cursor:not-allowed; background-image:none; }
.b-locked{ display:flex; gap:8px; align-items:flex-start; margin:-2px 0 10px; padding:8px 12px; border-radius:8px; background:var(--accent-soft); color:var(--accent);
  font-size:.82rem; font-weight:600; line-height:1.4; }
.b-locked svg{ flex:none; margin-top:1px; }
.cv-only{ display:block; color:var(--muted); font-size:.78rem; margin-top:6px; }
@media (max-width:640px){
  .pr-head{ padding:14px 14px 4px; }
  .pr-table th, .pr-table td{ padding:8px 4px; }
  .pr-table th:first-child, .pr-table td:first-child, .bp-table th:first-child, .bp-table td:first-child{ padding-left:12px; }
  .pr-table th:last-child, .pr-table td:last-child, .bp-table th:last-child, .bp-table td:last-child{ padding-right:12px; }
  .pr-table .desc{ font-size:.74rem; }
  .pr-table .money-in{ width:84px; }
  .pr-table .money-in span{ padding-left:7px; }
  .pr-table .money-in input{ padding-right:6px; font-size:16px; }
  .pr-foot, .bp-foot{ padding:12px 14px 14px; }
  .pr-foot button, .bp-foot button{ width:100%; }
  .bp-cat{ grid-template-columns:1fr; padding:14px; }
  .bp-table th, .bp-table td{ padding:8px 6px; }
  .bp-table .money-in{ width:100px; }
  .bp-fall{ white-space:normal; font-size:.74rem; display:block; max-width:90px; }

  .bp-detail .side .card{ position:static; }
}