/* The operating UI stylesheet — split out of index.html in E012-6 (no rule change). */
  :root{
    --ground:#EFF2F1; --surface:#FFFFFF; --surface-2:#E6EBE9; --surface-3:#DCE3E0;
    --ink:#14181A; --ink-2:#4A5459; --ink-3:#78848A;
    --rule:#D2DAD7; --rule-strong:#B6C2BE;
    --accent:#0B6E6A; --accent-soft:#D7E8E6; --on-accent:#FFFFFF;
    --warn:#8A5205; --warn-edge:#C98A2A;
    --crit:#8E271D; --crit-edge:#C4574A;
    --good:#28603A; --good-soft:#D9E9DF; --good-edge:#4E9468;
    --font-display:Georgia,"Iowan Old Style","Times New Roman",serif;
    --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#0E1211; --surface:#161B1A; --surface-2:#1D2422; --surface-3:#242D2A;
      --ink:#E8EDEB; --ink-2:#A6B2AE; --ink-3:#75817D;
      --rule:#2A3230; --rule-strong:#3A4441;
      --accent:#4FBFB4; --accent-soft:#123330; --on-accent:#08201F;
      --warn:#D9A24A; --warn-edge:#8A6624;
      --crit:#E08074; --crit-edge:#8A443A;
      --good:#6FBF87; --good-soft:#15291C; --good-edge:#3C6B4B;
    }
  }
  /* The toggle's forced-dark mirror of the block above (E011-11). Both must
     move together — a token defined in one and not the other renders half a
     theme. The forced-light case needs no block: light IS the bare :root. */
  :root[data-theme="dark"]{
    --ground:#0E1211; --surface:#161B1A; --surface-2:#1D2422; --surface-3:#242D2A;
    --ink:#E8EDEB; --ink-2:#A6B2AE; --ink-3:#75817D;
    --rule:#2A3230; --rule-strong:#3A4441;
    --accent:#4FBFB4; --accent-soft:#123330; --on-accent:#08201F;
    --warn:#D9A24A; --warn-edge:#8A6624;
    --crit:#E08074; --crit-edge:#8A443A;
    --good:#6FBF87; --good-soft:#15291C; --good-edge:#3C6B4B;
  }
  *{box-sizing:border-box;}
  body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-ui);
       font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;}
  .wrap{max-width:760px; margin:0 auto; padding:28px 20px 72px; display:flex;
        flex-direction:column; gap:20px;}
  h1{font-family:var(--font-display); font-size:clamp(1.7rem,4vw,2.3rem); margin:0; font-weight:600;}
  .eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
           color:var(--ink-3); font-weight:600;}
  .lede{margin:6px 0 0; color:var(--ink-2); max-width:56ch;}
  .titlerow{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;}
  .periodpick{display:flex; align-items:center; gap:8px;}
  .periodpick span{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
                   color:var(--ink-3); font-weight:600;}
  .periodpick select,
  .periodpick input[type=month]{font-family:var(--font-mono); font-size:14px; font-weight:600;
    padding:8px 10px; border:1px solid var(--rule-strong); border-radius:2px;
    background:var(--surface); color:var(--ink);}
  /* The native calendar glyph is painted by the UA and ignores color-scheme on
     some builds, so it vanishes on the dark theme. Invert it there — following
     the same two-block shape as the palette above (media query for "system",
     explicit attribute for an operator who chose dark). Do NOT collapse these
     into one bare :root:not([data-theme=light]) rule: outside the media query
     that also matches the LIGHT theme and inverts the glyph in daylight. */
  .periodpick input[type=month]::-webkit-calendar-picker-indicator{cursor:pointer;}
  :root[data-theme="dark"] .periodpick input[type=month]::-webkit-calendar-picker-indicator{
    filter:invert(1);}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .periodpick input[type=month]::-webkit-calendar-picker-indicator{
      filter:invert(1);}
  }
  .periodpick select:focus-visible,
  .periodpick input[type=month]:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .needs{margin:10px 0 0; font-family:var(--font-mono); font-size:12.5px;
         color:var(--ink-3); line-height:1.7;}
  .needs b{color:var(--ink-2); font-weight:600;}
  .skurow{display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:center;
          padding:10px 0; border-bottom:1px solid var(--rule);}
  .skurow .meta{font-family:var(--font-mono); font-size:12px; color:var(--ink-3); line-height:1.6;}
  .skurow .meta b{color:var(--ink); font-weight:600;}
  .skurow input[type=text]{font-family:var(--font-mono); font-size:13px; padding:7px 9px;
     border:1px solid var(--rule-strong); border-radius:2px; background:var(--surface);
     color:var(--ink); width:100%;}
  /* NOT ".drop" — that class is the file drop-zone (dashed border, 26px padding)
     and a label carrying it would inherit the whole thing. */
  .skurow .skudrop{display:flex; align-items:center; gap:6px; font-size:12px;
     color:var(--ink-2); white-space:nowrap; cursor:pointer;}
  .skurow.dropped .meta, .skurow.dropped input{opacity:.4;}
  .finalpick{display:flex; align-items:center; gap:8px; margin:12px 0 0;
             font-size:13px; color:var(--ink-2); cursor:pointer;}
  .finalpick input{width:15px; height:15px; accent-color:var(--accent); cursor:pointer;}
  #asOfNote{margin:8px 0 0; font-family:var(--font-mono); font-size:12px;
            color:var(--ink-3); line-height:1.7;}
  #asOfNote b{color:var(--ink-2); font-weight:600;}
  .card{background:var(--surface); border:1px solid var(--rule); border-radius:3px;}
  .step-head{display:flex; align-items:center; gap:12px; padding:14px 20px;
             border-bottom:1px solid var(--rule);}
  .step-n{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none;
          font-family:var(--font-mono); font-size:12px; font-weight:700;
          background:var(--surface-3); color:var(--ink-2);}
  .card.done .step-n{background:var(--good-soft); color:var(--good);}
  .card.active .step-n{background:var(--accent); color:var(--on-accent);}
  .step-t{font-weight:650;}
  .step-s{margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--ink-3);}
  .body{padding:18px 20px;}

  .drop{border:1.5px dashed var(--rule-strong); border-radius:3px; padding:26px;
        text-align:center; color:var(--ink-3); font-size:13.5px; background:var(--surface-2);
        cursor:pointer;}
  .drop.over{border-color:var(--accent); background:var(--accent-soft);}
  .drop b{display:block; color:var(--ink); font-size:15px; margin-bottom:4px; font-weight:650;}
  .count{display:flex; align-items:center; gap:10px; margin-top:14px;
         font-family:var(--font-mono); font-size:13px;}
  .bar{flex:1; height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden;}
  .bar i{display:block; height:100%; width:0; background:var(--good-edge);}

  .panel{display:grid; grid-template-columns:4px 1fr; border:1px solid var(--rule);
         border-radius:3px; overflow:hidden; margin-top:14px;}
  .panel .stripe{background:var(--rule-strong);}
  .panel.bad .stripe{background:var(--crit-edge);}
  .panel.warn .stripe{background:var(--warn-edge);}
  .panel .p-body{padding:12px 15px;}
  .panel strong{font-size:13.5px;}
  .panel.bad strong{color:var(--crit);}
  .panel.warn strong{color:var(--warn);}
  .panel p{margin:4px 0 0; color:var(--ink-2); font-size:13px;}
  .panel ul{margin:6px 0 0; padding-left:18px; color:var(--ink-2); font-size:13px;}
  .panel code{font-family:var(--font-mono); font-size:12.5px; color:var(--ink);}

  .btn{font-family:var(--font-ui); font-size:14px; font-weight:650; padding:11px 20px;
       border-radius:2px; border:1px solid var(--accent); background:var(--accent);
       color:var(--on-accent); cursor:pointer;}
  .btn[disabled]{opacity:.45; cursor:not-allowed;}
  .btn-ghost{background:transparent; color:var(--accent); border-color:var(--rule-strong);}
  .btn:focus-visible,.drop:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .runline{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
  .runline .t{color:var(--ink-3); font-size:13px;}

  .result{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule);
          border:1px solid var(--rule); border-radius:3px; overflow:hidden; margin-bottom:16px;}
  .res{background:var(--surface); padding:20px;}
  .res .n{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:2.6rem;
          font-weight:600; line-height:1; letter-spacing:-.02em;}
  .res .n.zero{color:var(--good);}
  .res .lab{margin-top:6px; font-weight:600;}
  .res .sub{color:var(--ink-3); font-size:12.5px; margin-top:2px;}
  .dl{display:flex; flex-direction:column; gap:8px;}
  .dl button{display:flex; align-items:center; justify-content:space-between; gap:14px;
             width:100%; text-align:left; padding:13px 16px; border:1px solid var(--rule-strong);
             border-radius:2px; background:var(--surface-2); color:var(--ink);
             font-family:var(--font-ui); font-size:14px; font-weight:600; cursor:pointer;}
  .dl button:hover:not([disabled]){border-color:var(--accent);}
  .dl button[disabled]{opacity:.5; cursor:not-allowed;}
  .dl .f{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); font-weight:400;}
  .hidden{display:none !important;}
  .spin{display:inline-block; width:13px; height:13px; border:2px solid var(--rule-strong);
        border-top-color:var(--accent); border-radius:50%; animation:sp 1s linear infinite;}
  @keyframes sp{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion:reduce){.spin{animation:none;} *{transition:none !important;}}
  @media (max-width:600px){.result{grid-template-columns:1fr;}}
  /* E011-3 */
  .chip{display:inline-block; margin:1px 3px 1px 0; padding:1px 7px;
        border:1px solid var(--rule-strong); border-radius:9px; cursor:pointer;
        font-family:var(--font-mono); font-size:12px;}
  .chip:hover{border-color:var(--warn-edge); color:var(--warn);}
  .copybtn{margin-left:6px; padding:0 5px; font-size:11px; cursor:pointer;
           background:none; border:1px solid var(--rule-strong); border-radius:2px;
           color:inherit;}
  .copybtn:hover{border-color:var(--warn-edge);}
  .skurow.rowerr{outline:2px solid var(--crit-edge); outline-offset:4px;}

  /* Google sign-in button — Google's branding guidelines, not this app's tokens.
     Hardcoded hexes on purpose: the whole value of this button is that it looks
     the same here as everywhere else the user has seen it, so it must NOT follow
     our theme. The light variant is kept in dark mode too — white on our dark
     ground is the highest-contrast, most recognisable form. */
  #googleBtn{width:100%; margin-bottom:12px; height:40px; cursor:pointer;
             display:flex; align-items:center; justify-content:center; gap:12px;
             background:#FFFFFF; border:1px solid #747775; border-radius:4px;
             color:#1F1F1F; font-size:14px; font-weight:500; letter-spacing:.15px;
             font-family:"Roboto", "Helvetica Neue", Arial, sans-serif;}
  #googleBtn:hover{background:#F7F8F8; box-shadow:0 1px 2px rgba(60,64,67,.3);}
  #googleBtn:active{background:#F0F1F1;}
  #googleBtn:disabled{opacity:.6; cursor:default; box-shadow:none;}

  /* Pending EPB tasks (E018-13). Uses the sheet's own tokens; an earlier
     version invented .tbl/.num/--bad, none of which exist here, so the table
     rendered unstyled with an invalid colour. */
  .tasktbl{width:100%; border-collapse:collapse;}
  .tasktbl td{padding:9px 0; border-bottom:1px solid var(--rule);
              vertical-align:top;}
  .tasktbl tr:last-child td{border-bottom:none;}
  .tasktbl td.qty{text-align:right; white-space:nowrap; font-family:var(--font-mono);
                  font-variant-numeric:tabular-nums; font-weight:600;}
  .tasktbl .sub{color:var(--ink-3); font-size:12.5px; margin-top:2px; font-weight:400;}

  /* ── The tab bar (E019-1) ─────────────────────────────────────────────────
     A real navigation surface, not a card — the E018 pending-task list lived
     inside a card and was never seen. Sits directly under the header. */
  .tabs{display:flex; gap:4px; border-bottom:2px solid var(--rule);}
  .tab{font-family:var(--font-ui); font-size:14px; font-weight:650; cursor:pointer;
       padding:10px 18px; background:none; border:none; color:var(--ink-3);
       border-bottom:2px solid transparent; margin-bottom:-2px;}
  .tab:hover{color:var(--ink);}
  .tab.active{color:var(--accent); border-bottom-color:var(--accent);}
  .tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .tab-n{display:inline-block; min-width:20px; padding:0 6px; margin-left:4px;
         border-radius:10px; background:var(--surface-3); color:var(--ink-2);
         font-family:var(--font-mono); font-size:11.5px; font-weight:700;}
  .tab-n.warn{background:var(--warn-edge); color:var(--surface);}

  /* The Tasks view (E019-1). Stat tiles reuse .result/.res; the table gets
     its own grid because a plain .tasktbl row cannot hold the close controls. */
  .tstats{grid-template-columns:repeat(4, 1fr); margin-bottom:16px;}
  @media (max-width:600px){.tstats{grid-template-columns:1fr 1fr;}}
  .taskrow{display:grid; grid-template-columns:1fr auto; gap:4px 12px;
           padding:10px 0; border-bottom:1px solid var(--rule);}
  .taskrow:last-child{border-bottom:none;}
  .taskrow .meta{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3);
                 line-height:1.6;}
  .taskrow .meta b{color:var(--ink); font-weight:600;}
  .taskrow .act{font-size:13px; color:var(--ink-2);}
  .taskrow .closectl{display:flex; align-items:center; gap:8px; justify-content:flex-end;}
  .taskrow .closectl label{display:flex; align-items:center; gap:5px; font-size:12.5px;
                           color:var(--ink-2); cursor:pointer; white-space:nowrap;}
  .taskrow .closectl input[type=checkbox]{width:14px; height:14px;
                                          accent-color:var(--accent); cursor:pointer;}
  .taskrow input[type=text]{font-family:var(--font-mono); font-size:12.5px;
     padding:6px 8px; border:1px solid var(--rule-strong); border-radius:2px;
     background:var(--surface); color:var(--ink); width:240px; max-width:100%;}
  .taskrow.rowerr{outline:2px solid var(--crit-edge); outline-offset:3px;}
  .taskrow.isclosed{opacity:.6;}
  .taskgroup{margin:14px 0 4px; font-size:11px; letter-spacing:.14em;
             text-transform:uppercase; color:var(--ink-3); font-weight:600;}
  @media (max-width:600px){.taskrow{grid-template-columns:1fr;}
    .taskrow .closectl{justify-content:flex-start;}}

  /* Admin tab inputs (E019-6) — same face as the task-row inputs. */
  .admininput{font-family:var(--font-mono); font-size:13px; padding:8px 10px;
              border:1px solid var(--rule-strong); border-radius:2px;
              background:var(--surface); color:var(--ink);}
  #auEmail{width:220px;} #auNote{flex:1; min-width:140px;}