/* ============================================================
   soundslikeaplan — Tokyo midnight pocketbook
   ------------------------------------------------------------
   Mobile-only design system. All measurements assume a phone
   held in one hand at night. Desktop renders the app inside a
   phone-shaped frame in the centre of the viewport.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Inks — warm dark base, not pure black */
  --ink-0:  #0B0907;     /* deepest */
  --ink-1:  #15110D;     /* page bg */
  --ink-2:  #1F1A14;     /* card */
  --ink-3:  #2A231B;     /* raised */
  --ink-4:  #383025;     /* hairline / divider */
  --ink-5:  #574A3A;     /* low-contrast text */

  /* Papers — cream highlights */
  --paper-0: #F4ECDB;
  --paper-1: #E9DFC6;
  --paper-2: #C8B991;

  /* Accents */
  --vermillion: #E04A2C;     /* torii red, primary accent */
  --vermillion-deep: #B33A1F;
  --matcha:    #7E9F5E;       /* open-now / activities */
  --matcha-deep: #5E7A45;
  --gold:      #C9A35E;       /* michelin, premium */
  --indigo:    #324C8B;       /* drinks */

  /* Semantics */
  --bg:        var(--ink-1);
  --bg-card:   var(--ink-2);
  --bg-raised: var(--ink-3);
  --border:    var(--ink-4);
  --text:      var(--paper-0);
  --text-dim:  var(--paper-2);
  --text-low:  var(--ink-5);

  /* Type */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Manrope', 'Helvetica Neue', sans-serif;
  --font-jp:      'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Spatial */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --tap: 44px;
  --shadow-soft: 0 12px 32px -16px rgba(0,0,0,.7);
  --shadow-pop:  0 18px 40px -12px rgba(0,0,0,.65);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

html {
  background: #050403;
  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  font-feature-settings: "ss01", "cv11";
  background:
    radial-gradient(120% 80% at 50% -10%, #2b1f15 0%, transparent 60%),
    radial-gradient(80% 50% at 50% 110%, #1a0d08 0%, transparent 55%),
    var(--bg);
  /* Subtle paper grain across the whole app */
  background-attachment: fixed;
}

/* Paper grain overlay (SVG noise, fixed) */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.92  0 0 0 0 0.84  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- App frame (phone-shaped on desktop) ---------- */
.app-frame {
  position: fixed; inset: 0;
  display: flex; align-items: stretch; justify-content: center;
}
.app-frame > .app {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
@media (min-width: 600px) {
  .app-frame::before {
    content: '';
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(135deg, rgba(228,205,160,.012) 0 2px, transparent 2px 7px);
    pointer-events: none;
  }
  .app-frame > .app {
    height: min(900px, 92vh);
    margin: auto;
    border-radius: 36px;
    border: 1px solid #2a1f15;
    box-shadow:
      0 0 0 8px #0a0705,
      0 0 0 9px #1d1611,
      0 40px 80px -20px rgba(0,0,0,.8);
  }
}

/* ---------- Typography helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 480;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  letter-spacing: -.01em;
  line-height: 1.02;
}
.display.italic { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1; }
.lede   { font-family: var(--font-body); font-weight: 500; color: var(--text-dim); letter-spacing: .01em; }
.meta   { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.num    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.jp     { font-family: var(--font-jp); font-weight: 500; }

/* ---------- Top bar ---------- */
.topbar {
  flex: 0 0 auto;
  padding: 14px 18px 8px;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
}
.topbar .iconbtn {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--paper-0);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.topbar .iconbtn:active { transform: scale(.92); background: var(--bg-raised); }
.topbar .title { text-align: center; }
.topbar .title .small { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.topbar .title .big   { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.15; }

/* ---------- Scroll surface ---------- */
.scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px 120px;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { display: none; }

/* ---------- Torii divider ---------- */
.torii {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 18px;
  color: var(--text-low);
}
.torii::before, .torii::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
.torii svg { width: 18px; height: 18px; opacity: .9; }

/* ---------- Hero (home) ---------- */
.hero {
  padding: 12px 4px 8px;
}
.hero .kicker {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-dim);
}
.hero .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vermillion); box-shadow: 0 0 12px var(--vermillion); }
.hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 460;
  font-size: 42px;
  line-height: .98;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  letter-spacing: -.02em;
}
.hero h1 em { font-style: italic; color: var(--paper-2); font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1; }
.hero .sub { margin-top: 12px; color: var(--text-dim); font-size: 14px; max-width: 22em; }

