/* Web app — editorial shell around the app's own components.
   Chrome, type, forms and lists follow the homepage (paper, ink, Playfair /
   Newsreader / Archivo, hairlines). The deck card and the Clubs rows are the
   app's own (see /css/deck.css). Loaded after the page's inline styles, so
   every rule here restyles the existing markup. */

:root {
  --ink: #121212;
  --paper: #f4f2ed;
  --card: #ffffff;
  --muted-body: #46433e;
  --muted-label: #55524c;
  --hairline: rgba(18, 18, 18, 0.12);
  --display: "Playfair Display", Georgia, serif;
  --body: "Newsreader", Georgia, serif;
  --label: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* The inline styles read these; repoint them at the editorial palette. */
  --black: #121212;
  --gray200: #f4f2ed;
  --gray50: #ebe8e1;
  --shadow: none;
  --shadow-hover: none;
  --radius-card: 3px;
  --radius-btn: 999px;
}

body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 18px; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar-track { background: var(--paper); }
em { font-style: italic; }

/* ── Header ──────────────────────────────────────────────────────── */
.navbar {
  height: 68px; padding: 0 clamp(16px, 4vw, 48px);
  background: rgba(244, 242, 237, 0.88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}
.nav-brand { display: flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.nav-brand:hover { text-decoration: none; }
.nav-logo { width: auto; height: 19px; position: relative; top: 2px; cursor: pointer; }
.nav-links { gap: clamp(10px, 2vw, 26px); }
.nav-link {
  font-family: var(--label); font-stretch: 125%; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted-label); background: none; border-radius: 0; padding: 8px 2px; border-bottom: 1px solid transparent;
}
.nav-link:hover { background: none; color: var(--ink); }
.nav-link.active { background: none; color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.nav-user-name { font-family: var(--label); font-stretch: 125%; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.signin-chip, .nav-signout {
  font-family: var(--label) !important; font-stretch: 125%; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px !important; padding: 10px 18px !important;
}
.signin-chip { background: var(--ink) !important; color: var(--paper) !important; border: 0 !important; box-shadow: none !important; }
.nav-signout { border: 1px solid var(--ink) !important; color: var(--ink) !important; }
.identity-btn { border-radius: 999px; }
.identity-menu { border: 1px solid var(--ink); border-radius: 3px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.35); }

/* ── Views / page type ───────────────────────────────────────────── */
.view { max-width: 1320px; padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px) 96px; }
.app-kicker {
  font-family: var(--label); font-stretch: 125%; font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink); max-width: 300px; margin-bottom: 24px;
}
.app-h1, .browse-title, .create-title {
  font-family: var(--display) !important; font-weight: 500 !important; font-size: clamp(40px, 5.4vw, 76px) !important;
  line-height: 0.96 !important; letter-spacing: -0.04em !important; text-wrap: balance; margin-bottom: 28px;
}
.app-h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4vw, 52px); line-height: 1; letter-spacing: -0.035em; margin-bottom: 12px; }
.create-subtitle, .browse-header p { font-size: 20px; color: var(--muted-body); }
.browse-header { display: block; margin-bottom: 24px; }

