/* ==========================================================================
   Design Hub — base stylesheet (Stage 0)

   Two layout systems:
   1. .layout-public  — public/discovery pages, MOBILE-FIRST: base styles
      target small screens, min-width queries enhance upward.
   2. .layout-client  — logged-in workspace, DESKTOP-FIRST: base styles
      target wide screens, max-width queries adapt downward.
   ========================================================================== */

/* --- Design tokens (values from docs/DESIGN-AND-STACK.md, Part A) --------- */
:root {
  --color-bg: #faf9f7;
  --color-surface: #ffffff;
  --color-ink: #1c1a17;
  --color-ink-soft: #6b6560;
  --color-accent: #2f4a3f;
  --color-accent-hover: #243a31;
  --color-accent-ink: #ffffff;
  --color-line: #e5e1dc;
  --color-gold: #a8874b;
  --color-success: #3f7a5a;
  --color-warning: #b07c2e;
  --color-error: #a8503c;
  --font-stack: "Noto Sans Georgian", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "Noto Serif Georgian", Georgia, serif;
  --radius: 8px;
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 3rem;     /* 48px */
  --space-5: 4rem;     /* 64px */
  --sidebar-width: 260px;
}

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-stack);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Editorial serif headings (design doc A3), on public pages where the
   serif font is loaded. Card/step titles opt back into sans below. */
.layout-public h1,
.layout-public h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.25;
}

img {
  max-width: 100%;
  display: block;
}

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

/* --- Language switcher (shared) ------------------------------------------- */
.lang-switcher {
  display: flex;
  gap: var(--space-1);
}

.lang-switcher__option {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  border-radius: var(--radius);
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 44px; /* touch target */
}

.lang-switcher__option--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

/* ==========================================================================
   PUBLIC LAYOUT — mobile-first
   ========================================================================== */

.layout-public .site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.layout-public .site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
}

.layout-public .site-header__brand {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-right: auto;
}

.layout-public .site-main {
  padding: var(--space-3) var(--space-2);
  max-width: 72rem;
  margin: 0 auto;
}

.layout-public .site-footer {
  border-top: 1px solid var(--color-line);
  padding: var(--space-3) var(--space-2);
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  text-align: center;
}

.hero {
  padding: var(--space-4) 0;
  text-align: center;
}

.hero__heading {
  font-size: 1.75rem; /* comfortable at 375px */
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}

.hero__sub {
  color: var(--color-ink-soft);
  font-size: 1.05rem;
  margin: 0 0 var(--space-2);
}

.hero__note {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius);
  display: inline-block;
  padding: var(--space-1) var(--space-2);
}

/* Public: enhance upward for tablets and desktops */
@media (min-width: 48rem) {
  .layout-public .site-header__inner {
    padding: var(--space-2) var(--space-4);
  }

  .layout-public .site-main {
    padding: var(--space-4);
  }

  .hero__heading {
    font-size: 2.5rem;
  }
}

/* ==========================================================================
   CLIENT WORKSPACE LAYOUT — desktop-first
   ========================================================================== */

.layout-client .workspace {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

/* grid/flex children default to min-width:auto, which lets long Georgian
   labels (or wide inner grids) force the page wider than the viewport —
   at every width, not only under the mobile breakpoint. */
.layout-client .workspace__sidebar,
.layout-client .workspace__body,
.layout-client .workspace__topbar,
.layout-client .workspace__main {
  min-width: 0;
}

.layout-client .workspace__sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-line);
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.layout-client .workspace__brand {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-ink);
}

.layout-client .workspace__nav {
  flex: 1;
}

.layout-client .workspace__nav-hint {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
}

.layout-client .workspace__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.layout-client .workspace__title {
  font-size: 1.25rem;
  margin: 0;
}

.layout-client .workspace__main {
  padding: var(--space-3);
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-3);
  max-width: 48rem;
}

.panel__heading {
  margin: 0 0 var(--space-1);
}

.panel__text {
  margin: 0;
  color: var(--color-ink-soft);
}

/* ==========================================================================
   AUTH & FORMS (Stage 2) — registration, login, verification, password reset
   ========================================================================== */

.site-header__link {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  padding: 0.35rem 0.5rem;
}

.site-header__link--strong {
  color: var(--color-accent);
  font-weight: 600;
}

.site-header__link--button {
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}

.layout-public .site-header__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.inline-form {
  display: inline;
}

.auth-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-3);
  max-width: 26rem;
  margin: var(--space-3) auto;
}

.auth-card__heading {
  margin: 0 0 var(--space-1);
  font-size: 1.5rem;
  line-height: 1.25;
}

.auth-card__sub {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-soft);
}

.auth-card__note {
  margin: var(--space-2) 0 0;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.auth-card__note--muted {
  font-size: 0.85rem;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-2);
}

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

/* Log in + Create account side by side; each takes half the row and they
   wrap to full-width stacked buttons when the card gets too narrow. */
.auth-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.auth-form__actions .btn {
  flex: 1 1 10rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-field__label {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Designer-entered text in both languages (includes/bilingual_field.html). */
.bilingual__label {
  margin: 0;
}

.bilingual__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.bilingual__cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.bilingual__cell input,
.bilingual__cell textarea {
  width: 100%;
  box-sizing: border-box;
}

.bilingual__tag {
  font-size: 0.8125rem;   /* 13px label */
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

@media (max-width: 640px) {
  .bilingual__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.form-field input:not([type="radio"]):not([type="checkbox"]) {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  padding: 0.65rem 0.85rem;
  min-height: 44px; /* touch target */
}

.form-field input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.form-field--invalid input:not([type="radio"]):not([type="checkbox"]) {
  border-color: #A8503C;
}

/* Radio / checkbox groups (Django's RadioSelect renders one <label> per
   option): the control sits on the same line as its text, with a
   44px-high row so the touch target stays comfortable. */
.form-field input[type="radio"],
.form-field input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  flex: none;
  accent-color: var(--color-accent);
}

.form-field label:has(> input[type="radio"]),
.form-field label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  cursor: pointer;
}

.form-field label:has(> input[type="radio"]:disabled) {
  color: var(--color-ink-soft);
  cursor: default;
}

.form-field__help {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.form-field__error {
  margin: 0;
  font-size: 0.85rem;
  color: #A8503C;
}

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.65rem 1.25rem;
  min-height: 44px;
  cursor: pointer;
  text-align: center;
}

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

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-line);
  color: var(--color-ink);
}

.btn--block {
  display: block;
  width: 100%;
}

.messages {
  max-width: 26rem;
  margin: 0 auto;
}

.layout-client .messages {
  margin: 0 0 var(--space-2);
}

.message {
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
}

.message--error {
  border-left-color: #A8503C;
}

.message--success {
  border-left-color: #3F7A5A;
}

.verify-step {
  border-top: 1px solid var(--color-line);
  padding: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.verify-step__heading {
  margin: 0;
  font-size: 1.05rem;
}

.verify-step__text {
  margin: 0;
  color: var(--color-ink-soft);
}

.verify-step--done .verify-step__heading {
  color: #3F7A5A;
}

.workspace__account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.workspace__user {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.workspace__logout {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  min-height: 44px;
}

/* ==========================================================================
   NOTIFICATIONS (Stage 3)
   ========================================================================== */

.workspace__nav-link {
  display: block;
  color: var(--color-ink);
  padding: var(--space-1) 0;
  font-size: 0.95rem;
}

.workspace__nav-badge {
  display: inline-block;
  min-width: 1.4rem;
  text-align: center;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: 999px;
  font-size: 0.8rem;
  padding: 0.1rem 0.4rem;
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.notif {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-2);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.notif--unread {
  border-left: 3px solid var(--color-accent);
}

.notif__title {
  margin: 0;
  font-weight: 600;
}

.notif__dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-accent);
  margin-right: 0.35rem;
  vertical-align: middle;
}

.notif__body {
  margin: 0.25rem 0 0;
  color: var(--color-ink-soft);
}

.notif__meta {
  margin: 0.25rem 0 0;
  color: var(--color-ink-soft);
  font-size: 0.85rem;
}

.notif__actions {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

/* ==========================================================================
   DASHBOARD & SETTINGS (Stage 4)
   ========================================================================== */

.workspace__nav-link--active {
  font-weight: 700;
  color: var(--color-accent);
}

.dash-welcome {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
}

/* The one primary action on the dashboard */
.next-step {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-3);
  max-width: 48rem;
  margin: 0 0 var(--space-3);
}

.next-step__label {
  margin: 0 0 var(--space-1);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.next-step__heading {
  margin: 0 0 var(--space-1);
  font-size: 1.35rem;
  line-height: 1.25;
}

.next-step__text {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-soft);
  max-width: 36rem;
}

/* Three journey sections; each keeps its designed empty state until the
   matching stage (12 / 13 / 15) fills it. */
.dash-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  max-width: 64rem;
}

.dash-section {
  max-width: none;
}

.dash-section__heading {
  margin: 0 0 var(--space-1);
  font-size: 1.05rem;
}

.dash-section__hint {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-soft);
  font-size: 0.85rem;
}

.settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 48rem;
}

.settings__panel {
  max-width: none;
}

.settings__form {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.settings__choices {
  display: flex;
  gap: var(--space-3);
}

.settings__choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.settings__prefs-scroll {
  max-width: 100%;
  overflow-x: auto; /* long Georgian labels scroll inside, not the page */
}

.settings__prefs {
  border-collapse: collapse;
}

.settings__prefs th,
.settings__prefs td {
  padding: var(--space-1) var(--space-2);
  text-align: center;
  font-weight: 400;
}

.settings__prefs thead th {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-line);
}

.settings__prefs-what {
  text-align: left;
  padding-left: 0;
}

.settings__prefs input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.settings__back {
  margin: 0;
  font-size: 0.95rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Workspace: adapt downward for narrow screens (stays responsive) */
@media (max-width: 48rem) {
  .layout-client .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout-client .workspace__topbar {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .layout-client .workspace__sidebar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-2);
    gap: var(--space-2);
  }

  /* Stage 4: the nav is now the only route to Settings, so on small
     screens it becomes a horizontal row instead of disappearing. */
  .layout-client .workspace__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    order: 3;
    width: 100%;
  }

  .layout-client .workspace__nav-hint {
    display: none; /* explanatory hint only fits comfortably on desktop */
  }

  .layout-client .workspace__main {
    padding: var(--space-2);
  }

  .dash-sections {
    grid-template-columns: 1fr;
  }

  .settings__choices {
    flex-direction: column;
    gap: var(--space-1);
  }
}

/* ==========================================================================
   PUBLIC PAGES (Stage 5) — mobile-first, editorial
   ========================================================================== */

/* --- Header site nav / footer nav ---------------------------------------- */
.site-header__site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  order: 3;              /* full-width second row on small screens */
  width: 100%;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;           /* columns size to their longest label and wrap when narrow */
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  margin: 0 auto var(--space-3);
  text-align: left;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
}

.site-footer__col-heading {
  margin: 0 0 var(--space-1);
  font-size: 0.8125rem;   /* 13px label */
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.site-footer__link {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
}

.site-footer__link:hover {
  color: var(--color-accent);
}

.site-footer__note {
  margin: 0;
}

/* Phones (owner feedback, 2026-09-13): a single centred column ran the
   footer to three screens on an iPhone. Two tidy columns instead, left
   aligned, with the one-line note set off underneath. */
@media (max-width: 480px) {
  .layout-public .site-footer {
    text-align: left;
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-2);
    margin-bottom: var(--space-2);
  }

  .site-footer__col {
    align-items: flex-start;
    text-align: left;
  }

  .site-footer__link {
    font-size: 0.875rem;
  }

  .site-footer__note {
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-line);
    font-size: 0.8125rem;
  }
}

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

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

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

/* --- Hero (home) ---------------------------------------------------------- */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* --- Page intro (all Stage 5 subpages) ------------------------------------ */
.page-intro {
  padding: var(--space-4) 0 var(--space-3);
  max-width: 42.5rem;    /* 680px editorial text width */
}

.page-intro__heading {
  font-size: 1.75rem;    /* 28px mobile page title */
  margin: 0 0 var(--space-2);
}

.page-intro__sub {
  font-size: 1.05rem;
  color: var(--color-ink-soft);
  margin: 0;
}

/* --- Home sections -------------------------------------------------------- */
.home-section {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
}

.home-section--calm {
  max-width: 42.5rem;
}

