/* Sara shoot guide - standalone stylesheet
   Token layering mirrors production: ref (raw palette) -> semantic (mode aware) -> alias (what components use).
   Components never touch raw hex. Layout follows the product onboarding sequence:
   zinc-50 canvas, small wordmark, centred dot progress with a back chevron, one centred column,
   white cards, a black 56px rounded-12 action. Buttons follow the product family (rounded-12, regular weight). */

/* ---------- 1. Ref tokens ---------- */
:root {
  --ref-white: #ffffff;
  --ref-black: #000000;

  --ref-zinc-50: #fafafa;
  --ref-zinc-100: #f4f4f5;
  --ref-zinc-200: #e4e4e7;
  --ref-zinc-300: #d4d4d8;
  --ref-zinc-400: #a1a1aa;
  --ref-zinc-500: #71717a;
  --ref-zinc-600: #52525b;
  --ref-zinc-700: #3f3f46;
  --ref-zinc-800: #27272a;
  --ref-zinc-900: #18181b;
  --ref-zinc-950: #09090b;

  --ref-vermillon-50: #fff4e6;
  --ref-vermillon-100: #ffebe0;
  --ref-vermillon-200: #ffdcca;
  --ref-vermillon-300: #ffc4ae;
  --ref-vermillon-400: #ff906b;
  --ref-vermillon-500: #fc5f2b;
  --ref-vermillon-600: #cb3000;
  --ref-vermillon-700: #ab2200;
  --ref-vermillon-800: #810800;
  --ref-vermillon-900: #560000;

  --ref-green-50: #f4fff8;
  --ref-green-500: #1de288;
  --ref-green-700: #009655;
  --ref-green-800: #005b2e; /* Production green-800; accessible on green-50. */

  --ref-yellow-50: #f7fedc;
  --ref-yellow-500: #acbc00;
  --ref-yellow-700: #626d00; /* text on yellow-50: 5.4:1 */

  --ref-pink-50: #fff2ff;
  --ref-pink-500: #ff68de;
  --ref-pink-700: #b01295;

  --ref-zinc-alpha-dark-4: rgba(24, 24, 27, 0.04);
  --ref-zinc-alpha-dark-5: rgba(0, 0, 0, 0.05);
  --ref-zinc-alpha-dark-6: rgba(24, 24, 27, 0.06);
  --ref-zinc-alpha-dark-10: rgba(24, 24, 27, 0.10);
  --ref-zinc-alpha-dark-16: rgba(24, 24, 27, 0.16);
  --ref-zinc-alpha-dark-50: rgba(24, 24, 27, 0.50);
  --ref-zinc-alpha-light-70: rgba(255, 255, 255, 0.70);
  --ref-vermillon-alpha-10: rgba(252, 95, 43, 0.10);
  --ref-vermillon-alpha-40: rgba(252, 95, 43, 0.40);

  --ref-font-sans: "NB International Pro", "NB International", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ref-font-mono: "NB International Pro Mono", "NB International Mono", "SF Mono", Menlo, Consolas, monospace;

  --ref-radius-xs: 4px;
  --ref-radius-sm: 6px;
  --ref-radius-md: 8px;
  --ref-radius-lg: 12px;
  --ref-radius-xl: 16px;
  --ref-radius-2xl: 24px;
  --ref-radius-full: 9999px;

  --ref-shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.04);
  --ref-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ref-shadow-md: 0 24px 24px -12px rgba(24, 24, 27, 0.10);
  --ref-shadow-lg: 0 40px 48px -24px rgba(24, 24, 27, 0.16);
  --ref-shadow-card: 0 1px 2px rgba(24, 24, 27, 0.04), 0 12px 32px -16px rgba(24, 24, 27, 0.12);
  --ref-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

  --ref-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ref-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ref-ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ref-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ---------- 2. Semantic tokens (light mode) ---------- */
