/* ------------------------------------------------------------------ *
 * Morgan Construction house style.
 *
 * Taken off mcel.ca: their theme red is #DF1A25, the logo red is #E71D21,
 * hover red #C10007, and the secondary is a teal (#16A6A1 / #0F7A77).
 * Neutrals are true greys, not the blue-slate this used to run on.
 *
 * The colour jobs are deliberately split so nothing has to mean two
 * things at once:
 *   accent  = Morgan red. Brand chrome and the primary action, nothing else.
 *   danger  = red as well, but only where something gets destroyed.
 *   due     = amber. Overdue and needs-attention — hi-vis, and it can't be
 *             confused with the brand red sitting next to it.
 *   good    = Morgan teal. Done, synced, complete.
 * ------------------------------------------------------------------ */
:root{
    --bg:#F1F1F2; --surface:#FFFFFF; --surface-2:#F7F7F8; --surface-3:#EAEAEC;
    --ink:#171717; --ink-2:#525252; --ink-3:#8A8A8E;
    --line:#E2E2E4; --line-2:#CDCDD1;
    --accent:#C10007; --accent-fill:#DF1A25; --accent-soft:#FDECED;
    --on-accent:#FFFFFF;
    --mark-tile:#16181A; --mark-wedge:#FFFFFF; --mark-red:#E71D21;
    --danger:#C10007; --danger-soft:#FDECED;
    --due:#8A5A04; --due-fill:#F2A81C; --due-soft:#FDF1D8;
    --good:#0F7A77; --good-fill:#16A6A1; --good-soft:#E2F3F2;
    --shadow:0 1px 2px rgba(23,23,23,.05), 0 4px 14px rgba(23,23,23,.06);
    /* Their site runs Milliard, a geometric sans that isn't licensed to us.
       Futura is the closest thing already on every Mac and iPhone; Android
       falls through to its own system sans. */
    --font-display:"Futura","Avenir Next","Century Gothic",system-ui,sans-serif;
    --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
    --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#101113; --surface:#191A1D; --surface-2:#1F2124; --surface-3:#2A2C30;
      --ink:#F4F4F5; --ink-2:#B4B5BA; --ink-3:#85868B;
      --line:#2A2C30; --line-2:#3A3D42;
      --accent:#FF6B6B; --accent-fill:#E71D21; --accent-soft:#2E1416;
      --on-accent:#FFFFFF;
      --mark-tile:#F4F4F5; --mark-wedge:#16181A; --mark-red:#E71D21;
      --danger:#FF6B6B; --danger-soft:#2E1416;
      --due:#F2A81C; --due-fill:#F2A81C; --due-soft:#2E2513;
      --good:#2DBFB9; --good-fill:#16A6A1; --good-soft:#0F2A2A;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
    }
  }
  :root[data-theme="dark"]{
    --bg:#101113; --surface:#191A1D; --surface-2:#1F2124; --surface-3:#2A2C30;
    --ink:#F4F4F5; --ink-2:#B4B5BA; --ink-3:#85868B;
    --line:#2A2C30; --line-2:#3A3D42;
    --accent:#FF6B6B; --accent-fill:#E71D21; --accent-soft:#2E1416;
    --on-accent:#FFFFFF;
    --mark-tile:#F4F4F5; --mark-wedge:#16181A; --mark-red:#E71D21;
    --danger:#FF6B6B; --danger-soft:#2E1416;
    --due:#F2A81C; --due-fill:#F2A81C; --due-soft:#2E2513;
    --good:#2DBFB9; --good-fill:#16A6A1; --good-soft:#0F2A2A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
  }

  *{box-sizing:border-box;}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--font-body);font-size:16px;line-height:1.45;
    -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:640px;margin:0 auto;padding:0 14px 80px;}

  /* masthead */
  .mast{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
  .mast-in{max-width:640px;margin:0 auto;padding:11px 14px 10px;display:flex;flex-direction:column;gap:9px;}
  .mast-top{display:flex;align-items:center;gap:12px;}
  .brand{flex:1;min-width:0;}
  /* The mark takes width off the masthead, so the wordmark has to give a
     little or it wraps to two lines on a 375px phone. */
  .brand h1{
    font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.08;
    letter-spacing:.01em;text-transform:uppercase;margin:0;
  }
  @media (max-width:359px){ .brand h1{font-size:18px;} }
  /* Scoped to .loc on purpose: this used to be a bare `.brand span` and was
     silently forcing display:block on the sync pill nested inside .who. */
  .brand > span.loc{
    font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-3);display:block;margin-top:4px;
  }
  .datebox{text-align:right;flex-shrink:0;}
  .datebox .dow{font-family:var(--font-display);text-transform:uppercase;font-size:19px;font-weight:700;line-height:1;letter-spacing:.03em;}
  .datebox .dnum{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);display:block;margin-top:3px;font-variant-numeric:tabular-nums;}
  .meter{display:flex;align-items:center;gap:10px;}
  .meter-track{flex:1;height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden;}
  .meter-fill{height:100%;width:0;border-radius:99px;background:var(--accent-fill);transition:width .3s ease;}
  .meter-fill.done{background:var(--good-fill);}
  .meter-num{font-family:var(--font-mono);font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-2);flex-shrink:0;}
  .toolrow{display:flex;gap:6px;flex-wrap:wrap;}
  .tbtn{
    font-family:var(--font-body);font-size:12px;font-weight:600;
    padding:7px 11px;border-radius:8px;border:1px solid var(--line-2);
    background:var(--surface-2);color:var(--ink-2);cursor:pointer;line-height:1;
    transition:background .15s,color .15s,border-color .15s;
  }
  .tbtn:hover{background:var(--surface-3);color:var(--ink);}
  .tbtn:focus-visible{outline:3px solid var(--accent-fill);outline-offset:2px;}

  /* section heads */
  .shead{
    display:flex;align-items:baseline;gap:9px;
    margin:22px 0 8px;padding:0 2px;
  }
  .shead h2{
    font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;
    font-size:16px;font-weight:700;margin:0;line-height:1;
  }
  .shead .cnt{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-left:auto;}

  .card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;}
  .card + .card{margin-top:10px;}

  /* scope questions */
  .q{display:flex;align-items:center;gap:12px;padding:12px 14px;}
  .q + .q{border-top:1px solid var(--line);}
  .q .qt{flex:1;font-size:15px;line-height:1.3;}
  .seg{display:flex;flex-shrink:0;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;}
  .seg button{
    font-family:var(--font-body);font-size:13px;font-weight:600;
    padding:8px 15px;border:0;background:var(--surface-2);color:var(--ink-3);
    cursor:pointer;line-height:1.1;min-width:52px;
  }
  .seg button + button{border-left:1px solid var(--line-2);}
  .seg button:focus-visible{outline:3px solid var(--accent-fill);outline-offset:-3px;}
  /* Keyed on aria-pressed alone, NOT on the value. These controls carry
     "yes"/"no" on the checklist, "Y"/"N" on the report and "day"/"night" for
     the shift; when the rule named the values, the report's buttons set their
     answer and then looked completely dead. */
  .seg button[aria-pressed="true"]{background:var(--accent-fill);color:var(--on-accent);}
  .seg button[aria-pressed="true"][data-v="no"],
  .seg button[aria-pressed="true"][data-v="N"]{background:var(--surface-3);color:var(--ink);}

  /* The shift sets the clock every other time on the list is measured
     against, so it leads the scope card and gets its own weight. */
  .q.shiftq{background:var(--surface-2);}
  .q.shiftq .qt{font-weight:600;}
  .shiftnote{
    margin:0;padding:9px 14px 11px;background:var(--surface-2);
    border-bottom:1px solid var(--line);
    font-size:12.5px;line-height:1.4;color:var(--ink-2);
  }
  .shiftnote b{color:var(--ink);}

  /* A task the app ticks off itself: the box still reads as a checkbox so the
     row scans with the rest, but it can't be tapped. */
  .item.locked{cursor:default;}
  .item.locked input{pointer-events:none;}
  .item.locked .box{opacity:.55;}
  .item.locked input:checked ~ .box{opacity:1;}

  .chipq{padding:12px 14px;border-top:1px solid var(--line);}
  .chipq .qt{font-size:15px;display:block;margin-bottom:9px;}
  .chips{display:flex;flex-wrap:wrap;gap:6px;}
  .chip{
    font-family:var(--font-body);font-size:13px;font-weight:500;
    padding:7px 12px;border-radius:99px;border:1px solid var(--line-2);
    background:var(--surface-2);color:var(--ink-2);cursor:pointer;line-height:1.1;
  }
  .chip:focus-visible{outline:3px solid var(--accent-fill);outline-offset:2px;}
  .chip[aria-pressed="true"]{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);font-weight:600;}
  .chip.wear::before{
    content:"";display:inline-block;width:6px;height:6px;border-radius:99px;
    background:var(--due-fill);margin-right:6px;vertical-align:1px;
  }
  .chip.wear[aria-pressed="true"]::before{background:var(--on-accent);}
  .legend{
    display:flex;align-items:center;gap:7px;margin:10px 0 0;
    font-size:12px;color:var(--ink-3);line-height:1.3;
  }
  .legend i{width:6px;height:6px;border-radius:99px;background:var(--due-fill);flex-shrink:0;}

  /* scope summary bar */
  .scopebar{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:12px 14px;background:none;border:0;cursor:pointer;
    font-family:var(--font-body);text-align:left;color:inherit;
  }
  .scopebar:hover{background:var(--surface-2);}
  .scopebar .sum{flex:1;min-width:0;font-size:14px;color:var(--ink-2);line-height:1.35;}
  .scopebar .sum b{color:var(--ink);font-weight:600;}
  .scopebar .edit{
    font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--accent);flex-shrink:0;
  }
  .scopebody{display:none;}
  .card.scopeopen .scopebody{display:block;border-top:1px solid var(--line);}
  .card.scopeopen .scopebar{display:none;}

  /* An instruction, not an alarm — a red wash here read as "something is
     wrong". Brand red stays, but as a rule down the side. */
  .prompt{
    padding:13px 14px;background:var(--surface-2);
    border-left:3px solid var(--accent-fill);
    font-size:13.5px;color:var(--ink-2);line-height:1.4;
  }
  .prompt b{color:var(--ink);}

  /* task items */
  .item{
    display:flex;gap:11px;align-items:center;
    padding:12px 14px 12px 12px;border-left:4px solid transparent;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .item + .item{border-top:1px solid var(--line);}
  .item:hover{background:var(--surface-2);}
  .item.duetoday{border-left-color:var(--due-fill);}
  .item input{position:absolute;opacity:0;width:0;height:0;}
  .box{
    flex-shrink:0;width:24px;height:24px;
    border:2px solid var(--line-2);border-radius:6px;background:var(--surface);
    display:grid;place-items:center;transition:background .15s,border-color .15s;
  }
  .box svg{width:14px;height:14px;stroke:#fff;stroke-width:3.2;fill:none;
    stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);
    transition:opacity .15s,transform .15s;}
  .item input:checked ~ .box{background:var(--good-fill);border-color:var(--good-fill);}
  .item input:checked ~ .box svg{opacity:1;transform:scale(1);}
  .item input:focus-visible ~ .box{outline:3px solid var(--accent-fill);outline-offset:2px;}
  .txt{flex:1;min-width:0;font-size:15px;line-height:1.35;}
  .item input:checked ~ .txt{color:var(--ink-3);}
  /* No strikethrough on a finished task. The ticked box already says it, and
     a list of struck-out lines is hard to read at a glance on a phone. The
     text only fades. */
  .item input:checked ~ .txt .lbl{color:var(--ink-3);}

  /* ? hint */
  .help{
    display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;padding:0;margin-left:7px;flex-shrink:0;
    border:1px solid var(--line-2);border-radius:99px;background:var(--surface-2);
    color:var(--ink-3);font-family:var(--font-mono);font-size:10px;font-weight:700;
    line-height:1;cursor:pointer;vertical-align:-1px;
  }
  .help:hover,.help[aria-expanded="true"]{
    background:var(--accent-soft);border-color:var(--accent);color:var(--accent);
  }
  .help:focus-visible{outline:3px solid var(--accent-fill);outline-offset:2px;}
  .hint{
    display:none;margin-top:8px;padding:10px 12px;
    background:var(--surface-2);border-left:3px solid var(--accent-fill);
    border-radius:0 8px 8px 0;
    font-size:13px;line-height:1.5;color:var(--ink-2);
    white-space:pre-line;
  }
  .item.helpopen .hint{display:block;}
  /* an open hint makes the row tall — keep the box beside the first line */
  .item.helpopen{align-items:flex-start;}
  .item.helpopen .box{margin-top:1px;}
  /* On a mouse, hovering the ? opens the hint and it stays open until the
     pointer leaves the ROW — not the instant it slips off the little button,
     which made it impossible to read. The class is put on by app.js; the old
     rule was `.help:hover ~ .hint`, which closed far too eagerly. */
  @media (hover:hover){
    .item.hoveropen .hint,
    .arow.hoveropen .hint{display:block;}
  }
  .tag{
    font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
    padding:3px 6px;border-radius:4px;margin-left:7px;white-space:nowrap;vertical-align:2px;
    background:var(--surface-3);color:var(--ink-3);
  }
  .tag.due{background:var(--due-soft);color:var(--due);}
  .tag.ok{background:var(--good-soft);color:var(--good);}
  .item input:checked ~ .txt .tag{opacity:.5;}

  /* wear watch rows */
  .wrow{display:flex;align-items:stretch;}
  .wrow + .wrow{border-top:1px solid var(--line);}
  .wrow .item{flex:1;min-width:0;border-top:0;}
  .wrow .item + .item{border-top:0;}
  .watchitem .wmain{display:block;font-size:15px;line-height:1.25;font-weight:600;}
  .watchitem .wmeta{
    display:block;font-family:var(--font-mono);font-size:10.5px;
    letter-spacing:.03em;color:var(--ink-3);margin-top:3px;
  }
  .wrow.wdone .wmain{color:var(--ink-3);}
  .wrow .item input:checked ~ .txt{text-decoration:none;color:inherit;}
  .repl{
    flex-shrink:0;border:0;border-left:1px solid var(--line);
    background:var(--surface-2);color:var(--ink-3);
    font-family:var(--font-body);font-size:10.5px;font-weight:600;line-height:1.2;
    padding:0 11px;cursor:pointer;text-align:center;
  }
  .repl:hover{background:var(--good-soft);color:var(--good);}
  .repl:focus-visible{outline:3px solid var(--accent-fill);outline-offset:-3px;}

  /* flag-a-unit form */
  .addwrap{border-top:1px solid var(--line);}
  .addbtn{
    display:block;width:100%;padding:13px 14px;border:0;background:none;
    font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--accent);
    cursor:pointer;text-align:left;
  }
  .addbtn:hover{background:var(--surface-2);}
  .addbtn:focus-visible{outline:3px solid var(--accent-fill);outline-offset:-3px;}
  .addwrap.open{background:var(--surface-2);padding:12px 14px 14px;}
  .addhint{margin:0 0 10px;font-size:12.5px;color:var(--ink-3);line-height:1.4;}
  .addgrid{display:flex;gap:8px;}
  .addgrid input{
    flex:1;min-width:0;font-family:var(--font-body);font-size:15px;
    color:var(--ink);background:var(--surface);
    border:1px solid var(--line-2);border-radius:8px;padding:9px 10px;
  }
  .addgrid input::placeholder{color:var(--ink-3);}
  .addgrid input:focus{outline:2px solid var(--accent-fill);border-color:var(--accent-fill);}
  .detect{
    margin:8px 0 0;font-family:var(--font-mono);font-size:11.5px;
    letter-spacing:.04em;color:var(--ink-3);line-height:1.35;min-height:16px;
  }
  .detect.found{color:var(--good);font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
  .detect.unknown{color:var(--due);}
  .addbtns{display:flex;gap:8px;margin-top:10px;}
  .addbtns .tbtn{flex:1;padding:11px;font-size:14px;}
  .addbtns .go{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);}
  .addbtns .go:hover{background:var(--accent-fill);color:var(--on-accent);filter:brightness(1.06);}

  .empty{padding:16px 14px;font-size:14px;color:var(--ink-3);line-height:1.4;}

  .foot{margin-top:24px;padding:14px 4px 0;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3);line-height:1.5;}
  .toast{
    position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:var(--bg);font-size:13.5px;font-weight:600;
    padding:10px 16px;border-radius:9px;opacity:0;pointer-events:none;
    transition:opacity .2s,transform .2s;z-index:99;box-shadow:0 6px 24px rgba(0,0,0,.3);
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .toast .undo{
    margin-left:14px;border:0;background:none;padding:0;
    font-family:var(--font-body);font-size:13.5px;font-weight:700;
    color:var(--accent-fill);cursor:pointer;text-decoration:underline;
  }
  .toast .undo:focus-visible{outline:2px solid var(--accent-fill);outline-offset:3px;}
  .tbtn.icon{display:inline-flex;align-items:center;gap:5px;}
  .tbtn.icon svg{width:13px;height:13px;flex-shrink:0;}

  @media (prefers-reduced-motion:reduce){*{transition:none !important;}}
  @media print{.mast{position:static;}.toolrow,.toast,.scopebar .edit{display:none;}body{background:#fff;}.card{box-shadow:none;}}

  /* ---- explicit theme choice ----
     Last in the sheet on purpose: same specificity as the host's [data-theme]
     stamp, so source order lets the supervisor's pick win either way. */
  :root[data-app-theme="light"]{
    --bg:#F1F1F2; --surface:#FFFFFF; --surface-2:#F7F7F8; --surface-3:#EAEAEC;
    --ink:#171717; --ink-2:#525252; --ink-3:#8A8A8E;
    --line:#E2E2E4; --line-2:#CDCDD1;
    --accent:#C10007; --accent-fill:#DF1A25; --accent-soft:#FDECED;
    --on-accent:#FFFFFF;
    --mark-tile:#16181A; --mark-wedge:#FFFFFF; --mark-red:#E71D21;
    --danger:#C10007; --danger-soft:#FDECED;
    --due:#8A5A04; --due-fill:#F2A81C; --due-soft:#FDF1D8;
    --good:#0F7A77; --good-fill:#16A6A1; --good-soft:#E2F3F2;
    --shadow:0 1px 2px rgba(23,23,23,.05), 0 4px 14px rgba(23,23,23,.06);
  }
  :root[data-app-theme="dark"]{
    --bg:#101113; --surface:#191A1D; --surface-2:#1F2124; --surface-3:#2A2C30;
    --ink:#F4F4F5; --ink-2:#B4B5BA; --ink-3:#85868B;
    --line:#2A2C30; --line-2:#3A3D42;
    --accent:#FF6B6B; --accent-fill:#E71D21; --accent-soft:#2E1416;
    --on-accent:#FFFFFF;
    --mark-tile:#F4F4F5; --mark-wedge:#16181A; --mark-red:#E71D21;
    --danger:#FF6B6B; --danger-soft:#2E1416;
    --due:#F2A81C; --due-fill:#F2A81C; --due-soft:#2E2513;
    --good:#2DBFB9; --good-fill:#16A6A1; --good-soft:#0F2A2A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
  }

/* ================================================================== *
 * Screens — auth, checklist, admin
 * ================================================================== */
.screen{display:none;}
.screen.active{display:block;}

/* ---- sign in ---- */
.authwrap{
  max-width:400px;margin:0 auto;padding:36px 18px 60px;
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
}
/* brand mark — one <symbol>, sized by where it lands */
.mark{width:36px;height:36px;flex-shrink:0;display:block;}
.mark.big{width:64px;height:64px;margin:0 auto 14px;}
@media (max-width:359px){ .mark{width:31px;height:31px;} }

.authmark{text-align:center;margin-bottom:26px;}
.authmark h1{
  font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;margin:0;
}
.authmark p{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:8px 0 0;
}
.authcard{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:20px 18px;
}
.authcard h2{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;
  font-size:19px;font-weight:700;margin:0 0 4px;
}
.authcard .sub{font-size:13.5px;color:var(--ink-3);margin:0 0 18px;line-height:1.4;}
.field{margin-bottom:14px;}
.field label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:6px;
}
.field input{
  width:100%;font-family:var(--font-body);font-size:16px;
  color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:9px;padding:12px 12px;
}
.field input:focus{outline:2px solid var(--accent-fill);border-color:var(--accent-fill);}
.field input.pin{
  font-family:var(--font-mono);font-size:24px;letter-spacing:.6em;
  text-align:center;padding:12px 0 12px 12px;
}
.bigbtn{
  width:100%;padding:14px;border-radius:9px;border:0;
  background:var(--accent-fill);color:var(--on-accent);
  font-family:var(--font-body);font-size:16px;font-weight:700;cursor:pointer;
}
.bigbtn:hover{filter:brightness(1.06);}
.bigbtn:disabled{opacity:.5;cursor:default;filter:none;}
.bigbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
/* A way out, not a warning — in red this read as "something has gone wrong"
   before you had even typed anything. */
.linkbtn{
  display:block;width:100%;margin-top:14px;padding:10px;
  background:none;border:0;color:var(--ink-2);cursor:pointer;
  font-family:var(--font-body);font-size:13.5px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-2);
}
.linkbtn:hover{color:var(--ink);text-decoration-color:var(--ink-3);}
.autherr{
  margin:0 0 14px;padding:11px 12px;border-radius:9px;
  background:var(--due-soft);border-left:3px solid var(--due-fill);
  color:var(--due);font-size:13.5px;line-height:1.4;
}
.autherr:empty{display:none;}
.authnote{
  margin:18px 4px 0;font-size:12px;color:var(--ink-3);line-height:1.5;text-align:center;
}

/* ---- sync pill in the masthead ---- */
.who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);}
.who b{color:var(--ink-2);font-weight:600;}
.sync{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 7px;border-radius:99px;
  background:var(--surface-3);color:var(--ink-3);
}
.sync i{width:6px;height:6px;border-radius:99px;background:var(--ink-3);flex-shrink:0;}
.sync.ok{background:var(--good-soft);color:var(--good);}
.sync.ok i{background:var(--good-fill);}
.sync.pending{background:var(--accent-soft);color:var(--accent);}
.sync.pending i{background:var(--accent-fill);}
.sync.off{background:var(--due-soft);color:var(--due);}
.sync.off i{background:var(--due-fill);}

