.site-nav {
  position: sticky;
  top: 14px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1180px, 100% - 32px);
  min-height: 66px;
  margin: 18px auto 0;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(23, 23, 23, 0.08);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.88);
  box-shadow: 0 14px 42px rgba(32, 26, 19, 0.1);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
}

.site-nav a {
  text-decoration: none;
}

.site-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.site-nav-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  box-shadow: 0 6px 14px rgba(122, 0, 25, 0.18);
}

.site-nav-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.site-nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.site-nav-links > a, .site-nav-account > summary {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 10px;
  color: #65615d;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.site-nav-account > summary::-webkit-details-marker {
  display: none;
}

.site-nav-links > a:hover, .site-nav-links > a:focus-visible, .site-nav-account > summary:hover, .site-nav-account > summary:focus-visible {
  color: #171717;
  background: rgba(23, 23, 23, 0.055);
  outline: none;
}

.site-nav-login {
  border: 1px solid rgba(23, 23, 23, 0.1);
}

.site-nav-cta {
  margin-left: 4px;
  background: #171717 !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(23, 23, 23, 0.14);
}

.site-nav-cta:hover, .site-nav-cta:focus-visible {
  transform: translateY(-1px);
  background: #353535 !important;
}

.site-nav-account {
  position: relative;
  margin-left: 4px;
}

.site-nav-account > summary {
  border: 1px solid rgba(23, 23, 23, 0.1);
  background: #fff;
  color: #252525;
}

.site-nav-account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  min-width: 132px;
  padding: 6px;
  border: 1px solid rgba(23, 23, 23, 0.1);
  border-radius: 12px;
  background: #fffdf9;
  box-shadow: 0 16px 34px rgba(23, 23, 23, 0.14);
}

.site-nav-account-menu a {
  padding: 9px 10px;
  border-radius: 8px;
  color: #4f4b46;
  font-size: 13px;
  font-weight: 800;
}

.site-nav-account-menu a:hover, .site-nav-account-menu a:focus-visible {
  background: #f2efea;
  color: #171717;
  outline: none;
}

.site-nav-logout { margin: 0; }

