/* ============================================================
 * Easyshoots Brand Bible — Orders Overview Test CSS
 * ------------------------------------------------------------
 * Scope of this file: only the components needed for the
 * Orders Overview page integration test. The full brand system
 * lives in brand/BRAND.md — refer to it for components not
 * covered here (forms, emails, dashboard stat tiles, etc.).
 *
 * Fonts (Inter + Montserrat) must be loaded separately —
 * see README.md "Setup" step 1.
 *
 * Class collisions: this CSS uses generic selectors
 * (.btn-primary, .badge, .order-card, etc.) per BRAND.md.
 * If Softr's internal styles win on specificity, see
 * README.md "Known issues" for the recommended escalation.
 * ============================================================ */


/* ============================================================
 * 1. Tokens
 * ============================================================ */

:root {
  /* Fonts */
  --font:    'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Montserrat', 'Inter', sans-serif;

  /* Surfaces */
  --bg:           #f2f2f2;
  --surface:      #ffffff;
  --surface-soft: #fafafa;

  /* Text */
  --ink:         #1a1a1a;
  --ink-soft:    #555555;
  --ink-mute:    #888888;
  --ink-subtle:  #b0b0b0;
  --ink-hint:    #c0c0c0;

  /* Borders */
  --border-light:  rgba(0, 0, 0, 0.05);
  --border:        rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.13);

  /* Radii */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 24px;

  /* Primary action — softened charcoal, NOT pure black.
     Hover lightens (not darkens) for clearer tactile feedback. */
  --primary:       #262626;
  --primary-hover: #525252;

  /* Semantic — three-color status system (5.3 in BRAND.md) */
  --green:      #4BB877;
  --green-soft: rgba(75, 184, 119, 0.10);
  --green-text: #2E7D52;

  --orange:      #F0883A;
  --orange-soft: rgba(240, 136, 58, 0.10);
  --orange-text: #B05A10;

  --red:      #E8453C;
  --red-soft: rgba(232, 69, 60, 0.09);
  --red-text: #A32D2D;

  /* Pickup tag — teal accent (used on meta tags only) */
  --teal:      #2BBFB0;
  --teal-soft: rgba(43, 191, 176, 0.10);
  --teal-text: #0F6E56;

  /* Rainbow — signature accent, used sparingly */
  --rainbow: linear-gradient(
    to right,
    #F06EA0, #E8453C, #F0883A, #F2C94C,
    #4BB877, #2BBFB0, #4A90D9, #6B6FD4, #A76BC7
  );
}


/* ============================================================
 * 2. Page-level base
 * ============================================================ */

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
 * 3. Top bar (logo only — no rainbow strip directly underneath)
 *
 * The rainbow accent is reserved for the eyebrow (asymmetric
 * 15:85 split, see §6) and the email header per BRAND.md.
 * It does NOT appear as a full-width strip under the page nav.
 * ============================================================ */

.es-topbar {
  display: flex;
  align-items: center;
  height: 110px;
  padding: 0 32px;
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
}
.es-topbar-logo {
  height: 72px;
  width: auto;
  display: block;
}


/* ============================================================
 * 4. Page container
 * ============================================================ */

.es-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}


/* ============================================================
 * 5. Page heading — eyebrow with asymmetric 15:85 rainbow split
 * (BRAND.md §5.6.3). The text sits between two rainbow segments
 * that together render the full spectrum exactly once, with no
 * color hidden behind the text. The warm colors are compressed
 * to ~25% of the gradient so the eye still reads it as balanced
 * after the asymmetric split.
 *
 * Markup pattern:
 *   <p class="es-eyebrow">
 *     <span class="es-eyebrow-left"  aria-hidden="true"></span>
 *     <span class="es-eyebrow-text">Order overview</span>
 *     <span class="es-eyebrow-right" aria-hidden="true"></span>
 *   </p>
 *
 * The flex 15:85 split distributes remaining space (after text +
 * gaps) regardless of label length, so the proportions hold for
 * "Orders" as well as for "Project completed — delivery summary".
 * ============================================================ */

.es-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  font-family: var(--font);
  font-size: 14px; /* 25% larger than the standard 11px eyebrow on dense pages */
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.es-eyebrow-left,
.es-eyebrow-right {
  height: 3px;
  border-radius: 99px;
  background-image: linear-gradient(
    to right,
    #F06EA0 0%,
    #E8453C 7%,
    #F0883A 15%,
    #F2C94C 25%,
    #4BB877 40%,
    #2BBFB0 55%,
    #4A90D9 70%,
    #6B6FD4 85%,
    #A76BC7 100%
  );
  background-repeat: no-repeat;
}
.es-eyebrow-left {
  flex: 15 1 0%;
  background-size: 666.67% 100%; /* 100/15 — sample first 15% of full rainbow */
  background-position: left center;
}
.es-eyebrow-right {
  flex: 85 1 0%;
  background-size: 117.65% 100%; /* 100/85 — sample last 85% of full rainbow */
  background-position: right center;
}
.es-eyebrow-text {
  flex-shrink: 0;
  white-space: nowrap;
}
.es-page-title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 200;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.es-page-title strong { font-weight: 700; }
.es-page-lead {
  margin: 0;
  max-width: 540px;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.7;
}


