/* GigFlower's look: white cards floating over a sunny flower pattern, one clear blue for anything you
   press, and green, amber and red for how good a match a venue is. */
:root {
  --bg: #dfeed7;
  --surface: #ffffff;
  --surface-soft: #f4f7fb; /* boxes inside a card: Location, About, the Contact tiles */
  --surface-sunk: #eef3f8; /* the message */
  --text: #16253a;
  --muted: #56697c; /* at least 4.5:1 on white and on the boxes inside cards */
  --line: #e1e8ef;
  --line-strong: #c9d6e2;
  --accent: #1768ac; /* white text on it, and it on white or the soft boxes, at least 4.5:1 */
  --accent-strong: #105591;
  --accent-text: #ffffff;
  --accent-soft: #e9f2fc;
  --accent-line: #5b8fc4; /* outlines of things you can press: 3:1 on white */
  --good: #23743a;
  --good-bg: #e1f3e3;
  --warn: #8a5c00;
  --warn-bg: #fdf1cc;
  --warn-line: #efd58a;
  --caution: #a65b00; /* "Fill in [Your Name]" under the message */
  --bad: #b3261e;
  --bad-bg: #fde4e1;
  --neutral: #52677a;
  --neutral-bg: #edf2f6;
  --star: #e2a300;
  --radius: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 42, 67, 0.05), 0 8px 24px rgba(16, 42, 67, 0.09);
  --pattern: url("/img/flowers-light.svg");
  --page-max: 980px;
  --gutter: 1rem;
  /* The top bar stays in view as the page scrolls: --topbar-top is the gap above it, --topbar-height
     its height (measured in main.mjs), and --below-topbar where the page's content starts under it. */
  --topbar-top: 0.75rem;
  --topbar-height: 0px;
  --topbar-scale: 1; /* smaller on narrower screens once scrolled: see html.scrolled */
  --below-topbar: calc(var(--topbar-top) + var(--topbar-height) + 1rem);
}
/* The venues page is wider: the list and the open venue side by side. */
body[data-page="venues"] { --page-max: 1440px; }

/* Always the sunny look, even if a visitor's device is set to dark mode.
   frontend/img/flowers-dark.svg is unused now; kept on disk in case that changes later. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Anything scrolled into view (a venue, a question, the keyboard focus) stops below the top bar,
   not under it. */
html { scroll-padding-top: var(--below-topbar); }

body {
  margin: 0;
  background: var(--bg) var(--pattern) 0 0 / 360px 360px;
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 0.75rem; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Line icons (icons.mjs), the size and color of the text around them. */
.icon {
  width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.22em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.page { max-width: var(--page-max); margin: 0 auto; padding: 1rem var(--gutter) 3rem; }

/* Top bar: a white card across the top that stays in view as the page scrolls (above the page, below
   dialogs and messages; a little smaller on narrower screens once scrolled). The logo, then whatever
   the page puts there (the venues page: its search, tabs and map button), then Feedback and Account. */
.topbar {
  position: sticky; top: var(--topbar-top); z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  width: calc(min(100%, var(--page-max)) - 2 * var(--gutter)); margin: var(--topbar-top) auto 0; padding: 0.6rem 0.9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.topbar .brand {
  order: 1; display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
  font-family: "Comfortaa", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.65rem; font-weight: 700;
  text-decoration: none; color: var(--text);
}
.brand-mark { display: block; }
/* The first thing the keyboard reaches (main.mjs): out of sight until then, then over the logo. */
.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: absolute; top: 0.45rem; left: 0.6rem; z-index: 1; box-shadow: var(--shadow); }
.topbar-slot { order: 2; flex: 1 1 auto; min-width: 0; display: flex; }
.topbar-slot:empty { display: none; }
.topbar .who { order: 3; margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.who .btn-icon { font-size: 1.05em; }
.beta-tag {
  align-self: flex-start; margin-top: 0.15rem; padding: 0.05rem 0.4rem; border-radius: 999px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
}
/* Not quite room for it all on one line: Feedback and Account go up beside the logo, and the
   page's own controls take a line of their own. */
@media (max-width: 79.99rem) {
  .topbar .who { order: 2; }
  .topbar-slot { order: 3; flex-basis: 100%; }
}
/* One line, just: Feedback and Account as icons (still named for screen readers), no beta tag. */
@media (min-width: 80rem) and (max-width: 87.99rem) {
  body[data-page="venues"] .topbar .who-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body[data-page="venues"] .topbar .beta-tag { display: none; }
}

/* The venues page's controls in the top bar: the area as a search, the tabs, the map button. */
.venues-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; width: 100%; }
.venues-toolbar .tabs { padding-left: 1rem; border-left: 1px solid var(--line); }
.venues-toolbar .map-toggle { margin-left: auto; }
.area-search { display: flex; align-items: stretch; gap: 0.5rem; margin: 0; }
.area-search-fields {
  display: flex; align-items: stretch; min-width: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface);
}
.area-search-fields:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(23, 104, 172, 0.22); }
.area-search-zip { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding-left: 0.75rem; color: var(--accent); font-size: 1rem; font-weight: 400; cursor: text; }
.area-search .area-search-zip input { width: 5.25rem; padding: 0.5rem 0.35rem; border: 0; background: transparent; font-weight: 600; }
.area-search select { width: auto; border: 0; border-left: 1px solid var(--line); border-radius: 0 var(--radius-md) var(--radius-md) 0; background-color: transparent; }
.area-search input:focus-visible, .area-search select:focus-visible { outline: none; }
.area-search .btn { padding-inline: 1.35rem; }
.map-toggle { gap: 0.45rem; }

/* Buttons and inputs. Filled for the main thing to do (and a pressed toggle); outlined for the rest. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.55rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 600; line-height: 1.25;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.secondary { background: var(--surface); color: var(--accent); border-color: var(--accent-line); }
.btn.secondary:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.btn.danger { background: var(--surface); color: var(--bad); border-color: var(--bad); }
.btn.danger:hover { background: var(--bad-bg); }
.btn.small { padding: 0.35rem 0.75rem; font-size: 0.875rem; border-radius: var(--radius-sm); }
.btn .icon { width: 1.15em; height: 1.15em; }
.push-right { margin-left: auto; }

label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], select, textarea {
  width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit;
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 2.2rem; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356697c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.7rem center / 1rem 1rem;
}
textarea { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin-right: 0.4rem; vertical-align: -0.15rem; accent-color: var(--accent); }
input[type="radio"] { width: 1rem; height: 1rem; margin: 0 0.45rem 0 0; accent-color: var(--accent); }
.check { display: inline-flex; align-items: center; font-weight: 500; margin: 0; cursor: pointer; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow);
}

.error { color: var(--bad); background: var(--bad-bg); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin: 0 0 0.75rem; }
.notice { color: var(--warn); background: var(--warn-bg); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin: 0 0 1rem; }
/* A note under a box about what was typed (it never stops the form). */
.field-hint { color: var(--warn); margin: 0.3rem 0 0; }

