/* =========================================================
   Demo kit — shared base for interactive demos (.dx).
   Each demo sets its own brand through the --dx-* variables
   in styles/demos/<key>.css, so demos look like real,
   distinct products while sharing one component set.
   ========================================================= */
.dx{
  --dx-bg: #FAFAF8;
  --dx-surface: #FFFFFF;
  --dx-surface-2: #F2F1ED;
  --dx-text: #18181B;
  --dx-muted: #6B6B73;
  --dx-border: #E4E2DC;
  --dx-accent: #FF5C00;
  --dx-accent-ink: #FFFFFF;
  --dx-accent-soft: rgba(255,92,0,.1);
  --dx-ok: #15803D;
  --dx-warn: #B45309;
  --dx-bad: #B91C1C;
  --dx-radius: 12px;
  --dx-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --dx-display: var(--dx-font);
  --dx-shadow: 0 10px 30px -12px rgba(20,20,30,.25);

  flex:1; background: var(--dx-bg); color: var(--dx-text); font-family: var(--dx-font);
  line-height: 1.5; outline: none; color-scheme: light;
}
.dx *, .dx *::before, .dx *::after{ box-sizing: border-box; }
.dx h1, .dx h2, .dx h3, .dx h4{ font-family: var(--dx-display); color: var(--dx-text); letter-spacing: -.01em; line-height:1.2; margin:0 0 .5rem; }
.dx p{ color: var(--dx-muted); margin: 0 0 .75rem; }
/* resets with zero specificity (:where) so component classes like .dx-btn always win */
:where(.dx) a{ color: inherit; }
:where(.dx) button{ font: inherit; color: inherit; }
:where(.dx) input, :where(.dx) select, :where(.dx) textarea{ font: inherit; color: var(--dx-text); }
:where(.dx) svg{ width: 20px; height: 20px; flex:none; }
/* an arrow inside a plain text link stays on the line (base.css makes every svg a block) */
.dx a:not([class]) > svg, .dx a.dx-small > svg{ display:inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.dx img{ max-width:100%; display:block; }
.dx :focus-visible{ outline: 2px solid var(--dx-accent); outline-offset: 2px; }
.dx .dx-boot{ color: var(--dx-muted); }

.dx-wrap{ width:100%; max-width: 1200px; margin-inline:auto; padding-inline: clamp(1rem, 3vw, 2rem); }
.dx-section{ padding-block: clamp(2rem, 5vw, 4rem); }
.dx-row{ display:flex; align-items:center; gap: .75rem; }
.dx-between{ display:flex; align-items:center; justify-content:space-between; gap: 1rem; flex-wrap:wrap; }
.dx-muted{ color: var(--dx-muted); }
.dx-small{ font-size: .875rem; }
.dx-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; }
.dx-page{ animation: dx-page-in .35s cubic-bezier(.16,1,.3,1); }
@keyframes dx-page-in{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- Buttons ---------- */
.dx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; text-decoration:none;
  padding: .7rem 1.2rem; border-radius: var(--dx-radius); border: 1px solid transparent;
  background: var(--dx-accent); color: var(--dx-accent-ink); font-weight: 600; font-size: .95rem; white-space:nowrap;
  transition: transform .15s, filter .15s, background .15s, border-color .15s, box-shadow .15s;
}
.dx-btn:hover{ filter: brightness(1.07); box-shadow: 0 6px 18px -8px var(--dx-accent); }
.dx-btn:active{ transform: translateY(1px) scale(.99); }
.dx-btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; box-shadow:none; }
.dx-btn.ghost{ background: transparent; color: var(--dx-text); border-color: var(--dx-border); }
.dx-btn.ghost:hover{ border-color: var(--dx-accent); color: var(--dx-accent); box-shadow:none; }
.dx-btn.soft{ background: var(--dx-accent-soft); color: var(--dx-accent); }
.dx-btn.sm{ padding: .45rem .8rem; font-size: .85rem; }
.dx-btn.lg{ padding: .95rem 1.6rem; font-size: 1.02rem; }
.dx-btn.block{ width:100%; }
.dx-icon-btn{
  position:relative; display:inline-grid; place-items:center; width:40px; height:40px; border-radius: 50%; cursor:pointer;
  border:1px solid var(--dx-border); background: var(--dx-surface); color: var(--dx-text); transition: border-color .15s, color .15s;
}
.dx-icon-btn:hover{ border-color: var(--dx-accent); color: var(--dx-accent); }
.dx-icon-btn[aria-pressed="true"]{ color: var(--dx-accent); background: var(--dx-accent-soft); border-color: transparent; }
.dx-icon-btn[aria-pressed="true"] svg{ fill: currentColor; }
.dx-count{
  position:absolute; top:-4px; right:-4px; min-width: 19px; height:19px; padding: 0 5px; border-radius: 10px;
  background: var(--dx-accent); color: var(--dx-accent-ink); font-size: 11px; font-weight:700; display:grid; place-items:center;
}
.dx-count[hidden]{ display:none; }
.dx-count.bump{ animation: dx-bump .4s cubic-bezier(.16,1,.3,1); }
@keyframes dx-bump{ 40%{ transform: scale(1.35); } }

