/* ============================================
   PRIMOS Samples Tab
   Ported from the v3 prototype (docs/specs/2026-09-18-samples-tab-design.md,
   "UI — the Samples tab"). EVERY selector is scoped under #tab-samples — the
   Pillow Center precedent: unscoped globals here break index.html elsewhere.
   Layout responds to the width of the tab's own container, not the viewport.
   ============================================ */

#tab-samples {
  container-type: inline-size;
  /* Local aliases so the rules below read like the prototype. */
  --sm-tint: #fdf2f4;
  --sm-line: var(--color-gray-200);
  --sm-ink: var(--color-header-bg);
  --sm-muted: var(--color-gray-500);
}

/* Several .sm-* rules set display:flex, which outranks the UA sheet's
   [hidden] {display:none}; every hidden toggle in samples.js relies on this. */
#tab-samples [hidden] { display: none !important; }

#tab-samples .sm-root { padding-bottom: 20px; }
#tab-samples .sm-root.sm-bottombar-open { padding-bottom: 100px; }

#tab-samples :focus-visible { outline: 3px solid rgba(139, 21, 56, .35); outline-offset: 2px; }

/* ── Buttons (mirrors components.css so the tab works at every width) ───── */
#tab-samples .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; font-size: var(--font-size-base); font-weight: 500;
  border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer;
  transition: all var(--transition-normal); text-decoration: none; min-height: 40px;
}
#tab-samples .btn:disabled { opacity: .5; cursor: not-allowed; }
#tab-samples .btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
#tab-samples .btn-primary:hover:not(:disabled) { background: #6d102c; border-color: #6d102c; }
#tab-samples .btn-secondary { background: #fff; color: #333; border-color: #ddd; }
#tab-samples .btn-secondary:hover:not(:disabled) { background: var(--color-gray-100); border-color: #ccc; }
#tab-samples .btn-danger-outline { background: #fff; color: var(--color-danger); border-color: var(--color-danger); }
#tab-samples .btn-danger-outline:hover:not(:disabled) { background: var(--color-danger-light); }
#tab-samples .btn-sm { padding: 6px 12px; font-size: var(--font-size-sm); min-height: 32px; }
#tab-samples .btn-block { width: 100%; }
#tab-samples .sm-link-btn {
  background: none; border: none; color: var(--color-primary); cursor: pointer;
  padding: 0; font-weight: 500; text-decoration: underline; font-size: inherit;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
#tab-samples .status-badge {
  display: inline-block; padding: 4px 10px; border-radius: 20px;
  font-size: var(--font-size-sm); font-weight: 500; white-space: nowrap;
}
#tab-samples .status-draft { background: #e2e3e5; color: #383d41; }
#tab-samples .status-submitted { background: var(--color-info-light); color: var(--color-info-dark); }
#tab-samples .status-in_fulcrum { background: var(--color-warning-light); color: var(--color-warning-dark); }
#tab-samples .status-shipped { background: var(--color-success-light); color: var(--color-success-dark); }
#tab-samples .status-cancelled { background: var(--color-danger-light); color: var(--color-danger-dark); }
#tab-samples .sm-hot-badge {
  display: inline-block; background: var(--color-danger); color: #fff; font-size: 10px;
  font-weight: 700; letter-spacing: .5px; padding: 2px 6px; border-radius: var(--radius-sm);
  margin-left: 6px; vertical-align: 1px;
}