/* Sign in */
.auth { max-width: 26rem; margin: 3rem auto 0; }
.auth .brand-home { display: block; color: var(--text); text-decoration: none; }
.auth .brand-mark { display: block; margin: 0 auto 0.75rem; }
.auth .brand-title { display: block; text-align: center; margin: 0 0 0.15rem; font-family: "Comfortaa", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 2rem; font-weight: 700; }
.auth .tagline { text-align: center; margin: 0 0 1.25rem; }
.auth h1 { text-align: center; }
.auth .field { margin-bottom: 0.9rem; }
.auth form > .btn[type="submit"] { width: 100%; padding-block: 0.7rem; }
/* A label with a link or button at the other end ("Forgot your password?", "Show"). */
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.settings form.card .field { margin-bottom: 0.75rem; }
.password-card .field { max-width: 24rem; }
.auth .switch { text-align: center; margin: 1rem 0 0; }

/* Front page for visitors who aren't signed in. (Its columns can be narrower than the pictures in
   them, which shrink to fit: on the narrowest phones too.) */
.landing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.btn.big { padding: 0.85rem 1.6rem; font-size: 1.1rem; border-radius: var(--radius-md); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.hero-text {
  text-align: center; padding: 2.25rem 1.5rem 1.75rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero h1 { font-size: clamp(1.9rem, 6vw, 2.75rem); margin-bottom: 0.75rem; }
.hero .lead { font-size: 1.15rem; max-width: 40rem; margin: 0 auto 1.5rem; }
.eyebrow {
  display: inline-block; margin: 0 0 1rem; padding: 0.2rem 0.8rem; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn); font-size: 0.875rem; font-weight: 700;
}
.hero-actions { display: grid; justify-items: center; gap: 0.6rem; }
.hero-actions p { margin: 0; }
.hero-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
/* A thick white frame and a caption, so the screenshot reads as a picture rather than live controls. */
.hero-figure { margin: 0; }
.hero-shot img {
  display: block; width: 100%; height: auto; margin: 0 auto;
  border: 8px solid var(--surface); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow);
}
/* The screenshot opens the live sample area; the always-visible button says so (phones have no hover). */
.hero-shot-link { position: relative; display: block; border-radius: calc(var(--radius) + 4px); }
.hero-shot-link img { transition: transform 0.15s, box-shadow 0.15s; }
.hero-shot-link:hover img { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20, 50, 70, 0.24); }
.shot-cta {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); white-space: nowrap;
  padding: 0.65rem 1.25rem; font-size: 1.05rem; box-shadow: 0 6px 18px rgba(20, 50, 70, 0.3);
}
.hero-figure figcaption {
  width: fit-content; margin: 0.75rem auto 0; padding: 0.25rem 0.9rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; text-align: center;
}
/* Headings that sit straight on the flower pattern get a white pill, like the footer. */
.how h2, .closing h2 { text-align: center; }
.how h2 {
  width: fit-content; margin: 0 auto 1rem; padding: 0.3rem 1.1rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
}
/* (Not .steps and .step: those are a venue's progress, further down.) */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.how-step p { margin: 0; }
.step-number {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: 0.6rem;
  border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 800;
}
.story { padding: 1.5rem 1.75rem; }
.story blockquote { margin: 0; padding-left: 1rem; border-left: 4px solid var(--accent); font-size: 1.05rem; }
.story blockquote footer { color: var(--muted); font-size: 0.95rem; }
.story blockquote footer::before { content: "— "; }
.faq { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); padding: 1.5rem 1.75rem; }
.faq h2 { grid-column: 1 / -1; margin: 0; }
.faq-item h3 { margin-bottom: 0.25rem; }
.faq-item p { margin: 0; }
.closing {
  display: grid; justify-items: center; gap: 0.5rem; padding: 2rem 1rem; text-align: center;
  background: var(--accent); color: var(--accent-text); border-radius: var(--radius); box-shadow: var(--shadow);
}
.closing h2 { color: var(--accent-text); }
.closing .btn { background: var(--accent-text); color: var(--accent); border-color: var(--accent-text); }

/* The sample area (#/try): an intro with a sign-up button, and a nudge in place of the account tools. */
.demo-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
  margin-bottom: 1rem; border: 2px solid var(--accent-line);
}
.demo-banner p { margin: 0; flex: 1 1 20rem; }
.demo-nudge { display: grid; gap: 0.75rem; justify-items: start; padding: 0.9rem 1rem; border-radius: var(--radius-md); background: var(--surface-soft); }
.demo-nudge p { margin: 0; }
.map-snapshot { margin: 0 0 1rem; }
.map-snapshot-button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-md); }
.map-snapshot img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow); }
.map-snapshot figcaption {
  width: fit-content; margin: 0.5rem auto 0; padding: 0.2rem 0.8rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); text-align: center;
}

@media (max-width: 40rem) {
  .landing { gap: 1.75rem; }
  .hero-text { padding: 1.75rem 1.1rem 1.5rem; }
  .hero-shot img { max-width: 22rem; }
  .story, .faq { padding: 1.25rem 1.1rem; }
}

/* Terms of Service and Privacy Policy (standalone pages) */
.legal { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.75rem 1rem; }
.legal h2 { margin-top: 1.75rem; }
.legal p { overflow-wrap: anywhere; }
.auth .terms-note { text-align: center; margin: 0.75rem 0 0; }

/* Footer links on every page; a white pill so they stay readable over the flower pattern. */
.site-footer { text-align: center; padding: 0 1rem 2rem; font-size: 0.875rem; }
.site-footer p {
  display: inline-block; margin: 0; padding: 0.3rem 0.9rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}