/* ============================================================
 * 5b. Stats summary — the at-a-glance counters at the top of
 *     the page (BRAND.md §5.5.1 stat-tile pattern). Four white
 *     cards, each with a small colored accent bar, an uppercase
 *     label, a big editorial number, and a one-line footer.
 *     The accent color signals which stage / metric the tile
 *     represents — same color taxonomy as the section labels.
 * ============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 24px 0 28px;
}
.stat-card {
  padding: 22px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
}
/* Top row of the stat card: label + colored line filling the rest. */
.stat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.stat-lbl {
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  white-space: nowrap;
}
.stat-accent {
  flex: 1;
  height: 2px;
  border-radius: 99px;
  background: var(--ink-mute);
}
.stat-accent--progress  { background: var(--orange); }
.stat-accent--delivered { background: var(--green); }
.stat-accent--alert     { background: var(--red); }
.stat-accent--total     { background: var(--rainbow); }
.stat-val {
  font-family: var(--display);
  font-weight: 200;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat-foot {
  margin-top: 8px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--ink-mute);
}


/* ============================================================
 * 6. Toolbar (search + filter pills + primary CTA)
 * ============================================================ */

.es-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 28px 0 24px;
}
.es-toolbar-search {
  flex: 1 1 280px;
  min-width: 220px;
}
.es-toolbar-search input {
  width: 100%;
  padding: 10px 16px;
  background: var(--surface);
  border: 0.5px solid var(--border-medium);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.es-toolbar-search input::placeholder { color: var(--ink-hint); }
.es-toolbar-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(38, 38, 38, 0.10);
}

/* The grey filter pills ("Status ↓", "Order type ↓") */
.es-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9.5px 16px;
  background: var(--surface);
  color: var(--ink-soft);
  border: 0.5px solid var(--border-medium);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.es-filter-pill:hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--ink);
  border-color: rgba(0, 0, 0, 0.20);
}

.es-toolbar-spacer { flex: 1; }


/* ============================================================
 * 7. Buttons (only what the orders page uses)
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.15s;
}
.btn:disabled, .btn.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* Primary — softened charcoal. Hover LIGHTENS (not darkens). */
.btn-primary       { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }

/* Outline — secondary action */
.btn-outline {
  padding: 9.5px 19.5px;
  background: var(--surface);
  color: var(--ink-soft);
  border: 0.5px solid var(--border-medium);
  font-weight: 500;
}
.btn-outline:hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--ink);
  border-color: rgba(0, 0, 0, 0.20);
}

/* Ghost — tertiary, link-like */
.btn-ghost {
  padding: 10px 14px;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 500;
}
.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink);
}


/* ============================================================
 * 8. Section spacing — gives breathing room between stage
 *    groups. The orders overview doesn't render explicit
 *    per-stage headers; the stage signal lives in the colored
 *    left stripe on each card (§9) and in the stat tiles at
 *    the top of the page. Sections still wrap each stage's
 *    cards as a group so the gap between stages stays
 *    consistent, even without a visible header.
 * ============================================================ */

.es-section { margin-top: 44px; }
.es-section:first-of-type { margin-top: 24px; }


/* ============================================================
 * 9. Order card
 *
 * Information hierarchy (top → bottom = most → least important):
 *   1. Order number      (Montserrat 500, 22px) — top-left, the
 *                        primary identifier customers reference
 *   2. Status badge      — top-right
 *   3. Estimated         — full-width compact row in the middle
 *      delivery
 *   4. Tags              — bottom-left meta row
 *   5. Created date      — bottom-right corner, smallest, muted
 *
 * Stage signaling:
 *   A 4px colored stripe runs along the left edge of every card,
 *   color matching the stage (grey / orange / green / red). This
 *   makes stages scannable while scrolling: identical-colored
 *   stripes line up vertically, the eye finds them instantly.
 *   The stripe is the primary stage signal, so the delivery row
 *   stays a neutral data row (no per-stage tint).
 * ============================================================ */

.order-card {
  position: relative;
  margin-bottom: 10px;
  padding: 18px 22px 16px 26px; /* extra left padding clears the inset stripe */
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 0.15s;
}
.order-card:hover { border-color: var(--border-medium); }

/* The stage stripe — a vertical pill inset from the card's
   rounded corners so it doesn't get clipped. Top/bottom inset
   of 14px stays clear of the 16px corner radius; rounded ends
   echo the card's curvature. */
.order-card::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 4px;
  background: var(--ink-mute); /* default = pre-shoot grey */
  border-radius: 99px;
}
.order-card--progress::before  { background: var(--orange); }
.order-card--delivered::before { background: var(--green); }
.order-card--alert::before     { background: var(--red); }

/* Top row: order number (L) + badge & dot-menu (R).
   Date is no longer here — it moved to the bottom row. */
