/* =====================================================================
   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:#6e6c66;
  --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;width:100%}
.items-row input.r{text-align:right}
/* Each field carries its own caption. Hidden here, where the column header
   above already says what it is; shown when the row restacks on a phone. */
.items-row .cell{display:block;min-width:0}
.items-row .cell>span{display:none}
.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}
}

/* A line item on a phone is a small labelled card, not a squeezed row.
   Below this width the fixed Qty/Unit/Rate/Amount columns are wider than the
   sheet itself, which collapsed the description field to nothing and pushed
   Amount and the remove ✕ off the right-hand edge of an overflow:hidden box.
   Restacking is the only honest answer: a contractor billing from his phone
   has to be able to type what the line is for. */
@media(max-width:700px){
  .items-head{display:none}
  .items-row,.items.costing .items-row{grid-template-columns:1fr 1fr;gap:9px 10px;
    padding:11px 10px;align-items:end}
  .items-row .cell[data-c="desc"],.items-row .cell[data-c="part"]{grid-column:1/-1}
  .items-row .cell>span{display:block;font-size:10.5px;text-transform:uppercase;
    letter-spacing:.04em;color:var(--ink-muted);font-weight:600;margin-bottom:3px}
  .items-row .cell[data-c="amt"]{align-self:end}
  .items-row .line-amt{font-size:15px;font-weight:600;color:var(--ink-1);padding:6px 0}
  /* the destructive control gets its own line and a real target, instead of
     a 30px ✕ crowded against the last input */
  .items-row [data-del]{grid-column:1/-1;justify-self:start;min-height:40px;min-width:96px;
    width:auto;font-size:12.5px}
  .items-row [data-del]::after{content:" Remove line"}
}

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

/* Row actions stay reachable. These financial tables carry a lot of columns,
   so on a narrower window the last cell sat past the right edge — the buttons
   existed but nobody could see them (the owner, live review: "I still don't see
   the changes"). Pin the actions cell to the right edge of the scroll area;
   below 860px rows restack as cards and the pin switches off. */
@media(min-width:861px){
  td.row-actions,th.row-actions{position:sticky;right:0;z-index:2;
    background:var(--surface-1);box-shadow:-10px 0 10px -10px rgba(0,0,0,.22)}
  tbody tr:hover td.row-actions,.clickrow:hover td.row-actions{
    background:color-mix(in srgb,var(--s1) 4.5%,var(--surface-1))}
}
/* ---------- what a smaller plan looks like ---------------------------
   Locked, never hidden. A feature nobody can see is never bought and never
   missed; a locked one is both. So a gated section keeps its place in the
   navigation and wears the name of the plan that opens it, rather than
   disappearing and leaving the app looking like it does less than it does. */
.nav-plan{margin-left:auto;padding:1px 6px;border-radius:999px;font-size:9.5px;
  letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  background:color-mix(in srgb,var(--s1) 14%,transparent);color:var(--s1)}
.side-nav button.nav-locked span:nth-child(2){opacity:.72}
.mobile-sheet button.nav-locked .nav-plan{margin-left:8px}

/* The trial banner and the usage meter. Neither shouts: the meter only turns
   amber once it is actually full, because counting down in alarm from invoice
   one would be nagging someone for using the thing they came here to use. */
.plan-banner,.plan-meter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 14px;border:1px solid var(--border);border-radius:10px;
  background:color-mix(in srgb,var(--s1) 5%,var(--surface-1));
  font-size:12.25px;color:var(--ink-1);line-height:1.45}
