/* session screens (2026-10-15 handoff). Hex colors only in token files. */
/* Meet + Speed Date: allowance card, blocked reasons, queue/session states, preview switch. */

/* Small "Prototype" tag (scoped so other areas' tags aren't affected). */
.sess-allow .proto-tag,
.session-sheet .proto-tag {
  align-self: start;
  padding: 2px 8px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--hb-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* "Preview only" state switch. */
.sess-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--hb-muted);
  font-size: 13px;
  font-weight: 700;
}
.sess-preview select {
  flex: 1 1 200px;
  min-height: 40px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--hb-text);
  background: var(--hb-surface);
  font: inherit;
  font-size: 14px;
}
.sess-preview select:focus-visible { outline: 3px solid var(--hb-focus); outline-offset: 2px; }

/* Allowance card: remaining today + this month, reset times, priority line. */
.sess-allow { margin: 12px 0; }
.sess-allow .dating-row { border-bottom: 1px solid var(--line); }
.sess-allow .dating-row-text strong { font-variant-numeric: tabular-nums; }
.sess-facts { display: grid; gap: 0; margin: 0; padding: 4px 16px 12px; }
.sess-facts > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.sess-facts > div:last-child { border-bottom: 0; }
.sess-facts dt { color: var(--hb-muted); }
.sess-facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Blocked reasons. Each reason has its own wording; the look stays calm. */
.sess-blocked {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin: 8px 0;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--hb-thread-gold);
  border-radius: var(--radius-md);
  background: var(--hb-surface);
  text-align: left;
}
.sess-blocked strong { font-size: 15px; line-height: 1.35; }
.sess-blocked small { color: var(--hb-muted); font-size: 14px; line-height: 1.4; }
.sess-blocked-safety { border-left-color: var(--hb-thread-red); }
.sess-blocked-unavailable { border-left-color: var(--hb-thread-navy); }
.sess-blocked .secondary-button { justify-self: start; min-height: 44px; }
.sess-upgrade { margin: 0; color: var(--hb-muted); font-size: 14px; line-height: 1.4; }
.sess-upgrade a { color: var(--hb-primary); font-weight: 700; }

/* Queue / session state cards. */
.sess-card { margin-top: 4px; }
.sess-card .dating-actions { justify-content: center; }
.sess-pulse .dating-flow-icon { animation: pulse 1.6s ease-in-out infinite; }
.sess-neutral .dating-flow-icon { color: var(--hb-muted); background: var(--raised); }
.sess-priority, .sess-note { margin: 0; color: var(--hb-muted); font-size: 14px; }
.sess-clock { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.sess-card .sess-blocked { width: 100%; max-width: 420px; }

/* Leave / Block / Report row on every live state. */
.sess-safety {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* Add-time sheet: prototype price label under each price. */
.session-option .sess-proto-price, .sess-proto-price {
  display: block;
  color: var(--hb-muted);
  font-size: 11px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .sess-pulse .dating-flow-icon { animation: none; }
}

@media (min-width: 900px) {
  .sess-card { padding: 40px 32px; }
}
.sess-keep { white-space: nowrap; }
/* "Meet now" (owner, 2026-10-17): one wide bar across the screen, stays in reach while scrolling. */
.meet-now { position: sticky; z-index: 5; bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 10px); display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; margin: 16px 0; border-radius: 18px; font-size: 20px; font-weight: 850; box-shadow: 0 10px 26px color-mix(in srgb, var(--hb-primary) 35%, transparent); }
.meet-now .icon { width: 24px; height: 24px; }
body.bars-hidden .meet-now { bottom: calc(env(safe-area-inset-bottom) + 10px); }