/* Buttons, cards, badges, inputs, tables, states. Tokens only — no raw values. */

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--touch); padding: 0 var(--s-5);
  border: 0; border-radius: var(--r-md); cursor: pointer;
  font-size: var(--fs-body); font-weight: var(--fw-bold); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover { background: var(--ink-hover); color: var(--on-ink); }
.btn--secondary { background: var(--surface); color: var(--text); border: var(--border); }
.btn--secondary:hover { border-color: var(--ink); }
.btn--tertiary { background: var(--tint); color: var(--text); font-weight: var(--fw-medium); }
.btn--ghost { background: none; color: var(--text-muted); }
.btn--danger { background: none; color: var(--error); border: 1px solid var(--danger-line); }
.btn--pill { border-radius: var(--r-full); }
.btn--lg { min-height: 54px; padding: 0 var(--s-6); font-size: var(--fs-body-lg); border-radius: 14px; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--disabled); color: var(--text-soft); cursor: default; }
.btn:focus-visible { box-shadow: var(--focus-ring); }

/* ------------------------------------------------------------------ chips */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--touch); padding: 0 var(--s-4);
  border: var(--border); border-radius: var(--r-full); background: var(--surface);
  color: var(--text-muted); font-size: var(--fs-body); cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--text); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: var(--fw-bold);
}
.chip__remove { display: inline-flex; opacity: .6; }

/* ----------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: var(--r-full);
  font-size: 0.7188rem; font-weight: var(--fw-bold); white-space: nowrap;
  color: var(--text-muted); background: var(--tint);
}
.badge--featured, .badge--new, .badge--verified, .badge--planned { color: var(--accent); background: var(--accent-tint); }
.badge--published, .badge--completed { color: var(--success); background: var(--success-tint); }
.badge--pending, .badge--progress { color: var(--warning); background: var(--warning-tint); }
.badge--sold { color: var(--info); background: var(--info-tint); }
.badge--rejected, .badge--archived { color: var(--error); background: var(--error-tint); }

/* ------------------------------------------------------------------ panel */
.panel { background: var(--surface); border: var(--border); border-radius: var(--r-lg); padding: var(--s-5); }
.panel--flush { padding: 0; overflow: hidden; }
.panel__title {
  font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-block-end: var(--s-4);
}

/* -------------------------------------------------------------- tab strip */
/* A row of real links on a hairline rule. The active underline sits ON the rule,
   not under it, so the two read as one edge. */
.tab-strip {
  display: flex; gap: var(--s-5);
  overflow-x: auto; scrollbar-width: none;
  margin-block: var(--s-6) var(--s-6);
  border-block-end: var(--border);
}
.tab-strip::-webkit-scrollbar { display: none; }
.tab-strip__tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; min-height: var(--touch);
  padding-block: var(--s-2); margin-block-end: -1px;
  border-block-end: 2px solid transparent;
  color: var(--text-muted); font-size: var(--fs-body-lg); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tab-strip__tab:hover { color: var(--text); }
.tab-strip__tab.is-active { color: var(--accent); font-weight: var(--fw-bold); border-block-end-color: var(--accent); }
.tab-strip__tab:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* ------------------------------------------------------------- focus card */
/* The dark panel that answers "what is happening right now" in one sentence. */
.focus-card {
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--ink); color: var(--on-ink);
}
.focus-card__eyebrow { margin: 0; font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.focus-card__title { margin: var(--s-4) 0 0; font-size: var(--fs-h3); color: var(--on-ink); }
.focus-card__body {
  margin: var(--s-2) 0 0; max-inline-size: 44ch;
  color: var(--on-ink-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg);
}
.focus-card__action {
  display: inline-flex; align-items: center; min-height: var(--touch);
  margin-block-start: var(--s-5); padding-inline: var(--s-5);
  border-radius: var(--r-md); background: var(--on-ink-line);
  color: var(--on-ink); font-size: var(--fs-body); font-weight: var(--fw-bold);
  transition: background var(--dur-fast) var(--ease);
}
.focus-card__action:hover { background: var(--on-ink-fill); color: var(--on-ink); }
.focus-card__action:focus-visible { box-shadow: 0 0 0 3px var(--on-ink-line); }

/* -------------------------------------------------------------- stat grid */
/* Plain figures with a hairline under each. Deliberately not a boxed strip. */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s-5); }
.stat-grid__cell {
  display: grid; gap: var(--s-1);
  padding-block: var(--s-4);
  border-block-end: var(--border);
}
.stat-grid__figure { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.2; }
.stat-grid__label { font-size: var(--fs-meta); color: var(--text-muted); }