/* ── Buttons, chips, mode switch ─────────────────────────────────── */
.btn {
  font-family: var(--label); font-stretch: 125%; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px; padding: 16px 24px; box-shadow: none !important; transform: none !important;
}
.btn-primary { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn-primary:hover { background: #2a2a2a; }
.btn-secondary, .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-secondary:hover, .btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-sm { padding: 12px 18px; font-size: 11px; }
.mode-switch { border: 1px solid var(--ink); border-radius: 999px; box-shadow: none; overflow: hidden; background: transparent; }
.mode-btn {
  font-family: var(--label); font-stretch: 125%; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.mode-btn.active { background: var(--ink); color: var(--paper); }
.filter-chip {
  font-family: var(--label); font-stretch: 125%; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--ink); border-radius: 999px; background: transparent; box-shadow: none;
}
.filter-chip.active { background: var(--ink); color: var(--paper); }
.search-bar .form-input { border-radius: 999px; }

/* ── Cards, forms ────────────────────────────────────────────────── */
.card { border: 1px solid var(--hairline); border-radius: 3px; box-shadow: none; background: var(--card); }
.form-label { font-family: var(--label); font-stretch: 125%; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.form-sublabel, .form-char-count { font-family: var(--body); color: var(--muted-label); }
.form-input, .form-textarea, .form-select {
  font-family: var(--body); font-size: 19px; border: 1px solid rgba(18,18,18,.35); border-radius: 3px; background: var(--card); box-shadow: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); outline: none; }
.image-upload-zone { border: 1px dashed rgba(18,18,18,.45); border-radius: 3px; background: var(--card); }
.upload-label { font-family: var(--label); font-stretch: 125%; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.add-question-btn { font-family: var(--label); font-stretch: 125%; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; border: 1px dashed var(--ink); border-radius: 999px; background: transparent; }
.create-container { max-width: 720px; }
.empty-state h3 { font-family: var(--display); font-weight: 500; font-size: 32px; letter-spacing: -0.03em; }
.empty-state p { font-size: 19px; color: var(--muted-body); }
.toast { font-family: var(--label); font-stretch: 125%; font-size: 12px; letter-spacing: .08em; border-radius: 999px; border: 1px solid var(--ink); box-shadow: none; }
.modal-card { border: 1px solid var(--ink); border-radius: 3px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.5); }
.modal-title { font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; }

/* ── Modes: Grid cards (editorial) + Map ─────────────────────────── */
.project-grid { gap: 24px; }
.project-card { border-radius: 3px; border: 1px solid var(--hairline); box-shadow: none; transition: transform .15s ease; }
.project-card:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -24px rgba(0,0,0,.35); }
.project-card-img, .project-card-img-placeholder { aspect-ratio: 4 / 3; height: auto; }
.project-card-title { font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.05; letter-spacing: -0.03em; }
.project-card-creator { font-family: var(--label); font-stretch: 125%; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.project-card-location { font-family: var(--label); font-stretch: 125%; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-label); }
.project-card-desc { font-size: 17px; color: var(--muted-body); line-height: 1.4; }
.ext-badge { font-family: var(--label); font-stretch: 125%; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; border-radius: 999px; }
#map-wrap #map, #map { border: 1px solid var(--ink) !important; border-radius: 3px !important; box-shadow: none !important; }
.map-status, .map-pill { font-family: var(--label); font-stretch: 125%; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; box-shadow: none; border: 1px solid var(--ink); }

/* ── Project detail ──────────────────────────────────────────────── */
.detail-back { font-family: var(--label); font-stretch: 125%; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; background: none; border: 0; }
.detail-title { font-family: var(--display) !important; font-weight: 500 !important; font-size: clamp(36px, 4.6vw, 64px) !important; line-height: 1 !important; letter-spacing: -0.04em !important; }
.detail-desc { font-size: 20px; line-height: 1.55; }
.detail-hero-img, .detail-hero-placeholder { border-radius: 3px; border: 0; }
.detail-meta-label, .detail-questions-title { font-family: var(--label); font-stretch: 125%; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }

/* ── Auth ────────────────────────────────────────────────────────── */
.auth-card, .onboarding-card { border: 1px solid var(--hairline); border-radius: 3px; box-shadow: 0 40px 80px -50px rgba(0,0,0,.4); }
.auth-title, .onboarding-title { font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; }

/* ── Deck tab ────────────────────────────────────────────────────── */
#view-deck { padding-top: 16px; }
.deck-screen { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.deck-screen .deck-label { margin-bottom: 4px; }
#app-deck { width: min(100%, 420px, calc((100svh - 300px) * 5 / 7)); min-width: 220px; }
#app-deck.is-loading::before {
  content: ""; position: absolute; inset: 0; border-radius: calc(2200cqw / 358); border: 1px dashed rgba(18,18,18,.35);
}
.deck-buttons { display: flex; align-items: center; gap: 20px; padding-top: 10px; }
.deck-empty { text-align: center; max-width: 420px; padding: 24px 0; }
.deck-empty p { font-size: 19px; color: var(--muted-body); margin-bottom: 20px; }

/* ── Clubs tab (the app's Admin / Member rows) ───────────────────── */
.clubs-row { margin-top: clamp(28px, 4vw, 48px); }
.clubs-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--ink); padding-top: 18px; margin-bottom: 18px; }
.clubs-row-title { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -0.035em; line-height: 1; }
.clubs-count { font-style: italic; color: var(--muted-label); }
.clubs-row-note { font-family: var(--label); font-stretch: 125%; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-label); }
.wheel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
.wheel::-webkit-scrollbar { height: 6px; }
/* A wheel card = the app's Clubs card: full-bleed cover, black scrim, white
   DM Serif title, black-and-white format tag; dashed = unfinished / not
   yours yet. */
