:root {
  color-scheme: light;
  --buyer-bg: #f3f5f5;
  --buyer-panel: #ffffff;
  --buyer-soft: #edf5f2;
  --buyer-line: #7b898c;
  --buyer-text: #203034;
  --buyer-muted: #5d6d71;
  --buyer-accent: #23686a;
  --buyer-accent-dark: #174f51;
  --buyer-accent-text: #174f51;
  --buyer-on-accent: #ffffff;
  --buyer-danger: #a23b2a;
  --buyer-warning-bg: #fff8e8;
  --buyer-warning-line: #8a6516;
  --buyer-warning-text: #725214;
  --buyer-danger-bg: #fff4f1;
  --buyer-danger-text: #7f2f22;
  --buyer-danger-line: #a23b2a;
  --buyer-retired-bg: #fff0ed;
  --buyer-neutral-bg: #edf0f0;
  --buyer-success: #1d6a4a;
  --buyer-privacy-line: #5d8378;
  --buyer-info-line: #7195a3;
  --buyer-input-line: #6f8083;
  --buyer-table-line: #7b898c;
  --buyer-surface-header: #f2f6f5;
  --buyer-surface-muted: #f8faf9;
  --buyer-surface-summary: #f7f9f9;
  --buyer-surface-subtle: #fbfcfc;
  --buyer-surface-active: #f1f8f6;
  --buyer-surface-accent: #f3f8f8;
  --buyer-surface-preview: #fbfdfd;
  --buyer-attention-bg: #fff2ce;
  --buyer-scope-warning-line: #8a6516;
  --buyer-progress-active: #dfeceb;
  --buyer-progress-line: #5b817d;
  --buyer-accent-soft-line: #5b817d;
  --buyer-button-hover: #eef5f5;
  --buyer-disabled-text: #526367;
  --buyer-focus: #23686a;
  --buyer-focus-strong: #174f51;
  --buyer-active-ring: rgba(35, 104, 106, 0.12);
  --buyer-shadow-floating: rgba(28, 68, 70, 0.24);
  --buyer-shadow-panel: rgba(30, 45, 46, 0.2);
  --buyer-shadow-soft: rgba(30, 45, 46, 0.08);
  --buyer-backdrop: rgba(12, 25, 27, 0.66);
}

.buyer-draft-section {
  margin-block: 1rem;
  padding: 1rem;
  border: 1px solid var(--buyer-line);
  border-radius: 0.75rem;
  background: var(--buyer-surface-muted);
}

.buyer-draft-section h3,
.buyer-draft-section h4 {
  margin-block: 0 0.5rem;
}

/* Task 202: visible draft backup offer and Etsy upload guide. */
.buyer-draft-nudge {
  margin-block: 1rem;
  border: 1px solid var(--buyer-info-line);
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: var(--buyer-panel);
}
.buyer-draft-nudge[hidden],
.buyer-etsy-file[hidden] { display: none !important; }
.buyer-draft-nudge-text { margin: 0 0 0.75rem; }
.buyer-draft-nudge-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.buyer-draft-nudge-status { margin: 0 0 0.5rem; color: var(--buyer-text); font-size: 0.875rem; font-weight: 700; }
.buyer-draft-nudge-status:empty { display: none; }
.buyer-draft-auto-label { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 700; }
.buyer-draft-auto-input { width: 22px; height: 22px; flex: 0 0 22px; }
.buyer-draft-auto-hint, .buyer-draft-import-pending { margin: 0 0 0.6rem; color: var(--buyer-muted); font-size: 0.875rem; }
.buyer-draft-export-fallback[hidden], .buyer-draft-import-pending[hidden] { display: none !important; }
.buyer-etsy-file { font-weight: 700; overflow-wrap: anywhere; }
.buyer-etsy-guide { margin-block: 1rem; }
.buyer-etsy-guide h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.buyer-etsy-guide-steps { display: grid; gap: 0.5rem; margin: 0; padding-left: 1.5rem; }

.buyer-draft-actions,
.buyer-draft-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.buyer-draft-actions { margin-block: 0.75rem; }
.buyer-draft-actions input { display: none; position: absolute; width: 1px; height: 1px; overflow: hidden; }
.buyer-draft-status { min-height: 1.5rem; }
.buyer-draft-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.buyer-draft-list-item { padding-block: 0.5rem; border-top: 1px solid var(--buyer-line); }
.buyer-draft-list-label { font-weight: 600; margin-inline-end: auto; }
.buyer-draft-list-expiry { color: var(--buyer-muted); font-size: 0.9em; }
.buyer-draft-restore-preview { white-space: pre-wrap; }

.buyer-field-group-heading {
  grid-column: 1 / -1;
  margin: 1.25rem 0 0.15rem;
  padding: 0.35rem 0 0.2rem;
  border-bottom: 1px solid var(--buyer-line);
  color: var(--buyer-muted);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.buyer-required-note {
  margin: 0.35rem 0 0;
  color: var(--buyer-muted);
  font-size: 0.86rem;
}

@media (max-width: 600px) {
  .buyer-draft-actions > .buyer-button,
  .buyer-draft-list-item > .buyer-button { flex: 1 1 100%; }
  .buyer-draft-list-label,
  .buyer-draft-list-expiry { flex: 1 1 100%; margin-inline-end: 0; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--buyer-bg);
  color: var(--buyer-text);
  font: 16px/1.5 Arial, Helvetica, sans-serif;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.buyer-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  max-width: calc(100% - 24px);
  transform: translateY(calc(-100% - 24px));
  border: 2px solid var(--buyer-accent-soft-line);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--buyer-panel);
  box-shadow: 0 4px 14px var(--buyer-shadow-panel);
  color: var(--buyer-accent-text);
  font-weight: 700;
  text-decoration: none;
}

.buyer-skip-link:focus,
.buyer-skip-link:focus-visible {
  transform: none;
  outline: 3px solid var(--buyer-focus-strong);
  outline-offset: 2px;
}

#bulk-form-content {
  scroll-margin-top: 24px;
}

/* Keep the runtime mount and every layout boundary shrinkable.  Individual
   widgets may provide their own scroll areas, but the public form itself must
   never create a hidden horizontal overflow at compact viewports. */
#bulk-form-root,
#bulk-form-root > *,
#bulk-form-root .buyer-form,
#bulk-form-root .buyer-flow-panel,
#bulk-form-root .buyer-capture-layout,
#bulk-form-root .buyer-capture-column,
#bulk-form-root .buyer-capture-sketch-slot {
  min-inline-size: 0;
  max-inline-size: 100%;
}

#bulk-form-content:focus {
  outline: 3px solid var(--buyer-focus-strong);
  outline-offset: 6px;
}

button,
input,
select,
textarea { font: inherit; }

.buyer-form-shell {
  width: min(960px, calc(100% - 32px));
  margin: 32px auto 48px;
}

.buyer-form-header { margin-bottom: 20px; }

.buyer-header-topline,
.buyer-section-heading,
.buyer-import-heading,
.buyer-validation-heading,
.buyer-mapping-heading,
.buyer-preview-heading,
.buyer-local-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.buyer-form-header h1,
.buyer-form-header h2 {
  margin: 4px 0 8px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0;
}

.buyer-form-kicker {
  margin: 0;
  color: var(--buyer-accent);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.buyer-local-badge,
.buyer-dirty-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 6px;
  padding: 3px 8px;
  background: var(--buyer-soft);
  color: var(--buyer-accent-text);
  font-size: 12px;
  font-weight: 700;
}

.buyer-form-intro {
  max-width: 740px;
  margin: 0;
  color: var(--buyer-muted);
}

.buyer-privacy,
.buyer-local-note,
.buyer-version-note,
.buyer-mode-note,
.buyer-fatal {
  border: 1px solid var(--buyer-line);
  border-radius: 8px;
  background: var(--buyer-panel);
  padding: 16px 18px;
}

.buyer-privacy {
  margin-bottom: 16px;
  border-color: var(--buyer-privacy-line);
  background: var(--buyer-soft);
}

.buyer-privacy h2 {
  margin: 0;
  color: var(--buyer-accent-text);
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0;
}
.buyer-privacy p,
.buyer-local-note p { margin: 4px 0 0; color: var(--buyer-muted); }

.buyer-privacy-summary-text { max-width: 760px; }
.buyer-privacy-details {
  margin-top: 10px;
  border-top: 1px solid var(--buyer-privacy-line);
  padding-top: 4px;
}
.buyer-privacy-summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--buyer-accent-text);
  font-weight: 700;
  cursor: pointer;
}
.buyer-privacy-details-body {
  display: grid;
  gap: 8px;
  padding: 2px 0 8px;
}
.buyer-privacy-lifecycle {
  border-left: 3px solid var(--buyer-accent);
  padding: 5px 0 5px 11px;
}
.buyer-privacy-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.buyer-privacy .buyer-lifecycle-status {
  min-height: 24px;
  margin: 10px 0 0;
  border-left: 3px solid var(--buyer-accent);
  background: var(--buyer-surface-accent);
  padding: 8px 11px;
  color: var(--buyer-accent-text);
  font-weight: 700;
}
.buyer-privacy .buyer-lifecycle-status[data-lifecycle-status="dirty"] {
  border-color: var(--buyer-warning-line);
  background: var(--buyer-warning-bg);
  color: var(--buyer-warning-text);
}
.buyer-help-section {
  margin: 16px 0 18px;
  border: 1px solid var(--buyer-line);
  border-radius: 8px;
  background: var(--buyer-panel);
  padding: 16px 18px;
}
.buyer-help-section h2 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; }
.buyer-help-section p { margin: 5px 0; color: var(--buyer-muted); }
.buyer-help-group {
  margin-top: 10px;
  border-top: 1px solid var(--buyer-line);
  padding-top: 4px;
}
.buyer-help-group-summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 2px;
  color: var(--buyer-text);
  font-weight: 700;
  cursor: pointer;
}
.buyer-help-group-summary:focus-visible {
  outline: 3px solid var(--buyer-focus);
  outline-offset: 2px;
}
.buyer-help-group-content { padding: 2px 4px 6px; }
.buyer-help-privacy { font-weight: 700; }
.buyer-help-contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  color: var(--buyer-accent-text);
  font-weight: 700;
}
.buyer-accessibility-statement {
  margin-top: 16px;
  border-top: 1px solid var(--buyer-line);
  padding-top: 12px;
}
.buyer-accessibility-summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--buyer-accent-text);
  font-weight: 700;
  cursor: pointer;
}
.buyer-accessibility-statement[open] .buyer-accessibility-summary {
  margin-bottom: 6px;
}
.buyer-technical-explanation {
  margin: 0 0 12px;
  color: var(--buyer-muted);
  font-size: 14px;
}

.buyer-technical-section { min-width: 0; }

.buyer-version-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  border: 1px solid var(--buyer-line);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--buyer-panel);
}

.buyer-version-primary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  color: var(--buyer-muted);
}

.buyer-version-primary strong { color: var(--buyer-text); }

.buyer-version-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--buyer-soft);
  color: var(--buyer-accent-text);
  font-size: 12px;
  font-weight: 700;
}

.buyer-version-status-draft { background: var(--buyer-warning-bg); color: var(--buyer-warning-text); }
.buyer-version-status-retired { background: var(--buyer-retired-bg); color: var(--buyer-danger); }
.buyer-version-status-unknown { background: var(--buyer-neutral-bg); color: var(--buyer-muted); }

.buyer-technical-details {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  margin: 0;
}

.buyer-technical-details:not([open]) .buyer-technical-body { display: none; }

.buyer-technical-summary {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--buyer-accent-dark);
  border-radius: 999px;
  background: var(--buyer-accent);
  box-shadow: 0 8px 24px var(--buyer-shadow-floating);
  color: transparent;
  font-size: 0;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.buyer-technical-summary::-webkit-details-marker { display: none; }

.buyer-technical-summary::before {
  content: "i";
  color: var(--buyer-on-accent);
  font-family: Georgia, serif;
  font-size: 22px;
  font-style: italic;
  line-height: 1;
}

.buyer-technical-details[open] .buyer-technical-summary {
  background: var(--buyer-accent-dark);
}

.buyer-technical-body {
  position: absolute;
  right: 0;
  bottom: 58px;
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 620px);
  overflow: auto;
  border: 1px solid var(--buyer-line);
  border-radius: 10px;
  background: var(--buyer-panel);
  box-shadow: 0 12px 36px var(--buyer-shadow-panel);
  padding: 14px;
}

.buyer-technical-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--buyer-line);
  border-radius: 7px;
  background: var(--buyer-line);
}

.buyer-technical-item {
  min-width: 0;
  padding: 10px 12px;
  background: var(--buyer-panel);
}

.buyer-technical-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