:root {
  --bg-primary: var(--ref-white);
  --bg-secondary: var(--ref-zinc-50);
  --bg-tertiary: var(--ref-zinc-100);
  --bg-inverse: var(--ref-zinc-900);
  --bg-brand-subtle: var(--ref-vermillon-50);
  --bg-success-subtle: var(--ref-green-50);
  --bg-warning-subtle: var(--ref-yellow-50);
  --bg-error-subtle: var(--ref-pink-50);
  --bg-hover: var(--ref-zinc-alpha-dark-4);
  --bg-pressed: var(--ref-zinc-alpha-dark-6);
  --bg-scrim: var(--ref-zinc-alpha-dark-50);

  --text-primary: var(--ref-zinc-900);
  --text-secondary: var(--ref-zinc-600);   /* 7.5:1 on zinc-50 */
  --text-tertiary: var(--ref-zinc-600);    /* zinc-500 fails 4.5:1 on zinc-50 at small sizes; kept readable */
  --text-inverse: var(--ref-white);
  --text-brand: var(--ref-vermillon-600);
  --text-success: var(--ref-green-800);
  --text-warning: var(--ref-yellow-700);
  --text-error: var(--ref-pink-700);

  --border-default: var(--ref-zinc-200);
  --border-strong: var(--ref-zinc-300);
  --border-control: var(--ref-zinc-500);   /* 4.6:1 on white for form control boundaries */
  --border-subtle: var(--ref-zinc-alpha-dark-6);
  --border-inverse: var(--ref-zinc-700);
  --border-brand: var(--ref-vermillon-500);

  --icon-brand: var(--ref-vermillon-500);
  --icon-success: var(--ref-green-500);
  --icon-warning: var(--ref-yellow-500);
  --icon-error: var(--ref-pink-500);

  --focus-default: var(--ref-zinc-900);

  --button-primary-bg: var(--ref-zinc-900);
  --button-primary-bg-hover: var(--ref-zinc-800);
  --button-primary-text: var(--ref-white);
  --button-secondary-bg: transparent;
  --button-secondary-border: var(--ref-zinc-400);
  --button-secondary-text: var(--ref-zinc-900);
  --button-ghost-text: var(--ref-zinc-600);

  --progress-dot: var(--ref-zinc-300);
  --progress-dot-done: var(--ref-zinc-500);
  --progress-dot-active: var(--ref-vermillon-500);

  --font-sans: var(--ref-font-sans);
  --font-mono: var(--ref-font-mono);
  --tracking-heading: -0.02em;             /* 32px x -0.02em = -0.64px, as in the product H2 */

  --radius-xs: var(--ref-radius-xs);
  --radius-sm: var(--ref-radius-sm);
  --radius-md: var(--ref-radius-md);
  --radius-lg: var(--ref-radius-lg);
  --radius-xl: var(--ref-radius-xl);
  --radius-2xl: var(--ref-radius-2xl);
  --radius-full: var(--ref-radius-full);

  --shadow-xs: var(--ref-shadow-xs);
  --shadow-sm: var(--ref-shadow-sm);
  --shadow-md: var(--ref-shadow-md);
  --shadow-lg: var(--ref-shadow-lg);
  --shadow-card: var(--ref-shadow-card);
  --shadow-xl: var(--ref-shadow-xl);

  --ease-out-expo: var(--ref-ease-out-expo);
  --ease-out-quint: var(--ref-ease-out-quint);
  --ease-out-soft: var(--ref-ease-out-soft);
  --ease-out: var(--ref-ease-out);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 240ms;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --column: 35rem;          /* 560px reading column */
  --column-welcome: 28rem;  /* 448px welcome column (max-w-md) */
  --card-welcome: 24rem;    /* 384px welcome card (max-w-sm) */
  --header-height: 3.5rem;
  --tap: 2.75rem;           /* 44px */
  --cta-height: 3.5rem;     /* 56px */
  --dome-height: 15rem;     /* 240px */
  --dome-bleed: 3.5rem;     /* 56px wider on each side, as in DomeImage */
}

/* ---------- 3. Alias tokens (what components use) ---------- */
:root {
  --color-background: var(--bg-primary);
  --color-canvas: var(--bg-secondary);
  --color-surface: var(--bg-primary);
  --color-surface-strong: var(--bg-tertiary);
  --color-foreground: var(--text-primary);
  --color-muted: var(--text-secondary);
  --color-faint: var(--text-tertiary);
  --color-border: var(--border-default);
  --color-border-strong: var(--border-strong);
  --color-border-control: var(--border-control);
  --color-brand: var(--icon-brand);
  --color-brand-text: var(--text-brand);
  --color-brand-subtle: var(--bg-brand-subtle);
  --color-success: var(--text-success);
  --color-success-subtle: var(--bg-success-subtle);
  --color-warning: var(--text-warning);
  --color-warning-subtle: var(--bg-warning-subtle);
  --color-error: var(--text-error);
  --color-error-subtle: var(--bg-error-subtle);
  --color-inverse: var(--bg-inverse);
  --color-inverse-text: var(--text-inverse);
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--color-canvas);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }
blockquote { margin: 0; }

