/* =====================================================================
   JobSnap design system.
   Palette validated for colour-blind separation and contrast.
   ===================================================================== */
:root{
  color-scheme: light;
  --surface-1:#fcfcfb; --surface-2:#ffffff; --page:#f9f9f7;
  --ink-1:#0b0b0b; --ink-2:#52514e; --ink-muted:#898781;
  --grid:#e1e0d9; --baseline:#c3c2b7; --border:rgba(11,11,11,0.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --good:#0ca30c; --warn:#fab219; --critical:#d03b3b;
  --good-text:#006300;
  --shadow:0 1px 2px rgba(11,11,11,.04), 0 8px 24px rgba(11,11,11,.06);
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface-1:#1a1a19; --surface-2:#212120; --page:#0d0d0d;
  --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-muted:#898781;
  --grid:#2c2c2a; --baseline:#383835; --border:rgba(255,255,255,0.10);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --good-text:#0ca30c;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --surface-1:#1a1a19; --surface-2:#212120; --page:#0d0d0d;
    --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-muted:#898781;
    --grid:#2c2c2a; --baseline:#383835; --border:rgba(255,255,255,0.10);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --good-text:#0ca30c;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--page);
  color:var(--ink-1);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--s1)}
.hidden{display:none !important}

/* ---------- buttons & inputs ------------------------------------- */
button,.btn{font:inherit;font-size:13px;padding:7px 13px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface-1);color:var(--ink-1);cursor:pointer;
  transition:border-color .12s, background .12s}
button:hover{border-color:var(--baseline)}
button:disabled{opacity:.55;cursor:default}
button.primary{background:var(--s1);border-color:var(--s1);color:#fff}
button.primary:hover{filter:brightness(1.06)}
button.danger{color:var(--critical)}
button.small{padding:3px 9px;font-size:12px;border-radius:7px}
button.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}

/* ---------- colour says what a click will do ----------------------
   green = money in/out · blue = look at it · amber = release/act · red = careful */
td button[data-pay],td button[data-inv-pay]{
  color:var(--good-text);border-color:color-mix(in srgb,var(--good) 45%,var(--border))}
td button[data-pay]:hover,td button[data-inv-pay]:hover{
  background:color-mix(in srgb,var(--good) 12%,transparent);border-color:var(--good)}
td button[data-view],td button[data-inv-view]{
  color:var(--s1);border-color:color-mix(in srgb,var(--s1) 40%,var(--border))}
td button[data-view]:hover,td button[data-inv-view]:hover{
  background:color-mix(in srgb,var(--s1) 10%,transparent);border-color:var(--s1)}
td button[data-release]{
  color:color-mix(in srgb,var(--s4) 70%,var(--ink-1));
  border-color:color-mix(in srgb,var(--s4) 55%,var(--border))}
td button[data-release]:hover{background:color-mix(in srgb,var(--s4) 12%,transparent);border-color:var(--s4)}
button.danger:hover{background:color-mix(in srgb,var(--critical) 10%,transparent);border-color:var(--critical)}

/* choosers show they're live before you commit */
select:hover{border-color:var(--s1)}
.seg button:not(.on):hover{background:color-mix(in srgb,var(--s1) 10%,transparent);color:var(--ink-1)}
nav.tabs button:not(.active):hover{color:var(--ink-1);
  border-bottom-color:color-mix(in srgb,var(--s1) 45%,transparent)}
.tile.clickable{transition:border-color .12s, transform .12s, box-shadow .12s}
.tile.clickable:hover{border-color:var(--s1);transform:translateY(-1px);
  box-shadow:0 3px 10px color-mix(in srgb,var(--s1) 18%,transparent)}
.drop:hover{border-color:var(--s1);background:color-mix(in srgb,var(--s1) 5%,transparent)}
.clickrow:hover td{background:color-mix(in srgb,var(--s1) 6%,transparent)}
input,select,textarea{font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--baseline);
  border-radius:9px;background:var(--surface-1);color:var(--ink-1);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--s1);outline-offset:0;border-color:var(--s1)}
label.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2)}

/* ---------- auth / onboarding ------------------------------------ */
.auth-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:400px;background:var(--surface-1);border:1px solid var(--border);
  border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.brand .mark{width:34px;height:34px;border-radius:8px;background:var(--s1);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px;flex:none;
  background-image:url("../brand/footings-icon.svg");background-size:cover;
  background-position:center;text-indent:-9999px;overflow:hidden}
.brand h1{font-size:19px;font-weight:800;letter-spacing:-.02em}
.brand h1 .wm-accent{color:var(--s1)}
.auth-card .tagline{font-size:13px;color:var(--ink-muted);margin-bottom:20px}
.auth-card h2{font-size:15px;margin-bottom:14px}
.stack{display:flex;flex-direction:column;gap:12px}
.auth-alt{margin-top:14px;font-size:12.5px;color:var(--ink-2);text-align:center}
.auth-alt button{padding:0;border:none;background:none;color:var(--s1);font-size:12.5px;text-decoration:underline}
.err{color:var(--critical);font-size:12.5px}
.demo-banner{background:color-mix(in srgb,var(--s4) 16%,var(--surface-1));border:1px solid var(--border);
  border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--ink-2);margin-bottom:16px}
.seg{display:flex;gap:0;border:1px solid var(--baseline);border-radius:10px;overflow:hidden;margin-bottom:16px}
.seg button{flex:1;border:none;border-radius:0;background:transparent;padding:8px;color:var(--ink-2)}
.seg button.on{background:var(--s1);color:#fff;font-weight:600}

/* ---------- app shell -------------------------------------------- */
header.app{display:flex;align-items:center;gap:14px;padding:12px 20px;background:var(--surface-1);
  border-bottom:1px solid var(--grid);flex-wrap:wrap;position:sticky;top:0;z-index:20}
header.app .who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2)}
header.app .co{font-weight:600;color:var(--ink-1)}
nav.tabs{display:flex;gap:2px;padding:0 20px;background:var(--surface-1);
  border-bottom:1px solid var(--grid);overflow-x:auto;position:sticky;top:53px;z-index:19}
nav.tabs button{border:none;border-bottom:2px solid transparent;border-radius:0;padding:10px 14px;
  color:var(--ink-2);background:transparent;white-space:nowrap}
nav.tabs button.active{color:var(--ink-1);border-bottom-color:var(--s1);font-weight:600}
main{padding:20px;max-width:1280px;margin:0 auto}
section.view{display:none}
section.view.active{display:block}

/* ---------- cards, tiles, tables --------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:18px}
.tile{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.tile .k{font-size:12px;color:var(--ink-2)}
.tile .v{font-size:24px;font-weight:700;margin-top:2px;letter-spacing:-.02em}
.tile .d{font-size:12px;color:var(--ink-muted);margin-top:2px}
.tile .d.bad{color:var(--critical);font-weight:600}
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:18px}
.card h2{font-size:14px;font-weight:700;margin-bottom:10px}
.controls{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.controls input,.controls select{width:auto;min-width:150px}
.grow{flex:1}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-muted);
  font-weight:600;padding:7px 8px;border-bottom:1px solid var(--baseline);white-space:nowrap}
td{padding:8px;border-bottom:1px solid var(--grid);vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:color-mix(in srgb,var(--s1) 5%,transparent)}
.sub{font-size:11.5px;color:var(--ink-muted)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 9px;
  border-radius:99px;border:1px solid var(--border);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pc,var(--ink-muted));flex:none}
.pos{color:var(--good-text);font-weight:600}
.neg{color:var(--critical);font-weight:600}
.muted{color:var(--ink-muted)}
.late{color:var(--critical);font-weight:600}
.empty{padding:26px 8px;text-align:center;color:var(--ink-muted)}

/* ---------- chart ------------------------------------------------ */
.legend{display:flex;gap:14px;font-size:12px;color:var(--ink-2);margin:2px 0 8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
#tooltip{position:fixed;pointer-events:none;background:var(--surface-1);border:1px solid var(--border);
  box-shadow:var(--shadow);border-radius:8px;padding:7px 10px;font-size:12px;display:none;z-index:60}