/* ---- admin ---- */
.tabs{display:flex;gap:6px;margin:16px 0 2px;}
.tab{
  font-family:var(--font-body);font-size:13px;font-weight:600;
  padding:9px 13px;border-radius:9px 9px 0 0;border:1px solid var(--line);
  border-bottom:0;background:var(--surface-2);color:var(--ink-3);cursor:pointer;
}
.tab[aria-selected="true"]{background:var(--surface);color:var(--ink);}
.gridwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.grid{border-collapse:collapse;width:100%;font-size:13px;}
table.grid th,table.grid td{
  padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.grid thead th{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;background:var(--surface-2);
  position:sticky;top:0;z-index:1;
}
table.grid td.name{font-weight:600;position:sticky;left:0;background:var(--surface);}
table.grid tbody tr:hover td{background:var(--surface-2);}
table.grid tbody tr:hover td.name{background:var(--surface-2);}
.cell{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:6px;font-size:12px;font-weight:700;
}
.cell.done{background:var(--good-soft);color:var(--good);}
.cell.missed{background:var(--due-soft);color:var(--due);}
.cell.pending{background:var(--surface-3);color:var(--ink-3);}
.cell.na{background:transparent;color:var(--line-2);}
.score{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.legend2{
  display:flex;flex-wrap:wrap;gap:14px;margin:12px 2px 0;
  font-size:11.5px;color:var(--ink-3);
}
.legend2 span{display:inline-flex;align-items:center;gap:6px;}
/* On a phone this select is wider than the space left beside the title and
   was printing straight over "Admin". Let it shrink instead. */
.weekpick{
  font-family:var(--font-mono);font-size:12px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:8px;padding:8px 10px;
  width:100%;
}
/* a select will not shrink below its longest option on its own — the cap
   on the wrapper is what actually stops it eating the title */
#screen-admin .datebox{flex-shrink:1;min-width:0;max-width:52%;}
/* Which site the tab below is about. Only drawn when there's more than one,
   so a single-site install never sees it. */
.sitebar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;margin:14px 0 4px;box-shadow:var(--shadow);
}
.sitebar label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.sitebar .weekpick{flex:1;min-width:0;max-width:320px;}
.sitenote{font-size:12px;color:var(--ink-3);}
.copyrow{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:10px;font-size:13px;color:var(--ink-2);
}
.copyrow .weekpick{flex:1;min-width:150px;}
.sitesel{width:100%;max-width:190px;font-size:11.5px;padding:5px 7px;}

.loading{padding:26px 14px;text-align:center;color:var(--ink-3);font-size:14px;}

/* The admin grid is read on a laptop, not in a truck — let it breathe. */
#screen-admin .wrap{max-width:1180px;}
#screen-admin .mast-in{max-width:1180px;}
@media (max-width:700px){
  #screen-admin .wrap,#screen-admin .mast-in{max-width:640px;}
}

/* ---- one-time temporary PIN callout ---- */
.pinout{
  margin-top:14px;padding:14px;border-radius:10px;
  background:var(--accent-soft);border:1px solid var(--accent-fill);
}
.pinlead{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.4;}
.pinlead b{color:var(--ink);}
.pincode{
  margin:10px 0;font-family:var(--font-mono);font-size:38px;font-weight:700;
  letter-spacing:.22em;text-align:center;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.pinnote{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45;}
.tbtn.danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger);}
table.grid td .tbtn{padding:5px 9px;font-size:11.5px;margin-right:4px;}