:focus-visible {
  outline: 2px solid var(--focus-default);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--color-brand-subtle); }

/* Native hidden must win over component display declarations. */
[hidden] { display: none !important; }

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

.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  z-index: 100;
  padding: 0.625rem 1rem;
  background: var(--color-inverse);
  color: var(--color-inverse-text);
  border-radius: var(--radius-lg);
  text-decoration: none;
}
.skip-link:focus-visible { top: var(--space-4); outline-offset: 2px; }

/* ---------- Small text utilities ---------- */
.meta {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--color-muted);
  font-weight: 400;
}
.text-muted { color: var(--color-muted); }
.text-faint { color: var(--color-faint); }

/* ---------- Buttons (product family: rounded-12, regular weight) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--button-primary-bg-hover); }

.btn-secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border-color: var(--button-secondary-border);
}
.btn-secondary:hover { background: var(--bg-hover); }

.btn-ghost {
  background: transparent;
  color: var(--button-ghost-text);
}
.btn-ghost:hover { color: var(--color-foreground); background: var(--bg-hover); }

.btn-md { padding: 0.75rem 1rem; font-size: 0.875rem; }

/* Product primary action: 56px, full width, rounded-12, 16px text. */
.btn-cta {
  width: 100%;
  min-height: var(--cta-height);
  padding-block: 0;
  font-size: 1rem;
}
.btn-cta.is-saved {
  background: var(--color-surface);
  color: var(--color-foreground);
  border-color: var(--button-secondary-border);
  box-shadow: none;
}
.btn-cta.is-saved:hover { background: var(--bg-hover); }
.btn-cta .icon { width: 1rem; height: 1rem; }

.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: var(--tap);
  padding: 0 0.5rem;
  border: 0;
  background: none;
  color: var(--color-foreground);
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.link-btn:hover { text-decoration-color: currentColor; color: var(--color-foreground); }
.link-btn.is-quiet { color: var(--color-muted); }

/* ---------- App shell ---------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

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

.wordmark { display: inline-flex; align-items: center; min-height: var(--tap); }
.wordmark img { height: 1rem; width: auto; }
.wordmark img[data-missing] { display: none; }

/* Preview badge: prototype control, secondary to the experience */
.preview { position: relative; }
.preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.preview-toggle:hover, .preview-toggle[aria-expanded="true"] { background: var(--bg-hover); color: var(--color-foreground); }
.preview-dot {
  width: 0.375rem; height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-brand);
}
.preview-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  width: min(18rem, calc(100vw - 2rem));
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  z-index: 30;
  text-align: left;
}
.preview-title { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; }
.preview-text { font-size: 0.8125rem; line-height: 1.25rem; color: var(--color-muted); }
.preview-text + .preview-text { margin-top: 0.25rem; }
.preview-text.is-faint { color: var(--color-faint); }
.preview-panel .link-btn { padding: 0; margin-top: 0.25rem; }
.reset-confirm { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--color-border); }
.reset-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* ---------- Progress: back chevron + dots, product style ---------- */
.progress {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--space-4);
}
.progress-label {
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.back {
  position: absolute;
  left: var(--space-2);
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.back:hover { background: var(--bg-hover); color: var(--color-foreground); }
.back .icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.5; }

.dots { display: flex; align-items: center; justify-content: center; }
.dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-lg);
  -webkit-tap-highlight-color: transparent;
}
.dot span {
  display: block;
  width: 1.5rem;              /* w-6 when active */
  height: 0.375rem;           /* h-1.5 */
  transform: scaleX(0.3334);  /* w-2 at rest */
  border-radius: var(--radius-full);
  background: var(--progress-dot);
  transition: transform var(--duration-slow) var(--ease-out-soft), background-color var(--duration-base) var(--ease-out);
}
.dot.is-done span { background: var(--progress-dot-done); }
.dot[aria-current="step"] span { transform: scaleX(1); background: var(--progress-dot-active); }
.dot:hover span { background: var(--color-foreground); }
.dot[aria-current="step"]:hover span { background: var(--progress-dot-active); }
.dot:focus-visible { outline-offset: -3px; }

/* ---------- Stage: one centred column ---------- */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--space-4) var(--space-4) calc(var(--cta-height) + var(--space-12) + env(safe-area-inset-bottom));
}
.stage:focus { outline: none; }