/* ── List view ──────────────────────────────────────────────────────────── */
#tab-samples .sm-list-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px; flex-wrap: wrap;
}
#tab-samples .sm-list-header h1 { font-size: 22px; color: var(--sm-ink); margin: 0; }
#tab-samples .sm-list-header .sub { color: #666; font-size: 13px; margin-top: 4px; }
#tab-samples .sm-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
#tab-samples .sm-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
#tab-samples .sm-pill {
  border: 1px solid #ddd; background: #fff; color: #555; padding: 6px 12px;
  border-radius: 20px; font-size: var(--font-size-sm); cursor: pointer; transition: all var(--transition-fast);
}
#tab-samples .sm-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
#tab-samples .sm-pill.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
#tab-samples .sm-search {
  flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid #ddd; border-radius: var(--radius-md);
}
#tab-samples .sm-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 21, 56, .1); }
#tab-samples .sm-card { background: #fff; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); overflow: hidden; }
#tab-samples .sm-table-wrap { overflow-x: auto; }
#tab-samples table.sm-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 980px; }
#tab-samples .sm-table th {
  text-align: left; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .5px;
  color: #666; padding: 12px 14px; border-bottom: 1px solid #eee; background: #fafafa; white-space: nowrap;
}
#tab-samples .sm-table td { padding: 12px 14px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
#tab-samples .sm-table tbody tr { cursor: pointer; transition: background var(--transition-fast); }
#tab-samples .sm-table tbody tr:hover { background: var(--sm-tint); }
#tab-samples .sm-num { font-weight: 600; color: var(--color-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
#tab-samples .sm-muted { color: #777; font-size: var(--font-size-sm); }
#tab-samples .sm-ext { color: var(--color-primary); text-decoration: none; font-size: var(--font-size-sm); white-space: nowrap; }
#tab-samples .sm-ext:hover { text-decoration: underline; }
#tab-samples .sm-ext.dim { color: #aaa; }
#tab-samples .sm-cards { display: none; }
#tab-samples .sm-rowcard {
  background: #fff; border-bottom: 1px solid #f0f0f0; padding: 14px 16px; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
}
#tab-samples .sm-rowcard:hover { background: var(--sm-tint); }
#tab-samples .sm-rowcard .t { font-weight: 600; color: var(--sm-ink); }
#tab-samples .sm-rowcard .d { font-size: var(--font-size-sm); color: #666; grid-column: 1 / -1; }

/* ── Builder header + progress strip ────────────────────────────────────── */
#tab-samples .sm-header-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
#tab-samples .sm-header-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#tab-samples .sm-header-left h1 { font-size: var(--font-size-xl); color: var(--sm-ink); margin: 0; }
#tab-samples .sm-id-badge {
  background: #fff; border: 1px solid #ddd; color: #444; padding: 4px 10px;
  border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 600; font-variant-numeric: tabular-nums;
}
#tab-samples .sm-header-actions { display: flex; gap: 10px; }
#tab-samples .sm-progress {
  display: flex; padding: 14px 24px;
  background: linear-gradient(135deg, var(--color-header-bg) 0%, var(--color-header-bg-alt) 100%);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
#tab-samples .sm-step {
  flex: 1; text-align: center; position: relative; cursor: pointer;
  padding: 6px 5px; background: none; border: none; color: inherit;
}
#tab-samples .sm-step::after {
  content: ''; position: absolute; top: 22px; left: calc(50% + 20px); right: calc(-50% + 20px);
  height: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .15)); border-radius: 2px;
}
#tab-samples .sm-step:last-child::after { display: none; }
#tab-samples .sm-step.completed::after { background: linear-gradient(90deg, var(--color-success), rgba(40, 167, 69, .5)); }
#tab-samples .sm-step-number {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .6); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--font-size-base); position: relative; z-index: 1; transition: all var(--transition-normal);
}
#tab-samples .sm-step.active .sm-step-number { background: var(--color-primary); color: #fff; }
#tab-samples .sm-step.completed .sm-step-number { background: var(--color-success); color: #fff; }
#tab-samples .sm-step-label {
  display: block; color: rgba(255, 255, 255, .5); font-size: var(--font-size-xs);
  margin-top: 6px; text-transform: uppercase; letter-spacing: .5px;
}
#tab-samples .sm-step.active .sm-step-label,
#tab-samples .sm-step.completed .sm-step-label { color: #fff; }

