@charset "UTF-8";
/* ═══════════════════════════════════════════════════════
   FRIENDSHAPING DESIGN SYSTEM
   "Industry" structure × "Warm Hearth" colours.
   Source: Input/Design (FriendShaping Site prototype).

   · Barlow Condensed (headings, uppercase) over Barlow (body)
   · Square corners, 1px hairline borders, transparent cards
   · Sage green accent, terracotta second accent, warm cream ground
   · Deep green (--color-accent-900) for dark fields and the footer

   Rules: every colour, font and spacing value comes from the
   tokens below. No inline styles, no <style> blocks. A page's
   .razor.css is only for something no shared class can express.
   Live reference: /dev/design-preview
═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════════════ */
:root {
  /* Ground and ink */
  --color-bg: #FAF7F0;
  --color-surface: #F0E9DC;
  --color-text: #2E3830;
  --color-text-soft: color-mix(in srgb, #2E3830 80%, transparent);
  --color-text-muted: color-mix(in srgb, #2E3830 72%, transparent);
  --color-divider: color-mix(in srgb, #2E3830 16%, transparent);
  --color-divider-soft: color-mix(in srgb, #2E3830 8%, transparent);
  /* Accent — sage green. 500 is the base; use 700+ for text. */
  --color-accent: #4A7561;
  --color-accent-100: #EDF3EF;
  --color-accent-200: #D5E3DB;
  --color-accent-300: #A9C6B6;
  --color-accent-400: #6A9E84;
  --color-accent-500: #4A7561;
  --color-accent-600: #3F6857;
  --color-accent-700: #385E4F;
  --color-accent-800: #325248;
  --color-accent-900: #325248;
  /* Accent 2 — terracotta. Kickers, numbers, "Buddy available" tags. */
  --color-accent-2: #C8724A;
  --color-accent-2-100: #FBEEE6;
  --color-accent-2-200: #F3D6C4;
  --color-accent-2-300: #E8B394;
  --color-accent-2-400: #D98E69;
  --color-accent-2-500: #C8724A;
  --color-accent-2-600: #B4613C;
  --color-accent-2-700: #A05436;
  --color-accent-2-800: #7E4029;
  --color-accent-2-900: #5C2E1E;
  /* Neutrals */
  --color-neutral-100: #F5F0E6;
  --color-neutral-200: #F0E9DC;
  --color-neutral-300: #E8D5BC;
  --color-neutral-400: #B7B7BA;
  --color-neutral-500: #98989B;
  --color-neutral-600: #7A7A7D;
  --color-neutral-700: #5D5D60;
  --color-neutral-800: #3F4A42;
  --color-neutral-900: #2B2B2D;
  /* Feedback */
  --color-success: #3F7A52;
  --color-success-bg: color-mix(in srgb, #3F7A52 8%, transparent);
  --color-success-border: color-mix(in srgb, #3F7A52 32%, transparent);
  --color-warning: #8A6508;
  --color-warning-bg: color-mix(in srgb, #B5860D 9%, transparent);
  --color-warning-border: color-mix(in srgb, #B5860D 34%, transparent);
  --color-danger: #B03A2E;
  --color-danger-bg: color-mix(in srgb, #B03A2E 7%, transparent);
  --color-danger-border: color-mix(in srgb, #B03A2E 30%, transparent);
  --color-info: var(--color-accent-700);
  --color-info-bg: color-mix(in srgb, #4A7561 7%, transparent);
  --color-info-border: color-mix(in srgb, #4A7561 30%, transparent);
  /* Type */
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 17px;
  --text-lg: 18px;
  --text-xl: 19px;
  --heading-display: clamp(50px, 7vw, 96px); /* home / about hero      */
  --heading-1: clamp(46px, 6vw, 80px); /* page h1                */
  --heading-1-sm: clamp(40px, 5.4vw, 72px); /* dashboards, detail h1  */
  --heading-2-lg: clamp(34px, 4.4vw, 56px); /* dark-field / CTA h2    */
  --heading-2: clamp(30px, 3.6vw, 44px); /* section h2             */
  --heading-3: 22px;
  --heading-4: 20px;
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;
  --space-26: 104px;
  /* Layout */
  --page-max: 1200px;
  --gutter: clamp(20px, 5vw, 72px);
  --header-h: 65px;
  /* Shape and depth — square corners throughout */
  --radius: 0;
  --shadow-sm: 0 1px 4px rgba(46, 56, 48, 0.07);
  --shadow-md: 0 4px 16px rgba(46, 56, 48, 0.10);
  --shadow-lg: 0 8px 32px rgba(46, 56, 48, 0.12);
  /* Component hooks (overridden in dark fields) */
  --kicker-color: var(--color-accent-2-700);
  --link-color: var(--color-accent-700);
  --link-hover: var(--color-accent-900);
}

/* Dark field: deep green ground, paper-coloured type.
   Components inside re-colour themselves through the tokens. */
.on-dark,
.band,
.split-panel-aside,
.site-footer {
  --color-text: var(--color-bg);
  --color-text-soft: color-mix(in srgb, #FAF7F0 88%, transparent);
  --color-text-muted: color-mix(in srgb, #FAF7F0 78%, transparent);
  --color-divider: color-mix(in srgb, #FAF7F0 25%, transparent);
  --color-divider-soft: color-mix(in srgb, #FAF7F0 14%, transparent);
  --kicker-color: var(--color-accent-2-300);
  --link-color: var(--color-bg);
  --link-hover: var(--color-accent-200);
  background: var(--color-accent-900);
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════
   BASE — element defaults. A new page that uses plain
   h1/h2/p/a/input/table already follows the design.
═══════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  color: inherit;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--heading-1);
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-5);
}

h2 {
  font-size: var(--heading-2);
  line-height: 1.06;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-6);
}

h3 {
  font-size: var(--heading-3);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}

h4 {
  font-size: var(--heading-4);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}

h5 {
  font-size: var(--text-base);
  line-height: 1.2;
  letter-spacing: 0.04em;
}

h6 {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

/* FocusOnNavigate focuses the h1 on every page load; headings are never interactive. */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
  outline: none;
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--link-color);
  text-underline-offset: 3px;
  transition: color 0.15s;
}

a:hover {
  color: var(--link-hover);
}

strong, b {
  font-weight: 600;
}

img, svg, video {
  max-width: 100%;
}

img {
  display: block;
}

figure {
  margin: 0;
}

hr {
  height: 1px;
  border: 0;
  margin: var(--space-8) 0;
  background: var(--color-divider);
}

ul, ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25em;
}

li + li {
  margin-top: var(--space-1);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 5px;
  background: var(--color-surface);
}

button {
  font: inherit;
  color: inherit;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

[disabled], .is-disabled {
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════
   LAYOUT — page container, sections, grids
═══════════════════════════════════════════════════════ */
/* Page container: max 1200px with the fluid gutter.
   Every page body sits inside one (or several, around full-width bands). */
.page-content {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-26);
}

.page-content--narrow {
  max-width: calc(800px + 2 * var(--gutter));
}

/* Vertical rhythm between the blocks of a page */
.section {
  padding-bottom: var(--space-24);
}

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

.section--compact {
  padding-bottom: var(--space-12);
}

.section--spaced {
  padding-top: var(--space-24);
}

/* Heading with an action on the right ("Latest news  ·  View all →") */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.section-head > h2 {
  margin: 0;
}

.section--ruled {
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-divider);
}

/* Label column + body column (About, Release notes, mission blocks) */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) clamp(32px, 6vw, 96px);
}

.split-label {
  flex: 1 1 200px;
  padding-top: var(--space-2);
}

.split-body {
  flex: 3 1 480px;
  min-width: 0;
  max-width: 720px;
}

/* Card grids */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-8);
}

.grid--sm {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--space-6);
}

.grid--lg {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, (100% - 96px) / 4)), 1fr));
}

/* A block that follows a grid gets breathing room */
.grid + *,
.cells + * {
  margin-top: var(--space-8);
}

/* Joined cells in one hairline frame (steps, stats, key figures) */
.cells {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}

.cells > * {
  flex: 1 1 220px;
  margin: 0;
  background: var(--color-bg);
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cells h3,
.cells p {
  margin: 0;
}

.cells p {
  font-size: 15px;
}

.cells-head,
.cells-foot {
  flex-basis: 100% !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
}

.cells > .cells-head,
.cells > .cells-foot {
  flex-direction: row;
  padding: var(--space-3) var(--space-6);
}

.cells > .cells-foot {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Filter bar between two hairlines (chips left, fields right) */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-10);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.toolbar-fields {
  display: grid;
  flex: 1 1 420px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-4);
  max-width: 640px;
}

/* Horizontal groups */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster--between {
  justify-content: space-between;
}

.cluster--end {
  align-items: flex-end;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.actions--ruled {
  justify-content: space-between;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-12);
}

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY — kickers, display sizes, prose
═══════════════════════════════════════════════════════ */
/* Small uppercase label above a heading */
.kicker {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kicker-color);
}

/* Kicker with the hairline rule underneath — the standard section opener */
.kicker--ruled {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-divider);
}

