/* =========================================================
   dumaguete.uk — layout.css
   Mobile first. Background is full bleed; the reading column
   caps and centres so the page keeps an A4 feel on any screen.
   ========================================================= */

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

html {
  font-size: calc(16px * var(--scale, 1));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 { font-size: clamp(1.9rem, 6vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 4vw, 1.8rem); }
h3 { font-size: 1.06rem; }

p { margin: 0 0 1.1em; color: var(--ink-soft); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

/* ---------- TOP BANNER ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.topbar.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 2px var(--shadow-a), 0 10px 28px var(--shadow-a);
}
.topbar__inner {
  position: relative;   /* anchor for the post-it; changes nothing in flow */
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- TOP NAV ---------- */
.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.topnav__link {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.topnav__link:hover { color: var(--accent); background: var(--surface-alt); text-decoration: none; }
.topnav__link.is-current { color: var(--ink); background: var(--surface-alt); }

/* Account slot — right-most nav item, distinct so it doesn't blend in */
.topnav__link--account {
  margin-left: 6px;
  padding: 6px 12px;
  color: var(--accent);
  border: 1px solid var(--line);
}
.topnav__link--account:hover {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* More ▾ dropdown — hover-triggered, no click needed */
.topnav__more {
  position: relative;
  outline: none;
}
.topnav__more-trigger { cursor: default; }
.topnav__more:hover .topnav__link,
.topnav__more:focus-within .topnav__link { color: var(--accent); background: var(--surface-alt); }
.topnav__submenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 172px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  z-index: 125;
}
.topnav__more:hover .topnav__submenu,
.topnav__more:focus-within .topnav__submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.topnav__submenu a {
  display: block;
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 0.86rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.topnav__submenu a:hover { color: var(--accent); background: var(--surface-alt); text-decoration: none; }

/* Invisible bridge so cursor can cross the gap without closing the menu */
.topnav__more::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 10px;
}

.topnav__toggle {
  display: none;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.topnav__toggle:hover { color: var(--accent); background: var(--surface-alt); }
.topnav__toggle[aria-expanded="true"] { color: var(--accent); background: var(--accent-wash); }

/* Below 780px: nav collapses into a compact dropdown */
@media (max-width: 780px) {
  .topnav {
    position: absolute;
    top: calc(var(--bar-h) - 4px);
    left: 16px;
    right: 16px;
    max-width: calc(var(--content-max) - 32px);
    margin: 0 auto;
    padding: 6px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-lift);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    z-index: 125;
  }
  .topnav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .topnav__link { padding: 10px 12px; font-size: 0.92rem; }
  .topnav__link--account { margin-left: 0; border: 0; padding: 10px 12px; }
  .topnav__toggle { display: inline-flex; }

  /* Mobile top bar order: [☰] [brand centered] [EN 👤] */
  .topbar__inner { gap: 8px; }
  .topnav__toggle { order: 1; }
  .brand         { order: 2; flex: 1; text-align: center; }
  .topbar__spacer { display: none; }
  .lang          { order: 3; }
  .topbar__profile { order: 4; }
  .acct            { order: 4; }

  /* On mobile the More trigger hides but its submenu items appear inline (no space limit in drop-down) */
  .topnav__more { padding: 0; display: block; }
  .topnav__more-trigger { display: none; }
  .topnav__more::after { display: none; }
  .topnav__submenu {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    min-width: 0;
  }
  .topnav__submenu a { padding: 10px 12px; font-size: 0.92rem; color: var(--ink); }

  /* Account link in nav hidden on mobile — Profile icon in top bar handles it */
  .topnav__link--account { display: none; }
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

/* A mini paper note hanging off the tail of the wordmark. Out of
   flow, so nothing on the page moves for it, and it takes itself
   out of the document after six seconds. */
.postit {
  position: absolute;
  top: calc(100% - 7px);
  z-index: 3;
  margin: 0;
  padding: 0;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  font-family: var(--font-body, inherit);
  font-size: 0.62rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  color: #4A3D00;
  background: linear-gradient(180deg, #FFF48C 0%, #FFEB57 100%);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  transform: rotate(-1.6deg);
  transform-origin: 100% 0;
  opacity: 1;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.postit:hover { text-decoration: none; }
.postit.is-gone { opacity: 0; transform: rotate(-1.6deg) translateY(-4px); }
.brand em {
  font-style: normal;
  color: var(--accent);
}
.topbar__spacer { flex: 1; }

.search {
  flex: 1;
  min-width: 0;
  max-width: 320px;
  height: 34px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--surface-alt);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.search::placeholder { color: var(--ink-faint); }
.search:focus {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
}
.search[hidden] { display: none; }

/* ---------- LANGUAGE PICKER ---------- */
.lang { position: relative; flex-shrink: 0; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: var(--surface-alt);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.lang__btn:hover { color: var(--accent); border-color: var(--line); }
.lang__btn[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-wash);
}
.lang__btn svg { opacity: 0.7; }

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 172px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  z-index: 130;
}
.lang__menu[hidden] { display: none; }
.lang__menu li {
  padding: 8px 12px;
  font-size: 0.86rem;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.lang__menu li:hover { background: var(--surface-alt); color: var(--accent); }
.lang__menu li[aria-selected="true"] {
  color: var(--accent);
  background: var(--accent-wash);
  font-weight: 500;
}

/* ---------- LANGUAGE NUDGE ---------- */
.nudge {
  position: fixed;
  top: calc(var(--bar-h) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  z-index: 150;
  width: min(360px, calc(100vw - 24px));
  padding: 14px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.nudge[hidden] { display: none; }
.nudge.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nudge__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nudge__close:hover { color: var(--ink); background: var(--surface-alt); }
.nudge__title {
  margin: 0 22px 12px 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.nudge__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nudge__btn {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface-alt);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.nudge__btn:hover { color: var(--ink); border-color: var(--line-strong); }
.nudge__btn--primary {
  color: var(--accent-ink);
  background: var(--accent);
}
.nudge__btn--primary:hover {
  color: var(--accent-ink);
  background: var(--accent);
  filter: brightness(0.95);
  border-color: transparent;
}

/* ---------- PAGE COLUMN (A4 feel) ---------- */
.page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 12px 16px 48px;
  flex: 1 0 auto;
}

.page > .hero--search + .section { padding-top: 4px; }

.hero { padding: 16px 0 28px; }
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero__lede {
  font-size: 1.06rem;
  max-width: 56ch;
}

/* ---------- HERO WITH INTEGRATED SEARCH ---------- */
.hero--search { padding: 0; }
.hero__row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}
.hero__mark {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  line-height: 1.2;
  color: var(--ink);
}
.hero__city {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(0.86rem + 4px);
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1;
}
.hero__sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--line-strong);
  border: 0;
  flex-shrink: 0;
}
.hero__loc {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--ink-soft);
  letter-spacing: -0.003em;
  line-height: 1;
  white-space: nowrap;
}
.hero__section {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--accent);
  line-height: 1;
  white-space: nowrap;
  text-transform: lowercase;
  margin-left: -12px;
}
.hero__section::before {
  content: ": ";
  color: var(--ink-faint);
  font-weight: 400;
  margin-right: 2px;
}
.hero__section[hidden] { display: none; }

.herosearch {
  --sf-h: 34px;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--sf-h);
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px 0 16px;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.herosearch:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}
.herosearch__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 0.86rem;
  line-height: var(--sf-h);
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.herosearch__input::-webkit-search-cancel-button,
.herosearch__input::-webkit-search-decoration { -webkit-appearance: none; }
.herosearch__input::placeholder { color: var(--ink-faint); }

.herosearch__clear,
.herosearch__btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.12s var(--ease), background 0.12s var(--ease);
}
.herosearch__clear { margin-right: 4px; }
.herosearch__clear:hover,
.herosearch__btn:hover { color: var(--accent); background: var(--surface-alt); }
.herosearch__btn:active { transform: scale(0.94); }
.herosearch__btn svg { width: 14px; height: 14px; }
.herosearch__clear svg { width: 11px; height: 11px; }
.herosearch__clear[hidden] { display: none; }

.hero--compact { padding: 0; }
.hero--compact .hero__city { font-size: calc(0.82rem + 3px); }
.hero--compact .hero__loc { font-size: 0.82rem; }

@media (min-width: 720px) {
  .hero__row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
  .hero__mark { flex-wrap: nowrap; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--line-strong);
}
.card p:last-child { margin-bottom: 0; }
.card__tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 8px;
}