/* ---------- schedule --------------------------------------------- */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;min-height:132px;padding:8px}
.day.today{outline:2px solid var(--s1)}
.day h4{font-size:11.5px;color:var(--ink-muted);font-weight:600;margin-bottom:6px}
.asg{background:color-mix(in srgb,var(--s1) 10%,var(--surface-1));border:1px solid var(--border);
  border-radius:8px;padding:5px 7px;font-size:12px;margin-bottom:5px;cursor:pointer}
.asg b{display:block}

.seg-inline{margin-bottom:0;width:auto;flex:none}
.seg-inline button{padding:6px 14px;font-size:12.5px}
.instmark{font-size:11px;color:var(--ink-2);background:color-mix(in srgb,var(--s4) 20%,var(--surface-1));
  border-radius:6px;padding:2px 6px;margin-bottom:5px;display:inline-block}

/* day view */
.daybanner{background:color-mix(in srgb,var(--s4) 18%,var(--surface-1));border:1px solid var(--border);
  border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:14px}
.dayblock{margin-bottom:16px}
.dayblock h4{font-size:13px;font-weight:700;margin-bottom:7px}
.dayitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.dayitems .asg{margin-bottom:0}

/* month view */
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-head div{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-muted);
  font-weight:600;text-align:center}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{background:var(--surface-1);border:1px solid var(--border);border-radius:9px;min-height:104px;
  padding:6px;cursor:pointer;overflow:hidden}