/* Areas */
.areas-head { display: flex; align-items: stretch; gap: 1rem; }
.areas-head-text { flex: 1 1 auto; min-width: 0; }
.areas-head-text p { margin: 0; }
.default-message-btn { flex: 0 1 17rem; padding: 0.75rem 1.1rem; font-size: 1.05rem; text-align: center; }
.follow-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin: 0 0 1.5rem; }
.follow-form .zip { width: 9rem; }
.follow-form .radius { width: 9rem; }
.area-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.area .title { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.15rem; }
.area-map-link { display: block; }
.area-map-static { display: block; width: 100%; height: auto; border-radius: var(--radius-md); margin: 0.5rem 0; }
.area .state { margin: 0.35rem 0 0.6rem; }
.area .area-outreach, .area .area-pitch-nudge { display: block; width: fit-content; margin: -0.3rem 0 0.6rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.area .area-outreach:hover, .area .area-pitch-nudge:hover { text-decoration: underline; }
.area .area-results { margin: -0.45rem 0 0.6rem; font-weight: 600; color: var(--good); }
.area .area-due { display: inline-block; margin: -0.3rem 0 0.7rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; color: var(--warn); background: var(--warn-bg); text-decoration: none; }
.area .area-due:hover { text-decoration: underline; }
.attention .actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.area .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
progress { width: 100%; height: 0.6rem; accent-color: var(--accent); }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); grid-column: 1 / -1; }

.crumbs { margin-bottom: 0.75rem; font-size: 0.9rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.page-head-card { margin-bottom: 1rem; }

/* Your pitch: the details on the left, the message they make (and its checklist) on the right. */
.settings > .card + .card { margin-top: 1rem; }
.settings .page-head-card + .card { margin-top: 0; }
.pitch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem 1.5rem; margin: 0.5rem 0 1rem; }
.pitch-fields .field { margin-bottom: 0.7rem; }
.pitch-result { display: grid; align-content: start; gap: 0.5rem; }
.settings .message-preview { display: block; background: var(--surface-sunk); border-radius: var(--radius-md); padding: 0.8rem 0.95rem; margin: 0; white-space: pre-wrap; font-size: 0.95rem; }
.checklist { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; display: grid; gap: 0.15rem; }
.checklist .ok { color: var(--good); }
.checklist .todo { color: var(--warn); font-weight: 600; }
.own-message summary, .settings details > summary { font-weight: 600; color: var(--accent); font-size: 1rem; }
.own-message[open] summary, .settings details[open] > summary { margin-bottom: 0.75rem; }
/* Your follow-up and check-in, each in its own box with Save. */
.later-message { display: grid; gap: 0.4rem; margin-top: 1rem; }
.later-message .panel-heading { margin: 0; }
.check-field { margin: 0.75rem 0 0; }
.account-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.account-who p { margin: 0; overflow-wrap: anywhere; }
/* "Please confirm your email" (Your areas and the Account page), and changing the address. */
.confirm-email p { margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.page-head-card .confirm-email { margin: 0.9rem 0 0; }
/* On Your areas, under the follow-ups due: one quiet line, its buttons beside it when there's room. */
.confirm-email.slim {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; padding: 0.45rem 0.75rem;
  color: var(--text); background: var(--surface); border: 1px solid var(--line); font-size: 0.9rem;
}
.confirm-email.slim p { flex: 1 1 16rem; margin: 0; }
.confirm-email.slim .actions { gap: 0.4rem; }
.change-email { margin-top: 1.1rem; }
.change-email h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
.change-email .field { max-width: 24rem; margin-bottom: 0.75rem; }
.change-email .notice p { margin: 0; overflow-wrap: anywhere; }
.check-field p { margin: 0.1rem 0 0 1.5rem; }
.panel-heading { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 40rem) {
  .pitch-grid { grid-template-columns: 1fr; }
}
details summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
details ul { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.saved { color: var(--muted); font-size: 0.85rem; }

/* Rating tags: green for a good match, amber for one that might need convincing, gray for the
   places left out. The mark beside the words shows on phones. */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.75rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 700; line-height: 1.25; text-align: center;
}
.badge .icon { display: none; width: 1.15em; height: 1.15em; }
.badge.good { color: var(--good); background: var(--good-bg); }
.badge.warn { color: var(--warn); background: var(--warn-bg); }
.badge.neutral { color: var(--neutral); background: var(--neutral-bg); }
.chip { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral); white-space: nowrap; }

/* --- The venues page --- */

/* The tabs, in the top bar: the one showing is filled, and a count of follow-ups due stands out. */
.tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tab {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.25; cursor: pointer; white-space: nowrap;
}
.tab:hover { border-color: var(--accent); }
.tab[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.tab-count { font-weight: 700; color: var(--muted); }
.tab[aria-pressed="true"] .tab-count { color: inherit; }
.tab.alert .tab-count { padding: 0.05rem 0.5rem; border-radius: 999px; background: #ffd970; color: #4f3600; }

/* The list, and beside it on wide screens, the open venue. */
.venues-body { display: grid; gap: 1rem; align-items: start; }
.list-panel { min-width: 0; }
.list-head { display: grid; gap: 0.6rem; }
.list-head .crumbs { margin: 0; }
.crumbs a:not(.btn) { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; text-decoration: none; }
.crumbs a:not(.btn):hover { text-decoration: underline; }
.list-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; }
.list-title { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: 0; }
.find-sort { display: flex; align-items: center; gap: 0.15rem; }
.find-sort label { margin: 0; font-size: 0.95rem; font-weight: 500; }
.find-sort select { width: auto; padding: 0.3rem 1.75rem 0.3rem 0.35rem; border-color: transparent; font-weight: 600; background-position: right 0.35rem center; }
.find-sort select:hover { border-color: var(--line-strong); }
.find-search { position: relative; }
.find-search .icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.find-search input { padding-left: 2.5rem; border-radius: 999px; border-color: var(--line); background: var(--surface-soft); }
.list-scroll > .notice, .list-scroll > .error { margin: 0.75rem 0 0; }
.list-extras { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1rem 0 0.25rem; }
.wider-search { display: flex; width: fit-content; margin: 1rem auto 0; }
.left-out-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.left-out-note p { margin: 0; flex: 1 1 20rem; }
.outreach-tip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  color: var(--text); background: var(--accent-soft); border-left: 4px solid var(--accent);
}
.outreach-tip p { margin: 0; flex: 1 1 18rem; }
.map-status { margin: 0.75rem 0 0; }
.map-dock { position: relative; margin: 0.75rem 0 0; }
.map-dock:has(> .venues-map[hidden]) { display: none; }
.venues-map { height: 20rem; border-radius: var(--radius-md); overflow: hidden; background: var(--neutral-bg); }
.map-expand { display: none; }
.list-panel > .map-snapshot { margin: 0.75rem 0 0; }
.venue-list > .map-snapshot { margin: 0; } /* on a phone, after the first few venues (placeSnapshot) */

/* A venue's row. As wide as the desktop list: its picture on the left, then the name and rating,
   what kind of place, how to reach them, and how far reaching out has got. Narrower (a phone, or a
   narrow list): the rating goes under the name when they don't fit side by side, and the progress
   runs under the picture too. */
