/* Amber phone theme. GlassCN frosted + Tailark Dusk; see docs/design/mobile-glass.md.
   Preserve scroll ownership/stacking; the floating dock reserves its shared height. */
@media screen and (max-width: 760px) {
  html:has([data-mobile-bottom-nav]) {
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  body.app-body {
    --ink: #20382f;
    --ink-soft: #48584f;
    --ink-muted: #59675f;
    --muted: var(--ink-muted);
    --line: rgba(53, 101, 84, .14);
    --line-strong: rgba(53, 101, 84, .28);
    --panel: rgba(255, 255, 255, .66);
    --panel-solid: #fffdf9;
    --panel-muted: rgba(250, 249, 245, .82);
    --glass-surface: rgba(255, 255, 255, .66);
    --glass-chrome: rgba(255, 255, 255, .82);
    --glass-field: rgba(255, 255, 255, .9);
    --glass-line: rgba(255, 255, 255, .88);
    --glass-blur: blur(16px) saturate(1.6);
    --glass-shadow: 0 6px 24px rgba(32, 56, 47, .055), inset 0 1px 0 rgba(255, 255, 255, .9);
    --shadow-sm: 0 3px 14px rgba(32, 56, 47, .045);
    --shadow-md: 0 8px 28px rgba(32, 56, 47, .07);
    --shadow-glass: var(--glass-shadow);
    --control-radius: 14px;
    --control-radius-compact: 11px;
    --button-amber: #f1d7a8;
    --button-amber-hover: #eacd9a;
    --button-amber-pressed: #e2c28d;
    color: var(--ink);
    --mobile-glass-background:
      radial-gradient(ellipse at 2% 6%, rgba(255, 183, 70, .23), transparent 55%),
      radial-gradient(ellipse at 100% 42%, rgba(140, 179, 156, .2), transparent 58%),
      linear-gradient(155deg, #f9f6ed, #eef3ed 60%, #fbf5e9);
    background: var(--mobile-glass-background);
    background-attachment: fixed;
  }

  /* One compact brand row and one quiet action dock (Tailark Dusk rhythm). */
  body.app-body .mobile-topbar,
  body.app-body .mobile-bottom-nav {
    background: var(--glass-chrome);
    border-color: var(--glass-line);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  body.app-body .mobile-topbar { border-bottom: 1px solid var(--glass-line); }
  body.app-body:has(.mobile-bottom-nav) { --mobile-nav-height: 80px; }
  body.app-body .mobile-bottom-nav {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: 480px;
    min-height: 68px;
    margin-inline: auto;
    padding: 0 4px;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    isolation: isolate;
  }
  /* A quiet top-edge light follows the active link; icons stay on one baseline. */
  body.app-body .mobile-bottom-nav::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 1px solid rgba(53, 101, 84, .12);
    border-radius: 24px;
    background: var(--glass-chrome);
    box-shadow: 0 8px 24px rgba(32, 56, 47, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    pointer-events: none;
  }
  body.app-body .mobile-page-context { color: var(--ink); letter-spacing: -.015em; }
  body.app-body :is(.mobile-topbar .nav-toggle, .qa-report-trigger) {
    border-radius: 14px;
    color: var(--ink);
  }
  body.app-body .mobile-bottom-link {
    position: relative;
    z-index: 1;
    min-height: 64px;
    grid-template-rows: 24px 16px;
    gap: 4px;
    padding: 12px 4px 8px;
    color: var(--ink-muted);
    border: 1px solid transparent;
    border-radius: 18px;
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  body.app-body .mobile-bottom-link:is([aria-current="page"], [aria-expanded="true"]) {
    color: var(--ink);
    background: rgba(53, 101, 84, .08);
    border-color: transparent;
    box-shadow: none;
  }
  body.app-body .mobile-nav-indicator {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    height: 100%;
    pointer-events: none;
  }
  body.app-body .mobile-nav-indicator::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 13px);
    width: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: #df982f;
    box-shadow: 0 2px 8px rgba(223, 152, 47, .2);
  }
  body.app-body .mobile-nav-indicator::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3px;
    left: calc(50% - 28px);
    width: 56px;
    height: 38px;
    background: linear-gradient(rgba(223, 152, 47, .16), rgba(223, 152, 47, 0));
    clip-path: polygon(27% 0, 73% 0, 100% 100%, 0 100%);
  }
  body.app-body .mobile-bottom-nav.is-dock-ready .mobile-bottom-link {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--ink-muted);
    font-weight: 600;
  }
  body.app-body .mobile-bottom-nav.is-dock-ready .mobile-bottom-link.is-nav-active {
    color: var(--ink);
    font-weight: 600;
  }
  body.app-body .mobile-bottom-link svg {
    position: relative;
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: transform 520ms cubic-bezier(.4, 0, .2, 1);
  }
  body.app-body .mobile-bottom-link span { line-height: 16px; letter-spacing: .01em; }
  body.app-body .mobile-bottom-link.is-nav-active svg { transform: none; }
  body.app-body .mobile-bottom-link:active svg { transform: scale(.96); }
  body.app-body .mobile-bottom-link:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -3px;
  }
  @media (prefers-reduced-motion: reduce) {
    body.app-body .mobile-bottom-link svg { transform: none !important; transition: none !important; }
  }
  @media (forced-colors: active) {
    body.app-body .mobile-bottom-nav::before { background: Canvas; border-color: ButtonText; }
    body.app-body .mobile-nav-indicator::before { background: Highlight; box-shadow: none; }
    body.app-body .mobile-nav-indicator::after { display: none; }
  }

  /* Dark forest glass keeps drawer links distinct from the work surface. */
  body.app-body .topbar {
    background: rgba(28, 54, 44, .95);
    border: 1px solid rgba(239, 246, 232, .25);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(21, 42, 34, .22), inset 0 1px 0 rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  body.app-body .topbar .brand { background: #faf9f4; border-radius: 17px; }
  body.app-body :is(.nav-section a, .nav-panel-link) { border-radius: 12px; }
  body.app-body :is(.nav-section a, .nav-panel-link):not(.is-active) { color: #e7eee9; }
  body.app-body .nav-panel-link small,
  body.app-body .auth-identity small { color: #c5d4cb; }
  body.app-body .nav-section > p,
  body.app-body .topbar .eyebrow { color: #b6cbbd; }
  body.app-body .topbar .nav-panel-link:is(:hover, :focus-visible, .is-active) { color: #20382f; background: #ffedc9; }
  body.app-body .nav-section a.is-active { color: #20382f; background: #ffedc9; }
  body.app-body .auth-chip { border-top-color: rgba(255, 255, 255, .18); }
  body.app-body .topbar .button.secondary { color: #f8f7f2; background: rgba(255, 255, 255, .1); }

  /* V2 More: reuse the role-aware navigation as a phone sheet on every staff
     page. One scroll owner keeps long Settings menus and Sign out reachable. */
  body.app-body.is-authenticated .topbar {
    --ink: #202020;
    --ink-soft: #555;
    --ink-muted: #666;
    --sidebar-text: #202020;
    --line: #e8e4dd;
    inset: auto 0 0;
    width: min(400px, 100%);
    max-width: 100%;
    max-height: 70vh;
    max-height: 70dvh;
    margin: 0 auto;
    gap: 18px;
    padding: 27px 25px max(28px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 76px 20px;
    scrollbar-width: thin;
    scrollbar-color: #cec9c0 transparent;
    color: var(--ink);
    background: #fffdfa;
    border: 0;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -10px 50px #00000014;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: translateY(calc(100% + 32px + env(safe-area-inset-bottom)));
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1), visibility 300ms;
  }
  body.app-body.is-authenticated.nav-open .topbar { transform: translateY(0); }
  body.app-body.is-authenticated .nav-scrim {
    background: #16161655;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  body.app-body.is-authenticated .topbar .brand-shell {
    flex: 0 0 auto;
    position: sticky;
    top: -24px;
    z-index: 1;
    margin: -24px -20px 0;
    padding: 24px 20px 12px;
    background: #fffdfa;
  }
  body.app-body.is-authenticated .topbar .brand {
    min-height: 52px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  body.app-body.is-authenticated .topbar .brand img { width: 80px; height: 52px; }
  body.app-body.is-authenticated .topbar .brand span { color: #555; font-size: 12px; }
  body.app-body.is-authenticated .topbar :is(.nav-close, .nav-back) {
    width: 44px;
    min-height: 44px;
    color: #202020;
    background: #f5f2ec;
    border-color: transparent;
    border-radius: 12px;
    box-shadow: none;
  }
  body.app-body.is-authenticated .topbar :is(.sidebar-tools, .auth-chip) { flex: 0 0 auto; }
  body.app-body.is-authenticated .topbar .nav-stage { flex: none; min-height: 0; overflow: visible; }
  body.app-body.is-authenticated .topbar :is(.nav-links, .nav-panel) { height: auto; overflow: visible; }
  body.app-body.is-authenticated .topbar :is(.nav-links.is-hidden, .nav-panels) { display: none; }
  body.app-body.is-authenticated .topbar .nav-panels.is-open { display: block; }
  body.app-body.is-authenticated .topbar :is(.nav-section a, .nav-panel-link) {
    min-height: 48px;
    padding: 12px;
    color: #202020;
    font-size: 15px;
    line-height: 1.4;
    border-radius: 12px;
    box-shadow: none;
    transform: none;
  }
  body.app-body.is-authenticated .topbar :is(.nav-section a, .nav-panel-link):is(:hover, :focus-visible, .is-active) {
    color: #202020;
    background: #fff0d7;
    border-color: transparent;
    transform: none;
  }
  body.app-body.is-authenticated .topbar .nav-dot { background: #c6bfb3; box-shadow: none; }
  body.app-body.is-authenticated .topbar .is-active .nav-dot { background: #ff9f00; }
  body.app-body.is-authenticated .topbar :is(.nav-section > p, .eyebrow, .nav-panel-header p) {
    color: #666;
    font-size: 12px;
    letter-spacing: .04em;
  }
  body.app-body.is-authenticated .topbar :is(.auth-identity small, .nav-panel-link small, .nav-panel-link > span:last-child) { color: #666; }
  body.app-body.is-authenticated .topbar .nav-panel-header { border-color: var(--line); }
  body.app-body.is-authenticated .topbar .nav-panel-header h2 { color: #202020; font-size: 17px; }
  body.app-body.is-authenticated .topbar .auth-chip {
    padding: 16px 0 0;
    color: #202020;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
  }
  body.app-body.is-authenticated .topbar .auth-avatar { color: #202020; background: #fff0d7; }
  body.app-body.is-authenticated .topbar .auth-identity strong { font-size: 15px; }
  body.app-body.is-authenticated .topbar .auth-identity small { font-size: 13px; }
  body.app-body.is-authenticated .topbar :is(.workspace-location-switcher > summary, .calendar-quick-action, .nav-panel-action) {
    min-height: 48px;
    color: #202020;
    background: #fff0d7;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    font-size: 14px;
  }
  body.app-body.is-authenticated .topbar :is(.workspace-location-switcher strong, .calendar-quick-action strong) { font-size: 14px; }
  body.app-body.is-authenticated .topbar :is(.workspace-location-switcher small, .nav-panel-search, .nav-panel-template small) { color: #666; font-size: 12px; }
  body.app-body.is-authenticated .topbar :is(.workspace-location-link, .workspace-location-add) { min-height: 44px; font-size: 14px; }
  body.app-body.is-authenticated .topbar .nav-panel-search input { min-height: 44px; color: #202020; background: #fff; border-color: #d8d3ca; font-size: 16px; }
  body.app-body.is-authenticated .topbar .nav-panel-search input::placeholder { color: #666; }
  body.app-body.is-authenticated .topbar .nav-panel-template { min-height: 48px; color: #202020; border-color: var(--line); }
  body.app-body.is-authenticated .topbar .nav-panel-template strong { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
  body.app-body.is-authenticated .topbar .nav-panel-template:is(:hover, :focus-visible) { background: #fff0d7; }
  body.app-body.is-authenticated .topbar .button.secondary {
    min-height: 44px;
    color: #202020;
    background: #f5f2ec;
    border-color: transparent;
    font-size: 14px;
    box-shadow: none;
  }
  body.app-body.is-authenticated .topbar :is(a, button, input):focus-visible {
    outline: 2px solid #a85f00;
    outline-offset: 2px;
  }
  body.app-body.is-authenticated .topbar.has-mobile-more { display: block; }
  body.app-body.is-authenticated .topbar.has-mobile-more .brand-shell,
  body.app-body.is-authenticated .topbar.is-more-home > :is(.sidebar-tools, .nav-stage, .auth-chip) { display: none; }
  body.app-body.is-authenticated .topbar .mobile-more-heading {
    position: relative;
    color: #202020;
    background: #fffdfa;
  }
  body.app-body.is-authenticated .topbar .mobile-more-handle {
    position: absolute;
    top: -17px;
    left: calc(50% - 19px);
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: #d4d4d0;
  }
  body.app-body.is-authenticated .topbar .mobile-more-heading h2 {
    margin: 10px 36px 5px 0;
    font-size: 25px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.03em;
  }
  body.app-body.is-authenticated .topbar .mobile-more-subtitle {
    margin: 10px 0 24px;
    color: #666;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  body.app-body.is-authenticated .topbar .mobile-more-close {
    position: absolute;
    top: -10px;
    right: -15px;
    width: 44px;
    height: 44px;
    padding: 12px;
    border: 0;
    background: transparent;
    color: #202020;
    box-shadow: none;
  }
  body.app-body.is-authenticated .topbar :is(.mobile-more-close, .mobile-more-link, .mobile-more-tools, .mobile-more-back) svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body.app-body.is-authenticated .topbar :is(.mobile-more-link, .mobile-more-tools, .mobile-more-back) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 55px;
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #e8e4dd;
    border-radius: 0;
    color: #202020;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transform: none;
  }
  body.app-body.is-authenticated .topbar .mobile-more-tools {
    margin-top: 10px;
    min-height: 44px;
    border: 0;
    color: #666;
    font-size: 13px;
  }
  body.app-body.is-authenticated .topbar .mobile-more-back { justify-content: flex-start; margin-bottom: 18px; }
  body.app-body.is-authenticated .topbar :is(.mobile-more-link, .mobile-more-tools, .mobile-more-back):is(:hover, :focus-visible) { color: #a85f00; }
  body.app-body.is-authenticated .topbar .mobile-more-back[hidden] { display: none; }
  body.app-body.is-authenticated .topbar.has-mobile-more .sidebar-tools { margin-bottom: 18px; }

  /* GlassCN Card adapted to native sections. No blur on workspace ancestors:
     it would re-anchor fixed sheets and produce nested GPU blur layers. */
  body.app-body :is(.panel, .form-card, .metric-card, .appointment-card,
    .hero, .settings-hub-card, .staff-section-card, .booking-admin-section,
    .booking-wizard-step, .booking-pane, .public-home-visit-card,
    .public-home-benefits > article, .public-home-closing, .template-detail-card,
    .template-setting-group, .forms-queue-panel) {
    color: var(--ink);
    background: var(--glass-surface);
    border: 1px solid var(--glass-line);
    border-radius: 22px;
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.app-body :is(.hero, .metric-card, .settings-hub-card, .public-home-benefits > article) {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  body.app-body .hero { background: linear-gradient(140deg, rgba(255, 255, 255, .88), rgba(255, 246, 221, .6)); }
  body.app-body .hero::after { opacity: .35; }
  body.app-body :is(.staff-workspace, .services-workspace, .template-workspace) {
    background: rgba(255, 255, 255, .3);
    border-color: var(--glass-line);
    border-radius: 22px;
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.app-body :is(.staff-directory-pane, .staff-editor-pane, .service-catalog-pane,
    .service-editor-pane, .template-rail, .template-editor,
    .appointment-record-rail, .appointment-record-main, .appointment-record-client) {
    background: rgba(255, 255, 255, .3);
  }
  body.app-body :is(.staff-editor-header, .service-editor-header, .template-editor-header,
    .staff-tabs, .service-tabs, .template-tabs, .appointment-mobile-tabs,
    .appointment-workspace-heading, .staff-service-group > header) {
    background: var(--glass-chrome);
    border-color: var(--line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Keep fields denser than cards. Native semantics, validation and signature
     canvases stay intact; no refraction behind text. */
  body.app-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]),
  body.app-body :is(select, textarea) {
    min-height: 44px;
    color: var(--ink);
    background: var(--glass-field);
    border-color: var(--line-strong);
    border-radius: 14px;
    box-shadow: inset 0 1px 2px rgba(32, 56, 47, .035), 0 1px 0 rgba(255, 255, 255, .7);
    font-size: 16px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.app-body :is(input, textarea)::placeholder { color: #68756c; opacity: 1; }
  body.app-body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--forest); }
  body.app-body .staff-service-row input[type="number"] { padding-inline: 8px; }
  /* The knob must belong to its track, not to a blurred ancestor. */
  body.app-body .switch-control > span { position: relative; }
  body.app-body .switch-control > span::before { flex: 0 0 42px; }
  body.app-body .switch-control > span::after { left: 0; top: calc(50% - 9px); }
  body.app-body :is(input, select, textarea):disabled { color: #59675f; background: #edf0eb; opacity: 1; }
  body.app-body :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); background: #fff5f3; }
  body.app-body :is(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--forest);
    outline-offset: 2px;
  }
  body.app-body .page-shell .button,
  body.app-body .topbar .button {
    min-height: 44px;
    border-radius: 14px;
    padding: 11px 16px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    box-shadow: 0 2px 8px rgba(32, 56, 47, .04);
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.app-body .button.secondary { background: var(--glass-chrome); border-color: var(--line-strong); }
  body.app-body .button.primary {
    color: #20382f;
    background: var(--button-amber);
    border-color: #dfc392;
    box-shadow: 0 2px 8px rgba(104, 79, 38, .07);
  }
  body.app-body .button.primary:hover { background: var(--button-amber-hover); }
  body.app-body .button.primary:active { background: var(--button-amber-pressed); box-shadow: none; }
  body.app-body .button.primary:disabled { background: #e9e2d5; border-color: #d9d4ca; box-shadow: none; }
  body.app-body .button.danger { box-shadow: none; }

  /* Calendar paint only: minute geometry, overlap columns and native links stay
     intact. Three rows keep the client/service legible in a 60-minute slot. */
  body.app-body.page-calendar .calendar-workspace,
  body.app-body :is(.inbox-shell, .inbox-queue-pane, .inbox-conversation-pane) {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.app-body.page-calendar :is(.calendar-commandbar, .calendar-mobile-date-strip) {
    background: var(--glass-surface);
    border-color: var(--glass-line);
  }
  body.app-body.page-calendar .calendar-date-navigation h1 { font-size: 1.06rem; letter-spacing: -.025em; }
  body.app-body .calendar-mobile-date { position: relative; border-radius: 14px; }
  body.app-body .calendar-mobile-date strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
  body.app-body .calendar-mobile-date.is-active {
    color: var(--ink);
    background: #fff7e6;
    border-color: transparent;
    box-shadow: none;
  }
  body.app-body .calendar-mobile-date.is-active::after {
    position: absolute; bottom: 2px; left: calc(50% - 10px);
    width: 20px; height: 3px; border-radius: 3px;
    background: var(--brand); content: "";
  }
  body.app-body :is(.calendar-view-switch, .service-status-tabs) { background: rgba(255, 255, 255, .64); border-radius: 14px; }
  body.app-body.page-calendar :is(.provider-lane > header, .calendar-time-rail-header) { background: #f3f6f0; }
  body.app-body.page-calendar .provider-lane > header strong { font-size: .8rem; }
  body.app-body.page-calendar .provider-lane > header small { font-size: .65rem; }
  body.app-body.page-calendar .provider-lane .avatar { color: var(--forest); background: #e0eade; box-shadow: none; }
  body.app-body.page-calendar .calendar-time-rail { background: #f8f9f4; }
  body.app-body.page-calendar :is(.provider-schedule, .calendar-time-labels) {
    background-image: repeating-linear-gradient(to bottom,
      transparent 0, transparent 29px, rgba(53, 101, 84, .055) 29px,
      rgba(53, 101, 84, .055) 30px, transparent 30px, transparent 59px,
      rgba(53, 101, 84, .13) 59px, rgba(53, 101, 84, .13) 60px);
  }
  body.app-body.page-calendar .provider-schedule { background-color: #fffefa; }
  body.app-body.page-calendar .calendar-event {
    --event-accent: #b27a20;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 8px;
    padding: 5px 9px;
    color: var(--ink);
    background: #fff3db;
    border: 1px solid rgba(53, 101, 84, .1);
    border-left: 3px solid var(--event-accent);
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(32, 56, 47, .035);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.app-body.page-calendar .calendar-event.status-confirmed { --event-accent: #638b73; background: #eaf2e9; }
  body.app-body.page-calendar .calendar-event.status-completed { --event-accent: #537f8a; background: #eaf1f3; }
  body.app-body.page-calendar .calendar-event:is(.status-canceled, .status-no-show) { --event-accent: #b46961; background: #faeeea; }
  body.app-body.page-calendar .calendar-event time { min-width: 0; overflow: hidden; color: var(--ink-soft); font-size: .6875rem; line-height: 14px; white-space: nowrap; text-overflow: ellipsis; }
  body.app-body.page-calendar .calendar-event strong { grid-column: 1 / -1; grid-row: 2; font-size: .875rem; line-height: 18px; }
  body.app-body.page-calendar .calendar-event > span { grid-column: 1 / -1; grid-row: 3; font-size: .6875rem; line-height: 14px; }
  body.app-body.page-calendar .calendar-event small { grid-column: 2; grid-row: 1; max-width: 110px; color: var(--ink-soft); font-size: .625rem; line-height: 14px; }
  body.app-body.page-calendar .calendar-event:is(.is-compact, .is-overlapping) { grid-template-columns: minmax(0, 1fr); }
  body.app-body.page-calendar .calendar-event.is-compact { grid-template-columns: auto minmax(0, 1fr); padding-block: 4px; }
  body.app-body.page-calendar .calendar-event.is-compact strong { grid-column: 2; grid-row: 1; font-size: .8125rem; }
  body.app-body.page-calendar .calendar-event:is(:hover, :focus-visible) { outline: 2px solid var(--event-accent); outline-offset: 1px; }

  /* Native appointment Sheet + GlassCN's restrained card/solid footer pattern.
     Apply the same mobile order inside the calendar dialog and full record. */
  body.app-body .appointment-record-layout { display: flex; flex-direction: column; min-height: 0; }
  body.app-body .appointment-record-main { order: 1; }
  body.app-body .appointment-record-client { order: 2; }
  body.app-body .appointment-record-rail { order: 3; }
  body.app-body .appointment-workspace-heading { padding: 18px 16px; gap: 10px; }
  body.app-body .appointment-workspace-heading > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  body.app-body .appointment-workspace-heading .eyebrow { margin: 0 0 5px; color: var(--ink-muted); font-size: .59rem; letter-spacing: .09em; }
  body.app-body .appointment-workspace-heading .appointment-heading-context { display: contents; }
  body.app-body .appointment-heading-client { order: 1; color: var(--ink); font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -.035em; overflow-wrap: anywhere; }
  body.app-body .appointment-workspace-heading h1 { order: 2; margin: 0; color: var(--ink-soft); font-size: .875rem; line-height: 1.4; font-weight: 500; }
  body.app-body .appointment-heading-time { order: 3; color: var(--ink-muted); font-size: .75rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
  body.app-body .appointment-heading-separator { display: none; }
  body.app-body .appointment-workspace-heading > .status-pill { align-self: start; margin-top: 3px; }
  body.app-body .appointment-mobile-tabs { padding: 0 12px; background: #f9faf6; border-bottom-color: var(--line); }
  body.app-body .appointment-mobile-tabs a { color: var(--ink-soft); font-size: .75rem; }
  body.app-body .appointment-mobile-tabs a:is(:hover, :focus-visible) { border-radius: 10px; background: #eaf0e7; }
  body.app-body :is(.appointment-record-main, .appointment-record-client, .appointment-record-rail) { padding: 16px; background: #fffefa; }
  body.app-body .appointment-status-strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; color: var(--ink); background: #eef3eb; border: 1px solid var(--line); border-radius: 18px; }
  body.app-body .appointment-status-strip > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  body.app-body .appointment-status-strip small { color: var(--ink-muted); font-size: .625rem; }
  body.app-body .appointment-status-strip strong { font-size: .8125rem; }
  body.app-body .appointment-status-select-form { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  body.app-body .appointment-status-select-form label { min-width: 0; grid-column: 1; grid-row: 1; }
  body.app-body .appointment-status-select-form select { width: 100%; }
  body.app-body .appointment-status-select-form > input:not([type="hidden"]) { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  body.app-body .appointment-status-action { grid-column: 2; grid-row: 1; min-height: 44px; padding: 10px 14px; color: var(--ink); background: #fffdf8; border: 1px solid var(--line-strong); border-radius: 14px; font-size: .75rem; }
  body.app-body .appointment-service-summary { gap: 12px; padding: 18px 0; }
  body.app-body .appointment-service-summary strong { font-size: .9rem; line-height: 1.4; }
  body.app-body .appointment-service-summary :is(small, span) { font-size: .7rem; line-height: 1.5; }
  body.app-body .appointment-service-summary b { color: var(--ink); font-size: 1rem; }
  body.app-body .appointment-record-actions > details { margin-top: 10px; padding: 14px; background: #f7f8f3; border: 1px solid var(--line); border-radius: 18px; }
  body.app-body .appointment-record-actions > details > summary { position: relative; min-height: 44px; padding-right: 22px; font-size: .875rem; list-style: none; }
  body.app-body .appointment-record-actions > details > summary::-webkit-details-marker { display: none; }
  body.app-body .appointment-record-actions > details > summary::after { position: absolute; right: 2px; top: 16px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); content: ""; }
  body.app-body .appointment-record-actions > details[open] > summary::after { top: 20px; transform: rotate(225deg); }
  body.app-body .appointment-record-actions > details > summary small { font-size: .6875rem; color: var(--ink-muted); }
  body.app-body [data-appointment-edit-form] > .button[type="submit"] {
    position: sticky; z-index: 2;
    bottom: calc(var(--mobile-nav-height) + 12px + env(safe-area-inset-bottom));
    min-height: 48px; box-shadow: 0 0 0 6px #f7f8f3, 0 4px 14px rgba(32, 56, 47, .12);
  }
  body.app-body .appointment-record-content [data-appointment-edit-form] > .button[type="submit"] { bottom: max(12px, env(safe-area-inset-bottom)); }
  body.app-body .appointment-record-drawer .appointment-record-header { padding: 12px 16px; background: #f7f9f2; border-bottom: 1px solid var(--line); }
  body.app-body .appointment-record-drawer .appointment-record-header h2 { color: var(--ink-soft); font-size: .875rem; }
  body.app-body .appointment-record-drawer .appointment-workspace-heading { padding: 18px 16px; }
  body.app-body .appointment-record-content { scroll-padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  body.app-body .appointment-record-content .appointment-record-rail { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

  /* A restrained list rhythm, with air between frosted rows. */
  body.app-body .client-mobile-list { gap: 10px; }
  body.app-body .client-mobile-card {
    padding: 16px;
    background: var(--glass-surface);
    border: 1px solid var(--glass-line);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
  }
  /* The search header shares the summary type scale, not the old tiny labels
     and desktop workspace gaps. Keep native GET search/filter forms intact. */
  body.app-body .client-workspace { row-gap: 0; }
  body.app-body .client-mobile-search { margin: 0; padding: 16px 16px 0; gap: 8px; }
  body.app-body :is(.client-mobile-search label, .client-mobile-filters label,
    .client-mobile-filters > summary, .client-workspace > .compact-header p) {
    font-size: .875rem;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: 0;
  }
  body.app-body :is(.client-mobile-search label, .client-mobile-filters label) { gap: 8px; }
  body.app-body .client-mobile-filters { margin: 8px 16px 0; }
  body.app-body .client-mobile-filters > summary { min-height: 44px; padding: 10px 0; border-radius: 0; }
  body.app-body .client-mobile-filters form { gap: 12px; padding: 12px 0 4px; }
  body.app-body .client-workspace > .compact-header { margin: 0; padding: 12px 16px; }
  body.app-body .client-workspace > .compact-header p { margin: 0; font-weight: 400; }
  body.app-body .inbox-queue-row {
    margin: 6px 10px;
    padding: 14px;
    border: 1px solid var(--glass-line);
    border-radius: 20px;
    background: var(--glass-surface);
    box-shadow: var(--shadow-sm);
  }
  body.app-body .inbox-queue-row.is-active { background: #fff0d5; border-color: rgba(185, 112, 0, .2); }
  body.app-body :is(.inbox-queue-avatar, .inbox-count) { background: #e1ece2; color: #356554; }
  body.app-body .inbox-channel-badge { color: #48584f; background: rgba(255, 255, 255, .82); border: 1px solid var(--line); }
  /* Two type levels per summary, including badges and timestamps. Hierarchy
     comes from weight/spacing rather than progressively smaller metadata. */
  body.app-body :is(.client-mobile-card, .inbox-queue-row) {
    font-size: .875rem;
    line-height: 1.45;
  }
  body.app-body :is(.client-mobile-card-heading > strong, .inbox-queue-title > strong) {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.015em;
  }
  body.app-body :is(.client-mobile-card-heading > small, .client-mobile-facts small,
    .client-mobile-facts strong, .client-mobile-card .client-tag,
    .inbox-channel-badge, .inbox-queue-title small, .inbox-queue-account,
    .inbox-queue-account small, .inbox-queue-preview, .inbox-queue-state,
    .inbox-queue-location, .inbox-queue-avatar) {
    font-size: .875rem;
    line-height: 1.45;
    letter-spacing: 0;
  }
  body.app-body :is(.client-mobile-card-heading, .inbox-queue-copy) { gap: 5px; }
  body.app-body .client-mobile-facts { flex-wrap: wrap; gap: 6px 16px; }
  body.app-body .client-mobile-facts :is(small, strong) { font-weight: 400; }
  body.app-body .inbox-channel-badge { min-height: 24px; padding: 1px 8px; font-weight: 500; }
  body.app-body .inbox-channel-badges { gap: 5px; }
  body.app-body .inbox-conversation-header,
  body.app-body .inbox-channel-routing { background: rgba(255, 255, 255, .45); }
  body.app-body .inbox-channel-tab { border-radius: 13px; }
  body.app-body .inbox-transcript .timeline-item {
    background: rgba(255, 255, 255, .88);
    border: 1px solid var(--glass-line);
    border-radius: 18px 18px 18px 6px;
    box-shadow: var(--shadow-sm);
  }
  body.app-body .inbox-transcript .message-outbound {
    background: #e5eee3;
    border-color: rgba(53, 101, 84, .12);
    border-radius: 18px 18px 6px 18px;
  }
  body.app-body .inbox-transcript .timeline-date { color: #59675f; }

  /* Footers use the same frosted material, not new fixed positioning. */
  body.app-body :is(.inbox-composer, .staff-form-footer, .service-editor-footer,
    .booking-admin-savebar, .booking-wizard-footer) {
    background: var(--glass-chrome);
    border-color: var(--glass-line);
    box-shadow: 0 -4px 18px rgba(32, 56, 47, .045), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }

  /* Floating editing sheets must never show the underlying form's text. */
  body.app-body .inbox-channel-start > form,
  body.app-body :is(dialog, .inbox-context-pane, .appointment-drawer,
    .appointment-record-drawer, .qa-reporter-form, .staff-invite-dialog),
  body.app-body.page-calendar .calendar-filter-popover form,
  body.app-body .calendar-mobile-more > div {
    background: var(--panel-solid);
    border-color: var(--line-strong);
    box-shadow: 0 12px 40px rgba(32, 56, 47, .14), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.app-body dialog::backdrop { background: rgba(23, 45, 36, .35); }
  body.app-body :is(.error-banner, .form-errors) { background: #fae5e2; color: #842d2d; }
  body.app-body .booking-service-card { background: var(--glass-field); border-radius: 18px; }
  body.app-body .booking-service-card:has(> input:checked) { background: #fff0d5; }

  /* The public booking shell has its own tokens; keep its mobile material in
     the same family without touching catalog, consent or booking behavior. */
  body.app-body.is-public-booking {
    --booking-ink: var(--ink);
    --booking-muted: var(--ink-muted);
    --booking-glass: var(--glass-surface);
    --booking-input: var(--glass-field);
    --booking-line: var(--line);
    --booking-line-strong: var(--line-strong);
    --booking-accent: var(--brand);
    background: var(--mobile-glass-background);
  }
  body.app-body.is-public-booking::before,
  body.app-body.is-public-booking::after { display: none; }
  body.app-body.is-public-booking :is(.booking-brandbar, .booking-progress-shell,
    .booking-wizard-step, .public-booking-success, .booking-service-card,
    .booking-review-card, .booking-wizard-footer) {
    color: var(--ink);
    background: var(--glass-surface);
    border-color: var(--glass-line);
    border-radius: 22px;
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.app-body.is-public-booking :is(.booking-brandbar, .booking-wizard-footer) {
    background: var(--glass-chrome);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  body.app-body.is-public-booking .booking-service-card:has(> input:checked) { background: #fff0d5; border-color: var(--brand); }
  body.app-body.is-public-booking :is(select, textarea) { color: var(--ink); background: var(--glass-field); border-radius: 14px; font-size: 16px; }

  /* Native same-origin page navigation; the approved dock stays live outside
     the snapshot. JS only supplies day direction and an older-browser fallback. */
  @view-transition { navigation: auto; }
  :root { view-transition-name: none; --day-enter-x: 12px; --day-exit-x: -8px; }
  body.app-body:has([data-mobile-bottom-nav]) #main-content { view-transition-name: amber-page; }
  :root[data-mobile-motion="day"] body.app-body #main-content { view-transition-name: none; }
  :root[data-mobile-motion="day"] .calendar-board { view-transition-name: amber-day; }
  :root[data-mobile-motion="day"] .calendar-mobile-date-strip { view-transition-name: amber-dates; }
  :root[data-mobile-direction="back"] { --day-enter-x: -12px; --day-exit-x: 8px; }
  ::view-transition-group(*) { animation-duration: 160ms; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  ::view-transition-old(amber-page) { animation: amber-page-exit 100ms ease both; }
  ::view-transition-new(amber-page) { animation: amber-page-enter 140ms ease both; }
  ::view-transition-old(amber-day) { animation: amber-day-exit 120ms cubic-bezier(.22, .61, .36, 1) both; }
  ::view-transition-new(amber-day) { animation: amber-day-enter 160ms cubic-bezier(.22, .61, .36, 1) both; }
  ::view-transition-old(amber-dates) { animation: amber-page-exit 100ms ease both; }
  ::view-transition-new(amber-dates) { animation: amber-page-enter 140ms ease both; }
  ::view-transition-image-pair(*) { isolation: auto; }
  ::view-transition-old(*), ::view-transition-new(*) { mix-blend-mode: normal; }
  @keyframes amber-page-enter { from { opacity: 0; } to { opacity: 1; } }
  @keyframes amber-page-exit { from { opacity: 1; } to { opacity: 0; } }
  @keyframes amber-day-enter { from { opacity: 0; transform: translateX(var(--day-enter-x)); } to { opacity: 1; transform: none; } }
  @keyframes amber-day-exit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(var(--day-exit-x)); } }

  /* Old browsers get opaque surfaces; reduced transparency is a real opt-out. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.app-body {
      --glass-surface: #fafbf7;
      --glass-chrome: #fffdf9;
      --glass-field: #fff;
      --glass-blur: none;
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    body.app-body { --glass-surface: #fafbf7; --glass-chrome: #fffdf9; --glass-field: #fff; --glass-blur: none; --mobile-glass-background: #f4f5ee; }
    body.app-body .topbar { background: #20382f; }
    body.app-body .hero { background: #fff9ec; }
  }
  @media (prefers-reduced-motion: reduce) {
    body.app-body.is-authenticated .topbar { transition: none !important; }
    @view-transition { navigation: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
    body.app-body *, body.app-body *::before, body.app-body *::after {
      animation: none;
      transition: none;
      scroll-behavior: auto;
    }
  }
  @media (forced-colors: active) {
    body.app-body { --glass-surface: Canvas; --glass-chrome: Canvas; --glass-field: Field; --glass-blur: none; --ink: CanvasText; }
    body.app-body :is(.button, .panel, input, select, textarea, .mobile-bottom-link) { border: 1px solid ButtonText; box-shadow: none; }
  }
}