/* the identity line sits inline: name then sync pill */
.brand .who{margin-top:5px;}
.brand .who .sync span{display:inline;margin:0;}

/* ================================================================== *
 * Master list editor
 * ================================================================== */
.esec .erows{display:flex;flex-direction:column;}
.erow{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:11px 14px;border-top:1px solid var(--line);
}
.erow:first-child{border-top:0;}
.erow:hover{background:var(--surface-2);}
.ermain{display:flex;flex:1;min-width:220px;gap:8px;align-items:center;}
.etext{
  flex:1;min-width:0;font-family:var(--font-body);font-size:15px;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:8px;padding:10px 11px;
}
.etext:focus{outline:2px solid var(--accent-fill);border-color:var(--accent-fill);}
.etext::placeholder{color:var(--ink-3);}
.eday{
  flex-shrink:0;font-family:var(--font-body);font-size:13px;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:8px;padding:10px 8px;max-width:170px;
}
.eday:focus{outline:2px solid var(--accent-fill);border-color:var(--accent-fill);}
.elabel{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:6px;
}
.eractions{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.ebtn{
  width:32px;height:32px;flex-shrink:0;padding:0;
  border:1px solid var(--line-2);border-radius:8px;
  background:var(--surface-2);color:var(--ink-3);
  font-family:var(--font-body);font-size:14px;font-weight:600;
  cursor:pointer;display:grid;place-items:center;
}
.ebtn:hover{background:var(--surface-3);color:var(--ink);}
.ebtn.has{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.ebtn.del:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger);}
.ebtn:focus-visible{outline:3px solid var(--accent-fill);outline-offset:2px;}
.echk{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  font-size:12px;color:var(--ink-2);cursor:pointer;white-space:nowrap;
  padding:0 6px 0 2px;
}
.echk input{width:16px;height:16px;accent-color:var(--accent-fill);cursor:pointer;}
.erhint{flex-basis:100%;padding:2px 0 2px 2px;}
.erhint label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:6px;
}
.erhint textarea{
  width:100%;font-family:var(--font-body);font-size:14px;line-height:1.5;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-left:3px solid var(--accent-fill);
  border-radius:0 8px 8px 0;padding:10px 11px;resize:vertical;
}
.erhint textarea:focus{outline:2px solid var(--accent-fill);}