/* ---------- Big category tiles ---------- */
.tile-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
.tile {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  min-height: 130px;
  padding: 18px 20px 18px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(255,255,255,.02), rgba(0,0,0,0)) ,
    var(--bg-card);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.tile:active { transform: scale(.985); }
.tile .emoji {
  position: absolute;
  right: -8px; top: -10px;
  font-size: 96px;
  filter: saturate(1.1);
  opacity: .82;
  text-shadow: 0 10px 30px rgba(0,0,0,.6);
  pointer-events: none;
}
.tile .tile-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.tile .tile-name {
  margin-top: 6px;
  font-family: var(--font-display); font-weight: 460; font-size: 40px;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  letter-spacing: -.015em;
  line-height: 1;
}
.tile .tile-name em { font-style: italic; }
.tile .tile-foot { margin-top: 14px; font-size: 13px; color: var(--text-dim); }
.tile[data-cat="food"]       { border-color: rgba(224,74,44,.25); }
.tile[data-cat="food"]       .tile-name { color: var(--vermillion); }
.tile[data-cat="drinks"]     { border-color: rgba(50,76,139,.3); }
.tile[data-cat="drinks"]     .tile-name { color: #7E9BD8; }
.tile[data-cat="activities"] { border-color: rgba(126,159,94,.3); }
.tile[data-cat="activities"] .tile-name { color: var(--matcha); }

/* ---------- Subcategory chips ---------- */
.subgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.sub {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px;
  min-height: 64px;
  border-radius: var(--r-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.sub:active { transform: scale(.97); background: var(--bg-raised); }
.sub .emoji { font-size: 22px; }
.sub .label { font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 1.1; }
.sub .count { font-family: var(--font-mono); font-size: 10px; color: var(--text-low); margin-left: auto; }

/* ---------- Geo fallback (location denied) ---------- */
.geo-fallback { margin-top: 18px; }
.geo-fallback-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px;
}
.geo-pick {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  padding: 12px;
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .12s var(--ease), transform .12s var(--ease);
}
.geo-pick:active { transform: scale(.98); background: var(--bg-raised); }

/* ---------- Nearby strip (home screen "right now") ---------- */
.nearby-strip { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.nearby {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(0,0,0,0)), var(--bg-card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .15s var(--ease);
}
.nearby:active { transform: scale(.99); }
.nearby[data-cat="food"]       { box-shadow: inset 3px 0 0 var(--vermillion); }
.nearby[data-cat="drinks"]     { box-shadow: inset 3px 0 0 #7E9BD8; }
.nearby[data-cat="activities"] { box-shadow: inset 3px 0 0 var(--matcha); }
.nearby .nearby-cat {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-dim);
}
.nearby[data-cat="food"]       .nearby-cat { color: var(--vermillion); }
.nearby[data-cat="drinks"]     .nearby-cat { color: #7E9BD8; }
.nearby[data-cat="activities"] .nearby-cat { color: var(--matcha); }
.nearby .nearby-name {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  line-height: 1.1; letter-spacing: -.005em;
}
.nearby .nearby-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nearby .nearby-dist { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-left: auto; }

/* ---------- Status / chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--text-dim);
  white-space: nowrap;
}
.chip.green { color: #cde6b3; border-color: rgba(126,159,94,.45); background: rgba(126,159,94,.12); }
.chip.red   { color: #f6c4b5; border-color: rgba(224,74,44,.5);   background: rgba(224,74,44,.10); }
.chip.gold  { color: #f1d99a; border-color: rgba(201,163,94,.5);  background: rgba(201,163,94,.10); }
.chip .star { color: var(--gold); }

/* ---------- Venue cards (list) ---------- */
.venue-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.venue {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: transform .15s var(--ease);
  position: relative;
  overflow: hidden;
}
.venue:active { transform: scale(.99); }
.venue .thumb {
  width: 88px; height: 88px; border-radius: 10px;
  background: var(--ink-3) center/cover;
  border: 1px solid var(--border);
  position: relative;
}
.venue .thumb .placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 28px; color: var(--text-low);
}
.venue .body { min-width: 0; display: flex; flex-direction: column; }
.venue .name {
  font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.1;
  letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.venue .name em { font-style: italic; color: var(--paper-2); }
.venue .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.venue .meta-row { gap: 8px; margin-top: 4px; }
.venue .meta-row .dist,
.venue .meta-row .walk {
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--paper-2); letter-spacing: .02em;
}
.venue .meta-row .meta-sep { color: var(--text-low); }
.venue .chip-row { gap: 6px; }
.venue .desc { font-size: 13px; color: var(--text-dim); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Category accent rules on left edge */
.venue[data-cat="food"]       { box-shadow: inset 3px 0 0 var(--vermillion); }
.venue[data-cat="drinks"]     { box-shadow: inset 3px 0 0 #7E9BD8; }
.venue[data-cat="activities"] { box-shadow: inset 3px 0 0 var(--matcha); }

/* ---------- Venue detail ---------- */
.detail .image-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -18px 18px; padding-left: 18px; padding-right: 18px;
}
.detail .image-strip::-webkit-scrollbar { display: none; }
.detail .image-strip img {
  width: 78%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--r-md); flex-shrink: 0; scroll-snap-align: start;
  background: var(--ink-3); border: 1px solid var(--border);
}
.detail .image-strip .empty {
  width: 90%; aspect-ratio: 16/8; flex-shrink: 0; scroll-snap-align: start;
  border-radius: var(--r-md); border: 1px dashed var(--border); display: grid; place-items: center;
  color: var(--text-low); font-family: var(--font-display); font-style: italic; font-size: 22px;
}
.detail h2 { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
.detail h2 em { font-style: italic; color: var(--paper-2); }
.detail .name-jp { display: block; margin-top: 4px; color: var(--text-dim); font-family: var(--font-jp); font-size: 14px; }
.detail .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

/* Status strip — open/closed lives here so it owns its own real estate
   instead of competing with attribute chips. Lands directly under the name. */
.status-strip {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.status-strip.open    { background: linear-gradient(135deg, rgba(126,159,94,.16), rgba(126,159,94,.05)); border-color: rgba(126,159,94,.5); }
.status-strip.closed  { background: linear-gradient(135deg, rgba(224,74,44,.12), rgba(224,74,44,.04));  border-color: rgba(224,74,44,.45); }
.status-strip .status-now {
  font-family: var(--font-display); font-weight: 500; font-size: 19px;
  letter-spacing: -.005em;
}
.status-strip.open .status-now   { color: #c9e3a3; }
.status-strip.closed .status-now { color: #f6c4b5; }
.status-strip .status-today {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-dim);
  text-align: right; max-width: 60%;
}

/* Heads-up — the trip-saving alarm. Vermillion (not gold) because gold reads
   as prestige (Michelin, sources) and dilutes the warning meaning. */
.headsup {
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(224,74,44,.14), rgba(224,74,44,.04));
  border: 1px solid rgba(224,74,44,.45);
  border-left-width: 3px;
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 10px;
}
.headsup-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: #f6c4b5;
  display: flex; align-items: center; gap: 8px;
}
.headsup-glyph {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(224,74,44,.25);
  font-size: 10px; line-height: 1;
  color: #ffd9cb;
}
.headsup-body {
  font-family: var(--font-display); font-style: italic; font-size: 16px;
  line-height: 1.4; color: var(--paper-0);
}
.headsup-body strong { font-style: normal; font-weight: 600; color: #fff; }
.headsup-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 2px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--vermillion); color: #fff;
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(224,74,44,.65);
  transition: background .15s var(--ease), transform .12s var(--ease);
}
.headsup-cta:hover  { background: var(--vermillion-deep); }
.headsup-cta:active { transform: scale(.97); }
.detail .why { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.35;
  color: var(--paper-1); margin: 20px 0 0; padding-left: 14px; border-left: 2px solid var(--vermillion); }
.detail .desc { margin-top: 14px; color: var(--text-dim); }

.detail .grid-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.info-tile { padding: 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-card); }
.info-tile .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.info-tile .value { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-top: 4px; }
.info-tile.green .value { color: #b9d59a; }
.info-tile.red   .value { color: #efb39c; }
.info-tile.gold  .value { color: #e5c789; }
.info-tile .sub  { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.section-title { font-family: var(--font-display); font-weight: 500; font-size: 16px; margin: 26px 0 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.list-services { display: flex; flex-wrap: wrap; gap: 6px; }
.source { padding: 10px 12px; border-left: 2px solid var(--gold); background: rgba(201,163,94,.06); border-radius: 4px; margin-top: 8px; }
.source .src-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.source .src-quote { font-family: var(--font-display); font-style: italic; font-size: 14.5px; margin: 4px 0 6px; color: var(--paper-1); }
.source a { color: var(--text-dim); font-size: 12px; text-decoration: underline dotted; }

/* ---------- Primary CTA ---------- */
.cta-row { display: flex; gap: 10px; margin-top: 26px; }
.btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-display); font-size: 17px; font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: transform .12s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--vermillion); color: #fff; box-shadow: 0 10px 30px -12px rgba(224,74,44,.6); }
.btn-primary:hover { background: var(--vermillion-deep); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-card); }
.btn-ghost { background: transparent; color: var(--text-dim); }

/* ---------- Live banner (during a visit) ---------- */
.live-banner {
  margin: 14px 18px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(224,74,44,.18), rgba(224,74,44,.06));
  border: 1px solid rgba(224,74,44,.4);
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: 10px;
}
.live-banner .pulse {
  width: 10px; height: 10px; border-radius: 50%; background: var(--vermillion);
  box-shadow: 0 0 0 0 rgba(224,74,44,.7);
  animation: pulse 1.6s var(--ease) infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(224,74,44,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(224,74,44,0); }
  100% { box-shadow: 0 0 0 0    rgba(224,74,44,0); }
}
.live-banner .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--vermillion); }
.live-banner .where { font-family: var(--font-display); font-weight: 500; line-height: 1.1; margin-top: 2px; }
.live-banner .open { margin-left: auto; }

/* ---------- Bottom action dock (during a visit) ---------- */
.dock {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(180deg, rgba(11,9,7,0), rgba(11,9,7,.92) 30%);
  padding: 12px 14px max(16px, env(safe-area-inset-bottom));
  gap: 8px;
}
.dock button {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  min-height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer;
  transition: transform .12s var(--ease), background .12s var(--ease);
}
.dock button:active { transform: scale(.95); }
.dock button .ic { font-size: 18px; }
.dock button .lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
.dock button.primary { background: var(--vermillion); border-color: transparent; color: #fff; }
.dock button.primary .lbl { color: #fff; }

/* ---------- Timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: 0; margin-top: 12px; }
.tl-day { font-family: var(--font-display); font-style: italic; font-size: 22px; margin: 22px 0 8px;
  display: flex; align-items: baseline; gap: 10px; color: var(--paper-1); }
.tl-day .num { font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.tl-entry { position: relative; padding: 10px 0 10px 26px; }
.tl-entry::before { content: ''; position: absolute; left: 6px; top: 18px; bottom: -6px; width: 1px; background: var(--border); }
.tl-entry::after  { content: ''; position: absolute; left: 0; top: 14px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--vermillion); }
.tl-entry[data-type="kampai"]::after  { border-color: var(--gold); }
.tl-entry[data-type="leaving"]::after { border-color: var(--matcha); }
.tl-entry[data-type="note"]::after    { border-color: var(--paper-2); }
.tl-entry[data-type="voice"]::after   { border-color: var(--indigo); }
.tl-entry .when { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.tl-entry .who  { font-family: var(--font-mono); font-size: 10.5px; color: var(--paper-2); margin-left: 6px; }
.tl-entry .text { margin-top: 4px; color: var(--paper-0); }
.tl-entry .venue { margin-top: 2px; font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--paper-1); }
.tl-entry .media { margin-top: 8px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.tl-entry .media img { display: block; width: 100%; max-height: 380px; object-fit: cover; }

/* ---------- Tab bar (home) ---------- */
.tabbar {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  background: rgba(11,9,7,.85);
  backdrop-filter: blur(10px);
}
.tabbar button {
  background: transparent; border: 0; color: var(--text-low);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; cursor: pointer; min-height: var(--tap);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.tabbar button.active { color: var(--vermillion); }
.tabbar button .ic { font-size: 20px; }

/* ---------- Login ---------- */
.login {
  display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  height: 100%; padding: 32px 28px;
}
.login .brand { font-family: var(--font-display); font-style: italic; font-size: 56px; line-height: .95;
  letter-spacing: -.02em; }
.login .brand .ver { color: var(--vermillion); font-style: italic; }
.login .sub { color: var(--text-dim); margin-top: 14px; max-width: 22em; }
.login .form { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.login input {
  height: 52px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
}
.login input:focus { border-color: var(--vermillion); }
.login .err { color: #f6b39c; font-size: 13px; min-height: 18px; }
.login .footer-note { margin-top: auto; color: var(--text-low); font-size: 12px; text-align: center; font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Sheet (modal-ish overlays for note / kampai capture) ---------- */
.sheet-bg {
  position: absolute; inset: 0; background: rgba(5,4,3,.6); backdrop-filter: blur(6px);
  z-index: 50;
  animation: fade .2s var(--ease) both;
}
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--bg-card);
  border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 22px 22px max(22px, env(safe-area-inset-bottom));
  z-index: 51;
  animation: slideUp .25s var(--ease) both;
}
.sheet h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 0 0 12px; }
.sheet textarea {
  width: 100%; min-height: 100px; resize: vertical;
  background: var(--ink-3); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-md); padding: 12px; font: inherit;
}
.sheet textarea:focus { outline: none; border-color: var(--vermillion); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------- Capture overlay (selfie) ---------- */
.capture {
  position: absolute; inset: 0; z-index: 80;
  background: #000; display: flex; flex-direction: column;
}
.capture video, .capture .preview {
  flex: 1 1 auto; width: 100%; object-fit: cover; background: #000;
}
.capture .preview { display: grid; place-items: center; color: var(--text-low); }
.capture .topbar-cap {
  position: absolute; top: 0; left: 0; right: 0; padding: 16px;
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0));
  color: var(--paper-0);
}
.capture .controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 24px max(28px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 10px;
  background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0));
}
.capture .shutter {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--vermillion); margin: 0 auto;
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px rgba(224,74,44,.3);
  cursor: pointer;
}
.capture .shutter:active { transform: scale(.96); }
.capture .swap, .capture .close {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2);
  display: grid; place-items: center; cursor: pointer;
}
.capture .caption-input {
  position: absolute; left: 16px; right: 16px; bottom: 120px;
  height: 44px; padding: 0 14px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15); color: #fff;
  border-radius: var(--r-pill); font: inherit; outline: none;
  backdrop-filter: blur(8px);
}