.cal-cell:hover{border-color:var(--baseline)}
.cal-cell.out{opacity:.45}
.cal-cell.today{outline:2px solid var(--s1)}
.cal-date{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:4px}
.cal-chip{background:color-mix(in srgb,var(--s1) 12%,var(--surface-1));border:1px solid var(--border);
  border-radius:6px;padding:2px 5px;font-size:11px;margin-bottom:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cal-chip b{font-weight:700}
.cal-more{font-size:11px;color:var(--ink-muted);padding-left:2px}

/* year view */
.yeargrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.month-card{background:var(--surface-1);border:1px solid var(--border);border-radius:11px;padding:12px;
  cursor:pointer}
.month-card:hover{border-color:var(--s1)}
.month-card.now{outline:2px solid var(--s1)}
.month-card h4{font-size:12.5px;font-weight:700;margin-bottom:4px}
.month-num{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.month-bar{height:6px;background:var(--grid);border-radius:99px;overflow:hidden;margin:7px 0}
.month-bar div{height:100%;background:var(--s1);border-radius:99px}

/* ---------- inbox / dropzone ------------------------------------- */
.drop{border:2px dashed var(--baseline);border-radius:14px;padding:30px;text-align:center;color:var(--ink-2);
  background:var(--surface-1);cursor:pointer}
.drop.over{border-color:var(--s1);background:color-mix(in srgb,var(--s1) 7%,var(--surface-1))}
.drop b{display:block;font-size:15px;color:var(--ink-1);margin-bottom:4px}
.roadmap{display:grid;gap:10px;margin-top:14px}
.step{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2)}
.step .n{width:20px;height:20px;border-radius:50%;background:var(--grid);color:var(--ink-2);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;margin-top:1px}
.step.done .n{background:var(--good);color:#fff}

/* ---------- line-item editor ------------------------------------- */
.section-h{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);
  font-weight:700;margin:18px 0 8px}
.items{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.items-head,.items-row{display:grid;
  grid-template-columns:var(--part,) minmax(0,2.4fr) 62px 74px 88px 96px 30px;gap:6px;align-items:center}
.items-head[style*="--partcol"],.items-row[style*="--partcol"]{--part:88px}
.items-head{background:color-mix(in srgb,var(--ink-1) 4%,var(--surface-1));padding:7px 8px;
  font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-muted);font-weight:600}
.items-head .r,.items-row .r{text-align:right}
.items-row{padding:5px 8px;border-top:1px solid var(--grid)}
.items-row input{padding:6px 7px;font-size:12.5px;border-radius:7px}
.items-row input.r{text-align:right}
.line-amt{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.items-foot{display:flex;align-items:center;gap:12px;padding:8px;border-top:1px solid var(--grid);
  background:color-mix(in srgb,var(--ink-1) 2%,var(--surface-1))}
.items-total{margin-left:auto;font-size:13px;color:var(--ink-2)}
.items-total b{color:var(--ink-1);font-variant-numeric:tabular-nums;margin-left:6px}
.totals-preview{margin-top:14px;margin-left:auto;width:min(320px,100%);font-size:13px}
.totals-preview div{display:flex;justify-content:space-between;padding:3px 0;color:var(--ink-2)}
.totals-preview b{color:var(--ink-1);font-variant-numeric:tabular-nums}
.totals-preview .grand{border-top:1px solid var(--baseline);margin-top:4px;padding-top:7px;font-size:15px}
.totals-preview .grand b{font-weight:800}

/* ---------- printable document ----------------------------------- */
.doc-dialog #docBody{max-height:62vh;overflow:auto;border:1px solid var(--border);border-radius:10px;
  background:#fff;padding:0}
.doc{background:#fff;color:#111;padding:34px 38px;font-size:12.5px;line-height:1.5;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.doc *{color:inherit}
.doc-head{display:flex;justify-content:space-between;gap:26px;align-items:flex-start;
  padding-bottom:16px;border-bottom:2px solid #111;margin-bottom:18px}
.doc-brand{display:flex;gap:12px;align-items:flex-start}
.doc-logo{max-height:52px;max-width:150px;object-fit:contain}
.doc-co{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:3px}
.doc-co-sub{font-size:11.5px;color:#555;line-height:1.45}
.doc-title{text-align:right;flex:none}
.doc-title h1{font-size:23px;letter-spacing:.06em;font-weight:800;margin-bottom:8px}
.doc-meta{font-size:11.5px;border-collapse:collapse;margin-left:auto}
.doc-meta th{text-align:left;color:#666;font-weight:600;padding:1px 12px 1px 0;
  text-transform:none;letter-spacing:0;border:none;font-size:11.5px}
.doc-meta td{text-align:right;padding:1px 0;border:none;font-variant-numeric:tabular-nums}
.doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:18px}
.doc-parties h3{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#777;
  font-weight:700;margin-bottom:4px}
.doc-attn{color:#555;font-size:11.5px}
table.doc-items{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:12px}
table.doc-items thead th{background:#f2f2ef;border-bottom:1px solid #ccc;text-align:left;
  padding:6px 8px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#555;font-weight:700}
table.doc-items td{padding:6px 8px;border-bottom:1px solid #e6e6e2;vertical-align:top}
table.doc-items .r{text-align:right;font-variant-numeric:tabular-nums}
table.doc-items .c{text-align:center;color:#888}
.doc-totals{display:flex;justify-content:flex-end;margin-bottom:20px}
.doc-totals table{border-collapse:collapse;min-width:262px}
.doc-totals th{text-align:left;font-weight:500;color:#555;padding:3px 20px 3px 0;border:none;
  text-transform:none;letter-spacing:0;font-size:12px}
.doc-totals td{text-align:right;padding:3px 0;border:none;font-variant-numeric:tabular-nums}
.doc-totals .strong th,.doc-totals .strong td{font-weight:700;color:#111}
.doc-totals .grand th,.doc-totals .grand td{font-size:15px;font-weight:800;color:#111;
  border-top:2px solid #111;padding-top:7px}
.doc-foot{border-top:1px solid #ddd;padding-top:12px;font-size:11.5px;color:#555;display:grid;gap:9px}
.doc-foot h3{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#777;font-weight:700;margin-bottom:3px}
.doc-note{color:#555}

#printArea{display:none}
@media print{
  body.printing > *{display:none !important}
  body.printing #printArea{display:block !important}
  body.printing #printArea .doc{padding:0;font-size:11.5px}
  @page{size:letter;margin:16mm}
}

/* ---------- dialogs & toasts ------------------------------------- */
dialog{border:1px solid var(--border);border-radius:14px;background:var(--surface-1);color:var(--ink-1);
  padding:20px;max-width:540px;width:92vw;box-shadow:var(--shadow);max-height:90dvh;overflow:auto;
  margin:auto}   /* the * reset above wipes the browser default, which centres it */
dialog.wide{max-width:880px}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog h3{font-size:15px;margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.form-grid label.full{grid-column:1/-1}
.form-grid .full{grid-column:1/-1}
.logo-field{display:flex;flex-direction:column;gap:4px}
.logo-label{font-size:12px;color:var(--ink-2)}
.logo-uploader{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:4px}
.logo-preview{width:154px;height:74px;border:1px dashed var(--baseline);border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:var(--surface-2);overflow:hidden;flex:0 0 auto}
.logo-preview img{max-width:92%;max-height:84%;object-fit:contain}
.logo-empty{font-size:11.5px;color:var(--ink-muted)}
.logo-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start;flex:1 1 220px;min-width:200px}
.logo-btns{display:flex;gap:8px;flex-wrap:wrap}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.dialog-actions .left{margin-right:auto}
#toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;
  gap:8px;z-index:90;align-items:center}
.toast{background:var(--ink-1);color:var(--page);padding:9px 15px;border-radius:10px;font-size:13px;
  box-shadow:var(--shadow);opacity:1;transition:opacity .3s, transform .3s}
.toast.bad{background:var(--critical);color:#fff}
.toast.out{opacity:0;transform:translateY(6px)}
.note{font-size:12px;color:var(--ink-muted);margin-top:8px}
.spinner{width:15px;height:15px;border:2px solid var(--baseline);border-top-color:var(--s1);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:grid;place-items:center;min-height:60dvh;color:var(--ink-muted);gap:10px}

@media(max-width:860px){
  .week{grid-template-columns:repeat(2,1fr)}
  .cal-cell{min-height:72px;padding:4px}
  .cal-date{font-size:11px}
  .cal-chip{font-size:10px}
  #rangeLabel{min-width:0 !important;font-size:13px}
  .form-grid{grid-template-columns:1fr}
  main{padding:14px}
  header.app{padding:10px 14px;gap:8px}
  header.app .who{gap:6px}
  header.app .co{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  header.app .who #whoUser{display:none}
  nav.tabs{padding:0 8px;top:49px}
  .controls input,.controls select{min-width:0;width:100%}
  .controls{gap:6px}
  /* wide tables and segmented controls scroll inside their card
     instead of pushing the whole page sideways */
  .card{overflow-x:auto}
  .seg{max-width:100%;overflow-x:auto}
  header.app .who{min-width:0}
  #btnInstall{font-size:0;padding:6px 9px}
  #btnInstall::before{content:"⤓";font-size:14px}
}

/* ---------- v0.3: contracts, project page, books ------------------- */
.seg-top{margin-bottom:14px}
.hint{font-size:11.5px;color:var(--ink-muted);margin-top:3px;display:block}
.minibar{height:5px;background:var(--grid);border-radius:99px;overflow:hidden;margin-top:4px}
.minibar div{height:100%;background:var(--s1);border-radius:99px}
.minibar.big{height:10px;margin:8px 0}
.clickrow{cursor:pointer}
.jobbar{padding:9px 0;border-bottom:1px solid var(--grid)}
.jobbar:last-child{border-bottom:none}
.jobbar-t{font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jobbar-n{font-size:12px;color:var(--ink-muted)}

.jobhead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.jobtitle h1{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:3px}
.jobtitle .muted{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.jobactions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}

.two-up{display:grid;grid-template-columns:1fr 1fr;gap:20px}
table.stmt{max-width:620px}
table.stmt td{padding:5px 8px}
table.stmt tr.head td{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);
  font-weight:700;padding-top:14px;border-bottom:1px solid var(--baseline)}
table.stmt tr.sub td{font-weight:600;border-top:1px solid var(--grid)}
table.stmt tr.strong td{font-weight:700;border-top:1px solid var(--baseline)}
table.stmt tr.grand td{font-weight:800;font-size:15px;border-top:2px solid var(--ink-1);
  border-bottom:none;padding-top:8px}
.stmt-h{font-size:15px;font-weight:700;margin-bottom:10px}
.callout{background:color-mix(in srgb,var(--s1) 8%,var(--surface-1));border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;margin-top:14px;font-size:13.5px;max-width:620px}
tr.je-first td{border-top:1px solid var(--baseline)}

.paysummary{display:flex;gap:26px;padding:11px 14px;background:color-mix(in srgb,var(--s1) 7%,var(--surface-1));
  border:1px solid var(--border);border-radius:10px;margin-bottom:14px}
.paysummary div{display:flex;flex-direction:column;gap:1px;font-size:13px}
.paysummary b{font-size:16px}

.je-head,.je-row{display:grid;grid-template-columns:minmax(0,2fr) 110px 110px 100px 30px;gap:6px;align-items:center}
.je-head{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-muted);
  font-weight:600;padding:0 2px 6px}
.je-head .r{text-align:right}
.je-row{padding:3px 2px}
.je-row input.r{text-align:right}

@media(max-width:860px){
  .two-up{grid-template-columns:1fr}
  .jobactions{margin-left:0;width:100%}
  .je-head,.je-row{grid-template-columns:1fr;gap:4px}
  .je-head{display:none}
  .je-row{border-bottom:1px solid var(--grid);padding-bottom:8px;margin-bottom:6px}
}

/* ---------- table totals ------------------------------------------ */
tfoot tr.totals td{border-top:2px solid var(--baseline);border-bottom:none;padding-top:10px;
  font-weight:700;font-size:13px;background:color-mix(in srgb,var(--ink-1) 3%,transparent)}
tfoot tr.totals td:first-child{color:var(--ink-2);font-weight:600}
tbody tr:hover td{background:color-mix(in srgb,var(--s1) 5%,transparent)}
tfoot tr:hover td{background:color-mix(in srgb,var(--ink-1) 3%,transparent)}

/* ---------- drill-down affordances -------------------------------- */
.tile.clickable{cursor:pointer;position:relative;transition:border-color .12s, transform .08s}
.tile.clickable:hover{border-color:var(--s1)}
.tile.clickable:active{transform:translateY(1px)}
.tile.clickable:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
.tile-go{position:absolute;top:12px;right:13px;color:var(--ink-muted);font-size:17px;line-height:1}
.tile.clickable:hover .tile-go{color:var(--s1)}
.attn-row{display:flex;align-items:flex-start;gap:10px;padding:8px 6px;border-bottom:1px solid var(--grid);
  cursor:pointer;border-radius:8px;position:relative}
.attn-row:last-child{border-bottom:none}
.attn-row:hover{background:color-mix(in srgb,var(--s1) 6%,transparent)}
.attn-row:focus-visible{outline:2px solid var(--s1);outline-offset:-2px}
.attn-row > span:first-child{flex:1}
.attn-row .tile-go{position:static;flex:none;margin-top:1px}
.filter-chip{display:inline-flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--s1) 10%,var(--surface-1));
  border:1px solid var(--border);border-radius:99px;padding:5px 6px 5px 14px;font-size:12.5px;margin-bottom:12px}

/* ---------- estimating ------------------------------------------- */
.items.costing .items-head,.items.costing .items-row{
  grid-template-columns:var(--part,) minmax(0,2fr) 56px 66px 84px 76px 84px 92px 30px}
.doc-scope{margin-bottom:14px}
.doc-scope h3{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#777;font-weight:700;margin-bottom:3px}
.doc-sign{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px;margin-top:22px;padding-top:6px}
.doc-sign div{display:flex;flex-direction:column-reverse;gap:4px}
.doc-sign span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#777;font-weight:700}
.doc-sign i{display:block;border-bottom:1px solid #999;height:26px}
@media(max-width:980px){
  .items.costing .items-head{display:none}
  .items.costing .items-row{grid-template-columns:1fr 1fr;gap:5px;border-bottom:1px solid var(--grid);
    padding-bottom:9px;margin-bottom:6px}
}

/* ---------- install / offline / update ---------------------------- */
.install-steps{margin:0 0 4px 18px;font-size:13.5px;line-height:1.7}
.install-steps li{margin-bottom:6px}
.offline-bar{position:fixed;left:0;right:0;bottom:0;background:var(--s4);color:#1a1a19;
  padding:9px 16px;font-size:13px;text-align:center;z-index:80;font-weight:600}
.sample-bar{position:fixed;left:0;right:0;bottom:0;background:var(--s3);color:#fff;
  padding:9px 16px;font-size:13px;text-align:center;z-index:82;font-weight:500;
  display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.sample-bar button{background:#fff;color:var(--s3);border:none;font-weight:700;padding:5px 12px}
.start-steps{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.start-step{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--grid);
  border-radius:10px;font-size:13.5px}
.start-step.done{opacity:.6}
.start-step .tick{font-size:16px;width:22px;text-align:center}
.start-step button{margin-left:auto}
.cap-ctx{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap;
  padding:10px;border:1px dashed var(--baseline);border-radius:10px}
.cap-ctx select{width:auto;min-width:150px}
.update-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:var(--ink-1);
  color:var(--page);padding:10px 14px;border-radius:12px;font-size:13px;z-index:85;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:10px}
.update-bar button{background:var(--page);color:var(--ink-1);border:none}
#btnInstall{border-color:var(--s1);color:var(--s1);font-weight:600}
@media (display-mode: standalone){
  #btnInstall{display:none}
  header.app{padding-top:max(12px, env(safe-area-inset-top))}
  body{padding-bottom:env(safe-area-inset-bottom)}
}

/* ---------- dialog close + sticky actions ------------------------- */
dialog h3{position:relative;padding-right:34px}
.dlg-x{position:absolute;top:-4px;right:-4px;width:30px;height:30px;padding:0;border:none;
  background:transparent;color:var(--ink-muted);font-size:15px;line-height:1;border-radius:8px;
  display:grid;place-items:center;cursor:pointer}
.dlg-x:hover{background:color-mix(in srgb,var(--ink-1) 8%,transparent);color:var(--ink-1);border:none}
.dlg-x:focus-visible{outline:2px solid var(--s1);outline-offset:1px}
.dialog-actions{position:sticky;bottom:-20px;background:var(--surface-1);padding:12px 0 2px;
  margin-bottom:-2px;border-top:1px solid var(--grid);z-index:2}
.doc-dialog .dialog-actions{border-top:none}
@media(max-width:700px){
  dialog{width:96vw;max-height:92dvh;padding:16px}
  .dialog-actions{flex-wrap:wrap;gap:6px}
  .dialog-actions button{flex:1;min-width:96px}
  .dialog-actions .left{flex-basis:100%;margin-right:0}
}

/* ---------- reports ----------------------------------------------- */
.report-layout{display:grid;grid-template-columns:216px 1fr;gap:18px;align-items:start}
.report-nav{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:8px;
  position:sticky;top:104px}
.report-nav button{display:block;width:100%;text-align:left;border:none;background:transparent;
  padding:7px 10px;border-radius:8px;color:var(--ink-2);font-size:13px}
.report-nav button:hover{background:color-mix(in srgb,var(--s1) 8%,transparent);border:none}
.report-nav button.on{background:var(--s1);color:#fff;font-weight:600}
.rep-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);
  font-weight:700;padding:12px 10px 5px}
.rep-group:first-child{padding-top:4px}
.report-main{min-width:0}
.report-main .controls{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;
  padding:12px;margin-bottom:16px}
.report-table{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.report-table th{padding:9px 10px}
.report-table td{padding:9px 10px}
.report-card{padding:16px}
.report-head{cursor:pointer;margin-bottom:12px}
.report-head h3{font-size:15px;font-weight:800;letter-spacing:-.01em}
.tiles.compact{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:14px}
.tiles.compact .tile{padding:10px 12px}
.tiles.compact .tile .v{font-size:19px}
tr.warnrow td{background:color-mix(in srgb,var(--s4) 12%,transparent)}
.trend{display:flex;gap:8px;align-items:flex-end;height:170px;padding-top:8px}
.trend-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.trend-bars{flex:1;display:flex;gap:3px;align-items:flex-end;width:100%;justify-content:center}
.tb{width:42%;border-radius:4px 4px 0 0;min-height:2px}
.tb.rev{background:var(--s1)}
.tb.cost{background:var(--s2)}
.trend-lab{font-size:10.5px;color:var(--ink-muted);white-space:nowrap}
.report-print table{width:100%;border-collapse:collapse;font-size:10.5px;margin-bottom:10px}
.report-print th,.report-print td{border-bottom:1px solid #ddd;padding:4px 6px;text-align:left}
.report-print .num{text-align:right}
.report-print .minibar,.report-print button{display:none}
@media(max-width:900px){
  .report-layout{grid-template-columns:1fr}
  .report-nav{position:static;display:flex;flex-wrap:wrap;gap:4px}
  .report-nav button{width:auto}
  .rep-group{width:100%;padding:6px 4px 2px}
}
.callout.warn{background:color-mix(in srgb,var(--s4) 14%,var(--surface-1))}

/* ---------- capture inbox ----------------------------------------- */
.doc-row{display:flex;gap:14px;align-items:flex-start;padding:12px 4px;border-bottom:1px solid var(--grid)}
.doc-row:last-child{border-bottom:none}
.doc-face{width:44px;height:44px;flex:none;border-radius:10px;background:var(--surface-1);
  border:1px solid var(--border);display:grid;place-items:center;font-size:19px;cursor:pointer}
.doc-face:hover{border-color:var(--s1)}
.doc-main{flex:1;min-width:0}
.doc-main .doc-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}
.doc-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin-top:3px}
.doc-match{font-size:12px;color:var(--good-text);margin-top:2px}
.conf{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:11.5px}
.conf-bar{width:120px;height:5px;background:var(--grid);border-radius:99px;overflow:hidden}
.conf-bar div{height:100%;border-radius:99px}
.doc-actions{display:flex;gap:6px;flex-wrap:wrap;flex:none}
.review-split{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;align-items:start}
.review-img{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;
  min-height:340px;max-height:56vh;overflow:auto;display:grid;place-items:center;padding:8px}
.review-img img{max-width:100%;border-radius:8px}
@media(max-width:860px){
  .review-split{grid-template-columns:1fr}
  /* min-height beats max-height in CSS, so the 340px floor was keeping the
     preview half a phone screen tall and pushing every field below the fold.
     On a phone it becomes a strip you tap to see full size. */
  .review-img{min-height:0;height:104px;max-height:104px;overflow:hidden;
    position:relative;cursor:pointer;padding:0}
  .review-img img,.review-img iframe{width:100%;height:100%;object-fit:cover;border-radius:11px;pointer-events:none}
  .review-img::after{content:"Tap to see it full size";position:absolute;inset:auto 0 0 0;
    background:linear-gradient(transparent,rgba(8,14,26,.72));color:#fff;
    font-size:11px;font-weight:650;padding:14px 8px 5px;text-align:center}
  .review-img .empty{font-size:12px;padding:0}
  .doc-row{flex-wrap:wrap}.doc-actions{width:100%}}
.pack-atts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:8px}
.pack-att{margin:0}
.pack-img{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;min-height:180px;
  display:grid;place-items:center;overflow:hidden}
.pack-img img{max-width:100%;max-height:320px;display:block}
.pack-att figcaption{font-size:11.5px;color:var(--ink-muted);margin-top:5px;word-break:break-word}
@media print{.pack-atts{grid-template-columns:1fr 1fr}.pack-att{break-inside:avoid}}

/* ---------- notifications ----------------------------------------- */
#btnBell{position:relative;font-size:14px;padding:3px 8px}
.bell-dot{position:absolute;top:-6px;right:-6px;background:var(--critical);color:#fff;font-size:10px;
  font-weight:700;min-width:16px;height:16px;border-radius:99px;display:grid;place-items:center;padding:0 4px}
.bell-panel{position:fixed;top:58px;right:16px;width:min(400px,94vw);max-height:70vh;overflow:auto;
  background:var(--surface-1);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);z-index:70}
.bell-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--grid);position:sticky;top:0;background:var(--surface-1)}
.bell-row{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-bottom:1px solid var(--grid);
  cursor:pointer;font-size:13px}
.bell-row:hover{background:color-mix(in srgb,var(--s1) 6%,transparent)}
.bell-row.unread{background:color-mix(in srgb,var(--s1) 4%,transparent)}
.bell-row.unread b{color:var(--ink-1)}
.bell-row > div{flex:1;min-width:0}
.bell-ic{flex:none;font-size:15px;line-height:1.4}
.bell-foot{padding:10px 14px;font-size:11.5px;border-top:1px solid var(--grid)}
.watchers{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0}
.watcher-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-1);
  border:1px solid var(--border);border-radius:99px;padding:3px 6px 3px 11px;font-size:12.5px}
.watcher-chip button{border:none;background:none;padding:0 2px;color:var(--ink-muted);font-size:12px}
.watcher-chip.on{background:color-mix(in srgb,var(--s1) 12%,var(--surface-1));border-color:var(--s1)}
.jobteam{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}

/* =====================================================================
   v1.12 professional shell and dashboard refinement
   Keeps the no-build architecture while giving the app a commercial SaaS
   hierarchy on desktop and a purpose-built mobile navigation pattern.
   ===================================================================== */
:root{
  --surface-1:#ffffff; --surface-2:#f8fafc; --page:#f3f6fa;
  --ink-1:#101828; --ink-2:#475467; --ink-muted:#667085;
  --grid:#eaecf0; --baseline:#d0d5dd; --border:#e4e7ec;
  --s1:#246fd0; --s2:#e76435; --s3:#0e9f6e; --s4:#d98e04;
  --good:#079455; --warn:#dc6803; --critical:#d92d20; --good-text:#067647;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --shadow-lg:0 18px 48px rgba(16,24,40,.16);
  --sidebar:#0d1b2f; --sidebar-2:#132743; --sidebar-text:#d8e2f0; --sidebar-muted:#8fa1b8;
}
:root[data-theme="dark"]{
  --surface-1:#172033; --surface-2:#111827; --page:#0b1220;
  --ink-1:#f8fafc; --ink-2:#cbd5e1; --ink-muted:#94a3b8;
  --grid:#263247; --baseline:#3a475d; --border:#2c394e;
  --s1:#5b9cf0; --s2:#f07a4c; --s3:#34c38f; --s4:#e9a93a;
  --good:#34c38f; --warn:#e9a93a; --critical:#f97066; --good-text:#6ce9b4;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.28);
  --shadow-lg:0 20px 54px rgba(0,0,0,.45);
  --sidebar:#07111f; --sidebar-2:#10213a; --sidebar-text:#e2e8f0; --sidebar-muted:#8fa1b8;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface-1:#172033; --surface-2:#111827; --page:#0b1220;
    --ink-1:#f8fafc; --ink-2:#cbd5e1; --ink-muted:#94a3b8;
    --grid:#263247; --baseline:#3a475d; --border:#2c394e;
    --s1:#5b9cf0; --s2:#f07a4c; --s3:#34c38f; --s4:#e9a93a;
    --good:#34c38f; --warn:#e9a93a; --critical:#f97066; --good-text:#6ce9b4;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.28);
    --shadow-lg:0 20px 54px rgba(0,0,0,.45);
    --sidebar:#07111f; --sidebar-2:#10213a; --sidebar-text:#e2e8f0; --sidebar-muted:#8fa1b8;
  }
}

body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}
button,.btn,input,select,textarea{font-family:inherit}
button{font-weight:550}
button.primary{box-shadow:0 1px 2px rgba(36,111,208,.2)}
button.primary:hover{filter:none;background:color-mix(in srgb,var(--s1) 91%,white);border-color:color-mix(in srgb,var(--s1) 91%,white)}

/* shell */
.app-shell{min-height:100dvh;display:grid;grid-template-columns:232px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;background:var(--sidebar);
  color:var(--sidebar-text);padding:20px 14px 14px;z-index:30;overflow-y:auto}
.sidebar-brand{padding:0 8px 22px}
.sidebar .brand{margin:0;gap:11px}
.sidebar .brand .mark{width:38px;height:38px;border-radius:10px;box-shadow:0 7px 18px rgba(36,111,208,.32)}
.sidebar .brand h1{font-size:20px;color:#fff;letter-spacing:-.035em}
.sidebar .brand h1 .wm-accent{color:#67a7fa}
.side-nav{display:flex;flex-direction:column;gap:18px;flex:1}
.nav-group{display:grid;gap:4px}
.nav-label{padding:0 12px 6px;color:var(--sidebar-muted);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.11em}
.side-nav button{width:100%;display:flex;align-items:center;gap:11px;padding:10px 12px;border:0;border-radius:10px;
  background:transparent;color:var(--sidebar-text);text-align:left;font-size:13.5px;font-weight:550;box-shadow:none}
.side-nav button:hover{background:rgba(255,255,255,.07);border:0;color:#fff}
.side-nav button.active{background:linear-gradient(135deg,rgba(76,145,237,.25),rgba(76,145,237,.13));color:#fff;
  box-shadow:inset 3px 0 0 #5b9cf0}
.side-nav button[aria-current="page"]{font-weight:700}
.nav-ic{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;color:#9fc6fa;font-size:15px;line-height:1;flex:none}
.side-nav button.active .nav-ic{background:rgba(91,156,240,.18);color:#fff}
.sidebar-company{display:flex;align-items:center;gap:10px;padding:12px 10px 4px;border-top:1px solid rgba(255,255,255,.09);margin-top:16px;min-width:0}
.company-avatar,.user-avatar{display:grid;place-items:center;flex:none;border-radius:10px;background:linear-gradient(135deg,var(--s1),#75aef5);color:#fff;font-weight:800}
.company-avatar{width:34px;height:34px;font-size:13px}
.sidebar-company-copy{display:flex;flex-direction:column;min-width:0}
.sidebar-company strong{font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-company small{font-size:11px;color:var(--sidebar-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workspace{min-width:0;position:relative}
header.app{height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 28px;
  background:color-mix(in srgb,var(--surface-1) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);
  flex-wrap:nowrap;position:sticky;top:0;z-index:25}
.page-heading{min-width:0}
.page-kicker{display:block;font-size:10.5px;font-weight:750;text-transform:uppercase;letter-spacing:.085em;color:var(--ink-muted);line-height:1.2;margin-bottom:2px}
.page-heading h1{font-size:22px;line-height:1.15;letter-spacing:-.025em;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-actions{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn,.user-button{height:38px;min-width:38px;padding:0;border:1px solid var(--border);background:var(--surface-1);display:grid;place-items:center;border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.icon-btn:hover,.user-button:hover{background:var(--surface-2);border-color:var(--baseline)}
#btnBell{font-size:15px;padding:0;width:38px}
.create-btn{height:38px;display:inline-flex;align-items:center;gap:5px;padding:0 14px;border-radius:10px;font-size:13px;font-weight:700}
.create-btn>span:first-child{font-size:17px;line-height:1}
.user-button{display:flex;gap:5px;padding:3px 7px 3px 4px}
.user-avatar{width:30px;height:30px;font-size:12px;border-radius:8px}
.user-chevron{font-size:13px;color:var(--ink-muted)}
main{padding:24px 28px 46px;max-width:1460px;margin:0 auto}

/* shell menus */
.shell-menu{position:fixed;right:24px;top:64px;background:var(--surface-1);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-lg);z-index:78;padding:8px;animation:menu-in .12s ease-out}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.create-menu{width:310px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.menu-title{grid-column:1/-1;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-muted);padding:5px 8px 7px}
.create-menu button{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:8px;text-align:left;padding:10px;border:0;background:transparent;border-radius:10px}
.create-menu button:hover{background:color-mix(in srgb,var(--s1) 7%,var(--surface-1));border:0}
.create-menu button>span{grid-row:1/3;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--s1) 10%,var(--surface-2));color:var(--s1);display:grid;place-items:center;font-size:13px}
.create-menu b{font-size:12.5px;color:var(--ink-1)}
.create-menu small{font-size:10.5px;color:var(--ink-muted);line-height:1.25;margin-top:1px}
.user-menu{width:260px}
.user-summary{display:flex;gap:10px;align-items:center;padding:8px}
.user-summary>div{display:flex;flex-direction:column;min-width:0}
.user-summary strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-summary span:not(.user-avatar){font-size:11.5px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-sep{height:1px;background:var(--grid);margin:5px 0}
.user-menu>button{display:flex;width:100%;align-items:center;gap:10px;border:0;background:transparent;padding:9px 10px;border-radius:9px;text-align:left;color:var(--ink-2)}
.user-menu>button:hover{background:var(--surface-2);color:var(--ink-1);border:0}
.user-menu #btnSignOut{color:var(--critical)}
.bell-panel{top:64px;right:156px}

/* dashboard hierarchy */
.dash-group{margin-bottom:20px}
.dash-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 1px 10px}
.dash-section-head h2{font-size:15px;letter-spacing:-.01em}
.dash-section-head p{font-size:12px;color:var(--ink-muted)}
.tiles.dash-primary{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:0}
.tiles.dash-secondary{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:0}
.metric-card{position:relative;min-width:0;overflow:hidden}
.tile.metric-card{border-color:var(--border);box-shadow:0 1px 2px rgba(16,24,40,.035);padding:16px}
.dash-primary .metric-card{min-height:148px;padding:17px 18px}
.dash-secondary .metric-card{min-height:112px;padding:13px 14px;background:color-mix(in srgb,var(--surface-1) 88%,var(--surface-2))}
.metric-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.metric-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--s1) 10%,var(--surface-2));color:var(--s1);font-size:14px;font-weight:800}
.metric-card.bad .metric-icon{background:color-mix(in srgb,var(--critical) 10%,var(--surface-2));color:var(--critical)}
.metric-card.good .metric-icon{background:color-mix(in srgb,var(--good) 11%,var(--surface-2));color:var(--good-text)}
.metric-card .tile-go{position:static;color:var(--ink-muted);font-size:18px}
.metric-card .k{font-size:12px;color:var(--ink-2);font-weight:600;margin-bottom:3px}
.metric-card .v{font-size:28px;line-height:1.12;font-weight:760;letter-spacing:-.035em;margin:0;color:var(--ink-1);font-variant-numeric:tabular-nums}
.dash-secondary .metric-card .v{font-size:22px}
.metric-card .d{font-size:11.5px;line-height:1.35;margin-top:7px;color:var(--ink-muted)}
.metric-card:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(16,24,40,.08)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr);gap:16px;align-items:start}
.dashboard-grid .card{margin:0;min-width:0}
.chart-card #chart{min-height:230px}
.attention-card{max-height:385px;overflow:auto}
.attention-card .attn-row{padding:11px 7px;line-height:1.38}
.attention-card .empty{padding:40px 12px}

/* cards, controls and data tables */
.card,.tile{border-color:var(--border);background:var(--surface-1)}
.card{border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.03);padding:18px;margin-bottom:16px}
.card h2{font-size:14.5px;letter-spacing:-.005em;margin-bottom:12px}
.controls{padding:2px 0 4px;gap:9px}
input,select,textarea{border-color:var(--baseline);background:var(--surface-1);min-height:38px}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--s1) 55%,var(--baseline))}
.seg{padding:3px;background:var(--surface-2);border-color:var(--grid);border-radius:11px}
.seg button{border-radius:8px!important;padding:7px 12px}
.seg button.on{box-shadow:0 1px 2px rgba(16,24,40,.08)}
table{font-size:12.75px}
th{background:var(--surface-2);color:var(--ink-muted);padding:9px 10px;border-bottom-color:var(--border);font-size:10.5px;letter-spacing:.055em;position:sticky;top:0;z-index:1}
td{padding:11px 10px;border-bottom-color:var(--grid)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td,.clickrow:hover td{background:color-mix(in srgb,var(--s1) 4.5%,var(--surface-1))}
.pill{padding:3px 8px;font-size:10.75px;background:var(--surface-1)}
.sub{font-size:11.25px;line-height:1.4;margin-top:2px}
.jobtitle h1{font-size:22px}
.report-nav,.report-table,.report-main .controls{border-color:var(--border);box-shadow:0 1px 2px rgba(16,24,40,.025)}

/* mobile navigation and sheets */
.mobile-nav,.mobile-sheet,.mobile-menu-backdrop{display:none}

@media(max-width:1100px){
  .tiles.dash-primary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles.dash-secondary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-grid{grid-template-columns:1fr}
  .attention-card{max-height:none}
}

@media(max-width:900px){
  /* --bottom-bar is the measured height of the fixed nav, set by main.js.
     The 72px fallback only applies for the instant before it is measured.
     The reserve must live on MAIN, not body: body is height:100%, so a
     padding-bottom there sits pinned at the viewport edge while the
     overflowing page scrolls straight past it — seen on a real iPhone as
     the last table row hiding behind the tab bar. main has no fixed
     height, so padding on it genuinely extends the scroll run-out.
     (The padding itself is on the main{} rule below.) */
  .app-shell{display:block;min-height:100dvh}
  .sidebar{display:none}
  header.app{height:62px;padding:8px 14px;top:0}
  .page-kicker{display:none}
  .page-heading h1{font-size:19px}
  .create-btn{height:36px;padding:0 11px}
  .create-label{display:none}
  .create-btn>span:first-child{font-size:20px}
  .icon-btn,.user-button{height:36px;min-width:36px}
  #btnBell{width:36px}
  .user-avatar{width:28px;height:28px}
  .user-chevron{display:none}
  main{padding:16px 14px calc(var(--bottom-bar, 72px) + 20px);max-width:none}
  .mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;z-index:66;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface-1) 94%,transparent);
    backdrop-filter:blur(16px);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(16,24,40,.06)}
  .mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:var(--ink-muted);padding:4px 2px;border-radius:9px;min-width:0}
  .mobile-nav button>span{height:20px;display:grid;place-items:center;font-size:17px;font-weight:750}
  .mobile-nav button small{font-size:10px;font-weight:650;white-space:nowrap}
  .mobile-nav button.active{color:var(--s1);background:color-mix(in srgb,var(--s1) 8%,transparent)}
  .mobile-menu-backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:74;backdrop-filter:blur(2px)}
  .mobile-sheet{display:block;position:fixed;left:10px;right:10px;bottom:calc(68px + env(safe-area-inset-bottom));z-index:75;
    background:var(--surface-1);border:1px solid var(--border);border-radius:18px;padding:8px;box-shadow:var(--shadow-lg);max-height:68dvh;overflow:auto}
  .mobile-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 10px}
  .mobile-sheet-head strong{font-size:15px}
  .mobile-sheet-head button{width:32px;height:32px;padding:0;border:0;background:var(--surface-2);font-size:19px}
  .mobile-sheet>button:not([data-close-sheet]){display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 10px;border:0;border-radius:10px;background:transparent;text-align:left;color:var(--ink-1)}
  .mobile-sheet>button:hover{background:var(--surface-2);border:0}
  .mobile-sheet>button span{color:var(--ink-muted);font-size:18px}
  .shell-menu{right:12px;top:55px;max-width:calc(100vw - 24px)}
  .create-menu{width:min(360px,calc(100vw - 24px))}
  .user-menu{width:min(300px,calc(100vw - 24px))}
  .bell-panel{top:55px;right:12px;width:min(400px,calc(100vw - 24px))}
  .report-nav{top:auto}
  .sample-bar{bottom:calc(68px + env(safe-area-inset-bottom))}
  .offline-bar{bottom:calc(68px + env(safe-area-inset-bottom))}
}

@media(max-width:620px){
  .dash-section-head p{display:none}
  .tiles.dash-primary,.tiles.dash-secondary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dash-primary .metric-card{min-height:132px;padding:14px}
  .dash-secondary .metric-card{min-height:104px;padding:12px}
  .metric-top{margin-bottom:9px}
  .metric-icon{width:27px;height:27px;border-radius:8px;font-size:12px}
  .metric-card .k{font-size:11px;line-height:1.25;min-height:27px}
  .metric-card .v{font-size:23px;letter-spacing:-.04em}
  .dash-secondary .metric-card .v{font-size:20px}
  .metric-card .d{font-size:10.75px;margin-top:5px}
  .card{padding:15px;border-radius:13px}
  .chart-card #chart{min-height:205px}
  .create-menu{grid-template-columns:1fr}
  .create-menu button{grid-template-columns:28px 1fr}
  .create-menu small{display:none}
  .form-grid{gap:10px}
}

@media(max-width:380px){
  .tiles.dash-primary,.tiles.dash-secondary{grid-template-columns:1fr}
  .dash-primary .metric-card,.dash-secondary .metric-card{min-height:auto}
}

@media (display-mode:standalone) and (max-width:900px){
  header.app{padding-top:max(8px,env(safe-area-inset-top));height:calc(62px + env(safe-area-inset-top))}
}

/* native compact controls should not inherit full-size text-input dimensions */
input[type="checkbox"],input[type="radio"]{
  width:16px;height:16px;min-height:0;padding:0;flex:none;accent-color:var(--s1)
}

/* semantic form groups, locked records and field-role workspace */
.fieldset-reset{border:0;padding:0;margin:0;min-width:0}
.fieldset-reset legend{display:block;width:100%;font-size:12px;font-weight:650;color:var(--ink-2);margin-bottom:7px}
.field-help{margin:0;align-self:end;min-height:18px}
.record-lock-note{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--s1) 7%,var(--surface-2));border:1px solid color-mix(in srgb,var(--s1) 18%,var(--border));color:var(--ink-2);font-size:12px;line-height:1.45}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--ink-muted);cursor:not-allowed;opacity:.86}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.card-head h2{margin:0 0 3px}
.card-head p{font-size:12px;color:var(--ink-muted);margin:0}
.eyebrow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;color:var(--s1);margin-bottom:5px}
.field-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;background:linear-gradient(120deg,color-mix(in srgb,var(--s1) 8%,var(--surface-1)),var(--surface-1) 58%)}
.field-hero h2{font-size:21px;margin:0 0 5px;letter-spacing:-.02em}
.field-hero p{color:var(--ink-2);font-size:13px;margin:0;line-height:1.45}
.field-capture{white-space:nowrap;min-height:42px}
.field-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.field-stat{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:11px;text-align:left;margin:0;padding:15px;border:1px solid var(--border);cursor:pointer}
.field-stat>span{grid-row:1/3;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--s1) 10%,var(--surface-2));color:var(--s1);font-weight:800}
.field-stat b{font-size:23px;line-height:1;font-variant-numeric:tabular-nums}
.field-stat small{font-size:11px;color:var(--ink-muted);margin-top:4px}
.field-stat.warn>span{background:color-mix(in srgb,var(--warning) 10%,var(--surface-2));color:var(--warning)}
.field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.field-list{display:flex;flex-direction:column}
.field-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:11px 3px;border:0;border-bottom:1px solid var(--grid);border-radius:0;background:transparent;text-align:left;color:var(--ink-1)}
.field-row:last-child{border-bottom:0}
.field-row:hover{background:color-mix(in srgb,var(--s1) 4.5%,var(--surface-1));border-color:var(--grid)}
.field-row>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.field-row b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field-row small{font-size:11px;color:var(--ink-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field-row i{font-style:normal;color:var(--ink-muted);font-size:18px}
.field-date{min-width:88px;font-size:11px;font-weight:700;color:var(--s1)}
.job-dot{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 12%,transparent)}

@media(max-width:900px){
  body.role-field .mobile-nav{grid-template-columns:repeat(4,1fr)}
  .field-hero{align-items:flex-start;flex-direction:column;padding:18px}
  .field-capture{width:100%}
  .field-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .field-summary{grid-template-columns:1fr}
  .field-stat{grid-template-columns:32px 1fr;grid-template-rows:auto auto;padding:12px}
  .field-stat>span{width:32px;height:32px}
  .field-stat b{font-size:20px}
  .card-head{align-items:center}
  .field-date{min-width:76px}
}
.field-job-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.field-job-card{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:16px;background:var(--surface-1);border:1px solid var(--border);border-radius:12px;text-align:left;color:var(--ink-1)}
.field-job-card:hover{border-color:color-mix(in srgb,var(--s1) 42%,var(--border));box-shadow:0 7px 18px rgba(16,24,40,.06)}
.field-job-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.field-job-card strong{font-size:14px}
.field-job-card>span:not(.field-job-top){font-size:12px;color:var(--ink-2)}
.field-job-card small{display:flex;justify-content:space-between;align-items:center;color:var(--ink-muted);margin-top:4px}
.field-job-card small i{font-size:18px;font-style:normal}
.field-job-head{align-items:flex-start}
.field-notes{white-space:pre-wrap;line-height:1.55;color:var(--ink-2)}
.field-date-value{font-size:15px!important;line-height:1.15!important}
@media(max-width:700px){.field-job-cards{grid-template-columns:1fr}.field-job-head{flex-direction:column}.field-job-head .jobactions,.field-job-head .jobactions button{width:100%}}

/* Team permissions */
.team-access-list{display:grid;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.team-access-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;background:var(--surface-2);border-bottom:1px solid var(--grid)}
.team-access-row:last-child{border-bottom:0}
.team-person{display:flex;align-items:center;gap:10px;min-width:0}
.team-person>span:last-child{display:grid;min-width:0}
.team-person strong,.team-person small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-person small{color:var(--ink-muted);font-size:12px}
.team-access-row select{width:auto;min-width:145px}
@media(max-width:560px){.team-access-row{align-items:flex-start;flex-direction:column}.team-access-row select{width:100%}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Native checkboxes should stay compact even though text inputs use a 38px control height. */
input[type="checkbox"]{
  width:16px!important;min-width:16px!important;height:16px!important;min-height:16px!important;
  padding:0!important;margin:0;accent-color:var(--brand);border-radius:4px;flex:0 0 16px;
}
.inline-check{display:inline-flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;min-height:38px}

/* =====================================================================
   NATIVE FEEL ON A PHONE  (appended last so it wins the cascade)
   These are the details that give a web app away on iOS: the blue flash
   on tap, rubber-band scrolling revealing white, long-press selecting
   the UI chrome, the 300ms double-tap delay, and — the worst one — the
   page zooming whenever you touch a field smaller than 16px.
   ===================================================================== */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
button,.btn,.icon-btn,.sidebar,.topbar,header.app,.mobile-nav,.tile,.nav-label,
.seg,th,.sidebar-brand,.page-heading,.pill,.status-pill,.user-button{
  -webkit-user-select:none;user-select:none}
input,textarea,select,td,p,pre,code,.doc,[contenteditable]{-webkit-user-select:auto;user-select:auto}
button,a,.tile,.icon-btn,.mobile-nav button,.sidebar nav button,summary{touch-action:manipulation}
main,.bell-panel,.shell-menu,dialog,.sidebar{-webkit-overflow-scrolling:touch}

@media (pointer:coarse){
  /* 16px is exactly the line below which iOS zooms the page on focus */
  input,select,textarea{font-size:16px}
  .items-row input{font-size:15px;padding:8px}
  button,.btn{font-size:15px;min-height:42px}
  button.small{font-size:13.5px;min-height:34px}
  .icon-btn{width:40px;height:40px}
  .sidebar nav button{min-height:46px}
}

/* respect the notch and the home indicator once installed */
@supports(padding:max(0px)){
  header.app{padding-top:max(12px,env(safe-area-inset-top))}
  .sidebar{padding-top:env(safe-area-inset-top)}
}

/* On a phone a centred box reads as a web pop-up. Native apps slide a sheet
   up from the bottom edge, with the actions pinned in thumb reach. */
@keyframes jsSheetUp{from{transform:translateY(16px);opacity:.5}to{transform:none;opacity:1}}
@media(max-width:860px){
  dialog{width:100vw;max-width:none;margin:auto auto 0;
    border-radius:18px 18px 0 0;border-left:none;border-right:none;border-bottom:none;
    max-height:92dvh;padding:18px 16px calc(14px + env(safe-area-inset-bottom));
    animation:jsSheetUp .2s ease}
  dialog.wide{max-width:none}
  dialog::backdrop{background:rgba(0,0,0,.45)}
  dialog h3{font-size:17px;margin-bottom:16px}
  .dialog-actions{position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom));
    background:var(--surface-1);border-top:1px solid var(--grid);
    padding:12px 0 calc(12px + env(safe-area-inset-bottom));margin-top:10px;
    flex-wrap:wrap;gap:8px}
  .dialog-actions button{flex:1;min-width:104px}
  .dialog-actions .left{flex-basis:100%;margin-right:0;order:2}
}
@media(prefers-reduced-motion:reduce){dialog{animation:none}}