/* sticky publish bar */
.savebar{
  position:sticky;bottom:0;z-index:20;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:18px;padding:12px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 -4px 18px rgba(0,0,0,.10);
}
/* the red button is the call to action; ringing the whole bar in red made
   a routine "ready to send" look like a failure */
.savebar.on{border-color:var(--line-2);}
.savemsg{
  flex:1;min-width:130px;font-size:13.5px;font-weight:600;color:var(--ink-3);
}
.savebar.on .savemsg{color:var(--ink-2);}
.savebar .tbtn{padding:10px 14px;font-size:14px;}
.savebar .tbtn:disabled{opacity:.45;cursor:default;}
.savebar .go{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);}
.savebar .go:hover:not(:disabled){filter:brightness(1.06);background:var(--accent-fill);color:var(--on-accent);}
@media (max-width:520px){
  .eday{max-width:none;flex:1;}
  .ermain{flex-basis:100%;}
}

/* ---- reminders ---- */
.tag.clock{
  background:var(--surface-3);color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.tag.due.clock{background:var(--due-soft);color:var(--due);}
.etime{max-width:150px;}

.alertbox{
  display:flex;align-items:flex-start;gap:11px;
  margin-top:14px;padding:12px 13px;border-radius:11px;
  background:var(--due-soft);border:1px solid var(--due-fill);border-left-width:5px;
}
.alertbox.soon{background:var(--accent-soft);border-color:var(--accent-fill);}
.alertbox .abody{flex:1;min-width:0;}
.alertbox .atitle{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;
  font-size:15px;font-weight:700;color:var(--due);display:block;line-height:1.1;
}
.alertbox.soon .atitle{color:var(--accent);}
.alertbox .amsg{display:block;margin-top:4px;font-size:13.5px;color:var(--ink-2);line-height:1.4;}
.alertbox .adismiss{
  flex-shrink:0;width:28px;height:28px;padding:0;border:0;border-radius:8px;
  background:transparent;color:var(--ink-3);cursor:pointer;font-size:15px;
}
.alertbox .adismiss:hover{background:var(--surface-3);color:var(--ink);}

.notifynag{
  margin-top:14px;padding:12px 13px;border-radius:11px;
  background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
}
.notifynag p{margin:0;flex:1;min-width:180px;font-size:13px;color:var(--ink-2);line-height:1.4;}

.tag.owner{background:var(--accent-soft);color:var(--accent);font-weight:700;}
.lockednote{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}

/* one-time recovery codes */
.codegrid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0;
}
.codegrid span{
  font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:.08em;
  text-align:center;padding:9px 4px;border-radius:7px;
  background:var(--surface);border:1px solid var(--accent-fill);color:var(--ink);
}
@media (max-width:420px){.codegrid{grid-template-columns:1fr;}}

