/* Every colour in this file comes from a token below, so a theme only
   has to redefine these ten-odd values. --ink and --paper are used as a
   pair in both directions (ink text on paper, and paper text on ink
   blocks like the punch button), which is what lets the dark themes work
   without any per-component overrides. */
  :root, :root[data-theme="site"]{
    --ink:#16213E;
    --ink-soft:#2A3A5C;
    --paper:#FAF9F4;
    --paper-dim:#F1EEE4;
    --card:#FFFFFF;
    --safety:#F2A900;
    --safety-dark:#C98600;
    --rust:#C1440E;
    --pine:#2D6A4F;
    --steel:#5C6B73;
    --line:#DDD8C8;
    --rust-soft:#FBE7DD;
    --pine-soft:#E4F1E9;
    --warn-soft:#FCF0D4;
    --overlay:rgba(22,33,62,0.55);
    --shadow:rgba(22,33,62,0.12);
  }

  /* Cool grey, for anyone who finds the cream too warm. */
  :root[data-theme="concrete"]{
    --ink:#1F2933;
    --ink-soft:#3E4C59;
    --paper:#F4F6F8;
    --paper-dim:#E4E7EB;
    --card:#FFFFFF;
    --safety:#F0A202;
    --safety-dark:#B87A00;
    --rust:#B54A20;
    --pine:#3A7D5D;
    --steel:#7B8794;
    --line:#CBD2D9;
    --rust-soft:#F7E2D9;
    --pine-soft:#E1EFE8;
    --warn-soft:#FBEFD3;
    --overlay:rgba(31,41,51,0.58);
    --shadow:rgba(31,41,51,0.14);
  }

  /* Dark navy with drafting-cyan. Pairs with the grid background. */
  :root[data-theme="blueprint"]{
    --ink:#DCE7F5;
    --ink-soft:#AFC4DE;
    --paper:#0E1B2E;
    --paper-dim:#16273F;
    --card:#132339;
    --safety:#38BDF8;
    --safety-dark:#7DD3FC;
    --rust:#FB7185;
    --pine:#4ADE80;
    --steel:#8AA2BF;
    --line:#27415F;
    --rust-soft:#3A2230;
    --pine-soft:#163329;
    --warn-soft:#123243;
    --overlay:rgba(4,10,20,0.7);
    --shadow:rgba(0,0,0,0.45);
  }

  /* Near-black with amber, for night shifts and bright sun. */
  :root[data-theme="night"]{
    --ink:#EDE9E3;
    --ink-soft:#C9C3BA;
    --paper:#121212;
    --paper-dim:#1E1E1E;
    --card:#1A1A1A;
    --safety:#FFB300;
    --safety-dark:#FFCA55;
    --rust:#FF7A68;
    --pine:#5DD39E;
    --steel:#8E8E8E;
    --line:#333333;
    --rust-soft:#3A211D;
    --pine-soft:#163025;
    --warn-soft:#3A2E12;
    --overlay:rgba(0,0,0,0.68);
    --shadow:rgba(0,0,0,0.5);
  }

  /* Cream and forest green. */
  :root[data-theme="field"]{
    --ink:#1B3A2F;
    --ink-soft:#2F5D4A;
    --paper:#F7F5EE;
    --paper-dim:#E9E5D8;
    --card:#FFFFFF;
    --safety:#DFA100;
    --safety-dark:#A97A00;
    --rust:#B5411E;
    --pine:#2D6A4F;
    --steel:#6B7A6E;
    --line:#D6D1BE;
    --rust-soft:#F7E1D8;
    --pine-soft:#DFEDE3;
    --warn-soft:#F7EDCF;
    --overlay:rgba(27,58,47,0.55);
    --shadow:rgba(27,58,47,0.14);
  }

  /* Maximum contrast, for direct sun on a phone screen. */
  :root[data-theme="highvis"]{
    --ink:#000000;
    --ink-soft:#1A1A1A;
    --paper:#FFFFFF;
    --paper-dim:#EDEDED;
    --card:#FFFFFF;
    --safety:#FFD400;
    --safety-dark:#8A7200;
    --rust:#B00000;
    --pine:#0A6B2E;
    --steel:#3D3D3D;
    --line:#000000;
    --rust-soft:#FFE3E3;
    --pine-soft:#DFF3E5;
    --warn-soft:#FFF6CC;
    --overlay:rgba(0,0,0,0.6);
    --shadow:rgba(0,0,0,0.25);
  }

  /* Cool blue-grey dark, softer than Night Shift. */
  :root[data-theme="slate"]{
    --ink:#E4E9F0;
    --ink-soft:#B9C4D2;
    --paper:#1B2027;
    --paper-dim:#242B34;
    --card:#212831;
    --safety:#7FB2E5;
    --safety-dark:#A8CCF0;
    --rust:#F08A7C;
    --pine:#6FD6A6;
    --steel:#8C99A8;
    --line:#39424E;
    --rust-soft:#3A2724;
    --pine-soft:#1D352C;
    --warn-soft:#243444;
    --overlay:rgba(8,11,15,0.7);
    --shadow:rgba(0,0,0,0.45);
  }

  /* Warm paper and ink, like an old wage ledger. */
  :root[data-theme="sepia"]{
    --ink:#3B2E1E;
    --ink-soft:#5A4832;
    --paper:#F6EEDF;
    --paper-dim:#EADFC9;
    --card:#FDF8EE;
    --safety:#C87A22;
    --safety-dark:#96590F;
    --rust:#A63A1E;
    --pine:#4A6B3A;
    --steel:#7C6B55;
    --line:#D9C9AB;
    --rust-soft:#F2DFD3;
    --pine-soft:#E4EBDC;
    --warn-soft:#F6E9CC;
    --overlay:rgba(59,46,30,0.55);
    --shadow:rgba(59,46,30,0.16);
  }

  /* ---- ACCENT ----
     Overrides whatever the theme chose for --safety. Declared after the
     themes so it wins on source order at equal specificity. */
  :root[data-accent="amber"]{--safety:#F2A900;--safety-dark:#C98600;}
  :root[data-accent="rust"] {--safety:#C1440E;--safety-dark:#8F3009;}
  :root[data-accent="pine"] {--safety:#2D6A4F;--safety-dark:#1E4A36;}
  :root[data-accent="sky"]  {--safety:#2E86C1;--safety-dark:#1B5E88;}
  :root[data-accent="plum"] {--safety:#7D3C98;--safety-dark:#572A6B;}
  :root[data-accent="ink"]  {--safety:#16213E;--safety-dark:#0C1326;}

  /* ---- CORNERS ----
     Applied as one block so no existing rule has to change. */
  :root[data-corners="soft"] .panel,
  :root[data-corners="soft"] .summary-card,
  :root[data-corners="soft"] .name-card,
  :root[data-corners="soft"] .auth-card,
  :root[data-corners="soft"] .modal-card,
  :root[data-corners="soft"] .role-card,
  :root[data-corners="soft"] .role-icon,
  :root[data-corners="soft"] .clock-face,
  :root[data-corners="soft"] .timecard,
  :root[data-corners="soft"] .site-row,
  :root[data-corners="soft"] .reg-row,
  :root[data-corners="soft"] .fact,
  :root[data-corners="soft"] .live-site,
  :root[data-corners="soft"] .pending-detail,
  :root[data-corners="soft"] .card-static,
  :root[data-corners="soft"] .qr-mount,
  :root[data-corners="soft"] .swatch,
  :root[data-corners="soft"] .switch-row,
  :root[data-corners="soft"] .btn,
  :root[data-corners="soft"] .punch-btn,
  :root[data-corners="soft"] .status-chip,
  :root[data-corners="soft"] .mgr-tabs,
  :root[data-corners="soft"] .profile-menu,
  :root[data-corners="soft"] input,
  :root[data-corners="soft"] select{
    border-radius:8px;
  }
  :root[data-corners="soft"] .status-chip{border-radius:999px;}
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  /* Transparent so a background pattern runs the full height behind the
     column rather than stopping at its edges. */
  .app{
    max-width:480px;
    margin:0 auto;
    min-height:100vh;
    background:transparent;
    display:flex;
    flex-direction:column;
    position:relative;
  }

  /* ---- BACKGROUND PATTERNS ----
     Drawn with gradients rather than image files: no extra requests, and
     they recolour themselves with the theme because they're painted in
     --line and --paper-dim. */
  :root[data-pattern="grid"] body{
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:28px 28px;
  }
  :root[data-pattern="dots"] body{
    background-image:radial-gradient(var(--line) 1.4px, transparent 1.5px);
    background-size:20px 20px;
  }
  :root[data-pattern="stripes"] body{
    background-image:repeating-linear-gradient(
      45deg, var(--paper-dim) 0 10px, transparent 10px 26px);
  }
  :root[data-pattern="rule"] body{
    background-image:linear-gradient(var(--line) 1px, transparent 1px);
    background-size:100% 30px;
  }
  :root[data-pattern="hatch"] body{
    background-image:repeating-linear-gradient(
      -45deg, var(--line) 0 1px, transparent 1px 9px);
  }
  :root[data-pattern="cross"] body{
    background-image:
      repeating-linear-gradient(45deg,  var(--line) 0 1px, transparent 1px 16px),
      repeating-linear-gradient(-45deg, var(--line) 0 1px, transparent 1px 16px);
  }
  :root[data-pattern="hazard"] body{
    background-image:repeating-linear-gradient(
      45deg, var(--warn-soft) 0 14px, transparent 14px 30px);
  }
  :root[data-pattern="graph"] body{
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px),
      linear-gradient(var(--paper-dim) 1px, transparent 1px),
      linear-gradient(90deg, var(--paper-dim) 1px, transparent 1px);
    background-size:70px 70px, 70px 70px, 14px 14px, 14px 14px;
  }
  header{
    padding:20px 20px 0 20px;
  }
  .brand{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:16px;
  }
  .brand .mark{
    width:10px;height:10px;background:var(--safety);
    display:inline-block;
  }
  .brand h1{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:20px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    margin:0;
    color:var(--ink);
  }
  .brand span.sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--steel);
    letter-spacing:0.02em;
  }
  .brand .profile{margin-left:auto;align-self:center;}
  .role-switch{
    margin-left:auto;
    align-self:center;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--steel);
    padding:6px 10px;
    font-family:'Oswald',sans-serif;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    cursor:pointer;
  }
  .role-switch:hover{border-color:var(--ink);color:var(--ink);}

  /* ---- ROLE GATE ---- */
  .role-gate{
    padding:8px 20px 40px 20px;
  }
  .role-lead{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--steel);
    margin:0 0 12px 2px;
  }
  .role-grid{
    display:grid;
    gap:12px;
  }
  .role-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    width:100%;
    text-align:left;
    border:1px solid var(--line);
    border-left:3px solid var(--safety);
    background:var(--card);
    padding:20px 18px;
    cursor:pointer;
    transition:border-color .15s ease, transform .08s ease;
  }
  .role-card:hover{border-color:var(--ink);border-left-color:var(--safety);}
  .role-card:active{transform:scale(0.99);}
  .role-card.manager{border-left-color:var(--ink);}
  .role-card.manager:hover{border-left-color:var(--ink);}
  .role-icon{
    width:38px;height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    background:var(--paper);
    color:var(--steel);
  }
  .role-icon svg{width:20px;height:20px;display:block;}
  .role-card:hover .role-icon{color:var(--ink);border-color:var(--ink);}
  .role-title{
    font-family:'Oswald',sans-serif;
    font-size:18px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ink);
  }
  .role-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--steel);
  }
  main{
    flex:1;
    padding:0 20px 40px 20px;
  }
  .auth-gate{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:8px 20px 40px 20px;
  }
  .auth-card{
    width:100%;
    max-width:380px;
    border:1px solid var(--line);
    border-top:3px solid var(--safety);
    background:var(--card);
    padding:18px;
  }
  .auth-card h2{
    font-family:'Oswald',sans-serif;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:0.07em;
    margin:0 0 4px 0;
    color:var(--ink);
  }
  .auth-alt{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--steel);
    text-align:center;
    margin:14px 0 0 0;
    padding-top:12px;
    border-top:1px dashed var(--line);
  }
  .auth-alt .link-mini{color:var(--ink);}
  .field-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .field label .opt{text-transform:none;letter-spacing:0;opacity:0.75;}
  .pending-detail{
    border:1px solid var(--line);
    border-left:3px solid var(--safety);
    background:var(--paper);
    padding:10px 12px;
    margin-bottom:12px;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--steel);
    line-height:1.6;
  }
  .pending-detail b{color:var(--ink);font-weight:500;}

  /* ---- REGISTRATION QUEUE (manager) ---- */
  .reg-row{
    border:1px solid var(--line);
    border-left:3px solid var(--safety);
    background:var(--paper);
    padding:12px;
    margin-bottom:8px;
  }
  .reg-who{
    font-family:'Oswald',sans-serif;
    font-size:14px;
    letter-spacing:0.03em;
    color:var(--ink);
  }
  .reg-meta{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    color:var(--steel);
    margin-top:3px;
    line-height:1.6;
    word-break:break-word;
  }
  .reg-empno{
    display:flex;
    gap:8px;
    align-items:center;
    margin-top:10px;
  }
  .reg-empno input{
    flex:1;
    min-width:0;
    border:1px solid var(--line);
    background:var(--card);
    padding:8px 10px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    color:var(--ink);
  }
  .reg-actions{display:flex;gap:8px;margin-top:8px;}
  .reg-actions .btn{padding:8px 12px;font-size:10px;}
  .btn.danger{border-color:var(--rust);background:var(--card);color:var(--rust);}
  .btn.danger:hover{background:var(--rust-soft);}
  .reg-history-wrap{
    border-top:1px dashed var(--line);
    margin-top:12px;
    padding-top:10px;
  }
  .reg-hist-row{
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    color:var(--steel);
    padding:5px 0;
    border-bottom:1px solid var(--paper-dim);
  }
  .reg-hist-row:last-child{border-bottom:none;}
  .reg-hist-row .ok{color:var(--pine);}
  .reg-hist-row .no{color:var(--rust);}

  .view{display:none;}
  .view.active{display:block;}

  /* ---- WORKER VIEW ---- */
  .name-card{
    border:1px solid var(--line);
    background:var(--card);
    padding:16px;
    margin-bottom:16px;
  }
  .name-card label{
    display:block;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--steel);
    margin-bottom:6px;
  }
  .name-card label.stacked{margin-top:12px;}
  .card-static{
    border:1px solid var(--line);
    background:var(--paper-dim);
    padding:10px 12px;
    font-family:'Oswald',sans-serif;
    font-size:15px;
    letter-spacing:0.03em;
    color:var(--ink);
  }
  .name-row{display:flex;gap:8px;}
  .name-row input{
    flex:1;
    border:1px solid var(--line);
    background:var(--paper);
    padding:10px 12px;
    font-family:'Inter',sans-serif;
    font-size:15px;
    color:var(--ink);
  }
  .name-row input:focus{outline:2px solid var(--ink);outline-offset:-1px;}
  .name-row button{
    border:1px solid var(--ink);
    background:var(--ink);
    color:var(--paper);
    padding:0 16px;
    font-family:'Oswald',sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    cursor:pointer;
  }
  .pin-input{
    width:100%;
    border:1px solid var(--line);
    background:var(--paper);
    padding:12px;
    margin-bottom:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:24px;
    letter-spacing:0.5em;
    text-indent:0.5em;
    text-align:center;
    color:var(--ink);
  }
  .pin-input:focus{outline:2px solid var(--ink);outline-offset:-1px;}
  .pin-submit{width:100%;flex:none;padding:12px;}
  .pin-hint{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--steel);
    margin:0 0 10px 0;
  }
  .pin-hint b{color:var(--ink);}
  .pin-note{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--steel);
    margin:8px 0 0 0;
    min-height:14px;
  }
  .pin-note.err{color:var(--rust);}
  .site-picker{margin-bottom:12px;}
  .site-picker label{
    display:block;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--steel);
    margin-bottom:6px;
  }
  .site-picker select{
    width:100%;
    border:1px solid var(--line);
    background:var(--card);
    padding:12px;
    font-family:'Inter',sans-serif;
    font-size:15px;
    color:var(--ink);
  }
  .site-picker select:disabled{background:var(--paper-dim);color:var(--steel);}
  .greeting{
    font-family:'Oswald',sans-serif;
    font-size:15px;
    color:var(--ink-soft);
    margin:0 0 16px 2px;
  }
  .greeting b{color:var(--ink);}
  .link-mini{
    text-decoration:underline;
    cursor:pointer;
    color:var(--steel);
    font-size:12px;
  }
  .clock-face{
    text-align:center;
    padding:36px 20px 28px 20px;
    border:1px solid var(--line);
    background:var(--card);
    position:relative;
    overflow:hidden;
    margin-bottom:16px;
  }
  .clock-face::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;height:4px;
    background:repeating-linear-gradient(90deg, var(--safety) 0 10px, transparent 10px 20px);
  }
  .clock-time{
    font-family:'IBM Plex Mono',monospace;
    font-size:44px;
    font-weight:500;
    letter-spacing:0.01em;
    color:var(--ink);
    line-height:1;
  }
  .clock-date{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:var(--steel);
    margin-top:8px;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .status-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:16px;
    padding:6px 12px;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    border:1px solid var(--line);
    background:var(--paper-dim);
    color:var(--steel);
  }
  .status-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--steel);}
  .status-chip.on .dot{background:var(--pine);}
  .status-chip.off .dot{background:var(--rust);}
  .status-chip.pending .dot{background:var(--safety);animation:pulse 1s infinite;}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

  .punch-btn{
    width:100%;
    padding:20px;
    border:none;
    background:var(--ink);
    color:var(--paper);
    font-family:'Oswald',sans-serif;
    font-size:19px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    font-weight:600;
    cursor:pointer;
    margin-bottom:8px;
    transition:transform .08s ease;
  }
  .punch-btn:active{transform:scale(0.98);}
  .punch-btn.out{background:var(--rust);}
  .punch-btn:disabled{background:var(--line);color:var(--steel);cursor:not-allowed;}
  .punch-btn.stamp{animation:stamp .35s ease;}
  @keyframes stamp{
    0%{transform:scale(1);}
    30%{transform:scale(0.94) rotate(-1deg);}
    60%{transform:scale(1.03) rotate(0.5deg);}
    100%{transform:scale(1);}
  }
  .punch-note{
    text-align:center;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--steel);
    margin-bottom:24px;
  }
  .punch-note.err{color:var(--rust);}

  .log-header{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin:8px 0 10px 2px;
  }
  .log-header h2{
    font-family:'Oswald',sans-serif;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--ink);
    margin:0;
  }
  .log-header span{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--steel);
  }
  .timecard{
    border:1px solid var(--line);
    background:var(--card);
    padding:12px 14px;
    margin-bottom:8px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
  }
  .timecard::before, .timecard::after{
    content:"";
    position:absolute;
    top:50%;transform:translateY(-50%);
    width:10px;height:10px;
    background:var(--paper);
    border-radius:50%;
    border:1px solid var(--line);
  }
  .timecard::before{left:-6px;}
  .timecard::after{right:-6px;}
  .tc-left{display:flex;flex-direction:column;gap:2px;}
  .tc-type{
    font-family:'Oswald',sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    font-weight:600;
  }
  .tc-type.in{color:var(--pine);}
  .tc-type.out{color:var(--rust);}
  .tc-loc{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    color:var(--steel);
  }
  .tc-time{
    font-family:'IBM Plex Mono',monospace;
    font-size:15px;
    color:var(--ink);
  }
  .empty-note{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:var(--steel);
    text-align:center;
    padding:20px 0;
    border:1px dashed var(--line);
  }

  /* ---- ADMIN VIEW ---- */
  .mgr-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 16px 2px;
  }
  .mgr-title{
    font-family:'Oswald',sans-serif;
    font-size:15px;
    color:var(--ink-soft);
  }
  .profile{position:relative;}
  .avatar{
    width:36px;height:36px;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--card);
    color:var(--steel);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
  }
  .avatar svg{width:20px;height:20px;display:block;}
  .avatar:hover{border-color:var(--ink);color:var(--ink);}
  .avatar[aria-expanded="true"]{border-color:var(--ink);color:var(--ink);}
  .profile-menu{
    position:absolute;
    top:42px;right:0;
    min-width:190px;
    border:1px solid var(--line);
    background:var(--card);
    box-shadow:0 6px 20px var(--shadow);
    z-index:20;
  }
  .profile-menu[hidden]{display:none;}
  .pm-head{
    padding:10px 12px;
    border-bottom:1px solid var(--line);
    background:var(--paper);
  }
  .pm-name{
    font-family:'Oswald',sans-serif;
    font-size:13px;
    letter-spacing:0.03em;
    color:var(--ink);
  }
  .pm-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    color:var(--steel);
    margin-top:2px;
  }
  .pm-item{
    display:block;
    width:100%;
    text-align:left;
    border:none;
    background:none;
    padding:10px 12px;
    font-family:'Oswald',sans-serif;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ink);
    cursor:pointer;
  }
  .pm-item:hover{background:var(--paper-dim);}
  .pm-item.danger{color:var(--rust);border-top:1px solid var(--line);}
  .pm-head + .pm-item.danger{border-top:none;}
  /* ---- DASHBOARD SECTIONS ---- */
  /* Sticky so the tabs stay reachable once a long section is scrolled;
     the bar paints its own background so rows don't show through. */
  .mgr-tabs{
    display:flex;
    background:var(--paper-dim);
    border:1px solid var(--line);
    padding:3px;
    gap:3px;
    margin-bottom:16px;
    position:sticky;
    top:0;
    z-index:15;
  }
  .mgr-tab{
    flex:1;
    border:none;
    background:transparent;
    padding:9px 4px;
    font-family:'Oswald',sans-serif;
    font-size:11px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    font-weight:500;
    color:var(--steel);
    cursor:pointer;
    white-space:nowrap;
    transition:background .15s ease, color .15s ease;
  }
  .mgr-tab:hover{color:var(--ink);}
  .mgr-tab.active{background:var(--ink);color:var(--paper);}
  .tab-badge{
    display:inline-block;
    margin-left:4px;
    min-width:15px;
    padding:1px 4px;
    border-radius:8px;
    background:var(--safety);
    color:#16213E;
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    line-height:1.5;
  }
  .tab-badge[hidden]{display:none;}
  .mgr-section{display:none;}
  .mgr-section.active{display:block;}

  .summary-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:16px;
  }
  .summary-card{
    border:1px solid var(--line);
    background:var(--card);
    padding:14px;
  }
  .summary-card .num{
    font-family:'IBM Plex Mono',monospace;
    font-size:24px;
    color:var(--ink);
    line-height:1;
  }
  .summary-card .label{
    font-family:'Oswald',sans-serif;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--steel);
    margin-top:6px;
  }
  .panel{
    border:1px solid var(--line);
    background:var(--card);
    padding:14px;
    margin-bottom:14px;
  }
  .panel h3{
    font-family:'Oswald',sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.07em;
    margin:0 0 10px 0;
    color:var(--ink);
  }
  .panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .panel-head h3{margin-bottom:10px;}
  .live-updated{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    color:var(--steel);
  }
  .live-site{
    border:1px solid var(--line);
    background:var(--paper);
    margin-bottom:8px;
  }
  .live-site:last-child{margin-bottom:0;}
  .live-site-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 12px;
    background:var(--ink);
    color:var(--paper);
  }
  .live-site-name{
    font-family:'Oswald',sans-serif;
    font-size:12px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .live-count{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    color:var(--safety);
    flex:none;
  }
  .live-none{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--steel);
    padding:12px;
    text-align:center;
  }
  .live-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:9px 12px;
    border-bottom:1px solid var(--paper-dim);
  }
  .live-row:last-child{border-bottom:none;}
  .live-left{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    flex-wrap:wrap;
  }
  .live-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--pine);
    flex:none;
    animation:pulse 2s infinite;
  }
  .live-dot.off{background:var(--rust);}
  .live-worker{
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:500;
    color:var(--ink);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .live-elapsed{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
    color:var(--ink);
    flex:none;
  }
  .field{margin-bottom:10px;}
  .field label{
    display:block;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    text-transform:uppercase;
    color:var(--steel);
    margin-bottom:4px;
  }
  .field input, .field select{
    width:100%;
    border:1px solid var(--line);
    background:var(--paper);
    padding:9px 10px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    color:var(--ink);
  }
  .switch-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    border:1px solid var(--line);
    background:var(--paper);
    padding:12px;
    margin-bottom:14px;
    cursor:pointer;
  }
  .switch-row input{
    flex:none;
    width:18px;height:18px;
    margin:0;
    accent-color:var(--ink);
    cursor:pointer;
  }
  .switch-row span{
    font-family:'Inter',sans-serif;
    font-size:14px;
    color:var(--ink);
    line-height:1.3;
  }
  .quick-row{margin-top:0;margin-bottom:12px;}
  .quick-row .btn{padding:7px 10px;font-size:10px;}
  .when-row{display:flex;gap:8px;align-items:stretch;}
  .when-row input{flex:1;min-width:0;}
  .when-now{
    flex:none;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--ink);
    padding:0 12px;
    font-family:'Oswald',sans-serif;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    cursor:pointer;
  }
  .when-now:hover{border-color:var(--ink);background:var(--paper-dim);}
  .btn-row{display:flex;gap:8px;margin-top:10px;}
  .btn{
    border:1px solid var(--ink);
    background:var(--ink);
    color:var(--paper);
    padding:9px 14px;
    font-family:'Oswald',sans-serif;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    cursor:pointer;
    flex:1;
  }
  .btn.secondary{background:var(--card);color:var(--ink);}
  .btn.small{flex:none;padding:9px 12px;}
  .site-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:1px solid var(--line);
    border-left:3px solid var(--safety);
    background:var(--paper);
    padding:10px 12px;
    margin-bottom:8px;
  }
  .site-info{display:flex;flex-direction:column;gap:3px;min-width:0;}
  .site-name{
    font-family:'Oswald',sans-serif;
    font-size:13px;
    letter-spacing:0.03em;
    color:var(--ink);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .site-coords{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    color:var(--steel);
  }
  .site-del{
    flex:none;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--rust);
    padding:6px 10px;
    font-family:'Oswald',sans-serif;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    cursor:pointer;
  }
  .site-del:hover{background:var(--rust-soft);}
  .emp-row{border-left-color:var(--pine);}

  /* Rows that open something when you click them — employees and job
     sites both do. Keyed on a class the renderer adds rather than on
     .emp-row, so the affordance follows the behaviour instead of
     following whichever list happened to get it first.

     Not `:has(.site-info[role="button"])`: this runs on whatever phone
     is on the site, and that includes browsers older than :has(). */
  .row-clickable{
    cursor:pointer;
    transition:background 0.12s ease, border-left-color 0.12s ease;
  }
  .row-clickable:hover{
    background:var(--paper-dim);
    border-left-color:var(--safety);
  }
  .row-clickable .site-info{cursor:pointer;}
  /* Underline only from the info block, not from the row: the button on
     the right does something else, and underlining the name while you
     hover "Close this site" promises the wrong thing. */
  .row-clickable .site-info:hover .site-name{text-decoration:underline;}
  /* Keyboard users get the same cue — both rows are focusable. */
  .row-clickable .site-info:focus-visible{outline:2px solid var(--safety);outline-offset:2px;}
  .row-clickable .site-info:focus-visible .site-name{text-decoration:underline;}

  /* ---- SHARE / QR ----
     The code itself stays black on white in every theme: scanners expect
     dark modules on a light quiet zone, and a themed QR is a QR that
     sometimes doesn't read. */
  .qr-mount{
    background:#FFFFFF;
    border:1px solid var(--line);
    padding:14px;
    margin-bottom:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:200px;
  }
  .qr-mount svg{
    display:block;
    width:100%;
    max-width:260px;
    height:auto;
    image-rendering:pixelated;
  }
  .qr-mount .loading-note,
  .qr-mount .empty-note{color:#5C6B73;border-color:#DDD8C8;}

  /* ---- EMPLOYEE PROFILE ---- */
  .facts{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin-bottom:14px;
  }
  .fact{
    border:1px solid var(--line);
    background:var(--paper);
    padding:9px 10px;
  }
  .fact.wide{grid-column:1 / -1;}
  .fact-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:0.07em;
    color:var(--steel);
    margin-bottom:3px;
  }
  .fact-value{
    font-family:'Oswald',sans-serif;
    font-size:14px;
    letter-spacing:0.02em;
    color:var(--ink);
    word-break:break-word;
  }
  .fact-value.on{color:var(--pine);}
  .fact-value.off{color:var(--steel);}
  .profile-head{
    font-family:'Oswald',sans-serif;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.07em;
    color:var(--ink);
    margin:0 0 8px 0;
  }
  .team-row{border-left-color:var(--steel);}
  .team-row.mgr{border-left-color:var(--ink);}
  .site-form{
    border-top:1px dashed var(--line);
    padding-top:12px;
    margin-top:12px;
  }
  .invite-label{
    display:block;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--steel);
    margin-bottom:6px;
  }
  #inviteLink{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    background:var(--paper-dim);
  }
  .cell-sub{
    font-size:10px;
    color:var(--steel);
    margin-top:3px;
  }
  .row-edit{
    border:1px solid var(--line);
    background:var(--card);
    color:var(--ink);
    padding:4px 8px;
    font-family:'Oswald',sans-serif;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    cursor:pointer;
  }
  .row-edit:hover{background:var(--paper-dim);border-color:var(--ink);}
  .ot-hours{
    color:var(--rust);
    font-weight:600;
  }
  .ot-none{color:var(--line);}

  /* ---- MODAL ---- */
  .modal{
    position:fixed;
    top:0;right:0;bottom:0;left:0;
    background:var(--overlay);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:24px 16px;
    overflow-y:auto;
    z-index:50;
  }
  .modal[hidden]{display:none;}
  .modal-card{
    width:100%;
    max-width:400px;
    background:var(--card);
    border:1px solid var(--line);
    border-top:3px solid var(--safety);
    padding:16px;
    margin:auto 0;
  }
  .modal-card h3{
    font-family:'Oswald',sans-serif;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.07em;
    margin:0 0 4px 0;
    color:var(--ink);
  }
  .modal-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--steel);
    margin:0 0 14px 0;
  }
  .danger-link{
    display:block;
    width:100%;
    margin-top:10px;
    border:none;
    background:none;
    padding:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--rust);
    text-decoration:underline;
    cursor:pointer;
  }
  /* ---- APPEARANCE PICKER ---- */
  .swatch-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin-bottom:16px;
  }
  .swatch{
    border:1px solid var(--line);
    background:var(--card);
    padding:8px;
    cursor:pointer;
    text-align:left;
    transition:border-color .12s ease;
  }
  .swatch:hover{border-color:var(--ink);}
  .swatch.active{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);}
  .swatch-chips{display:flex;gap:3px;margin-bottom:7px;}
  .swatch-chip{
    flex:1;
    height:20px;
    border:1px solid var(--line);
  }
  .swatch-name{
    font-family:'Oswald',sans-serif;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ink);
  }
  .swatch-preview{
    height:34px;
    border:1px solid var(--line);
    background-color:var(--paper);
    margin-bottom:7px;
  }
  .swatch-preview.p-grid{
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:14px 14px;
  }
  .swatch-preview.p-dots{
    background-image:radial-gradient(var(--line) 1.2px, transparent 1.3px);
    background-size:10px 10px;
  }
  .swatch-preview.p-stripes{
    background-image:repeating-linear-gradient(
      45deg, var(--paper-dim) 0 6px, transparent 6px 14px);
  }
  .swatch-preview.p-rule{
    background-image:linear-gradient(var(--line) 1px, transparent 1px);
    background-size:100% 11px;
  }
  .swatch-preview.p-hatch{
    background-image:repeating-linear-gradient(-45deg, var(--line) 0 1px, transparent 1px 7px);
  }
  .swatch-preview.p-cross{
    background-image:
      repeating-linear-gradient(45deg,  var(--line) 0 1px, transparent 1px 11px),
      repeating-linear-gradient(-45deg, var(--line) 0 1px, transparent 1px 11px);
  }
  .swatch-preview.p-hazard{
    background-image:repeating-linear-gradient(45deg, var(--warn-soft) 0 8px, transparent 8px 18px);
  }
  .swatch-preview.p-graph{
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px),
      linear-gradient(var(--paper-dim) 1px, transparent 1px),
      linear-gradient(90deg, var(--paper-dim) 1px, transparent 1px);
    background-size:33px 33px, 33px 33px, 8px 8px, 8px 8px;
  }
  .swatch-grid.tight{grid-template-columns:repeat(3,1fr);}
  .swatch.chipsonly{padding:6px;}
  .swatch.chipsonly .swatch-chip{height:26px;}

  /* Language picker. One column, not a grid: these are read, not
     compared, and a full-width row is an easier target with gloves on. */
  .lang-list{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:16px;
  }
  .lang-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    padding:12px 14px;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--ink);
    font-family:inherit;
    font-size:15px;
    text-align:left;
    cursor:pointer;
  }
  .lang-row:hover{border-color:var(--steel);}
  .lang-row.active{
    border-color:var(--safety);
    box-shadow:inset 0 0 0 1px var(--safety);
  }
  .lang-name{font-weight:500;}
  .lang-tick{
    color:var(--safety);
    font-weight:700;
  }

  /* An account with no name stored — see supabase/010_account_names.sql */
  .muted-note{
    color:var(--rust);
    font-style:italic;
  }

  /* ---- Place search and map (job sites) ---- */

  /* The suggestion list overlays what follows it, so the field it sits
     in has to establish the containing block. */
  .place-field{position:relative;}
  .place-suggest{
    position:absolute;
    left:0; right:0;
    top:100%;
    /* Above Leaflet, which stacks its panes to 700 and its controls to
       1000. At 40 the map ate the suggestion list whenever both were
       open. The map is opt-in now, but this has to hold anyway — the
       whole point of opening it is to check the pin the list just set. */
    z-index:1200;
    max-height:230px;
    overflow-y:auto;
    background:var(--card);
    border:1px solid var(--steel);
    box-shadow:0 6px 18px var(--shadow);
  }
  .place-option{
    display:block;
    width:100%;
    padding:10px 12px;
    border:0;
    border-bottom:1px solid var(--line);
    background:none;
    color:var(--ink);
    font-family:inherit;
    font-size:13px;
    line-height:1.35;
    text-align:left;
    cursor:pointer;
  }
  .place-option:last-child{border-bottom:0;}
  .place-option:hover{background:var(--paper-dim);}

  .site-map{
    height:240px;
    margin-bottom:12px;
    border:1px solid var(--line);
    background:var(--paper-dim);
  }
  /* Leaflet sets its own colours on these; the map is the one component
     that doesn't recolour with the theme, so keep its chrome legible. */
  .site-map .leaflet-control-attribution{font-size:9px;}

  /* Separator between the two fallback links under the place search. */
  .link-dot{
    color:var(--steel);
    margin:0 6px;
  }
  .site-picked{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--steel);
    margin:0 0 12px;
  }

  /* A closed site is history, not clutter — visible, but clearly not
     one of the jobs running today. */
  .list-subhead{
    font-family:'Oswald',sans-serif;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--steel);
    margin:16px 0 6px;
    padding-top:10px;
    border-top:1px solid var(--line);
  }
  .site-row.site-closed .site-name{
    color:var(--steel);
  }
  .site-row.site-closed{
    opacity:0.75;
  }

  /* Actions that change what a thing *is*, kept away from the ones that
     just dismiss a dialog. The rule above it is the point: "Cancel" and
     "Close this site" must not read as a pair. */
  .danger-zone{
    margin-top:22px;
    padding-top:4px;
    border-top:2px solid var(--line);
  }
  .danger-zone .list-subhead{
    border-top:0;
    padding-top:0;
    margin-top:12px;
  }
  /* Reversible, but not routine — so neither the plain secondary button
     nor the red of a destructive one. */
  .btn.warn{
    background:var(--warn-soft);
    border-color:var(--rust);
    color:var(--ink);
  }
  .btn.warn:hover{
    background:var(--rust);
    color:var(--paper);
  }
  .jobsite-set{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--pine);
    margin-top:8px;
  }
  table.records{
    width:100%;
    border-collapse:collapse;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
  }
  table.records th{
    text-align:left;
    font-family:'Oswald',sans-serif;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--steel);
    border-bottom:1px solid var(--line);
    padding:6px 4px;
  }
  table.records td{
    padding:7px 4px;
    border-bottom:1px solid var(--paper-dim);
    color:var(--ink);
  }
  table.records tr:last-child td{border-bottom:none;}
  .badge{
    display:inline-block;
    padding:2px 6px;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    background:var(--paper-dim);
    color:var(--steel);
  }
  .badge.on{background:var(--pine-soft);color:var(--pine);}
  .badge.off{background:var(--rust-soft);color:var(--rust);}
  .badge.warn{background:var(--warn-soft);color:var(--safety-dark);}
  .loading-note{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--steel);
    text-align:center;
    padding:12px 0;
  }