.order-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.order-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.order-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dot-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  border: none;
  border-radius: var(--r-sm);
  color: #999;
  font-family: var(--font);
  font-size: 15px;
  cursor: pointer;
}
.dot-btn:hover { background: rgba(0, 0, 0, 0.08); }

/* Delivery info — compact inline label + value, no full-width
   bar. The label sits as a small uppercase eyebrow next to the
   readable date. Sits naturally between the top row and the
   tags row — no chrome, no bg, no border. */
.delivery-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px; /* row-gap for wrapped lines, column-gap between pairs */
  margin-bottom: 14px;
}
.delivery-line {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.delivery-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.delivery-val {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Bottom row: tags on the left, created-date small in the right.
   Date is the lowest-priority info per the hierarchy above.
   No border-top — the spacing alone separates it from the
   delivery line above. */
.order-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.order-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
}
.order-date {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-mute);
  white-space: nowrap;
}


/* ============================================================
 * 10. Status badges (the four client-facing stages)
 * ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 17px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border-radius: 99px;
}
.badge::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 99px;
}

/* Pre-shoot (Order received, scheduled, planned, products received, ready to shoot) */
.badge--open                { background: rgba(0, 0, 0, 0.05); color: #555; }
.badge--open::before        { background: var(--ink-mute); }

/* Shoot phase (Partially shot, photographed, editing images) */
.badge--progress            { background: var(--orange-soft); color: var(--orange-text); }
.badge--progress::before    { background: var(--orange); }

/* Delivered (Images delivered, project completed) */
.badge--delivered           { background: var(--green-soft); color: var(--green-text); }
.badge--delivered::before   { background: var(--green); }

/* Exception only — On hold. Don't use for routine flow. */
.badge--alert               { background: var(--red-soft); color: var(--red-text); }
.badge--alert::before       { background: var(--red); }


/* ============================================================
 * 11. Meta tags (bottom of order card)
 *     Smaller than badges (10px), no leading dot.
 * ============================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  border-radius: 99px;
}
.t-items    { background: rgba(0, 0, 0, 0.06); color: #666; }
.t-fixed    { background: var(--green-soft); color: var(--green-text); }
.t-flexible { background: var(--orange-soft); color: var(--orange-text); }
.t-custom   { background: var(--red-soft);   color: var(--red-text); }
.t-regular  { background: rgba(0, 0, 0, 0.05); color: #666; }
.t-pickup   { background: var(--teal-soft);  color: var(--teal-text); }


/* ============================================================
 * 12. Empty state (when a section has zero orders)
 * ============================================================ */

.es-empty {
  padding: 22px 24px;
  background: var(--surface);
  border: 0.5px dashed var(--border-medium);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
}


/* ============================================================
 * 13. Footer
 * ============================================================ */

.es-footer {
  margin-top: 48px;
  padding: 18px 24px;
  background: var(--surface-soft);
  border-top: 0.5px solid var(--border);
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-hint);
}


/* ============================================================
 * 14. ORDER DETAIL PAGE — additions
 *
 * Components used only on the order detail page. Added
 * incrementally on top of the canonical brand CSS that was
 * shipped with the orders-overview integration test. None of
 * the existing classes are modified — these are pure additions.
 * ============================================================ */


/* ---------- 14.1 Status panel (current-status hero card) ---------- */
.status-panel {
  margin-top: 28px;
  padding: 26px 28px 22px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
}
.status-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.status-panel__current {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.status-panel__next {
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: 4px;
  max-width: 540px;
}


/* ---------- 14.2 Stepper (8-step horizontal progress) ---------- */
.stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 22px;
}
.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0;
}
.step__bubble {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  background: var(--bg);
  color: var(--ink-subtle);
  border: 1.5px solid var(--bg);
  position: relative;
  z-index: 2;
}
.step__lbl {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-mute);
  text-align: center;
  margin-top: 10px;
  line-height: 1.3;
  max-width: 84px;
  hyphens: auto;
}
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 12px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 1.5px;
  background: var(--border-medium);
  z-index: 1;
}

/* Done — pre-shoot/open uses dark fill */
.step--done .step__bubble       { background: var(--ink); color: #fff; border-color: var(--ink); }
.step--done .step__lbl          { color: var(--ink-soft); }
.step--done:not(:last-child)::after { background: var(--ink); }

/* Current — colored ring matching the stage of that step */
.step--current .step__bubble {
  background: var(--surface);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.step--current .step__lbl    { color: var(--ink); font-weight: 600; }
.step--current.step--progress .step__bubble  { border-color: var(--orange); color: var(--orange-text); box-shadow: 0 0 0 3px var(--orange-soft); }
.step--current.step--delivered .step__bubble { border-color: var(--green);  color: var(--green-text);  box-shadow: 0 0 0 3px var(--green-soft); }


/* ---------- 14.3 Details card (key-value rows) ---------- */
.details-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 8px 28px;
}
.kv-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
  padding: 14px 0;
}
.kv-lbl {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.kv-val {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.kv-val .tag    { padding: 5px 14px; }
.kv-val--muted  { color: var(--ink-mute); font-size: 13px; }


/* ---------- 14.4 Form-card (CTA card with title + sub + button) ---------- */
.form-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
}
/* Card heading — same recipe as .status-panel__current so every card header matches */
.form-card__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.form-card__sub {
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 2px;
}


/* ---------- 14.5 Email pills (used inside form-card body) ---------- */
.email-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.email-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 99px;
  font-size: 12px;
  color: var(--ink-soft);
}
.email-pill__role {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-left: 4px;
}
.email-pill__remove {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--ink-mute);
  cursor: pointer; font-size: 14px; line-height: 1;
  border-radius: 99px;
}
.email-pill__remove:hover { background: rgba(0, 0, 0, 0.08); color: var(--ink); }