/* ================================================================== *
 * Foreman Report
 * ================================================================== */
.frm{display:flex;flex-direction:column;gap:12px;padding:12px 14px;}
.fld{display:flex;flex-direction:column;gap:6px;}
.fld label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}
.fld .etext{width:100%;}
.fld select.etext{appearance:none;background-image:none;}
.ynseg{align-self:flex-start;}
.ynseg button{min-width:56px;font-size:15px;padding:10px 16px;}

/* repeating rows */
.rrow{border-top:1px solid var(--line);}
.rrow:first-of-type{border-top:0;}
.rrowhead{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 0;
}
.rrowhead span{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--ink-3);background:var(--surface-3);
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
}

/* photos */
.pgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;padding:12px 14px;
}
.pcard{
  margin:0;background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
}
.pcard img{width:100%;height:110px;object-fit:cover;display:block;background:var(--surface-3);}
.pnothumb{
  height:110px;display:grid;place-items:center;background:var(--surface-3);
  color:var(--ink-3);font-size:11px;
}
.pcard figcaption{padding:8px;display:flex;flex-direction:column;gap:6px;}
.pcard .etext{font-size:13px;padding:7px 8px;}
/* Three labelled prompts per picture — labelled because "where" and "what"
   are not guessable from a bare box, and the office needs both. */
