/* Canvas design system — plain CSS, no build step */

:root {
  --color-primary: #242324;
  --color-accent: #c54a32;
  --color-bg: #f7f1e5;
  --color-white: #ffffff;
  --color-muted: rgba(36, 35, 36, 0.55);
  --color-border: rgba(36, 35, 36, 0.12);
  --color-success-bg: #ecfdf3;
  --color-success-text: #166534;
  --color-warning-bg: #fff7ed;
  --color-warning-text: #9a3412;
  --font: 'Comfortaa', sans-serif;
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(36, 35, 36, 0.06);
  --shadow-md: 0 8px 24px rgba(36, 35, 36, 0.08);
  --container: 90rem;       /* 1440px — standard modern desktop design frame */
  --container-narrow: 48rem;
  --header-height: 4rem;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* ── Layout ──────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container--narrow { max-width: var(--container-narrow); }

.page { min-height: 100vh; display: flex; flex-direction: column; }

.page__main { flex: 1; }

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 241, 229, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-top: 0;
  padding-bottom: 0;
}

/* Dashboard / admin panel header */
.panel {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.panel__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-top: 0;
  padding-bottom: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Logo: natural aspect ratio — no forced square */
.brand__logo { height: 2rem; width: auto; }

.brand__name { font-size: 1.125rem; font-weight: 700; white-space: nowrap; }

.brand__sub { font-weight: 400; color: var(--color-muted); }

.panel .brand__sub { font-size: 0.75rem; }

/* ── Hero ──────────────────────────────────────────────────────────────
   The hero occupies exactly (100dvh - header height). Padding is
   included in that height via box-sizing so the card never leaks.
   Text and image are NOT in grid columns — the image is absolutely
   positioned on the card's right portion, the text content sits in
   the lower-left naturally. This matches the reference design where
   both elements share the same card plane without hard column walls.
──────────────────────────────────────────────────────────────────────── */
.hero {
  /* 100dvh is a *minimum* — content can grow taller on short screens */
  min-height: calc(100dvh - var(--header-height));
  padding: 0.75rem 1rem 1.25rem;
}

.hero__card {
  position: relative;
  min-height: calc(100dvh - var(--header-height) - 2rem);
  border-radius: 1.5rem;
  background: #ede6d6;
  overflow: hidden;
}

/* Left-to-right gradient wash — keeps dark text legible over the image
   without obscuring the artwork on the right side of the card. */
.hero__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to right,
    rgba(247, 241, 229, 0.72) 0%,
    rgba(247, 241, 229, 0.42) 38%,
    transparent 62%
  );
  pointer-events: none;
}

/* Image: full-bleed cover — fills the entire card as a background.
   Text content sits above it at z-index:1. */
.hero__image {
  position: absolute;
  inset: 0;
  padding: 0;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Text: overlaid on the full-bleed image. Width keeps lines readable
   and anchors the copy to the left side of the card. */
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  width: 55%;
  padding: clamp(2.5rem, 6vh, 5.5rem) 0.5rem 3rem clamp(3rem, 5.5vw, 5.5rem);
}

