/* ============================================================
   ui.css — Shared public-zone component layer
   Built from theme.css tokens + the design D4 specs (2026-06-18),
   lifted from the vr-engine pilot and re-expressed in the ratified
   scales (radius 6/10/14/20, theme px type scale, named spacing,
   --brand-primary-hover). WEB-ONLY — the apps consume theme.css, not this.

   Rules of the road (stylelint-enforced):
   - Surfaces load /theme.css + /css/ui.css and set LAYOUT only.
   - Never restyle a component's internals on a surface; extend here.
   - No raw hex / rem font-size / local token redefinition anywhere but theme.
   ============================================================ */

/* ── Card ─────────────────────────────────────────────────── */
.ui-card{
  background:var(--bg-card);
  border:1px solid var(--border-medium);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:var(--space-lg);
}
.ui-card > h2,.ui-card > h3{ margin:0 0 var(--space-md); font-family:var(--font-display); color:var(--text-primary); }
.ui-card > h2{ font-size:var(--font-size-xl); font-weight:700; }
.ui-card > h3{ font-size:var(--font-size-lg); font-weight:700; }

/* ── Buttons ──────────────────────────────────────────────── */
.ui-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm);
  padding:10px var(--space-lg);
  border:1px solid transparent; border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:var(--font-size-sm); font-weight:600;
  line-height:1.2; cursor:pointer; white-space:nowrap;
  transition:background .15s,border-color .15s,box-shadow .15s,opacity .15s;
}
.ui-btn:disabled,.ui-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.ui-btn-sm{ padding:6px var(--space-12); font-size:var(--font-size-xs); }
.ui-btn-primary{ background:var(--brand-primary); color:var(--text-inverse); }
.ui-btn-primary:hover:not(:disabled){ background:var(--brand-primary-hover); }
.ui-btn-secondary{ background:transparent; border-color:var(--border-medium); color:var(--text-secondary); }
.ui-btn-secondary:hover:not(:disabled){ border-color:var(--brand-primary); color:var(--brand-primary); }
.ui-btn-danger{ background:var(--status-error); color:var(--text-inverse); }
.ui-btn-danger:hover:not(:disabled){ background:var(--status-error-hover); }
.ui-btn-ghost{ background:var(--bg-card); border-color:var(--border-medium); color:var(--text-secondary); }
.ui-btn-ghost:hover:not(:disabled){ border-color:var(--brand-primary); color:var(--brand-primary); }

/* ── Fields / forms ───────────────────────────────────────── */
.ui-field{ display:flex; flex-direction:column; }
.ui-field > label,.ui-field > span{
  display:block; font-size:var(--font-size-xs); font-weight:600;
  color:var(--text-secondary); text-transform:uppercase; letter-spacing:.03em;
  margin-bottom:5px;
}
.ui-field input[type=text],.ui-field input[type=number],.ui-field input[type=email],
.ui-field input:not([type]),.ui-field select,.ui-field textarea{
  width:100%; box-sizing:border-box; padding:10px var(--space-12);
  background:var(--bg-input); border:1px solid var(--border-medium); border-radius:var(--radius-sm);
  color:var(--text-primary); font-family:var(--font-body); font-size:var(--font-size-sm);
  transition:border-color .2s,box-shadow .2s,background .2s; outline:none;
}
.ui-field input:focus,.ui-field select:focus,.ui-field textarea:focus{
  border-color:var(--border-focus); box-shadow:0 0 0 3px var(--accent-glow); background:var(--bg-input-focus);
}
.ui-field input::placeholder{ color:var(--text-muted); }
.ui-field select{ cursor:pointer; appearance:none; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235c564b' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
.ui-field input:read-only,.ui-field input[readonly]{ background:var(--bg-elevated); color:var(--text-muted); cursor:not-allowed; }
.ui-field textarea{ resize:vertical; min-height:80px; line-height:1.5; }
.ui-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
.ui-field-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-md); }

/* ── Badges / pills / tags ────────────────────────────────── */
.ui-badge,.ui-pill{
  display:inline-block; padding:3px var(--space-sm); border-radius:var(--radius-full);
  font-family:var(--font-mono); font-size:var(--font-size-xs); font-weight:700; letter-spacing:.02em; white-space:nowrap;
}
.ui-badge.success,.ui-pill.success,.ui-pill.ok{ background:var(--status-success-bg); color:var(--status-success); }
.ui-badge.warning,.ui-pill.warning,.ui-pill.warn{ background:var(--status-warning-bg); color:var(--status-warning); }
.ui-badge.error,.ui-pill.error,.ui-pill.bad{ background:var(--status-error-bg); color:var(--status-error); }
.ui-badge.info,.ui-pill.info{ background:var(--status-info-bg); color:var(--brand-primary); }
.ui-badge.neutral,.ui-pill.neutral{ background:var(--bg-input); color:var(--text-muted); }
.ui-tag{
  display:inline-block; font-family:var(--font-mono); font-size:var(--font-size-2xs); font-weight:600;
  color:var(--brand-primary); background:var(--accent-surface); padding:4px var(--space-12);
  border-radius:var(--radius-full); letter-spacing:.04em;
}

