/* ============================================================
   TOKENS
   ----------------------------------------------------------------
   Vonheim uses a reduced palette: warm neutrals, one slate accent,
   two status signals. See:
   - docs/superpowers/specs/2026-04-05-design-styleguide-retrofit.md
   - docs/superpowers/specs/2026-04-05-design-styleguide-retrofit.md
   ============================================================ */
:root {
  /* ----- Surfaces (warm spine) ----- */
  --color-bg:          #f0ebe3;  /* warm neutral — header band */
  --color-surface-alt: #f6f1e9;  /* cream — component accent surface (calendar cells, code blocks) */
  --color-surface:     #fbf8f2;  /* warm white — cards, rows, inputs */

  /* ----- Line ----- */
  --color-rule:        #cdb8a2;  /* warm border */

  /* ----- Text ----- */
  --color-ink:         #1a1a1a;
  --color-ink-muted:   #666666;

  /* ----- Accent ----- */
  --color-accent:      #3d2a1e;  /* deep umber — links, primary actions, active nav */

  /* ----- Status ----- */
  --color-positive:    #729b79;  /* muted green */
  --color-critical:    #c14953;  /* muted crimson */

  /* ----- Spacing ----- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* ----- Radius ----- */
  --radius-sm: 0.25rem;
  --radius:    0.375rem;  /* 6px — default for cards, inputs, buttons */
  --radius-md: 0.5rem;

  /* ----- Typography ----- */
  --font-serif: "Libre Caslon Text", Georgia, serif;
  --font-sans:  "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:  ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

  /* ----- Layout ----- */
  --max-width: 960px;

  /* ----- Legacy aliases for .prototype-* chrome (do not use in app styles) ----- */
  --color-text:   var(--color-ink);
  --color-muted:  var(--color-ink-muted);
  --color-border: var(--color-rule);
  /* --color-bg is already defined above and matches the chrome's expected meaning */
}

[data-theme="dark"] {
  --color-bg:          #1f1b17;
  --color-surface-alt: #262220;
  --color-surface:     #2e2a27;
  --color-rule:        #4a3f36;
  --color-ink:         #f0ece6;
  --color-ink-muted:   #9a928a;
  /* Accent and status stay the same — they already pair with dark. */
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   ELEMENTS — native HTML defaults
   ============================================================ */
html {
  font-size: 100%;  /* explicit 16px base; respects user browser settings */
}
body {
  font-family: var(--font-serif);
  font-size: 1.125rem;  /* 18px — compensates for Libre Caslon's small x-height */
  background: var(--color-surface);
  color: var(--color-ink);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}
h1 { font-size: 2rem;    margin-top: var(--space-xl); }
h2 { font-size: 1.5rem;  margin-top: var(--space-xl); }
h3 { font-size: 1.25rem; margin-top: var(--space-lg); }
h4 { font-size: 1.1rem;  margin-top: var(--space-md); }
h5 { font-size: 1rem;    margin-top: var(--space-md); }
h6 {
  font-size: 0.875rem;
  margin-top: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* First heading in any container has no top margin — the container's
   own padding or the section wrapper already provides breathing room. */
:is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

p {
  margin-bottom: var(--space-md);
}

small {
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

ul, ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}
li { margin-bottom: var(--space-xs); }

hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-lg) 0;
}

blockquote {
  border-left: 3px solid var(--color-rule);
  padding-left: var(--space-md);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-md);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-alt);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  background: var(--color-surface-alt);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-md);
}
pre code {
  background: transparent;
  padding: 0;
}

/* ----- Tables (ported from static/css/style.css lines 390-417) ----- */
table {
  font-family: var(--font-sans);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 1rem;
  margin-bottom: var(--space-md);
}
th, td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}
th {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
  background: var(--color-surface-alt);
}
td { background: var(--color-surface); }
tr:last-child td { border-bottom: none; }

/* ============================================================
   FORMS — buttons, inputs, labels
   ============================================================ */

/* ----- Buttons ----- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-bg) 70%, var(--color-rule));
  text-decoration: none;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary variant — slate accent background */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
}
.btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent) 85%, white);
  border-color: color-mix(in srgb, var(--color-accent) 85%, white);
}