.buyer-technical-item dt,
.buyer-static-label {
  color: var(--buyer-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.buyer-technical-item dd {
  margin: 3px 0 0;
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.buyer-support-description { margin: 14px 0 10px; color: var(--buyer-muted); font-size: 14px; }
.buyer-support-status { min-height: 24px; margin: 8px 0 0; color: var(--buyer-accent-text); font-size: 14px; font-weight: 700; }
.buyer-copy-buffer { position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; opacity: 0; }

.buyer-legal-footer {
  width: min(960px, calc(100% - 40px));
  margin: 24px auto 32px;
  border-top: 1px solid var(--buyer-line);
  padding-top: 18px;
  text-align: center;
}

.buyer-legal-note,
.buyer-legal-links { margin: 0; }
.buyer-legal-links { margin-top: 6px; }

.buyer-legal-links--toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 0;
}

[data-preview-marker]::before {
  content: attr(data-preview-marker);
  display: inline-flex;
  flex: 0 0 1.5em;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--buyer-accent-text);
  color: var(--buyer-on-accent);
  font-size: 0.8em;
  font-weight: 700;
  vertical-align: middle;
}

.buyer-layout-sketch-field-marker circle { fill: var(--buyer-accent-text); stroke: white; stroke-width: 0.4; }
.buyer-layout-sketch-field-marker text { fill: white; font-size: 4px; font-weight: 700; }

.buyer-footer-runtime-controls { display: contents; }

.buyer-footer-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 0;
  background: transparent;
  padding: 4px;
  color: var(--buyer-accent-text);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.08em);
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.buyer-legal-footer a,
.buyer-imprint a,
.buyer-help-contact {
  color: var(--buyer-accent-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.08em);
  text-underline-offset: 0.18em;
}

.buyer-legal-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
}

.buyer-info-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(86vh, 780px);
}

.buyer-info-dialog > .buyer-dialog-close {
  position: sticky;
  top: 0;
  z-index: 2;
  float: right;
  min-width: 44px;
  min-height: 44px;
  margin: -4px -4px 12px 16px;
  border: 1px solid var(--buyer-line);
  border-radius: 999px;
  background: var(--buyer-panel);
  padding: 8px 13px;
  color: var(--buyer-accent-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.buyer-info-dialog .buyer-privacy--dialog-content,
.buyer-info-dialog .buyer-help-section--dialog-content,
.buyer-info-dialog .buyer-accessibility-statement--dialog-content {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.buyer-info-dialog .buyer-privacy--dialog-content h2,
.buyer-info-dialog .buyer-help-section--dialog-content h2,
.buyer-info-dialog .buyer-accessibility-statement--dialog-content h2,
.buyer-technical-section--dialog-content > h2 {
  margin: 0 0 12px;
  padding-top: 4px;
  font-size: 24px;
  line-height: 1.25;
}

.buyer-info-dialog .buyer-privacy-details-body {
  padding: 0;
}

.buyer-info-dialog .buyer-accessibility-statement--dialog-content p {
  margin: 8px 0;
  color: var(--buyer-muted);
}

.buyer-technical-dialog .buyer-technical-body {
  position: static;
  width: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.buyer-imprint-dialog .buyer-imprint {
  width: auto;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.buyer-legal-page,
.buyer-imprint {
  width: min(760px, calc(100% - 40px));
  margin: 32px auto;
}

.buyer-imprint {
  border: 1px solid var(--buyer-line);
  border-radius: 12px;
  background: var(--buyer-panel);
  box-shadow: 0 10px 30px var(--buyer-shadow-soft);
  padding: clamp(20px, 4vw, 36px);
  text-align: left;
}

.buyer-imprint h1,
.buyer-imprint h2 { margin-top: 0; }
.buyer-imprint h2,
.buyer-imprint h3 { margin-bottom: 8px; }
.buyer-imprint p,
.buyer-imprint address { line-height: 1.6; }
.buyer-imprint address { font-style: normal; }
.buyer-imprint-basis { color: var(--buyer-muted); }
.buyer-imprint-multiline { white-space: pre-line; }

.buyer-version-note {
  margin: 0 0 18px;
  color: var(--buyer-muted);
  font-size: 14px;
}

.buyer-version-note-draft,
.buyer-mode-note {
  border-color: var(--buyer-warning-line);
  background: var(--buyer-warning-bg);
  color: var(--buyer-warning-text);
}

.buyer-tier-note {
  margin: 14px 0 0;
  border-left: 4px solid var(--buyer-info-line);
  padding: 8px 12px;
  color: var(--buyer-muted);
  font-size: 14px;
}

.buyer-progress { margin-bottom: 18px; }

.buyer-progress-compact {
  display: block;
  min-width: 0;
  margin: 0 0 12px;
  border: 1px solid var(--buyer-line);
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--buyer-panel);
  color: var(--buyer-text);
}

.buyer-progress-compact-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.buyer-progress-compact-step {
  color: var(--buyer-accent-text);
  font-size: 12px;
  font-weight: 800;
}

.buyer-progress-compact-line {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--buyer-line);
}

.buyer-progress-compact-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--buyer-accent);
  transition: width 160ms ease;
}

.buyer-progress-compact-next {
  min-width: 0;
  color: var(--buyer-muted);
  font-size: 12px;
  font-weight: 650;
  overflow-wrap: normal;
  word-break: normal;
}

.buyer-progress-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.buyer-progress-step {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 52px;
  gap: 9px;
  border-bottom: 3px solid var(--buyer-line);
  color: var(--buyer-muted);
  font-size: 13px;
  font-weight: 700;
}

.buyer-progress-label,
.buyer-progress-button {
  display: flex;
  align-items: center;
  min-width: 44px;
  width: 100%;
  min-height: 49px;
  gap: 9px;
  padding: 0 4px;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
}

.buyer-progress-button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.buyer-progress-button:hover {
  background: var(--buyer-soft);
  color: var(--buyer-accent-text);
}

.buyer-progress-button:active {
  background: var(--buyer-progress-active);
  transform: translateY(1px);
}

.buyer-progress-button:focus-visible {
  outline: 3px solid var(--buyer-focus-strong);
  outline-offset: 2px;
}

.buyer-progress-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.buyer-progress-status {
  color: var(--buyer-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.buyer-progress-step[aria-current="step"] {
  border-color: var(--buyer-accent);
  color: var(--buyer-accent-text);
}

.buyer-progress-step-reached,
.buyer-progress-step-complete {
  border-color: var(--buyer-progress-line);
  color: var(--buyer-accent-text);
}

.buyer-progress-step[aria-disabled="true"] {
  border-color: var(--buyer-line);
  color: var(--buyer-disabled-text);
}

.buyer-progress-number {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--buyer-line);
  border-radius: 50%;
  background: var(--buyer-panel);
}

.buyer-progress-step[aria-current="step"] .buyer-progress-number {
  border-color: var(--buyer-accent);
  background: var(--buyer-accent);
  color: var(--buyer-on-accent);
}

.buyer-form { display: grid; min-width: 0; gap: 18px; }

.buyer-flow-panel {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.buyer-flow-panel[hidden] { display: none; }
/* Task 201: while the entry choice is open, toolbar, empty overview, field hints and
   the required legend stay hidden even though their components set a display value. */
.buyer-record-toolbar[hidden],
.buyer-record-overview[hidden],
.buyer-field-help-toggle[hidden],
.buyer-required-note[hidden] { display: none !important; }

.buyer-flow-step-context {
  margin: 0 0 4px;
  color: var(--buyer-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.buyer-flow-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.buyer-flow-heading .buyer-flow-step-context {
  flex-basis: 100%;
}

.buyer-flow-heading h2 {
  margin-inline-end: auto;
}

.buyer-field-help-toggle {
  min-height: 44px;
}

.buyer-flow-heading h2:focus,
.buyer-flow-step-heading:focus {
  outline: 3px solid var(--buyer-focus);
  outline-offset: 4px;
}

.buyer-flow-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.buyer-flow-actions-split { justify-content: space-between; }
.buyer-flow-actions-start { justify-content: flex-start; }

.buyer-review-scroll {
  max-width: 100%;
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--buyer-line);
  border-radius: 6px;
}

.buyer-review-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}

.buyer-review-table th,
.buyer-review-table td {
  max-width: 320px;
  border-bottom: 1px solid var(--buyer-table-line);
  padding: 10px 12px;
  text-align: left;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.buyer-review-table thead th {
  background: var(--buyer-surface-header);
  color: var(--buyer-muted);
  font-size: 12px;
}

.buyer-review-table tbody tr:last-child th,
.buyer-review-table tbody tr:last-child td { border-bottom: 0; }

.buyer-flow-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 14px 0 0;
  overflow: hidden;
  border: 1px solid var(--buyer-line);
  border-radius: 6px;
  background: var(--buyer-line);
}

.buyer-flow-summary-item {
  min-width: 0;
  padding: 11px 12px;
  background: var(--buyer-surface-muted);
}

.buyer-flow-summary-item dt {
  color: var(--buyer-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.buyer-flow-summary-item dd {
  margin: 4px 0 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.buyer-pdf-stale {
  margin: 14px 0 0;
  border-left: 4px solid var(--buyer-warning-line);
  padding: 8px 11px;
  background: var(--buyer-warning-bg);
  color: var(--buyer-warning-text);
  font-weight: 700;
}

.buyer-pdf-stale[hidden] { display: none; }

.buyer-etsy-instruction {
  margin: 18px 0 0;
  border-left: 4px solid var(--buyer-accent);
  padding: 9px 12px;
  font-weight: 700;
}

.buyer-etsy-assurance { margin: 14px 0 0; color: var(--buyer-muted); }

.buyer-section {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--buyer-line);
  border-radius: 8px;
  background: var(--buyer-panel);
}

.buyer-section h2,
.buyer-fatal h1,
.buyer-fatal h2 { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: 0; }
.buyer-section h3 { margin: 0; font-size: 16px; line-height: 1.35; letter-spacing: 0; }
.buyer-section-intro { margin: 4px 0 0; color: var(--buyer-muted); font-size: 14px; }
.buyer-choice-grid,
.buyer-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.buyer-choice-grid { margin-top: 14px; }
.buyer-field-long { grid-column: 1 / -1; }

.buyer-shared-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.buyer-shared-item {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--buyer-line);
  border-radius: 8px;
  background: var(--buyer-surface-subtle);
  padding: 15px;
}

.buyer-shared-item-long { grid-column: 1 / -1; }
.buyer-scope-choices { display: grid; gap: 4px; margin: 0; border: 0; padding: 0; }
.buyer-scope-choices legend { margin-bottom: 5px; color: var(--buyer-muted); font-size: 12px; font-weight: 700; }
.buyer-scope-option,
.buyer-scope-decision-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 7px 0;
  cursor: pointer;
}
.buyer-scope-option input,
.buyer-scope-decision-choice input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; }
.buyer-scope-option input:focus-visible,
.buyer-scope-decision-choice input:focus-visible {
  outline: 3px solid var(--buyer-focus);
  outline-offset: 2px;
}
.buyer-scope-help { margin-top: 4px; }
.buyer-scope-per-record-note { border-left: 3px solid var(--buyer-accent); padding-left: 10px; }

.buyer-scope-decision {
  margin: auto;
  border-color: var(--buyer-scope-warning-line);
  background: var(--buyer-warning-bg);
}

.buyer-scope-decision-options { display: grid; gap: 6px; margin: 14px 0 0; border: 0; padding: 0; }
.buyer-scope-decision-legend { margin-bottom: 4px; font-weight: 700; }
.buyer-scope-decision-control { margin: 0 0 4px 31px; }
.buyer-scope-record-select { width: 100%; min-height: 44px; }
.buyer-scope-decision-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.buyer-scope-undo,
.buyer-record-delete-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; border-left: 3px solid var(--buyer-accent); background: var(--buyer-surface-accent); padding: 9px 11px; }
.buyer-record-delete-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.buyer-record-delete-undo-kept,
.buyer-record-delete-undo-unavailable { color: var(--buyer-muted); }
.buyer-character-counter { margin: 0; color: var(--buyer-muted); font-size: 12px; text-align: right; }
.buyer-character-counter[hidden] { display: none; }

.buyer-review-shared-summary { margin-top: 14px; border-left: 3px solid var(--buyer-accent); background: var(--buyer-surface-summary); padding: 12px; }
.buyer-review-shared-summary[hidden] { display: none; }
.buyer-review-shared-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin: 10px 0 0; }
.buyer-review-shared-item { min-width: 0; }
.buyer-review-shared-item dt { color: var(--buyer-muted); font-size: 12px; font-weight: 700; }
.buyer-review-shared-item dd { margin: 3px 0 0; overflow-wrap: anywhere; }

.buyer-static-choice {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 68px;
  padding: 10px 12px;
  border-left: 3px solid var(--buyer-accent);
  background: var(--buyer-surface-summary);
}

.buyer-row-primary-actions,
.buyer-row-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.buyer-row-count { color: var(--buyer-muted); font-size: 13px; font-weight: 700; }
.buyer-row-list { display: grid; gap: 14px; margin-top: 18px; }

.buyer-entry-method {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  border: 1px solid var(--buyer-line);
  border-radius: 8px;
  padding: 16px;
  background: var(--buyer-surface-subtle);
}
/* Task 201: the floated legend becomes a regular grid item inside the box. */
.buyer-entry-method legend { float: left; width: 100%; margin: 0; padding: 0; font-weight: 800; }
.buyer-entry-method-hint { margin: 0; color: var(--buyer-muted); }
.buyer-entry-method-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.buyer-entry-method-button { min-height: 48px; }
.buyer-entry-method[hidden] { display: none; }

.buyer-import-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.buyer-import-heading-actions .buyer-button { min-height: 44px; }
.buyer-csv-mapping-help { margin: 12px 0 16px; border-top: 1px solid var(--buyer-line); border-bottom: 1px solid var(--buyer-line); padding: 10px 0; }
.buyer-csv-mapping-help summary { cursor: pointer; font-weight: 800; }
.buyer-csv-mapping-help > .buyer-help { margin: 8px 0; }
.buyer-csv-mapping-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.buyer-csv-mapping-table th,
.buyer-csv-mapping-table td { border-bottom: 1px solid var(--buyer-table-line); padding: 7px 8px; text-align: left; vertical-align: top; }
.buyer-csv-mapping-table th { color: var(--buyer-muted); font-size: 11px; text-transform: uppercase; }
.buyer-csv-mapping-table code { overflow-wrap: anywhere; }

