/* ══════════════════════════════════════════════════════════════════════════
   StratusUI — web component layer (vanilla, framework-agnostic).
   The web counterpart to the SwiftUI StratusUI kit: one design language,
   two renderings. HeroUI-inspired interaction model.

   THEMING CONTRACT
   ----------------
   Components read only the --sui-* custom properties below. A host project
   maps them to its brand tokens in its own :root (see phosphorOS style.css):

     :root {
       --sui-accent: var(--brand-accent);
       --sui-surface: var(--brand-surface);
       … etc.
     }

   The defaults here are a neutral dark set so the components are usable
   standalone; a host project overrides what it needs.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --sui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sui-font-display: var(--sui-font);
  --sui-surface: #1b1b2e;          /* popovers, panels                     */
  --sui-surface-2: #24243c;        /* control backgrounds, hover fills     */
  --sui-border: rgba(255, 255, 255, 0.12);
  --sui-fg: #f2f1f7;               /* primary text                         */
  --sui-text: #a9a8c4;             /* secondary text                       */
  --sui-text-dim: #6f6e8f;         /* muted labels / placeholders          */
  --sui-text-faint: #46456a;       /* out-of-range / disabled              */
  --sui-accent: #6c8cff;           /* selected / active                    */
  --sui-accent-contrast: #0d1030;  /* text on an accent fill               */
  --sui-accent-soft: rgba(108, 140, 255, 0.22); /* focus ring / soft hover */
  --sui-accent-2: #9a6cff;         /* secondary marker (e.g. today ring)   */
  --sui-radius: 16px;
  --sui-radius-sm: 10px;
  --sui-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --sui-ease: 0.14s ease;
}

/* ── Date picker ─────────────────────────────────────────────────────────── */
.sui-date-wrap { position: relative; display: block; width: 100%; }
.sui-date-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.sui-date-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; box-sizing: border-box; padding: 8px 12px;
  background: var(--sui-surface-2); border: 1px solid var(--sui-border); border-radius: var(--sui-radius-sm);
  color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.86rem; line-height: 1.4;
  cursor: pointer; text-align: left; transition: border-color var(--sui-ease), box-shadow var(--sui-ease), background var(--sui-ease);
}
.sui-date-trigger:hover { border-color: color-mix(in srgb, var(--sui-accent-2) 45%, var(--sui-border)); background: rgba(255, 255, 255, 0.03); }
.sui-date-trigger:focus-visible,
.sui-date-trigger[aria-expanded="true"] { outline: none; border-color: var(--sui-accent); box-shadow: 0 0 0 3px var(--sui-accent-soft); }
.sui-date-trigger:disabled { opacity: 0.55; cursor: not-allowed; }
.sui-date-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sui-date-label.is-placeholder { color: var(--sui-text-dim); }
.sui-date-ic { display: inline-flex; color: var(--sui-text-dim); flex: 0 0 auto; transition: color var(--sui-ease); }
.sui-date-trigger:hover .sui-date-ic, .sui-date-trigger[aria-expanded="true"] .sui-date-ic { color: var(--sui-accent); }

.sui-cal-pop {
  position: fixed; z-index: 10400; width: 300px; box-sizing: border-box;
  background: var(--sui-surface); border: 1px solid var(--sui-border); border-radius: var(--sui-radius);
  padding: 14px; box-shadow: var(--sui-shadow);
  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top center;
  transition: opacity var(--sui-ease), transform var(--sui-ease);
}
.sui-cal-pop.is-open { opacity: 1; transform: translateY(0) scale(1); }
.sui-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sui-cal-title {
  font-family: var(--sui-font-display); font-weight: 700; font-size: 0.98rem; color: var(--sui-fg);
  border: none; background: transparent; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  transition: background 0.12s ease;
}
.sui-cal-title:hover { background: var(--sui-surface-2); }
.sui-cal-title:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sui-accent-soft); }
/* Year-grid view — reached by clicking the month/year title, since paging a
   month at a time to reach a birth year decades back is impractical. */
.sui-cal-year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sui-cal-year {
  padding: 10px 0; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--sui-radius-sm);
  color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.88rem; font-weight: 600;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.sui-cal-year:hover { background: var(--sui-surface-2); }