.wheel-card {
  --u: calc(1px * 168 / 118); /* app card is 118pt wide; ours is 168px */
  position: relative; flex: 0 0 168px; aspect-ratio: 5 / 7; scroll-snap-align: start; cursor: pointer;
  border: 2px solid #000; border-radius: 14px; overflow: hidden; background: #000; color: #fff; padding: 0; text-align: left;
  box-shadow: 4px 4px 0 #000; font: inherit;
}
.wheel-card:hover { transform: translateY(-2px); }
.wheel-card.dashed { border-style: dashed; box-shadow: none; background-clip: padding-box; }
.wheel-card .wc-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wheel-card .wc-placeholder { position: absolute; inset: 0; background: #d0d0d0; display: flex; align-items: center; justify-content: center; }
.wheel-card .wc-placeholder img { width: 40px; opacity: .8; }
.wheel-card .wc-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 65%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35) 30%, rgba(0,0,0,.78) 70%, rgba(0,0,0,.92)); }
.wheel-card .wc-top { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: flex-start; }
.wheel-card .wc-tag { background: #000; color: #fff; border-radius: 4px; padding: 2px 6px; font-family: Courier, "Courier New", monospace; font-weight: 700; font-size: 10px; letter-spacing: 1px; }
.wheel-card .wc-unread { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #000; border: 1.5px solid #fff; font-family: var(--label); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.wheel-card .wc-title { position: absolute; left: 10px; right: 10px; bottom: 12px; font-family: "DM Serif Display App", "DM Serif Display", Georgia, serif; font-size: 21px; line-height: 1.06; letter-spacing: -0.2px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.wheel-card .wc-note { position: absolute; left: 10px; bottom: auto; top: 34px; font-family: var(--label); font-stretch: 125%; font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.wheel-card.end { background: var(--card); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.wheel-card.end .wc-plus { font-family: var(--display); font-size: 64px; line-height: .8; }
.wheel-card.end .wc-end-icon { width: 40px; height: auto; }
.wheel-card.end .wc-end-label { font-family: var(--label); font-stretch: 125%; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-align: center; }
.clubs-skeleton { display: flex; gap: 16px; margin-top: 40px; }
.clubs-skeleton div { flex: 0 0 168px; aspect-ratio: 5 / 7; border-radius: 14px; background: rgba(18,18,18,.06); }

/* ── Profile tab ─────────────────────────────────────────────────── */
#profile-content { max-width: 680px; margin: 0 auto; }
.pf-head { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 0 28px; }
.pf-avatar { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 2px solid #000; background: #d0d0d0; }
.pf-initial { display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 56px; color: #555; }
.pf-name { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4vw, 48px); letter-spacing: -0.035em; text-align: center; }
.pf-num { font-family: var(--label); font-stretch: 125%; font-size: 12px; letter-spacing: .1em; color: var(--muted-label); vertical-align: middle; }
.pf-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--hairline); border-radius: 3px; padding: 22px 24px; margin-bottom: 14px; color: var(--ink); font: inherit; }
.pf-box:not(.pf-link) { display: block; }
.pf-link { cursor: pointer; text-decoration: none; }
.pf-link:hover { border-color: var(--ink); text-decoration: none; }
.pf-box-label { font-family: var(--label); font-stretch: 125%; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 10px; }
.pf-about { font-size: 20px; line-height: 1.5; }
.pf-muted { color: var(--muted-label); font-style: italic; }
.pf-box-title { font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.pf-box-sub { font-size: 17px; color: var(--muted-body); margin-top: 2px; }
.pf-arrow { font-size: 24px; }
.pf-actions { display: flex; justify-content: center; padding-top: 18px; }
.profile-skeleton { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.profile-skeleton .ps-avatar { width: 132px; height: 132px; border-radius: 50%; background: rgba(18,18,18,.06); }
.profile-skeleton .ps-line { width: 40%; height: 34px; background: rgba(18,18,18,.06); }
.profile-skeleton .ps-block { width: 100%; height: 140px; background: rgba(18,18,18,.06); }

/* ── Phone tab bar (the app's floating pill) ─────────────────────── */
.tabbar { display: none; }
@media (max-width: 768px) {
  .navbar { height: 60px; }
  .nav-links { display: none !important; }
  .hamburger { display: none !important; }
  .nav-user { display: flex !important; }
  .nav-user-name, .identity-caret, .nav-signout { display: none !important; }
  .tabbar {
    display: flex; position: fixed; z-index: 120; left: 16px; right: 16px; bottom: calc(10px + env(safe-area-inset-bottom));
    height: 58px; align-items: center; justify-content: space-around; background: #fff;
    border: 2px solid #000; border-radius: 999px; box-shadow: 4px 4px 0 #000;
  }
  body.tabbar-hidden .tabbar { display: none; }
  .tabbar-btn { position: relative; width: 52px; height: 48px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
  .tabbar-btn img { width: 28px; height: 28px; object-fit: contain; }
  .tabbar-btn img.tb-deck { width: 34px; height: 34px; }
  .tabbar-btn.active::after { content: ""; position: absolute; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; background: #000; }
  .view { padding-bottom: 120px; }
  #view-deck { padding-top: 8px; }
  #app-deck { width: min(100%, 420px, calc((100svh - 60px - 30px - 70px - 96px) * 5 / 7)); }
  .deck-hint { display: none; }
  .round-btn { width: 48px; height: 48px; font-size: 16px; }
  .round-btn.primary { width: 58px; height: 58px; font-size: 20px; }
  .wheel-card { flex-basis: 140px; }
}
/* No tab bar while the header is hidden (sign-in / onboarding). */
.navbar[style*="display: none"] + .tabbar, .navbar[style*="display:none"] + .tabbar { display: none !important; }
/* The floating music button sits above the phone tab bar. */
@media (max-width: 768px) { .music-toggle { bottom: calc(84px + env(safe-area-inset-bottom)) !important; } }