/* Opt-in vanilla primitives. Load AFTER the host's existing feature CSS and
   design-tokens.css. Every selector needs .ps-design AND a ps-* component;
   unmarked descendants receive no typography/control reset.

   Approved sources (ZIP3; complete hashes/mapping in the fixture manifest):
   poly.css:49-95,368-395; app.css:17-40,53-63,65-74,87-114,121-127;
   poly-v2.css:60-132,200-248,305-325,380-389,531-535,563-567.
   Components/forms/{Button,Field,Chip}; display/{Card,DataTable,Pill};
   feedback/Notice; patterns/{Modal,Drawer,Skeleton}.

   This file supplies presentation, not app state or permissions. Hosts retain
   labels/IDs, real disabled and aria-busy/aria-invalid/aria-pressed attributes,
   status text, dialog focus/scroll handling and data validation. Native dialog
   is supported; non-native dialogs still require the host's accessible behavior.
*/

/* Explicit type roles, never a font/color declaration on .ps-design itself. */
.ps-design .ps-title {
  margin:0; color:var(--ps-text-heading);
  font:var(--ps-w-regular) var(--ps-t-app-title)/var(--ps-lh-display) var(--ps-serif);
  letter-spacing:-.018em; overflow-wrap:anywhere;
}
.ps-design .ps-heading {
  margin:0; color:var(--ps-text-heading);
  font:var(--ps-w-regular) var(--ps-t-h3)/1.2 var(--ps-serif);
  letter-spacing:-.012em;
}
.ps-design .ps-copy {
  margin:0; color:var(--ps-text-body);
  font:var(--ps-w-regular) var(--ps-fs-input)/var(--ps-lh-body) var(--ps-sans);
}
.ps-design .ps-caption {
  margin:0; color:var(--ps-text-muted);
  font:var(--ps-w-regular) var(--ps-fs-caption)/var(--ps-lh-body) var(--ps-sans);
}

/* Solid primary, quiet filled secondary, compact size. */
.ps-design .ps-button {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; min-height:var(--ps-h-ctrl); max-width:100%; padding:13px 22px;
  border:1px solid var(--ps-action-primary); border-radius:var(--ps-radius-control);
  background:var(--ps-action-primary); color:var(--ps-text-on-inverse);
  font:var(--ps-w-medium) var(--ps-fs-input)/var(--ps-lh-control) var(--ps-sans);
  text-align:center; text-decoration:none; cursor:pointer;
  transition:background-color .12s,border-color .12s;
}
.ps-design .ps-button:hover:not(:disabled) {
  background:var(--ps-action-primary-hover); border-color:var(--ps-action-primary-hover);
}
.ps-design .ps-button--quiet {
  background:var(--ps-surface-sunken); color:var(--ps-ink); border-color:var(--ps-border-default);
}
.ps-design .ps-button--quiet:hover:not(:disabled) {
  background:var(--ps-surface-card); border-color:var(--ps-ink2);
}
.ps-design .ps-button--small {
  min-height:var(--ps-h-ctrl-sm); padding:9px 15px; font-size:var(--ps-fs-ui);
}
.ps-design .ps-button:disabled {
  opacity:.32; cursor:not-allowed;
}
.ps-design .ps-button[aria-busy="true"] {
  cursor:wait;
}
.ps-design .ps-button:focus-visible,
.ps-design .ps-link:focus-visible,
.ps-design .ps-icon-button:focus-visible {
  outline:2px solid var(--ps-focus-ring); outline-offset:3px;
}
.ps-design .ps-link {
  display:inline; padding:4px 0; border:0; border-bottom:1px solid var(--ps-border-default);
  border-radius:0; background:none; color:var(--ps-ink2);
  font:var(--ps-w-regular) var(--ps-fs-ui)/1.3 var(--ps-sans);
  text-decoration:none; cursor:pointer;
}
.ps-design .ps-link:hover:not(:disabled) {
  color:var(--ps-link-hover); border-bottom-color:var(--ps-link-hover);
}
.ps-design .ps-link:disabled,
.ps-design .ps-icon-button:disabled {
  opacity:.32; cursor:not-allowed;
}
.ps-design .ps-icon-button {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  width:var(--ps-h-ctrl-app); height:var(--ps-h-ctrl-app); flex:none; padding:0;
  border:0; border-radius:var(--ps-radius-control); background:none; color:var(--ps-ink2);
  font:var(--ps-w-regular) 20px/1 var(--ps-sans); cursor:pointer;
}
.ps-design .ps-icon-button:hover:not(:disabled) {
  color:var(--ps-ink); background:var(--ps-surface-sunken);
}
.ps-design .ps-icon-button--inverse { color:var(--ps-paper); }
.ps-design .ps-icon-button--inverse:hover:not(:disabled) {
  color:var(--ps-paper); background:rgba(245,243,238,.08);
}
.ps-design .ps-icon-button--inverse:focus-visible { outline-color:var(--ps-paper); }