/* Gateway cards on the home page: whole card is a link, has a visible CTA */
.card--gateway {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.card--gateway:hover { text-decoration: none; }
.card--gateway .card__tag { color: var(--accent); }
.card--gateway p { flex: 1; }
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  transition: gap 0.2s var(--ease);
}
.card--gateway:hover .card__cta { gap: 10px; }

/* Section lede: one line under an h2 that sets context without shouting */
.section__lede {
  font-size: 0.98rem;
  color: var(--ink-soft);
  margin: -0.25em 0 1.25em;
  max-width: 56ch;
}

/* ---------- SIGNATURE: TIDELINE ---------- */
/* One accent element done well: a slow tidal line drifts across the top edge.
   0.5px stroke, near-invisible presence, 40s cycle. */
.tideline {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 130;
  pointer-events: none;
  overflow: visible;
  color: var(--accent);
  opacity: 0.35;
}
.tideline path {
  animation: tide-drift 40s linear infinite;
}
.tideline path:nth-child(2) {
  animation-duration: 55s;
  animation-direction: reverse;
}
@keyframes tide-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-300px); }
}
@media (prefers-reduced-motion: reduce) {
  .tideline path { animation: none; }
}

/* ---------- VERIFIED BYLINE ---------- */
/* Small trust mark under any fact. Reads as accountability, not a caveat. */
.verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}
.verified::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2, var(--accent));
  flex-shrink: 0;
}
.verified time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.verified a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.verified a:hover { color: var(--accent); }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 24px 0 40px;
}