/* ── Notice ───────────────────────────────────────────────── */
.ui-note{ padding:10px var(--space-12); border-radius:var(--radius-md); font-size:var(--font-size-sm); line-height:1.45; }
.ui-note.ok{ background:var(--status-success-bg); color:var(--status-success); border:1px solid var(--status-success); }
.ui-note.err{ background:var(--status-error-bg); color:var(--status-error); border:1px solid var(--status-error); }
.ui-note.warn{ background:var(--status-warning-bg); color:var(--status-warning); border:1px solid var(--status-warning); }

/* ── Table ────────────────────────────────────────────────── */
.ui-table{ width:100%; border-collapse:collapse; font-size:var(--font-size-sm); background:var(--bg-card); }
.ui-table th{
  position:sticky; top:0; text-align:left; padding:var(--space-sm) var(--space-12);
  background:var(--bg-input); color:var(--text-muted);
  font-size:var(--font-size-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--border-medium);
}
.ui-table td{ padding:var(--space-sm) var(--space-12); border-bottom:1px solid var(--border-light); color:var(--text-primary); vertical-align:middle; }
.ui-table tr:last-child td{ border-bottom:none; }
.ui-table tbody tr:hover td{ background:var(--bg-input); }
.ui-table td.num,.ui-table th.num{ text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ── Modal ────────────────────────────────────────────────── */
.ui-modal-overlay{
  position:fixed; inset:0; z-index:var(--z-modal,1000);
  background:color-mix(in srgb,var(--text-primary) 72%,transparent); backdrop-filter:blur(6px);
  display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:var(--space-xl) var(--space-md);
}
.ui-modal-overlay.show{ display:flex; }
.ui-modal{
  background:var(--bg-card); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg,var(--shadow-card));
  width:100%; max-width:720px; padding:var(--space-lg); position:relative;
}
.ui-modal-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--space-md); }
.ui-modal-title{ font-family:var(--font-display); font-size:var(--font-size-xl); font-weight:700; color:var(--text-primary); margin:0; }
.ui-modal-close{ background:none; border:none; font-size:var(--font-size-xl); color:var(--text-muted); cursor:pointer; line-height:1; padding:0 4px; }
.ui-modal-close:hover{ color:var(--text-primary); }

/* ── Stepper ──────────────────────────────────────────────── */
.ui-stepper{ display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-lg); }
.ui-step-item{ display:flex; align-items:center; gap:var(--space-sm); cursor:pointer; padding:var(--space-sm) var(--space-md); border-radius:var(--radius-md); transition:all .2s; user-select:none; }
.ui-step-item:hover{ background:var(--bg-elevated); }
.ui-step-num{ width:32px; height:32px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:var(--font-size-sm); font-weight:700; border:2px solid var(--border-medium); color:var(--text-muted); transition:all .3s; flex-shrink:0; }
.ui-step-label{ font-size:var(--font-size-sm); font-weight:600; color:var(--text-muted); transition:color .3s; white-space:nowrap; }
.ui-step-connector{ width:48px; height:2px; background:var(--border-medium); flex-shrink:0; position:relative; overflow:hidden; }
.ui-step-connector::after{ content:''; position:absolute; left:0; top:0; width:0; height:100%; background:var(--brand-primary); transition:width .4s ease; }
.ui-step-item.active .ui-step-num{ border-color:var(--brand-primary); background:var(--brand-primary); color:var(--text-inverse); }
.ui-step-item.active .ui-step-label{ color:var(--text-primary); }
.ui-step-item.done .ui-step-num{ border-color:var(--brand-primary); background:var(--accent-glow); color:var(--brand-primary); }
.ui-step-item.done .ui-step-label{ color:var(--text-secondary); }
.ui-step-connector.done::after{ width:100%; }

/* ── Select chip (multi-select / anchor chip) ─────────────── */
.ui-chip{ display:flex; align-items:center; gap:var(--space-sm); padding:var(--space-sm) var(--space-12); background:var(--bg-elevated); border:1px solid var(--border-medium); border-radius:var(--radius-md); cursor:pointer; transition:all .2s; user-select:none; min-height:44px; }
.ui-chip:hover{ border-color:var(--border-light); background:var(--bg-card-hover); }
.ui-chip.selected{ border-color:var(--brand-primary); background:var(--accent-surface); }
.ui-chip .ui-chip-check{ width:20px; height:20px; border-radius:var(--radius-sm); border:2px solid var(--border-light); display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
.ui-chip.selected .ui-chip-check{ border-color:var(--brand-primary); background:var(--brand-primary); }
.ui-chip.selected .ui-chip-check::after{ content:'\2713'; font-size:var(--font-size-xs); font-weight:700; color:var(--text-inverse); }
.ui-chip .ui-chip-text{ font-size:var(--font-size-sm); font-weight:500; color:var(--text-secondary); white-space:nowrap; }
.ui-chip.selected .ui-chip-text{ color:var(--text-primary); font-weight:600; }