/* ============================================================
   Algarve Offseason

   Palette from the coast in winter, kept soft on purpose:
     paper  #F4F8F7  sea mist, the page
     ink    #24383F  deep sea slate, never pure black
     sea    #2B8A87  sea glass, the spine of the site
     sun    #EE9F4F  low winter sun: PAID LISTINGS ONLY in the directory
     fig    #4F9A5C  open / verified
     clay   #D2665A  shut / disputed
     coral  #D9607C  dating

   Type: Bricolage Grotesque (self-hosted, one file) for headings,
   the system sans for everything else. Nothing loads from another
   company's server.
   ============================================================ */

@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --ink:       #24383F;
  --sea:       #2B8A87;
  --sea-deep:  #1F6B69;
  --sea-light: #A8DCD6;
  --sea-wash:  #E3F2EF;
  --paper:     #F4F8F7;
  --card:      #FFFFFF;
  --line:      #DDE8E6;
  --line-warm: #CBDCD9;
  --muted:     #5F767C;
  --sun:       #EE9F4F;
  --sand:      #FBF0E1;
  --fig:       #4F9A5C;
  --clay:      #D2665A;
  --coral:     #D9607C;
  --gold:      #B9862C;

  --display: "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gap: 1rem;
  --radius: 14px;
  --shell: 78rem;
  --shadow: 0 1px 2px rgba(36, 56, 63, .06), 0 6px 18px rgba(36, 56, 63, .06);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.55 var(--sans);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--sea-deep); }

a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 2px;
}

/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead {
  background: linear-gradient(160deg, var(--sea) 0%, var(--sea-light) 100%);
  color: #fff;
  border-bottom: 3px solid var(--sun);
}

.mast-inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gap);
}

.mast-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 1.1rem;
}