/* ── Workspace: main column + sticky rail ───────────────────────────────── */
#tab-samples .sm-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
#tab-samples .sm-main-wrap { min-width: 0; }
#tab-samples .sm-main {
  min-width: 0; background: #fff; border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); box-shadow: var(--shadow-lg);
}
#tab-samples .sm-rail { display: none; }
#tab-samples .sm-bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px); border-top: 1px solid #e0e0e0; box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
  padding: 10px 16px; display: flex; align-items: center; gap: 12px; z-index: var(--z-sticky);
}
#tab-samples .sm-bottombar .info { flex: 1; min-width: 0; font-size: var(--font-size-sm); color: #555; }
#tab-samples .sm-bottombar .info b { color: var(--sm-ink); display: block; font-size: 13px; }
#tab-samples .sm-bottombar .missing { color: var(--color-danger); }
#tab-samples .sm-bottombar .ok { color: var(--color-success-dark); }

@container (min-width: 1080px) {
  #tab-samples .sm-workspace { grid-template-columns: minmax(0, 1fr) 360px; }
  #tab-samples .sm-rail { display: block; position: sticky; top: 16px; }
  #tab-samples .sm-bottombar { display: none; }
  #tab-samples .sm-root.sm-bottombar-open { padding-bottom: 40px; }
}

/* ── Sections ───────────────────────────────────────────────────────────── */
#tab-samples .sm-section { padding: 26px 30px; border-bottom: 1px solid #eee; }
#tab-samples .sm-section:last-child { border-bottom: none; }
#tab-samples .sm-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
#tab-samples .sm-section-head h2 {
  font-size: var(--font-size-lg); color: var(--sm-ink); margin: 0;
  display: flex; align-items: center; gap: 10px;
}
#tab-samples .sm-section-head h2 .num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--sm-ink); color: #fff;
  font-size: var(--font-size-sm); display: inline-flex; align-items: center; justify-content: center;
}
#tab-samples .sm-section-head h2 .num.done { background: var(--color-success); }
#tab-samples .sm-section-head .desc { color: #666; font-size: 13px; }
#tab-samples .sm-form-section { background: #f8f9fa; border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px; }
#tab-samples .sm-form-section:last-child { margin-bottom: 0; }
#tab-samples .sm-form-title {
  font-size: 13px; font-weight: 600; color: var(--color-primary); text-transform: uppercase;
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#tab-samples .sm-optional { font-size: var(--font-size-xs); font-weight: 400; color: #888; text-transform: none; }
#tab-samples .sm-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
#tab-samples .sm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#tab-samples .sm-form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#tab-samples .sm-fg { display: flex; flex-direction: column; min-width: 0; }
#tab-samples .sm-fg.full-width { grid-column: 1 / -1; }
#tab-samples .sm-fg label { font-size: var(--font-size-sm); font-weight: 600; color: #444; margin-bottom: 5px; }
#tab-samples .sm-fg label .req { color: var(--color-primary); }
#tab-samples .sm-fg input,
#tab-samples .sm-fg select,
#tab-samples .sm-fg textarea {
  padding: 10px 12px; border: 1px solid #ddd; border-radius: var(--radius-md); font-size: var(--font-size-base);
  background: #fff; transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  width: 100%; min-height: 40px; font-family: inherit;
}
#tab-samples .sm-fg input:focus,
#tab-samples .sm-fg select:focus,
#tab-samples .sm-fg textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 21, 56, .1);
}
#tab-samples .sm-fg input::placeholder,
#tab-samples .sm-fg textarea::placeholder { color: #aaa; }
#tab-samples .sm-fg.invalid input,
#tab-samples .sm-fg.invalid select { border-color: var(--color-danger); background: #fff8f8; }
#tab-samples .sm-fg .err { font-size: var(--font-size-xs); color: var(--color-danger); margin-top: 4px; display: none; }
#tab-samples .sm-fg.invalid .err { display: block; }
#tab-samples .sm-fg .hint { font-size: var(--font-size-xs); color: #888; margin-top: 4px; }
#tab-samples .sm-checkbox {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; min-height: 40px;
}
#tab-samples .sm-checkbox input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-primary); }