.venue-list { display: grid; margin-top: 0.75rem; container: venues / inline-size; }
.venue-row { min-width: 0; }
.venue-row.hidden-venue { opacity: 0.6; outline: 2px solid var(--bad); outline-offset: -2px; border-radius: var(--radius-md); }
.row-head { position: relative; display: flex; align-items: stretch; }
.row-toggle {
  --end: 1.5rem;
  flex: 1; min-width: 0; display: grid; align-items: center; column-gap: 0.9rem; row-gap: 0.15rem;
  grid-template-columns: 5.5rem minmax(0, 1fr) var(--end);
  grid-template-areas: "pic name chev" "pic sub chev" "pic contacts chev" "pic progress chev";
  padding: 0.8rem 0.9rem; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--radius-md);
  color: inherit; font: inherit; cursor: pointer;
}
.row-toggle:hover { background: var(--surface-soft); }
/* The venue's picture: for now a blank tile with a faint flower, where a photo could go later. */
.venue-pic {
  grid-area: pic; align-self: stretch; position: relative; min-height: 5.5rem; overflow: hidden;
  border-radius: var(--radius-md); background: linear-gradient(135deg, var(--accent-soft), var(--good-bg));
}
.venue-pic::after { content: ""; position: absolute; inset: 0; background: url("/img/logo.svg") center / 2.4rem no-repeat; opacity: 0.4; }
/* A long name takes a second line rather than being cut short, and the rating goes under the name
   when they don't fit side by side. */