/* Flagged when a send was stopped because this picture has no description. */
.pcard.needs{outline:2px solid var(--due-fill);outline-offset:1px;}
.pcard.needs .pfld:nth-child(2) label{color:var(--due);}
.pfld{display:flex;flex-direction:column;gap:3px;}
.pfld label{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}
.pmeta{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.03em;
  color:var(--ink-3);line-height:1.3;
}
.pcard .ebtn.del{width:auto;height:26px;font-size:11px;padding:0 8px;}
.photobtn{
  display:block;text-align:center;cursor:pointer;margin:0;
}

/* ---- spreadsheet import ---- */
.dropzone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:22px 14px;border:2px dashed var(--line-2);border-radius:12px;
  background:var(--surface-2);cursor:pointer;text-align:center;
  transition:border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.over{border-color:var(--accent-fill);background:var(--accent-soft);}
.dropzone b{font-size:14px;color:var(--ink);}
.dropzone span{font-size:12px;color:var(--ink-3);}
.findrow{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 0;border-top:1px solid var(--line);
}
.findlabel{flex:1;min-width:180px;font-size:13.5px;color:var(--ink);}
.findjob{max-width:110px;}
.findnote{display:block;font-size:11.5px;color:var(--due);margin-top:2px;}
/* The machine type on an hours row: derived from the unit number, never typed. */
.rowtype{
  display:block;margin-top:5px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}