.panel {
  width: 100%;
  max-width: var(--column);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.panel.is-entering { animation: panel-in var(--duration-slow) var(--ease-out-soft) both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  margin-bottom: var(--space-5);
}
.title {
  font-size: 1.75rem;        /* 28px on phones */
  line-height: 2.25rem;
  letter-spacing: var(--tracking-heading);
  max-width: 24ch;
}
.subtitle {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.5rem;       /* body 16/24 */
  max-width: 30rem;
  text-wrap: pretty;
}

/* ---------- Welcome ---------- */
.panel-welcome { max-width: var(--column-welcome); overflow-x: clip; }
.panel-welcome .panel-head { margin-bottom: 0; }
/* A simple landscape photograph with no vignette or blur. */
.dome-wrap {
  width: 100%;
  margin: var(--space-4) 0 var(--space-3);
  height: clamp(10.5rem, 40vw, 12rem);
}
.dome {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--color-surface-strong);
  border-radius: var(--radius-xl);
}
.dome img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Graceful fallback when the portrait is missing: a soft warm field, no invented picture. */
.dome.is-art img { display: none; }
.dome.is-art {
  background:
    radial-gradient(ellipse 50% 50% at 45% 50%, rgba(255, 244, 230, 0.9) 0%, rgba(255, 235, 224, 0.5) 50%, rgba(255, 235, 224, 0) 100%);
}
/* Welcome sequence: headline reveal, upward settle, then supporting content. */
#step-1.is-welcoming .title {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 40%, transparent 65%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 40%, transparent 65%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: welcome-heading-reveal 1800ms var(--ease-out-soft) both,
    welcome-heading-settle 800ms var(--ease-out-soft) 1900ms both;
}
#step-1.is-welcoming .subtitle { animation: welcome-content-in 700ms var(--ease-out-soft) 2600ms both; }
#step-1.is-welcoming .dome-wrap { animation: welcome-content-in 1800ms var(--ease-out-soft) 2950ms both; }
#step-1.is-welcoming .welcome-message { animation: welcome-content-in 900ms var(--ease-out-soft) 4000ms both; }
@keyframes welcome-heading-reveal {
  from { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  35% { opacity: 1; }
  to { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes welcome-heading-settle {
  from { transform: translateY(var(--welcome-start-y, 0px)); }
  to { transform: translateY(0); }
}
@keyframes welcome-content-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #step-1.is-welcoming :is(.title, .subtitle, .dome-wrap, .welcome-message) {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 1;
    transform: none;
  }
}

.card-welcome {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--card-welcome);
  margin: 0 auto;
  padding: var(--space-5) var(--space-6) var(--space-6);
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--ref-zinc-alpha-dark-5);
}
.card-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-bottom: var(--space-3);
}
.steps { display: flex; flex-direction: column; gap: var(--space-3); }
.steps li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-muted);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.25rem; height: 1.25rem;
  border-radius: var(--radius-full);
  background: var(--ref-zinc-500);
  color: var(--color-inverse-text);
  font-size: 0.6875rem;
  line-height: 1;
  font-weight: 500;
}

/* ---------- Cards and rows ---------- */
.card {
  width: 100%;
  padding: var(--space-1) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  text-align: left;
}
.card + .card { margin-top: var(--space-3); }

.rows { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  min-height: 3.5rem;
}
.row:last-child { border-bottom: 0; }
.row-num {
  flex: none;
  width: 1.25rem;
  align-self: flex-start;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--color-faint);
  font-variant-numeric: tabular-nums;
}
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.row-title { font-size: 1rem; line-height: 1.5rem; }
.row-sub { color: var(--color-muted); font-size: 0.875rem; line-height: 1.25rem; overflow-wrap: anywhere; }
.row-value {
  flex: none;
  font-size: 1rem;
  line-height: 1.5rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rows-facts .row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) 0;
}
.rows-facts .row-value { font-size: 1.25rem; line-height: 1.5rem; font-weight: 500; }
.rows-facts .time-period { font-size: 0.875rem; font-weight: 400; color: var(--color-muted); }
.rows-facts .row.is-quiet .row-title, .rows-facts .row.is-quiet .row-value { color: var(--color-muted); }
.rows-facts .row-value.is-pending { font-size: 0.875rem; font-weight: 400; }
.row-value.is-pending { font-size: 0.875rem; }
.rows-compact .row { padding: var(--space-3) 0; min-height: var(--tap); }
.themes .row, .looks .row { align-items: flex-start; }

