/* FixMinute — light and plain: white pages, dark gray type, one sky-blue accent.
   --sky is the bright one, for surfaces and marks; --navy (kept as the name
   every rule already uses) is the deeper blue that white text and links can sit
   on and still be read. */

:root {
  --bg:#f4f5f5; --panel:#ffffff; --panel-2:#f9f9f9; --sunk:#eef0f1;
  --ink:#333333; --ink-2:#555555; --muted:#6f6f6f;
  --line:#e4e7e9; --line-2:#cfd5da;
  --sky:#0ea5e9; --sky-bg:#e0f2fe;
  --navy:#0284c7; --navy-ink:#ffffff; --gold:#0ea5e9; --gold-bg:#e0f2fe;
  --side-bg:#ffffff; --side-ink:#333333;
  --ok:#1e6b4a; --ok-bg:#dcefe4;
  --warn:#8a5a10; --warn-bg:#f7ead2;
  --bad:#9a2f24; --bad-bg:#f8e0dc;
  --info:#0369a1; --info-bg:#e0f2fe;
  --quiet-bg:#eef0f1;
  --radius:7px; --shadow:0 1px 2px rgba(0,0,0,.05), 0 1px 8px rgba(0,0,0,.04);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font: 15px/1.55 "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--info); text-underline-offset: 2px; }
h1,h2,h3,h4 { margin:0; line-height:1.2; letter-spacing:-.015em; }
.mono, .num, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:8px; top:8px; background:var(--panel); padding:8px 12px; z-index:50; border:2px solid var(--navy); }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:3px; }

/* ---------- shell ---------- */
.shell { display:grid; grid-template-columns: 232px minmax(0,1fr); min-height:100vh; }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } }

.side {
  background:var(--side-bg); color:var(--side-ink); display:flex; flex-direction:column;
  gap:18px; padding:16px 12px; position:sticky; top:0; height:100vh;
  border-right:1px solid var(--line);
}
@media (max-width: 860px) { .side { position:static; height:auto; } }
.brand { display:flex; gap:10px; align-items:center; color:inherit; text-decoration:none; padding:4px 8px; }
.brand .mark { width:28px; height:28px; flex-shrink:0; display:block; }
.wm { color:var(--navy); }
.brand b { display:block; font-size:16.5px; letter-spacing:-.02em; }
.brand i { display:block; font-style:normal; font-size:11.5px; opacity:.72; margin-top:1px; }
.brand.big { margin-bottom:18px; color:var(--ink); }
.brand.big .mark { width:36px; height:36px; }

.side nav { display:flex; flex-direction:column; gap:2px; }
@media (max-width:860px){ .side nav { flex-direction:row; flex-wrap:wrap; } }
.nav-i {
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:var(--radius);
  color:inherit; text-decoration:none; font-size:14px; opacity:.86;
}
.nav-i:hover { background:var(--panel-2); opacity:1; }
.nav-i.on { background:var(--sky-bg); color:var(--info); opacity:1; font-weight:600; }
.nav-ic { width:16px; text-align:center; color:var(--gold); font-size:12px; }
.side-foot { margin-top:auto; display:flex; flex-direction:column; gap:5px; padding:10px 9px 2px; border-top:1px solid var(--line); font-size:12.5px; }
.side-foot .who { opacity:.72; text-decoration:none; color:inherit; }
.side-foot a.who:hover { opacity:1; text-decoration:underline; }
.side-foot a { color:inherit; opacity:.86; }

/* The organization switcher — only rendered for someone with two or more
   seats, so most installs never see it. */
.orgswitch { display:flex; gap:5px; align-items:center; margin-bottom:6px; }
.orgswitch select { flex:1; min-width:0; font:inherit; font-size:12.5px; padding:5px 6px;
  border-radius:var(--radius); border:1px solid var(--line-2); background:var(--panel); color:var(--ink); }
