/* NuPod Design 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;
  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;
    --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;
  --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); }
.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; }

/* ---------- 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 .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; }
.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; }
.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[hidden]{ display:none; }
.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 .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; }
.chg-note{ padding:8px 10px; font-size:.84rem; background:var(--stripe); }
.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; }

/* ---------- 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; }
.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; }
@media (max-width:760px){
  .pv-name{ flex-basis:100%; order:-1; }
  .pv-top > .pv-btn[data-act="close"]{ order:-2; }
}

/* ---------- 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-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-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; }

/* ---------- 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; }
  .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; }
}
@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; }
}
@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; }