/* ===== notes. app (after sign-in). px units: the phone column is capped at 430px. ===== */
/* ---- design tokens: the only place colours, spacing, radii, shadows, type and motion are defined ---- */
#app {
  /* colour. Text-on-cream variants (faint, nut-text, ok, byo) are darkened to pass WCAG AA at small sizes */
  --bg:#F6F0E7; --card:#FBF7F0; --sand:#F0E6D6; --sand-2:#E8DCC8; --line:#E3D8C7;
  --ink:#2E1F17; --ink-2:#43342A; --mute:#6B5848; --faint:#76675A; --hair:#B3A391;
  --accent:#8A4B22; --nut:#B9854F; --nut-text:#8C6236; --roast-tint:#F6E7D6;
  --ok:#3F6A3A; --ok-tint:#E3EEDD; --bad:#A8453A; --bad-tint:#F4DCD7; --crimson:#9E1B32; --crimson-tint:#F7E3E5; --byo:#80529C;
  --glass:rgba(251,247,240,.74); --glass-line:rgba(227,216,199,.7); --scrim:rgba(46,31,23,.45);
  /* spacing: a 4-pt scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
  /* radii */
  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-full:999px;
  /* elevation */
  --e1:0 1px 2px rgba(46,31,23,.05), 0 2px 8px rgba(46,31,23,.05);
  --e2:0 6px 18px rgba(46,31,23,.08);
  --e3:0 14px 36px rgba(46,31,23,.16);
  /* type scale (px: the phone column is capped at 430px) */
  --t-xl:40px; --t-l:32px; --t-m:26px; --t-title:20px; --t-body:15px; --t-cap:13px; --t-label:12px;
  --track-display:-.025em; --track-label:.08em;
  /* motion: one curve, three durations (collapsed to ~0 under prefers-reduced-motion) */
  --ease:cubic-bezier(.2,.8,.2,1); --d1:120ms; --d2:220ms; --d3:360ms;
  /* Filters sentence: token tints per category (flavour tokens use their family's colour) */
  --tk-style:#A9672F; --tk-near:#5B4A40; --tk-green:#6F8A5E; --tk-good:#C39A63; --tk-avoid:#8C7B6B;
  --tap:44px;
}
#app {
  position:absolute; inset:0; z-index:30; background:var(--bg); color:var(--ink); font:400 var(--t-body)/1.45 var(--body); display:none; flex-direction:column; opacity:0; transition:opacity var(--d3) var(--ease); -webkit-font-smoothing:antialiased; }