.sui-cal-year.is-today { box-shadow: inset 0 0 0 1.5px var(--sui-accent-2); }
.sui-cal-year.is-sel { background: var(--sui-accent); color: var(--sui-accent-contrast); font-weight: 800; box-shadow: 0 2px 8px var(--sui-accent-soft); }
.sui-cal-year.is-sel:hover { background: var(--sui-accent); }
.sui-cal-year:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sui-accent-soft); }
.sui-cal-nav {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 999px; border: none; background: transparent; color: var(--sui-text); cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.sui-cal-nav:hover { background: var(--sui-surface-2); color: var(--sui-fg); }
.sui-cal-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sui-accent-soft); }
.sui-cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.sui-cal-wd span { text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.4px; color: var(--sui-text-dim); text-transform: uppercase; }
.sui-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.sui-cal-day {
  aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 999px; cursor: pointer;
  color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.84rem; font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.sui-cal-day:hover { background: var(--sui-surface-2); }
.sui-cal-day.is-dim { color: var(--sui-text-faint); }
.sui-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--sui-accent-2); }
.sui-cal-day.is-sel { background: var(--sui-accent); color: var(--sui-accent-contrast); font-weight: 800; box-shadow: 0 2px 8px var(--sui-accent-soft); }
.sui-cal-day.is-sel:hover { background: var(--sui-accent); }
.sui-cal-day:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sui-accent-soft); }
.sui-cal-day.is-sel:focus-visible { box-shadow: 0 0 0 3px var(--sui-accent-soft), 0 2px 8px var(--sui-accent-soft); }
.sui-cal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sui-border); }
.sui-cal-today, .sui-cal-clear {
  border: none; background: transparent; cursor: pointer; font-family: var(--sui-font);
  font-size: 0.78rem; font-weight: 600; padding: 4px 8px; border-radius: 8px; transition: background 0.12s ease, color 0.12s ease;
}
.sui-cal-today { color: var(--sui-accent); }
.sui-cal-today:hover { background: var(--sui-accent-soft); }
.sui-cal-clear { color: var(--sui-text-dim); }
.sui-cal-clear:hover { background: var(--sui-surface-2); color: var(--sui-fg); }
@media (prefers-reduced-motion: reduce) { .sui-cal-pop { transition: none; } }

/* ── Select / dropdown ───────────────────────────────────────────────────── */
.sui-sel-wrap { position: relative; display: block; width: 100%; }
.sui-sel-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.sui-sel-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; box-sizing: border-box; padding: 8px 12px;
  background: var(--sui-surface-2); border: 1px solid var(--sui-border); border-radius: var(--sui-radius-sm);
  color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.86rem; line-height: 1.4;
  cursor: pointer; text-align: left; transition: border-color var(--sui-ease), box-shadow var(--sui-ease), background var(--sui-ease);
}
.sui-sel-trigger:hover { border-color: color-mix(in srgb, var(--sui-accent-2) 45%, var(--sui-border)); background: rgba(255, 255, 255, 0.03); }
.sui-sel-trigger:focus-visible,
.sui-sel-trigger[aria-expanded="true"] { outline: none; border-color: var(--sui-accent); box-shadow: 0 0 0 3px var(--sui-accent-soft); }
.sui-sel-trigger:disabled { opacity: 0.55; cursor: not-allowed; }
.sui-sel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sui-sel-label.is-placeholder { color: var(--sui-text-dim); }
.sui-sel-ic { display: inline-flex; color: var(--sui-text-dim); flex: 0 0 auto; transition: transform var(--sui-ease), color var(--sui-ease); }
.sui-sel-trigger[aria-expanded="true"] .sui-sel-ic { transform: rotate(180deg); color: var(--sui-accent); }

.sui-sel-pop {
  position: fixed; z-index: 10400; max-height: 300px; overflow-y: auto; box-sizing: border-box;
  background: var(--sui-surface); border: 1px solid var(--sui-border); border-radius: var(--sui-radius-sm);
  padding: 6px; box-shadow: var(--sui-shadow);
  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top center;
  transition: opacity var(--sui-ease), transform var(--sui-ease);
}
.sui-sel-pop.is-open { opacity: 1; transform: translateY(0) scale(1); }
.sui-opt-group { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--sui-text-dim); padding: 8px 10px 4px; }
.sui-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 8px 10px; border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left;
  color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.86rem; transition: background 0.1s ease, color 0.1s ease;
}
.sui-opt-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sui-opt-check { display: inline-flex; color: var(--sui-accent); opacity: 0; flex: 0 0 auto; }
.sui-opt.is-sel { color: var(--sui-accent); font-weight: 600; }
.sui-opt.is-sel .sui-opt-check { opacity: 1; }
.sui-opt.is-active { background: var(--sui-surface-2); }
.sui-opt.is-disabled { color: var(--sui-text-faint); cursor: not-allowed; }