/* segmented control */
#tab-samples .sm-seg { display: inline-flex; background: #fff; border: 1px solid #ddd; border-radius: var(--radius-lg); padding: 3px; gap: 3px; }
#tab-samples .sm-seg button {
  border: none; background: none; padding: 8px 16px; border-radius: var(--radius-md); cursor: pointer;
  font-size: 13px; font-weight: 500; color: #555; min-height: 36px; transition: all var(--transition-fast); font-family: inherit;
}
#tab-samples .sm-seg button:hover { color: var(--color-primary); }
#tab-samples .sm-seg button.selected { background: var(--color-primary); color: #fff; }
#tab-samples .sm-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#tab-samples .sm-sites { display: flex; gap: 6px; flex-wrap: wrap; }
#tab-samples .sm-site {
  border: 1px solid #ddd; background: #fff; border-radius: 20px; padding: 6px 12px;
  font-size: var(--font-size-sm); cursor: pointer; color: #444;
}
#tab-samples .sm-site:hover { border-color: var(--color-primary); color: var(--color-primary); }
#tab-samples .sm-site.selected { background: var(--sm-tint); border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }

/* picker */
#tab-samples .customer-picker { position: relative; }
#tab-samples .customer-picker-input {
  width: 100%; padding: 12px 12px 12px 40px; border: 1px solid #ddd; border-radius: var(--radius-lg);
  font-size: 15px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") 12px center no-repeat;
  min-height: 46px;
}
#tab-samples .customer-picker-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 21, 56, .1); }
#tab-samples .customer-picker-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ddd;
  border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); z-index: var(--z-dropdown);
  margin-top: 4px; max-height: 320px; overflow-y: auto;
}
#tab-samples .customer-picker-dropdown[hidden] { display: none; }
#tab-samples .picker-result {
  padding: 10px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid #f2f2f2; align-items: center;
}
#tab-samples .picker-result:hover,
#tab-samples .picker-result.kb { background: var(--sm-tint); }
#tab-samples .picker-result b { color: var(--sm-ink); font-weight: 600; }
#tab-samples .picker-result-contact { color: #777; font-size: var(--font-size-sm); }
#tab-samples .picker-no-results { padding: 10px 12px; color: #888; font-size: 13px; }
#tab-samples .customer-picker-selected {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff;
  border: 1px solid #cfe3d0; border-left: 4px solid #2e7d32; border-radius: var(--radius-lg); padding: 10px 12px;
}
#tab-samples .picker-selected-name { font-weight: 600; color: var(--sm-ink); }
#tab-samples .picker-selected-meta { font-size: var(--font-size-sm); color: #666; }
#tab-samples .sm-role-tag {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  padding: 1px 6px; border-radius: 10px; background: #eef2f7; color: var(--color-gray-600);
  margin-left: 6px; vertical-align: 1px;
}
#tab-samples .sm-role-tag.designer { background: #e8f5e9; color: #2e7d32; }
#tab-samples .sm-recent { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: var(--font-size-sm); color: #888; }
#tab-samples .sm-chip {
  border: 1px solid #ddd; background: #fff; border-radius: 20px; padding: 5px 10px;
  font-size: var(--font-size-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--transition-fast); color: #333; min-height: 30px; font-family: inherit;
}
#tab-samples .sm-chip .swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); display: inline-block; }
#tab-samples .sm-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
#tab-samples .sm-address-summary {
  display: none; background: #fff; border: 1px solid var(--sm-line); border-radius: var(--radius-lg);
  padding: 10px 12px; font-size: 13px; line-height: 1.5; color: #333;
}
#tab-samples .sm-address-summary b { color: var(--sm-ink); }

