/* Cascade component styling. Interaction states live here because they cannot
   be expressed inline; every value is a token. Radius is 0 unless stated; buttons carry --r-control. */

/* One focus treatment, everywhere. */
.cs-btn:focus-visible,
.cs-field:focus-visible,
.cs-select:focus-visible,
.cs-tab:focus-visible,
.cs-page-btn:focus-visible,
.cs-control:focus-visible,
.cs-control input:focus-visible + .cs-control__box,
.cs-card:focus-visible,
.cs-row:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------- Button ---------- */
.cs-btn {
  font: var(--font-ui);
  letter-spacing: var(--t-ui-ls);
  min-height: var(--target-min);
  padding: 14px var(--pad-control-x);
  border-radius: var(--r-control);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: background var(--motion), color var(--motion), border-color var(--motion);
}
/* Primary is the CTA, so it carries the coral accent — not the pillar colour. */
.cs-btn--primary { background: var(--c-accent); color: var(--c-ground); border: var(--b-rule-ink); }
.cs-btn--primary:hover { background: var(--c-accent-deep); color: var(--c-ground); }
.cs-btn--primary:active { background: var(--c-ink); color: var(--c-ground); }

/* Pillar-filled button: section-level action inside a pillar scope, not a CTA. */
.cs-btn--pillar { background: var(--pillar-fill); color: var(--pillar-on-fill); border: var(--b-rule-ink); }
.cs-btn--pillar:hover { background: var(--pillar-deep); color: var(--c-ground); }
.cs-btn--pillar:active { background: var(--c-ink); color: var(--c-ground); }

.cs-btn--secondary { background: transparent; color: var(--c-ink); border: var(--b-rule-ink); }
.cs-btn--secondary:hover { background: var(--c-ink); color: var(--c-ground); }
.cs-btn--secondary:active { background: var(--c-ink); color: var(--c-ground); }

.cs-btn--destructive { background: transparent; color: var(--c-danger); border: 2px solid var(--c-danger); }
.cs-btn--destructive:hover { background: var(--c-danger); color: var(--c-ground); }

/* Quiet buttons are underlines, not boxes. */
.cs-btn--quiet {
  background: transparent;
  color: var(--pillar-type);
  border: none;
  border-bottom: var(--b-rule-width) solid var(--pillar-fill);
  padding: var(--pad-control-y) 2px;
}
.cs-btn--quiet:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); }
.cs-btn--quiet-danger {
  background: transparent; color: var(--c-danger); border: none;
  border-bottom: 2px solid var(--c-danger); padding: var(--pad-control-y) 2px;
}
.cs-btn--quiet-danger:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); }

.cs-btn[disabled], .cs-btn--disabled {
  background: var(--c-disabled-bg);
  color: var(--c-disabled-ink);
  border-color: var(--c-disabled-ink);
  cursor: not-allowed;
}
.cs-btn--quiet[disabled] { background: transparent; border-bottom-color: var(--c-disabled-ink); }

/* ---------- Field ---------- */
.cs-field-wrap { display: block; }
.cs-field-label {
  font: var(--font-label); letter-spacing: var(--t-label-ls); text-transform: uppercase;
  color: var(--text-muted); display: block; margin-bottom: var(--s-2);
}
.cs-field, .cs-select {
  font: var(--font-ui);
  color: var(--c-ink);
  background: transparent;
  border: none;
  border-bottom: var(--b-rule-ink);
  border-radius: var(--r-none);
  padding: var(--pad-control-y) 2px;
  width: 100%;
  min-height: var(--target-min);
  transition: border-color var(--motion);
}
.cs-field::placeholder { color: var(--c-muted); }
.cs-field:hover, .cs-select:hover { border-bottom-color: var(--pillar-type); }
.cs-field:focus, .cs-select:focus { border-bottom-color: var(--pillar-type); }
.cs-select { cursor: pointer; appearance: none; padding-right: var(--s-5); }
.cs-select-wrap { position: relative; }
.cs-select-wrap::after {
  content: ''; position: absolute; right: 4px; top: 50%; margin-top: -3px;
  width: 8px; height: 8px; border-right: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink);
  transform: rotate(45deg); pointer-events: none;
}
.cs-field--error { border-bottom-color: var(--c-danger); }
.cs-field-error {
  font: var(--t-data-weight) 12px / 1.4 var(--font-sans);
  color: var(--c-danger); margin-top: var(--s-2);
}
.cs-field-help { font: var(--t-data-weight) 12px / 1.4 var(--font-sans); color: var(--text-muted); margin-top: var(--s-2); }
.cs-field[disabled], .cs-select[disabled] {
  color: var(--c-disabled-ink); background: var(--c-disabled-bg);
  border-bottom-color: var(--c-disabled-ink); padding-left: var(--s-2); cursor: not-allowed;
}
.cs-field-label--error { color: var(--c-danger); }
.cs-field-label--disabled { color: var(--c-disabled-ink); }