/* ---------- 14.6 Notes card ---------- */
.notes-card {
  padding: 20px 28px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
}
/* Notes card heading — same recipe as the other card headings */
.notes-card__lbl {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 12px;
}
.notes-card__text         { font-size: 14px; color: var(--ink); line-height: 1.6; }
.notes-card__text--empty  { color: var(--ink-hint); font-style: italic; }


/* ---------- 14.7 Sticky action bar (page footer actions) ---------- */
.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 0.5px solid var(--border);
  padding: 14px 24px;
  display: flex;
  justify-content: center;
  z-index: 50;
}
.actionbar__inner {
  max-width: 1100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.actionbar__hint {
  font-family: var(--font);
  font-size: 12px;
  color: var(--ink-mute);
}
.actionbar__hint strong { color: var(--ink); font-weight: 500; }
.actionbar__right { display: flex; gap: 8px; align-items: center; position: relative; }


/* ---------- 14.8 Dropdown menu (anchored above the ··· button) ---------- */
.dropdown {
  position: absolute;
  bottom: 56px;
  right: 0;
  background: var(--surface);
  border: 0.5px solid var(--border-medium);
  border-radius: var(--r-md);
  padding: 6px;
  min-width: 200px;
  z-index: 60;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
}
.dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
}
.dd-item:hover  { background: rgba(0, 0, 0, 0.04); }
.dd-item.danger { color: var(--red); }
.dd-divider     { height: 0.5px; background: var(--border); margin: 4px 0; }


/* ---------- 14.9 Back link (top of page, "← All orders") ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-mute);
  text-decoration: none;
}
.back-link:hover { color: var(--ink); }


/* ============================================================
 * 15. Account / settings layout
 *
 * Used by the Account settings page and the Client details page
 * (the two pages reached from the avatar in the top-right). Each
 * page has a `.settings-tabs` pill row at the top to switch
 * between the two sub-pages, and one or more `.settings-card`
 * blocks that group related fields.
 *
 * Form fields reuse the same recipe as the homepage contact form
 * (light grey `var(--bg)` background, transparent border that
 * darkens on focus), so the customer reads the whole portal as
 * one design system.
 *
 * The site-wide topbar (logo + nav + rainbow avatar) is NOT
 * rendered inside these pages — Softr injects it platform-wide
 * from the canonical homepage header.
 * ============================================================ */


/* 15.1 — Settings tabs. Pill row at the top of the account area.
   The active tab uses the same charcoal pill as the site-wide
   nav .is-active state, so it feels like an extension of the
   primary navigation. */

.settings-tabs {
  display: flex;
  gap: 6px;
  margin: 28px 0 24px;
  padding: 6px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  width: fit-content;
}
.settings-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: all 0.15s;
}
.settings-tab:hover { color: var(--ink); background: rgba(0, 0, 0, 0.04); }
.settings-tab.is-active { background: var(--primary); color: #fff; }
.settings-tab.is-active:hover { background: var(--primary-hover); }


/* 15.2 — Settings card. Same chrome as the order-card and
   stat-card: white surface, 0.5px border, large radius. Contains
   a head (title + description), a body (form fields), and a foot
   (right-aligned save actions). */

.settings-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
}

.settings-card-head {
  padding: 24px 32px 4px;
}
.settings-card-title {
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.settings-card-name {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.settings-card-desc {
  margin: 0;
  max-width: 60ch;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.settings-card-body { padding: 20px 32px 8px; }


/* 15.3 — Field grid + input recipe.
   Two-column responsive grid by default; add .field--full to
   span the whole row. Inputs match the homepage contact form
   exactly: light-grey background, transparent border that
   darkens to charcoal on focus with a 2px halo. */

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}

/* Three-column variant for the postcode / city / country line. */
.field-grid--postcode { grid-template-columns: 1fr 2fr 1fr; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }

.field-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--bg);
  border: 0.5px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.field-input::placeholder,
.field-textarea::placeholder { color: var(--ink-subtle); }
.field-input:hover,
.field-select:hover,
.field-textarea:hover { background: #eaeaea; }
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(38, 38, 38, 0.10);
}

.field-help {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-top: 2px;
}


/* 15.4 — Settings card footer: right-aligned save action plus an
   optional left-aligned timestamp ("Last updated …"). Soft hair-
   line separator above. */

.settings-card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 18px 32px 22px;
  margin-top: 8px;
  border-top: 0.5px solid var(--border-light);
}
.settings-card-foot-note {
  margin-right: auto;
  font-size: 12px;
  color: var(--ink-mute);
}