/* ── Buttons (used by modal actions; general-purpose) ────────────────────────── */
.sui-btn { font-family: var(--sui-font); font-size: 0.86rem; font-weight: 600; padding: 8px 16px; border-radius: var(--sui-radius-sm); border: 1px solid transparent; cursor: pointer; transition: background var(--sui-ease), border-color var(--sui-ease), opacity var(--sui-ease); }
.sui-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sui-accent-soft); }
.sui-btn-primary { background: var(--sui-accent); color: var(--sui-accent-contrast); }
.sui-btn-primary:hover { opacity: 0.9; }
.sui-btn-ghost { background: var(--sui-surface-2); color: var(--sui-fg); border-color: var(--sui-border); }
.sui-btn-ghost:hover { border-color: color-mix(in srgb, var(--sui-accent-2) 45%, var(--sui-border)); }
.sui-btn-danger { background: #e0484d; color: #fff; }
.sui-btn-danger:hover { opacity: 0.9; }

/* ── Time input ──────────────────────────────────────────────────────────────── */
.sui-time-wrap { position: relative; display: block; width: 100%; }
.sui-time-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.sui-time-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; padding: 8px 12px; background: var(--sui-surface-2); border: 1px solid var(--sui-border); border-radius: var(--sui-radius-sm); color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.86rem; cursor: pointer; text-align: left; transition: border-color var(--sui-ease), box-shadow var(--sui-ease), background var(--sui-ease); }
.sui-time-trigger:hover { border-color: color-mix(in srgb, var(--sui-accent-2) 45%, var(--sui-border)); background: rgba(255,255,255,0.03); }
.sui-time-trigger:focus-visible, .sui-time-trigger[aria-expanded="true"] { outline: none; border-color: var(--sui-accent); box-shadow: 0 0 0 3px var(--sui-accent-soft); }
.sui-time-label.is-placeholder { color: var(--sui-text-dim); }
.sui-time-ic { display: inline-flex; color: var(--sui-text-dim); }
.sui-time-trigger[aria-expanded="true"] .sui-time-ic { color: var(--sui-accent); }
.sui-tm-pop { position: fixed; z-index: 10400; background: var(--sui-surface); border: 1px solid var(--sui-border); border-radius: var(--sui-radius); padding: 10px; box-shadow: var(--sui-shadow); opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top center; transition: opacity var(--sui-ease), transform var(--sui-ease); }
.sui-tm-pop.is-open { opacity: 1; transform: translateY(0) scale(1); }
.sui-tm-cols { display: flex; gap: 6px; }
.sui-tm-col { display: flex; flex-direction: column; }
.sui-tm-col-h { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--sui-text-dim); text-align: center; height: 14px; margin-bottom: 4px; }
.sui-tm-scroll { display: flex; flex-direction: column; gap: 2px; max-height: 190px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.sui-tm-cell { min-width: 46px; padding: 7px 10px; border: none; background: transparent; border-radius: 8px; color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.84rem; cursor: pointer; text-align: center; transition: background 0.1s ease, color 0.1s ease; }
.sui-tm-cell:hover { background: var(--sui-surface-2); }
.sui-tm-cell.is-sel { background: var(--sui-accent); color: var(--sui-accent-contrast); font-weight: 800; }
.sui-tm-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sui-border); text-align: right; }
.sui-tm-clear { border: none; background: transparent; color: var(--sui-text-dim); font-family: var(--sui-font); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.sui-tm-clear:hover { background: var(--sui-surface-2); color: var(--sui-fg); }

/* ── Switch ────────────────────────────────────────────────────────────────── */
.sui-switch { position: relative; display: inline-flex; align-items: center; width: 42px; height: 24px; padding: 0; border: none; border-radius: 999px; background: var(--sui-surface-2); box-shadow: inset 0 0 0 1px var(--sui-border); cursor: pointer; transition: background var(--sui-ease), box-shadow var(--sui-ease); vertical-align: middle; flex: 0 0 auto; }
.sui-switch:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--sui-border), 0 0 0 3px var(--sui-accent-soft); }
.sui-switch-thumb { position: absolute; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: var(--sui-fg); transition: transform var(--sui-ease); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.sui-switch.is-on { background: var(--sui-accent); box-shadow: inset 0 0 0 1px var(--sui-accent); }
.sui-switch.is-on .sui-switch-thumb { transform: translateX(18px); background: var(--sui-accent-contrast); }
.sui-switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.sui-toast-host { position: fixed; z-index: 10500; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 40px)); }
.sui-toast { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--sui-surface); border: 1px solid var(--sui-border); border-left: 3px solid var(--sui-accent-2); border-radius: var(--sui-radius-sm); box-shadow: var(--sui-shadow); color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.86rem; opacity: 0; transform: translateY(8px); transition: opacity var(--sui-ease), transform var(--sui-ease); }
.sui-toast.is-open { opacity: 1; transform: translateY(0); }
.sui-toast-ic { display: inline-flex; flex: 0 0 auto; }
.sui-toast-msg { flex: 1; line-height: 1.4; }
.sui-toast-success { border-left-color: #4ac07a; } .sui-toast-success .sui-toast-ic { color: #4ac07a; }
.sui-toast-error { border-left-color: #e0484d; } .sui-toast-error .sui-toast-ic { color: #e0484d; }
.sui-toast-info { border-left-color: var(--sui-accent); } .sui-toast-info .sui-toast-ic { color: var(--sui-accent); }
.sui-toast-action { border: none; background: transparent; color: var(--sui-accent); font-family: var(--sui-font); font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 4px 8px; border-radius: 8px; flex: 0 0 auto; }
.sui-toast-action:hover { background: var(--sui-accent-soft); }
.sui-toast-x { border: none; background: transparent; color: var(--sui-text-dim); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; flex: 0 0 auto; }
.sui-toast-x:hover { color: var(--sui-fg); }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.sui-modal-back { position: fixed; inset: 0; z-index: 4900; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6, 6, 16, 0.62); opacity: 0; transition: opacity var(--sui-ease); }
.sui-modal-back.is-open { opacity: 1; }
.sui-modal { width: min(440px, 100%); background: var(--sui-surface); border: 1px solid var(--sui-border); border-radius: var(--sui-radius); box-shadow: var(--sui-shadow); padding: 22px; transform: translateY(8px) scale(0.98); transition: transform var(--sui-ease); }
.sui-modal-back.is-open .sui-modal { transform: translateY(0) scale(1); }
.sui-modal-title { font-family: var(--sui-font-display); font-weight: 700; font-size: 1.1rem; color: var(--sui-fg); margin-bottom: 8px; }
.sui-modal-body { color: var(--sui-text); font-size: 0.92rem; line-height: 1.55; }
.sui-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .sui-tm-pop, .sui-toast, .sui-modal-back, .sui-modal { transition: none; } }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.sui-tablist { display: inline-flex; gap: 2px; padding: 4px; background: var(--sui-surface-2); border: 1px solid var(--sui-border); border-radius: 999px; }
.sui-tablist [data-tab] { border: none; background: transparent; color: var(--sui-text); font-family: var(--sui-font); font-size: 0.84rem; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: background var(--sui-ease), color var(--sui-ease); }
.sui-tablist [data-tab]:hover { color: var(--sui-fg); }
.sui-tablist [data-tab].is-active { background: var(--sui-accent); color: var(--sui-accent-contrast); }
.sui-tablist [data-tab]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sui-accent-soft); }
.sui-tabs [data-tab-panel] { margin-top: 16px; }

