/* EIP liquor-store frontend styles.
   Extracted from index.html <style> block (strangler-fig refactor
   phase 1). Loaded via <link rel="stylesheet" href="css/app.css">.
   Any future split (components / themes / dark mode) happens here
   without touching the HTML shell. */

:root {
    /* Claude AI inspired palette — warm cream + orange accent */
    /* Palette: page canvas stays the original warm off-white; all panels
       (topbar, chat, inputbar, dropdowns) use cream (no pure white); PO
       panels lifted on --paper with warm shadow. */
    --bg: #f5f0e4;
    --panel: #faf3e1;
    --panel2: #ebe2ca;
    --paper: #fdf7e8;
    --paper-shadow: 0 1px 2px rgba(120,80,50,0.06), 0 3px 10px rgba(120,80,50,0.05);
    --text: #2b2a26;
    --muted: #6f6d64;
    --accent: #cc785c;         /* Claude's warm orange */
    --accent-hover: #b56748;
    --accent2: #659466;        /* subdued success green */
    --danger: #c84a4a;
    --border: #dbd0b4;
    --border-strong: #c5bc9e;
    --radius: 10px;
    --pad: 14px;
    --font-serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
    --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", Consolas, "Courier New", monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); height: 100%; }
  body { font: 15px/1.55 var(--font-ui); }
  #app {
    display: flex; flex-direction: column; height: 100vh; height: 100dvh;
    max-width: 960px; margin: 0 auto;
    background: var(--bg);
  }

  .topbar {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px;
    padding: var(--pad); background: var(--panel); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 3;
  }
  .topbar select {
    width: 100%; padding: 10px 12px; border-radius: var(--radius);
    background: var(--panel); color: var(--text); border: 1px solid var(--border-strong);
    font: 15px/1.4 var(--font-ui);
    transition: border-color 0.15s;
  }
  .topbar select:hover { border-color: var(--accent); }
  .topbar select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(204,120,92,0.15); }
  .topbar select.lang-select { width: auto; min-width: 96px; font-size: 13px; padding: 10px 10px; }

  .po {
    flex: 0 0 auto;
    height: calc(78vh + 10px);
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 0 14px 6px;
    overflow: auto;
    resize: vertical;
    min-height: 120px;
    max-height: 90vh;
    margin-bottom: 3px;
    font-family: var(--font-serif);
    font-size: 13px;
    line-height: 1.35;
    color: var(--text);
    white-space: normal;
    word-break: break-word;
  }
  #po > * { margin-top: 0; margin-bottom: 0; }
  #po > * + * { margin-top: 2px; }
  .po h3 {
    margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--muted);
    font-family: var(--font-ui); font-weight: 600;
  }
  /* PO toolbar — rigid 3-column grid: [title] [meta flexible] [actions]
     Grid guarantees exactly ONE row regardless of content width.
     Only the middle (meta) cell can overflow; title and actions never reflow. */
  /* Live streaming generation area. Sits between toolbar and poBody --
     vendor cards beneath stay visible and interactive (collapsible,
     copy/edit/retire buttons all work) while new gen streams above.
     Before this existed, setPO blew away poBody on every token, hiding
     other vendors and disabling all actions until gen finished. */
  .streaming-area {
    background: var(--paper);
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
    padding: 8px 12px;
    margin: 4px 0 8px;
    box-shadow: var(--paper-shadow);
    font-size: 13px; line-height: 1.4;
    max-height: 50vh;
    overflow-y: auto;
    color: var(--text);
    font-family: var(--font-serif);
  }
  .streaming-area .streaming-label {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 6px;
    font-family: var(--font-ui); font-weight: 600;
  }
  .streaming-area .streaming-label .pulse {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); margin-right: 6px;
    animation: streamPulse 1.2s ease-in-out infinite;
  }
  @keyframes streamPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1.1); }
  }
  .streaming-area pre { white-space: pre-wrap; margin: 0; font: inherit; }

  .po-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-ui);
    min-height: 32px;           /* grow on mobile when actions wrap */
    background: var(--panel);
    /* Pin to the top of the #po scroll area ABOVE the per-vendor sticky
       heads. Without this, vendor-panel-head (top:0 z-index:5) renders
       on top of the toolbar buttons on narrow viewports -- observed on
       iPhone as "Empire Merchants" text overlapping Refresh/Cancel/Email.
       z-index 20 > summary z-index 5 so toolbar wins. */
    position: sticky; top: 0; z-index: 20;
  }
  .po-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px;
    color: var(--muted); font-weight: 600;
    line-height: 1; white-space: nowrap;
  }
  .po-meta {
    display: flex; gap: 10px; align-items: center;
    padding-left: 10px;
    font-size: 11px; color: var(--muted); line-height: 1;
    min-width: 0;               /* allow grid cell to shrink rather than push */
    overflow: hidden;           /* clip overflowing text, don't reflow siblings */
    white-space: nowrap;
  }
  .po-meta > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .po-meta #timer { color: #8a8a80; }
  /* Holiday proximity reminder, sits inline next to po-title. */
  .holiday-banner {
    display: inline-block;
    margin-left: 14px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(232,133,94,0.14);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
    cursor: default;
  }
  .holiday-banner.urgent { background: rgba(214,106,91,0.18); color: var(--danger); }
  .holiday-banner.today { background: rgba(214,106,91,0.30); color: #fff; }

  /* Animated analog clock — pure CSS, no SVG.
     Size 20px to fit within 26px po-toolbar without clipping. */
  .clock-spin {
    display: inline-block; position: relative;
    width: 20px; height: 20px;
    margin-left: 6px; vertical-align: middle;
    border: 1.5px solid currentColor; border-radius: 50%;
    box-sizing: border-box;
  }
  .clock-spin::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 2.5px; height: 2.5px; border-radius: 50%;
    background: currentColor; transform: translate(-50%, -50%);
    z-index: 2;
  }
  .clock-spin .hand {
    position: absolute; left: 50%; top: 50%;
    transform-origin: 50% 100%;
    background: currentColor;
  }
  .clock-spin .hand-min  { width: 1.4px; height: 6px; margin-left: -0.7px; margin-top: -6px; animation: clock-spin 3600s linear infinite; }
  .clock-spin .hand-sec  { width: 0.8px; height: 8px; margin-left: -0.4px; margin-top: -8px; background: #c0392b; animation: clock-spin 60s steps(60, end) infinite; }
  /* When paused, stop both hands (set via .paused class on the container) */
  .clock-spin.paused .hand-min,
  .clock-spin.paused .hand-sec {
    animation-play-state: paused;
  }
  @keyframes clock-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .cache-check {
    display: inline-block; margin-left: 6px; color: #2e7d32; font-weight: 700;
    animation: cache-pop 0.4s ease-out;
  }
  @keyframes cache-pop {
    0% { transform: scale(0.2); opacity: 0; }
    60% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  .po-actions {
    display: flex; gap: 6px; align-items: center;
    white-space: nowrap;
  }
  /* Unified tiny buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 9px;
    height: 22px;
    font: 500 11px/1 var(--font-ui);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, opacity 0.12s;
    white-space: nowrap;
  }
  .btn .btn-icon { font-size: 11px; line-height: 1; }
  .btn:disabled { opacity: 0.35; cursor: not-allowed; }
  /* UI lock body classes:
     gen-lock   : a WS generation is streaming. Originally we dimmed
                  vendor edit/retire/close + row checkboxes here to
                  prevent races with the in-flight write. After moving
                  the stream to a sibling #streamingArea (so vendor
                  cards in poBody stay mounted), the user expects the
                  EXISTING vendors to be fully interactive while a
                  different vendor regenerates. The race window is
                  narrow and the operator value of being able to
                  collapse / copy / edit other vendors mid-stream is
                  much higher than the safety. Buttons stay live.
     edit-lock  : user has unsaved edits; main-toolbar .disabled is
                  flipped by _applyUILocks (no body-class rules here).
     offline-lock: red dot + toolbar .disabled cover the offline UX;
                  panel interactions stay enabled since local edit /
                  retire work without the server. */
  .btn-ghost {
    background: transparent; color: var(--muted);
    border: 1px solid var(--border-strong);
  }
  .btn-ghost:hover:not(:disabled) { background: var(--panel2); color: var(--text); }
  .btn-secondary {
    background: transparent; color: var(--accent);
    border: 1px solid var(--accent);
  }
  .btn-secondary:hover:not(:disabled) { background: rgba(204,120,92,0.08); }
  .btn-cancel {
    background: transparent; color: var(--danger, #c62828);
    border: 1px solid var(--danger, #c62828); font-weight: 600;
  }
  .btn-cancel:hover { background: rgba(198,40,40,0.08); }
  .btn-primary {
    background: var(--accent2); color: #fff;
    border: 1px solid var(--accent2);
    font-weight: 600;
  }
  .btn-primary:hover:not(:disabled) { background: #4f7f51; border-color: #4f7f51; }
  .po .placeholder { color: var(--muted); font-style: italic; }
  .po tr.retiree td { background: #fff7c2 !important; }
  /* Rows where proposed cases * qty_per_case (bottles) > qty_on_hand (bottles).
     Warm amber tint signals "real restock" vs. top-up. */
  .po tr.row-restock-high td { background: rgba(235, 168, 78, 0.18) !important; }
  .po .retiree-tag {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    background: #d4a017; color: #fff; font-size: 11px; font-weight: 700;
    border-radius: 3px; vertical-align: middle;
  }
  .po .cat-badge {
    display: inline-block; padding: 1px 6px;
    font-size: 10px; font-weight: 700; border-radius: 3px;
    vertical-align: middle; white-space: nowrap;
    float: right; margin-left: 8px;
  }
  .po .cat-urgent   { background: #c0392b; color: #fff; }
  .po .cat-volatile { background: #e67e22; color: #fff; }
  .po .cat-standard { background: #7f8c8d; color: #fff; }
  .po tr.no-purchase td { background: #ffe4cc !important; }
  .po .no-purchase-tag {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    background: #e67e22; color: #fff; font-size: 11px; font-weight: 700;
    border-radius: 3px; vertical-align: middle;
  }
  .po .streaming::after {
    content: "▋"; color: var(--accent); animation: blink 1s step-end infinite; margin-left: 1px;
  }
  @keyframes blink { 50% { opacity: 0; } }

  .chat-wrap {
    flex: 1 1 auto; min-height: 0;
    position: relative;       /* anchor for the absolute autocomplete */
    display: flex; flex-direction: column;
  }
  .chat {
    flex: 1 1 auto; overflow-y: auto;
    /* Bottom padding = log-panel summary height (~22px) + 3px gap to
       inputbar + 5px gap from chat content to log-panel top. */
    padding: var(--pad) var(--pad) 30px;
    background: var(--bg);
    display: flex; flex-direction: column; gap: 4px;
  }
  .msg {
    max-width: 85%; padding: 4px 10px; border-radius: var(--radius);
    word-wrap: break-word; white-space: pre-wrap;
    font-family: var(--font-ui);
    line-height: 1.25;
  }
  .msg.user {
    align-self: flex-end; background: var(--accent); color: #fff;
    border-bottom-right-radius: 4px;
  }
  .msg.ai {
    align-self: flex-start; background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-bottom-left-radius: 4px;
    font-family: var(--font-serif); font-size: 15px;
  }
  .msg.sys { align-self: center; color: var(--muted); font-size: 12px; background: transparent; padding: 2px 6px; }

  .inputbar {
    display: flex; gap: 8px; padding: var(--pad);
    background: var(--panel); border-top: 1px solid var(--border);
    padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom));
  }
  .inputbar input {
    flex: 1; padding: 12px 14px; border-radius: var(--radius);
    background: var(--panel); color: var(--text); border: 1px solid var(--border-strong);
    font: 15px/1.4 var(--font-ui);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .inputbar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(204,120,92,0.15); }
  .inputbar button {
    padding: 0 18px; border-radius: var(--radius); border: none;
    background: var(--accent); color: #fff; font-weight: 600; font-size: 14px;
    font-family: var(--font-ui); cursor: pointer;
    transition: background 0.15s;
  }
  .inputbar button:hover:not(:disabled) { background: var(--accent-hover); }
  .inputbar button:disabled { opacity: 0.35; cursor: not-allowed; }
  /* Markdown table -- 4-col layout: PRODUCT | CASES | AMOUNT | NOTES.
     All widths in px so summary grid + table align reliably across font
     weights. Notes col absorbs remaining width (width:100% + fixed
     layout + no explicit notes width). */
  #po table { border-collapse: collapse; margin: 0.5em 0; width: 100%;
              table-layout: fixed;
              font-size: 14px; color: var(--text); background: transparent;
              font-family: var(--font-ui); }
  #po th, #po td { border-bottom: 1px solid var(--border);
                   padding: 10px 12px; text-align: left;
                   line-height: 1.5; vertical-align: middle;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 5-col: PRODUCT | STOCK | CASE | AMOUNT | NOTES.
     Widths tuned so typical 45-char product names + "STOCK" header fit
     on one line. Notes col auto -> absorbs remaining panel width. */
  #po table th:first-child, #po table td:first-child {
    width: 260px;
    /* Long product names wrap to multiple lines instead of ellipsis. */
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
  }
  #po table th:nth-child(2), #po table td:nth-child(2) {
    width: 85px; text-align: right; color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  #po table th:nth-child(3), #po table td:nth-child(3) { width: 65px; }
  #po table th:nth-child(4), #po table td:nth-child(4) { width: 95px; }
  #po table th:nth-child(3), #po table td:nth-child(3),
  #po table th:nth-child(4), #po table td:nth-child(4) {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  /* ── New 6-col data-driven PO gen table (po-main-table) ─────────── */
  #po .po-main-wrap { width: 100%; }
  #po table.po-main-table {
    table-layout: fixed;
  }
  /* Override base #po th ellipsis so header labels show in full. */
  #po table.po-main-table th {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
  /* Override #po table nth-child rules for 7-col layout:
     1 Product | 2 Select | 3 Stock | 4 Case | 5 Amount | 6 Notes | 7 Priority */
  #po table.po-main-table th:nth-child(1),
  #po table.po-main-table td:nth-child(1) {
    width: 260px;
    white-space: normal; word-break: break-word;
    overflow: visible; text-overflow: clip;
  }
  #po table.po-main-table th:nth-child(2),
  #po table.po-main-table td:nth-child(2) {
    width: 32px; text-align: center;
    padding: 6px 4px;
  }
  #po table.po-main-table th:nth-child(2) input,
  #po table.po-main-table td:nth-child(2) input {
    cursor: pointer; accent-color: var(--accent);
    vertical-align: middle;
  }
  #po table.po-main-table th:nth-child(3),
  #po table.po-main-table td:nth-child(3) {
    width: 70px; text-align: right;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  #po table.po-main-table th:nth-child(4),
  #po table.po-main-table td:nth-child(4) {
    width: 60px; text-align: right;
    font-variant-numeric: tabular-nums;
  }
  #po table.po-main-table th:nth-child(5),
  #po table.po-main-table td:nth-child(5) {
    width: 95px; text-align: right;
    font-variant-numeric: tabular-nums;
  }
  #po table.po-main-table th:nth-child(6),
  #po table.po-main-table td:nth-child(6) {
    /* notes: auto fill remaining, wrap */
    white-space: normal; word-break: break-word;
  }
  #po table.po-main-table th:nth-child(7),
  #po table.po-main-table td:nth-child(7) {
    width: 70px; text-align: center;
  }
  /* Row-selected highlight -- subtle tint so checked rows are visible
     without competing with restock/retiree row tints. */
  #po table.po-main-table tr.row-selected td {
    background: rgba(204,120,92,0.08);
  }
  /* Sortable headers: pointer + hover tint; arrow indicator via ::after. */
  #po table.po-main-table th.sortable {
    cursor: pointer; user-select: none; position: relative;
    padding-right: 20px;
  }
  #po table.po-main-table th.sortable:hover {
    background: rgba(204,120,92,0.10);
  }
  #po table.po-main-table th.sortable::after {
    content: '';
    position: absolute; right: 6px; top: 50%;
    width: 0; height: 0;
    border: 4px solid transparent;
    opacity: 0.25;
    transform: translateY(-50%);
  }
  #po table.po-main-table th.sortable.sort-asc::after {
    border-bottom-color: currentColor;
    border-top-width: 0;
    opacity: 1;
    transform: translateY(-65%);
  }
  #po table.po-main-table th.sortable.sort-desc::after {
    border-top-color: currentColor;
    border-bottom-width: 0;
    opacity: 1;
    transform: translateY(-35%);
  }
  /* Priority column badges: colored pill per category. */
  #po .prio-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px; font-weight: 700;
    border-radius: 10px; letter-spacing: 0.02em;
    line-height: 1.4;
  }
  #po .prio-badge.prio-u { background: #c0392b; color: #fff; }
  #po .prio-badge.prio-h { background: #e67e22; color: #fff; }
  #po .prio-badge.prio-n { background: #7f8c8d; color: #fff; }
  /* ── API connection status dot ──────────────────────────────── */
  .api-status {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .api-status.online   { background: #2e7d32; box-shadow: 0 0 0 2px rgba(46,125,50,0.20); }
  .api-status.offline  { background: var(--danger); box-shadow: 0 0 0 2px rgba(200,74,74,0.22); }
  .api-status.checking { background: var(--muted); box-shadow: 0 0 0 2px rgba(111,109,100,0.22); }

  /* ── Login overlay ──────────────────────────────────────────── */
  .login-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .login-card {
    width: 100%; max-width: 340px;
    background: var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 28px 24px 22px;
    box-shadow: 0 8px 24px rgba(43,42,38,0.12);
    font-family: var(--font-ui);
  }
  .login-title {
    margin: 0 0 18px; font-size: 20px; font-weight: 600;
    color: var(--text); letter-spacing: 0.02em;
  }
  .login-field { margin-bottom: 14px; }
  .login-field label {
    display: block; margin-bottom: 6px;
    font-size: 12px; color: var(--muted); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .login-field input {
    width: 100%; box-sizing: border-box;
    padding: 9px 11px; border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: var(--panel); color: var(--text);
    font: inherit;
  }
  .login-field input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(204,120,92,0.18);
  }
  .login-remember {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 0 14px;
    font-size: 13px; color: var(--muted);
    cursor: pointer; user-select: none;
  }
  .login-remember input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--accent);
    cursor: pointer; margin: 0;
  }
  .login-error {
    margin: 0 0 12px; padding: 8px 10px;
    background: rgba(200,74,74,0.10); border: 1px solid rgba(200,74,74,0.35);
    color: var(--danger); border-radius: 4px;
    font-size: 13px;
  }
  .login-submit {
    width: 100%; padding: 10px 16px;
    background: var(--accent); color: #fff; border: none;
    border-radius: 6px; font: inherit; font-weight: 600;
    cursor: pointer;
  }
  .login-submit:hover { background: var(--accent-hover); }
  .login-submit:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Section accordions in markdown (read-only) view. Each vendor/order/
     retire banner becomes a collapsible <details>, mirroring the editor. */
  #po details.po-view-section { margin: 10px 0 4px; }
  #po details.po-view-section > summary {
    cursor: pointer; user-select: none;
    list-style: none;
    padding: 4px 0;
    font-weight: 600;
    color: var(--accent);
  }
  #po details.po-view-section > summary::-webkit-details-marker { display: none; }
  #po details.po-view-section > summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s;
    color: var(--muted);
  }
  #po details.po-view-section[open] > summary::before {
    transform: rotate(90deg);
  }
  /* Cross-vendor grand-total summary above the panel sub-panels. */
  #po .panel-summary {
    padding: 8px 14px; margin: 4px 0 12px;
    background: var(--paper);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--paper-shadow);
    font-size: 13px; color: var(--text);
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  }
  #po .panel-summary .ps-label {
    font-weight: 600; color: var(--muted); margin-right: 4px;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  }
  #po .panel-summary b { color: var(--accent); font-weight: 700; }
  #po .panel-summary .ps-sep { color: var(--muted); margin: 0 4px; }

  /* Phase-1 multi-vendor sub-panels. Each vendor is an outer <details>;
     the existing inner section accordion nests inside. */
  #po details.vendor-panel {
    margin: 0 0 14px;
    border: none;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--paper-shadow);
  }
  /* Summary layout: 3-column grid whose columns 2 + 3 align with the body
     table's Cases + Amount columns (table-layout:fixed, same widths, same
     horizontal padding as the cells). Actions sit right after vendor-name
     in the left column for shortest mouse travel from drawer to panel. */
  #po details.vendor-panel > summary {
    cursor: pointer; user-select: none; list-style: none;
    display: grid;
    /* 6 tracks match body table: product | select | stock | case | amount | notes.
       Last track 1fr absorbs remaining width same as table's auto col.
       First track widened from 260 -> 400 so vendor name + 6 action
       icons fit comfortably even for the longest vendor names
       ("Monsieur Touton Selection", "Opici Family rndc Distributing"). */
    grid-template-columns: 400px 32px 85px 65px 95px 1fr;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px; font-weight: 600;
    border-bottom: 1px solid transparent;
    /* Sticky: when scrolling the body rows, the vendor head (with copy/edit/
       retire/close actions) stays pinned at the top of the #po scroll area
       so the user never has to scroll back up to find the commands.
       Multiple <details> siblings handle their own sticky territory, so
       scrolling past one vendor cleanly hands over to the next. */
    position: sticky; top: 36px; z-index: 5;
    background: var(--paper);
  }
  /* On narrow viewports the 6-col fixed grid overflows horizontally and
     wraps visually on top of the toolbar buttons. Collapse to a flex
     row that wraps cleanly; alignment with the body table is sacrificed
     for readability. Keeps copy/edit/retire/close actions visible. */
  @media (max-width: 700px) {
    #po details.vendor-panel > summary {
      grid-template-columns: 1fr auto auto;
      padding: 6px 10px;
      font-size: 13px;
    }
    #po .vendor-total-cases { grid-column: 2; padding-right: 8px; }
    #po .vendor-total-amount { grid-column: 3; padding-right: 0; }
  }
  #po details.vendor-panel[open] > summary { border-bottom-color: var(--border); }
  #po details.vendor-panel > summary::-webkit-details-marker { display: none; }
  #po .vendor-head-left {
    display: flex; align-items: center; gap: 6px;
    min-width: 0;  /* allow name ellipsis to kick in instead of pushing actions off */
  }
  #po .vendor-head-left::before {
    content: '\25B8'; display: inline-block;
    transition: transform 0.15s; color: var(--muted);
    flex: 0 0 auto;
  }
  #po details.vendor-panel[open] > summary .vendor-head-left::before {
    transform: rotate(90deg);
  }
  /* Interactive filter bar above each vendor PO table. `filter-selected`
     class on the wrapper hides any row whose .po-select is unchecked
     -- gives the operator an ad-hoc per-vendor "send only these" view
     without rewriting the markdown. Same checkboxes that drive Retire. */
  .po-filter-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 10px; font-size: 12px; color: var(--muted);
    border-bottom: 1px solid var(--border);
  }
  .po-filter-bar label {
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer; user-select: none;
  }
  .po-filter-bar .po-filter-hint { opacity: 0.7; }
  .po-main-wrap.filter-selected tbody tr:not(.row-selected) {
    display: none !important;
  }

  /* `!important` is intentional here: long-lived browser caches were
     serving the old (broken) rule that collapsed the name span to
     width 0. Bumping specificity guarantees the fix wins even if a
     stale Cloudflare/browser cache hands back an outdated stylesheet
     that is then composed against fresh HTML. */
  #po .vendor-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: var(--text); font-weight: 500;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #po .vendor-total-cases,
  #po .vendor-total-amount {
    /* Explicit grid-column placement: totals sit above col 3 (CASES) and
       col 4 (AMOUNT) in the 5-col layout (product|instock|cases|amount|notes).
       Right-align and 12px padding match table cell padding for exact alignment. */
    text-align: right;
    padding-right: 12px;
    font-variant-numeric: tabular-nums;
    font-size: 13px; font-weight: 500;
  }
  #po .vendor-total-cases { grid-column: 4; color: var(--muted); }
  #po .vendor-total-amount { grid-column: 5; color: var(--accent); font-weight: 600; }
  /* Allow actions to shrink (was flex: 0 0 auto, which kept the icon
     row at full natural width and stole all space from .vendor-name). */
  #po .vendor-actions {
    display: inline-flex; gap: 2px; margin-left: 4px;
    flex: 0 1 auto !important; min-width: 0 !important;
  }
  /* Touch-friendly: min 36px tap target so iPhone thumbs hit reliably. */
  #po .vendor-copy, #po .vendor-stock-copy, #po .vendor-email, #po .vendor-edit, #po .vendor-retire, #po .vendor-close {
    background: transparent; border: none; color: var(--muted);
    cursor: pointer; padding: 8px 10px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.12s, background 0.12s;
    font-size: 18px; line-height: 1;
    min-width: 36px; min-height: 36px;
  }
  #po .vendor-copy svg, #po .vendor-stock-copy svg, #po .vendor-email svg, #po .vendor-close svg, #po .vendor-edit svg, #po .vendor-retire svg {
    width: 18px; height: 18px;
    pointer-events: none;  /* click always lands on the button */
  }
  #po .vendor-copy:hover { color: var(--accent); background: rgba(204,120,92,0.10); }
  #po .vendor-stock-copy:hover { color: var(--accent); background: rgba(204,120,92,0.10); }
  #po .vendor-stock-copy.copied { color: var(--tone-final, #5a9a3a); }
  /* Daily-batch status indicator on the toolbar batch buttons. Green
     means today's run shipped (scheduler or manual button), yellow
     means not sent yet today (or last attempt failed). */
  .batch-status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    background: #d4a72c;            /* default = pending / yellow  */
    box-shadow: 0 0 0 1px rgba(0,0,0,0.10) inset;
  }
  .batch-status-dot.ok { background: #2e8540; }       /* green = sent */
  .batch-status-dot.pending { background: #d4a72c; }  /* explicit yellow */

  #po .vendor-email:hover { color: var(--accent); background: rgba(204,120,92,0.10); }
  #po .vendor-email.sent { color: var(--tone-final, #5a9a3a); }
  #po .vendor-email:disabled { opacity: 0.5; cursor: progress; }
  #po .vendor-edit:hover { color: var(--accent); background: rgba(204,120,92,0.10); }
  #po .vendor-retire:hover { color: var(--accent); background: rgba(204,120,92,0.10); }
  #po .vendor-retire:disabled { opacity: 0.35; cursor: not-allowed; }
  #po .vendor-retire:disabled:hover { color: var(--muted); background: transparent; }
  #po .vendor-close:hover { color: var(--danger); background: rgba(200,74,74,0.10); }
  #po .vendor-copy.copied { color: var(--tone-final, #5a9a3a); }
  #po .vendor-panel-body { padding: 4px 12px 10px; }  /* match summary padding-left/right so grid cols align with table cols */

  /* Retire blacklist panel: collapsible, sits below vendor panels.
     Local-only for now -- see SQL comment in JS for planned DB schema. */
  #po details.retire-panel {
    margin: 16px 0 8px;
    padding: 0;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--text);
  }
  #po details.retire-panel > summary {
    cursor: pointer; user-select: none; list-style: none;
    padding: 8px 12px;
    font-weight: 600; color: var(--muted);
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em;
    display: flex; align-items: center; gap: 8px;
  }
  #po details.retire-panel > summary::-webkit-details-marker { display: none; }
  #po details.retire-panel > summary::before {
    content: '\25B8'; display: inline-block;
    transition: transform 0.15s; color: var(--muted);
  }
  #po details.retire-panel[open] > summary::before { transform: rotate(90deg); }
  #po .retire-hint {
    padding: 0 14px 4px; color: var(--muted); font-size: 12px;
  }
  #po .retire-list {
    list-style: none; margin: 4px 0 10px; padding: 0 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 4px;
  }
  #po .retire-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 8px; gap: 8px;
    background: rgba(204,120,92,0.05);
    border-radius: 4px;
    font-size: 13px;
  }
  #po .retire-item .retire-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto;
  }
  #po .retire-restore {
    background: transparent; border: none; color: var(--muted);
    cursor: pointer; padding: 4px 6px; border-radius: 4px;
    display: inline-flex; align-items: center;
    transition: color 0.12s, background 0.12s;
    flex: 0 0 auto;
  }
  #po .retire-restore svg { width: 14px; height: 14px; pointer-events: none; }
  #po .retire-restore:hover { color: var(--accent); background: rgba(204,120,92,0.10); }
  /* Mobile: allow horizontal scroll instead of squashing columns */
  @media (max-width: 600px) {
    .po { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #po table { font-size: 12px; min-width: 520px; }
    #po th, #po td { padding: 6px 8px; }
    /* Autocomplete on mobile: full-viewport width, pinned to top, name
       on its own row, badges wrap to a second row. Visible scrollbar
       (overflow-y: scroll forces it, -webkit-scrollbar styles it).
       CSS kept conservative for iOS Safari <15.4 compatibility:
       vh not dvh, width:100% not 100vw, z-index pushed very high to
       escape any sticky-topbar stacking context, !important to override
       the desktop rule's short-hand positioning. */
    /* Mobile: JS anchors top/left/width via anchorPopupToChat().
       Keep visual + scrollbar rules only here -- no positioning. */
    .autocomplete {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      border: none;
      border-radius: 0;
      z-index: 9999;
    }
    .autocomplete::-webkit-scrollbar { width: 8px; }
    .autocomplete::-webkit-scrollbar-track { background: transparent; }
    .autocomplete::-webkit-scrollbar-thumb {
      background: var(--border-strong); border-radius: 4px;
    }
    .autocomplete-item {
      flex-wrap: wrap;
      align-items: center;
      padding: 14px 16px;
      gap: 6px 10px;
    }
    .autocomplete-item .ac-name {
      flex: 1 1 100%;
      white-space: normal; overflow: visible; text-overflow: clip;
      word-break: break-word;
      min-width: 0;
    }
    .autocomplete-item .ac-qty,
    .autocomplete-item .ac-cov { flex: 0 0 auto; }
  }
  #po th { background: var(--panel2); font-weight: 600; color: var(--text);
           font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
           border-bottom: 2px solid var(--border-strong); }
  #po tr:hover td { background: rgba(204,120,92,0.06); }
  #po h1 { font-size: 1.2em; margin: 0 0 0.2em 0; color: var(--text);
           font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; }
  #po h2 { font-size: 1em; margin: 0.3em 0 0.15em 0; color: var(--accent);
           font-family: var(--font-ui); font-weight: 600; }
  #po hr { border: none; border-top: 1px solid var(--border); margin: 0.6em 0; }
  #po p, #po em { color: var(--muted); font-family: var(--font-serif); margin: 0.2em 0; }
  #po blockquote { margin: 0.2em 0; padding: 0 0 0 10px; border-left: 2px solid var(--border);
                   color: var(--muted); font-size: 12px; }
  #po strong { color: var(--text); font-weight: 600; }
  /* ✻ spinner — Claude propagating glyph, warm orange */
  .spinner-dot {
    display: inline-block;
    color: var(--accent);
    font-size: 1.1em;
    margin-right: 6px;
    animation: eip-pulse 1.2s ease-in-out infinite, eip-spin 2.4s linear infinite;
    transform-origin: center;
  }
  .spinner-dot::before { content: '✻'; }
  @keyframes eip-pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
  @keyframes eip-spin  { to { transform: rotate(360deg); } }
  /* Custom autocomplete dropdown — light theme */
  .inputbar { position: relative; }
  .autocomplete {
    position: absolute;
    /* Popup bottom edge = chat-wrap top edge (= chat top). Popup grows
       UPWARD into the PO-panel region above; chat content is never
       covered. */
    bottom: 100%;
    top: auto;
    left: 0; right: 0;
    box-sizing: border-box;       /* border counted IN width 100% */
    max-width: 100%;
    overflow-x: hidden;           /* no horizontal scroll */
    max-height: 480px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    display: none;
    z-index: 100;
    box-shadow: 0 -4px 16px rgba(43,42,38,0.10), 0 -2px 8px rgba(43,42,38,0.04);
  }
  .autocomplete-item { box-sizing: border-box; max-width: 100%; min-width: 0; }
  .autocomplete.active { display: block; }
  .autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    color: var(--text);
    font: 14px/1.4 var(--font-ui);
    border-bottom: 1px solid var(--border);
    /* Badges now render before the name; pack items from the left so
       stock / days-of-cover are always visible without horizontal scroll. */
    display: flex; align-items: center; gap: 8px;
  }
  .autocomplete-item .ac-name {
    flex: 1 1 0; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .autocomplete-item .ac-qty {
    flex: 0 0 auto; font-size: 11px; padding: 2px 8px;
    border-radius: 10px; background: var(--panel2); color: var(--muted);
    font-weight: 600; white-space: nowrap;
  }
  .autocomplete-item .ac-qty.zero { background: #fff3cd; color: #856404; }
  .autocomplete-item .ac-qty.neg  { background: #f8d7da; color: #721c24; }
  .autocomplete-item .ac-cov {
    flex: 0 0 auto; font-size: 11px; padding: 2px 8px;
    border-radius: 10px; background: var(--panel2); color: var(--muted);
    font-weight: 600; white-space: nowrap;
  }
  .autocomplete-item .ac-cov.warn   { background: #fff3cd; color: #856404; }
  .autocomplete-item .ac-cov.urgent { background: #f8d7da; color: #721c24; }
  .autocomplete-item:last-child { border-bottom: none; }
  .autocomplete-item:hover,
  .autocomplete-item.selected { background: rgba(204,120,92,0.18); color: var(--text); }
  /* Keep badges + mark text readable on the translucent hover background */
  .autocomplete-item mark { background: transparent; color: var(--accent); font-weight: 600; }
  .autocomplete-item.selected mark { color: var(--accent); text-decoration: underline; }
  /* Mode indicator below the input — tells user what Enter will do */
  .mode-hint {
    position: absolute;
    bottom: 100%;
    right: calc(var(--pad) + 90px);
    padding: 3px 10px;
    font: 500 11px/1.4 var(--font-ui);
    color: var(--muted);
    background: var(--panel2);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    pointer-events: none;
    user-select: none;
  }
  .mode-hint.go { color: var(--accent2); background: rgba(101,148,102,0.1); }
  .mode-hint.edit { color: var(--accent); background: rgba(204,120,92,0.1); }
  .mode-hint.warn { color: var(--danger); background: rgba(200,74,74,0.1); }
  /* Collapsible backend-log panel. Floats above the inputbar so toggling
     never reflows chat / PO panes. Closed = single 22px summary line.
     Lifted 10px from inputbar so it does not visually fuse with the
     send row; chat gets extra bottom padding so messages aren't hidden
     behind the floating summary. */
  .log-panel {
    position: absolute;
    /* 3px gap from inputbar (matches PO margin-bottom + chat padding) */
    bottom: calc(100% + 3px);
    /* full chat-box width (match .inputbar / .chat edges), not inset
       inside inputbar padding */
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--panel);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -4px 12px rgba(43,42,38,0.06);
    font-size: 11px;
  }
  .log-panel summary {
    cursor: pointer;
    padding: 4px 10px;
    color: var(--muted);
    user-select: none;
    list-style: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .log-panel summary::-webkit-details-marker { display: none; }
  .log-panel summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s;
  }
  .log-panel[open] summary::before { transform: rotate(90deg); }
  .log-body {
    max-height: 220px;
    overflow-y: auto;
    padding: 6px 10px 8px;
    border-top: 1px solid var(--border);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text);
  }
  .log-body .log-line {
    padding: 2px 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--muted);
  }
  .log-body .log-line + .log-line {
    border-top: 1px dotted var(--border); margin-top: 2px; padding-top: 4px;
  }

  /* Time-appropriate greeting on landing */
  .greeting {
    padding: 14px var(--pad) 6px 58px;  /* left pad clears the 📋 drawer toggle (36px + 10 left + 12 gap) */
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--text);
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.2px;
  }
  .greeting .emoji { margin-right: 6px; }
  .greeting .sub { color: var(--muted); font-size: 13px; margin-left: 8px; font-family: var(--font-ui); }

  /* Left drawer — order history accumulator.
     drawer + toggle use position:fixed (viewport-relative).  Do NOT make
     #app position:relative — that would trap them inside #app's stacking
     context and bury them under siblings with background colors. */
  .drawer-toggle {
    position: fixed; top: 10px; left: 10px; z-index: 100;
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--panel); border: 1px solid var(--border-strong);
    color: var(--text); cursor: pointer; font-size: 16px;
    box-shadow: 0 2px 6px rgba(43,42,38,0.12);
    /* iOS Safari centers emoji glyphs differently than Chrome -- force
       flex centering so the icon always sits in the middle regardless of
       the emoji's embedded baseline. */
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
  }
  .drawer-toggle:hover { background: var(--panel2); }
  .drawer {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    z-index: 90;                 /* above greeting/topbar, below toggle(100) */
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .drawer.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(43,42,38,0.1); }
  .drawer-head {
    /* left pad clears the fixed 📋 toggle button (10+36+12 = 58px) */
    padding: 16px 16px 10px 58px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    min-height: 62px;   /* ≥ toggle's top:10 + 36 + breathing room */
  }
  .drawer-title {
    font-weight: 600; font-size: 14px; color: var(--text);
    letter-spacing: 0.3px;
  }
  .drawer-clear {
    background: transparent; border: none; color: var(--muted);
    font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
  }
  .drawer-clear:hover { color: var(--danger); background: rgba(200,74,74,0.08); }
  .drawer-list {
    flex: 1; overflow-y: auto; padding: 8px;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  /* WebKit / Blink scrollbar -- artist cream + warm thumb */
  .drawer-list::-webkit-scrollbar { width: 8px; }
  .drawer-list::-webkit-scrollbar-track {
    background: transparent;
  }
  .drawer-list::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
    border: 2px solid var(--panel);  /* pad thumb visually so it reads thinner */
    background-clip: padding-box;
  }
  .drawer-list::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: padding-box;
  }
  .drawer-foot {
    padding: 8px 10px; border-top: 1px solid var(--border);
    display: flex; justify-content: flex-start;
  }
  .drawer-empty {
    color: var(--muted); font-size: 12px; font-style: italic;
    text-align: center; padding: 20px 8px;
  }
  .drawer-item {
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg);
    transition: background 0.12s, border-color 0.12s;
    position: relative;
  }
  .drawer-item:hover { background: var(--panel2); border-color: var(--border-strong); }
  .drawer-item.active { background: rgba(204,120,92,0.08); border-color: var(--accent); }
  .drawer-item-vendor {
    font-weight: 600; font-size: 13px; color: var(--text);
    margin-bottom: 4px; padding-right: 32px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .drawer-item-stats {
    font-size: 11px; color: var(--muted);
    display: flex; gap: 8px;
  }
  .drawer-item-stats .amt { color: var(--accent); font-weight: 500; }
  .drawer-item-time {
    font-size: 10px; color: var(--muted); margin-top: 3px;
  }
  /* Stacked vertical icons at the right edge of the drawer item.
     Order (top->bottom): move (>), copy, delete (hover-only). */
  .drawer-item-del {
    position: absolute; top: 54px; right: 6px;
    background: rgba(59,109,176,0.10); border: 1px solid rgba(59,109,176,0.35);
    color: #3b6db0;
    font-size: 16px; line-height: 1; cursor: pointer;
    padding: 3px 6px; border-radius: 4px;
  }
  .drawer-item-del:hover { background: rgba(59,109,176,0.22); border-color: #3b6db0; }
  .drawer-item-del svg { width: 14px; height: 14px; display: block; stroke-width: 2; }
  /* Copy button: sits to the left of the delete button. Always visible
     on mobile (no hover), subtle on desktop until hover. */
  .drawer-item-copy {
    position: absolute; top: 30px; right: 6px;
    background: transparent; border: none; color: var(--muted);
    font-size: 15px; line-height: 1; cursor: pointer;
    padding: 2px 5px; border-radius: 3px;
    opacity: 0.5; transition: opacity 0.12s, color 0.12s;
  }
  .drawer-item:hover .drawer-item-copy { opacity: 1; }
  .drawer-item-copy:hover { color: var(--accent); background: rgba(204,120,92,0.1); }
  .drawer-item-copy.copied { color: var(--tone-final, #5a9a3a); opacity: 1; }
  .drawer-item-copy svg { width: 14px; height: 14px; display: block; }
  /* Move-to-panel arrow (right chevron) -- sits leftmost of the three. */
  .drawer-item-move {
    position: absolute; top: 6px; right: 6px;
    background: transparent; border: none; color: var(--muted);
    cursor: pointer; padding: 2px 5px; border-radius: 3px;
    opacity: 0.7; transition: opacity 0.12s, color 0.12s, background 0.12s;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .drawer-item:hover .drawer-item-move { opacity: 1; }
  .drawer-item-move:hover { color: var(--accent); background: rgba(204,120,92,0.10); }
  .drawer-item-move svg { width: 15px; height: 15px; display: block; }

  /* Inline PO editor -- replaces the markdown render while active. */
  .po-editor { font-family: var(--font-ui); font-size: 14px; }
  .po-editor .po-editor-toolbar {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;                 /* add-row-inline wraps to its own full-width row */
    padding: 6px 0 10px 0; border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
  }
  .po-editor .po-add-btn {
    background: var(--accent); color: #fff; border: none;
    padding: 6px 14px; border-radius: var(--radius);
    font-size: 13px; font-weight: 500; cursor: pointer;
  }
  .po-editor .po-add-btn:hover { background: var(--accent-hover); }
  /* Spacer pushes Save + Cancel to the right edge of the editor toolbar. */
  .po-editor .po-editor-spacer { flex: 1 1 auto; }
  .po-editor .po-total-hint { margin-left: auto; color: var(--muted); font-size: 12px; }
  .po-editor .po-total-hint b { color: var(--text); font-weight: 600; }
  .po-editor h3 {
    font-size: 13px; margin: 14px 0 6px;
    color: var(--accent); font-family: var(--font-ui); font-weight: 600;
    letter-spacing: 0.02em;
  }
  .po-editor details.po-section { margin: 10px 0 4px; }
  .po-editor details.po-section > summary {
    cursor: pointer; user-select: none;
    font-size: 13px; font-weight: 600; color: var(--accent);
    padding: 6px 0;
    list-style: none;
  }
  .po-editor details.po-section > summary::-webkit-details-marker { display: none; }
  .po-editor details.po-section > summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s;
  }
  .po-editor details.po-section[open] > summary::before { transform: rotate(90deg); }
  .po-editor .po-section-count { color: var(--muted); font-weight: 400; font-size: 11px; }
  .po-editor .po-section-copy {
    margin-left: 10px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    padding: 1px 10px;
    border-radius: 10px;
    cursor: pointer;
    vertical-align: middle;
  }
  .po-editor .po-section-copy:hover { color: var(--accent); border-color: var(--accent); }
  .po-editor .po-section-copy.copied { color: var(--tone-final, #5a9a3a); border-color: currentColor; }
  .po-editor .po-section-copy svg {
    width: 13px; height: 13px; vertical-align: middle; margin-top: -1px;
  }
  /* Copy button attached to section banners in read-only markdown view. */
  .po-view-copy {
    margin-left: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
    cursor: pointer;
    vertical-align: middle;
  }
  .po-view-copy:hover { color: var(--accent); border-color: var(--accent); }
  .po-view-copy.copied { color: var(--tone-final, #5a9a3a); border-color: currentColor; }
  .po-view-copy svg { width: 13px; height: 13px; vertical-align: middle; }
  .po-editor table {
    width: 100%; border-collapse: collapse; font-size: 13px;
  }
  .po-editor th {
    text-align: left; padding: 4px 8px; color: var(--muted);
    font-weight: 500; font-size: 11px; letter-spacing: 0.05em;
    text-transform: uppercase; border-bottom: 1px solid var(--border);
  }
  .po-editor td {
    padding: 2px 8px; border-bottom: 1px solid var(--border);
    vertical-align: middle; line-height: 1.3;
  }
  .po-editor tbody tr { transition: background 0.1s ease; }
  .po-editor tbody tr:hover { background: rgba(204,120,92,0.05); }
  /* Editor: 5-col layout PRODUCT | STOCK | CASE | AMOUNT | NOTES.
     Widths match view mode; only col-qty (CASE) is editable. */
  .po-editor table { table-layout: fixed; }
  .po-editor td.col-product, .po-editor table th:nth-child(1) {
    width: 260px;
    white-space: normal;
    word-break: break-word;
  }
  .po-editor td.col-stock, .po-editor table th:nth-child(2) {
    width: 85px; text-align: right; color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .po-editor table td.col-qty,
  .po-editor table th:nth-child(3) {
    width: 90px; text-align: center; padding: 2px 6px;
    font-variant-numeric: tabular-nums;
  }
  .po-editor table td.col-amt,
  .po-editor table th:nth-child(4) {
    width: 95px; text-align: right; padding-right: 14px;
    font-variant-numeric: tabular-nums;
  }
  .po-editor td.col-notes,
  .po-editor table th:nth-child(5) {
    font-size: 12px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Del button lives INSIDE the product cell (no dedicated column) so
     it costs zero table layout width. Trash icon, muted by default,
     subtle red tint on hover. */
  /* Line-delete button inside editor row -- always visible (iPhone has no
     hover). Blue tint + bordered box so it reads as a real tap target. */
  .po-editor td.col-product .del-btn {
    background: rgba(59,109,176,0.10); border: 1px solid rgba(59,109,176,0.35);
    color: #3b6db0; cursor: pointer;
    padding: 3px 6px;
    margin: 0 8px 0 -2px;
    border-radius: 4px;
    vertical-align: middle;
    font-size: 16px; line-height: 1;
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  .po-editor td.col-product .del-btn:hover {
    background: rgba(59,109,176,0.22); border-color: #3b6db0;
  }
  .po-editor td.col-product .del-btn:active { transform: scale(0.92); }
  .po-editor td.col-product .del-btn svg { width: 14px; height: 14px; display: block; stroke-width: 2; }
  .po-editor td.col-product .prod-name {
    vertical-align: middle;
    font-weight: 450; color: var(--text);
  }
  .po-editor input.qty-input {
    /* 72px wide + 12px right inner padding keeps 3-digit numbers (e.g. 999)
       visible with breathing room from the right border. Centered text so
       the number reads nicely even for 1-2 digit values. */
    width: 60px; padding: 2px 12px; border: 1px solid var(--border-strong);
    border-radius: 4px; background: var(--panel); color: var(--text);
    text-align: center; font: inherit;
    font-variant-numeric: tabular-nums;
    display: inline-block; vertical-align: middle;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
  }
  .po-editor input.qty-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(204,120,92,0.18);
  }
  .po-editor .del-btn {
    background: transparent; border: none; color: var(--muted);
    cursor: pointer; font-size: 16px; padding: 2px 6px;
  }
  .po-editor .del-btn:hover { color: var(--danger); }
  .po-editor .add-row-inline {
    position: relative; padding: 10px 8px; background: rgba(204,120,92,0.04);
    border: 1px dashed var(--accent); border-radius: var(--radius);
    margin: 8px 0;
    flex: 1 1 100%;                  /* break to its own line, fill width */
  }
  .po-editor .add-row-inline input {
    width: 100%; padding: 6px 10px; border: 1px solid var(--border-strong);
    border-radius: 4px; background: var(--panel); color: var(--text);
    font: inherit;
  }
  .po-editor .add-row-inline .autocomplete {
    bottom: auto; top: 100%;
  }
  .po-editor .add-row-actions {
    display: flex; gap: 8px; margin-top: 8px;
  }
  /* 5-col grid keeps stock / cost / price vertically aligned across rows. */
  .po-editor .autocomplete-item.ac-picker {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 60px 68px 68px;
    align-items: center;
    gap: 10px; cursor: pointer;
    padding: 6px 10px;
  }
  .po-editor .autocomplete-item .ac-check {
    width: 16px; height: 16px; cursor: pointer; margin: 0;
    accent-color: var(--accent);
  }
  .po-editor .autocomplete-item .ac-name {
    /* Hold up to ~60 chars with wrap. On iPhone the name column is narrow,
       wrapping to 2-4 lines keeps stock/cost/price visible in their own
       grid cells on the right (they stay vertically centered). */
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
  }
  .po-editor .autocomplete-item .ac-stock,
  .po-editor .autocomplete-item .ac-cost,
  .po-editor .autocomplete-item .ac-price {
    text-align: right; font-variant-numeric: tabular-nums;
  }
  .po-editor .autocomplete-item .ac-stock { color: var(--muted); font-size: 12px; }
  .po-editor .autocomplete-item .ac-cost  { color: var(--muted); font-weight: 500; }
  .po-editor .autocomplete-item .ac-price { color: var(--accent); font-weight: 600; }

  /* Back-to-live banner when viewing a historical PO */
  .history-banner {
    background: rgba(204,120,92,0.1);
    border-left: 3px solid var(--accent);
    padding: 8px 12px; margin: -10px -6px 10px -6px;
    font-size: 12px; color: var(--text);
    display: flex; justify-content: space-between; align-items: center;
  }
  .history-banner button {
    background: var(--accent); color: #fff; border: none;
    padding: 4px 10px; border-radius: 4px; font-size: 11px;
    font-weight: 600; cursor: pointer;
  }