/* 15.5 — Toggle row + custom switch.
   Used in the Billing card to switch between "use the company
   address" and "use a different billing address". The row reads
   like a setting: label on the left, one-line description below,
   switch on the far right. */

.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: var(--surface-soft);
  border: 0.5px solid var(--border-light);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.settings-toggle-text { flex: 1; min-width: 0; }
.settings-toggle-lbl {
  display: block;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.settings-toggle-desc {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.5;
}

.switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  display: inline-block;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.switch-track {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 99px;
  transition: background 0.15s;
  cursor: pointer;
}
.switch-track::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 99px;
  transition: transform 0.18s ease-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }
.switch input:focus-visible + .switch-track {
  box-shadow: 0 0 0 2px rgba(38, 38, 38, 0.20);
}


/* 15.6 — Subsection inside a settings card.
   The Billing card has a nested address block ("Billing address")
   that appears below the toggle. Soft hairline divider above so
   it reads as a child of the toggle decision, not a sibling card.

   The toggle controls visibility: when the toggle is ON (default —
   "use company address for billing"), the subsection is hidden.
   When the user switches it OFF, the subsection reveals so they
   can enter a different address. Pure CSS via :has() — no JS. */

.settings-subsection {
  border-top: 0.5px solid var(--border-light);
  padding-top: 18px;
  margin-top: 4px;
}
.settings-subsection-title {
  margin: 0 0 14px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.settings-card:has(#same-address:checked) .settings-subsection {
  display: none;
}


/* ============================================================
 * 16. ORDER FORM components
 *
 * Used on the Fixed Order page (and reusable for Flexible /
 * Custom order forms in future). Strict superset of §1–§15 —
 * no existing classes are modified.
 *
 * Components:
 *   16.1  Lead → first-card spacing
 *   16.2  Availability grid (styleguide readiness pills)
 *   16.3  Chip / chip-group (radio + checkbox pill picker)
 *   16.4  Option stack (radio rows with descriptions)
 *   16.5  Prep list (info block above confirmation checkboxes)
 *   16.6  Check row (custom square checkbox + label)
 *   16.7  btn--large + submit-card footer
 *   16.8  Field-label required asterisk
 * ============================================================ */


/* ---------- 16.1 Lead → first-card spacing ----------
 * When a settings-card sits directly under the page lead (no
 * settings-tabs row between them, as on the Fixed Order page),
 * give the card explicit breathing room. Pages that DO have a
 * .settings-tabs row between the lead and the first card are
 * unaffected because of the adjacent-sibling selector.
 *
 * The .es-page-lead em rule emphasises a phrase inside the lead
 * paragraph (used on the Fixed Order page to highlight what a
 * fixed order does NOT include).
 */
.es-page-lead + .settings-card { margin-top: 32px; }
.es-page-lead em {
  font-style: normal;
  color: var(--ink);
  font-weight: 500;
}


/* ---------- 16.2 Availability grid ----------
 * A horizontal row of readiness pills. Each item shows whether
 * a styleguide that this order needs is filled in. Two states:
 *
 *   Ready    — green dot ✓, soft-grey card.
 *   Missing  — orange dot !, soft-orange card, clickable (the
 *              whole row becomes a link to the styleguide).
 *
 * The grid auto-fits so it renders cleanly with 1, 2, 3, or 4
 * required styleguides depending on the selected order type.
 */
.availability-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.availability-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-soft);
  border: 0.5px solid var(--border-light);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.availability-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--green-soft);
  color: var(--green-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.availability-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.availability-lbl {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.availability-status {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--green-text);
  margin-top: 2px;
}
.availability-arrow {
  flex-shrink: 0;
  color: var(--ink-mute);
  font-size: 16px;
  line-height: 1;
  transition: transform 0.15s, color 0.15s;
}
.availability-item.is-missing {
  background: var(--orange-soft);
  border-color: rgba(240, 136, 58, 0.20);
  cursor: pointer;
}
.availability-item.is-missing:hover {
  background: rgba(240, 136, 58, 0.16);
  border-color: rgba(240, 136, 58, 0.32);
}
.availability-item.is-missing:hover .availability-arrow {
  color: var(--orange-text);
  transform: translateX(2px);
}
.availability-item.is-missing .availability-dot {
  background: var(--orange);
  color: #fff;
}
.availability-item.is-missing .availability-status {
  color: var(--orange-text);
}
.availability-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--orange-text);
  font-weight: 500;
}