/* ── Tooltip ───────────────────────────────────────────────────────────────── */
.sui-tip { position: fixed; z-index: 10600; max-width: 240px; pointer-events: none; background: var(--sui-fg); color: var(--sui-surface); font-family: var(--sui-font); font-size: 0.76rem; font-weight: 600; line-height: 1.35; padding: 6px 9px; border-radius: 7px; box-shadow: 0 6px 20px rgba(0,0,0,0.4); opacity: 0; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease; }
.sui-tip.is-open { opacity: 1; transform: translateY(0); }

/* ── Number input ──────────────────────────────────────────────────────────── */
.sui-num { display: inline-flex; align-items: stretch; width: 100%; box-sizing: border-box; background: var(--sui-surface-2); border: 1px solid var(--sui-border); border-radius: var(--sui-radius-sm); overflow: hidden; transition: border-color var(--sui-ease), box-shadow var(--sui-ease); }
.sui-num:focus-within { border-color: var(--sui-accent); box-shadow: 0 0 0 3px var(--sui-accent-soft); }
.sui-num-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; border: none; background: transparent; color: var(--sui-text); cursor: pointer; transition: background 0.1s ease, color 0.1s ease; }
.sui-num-btn:hover { background: rgba(255,255,255,0.05); color: var(--sui-fg); }
.sui-num-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sui-num-input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.86rem; text-align: center; padding: 8px 4px; -moz-appearance: textfield; appearance: textfield; }
.sui-num-input:focus { outline: none; }
.sui-num-input::-webkit-inner-spin-button, .sui-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Chips & badges ────────────────────────────────────────────────────────── */
.sui-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sui-font); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2px; padding: 3px 9px; border-radius: 999px; background: var(--sui-surface-2); color: var(--sui-text); border: 1px solid var(--sui-border); }
.sui-badge-accent { background: var(--sui-accent-soft); color: var(--sui-accent); border-color: transparent; }
.sui-badge-success { background: rgba(74,192,122,0.16); color: #6bd897; border-color: transparent; }
.sui-badge-warning { background: rgba(255,170,91,0.16); color: #ffaa5b; border-color: transparent; }
.sui-badge-danger { background: rgba(224,72,77,0.16); color: #ff7a7e; border-color: transparent; }
.sui-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sui-font); font-size: 0.8rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--sui-surface-2); color: var(--sui-fg); border: 1px solid var(--sui-border); }
.sui-chip.is-removable { padding-right: 6px; }
.sui-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; border-radius: 999px; background: transparent; color: var(--sui-text-dim); cursor: pointer; transition: background 0.1s ease, color 0.1s ease; }
.sui-chip-x:hover { background: rgba(255,255,255,0.08); color: var(--sui-fg); }