.site-nav-logout button {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4f4b46;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.site-nav-logout button:hover,
.site-nav-logout button:focus-visible {
  background: #f2efea;
  color: #171717;
  outline: none;
}

.site-nav-toggle {
  display: none;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(23, 23, 23, 0.1);
  border-radius: 10px;
  background: #fff;
  color: #252525;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .site-nav {
    top: 8px;
    margin-top: 10px;
  }
  .site-nav-toggle {
    display: inline-flex;
    align-items: center;
  }
  .site-nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #fffdf9;
    box-shadow: 0 16px 34px rgba(23, 23, 23, 0.12);
    transition: max-height 0.24s ease, opacity 0.18s ease, padding 0.18s ease;
  }
  .site-nav-open .site-nav-links {
    max-height: 520px;
    padding: 7px;
    opacity: 1;
    border-color: rgba(23, 23, 23, 0.1);
  }
  .site-nav-links > a, .site-nav-account > summary {
    width: 100%;
    justify-content: flex-start;
    padding: 0 12px;
  }
  .site-nav-cta {
    margin: 0;
  }
  .site-nav-account {
    margin: 0;
  }
  .site-nav-account-menu {
    position: static;
    margin: 4px 0 0;
    box-shadow: none;
    border: 0;
    background: #f5f2ed;
  }
}
@media (max-width: 460px) {
  .site-nav {
    width: min(100% - 20px, 1180px);
    padding-left: 10px;
  }
  .site-nav-brand {
    font-size: 13px;
  }
  .site-nav-brand > span:last-child {
    max-width: 195px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
:root {
  --gdt-maroon: #7a0019;
  --gdt-gold: #ffcc33;
  --gdt-ink: #1d1b19;
  --gdt-muted: #706a64;
  --gdt-paper: #fbf8f4;
  --gdt-line: rgba(24, 21, 18, 0.09);
  --gdt-success: #187a4d;
  --gdt-warning: #855b00;
  --gdt-danger: #a22936;
  --gdt-radius-sm: 12px;
  --gdt-radius-md: 16px;
  --gdt-radius-lg: 22px;
  --gdt-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body .site-nav {
  top: 24px;
  width: min(1360px, 100% - 64px);
  min-height: 74px;
  padding: 12px 16px 12px 20px;
  border-radius: 22px;
  transition: width 0.48s cubic-bezier(0.16, 1, 0.3, 1), min-height 0.48s cubic-bezier(0.16, 1, 0.3, 1), padding 0.48s cubic-bezier(0.16, 1, 0.3, 1), top 0.48s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.48s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.48s cubic-bezier(0.16, 1, 0.3, 1), background 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}
body .site-nav.site-nav-scrolled {
  top: 12px;
  width: min(1120px, 100% - 32px);
  min-height: 62px;
  padding: 8px 12px 8px 16px;
  border-radius: 17px;
  background: rgba(255, 253, 249, 0.94);
  box-shadow: 0 16px 42px rgba(32, 26, 19, 0.14);
}

.site-nav .site-nav-links > a:active,
.site-nav .site-nav-account > summary:active {
  transform: scale(0.98);
}
.site-nav .site-nav-links > a.is-active {
  background: rgba(122, 0, 25, 0.08);
  color: #7a0019;
  position: relative;
}
.site-nav .site-nav-links > a.is-active::after {
  background: #7a0019;
  border-radius: 999px;
  bottom: 5px;
  content: "";
  height: 2px;
  left: 12px;
  position: absolute;
  right: 12px;
}

@media (max-width: 860px) {
  body .site-nav,
body .site-nav.site-nav-scrolled {
    top: 8px;
    width: min(100% - 20px, 680px);
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 18px;
  }
  .site-nav .site-nav-links > a.is-active::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .site-nav {
    transition: none;
  }
}

/* Shared small-screen guardrails for organization workspaces. */
@media (max-width: 620px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .organization-layout,
  .org-layout {
    width: calc(100% - 24px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    margin-top: 20px !important;
  }

  .organization-layout > *,
  .org-layout > *,
  .organization-layout .org-shell,
  .organization-layout .page {
    min-width: 0;
  }

  .organization-sidebar,
  .workspace-side {
    position: static !important;
    min-width: 0;
    padding: 8px !important;
    overflow: visible !important;
  }

  .workspace-nav {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    padding: 2px 0 6px !important;
    scroll-padding-inline: 2px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .workspace-nav::-webkit-scrollbar { display: none; }

  .workspace-nav a {
    flex: 0 0 auto !important;
    min-height: 42px;
    padding: 10px 12px !important;
    scroll-snap-align: start;
  }

  .workspace-nav a:focus-visible {
    outline: 3px solid rgba(122, 0, 25, 0.28);
    outline-offset: 2px;
  }

  .workspace-nav em { display: none; }

  .page-head,
  .head {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 16px !important;
  }

  .page-head h1,
  .head h1 { overflow-wrap: anywhere; }

  .head-actions {
    width: 100%;
    justify-content: stretch !important;
  }

  .head-actions .button {
    flex: 1 1 140px;
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .site-nav-brand > span:last-child { max-width: 150px; }
}

/* Phone navigation is deliberately separate from the desktop menu: five
   task-level destinations stay in thumb reach, while Explore carries the
   related discovery routes without duplicating the desktop navigation. */
.mobile-tab-bar,
.mobile-explore-tray,
.mobile-app-header,
.mobile-profile-scrim,
.mobile-profile-drawer { display: none; }
@media (max-width: 760px) {
  .site-footer { display: none !important; }
  /* One source of truth for the floating dock. The panel sits above the Home
     Indicator instead of painting a full-width strip behind it. */
  :root {
    --gdt-mobile-nav-content-height: 56px;
    --gdt-dock-gutter: 16px;
    --gdt-dock-offset: max(12px, env(safe-area-inset-bottom));
    --gdt-dock-height: calc(var(--gdt-mobile-nav-content-height) + var(--gdt-dock-offset));
  }
  /* Keep native touch scrolling, but remove browser scrollbar chrome and its
     gutter so the app canvas remains centered edge-to-edge. */
  html,
  body,
  body * {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  body *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  /* The desktop header never becomes a second mobile navigation system. */
  body {
    padding-top: 0;
    padding-bottom: calc(var(--gdt-dock-height) + 12px);
  }
  body .site-nav,
  body .site-nav.site-nav-scrolled {
    display: none;
  }
  .mobile-app-header {
    position: sticky;
    top: 0;
    z-index: 170;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(60px + env(safe-area-inset-top));
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
    border-bottom: 1px solid rgba(23, 23, 23, .07);
    background: rgba(248, 246, 241, .94);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
  }
  .mobile-app-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: #211b17;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -.03em;
    text-decoration: none;
  }
  .mobile-app-brand span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(122, 0, 25, .18);
  }
  .mobile-app-brand span img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .mobile-app-profile {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(32, 26, 19, .11);
    border-radius: 50%;
    background: #fffdfa;
    color: #7a0019;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease;
  }
  .mobile-app-profile svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
  .mobile-app-profile:active { transform: scale(.96); background: #fbeef0; }
  .mobile-app-profile { cursor: pointer; font: inherit; }
  .mobile-profile-scrim {
    position: fixed;
    inset: 0;
    z-index: 205;
    display: block;
    background: rgba(28, 20, 13, .48);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease;
    visibility: hidden;
  }
  .mobile-profile-scrim.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
  .mobile-profile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    /* The tab bar is fixed above this drawer in the stacking order. Reserve
       its full height so the persistent Log out action can never sit behind
       the mobile navigation. */
    bottom: var(--gdt-dock-height);
    z-index: 210;
    display: flex;
    width: min(344px, calc(100% - 36px));
    flex-direction: column;
    overflow: hidden;
    padding: calc(18px + env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    border-left: 1px solid rgba(32, 26, 19, .10);
    background: #fffdfa;
    box-shadow: -16px 0 42px rgba(32, 26, 19, .18);
    opacity: 0;
    pointer-events: none;
    scrollbar-width: none;
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease, visibility 180ms ease;
    visibility: hidden;
  }
  .mobile-profile-drawer::-webkit-scrollbar { display: none; }
  .mobile-profile-drawer.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); visibility: visible; }
  .mobile-profile-drawer__head,
  .mobile-profile-drawer__head > div,
  .mobile-profile-drawer__nav a {
    display: flex;
    align-items: center;
  }
  .mobile-profile-drawer__head { justify-content: space-between; gap: 12px; padding: 0 2px 18px; border-bottom: 1px solid rgba(32, 26, 19, .10); }
  .mobile-profile-drawer__head > div { min-width: 0; gap: 10px; }
  .mobile-profile-drawer__avatar {
    display: grid;
    width: 42px;
    height: 42px;
    flex: none;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(145deg, #ffe9a3, #ffcc33 60%, #d6a100);
    color: #4b0714;
    font-size: 16px;
    font-weight: 900;
  }
  .mobile-profile-drawer__head strong,
  .mobile-profile-drawer__head small,
  .mobile-profile-drawer__nav span,
  .mobile-profile-drawer__nav small { display: block; }
  .mobile-profile-drawer__head strong { overflow: hidden; color: #211b17; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-profile-drawer__head small,
  .mobile-profile-drawer__nav small { margin-top: 2px; color: #766d64; font-size: 11px; font-weight: 650; }
  .mobile-profile-drawer__head button {
    display: grid;
    width: 44px;
    height: 44px;
    flex: none;
    place-items: center;
    border: 1px solid rgba(32, 26, 19, .11);
    border-radius: 50%;
    background: #fff;
    color: #7a0019;
  }
  .mobile-profile-drawer__head button svg,
  .mobile-profile-drawer__nav a > svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
  .mobile-profile-drawer__head button svg { width: 20px; height: 20px; }
  .mobile-profile-drawer__nav {
    display: grid;
    flex: 1;
    gap: 4px;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    padding-top: 16px;
    scrollbar-width: none;
  }
  .mobile-profile-drawer__nav::-webkit-scrollbar { display: none; }
  .mobile-profile-drawer__nav a {
    min-height: 56px;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 13px;
    color: #2a211c;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
  }
  .mobile-profile-drawer__nav a:active { background: rgba(122, 0, 25, .08); color: #7a0019; }
  .mobile-profile-drawer__nav a > svg { width: 20px; height: 20px; flex: none; color: #7a0019; }
  .mobile-profile-drawer__nav a > span:not(.mobile-profile-drawer__emoji) { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 850; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-profile-drawer__label { margin: 17px 10px 5px; color: #8b172c; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .mobile-profile-drawer__logout {
    display: grid;
    min-height: 44px;
    margin-top: 12px;
    flex: none;
    place-items: center;
    border: 1px solid rgba(122, 0, 25, .18);
    border-radius: 12px;
    background: #fff8f8;
    overflow: hidden;
  }
  .mobile-profile-drawer__logout button {
    width: 100%;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: #7a0019;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
  }
  .mobile-profile-drawer__logout:active { background: #fbeef0; }
  .mobile-profile-drawer__logout button::before { content: '↪'; margin-right: 8px; font-size: 16px; }
  body.mobile-profile-open { overflow: hidden; }
  body:has(.mobile-home) .mobile-app-header { display: none; }
  body.site-nav-menu-open {
    overflow-y: auto;
  }
  .mobile-explore-tray {
    position: fixed;
    right: var(--gdt-dock-gutter);
    bottom: calc(var(--gdt-dock-height) + 12px);
    left: var(--gdt-dock-gutter);
    z-index: 175;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 14px 6px 6px;
    border: 1px solid rgba(23, 23, 23, .1);
    border-radius: 18px;
    background: rgba(255, 253, 249, .98);
    box-shadow: 0 -12px 30px rgba(32, 26, 19, .14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    visibility: hidden;
  }
  .mobile-explore-tray::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: rgba(53, 39, 28, .2);
    transform: translateX(-50%);
  }
  .mobile-explore-tray.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }
  .mobile-explore-tray a {
    display: grid;
    min-width: 0;
    /* 44px tap minimum (WCAG 2.5.5 / HIG); these were 40px. */
    min-height: 52px;
    place-items: center;
    /* Icon over label, in the same outline language as the tab bar below. */
    grid-auto-rows: auto;
    gap: 5px;
    padding: 6px 4px;
    border-radius: 10px;
    color: #71685e;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-explore-tray a.is-active {
    background: rgba(122, 0, 25, .09);
    color: #7a0019;
  }
  .mobile-explore-tray a:active { opacity: .7; }
  .mobile-tab-bar {
    /* This is app chrome, never document content. It is a floating panel so
       long catalog and organization pages still feel like a mobile app. */
    position: fixed !important;
    right: var(--gdt-dock-gutter) !important;
    bottom: var(--gdt-dock-offset) !important;
    left: var(--gdt-dock-gutter) !important;
    z-index: 180;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    box-sizing: border-box;
    width: auto !important;
    height: var(--gdt-mobile-nav-content-height);
    min-height: var(--gdt-mobile-nav-content-height);
    padding: 4px 6px;
    border: 1px solid rgba(32, 26, 19, .10);
    border-radius: 28px;
    background: rgba(255, 253, 250, .94);
    box-shadow: 0 12px 30px rgba(57, 39, 18, .15), inset 0 1px rgba(255, 255, 255, .86);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    isolation: isolate;
    touch-action: pan-y;
  }
  .mobile-tab-bar > a,
  .mobile-tab-bar > button { position: relative; z-index: 1; }
  .mobile-tab-bar > a::after,
  .mobile-tab-bar > button::after {
    display: none;
  }
  .mobile-tab-bar > a > svg,
  .mobile-tab-bar > button > svg,
  .mobile-tab-bar > a > span,
  .mobile-tab-bar > button > span { transition: transform 170ms ease, color 170ms ease, opacity 170ms ease; }
  .mobile-tab-bar > a.is-active > svg,
  .mobile-tab-bar > button.is-active > svg { transform: scale(1.06); }
  .mobile-tab-bar > a.is-active > span,
  .mobile-tab-bar > button.is-active > span { opacity: 1; }
  .mobile-tab-bar > a:not(.is-active) > span,
  .mobile-tab-bar > button:not(.is-active) > span { opacity: .68; }
  .mobile-tab-bar a,
  .mobile-tab-bar button {
    display: grid;
    min-width: 0;
    /* Keep the selected surface visibly inside the dock.  The prior 48px
       control nearly filled its 56px parent, which made the active pill read
       as lifted even though it had no translate transform. */
    min-height: 44px;
    height: 44px;
    align-self: center;
    box-sizing: border-box;
    place-content: center;
    justify-items: center;
    gap: 2px;
    border: 1px solid transparent;
    border-radius: 20px;
    color: #71685e;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.2;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
    /* Let the bar own a horizontal gesture while retaining normal vertical
       page scrolling.  A broader page rule otherwise reset this to
       `manipulation` on the individual tab targets. */
    touch-action: pan-y !important;
  }
  .mobile-tab-bar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-explore-tray svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-explore-tray a span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
  .mobile-tab-bar > a.is-active,
  .mobile-tab-bar > button.is-active {
    border-color: rgba(191, 139, 29, .24);
    background: #fff8e5;
    box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 9px 20px rgba(69, 40, 11, .16);
    color: #7a0019;
    font-weight: 900;
  }
  .mobile-tab-bar .mobile-tab-smart:not(.is-active) { color: #71685e; }
  .mobile-tab-bar a:active,
  .mobile-tab-bar button:active { transform: scale(.96); }
  .mobile-tab-bar a:focus-visible,
  .mobile-tab-bar button:focus-visible,
  .mobile-explore-tray a:focus-visible { outline: 2px solid #7a0019; outline-offset: 2px; }

  /* A shared app canvas for every public page. Individual views retain their
     content styles, but cannot spill wider than a phone or hide under tabs. */
  /* When a browser reports a zero safe-area inset, its viewport background is
     the final fallback behind the Home Indicator. Match it to the dock rather
     than exposing the browser's dark canvas below the app chrome. */
  html { min-width: 0; background: #fffdfa; overflow-x: clip; }
  body { min-width: 0; overflow-x: clip; background: #f8f6f1; }
  body:has(.mobile-tab-bar) > main,
  body:has(.mobile-tab-bar) > .page,
  body:has(.mobile-tab-bar) .page,
  body:has(.mobile-tab-bar) .shell,
  body:has(.mobile-tab-bar) .content {
    min-width: 0;
    max-width: 100%;
  }
  body:has(.mobile-tab-bar) main.page:not(.page-shell),
  body:has(.mobile-tab-bar) main.shell,
  body:has(.mobile-tab-bar) .content {
    /* A stable 16px gutter on each side prevents full-width sections from
       feeling left-heavy, while auto margins keep the whole app panel true
       center regardless of page-specific desktop rules. */
    width: min(calc(100% - 32px), 680px);
    margin-inline: auto !important;
  }
  body:has(.mobile-tab-bar) main.page:not(.page-shell),
  body:has(.mobile-tab-bar) main.shell {
    padding-bottom: 32px;
  }
  body:has(.mobile-tab-bar) .layout,
  body:has(.mobile-tab-bar) .page-head,
  body:has(.mobile-tab-bar) .head {
    min-width: 0;
    max-width: 100%;
  }
  body:has(.mobile-tab-bar) :where(img, video, canvas, svg) { max-width: 100%; }
  body:has(.mobile-tab-bar) a,
  body:has(.mobile-tab-bar) button { touch-action: manipulation; }
  /* Interactive cards and controls receive the same immediate, quiet press
     response; layout dimensions never change. */
  body:has(.mobile-tab-bar) :is(.restaurant-list .card, .restaurant-card, .deal, .result-card, .catalog-item, .card-action, .button, .chip, .toggle, .filter-text, .select):active {
    transform: scale(.98);
  }
  body:has(.mobile-tab-bar) :is(.restaurant-list .card, .restaurant-card, .deal, .result-card, .catalog-item, .card-action, .button, .chip, .toggle, .filter-text, .select) {
    transition: transform 130ms ease, opacity 130ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-tab-bar::before,
    .mobile-tab-bar > a > svg,
    .mobile-tab-bar > button > svg,
    .mobile-tab-bar > a > span,
    .mobile-tab-bar > button > span,
    .mobile-tab-bar > a::after,
    .mobile-tab-bar > button::after,
    body:has(.mobile-tab-bar) :is(.restaurant-list .card, .restaurant-card, .deal, .result-card, .catalog-item, .card-action, .button, .chip, .toggle, .filter-text, .select) {
      animation: none !important;
      transition: none !important;
    }
  }
}