/* ta-print-review-v1.3.6.css
   ════════════════════════════════════════════════════════════════
   INBXIFY T-A — Allocator issue review (Pages + List views)
   v1.2.0 — first live pass (28 Sept): header stacks left (back
   link above the title, filename line under it), the segmented
   Pages|List fill radius matches its track, and the active card
   wears the gold ring that the current page's thumbnail also
   wears, so the pair reads at a glance.
   v1.1.0 — one header, one promise, one progress (28 Sept ruling):
   the crumb styles go unused (crumb deleted), the back link moves
   into the title row, the cta group gains its "N items go to the
   board" line with the see-them link, and the reading-progress bar
   restyles for its new home in the sub bar beside "Next page that
   needs a look".
   v1.3.0 — role-based placement (Option D): the back link sits
   small above the header in the page's own beige; the header is
   identity only, title first and flush left (STANDING RULE — Back
   never in pole position); Pages|List moves into the toolbar on
   the content's edge; and the commit bar — teal band, promise
   line, gold Add button — sticks at the bottom, the end of the
   path.
   v1.2.1 — the Customer suggest listbox (.tpr-sug), fed from the
   page's own .customers-wrapper CMS list.
   v1.3.3 — soft salmon: the bar's band is the salmon tint over
   cream (set inline in the JS), teal text, salmon-ink see-them.
   v1.3.2 — the commit bar lives on <body> (outside the wrapper
   and its !important wildcards — the ix-progress pattern); its
   geometry and background are inline-important from the JS, so
   this file only styles its contents.
   v1.3.5 - the checked wash and the LOOK dot get their colors
   INLINE from the JS (the page's background wildcards forced the
   wash opaque white - a white card over a perfectly good image);
   these rules keep only geometry.
   v1.3.6 - LOOK is salmon (29 Sept): the thumb label goes
   salmon-ink; the dot's salmon is inline in the JS.
   Companion to ta-print-review-v1.3.8.js. Load AFTER ix-tokens,
   ix-buttons and ix-form-controls: this file only lays out the
   surface. Every control is an ix-* primitive and keeps its own
   styling, including the --changed border and the ix-revert link.

   Design of record: the accepted review mockup (27 Sept), expressed
   in ix tokens. Where the mockup wrote a literal colour, the token
   that owns that colour is used instead.

   Green ("checked") tints are derived from --ix-ok (#1F7A5C) as
   rgba fills, because the token set has no ok-soft tint. If one is
   added to ix-tokens later, swap these three rgba() for it.

   Tables never wrap a cell: fixed or minmax'd columns, ellipsis on
   the flexible ones.
   ════════════════════════════════════════════════════════════════ */

/* ── Root ─────────────────────────────────────────────────── */