.buyer-record-overview-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.buyer-record-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }
.buyer-record-filter input { width: 22px; height: 22px; }
.buyer-record-search { display: grid; gap: 5px; width: min(100%, 320px); }
.buyer-record-search-label { color: var(--buyer-muted); font-size: 13px; font-weight: 700; }
.buyer-record-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--buyer-input-line);
  border-radius: 6px;
  padding: 8px 11px;
  background: var(--buyer-panel);
  color: var(--buyer-text);
}

.buyer-record-overview { margin-top: 14px; }
.buyer-record-overview--editor-open {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  margin-block: 0;
}
.buyer-record-responsive { min-width: 0; }
.buyer-record-responsive > [hidden] { display: none !important; }
.buyer-record-table-scroll {
  max-width: 100%;
  max-height: 560px;
  overflow: auto;
  scroll-padding-block-start: 56px;
  border: 1px solid var(--buyer-line);
  border-radius: 7px;
}
.buyer-review-scroll > .buyer-record-table-scroll { margin: -1px; border: 0; }
.buyer-record-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.buyer-record-table th,
.buyer-record-table td { border-bottom: 1px solid var(--buyer-table-line); padding: 10px 12px; text-align: left; vertical-align: middle; }
.buyer-record-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--buyer-surface-header);
  color: var(--buyer-muted);
  font-size: 12px;
  box-shadow: 0 1px 0 var(--buyer-line);
}
.buyer-record-table tbody tr:last-child th,
.buyer-record-table tbody tr:last-child td { border-bottom: 0; }
.buyer-record-table tbody tr.buyer-record-active { background: var(--buyer-surface-active); }
.buyer-record-summary-cell { max-width: 260px; }
.buyer-record-summary-value { display: block; overflow-wrap: anywhere; white-space: normal; }
.buyer-record-status-ready { color: var(--buyer-success); font-weight: 700; }
.buyer-record-status-pending { color: var(--buyer-muted); }
.buyer-record-error-link,
.buyer-validation-issue-link {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--buyer-danger);
  padding: 0;
  text-align: left;
  text-decoration: underline;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.buyer-record-actions { display: flex; justify-content: flex-end; gap: 6px; }
.buyer-record-actions .buyer-button { min-width: 44px; min-height: 44px; padding: 6px 9px; font-size: 12px; }
.buyer-record-empty { margin: 14px 0 0; border: 1px dashed var(--buyer-line); border-radius: 7px; padding: 18px; color: var(--buyer-muted); text-align: center; }

.buyer-record-card-list { display: grid; gap: 12px; min-width: 0; }
.buyer-record-card {
  min-width: 0;
  border: 1px solid var(--buyer-line);
  border-radius: 9px;
  background: var(--buyer-panel);
  padding: 15px;
}
.buyer-record-card.buyer-record-active { border-color: var(--buyer-accent); box-shadow: 0 0 0 2px var(--buyer-active-ring); }
.buyer-record-card-position { margin: 0; color: var(--buyer-muted); font-size: 12px; font-weight: 700; }
.buyer-record-current-marker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-inline-start: 8px;
  border: 1px solid var(--buyer-accent);
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--buyer-soft);
  color: var(--buyer-accent-text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}
.buyer-record-current-marker[hidden] { display: none; }
.buyer-record-card-title { margin: 4px 0 0; overflow-wrap: anywhere; word-break: break-word; }
.buyer-record-card-summary { display: grid; gap: 8px; margin: 13px 0 0; }
.buyer-record-card-summary-item { min-width: 0; }
.buyer-record-card-summary dt,
.buyer-record-card-label { color: var(--buyer-muted); font-size: 12px; font-weight: 700; }
.buyer-record-card-summary dd { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; word-break: break-word; }
.buyer-record-card-status { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; border-top: 1px solid var(--buyer-line); padding-top: 11px; }
.buyer-record-card-status .buyer-record-error-link { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.buyer-record-card-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.buyer-record-card-actions .buyer-button { width: 100%; min-width: 44px; min-height: 44px; padding: 9px 10px; white-space: normal; }

.buyer-record-detail-host { margin-top: 18px; }
.buyer-record-detail-host[hidden] { display: none; }
.buyer-record-detail { border: 1px solid var(--buyer-line); border-radius: 8px; background: var(--buyer-surface-subtle); padding: 16px; }
.buyer-record-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.buyer-record-detail-title { margin: 0; overflow-wrap: anywhere; scroll-margin-block: 24px; }
.buyer-record-detail-title:focus-visible {
  outline: 3px solid var(--buyer-focus-strong);
  outline-offset: 3px;
}
.buyer-record-detail-navigation { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 14px; }

.buyer-record-table [data-record-action] { scroll-margin-block-start: 56px; }

.buyer-row {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--buyer-line);
  border-radius: 8px;
  background: var(--buyer-surface-subtle);
  padding: 16px;
}

.buyer-row legend { padding: 0 7px; font-weight: 700; }
.buyer-row-toolbar { margin: -4px 0 14px; }
.buyer-field { position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; }
.buyer-field label { color: var(--buyer-muted); font-size: 13px; font-weight: 700; }
.buyer-required { color: var(--buyer-danger); font-size: 12px; }

.buyer-field input,
.buyer-field select,
.buyer-field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--buyer-input-line);
  border-radius: 6px;
  background: var(--buyer-panel);
  color: var(--buyer-text);
  padding: 9px 11px;
}

.buyer-field textarea { min-height: 92px; resize: vertical; }
.buyer-field input[type="checkbox"] { width: 26px; min-height: 26px; }
.buyer-field input::placeholder,
.buyer-field textarea::placeholder { color: var(--buyer-muted); opacity: 0.88; }
.buyer-help { margin: 0; color: var(--buyer-muted); font-size: 13px; }

.buyer-field-meta {
  min-width: 0;
  margin: 0;
}

.buyer-field-meta-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  color: var(--buyer-accent-text);
  cursor: pointer;
  list-style: none;
}

.buyer-field-meta-toggle::-webkit-details-marker { display: none; }

.buyer-field-meta-toggle:focus-visible {
  outline: 3px solid var(--buyer-text);
  outline-offset: 2px;
}

.buyer-field-meta-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}

.buyer-field-meta-content {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  border-top: 1px solid var(--buyer-line);
  padding-top: 8px;
}

.buyer-field-meta:not([open]) > .buyer-field-meta-content,
.buyer-field-help-visible .buyer-field-meta:not([open]) > .buyer-field-meta-content,
.buyer-layout-sketch-legend:not([open]) > .buyer-layout-sketch-legend-list,
.buyer-layout-sketch-summary-disclosure:not([open]) > .buyer-layout-sketch-summary-content {
  display: none;
}

.buyer-field-help-visible .buyer-field-meta:not([open]) > .buyer-field-meta-content {
  display: grid;
}

.buyer-import-controls {
  display: block;
  margin-top: 18px;
}

.buyer-import-file-field input[type="file"] {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--buyer-input-line);
  border-radius: 6px;
  background: var(--buyer-panel);
  color: var(--buyer-text);
  padding: 7px;
}

.buyer-import-advanced {
  margin-top: 14px;
  border: 1px solid var(--buyer-line);
  border-radius: 6px;
  background: var(--buyer-surface-muted);
}

.buyer-import-advanced > summary {
  display: flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  padding: 11px 13px;
  color: var(--buyer-accent-text);
  font-weight: 700;
}

.buyer-import-advanced[open] > summary { border-bottom: 1px solid var(--buyer-line); }
.buyer-import-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.buyer-import-checkbox { display: flex; align-items: center; gap: 9px; min-height: 44px; font-weight: 700; }
.buyer-import-checkbox input { width: 22px; height: 22px; margin: 0; }
.buyer-import-detection { padding: 0 14px 14px; }

.buyer-import-status {
  min-height: 24px;
  margin: 14px 0 0;
  color: var(--buyer-accent-text);
  font-size: 14px;
  font-weight: 700;
}

.buyer-import-status-error { color: var(--buyer-danger); }
.buyer-import-workspace { min-width: 0; margin-top: 16px; border-top: 1px solid var(--buyer-line); padding-top: 16px; }

.buyer-import-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--buyer-line);
  border-radius: 6px;
  background: var(--buyer-line);
}

.buyer-import-summary-item { min-width: 0; background: var(--buyer-surface-muted); padding: 9px 11px; }
.buyer-import-summary-item dt { color: var(--buyer-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.buyer-import-summary-item dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 700; white-space: normal; }

.buyer-import-issues,
.buyer-mapping-gate {
  margin: 0 0 16px;
  border-left: 4px solid var(--buyer-danger);
  background: var(--buyer-danger-bg);
  padding: 11px 13px;
  color: var(--buyer-danger-text);
  font-size: 14px;
}

.buyer-import-semantic {
  margin: 0 0 16px;
  border-left: 4px solid var(--buyer-warning-line);
  background: var(--buyer-warning-bg);
  padding: 11px 13px;
}

.buyer-import-semantic h4 { margin: 0; font-size: 15px; }
.buyer-import-semantic h4 + ul { margin-top: 6px; }
.buyer-import-semantic ul { margin-bottom: 10px; padding-left: 20px; }
.buyer-import-semantic ul:last-child { margin-bottom: 0; }
.buyer-identical-values { margin-top: 14px; border: 1px solid var(--buyer-accent-soft-line); border-radius: 8px; background: var(--buyer-surface-accent); padding: 14px; }
.buyer-identical-values > h3 { margin: 0; font-size: 17px; }
.buyer-identical-values > .buyer-section-intro { margin-top: 4px; }
.buyer-identical-list { display: grid; gap: 10px; margin-top: 12px; }
.buyer-identical-card { border: 1px solid var(--buyer-line); border-radius: 7px; background: var(--buyer-panel); padding: 12px; }
.buyer-identical-card-accepted { border-color: var(--buyer-accent); }
.buyer-identical-description,
.buyer-identical-value,
.buyer-identical-status { margin: 0; }
.buyer-identical-value { margin-top: 7px; overflow-wrap: anywhere; font-weight: 700; white-space: pre-wrap; }
.buyer-identical-status { margin-top: 7px; color: var(--buyer-accent-text); font-size: 13px; font-weight: 700; }
.buyer-identical-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }

.buyer-validation-heading { align-items: flex-start; }

.buyer-validation-badge {
  flex: 0 0 auto;
  border-radius: 6px;
  padding: 4px 9px;
  background: var(--buyer-neutral-bg);
  color: var(--buyer-muted);
  font-size: 12px;
  font-weight: 700;
}

.buyer-validation-badge-error { background: var(--buyer-danger-bg); color: var(--buyer-danger); }
.buyer-validation-badge-warning { background: var(--buyer-warning-bg); color: var(--buyer-warning-text); }
.buyer-validation-badge-ready { background: var(--buyer-soft); color: var(--buyer-accent-text); }

.buyer-validation-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0 12px;
  overflow: hidden;
  border: 1px solid var(--buyer-line);
  border-radius: 6px;
  background: var(--buyer-line);
}