.brand { color: #fff; text-decoration: none; display: block; }

.wordmark {
  display: block;
  font: 700 2rem/1 var(--display);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

.expansion {
  display: block;
  margin-top: 0.3rem;
  font: 0.72rem/1.3 var(--mono);
  color: rgba(255, 255, 255, 0.78);
}

/* --- account / actions --- */

.account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font: 0.85rem var(--sans);
}

.account a, .account .link {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
  background: none;
  color: #fff;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.account a:hover, .account .link:hover { background: rgba(255, 255, 255, 0.15); }

.account a.cta {
  background: #fff;
  border-color: #fff;
  color: var(--sea-deep);
  font-weight: 600;
}
.account a.cta:hover { background: rgba(255, 255, 255, 0.88); }

.account .who {
  padding: 0.35rem 0;
  border: 0;
  font: 0.8rem var(--mono);
  color: rgba(255, 255, 255, 0.85);
}
.account .who strong { color: #fff; }

.account form { display: inline; margin: 0; }

/* --- season strip --- */

.season { display: flex; gap: 2px; margin: 1.1rem 0 0; }

.month {
  flex: 1;
  padding: 0.35rem 0;
  text-align: center;
  font: 600 0.68rem/1 var(--mono);
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.month.off { color: #fff; background: rgba(255, 255, 255, 0.28); }

.month.now {
  background: var(--sun);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.tagline {
  margin: 0.7rem 0 0;
  padding-bottom: 1.1rem;
  text-align: center;
  font: italic 1.05rem/1.4 var(--display);
  color: rgba(255, 255, 255, 0.95);
}

/* ============================================================
   SHELL: sidebar + main
   ============================================================ */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gap) 4rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
}

.sidebar { position: sticky; top: 1rem; padding-top: 1.5rem; }

.side-title {
  margin: 0 0 0.6rem;
  font: 0.72rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.catnav { list-style: none; margin: 0; padding: 0; }
.catnav > li { border-bottom: 1px solid var(--line); }

.catnav summary,
.catnav > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.2rem;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.catnav summary::-webkit-details-marker { display: none; }

.catnav .cat-text { flex: 1; text-align: left; }

.catnav summary::after {
  content: "▸";
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform .15s;
  flex-shrink: 0;
}
.catnav details[open] > summary::after { content: "▾"; }

.catnav summary:hover, .catnav a:hover { color: var(--sea-deep); }

.catnav .n,
.catnav .cat-count {
  font: 0.72rem var(--mono);
  color: var(--fig);
  white-space: nowrap;
  flex-shrink: 0;
}
.catnav .n.zero,
.catnav .cat-count.zero { color: var(--muted); opacity: 0.6; }

.subnav { list-style: none; margin: 0 0 0.5rem; padding: 0 0 0 1.1rem; }

.subnav a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.2rem;
  font-size: 0.86rem;
  color: var(--muted);
  text-decoration: none;
}
.subnav a:hover { color: var(--sea-deep); }
.subnav a.on, .catnav a.on { color: var(--sea-deep); font-weight: 600; }

.side-block {
  margin-top: 1.5rem;
  padding: 0.9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.side-block p { margin: 0 0 0.5rem; color: var(--muted); }
.side-block a.btn {
  display: block;
  padding: 0.45rem;
  text-align: center;
  background: var(--sea);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

main { padding-top: 1.5rem; min-width: 0; }

/* ============================================================
   SHARED BLOCKS
   ============================================================ */

.crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.5rem; }

.lede { padding: 0 0 0.5rem; }

.lede h1 {
  margin: 0;
  font: 400 2.1rem/1.15 var(--display);
  letter-spacing: -0.01em;
}

.count { margin: 0.35rem 0 0; font: 0.88rem/1.4 var(--mono); color: var(--muted); }
.count strong { color: var(--fig); font-size: 1.1rem; }

/* --- category grid on the home pane --- */

.cats {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.cats a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
.cats a:hover { border-color: var(--sea); }
.cat-name { font-weight: 600; }
.cat-count { font: 0.78rem var(--mono); color: var(--fig); white-space: nowrap; }
.cat-count.zero { color: var(--muted); }
.cat-subs { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--muted); }

/* --- filters --- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin: 1.25rem 0;
  padding: 0.85rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.filters label { display: flex; align-items: center; gap: 0.5rem; }
.filters span { color: var(--muted); }
.filters select {
  font: inherit; padding: 0.3rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}

/* --- listing cards --- */

.shuffle-note { margin: 1.25rem 0 0.75rem; font: italic 0.9rem/1.4 var(--display); color: var(--muted); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-warm);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}

/* Sun-gold appears nowhere else on the site, so a reader can always
   tell at a glance what was paid for. */
.card.promoted { border-left-color: var(--sun); }
.card.unv { border-left-style: dashed; border-left-color: var(--muted); }

.tag {
  margin: 0 0 0.4rem;
  font: 600 0.65rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sun);
}

.card h3 { margin: 0; font: 600 1.15rem/1.35 var(--sans); }
.card h3 a { text-decoration: none; color: var(--ink); }
.card h3 a:hover { color: var(--sea-deep); text-decoration: underline; }

.blurb { margin: 0.4rem 0 0; }
.langs { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--muted); }
.meta  { margin: 0.5rem 0 0; font: 0.8rem/1 var(--mono); color: var(--muted); }
.rating { color: var(--ink); font-weight: 600; }
.rating + .votes::before { content: " · "; }

.actions { margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.actions a {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  font-size: 0.85rem;
  text-decoration: none;
}
.actions a:hover { border-color: var(--sea); }
.actions a.primary { background: var(--sea); border-color: var(--sea); color: #fff; }
.actions a.edit { border-style: dashed; color: var(--muted); }

.split { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0 0; }

/* --- verification --- */

.vbadge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius);
  background: #E9F1E2;
  color: var(--fig);
  font: 600 0.65rem/1.6 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: middle;
}

.unverified { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed var(--line-warm); }

.unv-label {
  margin: 0;
  font: 600 0.7rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.unv-hint { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--muted); }
.unv-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.unv-actions form { margin: 0; }

.vote {
  padding: 0.35rem 0.8rem;
  font: 600 0.85rem var(--sans);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.vote.up:hover,   .vote.up.on   { background: var(--fig);  border-color: var(--fig);  color: #fff; }
.vote.down:hover, .vote.down.on { background: var(--clay); border-color: var(--clay); color: #fff; }

/* --- detail page --- */

.detail h1 { margin: 0.5rem 0 0; font: 400 2.1rem/1.15 var(--display); }

.status {
  display: inline-block;
  margin: 0.6rem 0 0;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  font: 600 0.75rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status.open { background: #E9F1E2; color: var(--fig); }
.status.shut { background: #F7E7E3; color: var(--clay); }

.facts { display: grid; grid-template-columns: 7rem 1fr; gap: 0.4rem 1rem; margin: 1.25rem 0; }
.facts dt { font: 0.8rem/1.6 var(--mono); color: var(--muted); }
.facts dd { margin: 0; }

.claim {
  margin-top: 2rem; padding: 1rem;
  background: var(--card);
  border: 1px dashed var(--line-warm);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

/* --- empty + alerts --- */

.empty {
  margin: 1.5rem 0;
  padding: 2rem 1.25rem;
  background: var(--card);
  border: 1px dashed var(--line-warm);
  border-radius: var(--radius);
}
.empty h1, .empty h2 { margin: 0 0 0.5rem; font: 400 1.5rem/1.2 var(--display); }
.empty p { margin: 0 0 0.5rem; color: var(--muted); }

.alert { margin: 1rem 0 0; padding: 0.7rem 0.9rem; border-radius: var(--radius); font-size: 0.9rem; }
.alert.bad  { background: #F7E7E3; color: var(--clay); }
.alert.good { background: #E9F1E2; color: var(--fig); }

/* ============================================================
   FORMS
   ============================================================ */

.panel {
  max-width: 34rem;
  margin: 1.25rem 0;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel.narrow { max-width: 24rem; }

.stack { display: grid; gap: 0.6rem; }
.stack label { font-size: 0.85rem; color: var(--muted); }

.stack input, .stack textarea, .stack select {
  font: 1rem var(--sans);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
.stack textarea { resize: vertical; }

.stack input.code { font: 1.6rem/1 var(--mono); letter-spacing: 0.4em; text-align: center; }

.stack button, .google, .btn-primary {
  display: block;
  width: 100%;
  padding: 0.65rem 1rem;
  font: 600 0.95rem var(--sans);
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--sea);
  border-radius: var(--radius);
  background: var(--sea);
  color: #fff;
  cursor: pointer;
}
.google { background: var(--card); color: var(--ink); border-color: var(--line-warm); }
.google:hover { border-color: var(--sea); }

.req { font: 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.fielderr { margin: -0.3rem 0 0; font-size: 0.82rem; color: var(--clay); }
.hint { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--muted); }

.langs-field {
  margin: 0.4rem 0; padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-warm); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
}
.langs-field legend { font-size: 0.85rem; color: var(--muted); padding: 0 0.3rem; }

label.check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--ink); }
label.check.standalone { margin: 0.3rem 0; }

.or { display: flex; align-items: center; gap: 0.75rem; margin: 1.1rem 0; color: var(--muted); font-size: 0.8rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.inline { margin-top: 1rem; }
.inline .link {
  background: none; border: 0; padding: 0;
  font: 0.85rem var(--sans); color: var(--sea-deep);
  text-decoration: underline; cursor: pointer;
}

/* ============================================================
   ADD CHOOSER
   ============================================================ */

.choices { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: 0.6rem; max-width: 34rem; }

.choices a, .choices .soon {
  display: block;
  padding: 1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sea);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
.choices a:hover { border-color: var(--sea); }
.choices .soon { border-left-color: var(--line-warm); opacity: 0.7; }
.choices strong { display: block; font-size: 1.05rem; }
.choices span { font-size: 0.88rem; color: var(--muted); }

/* ============================================================
   QUEUE
   ============================================================ */

.qlist { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.6rem; }

.qcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sea);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.qcard.buried { border-left-color: var(--clay); }

.qhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.qhead h3 { margin: 0; font: 600 1.1rem/1.3 var(--sans); }
.qhead h3 a { color: var(--ink); text-decoration: none; }
.qhead h3 a:hover { color: var(--sea-deep); }

.qscore { font: 700 1rem/1 var(--mono); color: var(--muted); }
.qscore.pos { color: var(--fig); }
.qscore.neg { color: var(--clay); }

.qmeta  { margin: 0.35rem 0 0; font: 0.78rem/1.4 var(--mono); color: var(--muted); }
.qflags { color: var(--clay); }
.qneed  { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }
.qown   { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); font-style: italic; }

.qactions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.qactions form { margin: 0; }
.qweight { font: 0.75rem var(--mono); color: var(--muted); }

.qreport { margin-top: 0.75rem; }
.qreport summary { font-size: 0.82rem; color: var(--muted); cursor: pointer; }

.reportform { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.reportform select, .reportform input, .reportform button {
  font: 0.85rem var(--sans); padding: 0.35rem 0.5rem;
  border: 1px solid var(--line-warm); border-radius: var(--radius); background: #fff;
}
.reportform input { flex: 1; min-width: 10rem; }
.reportform button { background: var(--sea); border-color: var(--sea); color: #fff; cursor: pointer; }

.qsection { margin: 2rem 0 0; font: 400 1.4rem var(--display); }

/* ============================================================
   FOOTER
   ============================================================ */

footer {
  border-top: 1px solid var(--line);
  background: #fff;
}
.foot-inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 1.5rem var(--gap) 3rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.foot-inner p { margin: 0 0 0.25rem; }
.foot-inner .small { font-size: 0.8rem; }

/* ============================================================
   NARROW SCREENS
   ============================================================ */

@media (max-width: 56rem) {
  .shell { grid-template-columns: 1fr; gap: 1rem; }
  .sidebar { position: static; padding-top: 1.25rem; }

  /* The category tree collapses into a single disclosure so it does
     not push the actual content off the first screen. */
  .sidebar > .side-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
  .sidebar > .side-wrap > summary {
    padding: 0.7rem 0.9rem; font-weight: 600; cursor: pointer; list-style: none;
  }
  .sidebar > .side-wrap > summary::-webkit-details-marker { display: none; }
  .sidebar > .side-wrap > summary::after { content: " ▾"; color: var(--muted); }
  .sidebar > .side-wrap[open] > summary::after { content: " ▴"; }
  .sidebar .side-inner { padding: 0 0.9rem 0.9rem; }
  main { padding-top: 0.5rem; }
}

@media (max-width: 34rem) {
  .wordmark { font-size: 1.65rem; letter-spacing: 0.12em; }
  .expansion { font-size: 0.66rem; }
  .tagline { font-size: 0.95rem; }
  .lede h1, .detail h1 { font-size: 1.7rem; }
  .month { font-size: 0.58rem; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: 0.6rem; }
  .account { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   BLOG
   ============================================================ */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1.5rem 0 1rem;
}
.section-header h2 { margin: 0; font-size: 1.3rem; }
.section-header .all-link { font-size: 0.9rem; color: var(--sea); text-decoration: none; }
.section-header .all-link:hover { text-decoration: underline; }

/* Homepage: featured blog posts preview */
.home-posts { margin: 2rem 0; }

.posts-preview {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.post-preview {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.post-preview-image {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.post-preview-image img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.post-preview-image:hover img { transform: scale(1.03); transition: transform 0.2s; }

.post-preview-content {
  padding: 1.2rem;
}
.post-preview-content h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.post-preview-content h3 a { color: var(--ink); text-decoration: none; }
.post-preview-content h3 a:hover { text-decoration: underline; }
.post-preview-content p { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--muted); line-height: 1.4; }

.post-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
  align-items: center;
}
.post-category {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: var(--sea);
  color: #fff;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Blog archive listing */
.posts-list {
  display: grid;
  gap: 2rem;
  margin: 1.5rem 0;
}

.post-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 680px) {
  .post-card {
    grid-template-columns: 200px 1fr;
  }
}

.post-card-image {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  height: 200px;
}
@media (min-width: 680px) {
  .post-card-image {
    height: 150px;
  }
}
.post-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-card-image:hover img { transform: scale(1.03); transition: transform 0.2s; }

.post-card-content {
  display: flex;
  flex-direction: column;
}
.post-card-content h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.post-card-content h2 a { color: var(--ink); text-decoration: none; }
.post-card-content h2 a:hover { text-decoration: underline; }
.post-card-content .post-excerpt { margin: 0.5rem 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink); }
.post-card-content .more {
  display: inline-block;
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--sea);
  text-decoration: none;
}
.post-card-content .more:hover { text-decoration: underline; }

/* Single post view */
.post {
  max-width: 720px;
}

.post-image {
  margin: 0 -0.5rem 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.post-image img {
  display: block;
  width: 100%;
  height: auto;
}

.post-header {
  margin: 1rem 0 1.5rem;
}
.post-header h1 {
  margin: 0 0 0.75rem;
  font-size: 2rem;
}
.post-header .post-meta {
  margin: 0;
}

.post-content {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}
.post-content p { margin: 1rem 0; }
.post-content h2, .post-content h3 { margin: 1.5rem 0 0.75rem; }
.post-content h2 { font-size: 1.4rem; }
.post-content h3 { font-size: 1.1rem; }
.post-content ul, .post-content ol { margin: 1rem 0; padding-left: 1.75rem; }
.post-content li { margin: 0.4rem 0; }
.post-content blockquote {
  margin: 1.5rem 0;
  padding: 0 1rem;
  border-left: 3px solid var(--sea);
  color: var(--muted);
  font-style: italic;
}
.post-content a { color: var(--sea); }
.post-content a:hover { text-decoration: underline; }

/* Directory section on homepage */
.home-directory { margin: 2rem 0; }

/* ============================================================
   ADMIN
   ============================================================ */

.admin-list table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.admin-list thead {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.admin-list th {
  padding: 0.75rem;
  text-align: left;
  font: 600 0.9rem var(--sans);
  color: var(--muted);
}
.admin-list td {
  padding: 1rem 0.75rem;
  border-bottom: 1px solid var(--line-warm);
}
.admin-list tbody tr:hover {
  background: var(--card);
}

.status-draft { color: var(--muted); }
.status-published { color: var(--fig); font-weight: 600; }

.btn-small {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.btn-small:hover { border-color: var(--sea); }
.btn-small.btn-danger { color: var(--clay); border-color: var(--clay); }
.btn-small.btn-danger:hover { background: #FFF5F2; }

.btn {
  display: inline-block;
  padding: 0.65rem 1rem;
  font: 600 0.95rem var(--sans);
  border: 1px solid var(--sea);
  border-radius: var(--radius);
  background: var(--sea);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { opacity: 0.9; }

.post-form .panel { max-width: none; }

/* ============================================================
   RIGHT SIDEBAR
   ============================================================ */

.shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1200px) {
  .shell {
    grid-template-columns: auto 1fr 280px;
  }
}

.sidebar-right {
  display: none;
}
@media (min-width: 1200px) {
  .sidebar-right {
    display: block;
  }
}

.sidebar-right .side-wrap {
  border: none;
}

.spotlight {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.spotlight-label {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spotlight-content {
  font-size: 0.9rem;
}
.spotlight-content strong {
  display: block;
  margin-bottom: 0.3rem;
}

.spotlight .stat {
  margin: 0.25rem 0;
  font-size: 0.85rem;
  color: var(--ink);
}
.spotlight .stat.small {
  color: var(--muted);
}

.spotlight .desc {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Resource list */
.resource-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.resource-list li a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  background: var(--sea);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: opacity 0.2s;
}
.resource-list li a:hover {
  opacity: 0.9;
}

.resource-list .icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.resource-list .title {
  flex: 1;
}

/* Ad placeholder */
.ad-placeholder {
  background: var(--card);
  border: 2px dashed var(--line-warm);
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--radius);
}

.ad-placeholder .small {
  margin: 0;
  font-size: 0.8rem;
}

/* ============================================================
   EVENTS
   ============================================================ */

.events-list {
  display: grid;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.event-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 680px) {
  .event-card {
    grid-template-columns: 240px 1fr;
  }
}

.event-card-image {
  display: block;
  overflow: hidden;
  height: 240px;
}
@media (min-width: 680px) {
  .event-card-image {
    height: 200px;
  }
}
.event-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-card-image:hover img { transform: scale(1.03); transition: transform 0.2s; }

.event-card-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}
.event-card-content h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.event-card-content h2 a { color: var(--ink); text-decoration: none; }
.event-card-content h2 a:hover { text-decoration: underline; }

.event-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
  align-items: center;
  margin-bottom: 0.5rem;
}

.event-category {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: var(--sun);
  color: #fff;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.event-location {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.event-excerpt {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.4;
  flex: 1;
}

.event-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-warm);
  font-size: 0.9rem;
}

.rsvp-count {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Event detail page */
.event-detail {
  max-width: 900px;
}

.event-image {
  margin: 0 -0.5rem 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.event-image img {
  display: block;
  width: 100%;
  height: auto;
}

.event-header {
  margin: 1rem 0 1.5rem;
}
.event-header h1 {
  margin: 0 0 0.75rem;
  font-size: 2rem;
}

.event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 900px) {
  .event-grid {
    grid-template-columns: 1fr 280px;
  }
}

.event-main {}

.event-section {
  margin-bottom: 2rem;
}
.event-section h2 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
}

.event-description {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

.attendee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

.attendee {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.75rem;
  border-radius: var(--radius);
  background: var(--card);
}

.avatar {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.5rem;
}
.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--line-warm);
  font-size: 1.5rem;
}

.attendee span {
  font-size: 0.85rem;
  color: var(--ink);
  word-break: break-word;
}

/* Event sidebar */
.event-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.event-card-box, .event-info-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.event-card-box h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
}

.rsvp-form {
  display: grid;
  gap: 0.6rem;
}

.rsvp-form button {
  padding: 0.7rem;
  font-size: 0.95rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: block;
  width: 100%;
}

.btn-primary {
  background: var(--sea);
  color: #fff;
}
.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-secondary:hover { border-color: var(--sea); }

.status {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-align: center;
  border-radius: 3px;
}
.status-interested { background: #E8F0FF; color: var(--sea); }
.status-attending { background: #E9F1E2; color: var(--fig); }
.status-attended { background: #E9F1E2; color: var(--fig); }

.prompt {
  text-align: center;
  margin: 1rem 0;
  color: var(--muted);
}
.prompt a { color: var(--sea); }

.event-info-box h4 {
  margin: 1rem 0 0.25rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.event-info-box p {
  margin: 0;
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------
   Housing
   Seeking and offering are the same object seen from two sides, so
   they share a card and differ only by the accent on the tag.
   --------------------------------------------------------------- */

/* --- submission form extras --- */
.sidechoice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.sidechoice legend { font-size: 0.85rem; color: var(--muted); padding: 0 0.35rem; }
.pick { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.pick input { margin-top: 0.25rem; }
.pick span { display: block; }
.pick strong { display: block; color: var(--ink); font-size: 0.95rem; }
.pick small { display: block; color: var(--muted); font-size: 0.8rem; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pair > div { display: grid; gap: 0.3rem; align-content: start; }
@media (max-width: 34rem) { .pair { grid-template-columns: 1fr; } }

.checks {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.checks legend { font-size: 0.85rem; color: var(--muted); padding: 0 0.35rem; }
.checks label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.9rem; color: var(--ink); cursor: pointer;
}

/* --- filter bar --- */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  padding: 0.85rem;
  margin: 0 0 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.filtergroup { display: grid; gap: 0.25rem; }
.filtergroup label { font-size: 0.8rem; color: var(--muted); }
.filtergroup input, .filtergroup select {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9rem;
  background: var(--paper);
  color: var(--ink);
  min-width: 8.5rem;
}
.filtergroup.checkfilters { display: flex; gap: 0.9rem; align-items: center; }
.filtergroup.checkfilters label {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.9rem; color: var(--ink);
}
.clearlink { margin-left: 0.6rem; font-size: 0.85rem; color: var(--muted); }

/* --- cards --- */
.housing-list { display: grid; gap: 1rem; }
@media (min-width: 46rem) {
  .housing-list { grid-template-columns: repeat(2, 1fr); }
}

.housing-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sea);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.housing-card.is-offering { border-left-color: var(--fig); }

.housing-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sea-deep);
  margin-bottom: 0.3rem;
}
.is-offering .housing-tag { color: var(--fig); }

.housing-card h2 { margin: 0; font: 400 1.1rem/1.25 var(--display); }
.housing-card h2 a { color: var(--ink); text-decoration: none; }
.housing-card h2 a:hover { color: var(--sea-deep); }

.housing-money { margin: 0; font-weight: 600; color: var(--ink); font-size: 0.95rem; }

.housing-facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem;
  font-size: 0.85rem; color: var(--muted);
}
.housing-excerpt { margin: 0; font-size: 0.9rem; color: var(--ink); }

.housing-card footer {
  margin-top: auto;
  padding-top: 0.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: center; justify-content: space-between;
}
.housing-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.badge {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line-warm);
  color: var(--muted);
}

/* --- detail --- */
.housing-detail { display: block; }
.housing-header { margin-bottom: 1.25rem; }
.housing-header h1 { margin: 0.15rem 0 0.4rem; font: 400 1.7rem/1.2 var(--display); }

.housing-grid { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) {
  .housing-grid { grid-template-columns: minmax(0, 1fr) 17rem; }
}
.housing-section { margin-bottom: 1.5rem; }
.housing-section h2 { margin: 0 0 0.5rem; font: 400 1.2rem/1.2 var(--display); }

.housing-info-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}
.housing-info-box h3 { margin: 0 0 0.75rem; font: 400 1.05rem/1.2 var(--display); }
.housing-info-box h4 {
  margin: 0.85rem 0 0.15rem;
  font-size: 0.72rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.housing-info-box h4:first-of-type { margin-top: 0; }
.housing-info-box p { margin: 0; font-size: 0.9rem; }

/* --- who has raised a hand (poster only) --- */
.interest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.interest-list li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
}
.interest-list .when { float: right; font-size: 0.8rem; color: var(--muted); }
.interest-list p { margin: 0.4rem 0 0; font-size: 0.9rem; }
.interest-list .contact {
  margin-top: 0.5rem; padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.notice {
  padding: 0.6rem 0.75rem;
  background: var(--paper);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}

/* Reporting moved out of the queue and onto the cards themselves, so
   it needs a quiet separation from the actions above it. */
.card .qreport,
.event-card .qreport,
.housing-detail .qreport {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------
   Home: three doors of equal weight.
   Businesses, Events and Housing are the three things the site does,
   so none of them gets to be a footnote of the others.
   --------------------------------------------------------------- */
.home-sections {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 2rem;
}
@media (min-width: 40rem) {
  .home-sections { grid-template-columns: repeat(3, 1fr); }
}

.hs-card {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--sea);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
.hs-card:hover { border-color: var(--line-warm); border-top-color: var(--sea-deep); }
.hs-events  { border-top-color: var(--sun); }
.hs-housing { border-top-color: var(--fig); }
.hs-events:hover  { border-top-color: var(--sun); }
.hs-housing:hover { border-top-color: var(--fig); }

.hs-name {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hs-count { font: 400 2rem/1 var(--display); color: var(--ink); }
.hs-label { font-size: 0.85rem; color: var(--muted); }
.hs-note  { margin-top: 0.5rem; font-size: 0.85rem; color: var(--ink); }

/* ---------------------------------------------------------------
   Rail sections. Events and Housing sit under the directory in the
   left rail so the main column can stay editorial.
   --------------------------------------------------------------- */
.railnav { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.railnav li { margin: 0; }
.railnav a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: none;
}
.railnav a:hover { color: var(--sea-deep); }
.railnav .n {
  font: 0.75rem var(--mono);
  color: var(--sea-deep);
}
.railnav .n.zero { color: var(--muted); opacity: 0.6; }

/* The home column is editorial now, so give the posts room. */
.posts-preview > .post-preview + .post-preview {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.more-link { margin-top: 2rem; font-size: 0.9rem; }

/* Poster's own controls on a housing listing. */
.housing-manage .manage-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem;
}
.housing-manage .manage-actions button {
  font: 0.85rem var(--sans);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.housing-manage .manage-actions button.primary {
  background: var(--sea); border-color: var(--sea); color: #fff;
}

/* Housing map. Circles, never pins - the stored position is already
   snapped to a grid, and the circle is drawn larger than the cell so
   nothing can be read off its centre. */
.pinmap, .housing-map {
  height: 16rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0.25rem 0 0.5rem;
  z-index: 0;
}
.housing-map { height: 22rem; margin-bottom: 1.25rem; }
.leaflet-container { font: inherit; background: var(--paper); }
.map-note { font-size: 0.82rem; color: var(--muted); margin: 0 0 1.25rem; }
.opt { font-size: 0.75rem; color: var(--muted); font-weight: 400; }
.map-pop strong { display: block; margin-bottom: 0.2rem; }
.map-pop .money { color: var(--ink); }
.map-pop a { display: inline-block; margin-top: 0.3rem; }

/* Breathing room between the rail's sections - the directory tree
   runs long, and without this Events reads as part of it. */
.side-title.rail-section {
  margin-top: 1.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.railnav .rail-hint {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0 0 0.25rem;
}

/* ============================================================
   ALGARVE OFFSEASON: SOFT THEME
   Later rules override the older POSSE look above.
   ============================================================ */

body { line-height: 1.6; }
h1, h2, h3, .lede h1, .detail h1, .empty h1, .empty h2, .qsection {
  font-family: var(--display);
  font-weight: 650;
  font-stretch: 92%;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lede h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.count { font-size: 0.95rem; }
.section-h { font: 650 1.45rem/1.2 var(--display); font-stretch: 92%; margin: 2rem 0 0.75rem; }
.small { font-size: 0.88rem; color: var(--muted); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* --- masthead: light and friendly instead of a solid teal slab --- */
.masthead {
  background: linear-gradient(180deg, #E4F3F0 0%, var(--paper) 100%);
  color: var(--ink);
  border-bottom: 0;
  padding-bottom: 0.7rem;
}
.mast-top { padding-top: 0.9rem; gap: 0.6rem 1.25rem; }
.brand { color: var(--ink); display: flex; align-items: center; gap: 0.6rem; }
.brand-mark { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow); }
.wordmark {
  display: inline;
  font: 700 1.45rem/1 var(--display);
  font-stretch: 85%;
  letter-spacing: -0.01em;
  text-indent: 0;
  color: var(--sea-deep);
}
.mainnav { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-right: auto; }
.mainnav a {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.95rem;
}
.mainnav a:hover { background: rgba(43, 138, 135, .1); }
.mainnav a.on { background: var(--sea); color: #fff; }

.account a, .account .link {
  border: 1px solid var(--line-warm);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .7);
}
.account a:hover, .account .link:hover { background: #fff; }
.account a.cta { background: var(--sea); border-color: var(--sea); color: #fff; }
.account a.cta:hover { background: var(--sea-deep); }
.account .who { font: 600 0.88rem var(--sans); color: var(--ink); border: 1px solid var(--line-warm); padding: 0.35rem 0.8rem; }
.account .who .pts { font-weight: 400; color: var(--muted); margin-left: 0.3rem; }

.season { margin: 0.8rem 0 0.6rem; gap: 4px; }
.month { color: var(--muted); background: rgba(255, 255, 255, .6); border-radius: 999px; font: 600 0.66rem/1 var(--sans); padding: 0.32rem 0; }
.month.off { color: var(--sea-deep); background: var(--sea-wash); }
.month.now { background: var(--sun); color: #fff; box-shadow: none; }

/* --- three columns on wide screens; the right column drops below the
       main one on tablets so "How the evening works" is never hidden --- */
.shell { gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 56.01rem) {
  .shell { grid-template-columns: 14rem minmax(0, 1fr); }
  .shell > .sidebar { grid-row: span 2; }
  .sidebar-right { display: block; grid-column: 2; }
}
@media (min-width: 75rem) {
  .shell { grid-template-columns: 14rem minmax(0, 1fr) 17rem; }
  .shell > .sidebar { grid-row: auto; }
  .sidebar-right { grid-column: 3; position: sticky; top: 1rem; padding-top: 1.5rem; }
}
@media (max-width: 56rem) {
  .sidebar-right { display: block; }
}

.sidebar .side-title { font: 650 0.8rem/1 var(--sans); text-transform: none; letter-spacing: 0; color: var(--sea-deep); }
.catnav > li { border-bottom: 1px dashed var(--line); }
.side-block, .spotlight, .panel, .empty, .filters, .card, .qcard, .cats a, .choices a, .event-card, .event-info-box {
  border-radius: var(--radius);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.empty { border-style: solid; }
.side-block a.btn, .resource-list li a { border-radius: 999px; }
.spotlight-label { text-transform: none; letter-spacing: 0; font: 650 1rem var(--display); color: var(--ink); }

.soon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.soon-list a { display: block; text-decoration: none; color: var(--ink); line-height: 1.35; }
.soon-list a:hover { color: var(--sea-deep); }
.soon-when { display: block; font-size: 0.78rem; color: var(--sea-deep); font-weight: 600; }

.side-photo { display: block; position: relative; margin-bottom: 1rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; }
.side-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.side-photo span { position: absolute; inset: auto 0 0 0; padding: 2rem 0.9rem 0.8rem; color: #fff; font-weight: 600; line-height: 1.3;
  background: linear-gradient(transparent, rgba(20, 40, 45, .78)); }

/* --- buttons and forms --- */
.button, .stack button, .google, .btn-primary {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 0;
  background: var(--sea);
  color: #fff;
  font: 650 1rem var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.stack button, .google { display: block; width: 100%; }
.button:hover, .stack button:hover { background: var(--sea-deep); }
.button.secondary { background: #fff; color: var(--sea-deep); box-shadow: inset 0 0 0 1.5px var(--sea); }
.button.big { font-size: 1.05rem; padding: 0.85rem 1.6rem; }
.google { background: #fff; color: var(--ink); border: 1px solid var(--line-warm); }
button.danger, .danger { background: var(--clay); color: #fff; border: 0; border-radius: 999px; padding: 0.55rem 1.1rem; font: 600 0.9rem var(--sans); cursor: pointer; }
.small-btn { font: 600 0.82rem var(--sans); padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--line-warm); background: #fff; color: var(--ink); cursor: pointer; }
.small-btn.danger { border: 0; color: #fff; background: var(--clay); }
.stack input, .stack textarea, .stack select, .ss-form input[type=text], .ss-form input[type=email], .ss-form input[type=number],
.admin-form input, .admin-form select, .admin-form textarea, .filters select, .acct-row input {
  border-radius: 10px;
  border: 1px solid var(--line-warm);
  background: #fff;
  font: 1rem var(--sans);
  padding: 0.6rem 0.75rem;
  color: var(--ink);
  width: 100%;
}
.alert { border-radius: 12px; }
.alert:not(.bad):not(.good) { background: var(--sand); }

/* --- photos --- */
.hero { position: relative; border-radius: 20px; overflow: hidden; margin: 0 0 1.25rem; box-shadow: var(--shadow); background: var(--sea-wash); }
.hero-img { display: block; width: 100%; height: clamp(13rem, 32vw, 21rem); object-fit: cover; }
.hero-short .hero-img { height: clamp(10rem, 24vw, 15rem); }
.hero-text { position: absolute; inset: auto 0 0 0; padding: 3rem 1.4rem 1.2rem; color: #fff;
  background: linear-gradient(transparent, rgba(18, 38, 44, .72)); }
.hero-text h1 { color: #fff; margin: 0.2rem 0 0.3rem; font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.1; }
.hero-text p { margin: 0; max-width: 36rem; font-size: 1.05rem; }
.photo-credit { margin-top: 2.5rem; font-size: 0.78rem; color: var(--muted); }
.photo-credit + .photo-credit { margin-top: 0; }

.doors { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); margin: 0 0 1rem; }
.door { display: grid; background: var(--card); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .15s ease; }
.door:hover { transform: translateY(-2px); }
.door img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.door-title { padding: 0.7rem 0.9rem 0; font: 650 1.1rem var(--display); }
.door-text { padding: 0.15rem 0.9rem 0.9rem; font-size: 0.9rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .door:hover { transform: none; } }

.cat-chips { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cat-chips a { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.4rem 0.85rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 0.92rem; }
.cat-chips a:hover { border-color: var(--sea); }
.cat-chips .n { font-size: 0.78rem; color: var(--fig); font-weight: 650; }

/* --- pills --- */
.pill { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; font: 650 0.78rem/1.4 var(--sans); background: var(--sea-wash); color: var(--sea-deep); }
.hero-text .pill { background: rgba(255, 255, 255, .9); }
.pill.kind-dating { background: #FBE3EA; color: #A23A57; }
.pill.kind-business { background: #F8EBD3; color: #855C14; }
.pill.kind-social { background: #E3EEFB; color: #2F5C99; }
.pill.mini { padding: 0 0.45rem; font-size: 0.7rem; margin-right: 0.15rem; color: #fff; }
.pill.mini.f { background: var(--sea); } .pill.mini.d { background: var(--coral); } .pill.mini.b { background: var(--gold); }

/* --- SpeedSocial list --- */
.ss-events { display: grid; gap: 1rem; }
.ss-event-card { display: grid; grid-template-columns: 9rem 1fr; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.ss-event-card:hover h3 { color: var(--sea-deep); text-decoration: underline; }
.ss-event-card img { width: 100%; height: 100%; object-fit: cover; min-height: 9rem; }
.ss-event-body { padding: 0.9rem 1.1rem; }
.ss-event-body h3 { margin: 0.35rem 0 0.15rem; font-size: 1.25rem; }
.ss-event-body p { margin: 0.1rem 0; }
.ss-event-body .when { font-weight: 600; }
@media (max-width: 34rem) { .ss-event-card { grid-template-columns: 1fr; } .ss-event-card img { aspect-ratio: 16 / 9; min-height: 0; } }

.ss-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem; margin: 0 0 1rem; }
.ss-facts div { background: var(--card); border-radius: 12px; padding: 0.7rem 0.9rem; box-shadow: var(--shadow); }
.ss-facts dt { font-size: 0.8rem; color: var(--muted); }
.ss-facts dd { margin: 0; font-weight: 600; }
.ss-desc { max-width: 40rem; }

.panel.wide { max-width: none; }
.account-hint { background: var(--sand); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin: 0 0 1rem; }
.account-hint p { margin: 0.2rem 0; }

.ss-form { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem; max-width: 40rem; }
.ss-form fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; }
.ss-form legend { font: 650 1.15rem var(--display); padding: 0; margin-bottom: 0.4rem; }
.ss-form label:not(.chip):not(.sticker):not(.check) { display: block; font-weight: 600; margin: 0.9rem 0 0.3rem; }
.ss-form .hint { display: block; font-weight: 400; margin: 0; }
.ss-form .label { display: block; font-weight: 600; margin: 0.9rem 0 0.4rem; }
.row2 { display: grid; grid-template-columns: 1fr 9rem; gap: 1rem; align-items: start; }
@media (max-width: 34rem) { .row2 { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.95rem; border: 1px solid var(--line-warm); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 500; }
.chip:has(input:checked) { border-color: var(--sea); background: var(--sea-wash); box-shadow: inset 0 0 0 1px var(--sea); }
.check.consent { align-items: flex-start; margin: 0.8rem 0 0; font-size: 0.93rem; }
.check.consent input { margin-top: 0.3rem; flex: none; width: 1.1rem; height: 1.1rem; }

/* The stickers mirror the printed card. */
.stickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.6rem; max-width: 26rem; }
label.sticker { position: relative; text-align: center; font-weight: 600; cursor: pointer; }
label.sticker input { position: absolute; opacity: 0; }
label.sticker .dot { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; margin: 0 auto 0.4rem; border-radius: 50%;
  border: 3px dashed var(--line-warm); background: #fff; color: var(--muted); font: 800 1.6rem var(--display); transition: transform .15s ease, background-color .15s ease; }
label.sticker .dot::after { content: "✕"; font-size: 1.2rem; }
label.sticker input:checked + .dot { border: 3px solid transparent; color: #fff; transform: rotate(-6deg); }
label.sticker input:checked + .dot::after { content: "✓"; font-size: 1.8rem; }
label.sticker.f input:checked + .dot { background: var(--sea); }
label.sticker.d input:checked + .dot { background: var(--coral); }
label.sticker.b input:checked + .dot { background: var(--gold); }
label.sticker:has(input:focus-visible) .dot { outline: 3px solid var(--sun); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { label.sticker .dot { transition: none; } label.sticker input:checked + .dot { transform: none; } }

.dating-only { border-left: 4px solid var(--coral) !important; padding-left: 1rem !important; }
.dating-only[hidden] { display: none; }

/* One slider, two handles. Two range inputs share one track; only the
   thumbs catch the pointer, so either handle can be dragged. */
.range-label { margin: 1rem 0 0.2rem; font-weight: 600; }
.range-label output { color: var(--coral); }
.range2 { position: relative; height: 2.4rem; margin: 0 0.6rem; }
.range2-track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--line); }
.range2-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 3px; background: var(--coral); }
.range2 input[type=range] { position: absolute; left: -0.6rem; width: calc(100% + 1.2rem); top: 0; height: 2.4rem; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 2; }
.range2 input[type=range]::-webkit-slider-runnable-track { background: none; border: 0; }
.range2 input[type=range]::-moz-range-track { background: none; border: 0; }
.range2 input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: #fff; border: 3px solid var(--coral); box-shadow: var(--shadow); cursor: grab; }
.range2 input[type=range]::-moz-range-thumb { pointer-events: auto; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: #fff; border: 3px solid var(--coral); cursor: grab; }
.range2 input[type=range]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--sun); outline-offset: 2px; }
.range2 input[type=range]:focus-visible::-moz-range-thumb { outline: 3px solid var(--sun); }

/* --- How the evening works (right column on SpeedSocial pages) --- */
.howto { background: var(--sand); border-radius: var(--radius); padding: 1.1rem 1.1rem 0.9rem; }
.howto h2 { margin: 0 0 0.6rem; font-size: 1.2rem; }
.howto ol { margin: 0; padding-left: 1.2rem; font-size: 0.92rem; }
.howto li { margin-bottom: 0.55rem; }
.howto-note { font-size: 0.82rem; color: var(--muted); margin: 0.6rem 0 0; }

/* --- My evenings --- */
.my-evening { margin: 0 0 1.25rem; }
.my-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.my-head h2 { margin: 0; font-size: 1.35rem; }
.my-head h2 a { color: var(--ink); text-decoration: none; }
.my-head .when { margin: 0.2rem 0 0; color: var(--muted); }
.badge-no { font: 800 2rem/1 var(--display); color: var(--sea-deep); background: var(--sea-wash); border-radius: 14px; padding: 0.4rem 0.7rem; }
.paybox { background: var(--sand); border-radius: 12px; padding: 0.8rem 1rem; }
.paybox p { margin: 0.2rem 0; }
.paybox .ref { font-size: 1.1rem; letter-spacing: 0.04em; }
.stored { margin-top: 1rem; }
.stored summary { cursor: pointer; color: var(--sea-deep); font-weight: 600; }
.table-scroll { overflow-x: auto; }
table.plan, table.admin-table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
table.plan th, table.plan td, table.admin-table th, table.admin-table td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.plan th, table.admin-table th { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
.kindtag { font-size: 0.82rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--sea-wash); }
.kindtag.k-dating { background: #FBE3EA; color: #A23A57; }
.kindtag.k-business { background: #F8EBD3; color: #855C14; }
.kindtag.k-chat { background: #EEF1F1; color: var(--muted); }
.pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--line); }
.pick-row .who { min-width: 10rem; font-weight: 600; }
.badge-input { width: 5.5rem !important; display: inline-block !important; }
.picks .button { margin-top: 0.9rem; }

/* --- organiser --- */
.statline { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.statline span { background: #fff; border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.88rem; box-shadow: var(--shadow); }
.tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1.2rem; }
.tabs a { padding: 0.45rem 1rem; border-radius: 999px; text-decoration: none; color: var(--sea-deep); background: #fff; box-shadow: var(--shadow); font-weight: 600; font-size: 0.92rem; }
.tabs a.on { background: var(--sea); color: #fff; }
.admin-table tr.past { opacity: .6; }
.admin-table tr.waiting { background: var(--sand); }
.rowform { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.rowform select { width: auto !important; padding: 0.3rem 0.5rem !important; }
.rowform .ref { width: 100%; }
.admin-form label { display: block; font-weight: 600; font-size: 0.9rem; margin: 0.7rem 0 0; }
.admin-form label input, .admin-form label select, .admin-form label textarea { margin-top: 0.25rem; font-weight: 400; }
.admin-form label.check { display: flex; font-weight: 500; }
.admin-form label.check input { width: auto; margin: 0; }
.admin-form .button { margin-top: 1rem; }
.admin-form fieldset { border: 1px dashed var(--line-warm); border-radius: 12px; margin: 1rem 0 0; padding: 0.3rem 0.9rem 0.8rem; }
.grid2, .grid3, .grid4 { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) {
  .grid2 { grid-template-columns: 1fr 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid4 { grid-template-columns: repeat(4, 1fr); }
}
.inline-form { display: flex; gap: 0.5rem; align-items: end; margin: 0 0 1rem; }
.danger-zone { border: 1px solid #F1C9C3; }
.plan-grid { border-collapse: separate; border-spacing: 3px; font-size: 0.8rem; }
.plan-grid th { font-weight: 600; color: var(--muted); padding: 0.2rem 0.3rem; }
.plan-grid td { padding: 0.25rem 0.35rem; border-radius: 6px; white-space: nowrap; text-align: center; background: var(--sea-wash); }
.plan-grid td.empty { background: transparent; }
.plan-grid td.small { text-align: left; background: transparent; }
.k-dating { background: #FBE3EA !important; }
.k-friendship { background: var(--sea-wash) !important; }
.k-business { background: #F8EBD3 !important; }
.k-friendship-business { background: #DCEFD9 !important; }
.k-chat { background: #EEF1F1 !important; }
.legend .key { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 6px; margin-right: 0.3rem; }
.mail-list { list-style: none; padding: 0; }
.mail-list li { display: flex; gap: 0.6rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px dashed var(--line); }

/* --- prose pages --- */
.prose { max-width: 42rem; }
.prose h2 { font-size: 1.3rem; margin: 1.8rem 0 0.4rem; }
.big-p { font-size: 1.12rem; }
.credit-list { list-style: none; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.credit-list li { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); font-size: 0.88rem; }
.credit-list img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.credit-list span { display: block; padding: 0.6rem 0.8rem; }

footer { background: #fff; border-top: 0; }
.foot-inner { color: var(--muted); }

/* Organiser pages use the room the right column would take. */
@media (min-width: 75rem) { body.wide .shell { grid-template-columns: 14rem minmax(0, 1fr); } }
/* On wide screens the rail is always open, so its toggle is noise. */
@media (min-width: 56.01rem) { .sidebar > .side-wrap > summary { display: none; } }
.ss-facts { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.doors { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

/* Places running out: the only time the count is shown. */
.spots-low { color: #B3261E; font-weight: 700; margin: 0.3rem 0 0; }
span.spots-low { font-size: 0.9rem; }

/* Deposit deadline: late payers on the organiser's People tab */
.admin-table.people tr.late td { background: #FFF4E5; }
.late-note, .late-count { color: #B3261E; font-weight: 700; }

/* --- left rail: three distinct sections, each its own card --------------
   What's open = sea, What's happening = sun, Housing = coral. A coloured
   header band with an icon, a matching left edge, white body. */
.rail-card {
  --acc: var(--sea-deep); --acc-wash: var(--sea-wash); --acc-edge: var(--sea);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--acc-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 0 1rem;
  overflow: hidden;
}
.rail-happening { --acc: #8A4B0F; --acc-wash: #FDEEDC; --acc-edge: var(--sun); }
.rail-housing   { --acc: #A3324F; --acc-wash: #FBE6EC; --acc-edge: var(--coral); }
.rail-nfh       { --acc: #2F6B3A; --acc-wash: #E6F3E8; --acc-edge: var(--fig); }
.rail-blurb { margin: 0; padding: 0.55rem 0.9rem 0; font-size: 0.85rem; color: var(--muted); }
.rail-nfh .rail-head a { color: inherit; text-decoration: none; }
.rail-nfh .rail-head a:hover { text-decoration: underline; }
.rail-nfh .rail-add a { color: var(--acc); }
.nfh-intro { background: #E6F3E8; border-left: 4px solid var(--fig); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0 0 1rem; }
.nfh-intro p { margin: 0 0 0.5rem; }
.nfh-intro p:last-child { margin-bottom: 0; }
.rail-head {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0; padding: 0.65rem 0.9rem;
  font: 700 1rem/1.2 var(--display, inherit);
  color: var(--acc);
  background: var(--acc-wash);
}
.rail-head svg { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-card .catnav,
.rail-card .railnav { margin: 0; padding: 0.3rem 0.9rem 0.55rem; }
.rail-card .catnav > li:last-child { border-bottom: 0; }
.rail-card .railnav a:hover { color: var(--acc); }
.rail-card .railnav .n { color: var(--acc); font-weight: 650; }
.rail-card .railnav .n.zero { color: var(--muted); font-weight: 400; }

/* --- PT Visa Guide strip: full width, just under the header --- */
.promo-strip {
  margin: 0;
  background: #A3324F;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.35;
}
.promo-strip a {
  display: block;
  padding: 0.38rem 1rem;
  color: #fff;
  text-decoration: none;
}
.promo-strip a:hover strong { text-decoration: underline; }
.promo-strip strong { font-weight: 700; color: #FFE3A8; }

/* Phones: keep the three main links on one row. */
@media (max-width: 30rem) {
  .mainnav { gap: 0; flex-wrap: nowrap; }
  .mainnav a { padding-left: 0.55rem; padding-right: 0.55rem; font-size: 0.95rem; white-space: nowrap; }
}

/* --- blog writing area (/write) --- */
.write-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.25rem; }
.writer-table td { vertical-align: top; }
.row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.row-actions form { margin: 0; }
.status-pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 650; background: var(--line); color: var(--muted); }
.status-pill.published { background: var(--sea-wash); color: var(--sea-deep); }
.status-pill.review { background: #FFF1D6; color: #8A5A00; }
.status-pill.returned { background: #F9E1E6; color: #A3324F; }
.review-note { background: #FFF8EA; border: 1px solid #F2DDB0; border-radius: var(--radius); padding: 0.8rem 1.1rem; margin: 0 0 1.2rem; }
.review-note p { margin: 0.2rem 0; }
.review-note ul { margin: 0.4rem 0 0.2rem; padding-left: 1.2rem; }
.review-box { border: 1px solid #F2DDB0; background: #FFF8EA; border-radius: var(--radius); padding: 0.8rem 1rem; }
.review-box legend { font-weight: 700; padding: 0 0.3rem; }
.write-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.5rem; align-items: start; }
@media (max-width: 56rem) { .write-grid { grid-template-columns: 1fr; } }
.write-form input:not([type=radio]):not([type=checkbox]), .write-form textarea, .write-form select { width: 100%; }
.write-body { font: 1rem/1.6 var(--sans, system-ui); min-height: 22rem; }
.cover-pick { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 1rem 1rem; }
.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.cover-opt { position: relative; display: block; cursor: pointer; border-radius: 10px; overflow: hidden; border: 3px solid transparent; }
.cover-opt input { position: absolute; opacity: 0; }
.cover-opt img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cover-opt:has(input:checked) { border-color: var(--sea); }
.cover-opt:has(input:focus-visible) { outline: 2px solid var(--sun); }
.write-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.write-help h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.write-help table { border-collapse: collapse; font-size: 0.88rem; width: 100%; }
.write-help td { padding: 0.25rem 0.4rem 0.25rem 0; vertical-align: top; }
.write-help code { font-size: 0.82rem; background: var(--paper); padding: 0.05rem 0.3rem; border-radius: 4px; }
.write-preview { margin-top: 2rem; border-top: 2px dashed var(--line-warm); padding-top: 1rem; }
.preview-label { text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.inline-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.inline-form input[type=email] { flex: 1; min-width: 14rem; }
.post-author { color: var(--muted); }
.post-content h2 { font-size: 1.35rem; margin: 1.6rem 0 0.5rem; }
.post-content h3 { font-size: 1.12rem; margin: 1.3rem 0 0.4rem; }
.post-content figure { margin: 1.25rem 0; }
.post-content figure img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.post-content figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.35rem; }
.post-content blockquote { margin: 1rem 0; padding: 0.25rem 0 0.25rem 1rem; border-left: 3px solid var(--sun); color: var(--ink); font-style: italic; }
.post-content ul, .post-content ol { padding-left: 1.3rem; }

/* --- My account (/account) and Admin (/admin/) --- */
.account-grid, .admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.acct-card, .admin-card { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.acct-card h2, .admin-card h2 { margin: 0; font-size: 1.15rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.acct-card p, .admin-card p { margin: 0; }
.acct-big { font: 700 1.6rem/1 var(--display); color: var(--sea-deep); }
.acct-list { list-style: none; margin: 0; padding: 0; }
.acct-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--line); }
.acct-list li:first-child { border-top: 0; }
.acct-list li > span:last-child { flex: none; text-align: right; }
.acct-pts { font-weight: 700; color: var(--sea-deep); }
.acct-row { display: flex; gap: 0.5rem; }
.acct-row input { flex: 1; min-width: 0; }
.acct-name { display: block; }
.acct-name label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }
.admin-card .admin-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.admin-card .admin-stats span { font-size: 0.88rem; color: var(--muted); }
.admin-card .admin-stats strong { font: 700 1.25rem/1 var(--display); color: var(--ink); margin-right: 0.25rem; }
.admin-card .admin-stats .alert-num strong { color: #A3324F; }
.admin-card .admin-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.4rem; }
.admin-card .admin-note { font-size: 0.85rem; color: var(--muted); }
.account a.on { background: var(--sea); border-color: var(--sea); color: #fff; }
.account a.who.on .pts { color: rgba(255,255,255,.85); }
.admin-card .admin-links .button, .acct-card .button { font-size: 0.88rem; padding: 0.42rem 0.95rem; }
.acct-row input { padding: 0.5rem 0.7rem; font: inherit; }

/* ============================================================
   MEEPLE MONDAYS (board game night, /gamenight)
   Felt-green table, the sun-orange meeple. Scorekeeper pages are
   built for a phone held in one hand: big targets, big numbers.
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gn-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center;
  border-radius: 20px; overflow: hidden; margin: 0 0 1.25rem; box-shadow: var(--shadow); background: #1F6B69; color: #fff; }
.gn-hero-text { order: -1; padding: 1.6rem 1.2rem 1.6rem 1.6rem; }
.gn-hero-text h1 { color: #fff; margin: 0.45rem 0 0.35rem; font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.02; font-stretch: 80%; }
.gn-hero-text p { margin: 0; font-size: 1.05rem; color: #E3F2EF; }
.gn-hero-text .pill { background: var(--sun); color: #3D2406; }
.gn-art { display: block; width: 100%; height: 100%; min-height: 15rem; }
@media (max-width: 40rem) {
  .gn-hero { grid-template-columns: 1fr; }
  .gn-hero-text { order: 0; padding: 0.4rem 1.2rem 1.3rem; }
  .gn-art { min-height: 0; height: 11rem; }
}

.gn-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.5rem;
  background: #E7F5EC; border-left: 4px solid #25A35A; border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.25rem 0; }
.gn-join h2 { margin: 0 0 0.2rem; font-size: 1.2rem; }
.gn-join p { margin: 0; max-width: 32rem; }
.gn-join .button { background: #1E8A4C; }
.gn-join .button:hover { background: #166B3A; }

.gn-steps { padding-left: 1.3rem; max-width: 40rem; }
.gn-steps li { margin-bottom: 0.55rem; }

.gn-points { width: 100%; border-collapse: collapse; margin: 0 0 0.6rem; }
.gn-points td { padding: 0.3rem 0; border-bottom: 1px dashed var(--line-warm); font-size: 0.92rem; }
.gn-points td:last-child { text-align: right; font: 700 1.1rem var(--display); color: var(--sea-deep); }
.gn-side .small { margin: 0.4rem 0; }

th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
.gn-standings tr.gn-first td { background: #FFF6E5; }
.gn-standings td:first-child { color: var(--muted); width: 2.5rem; }

.gn-tabs { display: flex; gap: 0.3rem; margin: 0 0 0.9rem; }
.gn-tabs a { padding: 0.4rem 1rem; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--line-warm); background: #fff; }
.gn-tabs a.on { background: var(--sea); color: #fff; box-shadow: none; }
.gn-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; }
.gn-pick label { font-size: 0.9rem; color: var(--muted); }
.gn-pick select, .gn-pick input { font: 1rem var(--sans); padding: 0.4rem 0.6rem; border: 1px solid var(--line-warm); border-radius: 10px; background: #fff; }

.gn-champs, .gn-nights { list-style: none; padding: 0; margin: 0 0 1rem; }
.gn-champs li, .gn-nights li { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; padding: 0.5rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.gn-champs li:first-child, .gn-nights li:first-child { border-top: 0; }
.gn-when { min-width: 9rem; font-weight: 600; }

.gn-game h3 { margin: 0 0 0.6rem; display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; align-items: baseline; }
.gn-result { list-style: none; padding: 0; margin: 0; }
.gn-result li { display: grid; grid-template-columns: 3rem 1fr auto; gap: 0.5rem; padding: 0.35rem 0; border-top: 1px solid var(--line); }
.gn-result li:first-child { border-top: 0; }
.gn-place { font: 700 0.95rem var(--display); color: var(--muted); }
.gn-result li.p1 .gn-place { color: #B9862C; }
.gn-result li.p1 { font-weight: 600; }

.gn-sheet td, .gn-sheet th { padding: 0.35rem 0.45rem; white-space: nowrap; }
.gn-sheet td:first-child { white-space: normal; min-width: 8rem; }
.gn-sheet .gn-total { border-right: 2px solid var(--line-warm); }
.gn-sheet .gn-out { color: var(--fig); font-weight: 700; }
.gn-sheet .gn-missed { color: var(--clay); background: #FBEDEA; }
.gn-sheet tr.gn-first td { background: #FFF6E5; }
.gn-rank { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sea-wash);
  color: var(--sea-deep); font: 700 0.8rem var(--sans); margin-right: 0.2rem; }
.gn-first .gn-rank { background: var(--sun); color: #3D2406; }

/* --- scorekeeper (phone) --- */
.gn-keeping .panel h2 { margin: 0 0 0.4rem; font-size: 1.25rem; }
.gn-roster .chip { font-size: 1rem; padding: 0.6rem 1rem; }
.gn-roster .chip .muted { font-size: 0.8rem; }
.gn-add { margin-top: 0.8rem; }
.gn-add summary { cursor: pointer; font-weight: 600; color: var(--sea-deep); padding: 0.3rem 0; }
.gn-add-form { max-width: 26rem; }
.gn-add-form label { display: block; font-weight: 600; margin: 0.7rem 0 0.25rem; }
.gn-add-form .button { margin-top: 0.8rem; }
.gn-gamelist { list-style: none; padding: 0; margin: 0; }
.gn-gamelist li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.gn-gamelist li:first-child { border-top: 0; }
.gn-keeping .admin-form > label { display: block; font-weight: 600; margin: 0.4rem 0 0.25rem; }

.gn-places { border: 0; padding: 0; margin: 1rem 0; }
.gn-places legend { font-weight: 700; padding: 0; }
.gn-prow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.8rem;
  padding: 0.55rem 0; border-top: 1px solid var(--line); }
.gn-prow:first-of-type { border-top: 0; }
.gn-played { font-size: 1rem; font-weight: 600; min-width: 9rem; }
.gn-played input { width: 1.3rem; height: 1.3rem; }
.gn-seg { display: inline-flex; border: 1.5px solid var(--line-warm); border-radius: 999px; overflow: hidden; background: #fff; }
.gn-seg label { margin: 0; cursor: pointer; }
.gn-seg input { position: absolute; opacity: 0; }
.gn-seg span { display: block; min-width: 3.1rem; padding: 0.5rem 0.6rem; text-align: center; font-weight: 600; color: var(--muted); }
.gn-seg label + label span { border-left: 1px solid var(--line); }
.gn-seg input:checked + span { background: var(--sea); color: #fff; }
.gn-seg input[value="1"]:checked + span { background: var(--sun); color: #3D2406; }
.gn-seg input:focus-visible + span { outline: 2px solid var(--sun); outline-offset: -2px; }

.gn-round { border-top: 4px solid var(--sun); }
.gn-srow { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem auto; gap: 0.6rem; align-items: center; padding: 0.45rem 0; border-top: 1px solid var(--line); }
.gn-srow:first-of-type { border-top: 0; }
.gn-srow label { font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.gn-srow input { font: 700 1.5rem/1 var(--display); text-align: center; padding: 0.45rem 0.3rem; width: 100%;
  border: 1.5px solid var(--line-warm); border-radius: 12px; background: #fff; color: var(--ink); }
.gn-srow input:focus { border-color: var(--sea); }
.gn-zero { white-space: nowrap; padding: 0.55rem 0.8rem; }
.gn-scores .button.big { margin-top: 0.9rem; width: 100%; }
@media (min-width: 40rem) { .gn-scores .button.big { width: auto; } }
.gn-finish { margin: 1.2rem 0 0.6rem; }
.gn-delete { margin: 2rem 0 1rem; }
.gn-join-form { margin: 0.8rem 0 0; align-items: center; }
.gn-join-form select { font: 1rem var(--sans); padding: 0.45rem 0.6rem; border: 1px solid var(--line-warm); border-radius: 10px; background: #fff; max-width: 100%; }

.gn-mondays { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.8rem; }
.gn-monday { margin: 0; padding: 1rem; }
.gn-monday h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.gn-monday label:not(.check) { display: block; font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0 0.2rem; }
.gn-monday .small-btn { margin-top: 0.6rem; }
.gn-monday.cancelled { background: #F7F1EF; }
.gn-prow-edit { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.gn-prow-edit input { width: auto; flex: 1 1 9rem; min-width: 0; padding: 0.4rem 0.6rem; }

/* Phones: with four main links, let them wrap to a second row. */
@media (max-width: 30rem) {
  .mainnav { flex-wrap: wrap; }
}

/* --- Town picker (What's open): one line, opens to a tick list --- */
.town-pick { margin: 0 0 0.9rem; }
.rail-card .town-pick { margin: 0; padding: 0.55rem 0.9rem; border-bottom: 1px dashed var(--line); }
.town-pick summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.45rem; }
.town-pick summary::-webkit-details-marker { display: none; }
.town-pick .tp-label { font-size: 0.8rem; color: var(--muted); }
.town-pick summary strong { font-weight: 650; }
.town-pick .tp-change { font-size: 0.8rem; color: var(--sea-deep); text-decoration: underline; }
.town-pick[open] .tp-change { visibility: hidden; }
.tp-form { margin: 0.6rem 0 0.2rem; }
.tp-form fieldset { border: 0; margin: 0; padding: 0; }
.tp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.15rem 0.8rem; }
.rail-card .tp-list { grid-template-columns: 1fr; }
.tp-list label.check { margin: 0; padding: 0.25rem 0; font-size: 0.9rem; align-items: center; }
.tp-list .n { color: var(--muted); font-size: 0.78rem; margin-left: 0.15rem; }
.tp-list .n.zero { opacity: .6; }
.tp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.tp-actions .link { background: none; border: 0; padding: 0; font: 0.85rem var(--sans); color: var(--sea-deep); text-decoration: underline; cursor: pointer; }
.tp-go { background: var(--sea); color: #fff; border-color: var(--sea); }
main > .town-pick, .open-cats .town-pick { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.9rem; box-shadow: var(--shadow); }

/* --- Meeple Mondays on What's happening --- */
.gn-event-card .event-card-image { background: #1F6B69; }
@media (max-width: 679px) { .gn-event-card .event-card-image { height: 170px; } }
.gn-event-card .event-card-image .gn-art { min-height: 0; height: 100%; }
.gn-pill { background: var(--sun); color: #3D2406; }

/* --- points boxes and /points --- */
.pts-box { margin: 0 0 1rem; }
.pts-box .small { margin: 0.35rem 0; }
.sidebar-right .pts-box + .spotlight { margin-top: 0; }
.ss-howto .pts-box { margin-top: 1rem; }
.pts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.pts-card { margin: 0; }
.pts-card h2 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.pts-card h2 a { color: var(--ink); text-decoration: none; }
.pts-card h2 a:hover { color: var(--sea-deep); text-decoration: underline; }
.pts-card .small { margin: 0.35rem 0 0; }
.ss-send-matches { background: var(--sand); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin: 0 0 1rem; }
.ss-send-matches p { margin: 0 0 0.5rem; }

/* Site-wide town filter: a card at the top of the menu. On wide screens
   the menu is always visible, so the copies inside pages are hidden. */
.rail-towns .town-pick { margin: 0 0 1rem; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.65rem 0.9rem; }
.rail-towns .tp-list { grid-template-columns: 1fr; }
@media (min-width: 56.01rem) { main .town-pick { display: none; } }

/* --- SpeedSocial host page --- */
.host-find { width: 100%; max-width: 24rem; font: 1rem var(--sans); padding: 0.6rem 0.8rem; border: 1px solid var(--line-warm); border-radius: 10px; margin: 0.3rem 0 0.6rem; }
.host-guests { list-style: none; margin: 0; padding: 0; }
.host-guests li { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 0.6rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.host-guests li:first-child { border-top: 0; }
.host-guests li.here { background: #EEF6EE; }
.host-guests li[hidden] { display: none; }
.host-badge { font: 700 1.15rem var(--display); color: var(--muted); }
.host-name { font-weight: 600; font-size: 1.05rem; }
.host-guests form { margin: 0; }
.host-fields { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; margin: 1rem 0; }
.host-fields legend { font-weight: 700; padding: 0 0.3rem; }

/* ---------- SpeedSocial: the guest's card on their phone ---------- */
body.card-only .sidebar, body.card-only .promo-strip { display: none; }
body.card-only .shell { grid-template-columns: minmax(0, 1fr); }
.ss-card { max-width: 30rem; margin: 0 auto; }
.ssc-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin: 0.2rem 0 0.8rem; }
.ssc-me { font: 700 1.25rem var(--display); }
.ssc-ev { font-size: 0.85rem; text-align: right; line-height: 1.3; }
.ssc-badge { color: var(--sea-deep); }
.ssc-dots { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0; margin: 0 0 0.8rem; }
.ssc-dots a { display: grid; place-items: center; min-width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; }
.ssc-dots a.on { background: var(--sea-deep); border-color: var(--sea-deep); color: #fff; }
.ssc-screen { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.1rem 1.2rem; }
.ssc-screen h1 { font-size: 1.6rem; margin: 0.1rem 0 0.5rem; }
.ssc-round { margin: 0; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; }
.ssc-table { font-size: 1.15rem; margin-top: 0.3rem; }
.ssc-table strong { font: 800 3.2rem/1 var(--display); color: var(--sea-deep); margin-left: 0.2rem; vertical-align: -0.35rem; }
.ssc-partner { font-size: 1.8rem; }
.ssc-match { margin: 0.2rem 0 0.4rem; }
.ssc-ticks { border: 0; padding: 0; margin: 1rem 0 0.3rem; display: grid; gap: 0.5rem; }
.ssc-ticks legend { font-weight: 600; margin-bottom: 0.5rem; padding: 0; }
.ssc-tick { display: block; cursor: pointer; }
.ssc-tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ssc-tick span { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border: 2px solid var(--line); border-radius: 14px; font-size: 1.15rem; font-weight: 600; background: #fff; }
.ssc-tick span::before { content: ""; width: 1.5rem; height: 1.5rem; border-radius: 6px; border: 2px solid var(--muted); flex: none; display: grid; place-items: center; font-size: 1rem; color: #fff; }
.ssc-tick input:checked + span { border-color: var(--sea-deep); background: var(--sea-wash); }
.ssc-tick input:checked + span::before { content: "✓"; background: var(--sea-deep); border-color: var(--sea-deep); }
.ssc-tick.t-d input:checked + span { border-color: #A23A57; background: #FBE3EA; }
.ssc-tick.t-d input:checked + span::before { background: #A23A57; border-color: #A23A57; }
.ssc-tick.t-b input:checked + span { border-color: #855C14; background: #F8EBD3; }
.ssc-tick.t-b input:checked + span::before { background: #855C14; border-color: #855C14; }
.ssc-tick input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.ssc-ticks:disabled .ssc-tick { cursor: default; opacity: 0.6; }
.ssc-saved { min-height: 1.2em; margin: 0.3rem 0 0; }
.ssc-lock { background: #FFF6E5; border-radius: 10px; padding: 0.5rem 0.7rem; }
.ssc-nav { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 1rem; }
.ssc-nav .button { min-height: 3rem; padding-left: 1.3rem; padding-right: 1.3rem; font-size: 1.05rem; }
.ssc-summary { list-style: none; padding: 0; margin: 0.6rem 0 0.4rem; }
.ssc-summary li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.ssc-summary li:first-child { border-top: 0; }
.ssc-summary a { font-weight: 600; }
.ssc-all { margin: 1rem 0; }
.ssc-all summary { cursor: pointer; font-weight: 600; }
.ssc-all tr.on td { background: var(--sea-wash); }
.ssc-foot { margin-top: 1.4rem; text-align: center; }

/* Host page: the talk to read out, the round timer, who sits where. */
.host-script { background: #FBF7EF; border-left: 4px solid var(--sun); border-radius: 10px; padding: 0.8rem 1.1rem; max-width: 46rem; }
.host-script p, .host-script li { font-size: 1.02rem; }
.round-caller { background: var(--sea-wash); border-radius: var(--radius); padding: 0.9rem 1.1rem; max-width: 30rem; }
.round-caller[hidden] { display: none; }
.rc-now { font-weight: 700; margin: 0; }
.rc-clock { font: 800 2.6rem/1.1 var(--display); color: var(--sea-deep); margin: 0.2rem 0; min-height: 1.1em; }
.rc-say { font-weight: 600; }
.host-round { border-top: 1px solid var(--line); padding: 0.4rem 0; }
.host-round summary { cursor: pointer; font-weight: 600; }
.host-round ul { margin: 0.3rem 0 0.4rem; }
.ssc-manners { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.7rem 1.1rem; margin: 1rem 0 0; }
.ssc-manners summary { cursor: pointer; font-weight: 600; }
.ssc-manners ul { margin: 0.5rem 0 0.2rem; padding-left: 1.1rem; }
.ssc-manners li { margin: 0 0 0.45rem; }

/* ---------- Meeple Mondays: stats pages and charts ---------- */
.gn-subnav { display: flex; gap: 1.2rem; margin: -0.3rem 0 0.9rem; border-bottom: 1px solid var(--line); }
.gn-subnav a { padding: 0.45rem 0; color: var(--muted); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.gn-subnav a.on { color: var(--ink); border-bottom-color: var(--sea); }
.gn-subnav a:hover { color: var(--ink); }

.gn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 0.6rem; margin: 0 0 1.4rem; }
.gn-tile { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.1rem; }
.gn-big { font: 750 1.75rem/1.1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.gn-what { font-weight: 600; font-size: 0.92rem; }
.gn-sub { font-size: 0.8rem; color: var(--muted); line-height: 1.3; }
.gn-reigning { background: var(--sand); border-radius: 12px; padding: 0.6rem 0.9rem; margin: -0.4rem 0 1.4rem; }

.gn-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin: 0 0 1.6rem; }
.gn-charts.one { grid-template-columns: minmax(0, 1fr); margin-top: 1.6rem; }

.gn-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0.8rem; margin: 0 0 1.6rem; }
.gn-board { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 0.8rem 1rem 0.6rem; }
.gn-board h3 { margin: 0; font-size: 1.05rem; }
.gn-board p { margin: 0.1rem 0 0.3rem; }
.gn-board ol { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.gn-board li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.4rem; padding: 0.32rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.gn-board li:first-child { border-top: 0; }
.gn-board li.top .gn-nm { font-weight: 700; }
.gn-board li.top .gn-rk { color: var(--gold); }
.gn-rk { font: 700 0.9rem var(--display); color: var(--muted); }
.gn-v { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gn-v .muted { font-weight: 400; font-size: 0.82rem; }

.gn-whowins td { vertical-align: top; }
.gn-records { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 0.5rem; }
.gn-records li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.7rem; align-items: center; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 0.55rem 0.9rem; }
.gn-rv { font: 750 1.6rem/1 var(--display); color: var(--sea-deep); text-align: center; }

.gn-h2h-bar { width: 30%; min-width: 6rem; }
.h2h-track { display: block; height: 0.55rem; border-radius: 999px; background: #F3DCD8; overflow: hidden; }
.h2h-ahead { display: block; height: 100%; background: var(--sea); border-radius: 999px 0 0 999px; }

/* Charts (src/charts.php): one colour per chart, thin bars, quiet grid. */
.chart { margin: 0; background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 0.8rem 1rem 0.6rem; min-width: 0; }
.chart-title { font-weight: 650; margin: 0 0 0.6rem; }
.chart-plot { position: relative; height: 9.5rem; margin-left: 1.8rem; }
.chart-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.chart-grid span { position: absolute; right: 100%; transform: translate(-0.35rem, -55%); font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-plot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line-warm); }
.chart-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; }
.chart-cols.dense { gap: 2px; }
.chart-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; text-decoration: none; outline: none; }
.chart-bar { display: block; width: 100%; max-width: 2.2rem; background: var(--sea); border-radius: 4px 4px 0 0; position: relative; min-height: 1px; transition: background 0.12s; }
.chart-col:hover .chart-bar, .chart-col:focus-visible .chart-bar { background: var(--sea-deep); }
.chart-val { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -0.15rem); font-size: 0.75rem; font-weight: 650; color: var(--ink); white-space: nowrap; }
.chart-col[data-tip]:hover::after, .chart-col[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 0.3rem); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 0.78rem; line-height: 1.3; padding: 0.3rem 0.5rem; border-radius: 6px;
  white-space: nowrap; z-index: 5; pointer-events: none; }
.chart-cols .chart-col:first-child[data-tip]:hover::after, .chart-cols .chart-col:nth-child(2)[data-tip]:hover::after { left: 0; transform: none; }
.chart-cols .chart-col:last-child[data-tip]:hover::after, .chart-cols .chart-col:nth-last-child(2)[data-tip]:hover::after { left: auto; right: 0; transform: none; }
.chart-x { display: flex; gap: 3px; margin: 0.25rem 0 0 1.8rem; font-size: 0.72rem; color: var(--muted); }
.chart-x.dense { gap: 2px; }
.chart-x span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }
.chart-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.chart-rows li { display: grid; grid-template-columns: minmax(6rem, 34%) 1fr 2.2rem; gap: 0.5rem; align-items: center; font-size: 0.9rem; }
.chart-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-track { display: block; height: 0.8rem; }
.chart-rows .chart-bar { height: 100%; max-width: none; border-radius: 0 4px 4px 0; }
.chart-rows li:hover .chart-bar { background: var(--sea-deep); }
.chart-n { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.chart-data { margin-top: 0.5rem; font-size: 0.85rem; }
.chart-data summary { cursor: pointer; color: var(--muted); }
.chart-data table { margin-top: 0.4rem; }

/* ---------- Meeple Mondays: Catan score sheet ---------- */
.cz-help { margin: 0 0 0.8rem; }
.cz-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.8rem; }
.cz-card { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 0.8rem 0.9rem; border-top: 4px solid var(--line-warm); }
.cz-card.lead { border-top-color: var(--sun); }
.cz-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.cz-card h2 { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.cz-vp { white-space: nowrap; }
.cz-vpn { font: 800 2.1rem/1 var(--display); color: var(--sea-deep); }
.cz-vp small { color: var(--muted); margin-left: 0.15rem; }
.cz-step { display: grid; grid-template-columns: 1fr 2.6rem 3.2rem 2.6rem; gap: 0.35rem; align-items: center; padding: 0.3rem 0; border-top: 1px solid var(--line); }
.cz-step:first-child { border-top: 0; }
.cz-lbl { font-weight: 600; line-height: 1.2; }
.cz-lbl small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.cz-btn { height: 2.6rem; border-radius: 10px; border: 1px solid var(--line-warm); background: var(--sea-wash); font: 700 1.3rem/1 var(--sans); color: var(--sea-deep); cursor: pointer; }
.cz-btn:active { background: var(--sea-light); }
.cz-btn:disabled { opacity: 0.4; cursor: default; }
.cz-step input { height: 2.6rem; width: 100%; text-align: center; font: 700 1.3rem/1 var(--display); border: 1px solid var(--line-warm); border-radius: 10px; padding: 0; -moz-appearance: textfield; }
.cz-step input::-webkit-outer-spin-button, .cz-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cz-cards { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0.2rem; }
.cz-tog { cursor: pointer; }
.cz-tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cz-tog span { display: inline-block; padding: 0.45rem 0.7rem; border-radius: 999px; border: 1.5px solid var(--line-warm); font-size: 0.88rem; font-weight: 600; background: #fff; }
.cz-tog input:checked + span { background: var(--sea-deep); border-color: var(--sea-deep); color: #fff; }
.cz-tog.la input:checked + span { background: #8A4B0F; border-color: #8A4B0F; }
.cz-tog.first input:checked + span { background: var(--ink); border-color: var(--ink); }
.cz-tog input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.cz-tog input:disabled + span { opacity: 0.6; }
.cz-more { margin-top: 0.4rem; font-size: 0.9rem; }
.cz-more summary { cursor: pointer; font-weight: 600; }
.cz-opt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0.4rem; }
.cz-opt label { font-size: 0.8rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.15rem; }
.cz-opt input { width: 100%; padding: 0.4rem; border: 1px solid var(--line-warm); border-radius: 8px; font: 600 1rem var(--sans); text-align: center; }
.cz-place { margin: 0.5rem 0 0; font-weight: 700; color: var(--gold); }
.cz-nobody { border: 0; padding: 0; margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; align-items: center; }
.cz-nobody legend { float: left; margin-right: 0.6rem; padding: 0; }
.cz-tie { border: 2px solid var(--sun); border-radius: 12px; padding: 0.6rem 0.9rem; margin: 0.9rem 0 0; background: #FFF6E5; }
.cz-tie[hidden], .cz-tie label[hidden] { display: none; }
.cz-tie legend { font-weight: 700; padding: 0 0.3rem; }
.cz-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 1.4rem; position: sticky; bottom: 0; padding: 0.6rem 0; background: linear-gradient(transparent, var(--paper) 30%); }
.cz-actions .button.big { flex: 1 1 auto; }

/* Night page: the Catan result */
.cz-result td.num, .cz-result th.num { text-align: center; }
.cz-yes { font-weight: 700; color: var(--sea-deep); }
.gn-facts ul { list-style: none; margin: 0; padding: 0; }
.gn-facts li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.4rem 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.gn-facts li:first-child { border-top: 0; }
.gn-facts li > span:last-child { font-weight: 650; text-align: right; }
.gn-facts .muted { font-weight: 400; font-size: 0.82rem; }

/* ---------- Housing, second version ---------- */
/* Posting form */
.hf-form { display: grid; gap: 0.9rem; max-width: 46rem; }
.hf-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.2rem 1.1rem; max-width: 46rem; margin-bottom: 0.9rem; }
.hf-form .hf-card { margin-bottom: 0; }
.hf-card[hidden] { display: none; }
.hf-card h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.hf-card > label:not(.check), .hf-card .pair label:not(.check), #bills-est label, #wa-box label { display: block; font-weight: 600; margin: 0.8rem 0 0.3rem; }
.hf-card input[type=text], .hf-card input:not([type]), .hf-card input[inputmode], .hf-card input[type=date], .hf-card select, .hf-card textarea {
  width: 100%; font: 1rem var(--sans); padding: 0.55rem 0.7rem; border: 1px solid var(--line-warm); border-radius: 10px; background: #fff; }
.hf-card textarea { resize: vertical; }
.hf-card .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.8rem; }
.hf-card .pair.tight { gap: 0 0.5rem; }
@media (max-width: 34rem) { .hf-card .pair:not(.tight) { grid-template-columns: 1fr; } }
.hf-card .check { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.8rem 0 0.2rem; font-weight: 500; }
.hf-card .check input { margin-top: 0.25rem; }
.hf-map { margin-top: 0.8rem; }
.hf-map summary { cursor: pointer; font-weight: 600; }
.hf-total { background: var(--sea-wash); border-radius: 10px; padding: 0.55rem 0.8rem; margin: 0.9rem 0 0; }
.hf-total:empty { display: none; }
.hf-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.hf-photos { list-style: none; padding: 0; margin: 0.6rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.6rem; }
.hf-photos li { position: relative; background: var(--paper); border-radius: 10px; overflow: hidden; }
.hf-photos img { display: block; width: 100%; height: 7rem; object-fit: cover; }
.hf-cover { position: absolute; top: 0.4rem; left: 0.4rem; background: var(--ink); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.hf-photo-tools { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.35rem; }
.hf-photo-tools form { margin: 0; }
.hf-drop { display: block; border: 2px dashed var(--line-warm); border-radius: 12px; padding: 1rem; text-align: center; cursor: pointer; background: #fff; }
.hf-drop.over, .hf-drop:hover { border-color: var(--sea); background: var(--sea-wash); }
.hf-drop input { display: block; margin: 0 auto 0.5rem; max-width: 100%; }
.hf-drop span strong { display: block; font-size: 1.05rem; }
.hf-drop span small { color: var(--muted); }
.hf-progress:empty { display: none; }
.hf-upload-btn[hidden] { display: none; }

/* List page */
.hl-lede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.8rem 1.5rem; }
.hl-lede > div:first-child { max-width: 36rem; }
.hl-post { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hl-tabs { flex-wrap: wrap; }
.hl-filters { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 0.6rem 1rem; margin: 0 0 0.8rem; }
.hl-filters summary { cursor: pointer; font-weight: 650; }
.hl-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.6rem 0.9rem; margin: 0.7rem 0 0.3rem; align-items: end; }
.hl-form label:not(.check) { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.hl-form input, .hl-form select { font: 1rem var(--sans); padding: 0.45rem 0.6rem; border: 1px solid var(--line-warm); border-radius: 10px; background: #fff; color: var(--ink); }
.hl-form .check { display: flex; gap: 0.4rem; align-items: center; font-weight: 600; padding-bottom: 0.5rem; }
.hl-form-go { display: flex; gap: 0.7rem; align-items: center; }
.hl-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.4rem 1rem; margin: 0 0 0.6rem; }
.hl-bar .count { margin: 0.3rem 0; }
.hl-alert { max-width: 30rem; }
.hl-alert summary { cursor: pointer; color: var(--sea-deep); font-weight: 600; }
.hl-alert form, .hl-alert > p { margin-top: 0.4rem; }
.hl-map { margin: 0 0 1rem; }
.hl-map summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5rem; }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.hl-card { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.hl-img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--sea-wash); }
.hl-card.is-seeking .hl-img { background: var(--sand); }
.hl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.hl-n { position: absolute; right: 0.5rem; bottom: 0.5rem; background: rgba(36, 56, 63, 0.82); color: #fff; font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 999px; }
.hl-img .housing-tag { position: absolute; left: 0.5rem; top: 0.5rem; }
.hl-body { padding: 0.7rem 0.9rem 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; }
.hl-price { margin: 0; font: 750 1.2rem/1.2 var(--display); }
.hl-move { margin: 0; }
.hl-body h2 { margin: 0.15rem 0 0; font-size: 1rem; line-height: 1.3; }
.hl-body h2 a { color: var(--ink); text-decoration: none; }
.hl-body h2 a:hover { color: var(--sea-deep); text-decoration: underline; }
.hl-facts { margin: 0; color: var(--muted); }
.housing-tag.is-offering { background: var(--sea-deep); color: #fff; }
.housing-tag.is-seeking { background: var(--gold); color: #fff; }

/* Listing page */
.hd-head { margin: 0.9rem 0 1rem; }
.hd-head h1 { margin: 0.4rem 0 0.2rem; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.hd-price { margin: 0; font: 750 1.35rem/1.3 var(--display); }
.hd-price .muted { font: 500 1rem var(--sans); }
.hd-facts { list-style: none; padding: 0; margin: 0.4rem 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; color: var(--muted); }
.hd-facts li + li::before { content: "·"; margin-right: 0.9rem; }
.hd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1rem 1.4rem; align-items: start; }
@media (max-width: 56rem) { .hd-grid { grid-template-columns: minmax(0, 1fr); } .hd-side { order: -1; } }
.hd-card { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 0.9rem 1.1rem; margin-bottom: 1rem; }
.hd-card h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.hd-text { line-height: 1.6; }
.hd-dl { display: grid; grid-template-columns: 9rem 1fr; gap: 0.35rem 0.8rem; margin: 0; }
.hd-dl dt { color: var(--muted); }
.hd-dl dd { margin: 0; }
.hd-money-table { width: 100%; border-collapse: collapse; }
.hd-money-table td { padding: 0.45rem 0; border-top: 1px solid var(--line); vertical-align: top; }
.hd-money-table tr:first-child td { border-top: 0; }
.hd-money-table td.num { text-align: right; font-weight: 650; white-space: nowrap; }
.hd-money-table tr.total td { font-weight: 750; border-top: 2px solid var(--ink); }
.hd-money-table tr.total td.num { font: 800 1.2rem var(--display); color: var(--sea-deep); }
.hd-contact { border-top: 4px solid var(--sea); }
.hd-poster { margin: 0 0 0.7rem; }
.hd-msg textarea { width: 100%; font: 1rem var(--sans); padding: 0.6rem 0.7rem; border: 1px solid var(--line-warm); border-radius: 10px; margin-bottom: 0.5rem; resize: vertical; }
.hd-msg .button { width: 100%; }
.button.wa { background: #1E8A4C; text-align: center; line-height: 1.25; }
.button.wa:hover { background: #166B3A; }
.button.wa small { font-weight: 500; opacity: 0.9; }
.hs-wa { display: block; }
.hd-safe ul { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.hd-safe li { margin-bottom: 0.3rem; font-size: 0.92rem; }
.hs-share details { margin-top: 0.4rem; }
.hs-share summary { cursor: pointer; font-weight: 600; }
.hs-text { width: 100%; font: 0.88rem/1.4 var(--sans); padding: 0.5rem; border: 1px solid var(--line-warm); border-radius: 10px; margin-top: 0.3rem; }
.hs-qr { width: 11rem; max-width: 100%; }
.hs-qr svg { display: block; width: 100%; height: auto; }
.hs-native[hidden], .hs-copy[hidden], .hs-qr[hidden] { display: none; }
.hd-yours { border-top: 4px solid var(--sun); }
.hd-yours .manage-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.hd-yours .manage-actions form { margin: 0; }
.hg { margin: 0.4rem 0 0; }
.hg-main { position: relative; background: #1d2b30; border-radius: 14px; overflow: hidden; display: grid; place-items: center; max-height: 34rem; }
.hg-main img { width: 100%; height: auto; max-height: 34rem; object-fit: contain; display: block; }
.hg-prev, .hg-next { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.88); font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink); }
.hg-prev { left: 0.6rem; } .hg-next { right: 0.6rem; }
.hg-count { position: absolute; right: 0.7rem; bottom: 0.6rem; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.8rem; padding: 0.15rem 0.55rem; border-radius: 999px; }
.hg-thumbs { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.5rem 0 0.2rem; }
.hg-thumbs button { flex: none; border: 2px solid transparent; border-radius: 8px; padding: 0; background: none; cursor: pointer; overflow: hidden; }
.hg-thumbs button.on { border-color: var(--sea); }
.hg-thumbs img { display: block; width: 6rem; height: 4.2rem; object-fit: cover; }
.hg-all img { width: 100%; height: auto; margin-top: 0.5rem; border-radius: 10px; }
.hg-empty { display: block; border: 2px dashed var(--line-warm); border-radius: 14px; padding: 1.4rem; text-align: center; text-decoration: none; color: var(--ink); background: var(--card); margin-top: 0.4rem; }
.hg-empty strong { display: block; font-size: 1.1rem; color: var(--sea-deep); }
.hg-empty span { color: var(--muted); }

/* Messages */
.hm-inbox, .hm-list { list-style: none; padding: 0; margin: 0; }
.hm-inbox li { border-top: 1px solid var(--line); }
.hm-inbox li:first-child { border-top: 0; }
.hm-inbox a { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; padding: 0.7rem 0.4rem; text-decoration: none; color: var(--ink); }
.hm-inbox a:hover { background: var(--sea-wash); }
.hm-who { font-weight: 650; }
.hm-what, .hm-last { grid-column: 1; }
.hm-when { grid-column: 2; grid-row: 1; }
.hm-inbox li.unread .hm-last { font-weight: 650; }
.hm-list li { padding: 0.45rem 0; border-top: 1px solid var(--line); }
.hm-list li:first-child { border-top: 0; }
.hm-list a { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.hm-list li.unread strong::after { content: " · new"; color: var(--sea-deep); }
.hm-thread { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.7rem; max-width: 44rem; }
.hm-thread li { display: flex; flex-direction: column; max-width: 85%; }
.hm-thread li.mine { align-self: flex-end; align-items: flex-end; }
.hm-bubble { background: var(--card); box-shadow: var(--shadow); border-radius: 14px 14px 14px 4px; padding: 0.6rem 0.85rem; line-height: 1.5; overflow-wrap: anywhere; }
.hm-thread li.mine .hm-bubble { background: var(--sea-wash); border-radius: 14px 14px 4px 14px; }
.hm-meta { margin-top: 0.15rem; }
.hm-warn { background: #FFF1E0; border-left: 4px solid var(--sun); border-radius: 10px; padding: 0.5rem 0.8rem; margin-bottom: 0.35rem; font-size: 0.88rem; }
.hm-warn p { margin: 0.2rem 0 0; }
.hm-reply { max-width: 44rem; }
.hm-reply textarea { width: 100%; font: 1rem var(--sans); padding: 0.6rem 0.7rem; border: 1px solid var(--line-warm); border-radius: 10px; margin-bottom: 0.5rem; }
.hm-report { margin-top: 1rem; max-width: 44rem; }
.hm-report summary { cursor: pointer; color: var(--muted); }
.hm-report input { width: 100%; max-width: 28rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line-warm); border-radius: 8px; margin: 0.3rem 0; }
.hd-poster-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0 1rem; }
.hl-img .housing-tag, .hd-head .housing-tag { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.hl-card.is-seeking .hl-img { aspect-ratio: auto; height: 4.5rem; }
.hl-card.is-seeking .hl-img:has(img) { aspect-ratio: 4 / 3; height: auto; }

/* Town picker, tidier: a pin, "Showing / All towns", and a chevron. */
.town-pick summary { align-items: center; flex-wrap: nowrap; gap: 0.6rem; }
.town-pick .tp-pin { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: var(--sea-deep); stroke-width: 2; stroke-linejoin: round; }
.town-pick .tp-now { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.town-pick .tp-label { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.town-pick .tp-now strong { font-weight: 650; overflow-wrap: anywhere; }
.town-pick .tp-chev { margin-left: auto; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--sea-wash); position: relative; }
.town-pick .tp-chev::before { content: ""; position: absolute; left: 50%; top: 45%; width: 0.42rem; height: 0.42rem; border-right: 2px solid var(--sea-deep); border-bottom: 2px solid var(--sea-deep); transform: translate(-50%, -50%) rotate(45deg); transition: transform 0.15s; }
.town-pick[open] .tp-chev::before { transform: translate(-50%, -20%) rotate(-135deg); }
.town-pick summary:hover .tp-chev { background: var(--sea-light); }
.rail-towns .town-pick { border-left-width: 1px; border-left-color: var(--line); }
.rail-add { margin: 0; padding: 0.5rem 0.9rem 0.7rem; font-size: 0.85rem; color: var(--muted); border-top: 1px dashed var(--line); }
.rail-add a { color: var(--sea-deep); font-weight: 600; }

/* ============================================================
   PLACES: statuses, owner tools, quick check, import
   Badge colours: Community verified blue, Claimed green, Trusted
   deep slate with a star. Sun-gold stays reserved for paid slots.
   ============================================================ */
.pbadge { display: inline-flex; align-items: center; gap: 0.3em; margin-left: 0.3rem; padding: 0.05rem 0.55rem 0.05rem 0.45rem; border-radius: 999px;
  font: 650 0.7rem/1.6 var(--sans); vertical-align: middle; white-space: nowrap; }
.pbadge::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.pbadge.b-community { background: #E3EEFB; color: #2F5C99; }
.pbadge.b-claimed   { background: #E4F1E6; color: #2F7A3D; }
.pbadge.b-trusted   { background: var(--ink); color: #fff; }
.pbadge.b-trusted::before { content: "\2605"; width: auto; height: auto; border-radius: 0; background: none; font-size: 0.9em; line-height: 1; }
.pbadge.b-none      { background: #EEF2F1; color: var(--muted); margin-left: 0; }
.pbadge.b-none::before { background: transparent; border: 1.5px dashed currentColor; }
.lede .pbadge:first-child, .pl-badges .pbadge, .qc-card .pbadge { margin-left: 0; }
.pl-badges { margin: 0.5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
p.pl-badges { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pl-badges.full li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.pl-now { font-weight: 650; }
.pl-now.is-open { color: var(--fig); }
.pl-now.is-shut { color: var(--clay); }
.card .meta .pl-now + .rating::before { content: " · "; color: var(--muted); font-weight: 400; }

.pl-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.4rem; margin: 1rem 0; border-radius: var(--radius); overflow: hidden; }
.pl-gallery.one { grid-template-columns: 1fr; }
.pl-gallery .pl-ph { display: block; aspect-ratio: 4 / 3; background: var(--sea-wash); }
.pl-gallery .pl-ph.first { grid-row: span 2; aspect-ratio: auto; }
.pl-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-gallery .pl-ph:nth-child(n+6) { display: none; }
@media (max-width: 40rem) { .pl-gallery { grid-template-columns: 1fr 1fr; } .pl-gallery .pl-ph.first { grid-column: span 2; grid-row: auto; } }

.pl-socials a { margin-right: 0.8rem; }
.pl-hours { margin: 1.2rem 0 0; }
.pl-hours h2 { font: 600 1.05rem/1.3 var(--sans); margin: 0 0 0.4rem; }
.pl-hours table { border-collapse: collapse; font-size: 0.92rem; }
.pl-hours th { text-align: left; font-weight: 500; padding: 0.15rem 1.2rem 0.15rem 0; color: var(--muted); }
.pl-hours td { padding: 0.15rem 0; }
.pl-hours tr.today th, .pl-hours tr.today td { color: var(--ink); font-weight: 700; }
.pl-claim-box { margin: 1.2rem 0 0; padding: 0.8rem 1rem; border-radius: var(--radius); background: var(--sea-wash); font-size: 0.92rem; }
.pl-claim-box p { margin: 0; }
.pl-admin-bar { margin: 1rem 0 0; padding: 0.6rem 0.8rem; border: 1px dashed var(--line-warm); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pl-admin-bar input { flex: 1 1 14rem; padding: 0.3rem 0.6rem; border: 1px solid var(--line-warm); border-radius: 8px; font: inherit; font-size: 0.85rem; }
.pl-source { margin-top: 1.2rem; }

.card.has-ph { display: grid; grid-template-columns: 7.5rem 1fr; column-gap: 1rem; }
.card.has-ph > * { grid-column: 2; }
.card.has-ph > .card-ph { grid-column: 1; grid-row: 1 / span 8; align-self: start; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 1; }
.card.has-ph > .card-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card.has-ph > .tag { grid-column: 1 / -1; }
@media (max-width: 30rem) { .card.has-ph { grid-template-columns: 5rem 1fr; } }

.pl-unchecked { margin: 1.8rem 0 0; }
.pl-unchecked h2 { font: 500 1.3rem/1.2 var(--display); margin: 0 0 0.3rem; }
.cards.compact .card { padding: 0.7rem 0.9rem; }
.cards.compact .card .actions { margin-top: 0.45rem; }
.cards.compact .card .actions a { padding: 0.2rem 0.6rem; font-size: 0.8rem; }
.cards.compact .unverified { margin-top: 0.5rem; padding-top: 0.5rem; }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1.5rem 0; font-size: 0.92rem; }

.rail-check { margin-top: 0.3rem; }
.rail-check a { font-weight: 650; }
.qc-callout { margin: 1rem 0; padding: 1rem 1.1rem; border-radius: var(--radius); background: #E3EEFB; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; }
.qc-callout p { margin: 0; flex: 1 1 18rem; }
.qc-callout p:last-child { flex: 0 0 auto; }

.qc-card { max-width: 36rem; }
.qc-card h2 { margin: 0.2rem 0 0.3rem; font: 500 1.6rem/1.2 var(--display); }
.qc-card h2 a { color: var(--ink); text-decoration: none; }
.qc-kind { margin: 0; }
.qc-answers { display: grid; gap: 0.5rem; margin: 1rem 0 0.6rem; }
.qc-answers .vote { text-align: left; padding: 0.7rem 1rem; font-size: 0.98rem; }
.qc-answers .small-btn { justify-self: start; }
.qc-q { margin: 0; font-weight: 650; }

.pl-perks { padding-left: 1.2rem; }
.pl-perks li { margin: 0.3rem 0; }
.pl-steps li { margin: 0.35rem 0; }
.pl-code { font: 700 1.15em/1 var(--sans); letter-spacing: 0.08em; padding: 0.15rem 0.5rem; border-radius: 8px; background: var(--sand); white-space: nowrap; }
.pl-posttext { width: 100%; font: inherit; padding: 0.6rem; border: 1px solid var(--line-warm); border-radius: 10px; background: #fff; }
.pl-claim-form fieldset, .pl-manage fieldset { border: 0; padding: 0; margin: 1rem 0; }
.pl-claim-form legend, .pl-manage legend { font-weight: 650; margin-bottom: 0.3rem; }
.pl-claim-form label:not(.check), .pl-manage label:not(.check) { display: block; margin: 0.8rem 0; font-weight: 600; }
.pl-claim-form label small, .pl-manage label small { display: block; font-weight: 400; color: var(--muted); }
.pl-claim-form input:not([type=radio]):not([type=checkbox]), .pl-claim-form textarea,
.pl-manage input:not([type=checkbox]):not([type=time]), .pl-manage textarea, .pl-manage select {
  display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.65rem; border: 1px solid var(--line-warm); border-radius: 10px; font: inherit; font-weight: 400; background: #fff; }
.pl-claim-form .check, .pl-manage .check { display: flex; gap: 0.5rem; align-items: baseline; margin: 0.35rem 0; }
.field-error { display: block; color: var(--clay); font-weight: 600; font-size: 0.85rem; margin-top: 0.2rem; }
.pl-wait { display: block; font-weight: 500; font-size: 0.82rem; color: #855C14; background: var(--sand); border-radius: 8px; padding: 0.2rem 0.5rem; margin-top: 0.3rem; }
.pl-hours-edit table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.pl-hours-edit th, .pl-hours-edit td { padding: 0.2rem 0.3rem; text-align: left; }
.pl-hours-edit thead th { font-weight: 600; color: var(--muted); font-size: 0.78rem; }
.pl-hours-edit input[type=time] { padding: 0.25rem 0.3rem; border: 1px solid var(--line-warm); border-radius: 8px; font: inherit; width: 100%; min-width: 5.5rem; }
.pl-hours-edit input[type=time]:disabled { opacity: 0.35; }
@media (max-width: 40rem) {
  .pl-hours-edit thead { display: none; }
  .pl-hours-edit tr { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.4rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
  .pl-hours-edit tr th { grid-column: 1; }
  .pl-hours-edit tr td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .pl-hours-edit tr td:nth-child(n+3) { grid-column: span 1; }
}
.pl-social-grid, .pl-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1rem; }
.pl-langs { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.pl-stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.6rem; }
.pl-stat-row div { background: var(--sea-wash); border-radius: 12px; padding: 0.6rem 0.8rem; }
.pl-stat-row strong { display: block; font: 600 1.6rem/1.1 var(--display); }
.pl-stat-row span { font-size: 0.85rem; }
.pl-stat-row small { display: block; color: var(--muted); font-size: 0.72rem; }
.pl-weeks { display: flex; gap: 0.3rem; align-items: flex-end; height: 6rem; margin: 1rem 0 0.4rem; }
.pl-wk { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.pl-wk .bar { width: 100%; max-width: 2.2rem; background: var(--sea); border-radius: 4px 4px 0 0; min-height: 2px; }
.pl-wk small { font-size: 0.65rem; color: var(--muted); }
.pl-wk .bar.h0 { height: 2px; } .pl-wk .bar.h1 { height: 10%; } .pl-wk .bar.h2 { height: 20%; } .pl-wk .bar.h3 { height: 30%; }
.pl-wk .bar.h4 { height: 40%; } .pl-wk .bar.h5 { height: 50%; } .pl-wk .bar.h6 { height: 60%; } .pl-wk .bar.h7 { height: 70%; }
.pl-wk .bar.h8 { height: 80%; } .pl-wk .bar.h9 { height: 90%; } .pl-wk .bar.h10 { height: 100%; }

/* Admin: places */
.gn-tabs .pill.mini { background: var(--clay); }
.ap-claim h2 { margin-top: 0; }
.ap-checklist { margin: 0.5rem 0; padding-left: 1.2rem; color: var(--muted); }
.ap-decide { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ap-decide input { flex: 1 1 16rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line-warm); border-radius: 10px; font: inherit; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ap-table th, .ap-table td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.ap-inline { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
.ap-inline select { padding: 0.4rem 0.6rem; border-radius: 10px; border: 1px solid var(--line-warm); font: inherit; }
.ap-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; position: sticky; top: 0; background: var(--paper); padding: 0.5rem 0; z-index: 2; }
.ap-group { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin: 0.8rem 0; padding: 0.5rem 0.9rem; }
.ap-group legend { font-weight: 700; padding: 0 0.3rem; }
.ap-cands { list-style: none; margin: 0; padding: 0; columns: 2 22rem; column-gap: 1.5rem; }
.ap-cands li { break-inside: avoid; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.ap-cands label.check { display: flex; gap: 0.5rem; align-items: flex-start; }
.ap-cands span > span { display: block; }
.ap-cands li.dupe { opacity: 0.7; }
.ap-dupe { color: #855C14; }
a.strong { font-weight: 700; }
.cards.compact .unverified { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; border-top: 0; margin-top: 0.35rem; padding-top: 0; }
.cards.compact .unv-hint, .cards.compact .unv-actions { margin: 0; }
.cards.compact .unv-actions .vote { padding: 0.2rem 0.6rem; font-size: 0.8rem; }
.cards.compact .card h3 { font-size: 1.05rem; }
.pl-gallery { grid-auto-rows: 9rem; }
.pl-gallery .pl-ph, .pl-gallery .pl-ph.first { aspect-ratio: auto; height: 100%; }
.pl-gallery.one { grid-auto-rows: 20rem; }
.pl-gallery.one .pl-ph.first { grid-row: auto; }
@media (max-width: 40rem) { .pl-gallery { grid-auto-rows: 7rem; } .pl-gallery .pl-ph.first { grid-row: span 2; } }
.pl-manage .panel, .panel.pl-stats, .panel#photos, .panel.ap-claim, .qc-card.panel { max-width: 46rem; }
.pl-hours-edit { overflow-x: auto; }
.pl-manage label.pl-closed { display: inline-flex; gap: 0.3rem; align-items: center; margin: 0; font-weight: 400; font-size: 0.85rem; }
.pl-closed span { display: none; }
@media (max-width: 40rem) { .pl-closed span { display: inline; } }
.gn-here .button.big { font-size: 1.25rem; padding: 0.9rem 2.4rem; }
.gn-here-form label { display: block; margin: 0.8rem 0; font-weight: 600; max-width: 22rem; }
.gn-here-form input { display: block; width: 100%; margin-top: 0.3rem; padding: 0.6rem 0.7rem; border: 1px solid var(--line-warm); border-radius: 10px; font: inherit; }
.gn-checkin-bar { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin: 1rem 0; padding: 0.8rem 1rem; border-radius: var(--radius); background: var(--sea-wash); }

/* Bot trap on forms that send email (src/botguard.php): off-screen, not display:none, so bots still see it. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- Home: the banner sits above the menu on phones, and in the main
       column on wider screens (views/layout.php $pageTop) --- */
.page-top { padding-top: 1rem; min-width: 0; }
.page-top .hero { margin-bottom: 0; }
@media (min-width: 56.01rem) {
  .page-top { padding-top: 1.5rem; }
  /* The side columns span every row; without this their height is shared out
     across the rows and opens a gap under the banner. Extra height goes to the last row. */
  .shell.has-top { grid-template-rows: auto auto 1fr; }
  .shell.has-top > .page-top { grid-column: 2; grid-row: 1; }
  .shell.has-top > .sidebar { grid-column: 1; grid-row: 1 / span 3; }
  .shell.has-top > main { grid-column: 2; grid-row: 2; padding-top: 0; }
  .shell.has-top > .sidebar-right { grid-column: 2; grid-row: 3; }
}
@media (min-width: 75rem) {
  .shell.has-top { grid-template-rows: auto 1fr; }
  .shell.has-top > .sidebar { grid-row: 1 / span 2; }
  .shell.has-top > .sidebar-right { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 56rem) {
  .shell.has-top { gap: 1rem; }
  .shell.has-top > .sidebar { padding-top: 0; }
  .wide-only { display: none; }
  /* Open on the home page: no toggle, just the menu. */
  .sidebar.rail-open-phone > .side-wrap > summary { display: none; }
  .sidebar.rail-open-phone .side-inner { padding-top: 0.9rem; }
}

/* --- "Do you know these places?" card (views/_qc-nudge.php) --- */
.qc-card-side { background: #E3EEFB; }
.qc-side-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.qc-side-name { margin: 0 0 0.4rem; line-height: 1.35; }
.qc-side-name a { font-weight: 650; color: var(--ink); }
.qc-side-name .small { display: block; }
.qc-side-form { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.qc-side-form .small-btn.quiet { border-style: dashed; color: var(--muted); }
.qc-side-msg { margin: 0.6rem 0 0; }
.qc-side-msg:empty { display: none; }
.qc-side-msg.bad { color: var(--clay); }
.qc-side-later { display: flex; justify-content: space-between; align-items: center; margin: 0.7rem 0 0; }
.qc-side-later .link { padding: 0; font-size: 0.85rem; color: var(--muted); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.qc-side-item[hidden] { display: none; }

/* --- Admin: People (/admin/people/) ------------------------------------ */
.people-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1rem; }
.people-list { min-width: 56rem; }
.people-list td.num, .people-list th.num { text-align: right; white-space: nowrap; }
.people-list .tag { margin-left: 0.3rem; font-size: 0.72rem; }
.people-sort a, .people-sort strong { margin-left: 0.5rem; }
.people-items { list-style: none; padding: 0; margin: 0 0 1rem; }
.people-items li { padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.people-recent { margin: 0.5rem 0 1.5rem; }
.people-recent summary { cursor: pointer; font-weight: 600; }

/* --- Mexican Train: the double each round started with ------------------ */
.gn-engine { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.4rem 0 0.2rem; }
.gn-engine label { font-weight: 600; font-size: 1.05rem; }
.gn-engine select { font: 700 1.3rem/1 var(--display); padding: 0.35rem 0.5rem; min-width: 5.5rem; }
.gn-left { margin: 0.2rem 0 0.4rem; }
.gn-sheet th .gn-dbl { display: inline-block; margin-top: 0.15rem; padding: 0 0.25rem; border: 1px solid var(--line-warm, var(--line));
  border-radius: 4px; font-size: 0.72rem; font-weight: 700; color: var(--ink, inherit); white-space: nowrap; }

/* --- SpeedSocial: events run by an independent organiser --------------- */
/* --org is the organiser's accent colour, set on the element (presets in ss_org_colours()). */
.org-banner { --org: var(--sea); display: flex; gap: 1rem; align-items: center; margin: 0 0 1.2rem; padding: 1rem 1.2rem;
  background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--org); border-radius: var(--radius); box-shadow: var(--shadow); }
.org-banner p { margin: 0; }
.org-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; flex: none; background: var(--paper); }
.org-by { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.org-name { font: 700 1.35rem/1.2 var(--display); color: var(--org); }
.org-tag { margin-top: 0.15rem !important; color: var(--ink); }
.org-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.35rem !important; font-size: 0.9rem; color: var(--muted); }
.org-links a { color: var(--org); font-weight: 600; overflow-wrap: anywhere; }
.org-refund { background: var(--sand); border-radius: 12px; padding: 0.6rem 0.9rem; font-size: 0.93rem; }
.org-role { background: var(--sea-wash); border-radius: 12px; padding: 0.6rem 0.9rem; font-size: 0.93rem; }
.org-foot { color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.8rem; margin-top: 1.5rem; }
.org-by-line { color: var(--muted); font-weight: 600; }
.paybox.org-pay { --org: var(--sea); border-left: 5px solid var(--org); }
@media (max-width: 30rem) { .org-banner { flex-direction: column; align-items: flex-start; } }

/* Admin event form: organiser fields only when "independent organiser" is picked. */
.org-fields .org-only { margin-top: 0.6rem; }
.org-fields:has(input[name="org_mode"][value="site"]:checked) .org-only { display: none; }

/* Host page, organiser section */
.org-panel { border-top: 5px solid var(--sea); }
.org-panel h3 { margin-top: 1.4rem; }
.org-logo-row { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; margin: 0.4rem 0 1rem; }
.org-payments select { font: inherit; padding: 0.25rem 0.4rem; }
.org-payments form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 30rem) { .org-payments li { grid-template-columns: 3rem 1fr; } .org-payments form { grid-column: 1 / -1; } }

/* --- Queue: what each report says ------------------------------------- */
.qreports { margin: 0.6rem 0 0.4rem; padding: 0.6rem 0.8rem; background: #FBEDEA; border-radius: 10px; }
.qreports ul { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.qreports li { margin: 0.2rem 0; }
.qrby { display: block; font-size: 0.8rem; color: var(--muted); }
.qreports form { display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; align-items: center; margin: 0; }
.qrhint { font-size: 0.8rem; color: var(--muted); }

/* --- Directory: find by name, and the folded-away map ------------------- */
.dir-find { margin: 0 0 0.9rem; }
.dir-find label { display: block; font-weight: 600; margin: 0 0 0.3rem; }
.dir-find-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.dir-find input[type=search] { flex: 1 1 14rem; min-width: 0; font: inherit; padding: 0.55rem 0.8rem;
  border: 1px solid var(--line-warm); border-radius: 999px; background: var(--card); }
.dir-find input[type=search]:focus { outline: 2px solid var(--sea-light); border-color: var(--sea); }
.dir-find-clear { font-size: 0.9rem; }
.dir-find-note { margin: 0.35rem 0 0; }
.cards > li[hidden], hr.split[hidden], .dir-none[hidden] { display: none !important; }
.dir-map { margin: 0 0 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.dir-map > summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 600; color: var(--sea-deep); list-style-position: inside; }
.dir-map[open] > summary { border-bottom: 1px solid var(--line); }
.dir-map-box { height: 22rem; border-radius: 0 0 var(--radius) var(--radius); }
.dir-map[open] .dir-map-box { margin: 0; }
.dir-map-note { margin: 0.4rem 1rem 0.6rem; }
@media (max-width: 40rem) { .dir-map-box { height: 17rem; } }

/* --- Manage a place: the map pin picker -------------------------------- */
.pl-loc { margin: 0 0 1rem; }
.pl-loc-map { height: 18rem; margin: 0.5rem 0 0.3rem; border-radius: 12px; border: 1px solid var(--line); }
.pl-loc-map[hidden], .pl-loc-note[hidden] { display: none; }
.dir-find-clear[hidden], .dir-map[hidden] { display: none !important; }

/* --- Individual services ------------------------------------------------ */
.pill.indiv { background: #F3E8F6; color: #6B2F78; border-color: #E2CBE8; }
.svc-facts { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin: 0.2rem 0 0.4rem; color: var(--ink); }
.svc-facts span + span::before { content: "· "; color: var(--muted); }
.svc-cta { background: #F8F1FA; border: 1px solid #E8D6EE; border-radius: 12px; padding: 0.6rem 0.9rem; font-size: 0.93rem; }
.svc-review form input[name=note] { flex: 1 1 14rem; min-width: 0; }

/* --- Trips ------------------------------------------------------------- */
.trip-actions { margin: 0 0 0.8rem; }
.trip-filter { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; }
.trip-when { margin: 0 0 0.2rem; font-weight: 700; color: var(--sea-deep); font-size: 0.9rem; }
.trip-cards .meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; color: var(--muted); }
.trip-dests { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.2rem 1rem; margin: 0.4rem 0 0.8rem; }
.trip-join h2 { margin-top: 0; }
.trip-note { margin-top: 1.2rem; }
.trip-route { margin: 0 0 0.25rem; font-weight: 650; color: var(--ink); }
.trip-route.big { font: 700 1.15rem/1.3 var(--display); color: var(--sea-deep); margin: 0.2rem 0; }
.trip-filter { align-items: center; }
.trip-filter select { max-width: 13rem; }
.trip-dests-set { border: 0; padding: 0; margin: 0.6rem 0 0.8rem; }
.trip-dests-set legend { font-weight: 650; padding: 0; margin-bottom: 0.2rem; }
.trip-dests-kind { margin: 0.4rem 0 0; }
.trip-dests label.check { display: flex; align-items: center; justify-content: flex-start; gap: 0.45rem; margin: 0; }
.trip-dests label.check input { width: auto; flex: none; margin: 0; }
.trip-join label.check, .trip-form label.check { display: flex; align-items: flex-start; gap: 0.5rem; }
.trip-join label.check input, .trip-form label.check input { width: auto; flex: none; margin-top: 0.25rem; }

/* --- Beta label ---------------------------------------------------------- */
.beta-tag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: #F2B567; color: #4A2E05;
  font: 800 0.68rem/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; vertical-align: middle; }
.beta-tag:hover { background: #EE9F4F; color: #3A2404; }
.brand .beta-tag { margin-left: -0.15rem; flex: none; }
.beta-tag.in-h { font-size: 0.62rem; margin-left: 0.5rem; position: relative; top: -0.25em; }
.beta-tag.small-tag { font-size: 0.6rem; padding: 0 0.4rem; }
.beta-foot { color: var(--muted); }

/* --- Manage a place: other categories ---------------------------------- */
.pl-extra { margin: 0.4rem 0 1rem; border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem 0.8rem; background: var(--card); }
.pl-extra > summary { cursor: pointer; font-weight: 600; }
.pl-extra-group { border: 0; padding: 0; margin: 0.6rem 0 0; }
.pl-extra-group legend { font-weight: 650; font-size: 0.9rem; padding: 0; }

/* Phone and email are for signed-in members only. */
.contact-signin { font-size: 0.88rem; }

/* --- Place page extras --------------------------------------------------- */
.pl-know, .pl-mapbox, .pl-nearby { margin: 1.4rem 0 0; }
.pl-know h2, .pl-mapbox h2, .pl-nearby h2 { font: 600 1.05rem/1.3 var(--sans); margin: 0 0 0.5rem; }
.pl-chips { list-style: none; padding: 0; margin: 0 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pl-chips li { background: var(--sea-wash); color: var(--sea-deep); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.88rem; font-weight: 600; }
.pl-map { height: 15rem; border-radius: 12px; border: 1px solid var(--line); background: var(--sea-wash); margin: 0 0 0.4rem; }
.pl-fill { margin: 1.2rem 0 0; padding: 0.8rem 1rem; border-radius: 12px; background: var(--sand); }
.pl-fill p { margin: 0 0 0.5rem; }
.pl-fill p:last-child { margin: 0; }
.pl-suggest-line { margin: 1.2rem 0 0.4rem; }
.pl-nearby ul { list-style: none; padding: 0; margin: 0; }
.pl-nearby li { padding: 0.35rem 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; justify-content: space-between; }
.pl-nearby li:first-child { border-top: 0; }
a.vote.down { display: inline-block; text-decoration: none; }

/* --- Deals (pilot) --- */
.deal-tier { display: inline-block; font: 700 0.72rem var(--sans); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--sea-wash); color: var(--sea-deep); vertical-align: middle; }
.deal-tier.t-regular { background: #E6F1E7; color: #2F6B3A; }
.deal-tier.t-insider { background: var(--sand); color: #8A5418; }
.deal-tier.t-ambassador { background: #2B3A40; color: #F6D9A8; }
.deal-me-pts { font-size: 1.15rem; margin: 0 0 0.6rem; }
.deal-me-pts strong { font-family: 'Bricolage', var(--sans); font-size: 2rem; color: var(--sea-deep); }
.deal-progress { width: 100%; height: 0.7rem; accent-color: var(--sea); }
.deal-ladder { list-style: none; padding: 0; margin: 0.8rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.deal-ladder li { opacity: 0.55; display: flex; align-items: center; gap: 0.35rem; }
.deal-ladder li.reached { opacity: 1; }
.deal-ladder li.reached::before { content: "✓"; color: var(--fig); font-weight: 700; }
.deal-how ol { margin: 0; padding-left: 1.2rem; }
.deal-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.8rem; }
.deal-card h3 { margin: 0.3rem 0 0.2rem; }
.deal-card-top { margin: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.deal-card-place { margin: 0 0 0.3rem; font-weight: 600; }
.deal-small-print { color: var(--muted); border-left: 3px solid var(--line-warm); padding-left: 0.6rem; }
.deal-state { font-weight: 600; color: var(--sea-deep); }
.deal-cards.locked .deal-card, .deal-card.not-now { opacity: 0.75; }
.deal-cards.locked .deal-state, .deal-card.not-now .deal-state { color: var(--muted); }
.deal-card.ready { border-color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); }
.deal-card form { margin: 0.6rem 0 0; }
.deal-tier-table, .deal-uses { width: 100%; border-collapse: collapse; margin: 0.6rem 0; }
.deal-tier-table th, .deal-tier-table td, .deal-uses th, .deal-uses td { text-align: left; padding: 0.4rem 0.5rem 0.4rem 0; border-top: 1px solid var(--line); vertical-align: top; }
.deal-tier-table th, .deal-uses th { font-size: 0.8rem; color: var(--muted); border-top: 0; }
.deal-own-list { list-style: none; padding: 0; margin: 0; }
.deal-own { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.deal-own:first-child { border-top: 0; padding-top: 0; }
.deal-own h3 { margin: 0.3rem 0 0.2rem; }
.deal-own.paused h3, .deal-own.ended h3 { color: var(--muted); }
.deal-status { font-size: 0.78rem; font-weight: 600; }
.deal-status.s-active { color: var(--fig); }
.deal-status.s-paused { color: #8A5418; }
.deal-status.s-ended { color: var(--muted); }
.deal-own-stats { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.deal-own-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.deal-own-actions .inline-form { margin: 0; }
.deal-own-actions a.small-btn { text-decoration: none; }
.deal-ideas { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0.4rem; }
.chip-btn { font: 500 0.8rem var(--sans); padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px dashed var(--line-warm); background: #fff; color: var(--ink); cursor: pointer; }
.chip-btn.on { border-style: solid; border-color: var(--sea); background: var(--sea-wash); }
.deal-days { border: 0; padding: 0; margin: 0.6rem 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.deal-days legend { font-weight: 650; padding: 0; margin-bottom: 0.3rem; width: 100%; }
.deal-days label.check { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.deal-days label.check input { width: auto; margin: 0; }
.pl-deals { margin: 1.4rem 0; }
/* Deal cards look like a coupon: gold perforated edge with punched notches at the sides. */
.card.deal-coupon { --deal-gold: #C59A2E; position: relative; background: #FFFCF2; border: 2px dashed var(--deal-gold); border-left: 2px dashed var(--deal-gold); border-radius: 14px; padding: 0.7rem 1rem 0.75rem; overflow: visible; }
.deal-coupon h3 { margin: 0.2rem 0 0.05rem; }
.deal-coupon .deal-card-place { margin: 0 0 0.1rem; font-size: 0.92rem; }
.deal-unlocked { margin-left: auto; font: 700 0.72rem var(--sans); color: var(--fig); }
.deal-coupon .deal-state { margin: 0.4rem 0 0; }
.deal-coupon .deal-small-print { margin: 0.35rem 0 0; }
.card.deal-coupon::before, .card.deal-coupon::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--paper); border: 2px dashed var(--deal-gold); box-sizing: border-box; }
.card.deal-coupon::before { left: -14px; clip-path: inset(0 0 0 calc(50% - 3px)); }
.card.deal-coupon::after { right: -14px; clip-path: inset(0 calc(50% - 3px) 0 0); }
.card.deal-coupon.ready { border-color: var(--deal-gold); box-shadow: 0 0 0 3px #F6E7BF, var(--shadow); }
.deal-terms { margin: 0.45rem 0 0; display: grid; gap: 0.15rem; }
.deal-terms > div { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.5rem; align-items: baseline; line-height: 1.3; }
.deal-terms .deal-use { margin-top: 0.3rem; padding-top: 0.35rem; border-top: 1px dashed #E8D49A; }
.deal-terms .deal-use dd { font-weight: 400; font-size: 0.86rem; }
.deal-terms dt { font: 700 0.68rem var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: #8A6A17; }
.deal-terms dd { margin: 0; font-weight: 600; }
.deal-terms .not-today dd { color: var(--clay); }
.deal-flag { display: inline-block; font: 700 0.7rem var(--sans); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.45rem; border-radius: 999px; background: #F7E7E3; color: var(--clay); vertical-align: 0.1em; }
.deal-coupon .deal-small-print { border-left-color: #E8D49A; }
/* Personal codes for online deals */
.deal-code { font: 700 1.5rem/1.2 var(--mono); letter-spacing: 0.08em; color: var(--ink); margin: 0.1rem 0; }
.deal-code-box { margin: 0.55rem 0 0; padding: 0.6rem 0.8rem; background: #fff; border: 2px solid var(--deal-gold, #C59A2E); border-radius: 10px; text-align: center; }
.deal-code-box p { margin: 0; }
.deal-get-code { margin: 0.55rem 0 0; }
.deal-uses code { white-space: nowrap; }
.deal-my-codes { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: 0.6rem; }
.deal-my-codes li { display: flex; gap: 0.9rem; align-items: center; background: #FFFCF2; border: 2px dashed #C59A2E; border-radius: 12px; padding: 0.6rem 0.9rem; }
.deal-code.small-code { font-size: 1.1rem; white-space: nowrap; }
.deal-mode { border: 0; padding: 0; margin: 0.8rem 0; display: grid; gap: 0.5rem; }
.deal-mode legend { font-weight: 600; margin-bottom: 0.3rem; }
.deal-mode label.check { align-items: flex-start; }
.deal-online-fields { border-left: 3px solid #E8D49A; padding-left: 0.8rem; margin: 0.2rem 0 0.8rem; }
.deal-check-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 0 0.8rem; }
.deal-check-form input { font: 600 1.05rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; max-width: 14rem; }
.deal-code-result { border-radius: 10px; padding: 0.7rem 0.9rem; margin: 0 0 1rem; border: 2px solid var(--line); }
.deal-code-result p { margin: 0.15rem 0; }
.deal-code-result.s-open { border-color: var(--fig); background: #F0F7EE; }
.deal-code-result.s-used, .deal-code-result.s-expired { border-color: var(--clay); background: #FBF0EE; }
.deal-code-result form { margin: 0.5rem 0 0; }



/* The printable till sheet */
.deal-sheet { max-width: 30rem; margin: 1rem auto; padding: 2rem 1.5rem; text-align: center; background: #fff; border: 2px solid var(--sea); border-radius: 1.2rem; }
.deal-sheet-brand { font: 700 1rem 'Bricolage', var(--sans); color: var(--sea-deep); letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
.deal-sheet h1 { font-size: 1.7rem; margin: 0.4rem 0 1rem; }
.deal-qr { width: min(18rem, 80vw); margin: 0 auto; }
.deal-qr svg { width: 100%; height: auto; display: block; }
.deal-sheet-how { font-size: 1.05rem; margin: 1rem 0 0.4rem; }
.deal-sheet-url { font: 0.85rem var(--mono); color: var(--muted); word-break: break-all; }
.deal-sheet-foot { font-size: 0.8rem; color: var(--muted); margin-bottom: 0; }
@media print {
  body.print-sheet .masthead, body.print-sheet .sidebar, body.print-sheet footer, body.print-sheet .no-print, body.print-sheet .alert { display: none !important; }
  body.print-sheet main { margin: 0; padding: 0; }
  body.print-sheet .deal-sheet { margin: 0 auto; border-width: 3px; }
  body.print-sheet .deal-sheet + .deal-sheet { break-before: page; page-break-before: always; }
}
.deal-sheets-admin .deal-sheet + .deal-sheet { margin-top: 2rem; }

/* The live deal screen */
.deal-live { position: relative; overflow: hidden; max-width: 28rem; margin: 0.5rem auto 1rem; padding: 1.4rem 1.2rem 1.2rem; text-align: center; border-radius: 1.2rem; background: #fff; border: 3px solid var(--sea); }
.deal-live-place { font: 700 1.3rem 'Bricolage', var(--sans); margin: 0; }
.deal-live-band { height: 0.6rem; margin: 0.8rem -1.2rem; background: linear-gradient(90deg, var(--sea), var(--sun), var(--fig), var(--sea-light), var(--sea)); background-size: 300% 100%; animation: deal-band 3s linear infinite; }
@keyframes deal-band { from { background-position: 0 0; } to { background-position: 300% 0; } }
.deal-live-tier { margin: 0; font-size: 0.85rem; color: var(--muted); }
.deal-live-title { font-size: 1.8rem; margin: 0.4rem 0; line-height: 1.15; }
.deal-live-who { font-size: 1.2rem; font-weight: 600; margin: 0.2rem 0 0.6rem; }
.deal-live-code { font: 700 2.4rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.25em; margin: 0.2rem 0; color: var(--sea-deep); }
.deal-live-clock { font: 700 2rem ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; margin: 0.3rem 0 0; }
.deal-live.on .deal-live-clock { animation: deal-pulse 1s ease-in-out infinite; }
@keyframes deal-pulse { 50% { color: var(--sea); } }
.deal-live-date { margin: 0 0 0.6rem; color: var(--muted); }
.deal-live-status { font-weight: 600; margin: 0.4rem 0; }
.deal-live .when-over { display: none; }
.deal-live.over { border-color: var(--line-warm); background: var(--paper); }
.deal-live.over .when-on { display: none; }
.deal-live.over .when-over { display: inline; color: var(--clay); }
.deal-live.over .deal-live-band { animation: none; background: var(--line-warm); }
.deal-live.over .deal-live-code, .deal-live.over .deal-live-title { color: var(--muted); text-decoration: line-through; }
.deal-live-print { font-size: 0.85rem; color: var(--muted); margin: 0.6rem 0 0; }
.deal-live-help { max-width: 28rem; margin: 0 auto 0.6rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .deal-live-band { animation-duration: 12s; } }
.deal-form label.check { display: flex; align-items: flex-start; gap: 0.5rem; }
.deal-form label.check input { width: auto; flex: none; margin-top: 0.25rem; }
.deal-form .deal-days label.check input { margin-top: 0; }
.deal-form .deal-days label.check { align-items: center; }
.stack .deal-ideas button.chip-btn { display: inline-block; width: auto; font: 500 0.8rem var(--sans); padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px dashed var(--line-warm); background: #fff; color: var(--ink); margin: 0; }
.stack .deal-ideas button.chip-btn.on { border-style: solid; border-color: var(--sea); background: var(--sea-wash); color: var(--sea-deep); }
.deal-live-code { background: var(--sand); border-radius: 0.6rem; padding: 0.2rem 0 0.2rem 0.25em; display: inline-block; min-width: 70%; }
.deal-profit { background: var(--sand); border-radius: 0.6rem; padding: 0.6rem 0.8rem; margin: 0.4rem 0 0.8rem; }
.season-top-list { list-style: none; padding: 0; margin: 0.3rem 0 0.5rem; }
.season-top-list li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.22rem 0; border-top: 1px solid var(--line); font-size: 0.9rem; }
.season-top-list li:first-child { border-top: 0; }
.season-top-list li.me { font-weight: 700; color: var(--sea-deep); }
.season-top-list .st-rank { width: 1.4rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.season-top-list .st-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.season-top-list .st-pts { font-variant-numeric: tabular-nums; font-weight: 600; }
.deal-limit-help { margin: -0.3rem 0 0.6rem; color: var(--muted); }
/* Meeple Mondays: the WhatsApp box sits in the right column on wide screens,
   and stays in the page on phones (where the right column comes last). */
@media (min-width: 56.01rem) { .phone-only { display: none !important; } }
.gn-join-side { display: block; margin: 0 0 1rem; padding: 1rem 1.1rem; }
@media (max-width: 56rem) { .gn-join-side { display: none; } }
.gn-join-side h2 { font-size: 1.05rem; }
.gn-join-side p { font-size: 0.9rem; margin: 0 0 0.8rem; }
.gn-join-side .button { display: block; text-align: center; }
/* Editor's Pick and Community favorite badges, and the favorite button */
.pbadge.b-editor   { background: #3B2A55; color: #F6D9A8; }
.pbadge.b-editor::before { content: "\270E"; width: auto; height: auto; border-radius: 0; background: none; font-size: 0.9em; line-height: 1; }
.pbadge.b-favorite { background: #FBE3E0; color: #A63D33; }
.pbadge.b-favorite::before { content: "\2665"; width: auto; height: auto; border-radius: 0; background: none; font-size: 0.9em; line-height: 1; }
.pl-fav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; margin: 0.4rem 0 0.9rem; }
.pl-fav form { margin: 0; }
.pl-fav p { flex-basis: 100%; margin: 0; }
.fav-btn { display: inline-flex; align-items: center; gap: 0.35rem; font: 600 0.88rem var(--sans); padding: 0.35rem 0.85rem; border-radius: 999px;
  border: 1px solid #E8B4AE; background: #fff; color: #A63D33; cursor: pointer; }
.fav-btn span { font-size: 1.05em; line-height: 1; }
.fav-btn:hover { background: #FBE3E0; }
.fav-btn.on { background: #FBE3E0; border-color: #A63D33; }
.fav-btn.off { opacity: 0.55; cursor: default; }
.fav-btn.off:hover { background: #fff; }
.pl-admin-bar input[name="pick_note"] { min-width: 14rem; }
/* /deals: status and how-to in the right column */
.deals-side .howto { margin-bottom: 1rem; }
.deals-side .deal-me-pts strong { font-size: 1.6rem; }
.deals-side .deal-ladder { flex-direction: column; gap: 0.25rem; }
.deals-side .deal-how h2 { font-size: 1.05rem; }
.deal-me-mini { margin: 0 0 1rem; }
/* Welcome page (first sign-in) */
.welcome-name input { font: 1.1rem var(--sans); padding: 0.6rem 0.8rem; border: 1px solid var(--line-warm); border-radius: 10px; width: 100%; max-width: 24rem; background: #fff; }
.welcome-starts { margin: 1.5rem 0; }
.welcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.8rem; margin: 0.6rem 0 1rem; }
.welcome-card { display: flex; flex-direction: column; gap: 0.35rem; text-align: left; padding: 1rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line-warm);
  background: #fff; color: var(--ink); font: 0.92rem/1.4 var(--sans); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.welcome-card strong { font: 700 1.1rem 'Bricolage', var(--sans); color: var(--sea-deep); }
.welcome-card:hover, .welcome-card:focus-visible { border-color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); }
.welcome-nudge { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.welcome-starts button.link { background: none; border: 0; padding: 0; color: var(--sea-deep); text-decoration: underline; font: inherit; cursor: pointer; }
/* Account page: jump links and the deals line */
.acct-jump { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.acct-jump a { padding: 0.3rem 0.8rem; border-radius: 999px; background: #fff; border: 1px solid var(--line-warm); color: var(--ink); text-decoration: none; font-size: 0.85rem; font-weight: 600; }
.acct-jump a:hover { border-color: var(--sea); }
.acct-deals { background: var(--sea-wash); border-radius: 10px; padding: 0.6rem 0.8rem; font-size: 0.92rem; }
.account-grid .acct-card { scroll-margin-top: 1rem; }
/* Manage page: finish-your-listing checklist and the monthly email switch */
.pl-checklist progress { width: 100%; height: 0.7rem; accent-color: var(--sea); }
.pl-checklist ul { list-style: none; padding: 0; margin: 0.4rem 0 0; columns: 2 16rem; column-gap: 1.5rem; }
.pl-checklist li { padding: 0.2rem 0; break-inside: avoid; }
.pl-checklist li span { display: inline-block; width: 1.2em; color: var(--muted); }
.pl-checklist li.done { color: var(--muted); }
.pl-checklist li.done span { color: var(--fig); font-weight: 700; }
.pl-report-toggle { margin: 0.6rem 0 0; align-items: center; flex-wrap: wrap; }
.deal-sheet-pt { margin: -0.6rem 0 1rem; color: var(--muted); font-weight: 600; }
.deal-sheet-how.pt { color: #4a5b5a; font-size: 0.95rem; margin-top: 0; }
.lang-switch { margin: 0 0 0.6rem; font-size: 0.88rem; }
.lang-switch a { color: var(--sea-deep); }
/* Partner groups and check-in */
.grp-events { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.grp-events li { display: flex; gap: 0.9rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.grp-events li:first-child { border-top: 0; }
.grp-events li.cancelled .grp-ev > a { text-decoration: line-through; color: var(--muted); }
.grp-date { flex: none; width: 3.2rem; text-align: center; background: var(--sea-wash); border-radius: 10px; padding: 0.3rem 0; line-height: 1.1; }
.grp-date strong { display: block; font: 700 1.3rem 'Bricolage', var(--sans); color: var(--sea-deep); }
.grp-date span { font-size: 0.75rem; text-transform: uppercase; color: var(--muted); }
.grp-ev { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.grp-ev > a { font-weight: 650; }
.grp-cancel-tag { align-self: flex-start; font-size: 0.75rem; font-weight: 700; color: var(--clay); text-transform: uppercase; letter-spacing: 0.04em; }
.grp-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.3rem; }
.grp-tools .inline-form { margin: 0; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.grp-tools .small-btn { display: inline-block; margin: 0; font: 600 0.82rem/1.3 var(--sans); padding: 0.3rem 0.8rem; min-height: 0; box-shadow: none; }
.grp-tools a.small-btn { text-decoration: none; }
.grp-tools .small-btn.danger { background: #fff; color: var(--clay); border: 1px solid var(--clay); }
.grp-list, .grp-past { list-style: none; padding: 0; }
.grp-list li, .grp-past li { padding: 0.35rem 0; border-top: 1px solid var(--line); }
.grp-list li:first-child, .grp-past li:first-child { border-top: 0; }
.checkin { max-width: 32rem; margin: 0 auto 1rem; text-align: center; background: #fff; border-radius: 1.2rem; border: 3px solid var(--sea); padding: 1.4rem 1.2rem; }
.checkin-group { margin: 0; font: 700 0.9rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sea-deep); }
.checkin-title { margin: 0.3rem 0 0.1rem; font-size: 1.7rem; }
.checkin-when { margin: 0 0 1rem; color: var(--muted); }
.checkin-how { font-size: 1.05rem; }
.checkin-qr { width: min(20rem, 80vw); margin: 0 auto; }
.checkin-qr svg { width: 100%; height: auto; display: block; }
.checkin-code { margin: 0.6rem 0 0; }
.checkin-code strong { font: 700 1.3rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.15em; }
.checkin-count { font-size: 1.2rem; margin: 1rem 0 0.4rem; }
.checkin-n { font: 700 2rem 'Bricolage', var(--sans); color: var(--sea-deep); }
.checkin-names { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; }
.checkin-names li { background: var(--sea-wash); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.85rem; }
.checkin-result { max-width: 30rem; margin: 1rem auto; text-align: center; }
.checkin-big { font-size: 4rem; line-height: 1; margin: 0; color: var(--fig); }
.checkin-pts { font: 700 2.2rem 'Bricolage', var(--sans); color: var(--sea-deep); margin: 0.2rem 0 0.8rem; }
.checkin-event { margin: 0.6rem 0 0.2rem; }
.grp-on-event { background: var(--sea-wash); border-radius: var(--radius); padding: 0.8rem 1rem; margin: 0.8rem 0 1rem; } .grp-on-event p { margin: 0.2rem 0; }
/* --- Events menu: a dropdown with Game nights and Other sub-menus --- */
.nav-drop { position: relative; display: flex; }
.mainnav .nav-top { display: inline-flex; align-items: center; gap: 0.3rem; }
.mainnav .nav-top .caret { font-size: 0.75em; opacity: 0.7; }
.nav-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 60; min-width: 14rem; padding-top: 0.4rem; }
.nav-menu::before { content: ""; position: absolute; inset: 0.4rem 0 0 0; background: #fff; border: 1px solid var(--line-warm); border-radius: 14px; box-shadow: 0 10px 30px rgba(20, 45, 50, .14); z-index: -1; }
.nav-drop:hover > .nav-menu, .nav-drop:focus-within > .nav-menu, .nav-drop.open > .nav-menu { display: flex; flex-direction: column; padding: 0.7rem 0.4rem 0.4rem; }
.mainnav .nav-menu a { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; border-radius: 9px; padding: 0.45rem 0.7rem; font-weight: 550; white-space: nowrap; background: none; color: var(--ink); }
.mainnav .nav-menu a:hover, .mainnav .nav-menu a:focus-visible { background: var(--sea-wash); }
.mainnav .nav-menu a.nav-add { color: var(--sea-deep); border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 0.2rem; }
.nav-sub { position: relative; }
.nav-submenu { display: none; position: absolute; left: 100%; top: -0.4rem; min-width: 13rem; padding: 0.4rem; background: #fff; border: 1px solid var(--line-warm); border-radius: 14px; box-shadow: 0 10px 30px rgba(20, 45, 50, .14); }
.nav-sub:hover > .nav-submenu, .nav-sub:focus-within > .nav-submenu { display: flex; flex-direction: column; }
.nav-sub:hover > .nav-subtop { background: var(--sea-wash); }
/* Narrow screens and touch: sub-menus open in place, indented, instead of flying out. */
@media (max-width: 56rem), (hover: none) {
  .nav-submenu { display: flex; flex-direction: column; position: static; min-width: 0; padding: 0 0 0.2rem 0.9rem; border: 0; box-shadow: none; background: none; }
  .mainnav .nav-sub .nav-subtop { color: var(--muted); font-size: 0.85rem; pointer-events: none; }
  .mainnav .nav-sub .nav-subtop .caret { display: none; }
  .nav-menu { position: absolute; }
}
/* What's happening in the left column: the features sit indented under All events. */
.railnav li.sub a { padding-left: 0.9rem; font-size: 0.85rem; }
.railnav li.sub a span::before { content: ""; }

/* ---------- Deals in the top menu: gold, with a slow shimmer and a twinkling star ---------- */
.mainnav a.nav-deals {
  display: inline-flex; align-items: center; gap: 0.35rem;
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #FFF8E4, #FBEBC2);
  box-shadow: inset 0 0 0 1px #E2BF62, 0 1px 6px rgba(201, 150, 40, .25);
  font-weight: 700;
}
.mainnav a.nav-deals::before {
  content: '✦'; display: inline-block; font-size: 0.8em; line-height: 1; color: #C9962B;
  animation: deals-twinkle 2.6s ease-in-out infinite;
}
.mainnav a.nav-deals .nav-deals-txt {
  background: linear-gradient(100deg, #8A5E0B 0%, #8A5E0B 35%, #D9A93C 50%, #8A5E0B 65%, #8A5E0B 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #8A5E0B;
  animation: deals-shimmer 5s ease-in-out infinite;
}
/* the sweep of light across the button */
.mainnav a.nav-deals::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  animation: deals-sweep 5s ease-in-out infinite;
}
.mainnav a.nav-deals.on::after { background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,240,190,.55), rgba(255,255,255,0)); }
@keyframes deals-sweep {
  0%, 55% { left: -60%; }
  85%, 100% { left: 120%; }
}
.mainnav a.nav-deals:hover { background: linear-gradient(180deg, #FFF3D2, #F7DF9E); }
.mainnav a.nav-deals.on { background: linear-gradient(180deg, #D9A93C, #B9862C); box-shadow: 0 1px 8px rgba(185, 134, 44, .45); }
.mainnav a.nav-deals.on::before { color: #fff; }
.mainnav a.nav-deals.on .nav-deals-txt { background: none; -webkit-text-fill-color: #fff; color: #fff; animation: none; }
@keyframes deals-shimmer {
  0%, 55% { background-position: 100% 0; }
  85%, 100% { background-position: 0 0; }
}
@keyframes deals-twinkle {
  0%, 100% { transform: scale(0.85) rotate(0deg); opacity: 0.75; }
  50% { transform: scale(1.15) rotate(45deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mainnav a.nav-deals::before, .mainnav a.nav-deals::after, .mainnav a.nav-deals .nav-deals-txt { animation: none; }
  .mainnav a.nav-deals::after { display: none; }
}

/* ---------- Claim page: one visit ---------- */
.pl-posted { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: 0.8rem 0; }
.pl-where { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.pl-where > summary { cursor: pointer; font-weight: 600; color: var(--sea-deep); }
.pl-where[open] > summary { margin-bottom: 0.6rem; }

/* Notification emails ("notify me", src/notify.php): banner, boxes, choices. */
.notify-banner { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
.notify-banner-btns { display: inline-flex; gap: 0.8rem; align-items: center; }
.notify-banner-btns form { margin: 0; }
.notify-banner a.small-btn, .notify-box a.small-btn { text-decoration: none; }
.notify-banner button.link { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font: 0.85rem var(--sans); cursor: pointer; }
.notify-box { margin: 1.2rem 0; padding: 0.8rem 1rem; background: var(--sea-wash); border-radius: 12px; }
.notify-box p, .notify-box form { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; }
.notify-box p + p { margin-top: 0.3rem; }
.notify-form .notify-topic { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 0.7rem; }
.notify-form .notify-topic input { margin-top: 0.3rem; flex: none; }
.notify-panel { max-width: 40rem; }

/* Game night host tools (views/_gn-host.php): a strip of links for the people who run it. */
.host-bar { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: 0 0 1rem; padding: 0.7rem 0.9rem;
            border: 1px dashed var(--sea); border-radius: var(--radius); background: var(--card); }
.host-bar-h { font: 700 0.78rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--sea-deep); margin-right: 0.3rem; }
.host-bar .small-btn { display: inline-block; margin: 0; font: 600 0.85rem/1.3 var(--sans); padding: 0.35rem 0.85rem; min-height: 0;
                       box-shadow: none; text-decoration: none; }
.host-bar .small-btn.go { background: var(--sea); border-color: var(--sea); color: #fff; }
.host-bar .small-btn.quiet { background: var(--sea-wash); border-color: var(--sea-light); color: var(--sea-deep); }
.panel.grp-gn { max-width: none; padding: 0.9rem 1.2rem; margin: 0 0 1.5rem; }
.grp-gn h2 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.grp-gn p { margin: 0; }

/* Organization team page (views/group-team.php). */
.team-key { display: grid; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0.9rem 1.1rem; border-radius: var(--radius); background: var(--sea-wash); }
.team-key div { display: grid; grid-template-columns: 10rem 1fr; gap: 0.8rem; }
.team-key dt { font-weight: 700; color: var(--sea-deep); }
.team-key dd { margin: 0; font-size: 0.9rem; }
@media (max-width: 640px) { .team-key div { grid-template-columns: 1fr; gap: 0.1rem; } }
.team-list { display: grid; gap: 0.7rem; margin: 0 0 1.5rem; }
.panel.team-row { max-width: none; margin: 0; padding: 0.9rem 1.1rem; display: grid; gap: 0.6rem; }
.team-row.locked { background: var(--paper); }
.team-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; }
.team-who .tag { font-size: 0.75rem; }
.team-perms { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; border: 0; margin: 0; padding: 0; }
.team-perms legend { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.3rem; padding: 0; }
.team-perms input[type=checkbox] { width: auto; padding: 0; margin: 0; }
.team-perms label.check { color: var(--ink); font-size: 0.92rem; }
.team-perms input:disabled + * , .team-perms label:has(input:disabled) { color: var(--muted); }
.team-actions { display: flex; gap: 0.5rem; }
.team-actions .small-btn.danger { background: #fff; color: var(--clay); border: 1px solid var(--clay); }
.panel.team-add { max-width: 36rem; }

/* Game rules quick reference (views/gn-rules.php). */
.rules-toc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.2rem; }
.rules-toc a { padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--sea-wash); color: var(--sea-deep); font: 600 0.88rem/1.3 var(--sans); text-decoration: none; }
.rules-toc a:hover { background: var(--sea-light); }
.panel.rules-game { max-width: none; margin: 0 0 1.2rem; padding: 1.1rem 1.3rem; scroll-margin-top: 1rem; }
.rules-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-bottom: 0.4rem; }
.rules-head h2 { margin: 0; }
.rules-head .small-btn { margin-left: auto; text-decoration: none; }
.rules-part { margin-top: 0.9rem; }
.rules-part h3 { margin: 0 0 0.35rem; font-size: 1rem; color: var(--sea-deep); }
.rules-text ul, .rules-text ol { margin: 0.2rem 0 0.6rem; padding-left: 1.2rem; }
.rules-text li { margin: 0.25rem 0; line-height: 1.5; }
.rules-text p { margin: 0.3rem 0 0.6rem; line-height: 1.5; }
.rules-house { padding: 0.7rem 0.9rem 0.3rem; border-radius: var(--radius); background: var(--sand); border-left: 4px solid var(--sun); }
.rules-house h3 { color: #8a5a17; }
.rules-variants h3 .small { font-weight: 400; }
.rules-foot { margin: 0.8rem 0 0; }
.rules-form textarea { font: 0.95rem/1.45 var(--sans); }
.rules-delete { margin: 1rem 0; }
.rules-other { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.rules-other li { margin: 0.25rem 0; }

/* --- Neighbours for Hire: jobs (src/jobs.php) ---------------------------- */
.rail-nfh .rail-cta { margin: 0; padding: 0.6rem 0.9rem 0.7rem; }
.rail-nfh .rail-cta .button { display: block; text-align: center; background: var(--fig); padding: 0.5rem 1rem; font-size: 0.92rem; }
.rail-nfh .rail-cta .button:hover { background: #2F6B3A; }
.rail-nfh .rail-add + .rail-add { border-top: 0; padding-top: 0; }
.job-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.2rem; }
.job-section { margin: 0 0 1.4rem; }
.job-section h2 { margin: 0 0 0.6rem; font-size: 1.2rem; }
.job-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.job-card { display: grid; gap: 0.2rem; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--fig); border-radius: var(--radius); padding: 0.75rem 0.95rem; box-shadow: var(--shadow); }
.job-card > a { color: var(--ink); text-decoration: none; }
.job-card > a:hover strong { text-decoration: underline; }
.job-meta { font-size: 0.85rem; color: var(--muted); }
.job-note { font-size: 0.95rem; white-space: pre-line; }
.job-state { font-size: 0.82rem; font-weight: 650; color: var(--sea-deep); }
.job-state.st-matched, .job-state.st-chosen { color: #2F6B3A; }
.job-state.st-closed, .job-state.st-removed, .job-state.st-withdrawn, .job-state.st-not_chosen { color: var(--muted); }
.job-offer form { margin-top: 0.4rem; }
.job-offer .button { background: var(--fig); }
.job-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0 0 0.6rem; }
.job-facts dt { color: var(--muted); font-size: 0.88rem; }
.job-facts dd { margin: 0; }
.job-details { margin: 0.4rem 0 0; }
.job-close { margin-top: 0.8rem; }
.job-error { margin: 0 0 1rem; }
.job-foot { margin-top: 1.5rem; }
.job-cats { margin: 0; padding: 0.8rem 1rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.job-cats legend { padding: 0 0.4rem; font-size: 0.9rem; font-weight: 650; color: var(--ink); }
.job-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0.5rem; }
.stack label.job-cat { display: flex; align-items: center; gap: 0.65rem; margin: 0; padding: 0.6rem 0.8rem; min-height: 2.9rem;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 0.95rem; line-height: 1.3;
  cursor: pointer; transition: border-color .15s, background .15s; }
.stack label.job-cat input[type=checkbox] { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; padding: 0; border-radius: 4px; accent-color: var(--fig); }
.stack label.job-cat span { text-align: left; }
.stack label.job-cat:hover { border-color: var(--fig); }
.stack label.job-cat:has(input:checked) { background: #E6F3E8; border-color: var(--fig); }
.stack label.job-cat:has(input:focus-visible) { outline: 2px solid var(--fig); outline-offset: 1px; }

/* --- Admin: Neighbours for Hire (/admin/neighbours/) ---------------------- */
.nfh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.6rem; margin: 0 0 1.2rem; }
.nfh-tile { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--fig); border-radius: var(--radius); padding: 0.7rem 0.9rem; box-shadow: var(--shadow); display: grid; gap: 0.15rem; }
.nfh-tile strong { font: 700 1.6rem/1.1 var(--display); color: var(--ink); }
.nfh-tile span { font-size: 0.85rem; color: var(--muted); }
.nfh-tile small { display: block; font-size: 0.78rem; }
.nfh-think { max-width: none; margin: 0 0 1.4rem; }
.nfh-think h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.nfh-think ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.nfh-think li { padding: 0.45rem 0.75rem; border-radius: 10px; background: var(--paper); border-left: 4px solid var(--line-warm); }
.nfh-think li.nfh-gap { background: #FFF4E5; border-left-color: var(--sun); }
.nfh-think li.nfh-good { background: #E6F3E8; border-left-color: var(--fig); }
.nfh-table td:first-child { position: relative; min-width: 13rem; }
.nfh-bar { display: block; height: 3px; margin-top: 0.25rem; background: var(--fig); border-radius: 2px; opacity: .55; }
.nfh-table tr.nfh-gap td { background: #FFF4E5; }
.nfh-table tfoot th { color: var(--ink); border-top: 2px solid var(--line-warm); }
.nfh-up { color: #2F6B3A; font-weight: 650; font-size: 0.85rem; }
.nfh-down { color: var(--clay); font-weight: 650; font-size: 0.85rem; }
.nfh-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.2rem; margin: 1.2rem 0; }
.nfh-two h2 { margin-top: 0; }
.nfh-foot { margin-top: 1.5rem; }

/* --- Neighbours for Hire: "I need this too", price lists, vouches (src/neighbours.php) --- */
.nfh-want { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0.4rem 0 0.7rem; padding: 0.6rem 0.8rem; background: #fff; border-radius: 10px; border: 1px solid #CFE5D3; }
.nfh-want form { margin: 0; }
.nfh-want .nfh-want-btn { background: var(--fig); padding: 0.45rem 1rem; font-size: 0.92rem; text-decoration: none; }
.nfh-want .nfh-want-btn:hover { background: #2F6B3A; }
.nfh-want-n { font-size: 0.88rem; color: var(--muted); flex: 1 1 14rem; }
.nfh-want-n strong { color: var(--ink); }
em.nfh-wanted { display: inline-block; margin-left: 0.3rem; padding: 0 0.45rem; border-radius: 999px; background: #FFF4E5; color: #8A4B0F; font: normal 650 0.75rem/1.5 var(--sans); }
table.nfh-prices { border-collapse: collapse; }
table.nfh-prices td { padding: 0.1rem 1rem 0.1rem 0; vertical-align: top; }
table.nfh-prices td:last-child { font-weight: 650; white-space: nowrap; padding-right: 0; }
.nfh-price-rows { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; gap: 0.4rem 0.5rem; margin: 0.5rem 0; }
.nfh-price-rows input { font: 1rem var(--sans); padding: 0.5rem 0.65rem; border: 1px solid var(--line-warm); border-radius: 10px; background: #fff; color: var(--ink); min-width: 0; }
.nfh-vouches { margin: 1.2rem 0; padding: 0.9rem 1rem; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--fig); border-radius: var(--radius); }
.nfh-vouches h2, .nfh-vouches h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.nfh-vouch-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.45rem; }
.nfh-vouch-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; }
.nfh-vnote { font-style: italic; }
.pill.mini.nfh-hired { background: var(--fig); color: #fff; }
.nfh-vcount { color: #2F6B3A; font-weight: 650; }
.nfh-vouch-form { max-width: 34rem; }
.nfh-vouch-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.stack .nfh-vouch-btns button.button { width: auto; display: inline-block; }
form.nfh-inline { display: inline; margin: 0; }
.nfh-off { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 0.9rem; padding: 0.7rem 0.9rem; background: #FFF4E5; border-left: 4px solid var(--sun); border-radius: 10px; }
.nfh-off p { margin: 0; flex: 1 1 14rem; }
.nfh-off form { margin: 0; }
.stack label.job-cat.job-cat-listed { background: #E6F3E8; border-color: var(--fig); cursor: default; }
em.nfh-fromlisting { display: inline-block; margin-left: 0.3rem; padding: 0 0.45rem; border-radius: 999px; background: var(--fig); color: #fff; font: normal 650 0.72rem/1.5 var(--sans); }
/* Neighbours rail card, tidied (23 Oct 2026): two counted rows, then two buttons. */
.rail-nfh .nfh-nav li:not(.sub) a span:first-child { font-weight: 650; }
.rail-nfh .nfh-nav li.sub a { padding-left: 0.9rem; font-size: 0.85rem; color: var(--muted); }
.rail-nfh .nfh-nav li.sub a:hover, .rail-nfh .nfh-nav li.sub a.on { color: var(--acc); }
.nfh-rail-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; padding: 0.1rem 0.9rem 0.8rem; }
.nfh-rail-btns .button { text-align: center; padding: 0.45rem 0.5rem; font-size: 0.88rem; white-space: nowrap; }
.nfh-rail-btns .button:not(.secondary) { background: var(--fig); }
.nfh-rail-btns .button:not(.secondary):hover { background: #2F6B3A; }
.nfh-rail-btns .button.secondary { color: #2F6B3A; box-shadow: inset 0 0 0 1.5px var(--fig); }
.nfh-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem; margin: 0 0 1.1rem; max-width: 46rem; }
.nfh-ways > div { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--fig); border-radius: var(--radius); padding: 0.7rem 0.9rem; }
.nfh-ways strong { font-size: 1rem; }
.nfh-ways span { color: var(--muted); font-size: 0.85rem; }
.nfh-ways p { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--muted); }
.nfh-help-head h2 { margin: 0 0 0.6rem; font-size: 1.2rem; }

/* Meeple Mondays: check-in banner on Monday game nights (src/nudges.php) and the welcome page's check-in card. */
.gn-nudge { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.gn-nudge form { margin: 0; }
.gn-nudge button.link { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font: 0.85rem var(--sans); cursor: pointer; }
.welcome-card.welcome-now { border-color: var(--sea); background: var(--sea-wash); }

/* Meeple Mondays keep score: "Who's here" in groups with a name search (views/gn-keep.php). */
.gn-find { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.4rem 0 0.8rem; }
.gn-find input[type=search] { flex: 1 1 14rem; max-width: 22rem; margin: 0; border-radius: 10px; border: 1px solid var(--line-warm); background: #fff; font: 1rem var(--sans); padding: 0.6rem 0.75rem; color: var(--ink); }
.gn-find input[type=search]:focus { outline: 2px solid var(--sea); outline-offset: 1px; border-color: var(--sea); }
.gn-group { margin: 0 0 0.8rem; }
.gn-group-head { margin: 0 0 0.35rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.gn-more > summary { cursor: pointer; font-weight: 600; color: var(--sea-deep); margin-bottom: 0.4rem; }
.gn-more[open] > summary { margin-bottom: 0.5rem; }
.gn-roster-groups label.chip[hidden], .gn-roster-groups .gn-group[hidden] { display: none; }

/* Neighbours for Hire points (src/nfh_points.php): "Did they do the job?" on job pages, rules on /points, admin. */
.nfh-done { margin: 1rem 0; padding: 0.9rem 1rem; border: 1px solid var(--sea-light); border-radius: var(--radius); background: var(--sea-wash); }
.nfh-done h3 { margin: 0 0 0.3rem; }
.nfh-done-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.5rem 0 0; }
.nfh-done-note { margin-top: 0.8rem; }
.pts-rules-h { margin: 0.9rem 0 0.3rem; font-size: 0.95rem; }
.pts-rules { margin: 0; padding-left: 1.1rem; }
.pts-rules li { margin: 0.25rem 0; }
.nfh-warn { border-color: var(--sun); background: var(--sand); }
.nfh-warn h3 { margin-top: 0; }
.nfh-pts-cancel { display: flex; gap: 0.4rem; align-items: center; margin: 0; }
.nfh-pts-cancel input { min-width: 10rem; padding: 0.3rem 0.5rem; font-size: 0.85rem; border: 1px solid var(--line-warm); border-radius: 8px; }

/* Promo-code deals (migration 070): owner form and member card. */
.pill.deal-rec { background: var(--sea); color: #fff; font-weight: 700; vertical-align: 1px; }
.deal-qr-why { margin: 0.4rem 0 0.8rem; padding: 0.6rem 0.8rem; border-left: 3px solid var(--sea); background: var(--sea-wash); border-radius: 0 8px 8px 0; }
.deal-promo-code { font-weight: 700; letter-spacing: 0.04em; }
.deal-promo-box .deal-get-code { margin: 0.6rem 0 0.2rem; }

/* Partner levels (src/partners.php): Member deals (Partner), Offseason Champion. Sun-gold stays for paid slots. */
.pbadge.b-deals    { background: var(--sea-wash); color: var(--sea-deep); }
.pbadge.b-champion { background: var(--sea); color: #fff; }
.pbadge.b-champion::before { content: "\2726"; width: auto; height: auto; border-radius: 0; background: none; font-size: 0.9em; line-height: 1; }
.partner-panel .partner-levels { width: 100%; border-collapse: collapse; margin: 0.6rem 0; }
.partner-panel .partner-levels th, .partner-panel .partner-levels td { text-align: left; vertical-align: top; padding: 0.45rem 0.5rem; border-top: 1px solid var(--line); font-size: 0.9rem; }
.partner-panel .partner-levels tr.on td { background: var(--sea-wash); }
.partner-panel .partner-levels tr.on td:first-child { font-weight: 700; }
.partner-new { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.4rem 0 0.6rem; }
.partner-new strong { font: 700 1.4rem 'Bricolage', var(--sans); color: var(--sea-deep); margin-right: 0.25rem; }
.pbadge.b-partner  { background: var(--sea-deep); color: #fff; }

/* ============================================================
   Owner's Member deals page (views/deals-manage.php, 23 Oct 2026):
   package card, deals by tier, the form, folded tools.
   ============================================================ */
.dm-head { margin-bottom: 1rem; }
.dm-package { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem 1.6rem; padding: 1.2rem 1.3rem; margin: 0 0 1.6rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(36, 56, 63, 0.04); }
.dm-label { margin: 0; font: 700 0.75rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dm-pkg-name { margin: 0.3rem 0 0.8rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dm-pkg-name .pbadge { font-size: 0.95rem; padding: 0.2rem 0.85rem 0.2rem 0.7rem; margin-left: 0; }
.dm-steps { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dm-steps li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem 0.25rem 0.35rem; border-radius: 999px; border: 1px dashed var(--line-warm);
  font: 500 0.82rem var(--sans); color: var(--muted); background: #fff; }
.dm-steps li.on { border: 1px solid var(--sea-light); background: var(--sea-wash); color: var(--sea-deep); font-weight: 650; }
.dm-dot { width: 1.15rem; height: 1.15rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.72rem; border: 1.5px solid currentColor; }
.dm-steps li.on .dm-dot { background: var(--sea); border-color: var(--sea); color: #fff; }
.dm-next { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; font-weight: 600; }
.dm-pkgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dm-pkgs li { padding: 0.6rem 0.8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.dm-pkgs li p { margin: 0.15rem 0 0; }
.dm-pkgs li.reached { opacity: 0.75; }
.dm-pkgs li.now { border-color: var(--sea); background: var(--sea-wash); opacity: 1; box-shadow: inset 3px 0 0 var(--sea); }
.dm-pkg-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dm-pkg-title .pbadge { margin-left: 0; }
.dm-joined, .dm-pkg-foot { grid-column: 1 / -1; margin: 0; }
.dm-joined strong { font: 700 1.3rem 'Bricolage', var(--sans); color: var(--sea-deep); }

.dm-tiers { margin: 0 0 1.6rem; }
.dm-tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 0.8rem 0; }
.dm-tier { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.dm-tier header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.dm-suits { margin: 0; color: var(--muted); }
.dm-deal { padding: 0.65rem 0.75rem; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.dm-deal p { margin: 0 0 0.25rem; }
.dm-deal.s-paused { opacity: 0.8; }
.dm-deal.s-ended { opacity: 0.55; }
.dm-stats { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
.dm-stats strong { color: var(--sea-deep); }
.dm-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.dm-actions .inline-form { margin: 0; }
.dm-add { margin-top: auto; display: block; text-align: center; padding: 0.6rem; border: 1.5px dashed var(--sea-light); border-radius: 10px; color: var(--sea-deep);
  font-weight: 650; text-decoration: none; background: #fff; }
.dm-add:hover, .dm-add:focus-visible { border-style: solid; border-color: var(--sea); background: var(--sea-wash); }
.dm-add.more { padding: 0.35rem; font-size: 0.85rem; border-width: 1px; }

.dm-form h2 { margin-top: 0; }
.dm-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; border: 0; padding: 0; margin: 0.4rem 0 0; }
.dm-modes legend { font-weight: 650; margin-bottom: 0.4rem; padding: 0; }
.dm-mode { position: relative; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.8rem 0.7rem 2.2rem; border: 1px solid var(--line-warm); border-radius: 12px;
  background: #fff; cursor: pointer; }
.dm-mode input { position: absolute; left: 0.8rem; top: 0.85rem; margin: 0; }
.dm-mode-name { font-weight: 650; color: var(--ink); }
.dm-mode.on { border-color: var(--sea); background: var(--sea-wash); box-shadow: inset 0 0 0 1px var(--sea); }
.dm-qr-note { margin: 0.3rem 0 0.4rem; }
.dm-more { border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem 0.9rem; background: var(--paper); }
.dm-more > summary { cursor: pointer; font-weight: 650; color: var(--sea-deep); }
.dm-more[open] > summary { margin-bottom: 0.6rem; }
.dm-submit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.dm-tools h2 { margin-bottom: 0.6rem; }
.dm-tool { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; margin: 0 0 0.6rem; }
.dm-tool > summary { cursor: pointer; font: 700 1.02rem 'Bricolage', var(--sans); color: var(--ink); }
.dm-tool[open] > summary { margin-bottom: 0.6rem; }
.dm-count { display: inline-block; min-width: 1.5em; padding: 0 0.45em; border-radius: 999px; background: var(--sea); color: #fff; font: 700 0.75rem/1.6 var(--sans); text-align: center; vertical-align: 2px; }

@media (max-width: 760px) {
  .dm-package { grid-template-columns: 1fr; padding: 1rem; }
  .dm-tier-grid, .dm-modes { grid-template-columns: 1fr; }
}
.stack .dm-mode { font-size: 0.9rem; color: var(--ink); }
.stack .dm-mode input[type=radio] { position: absolute; left: 0.8rem; top: 0.85rem; width: 1.05rem; height: 1.05rem; margin: 0; padding: 0; accent-color: var(--sea); }
.stack .dm-mode .small { color: var(--muted); }
.stack .dm-mode:has(input:checked) { border-color: var(--sea); background: var(--sea-wash); box-shadow: inset 0 0 0 1px var(--sea); }
.dm-more > summary .small { font-weight: 400; }

/* Owner's deals page, simplified (23 Oct 2026): status line, one list, past deals. */
.dm-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; padding: 1rem 1.1rem; margin: 0 0 1.4rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.dm-status-text { flex: 1 1 22rem; margin: 0; }
.dm-status-text .pbadge { margin: 0 0.4rem 0 0; font-size: 0.85rem; }
.dm-status .dm-joined { flex-basis: 100%; margin: 0; }
.dm-list { margin: 0 0 1.4rem; }
.dm-list .dm-deal, .dm-past .dm-deal { margin: 0 0 0.6rem; background: var(--card); padding: 0.8rem 0.9rem; }
.dm-deal-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.dm-tier-help { margin: -0.3rem 0 0.2rem; }
.dm-past .dm-actions { margin-top: 0.3rem; }
.deal-use-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.deal-use-btns .deal-get-code { margin: 0; }