/* ---------- 16.3 Chip / chip-group ----------
 * Pill-style radio or checkbox picker. Used for Type of
 * photography, Positions, Speed, and similar short-label
 * choices. The native input is visually hidden but stays
 * focusable for keyboard / a11y.
 *
 * Two selected states distinguish the interaction:
 *   radio:checked     — charcoal fill, white text.
 *   checkbox:checked  — green soft fill + leading check glyph.
 *
 * Why the colour split: single-select reads as "this is the
 * mode" (commit), multi-select reads as "I added this" (build
 * up). Different intents, different visual feedback.
 */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  position: relative;
  display: inline-flex;
}
.chip > input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  background: var(--surface);
  color: var(--ink);
  border: 0.5px solid var(--border-medium);
  border-radius: 99px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}
.chip > input:hover + span,
.chip:hover > span {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.20);
}
.chip > input:focus-visible + span {
  box-shadow: 0 0 0 2px rgba(38, 38, 38, 0.20);
}
.chip > input[type="radio"]:checked + span {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.chip > input[type="radio"]:checked + span:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.chip > input[type="checkbox"]:checked + span {
  background: var(--green-soft);
  color: var(--green-text);
  border-color: rgba(75, 184, 119, 0.30);
  padding-left: 14px;
}
.chip > input[type="checkbox"]:checked + span::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 6px;
  margin-right: 8px;
  border-left: 1.5px solid var(--green-text);
  border-bottom: 1.5px solid var(--green-text);
  transform: rotate(-45deg) translate(1px, -2px);
}


/* ---------- 16.4 Option stack ----------
 * Vertical list of radio options that each need a short
 * description (cost, timing, conditions). Used for the Return
 * picker. Clicking anywhere in the row selects it; the selected
 * row gets a charcoal border + halo. Use chip-group instead when
 * the options don't need per-row context.
 */
.option-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.option-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: var(--surface-soft);
  border: 0.5px solid var(--border-light);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.15s;
}
.option-row:hover {
  background: rgba(0, 0, 0, 0.025);
  border-color: var(--border-medium);
}
.option-row > input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid var(--border-medium);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s;
}
.option-row > input:checked { border-color: var(--primary); }
.option-row > input:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--primary);
  border-radius: 50%;
}
.option-row:has(> input:checked) {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.option-row-text { display: flex; flex-direction: column; gap: 2px; }
.option-row-lbl {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.option-row-desc {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.5;
}


/* ---------- 16.5 Prep list ----------
 * Soft info block with a small title and bulleted list. Sits
 * above the confirmation checkboxes so the customer can read
 * the conditions they're about to confirm.
 */
.prep-list {
  padding: 18px 20px;
  background: var(--surface-soft);
  border: 0.5px solid var(--border-light);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.prep-list-title {
  margin: 0 0 8px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.prep-list ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.7;
}
.prep-list li::marker { color: var(--ink-subtle); }


/* ---------- 16.6 Check row ----------
 * Row with a custom square checkbox + label text. Used for the
 * two final confirmations (item prep, terms & conditions). The
 * checkbox fills charcoal when checked.
 */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
}
.check-row + .check-row { border-top: 0.5px solid var(--border-light); }
.check-row > input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid var(--border-medium);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s;
}
.check-row > input:hover { border-color: var(--ink-soft); }
.check-row > input:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.check-row > input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}
.check-row-text {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}
.check-row-text a { color: var(--ink); text-decoration: underline; }
.check-row-text a:hover { color: var(--primary-hover); }


/* ---------- 16.7 btn--large + submit-card footer ----------
 * Bigger primary CTA for the order-submit row. Combine with
 * .btn .btn-primary, e.g. <button class="btn btn-primary btn--large">.
 * .submit-foot is .settings-card-foot without the left-aligned
 * timestamp.
 */
.btn--large {
  padding: 14px 28px;
  font-size: 13px;
  border-radius: var(--r-md);
}
.submit-foot {
  justify-content: flex-end;
  gap: 12px;
}


/* ---------- 16.8 Field-label required asterisk ----------
 * Tiny red asterisk after labels. Pure visual cue — pair with
 * required="" on the input for actual form validation.
 */
.field-label .req {
  color: var(--red);
  margin-left: 2px;
}


/* ============================================================
 * 17. FLEXIBLE-ORDER FORM CALLOUT
 *
 * Used on the Flexible Order page. Strict superset of §1–§16 —
 * no existing classes are modified.
 *
 * The Flexible Order is driven by an auto-generated Google
 * Sheet (one row per product). This callout is the centerpiece
 * of the page: it makes the link to that sheet the dominant
 * visual element and pairs it with a secondary tutorial link
 * and a mobile tip.
 *
 * Components:
 *   17.1  Form callout block (icon + body + CTA)
 *   17.2  Form callout secondary link (with masked play glyph)
 *   17.3  Form callout tip strip (mobile hint, etc.)
 * ============================================================ */


/* ---------- 17.1 Form callout block ----------
 * Soft surface tile with a green left-accent bar. Layout: icon
 * tile on the left, copy + CTA stacked on the right. The big
 * charcoal CTA is .btn .btn-primary .btn--large with a trailing
 * .ext-icon (↗) so the customer knows it opens externally.
 *
 * The block sits inside .settings-card-body. Put the form-
 * completion checkbox in the same card body (below the tip
 * strip) so the action and its confirmation are paired.
 */