/* ── Popover & Menu ────────────────────────────────────────────────────────── */
.sui-pop-panel, .sui-menu-list { position: fixed; z-index: 10410; min-width: 180px; box-sizing: border-box; background: var(--sui-surface); border: 1px solid var(--sui-border); border-radius: var(--sui-radius-sm); padding: 6px; box-shadow: var(--sui-shadow); opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top center; transition: opacity var(--sui-ease), transform var(--sui-ease); }
.sui-pop-panel.is-open, .sui-menu-list.is-open { opacity: 1; transform: translateY(0) scale(1); }
.sui-pop-panel[hidden], .sui-menu-list[hidden] { display: none; }
.sui-menu { display: inline-block; }
.sui-menu-list [role="menuitem"] { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.86rem; }
.sui-menu-list [role="menuitem"]:hover, .sui-menu-list [role="menuitem"]:focus-visible { background: var(--sui-surface-2); outline: none; }
.sui-menu-list [role="menuitem"].is-danger { color: #ff7a7e; }
.sui-menu-list [role="menuitem"][disabled] { color: var(--sui-text-faint); cursor: not-allowed; }
.sui-menu-sep { height: 1px; background: var(--sui-border); margin: 6px 4px; }

/* ── Accordion ─────────────────────────────────────────────────────────────── */
.sui-accordion { border: 1px solid var(--sui-border); border-radius: var(--sui-radius-sm); overflow: hidden; }
.sui-acc-item + .sui-acc-item { border-top: 1px solid var(--sui-border); }
.sui-acc-head { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 13px 16px; border: none; background: transparent; cursor: pointer; text-align: left; color: var(--sui-fg); font-family: var(--sui-font-display); font-size: 0.92rem; font-weight: 700; }
.sui-acc-head:hover { background: var(--sui-surface-2); }
.sui-acc-head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sui-accent-soft); }
.sui-acc-head::after { content: '⌄'; color: var(--sui-text-dim); font-size: 1.1rem; line-height: 1; transition: transform var(--sui-ease); }
.sui-acc-item.is-open > .sui-acc-head::after { transform: rotate(180deg); }
.sui-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.2s ease; }
.sui-acc-body > * { padding: 0 16px; }
.sui-acc-body > *:first-child { padding-top: 2px; } .sui-acc-body > *:last-child { padding-bottom: 16px; }

/* ── Radio group ───────────────────────────────────────────────────────────── */
.sui-radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.88rem; }
.sui-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.sui-radio-dot { position: relative; width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--sui-border); background: var(--sui-surface-2); flex: 0 0 auto; transition: border-color var(--sui-ease); }
.sui-radio input:checked + .sui-radio-dot { border-color: var(--sui-accent); }
.sui-radio input:checked + .sui-radio-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 999px; background: var(--sui-accent); transform: translate(-50%, -50%); }
.sui-radio input:focus-visible + .sui-radio-dot { box-shadow: 0 0 0 3px var(--sui-accent-soft); }

