/* Stumblday search v0: the results view (phone full-screen, desktop with a filter rail).
 *
 * Every colour, radius and type choice comes from components the site already renders, measured on
 * production with getComputedStyle (2026-09-24):
 *   - production runs the paint theme (STUMBLDAY_THEME=paint, lib/theme.js): paper #f7f3e7, ink
 *     #332e28, cards #fffdf8 at 20px radius with a soft shadow and no keyline, Gabarito headings;
 *   - with the theme off, the board's own values (BOARD_NEXT_STYLES / board.css): #faf8f5, #1c1b1a,
 *     white cards with a #ece6dc keyline at 16px, Outfit titles, Plus Jakarta Sans text.
 * So every token reads the theme's variable first and falls back to the board value. The JS sets
 * data-sx-theme="paint" when --paper is present, for the few values the theme sets on classes
 * rather than variables (card radius, keyline, shadow).
 *
 * Theme coexistence: lib/theme.js restyles every <button> with !important (pill, surface-low,
 * ink, Gabarito). The FILTER controls (chips, rail options, sort) are the site's own pill instead
 * — .bv-scope (lib/siteNav.js), which the theme never touches: white, a #e6dfd3 keyline, Plus
 * Jakarta 600, #3a352f, #1c1b1a when selected, #b3471d on hover — so opening search from a header
 * pill never switches pill styles mid-flow (fix round 1, design lens). Those few rules carry
 * !important to beat the theme's button rule. Class names avoid the theme's selectors
 * (.card, .pill, .chip, [class*=badge], a[class*=pill|chip], article[class*=card]).
 */

