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

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

:root {
  --bg: #f7f5f0;
  --surface: #fffefb;
  --text: #1f1d19;
  --muted: #625c51;
  --line: #e4dfd4;
  --accent: #2e5e3a;
  --accent-text: #ffffff;
  --gold: #c8962e;
  --warn: #9a3b12;
  --ok: #2e5e3a;
  --display: 'Coustard', Georgia, 'Times New Roman', serif;   /* the logo's face: the town's name */
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --heading: var(--sans);                                        /* headings: clean and legible */
  --wx-moon: #b3a77e;
  --wx-drop: #3f86c9;
  --wx-flake: #5f9fd3;
  --map-icons: none;
  color-scheme: light;
}
/* Dark: when the device asks for it (unless someone chose Light), or when someone chose Dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14130f;
    --surface: #1d1b16;
    --text: #ece7dc;
    --muted: #a9a193;
    --line: #34302a;
    --accent: #8cc79a;
    --accent-text: #10140f;
    --gold: #d6aa52;
    --warn: #f0a07a;
    --ok: #8cc79a;
    --wx-moon: #d8cfa3;
    --wx-drop: #7db4e8;
    --wx-flake: #a8cdee;
    --map-icons: invert(0.88);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14130f;
  --surface: #1d1b16;
  --text: #ece7dc;
  --muted: #a9a193;
  --line: #34302a;
  --accent: #8cc79a;
  --accent-text: #10140f;
  --gold: #d6aa52;
  --warn: #f0a07a;
  --ok: #8cc79a;
  --wx-moon: #d8cfa3;
  --wx-drop: #7db4e8;
  --wx-flake: #a8cdee;
  --map-icons: invert(0.88);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--sans);
  -webkit-text-size-adjust: 100%;
}
/* The page's width: the town's header rows line up with what's under them. */
:root { --page: 46rem; --header: var(--page); }
main { max-width: var(--page); margin: 0 auto; padding: 1.75rem 16px 3rem; }
h1 { font-family: var(--heading); font-weight: 700; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.015em; margin: 0.5rem 0 1rem; }
h2 { font-family: var(--heading); font-weight: 700; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; margin: 2.25rem 0 0.75rem; }
h3 { font-family: var(--heading); }
/* Numbers line up: dates, bylaw numbers, money. */
.num, li.event .badge, ul.record-list, .office-stats, .official-prices .price, table { font-variant-numeric: tabular-nums; }
a { color: var(--accent); }
p { margin: 0 0 1rem; }
img { max-width: 100%; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.warn { color: var(--warn); }
.ok { color: var(--ok); }
.lead { font-size: 1.15rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin: 0 0 1rem; }
.notice { padding: 0.65rem 0.85rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); margin: 0 0 1rem; }
h2.first { margin-top: 0; }