/* A ruled kicker already draws the top line of a following list */
.kicker--ruled + .dl,
.kicker--ruled + .rows,
.kicker--ruled + .numbered,
.kicker--ruled + .list-rows,
.admin-page-header + .admin-list {
  margin-top: calc(-1 * var(--space-8));
  border-top: 0;
}

.admin-page-header + .admin-list,
.admin-page-header + .toolbar {
  margin-top: calc(-1 * var(--space-10));
  border-top: 0;
}

.kicker--plain {
  color: inherit;
}

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

.display {
  font-size: var(--heading-display);
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-8) -0.04em;
}

.title-lg {
  font-size: var(--heading-2-lg);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.title-md {
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.08;
}

/* Accent-coloured second line of a big heading */
.accent-line {
  color: var(--color-accent);
  font-style: normal;
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: 36em;
  margin-bottom: var(--space-8);
}

.lead--xl {
  font-size: var(--text-xl);
}

/* Long-form text */
.prose {
  font-size: var(--text-md);
  line-height: 1.65;
  max-width: 720px;
}

.prose p,
.prose ul,
.prose ol {
  margin-bottom: 18px;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose strong {
  color: var(--color-accent-700);
}

.prose a {
  font-weight: 600;
}

/* Documentation-style sections separated by hairlines */
.prose--sections > section {
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-divider);
}

.prose--sections > section > h2 {
  font-size: 32px;
}

/* Pull quote */
.quote {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent-2);
}