.form-callout {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 22px 24px;
  background: var(--surface-soft);
  border: 0.5px solid var(--border-light);
  border-left: 3px solid var(--green);
  border-radius: var(--r-md);
  margin-bottom: 20px;
}
.form-callout-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-soft);
  color: var(--green-text);
  border-radius: var(--r-md);
}
.form-callout-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.form-callout-body { flex: 1; min-width: 0; }
.form-callout-title {
  margin: 0 0 4px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.form-callout-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 56ch;
}
.form-callout-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.form-callout-actions .btn .ext-icon {
  display: inline-block;
  font-size: 11px;
  margin-left: 4px;
  transform: translateY(-1px);
}


/* ---------- 17.2 Form callout secondary link ----------
 * A small inline link that sits next to the primary CTA. Used
 * for the tutorial-video link. The leading play glyph is a
 * masked inline SVG so it inherits the link's text colour and
 * stays crisp at any DPI.
 */
.form-callout-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}
.form-callout-link:hover { color: var(--ink); }
.form-callout-link::before {
  content: '';
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='5 3 19 12 5 21 5 3'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='5 3 19 12 5 21 5 3'/></svg>") center/contain no-repeat;
}


/* ---------- 17.3 Form callout tip strip ----------
 * A soft grey bar that sits directly below the callout, used
 * for short contextual hints (e.g. "On mobile? Use the Sheets
 * app"). The <strong> inside it slightly darkens the prefix so
 * the eye lands on it first.
 */