/* ---------- Checkbox / Radio / Toggle ---------- */
.cs-control {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--target-min); cursor: pointer;
  font: var(--font-ui); font-weight: 600; line-height: 1.2;
}
.cs-control input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-control__box {
  width: 20px; height: 20px; flex: none; border: var(--b-rule-ink); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--font-sans); color: var(--c-ink);
  transition: background var(--motion);
}
.cs-control--on .cs-control__box { background: var(--pillar-fill); color: var(--pillar-on-fill); }
.cs-control--radio .cs-control__box { border-radius: var(--r-round); }
.cs-control--radio .cs-control__dot { width: 10px; height: 10px; border-radius: var(--r-round); background: var(--pillar-fill); }
.cs-control--radio.cs-control--on .cs-control__box { background: transparent; }
.cs-control--disabled { color: var(--c-disabled-ink); cursor: not-allowed; }
.cs-control--disabled .cs-control__box { background: var(--c-disabled-bg); border-color: var(--c-disabled-ink); }
.cs-control__track {
  width: 48px; height: 26px; flex: none; border: var(--b-rule-ink); background: transparent;
  display: flex; align-items: center; padding: 2px; justify-content: flex-start;
  transition: background var(--motion);
}
.cs-control--on .cs-control__track { background: var(--pillar-fill); justify-content: flex-end; }
.cs-control__knob { width: 18px; height: 18px; background: var(--c-ink); }
.cs-control--disabled .cs-control__track { background: var(--c-disabled-bg); border-color: var(--c-disabled-ink); }
.cs-control--disabled .cs-control__knob { background: var(--c-disabled-ink); }