/* Small variant — tighter padding, used in the nav header */
.btn-sm {
  padding: 0.15rem var(--space-sm);  /* spec: off-scale vertical padding for a tight header button */
  font-size: 0.9375rem;
}

/* Inline form used to wrap a single button (e.g., logout) */
.inline { display: inline; }

/* ----- Inputs ----- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="password"],
textarea,
select {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  width: 100%;
  padding: var(--space-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
}

/* Single-line form controls get an explicit height so date inputs and
   selects render at the same size — browsers apply different internal
   widget padding otherwise. box-sizing: border-box (from reset) means
   the height includes padding and border. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="password"],
select {
  height: 2.75rem;
}

/* Custom dropdown chevron for select (native arrow removed by
   appearance: none above). Encoded inline as SVG so no asset file. */
select {
  padding-right: calc(var(--space-sm) + 1.25rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%233d2a1e' stroke-width='1.5'%3E%3Cpath d='M2 4.5 L6 8.5 L10 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  background-size: 0.75rem;
}

textarea {
  min-height: 5rem;
  resize: vertical;
}

/* ----- Labels ----- */
/* Block label — stacked above an input. Used inside div > label > input
   patterns (the standard form layout) and inside filter-group wrappers.
   The filter-group branch deliberately does NOT require a .form ancestor
   because the filter form uses its own .filter-form class on the form
   element. */
.form div > label,
.filter-group > label {
  display: block;
  margin: var(--space-sm) 0 var(--space-xs);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
}

/* Inline label — wraps a checkbox or radio with its text. */
label.label-inline,
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: normal;
  margin-right: var(--space-md);
}

/* ----- Fieldsets ----- */
fieldset {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: 0 var(--space-md) var(--space-sm);
  margin-top: var(--space-md);
  font-family: var(--font-sans);
}
legend {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  padding: 0 var(--space-xs);
}

/* ----- Form layout ----- */
form.form {
  max-width: 30rem;  /* 480px, normalized from Vonheim's literal 480px */
}

.form-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ============================================================
   COMPONENTS — Vonheim-specific
   ============================================================ */

/* ----- Page layout bands (top header, page header bar, main) ----- */
.page-header-background {
  background: linear-gradient(to bottom, var(--color-surface), color-mix(in srgb, var(--color-bg) 50%, var(--color-surface)));
}
.main-background {
  background: var(--color-surface);
}

/* Top site header — logo + nav + user-info */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "logo nav user";
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
}
.site-header .logo {
  grid-area: logo;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-ink);
  text-decoration: none;
}
.site-header .logo:hover { text-decoration: none; }

.site-header > nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
}
.site-header > nav a {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-ink-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.site-header > nav a:hover {
  color: var(--color-ink);
  text-decoration: none;
}
.site-header > nav a.active {
  color: var(--color-ink);
  border-color: var(--color-rule);
}

.site-header .user-info {
  grid-area: user;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
  padding: 0 var(--space-md);
}

/* Page header bar — the cream band between site header and main */
.page-header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
}
.page-header h1 {
  font-size: 1.25rem;
}
.page-header nav {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 1rem;
}
.page-header nav a {
  color: var(--color-ink);
  border-bottom: 1px solid transparent;
}
.page-header nav a:hover,
.page-header nav a.active {
  border-color: var(--color-rule);
  text-decoration: none;
}

/* Main content wrapper */
.main-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

/* ----- Cards (booking card, generic card) -----
   Cards have three internal rhythm units:
     1. Title block — date / h1 / badges, tightly coupled
     2. Meta block  — spaces / contact, tight lines
     3. A clear gap between title-block and meta-block
   Outer padding is generous (--space-lg) so content breathes
   against the border. */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
}
.card-body {
  padding: var(--space-lg);
  font-family: var(--font-serif);
}
.card p {
  font-family: var(--font-sans);
}

