/* Turnover Board 2.0 — design tokens.
   Colour means status and nothing else; the ramp is 1.0's so nobody relearns it.
   Neutrals lean slightly blue so they read as chosen, not default grey. */
:root{
  /* status ladder */
  --s1:#1f66c7;   /* New — no vendor */
  --s2:#c23b2e;   /* Assigned */
  --s3:#f08c00;   /* Work done — check it */
  --sw:#8e5bd4;   /* Waiting on rework */
  --sc:#7fd19a;   /* Checked, syncing to AppFolio */
  --s4:#2fa84f;   /* Ready to bill / Complete */
  --sx:#c7c7cc;   /* Canceled */
  /* neutrals */
  --ink:#000; --paper:#fff; --ground:#f2f2f7; --line:#e4e4e8;
  --slate:#6d6d72; --faint:#8a8a8e; --hair:#d1d1d6;
  --link:#007aff;
  /* space, shape, type */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --r-2:8px; --r-3:12px; --r-4:16px;
  --t-12:12px; --t-14:14px; --t-16:16px; --t-18:18px; --t-22:22px; --t-28:28px; --t-34:34px;
  --tap:44px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
}

/* Page shell: every field and office page. Moved out of index.ts; tokens in tokens.css. */
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  :root{color-scheme:only light}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:#f2f2f7;color:#000;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
    font-size:17px;line-height:1.35}
  .app{max-width:560px;margin:0 auto;padding:0 16px calc(84px + env(safe-area-inset-bottom))}
  .cols{display:grid;grid-template-columns:1fr;gap:0;align-items:start}
  @media (min-width:900px){
    .app.wide{max-width:1420px}
    .app.wide .cols{grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}
    .app.wide .col > .group-label:first-child{margin-top:10px}
    .app.wide .tiles{grid-template-columns:repeat(4,1fr)}
  }
  .nav{position:sticky;top:0;z-index:5;background:#f2f2f7;margin:0 -16px;
    padding:10px 16px 4px;min-height:40px;display:flex;align-items:center;gap:10px}
  .nav a{color:#007aff;text-decoration:none;font-size:17px;display:inline-flex;align-items:center;
    gap:3px;padding:6px 10px 6px 2px;margin-left:-2px;border-radius:8px}
  .nav a:active{background:#e8e8ec}
  .nav a:focus-visible{outline:2px solid #007aff;outline-offset:2px}
  .chev-back{font-size:27px;line-height:1;font-weight:500;margin-top:-3px}
  .tabbar{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;
    background:rgba(249,249,251,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid #d9d9de;padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:8px 0 7px;font-size:11px;font-weight:500;color:#8a8a8e;text-decoration:none}
  .tabbar a.active{color:#007aff}
  .tabbar svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  .tabbar a:focus-visible{outline:2px solid #007aff;outline-offset:-2px;border-radius:8px}
  .search{display:block;width:100%;font:inherit;font-size:17px;padding:11px 14px;margin-top:12px;
    border:none;border-radius:11px;background:#e8e8ec;color:#000;-webkit-appearance:none}
  .search::placeholder{color:#8a8a8e}
  .search:focus{outline:2px solid #007aff}
  h1{font-size:32px;font-weight:700;letter-spacing:.2px;margin:2px 2px;text-wrap:balance}
  .sub{color:#8a8a8e;font-size:15px;margin:0 2px 8px;font-variant-numeric:tabular-nums}
  .group-label{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:#8a8a8e;margin:26px 18px 7px;scroll-margin-top:64px}
  .zdot{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:9px;flex:none;vertical-align:0}
  .zswitch .zdot{width:9px;height:9px;margin-right:6px;vertical-align:0}
  h1 .zdot{width:14px;height:14px;margin-right:10px;vertical-align:1px}
  .unav{display:flex;gap:10px;margin-top:22px}
  .unav a{flex:1;background:#fff;border-radius:12px;padding:13px 15px;text-decoration:none;
    color:#007aff;font-weight:600;font-size:15px;min-height:48px;display:flex;align-items:center;
    gap:6px;min-width:0}
  .unav a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .unav a.next{justify-content:flex-end;text-align:right}
  .unav a:active{background:#eeeef2}
  .unav a:focus-visible{outline:2px solid #007aff;outline-offset:-2px}
  .tile{position:relative}
  .tile svg{position:absolute;top:13px;right:13px;width:21px;height:21px;stroke:#c7c7cc;
    fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .group{background:#fff;border-radius:12px;overflow:hidden}
  .row{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;min-height:52px;
    border:none;border-top:1px solid #e4e4e8;background:none;font:inherit;color:inherit;text-align:left;
    text-decoration:none}
  .row:first-child{border-top:none}
  a.row{cursor:pointer}
  a.row:active{background:#eeeef2}
  a.row:focus-visible{outline:2px solid #007aff;outline-offset:-2px}
  .row .grow{flex:1 1 auto;min-width:0}
  .row .name{font-size:17px;font-weight:600;display:block}
  .row .detail{color:#8a8a8e;font-size:14px;margin-top:2px;display:block;font-variant-numeric:tabular-nums}
  .row .detail b{color:#000;font-weight:600}
  .row .side{color:#8a8a8e;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .chev{color:#8a8a8e;font-size:20px;font-weight:600;opacity:.55}
  .top-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:9px}
  .chip{height:27px;border-radius:7px;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;letter-spacing:.01em;min-width:0;overflow:hidden;padding:0 2px}
  .chip.s0{background:#f1f1f4;color:#bcbcc2}
  .chip.s1{background:#e8f1fd;color:#1f66c7;box-shadow:inset 0 0 0 1px #c4dcf7}
  .chip.s2{background:#fdece9;color:#c23b2e;box-shadow:inset 0 0 0 1px #f2cac3}
  .chip.s3{background:#f08c00;color:#fff}
  .chip.s4{background:#2fa84f;color:#fff}
  .chip.sw{background:#8e5bd4;color:#fff}
  .sw{background:#8e5bd4}
  .chip.sc{background:#e4f5ea;color:#1f7a38;box-shadow:inset 0 0 0 1.5px #7fd19a}
  .sc{background:#7fd19a}
  #chippop{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:30;background:#fff;border-radius:14px;
    padding:14px 16px;box-shadow:0 8px 30px rgba(0,0,0,.18);animation:fadeUp .18s ease-out both}
  #chippop .t{font-size:17px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:10px}
  #chippop .t .dot{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:-1px}
  #chippop .l{color:#3c3c43;font-size:15px;margin-top:6px;line-height:1.4}
  #chippop .l span{color:#8a8a8e}
  #chippop .b{display:flex;gap:10px;margin-top:10px;align-items:center}
  #chippop .b a{font-weight:600;color:#007aff;text-decoration:none;font-size:15px}
  #chippop .b button{margin-left:auto;font:inherit;font-size:14px;color:#8a8a8e;background:#f2f2f7;border:0;border-radius:8px;padding:6px 12px}
  .tstat{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
  .tbar{flex:1 1 90px;min-width:70px;height:5px;border-radius:99px;background:#ececf0;overflow:hidden;display:flex}
  .tbar i{display:block;height:100%}.tbar .g{background:#2fa84f}.tbar .o{background:#f08c00}
  .tlabel{font-size:13px;color:#8a8a8e;white-space:nowrap;font-variant-numeric:tabular-nums}
  .tlabel .c-hot{color:#e07a00}.tlabel .c-wait{color:#6b3fb0}
  .tlabel.ready{color:#1f7a38;font-weight:700;font-size:14px}
  .tlabel.done{color:#1f7a38;font-weight:700}
  .tstat .chip{height:24px;font-size:12.5px}
  .tstat .chip.open{box-shadow:inset 0 0 0 1.5px currentColor;text-decoration:none}
  .checknote{background:#e4f5ea;color:#1f7a38;border-radius:9px;padding:9px 12px;font-size:14px;line-height:1.35;flex:1 1 100%}
  .checknote.late{background:#fff4e0;color:#8a5200}
  .checknote time{color:inherit;font-weight:600}
  .checklinks{display:block;margin-top:5px}
  .checklinks a,.checklinks button{font:inherit;font-size:13px;font-weight:600;color:#1f66c7;background:none;border:0;padding:0;margin-right:14px;text-decoration:none;cursor:pointer}
  .checklinks button{color:#8a8a8e}
  .badge.wait{background:#efe6fb;color:#6b3fb0}
  .badge.new{background:#e8f1fd;color:#1f66c7}
  .badge.final{background:#e4f5ea;color:#1f7a38}
  .chip .xn{font-size:9.5px;font-weight:800;margin-left:2px;vertical-align:top;line-height:1;opacity:.9}
  .chip .wn{font-weight:600;opacity:.8;font-size:.85em;margin-left:3px}
  .newnote{background:#e8f1fd;border-radius:9px;padding:8px 12px;margin-top:8px;
    color:#1f66c7;font-size:14px;font-weight:600}
  .age-amber{color:#b36200;font-weight:600}
  .age-red{color:#c23b2e;font-weight:700}
  .wonote{background:#f5effd;border-radius:9px;padding:9px 12px;margin-top:8px;
    color:#5a3a94;font-size:14px}
  .wonote b{color:#3d2570}
  .checkrow{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap;align-items:center}
  .checkrow[hidden]{display:none}
  .btn.gobill{background:#2fa84f;color:#fff;font-size:14px;padding:9px 14px;text-decoration:none;
    display:inline-block;border-radius:10px}
  .btn.gobill:active{opacity:.75}
  .oops{font:inherit;font-size:14px;font-weight:600;padding:9px 13px;border-radius:10px;border:none;
    cursor:pointer;background:#fdece9;color:#c23b2e}
  .oops:active{opacity:.75}
  .oopsform{margin-top:9px}
  .oopsform textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid #d4d4d8;
    border-radius:10px;min-height:74px;resize:vertical}
  .oopsform .actions{display:flex;gap:9px;margin-top:8px}
  .photobtn{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:#007aff;background:#e8f1fd;
    padding:8px 13px;border-radius:10px;cursor:pointer}
  .photobtn input{display:none}
  .photostrip{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .photostrip img,.photos img{width:72px;height:72px;object-fit:cover;border-radius:8px;background:#e6e6ea}
  .photorow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .photobtn.lib{background:#f2f2f7;color:#3a3a3c}
  .photobtn.full{opacity:.45;pointer-events:none}
  .photostrip .ph{position:relative;line-height:0}
  .photostrip .ph button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:#1c1c1e;color:#fff;font-size:13px;line-height:22px;padding:0;cursor:pointer}
  .oopsform .saved{margin-top:8px;padding:10px 12px;border-radius:10px;background:#e4f5ea;color:#1f7a38;font-size:14px;font-weight:600}
  .oopsform .saved .btn{margin:8px 8px 0 0}
  .photos{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .photos a{display:block;line-height:0}
  .oopsform .sending{color:#8a8a8e;font-size:14px;margin-top:6px}
  .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .pill{font-size:14px;font-weight:600;padding:7px 13px;border-radius:999px;background:#fff;color:#3c3c43;text-decoration:none;border:1px solid #e0e0e4}
  .pill.cur{background:#007aff;color:#fff;border-color:#007aff}
  .wcard{background:#fff;border-radius:14px;padding:14px 16px;margin:10px 0 0;scroll-margin-top:70px}
  .wcard.done{opacity:.8}
  .wcard .wh{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
  .wcard .wu{font-size:18px;font-weight:700}
  .wcard .wt{color:#3c3c43;font-size:14.5px;margin-top:3px}
  .wcard .wage{font-size:14px;font-weight:600;color:#8a8a8e;white-space:nowrap}
  .wcard .wage time{color:inherit}
  .wcard .wnote{background:#f5effd;color:#3d2570;border-radius:10px;padding:10px 12px;margin-top:10px;font-size:15.5px;line-height:1.4;white-space:pre-wrap}
  .wcard .wnote .when{color:#8a7aa8;font-size:13px;white-space:nowrap}
  .wcard .wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;margin-top:10px}
  .wcard .wgrid a{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#e6e6ea;line-height:0}
  .wcard .wgrid img{width:100%;height:100%;object-fit:cover}
  .wcard .wact{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
  .wcard .wact .lnk{font-weight:600;color:#007aff;text-decoration:none;font-size:14px;padding:8px 6px}
  #lightbox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;touch-action:pan-y}
  #lightbox img{max-width:100vw;max-height:100vh;object-fit:contain}
  #lightbox .lb-x,#lightbox .lb-p,#lightbox .lb-n{position:absolute;color:#fff;background:rgba(255,255,255,.14);border:0;font:inherit;font-size:22px;
    width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
  #lightbox .lb-x{top:max(12px,env(safe-area-inset-top));right:14px}
  #lightbox .lb-p{left:10px;top:50%;margin-top:-22px}#lightbox .lb-n{right:10px;top:50%;margin-top:-22px}
  #lightbox .lb-c{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:#fff;font-size:14px;font-variant-numeric:tabular-nums}
  .s0{background:#e6e6ea}
  .s1{background:#4a8fe0}
  .s2{background:#c23b2e}
  .s3{background:#f08c00}
  .s4{background:#2fa84f}
  .legend{display:flex;gap:12px;color:#8a8a8e;font-size:12.5px;margin:10px 2px 0;flex-wrap:wrap}
  .lchip{display:inline-flex;width:24px;height:15px;border-radius:4px;margin-right:6px;vertical-align:-2px}
  .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
  .trade{display:block;padding:14px 16px;border-top:1px solid #e4e4e8}
  .trade:first-child{border-top:none}
  .trade .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
  .trade .name{font-size:17px;font-weight:600}
  .trade .state{font-size:15px;font-weight:700;white-space:nowrap}
  .trade .state.st-s0{color:#8a8a8e;font-weight:500}
  .trade .state.st-s1{color:#1f66c7}.trade .state.st-s2{color:#c23b2e}.trade .state.st-s3{color:#e07a00}
  .trade .state.st-s4{color:#1f7a38}.trade .state.st-sw{color:#6b3fb0}.trade .state.st-sc{color:#1f7a38}
  .invoice{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:#fff7e0;color:#8a5200;text-decoration:none;white-space:nowrap}
  .invoice.pend{background:#fff;color:#b45309;box-shadow:inset 0 0 0 1.5px #f0a730}
  .wostate{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;letter-spacing:.01em}
  .wostate.s1{background:#e8f1fd;color:#1f66c7}.wostate.s2{background:#fdece9;color:#c23b2e}
  .wostate.s3{background:#f08c00;color:#fff}.wostate.s4{background:#2fa84f;color:#fff}
  .wostate.sw{background:#8e5bd4;color:#fff}.wostate.sc{background:#e4f5ea;color:#1f7a38;box-shadow:inset 0 0 0 1.5px #7fd19a}
  .wostate.sx,.wostate.s0{background:#f1f1f4;color:#8a8a8e}
  .wostate.sx{text-decoration:line-through;text-decoration-color:#d7263d;text-decoration-thickness:2px}
  .chip.sx{background:#f1f1f4;color:#8a8a8e;text-decoration:line-through;text-decoration-color:#d7263d;text-decoration-thickness:2px;box-shadow:inset 0 0 0 1px #e0e0e4}
  .trade .state.st-sx{color:#8a8a8e;text-decoration:line-through;text-decoration-color:#d7263d;text-decoration-thickness:2px}
  .dot.sx{background:#c7c7cc}
  .trade .wo{color:#8a8a8e;font-size:13.5px;margin-top:4px}
  .who{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin-top:7px;padding:8px 10px;background:#eef3ff;border-radius:10px;font-size:14px}
  .who .whovend{flex-basis:100%;color:#8a8a8e;font-size:12px;margin-bottom:-2px}
  .who .whoname{font-weight:700;color:#1c1c1e}
  .who .whoname::before{content:"👤";margin-right:5px;font-size:13px}
  .who .vendname::before{content:"🏢"}
  .who.vendbox{background:#f2f2f7}
  .who .whotitle{color:#6d6d72;font-size:12.5px}
  .who .whobtns{display:flex;gap:6px;margin-left:auto}
  .cbtn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;color:#fff;background:#1f66c7;white-space:nowrap}
  .cbtn.text{background:#2fa84f}
  .planned{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:#4b5563;background:#f1f1f4;border-radius:999px;padding:3px 9px}
  .cbtn.mini{padding:3px 9px;font-size:12px;margin-left:8px;vertical-align:middle}
  .wo.vend{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0}
  #chippop .vcall{margin-left:8px}
  .cbtn:active{opacity:.8}
  #chippop .who{margin-top:8px}
  .wo-head{display:flex;align-items:center;gap:10px;margin-top:9px}
  .wo-num{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
  span.wo-num{user-select:all;-webkit-user-select:all}
  a.wo-num{color:#007aff;text-decoration:none;user-select:none;-webkit-user-select:none;
    display:inline-block;padding:4px 2px;margin:-4px -2px}
  a.wo-num:focus-visible{outline:2px solid #007aff;outline-offset:2px;border-radius:4px}
  .copy{font:inherit;font-size:13px;font-weight:600;padding:5px 12px;border-radius:8px;border:none;
    cursor:pointer;background:#eeeef2;color:#007aff}
  .desc{color:#3c3c43;font-size:14.5px;margin-top:6px;white-space:pre-line}
  .desc.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .more{font:inherit;font-size:13px;font-weight:600;padding:4px 0;border:none;background:none;
    color:#007aff;cursor:pointer}
  .btn{font:inherit;font-size:16px;font-weight:600;padding:12px 14px;border-radius:11px;
    border:none;cursor:pointer;background:#eeeef2;color:#3c3c43}
  .btn.primary{background:#007aff;color:#fff}
  .btn.small{font-size:13px;padding:6px 12px}
  .btn:active,.copy:active{opacity:.75}
  .btn:focus-visible,.copy:focus-visible,.more:focus-visible{outline:2px solid #007aff;outline-offset:2px}
  @media (prefers-reduced-motion: reduce){.btn:active,.copy:active,a.row:active{opacity:1;background:none}}
  .empty{color:#8a8a8e;font-size:15px;padding:14px 16px}
  .today{color:#8a8a8e;font-size:13px;text-transform:uppercase;letter-spacing:.07em;
    font-weight:600;margin:14px 2px -2px}
  .badge{display:inline-block;background:#fdeedd;color:#b36200;border-radius:999px;
    padding:2px 10px;font-size:12.5px;font-weight:600;margin-left:2px}
  .done-badge{color:#2fa84f;font-weight:600}
  .minibar{display:flex;height:6px;border-radius:99px;overflow:hidden;background:#ececf0;margin-top:9px}
  .minibar span{height:100%}
  .mb-g{background:#2fa84f}.mb-o{background:#f08c00}.mb-r{background:#f2cac3}
  .zswitch{display:flex;gap:8px;overflow-x:auto;margin:12px -16px 0;padding:0 16px 4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .zswitch::-webkit-scrollbar{display:none}
  .zswitch a{flex:0 0 auto;padding:8px 15px;border-radius:999px;background:#fff;color:#000;
    text-decoration:none;font-size:14px;font-weight:600;border:1px solid #e0e0e4}
  .zswitch a.cur{background:#007aff;color:#fff;border-color:#007aff}
  .zswitch a:active{transform:scale(.95)}
  .zswitch a:focus-visible{outline:2px solid #007aff;outline-offset:2px}
  @keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  h1,.sub,.today{animation:fadeIn .25s ease-out both}
  .group,.tiles,.legend,.search,.zswitch,.minibar{animation:fadeUp .3s ease-out both}
  .group{animation-delay:.03s}
  .tabbar a:active svg{transform:scale(.88)}
  .tabbar svg{transition:transform .12s ease}
  @media (hover:hover){
    a.row:hover{background:#f7f7fa}
    .zswitch a:hover{border-color:#007aff}
  }
  @media (prefers-reduced-motion:reduce){
    h1,.sub,.today,.group,.tiles,.legend,.search,.zswitch,.minibar{animation:none}
    .tabbar svg{transition:none}
  }
  .sandbox{display:block;background:repeating-linear-gradient(135deg,#f08c00 0 14px,#e07a00 14px 28px);color:#fff;border-radius:10px;
    padding:8px 13px;font-weight:700;font-size:14px;text-decoration:none;margin:12px 0 4px;letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.15)}
  .v2bar{background:#1c1c1e;color:#fff;font-size:13px;font-weight:700;padding:7px 14px;border-radius:10px;margin-bottom:10px;text-align:center}
  .v2bar a{color:#7fb3ff;text-decoration:none}
  .feedwarn{display:block;background:#c23b2e;color:#fff;border-radius:10px;padding:10px 13px;font-weight:600;
    font-size:14px;margin:10px 0 0;text-decoration:none}
  .feedwarn time{color:#fff}
  .health{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  .health a,.health span{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:999px;
    padding:7px 13px;font-size:13.5px;font-weight:600;color:#000;text-decoration:none}
  .health .led{width:9px;height:9px;border-radius:50%;background:#2fa84f;flex:none}
  .health .led.bad{background:#c23b2e}.health .led.off{background:#c7c7cc}
  .tiles.five{grid-template-columns:repeat(2,1fr)}
  .tiles.five .tile:last-child{grid-column:span 2}
  @media (min-width:700px){.tiles.five,.app.wide .tiles.five{grid-template-columns:repeat(5,1fr)}.tiles.five .tile:last-child{grid-column:auto}}
  .li{padding:12px 16px;border-top:1px solid #e4e4e8}.li:first-child{border-top:none}
  .li>b{display:block;margin-bottom:3px}.li .sub{color:#3c3c43;font-size:14px;margin-top:3px}
  .tile.warn .big{color:#c23b2e}.tile.hot .big{color:#f08c00}.tile.new .big{color:#1f66c7}
  .row .side.num{font-size:13px}
  .filterbar{background:#fff8e1;border:1px solid #f4d78a;border-radius:11px;padding:10px 14px;font-size:14px;margin-top:12px}
  .filterbar a{float:right;color:#007aff;text-decoration:none;font-weight:600}
  /* Each work order sits in its own outlined box so two on one trade read as
     two things, not one run-on list. */
  .wo-block{scroll-margin-top:70px;border-radius:12px;margin:10px 0 0;padding:8px 12px 12px;border:1.5px solid #d6d6db;background:#fafafc}
  .wo-block .wo-head{margin-top:2px}
  .wo-block.sx-block{border-style:dashed;opacity:.85}
  .wo-block:target{background:#fff8e1;border-color:#f08c00;box-shadow:inset 0 0 0 1px #f08c00}
  .badge[data-href]{cursor:pointer}
  a.tile{display:block;color:inherit;text-decoration:none}
  a.tile:active{opacity:.7}
  .c-new{color:#1f66c7}
  .jump{display:flex;gap:8px;margin-top:10px}
  .jump input{flex:1;margin:0}
  .fresh{color:#8a8a8e;font-size:12.5px;margin:8px 2px 0;cursor:pointer}
  .fresh.stale{color:#c23b2e;font-weight:600}
  .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:10px}
  .tile{background:#fff;border-radius:12px;padding:12px 14px}
  .tile .big{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
  .tile .lbl{color:#8a8a8e;font-size:12.5px;margin-top:2px}
  .msg{background:#fff;border-radius:12px;padding:13px 16px;margin:14px 0;font-weight:600}
  table{border-collapse:collapse;width:100%;font-size:13px}
  th,td{text-align:left;padding:7px 10px;border-bottom:1px solid #e4e4e8;vertical-align:top}
  th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#8a8a8e}
  .wrap{overflow-x:auto}
  input[type=text],select{font:inherit;padding:7px 9px;border:1px solid #d4d4d8;border-radius:8px;background:#fff}
  .footnote{color:#8a8a8e;font-size:13px;margin:30px 18px 0}