/* speed + choices */
#tab-samples .sm-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
#tab-samples .sm-choice {
  border: 2px solid #e0e0e0; background: #fff; border-radius: var(--radius-lg); padding: 8px 12px;
  cursor: pointer; font-size: 13px; color: #333; transition: all var(--transition-fast);
  display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 96px; min-height: 44px; font-family: inherit;
}
#tab-samples .sm-choice small { color: #888; font-size: var(--font-size-xs); font-weight: 400; margin-top: 1px; }
#tab-samples .sm-choice:hover { border-color: var(--color-primary); }
#tab-samples .sm-choice.selected {
  border-color: var(--color-primary); background: linear-gradient(135deg, var(--sm-tint) 0%, #fff 100%); font-weight: 600;
}
#tab-samples .sm-inline-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
#tab-samples .sm-inline-row .sm-fg { flex: 1; min-width: 150px; }
#tab-samples .sm-readonly {
  padding: 10px 12px; background: #fff; border: 1px dashed #ddd; border-radius: var(--radius-md);
  color: #555; font-size: 13px; min-height: 40px;
}
#tab-samples .sm-account-input {
  flex: 1; min-width: 180px; padding: 8px 10px; border: 1px solid #ddd;
  border-radius: var(--radius-md); min-height: 36px; font-family: inherit; font-size: var(--font-size-base);
}
#tab-samples details.sm-more { margin-top: 10px; }
#tab-samples details.sm-more summary {
  cursor: pointer; color: var(--color-primary); font-size: 13px; font-weight: 500; list-style: none;
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
}
#tab-samples details.sm-more summary::-webkit-details-marker { display: none; }
#tab-samples details.sm-more summary::before { content: '\25B8'; font-size: var(--font-size-xs); transition: transform var(--transition-fast); }
#tab-samples details.sm-more[open] summary::before { transform: rotate(90deg); }
#tab-samples details.sm-more .body { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }

/* composer */
#tab-samples .sm-section-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
#tab-samples .sm-section-tab {
  border: 2px solid #e0e0e0; background: #fff; border-radius: var(--radius-lg); padding: 8px 12px;
  font-size: 13px; cursor: pointer; transition: all var(--transition-fast); min-height: 40px; font-family: inherit;
}
#tab-samples .sm-section-tab:hover { border-color: var(--color-primary); }
#tab-samples .sm-section-tab.selected {
  border-color: var(--color-primary); background: linear-gradient(135deg, var(--sm-tint) 0%, #fff 100%); font-weight: 600;
}
#tab-samples .sm-composer { display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px; gap: 10px; align-items: end; }
#tab-samples .sm-chipbars { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
#tab-samples .sm-chipbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#tab-samples .sm-chipbar h5 {
  margin: 0 6px 0 0; font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: #888; min-width: 62px;
}
#tab-samples .sm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
#tab-samples .sm-live-desc {
  margin-top: 12px; background: #fff; border: 1px solid #e0e0e0; border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md); padding: 8px 12px; font-size: 13px; color: #333;
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
#tab-samples .sm-live-desc .lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #888; }
#tab-samples .sm-lines { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
#tab-samples .sm-group-head {
  font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .5px; color: #fff;
  background: var(--color-primary); padding: 5px 12px; border-radius: var(--radius-md) var(--radius-md) 0 0; margin-top: 8px;
}
#tab-samples .sm-group-head:first-child { margin-top: 0; }
#tab-samples .sm-line {
  display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg); padding: 8px 12px;
}
#tab-samples .sm-line.editing { border-color: var(--color-primary); background: var(--sm-tint); }
#tab-samples .sm-line .n {
  width: 24px; height: 24px; border-radius: 50%; background: var(--sm-ink); color: #fff;
  font-size: var(--font-size-xs); font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