.hero__title {
  margin: 0 0 1.25rem;
  /* Large, commanding headline matching reference proportions */
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero__accent {
  color: var(--color-accent);
  font-style: normal;
}

.hero__subtitle {
  margin: 0 0 2.25rem;
  max-width: 36rem;
  font-size: clamp(1.05rem, 1.25vw, 1.5rem);
  line-height: 1.6;
  font-weight: 700;
  color: rgba(36, 35, 36, 0.92); /* darker than --color-muted (0.55) for image overlay */
}

/* Rectangular button (not pill) — matches reference "Primary Button" shape */
.hero__cta {
  align-self: flex-start;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  border-radius: 0.625rem;
}

/* ── Mobile hero: image on top, text panel below on card background ──── */
@media (max-width: 800px) {
  .hero {
    height: auto;
    min-height: calc(100dvh - var(--header-height));
    padding: 0.5rem 0.5rem 1rem;
  }

  /* No gradient wash needed — text sits on solid card bg below the image */
  .hero__card::before { display: none; }

  .hero__card {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    height: auto;
    /* Direct value — not via % so it never collapses on auto parents */
    min-height: calc(100dvh - var(--header-height) - 1.5rem);
  }

  /* Image returns to normal flow, stacked above content — no max cap */
  .hero__image {
    position: relative;
    inset: auto;
    order: -1;
    flex: 0 0 48%;
    overflow: hidden;
  }

  .hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Text panel sits below the image on the warm card background */
  .hero__content {
    position: static;
    z-index: auto;
    width: 100%;
    height: auto;
    flex: 1 0 auto;
    padding: 1.75rem 1.75rem 2.5rem;
    justify-content: flex-start;
  }
}

/* ── Topbar actions — responsive kebab dropdown ────────────────────────── */
.topbar-actions-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Kebab button is only used on narrow screens */
.topbar-kebab {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.topbar-kebab:hover { background: rgba(36, 35, 36, 0.06); }

.topbar-kebab svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

@media (max-width: 520px) {
  .brand__sub { display: none; }

  /* Inline buttons are hidden; kebab + dropdown take over */
  .topbar-kebab { display: inline-flex; }

  .topbar-actions {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    min-width: 11rem;
    padding: 0.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    /* Hidden state — no display:none so transitions still work if added later */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.25rem);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  }

  .topbar-actions.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* In the dropdown, buttons become full-width rows */
  .topbar-actions .btn {
    width: 100%;
    justify-content: flex-start;
    padding: 0.625rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
  }

  .topbar-actions .btn--ghost {
    background: transparent;
    color: var(--color-primary);
  }

  .topbar-actions .btn--ghost:hover:not(:disabled) {
    background: rgba(36, 35, 36, 0.06);
    color: var(--color-accent);
  }

  .topbar-actions .btn--primary {
    color: var(--color-white);
  }

  .topbar-actions .btn:disabled {
    opacity: 0.5;
  }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 2rem 0;
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}

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

.site-footer__copy {
  margin: 1.5rem 0 0;
  font-size: 0.75rem;
  color: rgba(36, 35, 36, 0.5);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, transform 0.1s;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn:active:not(:disabled) { transform: scale(0.98); }

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

.btn--primary:hover:not(:disabled) { opacity: 0.88; }

.btn--secondary {
  background: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.btn--secondary:hover:not(:disabled) { background: rgba(36, 35, 36, 0.04); }

.btn--ghost {
  background: transparent;
  color: var(--color-muted);
  padding: 0.5rem 0.75rem;
}

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

.btn--small { padding: 0.375rem 0.875rem; font-size: 0.75rem; }

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

/* ── Forms ───────────────────────────────────────────────────────────── */
.field { margin-bottom: 1rem; }

.field__label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.input, .select, .textarea {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(197, 74, 50, 0.12);
}

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

.input--sm, .select--sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }

.form-error {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: #b91c1c;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.checkbox-row input { margin-top: 0.2rem; accent-color: var(--color-accent); flex-shrink: 0; }

.field__option {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.6);
}

.field__option-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.field__option-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.field__hint {
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.45;
}

/* Password input with reveal toggle */
.input-group {
  position: relative;
}

.input-group .input {
  padding-right: 3rem;
}

.input-group__btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  line-height: 1;
  border-radius: 0.25rem;
  transition: color 0.15s;
}

.input-group__btn:hover { color: var(--color-primary); }

/* ── Cards & panels ──────────────────────────────────────────────────── */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.card--centered {
  max-width: 28rem;
  margin: 0 auto;
  text-align: center;
}

/* ── Auth pages ──────────────────────────────────────────────────────── */
.auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-page__body {
  flex: 1;
  display: flex;
}

/* Split layout: form panel on left, image panel on right */
.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  width: 100%;
  min-height: calc(100dvh - var(--header-height));
}

.auth-split__panel {
  position: relative;
  overflow: hidden;
  order: 2;
}

.auth-split__panel img {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
  display: block;
}

.auth-split__overlay {
  display: none;
}

.auth-split__overlay .brand__name,
.auth-split__overlay .brand__name .brand__sub { color: rgba(255, 255, 255, 0.9); }

.auth-split__overlay .brand__logo { filter: brightness(10); }

.auth-split__tagline {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}

.auth-split__form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: var(--color-bg);
  order: 1;
}