.quote p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-style: italic;
}

.quote cite {
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Big condensed numerals */
.num {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 44px;
  line-height: 1;
  color: var(--color-accent-2);
}

.num--xl {
  font-size: clamp(56px, 6vw, 80px);
  color: inherit;
}

.num--accent {
  color: var(--color-accent);
}

.num--sm {
  font-size: 13px;
  font-family: var(--font-body);
  letter-spacing: 0.08em;
  color: var(--color-accent-2-700);
}

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

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

.text-accent {
  color: var(--color-accent-700);
}

.text-success {
  color: var(--color-success);
  font-weight: 600;
}

.text-danger {
  color: var(--color-danger);
  font-weight: 600;
}

.text-warning {
  color: var(--color-warning);
  font-weight: 600;
}

.text-small {
  font-size: var(--text-sm);
}

.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   ICONS — Lucide via <Icon Name="…" />, stroke 1.5
═══════════════════════════════════════════════════════ */
.icon {
  display: inline-block;
  flex: none;
  vertical-align: -0.15em;
}

.icon--accent {
  color: var(--color-accent);
}

.icon-spin {
  animation: fs-spin 0.9s linear infinite;
}

@keyframes fs-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ═══════════════════════════════════════════════════════
   BUTTONS — .btn + variant. Square, condensed type.
   Variants also work on their own (class="btn-primary").
═══════════════════════════════════════════════════════ */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-inverse, .btn-light, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 22px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover {
  color: var(--color-text);
}

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.btn-primary:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: var(--color-bg);
}

.btn-primary:active {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  color: var(--color-text);
}

.btn-secondary:active {
  background: color-mix(in srgb, var(--color-text) 14%, transparent);
}

.btn-ghost {
  border-color: transparent;
  color: var(--color-accent-700);
  padding-inline: var(--space-2);
}

.btn-ghost:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent-800);
}

.btn-ghost:active {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* Outline button on a dark field */
.btn-inverse {
  color: var(--color-bg);
  border-color: color-mix(in srgb, var(--color-bg) 50%, transparent);
}

.btn-inverse:hover {
  background: color-mix(in srgb, var(--color-bg) 12%, transparent);
  color: var(--color-bg);
}

/* Solid paper button on a dark field */
.btn-light {
  background: var(--color-bg);
  border-color: var(--color-bg);
  color: var(--color-accent-900);
}

.btn-light:hover {
  background: var(--color-accent-100);
  color: var(--color-accent-900);
}

.btn-danger {
  color: var(--color-danger);
  border-color: var(--color-danger-border);
}

.btn-danger:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 14px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 17px;
}