#tab-samples .sm-line .body { flex: 1; min-width: 0; font-size: 13px; color: #333; }
#tab-samples .sm-line .body small { color: #999; font-size: var(--font-size-xs); margin-left: 6px; }
#tab-samples .sm-line .acts { display: flex; gap: 2px; flex-shrink: 0; }
#tab-samples .sm-icon-btn {
  background: none; border: 1px solid transparent; color: #888; cursor: pointer; padding: 6px 8px;
  border-radius: var(--radius-md); font-size: 13px; min-height: 32px; font-family: inherit;
}
#tab-samples .sm-icon-btn:hover { border-color: #ddd; color: #333; background: var(--color-gray-100); }
#tab-samples .sm-icon-btn.danger:hover { color: var(--color-danger); border-color: var(--color-danger-light); background: var(--color-danger-light); }
#tab-samples .sm-empty { border: 2px dashed #ddd; border-radius: var(--radius-lg); padding: 18px; text-align: center; color: #888; font-size: 13px; }
#tab-samples .sm-lib { margin-top: 14px; }
#tab-samples .sm-lib summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-primary); list-style: none;
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
}
#tab-samples .sm-lib summary::-webkit-details-marker { display: none; }
#tab-samples .sm-lib summary::before { content: '\25B8'; font-size: var(--font-size-xs); transition: transform var(--transition-fast); }
#tab-samples .sm-lib[open] summary::before { transform: rotate(90deg); }
#tab-samples .sm-lib-group { margin-top: 10px; }
#tab-samples .sm-lib-group h4 { margin: 0 0 6px; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .5px; color: #888; }
#tab-samples .sm-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
#tab-samples .sm-lib-card {
  border: 1px solid #e0e0e0; background: #fff; border-radius: var(--radius-lg); padding: 9px 12px;
  cursor: pointer; transition: all var(--transition-fast); display: flex; justify-content: space-between;
  align-items: center; gap: 8px; text-align: left; min-height: 44px; font-family: inherit;
}
#tab-samples .sm-lib-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(139, 21, 56, .1); }
#tab-samples .sm-lib-card b { display: block; font-size: 13px; color: var(--sm-ink); font-weight: 600; }
#tab-samples .sm-lib-card small { color: #777; font-size: var(--font-size-xs); }
#tab-samples .sm-lib-card .add { color: var(--color-primary); font-weight: 700; font-size: var(--font-size-lg); line-height: 1; }
#tab-samples .sm-lib-card.added { border-color: #2e7d32; background: #f3faf3; }
#tab-samples .sm-lib-card.added .add { color: #2e7d32; font-size: var(--font-size-sm); }

/* previews */
#tab-samples .sm-preview-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
#tab-samples .sm-preview-tabs button {
  border: 1px solid #ddd; background: #fff; border-radius: var(--radius-md); padding: 6px 12px;
  font-size: var(--font-size-sm); cursor: pointer; min-height: 32px; font-family: inherit;
}
#tab-samples .sm-preview-tabs button.selected { background: var(--sm-ink); color: #fff; border-color: var(--sm-ink); }
#tab-samples .sm-preview { background: #fff; border: 1px solid #e0e0e0; border-radius: var(--radius-lg); overflow: hidden; }
#tab-samples .sm-preview pre {
  margin: 0; padding: 12px; font-family: var(--font-family-mono); font-size: var(--font-size-sm);
  line-height: 1.55; white-space: pre-wrap; color: #333; overflow-x: auto;
}
#tab-samples .sm-slack-msg { padding: 12px; display: flex; gap: 10px; }
#tab-samples .sm-slack-avatar {
  width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-primary); color: #fff;
  font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--font-size-sm);
}
#tab-samples .sm-slack-body { font-size: 13px; line-height: 1.5; color: #1d1c1d; min-width: 0; }
#tab-samples .sm-slack-body .who { font-weight: 700; }
#tab-samples .sm-slack-body .who small { font-weight: 400; color: #616061; margin-left: 6px; font-size: var(--font-size-xs); }
#tab-samples .sm-slack-body .app { background: #eee; color: #555; font-size: 9px; padding: 1px 4px; border-radius: 3px; margin-left: 4px; vertical-align: 1px; }
#tab-samples .sm-slack-body .m { color: #1264a3; }
#tab-samples .sm-slack-body .em { font-weight: 700; }
#tab-samples .sm-slack-body .alert { color: #e01e5a; }
#tab-samples .sm-slack-body .lines { margin: 4px 0; padding-left: 0; list-style: none; }
#tab-samples .sm-slack-body .sec { font-weight: 700; margin-top: 4px; }

