/* Phase 4B (3.J.6) -- Seasonality Studio stylesheet.
 *
 * Lifted verbatim from spec/stream_b_seasonality_fit/studio_prototype_v2_modal.html
 * per the plan: "implementer should lift CSS class names + DOM structure +
 * JS interaction patterns wholesale." Design tokens (--bg, --ink, etc.) are
 * redeclared here for self-containedness; they already exist in the global
 * stylesheet so this is idempotent. Scope risk: .page and .btn are generic;
 * the rest of the classes (.queue-card, .ai-rec, .cell-modal, .fit-histogram,
 * .member-card, .anomalies, .audit-table, .studio-filters-bar) are
 * studio-specific and do not collide with other surfaces.
 */

  /* ────────── Page container ────────── */
  .page {
    max-width: 1500px; margin: 0 auto;
    padding: 24px;
  }
  .page-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 18px;
  }
  .page-title {
    font-size: 22px; font-weight: 700; margin: 0;
    letter-spacing: -0.01em;
  }
  .page-subtitle {
    color: var(--muted); font-size: 12px; margin-top: 2px;
  }
  .page-subtitle .dot { padding: 0 6px; color: var(--light); }
  .page-actions { display: flex; gap: 8px; }
  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 7px 12px;
    border-radius: 8px;
    font: inherit; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    cursor: pointer;
  }
  .btn:hover { border-color: var(--border-hover); }
  .btn-primary {
    background: var(--accent); border-color: var(--accent); color: white;
  }
  .btn-primary:hover { filter: brightness(1.05); }
  .btn-ai {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border: 0; color: white;
    text-transform: none; letter-spacing: 0; font-size: 13px;
    padding: 9px 14px;
  }
  .btn-ai:hover { filter: brightness(1.07); }
  .btn-secondary {
    background: var(--surface);
    border: 1px solid var(--border-hover); color: #555;
    text-transform: none; letter-spacing: 0; font-size: 13px;
    padding: 8px 14px; font-weight: 500;
  }
  .btn-destructive-outline {
    background: var(--surface);
    border: 1px solid var(--red); color: var(--red);
    text-transform: none; letter-spacing: 0; font-size: 12px;
    padding: 7px 12px; font-weight: 500;
  }
  .btn-lg { padding: 10px 16px; font-size: 13px; }
  .btn .icon { width: 14px; height: 14px; flex: none; }

  /* ────────── KPI strip ────────── */
  .kpi-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin-bottom: 14px;
  }
  /* Color-tinted KPI cards. Each card sets `--kpi-tone` and `--kpi-tint`
     so the label, value, and meta inherit the tone, while the card
     surface gets a soft tint of the same hue. Variants below override
     only the two tokens — `.kpi` defines the structure once. */
  .kpi {
    --kpi-tone: var(--ink);
    --kpi-tint: var(--surface);
    background: var(--kpi-tint);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
  }
  .kpi--amber { --kpi-tone: var(--amber); --kpi-tint: var(--amber-tint); }
  .kpi--red   { --kpi-tone: var(--red);   --kpi-tint: var(--red-tint); }
  .kpi--green { --kpi-tone: var(--green); --kpi-tint: var(--green-tint); }
  .kpi--blue  { --kpi-tone: var(--blue);  --kpi-tint: var(--blue-tint); }
  .kpi-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--kpi-tone);
    margin-bottom: 6px;
  }
  .kpi-value {
    font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--kpi-tone);
    line-height: 1.1;
  }
  .kpi-value .kpi-unit {
    font-size: 18px; font-weight: 700; color: var(--kpi-tone);
    opacity: 0.7;
    margin-left: 1px;
  }
  .kpi-value.dollar { color: var(--kpi-tone); }
  .kpi-meta {
    font-size: 11px; color: var(--kpi-tone); margin-top: 4px;
    opacity: 0.85;
  }
  /* Inline AI-by-buyer split inside the trend card's meta line. */
  .kpi-meta .kpi-by-ai { color: var(--purple); font-weight: 600; }
  .kpi-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
  .kpi-delta.up   { color: var(--green); }
  .kpi-delta.down { color: var(--red); }
  .kpi-delta.neu  { color: var(--muted); }
  .cycle-strip {
    font-size: 11px; color: var(--muted);
    margin: 0 0 18px;
  }
  .cycle-strip .pulse {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
    margin-right: 5px; vertical-align: 1px;
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

  /* ────────── Tabs ────────── */
  .tabs {
    display: flex; gap: 0; border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
  }
  .tab {
    padding: 10px 16px;
    font-size: 13px; font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .tab .count {
    background: var(--surface-alt);
    color: var(--muted);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px; font-weight: 600;
  }
  .tab.active {
    color: var(--ink); font-weight: 600;
    border-bottom-color: var(--ink);
  }
  .tab.active .count {
    background: var(--ink); color: white;
  }
  .tab:hover:not(.active) { color: var(--ink); }

  /* ────────── Global filter bar (above tabs) ────────── */
  .studio-filters-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px 0;
    margin-bottom: 14px;
  }
  .studio-filters-bar .filter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 24px;
    row-gap: 12px;
    align-items: start;
  }
  .studio-filters-bar .filter-group {
    display: flex; flex-direction: column; gap: 6px; min-width: 0;
  }
  .studio-filters-bar .filter-group-phase5 {
    opacity: 0.55;
  }
  .studio-filters-bar .group-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted);
    display: flex; align-items: center; gap: 4px;
  }
  .studio-filters-bar .group-label .phase5-badge {
    background: var(--tint-over-bg); color: var(--tint-over-fg);
    font-size: 8px; font-weight: 700; letter-spacing: 0.04em;
    padding: 1px 5px; border-radius: 3px;
    text-transform: uppercase;
  }
  .studio-filters-bar .group-content {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  }
  .studio-filters-bar select.pt-select {
    appearance: none;
    background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a8a8a' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat right 8px center;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 24px 6px 10px;
    font: inherit; font-size: 12px; color: var(--ink);
    min-width: 0; flex: 1;
    cursor: pointer;
  }
  .studio-filters-bar select.pt-select:hover { border-color: var(--border-hover); }
  .studio-filters-bar select.pt-select:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
  .studio-filters-bar .sku-search {
    position: relative; width: 100%;
  }
  .studio-filters-bar .sku-search input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px 6px 28px;
    font: inherit; font-size: 12px;
    color: var(--ink);
  }
  .studio-filters-bar .sku-search input:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
  .studio-filters-bar .sku-search .icon {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    color: var(--light); font-size: 13px;
    pointer-events: none;
  }
  .studio-filters-bar .ai-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px; font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: default;
  }
  .studio-filters-bar .ai-chip .caret { color: var(--light); font-size: 10px; }
  .studio-filters-bar .toggle-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px; font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
  }
  .studio-filters-bar .toggle-chip.active {
    background: var(--tint-low-bg); color: var(--tint-low-fg); border-color: var(--tint-low-fg);
  }
  .studio-filters-bar .toggle-chip .checkbox {
    width: 12px; height: 12px;
    border: 1px solid var(--border-hover);
    border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px;
  }
  .studio-filters-bar .toggle-chip.active .checkbox {
    background: var(--tint-low-fg); border-color: var(--tint-low-fg); color: white;
  }
  .studio-filters-bar .configure-link {
    font-size: 11px; color: var(--muted);
    font-style: italic;
    padding: 6px 0;
  }

  /* Filter bar footer with action buttons — matches /replenishment Filter / Clear pattern */
  .studio-filters-bar .filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px -18px 0;
    padding: 12px 18px;
    border-top: 1px solid var(--border-light);
    background: var(--surface-alt);
    border-radius: 0 0 12px 12px;
  }
  .studio-filters-bar .filter-footer .active-count {
    font-size: 12px; color: var(--muted);
  }
  .studio-filters-bar .filter-footer .active-count strong {
    color: var(--ink); font-weight: 700;
  }
  .studio-filters-bar .filter-footer .footer-actions {
    display: flex; gap: 8px;
  }
  /* .btn / .btn-secondary / .btn-outline — exact copy of application.css buttons used on /replenishment */
  .studio-filters-bar .filter-footer .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px; font-weight: 600;
    font-family: inherit;
    line-height: 1.5;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
  }
  .studio-filters-bar .filter-footer .btn-secondary {
    background: var(--surface);
    color: #555;
    border-color: var(--border-hover);
  }
  .studio-filters-bar .filter-footer .btn-secondary:hover {
    border-color: var(--ink); color: var(--ink);
  }
  .studio-filters-bar .filter-footer .btn-outline {
    background: var(--surface);
    color: var(--muted);
    border-color: var(--border);
  }
  .studio-filters-bar .filter-footer .btn-outline:hover {
    background: var(--bg); color: #555;
  }

  @media (max-width: 1100px) {
    .studio-filters-bar .filter-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ────────── Filters bar (legacy — still used inside Audit tab) ────────── */
  .filters {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0 14px;
    flex-wrap: wrap;
  }
  .filter-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px; font-weight: 500;
    padding: 6px 10px;
    border-radius: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: default;
  }
  .filter-chip .caret { color: var(--light); font-size: 10px; }
  .filter-input {
    flex: 1; min-width: 180px; max-width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font: inherit; font-size: 12px;
    color: var(--ink);
  }
  .filter-input:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
  .filter-input::placeholder { color: var(--light); }
  .filters .reset {
    color: var(--muted); font-size: 11px;
    text-decoration: underline; cursor: pointer; margin-left: auto;
  }

  /* ────────── Full-width layout (v2 — no right drawer; cell view in modal) ────────── */
  .workspace {
    display: block;
  }
  .queue-column {
    display: block;
  }

  /* Queue card */
  .queue-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  .queue-table { width: 100%; border-collapse: collapse; }
  .queue-table thead th {
    background: var(--surface-alt);
    color: var(--light);
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0;
  }
  .queue-table thead th.right { text-align: right; }
  .queue-table tbody tr {
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 90ms;
  }
  .queue-table tbody tr:hover { background: var(--surface-alt); }
  .queue-table tbody tr.selected {
    background: var(--tint-info-bg);
  }
  .queue-table tbody tr.selected td:first-child {
    box-shadow: inset 3px 0 0 var(--blue);
  }
  .queue-table tbody td {
    padding: 13px 16px;
    font-size: 13px;
    vertical-align: middle;
  }
  .queue-table tbody td.right { text-align: right; }
  /* Selection checkbox cell (first column on every row + header) */
  .queue-table th.cb-cell,
  .queue-table td.cb-cell {
    width: 36px; padding-left: 16px; padding-right: 6px;
    text-align: center;
  }
  .queue-table td.cb-cell { vertical-align: middle; }
  .row-check {
    width: 14px; height: 14px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border-hover);
    border-radius: 3px;
    background: var(--surface);
    cursor: pointer;
    margin: 0;
    position: relative;
    transition: all 0.12s;
  }
  .row-check:hover { border-color: var(--ink); }
  .row-check:checked {
    background: var(--ink);
    border-color: var(--ink);
  }
  .row-check:checked::after {
    content: "";
    position: absolute;
    left: 3px; top: 0;
    width: 4px; height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  /* Indeterminate state for the header "select all" */
  .row-check:indeterminate {
    background: var(--ink); border-color: var(--ink);
  }
  .row-check:indeterminate::after {
    content: "";
    position: absolute;
    left: 2px; top: 5px;
    width: 8px; height: 2px;
    background: white; border: none; transform: none;
  }
  .queue-table tbody tr.row-checked {
    background: var(--tint-low-bg);
  }
  .queue-table tbody tr.row-checked:hover {
    background: var(--tint-low-bg);
  }

  /* Floating bulk-action bar — mirrors .bulk-bar from app/assets/stylesheets/replenishment_v2.css */
  .bulk-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translate(-50%, 200%);
    z-index: 50;
    background: #1a1a1a;
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
    padding: 10px 14px;
    font-family: "DM Sans", system-ui, sans-serif;
    transition: transform 220ms ease-out;
    max-width: calc(100vw - 32px);
  }
  .bulk-bar.show { transform: translate(-50%, 0); }

  .bulk-bar__inner {
    display: flex; flex-direction: column; gap: 8px;
  }
  .bulk-bar__row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .bulk-bar__spacer { flex: 1 1 auto; min-width: 8px; }

  .bulk-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    font-size: 13px; font-weight: 500;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    font-family: inherit;
  }
  .bulk-chip--summary {
    padding-left: 4px; padding-right: 4px;
    font-weight: 500;
  }
  .bulk-chip--summary strong { font-weight: 700; color: #fff; }
  .bulk-chip__sep { color: rgba(255, 255, 255, 0.35); font-weight: 400; margin: 0 2px; }
  .bulk-chip__icon { font-size: 12px; }

  /* Clear link inside the bar */
  .bulk-bar .clear-link {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 4px;
    background: transparent;
    border: 0;
    font-family: inherit;
    padding: 0;
  }
  .bulk-bar .clear-link:hover { color: #fff; }

  /* Secondary action buttons (Dismiss / Project flat) */
  .bulk-bar__btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 7px 14px;
    border-radius: 8px;
    font: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
  }
  .bulk-bar__btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
  }
  /* Primary CTA — accent red, matches Generate PO button on /replenishment */
  .bulk-bar__btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
    padding: 8px 16px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .bulk-bar__btn--primary:hover { filter: brightness(1.07); }
  /* AI Apply button — purple gradient to signal "system suggested this" */
  .bulk-bar__btn--ai {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    padding: 8px 16px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .bulk-bar__btn--ai:hover { filter: brightness(1.08); }
  .queue-table .cell-name {
    font-weight: 600; color: var(--ink);
    margin-bottom: 2px;
    display: flex; align-items: center; gap: 8px;
  }
  .queue-table .cell-meta {
    font-size: 11px; color: var(--muted);
  }
  .queue-table .dollars {
    font-weight: 700; color: var(--ink);
    font-size: 13px;
  }
  .queue-table .fit {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .queue-table .fit.poor { color: var(--red); font-weight: 600; }
  .queue-table .fit.marginal { color: var(--amber); font-weight: 600; }
  .queue-table .fit.good { color: var(--green); font-weight: 600; }
  /* Pagination — mimics shared/_pagination.html.erb pattern used on /replenishment */
  .pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 18px;
    margin-top: 14px;
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 12px;
  }
  .pagination-bar.pagination-top {
    margin-top: 0;
    margin-bottom: 14px;
  }
  .pagination-info { color: var(--muted); }
  .pagination-info strong { color: var(--ink); }

  .pagination-pages { display: flex; align-items: center; gap: 4px; }
  .pagination-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
  }
  .pagination-nav:hover { background: var(--bg); }
  .pagination-nav.disabled {
    color: var(--border-hover);
    cursor: default;
    pointer-events: none;
  }
  .pagination-page {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
  }
  .pagination-page:hover { background: var(--bg); color: var(--ink); }
  .pagination-page.active {
    background: var(--ink);
    color: var(--surface);
    pointer-events: none;
  }
  .pagination-gap { padding: 0 4px; color: var(--light); }

  .pagination-per-page { display: flex; align-items: center; gap: 6px; }
  .pagination-per-page-label { color: var(--muted); font-size: 12px; }
  .pagination-per-page-options { display: flex; gap: 3px; }
  .pagination-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px; font-weight: 600;
    border: none;
    cursor: pointer;
    background: var(--border-light);
    color: var(--muted);
    transition: all 0.15s;
  }
  .pagination-pill:hover {
    background: var(--border-hover);
    color: var(--ink);
  }
  .pagination-pill.active {
    background: var(--ink);
    color: var(--surface);
    pointer-events: none;
  }

  /* ────────── Verdict + status chips ────────── */
  .chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .chip.high   { background: var(--tint-healthy-bg); color: var(--tint-healthy-fg); }
  .chip.review { background: var(--tint-low-bg);     color: var(--tint-low-fg); }
  .chip.low    { background: var(--tint-dead-bg);    color: var(--tint-dead-fg); }

  .chip.ai-suggests { background: var(--tint-over-bg); color: var(--tint-over-fg); }
  .chip.ai-applied  { background: var(--tint-over-bg); color: var(--tint-over-fg); }
  .chip.you-resolved { background: var(--tint-healthy-bg); color: var(--tint-healthy-fg); }
  .chip.dismissed   { background: var(--tint-dead-bg); color: var(--tint-dead-fg); }

  .chip.dot::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; display: inline-block; margin-right: 2px;
  }

  /* "Suggests" + caret affordance to indicate it's not yet applied */
  .chip.ai-suggests::before {
    content: "✦"; margin-right: 3px; font-size: 9px;
  }
  .chip.ai-applied::before {
    content: "✓"; margin-right: 3px; font-weight: 800;
  }
  .chip.you-resolved::before {
    content: "✓"; margin-right: 3px; font-weight: 800;
  }

  .recommended-action {
    font-size: 12px; color: var(--muted);
    display: inline-flex; align-items: center; gap: 4px;
  }
  .recommended-action.action-isolate { color: var(--purple); font-weight: 600; }
  .recommended-action.action-pin     { color: var(--blue);   font-weight: 600; }
  .recommended-action.action-flat    { color: var(--stone);  font-weight: 600; }

  /* ────────── v2 Cell-view modal (replaces v1's right-side drawer) ────────── */
  /* z-index 1000 keeps the modal above the sticky navbar (z=100) and the
     navbar drawer / help overlay (z=200) so the buyer can always see the
     top of the cell card. The original z=90 placed it BELOW the navbar,
     which cut off the modal header on small viewports. */
  .cell-modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(26,26,26,0.55);
    z-index: 1000;
    align-items: center; justify-content: center;
    padding: 24px;
  }
  .cell-modal-overlay.show { display: flex; }
  .cell-modal {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.22);
    width: min(960px, 100%);
    height: min(880px, 92vh);
    max-height: 92vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: modalEnter 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* The Turbo Frame wrapper around the modal body is `display: block` by
     default. Without flexing it, the inner .cell-drawer (flex: 1) has no
     vertical space to expand into and the body collapses to content height,
     squishing the chart/member/anomalies cards behind the footer. */
  .cell-modal > turbo-frame {
    display: flex; flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
  }
  @keyframes modalEnter {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Highlighted queue row while modal is open (mirrors /replenishment drawer-row highlight) */
  .queue-table tbody tr.active-modal-row {
    background: var(--tint-info-bg);
  }
  .queue-table tbody tr.active-modal-row td:first-child {
    box-shadow: inset 3px 0 0 var(--blue);
  }
  .queue-table tbody tr.active-modal-row:hover {
    background: var(--tint-info-bg);
  }

  /* Aliases so the existing drawer-content HTML/CSS works inside the modal with minimal edits.
     The modal header/body/footer use the same inner blocks (AI rec, fit hist, chart, member, anomalies). */
  .cell-drawer {
    background: transparent;
    border: 0;
    border-radius: 0;
    position: static;
    max-height: none;
    display: flex; flex-direction: column;
    overflow: hidden;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
  }
  .cell-drawer-header {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .cell-drawer-title {
    font-size: 14px; font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
  }
  /* Modal-only nav controls (prev / position / next / close) */
  .modal-nav {
    display: flex; align-items: center; gap: 8px;
  }
  .modal-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s;
  }
  .modal-nav-btn:hover { background: var(--bg); }
  .modal-nav-btn:disabled,
  .modal-nav-btn.disabled {
    color: var(--border-hover); cursor: not-allowed; pointer-events: none;
  }
  .modal-position {
    font-size: 11px; font-weight: 600;
    color: var(--muted);
    padding: 0 8px;
    min-width: 80px; text-align: center;
    letter-spacing: 0.02em;
  }
  .modal-position strong { color: var(--ink); }
  .modal-close-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    cursor: pointer;
    margin-left: 4px;
    transition: all 0.15s;
  }
  .modal-close-btn:hover {
    background: var(--surface-alt); color: var(--ink); border-color: var(--border);
  }
  .cell-drawer-title .breadcrumbs {
    font-size: 11px; color: var(--muted);
    font-weight: 500;
  }
  .cell-drawer-title .close {
    color: var(--muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
  }
  .cell-drawer-title .close:hover { background: var(--surface-alt); color: var(--ink); }
  .cell-drawer-meta {
    display: flex; align-items: center; gap: 12px;
    font-size: 11px; color: var(--muted);
    margin-top: 6px;
  }
  .cell-drawer-meta .sep { color: var(--light); }
  .cell-drawer-meta strong { color: var(--ink); font-weight: 700; font-size: 13px; }

  .cell-drawer-body {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 14px;
    flex: 1 1 0;
    min-height: 0;          /* critical: lets flex item shrink + scroll instead of overflowing */
  }
  /* Flex children default to `flex-shrink: 1`, so without this rule the
     histogram / chart / member / anomalies cards get squished to share
     the body's 540px height — `member-card` wants 555px but renders at
     93px with the rest of its content hidden inside its own
     `overflow: hidden`. Disabling shrink restores each card to its
     natural height; the body's `scrollHeight` then exceeds `clientHeight`
     and `overflow-y: auto` produces a real scrollbar. */
  .cell-drawer-body > * { flex-shrink: 0; }
  .cell-drawer-footer {
    padding: 12px 18px;
    background: var(--surface-alt);
    border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
  }
  .cell-drawer-footer .label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted);
    margin-right: 4px;
  }

  /* AI Recommendation card */
  .ai-rec {
    background: var(--surface);
    border: 2px solid var(--purple-light);
    border-radius: 10px;
    padding: 14px 16px;
    position: relative;
  }
  .ai-rec .ai-label {
    position: absolute; top: -10px; left: 12px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: white;
    font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .ai-rec .ai-label .sparkle { font-size: 9px; }
  .ai-rec .why-headline {
    font-size: 13px; font-weight: 600; color: var(--ink);
    margin: 4px 0 6px;
    line-height: 1.4;
  }
  .ai-rec .why-headline .sku-mono {
    font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 600;
    color: var(--muted);
  }
  .ai-rec .why-explainer {
    font-size: 12px; color: var(--muted);
    margin-bottom: 12px;
    line-height: 1.5;
  }
  .ai-rec .impact-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: var(--surface-alt);
    border-radius: 6px;
    font-size: 12px;
  }
  .ai-rec .impact-row .impact-label {
    color: var(--muted); font-size: 11px;
  }
  .ai-rec .impact-row .impact-value {
    font-weight: 700; color: var(--green);
    font-variant-numeric: tabular-nums;
  }
  .ai-rec .actions-row {
    display: flex; align-items: center; gap: 8px;
  }
  .ai-rec .reject-btn {
    background: transparent; border: 1px solid var(--border-hover);
    color: var(--muted);
    padding: 9px 12px; border-radius: 8px;
    font: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer;
  }
  .ai-rec .reject-btn:hover { color: var(--ink); border-color: var(--ink); }
  .ai-rec .keyboard-hint {
    margin-left: auto; font-size: 10px; color: var(--light);
    display: flex; gap: 6px;
  }
  .kbd {
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px; font-weight: 600;
    color: var(--muted);
  }

  /* Section heading inside drawer */
  .section-h {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted);
    margin: 0 0 8px;
  }

  /* Fit distribution histogram (single line, NOT a card) */
  .fit-histogram {
    padding-bottom: 8px; border-bottom: 1px solid var(--border-light);
  }
  .fit-bars {
    display: flex; align-items: flex-end; gap: 2px;
    height: 90px;
    margin-bottom: 4px;
    position: relative;
  }
  /* Threshold vertical marker lines — at 0.50 and 0.85 of the bar area width */
  .fit-bars::before, .fit-bars::after {
    content: ''; position: absolute; top: 0; bottom: 0;
    width: 1px; background: var(--border-hover);
    pointer-events: none;
    z-index: 1;
  }
  .fit-bars::before { left: 50%; }   /* 0.50 threshold (review boundary) */
  .fit-bars::after  { left: 85%; }   /* 0.85 threshold (auto-resolvable boundary) */
  .fit-bar-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    gap: 2px;
    position: relative;
    z-index: 2;
  }
  .fit-bar-count {
    font-size: 9px; font-weight: 700; color: var(--muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    min-height: 9px;
  }
  .fit-bar-col.bar-zero .fit-bar-count { color: var(--light); font-weight: 500; }
  .fit-bars .bar {
    width: 100%; background: var(--ink); border-radius: 1px 1px 0 0;
    min-height: 1px;
  }
  .fit-bars .bar.poor    { background: var(--red); }
  .fit-bars .bar.marginal { background: var(--amber); }
  .fit-bars .bar.good     { background: var(--green); }
  .fit-axis {
    display: flex; justify-content: space-between;
    font-size: 9px; color: var(--light);
    font-variant-numeric: tabular-nums;
  }
  .fit-axis .threshold { color: var(--muted); font-weight: 600; }

  /* Tier summary line below the histogram */
  .fit-summary {
    display: flex; gap: 8px; margin-top: 8px;
    font-size: 11px;
    flex-wrap: wrap;
  }
  .fit-summary-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.3;
  }
  .fit-summary-pill .num { font-weight: 800; font-variant-numeric: tabular-nums; }
  .fit-summary-pill.poor     { background: var(--tint-oos-bg);     color: var(--tint-oos-fg); }
  .fit-summary-pill.marginal { background: var(--tint-low-bg);     color: var(--tint-low-fg); }
  .fit-summary-pill.good     { background: var(--tint-healthy-bg); color: var(--tint-healthy-fg); }

  /* Comparison chart card */
  .chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
  }
  .chart-card .chart-h {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
    cursor: pointer;          /* clickable header (toggles collapse) */
    user-select: none;
  }
  .chart-card .chart-h .section-h {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .chart-card .chart-h .chevron {
    color: var(--muted);
    font-size: 10px;
    display: inline-block;
    transition: transform 150ms ease;
    width: 10px;
  }
  .chart-card.collapsed .chart-h { margin-bottom: 0; }
  .chart-card.collapsed .chart-h .chevron { transform: rotate(-90deg); }
  .chart-card.collapsed .legend,
  .chart-card.collapsed .chart-svg { display: none; }
  .chart-card .auto-expand-note {
    font-size: 10px; font-weight: 600;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 6px;
  }
  .chart-card.collapsed .auto-expand-note { display: none; }
  .chart-card .legend {
    display: flex; gap: 12px;
    font-size: 11px; color: var(--muted);
  }
  .legend-dot { display: inline-block; width: 8px; height: 2px; vertical-align: 2px; margin-right: 4px; }
  .legend-dot.aggregate { background: var(--ink); }
  .legend-dot.dominant  { background: var(--purple); }
  .chart-svg { width: 100%; height: 140px; }
  .chart-svg .grid    { stroke: var(--border-light); stroke-width: 1; }
  .chart-svg .axis    { stroke: var(--border); stroke-width: 1; }
  .chart-svg .month   { font-family: "DM Sans", sans-serif; font-size: 9px; fill: var(--light); }
  .chart-svg .line-aggregate { fill: none; stroke: var(--ink);    stroke-width: 2; }
  .chart-svg .line-dominant  { fill: none; stroke: var(--purple); stroke-width: 2; stroke-dasharray: none; }

  /* Member SKUs table card */
  .member-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .member-card .card-h {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
    user-select: none;
  }
  .member-card .card-h .section-h {
    margin: 0;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .member-card .card-h .chevron {
    color: var(--muted); font-size: 10px;
    display: inline-block; transition: transform 150ms ease; width: 10px;
  }
  /* Collapsed state — hide everything below the header */
  .member-card.member-collapsed .card-h { border-bottom: none; }
  .member-card.member-collapsed .card-h .chevron { transform: rotate(-90deg); }
  .member-card.member-collapsed .member-table,
  .member-card.member-collapsed .at-scale-note,
  .member-card.member-collapsed .member-search { display: none; }
  .member-card .show-all {
    font-size: 10px; color: var(--blue);
    text-decoration: none; font-weight: 600;
    cursor: pointer;
  }
  .member-card .show-all:hover { text-decoration: underline; }
  /* "Show all N" toggle in the at-scale-note footer. Anchor-styled so it
     sits inline with the summary copy without competing visually with
     the modal's primary actions. */
  .member-card .show-all-btn {
    margin-left: 6px;
    background: transparent; border: 0; padding: 0;
    color: var(--blue);
    font: inherit; font-size: 11px; font-weight: 600;
    cursor: pointer;
  }
  .member-card .show-all-btn:hover { text-decoration: underline; }
  /* Row hide-mechanism for the member-panel Stimulus controller. The
     controller toggles `.row-hidden` based on the current filter query
     + the "Show all" state — it's the single source of truth for
     visibility (server-rendered classes turned into JS bugs whenever
     the two states had to compose). */
  .member-table tr.row-hidden { display: none; }

  /* Filter / search bar above the member table. Only renders for cells
     with >12 members so small cells stay compact. */
  .member-search {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-alt);
  }
  .member-search-row {
    position: relative;
  }
  .member-search-input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 28px 6px 10px;
    font: inherit; font-size: 12px; color: var(--ink);
  }
  .member-search-input:focus {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
    border-color: var(--blue);
  }
  .member-search-clear {
    position: absolute;
    top: 50%; right: 6px;
    transform: translateY(-50%);
    background: transparent; border: 0; cursor: pointer;
    color: var(--light);
    font-size: 14px; line-height: 1;
    padding: 2px 6px;
  }
  .member-search-clear:hover { color: var(--ink); }
  .member-misfit-toggle {
    margin-top: 6px;
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    font: inherit; font-size: 11px; font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
  }
  .member-misfit-toggle:hover {
    border-color: var(--red);
    color: var(--red);
  }
  .member-misfit-toggle.active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }
  /* Scale-mode footnote at the bottom of the member panel */
  .member-card .at-scale-note {
    padding: 8px 14px;
    background: var(--surface-alt);
    border-top: 1px solid var(--border-light);
    font-size: 11px; color: var(--muted);
    line-height: 1.45;
  }
  .member-card .at-scale-note strong { color: var(--ink); font-weight: 700; }
  .member-table { width: 100%; border-collapse: collapse; }
  .member-table th {
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--light);
    padding: 8px 14px; text-align: left;
    border-bottom: 1px solid var(--border-light);
  }
  .member-table th.right { text-align: right; }
  .member-table td {
    padding: 9px 14px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
  }
  .member-table td.right { text-align: right; font-variant-numeric: tabular-nums; }
  .member-table tr:last-child td { border-bottom: none; }
  .member-table tr.dominant td { background: #fdfaff; }
  .member-table tr.dominant td:first-child {
    box-shadow: inset 3px 0 0 var(--purple);
  }
  .member-table tr.isolated { opacity: 0.55; }

  /* Product-row variant (Decision B — adaptive Member rendering) */
  .member-table tr.product-row { cursor: pointer; }
  .member-table tr.product-row td {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
  }
  .member-table tr.product-row td:first-child {
    box-shadow: inset 3px 0 0 var(--blue);
  }
  .member-table tr.product-row .product-name {
    font-weight: 700; color: var(--ink);
    display: flex; align-items: center; gap: 8px;
  }
  .member-table tr.product-row .chevron {
    display: inline-block; width: 12px;
    color: var(--muted); font-size: 11px;
    transform: rotate(0deg); transition: transform 150ms;
    cursor: pointer;
  }
  .member-table tr.product-row.expanded .chevron { transform: rotate(90deg); }
  .member-table tr.product-row .skus-in-cell {
    background: var(--tint-info-bg); color: var(--tint-info-fg);
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px; border-radius: 4px;
  }
  .member-table tr.product-row .product-meta {
    color: var(--muted); font-size: 11px;
    margin-top: 2px;
    margin-left: 20px;
  }
  /* Expanded children of a product row */
  .member-table tr.product-child {
    background: var(--surface);
    display: none;
  }
  .member-table tr.product-row.expanded + tr.product-child,
  .member-table tr.product-child.expanded-show {
    display: table-row;
  }
  .member-table tr.product-child td:first-child { padding-left: 36px; }
  .member-table tr.product-child .child-rule {
    color: var(--light); font-size: 11px;
  }
  .member-table .sku-code {
    font-family: "JetBrains Mono", monospace;
    font-weight: 600;
    display: block;
  }
  .member-table a.sku-code-link {
    color: var(--ink);
    text-decoration: none;
  }
  .member-table a.sku-code-link:hover {
    color: var(--blue);
    text-decoration: underline;
  }
  .member-table .sku-name {
    color: var(--muted); font-size: 11px;
    margin-top: 1px;
  }
  .member-table .icon-btn {
    background: transparent; border: 0; cursor: pointer;
    color: var(--muted); padding: 2px;
    font-size: 14px;
  }
  .member-table .icon-btn:hover { color: var(--ink); }
  .member-table .badge-iso {
    background: var(--tint-over-bg); color: var(--tint-over-fg);
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px; border-radius: 4px;
  }
  .fit-mini {
    font-variant-numeric: tabular-nums;
  }
  .fit-mini.poor { color: var(--red);   font-weight: 600; }
  .fit-mini.marginal { color: var(--amber); font-weight: 600; }
  .fit-mini.good { color: var(--green); font-weight: 600; }

  /* Per-row isolate/include buttons */
  .btn-iso-form { display: inline; margin: 0; padding: 0; }
  .btn-iso {
    display: inline-flex; align-items: center;
    padding: 1px 6px;
    border: 1px solid var(--border-hover);
    border-radius: 4px;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    cursor: pointer;
    background: var(--surface-alt);
    color: var(--muted);
    margin-left: 4px;
    transition: all 0.12s;
  }
  .btn-iso:hover { border-color: var(--ink); color: var(--ink); }
  .btn-iso-exclude:hover { border-color: var(--amber); color: var(--amber); background: var(--tint-low-bg); }
  .btn-iso-undo:hover    { border-color: var(--blue);  color: var(--blue);  background: var(--tint-info-bg); }
  .member-status-cell { white-space: nowrap; }

  /* OV1 — stale panel notice after a per-row Turbo Stream replace */
  .member-panel-stale-notice {
    margin: 6px 14px 0;
    padding: 6px 10px;
    background: var(--tint-info-bg);
    color: var(--tint-info-fg);
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
  }

  /* Sub-cell source badge — shown when the SKU borrows from a narrower
     sub-cell rather than THIS cell's aggregate. */
  .source-tier.is-sub-cell {
    box-shadow: 0 0 0 2px var(--blue);
    font-weight: 800;
    opacity: 0.75;
  }

  /* Anomalous Weeks accordion */
  .anomalies {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .anomalies-h {
    background: var(--surface);
    padding: 10px 14px;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
  }
  .anomalies-h.has-items { background: var(--tint-low-bg); }
  .anomalies-h .titlebox {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--ink); font-weight: 600;
  }
  .anomalies-h .titlebox .scan-meta {
    color: var(--muted); font-weight: 400; font-size: 11px;
  }
  .anomalies-h .caret {
    color: var(--muted);
    display: inline-block;
    transition: transform 150ms ease;
  }
  .anomalies.collapsed .anomalies-h .caret { transform: rotate(-90deg); }
  .anomaly-list { background: var(--surface); }
  .anomalies.collapsed .anomaly-list { display: none; }
  .anomaly-row {
    padding: 10px 14px;
    border-top: 1px solid var(--border-light);
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 12px;
  }
  .anomaly-row .icon { color: var(--amber); flex: none; margin-top: 1px; }
  .anomaly-row .body { flex: 1; }
  .anomaly-row .body .sku-line {
    font-weight: 600; color: var(--ink);
    margin-bottom: 2px;
  }
  .anomaly-row .body .desc {
    font-size: 11px; color: var(--muted);
    line-height: 1.4;
  }
  .anomaly-row .row-actions { display: flex; gap: 4px; flex: none; }
  /* SKU code link in the anomaly row mono header — pick up the same
     blue-on-hover treatment as the member table. */
  .anomaly-row .sku-line a.sku-code-link {
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-mono);
  }
  .anomaly-row .sku-line a.sku-code-link:hover {
    color: var(--blue);
    text-decoration: underline;
  }

  /* Flag-as-event popover — opens inline below the anomaly description
     when buyer clicks "Flag as event". Spans both flex columns so the
     form fields aren't cramped next to the row-actions button. */
  .flag-popover {
    display: none;
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .flag-popover.open { display: block; }
  .flag-form-grid {
    display: flex; flex-direction: column; gap: 8px;
  }
  .flag-form-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted);
    margin: 4px 0 0;
  }
  .flag-form-label:first-child { margin-top: 0; }
  .flag-form-select,
  .flag-form-input {
    appearance: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 10px;
    font: inherit; font-size: 12px; color: var(--ink);
    width: 100%;
  }
  .flag-form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a8a8a' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
  }
  .flag-form-select:hover,
  .flag-form-input:hover { border-color: var(--border-hover); }
  .flag-form-select:focus,
  .flag-form-input:focus {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
  }
  .flag-form-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 6px;
  }

  /* Onboarding Sweep banner overlay */
  .sweep-banner-wrap {
    display: none;
    position: relative; z-index: 5;
    margin-bottom: 14px;
  }
  body.sweep-mode .sweep-banner-wrap { display: block; }
  .sweep-banner {
    background: linear-gradient(135deg, #fff5f3 0%, #ffffff 60%);
    border: 2px solid var(--accent);
    border-radius: 14px;
    padding: 22px 26px;
    display: flex; align-items: center; gap: 26px;
  }
  .sweep-banner .copy { flex: 1; }
  .sweep-banner h2 {
    margin: 0 0 6px;
    font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
    color: var(--ink);
  }
  .sweep-banner .lead {
    color: var(--ink); font-size: 14px; line-height: 1.5;
    margin-bottom: 4px;
  }
  .sweep-banner .lead .em { font-weight: 700; color: var(--green); }
  .sweep-banner .sub {
    color: var(--muted); font-size: 13px;
  }
  .sweep-banner .actions {
    display: flex; flex-direction: column; gap: 8px;
    flex: none;
  }

  /* Sweep mode active state — progress meter at top of cell drawer */
  .sweep-progress {
    display: none;
    background: var(--ink);
    color: white;
    padding: 10px 14px;
    margin: 0;
    font-size: 12px; font-weight: 600;
    align-items: center; justify-content: space-between;
  }
  body.sweep-mode .sweep-progress { display: flex; }
  .sweep-progress .progress-text { letter-spacing: -0.01em; }
  .sweep-progress .progress-text .impact { color: #4ade80; margin-left: 8px; }
  .sweep-progress .bar-wrap {
    flex: 1; max-width: 200px;
    margin: 0 16px;
    height: 4px; background: rgba(255,255,255,0.18);
    border-radius: 999px; overflow: hidden;
  }
  .sweep-progress .bar { height: 100%; background: var(--green); width: 40%; transition: width 400ms; }
  .sweep-progress .skip-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.25);
    color: white; padding: 4px 10px; font: inherit; font-size: 11px; font-weight: 600;
    border-radius: 6px; cursor: pointer;
  }

  /* Audit tab */
  .audit-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  .audit-table { width: 100%; border-collapse: collapse; }
  .audit-table th {
    background: var(--surface-alt);
    color: var(--light);
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
  }
  .audit-table th.right { text-align: right; }
  .audit-table td {
    padding: 13px 16px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
  }
  .audit-table td.right { text-align: right; }
  .audit-table tr:last-child td { border-bottom: none; }
  .audit-table .actor {
    display: flex; align-items: center; gap: 8px;
  }
  .audit-table .actor .avatar {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
  }
  .audit-table .actor .avatar.ai { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: white; }
  .audit-table .actor .avatar.user { background: var(--accent); color: white; }
  .audit-table .actor .name { color: var(--ink); font-weight: 600; font-size: 12px; }
  .audit-table .actor .meta { color: var(--muted); font-size: 11px; }
  .audit-table .impact {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .audit-table .impact.up { color: var(--green); }
  .audit-table .impact.neu { color: var(--muted); }
  .audit-table .undo-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 5px 10px;
    border-radius: 6px;
    font: inherit; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    cursor: pointer;
  }
  .audit-table .undo-btn:hover { color: var(--ink); border-color: var(--ink); }
  .audit-table .undo-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

  /* Hidden by default — toggled via tab nav */
  [data-tab-content] { display: none; }
  [data-tab-content].active { display: block; }

  /* ────────── Cold-start tab specific styles ────────── */
  .cs-explainer {
    background: var(--tint-info-bg);
    border: 1px solid #cfddee;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #2b3a4e;
    line-height: 1.5;
  }
  .cs-explainer strong { color: var(--ink); font-weight: 700; }
  .cs-explainer .cs-explainer-icon {
    color: var(--blue);
    font-size: 14px;
    margin-right: 4px;
  }

  /* Data observed progress (cold-start cells) */
  .data-progress {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 110px;
  }
  .data-progress .meta {
    font-size: 11px; color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .data-progress .meta strong { color: var(--ink); font-weight: 700; }
  .data-progress .bar-wrap {
    width: 100px; height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
  }
  .data-progress .bar {
    height: 100%;
    background: var(--amber);
    border-radius: 2px;
    transition: width 0.3s ease;
  }
  .data-progress .bar.early { background: var(--red); }
  .data-progress .bar.almost { background: var(--green); }

  /* Proxy source badge */
  .proxy-badge {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px; font-weight: 600;
    background: var(--surface-alt);
    color: var(--ink);
    border: 1px solid var(--border);
    white-space: nowrap;
  }
  .proxy-badge.muted {
    color: var(--muted);
    border-color: var(--border-light);
    background: transparent;
  }
  .proxy-badge .src {
    font-size: 9px; font-weight: 700;
    text-transform: uppercase;
    color: var(--light);
    margin-right: 6px;
    letter-spacing: 0.04em;
  }

  /* AI suggested proxy column */
  .ai-suggested {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--purple);
    font-size: 12px; font-weight: 500;
    line-height: 1.4;
  }
  .ai-suggested::before {
    content: "✦";
    color: var(--purple-light);
    font-size: 11px;
  }
  .ai-suggested.neutral { color: var(--muted); }
  .ai-suggested.neutral::before { color: var(--light); }

  /* Compact action button in tables */
  .action-mini-btn {
    background: var(--surface);
    border: 1px solid var(--border-hover);
    color: #555;
    padding: 5px 12px;
    border-radius: 6px;
    font: inherit; font-size: 11px; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .action-mini-btn:hover { border-color: var(--ink); color: var(--ink); }
  .action-mini-btn.action-flat { color: var(--stone); border-color: var(--border); }

  /* ────────── Browse SKUs tab specific styles ────────── */
  /* SKU pill — matches .sku-pill / .sku-pill-link from app/assets/stylesheets/replenishment_v2.css */
  .sku-cell {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .sku-pill {
    display: inline-flex;
    align-items: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    padding: 3px 7px;
    border-radius: 5px;
    letter-spacing: .2px;
    white-space: nowrap;
    transition: all .15s;
  }
  .sku-pill:hover {
    background: #ece9e3;
    border-color: var(--border-hover);
  }
  .sku-pill-link {
    cursor: pointer;
    text-decoration: none;
    font-family: "JetBrains Mono", monospace;
  }
  .sku-pill-link:hover {
    color: var(--ink);
    text-decoration: none;
  }
  .sku-view-link {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--light);
    border-radius: 5px;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.15s;
  }
  .sku-view-link:hover {
    background: var(--surface-alt);
    color: var(--ink);
  }
  /* Source tier badges */
  .source-tier {
    display: inline-flex; align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .source-tier .tier-num { font-weight: 800; margin-right: 3px; }
  .source-tier.tier-0  { background: var(--tint-healthy-bg); color: var(--tint-healthy-fg); }
  .source-tier.tier-05 { background: var(--tint-info-bg);    color: var(--tint-info-fg); }
  .source-tier.tier-3  { background: var(--tint-over-bg);    color: var(--tint-over-fg); }
  .source-tier.tier-1  { background: var(--tint-low-bg);     color: var(--tint-low-fg); }
  .source-tier.tier-2  { background: var(--tint-low-bg);     color: var(--tint-low-fg); }
  .source-tier.tier-nil { background: var(--tint-dead-bg);   color: var(--tint-dead-fg); }
  /* Highlight the source badge when the SKU's dispatcher resolved to
     `category_aggregate` and that aggregate IS this cell — those are
     the SKUs a buyer's cell-level action will actually impact. */
  .source-tier.is-this-cell {
    box-shadow: 0 0 0 2px var(--purple);
    font-weight: 800;
  }
  /* Per-row override pill stacked next to the source badge when the
     buyer pinned the SKU to a specific tier. */
  .source-override-pill {
    display: inline-flex; align-items: center;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    background: var(--purple-tint);
    color: var(--purple);
  }
  /* Row-level highlight when the SKU is "using this cell" — soft purple
     tint across the row so the buyer can scan members and immediately
     see which ones a cell-level action protects. */
  .member-table tr.using-this-cell td {
    background: var(--purple-tint);
  }
  .member-table tr.using-this-cell td:first-child {
    box-shadow: inset 3px 0 0 var(--purple);
  }
  .member-table tr.using-this-cell.dominant td {
    background: linear-gradient(to right, var(--purple-tint), var(--tint-info-bg));
  }

  /* ABC tier badges */
  .abc-tier {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 10px; font-weight: 800;
  }
  .abc-tier.a { background: var(--tint-healthy-bg); color: var(--tint-healthy-fg); }
  .abc-tier.b { background: var(--tint-low-bg);     color: var(--tint-low-fg); }
  .abc-tier.c { background: var(--tint-dead-bg);    color: var(--tint-dead-fg); }

  /* Cell breadcrumb link (in browse) */
  .cell-link {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px dashed var(--border-hover);
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
  }
  .cell-link:hover { color: var(--blue); border-color: var(--blue); }
  .cell-link-meta {
    font-size: 11px; color: var(--muted);
    margin-top: 2px;
  }

  /* Toast for keyboard demo */
  .toast {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--ink); color: white;
    padding: 10px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 500;
    opacity: 0; transition: opacity 200ms, transform 200ms;
    transform: translateY(8px);
    pointer-events: none;
    z-index: 100;
  }
  .toast.show { opacity: 1; transform: translateY(0); }

  /* Help overlay */
  .help-overlay {
    position: fixed; inset: 0;
    background: rgba(26,26,26,0.55);
    display: none; align-items: center; justify-content: center;
    z-index: 200;
  }
  .help-overlay.show { display: flex; }
  .help-card {
    background: var(--surface); border-radius: 14px;
    padding: 28px 32px;
    max-width: 480px; width: 90%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.18);
  }
  .help-card h3 {
    font-size: 16px; font-weight: 700;
    margin: 0 0 16px;
  }
  .help-card .help-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
  }
  .help-card .help-row:last-child { border-bottom: none; }
  .help-card .help-keys { display: flex; gap: 4px; }