/* Label/control/error markup remains native and explicitly associated. */
.ps-design .ps-field { display:block; margin:0; min-width:0; }
.ps-design .ps-label {
  display:block; margin:0 0 7px; color:var(--ps-text-body);
  font:var(--ps-w-medium) var(--ps-fs-caption)/var(--ps-lh-body) var(--ps-sans);
}
.ps-design .ps-control {
  box-sizing:border-box; display:block; width:100%; min-width:0; min-height:var(--ps-h-ctrl);
  padding:11px 13px; border:1px solid var(--ps-border-default); border-radius:var(--ps-radius-control);
  background:var(--ps-surface-page); color:var(--ps-ink);
  font:var(--ps-w-regular) var(--ps-fs-input)/1.4 var(--ps-sans);
}
.ps-design .ps-control--textarea { min-height:96px; resize:vertical; }
.ps-design .ps-control:focus-visible {
  outline:2px solid var(--ps-focus-ring); outline-offset:1px; border-color:var(--ps-ink);
}
.ps-design .ps-control[aria-invalid="true"] { border-color:var(--ps-error); }
.ps-design .ps-control:disabled {
  background:var(--ps-surface-sunken); color:var(--ps-text-muted); cursor:not-allowed;
}
.ps-design .ps-hint,
.ps-design .ps-error {
  display:block; margin:6px 0 0; color:var(--ps-text-muted);
  font:var(--ps-w-regular) var(--ps-fs-caption)/var(--ps-lh-body) var(--ps-sans);
}
.ps-design .ps-error { color:var(--ps-error); }
.ps-design .ps-form-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ps-sp-4); align-items:end;
}
.ps-design .ps-form-grid__full { grid-column:1/-1; }