.btn-block {
  width: 100%;
}

.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled,
.btn-inverse:disabled, .btn-light:disabled, .btn-danger:disabled, .btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Segmented control: one row of joined options (dashboard switcher, view toggles) */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-divider);
}

.seg-opt {
  padding: 9px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.seg-opt + .seg-opt {
  border-left: 1px solid var(--color-divider);
}

.seg-opt:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.seg-opt.is-active,
.seg-opt.is-active:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* Filter/choice chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.chip:hover {
  border-color: var(--color-accent);
}

.chip.is-active,
.chip[aria-pressed=true] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* ═══════════════════════════════════════════════════════
   TAGS — small square labels
═══════════════════════════════════════════════════════ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  font-size: var(--text-xs);
  line-height: 1.5;
  letter-spacing: 0.02em;
  background: var(--color-neutral-200);
  color: var(--color-neutral-800);
  white-space: nowrap;
}

.tag-accent {
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
}

.tag-green {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}

.tag-neutral {
  background: var(--color-neutral-200);
  color: var(--color-neutral-800);
}

.tag-outline {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-700);
}

.tag-success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.tag-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.tag-caps {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════
   FORMS — native inputs are styled globally; .field
   groups label + control + hint + validation message.
═══════════════════════════════════════════════════════ */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]),
select,
textarea,
.input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}

input:hover, select:hover, textarea:hover {
  border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--color-accent);
  outline-offset: 0;
}

input::placeholder, textarea::placeholder {
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

input:disabled, select:disabled, textarea:disabled {
  opacity: 0.55;
}

textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
}

input[type=checkbox], input[type=radio] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--color-accent);
  cursor: pointer;
}

input[type=range] {
  width: 100%;
  accent-color: var(--color-accent);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field > label,
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-soft);
}

.field-optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.field-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Field for short values (dates, postcodes) */
.field--short {
  max-width: 240px;
}

/* Several fields side by side, wrapping on small screens */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-4);
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Section label inside a long form ("01 · About you") */
.form-group-label {
  margin-top: var(--space-4);
}

.form-stack > .kicker--ruled {
  margin-bottom: 0;
}

/* Inline checkbox + text */
.check,
.field > .check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 15px;
  color: inherit;
  cursor: pointer;
}

.check input {
  margin-top: 3px;
}

/* Bordered choice row (checkbox/radio card) */
.choice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: var(--space-4);
  text-align: left;
  border: 1px solid var(--color-divider);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.choice:hover {
  border-color: var(--color-accent);
}

.choice:has(input:checked) {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  border-color: var(--color-accent);
}

.choice.is-disabled {
  opacity: 0.55;
}

.choice.is-disabled:hover {
  border-color: var(--color-divider);
}

.choice input {
  margin-top: 3px;
}

.choice-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.choice-title {
  font-weight: 600;
}

.choice-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Autocomplete suggestions under an input */
.suggest {
  position: relative;
}

.suggest-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 240px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-top: 0;
  box-shadow: var(--shadow-md);
}

.suggest-list li {
  margin: 0;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-divider-soft);
}

.suggest-list li:last-child {
  border-bottom: 0;
}

.suggest-list li:hover {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.suggest-empty {
  padding: 10px 12px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
  border-top: 0;
}

/* Selected value with a clear button */
.selected-value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.selected-value > span {
  flex: 1;
}

/* Blazor / MVC validation */
.validation-message,
.field-validation-error {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-danger);
}

.invalid,
.input-validation-error {
  border-color: var(--color-danger) !important;
}

.modified.valid:not([type=checkbox]) {
  border-color: var(--color-success);
}

.validation-summary-valid {
  display: none;
}

/* <ValidationSummary /> renders ul.validation-errors */
ul.validation-errors,
.validation-summary-errors ul {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  list-style: none;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
}

ul.validation-errors .validation-message {
  margin: 0;
}