/* ---------- Chip ---------- */
.cs-chip {
  font: 600 11px/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--r-chip); padding: 9px var(--s-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.cs-chip--outline { padding: 8px var(--s-3); background: transparent; border: 1px solid currentColor; }

/* ---------- Card ---------- */
.cs-card {
  background: var(--c-panel);
  border: var(--b-hairline);
  border-top: var(--b-band-width) solid var(--pillar-fill);
  border-radius: var(--r-control);
  padding: var(--pad-card);
  display: block;
  text-align: left;
  width: 100%;
  transition: background var(--motion), border-color var(--motion);
}
.cs-card--interactive { cursor: pointer; }
.cs-card--interactive:hover {
  background: var(--c-ground);
  border-left-color: var(--c-ink); border-right-color: var(--c-ink); border-bottom-color: var(--c-ink);
}

/* ---------- Table ---------- */
.cs-table { font: var(--font-data); font-variant-numeric: tabular-nums; width: 100%; }
.cs-table__head {
  display: flex; border-top: var(--b-rule-width) solid var(--pillar-fill); padding: 9px 0;
  font: var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.cs-table__head .cs-sorted { color: var(--c-ink); }
.cs-row {
  display: flex; border-top: var(--b-hairline); padding: 10px 0;
  transition: background var(--motion);
}
.cs-row--interactive { cursor: pointer; }
.cs-row--interactive:hover { background: var(--c-ground); }
.cs-row--selected { background: var(--c-ground); border-left: 4px solid var(--pillar-fill); padding-left: var(--s-2); }
.cs-row--flagged { background: var(--c-flag-wash); box-shadow: inset 4px 0 0 var(--c-flag); padding-left: var(--s-2); }
.cs-row--flagged .cs-cell--muted { color: var(--c-ink-soft); }
.cs-row--total { border-top: var(--b-rule-ink); font-weight: 600; }
.cs-cell--muted { color: var(--text-muted); }
.cs-skeleton { height: 14px; background: var(--c-skeleton-1); }

/* ---------- Tabs / pagination / breadcrumb ---------- */
.cs-tabs { display: flex; border-bottom: var(--b-rule-ink); }
.cs-tab {
  font: var(--font-ui); padding: 14px 18px; min-height: var(--target-min);
  display: flex; align-items: center; color: var(--text-muted);
  background: transparent; border: none; cursor: pointer; transition: color var(--motion), background var(--motion);
}
.cs-tab:hover { color: var(--c-ink); background: var(--c-disabled-bg); }
.cs-tab--active { background: var(--pillar-fill); color: var(--pillar-on-fill); }
.cs-tab--active:hover { background: var(--pillar-fill); }
.cs-tab[disabled] { color: var(--c-disabled-ink); cursor: not-allowed; background: transparent; }

.cs-pagination {
  display: flex; align-items: center; gap: var(--s-3);
  font: var(--font-data); font-variant-numeric: tabular-nums; flex-wrap: wrap;
}
.cs-page-btn {
  min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(30, 33, 64, 0.3); background: transparent; color: var(--c-ink);
  font: var(--font-data); cursor: pointer; transition: background var(--motion), color var(--motion);
}
.cs-page-btn:hover { background: var(--c-ink); color: var(--c-ground); }
.cs-page-btn--current { background: var(--c-ink); color: var(--c-ground); border-color: var(--c-ink); }

.cs-breadcrumb {
  font: var(--t-data-weight) 12px / 1.4 var(--font-sans); letter-spacing: 0.04em;
  color: var(--text-muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.cs-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.cs-breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; }
.cs-breadcrumb__sep { color: var(--c-ink); }
.cs-breadcrumb__current { color: var(--c-ink); }

/* ---------- Modal / toast / notice ---------- */
.cs-modal-scrim {
  position: fixed; inset: 0; background: var(--c-overlay); z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--s-6);
}
.cs-modal {
  background: var(--c-ground); border: var(--b-rule-ink); box-shadow: var(--e-float);
  max-width: 420px; width: 100%;
}
.cs-modal__band { height: var(--b-band-width); background: var(--pillar-fill); }
.cs-modal__body { padding: var(--pad-card); }

.cs-toast {
  background: var(--c-ink); color: var(--c-ground); padding: var(--s-4) 18px;
  box-shadow: var(--e-float); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.cs-toast__dismiss {
  font: 600 10px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-accent); background: none; border: none; cursor: pointer;
}
.cs-toast__dismiss:hover { color: var(--c-ground); }

.cs-notice { background: var(--c-panel); padding: var(--s-4) 18px; border-left: var(--b-band-width) solid var(--c-muted); }
.cs-notice--warning { border-left-color: var(--c-warning); }
.cs-notice--success { border-left-color: var(--c-success); }
.cs-notice--danger { border-left-color: var(--c-danger); }
.cs-notice--block {
  background: transparent; border: 2px solid var(--c-danger); border-left-width: 2px;
  padding: 18px 20px; display: flex; gap: var(--s-3); align-items: flex-start;
}
.cs-notice__mark {
  font: 700 14px/1 var(--font-sans); color: var(--c-ground); background: var(--c-danger);
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex: none;
}
.cs-notice__title { font: var(--font-ui); line-height: 1.3; }
.cs-notice__body { font: var(--t-body-weight) 14px / 1.55 var(--font-serif); color: var(--c-ink-soft); margin-top: var(--s-1); }