/* Filter/preset buttons and native checkbox/radio rows. */
.ps-design .ps-chip {
  box-sizing:border-box; display:inline-flex; align-items:center; gap:10px;
  min-height:var(--ps-h-ctrl-app); max-width:100%; padding:10px 16px;
  border:1px solid var(--ps-border-default); border-radius:var(--ps-radius-pill);
  background:var(--ps-surface-page); color:var(--ps-ink2);
  font:var(--ps-w-regular) var(--ps-fs-input)/var(--ps-lh-control) var(--ps-sans);
  text-align:left; cursor:pointer; transition:border-color .12s,background-color .12s,color .12s;
}
.ps-design .ps-chip:hover:not(:disabled) { border-color:var(--ps-ink); }
.ps-design .ps-chip[aria-pressed="true"] {
  background:var(--ps-ink); color:var(--ps-paper); border-color:var(--ps-accent);
}
.ps-design .ps-chip--preset {
  min-height:var(--ps-h-ctrl-sm); padding:0 14px; border-radius:var(--ps-radius-control);
  background:var(--ps-surface-card); border-color:var(--ps-border-subtle); color:var(--ps-ink);
  font-size:var(--ps-fs-ui);
}
.ps-design .ps-chip--preset[aria-pressed="true"] {
  background:var(--ps-surface-sunken); color:var(--ps-ink); border-color:var(--ps-ink2);
  font-weight:var(--ps-w-medium);
}
.ps-design .ps-chip:focus-visible {
  outline:2px solid var(--ps-focus-ring); outline-offset:2px;
}
.ps-design .ps-chip:disabled { opacity:.32; cursor:not-allowed; }
.ps-design .ps-choice {
  box-sizing:border-box; display:flex; align-items:center; gap:9px; min-height:var(--ps-h-ctrl-app);
  padding:4px 10px; border:1px solid var(--ps-border-subtle); border-radius:var(--ps-radius-control);
  background:var(--ps-surface-card); color:var(--ps-ink);
  font:var(--ps-w-regular) var(--ps-fs-ui)/1.4 var(--ps-sans); cursor:pointer;
}
.ps-design .ps-choice__input {
  box-sizing:border-box; flex:none; width:18px; height:18px; margin:0; padding:0;
  accent-color:var(--ps-ink); cursor:pointer;
}
.ps-design .ps-choice__input:focus-visible {
  outline:2px solid var(--ps-focus-ring); outline-offset:3px;
}
.ps-design .ps-choice__input:disabled { cursor:not-allowed; }

/* Generic status tones: product labels and state transitions belong to hosts. */
.ps-design .ps-pill {
  box-sizing:border-box; display:inline-block; padding:4px 10px; border:1px solid var(--ps-border-default);
  border-radius:var(--ps-radius-pill); color:var(--ps-ink2); background:var(--ps-surface-page);
  font:var(--ps-w-medium) 12px/var(--ps-lh-body) var(--ps-sans); white-space:nowrap;
}
.ps-design .ps-pill--ok {
  background:var(--ps-status-ok-bg); border-color:var(--ps-status-ok-border); color:var(--ps-status-ok-text);
}
.ps-design .ps-pill--warn {
  background:var(--ps-status-warn-bg); border-color:var(--ps-status-warn-border); color:var(--ps-status-warn-text);
}
.ps-design .ps-pill--bad {
  background:var(--ps-status-bad-bg); border-color:var(--ps-status-bad-border); color:var(--ps-status-bad-text);
}
.ps-design .ps-pill--quiet { color:var(--ps-text-muted); }
.ps-design .ps-pill--new {
  background:var(--ps-ink); border-color:var(--ps-ink); color:var(--ps-paper);
}
.ps-design .ps-notice {
  box-sizing:border-box; margin:0; padding:14px 16px; border:0; border-left:2px solid var(--ps-ink);
  border-radius:0 var(--ps-radius-control) var(--ps-radius-control) 0;
  background:var(--ps-surface-card); color:var(--ps-text-body);
  font:var(--ps-w-regular) var(--ps-fs-control)/var(--ps-lh-body) var(--ps-sans);
}
.ps-design .ps-notice--error { border-left-color:var(--ps-error); }
.ps-design .ps-notice--success { border-left-color:var(--ps-success); }

/* Generic card/table specimens preserve their source metrics; these are not
   the marketplace's future listing grid, sort behavior or responsive omissions. */