.name-line { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; min-width: 0; }
.name { min-width: 0; font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.name-line .badge { flex-shrink: 0; padding: 0.15rem 0.6rem; font-size: 0.78rem; }
.saved-mark { display: inline-flex; flex-shrink: 0; color: var(--star); }
.saved-mark .icon { width: 1rem; height: 1rem; }
.sub { grid-area: sub; min-width: 0; font-size: 0.9rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* How to reach the venue, in a few quiet words ("Booking email · Phone"); a booking email, the best
   contact, in green. */
.contact-cell { grid-area: contacts; min-width: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.4; }
.contact-icon { width: 1rem; height: 1rem; margin-right: 0.35rem; vertical-align: -0.18em; }
.contact-kind.strong { color: var(--good); font-weight: 600; }
.chev { grid-area: chev; justify-self: end; width: 1.3rem; height: 1.3rem; color: var(--muted); transition: transform 0.15s; }
.row-save {
  position: absolute; top: 50%; right: 2.6rem; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
}
.row-save .icon { width: 1.6rem; height: 1.6rem; }
.row-save:hover { background: var(--surface-soft); color: var(--text); }
.row-save[aria-pressed="true"] { color: var(--star); }
/* How far reaching out has got (an example in the sample area): four steps, as dots on a line with
   each one named under it, and beside them a tag saying what's next and when (a follow-up due:
   amber), how long it's been (waiting: blue), or their answer (a reply or a gig: green; a no: gray). */
/* The tag goes under the steps when there isn't room for both on one line. */
.row-progress { grid-area: progress; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.4rem 0.75rem; min-width: 0; margin-top: 0.5rem; }
.row-progress .steps { flex: 1 1 12.5rem; }
.steps { --dot: 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: grid; justify-items: center; align-content: start; gap: 0.25rem; min-width: 0; text-align: center; }
/* The line into each step from the one before it: green once the step is done, half green on the way
   to the current one. */
.step + .step::before { content: ""; position: absolute; top: calc(var(--dot) / 2 - 1.5px); right: 50%; width: 100%; height: 3px; background: var(--line-strong); }
.step:is(.done, .skipped)::before { background: var(--good); }
.step.current::before { background: linear-gradient(90deg, var(--good) 50%, var(--line-strong) 50%); }
.step-dot { position: relative; display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--line-strong); color: #ffffff; }
.step-dot .icon { width: 72%; height: 72%; stroke-width: 3; }
.step.done .step-dot { background: var(--good); }
.step.skipped .step-dot { background: var(--good-bg); color: var(--good); box-shadow: inset 0 0 0 1.5px var(--good); }
.step.current .step-dot { background: var(--warn-bg); color: #b27600; box-shadow: inset 0 0 0 2px #e2a300; }
.step.current .step-dot .icon { stroke-width: 2.5; }
/* A no: a gray cross, with a gray line into it, so it doesn't read as a success. */
.step.declined .step-dot { background: var(--neutral); }
.step-label { font-size: 0.7rem; line-height: 1.2; color: var(--muted); }
.status-chip { flex-shrink: 0; }
.row-progress .status-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; max-width: 6.5rem; padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm); font-size: 0.8rem; line-height: 1.2; white-space: normal;
}
.status-chip .icon { width: 1.1rem; height: 1.1rem; }
.status-chip.replied { background: var(--good-bg); color: var(--good); }
.status-chip.booked { background: var(--good); color: #ffffff; }
.status-chip:is(.due, .soon, .tryagain) { background: var(--warn-bg); color: var(--warn); }
.status-chip.waiting { background: var(--accent-soft); color: var(--accent); }
.status-chip.declined { background: var(--neutral-bg); color: var(--neutral); }
@container venues (width < 30rem) {
  .row-toggle {
    grid-template-columns: 4.5rem minmax(0, 1fr) var(--end);
    grid-template-areas: "pic name chev" "pic sub chev" "pic contacts chev" "progress progress chev";
    column-gap: 0.75rem; row-gap: 0.2rem;
  }
  .venue-pic { align-self: start; aspect-ratio: 1; min-height: 0; }
  /* What kind of place it is and its music take a second line too, breaking between the two (or
     inside one too long for a line of its own), so "live music ✓" is never cut off. */
  .sub { white-space: normal; }
  .sub-part { display: inline-block; }
  .row-toggle .contact-cell { margin-top: 0.2rem; }
  .contact-icon { display: none; }
  .row-progress { margin-top: 0.65rem; }
}

/* Wide screens: the page fits the screen, with the list in one card and the open venue beside it in
   another, each scrolling on its own. In the list's card the map stays in view at the top once the
   count, sort and search have scrolled away, with the list scrolling beneath it (it's always shown
   here: no button to hide it). The open venue's row is highlighted; its star is the Save button beside it. */
@media (min-width: 64rem) {
  :root { --desk-map: clamp(9rem, 28vh, 20rem); }
  body[data-page="venues"] { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  body[data-page="venues"] #app { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; padding-bottom: 0.75rem; }
  body[data-page="venues"] .site-footer { padding-bottom: 0.75rem; }
  .venues-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .venues-body { flex: 1; min-height: 0; grid-template-columns: minmax(20rem, 1fr) minmax(0, 1.75fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .list-panel {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 0.65rem 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    scroll-padding-top: calc(var(--desk-map) + 1.5rem + 1px); /* a venue scrolled to stops below the map */
  }
  .list-panel:has(> .map-snapshot) { scroll-padding-top: calc(var(--desk-map) + 5rem); }
  .list-panel > :not(.list-scroll), .list-scroll > :not(.venue-list) { margin-inline: 0.35rem; }
  .list-panel > .list-head { padding-top: 1rem; }
  /* The map (in the sample area, its picture) on a white strip that hides the list scrolling beneath it. */
  .list-panel > .map-dock, .list-panel > .map-snapshot {
    position: sticky; top: 0; z-index: 2; margin: 0; padding: 0.75rem 0.35rem; background: var(--surface); border-bottom: 1px solid var(--line);
  }
  .map-dock .venues-map { height: var(--desk-map); }
  .list-panel > .map-snapshot img { height: var(--desk-map); object-fit: cover; }
  .venues-toolbar .map-toggle { display: none; }
  .list-panel .empty { box-shadow: none; border: 0; padding: 2.5rem 1rem; }
  .venue-row { border-bottom: 1px solid var(--line); }
  .venue-row:last-child, .venue-row.open, .venue-row:has(+ .venue-row.open) { border-bottom-color: transparent; }
  .venue-row.open .row-toggle { background: var(--accent-soft); border-color: var(--accent-line); }
  .row-save { display: none; }
  .row-toggle .chev { transform: rotate(-90deg); }
  .detail-panel {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 1.2rem 1.25rem 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  }
}
/* Wide screens under 900px tall (most laptops): a shorter map, leaving more room for the list; under
   800px, the sample area's map picture without its caption too (pressing the picture says the same). */
@media (min-width: 64rem) and (max-height: 56.24rem) {
  :root { --desk-map: clamp(7rem, 17vh, 20rem); }
}
@media (min-width: 64rem) and (max-height: 50rem) {
  .list-panel > .map-snapshot figcaption { display: none; }
  .list-panel:has(> .map-snapshot) { scroll-padding-top: calc(var(--desk-map) + 1.5rem + 1px); }
}
/* Wide screens: the list about two fifths of the page, as in the design. */
@media (min-width: 80rem) {
  .venues-body { grid-template-columns: minmax(22rem, 2fr) minmax(0, 3fr); }
  .detail-panel { padding: 1.35rem 1.5rem 1.5rem; }
}
/* Narrower screens: each venue is a card of its own that opens in place, with the star and the
   arrow at its top right, level with the name. */
@media (max-width: 63.99rem) {
  .detail-panel { display: none; }
  .list-head { padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .venue-list { gap: 0.75rem; }
  .venue-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .row-toggle { --end: 0px; position: relative; padding: 1rem 1.1rem; border-radius: var(--radius); }
  .row-toggle:hover { background: none; }
  .row-toggle .chev { grid-area: auto; position: absolute; top: 1.15rem; right: 1.1rem; width: 1.5rem; height: 1.5rem; color: var(--accent); }
  .row-save { top: 0.6rem; right: 2.85rem; transform: none; }
  .name-line { padding-right: 4.4rem; } /* (the line under it starts below the star and arrow) */
  .venue-row.open .row-toggle .chev { transform: rotate(180deg); }
  .venue-row.open .name { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
  .venue-row.open .sub { white-space: normal; }
  .venue-row.open :is(.contact-cell, .row-progress) { display: none; } /* the open venue shows its progress in full */
  .venue-row > .venue-detail { padding: 0 1.1rem 1.2rem; }
}
@media (max-width: 40rem) {
  .row-toggle .badge .icon { display: block; }
  .row-toggle .name { font-size: 1.1rem; }
  .venue-row > .venue-detail { padding: 0 1rem 1.1rem; }
  .row-toggle { padding-inline: 1rem; }
}
/* Where the list is narrow (a phone, or beside the open venue): the search through the venues and the
   sort share a line, so the first venue comes up sooner. (SHORT_SEARCH in venues.mjs gives the search
   a shorter hint where it's narrowest.) */
@media (max-width: 40rem), (min-width: 64rem) {
  .list-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "crumbs crumbs" "title title" "search sort"; column-gap: 0.4rem; }
  .list-head .crumbs { grid-area: crumbs; }
  .list-head-row { display: contents; }
  .list-title { grid-area: title; }
  .find-search { grid-area: search; }
  .find-sort { grid-area: sort; }
  .find-sort select { height: 100%; }
  .find-sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* still read out */
}

/* Narrower screens: once the page is scrolled down, the top bar gets a little smaller. The map stays in
   view under it as the list scrolls up beneath (paintDock in venues.mjs docks it), a little smaller
   there too, with Expand map under it to bring it back to full size. */
@media (max-width: 63.99rem) {
  :root { --map-full: 20rem; --map-compact: 8rem; --dock-gap: 0.5rem; --expand-room: 2.5rem; /* Expand map, under the smaller map */ }
  html.scrolled { --topbar-scale: 0.9; }
  .topbar { transform-origin: 50% 0; transition: transform 0.2s ease; }
  html.scrolled .topbar { transform: scale(var(--topbar-scale)); }
  /* The map getting smaller moves the list up with it; the browser mustn't scroll to make up for that. */
  body[data-page="venues"] { overflow-anchor: none; }
  .map-dock {
    position: sticky; z-index: 5; transition: top 0.2s ease;
    top: calc(var(--topbar-top) + var(--topbar-height) * var(--topbar-scale) + var(--dock-gap));
  }
  .map-dock .venues-map { height: var(--map-full); box-shadow: var(--shadow); transition: height 0.2s ease; }
  .map-dock.compact .venues-map { height: var(--map-compact); }
  .map-dock.compact .map-expand {
    display: inline-flex; position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); box-shadow: var(--shadow);
  }
  /* The page stays as long while the map is smaller, so the end of the list doesn't shift for lack of room. */
  .list-panel { transition: padding-bottom 0.2s ease; }
  .list-panel:has(> .map-dock.compact) { padding-bottom: calc(var(--map-full) - var(--map-compact)); }
  /* A venue scrolled to stops below the docked map, which is smaller once it's docked, with Expand
     map under it: so the venue's name isn't hidden under that. (The scroll can be what docks the
     map, which then moves the list up as it gets smaller: room for Expand map is left either way.) */
  html:has(.map-dock:not(.compact) > .venues-map:not([hidden])) {
    scroll-padding-top: calc(var(--topbar-top) + var(--topbar-height) * 0.9 + var(--dock-gap) + var(--map-full) + var(--expand-room) + 0.75rem);
  }
  html:has(.map-dock.compact) {
    scroll-padding-top: calc(var(--topbar-top) + var(--topbar-height) * 0.9 + var(--dock-gap) + var(--map-compact) + var(--expand-room) + 0.75rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .topbar, .map-dock, .map-dock .venues-map, .list-panel { transition: none; }
}

/* The open venue (venue-card.mjs). Its layout follows its own width: two columns of boxes when
   there's room, one flowing column on a phone. */
.venue-detail { container: detail / inline-size; display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.venue-detail > * { margin: 0; }
.detail-placeholder { display: grid; justify-items: center; gap: 0.5rem; padding: 3rem 1rem; color: var(--muted); text-align: center; }
.detail-placeholder .icon { width: 2.25rem; height: 2.25rem; color: var(--accent-line); }
.detail-placeholder p { margin: 0; }
.detail-head { display: grid; gap: 0.3rem; }
.detail-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; }
.detail-save[aria-pressed="true"] .icon { color: var(--star); }
.prev-next { display: flex; align-items: center; margin-left: 0.25rem; padding-left: 0.5rem; border-left: 1px solid var(--line); }
.step-btn {
  display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.35rem 0.55rem; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--accent); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.step-btn + .step-btn { margin-left: 0.15rem; position: relative; }
.step-btn + .step-btn::before { content: ""; position: absolute; left: -0.1rem; top: 25%; bottom: 25%; border-left: 1px solid var(--line-strong); }
.step-btn:hover:not(:disabled) { background: var(--accent-soft); }
.step-btn:disabled { color: var(--muted); opacity: 0.45; cursor: default; }
.detail-name { margin: 0.55rem 0 0; font-size: 2rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.detail-sub { margin: 0; font-size: 1.05rem; color: var(--muted); }
.report-warning { display: flex; align-items: center; gap: 0.4rem; color: var(--bad); font-weight: 600; }

/* The Contact buttons: beside the list, a row of icon links under the name; in a venue opened in
   its row, tiles under a "Contact" heading, after where it is. */
.quick-contact .section-title { display: none; margin: 0 0 0.65rem; font-size: 1.1rem; font-weight: 700; }
.quick-list { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; }
.quick { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0; color: var(--accent); font-weight: 500; text-decoration: none; }
.quick:hover .quick-label { text-decoration: underline; }
/* On a computer, a phone number to call from your phone: not a link. */
span.quick { color: var(--text); }
span.quick:hover .quick-label { text-decoration: none; }
.quick .icon { width: 1.35rem; height: 1.35rem; }
.quick .quick-done { width: 1rem; height: 1rem; color: var(--good); stroke-width: 3; }
/* A venue opened in its row: where it is, the Contact tiles and your note, then your message with the
   button that sends it right under its first lines, then the progress and the rest (beside the list,
   what to do next comes first, and where it is last). */
.venue-row .venue-detail > * { order: 5; }
.venue-row .venue-detail > .report-warning { order: 0; }
.venue-row .venue-detail > .info-grid { order: 1; }
.venue-row .venue-detail > .quick-contact { order: 2; }
.venue-row .venue-detail > :is(.note, .notes) { order: 3; }
.venue-row .venue-detail > .work-grid { order: 4; }
.venue-row .quick-contact .section-title { display: block; }
.venue-row .quick-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.1rem, 1fr)); gap: 0.55rem; }
/* The narrowest phones: two by two, rather than three and one left over. */
@container detail (width < 18rem) { .venue-row .quick-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.venue-row .quick {
  flex-direction: column; justify-content: center; gap: 0.35rem; min-height: 4.4rem; padding: 0.6rem 0.4rem;
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--text); font-size: 0.85rem; line-height: 1.2; text-align: center;
}
.venue-row .quick:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.venue-row .quick:hover .quick-label { text-decoration: none; }
.venue-row .quick .icon { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.venue-row .quick.instagram .icon { color: #c13584; }
.venue-row .quick.facebook .icon { color: #1877f2; }
.venue-row .quick .quick-done { position: absolute; top: 0.35rem; right: 0.35rem; width: 0.95rem; height: 0.95rem; color: var(--good); }
/* A venue opened in its row has its name in the row, and More at the bottom. */
.venue-row .detail-head, .detail-panel .more-bottom { display: none; }

/* Location and About. */
.info-grid { display: grid; gap: 1rem; }
.info-card { min-width: 0; padding: 1rem 1.1rem; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-md); }
.info-card p { margin: 0 0 0.4rem; }
.info-card > :last-child { margin-bottom: 0; }
.card-title { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.75rem; font-size: 1.02rem; font-weight: 700; color: var(--text); letter-spacing: 0; }
.card-title .icon { width: 1.3rem; height: 1.3rem; color: var(--accent); }
.address { display: flex; align-items: flex-start; gap: 0.6rem; overflow-wrap: anywhere; }
.address .icon { margin-top: 0.1rem; color: var(--accent); }
.place-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.place-link a { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; }
.place-link .icon { width: 1.1rem; height: 1.1rem; }
.about-reasons { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.3rem; font-size: 0.95rem; }

/* Your note. */
.note { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: var(--radius-md); background: #fff8de; border: 1px solid #f0e1a8; }
.note-icon { margin-top: 0.15rem; color: var(--warn); }
.note-text { flex: 1; margin: 0; font-size: 0.95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes { display: grid; gap: 0.5rem; }
.notes label { margin: 0; }

/* Your message (or where things stand) beside "Contact them". */
.work-grid { display: grid; gap: 1rem; align-items: start; }
.work-card { display: grid; gap: 0.8rem; align-content: start; min-width: 0; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.work-card > * { margin: 0; }
.work-card > .card-title { margin: 0; }
.message-head .message-label { margin: 0; font-size: 1.02rem; font-weight: 700; }
.card-title-end { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.message-box { padding: 0.9rem 1rem; background: var(--surface-sunk); border-radius: var(--radius-md); }
.message-preview { margin: 0; white-space: pre-wrap; font-size: 0.95rem; line-height: 1.55; overflow-wrap: anywhere; }
.message-hints { display: flex; align-items: flex-start; gap: 0.45rem; color: var(--caution); font-size: 0.95rem; font-weight: 500; }
.message-hints .icon { margin-top: 0.12rem; }
.message-hints.ok { color: var(--good); }
.improve-row .btn { width: 100%; }
.message-editor { display: grid; gap: 0.5rem; }
.message-editor > p { margin: 0; }
.message-tools { display: grid; gap: 0.6rem; }
.message-tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.message-tool-row .btn { gap: 0.4rem; padding: 0.7rem 0.4rem; font-size: 0.95rem; }
.message-more { justify-self: center; display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 500; }
.message-more .flip { transform: rotate(180deg); }
.message-banner { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem 1.15rem; background: #fff7dc; border: 1px solid var(--warn-line); border-radius: var(--radius-md); }
.banner-icon { width: 1.6rem; height: 1.6rem; color: #c98a00; }
.banner-title { margin: 0 0 0.2rem; font-weight: 700; color: var(--warn); }
.banner-text { margin: 0; font-size: 0.95rem; }

/* Contact them: the main way to send it, where it goes, "Did you send it?", and every other way. */
.send-main { display: grid; gap: 0.45rem; }
.send-main .btn { width: 100%; }
.send-main .btn:first-child { position: relative; padding: 0.8rem 1rem; font-size: 1.05rem; border-radius: var(--radius-md); }
.send-main .btn .icon-gmail, .later-sends .btn .icon-gmail { width: 1.45rem; height: 1.45rem; }
.send-chev { display: none; }
.send-to { text-align: center; overflow-wrap: anywhere; }
.send-to.phone-only { justify-content: center; }
.email-app-switch { justify-self: center; font-size: 0.85rem; }
/* A phone number on a computer: large, to call from your phone (see callFromPhone). */
.call-from-phone { display: grid; gap: 0.4rem; justify-items: center; padding: 0.9rem 1rem; text-align: center; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-md); }
.call-from-phone > * { margin: 0; }
.send-main .call-from-phone .btn { width: auto; }
.call-number { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.call-number .icon { color: var(--accent); }
.later-phone { gap: 0.4rem; font-size: 0.95rem; font-weight: 400; }
.later-phone .icon { width: 1.1rem; height: 1.1rem; }
.later-sends { display: grid; gap: 0.5rem; }
.later-sends .btn { width: 100%; padding: 0.65rem 1rem; font-size: 0.95rem; }
.no-way { margin: 0; }
.sent-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); background: var(--warn-bg); }
.sent-question { margin-right: 0.25rem; font-size: 0.95rem; font-weight: 700; color: var(--warn); }
.all-ways { border: 1px solid var(--accent-line); border-radius: var(--radius-md); background: var(--surface); }
.all-ways > summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; list-style: none; border-radius: var(--radius-md); color: var(--text); font-size: 1rem; }
.all-ways > summary::-webkit-details-marker { display: none; }
.all-ways > summary:hover { background: var(--accent-soft); }
.all-ways-icon { width: 1.5rem; height: 1.5rem; color: var(--text); }
.all-ways-text { flex: 1; min-width: 0; display: grid; gap: 0.05rem; }
.all-ways-title { font-weight: 700; color: var(--accent); }
.all-ways-list { font-size: 0.85rem; color: var(--muted); }
.all-ways-chev { width: 1.4rem; height: 1.4rem; color: var(--accent); transition: transform 0.15s; }
.all-ways[open] .all-ways-chev { transform: rotate(180deg); }
.all-ways .reach { padding: 0 0.9rem 0.6rem; }
.reach { display: grid; container: reach / inline-size; }
.reach-row { display: grid; gap: 0.45rem; padding: 0.65rem 0; border-top: 1px solid var(--line); }
.contact-card > .reach > .reach-row:first-child { border-top: 0; padding-top: 0; }
/* Each way's name and its contact side by side when there's room; otherwise the contact (often a
   long email address) goes under its name. */
.reach-contact { display: grid; grid-template-columns: minmax(0, 1fr); align-items: baseline; gap: 0.15rem 0.75rem; min-width: 0; }
.reach-value, .reach-done, .inbox-note { padding-left: 1.65rem; }
@container reach (width >= 28rem) {
  .reach-contact { grid-template-columns: 8rem minmax(0, 1fr); }
  .reach-value, .reach-done, .inbox-note { padding-left: 0; }
}
.reach-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--text); }
.reach-label .icon { width: 1.15rem; height: 1.15rem; color: var(--accent); }
.reach-value { min-width: 0; overflow-wrap: anywhere; }
.reach-also { display: block; }
@container reach (width >= 28rem) { .reach-done, .inbox-note { grid-column: 2; } }
.reach-done { color: var(--good); font-weight: 600; }
.inbox-note { font-size: 0.78rem; }
.reach-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-left: 1.65rem; }
@container reach (width >= 28rem) { .reach-actions { padding-left: 8.75rem; } }

/* The open venue's progress: the steps again, bigger, with when each one happened (or when the next
   is due), and how many are done. */
.progress-head { flex-wrap: wrap; row-gap: 0.4rem; }
.progress-title { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: 0; }
.steps-count { padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.steps-count.declined { background: var(--neutral-bg); color: var(--neutral); }
.steps.detailed { --dot: 1.9rem; }
.steps.detailed .step { gap: 0; padding: 0 0.2rem; }
.steps.detailed .step-label { margin: 0.4rem 0 0.1rem; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.step-when { font-size: 0.8rem; line-height: 1.3; color: var(--muted); }

/* Where things stand, once they've been contacted. */
.contact-history { margin: 0; }
.answers, .outcome, .try-again { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.outcome-question { margin-right: 0.25rem; font-size: 0.9rem; font-weight: 600; }
.outcome-btn[aria-pressed="true"], .try-again-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.try-again-btn.never[aria-pressed="true"] { background: var(--neutral); border-color: var(--neutral); }
.outcome-btn.booked[aria-pressed="true"] { background: var(--good); border-color: var(--good); }
.outcome-btn.declined[aria-pressed="true"] { background: var(--neutral); border-color: var(--neutral); }
/* A follow-up (or, after a no, a check-in) to send: the step that most often gets the reply. */
.follow-up-due { display: grid; gap: 0.5rem; margin: 0; }
.follow-up-due p { margin: 0; }
.stage .followed-up, .stage .booked-note { color: var(--good); font-weight: 600; }

/* More: everything used less often. A menu at the top beside the list; a row of buttons at the
   bottom of a venue opened in its row. */
.more { position: relative; }
.more-bottom { display: grid; gap: 0.5rem; justify-items: start; }
.more-bottom .more-items { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.more-top .more-items {
  position: absolute; z-index: 5; top: calc(100% + 0.4rem); right: 0; display: grid; gap: 0.1rem; min-width: 15rem; padding: 0.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(16, 42, 67, 0.18);
}
.more-top .more-items .btn { justify-content: flex-start; width: 100%; padding: 0.55rem 0.7rem; border-color: transparent; background: none; font-size: 0.92rem; font-weight: 500; }
.more-top .more-items .btn:hover { background: var(--accent-soft); }
.more-top .more-items .btn.danger:hover { background: var(--bad-bg); }

.report-form { display: grid; gap: 0.5rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); }
.report-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.report-form legend { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; padding: 0; }
.report-form .error { margin: 0; }

/* Room for two columns: Location beside About, and the message beside "Contact them" (so the
   button that sends it is in view without scrolling past the message). */
@container detail (width >= 34rem) {
  .info-grid, .work-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .narrow-only { display: none !important; }
  .message-hints:not(.ok) { display: none; }
  .location-card .place-links, .location-card .checked { margin-left: 1.8rem; }
}
/* A phone: one flowing column, the sections parted by a line, the boxes' frames left off. */
@container detail (width < 34rem) {
  .wide-only { display: none !important; }
  .venue-detail > :is(.info-grid, .quick-contact, .progress-card, .work-grid) { padding-top: 1rem; border-top: 1px solid var(--line); }
  .location-card, .work-card { padding: 0; background: none; border: 0; border-radius: 0; }
  .location-card .place-links, .location-card .checked { margin-left: 1.8rem; }
  .place-link + .place-link { padding-left: 1rem; border-left: 1px solid var(--line-strong); }
  .about-card { display: none; }
  .show-about .about-card { display: block; }
  .message-head .message-label { font-size: 1.2rem; }
  .message-head .icon-mail { display: none; }
  /* The first four lines, cut cleanly, and all of it with "Show full message". */
  .message-preview { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .message-preview.full { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .send-main .btn:first-child { padding: 0.95rem 2.25rem; font-size: 1.1rem; }
  .send-main .btn:first-child .send-chev { display: block; position: absolute; right: 1rem; }
  .send-main .wide-word { display: none; } /* "Email in Gmail" */
  .send-to { font-size: 0.8rem; }
}

.phone-only { display: none !important; }
@media (max-width: 40rem) {
  .phone-only { display: inline-flex !important; }
  .not-phone { display: none !important; }
}

/* Phones: the top bar has the logo with Feedback and Account, then the search, then the tabs with
   the map button. The map is its smaller strip from the start (see paintDock), with Expand map at its
   top left, on the map rather than over the venue under it. */
@media (max-width: 40rem) {
  :root { --gutter: 0.75rem; --topbar-top: 0.5rem; --map-full: 18rem; --expand-room: 0px; }
  .map-dock.compact .map-expand { top: 0.5rem; left: 0.5rem; transform: none; }
  .list-panel:has(> .map-dock.compact) { padding-bottom: 0; }
  .topbar { gap: 0.55rem; padding: 0.55rem 0.65rem; }
  .topbar .brand { font-size: 1.35rem; gap: 0.35rem; }
  .topbar .brand-mark { width: 26px; height: 26px; }
  .topbar .who { gap: 0.4rem; }
  .topbar .btn { white-space: nowrap; padding-inline: 0.6rem; }
  .venues-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
  .venues-toolbar .area-search { grid-column: 1 / -1; }
  .area-search-fields { flex: 1; }
  .area-search-zip { flex: 1; min-width: 0; }
  .area-search .area-search-zip input { width: 100%; min-width: 3.5rem; }
  .venues-toolbar .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; padding-left: 0; border-left: 0; }
  /* Each tab's name over its count, so "Heard back" never breaks in two. */
  .tab { flex-direction: column; justify-content: center; gap: 0.05rem; padding: 0.35rem 0.25rem; border-radius: var(--radius-md); font-size: 0.85rem; line-height: 1.2; }
  .venues-toolbar .map-toggle { padding: 0.5rem 0.75rem; }
  .venues-toolbar:not(.demo) .map-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .venues-toolbar.demo .map-toggle { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
}
/* Most phones: the beta tag and the icons make room too. */
@media (max-width: 30rem) {
  .topbar .beta-tag { display: none; }
  .topbar .btn-icon { display: none; }
}
/* The narrowest phones: everything in the top bar squeezes up a little. */
@media (max-width: 23rem) {
  :root { --gutter: 0.5rem; }
  .topbar { gap: 0.4rem; padding: 0.5rem 0.45rem; }
  .topbar .brand { font-size: 1.1rem; gap: 0.3rem; }
  .topbar .brand-mark { width: 24px; height: 24px; }
  .topbar .btn { padding-inline: 0.45rem; }
}

/* Touch screens: everything you press is at least about 44px tall, the usual guide for a fingertip.
   Where a taller button would make the top bar or an area's card taller, an invisible margin round it
   takes the tap instead; so does padding on a link in a line of text (it doesn't move the lines). */
@media (pointer: coarse) {
  .btn, .tab, .check, .linklike, .step-btn, .quick, .place-link a, .find-sort select,
  .area-search .area-search-zip input, .area-search select { min-height: 2.75rem; }
  .linklike { display: inline-flex; align-items: center; padding-inline: 0.15rem; }
  .row-save { width: 2.75rem; height: 2.75rem; }
  .topbar .who .btn { min-height: 0; }
  .topbar .who .btn, .topbar .brand, .area :is(.area-outreach, .area-due, .area-pitch-nudge) { position: relative; }
  .topbar .who .btn::after, .topbar .brand::after { content: ""; position: absolute; inset: -0.5rem -0.15rem; }
  .area :is(.area-outreach, .area-due, .area-pitch-nudge)::after { content: ""; position: absolute; inset: -0.65rem -0.25rem; }
  :is(.site-footer, .hero-actions, .faq, .reach) a:not(.btn) { padding: 0.75rem 0.2rem; margin-inline: -0.2rem; }
}

/* Dialogs */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 20; background: rgba(10, 14, 22, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal { max-width: 28rem; width: 100%; }
.modal h2 { margin-top: 0; }

/* Clicks pass through to whatever is under it, e.g. "Said no" right after "Booked a gig". */
.toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); pointer-events: none; z-index: 30;
  background: var(--text); color: #ffffff; padding: 0.65rem 1rem; border-radius: var(--radius-sm);
  /* Its own width (left: 50% alone would squeeze it into half the screen on a phone). */
  width: max-content; max-width: calc(100vw - 2rem); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

@media (max-width: 34rem) {
  .areas-head { flex-direction: column; }
  .default-message-btn { flex-basis: auto; }
  .follow-form .zip, .follow-form .radius { width: calc(50% - 0.4rem); }
  .follow-form .btn { width: 100%; }
}