.auth-split__form-stack {
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.invite-banner {
  background: linear-gradient(145deg, #fdf5f3 0%, #fffaf6 100%);
  border: 1px solid rgba(197, 74, 50, 0.18);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.375rem;
  box-shadow: var(--shadow-sm);
}

.invite-banner__eyebrow {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
}

.invite-banner__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-primary);
}

.invite-banner__lead {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.invite-banner__code-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(197, 74, 50, 0.32);
}

.invite-banner__code-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
}

.invite-link-failed {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border-radius: var(--radius-sm);
}

.invite-banner__code {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

@media (max-width: 680px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-split__panel { display: none; }
  .auth-split__form-panel {
    padding: 2.5rem 1.5rem;
    min-height: calc(100dvh - var(--header-height));
  }
}

/* Tabs (login toggle) */
.tabs {
  display: flex;
  padding: 0.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(36, 35, 36, 0.04);
}

.tabs__btn {
  flex: 1;
  padding: 0.5rem;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tabs__btn:hover:not(.is-active) {
  background: rgba(36, 35, 36, 0.06);
}

.tabs__btn.is-active {
  background: var(--color-accent);
  color: var(--color-white);
}

/* ── Status strip ────────────────────────────────────────────────────── */
/* ── Project card (unified metadata + hub) ───────────────────────────── */
.project-card__head {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

/* Thumbnail: wider preview, top-anchored crop */
.project-thumb {
  flex-shrink: 0;
  width: 13.5rem;
  height: 10rem;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--color-bg);
}

.project-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.project-thumb__zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  font-size: 1.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.project-thumb:hover .project-thumb__zoom,
.project-thumb:focus-visible .project-thumb__zoom { opacity: 1; }

.project-card__meta { flex: 1; min-width: 0; }

.project-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.project-card__title-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  min-width: 0;
}

.project-card__title-row h2 { margin: 0; font-size: 1.25rem; }

.project-category {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

/* 3-dot project menu */
.project-menu {
  position: relative;
  flex-shrink: 0;
}

.project-menu__btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.project-menu__btn:hover,
.project-menu.is-open .project-menu__btn {
  background: rgba(36, 35, 36, 0.06);
  color: var(--color-primary);
}

.project-menu__panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 20;
  min-width: 10rem;
  padding: 0.375rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.project-menu__item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.project-menu__item:hover {
  background: var(--color-bg);
}

/* Live site link — subtle text link, not a button */
.project-live-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0.625rem 1rem;
  color: var(--color-accent);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: rgba(197, 74, 50, 0.04);
  transition: background 0.15s, color 0.15s;
}

.project-live-link:hover {
  background: rgba(197, 74, 50, 0.1);
}

.project-live-link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.project-live-link__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-live-link__type {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: rgba(197, 74, 50, 0.12);
  color: var(--color-accent);
}

.project-live-link--live {
  border-color: var(--color-success-text);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.project-live-link--live:hover {
  background: rgba(22, 101, 52, 0.12);
}

.project-live-link--live .project-live-link__type {
  background: rgba(22, 101, 52, 0.15);
  color: var(--color-success-text);
}

.project-live-link--live svg {
  stroke: var(--color-success-text);
}

.project-live-link[hidden],
.project-live-link.hidden {
  display: none !important;
}

/* Date details below live link should read as secondary */
.project-details--dates .project-detail__icon {
  color: var(--color-muted);
}

.project-details--dates .project-detail__value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Icon detail list */
.project-details {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.project-details--dates,
.project-details--costs {
  margin-top: 0.625rem;
}

.project-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.project-detail__icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  color: var(--color-accent);
}

.project-detail__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.project-detail__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.project-detail__label {
  font-size: 0.75rem;
  color: var(--color-muted);
  line-height: 1.3;
}

.project-detail__value {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-badge--info    { background: #eff6ff;                 color: #1d4ed8; }
.status-badge--success { background: #f0fdf4;                 color: #15803d; }
.status-badge--live    { background: var(--color-success-bg); color: var(--color-success-text); }
.status-badge--muted   { background: rgba(36,35,36,0.07);     color: var(--color-muted); }

.card__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.25rem 0;
}

/* Project hub section */
.project-hub {
  margin-top: 1.5rem;
}

.project-hub__label {
  margin: 0 0 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Image lightbox */
.lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1001;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.9);
  font-size: 1.375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  object-position: top center;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge--pending { background: #fef3c7; color: #92400e; }
.badge--review { background: #dbeafe; color: #1e40af; }
.badge--dev { background: #ede9fe; color: #5b21b6; }
.badge--approval { background: #ffedd5; color: #9a3412; }
.badge--approved { background: #e0e7ff; color: #3730a3; }
.badge--active { background: #dcfce7; color: #166534; }
.badge--disabled { background: #f3f4f6; color: #4b5563; }
.badge--paid { background: var(--color-success-bg); color: var(--color-success-text); margin-left: 0.375rem; }

/* ── Chat ────────────────────────────────────────────────────────────── */
.chat__messages {
  max-height: 24rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem;
  padding-right: 0.5rem; /* breathing room for scrollbar */
  border: 1px solid rgba(36, 35, 36, 0.08);
  border-radius: var(--radius-sm);
}

/* System welcome / event notice */
.chat__notice {
  align-self: flex-start;
  max-width: 36rem;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--color-muted);
  padding: 0.625rem 1rem;
  background: rgba(36, 35, 36, 0.04);
  border-radius: var(--radius-sm);
}

/* Message bubbles */
.chat__bubble {
  max-width: 76%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.55;
}

.chat__bubble--admin {
  align-self: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 0.25rem;
}

.chat__bubble--client {
  align-self: flex-end;
  background: rgba(197, 74, 50, 0.1);
  border-bottom-right-radius: 0.25rem;
  text-align: right;
}

.chat__bubble--system {
  align-self: flex-start;
  max-width: 28rem;
  text-align: left;
  background: rgba(36, 35, 36, 0.05);
}

.chat__text { margin: 0; white-space: pre-wrap; }

.chat__meta {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-muted);
}

/* Action area below the chat */
.chat__actions {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding-top: 1rem;
}

/* Context guidance box */
.chat__guidance {
  padding: 0.875rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.6;
}

.chat__guidance a { color: var(--color-accent); text-decoration: underline; }

/* Wraps a guidance note + primary CTA */
.chat__cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/*
 * Reply form: right-aligned to match the client-bubble side.
 * Makes it visually obvious that the textarea is composing a reply.
 */
.chat__reply-form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

.chat__reply-form .textarea  { width: 100%; }
.chat__reply-form .btn       { align-self: flex-end; }
.chat__reply-form .action-toggles {
  align-self: stretch;
  width: 100%;
}

.chat__reply-form--message {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.action-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.action-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}

.action-toggle input[type="radio"] {
  accent-color: var(--color-accent);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.action-toggle__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.action-toggle__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.action-toggle__body strong {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}

.action-toggle__count {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  background: rgba(36, 35, 36, 0.06);
  color: var(--color-muted);
  white-space: nowrap;
}

.action-toggle__count--none {
  background: rgba(197, 74, 50, 0.08);
  color: var(--color-accent);
}

.action-toggle__desc {
  font-size: 0.75rem;
  color: var(--color-muted);
  line-height: 1.45;
}

.action-toggle--exhausted {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-toggle--exhausted:has(input:disabled) {
  pointer-events: none;
}

.action-toggle:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(197, 74, 50, 0.06);
}

.action-toggle:has(input:checked) .action-toggle__body strong {
  color: var(--color-accent);
}

.action-toggle:has(input:checked) .action-toggle__count:not(.action-toggle__count--none) {
  background: rgba(197, 74, 50, 0.12);
  color: var(--color-accent);
}

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(36, 35, 36, 0.5);
  backdrop-filter: blur(2px);
}

.modal-overlay.is-open { display: flex; }

.modal {
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: 0 24px 64px rgba(36, 35, 36, 0.18);
}

.modal--wide { max-width: 42rem; }
.modal--chat {
  /* Admin project chat — much wider than the standard wide modal so the
     message feed and assets have room to breathe. Still capped by viewport. */
  max-width: min(72rem, calc(100vw - 2rem));
  width: 100%;
}
.modal--narrow { max-width: 22rem; }

.modal__title { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 700; }

.modal__section { margin-bottom: 1.25rem; }

.modal__section-title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-accent);
}

.modal__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.modal__actions .btn { flex: 1; }

.scope-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
}

.scope-list li + li { margin-top: 0.25rem; }

/* ── Admin ───────────────────────────────────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.admin-tabs__btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.admin-tabs__btn.is-active {
  background: var(--color-accent);
  color: var(--color-white);
}

.admin-tabs__btn:hover:not(.is-active) {
  background: rgba(36, 35, 36, 0.06);
  color: var(--color-primary);
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-header__title { margin: 0; font-size: 1.25rem; font-weight: 700; }

/* ── CRM toolbar ─────────────────────────────────────────────────────── */
.crm-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.crm-toolbar .input--sm {
  flex: 1 1 14rem;
  min-width: 0;
}

.filter-pills {
  display: flex;
  gap: 0.375rem;
}

.filter-pill {
  padding: 0.3125rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.filter-pill:hover { background: rgba(36,35,36,0.05); color: var(--color-primary); }

.filter-pill.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ── CRM table ───────────────────────────────────────────────────────── */
.crm-table .sortable { cursor: pointer; user-select: none; }
.crm-table .sortable:hover { color: var(--color-primary); }
.sort-indicator { display: inline-block; min-width: 0.875rem; }

.crm-row { cursor: default; }
.crm-row--open > td { background: rgba(197, 74, 50, 0.03); }

.crm-cell__sub {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.crm-cell__line { display: block; }

.crm-cell__code {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.crm-cell__code-value {
  font-family: monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  background: rgba(197, 74, 50, 0.08);
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
}

.crm-cell__code-copy {
  font-size: 0.7rem !important;
}

.crm-actions {
  white-space: nowrap;
}

.crm-actions .link-btn + .link-btn { margin-left: 0.75rem; }

.crm-row__expand { background: var(--color-bg); }
.crm-row__expand > td { padding: 1rem 1.25rem 1.25rem; }
.crm-row__expand.hidden { display: none; }

/* ── CRM panel (expand content) ─────────────────────────────────────── */
.crm-panel {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 48rem;
}

.crm-panel__code {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.crm-panel__code-value {
  font-family: monospace;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
}

.crm-panel__contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
}

.crm-panel__contact-item { display: block; color: var(--color-muted); }

.crm-panel__contact-label { font-weight: 600; color: var(--color-text); }

.crm-panel__log-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Linked / unlinked badge */

.customer-status {
  font-size: 0.75rem;
  font-weight: 700;
}

.customer-status--linked { color: #166534; }
.customer-status--unlinked { color: var(--color-muted); }

/* Visible contact details */
/* legacy — kept in case of revert */ .customer-card__details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.25rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* Invite code row */
.customer-card__code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  margin-top: 0.625rem;
  font-size: 0.8125rem;
}

.customer-card__code-value {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.link-btn {
  border: none;
  background: none;
  padding: 0;
  color: var(--color-accent);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
}

.link-btn:hover { text-decoration: underline; }

details.interaction-log { margin-top: 1rem; }

details.interaction-log summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  user-select: none;
}

.log-entry {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: 0.8125rem;
}

/* ── Admin chat — message type variants ─────────────────────────────────── */
/* The client-side chat has rich bubbles, but the admin chat reuses the
   .log-entry shell for parity with interaction logs. These variants give
   assets submissions and review comments (the contractual feedback) a
   distinct visual treatment so they can't be confused with general chat. */
.log-entry--admin-message {
  background: rgba(197, 74, 50, 0.08);
  border-left: 3px solid var(--color-accent);
}
.log-entry--client-message {
  background: var(--color-bg);
  border-left: 3px solid var(--color-border);
}
.log-entry--asset {
  /* Client file submissions — informational highlight */
  background: #ecfeff;
  border-left: 3px solid #0e7490;
}
.log-entry--review {
  /* Client review/feedback on the first design draft — contractual weight */
  background: #fef3c7;
  border-left: 3px solid #b45309;
}
.log-entry--domain {
  /* Client domain preference submission */
  background: #f3e8ff;
  border-left: 3px solid #7c3aed;
}
.log-entry--system {
  background: rgba(36, 35, 36, 0.04);
  border-left: 3px solid var(--color-border);
  color: var(--color-muted);
  font-style: italic;
}

.log-entry__tag {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(36, 35, 36, 0.08);
  color: var(--color-primary);
  vertical-align: middle;
}
.log-entry--asset .log-entry__tag {
  background: #cffafe;
  color: #155e75;
}
.log-entry--review .log-entry__tag {
  background: #fde68a;
  color: #92400e;
}
.log-entry--domain .log-entry__tag {
  background: #ede9fe;
  color: #5b21b6;
}
.log-entry--system .log-entry__tag {
  background: rgba(36, 35, 36, 0.08);
  color: var(--color-muted);
}

/* ── Admin chat — feed & bulk download footer ───────────────────────────── */
.chat-feed {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.chat-feed--admin {
  /* Tall but capped by viewport so the modal never overflows the screen. */
  height: min(60vh, 36rem);
  max-height: 36rem;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.chat-feed__empty {
  margin: auto;
  color: var(--color-muted);
  font-size: 0.875rem;
  text-align: center;
  padding: 2rem 1rem;
}

.chat-assets-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 0.8125rem;
}
.chat-assets-footer__count {
  color: var(--color-muted);
  font-weight: 600;
}
.chat-assets-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.log-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.form-grid-2 {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 600px) {
  .form-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ── Kanban ──────────────────────────────────────────────────────────── */
.view-toggle {
  display: flex;
  padding: 0.1875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(36, 35, 36, 0.04);
}

.view-toggle__btn {
  padding: 0.375rem 0.75rem;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.view-toggle__btn.is-active {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.view-toggle__btn:hover:not(.is-active) {
  color: var(--color-primary);
}

.kanban {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.kanban__col { flex: 0 0 14rem; min-width: 14rem; }

.kanban__col-title {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.kanban__cards { display: flex; flex-direction: column; gap: 0.5rem; }

.kanban-card {
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: 0.875rem;
  transition: box-shadow 0.15s;
}

.kanban-card:hover { box-shadow: var(--shadow-md); }

.kanban-card__title { font-weight: 600; }

.kanban-card__meta { font-size: 0.75rem; color: var(--color-muted); }
.kanban-card__meta--paid { color: var(--color-success-text, #166534); font-weight: 600; }

.kanban-card__actions { margin-top: 0.5rem; display: flex; gap: 0.75rem; }

/* ── Table ───────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th,
.data-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.data-table th {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
}

.data-table tbody tr:hover { background: rgba(247, 241, 229, 0.6); }

/* ── Tickets ─────────────────────────────────────────────────────────── */
.ticket-panel {
  margin-bottom: 1rem;
  padding: 0.875rem;
  border: 1px solid #fed7aa;
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
}

.ticket-panel__title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-warning-text);
}

.ticket {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: 0.875rem;
}

.ticket:last-child { margin-bottom: 0; }

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast-host {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--color-white);
  box-shadow: 0 4px 16px rgba(36, 35, 36, 0.2);
  animation: toast-in 0.2s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.toast--info { background: var(--color-primary); }
.toast--success { background: #15803d; }
.toast--error { background: #b91c1c; }

/* ── Utilities ───────────────────────────────────────────────────────── */
.hidden { display: none !important; }

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

.text-center { text-align: center; }

.spacer-top { margin-top: 1.5rem; }

.loading {
  display: flex;
  justify-content: center;
  padding: 3rem;
}

.loading::after {
  content: '';
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(197, 74, 50, 0.25);
  animation: pulse 1.1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50%       { opacity: 1;   transform: scale(1); }
}

.empty-state {
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* .project-preview and .project-meta removed — replaced by
   .project-card__head / .project-thumb / .project-details / .project-live-link */

@media (max-width: 680px) {
  .project-card__head {
    flex-direction: column;
    gap: 1rem;
  }

  .project-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

/* ── Chat step-completion items ─────────────────────────────────────────── */
.chat__step-complete {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0;
  border-radius: var(--radius-sm);
  background: var(--color-success-bg);
  font-size: 0.8125rem;
  color: var(--color-success-text);
  font-weight: 600;
}

.chat__step-num {
  flex-shrink: 0;
  margin-top: 0.05rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  background: var(--color-success-text);
  color: #fff;
}

.chat__step-content {
  display: block;
  font-weight: 400;
  font-style: italic;
  margin-top: 0.2rem;
  opacity: 0.85;
}

/* ── Checkout steps (confirm details + pay) ─────────────────────────────── */
.checkout-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkout-step {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.checkout-step__num {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
  background: var(--color-accent);
  color: var(--color-white);
}

.checkout-step--done .checkout-step__num {
  background: var(--color-success-text);
}

.checkout-step--waiting {
  opacity: 0.65;
}

.checkout-step--waiting .checkout-step__num {
  background: var(--color-muted);
}

.checkout-step__body {
  flex: 1;
  min-width: 0;
}

.checkout-step__label {
  font-weight: 700;
  font-size: 0.9375rem;
  display: block;
  margin-bottom: 0.25rem;
}

.checkout-step__note {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0;
}

.checkout-step__done-text {
  font-size: 0.8125rem;
  color: var(--color-success-text);
  font-weight: 600;
  margin: 0;
}

/* Payment confirmed badge — prominent success pill inside Step 3 */
.badge--payment-confirmed {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--color-success-bg, #dcfce7);
  color: var(--color-success-text, #166534);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
  box-shadow: 0 1px 3px rgba(22,101,52,0.12);
}

/* Payment return banner — shown after Stripe redirects back to the dashboard */
.payment-success-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--color-success-bg, #ecfdf3);
  border: 1px solid rgba(22, 101, 52, 0.2);
  margin-bottom: 1rem;
}

.payment-success-banner__body {
  flex: 1;
  min-width: 0;
}

.payment-success-banner__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-success-text, #166534);
  margin: 0 0 0.25rem;
}

.payment-success-banner__desc {
  font-size: 0.8125rem;
  color: var(--color-success-text, #166534);
  margin: 0;
  line-height: 1.45;
  opacity: 0.9;
}

.payment-success-banner__dismiss {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--color-success-text, #166534);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.125rem 0.25rem;
  cursor: pointer;
  opacity: 0.7;
}

.payment-success-banner__dismiss:hover {
  opacity: 1;
}

/* Amber waiting box — appears below checkout steps after payment confirmed */
.checkout-waiting-box {
  padding: 0.875rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg, #fef3c7);
  border: 1px solid rgba(234,179,8,0.3);
  margin-top: 0.5rem;
}

.checkout-waiting-box__title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-warning-text, #92400e);
  margin: 0 0 0.25rem;
}

.checkout-waiting-box__desc {
  font-size: 0.75rem;
  color: #92400e;
  margin: 0;
  line-height: 1.45;
  opacity: 0.85;
}

/* ── Confirm-details modal form ─────────────────────────────────────────── */
.confirm-details-form .form-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin: 1rem 0 0.5rem;
}

.confirm-details-form .form-section-label:first-child {
  margin-top: 0;
}

/* ── Account modal ─────────────────────────────────────────────────────── */
.account-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.account-section__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.account-section__desc {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.5;
}

.account-status {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.account-status--linked {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.account-status--unlinked {
  background: rgba(36, 35, 36, 0.07);
  color: var(--color-muted);
}

.account-note {
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
  color: #b91c1c;
}

.account-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.25rem 0;
}

/* Disable ghost-style Account button when no customer linked */
#account.btn--ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Admin pricing templates ─────────────────────────────────────────────── */
.pricing-template-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border);
}

.pricing-template-row:last-child {
  border-bottom: none;
}

.pricing-template-row__name {
  flex: 1;
  font-weight: 600;
}

.pricing-template-row__fees {
  font-size: 0.875rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.pricing-template-row__actions {
  display: flex;
  gap: 0.5rem;
}

.stripe-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background: #635bff1a;
  color: #635bff;
}

.details-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
}

.details-badge--confirmed {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.details-badge--pending {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

/* ── Accessibility utility ───────────────────────────────────────────────── */
.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;
}

/* ── File upload — progress bar ──────────────────────────────────────────── */
.upload-progress {
  height: 3px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 0.375rem 0;
}

.upload-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width 0.15s ease;
}

/* ── File upload — upload zone (assets step) ─────────────────────────────── */
.upload-zone {
  margin: 0.75rem 0;
}

.upload-zone__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}

.upload-zone__label:hover,
.upload-zone__label.is-dragging {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle, color-mix(in srgb, var(--color-accent) 6%, transparent));
}

.upload-zone__label.is-uploading {
  opacity: 0.6;
  pointer-events: none;
}

.upload-zone__label svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-muted);
  flex-shrink: 0;
}

.upload-zone__text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.upload-zone__note {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.upload-zone__status {
  font-size: 0.8125rem;
  margin: 0.375rem 0 0;
  text-align: center;
}

/* ── Chat input row (message box + attachment) ───────────────────────────── */
.chat__reply-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

/* Paperclip / attachment icon button */
.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.upload-btn {
  color: var(--color-muted);
}

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

.upload-btn svg {
  width: 1rem;
  height: 1rem;
}

/* ── Chat attachment — image ─────────────────────────────────────────────── */
.chat-attachment-image-wrap {
  position: relative;
  margin-top: 0.5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: 20rem;
}

.chat-attachment-image {
  display: block;
  max-width: 100%;
  max-height: 16rem;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised, var(--color-border));
  min-height: 2rem;
}

/* Floating download overlay for image attachments — admins need to grab
   originals even when images render inline. */
.chat-attachment-image__dl {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(36, 35, 36, 0.72);
  color: var(--color-white);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.chat-attachment-image-wrap:hover .chat-attachment-image__dl,
.chat-attachment-image__dl:focus-visible {
  opacity: 1;
}
.chat-attachment-image__dl:hover {
  background: rgba(36, 35, 36, 0.88);
}
.chat-attachment-image__dl svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* ── Chat attachment — file download card ────────────────────────────────── */
.chat-attachment-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  margin-top: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised, transparent);
  max-width: 20rem;
}

.chat-attachment-card > svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-muted);
  flex-shrink: 0;
}

.chat-attachment-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.chat-attachment-card__name {
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-attachment-card__size {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.chat-attachment-card__dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-muted);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.chat-attachment-card__dl:hover {
  color: var(--color-text);
  background: var(--color-border);
}

.chat-attachment-card__dl svg {
  width: 1rem;
  height: 1rem;
}

/* Text-style "Download" button used on admin file cards — keeps the icon
   sized like the rest of the btn--small set. */
.chat-attachment-card__dl-text {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
.chat-attachment-card__dl-text svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* ── Admin — form proceed hint (new project) ─────────────────────────────── */
.form-proceed-hint {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0.75rem 0 0.25rem;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--color-accent);
  background: var(--color-white);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Admin — preview image upload section ────────────────────────────────── */
.preview-upload-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 0.25rem;
}

.preview-upload-section__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin: 0;
}

.preview-upload-thumb {
  width: 100%;
  max-height: 8rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.preview-upload-thumb__img {
  width: 100%;
  height: 8rem;
  object-fit: cover;
  display: block;
}

.preview-upload-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.preview-upload-label {
  cursor: pointer;
}

.preview-upload-label[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.preview-upload-remove {
  color: var(--color-accent);
}

/* ── Admin — kanban card thumbnail ───────────────────────────────────────── */
.kanban-card__thumb {
  width: 100%;
  height: 5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
  background: var(--color-bg);
}

.kanban-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Terms acceptance modal ──────────────────────────────────────────── */

.terms-scroll {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: var(--color-white);
}

.terms-scroll h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.terms-scroll h4 {
  margin: 1rem 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.terms-scroll p {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.terms-links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.terms-links a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.terms-links a:hover {
  opacity: 0.85;
}

/* ── Domain preferences ─────────────────────────────────────────────────── */

.domain-suggestions-field {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1rem;
}

.domain-suggestions-field .field__legend {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.domain-suggestions-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.domain-preferences {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.domain-preferences__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.domain-preferences__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.domain-preferences__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.domain-preferences__note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.asset-image-consent {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-top: 0.75rem;
}

.asset-image-consent__intro {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.asset-image-consent__checks {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.6);
}

.asset-image-consent__checks[hidden] {
  display: none;
}

.asset-image-consent__checks-intro {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}

.asset-image-consent__check {
  margin: 0;
}

.project-domains {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.875rem;
}

.project-domains__label {
  font-weight: 600;
  color: var(--color-text-muted);
}

.project-domains__list {
  color: var(--color-text);
}