/* Open Floor — answer-first mobile view. "Sporty" type system per
   design_handoff_brand_directory/README.md: Big Shoulders Display (display),
   DM Sans (body), DM Mono (labels). Cream + ink + a forest-green accent.
   Accent is signaled with color only — no italic. The board view is now the
   brand directory; the detail view is unchanged from design_handoff_open_floor. */

:root {
  --paper: #f3ece0;
  --paper-2: #ece3d2;       /* collapsed brand-header cream */
  --ink: #1c1814;
  --ink-soft: #3a3026;       /* body / hero-sub text */
  --muted: #6f655a;          /* eyebrows, meta, footer */
  --muted-2: #8a7e6f;        /* muted metric numbers */
  --accent: #1f7a3d;
  --accent-tint: rgba(31, 122, 61, 0.08);
  --divider: #d8cdb9;        /* section hairlines (hero bottom, group headers) */
  --hairline-row: #e0d6c4;   /* per-row hairline inside an expanded group */
  --idle-glyph: #c2b6a0;     /* unfilled star, idle chevron */
  --handle: #cabea7;
  --scrim: rgba(28, 24, 20, 0.45);

  --display: "Big Shoulders Display", "Oswald", Impact, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

/* Hide internal scrollbars — the chrome is intentionally minimal. */
::-webkit-scrollbar { display: none; }

.nowrap { white-space: nowrap; }

/* Phone-sized stage: full-bleed on a phone, a centered column with a soft
   shadow on tablet/desktop. */
.stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 30px 80px rgba(0, 0, 0, 0.06);
}

@media (max-width: 480px) {
  .stage { box-shadow: none; max-width: none; }
}

