/* ============ DESIGN TOKENS — united-rentals-dashboard-design-system v1.0 ============
     Navy is structural, blue is interactive, orange is a spotlight (one per screen).
     #000A50 is the verified UR brand anchor. Radii: 4px controls / 8px cards. */
  :root {
    color-scheme: light;
    --navy:      #000A50;   /* UR Deep Navy — shell (masthead, nav) */
    --navy-800:  #0A1863;
    --pritchard: #1E4FD8;   /* interactive blue (legacy var name kept) */
    --pritchard-2: #2E63F0; /* hover */
    --ur-blue:   #1E4FD8;
    --ur-gray:   #6B7080;
    --accent:    #F26522;   /* safety orange — ONE spotlight per screen */
    --page:      #F1F2F5;
    --surface:   #FFFFFF;
    --ink:       #14161F;
    --ink-2:     #3D4152;
    --muted:     #6B7080;
    --grid:      #ECEEF2;   /* hairlines, row dividers */
    --baseline:  #C9CDD6;   /* axis baselines */
    --border:    #C9CDD6;
    --series-1:  #000A50;   /* chart-1: navy ink on white */
    --series-1t: #E4EBFC;   /* blue-100: row hover, selected tints */
    --good:      #1E7B3C;
    --warning:   #B87700;
    --critical:  #C22D2D;
    --good-tint:     #E3F3E8;
    --warning-tint:  #FFF4DC;
    --critical-tint: #FBE7E7;
    --chip-tint:     #F1F2F5;
    --brand-on: #ffffff;
    --shadow: 0 1px 2px rgba(20,22,31,0.05);
    --font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
    --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "Courier New", monospace;
    --r-control: 4px;
    --r-card: 8px;
    --accent-text: #C14A0F;   /* darker safety orange: AA at small sizes */
  }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
      color-scheme: dark;
      --page: #0A0D1A; --surface: #141A30;
      --ink: #ffffff; --ink-2: rgba(255,255,255,0.72); --muted: #8A90A6;
      --grid: rgba(255,255,255,0.08); --baseline: rgba(255,255,255,0.22);
      --border: rgba(255,255,255,0.14);
      --series-1: #2E63F0; --series-1t: rgba(46,99,240,0.20);
      --pritchard: #2E63F0; --pritchard-2: #5B8DEF; --ur-blue: #2E63F0;
      --good: #3DBB6A; --warning: #FFB500; --critical: #E25656;
      --good-tint: rgba(30,123,60,0.28); --warning-tint: rgba(255,181,0,0.20);
      --critical-tint: rgba(194,45,45,0.26);
      --chip-tint: rgba(255,255,255,0.08);
      --accent-text: #FF8A50;
      --shadow: none;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --page: #0A0D1A; --surface: #141A30;
    --ink: #ffffff; --ink-2: rgba(255,255,255,0.72); --muted: #8A90A6;
    --grid: rgba(255,255,255,0.08); --baseline: rgba(255,255,255,0.22);
    --border: rgba(255,255,255,0.14);
    --series-1: #2E63F0; --series-1t: rgba(46,99,240,0.20);
    --pritchard: #2E63F0; --pritchard-2: #5B8DEF; --ur-blue: #2E63F0;
    --good: #3DBB6A; --warning: #FFB500; --critical: #E25656;
    --good-tint: rgba(30,123,60,0.28); --warning-tint: rgba(255,181,0,0.20);
    --critical-tint: rgba(194,45,45,0.26);
    --chip-tint: rgba(255,255,255,0.08);
    --accent-text: #FF8A50;
    --shadow: none;
  }

  * { box-sizing: border-box; }
  body { margin: 0; background: var(--page); color: var(--ink);
         font: 400 14px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
  :focus-visible { outline: 2px solid var(--pritchard-2); outline-offset: 2px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
             overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* ============ SHELL: white letterhead over navy nav (UR §4.2 adapted) ============
     The brand bar stays white in BOTH themes — the logos (transparent PNGs)
     read naturally, like paper letterhead; the navy band below is the
     structural shell with the safety-orange rule and active indicator. */
  .masthead { position: sticky; top: 0; z-index: 40; }
  .masthead::after { content: ""; display: block; height: 3px; background: var(--accent); }
  .mh-top { display: flex; align-items: center; gap: 16px; padding: 10px 22px; flex-wrap: wrap;
            background: #ffffff; border-bottom: 1px solid #ECEEF2; }
  .brandlogo { display: block; flex: 0 0 auto; }
  .ptitle { line-height: 1.2; min-width: 0; }
  .ptitle b { display: block; font: 700 19px/1.2 var(--font-display); color: var(--navy);
              text-transform: uppercase; letter-spacing: 0.02em; }
  .ptitle span { color: #6B7080; font-size: 12px; }
  .spacer { flex: 1; }
  /* account controls live on the white letterhead — always light styling,
     independent of the page theme (the letterhead is white in both) */
  .mh-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mh-user .ghost { background: #ffffff; border-color: #C9CDD6; color: #3D4152; white-space: nowrap; }
  .mh-user .ghost:hover { background: #F1F2F5; color: #14161F; }
  .mh-user .userchip { border-color: #C9CDD6; color: #3D4152; background: #ffffff; max-width: 240px; }
  .mh-user .userchip #userchip-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 1080px) { .ptitle span { display: none; } .mh-user .userchip { display: none !important; } }
  .ghost.icon { padding: 6px 9px; line-height: 1; }
  .mh-divider { width: 1px; align-self: stretch; margin: 4px 0; background: #ECEEF2; }

  .asof { color: rgba(255,255,255,0.72); font-size: 12px; text-align: right; line-height: 1.3;
          white-space: nowrap; }
  .asof b { color: #fff; font-weight: 600; }
  .seg { display: inline-flex; flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.30);
         border-radius: var(--r-control); overflow: hidden; }
  .seg button { border: 0; background: transparent; color: rgba(255,255,255,0.80); padding: 6px 12px;
                font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
  .seg button.on { background: var(--ur-blue); color: #fff; font-weight: 600; }
  .seg button + button { border-left: 1px solid rgba(255,255,255,0.20); }
  .ghost { border: 1.5px solid var(--border); background: var(--surface); color: var(--ink);
           border-radius: var(--r-control); padding: 6px 12px; font: inherit; font-size: 12.5px;
           font-weight: 500; cursor: pointer; transition: background 120ms ease; }
  .ghost:hover { background: var(--chip-tint); }

  .mh-sub { display: flex; align-items: center; gap: 12px; padding: 0 22px;
            background: var(--navy); }
  .mh-sub .asof { padding: 4px 0; }
  nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav button { border: 0; background: transparent; color: rgba(255,255,255,0.72); font: inherit;
               font-size: 13px; font-weight: 600; padding: 11px 16px; cursor: pointer;
               border-bottom: 3px solid transparent; text-transform: uppercase; letter-spacing: 0.04em;
               white-space: nowrap; flex: 0 0 auto; }
  nav button:hover { color: #fff; background: var(--navy-800); }
  nav button.on { color: #fff; border-bottom-color: var(--accent); background: var(--navy-800); }
  @media (max-width: 860px) { .mh-sub .asof { display: none; } }

  main { padding: 18px 22px 48px; max-width: 1660px; margin: 0 auto; }
  .page { display: none; } .page.on { display: block; }

  .banner { display: none; margin-bottom: 14px; padding: 9px 14px; border-radius: 8px;
            border: 1px solid var(--border); background: var(--warning-tint); font-size: 13px; }
  .banner.show { display: block; }

  /* ============ TILES & CARDS ============ */
  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 16px; }
  .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
          padding: 14px 16px; box-shadow: var(--shadow); }
  button.tile.goto { font: inherit; text-align: left; cursor: pointer; color: inherit;
                     transition: border-color 120ms ease, transform 120ms ease; }
  button.tile.goto:hover { border-color: var(--ur-blue); transform: translateY(-1px); }
  .tile .k { color: var(--muted); font-size: 11px; font-weight: 600;
             text-transform: uppercase; letter-spacing: 0.08em; }
  .tile .v { font: 700 34px/1.1 var(--font-display); color: var(--ink); margin-top: 4px;
             font-variant-numeric: tabular-nums; }
  .tile.spot .v { color: var(--accent-text); }   /* the ONE orange spotlight (AA-safe step) */
  .tile .s { color: var(--muted); font-size: 11.5px; margin-top: 3px; }

  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
  @media (max-width: 1050px) { .grid2 { grid-template-columns: 1fr; } }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
          padding: 16px 18px; box-shadow: var(--shadow); }
  .card h2 { font: 600 17px/1.25 var(--font-display); margin: 0 0 2px; color: var(--ink); }
  .card .eyebrow, .eyebrow { color: var(--muted); font-size: 11px; font-weight: 600;
             text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
  .card .sub { color: var(--muted); font-size: 12px; margin-bottom: 12px; }

  /* horizontal bars (UR §6: honest ink, one orange takeaway) */
  .bars .row { display: grid; grid-template-columns: 190px 1fr; gap: 10px; align-items: center; margin: 11px 0; }
  .bars .lbl { font-size: 12.5px; color: var(--ink-2); text-align: right; line-height: 1.25; }
  .bars .lbl b { display: block; color: var(--ink); font-weight: 600; }
  .bars .track { position: relative; height: 18px; }
  .bars .track::after { content: ""; position: absolute; left: 0; top: -5px; bottom: -5px;
                        border-left: 2px solid var(--baseline); }
  .bars .bar { position: absolute; left: 0; top: 0; height: 18px; min-width: 2px;
               background: var(--series-1); border-radius: 0 2px 2px 0; cursor: default; }
  .bars .bar .ovl { position: absolute; left: 0; bottom: 0; height: 6px; background: var(--accent);
                    border-radius: 0 2px 2px 0; }
  .bars .val { position: absolute; top: 0; line-height: 18px; font-size: 12px; font-weight: 600;
               padding-left: 8px; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

  /* vertical month columns with horizontal gridlines */
  .cols { display: flex; align-items: flex-end; gap: 6px; height: 150px;
          border-bottom: 2px solid var(--baseline); padding: 0 4px; position: relative; }
  .cols .c { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
             align-items: center; height: 100%; position: relative; cursor: default; }
  .cols .fill { width: 100%; max-width: 34px; background: var(--series-1);
                border-radius: 2px 2px 0 0; min-height: 2px; }
  .cols .c.past .fill { background: var(--baseline); }
  .cols .c.peakcol .fill { background: var(--accent); }
  .cols .cval { position: absolute; top: -2px; transform: translateY(-100%);
                font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .cols .peak { position: absolute; top: -2px; transform: translateY(-100%);
                font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
                font-family: var(--font-mono); }
  .clabels { display: flex; gap: 6px; padding: 6px 4px 0; }
  .clabels div { flex: 1; min-width: 0; text-align: center; font-size: 10.5px; color: var(--muted);
                 white-space: nowrap; line-height: 1.3; }
  .clabels div b { display: block; font-weight: 600; color: var(--ink-2); font-size: 10px; }

  /* small orange text needs the darker accent for AA contrast */
  .hl { color: var(--accent-text, #C14A0F); font-weight: 600; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
  @media (max-width: 1180px) { .grid3 { grid-template-columns: 1fr; } }
  /* equal-height chart cards: bar lists stretch and distribute so a 4-row
     chart doesn't float in a card sized by its 6-row neighbor */
  .grid3 .card { display: flex; flex-direction: column; }
  .grid3 .card .bars { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
  .chart-foot { border-top: 1px solid var(--grid); margin-top: 10px; padding-top: 9px;
                font-size: 12px; color: var(--ink-2); }
  .chart-foot b { color: var(--ink); font-weight: 600; }

  /* ============ US CHOROPLETH MAP (real state geography) ============
     Sequential navy ramp = magnitude; the top state is the ONE orange
     takeaway. Fills are absolute brand colors in both themes; the stroke
     picks up the card surface so states read as separated shapes. */
  .mapwrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
  @media (max-width: 980px) { .mapwrap { grid-template-columns: 1fr; } }
  .mapmain { min-width: 0; }
  .usmap svg { display: block; width: 100%; height: auto; max-width: 860px; margin: 0 auto; }
  .usmap path { fill: var(--chip-tint); stroke: var(--surface); stroke-width: 1.2;
                stroke-linejoin: round; cursor: default; }
  .usmap path.r1 { fill: #E4EBFC; }
  .usmap path.r2 { fill: #9DB4EF; }
  .usmap path.r3 { fill: #4A69D8; }
  .usmap path.r4 { fill: #000A50; }
  .usmap path.top { fill: var(--accent); }
  .usmap path:hover { filter: brightness(1.12); }
  :root[data-theme="dark"] .usmap path.r1 { fill: #2A3560; }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .usmap path.r1 { fill: #2A3560; } }
  /* Albers-projected pin layer over the state shapes */
  .usmap .pins circle { fill: var(--accent); stroke: #fff; stroke-width: .8; opacity: .88; }
  .usmap .pins circle.dim { fill: var(--ur-blue); opacity: .6; }
  .usmap .pins circle.custom { fill: var(--good); opacity: .9; }
  .usmap.dirmap path { fill: var(--chip-tint); vector-effect: non-scaling-stroke; }
  /* Directory split view: list left, sticky zoomable map right */
  .dir-split { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
               gap: 14px; align-items: start; }
  .dir-mappane { position: sticky; top: 128px; padding: 14px; }
  @media (max-width: 1100px) {
    .dir-split { grid-template-columns: 1fr; }
    .dir-mappane { position: relative; top: auto; order: -1; } }
  .dirmap svg { cursor: grab; touch-action: none; }
  .dirmap svg.panning { cursor: grabbing; }
  .dirmap .pins circle { cursor: pointer; }
  .dirmap .pins circle.hot { fill: var(--accent); opacity: 1; stroke-width: 1.6; }
  .mapzoom { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column;
             gap: 4px; z-index: 5; }
  .mapzoom button { width: 30px; height: 30px; padding: 0; font-size: 15px; line-height: 1;
                    background: var(--surface); }
  /* Pritchard-added directory entries (custom locations) */
  .dir-custom { margin-top: 14px; }
  .dir-custom .cust { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
                      padding: 8px 10px; border: 1px solid var(--grid); border-radius: 6px;
                      margin-bottom: 6px; font-size: 12.5px; }
  .dir-custom .cust b { color: var(--ink); }
  .dir-custom .cust span { color: var(--ink-2); }
  .mailok { color: var(--ur-blue); font-size: 11px; }
  .pin-toggle { border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-2);
                border-radius: var(--r-control); padding: 3px 10px; font: 500 11.5px var(--font-body);
                cursor: pointer; }
  .pin-toggle.on { border-color: var(--ur-blue); color: var(--ur-blue); font-weight: 600; }
  .maplegend { display: flex; align-items: center; gap: 4px; margin-top: 12px;
               justify-content: center; font-size: 11px; color: var(--muted); }
  .maplegend i { width: 22px; height: 10px; border-radius: 2px; display: inline-block; }
  .regrow { display: flex; flex-direction: column; gap: 6px; }
  .regrow .reg { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
  .regrow .reg i { height: 8px; border-radius: 2px; background: var(--series-1); display: inline-block; }
  .regrow .reg i.top { background: var(--accent); }
  .regrow .reg b { margin-left: auto; font: 500 12px var(--font-mono); color: var(--ink); }
  .map-note { margin-top: 14px; font-size: 11px; color: var(--muted); line-height: 1.5; }

  /* lifecycle composition strip */
  .strip { display: flex; gap: 2px; height: 26px; border-radius: var(--r-control); overflow: hidden; }
  .strip i { display: block; height: 100%; min-width: 3px; cursor: default; }
  .strip-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
  .strip-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .strip-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
  .strip-legend b { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-weight: 500; }

  #tip { position: fixed; display: none; z-index: 60; pointer-events: none;
         background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
         box-shadow: 0 4px 16px rgba(0,0,0,0.18); padding: 8px 11px; font-size: 12.5px; }
  #tip b { display: block; margin-bottom: 2px; } #tip .m { color: var(--ink-2); }

  /* ============ TABLE ============ */
  .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
  .toolbar input[type=search], .toolbar select, .filterpanel select, .filterpanel input {
    font: inherit; font-size: 13px; color: var(--ink); background: var(--surface);
    border: 1.5px solid var(--border); border-radius: var(--r-control); padding: 7px 10px; }
  .toolbar input[type=search]:focus, .toolbar select:focus,
  .filterpanel select:focus, .filterpanel input:focus {
    outline: none; border-color: var(--ur-blue); box-shadow: 0 0 0 3px var(--series-1t); }
  .toolbar input[type=search] { width: 300px; }
  .count { color: var(--muted); font-size: 12.5px; margin-left: auto; }
  .toolbar .ghost.active { border-color: var(--ur-blue); color: var(--ur-blue); }

  /* view toggle (seg on a light background, unlike the masthead seg) */
  .toolbar .seg.viewseg { border-color: var(--border); }
  .toolbar .seg.viewseg button { color: var(--ink-2); }
  .toolbar .seg.viewseg button + button { border-left-color: var(--border); }
  .toolbar .seg.viewseg button.on { background: var(--ur-blue); color: #fff; }

  /* search + typeahead */
  .searchwrap { position: relative; }
  .suggest { position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content;
             max-width: 460px; max-height: 320px; overflow-y: auto; z-index: 30;
             background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
             box-shadow: 0 8px 28px rgba(0,0,0,0.16); padding: 4px; }
  .suggest .sg { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px;
                 font-size: 12.5px; cursor: pointer; color: var(--ink); }
  .suggest .sg:hover, .suggest .sg.sel { background: var(--series-1t); }
  .suggest .sg code { font: 12px var(--font-mono); color: var(--ur-blue); }
  .suggest .sg .n { margin-left: auto; color: var(--muted); font: 11.5px var(--font-mono); }
  .suggest .sg-head { padding: 6px 10px 2px; font-size: 10.5px; text-transform: uppercase;
                      letter-spacing: .05em; color: var(--muted); font-weight: 700; }

  /* filter panel + active-filter chips */
  .filterpanel { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px;
                 background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
                 padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow); }
  .filterpanel[hidden] { display: none; }
  .fp-group label { display: block; font-size: 11px; color: var(--muted); font-weight: 600;
                    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
  .fp-group select, .fp-group input { width: 100%; }
  .fp-checks { display: flex; flex-direction: column; gap: 4px; }
  .fp-checks label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2);
                     text-transform: none; letter-spacing: 0; font-weight: 500; margin: 0; cursor: pointer; }
  .chips-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
  .chips-bar[hidden] { display: none; }
  .fchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px;
           border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--series-1t);
           color: var(--ink); border: 1px solid transparent; }
  .fchip b { font-weight: 650; }
  .fchip button { border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
                  font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 50%; }
  .fchip button:hover { color: var(--critical); background: rgba(0,0,0,0.06); }
  .chips-bar .clearall { border: 0; background: transparent; color: var(--ur-blue); font: inherit;
                         font-size: 12px; font-weight: 600; cursor: pointer; padding: 3px 6px; }
  mark { background: var(--warning-tint); color: inherit; border-radius: 2px; padding: 0 1px; }
  .btn { border: 0; background: var(--ur-blue); color: #fff; border-radius: var(--r-control);
         padding: 9px 16px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
         transition: background 120ms ease; }
  .btn:hover { background: var(--pritchard-2); }

  .tablewrap { overflow: auto; max-height: 62vh; border: 1px solid var(--border);
               border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); }
  table { border-collapse: collapse; width: max-content; min-width: 100%; }
  thead th { position: sticky; top: 0; z-index: 10; background: var(--chip-tint); text-align: left;
             font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase;
             letter-spacing: 0.05em; padding: 10px 12px; border-bottom: 1px solid var(--border);
             white-space: nowrap; cursor: pointer; user-select: none; }
  thead th .arrow { color: var(--ur-blue); font-size: 10px; }
  /* Operations view must fit 1280px with zero horizontal scroll: tighter
     cell padding than the 29-column Full-report parity view */
  table.ops tbody td, table.ops thead th { padding-left: 8px; padding-right: 8px; }
  .rev { color: var(--ur-blue); font-weight: 700; cursor: help; }
  tbody td { padding: 10px 12px; border-bottom: 1px solid var(--grid); white-space: nowrap;
             font-size: 13px; }
  tbody tr { cursor: pointer; }
  tbody tr:hover td { background: var(--series-1t); }

  /* pinned PO# + Status columns survive horizontal scroll. Widths are EXACT
     (not min-) so the second column's left offset always matches the first
     column's real rendered width — auto-layout widening broke the seam. */
  th.stick1, td.stick1 { position: sticky; left: 0;
    width: 112px; min-width: 112px; max-width: 112px; }
  th.stick2, td.stick2 { position: sticky; left: 112px;
    width: 132px; min-width: 132px; max-width: 132px; }
  td.stick1, td.stick2 { background: var(--surface); z-index: 5; }
  th.stick1, th.stick2 { z-index: 12; }
  /* scrolled content passing under the pinned pair gets a shadow cue instead
     of a hairline; only visible once the table is actually scrolled */
  td.stick2::after, th.stick2::after { content: ""; position: absolute; top: 0; bottom: 0; right: -12px;
    width: 12px; pointer-events: none; opacity: 0; transition: opacity 160ms ease;
    background: linear-gradient(90deg, rgba(20, 22, 31, 0.14), transparent); }
  .tablewrap.hscrolled td.stick2::after, .tablewrap.hscrolled th.stick2::after { opacity: 1; }
  tbody tr:hover td.stick1, tbody tr:hover td.stick2 { background: #d8e2fa; }
  :root[data-theme="dark"] tbody tr:hover td.stick1,
  :root[data-theme="dark"] tbody tr:hover td.stick2 { background: #24345c; }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) tbody tr:hover td.stick1,
    :root:where(:not([data-theme="light"])) tbody tr:hover td.stick2 { background: #24345c; }
    :root:where(:not([data-theme="light"])) td.stick2::after,
    :root:where(:not([data-theme="light"])) th.stick2::after {
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent); } }
  :root[data-theme="dark"] td.stick2::after, :root[data-theme="dark"] th.stick2::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent); }
  td.stick1.pd-edge { box-shadow: inset 3px 0 0 var(--accent); }
  /* Operations view caps verbose text columns so the table needs less
     horizontal travel; full text stays available as a hover title */
  td.ell { overflow: hidden; text-overflow: ellipsis; }
  /* keep the horizontal scrollbar visible and easy to grab */
  .tablewrap::-webkit-scrollbar { height: 11px; }
  .tablewrap::-webkit-scrollbar-track { background: var(--chip-tint); }
  .tablewrap::-webkit-scrollbar-thumb { background: var(--baseline); border-radius: 6px; }
  .tablewrap::-webkit-scrollbar-thumb:hover { background: var(--muted); }
  td.num { font: 500 12.5px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
  td.dim { color: var(--ink-2); }
  .pastdue { color: var(--critical); font-weight: 600; }
  .pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px;
           color: var(--ink-2); font-size: 12.5px; }

  .chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
          font-size: 12px; font-weight: 600; background: var(--chip-tint); color: var(--ink); }
  .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); }
  .chip.DELIVERED { background: var(--good-tint); }   .chip.DELIVERED .dot { background: var(--good); }
  .chip.NEEDS_POD { background: var(--warning-tint); } .chip.NEEDS_POD .dot { background: var(--warning); }
  .chip.CANCELLED { background: var(--critical-tint); } .chip.CANCELLED .dot { background: var(--critical); }
  .chip.CLOSED { color: var(--ink-2); }
  .empty { padding: 40px; text-align: center; color: var(--muted); }

  /* ============ DRAWER ============ */
  #scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 45; display: none; }
  #drawer { position: fixed; top: 0; right: -560px; width: 540px; max-width: 94vw; height: 100vh;
            background: var(--surface); border-left: 1px solid var(--border); z-index: 50;
            transition: right .22s ease; overflow-y: auto; box-shadow: -8px 0 30px rgba(0,0,0,0.18); }
  #drawer.open { right: 0; } #scrim.open { display: block; }
  .dw-head { position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--grid);
             padding: 16px 20px; display: flex; align-items: center; gap: 12px; z-index: 5; }
  .dw-head::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
    background: var(--accent); }
  .dw-head h3 { margin: 0; font-size: 17px; } .dw-head .m { color: var(--muted); font-size: 12px; }
  .dw-close { margin-left: auto; }
  .dw-sec { padding: 14px 20px 4px; }
  .dw-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
                padding: 12px 20px; border-bottom: 1px solid var(--grid); background: var(--chip-tint); }
  .dw-actions .note { font-size: 11.5px; color: var(--muted); flex-basis: 100%; }
  .dw-nav { display: inline-flex; gap: 2px; margin-left: auto; }
  .dw-nav .ghost { padding: 6px 9px; line-height: 1; }
  .dw-head .dw-close { margin-left: 0; }
  .agebadge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
  .agebadge.ok { background: var(--chip-tint); color: var(--ink-2); }
  .agebadge.bad { background: var(--critical-tint); color: var(--critical); }
  /* build sheet: normalized cfg/spec attributes */
  .build { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .build .b { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
  .build .b .k { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
  .build .b .v { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
  .optchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .optchips .chip { font-weight: 500; }
  .rawspec { margin-top: 8px; font: 11px var(--font-mono); color: var(--muted); line-height: 1.6;
             overflow-wrap: anywhere; }
  /* change history timeline */
  .timeline { list-style: none; margin: 0; padding: 0; }
  .timeline li { position: relative; padding: 0 0 12px 20px; font-size: 12.5px; }
  .timeline li::before { content: ""; position: absolute; left: 5px; top: 5px; width: 7px; height: 7px;
                         border-radius: 50%; background: var(--ur-blue); }
  .timeline li.status::before { background: var(--accent); }
  .timeline li::after { content: ""; position: absolute; left: 8px; top: 15px; bottom: -2px;
                        width: 1px; background: var(--grid); }
  .timeline li:last-child::after { display: none; }
  .timeline .when { color: var(--muted); font-size: 11px; }
  .timeline .what b { font-weight: 600; }
  .timeline .src { color: var(--muted); font-size: 11px; }
  .findlink { border: 0; background: none; color: var(--ur-blue); font: inherit; font-size: 11.5px;
              cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
  .dw-sec h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
               color: var(--muted); font-weight: 600; }
  .kv { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; font-size: 13px; }
  .kv .k { color: var(--ink-2); } .kv .v { font-weight: 500; overflow-wrap: anywhere; white-space: normal; }
  .dw-dates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .dw-date { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
  .dw-date .k { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
  .dw-date .v { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }
  .storecard { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border);
               border-radius: 10px; padding: 10px 12px; background: var(--series-1t); }
  .storecard .code { font-size: 11px; color: var(--ink-2); }

  /* ============ DIRECTORY PAGE ============ */
  .inbook-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
                   color: var(--ink-2); cursor: pointer; white-space: nowrap; }
  #dir-tbl tbody tr.inbook td:first-child { box-shadow: inset 3px 0 0 var(--ur-blue); }
  .upcard .facts { margin: 0 0 10px; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); }
  .upcard .facts li { display: flex; gap: 8px; padding: 3px 0; }
  .upcard .facts li b { color: var(--ink); font-weight: 600; min-width: 86px; }
  .upcard .blurb { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin: 0 0 10px; }
  .upcard .srcs { font-size: 11px; color: var(--muted); margin-top: 8px; }
  .upcard .srcs a { color: var(--ur-blue); text-decoration: none; }
  .upcard .srcs a:hover { text-decoration: underline; }
  .upcard .headmeta { font-size: 12px; opacity: .85; }

  /* ============ STORES PAGE ============ */
  .stores { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
  .store { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
           box-shadow: var(--shadow); overflow: hidden; }
  .store .head { padding: 14px 18px; background: var(--navy); color: #fff;
                 border-bottom: 3px solid var(--accent); }
  .store .head b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
  .store .head b { font-size: 15px; display: block; }
  .store .head span { font-size: 12px; opacity: .85; }
  .store .body { padding: 14px 18px; }
  .store .nums { display: flex; gap: 18px; margin-bottom: 10px; }
  .store .nums .n b { display: block; font-size: 22px; font-weight: 680; }
  .store .nums .n span { font-size: 11.5px; color: var(--muted); }
  .store .share { height: 8px; border-radius: 4px; background: var(--chip-tint); overflow: hidden; margin: 6px 0 12px; }
  .store .share i { display: block; height: 100%; background: var(--series-1); border-radius: 4px; }
  .store ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); }
  .store li { display: flex; justify-content: space-between; padding: 3px 0; }
  .store li b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

  /* ============ INTEGRATION PAGE ============ */
  .phases { list-style: none; margin: 0; padding: 0; }
  .phases li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--grid); font-size: 13px; }
  .phases li:last-child { border-bottom: 0; }
  .ph-badge { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
              font-size: 12px; font-weight: 700; color: #fff; background: var(--muted); }
  .ph-badge.done { background: var(--good); } .ph-badge.now { background: var(--pritchard); }
  .phases b { display: block; } .phases span { color: var(--ink-2); font-size: 12.5px; }
  footer { text-align: center; color: var(--muted); font-size: 12px; padding: 26px 0 8px; }
  footer .shaedmark { height: 17px; margin: 0 1px -4px 3px; }
  /* The SHAED wordmark is black+teal on transparent. On dark surfaces,
     invert+hue-rotate flips black→white while landing the teal back near
     itself — the only recolor that needs no second asset. */
  .shaedmark { display: inline-block; vertical-align: baseline; }
  :root[data-theme="dark"] .shaedmark { filter: invert(1) hue-rotate(180deg); }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .shaedmark { filter: invert(1) hue-rotate(180deg); } }
  .li-powered { display: flex; align-items: center; justify-content: center; gap: 6px;
                margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grid);
                color: var(--muted); font-size: 11px; }
  .li-powered .shaedmark { height: 15px; }

  /* ============ DEVELOPER API PAGE ============ */
  .api-layout { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: start; }
  @media (max-width: 900px) { .api-layout { grid-template-columns: 1fr; } .api-nav { display: none; } }
  /* the guide rail stays visible while the reference scrolls: sticky lives on
     the grid child itself (align-self: start keeps the track from stretching it) */
  .api-nav { position: sticky; top: 124px; align-self: start; }
  .api-nav-inner { background: var(--surface); border: 1px solid var(--border);
                   border-radius: 8px; padding: 10px; box-shadow: var(--shadow);
                   max-height: calc(100vh - 148px); overflow-y: auto; }
  .api-nav-inner .g { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
                      color: var(--muted); font-weight: 700; padding: 10px 10px 4px; }
  .api-nav-inner a { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 7px;
                     color: var(--ink-2); text-decoration: none; font-size: 12.5px; }
  .api-nav-inner a:hover { background: var(--chip-tint); color: var(--ink); }
  .api-nav-inner a.on { background: var(--series-1t); color: var(--ink); font-weight: 600;
                        box-shadow: inset 2px 0 0 var(--ur-blue); }
  .api-content > section { scroll-margin-top: 140px; margin-bottom: 18px; }
  .quicksteps { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: qs; }
  .quicksteps li { position: relative; padding: 0 0 14px 34px; counter-increment: qs; }
  .quicksteps li::before { content: counter(qs); position: absolute; left: 0; top: 0;
    width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff;
    font: 700 12px/22px var(--font-body); text-align: center; }
  :root[data-theme="dark"] .quicksteps li::before { background: var(--ur-blue); }
  .quicksteps b { display: block; margin-bottom: 2px; }
  .quicksteps p { margin: 2px 0 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
  .chlog { border-left: 2px solid var(--grid); margin: 8px 0 0 6px; padding-left: 18px; }
  .chlog .rel { margin-bottom: 14px; }
  .chlog .rel .vtag { display: inline-block; font: 700 12px var(--font-mono); color: var(--ur-blue);
                      background: var(--series-1t); border-radius: 6px; padding: 2px 8px; }
  .chlog .rel .d { color: var(--muted); font-size: 11.5px; margin-left: 8px; }
  .chlog .rel ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); }
  .chlog .rel li { margin: 3px 0; }

  .mbadge { display: inline-block; min-width: 46px; text-align: center; padding: 2px 8px; border-radius: 6px;
            font-size: 11px; font-weight: 750; letter-spacing: .03em; color: #fff; }
  .mbadge.GET { background: var(--ur-blue); } .mbadge.POST { background: var(--good); }
  .mbadge.PATCH { background: #b97900; } .mbadge.DELETE { background: var(--critical); }
  .mbadge.sm { min-width: 0; font-size: 10px; padding: 1px 6px; }
  .epath { font: 600 13.5px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
  .escope { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
  .live-tag, .sim-tag { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
  .live-tag { background: var(--good-tint); color: var(--good); }
  .sim-tag { background: var(--warning-tint); color: #8a6100; }
  :root[data-theme="dark"] .sim-tag { color: var(--warning); }
  @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .sim-tag { color: var(--warning); } }

  .ptable { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 8px 0 4px; }
  .ptable th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
               color: var(--muted); padding: 5px 10px 5px 0; border-bottom: 1px solid var(--grid); }
  .ptable td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--grid); vertical-align: top; }
  .ptable code, .inlinecode { font: 12px ui-monospace, Consolas, monospace; background: var(--chip-tint);
                              border-radius: 5px; padding: 1px 5px; }
  .req { color: var(--critical); font-size: 10.5px; font-weight: 700; }
  .opt { color: var(--muted); font-size: 10.5px; }

  pre.code { background: #10141c; color: #e6e9f0; border-radius: 8px; padding: 12px 14px; overflow-x: auto;
             font: 12px/1.55 ui-monospace, "Cascadia Code", Consolas, monospace; border: 1px solid var(--border); }
  .tok-k { color: #7fb5ff; } .tok-s { color: #a8d08d; } .tok-n { color: #f0b96e; }
  .tok-b { color: #d98ee0; } .tok-x { color: #9aa3b2; }

  .try { border: 1px solid var(--border); border-radius: 8px; margin-top: 12px; overflow: hidden; }
  .try-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--chip-tint);
              font-size: 12.5px; font-weight: 650; }
  .try-body { padding: 12px 14px; }
  .try-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 10px; }
  .try-grid label { display: block; font-size: 11px; color: var(--ink-2); margin-bottom: 3px; }
  .try-grid input, .try-grid select, .try textarea {
    width: 100%; font: 12.5px ui-monospace, Consolas, monospace; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; }
  .try textarea { min-height: 130px; resize: vertical; margin-bottom: 10px; }
  .try .status { font: 650 12.5px ui-monospace, Consolas, monospace; margin: 10px 0 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .st-ok { color: var(--good); } .st-err { color: var(--critical); }
  .respwrap pre.code { max-height: 340px; overflow: auto; }
  details.curl { margin-top: 8px; } details.curl summary { cursor: pointer; font-size: 12px; color: var(--ink-2); }

  /* ============ AUTH ============ */
  .login-scrim { position: fixed; inset: 0; z-index: 100; display: none; align-items: center;
                 justify-content: center; background: rgba(9,14,24,0.55); backdrop-filter: blur(3px); }
  .login-scrim.show { display: flex; }
  .login-card { width: 380px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border);
                border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
  .login-brand { padding: 18px 22px 14px; position: relative; background: #ffffff;
                 display: flex; align-items: center; gap: 14px; }
  .login-brand::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
                        background: var(--accent); }
  .login-body { padding: 18px 22px 20px; }
  .login-body h3 { margin: 0 0 4px; font-size: 16px; }
  .login-body .sub { color: var(--ink-2); font-size: 12.5px; margin-bottom: 14px; }
  .login-body label { display: block; font-size: 11.5px; color: var(--ink-2); margin: 10px 0 4px; }
  .login-body input { width: 100%; font: 13.5px inherit; color: var(--ink); background: var(--surface);
                      border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; }
  .login-body .btn { width: 100%; margin-top: 14px; padding: 9px; font-size: 13.5px; }
  #li-err { color: var(--critical); font-size: 12.5px; min-height: 16px; margin-top: 8px; }
  #li-snap { display: block; text-align: center; margin-top: 12px; font-size: 12.5px; color: var(--ur-blue); }
  .li-note { margin-top: 12px; padding: 9px 11px; border-radius: 8px; background: var(--chip-tint);
             color: var(--ink-2); font-size: 11.5px; line-height: 1.45; }
  .userchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2);
              border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; }
  .userchip .dot { background: var(--good); }

  /* ============ CONSOLE HISTORY ============ */
  .hist-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--grid);
              font: 12px ui-monospace, Consolas, monospace; cursor: pointer; flex-wrap: wrap; }
  .hist-row:hover { background: var(--chip-tint); }
  .hist-row .t { color: var(--muted); margin-left: auto; font-size: 11px; }

  /* ============ HEALTH ============ */
  .hcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
  .hcard { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
           padding: 14px 16px; box-shadow: var(--shadow); }
  .hcard .top { display: flex; align-items: center; gap: 8px; }
  .hcard .nm { font-weight: 650; font-size: 13.5px; }
  .hstat { margin-left: auto; font-size: 11px; font-weight: 750; border-radius: 999px; padding: 2px 9px; }
  .hstat.up { background: var(--good-tint); color: var(--good); }
  .hstat.down { background: var(--critical-tint); color: var(--critical); }
  .hcard .lat { font-size: 24px; font-weight: 680; margin-top: 6px; font-variant-numeric: tabular-nums; }
  .hcard .lat span { font-size: 12px; color: var(--muted); font-weight: 450; }
  .spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin-top: 10px; }
  .spark i { flex: 1; min-width: 2px; background: var(--series-1t); border-radius: 2px 2px 0 0; }
  .spark i.bad { background: var(--critical); }
  .htable td, .htable th { font-size: 12.5px; }

  /* ============ MODAL ============ */
  #mscrim { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 70; display: none;
            align-items: center; justify-content: center; }
  #mscrim.show { display: flex; animation: scrimIn 140ms ease; }
  #mscrim.show .modal { animation: modalIn 160ms cubic-bezier(.2,.9,.3,1.2); }
  @keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.97); }
                       to { opacity: 1; transform: none; } }
  .modal { width: 560px; max-width: 94vw; max-height: 86vh; overflow-y: auto; background: var(--surface);
           border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
  /* drag-and-drop upload zone */
  .dropzone { border: 2px dashed var(--border); border-radius: 10px; padding: 30px 20px; text-align: center;
              cursor: pointer; transition: border-color 140ms ease, background 140ms ease; }
  .dropzone:hover, .dropzone.over { border-color: var(--ur-blue); background: var(--series-1t); }
  .dropzone .ic { font-size: 26px; margin-bottom: 6px; }
  .dropzone b { display: block; margin-bottom: 3px; }
  .dropzone span { font-size: 12px; color: var(--muted); }
  .dz-file { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border);
             border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 13px; }
  .dz-file .nm { flex: 1; overflow-wrap: anywhere; font-weight: 500; }
  .dz-file .sz { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
  .dz-bar { height: 4px; border-radius: 2px; background: var(--chip-tint); overflow: hidden; margin-top: 10px; }
  .dz-bar i { display: block; height: 100%; width: 0; background: var(--ur-blue); border-radius: 2px;
              transition: width 260ms ease; }
  .dz-bar.done i { background: var(--good); }
  /* MSO row in the drawer */
  .mso-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--border);
             border-radius: 8px; padding: 8px 10px; margin-top: 6px; font-size: 12.5px; }
  .mso-row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-2); }
  .modal .mh { padding: 14px 20px; border-bottom: 1px solid var(--grid); font-weight: 680; display: flex;
               align-items: center; gap: 10px; position: relative; }
  .modal .mh::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px;
                      background: var(--accent); }
  .modal .mb { padding: 16px 20px; }
  .modal .mf { padding: 12px 20px 16px; display: flex; gap: 10px; justify-content: flex-end; }
  .ptiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin: 8px 0 12px; }
  .ptile { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; text-align: center; }
  .ptile b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
  .ptile span { font-size: 11px; color: var(--muted); }
  .ptile.warn b { color: var(--warning); } .ptile.crit b { color: var(--critical); } .ptile.good b { color: var(--good); }
  .mlist { max-height: 180px; overflow-y: auto; font: 11.5px ui-monospace, Consolas, monospace;
           border: 1px solid var(--grid); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
  .docrow { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px;
            padding: 8px 10px; margin-top: 6px; font-size: 12.5px; }

  /* ============ INVOICE DOCUMENT (mirrors "Invoice Example.pdf":
     Pritchard Purchase Agreement/Invoice — blue label boxes, VIN/Stock
     panel, add-ons table, signatures, Iowa disclosures) ============ */
  body.invoice-mode .masthead, body.invoice-mode main, body.invoice-mode #login { display: none !important; }
  body.podoc-mode .masthead, body.podoc-mode main, body.podoc-mode #login { display: none !important; }
  #invoice-doc, #po-doc { display: none; }
  body.invoice-mode #invoice-doc { display: block; max-width: 860px; margin: 26px auto 60px; padding: 0 16px; }
  body.podoc-mode #po-doc { display: block; max-width: 860px; margin: 26px auto 60px; padding: 0 16px; }
  .inv-actions { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 12px; }
  .inv-sheet { background: #ffffff; color: #111; border: 1px solid rgba(0,0,0,.15); border-radius: 8px;
               padding: 34px 40px; box-shadow: var(--shadow); font-size: 13px; }
  .inv-head { display: flex; align-items: flex-start; gap: 16px; }
  .inv-head img { height: 86px; }
  .inv-head .co { margin-left: auto; text-align: right; font-size: 15px; line-height: 1.45; }
  .inv-head .co b { font-size: 17px; }
  .inv-h1 { text-align: center; font: 400 26px/1.2 var(--font-body); color: #111; margin: 4px 0 18px; }
  .inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; align-items: start; }
  .ibox { border: 1px solid #333; }
  .ibox .lbl { background: #1B5FAA; color: #fff; font-weight: 700; font-size: 12px; padding: 3px 8px; }
  .ibox .val { padding: 4px 8px; min-height: 20px; font-variant-numeric: tabular-nums; }
  .ibox .val.big { font-size: 16px; letter-spacing: .04em; text-align: center; padding: 8px; }
  .ibox2 { display: grid; grid-template-columns: 110px 1fr; border: 1px solid #333; }
  .ibox2 .lbl { background: #1B5FAA; color: #fff; font-weight: 700; font-size: 12px; padding: 3px 8px;
                border-bottom: 1px solid #333; }
  .ibox2 .val { padding: 3px 8px; border-bottom: 1px solid #333; font-variant-numeric: tabular-nums; }
  .ibox2 .lbl:nth-last-child(2), .ibox2 .val:last-child { border-bottom: 0; }
  table.ymmc { width: 100%; border-collapse: collapse; border: 1px solid #333; }
  table.ymmc th { background: #1B5FAA; color: #fff; text-align: left; font-size: 12px; padding: 3px 8px;
                  border-right: 1px solid #2a71bd; }
  table.ymmc td { padding: 4px 8px; border-right: 1px solid #333; font-size: 12.5px; }
  table.inv-lines { width: 100%; border-collapse: collapse; margin: 16px 0 4px; border: 1px solid #333; }
  table.inv-lines th { text-align: left; font-size: 12px; color: #fff; background: #1B5FAA; padding: 4px 8px; }
  table.inv-lines th:last-child, table.inv-lines td:last-child { text-align: right; width: 130px; }
  table.inv-lines td { padding: 8px; border-bottom: 1px solid rgba(0,0,0,.35); font-variant-numeric: tabular-nums;
                       vertical-align: top; }
  .addons-h { font-weight: 700; margin: 14px 0 4px; font-size: 13px; }
  .inv-totals { margin-left: auto; width: 340px; margin-top: 14px; font-variant-numeric: tabular-nums;
                border: 1px solid #333; }
  .inv-totals div { display: flex; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid #333; }
  .inv-totals div:last-child { border-bottom: 0; }
  .inv-totals .lab { font-weight: 700; }
  .inv-totals .tt { background: #1B5FAA; color: #fff; font-weight: 750; }
  .inv-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin: 46px 10px 18px; }
  .inv-sigs .sig { border-top: 1.5px solid #111; padding-top: 4px; font-size: 12px; color: #333; }
  .inv-legal { font-size: 9.5px; color: #333; line-height: 1.5; margin-top: 10px; }
  .inv-legal p { margin: 0 0 7px; }
  .inv-legal b { font-weight: 700; }
  .inv-note { font-size: 11px; color: #555; margin-top: 12px; }

  /* ============ PO REPRINT DOCUMENT (mirrors Attachment_URI.pdf) ============ */
  .po-sheet { background: #fff; color: #111; border: 1px solid rgba(0,0,0,.15); border-radius: 8px;
              padding: 30px 34px; box-shadow: var(--shadow);
              font: 12px/1.45 "IBM Plex Mono", Consolas, monospace; }
  .po-sheet .reprint { background: #FFF4DC; border: 1.5px dashed #B87700; color: #7a5200;
                       font: 600 11.5px/1.4 var(--font-body); padding: 8px 12px; border-radius: 6px; margin-bottom: 14px; }
  .po-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
  .po-top img { height: 26px; }
  .po-top .t { margin-left: auto; font: 700 20px var(--font-body); letter-spacing: .02em; }
  .po-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  .po-box { border: 1.5px solid #111; padding: 8px 10px; position: relative; min-height: 86px; }
  .po-box .side { position: absolute; left: -1px; top: -1px; bottom: -1px; width: 16px; background: #eee;
                  border-right: 1px solid #111; writing-mode: vertical-rl; transform: rotate(180deg);
                  font: 700 9px var(--font-body); letter-spacing: .12em; text-align: center; }
  .po-box .inner { margin-left: 22px; white-space: pre-line; }
  .po-num { border: 1.5px solid #111; padding: 8px 10px; text-align: center; }
  .po-num .k { font: 700 11px var(--font-body); }
  .po-num .v { font: 700 24px/1.2 var(--font-mono); letter-spacing: .06em; }
  .po-meta { font-size: 11.5px; margin-top: 6px; white-space: pre-line; text-align: left; }
  .po-follow { border: 1.5px solid #111; padding: 6px 10px; font-size: 10.5px; text-align: center; margin-top: 10px; }
  table.po-terms { width: 100%; border-collapse: collapse; margin-top: 12px; }
  table.po-terms th { border: 1px solid #111; font: 700 9.5px var(--font-body); letter-spacing: .04em;
                      padding: 2px 6px; text-align: center; background: #f4f4f4; }
  table.po-terms td { border: 1px solid #111; padding: 3px 8px; font-size: 11.5px; }
  .po-lines { border: 1.5px solid #111; border-top: 0; padding: 10px 12px 16px; min-height: 320px; }
  .po-lines .hdr { display: grid; grid-template-columns: 46px 40px 1fr 46px 90px 90px; gap: 8px;
                   font-weight: 700; padding: 6px 0; border-bottom: 1px solid #999; margin-bottom: 8px; }
  .po-lines .ln { display: grid; grid-template-columns: 46px 40px 1fr 46px 90px 90px; gap: 8px; }
  .po-lines .ln .r { text-align: right; }
  .po-lines .desc { grid-column: 3 / 7; white-space: pre-line; margin: 2px 0 8px; }
  .po-lines .dates { margin-top: 10px; }
  .po-total { display: flex; justify-content: space-between; border: 1.5px solid #111; border-top: 0;
              padding: 8px 12px; font-weight: 700; }
  .po-legal { border: 1.5px solid #111; border-top: 0; padding: 8px 12px; font-size: 9.5px; line-height: 1.5; }
  .po-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; border: 1.5px solid #111; border-top: 0;
             padding: 26px 30px 12px; }
  .po-sigs .sig { border-top: 1.2px solid #111; text-align: center; font: 700 10px var(--font-body); padding-top: 4px; }
  .po-footline { display: flex; justify-content: space-between; font-size: 10.5px; color: #444; padding: 8px 4px 0; }
  @media print {
    body { background: #fff; }
    .inv-actions { display: none; }
    #invoice-doc, #po-doc { margin: 0; max-width: none; }
    .inv-sheet, .po-sheet { border: 0; box-shadow: none; border-radius: 0; padding: 10px 0; }
  }