/* runut Design System component styles, extracted verbatim from _ds_bundle.js
   (Badge, Chip, Toast, Button, IconButton, Input). Markup uses the same .rn-* classes
   the React components emit. */

/* --- Badge --- */
.rn-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-weight: var(--weight-extrabold);
  font-size: var(--text-caption); line-height: 1; letter-spacing: 0.01em;
  padding: 5px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.rn-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rn-badge--neutral { background: var(--surface-sunken); color: var(--text-secondary); }
.rn-badge--brand   { background: var(--brand-soft); color: var(--text-brand); }
.rn-badge--accent  { background: var(--accent-soft); color: var(--text-accent); }
.rn-badge--success { background: var(--status-success-surface); color: var(--success-700); }
.rn-badge--danger  { background: var(--status-danger-surface); color: var(--danger-700); }
.rn-badge--warning { background: var(--status-warning-surface); color: var(--warning-600); }
.rn-badge--info    { background: var(--status-info-surface); color: var(--info-600); }
.rn-badge--solid-accent { background: var(--accent); color: var(--text-on-accent); }
.rn-badge--solid-brand  { background: var(--brand); color: var(--text-on-brand); }
  

/* --- Chip --- */
.rn-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-body-sm); line-height: 1;
  padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-default); background: var(--surface-card);
  color: var(--text-primary); cursor: pointer; white-space: nowrap;
  transition: all var(--dur-base) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.rn-chip:hover { border-color: var(--brand); background: var(--brand-soft); }
.rn-chip--selected { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.rn-chip--selected:hover { background: var(--brand-strong); }
.rn-chip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rn-chip__x { display: inline-flex; opacity: 0.6; }
.rn-chip__x:hover { opacity: 1; }
.rn-chip--static { cursor: default; }
.rn-chip--static:hover { border-color: var(--border-default); background: var(--surface-card); }
  

/* --- Toast --- */
.rn-toast {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: var(--surface-inverse); color: var(--text-inverse);
  padding: 13px 18px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg); font-family: var(--font-sans);
  max-width: 380px;
}
.rn-toast__icon {
  width: 24px; height: 24px; flex:0 0 auto; border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
}
.rn-toast__icon--success { background: var(--status-success); color:#fff; }
.rn-toast__icon--accent  { background: var(--accent); color: var(--plum-900); }
.rn-toast__icon--danger  { background: var(--status-danger); color:#fff; }
.rn-toast__text { font-weight: var(--weight-bold); font-size: var(--text-body-sm); }
.rn-toast__action { margin-left: 6px; background:transparent; border:none; cursor:pointer;
  color: var(--accent); font-family: var(--font-sans); font-weight: var(--weight-extrabold); font-size: var(--text-body-sm); }
.rn-toast__action:hover { text-decoration: underline; }
  

/* --- Button --- */
.rn-btn {
  --_bg: var(--accent);
  --_fg: var(--text-on-accent);
  --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.01em;
  border: 1.5px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              filter var(--dur-base) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.rn-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rn-btn:active { transform: scale(0.97); }
.rn-btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.rn-btn--full { width: 100%; }

/* sizes */
.rn-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.rn-btn--md { height: 46px; padding: 0 22px; font-size: 16px; }
.rn-btn--lg { height: 56px; padding: 0 30px; font-size: 18px; }

/* shapes */
.rn-btn--pill { border-radius: var(--radius-pill); }
.rn-btn--rounded { border-radius: var(--radius-md); }

/* variants */
.rn-btn--primary { --_bg: var(--accent); --_fg: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.rn-btn--primary:hover { --_bg: var(--accent-strong); transform: translateY(-1px); }
.rn-btn--secondary { --_bg: var(--brand); --_fg: var(--text-on-brand); box-shadow: var(--shadow-brand); }
.rn-btn--secondary:hover { --_bg: var(--brand-strong); transform: translateY(-1px); }
.rn-btn--outline { --_bg: transparent; --_fg: var(--text-brand); --_bd: var(--border-default); }
.rn-btn--outline:hover { --_bd: var(--brand); --_bg: var(--brand-soft); }
.rn-btn--ghost { --_bg: transparent; --_fg: var(--text-brand); }
.rn-btn--ghost:hover { --_bg: var(--brand-soft); }
.rn-btn--danger { --_bg: var(--status-danger); --_fg: #fff; }
.rn-btn--danger:hover { filter: brightness(0.93); transform: translateY(-1px); }
.rn-btn__icon { display: inline-flex; flex: 0 0 auto; }
  

/* --- IconButton --- */
.rn-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid transparent; cursor: pointer; flex: 0 0 auto;
  color: var(--text-secondary); background: transparent;
  border-radius: var(--radius-pill);
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.rn-iconbtn:active { transform: scale(0.92); }
.rn-iconbtn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rn-iconbtn[disabled] { opacity: 0.4; pointer-events: none; }
.rn-iconbtn--sm { width: 36px; height: 36px; }
.rn-iconbtn--md { width: 44px; height: 44px; }
.rn-iconbtn--lg { width: 52px; height: 52px; }
.rn-iconbtn--plain:hover { background: var(--surface-sunken); color: var(--text-primary); }
.rn-iconbtn--soft { background: var(--brand-soft); color: var(--text-brand); }
.rn-iconbtn--soft:hover { background: var(--plum-100); }
.rn-iconbtn--accent { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.rn-iconbtn--accent:hover { background: var(--accent-strong); }
.rn-iconbtn--brand { background: var(--brand); color: var(--text-on-brand); }
.rn-iconbtn--brand:hover { background: var(--brand-strong); }
  

/* --- Input --- */
.rn-field { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.rn-field__label {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-label); color: var(--text-primary);
}
.rn-field__req { color: var(--status-danger); margin-left: 2px; }
.rn-field__wrap {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--surface-card);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4); height: 50px;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.rn-field__wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.rn-field__wrap--error { border-color: var(--status-danger); }
.rn-field__wrap--error:focus-within { box-shadow: 0 0 0 3px var(--status-danger-surface); }
.rn-field__wrap--disabled { opacity: 0.55; background: var(--surface-sunken); pointer-events: none; }
.rn-field__icon { display: inline-flex; color: var(--text-muted); flex: 0 0 auto; }
.rn-field__input {
  flex: 1 1 auto; border: none; background: transparent; outline: none;
  font-family: var(--font-sans); font-size: var(--text-body);
  font-weight: var(--weight-medium); color: var(--text-primary);
  min-width: 0; height: 100%;
}
.rn-field__input::placeholder { color: var(--text-muted); font-weight: var(--weight-regular); }
.rn-field__hint { font-size: var(--text-caption); color: var(--text-muted); }
.rn-field__hint--error { color: var(--status-danger); font-weight: var(--weight-semibold); }