/* S4-T03 components — DESIGN.md tokenized: no raw hex here, surfaces via
   --color-surface/--tint-*, hairlines via --color-border. Logical properties only.
   Touch targets >= 44px. */

[x-cloak] { display: none !important; }

/* ---------- shared control geometry ----------
   Every clickable/native form control takes its size from these tokens so a
   row of input + select + button sits on one baseline instead of 4 heights. */
:root {
  --control-h: 44px; /* DESIGN.md §accessibility touch minimum */
  --control-line: var(--leading-tight);
  --control-pad-block: var(--sp-1); /* single-line controls land exactly on --control-h */
  --control-pad-inline: var(--sp-4);
  --shadow-pop: 0 4px 16px rgb(23 21 18 / 22%);
}

/* button — default appearance is the quiet (secondary) look, so a bare
   class="btn" reads as a control and not as loose text */
.btn {
  min-block-size: var(--control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--control-pad-block) var(--control-pad-inline);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  line-height: var(--control-line);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion), border-color var(--motion), color var(--motion), transform var(--motion);
}
.btn:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}
.btn-secondary { background: var(--color-surface); }
.btn-danger {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-on-primary);
  font-weight: 700;
}
.btn-danger:hover {
  background: color-mix(in oklab, var(--color-error) 85%, var(--color-text));
  border-color: transparent;
  color: var(--color-on-primary);
}
.btn:disabled, .btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* native text controls — same box as .btn; check/radio keep native painting */
main :is(input, select, textarea) {
  font: inherit;
  line-height: var(--control-line);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
main :is(input, select) {
  min-block-size: var(--control-h);
  padding: var(--control-pad-block) var(--sp-3);
}
main select { padding-inline-end: var(--control-pad-inline); }
main textarea { padding: var(--sp-3); }
main :is(input[type="checkbox"], input[type="radio"]) {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  min-block-size: 0;
  padding: 0;
  accent-color: var(--color-primary);
  flex: 0 0 auto;
}
main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
          select, textarea):hover:not(:disabled) { border-color: var(--color-border-strong); }
main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* every form gets vertical rhythm; controls fill the column, buttons do not */
main form { display: grid; gap: var(--sp-4); }
main form :is(.form-row, .filter-bar, .field, .actions) { min-inline-size: 0; }
main form :is(button.btn, .btn) { justify-self: inline-start; }

/* badge — outlined squarish tag, not a pill */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}
.badge-ok { background: var(--tint-success); color: var(--color-success); border-color: transparent; }
.badge-warn { background: var(--tint-warning); color: var(--color-warning); border-color: transparent; }
.badge-error { background: var(--tint-error); color: var(--color-error); border-color: transparent; }
.badge-dot { inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: currentColor; }

/* card */
.card-title { font-size: var(--text-lg); font-weight: 700; }
.card-footer { border-block-start: 1px solid var(--color-border); padding-block-start: var(--sp-3); color: var(--color-text-secondary); font-size: var(--text-sm); }

/* alert */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--color-text-secondary);
  background: var(--color-surface-muted);
  margin-block-end: var(--sp-2);
}
.alert-success { background: var(--tint-success); color: var(--color-success); border-inline-start-color: var(--color-success); }
.alert-error { background: var(--tint-error); color: var(--color-error); border-inline-start-color: var(--color-error); }
.alert-warning { background: var(--tint-warning); color: var(--color-warning); border-inline-start-color: var(--color-warning); }
.alert-info { background: var(--tint-info); color: var(--color-primary); border-inline-start-color: var(--color-primary); }

/* empty state */
.empty-state {
  text-align: center;
  padding: var(--sp-12) var(--sp-4);
  color: var(--color-text-secondary);
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  border-block-start: 1px solid var(--color-border);
  border-block-end: 1px solid var(--color-border);
}
.empty-state::before { content: "✦"; color: var(--color-primary); }
.empty-state-heading { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); }

/* pagination */
.pagination { display: flex; justify-content: center; }
.page-links { display: flex; gap: var(--sp-1); list-style: none; padding: 0; margin: 0; }
.page-links a, .page-links strong, .page-links span {
  display: inline-flex;
  min-inline-size: 44px;
  min-block-size: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
}
.page-links a:hover { background: var(--color-surface-muted); }
.page-links strong {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 2px 0 color-mix(in oklab, var(--color-primary) 35%, transparent);
}
.page-disabled { color: var(--color-text-secondary); }

/* modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgb(23 21 18 / 55%);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  z-index: 50;
}
.modal-card {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  max-inline-size: min(92vw, 34rem);
  display: grid;
  gap: var(--sp-4);
}
.modal-close {
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-lg);
  min-inline-size: 44px;
  min-block-size: 44px;
  border: 0;
  cursor: pointer;
}

/* dropdown — trigger shares .btn geometry so the header row stays level */
.dropdown { position: relative; display: inline-flex; }
.dropdown-trigger {
  min-block-size: var(--control-h);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--control-pad-block) var(--control-pad-inline);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  line-height: var(--control-line);
  cursor: pointer;
  transition: border-color var(--motion), color var(--motion), background var(--motion);
}
.dropdown-trigger:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
.dropdown-label {
  max-inline-size: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-caret { font-size: 0.75em; color: var(--color-text-secondary); transition: transform var(--motion); }
.dropdown-trigger[aria-expanded="true"] .dropdown-caret { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--sp-1));
  min-inline-size: 13rem;
  max-inline-size: min(20rem, calc(100vw - var(--sp-8)));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  list-style: none;
  margin: 0;
  padding: var(--sp-1);
  z-index: 40;
  display: grid;
  gap: 1px;
}
.dropdown-start { inset-inline-start: 0; }
.dropdown-end { inset-inline-end: 0; }
.dropdown-menu :is(a, button) {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  line-height: var(--control-line);
  text-align: start;
  text-decoration: none;
  min-block-size: var(--control-h);
  cursor: pointer;
}
.dropdown-menu :is(a, button):hover,
.dropdown-menu :is(a, button):focus-visible { background: var(--color-surface-muted); color: var(--color-primary-text); }
.dropdown-sep { border-block-start: 1px solid var(--color-border); margin-block: var(--sp-1); }
.dropdown-danger { color: var(--color-error); }
.dropdown-danger:hover { background: var(--tint-error); color: var(--color-error); }

/* form field parity with components */
.field label { display: block; font-weight: 600; margin-block-end: var(--sp-1); }

/* breadcrumbs (S5-T04) */
.breadcrumbs { font-size: var(--text-sm); color: var(--color-text-secondary); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); min-inline-size: 0; }
.breadcrumbs li + li::before { content: "‹"; color: var(--color-text-secondary); }
.breadcrumbs a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-text); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-text); overflow-wrap: anywhere; }

/* related rail (S5-T05) */
.related-list { margin: 0; padding: 0; list-style: none; }

/* Skip link (S12-T04 a11y): visually hidden until keyboard focus. */
.skip-link {
  position: absolute;
  inset-inline-start: 0.5rem;
  inset-block-start: -3rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-md);
  transition: inset-block-start 0.15s ease;
}
.skip-link:focus-visible { inset-block-start: 0.5rem; }