/* rail */
#tab-samples .sm-rail-card { background: #fff; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); padding: 18px; margin-bottom: 14px; }
#tab-samples .sm-rail-card h3 {
  margin: 0 0 12px; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .5px;
  color: var(--color-primary); display: flex; justify-content: space-between; align-items: center;
}
#tab-samples .sm-rail-num { font-size: 22px; font-weight: 700; color: var(--sm-ink); font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
#tab-samples .sm-rail-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f2f2f2; font-size: 13px; }
#tab-samples .sm-rail-row:last-child { border-bottom: none; }
#tab-samples .sm-rail-row .k { color: #777; flex-shrink: 0; }
#tab-samples .sm-rail-row .v { text-align: right; color: #222; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
#tab-samples .sm-rail-row .v.dim { color: #bbb; font-weight: 400; }
#tab-samples .sm-check { list-style: none; margin: 0 0 12px; padding: 0; }
#tab-samples .sm-check li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 13px; color: #444; }
#tab-samples .sm-check li .dot {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ddd; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-xs);
  color: #fff; margin-top: 1px;
}
#tab-samples .sm-check li.ok .dot { background: var(--color-success); border-color: var(--color-success); }
#tab-samples .sm-check li.ok .dot::after { content: '\2713'; }
#tab-samples .sm-check li.ok { color: #777; }
#tab-samples .sm-check li a { color: var(--color-primary); text-decoration: none; }
#tab-samples .sm-check li a:hover { text-decoration: underline; }
#tab-samples .sm-rail-note { font-size: var(--font-size-sm); color: #666; line-height: 1.5; }
#tab-samples .sm-rail-note code { background: #f3f3f3; padding: 1px 5px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); }
#tab-samples .sm-side-lines { list-style: none; margin: 8px 0 0; padding: 0; font-size: var(--font-size-sm); color: #444; }
#tab-samples .sm-side-lines li { padding: 4px 0; border-bottom: 1px dashed #eee; display: flex; gap: 8px; }
#tab-samples .sm-side-lines li span:first-child { color: #999; flex-shrink: 0; }
#tab-samples .sm-side-lines li:last-child { border-bottom: none; }