.ps-design .ps-card {
  box-sizing:border-box; padding:22px; border:1px solid var(--ps-border-default);
  border-radius:10px; background:var(--ps-surface-card); color:var(--ps-text-body);
}
.ps-design .ps-card__title {
  margin:0 0 var(--ps-sp-3); color:var(--ps-ink);
  font:var(--ps-w-medium) 19px/1.3 var(--ps-sans); letter-spacing:-.005em;
}
.ps-design .ps-table-wrap {
  overflow-x:auto; border:1px solid var(--ps-border-default); border-radius:9px;
  background:var(--ps-surface-card);
}
.ps-design .ps-table {
  width:100%; border-collapse:collapse; color:var(--ps-text-body);
  font:var(--ps-w-regular) var(--ps-fs-ui)/var(--ps-lh-body) var(--ps-sans);
}
.ps-design .ps-table caption {
  padding:var(--ps-sp-3); text-align:left; color:var(--ps-text-heading); font-weight:var(--ps-w-medium);
}
.ps-design .ps-table th {
  padding:11px 14px; text-align:left; background:var(--ps-surface-sunken);
  border-bottom:1px solid var(--ps-border-default); color:var(--ps-text-muted);
  font-size:var(--ps-fs-caption); font-weight:var(--ps-w-medium); white-space:nowrap;
}
.ps-design .ps-table td { padding:11px 14px; vertical-align:top; }
.ps-design .ps-table tbody tr + tr td { border-top:1px solid var(--ps-border-subtle); }
.ps-design .ps-table .ps-number { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Dialog presentation can live on the opted-in root or within a boundary. */
.ps-design.ps-modal,
.ps-design .ps-modal {
  box-sizing:border-box; position:fixed; z-index:calc(var(--ps-z-modal) + 1);
  left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); margin:0;
  width:min(480px,calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 40px); overflow-y:auto;
  padding:24px 22px; border:1px solid var(--ps-border-default); border-radius:var(--ps-radius-card);
  background:var(--ps-surface-page); color:var(--ps-text-body); box-shadow:none;
  font:var(--ps-w-regular) var(--ps-fs-input)/var(--ps-lh-body) var(--ps-sans);
}
.ps-design.ps-modal::backdrop,
.ps-design .ps-modal::backdrop { background:color-mix(in srgb,var(--ps-ink) 45%,transparent); }
.ps-design.ps-drawer,
.ps-design .ps-drawer {
  box-sizing:border-box; position:fixed; z-index:calc(var(--ps-z-drawer) + 1);
  inset:0 0 0 auto; transform:none; margin:0; width:min(640px,100%); max-width:none;
  height:100dvh; max-height:100dvh; overflow-y:auto; padding:var(--ps-drawer-pad);
  border:0; border-left:1px solid var(--ps-border-default); border-radius:0;
  background:var(--ps-surface-page); color:var(--ps-text-body); box-shadow:none;
  font:var(--ps-w-regular) var(--ps-fs-input)/var(--ps-lh-body) var(--ps-sans);
}
.ps-design.ps-drawer::backdrop,
.ps-design .ps-drawer::backdrop { background:color-mix(in srgb,var(--ps-ink) 35%,transparent); }
.ps-design .ps-dialog-title {
  margin:0 0 var(--ps-sp-3); padding-right:var(--ps-sp-8); color:var(--ps-ink);
  font:var(--ps-w-regular) 26px/1.2 var(--ps-serif); letter-spacing:-.012em;
}
.ps-design .ps-modal .ps-dialog-title,
.ps-design.ps-modal .ps-dialog-title { font-size:23px; }
.ps-design .ps-dialog-close { position:absolute; top:var(--ps-sp-3); right:var(--ps-sp-3); }
.ps-design .ps-dialog-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ps-sp-3); margin-top:18px; }

/* Approved skeleton motion only, with a static reduced-motion form. */
.ps-design .ps-skeleton {
  position:relative; overflow:hidden; min-height:var(--ps-h-ctrl-app); border-radius:var(--ps-radius-control);
  background:var(--ps-surface-sunken);
}
.ps-design .ps-skeleton::after {
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ps-paper2) 70%,transparent),transparent);
  animation:ps-skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes ps-skeleton-shimmer { to { transform:translateX(100%); } }
/* Explicit display values must not defeat native hidden on hosts (such as CRM)
   that do not load buyer.css's global hidden rule. Limit this to our subjects. */
