/* GENERATED base layer — E2e-qa Maple Paws Grooming. Consumes tokens.css only; extend in your own sheet, never restyle. */
/* Every colour and face here is a var(); the fidelity gate rejects raw literals in app CSS. */

@layer base {
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
html img, html svg { max-width: 100%; height: auto; display: block; }
html h1, html h2, html h3, html h4 { font-family: var(--font-heading); line-height: var(--leading-tight); margin: 0 0 var(--space-2); color: var(--foreground); letter-spacing: -0.01em; }
html h1 { font-size: var(--text-3xl); font-weight: 700; }
html h2 { font-size: var(--text-2xl); font-weight: 600; }
html h3 { font-size: var(--text-xl); font-weight: 600; }
html h4 { font-size: var(--text-lg); font-weight: 600; }
html p { margin: 0 0 var(--space-3); max-width: var(--measure); }
html a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
html a:hover { color: var(--brand-10); }
html small, .muted { color: var(--muted-foreground); }
html code, html kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: var(--ring-width) solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Shell */
.app-shell { display: flex; flex-direction: column; min-height: 100dvh; }
/* A public page composed from marketing sections runs edge to edge; the shell's
   column is for app screens. Keyed on the hero the section kit stamps. */
.app-main:has([data-section="hero"]) { max-width: none; padding: 0; gap: 0; }
/* The shell always wears the brand: a rule in the primary along the top of the header. */
.app-header { background: var(--card); border-top: 3px solid var(--primary); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.app-header__inner { max-width: 72rem; margin: 0 auto; padding: var(--space-2) var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.app-brand { display: flex; align-items: center; gap: var(--space-2); color: var(--foreground); text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); min-height: 2.5rem; }
.app-brand img, .app-brand svg { height: 2rem; width: auto; }
.app-brand__sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--muted-foreground); }
.app-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-left: auto; }
.app-nav__link { padding: calc(var(--space) * 0.75) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--muted-foreground); text-decoration: none; font-weight: 500; }
.app-nav__link:hover { color: var(--foreground); background: var(--muted); }
.app-nav__link[aria-current="page"] { color: var(--brand-11); background: var(--brand-3); }
.actor-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: calc(var(--space) * 0.5) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--text-xs); color: var(--muted-foreground); background: var(--card); }
.actor-badge__dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--primary); }
.app-main { flex: 1; width: 100%; max-width: 72rem; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-10); display: flex; flex-direction: column; gap: var(--space-6); }
.app-footer { padding: var(--space-4); text-align: center; font-size: var(--text-xs); color: var(--muted-foreground); }

/* Page header */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-4); }
.page-header__eyebrow { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-11); font-weight: 600; margin: 0 0 var(--space-1); }
.page-header__title { margin: 0; }
.page-header__purpose { color: var(--muted-foreground); margin: var(--space-1) 0 0; max-width: var(--measure); }
.page-header__actions { margin-left: auto; display: flex; gap: var(--space-2); }

/* Cards */
.card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-4) var(--space-4) 0; }
.card__title { margin: 0; font-size: var(--text-lg); }
.card__hint { color: var(--muted-foreground); font-size: var(--text-sm); margin: 0; }
.card__count { font-size: var(--text-sm); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.card__body { padding: var(--space-4); }
.card > .table-scroll { border-top: 1px solid var(--border); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); }
.stat { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); border-left: 3px solid transparent; border-left-color: var(--primary); }
.stat__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); }
.stat__value { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tables and rows */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: left; font-weight: 600; color: var(--muted-foreground); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); background: var(--muted); }
.table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr:hover { background: var(--brand-2); }
.row-list { list-style: none; margin: 0; padding: 0; }
.entity-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.entity-row:hover { border-left-color: var(--primary); background: var(--brand-2); }
.entity-row__primary { font-weight: 600; }
.entity-row__meta { color: var(--muted-foreground); font-size: var(--text-sm); }

