/* Mackey Electric: one stylesheet for every page, the printed schedule and the printed work order. */
:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #1f2933;
  --muted: #5b6672;          /* (dark enough to read on the light gray headers too, even outdoors: at least 4.5:1) */
  --line: #d5dae0;
  --line-strong: #9aa4ae;
  --head: #1f2a37;
  --head-ink: #e8edf2;
  --accent: #1d5fbf;
  --accent-ink: #ffffff;
  --accent-soft: #e7effb;
  --volt: #facc15;
  --today: #fff8db;
  --me: #eef5ff;
  --ok-bg: #e7f6ec;
  --ok-ink: #17602f;
  --bad-bg: #fdecec;
  --bad-ink: #a32020;
  --radius: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); }
a { color: var(--accent); }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; line-height: 1.2; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
h1 + h2, p + h2, label + h2 { margin-top: 1.2rem; }
.muted { color: var(--muted); font-weight: normal; }
.hint { color: var(--muted); font-size: .88rem; margin: .5rem 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top bar ---------- */
header.top { display: flex; align-items: center; gap: .25rem 1.25rem; flex-wrap: wrap; background: var(--head); color: var(--head-ink); padding: .5rem 1rem; }
header.top a { color: var(--head-ink); text-decoration: none; }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
nav.main { display: flex; gap: .15rem; flex: 1; overflow-x: auto; }
nav.main a, .me a { padding: .45rem .7rem; border-radius: 6px; white-space: nowrap; }
nav.main a:hover, .me a:hover { background: rgba(255,255,255,.08); }
nav.main a.on, .me a.on { background: rgba(255,255,255,.14); box-shadow: inset 0 -2px 0 var(--volt); }
.me { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.me form { margin: 0; }
.me .linkbtn { color: var(--head-ink); opacity: .8; }

main { max-width: 1060px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
body.wide main { max-width: none; }

/* ---------- buttons and forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 38px; padding: .4rem .9rem; border: 1px solid var(--line-strong);
  border-radius: 6px; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.plain { border-color: transparent; background: transparent; color: var(--accent); }
.btn.danger { color: var(--bad-ink); border-color: #e3a5a5; }
.btn.danger.solid { background: var(--bad-ink); border-color: var(--bad-ink); color: #fff; }
.ask-first { display: inline-flex; margin: 0; }
.ask-box:not([hidden]) { display: inline-flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.ask-pw { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 600; }
.ask-pw input { width: 11rem; margin: 0; }
[hidden] { display: none !important; }
.list td.act { text-align: right; white-space: nowrap; padding-top: .35rem; padding-bottom: .35rem; }
.btn.small { min-height: 32px; padding: .25rem .7rem; font-size: .9rem; }
.btn.on { background: var(--accent-soft); border-color: var(--accent); }
.btn.wide { width: 100%; }
.linkbtn { border: 0; background: none; padding: .45rem .5rem; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }

label { display: block; margin: 0 0 .75rem; font-weight: 600; font-size: .9rem; }
input, select, textarea { display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem; border: 1px solid var(--line-strong); border-radius: 6px;
  background: #fff; color: var(--ink); font: 16px/1.3 var(--font); }
textarea { resize: vertical; }
input[aria-invalid] { border-color: var(--bad-ink); background: var(--bad-bg); }
label.chk { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; margin: 0 1rem .5rem 0; cursor: pointer; }
label.chk input { width: auto; margin: 0; width: 18px; height: 18px; }
fieldset { border: 0; padding: 0; margin: 0 0 .75rem; min-width: 0; }
legend { font-weight: 600; font-size: .9rem; padding: 0; margin-bottom: .3rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.actions.end { justify-content: flex-end; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.notice, .error { border-radius: var(--radius); padding: .65rem .9rem; margin: 0 0 1rem; }
.notice { background: var(--ok-bg); color: var(--ok-ink); }
.error { background: var(--bad-bg); color: var(--bad-ink); }
.error ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.empty { color: var(--muted); text-align: center; padding: 1.5rem; }

.pagehead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pagehead h1 { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tools { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.tools form { margin: 0; }
.sub { margin: 0 0 1rem; color: var(--muted); }
.stc { display: inline-block; margin-left: .5rem; padding: 0 .45rem; border: 1px solid var(--line-strong); border-radius: 4px; font-size: .75rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; align-items: end; }

/* ---------- sign in ---------- */
body.login-page main { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login { width: 100%; max-width: 360px; padding: 1.5rem; }
.login-brand { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.25rem; }
.login-brand strong { display: block; font-size: 1.25rem; }
.login-brand span { color: var(--muted); font-size: .9rem; }

/* ---------- schedule ---------- */
.gridwrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); }
table.sched { border-collapse: collapse; width: 100%; min-width: 900px; table-layout: fixed; }
.sched th, .sched td { border: 1px solid var(--line); vertical-align: bottom; }
.sched thead th { background: #eceff3; padding: .45rem .4rem; font-weight: 600; text-align: center; font-size: .9rem; }
.sched thead th span { display: block; font-weight: 500; color: var(--muted); }
.sched thead th.corner { text-align: left; vertical-align: bottom; width: 120px; }
.sched tbody th { position: -webkit-sticky; position: sticky; left: 0; z-index: 2; background: #f7f8fa; text-align: left; padding: .4rem .6rem; font-size: .88rem;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched thead th.corner { position: -webkit-sticky; position: sticky; left: 0; z-index: 3; }   /* (-webkit-: iOS 12) */
.sched td { position: relative; height: 3.4rem; padding: .3rem .4rem; font-size: .86rem; line-height: 1.25; }
.sched td.today, .sched thead th.today { background: var(--today); }
.sched tr.mine th, .sched tr.mine td { background: var(--me); }
.sched tr.mine th { box-shadow: inset 4px 0 0 var(--accent); color: var(--accent); }
.sched tr.mine td.today { background: #f3f3d6; }
.sched td.editable:hover { box-shadow: inset 0 0 0 2px var(--accent); cursor: pointer; }
.cellink { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }    /* (not inset: older iPads don't know it) */
.cellink:focus-visible { outline-offset: -3px; }
ul.jobs { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; pointer-events: none; text-transform: uppercase; }
ul.jobs li { word-wrap: break-word; overflow-wrap: anywhere; }   /* (word-wrap: for Safari before 15.4, which skips "anywhere") */
ul.jobs a { pointer-events: auto; text-decoration: none; }
ul.jobs a:hover { text-decoration: underline; }
ul.jobs .wo { font-size: .75em; color: var(--muted); white-space: nowrap; }
ul.jobs li.off { color: var(--muted); font-weight: 700; }
ul.jobs li[draggable] { pointer-events: auto; cursor: grab; border-radius: 3px; }
ul.jobs li[draggable]:hover { background: rgba(29, 95, 191, .1); }
ul.jobs li.dragging { opacity: .4; }
.sched td.drop-here { background: var(--accent-soft) !important; box-shadow: inset 0 0 0 2px var(--accent); }
.sched th.picked, .sched td.picked { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }   /* (the day opened from the month) */
.sched thead th.picked { box-shadow: inset 2px 2px 0 var(--accent), inset -2px 0 0 var(--accent); }
.myweek > ul > li.picked { border-color: var(--accent); }
.sched td.empty { text-align: center; height: auto; padding: 1.5rem; }

.myweek > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.myweek > ul > li { border: 1px solid var(--line); border-radius: 6px; padding: .4rem .5rem; min-height: 3.5rem; }
.myweek > ul > li.today { background: var(--today); border-color: #e5cf6a; }
.myweek .d { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .15rem; }
.myweek .none { color: var(--muted); }
.myweek ul.jobs { display: block; font-weight: 600; }

.cell-line { display: grid; grid-template-columns: 1fr 7.5rem 6rem; gap: .5rem; align-items: center; }
.cell-line .tsel { margin-bottom: .5rem; }
.cell-line .tsel select { margin-top: 0; }
.wo-tag { font-size: .85rem; white-space: nowrap; margin-bottom: .5rem; }
.cell-line label { margin-bottom: .5rem; }
.cell-line input { margin-top: 0; }
.also { margin-top: .75rem; }
.chks { display: flex; flex-wrap: wrap; }

/* ---------- Day | Week | Month ---------- */
.vswitch, .daynav { display: inline-flex; }
.vswitch .btn, .daynav .btn { border-radius: 0; margin-left: -1px; }
.vswitch .btn:first-child, .daynav .btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.vswitch .btn:last-child, .daynav .btn:last-child { border-radius: 0 6px 6px 0; }
.sched th a.dlink { display: block; color: inherit; text-decoration: none; }
.sched th a.dlink:hover { color: var(--accent); text-decoration: underline; }
.myweek a.d { text-decoration: none; }

/* ---------- the day view ---------- */
.dtitle { font-size: 1.3rem; font-weight: 700; margin: .25rem 0 1rem; }
.djobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; align-items: start; }
.djob { margin: 0; }
.djob h2 { margin: 0 0 .2rem; text-transform: uppercase; }
.djob h2 a { text-decoration: none; }
.djob .wo { color: var(--muted); font-size: .85rem; font-weight: 500; }
.djob p { margin: 0 0 .2rem; font-size: .9rem; }
.djob.off h2, .djob.free h2 { color: var(--muted); }
.djob.off, .djob.free { background: #f7f8fa; }
.crew { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.crew a { display: inline-flex; align-items: center; min-height: 34px; padding: .2rem .75rem; border: 1px solid var(--line); border-radius: 99px;
  background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; }
.crew a:hover { border-color: var(--accent); color: var(--accent); }
.slots { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.slot { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); border-top: 1px solid var(--line); min-height: 3rem; }
.slot:first-child { border-top: 0; }
.slot-t { padding: .55rem .6rem; font-weight: 700; font-size: .9rem; color: var(--muted); background: #f7f8fa; border-right: 1px solid var(--line); }
.slot.any { border-bottom: 2px solid var(--line-strong); }
.slot-jobs { display: flex; flex-wrap: wrap; gap: .5rem; padding: .4rem; align-items: flex-start; }
.slot .djob { flex: 0 1 270px; padding: .55rem .75rem; }
.slot .djob h2 { font-size: .98rem; }
.slot.drop-here { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.djob[draggable="true"], .crew [draggable="true"] { cursor: grab; }
.djob.dragging, .crew .dragging { opacity: .4; }
.djobs.rest { margin-top: .75rem; }
.tslot { grid-column: 1 / -1; margin: .5rem 0 -.35rem; font-size: .9rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tslot:first-child { margin-top: 0; }
ul.jobs .at, .myweek .at, .mjobs .at { font-size: .78em; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tjobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: .9rem; align-items: start; }
.tjob { margin: 0; padding: 1.1rem 1.15rem; font-size: 1.02rem; }
.tjob h2 { font-size: 1.4rem; margin: 0 0 .2rem; text-transform: uppercase; word-wrap: break-word; overflow-wrap: anywhere; }
.tjob.off h2 { color: var(--muted); margin: 0; }
.tjob .wo-line { margin: 0 0 .6rem; color: var(--muted); font-weight: 600; }
.tjob dl { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .45rem .75rem; margin: .4rem 0 0; }
.tjob dt { color: var(--muted); font-weight: 600; font-size: .9rem; padding-top: .1rem; }
.tjob dd { margin: 0; min-width: 0; word-wrap: break-word; overflow-wrap: anywhere; }
.tjob a.tel { display: inline-block; padding: .15rem 0; font-weight: 700; white-space: nowrap; }
.btn.big { display: flex; width: 100%; min-height: 50px; margin-top: 1rem; font-size: 1.1rem; }

/* ---------- the month view ---------- */
.mpage { page: month; }
.month { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .6fr));   /* (weekends are mostly empty) */
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.month .dow { background: #eceff3; font-weight: 600; font-size: .85rem; text-align: center; padding: .4rem; border-bottom: 1px solid var(--line); }
.month .mcell { min-height: 7.5rem; padding: .3rem .4rem .4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: .8rem; min-width: 0; }
.month .mcell:nth-child(7n) { border-right: 0; }
.month .mcell.out { background: #f7f8fa; color: var(--muted); }
.month .mcell.today { background: var(--today); }
.mday { display: inline-block; margin-bottom: .15rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.mday:hover { color: var(--accent); text-decoration: underline; }
.mdow { display: none; }
.mjobs { list-style: none; margin: 0; padding: 0; }
.mjobs li { line-height: 1.25; margin-bottom: .2rem; word-wrap: break-word; overflow-wrap: anywhere; }
.mjobs b { font-weight: 600; text-transform: uppercase; }
.mjobs a { text-decoration: none; }
.mjobs .who { color: var(--muted); }
.mjobs li.off b { color: var(--muted); }
.mcell[data-day] { cursor: default; user-select: none; }
.mjobs [draggable="true"] { cursor: grab; border-radius: 3px; }
.mjobs li[draggable="true"]:hover { background: rgba(29, 95, 191, .08); }
.mjobs .who [draggable="true"]:hover { background: rgba(29, 95, 191, .16); color: var(--ink); }
.mjobs .dragging { opacity: .4; }
.month .mcell.drop-here { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------- the week on a phone: day by day instead of the grid (pages._week_list; shown under "phones" below) ---------- */
.wlist, details.wall, .phone-only, .btn.pf-more { display: none; }
.wday { display: flex; gap: .75rem; padding: .55rem .7rem; border-bottom: 1px solid var(--line); font-size: .92rem; }
.wday:last-child { border-bottom: 0; }
.wday.today { background: var(--today); }
.wday.picked { box-shadow: inset 3px 0 0 var(--accent); }
.wd { flex: none; width: 4.6rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.wd b { color: var(--ink); }
.wday .mjobs { flex: 1; min-width: 0; }
.wday .mjobs li { margin-bottom: .3rem; }
.wday .who a { display: inline-block; padding: .1rem 0; }       /* (a little taller: easier to hit with a thumb) */
.wday .none { color: var(--muted); }
details.wall > summary { padding: .7rem .2rem; font-weight: 600; cursor: pointer; }      /* (its own arrow kept: no display set) */
/* ---------- lists (work orders, people) ---------- */
.filters { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(110px, 1fr)) auto; gap: 0 .6rem; align-items: end;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem .1rem; margin-bottom: 1rem; }
.fbtns { display: flex; gap: .3rem; margin-bottom: .75rem; }
.tablewrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; }
table.list { width: 100%; border-collapse: collapse; }
.list th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: #f7f8fa;
  border-bottom: 1px solid var(--line); padding: .5rem .7rem; }
.list td { border-bottom: 1px solid var(--line); padding: .55rem .7rem; vertical-align: top; }
.list tr:last-child td { border-bottom: 0; }
.list .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list tr.inactive td { color: var(--muted); }
.pager { display: flex; gap: .5rem; justify-content: center; }
.tag { display: inline-block; font-size: .78rem; font-weight: 700; padding: .1rem .5rem; border-radius: 99px; white-space: nowrap; vertical-align: middle; }
.tag.done { background: var(--ok-bg); color: var(--ok-ink); }
.tag.open { background: #fff4d6; color: #7a5a00; }
.wo-no { font-variant-numeric: tabular-nums; }
ul.plain { margin: 0 0 .75rem; padding-left: 1.1rem; }

/* ---------- under the work order ---------- */
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; border-top: 1px solid var(--line); padding-top: .75rem; }
.inline-form label { margin: 0; }
.danger-zone { text-align: right; margin-top: 1.5rem; }

/* ---------- touch screens (phones and iPads): buttons big enough for a finger ---------- */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.small { min-height: 40px; }
  .crew a { min-height: 40px; }
}

/* ---------- tablets ---------- */
@media (max-width: 1000px) {
  .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }       /* (search on its own row, then the four filters) */
  .filters .grow { grid-column: 1 / -1; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  main { padding: 1rem .75rem 3rem; }
  header.top { padding: .4rem .6rem; }
  nav.main { order: 3; flex-basis: 100%; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters input, .filters select { min-width: 0; }       /* (date boxes shrink to fit the smallest phones) */
  .filters .grow { grid-column: 1 / -1; }
  .cell-line { grid-template-columns: 1fr 7rem; }      /* (the WO # goes under the job) */
  .myweek > ul { grid-template-columns: 1fr; }
  .myweek > ul > li { display: flex; gap: .75rem; min-height: 0; align-items: baseline; }
  .myweek .d { width: 4.5rem; flex: none; margin: 0; }
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { border-bottom: 1px solid var(--line); padding: .45rem .2rem; }
  table.stack td { border: 0; padding: .12rem .6rem; text-align: left; }
  table.stack td::before { content: attr(data-l); display: inline-block; min-width: 6.5rem; color: var(--muted); font-size: .8rem; font-weight: 600; }
  table.stack td.num { text-align: left; }
  .pagehead .tools { width: 100%; }
  .vswitch, .daynav { flex: 1 1 100%; }          /* (big, easy buttons for thumbs: Day | Week | Month, then Prev | Today | Next) */
  .vswitch .btn, .daynav .btn { flex: 1; min-height: 44px; }
  .tjob dl { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .tjob dd { margin-bottom: .45rem; }
}
@media screen and (max-width: 760px) {     /* (screen only: a printed page is this narrow too, and paper gets the calendar) */
  .wide-only { display: none !important; }      /* (the schedule's Print buttons, the "Schedule" heading the menu already shows, drag tips) */
  .phone-only { display: block; }
  .gridwrap { display: none; }                  /* (the week's grid: seven days don't fit a phone; the day-by-day list does) */
  .wlist { display: block; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
  details.wall { display: block; }
  /* work orders: a row of three lines each (number, date and status; the customer and type; the job and total) */
  table.olist tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .1rem .5rem; align-items: baseline; padding: .6rem .4rem; }
  table.olist td { padding: 0 .3rem; }
  table.olist td::before { content: none; }
  table.olist td:nth-child(1) { grid-area: 1 / 1; font-size: 1.05rem; }                                   /* (No.) */
  table.olist td:nth-child(2) { grid-area: 1 / 2; color: var(--muted); font-size: .88rem; }                /* (date) */
  table.olist td:nth-child(6) { grid-area: 1 / 3; text-align: right; }                                    /* (status) */
  table.olist td:nth-child(3) { grid-area: 2 / 1 / 3 / 3; font-weight: 600; }                              /* (customer) */
  table.olist td:nth-child(5) { grid-area: 2 / 3; color: var(--muted); font-size: .85rem; text-align: right; }   /* (type) */
  table.olist td:nth-child(4) { grid-area: 3 / 1 / 4 / 3; color: var(--muted); font-size: .9rem; }         /* (job) */
  table.olist td:nth-child(7) { grid-area: 3 / 3; text-align: right; font-weight: 600; }                   /* (total) */
  /* people: the name, then one short line under it (login and role, and "Not on schedule" or "Inactive" only when so), Remove at its end */
  table.plist tr { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; padding: .5rem .4rem; }
  table.plist td { width: auto; flex: none; padding: 0 .3rem; font-size: .88rem; color: var(--muted); white-space: nowrap; }
  table.plist td::before { content: none; }
  table.plist td:nth-child(1) { flex-basis: 100%; font-size: 1rem; color: var(--ink); white-space: normal; }   /* (name) */
  table.plist td:nth-child(4), table.plist td:nth-child(5), table.plist td:nth-child(6) { display: none; }   /* (schedule, status, order) */
  table.plist td.off-sched { display: block; font-size: 0; }                     /* (its "No" swapped for words that say what it means) */
  table.plist td.off-sched::before { content: "Not on schedule"; display: inline; min-width: 0; font-size: .88rem; font-weight: 400; }
  table.plist tr.inactive td:nth-child(5) { display: block; }
  table.plist td.act { margin-left: auto; padding: 0; }
  .slot { grid-template-columns: 4rem minmax(0, 1fr); }
  .slot .djob { flex: 1 1 100%; }
  .month { display: block; }
  .month .dow, .month .mcell.out, .month .mcell.free:not(.today) { display: none; }
  .month .mcell { min-height: 0; border-right: 0; display: flex; gap: .75rem; padding: .5rem .6rem; }
  .mday { flex: none; width: 4.2rem; }
  .mdow { display: inline; font-weight: 500; color: var(--muted); }
}

/* ---------- printing the schedule: exactly like the office's paper sheet ----------
   Measured off the printed sheet: 8 columns of 93px (7.75in), Calibri, a 3px outer border and thin inside lines,
   rows of 20/19/19px for day names, dates and the gray "Employees" band, 45px employee rows, the three header rows
   repeated at the bottom, and "SUBJECT TO CHANGE DAILY" in bold above. Letter portrait, one page. */
.sp-sheet { display: none; }
@media print {
  @page { size: letter portrait; margin: .4in; }
  @page schedule { size: letter portrait; margin: .25in .375in; }
  @page month { size: letter landscape; margin: .3in .4in; }
  .sub.mtitle { display: block !important; text-align: center; font-size: 14pt; font-weight: 700; color: #000; margin: 0 0 .1in; }
  .month { border-color: #000; border-radius: 0; margin-right: 1px; }    /* (the margin keeps the right border off the page edge) */
  .month .dow { padding: 2pt; font-size: 9pt; }
  .month .mcell { min-height: 1.05in; font-size: 8pt; padding: 2pt 3pt; break-inside: avoid; }
  .mjobs li { line-height: 1.15; margin-bottom: 1pt; }
  .month.six .mcell { min-height: .9in; font-size: 7.5pt; }     /* (a six-week month still fits one page) */
  .month.six .mjobs li { line-height: 1.1; margin-bottom: 0; }
  .month .mcell, .month .dow { border-color: #999; }
  .mjobs a { color: #000; }
  /* the day view on paper: compact hour rows, jobs side by side, one page */
  .dtitle { margin: 0 0 6pt; font-size: 14pt; }
  .slots { border-color: #000; border-radius: 0; }
  .slot { min-height: 0; break-inside: avoid; }
  .slot-t { padding: 2pt 5pt; font-size: 9pt; color: #000; }
  .slot-jobs { padding: 2pt; gap: 3pt; }
  .slot .djob { padding: 2pt 6pt; flex: 0 1 2.3in; border-color: #999; }
  .slot .djob h2 { font-size: 9.5pt; margin: 0; }
  .djob p { font-size: 8pt; }
  .crew { margin-top: 1pt; gap: 2pt 4pt; }
  .crew a { min-height: 0; padding: 0 5pt; font-size: 8.5pt; border-color: #bbb; }
  .djobs.rest { margin-top: 6pt; grid-template-columns: 1fr 1fr; }
  .djobs.rest .djob { padding: 3pt 6pt; }
  .djob a { color: #000; }
  body { background: #fff; }
  header.top, .tools, .notice, .error, .hint, .no-print, .myweek, .stc, .linkbtn, .pagehead, .sub, .gridwrap { display: none !important; }
  main { padding: 0; max-width: none; }
  .card { border: 0; padding: 0; }
  .sp-sheet { display: block; page: schedule; width: 744px; margin: 0 auto; color: #000;
    font-family: Calibri, Carlito, Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.sp-title { text-align: center; font: 700 18px/18px Calibri, Carlito, Arial, sans-serif; margin-bottom: 2px; }
.sp-table { width: 738px; border-collapse: collapse; table-layout: fixed; border: 3px solid #000; }
.sp-table col { width: 92px; }
.sp-table col.n { width: 91px; }      /* (the name column is a touch narrower on the sheet) */
.sp-table td, .sp-table th { border: 1px solid #000; padding: 0 4px; overflow: hidden; font: 400 13.5px/15px Calibri, Carlito, Arial, sans-serif;
  white-space: nowrap; }
.sp-table tr.dn td { height: 19px; text-align: center; vertical-align: bottom; }
.sp-table tr.dt td { height: 18px; text-align: center; vertical-align: bottom; }
.sp-table tr.band td { height: 18px; background: #d9d9d9; }
.sp-table tr.band td.lbl { background: #fff; text-align: left; vertical-align: bottom; }
.sp-table tr.band td.lbl.c { text-align: center; }
.sp-table tr.emp > * { height: 44px; }    /* (+1px line = the sheet's 45px rows) */
.sp-table tr { break-inside: avoid; }
.sp-table tr.emp th { font-weight: 700; font-size: 13px; text-align: center; vertical-align: middle; text-transform: uppercase; }
.sp-table tr.emp td { text-align: left; vertical-align: bottom; text-transform: uppercase; padding-bottom: 3px; }
.sp-table tr.emp td.sm { font-size: 11px; line-height: 14px; padding-bottom: 1px; }
/* a job too long for its box wraps (never cut off on paper), its next line indented so it doesn't look like another job */
.sp-table tr.emp td > span { display: block; white-space: normal; overflow-wrap: anywhere; padding-left: .6em; text-indent: -.6em; }
.sp-table tr.emp th { white-space: normal; overflow-wrap: anywhere; }
.sp-sheet.dense tr.emp > * { height: 37px; }      /* (more people than the sheet's 19 rows: still one page) */
.sp-sheet.denser tr.emp > * { height: 30px; }
/* ---------- the work order: the paper form itself, to fill in, read and print ---------- */
body.print-page { background: #e9ebee; }
.pf-toolbar { display: flex; justify-content: space-between; max-width: 8.5in; margin: 1rem auto; padding: 0 .5rem; }
.pf { --r: 29px; --r1: 22px; --hd: 19px;    /* row, first row and header-bar heights, as on the pad */
  page: workorder;
  width: 8.5in; max-width: 100%; margin: 0 auto 1rem; background: #fff; padding: .45in .5in; color: #000;
  font: 9.5pt/1.3 Arial, Helvetica, sans-serif; box-shadow: 0 2px 10px rgba(0,0,0,.15);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf label { display: block; margin: 0; font-weight: normal; font-size: inherit; }
.pf-head { position: relative; display: grid; grid-template-columns: 1fr 3.6in; gap: .2in; margin-bottom: .28in; }
.pf-co { text-align: center; }
.pf-co h1 { font: 700 19pt/1.1 Georgia, "Times New Roman", serif; margin: 0; letter-spacing: .01em; text-transform: uppercase; }
.pf-co p { margin: .02in 0; font: 11pt/1.3 Georgia, "Times New Roman", serif; }
.pf-co .pf-tag { font-variant: small-caps; font-size: 11.5pt; }
.pf-co .pf-ph { font-weight: 700; font-size: 12.5pt; margin-top: .12in; }
.pf-co .pf-ph span { white-space: nowrap; }      /* (a number never splits over two lines) */
.pf-title { font: 800 26pt/1 Arial, sans-serif; color: #fff; -webkit-text-stroke: 1px #000; text-align: right; letter-spacing: .02em; }
.pf-no { font: 800 18pt/1.1 Arial, sans-serif; text-align: right; margin-bottom: .05in; }
.pf-grid { border: 2px solid #000; border-radius: 10px; overflow: hidden; margin-right: 3px; }   /* (kept inside the printable edge) */
.pf .pf-box { height: .31in; border-bottom: 1px solid #000; padding: 1px 4px 0; }    /* (row heights as on the pad) */
.pf-box > span { display: block; font-size: 6.5pt; letter-spacing: .02em; padding-left: 2px; }
.pf-2 { display: grid; grid-template-columns: 1fr 1fr; }
.pf-2 .pf-box:first-child { border-right: 1px solid #000; }
.pf-grid > :last-child .pf-box { border-bottom: 0; }
.pf-kinds { display: flex; justify-content: space-between; align-items: center; height: .32in; border-bottom: 1px solid #000; padding: 0 6px; }
.pf .pf-check { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 8.5pt; white-space: nowrap; }
.pf-edit .pf-check { cursor: pointer; }
.pf .pf-check input { -webkit-appearance: none; appearance: none; display: inline-block; flex: none; width: 10px; height: 10px; margin: 0; padding: 0;
  border: 1px solid #000; border-radius: 0; background: #fff; cursor: pointer; }
.pf .pf-check input:checked { background: linear-gradient(45deg, transparent 40%, #000 40% 60%, transparent 60%),
  linear-gradient(-45deg, transparent 40%, #000 40% 60%, transparent 60%); }

/* the typing boxes: invisible on paper, a faint tint on screen so it's clear where to type */
.pf .pf-in, .pf .pf-val { display: block; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 3px; border: 0; border-radius: 0;
  background: transparent; color: #000; font: 9pt/1.2 Arial, Helvetica, sans-serif; }
.pf .pf-box .pf-in, .pf .pf-box .pf-val { height: .18in; }
.pf-edit .pf-in, .pf-edit textarea.pf-text { background-color: #eef4fc; }
.pf .pf-in:focus, .pf textarea.pf-text:focus { outline: 2px solid var(--accent); outline-offset: -1px; background-color: #fffbe6; }
.pf .pf-in[aria-invalid] { background-color: var(--bad-bg); outline: 1px solid var(--bad-ink); outline-offset: -1px; }
.pf .pf-in::placeholder { color: #9aa4ae; }
.pf .c, .pf .c .pf-in { text-align: center; }
.pf .r, .pf .r .pf-in, .pf .pf-in.r { text-align: right; font-variant-numeric: tabular-nums; }

.pf-left { display: flex; flex-direction: column; }
.pf-to { display: flex; gap: .12in; margin-top: auto; font-size: 10pt; }    /* (beside the box, at its bottom, as on the pad) */
.pf-to > span { padding-top: .1in; }
.pf-tolines { flex: 1; }
.pf-tolines .pf-c { display: block; height: .35in; border-bottom: 1px solid #000; padding-top: .08in; }
.pf-tolines .pf-in, .pf-tolines .pf-c { font-size: 10pt; line-height: .26in; }
.pf-tolines .pf-in { height: .26in; }

/* the body: the pad's grid in whole screen pixels (96 to the inch), so every line is crisp and both halves line up.
   Measured off the printed pad: 29px rows after a 19px header bar and a 22px first row; heavy lines between the
   main columns, thin ones elsewhere, and a thin dollars|cents line inside the money boxes. */
.pf-body { display: grid; grid-template-columns: 446px 274px; border-bottom: 2px solid #000; }
.pf-row { display: grid; height: var(--r); border-bottom: 1px solid #000; overflow: hidden; }
.pf-row.first { height: var(--r1); }
.pf-row.short { height: var(--hd); border-bottom: 0; }
.pf-row > * { min-width: 0; height: 100%; display: flex; align-items: center; font-size: 8.5pt; white-space: nowrap; overflow: hidden; }
.pf-row > * + * { border-left: 1px solid #000; }
.pf-row .pf-c { padding: 0; }
.pf-row > .pf-c:not(:has(input)) { padding: 0 4px; }
.pf:not(.pf-edit) .pf-row > .pf-c { padding: 0 4px; }      /* (the same, for Safari before 15.4, which has no :has) */
.pf:not(.pf-edit) .pf-row > .pf-c.r { padding: 0 2px; }      /* (numbers sit close to the line, as written on the pad: 95.00 fits the rate box) */
.pf-row .pf-c.c { justify-content: center; }
.pf-row .pf-c.r { justify-content: flex-end; }
.pf-row.mat { grid-template-columns: 67px 244px 62px 73px; }
.pf-row.mat > * + * { border-left-width: 2px; }
.pf-row.lab { grid-template-columns: 137px 38px 36px 63px; }
.pf-row.tot { grid-template-columns: 211px 63px; }
.pf-row.tot .pf-lbl { justify-content: flex-end; padding: 0 6px; font-size: 8pt; }
.pf-hd { background: #bdbdbd; font-weight: 700; }
.pf-hd > * { justify-content: center; font-size: 8pt; }
.pf-bar { display: flex; align-items: center; justify-content: center; background: #bdbdbd; font-weight: 700; font-size: 8.5pt; }
.pf-complete { display: flex; align-items: center; gap: .2in; padding: 0 6px; font-weight: 700; font-size: 8.5pt; }
.pf-complete > * + * { border-left: 0; }
.pf-mat, .pf-side { min-width: 0; }
.pf-side { border-left: 2px solid #000; }

/* money boxes: the thin cents line, and the amount shown as dollars | cents like on the pad */
.pf-c.ct { position: relative; }
.pf-c.ct-p { --ct: 22px; } .pf-c.ct-a { --ct: 23px; } .pf-c.ct-l { --ct: 21px; }
.pf-c.ct::after { content: ""; position: absolute; top: 0; bottom: 0; right: var(--ct); border-left: 1px solid #000; pointer-events: none; }
.pf-c.ct .sp { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--ct); align-items: center; pointer-events: none;
  font: 8.5pt Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; }
.pf-c.ct .sp b { font-weight: inherit; text-align: right; padding-right: 3px; }
.pf-c.ct .sp i { font-style: normal; text-align: center; }
.pf-c.ct .sp b.m2 { font-size: 7pt; } .pf-c.ct .sp b.m3 { font-size: 6pt; } .pf-c.ct .sp b.m4 { font-size: 5pt; }   /* (big amounts: app.js) */
.pf-c.ct.split .pf-in:not(:focus):not([aria-invalid]) { color: transparent; }      /* (app.js shows the split value instead) */
.pf-c.ct.split .pf-in:focus ~ .sp, .pf-c.ct.split .pf-in[aria-invalid] ~ .sp { visibility: hidden; }

/* writing too long for its box (app.js measures): smaller and on two lines, or smaller still on three; never cut off */
.pf .pf-c.fit2, .pf .pf-c.fit3, .pf .pf-c.fit4, .pf .pf-c.fit5, .pf .pf-val.fit2, .pf .pf-val.fit3, .pf .pf-val.fit4,
.pf .pf-val.fit5 { white-space: normal; overflow-wrap: anywhere; }
.pf .pf-c.fit2, .pf .pf-val.fit2 { font-size: 7pt; line-height: 1.1; }
.pf .pf-c.fit3, .pf .pf-val.fit3 { font-size: 5.5pt; line-height: 1.05; }
.pf .pf-c.fit4, .pf .pf-c.fit5, .pf .pf-val.fit4, .pf .pf-val.fit5 { font-size: 4.5pt; line-height: .95; }   /* (three lines fit a box's value) */
.pf .pf-c.measuring, .pf .pf-val.measuring, .pf .sp b.measuring { letter-spacing: .04em; }  /* (while app.js measures: a little
   wider than it'll be, as print sets text a touch wider than the screen; what only just fits gets the smaller size) */
.pf .r.fit2, .pf .r.fit3, .pf .r.fit4, .pf .r.fit5 { white-space: nowrap; padding-left: 1px; padding-right: 1px; }   /* (a number only gets smaller, never splits) */
.pf .fit5, .pf .grow, .pf .grow > * { height: auto !important; }      /* (more than four fine-print lines: the box grows) */
.pf .pf-row.grow { min-height: var(--r); }

/* ruled writing lines: each row's line at its bottom, text sitting on the line */
.pf .pf-text { display: block; width: 100%; margin: 0; padding: 0 6px; border: 0; border-radius: 0; resize: none; color: #000; overflow: auto;
  font: 8.5pt/var(--r) Arial, Helvetica, sans-serif; background-attachment: local;
  background-image: repeating-linear-gradient(transparent 0 calc(var(--r) - 1px), #000 calc(var(--r) - 1px) var(--r)); }
.pf .pf-text.l4 { height: calc(var(--r1) + var(--r) * 3); background-position: 0 calc(var(--r1) - var(--r)); }
.pf .pf-text.l7 { height: calc(var(--r) * 7); padding-top: calc(var(--r) - var(--r1)); }
.pf div.pf-text.l4 { height: auto; min-height: calc(var(--r1) + var(--r) * 3); }
.pf div.pf-text.l7 { height: auto; min-height: calc(var(--r) * 7); }

/* the bottom: a blank row, then TAX and TOTAL beside the Thank You box; the two signature lines level with them */
.pf-foot { display: grid; grid-template-columns: 446px 274px; }
.pf-sign { padding-right: 20px; }
.pf .pf-line { display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid #000; font-size: 10pt; }
.pf .pf-line.l1 { height: 32px; }
.pf .pf-line.l2 { height: 30px; }
.pf-line > span:first-child { white-space: nowrap; padding-bottom: 2px; }
.pf-line .pf-c { flex: 1; height: 22px; display: flex; align-items: flex-end; }
.pf-line .pf-in, .pf-line .pf-c { font-size: 10pt; }
.pf-ack { font-size: 7pt; text-align: center; margin: 3px 0 0; }
.pf-foot-r { border-left: 2px solid #000; }
.pf-foot-r > .pf-row.tot { height: 32px; }
.pf-thanks { display: grid; grid-template-columns: 115px 159px; grid-template-rows: 30px 26px; border-bottom: 2px solid #000; }
.pf-ty { grid-row: span 2; display: flex; align-items: center; justify-content: center; border-right: 1px solid #000; padding: 2px; }
.pf-ty svg { width: 100%; height: 100%; }
.pf-thanks .pf-row.tot { grid-template-columns: 96px 63px; }
.pf-thanks .pf-row:nth-child(2) { height: 30px; }
.pf-thanks .pf-row:last-child { height: 26px; border-bottom: 0; font-weight: 700; }
.pf-thanks .pf-row:last-child .pf-in, .pf-thanks .pf-row:last-child .sp { font-weight: 700; }
/* the faded plug and ISNetworld seal printed on the pad (drawn over the form, very light, clicks pass through) */
.pf-body { position: relative; }
.pf-mark { position: absolute; pointer-events: none; z-index: 2; }
.pf-plug { left: .5in; top: .03in; width: 2.78in; height: 2.73in; opacity: .085; }   /* (same size and place as on the pad) */
.pf-isn { left: .453in; top: 1.517in; width: 3.603in; height: 3.603in; }   /* (same size and place as on the pad) */
.wo-under { max-width: 8.5in; margin-left: auto; margin-right: auto; }
@media print {
  body.print-page { background: #fff; }
  .pf { box-shadow: none; margin: 0; width: auto; max-width: none; padding: 0; }
  .pf-row, .pf-line, .pf-thanks, .pf-foot-r { break-inside: avoid; }    /* (a long order runs onto more pages: never splitting a line) */
  @page workorder { size: letter portrait; margin: .3in .5in; }
  .pf .pf-in, .pf textarea.pf-text { background-color: transparent !important; outline: 0 !important; }
  .pf .pf-in::placeholder, .pf .pf-text::placeholder { color: transparent; }
}
/* phones and small tablets: the same form, stacked so it fits */
@media screen and (max-width: 8.6in) {
  .pf { --r: 2.1rem; padding: .2in .15in; }
  .pf-head, .pf-body, .pf-foot { grid-template-columns: 1fr; }
  .pf-mark { display: none; }    /* (the stacked phone layout has no room for them; prints still have them) */
  .pf-title, .pf-no { text-align: left; }
  .pf-co h1 { font-size: 15pt; }
  .pf-title { font-size: 22pt; }
  .pf-side { border-left: 0; border-top: 1.5px solid #000; }
  .pf-tolines { flex: 1; }
  .pf .pf-in, .pf .pf-text { font-size: 16px; }    /* (16px stops phones zooming in on every box) */
  .pf .pf-box { height: auto; }
  .pf .pf-box .pf-in { height: 1.6rem; }
  .pf { --r1: 2.1rem; --hd: 1.6rem; }
  .pf-row.mat { grid-template-columns: 3rem 1fr 4.5rem 4.5rem; }
  .pf-row.lab { grid-template-columns: 1fr 3rem 4rem 4.5rem; }
  .pf-row.tot, .pf-thanks .pf-row.tot { grid-template-columns: 1fr 4.5rem; }
  .pf-body, .pf-foot { grid-template-columns: 1fr; }
  .pf-foot-r { border-left: 0; }
  .pf-thanks { grid-template-columns: 1fr; grid-template-rows: auto; }
  .pf-thanks .pf-row:nth-child(2), .pf-thanks .pf-row:last-child { height: var(--r); }
  .pf-ty { grid-row: auto; border-right: 0; border-bottom: 1px solid #000; height: 3rem; }
  .pf .pf-row.spare { display: none; }     /* (only the lines written on, and a blank one or two: pages.paper; "Add a line" shows more) */
  .btn.pf-more { display: inline-flex; margin: .45rem .4rem .6rem; }
}
/* phones: each material or labor line on two rows, what it is across the whole width (nothing cut off), its numbers under it */
@media screen and (max-width: 500px) {
  .pf-row.mat, .pf-row.lab { grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; }
  .pf-row.mat > *, .pf-row.lab > * { height: var(--r); }
  .pf-row.first.mat > *, .pf-row.first.lab > * { height: var(--r1); }
  .pf-row.pf-hd > * { height: var(--hd); }
  .pf-row.mat > :nth-child(2), .pf-row.lab > :nth-child(1) { grid-column: 1 / -1; grid-row: 1; border-left: 0; border-bottom: 1px solid #000; }
  .pf-row.lab > :nth-child(2) { border-left: 0; }
}
/* touch screens: 16px typing boxes whatever the layout (an iPhone held sideways gets the paper layout, and zooms in on
   anything smaller), and tick boxes big enough for a finger */
@media screen and (pointer: coarse) {
  .pf .pf-in, .pf .pf-text { font-size: 16px; }
  .pf-edit .pf-check input { width: 20px; height: 20px; }
}
/* very narrow (a small phone with big text, or zoomed in): the boxes at the top one under another, the tick boxes wrapping */
@media screen and (max-width: 300px) {
  .pf-head, .pf-body, .pf-foot, .pf-2 { grid-template-columns: minmax(0, 1fr); }    /* (typing boxes may shrink below their usual width) */
  .pf-2 .pf-box:first-child { border-right: 0; border-bottom: 1px solid #000; }
  .pf-kinds { flex-wrap: wrap; height: auto; gap: 4px 10px; padding: 4px 6px; }
  .pf .pf-check, .pf-co .pf-ph span { white-space: normal; }
  .pf .pf-line.l1, .pf .pf-line.l2 { flex-wrap: wrap; height: auto; min-height: 30px; }
  .pf-line .pf-c { min-width: 0; flex-basis: 100%; }
  .myweek > ul { grid-template-columns: minmax(0, 1fr); }
  .myweek > ul > li { display: block; }      /* (the day above its jobs, not beside them) */
  .myweek .d { width: auto; margin-bottom: .15rem; }
}
@media screen and (max-width: 340px) {
  main { padding-left: .5rem; padding-right: .5rem; }
  .btn { padding-left: .5rem; padding-right: .5rem; white-space: normal; text-align: center; }
  .vswitch .btn, .daynav .btn { padding-left: .2rem; padding-right: .2rem; font-size: .9rem; }
}