/* ============================================================================
   FLOOR CAPTURE — layout/nav/animation styles on top of components.css
   (which carries the design-system atoms lifted from the handoff).
   ========================================================================== */

.floor-shell {
  width: 100%;
  max-width: 402px;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.floor-body { flex: 1; min-height: 0; overflow-y: auto; }

.floor-header {
  padding: 20px 16px 12px;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(var(--bg) 72%, transparent);
  backdrop-filter: blur(2px);
}
.floor-header__bar { display: flex; align-items: center; gap: 10px; }
.floor-header__title {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  color: var(--text-hi); margin-top: 10px;
}

.floor-sticky-head {
  position: sticky; top: 0; z-index: 10; background: var(--bg);
  padding: 20px 16px 14px; border-bottom: 1px solid var(--border);
}

.floor-list { padding: 12px 16px 24px; display: grid; gap: 10px; }
.floor-pad { padding: 0 16px 24px; display: grid; gap: 16px; }

.btn-back { min-height: 44px; padding: 0 12px; border-radius: 12px; }

/* Bottom tab bar */
.floor-nav {
  display: flex; height: 72px; flex: none;
  border-top: 1px solid var(--border);
  background: var(--bg); position: relative; z-index: 20;
}
.floor-nav__item {
  flex: 1; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 8px 4px; color: var(--text-lo); position: relative;
  -webkit-tap-highlight-color: transparent;
}
.floor-nav__item.is-on { color: var(--accent); }
.floor-nav__item.is-on::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
}
.floor-nav__label {
  font-size: 10px; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; font-family: var(--font-mono);
}
.floor-nav__item.is-on .floor-nav__label { font-weight: 700; }

/* Offline / queue banner */
.floor-offline {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: oklch(0.80 0.15 70 / 0.12);
  border-top: 1px solid oklch(0.80 0.15 70 / 0.25);
}
.floor-offline__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: oklch(0.80 0.15 70);
  animation: pulse 1s ease-in-out infinite; flex: none;
}
.floor-offline__text {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: oklch(0.80 0.15 70); flex: 1;
}
.floor-offline__sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-lo); }

/* Toast + sheet overlays */
.floor-toast-wrap {
  position: absolute; left: 12px; right: 12px; bottom: 100px; z-index: 80;
  animation: toastIn 240ms var(--ease-out);
  /* The toast sits over the SAVE button. Taps pass through everything except its
     own action buttons, so a coach can retry a failed save immediately instead of
     waiting out the toast (smoke test B2). */
  pointer-events: none;
}
.floor-toast-wrap .toast__act { pointer-events: auto; }
.floor-sheet-scrim {
  position: absolute; inset: 0; z-index: 90;
  background: oklch(0 0 0 / 0.5);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.floor-sheet {
  border-radius: 22px 22px 0 0; padding: 16px 16px 28px;
  max-height: 80%; overflow: auto; animation: sheetIn 280ms var(--ease-out);
}
.floor-sheet__grip {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--border-strong); margin: 0 auto 16px;
}
.floor-modal-scrim {
  position: absolute; inset: 0; z-index: 200;
  background: oklch(0 0 0 / 0.6);
  display: grid; place-items: center; padding: 24px;
}

@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sheetIn { from { transform: translateY(40%); } to { transform: none; } }

/* Text utilities used by the prototype markup */
.display { font-family: var(--font-display); }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }