/* ============================================================
   Workshop UI (eSided family) — Components
   Every rule consumes ONLY semantic --wui-* / structural --esd-*
   tokens. No raw hex, px-color, or theme conditionals in here.
   ============================================================ */

/* ---------- Base ---------- */
.wui-page {
  background: var(--wui-bg);
  color: var(--wui-ink);
  font-family: var(--esd-font-body);
  font-size: var(--esd-fs-body);
  line-height: 1.6;
  transition: background-color var(--esd-motion-theme) var(--esd-ease),
              color var(--esd-motion-theme) var(--esd-ease);
}
.wui-page a { color: var(--wui-link); }
.wui-page a:hover { color: var(--wui-accent); }
.wui-container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
:where(.wui-page) :focus-visible {
  outline: 2px solid var(--wui-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .wui-page, .wui-page * { transition: none !important; animation: none !important; }
}

/* ---------- Typography ---------- */
.wui-display, .wui-h1, .wui-h2, .wui-h3 {
  font-family: var(--esd-font-heading);
  color: var(--wui-ink);
  margin: 0;
  text-wrap: pretty;
}
.wui-display { font-size: clamp(44px, 5.6vw, 78px); font-weight: var(--esd-weight-display); letter-spacing: var(--esd-tracking-display); line-height: 0.98; }
.wui-h1 { font-size: clamp(38px, 4.6vw, 58px); font-weight: var(--esd-weight-display); letter-spacing: var(--esd-tracking-display); line-height: 1; }
.wui-h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: var(--esd-weight-display); letter-spacing: var(--esd-tracking-heading); line-height: 1.06; }
.wui-h3 { font-size: var(--esd-fs-subtitle); font-weight: var(--esd-weight-heading); }
.wui-lead { font-size: var(--esd-fs-lead); line-height: 1.55; color: var(--wui-ink2); }
.wui-accent-span { color: var(--wui-accent); } /* one clause of a heading in accent */

/* Eyebrow: 13px uppercase, .16em, 600, accent — with 24px dash */
.wui-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--esd-fs-eyebrow); font-weight: var(--esd-weight-label);
  letter-spacing: var(--esd-tracking-eyebrow); text-transform: uppercase;
  color: var(--wui-accent);
}
.wui-eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--wui-accent); }

/* Title block: 7px vertical rounded accent bar left of every title */
.wui-titleblock { display: flex; gap: 18px; align-items: stretch; }
.wui-titleblock::before {
  content: ""; flex: none; width: var(--esd-accentbar-w);
  border-radius: var(--esd-radius-pill); background: var(--wui-accent);
}

/* ---------- Buttons (44px min target) ---------- */
.wui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 12px 24px;
  border-radius: var(--esd-radius-pill);
  font-family: var(--esd-font-body); font-size: var(--esd-fs-ui);
  font-weight: var(--esd-weight-label);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--esd-motion-base) var(--esd-ease),
              box-shadow var(--esd-motion-base) var(--esd-ease);
}
.wui-btn-primary {
  background: var(--wui-accent); color: var(--wui-on-accent); border: none;
  box-shadow: var(--wui-shadow-cta);
}
.wui-btn-primary:hover { background: var(--wui-accent-strong); }
.wui-btn-primary:active { background: var(--wui-accent-strong); box-shadow: none; }
.wui-btn-secondary {
  background: var(--wui-surface); color: var(--wui-ink);
  border: 1.5px solid var(--wui-pill-border);
}
.wui-btn-secondary:hover { background: var(--wui-hover-tint); }
.wui-btn-secondary:active { background: var(--wui-pressed-tint); }
/* Buttons rendered as links: the UA a:link/:visited rule (specificity 0,1,1) outranks a plain
   button class (0,1,0) and would override the text color, leaving dark text on the accent fill.
   Re-assert per-variant color at higher specificity so <a class="wui-btn-*"> reads identically
   to <button class="wui-btn-*">. */
a.wui-btn-primary:link, a.wui-btn-primary:visited { color: var(--wui-on-accent); }
a.wui-btn-secondary:link, a.wui-btn-secondary:visited { color: var(--wui-ink); }
a.wui-btn-add:link, a.wui-btn-add:visited { color: var(--wui-ink2); }
.wui-btn:disabled {
  background: var(--wui-disabled-bg); color: var(--wui-disabled-fg);
  border-color: transparent; box-shadow: none; cursor: not-allowed;
}
/* Dashed add-CTA (planner) */
.wui-btn-add {
  background: transparent; color: var(--wui-ink2);
  border: 1.5px dashed var(--wui-pill-border);
}
.wui-btn-add:hover { background: var(--wui-hover-tint); color: var(--wui-ink); }