/* ── Inputs / textarea / card / divider ────────────────────────────────────── */
.sui-input, .sui-textarea { width: 100%; box-sizing: border-box; padding: 8px 12px; background: var(--sui-surface-2); border: 1px solid var(--sui-border); border-radius: var(--sui-radius-sm); color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.86rem; transition: border-color var(--sui-ease), box-shadow var(--sui-ease); }
.sui-input::placeholder, .sui-textarea::placeholder { color: var(--sui-text-dim); }
.sui-input:focus, .sui-textarea:focus { outline: none; border-color: var(--sui-accent); box-shadow: 0 0 0 3px var(--sui-accent-soft); }
.sui-textarea { resize: vertical; min-height: 76px; }
.sui-card { background: var(--sui-surface); border: 1px solid var(--sui-border); border-radius: var(--sui-radius); padding: 20px; }
.sui-divider { height: 1px; border: none; background: var(--sui-border); margin: 16px 0; }
.sui-divider-v { width: 1px; align-self: stretch; background: var(--sui-border); }

/* ── Slider ────────────────────────────────────────────────────────────────── */
.sui-range-wrap { position: relative; display: block; padding-top: 4px; }
.sui-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--sui-accent) var(--sui-pct, 0%), var(--sui-surface-2) var(--sui-pct, 0%)); outline: none; }
.sui-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 999px; background: var(--sui-accent); border: 2px solid var(--sui-surface); box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer; }
.sui-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: var(--sui-accent); border: 2px solid var(--sui-surface); cursor: pointer; }
.sui-range:focus-visible { box-shadow: 0 0 0 3px var(--sui-accent-soft); }
.sui-range-bubble { position: absolute; top: -22px; transform: translateX(-50%); font-size: 0.72rem; font-weight: 700; color: var(--sui-accent); pointer-events: none; }

/* ── Spinner / Skeleton / Progress ─────────────────────────────────────────── */
.sui-spinner { display: inline-block; width: 20px; height: 20px; border: 2.5px solid var(--sui-surface-2); border-top-color: var(--sui-accent); border-radius: 999px; animation: sui-spin 0.7s linear infinite; }
@keyframes sui-spin { to { transform: rotate(360deg); } }
.sui-skeleton { display: block; background: linear-gradient(90deg, var(--sui-surface-2) 25%, color-mix(in srgb, var(--sui-fg) 8%, var(--sui-surface-2)) 37%, var(--sui-surface-2) 63%); background-size: 400% 100%; border-radius: 8px; animation: sui-shimmer 1.4s ease infinite; min-height: 14px; }
@keyframes sui-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sui-progress { width: 100%; height: 8px; border-radius: 999px; background: var(--sui-surface-2); overflow: hidden; }
.sui-progress > i { display: block; height: 100%; width: var(--sui-pct, 0%); background: var(--sui-accent); border-radius: 999px; transition: width 0.3s ease; }

/* ── Alert ─────────────────────────────────────────────────────────────────── */
.sui-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--sui-radius-sm); background: var(--sui-surface-2); border: 1px solid var(--sui-border); border-left: 3px solid var(--sui-accent-2); color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.86rem; line-height: 1.45; transition: opacity var(--sui-ease), transform var(--sui-ease); }
.sui-alert.is-leaving { opacity: 0; transform: translateY(-4px); }
.sui-alert-msg { flex: 1; }
.sui-alert-x { border: none; background: transparent; color: var(--sui-text-dim); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.sui-alert-x:hover { color: var(--sui-fg); }
.sui-alert-success { border-left-color: #4ac07a; } .sui-alert-warning { border-left-color: #ffaa5b; } .sui-alert-danger { border-left-color: #e0484d; } .sui-alert-info { border-left-color: var(--sui-accent); }

/* ── Avatar / User ─────────────────────────────────────────────────────────── */
.sui-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--sui-surface-2); color: var(--sui-fg); font-family: var(--sui-font); font-size: 0.82rem; font-weight: 700; overflow: hidden; flex: 0 0 auto; }
.sui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sui-avatar-sm { width: 26px; height: 26px; font-size: 0.7rem; } .sui-avatar-lg { width: 52px; height: 52px; font-size: 1.05rem; }
.sui-user { display: inline-flex; align-items: center; gap: 10px; }
.sui-user-name { font-weight: 600; color: var(--sui-fg); font-size: 0.88rem; line-height: 1.2; }
.sui-user-sub { color: var(--sui-text-dim); font-size: 0.76rem; }

