/* ==========================================================================
   ZeedSites admin panel — Zeed Agency product surface
   --------------------------------------------------------------------------
   Built on the ZeedSites design system. Tokens are IMPORTED, never copied.
   If a value is not available as a token, it does not belong here.

   Tokens arrive via /admin/static/brand/tokens.css, a static file shipped
   with the app (public/brand/tokens.css). Nothing is fetched at runtime.

   Product surface rules applied throughout (Brand Guide 7.3):
     - warm canvas ground, white cards on top
     - hairlines, not borders (0.5px, never 1px)
     - Pine rectangle primary action, never orange
     - Georgia 400 for titles at 24px and above, Lato 700 below
     - numbers never animate, rows wash instead of lifting
   ========================================================================== */

@import url("/admin/static/brand/tokens.css");

/* --------------------------------------------------------------------------
   1. App shell
   -------------------------------------------------------------------------- */

html,
body {
  height: 100%;
}

body {
  background: var(--surface-app);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--type-app-body);
  line-height: var(--leading-app);
}

.app-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* The one page scroller. Never nest another. */
.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw-app);
  margin: 0 auto;
  padding: var(--space-13) var(--gutter-app) var(--space-19);
  align-self: center;
}

@media (max-width: 720px) {
  .app-main {
    padding: var(--space-9) var(--space-7) var(--space-16);
  }
}

/* --- Top chrome: 56px warm bar, per the Admin page anatomy --------------- */

.app-topbar {
  height: var(--h-topnav);
  flex: none;
  background: var(--paper);
  border-bottom: var(--border-hair);
  position: sticky;
  top: 0;
  z-index: 40;
}

.app-topbar-inner {
  height: 100%;
  max-width: var(--maxw-app);
  margin: 0 auto;
  padding: 0 var(--gutter-app);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-11);
}

@media (max-width: 720px) {
  .app-topbar-inner {
    padding: 0 var(--space-7);
  }
}

.app-brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  flex: none;
}

.app-brand:hover {
  text-decoration: none;
}

/* The real lockup asset, never redrawn and never in a coloured tile. */
.app-brand img {
  height: 22px;
  width: auto;
}

.app-brand-divider {
  width: 1px;
  height: 18px;
  background: var(--line-soft);
}

.app-brand-product {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--type-app-label);
  letter-spacing: -0.2px;
  color: var(--text-heading);
}

.app-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  height: var(--h-control);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--type-app-body);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.nav-link:hover {
  background: var(--gray-100);
  color: var(--text-heading);
  text-decoration: none;
}

.nav-link-active,
.nav-link-active:hover {
  background: var(--seed-mint);
  color: var(--seed-pine);
  font-weight: var(--weight-bold);
}

.app-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

/* --- Icon buttons and the user menu -------------------------------------- */

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-control);
  height: var(--h-control);
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.icon-btn:hover {
  background: var(--gray-100);
  color: var(--text-heading);
}

.icon-btn:active {
  transform: translateY(var(--press));
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--critical-line);
  color: var(--white);
  font-size: var(--type-app-micro);
  font-weight: var(--weight-bold);
  line-height: 15px;
  text-align: center;
}

.user-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--h-control);
  padding: 0 var(--space-3) 0 var(--space-1);
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--type-app-body);
  cursor: pointer;
  max-width: 200px;
  transition: background var(--dur-fast) var(--ease-out);
}

.user-btn:hover {
  background: var(--gray-100);
  color: var(--text-heading);
}

.user-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-circle);
  flex: none;
  object-fit: cover;
}

.avatar-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--seed-mint);
  color: var(--seed-pine);
  font-weight: var(--weight-bold);
  font-size: var(--type-app-small);
}

.menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 232px;
  background: var(--surface-card);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  z-index: 50;
  overflow: hidden;
}

.menu-head {
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-hair-faint);
}

.menu-email {
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  font-size: var(--type-app-body);
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-item {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-6);
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--type-app-body);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.menu-item:hover {
  background: var(--gray-100);
  color: var(--text-heading);
  text-decoration: none;
}

.menu-item-danger {
  color: var(--critical-text);
}

.menu-item-danger:hover {
  background: var(--critical-bg);
  color: var(--critical-text);
}

.menu-divider {
  border-top: var(--border-hair-faint);
}

/* --- Mobile nav ---------------------------------------------------------- */

