/*
 * Commerce Studio — Primitives layer.
 *
 * Shared, page-agnostic building blocks: focus, headings, buttons, fields,
 * chips, badges, tables, empty states, dialogs and toasts.
 *
 * Everything here sits in `@layer primitives`, so any existing page rule —
 * all of which are unlayered — still wins. That is the point: this file can be
 * introduced across every entry point today without repainting pages that have
 * not been migrated yet, and each page override can be deleted later once its
 * component genuinely matches the primitive.
 *
 * Load order is always: commerce-tokens.css → commerce-primitives.css →
 * commerce-shell.css → page stylesheet.
 */
@layer primitives {
  /* ------------------------------------------------------------- focus */
  /*
   * A visible focus ring that does not depend on the browser default, on every
   * interactive element, in one place.
   */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--commerce-focus-width) solid var(--commerce-focus-color);
    outline-offset: var(--commerce-focus-offset);
    border-radius: var(--commerce-radius-xs);
  }

  /* Only suppress the default ring where a custom one is provided. */
  :where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
    outline: none;
  }

  /* ----------------------------------------------------------- headings */
  .commerce-eyebrow {
    margin: 0;
    color: var(--commerce-brand-700);
    font-size: var(--commerce-text-meta);
    font-weight: var(--commerce-weight-strong);
    line-height: var(--commerce-leading-snug);
    letter-spacing: 0.08em;
  }

  .commerce-title-page {
    margin: 0;
    color: var(--commerce-ink-950);
    font-size: var(--commerce-text-page);
    font-weight: var(--commerce-weight-strong);
    line-height: var(--commerce-leading-tight);
    letter-spacing: -0.02em;
  }

  .commerce-title-section {
    margin: 0;
    color: var(--commerce-ink-900);
    font-size: var(--commerce-text-section);
    font-weight: var(--commerce-weight-strong);
    line-height: var(--commerce-leading-snug);
    letter-spacing: -0.01em;
  }

  .commerce-title-card {
    margin: 0;
    color: var(--commerce-ink-900);
    font-size: var(--commerce-text-card);
    font-weight: var(--commerce-weight-strong);
    line-height: var(--commerce-leading-snug);
  }

  .commerce-body {
    margin: 0;
    color: var(--commerce-ink-700);
    font-size: var(--commerce-text-body);
    line-height: var(--commerce-leading-body);
  }

  .commerce-meta {
    margin: 0;
    color: var(--commerce-ink-500);
    font-size: var(--commerce-text-meta);
    line-height: var(--commerce-leading-snug);
  }

  /* ------------------------------------------------------------ surface */
  .commerce-card {
    padding: var(--commerce-space-5);
    border: 1px solid var(--commerce-line);
    border-radius: var(--commerce-radius-md);
    background: var(--commerce-surface-strong);
    box-shadow: var(--commerce-shadow-sm);
  }

  /* A card that is only a grouping device carries no shadow at all. */
  .commerce-card.quiet {
    background: var(--commerce-surface);
    box-shadow: none;
  }

  .commerce-divider {
    height: 1px;
    margin: var(--commerce-space-5) 0;
    border: 0;
    background: var(--commerce-line);
  }

  /* ------------------------------------------------------------ buttons */
  .commerce-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--commerce-space-2);
    padding: 0 var(--commerce-space-5);
    border: 1px solid transparent;
    border-radius: var(--commerce-radius-sm);
    color: var(--commerce-ink-900);
    background: transparent;
    font-family: inherit;
    font-size: var(--commerce-text-body);
    font-weight: var(--commerce-weight-medium);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background var(--commerce-motion-fast) var(--commerce-easing-standard),
      border-color var(--commerce-motion-fast) var(--commerce-easing-standard),
      color var(--commerce-motion-fast) var(--commerce-easing-standard);
  }

  /* One visually strongest action per viewport. */
  .commerce-button.primary {
    color: #fff;
    background: var(--commerce-brand-600);
  }

  .commerce-button.primary:hover:not(:disabled) {
    background: var(--commerce-brand-700);
  }

  .commerce-button.secondary {
    border-color: var(--commerce-line-strong);
    background: var(--commerce-surface-strong);
  }

  .commerce-button.secondary:hover:not(:disabled) {
    border-color: var(--commerce-brand-400);
    background: var(--commerce-brand-050);
  }

  .commerce-button.ghost:hover:not(:disabled) {
    background: var(--commerce-surface-muted);
  }

  /* Destructive actions read as destructive before they are confirmed. */
  .commerce-button.danger {
    color: #fff;
    background: var(--commerce-danger-700);
  }

  .commerce-button:disabled,
  .commerce-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .commerce-button.wide {
    width: 100%;
  }

  /* Touch targets stay finger-sized on phones. */
  @media (max-width: 760px) {
    .commerce-button {
      min-height: var(--commerce-touch-target);
    }
  }

  /* ------------------------------------------------------------- fields */
  .commerce-field {
    display: grid;
    gap: var(--commerce-space-2);
  }

  .commerce-field > span,
  .commerce-label {
    color: var(--commerce-ink-800);
    font-size: var(--commerce-text-body);
    font-weight: var(--commerce-weight-medium);
    line-height: var(--commerce-leading-snug);
  }

  .commerce-field > small,
  .commerce-hint {
    color: var(--commerce-ink-500);
    font-size: var(--commerce-text-meta);
    line-height: var(--commerce-leading-snug);
  }

  .commerce-input,
  .commerce-field :where(input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="number"], select, textarea) {
    width: 100%;
    min-height: 40px;
    padding: var(--commerce-space-2) var(--commerce-space-3);
    border: 1px solid var(--commerce-line-strong);
    border-radius: var(--commerce-radius-sm);
    color: var(--commerce-ink-900);
    background: var(--commerce-surface-strong);
    font-family: inherit;
    font-size: var(--commerce-text-body);
    line-height: var(--commerce-leading-snug);
  }

  .commerce-input:focus,
  .commerce-field :where(input, select, textarea):focus {
    border-color: var(--commerce-brand-600);
    outline: none;
    box-shadow: var(--commerce-focus-ring);
  }

  .commerce-input[aria-invalid="true"] {
    border-color: var(--commerce-danger-700);
  }

  @media (max-width: 760px) {
    .commerce-input,
    .commerce-field :where(input, select, textarea) {
      min-height: var(--commerce-touch-target);
      /* 16px keeps iOS Safari from zooming the viewport on focus. */
      font-size: 16px;
    }
  }

  /* -------------------------------------------------- chips and badges */
  .commerce-chip {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: var(--commerce-space-2);
    padding: 0 var(--commerce-space-3);
    border: 1px solid var(--commerce-line);
    border-radius: var(--commerce-radius-pill);
    color: var(--commerce-ink-700);
    background: var(--commerce-surface-strong);
    font-size: var(--commerce-text-meta);
    font-weight: var(--commerce-weight-medium);
    cursor: pointer;
  }

  .commerce-chip[aria-pressed="true"],
  .commerce-chip.active {
    border-color: var(--commerce-brand-600);
    color: var(--commerce-brand-800);
    background: var(--commerce-brand-100);
  }

  /*
   * Status is carried by a label, not by colour alone; the dot is decorative
   * reinforcement for users who can see it.
   */
  .commerce-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--commerce-space-2);
    padding: 2px var(--commerce-space-2);
    border-radius: var(--commerce-radius-xs);
    color: var(--commerce-ink-700);
    background: var(--commerce-surface-muted);
    font-size: var(--commerce-text-meta);
    font-weight: var(--commerce-weight-medium);
    line-height: var(--commerce-leading-snug);
  }

  .commerce-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
  }

  .commerce-badge.positive { color: var(--commerce-positive-700); background: var(--commerce-positive-100); }
  .commerce-badge.warning  { color: var(--commerce-warning-700);  background: var(--commerce-warning-100); }
  .commerce-badge.danger   { color: var(--commerce-danger-700);   background: var(--commerce-danger-100); }
  .commerce-badge.info     { color: var(--commerce-info-700);     background: var(--commerce-info-100); }

  /* -------------------------------------------------------------- table */
  .commerce-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--commerce-text-body);
  }

  .commerce-table th {
    padding: var(--commerce-space-3);
    border-bottom: 1px solid var(--commerce-line);
    color: var(--commerce-ink-500);
    font-size: var(--commerce-text-meta);
    font-weight: var(--commerce-weight-medium);
    text-align: left;
    white-space: nowrap;
  }

  .commerce-table td {
    padding: var(--commerce-space-3);
    border-bottom: 1px solid var(--commerce-line-soft);
    color: var(--commerce-ink-800);
    vertical-align: top;
  }

  /* Wide tables scroll inside their own boundary, not the page. */
  .commerce-table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  /* -------------------------------------------------------- empty state */
  .commerce-empty {
    display: grid;
    justify-items: center;
    gap: var(--commerce-space-3);
    padding: var(--commerce-space-12) var(--commerce-space-5);
    border: 1px dashed var(--commerce-line-strong);
    border-radius: var(--commerce-radius-md);
    color: var(--commerce-ink-500);
    text-align: center;
  }

  .commerce-empty strong {
    color: var(--commerce-ink-900);
    font-size: var(--commerce-text-card);
  }

  /* ------------------------------------------------------------ dialog */
  .commerce-dialog-backdrop {
    position: fixed;
    z-index: var(--commerce-z-modal);
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--commerce-space-5);
    background: rgba(12, 28, 21, 0.44);
  }

  .commerce-dialog {
    width: min(560px, 100%);
    max-height: min(86vh, 900px);
    /* The dialog owns its own scroll boundary; the page behind it does not. */
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--commerce-space-6);
    border-radius: var(--commerce-radius-lg);
    background: var(--commerce-surface-strong);
    box-shadow: var(--commerce-shadow-lg);
  }

  .commerce-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--commerce-space-3);
    margin-top: var(--commerce-space-6);
  }

  /* ------------------------------------------------------------- toast */
  .commerce-toast-region {
    position: fixed;
    z-index: var(--commerce-z-toast);
    right: var(--commerce-space-5);
    bottom: var(--commerce-space-5);
    display: grid;
    gap: var(--commerce-space-2);
    pointer-events: none;
  }

  .commerce-toast {
    max-width: 380px;
    padding: var(--commerce-space-3) var(--commerce-space-4);
    border-radius: var(--commerce-radius-sm);
    color: #fff;
    background: var(--commerce-ink-900);
    box-shadow: var(--commerce-shadow-lg);
    font-size: var(--commerce-text-body);
    pointer-events: auto;
  }

  /* ------------------------------------------------------------ utility */
  .commerce-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Skip link stays reachable by keyboard and invisible to the mouse. */
  .commerce-skip-link {
    position: absolute;
    z-index: var(--commerce-z-toast);
    top: var(--commerce-space-2);
    left: var(--commerce-space-2);
    padding: var(--commerce-space-2) var(--commerce-space-4);
    border-radius: var(--commerce-radius-sm);
    color: #fff;
    background: var(--commerce-brand-700);
    font-size: var(--commerce-text-body);
    transform: translateY(-200%);
  }

  .commerce-skip-link:focus-visible {
    transform: translateY(0);
  }
}