/* --- Title block: date -> h1 -> badges --- */
.card-body .booking-date {
  margin-bottom: var(--space-xs);  /* 0.25rem — date hugs the title */
}
.card-body h1 {
  font-size: 1.5rem;
  margin-top: 0;                    /* override global h1 top margin */
  margin-bottom: var(--space-sm);   /* 0.5rem — title hugs the badges */
}
.card-body h1 + p {
  margin-bottom: var(--space-md);   /* 1rem — title block / meta block gap */
}

/* --- Meta block: tight lines of supplementary info --- */
.card-body .booking-spaces,
.card-body .booking-contact {
  margin-bottom: var(--space-xs);   /* 0.25rem — tight inter-line */
}

/* Last child in card-body should never push against the bottom padding */
.card-body > *:last-child {
  margin-bottom: 0;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);  /* match card-body horizontal */
  border-top: 1px solid var(--color-rule);
}

/* ----- Badges ----- */
.badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Neutral variants — pending, cancelled, info/type, etc. */
.badge-pending,
.badge-cancelled,
.badge-info,
.badge-type {
  background: color-mix(in srgb, var(--color-ink-muted) 15%, var(--color-surface));
  color: var(--color-ink-muted);
}

/* Positive variant — approved */
.badge-approved {
  background: color-mix(in srgb, var(--color-positive) 18%, var(--color-surface));
  color: color-mix(in srgb, var(--color-positive) 67%, var(--color-ink));
}

/* Critical variant — rejected */
.badge-rejected {
  background: color-mix(in srgb, var(--color-critical) 15%, var(--color-surface));
  color: color-mix(in srgb, var(--color-critical) 70%, var(--color-ink));
}

/* ----- Calendar ----- */
#cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cal-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
}

.cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-xs);
  grid-auto-rows: 8rem;
}

.cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
  padding: var(--space-xs) 0;
}
.cal-header > div {
  text-align: left;
  padding-left: calc(var(--space-sm) + 1px);
}

.cal-day {
  position: relative;
  background: var(--color-surface-alt);
  padding: var(--space-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  transition: background 0.1s ease;
  text-decoration: none;
  color: inherit;
}
.cal-day:hover {
  background: color-mix(in srgb, var(--color-surface-alt), var(--color-accent) 8%);
  text-decoration: none;
}

.cal-day.empty {
  background: var(--color-bg);
  cursor: default;
}
.cal-day.empty:hover {
  background: var(--color-bg);
}

/* Past days: dimmed content, still readable */
.cal-day.past {
  background: var(--color-bg);
}
.cal-day.past .cal-num,
.cal-day.past .cal-list,
.cal-day.past .cal-fullday-title {
  opacity: 0.5;
}

/* Today — "I dag" replaces the month label in the same inline slot.
   Day number and label turn umber so today reads as a warm accent
   without a background fill or a separate eyebrow element. */
.cal-day.today .cal-num {
  color: var(--color-accent);
}
.cal-day.today .cal-num-month {
  color: var(--color-accent);
}

/* Day number — big serif, top-left */
.cal-num {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-ink);
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}
.cal-num-month {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
  text-decoration: none;
}

/* "Ledig" label for free days */
.cal-free {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  font-style: italic;
}

/* Booking list — max 2 visible, each meeting is a two-line block
   (time above, title below). Overflow collapses to "+N mer". */
.cal-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-sans);
}

.cal-item {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}
.cal-item time {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--color-ink-muted) 65%, var(--color-surface-alt));
}
.cal-item-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Full-day booking — entire cell is a muted burgundy (critical mixed
   with ink). The flat --color-critical read as too loud across six
   cells. Day number and title render in surface-white. Title uses
   the same small sans as meetings so typography stays consistent. */
.cal-day.fullday {
  background: color-mix(in srgb, var(--color-critical) 70%, var(--color-ink));
}
.cal-day.fullday:hover {
  background: color-mix(in srgb, var(--color-critical) 60%, var(--color-ink));
}
.cal-day.fullday .cal-num,
.cal-day.fullday .cal-num-month {
  color: var(--color-surface);
}
.cal-fullday-title {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-surface);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Overflow link */
.cal-more {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: var(--color-ink-muted);
  text-decoration: none;
  align-self: flex-start;
}
.cal-more:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ----- Detail list (dl) ----- */
.detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-md);
  align-items: center;
  padding: var(--space-md) 0;
}
.detail-list dt {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-ink-muted);
}
.detail-list dd {
  font-family: var(--font-sans);
  font-size: 1rem;
}