.buyer-validation-context > div { min-width: 0; padding: 10px 12px; background: var(--buyer-panel); }
.buyer-validation-context dt { color: var(--buyer-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.buyer-validation-context dd { margin: 2px 0 0; overflow-wrap: anywhere; font-weight: 700; }
.buyer-validation-summary { margin: 0 0 14px; color: var(--buyer-muted); }

.buyer-validation-messages,
.buyer-validation-changes {
  margin: 12px 0 0;
  border-left: 4px solid var(--buyer-line);
  padding: 10px 13px;
}

.buyer-validation-errors { border-color: var(--buyer-danger); background: var(--buyer-danger-bg); }
.buyer-validation-warnings,
.buyer-validation-changes {
  border-color: var(--buyer-warning-line);
  background: var(--buyer-warning-bg);
  color: var(--buyer-warning-text);
}
.buyer-validation-messages h3,
.buyer-validation-changes h3 { margin: 0; font-size: 16px; }
.buyer-validation-messages ul { margin: 7px 0 0; padding-left: 20px; }
.buyer-validation-messages li + li { margin-top: 5px; }
.buyer-validation-issue-link:focus-visible,
.buyer-record-error-link:focus-visible { outline: 3px solid var(--buyer-focus); outline-offset: 2px; }

.buyer-validation-change-list { margin-top: 10px; border-top: 1px solid var(--buyer-warning-line); }
.buyer-validation-change { padding: 11px 0; border-bottom: 1px solid var(--buyer-warning-line); }
.buyer-validation-change-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 7px; }
.buyer-validation-change-values span { display: block; color: var(--buyer-muted); font-size: 12px; font-weight: 700; }
.buyer-validation-change-values code { display: block; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.buyer-validation-change small { display: block; margin-top: 6px; color: var(--buyer-muted); }
.buyer-validation-change-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

.buyer-warning-confirmation {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 9px;
  margin-top: 14px;
  font-weight: 700;
}

.buyer-warning-confirmation[hidden] { display: none; }
.buyer-warning-confirmation input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; }
.buyer-inline-error { margin: 5px 0 0; color: var(--buyer-danger); font-size: 13px; font-weight: 700; }
.buyer-field-invalid input,
.buyer-field-invalid select,
.buyer-field-invalid textarea { border-color: var(--buyer-danger); }

.buyer-capture-validation {
  border-left: 4px solid var(--buyer-line);
  background: var(--buyer-surface-muted);
}
.buyer-capture-validation h2 { margin: 0; }
.buyer-capture-validation-text { margin: 6px 0 0; color: var(--buyer-muted); }
.buyer-capture-validation-list { margin: 12px 0 0; padding-left: 21px; }
.buyer-capture-validation-list li + li { margin-top: 6px; }
.buyer-capture-validation-neutral { border-left-color: var(--buyer-accent); }
.buyer-capture-validation-ready { border-left-color: var(--buyer-accent); background: var(--buyer-soft); }
.buyer-capture-validation-ready .buyer-capture-validation-text { color: var(--buyer-accent-text); }
.buyer-capture-validation-error { border-left-color: var(--buyer-danger); background: var(--buyer-danger-bg); }
.buyer-capture-validation-error .buyer-capture-validation-text { color: var(--buyer-danger-text); }
.buyer-capture-validation:focus-visible {
  outline: 3px solid var(--buyer-focus);
  outline-offset: 3px;
}
.buyer-validation-technical {
  margin-top: 10px;
  border-top: 1px solid currentColor;
  padding-top: 8px;
  color: var(--buyer-muted);
  font-size: 12px;
}
.buyer-validation-technical > summary {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
}
.buyer-validation-technical ul { margin: 7px 0 0; padding-left: 20px; }

.buyer-import-issues ul { margin: 6px 0 0; padding-left: 20px; }
.buyer-import-issues li + li { margin-top: 4px; }
.buyer-mapping-gate { margin-top: 14px; }

.buyer-mapping-area { min-width: 0; }
.buyer-mapping-heading { align-items: flex-start; }
.buyer-import-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.buyer-mapping-labels,
.buyer-mapping-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.buyer-mapping-labels {
  margin-top: 14px;
  border-bottom: 1px solid var(--buyer-line);
  padding: 8px 0;
  color: var(--buyer-muted);
  font-size: 12px;
  text-transform: uppercase;
}

.buyer-mapping-row { min-height: 58px; border-bottom: 1px solid var(--buyer-table-line); padding: 8px 0; }
.buyer-mapping-row select { width: 100%; min-height: 44px; border: 1px solid var(--buyer-input-line); border-radius: 6px; background: var(--buyer-panel); color: var(--buyer-text); padding: 8px 10px; }
.buyer-mapping-row-attention { margin: 0 -10px; border-left: 4px solid var(--buyer-warning-line); background: var(--buyer-warning-bg); padding-right: 10px; padding-left: 6px; }
.buyer-mapping-row-attention select { border-color: var(--buyer-warning-line); }
.buyer-mapping-source { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.buyer-mapping-source strong { overflow-wrap: anywhere; }
.buyer-mapping-examples { color: var(--buyer-muted); font-size: 13px; overflow-wrap: anywhere; white-space: normal; }
.buyer-mapping-status { width: fit-content; margin-top: 2px; border-radius: 999px; background: var(--buyer-soft); padding: 2px 7px; color: var(--buyer-accent-text); font-size: 11px; font-weight: 700; }
.buyer-mapping-status-attention { background: var(--buyer-attention-bg); color: var(--buyer-warning-text); }

.buyer-import-preview { min-width: 0; margin-top: 18px; }
.buyer-preview-count { color: var(--buyer-muted); font-size: 13px; font-weight: 700; }
.buyer-import-preview-shared { margin-top: 10px; border: 1px solid var(--buyer-accent-soft-line); border-radius: 6px; background: var(--buyer-soft); padding: 11px 13px; }
.buyer-import-preview-shared h4 { margin: 0 0 7px; font-size: 14px; }
.buyer-import-preview-shared-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.buyer-import-preview-shared-list > div { min-width: 0; }
.buyer-import-preview-shared-list dt { color: var(--buyer-muted); font-size: 12px; font-weight: 700; }
.buyer-import-preview-shared-list dd { margin: 2px 0 0; overflow-wrap: anywhere; font-weight: 700; white-space: pre-wrap; }
.buyer-preview-scroll { max-width: 100%; margin-top: 10px; overflow-x: auto; border: 1px solid var(--buyer-line); border-radius: 6px; }
.buyer-preview-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
.buyer-preview-table th,
.buyer-preview-table td { max-width: 280px; border-bottom: 1px solid var(--buyer-table-line); padding: 9px 11px; text-align: left; overflow-wrap: anywhere; white-space: pre-wrap; }
.buyer-preview-table th { background: var(--buyer-surface-header); color: var(--buyer-muted); font-size: 12px; }
.buyer-preview-table tbody tr:last-child td { border-bottom: 0; }
.buyer-import-apply { display: flex; justify-content: flex-end; margin-top: 14px; }

.buyer-pdf-section {
  border-color: var(--buyer-accent-soft-line);
  background: var(--buyer-surface-preview);
}

.buyer-pdf-limit {
  margin: 14px 0 0;
  color: var(--buyer-muted);
  font-size: 13px;
  font-weight: 700;
}

.buyer-pdf-readiness {
  margin: 10px 0 14px;
  border-left: 4px solid var(--buyer-line);
  padding: 8px 11px;
  color: var(--buyer-muted);
}

.buyer-pdf-ready { border-color: var(--buyer-accent); color: var(--buyer-accent-text); }
.buyer-pdf-error { border-color: var(--buyer-danger); color: var(--buyer-danger); }
.buyer-pdf-section .buyer-button { min-width: 190px; }
.buyer-pdf-result { margin-top: 16px; border-top: 1px solid var(--buyer-line); padding-top: 15px; }
.buyer-pdf-result[hidden] { display: none; }
.buyer-pdf-result-summary { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.buyer-pdf-instruction { margin-top: 10px; border-left: 4px solid var(--buyer-accent); padding: 7px 11px; }
.buyer-pdf-instruction p { margin: 4px 0 0; color: var(--buyer-muted); }

.buyer-pdf-accessible-summary-container { margin: 18px 0; }
.buyer-pdf-accessible-summary {
  border: 1px solid var(--buyer-line);
  border-radius: 8px;
  background: var(--buyer-surface-summary);
  padding: 18px;
}
.buyer-pdf-accessible-heading { margin: 0; color: var(--buyer-text); font-size: 20px; }
.buyer-pdf-accessible-intro { margin: 7px 0 14px; color: var(--buyer-muted); }
.buyer-pdf-accessible-facts,
.buyer-pdf-accessible-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.buyer-pdf-accessible-facts > div,
.buyer-pdf-accessible-values > div { min-width: 0; }
.buyer-pdf-accessible-facts dt,
.buyer-pdf-accessible-values dt {
  margin-top: 8px;
  color: var(--buyer-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.buyer-pdf-accessible-facts dd,
.buyer-pdf-accessible-values dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.buyer-pdf-accessible-facts dt:first-child,
.buyer-pdf-accessible-values dt:first-child { margin-top: 0; }
.buyer-pdf-accessible-shared,
.buyer-pdf-accessible-records { margin-top: 20px; }
.buyer-pdf-accessible-shared h4,
.buyer-pdf-accessible-records h4 { margin: 0 0 9px; font-size: 16px; }
.buyer-pdf-accessible-empty { margin: 0; color: var(--buyer-muted); }
.buyer-pdf-accessible-table-scroll {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--buyer-line);
  border-radius: 6px;
  background: var(--buyer-panel);
  scrollbar-gutter: stable;
}
.buyer-pdf-accessible-table-scroll:focus-visible {
  outline: 3px solid var(--buyer-focus-strong);
  outline-offset: 3px;
}
.buyer-pdf-accessible-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  color: var(--buyer-text);
}
.buyer-pdf-accessible-table caption {
  padding: 10px 12px;
  color: var(--buyer-muted);
  font-weight: 700;
  text-align: left;
}
.buyer-pdf-accessible-table th,
.buyer-pdf-accessible-table td {
  border-top: 1px solid var(--buyer-line);
  padding: 9px 11px;
  overflow-wrap: anywhere;
  text-align: left;
  vertical-align: top;
  white-space: pre-wrap;
}
.buyer-pdf-accessible-table thead th { background: var(--buyer-surface-header); }
.buyer-pdf-accessible-table tbody th { background: var(--buyer-surface-muted); white-space: nowrap; }
.buyer-pdf-accessible-upload {
  margin-top: 18px;
  border-left: 4px solid var(--buyer-accent);
  padding: 8px 11px;
}
.buyer-pdf-accessible-upload p { margin: 4px 0 0; color: var(--buyer-muted); }

@media (max-width: 720px) {
  .buyer-pdf-accessible-summary { padding: 14px; }
  .buyer-pdf-accessible-facts,
  .buyer-pdf-accessible-values { grid-template-columns: 1fr; }
}

@media (forced-colors: active) {
  .buyer-pdf-accessible-summary,
  .buyer-pdf-accessible-table-scroll,
  .buyer-pdf-accessible-table th,
  .buyer-pdf-accessible-table td { border-color: CanvasText; }
  .buyer-pdf-accessible-table thead th,
  .buyer-pdf-accessible-table tbody th { background: Canvas; color: CanvasText; }
  .buyer-pdf-accessible-upload { border-left-color: Highlight; }
}

.buyer-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.buyer-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(82vh, 720px);
  overflow: auto;
  margin: auto;
  border: 1px solid var(--buyer-line);
  border-radius: 10px;
  background: var(--buyer-panel);
  box-shadow: 0 20px 56px var(--buyer-shadow-panel);
  padding: clamp(18px, 4vw, 28px);
  color: var(--buyer-text);
}
.buyer-dialog:not([open]) { display: none; }
.buyer-dialog::backdrop { background: var(--buyer-backdrop); }
.buyer-dialog h2,
.buyer-dialog h3 { margin: 0; font-size: 22px; line-height: 1.25; }
.buyer-dialog-description { margin: 10px 0 0; color: var(--buyer-muted); }
.buyer-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.buyer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--buyer-accent);
  border-radius: 6px;
  padding: 7px 11px;
  background: var(--buyer-panel);
  color: var(--buyer-accent-text);
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.buyer-button-primary { background: var(--buyer-accent); color: var(--buyer-on-accent); }
.buyer-button-secondary {
  border-color: var(--buyer-line);
  background: var(--buyer-panel);
  color: var(--buyer-text);
}
.buyer-button-tertiary {
  border-color: transparent;
  background: transparent;
  color: var(--buyer-accent-text);
}
.buyer-button-danger { border-color: var(--buyer-danger-line); color: var(--buyer-danger); }
.buyer-button:hover { border-color: var(--buyer-accent-text); background: var(--buyer-button-hover); }
.buyer-button-primary:hover { background: var(--buyer-accent-dark); }
.buyer-button-secondary:hover { border-color: var(--buyer-accent-text); }
.buyer-button-tertiary:hover { border-color: var(--buyer-line); background: var(--buyer-button-hover); }
.buyer-button:disabled { border-color: var(--buyer-line); background: var(--buyer-neutral-bg); color: var(--buyer-disabled-text); cursor: not-allowed; }

.buyer-button:focus-visible,
.buyer-privacy-summary:focus-visible,
.buyer-footer-link:focus-visible,
.buyer-dialog-close:focus-visible,
.buyer-help-contact:focus-visible,
.buyer-accessibility-summary:focus-visible,
.buyer-technical-summary:focus-visible,
.buyer-import-file-field input:focus-visible,
.buyer-mapping-row select:focus-visible,
.buyer-record-search input:focus-visible,
.buyer-record-filter input:focus-visible,
.buyer-field input:focus-visible,
.buyer-field select:focus-visible,
.buyer-field textarea:focus-visible {
  outline: 3px solid var(--buyer-focus);
  outline-offset: 2px;
}

.buyer-local-note { background: var(--buyer-surface-muted); }
.buyer-local-note-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.buyer-clear-data { white-space: nowrap; }

.buyer-dirty-indicator { background: var(--buyer-warning-bg); color: var(--buyer-warning-text); }
.buyer-live-region { min-height: 24px; margin: 0; color: var(--buyer-accent-text); font-weight: 700; }
.buyer-fatal { max-width: 680px; margin: 80px auto; border-color: var(--buyer-danger-line); }
.buyer-fatal p { margin-bottom: 0; color: var(--buyer-muted); }
.buyer-noscript { margin: 20px 0; border: 1px solid var(--buyer-danger-line); border-radius: 8px; background: var(--buyer-danger-bg); padding: 16px; color: var(--buyer-danger-text); }
.buyer-noscript h2 { margin: 0; font-size: 19px; line-height: 1.3; }
.buyer-noscript p { margin: 6px 0 0; }

/* Task 224: adopt the shop preview text into a field on request. */
.buyer-shop-texts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 16px;
}
.buyer-shop-texts[hidden] { display: none; }
.buyer-shop-texts .buyer-help { flex: 1 1 220px; }
.buyer-shop-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.buyer-shop-text [hidden] { display: none; }
.buyer-shop-text-confirm {
  flex: 1 1 100%;
  border-left: 3px solid var(--buyer-focus);
  padding: 6px 0 6px 10px;
}
.buyer-shop-text-confirm .buyer-help { color: var(--buyer-text); margin-bottom: 8px; }
.buyer-shop-text-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --buyer-bg: #101719;
    --buyer-panel: #192326;
    --buyer-soft: #203735;
    --buyer-line: #687a7e;
    --buyer-text: #f1f5f5;
    --buyer-muted: #c0ccce;
    --buyer-accent: #347a7d;
    --buyer-accent-dark: #286164;
    --buyer-accent-text: #9ee2dd;
    --buyer-on-accent: #ffffff;
    --buyer-danger: #ff9b8b;
    --buyer-warning-bg: #3a2f16;
    --buyer-warning-line: #d8b85c;
    --buyer-warning-text: #f6d47a;
    --buyer-danger-bg: #432520;
    --buyer-danger-text: #ffb0a3;
    --buyer-danger-line: #ff9b8b;
    --buyer-retired-bg: #3f2425;
    --buyer-neutral-bg: #283538;
    --buyer-success: #83d6ad;
    --buyer-privacy-line: #69aaa8;
    --buyer-info-line: #85aebd;
    --buyer-input-line: #718387;
    --buyer-table-line: #607277;
    --buyer-surface-header: #243336;
    --buyer-surface-muted: #202c2f;
    --buyer-surface-summary: #1e292c;
    --buyer-surface-subtle: #1d282b;
    --buyer-surface-active: #1f3937;
    --buyer-surface-accent: #1b3433;
    --buyer-surface-preview: #1c2f30;
    --buyer-attention-bg: #493916;
    --buyer-scope-warning-line: #d8b85c;
    --buyer-progress-active: #2a4342;
    --buyer-progress-line: #69aaa8;
    --buyer-accent-soft-line: #6bb8b4;
    --buyer-button-hover: #253b3b;
    --buyer-disabled-text: #a8b4b6;
    --buyer-focus: #79e2dc;
    --buyer-focus-strong: #91f0ea;
    --buyer-active-ring: rgba(121, 226, 220, 0.35);
    --buyer-shadow-floating: rgba(0, 0, 0, 0.55);
    --buyer-shadow-panel: rgba(0, 0, 0, 0.5);
    --buyer-shadow-soft: rgba(0, 0, 0, 0.35);
    --buyer-backdrop: rgba(0, 0, 0, 0.82);
  }
}

