/* Work orders phone apps - the phone look (design research NOTE 3 Oct 13:12, owner's go 12:45).
   Loaded after core.css and only by the work orders apps: core.css (shared with the importer) is not changed.
   Colours readable in the sun (text 6.3:1 or more, control borders 3.6:1), every tap target 44 px or more. */
:root{
  --ink:#141c1f; --ink-2:#2d3a3d; --muted:#4a5557; --line:#d3dad8; --line-strong:#7d8a88;
  --screen:#ffffff; --ground:#f2f5f4; --chip:#eceff0;
  --accent:#0b4f58; --accent-ink:#ffffff; --accent-soft:#dbecee; --accent-press:#083f47;
  --green:#176238; --green-soft:#def2e5; --red:#9f1f17; --red-soft:#fbe3e0; --amber:#7a4500; --amber-soft:#fdeccd;
  --grey:#4a5557; --grey-soft:#eceff0; --band:#a33a0a;
  --tap:44px; --tap-lg:48px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ink:#e7eeed; --ink-2:#c9d1cf; --muted:#9aa9a7; --line:#2a3637; --line-strong:#6b7876;
  --screen:#141b1c; --ground:#0c1112; --chip:#1f2929;
  --accent:#5fb7c2; --accent-ink:#06282c; --accent-soft:#1c3437; --accent-press:#4fa3ad;
  --green:#6fd39a; --green-soft:#16301f; --red:#ff8a80; --red-soft:#3b1d1b; --amber:#f0b04a; --amber-soft:#3a2c14;
  --grey:#9aa9a7; --grey-soft:#1f2929; --band:#b83a0a}}
:root[data-theme="dark"]{
  --ink:#e7eeed; --ink-2:#c9d1cf; --muted:#9aa9a7; --line:#2a3637; --line-strong:#6b7876;
  --screen:#141b1c; --ground:#0c1112; --chip:#1f2929;
  --accent:#5fb7c2; --accent-ink:#06282c; --accent-soft:#1c3437; --accent-press:#4fa3ad;
  --green:#6fd39a; --green-soft:#16301f; --red:#ff8a80; --red-soft:#3b1d1b; --amber:#f0b04a; --amber-soft:#3a2c14;
  --grey:#9aa9a7; --grey-soft:#1f2929; --band:#b83a0a}

/* type: body 16 px (no zoom on iOS), nothing under 12 px; condensed face only in the app bar and on sign-in */
body{font:16px/1.4 var(--f-body);font-variant-numeric:tabular-nums}
.body{padding:14px 16px 24px}
.logo{font:600 22px/1.2 var(--f-body);letter-spacing:0}
.center .logo{font:700 34px/1.05 var(--f-display)}
.sec{font:600 14px var(--f-body);color:var(--muted);text-transform:none;letter-spacing:0;margin:10px 0 0}
label.f{font:600 14px var(--f-body);color:var(--ink-2)}
label.f input,label.f select,label.f textarea,.search,.propsel{border-color:var(--line-strong);min-height:var(--tap)}
label.f .req{color:var(--red);margin-left:2px}
label.f .opt{font-weight:400;color:var(--muted)}
.muted,.note small{color:var(--muted)}

/* bands: TEST PHASE white on burnt orange; offline and read-only 44 px tall */
.testband{background:var(--band);color:#fff;font:700 12px var(--f-body);letter-spacing:.06em;padding:7px 8px;border-bottom:0}
.offline{background:var(--amber-soft);color:var(--amber);font:600 14px var(--f-body);min-height:var(--tap);display:flex;align-items:center;justify-content:center;padding:6px 12px}
.offline[hidden]{display:none!important}
.readonly{background:var(--red-soft);color:var(--red);font:600 14px var(--f-body);min-height:var(--tap);display:flex;align-items:center;justify-content:center;padding:6px 12px}

/* touch targets */
.iconbtn{min-height:var(--tap);min-width:var(--tap);padding:6px 8px;font-size:16px}
.tabs button{min-height:var(--tap);font-size:15px;color:var(--ink-2)}
.chips{gap:8px;padding:2px 0 4px}
.chips button,.chip.near{min-height:36px;padding:6px 14px;font:500 14px var(--f-body);border:1px solid var(--line-strong);border-radius:99px;background:var(--screen);color:var(--ink)}
.chips button[aria-pressed="true"],.chip.near[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn{min-height:var(--tap-lg);font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn.ghost{background:var(--screen);border-color:var(--line-strong);color:var(--accent)}
.btn.sm{min-height:var(--tap);padding:8px 18px}
.btn:not(:disabled):active{background:var(--accent-press);border-color:var(--accent-press)}
.btn.ghost:not(:disabled):active{background:var(--chip);border-color:var(--line-strong)}
.foot{flex-wrap:wrap;padding:12px 16px}
.foot .btn{flex:1 1 28%;padding-left:8px;padding-right:8px}
.fab{bottom:calc(14px + env(safe-area-inset-bottom));min-height:52px;border-radius:16px}
.fab:active{background:var(--accent-press)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* tool row */
.tools{display:flex;gap:8px;align-items:center;flex-shrink:0}
.tools .search{flex:1;min-width:0;font-size:16px}
.tools .propsel{flex:0 1 42%;margin:0}

/* the list: title first, place second, what matters now, a priority bar (word + bar, never colour alone) */
.list{border-top:0;gap:8px;padding-bottom:84px}
.wocard{display:grid;grid-template-columns:1fr auto;gap:3px 10px;min-height:72px;padding:12px 12px 12px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--screen);text-align:left;color:inherit;font:inherit;width:100%;cursor:pointer;position:relative;overflow:hidden}
.wocard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--line-strong)}
.wocard.p-red::before{background:var(--red)} .wocard.p-amber::before{background:var(--amber)} .wocard.p-green::before{background:var(--green)}
.wocard:active,.card:active{background:var(--chip)}
.wocard .t{font:600 16px/1.3 var(--f-body);min-width:0}
.wocard .side{font:600 13px var(--f-body);color:var(--muted);text-align:right;white-space:nowrap}
.wocard .where{grid-column:1/-1;color:var(--ink-2);font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wocard .meta{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:3px}
.wocard .no{font:500 12px var(--f-mono);color:var(--muted);margin-left:auto}
.pill{font:600 12px var(--f-body);padding:3px 8px;border-radius:6px;background:var(--grey-soft);color:var(--grey)}
.pill.high,.pill.amber{background:var(--amber-soft);color:var(--amber)}
.pill.red,.pill.bad{background:var(--red-soft);color:var(--red)}
.pill.over{background:var(--red);color:#fff}
.pill.ok{background:var(--green-soft);color:var(--green)}
.pill.cat{background:var(--accent-soft);color:var(--accent)}
.count{font-weight:500;color:var(--muted);margin-left:4px}
.tabs button[aria-selected="true"] .count{color:var(--ink-2)}
.empty{color:var(--ink-2)} .empty b{display:block;color:var(--ink);margin-bottom:4px}
.skel{height:72px;border-radius:12px;background:linear-gradient(90deg,var(--chip),var(--grey-soft),var(--chip));background-size:200% 100%}
@media (prefers-reduced-motion:no-preference){.skel{animation:sk 1.2s linear infinite}@keyframes sk{to{background-position:-200% 0}}}

/* one work order: a status card, then what is wrong, then people, then history */
.wohead .addr{color:var(--ink-2);font-size:14px;margin-top:4px}
.wohead .no{font:500 13px var(--f-mono);color:var(--muted)}
.stat{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;background:var(--chip);border-radius:12px;padding:12px 14px;margin:0;font-size:15px}
.stat dt{color:var(--muted);font-size:14px}
.stat dd{margin:0;min-width:0;overflow-wrap:anywhere;font-weight:600}
.stat .late{color:var(--red)}
.dirs{display:flex;align-items:center;gap:10px;min-height:var(--tap-lg);border:1px solid var(--line-strong);border-radius:10px;padding:8px 12px;text-decoration:none;color:var(--ink)}
.dirs span{flex:1;min-width:0}
.dirs b{color:var(--accent);white-space:nowrap}
.dirs:active{background:var(--chip)}
.block h3,.block .who{font:600 16px var(--f-body)}
.note{font-size:15px}
.note small{font-size:13px;margin-bottom:2px} .note small b{color:var(--ink-2)}

/* forms: segmented choice, quick dates, folded extras */
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{flex:1 1 28%;min-height:var(--tap);border:1px solid var(--line-strong);border-radius:10px;background:var(--screen);color:var(--ink);font:600 14px var(--f-body);cursor:pointer;padding:6px 8px;text-transform:capitalize}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.quick button{min-height:36px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:99px;background:var(--screen);color:var(--accent);font:600 14px var(--f-body);cursor:pointer}
details.more{border:1px solid var(--line);border-radius:12px;padding:0 12px}
details.more>summary{min-height:var(--tap);display:flex;align-items:center;font:600 15px var(--f-body);color:var(--accent);cursor:pointer}
details.more[open]{padding-bottom:12px} details.more[open]>summary{margin-bottom:6px}
details.more .f+.f{margin-top:10px}
label.f.changed>select,label.f.changed>input{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
label.f.changed::after{content:"changed";font:600 12px var(--f-body);color:var(--accent)}

/* check page and result: Was -> Now for what changes; the automatic checks at the bottom, like a log */
.lead{font-size:15px;color:var(--ink-2)}
.diff{width:100%;border-collapse:collapse;font-size:15px}
.diff th{font:600 12px var(--f-body);color:var(--muted);text-align:left;padding:0 6px 6px 0;text-transform:uppercase;letter-spacing:.05em}
.diff td{padding:8px 6px 8px 0;border-top:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.diff td.l{color:var(--muted);width:32%}
.diff .was{color:var(--muted);text-decoration:line-through}
.diff .now{font-weight:600}
details.same{font-size:14px;color:var(--muted)} details.same>summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer}
.log{border-top:1px solid var(--line);padding-top:10px;margin-top:6px;display:flex;flex-direction:column;gap:4px}
.log .sec{margin:0 0 4px}
.log .check{font:13px/1.4 var(--f-mono);color:var(--ink-2);align-items:flex-start}
.log .check i{flex:none}
.big{font:700 30px/1.1 var(--f-display)}