/* ============================================================
 * Action Buddy PWA — styles transcribed from the Compose theme.
 * Light theme (matches the app's default / iOS look).
 * Color tokens copied LITERALLY from ui/theme/Color.kt.
 * ============================================================ */
:root{
  --bg:#F2F2F7;            /* background  (iOS systemGroupedBackground) */
  --surface:#FFFFFF;       /* cards, panels */
  --surface-variant:#E5E5EA;/* dividers, chips, secondary bg */
  --primary:#1B5E20;       /* money green */
  --accent:#218C21;        /* accent green (Home/detail highlights) */
  --on-surface:#000000;    /* primary text (black, never faded — Mike's rule) */
  --on-variant:#000000;    /* secondary text — black per theme */
  --gray:#6B6B6B;          /* explicit Color.Gray (flyer micro-labels) */
  --light-gray:#B8B8BD;    /* Color.LightGray (empty "—") */
  --divider:#E0E0E0;
  --blue:#1976D2;
  --orange:#FF8F00;
  --unverified-bg:#FFF3E0;
  --unverified-fg:#E65100;
  --nav-h:56px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--on-surface);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input{font-family:inherit;}

#view{
  max-width:560px;margin:0 auto;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
}
.hidden{display:none !important;}

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:#000;display:flex;
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:#9E9E9E;font-size:10px;font-weight:600;padding-top:4px;
}
.nav-item.active{color:#fff;}
.nav-item svg{width:22px;height:22px;}
.nav-ico{
  display:flex;align-items:center;justify-content:center;
  width:50px;height:26px;border-radius:13px;
}
.nav-item.active .nav-ico{background:var(--primary);}

/* ---------- Home header ---------- */
.home-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px 0;
}
.loc-btn{display:flex;align-items:center;gap:4px;color:var(--accent);font-size:13px;font-weight:600;max-width:110px;}
.loc-btn .loc-pin{flex:0 0 auto;}
.loc-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-title{font-size:22px;font-weight:700;color:var(--primary);}
.startover-btn{color:var(--accent);font-size:14px;font-weight:600;padding:0 4px;}

.build-stamp{text-align:center;font-size:11px;font-weight:500;color:var(--gray);padding:2px 16px 0;}

/* ---------- Stats bar ---------- */
.stats-bar{
  display:flex;align-items:center;justify-content:space-around;
  background:var(--surface);border-radius:12px;margin:6px 16px 0;padding:10px 0;
}
.stat-cell{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;}
.stat-val{font-size:22px;font-weight:900;color:var(--accent);line-height:1;}
.stat-label{font-size:11px;color:var(--gray);}
.stat-divider{width:1px;height:30px;background:var(--surface-variant);}

/* ---------- Filter chips ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 4px;}
.chip{
  position:relative;display:inline-flex;align-items:center;gap:2px;
  background:var(--surface-variant);color:var(--on-surface);
  border-radius:999px;padding:5px 6px 5px 10px;font-size:12px;font-weight:600;
  user-select:none;
}
.chip.active{background:var(--primary);color:#fff;}
.chip-caret{width:14px;height:14px;}
/* Dedicated Fargo bar — full-width row of buttons (mirrors FargoBar.kt) */
.fargo-bar{display:flex;align-items:center;gap:4px;padding:0 16px 4px;}
.fargo-bar-label{font-size:11px;font-weight:700;color:var(--on-surface);margin-right:2px;white-space:nowrap;}
.fargo-btn{flex:1;text-align:center;background:var(--surface-variant);color:var(--on-surface);
  border-radius:999px;padding:7px 2px;font-size:11px;font-weight:700;user-select:none;cursor:pointer;white-space:nowrap;}
.fargo-btn.active{background:var(--primary);color:#fff;}
/* "Tonight" keeps its natural width — flex:1 with the 3-char day buttons would clip it */
.fargo-btn.tonight{flex:0 0 auto;padding:7px 8px;}
.menu{
  position:absolute;top:calc(100% + 4px);left:0;z-index:30;
  background:var(--surface);color:var(--on-surface);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.22);
  max-height:360px;overflow:auto;min-width:160px;padding:4px 0;
}
/* color is set explicitly so the menu never inherits an active chip's white text */
.menu-item{display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:14px;font-weight:500;white-space:nowrap;color:var(--on-surface);}
.menu-item:active{background:var(--surface-variant);}
.menu-x{width:16px;height:16px;color:var(--primary);}