@media print {
  :root {
    color-scheme: light;
    --buyer-bg: #f3f5f5;
    --buyer-panel: #ffffff;
    --buyer-soft: #edf5f2;
    --buyer-line: #7b898c;
    --buyer-text: #203034;
    --buyer-muted: #5d6d71;
    --buyer-accent: #23686a;
    --buyer-accent-dark: #174f51;
    --buyer-accent-text: #174f51;
    --buyer-on-accent: #ffffff;
    --buyer-danger: #a23b2a;
    --buyer-warning-bg: #fff8e8;
    --buyer-warning-line: #8a6516;
    --buyer-warning-text: #725214;
    --buyer-danger-bg: #fff4f1;
    --buyer-danger-text: #7f2f22;
    --buyer-danger-line: #a23b2a;
    --buyer-retired-bg: #fff0ed;
    --buyer-neutral-bg: #edf0f0;
    --buyer-success: #1d6a4a;
    --buyer-privacy-line: #5d8378;
    --buyer-info-line: #7195a3;
    --buyer-input-line: #6f8083;
    --buyer-table-line: #7b898c;
    --buyer-surface-header: #f2f6f5;
    --buyer-surface-muted: #f8faf9;
    --buyer-surface-summary: #f7f9f9;
    --buyer-surface-subtle: #fbfcfc;
    --buyer-surface-active: #f1f8f6;
    --buyer-surface-accent: #f3f8f8;
    --buyer-surface-preview: #fbfdfd;
    --buyer-attention-bg: #fff2ce;
    --buyer-scope-warning-line: #8a6516;
    --buyer-progress-active: #dfeceb;
    --buyer-progress-line: #5b817d;
    --buyer-accent-soft-line: #5b817d;
    --buyer-button-hover: #eef5f5;
    --buyer-disabled-text: #526367;
    --buyer-focus: #23686a;
    --buyer-focus-strong: #174f51;
    --buyer-active-ring: rgba(35, 104, 106, 0.12);
    --buyer-shadow-floating: rgba(28, 68, 70, 0.24);
    --buyer-shadow-panel: rgba(30, 45, 46, 0.2);
    --buyer-shadow-soft: rgba(30, 45, 46, 0.08);
  --buyer-backdrop: rgba(12, 25, 27, 0.66);
  }

  .buyer-skip-link { display: none; }
}