/* ---- password show/hide -------------------------------------------------
   A second "confirm password" box only proves you typed the same thing twice;
   being able to read it is what actually catches a typo. Only the input's type
   attribute changes, so password managers still recognise and fill the field. */
.pw-wrap{position:relative;display:block}
.pw-wrap>input{width:100%;padding-right:44px}
.pw-peek{position:absolute;top:50%;right:5px;transform:translateY(-50%);
  width:34px;height:34px;min-height:0;padding:0;border:0;border-radius:9px;
  background:transparent;color:var(--ink-muted);font-size:15px;line-height:1;
  cursor:pointer;display:grid;place-items:center;opacity:.62}
.pw-peek:hover{background:color-mix(in srgb,var(--s1) 9%,transparent);opacity:1}
.pw-peek:focus-visible{outline:2px solid var(--s1);outline-offset:1px;opacity:1}
.pw-peek.on{color:var(--s1);opacity:1}
@media (pointer:coarse){
  .pw-wrap>input{padding-right:50px}
  .pw-peek{width:40px;height:40px;right:4px;font-size:17px}
}

/* Helper text that belongs to the field above it. label.field is a flex column,
   so a plain .note would inherit the field gap and read as a separate row. */
label.field>.field-note{font-size:11.5px;line-height:1.45;color:var(--ink-muted);margin:-1px 0 7px}
#authForm,#coForm{gap:15px}
label.field>span>i{font-style:normal;color:var(--ink-muted);font-weight:400}