/* ── Pagination ────────────────────────────────────────────────────────────── */
.sui-pagination { display: inline-flex; align-items: center; gap: 4px; }
.sui-pg-btn { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid transparent; background: transparent; border-radius: 8px; color: var(--sui-text); font-family: var(--sui-font); font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: background var(--sui-ease), color var(--sui-ease); }
.sui-pg-btn:hover:not(:disabled) { background: var(--sui-surface-2); color: var(--sui-fg); }
.sui-pg-btn.is-active { background: var(--sui-accent); color: var(--sui-accent-contrast); }
.sui-pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sui-pg-gap { color: var(--sui-text-dim); padding: 0 2px; }

/* ── Drawer ────────────────────────────────────────────────────────────────── */
.sui-drawer-back { position: fixed; inset: 0; z-index: 4800; background: rgba(6,6,16,0.62); opacity: 0; transition: opacity var(--sui-ease); }
.sui-drawer-back.is-open { opacity: 1; }
.sui-drawer { position: absolute; top: 0; bottom: 0; width: min(420px, 92vw); background: var(--sui-surface); box-shadow: var(--sui-shadow); display: flex; flex-direction: column; transition: transform 0.24s ease; }
.sui-drawer-right { right: 0; border-left: 1px solid var(--sui-border); transform: translateX(100%); }
.sui-drawer-left { left: 0; border-right: 1px solid var(--sui-border); transform: translateX(-100%); }
.sui-drawer-back.is-open .sui-drawer { transform: translateX(0); }
.sui-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--sui-border); }
.sui-drawer-title { font-family: var(--sui-font-display); font-weight: 700; font-size: 1.05rem; color: var(--sui-fg); }
.sui-drawer-x { border: none; background: transparent; color: var(--sui-text-dim); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sui-drawer-x:hover { color: var(--sui-fg); }
.sui-drawer-body { flex: 1; overflow-y: auto; padding: 18px; color: var(--sui-text); font-family: var(--sui-font); font-size: 0.9rem; line-height: 1.55; }

/* ── Date range extras (on top of the date-picker calendar styles) ─────────── */
.sui-cal-day.is-in-range { background: var(--sui-accent-soft); border-radius: 0; }
.sui-cal-day.is-range-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sui-cal-day.is-range-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sui-rng-hint { font-size: 0.76rem; color: var(--sui-text-dim); }

/* ── Data table ────────────────────────────────────────────────────────────── */
.sui-table { width: 100%; border-collapse: collapse; font-family: var(--sui-font); font-size: 0.86rem; color: var(--sui-fg); }
.sui-table th, .sui-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sui-border); }
.sui-table thead th { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--sui-text-dim); }
.sui-table tbody tr:hover { background: var(--sui-surface-2); }
.sui-table tbody tr.is-selected { background: var(--sui-accent-soft); }
.sui-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.sui-th-sort::after { content: '↕'; opacity: 0.4; margin-left: 5px; font-size: 0.85em; }
.sui-th-sort.is-asc::after { content: '↑'; opacity: 1; color: var(--sui-accent); }
.sui-th-sort.is-desc::after { content: '↓'; opacity: 1; color: var(--sui-accent); }
.sui-th-sort:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sui-accent-soft); }
.sui-tbl-selcol { width: 40px; text-align: center; }

/* ── Org chart (venue settings → roles) ─────────────────────────────────────
   Indented tree rather than a boxes-and-connectors diagram: a venue has ~25
   roles and a tree stays readable at that size, reflows on a phone, and needs
   no layout engine. Connectors are borders, so there is no SVG to keep in sync
   with the DOM while nodes move under a drag. */