.plan-banner{margin:0 0 14px}
.plan-meter{margin:0 0 12px;padding:7px 12px;font-size:12px}
.plan-meter.full{background:color-mix(in srgb,var(--warn,#b45309) 8%,var(--surface-1));
  border-color:color-mix(in srgb,var(--warn,#b45309) 30%,var(--border))}
.plan-banner button,.plan-meter button{margin-left:auto;flex:none}
@media(max-width:640px){
  .plan-banner button,.plan-meter button{margin-left:0;width:100%}
}

.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;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 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)}

/* The sample banner's full sentence, on anything with room for it. */
.sample-bar .sample-short{display:none}
.sample-bar .sample-long{display:inline}

/* =====================================================================
   PHONE COMFORT  —  appended last so it wins every earlier rule.

   the owner, who runs this on an iPhone on site: "I want an easier design
   for the mobile app. Larger buttons and larger fonts for ease of
   operation and work."

   The principle, because "make everything bigger" is not actually a
   design: enlarge what you TOUCH and what you READ, and leave the rest
   alone. A phone screen gets easier when every control is a confident
   target and no number needs squinting at — not when every pixel of
   padding grows and half the screen becomes one card.

   Measured problems this replaces, all from the audit on 7 Aug 2026:
     · Edit 45x34 and Delete 60x34 with a 7px gap between them
     · the dialog close ✕ at 30x30, filter selects at 38px tall
     · 31 separate text nodes under 12px on the dashboard alone,
       five of them at 10px
     · the Books tab strip running 182px off the side of the screen
   ===================================================================== */
@media(max-width:860px){

  /* ---------- 1. everything you touch is at least 48px -------------- */
  /* Apple asks for 44pt and that is the floor, not the target. On a
     dusty site, one-handed, 48 is the difference between tapping and
     aiming. */
  button,.btn,select,input:not([type=checkbox]):not([type=radio]),textarea{
    min-height:48px}
  button.small{min-height:44px;font-size:14.5px;padding:0 14px}
  .icon-btn{width:48px;height:48px;font-size:19px}
  .dlg-x{width:44px;height:44px;font-size:19px;top:-8px;right:-8px}
  .pw-peek{width:44px;height:44px}
  .install-nudge button:last-child{width:44px;height:44px;font-size:20px}
  .mobile-sheet-head button{width:44px;height:44px;font-size:22px}
  textarea{min-height:96px}

  /* ---------- 2. a destructive button is never a near-miss ---------- */
  /* Delete used to sit seven pixels from Edit, both 34px tall. It now
     gets a full gap and is pushed to the far end of the row, so the
     thumb has to travel to reach it rather than land on it. */
  table.cardify td:not([data-label]){gap:12px;padding-top:12px;margin-top:8px}
  table.cardify td:not([data-label]) button{min-height:44px;min-width:88px;flex:0 0 auto}
  table.cardify td:not([data-label]) button.danger,
  table.cardify td:not([data-label]) [data-del]{margin-left:auto}
  .jobactions{gap:12px}

  /* ---------- 3. nothing you have to read is under 13px ------------- */
  body{font-size:15px}
  table.cardify td{font-size:15px;padding:6px 0}
  table.cardify td::before{font-size:13px}
  table.cardify tbody td:first-child{font-size:17px;padding-bottom:9px}
  table.cardify td .sub{font-size:13px}
  table.cardify td[colspan]{font-size:14.5px;line-height:1.55;padding:18px 4px}
  .sub{font-size:13px}
  .note,.hint,.field-note,label.field>.field-note,.muted,.empty{font-size:13.5px;line-height:1.55}
  .pill,.status-pill{font-size:12.5px;padding:4px 10px}
  .page-kicker{font-size:12px}
  h1,#pageTitle{font-size:21px}
  .card h2{font-size:16.5px}
  label.field{font-size:14px}
  .items-row .cell>span{font-size:12px}
  .callout{font-size:14px;line-height:1.6}

  /* the dashboard tiles: the caption under a number was 10.75px */
  .metric-card .k{font-size:13.5px;min-height:0;line-height:1.3}
  .metric-card .d{font-size:12.5px;margin-top:6px}
  .metric-card .v{font-size:26px}
  .dash-secondary .metric-card .v{font-size:22px}
  .dash-primary .metric-card{min-height:142px}
  .dash-secondary .metric-card{min-height:116px}

  /* the bottom bar: 10px labels on the app's most-used control */
  .mobile-nav button{padding:6px 2px;min-height:56px}
  .mobile-nav button>span{height:24px;font-size:20px}
  .mobile-nav button small{font-size:13px;font-weight:600}
  .mobile-sheet>button:not([data-close-sheet]){font-size:15.5px;padding:14px 12px;min-height:52px}
  .mobile-sheet-head strong{font-size:17px}

  /* ---------- 4. tab strips wrap instead of leaving the screen ------ */
  /* "Chart of accounts" and "Journal" were rendering entirely past the
     right edge of a 390px phone, inside a scroller with no fade, no
     arrow and nothing to suggest it moved. Two rows of readable tabs
     beats one row you cannot see the end of. */
  .seg,.seg-inline,#bookSeg{display:grid;grid-template-columns:1fr 1fr;
    gap:6px;padding:6px;height:auto;overflow:visible;max-width:100%}
  .seg button{width:100%;min-height:46px;font-size:14.5px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .report-nav button{min-height:48px;font-size:14.5px}

  /* ---------- 4b. the last of the small print ----------------------- */
  /* Found by measuring every text node on every screen rather than by
     eye: these are the ones that were still under 12.5px afterwards. */
  .tile .k,.k{font-size:13.5px;line-height:1.3}
  .tile .d,.d{font-size:12.5px}
  .section-h{font-size:13.5px}
  .rep-group{font-size:12.5px}
  .asg,.asg b{font-size:13.5px}
  .schedule h4,.day h4{font-size:14px}
  .plan-meter,.plan-banner{font-size:13.5px}
  .install-nudge-copy b{font-size:14.5px;white-space:normal}
  .install-nudge-copy span{font-size:13px}
  .install-nudge button{min-height:46px}
  .install-nudge button:last-child{width:46px;height:46px}
  .user-avatar,.company-avatar{font-size:13px}
  .bell-dot{font-size:11px}
  svg text{font-size:12.5px}
  .legend,.legend span{font-size:13px}
  .jobbar-n{font-size:13px}

  /* ---------- 4c. the bottom of the screen belongs to the app ------- */
  /* Three fixed bars — install nudge, sample banner, bottom nav — were
     together taking almost half a phone screen and covering the list
     underneath. The nudge no longer shows during the sample (install.js),
     and the banner says its piece in one line. */
  .sample-bar .sample-long{display:none}
  .sample-bar .sample-short{display:inline}
  .sample-bar{padding:8px 12px;font-size:13.5px;gap:8px;flex-wrap:nowrap;
    justify-content:space-between;text-align:left}
  .sample-bar button{flex:none;min-height:44px;padding:0 14px;font-size:13.5px;white-space:nowrap}

  /* ---------- 4d. wrapped tabs form a tidy grid, not a ragged line -- */


  /* ---------- 5. room to breathe where it costs nothing ------------- */
  .controls{gap:10px}
  .controls select,.controls input{flex:1 1 160px}
  .card{padding:16px}
  .form-grid{gap:14px}
  .dialog-actions{gap:10px;padding-top:14px}
  .dialog-actions button{min-height:50px;font-size:15.5px}
}

/* On a small phone the two-across tiles get tall before they get narrow;
   one column reads better than two cramped ones. */
@media(max-width:400px){
  .metric-card .v{font-size:24px}
  table.cardify td:not([data-label]) button{min-width:0;flex:1 1 auto}
}


/* A disclosure that holds the fields most people never need to touch. Used by
   the expense and bill forms for the tax split, which is worked out from the
   total on the document unless someone says otherwise. */
.more-detail{border:1px solid var(--border);border-radius:11px;padding:0;background:var(--surface-2)}
.more-detail>summary{cursor:pointer;padding:12px 14px;font-size:13.5px;font-weight:600;
  color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:8px;min-height:46px}
.more-detail>summary::-webkit-details-marker{display:none}
.more-detail>summary::before{content:"▸";color:var(--ink-muted);font-size:12px;transition:transform .15s}
.more-detail[open]>summary::before{transform:rotate(90deg)}
.more-detail>summary:hover{color:var(--ink-1)}
.more-detail>.form-grid{padding:0 14px 14px}

/* Group headings inside the phone's Money sheet, so someone told "it's under
   Sales" can find it on a phone where the nav only says Money. */
.sheet-group{padding:10px 12px 4px;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-muted)}
@media(max-width:860px){.sheet-group{font-size:12.5px;padding:12px 12px 4px}}

/* The two supporting lines under a plan's price. Inline 12px here was the last
   text in the app below the readable floor. */
.plan-pick-line{font-size:13px;color:var(--ink-2);line-height:1.4;margin-top:2px}
@media(max-width:860px){
  .plan-pick-line{font-size:13.5px}
  /* the last of it, all on Team & settings */
  .logo-label{font-size:13.5px}
  .logo-empty{font-size:13px}
  .team-person small{font-size:13px}
  .pill,.status-pill{font-size:12.5px}
}

/* ---------- Help & report a problem (v2.11.0) ----------------------
   The transcript is a log, not a chat toy: bubbles are square-ish, the
   type is the app's own, and nothing animates. Someone opening this is
   already annoyed — the screen should feel like a form that works, not
   a product demo. Min-height keeps it from jumping as messages land. */
.help-log{border:1px solid var(--border);border-radius:10px;background:var(--surface-2);
  padding:10px;margin:10px 0;max-height:min(46vh,340px);min-height:120px;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px}
.help-msg{max-width:88%;padding:9px 11px;border-radius:10px;font-size:13.5px;line-height:1.5;
  white-space:normal;word-break:break-word}
.help-msg.theirs{align-self:flex-start;background:var(--surface-1);border:1px solid var(--border);
  color:var(--ink-1)}
.help-msg.mine{align-self:flex-end;background:color-mix(in srgb, var(--blue) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--blue) 34%, transparent);color:var(--ink-1)}
.help-typing{color:var(--ink-muted);font-style:italic}
.help-filed{font-size:12.5px;margin:0 0 8px;padding:8px 10px;border-radius:9px;
  background:color-mix(in srgb, var(--green, #2e7d32) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--green, #2e7d32) 32%, transparent);color:var(--ink-1)}
.help-alt{margin-right:auto;font-size:12.5px;color:var(--ink-muted);align-self:center}
#helpInput{min-height:64px;resize:vertical}
@media (max-width:860px){
  .help-log{max-height:38vh}
  .help-msg{font-size:14px;max-width:94%}
  .help-alt{font-size:13px}
}

/* ---------- Owner console (v2.12.0) --------------------------------
   Dense on purpose. This is the one screen whose reader wants many rows
   at once, not a comfortable card per customer — the question it answers
   is "how is the business doing", and that needs everything visible. */
.admin-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:12px}
.admin-tile{border:1px solid var(--border);border-radius:10px;padding:11px 13px;background:var(--surface-2);
  display:flex;flex-direction:column;gap:2px;min-height:74px}
.admin-tile-label{font-size:11.5px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em}
.admin-tile-value{font-size:21px;line-height:1.15;color:var(--ink-1)}
.admin-tile-note{font-size:12px;color:var(--ink-muted)}
.admin-search{width:100%;max-width:360px;padding:9px 11px;margin-bottom:10px;border:1px solid var(--border);
  border-radius:9px;background:var(--surface-2);color:var(--ink-1);font:inherit;font-size:13.5px}
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table th{text-align:left;padding:7px 9px;border-bottom:2px solid var(--border);
  font-size:11.5px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.admin-table td{padding:8px 9px;border-bottom:1px solid var(--border);vertical-align:top}
.admin-table td.num,.admin-table th.num{text-align:right}
.admin-sub{font-size:11.5px}
.admin-filters{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.admin-ticket{border:1px solid var(--border);border-radius:10px;padding:12px 13px;margin-bottom:10px;
  background:var(--surface-2)}
.admin-ticket-head{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.admin-ticket-body{font-size:13.5px;color:var(--ink-1);white-space:pre-wrap;margin-bottom:8px;line-height:1.5}
.admin-error{white-space:pre-wrap;background:var(--surface-1);border:1px solid var(--border);border-radius:8px;
  padding:8px 10px;font-size:12px;margin-bottom:8px;overflow-x:auto}
.admin-ticket-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
@media (max-width:860px){
  .admin-tiles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .admin-table{font-size:12.5px}
  .admin-ticket-body{font-size:14px}
  .admin-ticket-actions button{min-height:44px}
}

/* The preview banner. Deliberately loud enough to be read and quiet enough
   not to look like part of the document being previewed. */
.doc-preview-note{background:color-mix(in srgb, var(--amber, #eda100) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--amber, #eda100) 40%, transparent);
  border-radius:9px;padding:9px 12px;margin-bottom:14px;font-size:13px;color:var(--ink-1);line-height:1.5}
@media print{.doc-preview-note{display:none}}
@media (max-width:860px){.doc-preview-note{font-size:13.5px}}