.validation-summary-errors ul li {
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   FEEDBACK ALERTS  (.alert + .alert-success/-error/-warning/-info)
═══════════════════════════════════════════════════════ */
.alert {
  padding: var(--space-3) var(--space-4);
  font-size: 15px;
  line-height: 1.55;
  border: 1px solid var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.alert p {
  margin: 0;
}

.alert p + p {
  margin-top: var(--space-1);
}

.alert-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.alert-error {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.alert-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.alert-info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info);
}

/* Alert with a title, text and an action on the right */
.alert--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) var(--space-5);
}

.alert-title {
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   CARDS — transparent, hairline-framed, square
═══════════════════════════════════════════════════════ */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  color: inherit;
  background: transparent;
  border: 1px solid var(--color-divider);
  text-align: left;
  text-decoration: none;
}

.card > :last-child {
  margin-bottom: 0;
}

/* Whole card is a link or button */
.card--link {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.card--link:hover {
  color: inherit;
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}

/* Tinted fill — notices and "coming soon" boxes */
.card--surface {
  background: var(--color-surface);
}

.card--tint {
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}

/* Horizontal card: icon · text · action */
.card--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.card--row > .card-body,
.card--row > p {
  flex: 1 1 260px;
  margin: 0;
}

/* Card with an image on top */
.card--media {
  padding: 0;
  gap: 0;
}

.card--media > .card-body {
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.card-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.card-title--lg {
  font-size: 34px;
  line-height: 1.05;
}

.card-text {
  margin: 0;
  font-size: 15px;
  color: var(--color-text-soft);
}

.card-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.card-foot {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}

/* Heading separated from the number above by a hairline (values, principles) */
.card-title--ruled {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

/* Navigation tile — icon, title, description */
.tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  color: inherit;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--color-divider);
  cursor: pointer;
  transition: background 0.15s;
}

.tile:hover {
  color: inherit;
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}

.tile--surface {
  background: var(--color-surface);
}

.tile--surface:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}

.tile .icon {
  color: var(--color-accent);
}

.tile-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--heading-3);
  line-height: 1.1;
  text-transform: uppercase;
}

.tile-desc {
  font-size: var(--text-sm);
}

/* Square initials block */
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  color: var(--color-accent-700);
  border: 1px solid var(--color-divider);
}

.avatar--lg {
  width: 72px;
  height: 72px;
  font-size: 32px;
}

/* Square date block (day / month / year) */
.date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  padding: var(--space-2) 0;
  line-height: 1;
  border: 1px solid var(--color-divider);
}

.date-block-day {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 30px;
  color: var(--color-accent-700);
}

.date-block-month {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-2-700);
}

.date-block-year {
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════
   IMAGES — hairline frame + duotone wash in the accent
═══════════════════════════════════════════════════════ */
.figure {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
}

.figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duotone > img {
  filter: grayscale(1) contrast(1.05);
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--color-accent);
  mix-blend-mode: color;
}

.ratio-4x5 {
  aspect-ratio: 4/5;
}

.ratio-16x9 {
  aspect-ratio: 16/9;
}

.ratio-16x10 {
  aspect-ratio: 16/10;
}

.card--media > .figure {
  border: 0;
  border-bottom: 1px solid var(--color-divider);
}

/* ═══════════════════════════════════════════════════════
   LISTS & ROWS — hairline-ruled rows
═══════════════════════════════════════════════════════ */
/* Rows with a hairline under each item */
.rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-divider);
}

.rows > * {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
}

.rows--open {
  border-top: 0;
}

.rows--top > * {
  align-items: flex-start;
}

.rows-main {
  display: flex;
  flex: 1 1 360px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rows-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 96px;
}

.rows-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Clickable row (link list) */
.rows-title a {
  text-decoration: none;
}

.rows--links > a {
  justify-content: space-between;
  padding: var(--space-3) 0;
  color: inherit;
  text-decoration: none;
}

.rows--links > a:hover {
  color: var(--color-accent-700);
}

/* Numbered list: <ol class="numbered"> → 01, 02, 03 … */
.numbered {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: numbered;
  border-top: 1px solid var(--color-divider);
}

.numbered > li {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
  counter-increment: numbered;
}

.numbered > li::before {
  content: counter(numbered, decimal-leading-zero);
  flex: none;
  width: 22px;
  padding-top: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-2-700);
}

/* Two columns on wide screens (release notes) */
.numbered--cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  column-gap: var(--space-8);
  border-top: 0;
}