/* ---------- Loader / empty states ---------- */
.empty-state { text-align: center; padding: 40px 14px; color: var(--text-low); }
.empty-state .em { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--paper-2); }
.empty-state .desc { margin-top: 6px; font-size: 13px; }

.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--vermillion); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Filter bar (above venue list) ---------- */
.filterbar {
  display: flex; gap: 8px; padding: 4px 0 12px;
  overflow-x: auto; scrollbar-width: none;
}
.filterbar::-webkit-scrollbar { display: none; }
.filterbar .f {
  flex-shrink: 0;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim);
  padding: 6px 12px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
}
.filterbar .f.on { background: var(--vermillion); color: #fff; border-color: transparent; }

/* ---------- Helpers ---------- */
.spacer-sm { height: 8px; }
.spacer    { height: 16px; }
.spacer-lg { height: 28px; }
.hidden    { display: none !important; }
.center    { text-align: center; }
.mt-12 { margin-top: 12px; } .mt-24 { margin-top: 24px; }
.row { display: flex; gap: 8px; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------- Confirm sheet (logout / arrive-from-far) ---------- */
.sheet .confirm-body {
  margin: 0 0 16px; color: var(--text-dim); font-size: 14px; line-height: 1.5;
}

/* ---------- Toast (transient, replaces alert) ---------- */
.toast {
  position: absolute; left: 16px; right: 16px; top: 70px;
  z-index: 90;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(31,26,20,.96);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px; line-height: 1.4;
  box-shadow: var(--shadow-pop);
  backdrop-filter: blur(8px);
  animation: toastIn .25s var(--ease) both;
}
.toast[data-kind="error"]   { border-color: rgba(224,74,44,.55); color: #f6c4b5; }
.toast[data-kind="success"] { border-color: rgba(126,159,94,.5);  color: #cde6b3; }
@keyframes toastIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Sign-out row (foot of trail) ---------- */
.signout-row { display: flex; justify-content: center; padding: 40px 0 8px; }
.signout {
  background: transparent; border: 1px solid var(--border); color: var(--text-low);
  padding: 10px 18px; border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: lowercase;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.signout:hover, .signout:active { color: var(--vermillion); border-color: rgba(224,74,44,.5); }

/* ---------- Filter bar grouping (toggle vs radius) ---------- */
/* Two control kinds, two distinct active treatments — paper for the gating
   toggle (open-now), vermillion for the radius selector. The eye reads
   "open now" as a separate level of decision from "within ___ minutes". */
.filterbar { align-items: center; }
.filterbar-sep {
  flex-shrink: 0; width: 1px; height: 18px;
  background: var(--border); margin: 0 2px;
}
.filterbar-label {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-low);
  padding: 0 4px;
}
.filterbar .f-toggle.on {
  background: var(--paper-0); color: var(--ink-0);
  border-color: transparent;
  box-shadow: 0 4px 14px -6px rgba(244,236,219,.4);
}
.filterbar .f-radio.on  { background: var(--vermillion); border-color: transparent; color: #fff; }

/* ---------- Empty list state — recovery actions ---------- */
.empty-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding: 0 8px; }
.empty-actions .btn { width: 100%; min-height: 44px; font-size: 15px; }

/* ---------- Dock — exit button (Leaving) ----------
   Resting state: a vermillion-tinted outline so the eye locates the
   lifecycle-changing action without being shouted at. Armed state: filled
   vermillion + pulse, same as before — the punch lands only on the
   second-tap commit, not on the resting glance. */
.dock button.exit {
  border-color: rgba(224,74,44,.45);
  background: linear-gradient(180deg, rgba(224,74,44,.06), rgba(0,0,0,0)), var(--bg-card);
}
.dock button.exit .ic  { color: #f6c4b5; }
.dock button.exit .lbl { color: #f6c4b5; }

.dock button.armed {
  background: var(--vermillion);
  border-color: transparent;
  color: #fff;
  animation: armedPulse 1.2s var(--ease) infinite;
}
.dock button.armed .ic,
.dock button.armed .lbl { color: #fff; }
@keyframes armedPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,74,44,.55); }
  50%      { box-shadow: 0 0 0 8px rgba(224,74,44,0); }
}

/* ---------- Map recenter FAB ---------- */
.map-host { position: relative; }
.map-recenter {
  position: absolute; right: 14px; bottom: 18px; z-index: 1000;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(31,26,20,.94);
  color: var(--vermillion);
  border: 1px solid rgba(224,74,44,.5);
  display: grid; place-items: center;
  font-size: 22px; font-weight: 600; cursor: pointer;
  box-shadow: 0 14px 32px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(224,74,44,.18);
  backdrop-filter: blur(8px);
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.map-recenter:active { transform: scale(.92); background: var(--bg-raised); }

/* ---------- Capture preview controls (one clear send) ---------- */
.capture .controls.controls-preview {
  grid-template-columns: 1fr 1.2fr;
  padding: 18px 18px max(28px, env(safe-area-inset-bottom));
  gap: 10px;
}
.capture .btn-cap {
  min-height: 56px; padding: 0 18px;
  border-radius: var(--r-md);
  font-family: var(--font-display); font-size: 17px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
}
.capture .btn-cap-secondary {
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2);
}
.capture .btn-cap-primary {
  background: var(--vermillion); color: #fff; border: 0;
  box-shadow: 0 10px 30px -12px rgba(224,74,44,.7);
}
.capture .btn-cap-primary:disabled { opacity: .6; cursor: default; }
.capture .controls > span { /* invisible grid slots so shutter stays centered */
  display: block;
}

/* ---------- Map screen ---------- */
.map-screen {
  display: flex; flex-direction: column;
  /* Fill the scroll surface edge-to-edge: cancel its 18px sides + 120px bottom pad */
  margin: 0 -18px -120px;
  height: calc(100dvh - 64px);   /* leave room for topbar */
  min-height: 420px;
}
.map-filterbar {
  flex: 0 0 auto;
  display: flex; gap: 8px; align-items: center;
  padding: 8px 14px 10px;
  background: linear-gradient(180deg, rgba(11,9,7,.92), rgba(11,9,7,.6));
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.map-filterbar::-webkit-scrollbar { display: none; }
.map-filterbar .f {
  flex-shrink: 0;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: var(--r-pill); padding: 8px 12px; font-size: 13px;
  font-family: var(--font-body); cursor: pointer;
}
.map-filterbar .f.on { background: var(--vermillion); color: #fff; border-color: transparent; }
.map-count {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
  letter-spacing: .08em;
}
.map-host {
  flex: 1 1 auto;
  min-height: 280px;
  background: #0b0907;
}
.map-host .leaflet-container {
  height: 100%; width: 100%;
  background: #0b0907;
  font-family: var(--font-body);
}
/* Tame Leaflet's default chrome to fit the dark theme */
.leaflet-control-zoom a {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.leaflet-control-zoom a:hover { background: var(--bg-raised) !important; }
.leaflet-control-attribution {
  background: rgba(11,9,7,.7) !important;
  color: var(--text-low) !important;
  font-size: 10px !important;
}

/* Venue marker (DivIcon) */
.slap-marker .pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(244,236,219,.88);
  box-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.slap-marker .m-star {
  position: absolute; transform: translate(10px, -10px);
  background: var(--gold); color: #1a1208;
  font-size: 9px; font-weight: 700;
  border-radius: var(--r-pill); padding: 1px 4px;
  border: 1px solid rgba(0,0,0,.4);
  white-space: nowrap;
}

/* "You are here" marker */
.slap-marker-user { position: relative; }
.slap-marker-user .dot {
  position: absolute; left: 4px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper-0);
  border: 2px solid var(--vermillion);
  box-shadow: 0 0 0 2px rgba(224,74,44,.35);
  z-index: 2;
}
.slap-marker-user .pulse {
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--vermillion); opacity: .35;
  animation: slap-pulse 1.8s ease-out infinite;
}
@keyframes slap-pulse {
  0%   { transform: scale(.6); opacity: .5; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Marker popup */
.leaflet-popup-content-wrapper {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
}
.leaflet-popup-tip { background: var(--bg-card); border: 1px solid var(--border); }
.leaflet-popup-content { margin: 10px 12px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-dim); }
.slap-pop .pop-name {
  font-family: var(--font-display); font-size: 17px; line-height: 1.15;
  margin-bottom: 4px;
}
.slap-pop .pop-sub {
  font-size: 11px; color: var(--text-dim); text-transform: lowercase;
  letter-spacing: .04em; margin-bottom: 6px;
}
.slap-pop .pop-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.slap-pop .pop-gold {
  color: var(--gold); font-family: var(--font-mono); font-size: 11px;
}
.slap-pop .pop-meta {
  color: var(--text-dim); font-family: var(--font-mono); font-size: 11px;
}
.slap-pop .pop-btn {
  width: 100%;
  background: var(--vermillion); color: #fff; border: 0;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  cursor: pointer; letter-spacing: .02em;
}
.slap-pop .pop-btn:hover { background: var(--vermillion-deep); }

/* ---------- Home: nearby block (promoted above tile grid) ----------
   The "right now near you" strip is now the first scrollable thing under the
   hero — so it gets a kicker that matches the home kicker's mono-caps voice
   rather than a torii divider (which is reserved for the boundary between
   the picks and the evergreen category tiles below). */
.nearby-block { margin-top: 22px; }
.nearby-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--vermillion);
}

/* ---------- Detail dock — sticky primary CTA ----------
   Mirrors the visit .dock (same chrome, same gradient fade) so the user's
   eye learns "the band at the bottom of the phone is where the next action
   lives." Only one bottom band is ever visible at a time:
     - visit + any screen → .dock
     - detail + no visit  → .detail-dock
     - else               → .tabbar
*/
.detail-dock {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 10px;
  padding: 12px 14px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(11,9,7,0), rgba(11,9,7,.95) 28%);
  backdrop-filter: blur(8px);
  z-index: 40;
}
.detail-dock .btn { min-height: 54px; }
.detail-dock .btn-primary {
  /* A bit louder than inline primary — this is the screen's reason for being. */
  box-shadow: 0 14px 36px -10px rgba(224,74,44,.7);
}
/* Make sure the scrollable detail content clears the dock. The .scroll
   already pads 120px at the bottom — comfortably above the ~80px dock. */