/* PLUM 1: responsive equivalents of the approved pills, glass panels and sheet. */
[data-app-design-v2] .appV2AppBar { display:flex; align-items:center; gap:12px; min-height:56px; margin-bottom:12px; font:600 .875rem/1.5 var(--app-v2-font); }
[data-app-design-v2] .appV2AppBack { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; min-height:44px; border-radius:50%; background:var(--app-v2-panel); color:var(--app-v2-ink); text-decoration:none; font:400 2rem/1 var(--app-v2-font); }
[data-app-design-v2] .appV2AppBack:focus-visible { outline:var(--app-v2-focus); outline-offset:3px; }
[data-app-design-v2] .appV2TabDock { position: sticky; bottom: 0; flex-shrink: 0; width: 100%; height: var(--app-v2-tab-height); max-height: 60vh; overflow: auto; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 480px; margin: auto; box-sizing: border-box; }
[data-app-design-v2] .appV2Tabs { display: flex; flex: 1; padding: 6px; border: 1px solid var(--app-v2-rule); border-radius: 36px; background: #fffdfb; box-shadow: 0 8px 24px #231a1e18; backdrop-filter: blur(22px) saturate(170%); }
[data-app-design-v2] .appV2Tab { display: flex; flex: 1 1 104px; flex-direction: column; gap: 2px; justify-content: center; align-items: center; min-height: 48px; min-width: 44px; padding: 4px 8px; border-radius: 28px; color: var(--app-v2-muted); font: 600 0.875rem/1.5 var(--app-v2-font); text-decoration: none; overflow-wrap: anywhere; }
[data-app-design-v2] .appV2Tab[aria-current="page"] { color: var(--app-v2-plum); background: var(--app-v2-panel); }
[data-app-design-v2] .appV2TabDark .appV2Tabs { background: var(--app-v2-night); border-color: var(--app-v2-secondary); }
[data-app-design-v2] .appV2TabDark .appV2Tab { color: var(--app-v2-on-night); }
[data-app-design-v2] .appV2TabDark .appV2Tab[aria-current="page"] { background: var(--app-v2-plum); }
[data-app-design-v2] .appV2Tab:focus-visible { outline: var(--app-v2-focus); outline-offset: 3px; }
[data-app-design-v2] .appV2Mascot { display: block; width: min(180px, 55%); height: auto; margin: auto; }
[data-app-design-v2] .appV2Modal { overflow: auto; overscroll-behavior: contain; padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
[data-app-design-v2] .appV2Sheet { margin: auto auto 0; width: min(480px, calc(100% - 16px)); max-height: 60vh; overflow: auto; border-radius: 28px 28px 0 0; background: #fffdfb; box-shadow: 0 -10px 40px #231a1e33; }
[data-app-design-v2] .appV2Alert { padding: 12px 14px; border-radius: 14px; background: #fbeceb; color: #5a2a2a; font: 500 0.875rem/1.5 var(--app-v2-font); }
[data-app-design-v2] .appV2Toast { padding: 12px 16px; border-radius: 22px; background: var(--app-v2-ink); color: var(--app-v2-paper); font: 600 0.875rem/1.5 var(--app-v2-font); }
@media (prefers-reduced-motion: no-preference) {
  [data-app-design-v2] .appV2Tab { transition: background-color 150ms, color 150ms; }
}

[data-app-design-v2] .appV2Logout { min-width: 44px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--app-v2-rule); border-radius: 28px; background: var(--app-v2-panel); color: var(--app-v2-plum); font: 600 0.875rem/1.5 var(--app-v2-font); }
[data-app-design-v2] .appV2Logout:focus-visible { outline: var(--app-v2-focus); outline-offset: 3px; }

@supports (backdrop-filter: blur(1px)) {
  [data-app-design-v2] .appV2Tabs { background: rgba(255, 253, 251, 0.82); }
  [data-app-design-v2] .appV2TabDark .appV2Tabs { background: rgba(42, 24, 32, 0.88); }
  [data-app-design-v2] .appV2Sheet { background: rgba(255, 253, 251, 0.94); backdrop-filter: blur(22px) saturate(170%); }
}

/* The in-flow spacer and wrapper-bounded sticky dock use the same capped, font-relative height. */
[data-app-design-v2] .appV2TabSpace { height: var(--app-v2-tab-height); flex-shrink: 0; }
[data-app-design-v2] .appV2TabIcon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* CSS-only keyboard accommodation. Other content focus also hides the dock;
   keyboard focus on the dock reveals it, so navigation stays reachable. */
[data-app-design-v2] .appV2LogoutGroup { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 0; }
[data-app-design-v2] .appV2Logout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
[data-app-design-v2] .appV2Logout[aria-disabled="true"] { cursor: wait; }
[data-app-design-v2] .appV2LogoutProgress { width: 1rem; height: 1rem; border: 2px solid var(--app-v2-rule); border-top-color: var(--app-v2-plum); border-radius: 50%; }
[data-app-design-v2] .appV2LogoutError { margin: 0; max-width: 24rem; font: 500 0.8125rem/1.5 var(--app-v2-font); color: var(--app-v2-error); }
@media (max-width: 320px) {
  [data-app-design-v2] .appV2TabDock { gap: 8px; padding-inline: 12px; }
  [data-app-design-v2] .appV2Tab { flex-basis: 88px; padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-app-design-v2] .appV2Tab,
  [data-app-design-v2] .appV2TabDock,
  [data-app-design-v2] .appV2Sheet,
  [data-app-design-v2] .appV2LogoutProgress { animation: none; transition: none; scroll-behavior: auto; }
}

[data-app-design-v2].appV2Frame .appV2AccountSheet,
[data-app-design-v2].appV2Frame .appV2EventPanel,
[data-app-design-v2].appV2Frame .appV2Sheet { max-height: 60vh; overflow: auto; overscroll-behavior: contain; }
[data-app-design-v2].appV2Frame .appV2Sheet { padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
[data-app-design-v2] .appV2AccountInput,
[data-app-design-v2] .appV2GiftInput,
[data-app-design-v2] .appV2SupportInput { scroll-margin-block: 5rem; }

/* PX-A: prototype app bar and navigation symbols. */
[data-app-design-v2] .appV2Icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
[data-app-design-v2] .appV2Brand { display: inline-flex; flex-shrink: 0; white-space: nowrap; align-items: center; gap: 8px; font: 700 1.125rem/1 var(--app-v2-font); letter-spacing: -.04em; color: inherit; }
[data-app-design-v2] .appV2BrandMark { display: grid; flex-shrink: 0; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--app-v2-plum); }
[data-app-design-v2] .appV2BrandSymbol { width: 18px; height: 18px; }
[data-app-design-v2] .appV2VisuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-app-design-v2] .appV2TabDock { justify-content: space-between; padding-inline: 14px; }
[data-app-design-v2] .appV2Tabs { flex: 0 1 auto; padding: 5px; gap: 2px; box-shadow: inset 0 1px 1px #ffffff, 0 8px 22px #4e2c3c1a; }
[data-app-design-v2] .appV2Tab { box-sizing: border-box; flex: 0 1 104px; width: 104px; min-height: 54px; font-size: .6875rem; gap: 3px; }
[data-app-design-v2] .appV2Tab .appV2Icon { width: 22px; height: 22px; }
@media (max-width: 320px) {
  [data-app-design-v2] .appV2Tab { width: 88px; flex-basis: 88px; }
  [data-app-design-v2] .appV2TabDock { padding-inline: 12px; }
}

/* APP_NAV_FEEDBACK_01: display-only page navigation feedback. It never takes
   pointer input, so taps and the back gesture always reach the page. */
[data-app-design-v2] .appV2NavFeedback { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
[data-app-design-v2] .appV2NavFeedbackBar { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; width: 100%; height: 3px; border-radius: 0 3px 3px 0; background: var(--app-v2-gradient); transform-origin: 0 50%; }
[data-app-design-v2] .appV2NavFeedbackVeil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(35, 26, 30, 0.14); }
[data-app-design-v2] .appV2NavFeedbackBubble { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; background: var(--app-v2-paper); box-shadow: 0 8px 24px #231a1e2e; }
[data-app-design-v2] .appV2NavFeedbackBubble .appV2Mascot { width: 56px; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes appV2NavBarGrow { from { transform: scaleX(0.08); } to { transform: scaleX(0.9); } }
  @keyframes appV2NavVeilIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes appV2NavPulse { 0%, 100% { transform: scale(0.92); opacity: 0.75; } 50% { transform: scale(1.06); opacity: 1; } }
  [data-app-design-v2] .appV2NavFeedbackBar { animation: appV2NavBarGrow 8s cubic-bezier(0.1, 0.7, 0.2, 1) both; }
  [data-app-design-v2] .appV2NavFeedbackVeil { animation: appV2NavVeilIn 200ms ease-out both; }
  [data-app-design-v2] .appV2NavFeedbackBubble .appV2Mascot { animation: appV2NavPulse 1.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  [data-app-design-v2] .appV2NavFeedbackBar,
  [data-app-design-v2] .appV2NavFeedbackVeil,
  [data-app-design-v2] .appV2NavFeedbackBubble .appV2Mascot { animation: none; transition: none; }
}