/* confirmation */
#tab-samples .sm-confirm { text-align: center; padding: 30px 30px 10px; }
#tab-samples .sm-confirm h2 { margin: 0 0 4px; font-size: 22px; color: var(--sm-ink); }
#tab-samples .sm-confirm .big { font-size: 34px; font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
#tab-samples .sm-tracker { display: flex; justify-content: center; margin: 24px auto 20px; max-width: 720px; }
#tab-samples .sm-tstep { flex: 1; text-align: center; position: relative; }
#tab-samples .sm-tstep::after {
  content: ''; position: absolute; top: 15px; left: calc(50% + 18px); right: calc(-50% + 18px);
  height: 2px; background: #e0e0e0;
}
#tab-samples .sm-tstep:last-child::after { display: none; }
#tab-samples .sm-tstep.done::after { background: var(--color-success); }
#tab-samples .sm-tdot {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ddd; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #aaa;
  position: relative; z-index: 1;
}
#tab-samples .sm-tstep.active .sm-tdot { border-color: var(--color-primary); }
#tab-samples .sm-tstep.active .sm-tdot::after {
  content: ''; width: 14px; height: 14px; border: 2px solid var(--color-primary);
  border-top-color: transparent; border-radius: 50%; animation: sm-spin .8s linear infinite;
}
#tab-samples .sm-tstep.done .sm-tdot { background: var(--color-success); border-color: var(--color-success); color: #fff; }
#tab-samples .sm-tstep.error .sm-tdot { border-color: var(--color-danger); color: var(--color-danger); }
#tab-samples .sm-tstep .lbl { display: block; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .5px; color: #888; margin-top: 8px; }
#tab-samples .sm-tstep .val { display: block; font-size: var(--font-size-sm); color: #333; margin-top: 2px; min-height: 16px; }
@keyframes sm-spin { to { transform: rotate(360deg); } }
#tab-samples .sm-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
#tab-samples .sm-timeline { list-style: none; margin: 0; padding: 0; }
#tab-samples .sm-timeline li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
#tab-samples .sm-timeline .t { color: #888; font-size: var(--font-size-sm); width: 120px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
#tab-samples .sm-sync-error {
  background: var(--color-danger-light); color: var(--color-danger-dark); border-radius: var(--radius-lg);
  padding: 10px 14px; margin: 0 30px 14px; font-size: 13px; text-align: left;
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
/* A sync still in flight is news, not a failure. */
#tab-samples .sm-sync-error.sm-sync-note {
  background: var(--color-info-light); color: var(--color-info-dark);
}

/* contacts sub-view */
#tab-samples .sm-contacts-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 860px; }
#tab-samples .sm-contacts-table th {
  text-align: left; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .5px;
  color: #666; padding: 10px 12px; border-bottom: 1px solid #eee; background: #fafafa; white-space: nowrap;
}
#tab-samples .sm-contacts-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
#tab-samples .sm-contacts-table input {
  padding: 6px 8px; border: 1px solid #ddd; border-radius: var(--radius-sm); font-size: var(--font-size-sm);
  width: 100%; min-width: 90px; font-family: inherit;
}
#tab-samples .sm-contacts-table input:focus { outline: none; border-color: var(--color-primary); }

/* toast */
#tab-samples .sm-toast {
  position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%); background: var(--color-header-bg);
  color: #fff; padding: 10px 16px; border-radius: var(--radius-lg); font-size: 13px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); z-index: var(--z-toast); transition: opacity var(--transition-slow);
  max-width: 90vw; pointer-events: none;
}

/* ── Narrow layouts (container queries on #tab-samples) ─────────────────── */
@container (max-width: 720px) {
  #tab-samples .sm-section { padding: 18px 16px; }
  #tab-samples .sm-form-grid,
  #tab-samples .sm-form-grid.cols-3 { grid-template-columns: 1fr; }
  #tab-samples .sm-composer { grid-template-columns: 1fr 1fr; }
  #tab-samples .sm-composer .sm-fg:first-child { grid-column: 1 / -1; }
  #tab-samples .sm-chipbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  #tab-samples .sm-chips { flex-wrap: nowrap; }
  #tab-samples .sm-seg { width: 100%; }
  #tab-samples .sm-seg button { flex: 1; }
  #tab-samples .sm-step-label { font-size: 10px; }
  #tab-samples .sm-table-wrap { display: none; }
  #tab-samples .sm-cards { display: block; }
  #tab-samples .sm-lib-grid { grid-template-columns: 1fr; }
}
@container (max-width: 480px) {
  #tab-samples .sm-progress { padding: 12px 10px; }
  #tab-samples .sm-step-label { display: none; }
  #tab-samples .sm-choice { min-width: 0; flex: 1 1 40%; }
}

@media (prefers-reduced-motion: reduce) {
  #tab-samples * { transition: none !important; animation: none !important; }
}