.orgswitch .btn.sm { padding:5px 8px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.btn.wide { width:100%; justify-content:center; }
.h2 { font-size:17px; margin:18px 0 4px; }

main { padding:22px 26px 60px; max-width:1180px; }
main.wide { max-width:none; }
@media (max-width:600px) { main { padding:16px 14px 44px; } }

/* ---------- page furniture ---------- */
.ph { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.ph h1 { font-size:24px; font-weight:650; }
.ph .lede { color:var(--ink-2); font-size:14.5px; margin:5px 0 0; max-width:64ch; }
.ph .acts { display:flex; gap:8px; flex-wrap:wrap; }
.crumb { font-size:12.5px; color:var(--muted); margin-bottom:4px; }
.crumb a { color:var(--muted); }

.flash { background:var(--ok-bg); color:var(--ok); border:1px solid currentColor; padding:9px 13px; border-radius:var(--radius); margin-bottom:16px; font-size:14px; }
.flash.bad { background:var(--bad-bg); color:var(--bad); }
.err { background:var(--bad-bg); color:var(--bad); padding:9px 12px; border-radius:var(--radius); font-size:14px; margin:0 0 14px; }
.ok { background:var(--ok-bg); color:var(--ok); padding:9px 12px; border-radius:var(--radius); font-size:14px; margin:0 0 14px; }
.empty { color:var(--muted); font-size:14px; margin:0; padding:14px 0; }

/* ---------- cards / grid ---------- */
.grid { display:grid; gap:16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 15px; border-bottom:1px solid var(--line); background:var(--panel-2); }
.card-h h2 { font-size:14px; font-weight:650; letter-spacing:.01em; }
.card-b { padding:13px 15px; }
.card-b > :first-child { margin-top:0; }
.card.hot { border-color:var(--bad); }
.card.hot .card-h { background:var(--bad-bg); color:var(--bad); }

/* ---------- stats ---------- */
.stats { display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-bottom:18px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit; box-shadow:var(--shadow); }
a.stat:hover { border-color:var(--line-2); }
.stat-v { font-size:26px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat-l { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.stat-s { font-size:12px; color:var(--ink-2); margin-top:2px; }
.stat.bad .stat-v { color:var(--bad); }
.stat.warn .stat-v { color:var(--warn); }
.stat.ok .stat-v { color:var(--ok); }

/* ---------- tables ---------- */
.tw { overflow-x:auto; margin:0 -15px; }
.card-b .tw { margin:-13px -15px; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; padding:9px 15px; border-bottom:1px solid var(--line); vertical-align:top; }
thead th { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; background:var(--panel-2); white-space:nowrap; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--panel-2); }
/* A recurring obligation that is past due — the row a fire marshal finds. */
tbody tr.pm-late td { background:var(--bad-bg); }
tbody tr.pm-late td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
tbody tr.pm-late:hover td { background:var(--bad-bg); filter:brightness(.98); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td .sub { display:block; color:var(--muted); font-size:12.5px; margin-top:1px; }
td a { font-weight:550; }

/* ---------- badges ---------- */
.badge { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.03em; padding:2px 7px; border-radius:99px; white-space:nowrap; }
.b-ok { background:var(--ok-bg); color:var(--ok); }
.b-warn { background:var(--warn-bg); color:var(--warn); }
.b-bad { background:var(--bad-bg); color:var(--bad); }
.b-info { background:var(--info-bg); color:var(--info); }
.b-neutral { background:var(--sunk); color:var(--ink-2); }
.b-quiet { background:var(--quiet-bg); color:var(--muted); }
.badges { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }

/* ---------- fields ---------- */
.fields { display:grid; gap:10px 22px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin:0; }
.field dt { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:1px; }
.field dd { margin:0; font-size:14.5px; }
.field dd.mono { font-size:13.5px; }
.tel { font-weight:600; white-space:nowrap; }

/* ---------- forms ---------- */
.stack { display:flex; flex-direction:column; gap:12px; }
.frow { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.input { display:flex; flex-direction:column; gap:4px; font-size:13px; }
.input > span { color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-size:11.5px; font-weight:600; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=time], input[type=number], input[type=tel], select, textarea {
  font:inherit; font-size:14.5px; padding:8px 10px; border:1px solid var(--line-2);
  border-radius:var(--radius); background:var(--panel); color:var(--ink); width:100%;
}
textarea { resize:vertical; }
select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px; }
.check { display:flex; align-items:center; gap:7px; font-size:14px; }
.check input { width:auto; }

.btn { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:var(--radius); border:1px solid var(--line-2); background:var(--panel); color:var(--ink); cursor:pointer; text-decoration:none; }
.btn:hover { border-color:var(--muted); }
.btn.primary { background:var(--navy); border-color:var(--navy); color:var(--navy-ink); }
.btn.danger { background:var(--bad-bg); border-color:var(--bad); color:var(--bad); }
.btn.gold { background:var(--gold-bg); border-color:var(--gold); color:var(--gold); }
.btn.sm { padding:5px 10px; font-size:12.5px; }
.inline-form { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }

details.adder { border:1px dashed var(--line-2); border-radius:var(--radius); margin-top:12px; }
details.adder > summary { cursor:pointer; padding:9px 13px; font-size:13.5px; font-weight:600; color:var(--ink-2); }
details.adder[open] > summary { border-bottom:1px solid var(--line); }
details.adder .adder-b { padding:13px; }

/* ---------- emergency console ---------- */
.eq { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 15px; box-shadow:var(--shadow); margin-bottom:16px; }
.eq form { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); align-items:end; }
.callout { border:2px solid var(--bad); border-radius:var(--radius); overflow:hidden; background:var(--panel); margin-bottom:16px; }
.callout .co-h { background:var(--bad-bg); color:var(--bad); padding:9px 15px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
.callout .co-b { padding:15px; display:flex; flex-direction:column; gap:12px; }
.bignum { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; }
.bignum .who { font-size:20px; font-weight:650; letter-spacing:-.02em; }
.bignum a.dial { font-size:27px; font-weight:700; letter-spacing:-.03em; text-decoration:none; color:var(--bad); font-variant-numeric:tabular-nums; }
.bignum .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.alt-line { font-size:14px; color:var(--ink-2); }

/* ---------- timeline ---------- */
.tl { list-style:none; margin:0; padding:0; }
.tl li { display:grid; grid-template-columns:96px 1fr; gap:12px; padding:9px 0; border-bottom:1px dotted var(--line-2); font-size:14px; }
.tl li:last-child { border-bottom:none; }
.tl .when { color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.tl .what b { font-weight:600; }

/* ---------- bars (reports) ---------- */
.bars { display:flex; flex-direction:column; gap:8px; }
.bar-row { display:grid; grid-template-columns:150px 1fr 84px; gap:10px; align-items:center; font-size:13.5px; }
.bar-track { background:var(--sunk); border-radius:3px; height:16px; overflow:hidden; }
.bar-fill { background:var(--navy); height:100%; border-radius:3px; }
.bar-val { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); }
@media (max-width:560px) { .bar-row { grid-template-columns:110px 1fr 70px; font-size:12.5px; } }

/* ---------- login ---------- */
.loginbg { background:var(--bg); min-height:100vh; display:grid; place-items:center; padding:24px; }
.loginwrap { width:100%; max-width:400px; }
.loginbox { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:26px 24px; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.loginbox .btn.primary { justify-content:center; padding:10px; font-size:15px; }
.demo { margin-top:20px; border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:7px; }
.demo-h { font-size:12px; color:var(--muted); margin:0 0 3px; }
.demo-a { display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; width:100%; cursor:pointer; font:inherit; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); padding:8px 11px; color:inherit; }
.demo-a:hover { border-color:var(--navy); }
.demo-a b { font-size:14px; }
.demo-a span { font-size:12.5px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; }
.demo-a i { font-size:11px; color:var(--gold); font-style:normal; text-transform:uppercase; letter-spacing:.06em; }

/* ---------- print (site sheet) ---------- */
@media print {
  .side, .ph .acts, .skip, .flash { display:none !important; }
  .shell { grid-template-columns:1fr; }
  body { background:#fff; color:#000; font-size:11pt; }
  .card { break-inside:avoid; box-shadow:none; border-color:#999; }
  main { padding:0; max-width:none; }
  a { color:#000; text-decoration:none; }
}

/* ============================================================ crew mobile ==
   The tech view is a different product surface: one thumb, bright sun, gloves.
   Big targets (min 48px), high contrast, no tables, no sidebar. */

body.tech { background:var(--bg); }
.tbar {
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:10px;
  background:var(--side-bg); color:var(--side-ink); border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
}
.tbar .tmark { width:24px; height:24px; display:block; flex-shrink:0; }
.tback {
  color:var(--side-ink); text-decoration:none; font-size:28px; line-height:1;
  min-width:44px; min-height:44px; display:flex; align-items:center; margin:-8px 0 -8px -6px;
}
.ttitle { font-weight:650; font-size:17px; flex:1; }
.tlang {
  color:var(--side-ink); opacity:.75; text-decoration:none; font-size:12px;
  letter-spacing:.06em; padding:10px 4px;
}
.twrap { padding:12px 12px 28px; max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.tflash { background:var(--ok-bg); color:var(--ok); padding:12px 14px; font-weight:600; }
.tflash.bad { background:var(--bad-bg); color:var(--bad); }
.tfoot {
  display:flex; justify-content:space-between; gap:12px; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  color:var(--muted); font-size:13px; border-top:1px solid var(--line); max-width:640px; margin:0 auto;
}
.tempty { padding:48px 20px; text-align:center; color:var(--muted); font-size:16px; }

/* job list */
.jobs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.job {
  display:flex; flex-direction:column; gap:5px; text-decoration:none; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--line-2);
  border-radius:var(--radius); padding:13px 14px; min-height:64px;
}
.job.emergency { border-left-color:var(--bad); }
.job.urgent    { border-left-color:var(--warn); }
.job.routine   { border-left-color:var(--info); }
.jtop, .jhtop { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.jnum { font-family:ui-monospace, Menlo, monospace; color:var(--muted); font-size:13px; }
.jtitle { font-weight:650; font-size:16.5px; line-height:1.3; }
.jsite { color:var(--ink-2); font-size:14px; }

/* job detail */
.jhead {
  background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--line-2);
  border-radius:var(--radius); padding:14px 15px; display:flex; flex-direction:column; gap:7px;
}
.jhead.emergency { border-left-color:var(--bad); }
.jhead.urgent    { border-left-color:var(--warn); }
.jhead h1 { font-size:20px; line-height:1.25; }
.jhead .jaddr { margin:0; font-size:15px; }
.jfrom { margin:0; color:var(--muted); font-size:13px; }
.tlink { color:var(--navy); }
.tcard {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px;
  display:flex; flex-direction:column; gap:8px;
}
.tcard h2 { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.tcard p { margin:0; font-size:15.5px; line-height:1.5; }
.tmuted { color:var(--ink-2); font-size:14.5px !important; }
.tmono { font-family:ui-monospace, Menlo, monospace; font-size:14px !important; }
.ttl { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:14.5px; }
.ttl li { color:var(--ink-2); }
.ttl span { color:var(--muted); font-size:12.5px; display:block; }

/* actions — thumb-sized, and the destructive-ish one is never first */
.tacts { display:flex; flex-wrap:wrap; gap:10px; }
.tbtn {
  flex:1 1 auto; min-height:52px; min-width:120px; padding:14px 18px;
  font:inherit; font-weight:650; font-size:16px; cursor:pointer;
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--panel); color:var(--ink);
}
.tbtn.go   { background:var(--navy); border-color:var(--navy); color:var(--navy-ink); }
.tbtn.done { background:var(--ok); border-color:var(--ok); color:#fff; }
.tform { gap:10px; }
.tlabel { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.tform textarea, .tform input[type=text], .tform input[type=password], .tform input[type=tel], .tform input[type=email], .tform input:not([type]) {
  font:inherit; font-size:16px; /* 16px stops iOS zooming on focus */
  padding:12px; border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--panel-2); color:var(--ink); width:100%;
}

/* status-link row on the desktop work order */
.linkrow { display:flex; gap:8px; align-items:center; }
.linkbox {
  flex:1; font-family:ui-monospace, Menlo, monospace; font-size:13px;
  padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--sunk); color:var(--ink-2);
}

/* ---------- phone app card (install + notifications) ---------- */
[hidden] { display:none !important; }
.pwa p { margin:0 0 10px; }
.pwa .pwa-h { font-size:13px; margin:16px 0 8px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.pwa .pwa-steps { padding:10px 12px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); }
.pwa .pwa-ok { color:var(--ok); font-weight:600; }
.pwa .pwa-acts { display:flex; gap:8px; flex-wrap:wrap; }
.pwa .pwa-msg { margin-top:10px; padding:8px 10px; border-radius:var(--radius); background:var(--ok-bg); color:var(--ok); }
.pwa .pwa-msg.bad { background:var(--bad-bg); color:var(--bad); }
body.tech .pwa .pwa-steps { background:var(--panel-2); border-color:var(--line); }

/* ---- delegated scopes (Phase 2G) ----------------------------------------
   A child scope is a unit of work under another one, not a separate job, so
   the hierarchy is shown by indent and a quieter ground rather than by a
   second table. */
tr.child > td:first-child { padding-left:22px; }
tr.child > td { background:var(--tint, rgba(14,165,233,.05)); }
.rowacts { display:flex; flex-direction:column; gap:6px; min-width:190px; }
.rowacts details.adder { margin-top:0; }
.rowacts form { margin:0; }

/* ---- files and photographs (Phase 2H) -----------------------------------
   A gallery is a grid of evidence: the picture first, because that is what
   somebody is looking for, and the words underneath it. Documents that are
   not images get the same footprint with their extension in place of the
   thumbnail, so a row of them still scans. */
ul.files { list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
ul.files > li.file { display:flex; flex-direction:column; gap:6px; min-width:0; }
.fthumb { display:block; aspect-ratio:4/3; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--sunk); display:grid; place-items:center; }
.fthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fthumb.doc { font-weight:700; color:var(--ink-2); letter-spacing:.06em; }
.fext { font-size:15px; }
.fmeta { display:flex; flex-direction:column; gap:2px; font-size:13px; min-width:0; }
.fmeta .sub { overflow-wrap:anywhere; }
.finline { margin-top:4px; }

/* The phone: a strip that scrolls sideways rather than a grid that pushes the
   buttons off the screen. */
ul.tshots { list-style:none; margin:0 0 10px; padding:0; display:flex; gap:10px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; }
ul.tshots > li { flex:0 0 116px; display:flex; flex-direction:column; gap:4px; font-size:12px; }
ul.tshots a { display:grid; place-items:center; width:116px; height:88px; overflow:hidden;
  border-radius:8px; background:var(--sunk); }
ul.tshots img { width:100%; height:100%; object-fit:cover; }
.tform input[type=file] { width:100%; margin-bottom:8px; }

/* ---- the technician's phone: when and where first, one next step ---- */
.tgroup { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:6px 2px 0; }
.jwhen { font-weight:700; color:var(--info); font-size:14px; }
.tmaps { display:flex; gap:8px; margin-top:8px; }
.tmaps .tbtn, .jhead > .tbtn { min-height:44px; padding:10px 14px; font-size:15px; flex:1 1 0; text-align:center; text-decoration:none; }
.jhead > .tbtn { display:block; margin-top:4px; }
.tcontact { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:15.5px; }
.tcontact:last-of-type { border-bottom:0; }
.tcall { flex:0 0 auto; min-width:92px; min-height:44px; padding:10px 14px; text-decoration:none; text-align:center; background:var(--ok); border-color:var(--ok); color:#fff; }
.tcheckin { border-color:var(--sky); }
.tcheckin .tacts { margin-bottom:4px; }
.tcheckin .tbtn { text-align:center; text-decoration:none; }
.tplat { font-weight:400; opacity:.85; font-size:14px; }
.tdesc { white-space:pre-line; }
.tmore > summary { cursor:pointer; font-weight:600; color:var(--ink-2); }
.tmore[open] > summary { margin-bottom:10px; }
.tquiet { text-align:center; }
.tlinkbtn { background:none; border:0; color:var(--muted); text-decoration:underline; font:inherit; font-size:15px; padding:12px; cursor:pointer; min-height:44px; }

.sb-warn { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; padding:12px 15px; background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad); border-radius:var(--radius); }
.sb-warn p { margin:2px 0 0; font-size:14px; }
.sb-warn .acts { display:flex; align-items:center; gap:10px; }

.sb-matches { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.sb-match { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); }
.sb-match b { flex-basis:100%; }
.sb-new summary { cursor:pointer; font-weight:600; font-size:14px; margin-bottom:8px; }

.card.quote { padding:18px 20px; }
.card.quote > :first-child { margin-top:0; }
.card.quote .table-wrap { margin:12px -20px; }
.card.quote table { width:100%; }

/* ---- the schedule board ---- */
.sb-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.sb-nav h2 { font-size:16px; font-weight:650; margin-left:6px; }
.sb { display:grid; grid-template-columns:240px minmax(0,1fr); gap:12px; align-items:start; margin-top:12px; }
@media (max-width:1100px) { .sb { grid-template-columns:minmax(0,1fr); } }
.sb-side { display:flex; flex-direction:column; gap:12px; }
.sb-list { display:flex; flex-direction:column; gap:8px; max-height:44vh; overflow-y:auto; min-height:56px; }
.sb-scroll { overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.sb-grid { border-collapse:separate; border-spacing:0; width:100%; font-size:13px; }
.sb-grid th, .sb-grid td { padding:6px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); vertical-align:top; text-align:left; min-width:104px; }
.sb-grid thead th { background:var(--panel-2); font-weight:600; font-size:12.5px; white-space:nowrap; }
.sb-grid tbody th { font-weight:600; }
.sb-grid th[scope=row], .sb-grid thead th:first-child { position:sticky; left:0; z-index:1; background:var(--panel-2); min-width:130px; }
.sb-grid th .sub { display:block; color:var(--muted); font-size:12px; font-weight:400; }
.sb-grid td.sb-now, .sb-grid th.sb-now { background:var(--gold-bg); }
.sb-grid td { height:56px; }
.sb-job a { display:flex; flex-wrap:wrap; column-gap:6px; }
.sb-job a b, .sb-job a .mono { white-space:nowrap; }
[data-cell].over { outline:2px dashed var(--navy); outline-offset:-2px; }
.sb-job { display:flex; flex-direction:column; gap:2px; padding:6px 8px; margin-bottom:6px; background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:var(--radius); overflow-wrap:anywhere; }
.sb-job:last-child { margin-bottom:0; }
/* On the day view a job reaches across the hours it takes. */
.sb-grid td { position:relative; }
.sb-job[style*="--span"] { position:relative; z-index:2; width:calc(var(--span) * 100% + (var(--span) - 1) * 13px); }
.sb-settime > summary { display:inline-flex; margin-top:4px; padding:3px 9px; border:1px solid var(--sky); border-radius:var(--radius); color:var(--info); font-weight:600; background:var(--panel); }
.sb-load { display:block; margin-top:4px; font-size:12px; color:var(--info); font-weight:600; }
.sb-jump { margin-left:auto; }
.sb-jump input { min-height:36px; padding:4px 8px; font-size:14px; }
.sb-main { min-width:0; }
.sb-agenda { display:none; flex-direction:column; gap:12px; }
.sb-ag-row { display:grid; grid-template-columns:72px minmax(0,1fr); gap:8px; align-items:start; margin-bottom:8px; }
.sb-ag-when { font-weight:650; font-size:13px; padding-top:7px; }
.sb-line { display:block; margin-top:4px; font-size:12px; line-height:1.3; text-decoration:none; color:var(--ink); }
.sb-line .sub { display:block; color:var(--muted); }
.sb-line-t { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.touch-shell .sb-month td a.sb-line, .touch-shell .sb-month td a.sb-more { display:block; min-height:0; max-width:100%; }
.sb-grid .sb-job .sb-title { overflow-wrap:break-word; }
.sb-grid th[scope=col] + th, .sb-grid td { min-width:128px; }
.sb-more { display:block; margin-top:4px; font-size:12px; font-weight:600; }
@media (max-width:699px) {
  .sb-main .sb-scroll { display:none; }
  .sb-agenda { display:flex; }
  .sb-jump { margin-left:0; width:100%; }
}
.sb-job[draggable] { cursor:grab; }
.sb-job .sub { display:block; color:var(--muted); font-size:12px; }
.sb-title { font-weight:550; }
.sb-emergency { border-left-color:var(--bad); }
.sb-urgent { border-left-color:var(--warn); }
.sb-edit summary { cursor:pointer; color:var(--ink-2); font-size:12.5px; margin-top:3px; }
.sb-edit form { margin-top:6px; }
.sb-edit input, .sb-edit select { width:100%; min-width:0; }
.sb-month { border-collapse:separate; border-spacing:0; width:100%; table-layout:fixed; font-size:12.5px; }
.sb-month th, .sb-month td { padding:6px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); vertical-align:top; text-align:left; min-width:84px; }
.sb-month thead th { background:var(--panel-2); font-weight:600; }
.sb-month td { height:84px; }
.sb-month td.sb-now { background:var(--gold-bg); }
.sb-date { font-weight:650; }
.sb-line { display:block; margin-top:3px; overflow-wrap:anywhere; }
@media print { .sb-edit { display:none; } .sb { grid-template-columns:minmax(0,1fr); } }

/* Shared touch design: existing FixMinute palette, tablet rail / phone tabs. */
@media screen {
  :root { --radius:10px; }
  .touch-shell .shell { grid-template-columns:220px minmax(0,1fr); }
  .touch-shell .side { position:sticky; height:100dvh; overflow-y:auto; padding:24px 14px; gap:24px; }
  .touch-shell .brand { min-height:48px; }
  .touch-shell .brand i { font-size:13px; overflow-wrap:anywhere; }
  .touch-menu { flex:1; min-height:0; }
  .touch-menu > summary { display:none; }
  .touch-menu-body { display:flex; flex-direction:column; gap:24px; min-height:100%; }
  .touch-shell .side nav { flex-direction:column; gap:5px; }
  .touch-shell .nav-i { min-height:48px; padding:10px 12px; font-size:15px; }
  .touch-shell .nav-ic { font-size:18px; width:22px; }
  .touch-shell .side-foot { padding:14px 4px; }
  .touch-shell .side-foot a { display:flex; align-items:center; min-height:44px; font-size:14px; }
  .touch-shell .orgswitch { flex-wrap:wrap; }
  .touch-shell .orgswitch select { flex-basis:100%; }
  .touch-shell main { width:100%; min-width:0; padding:32px clamp(18px,3vw,44px) 48px; }
  .touch-shell .ph { gap:20px; margin-bottom:26px; }
  .touch-shell .ph h1 { font-size:clamp(26px,3vw,34px); }
  .touch-shell .ph .lede { font-size:16px; }
  .touch-shell .grid { gap:20px; }
  .touch-shell .g2 { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
  .touch-shell .g3 { grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
  .touch-shell .card-h { padding:18px; flex-wrap:wrap; }
  .touch-shell .card-h h2 { font-size:16px; }
  .touch-shell .card-b { padding:18px; }
  .touch-shell .card-b .tw { margin:-18px; }
  .touch-shell .stat { padding:20px; min-height:112px; }
  .touch-shell th, .touch-shell td { padding:14px 18px; }
  .touch-shell td a { display:inline-flex; align-items:center; min-height:44px; }
  .touch-shell .btn, .touch-shell summary, .touch-shell .check,
  .loginbg .btn, .tech .tlang, .tech .tfoot a { min-height:48px; }
  .touch-shell .btn { justify-content:center; font-size:15px; }
  .touch-shell input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  .touch-shell select, .touch-shell textarea, .loginbg input, .loginbg select {
    min-height:48px; font-size:16px;
  }
  .touch-shell input[type=checkbox], .touch-shell input[type=radio] { width:22px; height:22px; flex-shrink:0; }
  .touch-shell .input > span, .touch-shell .field dt { font-size:12px; }
  .touch-shell .frow { gap:18px; }
  .touch-shell .field dd { overflow-wrap:anywhere; }
  .touch-bottom { display:none; }
  .tech .tlang, .tech .tfoot a { display:inline-flex; align-items:center; min-width:44px; }
  .tech .tfoot { flex-wrap:wrap; }
  a, button, summary, select, input { touch-action:manipulation; }
  @media (max-width:699px) {
    .touch-shell .shell { display:block; }
    .touch-shell .side { position:static; height:auto; padding:calc(12px + env(safe-area-inset-top)) 16px 12px; gap:8px; }
    .touch-shell .brand { padding:0 4px; }
    .touch-menu > summary { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; cursor:pointer; border:1px solid var(--line-2); border-radius:12px; }
    .touch-menu[open] .touch-menu-body { padding-top:12px; }
    .touch-shell main { padding:24px 16px calc(104px + env(safe-area-inset-bottom)); }
    .touch-shell .ph .acts { width:100%; }
    .touch-shell .ph .acts .btn { flex:1; }
    .touch-shell .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .touch-shell .stat { padding:16px; overflow-wrap:anywhere; }
    .touch-shell .frow, .touch-shell .fields { grid-template-columns:minmax(0,1fr); }
    .touch-shell .linkrow { flex-wrap:wrap; }
    .touch-shell .linkbox { min-width:0; }
    .touch-bottom { position:fixed; bottom:0; left:0; right:0; z-index:20; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--panel); box-shadow:0 -4px 20px rgba(14,27,38,.08); }
    .touch-bottom a { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-height:56px; padding:4px; border-radius:12px; font-size:11px; font-weight:600; text-decoration:none; text-align:center; color:var(--ink-2); }
    .touch-bottom a > span:first-child { font-size:21px; }
    .touch-bottom [aria-current=page] { background:var(--sky-bg); color:var(--info); }
  }
}
@media print { .touch-bottom { display:none !important; } }

@media screen { .dispatch-days { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:16px; margin:16px 0; } .dispatch-days section { border-top:1px solid var(--border,#ddd); padding:8px 0; } }

.job-sections { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; } .table-wrap { overflow-x:auto; max-width:100%; } [id^="job-"] { scroll-margin-top:16px; } @media print { .job-sections, [data-print-quote], .public form { display:none; } }

/* ================================================================ landing ==
   The front door for somebody who has never heard of FixMinute: what it does,
   who it is for, and the way in. White, with one sky-blue band. */
.lp { background:var(--panel); color:var(--ink); }
.lp-wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
.lp-top { position:sticky; top:0; z-index:10; background:var(--panel); border-bottom:3px solid var(--sky); }
.lp-top .lp-wrap { display:flex; align-items:center; gap:22px; min-height:68px; }
.lp-brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:20px; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.lp-brand .mark { width:36px; height:36px; display:block; }
.lp-links { display:flex; gap:20px; margin-left:auto; align-items:center; }
.lp-links a { color:var(--ink); text-decoration:none; font-size:15.5px; white-space:nowrap; }
.lp-links a:hover { color:var(--info); }
.lp-links a.lp-btn, .lp-links a.lp-btn:hover { color:#fff; }
.lp main { padding:0; max-width:none; }
.lp-btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 20px; border-radius:7px;
  font:inherit; font-size:16px; text-decoration:none; background:var(--navy); color:#fff; border:2px solid var(--navy); }
.lp-btn:hover { background:var(--info); border-color:var(--info); }
.lp-btn.light { background:#fff; color:var(--info); border-color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.lp-btn.light:hover { background:var(--sky-bg); border-color:var(--sky-bg); }
.lp-btn.ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.85); }
.lp-btn.ghost:hover { background:rgba(255,255,255,.14); }
.lp-hero { background:var(--sky); color:#fff; padding:56px 0 64px; }
.lp-hero .lp-wrap { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:40px; align-items:center; }
.lp-hero h1 { font-size:clamp(32px,4.6vw,48px); font-weight:650; line-height:1.12; letter-spacing:-.02em; margin:0 0 16px; color:#fff; text-shadow:0 1px 2px rgba(3,105,161,.35); }
.lp-hero p { font-size:19px; line-height:1.5; margin:0 0 26px; max-width:34em; text-shadow:0 1px 2px rgba(3,105,161,.35); }
.lp-cta { display:flex; flex-wrap:wrap; gap:12px; }
.lp-phone { justify-self:center; width:min(100%,300px); background:#fff; color:var(--ink); border-radius:30px; padding:16px 14px;
  border:8px solid #1f2a33; box-shadow:0 18px 40px rgba(3,105,161,.35); display:flex; flex-direction:column; gap:10px; }
.lp-phone .lp-bar { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); padding:0 4px; }
.lp-phone h3 { font-size:17px; margin:2px 4px 0; }
.lp-phone .lp-addr { font-size:13px; color:var(--info); margin:0 4px; }
.lp-phone .lp-row { display:flex; justify-content:space-between; font-size:13.5px; padding:9px 4px; border-top:1px solid var(--line); }
.lp-phone .lp-go { background:var(--navy); color:#fff; border-radius:7px; text-align:center; padding:11px; font-weight:600; font-size:14px; }
.lp-phone .lp-done { background:var(--ok); color:#fff; border-radius:7px; text-align:center; padding:11px; font-weight:600; font-size:14px; }
.lp-sec { padding:60px 0; }
.lp-sec.alt { background:var(--panel-2); }
.lp-sec h2 { font-size:clamp(24px,3vw,30px); font-weight:650; text-align:center; margin:0 0 10px; }
.lp-sec .lp-lede { text-align:center; color:var(--ink-2); font-size:17px; max-width:40em; margin:0 auto 34px; }
.lp-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:22px; }
.lp-step { text-align:center; padding:8px 10px; }
.lp-num { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--sky-bg); color:var(--info); font-weight:700; font-size:20px; margin-bottom:12px; }
.lp-step h3, .lp-feat h3 { font-size:18px; font-weight:650; margin:0 0 6px; }
.lp-step p, .lp-feat p { color:var(--ink-2); margin:0; font-size:15.5px; }
.lp-feats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:18px; }
.lp-feat { background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:20px; }
.lp-feat .lp-ic { color:var(--sky); font-size:22px; display:block; margin-bottom:8px; }
.lp-brand-pic { display:block; width:100%; max-width:820px; height:auto; margin:0 auto; }
.lp-end { background:var(--sky); color:#fff; text-align:center; padding:52px 0; }
.lp-end h2 { color:#fff; margin:0 0 18px; font-size:clamp(24px,3vw,30px); text-shadow:0 1px 2px rgba(3,105,161,.35); }
.lp-foot { padding:26px 0; color:var(--muted); font-size:14px; }
.lp-foot .lp-wrap { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; }
.lp-foot a { color:var(--muted); }

/* ---- crew & staff ---- */
.crew-add > summary { list-style:none; display:inline-flex; }
.crew-add > summary::-webkit-details-marker { display:none; }
.crew-add[open] > summary { margin-bottom:12px; }
.crew-status { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.crew-week { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.crew-week li { display:flex; flex-direction:column; gap:1px; }
.crew-when { font-weight:650; font-size:13px; color:var(--info); }

/* ---- one job: the work on the left, what to do about it on the right ---- */
.job-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; margin:-4px 0 12px; }
.job-actions form { margin:0; }
.job-wrap { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr); gap:16px; align-items:start; }
.job-main, .job-side, .job-main > div { display:flex; flex-direction:column; gap:16px; min-width:0; }
.job-side { position:sticky; top:16px; }
.job-desc { white-space:pre-line; margin:0 0 14px; font-size:15px; }
.contact-line { display:block; }
.progress { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:0; }
.progress li { position:relative; padding:0 0 12px 22px; color:var(--muted); font-size:14px; display:flex; flex-direction:column; }
.progress li::before { content:''; position:absolute; left:4px; top:5px; width:10px; height:10px; border-radius:50%; border:2px solid var(--line-2); background:var(--panel); }
.progress li::after { content:''; position:absolute; left:9px; top:17px; bottom:-3px; width:2px; background:var(--line); }
.progress li:last-child::after { display:none; }
.progress li.done { color:var(--ink); }
.progress li.done::before { background:var(--sky); border-color:var(--sky); }
.progress li.now span:first-child { font-weight:650; }
@media (max-width:1100px) {
  .job-wrap { grid-template-columns:minmax(0,1fr); }
  .job-side { position:static; order:-1; }
}

/* ---- the work orders list: tabs, one search box, cards on a phone ---- */
.wo-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.wo-count { display:inline-block; min-width:22px; padding:0 6px; border-radius:99px; background:var(--sunk); color:var(--ink-2); font-size:12px; }
.wo-tabs .btn.primary .wo-count { background:rgba(255,255,255,.25); color:#fff; }
.wo-filters { display:grid; grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px; align-items:end; }
.wo-filters input[type=search] { font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--radius); background:var(--panel); width:100%; min-height:46px; }
tr[data-href] { cursor:pointer; }
.wo-new { max-width:900px; }
@media (max-width:699px) {
  .wo-filters { grid-template-columns:minmax(0,1fr); }
  .wo-list .tw { margin:0; }
  .wo-list table, .wo-list tbody, .wo-list tr, .wo-list td { display:block; width:100%; }
  .wo-list thead { display:none; }
  .wo-list tr { padding:12px 14px; border-bottom:1px solid var(--line); }
  .wo-list td { border:0; padding:2px 0 !important; text-align:left !important; }
  .wo-list td.num { white-space:normal; }
}

/* ---- the inbox: a drop zone, the paper beside the form ---- */
.drop { position:relative; display:flex; align-items:center; justify-content:center; min-height:120px; border:2px dashed var(--line-2);
  border-radius:var(--radius); background:var(--panel-2); text-align:center; padding:18px; cursor:pointer; }
.drop:hover, .drop:focus-within { border-color:var(--sky); background:var(--sky-bg); }
.drop input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.drop-b { display:flex; flex-direction:column; gap:4px; pointer-events:none; }
.mb-steps { margin:8px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:14px; }
.mb-code { background:var(--warn-bg); color:var(--warn); border-radius:var(--radius); padding:10px 12px; }
.mb-code pre { white-space:pre-wrap; font-size:13px; margin:6px 0 0; max-height:180px; overflow:auto; color:var(--ink); }
.ib-facts { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:-6px 0 16px; font-size:14px; }
.ib { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; margin-top:16px; }
.ib.ib-solo { grid-template-columns:minmax(0,1fr); max-width:900px; }
.ib-pdf { position:sticky; top:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.ib-pdf iframe { width:100%; height:calc(100vh - 90px); min-height:520px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.ib-side { display:flex; flex-direction:column; gap:16px; min-width:0; }
.ib-sec { border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin:0; display:flex; flex-direction:column; gap:12px; }
.ib-sec legend { font-weight:650; font-size:15px; padding:0 6px; }
.ib-assign { border:2px solid var(--sky); background:var(--sky-bg); }
.ib-reject > summary { list-style:none; display:inline-flex; }
.ib-reject > summary::-webkit-details-marker { display:none; }
.ib-reject form { margin-top:10px; }
@media (max-width:1100px) {
  .ib { grid-template-columns:minmax(0,1fr); }
  .ib-pdf { position:static; }
  .ib-pdf iframe { display:none; }
}

/* ---- settings: short sections that save on their own ---- */
.set-sec { margin-top:16px; scroll-margin-top:16px; }
.set-id { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.set-logo { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.set-logo-box { width:200px; height:120px; border:1px dashed var(--line-2); border-radius:var(--radius); display:grid; place-items:center; background:var(--panel-2); overflow:hidden; }
.set-logo-box img { max-width:180px; max-height:100px; }
.set-nologo { color:var(--muted); font-size:13px; padding:8px; text-align:center; }
.set-file { position:relative; overflow:hidden; cursor:pointer; }
.set-file input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.set-chips { border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; }
.set-chips legend { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; margin-bottom:8px; }
.set-chip { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; font-size:14px; }
.set-chip:has(input:checked) { border-color:var(--sky); background:var(--sky-bg); }
.set-chip input { width:18px; height:18px; flex-shrink:0; }
.set-edit[open] { flex-basis:100%; }
.set-edit summary { list-style:none; }
.set-edit summary::-webkit-details-marker { display:none; }
.set-edit form { margin-top:8px; }
@media (max-width:700px) { .set-id { grid-template-columns:minmax(0,1fr); } }

/* ---- sign-up: the landing page's header, a form in short sections ---- */
body.su-page { background:var(--bg); }
.lp main.su-wrap { max-width:860px; margin:0 auto; padding:34px 20px 56px; }
.su-head h1 { font-size:clamp(28px,4vw,36px); font-weight:650; margin:0 0 8px; }
.su-head p { margin:0 0 6px; font-size:17px; color:var(--ink-2); }
.su-card { background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:22px; margin-top:18px; box-shadow:var(--shadow); }
.su-card h2 { font-size:19px; font-weight:650; margin:0 0 4px; }
.su-card > .su-note { margin-bottom:6px; }
.su-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; margin-top:14px; }
.su-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.su-field.full { grid-column:1 / -1; }
.su-field label { font-weight:600; font-size:15px; }
.su-field input, .su-field select, .su-field textarea { min-height:46px; font-size:16px; }
.su-opt { font-weight:400; color:var(--muted); font-size:13.5px; }
.su-note { color:var(--muted); font-size:14px; margin:0; }
.su-pass { display:flex; gap:8px; }
.su-pass input { flex:1; min-width:0; }
.su-pass .btn { min-height:46px; white-space:nowrap; }
.su-feats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px; margin-top:14px; }
.su-feat { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:7px; cursor:pointer; }
.su-feat:has(input:checked) { border-color:var(--sky); background:var(--sky-bg); }
.su-feat input { width:20px; height:20px; margin-top:2px; flex-shrink:0; }
.su-feat b { display:block; font-weight:600; font-size:15px; }
.su-actions { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:22px; text-align:center; }
.su-actions .lp-btn { width:100%; max-width:420px; font-weight:600; }
.su-done { text-align:center; padding:34px 24px; }
.su-done h1 { font-size:26px; margin:0 0 10px; }
.su-done p { margin:0 0 10px; }
.su-wrap .flash { margin:0 0 6px; }
@media (max-width:640px) {
  .su-grid, .su-feats { grid-template-columns:minmax(0,1fr); }
  .su-card { padding:18px 16px; }
}
@media (max-width:820px) {
  .lp-hero .lp-wrap { grid-template-columns:minmax(0,1fr); }
  .lp-hero { padding:36px 0 44px; }
  .lp-links .lp-hide { display:none; }
}
@media (max-width:480px) {
  .lp-top .lp-wrap { gap:10px; }
  .lp-links { gap:12px; }
  .lp-links .lp-lang { display:none; }
  .lp-links .lp-btn { padding:8px 12px; font-size:14.5px; min-height:42px; }
  .lp-cta .lp-btn { flex:1 1 100%; }
}

/* ---- vendors: insurance first, the file on one form, the rest folded ---- */
.vd-alert { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:11px 14px; margin:0 0 14px; border:1px solid var(--line-2); border-left:4px solid var(--warn); border-radius:var(--radius); background:var(--panel); }
.vd-alert a { text-decoration:none; color:inherit; display:inline-flex; align-items:center; gap:6px; }
.vd-alert a:hover b, .vd-alert > a:last-child { text-decoration:underline; }
.vd-status { margin-top:0; padding-top:0; border-top:0; margin-bottom:14px; }
.stack-16 { display:flex; flex-direction:column; gap:16px; min-width:0; }
.vd-folds { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.vd-fold { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.vd-fold > summary { cursor:pointer; padding:13px 15px; font-weight:650; display:flex; align-items:center; gap:8px; }
.vd-fold[open] > summary { border-bottom:1px solid var(--line); }
.vd-fold-b { padding:15px; }
.vd-fold-b > .card { border:0; box-shadow:none; }
.vd-fold-b > .card > .card-h { display:none; }
.vd-fold-b > .card > .card-b { padding:0; }
.vd-status details { position:relative; }
.vd-status details > summary { list-style:none; }
.vd-status details > summary::-webkit-details-marker { display:none; }
.vd-status details > form { position:absolute; z-index:20; top:calc(100% + 6px); left:0; width:min(320px, 86vw); margin:0; padding:14px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:0 10px 30px rgba(15,23,42,.14); }
.vd-status details:last-child > form { left:auto; right:0; }

/* ---- one client: its jobs and sites on the left, its file on the right ---- */
.cl-stack { display:flex; flex-direction:column; gap:16px; min-width:0; }

/* ---- accounting: what to bill, what is owed ---- */
.acct-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:0 0 16px; }
.acct-stat { display:flex; flex-direction:column; gap:4px; padding:13px 15px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); text-decoration:none; color:inherit; }
.acct-stat span { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted, #64748b); }
.acct-stat b { font-size:22px; font-weight:700; color:var(--ink, #0f172a); }
.acct-stat.bad b { color:var(--bad); }
.acct-stat:hover { border-color:var(--sky); }
.inv-lines td { padding:6px 6px; vertical-align:middle; }
.inv-lines input, .inv-lines select { font:inherit; font-size:14px; padding:7px 8px; border:1px solid var(--line-2); border-radius:var(--radius); background:var(--panel); width:100%; min-height:40px; }
.inv-lines td:nth-child(1) { width:110px; } .inv-lines td:nth-child(2) { min-width:220px; } .inv-lines td:nth-child(3) { width:64px; } .inv-lines td:nth-child(4) { width:96px; } .inv-lines td:nth-child(5) { width:140px; }
.acct-totals { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 22px; padding:12px 0 0; font-size:15px; }
.acct-totals b { font-size:16px; }
.acct-addr { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
.acct-addr h3 { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 4px; color:var(--muted, #64748b); }
.acct-addr p { white-space:pre-line; margin:0; }
.acct-owed { font-size:16px; margin:0 0 12px; }
td.num.late { color:var(--bad); font-weight:650; }
tr.acct-total td { border-top:2px solid var(--line-2); }
@media (max-width:699px) {
  .acct-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .acct-addr { grid-template-columns:1fr; }
  .inv-lines, .inv-lines tbody, .inv-lines tr, .inv-lines td { display:block; width:100% !important; }
  .inv-lines thead { display:none; }
  .inv-lines tr { border-bottom:1px solid var(--line); padding:8px 0; }
}
.pay-wrap { max-width:640px; margin:0 auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.pay-head { display:flex; align-items:center; gap:14px; }
.pay-head h1 { margin:0; font-size:22px; }
.pay-head .sub { display:block; }
.pay-logo { width:56px; height:56px; object-fit:contain; }
.pay-sum { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:16px; }
.pay-sum > div { display:flex; flex-direction:column; gap:2px; }
.pay-big { font-size:26px; color:var(--navy); }
.pay-btn { font-size:18px; padding:14px 22px; width:100%; justify-content:center; }
.pay-done { font-size:16px; }
tr.cat-group td { background:var(--sunk, #f1f5f9); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); padding:7px 12px; }
.job-actions details.crew-add[open] { flex-basis:100%; }
.site-people { list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:8px; }
.site-people li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.site-people li:last-child { border-bottom:0; }
.card.site-before { border-left:4px solid var(--sky); }
/* ---- the quote editor: one row per item ---- */
.quote-items { display:flex; flex-direction:column; gap:10px; }
fieldset.quote-item { display:grid; grid-template-columns:130px minmax(0,2.4fr) 80px 110px 110px 90px; gap:8px 10px; align-items:end; border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin:0; }
fieldset.quote-item legend { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); padding:0 4px; }
fieldset.quote-item .qi-opt { grid-column:1 / -1; }
@media (max-width:899px) { fieldset.quote-item { grid-template-columns:1fr 1fr; } fieldset.quote-item .qi-desc { grid-column:1 / -1; } }
/* ---- choosing a type: three plain cards ---- */
.item-types { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.item-type { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line-2); border-radius:var(--radius); padding:12px; cursor:pointer; background:var(--panel); }
.item-type:has(input:checked) { border-color:var(--sky); background:var(--sky-bg); }
.item-type input { margin-top:3px; }
.item-type b { display:block; margin-bottom:2px; }
@media (max-width:699px) { .item-types { grid-template-columns:1fr; } }

/* ── Phase 1: the dispatch screen, categories and queues ─────────────────── */
.cat-chip { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--cat, #e5e7eb); color:#2b2b2b; border:1px solid rgba(0,0,0,.08); vertical-align:middle; }
.q-chip { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; background:var(--warn-bg); color:var(--warn); vertical-align:middle; }
.job-chips { margin:0 0 10px; display:flex; flex-wrap:wrap; gap:6px; }
.job-labels { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); align-items:end; }
.wo-queues { margin-top:-4px; }
.dp { max-width:860px; }
.dp-sec { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:14px 16px 16px; margin:0; }
.dp-sec legend { font-weight:700; padding:0 6px; display:flex; align-items:center; gap:8px; }
.dp-n { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--navy); color:var(--navy-ink); font-size:12px; }
.dp-types { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin-bottom:12px; }
.dp-type, .dp-tech { position:relative; display:flex; }
.dp-type input, .dp-tech input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.dp-type span { flex:1; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--radius); background:var(--panel-2); font-weight:600; font-size:14px; text-align:center; }
.dp-type input:checked + span, .dp-tech input:checked + span { border-color:var(--navy); background:var(--sky-bg); box-shadow:0 0 0 1px var(--navy) inset; }
.dp-type input:focus-visible + span, .dp-tech input:focus-visible + span { outline:2px solid var(--sky); outline-offset:2px; }
.dp-techs { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; margin-bottom:12px; }
.dp-tech > span { flex:1; display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--radius); background:var(--panel-2); }
.dp-tech.busy > span b::after { content:" ●"; color:var(--warn); }
.dp-tech.none > span { background:var(--panel); border-style:dashed; }
.dp-flags { align-items:end; }
.dp-ah { padding:8px 10px; border-radius:var(--radius); }
.dp-ah.on { background:#f3e8ff; color:#5b2a86; font-weight:600; }
.dp-vehicle summary, .sb-new summary { cursor:pointer; }
.dp-go { position:sticky; bottom:0; padding:12px 0; background:linear-gradient(transparent, var(--bg) 30%); }
.btn.lg { padding:12px 22px; font-size:16px; }
.set-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.set-row input[name=name] { flex:1; min-width:160px; }
.set-day { width:100px; }
.set-add { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.input.inline { flex-direction:row; align-items:center; gap:6px; }
.input.inline input { width:80px; }
@media (max-width:600px) { .dp-types { grid-template-columns:repeat(2, 1fr); } .dp-techs { grid-template-columns:1fr; } }
.set-row input:not([type=checkbox]), .set-row select { width:auto; }
.set-row input[name=name] { width:auto; flex:1 1 220px; }
.set-row input[type=color] { width:44px; height:34px; padding:2px; }
.set-row .check { white-space:nowrap; }
.job-labels-go { flex:0 0 auto; padding-bottom:2px; }
.sb-job.sb-cat { border-left:4px solid var(--cat); }

/* ── Phase 2: the customer's authorization ───────────────────────────────── */
.auth-text { margin:10px 0 0; padding:12px 14px; background:var(--panel-2); border-left:3px solid var(--navy); border-radius:4px; font-size:15px; line-height:1.5; }
.auth-where { margin:8px 0 0; }
.auth-row { display:flex; gap:10px; }
.auth-row > span { flex:1; display:flex; flex-direction:column; }
.auth-pad { width:100%; aspect-ratio:600/220; border:1px solid var(--line-2); border-radius:var(--radius); background:#fff; touch-action:none; }
.auth-agree { font-size:15px; align-items:flex-start; }
.auth-needed { border:2px solid var(--warn); }
.auth-sig { max-width:320px; width:100%; border:1px solid var(--line); border-radius:4px; background:#fff; }
.auth-rec + .auth-rec { border-top:1px solid var(--line); padding-top:12px; }
.tclock { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tclock p { margin:0; }
.tclock.on { border-left:4px solid var(--ok); }
.ttime { margin:6px 0 0; }
.tclock-wrap { display:flex; flex-direction:column; gap:8px; }
.shift-row input[type=datetime-local] { width:auto; }
.shift-row input[name=note] { flex:1 1 180px; width:auto; }
.shift-trail { flex-basis:100%; }
.shift-row + .shift-row { border-top:1px solid var(--line); padding-top:10px; }
.biz-grid { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.acct-stat.biz small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.sms-log { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sms-log li { display:flex; flex-direction:column; gap:2px; padding:8px 10px; background:var(--panel-2); border-radius:var(--radius); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.book-types { grid-template-columns:repeat(2, 1fr); }