.numbered--cols > li {
  padding: var(--space-3) 0;
  font-size: 15px;
  line-height: 1.55;
  border-top: 1px solid var(--color-divider);
  border-bottom: 0;
}

/* Bulleted list with hairlines — for lists of statements */
.list-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-divider);
}

.list-rows > li {
  margin: 0;
  padding: var(--space-3) 0;
  font-size: 15px;
  border-bottom: 1px solid var(--color-divider);
}

/* Key/value grid: <dl class="dl"><dt/><dd/></dl> */
.dl {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  max-width: 720px;
  margin: 0;
  font-size: 15px;
  border-top: 1px solid var(--color-divider);
}

.dl > dt,
.dl > dd {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}

.dl > dt {
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════════════ */
table,
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th {
  padding: var(--space-2);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-divider);
}

td {
  padding: 10px var(--space-2);
  vertical-align: top;
  border-bottom: 1px solid var(--color-divider-soft);
}

tbody tr:hover {
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════
   STATES — loading, empty, status card
═══════════════════════════════════════════════════════ */
.loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) 0;
  color: var(--color-text-muted);
}

.loading .icon {
  color: var(--color-accent);
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 1px solid var(--color-divider);
}

.empty .icon {
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.empty-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 24px;
  text-transform: uppercase;
}

.empty-text {
  margin: 0;
  max-width: 38em;
  color: var(--color-text-soft);
}

/* Single-message page (mail sent, confirmed, link expired …) */
.status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 600px;
  margin: var(--space-18) auto 0;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid var(--color-divider);
}

.status--inline {
  margin: 0;
  max-width: none;
  padding: 0;
  border: 0;
}

.status h1 {
  font-size: clamp(36px, 4.6vw, 56px);
  margin: 0;
}

.status p {
  margin: 0;
  font-size: var(--text-md);
}

.status form {
  width: 100%;
}

.status-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--color-accent);
  border: 1px solid var(--color-divider);
}

.status-icon--error {
  color: var(--color-accent-2-700);
}

.status-tip {
  display: flex;
  gap: var(--space-3);
  width: 100%;
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  border-top: 1px solid var(--color-divider);
}

.status-tip .icon {
  color: var(--color-accent);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════
   PAGE PATTERNS — hero, dark band, CTA, split panel,
   dashboard head
═══════════════════════════════════════════════════════ */
/* Page hero: kicker (ruled) · h1 · lead, optional aside card */
.page-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-10) clamp(32px, 6vw, 96px);
  padding: var(--space-18) 0 var(--space-16);
}

.page-hero--home {
  align-items: center;
  padding: var(--space-20) 0 var(--space-22);
}

.page-hero-main {
  flex: 2 1 480px;
  min-width: 0;
}

.page-hero-main > h1 {
  margin-left: -0.04em;
}

.page-hero-main > .lead {
  margin-bottom: 0;
}

.page-hero-aside {
  flex: 1 1 280px;
  min-width: 0;
}

.page-hero-media {
  flex: 1 1 380px;
  min-width: 0;
  max-width: 500px;
}

/* Full-width deep-green field */
.band-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-20) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-8) clamp(32px, 6vw, 96px);
}

.band-main {
  flex: 2 1 460px;
  min-width: 0;
}

.band-main > p:last-child {
  margin-bottom: 0;
}

.band-side {
  flex: 1 1 220px;
}

/* Band used as a block inside the page container */
.band--inset .band-inner {
  padding: clamp(28px, 5vw, 56px);
}

/* Closing call to action in a hairline frame */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-8) clamp(32px, 6vw, 96px);
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--color-divider);
}

.cta-main {
  flex: 3 1 420px;
  min-width: 0;
}

.cta-main > h2 {
  font-size: var(--heading-2-lg);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-5);
}

.cta-main > p {
  font-size: var(--text-lg);
  max-width: 52ch;
  margin: 0;
}

.cta-side {
  flex: 1 1 200px;
}

.cta-note {
  flex: 1 1 100%;
  margin: 0;
  padding-top: var(--space-6);
  font-size: 15px;
  color: var(--color-text-soft);
  border-top: 1px solid var(--color-divider);
}

/* Two-panel frame: dark aside + main (register, sign in, contact) */
.split-panel {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-12);
  border: 1px solid var(--color-divider);
}

.split-panel-aside {
  display: flex;
  flex: 1 1 340px;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-12);
  max-width: 100%;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px);
}