#app.show { display:flex; } #app.on { opacity:1; }
#app *, #app *::before, #app *::after { box-sizing:border-box; }
#app button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
/* focus: a 2 px roast ring, offset 2 px, on everything you can reach by keyboard */
#app :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); }
#app a { color:inherit; }
#app h1,#app h2,#app h3 { font-family:var(--display); font-weight:500; margin:0; letter-spacing:-.01em; text-wrap:balance; }
#app .views { position:relative; flex:1; min-height:0; }
#app .view { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; padding-bottom:96px; display:none; }
#app .view::-webkit-scrollbar { display:none; }
#app .view.on { display:block; animation:vin var(--d2) var(--ease); }
@keyframes vin { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
#app .pad { padding:0 var(--s5); }
.ic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
/* type scale */
#app .t-xl { font:600 var(--t-xl)/1.04 var(--display); letter-spacing:var(--track-display); }
#app .t-l { font:600 var(--t-l)/1.08 var(--display); letter-spacing:var(--track-display); }
#app .t-m { font:600 var(--t-m)/1.12 var(--display); letter-spacing:-.015em; }
#app .label, #app .eyebrow { font:500 var(--t-label)/1.3 var(--body); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--nut-text); }
/* glass: floating controls only (search, location pill, tab bar, sheets), never content */
#app .gls { background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border:1px solid var(--glass-line); }
/* press feedback on anything tappable that looks like a card or button */
#app .card, #app .crow-b, #app .abtn, #app .dbtn, #app .tile, #app .qc, #app .sv-card { transition:transform var(--d1) var(--ease), box-shadow var(--d1) var(--ease); }
#app .crow-b:active, #app .abtn:active, #app .dbtn:active, #app .tile:active, #app .qc:active, #app .sv-card:active { transform:scale(.97); }
#app .card:has(.card-b:active) { transform:scale(.97); box-shadow:var(--e3); }

/* tab bar */
#app .tabs { position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border-top:1px solid var(--glass-line); padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px)); }
#app .tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:var(--tap); font-size:11.5px; color:var(--faint); }
#app .tab.on { color:var(--ink); } #app .tab.on .ic { stroke-width:2; }

/* home header: wordmark and location, glass search with the filter button, flavour chips. No title, no bean. */
#app .atop { padding:calc(var(--s3) + env(safe-area-inset-top,0px)) var(--s5) var(--s2); background:linear-gradient(180deg, #F2E7D6 0%, var(--bg) 100%); }
#app .hbar { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4); }
#app .wm { font:600 30px/1 var(--display); letter-spacing:-.03em; color:var(--ink); }
#app .wm i { font-style:normal; color:var(--nut); }
#app .locpill { display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); max-width:62%; padding:0 var(--s3) 0 var(--s3); border-radius:var(--r-full); font-size:14.5px; color:var(--mute); }
#app .locpill b { color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app .locpill .ic { width:17px; height:17px; } #app .locpill .ic:last-child { width:15px; height:15px; color:var(--faint); }
#app .search { display:flex; align-items:center; gap:var(--s3); height:52px; padding:0 6px 0 var(--s4); border-radius:var(--r-md); color:var(--faint); font-size:16px; box-shadow:var(--e2); }
#app .search input { flex:1; min-width:0; height:100%; border:0; background:none; font:inherit; color:var(--ink); outline:none; }
#app .search input::placeholder { color:var(--faint); }
#app .sfb { position:relative; flex:none; display:grid; place-items:center; width:var(--tap); height:var(--tap); border-radius:var(--r-sm); color:var(--ink); }
#app .sfb .n, #app .qc .n { position:absolute; right:3px; top:3px; background:var(--accent); color:#fff; font-size:11px; min-width:17px; height:17px; border-radius:var(--r-full); display:grid; place-items:center; padding:0 4px; }
#app .chiprow { display:flex; gap:var(--s2); overflow-x:auto; padding:var(--s3) var(--s5) var(--s1); margin:0 calc(-1 * var(--s5)); scrollbar-width:none; }
#app .chiprow::-webkit-scrollbar { display:none; }
#app .qc { position:relative; flex:none; display:inline-flex; align-items:center; gap:var(--s2); height:40px; padding:0 var(--s4); border:1px solid var(--line); border-radius:var(--r-full); background:var(--card); font-size:14.5px; white-space:nowrap; }
#app .qc[aria-pressed="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
#app .qc .d { width:9px; height:9px; border-radius:50%; }
#app .meta { display:flex; justify-content:space-between; align-items:center; font-size:var(--t-cap); color:var(--mute); padding:var(--s4) var(--s5) var(--s2); }
#app .meta button { color:var(--accent); text-decoration:underline; text-underline-offset:3px; min-height:var(--tap); }
#app .sec-h { display:flex; justify-content:space-between; align-items:baseline; padding:0 var(--s5); margin-bottom:var(--s3); }
#app .sec-h h2 { font-size:var(--t-m); font-weight:600; letter-spacing:-.015em; }

/* Best match for you: large photo cards in a scroll-snap row */
#app .best { margin:var(--s3) 0 var(--s2); }
#app .best-row { display:flex; gap:var(--s3); overflow-x:auto; scroll-snap-type:x mandatory; padding:0 var(--s5) var(--s3); scroll-padding:0 var(--s5); scrollbar-width:none; overscroll-behavior-x:contain; }
#app .best-row::-webkit-scrollbar { display:none; }
#app .card { position:relative; flex:none; width:78%; max-width:300px; scroll-snap-align:start; text-align:left; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e1); }
#app .ph { position:relative; display:block; overflow:hidden; background:linear-gradient(135deg,var(--sand-2),#D5C2A8); }
#app .ph-card { aspect-ratio:4/3; }
#app .ph img { width:100%; height:100%; object-fit:cover; display:block; position:relative; }
#app .ph .cr { position:absolute; left:10px; bottom:8px; font-size:10.5px; color:#fff; background:rgba(46,31,23,.55); padding:2px 7px; border-radius:6px; }
#app .mtch { position:absolute; left:var(--s3); top:var(--s3); z-index:2; font-size:12.5px; font-weight:500; color:var(--ink); background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-radius:var(--r-full); padding:5px 11px; }
#app .hrt { display:grid !important; place-items:center; width:var(--tap); height:var(--tap); border-radius:50%; color:var(--ink); }
#app .hrt.gls { position:absolute; right:var(--s2); top:var(--s2); z-index:2; }
#app .hrt .ic { width:19px; height:19px; } #app .hrt[aria-pressed="true"] .ic { fill:var(--bad); stroke:var(--bad); }
#app .cb { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:7px; }
#app .cn { font:500 19px/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app .asub { font-size:var(--t-cap); color:var(--mute); display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
#app .asub .sp { color:var(--hair); } #app .asub .open { color:var(--ok); }
#app .notes { display:flex; flex-wrap:wrap; gap:6px; }
#app .nt { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:var(--r-full); background:var(--sand); font-size:var(--t-cap); }
#app .nt .d { width:8px; height:8px; border-radius:50%; flex:none; }
#app .nt.match { box-shadow:inset 0 0 0 1.5px var(--accent); background:var(--roast-tint); }
/* inferred flavours (from reviews) look different from stated ones */
#app .nt.inf { background:none; outline:1px dashed var(--hair); outline-offset:-1px; color:var(--mute); }
#app .saidl { font-size:13.5px; line-height:1.4; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#app .cap { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--mute); min-width:0; }
#app .cap > span:last-child:not(.bdg) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* badges: verified / reported / from reviews */
#app .bdg { flex:none; display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:500; border-radius:var(--r-full); padding:2px 8px; }
#app .bdg .ic { width:12px; height:12px; stroke-width:2; }
#app .bdg.v { background:var(--ok-tint); color:var(--ok); } #app .bdg.r { background:var(--roast-tint); color:var(--accent); }
#app .bdg.m { background:none; color:var(--mute); outline:1px dashed var(--hair); outline-offset:-1px; } #app .bdg.n { background:var(--sand); color:var(--mute); }

/* list rows */
#app .list { display:flex; flex-direction:column; padding:0 var(--s5); }
#app .crow { position:relative; display:flex; align-items:flex-start; border-bottom:1px solid var(--line); }
#app .crow:last-of-type { border-bottom:0; }
#app .crow-b { flex:1; min-width:0; display:flex; gap:var(--s3); text-align:left; padding:var(--s3) 0; border-radius:var(--r-md); }
#app .ph-row { flex:none; width:88px; height:88px; border-radius:var(--r-md); }
#app .ph-row .phx .rmark.big { width:40px; height:40px; } #app .ph-row .phn { font-size:13px; padding:0 8px; }
#app .crow-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; padding-right:var(--s10); }
#app .crow-h { display:flex; align-items:baseline; gap:var(--s2); min-width:0; }
#app .crow .hrt.plain { position:absolute; right:-10px; top:var(--s2); color:var(--faint); }
#app .crow .notes .nt { height:24px; padding:0 9px; font-size:12px; }
#app .mpct { flex:none; font-size:12px; font-weight:500; color:var(--accent); }
#app .unk { margin-top:var(--s4); padding-top:var(--s5); border-top:1px solid var(--line); }
#app .unk h2 { font-size:var(--t-title); margin-bottom:4px; } #app .unk .hint { margin-bottom:var(--s2); }
/* stagger in (40 ms apart, first six only) */
#app .in { animation:nrise var(--d3) var(--ease) both; }
/* app keyframes are prefixed: names are global and the intro already has `rise` */
@keyframes nrise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
#app .arow { display:flex; align-items:center; gap:var(--s3); min-height:56px; border-bottom:1px solid var(--line); }
#app .arow:last-child { border-bottom:0; }
#app .ar-m { flex:1; min-width:0; text-align:left; display:flex; flex-direction:column; gap:2px; padding:10px 0; min-height:var(--tap); }
#app .ar-m b { font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .ar-m span { font-size:var(--t-cap); color:var(--mute); }
#app .rmark { flex:none; width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
#app .rmark img { max-width:78%; max-height:78%; object-fit:contain; }
#app .rmark.mono { background:var(--accent); border-color:transparent; color:var(--bg); font-size:9px; font-weight:600; letter-spacing:.02em; }
#app .rmark.big { width:44px; height:44px; } #app .rmark.big.mono { font-size:15px; }
#app .rhead { display:flex; align-items:center; gap:12px; }
#app .was { font-family:var(--body, sans-serif); font-size:13px; font-weight:400; color:var(--mute); white-space:nowrap; }
#app .range { margin-top:4px; } #app .range h3 { font-size:19px; margin-bottom:4px; } #app .range .hint { margin:0 0 12px; }
#app .bn.out { opacity:.72; }
#app .bn .pr small { font-size:11px; font-weight:400; color:var(--mute); }
#app .bn .rn { margin:6px 0 2px; font-size:13.5px; font-style:italic; color:var(--mute); }
#app .bn .aw { display:flex; gap:6px; align-items:flex-start; font-size:13px; color:var(--accent); margin:8px 0 0; }
#app .bn .ac.bl { align-self:flex-start; margin-top:10px; }
#app .claims { margin-top:4px; } #app .claims p { font-size:13px; line-height:1.45; margin:6px 0; color:var(--ink); }
#app .claims a { color:var(--accent); font-size:12px; }
#app .rrow { border-bottom:1px solid var(--line); } #app .rrow:last-child { border-bottom:0; }
#app .rrow summary { list-style:none; cursor:pointer; padding:12px 0; display:flex; flex-direction:column; gap:4px; min-height:44px; }
#app .rrow summary::-webkit-details-marker { display:none; }
#app .rrow summary b { font-weight:500; color:var(--ink); } #app .rrow summary > span { font-size:13px; color:var(--mute); }
#app .rrow summary .notes { margin-top:2px; } #app .rrow[open] summary { padding-bottom:6px; } #app .rrow .bn { margin-bottom:12px; }
#app .gb.aw { color:var(--accent); }
#app .bn .hd .bag { flex:none; width:64px; height:64px; border-radius:var(--r-sm); object-fit:cover; background:#fff; border:1px solid var(--line); }
#app .bn .hd .ttl { flex:1; min-width:0; }
#app .rrow summary { position:relative; } #app .rrow summary:has(.thumb) { padding-left:56px; }
#app .rrow .thumb { position:absolute; left:0; top:12px; width:44px; height:44px; border-radius:var(--r-sm); object-fit:cover; background:#fff; border:1px solid var(--line); }
#app .phx { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#app .phx .rmark.big { width:64px; height:64px; box-shadow:var(--e1); } #app .phx .rmark.big.mono { font-size:20px; }
#app .phn { font-family:var(--display, Georgia, serif); font-size:20px; color:rgba(46,31,23,.38); padding:0 24px; text-align:center; }
#app img.fit { object-fit:contain !important; background:var(--sand); padding:6%; box-sizing:border-box; }
#app .beanline { font-size:var(--t-cap); color:var(--ink); display:flex; gap:var(--s2); align-items:flex-start; }
#app .beanline .ic { width:16px; height:16px; margin-top:2px; color:var(--accent); }
#app .green { display:flex; gap:6px; flex-wrap:wrap; }
#app .gb { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--ok); }
#app .gb .ic { width:13px; height:13px; }
/* Saved: a two-column grid of small photo cards */
#app .sv-h { padding:calc(var(--s5) + env(safe-area-inset-top,0px)) var(--s5) var(--s4); }
#app .sv-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) var(--s3); padding:0 var(--s5); }
#app .sv { position:relative; }
#app .sv-card { display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; }
#app .ph-sv { aspect-ratio:1/1; border-radius:var(--r-md); margin-bottom:6px; }
#app .sv-card .cn { font-size:16px; } #app .sv-card .asub { font-size:12px; }
#app .sv .hrt.gls { right:4px; top:4px; }
/* skeletons: soft cream/sand shimmer, the same size as what replaces them */
#app .skel, #app .skel-row { border-radius:var(--r-md); background:linear-gradient(90deg,var(--sand) 25%,#F6EFE3 50%,var(--sand) 75%); background-size:200% 100%; animation:sk 1.4s infinite; }
#app .skel { height:290px; } #app .skel-row { height:88px; margin:var(--s3) 0; }
@keyframes sk { to { background-position:-200% 0; } }
/* empty states: one motif, one line, one action */
#app .empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:var(--s12) var(--s8); color:var(--mute); }
#app .empty h3 { color:var(--ink); font-size:var(--t-title); margin:var(--s4) 0 var(--s2); }
#app .empty p { margin:0 0 var(--s5); max-width:30ch; }
#app .motif { width:72px; height:72px; fill:none; stroke:var(--nut); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
#app .abtn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:50px; padding:0 var(--s6); border-radius:var(--r-md); background:var(--ink); color:var(--bg); font-weight:500; }
/* "Something not right?": a soft crimson pill centred under the beans (crimson text on its tint passes AA) */
#app .wrongb { display:inline-flex; align-self:center; width:auto; align-items:center; gap:6px; min-height:34px; margin:var(--s1) auto 0; padding:0 var(--s3); border-radius:var(--r-full); background:rgba(158,27,50,.09); border:1px solid rgba(158,27,50,.22); color:var(--crimson); font:500 13px var(--body); }
#app .wrongb .ic { width:15px; height:15px; }
#app .ferr { margin:-8px 0 var(--s3); font-size:13px; color:var(--crimson); } #app .ferr:empty { display:none; }
#app .wrong-lead { margin:0 0 var(--s4); font-size:var(--t-body); color:var(--ink-2); line-height:1.5; }
#app .wrong-now { margin:0 0 var(--s4); padding:var(--s3) var(--s4); border-radius:var(--r-sm); background:var(--crimson-tint); font-size:13.5px; color:var(--ink); }
#app .wrong-ph { display:flex; align-items:center; gap:var(--s3); min-height:var(--tap); padding:var(--s2) var(--s4); border:1px dashed var(--hair); border-radius:var(--r-sm); color:var(--ink); font-size:14px; cursor:pointer; }
#app .wrong-ph input { position:absolute; width:1px; height:1px; opacity:0; }
#app .wrong-ph:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
#app .wrong-ph img { width:56px; height:56px; border-radius:var(--r-sm); object-fit:cover; }
#app .wrong-ph .x { margin-left:auto; color:var(--mute); text-decoration:underline; font-size:13px; }
#app .abtn.ghost { background:none; border:1px solid var(--ink); color:var(--ink); } #app .abtn.smb { min-height:var(--tap); padding:0 var(--s4); font-size:14px; border-radius:var(--r-sm); } #app .abtn.block { width:100%; }
#app .abtn[disabled] { opacity:.5; cursor:default; }
#app .src { font-size:12px; color:var(--faint); text-align:center; padding:var(--s5); }

/* sheets */
#app .scrim { position:absolute; inset:0; background:rgba(46,31,23,.45); opacity:0; pointer-events:none; transition:opacity var(--d2); z-index:20; }
#app .scrim.on { opacity:1; pointer-events:auto; }
#app .sheet { position:absolute; left:0; right:0; bottom:0; z-index:21; max-height:92%; display:flex; flex-direction:column; background:var(--bg); border-radius:var(--r-xl) var(--r-xl) 0 0; transform:translateY(102%); transition:transform var(--d3) var(--ease); visibility:hidden; }
#app .sheet.on { transform:none; visibility:visible; }
#app .sheet.tall { height:92%; }
#app .sh-h { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 12px; border-bottom:1px solid var(--line); }
#app .sh-h h2 { font-size:22px; } #app .sh-h button { font-size:14px; color:var(--accent); }
#app .sh-b { overflow-y:auto; padding:6px 20px 20px; flex:1; scrollbar-width:none; overscroll-behavior:contain; } #app .sh-b::-webkit-scrollbar { display:none; }
#app .sh-f { padding:12px 20px calc(16px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); background:var(--bg); }
#app details.sec { border-bottom:1px solid var(--line); }
#app details.sec > summary { list-style:none; display:flex; justify-content:space-between; align-items:center; padding:16px 0; cursor:pointer; font-family:var(--display); font-size:18px; }
#app details.sec > summary::-webkit-details-marker { display:none; }
#app details.sec > summary .c { font:500 12px var(--body); background:var(--accent); color:#fff; border-radius:var(--r-sm); min-width:18px; height:18px; display:inline-grid; place-items:center; padding:0 6px; margin-left:8px; }
#app details.sec > summary .ic { transition:transform var(--d2); } #app details.sec[open] > summary .ic { transform:rotate(180deg); }
#app details.sec > .in { padding:0 0 18px; display:flex; flex-direction:column; gap:14px; }
#app .hint { font-size:13px; color:var(--mute); margin:0; }
#app .fam h4 { margin:0 0 8px; font:500 13px var(--body); display:flex; align-items:center; gap:8px; color:var(--mute); text-transform:uppercase; letter-spacing:.06em; } #app .fam h4 i { width:10px; height:10px; border-radius:50%; } #app .fam h4 span { text-transform:none; letter-spacing:0; color:var(--faint); font-weight:400; }
#app .chs { display:flex; flex-wrap:wrap; gap:8px; }
#app .fc { height:34px; padding:0 13px; border:1px solid var(--line); border-radius:var(--r-full); background:var(--card); font-size:14px; display:inline-flex; align-items:center; gap:6px; }
#app .fc[aria-pressed="true"], #app .fc[data-s="like"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
#app .fc[data-s="avoid"] { background:var(--bad-tint); color:var(--bad); border-color:#E5B8B0; text-decoration:line-through; }
#app .fc small { font-size:11px; opacity:.7; text-decoration:none; }
#app .gl { font:500 12px var(--body); text-transform:uppercase; letter-spacing:.06em; color:var(--mute); margin:4px 0 -4px; }
#app .tog { display:flex; justify-content:space-between; align-items:center; gap:14px; text-align:left; width:100%; }
#app .sw { width:44px; height:26px; border-radius:var(--r-full); background:var(--line); position:relative; flex:none; transition:background var(--d2); } #app .sw::after { content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform var(--d2); }
#app .tog[aria-pressed="true"] .sw { background:var(--ok); } #app .tog[aria-pressed="true"] .sw::after { transform:translateX(18px); }
#app .seg { display:flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; } #app .seg button { flex:1; height:38px; font-size:14px; background:var(--card); border-right:1px solid var(--line); } #app .seg button:last-child { border:0; } #app .seg button[aria-pressed="true"] { background:var(--ink); color:var(--bg); }
#app input[type=range] { width:100%; accent-color:var(--accent); }

/* detail */
#app .detail { position:absolute; inset:0; z-index:10; background:var(--bg); overflow-y:auto; overflow-x:hidden; transform:translateX(100%); transition:transform var(--d3) var(--ease); visibility:hidden; scrollbar-width:none; padding-bottom:40px; }
#app .detail::-webkit-scrollbar { display:none; }
#app .detail.on { transform:none; visibility:visible; }
#app .hero { position:relative; }
#app .car { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; aspect-ratio:4/3; background:var(--sand-2); } #app .car::-webkit-scrollbar { display:none; }
#app .car > div { flex:none; width:100%; scroll-snap-align:center; position:relative; } #app .car img { width:100%; height:100%; object-fit:cover; display:block; }
#app .car .at { position:absolute; left:10px; bottom:8px; font-size:11px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
#app .dots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:5px; pointer-events:none; } #app .dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); } #app .dots i.on { background:#fff; }
#app .rnd { position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); width:40px; height:40px; border-radius:50%; background:rgba(246,240,231,.94); display:grid !important; place-items:center; z-index:2; }
#app .rnd.rl { left:14px; } #app .rnd.rr { right:14px; } #app .rnd[aria-pressed="true"] .ic { fill:var(--bad); stroke:var(--bad); }
#app .dh { padding:20px 20px 4px; } #app .dh h1 { font-size:32px; line-height:1.08; }
#app .dh .asub { margin-top:8px; font-size:14px; }
#app .acts { display:flex; gap:10px; padding:16px 20px 4px; overflow-x:auto; scrollbar-width:none; }
#app .ac { flex:none; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 15px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); font-size:14px; text-decoration:none; }
#app .sect { padding:26px 20px 0; } #app .sect > h2 { font-size:23px; margin-bottom:12px; } #app .sect > h2 small { font:400 13px var(--body); color:var(--faint); margin-left:8px; }
#app .sect p { margin:0 0 10px; }
#app .roaster { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
#app .roaster h3 { font-size:21px; } #app .roaster .smx { font-size:13px; color:var(--mute); }
#app .bn { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; margin-bottom:12px; display:flex; flex-direction:column; gap:12px; }
#app .bn .hd { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; } #app .bn h3 { font-size:20px; line-height:1.15; } #app .bn .pr { font-size:13px; color:var(--mute); white-space:nowrap; }
#app .kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px; margin:0; } #app .kv dt { color:var(--mute); } #app .kv dd { margin:0; }
#app .scale { display:flex; gap:4px; align-items:center; } #app .scale b { flex:1; height:6px; border-radius:3px; background:var(--line); } #app .scale b.f { background:var(--accent); }
#app .quote { border-left:3px solid var(--nut); padding:2px 0 2px 14px; margin:0 0 14px; font-family:var(--display); font-size:17px; line-height:1.4; } #app .quote cite { display:block; font:400 12.5px var(--body); color:var(--mute); margin-top:4px; font-style:normal; }
#app .note-card { border-top:1px solid var(--line); padding:14px 0; display:flex; flex-direction:column; gap:6px; } #app .note-card:first-of-type { border-top:0; }
#app .note-card .who { display:flex; justify-content:space-between; font-size:13px; color:var(--mute); } #app .note-card .who b { color:var(--ink); font-weight:500; }
#app .vid { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--accent); }
#app .callout { background:var(--sand); border-radius:var(--r-md); padding:16px; display:flex; flex-direction:column; gap:10px; }
#app .callout p { margin:0; font-size:14px; }
#app .hours { font-size:14px; color:var(--mute); margin:0; padding:0; list-style:none; display:grid; gap:4px; }
#app .gl-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:14px; align-items:center; } #app .gl-row:first-of-type { border-top:0; } #app .gl-row .ic { color:var(--ok); width:17px; height:17px; }
#app .gl-row span.lb { display:flex; gap:9px; align-items:center; } #app .gl-row small { color:var(--faint); font-size:12px; }

/* forms in sheets */
#app .fd { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; } #app .fd > span { font-size:13px; color:var(--mute); }
#app .fd input[type=text], #app .fd input[type=email], #app .fd textarea { width:100%; border:1px solid var(--line); background:var(--card); border-radius:var(--r-sm); font:inherit; padding:12px 14px; color:var(--ink); outline:none; }
#app .fd textarea { min-height:90px; resize:vertical; } #app .fd input:focus, #app .fd textarea:focus { border-color:var(--accent); }
#app .stars { display:flex; gap:6px; } #app .stars button { font-size:26px; line-height:1; color:var(--line); } #app .stars button.on { color:var(--nut); }
#app .res { display:flex; flex-direction:column; } #app .res button { text-align:left; padding:13px 0; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; } #app .res button:first-child { border-top:0; }
#app .rows { display:flex; flex-direction:column; } #app .rows > button, #app .rows > a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 0; border-top:1px solid var(--line); text-align:left; text-decoration:none; } #app .rows > :first-child { border-top:0; }
#app .rows .t { display:flex; flex-direction:column; } #app .rows .t small { color:var(--mute); font-size:13px; }
#app .artc h1 { font-size:34px; line-height:1.08; margin:8px 0 18px; } #app .artc h2 { font-size:22px; margin:28px 0 8px; } #app .artc p, #app .artc li { color:var(--ink-2); } #app .artc ul { padding-left:20px; margin:0 0 10px; } #app .artc .lead { font-family:var(--display); font-size:21px; line-height:1.4; color:var(--ink); }
#app .artc table { width:100%; border-collapse:collapse; font-size:14px; margin:8px 0 14px; } #app .artc td, #app .artc th { text-align:left; padding:8px 8px 8px 0; border-top:1px solid var(--line); vertical-align:top; } #app .artc th { font-weight:500; }
#app .pagebar { position:sticky; top:0; z-index:3; padding:calc(12px + env(safe-area-inset-top,0px)) 12px 8px; background:var(--bg); }
/* the logo, centred in the About pages' top bar (the PNG's square cream canvas is cropped to the wordmark) */
#app .pg-logo { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:150px; height:44px; object-fit:cover; pointer-events:none; }
#app .bk { width:44px; height:44px; display:grid !important; place-items:center; border-radius:50%; } #app .bk .ic { width:26px; height:26px; stroke-width:1.5; }
#app .toast { position:absolute; left:50%; bottom:96px; transform:translate(-50%,20px); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:var(--r-sm); font-size:14px; opacity:0; pointer-events:none; transition:var(--d3); z-index:40; max-width:88%; text-align:center; }
#app .toast.on { opacity:1; transform:translate(-50%,0); }
#app .me { display:flex; align-items:center; gap:14px; padding:calc(20px + env(safe-area-inset-top,0px)) 20px 8px; } #app .av { width:56px; height:56px; border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center; font:500 24px var(--display); }
@media (prefers-reduced-motion: reduce) { #app *, #app *::before, #app *::after { transition:none !important; animation:none !important; } }

/* photos looked up live: a quiet spinner over the placeholder until the picture arrives (or doesn't) */
#app .spin { position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; border:2px solid rgba(46,31,23,.14); border-top-color:var(--accent); animation:nspin .8s linear infinite; z-index:2; }
#app .loading .phx > * { opacity:0; }
#app :not(.loading) > .spin, #app .car:not(.loading) .spin { display:none; } /* belt and braces: no spinner once a photo has settled */
#app .ph img, #app .car img { animation:nfade var(--d3) ease; }
@keyframes nspin { to { transform:rotate(360deg); } }
@keyframes nfade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { #app .spin { animation-duration:2.4s; } #app .ph img, #app .car img { animation:none; } }
/* what people say, for cafes whose coffee we don't know yet */
#app .said { margin:2px 0 10px; padding-left:10px; border-left:2px solid var(--line); }
#app .said .asub { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); }
#app .said p { margin:2px 0 0; font-size:14px; line-height:1.4; color:var(--ink); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
#app .said small { font-size:12px; color:var(--mute); }
#app .lnk { color:var(--accent); font-size:13px; text-decoration:underline; text-underline-offset:2px; padding:8px 0; margin-left:auto; }
#app .car a.at { text-decoration:none; padding:6px 0; }

/* Popular choices: a swipeable row of large photo cards above the list (Apple Music "Top Picks" style) */
#app .pop { margin:4px 0 18px; }
#app .pop-h { display:flex; justify-content:space-between; align-items:baseline; padding:0 20px; margin-bottom:12px; }
#app .pop h2 { font-size:26px; font-weight:600; letter-spacing:-.015em; }
#app .pop-h span { font-size:14px; color:var(--mute); }
#app .pop-row { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 20px 4px; scroll-padding:0 20px; scrollbar-width:none; overscroll-behavior-x:contain; }
#app .pop-row::-webkit-scrollbar { display:none; }
#app .pop-card { flex:none; width:72%; max-width:280px; scroll-snap-align:start; text-align:left; display:flex; flex-direction:column; gap:2px; }
#app .pop-ph { position:relative; display:block; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; background:var(--sand-2); margin-bottom:8px; }
#app .pop-ph img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--d3) ease; }
#app .pop-card:active .pop-ph img { transform:scale(.98); }
#app .pop-card b { font-family:var(--display); font-weight:500; font-size:17px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .pop-card span:last-child { font-size:13px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* BYO cups chip: in the green row like the award chip, in the owner's purple (a touch deeper than #B787CF so the text reads) */
#app .gb.by { color:var(--byo); }
#app .lb.by, #app .gl-row .lb.by .ic { color:var(--byo); }

/* Roaster card: logo, name and place on top; swipeable slides (about, claims, awards, coffees, where to find it); footer buttons */
#app .rcard { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 0 18px; margin-bottom:14px; overflow:hidden; }
#app .rtop { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:0 22px; }
#app .rtop .rmark { width:88px; height:88px; box-shadow:0 0 0 5px var(--card), 0 0 0 6px var(--line); margin-bottom:8px; }
#app .rtop .rmark img { max-width:72%; max-height:72%; }
#app .rtop .rmark.mono { font:500 30px var(--display); letter-spacing:0; }
#app .rtop h2 { font-size:26px; line-height:1.15; }
#app .rloc { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--mute); } #app .rloc .ic { width:15px; height:15px; }
#app .rslides { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; margin-top:26px; }
#app .rslides::-webkit-scrollbar { display:none; }
#app .rs { flex:0 0 100%; scroll-snap-align:start; padding:0 22px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
#app .rk { font:500 var(--t-label) var(--body); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--nut-text); }
#app .ri { width:50px; height:50px; border-radius:var(--r-sm); background:var(--sand); display:grid; place-items:center; color:var(--accent); margin:4px 0 2px; } #app .ri .ic { width:21px; height:21px; }
#app .rs h3 { font-size:25px; line-height:1.15; color:var(--ink); }
#app .rs p { margin:0; font-size:16px; line-height:1.5; color:var(--ink-2); }
#app .rs .rlead { font-family:var(--display); font-size:29px; line-height:1.2; color:var(--ink-2); }
#app .rs mark { background:linear-gradient(transparent 60%, #EBD9BC 60%); color:var(--ink); font-weight:600; padding:0 1px; }
#app .rs b { color:var(--ink); font-weight:600; }
#app .rhint, #app .rsrc { font-size:13.5px !important; color:var(--faint) !important; }
#app .rsrc a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
#app .rbig { font:500 58px/1 var(--display); color:var(--accent); letter-spacing:-.02em; }
#app .runit { font-size:14px; color:var(--mute); margin-top:-4px; }
#app .rchip { font-size:12.5px; color:var(--mute); background:var(--sand); border-radius:var(--r-full); padding:5px 12px; }
#app .rbags { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; width:100%; }
#app .rbag { display:flex; flex-direction:column; gap:3px; color:var(--ink); text-decoration:none; min-width:0; }
#app .rbag-ph { aspect-ratio:1/1; border-radius:var(--r-sm); background:var(--sand); display:grid; place-items:center; overflow:hidden; margin-bottom:4px; }
#app .rbag-ph img { max-width:86%; max-height:86%; object-fit:contain; }
#app .rbag b { font-size:12.5px; font-weight:500; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
#app .rbag small { font-size:11.5px; color:var(--mute); }
#app .rnav { display:flex; align-items:center; justify-content:space-between; padding:22px 22px 0; }
#app .rdots { display:flex; gap:6px; align-items:center; }
#app .rdots button { width:8px; height:8px; border-radius:4px; background:var(--line); padding:0; transition:width var(--d2) ease, background var(--d2) ease; }
#app .rdots button.on { width:28px; background:var(--ink); }
#app .rnext { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--faint); } #app .rnext .ic { width:16px; height:16px; }
#app .rfoot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:18px 22px 0; padding-top:16px; border-top:1px solid var(--line); }
#app .rfoot > span { font-size:14.5px; color:var(--mute); }
#app .rbtns { display:flex; gap:8px; }
#app .rbtn { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--sand); color:var(--ink); font-size:14.5px; text-decoration:none; }
#app .rbtn .ic { width:17px; height:17px; }
#app .rbtn.dark { background:var(--ink); border-color:var(--ink); color:var(--bg); }
#app .rfoot.two .rbtns { width:100%; } #app .rfoot.two .rbtn { flex:1; justify-content:center; }

/* Map: a flat map of the listed cafes (public/map.js), toggled by the floating List/Map pill */
#app .mapv { position:absolute; inset:0; z-index:3; display:none; background:#F3ECE1; }
#app .mapv.on { display:block; }
#app .mapc { position:absolute; inset:0; }
#app .mtop { position:absolute; z-index:2; top:calc(12px + env(safe-area-inset-top,0px)); left:12px; right:12px; display:flex; gap:8px; pointer-events:none; }
#app .mtop > * { pointer-events:auto; }
#app .mpill { display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 15px; border-radius:var(--r-full); background:rgba(251,247,240,.96); box-shadow:0 4px 14px rgba(46,31,23,.12); font-size:14.5px; min-width:0; }
#app .mpill b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; }
#app .mpill .n { background:var(--accent); color:#fff; font-size:11.5px; min-width:18px; height:18px; border-radius:var(--r-sm); display:grid; place-items:center; padding:0 5px; }
#app .mpill.here.quiet { background:rgba(251,247,240,.96); color:var(--mute); font-size:13.5px; height:36px; }
#app .mpill.here { position:absolute; top:52px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); white-space:nowrap; animation:mup var(--d2) ease; }
/* map key: a round button on the right of the top bar, opening a small card of what each marker means */
#app .mpill.mkey { margin-left:auto; flex:none; width:42px; padding:0; justify-content:center; color:var(--ink); }
#app .mpill.mkey[aria-expanded="true"] { background:var(--ink); color:var(--bg); }
#app .mtop.keyon .mpill.here { left:0; transform:none; animation:none; }
#app .mkeyc { position:absolute; top:52px; right:0; width:min(250px, 100%); background:rgba(251,247,240,.97); border-radius:var(--r-md); box-shadow:0 10px 28px rgba(46,31,23,.16); padding:var(--s3) var(--s4); animation:nfade var(--d2) ease both; }
#app .mkeyc ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
#app .mkeyc li { display:flex; align-items:center; gap:12px; font-size:13px; line-height:1.35; color:var(--ink); }
#app .mk-k { flex:none; width:38px; display:grid; place-items:center; }
#app .mk-k .mk-p { width:32px; height:32px; } #app .mk-k .mk-p b { font-size:11px; } #app .mk-k .mk-p svg { width:17px; height:17px; }
#app .mk-kd i { display:block; width:13px; height:13px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px rgba(251,247,240,.95), 0 1px 3px rgba(46,31,23,.3); }
#app .mk-kd.dim i { background:#B3A391; opacity:.45; box-shadow:0 0 0 1.5px rgba(251,247,240,.9); }
#app .mk-kc { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#FBF7F0; box-shadow:inset 0 0 0 1.5px rgba(46,31,23,.38); } #app .mk-kc b { font:600 11.5px var(--body); }
#app .mk-kl { width:28px; height:28px; } #app .mk-kl line { stroke:rgba(46,31,23,.42); stroke-width:1.25; stroke-linecap:round; } #app .mk-kl circle { fill:rgba(46,31,23,.55); stroke:#FBF7F0; stroke-width:1.25; }
#app .mk-km { width:16px; height:16px; border-radius:50%; background:#5B7083; border:3px solid #fff; box-shadow:0 0 0 5px rgba(91,112,131,.16), 0 1px 3px rgba(0,0,0,.2); }
#app .mtog { position:absolute; z-index:4; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 20px; border-radius:var(--r-full); background:var(--ink); color:var(--bg); font-weight:500; box-shadow:0 8px 22px rgba(46,31,23,.25); }
#app .mtog[hidden] { display:none; }
#app .mcard { position:absolute; z-index:2; left:12px; right:12px; bottom:calc(142px + env(safe-area-inset-bottom,0px)); opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity var(--d2) ease, transform var(--d2) var(--ease); }
#app .mcard.on { opacity:1; transform:none; pointer-events:auto; }
#app .mc { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--card); border-radius:var(--r-md); padding:10px 14px 10px 10px; box-shadow:0 10px 28px rgba(46,31,23,.16); }
#app .mc-ph { position:relative; flex:none; width:78px; height:78px; border-radius:var(--r-sm); overflow:hidden; background:var(--sand-2); }
#app .mc-ph img { width:100%; height:100%; object-fit:cover; display:block; }
#app .mc-ph .phn { display:none; }
#app .mc-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
#app .mc-b b { font-family:var(--display); font-weight:500; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .mc-b .notes { display:flex; flex-wrap:nowrap; gap:6px; overflow:hidden; } #app .mc-b .nt { flex:none; }
#app .mc > .ic { color:var(--faint); }
#app .mme { z-index:3; pointer-events:none; width:16px; height:16px; border-radius:50%; background:var(--accent); border:3px solid #fff; box-shadow:0 0 0 7px rgba(138,75,34,.16); }
#app .maplibregl-ctrl-attrib { font-size:10px; background:rgba(251,247,240,.8); }
@keyframes mup { from { opacity:0; transform:translate(-50%,-6px); } to { opacity:1; transform:translate(-50%,0); } }
#app .more { margin-top:4px; }

/* Profile: name, a "my taste" card, About as tiles, rarely used pages as quiet links */
#app .prof { padding-bottom:20px; }
#app .prof .me { gap:16px; padding:calc(24px + env(safe-area-inset-top,0px)) 20px 18px; }
#app .prof .av { width:64px; height:64px; font-size:28px; flex:none; }
#app .prof .me h1 { font-size:32px; line-height:1.05; }
#app .eyebrow { margin:0 0 8px; font-size:12px; font-weight:500; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--nut-text); }
#app .taste { position:relative; overflow:hidden; margin:0 20px; padding:22px 20px 20px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); }
#app .taste > :not(.taste-bean) { position:relative; }
#app .taste-bean { position:absolute; right:-36px; top:-34px; width:130px; transform:rotate(-30deg); pointer-events:none; }
#app .taste h2 { font-size:24px; margin-bottom:14px; }
#app .taste .chs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
#app .taste .nt { font-size:14px; padding:6px 12px; }
#app .addc { padding:6px 12px; border:1px dashed var(--faint); border-radius:var(--r-full); font-size:14px; color:var(--mute); }
#app .dbtn { display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 18px; border-radius:var(--r-sm); background:var(--ink); color:var(--bg); font-weight:500; }
#app .ab-h { font-size:26px; font-weight:600; padding:30px 20px 14px; }
#app .tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 20px; }
#app .tile { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; min-height:150px; padding:16px; border-radius:var(--r-lg); text-align:left; border:1px solid var(--line); }
#app .tile b { position:relative; font-family:var(--display); font-weight:500; font-size:19px; line-height:1.12; color:var(--ink); }
#app .tile > span:not(.tile-art) { position:relative; font-size:13.5px; line-height:1.35; color:var(--mute); }
#app .tile.tlight { background:var(--card); } #app .tile.ttan { background:var(--sand); }
#app .tile-art { position:absolute; right:-14px; top:-12px; color:rgba(138,75,34,.13); }
#app .tile-art .ic { width:100px; height:100px; stroke-width:1.1; }
#app .tile.tdark { grid-column:1 / -1; min-height:130px; padding:20px; background:var(--ink); border-color:var(--ink); }
#app .tile.tdark b { font-size:23px; color:var(--bg); } #app .tile.tdark > span { color:rgba(246,240,231,.75); }
#app .tile.tdark > .ic { position:absolute; right:18px; bottom:18px; color:var(--bg); }
#app .tile-bean { position:absolute; right:-24px; top:-20px; width:120px; transform:rotate(-30deg); pointer-events:none; }
#app .tile:active { transform:scale(.985); }
#app .qlinks { display:flex; justify-content:center; gap:26px; padding:26px 20px 6px; }
#app .qlinks button { font-size:14.5px; color:var(--mute); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; }
#app .signout { display:block; margin:14px auto 4px; padding:8px 14px; color:var(--faint); }
#app .ver { text-align:center; font-size:12px; color:var(--faint); margin:0; }

/* Why notes. exists: its own layout rather than an article */
#app .why { position:relative; overflow:hidden; padding:6px 20px 40px; }
#app .why > :not(.why-bean) { position:relative; }
#app .why-bean { position:absolute; right:-90px; top:-10px; width:230px; transform:rotate(-16deg); opacity:.75; pointer-events:none; }
#app .why-h { font-size:40px; line-height:1.04; font-weight:600; letter-spacing:-.02em; margin:0 0 16px; }
#app .why-h em { font-style:normal; color:var(--accent); }
#app .why-lead { font-size:16px; line-height:1.55; color:var(--ink-2); margin:0 0 24px; } #app .why-lead b { font-weight:500; color:var(--ink); }
#app .cmp { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#app .cmp-c { padding:16px; border-radius:var(--r-md); } #app .cmp-c p:not(.eyebrow) { margin:0; font-size:13.5px; line-height:1.4; }
#app .cmp-c.star { border:1.5px dashed var(--line); color:var(--faint); } #app .cmp-c.star .eyebrow { color:var(--faint); }
#app .cmp-c .num { font-family:var(--display); font-size:40px; line-height:1; color:var(--faint); margin:4px 0 14px; } #app .cmp-c .num span { font-size:22px; margin-left:4px; vertical-align:middle; }
#app .cmp-c.nts { background:var(--card); border:1px solid var(--line); box-shadow:0 8px 22px rgba(46,31,23,.08); } #app .cmp-c.nts .eyebrow { color:var(--accent); }
#app .cmp-c .chs { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:12px; }
#app .cmp-cap { text-align:center; font-size:13.5px; color:var(--mute); margin:14px 0 0; }
#app .why-s { font-size:26px; font-weight:600; margin:36px 0 14px; }
#app .bel { display:flex; gap:16px; padding:18px; margin-bottom:12px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); }
#app .bel-i { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-sm); background:var(--sand); color:var(--accent); }
#app .bel h3 { font-size:20px; margin:2px 0 4px; } #app .bel p { margin:0; color:var(--ink-2); line-height:1.5; }
#app .why mark { background:linear-gradient(transparent 62%, #F1D9BF 62%); color:inherit; padding:0 1px; }
#app .road { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#app .rd { padding:14px 16px; border-radius:var(--r-md); background:var(--sand); } #app .rd.wide { grid-column:1 / -1; }
#app .rd h3 { font-size:18px; margin:8px 0 4px; } #app .rd p { margin:0; font-size:13.5px; line-height:1.4; color:var(--mute); }
#app .soon { display:inline-block; padding:2px 10px; border-radius:var(--r-full); background:var(--card); font-size:12.5px; color:var(--mute); }
#app .road-cap { margin:14px 0 0; color:var(--ink-2); }
#app .gofind { margin-top:34px; padding:26px 22px 22px; border-radius:var(--r-lg); background:var(--ink); color:var(--bg); }
#app .gofind h2 { font-size:32px; font-weight:600; color:var(--bg); margin-bottom:8px; } #app .gofind h2 em { font-style:normal; color:var(--nut); }
#app .gofind p { margin:0 0 20px; color:rgba(246,240,231,.8); line-height:1.5; }
#app .gofind-b { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:52px; border-radius:var(--r-sm); background:var(--bg); color:var(--ink) !important; font-weight:500; }
/* card flavours stay on one line; the row keeps up to three */
#app .card .notes { flex-wrap:nowrap; overflow:hidden; mask-image:linear-gradient(90deg,#000 85%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); }
#app .card .nt { flex:none; }

/* Cafe page: glass controls over the photo, a one-line summary, the tasting card, folds, and one pinned action */
#app .rnd { position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); width:var(--tap); height:var(--tap); border-radius:50%; display:grid !important; place-items:center; z-index:2; color:var(--ink); }
#app .dh { padding:var(--s5) var(--s5) var(--s1); display:flex; flex-direction:column; gap:4px; }
#app .dsum { margin:4px 0 6px; font:400 17px/1.4 var(--display); color:var(--ink-2); max-width:34ch; }
#app .acts { display:flex; gap:var(--s2); padding:var(--s3) var(--s5) var(--s1); overflow-x:auto; scrollbar-width:none; }
#app .ac { flex:none; display:inline-flex; align-items:center; gap:var(--s2); min-height:var(--tap); padding:0 var(--s4); border:1px solid var(--line); border-radius:var(--r-full); background:var(--card); font-size:14px; text-decoration:none; }
#app .sect { padding:var(--s6) var(--s5) 0; } #app .sect > h2 { font-size:var(--t-title); margin-bottom:var(--s3); } #app .sect > h2 small { font:400 var(--t-cap) var(--body); color:var(--faint); margin-left:var(--s2); }
#app .cup { display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5); border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); box-shadow:var(--e1); }
#app .cup-h { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
#app .cup .abtn { align-self:flex-start; }
#app .cupv { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) var(--s4); margin:var(--s1) 0 0; padding-top:var(--s3); border-top:1px solid var(--line); }
#app .cupv dt { font:500 var(--t-label) var(--body); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--faint); margin-bottom:2px; }
#app .cupv dd { margin:0; font-size:14.5px; color:var(--ink); }
#app details.fold { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#app details.fold + details.fold { border-top:0; }
#app .fold > summary { list-style:none; display:flex; align-items:center; gap:var(--s2); min-height:56px; cursor:pointer; }
#app .fold > summary::-webkit-details-marker { display:none; }
#app .fold > summary h2 { flex:1; font-size:18px; } #app .fold > summary h2 small { font:400 var(--t-cap) var(--body); color:var(--faint); margin-left:6px; }
#app .fold > summary .ic { color:var(--faint); transition:transform var(--d2) var(--ease); } #app .fold[open] > summary .ic { transform:rotate(180deg); }
#app .fold-n { font-size:var(--t-cap); color:var(--mute); }
#app .fold-b { padding:0 0 var(--s4); }
#app .gchips { display:flex; flex-wrap:wrap; gap:var(--s2); }
#app .gchip { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 var(--s3); border-radius:var(--r-full); background:var(--ok-tint); color:var(--ok); font-size:13.5px; }
#app .gchip .ic { width:15px; height:15px; } #app .gchip.by { background:#EFE4F4; color:var(--byo); }
#app .gchip[aria-expanded="true"] { box-shadow:inset 0 0 0 1.5px currentColor; }
#app .sect p.gsrc { margin:var(--s4) 0 0; text-align:center; } /* beats .sect p, which had zeroed the gap */ #app .gsrc a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
#app .fgrid { list-style:none; margin:0 0 var(--s3); padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--s2) var(--s4); font-size:14px; }
#app .fgrid li { display:flex; align-items:center; gap:var(--s2); } #app .fgrid .ic { width:16px; height:16px; color:var(--ok); }
#app .kvl { display:flex; gap:var(--s3); align-items:baseline; margin:var(--s2) 0 0; font-size:14px; } #app .kvl .label { flex:none; width:56px; color:var(--faint); }
#app .dfoot { position:sticky; bottom:0; z-index:3; margin-top:var(--s8); padding:var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom,0px)); border-width:1px 0 0; border-radius:0; }
#app .detail { padding-bottom:0; }

/* bottom sheet: grabber, glass, 32 px top corners */
#app .sheet { background:rgba(246,240,231,.9); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4); box-shadow:var(--e3); }
#app .grab { display:grid; place-items:center; height:22px; cursor:grab; touch-action:none; flex:none; }
#app .grab i { width:40px; height:5px; border-radius:var(--r-full); background:var(--hair); }
#app .sh-h { touch-action:none; padding-top:var(--s1); }
#app .sh-f { background:transparent; }
#app .scrim { background:var(--scrim); }

/* flavour picker: families as colour discs, notes fly in as chips, tri-state */
#app .discs { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4) var(--s2); }
#app .disc { display:flex; flex-direction:column; align-items:center; gap:6px; min-height:var(--tap); font-size:12.5px; color:var(--mute); }
#app .disc-c { position:relative; width:60px; height:60px; border-radius:50%; box-shadow:inset 0 -6px 12px rgba(0,0,0,.12), var(--e1); transition:transform var(--d2) var(--ease), box-shadow var(--d2) var(--ease); }
#app .disc[aria-selected="true"] .disc-c { transform:scale(1.08); box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--ink), var(--e2); }
#app .disc[aria-selected="true"] .disc-l { color:var(--ink); font-weight:500; }
#app .disc-n { position:absolute; right:-4px; top:-4px; min-width:22px; height:22px; padding:0 6px; border-radius:var(--r-full); background:var(--ink); color:var(--bg); font-size:12px; display:grid; place-items:center; }
#app .pk-fam { margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line); }
#app .pk-fam h3 { font-size:var(--t-title); margin-bottom:var(--s3); } #app .pk-fam h3 small { font:400 var(--t-cap) var(--body); color:var(--faint); margin-left:6px; }
#app .pk-hint { margin:0 0 var(--s3); padding:var(--s2) var(--s3); border-radius:var(--r-sm); background:var(--sand); font-size:var(--t-cap); color:var(--ink-2); }
#app .fc.pk { min-height:40px; height:auto; padding:0 var(--s4); font-size:14.5px; animation:chipin var(--d3) var(--ease) both; }
#app .fc.pk .ic { width:14px; height:14px; }
@keyframes chipin { from { opacity:0; transform:translateY(10px) scale(.96); } to { opacity:1; transform:none; } }
#app .wisp { position:absolute; left:50%; bottom:120px; width:60px; margin-left:-30px; z-index:40; pointer-events:none; }
#app .wisp svg { width:60px; height:90px; fill:none; stroke:var(--nut); stroke-width:2; stroke-linecap:round; opacity:0; animation:wisp 1.6s var(--ease) forwards; }
@keyframes wisp { 0% { opacity:0; transform:translateY(20px); } 30% { opacity:.7; } 100% { opacity:0; transform:translateY(-60px); } }
#app .rsrc { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
#app .rslides:focus-visible { outline-offset:-2px; }
#app .rdots button { position:relative; } #app .rdots button::after { content:""; position:absolute; inset:-18px -6px; } /* 44 px target around a small dot */

/* story pages (How it works, What we stand for, For cafes, Flavour 101) share the Why layout */
#app .story .why-h { font-size:36px; }
#app .lv { display:flex; flex-direction:column; gap:var(--s3); margin:var(--s2) 0 0; }
#app .lv-r { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:var(--s4); border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); }
#app .lv-r p { margin:0; color:var(--ink-2); line-height:1.5; }
#app .bel .soon { margin-left:4px; }
#app .wheel { position:relative; width:100%; max-width:320px; aspect-ratio:1/1; margin:var(--s2) auto var(--s6); border-radius:50%; background:radial-gradient(circle, var(--card) 0 34%, var(--sand) 35% 100%); }
#app .wh { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:4px; min-width:var(--tap); min-height:var(--tap); font-size:12px; color:var(--ink-2); }
#app .wh span { width:40px; height:40px; border-radius:50%; box-shadow:inset 0 -5px 10px rgba(0,0,0,.12); transition:transform var(--d1) var(--ease); }
#app .wh:active span { transform:scale(.92); }
#app .wh-c { position:absolute; inset:0; display:grid; place-items:center; margin:0; font:500 var(--t-label) var(--body); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--faint); pointer-events:none; }
#app .card-b { display:flex; flex-direction:column; width:100%; height:100%; text-align:left; }
#app .fam h4 span, #app .pk-fam h3 small, #app .sect > h2 small, #app .fold > summary h2 small { color:var(--mute); }

/* match pill: strength as colour (80%+ green, then yellow, orange, red) */
#app .mp { flex:none; display:inline-flex; align-items:baseline; gap:4px; padding:3px 10px; border-radius:var(--r-full); font-size:12px; font-weight:500; white-space:nowrap; }
#app .mp b { font-size:14px; font-weight:600; }
#app .mp.m-hi { background:#DDEBD6; color:#2F5B2B; } #app .mp.m-good { background:#F3E7B9; color:#6B5410; }
#app .mp.m-mid { background:#F6DCC2; color:#8A4512; } #app .mp.m-low { background:#F4D6D0; color:#93382C; }
#app .mp.on-photo { position:absolute; left:var(--s3); top:var(--s3); z-index:2; box-shadow:var(--e2); padding:5px 12px; }
#app .crow .mp { align-self:flex-start; margin:-2px 0 2px; }
/* BYO cups pill on previews (the purple from the cafe page) */
#app .byop { align-self:flex-start; display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 8px; border-radius:var(--r-full); background:#EFE4F4; color:var(--byo); font-size:12px; font-weight:500; }
#app .byop .ic { width:14px; height:14px; }
/* a square roaster logo fills its round frame */
#app .rmark.sq img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }

/* My taste on Profile: centred, gradient of your families, a button with a little stack of their colours */
#app .taste { text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--s3); padding:var(--s6) var(--s5); border-color:rgba(227,216,199,.8); box-shadow:var(--e2); }
#app .taste h2 { margin:0; font-size:26px; font-weight:600; letter-spacing:-.015em; }
#app .taste .chs { justify-content:center; margin:0; }
#app .taste .nt { background:rgba(251,247,240,.8); }
#app .tk { margin:0; font:italic 400 16px var(--display); color:var(--nut-text); }
#app .tbtn { display:inline-flex; align-items:center; gap:var(--s3); min-height:50px; margin-top:var(--s2); padding:0 var(--s5) 0 var(--s3); border-radius:var(--r-full); background:var(--ink); color:var(--bg); font-weight:500; box-shadow:var(--e2); transition:transform var(--d1) var(--ease); }
#app .tbtn:active { transform:scale(.97); }
#app .tstack { display:inline-flex; } #app .tstack i { width:26px; height:26px; border-radius:50%; border:2px solid var(--ink); margin-left:-9px; } #app .tstack i:first-child { margin-left:0; }

/* labels in sentence case, not small caps (the owner: the all-caps eyebrow "looks too AI") */
#app .label, #app .eyebrow, #app .rk, #app .cupv dt { text-transform:none; letter-spacing:0; font-size:13px; }
/* Why: the comparison reads as a contrast */
#app .vs { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; }
#app .vs-a { padding:var(--s4); border-radius:var(--r-lg); border:1.5px dashed var(--hair); color:var(--faint); background:rgba(240,230,214,.35); filter:saturate(.4); }
#app .vs-a .num { font-family:var(--display); font-size:38px; line-height:1; color:var(--hair); margin:6px 0 12px; } #app .vs-a .num span { font-size:20px; margin-left:3px; vertical-align:middle; }
#app .vs-a p:not(.vs-k) { margin:0; font-size:13.5px; line-height:1.4; }
#app .vs-b { padding:var(--s4); border-radius:var(--r-lg); background:var(--ink); color:var(--bg); box-shadow:var(--e3); transform:rotate(1.2deg); }
#app .vs-b .chs { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:6px 0 12px; }
#app .vs-b .nt { background:rgba(246,240,231,.14); color:var(--bg); }
#app .vs-b p:not(.vs-k) { margin:0; font-size:13.5px; line-height:1.4; color:rgba(246,240,231,.85); }
#app .vs-k { margin:0; font:italic 400 15px var(--display); } #app .vs-a .vs-k { color:var(--faint); } #app .vs-b .vs-k { color:var(--bg); }
#app .vs-o { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--bg); border:1px solid var(--line); font:italic 500 15px var(--display); color:var(--mute); box-shadow:var(--e1); }
#app .wmk { font-family:var(--display); font-weight:600; font-style:normal; color:inherit; } #app .wmk i { font-style:normal; color:var(--nut); }
#app .vs-b .wmk { color:var(--bg); }
/* Why: the founder */
#app .founder { display:flex; align-items:center; gap:var(--s3); margin:var(--s5) 0 var(--s8); }
#app .f-ph { flex:none; width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:50% 22%; box-shadow:0 0 0 2px var(--card), var(--e1); }
#app .f-t { min-width:0; }
#app .f-n { margin:0; font:500 16px/1.25 var(--display); color:var(--ink); }
#app .f-l { margin:2px 0 0; font-size:13.5px; color:var(--mute); }

/* Filters: the search as a sentence that writes itself (design/filters-sentence.html). The sentence card has a fixed
   height and steps its type down as the sentence grows, so the tabs and controls below never move. */
#app #sh-filter .sh-h { border-bottom:0; padding-bottom:var(--s2); }
#app #sh-filter .sh-h button[disabled] { opacity:.35; cursor:default; }
#app .fx-card { flex:none; height:216px; margin:0 var(--s4); padding:14px var(--s4) 10px; display:flex; flex-direction:column; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:28px; box-shadow:0 18px 30px -26px rgba(46,31,23,.5); }
#app .fx-lab { margin:0; font:500 12px var(--body); color:var(--mute); }
#app .fx-sent { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow-y:auto; scrollbar-width:none; }
#app .fx-sent::-webkit-scrollbar { display:none; }
#app .fx-sent p { margin:auto 0; font:500 var(--fs,27px)/1.5 var(--display); letter-spacing:-.02em; text-wrap:balance; transition:font-size var(--d2) var(--ease); }
#app .fx-sent p.empty { color:var(--mute); font-weight:400; }
#app .fx-nw { white-space:nowrap; }
#app .fx-tk { display:inline-flex; align-items:center; gap:7px; padding:0 11px 2px 12px; border-radius:var(--r-full); font:inherit; letter-spacing:inherit; line-height:1.3; color:var(--ink); vertical-align:baseline;
  background:color-mix(in srgb, var(--c) 17%, #FFFDF9); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent); transition:transform var(--d1) var(--ease); }
#app .fx-tk i { width:9px; height:9px; border-radius:50%; background:var(--c); margin-top:3px; flex:none; }
#app .fx-tk::after { content:"\00d7"; font:400 .62em var(--body); color:var(--mute); margin:2px 0 0 1px; }
#app .fx-tk:active { transform:scale(.96); }
#app .fx-tk.new { animation:nfxpop 260ms var(--ease); }
#app .fx-tk.k-avoid { --c:var(--tk-avoid); } #app .fx-tk.k-avoid span { text-decoration:line-through; text-decoration-thickness:1px; }
#app .fx-tk.k-style { --c:var(--tk-style); } #app .fx-tk.k-near { --c:var(--tk-near); } #app .fx-tk.k-green { --c:var(--tk-green); } #app .fx-tk.k-good { --c:var(--tk-good); }
@keyframes nfxpop { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:scale(1); } }
#app .fx-meta { margin:4px 0 0; min-height:20px; font-size:var(--t-cap); color:var(--mute); }
#app .fx-meta b { font-weight:500; color:var(--ink); }
#app .fx-tabs { flex:none; display:flex; gap:var(--s2); padding:var(--s4) var(--s4) 0; overflow-x:auto; scrollbar-width:none; }
#app .fx-tabs::-webkit-scrollbar { display:none; }
#app .fx-tab { flex:none; display:flex; align-items:center; gap:7px; height:44px; padding:0 15px; border-radius:22px; border:1px solid var(--sand-2); font-size:14px; font-weight:500; color:var(--ink-2); transition:background var(--d1), color var(--d1); }
#app .fx-tab[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:var(--bg); }
#app .fx-c { min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:grid; place-items:center; background:var(--accent); color:#fff; font-size:11px; }
#app .fx-tab[aria-selected="true"] .fx-c { background:var(--bg); color:var(--ink); }
#app #sh-filter .fx-panel { padding:var(--s4) var(--s5) var(--s6); -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
#app #sh-filter .sh-f { border-top:0; }
#app .fx-k { margin:var(--s5) 0 var(--s2); font:500 13px var(--body); color:var(--mute); }
#app .fx-hint { margin:var(--s4) 0 0; font:400 13px/1.45 var(--body); color:var(--mute); text-align:center; }
/* "Within" with what "nearby" means at the right of the same line, in the body font */
#app .fx-kr { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); }
#app .fx-near { display:inline-flex; align-items:center; gap:5px; font:400 12.5px var(--body); color:var(--mute); }
#app .fx-near .ic { width:14px; height:14px; align-self:center; }
#app .pan-more { display:flex; align-items:center; gap:6px; min-height:var(--tap); margin:var(--s2) auto 0; color:var(--accent); font-weight:500; } #app .pan-more .ic { width:16px; height:16px; }
#app .fx-discs { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s4) var(--s2); }
#app .fx-fl { display:flex; flex-direction:column; align-items:center; gap:var(--s2); font-size:12.5px; color:var(--ink-2); }
#app .fx-fl u { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--c); color:#fff; transition:box-shadow var(--d1) var(--ease), transform var(--d1) var(--ease), opacity var(--d1); }
#app .fx-fl[data-s="want"] { color:var(--ink); font-weight:500; }
#app .fx-fl[data-s="want"] u { box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--c); }
#app .fx-fl[data-s="avoid"] { color:var(--mute); text-decoration:line-through; }
#app .fx-fl[data-s="avoid"] u { opacity:.4; box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--mute); }
#app .fx-fl:active u { transform:scale(.94); }
#app .fx-chips { display:flex; flex-wrap:wrap; gap:var(--s2); }
#app .fx-chip { display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s4); border-radius:22px; background:var(--card); border:1px solid var(--line); font-size:14px; color:var(--ink-2); transition:background var(--d1), color var(--d1); }
#app .fx-chip[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--bg); }
#app .fx-row { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; border-bottom:1px solid var(--line); font-size:15px; }
#app .fx-sw { width:50px; height:30px; border-radius:15px; background:var(--sand-2); position:relative; flex:none; transition:background var(--d2); }
#app .fx-sw::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform var(--d2) var(--ease); }
#app .fx-row[aria-checked="true"] .fx-sw { background:var(--ink); } #app .fx-row[aria-checked="true"] .fx-sw::after { transform:translateX(20px); }
#app .fx-seg { display:flex; padding:3px; border-radius:22px; background:var(--sand); }
#app .fx-seg button { flex:1; min-height:38px; border-radius:19px; font-size:14px; color:var(--ink-2); }
#app .fx-seg button[aria-pressed="true"] { background:#fff; color:var(--ink); font-weight:500; box-shadow:0 2px 6px -2px rgba(46,31,23,.3); }
@media (prefers-reduced-motion: reduce) { #app .fx-tk.new { animation:none; } #app .fx-sent p { transition:none; } }

/* ---- location picture: a still map of the streets around the cafe, a pin on it and the bean popping up beside it.
   Until the map is drawn (and offline) it's sand with a soft grid. ---- */
#app .loci { position:absolute; inset:0; display:block; overflow:hidden; background-color:var(--sand); background-image:linear-gradient(rgba(179,163,145,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(179,163,145,.2) 1px,transparent 1px); background-size:22px 22px; background-position:center; }
#app .loci .loci-map { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:nfade var(--d3) ease; }
#app .loci-pin { position:absolute; left:50%; top:50%; width:26px; height:32px; margin:-32px 0 0 -13px; filter:drop-shadow(0 3px 3px rgba(46,31,23,.28)); transform-origin:50% 100%; }
#app .loci-pin svg { width:100%; height:100%; display:block; } #app .loci-pin path { fill:var(--ink); } #app .loci-pin circle { fill:var(--card); }
#app .loci.lsm .loci-pin { width:18px; height:22px; margin:-22px 0 0 -9px; }
#app .loci.lbig .loci-pin { width:36px; height:44px; margin:-44px 0 0 -18px; }
#app .loci.in .loci-pin { animation:nmkdrop var(--d3) cubic-bezier(.3,1.4,.5,1) both; }
#app .loci-at { position:absolute; right:6px; bottom:4px; font-size:9px; line-height:1.2; color:var(--mute); background:rgba(251,247,240,.82); padding:1px 5px; border-radius:6px; pointer-events:none; }
#app .loci.lsm .loci-at { font-size:7.5px; right:3px; bottom:3px; padding:0 3px; }
#app .ph.loading .loci > i { opacity:0; }
@keyframes nmkdrop { 0% { opacity:0; transform:translateY(-26px) scale(.85); } 55% { opacity:1; transform:translateY(2px) scale(1.04,.96); } 78% { transform:translateY(-2px); } 100% { opacity:1; transform:none; } }
/* the cafe page's last slide: the location, tap for the full map */
#app .lslide { position:relative; }
#app .locb { position:absolute; inset:0; display:block; width:100%; text-align:left; }
#app .locb-t { position:absolute; left:var(--s4); bottom:var(--s4); display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:var(--r-full); background:rgba(251,247,240,.92); box-shadow:var(--e2); font-size:14px; font-weight:500; }
#app .locb-t .ic { width:17px; height:17px; }
#app .snapbox { position:fixed; left:-10000px; top:0; width:360px; height:270px; pointer-events:none; }

/* ---- cafe page action row (Instagram style): outline icons left, the save bookmark on the right edge ---- */
#app .dacts { display:flex; align-items:center; justify-content:space-between; padding:var(--s2) var(--s3) 0; }
#app .dacts-l { display:flex; gap:var(--s1); }
#app .dact { display:grid !important; place-items:center; width:var(--tap); height:var(--tap); border-radius:50%; color:var(--ink); text-decoration:none; transition:transform var(--d1) var(--ease); }
#app .dact .ic { width:24px; height:24px; } #app .dact:active { transform:scale(.9); }
#app .bkm[aria-pressed="true"] .ic { fill:var(--ink); stroke:var(--ink); }
#app .npop .ic { animation:nsave var(--d3) var(--ease); }
@keyframes nsave { 0% { transform:scale(1); } 35% { transform:scale(1.28); } 100% { transform:scale(1); } }

/* ---- filters grey cafes out instead of hiding them ---- */
#app .crow.dim .ph { opacity:.45; filter:grayscale(1); }
#app .crow.dim .cn { color:var(--mute); }
#app .crow.dim .nt .d { filter:grayscale(1); opacity:.6; }
#app .miss { font-size:var(--t-cap); color:var(--faint); }
#app .others { margin-top:var(--s4); padding:var(--s4) 0 var(--s1); border-top:1px solid var(--line); }
#app .others h2 { font:500 var(--t-body) var(--body); color:var(--mute); letter-spacing:0; }
#app .nomatch { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2); padding:var(--s3) 0 var(--s4); color:var(--mute); }
#app .nomatch p { margin:0; }
#app .meta-b { display:flex; gap:var(--s4); }
#app .meta .mo[aria-pressed="true"] { font-weight:600; text-decoration:none; }
#app .mc-b .mp { align-self:flex-start; }

/* ---- map markers: buttons over the map. Tiers (z-order): highlighted > selected > dots and clusters > greyed > you ---- */
#app .mks { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
#app .mk { position:absolute; left:0; top:0; pointer-events:auto; display:grid !important; place-items:center; transition:opacity var(--d2) ease; }
#app .mk.fade { animation:nfade var(--d2) ease both; }
#app .mk.out { opacity:0; pointer-events:none; }
/* dots: small, light, a cream halo for contrast; a 28 px target */
#app .mk-dot, #app .mk-dim { width:28px; height:28px; margin:-14px 0 0 -14px; }
#app .mk-dot i, #app .mk-dim i { width:13px; height:13px; border-radius:50%; background:var(--c,#9A8A78); box-shadow:0 0 0 2px rgba(251,247,240,.95), 0 1px 3px rgba(46,31,23,.3); }
#app .mk-dim i { background:#B3A391; opacity:.45; filter:grayscale(1); box-shadow:0 0 0 1.5px rgba(251,247,240,.9); }
/* clusters: a numbered bubble, 28 px */
#app .mk-cl, #app .mk-dcl { width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; background:rgba(251,247,240,.97); box-shadow:inset 0 0 0 1.5px rgba(46,31,23,.38), 0 1px 4px rgba(46,31,23,.18); }
#app .mk-cl b, #app .mk-dcl b { font:600 12px var(--body); color:var(--ink); }
#app .mk-dcl { background:rgba(240,230,214,.85); box-shadow:inset 0 0 0 1px rgba(46,31,23,.18); } #app .mk-dcl b { color:var(--mute); font-weight:500; }
/* highlighted: a roast disc with the match (or the bean), a 44 px target; the name below when there's room */
#app .mk-hi, #app .mk-sel { width:44px; height:44px; margin:-22px 0 0 -22px; }
#app .mk-p { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--card); box-shadow:0 0 0 2px var(--card), 0 3px 8px rgba(46,31,23,.28); transition:transform var(--d2) var(--ease), background var(--d2); }
#app .mk-p b { font:600 12.5px/1 var(--body); letter-spacing:-.01em; } #app .mk-p small { font-size:9px; font-weight:500; }
#app .mk-p svg { width:19px; height:19px; } #app .mk-p ellipse { fill:var(--card); } #app .mk-p path { fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; }
#app .mk-sel .mk-p { width:44px; height:44px; background:var(--ink); transform:translateY(-4px); box-shadow:0 0 0 3px var(--card), 0 10px 18px rgba(46,31,23,.32); }
#app .mk-sel .mk-p path { stroke:var(--ink); }
#app .mk-l { position:absolute; top:calc(100% - 2px); left:50%; transform:translateX(-50%); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 11.5px/18px var(--body); color:var(--ink); background:rgba(251,247,240,.92); padding:0 7px; border-radius:var(--r-full); pointer-events:none; }
/* leader lines: one SVG under every marker, so a line is a smooth stroke that never cuts through another pin */
#app .mk-lines { position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; z-index:10; pointer-events:none; }
#app .mk-lines line { stroke:rgba(46,31,23,.42); stroke-width:1.25; stroke-linecap:round; shape-rendering:geometricPrecision; }
#app .mk-lines circle { fill:rgba(46,31,23,.55); stroke:rgba(251,247,240,.95); stroke-width:1.25; }
#app .mk-lines .dim line { stroke:rgba(46,31,23,.22); } #app .mk-lines .dim circle { fill:rgba(46,31,23,.25); }
#app .mk.drop .mk-p { animation:nmkdrop var(--d3) cubic-bezier(.3,1.4,.5,1) backwards; animation-delay:inherit; }
/* you: blue-grey with a white border and a soft accuracy halo, under every cafe */
#app .mme { position:absolute; left:0; top:0; z-index:1; pointer-events:none; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:#5B7083; border:3px solid #fff; box-shadow:0 0 0 9px rgba(91,112,131,.16), 0 1px 3px rgba(0,0,0,.2); }
/* reduced motion: no drops or pops, markers just fade in */
@media (prefers-reduced-motion: reduce) {
  #app .mk.fade, #app .mk.drop { animation:nfade 200ms ease both !important; }
  #app .mk.drop .mk-p, #app .loci.in .loci-pin, #app .npop .ic { animation:none !important; }
}
#app .loci.lbig .loci-at { bottom:auto; top:16px; right:12px; font-size:10px; }