.mobile-nav {
  background: var(--paper);
  border-bottom: var(--border-hair);
  padding: var(--space-3) var(--space-7) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-nav .nav-link {
  height: auto;
  padding: var(--space-4) var(--space-5);
}

/* --------------------------------------------------------------------------
   2. Page header block
   -------------------------------------------------------------------------- */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-11);
  margin-bottom: var(--space-13);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  padding-top: var(--space-1);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-app-small);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--text-heading);
  text-decoration: underline;
}

/* Georgia 400 in product, never marketing's 700. */
.page-title {
  font-family: var(--font-display);
  font-weight: var(--weight-title);
  font-size: var(--type-app-title);
  letter-spacing: var(--track-title);
  line-height: var(--leading-heading);
  color: var(--text-primary);
  margin: 0;
}

.page-title-xl {
  font-size: var(--type-app-display);
}

.page-description {
  margin: var(--space-3) 0 0;
  font-size: var(--type-app-label);
  color: var(--text-secondary);
  max-width: var(--maxw-prose);
}

/* Lato 700 below the Georgia floor. */
.section-title {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--type-app-section);
  letter-spacing: -0.005em;
  color: var(--text-heading);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--type-app-micro);
  letter-spacing: var(--track-eyebrow-app);
  text-transform: uppercase;
  color: var(--text-muted);
}

.section {
  margin-bottom: var(--space-16);
}

/* --------------------------------------------------------------------------
   3. Buttons — Pine rectangle primary, one per view. Orange never appears.
   -------------------------------------------------------------------------- */

.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--h-control);
  padding: 0 var(--space-6);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--type-app-body);
  font-weight: var(--weight-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.btn-primary:active,
.btn-secondary:active,
.btn-tertiary:active,
.btn-danger:active {
  transform: translateY(var(--press));
}

.btn-primary {
  background: var(--action-app-bg);
  color: var(--action-app-text);
  border: 0;
}

.btn-primary:hover {
  background: var(--action-app-bg-hover);
  color: var(--action-app-text);
  text-decoration: none;
}

.btn-secondary {
  background: var(--surface-card);
  color: var(--action-secondary-text);
  border: 1px solid var(--border-strong);
}

.btn-secondary:hover {
  border-color: var(--action-secondary-border);
  color: var(--action-secondary-text);
  text-decoration: none;
}

.btn-tertiary {
  background: transparent;
  color: var(--gray-700);
  border: 0;
  padding: 0 var(--space-2);
}

.btn-tertiary:hover {
  color: var(--text-heading);
  text-decoration: underline;
}

.btn-danger {
  background: var(--surface-card);
  color: var(--critical-text);
  border: 1px solid var(--critical-line);
}

.btn-danger:hover {
  background: var(--critical-bg);
  color: var(--critical-text);
  text-decoration: none;
}

.btn-sm {
  height: 26px;
  padding: 0 var(--space-4);
  font-size: var(--type-app-small);
}

.btn-block {
  width: 100%;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------------------------------------
   4. Cards — 0.5px hairline, 8px radius, no shadow
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface-card);
  border: var(--border-hair);
  border-radius: var(--radius-md);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  padding: var(--space-6) var(--space-10);
  border-bottom: var(--border-hair-faint);
}

.card-body {
  padding: var(--pad-card);
}

.card-footer {
  padding: var(--space-6) var(--space-10);
  border-top: var(--border-hair-faint);
}

/* Card that is itself a link. Product lift is half of marketing's. */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.card-link:hover {
  transform: translateY(var(--lift-hover-app));
  border-color: var(--seed-green);
  text-decoration: none;
}

/* --- Stat tiles. Numbers never animate in product. ----------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
}

.stat-card {
  background: var(--surface-card);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-9);
}

.stat-value {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--type-app-metric);
  line-height: 1.1;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  margin-top: var(--space-2);
  font-size: var(--type-app-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-eyebrow-app);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. Tables — the hairline ledger
   -------------------------------------------------------------------------- */

.ledger-wrap {
  background: var(--surface-card);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-app-body);
}

.ledger thead th {
  background: var(--paper);
  padding: var(--space-4) var(--pad-cell);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 12.5px;
  color: var(--gray-700);
  text-align: left;
  white-space: nowrap;
  border-bottom: var(--border-hair);
}

.ledger tbody td {
  padding: var(--space-5) var(--pad-cell);
  color: var(--text-secondary);
  border-top: var(--border-hair-faint);
  vertical-align: middle;
}