.oc-wrap { padding: 4px 2px; }
.oc-help { color: var(--text-dim); font-size: .82rem; margin: 0 0 12px; }
.oc-count { display: inline-block; margin-left: 8px; opacity: .75; }
.oc-root-zone {
  border: 1px dashed var(--border2, #333); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 12px; color: var(--text-dim);
  font-size: .8rem; text-align: center;
}
.oc-ul { list-style: none; margin: 0; padding-left: 18px; }
.oc-tree { padding-left: 0; }
.oc-li { position: relative; padding: 3px 0; }
.oc-ul .oc-li::before {
  content: ''; position: absolute; left: -10px; top: 0; bottom: 50%;
  border-left: 1px solid var(--border2, #333); border-bottom: 1px solid var(--border2, #333);
  width: 10px; border-bottom-left-radius: 6px;
}
.oc-node {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface, #1b1b33); border: 1px solid var(--border2, #333);
  cursor: grab; user-select: none; font-size: .86rem; color: var(--white, #fff);
}
.oc-node:active { cursor: grabbing; }
.oc-node:focus-visible { outline: 2px solid var(--lavender, #C4A0E0); outline-offset: 2px; }
.oc-dragging { opacity: .45; }
/* The drop target must be unmistakable — a drag that lands on the wrong parent
   is silent, and the operator only finds out by reading the chart afterwards. */
.oc-over { border-color: var(--yellow, #F2D264); box-shadow: 0 0 0 2px var(--yellow, #F2D264) inset; }
.oc-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.oc-name { font-weight: 600; }
.oc-hint { color: var(--text-dim); font-size: .74rem; font-style: italic; }
.oc-unlink {
  background: none; border: 0; color: var(--text-dim); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 2px;
}
.oc-unlink:hover { color: var(--yellow, #F2D264); }

/* ── Image field (venue settings: logo + brand icons) ───────────────────── */
.vif-wrap { display: flex; gap: 12px; align-items: flex-start; }
.vif-right { flex: 1 1 auto; min-width: 0; }
/* Checkerboard: most of these are transparent PNGs, and on a dark panel a
   transparent icon is indistinguishable from a missing one. */
.vif-preview {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 10px;
  border: 1px solid var(--border2, #333); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background-color: #2a2a3d;
  background-image: linear-gradient(45deg, #33334a 25%, transparent 25%),
                    linear-gradient(-45deg, #33334a 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #33334a 75%),
                    linear-gradient(-45deg, transparent 75%, #33334a 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.vif-preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.vif-empty { font-size: .62rem; color: var(--text-dim); text-align: center; padding: 4px; }
.vif-bad { color: #ef4444; }
.vif-drop {
  margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--border2, #333);
  border-radius: 8px; font-size: .74rem; color: var(--text-dim);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.vif-drop.vif-over { border-color: var(--yellow, #F2D264); color: var(--white, #fff); }
.vif-drop.vif-busy { opacity: .6; pointer-events: none; }
.vif-pick { background: none; border: 0; color: var(--lavender, #C4A0E0); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.vif-hint { font-style: normal; opacity: .8; white-space: nowrap; }

/* ── Developer masquerade ───────────────────────────────────────────────────
   The banner is fixed and cannot be dismissed except by ending the session:
   impersonation without a permanent reminder is how someone edits real data
   believing it is their own account. It PUSHES the page down rather than
   overlaying, so it can never cover the nav and trap you inside the session. */
#masq-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-size: .82rem; font-weight: 600;
  background: #b45309; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
body.masq-on { padding-top: 38px; }
#masq-banner .masq-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #fff;
  animation: masq-pulse 1.8s ease-in-out infinite; flex: 0 0 auto;
}
@keyframes masq-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
#masq-banner .masq-venue { font-weight: 400; opacity: .85; }
#masq-banner #masq-exit {
  margin-left: auto; background: #fff; color: #b45309; border: 0;
  border-radius: 999px; padding: 4px 14px; font-weight: 700; cursor: pointer;
}
.masq-rows { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.masq-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px;
  background: transparent; border: 1px solid transparent; cursor: pointer; color: inherit;
}
.masq-row:hover { background: rgba(255,255,255,.06); border-color: var(--border2, #333); }
.masq-row-name { font-weight: 600; }
.masq-row-meta { font-size: .74rem; opacity: .7; }
/* Two different empty states, and the difference matters. "roleless" is attached
   to venues but holds nothing at them — most imported staff. "novenue" belongs to
   no venue at all, which is what an App Store user sees on first sign-in. */
.masq-row-none .masq-row-meta { font-style: italic; }
.masq-row-novenue .masq-row-meta { font-style: italic; opacity: .55; }
/* Terminated staff have no venue access at all, so an empty app is the correct
   result rather than a fault. Dimmed and struck so that is obvious BEFORE you
   pick them, not after ten minutes of debugging. */
.masq-row-inactive { opacity: .5; }
.masq-row-inactive .masq-row-name { text-decoration: line-through; }