.form-callout-tip {
  margin: 0 0 4px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.form-callout-tip strong { color: var(--ink-soft); font-weight: 600; }


/* ============================================================
 * 18. CUSTOM-ORDER PAGE
 *
 * Used on the Custom Order page. Strict superset of §1–§17 —
 * no existing classes are modified.
 *
 * The Custom Order page is an onboarding/intake step rather than
 * a self-service form. It presents three scenarios via an
 * .option-stack radio picker (§16.3 from the Fixed/Flexible
 * handoffs), then swaps the content of a single intake card
 * based on which scenario the customer picks. The swap is pure
 * CSS — page-level :has() rules on the radio's :checked state,
 * same mechanism as the billing-address reveal in the Client
 * details handoff.
 *
 * Scenarios:
 *   1. Similar to a previous custom order
 *   2. New kind of shoot we haven't done together yet
 *   3. First custom order ever
 *
 * Scenarios 1 + 2 share the same Google-Sheet intake (open the
 * auto-generated sheet, fill it in, return + confirm + T&C),
 * with scenario 1 revealing one extra field above the callout.
 * Scenario 3 mounts an inline Calendly scheduler in place.
 *
 * Components:
 *   18.   Scenario-picker reveal logic + the .field-stack /
 *         .field-row / .field--prev / .scenario-* helpers
 *   18.1  Form-callout red modifier (.form-callout--red)
 *   18.2  Calendly inline placeholder (.cal-placeholder)
 *
 * IDs the :has() rules depend on (must match the markup):
 *   #scen-similar   — scenario 1 radio
 *   #scen-new       — scenario 2 radio
 *   #scen-first     — scenario 3 radio
 * ============================================================ */


/* ---------- 18. Scenario picker + intake reveal ----------
 * Hidden-by-default state for every scenario sub-body, the
 * conditional previous-order field, and the conditional submit
 * footer. The :has() rules at the bottom of this section turn
 * exactly the right combination on for the selected scenario.
 *
 * Empty-state nudge (.scenario-empty) shows until ANY scenario
 * radio is checked, then disappears.
 */
.scenario-empty {
  padding: 28px 4px 8px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.6;
}
.scenario-empty strong { color: var(--ink); font-weight: 500; }

.scenario-body,
.field--prev,
.intake-card .scenario-foot { display: none; }

.es-page:has(#scen-similar:checked) .scenario-empty,
.es-page:has(#scen-new:checked)     .scenario-empty,
.es-page:has(#scen-first:checked)   .scenario-empty { display: none; }

/* Scenarios 1 + 2 share the same Google-Sheet intake. */
.es-page:has(#scen-similar:checked) .scenario-body--form,
.es-page:has(#scen-new:checked)     .scenario-body--form { display: block; }
.es-page:has(#scen-first:checked)   .scenario-body--first { display: block; }

/* Scenario 1 reveals one extra field — the previous order ref. */
.es-page:has(#scen-similar:checked) .field--prev { display: flex; }

/* Footer (Save as draft + Send request + foot-note) applies to
   scenarios 1 and 2 only. Scenario 3 is just a Calendly booking
   so it doesn't need a submit footer. */
.es-page:has(#scen-similar:checked) .scenario-foot,
.es-page:has(#scen-new:checked)     .scenario-foot { display: flex; }

/* Layout helpers used inside a scenario sub-body. */
.field-stack { display: flex; flex-direction: column; gap: 20px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
}


/* ---------- 18.1 Form callout red modifier ----------
 * The canonical .form-callout (§17.1) has a GREEN left accent
 * because Flexible orders use green. Custom orders are RED in
 * the brand palette, so on the Custom page the callout uses
 * this modifier to swap the accent + icon-tile colour to red.
 * Does NOT touch the shared §17 rules — it's a pure additive
 * override on top.
 *
 * Apply like: <div class="form-callout form-callout--red">…</div>
 */
.form-callout--red {
  border-left-color: var(--red);
}
.form-callout--red .form-callout-icon {
  background: var(--red-soft);
  color: var(--red-text);
}


/* ---------- 18.2 Calendly inline placeholder ----------
 * Visual stand-in for the Calendly inline-embed widget. At
 * integration time the developer replaces this block with the
 * live Calendly snippet:
 *
 *   <div class="calendly-inline-widget"
 *        data-url="https://calendly.com/<account>/<event>"
 *        style="min-width:320px;height:630px;"></div>
 *   <script src="https://assets.calendly.com/assets/external/widget.js" async></script>
 *
 * Until the swap, this block reads as a placeholder — soft
 * surface, Custom-red left accent, dashed border, centered
 * caption. Sized to roughly match Calendly's default inline
 * embed footprint (~630px), so the page layout doesn't shift
 * when the real widget mounts.
 */
.cal-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
  padding: 32px;
  background: var(--surface-soft);
  border: 1px dashed var(--border-medium);
  border-left: 3px solid var(--red);
  border-radius: var(--r-md);
  text-align: center;
}
.cal-placeholder-body {
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cal-placeholder-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red-soft);
  color: var(--red-text);
  border-radius: var(--r-md);
}
.cal-placeholder-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.cal-placeholder-title {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.cal-placeholder-desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.6;
}


/* ============================================================
 * §19  STYLEGUIDES LANDING — guide-grid + guide-card
 * ============================================================
 * Grid of one card per service. Each card carries a status
 * (Ready / In progress / Not started), a one-line description,
 * a "last updated" hint, and an arrow CTA. The whole card is
 * a single <a>, so anywhere is clickable. Strict superset of
 * §1–§18.2; no existing rule is touched.
 *
 * Pieces:
 *   .guide-summary           summary strip above the grid
 *     .guide-summary-item    one count + label pair
 *     .guide-summary-dot     coloured dot per status
 *   .guide-grid              auto-fit responsive grid
 *   .guide-card              single styleguide tile (anchor)
 *     .guide-card-head       status pill + arrow row
 *     .guide-status          pill, with --ready/--progress/--empty
 *     .guide-card-arrow      circular arrow
 *     .guide-card-body       name + description
 *     .guide-name            Montserrat title
 *     .guide-desc            short description
 *     .guide-meta            footer hint ("Updated 2 weeks ago" etc.)
 */

/* 19.1 — Summary strip */
.guide-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin: 0 0 18px;
  padding: 14px 18px;
  background: var(--surface-soft);
  border: 0.5px solid var(--border-light);
  border-radius: var(--r-md);
}
.guide-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--ink-soft);
}
.guide-summary-item strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.guide-summary-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.guide-summary-dot--ready    { background: var(--green); }
.guide-summary-dot--progress { background: var(--orange); }
.guide-summary-dot--empty    { background: var(--ink-hint); }

/* 19.2 — Grid */
.guide-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

/* 19.3 — Card. height:100% so all cards in a row match the
   tallest one (the <li> grid items stretch by default, and the
   card fills its <li>). */
.guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 20px;
  background: var(--surface-soft);
  border: 0.5px solid var(--border-light);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  height: 100%;
  box-sizing: border-box;
  min-height: 168px;
}
.guide-card:hover {
  background: var(--surface);
  border-color: var(--border-medium);
}
.guide-card:hover .guide-card-arrow {
  background: var(--primary);
  color: #fff;
  transform: translateX(3px);
}

/* 19.4 — Card head (status pill + arrow) */
.guide-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.guide-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 99px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
}
.guide-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.guide-status--ready {
  background: var(--green-soft);
  color: var(--green-text);
}
.guide-status--progress {
  background: var(--orange-soft);
  color: var(--orange-text);
}
.guide-status--empty {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink-mute);
}
/* --required: a styleguide that's universally needed (currently only
   Image specs in the empty state). Filled orange pill — stronger than
   --progress (soft orange) — so it reads as the must-do CTA on a
   brand-new account. */
.guide-status--required {
  background: var(--orange);
  color: #fff;
}
.guide-card-arrow {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.15s, background 0.15s, color 0.15s;
}

/* 19.5 — Card body */
.guide-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.guide-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.guide-desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* 19.6 — Meta line */
.guide-meta {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  line-height: 1.2;
}
.guide-card--progress .guide-meta,
.guide-card--empty .guide-meta,
.guide-card--required .guide-meta {
  color: var(--orange-text);
}