/* ---------- Toggle chip (filters; aria-pressed drives state) ---------- */
.wui-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 11px 16px;
  background: var(--wui-surface); color: var(--wui-ink);
  border: 1.5px solid var(--wui-pill-border);
  border-radius: var(--esd-radius-pill);
  font-family: var(--esd-font-body); font-size: var(--esd-fs-ui);
  font-weight: var(--esd-weight-label); cursor: pointer;
  transition: background-color var(--esd-motion-fast) var(--esd-ease);
}
.wui-chip:hover { background: var(--wui-hover-tint); }
.wui-chip[aria-pressed="true"] {
  background: var(--wui-selected-bg); color: var(--wui-selected-fg); border-color: transparent;
}

/* ---------- Cards ---------- */
.wui-card {
  background: var(--wui-surface);
  border: 1px solid var(--wui-border);
  border-radius: var(--esd-radius-card);
  box-shadow: var(--wui-shadow-card);
  padding: 26px;
}
.wui-card-quiet { box-shadow: none; background: var(--wui-bg); }

/* Method card (playbook grid tile) */
.wui-method-card {
  position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center;
  min-height: 148px; padding: 20px 14px 18px;
  background: var(--wui-surface);
  border: 1px solid var(--wui-border);
  border-radius: var(--esd-radius-tile);
  box-shadow: var(--wui-shadow-tile);
  color: var(--wui-ink); text-decoration: none;
  transition: box-shadow var(--esd-motion-fast) var(--esd-ease);
}
.wui-method-card:hover { box-shadow: var(--wui-shadow-card); }
.wui-method-card .wui-method-name {
  font-family: var(--esd-font-heading); font-weight: var(--esd-weight-heading);
  font-size: var(--esd-fs-ui); margin-top: 12px;
}
.wui-method-card .wui-star { position: absolute; top: 11px; right: 11px; }

/* ---------- Category tags ---------- */
.wui-tag {
  display: inline-block; padding: 8px 15px;
  border-radius: var(--esd-radius-pill);
  font-size: var(--esd-fs-caption); font-weight: var(--esd-weight-heading);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.wui-tag-warmup  { background: var(--wui-cat-warmup-bg);  color: var(--wui-cat-warmup-fg); }
.wui-tag-explore { background: var(--wui-cat-explore-bg); color: var(--wui-cat-explore-fg); }
.wui-tag-narrow  { background: var(--wui-cat-narrow-bg);  color: var(--wui-cat-narrow-fg); }
.wui-tag-create  { background: var(--wui-cat-create-bg);  color: var(--wui-cat-create-fg); }
.wui-tag-choose  { background: var(--wui-cat-choose-bg);  color: var(--wui-cat-choose-fg); }
.wui-tag-reset   { background: var(--wui-cat-reset-bg);   color: var(--wui-cat-reset-fg); }

/* ---------- Ability badge (See / Hear / Speak / Focus) ---------- */
.wui-ability { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wui-ability .wui-ability-ring {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid var(--wui-border);
  display: flex; align-items: center; justify-content: center;
}
.wui-ability svg { stroke: var(--wui-ink); }           /* cognitive cue */
.wui-ability.is-sensory svg { stroke: var(--wui-accent); } /* sensory cue */
.wui-ability .wui-ability-label { font-size: 11px; font-weight: var(--esd-weight-label); color: var(--wui-ink2); }

/* ---------- Meta strip (full-bleed band) ---------- */
.wui-band {
  background: var(--wui-band);
  border-top: 1px solid var(--wui-border);
  border-bottom: 1px solid var(--wui-border);
  padding: 30px clamp(20px, 5vw, 56px);
}
.wui-meta-item { display: flex; gap: 10px; }
.wui-meta-item svg { stroke: var(--wui-accent); flex: none; }
.wui-meta-item .wui-meta-label { font-size: var(--esd-fs-caption); font-weight: var(--esd-weight-label); color: var(--wui-ink3); text-transform: uppercase; letter-spacing: 0.06em; }
.wui-meta-item .wui-meta-value { font-family: var(--esd-font-heading); font-weight: var(--esd-weight-heading); font-size: var(--esd-fs-body); color: var(--wui-ink); }

/* ---------- Inputs ---------- */
.wui-input, .wui-select {
  min-height: 44px; padding: 10px 14px;
  background: var(--wui-surface); color: var(--wui-ink);
  border: 1.5px solid var(--wui-pill-border);
  border-radius: var(--esd-radius-input);
  font-family: var(--esd-font-body); font-size: var(--esd-fs-ui);
}
.wui-input::placeholder { color: var(--wui-ink3); }
.wui-input[aria-invalid="true"] { border-color: var(--wui-danger-fg); }
.wui-field-error { font-size: var(--esd-fs-caption); font-weight: var(--esd-weight-label); color: var(--wui-danger-fg); margin-top: 6px; }
.wui-label { display: block; font-size: var(--esd-fs-caption); font-weight: var(--esd-weight-label); color: var(--wui-ink2); margin-bottom: 6px; }
/* Search = pill input */
.wui-search { border-radius: var(--esd-radius-pill); padding: 10px 18px; }

/* ---------- Timeline row (planner) ---------- */
.wui-timeline-row { display: grid; grid-template-columns: 74px 28px 1fr; column-gap: 8px; align-items: stretch; }
.wui-timeline-time { text-align: right; font-family: var(--esd-font-heading); font-weight: var(--esd-weight-display); font-size: 16px; color: var(--wui-ink); }
.wui-timeline-dur { font-size: 11px; color: var(--wui-ink3); font-weight: var(--esd-weight-label); }
.wui-timeline-dot { width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--wui-accent); background: var(--wui-bg); }
.wui-timeline-dot.is-end { background: var(--wui-accent); border: none; }
.wui-timeline-rail { width: 2px; flex: 1; background: var(--wui-border); margin: 4px auto; }
.wui-timeline-card {
  background: var(--wui-surface); border: 1px solid var(--wui-border);
  border-radius: var(--esd-radius-input); padding: 14px 16px;
  box-shadow: var(--wui-shadow-tile);
}

/* ---------- Table (hub: sessions, registrations) ---------- */
.wui-table { width: 100%; border-collapse: collapse; font-size: var(--esd-fs-ui); }
.wui-table th {
  text-align: left; padding: 12px 16px;
  font-size: var(--esd-fs-caption); font-weight: var(--esd-weight-label);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--wui-ink3);
  border-bottom: 1px solid var(--wui-border);
}
.wui-table td { padding: 14px 16px; border-bottom: 1px solid var(--wui-border); color: var(--wui-ink2); }
.wui-table td:first-child { color: var(--wui-ink); font-weight: var(--esd-weight-label); }
.wui-table tbody tr:hover { background: var(--wui-hover-tint); }