.footnote {
  margin-top: var(--space-3);
  padding: 0 var(--space-1);
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.25rem;
}
.footnote + .footnote { margin-top: 0.25rem; }

/* Disclosure: optional detail, collapsed by default */
.disclosure {
  margin-top: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: 0.625rem var(--space-5);
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  line-height: 1.5rem;
  border-radius: var(--radius-xl);
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary:hover { background: var(--bg-hover); }
.summary-meta { display: block; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
.disclosure summary .chev { flex: none; color: var(--color-muted); transition: transform var(--duration-base) var(--ease-out); }
.disclosure[open] summary .chev { transform: rotate(180deg); }
.disclosure[open] summary { border-bottom: 1px solid var(--color-border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.disclosure-body { padding: 0 var(--space-5) var(--space-3); }
.disclosure-body .footnote { padding: 0; }
.disclosure-body .link-btn { flex: none; padding: 0 0.25rem; }

.person .initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-surface-strong);
  color: var(--color-foreground);
  font-size: 0.8125rem;
}

/* Decision card (steps 3 and 5) */
.decision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding: var(--space-5);
}
.decision-copy { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 16rem; }
.decision-copy .status { align-self: flex-start; margin-top: 0.375rem; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--color-muted);
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.status::before {
  content: "";
  width: 0.375rem; height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}
.status[data-state="approved"] { color: var(--color-success); border-color: transparent; background: var(--color-success-subtle); }
.status[data-state="approved"]::before { background: var(--color-success); }
.status[data-state="changes"] { color: var(--color-warning); border-color: transparent; background: var(--color-warning-subtle); }
.status[data-state="changes"]::before { background: var(--color-warning); }
.status[data-state="pending"]::before { background: var(--color-brand); }

.notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-brand-subtle);
  color: var(--color-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.notice .icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--color-brand-text); }

/* Optional checkbox: quiet inline, not a task card */
.checklist { margin-top: var(--space-4); padding: 0 var(--space-1); }
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-2) 0;
  cursor: pointer;
}
.check-body { display: flex; flex-direction: column; gap: 0.125rem; }
.check-label { font-size: 0.9375rem; line-height: 1.375rem; }
.check-hint { font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
.check input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem; height: 1.25rem;
  margin: 0.0625rem 0 0;
  flex: none;
  border: 1.5px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.check input::after {
  content: "";
  width: 0.625rem; height: 0.375rem;
  border-left: 2px solid var(--color-inverse-text);
  border-bottom: 2px solid var(--color-inverse-text);
  transform: rotate(-45deg) scale(0);
  transform-origin: 40% 40%;
  transition: transform var(--duration-base) var(--ease-out);
}
.check input:checked { background: var(--color-inverse); border-color: var(--color-inverse); }
.check input:checked::after { transform: rotate(-45deg) translateY(-1px) scale(1); }
.check input:focus-visible { outline: 2px solid var(--focus-default); outline-offset: 2px; }
.check input:checked + .check-body .check-label { color: var(--color-muted); }

/* Fields */
.field { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--space-4) 0; }
.field label { font-size: 1rem; line-height: 1.5rem; }
.field .hint { color: var(--color-muted); font-size: 0.8125rem; line-height: 1.25rem; }
.field .error { color: var(--color-error); font-size: 0.8125rem; line-height: 1.25rem; }
.field .error:empty { display: none; }
textarea {
  width: 100%;
  min-height: 5rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-foreground);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  resize: vertical;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
textarea:focus { outline: none; border-color: var(--focus-default); box-shadow: 0 0 0 3px var(--ref-zinc-alpha-dark-6); }
textarea[aria-invalid="true"] { border-color: var(--color-error); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Review save state: one concise confirmation */
.save-state {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  animation: fade-in var(--duration-base) var(--ease-out) both;
}
.save-state:focus { outline: 2px solid var(--focus-default); outline-offset: 2px; }
.save-icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1875rem; color: var(--color-success); }
.save-label { font-size: 1rem; line-height: 1.5rem; }
.save-list { display: flex; flex-direction: column; gap: 0.125rem; margin-top: 0.125rem; color: var(--color-muted); font-size: 0.875rem; line-height: 1.25rem; }
.review-save { display: flex; justify-content: center; margin-top: var(--space-3); }
.after {
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  text-align: center;
}