/* Forms */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3) var(--space-4); }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: var(--text-sm); font-weight: 600; }
.field__required { color: var(--destructive); margin-left: 0.2em; }
.field__hint { font-size: var(--text-xs); color: var(--muted-foreground); }
.field__error { font-size: var(--text-xs); color: var(--destructive); font-weight: 500; }
html input:not([type="checkbox"]):not([type="radio"]), html select, html textarea, .input {
  font: inherit; color: var(--foreground); background: var(--card);
  border: 1px solid var(--input); border-radius: var(--radius); padding: calc(var(--space) * 1.25) var(--space-2);
  min-height: 2.5rem; width: 100%; transition: border-color var(--transition), box-shadow var(--transition);
}
html input:not([type="checkbox"]):not([type="radio"]):focus, html select:focus, html textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 var(--ring-width) color-mix(in oklab, var(--ring) 25%, transparent); outline: none; }
html input[aria-invalid="true"], html select[aria-invalid="true"], html textarea[aria-invalid="true"] { border-color: var(--destructive); }
html input::placeholder, html textarea::placeholder { color: var(--neutral-9); }
html textarea { min-height: 6rem; resize: vertical; }
html input:disabled, html select:disabled, html textarea:disabled, .button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Buttons */
.button, button.button, a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  font: inherit; font-weight: 600; font-size: var(--text-sm); line-height: 1;
  padding: calc(var(--space) * 1.5) var(--space-3); min-height: 2.5rem;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); color: var(--foreground); cursor: pointer; text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.button:hover { background: var(--muted); }
.button--primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.button--primary:hover { background: var(--brand-10); border-color: var(--brand-10); }
.button--secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--secondary); }
.button--secondary:hover { background: var(--brand-4); }
.button--danger { background: var(--destructive); color: var(--destructive-foreground); border-color: var(--destructive); }
.button--danger:hover { background: var(--danger-10); }
.button--ghost { background: transparent; border-color: transparent; color: var(--primary); }
.button--ghost:hover { background: var(--brand-3); }
.button--sm { min-height: 2rem; padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
.button--link { background: none; border: 0; padding: 0; min-height: 0; color: var(--primary); text-decoration: underline; }
/* A bare <button> is the primary action; add .button + a modifier for anything quieter. */
html button:not(.button):not([class*="button--"]) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  font: inherit; font-weight: 600; font-size: var(--text-sm); line-height: 1;
  padding: calc(var(--space) * 1.5) var(--space-3); min-height: 2.5rem; cursor: pointer;
  border-radius: var(--radius); border: 1px solid var(--primary);
  background: var(--primary); color: var(--primary-foreground);
  transition: background var(--transition), border-color var(--transition);
}
html button:not(.button):not([class*="button--"]):hover { background: var(--brand-10); border-color: var(--brand-10); }

/* Badges, alerts, states */
.badge { display: inline-flex; align-items: center; padding: 0.15em 0.6em; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; background: var(--brand-3); color: var(--brand-11); white-space: nowrap; }
.badge--neutral { background: var(--muted); color: var(--muted-foreground); }
.badge--ok { background: var(--accent-3); color: var(--accent-11); }
.badge--danger { background: var(--danger-3); color: var(--danger-11); }
.alert, .form-alert, .notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--muted); border-left: 3px solid transparent; border-left-color: var(--primary); }
.alert--ok { border-left-color: var(--accent-9); }
.alert--error, .alert--deny, .form-alert { border-left-color: var(--destructive); background: var(--danger-2); color: var(--danger-12); }
.alert__title, .form-alert__title, .notice__title { font-weight: 600; margin: 0 0 var(--space-1); }
.alert__body, .form-alert__body, .notice__body { margin: 0; }
.empty-state, .empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--card); }
.empty-state__title { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--foreground); margin: 0 0 var(--space-1); }
.empty-state__body { margin: 0 auto var(--space-3); max-width: var(--measure); }
.access-denied { max-width: 32rem; margin: var(--space-10) auto; padding: var(--space-6); text-align: center; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.access-denied__title { margin: 0 0 var(--space-2); }
.skeleton { background: linear-gradient(90deg, var(--muted), var(--neutral-4), var(--muted)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); min-height: 1em; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Layout helpers */
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--space-4); }
.prose { max-width: var(--measure); }
.card, .stat, .alert, .empty-state, .access-denied, .table-scroll { border-radius: var(--radius); }

@media (max-width: 640px) {
  .app-header__inner { padding: var(--space-2) var(--space-3); }
  .app-main { padding: var(--space-4) var(--space-3) var(--space-8); gap: var(--space-4); }
  .app-nav { width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; }
  .page-header__actions { margin-left: 0; width: 100%; }
  html h1 { font-size: var(--text-2xl); }
  .form__grid { grid-template-columns: 1fr; }
}
}