.home-section__heading {
  font-size: 1.375rem;   /* 22px mobile section heading */
  margin: 0 0 var(--space-3);
}

.home-section__text {
  color: var(--color-ink);
  max-width: 42.5rem;
  margin: 0 0 var(--space-2);
}

.home-section__more {
  margin: var(--space-2) 0 0;
}

/* --- Trust strip (home: "Designed to feel safe") --------------------------- */
.trust__intro {
  max-width: 42.5rem;
  margin-bottom: var(--space-3);
}

.trust__intro .home-section__heading {
  margin-bottom: var(--space-1);
}

.trust__lead {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 1.05rem;
}

.trust__bar {
  display: flex;
  gap: 3px;
  max-width: 42.5rem;
}

.trust__segment {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: 4px;
  min-height: 2.25rem;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}

.trust__segment:nth-child(2),
.trust__segment:nth-child(3) {
  opacity: 0.85;
}

.trust__bar:hover .trust__segment:not(:hover) {
  opacity: 0.45;
}

.trust__percent {
  font-size: 0.85rem;
  font-weight: 600;
}

.trust__bar-caption {
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;   /* 13px label */
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.trust__points {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.trust__point {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.trust__icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-accent);
}

.trust__body {
  min-width: 0;
}

.trust__title {
  font-family: var(--font-stack);   /* card titles stay sans */
  font-size: 1.0625rem;
  font-weight: 500;
  margin: 0 0 0.25rem;
  line-height: 1.35;
}

.trust__text {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

/* --- Journey steps (home strip + how-it-works) ----------------------------- */
.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.journey__step--numbered {
  display: flex;
  gap: var(--space-2);
  max-width: 42.5rem;
}

.journey__number {
  margin: 0;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-accent);
  font-weight: 600;
}

.journey__heading {
  font-family: var(--font-stack);   /* card titles stay sans */
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--space-1);
}

.journey__text {
  margin: 0;
  color: var(--color-ink-soft);
}

.journey__link {
  margin: var(--space-1) 0 0;
}

/* how-it-works: give each numbered step calm breathing room */
.journey__step--numbered + .journey__step--numbered {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-3);
}

/* --- Collapsible steps (how-it-works) --------------------------------------- */
/* Only the numbered titles show on arrival; each row opens on demand.
   Native details/summary, so it works without script. */
.steps {
  max-width: 48rem;
  border-top: 1px solid var(--color-line);
}

.steps__item {
  border-bottom: 1px solid var(--color-line);
}

.steps__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-1);
}

.steps__summary::-webkit-details-marker {
  display: none;
}

.steps__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: auto;
  border-right: 2px solid var(--color-ink-soft);
  border-bottom: 2px solid var(--color-ink-soft);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.steps__item[open] > .steps__summary::after {
  transform: rotate(225deg);
}

.steps__summary:hover .steps__heading,
.steps__item[open] > .steps__summary .steps__heading {
  color: var(--color-accent);
}

.steps__summary:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.steps__number {
  flex: 0 0 4rem;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.steps__heading {
  font-family: var(--font-stack);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  transition: color 0.15s ease;
}

.steps__body {
  padding: 0 var(--space-1) var(--space-3) calc(4rem + var(--space-3) + var(--space-1));
  max-width: 42.5rem;
  box-sizing: content-box;
}

.steps__body .mflow {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .steps__summary {
    gap: var(--space-2);
    padding: var(--space-2) 0;
  }

  .steps__number {
    flex-basis: 2.75rem;
    font-size: 1.75rem;
  }

  .steps__heading {
    font-size: 1.05rem;
  }

  .steps__body {
    padding: 0 0 var(--space-2) 0;
  }
}

/* --- Milestone flow visual -------------------------------------------------- */
.mflow {
  margin: var(--space-3) 0;
}

.mflow__bar {
  display: flex;
  gap: 3px;
  margin-bottom: var(--space-2);
}

.mflow__segment {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: 4px;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.mflow__segment:nth-child(2),
.mflow__segment:nth-child(3) {
  opacity: 0.85;
}

.mflow__percent {
  font-size: 0.85rem;
  font-weight: 600;
}

.mflow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.mflow__step {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-2);
}

.mflow__step-label {
  margin: 0 0 var(--space-1);
  font-size: 0.8125rem;   /* 13px label */
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.mflow__step-heading {
  font-family: var(--font-stack);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--space-1);
}

.mflow__step-text {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.mflow__note {
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  border-left: 3px solid var(--color-success);
  background: var(--color-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 42.5rem;
}

/* --- Payment bar segments as buttons (includes/milestone_bar.html) --------- */
/* Shares the .trust__segment / .mflow__segment look; adds the pressed
   state and the detail panel a segment opens. */
.mbar__segment {
  font: inherit;
  border: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

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

.mbar__bar .mbar__segment[aria-expanded="true"],
.mbar__bar:hover .mbar__segment[aria-expanded="true"] {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--color-gold);
}

.mbar__hint {
  display: none;
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;   /* 13px label */
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.mbar--js .mbar__hint {
  display: block;
}

.mbar__panel {
  margin-top: var(--space-2);
  padding: var(--space-2);
  max-width: 42.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.mbar__label {
  margin: 0 0 var(--space-1);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.mbar__heading {
  font-family: var(--font-stack);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--space-2);
}

.mbar__rows {
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.mbar__row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 11rem) 1fr;
  gap: 0.125rem var(--space-2);
  align-items: start;
}

.mbar__row dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  padding-top: 0.1rem;
}

.mbar__row dd {
  margin: 0;
  font-size: 0.95rem;
}

/* The mflow bar sits above its step cards; give the open panel the same gap. */
.mflow .mbar {
  margin-bottom: var(--space-2);
}

@media (max-width: 480px) {
  .mbar__row {
    grid-template-columns: 1fr;
  }
}

/* --- Pricing page ----------------------------------------------------------- */
/* Legal pages (privacy policy, terms): one editorial column, numbered
   sections, calm hierarchy — read on a phone, never a wall of text. */
.legal {
  max-width: 42.5rem; /* 680px editorial text width (design doc A4) */
  margin: 0 auto;
}

.legal__meta {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-soft);
  font-size: 0.9rem;
}

.legal__section {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.legal__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 var(--space-1);
}

.legal__section p {
  margin: 0 0 var(--space-2);
}

.legal__section ul {
  margin: 0 0 var(--space-2);
  padding-left: 1.25rem;
}

.legal__section li {
  margin-bottom: 0.4rem;
}

.legal__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
}

.pricing-section {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.pricing-section__heading {
  font-size: 1.375rem;
  margin: 0 0 var(--space-2);
}

.pricing-section__text {
  max-width: 42.5rem;
  margin: 0 0 var(--space-2);
}

.packages {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.package {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.package__heading {
  font-family: var(--font-stack);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--space-1);
}

.package__text {
  margin: 0;
  color: var(--color-ink-soft);
}

.rev-rights {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.rev-right {
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-2) var(--space-3);
  max-width: 42.5rem;
}

.rev-right__heading {
  font-family: var(--font-stack);
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 var(--space-1);
}

.rev-right__text {
  margin: 0;
  color: var(--color-ink-soft);
}

/* --- Page-level call to action ------------------------------------------------ */
.page-cta {
  text-align: center;
  padding: var(--space-4) var(--space-2);
  margin-top: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.page-cta__heading {
  font-size: 1.375rem;
  margin: 0 0 var(--space-1);
}

.page-cta__text {
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
}

/* --- Style discovery entry ---------------------------------------------------- */
.discovery-explain {
  display: grid;
  gap: var(--space-2);
}

.discovery-explain__item {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.discovery-explain__heading {
  font-family: var(--font-stack);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--space-1);
}

.discovery-explain__text {
  margin: 0;
  color: var(--color-ink-soft);
}

/* --- Designed empty states (browse shell) -------------------------------------- */
.empty-state {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  text-align: center;
}

.empty-state__heading {
  font-size: 1.375rem;
  margin: 0 0 var(--space-1);
}

.empty-state__text {
  color: var(--color-ink-soft);
  max-width: 36rem;
  margin: 0 auto var(--space-3);
}

.empty-state__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* --- Designer profile shell ------------------------------------------------------ */
.profile-shell {
  display: grid;
  gap: var(--space-2);
}

.profile-shell__section {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.profile-shell__heading {
  font-family: var(--font-stack);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--space-1);
}

.profile-shell__text {
  margin: 0;
  color: var(--color-ink-soft);
}

/* ==========================================================================
   DESIGNER PROFILE (Stage 7) — mobile-first, editorial but structured
   ========================================================================== */

/* --- Header: identity, badges, rating, quick facts ------------------------ */
.dp-header {
  padding: var(--space-4) 0 var(--space-3);
}

.dp-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

/* Verification labels: small, neutral, subtle check (design doc A6). */
.vbadge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
}

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

/* Founding badge: muted gold, same small scale as the verification
   labels — prestigious but never louder than the ratings (brief rule). */
.fbadge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-gold);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-gold);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
}

.dp-header__name {
  font-size: 1.75rem;
  margin: 0 0 var(--space-1);
}

.dp-header__meta {
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
}

/* The quality signal — deliberately more prominent than any badge. */
.dp-header__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.15rem;
  margin: 0 0 var(--space-3);
}

.dp-header__stars {
  color: var(--color-gold);
}

.dp-header__score {
  font-weight: 700;
}

.dp-header__rating-link {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dp-header__rating--none {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.dp-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-2);
}

.dp-facts__label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 0.2rem;
}

.dp-facts__value {
  margin: 0;
  font-weight: 500;
}

.dp-facts__link {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  margin-top: 0.2rem;
}

.dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  margin-right: 0.4rem;
  vertical-align: middle;
  background: var(--color-ink-soft);
}

.dot--available { background: var(--color-success); }
.dot--limited { background: var(--color-warning); }
.dot--unavailable { background: var(--color-ink-soft); }

/* --- Profile sections ------------------------------------------------------ */
.dp-section {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.dp-section__heading {
  font-size: 1.375rem;
  margin: 0 0 var(--space-2);
}

.dp-section__intro {
  max-width: 42.5rem;
  margin: 0 0 var(--space-2);
}

.dp-section__note {
  max-width: 42.5rem;
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  border-left: 3px solid var(--color-success);
  background: var(--color-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.dp-bio {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 42.5rem;
  margin: 0;
}

.dp-empty {
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 42.5rem;
}

/* --- Style tags ------------------------------------------------------------ */
.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
}

.tag {
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.9rem;
  padding: 0.25rem 0.8rem;
}

.tag-list--compact .tag {
  font-size: 0.8125rem;
  padding: 0.15rem 0.65rem;
  color: var(--color-ink-soft);
}

/* --- Portfolio: images breathe, context sits below (design doc A5) --------- */
.pf-project {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 var(--space-3);
}

.pf-project__images {
  display: grid;
  gap: 3px;
}

.pf-project__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-bg); /* soft neutral placeholder while loading */
}

.pf-project__no-images {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-bg);
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-line);
}

.pf-project__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pf-project__title {
  font-family: var(--font-stack); /* card titles stay sans */
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0;
}

.pf-project__meta {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.pf-project__scope {
  margin: 0;
  font-size: 0.95rem;
}

.pf-project__scope-label {
  font-weight: 600;
}

.pf-project__text {
  margin: 0;
  color: var(--color-ink-soft);
}

.pf-project__note {
  margin: var(--space-1) 0 0;
  padding: var(--space-1) var(--space-2);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
}

.pf-project__note-label {
  font-weight: 600;
}

/* --- Packages: reuse Stage 5 .packages/.package, add price rows ------------ */
.package__price {
  margin: 0 0 var(--space-1);
  font-size: 1.05rem;
  font-weight: 600;
}

.package__revisions {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
}

/* --- Reviews, category ratings, reliability -------------------------------- */
.dp-trust {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dp-trust__heading {
  font-family: var(--font-stack);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--space-2);
}

.dp-trust__heading--reviews {
  margin-top: var(--space-2);
}

.cat-ratings {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 30rem;
}

.cat-rating {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.cat-rating__label {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.cat-rating__value {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.9rem;
  font-weight: 600;
}

.cat-rating__bar {
  flex: 1;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--color-line);
  overflow: hidden;
}

.cat-rating__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
}

.reliability {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 30rem;
}

.reliability__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: var(--space-1);
}

