/* ──────────────────────────────────────────────────────────────────────
 * Nifty Ops — operations design system.
 *
 * Aesthetic: warm paper background, espresso ink, a single clay accent —
 * the same tokens as the public `app.css` design system, so the admin app
 * and the brand site read as one product. Fraunces for titles + numerals;
 * Geist for body. Hairline borders, gentle elevation only on hover.
 * Tabular numerals everywhere times/counts appear.
 *
 * Tokens, base typography, and universal components (buttons, forms,
 * pills, sections, empty states) are scoped to BOTH the studio admin
 * shell (`.page--studio-admin`) and the account shell (`.page--account`)
 * — anything that's not the marketing site or the luxe studio landing.
 *
 * Admin-shell-specific components (top bar, sub-nav, stat strip, rows,
 * thread, member grid, …) stay under `.page--studio-admin` only.
 * Account-shell layout (`.ac-*`) lives in `account.css`.
 * ──────────────────────────────────────────────────────────────────── */

@layer ad-reset, ad-tokens, ad-base, ad-components;

/* Global reset + skip link. This is the single app stylesheet (loaded on
   every server-rendered app page via base.html), so the reset that used to
   live in the now-removed main.css lives here. The public marketing/booking
   pages ship their own reset in app.css. */
@layer ad-reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
  body { line-height: 1.5; min-block-size: 100dvh; }
  img, picture, svg, video { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  a { color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

  .skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    padding: 0.5rem 1rem;
    background: var(--ad-accent);
    color: var(--ad-accent-fg);
    border-radius: 0.375rem;
  }
  .skip-link:focus { inset-inline-start: 1rem; inset-block-start: 1rem; }
}

/* Global utility used across admin and account surfaces. */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@layer ad-tokens {
  :is(.page--studio-admin, .page--account) {
    /* ── Surfaces (warm paper, matches app.css) ──────────── */
    --ad-bg:        #f4efe6;
    --ad-bg-soft:   #ece4d6;
    --ad-surface:   #ffffff;
    --ad-surface-2: #faf6ee;
    --ad-surface-3: #ece4d6;

    /* ── Ink (high contrast) ─────────────────────────────── */
    --ad-ink:       #1a1512;
    --ad-ink-soft:  #574e46;
    --ad-ink-mute:  #948877;

    /* ── Lines ───────────────────────────────────────────── */
    --ad-line:        #e5dccb;
    --ad-line-soft:   #efe9da;
    --ad-line-strong: #d4c8b2;

    /* ── Accent (clay — matches the new brand) ───────────── */
    --ad-accent:      #bb5a32;
    --ad-accent-deep: #97421f;
    --ad-accent-soft: #f2e2d6;
    --ad-accent-fg:   #fffaf3;

    /* ── Status ──────────────────────────────────────────── */
    --ad-success:      #15803d;
    --ad-success-soft: #d8eedd;
    --ad-warn:         #b45309;
    --ad-warn-soft:    #f5e3c4;
    --ad-danger:       #b91c1c;
    --ad-danger-soft:  #f5d4d4;

    /* ── Type scale ──────────────────────────────────────── */
    --ad-step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --ad-step--1: clamp(0.82rem, 0.78rem + 0.18vw, 0.90rem);
    --ad-step-0:  clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
    --ad-step-1:  clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
    --ad-step-2:  clamp(1.55rem, 1.30rem + 1.0vw, 2.05rem);
    --ad-step-3:  clamp(2.10rem, 1.65rem + 2.0vw, 3.20rem);

    /* ── Spacing ─────────────────────────────────────────── */
    --ad-gutter:    clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
    --ad-stack:     1.25rem;
    --ad-stack-lg:  2rem;

    /* ── Shadow ──────────────────────────────────────────── */
    --ad-shadow-sm: 0 1px 0 rgba(28,25,23,0.04);
    --ad-shadow-md: 0 1px 0 rgba(28,25,23,0.05),
                    0 18px 32px -22px rgba(28,25,23,0.18);
  }
}