/* ==========================================================================
 * Apple-native primitives
 *
 * Grouped inset lists are the backbone of the visual language: a grey page,
 * white groups, hairline separators inset from the leading edge, and a small
 * secondary-label header sitting ABOVE the group rather than inside a card.
 *
 * These are additive; nothing above changes.
 * ========================================================================== */
@layer primitives {
  /* ---------------------------------------------------------- section ---
   * The header belongs to the page, not to the group it labels.
   */
  .ios-section {
    display: grid;
    gap: var(--commerce-space-2);
    margin-bottom: var(--commerce-space-6);
  }

  .ios-section-header {
    padding: 0 var(--commerce-space-4);
    color: var(--commerce-ink-500);
    font-size: var(--commerce-text-meta);
    font-weight: var(--commerce-weight-regular);
    line-height: var(--commerce-leading-snug);
  }

  .ios-section-header strong {
    color: var(--commerce-ink-900);
    font-size: var(--commerce-text-card);
    font-weight: var(--commerce-weight-strong);
    letter-spacing: var(--commerce-tracking-title);
  }

  .ios-section-footer {
    padding: 0 var(--commerce-space-4);
    color: var(--commerce-ink-500);
    font-size: var(--commerce-text-meta);
    line-height: var(--commerce-leading-body);
  }

  /* ------------------------------------------------------------- list ---
   * One rounded white container; rows inside are separated by hairlines that
   * start at the content inset, never at the container edge.
   */
  .ios-list {
    overflow: hidden;
    border-radius: var(--commerce-radius-md);
    background: var(--commerce-surface);
  }

  .ios-row {
    position: relative;
    min-height: var(--commerce-touch-target);
    display: flex;
    align-items: center;
    gap: var(--commerce-space-3);
    padding: var(--commerce-space-2) var(--commerce-space-4);
    color: var(--commerce-ink-900);
    font-size: var(--commerce-text-body);
    text-decoration: none;
  }

  /* The separator is drawn by the row, inset to align with the row's text. */
  .ios-row + .ios-row::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: var(--commerce-space-4);
    height: 1px;
    background: var(--commerce-line);
  }

  /* When a row leads with a glyph, the separator aligns past it instead. */
  .ios-list.has-leading .ios-row + .ios-row::before {
    left: 60px;
  }

  .ios-row-main {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
  }

  .ios-row-main strong {
    color: var(--commerce-ink-900);
    font-size: var(--commerce-text-body);
    font-weight: var(--commerce-weight-medium);
  }

  .ios-row-main small {
    color: var(--commerce-ink-500);
    font-size: var(--commerce-text-meta);
    line-height: var(--commerce-leading-snug);
  }

  /* Trailing value, the way a Settings row states its current setting. */
  .ios-row-value {
    flex: 0 0 auto;
    color: var(--commerce-ink-500);
    font-size: var(--commerce-text-body);
  }

  .ios-row-leading {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--commerce-radius-xs);
    color: var(--commerce-tint);
  }

  /* Disclosure chevron, drawn rather than typed so it never picks up a font. */
  .ios-row-chevron {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-top: 1.5px solid var(--commerce-ink-400);
    border-right: 1.5px solid var(--commerce-ink-400);
    transform: rotate(45deg);
  }

  .ios-row.selectable {
    cursor: pointer;
    transition: background var(--commerce-motion-fast) var(--commerce-easing-standard);
  }

  .ios-row.selectable:hover {
    background: var(--commerce-fill);
  }

  /* Selection is a tint checkmark plus a whisper of tint fill — not a
   * heavy border and not a second button. */
  .ios-row.selected {
    background: var(--commerce-tint-subtle);
  }

  .ios-row-check {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--commerce-tint);
  }

  .ios-row-check svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* -------------------------------------------------------- segmented ---
   * Replaces rows of filter chips. One track, one sliding selected segment.
   */
  .ios-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--commerce-radius-sm);
    background: var(--commerce-fill);
  }

  .ios-segmented > button {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--commerce-space-1);
    padding: 0 var(--commerce-space-3);
    border: 0;
    border-radius: var(--commerce-radius-xs);
    color: var(--commerce-ink-900);
    background: transparent;
    font: inherit;
    font-size: var(--commerce-text-body);
    font-weight: var(--commerce-weight-medium);
    cursor: pointer;
    transition: background var(--commerce-motion-fast) var(--commerce-easing-standard);
  }

  .ios-segmented > button[aria-selected="true"],
  .ios-segmented > button.active {
    background: var(--commerce-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }

  /* ----------------------------------------------------------- button ---
   * Apple buttons are small, tight and text-led. Prominent means filled tint;
   * everything else is bordered or plain.
   */
  .ios-button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--commerce-space-2);
    padding: 0 var(--commerce-space-4);
    border: 0;
    border-radius: var(--commerce-radius-xs);
    color: var(--commerce-tint);
    background: transparent;
    font: inherit;
    font-size: var(--commerce-text-body);
    font-weight: var(--commerce-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--commerce-motion-fast) var(--commerce-easing-standard);
  }

  .ios-button.prominent {
    color: #fff;
    background: var(--commerce-tint);
  }

  .ios-button.prominent:hover:not(:disabled) {
    background: var(--commerce-tint-pressed);
  }

  .ios-button.bordered {
    color: var(--commerce-ink-900);
    background: var(--commerce-fill);
  }

  .ios-button.bordered:hover:not(:disabled) {
    background: var(--commerce-fill-strong);
  }

  .ios-button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  /* Large call to action at the foot of a form sheet. */
  .ios-button.wide {
    width: 100%;
    min-height: 44px;
    border-radius: var(--commerce-radius-md);
    font-size: var(--commerce-text-card);
    font-weight: var(--commerce-weight-strong);
  }

  /* ------------------------------------------------------------ field ---
   * Inside a grouped list a text field has no box of its own: the row is the
   * box. Standalone fields keep a fill.
   */
  .ios-field {
    width: 100%;
    min-height: 32px;
    padding: var(--commerce-space-2) var(--commerce-space-3);
    border: 0;
    border-radius: var(--commerce-radius-xs);
    color: var(--commerce-ink-900);
    background: var(--commerce-fill);
    font: inherit;
    font-size: var(--commerce-text-body);
  }

  .ios-field::placeholder {
    color: var(--commerce-ink-400);
  }

  .ios-row .ios-field {
    background: transparent;
    padding-inline: 0;
  }
}