.ledger tbody tr:first-child td {
  border-top: 0;
}

/* Rows wash, they never lift. */
.ledger tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}

.ledger tbody tr:hover {
  background: var(--white);
}

.ledger .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}

.ledger .primary-cell {
  color: var(--text-heading);
  font-weight: var(--weight-bold);
}

.ledger a {
  color: var(--text-heading);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.ledger a:hover {
  text-decoration: underline;
}

/* Grouping band, full width, members indent 14px. */
.ledger .group-band td {
  background: var(--surface-band);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  font-size: var(--type-app-small);
  letter-spacing: var(--track-eyebrow-app);
  text-transform: uppercase;
}

.ledger .group-member td:first-child {
  padding-left: calc(var(--pad-cell) + 14px);
}

.ledger tbody tr.is-selected {
  background: var(--seed-mint);
}

/* Selection column sits at 40px. */
.ledger .check-col {
  width: 40px;
  text-align: center;
  padding-right: 0;
}

/* Bulk bar. This is the one dark region on the page. */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-9);
  background: var(--surface-dark);
  border-radius: var(--radius-md);
  color: var(--text-heading-on-dark);
  font-size: var(--type-app-body);
  font-weight: var(--weight-bold);
}

.bulk-bar-divider {
  width: 1px;
  height: 16px;
  background: var(--line-on-dark);
}

.bulk-action {
  height: 26px;
  padding: 0 var(--space-5);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-heading-on-dark);
  font-family: var(--font-body);
  font-size: var(--type-app-small);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.bulk-action:hover {
  background: rgba(255, 255, 255, 0.12);
}

.bulk-action:active {
  transform: translateY(var(--press));
}

.bulk-cancel {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: var(--type-app-small);
  cursor: pointer;
}

.bulk-cancel:hover {
  color: var(--text-heading-on-dark);
  text-decoration: underline;
}

/* --- Modal: confirms, destructive actions and blocking progress only ----- */

.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--scrim);
  align-items: center;
  justify-content: center;
}

.modal {
  width: var(--w-slideover);
  max-width: calc(100vw - var(--space-13));
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: var(--space-13);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.modal-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--type-app-label);
  color: var(--text-heading);
}

.progress-track {
  width: 100%;
  height: 6px;
  background: var(--gray-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--seed-green);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-out);
}

/* --------------------------------------------------------------------------
   6. Status pills — four families, never a fifth colour
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--type-app-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-eyebrow-app);
  text-transform: uppercase;
  white-space: nowrap;
}

.pill-good {
  background: var(--good-bg);
  color: var(--good-text);
  box-shadow: inset 0 0 0 1px var(--good-line);
}

.pill-warn {
  background: var(--warn-bg);
  color: var(--warn-text);
  box-shadow: inset 0 0 0 1px var(--warn-line);
}

.pill-critical {
  background: var(--critical-bg);
  color: var(--critical-text);
  box-shadow: inset 0 0 0 1px var(--critical-line);
}

.pill-neutral {
  background: var(--neutral-bg);
  color: var(--neutral-text);
  box-shadow: inset 0 0 0 1px var(--neutral-line);
}

/* Roles map onto the same four families. No fifth colour is introduced. */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-xs);
  font-size: var(--type-app-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-eyebrow-app);
  text-transform: uppercase;
}

.role-admin {
  background: var(--seed-mint);
  color: var(--seed-pine);
}

.role-developer {
  background: var(--seed-teal-pale);
  color: var(--seed-navy);
}

.role-manager {
  background: var(--good-bg);
  color: var(--good-text);
}

.role-content {
  background: var(--neutral-bg);
  color: var(--neutral-text);
}

/* --------------------------------------------------------------------------
   7. Forms — label always visible, 32px controls, green border + mint ring
   -------------------------------------------------------------------------- */

.field {
  display: block;
  margin-bottom: var(--space-9);
}

.field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-app-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-eyebrow-app);
  text-transform: uppercase;
  color: var(--gray-500);
}

.input,
.select,
.textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  width: 100%;
  height: var(--h-control);
  padding: 0 var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--type-app-body);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

textarea,
.textarea {
  height: auto;
  min-height: 96px;
  padding: var(--space-4) var(--space-5);
  line-height: var(--leading-app);
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--gray-500);
}