@layer ad-base {
  :is(.page--studio-admin, .page--account) {
    background: var(--ad-bg);
    color: var(--ad-ink);
    font-family: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                 sans-serif;
    font-size: var(--ad-step-0);
    line-height: 1.5;
    font-feature-settings: "ss01", "cv11", "tnum";
  }

  :is(.page--studio-admin, .page--account) h1,
  :is(.page--studio-admin, .page--account) h2,
  :is(.page--studio-admin, .page--account) h3,
  :is(.page--studio-admin, .page--account) .ad-display {
    font-family: "Fraunces", "Newsreader", Georgia, serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: -0.012em;
    margin: 0;
  }
  :is(.page--studio-admin, .page--account) h1 { font-size: var(--ad-step-3); }
  :is(.page--studio-admin, .page--account) h2 { font-size: var(--ad-step-2); }
  :is(.page--studio-admin, .page--account) h3 { font-size: var(--ad-step-1); }

  :is(.page--studio-admin, .page--account) em,
  :is(.page--studio-admin, .page--account) .ad-display em {
    font-style: italic;
  }

  :is(.page--studio-admin, .page--account) a {
    color: var(--ad-accent-deep);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms ease, color 120ms ease;
  }
  :is(.page--studio-admin, .page--account) a:hover {
    border-bottom-color: var(--ad-accent);
    color: var(--ad-accent);
  }

  :is(.page--studio-admin, .page--account) p { margin: 0; max-inline-size: 64ch; }

  :is(.page--studio-admin, .page--account) ::selection {
    background: var(--ad-accent-soft);
    color: var(--ad-ink);
  }

  :is(.page--studio-admin, .page--account) button { font: inherit; cursor: pointer; }
  :is(.page--studio-admin, .page--account) :focus-visible {
    outline: 2px solid var(--ad-accent);
    outline-offset: 2px;
    border-radius: 4px;
  }
}