.shell {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

/* ---- top row: tappable identity (swatch + brand + short) + product label ----
   In board mode the top row is the brand-directory wordmark on the left and
   a "N brands · M floors" meta line on the right (both mono, 10.5px). In
   detail mode it stays the back button + gym identity + product label. */
.top-row {
  padding: 52px 22px 4px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.top-row__wordmark {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.top-row__meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 1px;
  white-space: nowrap;
}

.top-row__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gym-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The board's identity isn't tappable — it's a label, not a picker. */
.gym-btn--static { cursor: default; }

.back-btn {
  border: 1px solid var(--divider);
  background: transparent;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
}

.back-btn:hover { color: var(--ink); border-color: var(--ink); }

.gym-swatch {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gym-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.gym-brand {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.gym-short-line {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.gym-short {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.caret {
  font-size: 13px;
  color: var(--ink);
  opacity: 0.45;
}

.product {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 8px;
}

/* ---- day strip ---- */
.day-strip {
  display: flex;
  gap: 10px;
  padding: 8px 22px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  /* `flex: 0 0 auto` keeps the strip's natural height — otherwise the
     parent's flex column would shrink it (and squash the pill) when the
     adjacent view container's `overflow-y: auto` triggers reflow. */
  flex: 0 0 auto;
}

.day-chip {
  /* Explicit inline-flex layout so the dow/dom stack reliably sizes the
     pill — relying on the button's intrinsic block layout led to the pill
     being computed shorter than its content under some flex-column reflows
     (most visibly on the board view). */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 50px;
  min-height: 44px;
  padding: 6px 12px;
  text-align: center;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 500;
  line-height: 1.1;
  cursor: pointer;
}

.day-chip.is-today { color: var(--ink); }

.day-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

.day-chip__dow {
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 0.8;
  margin-bottom: 2px;
  line-height: 1;
}

.day-chip__dom {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

/* ---- view containers (board vs detail share the shell below the date strip) ---- */
.view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.view[hidden] { display: none; }

/* Board (brand directory): hero pinned, then the scrollable accordion, then
   a fixed footer at the bottom. Per the spec — top row → day strip → hero →
   scrollable directory → footer. */
.view-board {
  display: flex;
  flex-direction: column;
}

.view-detail {
  position: relative;
}

/* The detail view's swipe deck takes the available column; source footer sits
   below it (existing layout). */
.view-detail .swipe { flex: 1 1 auto; }

/* ---- brand-directory home: hero ----
   Selectors are scoped under `.view-board` to clear the `.hero` rule's
   single-class specificity (otherwise .hero's `border-bottom` wins and we
   end up with a double hairline above the first brand-group header). */
.view-board .board-hero {
  flex: 0 0 auto;
  padding: 8px 22px 18px;
  border-bottom: 0;
}

/* Inner `.hero` div (produced by the shared hero() builder) is a passthrough
   inside the brand-directory home: no padding, no border. The outer
   `.board-hero` owns both. */
.view-board .board-hero > .hero {
  padding: 0;
  border-bottom: 0;
}

/* The board hero's headline is the "Sporty" display, scoped here so the
   detail view's existing 48px hero stays unchanged. Size clamps off the
   viewport so the "N floors open right now." headline keeps to two lines
   on narrow phones (320-360 px) and still hits its 74px ceiling at the
   480px design width and above. */
.view-board .board-hero .hero-head {
  font-family: var(--display);
  font-size: clamp(40px, 14.5vw, 74px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

.view-board .board-hero .hero-sub {
  margin: 12px 0 0;
  max-width: 330px;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.view-board .board-hero .hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

/* ---- brand-directory home: scrollable list of brand groups ---- */
.brand-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.brand-list::after {
  /* Tiny breathing room below the last row before the footer's hairline. */
  content: "";
  display: block;
  height: 8px;
}

/* Brand group header: full-width button. Layout matches the spec exactly. */
.brand-head {
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 26px 1fr auto 18px 14px;
  align-items: center;
  column-gap: 11px;
  padding: 13px 22px;
  border-top: 1px solid var(--divider);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.brand-head.is-collapsed { background: var(--paper-2); }

.brand-head__swatch {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.brand-head__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  min-width: 0;
}

.brand-head__yours {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 5px;
}

.brand-head__meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.brand-head__star {
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: var(--idle-glyph);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  background: transparent;
  border: 0;
}

.brand-head__star.is-yours { color: var(--accent); }

.brand-head__chev {
  color: var(--idle-glyph);
  font-size: 12px;
  text-align: center;
  transform: rotate(0);
  transition: transform 0.15s ease;
}

.brand-head:not(.is-collapsed) .brand-head__chev { transform: rotate(90deg); }

/* Gym row inside an expanded group. */
.gym-row {
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  column-gap: 13px;
  padding: 15px 22px;
  border-top: 1px solid var(--hairline-row);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.gym-row.is-dim { opacity: 0.55; }
.gym-row.is-soon { cursor: default; }

.gym-row__swatch {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gym-row.is-open .gym-row__swatch { background: var(--accent); }

.gym-row__name {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
  min-width: 0;
}

.gym-row__short {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.gym-row__status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
}

.gym-row__status.is-live { color: var(--accent); }

.gym-row__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--accent);
  flex: 0 0 auto;
}

.gym-row__metric {
  text-align: right;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.gym-row__metric-num {
  display: block;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.gym-row__metric-num.is-muted { color: var(--muted-2); }

.gym-row__metric-label {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

/* ---- brand-directory home: footer ---- */
.board-footer {
  flex: 0 0 auto;
  padding: 12px 22px 18px;
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.board-footer__pinned { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-footer__hint { white-space: nowrap; }

/* ---- swipe deck ---- */
.swipe {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.track {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.panel { min-height: 100%; }

/* ---- hero ---- */
.hero {
  padding: 8px 22px 18px;
  border-bottom: 1px solid var(--divider);
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.hero-head {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-wrap: balance;
}

/* Accent emphasis: color only, no italic. */
.accent {
  color: var(--accent);
  font-style: normal;
}

.hero-sub {
  margin: 12px 0 0;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.hero-sub strong { font-weight: 600; }

.hero-footer {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.hero-footer-num {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
}

.peek-btn {
  margin-top: 18px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 11px 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}

/* ---- list ---- */
.list { padding: 14px 22px 26px; }

.section-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0 10px;
}

.section-title--spaced { margin-top: 22px; }

.window-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--divider);
}

.window-time {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.window-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.window-dur {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

.class-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  font-size: 13px;
  color: var(--muted-2);
}

.class-row.is-live { color: var(--ink); }

.class-row-time {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.live-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  vertical-align: middle;
}

.empty {
  font-family: var(--display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  color: var(--muted);
  padding: 40px 0;
}

/* ---- source footer ---- */
.source {
  padding: 10px 22px 18px;
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.source-link {
  color: var(--accent);
  text-decoration: none;
}

/* ---- bottom-sheet gym picker ---- */
.sheet-scrim {
  position: absolute;
  inset: 0;
  z-index: 90;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.sheet-scrim.is-open { opacity: 1; }
.sheet-scrim[hidden] { display: none !important; }

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--paper);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
  max-height: 78%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sheet.is-open { transform: translateY(0); }
.sheet[hidden] { display: none !important; }

.sheet-handle {
  width: 38px;
  height: 4px;
  border-radius: 99px;
  background: var(--handle);
  margin: 10px auto 4px;
}

.sheet-head {
  padding: 4px 22px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--divider);
}

.sheet-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.sheet-close {
  border: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
}

.sheet-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 18px;
}

.sheet-group-head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 22px 6px;
}

.sheet-item {
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 22px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  column-gap: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.sheet-item.is-active { background: var(--accent-tint); }
.sheet-item.is-disabled { cursor: default; opacity: 0.7; }

.sheet-swatch {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sheet-item.is-active .sheet-swatch { background: var(--accent); }

.sheet-name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.sheet-short {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.sheet-hood {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 2px;
}

.sheet-check {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.sheet-soon {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* When the picker is open, lock body scroll so swipe deck below can't
   intercept drags. */
body.has-sheet-open { overflow: hidden; }