/* ---------- Form controls ---------- */
.dx-field{ display:flex; flex-direction:column; gap:.35rem; }
.dx-field label, .dx-label{ font-size: .85rem; font-weight:600; color: var(--dx-text); }
.dx-input, .dx-select, .dx-textarea{
  width:100%; padding: .7rem .9rem; border-radius: calc(var(--dx-radius) - 2px); border:1px solid var(--dx-border);
  background: var(--dx-surface); transition: border-color .15s, box-shadow .15s;
}
.dx-input:focus, .dx-select:focus, .dx-textarea:focus{ outline:none; border-color: var(--dx-accent); box-shadow: 0 0 0 3px var(--dx-accent-soft); }
.dx-textarea{ min-height: 100px; resize: vertical; }
.dx-field.invalid .dx-input, .dx-field.invalid .dx-select{ border-color: var(--dx-bad); }
.dx-error{ font-size: .78rem; color: var(--dx-bad); min-height: 1em; }
.dx-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px){ .dx-grid-2{ grid-template-columns: 1fr; } }
.dx-search{ position:relative; }
.dx-search svg{ position:absolute; left: .8rem; top:50%; transform: translateY(-50%); color: var(--dx-muted); width:18px; height:18px; pointer-events:none; }
.dx-search .dx-input{ padding-left: 2.4rem; }
.dx-check{ display:flex; align-items:center; gap:.55rem; font-size:.92rem; cursor:pointer; padding: .2rem 0; }
.dx-check input{ width:17px; height:17px; accent-color: var(--dx-accent); }
.dx-stepper{ display:inline-flex; align-items:center; border:1px solid var(--dx-border); border-radius: var(--dx-radius); background: var(--dx-surface); }
.dx-stepper button{ width:36px; height:36px; display:grid; place-items:center; border:0; background:none; cursor:pointer; }
.dx-stepper button:hover{ color: var(--dx-accent); }
.dx-stepper svg{ width:16px; height:16px; }
.dx-stepper output{ min-width: 2ch; text-align:center; font-weight:600; }
.dx-seg{ display:inline-flex; padding:3px; border-radius: var(--dx-radius); background: var(--dx-surface-2); gap:2px; flex-wrap:wrap; }
.dx-seg button{ border:0; background:none; padding: .45rem .9rem; border-radius: calc(var(--dx-radius) - 3px); cursor:pointer; font-weight:600; font-size:.88rem; color: var(--dx-muted); }
.dx-seg button[aria-pressed="true"]{ background: var(--dx-surface); color: var(--dx-text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.dx-chips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.dx-chip{
  border:1px solid var(--dx-border); background: var(--dx-surface); border-radius: 999px; padding: .42rem .9rem; cursor:pointer;
  font-size: .86rem; font-weight:600; color: var(--dx-muted); transition: all .15s;
}
.dx-chip:hover{ color: var(--dx-text); border-color: var(--dx-accent); }
.dx-chip[aria-pressed="true"]{ background: var(--dx-accent); border-color: var(--dx-accent); color: var(--dx-accent-ink); }

/* ---------- Bits ---------- */
.dx-card{ background: var(--dx-surface); border:1px solid var(--dx-border); border-radius: calc(var(--dx-radius) + 4px); }
.dx-badge{ display:inline-flex; align-items:center; gap:.3rem; font-size: .72rem; font-weight:700; padding: .2rem .55rem; border-radius: 999px; background: var(--dx-surface-2); color: var(--dx-muted); letter-spacing:.02em; }
.dx-badge.ok{ background: rgba(21,128,61,.12); color: var(--dx-ok); }
.dx-badge.warn{ background: rgba(180,83,9,.12); color: var(--dx-warn); }
.dx-badge.bad{ background: rgba(185,28,28,.12); color: var(--dx-bad); }
.dx-badge.accent{ background: var(--dx-accent-soft); color: var(--dx-accent); }
.dx-empty{ text-align:center; padding: 3rem 1rem; color: var(--dx-muted); }
.dx-empty svg{ width:36px; height:36px; margin: 0 auto .75rem; display:block; color: var(--dx-accent); }
.dx-stars{ display:inline-flex; gap:1px; color: #F59E0B; }
.dx-stars svg{ width:15px; height:15px; fill: currentColor; stroke:none; }
.dx-stars .off{ color: #D6D3CD; }
.dx-progress{ height:8px; border-radius: 99px; background: var(--dx-surface-2); overflow:hidden; }
.dx-progress > i{ display:block; height:100%; border-radius: inherit; background: var(--dx-accent); transition: width .6s cubic-bezier(.16,1,.3,1); }
.dx-spin{ width:18px; height:18px; border-radius:50%; border:2px solid currentColor; border-right-color: transparent; animation: dx-spin .7s linear infinite; }
@keyframes dx-spin{ to{ transform: rotate(360deg); } }

/* Demo Mode label on every simulated action */
.dx-notice{
  display:flex; align-items:flex-start; gap:.6rem; margin: 0 0 1rem; padding: .7rem .9rem; font-size: .85rem;
  border: 1px dashed rgba(255,92,0,.55); border-radius: var(--dx-radius); background: rgba(255,92,0,.07); color: var(--dx-text);
}
.dx-notice strong{ color: #E04E00; }
.dx-notice-dot{ width:8px; height:8px; border-radius:50%; background:#FF5C00; margin-top:.4rem; flex:none; }

/* ---------- Modal / drawer ---------- */
.dx-modal{
  padding:0; border:0; background: transparent; color: var(--dx-text); max-width: none; max-height: none;
  width: min(560px, calc(100vw - 1.5rem)); font-family: var(--dx-font);
}
.dx-modal-lg{ width: min(820px, calc(100vw - 1.5rem)); }
.dx-modal::backdrop{ background: rgba(15,15,20,.55); backdrop-filter: blur(3px); }
.dx-modal[open] .dx-modal-panel{ animation: dx-modal-in .3s cubic-bezier(.16,1,.3,1); }
@keyframes dx-modal-in{ from{ opacity:0; transform: translateY(14px) scale(.98); } }
.dx-modal-panel{ display:flex; flex-direction:column; max-height: calc(100dvh - 2rem); background: var(--dx-surface); border-radius: calc(var(--dx-radius) + 6px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); overflow:hidden; }
.dx-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1rem 1.25rem; border-bottom:1px solid var(--dx-border); }
.dx-modal-head h2{ font-size: 1.15rem; margin:0; }
.dx-modal-head .dx-icon-btn{ width:36px; height:36px; }
.dx-modal-body{ padding: 1.25rem; overflow:auto; }
.dx-modal-foot{ display:flex; gap:.6rem; justify-content:flex-end; padding: 1rem 1.25rem; border-top:1px solid var(--dx-border); flex-wrap:wrap; }
.dx-drawer{ margin: 0 0 0 auto; height: 100dvh; width: min(420px, 100vw); }
.dx-drawer .dx-modal-panel{ height:100%; max-height:none; border-radius: 0; }
.dx-drawer[open] .dx-modal-panel{ animation: dx-drawer-in .35s cubic-bezier(.16,1,.3,1); }
.dx-drawer .dx-modal-body{ flex:1; }
@keyframes dx-drawer-in{ from{ transform: translateX(100%); } }

/* ---------- Toasts ---------- */
.dx-toasts{ position: fixed; z-index: 400; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display:flex; flex-direction:column; gap:.5rem; align-items:center; pointer-events:none; width: max-content; max-width: calc(100vw - 2rem); }
.dx-toast{
  pointer-events:auto; padding: .75rem 1.1rem; border-radius: 12px; background: #18181B; color:#fff; font: 600 .9rem/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); animation: dx-toast-in .35s cubic-bezier(.16,1,.3,1); border-left: 4px solid #22C55E;
}
.dx-toast-info{ border-left-color: #FF5C00; }
.dx-toast-bad{ border-left-color: #EF4444; }
.dx-toast.is-leaving{ opacity:0; transform: translateY(8px); transition: all .3s; }
@keyframes dx-toast-in{ from{ opacity:0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce){
  .dx *, .dx-modal *, .dx-toast{ animation: none !important; transition: none !important; }
}