/* ----- Filter form (used in list view) ----- */
.filter-form {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.filter-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 10rem;
}

/* ----- Booking sections and meta ----- */
.booking-section {
  margin-bottom: var(--space-xl);
}
.booking-section h2 {
  font-family: var(--font-sans);
  font-size: 1rem;
  opacity: 0.75;
  margin-bottom: var(--space-sm);
  padding: 0 var(--space-md);
}
.booking-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.booking-date,
.booking-spaces,
.booking-contact {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
}

/* ----- Auth pages ----- */
.auth-page {
  max-width: 22.5rem;  /* 360px */
  margin: var(--space-xl) auto;
}
.auth-page h1 {
  margin-bottom: var(--space-lg);
}
.auth-alt {
  margin-top: var(--space-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-ink-muted);
}
.auth-error {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-critical) 99%, var(--color-ink));
  min-height: 1.2em;
}
.recovery-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
}
.recovery-section summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-ink-muted);
}
.recovery-section .form {
  margin-top: var(--space-md);
}

/* ----- Utility ----- */
.sans { font-family: var(--font-sans); }

/* ----- Responsive ----- */
@media (max-width: 640px) {
  .site-header {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo user"
      "nav nav";
    gap: 0;
  }
  .site-header > nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .cal-header { display: none; }
  .cal-body {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .cal-day {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
  }
  .cal-day.empty { display: none; }
  .cal-num {
    min-width: 3rem;
    padding-top: 0.1rem;
  }
  .cal-list {
    flex: 1;
    font-size: 0.875rem;
  }
  .filter-form { flex-direction: column; }
  .card-footer {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .detail-list {
    grid-template-columns: 1fr;
  }
  .detail-list dt {
    margin-top: var(--space-sm);
  }
}

/* ============================================================
   PROTOTYPE CHROME — styleguide-environment classes only.
   These are NEVER part of a real page; they exist to frame the
   styleguide, component previews, and page previews. All classes
   are namespaced `.prototype-*` so they are easy to find and
   delete if the project ever outgrows this scaffold.
   ============================================================ */

/* Shared page wrapper for the styleguide (design/index.html) and
   component files (design/components/*.html). Page previews under
   design/preview/ deliberately do NOT use this — they render as the
   real page would, with only a .prototype-header bar above them. */
.prototype-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}

.prototype-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.prototype-title h1 {
  margin-bottom: 0;
}
.prototype-subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin: 0;
}
.prototype-title-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.prototype-title-actions a {
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.prototype-title-actions a:hover { color: var(--color-text); }
.prototype-title-actions button {
  background: transparent;
  border: 1px solid var(--color-muted);
  color: var(--color-muted);
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.prototype-title-actions button:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

.prototype-toc {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.prototype-toc li { margin: 0; }
.prototype-toc a { font-family: var(--font-mono); font-size: 0.875rem; }

.prototype-section {
  margin-bottom: var(--space-xl);
  padding-top: var(--space-lg);
}
.prototype-section > h2 {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.prototype-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--space-md);
}
.prototype-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.prototype-swatch-box {
  aspect-ratio: 2 / 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.prototype-swatch-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
}

.prototype-space-scale {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.prototype-space-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.prototype-space-bar {
  height: 0.75rem;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
}
.prototype-space-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  min-width: 6rem;
}

/* Dev-chrome bar shown above a page preview. Intentionally styled
   to look unmistakably like a prototyping environment and not part
   of the page being previewed: monospace, muted, dashed underline. */
.prototype-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-border);
  border-bottom: 1px dashed var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
}
.prototype-header a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.prototype-header a:hover { text-decoration: none; }
.prototype-header-spacer { flex: 1; }

.prototype-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.prototype-breadcrumb span { opacity: 0.6; }
.prototype-header button {
  background: transparent;
  border: 1px solid var(--color-muted);
  color: inherit;
  font: inherit;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  cursor: pointer;
}