.input:focus,
.select:focus,
.textarea:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input[type="checkbox"],
input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: var(--seed-green);
  cursor: pointer;
}

.field-hint {
  margin-top: var(--space-2);
  font-size: var(--type-app-small);
  color: var(--text-muted);
}

/* Error names the next step, so it needs room to say one. */
.field-error {
  margin-top: var(--space-2);
  font-size: var(--type-app-small);
  font-weight: var(--weight-bold);
  color: var(--critical-text);
}

.input-mono {
  font-family: var(--font-mono);
  font-size: var(--type-app-small);
}

/* --------------------------------------------------------------------------
   8. Messages — banner, inline, toast
   -------------------------------------------------------------------------- */

.banner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-7);
  border-radius: var(--radius-sm);
  font-size: var(--type-app-body);
  margin-bottom: var(--space-5);
}

.banner svg {
  flex: none;
}

.banner-dismiss {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--type-app-label);
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  padding: var(--space-1);
}

.banner-dismiss:hover {
  opacity: 1;
}

.flash-success {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-7);
  border-radius: var(--radius-sm);
  font-size: var(--type-app-body);
  margin-bottom: var(--space-5);
  background: var(--good-bg);
  color: var(--good-text);
  box-shadow: inset 0 0 0 1px var(--good-line);
}

.flash-error {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-7);
  border-radius: var(--radius-sm);
  font-size: var(--type-app-body);
  margin-bottom: var(--space-5);
  background: var(--critical-bg);
  color: var(--critical-text);
  box-shadow: inset 0 0 0 1px var(--critical-line);
}

/* width:100% matters: these are flex items in a column shell, and auto side
   margins would otherwise shrink them to their content. */
.flash-wrap {
  width: 100%;
  max-width: var(--maxw-app);
  margin: 0 auto;
  padding: var(--space-7) var(--gutter-app) 0;
}

/* Notification rows. Unread takes a mint tint, never an orange one. */
.notif-row {
  padding: var(--space-5) var(--space-6);
  border-top: var(--border-hair-faint);
  transition: background var(--dur-fast) var(--ease-out);
}

.notif-row:first-child {
  border-top: 0;
}

.notif-row:hover {
  background: var(--gray-100);
}

.notif-row.is-unread {
  background: var(--seed-green-pale);
}

.notif-title {
  margin: 0;
  font-size: var(--type-app-body);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}

.notif-body {
  margin: var(--space-1) 0 0;
  font-size: var(--type-app-small);
  color: var(--text-muted);
}

/* Sign-in divider */
.login-divider {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-11) 0;
  font-size: var(--type-app-small);
  color: var(--text-muted);
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  border-top: var(--border-hair-faint);
}

/* --------------------------------------------------------------------------
   9. Empty and loading states
   -------------------------------------------------------------------------- */

/* Name what belongs here, then offer the action. */
.empty-state {
  padding: var(--space-16) var(--space-9);
  text-align: center;
}

.empty-state-title {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--type-app-label);
  color: var(--text-heading);
  margin: 0 0 var(--space-3);
}

.empty-state-body {
  font-size: var(--type-app-body);
  color: var(--text-muted);
  margin: 0 auto var(--space-9);
  max-width: 420px;
}

/* Skeletons only, never spinners. */
.skeleton {
  background: var(--gray-100);
  border-radius: var(--radius-xs);
  height: 10px;
}

/* --------------------------------------------------------------------------
   10. Utility odds and ends used by the views
   -------------------------------------------------------------------------- */