.reliability__label {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.reliability__value {
  margin: 0;
  font-weight: 600;
}

.review {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
  max-width: 42.5rem;
}

.review__rating {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

.review__rating span {
  color: var(--color-gold);
}

.review__text {
  margin: 0 0 var(--space-1);
}

.review__meta {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.85rem;
}

/* --- Public pages: enhance upward (tablet / desktop) --------------------------- */
@media (min-width: 48rem) {
  .site-header__site-nav {
    order: 0;
    width: auto;
    gap: var(--space-2);
  }

  .hero__actions {
    flex-direction: row;
    justify-content: center;
  }

  .page-intro__heading {
    font-size: 2.5rem;      /* 40px desktop page title */
  }

  .home-section__heading,
  .pricing-section__heading,
  .page-cta__heading,
  .empty-state__heading {
    font-size: 1.75rem;     /* 28px desktop section heading */
  }

  .journey--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .trust__points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .trust__point {
    flex-direction: column;
    padding: var(--space-3);
  }

  .mflow__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discovery-explain {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .empty-state__actions {
    flex-direction: row;
    justify-content: center;
  }

  /* Stage 7 — designer profile on wide screens */
  .dp-header__name {
    font-size: 2.5rem;
  }

  .dp-section__heading {
    font-size: 1.75rem;
  }

  .dp-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: var(--space-3);
  }

  .pf-project__images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pf-project__images > .pf-project__image:only-child {
    grid-column: span 2;
    aspect-ratio: 3 / 2;
  }

  .dp-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   BROWSE, SEARCH & FILTERS (Stage 8) — mobile-first grid of designer cards
   ========================================================================== */

/* --- Filter panel: a quiet collapsible, no JavaScript ---------------------- */
.filters {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}

.filters__summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  font-weight: 500;
  color: var(--color-ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.filters__summary::-webkit-details-marker {
  display: none;
}

.filters__summary::after {
  content: "▾";
  color: var(--color-ink-soft);
  margin-left: auto;
  transition: transform 0.15s ease;
}

.filters[open] > .filters__summary::after {
  transform: rotate(180deg);
}

.filters__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: 0.8125rem;
  font-weight: 500;
}

.filters__form {
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid var(--color-line);
}

/* Each group is its own quiet band: a small title, then an even grid.
   A hairline between bands is what separates them; nothing else competes. */
.filters__group {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

.filters__group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
}

.filters__group-title {
  margin: 0;
  font-family: var(--font-stack);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-ink);
}

.filters__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
}

.filters__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  margin-bottom: 0.25rem;
}

/* --- Price range sliders in the filter panel ---------------------------- */
.rslider {
  position: relative;
  height: 28px;
  margin: 0.25rem 0 0.5rem;
}

.rslider__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--color-line);
  border-radius: 999px;
}

.rslider__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--color-accent);
  border-radius: 999px;
}

/* Two native range inputs stacked on one track: the inputs themselves
   ignore the pointer, only their thumbs catch it. */
.rslider__range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  pointer-events: none;
}

.rslider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.rslider__range::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.rslider__range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.rslider__inputs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.rslider__inputs input {
  min-width: 0;
  flex: 1;
}

.rslider__dash {
  color: var(--color-ink-soft);
}

.filters__field select,
.filters__field input[type="number"] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.9375rem;
}

.filters__field select:focus,
.filters__field input[type="number"]:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* The one yes/no filter sits in the group head as a pill toggle. */
.filters__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.filters__toggle:hover,
.filters__toggle:has(input:checked) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filters__toggle input {
  accent-color: var(--color-accent);
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
}

.filters__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.filters__actions .btn {
  width: 100%;
}

.filters__clear {
  color: var(--color-accent);
  text-decoration: none;
}

.filters__clear:hover {
  text-decoration: underline;
}

.browse-count {
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  margin: 0 0 var(--space-2);
}

/* --- Designer cards: the layout Stage 11 reuses ---------------------------- */
.dcard-grid {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.dcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-ink);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.dcard:hover {
  border-color: var(--color-ink-soft);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* The photography carries the card — consistent 3:2, gentle crop. */
.dcard__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-bg);
}

.dcard__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  text-align: center;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
}

/* Photo carousel: the track scrolls natively with snap points (swipe on
   touch); the arrows and dots are layered over it. */
.dcard__media {
  position: relative;
}

.dcard__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dcard__track::-webkit-scrollbar {
  display: none;
}

.dcard__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: block;
}

.dcard__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.dcard__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-left: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
}

.dcard__arrow--prev {
  left: var(--space-1);
}

.dcard__arrow--prev::before {
  transform: translate(-30%, -50%) rotate(45deg);
}

.dcard__arrow--next {
  right: var(--space-1);
}

.dcard__arrow--next::before {
  transform: translate(-70%, -50%) rotate(225deg);
}

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

.dcard__arrow:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Arrows show on hover where a pointer exists; always on touch screens. */
.dcard__media:hover .dcard__arrow {
  opacity: 1;
}

@media (hover: none) {
  .dcard__arrow {
    opacity: 1;
  }
}

.dcard__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-1);
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  pointer-events: none;
}

.dcard__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease;
}

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

.dcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--space-2) var(--space-2) var(--space-3);
  text-decoration: none;
  color: inherit;
}

.dcard__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.dcard__name {
  font-family: var(--font-stack);
  font-size: 1.25rem;   /* card title, sans 500 per the design doc */
  font-weight: 500;
  line-height: 1.25;
}

.dcard__meta {
  color: var(--color-ink-soft);
  font-size: 0.875rem;
}

/* The quality signal — always more prominent than any badge. */
.dcard__rating {
  font-size: 1rem;
}

.dcard__rating-count {
  color: var(--color-ink-soft);
  font-size: 0.875rem;
}

.dcard__trust {
  color: var(--color-ink-soft);
  font-size: 0.875rem;
}

.dcard__price {
  font-size: 0.9375rem;
  font-weight: 500;
  margin-top: 0.2rem;
}

/* Stage 11 slot: the explainable-recommendation reason line. */
.dcard__intro {
  font-size: 0.8125rem;
  color: var(--color-success);
  font-weight: 500;
}

.dcard__reason {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: 0.875rem;
}

@media (min-width: 48rem) {
  .filters__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filters__actions .btn {
    width: auto;
  }

  .dcard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .filters__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .filters__grid--ranges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dcard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Stage 9 — visual taste discovery (mobile-first, like all public pages)
   ========================================================================== */

.taste {
  max-width: 64rem;
  margin: 0 auto;
}

.taste--narrow {
  max-width: 30rem;
  text-align: center;
  padding: var(--space-3) 0;
}

.taste__head {
  margin-bottom: var(--space-3);
}

.taste__progress {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-1);
}

.taste__bar {
  height: 3px;
  border-radius: 999px;
  background: var(--color-line);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.taste__bar-fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.taste__heading {
  font-size: 1.75rem;
  margin: 0 0 var(--space-1);
}

.taste__hint {
  color: var(--color-ink-soft);
  margin: 0;
}

/* --- Image rounds: 2-column grid on phones (Test_Design reference) -------- */
.taste-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-bottom: var(--space-2);
}

.ttile {
  position: relative;
}

/* Checkboxes stay in the accessibility tree but out of sight. */
.ttile__pick,
.ttile__save-input,
.swatch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ttile__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-line); /* soft placeholder while loading (A5) */
}

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

.ttile__pick:checked ~ .ttile__media {
  box-shadow: inset 0 0 0 3px var(--color-accent);
}

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

.ttile__check {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  display: none;
  align-items: center;
  justify-content: center;
}

.ttile__pick:checked ~ .ttile__media .ttile__check {
  display: flex;
}

/* The optional save-to-moods control: quiet until used. */
.ttile__save {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ttile__save svg path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2;
}

.ttile__save-input:checked ~ .ttile__save {
  color: var(--color-accent);
}

.ttile__save-input:checked ~ .ttile__save svg path {
  fill: currentColor;
}

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

.taste__saved-note {
  font-size: 0.875rem;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
}

/* Continue stays reachable while scrolling the grid (Test_Design ref). */
.taste__continue {
  position: sticky;
  bottom: 0.75rem;
  display: block;
  width: 100%;
  padding: 1rem;
  box-shadow: 0 4px 16px rgba(28, 26, 23, 0.18);
}

.taste__continue:disabled {
  background: var(--color-line);
  border-color: var(--color-line);
  color: var(--color-ink-soft);
  cursor: not-allowed;
  box-shadow: none;
}

.taste__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

/* The verdict block on the completion page — explainable, never jargon-first. */
.taste-result {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-2);
  margin-top: var(--space-2);
}

.taste-result__eyebrow {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-1);
}

.taste-result__verdict {
  font-size: 1.125rem;
  margin: 0 0 var(--space-1);
}

.taste-result__verdict strong {
  color: var(--color-accent);
}

.taste-result__mix {
  justify-content: center;
  margin-bottom: var(--space-2);
}

.taste-result__reason {
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
}

.taste__retake {
  margin-top: var(--space-3);
  font-size: 0.9375rem;
}

/* --- Texture swatches (materials step): visual first, tiny caption -------- */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-bottom: var(--space-2);
}

.swatch {
  position: relative;
}

.swatch__tile {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}

.swatch__input:checked ~ .swatch__tile {
  box-shadow: inset 0 0 0 3px var(--color-accent);
}

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

.swatch__texture {
  display: block;
  aspect-ratio: 5 / 3;
}

.swatch__check {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  display: none;
  align-items: center;
  justify-content: center;
}

.swatch__input:checked ~ .swatch__tile .swatch__check {
  display: flex;
}

.swatch__label {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}

/* CSS-drawn textures — no words needed to choose. */
.swatch__texture--wood {
  background:
    repeating-linear-gradient(93deg,
      #a5794f 0, #a5794f 7px, #976c44 7px, #976c44 11px,
      #ad8258 11px, #ad8258 19px, #8f653e 19px, #8f653e 22px);
}

.swatch__texture--stone {
  background:
    linear-gradient(112deg, transparent 42%, rgba(140, 138, 134, 0.5) 43.5%, transparent 45%),
    linear-gradient(100deg, transparent 66%, rgba(140, 138, 134, 0.35) 68%, transparent 70.5%),
    linear-gradient(125deg, transparent 20%, rgba(158, 152, 146, 0.3) 21%, transparent 23%),
    linear-gradient(160deg, #efedea, #dcd8d2 55%, #e8e5e0);
}

.swatch__texture--linen {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.16) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(120, 108, 92, 0.14) 0, rgba(120, 108, 92, 0.14) 1px, transparent 1px, transparent 3px),
    #d9cfbe;
}