.section { padding: 8px 0 24px; }
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 12px 0;
}

/* ---------- SIDE RAILS ---------- */
/* Count-agnostic: flex column, centred on the viewport.
   Add or remove buttons freely — the group re-centres itself. */
.rails { display: contents; }

.rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--rail-gap);
  opacity: 0.22;
  transition: opacity 0.3s var(--ease);
}
.rail--left  { left: 2px; }
.rail--right { right: 2px; }
.rail:hover, .rail:focus-within { opacity: 1; }

.rail button,
.rail a {
  width: var(--rail-size);
  height: var(--rail-size);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.12s var(--ease);
}
.rail button:hover,
.rail a:hover { background: var(--surface-alt); color: var(--accent); }
.rail button:active,
.rail a:active { transform: scale(0.92); }
.rail svg { width: 17px; height: 17px; stroke-width: 1.7; }

/* Mobile: both rails fold into one centred bottom bar */
@media (max-width: 900px) {
  /* No printing from a phone — the "i" stands where Print stood. */
  #btn-print { display: none; }
  .rails {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    justify-content: center;
    gap: var(--rail-gap);
    padding: 0 8px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 22px var(--shadow-a);
  }
  .rail {
    position: static;
    transform: none;
    flex-direction: row;
    opacity: 0.62;
  }
  body { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
}

/* ---------- FOOTER BANNER ---------- */
.footerbar {
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -1px 2px var(--shadow-a), 0 -10px 28px var(--shadow-a);
}

/* Desktop: footer stays on screen the way the top bar does.
   Mobile keeps it in normal flow, so the rail bar owns the bottom edge. */
@media (min-width: 901px) {
  .footerbar {
    position: sticky;
    bottom: 0;
    z-index: 110;
    flex: 0 0 auto;
  }
}
.footerbar__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 6px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.footerbar a { color: var(--ink-soft); }
.footerbar__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
  text-decoration: none;
}
.footerbar__brand em {
  font-style: normal;
  color: var(--accent);
}
.footerbar__brand:hover { text-decoration: none; opacity: 0.75; }
.footerbar__spacer { flex: 1; }

/* Install button docks to the footer's top edge — the fixed footer is its
   containing block, so no position override is needed here. */
#pwa-install {
  position: absolute !important;
  bottom: 100% !important;
}
/* Mobile: dock to the rail bar's top edge instead */
@media (max-width: 900px) {
  #pwa-install {
    position: fixed !important;
    bottom: calc(34px + env(safe-area-inset-bottom)) !important;
  }
  /* Footer on phones: hide the flex-1 spacer so links pack tight
     instead of stretching the brand across the row, and shrink
     the type a step so all the links fit without ragged wrap. */
  .footerbar__inner {
    padding: 8px 12px;
    gap: 4px 12px;
    font-size: 0.75rem;
    justify-content: center;
  }
  .footerbar__spacer { display: none; }
  .footerbar__brand { flex-basis: 100%; text-align: center; }
  .footerbar a { white-space: nowrap; }
}