/* ---------- Toast / status ---------- */
.wui-toast-region { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 100; }
.wui-toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--wui-surface); color: var(--wui-ink);
  border: 1px solid var(--wui-border); border-left: none;
  border-radius: var(--esd-radius-card-sm);
  box-shadow: var(--wui-shadow-float);
  padding: 14px 18px; font-size: var(--esd-fs-ui); font-weight: 500;
}
.wui-toast.is-success { background: var(--wui-success-bg); color: var(--wui-success-fg); }
.wui-toast.is-danger  { background: var(--wui-danger-bg);  color: var(--wui-danger-fg); }

/* ---------- Chrome ---------- */
.wui-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px clamp(20px, 5vw, 64px);
  background: var(--wui-bg); border-bottom: 1px solid var(--wui-border);
}
.wui-nav a { color: var(--wui-ink2); text-decoration: none; font-size: 15px; }
.wui-nav a:hover, .wui-nav a[aria-current="page"] { color: var(--wui-ink); }
.wui-logo-live { display: var(--wui-logo-light); height: 30px; width: auto; }
.wui-logo-dark { display: var(--wui-logo-dark); height: 30px; width: auto; }
.wui-family-badge {
  font-size: var(--esd-fs-caption); font-weight: var(--esd-weight-label); color: var(--wui-ink3);
  border: 1px solid var(--wui-border); border-radius: var(--esd-radius-pill); padding: 3px 10px;
}
/* Theme switch: pill group */
.wui-theme-switch {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
  border: 1.5px solid var(--wui-pill-border); border-radius: var(--esd-radius-pill);
  background: var(--wui-surface);
}
.wui-theme-switch button {
  border: none; border-radius: var(--esd-radius-pill); padding: 7px 15px;
  font-family: var(--esd-font-body); font-size: 13px; font-weight: var(--esd-weight-label);
  background: transparent; color: var(--wui-ink2); cursor: pointer;
  transition: all var(--esd-motion-base) var(--esd-ease);
}
.wui-theme-switch button[aria-pressed="true"] { background: var(--wui-accent); color: var(--wui-on-accent); }

/* Corner glow (decorative; hidden for reduced motion is not needed — static) */
.wui-glow-corner {
  position: absolute; top: -300px; right: -300px; width: 820px; height: 820px;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(var(--wui-glow), 0.09) 0%, rgba(var(--wui-glow), 0.03) 45%, transparent 72%);
}
.wui-footer-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 300px; pointer-events: none;
  background: linear-gradient(to top, var(--wui-footer-tint), transparent);
}