@media (max-width: 1840px) {
  .buyer-technical-details {
    position: static;
    z-index: auto;
    margin: 20px 0 0;
    border: 1px solid var(--buyer-line);
    border-radius: 8px;
    background: var(--buyer-panel);
  }
  .buyer-technical-summary {
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    padding: 10px 14px;
    color: var(--buyer-accent-text);
    font-size: 16px;
  }
  .buyer-technical-summary::before { display: none; }
  .buyer-technical-details[open] .buyer-technical-summary {
    border-bottom: 1px solid var(--buyer-line);
    border-radius: 8px 8px 0 0;
    background: transparent;
  }
  .buyer-technical-body {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 760px) {
  .buyer-form-shell { width: min(100% - 24px, 960px); margin: 20px auto 36px; }
  .buyer-form-header h1,
  .buyer-form-header h2 { font-size: 26px; }
  .buyer-section-heading { align-items: flex-start; flex-direction: column; }
  .buyer-import-controls { grid-template-columns: 1fr; }
  .buyer-row-primary-actions { width: 100%; justify-content: space-between; }
  .buyer-flow-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buyer-review-shared-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.buyer-layout-sketch-host {
  margin: 20px 0;
  min-width: 0;
  max-width: 100%;
}

.buyer-layout-sketch {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--buyer-muted);
  border-radius: 14px;
  padding: 20px;
  background: var(--buyer-panel);
  box-shadow: 0 10px 30px var(--buyer-shadow-soft);
  overflow-wrap: anywhere;
}

.buyer-layout-sketch-heading {
  margin: 0;
  font-size: clamp(20px, 4vw, 26px);
}

.buyer-layout-sketch-intro,
.buyer-layout-sketch-note {
  margin: 6px 0 0;
  color: var(--buyer-muted);
  font-size: 14px;
}

.buyer-layout-sketch-record-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.buyer-layout-sketch-record-navigation[hidden] {
  display: none;
}

.buyer-layout-sketch-record-button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--buyer-muted);
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--buyer-panel);
  color: var(--buyer-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.buyer-layout-sketch-record-button:hover:not(:disabled) {
  border-color: var(--buyer-accent);
  background: var(--buyer-button-hover);
}

.buyer-layout-sketch-record-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.buyer-layout-sketch-record-button:focus-visible {
  outline: 3px solid var(--buyer-text);
  outline-offset: 2px;
}

.buyer-layout-sketch-record-position {
  margin: 0;
  color: var(--buyer-text);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.buyer-layout-sketch-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.buyer-layout-sketch-active-page {
  margin: 8px 0 0;
  color: var(--buyer-muted);
  font-size: 13px;
  font-weight: 700;
}

.buyer-layout-sketch-page {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 44px;
  max-width: 100%;
  min-height: 44px;
  border: 1px solid var(--buyer-muted);
  border-radius: 999px;
  padding: 9px 16px;
  background: var(--buyer-panel);
  color: var(--buyer-text);
  font: inherit;
  font-weight: 700;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.buyer-layout-sketch-page-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.buyer-layout-sketch-page-status {
  font-size: 12px;
  font-weight: 800;
  white-space: normal;
}

.buyer-layout-sketch-page-state-empty .buyer-layout-sketch-page-status {
  color: var(--buyer-muted);
}

.buyer-layout-sketch-page-state-filled .buyer-layout-sketch-page-status {
  color: var(--buyer-success);
}

.buyer-layout-sketch-page-state-partial .buyer-layout-sketch-page-status {
  color: var(--buyer-warning-text);
}

.buyer-layout-sketch-page-state-invalid .buyer-layout-sketch-page-status {
  color: var(--buyer-danger-text);
}

.buyer-layout-sketch-page:hover {
  border-color: var(--buyer-accent);
  background: var(--buyer-button-hover);
}

.buyer-layout-sketch-page:focus-visible {
  outline: 3px solid var(--buyer-text);
  outline-offset: 2px;
}

.buyer-layout-sketch-page,
.buyer-layout-sketch-record-button,
.buyer-layout-sketch-summary-field-action,
.buyer-field input,
.buyer-field select,
.buyer-field textarea {
  scroll-margin-block: 24px;
}

.buyer-layout-sketch-page-active {
  border-color: var(--buyer-text);
  background: var(--buyer-progress-active);
  color: var(--buyer-accent-text);
}

.buyer-layout-sketch-page-active .buyer-layout-sketch-page-status {
  color: currentColor;
}

.buyer-layout-sketch-visual,
.buyer-layout-sketch-visual-content {
  min-width: 0;
  max-width: 100%;
}

.buyer-layout-sketch-visual:not([open]) > .buyer-layout-sketch-visual-content {
  display: none;
}

.buyer-layout-sketch-visual-toggle {
  display: none;
  min-height: 44px;
  border: 2px solid var(--buyer-muted);
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--buyer-panel);
  color: var(--buyer-text);
  font-weight: 700;
  cursor: pointer;
}

.buyer-layout-sketch-visual-toggle:focus-visible {
  outline: 3px solid var(--buyer-text);
  outline-offset: 2px;
}

.buyer-layout-sketch-visual-heading {
  margin: 20px 0 0;
  font-size: clamp(18px, 3.5vw, 22px);
}

.buyer-layout-sketch-legend {
  margin-top: 10px;
  border: 1px solid var(--buyer-muted);
  border-radius: 10px;
  background: var(--buyer-surface-muted);
}

.buyer-layout-sketch-legend-title {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.buyer-layout-sketch-legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  border-top: 1px solid var(--buyer-line);
  padding: 10px 12px;
  list-style: none;
  color: var(--buyer-muted);
  font-size: 12px;
  font-weight: 700;
}

.buyer-layout-sketch-legend-invalid { color: var(--buyer-danger-text); }
.buyer-layout-sketch-legend-partial { color: var(--buyer-warning-text); }
.buyer-layout-sketch-legend-filled { color: var(--buyer-success); }

.buyer-layout-sketch-canvas {
  display: grid;
  place-items: center;
  min-height: 220px;
  margin-top: 16px;
  border: 1px solid var(--buyer-muted);
  border-radius: 12px;
  padding: 18px;
  overflow: hidden;
  background: var(--buyer-surface-preview);
}

.buyer-layout-sketch-svg {
  display: block;
  min-width: 0;
  width: 100%;
  height: auto;
  max-width: 520px;
  max-height: 62vh;
  overflow: visible;
  font-family: Arial, Helvetica, sans-serif;
}

.buyer-layout-sketch-outline {
  fill: var(--buyer-panel);
  stroke: var(--buyer-text);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.buyer-layout-sketch-svg[data-motif-background="protected_product_preview"]
  .buyer-layout-sketch-outline {
  fill-opacity: 0.16;
}

.buyer-layout-sketch-motif-background {
  opacity: 0.38;
  pointer-events: none;
}

.buyer-layout-sketch-motif-veil {
  fill: var(--buyer-panel);
  fill-opacity: 0.18;
  pointer-events: none;
}

.buyer-layout-sketch-zone-shape {
  fill: var(--buyer-soft);
  fill-opacity: 0.82;
  stroke: var(--buyer-accent);
  stroke-width: 1.25;
  stroke-dasharray: 5 3;
  vector-effect: non-scaling-stroke;
}

.buyer-layout-sketch-zone-actionable {
  cursor: pointer;
}

.buyer-layout-sketch-zone-actionable:hover .buyer-layout-sketch-zone-shape {
  stroke-width: 3;
}

.buyer-layout-sketch-zone-state-empty .buyer-layout-sketch-zone-shape {
  fill: var(--buyer-surface-subtle);
  stroke: var(--buyer-muted);
  stroke-dasharray: 5 3;
}

.buyer-layout-sketch-zone-state-filled .buyer-layout-sketch-zone-shape {
  fill: var(--buyer-soft);
  stroke: var(--buyer-success);
  stroke-dasharray: none;
}

.buyer-layout-sketch-zone-state-partial .buyer-layout-sketch-zone-shape {
  fill: var(--buyer-warning-bg);
  stroke: var(--buyer-warning-text);
  stroke-dasharray: 9 3 2 3;
}

.buyer-layout-sketch-zone-state-invalid .buyer-layout-sketch-zone-shape {
  fill: var(--buyer-danger-bg);
  stroke: var(--buyer-danger);
  stroke-width: 2.25;
  stroke-dasharray: 2 2;
}

.buyer-layout-sketch-zone-state-not_applicable .buyer-layout-sketch-zone-shape {
  fill: var(--buyer-surface-subtle);
  stroke: var(--buyer-accent);
  stroke-dasharray: 2 4;
}

.buyer-layout-sketch-zone-decoration-mark {
  fill: var(--buyer-accent);
  fill-opacity: 0.58;
  stroke: var(--buyer-accent-text);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.buyer-layout-sketch-zone-decoration path.buyer-layout-sketch-zone-decoration-mark {
  fill: none;
}

.buyer-layout-sketch-zone-decoration-string {
  fill: none;
  stroke: var(--buyer-accent-text);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.buyer-layout-sketch-zone-focused .buyer-layout-sketch-zone-shape {
  stroke-width: 3;
}

.buyer-layout-sketch-zone-current-record .buyer-layout-sketch-zone-shape {
  fill-opacity: 1;
}

.buyer-layout-sketch-zone-meta {
  fill: var(--buyer-accent-text);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.buyer-layout-sketch-zone-state-invalid .buyer-layout-sketch-zone-meta {
  fill: var(--buyer-danger-text);
}

.buyer-layout-sketch-zone-state-partial .buyer-layout-sketch-zone-meta {
  fill: var(--buyer-warning-text);
}

.buyer-layout-sketch-zone-state-filled .buyer-layout-sketch-zone-meta {
  fill: var(--buyer-success);
}

.buyer-layout-sketch-zone-label {
  fill: var(--buyer-muted);
  font-weight: 700;
}

.buyer-layout-sketch-zone-value {
  fill: var(--buyer-text);
  font-weight: 700;
}

.buyer-field-rules {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--buyer-text);
}

.buyer-character-counter-excess {
  color: var(--buyer-danger-text);
  font-weight: 700;
}

.buyer-layout-sketch-readable-fields {
  margin-top: 20px;
  color: var(--buyer-text);
  font-size: 16px;
  line-height: 1.5;
}

.buyer-layout-sketch-readable-heading {
  margin: 0 0 12px;
  font-size: 18px;
}

.buyer-layout-sketch-readable-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.buyer-layout-sketch-readable-field {
  min-width: 0;
  border: 1px solid var(--buyer-line);
  border-radius: 8px;
  padding: 12px;
  background: var(--buyer-panel);
  overflow-wrap: anywhere;
}

.buyer-layout-sketch-readable-label { font-weight: 700; }

.buyer-layout-sketch-readable-value {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.buyer-layout-sketch-readable-status {
  margin: 8px 0 0;
  color: var(--buyer-muted);
  font-size: 14px;
}

.buyer-layout-sketch-summary {
  margin-top: 12px;
  border-top: 1px solid var(--buyer-muted);
  padding-top: 10px;
}

.buyer-layout-sketch-summary-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--buyer-text);
  font-weight: 800;
  cursor: pointer;
}

.buyer-layout-sketch-summary-toggle:focus-visible {
  outline: 3px solid var(--buyer-text);
  outline-offset: 2px;
}

.buyer-layout-sketch-summary-toggle-meta {
  color: var(--buyer-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.buyer-layout-sketch-summary-content {
  padding-top: 4px;
}

.buyer-layout-sketch-summary-heading {
  margin: 0;
  font-size: clamp(18px, 3.5vw, 22px);
}

.buyer-layout-sketch-summary-intro {
  margin: 6px 0 0;
  color: var(--buyer-muted);
  font-size: 14px;
}

.buyer-layout-sketch-summary-pages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 8px;
}

.buyer-layout-sketch-summary-page {
  min-width: 0;
  border: 0;
  border-top: 1px solid var(--buyer-line);
  border-radius: 0;
  padding: 12px 0 4px;
  background: transparent;
}

.buyer-layout-sketch-summary-page-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0;
  color: var(--buyer-text);
  font-size: 16px;
}

.buyer-layout-sketch-summary-page-status {
  margin: 3px 0 0;
  color: var(--buyer-muted);
  font-size: 13px;
  font-weight: 700;
}

.buyer-layout-sketch-summary-groups {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.buyer-layout-sketch-summary-group {
  min-width: 0;
}

.buyer-layout-sketch-summary-group + .buyer-layout-sketch-summary-group {
  border-top: 1px dashed var(--buyer-line);
  padding-top: 10px;
}

.buyer-layout-sketch-summary-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 10px;
  margin: 0;
  color: var(--buyer-text);
  font-size: 13px;
  line-height: 1.35;
}

.buyer-layout-sketch-summary-group-title {
  font-weight: 800;
}

.buyer-layout-sketch-summary-group-description {
  color: var(--buyer-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.buyer-layout-sketch-summary-empty {
  margin: 0;
  color: var(--buyer-muted);
  font-size: 13px;
}

.buyer-layout-sketch-summary-fields {
  display: grid;
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.buyer-layout-sketch-summary-field {
  min-width: 0;
  margin: 0;
}

.buyer-layout-sketch-summary-field-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--buyer-line);
  border-radius: 0;
  padding: 8px 2px;
  background: transparent;
  color: var(--buyer-text);
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.buyer-layout-sketch-summary-field-action:hover {
  color: var(--buyer-accent-text);
  background: var(--buyer-button-hover);
}

.buyer-layout-sketch-summary-field-action:focus-visible {
  outline: 3px solid var(--buyer-text);
  outline-offset: 2px;
}

.buyer-layout-sketch-summary-field-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.buyer-layout-sketch-summary-field-meta {
  color: var(--buyer-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

@media (max-width: 620px) {
  .buyer-header-topline { align-items: flex-start; flex-direction: column; gap: 8px; }
  .buyer-choice-grid,
  .buyer-field-grid,
  .buyer-shared-fields,
  .buyer-import-settings { grid-template-columns: 1fr; }
  .buyer-shared-item-long,
  .buyer-field-long { grid-column: auto; }
  .buyer-technical-list { grid-template-columns: 1fr; }
  .buyer-validation-context,
  .buyer-validation-change-values { grid-template-columns: 1fr; }
  .buyer-import-settings .buyer-field:last-child:nth-child(3) { grid-column: auto; }
  .buyer-import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buyer-mapping-labels,
  .buyer-mapping-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 10px; }
  .buyer-progress-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  .buyer-flow-actions,
  .buyer-flow-actions-split,
  .buyer-flow-actions-start { align-items: stretch; flex-direction: column-reverse; }
  .buyer-flow-actions .buyer-button { width: 100%; }
  .buyer-section,
  .buyer-row { padding: 15px; }
  .buyer-row-toolbar { justify-content: stretch; }
  .buyer-row-toolbar .buyer-button { flex: 1 1 120px; }
  .buyer-record-overview-controls,
  .buyer-record-detail-header { align-items: stretch; flex-direction: column; }
  .buyer-record-search { width: 100%; }
  .buyer-record-detail-header .buyer-button { width: 100%; }
  .buyer-scope-decision-actions,
  .buyer-dialog-actions { align-items: stretch; flex-direction: column; }
  .buyer-scope-decision-actions .buyer-button,
  .buyer-dialog-actions .buyer-button { width: 100%; }
  .buyer-scope-undo,
  .buyer-record-delete-undo { align-items: stretch; flex-direction: column; }
  .buyer-record-delete-actions { align-items: stretch; flex-direction: column; }
  .buyer-record-delete-actions .buyer-button { width: 100%; }
  .buyer-layout-sketch { padding: 16px; }
  .buyer-layout-sketch-record-navigation { gap: 6px; }
  .buyer-layout-sketch-record-button { padding: 9px 8px; }
  .buyer-layout-sketch-page { flex: 1 1 220px; justify-content: space-between; }
  .buyer-layout-sketch-visual-toggle { display: flex; align-items: center; margin-top: 14px; }
  .buyer-layout-sketch-visual[open] .buyer-layout-sketch-visual-toggle { margin-bottom: 2px; }
  .buyer-layout-sketch-canvas { padding: 12px; }
  .buyer-layout-sketch-summary-pages { grid-template-columns: 1fr; }
  .buyer-layout-sketch-summary-page-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
  .buyer-progress-list { grid-template-columns: 1fr; grid-auto-flow: row; }
  .buyer-flow-summary-grid { grid-template-columns: 1fr; }
  .buyer-review-shared-grid { grid-template-columns: 1fr; }
  .buyer-row-primary-actions { align-items: stretch; flex-direction: column; }
  .buyer-row-primary-actions .buyer-button { width: 100%; }
  .buyer-import-heading,
  .buyer-validation-heading,
  .buyer-mapping-heading,
  .buyer-preview-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .buyer-import-heading-actions { justify-content: stretch; width: 100%; }
  .buyer-import-heading-actions .buyer-button { flex: 1 1 100%; }
  .buyer-import-summary { grid-template-columns: 1fr; }
  .buyer-import-settings { grid-template-columns: 1fr; }
  .buyer-mapping-labels { display: none; }
  .buyer-mapping-row { grid-template-columns: 1fr; gap: 5px; padding: 11px 0; }
  .buyer-mapping-row-attention { margin: 0 -8px; padding-right: 8px; padding-left: 4px; }
  .buyer-mapping-target-field::before { content: "Wird übernommen als"; display: block; margin-bottom: 4px; color: var(--buyer-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
  .buyer-import-preview-shared-list { grid-template-columns: 1fr; }
  .buyer-import-actions,
  .buyer-import-apply { justify-content: stretch; }
  .buyer-import-actions .buyer-button,
  .buyer-import-apply .buyer-button { width: 100%; }
  .buyer-identical-actions { align-items: stretch; flex-direction: column; }
  .buyer-identical-actions .buyer-button { width: 100%; }
  .buyer-local-note-header { align-items: flex-start; flex-direction: column; }
  .buyer-local-note-actions { width: 100%; justify-content: space-between; }
  .buyer-privacy-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-name: none !important;
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: none !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }

  .buyer-progress-button:active { transform: none; }
}

@media (forced-colors: active) {
  body {
    background: Canvas;
    color: CanvasText;
  }

  .buyer-privacy,
  .buyer-lifecycle-status,
  .buyer-record-delete-undo,
  .buyer-help-section,
  .buyer-local-note,
  .buyer-version-note,
  .buyer-mode-note,
  .buyer-fatal,
  .buyer-section,
  .buyer-row,
  .buyer-field,
  .buyer-shared-item,
  .buyer-record-card,
  .buyer-record-detail,
  .buyer-import-advanced,
  .buyer-flow-summary-grid,
  .buyer-flow-summary-item,
  .buyer-validation-context,
  .buyer-validation-context > div,
  .buyer-dialog,
  .buyer-technical-details,
  .buyer-technical-body,
  .buyer-imprint {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .buyer-accessibility-statement {
    border-color: CanvasText;
  }

  .buyer-help-group {
    border-color: CanvasText;
  }

  .buyer-form-intro,
  .buyer-section-intro,
  .buyer-help,
  .buyer-help-section p,
  .buyer-privacy p,
  .buyer-local-note p,
  .buyer-dialog-description,
  .buyer-technical-explanation,
  .buyer-support-description,
  .buyer-form-kicker,
  .buyer-help-group-summary,
  .buyer-muted,
  .buyer-record-card-position,
  .buyer-record-card-label,
  .buyer-record-search-label,
  .buyer-field label {
    color: CanvasText;
  }

  .buyer-legal-footer,
  .buyer-privacy-details,
  .buyer-record-table-scroll,
  .buyer-record-table th,
  .buyer-record-table td,
  .buyer-record-card-status,
  .buyer-review-scroll,
  .buyer-preview-scroll,
  .buyer-preview-table th,
  .buyer-preview-table td,
  .buyer-mapping-labels,
  .buyer-mapping-row {
    border-color: CanvasText;
  }

  a,
  .buyer-help-contact,
  .buyer-record-error-link,
  .buyer-validation-issue-link {
    color: LinkText;
    text-decoration: underline;
  }

  .buyer-field input,
  .buyer-field select,
  .buyer-field textarea,
  .buyer-record-search input,
  .buyer-import-file-field input[type="file"],
  .buyer-mapping-row select,
  .buyer-scope-record-select {
    border-color: ButtonText;
    background: Canvas;
    color: CanvasText;
  }

  .buyer-button,
  .buyer-progress-button,
  .buyer-accessibility-summary,
  .buyer-technical-summary,
  .buyer-import-advanced > summary,
  .buyer-validation-technical > summary,
  .buyer-privacy-summary {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }

  .buyer-button-primary,
  .buyer-progress-step[aria-current="step"] .buyer-progress-button,
  .buyer-progress-step[aria-current="step"] .buyer-progress-number,
  .buyer-record-current-marker {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }

  .buyer-progress-number {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .buyer-button:disabled,
  .buyer-progress-step[aria-disabled="true"],
  .buyer-progress-step[aria-disabled="true"] .buyer-progress-button,
  .buyer-progress-step[aria-disabled="true"] .buyer-progress-number {
    border-color: GrayText;
    background: Canvas;
    color: GrayText;
    opacity: 1;
  }

  .buyer-record-table tbody tr.buyer-record-active,
  .buyer-record-card.buyer-record-active {
    background: Canvas;
    outline: 2px solid Highlight;
    outline-offset: -2px;
    box-shadow: none;
  }

  .buyer-version-status,
  .buyer-validation-badge,
  .buyer-mapping-status,
  .buyer-local-badge,
  .buyer-dirty-indicator {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .buyer-version-note-draft,
  .buyer-mode-note,
  .buyer-scope-decision,
  .buyer-mapping-row-attention,
  .buyer-import-semantic,
  .buyer-validation-warnings,
  .buyer-validation-changes,
  .buyer-pdf-stale,
  .buyer-import-issues,
  .buyer-mapping-gate,
  .buyer-validation-errors,
  .buyer-capture-validation-error {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px;
  }

  .buyer-dialog::backdrop {
    background: Canvas;
    opacity: 0.88;
  }
  .buyer-layout-sketch {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
    forced-color-adjust: none;
  }

  .buyer-layout-sketch-intro,
  .buyer-layout-sketch-note,
  .buyer-layout-sketch-active-page,
  .buyer-layout-sketch-summary-intro,
  .buyer-layout-sketch-summary-toggle-meta,
  .buyer-layout-sketch-summary-field-meta,
  .buyer-layout-sketch-summary-page-status,
  .buyer-layout-sketch-legend-list,
  .buyer-field-meta-content {
    color: CanvasText;
  }

  .buyer-layout-sketch-page .buyer-layout-sketch-page-status {
    color: currentColor;
  }

  .buyer-layout-sketch-legend-item,
  .buyer-layout-sketch-visual-heading,
  .buyer-layout-sketch-record-position,
  .buyer-layout-sketch-summary-page-heading {
    color: CanvasText;
  }

  .buyer-layout-sketch-visual-toggle,
  .buyer-layout-sketch-legend-title,
  .buyer-layout-sketch-summary-toggle,
  .buyer-layout-sketch-page,
  .buyer-layout-sketch-record-button,
  .buyer-layout-sketch-summary-field-action,
  .buyer-field-meta-toggle {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .buyer-layout-sketch-page-active {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }

  .buyer-layout-sketch-page:hover,
  .buyer-layout-sketch-legend-title:hover,
  .buyer-layout-sketch-summary-toggle:hover,
  .buyer-layout-sketch-record-button:hover,
  .buyer-layout-sketch-summary-field-action:hover,
  .buyer-field-meta-toggle:hover {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .buyer-layout-sketch-page-active:hover {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }

  .buyer-layout-sketch-visual-toggle:focus-visible,
  .buyer-layout-sketch-legend-title:focus-visible,
  .buyer-layout-sketch-summary-toggle:focus-visible,
  .buyer-layout-sketch-page:focus-visible,
  .buyer-layout-sketch-record-button:focus-visible,
  .buyer-layout-sketch-summary-field-action:focus-visible,
  .buyer-field-meta-toggle:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  .buyer-layout-sketch-legend,
  .buyer-layout-sketch-canvas,
  .buyer-layout-sketch-summary,
  .buyer-layout-sketch-summary-page {
    border-color: CanvasText;
    background: Canvas;
  }

  .buyer-layout-sketch-outline {
    fill: Canvas;
    fill-opacity: 1;
    stroke: CanvasText;
  }

  .buyer-layout-sketch-motif-background,
  .buyer-layout-sketch-motif-veil {
    display: none;
  }

  .buyer-layout-sketch-zone-shape {
    fill: Canvas;
    stroke: CanvasText;
  }

  .buyer-layout-sketch-zone-state-empty .buyer-layout-sketch-zone-shape {
    fill: Canvas;
    stroke: GrayText;
    stroke-dasharray: 5 3;
  }

  .buyer-layout-sketch-zone-state-filled .buyer-layout-sketch-zone-shape {
    fill: Canvas;
    stroke: LinkText;
    stroke-width: 2;
    stroke-dasharray: none;
  }

  .buyer-layout-sketch-zone-state-partial .buyer-layout-sketch-zone-shape {
    fill: Canvas;
    stroke: Highlight;
    stroke-width: 2;
    stroke-dasharray: 9 3 2 3;
  }

  .buyer-layout-sketch-zone-state-invalid .buyer-layout-sketch-zone-shape {
    fill: Canvas;
    stroke: CanvasText;
    stroke-width: 3;
    stroke-dasharray: 2 2;
  }

  .buyer-layout-sketch-zone-meta,
  .buyer-layout-sketch-zone-label,
  .buyer-layout-sketch-zone-value,
  .buyer-layout-sketch-zone-state-filled .buyer-layout-sketch-zone-meta,
  .buyer-layout-sketch-zone-state-partial .buyer-layout-sketch-zone-meta,
  .buyer-layout-sketch-zone-state-invalid .buyer-layout-sketch-zone-meta {
    fill: CanvasText;
  }
}

/* Data capture as two visible steps: shared values, then values per record. */
.buyer-capture-substep-next[hidden],
.buyer-capture-substep-back[hidden],
.buyer-capture-shared-intro[hidden] { display: none; }

.buyer-capture-shared-intro { margin: 0 0 16px; }

.buyer-capture-substep-next {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* The capture heading is no card: the stepper and section titles name the
   step, so the heading is kept for screen readers only and the row carries
   just the field help toggle. */
.buyer-design-2a .buyer-flow-heading.buyer-capture-heading,
.buyer-flow-heading.buyer-capture-heading {
  justify-content: flex-end;
  min-height: 0;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.buyer-capture-heading .buyer-flow-step-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Field help is a secondary aid: a quiet text toggle at the far right. */
.buyer-flow-heading .buyer-button.buyer-field-help-toggle {
  margin-inline-start: auto;
  min-height: 44px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--buyer-accent-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-capture-substep="shared"] .buyer-rows-section,
[data-capture-substep="shared"] .buyer-import-section,
[data-capture-substep="shared"] .buyer-flow-blocker,
[data-capture-substep="shared"] .buyer-capture-completion,
[data-capture-substep="shared"] .buyer-capture-validation-neutral,
[data-capture-substep="records"] .buyer-capture-shared-intro,
[data-capture-substep="records"] .buyer-shared-section,
[data-capture-substep="records"] .buyer-choice-section,
[data-capture-substep="records"] .buyer-capture-substep-next {
  display: none !important;
}

/* Task 229: these controls exist only for an explicitly versioned opt-in. */
[data-capture-input-modes] .buyer-shared-values-summary {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  border: 1px solid var(--buyer-line);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--buyer-surface-summary);
}

[data-capture-input-modes] .buyer-shared-values-summary[hidden],
[data-capture-input-modes] .buyer-input-mode-panel[hidden] { display: none; }

[data-capture-input-modes] .buyer-shared-values-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

[data-capture-input-modes] .buyer-shared-values-summary-header h3 { margin: 0; }

[data-capture-input-modes] .buyer-shared-values-summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 16px;
  margin: 0;
}

[data-capture-input-modes] .buyer-shared-values-summary-item { min-width: 0; }
[data-capture-input-modes] .buyer-shared-values-summary-item dt {
  color: var(--buyer-muted);
  font-size: 12px;
  font-weight: 700;
}

[data-capture-input-modes] .buyer-shared-values-summary-item dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

[data-capture-input-modes] .buyer-input-mode-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--buyer-line);
}

[data-capture-input-modes] .buyer-input-mode-tab {
  min-width: 44px;
  min-height: 48px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom-color: var(--buyer-line);
  border-radius: 8px 8px 0 0;
  padding: 10px 16px;
  background: transparent;
  color: var(--buyer-muted);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

[data-capture-input-modes] .buyer-input-mode-tab[aria-selected="true"] {
  border-color: var(--buyer-line);
  border-bottom-color: var(--buyer-panel);
  background: var(--buyer-panel);
  color: var(--buyer-text);
}

[data-capture-input-modes] .buyer-input-mode-tab:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid var(--buyer-focus-strong);
  outline-offset: 2px;
}

[data-capture-input-modes] .buyer-input-mode-panel { min-width: 0; }

[data-capture-input-modes] .buyer-table-mode-note { margin: 0 0 12px; }

[data-capture-input-modes] .buyer-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}

[data-capture-input-modes] .buyer-table-undo-slot:empty { display: none; }
[data-capture-input-modes] .buyer-table-undo-slot:not(:empty) { margin-bottom: 12px; }
[data-capture-input-modes] .buyer-table-capture-view { min-width: 0; max-width: 100%; }
[data-capture-input-modes] .buyer-table-capture-scroll {
  max-width: 100%;
  max-height: 640px;
  overflow: auto;
  border: 1px solid var(--buyer-line);
  border-radius: 8px;
  scroll-padding-block-start: 64px;
}

[data-capture-input-modes] .buyer-table-capture {
  width: 100%;
  /* Cell minimums, not help text, decide when the table scrolls sideways. */
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

[data-capture-input-modes] .buyer-table-capture caption {
  padding: 10px 12px;
  background: var(--buyer-surface-subtle);
  color: var(--buyer-muted);
  font-weight: 700;
  text-align: left;
}

[data-capture-input-modes] .buyer-table-capture th,
[data-capture-input-modes] .buyer-table-capture td {
  min-width: 154px;
  border-bottom: 1px solid var(--buyer-table-line);
  padding: 9px;
  text-align: left;
  vertical-align: top;
}

[data-capture-input-modes] .buyer-table-capture thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--buyer-surface-header);
  color: var(--buyer-muted);
  box-shadow: 0 1px 0 var(--buyer-line);
}

[data-capture-input-modes] .buyer-table-capture tbody tr:last-child > * { border-bottom: 0; }
[data-capture-input-modes] .buyer-table-capture .buyer-table-position-head,
[data-capture-input-modes] .buyer-table-capture .buyer-table-position-cell { min-width: 58px; width: 58px; }
[data-capture-input-modes] .buyer-table-capture .buyer-table-actions-head,
[data-capture-input-modes] .buyer-table-capture .buyer-table-actions-cell { min-width: 136px; width: 136px; }
/* The column head already names the limit; the full rule text stays for
   screen readers and returns with "Feldhinweise anzeigen". */
[data-capture-input-modes]:not(.buyer-field-help-visible) .buyer-table-capture .buyer-field-rules {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* The inline error already states the excess; avoid saying it twice. */
[data-capture-input-modes] .buyer-table-capture .buyer-field:has(> .buyer-inline-error:not([hidden])) .buyer-character-counter-excess {
  display: none;
}
[data-capture-input-modes] .buyer-table-column-label,
[data-capture-input-modes] .buyer-table-column-limit { display: block; }
[data-capture-input-modes] .buyer-table-column-limit {
  margin-top: 3px;
  color: var(--buyer-muted);
  font-size: 11px;
  font-weight: 500;
}

[data-capture-input-modes] .buyer-table-field { min-width: 136px; }
[data-capture-input-modes] .buyer-table-field .buyer-field-meta { margin-top: 0; }
[data-capture-input-modes] .buyer-table-field input:not([type="checkbox"]),
[data-capture-input-modes] .buyer-table-field select,
[data-capture-input-modes] .buyer-table-field textarea { min-width: 136px; }
[data-capture-input-modes] .buyer-table-field textarea { min-height: 72px; resize: vertical; }
[data-capture-input-modes] .buyer-table-field input[type="checkbox"] {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

[data-capture-input-modes] .buyer-table-row-actions {
  display: grid;
  gap: 7px;
}

[data-capture-input-modes] .buyer-table-row-actions .buyer-button { width: 100%; }
[data-capture-input-modes] .buyer-table-single-link {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  padding: 6px 0;
  background: transparent;
  color: var(--buyer-accent-text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

[data-capture-input-modes] .buyer-table-record-active > * { background: var(--buyer-surface-active); }
[data-capture-input-modes] .buyer-table-record-invalid > *:first-child {
  box-shadow: inset 4px 0 0 var(--buyer-danger);
}

[data-capture-input-modes] .buyer-table-card-list { display: grid; gap: 14px; }
[data-capture-input-modes] .buyer-table-record-card {
  min-width: 0;
  border: 1px solid var(--buyer-line);
  border-radius: 9px;
  padding: 14px;
  background: var(--buyer-surface-subtle);
}

[data-capture-input-modes] .buyer-table-card-header { margin-bottom: 12px; }
[data-capture-input-modes] .buyer-table-card-title { margin: 0; font-size: 18px; }
[data-capture-input-modes] .buyer-table-record-card .buyer-table-field { margin-top: 12px; }
[data-capture-input-modes] .buyer-table-record-card .buyer-table-row-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

[data-capture-input-modes] [data-guided-import="true"] {
  display: grid;
  gap: 16px;
  min-width: 0;
}

[data-capture-input-modes] [data-guided-import="true"] .buyer-import-heading {
  align-items: flex-start;
  margin-bottom: 0;
}

[data-capture-input-modes] .buyer-import-step {
  min-width: 0;
  border: 1px solid var(--buyer-line);
  border-radius: 10px;
  padding: 16px;
  background: var(--buyer-panel);
}

[data-capture-input-modes] .buyer-import-step > h3 { margin: 0; }
[data-capture-input-modes] .buyer-import-step > .buyer-section-intro { margin: 6px 0 14px; }

[data-capture-input-modes] .buyer-import-template-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

[data-capture-input-modes] .buyer-import-field-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid var(--buyer-accent-soft-line);
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--buyer-soft);
  color: var(--buyer-accent-text);
  font-size: 13px;
  font-weight: 750;
}

[data-capture-input-modes] .buyer-import-step-source .buyer-import-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

[data-capture-input-modes] .buyer-import-drop-zone {
  display: grid;
  place-items: center;
  min-height: 132px;
  border: 2px dashed var(--buyer-accent-soft-line);
  border-radius: 9px;
  padding: 18px;
  background: var(--buyer-soft);
  color: var(--buyer-accent-text);
  font-weight: 750;
  text-align: center;
  cursor: pointer;
}

[data-capture-input-modes] .buyer-import-drop-zone:hover,
[data-capture-input-modes] .buyer-import-drop-zone:focus-visible,
[data-capture-input-modes] .buyer-import-drop-zone[data-drag-active="true"],
[data-capture-input-modes] .buyer-import-drop-zone-active,
[data-capture-input-modes] .buyer-import-drop-zone.is-drag-over {
  border-color: var(--buyer-focus-strong);
  outline: 3px solid var(--buyer-active-ring);
  outline-offset: 2px;
}

[data-capture-input-modes] .buyer-import-paste-field {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

[data-capture-input-modes] .buyer-import-paste-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 132px;
  resize: vertical;
}

[data-capture-input-modes] .buyer-import-paste-field .buyer-button,
[data-capture-input-modes] .buyer-import-step > .buyer-button,
[data-capture-input-modes] .buyer-import-drop-zone { min-height: 44px; }

[data-capture-input-modes] .buyer-import-step .buyer-import-advanced { margin-top: 14px; }
[data-capture-input-modes] .buyer-import-step-review .buyer-import-workspace {
  margin-top: 14px;
  border-top: 1px solid var(--buyer-line);
  padding-top: 14px;
}

[data-capture-input-modes] .buyer-import-result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 0;
}

[data-capture-input-modes] .buyer-import-result-stat {
  min-width: 0;
  border-radius: 7px;
  padding: 10px 12px;
  background: var(--buyer-surface-muted);
}

[data-capture-input-modes] .buyer-import-result-stat dt {
  color: var(--buyer-muted);
  font-size: 12px;
  font-weight: 700;
}

[data-capture-input-modes] .buyer-import-result-stat dd {
  margin: 3px 0 0;
  font-size: 18px;
  font-weight: 800;
}

[data-capture-input-modes] [data-csv-action="choose-other"] { margin-top: 14px; }
[data-capture-input-modes][data-capture-substep="shared"] .buyer-shared-values-summary,
[data-capture-input-modes][data-capture-substep="shared"] .buyer-input-mode-tabs,
[data-capture-input-modes][data-capture-substep="shared"] .buyer-input-mode-panel {
  display: none !important;
}

@media (max-width: 620px) {
  [data-capture-input-modes] .buyer-shared-values-summary-header {
    align-items: stretch;
    flex-direction: column;
  }

  [data-capture-input-modes] .buyer-shared-values-summary-edit { width: 100%; }
  [data-capture-input-modes] .buyer-shared-values-summary-list { grid-template-columns: 1fr; }
  /* Equal columns keep all tabs in one row instead of a ragged wrap. */
  [data-capture-input-modes] .buyer-input-mode-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2px;
  }
  [data-capture-input-modes] .buyer-input-mode-tab {
    padding: 8px 6px;
    font-size: 14px;
    line-height: 1.25;
  }
  /* Keep the sticky step bar short: going back is a secondary text action. */
  [data-capture-input-modes] .buyer-capture-substep-back {
    min-height: 44px;
    border-color: transparent;
    background: transparent;
    color: var(--buyer-accent-text);
    padding-block: 6px;
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
  }
  [data-capture-input-modes] .buyer-table-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  [data-capture-input-modes] .buyer-table-filter { width: 100%; }
  [data-capture-input-modes] .buyer-table-filter input {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
  [data-capture-input-modes] .buyer-table-add { width: 100%; }
  [data-capture-input-modes] .buyer-table-record-card,
  [data-capture-input-modes] .buyer-table-record-card * { min-width: 0; }
  [data-capture-input-modes] .buyer-table-record-card .buyer-table-field input:not([type="checkbox"]),
  [data-capture-input-modes] .buyer-table-record-card .buyer-table-field select,
  [data-capture-input-modes] .buyer-table-record-card .buyer-table-field textarea { min-width: 0; width: 100%; }
  [data-capture-input-modes] .buyer-table-record-card .buyer-shop-text,
  [data-capture-input-modes] .buyer-table-record-card .buyer-shop-text-actions { align-items: stretch; }
  [data-capture-input-modes] .buyer-table-record-card .buyer-shop-text .buyer-button { width: 100%; }
  [data-capture-input-modes] .buyer-import-step { padding: 14px; }
  [data-capture-input-modes] .buyer-import-step-source .buyer-import-controls,
  [data-capture-input-modes] .buyer-import-result-stats { grid-template-columns: minmax(0, 1fr); }
  [data-capture-input-modes] .buyer-import-drop-zone { min-height: 112px; }
  [data-capture-input-modes] .buyer-import-step .buyer-button { width: 100%; }
}

@media (forced-colors: active) {
  [data-capture-input-modes] .buyer-table-capture-scroll,
  [data-capture-input-modes] .buyer-table-record-card,
  [data-capture-input-modes] .buyer-table-capture th,
  [data-capture-input-modes] .buyer-table-capture td { border-color: CanvasText; }
  [data-capture-input-modes] .buyer-table-record-active > * { outline: 2px solid Highlight; }
  [data-capture-input-modes] .buyer-table-record-invalid > *:first-child { box-shadow: inset 4px 0 0 CanvasText; }
  [data-capture-input-modes] .buyer-import-step,
  [data-capture-input-modes] .buyer-import-drop-zone,
  [data-capture-input-modes] .buyer-import-field-chip { border-color: CanvasText; }
}

/* Task 230.1: step bar of forms with capture input modes. Only the current
   step is highlighted; a passed step shows a check only while its data is
   complete. The shell is a size container, so the bar follows the width the
   form actually has (e.g. the dashboard preview), not the window. */
.buyer-capture-modes { container: buyer-form / inline-size; }
.buyer-capture-modes .buyer-progress .buyer-progress-step-reached:not([aria-current="step"]),
.buyer-capture-modes .buyer-progress .buyer-progress-step-complete:not([aria-current="step"]) {
  border-color: transparent;
}
.buyer-capture-modes .buyer-progress .buyer-progress-step,
.buyer-capture-modes .buyer-progress .buyer-progress-label,
.buyer-capture-modes .buyer-progress .buyer-progress-button,
.buyer-capture-modes .buyer-progress .buyer-progress-copy { min-width: 0; }
.buyer-capture-modes .buyer-progress .buyer-progress-text {
  overflow-wrap: break-word;
  hyphens: auto;
}
.buyer-capture-modes .buyer-progress [data-step-status="complete"] .buyer-progress-number {
  border-color: var(--buyer-success);
  background: transparent;
  color: var(--buyer-success);
}
.buyer-capture-modes .buyer-section-marker { display: none; }

@container buyer-form (max-width: 760px) {
  /* Too narrow for number and label side by side: stack them so every step
     keeps its visible label without overlapping its neighbours. */
  .buyer-capture-modes .buyer-progress .buyer-progress-label,
  .buyer-capture-modes .buyer-progress .buyer-progress-button {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-inline: 4px;
    text-align: center;
  }
  .buyer-capture-modes .buyer-progress .buyer-progress-text {
    font-size: 12px;
    line-height: 1.25;
  }
}

/* Task 230.2: transient notice (snackbar) for forms with input modes. */
.buyer-notice {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 4px 16px;
  box-sizing: border-box;
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  min-height: 48px;
  border-radius: 8px;
  padding: 10px 12px 10px 16px;
  background: var(--buyer-text);
  box-shadow: 0 6px 20px var(--buyer-shadow-floating);
  color: var(--buyer-panel);
  font-size: 15px;
  line-height: 1.4;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}
.buyer-notice[hidden] { display: none; }
.buyer-notice--visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.buyer-notice--warning { border-left: 4px solid var(--buyer-warning-border, var(--buyer-danger-text)); }
.buyer-notice-text { flex: 1 1 auto; min-width: 0; }
.buyer-notice-action {
  flex: 0 0 auto;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.buyer-notice-action:focus-visible { outline: 3px solid var(--buyer-panel); outline-offset: 2px; }
.buyer-notice-action[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .buyer-notice { transform: translate(-50%, 0); transition: opacity 150ms linear; }
}

/* Task 230.5: lean table — column hints in the header, icon row actions. */
[data-capture-input-modes] .buyer-table-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
[data-capture-input-modes] .buyer-table-column-meta { position: static; }
[data-capture-input-modes] .buyer-table-column-meta > .buyer-field-meta-toggle {
  position: static;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
}
[data-capture-input-modes] .buyer-table-column-meta[open] > .buyer-field-meta-content,
[data-capture-input-modes].buyer-field-help-visible .buyer-table-column-meta > .buyer-field-meta-content {
  display: block;
  margin-top: 6px;
  color: var(--buyer-text);
  font-size: 13px;
  font-weight: 400;
  white-space: normal;
}
[data-capture-input-modes] .buyer-table-capture .buyer-table-actions-head,
[data-capture-input-modes] .buyer-table-capture .buyer-table-actions-cell { min-width: 104px; width: 104px; }
[data-capture-input-modes] .buyer-table-capture .buyer-table-row-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}
[data-capture-input-modes] .buyer-button.buyer-table-icon-action {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--buyer-muted);
}
[data-capture-input-modes] .buyer-button.buyer-table-icon-action:hover,
[data-capture-input-modes] .buyer-button.buyer-table-icon-action:focus-visible {
  border-color: var(--buyer-line);
  background: var(--buyer-surface-subtle);
  color: var(--buyer-text);
}
[data-capture-input-modes] .buyer-button.buyer-table-icon-action[data-table-record-action="delete"]:hover,
[data-capture-input-modes] .buyer-button.buyer-table-icon-action[data-table-record-action="delete"]:focus-visible {
  color: var(--buyer-danger-text);
}
[data-capture-input-modes] .buyer-table-filter[hidden] { display: none; }

/* Task 230.7: the opted-in sketch places neutral preview text on the card
   and keeps its field status in compact HTML beside it.  The additional
   class is applied only by the capture-input-modes renderer; legacy sketches
   therefore retain their established zone badges and readable-value cards. */
.buyer-layout-sketch--placed-text {
  container: buyer-sketch-preview / inline-size;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-placed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.68fr);
  align-items: start;
  gap: 18px;
  min-width: 0;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-placed-layout >
  :is(.buyer-layout-sketch-visual-heading, .buyer-layout-sketch-note) {
  grid-column: 1 / -1;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-canvas {
  box-sizing: border-box;
  min-width: 0;
  margin-top: 0;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-svg {
  overflow: hidden;
  font-family: inherit;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-legend,
.buyer-layout-sketch--placed-text .buyer-layout-sketch-summary {
  display: none;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-fields {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--buyer-line);
  border-radius: 10px;
  padding: 14px;
  background: var(--buyer-panel);
  font-size: 14px;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-heading {
  margin-bottom: 8px;
  font-size: 16px;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-list {
  gap: 0;
  padding: 0;
  list-style: none;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 12px;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--buyer-line);
  border-radius: 0;
  padding: 9px 0;
  background: transparent;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-field:last-child {
  border-bottom: 0;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-row,
.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 12px;
  min-width: 0;
  width: 100%;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-action {
  min-height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-action:hover {
  color: var(--buyer-accent-text);
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-action:focus-visible {
  border-radius: 6px;
  outline: 3px solid var(--buyer-text);
  outline-offset: 2px;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-value {
  display: none;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-status {
  margin: 0;
  color: var(--buyer-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

/* The card itself is deliberately not a validation surface.  Filled,
   partial and invalid field states share the same quiet zone treatment;
   validation errors remain at the corresponding form field. */
.buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-shape,
.buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-state-empty .buyer-layout-sketch-zone-shape,
.buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-state-filled .buyer-layout-sketch-zone-shape,
.buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-state-partial .buyer-layout-sketch-zone-shape,
.buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-state-invalid .buyer-layout-sketch-zone-shape {
  fill: transparent;
  fill-opacity: 1;
  stroke: var(--buyer-line);
  stroke-width: 1;
  stroke-dasharray: none;
}

.buyer-layout-sketch--placed-text
  :is(
    .buyer-layout-sketch-zone-preview-placeholder,
    .buyer-layout-sketch-zone-preview-step-two,
    .buyer-layout-sketch-zone-preview-partial
  )
  .buyer-layout-sketch-zone-shape {
  fill: var(--buyer-surface-subtle);
  stroke: var(--buyer-muted);
  stroke-dasharray: 4 3;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-focused .buyer-layout-sketch-zone-shape {
  stroke: var(--buyer-accent);
  stroke-width: 2.5;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-meta,
.buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-label {
  display: none;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-preview-text {
  fill: var(--buyer-text);
  font-weight: 600;
  letter-spacing: 0;
  pointer-events: none;
}

.buyer-layout-sketch--placed-text
  :is(
    .buyer-layout-sketch-zone-preview-placeholder,
    .buyer-layout-sketch-zone-preview-step-two,
    .buyer-layout-sketch-zone-preview-partial
  )
  .buyer-layout-sketch-zone-preview-text {
  fill: var(--buyer-muted);
  font-style: italic;
  font-weight: 500;
}

.buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-preview-faded {
  /* The SVG mask performs the actual soft fade.  This class intentionally
     adds no warning colour or icon: overflow of a rule-conform value is not
     an input error. */
  isolation: isolate;
}

@container buyer-sketch-preview (max-width: 560px) {
  .buyer-layout-sketch--placed-text .buyer-layout-sketch-placed-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .buyer-layout-sketch--placed-text .buyer-layout-sketch-placed-layout >
    :is(.buyer-layout-sketch-visual-heading, .buyer-layout-sketch-note) {
    grid-column: auto;
  }

  .buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-fields {
    padding: 12px;
  }
}

@container buyer-sketch-preview (max-width: 360px) {
  .buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-row,
  .buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-action {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-status {
    text-align: left;
  }
}

@media (forced-colors: active) {
  .buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-fields {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-field {
    border-color: CanvasText;
  }

  .buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-status {
    color: CanvasText;
  }

  .buyer-layout-sketch--placed-text .buyer-layout-sketch-readable-action {
    color: ButtonText;
  }

  .buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-shape,
  .buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-state-empty .buyer-layout-sketch-zone-shape,
  .buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-state-filled .buyer-layout-sketch-zone-shape,
  .buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-state-partial .buyer-layout-sketch-zone-shape,
  .buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-state-invalid .buyer-layout-sketch-zone-shape {
    fill: Canvas;
    stroke: CanvasText;
  }

  .buyer-layout-sketch--placed-text
    :is(.buyer-layout-sketch-zone-preview-placeholder, .buyer-layout-sketch-zone-preview-step-two)
    .buyer-layout-sketch-zone-shape {
    stroke: GrayText;
    stroke-dasharray: 4 3;
  }

  .buyer-layout-sketch--placed-text .buyer-layout-sketch-zone-preview-text,
  .buyer-layout-sketch--placed-text
    :is(.buyer-layout-sketch-zone-preview-placeholder, .buyer-layout-sketch-zone-preview-step-two)
    .buyer-layout-sketch-zone-preview-text {
    fill: CanvasText;
  }
}