/* ---------- Tiles ---------- */
.tiles{display:flex;gap:8px;padding:4px 16px 0;}
.tile{
  position:relative;flex:1;height:110px;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,var(--primary),#000);
  display:flex;align-items:flex-end;
}
.tile-bg-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;color:rgba(255,255,255,.10);}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.6));}
.tile-label{position:relative;z-index:1;color:#fff;font-size:13px;font-weight:700;line-height:15px;padding:8px;text-align:left;}
/* FOUR-TILE MODE ONLY (class added by FOUR_TILE_LAYOUT in app.js). Scoped to
   `.tiles-4` on purpose: flipping the switch off removes the class and the labels
   snap back to 13px/15px with nothing to undo by hand. Size chosen by MEASUREMENT,
   not taste — "Tournaments" is 85px at 13px and a 4-across tile has 66.8px of usable
   width, so 13px cannot fit and the text was being sliced by .tile's overflow:hidden. */
.tiles-4 .tile{justify-content:center;}
.tiles-4 .tile-label{font-size:11px;line-height:13px;padding:8px 3px;text-align:center;}

/* ---------- Result list / cards ---------- */
.result-count{font-size:16px;font-weight:700;padding:12px 16px 4px;}
.result-list{padding:0 16px 12px;display:flex;flex-direction:column;gap:2px;}
.loading-note{padding:32px 8px;text-align:center;color:var(--gray);font-size:14px;}

.card{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:0.5px solid var(--surface-variant);
  border-radius:8px;padding:12px;
}
.card-ball{flex:0 0 auto;}
.card-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.card-name{font-size:14px;font-weight:700;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.card-venue{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card-sub{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto;}
.card-money{font-size:15px;font-weight:900;color:var(--primary);}
.card-money-label{font-size:10px;color:var(--gray);margin-top:-3px;}
.card-dist{background:var(--primary);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px;}
.badge{font-size:10px;font-weight:600;border-radius:999px;padding:2px 6px;}
.badge-recurring{background:rgba(25,118,210,.12);color:var(--blue);}
.badge-stakes{background:rgba(255,143,0,.15);color:var(--orange);}
.badge-unverified{background:var(--unverified-bg);color:var(--unverified-fg);border-radius:4px;}

/* ---------- Top app bar (pushed screens) ---------- */
.appbar{
  position:sticky;top:0;z-index:20;background:var(--surface);
  display:flex;align-items:center;gap:8px;padding:10px 8px;
  min-height:52px;border-bottom:0.5px solid var(--surface-variant);
}
.appbar-back{width:40px;height:40px;display:flex;align-items:center;justify-content:center;}
.appbar-back svg{width:24px;height:24px;}
.appbar-title{font-size:18px;font-weight:700;flex:1;}
/* Text action in the app bar (Browse's "Start Over"). Same accent green, size and
   weight as Home's .startover-btn so the two screens read identically. */
.appbar-text{color:var(--accent);font-size:14px;font-weight:600;padding:0 8px;white-space:nowrap;}
.appbar-action{width:40px;height:40px;display:flex;align-items:center;justify-content:center;}
.appbar-action svg{width:22px;height:22px;}

/* ---------- Browse ---------- */
.searchbar{
  display:flex;align-items:center;gap:8px;margin:8px 16px;
  background:var(--surface-variant);border-radius:10px;padding:10px 12px;
}
.searchbar svg{width:20px;height:20px;color:var(--gray);flex:0 0 auto;}
.searchbar input{flex:1;border:none;background:none;font-size:14px;color:var(--on-surface);outline:none;min-width:0;}
.searchbar .clear-x{width:20px;height:20px;}
.loc-row{display:flex;align-items:center;gap:4px;padding:0 16px;font-size:13px;color:var(--gray);}
.loc-row .pin{width:16px;height:16px;color:var(--primary);flex:0 0 auto;}
.loc-row .loc-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.loc-row .loc-action{color:var(--primary);font-size:13px;font-weight:600;padding:6px 4px;}
.count-row{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 2px;}
.count-row .count{font-size:11px;color:var(--gray);}
.count-row .sortind{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--gray);}
.count-row .sortind svg{width:14px;height:14px;}
.list-divider{height:0.5px;background:var(--surface-variant);margin:0;}

.mm-card{
  background:var(--surface);border:0.5px solid var(--surface-variant);
  border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:8px;
}
.mm-top{display:flex;justify-content:space-between;gap:12px;}
.mm-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.mm-name{font-size:16px;font-weight:700;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.mm-meta{font-size:14px;color:var(--gray);}
.mm-players{font-size:14px;font-weight:500;}
.mm-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto;}
.mm-prize{font-size:18px;font-weight:700;color:var(--primary);}
.mm-prize-label{font-size:10px;color:var(--gray);}
.mm-entry{font-size:12px;color:var(--gray);}
/* Reuses .card-dist (green bg, white text) so money-match and tournament cards carry
   the SAME distance pill — one style, not two. Nudged clear of the Entry line. */
.mm-right .card-dist{margin-top:5px;}

.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px;gap:16px;color:var(--gray);}
.empty svg{width:48px;height:48px;color:var(--gray);}
.empty .empty-msg{font-size:13px;}
.empty button{color:var(--primary);font-weight:600;font-size:14px;padding:8px;}

/* ---------- Tournament Detail (flyer) ---------- */
.detail-scroll{padding:0 0 24px;}
.flyer{background:#fff;border-radius:12px;margin:8px 12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08);}
.flyer-hero{height:70px;background:#0A450A;background-image:radial-gradient(circle,rgba(255,255,255,.18) 3px,transparent 3px);background-size:50px 50px;background-position:14px center;}
.flyer-pad{padding:12px 16px;}
.flyer-edition{text-align:center;font-size:9px;font-weight:600;letter-spacing:1.5px;color:var(--gray);text-transform:uppercase;}
.flyer-name{text-align:center;font-size:18px;font-weight:900;color:#000;line-height:1.15;margin-top:2px;}
.flyer-rule{height:1px;background:var(--divider);margin:12px 0;}
.flyer-dv{display:flex;justify-content:space-between;gap:12px;}
.fdt{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--accent);}
.fdt .muted{color:var(--light-gray);}
.fvenue{text-align:right;display:flex;flex-direction:column;gap:1px;}
.fvenue .vn{font-size:12px;font-weight:600;color:#000;}
.fvenue .va{font-size:10px;color:var(--gray);}
.flyer-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;}
.fcell{background:#F5F5F5;border-radius:6px;padding:7px 4px;text-align:center;}
.fcell .lbl{font-size:8px;font-weight:600;letter-spacing:.8px;color:var(--gray);}
.fcell .val{font-size:13px;font-weight:700;color:#000;}
.fmoney{border:2px solid var(--accent);border-radius:10px;padding:10px;text-align:center;margin-top:12px;}
.fmoney .lbl{font-size:9px;font-weight:600;letter-spacing:1.2px;color:var(--accent);}
.fmoney .val{font-size:28px;font-weight:900;color:#000;}
.fmoney .val.muted{color:var(--light-gray);}
.flyer-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:12px;font-weight:500;}
.flyer-row .on{color:#000;}.flyer-row .off{color:var(--light-gray);}
.flyer-foot{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:4px;}
.flyer-foot .ln{flex:1;height:1px;background:rgba(33,140,33,.3);}
.flyer-foot .bn{font-size:9px;font-weight:500;color:var(--gray);}

.detail-badges{display:flex;gap:8px;padding:8px 16px 0;}
.detail-badge{font-size:11px;font-weight:700;border-radius:6px;padding:3px 8px;}

.btn-row{display:flex;gap:10px;padding:0 24px;}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:13px;font-size:14px;font-weight:600;width:100%;}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-outline{border:1px solid var(--surface-variant);color:var(--on-surface);background:var(--surface);}
.btn-sm{border-radius:10px;padding:11px;font-size:13px;}
.pad-top-16{padding-top:16px;}.pad-top-8{padding-top:8px;}

.detail-section{padding:16px;}
.detail-section .sec-head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:8px;}
.detail-section .sec-head svg{width:16px;height:16px;color:var(--gray);}
.detail-row{display:flex;align-items:flex-start;gap:6px;font-size:13px;margin-bottom:6px;}
.detail-row svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--gray);}
.detail-row .rsub{font-size:11px;color:var(--gray);}
.section-divider{height:0.5px;background:var(--surface-variant);}
.conflict-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;}
.conflict-row .cl{flex:1;min-width:0;}
.conflict-row .cn{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.conflict-row .cloc{font-size:11px;color:var(--gray);}
.conflict-row .cm{font-size:13px;font-weight:700;color:var(--primary);}
.conflict-row svg{width:14px;height:14px;color:var(--gray);}

/* ---------- Money Match Detail ---------- */
.mm-hero{height:180px;background:linear-gradient(135deg,var(--primary),#000);display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff;}
.mm-hero .mh-name{font-size:20px;font-weight:700;}
.mm-vs{display:flex;align-items:center;justify-content:space-around;padding:16px;gap:8px;}
.mm-player{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;text-align:center;}
.mm-player svg{width:40px;height:40px;color:var(--gray);}
.mm-player .pn{font-size:16px;font-weight:700;}
.mm-vs .vs{font-size:20px;font-weight:900;color:var(--primary);}
.mm-stats{display:flex;justify-content:space-evenly;background:var(--surface-variant);border-radius:12px;margin:0 16px;padding:16px;}
.mm-stat{display:flex;flex-direction:column;align-items:center;gap:2px;}
.mm-stat .lbl{font-size:10px;color:var(--gray);}
.mm-stat .val{font-size:18px;font-weight:700;}
.mm-stat .val.prize{font-size:20px;color:var(--primary);}

/* ---------- Top Added Money / Leagues chips ---------- */
.chip-row{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}
.pill{flex:0 0 auto;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:500;background:var(--surface-variant);color:var(--on-surface);white-space:nowrap;}
.pill.sel{background:#000;color:#fff;font-weight:600;}
.pill.sel-green{background:var(--primary);color:#fff;font-weight:600;}

/* ---------- Leagues ---------- */
.league-head{font-size:20px;font-weight:700;padding:16px;}
.state-card{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:12px;margin:6px 16px;padding:16px;}
.state-card .sc-mid{flex:1;}
.state-card .sc-name{font-size:17px;font-weight:700;}
.state-card .sc-sub{font-size:13px;font-weight:600;color:var(--accent);}
.state-card .sc-sub.soon{color:var(--gray);}
.state-card svg{width:24px;height:24px;color:var(--gray);}
.div-count{font-size:13px;font-weight:600;padding:8px 16px 4px;}
.div-card{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:10px;margin:4px 16px;padding:12px;}
.div-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.div-league{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.div-name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.div-meta{font-size:12px;}
.div-venue{font-size:12px;font-weight:700;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.div-addr{font-size:11px;color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.div-right{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:0 0 auto;}
.div-day{font-size:13px;font-weight:700;color:var(--accent);}
.div-time{font-size:11px;font-weight:600;}
/* League division tap-through — scoped to .div-tappable, a class that only exists while
   LEAGUE_DIVISION_DETAIL is on, so flipping the switch removes this styling with it.
   Chevron values are the SAME ones .state-card svg already uses (24/24/var(--gray)) —
   deliberately NOT written as `.div-card svg`, which would also shrink the 36px ball. */
.div-card.div-tappable .div-chev{flex:0 0 auto;display:flex;align-items:center;}
.div-card.div-tappable .div-chev svg{width:24px;height:24px;color:var(--gray);}
/* Division-detail title — same size/weight as .state-card .sc-name. */
.ld-title{font-size:17px;font-weight:700;}

/* ---------- Placeholder (deferred screens) ---------- */
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 32px;gap:12px;min-height:60vh;}
.placeholder svg{width:56px;height:56px;color:var(--primary);}
.placeholder .ph-title{font-size:20px;font-weight:700;}
.placeholder .ph-msg{font-size:14px;color:var(--gray);max-width:300px;line-height:1.4;}

/* ---------- Change Location dialog ---------- */
.dialog-scrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:24px;}
.dialog{background:var(--surface);border-radius:16px;padding:20px;width:100%;max-width:360px;}
.dialog-title{font-size:18px;font-weight:700;margin-bottom:14px;}
.dialog-primary{width:100%;background:var(--primary);color:#fff;border-radius:10px;padding:12px;font-size:15px;font-weight:600;}
.dialog-or{text-align:center;font-size:12px;color:var(--gray);margin:12px 0;}
.dialog-input{width:100%;border:1px solid var(--surface-variant);border-radius:10px;padding:12px;font-size:15px;outline:none;}
.dialog-input:focus{border-color:var(--primary);}
.dialog-msg{font-size:12px;color:var(--unverified-fg);min-height:16px;margin-top:8px;}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;}
.dialog-cancel{padding:10px 14px;font-weight:600;color:var(--gray);}
.dialog-search{padding:10px 18px;font-weight:700;color:var(--primary);}

/* ---------- "Where are you?" prompt (no location yet) ---------- */
/* Sits directly under the stats bar so it is above the fold on a phone — below
   the tiles it would land off-screen, which is where the results already are. */
.loc-prompt{margin:10px 16px 2px;padding:14px;background:var(--surface);
  border:1px solid var(--surface-variant);border-radius:12px;}
.lp-title{font-size:16px;font-weight:700;color:var(--on-surface);}
.lp-sub{font-size:12px;font-weight:500;color:var(--on-surface);margin-top:4px;}
.lp-actions{display:flex;gap:8px;margin-top:12px;}
/* Normal browsers: GPS is the green primary, ZIP the grey secondary. */
.lp-gps,.lp-zip{flex:1;border-radius:10px;padding:11px;font-size:14px;font-weight:700;
  background:var(--surface-variant);color:var(--on-surface);}
.lp-actions .lp-gps{background:var(--primary);color:#fff;}
/* In-app browsers get ZIP only — "Use my location" can never succeed there, so it
   isn't rendered at all. Without this the lone button would inherit the grey
   secondary style. */
.lp-actions.zip-only .lp-zip{background:var(--primary);color:#fff;}
.lp-gps[disabled]{opacity:.75;}
.lp-msg{font-size:12px;font-weight:600;color:var(--unverified-fg);margin-top:8px;}
.lp-msg:empty{display:none;}
/* Folded by default so 47 chips aren't the first thing on screen — and NOTHING forces
   it open any more (removed 2026-07-30: Mike on the reel experience, "it loads up 47
   chips states... people will just throw it away"). It opens only when tapped. */
.lp-states{margin-top:12px;}
.lp-states>summary{font-size:13px;font-weight:700;color:var(--on-surface);
  cursor:pointer;padding:6px 0;list-style:none;}
.lp-states>summary::-webkit-details-marker{display:none;}
.lp-states>summary::after{content:" ▾";}
.lp-states[open]>summary::after{content:" ▴";}
/* Wraps — never scrolls sideways (Mike's rule). 47 codes ≈ 6 rows on a phone. */
.ls-grid{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px;}
.ls-chip{display:inline-flex;align-items:center;background:var(--surface-variant);
  color:var(--on-surface);border-radius:999px;padding:8px 11px;font-size:13px;font-weight:700;
  cursor:pointer;user-select:none;}
.ls-chip:active{background:var(--primary);color:#fff;}
/* The IP guess showing its work: ONE slim line where a ~200px form used to be, with
   the correction one tap away. Text is pure black in light mode (Mike's rule), and the
   "Not right?" button is green with white text like every other primary action. */
.ip-note{margin:8px 16px 2px;font-size:13px;font-weight:600;color:var(--on-surface);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ip-change{background:var(--primary);color:#fff;border-radius:999px;padding:5px 11px;
  font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;}

/* ---------- Bottom sheet ---------- */
.sheet-scrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;}
.sheet{background:var(--surface);border-radius:20px 20px 0 0;padding:20px 24px calc(24px + env(safe-area-inset-bottom));width:100%;max-width:560px;}
.sheet .sh-title{font-size:18px;font-weight:700;}
.sheet .sh-desc{font-size:13px;color:var(--gray);margin:8px 0 16px;}
.sheet textarea{width:100%;border:1px solid var(--surface-variant);border-radius:10px;padding:12px;font-size:14px;min-height:90px;resize:vertical;outline:none;font-family:inherit;}
.sheet .sh-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
.sheet .sh-cancel{padding:10px 14px;font-weight:600;color:var(--gray);}
.sheet .sh-submit{padding:10px 18px;font-weight:700;color:#fff;background:var(--primary);border-radius:8px;}
.sheet .sh-ok{display:flex;align-items:center;gap:8px;color:#4CAF50;font-weight:600;margin-top:12px;}
.sheet .sh-ok svg{width:20px;height:20px;}

/* Promoter flyer on the 2-Man detail (data-flyer) + tap-to-zoom lightbox */
.flyer-thumb{display:block;width:100%;border:none;background:none;padding:8px 0 0;cursor:pointer;text-align:center;}
.flyer-thumb img{width:100%;max-width:300px;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.28);}
.flyer-hint{display:block;font-size:12px;color:var(--gray);margin-top:8px;}
.flyer-lightbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:16px;}
.flyer-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;}
.flyer-lightbox .fl-close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.5);border:none;border-radius:50%;width:40px;height:40px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.flyer-lightbox .fl-close svg{width:24px;height:24px;}

/* ============================================================
 * Submit — flyer builder (Submit tab)
 * ============================================================ */
.sf-intro{padding:0 16px 12px;font-size:13px;color:var(--gray);line-height:1.45;}
.sf-intro b{color:var(--primary);}
.sf-errors{margin:0 16px 12px;padding:10px 12px;border-radius:10px;background:var(--unverified-bg);color:var(--unverified-fg);font-size:13px;font-weight:600;}
.sf-card{background:var(--surface);border-radius:14px;margin:0 12px 12px;padding:14px;}
.sf-card-t{font-size:15px;font-weight:700;color:var(--primary);margin-bottom:10px;}
.sf-f{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.sf-l{font-size:12px;font-weight:600;color:var(--gray);}
.sf-l b{color:var(--unverified-fg);}
.sf-i{width:100%;border:1px solid var(--surface-variant);border-radius:10px;padding:11px;font-size:16px;/* 16px: keeps iOS from zooming on focus */
  background:var(--surface);color:var(--on-surface);outline:none;font-family:inherit;}
.sf-i:focus{border-color:var(--primary);}
.sf-i.sf-bad{border-color:var(--unverified-fg);background:var(--unverified-bg);}
.sf-hint{font-size:11px;color:var(--gray);line-height:1.35;}
.sf-row{display:flex;gap:10px;}
.sf-row .sf-half{flex:1;min-width:0;}
.sf-check{display:flex;align-items:center;gap:9px;margin:2px 0 12px;font-size:14px;font-weight:600;}
.sf-check input{width:20px;height:20px;accent-color:var(--primary);}
.sf-btn{display:block;width:calc(100% - 24px);margin:0 12px 10px;padding:14px;border-radius:12px;font-size:15px;font-weight:700;
  text-align:center;background:var(--surface);color:var(--primary);border:1px solid var(--surface-variant);}
.sf-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.sf-ghost{background:transparent;border-color:transparent;color:var(--gray);font-weight:600;}
.sf-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 8px 8px;gap:10px;}
.sf-done svg{width:52px;height:52px;color:var(--primary);}
.sf-done-t{font-size:20px;font-weight:700;padding:0 24px;}
.sf-done-m{font-size:14px;color:var(--gray);line-height:1.45;max-width:320px;padding:0 16px 10px;}
.sf-done .sf-btn{width:min(340px, calc(100% - 24px));}
.sf-opt{font-size:12px;font-weight:600;color:var(--gray);}
.sf-sub{font-size:12px;color:var(--gray);line-height:1.4;margin:-4px 0 10px;}
.sf-split{border-left:3px solid var(--primary);padding-left:10px;margin:2px 0 4px;}
.sf-inline{font-size:13px;font-weight:700;color:var(--primary);padding:6px 0;margin:-4px 0 2px;}

/* ============================================================
 * Venue accounts (Profile) — see app.js "SCREEN: Profile"
 * Text stays pure black (Mike's rule); only micro-labels use --gray.
 * ============================================================ */
.sf-acct{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--gray);
  line-height:1.4;background:var(--bg);border-radius:10px;padding:9px 10px;margin:0 0 10px;}
.sf-acct .sf-inline{margin:0;padding:2px 0 0;align-self:flex-start;}
.sf-acct-on{flex-direction:row;align-items:center;gap:7px;color:var(--primary);font-weight:600;}
.sf-acct-on svg{width:16px;height:16px;flex:none;}

.auth-wrap{padding:8px 16px 24px;display:flex;flex-direction:column;}
.auth-lead{font-size:20px;font-weight:700;margin:12px 0 6px;}
.auth-sub{font-size:14px;color:var(--on-surface);line-height:1.5;margin-bottom:20px;}
.auth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  border-radius:12px;padding:14px;font-size:15px;font-weight:600;margin-bottom:10px;
  border:1px solid var(--surface-variant);background:var(--surface);color:var(--on-surface);}
.auth-apple{background:#000;color:#fff;border-color:#000;}
.auth-free{font-size:13px;color:var(--gray);line-height:1.45;margin-top:8px;}
.auth-free b{color:var(--on-surface);}
.auth-inline{color:var(--primary);text-decoration:underline;cursor:pointer;}
.auth-legal{font-size:12px;color:var(--gray);text-decoration:underline;margin-top:18px;align-self:flex-start;}

.acct-who{display:flex;align-items:center;gap:12px;padding:8px 0 18px;}
.acct-who svg{width:40px;height:40px;color:var(--primary);flex:none;}
.acct-name{font-size:17px;font-weight:700;}
.acct-mail{font-size:13px;color:var(--gray);}
.acct-card{background:var(--surface);border-radius:14px;padding:14px;margin-bottom:12px;}
.acct-card-t{font-size:15px;font-weight:700;color:var(--primary);margin-bottom:10px;}
.acct-venue-n{font-size:15px;font-weight:600;}
.acct-venue-s{font-size:13px;color:var(--gray);line-height:1.45;}
.acct-empty{font-size:13px;color:var(--gray);line-height:1.45;}
.acct-flyers{display:flex;flex-direction:column;gap:12px;}
.acct-flyer{border-top:1px solid var(--divider);padding-top:12px;}
.acct-flyer:first-child{border-top:none;padding-top:0;}
.af-name{font-size:15px;font-weight:600;}
.af-sub{font-size:12px;color:var(--gray);margin-top:1px;}
/* Deliberately wraps instead of scrolling sideways — no sideways scrolling, ever. */
.af-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.af-btn{font-size:13px;font-weight:700;color:var(--primary);background:var(--bg);
  border-radius:8px;padding:7px 12px;text-decoration:none;display:inline-block;}
.af-del{color:var(--unverified-fg);}
.acct-danger{color:var(--unverified-fg);}

/* The sign-in-to-post benefits. Left-aligned inside the centred .sf-done column
   because a list of reasons is read line by line, not scanned like a heading. Text
   is the normal body colour, never faded — the faded look is for hints only. */
.pg-list{text-align:left;max-width:340px;width:calc(100% - 32px);margin:2px 0 6px;
  padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.pg-list li{font-size:14px;line-height:1.4;padding-left:22px;position:relative;}
.pg-list li::before{content:'';position:absolute;left:4px;top:6px;width:7px;height:7px;
  border-radius:50%;background:var(--primary);}
.mod-row .af-acts{margin-top:10px;}