/* --------------------------------------------------------------- chip row */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.chip--quiet {
  min-height: auto; padding: 7px var(--s-4);
  background: var(--tint); color: var(--text-muted); cursor: default;
  font-size: var(--fs-body);
}
.chip--quiet:hover { border-color: var(--line); color: var(--text-muted); }

/* ------------------------------------------------------------- brand card */
.brand-grid { display: grid; gap: var(--s-4); }
.brand-grid--3, .brand-grid--4 { grid-template-columns: 1fr; }

.brand-card { position: relative; height: 100%; }
/* Sits above the card link rather than inside it — a button may not nest in an anchor. */
.brand-card__save {
  position: absolute; inset-block-start: var(--s-3); inset-inline-start: var(--s-3); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 34px; block-size: 34px;
  border: 0; border-radius: var(--r-full);
  background: var(--surface); color: var(--text-soft); cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: color var(--dur-fast) var(--ease);
}
.brand-card__save:hover { color: var(--ink); }
.brand-card__save[aria-pressed="true"] { color: var(--accent); }
.brand-card__save[aria-pressed="true"] svg { fill: currentColor; }
.brand-card__save:focus-visible { box-shadow: var(--focus-ring); }
.brand-card__link {
  display: flex; flex-direction: column; height: 100%; color: inherit;
  background: var(--surface); border: var(--border); border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.brand-card__link:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); color: inherit; }
.brand-card__well {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; background: var(--tint); border-block-end: var(--border); overflow: hidden;
}
.brand-card__wordmark { max-height: 62%; width: auto; object-fit: contain; }
.brand-card__type { font-size: var(--fs-h2); font-weight: var(--fw-medium); color: var(--ink); letter-spacing: -.02em; }
.brand-card__well .badge { position: absolute; inset-block-start: var(--s-3); inset-inline-end: var(--s-3); }
.brand-card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--s-4) var(--s-4) var(--s-5); }
.brand-card__row { display: flex; align-items: baseline; gap: var(--s-3); }
.brand-card__name { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.brand-card__price { margin-inline-start: auto; font-size: var(--fs-meta); color: var(--text-soft); }
.brand-card__meta { font-size: var(--fs-meta); color: var(--text-muted); }
.brand-card__sep { color: var(--line); margin-inline: 6px; }

/* ------------------------------------------------------------------ forms */
.field { display: block; margin-block-end: var(--s-4); }
.field__label { display: block; font-size: var(--fs-meta); font-weight: var(--fw-bold); margin-block-end: var(--s-2); }
.field__input, .field__textarea {
  width: 100%; min-height: 52px; padding: 0 var(--s-4);
  border: var(--border); border-radius: var(--r-md); background: var(--surface);
  font-size: var(--fs-body-lg);
}
.field__textarea { min-height: 120px; padding: var(--s-3) var(--s-4); line-height: 1.6; resize: vertical; }
.field__input:focus, .field__textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
.field--error .field__input { border-color: var(--error-line); }
.field__error { display: block; margin-block-start: 7px; font-size: var(--fs-meta); color: var(--error); }
.field__hint { display: block; margin-block-start: 7px; font-size: var(--fs-meta); color: var(--text-soft); }

.search-bar {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--surface); border: var(--border); border-radius: 20px; padding: var(--s-2);
  box-shadow: 0 1px 2px rgba(11, 59, 46, .04), 0 14px 40px -18px rgba(11, 59, 46, .14);
}
.search-bar__input { flex: 1; min-width: 0; min-height: var(--touch); border: 0; background: none; padding-inline: var(--s-4); font-size: var(--fs-body-lg); }
.search-bar__input:focus { outline: none; }

