/* ForeMate Job OS — shared theme (same tokens as the single-file tools) */
:root{
  --bg:#fbf9f6; --panel:#ffffff; --panel-2:#f4f1ec;
  --line:#ece7df; --line-2:#ddd6cb;
  --txt:#1d1a16; --mut:#6e675d; --dim:#9d958a;
  --vis:#eb5a0c; --vis-dim:#f3b68d;
  --ok:#15803d; --warn:#b45309; --red:#dc2626;
  /* one family everywhere — same as the header */
  --mono:'Inter Tight',sans-serif;
  --body:'Inter Tight',sans-serif;
  --disp:'Anton',sans-serif;
  /* rounder theme */
  --r:16px;     /* cards, tiles, modals */
  --r-sm:11px;  /* buttons, inputs, small cards */
  --r-pill:999px;
  /* soft elevation — depth instead of hard borders */
  --shadow:0 1px 2px rgba(29,26,22,.04),0 2px 6px rgba(29,26,22,.05);
  --shadow-h:0 10px 26px rgba(29,26,22,.10);
}
/* ---------- dark mode (warm) — toggled from Settings ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#15130f; --panel:#201d17; --panel-2:#282319;
  --line:#332e25; --line-2:#443d31;
  --txt:#f3eee6; --mut:#ada596; --dim:#867d6f;
  --vis:#f5701f; --vis-dim:#8a4f2c;
  --ok:#34d27a; --warn:#f5b544; --red:#f6776b;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 3px 10px rgba(0,0,0,.5);
  --shadow-h:0 14px 34px rgba(0,0,0,.6);
}
:root[data-theme="dark"] body{background:var(--bg);color:var(--txt)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--body);background:var(--bg);color:var(--txt);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* aligned digits everywhere money/figures appear */
.v,.amt,.n,.money,.mono,[class*="amt"]{font-variant-numeric:tabular-nums}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit;color:var(--txt)}
::placeholder{color:var(--dim)}
:focus-visible{outline:2px solid var(--vis);outline-offset:2px}
::selection{background:var(--vis);color:#fff}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* top bar */
.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px;height:54px;padding:0 22px;background:var(--bg);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.logo .mark{display:none}
.logo .word{font-family:var(--disp);font-size:21px;letter-spacing:1px;color:var(--txt)}
.logo .word i{font-style:normal;color:var(--vis)}
.modtag{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);border-left:1px solid var(--line);padding-left:12px;margin-left:4px}
.top .gap{flex:1}
.lnk{background:none;border:none;color:var(--mut);font-size:14px;font-weight:500;padding:8px 10px}
.lnk:hover{color:var(--txt)}

/* buttons */
.b{border:1px solid var(--vis);background:var(--vis);color:#fff;font-weight:700;font-size:13.5px;padding:10px 17px;letter-spacing:.2px;border-radius:var(--r-sm);box-shadow:0 1px 2px rgba(235,90,12,.20);transition:filter .12s,transform .1s,box-shadow .12s}
.b:hover{filter:brightness(1.07);box-shadow:0 4px 12px rgba(235,90,12,.26)}
.b:active{transform:translateY(1px)}
.b:disabled{opacity:.35;cursor:not-allowed;filter:none;box-shadow:none}
.b.ghost{background:transparent;color:var(--txt);border-color:var(--line-2);box-shadow:none}
.b.ghost:hover{border-color:var(--vis);color:var(--vis);box-shadow:none}
.b.sm{padding:6px 11px;font-size:12.5px}
.b.lg{padding:13px 24px;font-size:15px}

/* layout */
.shell{max-width:1080px;margin:0 auto;padding:26px 22px 80px}
.ph{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.ph h2{font-family:var(--disp);font-size:34px;letter-spacing:1px;font-weight:400;text-transform:uppercase}
.ph .m{font-family:var(--mono);font-size:12px;color:var(--dim)}

/* forms */
.fd{display:flex;flex-direction:column;gap:5px}
.fd label{font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--mut)}
.fd input,.fd select,.fd textarea{border:1px solid var(--line-2);background:var(--panel);padding:11px 13px;border-radius:var(--r-sm);transition:border-color .12s,box-shadow .12s}
.fd input:focus,.fd select:focus,.fd textarea:focus{border-color:var(--vis);outline:none;box-shadow:0 0 0 3px rgba(235,90,12,.14)}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.err{color:var(--red);font-size:13.5px;font-weight:500;min-height:20px}

/* cards & tables */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.stat .k{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut)}
.stat .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:25px;font-weight:700;margin-top:5px;letter-spacing:-.3px}
.stat .v.orange{color:var(--vis)}
.stat .v.green{color:var(--ok)}

.joblist{display:flex;flex-direction:column;gap:10px}
.jobrow{display:grid;grid-template-columns:1fr auto;gap:6px 18px;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--panel);cursor:pointer;box-shadow:var(--shadow);transition:border-color .12s,box-shadow .14s,transform .14s}
.jobrow:hover{border-color:var(--vis);box-shadow:var(--shadow-h);transform:translateY(-2px)}
.jobrow .nm{font-weight:700;font-size:16px}
.jobrow .nm .no{font-family:var(--mono);font-size:12px;color:var(--vis);margin-right:10px}
.jobrow .sub{color:var(--mut);font-size:13.5px}
.jobrow .right{text-align:right}
.jobrow .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:16px}
.jobrow .counts{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:3px}