.ps-design .ps-button[hidden],
.ps-design .ps-link[hidden],
.ps-design .ps-icon-button[hidden],
.ps-design .ps-field[hidden],
.ps-design .ps-label[hidden],
.ps-design .ps-control[hidden],
.ps-design .ps-hint[hidden],
.ps-design .ps-form-grid[hidden],
.ps-design .ps-chip[hidden],
.ps-design .ps-choice[hidden],
.ps-design .ps-pill[hidden],
.ps-design .ps-dialog-actions[hidden],
.ps-design .ps-error[hidden],
.ps-design .ps-notice[hidden],
.ps-design.ps-modal[hidden],
.ps-design .ps-modal[hidden],
.ps-design.ps-drawer[hidden],
.ps-design .ps-drawer[hidden] { display:none!important; }

@media (max-width:720px) {
  .ps-design .ps-form-grid { grid-template-columns:1fr; }
  .ps-design .ps-card { padding:18px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .ps-design .ps-button,
  .ps-design .ps-chip { transition:none; }
  .ps-design .ps-skeleton::after { animation:none; display:none; }
}

/* Record headers keep the date in its own top-right column while identity and
   status wrap. The code is a neutral identifier, not a semantic status pill.
   Adopted from ZIP3 RecordStream and buyer.css:190-191; the two-column layout
   corrects the wrapping spacer behavior without truncating record text. */
.ps-design .ps-record-header {
  display:grid; grid-template-columns:minmax(0,1fr) max-content;
  align-items:start; gap:var(--ps-sp-3); min-width:0;
}
.ps-design .ps-record-identity {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--ps-sp-3); min-width:0;
}
.ps-design .ps-record-reference {
  display:inline-flex; flex-wrap:wrap; align-items:flex-start; gap:var(--ps-sp-2);
  min-width:0; max-width:100%; text-align:left; white-space:normal;
}
.ps-design .ps-record-code {
  box-sizing:border-box; display:inline-block; flex:none; max-width:100%;
  padding:4px 7px; border:1px solid var(--ps-border-default); border-radius:var(--ps-radius-control);
  background:var(--ps-surface-page); color:var(--ps-ink);
  font:var(--ps-w-medium) var(--ps-fs-caption)/1 var(--ps-sans);
  font-variant-numeric:tabular-nums; white-space:normal; overflow-wrap:anywhere;
}
.ps-design .ps-record-title {
  flex:1 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere;
}
.ps-design .ps-record-date {
  justify-self:end; align-self:start; white-space:nowrap; text-align:right;
  color:var(--ps-text-muted);
  font:var(--ps-w-regular) var(--ps-fs-ui)/var(--ps-lh-body) var(--ps-sans);
}
.ps-design .ps-record-meta {
  min-width:0; color:var(--ps-text-muted); overflow-wrap:anywhere;
  font:var(--ps-w-regular) var(--ps-fs-caption)/var(--ps-lh-body) var(--ps-sans);
}
.ps-design .ps-record-identity .ps-pill {
  max-width:100%; white-space:normal; overflow-wrap:anywhere;
}
.ps-design .ps-record-header[hidden],
.ps-design .ps-record-identity[hidden],
.ps-design .ps-record-reference[hidden],
.ps-design .ps-record-code[hidden] { display:none!important; }

/* Text-only empty state from ZIP3 components/feedback/EmptyState.jsx and
   app.css:104. Hosts distinguish a successful empty result from loading/errors. */
.ps-design .ps-empty-state {
  box-sizing:border-box; min-width:0; max-width:100%; margin:0; padding:34px 20px;
  border:1px dashed var(--ps-border-default); border-radius:10px;
  background:transparent; box-shadow:none; color:var(--ps-text-muted);
  font:var(--ps-w-regular) var(--ps-t-body)/var(--ps-lh-body) var(--ps-sans);
  text-align:center; white-space:normal; overflow-wrap:anywhere;
}
.ps-design .ps-empty-state[hidden] { display:none!important; }