.switch {
  width: 42px; height: 25px; flex-shrink: 0; padding: 3px; border: 0; cursor: pointer;
  border-radius: var(--r-full); background: var(--line);
  display: flex; align-items: center; justify-content: flex-start;
  transition: background var(--dur-fast) var(--ease);
}
.switch[aria-checked="true"] { background: var(--accent); justify-content: flex-end; }
.switch__knob { width: 19px; height: 19px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-card); }

/* ----------------------------------------------------------------- tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: start; font-size: var(--fs-label); font-weight: var(--fw-bold);
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft);
  padding: var(--s-3) var(--s-5); border-block-end: var(--border);
}
.data-table td { padding: var(--s-4) var(--s-5); border-block-end: var(--border); font-size: var(--fs-body-lg); }
.data-table tr:last-child td { border-block-end: 0; }

/* Below 760px every data table becomes stacked cards. Each cell needs
   data-label="…" in the template for the label column to appear. */
@media (max-width: 759px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr {
    background: var(--surface); border: var(--border); border-radius: var(--r-lg);
    padding: var(--s-4); margin-block-end: var(--s-3);
  }
  .data-table td { display: flex; gap: var(--s-3); padding: 6px 0; border: 0; }
  .data-table td::before {
    content: attr(data-label); flex: 0 0 42%;
    font-size: var(--fs-meta); color: var(--text-muted);
  }
}

/* ----------------------------------------------------------------- states */
.empty-state {
  border: 1px dashed var(--line); border-radius: var(--r-xl);
  padding: var(--s-10) var(--s-5); text-align: center;
}
.empty-state__title { font-size: var(--fs-h3); margin-block-end: var(--s-2); }
.empty-state__body { color: var(--text-muted); margin-block-end: var(--s-5); }

/* The tinted tile above an empty-state title. */
.empty-state__icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--icon-tile); block-size: var(--icon-tile);
  margin-block-end: var(--s-4);
  border-radius: var(--r-lg); background: var(--tint); color: var(--accent);
}

.skeleton-card { background: var(--surface); border: var(--border); border-radius: var(--r-lg); padding: var(--s-4); }
.skeleton {
  display: block; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--tint), var(--bg), var(--tint));
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}
.skeleton--well { aspect-ratio: 16 / 10; margin-block-end: var(--s-4); border-radius: var(--r-md); }
.skeleton--line { height: 14px; margin-block-end: var(--s-2); }
.skeleton--w70 { width: 70%; } .skeleton--w40 { width: 40%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ------------------------------------------------------------- pagination */
.pagination { padding-block: var(--s-7); }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--touch); min-height: var(--touch); padding: 0 var(--s-3);
  border-radius: var(--r-md); color: var(--text-muted); font-size: var(--fs-body);
}
.pagination .page-numbers.current { background: var(--ink); color: var(--on-ink); font-weight: var(--fw-bold); }

/* --------------------------------------------------------------- toast */
.toast {
  position: fixed; inset-block-end: var(--s-5); inset-inline-start: 50%;
  transform: translateX(-50%); z-index: var(--z-toast);
  background: var(--ink); color: var(--on-ink);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-full);
  font-size: var(--fs-body); font-weight: var(--fw-bold);
  animation: rise var(--dur-base) var(--ease) both;
}

@media (min-width: 620px)  { .brand-grid--3, .brand-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .brand-grid--3 { grid-template-columns: repeat(3, 1fr); } .brand-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .brand-grid--4 { grid-template-columns: repeat(4, 1fr); } }