/* Shortcut from a task row to the screen that does it. */
.gobtn{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;
  margin-left:8px;padding:3px 9px;border-radius:99px;
  border:1px solid var(--accent-fill);background:var(--accent-soft);
  color:var(--accent);cursor:pointer;line-height:1.35;white-space:nowrap;
  vertical-align:1px;
}
.gobtn:hover{background:var(--accent-fill);color:var(--on-accent);}
.item.locked .gobtn{pointer-events:auto;}

/* Switching between reports when a supervisor covers more than one scope. */
.rtabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 4px;}
.rtab{
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  padding:8px 12px;border-radius:99px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);cursor:pointer;line-height:1.2;
}
.rtab.on{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);}
.rtab.on .tag{background:rgba(255,255,255,.22);color:var(--on-accent);}
.rtab.add{border-style:dashed;color:var(--ink-3);}
.rtab.add:hover{color:var(--ink);border-color:var(--line-2);}

/* ==================================================================== *
 * Tablets (iPad).
 *
 * Everything above this point was written phone-first, and every breakpoint
 * in the sheet is a max-width one — so any screen wider than a phone got the
 * same 640px column. On an iPad in landscape that left roughly half the
 * display empty while a four-field section scrolled for pages, with a date
 * box stretched to 640px to hold ten characters.
 *
 * These are the only min-width rules here. They widen the column and let
 * short form fields sit side by side. Nothing below changes the phone
 * layout, because nothing below applies at phone widths.
 * ==================================================================== */

