/* ==========================================================================
     DESIGN TOKENS
     Palette: cool "machine steel" chrome, warm paper workbench, one amber
     accent (shop safety-yellow). Health uses enamel green / amber / oxide red.
     ========================================================================== */
  :root {
    --steel-900:#191d23; --steel-800:#232a32; --steel-700:#303945; --steel-600:#3f4a58;
    --bg:#f2f4f7; --card:#ffffff; --line:#e3e7ec; --line-soft:#eef1f4;
    --ink:#171a1f; --muted:#48505a; --muted-soft:#6c7682;
    --amber:#f0a500; --amber-deep:#c98600; --amber-ink:#3a2c05;
    --green:#2f7d51; --green-bg:#e4f0e7;
    --yellow:#c98a12; --yellow-bg:#faefd6;
    --red:#c0453a; --red-bg:#f6e2df;
    /* Radius scale — everything snaps to these 3 (+ pill). sm=8 (6-9), md=10 (10-12), lg=14 (13-15). */
    --radius-sm:8px; --radius:10px; --radius-lg:14px;
    /* Spacing grid — the standard steps; off-grid 9/11/13 were normalized onto them. */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
    /* Type scale — half-pixel sizes eliminated (no real scale has .5 steps); these are the
       whole-px steps in use. (Body defaults to 14px above.) */
    --fs-xs:11px; --fs-sm:12px; --fs-base:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:20px; --fs-2xl:24px;
    --shadow:0 1px 2px rgba(25,29,35,.06), 0 6px 20px -12px rgba(25,29,35,.28);
    --shadow-lg:0 20px 50px -24px rgba(25,29,35,.45);
  }

  * { box-sizing:border-box; }
  html,body { margin:0; height:100%; }
  body {
    background:var(--bg); color:var(--ink);
    font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
    font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
    /* our own pull-to-refresh handles the top overscroll — stop the browser's
       native page-reload gesture from firing on top of it. */
    overscroll-behavior-y:contain;
  }
  .mono { font-family:'JetBrains Mono',ui-monospace,monospace; }
  a { color:inherit; }
  button { font-family:inherit; cursor:pointer; }
  ::selection { background:var(--amber); color:var(--amber-ink); }

  /* ---- App shell ---------------------------------------------------------- */
  .shell { display:grid; grid-template-columns:236px 1fr; min-height:calc(100vh / var(--z, 1)); }

  .sidebar {
    background:var(--steel-900); color:#cfd5dd; display:flex; flex-direction:column;
    position:sticky; top:0; height:calc(100vh / var(--z, 1));
  }
  .brand { padding:20px 20px 18px; border-bottom:1px solid rgba(255,255,255,.07); }
  .brand .logo {
    display:flex; align-items:center; gap:10px;
  }
  .brand .mark {
    width:30px; height:30px; border-radius:7px; display:grid; place-items:center;
    background:var(--amber); color:var(--amber-ink); flex:none;
    /* hazard corner — the one industrial flourish */
    box-shadow:0 0 0 3px rgba(240,165,0,.15);
  }
  .brand .mark svg { width:17px; height:17px; }
  .brand .name {
    font-family:'Oswald'; font-weight:600; font-size:17px; letter-spacing:.02em;
    color:#fff; line-height:1.05;
  }
  .brand .name small {
    display:block; font-family:'Inter'; font-weight:500; font-size:10px;
    letter-spacing:.14em; color:var(--amber); margin-top:2px;
  }

  .nav { padding:14px 12px; flex:1; overflow-y:auto; }
  .nav .group-label {
    font-family:'Oswald'; text-transform:uppercase; letter-spacing:.16em;
    font-size:10px; color:var(--muted-soft); padding:14px 10px 8px;
  }
  .nav button {
    width:100%; display:flex; align-items:center; gap:12px; text-align:left;
    background:transparent; border:0; color:#c3cad3; padding:8px 12px; border-radius:var(--radius-sm);
    font-size:13px; font-weight:500; transition:background .12s,color .12s; margin-bottom:2px;
  }
  .nav button svg { width:17px; height:17px; opacity:.85; flex:none; }
  .nav button:hover { background:rgba(255,255,255,.06); color:#fff; }
  .nav button.active { background:var(--steel-700); color:#fff; }
  .nav button.active svg { opacity:1; color:var(--amber); }
  .nav button .count {
    margin-left:auto; font-size:11px; font-weight:600; background:rgba(255,255,255,.1);
    color:#e7ebf0; border-radius:20px; padding:1px 8px; min-width:22px; text-align:center;
  }
  .area-nav { display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; margin:0 0 14px; padding:6px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
  .area-nav button { flex:1 0 auto; white-space:nowrap; border:1px solid #c7cfd9; background:#d7dde5; color:var(--ink); font:700 15px/1.2 Inter,sans-serif; padding:11px 18px; min-height:44px; border-radius:var(--radius-sm); cursor:pointer; }
  .area-nav button:hover { background:#cbd2dc; border-color:#b9c3ce; color:var(--ink); }
  .area-nav button.active { background:var(--amber); border-color:var(--amber-deep); color:var(--amber-ink); }

  .who {
    padding:14px 16px; border-top:1px solid rgba(255,255,255,.07);
    display:flex; align-items:center; gap:10px;
  }
  .who .av {
    width:32px; height:32px; border-radius:50%; background:var(--steel-600); color:#fff;
    display:grid; place-items:center; font-weight:600; font-size:13px; flex:none;
  }
  .who .meta { line-height:1.25; min-width:0; }
  .who .meta b { color:#fff; font-size:13px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .who .meta span { color:var(--muted-soft); font-size:11px; text-transform:capitalize; }

  .mobile-clockbar { display:none; }
  .menu-toggle { display:none; }
  .clock-screen { max-width:430px; }

  /* Pull-to-refresh indicator (touch). JS slides it down from the top edge as you
     pull, and spins it while the data re-loads. */
  .ptr {
    position:fixed; top:6px; left:50%; transform:translateX(-50%) translateY(0);
    z-index:90; width:34px; height:34px; border-radius:50%;
    background:var(--card); box-shadow:var(--shadow); display:grid; place-items:center;
    opacity:0; pointer-events:none; transition:opacity .15s ease, transform .2s ease;
  }
  .ptr-spin {
    width:18px; height:18px; border-radius:50%;
    border:2.5px solid var(--line); border-top-color:var(--amber);
  }
  .ptr.ready .ptr-spin { border-top-color:var(--green); }
  .ptr.spinning .ptr-spin { animation:ptr-rot .7s linear infinite; }
  @keyframes ptr-rot { to { transform:rotate(360deg); } }

  /* Notes reopen as a centered desktop window. Phones use the full viewport below so the
     keyboard and primary actions remain usable without carrying desktop sizing forward. */
  .note-editor {
    display:none; position:fixed; top:50%; left:50%; width:min(720px,calc(100vw - 48px));
    height:min(680px,calc(calc(100dvh / var(--z, 1)) - 48px)); transform:translate(-50%,-50%); z-index:200; background:#fff;
    border-radius:16px; box-shadow:var(--shadow);
    flex-direction:column; padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  }
  body.note-open { overflow:hidden; }
  body.note-open .note-editor { display:flex; }
  @media (max-width:720px) {
    .note-editor {
      top:0; left:0; width:100%; height:calc(100dvh / var(--z, 1)); transform:none; border-radius:0; box-shadow:none;
    }
  }
  /* 30-sep rework (Mathew): app style — white head, text in a card, dark primary Save, drawn icons. Sizes kept. */
  .note-editor { background:var(--bg); padding:0; overflow:hidden; box-shadow:var(--shadow-lg); border-radius:18px; }
  .ne-head { display:flex; align-items:center; gap:10px; margin:0 0 8px; flex:none; background:var(--card); border-bottom:1px solid var(--line); padding:calc(12px + env(safe-area-inset-top)) 14px 12px; }
  .note-editor .ne-head { margin:0; }
  .ne-head span { font-family:'Oswald',sans-serif; font-size:20px; font-weight:600; line-height:1.1; }
  .ne-title { flex:1; min-width:0; display:flex; flex-direction:column; }
  .ne-title small { color:var(--muted); font-size:12.5px; margin-top:2px; overflow-wrap:anywhere; }
  .ne-lang-wrap { position:relative; display:inline-flex; align-items:center; flex:none; margin-left:auto; color:var(--amber-ink); }
  .ne-lang-i { position:absolute; left:14px; pointer-events:none; }
  /* Orange, wider, taller so a tech actually notices the voice-language picker (Joe 2026-07-17). */
  .ne-lang { appearance:none; -webkit-appearance:none; padding:0 16px 0 40px; border:2px solid var(--amber-deep); font-size:15px; font-weight:700; font-family:inherit; background:var(--amber); color:var(--amber-ink); border-radius:999px; min-height:48px; max-width:210px; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }
  .ne-x { width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; background:#fff; border:1px solid var(--line); color:var(--muted); cursor:pointer; padding:0; font-size:26px; line-height:1; }
  .ne-lang:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
  #noteEditorText {
    flex:1; min-height:0; width:100%; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); background:var(--card); padding:16px;
    font-size:22px; line-height:1.6; font-family:inherit; resize:none; color:var(--ink);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  #noteEditorText:focus { border-color:var(--amber-line, #edc46e); box-shadow:0 0 0 3px rgba(240,165,0,.18); outline:none; }
  .note-editor #noteEditorText, .note-editor .ne-verify, .note-editor .ne-hint { margin-left:14px; margin-right:14px; width:auto; }
  .note-editor .ne-verify { margin-top:12px; }
  .note-editor #noteEditorText { margin-top:12px; }
  .ne-hint { font-size:14px; color:var(--muted); text-align:center; margin:8px 0 4px; flex:none; }
  .ne-foot { display:flex; align-items:center; gap:12px; margin-top:4px; flex:none; }
  .note-editor .ne-foot { background:var(--card); border-top:1px solid var(--line); padding:12px 14px calc(12px + env(safe-area-inset-bottom)); gap:10px; }
  .ne-i { flex:none; }
  .ne-i-spark { color:var(--amber-deep); }
  .ne-clean, .ne-done { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
  .ne-mic {
    width:64px; height:64px; border-radius:50%; flex:none; cursor:pointer;
    background:var(--steel-900); border:1px solid var(--steel-900); color:#fff; box-shadow:0 6px 18px -8px rgba(25,29,35,.6);
    display:grid; place-items:center; transition:transform .1s;
  }
  .ne-mic:active { transform:scale(.94); }
  .ne-mic.listening { background:var(--red); border-color:var(--red); color:#fff; animation:nePulse 1.2s infinite; }
  @keyframes nePulse { 0%,100%{ box-shadow:0 0 0 0 rgba(192,69,58,.5);} 50%{ box-shadow:0 0 0 12px rgba(192,69,58,0);} }
  .ne-done {
    flex:1; padding:18px; border:none; border-radius:12px; cursor:pointer;
    background:var(--amber); color:var(--amber-ink); font-size:18px; font-weight:700; font-family:inherit;
  }
  /* ✨ Fix wording — SECONDARY helper next to Save. Gray so Save (amber) is clearly the main action. */
  .ne-clean {
    flex:1; min-height:64px; padding:12px 10px; border:1px solid var(--line); border-radius:var(--radius-lg); cursor:pointer;
    background:#fff; color:var(--ink); font-size:16px; font-weight:700; font-family:inherit;
    white-space:nowrap; transition:transform .1s;
  }
  .ne-clean:active { transform:scale(.96); }
  .ne-clean.working { opacity:.6; cursor:default; animation:nePulse 1.2s infinite; }
  .ne-clean:disabled { cursor:default; }
  /* After a clean: the SAME button becomes the "I agree — send it" tap (solid green). */
  .ne-clean.agreed { background:var(--green); color:#fff; border-color:var(--green); }
  .ne-clean.agreed .ne-i-spark { color:#fff; }
  .note-editor .ne-done { min-height:64px; padding:12px; border-radius:var(--radius-lg); background:var(--steel-900); color:#fff; border:1px solid var(--steel-900); font-size:17px; transition:transform .18s ease,box-shadow .18s ease; }
  .note-editor .ne-done:hover, .note-editor .ne-clean:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
  @media (max-width:720px) {
    .note-editor { border-radius:0; box-shadow:none; }
    .ne-head span { font-size:18px; white-space:nowrap; }
    .note-editor .ne-foot { display:grid; grid-template-columns:auto 1fr; } .note-editor .ne-done { grid-column:1/-1; }
  }
  @media (prefers-reduced-motion:reduce) { .note-editor .ne-done, .note-editor .ne-clean, .ne-lang { transition:none; } }
  /* "Verify in your own language" banner — the clean line in the tech's language, shown
     above the English record line so he can confirm the AI understood him. */
  .ne-verify { flex:none; margin:6px 2px 0; padding:8px 12px; border:1px solid var(--green);
    border-radius:9px; background:var(--green-bg); color:var(--ink); font-size:14px;
    line-height:1.35; max-height:calc(26vh / var(--z, 1)); overflow:auto; }
  .ne-verify-lab { display:block; font-size:11px; font-weight:700; color:var(--green); margin-bottom:2px; }

  /* Team Notes drawer: one scroll surface, full-width editors, and reachable guidance/actions. */
  .team-note-editor { width:100%; min-width:0; padding-bottom:env(safe-area-inset-bottom); }
  .team-note-help { margin:0 0 12px; color:var(--muted); font-size:12px; line-height:1.45; }
  .team-note-help-bottom { margin:14px 0 0; padding-bottom:8px; }
  .team-note-scroll { width:100%; min-width:0; }
  .team-note-row { padding:14px; margin-bottom:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); display:flex; flex-direction:column; gap:10px; min-width:0; }
  .team-note-row:last-child { margin-bottom:0; }
  .team-note-current { margin-top:12px; }
  .team-note-current > label { font-size:12px; font-weight:600; }
  .team-note-id { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
  .team-note-id .label { font-weight:600; font-size:13px; min-width:0; overflow-wrap:anywhere; }
  .team-note-id .stamp { color:var(--muted); font-size:11px; white-space:nowrap; flex:none; font-family:'JetBrains Mono',monospace; }
  .team-note-text { white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; font-size:16px; line-height:1.45; background:#fff; }
  .team-note-textarea { display:block; box-sizing:border-box; width:100%; min-width:0; min-height:96px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; color:var(--ink); background:#fff; font:inherit; font-size:16px; line-height:1.45; resize:none; overflow:hidden; }
  .team-note-textarea:focus { border-color:var(--amber-deep); outline:2px solid rgba(240,165,0,.22); outline-offset:1px; }
  .team-note-btn { align-self:flex-end; width:auto; min-width:112px; min-height:40px; justify-content:center; }
  .team-note-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:4px; }
  .team-note-actions .btn { min-width:64px; justify-content:center; }
  .team-note-actions .btn:disabled { opacity:.42; cursor:not-allowed; }

  /* ---- Customer-note editor -------------------------------------------------
     Its own class (not .note-editor) so the clock note editor's open/close state can
     never put both on screen at once. It reuses the .ne-* head/foot/button styling above.
     z-index sits ABOVE the drawer (50) but BELOW .confirm-ov (120), so the "Discard this
     note?" warning is always visible on top of the editor it belongs to. */
  .cnote-editor {
    display:none; position:fixed; top:50%; left:50%; width:min(640px,calc(100vw - 48px));
    height:min(620px,calc(calc(100dvh / var(--z, 1)) - 48px)); transform:translate(-50%,-50%); z-index:100; background:var(--bg);
    border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden;
    flex-direction:column; padding:0;
  }
  body.cnote-open { overflow:hidden; }
  body.cnote-open .cnote-editor { display:flex; }
  /* Phones get the whole viewport — the note is typed above the keyboard, not in a 13px box. */
  @media (max-width:720px) {
    .cnote-editor {
      top:0; left:0; width:100%; height:calc(100dvh / var(--z, 1)); transform:none; border-radius:0; box-shadow:none;
    }
  }
  #custNoteText {
    flex:1; min-height:0; width:auto; margin:0 14px; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); background:var(--card); padding:16px;
    font-size:20px; line-height:1.5; font-family:inherit; resize:none; color:var(--ink);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  #custNoteText:focus { border-color:#edc46e; box-shadow:0 0 0 3px rgba(240,165,0,.18); outline:none; }
  /* 30-sep rework: the text card carries the picked kind's color on its left edge. */
  .cnote-editor:has(#custNoteKind_good.on) #custNoteText { border-left:4px solid var(--green); }
  .cnote-editor:has(#custNoteKind_bad.on) #custNoteText { border-left:4px solid var(--red); }
  .cnote-editor:has(#custNoteKind_flag.on) #custNoteText { border-left:4px solid var(--amber); }
  .cnote-editor .ne-head { margin:0 0 12px; }
  .cnote-editor .ne-hint { margin:8px 14px 4px; }
  .cnote-editor .ne-foot { display:grid; grid-template-columns:1fr 1.4fr; background:var(--card); border-top:1px solid var(--line); padding:12px 14px calc(12px + env(safe-area-inset-bottom)); gap:10px; margin-top:8px; }
  .cnote-editor .ne-done { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:64px; padding:12px; border-radius:var(--radius-lg); background:var(--steel-900); color:#fff; border:1px solid var(--steel-900); font-size:17px; transition:transform .18s ease,box-shadow .18s ease; }
  .cnote-editor .ne-done:hover, .cnote-editor .cnote-cancel:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
  /* Kind stays picked while you type — chips, so it's one tap on a phone, not a dropdown. */
  .cnote-kinds { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:0 14px 10px; flex:none; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:5px; }
  .cnote-kind {
    min-height:48px; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 6px; border:1px solid transparent; border-radius:var(--radius); cursor:pointer;
    background:transparent; color:var(--muted); font-size:14px; font-weight:600; font-family:inherit;
  }
  .cnote-kind.on { border-color:var(--amber-deep); background:var(--amber); color:var(--amber-ink); }
  .cnote-kind.good.on { border-color:var(--green); background:var(--green); color:#fff; }
  .cnote-kind.bad.on  { border-color:var(--red);   background:var(--red);   color:#fff; }
  .cnote-kind.flag.on { border-color:var(--amber-deep); background:var(--amber); color:var(--amber-ink); }
  .cnote-kind.flag { background:transparent; border-color:transparent; color:var(--muted); padding:0 6px; margin:0; font-size:14px; } /* the generic .flag alert style must not leak into the kind picker */
  .cnote-cancel {
    flex:none; min-width:104px; min-height:64px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-lg);
    cursor:pointer; background:#fff; transition:transform .18s ease,box-shadow .18s ease; color:var(--ink); font-size:16px; font-weight:700; font-family:inherit;
  }
  /* The Add-note action on the Customer card — full width so it reads as the next tap. */
  .cnote-add {
    display:block; width:100%; margin:0 0 10px; padding:12px; border:none; border-radius:var(--radius-sm);
    background:var(--amber); color:var(--amber-ink); font-size:15px; font-weight:700; font-family:inherit; cursor:pointer;
  }

  /* Note-required warning, flashed IN the comments box (not a bottom toast). It shakes
     once to grab attention, then KEEPS pulsing until they tap the box to enter a note. */
  .note-box.note-flash {
    border-color:var(--red) !important; background:rgba(192,69,58,.06) !important;
    animation:noteShake .45s ease, noteFlashPulse 1.1s .45s ease-in-out infinite;
  }
  @keyframes noteShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
  @keyframes noteFlashPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(192,69,58,0);} 50%{ box-shadow:0 0 0 5px rgba(192,69,58,.30);} }
  .note-box-err { color:var(--red); font-size:13px; font-weight:600; text-align:center; margin-top:7px; animation:noteErrBlink 1.1s ease-in-out infinite; }
  @keyframes noteErrBlink { 0%,100%{opacity:1} 50%{opacity:.45} }
  /* Clock-screen merged box: the ORANGE "waiting" state pulses so an untasked tech can't miss it
     (it sits at 0:00:00). Cleared the instant a task is picked (the class is only rendered in orange). */
  .clock-box { transition:background .2s ease; }
  .clock-box.clock-flash { animation:clockBoxFlash 1s ease-in-out infinite; }
  @keyframes clockBoxFlash { 0%,100%{ box-shadow:0 0 0 0 rgba(240,165,0,0); filter:brightness(1); } 50%{ box-shadow:0 0 0 5px rgba(240,165,0,.35); filter:brightness(1.06); } }
  /* Clock action buttons NEVER disappear between states — the layout stays put. A button you CAN
     use right now is raised + gently pulsing (is-on) so it stands out; one you can't is flat white
     and unclickable (is-off). Same idea for the vehicle rows in the car list. */
  .clk-btn { font-size:15px; font-weight:700; padding:20px 4px; border:none; border-radius:var(--radius-lg);
             font-family:inherit; text-align:center; line-height:1.2; cursor:pointer;
             transition:box-shadow .18s ease, transform .18s ease, background .18s ease, color .18s ease; }
  .clk-btn.is-off { background:var(--card); color:var(--muted); border:1px solid var(--line);
                    box-shadow:none; opacity:.6; cursor:default; pointer-events:none; animation:none; transform:none; }
  .clk-btn.is-on  { box-shadow:0 4px 12px rgba(0,0,0,.16); animation:clkPulse 1.8s ease-in-out infinite; }
  @keyframes clkPulse { 0%,100%{ box-shadow:0 4px 12px rgba(0,0,0,.16); }
                         50%   { box-shadow:0 8px 18px rgba(0,0,0,.24); } }
  /* Vehicle rows in the car-select list — raised so they read as tappable options. */
  .clk-car { box-shadow:0 3px 9px rgba(0,0,0,.12); transition:box-shadow .18s ease, transform .18s ease; }
  .clk-car:active { transform:translateY(1px); box-shadow:0 2px 6px rgba(0,0,0,.14); }
  /* Big bars (the note box + the vehicle search) — raised AND gently flashing when they're an active
     option to choose. Shadow-only pulse (no transform) so these large elements don't jump the layout. */
  .clk-attn { box-shadow:0 4px 12px rgba(0,0,0,.16); animation:clkAttn 1.7s ease-in-out infinite; }
  @keyframes clkAttn { 0%,100%{ box-shadow:0 4px 12px rgba(0,0,0,.16); } 50%{ box-shadow:0 8px 20px rgba(0,0,0,.24); } }
  /* Tech mode — a stripped, full-screen clock app: no topbar, white fill, buttons
     pushed into the thumb zone so it fills the screen simply. */
  .tech-mode .main, .tech-mode .content { background:#fff; }
  .tech-mode .content { padding-top:16px; }
  .tech-mode .clock-screen { max-width:none; min-height:calc(calc(100dvh / var(--z, 1)) - 132px); display:flex; flex-direction:column; }
  .tech-mode .clock-screen > .card { flex:1; display:flex; flex-direction:column; }
  .tech-mode .clock-timer { flex:1; display:flex; flex-direction:column; justify-content:center; margin:0; }
  .tech-mode .clock-actions button { min-height:60px; }
  .clock-widget { padding:0 16px 14px; }
  .clock-widget .status { font-size:11px; color:var(--muted-soft); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
  .clock-widget .status .dot { width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; }
  /* Sidebar clock card (29-sep): status + steady timer on one line, what you're on below, two buttons. */
  .cw-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:10px 12px; margin-bottom:8px; cursor:pointer; }
  .cw-card:hover { background:rgba(255,255,255,.09); }
  .cw-top { display:flex; align-items:center; gap:7px; }
  .cw-top .dot { width:8px; height:8px; border-radius:50%; flex:none; }
  .cw-state { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-soft); }
  .cw-time { margin-left:auto; font-family:'Oswald'; font-weight:600; font-size:20px; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
  .cw-on { margin-top:4px; color:#e6e9ee; font-size:12.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .cw-actions { display:flex; gap:6px; }
  .cw-sep { display:inline-block; width:.35em; text-align:center; transition:opacity .2s; }
  .cw-sep.off { opacity:.25; }
  .clockWidgetTimer { font-variant-numeric:tabular-nums; }
  .cw-actions .btn { flex:1; justify-content:center; }
  /* Profile row: one button, full name (up to 2 lines), role, chevron. */
  .who { padding:8px 10px; }
  .who-btn { display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; border-radius:10px; padding:8px; color:inherit; font:inherit; text-align:left; cursor:pointer; }
  .who-btn:hover, .who-btn:focus-visible { background:rgba(255,255,255,.07); }
  .who .meta b { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .who-chev { margin-left:auto; color:var(--muted-soft); flex:none; }
  .nav .nav-settings { margin-top:6px; }

  /* ---- Main --------------------------------------------------------------- */
  .main { min-width:0; }

  .content { padding:26px 30px 60px; max-width:1180px; overflow-x:clip; }
  /* Time screen: a darker grey behind the white cards, so the screen reads with more depth.
     Owner/manager/admin only — technicians keep the white tech-mode fill (rule above). */
  body.clock-view:not(.tech-mode) .main,
  body.clock-view:not(.tech-mode) .content { background:#dde3ea; }

  /* ---- Reusable bits ------------------------------------------------------ */
  .card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
  .pad { padding:20px; }
  .grid { display:grid; gap:16px; }
  .eyebrow {
    font-family:'Oswald'; text-transform:uppercase; letter-spacing:.16em; font-size:11px;
    font-weight:600; color:var(--muted);
  }
  .section-head { display:flex; align-items:flex-end; justify-content:space-between; margin:6px 2px 14px; gap:16px; }
  .section-head h2 { font-family:'Oswald'; font-weight:600; font-size:19px; margin:0; }
  .section-head p { margin:2px 0 0; color:var(--muted); font-size:12px; }

  .btn {
    /* GRAY (default/secondary): filled one shade darker than the page background so a plain
       button clearly reads as clickable instead of blending into the card. */
    border:1px solid #c7cfd9; background:#d7dde5; color:var(--ink);
    border-radius:var(--radius-sm); padding:8px 12px; font-size:13px; font-weight:600; transition:.12s;
    display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px;
  }
  .btn:hover { background:#cbd2dc; border-color:#b9c3ce; }
  /* Disabled controls look disabled everywhere (was: identical to enabled). */
  .btn:disabled, .btn[disabled] { opacity:.45; cursor:not-allowed; }
  .btn:disabled:hover, .btn[disabled]:hover { background:#d7dde5; border-color:#c7cfd9; }
  .btn.gray { background:#d7dde5; border-color:#c7cfd9; color:var(--ink); }
  .btn.gray:hover { background:#cbd2dc; border-color:#b9c3ce; }
  /* --- Button color language (Joe, 2026-07-15): only 4 colors so a button always reads as
     clickable. ORANGE = the main action · GREEN = go/positive · RED = destructive ·
     GRAY = secondary / cancel / navigate. Existing semantic classes map onto these:
     primary+dark → orange, danger → red, ghost/default → gray. --- */
  .btn.primary, .btn.dark, .btn.orange { background:var(--amber); border-color:var(--amber-deep); color:var(--amber-ink); }
  .btn.primary:hover, .btn.dark:hover, .btn.orange:hover { background:var(--amber-deep); color:#fff; }
  .btn.green { background:var(--green); border-color:var(--green); color:#fff; }
  .btn.green:hover { background:#276a44; border-color:#276a44; color:#fff; }
  /* ghost = gray too — filled a shade darker than the background so secondary buttons
     (Cancel, Set/Reset PIN, etc.) clearly read as clickable instead of vanishing. */
  .btn.ghost { background:#d7dde5; border-color:#c7cfd9; color:var(--ink); }
  .btn.ghost:hover { background:#cbd2dc; border-color:#b9c3ce; }
  .btn.btn-photo { background:#2f6d9e; border-color:#2f6d9e; color:#fff; }
  .btn.btn-photo:hover { background:#295f8a; border-color:#295f8a; color:#fff; }

  /* Public customer share page (no login) */
  #shareView { min-height:calc(100vh / var(--z, 1)); background:var(--bg); }
  .share-wrap { max-width:760px; margin:0 auto; padding:24px 16px 48px; }
  .share-head { text-align:center; margin-bottom:22px; }
  .share-brand { font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.04em; color:var(--amber-deep); font-size:14px; text-transform:uppercase; }
  .share-head h1 { font-family:'Oswald',sans-serif; font-weight:600; font-size:26px; margin:6px 0 4px; }
  .share-head p { color:var(--muted); font-size:13px; margin:0; }
  .share-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:26px; text-align:center; color:var(--muted); }
  .share-card h2 { font-family:'Oswald',sans-serif; margin:0 0 6px; color:var(--ink); }
  .share-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .share-item { position:relative; display:block; border-radius:var(--radius); overflow:hidden; background:#000; border:1px solid var(--line); aspect-ratio:1; text-decoration:none; }
  .share-item img, .share-item video { width:100%; height:100%; object-fit:cover; display:block; }
  .share-item .share-at { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent,rgba(0,0,0,.72)); color:#fff; font-size:11px; padding:14px 8px 6px; }
  .share-foot { text-align:center; color:var(--muted-soft); font-size:12px; margin-top:26px; }
  .btn.sm { padding:5px 10px; font-size:12px; min-height:32px; }
  /* RED = destructive (Archive, Delete, Void, Decline, Clock out). danger + red are the same. */
  .btn.danger, .btn.red { background:var(--red); border-color:var(--red); color:#fff; }
  .btn.danger:hover, .btn.red:hover { background:#a63a30; border-color:#a63a30; color:#fff; }
  /* "trash" = the subtle destructive treatment for small inline delete/remove-a-saved-item
     icons: compact, red text on the ghost pill, going solid red on hover. One class replaces
     the copy-pasted inline padding/red styles so every small delete looks identical. */
  .btn.trash { color:var(--red); }
  .btn.trash:hover { background:var(--red); border-color:var(--red); color:#fff; }
  .btn.sm.trash { padding:2px 7px; min-height:0; }
  .parts-search-filters { display:grid; grid-template-columns:minmax(260px,2fr) repeat(2,minmax(155px,1fr)); gap:8px; margin-bottom:12px; }
  .parts-search-filters.has-cost { grid-template-columns:minmax(260px,2fr) repeat(2,minmax(155px,1fr)) repeat(2,minmax(140px,1fr)); }
  .parts-date-filter { display:grid; gap:3px; color:var(--muted); font-size:11px; font-weight:600; }
  .parts-date-filter input { min-width:0; }
  .invoice-void-action { min-width:120px; min-height:44px; padding:10px 18px; font-size:14px; }

  .pill {
    display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
    border-radius:20px; padding:3px 10px; white-space:nowrap; text-transform:capitalize;
  }
  .tech-now { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .tech-now-task, .tech-now-elapsed { color:var(--muted); font-size:12px; }
  /* Phone-only Team cards. On desktop the Team TABLE is the real layout and these never
     render — the responsive block below swaps which of the two is visible. */
  .team-cards { display:none; }
  .pill .dot { width:7px; height:7px; border-radius:50%; }
  .pill.green  { background:var(--green-bg);  color:var(--green); }
  .pill.green .dot  { background:var(--green); }
  .pill.yellow { background:var(--yellow-bg); color:var(--yellow); }
  .pill.yellow .dot { background:var(--yellow); }
  .pill.red    { background:var(--red-bg);    color:var(--red); }
  .pill.red .dot    { background:var(--red); }
  .pill.neutral{ background:var(--bg); color:var(--muted); }
  .pill.neutral .dot{ background:var(--muted-soft); }

  .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
  .kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px 14px; }
  .payroll-summary { background:#fff1d6; border:2px solid var(--amber); border-radius:var(--radius-lg); padding:10px; box-shadow:0 6px 18px -14px rgba(201,134,0,.72); }
  .payroll-summary .kpi { background:#fffaf0; border-color:#edc46e; }
  .payroll-summary .kpi .lab { color:var(--amber-ink); }
  .kpi.click { cursor:pointer; transition:border-color .12s, box-shadow .12s, transform .12s; }
  .kpi.click:hover { border-color:var(--amber); box-shadow:var(--shadow); transform:translateY(-1px); }
  .health-banner.click { transition:box-shadow .12s; }
  .health-banner.click:hover { box-shadow:var(--shadow); }
  .card.click { cursor:pointer; transition:box-shadow .12s; }
  .card.click:hover { box-shadow:var(--shadow); }
  /* Clickable list rows (e.g. Job Info charge lines) — so they read as tappable. */
  .line.click { cursor:pointer; border-radius:6px; transition:background .12s; }
  .line.click * { cursor:pointer; }  /* iOS Safari: tapping a child still fires the row's onclick */
  .line.click:hover { background:var(--bg); }
  .kpi .lab { color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
  .kpi .val { font-family:'Oswald'; font-weight:600; font-size:28px; margin-top:5px; line-height:1; }
  .kpi .foot { color:var(--muted); font-size:11px; margin-top:7px; }
  .kpi .foot b { color:var(--ink); }

  .today-action-rail {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 20px; align-items:center;
    margin-bottom:20px; padding:20px 22px; background:var(--card); border:1px solid var(--line);
    border-left:6px solid var(--amber); border-radius:var(--radius); box-shadow:var(--shadow);
  }
  .today-action-rail.is-critical { border-left-color:var(--red); }
  .today-action-rail.is-clear { border-left-color:var(--green); }
  .today-action-rail.is-unavailable { border-left-color:var(--muted-soft); }
  .today-action-copy { min-width:0; }
  .today-action-copy h2 { margin:3px 0 4px; font-family:'Oswald'; font-size:23px; font-weight:600; line-height:1.15; }
  .today-action-copy p { margin:0; color:var(--muted); font-size:13px; }
  .today-action-primary { min-width:154px; justify-content:center; }
  .today-action-others { grid-column:1/-1; border-top:1px solid var(--line-soft); padding-top:10px; }
  .today-action-others summary { cursor:pointer; color:var(--muted); font-weight:600; font-size:13px; }
  .today-action-list { margin-top:9px; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
  .today-action-row { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; text-align:left; background:var(--card); color:var(--ink); border:0; border-bottom:1px solid var(--line-soft); cursor:pointer; }
  .today-action-row:last-child { border-bottom:0; }
  .today-action-row:hover { background:var(--bg); }
  .today-action-row b, .today-action-row small { display:block; }
  .today-action-row small { margin-top:2px; color:var(--muted); font-size:12px; }

  table { width:100%; border-collapse:collapse; }
  th {
    text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
    font-weight:600; padding:12px 14px; border-bottom:1px solid var(--line); font-family:'Oswald';
  }
  td { padding:14px 14px; border-bottom:1px solid var(--line-soft); font-size:15px; vertical-align:middle; }
  /* Dense table: tighter rows so hundreds of customers scan fast. */
  table.dense th { padding:8px 14px; }
  table.dense td { padding:8px 14px; }
  .payroll-table th, .payroll-table td { vertical-align:top; }
  .payroll-table th:not(:first-child), .payroll-table td:not(:first-child) { text-align:right; }
  .payroll-table th:not(:first-child), .payroll-table td:not(:first-child) { white-space:nowrap; }
  .payroll-table td:first-child .btn { margin-top:6px; }
  tr:last-child td { border-bottom:0; }
  tbody tr.click { cursor:pointer; }
  /* iOS Safari won't fire a row's onclick when you tap a child that isn't itself
     "clickable" — giving the cells + their contents cursor:pointer fixes tap-to-open. */
  tbody tr.click td, tbody tr.click td * { cursor:pointer; }
  tbody tr.click:hover { background:#faf9f6; }
  .t-strong { font-weight:600; }
  .t-mut { color:var(--muted); }

  .health-banner {
    border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
    box-shadow:var(--shadow); background:var(--card); position:relative;
  }
  .health-banner .stripe { height:6px; width:100%; }
  .stripe.green  { background:repeating-linear-gradient(-45deg,var(--green),var(--green) 12px,#2b7049 12px,#2b7049 24px); }
  .stripe.yellow { background:repeating-linear-gradient(-45deg,var(--amber),var(--amber) 12px,var(--steel-900) 12px,var(--steel-900) 24px); }
  .stripe.red    { background:repeating-linear-gradient(-45deg,var(--red),var(--red) 12px,var(--steel-900) 12px,var(--steel-900) 24px); }
  .health-body { padding:22px 24px; display:flex; gap:22px; align-items:flex-start; }
  .gauge { flex:none; width:96px; text-align:center; }
  .gauge .ring {
    width:96px; height:96px; border-radius:50%; display:grid; place-items:center;
    font-family:'Oswald'; font-weight:700; text-transform:uppercase; font-size:14px; letter-spacing:.05em;
    color:#fff;
  }
  .gauge.green .ring  { background:radial-gradient(circle at 30% 25%, #4a9e6d, var(--green)); }
  .gauge.yellow .ring { background:radial-gradient(circle at 30% 25%, #e6ad3e, var(--yellow)); }
  .gauge.red .ring    { background:radial-gradient(circle at 30% 25%, #d16257, var(--red)); }
  .health-copy { flex:1; min-width:0; }
  .health-copy .factor { font-family:'Oswald'; font-size:20px; font-weight:600; margin:2px 0 6px; }
  .health-copy .explain { color:var(--ink); font-size:14px; }
  .health-copy .suggest {
    margin-top:14px; background:var(--bg); border-left:3px solid var(--amber); border-radius:0 8px 8px 0;
    padding:12px 14px; font-size:13px;
  }
  .health-copy .suggest b { font-family:'Oswald'; letter-spacing:.06em; text-transform:uppercase; font-size:11px; color:var(--amber-deep); display:block; margin-bottom:3px; }
  /* Same "suggested next step" treatment, usable anywhere (job/estimate cards) — not scoped to the dashboard banner. */
  .suggest-inline {
    margin-top:10px; background:var(--bg); border-left:3px solid var(--amber); border-radius:0 8px 8px 0;
    padding:8px 12px; font-size:12px;
  }
  .suggest-inline b { font-family:'Oswald'; letter-spacing:.06em; text-transform:uppercase; font-size:10px; color:var(--amber-deep); display:block; margin-bottom:3px; }

  /* ---- Kanban ------------------------------------------------------------- */
  body.jobs-view .content { max-width:none; }
  .board { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:10px; overflow-x:visible; padding:0 2px 8px; }
  .col { background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; min-height:120px; min-width:0; }
  .col-head { padding:12px 12px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; }
  .col-head .cname { font-family:'Oswald'; text-transform:uppercase; letter-spacing:.05em; font-size:12px; font-weight:600; }
  .col-head .cnum { margin-left:auto; font-size:11px; font-weight:600; color:var(--muted); background:var(--bg); border-radius:20px; padding:1px 8px; }
  .col-body { padding:10px; display:flex; flex-direction:column; gap:8px; }
  .jobcard { background:var(--card); border:1px solid var(--line); border-radius:9px; padding:12px; box-shadow:var(--shadow); cursor:pointer; transition:.12s; min-width:0; overflow:hidden; }
  .jobcard:hover { border-color:var(--muted-soft); transform:translateY(-1px); }
  .jobcard .veh { font-weight:600; font-size:13px; line-height:1.3; overflow-wrap:anywhere; }
  .jobcard .cust { color:var(--muted); font-size:12px; margin-top:2px; line-height:1.3; overflow-wrap:anywhere; }
  .jobcard .row { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:10px; }
  .jobcard .row .pill { white-space:nowrap; }
  .manual-health-pin { display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:999px;padding:1px 5px;font:700 9px/1.2 'Oswald';letter-spacing:.06em;white-space:nowrap; }
  .jobcard .tech { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px; white-space:nowrap; }
  .jobcard .tech .av { width:19px; height:19px; border-radius:50%; background:var(--steel-700); color:#fff; display:grid; place-items:center; font-size:9px; font-weight:600; }
  .col-empty { color:var(--muted-soft); font-size:12px; text-align:center; padding:14px 8px; }
  .jc-move { display:flex; gap:6px; margin-top:8px; }
  .jc-arrow { flex:1; border:0.5px solid var(--line); background:var(--bg); color:var(--muted); border-radius:7px; padding:5px 0; min-height:38px; font-size:16px; line-height:1; cursor:pointer; font-family:inherit; }
  .jc-arrow:hover:not(:disabled) { background:var(--amber); border-color:var(--amber-deep); color:var(--amber-ink); }
  .jc-arrow:disabled { opacity:.3; cursor:default; }

  /* ---- Vehicle color tag + stale-job alert --------------------------------- */
  .veh-dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; margin-right:6px; border:1px solid rgba(0,0,0,.15); vertical-align:middle; }
  .color-picker { width:22px; height:22px; padding:0; border:1px solid var(--line); border-radius:6px; cursor:pointer; background:none; flex:none; }
  .color-picker::-webkit-color-swatch-wrapper { padding:2px; }
  .color-picker::-webkit-color-swatch { border:none; border-radius:4px; }
  .stale-badge {
    display:inline-flex; align-items:center; margin-left:7px;
    background:var(--red-bg); color:var(--red); font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:20px;
    animation: staleBlink 1.1s ease-in-out infinite;
  }
  @keyframes staleBlink { 0%,100% { opacity:1; } 50% { opacity:.25; } }

  /* ---- Detail drawer ------------------------------------------------------ */
  .overlay { position:fixed; inset:0; background:rgba(20,24,30,.44); z-index:40; opacity:0; pointer-events:none; transition:opacity .18s; }
  .overlay.open { opacity:1; pointer-events:auto; }
  .drawer {
    position:fixed; top:0; right:0; height:calc(100dvh / var(--z, 1)); width:736px; max-width:94vw; background:var(--bg);
    z-index:50; transform:translateX(100%); transition:transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  }
  .drawer.open { transform:none; }
  body.review-mode .drawer {
    top:var(--review-header-height,30px);
    height:calc(calc(100dvh / var(--z, 1)) - var(--review-header-height,30px) - var(--review-bar-height,54px));
  }
  .drawer-head { background:var(--card); border-bottom:1px solid var(--line); padding:18px 22px; display:flex; align-items:flex-start; gap:12px; flex:none; }
  .drawer-head h3 { font-family:'Oswald'; font-weight:600; font-size:19px; margin:0; }
  .drawer-title-row { display:flex;align-items:center;gap:10px;flex-wrap:nowrap; }
  .drawer-head .x { margin-left:auto; }
  .job-health-head { align-self:center; display:inline-flex; align-items:center; gap:6px; border:0; border-radius:20px; padding:5px 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
  .job-health-head .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
  .job-health-head.healthy { background:var(--green-bg); color:var(--green); }
  .job-health-head.needs_attention, .job-health-head.stale { background:var(--yellow-bg); color:var(--yellow); animation:staleBlink 1.1s ease-in-out infinite; }
  .job-health-head.at_risk { background:var(--red-bg); color:var(--red); animation:staleBlink 1.1s ease-in-out infinite; }
  .drawer-body { flex:1; min-height:0; padding:20px 22px 40px; overflow-y:auto; }
  .sub-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:14px; }
  /* "Print or send" is a <details>/<summary> disclosure styled as one .btn — strip the
     browser's own marker (a triangle would otherwise double up inside the button) and give
     the revealed actions a little breathing room from the summary above them. */
  .invoice-print-send > summary { list-style:none; }
  .invoice-print-send > summary::-webkit-details-marker { display:none; }
  .invoice-print-send[open] > summary { margin-bottom:4px; }
  .sub-card .h { padding:12px 15px; border-bottom:1px solid var(--line-soft); font-family:'Oswald'; text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px; }
  .sub-card .b { padding:14px 15px; }
  .time-charge-control { display:flex; gap:8px; align-items:center; min-width:0; }
  .time-charge-control > label { min-width:0; }
  .job-punch-entry { border:1px solid var(--line); border-radius:6px; padding:8px; margin-bottom:8px; }
  .job-punch-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; }
  .job-punch-who { font-size:13px; }
  .job-punch-hours { margin-left:auto; font-weight:600; }
  .job-punch-top > .time-charge-control { display:contents; }
  .job-punch-top > .time-charge-control > .charge-check, .job-punch-top > .charge-check { order:1; display:flex; align-items:center; }
  .job-punch-top > .job-punch-who { order:2; }
  .job-punch-top > .job-punch-when { order:3; }
  .job-punch-top > .job-punch-hours { order:4; }
  .job-punch-top > .job-punch-billing { order:5; white-space:nowrap; }
  .job-punch-top > .job-punch-billing + .t-mut { order:6; }
  .job-punch-top > .time-charge-control > .charge-money { order:5; white-space:nowrap; font-weight:600; }
  .job-punch-top > .time-charge-control > .charge-status { order:6; flex:1 0 100%; margin-left:26px; }
  .invoice-compact-actions { display:flex; gap:8px; align-items:stretch; margin-top:8px; }
  .invoice-compact-actions > * { flex:1; min-width:0; }
  .invoice-preview-frame { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
  .job-invoice-send { position:relative; }
  .job-invoice-send > summary { list-style:none; cursor:pointer; }
  .job-invoice-send > summary::-webkit-details-marker { display:none; }
  .job-invoice-send-menu { display:flex; gap:6px; flex-wrap:wrap; width:100%; padding-top:6px; }
  .job-invoice-payment select,.job-invoice-payment input { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; }
  #jobInvoiceCheckout > .h { padding-top:9px; padding-bottom:9px; }
  #jobInvoiceCheckout > .b { padding-top:10px; padding-bottom:10px; }
  .job-billing-box.top { margin-top:0; }
  .job-billing-toolbar { display:flex; align-items:center; gap:10px; min-width:0; width:100%; }
  .job-billing-buttons { display:flex; flex:1 1 auto; align-items:center; gap:8px; min-width:0; }
  .job-billing-state { display:flex; flex:0 0 auto; align-items:center; justify-content:flex-end; gap:6px; min-width:0; white-space:nowrap; text-align:right; }
  .job-billing-toolbar .btn { min-width:0; width:100%; min-height:44px; white-space:normal; justify-content:center; padding:9px 8px; text-align:center; }
  .job-billing-buttons .btn { flex:1 1 0; }
  .job-invoice-history { padding-left:9px; padding-right:9px; }
  .job-billing-actions { display:grid; grid-template-columns:minmax(132px,.9fr) minmax(104px,.7fr) minmax(205px,1.4fr); gap:8px; margin-top:8px; }
  .job-billing-actions .btn { min-height:46px; width:100%; justify-content:center; padding:11px 14px; font-size:13px; }
  .job-billing-print { white-space:nowrap; }
  .invoice-customer-preview-actions { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:8px; margin-bottom:12px; width:100%; }
  .invoice-customer-preview-actions.bottom { margin:12px 0 0; }
  .invoice-customer-preview-actions .btn { min-height:46px; width:100%; justify-content:center; }
  .invoice-customer-document { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px; overflow-x:auto; }
  .invoice-customer-document .stbreak { height:22px; margin:22px -14px; border-top:2px dashed #c9c3b8; background:var(--bg); }
  .invoice-customer-document .stsec { margin-top:16px; }
  .invoice-customer-document .st-veh { display:flex; gap:26px; flex-wrap:wrap; margin:10px 0 4px; padding-top:10px; border-top:1px solid #ddd; font-size:14px; color:#555; }
  .invoice-customer-document .st-veh .lab { font-size:11px; color:#666; }
  .invoice-customer-document .st-veh b { color:#000; }
  .invoice-customer-document .st-due { margin:14px 0 0 auto; width:340px; max-width:100%; border:1px solid #ccc; border-radius:8px; overflow:hidden; }
  .invoice-customer-document .st-due .r { display:flex; justify-content:space-between; gap:18px; padding:8px 13px; font-size:12.5px; border-bottom:1px solid #eee; text-align:left; }
  .invoice-customer-document .st-due .r > :last-child { margin-left:auto; text-align:right; white-space:nowrap; }
  .invoice-customer-document .st-due .r.due { background:#f6ead0; font-weight:700; border-bottom:0; font-size:14px; }
  .invoice-customer-document .st-band { border:1px solid #ccc; border-radius:8px; overflow:hidden; margin-top:14px; }
  .invoice-customer-document .st-band .bh { background:#1c2026; color:#fff; padding:8px 12px; font-size:12px; font-weight:700; display:flex; justify-content:space-between; gap:12px; }
  .invoice-customer-document .st-band .bb { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; padding:12px; }
  .invoice-customer-document .st-band .bb.one { display:block; }
  .invoice-customer-document .st-tr, .invoice-customer-document .st-n { display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:12px; }
  .invoice-customer-document .st-tr { border-bottom:1px dotted #ddd; }
  .invoice-customer-document .st-tr:last-child { border-bottom:0; }
  .invoice-customer-document .st-n.g { margin-top:6px; padding:9px 11px; background:#1c2026; color:#fff; border-radius:7px; font-weight:700; }
  .invoice-customer-document .st-topstripe { height:4px; border-radius:2px; margin-bottom:10px; background:#fd4d01; }
  .invoice-customer-document .st-sum { margin-top:14px; padding:11px 13px; border:1px solid #ccc; border-radius:8px; background:#faf7f1; font-size:12px; box-shadow:inset 3px 0 0 0 #c07f08; }
  .invoice-customer-document .st-sum .h { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9b6500; margin-bottom:5px; }
  .invoice-customer-document .st-sh { display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-bottom:2px solid #000; padding-bottom:5px; margin-bottom:2px; }
  .invoice-customer-document .st-sh .t { font-size:13.5px; font-weight:700; }
  .invoice-customer-document .st-sh .s { font-size:11.5px; color:#555; }
  .invoice-customer-document .st-ch, .invoice-customer-document .st-ro { display:grid; gap:8px; align-items:baseline; }
  .invoice-customer-document .st-ch { padding:4px 2px 3px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#777; border-bottom:1px solid #ddd; }
  .invoice-customer-document .st-ro { padding:7px 2px; font-size:12px; border-bottom:1px solid #eee; }
  .invoice-customer-document .cols-l { grid-template-columns:minmax(0,1fr) 48px 70px 82px; }
  .invoice-customer-document .cols-p { grid-template-columns:minmax(0,1fr) 48px 70px 82px; }
  .invoice-customer-document .st-ch .n, .invoice-customer-document .st-ro .n, .invoice-customer-document .st-ro .amt { text-align:right; }
  .invoice-customer-document .st-ro .amt { font-weight:600; color:#000; }
  .job-compact-body { display:flex; flex-direction:column; }
  .job-compact-body .job-time-card { order:2; }
  .job-compact-body .job-invoice-details { order:3; }
  .job-compact-body .job-media-card { order:4; }
  .job-compact-body .job-estimate-actions { margin-top:8px; }
  .job-top-estimate-action { display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 4px; }
  .job-punch-note { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-top:5px; font-size:12px; }
  .line { display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:13px; }
  .line + .line { border-top:1px dashed var(--line-soft); }
  .line .lt { color:var(--muted); flex:1; min-width:0; }
  .kv { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13px; }
  .kv dt { color:var(--muted); }
  .kv dd { margin:0; text-align:right; font-weight:500; }
  .field { margin-bottom:14px; }
  .team-grid .field { margin-bottom:0; }   /* team editor: rows sit tight (grid gap handles spacing) */
  .team-editor .field label { color:var(--ink); }   /* darker field labels (Full name, Email, Role…) */
  .field label { display:block; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.06em; }
  .field input { width:100%; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; }
  .field input:focus { outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber-deep); }
  .settings-fill-check.is-empty { border:2px dashed var(--amber-deep) !important; background:#fff8df !important; }
  .settings-empty-note { display:none; margin-top:4px; color:var(--amber-ink); font-size:11px; font-weight:700; }
  .settings-fill-check.is-empty + .settings-empty-note { display:block; }
  .job-timing-input { width:100%; min-width:0; padding:8px 5px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; }
  .job-timing-input:focus { outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber-deep); }
  .flag {
    display:flex; gap:8px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--yellow-bg); margin-bottom:8px; font-size:12px;
  }
  .flag.risk { background:var(--red-bg); }
  .flag svg { width:16px; height:16px; flex:none; margin-top:1px; }
  .flag .ftitle { font-weight:600; text-transform:capitalize; }

  .empty { text-align:center; color:var(--muted); padding:40px 20px; }
  .empty svg { width:34px; height:34px; opacity:.4; margin-bottom:8px; }

  /* Desktop: a larger pill at the bottom-center. Phones override this below. */
  .toast {
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(22px);
    background:var(--steel-900); color:#fff; padding:16px 26px; border-radius:13px; font-size:15px; font-weight:600;
    box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.22s; z-index:60; display:flex; gap:12px; align-items:center;
    max-width:min(480px, calc(100vw - 32px));
  }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
  .toast svg { width:22px; height:22px; color:var(--amber); flex:none; }
  /* Branded confirm dialog (replaces native confirm()) */
  .confirm-ov { position:fixed; inset:0; background:rgba(15,20,28,.55); z-index:120; display:flex; align-items:center; justify-content:center; padding:20px; }
  .confirm-box { background:var(--card); border-radius:16px; padding:22px 22px 18px; width:100%; max-width:400px; box-shadow:var(--shadow-lg); }
  .confirm-box .ask-input { width:100%; margin:10px 0 2px; padding:11px 12px; border:1.5px solid var(--line); border-radius:var(--radius); font:inherit; font-size:15px; color:var(--ink); background:#fff; }   /* 03-oct: askModal */
  .confirm-msg { font-size:15px; line-height:1.5; color:var(--ink); margin-bottom:18px; }
  .confirm-actions { display:flex; gap:10px; justify-content:flex-end; }
  .confirm-actions .btn { min-width:100px; }
  /* Failures read as failures — red toast, not the green/amber success check. */
  .toast.error { background:#4a1d18; }
  .toast.error svg { color:#f2897b; }
  .toast.info svg { color:#93bdea; }

  /* Update banner — stays until tapped (a toast fades; this can't, or a long-lived
     tab keeps running old code forever). Desktop: pill bottom-center, above the toast spot. */
  .update-banner {
    position:fixed; top:calc(12px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:80;
    background:var(--steel-900); color:#fff; border:1px solid var(--amber);
    padding:9px 10px 9px 15px; border-radius:13px; font-size:13.5px; font-weight:600; font-family:inherit;
    box-shadow:var(--shadow-lg); display:flex; gap:10px; align-items:center;
    max-width:min(520px, calc(100vw - 24px));
  }
  .update-banner svg { width:18px; height:18px; color:var(--amber); flex:none; }
  .update-banner button { font-family:inherit; font-weight:700; font-size:12.5px; border-radius:8px; padding:7px 12px; cursor:pointer; border:0; white-space:nowrap; }
  .update-banner .ub-now { background:var(--amber); color:var(--amber-ink); }
  .update-banner .ub-now:hover { filter:brightness(1.08); }
  .update-banner .ub-later { background:transparent; color:#cfd5dd; border:1px solid rgba(255,255,255,.28); }

  /* Move-a-punch destination chips (Another car / Admin / Shop) — highlight the choice. */
  .jp-dest:has(input:checked){ border-color:var(--amber); background:rgba(240,165,0,.10); font-weight:600; }

  .two-col { display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; }
  .avatar-sm { width:26px; height:26px; border-radius:50%; background:var(--steel-700); color:#fff; display:inline-grid; place-items:center; font-size:11px; font-weight:600; }

  /* ---- Responsive ---------------------------------------------------------
     Two ways to be "a phone". Width alone is not enough: a modern phone held
     SIDEWAYS is wider than 900px (iPhone 15/16 Pro Max landscape = 932/956 CSS px),
     so it used to fall back to the desktop table + sidebar on a ~430px-tall screen.
     The second clause catches that case — SHORT + landscape + a finger-sized primary
     pointer — which no desktop/laptop window can satisfy (a mouse/trackpad reports
     pointer:fine, so resizing a browser window short never trips it). Tablets in
     landscape stay on the desktop layout (iPad mini landscape is 744px tall). */
  .customer-intake-form{width:100%;min-width:0}
  @media (max-width:900px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
    .customer-intake-form>div[style*="display:flex"]{flex-wrap:wrap}
    .customer-intake-form .field,.customer-intake-form input,.customer-intake-form select,.customer-intake-form textarea{min-width:0;max-width:100%;box-sizing:border-box}
    .job-timing-grid { grid-template-columns:minmax(0,1fr) !important; gap:6px !important; }
    .job-timing-grid > label { margin-top:7px; }
    /* iOS Safari zooms the whole page when you focus an input whose font-size is < 16px.
       Force every field to 16px on phones so tapping a search box never zooms the page —
       and we keep pinch-zoom enabled (no viewport lock), so accessibility is unaffected.
       16px is a FLOOR, not a cap: fields deliberately styled >=16px keep their big type
       (the substring selectors preserve inline 18/20/24px; zoom only triggers under 16). */
    input, textarea, select { font-size:16px !important; }
    #noteEditorText { font-size:24px !important; }
    input[style*="font-size:18px"], textarea[style*="font-size:18px"] { font-size:18px !important; }
    input[style*="font-size:20px"], textarea[style*="font-size:20px"] { font-size:20px !important; }
    input[style*="font-size:22px"], input[style*="font-size:24px"] { font-size:24px !important; }
    .shell { grid-template-columns:minmax(0,1fr); min-width:0; }
    /* Collapsed header: brand on the left, ☰ on the right — no more sideways-scrolling
       nav strip. The ☰ opens the sidebar as a full-screen menu. */
    .sidebar { position:static; width:100%; min-width:0; height:auto; flex-direction:row; align-items:center; overflow:visible; }
    .brand { border-bottom:0; white-space:nowrap; }
    .menu-toggle {
      display:grid; place-items:center; margin-left:auto; margin-right:12px; flex:none;
      width:42px; height:42px; background:transparent; color:#cfd5dd;
      border:1px solid rgba(255,255,255,.22); border-radius:var(--radius); cursor:pointer;
    }
    .nav { display:none; }
    .sidebar > a, .sidebar > #verLabel { display:none !important; }
    .nav .group-label, .who { display:none; }
    .nav button .count { display:none; }
    /* Open state — full-screen menu with big touch targets + log out. */
    body.menu-open { overflow:hidden; }
    .menu-open .sidebar { position:fixed; inset:0; z-index:70; flex-direction:column; align-items:stretch; height:calc(100dvh / var(--z, 1)); overflow-y:auto; }
    .menu-open .menu-toggle { position:absolute; top:12px; right:12px; margin:0; }
    .menu-open .brand { border-right:0; border-bottom:1px solid rgba(255,255,255,.07); }
    /* Let the whole sidebar scroll as ONE container (it's height:calc(100dvh / var(--z, 1)); overflow-y:auto).
       The base .nav is flex:1 + overflow-y:auto, and that nested scroll collapses in a short
       LANDSCAPE viewport — lower items (Team, Shop Numbers, Payroll) became unreachable. */
    .menu-open .nav { display:flex; flex-direction:column; padding:10px 12px; gap:3px; flex:none; overflow:visible; }
    .menu-open .nav .group-label { display:block; }
    .menu-open .nav button { width:100%; white-space:normal; padding:15px 12px; font-size:15px; border-radius:var(--radius); }
    .menu-open .who { display:flex; padding:14px 16px; }
    .menu-open .sidebar > a, .menu-open .sidebar > #verLabel { display:block !important; }
    .kpis { grid-template-columns:repeat(2,1fr); }
    .today-action-rail { grid-template-columns:1fr; padding:17px 16px; gap:12px; }
    .today-action-primary { width:100%; min-height:44px; }
    .today-action-others { grid-column:1; }
    .two-col { grid-template-columns:1fr; }
    .parts-search-filters, .parts-search-filters.has-cost { grid-template-columns:minmax(0,1fr); }
    .content { padding-left:18px; padding-right:18px; }
    /* Wide on-screen tables (Team, Customers, Invoices…) scroll sideways INSIDE their own
       box on a phone, so a stray-wide table never pushes the whole page sideways. Printable
       docs (.doc-table) are excluded — they lay out for paper, not the phone. */
    .content table:not(.doc-table) { display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    /* Opt-in: a .cardify table becomes STACKED CARDS on phones (doctrine: tables → cards, no sideways
       scroll). Each row = a card; each cell = a "Label: value" line, the label from data-label. Cells
       with no data-label (or empty) collapse. Header row is hidden (the labels replace it). */
    .content table.cardify { display:block; overflow:visible; border:none; }
    .content table.cardify thead { display:none; }
    .content table.cardify tbody { display:block; }
    .content table.cardify tr { display:block; background:var(--card); border:1px solid var(--line);
      border-radius:var(--radius-sm); margin-bottom:10px; padding:4px 13px; }
    .content table.cardify td { display:flex; justify-content:space-between; align-items:center; gap:14px;
      border:none !important; padding:8px 0; text-align:right; min-height:0; }
    .content table.cardify td:not(:last-child) { border-bottom:1px solid var(--line-soft, var(--line)) !important; }
    .content table.cardify td::before { content:attr(data-label); font-weight:600; color:var(--muted);
      text-align:left; margin-right:auto; white-space:nowrap; }
    .content table.cardify td[data-label=""]::before, .content table.cardify td:not([data-label])::before { content:none; }
    .content table.cardify td:empty { display:none; }
    .content table.cardify tr.click { cursor:pointer; }
    /* A rich cell (name + badges + sub-lines) stacks full-width: label on its own line, content below. */
    .content table.cardify td.cardblock { display:block; text-align:left; }
    .content table.cardify td.cardblock::before { display:block; margin:0 0 3px; }
    /* ---- Team on a phone ---------------------------------------------------
       The Team table is 5-7 columns wide; no generic table-to-card transform made it
       readable, so on phones the table is HIDDEN outright and purpose-built employee
       cards take its place (see teamCardHTML). Every value wraps and every box is
       min-width:0, so a long vehicle name or work note can never push the page sideways
       or get clipped — in portrait or in landscape. */
    .card.team-desk { display:none; }
    .team-cards { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
    .team-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
      padding:13px 15px; min-width:0; overflow-wrap:anywhere; }
    .team-card-head { display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap; min-width:0; }
    .team-card-who { display:flex; flex-direction:column; min-width:0; flex:1 1 130px; }
    .team-card-who .t-strong { font-size:15px; line-height:1.25; white-space:normal; }
    .team-card-who .t-mut { font-size:12px; }
    .team-card-status { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end;
      margin-left:auto; min-width:0; }
    .team-card-status .pill { white-space:normal; }
    .team-card-rows { display:grid; gap:7px; margin-top:10px; }
    .team-card-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
      font-size:13.5px; min-width:0; }
    .team-card-row .k { color:var(--muted); font-weight:600; flex:none; }
    .team-card-row .v { text-align:right; min-width:0; overflow-wrap:anywhere; }
    .team-card-now { margin-top:11px; padding-top:10px; border-top:1px solid var(--line); min-width:0; }
    .team-card-now .k { display:block; color:var(--muted); font-weight:600; font-size:12px; margin-bottom:5px; }
    .team-card-now .tech-now { display:flex; min-width:0; }
    .team-card-now .tech-now .pill { max-width:100%; white-space:normal; text-align:left; }
    .team-card-note { margin:9px 0 0; font-size:13.5px; line-height:1.45; overflow-wrap:anywhere; }
    /* Thumb-sized, full-width: this is the one action on the card, so it never sits half-off
       the edge or competes with the tap-to-open card behind it. */
    .team-card-note-btn { width:100%; justify-content:center; margin-top:10px; min-height:44px; }
    /* Clock-in lives in a fixed bottom bar on phones, not the collapsed sidebar. */
    .sidebar .clock-widget { display:none; }
    .content { padding-bottom:104px; }
    /* Team is the one screen that empties that fixed bar (it covered the last card), so this
       is also the one screen that doesn't need to reserve room for it. */
    body.team-view .content { padding-bottom:18px; }
    .mobile-clockbar {
      display:block; position:fixed; left:0; right:0; bottom:0; z-index:50;
      background:var(--steel-900); color:#cfd5dd;
      padding:10px 14px calc(10px + env(safe-area-inset-bottom));
      border-top:1px solid rgba(255,255,255,.1); box-shadow:0 -3px 14px rgba(0,0,0,.18);
    }
    .mobile-clockbar:empty { display:none; }
    /* The technician's most-tapped, one-handed controls (Break / Clock out) get proper thumb-size
       targets on phones — the shared .btn.sm is only 32px tall, under the ~44px guideline. */
    .mobile-clockbar .btn { min-height:48px; padding:12px 16px; font-size:15px; }
    .invoice-action { min-height:44px; }
    /* Form/detail drawer becomes a true full-screen sheet on phones (was a 94vw side panel), so long
       forms use the whole screen and the primary action never sits half-off the edge. */
    .drawer { left:0; right:auto; width:100vw; max-width:100vw; }
    .drawer-body { padding:14px 16px calc(24px + env(safe-area-inset-bottom)); }
    /* Long titles and long key/value text (emails, addresses, VINs) must wrap inside the
       drawer, never push it sideways or clip — grid children need an explicit minmax(0,…)
       track or they refuse to shrink below their content's natural width. */
    .drawer-head h3 { min-width:0; overflow-wrap:anywhere; }
    .drawer-title-row { flex-wrap:wrap; row-gap:6px; min-width:0; }
    .kv { grid-template-columns:minmax(0,auto) minmax(0,1fr); }
    .kv dt, .kv dd { overflow-wrap:anywhere; min-width:0; }
    .team-note-row { padding:12px; }
    .team-note-btn { min-height:44px; }
    .job-punch-top > .job-punch-when { flex:1 0 calc(100% - 32px); }
    .job-punch-top > .time-charge-control > .charge-money { margin-left:26px; }
    .invoice-compact-actions { flex-direction:column; }
    .job-billing-toolbar { flex-direction:column-reverse; align-items:stretch; margin-left:0; margin-right:0; }
    .job-billing-buttons { display:grid; grid-template-columns:1fr 1fr; }
    .job-billing-state { justify-content:space-between; white-space:normal; overflow-wrap:anywhere; text-align:left; }
    .job-billing-toolbar .btn { font-size:12px; }
    .job-billing-actions { grid-template-columns:1fr 1fr; }
    .job-billing-actions .job-billing-print { grid-column:1 / -1; }
    .invoice-customer-preview-actions { grid-template-columns:1fr; }
    .invoice-customer-document .st-band .bb { grid-template-columns:1fr; }
    .invoice-customer-document .cols-l, .invoice-customer-document .cols-p { grid-template-columns:minmax(0,1fr) 38px 58px 70px; }
    /* Toast on phones: a WIDE banner across the TOP (clear of the bottom clock bar),
       bigger text, centered. It slides down from the top instead of up from the bottom. */
    .toast {
      top:calc(14px + env(safe-area-inset-top)); bottom:auto; left:12px; right:12px;
      transform:translateY(-22px); max-width:none;
      padding:17px 18px; font-size:16px; border-radius:15px; justify-content:center; text-align:center;
    }
    .toast.show { transform:translateY(0); }
    .toast svg { width:24px; height:24px; }
    /* Update banner on phones: a bar at the TOP, clear of the bottom clock controls. */
    .update-banner {
      top:calc(10px + env(safe-area-inset-top)); bottom:auto; left:12px; right:12px;
      transform:none; max-width:none; justify-content:center;
      padding:7px 9px; font-size:12.5px; border-radius:12px; gap:7px;
    }
    .update-banner button { padding:6px 9px; font-size:12px; }
  }
  /* Team, phone held SIDEWAYS. Joe uses landscape as the desktop-style overview: restore the
     complete table instead of turning the portrait cards into two columns. Compact spacing
     keeps every desktop column visible while the short+landscape+coarse fence prevents this
     phone-only override from changing an ordinary desktop or narrow laptop window. */
  @media (max-height:520px) and (orientation:landscape) and (pointer:coarse){
    .team-cards { display:none; }
    .card.team-desk { display:block; overflow-x:auto; }
    .team-table { width:100%; min-width:680px; font-size:11px; }
    .team-table th, .team-table td { padding:8px 6px; }
    .team-table .pill { padding:3px 7px; font-size:10px; }
    .team-table .tech-now { gap:4px; }
    .team-table .tech-now-task, .team-table .tech-now-elapsed { font-size:10px; }
    .team-table .team-type-col, .team-table .team-pay-col { display:none; }
    .team-table tbody tr { cursor:pointer; }
  }
  @media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }
  :focus-visible { outline:2px solid var(--amber); outline-offset:2px; border-radius:4px; }

  /* ---- Print (Payroll "Print / Save as PDF") ------------------------------- */
  .print-only { display:none; }
  @media print {
    .sidebar, .toast, .overlay, .drawer, .no-print { display:none !important; }
    .shell { display:block !important; }
    .content { padding:0 !important; max-width:none !important; }
    .print-only { display:block !important; }
    .card { box-shadow:none !important; border:1px solid #ccc !important; }
  }

  /* ---- Branded printable documents (invoice/estimate) ----------------------
     Clean/dense on purpose — these routinely run multiple pages, so column
     headers repeat on every page (native thead behavior) and a row is never
     allowed to split across a page break. Always red/black regardless of the
     app's own theme or dark mode — printed for a customer, not app UI. */
  #printArea { padding:32px 40px; max-width:720px; margin:0 auto; font-family:'Inter',sans-serif; color:#000; background:#fff; font-size:14px; line-height:1.5; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .doc-head { display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid #000; padding-bottom:12px; margin-bottom:18px; gap:16px; }
  .doc-brand { display:flex; align-items:center; gap:10px; }
  .doc-logo { width:40px; height:40px; object-fit:contain; flex:none; }
  .doc-shopname { font-family:'Oswald'; font-size:18px; font-weight:700; color:#000; }
  .doc-type { text-align:right; flex:none; }
  .doc-type .label { font-family:'Oswald'; font-size:15px; font-weight:700; color:#a5281b; letter-spacing:.06em; text-transform:uppercase; }
  .doc-type .num { font-size:12px; color:#333; margin-top:1px; }
  .doc-meta { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:18px; font-size:14px; color:#000; align-items:end; }
  .doc-meta .lab { text-transform:uppercase; font-size:11px; letter-spacing:.05em; color:#444; margin-bottom:2px; }
  .doc-table { width:100%; border-collapse:collapse; margin-bottom:16px; }
  .doc-table thead { display:table-header-group; } /* repeats on every printed page */
  .doc-table th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#333; border-bottom:2px solid #000; padding:6px; }
  .doc-table td { padding:7px 6px; border-bottom:1px solid #ccc; font-size:14px; vertical-align:top; color:#000; }
  .doc-table tr { break-inside:avoid; page-break-inside:avoid; } /* a row never splits across a page */
  .doc-table td.num, .doc-table th.num { text-align:right; white-space:nowrap; }
  .doc-totals { margin-left:auto; width:260px; break-inside:avoid; page-break-inside:avoid; }
  .doc-totals .line { display:flex; justify-content:space-between; padding:5px 0; font-size:14px; color:#000; }
  .doc-totals .line.total { border-top:2px solid #000; font-weight:700; font-size:16px; padding-top:8px; margin-top:3px; }
  .doc-totals .line.due { color:#a5281b; }
  .doc-footer { margin-top:24px; padding-top:12px; border-top:1px solid #ccc; font-size:12px; color:#555; text-align:center; }
.work-locator{margin-bottom:14px;padding:14px}
.work-locator label{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.work-locator input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius);font:inherit;color:var(--ink)}
.work-locator-results{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.work-locator-results button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.work-locator-results button:hover{border-color:var(--green)}
.work-locator-results small{display:block;color:var(--muted);margin-top:2px}

/* 29-sep: phone header = shop name only; Help · Privacy · version inside the open menu */
@media (max-width:900px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .sidebar .side-foot{display:none !important}
  .menu-open .sidebar .side-foot{display:flex !important; margin-top:auto; padding:14px 12px calc(14px + env(safe-area-inset-bottom)) !important; font-size:13px !important; gap:6px 18px !important}
  /* 30-sep (Mathew): the person sits at the bottom of the phone menu, just above Help/Privacy; its options open upward. */
  .menu-open .sidebar .who{margin-top:auto; border-top:1px solid rgba(255,255,255,.07)}
  .menu-open .sidebar .who ~ .side-foot{margin-top:0}
}
/* 29-sep: opening a window (Calendar, Help, welcome) locks the page scroll; keep the scrollbar's space reserved so the
   layout never shifts sideways when the scrollbar disappears. */
html{scrollbar-gutter:stable}

/* 29-sep: Shop Numbers layout (metrics-view.js shopNumbersHTML; rules in NORMAS_DISENO.md) */
.sn-wrap{display:flex;flex-direction:column;gap:16px;margin-bottom:8px;container-type:inline-size}
.sn-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);animation:snUp .4s ease both}
@keyframes snUp{from{transform:translateY(8px)}to{transform:none}}
.sn-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.sn-groups>.sn-card:nth-child(2){animation-delay:.06s}.sn-groups>.sn-card:nth-child(3){animation-delay:.12s}
@container (max-width:560px){.sn-groups{grid-template-columns:minmax(0,1fr)}.sn-two{grid-template-columns:minmax(0,1fr)!important}}
.sn-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}.sn-h>b{font-weight:700;font-size:15px}
.sn-lab{font-family:Oswald,sans-serif;font-size:16px;font-weight:600;color:var(--ink,#171a1f)}.sn-mut{font-size:12px;color:var(--muted)}
.sn-link{margin-left:auto;border:0;background:none;color:#8a5c00;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.sn-hero{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.sn-hero>div{flex:1 1 150px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;padding:10px 14px;white-space:nowrap}
.sn-hero span{font-size:12px;color:var(--muted)}.sn-hero b{font-family:Oswald,sans-serif;font-size:28px;font-weight:600;line-height:1.15}.sn-hero em{font-style:normal;font-size:12px;color:var(--muted)}
.sn-hero .net{background:#f3f8f4;border-color:#b9d6c3}.sn-hero .net b{color:var(--green)}.sn-hero .net.neg{background:#fdf1ef;border-color:#e7b3aa}.sn-hero .net.neg b{color:var(--red)}
.sn-fbar{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;margin:12px 0 6px}.sn-fbar span{display:block;min-width:2px}.sn-money .sn-fbar{height:14px}
.sn-lg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--muted)}.sn-lg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.sn-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;align-items:start}
.sn-sub{border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}.sn-sh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;margin-bottom:6px}.sn-sh span{color:var(--muted);font-weight:600}
.sn-bar{display:grid;grid-template-columns:minmax(0,max-content) minmax(60px,1fr) max-content;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 4px;font:inherit;color:inherit;text-align:left;border-radius:8px}
button.sn-bar{cursor:pointer;transition:background .18s}button.sn-bar:hover{background:var(--soft,#f7f8fa)}
.sn-bl{font-size:13px}.sn-bar b{font-family:Oswald,sans-serif;font-size:15px;font-weight:600;white-space:nowrap}
.sn-bt{height:10px;background:#f2f4f7;border-radius:5px;overflow:hidden;display:flex;justify-content:flex-end}.sn-bt i{display:block;height:100%;border-radius:5px}
@container (max-width:420px){.sn-bar{grid-template-columns:minmax(0,1fr) max-content}.sn-bar .sn-bt{grid-column:1/-1;grid-row:2}}
.sn-empty{font-size:12.5px;color:var(--muted);padding:6px 4px}.sn-note{font-size:12px;color:var(--muted);margin:10px 0 0}
.sn-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:6px}.sn-k b{font-family:Oswald,sans-serif;font-size:28px;font-weight:600;line-height:1.1;white-space:nowrap}.sn-k span{font-size:12px;color:var(--muted)}
.sn-spark{margin:8px 0 2px}
.sn-fig{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;width:100%;border:0;border-top:1px solid var(--line);background:none;padding:9px 2px;font:inherit;font-size:13px;color:inherit;text-align:left}
button.sn-fig{cursor:pointer;transition:background .18s}button.sn-fig:hover{background:var(--soft,#f7f8fa)}.sn-fig b{font-variant-numeric:tabular-nums;margin-left:auto}
.sn-more{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}.sn-more summary{cursor:pointer;font-size:12.5px;font-weight:700;color:#8a5c00;list-style:none;display:inline-flex;align-items:center;gap:6px}
.sn-more summary::-webkit-details-marker{display:none}.sn-more summary:after{content:"⌄";transition:transform .18s}.sn-more[open] summary:after{transform:rotate(180deg)}
.sn-more-b{margin-top:10px;display:flex;flex-direction:column;gap:10px}.sn-more-b .sub-card{margin:0}
@media (prefers-reduced-motion:reduce){.sn-card{animation:none}}
.content:has(.sn-wrap){max-width:1600px}
/* 03-oct (Mathew): every rebuilt page uses the width Today uses (NORMAS 6b, cap 1600), not the old 1180. */
.content:has(> .w1, > .c2, > .s1, > .area-nav, > .practice-teaser){max-width:1600px}
.sn-held{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--soft,#f7f8fa);font:inherit;color:inherit;cursor:pointer;text-align:left}
.sn-held i{flex:none;width:10px;height:10px;border-radius:50%;background:#b4b2a9}.sn-held.green i{background:#2f7d51}.sn-held.yellow i{background:#f0a500}.sn-held.red i{background:#c0453a}
.sn-held.red{border-color:#e7b3aa;background:#fdf1ef}.sn-held.yellow{border-color:#edc46e;background:#fffaf0}
.sn-held span{flex:1;font-size:13px;font-weight:600}.sn-held b{font-family:Oswald,sans-serif;font-size:20px;font-weight:600}
/* 30-sep (Mathew): Shop Numbers zones (Right now / This period), summary row, sales bars (ESQUELETO_SHOP_NUMBERS.html) */
.sn-zone{display:flex;align-items:center;gap:8px;margin:4px 2px -6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.sn-zone i{flex:1;height:1px;background:var(--line)}
.sn-now{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.sn-owe{border-color:#edc46e;background:#fffaf0}
.sn-age{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden;margin:10px 0 6px}.sn-age button{border:0;padding:0;min-width:4px;cursor:pointer}.sn-age span{display:block}
.sn-owe .sn-lg button{border:0;background:none;padding:2px 0;font:inherit;color:inherit;cursor:pointer}
.sn-verdict.green{color:var(--green)}.sn-verdict.yellow{color:#8a5c00}.sn-verdict.red{color:var(--red)}
.sn-sum{display:flex;align-items:stretch}
.sn-s{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:4px 16px;border:0;border-left:1px solid var(--line);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.sn-s:first-child{border-left:0;padding-left:0}
.sn-s small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.sn-s b{font-family:Oswald,sans-serif;font-size:24px;font-weight:600;line-height:1.15;white-space:nowrap}.sn-s em{font-style:normal;font-size:12px;color:var(--muted)}
.sn-d{font-size:11.5px;font-weight:700;margin-top:2px;white-space:nowrap}.sn-d.up{color:var(--green)}.sn-d.down{color:var(--red)}.sn-d.flat{color:var(--muted)}
.sn-ctl{flex:none;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;padding-left:16px;border-left:1px solid var(--line)}
.sn-asof{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);white-space:nowrap}.sn-asof i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.sn-chh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-top:14px;font-size:12px;color:var(--muted)}.sn-chh b{color:var(--ink)}
.sn-chart{display:flex;align-items:flex-end;gap:6px;height:130px;margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.sn-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;border:0;background:none;padding:0;font:inherit;cursor:pointer;border-radius:6px}
.sn-col i{display:block;width:100%;max-width:46px;background:#191d23;border-radius:6px 6px 2px 2px;transition:opacity .18s}.sn-col.now i{background:#f0a500}
.sn-col:hover i,.sn-col[aria-pressed="true"] i{opacity:.8}.sn-col[aria-pressed="true"] small{color:var(--ink);font-weight:700}
.sn-col b{font-size:10.5px;color:var(--muted);white-space:nowrap}.sn-col small{font-size:10.5px;color:var(--muted);white-space:nowrap}
.sn-wk{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}.sn-wk .sn-bar{grid-template-columns:minmax(0,1fr) max-content max-content}
.sn-kb{border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
/* 30-sep (Mathew): skeleton lines, KPI tiles, hint and per-job rows */
.sn-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:10px}
.sn-ln{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;padding:6px 0;border:0;border-top:1px solid var(--line);background:none;font:inherit;font-size:13px;color:inherit;text-align:left}
.sn-ln>span{min-width:0;overflow-wrap:anywhere}.sn-ln b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
button.sn-ln{cursor:pointer}button.sn-ln:hover{background:var(--soft,#f7f8fa)}
.sn-ln.t{border-top:0;font-weight:700;color:var(--muted)}.sn-ln b.pos{color:var(--green)}.sn-ln b.neg{color:var(--red)}
.sn-hint{font-size:12px;color:var(--muted);background:var(--bg);border-radius:10px;padding:8px 10px;margin-top:10px}
.sn-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.sn-kt{min-width:0;display:flex;flex-direction:column;align-items:flex-start;background:var(--bg);border:0;border-radius:10px;padding:8px 10px;font:inherit;color:inherit;text-align:left}
button.sn-kt{cursor:pointer}button.sn-kt:hover{background:#e9ecf0}
.sn-kt small{font-size:11px;color:var(--muted)}.sn-kt b{font-family:Oswald,sans-serif;font-size:18px;font-weight:600;white-space:nowrap}
.sn-jobs{margin-top:10px}
.sn-owe .sn-lg b{font-weight:700;color:var(--ink)}
.mr-custom label{min-width:0}.mr-custom input{min-width:0;width:100%;box-sizing:border-box}.mr-list{grid-template-columns:repeat(2,minmax(0,1fr))}.mr-opt{min-width:0}
@container (max-width:900px){.sn-now{grid-template-columns:minmax(0,1fr)}}
/* 30-sep (Mathew): mid widths — the four summary figures go 2×2 with the period button on top, so deltas never overflow */
@container (min-width:561px) and (max-width:900px){.sn-sum{flex-wrap:wrap;row-gap:12px}.sn-sum .sn-s{flex:1 1 40%}.sn-sum .sn-s:nth-child(3){border-left:0;padding-left:0}.sn-sum .sn-ctl{order:-1;flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:center;border-left:0;padding-left:0}}
.mr-opt{min-width:0;overflow-wrap:anywhere}
@container (max-width:560px){.sn-sum{flex-wrap:wrap;gap:8px}.sn-sum .sn-s{flex:1 1 40%;border:1px solid var(--line);border-radius:12px;padding:8px 10px}.sn-sum .sn-ctl{order:-1;flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:center;border-left:0;padding:0}.sn-chart{height:96px;gap:4px}.sn-col b{font-size:9.5px}.sn-d{white-space:normal}.sn-cols{grid-template-columns:minmax(0,1fr)}.sn-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.sn-period{position:relative}.sn-sum .mr-pick{position:static}.sn-sum .mr-pick[open]::before{display:none}.sn-sum .mr-pop{position:absolute;top:auto;bottom:auto;left:8px;right:8px;width:auto;margin-top:8px;border-radius:14px;padding:10px;animation:mrIn .16s ease both}}

/* 30-sep: the phone clock bar is the most important control on a phone — a floating card in the brand's dark steel
   (same as the sidebar), with the dashboard's radius and shadow, the green status line and a soft green halo while on
   the clock. Content and buttons unchanged. */
@media (max-width:900px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .mobile-clockbar{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));padding:10px;border-radius:18px;
    background:var(--steel-900,#171a1f);color:#cfd5dd;border:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 0 3px rgba(47,125,81,.18),0 18px 40px -14px rgba(10,12,15,.6)}
  .mobile-clockbar .cw-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-left:3px solid var(--green,#2f7d51);border-radius:12px}
  /* 30-sep (Mathew): hands are busy — status + time in one compact row, then Break / Clock out as two wide 52px buttons. */
  .mobile-clockbar{display:flex;flex-direction:column;gap:8px;padding:8px}
  .mobile-clockbar:empty{display:none}
  .mobile-clockbar .cw-card{margin:0;padding:8px 12px;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:start}
  .mobile-clockbar .cw-top{display:contents}
  .mobile-clockbar .cw-top .dot,.mobile-clockbar .cw-state{grid-column:1;grid-row:1}
  .mobile-clockbar .cw-state{padding-left:14px}
  .mobile-clockbar .cw-top .dot{margin-top:5px}
  .mobile-clockbar .cw-time{grid-column:2;grid-row:1 / span 2;line-height:1}
  .mobile-clockbar .cw-on{grid-column:1;grid-row:2}
  .mobile-clockbar .cw-on{font-size:12.5px;line-height:1.3;margin-top:2px}
  .mobile-clockbar .cw-actions{display:flex;gap:8px;margin:0}
  .mobile-clockbar .cw-actions .btn{flex:1;min-height:52px;padding:8px 12px;font-size:16px;font-weight:700;border-radius:12px}
  .mobile-clockbar .cw-time{font-size:24px}
}

/* 30-sep: without a logo the brand mark shows the shop's initials (no generic wrench). */
.brand .mark.mono{font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;letter-spacing:.03em;line-height:1}
/* 30-sep (Mathew): Shop Numbers date range — one button, presets + custom range in a popover (sheet on a phone). */
.mr-bar .b{padding:10px 14px;display:flex;justify-content:flex-end}
.mr-pick{position:relative}
.mr-btn{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-size:14px;transition:transform .18s ease,box-shadow .18s ease}
.mr-btn::-webkit-details-marker{display:none}
.mr-btn span{color:var(--muted);font-size:13px}
.mr-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mr-pick[open] .mr-btn svg{transform:rotate(180deg)}
.mr-pop{position:absolute;z-index:40;top:calc(100% + 8px);right:0;width:min(360px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px -24px rgba(25,29,35,.45),0 2px 8px rgba(25,29,35,.08);padding:10px;animation:mrIn .16s ease both}
.mr-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mr-opt{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;text-align:left;cursor:pointer;color:var(--ink)}
.mr-opt.on{background:#fffaf0;border-color:#edc46e;font-weight:700}
.mr-custom{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.mr-custom>span{flex-basis:100%;font-size:12px;font-weight:700;color:var(--muted)}
.mr-custom label{flex:1 1 120px;display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}
.mr-custom input{padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:14px}
.mr-note{margin-top:10px;font-size:11.5px;color:var(--muted)}
@media (max-width:560px){
  .mr-pick[open]::before{content:"";position:fixed;inset:0;z-index:39;background:rgba(23,26,31,.45)}
  .mr-pop{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;border-radius:18px 18px 0 0;padding:14px 12px calc(16px + env(safe-area-inset-bottom));animation:mrSheet .26s cubic-bezier(.2,.8,.2,1) both}
  .mr-opt{padding:13px 12px}
}
@media (prefers-reduced-motion:reduce){.mr-pop{animation:none}.mr-btn{transition:none}}
@keyframes mrIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@keyframes mrSheet{from{transform:translateY(100%)}to{transform:none}}

/* 30-sep (Mathew): sidebar visual rework — skeleton ESQUELETO_BARRA_LATERAL.html. Style only: same elements,
   order and behavior. The shop header takes an optional --shop-photo (image behind the name, under a dark
   gradient so the name always reads); without it, steel with a faint amber glow. Desktop only. */
@media (min-width:901px){
  .sidebar .brand{position:relative;overflow:hidden;min-height:118px;display:flex;align-items:flex-end;padding:16px 14px 14px;border-bottom:0;
    background:
      linear-gradient(180deg,rgba(25,29,35,.05) 0%,rgba(25,29,35,.5) 55%,var(--steel-900) 100%),
      var(--shop-photo, radial-gradient(120% 90% at 0% 0%,rgba(240,165,0,.22),transparent 55%)),
      repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 12px),
      linear-gradient(180deg,var(--steel-800),var(--steel-900));
    background-size:cover;background-position:center 60%}
  .sidebar .brand .logo{width:100%;padding:8px;border-radius:12px;background:rgba(25,29,35,.35);border:1px solid rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .18s ease}
  .sidebar .brand .logo:hover{background:rgba(25,29,35,.5)}
  .sidebar .brand .mark{width:40px;height:40px;border-radius:11px;font-size:14px}
  .sidebar .brand .logo img{width:40px !important;height:40px !important;border-radius:11px !important}
  .sidebar .brand .name{font-size:15px;line-height:1.15;display:flex;align-items:center}
  .sidebar .nav{padding:10px}
  .sidebar .nav .group-label{padding:10px 10px 6px;color:#7c8794}
  .sidebar .nav button{position:relative;padding:10px 12px;border-radius:10px;font-size:13.5px;transition:background .18s ease,color .18s ease}
  .sidebar .nav button:hover{background:rgba(255,255,255,.05)}
  .sidebar .nav button.active{background:linear-gradient(90deg,rgba(240,165,0,.16),rgba(240,165,0,.04));color:#fff}
  .sidebar .nav button.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--amber)}
  .sidebar .nav button .count{background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:0 8px;min-width:22px;text-align:center;font-size:11px;font-weight:700}
  .sidebar .who{border-top:1px solid rgba(255,255,255,.07)}
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){ .sidebar .brand .logo, .sidebar .nav button{transition:none} }
/* Demo only: sample shop photo (Unsplash, free license) so visitors see the shop-photo idea. Real shops: owner decision. */
@media (min-width:901px){ body.practice-mode .sidebar .brand{--shop-photo:url("/demo-shop-photo.jpg")} }
/* 30-sep (Mathew): the same sidebar rework on phones — the collapsed top bar and the ☰ panel. */
@media (max-width:900px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .sidebar .brand{position:relative;background:
      linear-gradient(90deg,rgba(25,29,35,.82) 0%,rgba(25,29,35,.55) 60%,rgba(25,29,35,.82) 100%),
      var(--shop-photo, radial-gradient(140% 160% at 0% 0%,rgba(240,165,0,.20),transparent 60%)),
      repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 12px),
      var(--steel-900);background-size:cover;background-position:center 60%}
  .sidebar{background:var(--steel-900)}
  body.practice-mode .sidebar .brand{--shop-photo:url("/demo-shop-photo.jpg")}
  /* ☰ panel: shop header like the desktop card, amber active bar, counts shown */
  .menu-open .sidebar .brand{padding:18px 64px 16px 14px;min-height:118px;display:flex;align-items:flex-end;
    background:
      linear-gradient(180deg,rgba(25,29,35,.05) 0%,rgba(25,29,35,.5) 55%,var(--steel-900) 100%),
      var(--shop-photo, radial-gradient(120% 90% at 0% 0%,rgba(240,165,0,.22),transparent 55%)),
      repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 12px),
      linear-gradient(180deg,var(--steel-800),var(--steel-900));background-size:cover;background-position:center 60%;border-bottom:0}
  .menu-open .sidebar .brand .logo{width:100%;padding:8px;border-radius:12px;background:rgba(25,29,35,.35);border:1px solid rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .menu-open .sidebar .brand .mark{width:40px;height:40px;border-radius:11px}
  .menu-open .menu-toggle{z-index:2;background:rgba(25,29,35,.45);border-radius:11px}
  .menu-open .nav button{position:relative;transition:background .18s ease}
  .menu-open .nav button.active{background:linear-gradient(90deg,rgba(240,165,0,.16),rgba(240,165,0,.04));color:#fff}
  .menu-open .nav button.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--amber)}
  .menu-open .nav button .count{display:inline-block;margin-left:auto;background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:0 8px;min-width:22px;text-align:center;font-size:12px;font-weight:700}
}

/* 30-sep (Mathew): the Today signal — red when the shop is critical, amber when it needs attention */
.sidebar .nav button .count.crit,.menu-open .nav button .count.crit{background:#c0453a;color:#fff}
.sidebar .nav button .count.warn,.menu-open .nav button .count.warn{background:var(--amber);color:#171a1f}

/* 30-sep (Mathew): Shop Numbers fixes — the period card sits above the cards below it (its menu was hidden behind
   Jobs & profit); groups are two independent columns (phone: one column, skeleton order); aligned "More details" chevron. */
.sn-period{position:relative;z-index:5}
.sn-period .mr-pop{width:min(300px,calc(100vw - 32px))}
.sn-gcol{display:flex;flex-direction:column;gap:12px;min-width:0}
@container (max-width:560px){.sn-groups{display:flex;flex-direction:column}.sn-gcol{display:contents}.sn-money{order:1}.sn-gj{order:2}.sn-gh{order:3}.sn-ge{order:4}}
.sn-more summary:after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s}
.sn-more[open] summary:after{transform:translateY(1px) rotate(-135deg)}

/* 01-oct (Mathew, ESQUELETO_WORK): Job Board — big move buttons naming the next stage; Delivered week selector */
.jc-move .jc-back{flex:0 0 40px;min-height:40px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:9px;font-size:18px;line-height:1;cursor:pointer;font-family:inherit}
.jc-move .jc-next{flex:1;min-width:0;min-height:40px;border:1px solid var(--steel-900,#191d23);background:var(--steel-900,#191d23);color:#fff;border-radius:9px;font:700 12.5px/1.2 inherit;font-family:inherit;cursor:pointer;white-space:nowrap;overflow-wrap:normal}
.jc-move .jc-back:hover{background:var(--amber);border-color:var(--amber-deep);color:var(--amber-ink)}.jc-move .jc-next:hover{background:var(--amber);border-color:var(--amber-deep);color:var(--amber-ink)}
.col-week{display:flex;align-items:center;justify-content:space-between;gap:4px;background:var(--bg);border-radius:8px;padding:3px;font-size:11.5px;font-weight:700}
.col-week span{text-align:center;flex:1;min-width:0}.col-week button{flex:0 0 32px;height:32px;border:0;background:#fff;border-radius:7px;font-size:16px;cursor:pointer;color:var(--ink)}.col-week button:disabled{opacity:.35;cursor:default}
.col-more{border:0;background:none;color:#8a5c00;font:700 12.5px inherit;font-family:inherit;padding:6px;cursor:pointer}
#jobBoard.board{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.jobcard .jc-move{gap:4px}.jc-move .jc-back{flex-basis:34px}.jc-move .jc-next{font-size:12px;padding:0 6px}

/* 01-oct (Mathew, ESQUELETO_WORK): card tags (parts / money) and the phone stage chips */
.jc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.jc-tag{font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 6px;background:var(--bg);color:var(--muted);line-height:1.5}
.jc-tag.p{background:#eef0ff;color:#3b4aa0}.jc-tag.g{background:#e4f0e7;color:#2f7d51}.jc-tag.a{background:#fffaf0;color:#3a2c05;border:1px solid #edc46e}.jc-tag.r{background:#f6e2df;color:#c0453a}
#jobBoard .board-stages{display:none}
@media (max-width:640px){
  #jobBoard.board{display:block}
  #jobBoard .board-stages{display:flex;gap:6px;overflow-x:auto;margin:0 0 10px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  #jobBoard .board-stages button{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font:700 12.5px inherit;font-family:inherit;color:var(--ink);cursor:pointer;white-space:nowrap}
  #jobBoard .board-stages button b{margin-left:4px;color:var(--muted)}
  #jobBoard .board-stages button[aria-selected="true"]{background:var(--steel-900,#191d23);border-color:var(--steel-900,#191d23);color:#fff}#jobBoard .board-stages button[aria-selected="true"] b{color:#fff}
  #jobBoard .col{display:none}#jobBoard .col.on{display:flex;flex-direction:column}
}

/* 01-oct (Mathew, ESQUELETO_WORK): Work › List view, Invoices desk, Parts desk */
.wl-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}.wl-chips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:700 12.5px inherit;font-family:inherit;color:var(--muted);cursor:pointer}
.wl-chips button b{margin-left:3px}.wl-chips button.on{background:var(--steel-900,#191d23);border-color:var(--steel-900,#191d23);color:#fff}
.wl-card{overflow-x:auto}.wl-card .jc-tags{margin-top:0}.wl-pager{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 4px 2px;font-size:12.5px;color:var(--muted)}
.inv-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px}
.inv-tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column}.inv-tile small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.inv-tile b{font-family:Oswald,sans-serif;font-size:22px;font-weight:600}.inv-tile span{font-size:12px;color:var(--muted)}.inv-tile.r{border-color:#e7b4ae;background:#fdf5f4}.inv-tile.a{border-color:#edc46e;background:#fffaf0}
.inv-sec{margin-bottom:12px;overflow-x:auto}.inv-h{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}.inv-h b{font-family:Oswald,sans-serif;font-size:16px;font-weight:600}
.inv-bill{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}.inv-bill:first-of-type{border-top:0}
.inv-paid-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 2px 8px}
.inv-month{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:8px;overflow-x:auto}.inv-month summary{display:flex;justify-content:space-between;gap:10px;cursor:pointer;font-weight:700;list-style:none}.inv-month summary::-webkit-details-marker{display:none}
.inv-month[open] summary{margin-bottom:8px}
.pd-add{position:relative}.pd-add summary{list-style:none;cursor:pointer}.pd-add summary::-webkit-details-marker{display:none}
.pd-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:min(340px,calc(100vw - 32px));max-height:320px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px -24px rgba(25,29,35,.45);padding:8px;display:flex;flex-direction:column;gap:2px}
.pd-pop b{font-size:12px;color:var(--muted);padding:4px 6px}.pd-pop button{border:0;background:none;text-align:left;padding:9px 8px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}.pd-pop button:hover{background:var(--bg)}
.pd-card{margin-bottom:14px}.pd-h{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}.pd-h b{font-family:Oswald,sans-serif;font-size:16px;font-weight:600}
.pd-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}.pd-row>span{display:flex;flex-direction:column;min-width:0}.pd-h+.pd-row{border-top:0}
.pd-sub{font-family:Oswald,sans-serif;font-size:16px;font-weight:600;margin:4px 2px 8px}
@media (max-width:640px){.inv-tiles{grid-template-columns:minmax(0,1fr)}.inv-bill{flex-wrap:wrap}}
/* 01-oct (Mathew): the three Work tabs fit a phone without a cut-off tab */
@media (max-width:640px){.area-nav{gap:6px}.area-nav>*{flex:1 1 auto;min-width:0;padding-left:8px!important;padding-right:8px!important;font-size:14px!important;white-space:nowrap}}

/* 01-oct (Mathew): Work 1:1 with ESQUELETO_WORK — compact tabs with counts, one toolbar, grey board columns, cards with
   the health as the left border, compact invoice lines. Scoped to Work. */
.area-nav .an-n{font-style:normal;font-size:11px;font-weight:700;background:rgba(255,255,255,.7);border-radius:999px;padding:0 6px;margin-left:6px}.area-nav .an-n.r{background:#c0453a;color:#fff}
.wk-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.wk-search{position:relative;flex:1 1 280px;min-width:0;margin:0;padding:0;background:none;border:0;box-shadow:none}
.wk-search input{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:14px;color:var(--ink)}
.wk-search .work-locator-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px -24px rgba(25,29,35,.45);padding:6px;margin:0;max-height:360px;overflow:auto}
.wk-search .wl-none{font-size:12.5px;color:var(--muted);padding:10px 12px}
.wk-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;flex:none}
.wk-seg button{border:0;background:none;padding:8px 12px;font:700 12.5px inherit;font-family:inherit;color:var(--muted);cursor:pointer}.wk-seg button.on{background:var(--steel-900,#191d23);color:#fff}
.wk-tech{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font:700 12.5px inherit;font-family:inherit;color:var(--muted);flex:none}
.wk-actions{display:flex;gap:8px;margin-left:auto;flex:none}.wk-actions .btn{border-radius:10px;font-size:12.5px;font-weight:700}.wk-actions .wk-new{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
#jobBoard.board{gap:10px;align-items:start;padding:0}
#jobBoard .col{background:#e9ecf0;border:0;border-radius:12px;padding:8px;min-height:0}
#jobBoard .col[data-col="delivered"]{background:#eef2ee}
#jobBoard .col-head{border:0;padding:2px 4px 8px}#jobBoard .col-head .cname{font:700 11px Inter,sans-serif;letter-spacing:.06em;color:var(--muted)}
#jobBoard .col-head .cnum{background:#fff;color:var(--ink);font-weight:700}
#jobBoard .col-body{padding:0;gap:7px}#jobBoard .col-empty{text-align:center;color:var(--muted);padding:6px}
#jobBoard .jobcard{border:1px solid var(--line);border-left:4px solid #b4b2a9;border-radius:10px;padding:8px 9px;box-shadow:none;font-size:12px}
#jobBoard .jobcard.h-ok{border-left-color:#2f7d51}#jobBoard .jobcard.h-att{border-left-color:#f0a500}#jobBoard .jobcard.h-risk{border-left-color:#c0453a}
#jobBoard .jobcard .veh{font-size:12.5px;font-weight:700}#jobBoard .jobcard .cust{font-size:12px}
#jobBoard .jobcard .row{flex-direction:row;justify-content:flex-start;align-items:center;gap:6px;margin-top:6px}
#jobBoard .jobcard .av{width:20px;height:20px;border-radius:50%;background:var(--steel-900,#191d23);color:#fff;font-size:9px;font-weight:700;display:inline-grid;place-items:center}
#jobBoard .jobcard .jc-un{font-size:11px}
#jobBoard .stale-badge{font-size:10px;font-weight:700;color:#c0453a;background:#f6e2df;border-radius:6px;padding:0 5px;margin-left:4px;text-transform:uppercase;border:0}
#jobBoard .col-week{background:#fff}
.inv-lines{display:flex;flex-direction:column}
.inv-ln{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) auto 90px auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}.inv-ln:first-child{border-top:0}
.inv-ln.click{cursor:pointer}.inv-ln.click:hover{background:var(--bg)}.inv-ln>span.t-mut{min-width:0}
.inv-amt{font-family:Oswald,sans-serif;font-size:15px;font-weight:600;text-align:right;white-space:nowrap}.inv-act{text-align:right}
.wl-card table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
@media (max-width:640px){.wk-actions{margin-left:0;width:100%}.wk-actions .btn{flex:1}.inv-ln{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.inv-ln>span.t-mut{grid-column:1/-1;grid-row:2}.inv-ln .inv-act{grid-column:1/-1}}
#jobBoard .col[data-col="delivered"] .jc-move{display:none}
.wk-head{margin-bottom:10px}.wk-head p{margin:0;color:var(--muted);font-size:13px}
@media (max-width:640px){.area-nav[aria-label="Work sections"] button{flex:1 1 auto;padding:9px 8px!important;font-size:13px!important}.area-nav .an-n span{display:none}.wk-seg{flex:1}.wk-seg button{flex:1}.wk-tech{flex:1}}
@media (max-width:640px){.wk-search{flex:1 1 100%}.wk-seg{flex:1 1 55%}.wk-tech{flex:1 1 35%;min-width:0}}

/* 01-oct (Mathew): Work 1:1 pass 2 — line search icon (no emoji), list/customers top rows, parts side by side */
.wk-search .wk-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.wk-search input{padding-left:34px!important}
.jc-ico{vertical-align:-2px;margin-right:4px;color:var(--muted)}
.wl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}.wl-top .wl-chips{margin:0}
.cu-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.cu-tools .btn{padding:6px 10px;font-size:12px;border-radius:9px}.cu-tools label{padding:0 4px 0 10px!important;border-radius:9px!important}
.cu-tools select{padding:6px 6px!important;font-size:12.5px!important}
#custSearchNotice:empty{display:none}
.wl-card table th{background:#fafbfc}
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;align-items:start}.pd-grid>.card{margin:0}
.pd-find .parts-search-filters{margin-top:4px}.pd-find{overflow-x:auto}
.pd-cost{margin-top:12px}
.inv-act{display:flex;gap:6px;justify-content:flex-end;align-items:center}.inv-act .to-pop{text-align:left}
@media (max-width:900px){.pd-grid{grid-template-columns:minmax(0,1fr)}}
.pd-grid>.pd-cost{grid-column:1/-1}
.inv-act .to-cb{background:#fff;border:1px solid var(--line);color:var(--ink);padding:5px 10px;font-size:12px;min-height:0;border-radius:8px}
.pd-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media (max-width:900px){.pd-grid{grid-template-columns:minmax(0,1fr)}}

/* W1-START · ESQUELETO_WORK cloned 1:1 (01-oct, Mathew): classes and vars prefixed w1-, scoped to .w1 */
.w1{--w1-steel-900:#191d23;--w1-bg:#f2f4f7;--w1-card:#fff;--w1-line:#e3e7ec;--w1-line-soft:#eef1f4;--w1-ink:#171a1f;--w1-muted:#48505a;--w1-muted-soft:#6c7682;
--w1-amber:#f0a500;--w1-amber-deep:#c98600;--w1-amber-ink:#3a2c05;--w1-amber-line:#edc46e;--w1-amber-bg:#fffaf0;--w1-green:#2f7d51;--w1-green-bg:#e4f0e7;--w1-red:#c0453a;--w1-red-bg:#f6e2df;--w1-grey:#b4b2a9;
--w1-shadow:0 1px 2px rgba(25,29,35,.06),0 6px 20px -12px rgba(25,29,35,.28);color:var(--w1-ink);font:14px/1.45 Inter,system-ui,sans-serif}
.w1 *{box-sizing:border-box}
.w1 .w1-phone{width:375px;border:8px solid var(--w1-steel-900);border-radius:34px;background:var(--w1-bg);padding:14px 12px;align-self:flex-start}
.w1 .w1-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.w1 .w1-ph h2{font:600 28px Oswald;margin:0}
.w1 .w1-ph p{margin:2px 0 0;color:var(--w1-muted);font-size:12.5px}
.w1 .w1-tabs{display:flex;gap:6px;margin-top:14px}
.w1 .w1-tabs span{padding:9px 16px;font-weight:700;font-size:13.5px;border-radius:10px;background:#dfe3e8;color:var(--w1-muted)}
.w1 .w1-tabs span.w1-on{background:var(--w1-amber);color:var(--w1-amber-ink)}
.w1 .w1-tabs em{font-style:normal;font-size:11px;background:rgba(255,255,255,.7);border-radius:999px;padding:0 6px;margin-left:5px}
.w1 .w1-tabs em.w1-r{background:var(--w1-red);color:#fff}
.w1 .w1-bar{display:flex;gap:10px;align-items:center;margin:14px 0 12px;flex-wrap:wrap}
.w1 .w1-search{flex:1;min-width:220px;background:#fff;border:1px solid var(--w1-line);border-radius:10px;padding:9px 12px;color:var(--w1-muted-soft)}
.w1 .w1-seg{display:inline-flex;border:1px solid var(--w1-line);border-radius:10px;overflow:hidden;background:#fff}
.w1 .w1-seg span{padding:8px 12px;font-weight:700;font-size:12.5px;color:var(--w1-muted)}
.w1 .w1-seg span.w1-on{background:var(--osz-sel-bg);color:var(--osz-sel-ink);box-shadow:inset 0 0 0 1px var(--osz-sel-edge)}
.w1 .w1-btn{border:1px solid var(--w1-line);background:#fff;border-radius:10px;padding:8px 12px;font-weight:700;font-size:12.5px;white-space:nowrap}
.w1 .w1-btn.w1-p{background:var(--w1-amber);border-color:var(--w1-amber);color:var(--w1-amber-ink)}
.w1 .w1-btn.w1-sm{padding:4px 9px;font-size:11.5px}
.w1 .w1-board{display:grid;grid-template-columns:repeat(5,1fr) 1.15fr;gap:10px;align-items:start}
.w1 .w1-col{background:#e9ecf0;border-radius:12px;padding:8px;display:flex;flex-direction:column}
.w1 .w1-col h4{margin:2px 4px 8px;font:700 11px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--w1-muted);display:flex;justify-content:space-between;align-items:center}
.w1 .w1-col h4 b{background:#fff;border-radius:999px;padding:0 7px;font-size:11px;color:var(--w1-ink)}
.w1 .w1-cards{display:flex;flex-direction:column;gap:7px}
.w1 .w1-c{background:#fff;border:1px solid var(--w1-line);border-left:4px solid var(--w1-grey);border-radius:10px;padding:8px 9px;font-size:12px}
.w1 .w1-c b{display:block;font-size:12.5px}
.w1 .w1-c .w1-m{color:var(--w1-muted)}
.w1 .w1-c .w1-f{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:6px}
.w1 .w1-c.w1-risk{border-left-color:var(--w1-red)}
.w1 .w1-c.w1-att{border-left-color:var(--w1-amber)}
.w1 .w1-c.w1-ok{border-left-color:var(--w1-green)}
.w1 .w1-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.w1 .w1-tg{font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 6px;background:var(--w1-line-soft);color:var(--w1-muted)}
.w1 .w1-tg.w1-p{background:#eef0ff;color:#3b4aa0}
.w1 .w1-tg.w1-r{background:var(--w1-red-bg);color:var(--w1-red)}
.w1 .w1-tg.w1-a{background:var(--w1-amber-bg);color:var(--w1-amber-ink)}
.w1 .w1-tg.w1-g{background:var(--w1-green-bg);color:var(--w1-green)}
.w1 .w1-av{width:20px;height:20px;border-radius:50%;background:var(--w1-steel-900);color:#fff;font-size:9px;font-weight:700;display:inline-grid;place-items:center}
.w1 .w1-mv{display:flex;gap:6px;margin-top:8px}
.w1 .w1-mv span{flex:1;min-height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--w1-line);border-radius:9px;background:#f7f8fa;font-size:11.5px;font-weight:700;color:var(--w1-ink);text-align:center;padding:2px 4px}
.w1 .w1-mv span.w1-b{flex:0 0 40px;font-size:16px}
.w1 .w1-mv span.w1-n{white-space:nowrap;background:var(--w1-steel-900);color:#fff;border-color:var(--w1-steel-900)}
.w1 .w1-rfr{border:2px solid var(--w1-amber)!important;box-shadow:0 0 0 3px rgba(240,165,0,.18)}
.w1 .w1-rfr-t{display:block;margin-top:5px;font-size:10.5px;font-weight:800;color:var(--w1-amber-ink);background:var(--w1-amber-bg);border:1px solid var(--w1-amber-line);border-radius:6px;padding:1px 6px}
.w1 .w1-st{font-size:10px;font-weight:700;color:var(--w1-red);background:var(--w1-red-bg);border-radius:6px;padding:0 5px;margin-left:4px}
.w1 .w1-done{background:#eef2ee}
.w1 .w1-done .w1-c{border-left-color:var(--w1-green)}
.w1 .w1-wk{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:8px;padding:4px 6px;margin:0 0 8px;font-size:11.5px;font-weight:700}
.w1 .w1-wk i{font-style:normal;color:var(--w1-muted-soft);padding:0 4px}
.w1 .w1-more{text-align:center;font-size:12px;font-weight:700;color:var(--w1-amber-deep);padding:6px}
.w1 .w1-hint{font-size:12px;color:var(--w1-muted);background:#fff;border:1px dashed var(--w1-line);border-radius:10px;padding:8px 10px;margin-top:12px}
.w1 .w1-tbl{background:#fff;border:1px solid var(--w1-line);border-radius:14px;overflow:hidden}
.w1 .w1-tr{display:grid;grid-template-columns:1.4fr 1.5fr 1fr .7fr .6fr .8fr;gap:10px;padding:9px 14px;border-top:1px solid var(--w1-line-soft);font-size:12.5px;align-items:center}
.w1 .w1-tr.w1-h{border-top:0;font-size:11px;font-weight:700;color:var(--w1-muted-soft);text-transform:uppercase;letter-spacing:.04em;background:#fafbfc}
.w1 .w1-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;background:var(--w1-line-soft);color:var(--w1-muted);white-space:nowrap}
.w1 .w1-pill.w1-g{background:var(--w1-green-bg);color:var(--w1-green)}
.w1 .w1-pill.w1-a{background:var(--w1-amber-bg);color:var(--w1-amber-ink)}
.w1 .w1-pill.w1-r{background:var(--w1-red-bg);color:var(--w1-red)}
.w1 .w1-pg{display:flex;justify-content:space-between;padding:10px 14px;font-size:12px;color:var(--w1-muted);border-top:1px solid var(--w1-line-soft)}
.w1 .w1-chips{display:flex;gap:6px;flex-wrap:wrap}
.w1 .w1-chip{border:1px solid var(--w1-line);background:#fff;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;color:var(--w1-muted)}
.w1 .w1-chip.w1-on{background:var(--osz-sel-bg);color:var(--osz-sel-ink);box-shadow:inset 0 0 0 1px var(--osz-sel-edge);border-color:var(--osz-sel-edge)}
.w1 .w1-sec{margin-top:30px;padding-top:22px;border-top:2px dashed #cfd5dc}
.w1 .w1-sec>h3{font:600 20px Oswald;margin:0 0 4px}
.w1 .w1-sec>p{margin:0 0 12px;color:var(--w1-muted);font-size:12.5px}
.w1 .w1-card{background:#fff;border:1px solid var(--w1-line);border-radius:14px;box-shadow:var(--w1-shadow);padding:14px 16px;margin-bottom:12px}
.w1 .w1-card .w1-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.w1 .w1-card h5{margin:0;font:600 16px Oswald}
.w1 .w1-card h5 small{font:500 12px Inter;color:var(--w1-muted-soft);margin-left:6px}
.w1 .w1-ln{display:grid;grid-template-columns:1.2fr 1.4fr .8fr .7fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--w1-line-soft);font-size:12.5px}
.w1 .w1-ln:first-of-type{border-top:0}
.w1 .w1-ln .w1-m{color:var(--w1-muted)}
.w1 .w1-amt{font-family:Oswald;font-size:15px;font-weight:600;text-align:right}
.w1 .w1-sum3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.w1 .w1-k{background:#fff;border:1px solid var(--w1-line);border-radius:12px;padding:10px 12px}
.w1 .w1-k small{display:block;color:var(--w1-muted-soft);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.w1 .w1-k b{font:600 22px Oswald}
.w1 .w1-k.w1-r{border-color:#e7b4ae;background:#fdf5f4}
.w1 .w1-k.w1-a{border-color:var(--w1-amber-line);background:var(--w1-amber-bg)}
.w1 details.w1-fold{background:#fff;border:1px solid var(--w1-line);border-radius:12px;padding:10px 14px;margin-bottom:8px}
.w1 details.w1-fold summary{font-weight:700;font-size:13px;cursor:pointer;display:flex;justify-content:space-between}
.w1 .w1-g2{display:grid;grid-template-columns:1.1fr 1fr;gap:12px}
.w1 .w1-cust{display:grid;grid-template-columns:1.3fr 1fr .8fr .8fr .8fr;gap:10px;padding:9px 14px;border-top:1px solid var(--w1-line-soft);font-size:12.5px;align-items:center}
.w1 .w1-cust.w1-h{border-top:0;font-size:11px;font-weight:700;color:var(--w1-muted-soft);text-transform:uppercase;letter-spacing:.04em;background:#fafbfc}
.w1 .w1-stg{display:flex;gap:6px;overflow:auto;margin:10px 0}
.w1 .w1-stg span{flex:none;border:1px solid var(--w1-line);background:#fff;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700}
.w1 .w1-stg span.w1-on{background:var(--osz-sel-bg);color:var(--osz-sel-ink);box-shadow:inset 0 0 0 1px var(--osz-sel-edge);border-color:var(--osz-sel-edge)}
.w1 .w1-stg b{margin-left:4px}
@media (max-width:640px){
.w1 .w1-tabs span{padding:8px 10px;font-size:12.5px}
.w1 .w1-c{margin-bottom:8px}
}
/* W1-END */
/* W1 app glue (01-oct): the skeleton's search box holds a real input; the page title comes from the skeleton header;
   Work's old section tabs are replaced by the skeleton tabs; phone board = one stage at a time (skeleton phone). */
.w1 .w1-sbox{position:relative;display:flex;align-items:center;gap:8px}.w1 .w1-sbox .wk-ico{position:static;transform:none;flex:none;color:var(--w1-muted-soft)}
.w1 .w1-sbox input{flex:1;min-width:0;border:0;background:none;padding:0!important;font:inherit;color:var(--w1-ink);outline:none}
.w1 .w1-sbox .work-locator-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--w1-line);border-radius:12px;box-shadow:var(--w1-shadow);padding:6px;margin:0;max-height:360px;overflow:auto;list-style:none;display:grid;gap:4px}
.w1 select.w1-chip{appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit;padding-right:24px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2348505a' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center}
.w1 label.w1-chip{display:inline-flex;align-items:center;gap:6px}.w1 label.w1-chip input{border:0;font:inherit;color:inherit;background:none}
.w1 [role="button"]{cursor:pointer}.w1 .w1-tabs span,.w1 .w1-seg span,.w1 .w1-chip{user-select:none}
.w1 .w1-stg{display:none}
.w1 .w1-results{margin-top:10px;overflow-x:auto}
.w1 .pd-add summary{list-style:none;display:inline-block}.w1 .pd-add summary::-webkit-details-marker{display:none}
.w1 .w1-fold summary{list-style:none}.w1 .w1-fold summary::-webkit-details-marker{display:none}.w1 .w1-fold[open] summary{margin-bottom:8px}
.w1 .w1-ln .to-cb{background:#fff;border:1px solid var(--w1-line);color:var(--w1-ink);border-radius:9px;padding:4px 9px;font-size:11.5px;font-weight:700;min-height:0}
@media (max-width:640px){
  .w1 .w1-ph h2{font-size:28px}.w1 .w1-tabs span{padding:8px 10px;font-size:12.5px}
  .w1 .w1-bar>.w1-sbox{flex:1 1 100%}.w1 .w1-seg{display:flex;flex:1 1 100%}.w1 .w1-seg span{flex:1;text-align:center}
  .w1 .w1-stg{display:flex}.w1 .w1-board{display:block}.w1 .w1-col{display:none;background:none;padding:0}.w1 .w1-col.w1-sel{display:block}.w1 .w1-col h4{display:none}
  .w1 .w1-tr{grid-template-columns:1fr 1fr;row-gap:4px}.w1 .w1-tr.w1-h{display:none}
  .w1 .w1-cust{grid-template-columns:1fr auto;row-gap:2px}.w1 .w1-cust.w1-h{display:none}
  .w1 .w1-sum3,.w1 .w1-g2{grid-template-columns:1fr}.w1 .w1-ln{grid-template-columns:1fr auto!important;row-gap:4px}
}
.w1 .w1-g2>*,.w1 .w1-sum3>*{min-width:0}
.w1 i.w1-lg,.w1 i.w1-sh{font-style:normal}.w1 .w1-sh{display:none}
@media (max-width:640px){.w1 .w1-lg{display:none!important}.w1 i.w1-sh{display:inline}.w1 select.w1-chip[aria-label="Technician"]{display:none}.w1 .w1-ph{align-items:flex-end}}
/* 01-oct (Mathew): the Work bar keeps one layout in Board, List and Customers (Tech slot reserved) and its three
   controls share one height and radius. */
.w1 .w1-keep{visibility:hidden}.w1 .work-locator{margin:0}
.w1 .w1-bar{align-items:center}
.w1 .w1-bar>.w1-sbox,.w1 .w1-bar>.w1-seg,.w1 .w1-bar>select.w1-chip{height:40px;border-radius:10px;box-sizing:border-box}
.w1 .w1-bar>.w1-sbox{padding-top:0;padding-bottom:0}
.w1 .w1-bar>.w1-seg{display:inline-flex;align-items:stretch}.w1 .w1-bar>.w1-seg span{display:flex;align-items:center;padding:0 14px}
.w1 .w1-bar>select.w1-chip{padding:0 30px 0 14px;font-size:12.5px;line-height:38px}

/* 01-oct (Mathew): section tabs share the width equally, in every area (Today's Overview / Shop Numbers, Work's three) */
.area-nav>*{flex:1 1 0!important;min-width:0;justify-content:center}
.w1 .w1-intro{margin:2px 2px 12px}.w1 .w1-intro h3{font:600 20px Oswald,sans-serif;margin:0 0 4px;color:var(--w1-ink)}.w1 .w1-intro h3 u{text-underline-offset:3px}
.w1 .w1-intro p{margin:0;color:var(--w1-muted);font-size:12.5px}
.w1 .w1-fixed{margin-top:0}.w1 .w1-acts{display:flex;gap:8px;margin-left:auto;flex:none}
.w1 .w1-acts>.w1-btn,.w1 .w1-acts summary.w1-btn{height:40px;display:inline-flex;align-items:center;border-radius:10px;box-sizing:border-box}
@media (max-width:1100px){.w1 .w1-fixed>.w1-sbox{flex:1 1 100%}}
@media (max-width:640px){.w1 .w1-acts{margin-left:0;width:100%}.w1 .w1-acts>*{flex:1;justify-content:center}.w1 .w1-acts .pd-add{flex:1}.w1 .w1-acts .pd-add summary{width:100%;justify-content:center}}
.w1 .w1-acts{align-items:center}.w1 .w1-acts .pd-add{display:flex}.w1 .w1-acts .pd-add summary{margin:0}
/* 01-oct: board of 6 stage columns needs ~1180px; below that it wraps into rows of 3 (as the owner's board did).
   Phone: the three Work tabs size to their text so none is cut (desktop keeps them equal). */
@media (max-width:1280px) and (min-width:641px){.w1 .w1-board{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
.w1 .w1-col,.w1 .w1-c{min-width:0}.w1 .w1-c b{overflow-wrap:anywhere}
@media (max-width:640px){.area-nav>*{flex:1 1 auto!important;font-size:12.5px!important;padding:8px 6px!important}}
/* 01-oct (Mathew): section counts as a round badge on the tab's top-right corner (like the bell), not words */
.area-nav{overflow:visible}.area-nav>button{position:relative}
.area-nav .an-b{position:absolute;top:-8px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--steel-900,#191d23);color:#fff;font:700 11.5px/22px Inter,sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--bg,#f2f4f7);pointer-events:none}
.area-nav .an-b.r{background:#c0453a}

/* 01-oct (Mathew): Work moves like Today — the section enters in a short stagger each time it is shown */
@keyframes w1Up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.w1>*{animation:w1Up .38s ease both}.w1>*:nth-child(2){animation-delay:.05s}.w1>*:nth-child(3){animation-delay:.1s}.w1>*:nth-child(4){animation-delay:.15s}.w1>*:nth-child(5){animation-delay:.2s}.w1>*:nth-child(n+6){animation-delay:.24s}
.w1 .w1-col{animation:w1Up .4s ease both}.w1 .w1-col:nth-child(2){animation-delay:.06s}.w1 .w1-col:nth-child(3){animation-delay:.12s}.w1 .w1-col:nth-child(4){animation-delay:.18s}.w1 .w1-col:nth-child(5){animation-delay:.24s}
.w1 .w1-tr,.w1 .w1-cust,.w1 .w1-ln,.w1 .w1-dgrid>.w1-c{animation:w1Up .32s ease both}
.w1 .w1-tr:nth-child(2),.w1 .w1-cust:nth-child(2),.w1 .w1-ln:nth-child(2){animation-delay:.03s}.w1 .w1-tr:nth-child(3),.w1 .w1-cust:nth-child(3),.w1 .w1-ln:nth-child(3){animation-delay:.06s}.w1 .w1-tr:nth-child(4),.w1 .w1-cust:nth-child(4),.w1 .w1-ln:nth-child(4){animation-delay:.09s}.w1 .w1-tr:nth-child(5),.w1 .w1-cust:nth-child(5),.w1 .w1-ln:nth-child(5){animation-delay:.12s}.w1 .w1-tr:nth-child(n+6),.w1 .w1-cust:nth-child(n+6),.w1 .w1-ln:nth-child(n+6){animation-delay:.15s}
.w1 .w1-flt{animation:w1Up .34s ease both}.w1 .w1-flt:nth-child(2){animation-delay:.04s}.w1 .w1-flt:nth-child(3){animation-delay:.08s}.w1 .w1-flt:nth-child(4){animation-delay:.12s}.w1 .w1-flt:nth-child(5){animation-delay:.16s}
@media (prefers-reduced-motion:reduce){.w1 *,.w1>*{animation:none!important}}
/* board interaction: lift on hover, grab to drag, drop target highlight */
.w1 .w1-c{transition:transform .15s ease,box-shadow .15s ease}.w1 .w1-c:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(25,29,35,.35)}
.w1 .w1-col.w1-over,.w1 .w1-deliv.w1-over{outline:2px dashed var(--w1-amber);outline-offset:-2px;background:#fff8e6}
/* Delivered as its own section */
.w1 .w1-deliv{margin-top:14px;background:#f5f8f5;border-color:#dfe8e0}.w1 .w1-deliv .w1-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.w1 .w1-dn{font:600 18px Oswald,sans-serif;background:#fff;border:1px solid var(--w1-line);border-radius:999px;padding:0 10px}
.w1 .w1-wk-inline{margin:0;background:#fff;border:1px solid var(--w1-line);gap:10px}
.w1 .w1-link{margin-left:auto;color:#8a5c00;font-size:12.5px;font-weight:700}
.w1 .w1-dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
/* filters in Today's chip style: dot · label · number */
.w1 .w1-flts{display:flex;gap:8px;flex-wrap:wrap}
.w1 .w1-flt{display:flex;align-items:center;gap:8px;border:1px solid var(--w1-line);border-radius:11px;background:#fff;padding:7px 12px;font:600 12.5px Inter,sans-serif;color:var(--w1-ink);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s}
.w1 .w1-flt i{width:8px;height:8px;border-radius:50%;flex:none}.w1 .w1-flt b{font:600 17px Oswald,sans-serif}
.w1 .w1-flt:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.08)}.w1 .w1-flt.w1-on{border-color:var(--w1-amber);box-shadow:0 0 0 2px rgba(240,165,0,.18)}
/* customer tools: real buttons */
.w1 .w1-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
/* 03-oct: Customers sections (Customers · Waitlist · Archived vehicles) */
.w1 .cu-secs{margin:0 0 12px}
.w1 .cu-sec-body{padding:18px 20px}
.w1 .cu-sec-head{margin:0 0 14px}.w1 .cu-sec-head h4{margin:0;font-size:17px;font-weight:700;color:var(--ink)}.w1 .cu-sec-head p{margin:4px 0 0;font-size:13px;color:var(--muted)}
@media (max-width:640px){.w1 .cu-secs{overflow-x:auto;flex-wrap:nowrap}.w1 .cu-sec-body{padding:14px}}
.w1 .w1-dc{display:inline-flex;align-items:center;gap:6px;background:#fff}.w1 .w1-dc select{border:0;background:transparent;font:inherit;color:inherit;cursor:pointer}
@media (max-width:640px){.w1 .w1-deliv .w1-link{margin-left:0}.w1 .w1-flt{flex:1 1 auto}}

/* 01-oct (Mathew): pointer drag on the board — lifted card follows the pointer, dashed slot, room opens, glide on drop */
@media (hover:hover){.w1 .w1-cards>.w1-c{cursor:grab}}
.w1 .w1-ghost,.w1-ghost{position:fixed;z-index:1000;pointer-events:none;margin:0;transform:rotate(1.5deg) scale(1.03);box-shadow:0 18px 40px -12px rgba(25,29,35,.45);opacity:.97;transition:transform .12s ease}
.w1 .w1-ghost.w1-drop,.w1-ghost.w1-drop{transform:none;box-shadow:0 6px 14px -8px rgba(25,29,35,.3)}
.w1 .w1-c.w1-slot{background:transparent!important;border:2px dashed #c9ced4!important;box-shadow:none!important;transform:none!important}.w1 .w1-c.w1-slot>*{visibility:hidden}
body.w1-dragging,body.w1-dragging *{cursor:grabbing!important;user-select:none!important}
.w1 .w1-col.w1-over,.w1 .w1-deliv.w1-over{outline:2px dashed var(--w1-amber);outline-offset:-2px;background:#fff8e6}
@keyframes w1Land{0%{box-shadow:0 0 0 0 rgba(240,165,0,.55)}100%{box-shadow:0 0 0 10px rgba(240,165,0,0)}}
.w1 .w1-c.w1-landed{animation:w1Land .8s ease-out 1}
@media (prefers-reduced-motion:reduce){.w1-ghost,.w1-ghost.w1-drop{transition:none}.w1 .w1-c.w1-landed{animation:none}}
/* 01-oct (Mathew): every stage column is a full drop target — same height as the tallest one (min 220px), so an
   empty column can be dropped on anywhere, not only on its name. */
.w1 .w1-board{align-items:stretch}
.w1 .w1-board>.w1-col{display:flex;flex-direction:column;min-height:220px}
.w1 .w1-board>.w1-col>.w1-cards{flex:1;min-height:120px;border-radius:9px}
.w1 .w1-board>.w1-col>.w1-cards:empty{border:1.5px dashed #d3d8de;background:rgba(255,255,255,.35)}
body.w1-dragging .w1 .w1-board>.w1-col>.w1-cards{min-height:160px}
@media (max-width:640px){.w1 .w1-board>.w1-col{min-height:0}.w1 .w1-board>.w1-col>.w1-cards:empty{min-height:80px}}

/* 01-oct (Mathew): immersion inside Work — the bar stays put, the section line slides in, the content plays */
@keyframes w1Side{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.w1.w1-cont>.w1-fixed{animation:none}
.w1.w1-cont>.w1-intro{animation:w1Side .32s ease both}
.w1.w1-still>*,.w1.w1-still .w1-col,.w1.w1-still .w1-tr,.w1.w1-still .w1-cust,.w1.w1-still .w1-ln,.w1.w1-still .w1-flt,.w1.w1-still .w1-dgrid>.w1-c{animation:none}
.w1.w1-still .w1-c.w1-landed{animation:w1Land .8s ease-out 1}
/* 01-oct (Mathew): the board is live — say so at the right of the section line */
.w1 .w1-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.w1 .w1-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--w1-muted);background:#fff;border:1px solid var(--w1-line);border-radius:999px;padding:6px 12px}
.w1 .w1-live i{width:7px;height:7px;border-radius:50%;background:var(--w1-green);box-shadow:0 0 0 3px rgba(47,125,81,.18)}
.w1 .w1-pills{display:flex;gap:8px;flex-wrap:wrap}.w1 .w1-jump{cursor:pointer;color:var(--w1-ink)}.w1 .w1-jump:hover{border-color:var(--w1-amber)}.w1 .w1-jump b{color:var(--w1-green)}
/* 01-oct (Mathew): "Live · oldest N d" lights up the oldest car's card for a moment */
@keyframes w1Spot{0%,100%{box-shadow:0 0 0 0 rgba(240,165,0,0)}20%,60%{box-shadow:0 0 0 4px rgba(240,165,0,.9),0 0 0 10px rgba(240,165,0,.18)}40%,80%{box-shadow:0 0 0 3px rgba(240,165,0,.55)}}
.w1 .w1-c.w1-spot{animation:w1Spot 2.4s ease-in-out 1!important;position:relative;z-index:2}
/* 01-oct (Mathew): tablet — the board wraps into rows and the last row's columns stretch to fill the width (no blank gap) */
@media (max-width:1280px) and (min-width:641px){
  .w1 .w1-board{display:flex!important;flex-wrap:wrap;gap:10px}
  .w1 .w1-board>.w1-col{flex:1 1 calc(33.333% - 10px);min-width:220px}
}
/* phone — one stage at a time (the full-height column rule must not show them all), and stage chips that fill the
   width as equal, easy-to-tap buttons: name on top, count below */
@media (max-width:640px){
  .w1 .w1-board>.w1-col{display:none}
  .w1 .w1-board>.w1-col.w1-sel{display:flex}
  .w1 .w1-stg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;overflow:visible;margin:10px 0}
  .w1 .w1-stg span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px;padding:6px 2px;border-radius:12px;font-size:11px;line-height:1.15;text-align:center;white-space:normal}
  .w1 .w1-stg span b{margin:0;font:600 18px Oswald,sans-serif}
}
/* 01-oct (Mathew): the board's two status chips use Today's chip look, not pills */
.w1 .w1-stat{cursor:default;animation:none}.w1 .w1-stat.w1-jump{cursor:pointer}.w1 .w1-stat:not(.w1-jump):hover{transform:none;box-shadow:none}
.w1 .w1-stat .w1-down{color:var(--w1-muted)}
@keyframes w1Pulse{0%{box-shadow:0 0 0 0 rgba(47,125,81,.45)}100%{box-shadow:0 0 0 6px rgba(47,125,81,0)}}
.w1 .w1-stat .w1-pulse{animation:w1Pulse 1.8s ease-out infinite}
@media (prefers-reduced-motion:reduce){.w1 .w1-stat .w1-pulse{animation:none}}

/* 01-oct: the sidebar clock card is emptied on the Time Clock screen; no empty box left behind */
.sidebar .clock-widget:empty{display:none}
/* 01-oct (Mathew): for a technician who has not clocked in, "Clock in" is the most important thing on any screen other
   than the Time Clock — a tall, full-width button with large text and a soft amber pulse. */
@keyframes ciPulse{0%{box-shadow:0 0 0 0 rgba(240,165,0,.55)}70%{box-shadow:0 0 0 12px rgba(240,165,0,0)}100%{box-shadow:0 0 0 0 rgba(240,165,0,0)}}
@media (max-width:900px){
  body.tech-mode #mobileClockBar>.btn.primary:only-child{min-height:64px;font:700 19px Inter,sans-serif;letter-spacing:.01em;border-radius:14px;gap:10px;animation:ciPulse 2.2s ease-out infinite}
  body.tech-mode #mobileClockBar>.btn.primary:only-child svg{width:22px;height:22px}
}
.sidebar .clock-widget>.btn.primary:only-child{min-height:52px;font-size:16px}
body.tech-mode .sidebar .clock-widget>.btn.primary:only-child{animation:ciPulse 2.2s ease-out infinite}
@media (prefers-reduced-motion:reduce){body.tech-mode #mobileClockBar>.btn.primary:only-child,body.tech-mode .sidebar .clock-widget>.btn.primary:only-child{animation:none}}

/* 01-oct (Mathew): List / Customers tables — every row is its own grid, so content-sized tracks ("Waiting approval · attention"
   vs "Waiting") shifted the columns row by row. Fixed tracks for the short columns, shrinkable text columns that wrap. */
@media (min-width:641px){
  .w1 .w1-tr{grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) 196px 72px 56px 112px}
  .w1 .w1-cust{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,.8fr)}
  .w1 .w1-tr>*,.w1 .w1-cust>*{min-width:0;overflow-wrap:anywhere}
  .w1 .w1-tr .w1-pill{justify-self:start;max-width:100%;white-space:normal;line-height:1.35}
}

/* 01-oct (Mathew): between phone and desktop the Work bar broke into short rows with blank gaps (seg, Tech and the
   actions each sat small on its own row; the filter chips did not fill theirs). Under 1100px every row now fills
   its width: search on its own row, then seg + Tech + actions sharing the next one, and the chips stretching. */
@media (min-width:641px) and (max-width:1100px){
  .w1 .w1-bar>.w1-seg{flex:1 1 auto}.w1 .w1-bar>.w1-seg span{flex:1;justify-content:center}
  .w1 .w1-bar>select.w1-chip{flex:1 1 140px}
  .w1 .w1-acts{flex:1 1 auto;margin-left:0}.w1 .w1-acts>*{flex:1;justify-content:center}.w1 .w1-acts .pd-add summary{width:100%;justify-content:center}
  .w1 .w1-flts{flex:1 1 100%}.w1 .w1-flts>.w1-flt{flex:1 1 auto;justify-content:center}
}
@media (min-width:641px) and (max-width:1100px){.w1 .w1-tr{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 132px 50px 44px 96px}}
/* 01-oct (Mathew): 1100–1200px still broke the top bar into a half-empty second row → the stacked layout reaches 1200px.
   The filter chips always share out their whole row, at every width (sort sits at the row's end on desktop). */
@media (min-width:1101px) and (max-width:1200px){
  .w1 .w1-fixed>.w1-sbox{flex:1 1 100%}
  .w1 .w1-bar>.w1-seg{flex:1 1 auto}.w1 .w1-bar>.w1-seg span{flex:1;justify-content:center}
  .w1 .w1-fixed>select.w1-chip{flex:1 1 140px}
  .w1 .w1-acts{flex:1 1 auto;margin-left:0}.w1 .w1-acts>*{flex:1;justify-content:center}.w1 .w1-acts .pd-add summary{width:100%;justify-content:center}
}
@media (min-width:641px){.w1 .w1-flts{flex:1 1 auto}.w1 .w1-flts>.w1-flt{flex:1 1 auto;justify-content:center}}
/* 01-oct (Mathew): the Customers tool buttons fill their row too, like the filter chips. */
@media (min-width:641px){.w1 .w1-tools{display:flex;flex-wrap:wrap;gap:8px}.w1 .w1-tools>*{flex:1 1 auto;justify-content:center;text-align:center}}
/* 01-oct (Mathew): "Open now" and "Delivered this week" did not look tappable, and left the row half empty.
   They now share the space right of the intro, carry an action word ("Show me →" / "Go to it ↓") and lift on hover. */
.w1 .w1-pills{flex:1 1 380px;justify-content:flex-end}.w1 .w1-pills>.w1-flt{flex:1 1 auto}
.w1 .w1-stat.w1-jump{border-color:#cfd5dc;box-shadow:0 1px 0 rgba(25,29,35,.06);transition:transform .15s,box-shadow .15s,border-color .15s}
.w1 .w1-stat.w1-jump:hover{transform:translateY(-1px);border-color:var(--w1-amber);box-shadow:0 6px 14px -8px rgba(25,29,35,.35)}
.w1 .w1-stat.w1-jump:active{transform:none;box-shadow:none}
.w1 .w1-stat.w1-jump:focus-visible{outline:2px solid var(--w1-amber);outline-offset:2px}
.w1 .w1-go{margin-left:auto;padding-left:10px;font-style:normal;font-size:12px;font-weight:700;color:#8a5c00;white-space:nowrap}
.w1 .w1-stat.w1-jump:hover .w1-go{text-decoration:underline;text-underline-offset:3px}
.w1 .w1-intro>div{flex:0 1 auto}.w1 .w1-pills{flex:1 1 560px;flex-wrap:nowrap}.w1 .w1-pills>.w1-flt{flex:1 1 0;min-width:0}
@media (max-width:640px){.w1 .w1-pills{flex-wrap:wrap;flex-basis:100%}.w1 .w1-pills>.w1-flt{flex:1 1 100%}}

/* 01-oct (Mathew, ESQUELETO_PARTS approved): Work › Parts in one column — chips, Waiting on parts, Parts log, Parts money + vendors. */
.w1 .w1-pchips{margin:0 0 4px}.w1 .w1-pchips>.w1-flt small{font-weight:500;margin-left:-2px}
.w1 .w1-pchips>.w1-flt.w1-on{border-color:var(--w1-amber);box-shadow:0 0 0 3px rgba(240,165,0,.15)}
.w1 .w1-pwait,.w1 #partsLog,.w1 #partsMoney{margin-top:14px}
.w1 .w1-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.w1 .w1-pw{border:1px solid var(--w1-line);border-left:4px solid var(--w1-amber);border-radius:10px;padding:10px 12px;font-size:12.5px;display:flex;flex-direction:column;gap:2px;background:#fff}
.w1 .w1-pw.w1-late{border-left-color:var(--w1-red)}.w1 .w1-pw.w1-in{border-left-color:var(--w1-green);background:#fbfdfb}
.w1 .w1-pw>b{font-size:13px;cursor:pointer}.w1 .w1-pw>b:hover{text-decoration:underline;text-underline-offset:3px}
.w1 .w1-pw ul{list-style:none;margin:6px 0;padding:0;display:grid;gap:4px}.w1 .w1-pw li{display:flex;justify-content:space-between;gap:8px;align-items:center}
.w1 .w1-pw p{margin:4px 0 0}.w1 .w1-pv{font-size:12px}
.w1 .w1-pf{display:flex;gap:6px;margin-top:auto;padding-top:8px}.w1 .w1-pf>*{flex:1;justify-content:center;text-align:center;text-decoration:none;min-height:34px;display:inline-flex;align-items:center}
.w1 .w1-btn.w1-dk{background:var(--w1-steel-900);border-color:var(--w1-steel-900);color:#fff}
.w1 .w1-tag{display:inline-block;font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 6px;background:var(--w1-line-soft);color:var(--w1-muted);white-space:nowrap}
.w1 .w1-tag.w1-tr2{background:var(--w1-red-bg);color:var(--w1-red)}.w1 .w1-tag.w1-tg{background:var(--w1-green-bg);color:var(--w1-green)}.w1 .w1-tag.w1-ta{background:var(--w1-amber-bg);color:#8a5c00}
.w1 .w1-phd{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.w1 .w1-phd h5{margin:0}
.w1 .w1-ptools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.w1 .w1-pseg span{padding:7px 12px}
.w1 .w1-date{display:inline-flex;align-items:center;gap:6px;font-size:12px;height:36px;padding:0 10px}.w1 .w1-date input{border:0;font:inherit;background:none;color:var(--w1-ink);min-width:0}
.w1 .w1-pnote{margin:8px 0 0;font-size:12px;color:var(--w1-muted)}
.w1 .w1-plog{margin-top:10px}
.w1 .w1-num{text-align:right;font-variant-numeric:tabular-nums}
.w1 .w1-btn.w1-core{color:var(--w1-red)}
.w1 .w1-pg2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;margin-top:14px}.w1 .w1-pg2>.w1-card{margin-top:0}
.w1 .w1-pmoney{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.w1 .w1-pmoney>div{background:#f7f8fa;border-radius:10px;padding:10px 12px;min-width:0}.w1 .w1-pmoney span{display:block;font-size:11.5px;color:var(--w1-muted);font-weight:700}
.w1 .w1-pmoney b{display:block;font:600 22px Oswald,sans-serif;color:var(--w1-ink)}.w1 .w1-pmoney small{display:block;font-size:11.5px}
.w1 .w1-up{color:var(--w1-green)}.w1 .w1-dn{color:var(--w1-red)}
.w1 .w1-pfoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0 0;font-size:12px}
.w1 .w1-pvd{display:grid;grid-template-columns:minmax(0,1fr) 84px 60px 64px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--w1-line-soft);font-size:12.5px}.w1 .w1-pvd:first-of-type{border-top:0}
.w1 .w1-pbar{display:block;height:6px;border-radius:3px;background:var(--w1-line-soft);overflow:hidden;margin-top:4px}.w1 .w1-pbar i{display:block;height:100%;background:var(--w1-amber)}
.w1 .w1-pvd .w1-btn{justify-content:center;text-decoration:none;text-align:center}
/* the old cost sheet, now inside Parts money: Work styles instead of the bare report */
.w1 .w1-costsheet{margin-top:12px;border-top:1px solid var(--w1-line-soft);padding-top:12px}
.w1 .w1-costsheet .card{background:none;border:0;box-shadow:none;padding:0;margin:0}
.w1 .w1-costsheet .section-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:flex-start}
.w1 .w1-costsheet h3{font:600 16px Oswald,sans-serif;margin:0}.w1 .w1-costsheet p{margin:2px 0 0;font-size:12px;color:var(--w1-muted)}
.w1 .w1-costsheet button,.w1 .w1-costsheet select,.w1 .w1-costsheet input{border:1px solid var(--w1-line);background:#fff;border-radius:10px;padding:7px 12px;font:700 12px Inter,sans-serif;color:var(--w1-ink);cursor:pointer}
.w1 .w1-costsheet table{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px}.w1 .w1-costsheet th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--w1-muted-soft);padding:6px 8px;background:#fafbfc}
.w1 .w1-costsheet td{padding:7px 8px;border-top:1px solid var(--w1-line-soft)}
/* Parts log columns: fixed tracks so no row moves the others */
/* the log adapts to its own width (sidebar or not), not the window */
#partsLog{container-type:inline-size}
@container (min-width:760px){
  .w1 .w1-plog .w1-tr{grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) minmax(0,.9fr) 40px 132px 112px}
  .w1 .w1-plog.w1-pcost .w1-tr{grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) minmax(0,.9fr) 40px 76px 76px 132px 112px}
  .w1 .w1-plog .w1-tr.w1-empty{grid-template-columns:1fr}
  .w1 .w1-plog .w1-tr>.w1-btn{justify-self:end}
}
@media (max-width:1100px){.w1 .w1-pg2{grid-template-columns:1fr}}
@container (max-width:759.98px){
  .w1 .w1-plog .w1-tr.w1-h{display:none}
  .w1 .w1-plog .w1-tr{grid-template-columns:minmax(0,1fr) auto;row-gap:3px}
  .w1 .w1-plog .w1-tr>:nth-child(2),.w1 .w1-plog .w1-tr>:nth-child(3){grid-column:1;color:var(--w1-muted)}
  .w1 .w1-plog .w1-tr>.w1-num{display:none}
  .w1 .w1-plog .w1-tr>:last-child{grid-column:2;grid-row:1 / span 2;align-self:center}
  .w1 .w1-ptools{width:100%}.w1 .w1-pseg{display:flex;flex:1 1 100%}.w1 .w1-pseg span{flex:1;text-align:center}.w1 .w1-date{flex:1 1 140px}
}
@media (max-width:900px){.w1 .w1-pmoney{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.w1 .w1-pgrid{grid-template-columns:1fr}.w1 .w1-pvd{grid-template-columns:minmax(0,1fr) 76px 56px}.w1 .w1-pvd>:last-child{display:none}}
.w1 .w1-pills.w1-pchips{flex-wrap:wrap}.w1 .w1-pchips>.w1-flt{flex:1 1 240px;white-space:nowrap}
@media (max-width:640px){.w1 .w1-pchips>.w1-flt{flex:1 1 100%}}
.w1 .w1-pseg span{white-space:nowrap}
#partsMoney>.w1-hd,.w1 .w1-pg2 .w1-hd{flex-wrap:wrap}
@media (max-width:640px){.w1 .w1-pseg span{padding:7px 6px;font-size:12px}.w1 .w1-date{font-size:12px}.w1 .w1-date input{font-size:14px}
  #partsMoney>.w1-hd h5,.w1 .w1-phd h5{flex:1 1 100%}#partsMoney>.w1-hd select{flex:1 1 100%}}
.w1 section.w1-costsheet{margin-top:14px;border-top:1px solid var(--w1-line);padding:14px}
.w1 .w1-costsheet .seg{display:inline-flex;border:1px solid var(--w1-line);border-radius:10px;overflow:hidden;background:#fff;margin-top:10px}
.w1 .w1-costsheet .seg button{border:0;border-radius:0;padding:7px 12px}.w1 .w1-costsheet .seg button.on{background:var(--w1-steel-900);color:#fff}
.w1 .w1-costsheet .stat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:4px}
.w1 .w1-costsheet .stat{background:#f7f8fa;border-radius:10px;padding:10px 12px}.w1 .w1-costsheet .stat span{display:block;font-size:11.5px;font-weight:700;color:var(--w1-muted)}.w1 .w1-costsheet .stat b{font:600 18px Oswald,sans-serif}
.w1 .w1-costsheet tr.click{cursor:pointer}.w1 .w1-costsheet tr.click:hover td{background:#fafbfc}.w1 .w1-costsheet td.mono{font-variant-numeric:tabular-nums}
.w1 .w1-costsheet .t-mut{color:var(--w1-muted);font-size:11.5px}
@media (max-width:900px){.w1 .w1-costsheet .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.w1 .w1-costsheet .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.w1 .w1-costsheet .seg{display:flex;flex-wrap:wrap}.w1 .w1-costsheet .seg button{flex:1 1 45%}}
/* 01-oct (Mathew): Parts — chips never break (each keeps its words on one line and wraps to a new row when it does not fit);
   sortable column headers; the cost sheet as its own block with a preview. */
.w1 .w1-pchips>.w1-flt{flex:1 1 auto;min-width:0}
.w1 .w1-pchips>.w1-flt>span,.w1 .w1-pchips>.w1-flt small,.w1 .w1-pchips>.w1-flt em{white-space:nowrap}
.w1 .w1-sorth{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;border-radius:6px}
.w1 .w1-sorth.w1-num{justify-content:flex-end}.w1 .w1-sorth i{font-style:normal;opacity:.45;font-size:11px}.w1 .w1-sorth.w1-on{color:var(--w1-ink)}.w1 .w1-sorth.w1-on i{opacity:1;color:#8a5c00}
.w1 .w1-sorth:hover{color:var(--w1-ink)}.w1 .w1-sorth:focus-visible{outline:2px solid var(--w1-amber);outline-offset:2px}
.w1 .w1-sheet{margin-top:14px}
.w1 .w1-stiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:12px}
.w1 .w1-stiles>div{background:#f7f8fa;border-radius:10px;padding:10px 12px;min-width:0}.w1 .w1-stiles span{display:block;font-size:11.5px;font-weight:700;color:var(--w1-muted)}.w1 .w1-stiles b{font:600 18px Oswald,sans-serif}
#partsSheet{container-type:inline-size}
@container (min-width:760px){.w1 .w1-sheet-t .w1-tr{grid-template-columns:108px 96px minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1.4fr) 96px}.w1 .w1-sheet-t .w1-tr.w1-empty{grid-template-columns:1fr}}
@container (max-width:759.98px){
  .w1 .w1-sheet-t .w1-tr.w1-h{display:flex;flex-wrap:wrap;gap:6px 12px}
  .w1 .w1-sheet-t .w1-tr{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .w1 .w1-sheet-t .w1-tr>:nth-child(1),.w1 .w1-sheet-t .w1-tr>:nth-child(4),.w1 .w1-sheet-t .w1-tr>:nth-child(5){grid-column:1;color:var(--w1-muted)}
  .w1 .w1-sheet-t .w1-tr>:nth-child(2){grid-column:2;grid-row:1}.w1 .w1-sheet-t .w1-tr>:nth-child(3){grid-column:1;grid-row:1}.w1 .w1-sheet-t .w1-tr>:nth-child(6){grid-column:2;grid-row:2}
}
@container (max-width:759.98px){.w1 .w1-plog .w1-tr.w1-h{display:flex;flex-wrap:wrap;gap:6px 12px}.w1 .w1-plog .w1-tr.w1-h>span:empty{display:none}}
@media (max-width:1100px){.w1 .w1-stiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.w1 .w1-stiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.w1 .w1-pchips .w1-go{display:none}}
@media (max-width:640px){.w1 .w1-sheet .w1-pseg{flex-wrap:wrap}.w1 .w1-sheet .w1-pseg span{flex:1 1 45%}}
/* 01-oct (Mathew): demo shop mark = a car on amber; "OsEzy" under the shop name is the real wordmark, not typed text. */
.brand .mark.mark-car{background:var(--amber,#f0a500);color:#3a2c05;display:grid;place-items:center}.brand .mark.mark-car svg{width:22px;height:22px}
.brand .name small.brand-by{display:block;margin-top:3px;line-height:0}.brand .name small.brand-by img{height:12px;width:auto;opacity:.85}
/* 01-oct (Mathew): the demo shop mark is a photo of a car — the red car cropped from demo-shop-photo.jpg (900×398). */
.brand .mark.mark-photo{background:#191d23 url("/demo-shop-photo.jpg") no-repeat;background-size:164px auto;background-position:-97px -22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
/* ☰ panel on phones: the shop photo had shrunk to a dark 118px strip — taller header, lighter shade, card at the bottom */
@media (max-width:900px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .menu-open .sidebar .brand{min-height:176px;background:
      linear-gradient(180deg,rgba(25,29,35,0) 0%,rgba(25,29,35,.25) 50%,var(--steel-900) 100%),
      var(--shop-photo, radial-gradient(120% 90% at 0% 0%,rgba(240,165,0,.22),transparent 55%)),
      linear-gradient(180deg,var(--steel-800),var(--steel-900));background-size:cover;background-position:center 55%}
}
/* 01-oct fix: the OsEzy wordmark under the shop name was caught by ".brand .logo img{40×40}" and sat to the right of the name.
   It is a line of its own under the name, at its own size, on every screen. */
.brand .logo .name{flex-wrap:wrap}
.brand .logo .name small.brand-by{flex:1 0 100%;display:block;margin-top:4px;line-height:0}
.brand .logo .name small.brand-by img,.sidebar .brand .logo .name small.brand-by img,.menu-open .sidebar .brand .logo .name small.brand-by img{width:auto!important;height:12px!important;border-radius:0!important;background:none!important;object-fit:contain;display:block;opacity:.85}
.w1 .w1-dq{font-size:11px;font-weight:500;color:var(--w1-muted-soft)}
/* 02-oct: on Team the phone clock bar keeps its content (owners/managers see it as the bubble, app-dock.js);
   everyone else still has no bar there, as before. */
@media (max-width:900px){body.team-view:not(.clock-foldable) #mobileClockBar{display:none!important}}

/* 02-oct (Mathew, ESQUELETO_TEAM approved): Team › People · Time · Payroll — same look as Work (.w1 base). */
.w1.t1 .t1-grp{margin-top:12px}
.t1 .t1-ppl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.t1 .t1-p{border:1px solid var(--w1-line);border-left:4px solid var(--w1-grey,#b4b2a9);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s}
.t1 .t1-p:hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(25,29,35,.35)}
.t1 .t1-job{border-left-color:var(--w1-green)}.t1 .t1-break{border-left-color:var(--w1-amber)}.t1 .t1-needs{border-left-color:var(--w1-red)}
.t1 .t1-who{display:flex;gap:10px;align-items:center;min-width:0}.t1 .t1-who>div{min-width:0}
.t1 .t1-av{width:38px;height:38px;border-radius:50%;background:#2a3038 center/cover no-repeat;color:#fff;font:700 13px Inter,sans-serif;display:grid;place-items:center;flex:none}
.t1 .t1-who b{display:block;font-size:13.5px;overflow-wrap:anywhere}.t1 .t1-who small{color:var(--w1-muted);font-size:11.5px}.t1 .t1-nick{color:var(--w1-muted-soft);font-weight:500}
.t1 .t1-st{margin-left:auto;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;background:var(--w1-line-soft);color:var(--w1-muted);white-space:nowrap;flex:none}
.t1 .t1-st.t1-w{background:var(--w1-green-bg);color:var(--w1-green)}.t1 .t1-st.t1-b{background:var(--w1-amber-bg);color:var(--w1-amber-ink)}.t1 .t1-st.t1-x{background:var(--w1-red-bg);color:var(--w1-red)}
.t1 .t1-now{font-size:12px;color:var(--w1-muted);display:flex;justify-content:space-between;gap:8px}.t1 .t1-now b{color:var(--w1-ink)}.t1 .t1-t{font:600 16px Oswald,sans-serif;color:var(--w1-ink);white-space:nowrap}
.t1 .t1-wk{height:6px;border-radius:3px;background:var(--w1-line-soft);overflow:hidden;display:flex}.t1 .t1-wk i{display:block;height:100%}.t1 .t1-bl{background:var(--w1-green)}.t1 .t1-sh{background:#b4b2a9}
.t1 .t1-mini{font-size:11px;color:var(--w1-muted-soft);display:flex;justify-content:space-between;gap:8px}
.t1 .t1-acts{display:flex;gap:6px}.t1 .t1-acts>*{flex:1;justify-content:center;text-align:center}
.t1 .t1-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:2px}
.t1 .t1-tile{background:#fff;border:1px solid var(--w1-line);border-radius:12px;padding:10px 12px;min-width:0}.t1 .t1-tile span{display:block;font-size:11.5px;font-weight:700;color:var(--w1-muted)}
.t1 .t1-tile b{display:block;font:600 22px Oswald,sans-serif;color:var(--w1-ink)}.t1 .t1-tile small{display:block;font-size:11.5px;color:var(--w1-muted-soft);overflow-wrap:anywhere}
.t1 .t1-tile.t1-bad{border-color:var(--w1-red)}.t1 .t1-tile.t1-bad b{color:var(--w1-red)}.t1 .t1-tile.t1-warn{border-color:var(--w1-amber)}
.t1 .t1-daynav{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:1px solid var(--w1-line);border-radius:10px;background:#fff;font-size:12.5px}
.t1 .t1-daynav i{font-style:normal;font-size:18px;color:var(--w1-muted);cursor:pointer;padding:0 4px}
.t1 .t1-legend{margin-left:auto;font-size:11.5px;color:var(--w1-muted);display:inline-flex;align-items:center;gap:6px}.t1 .t1-legend i{width:12px;height:8px;border-radius:2px;display:inline-block;margin-left:6px}
.t1 .t1-scale{position:relative;height:16px;margin:0 96px 2px 162px;font-size:10.5px;color:var(--w1-muted-soft)}.t1 .t1-scale span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.t1 .t1-day{display:grid;grid-template-columns:150px minmax(0,1fr) 84px;gap:12px;align-items:center;padding:8px 6px;border-top:1px solid var(--w1-line-soft);font-size:12.5px;border-radius:8px;cursor:pointer}
.t1 .t1-day:hover,.t1 .t1-day.t1-sel{background:#fafbfc}.t1 .t1-day.t1-sel{box-shadow:inset 3px 0 0 var(--w1-amber)}
.t1 .t1-dn{min-width:0}.t1 .t1-dn b{display:block;overflow-wrap:anywhere}.t1 .t1-dn small{color:var(--w1-muted);font-size:11px}.t1 .t1-red{color:var(--w1-red)!important}
.t1 .t1-dh{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t1 .t1-line{position:relative;height:18px;background:#f4f6f8;border-radius:5px;overflow:hidden}.t1 .t1-line i{position:absolute;top:3px;bottom:3px;border-radius:4px}
.t1 .t1-m{background:var(--w1-green)}.t1 .t1-br{background:var(--w1-amber)}.t1 .t1-s{background:#b4b2a9}.t1 .t1-open{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 4px,transparent 4px 8px)}
.t1 .t1-forgot{background:repeating-linear-gradient(90deg,#f6e2df 0 6px,transparent 6px 12px)!important;top:0!important;bottom:0!important}
.t1 .t1-punch .w1-tr{grid-template-columns:150px minmax(0,1fr) 110px 70px}
.t1 .t1-pay .w1-tr{grid-template-columns:minmax(0,1.6fr) 56px 86px 70px 70px 90px minmax(96px,.7fr) 104px}
.t1 .t1-pay .t1-idle{grid-template-columns:1fr}
.t1 .t1-sub{display:block;font-size:11px;color:var(--w1-muted);font-weight:500;overflow-wrap:anywhere}
.t1 .t1-rm{display:flex;gap:4px;justify-content:flex-end}
.t1 .t1-flag{background:var(--w1-amber-bg);border:1px solid #edc46e;border-radius:10px;padding:9px 12px;font-size:12.5px;margin-top:10px}
.t1 .t1-report{margin-top:12px}.t1 .t1-report>div{margin-top:10px}
@media (max-width:1100px){.t1 .t1-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .t1 .t1-pay .w1-tr.w1-h{display:none}
  .t1 .t1-pay .w1-tr{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .t1 .t1-pay .w1-tr>:nth-child(2),.t1 .t1-pay .w1-tr>:nth-child(3),.t1 .t1-pay .w1-tr>:nth-child(5){display:none}
  .t1 .t1-pay .w1-tr>:nth-child(7){grid-column:2;grid-row:1}.t1 .t1-pay .w1-tr>:nth-child(4){grid-column:1}.t1 .t1-pay .w1-tr>:nth-child(6){grid-column:2}
  .t1 .t1-pay .w1-tr>:nth-child(8){grid-column:1 / -1;justify-content:flex-start}
  .t1 .t1-punch .w1-tr{grid-template-columns:minmax(0,1fr) auto}.t1 .t1-punch .w1-tr.w1-h{display:none}.t1 .t1-punch .w1-tr>:nth-child(3){display:none}
}
@media (max-width:640px){
  .t1 .t1-ppl{grid-template-columns:1fr}.t1 .t1-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t1 .t1-scale{display:none}.t1 .t1-day{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.t1 .t1-day .t1-line{grid-column:1 / -1;grid-row:2}
  .t1 .t1-legend{margin-left:0;flex-wrap:wrap}.t1 .t1-daynav{flex:1;justify-content:space-between}
}

.t1 .t1-rm{position:relative;justify-self:end}.t1 .t1-rm summary{list-style:none;cursor:pointer}.t1 .t1-rm summary::-webkit-details-marker{display:none}
.t1 .t1-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:150px;background:#fff;border:1px solid var(--w1-line);border-radius:12px;box-shadow:0 12px 28px -14px rgba(25,29,35,.45);padding:6px;display:grid;gap:2px}
.t1 .t1-pop button{border:0;background:none;text-align:left;padding:8px 10px;border-radius:8px;font:600 12.5px Inter,sans-serif;color:var(--w1-ink);cursor:pointer}.t1 .t1-pop button:hover{background:#f4f6f8}
.w1.t1 .t1-pay{overflow:visible}
@media (max-width:640px){.t1 .w1-bar>select.w1-chip{flex:1 1 100%;max-width:100%;min-width:0;text-overflow:ellipsis}.t1 .w1-bar>.w1-btn{flex:1 1 auto;text-align:center;justify-content:center}}
@media (max-width:640px){.t1 .t1-tiles.t1-tt>.t1-tile:nth-child(1),.t1 .t1-tiles.t1-tt>.t1-tile:nth-child(4),.t1 .t1-tiles.t1-tt>.t1-tile:nth-child(5):not(.t1-bad){display:none}}
.t1 .t1-note{margin:0;font-size:12px;color:var(--w1-muted);background:#f7f8fa;border-radius:8px;padding:6px 8px;overflow-wrap:anywhere}

/* 02-oct (Mathew, ESQUELETO_SHOP_SETTINGS approved): Shop settings as a full page — section list on the left (chips on the
   phone), one card per section with a "Changes" line; the drawer's own fields are moved in as they are. */
.s1 .s1-chips{display:none}
.s1 .s1-lay{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start;margin-top:4px}
.s1 .s1-side{background:#fff;border:1px solid var(--w1-line);border-radius:14px;padding:8px;position:sticky;top:12px}
.s1 .s1-side a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;font-size:13px;font-weight:600;color:var(--w1-muted);text-decoration:none}
.s1 .s1-side a:hover{background:#f4f6f8;color:var(--w1-ink)}
.s1 .s1-side a.s1-on{background:linear-gradient(90deg,rgba(240,165,0,.18),rgba(240,165,0,.04));color:var(--w1-ink);box-shadow:inset 3px 0 0 var(--w1-amber)}
.s1 .s1-side a em{font-style:normal;font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 6px;background:var(--w1-line-soft);color:var(--w1-muted);white-space:nowrap}
.s1 .s1-grp{font:700 10.5px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--w1-muted-soft);padding:10px 10px 4px}
.s1 .s1-main{min-width:0}
.s1 .s1-sec{margin-bottom:14px;padding:16px;scroll-margin-top:80px}
.s1 .s1-hd{margin-bottom:12px}.s1 .s1-hd h5{font:600 18px Oswald,sans-serif;margin:0}.s1 .s1-hd p{margin:2px 0 0;font-size:12.5px;color:var(--w1-muted)}
.s1 .s1-eff{display:flex;gap:8px;align-items:flex-start;background:#f7f8fa;border-radius:10px;padding:9px 11px;font-size:12px;color:var(--w1-muted);margin-top:14px}
.s1 .s1-eff b{color:var(--w1-ink)}.s1 .s1-eff:before{content:"Changes";font:700 10px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--w1-amber-ink);background:var(--w1-amber-bg);border-radius:5px;padding:2px 6px;flex:none}
.s1 .s1-brand{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.s1 .s1-prev{border-radius:12px;overflow:hidden;min-height:130px;display:flex;align-items:flex-end;padding:12px;background:linear-gradient(180deg,rgba(25,29,35,.05),rgba(25,29,35,.6) 60%,#191d23),linear-gradient(180deg,#2a3038,#191d23)}
.s1 .s1-prev.s1-photo{background:linear-gradient(180deg,rgba(25,29,35,.05),rgba(25,29,35,.55) 60%,#191d23),url("/demo-shop-photo.jpg") center 60%/cover}
.s1 .s1-lg{display:flex;gap:10px;align-items:center;background:rgba(25,29,35,.4);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px;width:100%;color:#fff}
.s1 .s1-lg img{width:40px;height:40px;border-radius:11px;object-fit:contain;background:#fff}
.s1 .s1-mk{width:40px;height:40px;border-radius:11px;background:var(--w1-amber);color:var(--w1-amber-ink);font:700 13px Oswald,sans-serif;display:grid;place-items:center;flex:none}
.s1 .s1-mk.s1-mkphoto{background:#191d23 url("/demo-shop-photo.jpg") no-repeat;background-size:164px auto;background-position:-97px -22px}
.s1 .s1-lg b{font:600 15px Oswald,sans-serif;display:block}.s1 .s1-lg small{font:700 9px Inter,sans-serif;color:var(--w1-amber);letter-spacing:.06em}
.s1 .s1-cap{font-size:11.5px;margin:6px 0 0}
.s1 .s1-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.s1 .s1-kv>div{background:#f7f8fa;border-radius:10px;padding:10px 12px;min-width:0}.s1 .s1-kv span:first-child{display:block;font-size:11.5px;font-weight:700;color:var(--w1-muted)}.s1 .s1-kv b{font:600 18px Oswald,sans-serif}.s1 .s1-kv small{display:block;font-size:11.5px;color:var(--w1-muted-soft)}
.s1 .s1-meter{display:block;height:8px;border-radius:4px;background:var(--w1-line-soft);overflow:hidden;margin-top:6px}.s1 .s1-meter i{display:block;height:100%;background:var(--w1-green)}
.s1 .s1-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.s1 .s1-plan{border:1px solid var(--w1-line);border-radius:12px;padding:12px}.s1 .s1-plan.s1-on{border:2px solid var(--w1-amber);background:var(--w1-amber-bg)}
.s1 .s1-plan b{font:600 16px Oswald,sans-serif}.s1 .s1-pr{font:600 22px Oswald,sans-serif}.s1 .s1-pr small{font-size:12px}.s1 .s1-plan p{margin:4px 0 8px;font-size:11.5px;color:var(--w1-muted)}
.s1 .s1-note{margin:0;font-size:12.5px}
.s1 .s1-ver{text-align:center;font-size:11px;margin:4px 0 10px}
/* the moved drawer fields, in this page's look */
.s1 .s1-sec .field{margin:0 0 12px}.s1 .s1-sec .field>label{display:block;font-size:11px;font-weight:700;color:var(--w1-muted-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.s1 .s1-sec input[type=text],.s1 .s1-sec input[type=email],.s1 .s1-sec input[type=tel],.s1 .s1-sec input[type=number],.s1 .s1-sec input[type=date],.s1 .s1-sec select,.s1 .s1-sec textarea{border:1px solid var(--w1-line);border-radius:9px;padding:8px 10px;font:500 13px Inter,sans-serif;background:#fff;color:var(--w1-ink);max-width:100%}
.s1 .s1-sec .btn.s1-save{width:auto!important;margin-top:8px!important;background:var(--w1-amber);border-color:var(--w1-amber);color:var(--w1-amber-ink)}
.s1 .s1-sec>[data-ss-slot]>*+*{margin-top:12px}
.s1 [data-ss-slot]:empty{display:none}
@media (max-width:1100px){.s1 .s1-brand{grid-template-columns:1fr}.s1 .s1-kv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .s1 .s1-lay{grid-template-columns:1fr}.s1 .s1-side{display:none}
  .s1 .s1-chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;margin:0 0 6px;position:sticky;top:0;z-index:5;background:var(--bg,#f2f4f7)}
  .s1 .s1-chips span{flex:none;border:1px solid var(--w1-line);background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
  .s1 .s1-chips span.s1-on{background:var(--w1-steel-900);color:#fff;border-color:var(--w1-steel-900)}
}
@media (max-width:640px){.s1 .s1-plans{grid-template-columns:1fr}.s1 .s1-sec{padding:12px}.s1 .s1-sec [style*="grid-template-columns:1fr 1fr"],.s1 .s1-sec [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important}}
@media (max-width:1100px){.s1 .s1-brand>div:last-child{order:-1}}
.s1 .s1-sec{scroll-margin-top:130px}@media (max-width:900px){.s1 .s1-sec{scroll-margin-top:150px}}

/* 02-oct (Mathew, ESQUELETO_PERFIL approved): Your profile. */
.w1.p1{max-width:900px}
.p1 .p1-hero{display:flex;gap:16px;align-items:center;background:var(--w1-steel-900);color:#fff;border-radius:14px;padding:16px;margin-bottom:14px}
.p1 .p1-pic{width:84px;height:84px;border-radius:50%;background:#3b4048 center/cover no-repeat;color:#fff;font:600 26px Oswald,sans-serif;display:grid;place-items:center;position:relative;flex:none}
.p1 .p1-change{position:absolute;right:-4px;bottom:-4px;background:var(--w1-amber);color:var(--w1-amber-ink);border-radius:999px;font:700 10.5px Inter,sans-serif;padding:3px 8px;cursor:pointer}
.p1 .p1-hero b{font:600 22px Oswald,sans-serif;display:block;overflow-wrap:anywhere}.p1 .p1-hero small{color:#c7cdd4;font-size:12.5px}.p1 .p1-nk{color:var(--w1-amber)}
.p1 .p1-sec{padding:16px;margin-bottom:14px}.p1 .p1-sec h5{font:600 17px Oswald,sans-serif;margin:0 0 10px}
.p1 .p1-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.p1 .field{margin:0;min-width:0}.p1 .field>label{display:block;font-size:11px;font-weight:700;color:var(--w1-muted-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.p1 .field input{width:100%;border:1px solid var(--w1-line);border-radius:9px;padding:8px 10px;font:500 13px Inter,sans-serif;background:#fff;color:var(--w1-ink);box-sizing:border-box}
.p1 .field input:disabled{background:#f7f8fa;color:var(--w1-muted)}
.p1 .p1-ro{border:1px solid var(--w1-line);border-radius:9px;padding:8px 10px;background:#f7f8fa;color:var(--w1-muted);font-size:13px;min-height:36px;overflow-wrap:anywhere}
.p1 .p1-why{font-size:11px;color:var(--w1-muted-soft);margin:4px 0 0}.p1 .p1-lock{color:#6b4fd8;text-transform:none;letter-spacing:0}
.p1 .p1-btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:36px}
.p1 .p1-prev{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.p1 .p1-prev span{font-size:12px;border:1px solid var(--w1-line);border-radius:999px;padding:4px 10px;background:#f7f8fa}
.p1 .p1-soon{border:1.5px dashed #cfd5dc;border-radius:10px;padding:8px 11px;font-size:12px;color:var(--w1-muted);margin:0 0 10px}
.p1 .p1-save{display:flex;justify-content:flex-end;gap:10px;margin:4px 0 20px}
@media (max-width:640px){.p1 .p1-form{grid-template-columns:1fr}.p1 .p1-hero{flex-direction:column;text-align:center}.p1 .p1-save>*{flex:1;justify-content:center;text-align:center}}
/* 02-oct (Mathew): the person's photo from Your profile in the person row (bottom-left; inside the ☰ menu on phones). */
.av.av-photo{background-size:cover;background-position:center;background-color:#3b4048;color:transparent}

/* ===== 02-oct · Time Clock (OsEzyClockDesk, ESQUELETO_TIME_CLOCK: v1 on PC, v2 on the phone) ===== */
.c2{--c2-green:#2f7d51;max-width:none}
.c2-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.c2-unit{background:#fff;border:1px solid var(--line);border-radius:22px;padding:8px;box-shadow:var(--shadow)}
.c2-clock{position:relative;overflow:hidden;border-radius:16px;padding:16px 18px 14px;color:#fff;background:radial-gradient(120% 140% at 0% 0%,#3fa36b 0%,#2f7d51 45%,#1b4f33 100%);animation:c2rise .45s cubic-bezier(.2,.7,.2,1) both}
.c2-clock:after{content:'';position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;border:22px solid rgba(255,255,255,.06);pointer-events:none}
.c2-clock.grey,.c2-clock.syncing{background:radial-gradient(120% 140% at 0% 0%,#4a5563 0%,#303945 55%,#1f252d 100%)}
.c2-clock.orange{background:radial-gradient(120% 140% at 0% 0%,#f5b82e 0%,#d38c00 50%,#8a5c00 100%)}
.c2-clock.break{background:radial-gradient(120% 140% at 0% 0%,#f5b82e 0%,#c98600 55%,#7d5400 100%)}
.c2-clock.off{background:radial-gradient(120% 140% at 0% 0%,#3b4250 0%,#232831 55%,#15181d 100%)}
.c2-top{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;position:relative;z-index:1}
.c2-chip{display:inline-flex;align-items:center;gap:8px;font:700 11.5px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.16);border-radius:999px;padding:6px 12px}
.c2-pulse{width:9px;height:9px;border-radius:50%;background:#7CFFB2;animation:c2live 1.6s ease-in-out infinite}
.c2-clock.orange .c2-pulse,.c2-clock.break .c2-pulse{background:#fff3c4}.c2-clock.off .c2-pulse,.c2-clock.syncing .c2-pulse{background:#b4b2a9;animation:none}
.c2-task{position:relative;text-align:right;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:6px 12px 7px 14px;font:600 18px/1.05 Oswald,sans-serif}
.c2-task small{display:block;font:700 9.5px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:3px}
.c2-task:before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:#7CFFB2}
.c2-timer{position:relative;z-index:1;text-align:center;font:600 68px/1 Oswald,sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:12px 0 6px}
.c2-timer.flash{animation:c2flash 1s steps(1) infinite}
.c2-car{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:100%;margin:6px 0 0;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.14);color:#fff;font:inherit;text-align:left;cursor:pointer;transition:background .2s,transform .16s cubic-bezier(.3,.7,.4,1.35)}
.c2-car:hover{background:rgba(255,255,255,.22)}.c2-car:active{transform:scale(.98)}.c2-car.static{cursor:default}
.c2-car b{flex:1;min-width:0;font:600 18px/1.15 Oswald,sans-serif}.c2-car span{display:inline-flex;align-items:center;gap:4px;font:700 12.5px Inter,sans-serif;white-space:nowrap}
.c2-i{width:1.25em;height:1.25em;flex:none}
.c2-note{position:relative;z-index:1;margin-top:12px}
.c2-note #noteBox{border:0!important;background:#fff!important;color:var(--ink);border-radius:14px!important;padding:12px 14px!important;box-shadow:0 14px 28px -16px rgba(0,0,0,.6);animation:c2rise .5s .1s both}
.c2-note #noteBox .c2-i{color:var(--c2-green)}
.c2-note #clockNoteText{font-size:15.5px!important;line-height:1.35}
.c2-note #clockNoteAction{background:var(--steel-900);color:#fff!important;border-radius:9px;padding:7px 11px;font-size:12px!important;letter-spacing:.02em}
.c2-note #clockNoteStatus{color:#fff!important;opacity:.92;font-weight:700;font-size:12px!important;text-align:left!important;margin:6px 2px 0!important}
.c2-note .clk-btn.is-off{background:rgba(255,255,255,.12);color:#fff;border:0}
.c2-switched{position:relative;z-index:1;margin-top:8px;background:rgba(255,255,255,.16);border-radius:10px;padding:8px 10px;font-size:12.5px}
.c2-acts{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.c2-acts.one{grid-template-columns:1fr}
.c2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:12px;padding:10px 14px;font:700 14px Inter,sans-serif;color:#fff;background:var(--steel-900);cursor:pointer;box-shadow:0 6px 16px -10px rgba(0,0,0,.55);transition:transform .14s cubic-bezier(.3,.7,.4,1.4),box-shadow .2s,filter .2s}
.c2-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}.c2-btn:active{transform:scale(.96)}
.c2-acts .c2-btn{min-height:58px;font-size:17px;border-radius:14px;animation:c2rise .45s .2s both}.c2-acts .c2-btn+.c2-btn{animation-delay:.26s}
.c2-btn.green{background:var(--c2-green)}.c2-btn.red{background:var(--red)}.c2-btn.amber{background:var(--amber);color:var(--amber-ink)}
.c2-btn.line{background:#eef1f4;color:var(--ink);box-shadow:none}.c2-btn.sm{min-height:36px;padding:7px 12px;font-size:12.5px}
.c2-btn.off,.c2-btn:disabled{background:rgba(255,255,255,.18);color:rgba(255,255,255,.6);box-shadow:none;cursor:not-allowed;transform:none}
.c2-clock.off .c2-acts .c2-btn.green{animation:c2rise .45s .2s both,c2ring 2.2s ease-out 1s infinite}
.c2-photo{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:9px;border-radius:12px;background:rgba(255,255,255,.12);font-weight:700;font-size:13px;cursor:pointer}
.c2-picker{padding:10px 6px 2px}.c2-search{width:100%;font-size:16px;padding:14px;border:2px solid var(--amber);border-radius:14px;background:#fff;font-family:inherit}
.c2-picker #clockCarList{margin-top:10px}
.c2-tasks{padding:12px 6px 6px}.c2-h{font:700 12px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 4px 8px}
.c2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.c2-more{margin-top:8px}
.c2-t{min-height:56px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--ink);font:700 15px Inter,sans-serif;cursor:pointer;padding:8px 6px;transition:transform .14s cubic-bezier(.3,.7,.4,1.4),box-shadow .2s}
.c2-t:hover{transform:translateY(-2px)}.c2-t:active{transform:scale(.95)}
.c2-t.sm{min-height:44px;font-size:13.5px;background:#f4f6f8;color:var(--muted);border-color:transparent}
.c2-t.on{background:var(--c2-green);border-color:var(--c2-green);color:#fff;box-shadow:0 8px 18px -10px rgba(47,125,81,.9);cursor:default}
.c2-t.off{opacity:.45;cursor:not-allowed;transform:none}
.c2-unit.picking .c2-t:not(.off){border-color:var(--amber);box-shadow:0 0 0 2px rgba(240,165,0,.25)}
.c2-card,.c2-fold{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.c2-card{padding:12px 14px}.c2-ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.c2-ch b{font:600 17px Oswald,sans-serif}.c2-ch span{font-size:12.5px;color:var(--muted)}
.c2-fh{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:10px 14px;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;flex-wrap:wrap}
.c2-fh b{font:600 17px Oswald,sans-serif}.c2-fh>span{flex:1;text-align:right;font-size:13px;color:var(--muted)}.c2-fh .c2-i{color:var(--muted);transition:transform .25s}
.c2-fold.open .c2-fh .c2-i{transform:rotate(180deg)}
.c2-mini{display:block;position:relative;height:6px;border-radius:3px;background:#eef1f4;overflow:hidden;margin-top:8px;width:100%}
.c2-fb{display:none;padding:0 14px 14px;border-top:1px solid #eef1f4}.c2-fold.open .c2-fb{display:block;animation:c2rise .3s both}
.c2-strip{position:relative;height:22px;background:#f1f3f6;border-radius:7px;margin-top:12px;overflow:hidden}
.c2-strip i,.c2-mini i{position:absolute;top:4px;bottom:4px;border-radius:5px;transform-origin:left;animation:c2grow .7s cubic-bezier(.2,.7,.2,1) both}.c2-mini i{top:0;bottom:0}
.c2-s.w{background:var(--c2-green)}.c2-s.br{background:var(--amber)}.c2-s.s{background:#b4b2a9}
.c2-s.live{background-image:linear-gradient(90deg,#2f7d51,#4fb27a,#2f7d51);background-size:200% 100%;animation:c2grow .7s both,c2flow 2.4s linear infinite}
.c2-now{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--red);border-radius:2px}
.c2-ticks{position:relative;height:16px;margin-top:4px;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}.c2-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}.c2-ticks span:first-child{transform:none}.c2-ticks span:last-child{transform:translateX(-100%)}
.c2-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:6px}.c2-legend em{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;vertical-align:-1px}.c2-legend .w{background:var(--c2-green)}.c2-legend .br{background:var(--amber)}.c2-legend .s{background:#b4b2a9}
.c2-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 4px}.c2-tiles div{background:#f7f8fa;border-radius:10px;padding:8px 10px}.c2-tiles span{display:block;font-size:11px;font-weight:700;color:var(--muted)}.c2-tiles b{font:600 19px Oswald,sans-serif;white-space:nowrap}
.c2-ent{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:9px 0;border-top:1px solid #eef1f4;font-size:13px}
.c2-n{display:block;margin-top:4px;background:#f7f8fa;border-left:3px solid var(--c2-green);border-radius:3px 8px 8px 3px;padding:5px 9px;white-space:pre-wrap;overflow-wrap:anywhere}.c2-n.no{color:var(--muted);border-left-color:#cfd5dc;background:none}
.c2-num{font:600 15px Oswald,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}.c2-nowtag{font-size:10.5px;font-weight:700;color:#fff;background:var(--c2-green);border-radius:6px;padding:1px 6px}
.c2-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:84px;margin-top:12px}
.c2-week div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;font-size:10.5px;color:var(--muted)}
.c2-week i{width:100%;max-width:30px;min-height:2px;border-radius:5px 5px 2px 2px;background:#9fc5ae;transform-origin:bottom;animation:c2growY .6s cubic-bezier(.2,.7,.2,1) both}.c2-week .today i{background:var(--c2-green)}
.c2-car-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid #eef1f4;font-size:13px}
.c2-empty{margin:10px 0 0;font-size:13px;color:var(--muted)}
.c2-crew>div:not(.c2-ch){display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #eef1f4;font-size:13px}
.c2-st{font:700 11px Inter,sans-serif;border-radius:999px;padding:3px 9px;white-space:nowrap}.c2-st.w{background:#e6f1ea;color:var(--c2-green)}.c2-st.b{background:#fff6e0;color:#8a5c00}.c2-st.o{background:#eef1f4;color:var(--muted)}.c2-st.r{background:#fbeceb;color:var(--red)}
.c2-flag{display:flex;align-items:center;gap:10px;justify-content:space-between;border-left:4px solid var(--red);background:#fdf3f2;border-radius:4px 10px 10px 4px;padding:9px 12px;font-size:13px;margin-top:6px}
.c2-recovered{border-color:#c98600}.c2-recovered p{margin:4px 0 8px;font-size:12.5px;color:var(--muted)}.c2-rv{white-space:pre-wrap;font-size:14px;margin-bottom:10px}.c2-row{display:flex;gap:8px}
.c2-stick{display:none}
@media (min-width:901px){.c2-fh{cursor:default;pointer-events:none}.c2-fh .c2-i,.c2-mini{display:none}.c2-fb{display:block!important;animation:none}.c2-timer{font-size:72px}}
@media (max-width:900px){
  .c2-cols{grid-template-columns:1fr}.c2-unit{padding:6px;border-radius:20px}.c2-clock{padding:14px}
  .c2-stick{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:30;margin:0;padding:0 12px;height:0;overflow:hidden;border-radius:0 0 14px 14px;color:#fff;background:linear-gradient(160deg,#2f7d51,#1f5a39);box-shadow:0 10px 22px -12px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s}
  .c2-stick.show{height:auto;padding:9px 12px;margin:0 0 10px;opacity:1;pointer-events:auto;overflow:visible;animation:c2drop .4s cubic-bezier(.2,.9,.3,1.2)}
  .c2-stick.grey,.c2-stick.syncing{background:linear-gradient(160deg,#3f4a58,#232a32)}.c2-stick.orange,.c2-stick.break{background:linear-gradient(160deg,#d38c00,#8a5c00)}
  .c2-stick-t{font:600 26px/1 Oswald,sans-serif;font-variant-numeric:tabular-nums}.c2-stick-w{flex:1;min-width:0;font-size:12px;line-height:1.25}.c2-stick-w b{display:block;font-size:13px}
  .c2-btn.ico{width:48px;height:48px;min-height:48px;padding:0;flex:none}.c2-btn.ico .c2-i{width:24px;height:24px}
}
@keyframes c2rise{from{opacity:0;transform:translateY(10px)}}@keyframes c2grow{from{transform:scaleX(0)}}@keyframes c2growY{from{transform:scaleY(0)}}@keyframes c2flow{to{background-position:-200% 0}}
@keyframes c2drop{from{transform:translateY(-100%);opacity:0}}
@keyframes c2live{0%,100%{box-shadow:0 0 0 0 rgba(124,255,178,.6)}50%{box-shadow:0 0 0 6px rgba(124,255,178,0)}}@keyframes c2flash{50%{opacity:.45}}
@keyframes c2ring{0%{box-shadow:0 0 0 0 rgba(47,125,81,.55)}70%,100%{box-shadow:0 0 0 16px rgba(47,125,81,0)}}
@media (prefers-reduced-motion:reduce){.c2 *,.c2 *:before,.c2 *:after{animation:none!important;transition:none!important}}
.c2-carrow{position:relative;z-index:1;display:flex;gap:8px;margin-top:6px}.c2-carrow .c2-car{margin:0;flex:1;min-width:0}
.c2-cam{flex:none;display:flex;align-items:center;justify-content:center;width:52px;border-radius:14px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.14);cursor:pointer;transition:background .2s}.c2-cam:hover{background:rgba(255,255,255,.22)}.c2-cam .c2-i{width:22px;height:22px}
.c2-short{display:none}@media (max-width:900px){.c2-full{display:none}.c2-short{display:inline}}
.c2-car b .c2-short{display:none}@media (max-width:900px){.c2-cols{grid-template-columns:minmax(0,1fr)}.c2-main,.c2-side{min-width:0}.c2-car b .c2-full{display:none}.c2-car b .c2-short{display:inline}}
.c2-car b span{font:inherit;white-space:normal;gap:0}
.c2-clock.orange .c2-btn.amber{background:#fff;color:var(--amber-ink)}

/* ===== 02-oct · Shop settings: one page per section, every field in the app's style (Today / Work) ===== */
.w1.s1.s1-one .s1-sec:not(.s1-act){display:none}
.w1.s1.s1-one .s1-sec.s1-act{animation:s1in .28s cubic-bezier(.2,.7,.2,1) both}
@keyframes s1in{from{opacity:0;transform:translateY(8px)}}
.s1 .s1-pager{display:flex;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--w1-line-soft,#eef1f4)}
.s1 .s1-pager .w1-btn{height:42px;display:inline-flex;align-items:center;padding:0 16px;font-size:13px;cursor:pointer}
.s1 .s1-guide{display:flex;align-items:flex-start;gap:16px;justify-content:space-between;margin-bottom:14px;border-left:4px solid var(--w1-amber,#f0a500);background:#fffaf0}
.s1 .s1-guide b{font:600 18px Oswald,sans-serif}.s1 .s1-guide p{margin:4px 0 10px;color:var(--w1-muted,#48505a);font-size:13px}
.s1 .s1-steps{display:flex;gap:8px;flex-wrap:wrap}
.s1 .s1-steps button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--w1-line,#e3e7ec);background:#fff;border-radius:999px;padding:6px 12px 6px 6px;font:700 12.5px Inter,sans-serif;cursor:pointer;color:var(--w1-ink,#171a1f)}
.s1 .s1-steps button i{width:22px;height:22px;border-radius:50%;background:#eef1f4;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11.5px}
.s1 .s1-steps button.s1-on{border-color:var(--w1-amber,#f0a500);background:#fff}.s1 .s1-steps button.s1-on i{background:var(--w1-amber,#f0a500);color:#3a2c05}
/* fields from the old drawer, restyled */
.s1 .s1-sec .field{margin:0 0 14px}
.s1 .s1-sec label,.s1 .s1-sec .field>label{display:block;font:700 12px Inter,sans-serif;color:var(--w1-muted,#48505a);margin-bottom:6px;letter-spacing:.01em}
.s1 .s1-sec input[type=text],.s1 .s1-sec input[type=number],.s1 .s1-sec input[type=email],.s1 .s1-sec input[type=tel],.s1 .s1-sec input[type=url],.s1 .s1-sec input[type=date],.s1 .s1-sec input:not([type]),.s1 .s1-sec select,.s1 .s1-sec textarea{
  width:100%;box-sizing:border-box;min-height:42px;border:1px solid var(--w1-line,#e3e7ec);border-radius:10px;background:#fff;padding:9px 12px;font:500 14px Inter,sans-serif;color:var(--w1-ink,#171a1f);transition:border-color .15s,box-shadow .15s}
.s1 .s1-sec textarea{min-height:84px;line-height:1.4}
.s1 .s1-sec input:focus,.s1 .s1-sec select:focus,.s1 .s1-sec textarea:focus{outline:none;border-color:var(--w1-amber,#f0a500);box-shadow:0 0 0 3px rgba(240,165,0,.18)}
.s1 .s1-sec input.job-timing-input{min-height:38px;padding:6px 8px;text-align:center}
.s1 .s1-sec input[type=checkbox]{width:18px;height:18px;accent-color:var(--w1-green,#2f7d51);vertical-align:-4px;margin-right:8px}
.s1 .s1-sec input[type=file]{font:500 13px Inter,sans-serif}
.s1 .s1-sec .t-mut,.s1 .s1-sec p.t-mut,.s1 .s1-sec .settings-empty-note{color:var(--w1-muted,#48505a);font-size:12.5px}
.s1 .s1-sec .sub-card{border:0;box-shadow:none;background:none;padding:0;margin:0 0 16px}
.s1 .s1-sec .sub-card>.h{font:600 15px Oswald,sans-serif;color:var(--w1-ink,#171a1f);padding:0;margin:0 0 8px;border:0;background:none}
.s1 .s1-sec .sub-card>.b{padding:0}
.s1 .s1-sec .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:1px solid var(--w1-line,#e3e7ec);background:#fff;color:var(--w1-ink,#171a1f);border-radius:10px;padding:8px 14px;font:700 13px Inter,sans-serif;cursor:pointer;box-shadow:none;transition:transform .14s,box-shadow .2s}
.s1 .s1-sec .btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px -10px rgba(25,29,35,.5)}.s1 .s1-sec .btn:active{transform:scale(.97)}
.s1 .s1-sec .btn.sm{min-height:34px;padding:5px 11px;font-size:12px}
.s1 .s1-sec .btn.dark{background:var(--w1-steel-900,#191d23);border-color:var(--w1-steel-900,#191d23);color:#fff}
.s1 .s1-sec .btn.green{background:var(--w1-green,#2f7d51);border-color:var(--w1-green,#2f7d51);color:#fff}
.s1 .s1-sec .btn.gray{background:#eef1f4;border-color:#eef1f4}
.s1 .s1-sec .btn.primary,.s1 .s1-sec .btn.s1-save{background:var(--w1-amber,#f0a500);border-color:var(--w1-amber,#f0a500);color:var(--w1-amber-ink,#3a2c05);min-height:44px;padding:10px 18px}
.s1 .s1-sec .pill{border-radius:999px}
.s1 .s1-sec .job-timing-grid{gap:10px}
.s1 .s1-sec table{width:100%;border-collapse:collapse;font-size:13px}.s1 .s1-sec th{font:700 11.5px Inter,sans-serif;color:var(--w1-muted,#48505a);text-align:left;padding:6px 8px;border-bottom:1px solid var(--w1-line,#e3e7ec)}.s1 .s1-sec td{padding:6px 8px;border-bottom:1px solid #eef1f4}
@media (max-width:820px){.s1 .s1-guide{flex-direction:column}.s1 .s1-pager .w1-btn{flex:1;justify-content:center}}

/* 02-oct (Mathew): Shop settings — only the open section scrolls (the list and the top bar stay put), one Save per
   page, the shop photo box under the logo, short pager labels on the phone. */
.w1.s1.s1-one .s1-lay{height:var(--s1-h,auto);align-items:stretch}
.w1.s1.s1-one .s1-side{position:static;align-self:start;max-height:100%;overflow-y:auto}
.w1.s1.s1-one .s1-main{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 4px 4px 0}
.s1 .s1-savebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--w1-line-soft,#eef1f4)}
.s1 .s1-savebar .s1-save1{height:44px;min-width:120px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer}
.s1 .s1-savebar .s1-save1:disabled{opacity:.6;cursor:default}
.s1 .s1-savebar span{font-size:12.5px}.s1 .s1-savebar .s1-ok{color:var(--w1-green,#2f7d51);font-weight:700}.s1 .s1-savebar .s1-bad{color:var(--w1-red,#c0453a);font-weight:700}
.s1 .s1-ps{display:none}
@media (max-width:640px){.s1 .s1-pl{display:none}.s1 .s1-ps{display:inline}}
.s1 .s1-cvbox{display:flex;gap:12px;align-items:center}
.s1 .s1-cvimg{width:140px;height:62px;flex:none;border:1px dashed var(--w1-line,#e3e7ec);border-radius:10px;background:#f7f8fa center 60%/cover no-repeat;display:grid;place-items:center;font-size:11px;color:var(--w1-muted,#48505a)}
.s1 .s1-cvimg[style],.s1 .s1-cvimg.s1-photo{border-style:solid}
.s1 .s1-cvimg.s1-photo{background-image:url("/demo-shop-photo.jpg")}
.s1 .s1-cvbox .s1-pick{display:inline-flex;align-items:center;cursor:pointer;margin:0}
.s1 .s1-cvbox p{margin:6px 0 0;font-size:12px}
.s1 .s1-savebar .s1-demo{color:var(--w1-amber-ink,#7a5200);font-weight:700}

/* ---- Drawer kinds (03-oct rework, DESIGN_PHILOSOPHY "Paneles"): form = right drawer with a fixed
   action bar; doc = centred modal; read = right drawer. Same head, same tokens as Today/Work. ---- */
.drawer-head { padding:18px 22px 16px; }
.drawer-head .eyebrow { font-size:11px; letter-spacing:.12em; color:var(--muted-soft); }
.drawer-head h3 { font-size:24px; line-height:1.15; letter-spacing:.01em; }
.drawer-head .x { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; padding:0; font-size:16px; }
.drawer[data-kind="form"] .drawer-body, .drawer[data-kind="doc"] .drawer-body { padding-bottom:24px; }
.drawer-foot { flex:none; display:flex; align-items:center; gap:10px; padding:12px 22px calc(12px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line); box-shadow:0 -6px 18px -14px rgba(25,29,35,.35); }
.drawer-foot .dk-cancel { margin-right:auto; min-height:46px; padding:0 18px; }
.drawer-foot > .btn.primary, .drawer-foot > .btn.orange { min-height:46px; min-width:180px; justify-content:center; font-size:15px; font-weight:700; }
.drawer-foot .dk-actions { display:flex !important; flex-wrap:nowrap !important; gap:10px; margin:0 !important; width:auto !important; }
.drawer-foot .dk-actions .btn { white-space:nowrap; flex:0 0 auto !important; width:auto !important; min-width:0 !important; }
@media (max-width:900px) {
  .drawer-foot .dk-cancel { flex:0 0 auto; min-width:96px; }
  .drawer-foot:has(.dk-actions > :nth-child(2)) { flex-wrap:wrap; }
  .drawer-foot:has(.dk-actions > :nth-child(2)) .dk-actions { flex:1 1 100%; flex-wrap:wrap !important; order:-1; }
  .drawer-foot .dk-actions { flex:1 1 auto; }
  .drawer-foot .dk-actions .btn { flex:1 1 auto !important; }
  .drawer-foot:has(.dk-actions > :nth-child(2)) .dk-cancel { flex:1 1 100%; }
  /* Nothing pushes the panel sideways: fields shrink, wide tables scroll inside themselves. */
  .drawer-body input, .drawer-body select, .drawer-body textarea { min-width:0; max-width:100%; }
  .drawer-body [style*="grid-template-columns"] > * { min-width:0; }
  .drawer-body table { display:block; max-width:100%; overflow-x:auto; }
}
.drawer-foot .dk-actions .btn { min-height:46px; justify-content:center; }
.drawer:not([data-kind="form"]):not([data-kind="doc"]) .drawer-foot { display:none; }
/* Text the technicians write: big boxes, body-size text, grow with the content. */
.drawer textarea, .drawer textarea.dk-text { font-size:16px; line-height:1.5; min-height:132px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); width:100%; box-sizing:border-box; font-family:inherit; color:var(--ink); background:#fff; resize:vertical; }
.drawer textarea:focus { outline:none; border-color:var(--amber-deep); box-shadow:0 0 0 3px rgba(240,165,0,.18); }
.drawer .field input, .drawer .field select { min-height:42px; font-size:15px; border-radius:var(--radius-sm); }
.drawer .field input:focus, .drawer .field select:focus { outline:none; border-color:var(--amber-deep); box-shadow:0 0 0 3px rgba(240,165,0,.18); }
.drawer .field label { font-size:11.5px; font-weight:700; letter-spacing:.07em; }
.drawer .sub-card { box-shadow:0 1px 2px rgba(25,29,35,.06),0 6px 20px -12px rgba(25,29,35,.28); }
/* doc = centred modal on PC */
@media (min-width:901px) {
  .drawer[data-kind="doc"] { top:50%; left:50%; right:auto; height:auto; max-height:min(calc(88dvh / var(--z, 1)),900px); width:720px; max-width:calc(100vw - 48px); border-radius:var(--radius-lg); overflow:hidden; transform:translate(-50%,-46%) scale(.98); opacity:0; pointer-events:none; transition:transform .2s cubic-bezier(.2,.8,.2,1), opacity .16s; }
  .drawer[data-kind="doc"].open { transform:translate(-50%,-50%); opacity:1; pointer-events:auto; }
  .drawer[data-kind="doc"] .drawer-body { flex:1 1 auto; }
}
/* phone: form and read = near-full sheet; doc = bottom sheet */
@media (max-width:900px) {
  .drawer-head { padding:14px 16px 12px; }
  .drawer-head h3 { font-size:21px; }
  .drawer-foot { padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .drawer-foot > .btn.primary, .drawer-foot > .btn.orange { flex:1; min-width:0; }
  .drawer[data-kind="doc"] { top:auto; bottom:0; height:auto; max-height:calc(92dvh / var(--z, 1)); border-radius:var(--radius-lg) var(--radius-lg) 0 0; transform:translateY(100%); }
  .drawer[data-kind="doc"].open { transform:none; }
}
@media (prefers-reduced-motion:reduce) { .drawer, .drawer[data-kind="doc"] { transition:none; } }
/* Nothing floats over an open panel: the phone clock bar steps aside while a drawer is open. */
body:has(.drawer.open) .mobile-clockbar { display:none !important; }
@media (max-width:600px) {
  /* Two date-time pickers side by side don't fit a phone: they stack (Add time, Forgotten time). */
  .drawer-body div:has(> .field > input[type="datetime-local"] + *), .drawer-body div:has(> .field ~ .field > input[type="datetime-local"]) { flex-direction:column; flex-wrap:wrap; }
  .drawer-body input[type="datetime-local"] { width:100%; }
}

.dk-ico { display:inline-block; vertical-align:-0.15em; flex:none; margin-right:.3em; }
.drawer-head .x .dk-ico { margin:0; width:18px; height:18px; }
/* 03-oct: line icons and grade dots that replaced emojis everywhere */
.ln-ico{display:inline-block;vertical-align:-0.15em;flex:none}
.gdot{display:inline-block;width:.62em;height:.62em;border-radius:50%;vertical-align:.05em;background:var(--muted)}.gdot.g{background:#1f8a4c}.gdot.y{background:#d99a06}.gdot.r{background:#c0453a}.gdot.na{background:#c9cdd3}

/* Set up your shop (03-oct): chip rows fill the whole width, no half-empty lines. Import from CSV is hidden in v1. */
.drawer #setupDays, .drawer #setupWeekStart, .drawer #setupCadence { display:grid !important; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; }
.drawer #setupHolidays { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.drawer #setupDays > button, .drawer #setupWeekStart > button, .drawer #setupCadence > button, .drawer #setupHolidays > button { width:100%; margin:0 !important; min-height:42px; justify-content:center; text-align:center; }
.drawer-body div:has(> button[onclick="openImportCustomers()"]) { display:none; }
@media (max-width:600px) { .drawer #setupDays, .drawer #setupWeekStart { gap:4px; } .drawer #setupCadence { grid-auto-flow:row; grid-template-columns:1fr 1fr; } }
.dk-lbl { display:inline-flex; align-items:center; gap:.35em; }
.dk-lbl .dk-ico { margin:0; }
/* Selects in a panel are full-size and full-width unless they sit in a row on purpose. */
.drawer-body select { min-height:42px; font-size:15px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 12px; background:#fff; max-width:100%; }
.drawer-body .b > select, .drawer-body .field > select, .drawer[data-kind="doc"] .drawer-body select { width:100%; }
@media (max-width:600px) { .drawer #setupDays, .drawer #setupWeekStart { grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ---- Switch user, full screen (03-oct, ESQUELETO_PIN_PANTALLA_COMPLETA) ---- */
.su-ov{position:fixed;inset:0;z-index:80;background:rgba(10,12,16,.72);display:flex;align-items:center;justify-content:center;padding:24px;animation:suIn .18s ease}
@keyframes suIn{from{opacity:0}to{opacity:1}}
.su-box{position:relative;width:min(1100px,100%);max-height:100%;overflow:auto;border-radius:18px;background:radial-gradient(120% 80% at 20% 0%,#2b3340 0%,#191d23 55%);color:#fff;display:flex;flex-direction:column;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.su-box::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px);pointer-events:none;border-radius:inherit}
.su-h{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid #2f3640;position:relative;z-index:1}
.su-h b{font:600 18px Oswald,sans-serif;letter-spacing:.02em}.su-h span{color:#9aa3ae;font-size:13px}.su-h .su-clk{margin-left:auto;font:600 22px Oswald,sans-serif;color:#fff}
.su-stage{display:grid;grid-template-columns:1fr 1fr;position:relative;z-index:1}
.su-now,.su-pick{padding:26px}.su-now{border-right:1px solid #2f3640}
.su-lbl{font:600 11px Oswald,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9aa3ae;margin:0 0 8px}
.su-av{border-radius:50%;display:grid;place-items:center;font:700 18px Inter,sans-serif;flex:none;overflow:hidden}.su-av img{width:100%;height:100%;object-fit:cover}
.su-cur{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.05);border:1px solid #2f3640;border-radius:14px;padding:14px}
.su-cur b{font:600 22px Oswald,sans-serif;display:block}.su-cur small{color:#9aa3ae}
.su-state{display:inline-flex;gap:6px;align-items:center;margin-top:6px;font:700 11px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:20px;background:rgba(255,255,255,.08);color:#c3cad3}
.su-state.on{background:rgba(47,125,81,.25);color:#7fd1a1}.su-state i{width:7px;height:7px;border-radius:50%;background:currentColor}
.su-hint{display:flex;align-items:center;gap:10px;margin:14px 0 0;color:#9aa3ae;font-size:13px}
.su-ppl{display:flex;flex-wrap:wrap;gap:10px}
.su-p{flex:1 1 calc(33.33% - 10px);min-width:0;border:1px solid #2f3640;background:rgba(255,255,255,.04);border-radius:14px;padding:14px 8px;text-align:center;cursor:pointer;color:#fff;font:inherit;transition:transform .18s,border-color .18s,background .18s}
.su-p:hover{transform:translateY(-3px)}.su-p.on{border-color:var(--amber);background:rgba(240,165,0,.12)}
.su-p .su-av{margin:0 auto 8px}.su-p b{display:block;font-size:14px}.su-p small{color:#9aa3ae;font-size:12px}
.su-empty,.su-pickempty{color:#c3cad3;font-size:14px;line-height:1.6;border:1px dashed #3a424d;border-radius:14px;padding:18px}
.su-pickempty{display:grid;place-items:center;min-height:300px;font:600 18px Oswald,sans-serif;color:#9aa3ae}
.su-to{display:flex;gap:12px;align-items:center;margin-bottom:14px}.su-to small{color:#9aa3ae}.su-to b{font:600 26px Oswald,sans-serif;display:block}
.su-dots{display:flex;gap:14px;justify-content:center;margin:6px 0 6px}.su-dots span{width:16px;height:16px;border-radius:50%;border:2px solid #5d6672}.su-dots span.f{background:var(--amber);border-color:var(--amber)}
.su-dots.shake{animation:suShake .35s}@keyframes suShake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.su-msg{min-height:20px;text-align:center;color:#f0a49b;font-size:13px;margin:0 0 8px}
.su-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.su-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:340px;margin:0 auto}
.su-k{height:68px;border-radius:14px;border:1px solid #2f3640;background:rgba(255,255,255,.06);color:#fff;font:600 28px Oswald,sans-serif;cursor:pointer;display:grid;place-items:center}
.su-k:active{transform:scale(.97)}.su-k.g{font:700 14px Inter,sans-serif;color:#9aa3ae}
.su-go{display:block;width:100%;max-width:340px;margin:14px auto 0;height:56px;border-radius:14px;border:0;background:var(--amber);color:var(--amber-ink);font:800 17px Inter,sans-serif;cursor:pointer}
.su-go:disabled{opacity:.45;cursor:default}
.su-f{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:14px 22px;border-top:1px solid #2f3640;position:relative;z-index:1;color:#9aa3ae;font-size:13px}
.su-f button{background:transparent;border:1px solid #2f3640;color:#fff;border-radius:10px;padding:10px 14px;font:600 13px Inter,sans-serif;cursor:pointer;min-height:44px}
@media (max-width:900px){.su-ov{padding:0}.su-box{border-radius:0;min-height:100%}.su-stage{grid-template-columns:1fr}.su-now{border-right:0;border-bottom:1px solid #2f3640;padding:16px}.su-pick{padding:16px}.su-k{height:60px}.su-f{flex-wrap:wrap}.su-f span{order:3;flex:1 1 100%;text-align:center}}
@media (prefers-reduced-motion:reduce){.su-ov,.su-dots.shake,.su-p{animation:none;transition:none}}
@media (max-width:600px){.su-box{scrollbar-width:none}.su-box::-webkit-scrollbar{display:none}.su-h{padding:12px 16px}.su-h b{font-size:16px;min-width:0}.su-h span:not(.su-clk){display:none}.su-h .su-clk{font-size:18px;white-space:nowrap}}

/* ---- Inline choice: one question, anchored menu on PC, bottom sheet on phone (03-oct) ---- */
.ic-ov{position:fixed;inset:0;z-index:70}
.ic-box{position:fixed;width:340px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 18px 44px -12px rgba(25,29,35,.35);padding:8px;animation:icIn .14s ease}
@keyframes icIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ic-h{padding:8px 10px 6px}.ic-h b{display:block;font:600 16px Oswald,sans-serif}.ic-h span{color:var(--muted-soft);font-size:12px}
.ic-opts{display:flex;flex-direction:column;gap:2px}
.ic-day{padding:2px 8px 6px;max-height:min(calc(52vh / var(--z, 1)),420px);overflow:auto}
.ic-drill .line{padding:8px 0;font-size:14px}.ic-drill-note{font-size:12px;color:var(--muted);padding:6px 8px 4px;border-top:1px solid var(--line);margin:4px 8px 0}
.ic-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.ic-opt:hover,.ic-opt:focus-visible{background:var(--line-soft);outline:none}.ic-opt.on{background:var(--amber-bg,#fffaf0)}
.ic-opt span{flex:1;min-width:0}.ic-opt b{display:block;font-weight:600;font-size:14px}.ic-opt small{display:block;color:var(--muted-soft);font-size:12px}
.ic-opt .dk-ico,.ic-opt>svg:first-child{flex:none;color:var(--muted)}.ic-check{flex:none;color:var(--amber-deep)}
.ic-dot{width:10px;height:10px;border-radius:50%;flex:none;background:#b4b2a9}.ic-dot.healthy{background:var(--green)}.ic-dot.needs_attention,.ic-dot.stale{background:#ef9f27}.ic-dot.at_risk{background:var(--red)}.ic-dot.automatic{background:conic-gradient(var(--green) 0 33%,#ef9f27 0 66%,var(--red) 0)}
.ic-note{margin:6px 10px 4px;color:var(--muted-soft);font-size:12px;line-height:1.45}
.ic-acts{display:flex;gap:8px;padding:6px 4px 2px}.ic-acts .btn{flex:1;justify-content:center;min-height:42px}
.ic-body{padding:4px 6px}
.ic-ov.sheet{background:rgba(20,24,30,.44)}.ic-ov.sheet .ic-box{left:0!important;right:0;bottom:0;top:auto!important;width:100%;max-width:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:10px 10px calc(14px + env(safe-area-inset-bottom));animation:icUp .18s ease}
@keyframes icUp{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.ic-box{animation:none}}
.job-pill-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ic-box{max-height:calc(calc(100vh / var(--z, 1)) - 24px);overflow:auto}
/* One Email invoice panel with two modes (03-oct) */
.email-to-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px;flex-wrap:wrap}
.email-to-head label{margin:0}
.email-swap{min-height:32px}
.email-alt-note{margin:6px 0 0;font-size:12.5px;color:var(--amber-deep);background:var(--amber-bg,#fffaf0);border:1px solid var(--amber-line,#edc46e);border-radius:var(--radius-sm);padding:7px 10px}

/* ---- Customer page (03-oct, /customers/:id) ---- */
.cp-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.cp-back{min-height:40px;gap:6px}
.cp-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.cp-actions>*{margin:0!important}
.cp-actions .btn{min-height:40px}
.cp-tabs{display:flex;gap:6px;margin:0 0 14px;padding:6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow-x:auto;position:sticky;top:0;z-index:4}
.cp-tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border:1px solid #c7cfd9;background:#d7dde5;color:var(--ink);font:700 14px/1.2 Inter,sans-serif;padding:10px 16px;min-height:44px;border-radius:var(--radius-sm);cursor:pointer}
.cp-tab:hover{background:#cbd2dc}
.cp-tab.on{background:var(--amber);border-color:var(--amber-deep);color:var(--amber-ink)}
.cp-tab.empty{opacity:.55}
.cp-count:empty{display:none}
.cp-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.cp-body>*{margin:0!important;min-width:0}
.cp-body>[data-cp-tab]:only-of-type,.cp-body>.sub-card:has(table){grid-column:1/-1}
.cp-body .sub-card{box-shadow:0 1px 2px rgba(25,29,35,.06),0 6px 20px -12px rgba(25,29,35,.28)}
.cp-empty{padding:40px;text-align:center;color:var(--muted)}
@container (max-width:720px){.cp-body{grid-template-columns:1fr}}
@media (max-width:900px){.cp-body{grid-template-columns:1fr}.cp-actions{margin-left:0;width:100%}.cp-actions .btn{flex:1 1 auto;justify-content:center}}
/* Time Clock (03-oct, Mathew): Your cars right under Switch task; the timer gets the room the chip and task box had. */
.c2-cars{padding:12px 6px 6px;border-top:1px solid var(--line-soft);margin-top:4px}
.c2-cars .c2-h span{margin-left:8px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted-soft)}
.c2-cars .c2-picker{padding:0}
.c2-clock.green .c2-timer,.c2-clock.grey .c2-timer{margin-top:6px}
/* 03-oct: help center — topic chips, grouped answers */
.help-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.help-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.help-chip:hover{border-color:var(--amber-deep)}
.help-group{margin:0 0 14px;scroll-margin-top:12px}
.help-gh{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* 03-oct: pilot flow (request, waiting list, onboarding) — ESQUELETO_PILOTO_FLUJO.html */
.pf-screen{position:fixed;inset:0;z-index:99990;background:var(--bg);overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:32px 16px 48px}
.pf-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:26px;width:100%;max-width:460px}
.pf-card.pf-ob{max-width:580px}
.pf-brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:16px}.pf-brand img{max-width:70%;height:auto}.pf-brand span{font-size:12.5px;color:var(--muted)}
.pf-card h2{font:600 24px Oswald,sans-serif;margin:8px 0 4px;color:var(--ink)}
.pf-sub{color:var(--muted);font-size:13.5px;margin:0 0 14px;line-height:1.5}
.pf-field{margin-bottom:11px}.pf-field label{display:block;font:700 11px Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.pf-field input,.pf-field select{width:100%;border:1.5px solid var(--line);border-radius:var(--radius);padding:11px 12px;font:15px Inter,sans-serif;background:#fff;color:var(--ink)}
.pf-field input:focus,.pf-field select:focus{outline:none;border-color:var(--amber-deep);box-shadow:0 0 0 3px rgba(240,165,0,.18)}
.pf-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #c7cfd9;background:#d7dde5;color:var(--ink);font:700 14px Inter,sans-serif;padding:11px 16px;min-height:46px;border-radius:var(--radius);cursor:pointer}
.pf-card > .pf-btn{width:100%}
.pf-btn.pri{background:var(--amber);border-color:var(--amber-deep);color:#3a2c05}.pf-btn:disabled{opacity:.6;cursor:wait}
.pf-link{border:0;background:none;padding:0;font:inherit;color:var(--ink);font-weight:700;cursor:pointer;text-decoration:underline}
.pf-fine{font-size:12.5px;color:var(--muted);text-align:center;margin:12px 0 0;line-height:1.7}
.pf-err{background:var(--red-bg,#fbe9e7);color:var(--red);border-radius:var(--radius);padding:9px 12px;font-size:13px;margin:4px 0 12px}
.pf-pill{display:inline-flex;align-items:center;gap:6px;font:700 11.5px Inter,sans-serif;padding:4px 10px;border-radius:20px;background:var(--amber-bg);color:var(--amber-deep);border:1px solid var(--amber-line)}
.pf-pill i{width:7px;height:7px;border-radius:50%;background:currentColor}.pf-pill.g{background:var(--green-bg);color:var(--green);border-color:#bcd9c5}.pf-pill.r{background:#fbe9e7;color:var(--red);border-color:#f0c3bd}
.pf-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin:12px 0;padding:12px;background:var(--bg);border-radius:var(--radius)}.pf-kv dt{color:var(--muted)}.pf-kv dd{margin:0;text-align:right;font-weight:600}
.pf-track{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.pf-track li{display:flex;align-items:center;gap:10px}.pf-track li > span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;border:2px solid var(--line);background:#fff}
.pf-track li.ok > span{background:var(--green);border-color:var(--green)}.pf-track li.now > span{border-color:var(--amber);box-shadow:0 0 0 4px rgba(240,165,0,.18)}
.pf-acts{display:flex;gap:10px;margin-top:16px}.pf-acts .pf-btn{flex:1}
.pf-steps{display:flex;gap:6px;margin:0 0 16px}.pf-steps span{flex:1;height:6px;border-radius:4px;background:var(--line)}.pf-steps span.on{background:var(--amber)}.pf-steps span.done{background:var(--green)}
.pf-stepl{font:600 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-contact{border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:10px;background:#fff}
.pf-contact h4{margin:0 0 8px;font:600 14px Inter,sans-serif;display:flex;align-items:center;gap:8px}
/* 04-oct (accounts): "I'm setting this up for the owner" box on the pilot request */
.pf-owner{border:1px dashed var(--amber-line,#edc46e);background:var(--amber-bg,#fffaf0);border-radius:var(--radius);padding:10px 12px 2px;margin:0 0 10px}.pf-owner .pf-sub{margin:0 0 8px;font-size:12.5px}
.pf-same{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:0 0 8px;cursor:pointer}.pf-same input{width:18px;height:18px}
.pf-nav{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}.pf-sp{flex:1}
@media (max-width:520px){.pf-screen{padding:16px 12px 32px}.pf-card{padding:18px}.pf-two{grid-template-columns:1fr}}
/* 03-oct: technician station (several technician accounts on one device) */
.ts-screen{position:fixed;inset:0;z-index:99991;background:rgba(18,24,32,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.ts-card{background:var(--card);border-radius:var(--radius-lg);box-shadow:0 24px 60px -20px rgba(0,0,0,.45);padding:24px;width:100%;max-width:440px}
.ts-card h2{font:600 22px Oswald,sans-serif;margin:0 0 4px}
.ts-sub{color:var(--muted);font-size:13.5px;margin:0 0 14px;line-height:1.5}
.ts-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.ts-acct{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:var(--radius);padding:10px 12px;cursor:pointer;font:inherit;min-height:60px}
.ts-acct:hover{border-color:var(--amber-deep)}.ts-acct.on{border-color:var(--green);background:var(--green-bg)}
.ts-av{width:40px;height:40px;border-radius:50%;background:var(--steel-900,#191d23);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.ts-nm{display:flex;flex-direction:column}.ts-nm small{color:var(--muted);font-size:12px}
.ts-pin{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px}.ts-pin label{font:700 11px Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ts-pin input,.ts-field input{width:100%;border:1.5px solid var(--line);border-radius:var(--radius);padding:12px;font:18px Inter,sans-serif;letter-spacing:.2em}
.ts-field{margin-bottom:11px}.ts-field label{display:block;font:700 11px Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}.ts-field input{letter-spacing:normal;font-size:15px}
.ts-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #c7cfd9;background:#d7dde5;color:var(--ink);font:700 14px Inter,sans-serif;padding:11px 16px;min-height:46px;border-radius:var(--radius);cursor:pointer}
.ts-btn.pri{background:var(--amber);border-color:var(--amber-deep);color:#3a2c05}
.ts-acts{display:flex;gap:10px;flex-wrap:wrap}.ts-acts .ts-btn{flex:1}
.ts-err{background:#fbe9e7;color:var(--red);border-radius:var(--radius);padding:9px 12px;font-size:13px;margin:0 0 12px}
.ts-warn{background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:var(--radius);padding:9px 12px;font-size:13px;margin:0 0 12px}
.ts-names{margin:0 0 12px;padding-left:20px;font-weight:600}
.ts-screen.ts-solid{background:var(--bg)}
/* 04-oct (Mathew): Print / PDF of Team (Time, Payroll) and other pages prints the page content only — never the app
   around it (demo strip, area tabs, toolbars, buttons, clock, dock, demo veils). Header lines come from .print-only. */
@media print {
  .practice-banner, .app-dock, .clock-bubble, .mobile-clockbar, .area-nav, .w1-bar, .w1-acts, .w1-tools, .w1-intro,
  .t1-daynav, .t1-legend, .btn, .w1-btn, button, select, input, .practice-teaser-card, .practice-upsell, #practiceWelcome,
  .practice-tour, .toast, #techStation, #pilotScreen, .ic-ov, .confirm-ov { display:none !important; }
  .practice-teaser-veil { display:none !important; }
  .practice-teaser, .practice-teaser-view, .practice-teaser-view * { filter:none !important; opacity:1 !important; -webkit-mask-image:none !important; mask-image:none !important; max-height:none !important; overflow:visible !important; }
  body, .content, #view { background:#fff !important; color:#000 !important; }
  .w1-card, .card, .w1-tbl { box-shadow:none !important; break-inside:auto; }
  .w1-tr { break-inside:avoid; page-break-inside:avoid; }
  details { display:block !important; } details > summary { display:none !important; } details > div { display:block !important; }
  .print-only { display:block !important; opacity:1 !important; color:#000 !important; }
  .content table td:first-child, .content table th:first-child { min-width:170px; }
  .content table td:empty, .content table th:empty { display:none; }
  /* a printed page is narrow like a phone: keep real table columns instead of the phone card layout */
  .content table, .content table.cardify { display:table !important; width:100% !important; overflow:visible !important; }
  .content table thead, .content table.cardify thead { display:table-header-group !important; }
  .content table tbody, .content table.cardify tbody { display:table-row-group !important; }
  .content table tr, .content table.cardify tr { display:table-row !important; border:0 !important; padding:0 !important; margin:0 !important; }
  .content table td, .content table th, .content table.cardify td { display:table-cell !important; text-align:left; padding:6px 8px !important; border-bottom:1px solid #ddd !important; }
  .content table.cardify td::before { content:none !important; }
  /* Team payroll / punches: the desktop columns, header included, no action column */
  .t1 .t1-pay .w1-tr.w1-h { display:grid !important; }
  .t1 .t1-pay .w1-tr { grid-template-columns:minmax(0,1.6fr) 56px 86px 70px 70px 90px minmax(96px,.7fr) !important; row-gap:0 !important; }
  .t1 .t1-pay .w1-tr > * { display:flex !important; grid-column:auto !important; grid-row:auto !important; }
  .t1 .t1-pay .w1-tr > :nth-child(8) { display:none !important; }
  .t1 .t1-pay .w1-tr > :first-child { display:block !important; }
  .t1 .t1-punch .w1-tr { grid-template-columns:150px minmax(0,1fr) 110px 70px !important; }
  .t1 .t1-punch .w1-tr.w1-h, .t1 .t1-punch .w1-tr > :nth-child(3) { display:grid !important; }
  .t1 .t1-punch .w1-tr > :nth-child(3) { display:flex !important; }
  .t1 .t1-pay .t1-idle { grid-template-columns:1fr !important; }
  @page { margin:12mm; }
}
/* 04-oct (owner audit M7): the phone clock bar took about a quarter of the screen. Now one slim line (status dot, car and
   task, timer) over two 44px buttons — roughly half the height; tapping the line still opens the Time Clock. */
@media (max-width:900px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .mobile-clockbar{gap:6px;padding:6px;border-radius:16px}
  .mobile-clockbar .cw-card{padding:6px 10px;align-items:center;grid-template-columns:auto minmax(0,1fr) auto;column-gap:8px}
  .mobile-clockbar .cw-top .dot{grid-column:1;grid-row:1;margin:0}
  .mobile-clockbar .cw-state{display:none}
  .mobile-clockbar .cw-on{grid-column:2;grid-row:1;margin:0;font-size:12.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mobile-clockbar .cw-time{grid-column:3;grid-row:1;font-size:20px}
  .mobile-clockbar .cw-actions .btn{min-height:44px;padding:6px 10px;font-size:15px;border-radius:10px}
}
/* 04-oct: Your numbers (technician) — Today / Time Clock style */
.mn{max-width:none}
.mn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.mn-head h2{font:600 26px Oswald,sans-serif;margin:0}.mn-head p{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.mn-range{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.mn-range button{border:0;background:#fff;min-height:44px;padding:0 16px;font:700 14px Inter,sans-serif;color:var(--muted);cursor:pointer}
.mn-range button.on{background:var(--steel-900,#191d23);color:#fff}
.mn-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:12px}
.mn-hero.mn-g{border-left-color:var(--green)}.mn-hero.mn-a{border-left-color:var(--amber)}.mn-hero.mn-r{border-left-color:var(--red)}
.mn-util{display:flex;flex-direction:column;align-items:center;min-width:110px}.mn-util b{font:600 52px/1 Oswald,sans-serif}.mn-util span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.mn-g .mn-util b{color:var(--green)}.mn-a .mn-util b{color:var(--amber-deep)}.mn-r .mn-util b{color:var(--red)}
.mn-split p{margin:0 0 8px;font-size:15px}
.mn-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line-soft,#eef1f4)}
.mn-bar i{display:block;height:100%}.mn .bl{background:var(--green)}.mn .ot{background:#8fb7a0}.mn .sa{background:#c9cdd3}
.mn-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12.5px;color:var(--muted)}.mn-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.mn-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:12px}
.mn-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.mn-tile small{display:block;font:600 11px Inter,sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.mn-tile b{display:block;font:600 28px/1.15 Oswald,sans-serif;margin:4px 0 2px}.mn-tile span{font-size:12px;color:var(--muted)}
.mn-tile.mn-tot{border-color:var(--green);background:var(--green-bg)}
.mn-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:12px}
.mn-card h3{font:600 18px Oswald,sans-serif;margin:0 0 10px}.mn-card h3 small{font:500 12px Inter,sans-serif;color:var(--muted);margin-left:6px}
.mn-row{display:grid;grid-template-columns:minmax(90px,140px) minmax(0,1fr) 60px;gap:10px;align-items:center;padding:6px 0;font-size:14px}
.mn-row b{text-align:right;font-variant-numeric:tabular-nums}
.mn-track{height:10px;border-radius:5px;background:var(--line-soft,#eef1f4);overflow:hidden}.mn-track i{display:block;height:100%;background:var(--amber);border-radius:5px}
.mn-note{font-size:12.5px;color:var(--muted);margin:4px 0 14px;line-height:1.5}.mn-empty{color:var(--muted);font-size:13.5px;margin:0}
@media (max-width:640px){.mn-hero{grid-template-columns:1fr;gap:10px}.mn-util{flex-direction:row;gap:10px;align-items:baseline;min-width:0}.mn-util b{font-size:40px}.mn-range{width:100%}.mn-range button{flex:1}}

/* 05-oct (meeting): the customer / team member name is shown on its own page (it used to sit in the white top bar). */
.cp-title{min-width:0;flex:1}
.cp-name{font-family:'Oswald',sans-serif;font-weight:600;font-size:26px;line-height:1.15;margin:0;letter-spacing:.01em;overflow-wrap:anywhere}
.cp-sub{margin:2px 0 0;color:var(--muted);font-size:13px}
/* 07-oct (Mathew): the board's Undo notice — dark card, ✓, text, Undo / OK, amber bar running out over 15 s (design of the
   clock's note notice, ESQUELETO_AVISO_NOTA_RELOJ). Bottom centre; never covers the board's columns for long. */
.w1-undo{position:fixed;left:50%;bottom:24px;z-index:1200;transform:translate(-50%,16px);opacity:0;pointer-events:none;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px 12px;width:min(520px,calc(100vw - 32px));padding:12px 14px 16px;border-radius:14px;background:#1f242b;color:#fff;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1);box-sizing:border-box;overflow:hidden}
.w1-undo.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.w1-undo p{margin:0;font:500 12.5px Inter,sans-serif;color:rgba(255,255,255,.75)}.w1-undo p b{display:block;color:#fff;font-size:14px;font-weight:700}
.w1-undo-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(47,125,81,.9);font-size:13px;font-weight:800}
.w1-undo-b{cursor:pointer;padding:8px 14px;border-radius:9px;border:1px solid rgba(255,255,255,.28);font:700 13px Inter,sans-serif;color:#fff;white-space:nowrap}
.w1-undo-b:hover{background:rgba(255,255,255,.1)}.w1-undo-b.w1-undo-ok{background:var(--amber,#f0a500);border-color:var(--amber,#f0a500);color:#1f242b}
.w1-undo-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.18)}
.w1-undo-bar i{display:block;height:4px;width:100%;background:var(--amber,#f0a500);transform-origin:left;animation:w1UndoRun linear forwards}
@keyframes w1UndoRun{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.w1-undo{transition:none}.w1-undo-bar i{animation:none}}
/* 07-oct (Mathew): Time Clock › Today, car by car — the car and its total, then the person's blocks as a dotted timeline
   (the punch timeline of the Team rework skeleton): a dot per block, a pulsing green dot on the one running. Tap the car
   to fold it. Only the person's own time, only today. */
.c2 .c2-car-day{border-top:1px solid var(--line-soft,#eef0f3);padding:6px 0}
.c2 .c2-car-h{display:flex;align-items:center;gap:8px;width:100%;padding:8px 2px;border:0;background:none;cursor:pointer;font:inherit;color:inherit;text-align:left}
.c2 .c2-car-h b{font-size:13.5px}.c2 .c2-car-h .c2-num{margin-left:auto;font-weight:700}
.c2 .c2-car-h i{font-style:normal;color:var(--muted);transition:transform .2s ease}
.c2 .c2-car-day.shut .c2-car-h i{transform:rotate(-90deg)}
.c2 .c2-car-day.shut .c2-tl{display:none}
.c2 .c2-tl{position:relative;margin:2px 0 6px 6px;padding-left:20px;display:grid;gap:6px}
.c2 .c2-tl:before{content:"";position:absolute;left:5px;top:10px;bottom:10px;border-left:2px dotted #b9c0c8}
.c2 .c2-tl .c2-tl-row{position:relative;border:1px solid var(--line-soft,#eef0f3);border-radius:10px;padding:8px 10px;background:#fafbfc}
.c2 .c2-tl .c2-tl-row:before{content:"";position:absolute;left:-20px;top:50%;width:8px;height:8px;margin-top:-5px;border-radius:50%;background:#fff;border:2px solid #b9c0c8}
.c2 .c2-tl .c2-tl-row.now:before{background:var(--green,#2f7d51);border-color:var(--green,#2f7d51);box-shadow:0 0 0 0 rgba(47,125,81,.45);animation:c2Pulse 1.6s ease-out infinite}
.c2 .c2-tl .c2-tl-row b{font-size:12.5px}.c2 .c2-tl-w{margin-left:6px;color:var(--muted);font-size:11.5px;font-weight:600}
@keyframes c2Pulse{0%{box-shadow:0 0 0 0 rgba(47,125,81,.45)}70%{box-shadow:0 0 0 7px rgba(47,125,81,0)}100%{box-shadow:0 0 0 0 rgba(47,125,81,0)}}
@media (prefers-reduced-motion:reduce){.c2 .c2-tl .c2-tl-row.now:before{animation:none}.c2 .c2-car-h i{transition:none}}
/* 08-oct (v0.9): Ask for a fix (OsEzyTimeFix) — the technician's own fix requests under Today / Your week, the
   "clocked you out" notice above the clock block, and the panel. Phone first; nothing is cut. */
.tf-notice{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:0 0 12px;padding:10px 12px 10px 14px;border-left:4px solid var(--amber);background:var(--amber-bg,#fffaf0);border-radius:4px 12px 12px 4px;font-size:13.5px;line-height:1.35;animation:c2rise .35s both}
.tf-notice button{flex:none;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:700 12.5px Inter,sans-serif;color:var(--ink);cursor:pointer}
.tf-foot{margin-top:12px;padding-top:10px;border-top:1px solid #eef1f4}
.tf-h{font:700 11px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:2px 0 4px}
.tf-row{display:block;padding:9px 0;border-bottom:1px solid #eef1f4;font-size:13px}
.tf-row>div{min-width:0;margin-bottom:6px}.tf-row small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.tf-st{display:inline-flex;align-items:center;gap:6px;font:700 11.5px Inter,sans-serif;padding:3px 10px;border-radius:999px;max-width:100%;overflow-wrap:anywhere}
.tf-st.a{background:#fff6e0;color:#8a5c00}.tf-st.a i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:c2ring 2.2s ease-out infinite}
.tf-st.g{background:#e6f1ea;color:var(--c2-green,var(--green))}.tf-st.o{background:#eef1f4;color:var(--muted)}
.tf-ask{display:block;width:100%;min-height:44px;margin-top:10px;border:1px solid var(--line);border-radius:12px;background:#fff;font:700 14px Inter,sans-serif;color:var(--ink);cursor:pointer}
.tf-ask:hover{border-color:var(--amber-deep)}.tf-hint{display:block;margin-top:6px;text-align:center;font-size:12px;color:var(--muted)}
.tf-panel{display:flex;flex-direction:column;gap:6px}
.tf-l{display:block;margin:10px 0 2px;font:700 12px Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.tf-l span{text-transform:none;letter-spacing:0;font-weight:500}
.tf-in{width:100%;font:16px Inter,sans-serif;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.tf-opts,.tf-kinds{display:grid;gap:6px}
.tf-opt{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px;cursor:pointer}
.tf-opt input{flex:none;width:18px;height:18px;accent-color:var(--green)}.tf-opt:has(input:checked){border-color:var(--green);background:var(--green-bg)}
.tf-err{margin:6px 0 0;color:var(--red);font-size:13px;font-weight:600}.tf-keep{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.tf-acts{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:10px}.tf-acts .btn{min-height:46px;justify-content:center}
/* 08-oct: SELECTABLE — Mathew after the 07-oct meeting: everything that can be clicked must show it. On hover it gets
   a little darker (works on any background) and the pointer; pressing pushes it in. Never on overlays/backdrops (they
   close a panel) or on the page itself. Components that already have their own hover keep it; this only adds the
   darkening. Reduced motion: no press movement. */
:where([onclick],[role="button"],[role="tab"],button,a[href],summary,label:has(input)):not(:disabled):not([aria-disabled="true"]):not(body):not(main):not(.content):not([class*="backdrop"]):not([class*="overlay"]):not([class*="scrim"]):not([class*="layer"]):not(#drawer):not(.drawer){cursor:pointer;transition:filter .14s ease,transform .12s ease,box-shadow .16s ease,background-color .16s ease}
:where([onclick],[role="button"],[role="tab"],button,a[href],summary,label:has(input)):not(:disabled):not([aria-disabled="true"]):not(body):not(main):not(.content):not([class*="backdrop"]):not([class*="overlay"]):not([class*="scrim"]):not([class*="layer"]):not(#drawer):not(.drawer):hover{filter:brightness(.94)}
:where([onclick],[role="button"],[role="tab"],button,a[href],summary,label:has(input)):not(:disabled):not([aria-disabled="true"]):not(body):not(main):not(.content):not([class*="backdrop"]):not([class*="overlay"]):not([class*="scrim"]):not([class*="layer"]):not(#drawer):not(.drawer):active{transform:scale(.985)}
@media (prefers-reduced-motion: reduce){:where([onclick],[role="button"],button):active{transform:none}}
/* 08-oct (Mathew, after the 07-oct meeting): Shop Numbers rework — the period filter on top; whole cards that go
   somewhere; More details and "Customer money you hold" open a modal; every figure visibly reacts. */
.sn-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 14px;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.sn-toplab{font:700 12px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sn-top .mr-pick{font-size:15px}.sn-top .sn-asof{margin-left:auto}
.sn-tap{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}
.sn-tap:hover,.sn-tap:focus-visible{transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(25,29,35,.45);background-color:#fbfbfc;outline:none}
.sn-tap:active{transform:translateY(0) scale(.995)}
.sn-gi{margin-left:auto;flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#f2f4f7;color:var(--ink);transition:transform .16s,background .16s,color .16s}
.sn-tap:hover .sn-gi,.sn-gobar:hover .sn-gi,.sn-gobar:focus-visible .sn-gi{transform:translateX(3px);background:var(--amber);color:#fff}
.sn-gobar{width:calc(100% + 16px);margin:-6px -8px 0;padding:6px 8px;border:0;border-radius:10px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;align-items:center;transition:background .16s}
.sn-gobar:hover,.sn-gobar:focus-visible{background:#eceff3;outline:none}
.sn-morebtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft,#f7f8fa);font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;transition:background .16s,transform .12s}
.sn-morebtn:hover,.sn-morebtn:focus-visible{background:#eceff3;outline:none}.sn-morebtn:active{transform:scale(.99)}
.sn-s,.sn-kt,.sn-k.sn-kb{transition:background .16s,transform .16s,box-shadow .16s;border-radius:10px}
button.sn-s:hover,button.sn-s:focus-visible{background:#f2f4f7;outline:none}
button.sn-kt:hover,button.sn-kt:focus-visible,.sn-k.sn-kb:hover{background:#e9ecf0;transform:translateY(-2px);box-shadow:0 8px 18px -12px rgba(25,29,35,.4);outline:none}
button.sn-ln:hover,button.sn-ln:focus-visible,button.sn-bar:hover{background:#eceff3;outline:none}
button.sn-ln,button.sn-bar{border-radius:8px;padding-left:6px;padding-right:6px}
.sn-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(17,20,24,.45);animation:snFade .16s ease}
.sn-mpanel{width:min(760px,100%);max-height:min(calc(86vh / var(--z, 1)),900px);display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);animation:snUp .2s ease}
.sn-mhead{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}.sn-mhead h3{margin:0;font:600 19px Oswald,sans-serif}
.sn-mx{margin-left:auto;width:36px;height:36px;border:0;border-radius:50%;background:#f2f4f7;font-size:22px;line-height:1;cursor:pointer}.sn-mx:hover{background:#e2e6eb}
.sn-mbody{padding:16px 18px;overflow:auto}.sn-mbody .sub-card{margin:0 0 10px}
@keyframes snFade{from{opacity:0}to{opacity:1}}
@media (max-width:640px){.sn-modal{padding:0;align-items:flex-end}.sn-mpanel{max-height:calc(92vh / var(--z, 1));border-radius:16px 16px 0 0}.sn-top .sn-asof{margin-left:0}}
/* 08-oct: WIDE SCREENS — Mathew after the 07-oct meeting (Joe's 46" monitor): on big screens the page looked narrow and
   tiny. Above 1760px the whole app scales in proportion, so it always lays out like a ~1600px screen, only bigger.
   --z is the factor; every vh/dvh height in the app is divided by it (zoom scales them twice otherwise). */
:root{--z:1}
@media (min-width:1760px){:root{--z:1.1}}
@media (min-width:1920px){:root{--z:1.2}}
@media (min-width:2080px){:root{--z:1.3}}
@media (min-width:2240px){:root{--z:1.4}}
@media (min-width:2400px){:root{--z:1.5}}
@media (min-width:2560px){:root{--z:1.6}}
@media (min-width:2880px){:root{--z:1.8}}
@media (min-width:3200px){:root{--z:2}}
@media (min-width:3440px){:root{--z:2.15}}
@media (min-width:3840px){:root{--z:2.4}}
@media (min-width:1760px){html{zoom:var(--z)}}
/* 08-oct night (Mathew, meeting with Luis): picked option = light grey, bold black text, thin black edge inside. Luis sends the final codes. */
:root{--osz-sel-bg:#e4e7ec;--osz-sel-ink:#171a1f;--osz-sel-edge:transparent}   /* 08-oct night: no black edge (Mathew) */
/* Shop Numbers › Showing: the menu opened leftwards under the side rail. */
@media (min-width:561px){.sn-top .mr-pop{left:0;right:auto}}
/* 08-oct night (Mathew): tab bubbles follow the state colours — red wrong, deep amber attention (not the selector orange), green normal. */
.area-nav .an-b.a{background:#b86e00}
.area-nav .an-b.g{background:#2f7d51}