@font-face{font-family:"SX Text";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/plusjakartasans-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"SX Text";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/plusjakartasans-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"SX Title";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/outfit-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"SX Title";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/outfit-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

.sx-view{
  --sx-paper:var(--paper,#faf8f5);
  --sx-card:var(--surface-card,#fff);
  --sx-low:var(--surface-low,#f3efe8);
  --sx-high:var(--surface-high,#ebe5da);
  --sx-ink:var(--ink,#1c1b1a);
  --sx-text:var(--ink,#4a4641);
  --sx-soft:var(--ink-soft,#6b655d);
  --sx-line:#e6dfd3;
  --sx-accent:var(--denim,#b3471d);
  --sx-primary:var(--denim,#1c1b1a);
  --sx-date:#815539;
  --sx-field:#eef5f1;
  --sx-radius:16px;
  --sx-edge:1px solid #ece6dc;
  --sx-shadow:0 1px 3px rgba(28,27,26,.05);
  --sx-opt-bg:#fff;
  --sx-opt-edge:1px solid #e6dfd3;
  --sx-opt-ink:#3a352f;
  --sx-sel:#1c1b1a;
  --sx-go:#2c6a4a;
  --sx-ui:var(--font-ui,"SX Text"),"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sx-textface:"SX Text","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sx-titleface:var(--font-ui,"SX Title"),"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sx-w-title:var(--w-head,700);
  --sx-w-ui:var(--w-ui,600);
  position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;
  background:var(--sx-paper);color:var(--sx-ink);
  font-family:var(--sx-ui);font-size:16px;line-height:1.45;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
.sx-view[data-sx-theme="paint"]{
  --sx-line:var(--outline,rgba(51,46,40,.08));
  --sx-radius:20px;
  --sx-edge:0 solid transparent;
  --sx-shadow:0 2px 12px rgba(51,46,40,.06);
}
.sx-view[hidden],.sx-view [hidden]{display:none!important}
.sx-view *,.sx-view *::before,.sx-view *::after{box-sizing:border-box}
.sx-view:focus{outline:none}
.sx-view a{-webkit-tap-highlight-color:transparent}
.sx-view :focus-visible{outline:2px solid var(--sx-ink);outline-offset:2px}
.sx-ico{display:block;flex:0 0 auto}

/* ---------------------------------------------------------------- top bar */
.sx-top{flex:0 0 auto;position:relative;z-index:2;background:var(--sx-paper);border-bottom:1px solid var(--sx-line)}
.sx-top-in{display:flex;align-items:center;gap:8px;max-width:1084px;margin:0 auto;padding:8px 16px 8px 8px;padding-top:max(8px,env(safe-area-inset-top))}
.sx-form{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;margin:0}
.sx-field{display:flex;align-items:center;gap:10px;width:100%;height:44px;margin:0;padding:0 44px 0 16px;border-radius:999px;background:var(--sx-field);color:#5e605b;cursor:text}
.sx-field:focus-within{box-shadow:inset 0 0 0 1.5px var(--sx-soft)}
.sx-input{flex:1 1 auto;min-width:0;width:100%;height:42px;margin:0;padding:0;border:0;border-radius:0;outline:0;background:transparent;
  font-family:var(--sx-textface);font-size:16px;font-weight:500;line-height:1.2;color:var(--sx-ink);-webkit-appearance:none;appearance:none}
.sx-input::placeholder{color:#5e605b;opacity:1}
.sx-input::-webkit-search-decoration,.sx-input::-webkit-search-cancel-button,.sx-input::-webkit-search-results-button{-webkit-appearance:none;appearance:none;display:none}
.sx-view .sx-input:focus-visible{outline:none}
.sx-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;padding:0;margin:0;
  border:0;border-radius:999px;background:rgba(28,27,26,.08);color:var(--sx-ink);cursor:pointer}
.sx-clear::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.sx-iconbtn{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:999px;
  background:transparent;color:var(--sx-ink);cursor:pointer}
.sx-iconbtn:hover{background:var(--sx-low)}
.sx-view .sx-brandwrap,.sx-view .sx-close{display:none}

/* ---------------------------------------------------------------- buttons (resting look is the theme's when it is on) */
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;margin:0;border:1px solid #e6dfd3;border-radius:999px;
  background:#fff;color:#3a352f;font-family:var(--sx-ui);font-size:14.5px;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap}
.sx-btn:hover{border-color:var(--sx-ink)}
.sx-btn.sx-primary{background:var(--sx-ink);border-color:var(--sx-ink);color:#fff}
.sx-textbtn{position:relative;display:inline-flex;align-items:center;min-height:32px;padding:5px 12px;margin:0;border:0;border-radius:999px;background:var(--sx-low);color:var(--sx-ink);
  font-family:var(--sx-ui);font-size:13.5px;font-weight:600;line-height:1.25;text-align:left;cursor:pointer}
/* A 44px tap area around the 32px pill (founder rule: 44px targets), as the chips do. */
.sx-textbtn::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.sx-textbtn:hover{background:var(--sx-high)}
.sx-link{color:var(--sx-accent);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

/* ---------------------------------------------------------------- scroller + page */
.sx-scroll{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sx-page{max-width:1084px;margin:0 auto;padding:16px 16px calc(48px + env(safe-area-inset-bottom))}
.sx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 4px}
.sx-head-main{min-width:0}
.sx-title{margin:0;font-family:var(--sx-titleface);font-size:21px;font-weight:var(--sx-w-title);line-height:1.2;letter-spacing:-.015em;color:var(--sx-ink);overflow-wrap:anywhere}
.sx-title-in{font-weight:500;color:var(--sx-soft);letter-spacing:0}
.sx-count{margin:3px 0 0;font-size:14px;font-weight:600;color:var(--sx-soft);font-variant-numeric:tabular-nums}
.sx-sortdesk{display:none}

/* ---------------------------------------------------------------- phone filter chips */
.sx-chips{display:flex;flex-wrap:nowrap;gap:8px;margin:12px -16px 6px;padding:2px 16px 8px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.sx-chips::-webkit-scrollbar{display:none}
.sx-chip{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:40px;max-width:78vw;padding:0 12px 0 15px;margin:0;
  border:var(--sx-opt-edge);border-radius:999px;background:var(--sx-opt-bg);color:var(--sx-opt-ink);
  font-family:var(--sx-ui);font-size:14px;font-weight:var(--sx-w-ui);line-height:1;white-space:nowrap;cursor:pointer}
.sx-chip[data-sx-toggle]{padding-right:15px}
.sx-chip::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* line-height 1.3, not the chip's 1: overflow:hidden (for the ellipsis) clipped the g/y tails of
   Plus Jakarta Sans ("Category", "Date night", "Brooklyn"). The chip centres its content, so its
   40px height does not change (fix round 2, mobile lens). */
.sx-chip-t{min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.sx-chip-caret{opacity:.7}
.sx-chip:disabled{opacity:.4;cursor:default}
.sx-n{font-weight:500;opacity:.75;font-variant-numeric:tabular-nums;font-size:.92em}
.is-on>.sx-n{opacity:.85}

/* ---------------------------------------------------------------- results */
.sx-results{min-width:0}
.sx-view[data-sx-state="refreshing"] .sx-results{opacity:.5;transition:opacity .15s ease}
.sx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sx-item{margin:0;padding:0}
.sx-res{display:grid;grid-template-columns:104px minmax(0,1fr);min-height:108px;overflow:hidden;border:var(--sx-edge);border-radius:var(--sx-radius);
  background:var(--sx-card);box-shadow:var(--sx-shadow);color:var(--sx-ink);text-decoration:none;
  transition:box-shadow .15s ease,transform .15s ease}
.sx-res:hover{box-shadow:0 8px 22px rgba(51,46,40,.10)}
.sx-thumb{position:relative;display:block;min-height:100%;background:var(--sx-low);color:var(--sx-soft);overflow:hidden}
.sx-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sx-thumb-none{display:grid;place-items:center}
.sx-body{display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 14px 12px 13px;font-family:var(--sx-textface)}
.sx-when{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:800;line-height:1.3;color:var(--sx-date)}
.sx-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font-family:var(--sx-titleface);font-size:17px;
  font-weight:var(--sx-w-title);line-height:1.18;letter-spacing:-.01em;color:var(--sx-ink)}
.sx-where{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;line-height:1.35;color:var(--sx-soft)}
.sx-foot{display:flex;align-items:center;gap:8px;min-width:0;margin-top:3px}
.sx-price{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 9px;border-radius:999px;background:#f3efe8;color:#5a5249;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;line-height:1.35;text-transform:uppercase}
.sx-price-free{background:#e3f1e8;color:#2c6a4a}
.sx-more{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--sx-soft);white-space:nowrap}

/* band headings and the collapsed "Also running" group */
.sx-band{margin:0 0 20px}
.sx-band-h{margin:4px 2px 10px;font-family:var(--sx-ui);font-size:15px;font-weight:700;line-height:1.35;color:var(--sx-ink);overflow-wrap:anywhere}
.sx-band-also>.sx-list{margin-top:12px}
.sx-band-sum{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px 0 16px;border-radius:var(--sx-radius);background:var(--sx-low);
  font-size:15px;font-weight:700;color:var(--sx-ink);cursor:pointer;list-style:none;user-select:none}
.sx-band-sum::-webkit-details-marker{display:none}
.sx-band-sum::marker{content:""}
.sx-band-n{font-weight:600;color:inherit;opacity:.75;font-variant-numeric:tabular-nums}
.sx-band-caret{margin-left:auto;transition:transform .15s ease}
.sx-band-also[open] .sx-band-caret{transform:rotate(180deg)}

/* notes, the facet link row, Add this event */
.sx-note{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--sx-text)}
.sx-note strong{color:var(--sx-ink)}
.sx-note .sx-textbtn{margin-left:2px;vertical-align:baseline}
.sx-facet{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:13px 16px;border:var(--sx-edge);border-radius:var(--sx-radius);background:var(--sx-card);
  box-shadow:var(--sx-shadow);color:var(--sx-ink);text-decoration:none}
.sx-facet-k{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-accent)}
.sx-facet-l{flex:1 1 auto;min-width:0;font-size:15.5px;font-weight:700;line-height:1.3}
.sx-facet-arrow{color:var(--sx-accent)}
.sx-facet:hover .sx-facet-l{text-decoration:underline;text-underline-offset:3px}
.sx-add{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin:24px 0 0;padding:16px 2px 0;border-top:1px solid var(--sx-line)}
.sx-add-q{font-size:15px;color:var(--sx-soft)}
/* "Add this event" wears the hub's own green submit-an-event identity (.bv-organizer-entry). */
.sx-addlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--sx-go);font-size:15px;font-weight:700;text-decoration:none}
.sx-addlink:hover span{text-decoration:underline;text-underline-offset:3px}
.sx-add-prominent{flex-direction:column;align-items:stretch;gap:14px;margin:0 0 20px;padding:18px;border:1px solid #cbd9c8;border-radius:var(--sx-radius);
  background:linear-gradient(135deg,#f1f7e9,#fff);box-shadow:0 2px 8px rgba(44,106,74,.08)}
.sx-add-h{margin:0;font-size:16.5px;font-weight:700;line-height:1.3;color:#25452f}
.sx-add-p{margin:3px 0 0;font-size:14.5px;line-height:1.45;color:var(--sx-soft)}
.sx-addbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:flex-start;min-height:44px;padding:0 20px;border-radius:999px;
  background:var(--sx-go);color:#fff;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.sx-addbtn:hover{filter:brightness(1.08)}

/* idle, empty, busy */
.sx-idle{padding:20px 2px}
.sx-idle-lead{margin:0;font-size:17px;font-weight:600;line-height:1.4;color:var(--sx-ink)}
.sx-idle-sub{margin:4px 0 0;font-size:15px;color:var(--sx-soft)}
.sx-msg,.sx-empty{padding:12px 2px 8px}
.sx-msg-h{margin:0 0 6px;font-family:var(--sx-titleface);font-size:20px;font-weight:var(--sx-w-title);line-height:1.25;color:var(--sx-ink);overflow-wrap:anywhere}
.sx-msg-p{margin:0 0 16px;font-size:16px;line-height:1.5;color:var(--sx-text)}
.sx-msg-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.sx-msg-links{margin:4px 0 8px;font-size:15px;line-height:1.6;color:var(--sx-soft)}
.sx-msg-actions .sx-btn{white-space:normal;text-align:center}
.sx-empty .sx-add-prominent{margin-top:4px}

/* loading skeleton: quiet blocks, a slow fade only when motion is welcome */
.sx-skel{pointer-events:none}
.sx-skel .sx-thumb{min-height:108px}
.sx-skel-line{display:block;height:11px;border-radius:6px;background:var(--sx-low);margin:4px 0}
.sx-skel-a{width:38%}.sx-skel-b{width:82%;height:15px;margin-top:8px}.sx-skel-c{width:56%}
@media (prefers-reduced-motion:no-preference){
  .sx-skel-list{animation:sx-fade 1.4s ease-in-out infinite alternate}
  @keyframes sx-fade{from{opacity:1}to{opacity:.55}}
}

/* ---------------------------------------------------------------- filter options (rail + picker rows) */
.sx-rail{display:none}
.sx-group{margin:0 0 20px;padding:0;border:0;min-width:0}
.sx-group-h{padding:0;margin:0 0 9px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-soft)}
.sx-opts{display:flex;flex-wrap:wrap;gap:7px}
.sx-opt{position:relative;display:inline-flex;align-items:baseline;gap:6px;max-width:100%;min-height:34px;padding:7px 13px;border:var(--sx-opt-edge);border-radius:18px;
  background:var(--sx-opt-bg);color:var(--sx-opt-ink);font-family:var(--sx-textface);font-size:13.5px;font-weight:600;line-height:1.3;cursor:pointer;user-select:none}
.sx-opt.is-off{opacity:.4;cursor:default}
.sx-view .sx-opt.is-on{background:var(--sx-sel);border-color:var(--sx-sel);color:#fff}
.sx-opt:has(input:focus-visible){outline:2px solid var(--sx-ink);outline-offset:2px}
.sx-clearall{margin-top:2px}

.sx-scrim{position:fixed;inset:0;z-index:3;background:rgba(28,27,26,.34)}
.sx-picker{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;flex-direction:column;max-height:74vh;max-height:74dvh;
  background:var(--sx-card);border-radius:20px 20px 0 0;box-shadow:0 -6px 24px rgba(40,30,20,.18);padding:6px 0 calc(12px + env(safe-area-inset-bottom))}
.sx-picker-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px 4px 20px}
.sx-picker-h{margin:0;font-family:var(--sx-titleface);font-size:18px;font-weight:var(--sx-w-title);color:var(--sx-ink)}
.sx-picker-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 10px 6px}
.sx-prows{display:flex;flex-direction:column;gap:2px}
.sx-prow{position:relative;display:flex;align-items:center;gap:10px;min-height:50px;padding:6px 12px;border-radius:14px;color:var(--sx-ink);
  font-size:16px;font-weight:500;line-height:1.3;cursor:pointer;user-select:none}
.sx-prow-t{flex:1 1 auto;min-width:0}
.sx-prow .sx-n{flex:0 0 auto;font-size:14px}
.sx-prow-check{visibility:hidden;color:var(--sx-ink)}
/* The CHECKED radio drives the look, not a render-time class: arrow keys move the choice while
   the sheet stays open, and the check must follow it. */
.sx-prow:has(input:checked){background:var(--sx-low);font-weight:700}
.sx-prow:has(input:checked) .sx-prow-check{visibility:visible}
.sx-prow.is-off{opacity:.4;cursor:default}
.sx-prow:has(input:focus-visible){outline:2px solid var(--sx-ink);outline-offset:-2px}

.sx-vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* ---------------------------------------------------------------- desktop */
@media (min-width:721px){
  .sx-top-in{gap:20px;padding:10px 24px}
  .sx-back{display:none}
  .sx-view .sx-brandwrap{display:flex;align-items:center;flex:0 0 auto}
  .sx-brand{font-family:"Noto Serif",Georgia,serif;font-size:1.35rem;font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--sx-ink);text-decoration:none}
  .sx-form{max-width:640px}
  .sx-view .sx-close{display:inline-flex;margin-left:auto}
  .sx-page{padding:26px 24px 64px}
  .sx-title{font-size:26px}
  .sx-res{grid-template-columns:140px minmax(0,1fr);min-height:124px}
  .sx-skel .sx-thumb{min-height:124px}
  .sx-body{padding:14px 18px 14px 16px;gap:4px}
  .sx-name{font-size:19px}
  .sx-add-prominent{flex-direction:row;align-items:center;justify-content:space-between}
  .sx-addbtn{align-self:center}
  .sx-picker{left:50%;right:auto;bottom:24px;width:min(460px,calc(100vw - 32px));transform:translateX(-50%);border-radius:20px;max-height:min(70vh,640px)}
}
@media (min-width:900px){
  .sx-chips{display:none!important}
  .sx-head{margin-bottom:22px}
  .sx-sortdesk{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .sx-sort-k{margin-right:4px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-soft)}
  .sx-seg{min-height:34px;padding:0 14px;margin:0;border:var(--sx-opt-edge);border-radius:999px;background:var(--sx-opt-bg);color:var(--sx-opt-ink);
    font-family:var(--sx-ui);font-size:13.5px;font-weight:var(--sx-w-ui);cursor:pointer}

  .sx-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:40px;align-items:start}
  .sx-rail{display:block;position:sticky;top:0;max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 16px 2px}
  .sx-rail[hidden]{display:none!important}
  /* Results always sit in the second column, so the list does not jump sideways between the
     loading state (no rail yet) and the results (rail filled). */
  .sx-results{grid-column:2;max-width:760px}
  /* ...but a message with no rail beside it (empty, busy, idle) spans the page, under the title. */
  .sx-layout:has(>.sx-rail[hidden])>.sx-results:has(>.sx-empty,>.sx-msg,>.sx-idle){grid-column:1/-1}
}
@media (min-width:900px) and (max-width:1060px){
  .sx-layout{grid-template-columns:208px minmax(0,1fr);gap:28px}
}
/* Touch screens wide enough for the rail (tablets): the rail, the sort and the wordmark get the
   same 44px targets the phone view has. */
@media (min-width:721px) and (pointer:coarse){
  .sx-opt,.sx-view .sx-sortdesk .sx-seg{min-height:44px;display:inline-flex;align-items:center}
  .sx-view .sx-brand{display:inline-flex;align-items:center;min-height:44px;height:44px}
}

/* ---------------------------------------------------------------- filter pills = the site's .bv-scope
   (!important only where lib/theme.js's button{...!important} would otherwise win). */
.sx-view .sx-chip,.sx-view .sx-seg{font-family:var(--sx-textface)!important;font-weight:600!important}
.sx-view .sx-chips .sx-chip:not(.is-on),.sx-view .sx-sortdesk .sx-seg:not(.is-on){background:#fff!important;border:1px solid #e6dfd3!important;color:#3a352f!important}
.sx-view .sx-chips .sx-chip.is-on,.sx-view .sx-sortdesk .sx-seg.is-on{background:#1c1b1a!important;border:1px solid #1c1b1a!important;color:#fff!important}
.sx-view .sx-chips .sx-chip:disabled{background:#f5f2ec!important;color:#a59c8e!important}
/* Hover only where there is hover: a tapped chip must not keep an orange sticky hover. */
@media (hover:hover){
  .sx-view .sx-chips .sx-chip:not(.is-on):not(:disabled):hover,.sx-view .sx-sortdesk .sx-seg:not(.is-on):hover{border-color:#b3471d!important;color:#b3471d!important}
  .sx-view .sx-opt:not(.is-on):not(.is-off):hover{border-color:#b3471d;color:#b3471d}
  .sx-prow:hover{background:var(--sx-low)}
  .sx-prow.is-off:hover{background:transparent}
}

/* ---------------------------------------------------------------- category colour code (paint only)
   The site colour-codes its CATEGORY filter row under the paint theme (lib/theme.js "CATEGORY COLOUR
   CODING": a tint at rest; place and time rows stay neutral), so the search rail and the phone
   picker do too (fix round 2, design lens). Selected stays #1c1b1a: white on the saturated hues
   would be ~3:1. .sx-opt and .sx-prow are labels, so the theme's button rule never reaches them. */
.sx-view[data-sx-theme="paint"] :is(.sx-opt,.sx-prow):has(>input[data-sx-filter="cat"][value="free"]){--sx-cat-t:var(--c-free-t);--sx-cat:var(--c-free)}
.sx-view[data-sx-theme="paint"] :is(.sx-opt,.sx-prow):has(>input[data-sx-filter="cat"][value="art-exhibitions"]){--sx-cat-t:var(--c-art-t);--sx-cat:var(--c-art)}
.sx-view[data-sx-theme="paint"] :is(.sx-opt,.sx-prow):has(>input[data-sx-filter="cat"][value="live-music"]){--sx-cat-t:var(--c-music-t);--sx-cat:var(--c-music)}
.sx-view[data-sx-theme="paint"] :is(.sx-opt,.sx-prow):has(>input[data-sx-filter="cat"][value="markets"]){--sx-cat-t:var(--c-markets-t);--sx-cat:var(--c-markets)}
.sx-view[data-sx-theme="paint"] :is(.sx-opt,.sx-prow):has(>input[data-sx-filter="cat"][value="outdoors"]){--sx-cat-t:var(--c-outdoors-t);--sx-cat:var(--c-outdoors)}
.sx-view[data-sx-theme="paint"] :is(.sx-opt,.sx-prow):has(>input[data-sx-filter="cat"][value="food"]){--sx-cat-t:var(--c-food-t);--sx-cat:var(--c-food)}
.sx-view[data-sx-theme="paint"] :is(.sx-opt,.sx-prow):has(>input[data-sx-filter="cat"][value="date-night"]){--sx-cat-t:var(--c-date-t);--sx-cat:var(--c-date)}
.sx-view[data-sx-theme="paint"] .sx-opt:not(.is-on):has(>input[data-sx-filter="cat"]:not([value=""])){background:var(--sx-cat-t,var(--sx-opt-bg))}
.sx-view[data-sx-theme="paint"] .sx-prow:has(>input[data-sx-filter="cat"]) .sx-prow-t::before{content:"";display:inline-block;width:10px;height:10px;margin-right:12px;border-radius:50%;background:var(--sx-cat,transparent);vertical-align:0}