@media (min-width:768px){
  .wrap,.mast-in{max-width:860px;}

  /* The report and hours forms are schema-driven, so the number of fields in
     a section is not known here. auto-fit lets the browser decide how many
     columns fit: a two-field section stays two, a longer one spreads, and no
     per-section markup is needed. */
  .frm{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:12px 16px;
    align-items:start;
  }
  /* Anything you actually write prose into keeps the full width — a
     description box squeezed into a 250px column is worse than no change. */
  .fld:has(textarea){grid-column:1/-1;}
}

@media (min-width:1024px){
  .wrap,.mast-in{max-width:1040px;}

  /* Scope questions two-up. In one column at this width the Yes/No sits a
     hand's width away from the question it answers. */
  /* Must be `.card.scopeopen .scopebody` and not just `.scopebody`: the
     collapse is done with display, and that selector outranks a bare class.
     Staying inside .scopeopen also keeps the collapsed state hidden. */
  .card.scopeopen .scopebody{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:0;
  }
  .scopebody .prompt,
  .scopebody .chipq{grid-column:1/-1;}
  /* The single-column rule was `.q + .q`, which in a grid would skip the
     second column's first row and draw the wrong dividers. */
  .q{border-top:1px solid var(--line);}
  .q + .q{border-top:1px solid var(--line);}
  .scopebody .q:nth-child(odd){border-right:1px solid var(--line);}
}

/* ---- Assigned to you -------------------------------------------------
   One-off tasks from an admin. Built on .q (the scope-question row) because
   it is the same shape: a label on the left, a two-button segment on the
   right. Two buttons, not a checkbox — "read it" and "did it" are separate
   answers and the office needs both. */
.arow{align-items:flex-start;}
.arow .qt{display:block;}
.arow .lbl{display:block;font-size:15px;line-height:1.35;}
.arow .pmeta{display:inline;font-size:11.5px;color:var(--ink-3);}
.arow .seg{flex-shrink:0;margin-top:2px;}
.arow.helpopen .hint{display:block;}
/* Done fades back rather than disappearing — it stays on the list as proof
   it was handled, unlike a daily task which simply clears. */
.arow-done .lbl{color:var(--ink-3);}
.arow-done{background:var(--surface-2);}

/* ==================================================================== *
 * The sign-in page as a front door.
 *
 * shiftrunner.ca is the desktop home of the app, and the people who type it
 * are not only the crew — head office reads the reports, and Suncor may see
 * the domain in a footer. A lone PIN box on an empty page tells them
 * nothing, so on a wide screen a second column says what this is.
 *
 * The PHONE IS UNCHANGED: everything below is min-width, and .authtell is
 * display:none until 900px. A supervisor signing in at the pit sees exactly
 * the card they saw before.
 * ==================================================================== */
.authtell{display:none;}

@media (min-width:900px){
  .authwrap{
    max-width:1040px;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:64px;
    align-items:center;
    padding:48px 32px;
  }
  /* The pane's own mark is redundant once the left column shows one. */
  .authpane .authmark{display:none;}
  .authpane{width:100%;max-width:400px;}

  .authtell{display:block;}
  .authbrand{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
  .authbrand .mark.big{width:52px;height:52px;margin:0;}
  .authbrand h1{
    font-family:var(--font-display);font-weight:700;font-size:38px;line-height:1;
    letter-spacing:.02em;text-transform:uppercase;margin:0;
  }
  .authlede{
    font-size:17px;line-height:1.55;color:var(--ink-2);margin:0 0 26px;max-width:34em;
  }
  .authpoints{list-style:none;margin:0 0 28px;padding:0;}
  .authpoints li{
    position:relative;padding-left:18px;margin-bottom:13px;
    font-size:14px;line-height:1.5;color:var(--ink-2);max-width:34em;
  }
  /* A red tick of a marker, the same accent the reports and the brand use. */
  .authpoints li::before{
    content:"";position:absolute;left:0;top:8px;
    width:7px;height:7px;border-radius:2px;background:var(--accent-fill);
  }
  .authpoints b{color:var(--ink);font-weight:600;}
  .authfoot{
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3);margin:0;
    padding-top:20px;border-top:1px solid var(--line);
  }
}

/* Between tablet and desktop the two columns would squeeze; centre instead. */
@media (min-width:900px) and (max-width:1040px){
  .authwrap{gap:40px;}
  .authlede{font-size:16px;}
}