/* ==========================================================================
 * Platform control normalisation
 *
 * Native form controls were still rendering with the browser's own chrome —
 * a macOS select box inside an otherwise custom surface reads as unfinished.
 * Every select in the product now uses the same drawn chevron and fill.
 * ========================================================================== */
@layer primitives {
  /* Numerals in a UI should never jitter as they change. */
  :root {
    font-variant-numeric: tabular-nums;
  }

  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 28px;
    border: 0;
    border-radius: var(--commerce-radius-xs);
    color: var(--commerce-ink-900);
    background-color: var(--commerce-fill);
    /* Two 45° wedges form a chevron without shipping an icon font. */
    background-image:
      linear-gradient(45deg, transparent 50%, var(--commerce-ink-500) 50%),
      linear-gradient(135deg, var(--commerce-ink-500) 50%, transparent 50%);
    background-position:
      right 14px center,
      right 9px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    font: inherit;
    font-size: var(--commerce-text-meta);
    line-height: 1.2;
  }

  select:hover {
    background-color: var(--commerce-fill-strong);
  }

  /* Checkboxes and radios: tint-filled, drawn mark, platform sizing. */
  input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 0;
    border-radius: 5px;
    background: var(--commerce-surface-strong);
    box-shadow: inset 0 0 0 1px var(--commerce-line-strong);
    cursor: pointer;
    transition: background var(--commerce-motion-fast) var(--commerce-easing-standard);
  }

  input[type="checkbox"]:checked {
    background: var(--commerce-tint);
    box-shadow: none;
  }

  input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 6px;
    width: 4px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
  }

  /* A group of metrics divided by hairlines — the pattern that makes a data
   * row scannable: tiny grey caption over a heavy tabular value. */
  .commerce-metrics {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-radius: var(--commerce-radius-sm);
    background: var(--commerce-surface-muted);
  }

  .commerce-metric {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: var(--commerce-space-2) var(--commerce-space-3);
  }

  .commerce-metric + .commerce-metric {
    border-left: 1px solid var(--commerce-line-soft);
  }

  .commerce-metric > span {
    color: var(--commerce-ink-500);
    font-size: var(--commerce-text-caption);
    font-weight: var(--commerce-weight-medium);
  }

  .commerce-metric > strong {
    color: var(--commerce-ink-900);
    font-size: var(--commerce-text-card);
    font-weight: var(--commerce-weight-strong);
    letter-spacing: var(--commerce-tracking-numeric);
  }
}