@layer ad-components {
  /* ── App layout: sticky sidebar column + shrinkable main column ──── */
  .ad-app {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    min-block-size: 100vh;
  }
  .ad-side svg, .ad-topbar svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Drawer scrim: only materializes below the mobile breakpoint. */
  .ad-scrim { display: none; }

  /* ── Sidebar ─────────────────────────────────────────────────────── */
  .ad-side {
    position: sticky;
    top: 0;
    block-size: 100vh;
    align-self: start;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.1rem 0.85rem 1.25rem;
    background: linear-gradient(177deg, var(--ad-surface), var(--ad-surface-2));
    border-inline-end: 1px solid var(--ad-line);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .ad-side__brandrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.55rem;
  }
  .ad-side__brand {
    font-family: "Fraunces", serif;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ad-ink);
    border: 0;
    letter-spacing: -0.01em;
  }
  .ad-side__brand em { font-style: italic; color: var(--ad-accent); }
  .ad-side__brand:hover { color: var(--ad-ink); border: 0; }
  .ad-side__close {
    display: none;
    place-items: center;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    border-radius: 8px;
    color: var(--ad-ink-soft);
    border: 0;
    cursor: pointer;
  }
  .ad-side__close svg { inline-size: 20px; block-size: 20px; }
  .ad-side__close:hover { background: var(--ad-surface-3); }

  /* Studio switcher */
  .ad-switcher {
    display: grid;
    grid-template-columns: 2.2rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
    border: 1px solid var(--ad-line);
    background: var(--ad-surface);
    color: var(--ad-ink);
    box-shadow: var(--ad-shadow-sm);
    transition: border-color 140ms ease, box-shadow 140ms ease;
  }
  .ad-switcher:hover { border-color: var(--ad-line-strong); box-shadow: var(--ad-shadow-md); }
  .ad-switcher__avatar {
    inline-size: 2.2rem;
    block-size: 2.2rem;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--ad-accent), var(--ad-accent-deep));
    color: var(--ad-accent-fg);
    font-family: "Fraunces", serif;
    font-size: 1.1rem;
    line-height: 1;
    text-transform: uppercase;
  }
  .ad-switcher__detail { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.2; }
  .ad-switcher__name {
    font-weight: 600;
    color: var(--ad-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ad-switcher__hint {
    font-size: var(--ad-step--2);
    color: var(--ad-ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .ad-switcher__chev { inline-size: 16px; block-size: 16px; color: var(--ad-ink-mute); }

  /* Nav */
  .ad-nav { display: flex; flex-direction: column; gap: 0.1rem; }
  .ad-nav__group {
    margin: 0.9rem 0 0.35rem;
    padding-inline: 0.7rem;
    font-size: var(--ad-step--2);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--ad-ink-mute);
  }
  .ad-nav__group:first-child { margin-block-start: 0.1rem; }
  .ad-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    color: var(--ad-ink-soft);
    font-size: var(--ad-step--1);
    font-weight: 500;
    border: 0;
    transition: background 120ms ease, color 120ms ease;
  }
  .ad-nav__icon { inline-size: 20px; block-size: 20px; flex: none; color: var(--ad-ink-mute); transition: color 120ms ease; }
  .ad-nav__link:hover { background: var(--ad-surface-2); color: var(--ad-ink); border: 0; }
  .ad-nav__link:hover .ad-nav__icon { color: var(--ad-ink-soft); }
  .ad-nav__link.is-active { background: var(--ad-accent-soft); color: var(--ad-accent-deep); font-weight: 600; }
  .ad-nav__link.is-active .ad-nav__icon { color: var(--ad-accent); }
  .ad-nav__link.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.85rem;
    inset-block: 0.4rem;
    inline-size: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ad-accent);
  }

  /* Sidebar footer (account) */
  .ad-side__foot {
    margin-block-start: auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--ad-line-soft);
  }
  .ad-userchip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-radius: 10px;
    color: var(--ad-ink);
    border: 0;
  }
  .ad-userchip:hover { background: var(--ad-surface-2); border: 0; }
  .ad-userchip__avatar {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ad-surface-3);
    color: var(--ad-ink-soft);
    font-weight: 700;
    font-size: var(--ad-step--1);
    text-transform: uppercase;
    flex: none;
  }
  .ad-userchip__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ad-side__sub { padding-inline: 0.55rem; color: var(--ad-ink-mute); font-size: var(--ad-step--1); border: 0; }
  .ad-side__sub:hover { color: var(--ad-ink); border: 0; }

  /* ── Main column ─────────────────────────────────────────────────── */
  .ad-main {
    min-inline-size: 0;
    min-block-size: 100vh;
  }

  /* Mobile top bar (hidden on desktop; appears when the sidebar collapses) */
  .ad-topbar {
    display: none;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem var(--ad-gutter);
    border-block-end: 1px solid var(--ad-line);
    background: color-mix(in srgb, var(--ad-surface) 90%, transparent);
    backdrop-filter: saturate(1.2) blur(8px);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .ad-burger {
    display: inline-grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 10px;
    border: 1px solid var(--ad-line);
    background: var(--ad-surface);
    color: var(--ad-ink);
    cursor: pointer;
  }
  .ad-burger svg { inline-size: 20px; block-size: 20px; }
  .ad-topbar__studio { font-family: "Fraunces", serif; font-size: 1.25rem; color: var(--ad-ink); border: 0; }
  .ad-topbar__studio:hover { color: var(--ad-ink); border: 0; }

  /* ── Page shell (centered column inside the main area) ───────────── */
  .ad-shell {
    box-sizing: border-box;
    max-inline-size: 72rem;
    margin-inline: auto;
    min-inline-size: 0;
    padding-inline: clamp(1rem, 0.4rem + 2vw, 2.5rem);
    padding-block-end: 3rem;
  }

  /* ── Page header (breadcrumb + title + actions) ──────────────────── */
  .ad-pageheader {
    padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .ad-crumb {
    color: var(--ad-ink-mute);
    font-size: var(--ad-step--1);
    letter-spacing: 0.02em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }
  .ad-crumb a {
    color: var(--ad-ink-mute);
    border: 0;
  }
  .ad-crumb a:hover { color: var(--ad-ink); border: 0; }
  .ad-crumb__sep {
    color: var(--ad-line-strong);
    font-family: "Fraunces", serif;
    font-style: italic;
  }
  .ad-crumb__current {
    color: var(--ad-ink);
  }

  .ad-pagetitle {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 1.5rem;
  }
  .ad-pagetitle h1 {
    font-size: var(--ad-step-3);
    color: var(--ad-ink);
  }
  .ad-pagetitle__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .ad-pagesub {
    color: var(--ad-ink-soft);
    font-size: var(--ad-step-0);
    max-inline-size: 60ch;
  }

  /* ── Mobile drawer (sidebar collapses below 60rem) ───────────────── */
  @media (max-width: 60rem) {
    .ad-app { grid-template-columns: 1fr; }
    .ad-topbar { display: flex; }
    .ad-side {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      block-size: auto;
      inline-size: min(82vw, 20rem);
      transform: translateX(-100%);
      transition: transform 240ms cubic-bezier(.2,.7,.2,1);
      box-shadow: 0 0 50px -12px rgba(28,25,23,0.45);
    }
    .ad-side__close { display: grid; }
    .ad-drawer-toggle:checked ~ .ad-app .ad-side { transform: none; }
    .ad-scrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 25;
      background: rgba(20,17,14,0.42);
      opacity: 0;
      visibility: hidden;
      transition: opacity 200ms ease;
    }
    .ad-drawer-toggle:checked ~ .ad-app .ad-scrim { opacity: 1; visibility: visible; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ad-side { transition: none; }
  }

  /* ── Stat strip ──────────────────────────────────────────────────── */
  .ad-stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin-block-end: var(--ad-stack-lg);
  }
  .ad-stat {
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    box-shadow: var(--ad-shadow-sm);
  }
  .ad-stat__value {
    font-family: "Fraunces", serif;
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
    line-height: 1;
    color: var(--ad-ink);
    letter-spacing: -0.018em;
  }
  .ad-stat__value em {
    font-style: italic;
    color: var(--ad-accent);
  }
  .ad-stat__label {
    color: var(--ad-ink-mute);
    font-size: var(--ad-step--2);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
  }
  .ad-stat__hint {
    color: var(--ad-ink-soft);
    font-size: var(--ad-step--1);
    margin-block-start: 0.2rem;
  }

  /* ── Section ─────────────────────────────────────────────────────── */
  .ad-section {
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    margin-block-end: var(--ad-stack-lg);
    overflow: clip;
  }
  .ad-section__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1.1rem 1.25rem 0.85rem;
    border-block-end: 1px solid var(--ad-line-soft);
    background: var(--ad-surface-2);
  }
  .ad-section__title {
    font-size: var(--ad-step-2);
    color: var(--ad-ink);
  }
  .ad-section__sub {
    color: var(--ad-ink-soft);
    font-size: var(--ad-step--1);
    max-inline-size: 48ch;
  }
  .ad-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .ad-section__body {
    padding: 1.25rem;
  }
  .ad-section__body--flush {
    padding: 0;
  }
  .ad-section--danger {
    border-color: color-mix(in srgb, var(--ad-danger) 35%, var(--ad-line));
  }
  .ad-section--danger .ad-section__head {
    background: var(--ad-danger-soft);
    color: var(--ad-danger);
  }
  .ad-section--danger .ad-section__title { color: var(--ad-danger); }

  /* ── Buttons ─────────────────────────────────────────────────────── */
  .ad-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--ad-step--1);
    text-decoration: none;
    min-block-size: 38px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease,
                border-color 120ms ease, transform 120ms ease;
  }
  .ad-btn:active { transform: translateY(1px); }
  .ad-btn--primary {
    background: var(--ad-ink);
    color: var(--ad-bg);
    border: 0;
  }
  .ad-btn--primary:hover {
    background: var(--ad-accent);
    color: var(--ad-accent-fg);
    border: 0;
  }
  .ad-btn--ghost {
    color: var(--ad-ink);
    border-color: var(--ad-line);
    background: var(--ad-surface);
  }
  .ad-btn--ghost:hover {
    background: var(--ad-surface-2);
    border-color: var(--ad-ink);
  }
  .ad-btn--danger {
    color: var(--ad-danger);
    border-color: color-mix(in srgb, var(--ad-danger) 50%, transparent);
    background: var(--ad-surface);
  }
  .ad-btn--danger:hover {
    background: var(--ad-danger);
    color: #fff;
    border-color: var(--ad-danger);
  }
  .ad-btn--sm {
    padding: 0.35rem 0.75rem;
    min-block-size: 30px;
    font-size: var(--ad-step--2);
  }

  /* ── Pills (status / role tags) ──────────────────────────────────── */
  .ad-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: var(--ad-step--2);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--ad-surface-3);
    color: var(--ad-ink-soft);
    border: 1px solid var(--ad-line);
  }
  .ad-pill::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-radius: 999px;
    background: var(--ad-ink-mute);
  }
  .ad-pill--accent { background: var(--ad-accent-soft); color: var(--ad-accent-deep); border-color: color-mix(in srgb, var(--ad-accent) 35%, transparent); }
  .ad-pill--accent::before { background: var(--ad-accent); }
  .ad-pill--success { background: var(--ad-success-soft); color: var(--ad-success); border-color: color-mix(in srgb, var(--ad-success) 35%, transparent); }
  .ad-pill--success::before { background: var(--ad-success); }
  .ad-pill--warn { background: var(--ad-warn-soft); color: var(--ad-warn); border-color: color-mix(in srgb, var(--ad-warn) 35%, transparent); }
  .ad-pill--warn::before { background: var(--ad-warn); }
  .ad-pill--danger { background: var(--ad-danger-soft); color: var(--ad-danger); border-color: color-mix(in srgb, var(--ad-danger) 35%, transparent); }
  .ad-pill--danger::before { background: var(--ad-danger); }
  .ad-pill--plain::before { display: none; }

  /* ── Forms ───────────────────────────────────────────────────────── */
  .ad-form {
    display: grid;
    gap: 1rem;
  }
  .ad-form__row {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 36rem) {
    .ad-form__row--two { grid-template-columns: 1fr 1fr; }
  }
  .ad-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .ad-form__label {
    font-size: var(--ad-step--1);
    font-weight: 600;
    color: var(--ad-ink);
  }
  .ad-form__hint {
    font-size: var(--ad-step--2);
    color: var(--ad-ink-mute);
  }
  /* Checkbox row: box on the left, label + hint stacked beside it. */
  .ad-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
  }
  .ad-check__box {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin-block-start: 0.15rem;
    accent-color: var(--ad-accent);
    flex: none;
  }
  .ad-check__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  .ad-form__error {
    color: var(--ad-danger);
    background: var(--ad-danger-soft);
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--ad-danger) 30%, transparent);
    font-size: var(--ad-step--1);
  }
  .ad-input,
  .ad-textarea,
  .ad-select {
    font: inherit;
    color: var(--ad-ink);
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    min-block-size: 42px;
    transition: border-color 120ms ease, background 120ms ease;
  }
  .ad-textarea {
    min-block-size: 6rem;
    resize: vertical;
    line-height: 1.55;
  }
  .ad-textarea--tall { min-block-size: 12rem; }
  .ad-input:focus,
  .ad-textarea:focus,
  .ad-select:focus {
    outline: 2px solid var(--ad-accent);
    outline-offset: 0;
    border-color: var(--ad-accent);
  }
  .ad-form__actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: end;
    margin-block-start: 0.5rem;
  }
  .ad-form__actions--center { justify-content: center; }
  .ad-form__actions--start  { justify-content: flex-start; }

  /* Form variant: render as inline-flex so a single-action form (revoke,
   * archive, logout) sits next to neighbouring buttons / rows instead of
   * forcing a block break. */
  .ad-form--inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
  }

  /* DL variant of `.ad-form` used to render read-only key/value lists
   * (e.g. webhook config blocks). Wider gap; the items render exactly
   * like fields but their content is `<dt>` + `<dd>`. */
  .ad-form--dl { gap: 1.25rem; }

  /* Status-tinted hint variants. The plain `.ad-form__hint` is muted; these
   * add a success / warn colour without changing structure. */
  .ad-form__hint--success { color: var(--ad-success); }

  /* Warning-tinted variant of `.ad-form__error`. Used when the platform
   * isn't fully configured yet (Meta secrets / Telnyx key missing). */
  .ad-form__error--warn {
    color: var(--ad-warn);
    background: var(--ad-warn-soft);
    border-color: color-mix(in srgb, var(--ad-warn) 30%, transparent);
  }

  /* Monospaced input variant for displaying read-only URLs and ids that
   * users will copy. */
  .ad-input--code {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Code",
                 "Source Code Pro", Menlo, Consolas, monospace;
  }

  /* Bio / long-form text block that should preserve user-entered newlines. */
  .ad-bio {
    white-space: pre-wrap;
    color: var(--ad-ink);
    line-height: 1.55;
  }

  /* Disconnect block on integration pages: sits below the credentials
   * form, aligned to the trailing edge so it doesn't compete visually with
   * the primary Save button. */
  .ad-disconnect {
    margin-block-start: 1rem;
    display: flex;
    justify-content: flex-end;
  }
  .ad-disconnect summary {
    cursor: pointer;
    color: var(--ad-danger);
    font-size: var(--ad-step--1);
    list-style: none;
  }
  .ad-disconnect summary::-webkit-details-marker { display: none; }
  .ad-disconnect summary::after {
    content: " ▾";
    color: var(--ad-ink-mute);
  }
  .ad-disconnect[open] summary::after { content: " ▴"; }
  .ad-disconnect__body {
    margin-block-start: 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    color: var(--ad-ink-soft);
    font-size: var(--ad-step--2);
    max-inline-size: 32ch;
    text-align: end;
  }

  /* Setup checklist on the studio admin Team page. Rendered only when
   * the studio still has work to do (location / persona / integration /
   * conversations). Disappears once everything is set up. */
  .ad-setup {
    background: var(--ad-surface);
    border: 1px solid color-mix(in srgb, var(--ad-accent) 35%, transparent);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ad-shadow-md);
  }
  .ad-setup__head {
    padding: 1.1rem 1.25rem;
    background: var(--ad-accent-soft);
    border-block-end: 1px solid color-mix(in srgb, var(--ad-accent) 25%, transparent);
  }
  .ad-setup__title {
    font-family: "Fraunces", serif;
    font-size: var(--ad-step-1);
    color: var(--ad-accent-deep);
  }
  .ad-setup__title em { font-style: italic; }
  .ad-setup__sub {
    color: color-mix(in srgb, var(--ad-accent-deep) 80%, var(--ad-ink) 20%);
    font-size: var(--ad-step--1);
    margin-block-start: 0.15rem;
  }
  .ad-setup__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .ad-setup__item {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    column-gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-block-start: 1px solid var(--ad-line-soft);
  }
  .ad-setup__item:first-child { border-block-start: 0; }
  .ad-setup__mark {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--ad-surface-3);
    color: var(--ad-ink-soft);
    font-family: "Fraunces", serif;
    font-size: 1.1rem;
    line-height: 1;
  }
  .ad-setup__item.is-done .ad-setup__mark {
    background: var(--ad-success-soft);
    color: var(--ad-success);
  }
  .ad-setup__item.is-done .ad-setup__step {
    color: var(--ad-ink-mute);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--ad-ink-mute) 50%, transparent);
  }
  .ad-setup__step {
    color: var(--ad-ink);
    font-weight: 600;
    font-size: var(--ad-step-0);
  }
  .ad-setup__hint {
    color: var(--ad-ink-soft);
    font-size: var(--ad-step--1);
    margin-block-start: 0.15rem;
  }
  @media (max-width: 32rem) {
    .ad-setup__item { grid-template-columns: 2rem 1fr; }
    .ad-setup__item > .ad-btn { grid-column: 1 / -1; justify-self: end; }
  }

  /* Demo callout shown on the Team page so brand-new studio owners
   * notice the inbox simulator. Subtle, dismissible-feeling colourway. */
  .ad-demobar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--ad-accent) 35%, transparent);
    border-radius: 14px;
    background: var(--ad-accent-soft);
    color: var(--ad-accent-deep);
  }
  .ad-demobar__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-inline-size: 60ch;
  }
  .ad-demobar__title {
    font-family: "Fraunces", serif;
    font-size: var(--ad-step-1);
    color: var(--ad-accent-deep);
  }
  .ad-demobar__title em { font-style: italic; }
  .ad-demobar__sub {
    color: color-mix(in srgb, var(--ad-accent-deep) 80%, var(--ad-ink) 20%);
    font-size: var(--ad-step--1);
  }

  /* ── Empty state ─────────────────────────────────────────────────── */
  .ad-empty {
    text-align: center;
    padding: 2.25rem 1.5rem;
    color: var(--ad-ink-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
  }
  .ad-empty__title {
    font-family: "Fraunces", serif;
    font-size: var(--ad-step-1);
    color: var(--ad-ink);
  }
  .ad-empty__body {
    color: var(--ad-ink-soft);
    max-inline-size: 36ch;
  }

  /* ── Rows (used for inbox, customers, appointments, members) ─────── */
  .ad-rows {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .ad-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-block-start: 1px solid var(--ad-line-soft);
    background: var(--ad-surface);
    color: inherit;
    text-decoration: none;
    border-block-end: 0;
    transition: background 120ms ease;
  }
  .ad-row:first-child { border-block-start: 0; }
  .ad-rows > .ad-row:hover { background: var(--ad-surface-2); }
  .ad-row:focus-visible { background: var(--ad-surface-2); }
  .ad-row[href] { color: inherit; border: 0; }
  .ad-row[href]:hover { border: 0; }

  .ad-row__avatar {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ad-surface-3);
  }
  .ad-row__avatar--empty {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--ad-accent), var(--ad-accent-deep));
    color: var(--ad-accent-fg);
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Geist", sans-serif;
  }
  .ad-row__primary {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-inline-size: 0;
  }
  .ad-row__name {
    font-weight: 600;
    color: var(--ad-ink);
  }
  .ad-row__meta {
    color: var(--ad-ink-mute);
    font-size: var(--ad-step--1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ad-row__aside {
    text-align: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    color: var(--ad-ink-soft);
    font-size: var(--ad-step--1);
  }
  .ad-row__aside-strong {
    color: var(--ad-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .ad-row__action {
    flex-shrink: 0;
  }

  /* Group of small action controls (Edit / Archive / Restore) inside a
   * row's trailing aside. Keeps the inline action forms aligned on a
   * single baseline. */
  .ad-row__controls {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
  }

  /* ── Conversation thread ─────────────────────────────────────────── */
  .ad-thread {
    list-style: none;
    padding: 1.5rem 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background:
      radial-gradient(1000px 220px at 50% -50px, var(--ad-accent-soft), transparent 70%),
      var(--ad-surface);
  }
  .ad-msg {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-inline-size: 80%;
  }
  .ad-msg--in  { align-self: flex-start; align-items: flex-start; }
  .ad-msg--out { align-self: flex-end;   align-items: flex-end; }
  .ad-bubble {
    padding: 0.7rem 1rem;
    border-radius: 18px;
    line-height: 1.45;
    font-size: var(--ad-step-0);
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .ad-bubble--in {
    background: var(--ad-surface);
    color: var(--ad-ink);
    border: 1px solid var(--ad-line);
    border-bottom-left-radius: 6px;
  }
  .ad-bubble--out {
    background: var(--ad-ink);
    color: var(--ad-bg);
    border-bottom-right-radius: 6px;
  }
  .ad-msg__meta {
    color: var(--ad-ink-mute);
    font-size: var(--ad-step--2);
    letter-spacing: 0.04em;
  }
  .ad-msg__system {
    align-self: center;
    color: var(--ad-success);
    background: var(--ad-success-soft);
    border: 1px solid color-mix(in srgb, var(--ad-success) 30%, transparent);
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: var(--ad-step--1);
    font-weight: 500;
  }

  /* ── Reply composer (the "continue conversation" surface) ─────── */
  .ad-composer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
  }
  .ad-composer__row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--ad-line);
    background: var(--ad-surface-2);
  }
  .ad-composer__row + .ad-composer__row { margin-block-start: 0.5rem; }
  .ad-composer__label {
    font-size: var(--ad-step--2);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ad-ink-mute);
    font-weight: 600;
  }
  .ad-composer__textarea {
    border: 0;
    background: transparent;
    color: var(--ad-ink);
    resize: vertical;
    min-block-size: 4rem;
    font: inherit;
  }
  .ad-composer__textarea:focus { outline: none; }
  .ad-composer__row:focus-within {
    border-color: var(--ad-accent);
    background: var(--ad-surface);
  }
  .ad-composer__actions {
    display: flex;
    justify-content: end;
  }

  /* ── Studio details (member card variants) ───────────────────── */
  .ad-mem-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    padding: 1.25rem;
  }
  .ad-mem {
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    padding: 1rem;
    background: var(--ad-surface);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: center;
  }
  .ad-mem__detail {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-inline-size: 0;
  }
  .ad-mem__name { font-weight: 600; color: var(--ad-ink); }
  .ad-mem__email { color: var(--ad-ink-mute); font-size: var(--ad-step--1); overflow: hidden; text-overflow: ellipsis; }
  .ad-mem__row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    padding-block-start: 0.65rem;
    border-block-start: 1px dashed var(--ad-line);
  }
  /* Per-member commission editor on the Team page. */
  .ad-mem__commission {
    grid-column: 1 / -1;
    display: flex;
    align-items: end;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
  }
  .ad-mem__commission-label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: var(--ad-step--2);
    color: var(--ad-ink-soft);
  }
  .ad-input--sm {
    inline-size: 5rem;
    padding: 0.4rem 0.5rem;
  }

  /* ── Invitations strip ───────────────────────────────────────── */
  .ad-invite-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .ad-invite {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.45rem;
    padding: 0.85rem 1.25rem;
    border-block-start: 1px solid var(--ad-line-soft);
  }
  .ad-invite:first-child { border-block-start: 0; }
  .ad-invite__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .ad-invite__email { font-weight: 600; }
  .ad-invite__link {
    grid-column: 1 / -1;
    display: block;
  }

  /* ── Detail dl (customer / studio info readout) ─────────────── */
  .ad-detail {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
    padding: 1.25rem;
    margin: 0;
  }
  .ad-detail dt {
    color: var(--ad-ink-mute);
    font-size: var(--ad-step--2);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    align-self: baseline;
  }
  .ad-detail dd {
    margin: 0;
    color: var(--ad-ink);
    font-variant-numeric: tabular-nums;
  }

  /* ── Calendar week view ──────────────────────────────────────── */
  .ad-cal__grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  @media (max-width: 60rem) {
    .ad-cal__grid { grid-template-columns: 1fr; }
  }
  .ad-cal__day {
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    padding: 0.7rem;
    min-block-size: 11rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .ad-cal__day.is-today {
    border-color: var(--ad-accent);
    background: linear-gradient(180deg, var(--ad-surface), color-mix(in srgb, var(--ad-accent-soft) 60%, var(--ad-surface)));
  }
  .ad-cal__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: var(--ad-ink);
  }
  .ad-cal__weekday {
    font-size: var(--ad-step--2);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
  }
  .ad-cal__date {
    font-family: "Fraunces", serif;
    font-size: var(--ad-step-1);
  }
  .ad-cal__empty {
    color: var(--ad-ink-mute);
    font-size: var(--ad-step--2);
  }
  .ad-cal__chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .ad-cal__chip {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: var(--ad-accent-soft);
    color: var(--ad-accent-deep);
    border: 1px solid color-mix(in srgb, var(--ad-accent) 25%, transparent);
    text-decoration: none;
    font-size: var(--ad-step--2);
  }
  .ad-cal__chip:hover { border-color: var(--ad-accent); color: var(--ad-accent-deep); }
  .ad-cal__chip--canceled {
    background: var(--ad-surface-2);
    color: var(--ad-ink-mute);
    border-color: var(--ad-line-strong);
    text-decoration: line-through;
  }
  .ad-cal__chip--completed {
    background: var(--ad-success-soft);
    color: var(--ad-success);
    border-color: color-mix(in srgb, var(--ad-success) 30%, transparent);
  }
  .ad-cal__chip--noshow {
    background: var(--ad-warn-soft);
    color: var(--ad-warn);
    border-color: color-mix(in srgb, var(--ad-warn) 30%, transparent);
  }
  .ad-cal__time { font-weight: 600; }
  .ad-cal__customer { color: var(--ad-ink); }
  .ad-cal__service { color: var(--ad-ink-soft); }

  /* ── Footer ──────────────────────────────────────────────────── */
  .ad-foot {
    margin-block-start: 3rem;
    padding-block: 1.5rem;
    border-block-start: 1px solid var(--ad-line-soft);
    text-align: center;
    font-size: var(--ad-step--2);
    font-variant-numeric: tabular-nums;
  }
  .ad-foot a { color: var(--ad-ink-mute); border: 0; }
  .ad-foot a:hover { color: var(--ad-ink-soft); }

  /* ── Page-load reveal ────────────────────────────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    .ad-pageheader > *, .ad-stats, .ad-section { animation: ad-rise 0.5s cubic-bezier(.2,.7,.2,1) both; }
    .ad-stats   { animation-delay: 0.04s; }
    .ad-section { animation-delay: 0.08s; }
    .ad-section + .ad-section { animation-delay: 0.12s; }
    @keyframes ad-rise {
      from { transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}