/* Shared, asset-local presentation. Product identity is selected on <html>. */
:root {
  color-scheme: dark;
  --bg: #101419;
  --surface: #181e25;
  --surface-raised: #202731;
  --text: #f1eee8;
  --muted: #a2abb6;
  --subtle: #818d9c;
  --border: #303943;
  --accent: #f3b66a;
  --accent-soft: #30271e;
  --on-accent: #191611;
  --danger: #ffb4ad;
  --serif: Georgia, "Times New Roman", serif;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-synthesis: none;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
html[data-theme="traveller"] { --accent: #f3b66a; --accent-soft: #30271e; }
html[data-theme="setlister"] { --bg: #14121b; --surface: #1c1b27; --surface-raised: #252331; --border: #363343; --muted: #aba8bd; --subtle: #9390a8; --accent: #b4a2ff; --accent-soft: #282339; --on-accent: #181322; }

/* ---------------------------------------------------------------------------
   Light appearance.
   Dark stays the default, so a reader who has expressed no preference gets the
   design as it was drawn. Light is applied when the system asks for it, and an
   explicit choice on <html data-appearance> overrides the system either way.
   Everything is expressed as the same custom properties, so components need no
   light-specific rules and cannot drift between the two.
   Accents are darkened rather than reused: the dark palette's amber and
   lavender are legible on near-black and far too pale on near-white.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  html:not([data-appearance="dark"]) {
    color-scheme: light;
    --bg: #f7f5f1;
    --surface: #ffffff;
    --surface-raised: #efece6;
    --text: #1b1f24;
    --muted: #55606c;
    --subtle: #5f6a76;
    --border: #d9d4ca;
    --accent: #9a6314;
    --accent-soft: #f6ecdc;
    --on-accent: #ffffff;
    --danger: #a3271c;
  }

  html[data-theme="setlister"]:not([data-appearance="dark"]) {
    --bg: #f6f4fa;
    --surface: #ffffff;
    --surface-raised: #eeeaf6;
    --border: #d8d2e6;
    --muted: #57506b;
    --subtle: #625a78;
    --accent: #5b3fbf;
    --accent-soft: #eee9fb;
    --on-accent: #ffffff;
  }
}

html[data-appearance="light"] {
  color-scheme: light;
  --bg: #f7f5f1;
  --surface: #ffffff;
  --surface-raised: #efece6;
  --text: #1b1f24;
  --muted: #55606c;
  --subtle: #5f6a76;
  --border: #d9d4ca;
  --accent: #9a6314;
  --accent-soft: #f6ecdc;
  --on-accent: #ffffff;
  --danger: #a3271c;
}

html[data-theme="setlister"][data-appearance="light"] {
  --bg: #f6f4fa;
  --surface: #ffffff;
  --surface-raised: #eeeaf6;
  --border: #d8d2e6;
  --muted: #57506b;
  --subtle: #625a78;
  --accent: #5b3fbf;
  --accent-soft: #eee9fb;
  --on-accent: #ffffff;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 0; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.16; text-wrap: balance; }
p, h1, h2, h3, a, button, dd { overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, input[type="submit"], summary { cursor: pointer; }
button { color: inherit; }
img { display: block; max-width: 100%; }
form { margin: 0; min-width: 0; }
button, input, select, textarea { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: var(--accent); color: var(--on-accent); }
.hidden { display: none !important; }
.ui-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 18px; background: var(--accent); color: var(--on-accent); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); }
.site-header-inner, .site-main, .site-footer { width: min(100% - 32px, 1200px); margin-inline: auto; }
.site-header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-size: 25px; font-weight: 800; letter-spacing: -1.2px; white-space: nowrap; }
.brand-symbol { color: var(--accent); margin-right: 10px; display: flex; }
.wordmark-dot { color: var(--accent); }
.header-edition { display: none; font-size: 10px; line-height: 1.5; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.site-nav { position: fixed; bottom: 0; inset-inline: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); box-shadow: 0 -8px 30px #0003; }
.site-nav a, .site-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 56px; padding: 6px 4px; background: transparent; border: 0; border-radius: 5px; color: var(--muted); font-size: 11px; font-weight: 650; text-align: center; line-height: 1.4; }
.site-nav a[aria-current="page"], .site-nav .nav-join { color: var(--accent); }
.site-nav a[aria-current="page"] { background: var(--accent-soft); }
.site-nav form { display: flex; }
.site-main { min-height: 65vh; }
.landing-hero { padding: 52px 0 40px; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; line-height: 1.6; }
.hero-copy > .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.accent-rule { width: 28px; height: 1px; background: var(--accent); flex-shrink: 0; }
.landing-hero h1 { max-width: 830px; font-size: clamp(39px, 6.4vw, 80px); font-weight: 550; letter-spacing: -.055em; line-height: 1.05; }
.landing-hero h1 em { display: block; font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; color: var(--accent); margin-top: 5px; }
.hero-intro { color: var(--muted); max-width: 570px; margin-top: 24px; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.8; }
.hero-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 28px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid transparent; border-radius: 5px; padding: 12px 20px; font-size: 14px; font-weight: 750; line-height: 1.5; transition: background-color .16s, transform .16s; }
.button-primary, .auth-submit { background: var(--accent); color: var(--on-accent); }
.privacy-note { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.hero-aside { display: none; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 23px; }
.section-heading > div { min-width: 0; }
.section-heading .eyebrow { margin-bottom: 8px; }
.section-heading h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.025em; }
.badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 4px; padding: 5px 9px; color: var(--muted); font-size: 10px; letter-spacing: .5px; }
.feature-section, .next-section { padding: 30px 0; border-top: 1px solid var(--border); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.feature-card { padding: 24px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.feature-icon { color: var(--accent); }
.feature-status { float: right; color: var(--accent); font-weight: 650; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; }
.feature-status-planned { color: var(--muted); font-weight: 400; }
.feature-card h3 { margin-top: 22px; margin-bottom: 10px; font-size: 18px; }
.feature-card > p:last-child { font-size: 14px; color: var(--muted); }
.foundation-note { display: flex; align-items: flex-start; gap: 12px; padding: 18px 0 35px; color: var(--muted); font-size: 12px; }
.foundation-note strong { color: var(--text); font-weight: 550; }
.site-footer { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); padding-block: 25px; color: var(--subtle); font-size: 11px; }
.site-footer > span:last-child { display: flex; align-items: center; gap: 7px; }
.flash { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 5px; padding: 14px 18px; margin-block: 20px; background: var(--surface); font-size: 14px; }
.flash .ui-icon { margin-top: 2px; color: var(--accent); }
.flash-error { border-left-color: var(--danger); color: var(--danger); }
.flash-error .ui-icon { color: var(--danger); }
.profile-page { padding-block: 35px 48px; }
.profile-header { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px 16px; align-items: center; margin-bottom: 32px; }
.account-avatar { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--border); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--serif); font-size: 30px; flex-shrink: 0; }
.account-copy { flex: 1; min-width: 0; }
.account-copy .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
.account-copy h1 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin-block: 5px; }
.account-email { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.privacy-badge { grid-column: 2; justify-self: start; color: var(--accent); }
.profile-surface { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px 18px; }
.profile-surface > h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 4vw, 40px); margin-block: 12px 18px; }
.profile-surface > p:not(.eyebrow) { color: var(--muted); max-width: 560px; font-size: 14px; }
.onboarding .button { margin-block: 24px 16px; }
.surface-icon { display: inline-flex; color: var(--accent); margin-bottom: 24px; }
.collection-empty { display: flex; align-items: center; flex-direction: column; text-align: center; padding: 28px 0 38px; }
.empty-art { width: 88px; height: 108px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 5px; color: var(--accent); background: linear-gradient(145deg, var(--accent-soft), var(--bg)); box-shadow: 7px 7px 0 var(--surface-raised); margin-bottom: 28px; transform: rotate(-5deg); }
.collection-empty h3 { font-family: var(--serif); font-weight: 400; font-size: 25px; }
.collection-empty p { max-width: 480px; color: var(--muted); margin-top: 12px; font-size: 14px; }
.collection-empty .empty-note { font-size: 12px; }
.profile-details { border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.profile-details summary { min-height: 44px; padding-block: 12px; color: var(--text); }
.profile-details dl { margin-bottom: 0; }
.profile-details dt { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.profile-details dd { margin: 4px 0 16px; color: var(--text); }
.profile-roadmap { margin-top: 30px; }
.profile-roadmap h2 { font-size: 17px; }
.profile-roadmap ul { list-style: none; margin: 16px 0; padding: 0; }
.profile-roadmap li { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); padding-block: 14px; font-size: 12px; }
.profile-roadmap .ui-icon { color: var(--accent); }
.status-label { margin-left: auto; color: var(--accent); font-size: 10px; }
.status-planned, .profile-roadmap > p { color: var(--muted); }
.profile-roadmap > p { font-size: 12px; }
/* AshAuthenticationPhoenix overrides; hidden is required for strategy switching. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.personal-home { padding-block: 40px 56px; }
.home-heading { display: flex; flex-direction: column; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.home-heading h1 { font-size: clamp(38px, 5vw, 64px); letter-spacing: -.04em; margin-block: 14px 18px; }
.home-heading h1 em { font-family: var(--serif); color: var(--accent); font-weight: 400; }
.home-heading > div > p:last-child { color: var(--muted); max-width: 35rem; }
.home-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.home-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--accent); font-size: 14px; }
.home-workspace { display: grid; gap: 32px; padding-top: 30px; }
.home-location-panel { min-width: 0; align-self: start; padding: 24px 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.home-location-panel h2 { font-family: var(--serif); font-weight: 400; font-size: 27px; margin-block: 16px 12px; }
.home-location-panel > p { color: var(--muted); font-size: 14px; }
#home-geolocation .button { width: 100%; margin-top: 20px; }
#home-geolocation [data-location-status] { color: var(--muted); font-size: 12px; margin-top: 10px; }
.home-location-panel .home-privacy { font-size: 12px; margin-block: 18px; }
.home-location-panel .home-location-error { color: var(--danger); margin-block: 16px; }
#saved-origin-form { border-top: 1px solid var(--border); padding-top: 20px; }
#saved-origin-form label { display: block; font-size: 13px; margin-bottom: 8px; }
#saved-origin-form select { display: block; width: 100%; min-height: 48px; min-width: 0; padding: 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; font-size: 16px; }
.home-secondary { width: 100%; margin-top: 12px; border-color: var(--border); background: var(--surface-raised); font-size: 13px; }
.home-location-panel .home-coverage { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 22px; font-size: 12px; }
.home-location-panel > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 13px; }
.home-nearby { min-width: 0; }
.home-origin { padding: 16px 18px; border-left: 2px solid var(--accent); background: var(--surface); margin-bottom: 18px; font-size: 13px; }
.home-origin p + p { color: var(--muted); margin-top: 5px; }
.home-nearby-empty { display: grid; justify-items: center; text-align: center; padding: 52px 22px; border: 1px dashed var(--border); border-radius: 8px; }
.home-nearby-empty > .ui-icon { color: var(--accent); margin-bottom: 20px; }
.home-nearby-empty h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; }
.home-nearby-empty p { color: var(--muted); font-size: 14px; max-width: 29rem; margin-top: 12px; }
.home-distance-note { color: var(--muted); font-size: 12px; margin-block: 16px; }
.nearby-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.nearby-card { display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.nearby-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--accent); gap: 12px; }
.nearby-distance { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.nearby-card h3 { font-size: 20px; line-height: 1.3; margin-block: 18px 12px; }
.nearby-card h3 a, .resolve-card h3 a { color: inherit; text-decoration: none; }
.nearby-card h3 a:hover, .nearby-card h3 a:focus-visible, .resolve-card h3 a:hover, .resolve-card h3 a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.nearby-collections { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 18px 0; }
.nearby-collections li { font-size: 10px; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 3px 7px; }
/* Nearby results use the saved-place card's pieces (PlaceComponents), with the
   distance on top. */
.nearby-card { gap: 8px; }
.nearby-card .place-preview { margin-bottom: 4px; }
.nearby-card .place-preview-credit { margin: -6px 0 0; }
.nearby-card .place-card-head { margin-top: 4px; }
.nearby-card .place-card-head h3 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.home-nearby > .map-attribution { margin-top: 20px; }
.home-join { margin-block: 48px; }
.home-join .button { margin-top: 24px; }
@media (min-width: 600px) { .nearby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .home-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .home-links { flex-direction: column; gap: 0; }
  .home-workspace { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
  .home-location-panel { padding: 26px 22px; }
}
/* Mobile-first home: find near you, matching your requirements. */
.near-home { padding-block: 20px 48px; }
.near-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.near-heading h1 { font-size: clamp(26px, 6vw, 40px); letter-spacing: -.03em; margin-top: 4px; }
/* Inline by default: on a wide layout a floating button would sit on top of the
   site header. `relative` anchors the active-filter badge. */
.near-locate .button { width: 100%; }
.near-locate [data-location-status] { color: var(--muted); font-size: 12px; margin-top: 8px; }
.near-saved-origin { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 14px; }
.near-or { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.near-saved-origin select { min-width: 0; min-height: 44px; padding: 8px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 16px; }
.near-error { color: var(--danger); font-size: 13px; margin-top: 12px; }
.near-origin-active { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-top: 14px; padding: 12px 14px; border-left: 2px solid var(--accent); background: var(--bg); font-size: 13px; border-radius: 0 6px 6px 0; }
.near-origin-label { color: var(--text); }
.near-hint { color: var(--muted); font-size: 12px; }
.near-hint a { color: var(--accent); }
.coffee-presets { display: grid; gap: 10px; margin-top: 14px; }
.coffee-preset { display: grid; gap: 3px; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); text-align: left; cursor: pointer; }
.coffee-preset span { font-weight: 700; }
.coffee-preset small { color: var(--muted); font-size: 12px; }
.coffee-preset:hover { border-color: var(--accent); }
.near-filter-actions { display: grid; gap: 8px; }
/* Pinned under the sheet's scrolling body: always in view. */
.near-sheet-foot { flex-shrink: 0; padding: 14px calc(20px + env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) 20px; border-top: 1px solid var(--border); background: var(--surface); box-shadow: 0 -10px 24px #0002; }
.near-sheet-foot .near-hint { margin: 0; text-align: center; }
.near-filter-actions .button { width: 100%; }
.preset-manage { margin-top: 12px; }
.preset-manage a { color: var(--accent); }

/* Saved searches: a question about your own catalog, stored and reusable. */
.presets-page { padding-block: 20px 48px; }
.presets-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.presets-head h1 { font-size: clamp(26px, 5vw, 38px); letter-spacing: -.03em; margin-block: 4px 8px; }
.presets-head .near-hint { max-width: 34rem; }
.presets-layout { display: grid; gap: 28px; align-items: start; }
.presets-list h2, .presets-editor h2 { font-size: 16px; margin-bottom: 12px; }
.preset-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.preset-card h3 { font-size: 15px; }
.preset-description { color: var(--muted); font-size: 13px; margin-top: 3px; }
.preset-summary { color: var(--text); font-size: 12px; margin-top: 7px; opacity: .8; }
.preset-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
/* Scrolled to when editing starts, so it keeps a little breathing room above. */
.presets-editor { scroll-margin-top: 5px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.presets-editor .admin-field { margin-bottom: 14px; }
.presets-editor .admin-field label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text); }
.presets-editor input[type="text"] { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 16px; }
.preset-tags { border: 0; padding: 0; margin: 18px 0 0; }
.preset-tags legend { font-size: 13px; color: var(--text); margin-bottom: 4px; }
@media (min-width: 860px) {
  .presets-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 36px; }
}
.near-results { margin-top: 20px; }
/* Phones (the tab-bar layout): the page title costs a screen's worth of room
   above the results, so it is kept for screen readers only (as .sr-only). */
@media (max-width: 799px) {
  .near-home { padding-top: 8px; }
  .near-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .near-results { margin-top: 0; }
}
/* The results bar stays in view while scrolling the cards, carrying the one
   control that changes them. */
.near-results-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-block: 10px; background: var(--bg); border-bottom: 1px solid var(--border); }
.near-results-title { flex: 1; min-width: 0; }
.near-results-tools { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.near-results-head h2 { font-size: 20px; }
.near-results-origin { margin-top: 2px; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.near-filter-button { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.near-filter-button .ui-icon { color: var(--accent); }
.near-filter-button:hover, .near-filter-button[aria-expanded="true"] { border-color: var(--accent); }
.near-filter-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Curated places among the member's own: a pill that applies at once. */
.curated-toggle { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.curated-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.curated-toggle label { font-size: 14px; white-space: nowrap; cursor: pointer; }
.curated-toggle:has(input:checked) { border-color: var(--accent); }
.curated-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.curated-short { display: none; }
/* Not yours yet: a dashed edge tells them apart from saved places. */
.nearby-grid .discover-card { border-style: dashed; }
.near-guides { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 8px; }
.near-guides legend { padding: 0 4px; color: var(--muted); font-size: 13px; }
/* ── The shared filter panel (PlaceFilters) ─────────────────────────────────
   One form on Nearby's sheet, the map's sidebar and the saved-search editor.
   Laid out by the width of where it sits (a container query), not the screen:
   label-beside-control rows when narrow, columns when wide. */
.place-filters { container: pf / inline-size; display: grid; gap: 14px; margin-top: 12px; min-width: 0; }
.pf-switches { display: grid; gap: 8px; align-items: start; }
.pf-card { min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.pf-card:has(input[role="switch"]:checked) { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.pf-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 10px 12px 10px 14px; cursor: pointer; }
.pf-switch-text { display: grid; gap: 2px; min-width: 0; }
.pf-switch-title { font-size: 15px; font-weight: 650; line-height: 1.25; }
.pf-switch-hint { color: var(--muted); font-size: 12px; line-height: 1.35; }
.pf-switch input[role="switch"] { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 44px; height: 26px; margin: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-raised); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.pf-switch input[role="switch"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .15s ease, background-color .15s ease; }
.pf-switch input[role="switch"]:checked { border-color: var(--accent); background: var(--accent); }
.pf-switch input[role="switch"]:checked::before { transform: translateX(18px); background: var(--on-accent); }
.pf-switch input[role="switch"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-guides { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 10px 12px 12px; border: 0; border-top: 1px solid var(--border); }
.pf-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px 0 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; cursor: pointer; }
.pf-pill input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.pf-pill:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pf-pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-selects { display: grid; gap: 8px; }
.pf-field { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.pf-field label { color: var(--muted); font-size: 13px; }
/* The browser's own arrow sits flush against the edge and ignores padding, so
   the selects draw their own chevron (two gradients, in the theme's colour)
   with room to its right. */
.pf-field select { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; min-height: 44px; padding: 8px 38px 8px 10px; border: 1px solid var(--border); border-radius: 8px; background-color: var(--bg); background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; color: var(--text); font: inherit; font-size: 16px; text-overflow: ellipsis; }
.pf-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pf-tags { display: grid; gap: 8px; min-width: 0; padding-top: 14px; border-top: 1px solid var(--border); }
.pf-tags-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.pf-label { font-size: 14px; font-weight: 650; }
.pf-hint { margin: 0; color: var(--muted); font-size: 12px; }
.pf-segmented { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 2px 2px 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
.pf-segmented-label { margin-right: 4px; color: var(--muted); font-size: 12px; }
.pf-segmented label { position: relative; display: inline-flex; }
.pf-segmented input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pf-segmented span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; color: var(--muted); font-size: 13px; }
.pf-segmented input:checked + span { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.pf-segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.pf-tag-group { min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.pf-tag-group summary { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; list-style: none; cursor: pointer; }
.pf-tag-group summary::-webkit-details-marker { display: none; }
.pf-tag-group summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: -3px 2px 0 auto; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease; }
.pf-tag-group[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.pf-tag-group summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.pf-tag-group-title { flex: 0 0 auto; font-size: 14px; font-weight: 600; }
.pf-count { flex: 0 0 auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
.pf-picked { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
/* Open, the chips show what is in use; the list is for a folded group. */
.pf-tag-group[open] .pf-picked { visibility: hidden; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 12px 12px; list-style: none; }
.pf-chips li { min-width: 0; }
.pf-chips .tag-chip { min-height: 36px; gap: 6px; padding: 5px 12px; background: var(--surface); font-size: 13px; }
.pf-chips .tag-chip-mark { width: auto; }
@media (pointer: coarse) { .pf-chips .tag-chip { min-height: 40px; } }
.pf-foot { display: flex; justify-content: flex-end; margin-top: -4px; }
.pf-reset { min-height: 40px; padding: 0 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Wide (the saved-search editor, wide sheets): switches side by side, the
   selects in a row with their labels on top. */
@container pf (min-width: 540px) {
  .pf-switches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-selects { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .pf-field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* Very narrow (a small phone's sheet): labels above their controls. */
@container pf (max-width: 300px) {
  .pf-field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* A page's own extra filter beside the panel (the map's "Show at most"). */
.pf-extra { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.presets-filters-title { margin: 20px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
#preset-filter-summary { margin: 12px 0 0; }
.near-guides label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; cursor: pointer; }
.near-guides input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.near-guides small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.near-filter-short { display: none; }
@media (max-width: 479px) {
  /* Heading on its own line, the two controls under it; where distances are
     measured from is in the sheet. */
  .near-results-head { flex-wrap: wrap; row-gap: 8px; }
  .near-results-title { flex-basis: 100%; }
  .near-results-origin { display: none; }
  .near-results-tools { flex: 1; justify-content: space-between; }
  .near-results-head h2 { font-size: 17px; }
  .near-filter-long { display: none; }
  .curated-long { display: none; }
  .curated-short { display: inline; }
  .curated-toggle { padding: 0 12px 0 10px; }
  .near-filter-short { display: inline; }
}
/* The narrowest phones: the Filters button keeps its icon; its name stays
   for screen readers. */
@media (max-width: 359px) {
  .near-filter-button { padding: 0 12px; }
  .near-filter-short { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
.near-filter-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
.near-empty { display: grid; justify-items: center; text-align: center; padding: 44px 20px; border: 1px dashed var(--border); border-radius: 10px; }
.near-empty > .ui-icon { color: var(--accent); margin-bottom: 16px; }
.near-empty h3 { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.near-empty p { color: var(--muted); font-size: 14px; max-width: 28rem; margin-top: 10px; }
.near-empty .button { margin-top: 20px; }
.near-empty-line { color: var(--muted); font-size: 14px; padding: 20px 0; }
.near-empty-line .auth-toggle { display: inline; }
.near-distance-note { color: var(--muted); font-size: 12px; margin-top: 16px; }

/* Location & filters live in a side sheet behind the hamburger, so the page
   itself leads with results and the controls disappear once a place is set. */
.near-sheet-overlay { position: fixed; inset: 0; z-index: 55; background: #0007; opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.near-sheet-overlay[data-open="true"] { opacity: 1; visibility: visible; }
.near-sheet { position: fixed; top: 0; right: 0; z-index: 60; display: flex; flex-direction: column; width: min(92vw, 400px); height: 100%; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 40px #0004; transform: translateX(100%); transition: transform .25s ease; overflow: hidden; }
/* Lock the page behind the open sheet so only the sheet scrolls. */
body:has(.near-sheet[data-open="true"]) { overflow: hidden; }
.near-sheet[data-open="true"] { transform: none; }
.near-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.near-sheet-head h2 { font-size: 17px; }
.near-sheet-close { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.near-sheet-close:hover { color: var(--text); border-color: var(--accent); }
.near-sheet-body { flex: 1; overflow-y: auto; padding: 20px calc(20px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) 20px; }
.near-sheet-body h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }

/* Filters first, then the starting point under a rule. */
.near-sheet-origin { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) {
  .near-sheet, .near-sheet-overlay { transition: none; }
}

/* Saved places: find first, then browse. */
.places-page { padding-block: 20px 48px; }
.places-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.places-head h1 { font-size: clamp(24px, 5vw, 34px); letter-spacing: -.02em; margin-block: 4px 6px; }
/* Where to go from the places list: one-line pills that wrap as a group. */
.places-links { display: flex; flex-wrap: wrap; gap: 6px; }
.places-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13.5px; white-space: nowrap; }
.places-links a .ui-icon { color: var(--accent); }
.places-links a:hover, .places-links a:focus-visible { border-color: var(--accent); }
.places-link-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
/* An import still in review: text above a full-width button on phones, side by side wider. */
.places-import-notice { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); font-size: 15px; line-height: 1.45; }
.places-import-notice strong { color: var(--accent); }
.places-import-notice .button { width: 100%; }
@media (min-width: 600px) {
  .places-import-notice { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .places-import-notice .button { width: auto; flex: none; }
}
.places-search { margin-top: 18px; }
.places-search input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 16px; }
.places-search input:focus-visible { border-color: var(--accent); }
.places-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.places-filter form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.places-filter select { max-width: 100%; }
.places-open-now { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.places-open-now input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.places-open-now:has(input:checked) { border-color: var(--accent); color: var(--text); }
.places-filter label { color: var(--muted); font-size: 13px; }
.places-filter select { min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 14px; }
.places-grid { display: grid; gap: 14px; margin-top: 22px; }
.place-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.place-card .place-preview { margin-bottom: 2px; }
.place-card .place-preview-credit { margin: -4px 0 0; }
.place-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.place-card-media { display: contents; }
.place-card-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.place-card h2 { margin: 0; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.place-card h2 a { color: var(--text); text-decoration: none; }
.place-card h2 a:hover, .place-card h2 a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.place-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.place-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; border-top: 1px solid var(--border); }
.place-card-more { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--accent); font-size: 13px; font-weight: 650; white-space: nowrap; }

/* A saved place's category, town and closure. */
.place-category { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--muted); font-size: 13px; }
.place-status { padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 11.5px; font-weight: 650; }
.place-status.is-closed_permanently { color: var(--danger); }
.place-status.is-closed_temporarily { color: #c98a1a; }

/* The owner's lists: Google's own lists keep one colour and sign each, any
   other list one of six colours from its name. Text stays in the text colour,
   so contrast holds in both themes; the colour is in the sign and the edge. */
.list-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.list-chip { --chip: var(--muted); display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 9px 2px 7px; border: 1px solid color-mix(in srgb, var(--chip) 60%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--chip) 13%, transparent); color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.list-chip-glyph { color: var(--chip); font-size: 11px; line-height: 1; }
.list-favourite { --chip: var(--accent); }
.list-want { --chip: #3fa66b; }
.list-starred { --chip: #d9b43a; }
.list-travel { --chip: #4a90d9; }
.list-hue-0 { --chip: #4a90d9; }
.list-hue-1 { --chip: #9b6bd6; }
.list-hue-2 { --chip: #2aa6a1; }
.list-hue-3 { --chip: #d9668a; }
.list-hue-4 { --chip: #d9823b; }
.list-hue-5 { --chip: #8aa63a; }

/* Tags, compact: the owner's own in the accent, shared ones quieter. */
.place-tag-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.place-tag-chip { max-width: 14ch; padding: 1px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-tag-chip.is-own { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }
.place-tag-chip.is-more { border-style: dashed; cursor: help; }

/* Links as icons; labelled on the place's own page. */
.place-links { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.place-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px; border-radius: 8px; color: var(--muted); }
.place-link:hover, .place-link:focus-visible { background: var(--surface-raised); color: var(--accent); }
.place-link-maps { color: var(--accent); }
.place-links.is-labelled { gap: 6px; margin-top: 14px; }
.place-links.is-labelled .place-link { padding: 0 12px 0 10px; border: 1px solid var(--border); font-size: 13px; }
.place-rating { color: var(--accent); font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.place-rating-rest { color: var(--border); }
.places-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 26px; }
.places-pager a, .places-pager button { color: var(--accent); }
.places-pager button { min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 15px; cursor: pointer; }
#nearby-pager { align-items: center; }
.nearby-range { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
/* The sticky results bar would cover the top of the results after a page change. */
#nearby-results { scroll-margin-top: 8px; }
.tag-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag-rename input { min-height: 38px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: 15px; }
@media (min-width: 720px) {
  .places-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* Discover: the catalogue's places the member has not saved. */
.discover-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
.discover-search input { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
.discover-filters .filter-field { display: grid; gap: 4px; }
.discover-filters label { color: var(--muted); font-size: 12px; }
.discover-filters select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 14px; }
.discover-filters select:disabled { opacity: .6; }
@media (min-width: 720px) {
  .discover-filters { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: end; }
}
.discover-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; grid-column: 1 / -1; }
.discover-guides-choice { grid-column: auto; padding: 6px 12px 8px; }
.discover-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 18px; }
.discover-summary .near-hint { margin: 0; }
.discover-summary + .places-grid, .discover-summary ~ .places-grid { margin-top: 12px; }
.discover-guides { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 12.5px; }
.discover-guides .ui-icon { flex-shrink: 0; color: var(--accent); }
.discover-add { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.discover-add:hover, .discover-add:focus-visible { background: var(--accent); color: var(--on-accent); }
.discover-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.discover-card.is-added { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
@media (max-width: 599px) {
  /* A list row keeps its Add button; the label goes, the sign stays. */
  [data-view="list"] .discover-add { width: 40px; padding: 0; justify-content: center; font-size: 0; }
}

/* Saved places in two views (PlaceView), the same card markup in each; the
   container's data-view lays it out. Grid is the cards above. */
.view-switch { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 1px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.view-switch button { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.view-switch button:hover { color: var(--text); }
.view-switch button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.view-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.place-view-bar { display: flex; justify-content: flex-end; margin-top: 18px; }
.place-view-bar + .places-grid { margin-top: 12px; }

/* List: one row each, a small picture, title and lists; note and tags only on
   the place's page. */
:is(.places-grid, .nearby-grid)[data-view="list"] { grid-template-columns: minmax(0, 1fr); gap: 8px; }
[data-view="list"] .place-card { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; grid-template-areas: "thumb body foot" "thumb credit foot"; gap: 2px 14px; align-items: start; padding: 10px 12px; border-radius: 8px; }
[data-view="list"] .place-card .place-preview { grid-area: thumb; width: 72px; height: 72px; aspect-ratio: auto; margin: 0; border-radius: 6px; }
[data-view="list"] .place-card:not(:has(.place-preview))::before { content: ""; grid-area: thumb; width: 72px; height: 72px; border-radius: 6px; background: var(--surface-raised); }
[data-view="list"] .place-card .place-preview-credit { grid-area: credit; margin: 0; font-size: 10.5px; }
/* Title on the first line; distance, category and lists share the second. */
[data-view="list"] .place-card-body { grid-area: body; flex-flow: row wrap; align-items: center; gap: 4px 12px; }
[data-view="list"] .place-card-head { order: -1; flex-basis: 100%; }
[data-view="list"] .place-card-head :is(h2, h3) { font-size: 16px; }
[data-view="list"] .place-card .place-note, [data-view="list"] .place-tag-chips, [data-view="list"] .discover-guides { display: none; }
[data-view="list"] .nearby-card-top .ui-icon { display: none; }
[data-view="list"] .place-card-foot { grid-area: foot; align-self: center; margin: 0; padding: 0; border: 0; }
@media (max-width: 599px) {
  /* Room for the title: the Maps link stays, the rest is on the place's page. */
  [data-view="list"] .place-card { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "thumb body foot" "credit credit credit"; column-gap: 10px; }
  [data-view="list"] .place-card-body { column-gap: 8px; }
  [data-view="list"] .place-card .place-preview-credit { margin-top: 4px; }
  [data-view="list"] .place-card .place-preview,
  [data-view="list"] .place-card:not(:has(.place-preview))::before { width: 56px; height: 56px; }
  [data-view="list"] .place-card-more, [data-view="list"] .place-links li + li { display: none; }
}

/* One saved place: what is known on the left, what the owner adds on the right. */
.place-page { padding-block: 16px 56px; }
.place-back a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--accent); font-size: 14px; }
.place-detail { display: grid; gap: 16px; margin-top: 8px; }
.place-detail-main, .place-detail-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.place-detail-head { display: grid; gap: 8px; }
.place-detail-head .place-preview { aspect-ratio: 16 / 8; border-radius: 10px; margin: 0; }
.place-detail-head h1 { margin: 4px 0 0; font-family: var(--serif); font-size: clamp(26px, 6vw, 38px); line-height: 1.15; overflow-wrap: anywhere; }
.place-detail-head .place-rating { font-size: 16px; }
.place-panel { padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.place-panel h2 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.place-panel .near-hint { margin: 0 0 10px; }
.place-address { margin: 0 0 10px; font-size: 15px; }
.place-map-canvas { width: 100%; height: clamp(220px, 45vw, 340px); border-radius: 8px; background: var(--surface-raised); }
.place-map [data-map-status]:empty { display: none; }
.place-map [data-map-status] { margin-top: 8px; }
.place-facts { display: grid; gap: 10px; margin: 0; }
.place-facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.place-facts dt { color: var(--subtle); font-size: 13px; }
.place-facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.place-fact-note { display: block; margin-top: 4px; color: var(--subtle); font-size: 12px; }
.place-guide + .place-guide::before { content: " · "; color: var(--subtle); }
.place-guide a, .place-own-links a { color: var(--accent); }
.place-status-text { color: var(--danger); font-weight: 650; }
.place-rating-input { margin: 0; padding: 0; border: 0; }
.place-rating-input legend { margin-bottom: 2px; padding: 0; color: var(--muted); font-size: 13px; }
/* Stars are written 5..1 and shown reversed, so "this star and those before it"
   is the checked label and its following siblings. */
.place-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.place-stars label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; color: var(--border); font-size: 26px; cursor: pointer; }
.place-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.place-stars label:has(input:checked), .place-stars label:has(input:checked) ~ label, .place-stars label:hover, .place-stars label:hover ~ label { color: var(--accent); }
.place-stars label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.place-rating-clear { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--muted); font-size: 13px; }
.place-field-label { display: block; margin: 10px 0 6px; color: var(--muted); font-size: 13px; }
#place-edit textarea { width: 100%; min-height: 120px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 15px; line-height: 1.45; resize: vertical; }
#place-edit .button { margin-top: 10px; }
.place-own-tags, .place-own-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.place-own-tags li, .place-own-links li { display: inline-flex; align-items: center; gap: 2px; }
.place-own-links { flex-direction: column; align-items: flex-start; }
.place-own-tags .place-tag-chip { max-width: none; font-size: 13px; padding: 3px 10px; }
.place-tag-remove { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.place-tag-remove:hover, .place-tag-remove:focus-visible { background: var(--surface-raised); color: var(--danger); }
.place-panel > .place-tag-chips { margin-bottom: 12px; }
.place-subhead { margin: 14px 0 6px; color: var(--subtle); font-size: 12px; font-weight: 650; }
.place-panel h2 + .place-subhead { margin-top: 0; }
.place-tag-chip.is-guide { border-style: dashed; }
.place-tag-chip.is-common { border-style: solid; }
.place-tag-group-label { margin: 8px 0 4px; color: var(--subtle); font-size: 11.5px; }
.place-tag-options { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.place-tag-option { min-height: 34px; padding: 4px 10px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 999px; background: transparent; color: var(--accent); font-size: 13px; cursor: pointer; }
.place-tag-option.is-shared { border-color: var(--border); color: var(--muted); }
.place-tag-option:hover, .place-tag-option:focus-visible { border-style: solid; background: var(--accent-soft); color: var(--text); }
.place-tag-note { margin-top: 10px; }
#place-all-links .place-links.is-labelled { margin-top: 0; }
.place-head-actions { margin: 4px 0 0; }
.place-head-actions .button { gap: 8px; }
.place-share-form { display: grid; gap: 4px; }
.place-share-form .place-field-label:first-child { margin-top: 0; }
.place-share-form select, .place-share-form textarea { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 15px; }
.place-share-form .button { justify-self: start; gap: 8px; margin-top: 8px; }
.place-share-note { margin-top: 10px; }
.place-shared-with { margin: 10px 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.place-shared-with li + li { margin-top: 4px; }

/* Friends and places they sent. */
.social-page { padding-block: 16px 56px; display: grid; gap: 14px; align-content: start; max-width: 860px; }
.social-page .place-back { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.social-page h1 { margin: 0; font-family: var(--serif); font-size: clamp(26px, 6vw, 36px); }
.social-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.social-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.social-list li:last-child { border-bottom: 0; }
.social-who { font-weight: 650; overflow-wrap: anywhere; }
.social-when { color: var(--subtle); font-size: 12.5px; }
.social-actions { display: flex; gap: 8px; margin-left: auto; }
.share-new { padding: 1px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; }
.share-from { margin: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.share-message { margin: 0; padding: 2px 0 2px 10px; border-left: 2px solid var(--accent); color: var(--text); font-size: 14px; font-style: italic; overflow-wrap: anywhere; white-space: pre-line; }
.share-actions { display: flex; align-items: center; gap: 6px; }
.place-card.is-new { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.place-inline-form, .place-link-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.place-inline-form select, .place-inline-form input, .place-link-form select, .place-link-form input { flex: 1 1 180px; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 15px; }
.place-link-form select { flex: 0 1 130px; }
.place-inline-form .button, .place-link-form .button { min-height: 44px; border-color: var(--border); background: var(--surface-raised); color: var(--text); }
@media (min-width: 900px) {
  .place-detail { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
}

/* Profile as a hub: what the member has, and the way to each screen. */
.profile-lede { color: var(--muted); font-size: 15px; margin-bottom: 12px; max-width: 46rem; }
.profile-state { color: var(--subtle); font-size: 13px; margin-bottom: 20px; }
.profile-state strong { color: var(--accent); font-weight: 650; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 22px; }
.profile-stat { display: grid; gap: 2px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.profile-stat-number { font-family: var(--serif); font-size: 30px; line-height: 1.1; color: var(--text); }
.profile-stat-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.profile-stat-note { color: var(--subtle); font-size: 12px; margin-top: 4px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.profile-destinations { display: grid; gap: 10px; margin-top: 16px; }
.profile-destinations a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.profile-destinations a:hover { border-color: var(--accent); }
.profile-destinations .ui-icon { grid-row: span 2; color: var(--accent); }
.destination-name { font-weight: 650; }
.destination-note { color: var(--muted); font-size: 13px; }
.profile-account-note { color: var(--muted); font-size: 13px; margin-top: 22px; text-align: center; }
@media (min-width: 720px) {
  .profile-destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Closing a venue from the duplicate review: set apart from the verdict buttons,
   and coloured as the lasting action it is. */
.match-close { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.button-small { min-height: 36px; padding: 6px 12px; font-size: 13px; gap: 6px; }
.button-danger { display: inline-flex; align-items: center; }
.button-danger:hover { background: var(--danger); color: var(--surface); }

/* Correcting an address in place, folded away until needed. */
.address-edit { margin-top: 6px; }
.address-edit summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.address-edit form { display: grid; gap: 6px; max-width: 34rem; margin-top: 8px; }
.address-edit label { color: var(--muted); font-size: 12px; }
.address-edit input[type="text"] { width: 100%; min-height: 36px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: 14px; }
.address-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.address-edit-moved { display: flex; align-items: center; gap: 6px; }
.address-edit button { justify-self: start; }

/* Something to look into, not a verdict: neutral grey. */
.tag-pill.tag-pill-quiet { margin-left: 8px; vertical-align: middle; border-style: dashed; color: var(--muted); }
.tag-pill.tag-pill-quiet:hover { color: var(--text); border-color: var(--text); }

/* Temporarily closed: coming back, so amber and calm rather than danger red. */
.tag-pill-pause { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle; border-color: #b7791f; color: #b7791f; }
.tag-pill-pause.is-overdue { border-style: dashed; }
.button-pause { display: inline-flex; align-items: center; border-color: #b7791f; background: transparent; color: #b7791f; }
.button-pause:hover { background: #b7791f; color: var(--surface); }
.match-close { display: flex; flex-wrap: wrap; gap: 8px; }
.venue-status-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 12px; }
.venue-temporary-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.venue-temporary-form label { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.venue-temporary-form input[type="date"] { min-height: 36px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); }

/* A closed venue stays in the list, visibly set apart from the open ones. */
.admin-table tr.is-closed th a, .admin-table tr.is-closed td { opacity: .6; }
.admin-table tr.is-closed .tag-pill { margin-left: 6px; }

/* Photographs held in our own storage, shown before any linked preview. */
.admin-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }

/* Missing images, grouped by the reason there is none. */
.image-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.image-reasons a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--muted); font-size: 13px; }
.image-reasons a[aria-current="true"] { border-color: var(--accent); color: var(--text); }
.image-reasons a span { color: var(--accent); font-weight: 650; }
.image-heading { margin-bottom: 14px; }
.image-heading h2 { font-size: 16px; }
.image-review { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.image-review > li { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.image-review h3 { font-size: 16px; }
.image-manual { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.image-manual label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.image-manual-row { display: flex; gap: 8px; flex-wrap: wrap; }
.delisted-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.image-manual-row input { flex: 1 1 320px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: 15px; }

/* Finishing by hand what no lookup can verify. */
.reference-review { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.reference-review > li { padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.reference-review h2 { font-size: 17px; }
.reference-review h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.reference-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 13px; }
.reference-links a { color: var(--accent); }
.reference-forms { display: grid; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.reference-forms .admin-field { margin-bottom: 10px; }
.reference-forms label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--muted); }
.reference-forms input[type="text"] { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: 15px; }
.reference-assert { padding: 14px; border: 1px dashed var(--border); border-radius: 8px; background: var(--bg); }
/* Picking among Google's suggestions. */
.reference-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-block: 0 16px; }
.reference-toolbar .admin-hint { margin: 0; }
.reference-suggestions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.candidate-list { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.candidate { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.candidate-text { min-width: 0; flex: 1 1 280px; }
.candidate-text p { margin: 0; overflow-wrap: anywhere; }
.candidate-text p + p { margin-top: 3px; }
.candidate-text .tag-pill { margin-left: 6px; }
.candidate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; }
.candidate-actions a { color: var(--accent); }
.candidate-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.candidate-search { display: flex; flex: 1 1 360px; gap: 8px; min-width: 0; }
.candidate-search input[type="text"] { flex: 1; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: 15px; }
.reference-other { margin-top: 12px; font-size: 13px; }
.reference-other summary { cursor: pointer; color: var(--muted); }
@media (min-width: 900px) {
  .reference-forms { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
}

/* Curation, admin side: a list index beside the builder for the chosen list. */
.curate-layout { display: grid; gap: 24px; align-items: start; margin-top: 22px; }
.curate-lists h2, .curate-builder h2 { font-size: 16px; margin-bottom: 12px; }
.curate-list-index { display: grid; gap: 6px; margin-top: 16px; }
.curate-list-index a { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.curate-list-index a[aria-current="true"] { border-color: var(--accent); }
.curate-list-name { font-weight: 650; }
.curate-list-meta { color: var(--muted); font-size: 12px; }
.curate-status { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.curate-status.draft { color: var(--muted); }
.curate-status.published { color: var(--accent); }
.curate-builder { min-width: 0; }
.curate-builder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.curate-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.curate-edit { display: grid; gap: 6px; flex: 1 1 320px; max-width: 560px; }
.curate-edit label { color: var(--muted); font-size: 12px; }
.curate-edit input, .curate-edit textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font: inherit; font-size: 15px; }
.curate-edit textarea { resize: vertical; }
.curate-edit .curate-actions { margin-top: 6px; }
.curate-edit .panel-error { margin: 0; }
.curate-filters, .curate-entries { margin-top: 22px; }
.curate-filters h3, .curate-entries h3 { font-size: 14px; margin-bottom: 10px; }
.curate-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.curate-filter-grid select, .curate-filter-grid input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: 14px; }
.curate-seed-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.curate-result { margin-top: 14px; padding: 10px 12px; border-left: 2px solid var(--accent); background: var(--surface); font-size: 13px; }
.curate-result a { color: var(--accent); }
.curate-preview { margin-top: 14px; padding: 12px; border: 1px dashed var(--border); border-radius: 8px; max-height: 320px; overflow-y: auto; }
.curate-preview ul { display: grid; gap: 7px; margin-top: 8px; font-size: 13px; }
.curate-entry-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: curated; }
.curate-entry-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.curate-entry-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; font-size: 12px; }
.curate-entry-actions a { color: var(--accent); }
.curate-entry-actions button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.curate-entry-actions button:hover { color: var(--danger); }
.curate-closed { margin-left: 8px; padding: 1px 7px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
@media (min-width: 1000px) {
  .curate-layout { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; }
}

/* Curated lists, member side: browse what Traveller put together and take it. */
.curated-page { padding-block: 20px 48px; }
.curated-index { display: grid; gap: 14px; }
.curated-card { display: block; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.curated-card:hover { border-color: var(--accent); }
.curated-card h2 { font-size: 18px; }
.curated-card p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.curated-count { display: inline-block; margin-top: 10px; color: var(--accent); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.curated-detail h2 { font-size: clamp(22px, 4vw, 30px); margin-top: 10px; }
.curated-description { color: var(--muted); font-size: 15px; margin-top: 8px; }
.curated-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 18px; }
.curated-places { display: grid; gap: 10px; }
.curated-places li { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.curated-places label { display: flex; align-items: flex-start; gap: 12px; padding: 14px; cursor: pointer; }
.curated-places input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.curated-place-body { display: grid; gap: 3px; min-width: 0; }
.curated-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.curated-tags span { padding: 2px 8px; border: 1px solid var(--border); border-radius: 11px; color: var(--muted); font-size: 11px; }
@media (min-width: 760px) {
  .curated-index { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

.places-map-canvas { width: 100%; height: 58vh; min-height: 340px; max-height: 650px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; }
#places-map { margin-block: 24px; }
#places-map [data-map-status] { margin-bottom: 12px; }
/* "You are here" dot, deliberately unlike the saved-place pins. */
.map-self-dot { width: 16px; height: 16px; border-radius: 50%; background: #4aa3ff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: no-preference) { .map-self-dot { animation: map-self-pulse 2.4s ease-in-out infinite; } }
@keyframes map-self-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(74, 163, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.5); } }
.map-disclosure { color: var(--muted); font-size: 14px; margin-block: 16px; }
.map-attribution { font-family: sans-serif; font-size: 12px; color: var(--muted); }
.map-attribution span { font-weight: 400; font-size: 14px; color: #fff; white-space: nowrap; }
.auth-page { width: 100%; max-width: 28rem; margin: 40px auto 56px; }
.auth-intro { margin-bottom: 26px; text-align: center; }
.auth-intro h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 5vw, 42px); margin-block: 12px; }
.auth-intro p { color: var(--muted); font-size: 14px; }
.auth-intro .eyebrow { color: var(--accent); font-size: 10px; }
.auth-card { min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 24px 18px; box-shadow: 0 16px 48px #0002; }
.auth-strategy, .auth-form, .auth-slot { width: 100%; min-width: 0; }
.auth-banner { color: var(--accent); margin-bottom: 20px; text-align: center; }
.auth-banner img { max-height: 60px; margin-inline: auto; }
.auth-title { color: var(--text); font-size: 23px; font-family: var(--serif); font-weight: 400; margin-bottom: 22px; }
.auth-field { margin-bottom: 18px; min-width: 0; }
.auth-label { display: block; color: var(--text); margin-bottom: 7px; font-size: 13px; font-weight: 550; }
.auth-input { display: block; width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid #46515e; border-radius: 4px; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5; }
.auth-input::placeholder { color: var(--subtle); }
.auth-input:focus-visible { outline-offset: 2px; }
.auth-input--error { border-color: var(--danger); }
.auth-submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border: 1px solid transparent; border-radius: 4px; padding: 12px 16px; margin-top: 22px; font-size: 14px; font-weight: 750; white-space: normal; }
.auth-switcher { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 18px; }
.auth-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 4px; background: transparent; border: 0; color: var(--accent); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; text-align: center; }
.auth-errors { list-style: none; margin: 12px 0; padding: 0; }
.auth-error { color: var(--danger); font-size: 12px; margin-top: 7px; overflow-wrap: anywhere; }
.auth-slot { margin-top: 16px; }
.auth-divider { border: 0; border-top: 1px solid var(--border); margin-block: 24px; color: var(--muted); font-size: 12px; text-align: center; }
.auth-note { color: var(--muted); text-align: center; font-size: 12px; margin-top: 20px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin-block: 22px; color: var(--muted); font-size: 12px; }
/* The component renders the line before the text; a second line is drawn after it. */
.auth-or-line, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
/* Sign in with Google, built to Google's branding guidelines for a custom button:
   their dark and light colours (fill, 1px stroke, text), medium 14/20 text, 12px
   before the logo, 10px after it, and the standard four-colour "G" on white. The
   logo sits at the left edge and the text is centred, as in Google's own
   full-width button; the empty third column keeps the text truly centred.
   Rectangular with a 4px radius, like the other authentication controls. The
   guidelines name Google Sans as the font; the site's own sans is used instead. */
.auth-oauth { width: 100%; }
.auth-oauth-link {
  --google-state: 227 227 227;
  display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; column-gap: 10px;
  width: 100%; min-height: 48px; padding: 0 12px;
  border: 1px solid #8e918f; border-radius: 4px; background-color: #131314; color: #e3e3e3;
  font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .25px; text-align: center; text-decoration: none;
  transition: background-color .15s ease;
}
.auth-oauth-icon { width: 24px; height: 24px; padding: 2px; border-radius: 50%; background: #fff; }
.auth-oauth-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-oauth .auth-oauth-link:active { background-image: linear-gradient(rgb(var(--google-state) / .12), rgb(var(--google-state) / .12)); }
@media (prefers-color-scheme: light) {
  html:not([data-appearance="dark"]) .auth-oauth-link { --google-state: 31 31 31; background-color: #fff; border-color: #747775; color: #1f1f1f; }
}
html[data-appearance="light"] .auth-oauth-link { --google-state: 31 31 31; background-color: #fff; border-color: #747775; color: #1f1f1f; }
/* No OAuth client configured: a button that cannot work is not offered. */
[data-google-sign-in="off"] .auth-oauth, [data-google-sign-in="off"] .auth-or { display: none; }
.auth-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
button:disabled, input:disabled, .phx-submit-loading .auth-submit { opacity: .65; cursor: wait; }
@media (hover: hover) {
  .site-nav a:hover, .site-nav button:hover { background: var(--surface-raised); color: var(--text); }
  .button-primary:hover, .auth-submit:hover { filter: brightness(1.08); }
  .auth-toggle:hover { color: var(--text); }
  .auth-oauth-link:hover { background-image: linear-gradient(rgb(var(--google-state) / .08), rgb(var(--google-state) / .08)); }
}
@media (min-width: 600px) {
  .site-header-inner, .site-main, .site-footer { width: min(100% - 64px, 1200px); }
  .header-edition { display: block; }
  .hero-actions { flex-direction: row; align-items: center; gap: 22px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { flex-direction: row; justify-content: space-between; }
  .profile-surface { padding: 32px; }
  .auth-card { padding: 32px; }
}
@media (min-width: 800px) {
  body { padding-bottom: 0; }
  .site-header-inner { min-height: 88px; }
  .header-edition { display: none; }
  .site-nav { position: static; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .site-nav a, .site-nav button { flex-direction: row; width: auto; min-height: 44px; padding: 10px 16px; gap: 8px; font-size: 13px; }
  .site-nav .nav-join { background: var(--accent); color: var(--on-accent); margin-left: 8px; }
  .site-nav .nav-join:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.08); }
  .site-header-sections .site-nav { margin-left: auto; gap: 4px; }
  .site-header-sections .site-nav a { padding: 10px 12px; }
  .site-header-sections .header-tools { margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--border); }
  .site-header-sections .site-nav a { white-space: nowrap; }
  .landing-hero { padding-block: 76px 64px; }
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-section, .next-section { padding-block: 40px 24px; }
  .profile-page { max-width: 900px; margin-inline: auto; padding-top: 54px; }
  .account-avatar { width: 76px; height: 76px; font-size: 36px; }
  .profile-header { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .privacy-badge { grid-column: 3; }
  .account-copy h1 { font-size: 38px; }
  .profile-roadmap ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .profile-roadmap li { flex-wrap: wrap; }
  .auth-page { margin-block: 60px 80px; }
}
@media (min-width: 1100px) {
  .landing-hero { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 70px; align-items: center; }
  .hero-aside { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 0 24px 30px; border-left: 1px solid var(--border); color: var(--accent); }
  .edition-number, .edition-name { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
  .hero-aside > .ui-icon { margin-block: 36px; }
  .hero-aside p { font-size: 24px; font-family: var(--serif); color: var(--text); line-height: 1.5; }
  .hero-aside em { color: var(--accent); }
  .edition-line { width: 40px; height: 1px; background: var(--border); margin-block: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Traveller's private import/review slice; intentionally scoped to its pages. */
.traveller-imports { max-width: 850px; margin: 36px auto 64px; min-width: 0; }
.traveller-imports h1 { font-family: var(--serif); font-size: clamp(2rem, 6vw, 3rem); margin-block: 24px; }
.traveller-imports h2 { font-size: 1.3rem; }
.traveller-imports p { margin-block: 16px; }
.traveller-imports nav, .traveller-imports .import-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 20px; }
.traveller-imports a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.traveller-imports nav a { display: inline-flex; align-items: center; min-height: 44px; }
.traveller-imports .import-card { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: clamp(16px, 4vw, 28px); margin-block: 20px; min-width: 0; }
.traveller-imports button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent-soft); color: var(--text); margin-block: 4px; }
.traveller-imports button:disabled { border-color: var(--border); color: var(--muted); cursor: default; }
.traveller-imports #cleanup-warning { border-left: 3px solid var(--danger); padding-left: 16px; }
/* Import progress: the stage in words, a three-step trail, and a spinner only
   while Google or Traveller is working. No percentage: Google reports none. */
.import-progress { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: clamp(16px, 4vw, 24px); margin-block: 20px; }
.import-progress.is-working { border-color: var(--accent); }
.traveller-imports .import-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0 0 14px; padding: 0; counter-reset: import-step; font-size: 13px; color: var(--muted); }
.import-steps li { counter-increment: import-step; display: inline-flex; align-items: center; gap: 8px; }
.import-steps li::before { content: counter(import-step); display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 50%; font-size: 11px; }
.import-steps li.is-done::before { content: "✓"; border-color: var(--accent); color: var(--accent); }
.import-steps li.is-current { color: var(--text); font-weight: 650; }
.import-steps li.is-current::before { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.traveller-imports .import-stage { display: flex; align-items: center; gap: 10px; margin-block: 0 8px; font-size: 1.05rem; }
.traveller-imports .import-detail { margin-block: 6px; color: var(--muted); }
.traveller-imports .import-elapsed { margin-block: 6px 0; color: var(--subtle); font-size: 13px; }
.import-row.is-working { border-color: var(--accent); }
.traveller-imports .match-counts { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; padding: 0; margin-block: 12px; }
.traveller-imports .import-match { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 4px 10px; }
.import-spinner { flex: none; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: import-spin .9s linear infinite; }
@keyframes import-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .import-spinner { animation: none; border-color: var(--accent); } }
.traveller-imports ul { padding-left: 24px; overflow-wrap: anywhere; }

/* One saved item from an import: compact on phones, two columns when there is room. */
.import-entries { display: grid; gap: 10px; margin-block: 20px; }
@media (min-width: 760px) { .import-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.import-entry { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.import-entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.traveller-imports .import-entry h2 { margin: 0; font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }
.import-entry-status { flex: none; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.import-entry.is-new .import-entry-status, .import-entry.is-guide .import-entry-status { border-color: var(--accent); color: var(--accent); }
.import-entry.is-added .import-entry-status, .import-entry.is-saved .import-entry-status { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.import-entry.is-not_found .import-entry-status, .import-entry.is-incomplete .import-entry-status { border-color: var(--danger); color: var(--danger); }
.import-entry.is-added, .import-entry.is-saved { border-left: 3px solid var(--accent); }
.import-entry.is-incomplete { border-style: dashed; }
.traveller-imports .import-entry-lists { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.import-entry-list { padding: 2px 8px; border-radius: 6px; background: var(--surface-raised); color: var(--text); font-size: 12.5px; overflow-wrap: anywhere; }
.import-entry-list.is-also { background: transparent; border: 1px dashed var(--border); color: var(--muted); }
.import-entry-note { margin: 0; padding: 2px 0 2px 10px; border-left: 2px solid var(--accent); color: var(--muted); font-size: 14px; font-style: italic; overflow-wrap: anywhere; white-space: pre-line; }
.import-entry-facts { display: grid; gap: 3px; margin: 0; font-size: 13px; }
.import-entry-facts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
.import-entry-facts dt { color: var(--subtle); }
.import-entry-facts dd { margin: 0; overflow-wrap: anywhere; }
.import-entry-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: auto; }
.traveller-imports .import-entry-maps { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; }
.traveller-imports .import-entry-actions button { min-height: 40px; margin: 0 0 0 auto; padding: 8px 14px; border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 700; }
@media (max-width: 340px) { .traveller-imports .import-entry-actions button { flex: 1 0 100%; } }

/* Traveller's explore map: origin, owner tag filters, results. Mobile first. */
.explore-page { padding-block: 32px 56px; min-width: 0; }
.explore-heading { display: flex; flex-direction: column; gap: 20px; padding-bottom: 26px; border-bottom: 1px solid var(--border); }
.explore-heading h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.04em; margin-block: 12px 14px; }
.explore-heading > div > p:last-child { color: var(--muted); max-width: 34rem; font-size: 14px; }
.explore-workspace { display: grid; gap: 28px; padding-top: 26px; min-width: 0; }
.explore-controls { display: grid; gap: 18px; align-self: start; min-width: 0; }
.explore-panel { min-width: 0; padding: 22px 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.explore-panel h2 { font-family: var(--serif); font-weight: 400; font-size: 25px; margin-block: 12px; }
.explore-panel .panel-hint { color: var(--muted); font-size: 13px; margin-block: 10px; }
.explore-panel .panel-privacy { display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: 12px; margin-block: 16px; }
.explore-panel .panel-privacy .ui-icon { flex: 0 0 auto; margin-top: 3px; }
.panel-error { color: var(--danger); font-size: 13px; margin-block: 12px; }
#explore-geolocation .button { width: 100%; margin-top: 16px; }
#explore-geolocation [data-location-status] { color: var(--muted); font-size: 12px; margin-top: 10px; }
.explore-secondary { width: 100%; margin-top: 12px; border-color: var(--border); background: var(--surface-raised); font-size: 13px; }
.explore-origin { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px; font-size: 13px; }
.explore-origin p { margin-bottom: 4px; }
.explore-origin p + p { color: var(--muted); }
.explore-origin strong { font-weight: 650; }
.explore-no-tags { border: 1px dashed var(--border); border-radius: 6px; padding: 14px; margin-block: 14px; font-size: 13px; color: var(--muted); }
.explore-no-tags a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tag-filter { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.tag-filter legend { padding: 0; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.tag-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 0 18px; min-width: 0; }
.tag-chips li { min-width: 0; }
.tag-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface-raised); color: var(--text); font-size: 13px; line-height: 1.3; text-align: left; }
.tag-chip-mark { flex: 0 0 auto; width: 18px; text-align: center; font-weight: 700; color: var(--muted); }
.tag-chip-name { min-width: 0; overflow-wrap: anywhere; }
.tag-chip-count { flex: 0 0 auto; color: var(--subtle); font-size: 11px; font-variant-numeric: tabular-nums; }
.tag-chip[data-state="include"] { border-color: var(--accent); background: var(--accent-soft); }
.tag-chip[data-state="include"] .tag-chip-mark { color: var(--accent); }
.tag-chip[data-state="exclude"] { border-style: dashed; border-color: var(--danger); }
.tag-chip[data-state="exclude"] .tag-chip-mark { color: var(--danger); }
.tag-chip[data-state="exclude"] .tag-chip-name { text-decoration: line-through; color: var(--muted); }
.filter-form { display: grid; gap: 14px; border-top: 1px solid var(--border); padding-top: 16px; }
.filter-field { min-width: 0; }
.filter-field label { display: block; font-size: 13px; margin-bottom: 7px; }
.filter-field select { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: 16px; }
.explore-results { min-width: 0; }
.explore-results .section-heading { margin-bottom: 14px; }
.filter-summary { font-size: 13px; color: var(--muted); border-left: 2px solid var(--accent); padding: 10px 14px; background: var(--surface); margin-bottom: 18px; }
.filter-summary span { display: block; color: var(--text); margin-top: 4px; }
.explore-results #places-map { margin-block: 18px 10px; }
.explore-results .map-attribution { margin-block: 10px 20px; }
.explore-results .panel-hint { color: var(--muted); font-size: 12px; margin-block: 8px; }
.explore-empty { display: grid; justify-items: center; text-align: center; padding: 44px 20px; border: 1px dashed var(--border); border-radius: 8px; }
.explore-empty > .ui-icon { color: var(--accent); margin-bottom: 18px; }
.explore-empty h3 { font-family: var(--serif); font-size: 26px; font-weight: 400; }
.explore-empty p { color: var(--muted); font-size: 14px; max-width: 29rem; margin-top: 12px; }
.explore-empty-line { font-size: 14px; color: var(--muted); padding: 20px 0; }
.explore-empty-line .auth-toggle { padding: 0 4px; vertical-align: middle; }
.explore-distance-note { color: var(--muted); font-size: 12px; margin-block: 16px; }
.explore-distance-note a { display: inline-block; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.result-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 14px 0 0; }
.result-tags li { font-size: 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 12px; padding: 3px 9px; }
.explore-resolve { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); margin-top: 36px; }
.explore-resolve > summary { display: flex; align-items: center; min-height: 52px; padding: 12px 18px; color: var(--muted); font-size: 13px; }
.explore-resolve[open] > summary { border-bottom: 1px solid var(--border); color: var(--text); }
.explore-resolve-body { padding: 8px 18px 22px; }
.explore-resolve-body p { font-size: 13px; color: var(--muted); margin-block: 14px; }
.explore-resolve-body .button { margin-block: 8px; }
.explore-resolve-body code { font-size: 12px; overflow-wrap: anywhere; }
.resolve-card { border-top: 1px solid var(--border); padding-block: 14px; min-width: 0; }
.resolve-card h3 { font-size: 15px; }
.resolve-card a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1000px) {
  .explore-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .explore-workspace { grid-template-columns: 320px minmax(0, 1fr); gap: 32px; }
  .explore-panel { padding: 24px 22px; }
}
/* Room for the filters' rows beside the map on large screens. */
@media (min-width: 1200px) {
  .explore-workspace { grid-template-columns: 360px minmax(0, 1fr); }
}

/* Owner tag management on the saved places list. */
.tag-manager { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: clamp(16px, 4vw, 26px); margin-block: 24px; min-width: 0; }
.tag-manager > p { color: var(--muted); font-size: 13px; }
.traveller-imports .tag-inventory, .traveller-imports .place-tags { padding-left: 0; }
.tag-inventory { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; margin-block: 16px; }
.tag-inventory li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.tag-count { color: var(--subtle); font-size: 11px; font-variant-numeric: tabular-nums; }
.tag-pill { display: inline-flex; align-items: center; border: 1px solid var(--accent); border-radius: 14px; padding: 4px 11px; color: var(--accent); font-size: 12px; overflow-wrap: anywhere; }
.tag-pill-warn { border-color: var(--danger); color: var(--danger); margin-left: 8px; vertical-align: middle; }
.tag-create { display: grid; gap: 8px; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.tag-create label { font-size: 13px; }
.tag-create input { width: 100%; min-width: 0; min-height: 48px; padding: 11px 12px; border: 1px solid #46515e; border-radius: 4px; background: var(--bg); color: var(--text); font-size: 16px; }
.tag-create .button { justify-self: start; }
.place-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 0; margin-block: 16px; }
.place-tags li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.traveller-imports .tag-remove { min-height: 44px; padding: 8px 10px; border: 0; background: transparent; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.tag-add { display: grid; gap: 8px; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 8px; }
.tag-add label { font-size: 13px; color: var(--muted); }
.tag-add select { width: 100%; min-width: 0; min-height: 48px; padding: 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: 16px; }
.tag-add .button { justify-self: start; }
@media (min-width: 600px) {
  .tag-create, .tag-add { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .tag-create label, .tag-add label { grid-column: 1 / -1; }
}
@media (hover: hover) {
  .tag-chip:hover { border-color: var(--accent); }
  .traveller-imports .tag-remove:hover { color: var(--danger); }
}

/* ---------------------------------------------------------------------------
   Admin interface.

   A separate surface from the product, not a skin of it. The reading experience
   is warm, serif and centred on a measure; the admin is a cool, dense tool with
   a system typeface, tabular numerals, square corners and full-bleed width. The
   theme repaints the shared custom properties, so components reused here follow
   automatically instead of needing parallel rules. A single desaturated amber
   survives as the only warm note, to keep it recognisably Traveller.
   --------------------------------------------------------------------------- */
/* The admin keeps its cooler, denser character in light too: a paler, greyer
   paper than the product's warm one, so the two surfaces stay distinguishable
   at a glance rather than only by their chrome. */
@media (prefers-color-scheme: light) {
  html[data-theme="traveller-admin"]:not([data-appearance="dark"]) {
    color-scheme: light;
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-raised: #e9ebef;
    --text: #15181c;
    --muted: #4d5560;
    --subtle: #5d6671;
    --border: #d3d7dd;
    --accent: #8a5f22;
    --accent-soft: #f3ece0;
    --on-accent: #ffffff;
    --danger: #a3271c;
    --ok: #1d6f5c;
  }
}

html[data-theme="traveller-admin"][data-appearance="light"] {
  color-scheme: light;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-raised: #e9ebef;
  --text: #15181c;
  --muted: #4d5560;
  --subtle: #5d6671;
  --border: #d3d7dd;
  --accent: #8a5f22;
  --accent-soft: #f3ece0;
  --on-accent: #ffffff;
  --danger: #a3271c;
  --ok: #1d6f5c;
}

[data-theme="traveller-admin"] {
  --bg: #0d1013;
  --surface: #14181d;
  --surface-raised: #1b2027;
  --text: #dfe4ea;
  --muted: #94a0ad;
  --subtle: #6d7986;
  --border: #262d36;
  --accent: #c9974e;
  --accent-soft: #221c12;
  --on-accent: #12100c;
  --danger: #e2857c;
  --ok: #6fb2a0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
}
[data-theme="traveller-admin"] body,
.admin-body { margin: 0; background: var(--bg); }
.admin-root { display: block; max-width: none; margin: 0; padding: 0; }
.admin-root h1, .admin-root h2 { font-family: inherit; letter-spacing: -.01em; }
.admin-flash { border-left: 3px solid var(--border); padding: 10px 16px; font-size: 13px; }
.admin-flash p { margin: 0; }
.admin-flash-info { border-left-color: var(--ok); background: var(--surface); color: var(--text); }
.admin-flash-error { border-left-color: var(--danger); background: var(--surface); color: var(--danger); }

/* Admin shell: sidebar plus a dense data table.
   Mobile first — the sidebar collapses to a strip and the table scrolls. */
.admin-shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.admin-sidebar { border-bottom: 1px solid var(--border); background: var(--surface); padding: 16px 20px; }
.admin-brand { margin: 0 0 10px; color: var(--subtle); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.admin-sidebar nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.admin-sidebar nav a { min-height: 44px; display: inline-flex; align-items: center; border-radius: 2px; padding: 8px 12px; color: var(--muted); font-size: 13px; text-decoration: none; }
.admin-sidebar nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.admin-main { min-width: 0; padding: 20px; }
.admin-topbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.admin-topbar h1 { margin: 0; font-size: 18px; letter-spacing: .01em; text-transform: uppercase; }
.admin-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.admin-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; border-bottom: 1px solid var(--border); padding-block: 16px; }
.admin-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.admin-field label { color: var(--muted); font-size: 12px; }
.admin-field input, .admin-field select { width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 2px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 16px; }
.admin-field input:focus-visible, .admin-field select:focus-visible { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -2px; }
.admin-field-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.admin-root .button { min-height: 38px; border-radius: 2px; padding: 8px 14px; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.button-quiet { border-color: var(--border); background: var(--surface-raised); color: var(--text); }
.button-danger { border-color: var(--danger); background: transparent; color: var(--danger); }
.admin-batch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px solid var(--accent); border-radius: 2px; background: var(--accent-soft); padding: 8px 12px; margin-top: 16px; }
.admin-batch p { margin: 0; color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.admin-empty { color: var(--muted); margin-top: 24px; font-size: 13px; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 16px; display: block; overflow-x: auto; font-variant-numeric: tabular-nums; }
.admin-table th, .admin-table td { border-bottom: 1px solid var(--border); padding: 7px 12px; text-align: left; font-size: 12.5px; font-weight: 400; vertical-align: middle; }
.admin-table thead th { position: sticky; top: 0; z-index: 1; border-bottom-color: var(--accent); background: var(--surface); color: var(--subtle); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.admin-table tbody th { font-weight: 600; }
.admin-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .015); }
.admin-table tbody tr.is-selected { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.admin-table a { color: var(--accent); }
.admin-check { width: 44px; }
.admin-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.admin-hint { color: var(--subtle); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.admin-address { max-width: 34ch; color: var(--muted); }
.admin-panel { border: 1px solid var(--border); border-radius: 2px; background: var(--surface); padding: 12px 14px; margin-top: 16px; }
.admin-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.admin-panel-head h2 { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.admin-state { margin: 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.admin-state-running { color: var(--ok); }
.admin-state-paused { color: var(--accent); }
.admin-progress-text { margin: 8px 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* A newly issued API key: one click selects all of it, and it wraps rather than overflowing. */
.admin-secret { display: block; padding: 8px 10px; background: var(--surface-raised); border-radius: 4px; word-break: break-all; user-select: all; font-size: 13px; }
.admin-progress { height: 4px; background: var(--surface-raised); border-radius: 2px; overflow: hidden; }
.admin-progress span { display: block; height: 100%; background: var(--accent); }
.admin-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.admin-stale { color: var(--danger); }
.admin-root .tag-pill { border-radius: 2px; font-family: inherit; font-size: 11px; }
/* Opening hours: the whole week, so an unstated day is visibly not a closed one. */
.hours-week { border-collapse: collapse; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.hours-week th, .hours-week td { padding: 2px 12px 2px 0; text-align: left; font-size: 12.5px; font-weight: 400; }
.hours-week th { color: var(--muted); width: 96px; }
.hours-week tr[data-kind="closed"] td { color: var(--muted); }
.hours-week tr[data-kind="unknown"] td { color: var(--subtle); font-style: italic; }

/* What a job actually does: label/value pairs, not prose. */
.job-facts { margin: 12px 0 0; display: grid; gap: 6px; }
.job-facts > div { display: grid; grid-template-columns: minmax(84px, 92px) 1fr; gap: 10px; align-items: baseline; }
.job-facts dt { color: var(--subtle); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.job-facts dd { margin: 0; font-size: 12.5px; }
@media (max-width: 520px) { .job-facts > div { grid-template-columns: 1fr; gap: 1px; } }

/* Per-place job coverage: counts that double as filters. */
.coverage-summary { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.coverage-summary > li { margin: 0; }
.coverage-card { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 2px; background: var(--surface-raised); color: var(--text); text-decoration: none; }
.coverage-card:hover, .coverage-card:focus-visible { border-color: var(--accent); }
.coverage-card.is-selected { border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); background: var(--accent-soft); }
.coverage-count { font-size: 21px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.coverage-label { font-size: 12px; }
.coverage-hint { font-size: 10.5px; color: var(--subtle); }
.admin-table td .admin-hint { display: block; }

.admin-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-top: 1px solid var(--border); padding-block: 14px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.admin-pager a { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); }
@media (min-width: 900px) {
  .admin-shell { grid-template-columns: 220px 1fr; }
  .admin-sidebar { border-right: 1px solid var(--border); border-bottom: 0; padding: 24px 16px; }
  .admin-sidebar nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .admin-main { padding: 24px 28px; }
  .admin-table { display: table; }
}
@media (hover: hover) {
  .admin-sidebar nav a:hover { background: var(--surface-raised); color: var(--text); }
  .admin-table tbody tr:hover { background: var(--surface); }
}

.admin-exit { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.admin-exit a { color: var(--subtle); font-size: 12px; text-decoration: none; }

.admin-filter-row td { padding: 6px 12px 10px; border-bottom: 1px solid var(--border); background: var(--bg); }
.admin-filter-row input, .admin-filter-row select { width: 100%; min-width: 0; min-height: 30px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 2px; background: var(--surface-raised); color: var(--text); font-family: inherit; font-size: 12px; }
.admin-filter-row input:focus-visible, .admin-filter-row select:focus-visible { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -2px; }
.admin-filter-dates { display: flex; gap: 6px; }

.admin-inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-inline-form input { min-height: 30px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 2px; background: var(--surface-raised); color: var(--text); font-family: inherit; font-size: 12px; }
.admin-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-root .place-tags { margin-block: 6px; }
.admin-root .tag-add { border-top: 0; padding-top: 8px; margin-top: 8px; }
.admin-root .tag-add select { min-height: 34px; border-radius: 2px; font-family: inherit; font-size: 13px; }
.tag-chip-common { border-style: dashed; }

/* A short create form, not a filter bar: the field keeps a readable width and
   the button sits against it rather than being stretched by a grid track. */
.admin-create { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--border); padding-block: 16px; }
.admin-create .admin-field { flex: 1 1 260px; max-width: 360px; }
.admin-create .button { flex: 0 0 auto; }

.admin-figure { margin: 16px 0 0; }
.admin-figure img { display: block; width: 100%; max-width: 420px; height: auto; border: 1px solid var(--border); border-radius: 2px; background: var(--surface); }
.admin-figure figcaption { margin-top: 6px; color: var(--subtle); font-size: 11px; }
.admin-figure figcaption a { color: var(--muted); }
.admin-figure-note { margin-top: 6px; }
.admin-link-button { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }
.admin-link-button:hover { color: var(--text); }

.place-preview { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; background: var(--surface-raised); margin-bottom: 12px; }
.place-preview-credit { margin: -6px 0 10px; color: var(--subtle); font-size: 11px; }
.place-preview-credit a { color: var(--muted); }

.match-pair { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; }
.match-side { border: 1px solid var(--border); border-radius: 2px; padding: 12px 14px; background: var(--bg); min-width: 0; }
.match-side h3 { margin: 2px 0 10px; font-size: 15px; }
.match-side .place-preview { aspect-ratio: 16 / 9; margin-bottom: 10px; }
.match-facts { margin: 0; font-size: 12px; }
.match-facts > div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 3px 0; }
.match-facts dt { color: var(--subtle); }
.match-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 860px) { .match-pair { grid-template-columns: 1fr 1fr; } }
.match-relisted { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.google-data pre { max-height: 32rem; overflow: auto; margin: 8px 0 0; padding: 10px; border: 1px solid var(--border); border-radius: 2px; background: var(--bg); color: var(--muted); font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Switches between lists on one admin page; the current one is marked like the sidebar's. */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 16px; }
.admin-tabs a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; color: var(--muted); font-size: 13px; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
/* A narrowing choice under the tabs: plain links, the current one marked. */
.admin-filter-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: -6px 0 16px; font-size: 12.5px; }
.admin-filter-links a { min-height: 32px; display: inline-flex; align-items: center; color: var(--muted); text-decoration: none; }
.admin-filter-links a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.admin-filter-links span[aria-current="page"] { color: var(--accent); }
.admin-filter-links select { min-height: 30px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 2px; background: var(--surface-raised); color: var(--text); font-family: inherit; font-size: 12px; }
.admin-focus { margin: 16px 0 0; }
/* Managing one account on /admin/users. */
.manage-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin: 10px 0 12px; }
.manage-facts dt { color: var(--subtle); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.manage-facts dd { margin: 2px 0 0; font-size: 13px; }
.manage-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
/* Google requests: what is free, what waits, what it would cost. */
.budget-table tbody th { min-width: 220px; }
.budget-note { display: block; max-width: 46ch; margin-top: 3px; color: var(--subtle); font-size: 11.5px; font-weight: 400; line-height: 1.4; }
.budget-spent { color: var(--danger); font-weight: 600; }
.budget-table tfoot th, .budget-table tfoot td { padding: 9px 12px; border-top: 1px solid var(--accent); font-size: 12.5px; font-weight: 700; }
.budget-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.reference-address { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.reference-address .admin-hint { margin-left: 8px; }

/* Keeping several suggestions as separate places. */
.candidate-keep { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.candidate-keep input { width: 16px; height: 16px; accent-color: var(--accent); }
.candidate-keep-name { display: grid; gap: 4px; margin-top: 6px; max-width: 28rem; }
.candidate-keep-name label { font-size: 11px; color: var(--muted); }
.candidate-keep-name input { min-height: 34px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: 14px; }
.candidate-keep-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.candidate-keep-bar .admin-hint { margin: 0; max-width: 46rem; }

/* An administrator viewing Traveller as someone else: impossible to miss, and
   always one click from stopping. Sticky, so it stays in view while scrolling. */
.impersonation-banner { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; border-bottom: 2px solid var(--danger); background: var(--surface-raised); color: var(--text); font-size: 14px; }
.impersonation-banner p { margin: 0; }
.impersonation-banner form { margin: 0; }

/* Every reference held for a venue: what it is, the link, where it came from. */
.venue-references dl { margin: 12px 0 0; display: grid; gap: 8px; }
.venue-references dl > div { display: grid; grid-template-columns: minmax(110px, 140px) 1fr; gap: 10px; align-items: baseline; }
.venue-references dt { color: var(--subtle); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.venue-references dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 12.5px; overflow-wrap: anywhere; }
.venue-references a { color: var(--accent); }
.venue-references code { font-size: 12px; }
@media (max-width: 520px) { .venue-references dl > div { grid-template-columns: 1fr; gap: 1px; } }

.appearance-toggle { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 5px; padding: 8px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
/* The header row is space-between, so without this the toggle is stranded in the
   middle once the navigation moves inline beside it. It belongs with the nav. */
.site-header-inner .appearance-toggle { margin-left: auto; }
/* With product sections the toggle sits alone in .header-tools. */
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.header-tools .appearance-toggle { margin-left: 0; }
/* Signing out of Traveller lives on the profile. */
.profile-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.profile-account h2 { font-size: 18px; overflow-wrap: anywhere; }
.profile-account .profile-signout-note { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.profile-account .button { display: inline-flex; align-items: center; gap: 8px; }
/* Too narrow for icons and labels in one row beside the wordmark: labels only. */
@media (min-width: 800px) and (max-width: 979px) {
  .site-header-sections .site-nav .ui-icon { display: none; }
}
.appearance-toggle:hover { color: var(--text); border-color: var(--accent); }
.appearance-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-root .appearance-toggle { border-radius: 2px; }
/* Icon-only appearance toggle: the label stays for assistive tech (sr-only),
   and the icon shown follows the JS-set state, defaulting to system. */
.appearance-icon { display: none; line-height: 0; }
.appearance-icon-system { display: inline-flex; }
[data-appearance-state="light"] .appearance-icon-system,
[data-appearance-state="dark"] .appearance-icon-system { display: none; }
[data-appearance-state="light"] .appearance-icon-light { display: inline-flex; }
[data-appearance-state="dark"] .appearance-icon-dark { display: inline-flex; }

/* Setlister: the gig diary, a gig's page, the log form and Spotify artists. */
.gig-page { display: grid; gap: 16px; align-content: start; max-width: 920px; padding-block: 12px 56px; }
.gig-page h1 { margin: 0; font-family: var(--serif); font-size: clamp(28px, 6vw, 40px); line-height: 1.1; overflow-wrap: anywhere; }
.gig-page .eyebrow { margin: 0; }
.gig-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 4px; }
.gig-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 13.5px; }
.gig-nav a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.gig-panel { padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.gig-panel h2, .gig-section h2 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gig-panel p { margin: 0 0 10px; }
.gig-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gig-panel summary { min-height: 40px; display: flex; align-items: center; color: var(--accent); cursor: pointer; font-weight: 650; }
.gig-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.gig-stats div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.gig-stats strong { font-family: var(--serif); font-size: 28px; line-height: 1.1; }
.gig-stats span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.gig-filter input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 16px; }
.gig-section { display: grid; gap: 10px; }
.gig-section > .near-hint { margin: -6px 0 0; }
.gig-year h3 { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 8px; font-family: var(--serif); font-size: 22px; }
.gig-year h3 span { color: var(--subtle); font-family: inherit; font-size: 13px; }
.gig-list { display: grid; gap: 8px; }
@media (min-width: 760px) { .gig-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gig-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; background: var(--surface); }
.gig-card.is-went { border-left-color: var(--accent); }
.gig-card.is-going { border-left-color: #3fa66b; }
.gig-card.is-want_to_go { border-left-style: dashed; }
.gig-card.is-off .gig-title { text-decoration: line-through; text-decoration-color: var(--subtle); }
.gig-card-link { display: grid; gap: 2px; color: var(--text); text-decoration: none; }
.gig-card-link:hover .gig-title, .gig-card-link:focus-visible .gig-title { color: var(--accent); }
.gig-date { color: var(--accent); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.gig-title { font-size: 17px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.gig-lineup, .gig-place { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.gig-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.gig-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 650; }
.gig-status.is-went { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.gig-status.is-going, .gig-status.has-tickets { border-color: #3fa66b; color: #3fa66b; }
.gig-status.is-want_to_go { border-style: dashed; }
.gig-kind, .gig-off { padding: 2px 8px; border-radius: 6px; background: var(--surface-raised); color: var(--muted); font-size: 11.5px; }
.gig-off { color: var(--danger); }
.gig-rating { color: var(--accent); font-size: 12.5px; letter-spacing: 1px; }
.gig-answer { display: grid; gap: 6px; }
.gig-answer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gig-older summary { min-height: 40px; color: var(--muted); cursor: pointer; }
.gig-older .gig-list { margin-top: 8px; }
.gig-head { display: grid; gap: 6px; }
.gig-head .gig-date { margin: 0; font-size: 14px; }
.gig-head .gig-place { margin: 0; font-size: 15px; }
.gig-detail { display: grid; gap: 16px; }
.gig-status-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gig-form { display: grid; gap: 12px; }
.gig-field { display: grid; gap: 6px; min-width: 0; }
.gig-field label, .gig-label { color: var(--muted); font-size: 13px; }
.gig-field input, .gig-field textarea { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.gig-field textarea { min-height: 96px; resize: vertical; }
.gig-field .auth-toggle { justify-self: start; }
.gig-field .near-hint { margin: 0; }
.gig-narrow { max-width: 160px; }
.gig-row { display: grid; gap: 12px; }
@media (min-width: 640px) { .gig-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.gig-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.gig-choice legend { width: 100%; margin-bottom: 6px; padding: 0; color: var(--muted); font-size: 13px; }
.gig-choice label { position: relative; display: inline-flex; }
.gig-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gig-choice span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 14px; cursor: pointer; }
.gig-choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 650; }
.gig-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.gig-form > .button { justify-self: start; }
.gig-acts { display: grid; gap: 2px; margin: 0 0 10px; padding: 0; list-style: none; }
.gig-acts li { display: flex; align-items: center; gap: 6px; min-height: 44px; border-bottom: 1px solid var(--border); }
.gig-acts li:last-child { border-bottom: 0; }
.gig-acts label { display: flex; flex: 1; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; min-width: 0; }
.gig-acts input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.gig-act-name { font-weight: 600; overflow-wrap: anywhere; }
.gig-act-role { color: var(--subtle); font-size: 12px; }
.gig-spotify-link, .spotify-log { color: var(--accent); font-size: 12.5px; white-space: nowrap; }
.gig-remove { margin: 0; }
.gig-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.seen-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; margin: 12px 0; padding: 0; list-style: none; }
.seen-ticks label { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--border); cursor: pointer; }
.spotify-artists { display: grid; gap: 0; margin: 12px 0; padding: 0; list-style: none; }
.spotify-artists li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.spotify-artist-name { color: var(--text); font-weight: 650; overflow-wrap: anywhere; }
.spotify-artist-name:hover, .spotify-artist-name:focus-visible { color: var(--accent); }
.spotify-artist-sources { flex: 1 1 160px; color: var(--subtle); font-size: 12.5px; }
.spotify-credit { margin-top: 8px; }