/* ==========================================================================
   COMPONENT STYLES
   Real CSS for the reusable primitives (window.<Namespace>). Kept in the
   styles.css closure so consumers that use <Button>, <Input>, … get the look
   for free. Components render these classNames; dynamic bits stay inline.
   Flat, border-driven, pill-heavy — the reference language.
   ========================================================================== */

/* ---------------------------------- Button ------------------------------- */
.ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:var(--control-h); padding-inline:1.5rem; box-sizing:border-box;
  font-family:var(--font-sans); font-size:var(--text-base); font-weight:var(--weight-medium);
  line-height:1; letter-spacing:-.01em;
  border-radius:var(--radius-full); border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap; user-select:none;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.ds-btn:active{ transform: translateY(1px); }
.ds-btn.is-disabled, .ds-btn[disabled]{ opacity:.45; pointer-events:none; }
.ds-btn.is-full{ width:100%; }
.ds-btn--sm{ height:var(--control-h-sm); padding-inline:1rem; font-size:var(--text-sm); }
.ds-btn--lg{ height:var(--control-h-lg); padding-inline:2rem; font-size:var(--text-lg); }
.ds-btn--primary{ background:var(--primary); color:var(--primary-foreground); }
.ds-btn--primary:hover{ background:oklch(29% .004 286.2); }
.ds-btn--accent{ background:var(--accent); color:var(--accent-foreground); }
.ds-btn--accent:hover{ background:var(--c-accent-deep); }
.ds-btn--secondary{ background:var(--secondary); color:var(--secondary-foreground); border-color:var(--border-strong); }
.ds-btn--secondary:hover{ background:var(--muted); }
.ds-btn--ghost{ background:transparent; color:var(--foreground); }
.ds-btn--ghost:hover{ background:var(--muted); }
.ds-btn--danger{ background:var(--destructive); color:var(--destructive-foreground); }
.ds-btn--danger:hover{ filter:brightness(.94); }
.ds-btn__icon{ display:inline-flex; align-items:center; justify-content:center; width:1.15em; height:1.15em; flex:none; }
.ds-btn__icon svg{ width:100%; height:100%; display:block; }

/* --------------------------- Inputs / Textarea --------------------------- */
.ds-input, .ds-textarea, .ds-select{
  display:block; width:100%; box-sizing:border-box;
  height:var(--control-h); padding:0 1rem;
  font-family:var(--font-sans); font-size:var(--text-base); color:var(--foreground);
  background:var(--card); border:1px solid var(--input); border-radius:var(--radius);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  appearance:none; -webkit-appearance:none;
}
.ds-input::placeholder, .ds-textarea::placeholder{ color:var(--text-faint); }
.ds-textarea{ height:auto; min-height:7rem; padding:.75rem 1rem; line-height:var(--leading-base); resize:vertical; }
.ds-input:focus, .ds-textarea:focus, .ds-select:focus{ outline:none; border-color:var(--ring); box-shadow:var(--shadow-focus); }
.ds-input[aria-invalid="true"], .ds-textarea[aria-invalid="true"], .ds-select[aria-invalid="true"]{ border-color:var(--destructive); }
.ds-input:disabled, .ds-textarea:disabled, .ds-select:disabled{ opacity:.55; background:var(--muted); cursor:not-allowed; }

/* --------------------------------- Select -------------------------------- */
.ds-select-wrap{ position:relative; display:block; }
.ds-select{ padding-right:2.75rem; cursor:pointer; }
.ds-select-wrap__chevron{ position:absolute; right:1rem; top:50%; transform:translateY(-50%); width:1rem; height:1rem; pointer-events:none; color:var(--text-muted); }

/* --------------------------------- Field --------------------------------- */
.ds-field{ display:flex; flex-direction:column; gap:.5rem; }
.ds-field__label{ font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--foreground); }
.ds-field__req{ color:var(--destructive); margin-left:.15rem; }
.ds-field__hint{ font-size:var(--text-sm); color:var(--text-muted); }
.ds-field__error{ font-size:var(--text-sm); color:var(--destructive); }

/* -------------------------------- Checkbox ------------------------------- */
.ds-checkbox{ display:inline-flex; align-items:flex-start; gap:.625rem; cursor:pointer;
  font-size:var(--text-sm); color:var(--text-body); line-height:var(--leading-sm); position:relative; }