.tpr-root {
  font-family: var(--ix-font-body, 'DM Sans', system-ui, sans-serif);
  color: var(--ix-text-dark, #1E2A3A);
  background: var(--ix-cream, #FAF9F5);
  border: 1px solid var(--ix-border, #E4E0D4);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}
.tpr-root[hidden] { display: none !important; }

/* ── Header ───────────────────────────────────────────────── */

.tpr-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--ix-border-soft, #EEE9DC);
  background: var(--ix-surface, #FFFFFF);
}
.tpr-head-sp { flex: 1 1 auto; }
.tpr-head .tpr-meta { overflow: visible; text-overflow: clip; white-space: nowrap; }
/* v1.3.0 — unused since the header holds identity only; kept for grep. */
.tpr-head-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }

.tpr-crumb {
  font-family: var(--ix-font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ix-text-mid, #5A6478);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tpr-crumb .ix-revert { letter-spacing: normal; text-transform: none; }

/* v1.3.0 — the back link lives ABOVE the header, in the beige,
   small. The title owns the header's pole position, always. */
.tpr-backrow {
  display: flex;
  padding: 10px 24px 8px;
  background: transparent;
}
.tpr-backrow .ix-revert { letter-spacing: normal; text-transform: none; white-space: nowrap; font-size: 12.5px; }
.tpr-title {
  margin: 0;
  font-family: var(--ix-font-display, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: 28px;
  color: var(--ix-teal, #1A3A3A);
  white-space: nowrap;
}
.tpr-meta {
  font-size: 13px;
  color: var(--ix-text-mid, #5A6478);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpr-meta b { color: var(--ix-text-dark, #1E2A3A); font-weight: 500; }
.tpr-head [data-tr-save] { color: var(--ix-ok, #1F7A5C); }

.tpr-progress { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.tpr-sub .tpr-progress { margin-top: 0; flex: none; }
.tpr-sub .tpr-seg { flex: none; }
.tpr-progress-bar {
  width: 240px; height: 6px; border-radius: 3px;
  background: var(--ix-cream-deep, #F1EDE2);
  overflow: hidden; flex: none;
}
.tpr-progress-bar i {
  display: block; height: 6px;
  background: var(--ix-teal, #1A3A3A);
  transition: width .25s ease;
}
.tpr-progress-t, .tpr-progress-look {
  font-family: var(--ix-font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 11.5px;
  white-space: nowrap;
}
.tpr-progress-t   { color: var(--ix-teal, #1A3A3A); }
.tpr-progress-look { color: var(--ix-gold-ink, #8A6E2E); }

/* Pages | List switch: two pills in a bordered group. */
.tpr-seg {
  display: flex;
  border: 1px solid var(--ix-teal, #1A3A3A);
  border-radius: 999px;   /* v1.2.0 — the fill is a pill, so the track is too */
  padding: 2px;
  overflow: hidden;
  flex: none;
}
.tpr-seg .ix-btn { border-radius: 999px !important; border: 0 !important; }

.tpr-head-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }

/* v1.3.2 — the commit bar's CONTENTS. The bar itself (geometry,
   salmon background) is inline-important from the JS and lives on
   <body>, outside the wrapper's wildcards. Salmon band, teal text:
   4.16:1, above the platform's gold-button precedent. */
.tpr-commit { font-family: var(--ix-font-body, 'DM Sans', system-ui, sans-serif); }
.tpr-commit-sp { flex: 1 1 auto; }
.tpr-commit *:not(.ix-btn) { background: transparent !important; }
.tpr-commit .tpr-cta-line,
.tpr-commit .tpr-cta-line b { color: var(--ix-teal, #1A3A3A) !important; font-size: 13.5px; }
.tpr-commit .tpr-cta-line b { font-weight: 700; }
.tpr-commit .tpr-seethem { color: var(--ix-salmon-ink, #C0432B) !important; background: none !important; font-weight: 600; }
.tpr-commit .tpr-seethem:hover { color: var(--ix-teal, #1A3A3A) !important; }
.tpr-commit .tpr-head-cta-sub { color: var(--ix-teal, #1A3A3A) !important; opacity: .78; }
/* The Add button stays the ix gold primary: gold-on-salmon reads
   cleanly and needs no fight with ix-buttons. */
/* The root reserves the bar's height so no card hides behind it. */
.tpr-root { padding-bottom: 76px; }
.tpr-cta-line { font-size: 13px; color: var(--ix-text-dark, #1E2A3A); white-space: nowrap; }
.tpr-cta-line b { color: var(--ix-teal, #1A3A3A); font-weight: 600; }
.tpr-seethem {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ix-gold-ink, #8A6E2E);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tpr-seethem:hover { color: var(--ix-teal, #1A3A3A); }
.tpr-head-cta-sub { font-size: 11.5px; color: var(--ix-text-mid, #5A6478); white-space: nowrap; }

/* Draft-conflict banner sits under the header when it appears. */
.tpr-conflict {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 24px;
  background: var(--ix-gold-glow, rgba(196,163,90,.12));
  border-bottom: 1px solid var(--ix-gold, #C4A35A);
  font-size: 13px;
  color: var(--ix-text-dark, #1E2A3A);
}
.tpr-conflict[hidden] { display: none !important; }

/* ── Totals + next-look row ───────────────────────────────── */

.tpr-sub {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 24px;
  border-bottom: 1px solid var(--ix-border-soft, #EEE9DC);
  background: var(--ix-cream, #FAF9F5);
}
/* .tpr-totals — unused since v1.1.0 (the census line was deleted). */
.tpr-sub-sp { flex: 1 1 auto; }
.tpr-show { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ix-text-mid, #5A6478); }

/* ── Body ─────────────────────────────────────────────────── */

.tpr-body {
  display: flex;
  min-height: 540px;
  height: calc(100vh - 250px);
}
.tpr-body[hidden] { display: none !important; }

/* ── Pages view · thumbnails ──────────────────────────────── */

.tpr-thumbs {
  width: 224px;
  flex: none;
  overflow-y: auto;
  border-right: 1px solid var(--ix-border-soft, #EEE9DC);
  padding: 14px 12px;
  box-sizing: border-box;
  background: var(--ix-cream-deep, #F1EDE2);
}
.tpr-thumbs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
}
.tpr-th {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 6px;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
}
.tpr-th--cur {
  background: var(--ix-surface, #FFFFFF);
  border-color: var(--ix-gold, #C4A35A);
  box-shadow: 0 0 0 3px var(--ix-gold-glow, rgba(196,163,90,.18));   /* v1.2.0 — pairs with .tpr-card--active */
}
.tpr-th-img {
  position: relative;
  width: 88px;
  border: 1px solid var(--ix-border-input, #DDD9C8);
  background: var(--ix-surface, #FFFFFF);
  overflow: hidden;
}
.tpr-th-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Checked page: unmistakable — green wash and a tick medal. */
.tpr-th-done {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* v1.3.5 - the wash color lives inline in the JS, cascade-proof */
}
.tpr-th-done i {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ix-ok, #1F7A5C);
  color: var(--ix-text-invert, #FFFFFF);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 19px; font-weight: 700;
}
/* Needs a look: gold dot, top right. */
.tpr-th-look {
  position: absolute; top: 5px; right: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ix-gold, #C4A35A);
  border: 2px solid var(--ix-surface, #FFFFFF);
}
.tpr-th-lab {
  display: flex; align-items: center; justify-content: space-between;
  width: 88px;
  font-family: var(--ix-font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--ix-text-dark, #1E2A3A);
}
.tpr-th-mark { font-weight: 600; font-size: 9.5px; }
.tpr-th-mark--done { color: var(--ix-ok, #1F7A5C); }
.tpr-th-mark--look { color: var(--ix-salmon-ink, #C0432B); }

/* ── Pages view · the page ────────────────────────────────── */

.tpr-page {
  width: clamp(400px, 40%, 600px);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  background: var(--ix-canvas, #E8E3D6);
  border-right: 1px solid var(--ix-border-soft, #EEE9DC);
  overflow-y: auto;
}
.tpr-page-nav { display: flex; align-items: center; gap: 14px; flex: none; }
.tpr-page-n {
  font-family: var(--ix-font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 12px;
  color: var(--ix-teal, #1A3A3A);
  white-space: nowrap;
}
.tpr-page-checked {
  width: calc(100% - 80px);
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--ix-ok, #1F7A5C);
  color: var(--ix-text-invert, #FFFFFF);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  flex: none;
}
.tpr-page-img {
  width: calc(100% - 80px);
  border: 0;
  padding: 0;
  background: var(--ix-surface, #FFFFFF);
  box-shadow: 0 6px 24px var(--ix-teal-soft, rgba(26,58,58,.10));
  cursor: zoom-in;
  flex: none;
}
.tpr-page-img img { display: block; width: 100%; }
.tpr-page-empty {
  width: calc(100% - 80px);
  aspect-ratio: 10 / 13;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  box-sizing: border-box; padding: 24px;
  background: var(--ix-surface, #FFFFFF);
  color: var(--ix-text-mid, #5A6478);
  font-size: 13px;
}
.tpr-page-hint { font-size: 11.5px; color: var(--ix-text-mid, #5A6478); flex: none; }

/* ── Pages view · found on this page ──────────────────────── */

.tpr-cards {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 16px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tpr-cards-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(31, 122, 92, 0.12);
  border: 1px solid var(--ix-ok, #1F7A5C);
  color: var(--ix-teal, #1A3A3A);
  font-size: 13px;
}
.tpr-cards-banner i {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--ix-ok, #1F7A5C); color: var(--ix-text-invert, #FFFFFF);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 13px; font-weight: 700;
}
.tpr-cards-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tpr-cards-h2 {
  margin: 0;
  font-family: var(--ix-font-display, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: 21px;
  color: var(--ix-teal, #1A3A3A);
}
.tpr-cards-sum { font-size: 12px; color: var(--ix-text-mid, #5A6478); white-space: nowrap; }
.tpr-none {
  padding: 16px;
  border: 1px dashed var(--ix-border-input, #DDD9C8);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ix-text-mid, #5A6478);
}

/* A card. Structural change (type, join, added, excluded) turns the
   whole border gold; field edits carry their own --changed borders. */
.tpr-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--ix-surface, #FFFFFF);
  border: 1px solid var(--ix-border-soft, #EEE9DC);
}
/* v1.2.0 — the card being worked on. The same gold ring the current
   thumbnail wears, so card and page read as a pair. Distinct from
   --changed, which is a per-FIELD promise about what Save touches. */
.tpr-card--active {
  border-color: var(--ix-gold, #C4A35A);
  box-shadow: 0 0 0 3px var(--ix-gold-glow, rgba(196,163,90,.18));
}
.tpr-card--changed { border: 2px solid var(--ix-gold, #C4A35A); padding: 13px 15px; }
.tpr-card--off { opacity: 0.55; }

.tpr-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tpr-kind {
  font-family: var(--ix-font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ix-text-mid, #5A6478);
  white-space: nowrap;
}
.tpr-flag {
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--ix-gold, #C4A35A);
  color: var(--ix-teal, #1A3A3A);
  font-size: 11px;
  white-space: nowrap;
  cursor: default;
}
.tpr-note { font-size: 11px; color: var(--ix-gold-ink, #8A6E2E); white-space: nowrap; }
.tpr-card-sp { flex: 1 1 auto; }

.tpr-lab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--ix-text-mid, #5A6478);
  min-width: 0;
}
.tpr-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tpr-f { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tpr-f > .ix-picker-input { flex: 1 1 auto; min-width: 0; }
.tpr-f > .ix-revert[hidden] { display: none !important; }
.tpr-f--pg > .ix-picker-input { flex: 0 0 64px; }

.tpr-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpr-adsize { font-size: 12px; color: var(--ix-text-mid, #5A6478); margin-left: auto; white-space: nowrap; }

/* Join offer — only where the parser saw evidence, reasons shown. */
.tpr-join {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--ix-gold-glow, rgba(196,163,90,.12));
  border: 1px solid var(--ix-gold, #C4A35A);
}
.tpr-join-t { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.tpr-join-q { font-size: 13px; font-weight: 600; color: var(--ix-text-dark, #1E2A3A); }
.tpr-join-why { font-size: 12px; color: var(--ix-text-mid, #5A6478); }

/* Items found on the row (events / listings). */
.tpr-items {
  border: 1px solid var(--ix-border-soft, #EEE9DC);
  border-radius: 6px;
  background: var(--ix-cream, #FAF9F5);
  overflow: hidden;
}
.tpr-items-head {
  display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ix-border-soft, #EEE9DC);
  font-size: 12px;
  color: var(--ix-teal, #1A3A3A);
  font-weight: 600;
}
.tpr-items-head span { font-weight: 400; color: var(--ix-text-mid, #5A6478); }
.tpr-items-cols {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--ix-border-soft, #EEE9DC);
  font-family: var(--ix-font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--ix-text-mid, #5A6478);
}
.tpr-it {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ix-border-soft, #EEE9DC);
  font-size: 12.5px;
  cursor: pointer;
}
.tpr-it:last-child { border-bottom: 0; }
.tpr-it--off { opacity: 0.45; }
.tpr-it input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; }
.tpr-it-main { flex: 1.3 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpr-it-mid  { flex: 1.2 1 0; min-width: 0; color: var(--ix-text-mid, #5A6478); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpr-it-right{ flex: 1 1 0; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpr-it-will { flex: none; min-width: 68px; text-align: right; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tpr-it-will--on  { color: var(--ix-ok, #1F7A5C); }
.tpr-it-will--off { color: var(--ix-text-light, #6B7280); }
.tpr-it .tpr-flag { flex: none; }
.tpr-it-dim { color: var(--ix-text-mid, #5A6478); }

.tpr-x-err {
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--ix-salmon-ghost, rgba(236,114,89,.07));
  border: 1px solid var(--ix-salmon, #EC7259);
  font-size: 12.5px;
  color: var(--ix-text-dark, #1E2A3A);
}
.tpr-x-dim { font-size: 12px; color: var(--ix-text-mid, #5A6478); }

.tpr-add { align-self: flex-start; }

.tpr-checkrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--ix-border-soft, #EEE9DC);
}
.tpr-checkrow-hint { font-size: 12px; color: var(--ix-text-mid, #5A6478); }
/* The button's checked state: green bed, still a button. */
.ix-btn.tpr-checkbtn--on {
  background: rgba(31, 122, 92, 0.14) !important;
  color: var(--ix-ok, #1F7A5C) !important;
  border: 1px solid var(--ix-ok, #1F7A5C) !important;
  box-shadow: none !important;
}

/* ── List view ────────────────────────────────────────────── */

.tpr-list {
  flex-direction: column;
}
.tpr-bulk {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  background: var(--ix-teal, #1A3A3A);
  color: var(--ix-text-invert, #FFFFFF);
  font-size: 13px;
  flex: none;
  position: relative;
}
.tpr-bulk[hidden] { display: none !important; }
.tpr-bulk b { font-weight: 600; white-space: nowrap; }
.tpr-bulk-hint { font-size: 12px; color: var(--ix-rail-text, #B9C2C2); margin-left: auto; white-space: nowrap; }
.tpr-bulk .ix-revert { color: var(--ix-text-invert, #FFFFFF) !important; }

/* Bulk buttons live on the teal bar: gold outline, light text. */
.tpr-bulk-btn {
  padding: 6px 12px;
  border: 1px solid var(--ix-gold, #C4A35A);
  border-radius: 4px;
  background: transparent;
  color: var(--ix-text-invert, #FFFFFF);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.tpr-bulk-btn--go { background: var(--ix-gold, #C4A35A); color: var(--ix-teal, #1A3A3A); font-weight: 600; }
.tpr-bulk-btn:disabled { color: var(--ix-rail-text, #B9C2C2); cursor: default; }

.tpr-menu {
  position: absolute;
  top: calc(100% + 4px);
  z-index: var(--ix-z-dropdown, 5000);
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 6px;
  border-radius: 8px;
  background: var(--ix-surface, #FFFFFF);
  border: 1px solid var(--ix-border, #E4E0D4);
  box-shadow: var(--ix-shadow-lg, 0 12px 32px rgba(26,58,58,.16));
}
.tpr-menu button {
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--ix-text-dark, #1E2A3A);
  cursor: pointer;
}
.tpr-menu button:hover { background: var(--ix-cream-deep, #F1EDE2); }
.tpr-menu-row { display: flex; gap: 6px; padding: 4px; }
.tpr-menu-row .ix-picker-input { flex: 1 1 auto; min-width: 120px; }

.tpr-list-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 24px 24px;
}
.tpr-list-grid {
  display: grid;
  grid-template-columns: 34px 64px minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr) 44px 150px 76px;
  gap: 0 12px;
  align-items: center;
}
.tpr-list-headrow {
  padding: 10px 0;
  border-bottom: 2px solid var(--ix-teal, #1A3A3A);
  font-family: var(--ix-font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--ix-text-mid, #5A6478);
}
.tpr-lr { border-bottom: 1px solid var(--ix-border-soft, #EEE9DC); }
.tpr-lr--sel { background: var(--ix-gold-glow, rgba(196,163,90,.12)); }
.tpr-lr--changed { box-shadow: inset 3px 0 0 var(--ix-gold, #C4A35A); }
.tpr-lr--off { opacity: 0.55; }
.tpr-lr-grid { padding: 9px 0; font-size: 13.5px; }
.tpr-lr-grid input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.tpr-lr-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpr-lr-title > b {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpr-lr-cell { color: var(--ix-text-mid, #5A6478); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpr-lr-img { font-family: var(--ix-font-mono, 'DM Mono', ui-monospace, monospace); font-size: 12px; }
.tpr-lr-type { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpr-lr-items { margin: 0 0 10px 110px; }
.tpr-lr .tpr-items { background: var(--ix-cream, #FAF9F5); }
.tpr-pg.tpr-pg { /* page-number link, both views */
  border: 0; background: none; padding: 0;
  font-family: var(--ix-font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 12px;
  color: var(--ix-teal, #1A3A3A);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

/* ── Write overlay (create run) ───────────────────────────── */

.tpr-write-modal { max-width: 620px !important; }
.tpr-prog { display: flex; align-items: center; gap: 12px; }
.tpr-bar {
  flex: 1 1 auto; height: 8px; border-radius: 4px;
  background: var(--ix-cream-deep, #F1EDE2);
  overflow: hidden;
}
.tpr-bar i {
  display: block; height: 8px; width: 0;
  background: linear-gradient(90deg, var(--ix-gold, #C4A35A), var(--ix-gold-bright, #E8C172));
  transition: width .3s ease;
}
.tpr-prog-t {
  font-family: var(--ix-font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 12px;
  color: var(--ix-text-dark, #1E2A3A);
  white-space: nowrap;
}
.tpr-write-hint { margin: 10px 0 0; font-size: 12px; color: var(--ix-text-mid, #5A6478); }
.tpr-write-warn { margin-top: 12px; }

/* ── v1.2.1 · Customer suggestions ───────────────────────────
   Fixed-positioned under the focused input; any scroll closes it,
   so it can never drift from its input. */
.tpr-sug {
  position: fixed;
  z-index: 100001;              /* above the write overlay's modal */
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: var(--ix-surface, #FFFFFF);
  border: 1px solid var(--ix-border-soft, #EEE9DC);
  border-radius: 8px;
  box-shadow: var(--ix-shadow-lg, 0 12px 32px rgba(20, 48, 47, .18));
}
.tpr-sug-o {
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  font-family: var(--ix-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 13px;
  color: var(--ix-text-dark, #1E2A3A);
  cursor: pointer;
  white-space: nowrap;
}
.tpr-sug-o:hover, .tpr-sug-o--cur {
  background: var(--ix-gold-glow, rgba(196,163,90,.14));
  color: var(--ix-teal, #1A3A3A);
}