.split-panel-aside h1,
.split-panel-aside h2 {
  font-size: clamp(36px, 3.8vw, 52px);
  line-height: 1;
  letter-spacing: 0.01em;
}

.split-panel-main {
  flex: 1.4 1 480px;
  min-width: 0;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px);
}

.split-panel-main > * {
  max-width: 560px;
}

.split-panel-main h1 {
  font-size: clamp(40px, 5vw, 60px);
  margin-bottom: var(--space-3);
}

/* Dashboard head: date kicker · h1 · role tags */
.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) var(--space-10);
  padding: var(--space-14) 0 var(--space-10);
  margin-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-divider);
}

.dash-head h1 {
  font-size: var(--heading-1-sm);
  margin: var(--space-3) 0 0 -0.04em;
}

.dash-head > :first-child {
  flex: 1 1 420px;
  min-width: 0;
}

/* "View as" switcher on the right of the dashboard head */
.dash-switch {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

@media (max-width: 760px) {
  .dash-switch {
    align-items: flex-start;
  }
}
.dash-head + .alert {
  margin-bottom: var(--space-12);
}

.dash-head p {
  margin-bottom: 0;
}

.dash-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: 14px;
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════
   SITE HEADER
═══════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
}

.site-logo {
  display: block;
  flex: none;
}

.site-logo img {
  height: 40px;
  width: auto;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
}

.site-nav a {
  padding: var(--space-2) 10px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--color-accent-700);
}

.site-nav a.active {
  color: var(--color-accent-700);
  border-bottom-color: var(--color-accent);
}

.site-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.site-actions .btn-ghost,
.site-actions .btn-primary {
  font-size: 15px;
  padding-block: 9px;
}

.site-actions .btn-primary {
  padding-inline: 18px;
}

/* Language switcher (EN | NL) in the header actions area */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-divider);
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1;
}

.lang-toggle-btn {
  appearance: none;
  border: 0;
  background: none;
  color: var(--color-text-soft);
  font: inherit;
  padding: 9px 12px;
  cursor: pointer;
}

.lang-toggle-btn + .lang-toggle-btn {
  border-inline-start: 1px solid var(--color-divider);
}

.lang-toggle-btn.active {
  color: var(--color-bg);
  background: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════
   BREADCRUMBS
═══════════════════════════════════════════════════════ */
.breadcrumbs {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.breadcrumbs a {
  color: var(--color-accent-700);
  text-decoration: none;
}

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

.breadcrumbs span {
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════
   SITE FOOTER
═══════════════════════════════════════════════════════ */
.site-main {
  flex: 1;
  width: 100%;
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10) clamp(32px, 6vw, 96px);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-14) var(--gutter);
}

.footer-brand {
  display: flex;
  flex: 2 1 260px;
  flex-direction: column;
  gap: 14px;
}

.footer-brand img {
  height: 44px;
  width: auto;
  align-self: flex-start;
}

.footer-mission {
  margin: 0;
  max-width: 28ch;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-soft);
}

.footer-copy {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.footer-col {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-sm);
}

.footer-col .kicker {
  margin-bottom: var(--space-1);
}

.footer-col .kicker + a {
  margin-top: 0;
}

.footer-col a + .kicker {
  margin-top: var(--space-4);
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-bg);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════
   ADMIN MASTER-DETAIL PATTERN
   List page: .admin-page-header → .admin-list → .admin-card rows
   Detail page: .admin-page-header → .admin-form-card
═══════════════════════════════════════════════════════ */
.admin-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) var(--space-10);
  padding: var(--space-10) 0 var(--space-8);
  margin-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-divider);
}

.admin-page-title {
  font-size: var(--heading-1-sm);
  margin: var(--space-2) 0 var(--space-2) -0.04em;
}

.admin-page-subtitle {
  margin: 0;
  color: var(--color-text-soft);
}

/* Empty state in a hairline frame */
.admin-list-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 1px solid var(--color-divider);
}

.admin-list-empty .icon {
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.admin-list-empty-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 24px;
  text-transform: uppercase;
}

.admin-list-empty-sub {
  margin: 0 0 var(--space-4);
  color: var(--color-text-soft);
}

.admin-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-divider);
}

.admin-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
}

.admin-card-body {
  flex: 1 1 280px;
  min-width: 0;
}