.ds-checkbox input{ position:absolute; opacity:0; width:1.25rem; height:1.25rem; margin:0; cursor:pointer; }
.ds-checkbox__box{ flex:none; width:1.25rem; height:1.25rem; border:1px solid var(--input); border-radius:var(--radius-xs);
  background:var(--card); display:grid; place-items:center; margin-top:.05rem;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.ds-checkbox__box svg{ width:.8rem; height:.8rem; opacity:0; transform:scale(.6); color:var(--accent-foreground);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.ds-checkbox input:checked + .ds-checkbox__box{ background:var(--accent); border-color:var(--accent); }
.ds-checkbox input:checked + .ds-checkbox__box svg{ opacity:1; transform:scale(1); }
.ds-checkbox input:focus-visible + .ds-checkbox__box{ box-shadow:var(--shadow-focus); border-color:var(--ring); }
.ds-checkbox input:disabled ~ *{ opacity:.5; }

/* --------------------------------- Card ---------------------------------- */
.ds-card{ background:var(--card); color:var(--card-foreground); border-radius:var(--radius-lg); padding:var(--space-6); }
.ds-card--outline{ background:transparent; border:1px solid var(--border); }
.ds-card--muted{ background:var(--muted); }
.ds-card--accent{ background:var(--surface-accent-soft); }
.ds-card--xl{ border-radius:var(--radius-xl); }
.ds-card--pad-lg{ padding:var(--space-8); }
.ds-card--pad-none{ padding:0; }

/* ---------------------------------- Tag ---------------------------------- */
.ds-tag{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; font-size:var(--text-sm); line-height:1;
  border-radius:var(--radius-full); border:1px solid var(--border); color:var(--foreground); background:transparent; white-space:nowrap; }
.ds-tag--solid{ background:var(--muted); border-color:transparent; }
.ds-tag--accent{ background:var(--surface-accent-soft); border-color:transparent; }

/* --------------------------------- Badge --------------------------------- */
.ds-badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; font-size:var(--text-xs);
  font-weight:var(--weight-medium); line-height:1.5; border-radius:var(--radius-full); white-space:nowrap; }
.ds-badge--neutral{ background:var(--muted); color:var(--text-body); }
.ds-badge--accent{ background:var(--accent); color:var(--accent-foreground); }
.ds-badge--outline{ background:transparent; border:1px solid var(--border); color:var(--text-body); }
.ds-badge--success{ background:color-mix(in oklch, var(--c-success) 20%, transparent); color:oklch(42% .12 150); }
.ds-badge__dot{ width:.4rem; height:.4rem; border-radius:50%; background:currentColor; flex:none; }

/* -------------------------------- StatList ------------------------------- */
.ds-statlist{ display:flex; flex-direction:column; }
.ds-statlist dt, .ds-statlist dd{ margin:0; }
.ds-statlist__row{ display:flex; flex-direction:column; gap:.75rem; padding:1.25rem 0; border-top:1px solid var(--border); }
.ds-statlist__row:first-child{ border-top:0; padding-top:0; }
.ds-statlist__label{ font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-muted); }
.ds-statlist__value{ font-size:var(--text-xl); font-weight:var(--weight-medium); line-height:1.25; letter-spacing:var(--tracking-tight); }

/* -------------------------------- Accordion ------------------------------ */
.ds-accordion{ display:flex; flex-direction:column; }
.ds-accordion__item{ border-top:1px solid var(--border); }
.ds-accordion__item:last-child{ border-bottom:1px solid var(--border); }
.ds-accordion__trigger{ appearance:none; background:none; border:0; box-sizing:border-box; width:100%; text-align:left;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; cursor:pointer;
  padding:1.5rem 0; font-family:var(--font-sans); font-size:var(--text-lg); font-weight:var(--weight-medium);
  color:var(--foreground); letter-spacing:-.01em; }
.ds-accordion__trigger:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.ds-accordion__icon{ flex:none; width:1.5rem; height:1.5rem; margin-top:.1rem; color:var(--text-muted);
  transition: transform var(--duration) var(--ease-out), color var(--duration) var(--ease-out); }
.ds-accordion__item.is-open .ds-accordion__icon{ transform:rotate(45deg); color:var(--foreground); }
.ds-accordion__panel{ overflow:hidden; }
.ds-accordion__panel-inner{ padding:0 0 1.5rem; max-width:var(--container-prose);
  color:var(--text-muted); font-size:var(--text-base); line-height:var(--leading-lg); }