/* The photo hero at the top of town pages and the landing page */
.hero {
  position: relative;
  isolation: isolate;
  z-index: 2;          /* above what follows, so the town search's suggestions can hang over it */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background: #2a251d;
  padding: 5rem 16px 4rem;
}
.hero.with-photo { min-height: max(26rem, 62svh); }
@media (min-width: 900px) { .hero.with-photo { min-height: clamp(22rem, 48vh, 30rem); } }
.hero.no-photo {
  min-height: 24rem;
  background: radial-gradient(120% 90% at 50% 0%, #4d4130 0%, #2a251d 60%, #1b1813 100%);
}
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}
.hero.with-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(18, 14, 9, 0.6) 0%, rgba(18, 14, 9, 0.2) 28%, rgba(18, 14, 9, 0.3) 62%, rgba(18, 14, 9, 0.75) 100%);
}
.hero-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 16px 12px;
}
.hero-bar .pt svg { display: block; height: 30px; width: auto; color: #fff; }
.hero.brand .hero-bar { display: none; }
.hero-mark { max-width: 40rem; width: 100%; }
.hero-mark h1 { margin: 0; line-height: 0; }
.hero-mark h1 svg {
  width: clamp(150px, 40vw, 240px);
  height: auto;
  color: #fff;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.55));
}
.hero.brand .hero-mark h1 svg { width: clamp(240px, 78vw, 460px); }
.hero-facts { margin: 1rem auto 0; max-width: 22rem; font-size: 0.875rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
@media (min-width: 640px) { .hero-facts { max-width: none; font-size: 0.95rem; } }
.hero-lead {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 4.6vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 1.5rem auto 0.25rem;
  max-width: 30rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.hero .search { max-width: 30rem; margin: 1rem auto 0; }
.hero .search input { background: rgba(255, 253, 248, 0.96); color: #221f1a; border-color: transparent; }
.hero-alert {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--gold);
  color: #1b1407;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.hero-credit {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 10px;   /* not the safe area: Safari changes it as its toolbar hides, and the line hopped */
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: left;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.hero-credit a { color: inherit; }

/* Plain header bar for pages without a hero */
header.bar { padding: max(12px, env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
header.bar .pt svg, footer.site .pt svg { display: block; height: 28px; width: auto; color: var(--text); }
footer.site { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
footer.site p { margin: 0.75rem 0 0; }

/* Search */
.search { display: flex; gap: 0.5rem; margin: 1.25rem 0; }
.search input { flex: 1; min-width: 0; font-size: 1.05rem; }

/* Photo gallery */
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 1.75rem; }
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.photo-grid figure { margin: 0; }
.photo-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background-size: cover;
  background-color: var(--line);
}
.photo-grid figcaption { font-size: 0.875rem; line-height: 1.35; margin-top: 0.4rem; }
.photo-grid .credit { display: block; color: var(--muted); font-size: 0.75rem; margin-top: 0.15rem; }

/* Map */
.map { margin: 1rem auto 2rem; max-width: 22rem; }
svg.province { display: block; width: 100%; height: auto; }
svg.province .land { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
svg.province .dot { fill: var(--muted); opacity: 0.55; }
svg.province .dot.open, svg.province .dot.live { fill: var(--accent); opacity: 1; }
svg.province a:hover .dot, svg.province a:focus .dot { fill: var(--gold); opacity: 1; }

/* Lists */
ul.plain { padding-left: 1.1rem; }
ul.plain li { margin-bottom: 0.5rem; }
ul.nearby, ul.results { list-style: none; padding: 0; margin: 0; }
ul.nearby li, ul.results li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }

/* Weather and water */
ul.plain-list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
li.advisory { border-left: 4px solid var(--line); padding: 0.55rem 0.75rem; margin-bottom: 0.5rem; background: var(--surface); border-radius: 0 8px 8px 0; }
li.advisory summary { cursor: pointer; }
li.advisory summary .muted { display: block; font-size: 0.9rem; }
li.advisory .detail { white-space: pre-line; margin-top: 0.5rem; }
li.advisory.water { border-left-color: #2b6cb0; }
li.advisory.yellow { border-left-color: #d69e2e; }
li.advisory.orange { border-left-color: #dd6b20; }
li.advisory.red { border-left-color: #c53030; }

/* Forms and tables (admin and sign-in) */
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.4rem 0.5rem 0.4rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
label { display: block; font-weight: 600; margin: 0.75rem 0 0.25rem; }
label.check { display: flex; gap: 0.5rem; align-items: center; }
.help { display: block; font-size: 0.9rem; color: var(--muted); font-weight: 400; }
input[type=text], input[type=number], input[type=search], input[type=email], input[type=tel], input[type=url], input[type=password], select {
  width: 100%;
  max-width: 24rem;
  padding: 0.55rem 0.65rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.search input { max-width: none; }
button {
  font: inherit;
  font-weight: 600;
  padding: 0.55rem 1.05rem;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
}
button.small { padding: 0.2rem 0.6rem; font-size: 0.85rem; }

/* Account, sign-in and subscribe */
.hero-bar .account { color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.hero-bar .account:hover { text-decoration: underline; }
form.inline { display: flex; gap: 0.5rem; flex-wrap: wrap; }
form.inline input { flex: 1 1 14rem; max-width: none; }
.subscribe { margin-top: 2rem; }
.share { display: flex; gap: 0.5rem; }
.share input { flex: 1; min-width: 0; max-width: none; font-size: 0.9rem; }
a.button { display: inline-block; padding: 0.55rem 1.05rem; border-radius: 8px; background: var(--accent); color: var(--accent-text); font-weight: 600; text-decoration: none; }
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--line); margin-top: 2rem; }

/* Notices and the office */
.notices { margin-bottom: 1.5rem; }
.notice-item { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; padding: 0.85rem 1rem; margin-bottom: 0.75rem; }
.notice-item h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.notice-item .body { white-space: pre-line; margin: 0.5rem 0 0; }
.push { margin: 1rem 0; }
textarea { width: 100%; font: inherit; padding: 0.55rem 0.65rem; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
form.stack label:first-child { margin-top: 0; }
form > p:has(> button) { margin-top: 1rem; } /* a form's button never sits right on the field above it */
.inline-form { display: inline; margin-left: 0.5rem; }
button.secondary-small { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.office-link { margin-top: 2rem; }

/* Events */
ul.event-list { list-style: none; padding: 0; margin: 0 0 1rem; }
li.event { display: flex; gap: 0.85rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
li.event .badge { flex: none; width: 3rem; padding: 0.1rem 0 0.1rem 0.6rem; border-left: 3px solid var(--accent); line-height: 1.1; }
li.event .badge span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
li.event .badge strong { display: block; font-size: 1.3rem; font-weight: 750; }
li.event .what { display: flex; flex-direction: column; min-width: 0; }
li.event .what a { font-weight: 650; color: var(--text); text-decoration: none; }
li.event .what a:hover { text-decoration: underline; }
h3.sub { font-size: 1rem; margin: 1.25rem 0 0.25rem; color: var(--muted); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
input[type=date], input[type=time] { width: 100%; padding: 0.55rem 0.65rem; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
img.poster { display: block; max-width: 100%; max-height: 32rem; height: auto; border-radius: 8px; border: 1px solid var(--line); }
p.body { white-space: pre-line; }
details.flag { margin-top: 1.5rem; }
.repeat [hidden] { display: none !important; }
.repeat fieldset { border: 0; padding: 0; margin: 0.75rem 0 0; min-width: 0; }
.repeat legend { font-weight: 600; padding: 0; margin-bottom: 0.25rem; }
.more-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; }
.weekdays { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.weekdays label.day { position: relative; margin: 0; font-weight: 500; }
.weekdays label.day input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.weekdays label.day span { display: inline-block; min-width: 3rem; text-align: center; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.weekdays label.day input:checked + span { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.weekdays label.day input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.weekdays + label.check { margin-top: 0.6rem; font-weight: 500; }
.month-day { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.month-day select { width: auto; }
details.flag summary { cursor: pointer; color: var(--muted); }

/* History */
.history-head { display: flex; gap: 0.85rem; align-items: center; }
.history-head img.thumb { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; background-size: cover; }
.history-item label { font-weight: 600; }
.history-item input[type=text], .history-item textarea { max-width: none; margin-top: 0.25rem; }
p.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
img.history-image { width: 100%; height: auto; border-radius: 8px; background-size: cover; }
p.transcription { font-family: Georgia, 'Times New Roman', serif; }

/* Buy and sell */
ul.listing-grid { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
@media (min-width: 640px) { ul.listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
ul.listing-grid a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
ul.listing-grid .pic { position: relative; display: block; }
ul.listing-grid a:hover img { filter: brightness(1.06); }
ul.listing-grid img, ul.listing-grid .no-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background-size: cover; background-color: var(--line); display: block; }
ul.listing-grid .tag { position: absolute; left: 8px; top: 8px; background: var(--accent); color: var(--accent-text); font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
ul.listing-grid .tag.wanted { background: var(--gold); color: #1b1712; }
ul.listing-grid .where { color: var(--muted); font-size: 0.82rem; }
ul.listing-grid .no-photo { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.85rem; }
ul.listing-grid .price { font-weight: 800; font-size: 1.08rem; margin-top: 0.45rem; }
ul.listing-grid .title { color: var(--text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
nav.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 0.75rem 0 1rem; }
nav.tabs a { padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--text); font-size: 0.95rem; }
nav.tabs a.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.listing-photos { display: grid; gap: 10px; margin: 0 0 1rem; }
.listing-photos img { width: 100%; height: auto; border-radius: 8px; background-size: cover; }
fieldset.choices { border: 0; padding: 0; margin: 0 0 0.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
fieldset.choices legend { font-weight: 600; margin-bottom: 0.25rem; }
.card.empty p:last-child { margin-bottom: 0; }

/* Town sections, the member bar and the town header */
nav.town-nav { background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
nav.town-nav::-webkit-scrollbar { display: none; }
nav.town-nav ul { list-style: none; margin: 0 auto; padding: 0 calc(16px - 0.6rem); display: flex; gap: 0.25rem; max-width: var(--header); white-space: nowrap; }
nav.town-nav a { display: block; padding: 0.7rem 0.6rem; color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem; border-bottom: 3px solid transparent; }
nav.town-nav a[aria-current="page"] { border-bottom-color: var(--gold); }
nav.town-nav a:hover { color: var(--accent); }
.member-bar { background: var(--bg); border-bottom: 1px solid var(--line); }
.member-bar .inner { max-width: var(--header); margin: 0 auto; padding: 0.6rem 16px; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
.member-bar .who .muted { display: block; }
.member-bar .actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.member-bar .actions a { padding: 0.3rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
header.town-bar { padding-bottom: 0; }
header.town-bar .bar-row { display: flex; align-items: center; gap: 0.6rem; max-width: var(--header); margin: 0 auto; }
header.town-bar .pt svg { height: 30px; width: auto; color: var(--text); }
header.town-bar .town-name { font-family: var(--display); font-weight: 900; font-size: 1.3rem; color: var(--text); text-decoration: none; flex: 1; }
header.town-bar .account { font-weight: 600; font-size: 0.95rem; text-decoration: none; }
header.town-bar nav.town-nav { border-bottom: 0; background: transparent; margin: 0.35rem -16px 0; }
svg.circle-map { display: block; width: 100%; max-width: 26rem; height: auto; margin: 1rem auto; }
svg.circle-map .reach { fill: var(--surface); stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 4; }
svg.circle-map .in circle { fill: var(--accent); }
svg.circle-map .out circle { fill: var(--muted); opacity: 0.45; }
svg.circle-map text { font-size: 10px; fill: var(--text); }
svg.circle-map .home { fill: var(--gold); stroke: var(--text); stroke-width: 1.5; }
svg.circle-map .home-label { font-family: var(--heading); font-weight: 750; font-size: 13px; }
svg.circle-map .north { font-size: 11px; fill: var(--muted); }

/* ---------------------------------------------------------------------------------------------
   The app shell: cards, the bottom tab bar on phones, installing, smooth page changes
   --------------------------------------------------------------------------------------------- */
@media (pointer: fine) { @view-transition { navigation: auto; } } /* not on phones: iPhone Safari jumps with it */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
.tabbar, header.town-bar { view-transition-name: none; }
.tabbar { view-transition-name: tabbar; }

svg.icon { flex: none; vertical-align: middle; }

/* Cards for each section of a town's page */
.panel { padding: 1.4rem 0 1.5rem; margin: 0; border-top: 1px solid var(--line); }
.col-main > .panel:first-child, main > .panel:first-child { border-top: 0; padding-top: 0.5rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; }
.panel-head h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.1rem; }
.panel-head h2 svg { color: var(--gold); }
.more-link { display: inline-flex; align-items: center; gap: 0.1rem; font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.panel .empty-line { color: var(--muted); margin-bottom: 0.25rem; }
.panel .all-clear { margin-bottom: 0.5rem; }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0.9rem 0 1.25rem; }
.panel-actions:last-child { margin-bottom: 0; }
:is(button, a.button, .secondary-button) + p { margin-top: 0.6rem; } /* a note under a button isn't stuck to it */

.panel .notice-item { border-radius: 10px; }
.panel .notice-item:last-child { margin-bottom: 0; }
.panel ul.event-list, .panel ul.listing-grid, .panel .photo-grid { margin-bottom: 0.25rem; }
.panel.stay form.inline { margin-bottom: 0.4rem; }
main > .panel:first-child, main > .install-card:first-child + .panel { margin-top: 0.25rem; }
ul.chips { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
ul.chips a { display: inline-block; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: 0.9rem; color: var(--text); }
ul.chips a span { color: var(--muted); font-weight: 400; margin-left: 0.2rem; }
.secondary-button { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--bg); color: var(--text); border: 1px solid var(--line); }
.link-button { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; }
/* The icon, then the sentence as one block, so it wraps as text. */
.office-link { display: flex; align-items: flex-start; gap: 0.45rem; }
.office-link svg { flex: none; margin-top: 0.2rem; }

/* "Add to your home screen" */
.install-card { display: none; align-items: center; gap: 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0.75rem 0.75rem 0.75rem 0.85rem; margin: 0 0 1rem; }
html.offer-install .install-card { display: flex; }
.install-card[hidden] { display: none !important; }
.install-card .app-icon { flex: none; width: 46px; height: 46px; border-radius: 11px; background: #2a251d; color: #fff; display: grid; place-items: center; }
.install-card .app-icon svg { width: 28px; height: auto; }
.install-card .text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.install-card button[data-install] { padding: 0.45rem 0.9rem; }
.install-card .dismiss { background: none; color: var(--muted); padding: 0.3rem; }
html.installed .install-card, html.installed [data-install-row] { display: none !important; }

dialog.sheet { border: 0; border-radius: 20px; padding: 1.25rem 1.25rem 1rem; max-width: 26rem; width: calc(100% - 32px); background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
dialog.sheet::backdrop { background: rgba(20, 16, 10, 0.5); }
dialog.sheet h2 { margin-top: 0; }
ol.steps { list-style: none; padding: 0; margin: 0 0 1rem; }
ol.steps li { display: flex; gap: 0.75rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
ol.steps .step-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; color: var(--accent); }
ol.steps .step-icon.app { background: #2a251d; color: #fff; }
ol.steps .step-icon.app svg { width: 24px; height: auto; }
dialog.sheet form { text-align: right; }

/* The More tab */
ul.menu-list { list-style: none; padding: 0; margin: 0 0 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
ul.menu-list li + li { border-top: 1px solid var(--line); }
ul.menu-list a, ul.menu-list button { display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.85rem 1rem; color: var(--text); text-decoration: none; background: none; border: 0; border-radius: 0; font: inherit; font-weight: 400; text-align: left; cursor: pointer; }
ul.menu-list svg:first-child { color: var(--accent); }
ul.menu-list .label { flex: 1; display: flex; flex-direction: column; font-weight: 600; }
ul.menu-list .label .muted { font-weight: 400; }
ul.menu-list li[hidden] { display: none; }

.offline-note { text-align: center; padding: 2rem 0; color: var(--text); }
.offline-note svg { color: var(--muted); }

/* A town's own header on its inner pages */
header.town-bar .town-mark { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); text-decoration: none; flex: 1; min-width: 0; }
header.town-bar .town-mark svg { height: 32px; width: auto; color: var(--text); }
header.town-bar .town-mark .mark-name { font-family: var(--display); font-weight: 900; font-size: 1.35rem; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* An RM's name in two short lines: "RM No. 250" over "Last Mountain Valley". */
header.town-bar .town-mark .mark-name.two-line { display: flex; flex-direction: column; font-size: 1.3rem; line-height: 1.05; }
header.town-bar .town-mark .mark-name.two-line.long { font-size: 1.08rem; line-height: 1.1; }
header.town-bar .town-mark .mark-name.two-line small { font-family: var(--sans); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
header.town-bar .account { display: inline-flex; align-items: center; gap: 0.35rem; }
.hero-bar .account { display: inline-flex; align-items: center; gap: 0.35rem; }
nav.town-nav a { display: inline-flex; align-items: center; gap: 0.4rem; }
nav.town-nav a svg { color: var(--muted); }
nav.town-nav a[aria-current="page"] svg { color: var(--gold); }

/* Phones: the bottom tab bar takes over from the section row, like an app */
.tabbar { display: none; }
@media (max-width: 759px) {
  nav.town-nav { display: none; }
  .tabbar {
    display: flex; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
    background: var(--surface); /* solid: a blurred fixed bar makes iPhone scrolling stutter */
    border-top: 1px solid var(--line);
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.25rem 0; color: var(--muted); text-decoration: none; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tabbar a svg { width: 25px; height: 25px; }
  body:has(.tabbar) main { padding-bottom: 7.75rem; } /* fixed: the bottom inset changes as Safari's toolbar hides */
  .panel { padding: 1.2rem 0 1.3rem; }
  main { padding-top: 1rem; }
  .member-bar .actions a { font-size: 0.85rem; }
  header.town-bar { position: sticky; top: 0; z-index: 40; padding-bottom: 12px; }
}
/* Installed and opened from the home screen: room for the status bar at the top. */
html.installed header.town-bar { padding-top: max(12px, env(safe-area-inset-top)); }

/* The keepers' drop zone */
.dropzone { position: relative; border: 2px dashed var(--line); border-radius: 14px; background: var(--surface); padding: 1.5rem 1.25rem 1rem; margin: 1rem 0 1.5rem; transition: border-color 0.15s, background-color 0.15s; }
.dropzone:focus-within { border-color: var(--accent); }
.dropzone.over { border-color: var(--accent); border-style: solid; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.dropzone .drop-target { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 0; padding: 0.75rem 0 1rem; font-weight: 400; text-align: center; cursor: pointer; color: var(--muted); }
.dropzone .drop-target svg { color: var(--accent); }
.dropzone .drop-target strong { color: var(--text); font-size: 1.2rem; }
.dropzone .drop-target u { color: var(--accent); text-underline-offset: 3px; }
.dropzone .kinds { display: flex; gap: 0.6rem; margin-top: 0.35rem; opacity: 0.8; }
.dropzone .drop-target .active, .dropzone.over .drop-target .idle { display: none; }
.dropzone.over .drop-target .active { display: inline; color: var(--accent); }
.upload-list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.upload-list:empty { display: none; }
.upload-list li { display: grid; grid-template-columns: minmax(0, 1fr) 6rem minmax(4.5rem, auto); gap: 0.6rem; align-items: center; padding: 0.4rem 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.upload-list .name, .file-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-list progress { width: 100%; height: 0.5rem; accent-color: var(--accent); }
.upload-list li.failed .state { color: #c53030; }
.upload-list li.done .state { color: var(--accent); }
.upload-list li.summary { display: block; color: var(--muted); }
.file-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.file-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.6rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.file-list li svg { color: var(--muted); }
.file-list .inline-form { margin: 0; }

/* The town map fills the screen under the header, like an app */
body.full-page { display: flex; flex-direction: column; height: 100dvh; }
body.full-page main { flex: 1; position: relative; max-width: none; width: 100%; min-height: 0; padding: 0; }
.town-map, .town-map.maplibregl-map { position: absolute; inset: 0; background: var(--bg); } /* the map library would make it relative */
.town-map .maplibregl-ctrl-group { background: var(--surface); border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.town-map .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
.town-map .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--muted); }
.town-map .maplibregl-ctrl-attrib a { color: var(--muted); }
.history-pin { width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 3px solid var(--surface); background: var(--gold) center / cover no-repeat; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); cursor: pointer; }
.history-pin:hover, .history-pin:focus-visible { border-color: var(--gold); }
.town-map .maplibregl-popup-content { background: var(--surface); color: var(--text); border-radius: 12px; padding: 0.7rem 0.85rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28); font: inherit; font-size: 0.95rem; }
.town-map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .town-map .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .town-map .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface); }
.town-map .maplibregl-popup-anchor-top .maplibregl-popup-tip, .town-map .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .town-map .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface); }
.town-map .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
.town-map .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
.town-map .maplibregl-popup-close-button { color: var(--muted); font-size: 1.25rem; padding: 0 0.45rem; }
.history-popup a { display: block; color: var(--text); text-decoration: none; }
.history-popup img { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 0.45rem; }
.history-popup span { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }
.map-note { position: absolute; z-index: 2; top: 12px; left: 12px; right: 64px; max-width: 28rem; margin: 0; padding: 0.55rem 0.8rem; border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 0.88rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.place-bar { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; max-width: 40rem; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 0.75rem; align-items: center; padding: 0.65rem 0.75rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); }
.place-bar img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; grid-row: span 2; }
.place-bar > div strong, .place-bar > div span { display: block; }
.place-bar .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.place-bar button[disabled] { opacity: 0.45; cursor: default; }
.town-map .maplibregl-ctrl-icon { filter: var(--map-icons); }
@media (max-width: 759px) {
  body.full-page main { padding-bottom: 0; }
  .town-map .maplibregl-ctrl-bottom-left, .town-map .maplibregl-ctrl-bottom-right { margin-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .place-bar { bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
.town-map .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact { background: var(--surface); color: var(--muted); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.town-map .maplibregl-ctrl-attrib-button { filter: var(--map-icons); }

/* Bigger screens: the town header's two rows share the page's edges. The logo, the first section and
   the page's text line up on the left; "Your account", the last section and the text on the right.
   A hairline sets the quieter section row apart from the town's name. */
@media (min-width: 760px) {
  header.town-bar .bar-row, nav.town-nav ul { padding-left: 16px; padding-right: 16px; }
  nav.town-nav ul { justify-content: center; gap: 2.25rem; }
  nav.town-nav a { padding: 0.75rem 0 0.65rem; color: var(--muted); font-size: 0.92rem; }
  nav.town-nav a:hover, nav.town-nav a[aria-current="page"] { color: var(--text); }
  header.town-bar { padding-top: 14px; }
  header.town-bar nav.town-nav { margin-top: 14px; border-top: 1px solid var(--line); }
}
.town-map .maplibregl-ctrl button.map-satellite { display: flex; align-items: center; justify-content: center; color: var(--text); }
.town-map .maplibregl-ctrl button.map-satellite[aria-pressed="true"] { color: var(--accent); }

/* Weather: now, the week ahead, the sun. Icons are coloured by part. */
.wx { flex: none; }
.wx .sun, .wx .bolt { stroke: var(--gold); }
.wx .moon { stroke: var(--wx-moon); }
.wx .cloud { stroke: var(--muted); fill: var(--wx-fill, var(--surface)); }
.wx .cloud-line { stroke: var(--muted); }
.wx .drop { stroke: var(--wx-drop); }
.wx .flake { stroke: var(--wx-flake); fill: var(--wx-flake); }
.wx-now { display: flex; align-items: center; gap: 0.9rem; margin: 0.15rem 0 0.9rem; }
.wx-now > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; }
.wx-now .temp { font-family: var(--heading); font-weight: 750; font-size: 2.7rem; line-height: 1; }
.wx-now .cond { font-weight: 600; font-size: 1.05rem; }
.wx-now .more { flex-basis: 100%; color: var(--muted); font-size: 0.88rem; margin-top: 0.2rem; }
.wx-days { list-style: none; margin: 0 0 0.75rem; padding: 0 0 2px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(4.2rem, 1fr); gap: 0.4rem; overflow-x: auto; scrollbar-width: none; }
.wx-days::-webkit-scrollbar { display: none; }
.wx-days li { --wx-fill: var(--bg); display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.5rem 0.2rem 0.45rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.wx-days .d { font-size: 0.78rem; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.wx-days .hl { display: flex; gap: 0.35rem; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.wx-days .hi { font-weight: 700; }
.wx-days .lo { color: var(--muted); }
.wx-text { font-size: 0.92rem; margin: 0 0 0.35rem; }
.wx-daylight { font-size: 0.88rem; color: var(--muted); margin: 0 0 0.9rem; }

/* The keeper's list: one line per record; Review opens it */
.k-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; }
.k-tabs a { padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.k-tabs a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.k-tabs .n { font-weight: 400; opacity: 0.8; margin-left: 0.15rem; }
/* The directory's kinds: short, each with its icon; one row that scrolls sideways on phones */
.dir-kinds { margin: 0 0 1.25rem; }
.dir-kinds a { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; background: var(--surface); }
.dir-kinds a svg { color: var(--gold); }
.dir-kinds a[aria-current="page"] svg { color: currentColor; }
@media (max-width: 759px) {
  .dir-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 0.1rem 16px 0.2rem; }
  .dir-kinds::-webkit-scrollbar { display: none; }
  .dir-kinds a { flex: none; }
}
.dir-logo .kind-icon { color: var(--gold); display: grid; place-items: center; }
.k-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0 0 1rem; }
.k-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.k-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.6rem; border-bottom: 1px solid var(--line); }
.k-item details { min-width: 0; }
.k-item summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0; cursor: pointer; list-style: none; }
.k-item summary::-webkit-details-marker { display: none; }
.k-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; background: var(--line) center / cover; }
.k-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.k-meta strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-meta .small { color: var(--muted); }
.k-flag { color: var(--warn); font-weight: 600; }
.k-review { flex: none; padding: 0.3rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.k-review .close, .k-item details[open] .k-review .open { display: none; }
.k-item details[open] .k-review .close { display: inline; }
.k-item:has(details[open]) { grid-template-columns: minmax(0, 1fr); }
.k-item:has(details[open]) .k-quick { display: none; }
.k-item details[open] { padding-bottom: 1rem; }
.k-item .k-large { display: block; width: 100%; max-width: 30rem; height: auto; border-radius: 8px; margin: 0.25rem 0 0.5rem; }
.k-item[data-drafting] .k-meta strong { color: var(--muted); font-weight: 600; }
.k-quick { margin: 0; }
@media (max-width: 559px) {
  /* Phones: the whole row opens it; Publish stays beside it. */
  .k-review { display: none; }
  .k-meta strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .k-thumb { width: 56px; height: 44px; }
  .k-item, .k-item:has(details[open]) { grid-template-columns: minmax(0, 1fr); }
  .k-quick { padding: 0 0 0.65rem calc(56px + 0.75rem); }
}
.poster-tip { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0 0 1.25rem; }
.poster-tip svg { color: var(--gold); flex: none; margin-top: 0.1rem; }
.poster-tip p { margin: 0.25rem 0 0; }

/* Adding the town to the home screen */
.install-steps { border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem 0.9rem; margin: 0 0 0.6rem; background: var(--surface); }
.install-steps summary { font-weight: 600; cursor: pointer; }
.install-steps .steps { margin: 0.6rem 0 0.2rem; padding-left: 1.3rem; }
.install-steps .steps li { display: list-item; margin: 0.3rem 0; padding: 0; border: 0; }
.install-link a { display: inline-flex; align-items: center; gap: 0.35rem; }
@media (pointer: fine) { .install-link { display: none; } }
html.installed .install-link, html.installed .install-row { display: none !important; }
.poster-thumb { display: block; max-width: 12rem; height: auto; border-radius: 8px; margin: 0.25rem 0 0.5rem; }
.install-sheet { max-height: 85dvh; padding: 0; display: none; flex-direction: column; overflow: hidden; }
.install-sheet[open] { display: flex; }
.install-sheet .sheet-body { overflow-y: auto; padding: 1.25rem 1.25rem 0.5rem; }
.install-sheet .sheet-close { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1; }
.install-sheet .sheet-close button { width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%; background: var(--bg); color: var(--text); display: grid; place-items: center; }
.install-sheet .sheet-foot { padding: 0.75rem 1.25rem 1rem; border-top: 1px solid var(--line); }
.install-sheet h2 { padding-right: 2.5rem; }
.install-sheet .mine-name { font-weight: 700; margin: 0.75rem 0 0.25rem; }
.install-sheet [data-mine] .steps { margin: 0 0 0.75rem; padding-left: 1.3rem; }
.install-sheet [data-mine] .steps li { display: list-item; margin: 0.35rem 0; padding: 0; border: 0; }
.other-browsers { margin: 0.5rem 0; }
.other-browsers > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.92rem; padding: 0.35rem 0; }
.other-browsers .install-steps { margin-top: 0.4rem; }
.install-sheet .install-steps { background: var(--bg); }

/* Events: pictures in the list, and the month calendar */
.event-list .event.with-picture { align-items: center; }
.ev-picture { flex: none; margin-left: auto; }
.ev-picture img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.view-toggle { margin-top: 0.5rem; }
.view-toggle a { display: inline-flex; align-items: center; gap: 0.35rem; }
/* The events page: the month and the list side by side on a computer; narrower, a toggle between them. */
.view-toggle { margin-top: 0.5rem; }
.view-toggle a { display: inline-flex; align-items: center; gap: 0.35rem; }
.narrow-off { display: none; }
@media (min-width: 1000px) {
  .view-toggle, .ev-list { display: none; }
  .ev-month.narrow-off { display: block; }
}
.month-head { display: flex; align-items: center; justify-content: space-between; margin: 0.5rem 0; font-size: 1.1rem; }
.month-head a { text-decoration: none; font-size: 1.6rem; line-height: 1; padding: 0 0.6rem; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.month-grid .dow { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-align: center; padding: 0.3rem 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.month-grid .day { min-height: 5.5rem; padding: 0.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.month-grid .day.empty { background: color-mix(in srgb, var(--line) 25%, transparent); min-height: 0; }
.month-grid .day.past .n { opacity: 0.5; }
.month-grid .n { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.month-grid .today .n { background: var(--gold); color: #1b1712; border-radius: 999px; padding: 0 0.4rem; align-self: flex-start; }
.month-grid .chip { display: block; font-size: 0.75rem; line-height: 1.25; padding: 0.15rem 0.3rem; border-radius: 5px; text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-grid .chip.here { background: var(--accent); color: var(--accent-text); }
.month-grid .chip .t { font-weight: 700; }
.month-grid .chip .where { opacity: 0.7; }
@media (max-width: 559px) {
  .month-grid .day { min-height: 3.6rem; padding: 0.15rem; }
  .month-grid .chip { font-size: 0.62rem; padding: 0.1rem 0.2rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .month-grid .chip .t, .month-grid .chip .where { display: none; }
  .ev-picture img { width: 56px; height: 56px; }
}
.hero-bar .account svg { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7)); }
.almanac { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.3rem; font-size: 0.88rem; color: var(--muted); }
.almanac li { display: flex; gap: 0.5rem; align-items: baseline; }
.almanac .k { flex: none; width: 1.3rem; text-align: center; }
.almanac strong { color: var(--text); font-weight: 600; }
.almanac .frost strong { color: #5f9fd3; }

/* An on/off switch */
.switch-row { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 0.75rem; }
.switch-row > span { flex: 1; display: flex; flex-direction: column; }
button.toggle { flex: none; width: 3.1rem; height: 1.8rem; padding: 0.2rem; border-radius: 999px; background: var(--line); position: relative; }
button.toggle span { display: block; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
button.toggle[aria-checked="true"] { background: var(--accent); }
button.toggle[aria-checked="true"] span { transform: translateX(1.3rem); }

/* The weather band at the bottom of a town's page */
.weather-band { margin: 2.5rem 0 0; padding: 1.2rem 0 0.4rem; border-top: 1px solid var(--line); }
.weather-band h2 { display: flex; align-items: center; gap: 0.45rem; font-size: 1.1rem; margin: 0 0 0.75rem; }
.weather-band h2 svg { color: var(--gold); }
.weather-band .wx-now .temp { font-size: 2.2rem; }
.weather-band .wx-days li { background: var(--surface); --wx-fill: var(--surface); }
.weather-band .all-clear { color: var(--muted); }
.found-photos { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.6rem; }
.found-photos li { display: grid; grid-template-columns: 96px 1fr auto; gap: 0.75rem; align-items: center; }
.found-photos img { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; }

/* A listing's photos: swipe through; tap for full screen */
.gallery { position: relative; margin: 0 -16px 1rem; background: #000; }
@media (min-width: 760px) { .gallery { margin: 0 0 1rem; border-radius: 12px; overflow: hidden; } }
.gallery .slides, .lightbox .slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery .slides::-webkit-scrollbar, .lightbox .slides::-webkit-scrollbar { display: none; }
.gallery .slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; max-height: 70vh; cursor: zoom-in; }
.gallery .slide img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: none !important; }
.gallery .nav, .lightbox .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.6rem; line-height: 1; padding: 0; }
.gallery .prev, .lightbox .prev { left: 10px; } .gallery .next, .lightbox .next { right: 10px; }
@media (pointer: coarse) { .gallery .nav { display: none; } }
.gallery .count, .lightbox .count { position: absolute; right: 10px; top: 10px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.8rem; padding: 0.15rem 0.5rem; border-radius: 999px; }
.gallery .dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.gallery .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.gallery .dots i.on { background: #fff; }
dialog.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; }
dialog.lightbox::backdrop { background: #000; }
.lightbox .slides { height: 100%; }
.lightbox .slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; }
.lightbox .slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox .close { position: absolute; left: 10px; top: max(10px, env(safe-area-inset-top)); width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.8rem; line-height: 1; padding: 0; }
.lightbox .count { top: max(14px, env(safe-area-inset-top)); }
.gallery:first-child { margin-top: -1rem; }
h1.listing-title { margin: 0.5rem 0 0.2rem; font-size: 1.6rem; }
.listing-price { font-size: 1.4rem; font-weight: 800; margin: 0 0 0.2rem; }
.town-only { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 0 0.45rem; }
p.town-only { font-size: 0.85rem; padding: 0.1rem 0.6rem; }
.k-quick { display: flex; gap: 0.35rem; }

/* The local directory */
.dir-kinds { margin-top: 0.5rem; }
.dir-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.dir-list li { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--line); }
.dir-list li > a:first-child { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; color: inherit; text-decoration: none; }
.dir-logo { flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; }
.dir-logo img { width: 100%; height: 100%; object-fit: cover; background: none !important; }
.dir-logo.is-logo { background: #fff; }
.dir-logo.is-logo img { object-fit: contain; }
.dir-logo .initial { font-family: var(--heading); font-weight: 700; font-size: 1.5rem; color: var(--gold); }
.dir-logo.big { width: auto; height: 84px; max-width: 210px; }
.dir-text { min-width: 0; display: flex; flex-direction: column; }
.dir-text strong { font-size: 1.02rem; }
.dir-blurb { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.dir-call { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-text); }
.dir-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 0.75rem; }
.dir-head > div { flex: 1 1 12rem; min-width: 0; }
.dir-head h1 { overflow-wrap: anywhere; }
.dir-head h1 { margin: 0; }
.dir-head p { margin: 0.2rem 0 0; }
.dir-facts { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.55rem; }
.dir-facts li { display: flex; gap: 0.6rem; align-items: center; }
.dir-facts svg { color: var(--muted); flex: none; }
.pics-now { margin: 1rem 0 .25rem; font-size: 1rem; }
.dir-edit-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.75rem; margin-bottom: .5rem; }
.dir-edit-photos .edit-pic { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.dir-edit-photos .edit-pic > a, .dir-edit-photos .edit-pic > img { display: block; }
.dir-edit-photos img { width: 100%; height: 130px; object-fit: contain; display: block; background: var(--bg); }
.dir-edit-photos figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .5rem .6rem; }
.dir-edit-photos figcaption .muted { flex-basis: 100%; }
.dir-edit-photos figcaption label.check { margin: 0 0 0 auto; font-weight: 400; }
.claim { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1.5rem; }

/* Back to the list */
.back-link { margin: 0 0 0.6rem; }
.back-link a { display: inline-flex; align-items: center; gap: 0.15rem; font-weight: 600; text-decoration: none; padding: 0.25rem 0.1rem; }
.back-link svg { transform: rotate(180deg); }

/* The notices bell, top right */
a.bell { position: relative; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: var(--text); flex: none; }
a.bell:hover { background: color-mix(in srgb, var(--line) 50%, transparent); }
a.bell[aria-current="page"] { color: var(--gold); }
a.bell.unread { color: #e5484d; }
a.bell .badge { position: absolute; top: 0.05rem; right: 0.05rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 999px; background: #e5484d; color: #fff;
  font-size: 0.7rem; font-weight: 800; line-height: 1.15rem; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.hero-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-bar a.bell { color: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7)); }
.hero-bar a.bell.unread { color: #ff6b6f; }
.hero-bar a.bell .badge { box-shadow: none; }
@media (max-width: 759px) {
  /* Phones: the directory's kinds in one row to swipe, not five rows to scroll past */
  .dir-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .dir-kinds::-webkit-scrollbar { display: none; }
  .dir-kinds a { flex: none; }
}
a.bell svg { transform: translateY(1.5px); } /* the bell's weight sits high in its drawing; this lines it up with the account icon */

/* Appearance: Auto, Light or Dark, small, across from the footer's logo */
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.theme-switch { display: inline-flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; }
.theme-switch button { display: inline-grid; place-items: center; width: 2rem; height: 1.6rem; padding: 0; border-radius: 999px; background: none; color: var(--muted); }
.theme-switch button[aria-pressed="true"] { background: var(--line); color: var(--text); }

/* The viewer's caption bar */
.lightbox .lb-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, 0.78);
  color: #f2eee6; max-height: 40%; overflow-y: auto; }
.lightbox .lb-caption strong { display: block; font-size: 1.02rem; }
.lightbox .lb-caption .meta { display: block; color: #bdb5a6; font-size: 0.85rem; margin-top: 0.15rem; }
.lightbox .lb-caption p { margin: 0.45rem 0 0; font-size: 0.92rem; line-height: 1.45; }
.lightbox .lb-caption a { display: inline-block; margin-top: 0.45rem; color: #a9dbb4; font-weight: 600; font-size: 0.9rem; }
.lightbox .slide { padding-bottom: 5.5rem; box-sizing: border-box; }

/* Documents in the history collection: paper tiles, the page viewer, the words on a sheet of paper */
.doc-link { display: block; text-decoration: none; }
.doc-paper { display: flex; flex-direction: column; gap: 0.4rem; aspect-ratio: 4 / 3; overflow: hidden; padding: 0.8rem 0.9rem; border-radius: 8px;
  background: #f7f1e3; color: #3b342a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.18); }
.doc-paper .doc-kind { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #8a6a2e; }
.doc-paper .doc-lines { white-space: pre-line; font-family: Georgia, 'Times New Roman', serif; font-size: 0.78rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.k-thumb.doc-thumb { display: grid; place-items: center; background: #f7f1e3; color: #8a6a2e; }
.doc-viewer { position: relative; margin: 0.5rem 0 1rem; background: #2a2620; border-radius: 10px; padding: 10px; outline: none; }
.doc-viewer canvas { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; border-radius: 4px; }
.doc-viewer canvas[data-blank] { width: min(100%, calc(80vh * 8.5 / 11)); aspect-ratio: 8.5 / 11; }
.doc-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 8px; color: #e9e3d6; font-size: 0.9rem; }
.doc-nav button { width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.4rem; line-height: 1; }
.doc-viewer.one-page .doc-nav button { visibility: hidden; }
.doc-words .paper { background: #f7f1e3; color: #2f2a22; border-radius: 8px; padding: 1.2rem 1.3rem; margin-top: 0.6rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.doc-words .transcription { font-family: Georgia, 'Times New Roman', serif; font-size: 0.98rem; line-height: 1.65; white-space: pre-line; margin: 0; }

/* Neighbours waiting to be vouched for */
.vouch-list { list-style: none; margin: 0; padding: 0; }
.vouch-list li { padding: 0.75rem 0; border-top: 1px solid var(--line); }
.vouch-list li:first-child { border-top: 0; padding-top: 0.25rem; }
.vouch-list p { margin: 0 0 0.5rem; }
.vouch-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.vouch-actions button { padding: 0.45rem 0.85rem; font-size: 0.92rem; min-height: 0; }

/* What the owner of a listing, event or directory entry can do: one row of matching buttons */
.owner-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0 1rem; }
.owner-actions form { margin: 0; }
.owner-actions a, .owner-actions button { display: inline-flex; align-items: center; padding: 0.5rem 0.95rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.25; text-decoration: none; }
.owner-actions .primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.organize { margin: 1rem 0; }
.organize p { margin: 0.4rem 0 0; }
button.danger-small { background: transparent; color: var(--warn); border: 1px solid currentColor; }

/* Scanning posters and ads */
ol.how-steps { margin: 0.5rem 0 0.75rem; padding-left: 1.4rem; }
ol.how-steps li { margin: 0.35rem 0; }
.how-to { margin: 0 0 1rem; }
.how-to summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.scan-zone .scan-where { display: block; max-width: 28rem; margin: 0 auto 0.75rem; font-weight: 600; }
.scan-zone .scan-where input { margin-top: 0.3rem; }
.scan-failed { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.scan-failed img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.publish-all { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0 0 1rem; }
.scan-items { display: grid; gap: 1rem; }
.scan-item { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
@media (min-width: 720px) { .scan-item:has(.scan-pic) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
.scan-pic img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: var(--bg); border-radius: 8px; }
.scan-item form { margin: 0; }
.scan-kind { display: flex; gap: 0.4rem; align-items: center; margin: 0 0 0.25rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.scan-when { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0 0.75rem; }
form.stack .scan-when > label, form.stack .scan-when > label:first-child { margin-top: 0.75rem; } /* side by side, so all at one height */
.scan-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
.scan-skipped { margin: 1rem 0; }
.scan-skipped summary { cursor: pointer; color: var(--muted); }
.claim-box { margin: 1rem 0; }
.claim-box p { margin: 0 0 0.5rem; }
.claim-box form { margin: 0.25rem 0 0; }
.more-photos { display: flex; gap: 0.4rem; align-items: center; margin: 1.1rem 0 0.25rem; }
.more-photos svg { color: var(--accent); flex: none; }
.panel-actions + .poster-tip { margin-top: 1.25rem; } /* the email tip under Post an event and Scan posters */

/* Notifications: settled before the page draws (see THEME_SCRIPT), so nothing appears later */
.push, .push-ios { display: none; }
html.can-push .push, html.in-app .push { display: block; }
html.ios-no-push:not(.installed) .push-ios { display: block; }
.push { margin-top: 1rem; }

/* Small gaps that were missing */
.month-grid + p { margin-top: 0.6rem; }
.map-link { display: inline-flex; align-items: center; gap: 0.35rem; }
label > :is(input, textarea, select) { font-weight: 400; } /* fields inside their label aren't bold like it */

/* The town office's page */
.office-welcome ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.office-welcome li { margin: 0.3rem 0; }
.office-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 1rem 0 0.5rem; }
.office-stats div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.75rem; display: flex; flex-direction: column; }
.office-stats strong { font-family: var(--heading); font-weight: 750; font-size: 1.6rem; line-height: 1.1; }
.office-stats span { color: var(--muted); font-size: 0.8rem; line-height: 1.3; }
ul.office-list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
ul.office-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
ul.office-list > li:first-child { border-top: 1px solid var(--line); }
ul.office-list .owner-actions { margin: 0; }
.office-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 14rem; }
.office-row-text .status { align-self: flex-start; margin-top: 0.3rem; font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
ul.office-list > li.done strong { color: var(--muted); font-weight: 600; }
ul.office-list > li.done .status { background: var(--line); color: var(--muted); }
.staff-add { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0 0; }
.staff-add input { flex: 1 1 14rem; }
input.wide { max-width: none; }
.previewing { opacity: 0.92; }

/* Scanned drafts waiting: said at the top of the scan page and pointed out elsewhere */
.drafts-banner { border-color: var(--gold); }
.drafts-banner p { margin: 0 0 0.6rem; }
.drafts-banner .publish-all { margin: 0 0 0.4rem; }
.drafts-note a, a.drafts-link { font-weight: 700; }
a.button.small-button { padding: 0.35rem 0.75rem; font-size: 0.85rem; white-space: nowrap; }

/* Town search suggestions */
form.search { position: relative; }
.town-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: 0.3rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 15, 5, 0.25); text-align: left; max-height: 60vh; overflow-y: auto; }
.town-suggest li { display: flex; flex-direction: column; padding: 0.55rem 0.7rem; border-radius: 8px; cursor: pointer; color: var(--text); }
.town-suggest li span { color: var(--muted); font-size: 0.85rem; }
.town-suggest li:hover, .town-suggest li[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.town-suggest li.none { cursor: default; color: var(--muted); }

/* Changing your mind: withdrawing an offer, giving back a claim, stepping down */
.unclaim { margin: 0.5rem 0 1rem; }
.unclaim p { margin: 0.4rem 0 0; }
.step-down { margin-top: 2rem; }

/* Council records */
ul.record-list { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.record-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.15rem 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
ul.record-list li a { font-weight: 600; }
ul.record-list .record-title { display: block; font-weight: 400; color: var(--text); }
.record-search { display: flex; gap: 0.5rem; margin: 0 0 1rem; }
.record-search input { flex: 1; min-width: 0; max-width: none; }
.records-address p { margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.records-address p:last-child { margin-bottom: 0; }
.records-upload input[type=file] { max-width: 100%; }
.records-reading p { margin: 0.25rem 0; }
.record-drafts { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 720px) { .record-draft { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
.record-draft .notice { margin: 0.4rem 0; }
.record-rows .record-actions { flex-basis: 100%; margin-top: 0.25rem; }
.record-rows .record-actions form { margin-top: 0.5rem; }
.records-link { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; }
.records-box p, .records-offer p { margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.records-box p:last-child, .records-offer p:last-child { margin-bottom: 0; }
.records-box, .records-offer { margin: 0 0 1.25rem; }
.subscribe-calendar { margin: 1.5rem 0 0; }
.subscribe-calendar p { margin: 0 0 0.5rem; }
.subscribe-calendar p:last-child { margin-bottom: 0; }
.subscribe-calendar .feed-url { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; user-select: all; }

/* Something being read: the picture (or a page) with a light passing over it, and what's happening */
.reading-card { display: flex; gap: 1rem; align-items: center; padding: 1rem; margin: 0 0 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.reading-card p { margin: 0 0 0.3rem; }
.reading-card p:last-child { margin-bottom: 0; }
.reading-thumbs { display: flex; flex: none; }
.reading-thumbs .scan-beam + .scan-beam { margin-left: -28px; box-shadow: -4px 0 10px rgba(0, 0, 0, 0.18); }
.scan-beam { position: relative; display: block; width: 64px; height: 86px; border-radius: 6px; overflow: hidden; background: var(--line); }
.scan-beam img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scan-beam::after { content: ''; position: absolute; left: -10%; right: -10%; top: 0; height: 3px; background: var(--accent); box-shadow: 0 0 14px 5px color-mix(in srgb, var(--accent) 55%, transparent); animation: reading-beam 1.6s ease-in-out infinite alternate; }
@keyframes reading-beam { from { transform: translateY(2px); } to { transform: translateY(80px); } }
.paper-page { background: #fbf8f0; padding: 14px 10px; box-sizing: border-box; border: 1px solid var(--line); }
.paper-page i { display: block; height: 4px; margin: 0 0 8px; border-radius: 2px; background: #cfc6b4; }
.paper-page i:nth-child(1) { width: 70%; background: #a99f8a; }
.paper-page i:nth-child(4) { width: 85%; }
.paper-page i:nth-child(5) { width: 55%; }
.reading-steps { position: relative; height: 1.5em; overflow: hidden; color: var(--muted); }
.reading-steps span { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; animation: reading-step 12s infinite; }
.reading-steps span:nth-child(2) { animation-delay: 3s; }
.reading-steps span:nth-child(3) { animation-delay: 6s; }
.reading-steps span:nth-child(4) { animation-delay: 9s; }
@keyframes reading-step { 0% { opacity: 0; transform: translateY(6px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .scan-beam::after { animation: none; display: none; }
  .reading-steps span { animation: none; }
  .reading-steps span:first-child { opacity: 1; }
}

/* prairie.town/official: council records for offices */
.official .eyebrow { margin: 0 0 0.25rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.official h1 { margin-top: 0; }
.official .lead { font-size: 1.1rem; }
.official-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1.25rem 0 1.75rem; }
.official-dates { display: grid; gap: 0.75rem; margin: 0 0 1.5rem; }
.official-dates p { margin: 0; }
.official-dates strong { display: block; font-size: 1.05rem; }
.official-steps { padding-left: 1.25rem; }
.official-steps li { margin: 0 0 0.75rem; }
.official-prices { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0 0 1rem; }
.official-prices .card { margin: 0; }
.official-prices p { margin: 0 0 0.25rem; }
.official-prices .price { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.official-prices .price span { font-size: 1rem; font-weight: 500; color: var(--muted); }
.official-terms li { margin-bottom: 0.35rem; }
details.faq { border-bottom: 1px solid var(--line); padding: 0.7rem 0; }
details.faq summary { cursor: pointer; font-weight: 600; }
details.faq p { margin: 0.5rem 0 0.25rem; }
.offices-card { display: flex; gap: 0.9rem; align-items: flex-start; margin: 2rem 0 0; }
.offices-card svg { flex: none; color: var(--accent); margin-top: 0.2rem; }
.offices-card h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.offices-card p { margin: 0; }

/* On a computer: the town page in two columns (what's happening, then the rest), and workspaces with
   a sidebar, using the width instead of a phone's column in the middle of the screen. */
@media (min-width: 1000px) {
  body { --page: 72rem; --header: 72rem; }   /* every page the same width, so nothing moves */
  .town-cols { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 0 3.5rem; align-items: start; }
  .col-side > .panel:first-child { border-top: 0; padding-top: 0.5rem; }
  .col-side .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; grid-template-rows: auto 1fr; grid-template-areas: 'main top' 'main bottom'; gap: 0 3rem; align-items: start; }
  .ws-main .record-draft { grid-template-columns: 1fr; }
  .ws-main { grid-area: main; }
  .ws-top { grid-area: top; }
  .ws-bottom { grid-area: bottom; }
  .ws-bottom h2:first-child, .ws-main > h2:first-child { margin-top: 0; }
}
/* The apps, coming soon */
.apps-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.5rem; }
.apps-soon .app-tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem 0.3rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.85rem; font-weight: 600; }
.apps-soon .app-tag svg { color: var(--accent); }
.apps-soon .soon { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }
html.in-app .apps-soon { display: none; }
.record-rows .office-row-text a { color: var(--text); text-decoration: none; }
.record-rows .office-row-text a:hover { text-decoration: underline; }

/* The local directory: a grid of cards, the logo or picture big at the top */
.dir-grid { list-style: none; padding: 0; margin: 0.5rem 0 1rem; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .dir-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); } }
.dir-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: box-shadow 0.15s, transform 0.15s; }
.dir-card:hover { box-shadow: 0 6px 18px rgba(40, 30, 10, 0.1); transform: translateY(-1px); }
.dir-card-link { flex: 1; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.dir-media { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--bg); border-bottom: 1px solid var(--line); overflow: hidden; }
.dir-media img { display: block; width: 100%; height: 100%; object-fit: cover; background: none !important; }
.dir-media.is-logo { background: #fff; padding: 10% 14%; }
.dir-media.is-logo img { object-fit: contain; }
.dir-media .kind-icon { color: var(--gold); opacity: 0.8; }
.dir-body { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 0.8rem 0.8rem; min-width: 0; }
.dir-name { font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.dir-body .dir-blurb { color: var(--muted); margin-top: 0.2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dir-call-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; border-top: 1px solid var(--line); color: var(--accent); font-weight: 600; font-size: 0.92rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-call-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
@media (max-width: 599px) {
  .dir-body { padding: 0.55rem 0.6rem 0.65rem; }
  .dir-name { font-size: 0.98rem; }
  .dir-body .dir-blurb { display: none; }
  .dir-call-row { padding: 0.45rem 0.6rem; font-size: 0.85rem; }
}

/* List pages on a computer: more across */
@media (min-width: 1000px) {
  .wide ul.listing-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 22px 16px; }
  .wide .photo-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
  .event-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 3rem; align-items: start; }
  .event-cols h2 { margin-top: 0; }
}
/* The home page: on a computer, the words on the left and the province on the right */
.landing-side .map { margin-top: 0.5rem; }
@media (min-width: 1000px) {
  .landing-cols { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 0 4rem; align-items: start; }
  .landing-side { position: sticky; top: 1.5rem; }
  .landing-side .map { max-width: none; margin: 0 0 1.5rem; }
  .landing-side .offices-card { margin-top: 0; }
}

/* A thing's page (a listing, an event, a business, a record): on a computer, its picture or document
   beside its details. */
.detail-cols { display: flex; flex-direction: column; }
.detail-cols.media-top .detail-media { order: -1; }
.detail-media .gallery, .detail-media img.poster { margin-bottom: 1rem; }
.computer-only { display: none; }
@media (min-width: 1000px) {
  .detail-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 3rem; align-items: start; }
  .detail-cols.media-left .detail-media { grid-column: 1; grid-row: 1; }
  .detail-cols.media-left .detail-main { grid-column: 2; grid-row: 1; }
  .detail-cols > :only-child { grid-column: 1 / -1; max-width: 46rem; }
  .detail-media { position: sticky; top: 1.5rem; }
  .detail-media img.poster { max-height: none; width: 100%; }
  .computer-only { display: block; }
  .phone-only { display: none; }
}
/* Council records: on a computer, minutes, bylaws and statements side by side */
@media (min-width: 1000px) {
  .records-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 2.5rem; align-items: start; }
  .records-cols section > h2 { margin-top: 0.5rem; }
}

/* The town's photo, under the header on the home page */
body.town-home .hero.with-photo { padding-top: 2.5rem; min-height: max(20rem, 46svh); }
@media (min-width: 900px) { body.town-home .hero.with-photo { min-height: clamp(18rem, 40vh, 26rem); } }
body.town-home .hero-bar { display: none; }

/* Plain pages' header (prairie.town itself) lines up with the page */
header.bar { padding-inline: max(16px, calc((100% - var(--header, 46rem)) / 2 + 16px)); }

/* The town's sidebar: on a computer, on every page without a second column of its own */
.town-side { display: none; }
@media (min-width: 1000px) {
  .with-side { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 0 3.5rem; align-items: start; }
  .town-side { display: block; position: sticky; top: 1.5rem; padding-top: 0.6rem; }
  .side-box { padding: 0 0 1.1rem; margin: 0 0 1.1rem; border-bottom: 1px solid var(--line); }
  .side-box:last-child { border-bottom: 0; }
  .side-box h2 { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.55rem; font-size: 1.05rem; }
  .side-box h2 svg { color: var(--gold); }
  .side-box p { margin: 0.4rem 0 0; }
  .side-events { list-style: none; padding: 0; margin: 0; }
  .side-events li { display: flex; flex-direction: column; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
  .side-events li:last-child { border-bottom: 0; }
  .side-events a { color: var(--text); font-weight: 650; text-decoration: none; }
  .side-events a:hover { text-decoration: underline; }
}

/* The town's header, last word: one row on a computer (the town, its sections, the bell and your
   account), stuck to the top as you scroll; frosted glass, so the town's photo and the page pass
   underneath it, blurred. Phones keep a solid header (blur makes iPhone scrolling stutter) and the
   tab bar along the bottom. */
:root { --bar-h: 112px; }
header.town-bar .bar-actions { display: inline-flex; align-items: center; gap: 0.9rem; flex: none; margin-left: auto; }
header.town-bar .bar-row nav.town-nav { background: none; border: 0; }
@media (min-width: 760px) {
  header.town-bar { position: sticky; top: 0; z-index: 40; padding-top: 0; padding-bottom: 0; }
  header.town-bar .bar-row { flex-wrap: wrap; column-gap: 1.5rem; padding: 0; min-height: 60px; }
  header.town-bar .town-mark { flex: 0 1 auto; }
  header.town-bar .bar-row nav.town-nav { order: 3; flex: 0 0 100%; margin: 0; border-top: 1px solid var(--line); }
  header.town-bar nav.town-nav ul { justify-content: center; gap: 2.25rem; padding: 0; }
}
@media (min-width: 1100px) {
  :root { --bar-h: 70px; }
  header.town-bar .bar-row { flex-wrap: nowrap; height: 64px; min-height: 0; }
  header.town-bar .bar-row nav.town-nav { order: 0; flex: 1 1 auto; border-top: 0; align-self: stretch; }
  header.town-bar nav.town-nav ul { height: 100%; gap: 1.75rem; }
  header.town-bar nav.town-nav a { height: 100%; padding: 0; border-bottom-width: 3px; }
}
@media (min-width: 760px) and (hover: hover) {
  header.town-bar { background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); }
  header.town-bar .bar-row nav.town-nav { border-top-color: color-mix(in srgb, var(--line) 60%, transparent); }
  /* The photo runs up under the header. */
  body.town-home .hero.with-photo { margin-top: calc(-1 * var(--bar-h)); padding-top: calc(var(--bar-h) + 2rem); }
  .town-strip { display: block; position: relative; height: calc(var(--bar-h) + 6.5rem); margin-top: calc(-1 * var(--bar-h)); background: #2a251d center 42% / cover no-repeat; }
  .town-strip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 14, 9, 0.2), rgba(18, 14, 9, 0.05) 55%, rgba(18, 14, 9, 0.18)); }
}
.town-strip { display: none; }
@media (min-width: 1100px) {
  header.town-bar nav.town-nav ul { align-items: stretch; }
  header.town-bar nav.town-nav li { display: flex; }
  header.town-bar nav.town-nav a { height: auto; align-items: center; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  header.town-bar .town-mark, header.town-bar .bar-actions { min-height: 58px; }
}

/* The header's sections, the bell and your account: one group on the right, your account a chip. */
@media (min-width: 760px) {
  header.town-bar nav.town-nav ul { justify-content: flex-end; }
  header.town-bar .bar-actions { margin-left: auto; gap: 0.75rem; }
  header.town-bar .account { padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 0.92rem; }
  header.town-bar .account svg { color: currentColor; }
  header.town-bar .account:hover { text-decoration: none; filter: brightness(1.08); }
}
@media (min-width: 1100px) {
  header.town-bar .bar-row nav.town-nav { flex: 1 1 auto; }
  header.town-bar .bar-actions { margin-left: 1.75rem; }
}

/* One row of sections at every computer width; what doesn't fit is under "More". */
@media (min-width: 760px) {
  html.js { --bar-h: 70px; }
  html.js header.town-bar .bar-row { flex-wrap: nowrap; height: 64px; min-height: 0; }
  html.js header.town-bar .town-mark, html.js header.town-bar .bar-actions { min-height: 0; }
  html.js header.town-bar .bar-row nav.town-nav { order: 0; flex: 1 1 auto; min-width: 0; border-top: 0; align-self: stretch; overflow: visible; }
  html.js header.town-bar nav.town-nav ul { height: 100%; gap: 1.5rem; align-items: stretch; flex-wrap: nowrap; }
  html.js header.town-bar nav.town-nav li { display: flex; }
  html.js header.town-bar nav.town-nav a { height: auto; padding: 0; align-items: center; border-bottom-width: 3px; }
  html.js header.town-bar .bar-actions { margin-left: 1.5rem; }
}
.nav-more[hidden] { display: none !important; }
.nav-more { position: relative; }
.nav-more details { display: flex; }
.nav-more summary { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none; font-weight: 600; font-size: 0.92rem; color: var(--muted); border-bottom: 3px solid transparent; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary svg { color: var(--muted); }
/* When every section has gone under it, it's the whole menu: "Menu", with the three lines. */
.nav-more summary svg + svg, .nav-more.only summary svg:first-of-type { display: none; }
.nav-more.only summary svg + svg { display: inline; }
.nav-more.has-current summary { color: var(--text); border-bottom-color: var(--gold); }
.nav-more details[open] summary, .nav-more summary:hover { color: var(--text); }
.nav-more-list { position: absolute; top: 100%; right: 0; z-index: 60; min-width: 13rem; margin: 0; padding: 0.4rem; list-style: none;
  display: flex; flex-direction: column; gap: 0 !important; height: auto !important; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(30, 22, 10, 0.18); }
html.js header.town-bar nav.town-nav .nav-more-list li { display: block; }
html.js header.town-bar nav.town-nav .nav-more-list a { display: flex; gap: 0.6rem; padding: 0.6rem 0.75rem; border: 0; border-radius: 8px; color: var(--text); }
.nav-more-list a:hover { background: var(--bg); }
.nav-more-list a[aria-current="page"] { background: color-mix(in srgb, var(--gold) 16%, transparent); }
@media (min-width: 760px) {
  html.js header.town-bar .town-mark { flex: none; }
  html.js header.town-bar .bar-row nav.town-nav { display: flex; justify-content: flex-end; }
  html.js header.town-bar nav.town-nav > ul { flex: none; margin: 0; max-width: none; }
}
@media (min-width: 1000px) { .event-cols.single { grid-template-columns: minmax(0, 1fr); } }
/* The apps, coming soon: store-style badges with our own mark */
.apps-soon { gap: 0.6rem; }
.store-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem 0.45rem 0.7rem; border-radius: 10px; background: #111; color: #fff; border: 1px solid #444; line-height: 1.1; }
.store-badge svg { height: 30px; width: auto; color: #fff; flex: none; }
.store-badge small { display: block; font-size: 0.7rem; color: #ddd; }
.store-badge strong { display: block; font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; }

/* Your account: the same green chip at every width. */
header.town-bar .account { padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 0.92rem; text-decoration: none; }
header.town-bar .account svg { color: currentColor; }
@media (max-width: 759px) { header.town-bar .account { padding: 0.35rem 0.75rem; font-size: 0.88rem; } }
/* Frosted glass on phones too (just the header; the tab bar stays solid). */
@media (max-width: 759px) {
  header.town-bar { background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); }
  :root { --bar-h: 62px; }
  body.town-home .hero.with-photo { margin-top: calc(-1 * var(--bar-h)); padding-top: calc(var(--bar-h) + 1.5rem); }
}
.town-side .event-list { margin: 0; }
.town-side li.event { padding: 0.5rem 0; }
.town-side .ev-picture { display: none; }
.events-side h2 { margin-top: 1.25rem; }
.events-side h2.first { margin-top: 0; }
.cal-links a { gap: 0.5rem; }
.cal-logo { width: 18px; height: 18px; flex: none; }
.cal-links a svg.icon { color: #0078d4; }

/* The footer: what Prairie Town is on the left; the look switch and the apps on the right. */
footer.site .footer-main .pt { display: inline-block; }
footer.site .footer-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; margin-top: 1rem; }
footer.site .apps-soon { margin: 0; }
.store-badge { padding: 0.35rem 0.8rem 0.35rem 0.6rem; border-radius: 9px; }
.store-badge svg { height: 24px; }
.store-badge small { font-size: 0.62rem; }
.store-badge strong { font-size: 0.98rem; }
@media (min-width: 760px) {
  footer.site { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 2.5rem; align-items: start; }
  footer.site .footer-side { align-items: flex-end; margin-top: 0; }
  footer.site .apps-soon { justify-content: flex-end; }
}

/* An office's details (front page box, sidebar, Council and office page) */
.office-facts { margin: 0; display: grid; gap: 0.55rem; }
.office-facts > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; }
.office-facts dt { color: var(--muted); font-size: 0.85rem; font-weight: 600; padding-top: 0.1rem; }
.office-facts dd { margin: 0; overflow-wrap: anywhere; }
.council-cols { display: grid; gap: 0 3rem; }
.council-cols h2 { margin-top: 1.5rem; }
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem 1.25rem; }
.people li { display: flex; flex-direction: column; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.council-source { margin-top: 2rem; }
@media (min-width: 760px) {
  .council-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* A town's story, written from Wikipedia */
.story { max-width: 46rem; }
.story p { margin: 0 0 0.9rem; }
.story-credit { margin-top: 1rem; }

/* Photos: flagging, taking down, adding one */
.photo-flag { display: inline-block; margin-top: 0.3rem; font-size: 0.8rem; }
.photo-flag summary { cursor: pointer; color: var(--muted); list-style: none; }
.photo-flag summary::-webkit-details-marker { display: none; }
.photo-flag form { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.photo-flag button, .photo-remove button { font-size: 0.78rem; padding: 0.2rem 0.55rem; }
.photo-remove { display: inline-block; margin: 0.3rem 0 0 0.5rem; }
.add-photo { margin-top: 1.75rem; max-width: 40rem; }

/* The council records sales page (prairie.town/official) */
.official section { margin: 0 0 3rem; }
.official h2 { font-size: 1.6rem; letter-spacing: -0.01em; }
.sell-hero { display: grid; gap: 0; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); margin-top: 0.5rem !important; }
.sell-hero-photo { position: relative; min-height: 15rem; }
.sell-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; }
.sell-credit { position: absolute; left: 0.75rem; bottom: 0.6rem; right: 0.75rem; font-size: 0.7rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.sell-hero-text { padding: 1.75rem 1.5rem 1.5rem; }
.sell-hero-text h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0.2rem 0 0.75rem; }
.countdown { margin: 1.25rem 0 0; padding: 1rem 1.1rem; }
.countdown p { margin: 0; }
.countdown-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.countdown-days { font-size: 1.05rem; margin: 0.15rem 0 0.5rem !important; }
.countdown-days strong { font-size: 2.2rem; line-height: 1; color: var(--accent); margin-right: 0.2rem; }
.meter { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 0 0 0.5rem; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.button.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
.step-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.step-cards li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.step-cards li svg { color: var(--gold); }
.step-cards strong { font-size: 1.1rem; }
.step-cards span { color: var(--muted); font-size: 0.95rem; }
.ticks { list-style: none; padding: 0; margin: 0.75rem 0; display: grid; gap: 0.45rem; }
.ticks li { display: flex; gap: 0.5rem; align-items: flex-start; }
.ticks svg { flex: none; color: var(--accent); margin-top: 0.15rem; }
.sell-show { display: grid; gap: 1.5rem; align-items: center; }
.mock-browser { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 14px 40px rgba(40, 30, 10, 0.12); }
.mock-bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.75rem; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 0.75rem; color: var(--muted); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mock-bar span { margin-left: 0.5rem; }
.mock-page { padding: 1rem 1.1rem 1.25rem; }
.mock-h { font-weight: 800; font-size: 1.2rem; margin: 0 0 0.6rem; }
.mock-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mock-k { font-weight: 700; margin: 0.4rem 0 0.3rem; font-size: 0.9rem; }
.mock-row { margin: 0; padding: 0.35rem 0; border-bottom: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.mock-row b { display: block; color: var(--accent); font-weight: 600; }
.plan-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 1.25rem 0 1rem; }
.plan { position: relative; padding: 1.4rem 1.3rem 1.2rem; }
.plan.best { border: 2px solid var(--accent); }
.plan-badge { position: absolute; top: -0.75rem; left: 1.2rem; margin: 0; background: var(--accent); color: var(--accent-text); font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 99px; }
.plan-name { font-weight: 700; font-size: 1.15rem; margin: 0; }
.plan-price { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; margin: 0.25rem 0 0.25rem; line-height: 1.1; }
.plan-price span { display: block; font-size: 0.9rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.includes { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); padding: 1.2rem 1.3rem; }
.includes-h { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.1rem; margin: 0 0 0.75rem; }
.includes-h svg { color: var(--accent); }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.feature-list li { display: flex; gap: 0.6rem; align-items: flex-start; }
.feature-list svg { flex: none; color: var(--accent); }
.sell-free .feature-list { margin: 1rem 0 1.1rem; }
.sell-free .feature-list li span { color: var(--text); }
.sell-faq .faq { max-width: 46rem; }
.sell-start { padding: 1.4rem 1.3rem; }
.access-form { max-width: 30rem; margin-top: 0.75rem; }
.sell-close { border-radius: 18px; padding: 2rem 1.5rem; color: #fff; background: linear-gradient(135deg, #2e5e3a, #1f3f28 60%, #3b3220); }
.sell-close h2 { color: #fff; margin-top: 0; }
.sell-close a:not(.button) { color: #fff; }
.sell-close .button { background: #fff; color: #1f3f28; }
.sell-made { text-align: center; }
@media (min-width: 900px) {
  .sell-hero { grid-template-columns: 1fr 1.1fr; }
  .sell-hero-photo { min-height: 100%; }
  .sell-hero-text { padding: 2.25rem 2.25rem 2rem; }
  .sell-show { grid-template-columns: 1fr 1.1fr; gap: 3rem; }
  .sell-close { padding: 2.5rem 2.5rem; }
}
/* The office's plan page */
.plan-status { display: inline-block; font-weight: 700; font-size: 0.85rem; padding: 0.15rem 0.6rem; border-radius: 99px; background: var(--line); margin: 0 0 0.5rem; }
.plan-status.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.plan-status.overdue, .plan-status.lapsed { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.pay-first { border-left: 4px solid var(--gold); }
.table-wrap { overflow-x: auto; }
.plans-table th, .plans-table td { text-align: left; vertical-align: top; padding: 0.5rem 0.6rem; font-size: 0.9rem; }
.older-years { margin: 0.75rem 0 0; }
.older-years summary { cursor: pointer; color: var(--accent); font-weight: 600; }

/* The landing page (prairie.town) */
.hero-sub { margin: 0.9rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.home section { margin: 2.75rem 0; }
.home h2 { font-size: 1.6rem; letter-spacing: -0.01em; }
.section-head h2 { margin-bottom: 0.25rem; }
.section-head p { margin: 0 0 1.25rem; }
.town-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.town-cards a { display: flex; flex-direction: column; height: 100%; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: box-shadow 0.15s, transform 0.15s; }
.town-cards a:hover { box-shadow: 0 10px 28px rgba(40, 30, 10, 0.14); transform: translateY(-2px); }
.town-card-photo { display: block; aspect-ratio: 16 / 9; background: #2a251d; }
.town-card-photo img { width: 100%; height: 100%; object-fit: cover; background-size: cover; display: block; }
.town-card-blank { display: grid; place-items: center; height: 100%; color: #fff; }
.town-card-blank svg { height: 56px; width: auto; }
.town-card-text { display: flex; flex-direction: column; padding: 0.8rem 1rem 1rem; }
.town-card-text small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.town-card-text strong { font-family: var(--display); font-weight: 900; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.15; }
.feature-cards { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.showcase { display: grid; gap: 2rem; align-items: center; }
.phone-mock { justify-self: center; width: 250px; padding: 10px; border-radius: 36px; background: #1b1813; box-shadow: 0 24px 60px rgba(30, 22, 8, 0.28); }
.pm-screen { border-radius: 27px; overflow: hidden; background: #f5f1e8; height: 470px; display: flex; flex-direction: column; color: #221f1a; position: relative; }
.pm-hero { height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; background: linear-gradient(180deg, rgba(18,14,9,0.4), rgba(18,14,9,0.6)), radial-gradient(120% 90% at 50% 0%, #6a5a3e 0%, #3b3220 70%); }
.pm-hero span svg { height: 52px; width: auto; color: #fff; }
.pm-hero b { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0.02em; }
.pm-card { margin: 12px 12px 4px; padding: 8px 10px; background: #fffdf8; border: 1px solid #e2dacb; border-left: 3px solid #c8962e; border-radius: 0 8px 8px 0; display: flex; flex-direction: column; font-size: 0.72rem; }
.pm-card i { font-style: normal; font-weight: 700; color: #c8962e; text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.08em; }
.pm-card span { color: #696255; }
.pm-k { margin: 10px 12px 4px; font-weight: 700; font-size: 0.8rem; }
.pm-row { display: flex; gap: 10px; align-items: center; margin: 0 12px; padding: 7px 0; border-bottom: 1px solid #e2dacb; font-size: 0.72rem; }
.pm-row em { font-style: normal; border-left: 3px solid #2e5e3a; padding-left: 6px; display: flex; flex-direction: column; font-weight: 800; font-size: 1rem; line-height: 1; }
.pm-row em small { font-size: 0.55rem; color: #696255; font-weight: 600; }
.pm-row span { display: flex; flex-direction: column; color: #696255; }
.pm-row b { color: #221f1a; }
.pm-tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 12px 0 16px; border-top: 1px solid #e2dacb; background: #fffefb; }
.pm-tabs span { width: 22px; height: 22px; border-radius: 6px; background: #e2dacb; }
.pm-tabs span:nth-child(2) { background: #2e5e3a; }
.showcase-text .apps-soon { justify-content: flex-start; }
.province { display: grid; gap: 1.5rem; align-items: center; }
.province-map svg { width: 100%; max-width: 19rem; height: auto; display: block; margin: 0 auto; }
.big-number { font-size: 1.1rem; margin: 0.25rem 0; }
.big-number strong { font-size: 3rem; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; margin-right: 0.3rem; }
.audiences { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.audiences .card { padding: 1.3rem 1.3rem 1.1rem; }
.audiences h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; margin-top: 0; }
.audiences h2 svg { color: var(--gold); }
.audiences .offices { border: 2px solid var(--accent); }
.trust { list-style: none; padding: 0; margin: 2rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; color: var(--muted); font-weight: 600; }
.trust li { display: flex; align-items: center; gap: 0.45rem; }
.trust svg { color: var(--accent); }
.home-close { text-align: center; }
.home-close form { max-width: 34rem; margin: 1rem auto 0; position: relative; }
@media (min-width: 900px) {
  .showcase { grid-template-columns: 1fr 1.3fr; gap: 3rem; }
  .province { grid-template-columns: 1fr 1.6fr; gap: 3rem; }
}
@media (max-width: 599px) {
  .feature-cards, .town-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .feature-cards li { padding: 0.85rem 0.8rem 0.9rem; }
  .feature-cards span { font-size: 0.85rem; }
  .town-card-text { padding: 0.6rem 0.7rem 0.75rem; }
  .town-card-text strong { font-size: 1.1rem; }
  .town-card-text .small { display: none; }
}

/* Announcements */
html.js .announcement-form:not(.is-memory) .memory-only { display: none; }
html.js .announcement-form.is-memory .memory-hide { display: none; }
.scan-card { border-style: dashed; }
.announcement-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.75rem; }
.announcement-list a { display: flex; gap: 1rem; align-items: center; padding: 0.8rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
.announcement-list a:hover { box-shadow: 0 6px 18px rgba(40, 30, 10, 0.1); }
.ann-photo { flex: none; width: 76px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--bg); display: grid; place-items: center; }
.ann-photo img { width: 100%; height: 100%; object-fit: cover; }
.ann-icon { color: var(--gold); }
.ann-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ann-text small, .ann-mini small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ann-text strong { font-size: 1.15rem; }
.announcement.memory .ann-text strong { font-family: Georgia, 'Times New Roman', serif; font-weight: 600; }
.announcement-page { max-width: 42rem; }
.announcement-page.memory h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 600; }
.ann-photos { display: flex; gap: 0.75rem; margin: 0 0 1rem; }
.ann-photos img { max-height: 22rem; width: auto; max-width: 100%; border-radius: 12px; }
.ann-body p { margin: 0 0 0.9rem; line-height: 1.6; }
.service { border-left: 4px solid var(--gold); }
.ann-mini { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; }
.ann-mini a { display: flex; flex-direction: column; padding: 0.5rem 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.ann-mini strong { font-size: 1.05rem; }

/* Garbage and recycling */
.pickups { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0 0 1rem; }
.pickup-what { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.15rem; }
.pickup-what svg { color: var(--gold); }
.pickup-area { margin: 0.15rem 0 0; font-weight: 600; }
.pickup-days { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pickup-days li { padding: 0.2rem 0.6rem; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); font-size: 0.9rem; }
.pickup-days li.next { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; }
.pickup-note { margin: 0.8rem 0 0; }
.pickup-row { border: 0; border-top: 1px solid var(--line); padding: 0.75rem 0 0; margin: 0; }
.remind { margin-top: 1rem; }
#garbage dd.soon { font-weight: 700; color: var(--accent); }

/* Every form's boxes alike: plain text (not the label's bold), one height, whatever the kind. And in a
   row of fields side by side, the boxes line up along the bottom, however long each label and its hint. */
input, select, textarea { font-weight: 400; }
input[type=text], input[type=number], input[type=search], input[type=email], input[type=tel], input[type=url], input[type=password],
input[type=date], input[type=time], select { box-sizing: border-box; min-height: 2.75rem; line-height: 1.25; }
input[type=date], input[type=time] { max-width: 24rem; }
.scan-when > label, .two > label { display: flex; flex-direction: column; }
.scan-when > label > :is(input, select, textarea), .two > label > :is(input, select, textarea) { margin-top: auto; }
.scan-when > label > .help, .two > label > .help { margin-bottom: 0.25rem; }
/* A box inside its label always sits under the label's words, and in a stacked form every box runs the
   form's full width (tick boxes, the weekday pills and the little "on the first Monday" pickers keep theirs). */
:where(label:not(.check):not(.day)) > :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) { display: block; width: 100%; margin-top: 0.25rem; }  /* lowest priority: any layout of its own wins */
form.stack :is(input[type=text], input[type=number], input[type=search], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=date], input[type=time], select, textarea):not(.month-day *):not(.more-dates *) { max-width: none; width: 100%; }
/* (These two after the rules above, so they win:) plain text in every box, and boxes side by side on one line. */
form :is(input, select, textarea), label :is(input, select, textarea) { font-weight: 400 !important; }
.scan-when > label:not(.check) > :is(input, select, textarea), .two > label:not(.check) > :is(input, select, textarea) { margin-top: auto; }
.pickup-row + .pickup-row { margin-top: 1.25rem; }
.listing-grid .tag.lost { background: var(--warn); color: #fff; }
.listing-grid .tag.found { background: var(--accent); color: var(--accent-text); }
.listing-price.lost { color: var(--warn); }
.listing-price.found { color: var(--accent); }

/* Rink and ball schedules */
.sched-day { font-size: 1.1rem; margin: 1.5rem 0 0.4rem; }
.sched-list { list-style: none; padding: 0; margin: 0; }
.sched-list li { display: flex; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.sched-time { flex: none; width: 8.5rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sched-rows { margin: 0.75rem 0; }
.sched-rows th { font-size: 0.85rem; }
.sched-rows td { padding: 0.25rem 0.35rem 0.25rem 0; border: 0; }
.sched-rows td:nth-child(1) { width: 11rem; } .sched-rows td:nth-child(2), .sched-rows td:nth-child(3) { width: 8rem; }
.sched-rows input { min-height: 2.4rem; padding: 0.35rem 0.5rem; }
@media (max-width: 640px) { .sched-rows thead { display: none; } .sched-rows tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.3rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); } .sched-rows td { width: auto !important; } .sched-rows td:nth-child(4) { grid-column: 1 / -1; } }
.page-switch { margin: 0 0 0.75rem; }
.row-actions { white-space: nowrap; text-align: right; } .row-actions a + a { margin-left: 0.6rem; } .open-place { margin: 0 0 0.75rem; }

/* No double-tap zoom anywhere (the tab bar, buttons, pages); pinching stays in browsers, and in the app
   photos zoom in their viewer. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.lightbox .slide { overflow: hidden; }
.lightbox .slide img { transition: transform 0.15s ease-out; transform-origin: center; }
.lightbox .slide img.zoomed { transition: none; }
.lightbox .slides.locked { overflow: hidden; }

/* The frosted header, brighter: mostly the page's own colour, and in light mode whatever shows through it
   brightened, so a dark photo behind doesn't turn it grey. Dark mode keeps a dark glass. */
:root { --glass: color-mix(in srgb, var(--surface) 88%, transparent); --glass-filter: blur(20px) saturate(1.5) brightness(1.35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: color-mix(in srgb, var(--surface) 80%, transparent); --glass-filter: blur(20px) saturate(1.4); } }
:root[data-theme="dark"] { --glass: color-mix(in srgb, var(--surface) 80%, transparent); --glass-filter: blur(20px) saturate(1.4); }
@media (min-width: 0px) {
  header.town-bar { background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
}
.impact { margin: 0 0 0.75rem; padding: 0.55rem 0.8rem; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); font-weight: 600; font-size: 0.95rem; }
.thanks { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.3rem; }

/* History: memories under a photo, and the one "Share a photo" door. */
.memories { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
blockquote.memory { margin: 0; padding: .75rem 1rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; }
blockquote.memory p { margin: 0 0 .35rem; white-space: pre-line; }
blockquote.memory footer { font-size: .9rem; }
blockquote.memory footer::before { content: "— "; }
.share-choice { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.share-choice a.card { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: inherit; }
.share-choice a.card strong { font-size: 1.15rem; color: var(--accent); }

/* Straightening a picture: the picture, the shape being kept, and four handles to drag. */
.straighten-stage { position: relative; display: inline-block; max-width: 100%; margin: .5rem 0; touch-action: none; user-select: none; -webkit-user-select: none; line-height: 0; }
.straighten-stage img { display: block; max-width: 100%; max-height: 75vh; width: auto; height: auto; -webkit-touch-callout: none; }
.straighten-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.straighten-stage .shade { fill: rgba(0, 0, 0, .45); }
.straighten-stage polygon { fill: none; stroke: #8cc79a; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.straighten-stage .corner { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
.straighten-stage .corner::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.straighten-stage .corner:focus-visible::after { outline: 3px solid var(--gold); outline-offset: 2px; }
.straighten-stage .loupe { position: absolute; width: 110px; height: 110px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  background-repeat: no-repeat; pointer-events: none; z-index: 2; }
.straighten-stage .loupe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--accent); }
.straighten-undo { margin-top: 1rem; }

/* A keeper on an item's own page: Review opens its form right there. */
details.keeper-review { margin: 1rem 0 1.5rem; }
details.keeper-review > summary { list-style: none; cursor: pointer; display: inline-block; }
details.keeper-review > summary::-webkit-details-marker { display: none; }
details.keeper-review > summary .button { display: inline-flex; align-items: center; gap: .4rem; padding: 0.5rem 1rem; border-radius: 8px;
  background: var(--accent); color: var(--accent-text); border: 1px solid var(--accent); font-weight: 600; }
details.keeper-review[open] > summary .button { background: transparent; color: var(--text); border-color: var(--line); }
details.keeper-review > .card { margin-top: .6rem; }
details.keeper-review .notice form { margin-top: .4rem; }

/* The keeper's collection as a grid: three or four across on a computer, two on a phone. An item
   being reviewed opens across the whole row. */
.k-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.k-head h2 { margin-bottom: .6rem; }
.k-head .k-view { margin-bottom: .6rem; }
.k-view { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.k-view button { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .8rem; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: .9rem; font-weight: 600; }
.k-view button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.k-list.k-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; border-top: 0; }
.k-grid .k-item { display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.k-grid .k-item summary { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.k-grid .k-item .k-thumb { width: 100%; height: 160px; border-radius: 0; }
.k-grid .k-meta { padding: .55rem .7rem 0; }
.k-grid .k-meta strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-grid .k-review { display: inline-block; align-self: flex-start; margin: .5rem .7rem .7rem; }
.k-grid .k-quick { padding: 0 .7rem .7rem; justify-content: flex-start; margin-top: auto; }
@media (max-width: 759px) {
  .k-list.k-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .k-grid .k-item .k-thumb { height: 110px; }
  .k-grid .k-quick { padding: 0 .6rem .6rem; flex-wrap: wrap; }
  .k-grid .k-item, .k-grid .k-item:has(details[open]) { display: flex; }
}

/* Reviewing an item in the keeper's workspace: it opens full screen, the picture beside its form on a
   computer, above it on a phone. Close (or Escape) goes back to the collection where it was. */
html:has(.k-list details[open]) { overflow: hidden; }
.k-list .k-item details[open] { position: fixed; inset: 0; z-index: 1000; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; padding: 0 0 3rem; }
.k-list .k-item details[open] > summary { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: row; align-items: center; gap: .75rem;
  padding: .6rem max(1rem, calc((100vw - 1200px) / 2)); background: var(--surface); border-bottom: 1px solid var(--line); }
.k-list .k-item details[open] > summary .k-thumb { width: 56px; height: 42px; border-radius: 6px; }
.k-list .k-item details[open] > summary .k-meta { padding: 0; }
.k-list .k-item details[open] > summary .k-meta strong { white-space: nowrap; display: block; }
.k-list .k-item details[open] > summary .k-review { display: inline-block; margin: 0; padding: .45rem 1rem; font-size: .95rem; }
.k-list .k-item details[open] > .history-item { max-width: 1200px; margin: 1.25rem auto 0; padding: 0 1rem; }
.k-list .k-item details[open] .k-large { max-width: 100%; max-height: 70vh; width: auto; margin: 0 auto; }
@media (min-width: 900px) {
  .k-list .k-item details[open] > .history-item { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .k-list .k-item details[open] .history-head { position: sticky; top: 5rem; }
  .k-list .k-item details[open] .k-large { width: 100%; height: auto; max-height: calc(100vh - 7rem); object-fit: contain; }
  .k-list .k-item details[open] .k-fields { display: flex; flex-direction: column; gap: .25rem; }
}
@media (max-width: 899px) {
  .k-list .k-item details[open] .k-fields { display: flex; flex-direction: column; gap: .25rem; margin-top: 1rem; }
}

/* Memories: a flag for the town's locals, and a count beside a photo that has some. */
blockquote.memory { position: relative; }
.memory-flag { margin: .35rem 0 0; }
.memory-flag button { padding: 0; border: 0; background: none; color: var(--muted); font-size: .8rem; text-decoration: underline; cursor: pointer; }
a.memory-count { display: inline-flex; align-items: center; gap: .2rem; margin-left: .35rem; font-size: .8rem; color: var(--muted); text-decoration: none; }

/* Council and office: the office's own pages, under its details. */
.office-links { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.office-links li { border-bottom: 1px solid var(--line); }
.office-links a { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem 0; text-decoration: none; color: var(--text); }
.office-links a svg { flex: none; margin-top: .15rem; color: var(--accent); }
.office-links a span { display: flex; flex-direction: column; font-weight: 600; }
.office-links a small { font-weight: 400; color: var(--muted); font-size: .85rem; }
.office-links a:hover span { color: var(--accent); }

/* The front page: a row of places running now (one row; it scrolls sideways on a phone), then the offer
   for town and RM offices, high enough for an administrator to find. */
.row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.row-head .see-all { margin-bottom: 1.25rem; font-weight: 600; white-space: nowrap; }
.town-cards.one-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; }
.town-cards.one-row .town-card-photo { aspect-ratio: 3 / 2; overflow: hidden; }
.town-card-photo picture { display: block; height: 100%; }
.town-cards.one-row .town-card-text { padding: 0.55rem 0.75rem 0.7rem; }
.town-cards.one-row .town-card-text small { font-size: 0.6rem; }
.town-cards.one-row .town-card-text strong { font-size: 1.05rem; }
.town-cards.one-row .town-card-text .small { font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899px) {
  .town-cards.one-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 1rem; padding-bottom: 0.4rem; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; scrollbar-width: none; }
  .town-cards.one-row::-webkit-scrollbar { display: none; }
  .town-cards.one-row li { flex: 0 0 42%; scroll-snap-align: start; }
}
.office-band { display: grid; gap: 1.5rem; align-items: center; border-radius: 18px; padding: 1.75rem 1.5rem; color: #fff;
  background: linear-gradient(135deg, #2e5e3a, #1f3f28 60%, #3b3220); }
.office-band h2 { color: #fff; margin: 0.25rem 0 0.6rem; font-size: 1.55rem; line-height: 1.2; }
.office-band p { margin: 0 0 0.9rem; color: rgba(255, 255, 255, 0.9); }
.office-band strong { color: #fff; }
.office-band .eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #e9cf8d; }
.office-band .button { background: #fff; color: #1f3f28; }
.office-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0 !important; }
.office-band .ticks { margin: 0; }
.office-band .ticks li { color: #fff; }
.office-band .ticks svg { color: #e9cf8d; }
@media (min-width: 900px) {
  .office-band { grid-template-columns: 1.5fr 1fr; padding: 2.25rem 2.5rem; gap: 2.5rem; }
}
/* Every page, A to Z. */
.az { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 1rem 0 1.5rem; }
.az a { min-width: 2rem; text-align: center; padding: 0.25rem 0.4rem; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; font-weight: 600; }
.az-group h2 { margin: 1.5rem 0 0.5rem; border-bottom: 1px solid var(--line); padding-bottom: 0.25rem; }
.az-list { list-style: none; margin: 0; padding: 0; columns: 3 14rem; column-gap: 2rem; }
.az-list li { break-inside: avoid; padding: 0.2rem 0; }

/* The front page: the first section sits close under the photo. */
.landing main { padding-top: 1.75rem; }
.home > :first-child, .home > :first-child .section-head h2 { margin-top: 0; }

/* A directory entry's pictures: room above them on a phone, and one picture shown in its own shape
   (an ad is usually wide), on the page's colour rather than a black box. */
@media (max-width: 999px) { .detail-cols:not(.media-top) .detail-media { margin-top: 1.5rem; } }
.gallery.single { background: transparent; }
.gallery.single .slide { max-height: none; }

/* The admin page: its groups down the left (across the top on a phone), the chosen one's sections beside. */
body.admin main { max-width: 1280px; }
.admin-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.admin-main { min-width: 0; }
.admin-main table { display: block; overflow-x: auto; }
.admin-nav { font-size: 0.95rem; }
.admin-brand { font-weight: 800; margin: 0 0 0.75rem; }
.admin-nav ul { list-style: none; margin: 0; padding: 0; }
.admin-nav > ul > li > a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; }
.admin-nav > ul > li > a:hover { background: var(--surface); }
.admin-nav > ul > li > a[aria-current="page"] { background: var(--accent); color: var(--accent-text); }
.admin-nav li ul { margin: 0.25rem 0 0.6rem 0.75rem; border-left: 2px solid var(--line); }
.admin-nav li ul a { display: block; padding: 0.25rem 0.75rem; color: var(--muted); text-decoration: none; font-size: 0.88rem; }
.admin-nav li ul a:hover { color: var(--accent); }
.admin-badge { min-width: 1.4rem; padding: 0 0.4rem; border-radius: 999px; background: #c0392b; color: #fff; font-size: 0.75rem; line-height: 1.4rem; text-align: center; }
.admin-main h1 { margin-top: 0; }
.admin-main > h2:first-of-type { margin-top: 0.5rem; }
@media (min-width: 900px) {
  .admin-layout { grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .admin-nav { position: sticky; top: 1.5rem; }
}
@media (max-width: 899px) {
  .admin-nav > ul { display: flex; overflow-x: auto; gap: 0.35rem; scrollbar-width: none; }
  .admin-nav > ul > li > a { white-space: nowrap; border: 1px solid var(--line); }
  .admin-nav li ul { display: none; }
}

/* Council records: one kind at a time, and the words around a search's match. */
.record-tabs { margin: 0.5rem 0 1.25rem; }
.record-tabs .n { opacity: 0.7; font-size: 0.85em; margin-left: 0.15rem; }
.record-snippet { display: block; margin-top: 0.3rem; font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.record-snippet mark { background: #f5e3a3; color: inherit; padding: 0 0.1em; border-radius: 2px; }

/* ===== Colour: each community's palette, and a colour for each section ===================================
   A palette sets the community's main colour (buttons, links, the footer band) and a light tint. Each
   section (events, records, buy and sell…) has its own colour, carried by its icon, its panel's top edge,
   its links and its place in the menu. */
body[class*="palette-"] { --accent: var(--p-accent); }
.palette-prairie { --p-accent: #2e5e3a; --p-accent-dark: #8cc79a; }
.palette-canola  { --p-accent: #3d6b1e; --p-accent-dark: #a9d27c; }
.palette-lake    { --p-accent: #1d5f8f; --p-accent-dark: #8cc2e6; }
.palette-sunset  { --p-accent: #a8432a; --p-accent-dark: #f0a98a; }
.palette-sage    { --p-accent: #3f6a58; --p-accent-dark: #9fcbb5; }
.palette-sky     { --p-accent: #146b80; --p-accent-dark: #86cbdc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[class*="palette-"] { --accent: var(--p-accent-dark); } }
:root[data-theme="dark"] body[class*="palette-"] { --accent: var(--p-accent-dark); }

[data-section] { --sec: var(--p-accent, #2e5e3a); }
[data-section="notices"] { --sec: #c2410c; }
[data-section="events"] { --sec: #2563a6; }
[data-section="file"] { --sec: #2e7d4f; }
[data-section="market"] { --sec: #af5f05; }
[data-section="directory"] { --sec: #0f766e; }
[data-section="candle"] { --sec: #6b5b95; }
[data-section="search"] { --sec: #b45309; }
[data-section="trash"] { --sec: #4d7c0f; }
[data-section="history"] { --sec: #9a4a12; }
[data-section="photos"] { --sec: #7c3aed; }
[data-section="office"] { --sec: #475569; }
[data-section="map"], [data-section="nearby"] { --sec: #0e7490; }
[data-section="weather"] { --sec: #0284c7; }
[data-section="mail"] { --sec: var(--accent); }
/* On dark, the same colours lifted so links stay readable. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .town-home .panel .more-link { color: color-mix(in srgb, var(--sec) 55%, #fff); } }
:root[data-theme="dark"] .town-home .panel .more-link { color: color-mix(in srgb, var(--sec) 55%, #fff); }

/* Panels on a community's front page: bright cards with their section's colour along the top. */
.town-home .panel { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sec); border-radius: 14px;
  padding: 1.05rem 1.15rem 1.2rem; margin: 0 0 1.1rem; box-shadow: 0 1px 2px rgba(40, 30, 10, 0.04), 0 8px 22px rgba(40, 30, 10, 0.05); }
.town-home .panel-head h2 svg, .town-side .side-box h2 svg { color: var(--sec); }
.town-home .panel .more-link { color: var(--sec); font-weight: 600; }

/* The menu: each section's icon in its colour, and its own colour under the page you're on. */
nav.town-nav a[data-section] svg, nav.town-nav a[data-section][aria-current="page"] svg { color: var(--sec); }
nav.town-nav a[data-section][aria-current="page"] { border-bottom-color: var(--sec); }
.tabbar a[data-section][aria-current="page"] { color: var(--sec); }

/* The first card in each column is a card like the rest (the older rule took its top edge away). */
.town-home .col-main > .panel:first-child, .town-home .col-side > .panel:first-child, .town-home main > .panel:first-child {
  border-top: 4px solid var(--sec); padding-top: 1.05rem; }
/* A notice in the Notices card carries the card's colour, not a second one. */
.town-home .panel[data-section] .notice-item { border-left-color: var(--sec); }
/* Cards: the same gap between them across as down. */
@media (min-width: 900px) { .town-home .town-cols { column-gap: 1.25rem; } }
.town-home .panel { margin-bottom: 1.25rem; }
/* Inside a card, its own colour: the events' date markers are the Events blue. */
.town-home .panel[data-section] li.event .badge { border-left-color: var(--sec); }

/* Every page like the front page: its content in a card with its section's colour along the top, and
   the sidebar's boxes as cards, the same gap between them all. */
[data-section="home"] { --sec: var(--accent); }
body[class*="palette-"] .page-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sec); border-radius: 14px;
  padding: 1.35rem 1.5rem 1.6rem; box-shadow: 0 1px 2px rgba(40, 30, 10, 0.04), 0 8px 22px rgba(40, 30, 10, 0.05); }
.page-card > :first-child, .page-card > .back-link:first-child + h1 { margin-top: 0; }
.page-card > :last-child { margin-bottom: 0; }
.page-card .card { box-shadow: none; }
@media (max-width: 599px) { body[class*="palette-"] .page-card { padding: 1.1rem 1rem 1.3rem; border-radius: 12px; } }
@media (min-width: 1000px) {
  body[class*="palette-"] .with-side { column-gap: 1.25rem; }
  body[class*="palette-"] .town-side { padding-top: 0; }
  body[class*="palette-"] .town-side .side-box { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sec); border-radius: 14px;
    padding: 1rem 1.1rem 1.1rem; margin: 0 0 1.25rem; box-shadow: 0 1px 2px rgba(40, 30, 10, 0.04), 0 8px 22px rgba(40, 30, 10, 0.05); }
  body[class*="palette-"] .town-side .side-box:last-child { border-bottom: 1px solid var(--line); }
}
.nav-more.has-current summary { border-bottom-color: var(--sec); }
[data-section] li.event .badge { border-left-color: var(--sec); }

/* A page's buttons, tabs and links in its section's colour (white on each passes the contrast check);
   the front page and "stay in the loop" keep the town's own colour. On dark, the colours are lifted. */
:is(.page-card, .panel, .side-box)[data-section]:not([data-section="home"]):not([data-section="mail"]) { --accent: var(--sec); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.page-card, .panel, .side-box)[data-section]:not([data-section="home"]):not([data-section="mail"]) { --accent: color-mix(in srgb, var(--sec) 55%, #fff); --accent-text: #14130f; }
}
:root[data-theme="dark"] :is(.page-card, .panel, .side-box)[data-section]:not([data-section="home"]):not([data-section="mail"]) { --accent: color-mix(in srgb, var(--sec) 55%, #fff); --accent-text: #14130f; }

/* ===== The modern look (body.modern; dev only until chosen) ==============================================
   White and clean: neutral greys instead of paper beige, one accent colour per town, colour kept to the
   small icons, bigger and bolder type with more room, and a bright modern photo at the top with the
   town's name in plain bold type. */
body.modern { --bg: #f5f6f7; --surface: #ffffff; --text: #15171a; --muted: #5a6068; --line: #e4e7ea; background: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.modern { --bg: #0f1113; --surface: #181b1e; --text: #eceff1; --muted: #a2a8ae; --line: #2a2f34; } }
:root[data-theme="dark"] body.modern { --bg: #0f1113; --surface: #181b1e; --text: #eceff1; --muted: #a2a8ae; --line: #2a2f34; }
body.modern { font-size: 1.0625rem; line-height: 1.6; }
body.modern h1 { font-size: clamp(1.9rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
body.modern h2 { letter-spacing: -0.015em; }

/* One colour: buttons, links and tabs in the town's accent everywhere; the section colours only on icons. */
body.modern :is(.page-card, .panel, .side-box)[data-section]:not([data-section="home"]):not([data-section="mail"]), body.modern :is(.page-card, .panel, .side-box)[data-section] { --accent: var(--p-accent); --accent-text: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.modern :is(.page-card, .panel, .side-box)[data-section]:not([data-section="home"]):not([data-section="mail"]), :root:not([data-theme="light"]) body.modern :is(.page-card, .panel, .side-box)[data-section] { --accent: var(--p-accent-dark); --accent-text: #0f1113; } }
:root[data-theme="dark"] body.modern :is(.page-card, .panel, .side-box)[data-section]:not([data-section="home"]):not([data-section="mail"]), :root[data-theme="dark"] body.modern :is(.page-card, .panel, .side-box)[data-section] { --accent: var(--p-accent-dark); --accent-text: #0f1113; }
body.modern [data-section] li.event .badge, body.modern .panel[data-section] .notice-item { border-left-color: var(--accent); }
body.modern nav.town-nav a[data-section][aria-current="page"], body.modern .nav-more.has-current summary { border-bottom-color: var(--text); }

/* Cards: white, a hairline border and the faintest shadow; no coloured top edge. */
body.modern .town-home .panel, body.modern.town-home .panel, body.modern .page-card, body.modern .town-side .side-box,
body.modern .town-home .col-main > .panel:first-child, body.modern .town-home .col-side > .panel:first-child {
  border: 1px solid var(--line) !important; border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); background: var(--surface); }
body.modern.town-home .panel { padding: 1.25rem 1.35rem 1.4rem; }
body.modern .panel-head h2, body.modern .side-box h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
body.modern .panel .more-link { color: var(--accent) !important; }
body.modern .page-card { padding: 1.6rem 1.75rem 1.9rem; }
@media (max-width: 599px) { body.modern .page-card { padding: 1.2rem 1.1rem 1.4rem; } }
body.modern .card { border-radius: 14px; border-color: var(--line); background: var(--surface); }
body.modern .muted { color: var(--muted); }
body.modern header.bar { background: var(--surface); border-bottom: 1px solid var(--line); }

/* The top: a bright photo, a light shade only behind the words, the name big and plain at the bottom left. */
body.modern .hero.modern-hero.with-photo { min-height: clamp(20rem, 46vh, 28rem); justify-content: flex-end; align-items: flex-start; text-align: left; padding: 5rem max(16px, calc((100vw - var(--page)) / 2 + 16px)) 2.4rem; }
body.modern .hero.modern-hero.with-photo::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%); }
body.modern .hero.modern-hero .hero-mark { max-width: none; }
body.modern .hero-name { display: flex; align-items: center; gap: 0.75rem; margin: 0; line-height: 1; font-family: var(--sans); font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 4.25rem); letter-spacing: -0.035em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
body.modern .hero-mark-small svg { width: clamp(2.6rem, 6vw, 3.6rem); height: auto; color: #fff; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); display: block; }
body.modern .hero.modern-hero .hero-facts { margin: 0.75rem 0 0; max-width: none; font-size: 1rem; font-weight: 500; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
body.modern .hero.modern-hero .hero-credit { left: auto; right: max(16px, calc((100vw - var(--page)) / 2 + 16px)); text-align: right; opacity: 0.85; }
@media (max-width: 640px) {
  body.modern .hero.modern-hero.with-photo { padding-bottom: 3.6rem; }
  body.modern .hero.modern-hero .hero-credit { left: 16px; right: 16px; bottom: 10px; text-align: left; }
}
/* On a phone, the photo's credit is its own line under the town's name, not over it. */
@media (max-width: 640px) {
  body.modern .hero.modern-hero.with-photo { padding-bottom: 1rem; }
  body.modern .hero.modern-hero .hero-credit { position: static; margin: 0.9rem 0 0; opacity: 0.8; }
}
/* Tab labels: one line, always. */
.tabbar a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ===== A colour for every section, around the wheel (each passes the contrast check for white text) ===== */
[data-section="notices"] { --sec: #c0362c; }
[data-section="history"] { --sec: #8a4a1c; }
[data-section="market"] { --sec: #b05a07; }
[data-section="search"] { --sec: #8c6400; }
[data-section="trash"] { --sec: #4f7a0c; }
[data-section="file"] { --sec: #237a46; }
[data-section="directory"] { --sec: #0f766e; }
[data-section="map"] { --sec: #0e7490; }
[data-section="events"] { --sec: #2563a6; }
[data-section="office"] { --sec: #475569; }
[data-section="sports"] { --sec: #4547b8; }
[data-section="photos"] { --sec: #7c3aed; }
[data-section="candle"] { --sec: #7a4f7a; }
[data-section="nearby"] { --sec: #be185d; }

/* In the modern look too: each section's buttons, tabs and links in its colour; the menu's underline and
   the date and notice markers as well. The front page and "stay in the loop" keep the town's colour. */
body.modern :is(.page-card, .panel, .side-box)[data-section]:not([data-section="home"]):not([data-section="mail"]) { --accent: var(--sec); --accent-text: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.modern :is(.page-card, .panel, .side-box)[data-section]:not([data-section="home"]):not([data-section="mail"]) { --accent: color-mix(in srgb, var(--sec) 55%, #fff); --accent-text: #0f1113; } }
:root[data-theme="dark"] body.modern :is(.page-card, .panel, .side-box)[data-section]:not([data-section="home"]):not([data-section="mail"]) { --accent: color-mix(in srgb, var(--sec) 55%, #fff); --accent-text: #0f1113; }
body.modern nav.town-nav a[data-section][aria-current="page"], body.modern .nav-more.has-current summary { border-bottom-color: var(--sec); }
body.modern [data-section] li.event .badge, body.modern .panel[data-section] .notice-item { border-left-color: var(--sec); }
body.modern .page-card[data-section] :is(h2, h3) svg { color: var(--sec); }

/* The weather: a card at the foot of the front page's main column (where a new town has room). */
body.modern .col-main .weather-band { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  padding: 1.25rem 1.35rem 1rem; margin: 0 0 1.25rem; }
body.modern .weather-band h2 { font-size: 1.2rem; font-weight: 700; }
body.modern .weather-band h2 svg { color: var(--sec); }
/* The same gap above the first cards as between them. */
body.modern main { padding-top: 1.25rem; }

/* The signed-in row: the name, then its buttons on the same line, scrolling sideways when they don't fit. */
.member-bar .inner { flex-wrap: nowrap; justify-content: flex-start; }
.member-bar .who { flex: none; white-space: nowrap; }
.member-bar .actions { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); padding-right: 1.5rem; }
.member-bar .actions::-webkit-scrollbar { display: none; }
.member-bar .actions a { flex: none; white-space: nowrap; }
@media (min-width: 900px) { .member-bar .actions > :first-child { margin-left: auto; } .member-bar .actions { -webkit-mask-image: none; mask-image: none; padding-right: 0; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-section] { --sec: var(--p-accent-dark, #8cc79a); } }
:root[data-theme="dark"] [data-section] { --sec: var(--p-accent-dark, #8cc79a); }
/* No extra space at the foot of a card from its last line's own margin. */
body.modern :is(.panel, .side-box, .page-card, .weather-band) > :last-child { margin-bottom: 0; }

/* The header's account: a quiet circle with your initial when signed in, an outlined "Sign in" when not. */
header.town-bar .account.avatar { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--surface));
  font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; filter: none; }
header.town-bar .account.avatar:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
header.town-bar .account.sign-in { padding: 0.42rem 0.95rem; border-radius: 999px; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  font-weight: 600; font-size: 0.92rem; text-decoration: none; filter: none; }
header.town-bar .account.sign-in:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
/* The More page: each entry's icon in its section's colour, like the menu. */
.menu-list a[data-section] > svg:first-child { color: var(--sec); }

/* Rows that scroll sideways fade at whichever edge has more to see (the script marks which). */
.member-bar .actions { -webkit-mask-image: none; mask-image: none; padding-right: 0; }
.scroll-fade.fade-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent); }
.scroll-fade.fade-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.75rem); mask-image: linear-gradient(90deg, transparent, #000 1.75rem); }
.scroll-fade.fade-left.fade-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.75rem, #000 calc(100% - 1.75rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1.75rem, #000 calc(100% - 1.75rem), transparent); }
/* A dull top photo, lifted a little (see topPhotoFilter). */
.hero-photo { filter: var(--hero-filter, none); }

/* The offer: the law, part by part, and a real records page pictured. */
.sell-law .law-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.sell-law .law-list li { display: flex; gap: 0.7rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem; }
.sell-law .law-list svg { flex: none; color: var(--accent); margin-top: 0.15rem; }
a.mock-browser.real { display: block; color: inherit; text-decoration: none; }
a.mock-browser.real:hover { box-shadow: 0 10px 28px rgba(40, 30, 10, 0.14); }

/* ===== The landing and offer pages in the modern look ===== */
body.modern .feature-cards li[data-section] svg { color: var(--sec); }
body.modern .step-cards li svg, body.modern .audiences h2 svg { color: var(--accent); }
body.modern .town-card-blank { background: linear-gradient(160deg, #2f6b45, #1f4d31); }
body.modern .town-cards .town-card-photo { background: #e9ecef; }
body.modern .town-card-text strong { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; }
body.modern .sell-close, body.modern .office-band { background: linear-gradient(135deg, #2f6b45 0%, #23573a 55%, #1b4630 100%); }
body.modern .office-band .eyebrow, body.modern .office-band .ticks svg { color: #c9e8a8; }
body.modern .town-cards a, body.modern .feature-cards li, body.modern .step-cards li, body.modern .audiences .card { border-color: var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); background: var(--surface); }
body.modern h1, body.modern h2 { font-family: var(--sans); }

/* The phone pictured: the modern look, a bright top, the town's name in plain bold type. */
body.modern .phone-mock { background: #111315; box-shadow: 0 24px 60px rgba(16, 24, 40, 0.25); }
body.modern .pm-screen { background: #f5f6f7; color: #15171a; }
body.modern .pm-hero { align-items: flex-start; justify-content: flex-end; padding: 0 14px 12px; flex-direction: row; gap: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35)), linear-gradient(180deg, #7fb6e0 0%, #b9d8ee 45%, #c9b25b 62%, #8aa548 78%, #5c7f33 100%); }
body.modern .pm-hero span { align-self: flex-end; }
body.modern .pm-hero span svg { height: 30px; }
body.modern .pm-hero b { font-family: var(--sans); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.03em; text-transform: none; align-self: flex-end; line-height: 1; }
body.modern .pm-card { background: #fff; border-color: #e4e7ea; border-left-color: #c0362c; border-radius: 0 8px 8px 0; }
body.modern .pm-card i { color: #c0362c; }
body.modern .pm-card span, body.modern .pm-row em small, body.modern .pm-row span { color: #5a6068; }
body.modern .pm-row { border-bottom-color: #e4e7ea; }
body.modern .pm-row em { border-left-color: #2563a6; }
body.modern .pm-row b { color: #15171a; }
body.modern .pm-tabs { background: #fff; border-top-color: #e4e7ea; }
body.modern .pm-tabs span { background: #e4e7ea; }
body.modern .pm-tabs span:nth-child(2) { background: #2563a6; }

/* An RM's land map: the land location search over the map, and a quarter's popup. */
.land-search { position: absolute; z-index: 3; top: 12px; left: 16px; right: 64px; max-width: 26rem; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
.land-search input { flex: 1 1 10rem; min-width: 0; margin: 0; border: 0; background: transparent; font-size: 1rem; padding: 0.45rem 0.55rem; }
.land-search input:focus { outline: none; }
.land-search button { margin: 0; padding: 0.45rem 0.9rem; }
.land-said { flex-basis: 100%; margin: 0; padding: 0.15rem 0.55rem 0.3rem; color: var(--muted); font-size: 0.9rem; }
.land-note { flex-basis: 100%; margin: 0; padding: 0 0.55rem 0.25rem; color: var(--muted); font-size: 0.78rem; line-height: 1.35; }

/* The land card: like Prairie Atlas's. The land location big (tap to copy), its RM, its size, the spot. */
.town-map .land-popup .maplibregl-popup-content { border-radius: 16px; padding: 0.7rem 2.5rem 0.65rem 0.85rem; box-shadow: 0 8px 30px rgba(16, 24, 40, 0.18); }
.land-popup .maplibregl-popup-close-button { top: 0.55rem; right: 0.55rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--line); color: var(--muted); font-size: 1.05rem; line-height: 1; }
.land-popup .maplibregl-popup-close-button:hover { background: color-mix(in srgb, var(--line) 70%, var(--muted)); color: var(--text); }
.land-card p { margin: 0; }
.land-title { display: block; margin: 0 0 0.2rem; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; text-align: left; cursor: copy; }
.land-copied { display: block; font-size: 0.75rem; font-weight: 600; color: var(--accent, #2e5e3a); letter-spacing: 0; min-height: 0; }
.land-copied:empty { display: none; }
.land-rm { font-size: 0.88rem; color: var(--muted); }
.land-rm a { color: inherit; }
.land-size { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem !important; font-size: 0.88rem; color: var(--text); }
.land-units { margin: 0; padding: 0 0.2rem; border: 0; background: none; color: var(--muted); font-size: 0.88rem; cursor: pointer; }
.land-note-small { margin-top: 0.25rem !important; font-size: 0.78rem; color: var(--muted); }
.land-coord { margin-top: 0.3rem !important; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
/* On a phone: the land card along the bottom of the map, above the tab bar. */
.land-sheet { position: absolute; z-index: 4; left: 10px; right: 10px; bottom: calc(10px + 2.2rem); padding: 0.7rem 2.5rem 0.65rem 0.85rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(16, 24, 40, 0.22); }
.land-sheet[hidden] { display: none; }
.land-sheet-close { position: absolute; top: 0.55rem; right: 0.55rem; width: 1.6rem; height: 1.6rem; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--line); color: var(--muted); font-size: 1.1rem; line-height: 1; }
@media (max-width: 759px) { .land-sheet { bottom: calc(4.9rem + env(safe-area-inset-bottom)); } }
/* The land card's close button: an × drawn with two lines, so it sits in the middle of its circle in any font. */
.land-popup .maplibregl-popup-close-button, .land-sheet-close { display: block; padding: 0; font-size: 0 !important; color: transparent; }
.land-popup .maplibregl-popup-close-button > *, .land-sheet-close > * { display: none; }
.land-popup .maplibregl-popup-close-button::before, .land-popup .maplibregl-popup-close-button::after,
.land-sheet-close::before, .land-sheet-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.7rem; height: 2px; border-radius: 1px; background: var(--muted); }
.land-popup .maplibregl-popup-close-button::before, .land-sheet-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.land-popup .maplibregl-popup-close-button::after, .land-sheet-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.land-popup .maplibregl-popup-close-button:hover::before, .land-popup .maplibregl-popup-close-button:hover::after, .land-sheet-close:hover::before, .land-sheet-close:hover::after { background: var(--text); }
.land-sub { font-size: 0.88rem; color: var(--text); margin-bottom: 0.05rem !important; }

/* Admin: emailing offices, the checklist and the email as it will go. */
table.outreach th, table.outreach td { vertical-align: top; text-align: left; }
table.outreach thead th { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
table.outreach tbody th { font-weight: 600; }
pre.email-preview { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.95rem; margin: 0; }
table.outreach thead a.sort { color: inherit; text-decoration: none; }
table.outreach thead a.sort:hover { color: var(--text); text-decoration: underline; }
/* The office pitch on a records page: its button and link side by side, with room between. */
.office-pitch .pitch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
/* The office's records address: big, so nobody has to hunt for it. */
.records-address .records-email { font-size: 1.45rem; font-weight: 700; line-height: 1.25; margin: 0.15rem 0 0.6rem; }
.records-address .records-email a { text-decoration: none; }
/* On a wider screen the search sits top left, just under the town's or RM's name in the header, on the
   same left edge (the header's centred column plus its 16px padding). */
@media (min-width: 600px) {
  .land-search { left: max(16px, calc((100% - var(--header)) / 2 + 16px)); right: auto; width: min(26rem, calc(100% - 80px)); }
}
/* Admin: where Claude's money goes. */
table.usage th, table.usage td { vertical-align: top; text-align: left; }
table.usage td.num { text-align: right; white-space: nowrap; }
table.usage thead th { font-size: 0.85rem; color: var(--muted); }
/* Admin: visitors. Headline numbers as tiles; visits each day as columns in the accent colour. */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin: 0.25rem 0 1rem; }
.stat-tile { padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.stat-label { display: block; font-size: 0.85rem; color: var(--muted); }
.stat-value { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: var(--text); }
.visits-chart { display: block; width: 100%; height: auto; overflow: visible; }
.visits-chart .grid { stroke: var(--line); stroke-width: 1; }
.visits-chart .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.visits-chart path { fill: var(--accent); }
.visits-chart .hit { fill: transparent; }
.visits-chart .col:hover path, .visits-chart .col:focus path { opacity: 0.8; }
.visits-chart .col:focus { outline: none; }
.visits-chart .col:focus .hit { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
table.usage th.num { text-align: right; }

.community-identity { padding: .7rem max(1rem, calc((100vw - 1280px) / 2)); background: var(--surface); color: var(--text); border-bottom: 1px solid var(--line); font-size: .875rem; line-height: 1.5; }
.community-identity strong { font-weight: 650; }
body.town-home .community-identity + .hero.with-photo { margin-top: 0; }
.community-identity + .town-strip { margin-top: 0; }

/* The blog (prairie.town/blog). */
.blog-list { list-style: none; padding: 0; margin: 1rem 0 2rem; }
.blog-list li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.blog-list a { font-size: 1.15rem; }
.blog-list .muted { display: block; }
.blog-list p { margin: 0.35rem 0 0; }
.blog-post { max-width: 42rem; margin-bottom: 2.5rem; }
.blog-post h2 { margin-top: 2rem; }
.blog-post figure { margin: 1.5rem 0; }
.blog-post img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; display: block; }
.blog-post figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }
.blog-post blockquote { margin: 1.25rem 0; padding: 0.2rem 1rem; border-left: 3px solid var(--accent); color: var(--muted); }
/* A phone screenshot shows at phone size. */
.blog-post img[src*="-phone"] { max-width: 300px; }