/* ============================================================
   MadridPlanz — one stylesheet, five themes, no framework.
   Every colour is a variable so a theme swap is a token swap.
   ============================================================ */
:root, [data-theme="dia"] {
  --bg: #faf6ef; --surface: #ffffff; --text: #26211d; --muted: #82786d;
  --line: #eae1d3; --accent: #e63946; --accent2: #f4a261; --on-accent: #fff;
  --hero: linear-gradient(120deg, #e63946, #f4652f 55%, #ffb703);
  --shadow: 0 2px 10px rgba(60,40,20,.07); --shadow-lift: 0 10px 28px rgba(60,40,20,.14);
  --glow: none;
}
[data-theme="noche"] {
  --bg: #17141f; --surface: #211d2c; --text: #efeaf5; --muted: #9a92a8;
  --line: #332d42; --accent: #ff6b6b; --accent2: #ffd166; --on-accent: #1d1121;
  --hero: linear-gradient(120deg, #5f0f40, #9a031e 50%, #fb8b24);
  --shadow: 0 2px 10px rgba(0,0,0,.35); --shadow-lift: 0 10px 28px rgba(0,0,0,.5);
  --glow: none;
}
[data-theme="vermu"] {
  --bg: #ffefd8; --surface: #fffaf0; --text: #47240f; --muted: #a06a3e;
  --line: #f2dcbb; --accent: #d1495b; --accent2: #ff8a3d; --on-accent: #fff;
  --hero: linear-gradient(120deg, #d1495b, #ff8a3d 60%, #ffd166);
  --shadow: 0 2px 10px rgba(120,60,10,.10); --shadow-lift: 0 10px 28px rgba(120,60,10,.18);
  --glow: none;
}
[data-theme="neon"] {
  --bg: #0c0420; --surface: #170a30; --text: #f2e9ff; --muted: #a78fc9;
  --line: #2e1b52; --accent: #ff2ea6; --accent2: #00e5ff; --on-accent: #fff;
  --hero: linear-gradient(120deg, #ff2ea6, #7b2ff7 55%, #00e5ff);
  --shadow: 0 2px 12px rgba(123,47,247,.25); --shadow-lift: 0 0 24px rgba(255,46,166,.45);
  --glow: 0 0 14px rgba(255,46,166,.5);
}
[data-theme="retiro"] {
  --bg: #eef4e8; --surface: #ffffff; --text: #22321f; --muted: #6d7f68;
  --line: #d9e4d0; --accent: #2a9d8f; --accent2: #e9c46a; --on-accent: #fff;
  --hero: linear-gradient(120deg, #2a9d8f, #43aa8b 55%, #90be6d);
  --shadow: 0 2px 10px rgba(30,60,30,.08); --shadow-lift: 0 10px 28px rgba(30,60,30,.16);
  --glow: none;
}

/* ============ base ============ */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Jumping to #talk used to land the heading underneath the sticky bar. */
  scroll-padding-top: 72px;
  /* Stop iOS enlarging text in landscape, which silently breaks layouts. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* The page must never scroll sideways. The real causes are fixed below
   (grid tracks use minmax(0,…) so they cannot blow out); this is the
   backstop for anything a future listing throws at it. `clip` rather than
   `hidden` on purpose — `hidden` would make this a scroll container and
   break `position: sticky` on the header. */
html, body { overflow-x: clip; max-width: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transition: background .25s, color .25s;
  /* No sideways rubber-banding into a neighbouring history entry. */
  overscroll-behavior-x: none;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Removes the 300ms tap delay and softens the grey flash on tap. */
a, button, .btn, label, summary, input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(128, 128, 128, .15);
}
img { max-width: 100%; height: auto; }
/* Anything user-written can contain a 60-character unbroken URL. */
.prose, .ad-body, .card-snip, .comment p, .profile-bio, .profile-links,
.trow-main, .bubble, .foot-blurb { overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 1.7rem; font-weight: 800; }
h2 { font-size: 1.2rem; font-weight: 800; }
h3 { font-size: 1rem; font-weight: 750; }
:root { --gutter: 16px; }
.wrap {
  max-width: 1180px; margin: 0 auto;
  /* max() keeps content clear of a notch in landscape without adding
     padding on a normal screen. */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.main { min-height: 62vh; padding-bottom: 32px; }
.empty { color: var(--muted); padding: 18px 4px; }
.mt { margin-top: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
code { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: .9em; }
.inline-form { display: inline; margin: 0; }

/* ============ buttons, chips, tags ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); color: var(--on-accent); border: 1px solid transparent;
  padding: 10px 18px; border-radius: 12px; font-weight: 700; font-size: .95rem;
  cursor: pointer; text-decoration: none !important;
  /* A button is one line. If the label is too long for the space, shorten
     the label — never let it stack into a two-line lump. */
  white-space: nowrap;
  transition: transform .12s, box-shadow .12s, filter .12s; box-shadow: var(--glow);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 6px 12px; font-size: .85rem; border-radius: 10px; }
.btn-lg { padding: 14px 24px; font-size: 1.05rem; }
.btn-block { width: 100%; margin-bottom: 8px; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); box-shadow: none; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { background: transparent; color: #d13030; border-color: color-mix(in srgb, #d13030 40%, transparent); box-shadow: none; }
.btn-danger:hover { background: #d13030; color: #fff; }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: 10px; font-size: 1.05rem; padding: 6px 9px; cursor: pointer; color: var(--text); }
.icon-btn:hover { border-color: var(--accent); }
.linklike { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 2px 10px; align-items: center; }
.chip {
  --cat: var(--accent);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1.5px solid color-mix(in srgb, var(--cat) 45%, transparent);
  background: color-mix(in srgb, var(--cat) 9%, var(--surface));
  color: var(--text); border-radius: 999px; padding: 6px 14px; font-size: .88rem; font-weight: 600;
  text-decoration: none !important; transition: transform .12s, background .12s;
}
.chip b { color: var(--cat); margin-left: 2px; }
.chip:hover { transform: translateY(-1px); }
.chip.active { background: var(--cat); color: #fff; border-color: var(--cat); }
.chip.active b { color: #fff; }
.tag {
  display: inline-block; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; font-size: .78rem; color: var(--muted);
  text-decoration: none !important;
}
.tag.ok { color: #1a7f4b; border-color: color-mix(in srgb, #1a7f4b 40%, transparent); }
.tag.warn { color: #c04a12; border-color: color-mix(in srgb, #c04a12 40%, transparent); }
.badge { display: inline-block; border-radius: 8px; padding: 2px 9px; font-size: .8rem; font-weight: 700; }
.badge.price { background: color-mix(in srgb, var(--accent2) 25%, var(--surface)); color: var(--text); }
.badge.price.free { background: #06a77d; color: #fff; }
.badge.feat { background: #ffb703; color: #4a3200; }
.badge.official { background: #2a9d8f; color: #fff; }
.badge.event { background: color-mix(in srgb, #8338ec 18%, var(--surface)); color: var(--text); }
.lang-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.wide-hide { display: none; }

/* ============ header ============ */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.head-wrap { display: flex; align-items: center; gap: 14px; height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; color: var(--text); }
.logo-ico { width: 40px; height: 40px; border-radius: 10px; }
.logo-sm .logo-ico { width: 28px; height: 28px; border-radius: 8px; }
.logo-word { font-size: 1.2rem; font-weight: 800; letter-spacing: -.5px; }
.logo-word b { color: var(--accent); }
.head-search { flex: 1; max-width: 320px; }
.head-search input { width: 100%; }
.head-nav { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.head-link { color: var(--text); font-weight: 600; font-size: .93rem; white-space: nowrap; }
.head-link.on { color: var(--accent); }
.head-drop { background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.btn-post { box-shadow: var(--shadow); }
.site-notice { background: var(--hero); color: #fff; text-align: center; padding: 7px 16px; font-weight: 600; font-size: .9rem; }

[data-menu] { position: relative; }
.menu-drop {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 215px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lift); padding: 6px; z-index: 60;
}
[data-menu].open .menu-drop { display: block; }
.menu-drop a, .menu-drop form button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px;
  color: var(--text); text-decoration: none !important; background: none; border: 0;
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
}
.menu-drop a:hover, .menu-drop form button:hover { background: var(--bg); }
.menu-head { padding: 8px 12px 4px; color: var(--muted); font-size: .8rem; }
.wide-drop { min-width: 320px; }
.wide-drop a { display: flex; gap: 10px; align-items: center; }
.dm-emoji { font-size: 1.3rem; }
.dm-txt { display: flex; flex-direction: column; line-height: 1.25; }
.dm-txt small { color: var(--muted); font-weight: 400; font-size: .78rem; }
.acct-btn {
  display: inline-flex; background: none; border: 0; padding: 0; cursor: pointer;
  position: relative; border-radius: 50%; line-height: 0;
  box-shadow: 0 0 0 0 transparent; transition: box-shadow .14s, transform .14s;
}
.acct-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.acct-btn.on { box-shadow: 0 0 0 3px var(--accent); }

.theme-opt {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; column-gap: 10px;
  width: 100%; padding: 8px 12px; background: none; border: 0; border-radius: 9px;
  font: inherit; font-weight: 600; color: var(--text); cursor: pointer; text-align: left;
}
.theme-opt small { grid-column: 2; color: var(--muted); font-weight: 400; }
.theme-opt:hover { background: var(--bg); }
.theme-opt.on { outline: 2px solid var(--accent); }
.swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); }
.sw-dia { background: linear-gradient(135deg, #faf6ef 50%, #e63946 50%); }
.sw-noche { background: linear-gradient(135deg, #17141f 50%, #ff6b6b 50%); }
.sw-vermu { background: linear-gradient(135deg, #ffefd8 50%, #ff8a3d 50%); }
.sw-neon { background: linear-gradient(135deg, #0c0420 50%, #ff2ea6 50%); }
.sw-retiro { background: linear-gradient(135deg, #eef4e8 50%, #2a9d8f 50%); }
.nav-badge {
  display: inline-block; min-width: 18px; text-align: center; background: var(--accent);
  color: var(--on-accent); border-radius: 999px; font-size: .72rem; font-weight: 800; padding: 1px 5px;
}
.acct-btn .nav-badge { position: absolute; top: -4px; right: -6px; }

/* ============ flash ============ */
.flash {
  position: sticky; top: 68px; z-index: 49; margin: 10px auto; max-width: 640px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--surface); border: 1.5px solid #1a7f4b; color: var(--text);
  border-radius: 12px; padding: 10px 16px; box-shadow: var(--shadow-lift); font-weight: 600;
}
.flash-err { border-color: #d13030; }
.flash-x { background: none; border: 0; cursor: pointer; font-size: 1rem; color: var(--muted); }

/* ============ hero + live strip ============ */
.hero { margin: 18px 0 8px; border-radius: 22px; background: var(--hero); color: #fff; box-shadow: var(--shadow-lift); overflow: hidden; }
.hero-inner { padding: 38px 30px 26px; }
.hero h1 { font-size: clamp(1.5rem, 4vw, 2.35rem); margin-bottom: 6px; text-shadow: 0 1px 3px rgba(0,0,0,.2); }
.hero .hi { display: block; opacity: .95; }
.hero-sub { max-width: 660px; margin: 0 0 18px; opacity: .94; }
.hero-search { display: flex; gap: 8px; max-width: 560px; }
.hero-search input { flex: 1; border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.hero-search .btn { background: #26211d; color: #fff; }
.hero-chips { margin-top: 16px; padding-bottom: 4px; }
.hero-chips .chip { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; backdrop-filter: blur(4px); }
.hero-chips .chip b { color: #ffe66d; }

.live-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 18px; margin: 14px 0 4px; box-shadow: var(--shadow);
}
.ls-item { display: flex; flex-direction: column; line-height: 1.2; }
.ls-item b { font-size: 1.05rem; font-weight: 800; }
.ls-item small { color: var(--muted); font-size: .76rem; }
.ls-temp b { font-size: 1.35rem; }
.ls-more { margin-left: auto; font-weight: 700; font-size: .88rem; white-space: nowrap; }

/* ============ sections / grids ============ */
.section { margin: 26px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.see-all { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 16px; }
.page-head { margin: 22px 0 10px; }
.page-head.narrow { max-width: 720px; margin-inline: auto; }
.page-sub { color: var(--muted); margin: 0; }
.crumbs { color: var(--muted); font-size: .88rem; display: inline-block; margin-top: 14px; }
.crumbs a { color: var(--muted); }
.sec-head { display: flex; gap: 16px; align-items: center; }
.sec-head-emoji {
  font-size: 2rem; width: 62px; height: 62px; flex: 0 0 62px; display: grid; place-items: center;
  border-radius: 18px; background: color-mix(in srgb, var(--cat) 14%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--cat) 40%, transparent);
}
.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 26px 0;
  background: var(--surface); border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 16px; padding: 16px 20px; color: var(--muted);
}
.cta-band b { color: var(--text); }
.cta-band .btn { margin-left: auto; }

/* section tiles on the home page */
.sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.sec-tile {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px;
  background: var(--surface); border: 1.5px solid var(--line); border-left: 5px solid var(--cat);
  border-radius: 14px; color: var(--text); text-decoration: none !important;
  box-shadow: var(--shadow); transition: transform .14s, box-shadow .14s, border-color .14s;
}
.sec-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--cat); }
.st-emoji { font-size: 1.6rem; }
.sec-tile small { color: var(--muted); font-size: .8rem; }
.st-count { position: absolute; top: 12px; right: 14px; color: var(--cat); font-weight: 800; font-size: .9rem; }

/* ============ cards ============ */
.card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; text-decoration: none !important; color: var(--text);
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover { transform: translateY(-3px) rotate(-.3deg); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card-media { position: relative; aspect-ratio: 16/10; background: var(--bg); }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--cat), color-mix(in srgb, var(--cat) 55%, var(--bg))); }
.card-ph span { font-size: 46px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.card-media .feat { position: absolute; top: 10px; left: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.card-media .official { position: absolute; top: 10px; right: 10px; }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-cat { font-size: .74rem; font-weight: 800; color: var(--cat); text-transform: uppercase; letter-spacing: .4px; }
.card-title { font-size: 1.02rem; font-weight: 750; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-snip { color: var(--muted); font-size: .86rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; }
.meta-item { color: var(--muted); font-size: .8rem; }

/* compact rows */
.row-list { display: flex; flex-direction: column; gap: 8px; }
.trow {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  padding: 10px 14px; color: var(--text); text-decoration: none !important;
  transition: border-color .12s, transform .12s;
}
.trow:hover { border-color: var(--accent); transform: translateX(2px); }
.trow-emoji {
  font-size: 1.2rem; width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
  border-radius: 11px; background: color-mix(in srgb, var(--cat) 14%, var(--bg));
}
.trow-main { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.trow-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow-main small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-row { display: flex; align-items: center; gap: 6px; }
.plan-row form, .plan-row .btn { flex-shrink: 0; }
.day-head { margin: 24px 0 10px; font-size: 1.05rem; color: var(--accent); }

/* group cards */
.gcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.gcard {
  display: flex; flex-direction: column; gap: 4px; padding: 18px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px;
  color: var(--text); text-decoration: none !important; box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.gcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--cat); }
.gcard-emoji { font-size: 2rem; }
.gcard small { color: var(--muted); font-size: .84rem; }
.gcard-foot { margin-top: 8px; font-size: .78rem; font-weight: 700; color: var(--cat); }
.grow-emoji {
  font-size: 1.1rem; width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
  border-radius: 10px; background: var(--bg);
}
.group-head { display: flex; gap: 18px; align-items: center; margin: 16px 0; }
.group-emoji {
  font-size: 2.4rem; width: 84px; height: 84px; flex: 0 0 84px; display: grid; place-items: center;
  border-radius: 22px; background: color-mix(in srgb, var(--cat) 14%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--cat) 40%, transparent);
}
.group-photo { width: 84px; height: 84px; object-fit: cover; border-radius: 22px; flex: 0 0 84px; }

/* ============ home layout ============ */
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
/* Grid and flex children default to min-width:auto, which is what lets a
   long word or a nested grid push a whole column past the viewport. */
.home-cols > *, .profile > * { min-width: 0; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.member-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.member-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; color: var(--text); text-decoration: none !important; }
.member-row:hover { background: var(--bg); }
.member-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.member-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-info small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ avatars ============ */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-lg { width: 84px; height: 84px; }
.avatar-ph {
  display: inline-grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h, 20) 65% 55%), hsl(calc(var(--h, 20) + 40) 65% 45%));
}
.avatar.avatar-lg.avatar-ph { font-size: 2rem; }
.big-ph { font-size: 4rem; }
.people-strip { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============ filters / pagination ============ */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0 18px; }
.filter-bar input[type="search"] { flex: 1; min-width: 160px; max-width: 300px; }
.fb-field { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.fb-field small { color: var(--muted); font-size: .72rem; }
.filter-count { color: var(--muted); font-size: .88rem; margin-left: auto; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px 0; }
.page-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 16px; font-weight: 700; text-decoration: none !important; }
.page-info { color: var(--muted); font-size: .9rem; }

/* ============ detail page ============ */
/* head and body stack in the left column; the rail holds the action box
   and the sidebar cards on the right. Named areas rather than implicit
   placement so the phone layout can pull just the action out of the rail. */
.ad-page {
  display: grid; gap: 24px; margin-top: 12px; align-items: start;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  grid-template-areas: "head rail" "body rail";
}
.ad-head-col { grid-area: head; min-width: 0; }
.ad-body-col { grid-area: body; min-width: 0; }
.ad-rail { grid-area: rail; min-width: 0; }
.gallery-main { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.gallery-main img { width: 100%; max-height: 460px; object-fit: contain; display: block; background: #111; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.gallery-thumbs img { width: 74px; height: 56px; object-fit: cover; border-radius: 10px; cursor: pointer; border: 2px solid transparent; opacity: .75; }
.gallery-thumbs img.on, .gallery-thumbs img:hover { border-color: var(--accent); opacity: 1; }
.gallery-ph { border-radius: 16px; aspect-ratio: 16/8; display: grid; place-items: center; background: linear-gradient(135deg, var(--cat), color-mix(in srgb, var(--cat) 55%, var(--bg))); }
.gallery-ph span { font-size: 72px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.ad-head { margin-top: 16px; }
.ad-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.ad-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: .88rem; }
.ad-body { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin-top: 14px; box-shadow: var(--shadow); }
.report-box { margin-top: 20px; color: var(--muted); font-size: .88rem; }
.report-box form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-width: 520px; }
.poster-card, .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.poster-row { display: flex; gap: 12px; align-items: center; color: var(--text); text-decoration: none !important; margin-bottom: 10px; }
.poster-row small { display: block; color: var(--muted); }
.poster-anon { color: var(--muted); }
.form-hint { color: var(--muted); font-size: .85rem; }

.stop-list { counter-reset: stop; list-style: none; padding: 0; margin: 0; }
.stop {
  counter-increment: stop; position: relative; padding: 14px 16px 14px 54px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.stop::before {
  content: counter(stop); position: absolute; left: 14px; top: 14px;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: .85rem;
}
.stop p { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }
.stop-map { font-size: .82rem; font-weight: 700; }
.stop .tag { margin-left: 8px; }

.comment-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.comment { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.comment small { color: var(--muted); margin-left: 8px; font-size: .78rem; }
.comment p { margin: 4px 0 0; }
.comment-form { display: flex; gap: 8px; align-items: flex-end; max-width: 760px; }
.comment-form textarea { flex: 1; resize: vertical; }

.status-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 14px; padding: 12px 16px;
}
.status-card small { color: var(--muted); }
.status-card .see-all { margin-left: auto; }

/* guides */
.guide { max-width: 760px; margin: 0 auto; }
.guide-meta { color: var(--muted); font-size: .85rem; margin-bottom: 16px; }
.guide-hero { width: 100%; border-radius: 16px; margin-bottom: 18px; }
.guide-save { max-width: 760px; margin: 0 auto 20px; }
.prose { line-height: 1.7; }
.prose h2 { margin-top: 1.6em; font-size: 1.25rem; }
.prose h3 { margin-top: 1.3em; font-size: 1.05rem; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }
.prose p { margin: 0 0 1em; }

/* ============ forms ============ */
input, textarea, select {
  width: 100%; min-width: 0; background: var(--surface); color: var(--text);
  border: 1.5px solid var(--line); border-radius: 11px; padding: 10px 13px;
  font: inherit; font-size: .95rem;
}
input:focus, textarea:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { width: auto; }
input[type="file"] { padding: 8px; border-style: dashed; cursor: pointer; }
label { display: block; font-weight: 650; font-size: .92rem; margin-bottom: 12px; }
label input, label textarea, label select { margin-top: 5px; font-weight: 400; }
label small { color: var(--muted); font-weight: 400; }
select { width: auto; max-width: 100%; }
.filter-bar select, .fb-field select { width: auto; }
.form-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; max-width: 760px; margin: 0 auto 22px; box-shadow: var(--shadow);
}
.form-card fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.form-card legend { font-weight: 750; padding: 0; margin-bottom: 8px; }
.form-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.form-error { background: color-mix(in srgb, #d13030 12%, var(--surface)); border: 1.5px solid #d13030; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; }
.check { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; margin: 0 0 12px; }

.cat-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 10px; }
.cat-pick {
  position: relative; border: 2px solid var(--line); border-radius: 14px; padding: 12px;
  cursor: pointer; margin: 0; display: flex; flex-direction: column; gap: 2px;
  transition: border-color .12s, background .12s;
}
.cat-pick input { position: absolute; opacity: 0; }
.cat-pick .cp-emoji { font-size: 1.5rem; }
.cat-pick small { color: var(--muted); font-weight: 400; font-size: .76rem; }
.cat-pick:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.cat-pick:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

.status-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.status-preset {
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font: inherit; font-size: .86rem; cursor: pointer; color: var(--text);
}
.status-preset:hover { border-color: var(--accent); color: var(--accent); }
.status-editor {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px;
}
.status-editor small { display: block; color: var(--muted); }
.status-editor .btn { margin-left: auto; }

.photo-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.photo-existing { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: center; margin: 0; font-weight: 400; }
.photo-existing img { width: 104px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.photo-existing span { font-size: .78rem; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.photo-existing form { margin: 0; }
.photo-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.photo-preview img { width: 84px; height: 68px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.dash-photo.is-main img { border: 3px solid #ffb703; }
.main-star { color: #b57e00; font-size: .78rem; font-weight: 800; }

.code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--bg); border: 2px dashed var(--accent); border-radius: 12px; padding: 12px 16px; margin: 10px 0 16px;
}
.code-box code { font-size: 1.2rem; font-weight: 800; letter-spacing: 1px; border: 0; background: none; }
.code-box .code-url { font-size: .84rem; font-weight: 500; letter-spacing: 0; word-break: break-all; }
.manage-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.manage-stats { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: .88rem; margin-bottom: 14px; }
.manage-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.manage-actions form { margin: 0; }
.success-card { text-align: center; }
.success-card .code-box { text-align: left; }

/* ============ people / profile ============ */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.person-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 16px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  color: var(--text); text-decoration: none !important; box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.person-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.person-card small { color: var(--muted); }
.person-status { color: var(--accent); font-size: .82rem; font-weight: 600; }
.profile { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; margin-top: 18px; align-items: start; }
.profile-col-a, .profile-col-b { min-width: 0; }
.profile-thumbs { margin-bottom: 12px; }
.profile-main { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); display: block; }
.profile-main.avatar-ph { display: grid; }
.profile-photos { margin-bottom: 14px; }
.profile-name { font-size: 1.5rem; margin-bottom: 2px; }
.profile-handle { color: var(--muted); margin: 0 0 8px; font-size: .9rem; }
.profile-bio { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin: 10px 0; box-shadow: var(--shadow); }
.profile-bio p { margin: 0; }
.profile-links { font-size: .88rem; word-break: break-all; }

/* ============ auth / dashboard ============ */
.auth-wrap { display: grid; place-items: center; min-height: 55vh; padding: 30px 0; }
.auth-card { width: 100%; max-width: 430px; }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px; margin: 16px 0 8px; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.stat-tile b { display: block; font-size: 1.45rem; font-weight: 800; }
.stat-tile span { color: var(--muted); font-size: .85rem; }
.stat-tile small { display: block; color: var(--accent); font-size: .78rem; font-weight: 700; }

/* ============ messages ============ */
.thread-list { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.thread-row {
  display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px;
  color: var(--text); text-decoration: none !important; transition: border-color .12s;
}
.thread-row:hover { border-color: var(--accent); }
.thread-row.unread { border-left: 4px solid var(--accent); }
.thread-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.thread-info small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-ad { color: var(--accent) !important; font-weight: 600; }
.thread-when { color: var(--muted); font-size: .8rem; text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.chat-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px; max-width: 760px; min-height: 200px; max-height: 55vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
}
.bubble-row { display: flex; }
.bubble-row.mine { justify-content: flex-end; }
.bubble { max-width: 78%; background: var(--bg); border-radius: 16px 16px 16px 4px; padding: 9px 14px; }
.bubble-row.mine .bubble { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-radius: 16px 16px 4px 16px; }
.bubble small { display: block; color: var(--muted); font-size: .72rem; margin-top: 3px; }
.chat-form { display: flex; gap: 8px; max-width: 760px; align-items: flex-end; }
.chat-form textarea { flex: 1; resize: vertical; }

/* ============ maps ============ */
.big-map { height: 68vh; min-height: 420px; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow); z-index: 1; }
.mini-map { height: 190px; border-radius: 12px; margin-bottom: 10px; border: 1px solid var(--line); z-index: 1; }
.pick-map { height: 280px; border-radius: 12px; border: 1.5px solid var(--line); margin-bottom: 8px; z-index: 1; }
.map-filters { gap: 14px; }
.map-filters .check { margin-bottom: 0; }
.map-pin {
  display: grid; place-items: center; width: 34px; height: 34px; font-size: 17px;
  background: var(--surface); border: 2.5px solid var(--pin, var(--accent));
  border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.map-pin > span { transform: rotate(45deg); }
.map-pin.person { border-radius: 50%; border-style: solid; border-color: #4361ee; overflow: hidden; transform: none; }
.map-pin.person > span { transform: none; }
.map-pin.person img { width: 100%; height: 100%; object-fit: cover; }
.leaflet-popup-content { margin: 10px 14px; font: inherit; }
.leaflet-popup-content b { display: block; margin-bottom: 2px; }
.leaflet-popup-content small { color: #666; }
.fc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: 10px; }
.fc-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.fc-emoji { font-size: 1.7rem; }
.fc-t { font-weight: 800; }
.fc-card small { color: var(--muted); font-size: .78rem; }

/* ============ admin ============ */
.admin-head { margin-bottom: 10px; }
.admin-nav, .tab-nav { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.admin-nav a, .tab-nav a {
  padding: 9px 14px; border-radius: 11px 11px 0 0; color: var(--text); font-weight: 650;
  font-size: .9rem; text-decoration: none !important; white-space: nowrap;
}
.admin-nav a.on, .tab-nav a.on { background: var(--surface); border: 2px solid var(--line); border-bottom-color: var(--surface); margin-bottom: -2px; color: var(--accent); }
.admin-nav .admin-out, .tab-nav .tab-out { margin-left: auto; color: var(--muted); font-weight: 500; }
.tab-nav a .nav-badge { margin-left: 2px; }
.range-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; color: var(--muted); font-size: .85rem; }
.range-btn { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 5px 11px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; color: var(--text); width: auto; }
.range-btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.admin-tiles { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
.chart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin: 16px 0; }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); }
.chart-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: .9rem; }
.chart-head span { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.bar-chart { width: 100%; height: auto; }
.bar-chart rect { opacity: .85; }
.bar-chart rect:hover { opacity: 1; }
.bar-chart text { fill: var(--muted); font-size: 9px; }

.hbars { display: flex; flex-direction: column; gap: 6px; }
.hbar { display: grid; grid-template-columns: minmax(0, 1.5fr) 2fr auto; gap: 8px; align-items: center; font-size: .84rem; }
.hb-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { background: var(--bg); border-radius: 5px; height: 12px; overflow: hidden; }
.hb-fill { display: block; height: 100%; background: var(--accent); opacity: .8; border-radius: 5px; }
.hb-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.hb-v small { color: var(--muted); font-weight: 400; margin-left: 4px; }

.hour-row { display: flex; align-items: flex-end; gap: 2px; height: 80px; }
.hour-cell { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.hour-fill { width: 100%; background: var(--accent2); border-radius: 2px 2px 0 0; min-height: 2px; }
.hour-cell small { position: absolute; bottom: -14px; color: var(--muted); font-size: .62rem; }
.chart-card:has(.hour-row) { padding-bottom: 28px; }

.feed { display: flex; flex-direction: column; gap: 6px; }
.feed-row { display: flex; gap: 10px; align-items: baseline; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: .88rem; }
.feed-row small { margin-left: auto; color: var(--muted); white-space: nowrap; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th { text-align: left; padding: 11px 14px; border-bottom: 2px solid var(--line); color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; }
.admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table .avatar { width: 28px; height: 28px; vertical-align: middle; }
.row-off { opacity: .55; }
.cell-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.cell-actions form { margin: 0; }
.report-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin-bottom: 10px; }
.report-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.report-head small { color: var(--muted); }
.report-details { color: var(--muted); font-style: italic; }
.danger-zone { border-color: color-mix(in srgb, #d13030 45%, var(--line)); }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: start; }
.settings-grid .form-card { margin: 0; max-width: none; }

/* Logo picker — a radio grid of live SVG swatches. The checker backdrop
   makes both white-tile and black-tile marks read against any admin theme. */
.logo-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 4px 0 2px; }
.logo-opt { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1.5px solid var(--line);
  border-radius: 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.logo-opt:hover { border-color: var(--accent); }
.logo-opt.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.logo-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.logo-swatch { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; padding: 4px; border: 1px solid var(--line);
  background-image:
    linear-gradient(45deg, #8888881f 25%, transparent 25%, transparent 75%, #8888881f 75%),
    linear-gradient(45deg, #8888881f 25%, transparent 25%, transparent 75%, #8888881f 75%);
  background-size: 12px 12px; background-position: 0 0, 6px 6px; }
.logo-swatch svg { display: block; width: 100%; height: 100%; }
.logo-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.logo-meta b { font-weight: 700; }
.logo-meta small { color: var(--muted); font-size: .78rem; }

.track-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.track-col h3 { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.todo-add { max-width: none; }
.todo-card {
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--pr, var(--line));
  border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px;
}
.todo-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.todo-top small { color: var(--muted); white-space: nowrap; font-size: .76rem; }
.todo-prio { font-weight: 800; font-size: .76rem; color: var(--pr, var(--text)); }
.todo-text { margin: 0; font-size: .9rem; word-break: break-word; }
.todo-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.todo-done { opacity: .6; }
.todo-done .todo-text b { text-decoration: line-through; }
.todo-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.todo-actions form { margin: 0; }
.todo-actions select { padding: 4px 8px; font-size: .8rem; }

/* ============ footer / mobile nav / misc ============ */
.site-foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: 34px; padding: 28px 0 90px; }
.foot-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-blurb { color: var(--muted); font-size: .87rem; max-width: 300px; }
.foot-links { display: flex; flex-direction: column; gap: 6px; font-size: .89rem; }
.foot-links b { color: var(--text); margin-bottom: 2px; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--accent); }
.foot-note { color: var(--muted); font-size: .8rem; margin-top: 22px; }
.logo-sm .logo-word { font-size: 1rem; }

/* Five equal fifths of the viewport. It was a flex row with `flex: 1`
   children, which still respects each child's min-content width — so a
   long label made the bar wider than the screen and took the whole page
   sideways with it. A grid of `1fr` columns cannot do that, and the label
   ellipsises instead. */
.mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
  width: 100%; max-width: 100%;
  grid-template-columns: repeat(5, 1fr);
  /* Near-opaque: at 94% the article scrolling underneath showed through
     and made the labels hard to read. The blur is a nicety, the opacity is
     the part that matters. */
  background: color-mix(in srgb, var(--surface) 98%, transparent);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, .07);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav a {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  /* 44px of vertical target before the safe-area padding: the smallest
     thing a thumb should have to hit. */
  padding: 8px 2px 7px; min-height: 44px;
  color: var(--muted); font-size: .66rem; font-weight: 650;
  text-decoration: none !important;
}
.mn-ico { font-size: 1.3rem; line-height: 1.1; position: relative; }
.mn-txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-nav a.on { color: var(--accent); }
.mobile-nav a:active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mobile-nav .mnav-post .mn-ico {
  background: var(--hero); color: #fff; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; margin-top: -15px; box-shadow: var(--shadow-lift);
  font-size: 1.4rem; font-weight: 800;
}
.mobile-nav .nav-badge { position: absolute; top: -3px; right: -9px; }

.simple-page { text-align: center; padding: 60px 16px; }
.simple-emoji { font-size: 4rem; margin-bottom: 10px; }
.simple-page p { color: var(--muted); max-width: 420px; margin: 0 auto 22px; }

/* ============ daily brief ============ */
.brief-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin: 20px 0 12px; }
.brief-kicker { margin: 0; color: var(--accent); font-weight: 800; font-size: .74rem; letter-spacing: 1.2px; text-transform: uppercase; }
.brief-head h1 { margin: 0; display: flex; flex-direction: column; }
.brief-date { color: var(--muted); font-size: .92rem; font-weight: 500; }
.brief-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.fiesta-banner {
  display: flex; align-items: center; gap: 14px; margin: 14px 0;
  background: linear-gradient(100deg, color-mix(in srgb, #c9184a 16%, var(--surface)), var(--surface));
  border: 1.5px solid color-mix(in srgb, #c9184a 40%, var(--line));
  border-radius: 16px; padding: 14px 18px;
}
.fb-emoji { font-size: 2rem; flex: 0 0 auto; }
/* Without this the text block's content width wins and the emoji ends up
   alone on its own line on a narrow screen. */
.fiesta-banner > div { flex: 1 1 0; min-width: 0; }
.fiesta-banner small { display: block; color: var(--muted); }
.fiesta-banner .see-all { margin-left: auto; white-space: nowrap; }

.daypart .section-head h2 { display: flex; align-items: baseline; gap: 8px; }
.dp-hint { color: var(--muted); font-weight: 400; font-size: .78rem; }
.dp-count {
  min-width: 26px; text-align: center; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 9px; color: var(--muted); font-size: .8rem; font-weight: 700;
}

/* An occurrence: the time leads, because on a calendar that is the thing
   you scan for. */
.occ-list { display: flex; flex-direction: column; gap: 7px; }
.occ {
  --cat: var(--accent);
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--cat); border-radius: 12px;
  padding: 9px 13px; color: var(--text); text-decoration: none !important;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.occ:hover { transform: translateX(2px); border-color: var(--cat); box-shadow: var(--shadow); }
.occ-time {
  flex: 0 0 52px; display: flex; flex-direction: column; line-height: 1.15;
  font-weight: 800; font-size: .88rem; font-variant-numeric: tabular-nums;
}
.occ-time small { color: var(--muted); font-weight: 500; font-size: .72rem; }
.occ-time.all { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.occ-emoji { font-size: 1.15rem; flex: 0 0 auto; }
.occ-main { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.occ-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occ-main small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occ-tail { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.deal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.deal-card {
  display: flex; flex-direction: column; gap: 3px; padding: 14px;
  background: color-mix(in srgb, #f77f00 8%, var(--surface));
  border: 1.5px solid color-mix(in srgb, #f77f00 35%, var(--line));
  border-radius: 14px; color: var(--text); text-decoration: none !important;
  transition: transform .13s, box-shadow .13s;
}
.deal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.deal-emoji { font-size: 1.6rem; }
.deal-card small { color: var(--muted); font-size: .82rem; }
.deal-foot { margin-top: 6px; font-size: .76rem; font-weight: 700; color: #b35c00; }
[data-theme="noche"] .deal-foot, [data-theme="neon"] .deal-foot { color: var(--accent2); }

.brief-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; margin: 28px 0; }
.brief-next {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 18px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px;
  color: var(--text); text-decoration: none !important; transition: border-color .13s, transform .13s;
}
.brief-next:hover { border-color: var(--accent); transform: translateY(-2px); }
.brief-next span { color: var(--muted); font-size: .82rem; }
.brief-next b { color: var(--accent); }

/* ============ calendar ============ */
.cal-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; }
.cal-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.cal-jump { display: flex; gap: 6px; margin-left: auto; }
.cal-jump input { width: auto; }
.cal-count { color: var(--muted); font-size: .85rem; margin: 0 0 12px; }
.cal-filters { margin-bottom: 10px; }

.cal-cols { display: grid; gap: 12px; align-items: start; }
.cal-cols-three { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.cal-cols-week { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.cal-day { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; min-width: 0; }
.cal-day.is-today { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.cal-day-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 4px 4px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none !important;
}
.cal-day.is-today .cal-day-head b { color: var(--accent); }
.cal-day-head span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.cal-part { margin: 8px 0 4px; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.cal-day .occ { padding: 7px 9px; gap: 8px; border-radius: 10px; margin-bottom: 5px; }
.cal-day .occ-time { flex-basis: 42px; font-size: .8rem; }
.cal-day .occ-tail { display: none; }
.cal-empty { padding: 10px 4px; font-size: .84rem; }

.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cm-dow { text-align: center; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; padding-bottom: 4px; }
.cm-cell {
  min-height: 70px; display: flex; flex-direction: column; gap: 3px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); text-decoration: none !important; transition: border-color .12s, transform .12s;
}
.cm-cell:hover { border-color: var(--accent); transform: translateY(-1px); }
.cm-cell.is-today { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.cm-cell.is-empty { opacity: .55; }
.cm-cell.cm-pad { background: none; border: 0; pointer-events: none; }
.cm-cell b { font-size: .82rem; font-variant-numeric: tabular-nums; }
.cm-cell small { color: var(--muted); font-size: .66rem; margin-top: auto; }
.cm-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.cm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cat, var(--accent)); }

/* Repeating things: the rule, and where it lands next. */
.next-dates { margin: 16px 0; }
.next-dates > b { display: block; margin-bottom: 8px; font-size: .88rem; }
.nd-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.nd-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 11px;
  padding: 7px 12px; font-size: .82rem; font-weight: 700;
  color: var(--text); text-decoration: none !important;
}
.nd-chip:hover { border-color: var(--accent); color: var(--accent); }
.nd-chip small { color: var(--muted); font-weight: 500; font-size: .72rem; }

/* Weekday picker on the post form. */
.rep-days { margin-bottom: 12px; }
.rep-days > small { color: var(--muted); display: block; margin-bottom: 6px; }
.dow-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.dow { margin: 0; }
.dow input { position: absolute; opacity: 0; }
.dow span {
  display: inline-block; padding: 7px 12px; border: 1.5px solid var(--line);
  border-radius: 999px; font-size: .84rem; font-weight: 650; cursor: pointer;
}
.dow:hover span { border-color: var(--accent); }
.dow:has(input:checked) span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ============ blog ============ */
.blog-lead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px;
  align-items: center; margin: 18px 0 24px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  color: var(--text); text-decoration: none !important; box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s;
}
.blog-lead:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.blog-lead img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; }
.blog-lead-ph {
  display: grid; place-items: center; aspect-ratio: 16/10; border-radius: 14px; font-size: 3.5rem;
  background: linear-gradient(135deg, var(--cat), color-mix(in srgb, var(--cat) 55%, var(--bg)));
}
.blog-lead h2 { margin: 4px 0 6px; font-size: 1.35rem; }
.blog-lead p { color: var(--muted); margin: 0 0 8px; }

/* ============ admin · system ============ */
.sys-tile-v { font-size: 1.1rem !important; word-break: break-word; }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.sys-card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 14px; padding: 14px 16px;
}
.sys-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sys-card-head b { font-size: .98rem; }
.sys-ver {
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
  padding: 1px 7px; font-size: .74rem; color: var(--muted); white-space: nowrap;
  max-width: 55%; overflow: hidden; text-overflow: ellipsis;
}
.sys-role { margin: 0 0 6px; font-size: .84rem; font-weight: 700; color: var(--accent); }
.sys-why { margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.sys-why code, .sys-abs-row span code, .admin-table code {
  font-size: .82em; padding: 0 4px; color: var(--text);
}

/* The path a request takes, left to right. */
.sys-flow {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
}
.sys-hop {
  flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px;
}
.sh-e { font-size: 1.2rem; }
.sys-hop b { font-size: .86rem; }
.sys-hop small { color: var(--muted); font-size: .72rem; }
.sys-arrow { align-self: center; color: var(--muted); font-weight: 800; }

.sys-absent { display: flex; flex-direction: column; gap: 6px; }
.sys-abs-row {
  display: grid; grid-template-columns: 110px 76px minmax(0, 1fr); gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font-size: .85rem;
}
.sys-abs-row.is-present { border-color: #c04a12; }
.sys-abs-row code { background: none; border: 0; padding: 0; font-weight: 700; }
.sys-abs-row > span:last-child { color: var(--muted); }

.sys-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: .88rem; }
.sys-dl dt { color: var(--muted); font-weight: 650; }
.sys-dl dd { margin: 0; word-break: break-word; }
.sys-dl dd small { color: var(--muted); }
.sys-tables { margin-top: 12px; }
.sys-tables summary { cursor: pointer; font-weight: 700; font-size: .88rem; margin-bottom: 8px; }

/* ============ the member area ============ */
.me-bar {
  display: flex; align-items: center; gap: 14px; margin: 18px 0 12px; min-width: 0;
}
.me-bar-id { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); text-decoration: none !important; }
.me-bar-id span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.me-bar-id b { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-bar-id small { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.me-bar-meter { flex: 0 1 160px; height: 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 5px; margin-left: auto; overflow: hidden; }
.me-bar-meter span { display: block; height: 100%; background: var(--hero); }
.me-bar-pct { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.me-lede { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.me-lede .btn { margin-left: auto; }

/* ============ identity, profile completeness, friends ============ */
.pres { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.pres i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: inline-block; }
.pres.on i { background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent); }
.avatar-emoji { font-size: .95em; }
.avatar-lg.avatar-emoji { font-size: 2.4rem; }
.menu-you { display: block; color: var(--text); font-size: .95rem; }
.menu-head .tag { margin-top: 4px; }
.menu-cta { color: var(--accent) !important; }

.guest-banner {
  display: flex; align-items: center; gap: 14px; margin: 16px 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent2) 22%, var(--surface)), var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--accent2) 55%, var(--line));
  border-radius: 16px; padding: 14px 18px;
}
.gb-emoji { font-size: 1.9rem; flex: 0 0 auto; }
.guest-banner > div { flex: 1 1 0; min-width: 0; }
.guest-banner small { display: block; color: var(--muted); margin-top: 2px; }
.guest-banner .btn { flex: 0 0 auto; }

.me-head { display: flex; gap: 18px; align-items: center; margin: 18px 0 6px; }
.me-avatar { flex: 0 0 auto; }
.me-id { min-width: 0; flex: 1; }
.me-id h1 { margin-bottom: 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.me-handle { color: var(--muted); margin: 0 0 6px; font-size: .9rem; }
.me-status { margin: 0 0 10px; font-weight: 650; }
.me-status.muted { color: var(--muted); font-weight: 400; }
.me-status small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.me-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.stat-link { color: var(--text); text-decoration: none !important; transition: border-color .12s, transform .12s; }
.stat-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.stat-link.is-zero { opacity: .6; }

.meter-card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 16px; padding: 16px 18px; margin-bottom: 18px;
}
.meter-strong { border-left-color: #22c55e; }
.meter-ok { border-left-color: var(--accent2); }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.meter-top b { font-size: 1.05rem; }
.meter-top small { color: var(--accent); font-weight: 700; }
.meter-bar { height: 9px; background: var(--bg); border-radius: 6px; overflow: hidden; margin: 10px 0 8px; }
.meter-bar span { display: block; height: 100%; border-radius: 6px; background: var(--hero); transition: width .4s; }
.meter-note { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.meter-list { margin-top: 10px; }
.meter-list summary { cursor: pointer; font-weight: 700; font-size: .85rem; }
.meter-list ul { list-style: none; padding: 8px 0 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.meter-list li { font-size: .86rem; color: var(--muted); }
.meter-list li.is-done { color: var(--text); }
.meter-list li b { color: var(--accent); margin-left: 4px; }
.meter-list li small { display: block; font-size: .78rem; opacity: .85; }

.prof-meter { position: relative; height: 6px; background: var(--bg); border-radius: 4px; margin: 6px 0 12px; max-width: 260px; }
.prof-meter span { display: block; height: 100%; border-radius: 4px; background: var(--hero); }
.prof-meter small { position: absolute; right: -78px; top: -5px; color: var(--muted); font-size: .72rem; }

.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.friend-tile {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
}
.friend-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: var(--text); text-decoration: none !important; }
.friend-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.friend-info b { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-info small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-actions { display: flex; gap: 5px; flex: 0 0 auto; }
.friend-actions form { margin: 0; }

.claim-summary {
  display: flex; align-items: center; gap: 12px; margin: 14px 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.claim-summary > div { flex: 1; min-width: 0; }
.claim-summary small { display: block; color: var(--muted); font-size: .8rem; }

.avatar-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.av-opt { margin: 0; }
.av-opt input { position: absolute; opacity: 0; }
.av-opt span {
  display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.4rem;
  border: 2px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface);
}
.av-opt .av-none { font-size: 1.1rem; font-weight: 800; color: var(--muted); }
.av-opt:hover span { border-color: var(--accent); }
.av-opt:has(input:checked) span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

.dice-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dice-row .btn:last-child { margin-left: auto; }
.gps-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.gps-note { color: var(--muted); font-size: .8rem; flex: 1 1 220px; }
.vis-host { color: var(--muted); font-size: .74rem; word-break: break-all; }

/* ============================================================
   Responsive · phone-first behaviour
   The layout above is fluid; these rules change the *shape* of the UI at
   each step down, and below 768px turn it into an app shell: a fixed top
   bar, a fixed bottom bar, and one scrolling column between them that
   never moves sideways.
   ============================================================ */
@media (max-width: 1100px) {
  .head-search { display: none; }
}
@media (max-width: 979px) {
  .home-cols, .profile { grid-template-columns: minmax(0, 1fr); }
  .foot-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  /* One column, and `display: contents` dissolves the rail so its two
     children become siblings that `order` can interleave with the article:
     title -> the thing you came to press -> the long read -> the rest. */
  .ad-page { display: flex; flex-direction: column; }
  .ad-rail { display: contents; }
  .ad-head-col { order: 1; }
  .ad-page .contact-card { order: 2; }
  .ad-body-col { order: 3; }
  .ad-side { order: 4; }
}

@media (max-width: 767px) {
  :root { --gutter: 14px; }

  /* Room for the fixed bottom bar, plus the home indicator on a notched
     phone. Without the env() part the last row sits under the gesture bar. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .site-foot { padding-bottom: 28px; }

  /* ── top bar ──────────────────────────────────────────────────── */
  .head-link, .btn-post, .disc-menu { display: none; }
  .head-wrap { height: 54px; gap: 8px; }
  .head-nav { gap: 6px; }
  .logo-ico { width: 34px; height: 34px; }
  .logo-word { font-size: 1.02rem; }
  .head-nav .btn-sm { padding: 7px 11px; font-size: .82rem; border-radius: 9px; }
  .head-nav .icon-btn { padding: 5px 8px; font-size: 1rem; }
  /* Copy that only earns its space on a wide screen: the long half of a
     button label, the second half of the hero pitch. Dropped rather than
     shrunk, so nothing ends up too small to read. */
  .wide-only { display: none; }
  /* The mirror of .wide-only: shown only where the wide layout has hidden
     the equivalent affordance elsewhere. */
  .wide-hide { display: inline-flex; }

  /* ── bottom bar ───────────────────────────────────────────────── */
  .mobile-nav { display: grid; }

  /* ── typography and spacing ───────────────────────────────────── */
  h1 { font-size: 1.35rem; }
  .page-sub { font-size: .88rem; }
  /* One ellipsised line wasted the width these rows have; two wrapped lines
     read better and still keep every row the same shape. */
  .trow { align-items: flex-start; padding: 10px 12px; }
  .trow-main b {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .trow-main small { font-size: .76rem; }
  .trow .badge, .trow .tag { align-self: center; }
  h2 { font-size: 1.08rem; }
  .main { padding-bottom: 20px; }
  .section { margin: 20px 0; }
  .hero { margin: 12px 0 6px; border-radius: 18px; }
  .hero-inner { padding: 24px 18px 18px; }
  .hero-search { gap: 6px; }
  .hero-search input { min-width: 0; }
  .hero-search .btn { padding: 10px 14px; }
  .page-head { margin: 16px 0 8px; }

  /* iOS zooms the whole viewport when a focused field is under 16px, which
     leaves the page scrolled sideways and feeling broken. 16px exactly. */
  input, textarea, select { font-size: 16px; }
  .btn-lg { padding: 13px 20px; font-size: 1rem; }

  /* ── horizontal strips scroll instead of wrapping ─────────────── */
  /* Wrapped chips ate half the screen before any content appeared. One
     swipeable row is both shorter and more familiar on a phone. The strip
     bleeds into the gutter so it reads as "there is more that way". */
  .chip-row, .map-filters, .admin-nav, .tab-nav, .gallery-thumbs, .people-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
  }
  .chip-row::-webkit-scrollbar, .map-filters::-webkit-scrollbar,
  .admin-nav::-webkit-scrollbar, .tab-nav::-webkit-scrollbar, .gallery-thumbs::-webkit-scrollbar,
  .people-strip::-webkit-scrollbar { display: none; }
  .chip, .admin-nav a, .tab-nav a, .map-filters .check { scroll-snap-align: start; flex: 0 0 auto; }
  .hero-chips { margin-inline: -18px; padding-inline: 18px; }

  /* ── cards and grids ──────────────────────────────────────────── */
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
  .card-title { font-size: .9rem; }
  .card-snip { display: none; }
  .card-body { padding: 10px 11px 12px; gap: 4px; }
  .people-grid { grid-template-columns: repeat(auto-fill, minmax(min(142px, 100%), 1fr)); gap: 10px; }
  .person-card { padding: 14px 10px; }
  .gcard-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sec-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .sec-tile { padding: 13px; }
  .dash-stats { grid-template-columns: repeat(auto-fit, minmax(min(108px, 100%), 1fr)); gap: 8px; }
  .stat-tile { padding: 11px 12px; }
  .stat-tile b { font-size: 1.25rem; }

  /* ── forms ────────────────────────────────────────────────────── */
  .form-2col { grid-template-columns: minmax(0, 1fr); }
  .form-card { padding: 16px; border-radius: 16px; }
  .filter-bar { gap: 8px; }
  .filter-bar input[type="search"] { max-width: none; flex: 1 1 100%; }
  .fb-field { flex: 1 1 44%; }
  .fb-field select, .filter-bar select { width: 100%; }
  .filter-count { margin-left: 0; flex: 1 1 100%; }
  .cat-picker { grid-template-columns: repeat(auto-fill, minmax(min(104px, 100%), 1fr)); gap: 8px; }
  .cat-pick { padding: 9px; }
  .cat-pick small { display: none; }
  .comment-form { flex-direction: column; align-items: stretch; }
  .chat-form { position: sticky; bottom: calc(58px + env(safe-area-inset-bottom)); background: var(--bg); padding: 8px 0; }

  /* ── detail pages ─────────────────────────────────────────────── */
  /* A 358px-wide square avatar filled the whole first screen. Dissolve the
     two desktop columns and lay the four blocks out as an app-style header:
     picture beside the name, then actions, then everything else. */
  .profile {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas: "pic ident" "thumbs thumbs" "act act" "body body";
    gap: 10px 14px; margin-top: 12px;
  }
  .profile-col-a, .profile-col-b { display: contents; }
  .profile-photos { grid-area: pic; margin: 0; }
  .profile-thumbs { grid-area: thumbs; margin: 0; }
  .profile-act    { grid-area: act; }
  .profile-ident  { grid-area: ident; }
  .profile-body   { grid-area: body; }
  .profile-main { width: 88px; height: 88px; border-radius: 22px; }
  .profile-main.big-ph { font-size: 2.4rem; }
  .profile-name { font-size: 1.3rem; margin-bottom: 0; }
  .profile-handle { font-size: .8rem; margin-bottom: 6px; }
  .profile-act .btn { margin-bottom: 0; }

  /* The empty-state gallery block was a 16:8 slab of colour that pushed the
     title below the fold. */
  .gallery-ph { aspect-ratio: 16 / 10; }
  .gallery-ph span { font-size: 54px; }

  .sec-head-emoji { width: 50px; height: 50px; flex-basis: 50px; font-size: 1.6rem; border-radius: 14px; }
  .group-head { gap: 12px; }
  .group-emoji, .group-photo { width: 58px; height: 58px; flex-basis: 58px; font-size: 1.6rem; border-radius: 16px; }
  .ad-body { padding: 14px 15px; }
  .gallery-main img { max-height: 300px; }
  .cta-band { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-band .btn { margin-left: 0; }
  .stop { padding: 12px 13px 12px 48px; }

  /* ── maps ─────────────────────────────────────────────────────── */
  /* dvh tracks the browser chrome collapsing on scroll; vh does not, which
     is why a "100vh" map is always slightly too tall on a phone. */
  .big-map { height: 64vh; height: 62dvh; min-height: 340px; border-radius: 14px; }
  .pick-map { height: 220px; }
  .map-head { margin: 12px 0 4px; }
  .map-head .page-sub { display: none; }
  .map-filters { margin-bottom: 8px; }

  /* ── brief and calendar ───────────────────────────────────────── */
  .brief-head { align-items: flex-start; gap: 10px; margin: 14px 0 10px; }
  .brief-nav { width: 100%; }
  .brief-nav .btn { flex: 1 1 auto; }
  .fiesta-banner { flex-wrap: wrap; gap: 4px 10px; padding: 12px 14px; }
  .fiesta-banner .see-all { margin-left: 0; flex: 1 0 100%; }
  .deal-card { padding: 12px; }
  .deal-emoji { font-size: 1.35rem; }
  .occ { padding: 8px 11px; gap: 10px; }
  .occ-time { flex-basis: 46px; font-size: .82rem; }
  .occ-tail .meta-item { display: none; }
  .deal-grid { grid-template-columns: minmax(0, 1fr); }
  .cal-nav { gap: 5px; }
  .cal-jump { margin-left: 0; width: 100%; }
  .cal-jump input { flex: 1; }
  .cal-cols-week, .cal-cols-three { grid-template-columns: minmax(0, 1fr); }
  /* A seven-column month grid is unreadable on a phone; the cells become
     squares with dots and the day view does the detail. */
  .cal-month { gap: 3px; }
  .cm-cell { min-height: 52px; padding: 4px; border-radius: 8px; }
  .cm-cell b { font-size: .74rem; }
  .cm-dot { width: 5px; height: 5px; }
  .cm-cell small { display: none; }
  .blog-lead { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; }
  .blog-lead h2 { font-size: 1.15rem; }

  /* ── admin ────────────────────────────────────────────────────── */
  .admin-table thead { display: none; }
  .admin-table tr { display: block; border-bottom: 8px solid var(--bg); }
  .admin-table td { display: flex; gap: 10px; border-bottom: 1px dashed var(--line); }
  .admin-table td::before { content: attr(data-th); font-weight: 700; min-width: 68px; color: var(--muted); font-size: .76rem; }
  .chart-row { grid-template-columns: minmax(0, 1fr); }
  .settings-grid, .track-board { grid-template-columns: minmax(0, 1fr); }
  .sys-grid { grid-template-columns: minmax(0, 1fr); }
  .sys-flow { flex-direction: column; }
  .sys-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 18px; }
  .sys-abs-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .sys-abs-row > span:last-child { grid-column: 1 / -1; }
  .sys-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .me-bar { gap: 10px; margin: 12px 0 10px; }
  .me-bar-id b { font-size: 1.02rem; }
  .me-bar-meter { flex-basis: 70px; }
  .me-lede .btn { margin-left: 0; flex: 1 0 100%; }
  /* The public-profile link is the one tab-strip item that is not a tab;
     on a phone it would be stranded off the right edge, so it moves. */
  .tab-nav .tab-out { display: none; }
  .guest-banner { flex-wrap: wrap; gap: 6px 12px; padding: 12px 14px; }
  .guest-banner .btn { flex: 1 0 100%; }
  .friend-grid { grid-template-columns: minmax(0, 1fr); }
  .prof-meter { max-width: 160px; }
  .prof-meter small { right: -70px; }
  .dice-row .btn:last-child { margin-left: 0; }
  .dice-row .btn { flex: 1 1 auto; }
  .sys-dl dt { margin-top: 8px; font-size: .78rem; }
  .range-bar { flex-wrap: wrap; }

  /* ── misc ─────────────────────────────────────────────────────── */
  .live-strip {
    gap: 16px; padding: 10px 12px; border-radius: 12px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .live-strip::-webkit-scrollbar { display: none; }
  .live-strip > * { flex: 0 0 auto; }
  .ls-more { margin-left: 4px; }
  .flash { top: auto; bottom: calc(66px + env(safe-area-inset-bottom)); position: fixed; left: 12px; right: 12px; margin: 0; }
  .foot-wrap { gap: 18px; }
  .thread-when { font-size: .72rem; }
  .code-box code { font-size: 1rem; word-break: break-all; }
}

/* Small phones (iPhone SE, older Androids). Everything still fits at 320px. */
@media (max-width: 400px) {
  .head-wrap { gap: 6px; }
  .logo-word { font-size: .95rem; }
  .head-nav .btn-sm { padding: 6px 9px; font-size: .78rem; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
  .mobile-nav a { font-size: .6rem; }
  .live-strip { gap: 10px; }
  .ls-item b { font-size: .95rem; }
  .ls-temp b { font-size: 1.15rem; }
}

/* Landscape on a phone: the fixed bars would eat most of a 380px-tall
   window, so give the content back its room. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .site-head { position: static; }
  .big-map { height: 78dvh; }
  .hero-inner { padding: 16px 18px 14px; }
}

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

/* ── backend: Scan section ─────────────────────────────────────────── */
.tab-intro { color: var(--muted); max-width: 70ch; margin: .2rem 0 1rem; }
.btn-mini { font: inherit; font-size: .8rem; padding: .28rem .6rem; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.btn-mini:hover { border-color: var(--accent); }
.btn-mini.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-mini.danger:hover { border-color: #e5484d; color: #e5484d; }
.hint { color: var(--muted); font-size: .82rem; margin: .5rem 0 0; }
.num { width: 4.5rem; }

.scan-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 1.4rem; align-items: start; }
.scan-run { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.scan-runline { color: var(--muted); font-size: .9rem; }
.scan-note, .scan-runline .bad { color: #e5484d; }
.scan-config h3 { margin: 0 0 .5rem; }
.scan-config label { display: block; margin: .45rem 0; }
.scan-config .chk { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 760px) { .scan-controls { grid-template-columns: 1fr; } }

.scan-sources td { vertical-align: top; }
.scan-sources .off { opacity: .5; }
.scan-sources .mono { font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: var(--muted); word-break: break-all; }
.scan-sources .ok { color: #2a9d8f; } .scan-sources .bad { color: #e5484d; }
.row-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.row-actions form { margin: 0; }
.scan-addsrc { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; align-items: center; }
.scan-addsrc input, .scan-addsrc select { padding: .4rem .55rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.scan-addsrc input[name=url] { flex: 1 1 260px; }

.scan-filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .6rem 0 1rem; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.scan-search { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-left: auto; }
.scan-search select, .scan-search input { padding: .35rem .5rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.scan-search .chk { display: flex; align-items: center; gap: .35rem; color: var(--muted); }

.scan-list { display: flex; flex-direction: column; gap: .6rem; }
.scan-item { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; box-shadow: var(--shadow); }
.scan-item.past { opacity: .55; }
.scan-score { font-weight: 800; font-size: 1.05rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; color: #fff; }
.scan-score.hi { background: #2a9d8f; } .scan-score.mid { background: #f4a261; } .scan-score.lo { background: #b0a89c; }
.scan-body h4 { margin: .15rem 0; font-size: 1rem; }
.scan-body h4 a { color: var(--text); } .scan-body h4 a:hover { color: var(--accent); }
.scan-body p { margin: .1rem 0 0; color: var(--muted); font-size: .86rem; }
.scan-meta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-size: .78rem; }
.scan-when { color: var(--muted); } .scan-src { color: var(--muted); font-style: italic; }
.scan-actions { display: flex; flex-direction: column; gap: .35rem; align-items: stretch; }
.scan-actions form { margin: 0; } .scan-actions .btn-mini, .scan-actions a.btn-mini { width: 100%; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; background: color-mix(in srgb, var(--pc, var(--accent)) 16%, transparent);
  color: var(--pc, var(--accent)); border: 1px solid color-mix(in srgb, var(--pc, var(--accent)) 30%, transparent); }
.pill.free { --pc: #2a9d8f; }
.pager { display: flex; gap: .3rem; margin-top: 1rem; flex-wrap: wrap; }
.pager a { padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; }
.pager a.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (max-width: 620px) {
  .scan-item { grid-template-columns: auto 1fr; }
  .scan-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .scan-search { margin-left: 0; }
}