/* ---------- Main action ---------- */
/* Keep the primary action reachable throughout the onboarding flow. */
.actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: var(--space-3) var(--space-6) calc(var(--space-4) + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, var(--color-canvas) 35%);
}
.actions .btn-cta { max-width: var(--column); }
.actions.is-welcome .btn-cta { max-width: var(--column-welcome); }

/* ---------- Dialog ---------- */
.dialog {
  width: min(36rem, calc(100vw - 2rem));
  max-height: min(88dvh, 48rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  color: var(--color-foreground);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dialog::backdrop { background: var(--bg-scrim); }
.dialog[open] { animation: dialog-in var(--duration-base) var(--ease-out-soft) both; }
.dialog[open]::backdrop { animation: fade-in var(--duration-base) var(--ease-out) both; }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: min(88dvh, 48rem);
}
.dialog-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.dialog-head h2 { font-size: 1.25rem; line-height: 1.75rem; }
.dialog-desc { margin-top: 0.25rem; color: var(--color-muted); font-size: 0.875rem; line-height: 1.25rem; }
.dialog-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap); height: var(--tap);
  margin: -0.5rem -0.75rem 0 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  cursor: pointer;
  color: var(--color-muted);
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.dialog-close:hover { background: var(--bg-hover); color: var(--color-foreground); }
.dialog-close .icon { width: 1.125rem; height: 1.125rem; }

.dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--space-6) var(--space-5);
}
.section + .section { margin-top: var(--space-5); }
.section-heading {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}
.prompts { display: flex; flex-direction: column; }
.prompt {
  display: flex;
  gap: var(--space-3);
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 1rem;
  line-height: 1.5rem;
}
.prompt:last-child { border-bottom: 0; }
.prompt .row-num { margin-top: 0.125rem; }
.opening-lines { display: grid; gap: var(--space-3); padding: var(--space-2) 0 0; }
.opening-lines > p { font-size: 1rem; line-height: 1.5rem; }
.dialog-body .footnote { padding: 0; margin-top: var(--space-2); }
.scope {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.dialog-foot {
  flex: none;
  max-height: 60%;
  overflow: auto;
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-canvas);
}
.decision-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.decision-state { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; flex: 1 1 14rem; }
.decision-state .status { align-self: flex-start; }
.decision-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.decision-summary { color: var(--color-muted); font-size: 0.875rem; line-height: 1.25rem; }
.decision-note-preview {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-left: 2px solid var(--color-border-strong);
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.375rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.changes-form { margin-top: var(--space-2); }
.changes-form .field { padding-top: var(--space-2); padding-bottom: 0; }

/* ---------- Icons ---------- */
.icon { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
  .header { padding: 0 var(--space-6); }
  /* Product: progress fixed top centre; back chevron sits just left of the dots. */
  .progress {
    position: absolute;
    top: 0.375rem;
    left: 50%;
    translate: -50% 0;
    padding: 0 var(--space-12);
  }
  .back { left: 0; }
  .stage { padding: var(--space-8) var(--space-6) calc(var(--cta-height) + var(--space-12) + env(safe-area-inset-bottom)); }
  .title { font-size: 2rem; line-height: 2.5rem; }
}

@media (max-width: 767px) {
  :root { --dome-height: 14rem; }
  .panel-head { margin-bottom: var(--space-4); }
  .card { padding-left: var(--space-4); padding-right: var(--space-4); }
  .card-welcome { padding: var(--space-4) var(--space-5) var(--space-5); margin-top: 0; }
  .decision { padding: var(--space-4); }
  .decision .btn { width: 100%; }
  .disclosure summary, .disclosure-body { padding-left: var(--space-4); padding-right: var(--space-4); }

  .actions { padding-inline: var(--space-4); }

  /* Review sheet: near full height, short header, body scrolls on its own, actions reachable. */
  .dialog {
    width: 100vw;
    max-width: none;
    height: calc(100dvh - 1.5rem);
    max-height: none;
    margin: auto 0 0;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  }
  .dialog[open] { animation-name: sheet-in; }
  @keyframes sheet-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .dialog-inner { height: 100%; max-height: none; }
  .dialog-head { padding: var(--space-4) var(--space-4) var(--space-3); }
  .dialog-body { padding: var(--space-3) var(--space-4) var(--space-4); }
  .dialog-foot {
    max-height: 70%;
    padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  }
  .decision-actions { width: 100%; }
  .decision-actions .btn { flex: 1 1 auto; }
}

@media (max-width: 380px) {
  :root { --dome-height: 11.5rem; --dome-bleed: 2.5rem; }
  .title { font-size: 1.625rem; line-height: 2.125rem; }
  .row { gap: var(--space-3); }
  .decision-actions .btn { flex-basis: 100%; }
  .dot { width: var(--tap); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.keyboard-input .panel.is-entering,
.keyboard-input .dialog[open],
.keyboard-input .dialog[open]::backdrop { animation: none; }

/* A saved review closes the form; editing brings it back explicitly. */
.review-editor { display: grid; gap: var(--space-4); }
html:has(dialog[open]) { overflow: hidden; }

.dialog.is-requesting .decision-row { display: none; }

/* The welcome reads as a personal introduction, with the purpose grouped together. */
.panel-welcome .welcome-message {
  max-width: var(--column-welcome);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
}
.welcome-message .card-title { margin-bottom: var(--space-2); }
.welcome-message > p { color: var(--color-muted); font-size: 1rem; line-height: 1.5rem; }
.welcome-message > p + p { margin-top: var(--space-3); }
.welcome-message .welcome-reassurance {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.panel-welcome .dome-wrap { margin-top: var(--space-4); margin-bottom: var(--space-4); }
@media (max-width: 767px) {
  .panel-welcome .welcome-message { padding: var(--space-4) var(--space-5); }
}
/* Shoot guide: September 25 annotation pass. */
.sara-name { display: block; white-space: nowrap; }
#portrait { height: auto; aspect-ratio: 16 / 9; border-radius: 16px; }
#portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 16px; }
.team-person { flex: 0 0 calc((100% - 32px) / 3); min-width: 0; text-align: center; }
.team-person img, .person-placeholder { width: 128px; height: 128px; aspect-ratio: 1; border-radius: 50%; margin: 0 auto; }
.team-person img { object-fit: cover; object-position: center 35%; }
.person-placeholder { display: grid; place-items: center; background: var(--bg-tertiary); color: var(--text-secondary); font-size: 36px; }
.team-person > div { padding-top: 14px; }
.team-person h3 { font-size: 16px; line-height: 1.4; font-weight: 400; }
.team-person p { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin-top: 4px; }
.team-person a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; font-size: 13px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.usage-card { margin-top: 16px; }
.capture-card { padding: 20px; }
.capture-card .card-title, .usage-card .card-title { margin-bottom: 0; }
.capture-card .row:last-child, .usage-card .row:last-child { padding-bottom: 0; }
@media (max-width: 767px) { .shoot-reassurance { display: block; } }
.wardrobe-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.look-card { border-radius: 20px; background: var(--bg-primary); box-shadow: var(--shadow-card); overflow: hidden; }
.look-card img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.look-card > div { padding:18px; }
.look-card h3 { font-weight:400;font-size:18px;margin-bottom:8px; }
.look-card p { font-size:14px;line-height:1.5;color:var(--text-secondary); }
.look-card > .look-visual { position: relative; padding: 0; }
.image-label { position: absolute; bottom: 12px; left: 12px; max-width: calc(100% - 24px); padding: 5px 8px; border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font-size: 12px; line-height: 16px; }
.equipment-note {margin-top:12px;}
.equipment-note p,.recap p,.completion-success p {font-size:16px;line-height:1.5;color:var(--text-secondary);text-wrap:pretty;}
.reminder-facts { margin: 0; }
.reminder-facts > div { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.reminder-facts > div:first-child { padding-top: 0; }
.reminder-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.reminder-facts dt { color: var(--text-secondary); font-size: 14px; line-height: 22px; }
.reminder-facts dd { margin: 0; font-size: 15px; line-height: 22px; color: var(--text-primary); }
.recap .reminder-timezone { margin-top: 16px; font-size: 13px; line-height: 20px; }
.reminder-prep { padding: 20px; }
.reminder-prep .card-title { margin-bottom: 8px; }
.reminder-prep p { font-size: 15px; line-height: 24px; color: var(--text-secondary); }
#completion-form > .completion-note { margin: 20px auto 8px; padding: 0 12px; }
.completion-note span { display: block; }
.completion-mark {width:48px;height:48px;border-radius:50%;background:var(--bg-primary);border:1px solid var(--border-default);display:grid;place-items:center;font-size:24px;margin-bottom:8px;}
.completion-success .link-btn {margin-top:20px;}
.form-error {color:var(--text-error);font-size:14px;line-height:1.5;margin-top:12px;}
.after {text-wrap:balance;max-width:440px;margin-inline:auto;}
.title:focus {outline:none;}
@media(max-width:767px){.sara-name{display:block;} .team-grid{gap:28px 16px;} .team-person{flex-basis:calc((100% - 16px)/2);} .team-person img,.person-placeholder{width:112px;height:112px;} .wardrobe-grid{gap:12px;} .look-card>div{padding:14px;} .look-card h3{font-size:17px;} }
@media(max-width:359px){.wardrobe-grid{grid-template-columns:1fr;} .look-card img{aspect-ratio:1;object-position:50% 30%;}}
/* Private access screen, following Superpower's product login composition. */
.login-page {min-height:100svh;background:var(--bg-secondary);}
.login-shell {min-height:100svh;display:grid;grid-template-columns:1fr 1fr;padding:16px;gap:16px;}
.login-left {display:flex;flex-direction:column;padding:24px 40px;}
.login-logo {width:145px;height:auto;}
.login-form-wrap {width:100%;max-width:400px;margin:auto;padding:60px 0;}
.login-form-wrap h1 {font-size:48px;font-weight:400;line-height:1.1;letter-spacing:-.04em;margin-bottom:16px;}
.login-intro {color:var(--text-secondary);font-size:16px;line-height:1.5;margin-bottom:32px;text-wrap:pretty;}
.login-form label {display:block;font-size:14px;color:var(--text-secondary);margin-bottom:8px;}
.login-form input {height:56px;width:100%;border:1px solid var(--border-strong);border-radius:12px;padding:0 16px;font:inherit;background:transparent;}
.login-form .btn {width:100%;height:56px;margin-top:16px;}
.login-help {font-size:14px;line-height:1.5;color:var(--text-secondary);margin-top:20px;}
.login-help a {color:var(--text-brand);text-underline-offset:3px;}
.login-photo {width:100%;height:calc(100svh - 32px);object-fit:cover;border-radius:12px;object-position:center;}
@media(max-width:767px){.login-shell{display:block;padding:0;}.login-left{padding:28px 24px;min-height:100svh;}.login-form-wrap{padding:56px 0 100px;}.login-form-wrap h1{font-size:40px;}.login-photo{display:none;}}

.panel-welcome .dome-wrap {height:auto;}
.usage-card,.equipment-note,.recap,.completion-success {padding:20px;}
.preview-banner {text-align:center;font-size:13px;padding:8px 16px;background:var(--bg-brand-subtle);color:var(--text-secondary);}
.team-access {display:inline-block;margin-top:32px;font-size:13px;color:var(--text-secondary);text-underline-offset:3px;}
.admin-main {max-width:720px;padding:64px 24px;margin:auto;}
.admin-eyebrow {font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-secondary);margin-bottom:12px;}
.admin-main h1 {font-size:36px;letter-spacing:-.03em;margin-bottom:8px;}
.admin-status-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0 16px;}
.admin-status-grid .card,.admin-notes {padding:24px;}
.admin-status-grid h2 {font-size:24px;font-weight:400;line-height:1.2;margin:12px 0;}
.admin-status-grid .card+.card {margin-top:0;}
.admin-notes p {color:var(--text-secondary);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;}
.admin-actions {display:flex;gap:12px;margin:24px 0 16px;}
.admin-actions .btn {padding:14px 20px;min-height:48px;}
@media(max-width:500px){.admin-main{padding:32px 20px;}.admin-status-grid{grid-template-columns:1fr;}.admin-actions{flex-direction:column;}}
.team-person img {display:block;}
.look-card img {display:block;height:auto;}
@media(min-width:768px){.preview-mode .progress{top:2.375rem;}}
.preview-mode .header {justify-content:flex-start;gap:20px;}
.preview-mode .header .wordmark {margin-right:auto;}
@media(max-width:400px){.preview-mode .header {gap:12px;}.preview-mode .header .wordmark img {width:104px;}}

/* Keep the final recap, optional note, and confirmation on one spacing rhythm. */
#step-7 > .card, #completion-form > .card { padding: 24px; }
#step-7 > .card + .card, #completion-form, #completion-success { margin-top: 16px; }
#step-7 .card-title { margin: 0 0 16px; }
#step-7 .field { padding: 0; }
#step-7 .reminder-prep p + p { margin-top: 4px; }
#completion-form > .completion-note { margin: 24px auto 0; padding: 0 16px; line-height: 1.6; }
@media(max-width:767px) {
  #step-7 > .card, #completion-form > .card { padding: 20px; }
}