.admin-card-title {
  margin: 0 0 var(--space-1);
  font-size: 22px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-card-meta,
.admin-card-desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

.admin-card-desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.admin-card-link-preview {
  display: block;
  max-width: 100%;
  margin-top: var(--space-1);
  overflow: hidden;
  font-size: 13px;
  color: var(--color-accent-700);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.admin-card-confirm {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-danger);
}

/* Form in a hairline frame */
.admin-form-card {
  max-width: 800px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--color-divider);
}

.admin-form-card + .admin-form-card {
  margin-top: var(--space-8);
}

.admin-form-card--narrow {
  max-width: 560px;
}

.admin-form-card > h2 {
  font-size: 28px;
  margin-bottom: var(--space-1);
}

.admin-form-card > h2 + p {
  color: var(--color-text-soft);
  margin-bottom: var(--space-6);
}

.admin-form-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-6);
}

.admin-form-section--half {
  max-width: 280px;
}

.admin-form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-soft);
}

.admin-form-optional {
  margin-left: var(--space-1);
  font-weight: 400;
  color: var(--color-text-muted);
}

.admin-form-error {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-danger);
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

.admin-form-card > .alert {
  margin-bottom: var(--space-6);
}

.admin-form-card > .dl {
  margin-top: var(--space-10);
}

/* ═══════════════════════════════════════════════════════
   LEGAL DOCUMENT PAGES  (.legal-*)
═══════════════════════════════════════════════════════ */
.legal-doc {
  max-width: 800px;
}

.legal-header {
  padding: var(--space-18) 0 var(--space-12);
}

.legal-kicker {
  display: block;
  padding-bottom: var(--space-3);
  margin: 0 0 var(--space-8);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kicker-color);
  border-bottom: 1px solid var(--color-divider);
}

.legal-title {
  font-size: clamp(44px, 6vw, 80px);
  margin: 0 0 var(--space-5) -0.04em;
}

.legal-effective {
  display: inline-block;
  margin: 0;
  padding: 3px 10px;
  font-size: var(--text-xs);
  background: var(--color-neutral-200);
  color: var(--color-neutral-800);
}

.legal-body {
  font-size: var(--text-md);
  line-height: 1.7;
}

.legal-body p,
.legal-body ul,
.legal-body ol {
  margin: 0 0 var(--space-4);
}

.legal-body li + li {
  margin-top: var(--space-2);
}

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

.legal-section-title {
  padding-bottom: 14px;
  margin: 0 0 var(--space-5);
  font-size: 32px;
  line-height: 1.1;
  border-bottom: 1px solid var(--color-divider);
}

.legal-highlight {
  margin: 0 0 var(--space-12);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-lg);
  line-height: 1.6;
  border: 1px solid var(--color-divider);
}

.legal-highlight--warn {
  background: var(--color-accent-2-100);
  border-color: color-mix(in srgb, var(--color-accent-2) 35%, transparent);
}

.legal-nav {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

.legal-nav-label {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kicker-color);
}

.legal-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.legal-nav-links a {
  padding: 5px 12px;
  font-size: var(--text-sm);
  text-decoration: none;
  border: 1px solid var(--color-divider);
}

.legal-nav-links a:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}

/* ═══════════════════════════════════════════════════════
   BLAZOR ERROR UI
═══════════════════════════════════════════════════════ */
#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding: var(--space-3) var(--gutter);
  background: var(--color-accent-2-100);
  color: var(--color-text);
  border-top: 1px solid var(--color-accent-2);
  box-shadow: var(--shadow-md);
}

#blazor-error-ui .dismiss {
  position: absolute;
  top: var(--space-2);
  right: var(--space-4);
  cursor: pointer;
}

.blazor-error-boundary {
  padding: var(--space-4) var(--space-5);
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .site-header {
    position: static;
  }
  .site-actions {
    gap: 0;
  }
  .site-actions .btn-ghost {
    padding: 6px 8px;
    font-size: 14px;
  }
  .site-nav {
    order: 3;
    flex-wrap: nowrap;
    width: calc(100% + 20px);
    margin: 0 -10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .page-hero,
  .legal-header {
    padding-top: var(--space-12);
  }
  .section {
    padding-bottom: var(--space-16);
  }
  .dl {
    grid-template-columns: minmax(0, 1fr);
  }
  .dl > dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}