.swatch__texture--velvet {
  background:
    radial-gradient(120% 90% at 25% 15%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(110% 80% at 80% 90%, rgba(0, 0, 0, 0.3), transparent 60%),
    #4a3a52;
}

.swatch__texture--metal {
  background:
    repeating-linear-gradient(90deg,
      #c9c9c9 0, #d8d8d8 1px, #c2c2c2 2px, #cfcfcf 3px),
    linear-gradient(90deg, #bdbdbd, #e2e2e2 45%, #b5b5b5);
  background-blend-mode: overlay;
}

.swatch__texture--concrete {
  background:
    radial-gradient(28% 38% at 68% 28%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(32% 42% at 22% 68%, rgba(0, 0, 0, 0.08), transparent),
    radial-gradient(20% 26% at 45% 45%, rgba(0, 0, 0, 0.05), transparent),
    #b3b0ab;
}

.swatch__texture--rattan {
  background:
    repeating-linear-gradient(45deg, rgba(122, 92, 52, 0.35) 0, rgba(122, 92, 52, 0.35) 3px, transparent 3px, transparent 9px),
    repeating-linear-gradient(-45deg, rgba(122, 92, 52, 0.35) 0, rgba(122, 92, 52, 0.35) 3px, transparent 3px, transparent 9px),
    #cfa86a;
}

.swatch__texture--brass {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.35) 8%, transparent 30%),
    linear-gradient(160deg, #b08d4f, #8c6b34 55%, #a8874b);
}

/* --- Taste discovery: enhance upward (tablet / desktop) -------------------- */
@media (min-width: 48rem) {
  .taste__heading {
    font-size: 2.25rem;
  }

  .taste-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .taste__continue {
    position: static;
    display: inline-block;
    width: auto;
    padding: 0.65rem 2.5rem;
    box-shadow: none;
  }

  .taste__actions {
    flex-direction: row;
    justify-content: center;
  }

  .swatch-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
  }
}

/* ==========================================================================
   Stage 10 — project brief questionnaire
   Shares the taste flow's shell (progress bar, sticky continue) so Stages
   9 and 10 read as one journey. Questions answer by radio chips, not
   dropdowns — one tap per answer, no corporate-form feel.
   ========================================================================== */
.taste--form {
  max-width: 34rem;
}

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

.brief-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.brief-field__label {
  display: block;
  padding: 0;
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.brief-field .form-field__help {
  margin-bottom: 0.5rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* The radio stays focusable but out of sight (same pattern as .ttile). */
.chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.chip label {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target */
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.95rem;
  cursor: pointer;
}

.chip input:checked + label {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.chip input:focus-visible + label {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brief-back {
  margin: 0;
  text-align: center;
}

/* --- Summary: one row per answer, quiet edit links ------------------------ */
.brief-summary {
  margin: 0 0 var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 0 var(--space-2);
}

.brief-summary__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--space-2);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-line);
}

.brief-summary__row:last-child {
  border-bottom: 0;
}

.brief-summary__row dt {
  grid-column: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
}

.brief-summary__row dd {
  grid-column: 1;
  margin: 0;
}

.brief-summary__row .text-link {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 0.9rem;
}

/* ==========================================================================
   Stage 11 — matching & explainable recommendations
   ========================================================================== */

/* Nudge under the intro when the client has no style profile yet. */
.match-hint {
  max-width: 40rem;
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

/* ==========================================================================
   Stage 12 — consultation booking
   ========================================================================== */

/* Status dot tones (design doc A6: text + colour dot, muted, never loud). */
.dot--tone-confirmed { background: var(--color-success); }
.dot--tone-pending { background: var(--color-warning); }
.dot--tone-done { background: var(--color-ink-soft); }
.dot--tone-problem { background: var(--color-error); }

/* Destructive action (design doc A6): terracotta text, thin border. */
.btn--destructive {
  background: var(--color-surface);
  border: 1px solid var(--color-error);
  color: var(--color-error);
}

/* --- Booking screen -------------------------------------------------------- */
.booking-intro {
  max-width: 42rem;
  margin-bottom: var(--space-3);
}

.booking-intro__designer {
  margin: 0;
  font-size: 1.375rem;
}

.booking-intro__meta {
  margin: 0.25rem 0 var(--space-2);
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
}

.booking-intro__promise {
  margin: 0 0 var(--space-1);
}

.booking-intro__privacy {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.875rem;
}

.booking-form {
  max-width: 42rem;
}

.booking-form__heading {
  margin: 0 0 var(--space-1);
  font-size: 1.125rem;
}

.booking-form__hint {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
}

/* --- Booking calendar: month grid, tappable open days ------------------- */
.booking-cal {
  margin: 0 0 var(--space-3);
}

.booking-cal__month {
  margin: 0 0 var(--space-2);
}

.booking-cal__month-name {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

.booking-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
  max-width: 26rem;
}

.booking-cal__weekday {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-ink-soft);
  padding: 0.25rem 0;
}

.booking-cal__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;              /* touch target */
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  color: var(--color-ink-soft);
}

.booking-cal__day--outside .booking-cal__num {
  opacity: 0.35;
}

.booking-cal__day--open {
  border-color: var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
}

.booking-cal__day--open:hover {
  border-color: var(--color-accent);
}

.booking-cal__day--active,
.booking-cal__day--active:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.booking-cal__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 2px;
}

.booking-cal__day--active .booking-cal__dot {
  background: var(--color-accent-ink);
}

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

.booking-cal__hint {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.slot-day {
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
}

.slot-day__date {
  padding: 0;
  margin-bottom: var(--space-1);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.slot-day__times {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* A time pill: the radio stays accessible but invisible; the checked
   state paints the pill. Works entirely without JavaScript. */
.slot-option {
  position: relative;
  cursor: pointer;
}

.slot-option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.slot-option__time {
  display: inline-block;
  min-width: 4.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  text-align: center;
  font-size: 0.9375rem;
}

.slot-option__input:checked + .slot-option__time {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.slot-option__input:focus-visible + .slot-option__time {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.booking-form__submit {
  margin-top: var(--space-1);
}

.booking-form__note {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-soft);
  font-size: 0.875rem;
}

/* --- Confirmation / status page -------------------------------------------- */
.consultation-card {
  max-width: 42rem;
}

.consultation-card__status {
  margin: 0 0 var(--space-1);
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.consultation-card__designer {
  margin: 0;
  font-size: 1.375rem;
}

.consultation-card__designer-link {
  color: inherit;
}

.consultation-card__meta {
  margin: 0.25rem 0 var(--space-2);
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
}

.consultation-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

.consultation-facts__label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.consultation-facts__value {
  margin: 0.25rem 0 0;
}

.meeting-link {
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
  margin-bottom: var(--space-2);
}

.meeting-link__label {
  margin: 0 0 var(--space-1);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.meeting-link__url {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
  word-break: break-all;
}

.meeting-link__note {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.consultation-card__next {
  margin: 0;
}

.consultation-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* --- Dashboard consultation list ------------------------------------------- */
.consultation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.consultation-list__item + .consultation-list__item {
  border-top: 1px solid var(--color-line);
}

.consultation-list__link {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--space-1) 0;
  color: inherit;
}

.consultation-list__designer {
  font-weight: 500;
}

.consultation-list__when,
.consultation-list__status {
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

/* Client layout is desktop-first: adapt the booking screen downward. */
@media (max-width: 640px) {
  .consultation-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Stage 13 — proposal & digital agreement
   ========================================================================== */

/* --- Proposal view (client workspace: desktop-first, adapts down) ---------- */
.proposal-card {
  max-width: 52rem;
}

.proposal-card__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
}

.proposal-card__designer {
  margin: 0;
  font-size: 1.375rem;
}

.proposal-card__designer-link {
  color: inherit;
}

.proposal-card__meta {
  margin: 0.25rem 0 var(--space-3);
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
}

.proposal-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: var(--color-bg);
}

.proposal-facts__item {
  margin: 0;
}

.proposal-facts__label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.proposal-facts__value {
  margin: 0.25rem 0 0;
}

.proposal-facts__value--price {
  font-size: 1.25rem;
  font-weight: 500;
}

.proposal-facts__note {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.proposal-block {
  margin-bottom: var(--space-3);
}

.proposal-block__heading {
  margin: 0 0 var(--space-1);
  font-size: 1.125rem;
}

.proposal-block__hint {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
}

.proposal-block__text {
  margin: 0;
  max-width: 42.5rem;
}

.proposal-block__text--muted {
  color: var(--color-ink-soft);
}

/* One milestone of the offer: header line + a small facts grid. */
.milestone-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: milestone;
}

.milestone-row {
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: var(--color-surface);
}

.milestone-row + .milestone-row {
  margin-top: var(--space-1);
}

.milestone-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.milestone-row__stage {
  font-weight: 500;
}

.milestone-row__stage::before {
  counter-increment: milestone;
  content: counter(milestone) ". ";
  color: var(--color-ink-soft);
}

.milestone-row__amount {
  white-space: nowrap;
  font-weight: 500;
}

.milestone-row__percent {
  color: var(--color-ink-soft);
  font-weight: 400;
  font-size: 0.875rem;
}

.milestone-row__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-1) var(--space-2);
  margin: 0;
}

.milestone-row__detail dt {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.milestone-row__detail dd {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
}

.proposal-card__next {
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
  max-width: 42.5rem;
}

.proposal-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* --- Digital agreement (platform rules) ------------------------------------ */
.agreement {
  max-width: 42.5rem;
}

.agreement__intro {
  margin: 0 0 var(--space-3);
}

.agreement__topic {
  margin-bottom: var(--space-3);
}

.agreement__heading {
  margin: 0 0 var(--space-1);
  font-size: 1.125rem;
}

.agreement__text {
  margin: 0;
}

.agreement__accepted {
  margin: 0 0 var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}

.agreement__form {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
  margin-bottom: var(--space-2);
}

.agreement__confirm {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: var(--space-2);
  cursor: pointer;
}

.agreement__confirm input {
  margin-top: 0.25rem;
  accent-color: var(--color-accent);
}

.agreement__note {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

/* --- Dashboard proposal list (same rhythm as the consultation list) -------- */
.proposal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.proposal-list__item + .proposal-list__item {
  border-top: 1px solid var(--color-line);
}

.proposal-list__link {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--space-1) 0;
  color: inherit;
}

.proposal-list__designer {
  font-weight: 500;
}

.proposal-list__summary,
.proposal-list__status {
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.proposal-list__action {
  font-size: 0.875rem;
  color: var(--color-warning);
}

/* Client layout is desktop-first: adapt the proposal screens downward. */
@media (max-width: 640px) {
  .proposal-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .milestone-row__head {
    flex-direction: column;
    gap: 0.125rem;
  }
}

/* ==========================================================================
   Stage 15 — project workspace
   ========================================================================== */

/* "Active" tone: normal, healthy progress — accent, not a warning. */
.dot--tone-active { background: var(--color-accent); }

/* --- Workspace header: who, what, and where the project stands ------------- */
.pw-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.pw-head__status {
  margin: 0 0 var(--space-1);
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.pw-head__designer {
  margin: 0 0 0.25rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.75rem;
}

.pw-head__designer-link {
  color: inherit;
}

.pw-head__meta {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
}

.pw-head__stage {
  text-align: right;
  flex-shrink: 0;
}

.pw-head__stage-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.pw-head__stage-value {
  margin: 0.25rem 0 0;
  font-size: 1.25rem;
  font-weight: 500;
}

.pw-head__stage-name {
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
}

.pw-head__stage-eta {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

/* The next-step banner reuses the dashboard component; just spacing here. */
.pw-next {
  margin-bottom: var(--space-3);
}

/* --- The lightweight summary: a quiet reading, not a banner ---------------- */
.pw-summary {
  max-width: 48rem;
  margin-bottom: var(--space-3);
}

.pw-summary__heading {
  margin: 0 0 var(--space-1);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.pw-summary__text {
  margin: 0 0 var(--space-1);
  line-height: 1.55;
}

.pw-summary__basis {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

/* --- Progress strip: the 15 / 35 / 35 / 15 flow, coloured by state --------- */
.pw-strip {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-3);
}

.pw-strip__segment {
  height: 2rem;
  border-radius: 4px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pw-strip__percent {
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

.pw-strip__segment--approved {
  background: var(--color-success);
  border-color: var(--color-success);
}

.pw-strip__segment--approved .pw-strip__percent {
  color: #fff;
}

.pw-strip__segment--current {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.pw-strip__segment--in_progress .pw-strip__percent,
.pw-strip__segment--in_revision .pw-strip__percent {
  color: var(--color-accent);
  font-weight: 500;
}

/* --- Milestone cards: name, %, status, deadline, payment, action ----------- */
.pw-milestones {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.pw-milestone {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}

.pw-milestone--current {
  border-left: 3px solid var(--color-accent);
}

.pw-milestone__head {
  margin-bottom: var(--space-1);
}

.pw-milestone__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.pw-milestone__name {
  margin: 0.125rem 0 0;
  font-size: 1.25rem;
  font-weight: 500;
}

.pw-milestone__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-1) var(--space-2);
  margin: 0;
}

.pw-milestone__fact dt {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.pw-milestone__fact dd {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
}

.pw-milestone__amount {
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.pw-milestone__deadline--pending {
  color: var(--color-warning);
}

.pw-milestone__deadline--problem {
  color: var(--color-error);
}

.pw-milestone__action {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-line);
  font-size: 0.9375rem;
}

.pw-milestone__action--muted {
  color: var(--color-ink-soft);
}

.pw-note {
  margin: 0 0 var(--space-2);
  max-width: 42.5rem;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.pw-footer-links {
  display: flex;
  gap: var(--space-2);
}

/* --- Stage 16: deliverables & approval, inside each milestone card -------- */
.pw-files {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.pw-files__head {
  margin-bottom: var(--space-1);
}

.pw-files__heading {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.pw-files__scope {
  margin: 0.375rem 0 0;
  max-width: 42.5rem;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.pw-files__scope-label {
  color: var(--color-ink);
  font-weight: 500;
}

.pw-files__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.pw-file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 0.625rem 0.875rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.pw-file__main {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.pw-file__name {
  font-size: 0.9375rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.pw-file__meta {
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

.pw-file__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.pw-files__empty {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.pw-approve {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.pw-approve__hint {
  margin: 0;
  max-width: 30rem;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.pw-files__approved {
  margin: var(--space-1) 0 0;
  font-size: 0.9375rem;
}

@media (max-width: 40rem) {
  .pw-file {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Stage D12: completion criteria, upload & delivery (designer) --------- */
.pw-criteria {
  margin-top: var(--space-2);
  padding: 0.75rem 0.875rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.pw-criteria__heading {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.pw-criteria__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
}

.pw-criteria__item {
  font-size: 0.8125rem;
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink-soft);
}

.pw-upload {
  margin-top: var(--space-2);
  padding: 0.875rem;
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  background: var(--color-bg);
  border: 1px dashed var(--color-line-strong, var(--color-line));
  border-radius: var(--radius);
}

.pw-upload__field {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  max-width: 30rem;
}

.pw-upload__label {
  font-size: 0.875rem;
  font-weight: 500;
}

.pw-upload__input {
  font-size: 0.875rem;
}

.pw-upload__title {
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.pw-upload__title:focus {
  outline: 2px solid var(--color-accent, currentColor);
  outline-offset: 1px;
}

.pw-upload__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

.pw-files__rule {
  margin: var(--space-2) 0 0;
  max-width: 42.5rem;
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

/* --- Dashboard project list (same rhythm as the proposal list) ------------- */
.project-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-list__item + .project-list__item {
  border-top: 1px solid var(--color-line);
}

.project-list__link {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--space-1) 0;
  color: inherit;
}

.project-list__designer {
  font-weight: 500;
}

.project-list__summary,
.project-list__status {
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.project-list__action {
  font-size: 0.875rem;
  color: var(--color-accent);
}

/* Workspace is desktop-first: adapt downward for narrow screens. */
@media (max-width: 640px) {
  .pw-head {
    flex-direction: column;
    gap: var(--space-2);
  }

  .pw-head__stage {
    text-align: left;
  }

  .pw-strip__percent {
    font-size: 0.6875rem;
  }

  .pw-milestone {
    padding: var(--space-2);
  }
}

/* ==========================================================================
   Stage 17 — in-platform chat
   ========================================================================== */

/* --- Workspace: the messages panel ---------------------------------------- */
.pw-chat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.pw-chat__heading {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pw-chat__badge {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
}

.pw-chat__preview {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
  max-width: 42.5rem;
}

.pw-chat__sender {
  color: var(--color-ink);
  font-weight: 500;
}

.pw-chat__time {
  white-space: nowrap;
}

/* --- The chat screen: thread + meetings, desktop-first ------------------- */
.chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--space-3);
  align-items: start;
}

.chat__thread {
  display: flex;
  flex-direction: column;
  min-height: 32rem;
  max-height: calc(100vh - 9rem);
}

.chat__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.chat__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
}

.chat__meta {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.chat__status {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-warning);
  text-align: right;
}

.chat__messages {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  flex: 1 1 auto;
  overflow-y: auto;
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.chat__empty {
  padding: var(--space-3) 0;
  text-align: left;
}

.chat__empty-heading {
  margin: 0 0 0.25rem;
  font-weight: 500;
}

.chat__empty-text {
  margin: 0;
  color: var(--color-ink-soft);
  max-width: 42.5rem;
}

.chat__typing {
  margin: 0;
  min-height: 1.4rem;
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

/* One message */
.msg {
  max-width: 80%;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  justify-self: start;
}

.msg--mine {
  justify-self: end;
  background: var(--color-bg);
  border-color: var(--color-accent);
}

.msg__meta {
  display: flex;
  gap: var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
  margin-bottom: 0.125rem;
}

.msg__sender {
  font-weight: 500;
  color: var(--color-ink);
}

.msg__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg__files {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

.msg__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.msg__image-link {
  flex-basis: 100%;
}

.msg__image {
  max-height: 18rem;
  width: auto;
  border-radius: 4px;
  border: 1px solid var(--color-line);
}

.msg__file-name {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.msg__file-meta {
  color: var(--color-ink-soft);
}

/* Composer */
.chat__composer {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: var(--space-1);
}

.chat__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.chat__composer textarea,
.meeting__form textarea,
.meeting__form input,
.meeting__form select {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  line-height: 1.5;
  padding: 0.65rem 0.85rem;
  resize: vertical;
}

.chat__composer textarea:focus,
.meeting__form textarea:focus,
.meeting__form input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.chat__file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.chat__file-list:empty {
  display: none;
}

.chat__file {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-bg);
}

.chat__file-remove {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0;
}

.chat__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.chat__attach {
  cursor: pointer;
}

.chat__attach input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.chat__attach:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.chat__hint {
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
  margin-left: auto;
}

.chat__note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
  max-width: 42.5rem;
}

/* --- Stage 17 add-on: the protection reminder in the thread ---------------
   Amber, never red (design doc A2: warnings read as protection reminders,
   not accusations). Quiet weight, no icon shouting at anyone, full width
   so it reads as a note about the project rather than a reply to a
   person. It never overlays anything and never covers the composer. */
.chat-reminder {
  list-style: none;
  margin: var(--space-1) 0;
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius);
  background: var(--color-bg);
  display: grid;
  gap: 0.375rem;
  max-width: 42.5rem;
}

.chat-reminder__label {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-warning);
}

.chat-reminder__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink);
}

.chat-reminder__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

/* Meetings & notes */
.chat__aside .panel {
  display: grid;
  gap: var(--space-2);
}

.chat__aside-heading {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
}

.meeting {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}

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

.meeting__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.meeting__title {
  margin: 0.125rem 0 0.25rem;
  font-size: 1rem;
  font-weight: 500;
}

.meeting__link {
  font-size: 0.875rem;
}

.meeting__notes {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.meeting__notes--empty {
  color: var(--color-ink-soft);
}

.meeting__edit {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.meeting__edit summary,
.meeting-add summary {
  cursor: pointer;
  list-style: none;
}

.meeting__edit summary::-webkit-details-marker,
.meeting-add summary::-webkit-details-marker {
  display: none;
}

.meeting__form {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.meeting-add summary {
  text-align: center;
}

/* Narrow screens: stack the meetings under the thread. 1180px, not 900px:
   the workspace keeps its 260px sidebar down to 48rem, so the chat's real
   container is the viewport minus ~308px — below this the thread column
   would collapse to nothing. */
@media (max-width: 1180px) {
  .chat {
    grid-template-columns: minmax(0, 1fr);
  }

  .chat__thread {
    max-height: none;
  }

  .chat__messages {
    max-height: 60vh;
  }

  .msg {
    max-width: 100%;
  }

  .pw-chat {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Stage 18: revision rounds, inside each milestone card ---------------- */
.pw-revisions {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.pw-revisions__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-1);
}

.pw-revisions__heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.pw-revisions__counter {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.pw-revisions__list {
  list-style: none;
  margin: 0 0 var(--space-1);
  padding: 0;
}

.pw-revision {
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-line);
}

.pw-revision__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--space-2);
}

.pw-revision__label {
  font-weight: 600;
}

.pw-revision__status,
.pw-revision__date {
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.pw-revision__note {
  margin: 0.35rem 0 0;
  max-width: 36rem;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.pw-revision__note-label {
  color: var(--color-ink);
  font-weight: 600;
}

.pw-revision__details {
  margin-top: 0.35rem;
  font-size: 0.9rem;
}

.pw-revision__details summary {
  cursor: pointer;
  color: var(--color-accent);
}

.pw-revision__feedback {
  margin: 0.5rem 0 0;
}

.pw-revision__feedback dt {
  font-weight: 600;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.pw-revision__feedback dd {
  margin: 0.15rem 0 0;
}

.pw-revisions__empty,
.pw-revisions__rules {
  margin: var(--space-1) 0 0;
  max-width: 36rem;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.pw-revisions__actions {
  margin-top: var(--space-1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.pw-revisions__next {
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.pw-revisions__minor {
  margin-left: auto;
}

/* --- Stage 18: the consolidated revision form page ----------------------- */
.rev-form {
  max-width: 46rem;
}

.rev-form__crumb {
  margin: 0 0 var(--space-1);
  font-size: 0.875rem;
}

.rev-form__stage {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.rev-form__heading {
  margin: 0.25rem 0 var(--space-1);
}

.rev-form__lead {
  margin: 0 0 var(--space-2);
  max-width: 40rem;
}

.rev-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
}

.rev-rules__heading {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.rev-rules__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.rev-form__scope {
  margin: 0 0 var(--space-2);
  font-size: 0.9rem;
}

.rev-form__scope-label {
  font-weight: 600;
}

.rev-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rev-form__form textarea {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  line-height: 1.5;
  padding: 0.65rem 0.85rem;
  resize: vertical;
}

.rev-form__form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.form-field--invalid textarea {
  border-color: #A8503C;
}

.rev-form__check-label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9375rem;
}

.rev-form__check-label input {
  margin-top: 0.3rem;
  flex-shrink: 0;
}

.rev-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

@media (max-width: 40rem) {
  .rev-rules {
    grid-template-columns: 1fr;
  }

  .pw-revisions__minor {
    margin-left: 0;
  }
}

/* --- Stage D14: the designer's side of revisions -------------------------- */
/* An open (incoming) revision record stands out from the history rows. */
.pw-revision--incoming {
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin-top: var(--space-1);
  background: var(--color-surface);
}

.rev-respond__request {
  margin-bottom: var(--space-2);
}

.rev-decision__choice {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}

.rev-decision__choice input {
  margin-top: 0.3rem;
  flex-shrink: 0;
}

/* Everything else comes from the shared .form-field input rule. */
.rev-decision-form input[type="number"] {
  width: 12rem;
}

/* The fee belongs to the paid add-on answer only. Where :has() is
   supported it appears when that answer is picked; elsewhere it simply
   stays visible, so no answer is ever unreachable. */
@supports selector(:has(*)) {
  .rev-decision-form:not(:has(input[value="paid"]:checked)) .rev-decision__fee {
    display: none;
  }
}

/* --- Stage 19: timeline notices in the workspace header ------------------- */
.pw-head__notice {
  margin: 0 0 var(--space-1);
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.pw-head__notice--pending { color: var(--color-warning); }
.pw-head__notice--problem { color: var(--color-error); }

.pw-overdue-flag {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--color-error);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--color-error);
}

.pw-milestone__extended {
  margin-left: var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

/* --- Stage 19: deadline extensions, inside each milestone card ----------- */
.pw-extensions {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.pw-extensions__heading {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
  font-weight: 600;
}

.pw-extensions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pw-extension {
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-line);
}

.pw-extension__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.pw-extension__label { font-weight: 600; }

.pw-extension__status,
.pw-extension__date {
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.pw-extension__dates {
  margin: 0.25rem 0 0;
  font-weight: 500;
}

.pw-extension__reason,
.pw-extension__note {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.pw-extension__reason-label {
  font-weight: 600;
  color: var(--color-ink);
}

.pw-extension__details { margin-top: 0.35rem; font-size: 0.9375rem; }
.pw-extension__details summary { cursor: pointer; color: var(--color-accent); }

.pw-extension__decide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
}

.pw-extension__decide .pw-extension__note { flex-basis: 100%; margin: 0; }
.pw-extension__form { margin: 0; }

.pw-extensions__rules {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

/* --- Stage 19: the timeline panel (pause / scope change / cancel) -------- */
.pw-timeline { margin-top: var(--space-3); }

.pw-timeline__heading {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
}

.pw-timeline__subheading {
  margin: var(--space-2) 0 var(--space-1);
  font-size: 1rem;
  font-weight: 600;
}

.pw-timeline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
}

.pw-timeline__rules {
  margin: var(--space-2) 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
  max-width: 60rem;
}

.tl-callout {
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius, 8px);
  background: var(--color-surface);
}

.tl-callout--pending { border-color: var(--color-warning); }

.tl-callout__heading {
  margin: 0 0 var(--space-1);
  font-size: 1.0625rem;
}

.tl-callout__text {
  margin: 0 0 var(--space-1);
  font-size: 0.9375rem;
}

.tl-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.tl-callout__actions form { margin: 0; }

.tl-outcome {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-outcome__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  padding: 0.35rem 0;
  border-top: 1px solid var(--color-line);
  font-size: 0.9375rem;
}

.tl-outcome__stage { font-weight: 600; }
.tl-outcome__text { color: var(--color-ink-soft); }

.tl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-item {
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-line);
}

.tl-item__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.tl-item__text { margin: 0.25rem 0 0; }

.tl-item__note {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.tl-history { padding-top: var(--space-1); }

/* --- Stage 19: the pause / cancel / scope change form pages --------------- */
.tl-form { max-width: 52rem; }

.tl-form__crumb { margin: 0 0 var(--space-2); font-size: 0.875rem; }

.tl-form__heading { margin: 0 0 var(--space-1); }

.tl-form__lead {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-soft);
}

.tl-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius, 8px);
}

.tl-rules__heading {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.tl-rules__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.tl-form__scope,
.tl-form__note {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.tl-form__scope-label { font-weight: 600; color: var(--color-ink); }

.tl-form__check-label {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  font-size: 0.9375rem;
}

.tl-form__check-label input { margin-top: 0.25rem; }

.tl-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
}

.cancel-outcome {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius, 8px);
}

.cancel-outcome__row {
  padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--color-line);
}

.cancel-outcome__row:first-child { border-top: 0; }

.cancel-outcome__stage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: baseline;
}

.cancel-outcome__label {
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

.cancel-outcome__name { font-weight: 600; }
.cancel-outcome__amount { margin-left: auto; color: var(--color-ink-soft); }

.cancel-outcome__text {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
}

.cancel-outcome__row--paid .cancel-outcome__text { color: var(--color-ink); }
.cancel-outcome__row--not_charged .cancel-outcome__text { color: var(--color-ink-soft); }


/* ---------------------------------------------------------------------------
   Stage 20 — disputes
   --------------------------------------------------------------------------- */

/* Inside the milestone card */
.pw-dispute {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius, 8px);
  background: var(--color-surface);
}

.pw-dispute--pending { border-color: var(--color-warning); }
.pw-dispute--problem { border-color: var(--color-error); }

.pw-dispute__heading {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.pw-dispute__status {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
}

.pw-dispute__outcome { font-weight: 600; }
.pw-dispute__date { color: var(--color-ink-soft); }

.pw-dispute__text {
  margin: 0 0 var(--space-1);
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.pw-dispute__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.pw-dispute__open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.pw-dispute__open-text {
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

/* Dispute pages */
.dsp-form__stage {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.dsp-steps {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  display: grid;
  gap: 0.4rem;
}

.dsp-evidence {
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius, 8px);
}

.dsp-evidence__heading {
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
}

.dsp-evidence__lead {
  margin: 0 0 var(--space-1);
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.dsp-evidence__list {
  margin: 0 0 var(--space-1);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  font-size: 0.9375rem;
}

.dsp-evidence__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  align-items: baseline;
}

.dsp-evidence__item { font-weight: 600; }
.dsp-evidence__count,
.dsp-evidence__detail { color: var(--color-ink-soft); }

.dsp-evidence__note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.dsp-form__form textarea,
.dsp-form__form input[type="file"] {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  line-height: 1.5;
  padding: 0.65rem 0.85rem;
}

.dsp-form__form textarea { resize: vertical; }

.dsp-form__form textarea:focus,
.dsp-form__form input[type="file"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.dsp-form__choices {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.dsp-form__choice {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.35rem 0;
  font-size: 0.9375rem;
}

.dsp-form__choice input { margin-top: 0.3rem; flex-shrink: 0; }

.dsp-status {
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-left-width: 4px;
  border-radius: var(--radius, 8px);
  background: var(--color-surface);
}

.dsp-status--pending { border-left-color: var(--color-warning); }
.dsp-status--active { border-left-color: var(--color-accent); }
.dsp-status--problem { border-left-color: var(--color-error); }
.dsp-status--confirmed { border-left-color: var(--color-success); }

.dsp-status__label {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}

.dsp-status__value {
  margin: 0 0 0.35rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.dsp-status__text {
  margin: 0 0 var(--space-1);
  font-size: 0.9375rem;
}

.dsp-status__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: 0.875rem;
}

.dsp-status__facts dt {
  color: var(--color-ink-soft);
}

.dsp-status__facts dd { margin: 0; }

.dsp-outcome__value {
  margin: 0 0 0.35rem;
  font-weight: 600;
  font-size: 1.0625rem;
}

.dsp-ask__question {
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-left: 3px solid var(--color-line);
  font-size: 0.9375rem;
}

.dsp-record { margin-bottom: var(--space-2); }

.dsp-record__heading {
  margin: 0 0 var(--space-1);
  font-size: 1.0625rem;
}

.dsp-entries {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-1);
}

.dsp-entry {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius, 8px);
  font-size: 0.9375rem;
}

.dsp-entry--client { background: var(--color-bg, var(--color-surface)); }

.dsp-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
}

.dsp-entry__label { font-weight: 600; }
.dsp-entry__time { color: var(--color-ink-soft); }

.dsp-entry__body,
.dsp-entry__detail,
.dsp-entry__file { margin: 0 0 0.35rem; }

.dsp-footnote {
  margin: var(--space-2) 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

/* ---------------------------------------------------------------------------
   Stage 20 add-on — help & support, and "Report an issue"

   Reuses the dispute status block (.dsp-status) so a report's status reads
   the same way a dispute's does. Everything else is its own, because a
   report is not a dispute and the two must not look interchangeable.
   --------------------------------------------------------------------------- */

.sup__heading {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
}

.sup__lead {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-soft);
  max-width: 60ch;
}

/* Two routes, side by side on desktop, stacked on mobile. Georgian runs
   long, so the columns are equal-width and the text wraps rather than
   the cards shrinking to fit. */
.sup-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.sup-route {
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.sup-route--report { border-left: 3px solid var(--color-accent); }

.sup-route__heading {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
  font-weight: 600;
}

.sup-route__text {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.sup-route__list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.9375rem;
}

.sup-route__note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.sup-route__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.sup-promise { margin-bottom: var(--space-3); }

.sup-promise__list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.sup-reports { margin-bottom: var(--space-2); }

.sup-reports__heading {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
  font-weight: 600;
}

.sup-reports__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-1);
}

.sup-report {
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.sup-report__meta {
  margin: 0 0 0.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
}

.sup-report__status { font-weight: 600; }
.sup-report__time { color: var(--color-ink-soft); }

.sup-report__reason {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
}

.sup-reports__empty { margin: 0; }

.sup__footnote {
  margin: var(--space-2) 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

/* --- The form ---------------------------------------------------------- */

.sup-form__form textarea,
.sup-form__form select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font-family: var(--font-stack);
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.sup-form__form textarea { resize: vertical; }

.sup-form__form textarea:focus,
.sup-form__form select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.sup-form__choices {
  display: grid;
  gap: 0.5rem;
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-2);
}

.sup-form__choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.sup-form__choice input { margin-top: 0.3rem; flex-shrink: 0; }

/* --- One report's status ----------------------------------------------- */

.sup-detail__record { margin-bottom: var(--space-3); }

.sup-detail__reason {
  margin: var(--space-1) 0 0.35rem;
  font-weight: 600;
}

.sup-detail__body {
  margin: 0;
  white-space: normal;
  color: var(--color-ink-soft);
}

/* --- The entry point in the project workspace -------------------------- */

.pw-report { margin-bottom: var(--space-3); }

.pw-report__heading {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
  font-weight: 600;
}

.pw-report__text {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
  max-width: 70ch;
}

.pw-report__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* --- Stage 21: closure, handover & reviews ------------------------------- */
.pw-closure {
  margin-bottom: var(--space-3);
  border-color: var(--color-success);
}

.pw-closure__status {
  margin: 0 0 var(--space-1);
  font-size: 0.875rem;
  color: var(--color-success);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pw-closure__heading {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
}

.pw-closure__text {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-soft);
}

.pw-review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.pw-review--open { border-color: var(--color-accent); }
.pw-review--waiting { border-color: var(--color-warning); }
.pw-review--published { border-color: var(--color-success); }

.pw-review__main { flex: 1 1 24rem; }

.pw-review__heading {
  margin: 0 0 0.25rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
}

.pw-review__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.pw-handover__heading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.pw-handover__count {
  font-family: var(--font-stack);
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.pw-handover__stage { margin-bottom: var(--space-2); }

.pw-handover__stage-name {
  margin: 0 0 var(--space-1);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

/* --- Stage D18: the designer's handover check and revealed reviews ------- */
.pw-handover--check {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.pw-handover__text {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
  max-width: 70ch;
}

.pw-handover__check-list {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}

.pw-handover__check-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1);
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.9375rem;
}

.pw-handover__check-item:last-child { border-bottom: 0; }
.pw-handover__check-count { color: var(--color-ink-soft); }

.pw-handover__check-item--empty .pw-handover__check-count {
  color: var(--color-warning);
}

.rv-revealed {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.rv-revealed__heading {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
}

.rv-revealed__meta {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
  max-width: 70ch;
}

.rv-revealed__link { margin: var(--space-2) 0 0; font-size: 0.9375rem; }

/* The review page */
.rv-page { max-width: 52rem; }
.rv-page__crumb { margin: 0 0 var(--space-2); font-size: 0.875rem; }
.rv-page__project { margin: 0 0 var(--space-1); font-size: 0.875rem; color: var(--color-ink-soft); }

.rv-page__heading {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 500;
}

.rv-page__lead { margin: 0 0 var(--space-2); color: var(--color-ink-soft); }
.rv-page__rule { margin: 0 0 var(--space-3); font-size: 0.9375rem; color: var(--color-ink-soft); }

.rv-window {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.rv-window--waiting { border-color: var(--color-warning); }

.rv-window__count {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-accent);
  min-width: 2.5rem;
  text-align: center;
}

.rv-window--waiting .rv-window__count { color: var(--color-warning); }
.rv-window__text { font-size: 0.9375rem; }

.rv-form__scale { margin: 0 0 var(--space-2); font-size: 0.875rem; color: var(--color-ink-soft); }

.rv-score {
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.rv-score__label { padding: 0; font-weight: 500; }

.rv-score__options { display: flex; gap: 0.375rem; }

.rv-score__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}

.rv-score__option input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.rv-score__option:has(input:checked) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.rv-score__option:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.rv-score--invalid .rv-score__option { border-color: var(--color-error); }
.rv-score .form-field__error { grid-column: 1 / -1; margin: 0; }

.rv-form__text textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font: inherit;
  background: var(--color-surface);
}

.rv-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.rv-summary {
  margin: var(--space-2) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-1) var(--space-2);
}

.rv-summary__row { display: flex; justify-content: space-between; gap: var(--space-1); margin: 0; }
.rv-summary__label { color: var(--color-ink-soft); }
.rv-summary__value { margin: 0; font-weight: 600; }

.rv-summary__text {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-line);
  color: var(--color-ink-soft);
}

/* Profile: the reputation metric and per-review scores */
.dp-reputation {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.dp-reputation__score {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-ink);
}

.dp-reputation__label { display: block; }

.review__scores {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.review__score {
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
}

/* 64rem, not 40rem: the label track has a hard 12rem floor, and inside the
   sidebar-reserving workspace the row overflows the page well above 40rem. */
@media (max-width: 64rem) {
  .rv-score { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .rv-score__option { width: 2.5rem; height: 2.5rem; }
}

/* --- Mobile sticky call to action ----------------------------------------
   A thumb-reachable shortcut to style discovery, phone only. It appears
   after the inline primary button has scrolled away, so the "one primary
   action per screen" rule still holds. Desktop never shows it. */
.mobile-cta {
  display: none;
}

@media (max-width: 48rem) {
  .mobile-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: var(--space-1) var(--space-2);
    /* Clears the home indicator on iPhone and Android gesture bars. */
    padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg);
    border-top: 1px solid var(--color-line);
  }

  .mobile-cta[hidden] {
    display: none;
  }

  .mobile-cta__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 100%;
    padding: 0.9rem 1.25rem;
    font-size: 1rem;
  }

  .mobile-cta__chevron {
    font-size: 1.25rem;
    line-height: 1;
  }

  /* The question launcher floats over the page end on every public page;
     give the footer room to clear it. */
  .layout-public .site-footer {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* On the pages that also carry the sticky bar (4.5rem tall) the launcher
     sits above the bar, so the footer must clear both — otherwise the
     closing note hides under them and the page looks cut off (owner
     report, 2026-09-13). */
  .layout-public.has-mobile-cta .site-footer {
    padding-bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   Stage D2 — professional entry & verification hub
   ========================================================================== */

/* The hub lists five steps — give it more room than the narrow auth card. */
.auth-card--roomy {
  max-width: 34rem;
}

/* Join page: required vs optional, side by side (stacked on mobile). */
.join-requirements {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

@media (min-width: 640px) {
  .join-requirements {
    grid-template-columns: 1fr 1fr;
  }
}

.join-requirements__col {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.join-requirements__heading {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
}

.join-requirements__list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-ink-soft);
}

/* Verification hub: the "where you stand" summary block. */
.verify-status {
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.verify-status__line {
  margin: 0;
  font-weight: 600;
}

.verify-status__next {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.verify-status__labels {
  margin-top: var(--space-1);
}

/* Required / Optional pill on each step heading. */
.verify-step__pill {
  display: inline-block;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-ink-soft);
  padding: 0.1rem 0.6rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.verify-step__pill--required {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.verify-step__text--problem {
  color: var(--color-error);
}

/* Document upload row: file picker + button, wrapping on narrow screens. */
.upload-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.upload-form input[type="file"] {
  flex: 1 1 14rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

/* Client / professional account-type switch on the auth screens (D2 add-on).
   Two equal option cards; the current side carries the accent. */
.account-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.account-switch__option {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
  color: var(--color-ink);
  min-height: 44px; /* touch target */
}

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

.account-switch__option--active {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.account-switch__title {
  font-weight: 600;
  font-size: 0.95rem;
}

.account-switch__option--active .account-switch__title {
  color: var(--color-accent);
}

.account-switch__desc {
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

/* Georgian labels run long — let the two options stack on narrow phones. */
@media (max-width: 420px) {
  .account-switch {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   DESIGNER DASHBOARD SHELL (Stage D3)
   ========================================================================== */

/* The profile & review status block must be the clearest element on the
   dashboard: full content width, a heavier accent edge, and a larger
   heading than anything below it. */
.next-step.profile-status {
  max-width: 64rem;
  border-left-width: 4px;
}

.profile-status .next-step__heading {
  font-size: 1.5rem;
}

/* Reviewer-requested changes, quoted inside the status block. */
.profile-status__requested {
  border-left: 2px solid var(--color-line);
  padding-left: var(--space-2);
  font-style: italic;
}

/* The five-step completion path under the status message. */
.status-steps {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap; /* Georgian labels run ~30% longer — wrap, never clip */
  gap: var(--space-1) var(--space-3);
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.status-steps__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.status-steps__item--done {
  color: var(--color-ink);
}

/* Four future sections in a 2×2 grid on desktop, one column on narrow
   screens (this rule is later in the file than the Stage 4 mobile
   override, so it re-declares its own). */
.dash-sections--designer {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 64rem;
}

@media (max-width: 48rem) {
  .dash-sections--designer {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Stage D4 — profile builder
   One column of quiet panels at editorial width. Choice groups answer by
   the Stage 10 chips, so picking a category or a style feels like the
   brief flow, not a corporate form.
   ========================================================================== */
.pedit {
  max-width: 46rem;
}

.pedit__intro {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-soft);
  max-width: 42.5rem; /* 680px editorial text width */
}

.pedit__intro .text-link {
  display: inline-block;
}

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

.pedit__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Legends inherit the section-heading look but need fieldset resets. */
.pedit__legend {
  padding: 0;
  margin: 0 0 var(--space-1);
}

.pedit__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (max-width: 34rem) {
  .pedit__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pedit__form textarea {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  line-height: 1.6;
  padding: 0.65rem 0.85rem;
  resize: vertical;
  width: 100%;
}

.pedit__form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.pedit__notes {
  margin-top: var(--space-1);
}

/* The accumulating image picker's chosen-file list (portfolio form). */
.pedit__filelist { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: 0.25rem; }
.pedit__filelist li { display: flex; align-items: center; gap: var(--space-1); font-size: 0.875rem; border: 1px solid var(--color-line); border-radius: 4px; padding: 0.35rem var(--space-1); background: var(--color-surface); }
.pedit__filelist li span { min-width: 0; overflow-wrap: anywhere; }
.pedit__fileremove { margin-left: auto; border: 0; background: none; color: var(--color-ink-soft); cursor: pointer; font-size: 0.875rem; padding: 0 0.25rem; }
.pedit__fileremove:hover { color: var(--color-problem, #a33); }

.pedit__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ==========================================================================
   STAGE D5 — portfolio builder (designer side) & richer portfolio display
   ========================================================================== */

/* --- Real project vs inspiration reference flag (both sides) -------------- */
.pf-flag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
}

.pf-flag--real {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
}

.pf-flag--inspiration {
  color: var(--color-ink-soft);
  background: var(--color-bg);
}

/* --- Before/after pairs & captioned figures (client profile) -------------- */
.pf-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.pf-pair__figure {
  margin: 0;
}

.pf-pair__label {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  padding: 0.2rem 0.6rem 0.4rem; /* caption below the image, never on it */
}

@media (min-width: 48rem) {
  .pf-project__images .pf-pair {
    grid-column: span 2; /* a pair owns the full row: before | after */
  }
}

/* --- Designer-side portfolio list ----------------------------------------- */
.pflist__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.pflist__top .btn {
  flex-shrink: 0;
}

.pflist__intro {
  margin: 0;
  color: var(--color-ink-soft);
  max-width: 46rem;
}

/* Stage D6 adds the import entry next to "Add a project". */
.pflist__top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.pflist__empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.pflist__empty-actions .btn {
  margin-top: 0;
}

.pflist__empty {
  text-align: center;
  padding: var(--space-4) var(--space-3);
}

.pflist__empty .btn {
  margin-top: var(--space-2);
}

.pfcard {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.pfcard__cover {
  width: 100%;
  height: 100%;
  min-height: 180px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-bg);
}

.pfcard__cover--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  border: 1px dashed var(--color-line);
}

.pfcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.pfcard__title {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0;
}

.pfcard__meta,
.pfcard__scope {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.pfcard__note {
  margin: 0;
  font-size: 0.95rem;
}

.pfcard__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-1);
}

@media (max-width: 48rem) {
  .pflist__top {
    flex-direction: column;
  }

  .pfcard {
    grid-template-columns: minmax(0, 1fr);
  }

  .pfcard__cover {
    min-height: 0;
  }
}

/* --- Image manager on the project edit screen ----------------------------- */
.pfimg__list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pfimg__item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-2);
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
}

.pfimg__thumbs {
  display: flex;
  gap: 3px;
}

.pfimg__figure {
  margin: 0;
  min-width: 0;
  flex: 1;
}

.pfimg__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-bg);
}

.pfimg__label {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  padding-top: 0.2rem;
}

.pfimg__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pfimg__form .btn {
  align-self: flex-start;
}

.pfimg__remove-before {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pfimg__delete {
  grid-column: 1 / -1;
  justify-self: end;
}

.pfimg__danger {
  margin-top: var(--space-3);
}

@media (max-width: 48rem) {
  .pfimg__item {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Danger actions (delete confirm & links) ------------------------------- */
.text-link--danger {
  color: var(--color-error);
}

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

.btn--danger:hover {
  background: #8c422f;
}

.pfdel__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Stacked radio chips (the D5 real-vs-inspiration choice reads better
   as full-width rows than side-by-side pills). */
.chips--stacked {
  flex-direction: column;
  align-items: stretch;
}

/* ==========================================================================
   STAGE D6 — portfolio import & AI auto-tagging (designer side)
   Same quiet editorial column as the D5 builder. Suggestions are marked
   with a small chip and always carry their reason in plain text.
   ========================================================================== */
.pimp {
  max-width: 52rem;
}

.pimp__intro {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-soft);
  max-width: 46rem;
}

.pimp__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.pimp__panel--resume {
  border-left: 3px solid var(--color-accent);
}

.pimp__resume-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pimp__resume-row p {
  margin: 0;
}

/* The provenance line every AI surface on the platform carries. */
.pimp__basis {
  margin: 0 0 var(--space-3);
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  max-width: 46rem;
}

.pimp__reason {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.pimp__ai-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* --- Social sources -------------------------------------------------------- */
.pimp__sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pimp__source {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0.5rem 0.85rem;
}

.pimp__source-platform {
  font-weight: 600;
  font-size: 0.9rem;
}

.pimp__source .text-link {
  overflow-wrap: anywhere;
}

.pimp__source-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.pimp__source-fields {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--space-2);
  width: 100%;
}

.pimp__footer {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  color: var(--color-ink-soft);
}

.pimp__footer-note {
  font-size: 0.9rem;
}

/* --- Review screen: suggested project cards -------------------------------- */
.pimp__group-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pimp__group-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.pimp__images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-2);
}

.pimp__image {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.pimp__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover; /* thumbnails only — the portfolio never crops */
  border-radius: var(--radius);
  background: var(--color-bg);
}

.pimp__image-name {
  font-size: 0.75rem;
  color: var(--color-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pimp select {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  min-height: 44px;
  max-width: 100%;
}

.pimp select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.pimp__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
}

.pimp__skip {
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-2);
}

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

/* --- Confirmation step ------------------------------------------------------ */
.pimp__confirm-summary {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  align-items: start;
}

.pimp__confirm-cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-bg);
}

.pimp__confirm-title {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 500;
}

@media (max-width: 48rem) {
  .pimp__fields,
  .pimp__source-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .pimp__confirm-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   STAGE D7 — service packages & pricing (designer side)
   Ladder of five package panels; offered panels carry the accent edge.
   ========================================================================== */
.pkg-editor {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pkg-editor textarea,
.pkg-editor input[type="number"] {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  line-height: 1.6;
  padding: 0.65rem 0.85rem;
  width: 100%;
}

.pkg-editor textarea {
  resize: vertical;
}

.pkg-editor textarea:focus,
.pkg-editor input[type="number"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.pkg-range__value {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  margin: 0 0 var(--space-1);
}

.pkg-range__text {
  margin: 0 0 var(--space-1);
  color: var(--color-ink-soft);
}

.pkg-range__note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.pkg-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-left: 3px solid var(--color-line);
}

.pkg-panel--offered {
  border-left-color: var(--color-accent);
}

.pkg-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pkg-panel__head .dash-section__heading {
  margin: 0;
}

.pkg-panel__state {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}

.pkg-panel__state--on {
  color: var(--color-success);
  border-color: currentColor;
}

.pkg-panel__hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.pkg-panel__toggle,
.pkg-panel__restore {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

.pkg-panel__restore {
  font-weight: 400;
  margin-top: var(--space-1);
}

.pkg-panel__baseline {
  margin-top: var(--space-1);
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.pkg-panel__baseline summary {
  cursor: pointer;
}

.pkg-panel__baseline p {
  margin: var(--space-1) 0 0;
}

.pkg-panel__prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (max-width: 34rem) {
  .pkg-panel__prices {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pkg-panel__actions {
  margin-top: var(--space-2);
}

.pkg-editor__footnote {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

/* --- Stage D9: availability manager & designer consultation screens ------- */

.slot-manage {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}

.slot-manage__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  flex-wrap: wrap;
}

.slot-manage__row + .slot-manage__row {
  border-top: 1px solid var(--color-line);
}

.slot-manage__when {
  font-weight: 500;
}

.slot-manage__state {
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.slot-manage__state--booked {
  color: var(--color-accent);
}

.slot-manage__remove {
  font-size: 0.875rem;
  color: var(--color-error);
}

.slot-manage__add {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-2);
}

.slot-manage__empty {
  margin-bottom: var(--space-2);
}

.consultation-outcome {
  border-top: 1px solid var(--color-line);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}

.consultation-outcome .inline-form {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

/* --- Stage D10: proposal builder & designer proposal screens --------------- */

.pbuild-intro__guidance {
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg);
  border-left: 2px solid var(--color-accent);
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.pbuild {
  display: grid;
  gap: var(--space-2);
}

.pbuild__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  align-items: start;
}

.pbuild-milestones {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.pbuild-milestone {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-2);
}

.pbuild-milestone__stage {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 var(--space-1);
}

.pbuild-milestone__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

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

/* Desktop-first: adapt the builder downward. */
@media (max-width: 48rem) {
  .pbuild__pair,
  .pbuild-milestone__grid {
    grid-template-columns: 1fr;
  }
}

/* --- Stage 14: payment window (manual bank transfer) ---------------------- */
.payw { max-width: 44rem; }
.payw__stage { margin: 0 0 var(--space-1); font-size: 0.875rem; color: var(--color-ink-soft); }
.payw__heading { margin: 0 0 var(--space-2); font-family: var(--font-serif); font-size: 1.5rem; }
.payw__subheading { margin: 0 0 var(--space-1); font-size: 1rem; }
.payw__text { margin: 0 0 var(--space-2); color: var(--color-ink-soft); }
.payw__amount { display: flex; flex-direction: column; gap: 0.25rem; margin: 0 0 var(--space-3); padding: var(--space-2); background: var(--color-bg); border-radius: var(--radius); }
.payw__amount-value { font-family: var(--font-serif); font-size: 2rem; color: var(--color-accent); }
.payw__amount-hint { font-size: 0.875rem; color: var(--color-ink-soft); }
.payw__accounts { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.payw__account { border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-2); }
.payw__account-bank { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.payw__account-facts { margin: 0; display: grid; gap: 0.25rem; }
.payw__account-facts div { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.payw__account-facts dt { color: var(--color-ink-soft); min-width: 11rem; }
.payw__account-facts dd { margin: 0; }
.payw__iban { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
.payw__reference { margin: 0 0 var(--space-3); }
.payw__reference-code { display: inline-block; margin: 0 0 var(--space-1); padding: 0.375rem 0.75rem; background: var(--color-bg); border: 1px dashed var(--color-gold); border-radius: var(--radius); font-weight: 600; letter-spacing: 0.05em; }
.payw__report { margin: 0 0 var(--space-3); }
.payw__report-hint { margin: var(--space-1) 0 0; font-size: 0.875rem; color: var(--color-ink-soft); }
.payw__waiting { margin: 0 0 var(--space-3); padding: var(--space-2); border-left: 3px solid var(--color-success); background: var(--color-bg); border-radius: var(--radius); }
.payw__waiting-heading { margin: 0 0 var(--space-1); font-size: 1rem; color: var(--color-success); }
.payw__waiting-text { margin: 0 0 var(--space-1); }
.payw__waiting-text--muted { font-size: 0.875rem; color: var(--color-ink-soft); }
.payw__notice { margin: 0 0 var(--space-3); padding: var(--space-2); border-left: 3px solid var(--color-warning); background: var(--color-bg); border-radius: var(--radius); }
.payw__notice p { margin: 0 0 var(--space-1); }
.payw__notice-note { font-size: 0.875rem; color: var(--color-ink-soft); }
.payw__empty { margin: 0 0 var(--space-3); padding: var(--space-2); border: 1px dashed var(--color-line); border-radius: var(--radius); color: var(--color-ink-soft); }
.payw__empty p { margin: 0 0 var(--space-1); }
.payw__protection { border-top: 1px solid var(--color-line); padding-top: var(--space-2); }
.payw__steps { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.375rem; color: var(--color-ink-soft); }

/* --- Stage D16: earnings, fee explanation, payout details ----------------- */
.earnings { display: grid; gap: var(--space-3); max-width: 52rem; }
/* Grid items default to min-width:auto, so a wide table or long unbroken
   line inside a panel forces these page grids past narrow viewports —
   the D20 mobile pass caught earnings at 500px and reputation at 391px
   on a 375px screen. min-width:0 lets the panels shrink and hands wide
   content to the overflow-x scroll wrappers where it belongs. */
.earnings > *, .repute > *, .founding > * { min-width: 0; }
.earnings__callout { border-left: 3px solid var(--color-gold); }
.earnings__totals { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.earnings__total dt { font-size: 0.875rem; color: var(--color-ink-soft); margin-bottom: 0.25rem; }
.earnings__total dd { margin: 0; font-family: var(--font-serif); font-size: 1.5rem; }
.earnings__total-hint { font-family: var(--font-stack) !important; font-size: 0.8125rem !important; color: var(--color-ink-soft); }
.earnings__scroll { overflow-x: auto; }
.earnings__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.earnings__table th { text-align: left; font-size: 0.8125rem; color: var(--color-ink-soft); font-weight: 500; padding: 0 var(--space-1) var(--space-1) 0; border-bottom: 1px solid var(--color-line); }
.earnings__table td { padding: var(--space-1) var(--space-1) var(--space-1) 0; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.earnings__project { display: block; font-weight: 600; }
.earnings__stage { display: block; font-size: 0.8125rem; color: var(--color-ink-soft); }
.earnings__net { font-weight: 600; color: var(--color-accent); }
.earnings__date { display: block; font-size: 0.8125rem; color: var(--color-ink-soft); }
.earnings__account { margin: 0 0 var(--space-2); display: grid; gap: 0.25rem; }
.earnings__account div { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.earnings__account dt { color: var(--color-ink-soft); min-width: 11rem; }
.earnings__account dd { margin: 0; }
@media (max-width: 48rem) {
  .earnings__totals { grid-template-columns: 1fr; }
}

.feex { max-width: 44rem; }
.feex__heading { margin: 0 0 var(--space-2); font-family: var(--font-serif); font-size: 1.5rem; }
.feex__subheading { margin: var(--space-3) 0 var(--space-1); font-size: 1rem; }
.feex__lead { margin: 0 0 var(--space-2); font-size: 1.0625rem; }
.feex__text { margin: 0 0 var(--space-2); color: var(--color-ink-soft); }
.feex__text--muted { font-size: 0.875rem; }
.feex__list { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; color: var(--color-ink-soft); }

.payacct { max-width: 36rem; }
.payacct__heading { margin: 0 0 var(--space-2); font-family: var(--font-serif); font-size: 1.5rem; }
.payacct__form { display: grid; gap: var(--space-2); margin-top: var(--space-2); }

/* --- Stage D19: reputation & ranking, Founding programme, soft warnings ---
   Warnings are amber and calm (design doc A2: protection reminders,
   never accusations); the ranking table reuses the earnings table's
   quiet look; the Founding screen is a benefits list, not a trophy. */
.warncard { background: var(--color-surface); border: 1px solid var(--color-line); border-left: 3px solid var(--color-warning); border-radius: 4px; padding: var(--space-2); margin-bottom: var(--space-2); max-width: 52rem; }
.warncard__label { margin: 0 0 var(--space-1); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-warning); }
.warncard__text { margin: 0 0 var(--space-1); }
.warncard__meta { margin: 0 0 var(--space-1); font-size: 0.8125rem; color: var(--color-ink-soft); }
.warncard__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.repute { display: grid; gap: var(--space-3); max-width: 52rem; }
.repute__indicators { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.repute__how { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--color-ink-soft); }
.reliability__value--none { font-size: 0.9375rem !important; color: var(--color-ink-soft); }
.repute__scroll { overflow-x: auto; }
.repute__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.repute__table th { text-align: left; font-size: 0.8125rem; color: var(--color-ink-soft); font-weight: 500; padding: 0 var(--space-1) var(--space-1) 0; border-bottom: 1px solid var(--color-line); }
.repute__table td { padding: var(--space-1) var(--space-1) var(--space-1) 0; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.repute__factor { display: block; font-weight: 600; }
.repute__factor-how { display: block; font-size: 0.8125rem; color: var(--color-ink-soft); max-width: 28rem; }
.repute__neutral { font-size: 0.8125rem; color: var(--color-ink-soft); }
.repute__total { margin: var(--space-2) 0 0; font-weight: 600; }

.founding { display: grid; gap: var(--space-3); max-width: 52rem; }
.founding__benefits { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.founding__benefit { border-bottom: 1px solid var(--color-line); padding-bottom: var(--space-2); }
.founding__benefit:last-child { border-bottom: 0; padding-bottom: 0; }
.founding__benefit-name { display: block; font-weight: 600; }
.founding__benefit-how { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--color-ink-soft); }
.founding__state { display: inline-block; margin-left: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--color-success); }
.founding__state--paused { color: var(--color-warning); }

/* --- Common questions (includes/faq.html; home + pricing) ------------------ */
/* Sits in the page flow like its sibling sections — left-aligned, full
   width, own top rule — with only the list constrained (owner feedback,
   2026-09-12: the centred block broke the page's alignment). */
.faq {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
}

.faq__list {
  max-width: 48rem;
  border-top: 1px solid var(--color-line);
}

.faq__item {
  border-bottom: 1px solid var(--color-line);
}

.faq__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
}

.faq__summary::-webkit-details-marker {
  display: none;
}

.faq__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: auto;
  border-right: 2px solid var(--color-ink-soft);
  border-bottom: 2px solid var(--color-ink-soft);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.faq__item[open] > .faq__summary::after {
  transform: rotate(225deg);
}

.faq__summary:hover .faq__question,
.faq__item[open] > .faq__summary .faq__question {
  color: var(--color-accent);
}

.faq__summary:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.faq__question {
  font-family: var(--font-stack);
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0;
  transition: color 0.15s ease;
}

.faq__answer {
  margin: 0;
  padding: 0 var(--space-1) var(--space-3);
  color: var(--color-ink-soft);
  max-width: 42.5rem;
}

/* --- Quick-question widget (includes/chat_widget.html) --------------------- */
.chatw__launcher {
  position: fixed;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.chatw__launcher:hover {
  background: var(--color-accent-hover);
}

.chatw__launcher:focus-visible,
.chatw__close:focus-visible,
.chatw__chip:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.chatw__panel {
  position: fixed;
  right: var(--space-2);
  bottom: calc(var(--space-2) + 3.5rem);
  z-index: 31;
  width: min(23rem, calc(100vw - 2 * var(--space-2)));
  max-height: min(34rem, calc(100vh - 6rem));
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.chatw[hidden],
.chatw__panel[hidden] {
  display: none;
}

.chatw__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.chatw__title {
  margin: 0;
  font-weight: 600;
}

.chatw__sub {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

.chatw__close {
  flex: 0 0 auto;
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.chatw__close::before,
.chatw__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.9rem;
  height: 2px;
  background: var(--color-ink-soft);
  transform: translate(-50%, -50%) rotate(45deg);
}

.chatw__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.chatw__log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--color-bg);
}

.chatw__msg {
  margin: 0;
  max-width: 88%;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.45;
}

.chatw__msg--bot {
  align-self: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}

.chatw__msg--user {
  align-self: flex-end;
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.chatw__msg--error {
  align-self: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-error);
  color: var(--color-error);
}

.chatw__msg--pending {
  color: var(--color-ink-soft);
  letter-spacing: 0.2em;
}

.chatw__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chatw__chip {
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-accent);
  cursor: pointer;
  text-align: left;
}

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

.chatw__form {
  display: grid;
  gap: 0.5rem;
  padding: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.chatw__input,
.chatw__email {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  padding: 0.55rem 0.7rem;
}

.chatw__input:focus,
.chatw__email:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.chatw__email {
  font-size: 0.85rem;
}

.chatw__send {
  justify-self: end;
}

.chatw__foot {
  margin: 0;
  padding: 0 var(--space-2) var(--space-2);
  font-size: 0.8125rem;
}

/* Phones: the launcher clears the sticky call-to-action bar, and the
   open panel becomes a bottom sheet. */
@media (max-width: 48rem) {
  .chatw__launcher {
    bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    padding: 0.65rem 0.9rem;
    transition: bottom 0.2s ease;
  }

  /* Only while the sticky bar (4.5rem) is actually showing does the
     launcher move up to clear it; on every other page it sits in the
     corner instead of floating over the footer note. The body classes
     come from includes/mobile_cta.html. */
  .layout-public.mobile-cta-visible .chatw__launcher {
    bottom: calc(var(--space-2) + 4.5rem + env(safe-area-inset-bottom, 0px));
  }

  .chatw__launcher span {
    display: none;
  }

  .chatw--open .chatw__launcher {
    display: none;
  }

  .chatw__panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 85vh;
    border-radius: var(--radius) var(--radius) 0 0;
  }
}

/* --- Hero support lines under the main button --------------------------- */
.hero__support {
  margin: var(--space-2) auto 0;
  max-width: 34rem;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.hero__support--free {
  margin-top: var(--space-1);
  color: var(--color-success);
  font-weight: 500;
  font-size: 0.875rem;
}

/* --- Pricing: the worked example ------------------------------------------ */
.example {
  margin-top: var(--space-3);
  padding: var(--space-3);
  max-width: 42.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.example__heading {
  font-family: var(--font-stack);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--space-1);
}

.example__lead {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-soft);
}

.example__rows {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.example__row {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 1fr;
  gap: 0.25rem var(--space-2);
  align-items: start;
}

.example__row dt {
  font-weight: 600;
}

.example__row dd {
  margin: 0;
  color: var(--color-ink-soft);
}

.example__row--total dt {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--color-accent);
}

.example__row--excluded {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

@media (max-width: 480px) {
  .example__row {
    grid-template-columns: 1fr;
  }
}