/* ---------- WIDER SCREENS ---------- */
@media (min-width: 720px) {
  .page { padding: 16px 24px 64px; }
  .topbar__inner,
  .footerbar__inner { padding-left: 24px; padding-right: 24px; }
  .grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   PRINT — the raw-feel PDF. Everything visible on the live
   site prints too: topbar, side rails, content column,
   footer. Full color, A4 portrait, repeating headers so a
   50-page category book still looks like the site.
   ========================================================= */
@page {
  size: A4 portrait;
  margin: 18mm 12mm 20mm 12mm;
}
@media print {
  /* Colors are the identity — keep them. */
  html, body {
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }
  body { padding: 0; margin: 0; }

  /* Anything not needed on paper — hide. Interactive-only overlays
     (dropdown menus, tooltips, share popups) are pointless printed. */
  .lang__menu,
  .currency-menu,
  .topnav__submenu,
  .share-menu,
  .sitesearch,
  .dgt-x-banner,
  .dgt-x-toast,
  #reels-icon,
  .composer, .forum-composer,
  .jobs-modal,
  #topnav-toggle,
  .topbar__profile,
  #lang-wrap,
  .today-line,
  script { display: none !important; }

  /* Running headers on every printed page — topbar + brand,
     small strip so it doesn't eat the sheet. */
  .topbar {
    position: running(pageheader);
    display: flex !important;
    height: auto;
    border-bottom: 1px solid var(--line, #d9e3e0);
    padding: 4px 0;
    background: #fff;
  }
  .topbar__inner {
    max-width: 100%;
    padding: 0 6mm;
  }
  .brand { font-size: 0.95rem; }
  .topnav {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.68rem;
  }
  .topnav__link {
    padding: 1px 4px;
    color: var(--ink-soft, #4a5b57);
    text-decoration: none;
  }
  .topnav__more { display: none !important; }
  @page { @top-center { content: element(pageheader); } }

  /* Running footers on every printed page — the site's footer
     bar with page numbers alongside. */
  .footerbar {
    position: running(pagefooter);
    display: flex !important;
    height: auto;
    border-top: 1px solid var(--line, #d9e3e0);
    padding: 4px 0;
    background: #fff;
    font-size: 0.7rem;
  }
  .footerbar__inner {
    max-width: 100%;
    padding: 0 6mm;
  }
  @page { @bottom-center { content: element(pagefooter); } }
  @page { @bottom-right { content: "page " counter(page) " / " counter(pages); font-size: 0.65rem; color: #6a7a76; font-family: Inter, sans-serif; padding-right: 6mm; padding-bottom: 3mm; } }

  /* Side rails — decorative on paper but part of the site's
     shape. Print them, dimmed a touch, non-interactive. */
  .rails {
    display: block !important;
    position: fixed;
    top: 30mm;
    pointer-events: none;
    opacity: 0.55;
  }
  .rail--left  { left: 4mm; }
  .rail--right { right: 4mm; }
  .rail {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    background: transparent;
  }
  .rail button,
.rail a {
    background: #fff;
    border: 1px solid var(--line, #d9e3e0);
    width: 22px;
    height: 22px;
    padding: 3px;
  }
  .rail button svg { width: 12px; height: 12px; }

  /* Content column — keep the site's shape, breathing room for margins */
  .page {
    max-width: 100%;
    margin: 0;
    padding: 4mm 14mm;
  }

  /* Cards stay recognisable: keep borders, keep colored tags,
     don't split across pages if we can help it. */
  .card {
    box-shadow: none !important;
    border: 1px solid var(--line, #d9e3e0) !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .card__tag {
    /* Force the tag's accent color to print — browsers strip it otherwise. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .verified { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  img, svg { break-inside: avoid; }

  /* Two-column grid for cards prints denser and reads better */
  .grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8mm;
  }

  /* The tideline — keep it, it's identity. */
  .tideline { display: block !important; }

  /* Links: keep them colored, drop the underline noise */
  a { color: var(--accent, #167c68); text-decoration: none; }

  /* --------- Multi-page print (Home + 10 categories) --------- */
  /* Every printed section starts a new sheet, so each category
     opens on its own page. */
  .print-section {
    break-before: page;
    page-break-before: always;
  }
  .print-section:first-child {
    break-before: auto;
    page-break-before: auto;
  }
  /* Cloned topbar + footerbar inside each section — Chrome does
     not honour position:running, so we repeat them per section
     to keep the raw-feel identity on every page. */
  .print-header-clone {
    position: static !important;
    display: flex !important;
    padding: 2mm 0 !important;
    border-bottom: 1px solid var(--line, #d9e3e0) !important;
    background: #fff !important;
  }
  .print-footer-clone {
    position: static !important;
    display: flex !important;
    padding: 2mm 0 !important;
    margin-top: 6mm;
    border-top: 1px solid var(--line, #d9e3e0) !important;
    background: #fff !important;
    font-size: 0.7rem;
  }
  .print-section__body {
    padding: 4mm 0;
  }

  /* The interactive map doesn't belong on paper — a static
     region shot or a category page carries the same info better. */
  .section--map, #map { display: none !important; }
}

/* Hide the cloned header/footer on screen — they only exist for print. */
.print-header-clone, .print-footer-clone { display: none; }

/* ---------- CURRENCY POPUP ---------- */
.currency-menu {
  position: fixed;
  z-index: 300;
  min-width: 200px;
  padding: 6px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.currency-menu.is-open { opacity: 1; transform: translateY(0); }
/* display:flex above would defeat the hidden attribute — without this,
   a closed menu stays invisibly tappable and eats taps near the bar. */
.currency-menu[hidden] { display: none; }
/* When opened from the mobile bottom bar: centered, rising upward. */
/* Never taller than the screen: the overflow scrolls inside the
   menu instead of running off an edge. */
.currency-menu,
.share-menu {
  max-height: calc(100vh - 24px);
  max-height: calc(100svh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.currency-menu--bar { transform: translateX(-50%) translateY(4px); }
.currency-menu--bar.is-open { transform: translateX(-50%) translateY(0); }
.currency-menu__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.currency-menu__row:hover { background: var(--surface-alt); }
.currency-menu__row.is-on { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.currency-menu__display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 60px;
}
.currency-menu__label {
  color: var(--ink-faint);
  font-size: 0.82rem;
}
.currency-menu__row.is-on .currency-menu__label { color: var(--accent); }


/* ---------- ACCOUNT MENU ---------- */
.acct {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}
.acct__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 232px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  z-index: 140;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.acct__menu.is-open { opacity: 1; transform: translateY(0); }
.acct__who {
  display: block;
  padding: 8px 12px 10px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.acct__who b { color: var(--ink); font-weight: 600; }
.acct__menu a,
.acct__menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.acct__menu a:hover,
.acct__menu button:hover {
  color: var(--accent);
  background: var(--surface-alt);
  text-decoration: none;
}

/* ---------- TOPBAR PROFILE ICON ---------- */
.topbar__profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  color: var(--ink-soft);
  background: transparent;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.topbar__profile > svg { flex: 0 0 auto; }
.topbar__profile:hover { color: var(--accent); background: var(--surface-alt); text-decoration: none; }

/* Dormant footer links — rendered but hidden until features go live */
.footerbar__dormant { display: none; }

/* ---------- SPONSORED PANEL ---------- */
.adpanel {
  position: fixed;
  z-index: 190;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 16px 18px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.adpanel.is-in { opacity: 1; transform: translate(0, 0); }

/* Corner-anchored, so a tall card grows toward the far edge and
   can push its own headline off screen. Cap and scroll instead. */
.adpanel {
  max-height: calc(100vh - 40px);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.adpanel--right  { right: 20px;  bottom: 20px; transform: translateX(24px); }
.adpanel--left   { left: 20px;   bottom: 20px; transform: translateX(-24px); }
.adpanel--bottom { left: 50%;    bottom: 20px; transform: translate(-50%, 24px); }
.adpanel--bottom.is-in { transform: translate(-50%, 0); }
.adpanel--top    { left: 50%;    top: calc(var(--bar-h) + 12px); transform: translate(-50%, -24px); }
.adpanel--top.is-in { transform: translate(-50%, 0); }

.adpanel__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.adpanel__close:hover { color: var(--ink); background: var(--surface-alt); }

.adpanel__tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 1px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-alt);
  border-radius: 999px;
}
.adpanel__headline {
  margin: 0 0 6px;
  padding-right: 20px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
}
.adpanel__body {
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.adpanel__cta {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.adpanel__cta:hover { filter: brightness(0.95); text-decoration: none; }

/* ---------- EDGE SLIVER ADS ---------- */
/* Mobile: the group hangs dead-center on the free side edge —
   with three, the middle one is dead center. Desktop: ads.js
   re-centers the group in the free stretch above the icon rail. */
.adedge-side {
  position: fixed;
  z-index: 140;
  top: 50%;
  top: 50svh; /* small-viewport units: the center that does not ride the URL bar */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adedge-side--left  { left: 0; }
.adedge-side--right { right: 0; }
.adedge {
  border: 0; background: none; padding: 6px 0; margin: 0;
  line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.adedge__peek {
  display: block; width: 5px; height: 32px;
  background: linear-gradient(180deg, #FF6B6B, #FFD93D, #6BCB77, #4D96FF, #C56BFF);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  transition: width 0.18s ease;
}
.adedge-side--left  .adedge__peek { border-radius: 0 7px 7px 0; }
.adedge-side--right .adedge__peek { border-radius: 7px 0 0 7px; }
.adedge:hover .adedge__peek,
.adedge:active .adedge__peek { width: 9px; }

.adedge-scrim { position: fixed; inset: 0; z-index: 310; background: rgba(0, 0, 0, 0.34); }
.adedge-panel {
  position: fixed;
  z-index: 320;
  width: max-content;
  max-width: min(84vw, 340px);
  /* A card with an image can outgrow a phone screen. Cap it to the
     small viewport — the height that ignores the URL bar — and let
     the overflow scroll inside the card rather than off the bottom. */
  max-height: calc(100vh - 20px);
  max-height: calc(100svh - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 9px 12px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.24s var(--ease), opacity 0.18s ease;
}
.adedge-panel--left  { left: 0;  border-left: none;  border-radius: 0 16px 16px 0; transform: translateX(-100%); }
.adedge-panel--right { right: 0; border-right: none; border-radius: 16px 0 0 16px; transform: translateX(100%); }
.adedge-panel.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.adedge-panel__x {
  position: absolute; top: 8px;
  border: 0; background: none; padding: 4px; line-height: 0;
  color: var(--ink-faint); cursor: pointer;
}
.adedge-panel--left  .adedge-panel__x { right: 8px; }
.adedge-panel--right .adedge-panel__x { left: 8px; }
.adedge-panel__x:hover { color: var(--ink); }
/* The mark and the slot number travel together as one cluster, so
   "Sponsored" always sits beside "#1" instead of drifting toward
   the title. Narrow screens use the short label. */
.adedge-panel__meta {
  position: absolute; top: 11px;
  display: flex; align-items: baseline; gap: 6px;
}
.adedge-panel--left  .adedge-panel__meta { right: 30px; }
.adedge-panel--right .adedge-panel__meta { left: 30px; }
.adedge-panel__mark,
.adedge-panel__slot {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.adedge-panel__mark-short { display: none; }
@media (max-width: 900px) {
  .adedge-panel__mark-long { display: none; }
  .adedge-panel__mark-short { display: inline; }
}
.adedge-panel__own { display: block; margin: 2px 0 6px; font-size: 0.8rem; color: var(--accent-2); text-decoration: none; }
.adedge-panel__own em { font-style: italic; }
.adedge-panel__own:hover { text-decoration: underline; }
.adedge-panel__line { display: block; margin: 0 0 4px; }
a.adedge-panel__line { color: var(--ink-soft); text-decoration: none; }
a.adedge-panel__line:hover { color: var(--accent-2); text-decoration: underline; }
.adedge-panel__img { max-height: 42svh; object-fit: contain; }
.slide-slots { display: flex; gap: 8px; }
.slide-slot {
  padding: 7px 14px; font-size: 0.85rem; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.slide-slot.is-picked { border-color: var(--accent-2); color: var(--accent-2); font-weight: 600; }
.slide-slot:disabled { opacity: 0.38; cursor: not-allowed; text-decoration: line-through; }
.adedge-panel__img { display: block; max-width: 100%; border-radius: 10px; margin: 6px 0 2px; }
.adedge-panel__title { margin: 2px 18px 3px 0; font-family: var(--font-display); font-size: 1rem; }
.adedge-panel--right .adedge-panel__title { margin: 2px 0 3px 18px; }
.adedge-panel__body { margin: 0 0 8px; font-size: 0.86rem; color: var(--ink-soft); max-width: 38ch; }
.adedge-panel__wx {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: 2px 0 8px;
  color: var(--ink);
  text-decoration: none;
}
.adedge-panel__wx svg { width: 34px; height: 34px; color: var(--accent); flex: 0 0 auto; }
.adedge-panel__wx b { font-size: 1.9rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1; }

/* Mobile: sit clear of the rail bar, span the width */
@media (max-width: 900px) {
  .adpanel--right,
  .adpanel--left,
  .adpanel--bottom {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: calc(42px + env(safe-area-inset-bottom));
    transform: translateY(24px);
  }
  .adpanel--right.is-in,
  .adpanel--left.is-in,
  .adpanel--bottom.is-in { transform: translateY(0); }
  .adpanel--top { left: 16px; right: 16px; width: auto; transform: translateY(-24px); }
  .adpanel--top.is-in { transform: translateY(0); }
}

/* ---------- SIGN-IN DIALOG ---------- */
.signin {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.signin.is-open { opacity: 1; }
.signin__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.signin__panel {
  position: relative;
  width: min(420px, 100%);
  max-height: 90dvh;
  overflow-y: auto;
  padding: 26px 26px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  transform: translateY(8px);
  transition: transform 0.2s var(--ease);
}
.signin.is-open .signin__panel { transform: translateY(0); }
.signin__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.signin__close:hover { color: var(--ink); background: var(--surface-alt); }
.signin__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.signin__lede {
  margin: 0 0 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.signin__label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}
.signin__input {
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 12px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s var(--ease);
}
.signin__input:focus { border-color: var(--accent); }
.signin__btn {
  width: 100%;
  padding: 11px 18px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter 0.15s var(--ease);
}
.signin__btn:hover { filter: brightness(0.95); }
.signin__btn:disabled { opacity: 0.6; cursor: default; }
.signin__btn--ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
}
.signin__err {
  margin: 10px 0 0;
  font-size: 0.84rem;
  color: var(--accent);
}
.signin__fine {
  margin: 16px 0 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ink-faint);
}
.signin__sent {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}
.acct__todo {
  color: var(--accent) !important;
  font-weight: 600;
}

/* Auto-detected peso amounts — converted inline, styled to sit
   invisibly in running text rather than looking like a link. */
.price-auto {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Signed-in face on the account icon */
.topbar__profile--photo,
.topbar__profile--initial {
  overflow: hidden;
  border-radius: 50%;
  padding: 0;
  box-shadow: inset 0 0 0 1px var(--line);
}
.topbar__profile--photo img {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;
}
.topbar__profile--initial {
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: none;
}
.topbar__profile--initial:hover {
  background: var(--accent);
  color: var(--accent-ink);
  filter: brightness(0.95);
}

/* ---------- FIRST-VISIT PREFERENCES CARD ---------- */
.prefs {
  position: fixed;
  left: 50%;
  top: calc(var(--bar-h) + 10px);
  z-index: 200;
  width: min(330px, calc(100vw - 32px));
  padding: 14px 16px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translate(-50%, -10px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.prefs.is-open { opacity: 1; transform: translate(-50%, 0); }
.prefs {
  max-height: calc(100vh - var(--bar-h) - 24px);
  max-height: calc(100svh - var(--bar-h) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.prefs__x {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.prefs__x:hover { color: var(--ink); background: var(--surface-alt); }
.prefs__title {
  margin: 0 0 10px;
  padding-right: 20px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.prefs__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.prefs__lbl {
  flex: 0 0 62px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.prefs__sel {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
}
.prefs__sel:focus { border-color: var(--accent); }
.prefs__act {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
}
.prefs__go {
  padding: 8px 16px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.prefs__go:hover { filter: brightness(0.95); }
.prefs__skip {
  padding: 8px 4px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink-faint);
  background: none;
  border: 0;
  cursor: pointer;
}
.prefs__skip:hover { color: var(--accent); }

@media (max-width: 560px) {
  .prefs { top: calc(var(--bar-h) + 6px); }
}
.prefs__sub {
  margin: 2px 0 12px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* First name under the account icon (signed-in only) */
.acct--named {
  flex-direction: column;
  align-items: center;
}
.acct--named .topbar__profile {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}
.acct--named .topbar__profile--photo img {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.acct--named .topbar__profile--initial { font-size: 0.75rem; }
.acct__name {
  font-size: 0.5625rem;
  line-height: 1;
  margin-top: 2px;
  color: var(--ink-soft);
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* =========================================================
   Share menu + QR
   ========================================================= */
.share-menu {
  position: fixed;
  z-index: 450;
  width: 210px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}
.share-menu__head {
  padding: 8px 10px 6px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.share-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}
.share-menu__item:hover { background: var(--surface-alt); color: var(--accent); }
.share-menu__url { padding: 6px 6px 4px; }
.share-menu__url input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.78rem;
}

.qr-view {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, 0.72);
  display: grid; place-items: center;
}
.qr-box {
  width: min(90vw, 340px);
  padding: 22px;
  border-radius: 16px;
  background: var(--surface);
  text-align: center;
}
.qr-box__title {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 14px;
  color: var(--ink);
}
.qr-box__code { display: grid; place-items: center; }
.qr-box__code canvas {
  width: min(72vw, 240px);
  height: auto;
  image-rendering: pixelated;
  border-radius: 8px;
}
.qr-box__url {
  margin: 12px 0 16px;
  font-size: 0.76rem;
  color: var(--ink-faint);
  word-break: break-all;
}
.qr-box__close {
  padding: 9px 22px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.qr-box__close:hover { border-color: var(--accent); color: var(--accent); }

/* =========================================================
   Slide-in site search
   Icon stands alone; the bar animates in only on demand, so
   nothing shifts the page when it is closed.
   ========================================================= */
.sitesearch { position: fixed; inset: 0; z-index: 460; }
.sitesearch__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sitesearch.is-open .sitesearch__backdrop { opacity: 1; }

.sitesearch__bar {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
}

/* Desktop: slides in from the right edge, beside the rail. */
@media (min-width: 761px) {
  .sitesearch__bar {
    top: 74px;
    right: 76px;
    width: min(420px, calc(100vw - 120px));
    border-radius: 14px;
    transform: translateX(24px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .sitesearch.is-open .sitesearch__bar { transform: translateX(0); opacity: 1; }
}

/* Mobile: slides down from the top, full width, and expands
   downward to fit the results. It only starts scrolling if the
   list is longer than the screen — and then the whole panel
   scrolls, so the last results are always reachable. */
@media (max-width: 760px) {
  .sitesearch__bar {
    top: 0; left: 0; right: 0;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 16px 16px;
    transform: translateY(-100%);
    transition: transform 0.24s ease;
  }
  .sitesearch.is-open .sitesearch__bar { transform: translateY(0); }
  /* The list grows to its full height; the panel above scrolls. */
  .sitesearch__results { max-height: none; overflow: visible; flex: 0 0 auto; }
}

.sitesearch__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.sitesearch__icon { color: var(--ink-faint); flex: 0 0 auto; }
.sitesearch__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
}
.sitesearch__close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
}
.sitesearch__close:hover { color: var(--ink); }

.sitesearch__results {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: min(56vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sitesearch__head {
  padding: 6px 10px 3px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sitesearch__item a {
  display: block;
  padding: 7px 10px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--ink);
}
.sitesearch__item.is-active a,
.sitesearch__item a:hover { background: var(--surface-alt); }
.sitesearch__title { display: block; font-weight: 600; font-size: 0.92rem; }
.sitesearch__sub { display: block; font-size: 0.78rem; color: var(--ink-faint); margin-top: 1px; }
.sitesearch__empty { padding: 16px 12px; font-size: 0.86rem; color: var(--ink-faint); }

/* =========================================================
   The daily line — first thing a visitor reads. Plain prose,
   quietly set apart, fading in when the day's data arrives.
   ========================================================= */
.today-line {
  margin: 14px 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.today-line:empty { display: none; }
.today-line.is-ready { opacity: 1; transform: none; }
.today-line__date { font-weight: 600; color: var(--ink); }
@media (min-width: 620px) {
  .today-line { font-size: 1.08rem; max-width: 62ch; }
}

/* ---------- MESSAGES BADGE (site-wide unread signal) ---------- */
/* One dot that carries its own number, used on the rail control,
   on the account avatar, and against the menu item. */
.dgt-msgdot {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #E5484D;
  border: 2px solid var(--surface);
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}
.dgt-msgdot[hidden] { display: none; }

.rail-msg { position: relative; }

/* The rail rests faint. Something waiting overrides that until it
   has been read — the whole point of a signal. */
.rail--right.is-alerting { opacity: 1; }
.rail-msg.is-alerting { color: var(--accent); }

.acct__msgitem::after {
  content: attr(data-count);
  margin-left: 6px;
  padding: 0 5px;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  background: #E5484D;
  border-radius: 999px;
}
.acct__msgitem[data-count=""]::after { content: none; }

/* ---------- ANCHOR LANDING ---------- */
/* The top banner is sticky, so an element scrolled to the top of the
   viewport lands underneath it and its heading is hidden. Every
   in-page anchor stops clear of the bar instead. */
:target { scroll-margin-top: calc(var(--bar-h) + 16px); }

/* ---------- Signed-in personalization ---------- */
/* Activity since your previous visit — a quiet mark, not a shout. */
.forum-feed__item--new { position: relative; }
.forum-feed__newdot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent-2);
}
/* The star on the map sheet. */
.poi-sheet__save {
  position: absolute;
  top: 14px;
  right: 52px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-faint);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.poi-sheet__save.is-on { color: #C9A227; border-color: color-mix(in srgb, #C9A227 45%, var(--line)); }
.poi-sheet__save:hover { color: var(--accent); }
.poi-sheet__save.is-on:hover { color: #C9A227; }