/* ---- "put me on your home screen" -------------------------------------
   Shown once on phones that are still running JobSnap in a browser tab. The
   browser chrome above and below is the single biggest reason it reads as a
   website; installed, the same code is indistinguishable from a store app. */
.install-nudge{
  position:fixed;left:10px;right:10px;z-index:65;
  bottom:74px;   /* replaced at runtime with the measured mobile-nav height */
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;border-radius:15px;
  background:var(--surface-1);border:1px solid var(--border);
  box-shadow:0 12px 34px rgba(12,22,40,.24);
  animation:jsSheetUp .26s ease}
.install-nudge img{border-radius:9px;flex:none}
.install-nudge-copy{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}
.install-nudge-copy b{font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.install-nudge-copy span{font-size:11.5px;line-height:1.35;color:var(--ink-muted)}
.install-nudge .primary{flex:none;white-space:nowrap}
.install-nudge-x{width:30px;height:30px;min-height:0;flex:none;
  border:0;background:transparent;color:var(--ink-muted);font-size:19px;line-height:1}
@media(min-width:861px){.install-nudge{display:none}}

/* The Inbox review screen asks four things; everything else lives behind this. */
.rv-more{margin-top:12px;border-top:1px solid var(--grid);padding-top:10px}
.rv-more>summary{cursor:pointer;font-size:12px;font-weight:650;color:var(--ink-2);
  list-style:none;padding:4px 0;user-select:none}
.rv-more>summary::-webkit-details-marker{display:none}
.rv-more>summary::before{content:"▸ ";color:var(--ink-muted)}
.rv-more[open]>summary::before{content:"▾ "}
.rv-more>summary:hover{color:var(--s1)}
.rv-more .form-grid{margin-top:10px}

/* ---- financial tables become cards on a phone -------------------------
   A twelve-column invoice table on a 390px screen scrolls sideways and every
   number loses its heading. Below 860px each row restacks into a card and each
   cell carries its column heading, copied on by main.js. */
@media (max-width:860px){
  table.cardify{display:block;border:0}
  table.cardify thead{display:none}
  table.cardify tbody,table.cardify tfoot{display:block}
  table.cardify tr{display:block;background:var(--surface-1);border:1px solid var(--border);
    border-radius:13px;padding:11px 13px;margin-bottom:9px}
  table.cardify td{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    width:auto;border:0;padding:4px 0;text-align:right;font-size:13px}
  table.cardify td::before{content:attr(data-label);text-align:left;flex:none;
    color:var(--ink-muted);font-size:11.5px;font-weight:650;letter-spacing:.01em}
  /* the first column is the record's name — give it the weight of a card title */
  table.cardify tbody td:first-child{display:block;text-align:left;font-size:14.5px;
    font-weight:700;padding:0 0 7px;margin-bottom:5px;border-bottom:1px solid var(--grid)}
  table.cardify tbody td:first-child::before{display:none}
  /* a value's sub-caption belongs under it, not beside it */
  table.cardify td .sub{display:block;text-align:right;font-weight:400;
    font-size:11.5px;color:var(--ink-muted);margin-top:1px}
  table.cardify tbody td:first-child .sub{text-align:left}
  /* a cell with no heading holds the row's buttons */
  table.cardify td:not([data-label]){display:flex;justify-content:flex-end;flex-wrap:wrap;
    gap:7px;padding-top:9px;margin-top:5px;border-top:1px solid var(--grid)}
  table.cardify td:not([data-label]):empty{display:none}
  table.cardify td[colspan]{display:block;text-align:center;border:0;padding:14px 0}
  table.cardify td[colspan]::before{display:none}
  table.cardify tfoot tr{background:color-mix(in srgb,var(--s1) 7%,var(--surface-1));
    border-color:color-mix(in srgb,var(--s1) 22%,var(--border))}
  table.cardify tfoot td{font-weight:700}
  /* the wrapper no longer needs to scroll sideways */
  div[style*="overflow-x"]{overflow-x:visible !important}
}

/* "something is happening" while a photo is being prepared and uploaded */
.cap-busy{display:flex;align-items:center;gap:8px;margin-top:10px;
  color:var(--ink-2);font-size:12.5px}

/* ---- universal search -------------------------------------------------
   One box over everything already in memory. Opens on ⌘K or the header icon. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.search-dialog{width:min(640px,94vw);max-width:none;padding:0;overflow:hidden;
  border-radius:16px;margin-top:8vh}
.search-bar{display:flex;align-items:center;gap:9px;padding:12px 13px;
  border-bottom:1px solid var(--grid)}
.search-bar>span{font-size:16px;opacity:.55}
.search-bar input{flex:1;border:0;background:transparent;font-size:16px;padding:6px 0;outline:none}
.search-bar input::-webkit-search-cancel-button{display:none}
.search-results{max-height:min(58vh,470px);overflow:auto;padding:7px}
.search-results .empty{padding:22px 14px;text-align:center;font-size:12.5px;color:var(--ink-muted)}
.search-hit{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink-1)}
.search-hit.on,.search-hit:hover{background:color-mix(in srgb,var(--s1) 9%,transparent)}
.search-kind{flex:none;min-width:66px;font-size:10px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--pc);border:1px solid color-mix(in srgb,var(--pc) 35%,transparent);
  background:color-mix(in srgb,var(--pc) 10%,transparent);border-radius:6px;padding:3px 6px;text-align:center}
.search-copy{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.search-copy b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-copy small{font-size:11px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-amt{flex:none;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:860px){
  .search-dialog{width:100vw;margin:0;border-radius:0;max-height:100dvh;height:100dvh}
  .search-bar{padding-top:calc(12px + env(safe-area-inset-top))}
  .search-results{max-height:none;height:calc(100dvh - 74px)}
  .search-kind{min-width:58px}
}

/* ---- "who are they?" — asked once per new company, in the review screen ---- */
.who{margin:10px 0 4px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--s5,#fafafa)}
.who .who-q{font-size:13px;margin-bottom:8px;color:var(--ink-muted)}
.who .who-q b{color:var(--ink)}
.who-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.who-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;
  text-align:left;cursor:pointer;line-height:1.25;min-height:auto}
.who-opt b{font-size:13px;font-weight:600}
.who-opt span{font-size:11.5px;color:var(--ink-muted)}
.who-opt.on{border-color:var(--brand,#0a6);box-shadow:inset 0 0 0 1px var(--brand,#0a6);
  background:color-mix(in srgb,var(--brand,#0a6) 7%,#fff)}
.who.known{font-size:12.5px;color:var(--ink-muted);padding:8px 12px}
.who.known b{color:var(--ink)}
.who.known a{margin-left:4px}
@media (max-width:520px){.who-opts{grid-template-columns:1fr 1fr}}

/* ---- names on the books that have no vendor record yet ---- */
.unk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.unk{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 11px;
  border:1px solid var(--line);border-radius:9px;background:#fff;text-align:left;
  cursor:pointer;line-height:1.3;min-height:auto}
.unk b{font-size:13px}
.unk span{font-size:11.5px;color:var(--ink-muted)}