.text-heading {
  color: var(--text-heading);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-subtle {
  color: var(--text-muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--type-app-small);
}

.code-chip {
  font-family: var(--font-mono);
  font-size: var(--type-app-small);
  background: var(--gray-100);
  border-radius: var(--radius-xs);
  padding: 1px var(--space-2);
  color: var(--gray-700);
}

.timestamp {
  font-size: var(--type-app-small);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.copy-btn,
.preset-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--type-app-small);
  font-weight: var(--weight-bold);
  color: var(--action-secondary-text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.copy-btn:hover,
.preset-btn:hover {
  border-color: var(--seed-green);
}

.copy-btn:active,
.preset-btn:active {
  transform: translateY(var(--press));
}

.preset-active,
.preset-active:hover {
  background: var(--seed-mint);
  border-color: var(--seed-green);
  color: var(--seed-pine);
}

/* Confirmation of a completed copy, in the Good family. */
.copy-btn.copied,
.copy-btn-sm.copied,
[data-value].copied {
  background: var(--good-bg);
  border-color: var(--good-line);
  color: var(--good-text);
}

.copy-btn-sm {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--type-app-micro);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.copy-btn-sm:hover {
  border-color: var(--seed-green);
  color: var(--seed-pine);
}

/* --------------------------------------------------------------------------
   11. Brand alignment layer for the remaining Tailwind utilities
   --------------------------------------------------------------------------
   The views still carry Tailwind utility classes. Tailwind ships a cool,
   blue-grey palette and a 1px border habit, both of which are off brand.
   Rather than fork the tokens into a Tailwind config, which the brand guide
   forbids, these rules re-point the utilities actually in use at the real
   tokens. Scoping to [data-surface="app"] beats Tailwind on specificity
   without needing !important.
   -------------------------------------------------------------------------- */

[data-surface="app"] .text-gray-900,
[data-surface="app"] .text-slate-900,
[data-surface="app"] .text-gray-800,
[data-surface="app"] .text-slate-800 {
  color: var(--text-heading);
}

[data-surface="app"] .text-gray-700,
[data-surface="app"] .text-slate-700 {
  color: var(--gray-700);
}

[data-surface="app"] .text-gray-600,
[data-surface="app"] .text-slate-600 {
  color: var(--text-secondary);
}

[data-surface="app"] .text-gray-500,
[data-surface="app"] .text-slate-500,
[data-surface="app"] .text-gray-400,
[data-surface="app"] .text-slate-400,
[data-surface="app"] .text-gray-300 {
  color: var(--text-muted);
}

[data-surface="app"] .bg-white {
  background-color: var(--surface-card);
}

[data-surface="app"] .bg-gray-50,
[data-surface="app"] .bg-slate-50 {
  background-color: var(--paper);
}

[data-surface="app"] .bg-gray-100,
[data-surface="app"] .bg-slate-100,
[data-surface="app"] .bg-gray-200 {
  background-color: var(--gray-100);
}

[data-surface="app"] .hover\:bg-gray-50:hover,
[data-surface="app"] .hover\:bg-slate-50:hover,
[data-surface="app"] .hover\:bg-gray-100:hover {
  background-color: var(--gray-100);
}

/* Hairlines, not borders. */
[data-surface="app"] .border,
[data-surface="app"] .border-t,
[data-surface="app"] .border-b,
[data-surface="app"] .border-l,
[data-surface="app"] .border-r {
  border-color: var(--line-soft);
}

[data-surface="app"] .border-gray-100,
[data-surface="app"] .border-gray-200,
[data-surface="app"] .border-slate-200,
[data-surface="app"] .divide-gray-100 > * + *,
[data-surface="app"] .divide-gray-200 > * + * {
  border-color: var(--line-hair);
}

[data-surface="app"] .border-gray-300,
[data-surface="app"] .border-slate-300 {
  border-color: var(--border-strong);
}

/* Radii sit one step tighter in product than Tailwind's defaults. */
[data-surface="app"] .rounded-xl,
[data-surface="app"] .rounded-2xl {
  border-radius: var(--radius-md);
}

[data-surface="app"] .rounded-lg {
  border-radius: var(--radius-sm);
}

/* Product cards are flat. Shadows are reserved for panels and modals. */
[data-surface="app"] .shadow-sm,
[data-surface="app"] .shadow,
[data-surface="app"] .shadow-md {
  box-shadow: none;
}

[data-surface="app"] .shadow-lg {
  box-shadow: var(--shadow-lift);
}

/* Status colours resolve to the four families, never a fifth. */
[data-surface="app"] .text-green-600,
[data-surface="app"] .text-green-700,
[data-surface="app"] .text-green-800 {
  color: var(--good-text);
}

[data-surface="app"] .bg-green-50,
[data-surface="app"] .bg-green-100 {
  background-color: var(--good-bg);
}

[data-surface="app"] .border-green-200 {
  border-color: var(--good-line);
}

[data-surface="app"] .text-red-500,
[data-surface="app"] .text-red-600,
[data-surface="app"] .text-red-700,
[data-surface="app"] .text-red-800 {
  color: var(--critical-text);
}

[data-surface="app"] .bg-red-50,
[data-surface="app"] .bg-red-100 {
  background-color: var(--critical-bg);
}

[data-surface="app"] .border-red-200 {
  border-color: var(--critical-line);
}

[data-surface="app"] .text-yellow-600,
[data-surface="app"] .text-yellow-700,
[data-surface="app"] .text-yellow-800,
[data-surface="app"] .text-amber-600,
[data-surface="app"] .text-amber-700,
[data-surface="app"] .text-amber-800,
[data-surface="app"] .text-orange-600,
[data-surface="app"] .text-orange-700,
[data-surface="app"] .text-orange-800 {
  color: var(--warn-text);
}

[data-surface="app"] .bg-yellow-50,
[data-surface="app"] .bg-yellow-100,
[data-surface="app"] .bg-yellow-200,
[data-surface="app"] .bg-amber-50,
[data-surface="app"] .bg-amber-100,
[data-surface="app"] .bg-orange-50,
[data-surface="app"] .bg-orange-100,
[data-surface="app"] .bg-orange-200 {
  background-color: var(--warn-bg);
}

[data-surface="app"] .border-yellow-200,
[data-surface="app"] .border-amber-200,
[data-surface="app"] .border-orange-200 {
  border-color: var(--warn-line);
}

/* Emerald and purple slipped in as accents; both resolve to brand families. */
[data-surface="app"] .text-emerald-600,
[data-surface="app"] .text-emerald-700 {
  color: var(--good-text);
}

[data-surface="app"] .bg-emerald-50,
[data-surface="app"] .bg-emerald-100 {
  background-color: var(--good-bg);
}

[data-surface="app"] .text-purple-700,
[data-surface="app"] .text-indigo-600 {
  color: var(--seed-navy);
}

[data-surface="app"] .bg-purple-100,
[data-surface="app"] .bg-indigo-50 {
  background-color: var(--seed-teal-pale);
}

/* Dots used as status indicators take the family line colours. */
[data-surface="app"] .bg-green-400,
[data-surface="app"] .bg-green-500,
[data-surface="app"] .bg-emerald-500 {
  background-color: var(--good-line);
}

[data-surface="app"] .bg-red-400,
[data-surface="app"] .bg-red-500 {
  background-color: var(--critical-line);
}

[data-surface="app"] .bg-yellow-400,
[data-surface="app"] .bg-amber-400,
[data-surface="app"] .bg-orange-400 {
  background-color: var(--warn-line);
}

[data-surface="app"] .bg-gray-400,
[data-surface="app"] .bg-slate-400,
[data-surface="app"] .bg-blue-500 {
  background-color: var(--neutral-line);
}

[data-surface="app"] .text-blue-600,
[data-surface="app"] .text-blue-700,
[data-surface="app"] .text-indigo-700 {
  color: var(--seed-navy);
}

[data-surface="app"] .bg-blue-50,
[data-surface="app"] .bg-blue-100,
[data-surface="app"] .bg-indigo-100 {
  background-color: var(--seed-teal-pale);
}

/* Orange is precious and never a product button. Any orange fill left in a
   view resolves to the Pine action instead. */
[data-surface="app"] .bg-orange-500,
[data-surface="app"] .bg-orange-600,
[data-surface="app"] .hover\:bg-orange-600:hover,
[data-surface="app"] .bg-brand,
[data-surface="app"] .bg-brand-dark {
  background-color: var(--action-app-bg);
  color: var(--action-app-text);
}

[data-surface="app"] .text-brand,
[data-surface="app"] .text-brand-dark,
[data-surface="app"] .hover\:text-brand-dark:hover {
  color: var(--seed-pine);
}

[data-surface="app"] .border-brand,
[data-surface="app"] .hover\:border-brand:hover {
  border-color: var(--seed-green);
}

[data-surface="app"] .ring-orange-400,
[data-surface="app"] .focus\:ring-orange-400:focus {
  --tw-ring-color: var(--seed-mint);
}

/* Dark utility grounds resolve to the one permitted dark ground. */
[data-surface="app"] .bg-slate-700,
[data-surface="app"] .bg-slate-800,
[data-surface="app"] .bg-slate-850,
[data-surface="app"] .bg-gray-800,
[data-surface="app"] .bg-gray-900 {
  background-color: var(--surface-dark);
}

/* Georgia has a hard 24px floor. Tailwind's text sizes below it are Lato. */
[data-surface="app"] .font-serif {
  font-family: var(--font-body);
}

[data-surface="app"] .font-mono {
  font-family: var(--font-mono);
}