.pill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill);border:none;background:var(--panel-2);color:var(--mut)}
.pill.active{background:rgba(235,90,12,.10);color:var(--vis)}
.pill.complete{background:rgba(21,128,61,.10);color:var(--ok)}
.pill.ok{background:rgba(21,128,61,.10);color:var(--ok)}
.pill.warn{background:rgba(180,83,9,.10);color:var(--warn)}
.pill.red{background:rgba(220,38,38,.10);color:var(--red)}

.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);font-weight:500;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line)}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tbl th.n{text-align:right}
.empty{padding:26px;text-align:center;color:var(--dim);font-size:13.5px}

/* module sections on job page */
.mod{margin-bottom:26px}
.mod .hd{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.mod .hd h3{font-family:var(--body);font-size:15.5px;letter-spacing:0;font-weight:600;text-transform:none}
.mod .hd .cnt{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.mod .hd .soon{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--vis);border:1px solid var(--vis-dim);padding:2px 8px;border-radius:99px;margin-left:auto}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(29,26,22,.45);display:none;align-items:flex-start;justify-content:center;padding:60px 20px;z-index:90}
.scrim.on{display:flex}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);width:100%;max-width:560px;padding:24px;box-shadow:0 24px 60px rgba(29,26,22,.22)}
.modal h3{font-family:var(--disp);font-size:22px;font-weight:400;letter-spacing:.8px;text-transform:uppercase;margin-bottom:16px}
.modal .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);background:var(--vis);color:#fff;font-family:var(--mono);font-size:12.5px;font-weight:600;padding:10px 18px;border-radius:var(--r-pill);transition:transform .25s;z-index:100}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--red)}

@media (max-width:760px){
  .statrow{grid-template-columns:1fr 1fr}
  .fg{grid-template-columns:1fr}
  .shell{padding:18px 14px 60px}
  .top{padding:0 14px}
  .jobrow{grid-template-columns:1fr}
  .jobrow .right{text-align:left}
}

/* ============================================================
   PHONE — full mobile layout. Uses !important on grid collapses so it
   also overrides page-local <style> rules and inline style="" grids.
   ============================================================ */
@media (max-width:600px){
  /* header wraps instead of overflowing; tool tag hidden to save room */
  .top{height:auto;min-height:54px;flex-wrap:wrap;gap:8px 8px;padding:8px 14px;position:sticky}
  .top .gap{flex:1 1 40px;min-width:0}
  .modtag{display:none}
  #who{display:none}
  .logo .word{font-size:18px}
  .lnk{padding:9px 8px;font-size:13.5px}

  /* page chrome */
  .shell{padding:16px 13px 96px}
  .ph{flex-wrap:wrap;gap:2px 12px;margin-bottom:14px}
  .ph h2{font-size:25px;line-height:1.1}
  .stat .v{font-size:20px}
  .stat{padding:12px 13px}

  /* collapse the known wide grids to a single column everywhere */
  .fg,.g2,.g3,.g4,.parties,.kgrid,.ed-grid,.res,.scan-body,.steps,
  .addform,.addform .row2,.row2,.quickadd,.daylog,.linerow,.linerow.var{grid-template-columns:1fr !important}
  .tiles,.dash-tiles,.stats{grid-template-columns:1fr 1fr !important}

  /* tables never push the page wide — they scroll inside their container */
  .card,.doc,.doc-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{font-size:12.5px}
  .tbl th,.tbl td{padding:8px 8px}

  /* tap targets + no iOS zoom-on-focus */
  .b{padding:11px 15px}
  .b.sm{padding:9px 12px}
  button,.b,.lnk{min-height:42px}
  input,select,textarea{font-size:16px}
  /* no fixed-width input can push the page wider than the screen */
  input,select,textarea{max-width:100%}
  /* header can hold logo + back button + hamburger without crushing */
  .top{row-gap:6px}
  .mubackjob{min-height:38px}

  /* modal becomes a full-screen sheet that can scroll */
  .scrim{padding:0;align-items:stretch;overflow:auto}
  .modal{max-width:none;border-radius:0;min-height:100vh;padding:20px 16px}
  .modal h3{font-size:20px}

  /* toast clears the bottom-right brand mark */
  .toast{left:14px;right:14px;bottom:16px;transform:translateY(80px);text-align:center}
  .toast.show{transform:translateY(0)}
}
@media (max-width:430px){
  .statrow,.tiles,.dash-tiles,.stats{grid-template-columns:1fr !important}
  .ph h2{font-size:23px}
}

/* ============================================================
   FEEL — small native-app touches. Kept subtle and scoped so the
   desktop layout is untouched.
   ============================================================ */
/* no grey tap-flash on iOS — we have our own :active states */
a,button,.b,.lnk,.jobrow,.chip,.pill,.stat{-webkit-tap-highlight-color:transparent}
/* frosted sticky header, like a native title bar (falls back to solid) */
@supports (backdrop-filter:blur(10px)){
  .top{background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:saturate(140%) blur(10px)}
}
/* touch devices get a light press-down on tappable cards & chips */
@media (hover:none){
  .jobrow:active{transform:scale(.99)}
  .chip:active{transform:scale(.96)}
  .b:active{transform:scale(.97)}
}