/* Lookaburra app. Brand tokens match the live site: navy does the structure,
   green is the accent, DM Sans throughout. The one loud element is the bin
   row on Today (real lid colours); everything else stays quiet. */
:root {
  --navy: #002753;
  --navy-2: #0a3a70;
  --green: #3da65d;
  --green-d: #1a7a3d;
  --green-bg: #eaf7ef;
  --ink: #1a2e38;
  --muted: #5a7a88;
  --faint: #7a96a3;
  --line: #e0eaed;
  --bg: #f4f8f9;
  --card: #fff;
  --lid-red: #d7352f;
  --lid-yellow: #f4bd0b;
  --lid-green: #43a047;
  --bin-body: #24403a;
  --warn: #b26a00;
  --shadow: 0 9px 26px rgba(0, 39, 83, 0.1);
  --tabs-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; overflow-x: hidden; overflow-x: clip; } /* no rubber-banding: on an iPhone the fixed bars are dragged along with it */
body {
  margin: 0;
  background: #e9f0f2;
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  /* The page never moves sideways: nothing on it is wider than the phone, and if something ever
     is (a long word, a slow picture), it is cut off rather than letting the whole app slide. */
  overflow-x: clip;
}
#view { overflow-x: clip; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--green-d); }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid #7cc6ff; outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* On an iPad or any screen wider than the app, the sides are the brand navy, so the
   narrow column reads as intended rather than a phone page stretched onto a tablet. */
@media (min-width: 560px) {
  body { background: var(--navy); }
  #app { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 40px rgba(0,0,0,.25); }
}
#app {
  max-width: 520px;
  min-height: 100vh;
  min-height: 100vh; min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  padding-bottom: calc(var(--tabs-h) + var(--safe-b) + 22px);
}

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 4px;
  /* 47px deep (was 60): the same logo, suburb button and bell, still 44px to tap,
     with the empty space above and below taken out. */
  box-sizing: content-box; height: 47px; padding: var(--safe-t) 8px 0 16px;
  background: var(--navy); color: #fff;
  /* v121: its own layer, so an iPhone never draws it a frame late while scrolling */
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.top-logo { flex: none; display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.top-logo img { display: block; height: 30px; width: auto; max-width: 40vw; }
.top-word { font-family: "DM Serif Display", Georgia, serif; font-size: 23px; color: #fff; }
.top-suburb {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  color: #fff; font-weight: 700; font-size: 15px;
  /* as wide as the suburb's name needs, up to the room between the logo and the bell;
     only a name too long for that room is shortened with "…" (the type never shrinks) */
  padding: 0 8px 0 12px; min-height: 38px; flex: 0 1 auto; margin: 0 0 0 4px;
  background: rgba(255, 255, 255, 0.12); border-radius: 20px;
}
.top-suburb svg { flex: none; }
.top-suburb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-icon { flex: none; position: relative; width: 40px; height: 44px; display: grid; place-items: center; color: #fff; border-radius: 50%; }
.top-icon[aria-current="page"] { background: rgba(255, 255, 255, 0.14); }
.top-icon .dot { position: absolute; top: 9px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--lid-yellow); border: 2px solid var(--navy); }

/* ---------- bottom tabs ---------- */
/* Docked, but light: the full width of the app, flush with the bottom of the screen and
   fixed there, on a faintly see-through white with a soft blur of what is behind it, a
   hairline along the top, and a pale pill behind the icon of the tab you are on. */
.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto;
  width: 100%; max-width: 520px; z-index: 30;
  display: grid; grid-template-columns: repeat(6, 1fr); padding: 0 4px var(--safe-b);
  background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  border-top: 1px solid rgba(0, 39, 83, 0.1);
  -webkit-transform: translateZ(0); transform: translateZ(0); /* v121: see .top */
}
/* Whatever the phone does with the very bottom of the screen, the page never shows under the nav. */
.tabs::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 48px; background: #fff; pointer-events: none; }
/* a phone that can't blur gets plain white, so nothing reads through the labels */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .tabs { background: #fff; } }
.tabs button {
  height: var(--tabs-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: #6d8593; font-size: 11px; font-weight: 600; min-width: 0; white-space: nowrap; letter-spacing: -0.1px;
}
/* the icon carries its own pill: clear until the tab is the one you are on */
.tabs svg {
  box-sizing: content-box; width: 23px; height: 23px; padding: 4px 15px; border-radius: 999px; background: transparent;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: background-color 0.18s ease;
}
.tabs button[aria-current="page"] { color: var(--navy); }
.tabs button[aria-current="page"] svg { stroke-width: 2.2; background: rgba(0, 39, 83, 0.1); }
.tabs button[aria-current="page"] span { font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .tabs svg { transition: none; } }

/* ---------- shared pieces ---------- */
main { outline: none; }
.pad { padding: 16px; }
.stack > * + * { margin-top: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-h h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; }
.link { color: var(--green-d); font-weight: 700; font-size: 14.5px; text-decoration: none; padding: 6px 0; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.title { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; }
.title.serif { font-size: 32px; font-weight: 400; letter-spacing: 0; color: var(--navy); line-height: 1.1; }
.thumb { flex: none; width: 46px; height: 46px; border-radius: 12px; object-fit: cover; background: var(--navy); }
.avatar {
  flex: none; position: relative; width: 48px; height: 48px; border-radius: 12px; overflow: hidden;
  background: #e9f6ee; border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--navy); font-weight: 800; font-size: 16px;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7px; background: #fff; opacity: 0; }
.avatar img.in { opacity: 1; } /* initials stay visible until the logo has actually arrived */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 14px;
  background: var(--green); color: #fff; font-weight: 800; font-size: 16px; text-decoration: none;
}
.btn:active { background: var(--green-d); }
.btn.block { display: flex; width: 100%; }
.btn.navy { background: var(--navy); }
.btn.ghost { background: #fff; color: var(--navy); border: 1.5px solid var(--line); }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: 14.5px; border-radius: 12px; }
.btn[disabled] { opacity: 0.55; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 4px; margin: 0 -16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 38px; padding: 0 14px; border-radius: 20px;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink); font-weight: 600; font-size: 14.5px; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12.5px; font-weight: 700; background: #eef3f5; color: var(--muted); }
.tag.green { background: var(--green-bg); color: var(--green-d); }
.tag.warn { background: #fff4dc; color: var(--warn); }
.fav {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--faint);
}
.fav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.fav[aria-pressed="true"] { color: var(--lid-red); }
.fav[aria-pressed="true"] svg { fill: currentColor; }
.fav.star[aria-pressed="true"] { color: #e0a100; }
.empty { text-align: center; padding: 26px 18px; color: var(--muted); }
.empty b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.empty .btn { margin-top: 14px; }
.skel { height: 64px; border-radius: 14px; background: linear-gradient(90deg, #edf2f4 25%, #f6f9fa 50%, #edf2f4 75%); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
.skel + .skel { margin-top: 10px; }
@keyframes sk { to { background-position: -200% 0; } }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.list > * + * { border-top: 1px solid var(--line); }

/* ---------- Today: the lookout ---------- */
.serif { font-family: "DM Serif Display", Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: 0; }
.serif em { font-style: italic; color: #5fd083; }
/* Home (Colin's layout, October 2026). The suburb's photo with the header laid over
   it, the tag line and the search; then the greeting, today in a sentence, and white
   tiles with a thin border: label in navy, the thing to read in green, small print under. */
#view { position: relative; z-index: 1; }
#app { display: flow-root; } /* the floating header's top margin stays inside the app, not above it */
#app.on-home { background: #fff; }
.top-suburb { border: 1.5px solid transparent; }
/* The header on Home. At the top of the page it has no backing: the logo, suburb and bell
   sit straight on the photo. Once the page moves it is a fixed bar, the full width of the
   app and flush with the top of the screen (the phone's clock and battery sit on it), in
   the brand navy with a soft blur of what is behind. Same place and size as on every other
   tab and in both states, so nothing jumps; only the backing fades in. */
#app.on-home .top { background: rgba(0, 39, 83, 0); transition: background-color 0.2s ease, box-shadow 0.2s ease; }
#app.on-home .top.solid {
  background: rgba(0, 39, 83, 0.94); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 16px rgba(0, 20, 45, 0.14);
}
#app.on-home .top:not(.solid) .top-suburb { background: var(--navy); border-color: rgba(255, 255, 255, 0.85); }
.hero {
  position: relative;
  margin-top: calc(-47px - var(--safe-t)); padding: calc(47px + var(--safe-t)) 16px 22px;
  min-height: calc(286px + var(--safe-t)); display: flex; flex-direction: column; justify-content: flex-end;
}
/* The photo: one element for the life of the app, on its own layer, as tall as the hero. */
#hero-bg {
  position: absolute; top: 0; left: 0; right: 0; height: calc(286px + var(--safe-t)); z-index: 0; overflow: hidden;
  background: var(--navy) center / cover no-repeat; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
#hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 25, 55, 0.56) 0%, rgba(0, 25, 55, 0.14) 32%, rgba(0, 25, 55, 0.2) 55%, rgba(0, 25, 55, 0.64) 100%);
}
.hero-search { transform: translateZ(0); } /* the typing examples redraw in their own layer */
.hero-in { position: relative; }
.hero-credit { position: absolute; right: 8px; bottom: 4px; z-index: 1; max-width: 70%; font-size: 9.5px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); text-align: right; pointer-events: none; }
.hero.searching .hero-credit { display: none; }
.hero.searching { min-height: 0; padding-bottom: 12px; }
.hero.searching .hero-tag { display: none; }
.hero-tag { color: #fff; font-size: 36px; line-height: 1.02; letter-spacing: -0.3px; text-shadow: 0 2px 6px rgba(0, 20, 45, 0.55), 0 2px 22px rgba(0, 20, 45, 0.6); margin: 0 2px 14px; }
/* "searchable." in white and upright like the line above it, with a green stroke drawn under it: a fine start, a gentle arch, a rounded finish, as in Colin's reference. It hangs below the letters
   (none of them has a tail) on its own layer, so the line takes up no more room than before. */
.hero-tag em { color: inherit; font-style: normal; position: relative; }
.hero-tag em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.07em; height: 11px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M2.0 61.5 L6.5 53.2 L10.9 45.3 L15.4 38.8 L19.8 34.1 L24.3 31.1 L28.7 28.6 L33.2 26.6 L37.6 24.9 L42.1 23.3 L46.5 22.0 L51.0 20.8 L55.5 19.8 L59.9 18.9 L64.4 18.1 L68.8 17.5 L73.3 17.0 L77.7 16.7 L82.2 16.4 L86.6 16.2 L91.1 16.1 L95.5 16.1 L100.0 16.1 L104.5 16.2 L108.9 16.4 L113.4 16.6 L117.8 16.9 L122.3 17.3 L126.7 17.8 L131.2 18.4 L135.6 19.1 L140.1 19.7 L144.5 20.4 L149.0 21.1 L153.5 22.0 L157.9 23.2 L162.4 24.8 L166.8 26.7 L171.3 28.8 L175.7 31.1 L180.2 33.4 L184.6 36.1 L189.1 38.8 L193.5 41.7 L198.0 56.5 L198.0 63.5 L193.5 72.6 L189.1 69.8 L184.6 67.1 L180.2 64.4 L175.7 62.1 L171.3 59.8 L166.8 57.7 L162.4 55.8 L157.9 54.2 L153.5 53.0 L149.0 52.1 L144.5 51.4 L140.1 50.7 L135.6 50.1 L131.2 49.4 L126.7 48.8 L122.3 48.3 L117.8 47.9 L113.4 47.6 L108.9 47.4 L104.5 47.2 L100.0 47.1 L95.5 47.1 L91.1 47.1 L86.6 47.2 L82.2 47.4 L77.7 47.7 L73.3 48.0 L68.8 48.5 L64.4 49.1 L59.9 49.9 L55.5 50.8 L51.0 51.8 L46.5 53.0 L42.1 54.3 L37.6 55.9 L33.2 57.6 L28.7 59.6 L24.3 62.1 L19.8 64.9 L15.4 66.8 L10.9 68.1 L6.5 68.6 L2.0 68.5 Z' fill='%233da65d'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 20, 45, 0.4));
}
.hero-search input { height: 50px; box-shadow: 0 8px 24px rgba(0, 20, 45, 0.3); }
.hero-search svg { top: 14px; stroke: var(--navy); }
.hero-search input::placeholder { color: #6b8794; opacity: 1; }
.home.pad { padding: 14px 14px 8px; }
.home #q-results { margin-bottom: 12px; }
.hi { padding: 0 2px; position: relative; }
.hi-line { font-size: 14px; color: var(--muted); }
.hi-line b { color: var(--green-d); font-weight: 700; }
/* The heading is the same size for every suburb. A long name takes two lines, and
   "home page" always stays together on the second. The weather picture is placed
   around the words (hiFit in app.js), so it never decides where the line breaks. */
.hi-title { position: relative; margin-top: 3px; }
.hi-nw { white-space: nowrap; }
.hi-title h1 { font-size: 29px; line-height: 1.12; color: var(--navy); letter-spacing: -0.3px; }
.hi-title h1 em { font-style: italic; color: var(--green); } /* "home" in Lookaburra green italic; the stroke now sits under "searchable." */
/* Share this suburb: one size, one place (top right, level with the heading's first line) for every suburb.
   The heading keeps clear of it, so a long name wraps a little sooner rather than the button moving. */
.hi-title { padding-right: 42px; }
.hi-share { position: absolute; right: -8px; top: -4px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--navy); border-radius: 50%; }
.hi-share svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hi-share:active { background: #eef3f5; }
/* a longer name: the button moves up beside the greeting, smaller, and the heading runs the full width */
.hi.sh-up .hi-title { position: static; padding-right: 0; margin-top: 6px; } /* the button beside the greeting is taller than the greeting: keep the name clear of it */
.hi.sh-up .hi-share { top: -9px; right: -7px; width: 36px; height: 36px; }
.hi.sh-up .hi-share svg { width: 18px; height: 18px; }
.hi.sh-up .hi-line { padding-right: 30px; }
/* one flowing paragraph, three lines at most, set in from the heading on both sides */
.brief { margin: 8px 16px 0; font-size: 15px; line-height: 1.45; color: #334155; position: relative; top: 2px; } /* 2px lower, without moving anything around it */
.brief b { color: inherit; font-weight: 600; } /* the useful bit, in semibold (DM Sans 600 is loaded) */
.home .nudge { margin-top: 12px; }
#q-results:empty { display: none; }
.q-card { padding: 4px 8px 6px 16px; }
.q-card .pick + .pick { border-top: 1px solid var(--line); }
.q-h { font-size: 13px; font-weight: 800; color: var(--navy); margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.q-card .q-h:first-child { border-top: 0; padding-top: 6px; margin-top: 4px; }
/* Bin day: a compact card, first on the home page unless moved */
.bins-card .card-h { margin-bottom: 2px; }
.bins-card .card-h h2 { font-size: 21px; letter-spacing: -0.4px; }
.lids { display: flex; gap: 8px; margin-top: 12px; }
.lid {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px 9px; border-radius: 14px; background: #f3f6f8; border: 1.5px solid transparent;
  font-size: 12.5px; font-weight: 600; color: var(--faint); text-align: center; line-height: 1.2;
}
.lid svg { width: 32px; height: 38px; opacity: 0.32; }
.lid.out { background: var(--green-bg); border-color: #bfe3cb; color: var(--ink); }
.lid.out svg { opacity: 1; }
.lid b { display: block; font-weight: 700; }
.lid.out b { font-weight: 800; }
.bins-addr { margin-top: 10px; }
.bins-remind { margin-top: 12px; gap: 8px; }
.bins-remind svg { width: 18px; height: 18px; }
.home-edit {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 4px;
  color: var(--muted); font-weight: 700; font-size: 14.5px;
}
.home-edit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.home-edit circle { fill: var(--bg); }
.home-list { margin-top: 2px; }
.home-h { font-size: 12px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--faint); margin: 16px 0 2px; }
.home-move { width: 40px; flex: none; }
.home-done { position: sticky; bottom: calc(-20px - var(--safe-b)); display: flex; gap: 8px; margin: 14px -16px 0; padding: 12px 16px calc(12px + var(--safe-b)); background: #fff; border-top: 1px solid var(--line); }

/* ---------- Home: Today's snapshot (the website's design, sized for a phone) ---------- */
.snap { margin-top: 18px; }
/* the tiles sit on a very pale green that runs edge to edge, from just above the first row
   to just below the featured business; "Live for ..." and Personalise are back on white */
.snap-band { margin: 0 -14px; padding: 14px 14px 14px; background: #f2f8f3; }
.snap-edit { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 40px; padding: 0 2px 0 10px; color: var(--muted); font-size: 14px; font-weight: 400; }
.snap-wait { font-size: 13px; color: #cfe0f1; font-weight: 600; }
.snap-wx {
  display: flex; align-items: center; gap: 14px; min-width: 0; margin-bottom: 10px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, #0a3a70 0%, var(--navy) 70%); color: #fff;
}
.snap-wx-main { display: flex; align-items: center; gap: 9px; min-width: 0; }
.snap-wx-ico { font-size: 31px; line-height: 1; }
.snap-wx-temp { display: flex; flex-direction: column; }
.snap-wx-temp b { font-size: 32px; font-weight: 900; color: #fff; line-height: 1; }
.snap-wx-temp span { font-size: 10.5px; color: #b9cde4; font-weight: 700; margin-top: 3px; white-space: nowrap; }
.snap-wx-div { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.22); flex: none; }
.snap-wx-desc { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.snap-wx-desc strong { font-size: 15px; color: #fff; font-weight: 900; line-height: 1.2; }
.snap-wx-desc span { font-size: 12px; color: #cfe0f1; font-weight: 600; }
.snap-wx-desc span:last-child:not(:nth-child(2)) { color: #8fe0a8; }
.snap-idx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.snap-idx-item { min-width: 0; text-align: center; padding: 8px 3px; border-radius: 12px; border: 1px solid #d5e9dc; background: var(--green-bg); }
.snap-idx-lb { font-size: 10px; font-weight: 800; letter-spacing: 0.3px; color: #4a6675; margin-bottom: 3px; white-space: nowrap; }
.snap-idx-val { font-size: 13.5px; font-weight: 900; color: var(--navy); letter-spacing: -0.2px; line-height: 1.15; }
.snap-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.snap-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.snap-minis.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.snap-minis.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.snap-minis.n1 { grid-template-columns: minmax(0, 1fr); }
.snap-last { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; margin-top: 8px; }
.snap-last .looka:only-child { grid-column: 1 / -1; }
.tile {
  display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 74px; text-align: left; padding: 9px 4px 9px 7px;
  background: #fff; border: 1px solid #d5dfe6; border-radius: 12px; transition: transform 0.12s ease;
}
.tile:active { transform: scale(0.97); }
.tile-ico { flex: none; width: 23px; height: 23px; display: grid; place-items: center; font-size: 21px; line-height: 1; color: var(--navy); }
.tile-ico svg { width: 23px; height: 23px; display: block; }
.tile-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.tile-lb { font-size: 11.5px; font-weight: 600; color: var(--navy); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-val { font-size: 14.5px; font-weight: 800; color: var(--green-d); line-height: 1.15; letter-spacing: -0.3px; margin-top: 1px; overflow-wrap: break-word; }
.tile-val.long { font-size: 13px; letter-spacing: -0.2px; } /* nine letters or more: a size down so it stays on one line */
.tile-val.xlong { font-size: 12px; letter-spacing: -0.2px; }
.tile-sub { font-size: 11px; color: #73889a; line-height: 1.25; margin-top: 2px; overflow-wrap: break-word; }
.tile.is-alert { border-color: #efc7a4; background: #fffaf4; }
.tile.is-alert .tile-val { color: #c2410c; }
.tile.is-link .tile-val { color: var(--navy); }
.tile.mini { display: block; min-height: 0; padding: 8px 8px 9px; }
.tile.mini .tile-lb { font-size: 11px; }
.tile.mini .tile-val, .tile.mini .tile-val.long { font-size: 14px; }
.tile.mini .tile-val.xlong { font-size: 12.5px; }
.tile.mini .tile-sub { font-size: 10.5px; }
.tile-wait { display: block; width: 80%; height: 12px; margin: 4px 0 2px; border-radius: 6px; background: linear-gradient(90deg, #e8eff2 25%, #f4f8f9 50%, #e8eff2 75%); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
.snap-last .tile { min-height: 64px; }
.snap-last .tile-ico { width: 28px; height: 28px; font-size: 26px; }
.snap-last .looka .tile-ico { width: 34px; height: 34px; font-size: 31px; }
.snap-last .looka { gap: 10px; padding-left: 12px; }
.snap-last .tile-sub { font-size: 11.5px; margin-top: 1px; }
.snap-last .tile-lb { font-size: 12px; white-space: normal; }
.looka-h { font-size: 16.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.2px; line-height: 1.2; }
.looka-h em { font-style: normal; color: var(--green-d); }
.feat { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 9px 8px 9px 10px; text-align: left; background: var(--green-bg); border: 1px solid #c6e3d0; border-radius: 12px; color: var(--navy); }
.feat-tag { flex: none; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--green-d); background: #fff; border-radius: 999px; padding: 4px 8px; }
.feat b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat .grow span { display: block; font-size: 11.5px; color: #73889a; }
.feat svg { flex: none; color: #9db0bb; }
.wx-sheet .snap-wx { margin-bottom: 10px; }
@media (max-width: 374px) { /* narrower phones: a size down so nothing breaks mid-word */
  .tile-val { font-size: 13.5px; }
  .tile-val.long { font-size: 12px; }
  .tile-val.xlong { font-size: 11px; }
  .tile-ico, .tile-ico svg { width: 21px; height: 21px; }
  .tile:not(.looka) .tile-ico { font-size: 18px; }
  .hero-tag { font-size: 32px; }
  .hi-title h1 { font-size: 26px; }
  .top-logo img { height: 26px; } /* a little more room for the suburb's name */
}
.snap-chips { margin-top: 10px; }
.snap-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 2px; font-size: 14px; color: var(--muted); } /* as quiet as the date at the top */
.snap-foot b { color: var(--navy); }
.live-line { display: flex; align-items: baseline; gap: 7px; margin: 12px 2px 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.live-line .snap-dot { position: relative; top: -1px; }
.snap-dot.off { background: #d9a441; }
.live-line b { color: var(--navy); white-space: nowrap; }
.snap-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:active { transform: none; } }
.home-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.home-row:first-child { border-top: 0; }
.home-row .grow { min-width: 0; }
.home-row b { display: block; font-size: 16px; }
.home-row p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-row.off b, .home-row.off p { opacity: 0.5; }
.home-move { display: flex; flex-direction: column; gap: 3px; }
.home-move button { width: 40px; height: 24px; border-radius: 9px; background: #eef3f5; color: var(--navy); display: grid; place-items: center; }
.home-move button:disabled { opacity: 0.3; }
.home-move svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nudge { display: flex; gap: 10px; align-items: center; background: #fff; border: 1.5px solid #bfe3cb; border-radius: 16px; padding: 10px 6px 10px 12px; }
.nudge-ico { font-size: 22px; line-height: 1; flex: none; }
.nudge .grow { min-width: 0; }
.nudge p { font-size: 12.5px; line-height: 1.3; }
.nudge b { display: block; font-size: 14.5px; line-height: 1.25; }
.nudge .btn.sm { flex: none; min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.nudge .x { flex: none; width: 32px; height: 36px; color: var(--faint); font-size: 22px; line-height: 1; }

.fuel-line { display: flex; align-items: flex-end; gap: 12px; }
.price { font-size: 38px; font-weight: 800; letter-spacing: -1.4px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--navy); }
.price small { font-size: 16px; font-weight: 700; letter-spacing: 0; margin-left: 1px; }

/* ---------- events ---------- */
.day { font-size: 14px; font-weight: 800; color: var(--navy); margin: 20px 0 8px; }
.day:first-child { margin-top: 4px; }
.ev { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 12px 6px 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.ev + .ev { margin-top: 8px; }
.ev-time { flex: none; width: 58px; font-size: 13.5px; font-weight: 800; color: var(--navy); padding-top: 2px; font-variant-numeric: tabular-nums; }
.ev-main { flex: 1; min-width: 0; text-align: left; flex-basis: 0; }
.ev-side { flex: none; display: flex; flex-direction: column; align-items: center; align-self: stretch; justify-content: space-between; }
.ev-chev { width: 40px; height: 30px; display: grid; place-items: center; color: #9db0bb; }
.mk-home { flex: none; min-height: 30px; padding: 0 10px; border: 1px solid #e3eaee; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--muted); background: #fff; white-space: nowrap; }
.ev-main h3 { font-size: 16px; font-weight: 700; line-height: 1.25; }
.ev-main p { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.ev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ev-more { flex-basis: 100%; padding: 10px 8px 4px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.ev-more p { color: var(--ink); font-size: 14.5px; }
.ev-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.seg { display: flex; background: #e6eef1; border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { flex: 1; min-height: 40px; border-radius: 11px; font-weight: 700; font-size: 14.5px; color: var(--muted); padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(0, 39, 83, 0.12); }

/* ---------- local businesses ---------- */
.search { position: relative; }
.search input {
  color: var(--ink); /* never inherit white from a navy banner */
  width: 100%; height: 52px; border-radius: 26px; border: 0; padding: 0 18px 0 46px; background: #fff;
  box-shadow: 0 9px 26px rgba(0, 39, 83, 0.1), 0 0 0 1px #dfe8ec; font-size: 16px; outline: none;
}
.search input:focus { box-shadow: 0 9px 26px rgba(0, 39, 83, 0.12), 0 0 0 2px var(--green); }
.search svg { position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; stroke: var(--faint); fill: none; stroke-width: 2.2; stroke-linecap: round; }
/* one-tap clear: shows only when there's something to clear; the browser's own (focus-only) one is hidden */
.search.has-q input { padding-right: 48px; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: #eef3f5; color: var(--ink); font-size: 15px; line-height: 36px; text-align: center; padding: 0; cursor: pointer; display: none; }
.search.has-q .search-x { display: block; }
.search-x:active { background: #dfe8ec; }
/* Listings. A featured listing is the navy-banner card; a basic one is a quiet row.
   Navy carries the featured card; green is kept for small accents, not buttons. */
.biz { background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.biz + .biz { margin-top: 10px; }
.biz h3 { font-size: 16.5px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.biz .meta { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.biz .meta b { color: var(--ink); }
.bz-label { font-size: 12px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--navy); margin: 20px 2px 9px; }
.bz-label:first-of-type { margin-top: 14px; }
.bz-ic { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bz-stars { font-size: 15px; letter-spacing: 1px; color: #d3dce2; white-space: nowrap; }
.bz-stars .on { color: #f0a500; }

.biz.bz-feat { border: 2px solid var(--navy); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 22px rgba(0, 39, 83, 0.13); }
.biz.bz-feat + .biz.bz-feat { margin-top: 14px; }
.bz-banner { display: flex; align-items: center; gap: 12px; padding: 13px 12px 13px 14px; background: linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 72%); color: #fff; }
.bz-banner .avatar { width: 52px; height: 52px; border: 0; background: #fff; }
.bz-banner h3 { color: #fff; font-size: 17.5px; letter-spacing: -0.2px; }
.bz-cat { margin-top: 3px; font-size: 11px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase; color: #7fe0a0; }
.bz-pill { flex: none; align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--navy); background: #ffd24a; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.bz-pill.gold { background: #fff3cc; color: #7a5200; }
.bz-body { padding: 13px 14px 14px; }
.bz-body > * + * { margin-top: 11px; }
.bz-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.bz-badge { font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: 999px; background: #eef3f5; color: var(--navy); white-space: nowrap; }
.bz-badge.green { background: var(--green-bg); color: var(--green-d); }
.bz-badge.gold { background: #fff5d6; color: #7a5200; }
.bz-badge.blue { background: #e7f0fb; color: #0a3a70; }
.bz-badge.pink { background: #fdeaf2; color: #9b2257; }
.bz-badge.violet { background: #efeafb; color: #4b2f93; }
.bz-rating, .bz-rev { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13.5px; color: var(--muted); }
.bz-rating b, .bz-rev b { color: var(--ink); font-size: 15px; }
.bz-rev { width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; background: #fffaf0; border: 1px solid #f2e2b6; }
.bz-rev-more { margin-left: auto; color: var(--navy); font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.biz .desc { font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.biz .desc.stock { color: var(--muted); }
.bz-offer { font-size: 14px; font-weight: 700; color: var(--green-d); background: var(--green-bg); border: 1.5px dashed #9fd3b1; border-radius: 12px; padding: 9px 12px; }
.bz-socials { display: flex; align-items: center; gap: 8px; }
.bz-socials > span { font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--faint); margin-right: 2px; }
.bz-soc { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--navy); }
.bz-soc svg { width: 19px; height: 19px; }
.bz-soc.facebook { background: #1877f2; }
.bz-soc.instagram { background: linear-gradient(45deg, #f9a03f 0%, #e1306c 50%, #833ab4 100%); }
.bz-soc.linkedin { background: #0a66c2; }
.bz-soc.tiktok { background: #111; }
.bz-note { font-size: 12.5px; color: var(--muted); font-style: italic; }
.bz-acts { display: flex; gap: 8px; }
.bz-acts > * { flex: 1 1 0; min-width: 0; }
.bz-acts.three { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.bz-btn { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 8px; border-radius: 12px; font-size: 14.5px; font-weight: 800; text-decoration: none; text-align: center; white-space: nowrap; }
.bz-btn.solid { background: var(--navy); color: #fff; }
.bz-btn.solid:active { background: var(--navy-2); }
.bz-btn.line { background: #fff; color: var(--navy); border: 1.5px solid #c3d0db; }
.bz-btn.sm { min-height: 40px; font-size: 13.5px; padding: 0 12px; flex: 1 1 auto; }
.bz-btn.sm .bz-ic { width: 15px; height: 15px; }
.bz-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 2px 14px; background: #f3f7fa; border-top: 1px solid var(--line); }
.bz-ver { font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--green-d); white-space: nowrap; }
.bz-tools { display: flex; align-items: center; }
.bz-tools a, .bz-tools > button:not(.fav) { font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none; padding: 10px 9px; }

.biz.basic { padding: 11px 4px 9px 12px; border-radius: 14px; background: #fbfcfd; }
.biz.basic + .biz.basic { margin-top: 7px; }
.biz.basic .avatar { width: 38px; height: 38px; border-radius: 50%; font-size: 13px; background: #eef2f5; color: var(--muted); }
.biz.basic h3 { font-size: 15px; font-weight: 700; }
.biz.basic .meta { font-size: 13px; }
.bz-links { display: flex; flex-wrap: wrap; align-items: center; margin: 4px 0 0 44px; }
.bz-links a, .bz-links button { font-size: 13.5px; font-weight: 600; color: var(--navy); text-decoration: none; padding: 8px 14px 8px 0; }
.bz-links a + a::before, .bz-links a + button::before { content: "·"; color: #b5c3cd; margin-right: 14px; font-weight: 400; }
.bz-claim { margin: 2px 8px 0 50px; padding-top: 7px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--faint); }
.bz-claim a { color: var(--muted); font-weight: 600; }

.biz.near { padding: 13px 14px 14px; }
.biz.near .row { align-items: flex-start; }
.bz-where { margin-top: 5px; font-size: 13px; font-weight: 700; color: var(--navy); }
.bz-none { display: flex; flex-direction: column; gap: 4px; padding: 16px; margin-bottom: 12px; border-radius: 16px; background: #eaf1f8; border: 1px solid #d2e0ee; }
.bz-none b { font-size: 17px; color: var(--navy); line-height: 1.25; }
.bz-none span { font-size: 14px; color: var(--muted); }
.bz-none .bz-acts { margin-top: 10px; }
.bz-none .bz-btn { font-size: 13.5px; white-space: normal; line-height: 1.15; }

/* the local crossing: a strip on Home, and its sheet */
.cross { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 9px 8px 9px 10px; text-align: left; background: #fff; border: 1px solid #d5dfe6; border-radius: 12px; color: var(--navy); }
.cross-ico { flex: none; font-size: 22px; line-height: 1; width: 28px; text-align: center; }
.cross b { display: block; font-size: 14px; font-weight: 700; }
.cross .grow span { display: block; font-size: 11.5px; color: #73889a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cross-st { flex: none; font-size: 12.5px; font-weight: 800; color: var(--green-d); background: var(--green-bg); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.cross.is-quiet .cross-st { color: #4a6675; background: #eef3f5; }
.cross.is-closed { border-color: #f0c9a8; background: #fff8f2; }
.cross.is-closed .cross-st { color: #fff; background: #c2410c; }
.cross svg { flex: none; color: #9db0bb; }
.cross.lf.is-lost .cross-st { color: #7a4b00; background: #fdebc8; }
.bus-ferry { margin: 0 0 12px; }
.bus-ferry .cross { margin-top: 0; }
.cx-now { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--green-bg); border: 1px solid #cfe8d8; }
.cx-now b { font-size: 22px; letter-spacing: -0.3px; color: var(--green-d); line-height: 1.15; }
.cx-now span { font-size: 13.5px; color: var(--ink); }
.cx-now.is-closed { background: #fff3ea; border-color: #f0c9a8; }
.cx-now.is-closed b { color: #c2410c; }
.cx-now.is-quiet, .cx-now.is-wait { background: #eef3f5; border-color: #dbe5ea; }
.cx-now.is-quiet b, .cx-now.is-wait b { color: var(--navy); }
.cx-h { font-size: 12px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--navy); margin: 18px 0 8px; }
.cx-sum { font-size: 15px; }
.cx-conf { font-size: 12px; font-weight: 700; color: var(--muted); background: #eef3f5; border-radius: 999px; padding: 3px 8px; margin-left: 4px; white-space: nowrap; }
.cx-none { font-size: 14.5px; color: var(--muted); }
.cx-dots { display: flex; gap: 5px; margin: 8px 0 2px; }
.cx-dots i, .cx-list i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #c2410c; }
.cx-dots i.on, .cx-list i.on { background: var(--green); }
.cx-list { list-style: none; margin: 8px 0 0; padding: 0; }
.cx-list li { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.cx-list li span { margin-left: auto; color: var(--muted); font-size: 13.5px; }
.cx-ask { margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--navy); }
.cx-vote { display: flex; gap: 8px; margin-top: 8px; }
.cx-btn { flex: 1 1 0; min-height: 48px; border-radius: 12px; font-size: 15px; font-weight: 800; background: #fff; border: 1.5px solid #bfe3cb; color: var(--green-d); }
.cx-btn.no { border-color: #f0c9a8; color: #c2410c; }
.cx-btn[disabled] { opacity: 0.45; }
.cx-msg { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--navy); }
.cx-again { margin-top: 4px; font-size: 13px; color: var(--muted); }
.cx-off { padding: 12px 14px; border-radius: 14px; background: #f6f9fb; border: 1px solid var(--line); font-size: 14.5px; }
.cx-off.shut { background: #fff3ea; border-color: #f0c9a8; }
.cx-off > b { display: block; font-size: 16px; color: var(--navy); }
.cx-off.shut > b { color: #c2410c; }
.cx-off p { margin: 6px 0 0; line-height: 1.4; }
.cx-off .cx-src, p.cx-src { font-size: 12px; color: var(--faint); }
.cx-hours p { margin: 0 0 4px; font-size: 14.5px; }
.cx-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.cx-table td { padding: 7px 0; border-top: 1px solid var(--line); vertical-align: top; }
.cx-table td:last-child { text-align: right; font-weight: 700; color: var(--navy); white-space: nowrap; padding-left: 10px; }
.cx-foot { display: flex; gap: 8px; margin-top: 14px; }
.cx-foot .btn { flex: 1 1 auto; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.cx-warn { margin-top: 16px; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* traffic near a suburb */
.tr-h { font-size: 12px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--navy); margin: 16px 0 4px; }
.tr-h:first-of-type { margin-top: 2px; }
.tr { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.tr-h + .tr { border-top: 0; }
.tr-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #f1f5f8; display: grid; place-items: center; font-size: 18px; }
.tr h3 { font-size: 16px; font-weight: 800; line-height: 1.25; }
.tr h3 span { font-weight: 500; color: var(--muted); font-size: 14px; }
.tr p { font-size: 14px; line-height: 1.4; margin: 3px 0 0; }
.tr .tr-kind { font-weight: 700; color: var(--navy); font-size: 13px; }
.tr .tr-advice { color: #9a4a00; font-weight: 600; }
.tr .tr-meta { font-size: 12.5px; color: var(--faint); }
.tr-clear { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 14px; background: var(--green-bg); border: 1px solid #cfe8d8; }
.tr-clear b { font-size: 17px; color: var(--green-d); }
.tr-clear.works { background: #fff7e6; border-color: #f1dfae; }
.tr-clear.works b { color: #8a5a00; }
.tr-clear span { font-size: 14px; color: var(--ink); }
.tr-src { font-size: 11.5px; line-height: 1.4; color: var(--faint); margin: 14px 0 0; }

/* a selection of reviews */
.rv-meta { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin: -4px 0 12px; }
.rv-meta b { color: var(--ink); font-size: 16px; }
.rv-list { display: flex; flex-direction: column; gap: 9px; }
.rv { padding: 12px 14px; border-radius: 14px; background: #fafcfd; border: 1px solid var(--line); }
.rv p { font-size: 14.5px; line-height: 1.45; margin: 6px 0 0; }
.rv .rv-who { font-size: 13px; font-weight: 700; color: var(--navy); }
.rv .rv-who a { color: var(--navy); }
.rv .rv-who span { font-weight: 400; color: var(--muted); }
.rv-attr { text-align: center; font-size: 12px; color: var(--faint); margin: 2px 0 0; }
.rv-foot { display: flex; gap: 8px; margin-top: 14px; }
.rv-foot .btn { flex: 1; }
.rv-none { text-align: center; padding: 14px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); }
.rv-none b { color: var(--ink); font-size: 20px; }
.rv-none .btn { margin-top: 12px; }

/* ---------- explore ---------- */
.ex-feature { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border-radius: 18px; background: var(--navy); color: #fff; }
.ex-feature .ico { flex: none; width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); display: grid; place-items: center; font-size: 28px; }
.ex-feature b { display: block; font-size: 18px; font-weight: 800; }
.ex-feature span { display: block; font-size: 13.5px; color: #cfe0f1; margin-top: 2px; }
.ex-wrap { position: relative; }
.ex-cross { margin-top: 12px; }
.ex-wrap .ex-feature { padding-right: 58px; }
.ex-wrap .fav { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.75); }
.ex-wrap .fav[aria-pressed="true"] { color: #ffcf40; }
.ex-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; background: #eef3f5; display: grid; place-items: center; font-size: 24px; }
.ex-bar .fav { margin-left: auto; }
.ex-group { margin-top: 20px; }
.ex-group h2 { font-size: 14px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ex-tile { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 12px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; font-weight: 600; font-size: 14.5px; line-height: 1.2; }
.ex-tile .ico { flex: none; font-size: 21px; width: 26px; text-align: center; }
.ex-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 4px; background: #fff; border-bottom: 1px solid var(--line); }
.ex-bar .back { display: flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 10px 0 6px; color: var(--green-d); font-weight: 700; font-size: 15px; }
.ex-bar .back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ex-bar h1 { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-frame { position: relative; height: calc(100vh - 47px - 57px - var(--tabs-h) - var(--safe-b) - var(--safe-t) - 14px); height: calc(100dvh - 47px - 57px - var(--tabs-h) - var(--safe-b) - var(--safe-t) - 14px); min-height: 320px; background: #fff; }
.ex-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.ex-wait { position: absolute; inset: 0; z-index: 1; background: var(--bg); padding: 18px 16px; }
.ex-slow { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 14px; }
.ex-slow button { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--green); color: #fff; font-size: 14px; font-weight: 800; }
.ex-slow .grow { flex: 1 1 60%; }
.ex-slow button.quiet { background: transparent; color: #7fdc9e; padding: 0 4px; }
.ex-slow-done { flex: none; color: #9fb4c0; font-weight: 700; font-size: 13.5px; }
#app.ex-open { padding-bottom: calc(var(--tabs-h) + var(--safe-b) + 14px); }

/* ---------- buses ---------- */
.stop { padding: 14px 6px 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.stop + .stop { margin-top: 8px; }
.bus-h { font-size: 14px; font-weight: 800; color: var(--navy); margin: 16px 2px 8px; }
.bus-h:first-child { margin-top: 0; }
.card .stop { border: 0; border-radius: 0; padding: 10px 0 8px; }
.card .stop + .stop { border-top: 1px solid var(--line); margin-top: 0; }
.stop h3 { font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.routes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.route { display: inline-block; min-width: 38px; padding: 3px 8px; border-radius: 8px; background: var(--navy); color: #fff; font-weight: 800; font-size: 13.5px; text-align: center; font-variant-numeric: tabular-nums; }
.route.ghost { background: #eef3f5; color: var(--navy); font-size: 12.5px; min-width: 0; }
.deps { margin-top: 8px; }
.dep { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.dep b { font-size: 16px; font-weight: 800; color: var(--navy); min-width: 62px; font-variant-numeric: tabular-nums; }

/* ---------- fuel ---------- */
.station { display: flex; align-items: center; gap: 12px; padding: 12px 4px 12px 0; }
.station .rank { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #eef3f5; color: var(--muted); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.station.best .rank { background: var(--green); color: #fff; }
.station h3 { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.station p { font-size: 13px; color: var(--muted); margin-top: 1px; }
.station .cents { font-size: 22px; font-weight: 800; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; color: var(--navy); white-space: nowrap; }
.station .cents small { font-size: 12px; }
.station.stale .cents { color: var(--faint); }
.ramp-go { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fish-tip { font-size: 12.5px !important; line-height: 1.35; margin-top: 4px !important; }
.ramp-go b { font-size: 14px; font-weight: 800; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- settings / alerts ---------- */
.set { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.set h3 { font-size: 16px; font-weight: 700; }
.set p { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.switch { flex: none; position: relative; width: 52px; height: 32px; border-radius: 16px; background: #c9d6dc; transition: background 0.15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch[disabled] { opacity: 0.5; }
.sub-set { display: flex; gap: 8px; padding: 0 0 14px; }
select, .field {
  height: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; padding: 0 12px; font-size: 16px; width: 100%;
}
label.lbl { display: block; font-size: 13.5px; font-weight: 700; color: var(--muted); margin: 14px 0 6px; }
.status { border-radius: 16px; padding: 14px 16px; background: var(--green-bg); color: #14532b; font-size: 14.5px; }
.status b { display: block; font-size: 16px; }
.status.off { background: #fff4dc; color: #6b4300; }
.steps { margin: 10px 0 0; padding-left: 22px; }
.steps li { margin: 6px 0; font-size: 15px; }
.steps svg { width: 18px; height: 18px; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0, 20, 45, 0.5); }
.sheet {
  position: relative; width: 100%; max-width: 520px; max-height: 88vh; max-height: 88dvh; overflow-y: auto;
  background: #fff; border-radius: 24px 24px 0 0; padding: 18px 16px calc(20px + var(--safe-b)); outline: none;
  animation: up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
/* Choose a suburb: fixed to the top of what can be seen (not the bottom, where the keyboard is), as tall as
   the room there is, with the list scrolling inside it straight under the search box. */
.sheet-wrap.pin { align-items: flex-start; }
.sheet-wrap.pin .sheet {
  margin-top: calc(var(--safe-t) + 10px); transform: translateY(var(--vvt, 0px)); animation: none;
  height: calc(var(--vvh, 100vh) - var(--safe-t) - 20px); height: calc(var(--vvh, 100dvh) - var(--safe-t) - 20px); max-height: none; border-radius: 24px;
  display: flex; flex-direction: column; overflow: hidden; padding-bottom: 10px;
}
.sheet-wrap.pin .sheet > * { flex: none; }
.sheet-wrap.pin #s-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin-top: 6px; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sheet-h h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.3px; }
.sheet-h .x { width: 40px; height: 40px; border-radius: 50%; background: #eef3f5; font-size: 22px; line-height: 1; color: var(--muted); }
.pick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; text-align: left; }
.pick .grow b { font-weight: 700; font-size: 16px; }
.pick-btn { flex: 1; min-width: 0; text-align: left; min-height: 54px; }
.saved-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; } /* a saved station or business: tap it to open it */

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabs-h) + var(--safe-b) + 14px); transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 14px; font-size: 14.5px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; z-index: 60; max-width: 88vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.boot { padding: 80px 20px; text-align: center; color: var(--muted); }
.boot[hidden] { display: none; }
.boot p + p { margin-top: 10px; }
.boot b { color: var(--navy); font-size: 18px; }

/* ---------- welcome ---------- */
.welcome { background: radial-gradient(130% 55% at 50% 0%, #0b3a72 0%, var(--navy) 62%); color: #fff; min-height: 100vh; min-height: 100dvh; }
.welcome-in { display: block; max-width: 460px; margin: 0 auto; padding: calc(var(--safe-t) + 56px) 24px calc(var(--safe-b) + 36px); }
.welcome-logo { display: block; height: 64px; width: auto; max-width: 82%; margin: 0 auto 36px; }
.welcome .top-word { display: block; text-align: center; font-size: 30px; margin-bottom: 36px; }
.welcome h1 { font-size: 46px; line-height: 1.04; text-align: center; letter-spacing: -0.01em; }
.welcome h1 em { font-style: normal; color: #4cc06f; }
.welcome-sub { text-align: center; font-size: 19px; font-weight: 700; color: #fff; margin: 10px 0 34px; }
.wf {
  display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 14px 16px 13px; cursor: text;
  border: 1.5px solid rgba(255, 255, 255, 0.24); border-radius: 16px; background: rgba(255, 255, 255, 0.06);
}
.wf:focus-within { border-color: #4cc06f; background: rgba(255, 255, 255, 0.1); }
.wf > svg { flex: none; width: 30px; height: 30px; fill: #fff; }
.wf > svg.wf-end { width: 24px; height: 24px; fill: none; stroke: #a9c6ec; stroke-width: 2.2; stroke-linecap: round; }
.wf-in { flex: 1; min-width: 0; display: block; }
.wf-l { display: block; font-size: 15.5px; font-weight: 700; color: #fff; }
.wf-l i { font-style: normal; }
.wf-l small { font-size: 14px; font-weight: 500; color: #a9c6ec; margin-left: 4px; }
.wf input {
  display: block; width: 100%; margin: 0; padding: 3px 0 0; border: 0; border-radius: 0; outline: 0; box-shadow: none;
  background: transparent; color: #fff; font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none;
}
.wf input::placeholder { color: #8fb1de; opacity: 1; }
.wf input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #0c3566 inset; caret-color: #fff; }
.welcome .results { margin-top: 8px; background: #fff; border-radius: 16px; color: var(--ink); padding: 4px 14px; max-height: 300px; overflow-y: auto; }
.welcome .results:empty { display: none; }
.w-note { display: flex; gap: 14px; align-items: flex-start; margin: 22px 4px 0; color: #b9cfed; font-size: 14.5px; line-height: 1.45; }
.w-note svg { flex: none; width: 26px; height: 26px; fill: #a9c6ec; margin-top: 1px; }
.w-err { min-height: 22px; margin: 14px 4px 0; color: #ffd7a8; font-size: 14.5px; font-weight: 600; }
.w-go { margin-top: 10px; min-height: 60px; border-radius: 999px; font-size: 19px; font-weight: 700; gap: 10px; }
.w-go svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.w-go:disabled { opacity: 0.75; }
.hero-hi { position: relative; margin: 0 0 3px; font-size: 13.5px; font-weight: 800; color: var(--green-d); }
.hero-hi span { font-weight: 600; color: var(--muted); }
.eyebrow {
  display: inline-block; margin-bottom: 14px; padding: 6px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #f4faf6;
  border: 1.5px solid rgba(61, 166, 93, 0.9); background: rgba(0, 39, 83, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
@media (min-width: 560px) {
  #app { box-shadow: 0 0 60px rgba(0, 39, 83, 0.12); }
}

/* ---------- Daily games: four tiles on Explore, then full screen ---------- */
.games { margin-top: 14px; }
.games-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 2px; }
.games-h h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; color: var(--navy); }
.games-h .small { flex: 1; }
.games-h .lb-link { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px 0 6px; border: 0; background: none; color: var(--green-d); font: inherit; font-size: 14.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.games-h .lb-chev { font-size: 18px; line-height: 1; margin-left: 1px; }
.games-h h2 { white-space: nowrap; }
/* the star sits with the title (saving the section), the Leaderboards link alone at the far right */
.games-h .fav.star { margin-left: -4px; }
@media (max-width: 479px) { .games-h .small { display: none; } .games-h .fav.star { margin-right: auto; } }
@media (max-width: 359px) { .games-h { gap: 2px; } .games-h h2 { font-size: 17px; } .games-h .lb-link { font-size: 13.5px; padding-left: 2px; } }
.games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.game-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-height: 172px; padding: 14px 14px 14px;
  border-radius: 20px; color: #fff; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 39, 83, 0.14); transition: transform 0.12s ease;
}
.game-tile:active { transform: scale(0.97); }
.game-tile.g-readcrowd { background: linear-gradient(150deg, #6a45e0, #3d1fa8); }
.game-tile.g-hop { background: linear-gradient(150deg, #3fae63, #1c6f3a); }
.game-tile.g-flip { background: linear-gradient(150deg, #2f7fe0, #17479c); }
.game-tile.g-duel { background: linear-gradient(150deg, #f08a2c, #c9521a); }
.game-ico { font-size: 40px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2)); }
.game-tile b { font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -0.2px; }
.game-desc { margin-top: 4px; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, 0.88); }
.game-play { margin-top: auto; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: var(--navy); font-size: 13.5px; font-weight: 800; }
.game-tile::after { content: ""; position: absolute; right: -34px; top: -34px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
/* Game mode: navy bar, very pale blue surround, the game on its white card. */
.game { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #edf2f8; }
.game[hidden] { display: none; }
.game-bar { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: var(--safe-t) 6px 0; background: var(--navy); color: #fff; }
.game-x { flex: none; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; font-size: 30px; line-height: 1; border-radius: 50%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.game-x:active { background: rgba(255, 255, 255, 0.16); }
.game-name { position: absolute; left: 84px; right: 84px; bottom: 0; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 16.5px; font-weight: 800; letter-spacing: 0.1px; color: #fff; white-space: nowrap; overflow: hidden; pointer-events: none; }
.game-done { flex: none; height: 34px; margin-right: 6px; padding: 0 14px; border-radius: 999px; background: var(--green); color: #fff; font-size: 14.5px; font-weight: 800; touch-action: manipulation; }
.game-body { position: relative; flex: 1; min-height: 0; background: #edf2f8; }
.game-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #edf2f8; }
.game-frame[hidden] { display: none; }
.game-wait, .game-slow { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: #edf2f8; text-align: center; color: var(--muted); }
.game-wait[hidden], .game-slow[hidden] { display: none; }
.game-wait-ico { font-size: 56px; line-height: 1; }
.game-wait b, .game-slow b { font-size: 22px; font-weight: 800; color: var(--navy); }
.game-slow .btn { margin-top: 8px; min-width: 180px; }
@media (prefers-reduced-motion: reduce) { .game-tile { transition: none; } .game-tile:active { transform: none; } }

/* What's on: reach (suburb / within an hour / my suburbs), interests, days */
.seg.wide button { flex: 1 1 auto; min-width: 0; font-size: 14px; padding: 0 8px; }
.chip.sm { min-height: 34px; padding: 0 13px; font-size: 13.5px; }
.tag.navy { background: #e3ecf6; color: var(--navy); }
.ev-count { font-size: 13px; color: var(--muted); margin-top: 12px; }
.ev-also { font-size: 12.5px !important; font-weight: 700; color: var(--green-d) !important; margin-top: 3px !important; }
.ev-run { display: block; width: 100%; text-align: left; margin-top: 8px; padding: 12px 14px; border: 1px dashed #c6d3dd; border-radius: 16px; background: #f6f9fb; font-weight: 700; font-size: 14.5px; color: var(--navy); }
.ev-run span { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); margin-top: 1px; }

/* Smart search */
.q-fixed { font-size: 13px; color: var(--muted); padding: 10px 0 2px; }
.q-fixed b { color: var(--navy); }
.q-ai { color: var(--green-d); }
.q-think b { font-size: 15.5px !important; }

/* ---------- What's on: where, what, when ---------- */
.title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 10px; }
.title-row .title { white-space: nowrap; }
.add-link { flex: none; min-height: 34px; padding: 0 2px; font-size: 13.5px; font-weight: 700; color: var(--green-d); white-space: nowrap; }
.seg.four { display: grid; grid-template-columns: 1fr 1fr; }
/* What's On reach: the suburb, 5 km, 25 km, All Brisbane. The suburb and All Brisbane get the room
   their words need; with "My suburbs" as well, those two share the first row and the distances the second. */
.seg.reach button { flex: 0 0 auto; padding: 0 12px; }
/* the suburb and "All Brisbane" share what's left; a long name goes onto two lines rather than
   being cut off or shrunk (the same type size for every suburb) */
.seg.reach button:first-child, .seg.reach button[data-id="mine"] {
  flex: 1 1 0; min-width: 0; padding: 4px 8px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; overflow-wrap: anywhere;
}
.seg.reach.five { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.seg.reach.five button { grid-column: span 2; }
.seg.reach.five button:nth-child(-n+2) { grid-column: span 3; }
/* categories: every one on show, wrapping (two rows on most phones), never scrolling sideways */
.pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.pill { min-height: 34px; padding: 0 7px; border-radius: 999px; border: 1.5px solid #d5dfe6; background: #fff; color: var(--navy); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
/* days: set apart, smaller and quieter, with a light "on" so they never read as more categories */
.pills.when { margin-top: 16px; gap: 6px; }
.pill.dt { min-height: 28px; padding: 0 10px; border-color: transparent; background: #eef3f5; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.pill.dt[aria-pressed="true"] { background: #dfeaf6; border-color: #b9cfe6; color: var(--navy); }
/* ---------- a form that takes the whole screen (List an event) ---------- */
.sheet-wrap.whole .sheet { max-width: 560px; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding-top: calc(var(--safe-t) + 14px); animation: none; }
.evf { display: block; margin-top: 12px; }
.evf > span, .evf-set legend { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.evf i, .evf-set legend i { color: #c2410c; font-style: normal; }
.evf .field, .evf select { width: 100%; }
.evf textarea.field { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.4; resize: vertical; font: inherit; }
.evf.bad .field, .evf.bad select { border-color: #c2410c; }
.evf-count { display: block; text-align: right; font-size: 12px; color: var(--faint); margin-top: 3px; }
.evf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.evf-two.wide { grid-template-columns: 2fr 1fr; }
.evf-set { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.evf-set.bad legend { color: #c2410c; }
.evf-opt { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; }
.evf-opt input { width: 20px; height: 20px; accent-color: var(--green-d); flex: none; }
.evf-set.row { display: flex; flex-wrap: wrap; column-gap: 22px; }
.evf-set.row legend { width: 100%; }
.evf-err { min-height: 20px; margin: 12px 2px 8px; font-size: 14px; font-weight: 700; color: #c2410c; }
.evf-done { text-align: center; padding: 26px 6px 8px; }
.evf-done h3 { font-size: 20px; font-weight: 800; color: var(--navy); margin: 12px 0 8px; }
.evf-done p { font-size: 15.5px; line-height: 1.45; }
.evf-tick { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--green-bg); color: var(--green-d); display: grid; place-items: center; font-size: 28px; font-weight: 800; }

/* ---------- Businesses: groups, then the categories inside the chosen one ---------- */
/* The same pill as What's On (.pill is the source of truth: 12px, 600, 34px high, 7px each side),
   with the group's picture in front. */
.bz-groups { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.bz-g { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 7px; border-radius: 999px; border: 1.5px solid #d5dfe6; background: #fff; color: var(--navy); font-size: 12px; font-weight: 600; white-space: nowrap; }
.bz-g .ico { font-size: 14px; line-height: 1; }
.bz-g[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
/* one chosen: it keeps its name, the rest fold down to their picture and line up beside it */
.bz-groups.picked .bz-g:not([aria-pressed="true"]) { width: 34px; padding: 0; justify-content: center; }
.bz-groups.picked .bz-g:not([aria-pressed="true"]) .lb { display: none; }
.bz-subs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.bz-claim button { color: var(--muted); font-weight: 600; font-size: inherit; text-decoration: underline; }
.add-link.quiet { color: var(--muted); font-weight: 600; }
/* ---------- Add a business / messages ---------- */
.choice { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 14px 12px 14px 14px; text-align: left; background: #fff; border: 1.5px solid #d5dfe6; border-radius: 16px; color: var(--navy); }
.choice .ico { flex: none; font-size: 26px; width: 34px; text-align: center; }
.choice b { display: block; font-size: 16px; font-weight: 800; }
.choice .grow span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 1px; }
.choice .chev, .util-row .chev { flex: none; color: #9db0bb; }
.own-new { margin-top: 18px; padding: 14px; border-radius: 16px; background: #f6f9fb; border: 1px solid var(--line); }
.own-new b { font-size: 15.5px; color: var(--navy); }
.own-new p { font-size: 14px; color: var(--muted); margin: 4px 0 10px; }
.own-none { padding: 14px 2px 0; font-size: 14.5px; color: var(--muted); }
.sheet-wrap.pin #own-results { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.msg-biz { padding: 12px 14px; border-radius: 14px; background: #f6f9fb; border: 1px solid var(--line); }
.msg-biz b { display: block; font-size: 16px; color: var(--navy); }
.msg-biz span { font-size: 13.5px; color: var(--muted); }
.evf small.opt { font-weight: 500; color: var(--faint); font-size: 12px; }
.evf-err a { color: inherit; }
/* ---------- Explore: Contact us, a plain row, not another section ---------- */
.util-row { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 30px; padding: 14px 4px; border-top: 1px solid var(--line); text-align: left; font-size: 15px; font-weight: 500; color: var(--muted); }
.util-ico { flex: none; color: var(--muted); }
/* ---------- Saved: reorder ---------- */
.ro-list { display: flex; flex-direction: column; gap: 8px; }
.ro-row { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 4px 0 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; font-size: 16px; font-weight: 700; color: var(--navy); }
.ro-row.drag { position: relative; z-index: 2; box-shadow: 0 8px 22px rgba(0, 39, 83, 0.18); border-color: #b9cfe6; }
.ro-handle { width: 48px; height: 48px; display: grid; place-items: center; color: #7f97a5; touch-action: none; cursor: grab; }

/* Health listings: "Why no reviews?" in place of the rating, with the website's words behind a tap */
.bz-why { color: #6f8b99; font-size: 13.5px; font-weight: 500; text-decoration: underline dotted; text-underline-offset: 4px; min-height: 30px; padding: 0; white-space: nowrap; }
.bz-why span { text-decoration: none; display: inline-block; }
.biz.basic .meta .bz-why { font-size: inherit; min-height: 0; }
.bz-why-row { display: flex; }
.bz-why-tip { margin: 6px 0 2px; padding: 12px 14px; border-radius: 12px; background: var(--navy); color: #fff; font-size: 13.5px; line-height: 1.45; box-shadow: 0 8px 22px rgba(0, 39, 83, 0.18); }
.bz-why-tip[hidden] { display: none; }
.biz.basic .bz-why-tip { margin: 8px 8px 4px 50px; }

/* nothing of that kind anywhere (rare), under the "none here yet" card */
.bz-far { margin: 2px 4px 0; font-size: 14px; color: var(--muted); }
.bz-far.gap { margin: -2px 2px 10px; font-size: 13.5px; }

/* Reminders: the app's version, and the screen details behind it */
.app-ver { display: block; margin: 22px auto 0; padding: 8px 10px; font-size: 12px; color: var(--faint); }
.facts { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #f2f5f7; font-size: 12.5px; line-height: 1.5; color: var(--ink); word-break: break-word; }

/* Food trucks (Explore > Community, and the Food Trucks pill in What's on) */
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--navy); text-decoration: underline; cursor: pointer; }
.tag.truck { background: #fff1e0; color: #9a4d00; }
.ev-check { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.tag.truck.ft-named { background: #e3ecf6; color: var(--navy); }
.tag.truck.ft-event { background: #fff1e0; color: #9a4d00; }
.tag.truck.ft-council { background: #eaf2ee; color: #2f6b47; }
.ft-legend { margin: 10px 2px 4px; display: grid; gap: 6px; }
.ft-legend p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.ft-legend .tag { margin-right: 4px; }
/* Sunrise and sunset under the weather indicators: the same tiles, two across */
.snap-idx.wx-sun { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.snap-idx.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Support & help */
.sup .sup-exit { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); z-index: 30; background: var(--navy); color: #fff; border: 0; border-radius: 24px; padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; }
.pad.sup { padding-bottom: 96px; }
.sup-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line, #e3eaee); }
.sup .list > .sup-row:first-child { border-top: 0; }
.sup-row h3 { font-size: 15.5px; margin: 0; }
.sup-row p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.sup-row .ev-tags { margin-top: 6px; }
.sup-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; max-width: 46%; }
.sup-acts .btn { white-space: nowrap; }
.sup-g { background: #fff; border: 1px solid var(--line, #e3eaee); border-radius: 14px; margin-top: 8px; padding: 0 14px; }
.sup-g > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 14px 0; font-weight: 800; color: var(--navy); cursor: pointer; }
.sup-g > summary::-webkit-details-marker { display: none; }
.sup-g > summary::after { content: "›"; font-size: 20px; line-height: 1; color: var(--muted); transform: rotate(90deg); transition: transform .15s; }
.sup-g[open] > summary::after { transform: rotate(-90deg); }
.sup-g .list { padding-bottom: 6px; }
.sup-safe { background: #fff4dc; border-radius: 10px; padding: 9px 11px; margin: 0 0 6px; color: #6b4a00; }

/* What's changing locally */
.chgs .chg-title { font-size: 24px; line-height: 1.2; color: var(--navy); margin-top: 14px; }
.chgs .pill small { font-weight: 700; opacity: .65; margin-left: 2px; }
.chg .ev-main { padding-left: 2px; }
.chg .chg-when { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-top: 3px; }
.tag.chg-green { background: var(--green-bg); color: var(--green-d); }
.tag.chg-warn { background: #fff4dc; color: var(--warn); }
.tag.chg-say { background: #e3ecf6; color: var(--navy); }
.tag.chg-stop { background: #fde8e6; color: #a1281e; }
.chg-h { font-size: 13px; font-weight: 800; color: var(--navy); margin: 12px 0 4px; text-transform: none; }
.chg-tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.chg-tl li { position: relative; font-size: 13.5px; padding: 3px 0; color: var(--ink); }
.chg-tl li::before { content: ""; position: absolute; left: -19px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.chg-tl li.stage { color: var(--muted); }
.chg-tl li.stage::before { background: #c6d3dd; }
.chg-apps { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.chg-apps li { padding: 3px 0; }
.chg-apps a { color: var(--navy); font-weight: 700; }
.chg-note { margin: 12px 2px 0; }
.chg-biz { margin-top: 18px; }
.chg-biz h3 { font-size: 16px; }

/* ---------- Tips: a small pointer beside a feature, the first time it's met ---------- */
.tip {
  position: fixed; z-index: 40; left: 12px; top: 0; padding: 11px 40px 12px 14px; border-radius: 14px;
  background: var(--navy); color: #fff; box-shadow: 0 10px 28px rgba(0, 20, 45, 0.28);
  opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease;
}
.tip.up { transform: translateY(-4px); }
.tip.in { opacity: 1; transform: none; }
.tip p { margin: 0; font-size: 14px; line-height: 1.38; font-weight: 500; }
.tip-arrow { position: absolute; top: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--navy); transform: rotate(45deg); border-radius: 2px; }
.tip.up .tip-arrow { top: auto; bottom: -6px; }
.tip-x { position: absolute; top: 2px; right: 2px; width: 36px; height: 36px; display: grid; place-items: center; color: rgba(255, 255, 255, 0.75); font-size: 22px; line-height: 1; border-radius: 50%; }
.tip-x:active { background: rgba(255, 255, 255, 0.12); }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; transform: none; } }
/* the same idea, written into the page where a pop-up would be too much */
.inline-tip { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 12px; padding: 11px 13px; border-radius: 14px; background: #eef4fb; border: 1px solid #d6e3f1; color: var(--ink); font-size: 13.5px; line-height: 1.4; }
.inline-tip b { font-weight: 700; color: var(--navy); }

/* ---------- Highlights (What's On) and Shows & concerts ---------- */
.hl { margin: 14px -16px 2px; }
.hl-h { display: flex; align-items: baseline; gap: 8px; padding: 0 16px; }
.hl-h h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--navy); }
.hl-row { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 6px; scroll-padding: 0 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
.hl-row::-webkit-scrollbar { display: none; }
.hl-card { flex: none; width: 168px; min-height: 104px; display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; text-align: left; scroll-snap-align: start;
  border-radius: 16px; background: var(--navy); color: #fff; box-shadow: 0 6px 16px rgba(0, 39, 83, 0.16); }
.hl-card b { font-size: 14.5px; line-height: 1.25; font-weight: 700; }
.hl-when { font-size: 11.5px; font-weight: 800; letter-spacing: 0.2px; color: #7fdc9e; text-transform: uppercase; }
.hl-where { margin-top: auto; font-size: 12px; color: rgba(255, 255, 255, 0.72); }
.ev-day { display: block; font-size: 11.5px; font-weight: 800; color: var(--green-d); margin-bottom: 2px; text-transform: uppercase; }

/* What's On: the ways into Shows & concerts, Live sport and the show season, under Highlights */
.ev-sheet .ev { margin-top: 4px; }

/* Ekka & Local Shows */
.ag-list { padding-top: 6px; }
.ag-h { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); margin: 18px 2px 10px; }
.ag-sub { font-size: 13.5px; color: var(--muted); margin: -4px 2px 10px; }
.ag-card { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: 0 2px 8px rgba(0, 39, 83, .04); }
.ag-card + .ag-card { margin-top: 10px; }
.ag-tile { flex: none; width: 58px; border-radius: 12px; overflow: hidden; text-align: center; background: var(--green-bg); border: 1px solid #cfe9d8; }
.ag-mon { display: block; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; padding: 4px 0 3px; }
.ag-day { display: block; font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1; padding: 8px 0 9px; font-variant-numeric: tabular-nums; }
.ag-day small { font-size: 13px; font-weight: 700; }
.ag-tbc { display: block; font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .06em; padding: 11px 0 12px; }
.is-tbc .ag-tile { background: #f1f5f7; border-color: var(--line); }
.is-tbc .ag-mon { background: #7a96a3; }
.ag-body { flex: 1; min-width: 0; }
.ag-body h3 { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.ag-when { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--navy); }
.is-tbc .ag-when { font-weight: 500; color: var(--ink); }
.ag-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 10px; background: #eef3f6; color: var(--navy); font-size: 12px; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.ag-chip.on { background: #e3f4ea; color: #1f7a45; }
.ag-where { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.ag-note { margin-top: 6px; font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.ag-more { display: inline-block; margin-top: 6px; padding: 6px 0 0; color: var(--green-d); font-weight: 700; font-size: 14px; text-decoration: none; }

/* ---------- Personalise: adding pages to Home ---------- */
.pg-jump { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 12px 12px 14px; text-align: left; background: var(--green-bg); border: 1.5px solid #c6e3d0; border-radius: 14px; color: var(--navy); }
.pg-jump b { display: block; font-size: 16px; }
.pg-jump .grow span { display: block; font-size: 13px; color: var(--muted); }
.pg-jump .chev { flex: none; color: var(--green-d); }
.pg-jump-plus { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-size: 20px; font-weight: 700; line-height: 1; }
.pg-ico { flex: none; width: 28px; text-align: center; font-size: 21px; line-height: 1; }
.pg-row b { font-size: 15.5px; font-weight: 600; }
.pg-add { flex: none; min-height: 36px; min-width: 84px; padding: 0 12px; border-radius: 18px; border: 1.5px solid var(--green); background: #fff; color: var(--green-d); font-weight: 700; font-size: 14px; white-space: nowrap; }
.pg-add.on { background: var(--green-bg); border-color: #c6e3d0; color: var(--green-d); }
.pg-x { flex: none; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; color: var(--muted); font-weight: 600; font-size: 14px; }
.pg-empty { margin: 4px 0 2px; }
.pg-search { margin: 6px 0 2px; }
.pg-gh { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--navy); }
.pg-sug .pg-gh { color: var(--green-d); }
.pg-hint { display: flex; align-items: center; gap: 10px; margin: -2px 0 8px 52px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--green-bg); font-size: 13.5px; color: var(--navy); }
.pg-hint span { flex: 1; min-width: 0; }
.pg-set { margin: 6px 0 2px; }
.pg-set b { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.pg-chips { padding-bottom: 6px; }
.pg-none { margin-top: 12px; }
/* Home: the pages people added */
.snap-pages { margin-top: 12px; }
.pg-head { margin: 0 2px 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--faint); }
.pg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pg-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; min-width: 0; min-height: 70px; padding: 9px 9px 10px; text-align: left; background: #fff; border: 1px solid #d5dfe6; border-radius: 12px; transition: transform 0.12s ease; }
.pg-tile:active, .pg-wide:active { transform: scale(0.97); }
.pg-t-ico { font-size: 20px; line-height: 1; }
.pg-t-lb { font-size: 12.5px; font-weight: 600; color: var(--navy); line-height: 1.2; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-tile.pg-new { border: 1.5px dashed #a9cdb5; background: #f7fbf8; }
.pg-tile.pg-new .pg-t-ico, .pg-tile.pg-new .pg-t-lb { color: var(--green-d); }
.pg-wide { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px 11px 14px; text-align: left; background: #fff; border: 1.5px dashed #a9cdb5; border-radius: 12px; color: var(--navy); transition: transform 0.12s ease; }
.pg-wide .pg-t-ico { color: var(--green-d); font-weight: 700; font-size: 22px; }
.pg-wide b { display: block; font-size: 15px; }
.pg-wide .grow span { display: block; font-size: 12.5px; color: var(--muted); }
.pg-wide .chev { flex: none; color: #9db0bb; }
@media (prefers-reduced-motion: reduce) { .pg-tile, .pg-wide { transition: none; } .pg-tile:active, .pg-wide:active { transform: none; } }

/* the buses listed at a stop are inbound ones (v89): said once, over the times */
.deps-h { font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--green-d); margin: 2px 0 2px; }

/* Home: "Make Home yours", the way into Personalise: a small settings link beside "Live for" (v94).
   One line each; when the suburb's name is long the link moves under "Live for", on the right. */
.snap-foot { flex-wrap: wrap; row-gap: 8px; }
.snap-foot .home-mine { flex: none; margin-left: auto; display: flex; align-items: center; gap: 7px; padding: 5px 4px 5px 6px; text-align: left; background: #fff; border: 1px solid #e3eaef; border-radius: 11px; color: var(--navy); }
.home-mine-ico { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: #f0f4f6; color: var(--navy); }
.home-mine-ico svg { width: 15px; height: 15px; }
.home-mine-t { display: flex; flex-direction: column; white-space: nowrap; }
.home-mine-t b { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.home-mine-t span { font-size: 10.5px; color: var(--muted); line-height: 1.25; }
.snap-foot .home-mine .chev { flex: none; width: 13px; height: 13px; color: #9db0bb; }
.home-mine:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { .home-mine:active { transform: none; } }

/* v93: Personalise refinements */
.pg-dim { opacity: 0.45; }
.pg-offnote { margin: 2px 0 6px; }
.pg-up { display: block; margin-top: 2px; padding: 4px 0; border: 0; background: none; color: var(--green-d); font: inherit; font-size: 13px; font-weight: 700; text-align: left; }
.pg-up.off { color: var(--faint); font-weight: 600; }
.home-ask { flex-direction: column; gap: 10px; }
.home-ask p { margin: 0; font-size: 14.5px; color: var(--ink); line-height: 1.4; }
.home-ask-btns { display: flex; gap: 8px; }
.tile.is-sc .tile-val { color: var(--navy); }
.tile.is-sc .tile-lb { white-space: normal; }
.tile.is-sc .tile-ico { font-size: 22px; }
/* Home: Find trusted local businesses (keeps the featured box's place and look) */
.feat-find { gap: 12px; padding: 12px 10px 12px 12px; }
.feat-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: #d9efe1; color: var(--green-d); }
.feat-find b { white-space: normal; font-size: 15px; }
.feat-find .grow span { font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.feat .feat-ico svg { color: var(--green-d); }
.snap-foot > .grow { flex: 1 0 auto; white-space: nowrap; }
.snap-foot .home-mine { gap: 6px; padding: 4px 3px 4px 5px; }
.home-mine-ico { width: 22px; height: 22px; border-radius: 6px; }
.home-mine-ico svg { width: 13px; height: 13px; }
.home-mine-t b { font-size: 12px; }
.home-mine-t span { font-size: 10px; }
/* v96: the Bins tile uses the same wheelie bin as the bin day page, sized to sit with the emoji */
.tile[data-tile="bins"] .tile-ico, .tile[data-tile="bins"] .tile-ico svg { width: 26px; height: 30px; }
@media (max-width: 374px) { .tile[data-tile="bins"] .tile-ico, .tile[data-tile="bins"] .tile-ico svg { width: 22px; height: 26px; } }
/* v100: the business box: white with a thick brand-green border (the v98 full-green fill read like an ad) */
.feat.feat-find { gap: 12px; padding: 13px 12px 13px 13px; border: 3px solid #1f8a45; border-radius: 16px; background: #fff; color: var(--navy); }
.feat-find .feat-ico { width: 46px; height: 46px; border-radius: 13px; background: #e3f4e9; color: var(--green-d); }
.feat-find .feat-ico svg { width: 24px; height: 24px; }
.feat-find b { color: var(--navy); font-size: 15.5px; }
.feat-find .grow span { color: #73889a; }
.feat-find .grow .ff-stars { font-weight: 700; color: #5a6f80; margin-top: 3px; }
.ff-stars i { font-style: normal; font-size: 0.95em; margin: 0 1px; }
.ff-go { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e3f4e9; }
.feat-find .ff-go svg { color: var(--green-d); }
.feat.feat-find:active { transform: scale(0.99); }
/* Flood Watch (v105). Australian Warning System colours: Advice yellow, Watch and Act orange, Emergency Warning red. */
.fw-lvl { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .2px; vertical-align: 1px; }
.fw-lvl.fw-ad { background: #ffe200; color: #1d1d1b; }
.fw-lvl.fw-wa { background: #ff7900; color: #1d1d1b; }
.fw-lvl.fw-ew { background: #e1251b; color: #fff; }
.fw-lvl.fw-un { background: #eef3f5; color: var(--navy); }
.fw-card { margin-top: 10px; border-left: 6px solid #d5dfe6; }
.fw-card.fw-ad { border-left-color: #ffe200; } .fw-card.fw-wa { border-left-color: #ff7900; } .fw-card.fw-ew { border-left-color: #e1251b; }
.fw-card h3 { margin-top: 8px; font-size: 15px; line-height: 1.35; }
.fw-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fw-area { font-size: 13px; font-weight: 700; color: var(--navy); }
.fw-acts { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; }
.fw-acts li { margin: 3px 0; }
.fw-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fw-none { border-left: 6px solid #9db0bb; }
.fw-stale { margin: 8px 2px 0; color: var(--warn); }
.fw-link { color: inherit; text-decoration: none; align-items: center; }
.fw-link svg { flex: none; color: #9db0bb; }
.fw-help { background: #f6f9fb; }
.fw-strip { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 11px 10px 11px 12px; text-align: left; border-radius: 14px; border: 0; }
.fw-strip b { display: block; font-size: 15px; font-weight: 800; }
.fw-strip .grow span { display: block; font-size: 12.5px; opacity: .92; }
.fw-strip-ico { font-size: 22px; line-height: 1; }
.fw-strip.fw-ad { background: #ffe200; color: #1d1d1b; }
.fw-strip.fw-wa { background: #ff7900; color: #1d1d1b; }
.fw-strip.fw-ew { background: #e1251b; color: #fff; }
.fw-strip.fw-un { background: #fff4dc; color: var(--navy); border: 1px solid #f3d48a; }
/* Report an issue (v106): a quiet text link, not a button; full-size touch target, small to look at */
.rp-link { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 6px; margin-left: auto; background: none; border: 0; color: #7a90a0; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rp-link span { font-size: 12px; }
.rp-link:active { color: var(--navy); }
.ev-actions .rp-link { margin-left: 0; }
.bz-links .rp-link { min-height: 32px; padding: 0 4px; font-size: 12px; }
.rp-row { display: flex; justify-content: flex-end; padding: 0 10px 4px; }
.rp-note { margin: 8px 0 0; font-size: 12.5px; color: var(--warn); }
.biz .rp-note { padding: 0 14px 8px; }
.rp-what { font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.rp-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rp-r { padding: 9px 13px; border-radius: 999px; border: 1px solid #d5dfe6; background: #fff; color: var(--navy); font-size: 14px; font-weight: 600; }
.rp-r[aria-checked="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.rp-lbl { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin: 10px 0 4px; }
#rp-detail, #rp-contact { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d5dfe6; border-radius: 10px; font: inherit; font-size: 15px; }
.rp-done { padding: 8px 0 2px; }
/* What can we do? (v107) */
.wd-title { font-size: 28px; margin: 14px 0 2px; color: var(--navy); }
.wd-sub { margin: 0 0 12px; }
.wd-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wd-row::-webkit-scrollbar { display: none; }
.wd-row.wrap { flex-wrap: wrap; overflow: visible; }
.wd-chip { flex: none; padding: 8px 13px; border-radius: 999px; border: 1px solid #d5dfe6; background: #fff; color: var(--navy); font-size: 14px; font-weight: 600; white-space: nowrap; }
.wd-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.wd-date { margin: 0 0 10px; padding: 9px 12px; border: 1px solid #d5dfe6; border-radius: 10px; font: inherit; font-size: 15px; background: #fff; color: var(--navy); }
.wd-more { background: none; border: 0; padding: 6px 2px 10px; color: var(--green-d); font-size: 14px; font-weight: 700; text-align: left; }
.wd-opts { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px 12px 8px; margin-bottom: 8px; }
.wd-opts h4 { margin: 10px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.wd-wx { margin: 4px 0 6px; padding: 10px 12px; border-radius: 12px; background: #eef4fb; color: var(--navy); font-size: 14px; }
.wd-h { margin-top: 18px; }
.ev.wd .wd-ico { font-size: 24px; text-align: center; padding-top: 2px; }
.wd-av { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.wd-av.now { color: var(--green-d); }
.wd-av.later, .wd-av.sched { color: var(--navy); }
.wd-av.check { color: #8a6a1c; font-weight: 600; }
.wd-evwrap > .wd-av { margin: 10px 2px 4px; }
.wd-facts { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink); }
.wd-facts li { margin: 2px 0; }
.wd-all { margin-top: 8px; }
.wd-meta { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.wd-warn { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--warn); }
/* v108: What's there to do? and What's changing?, side by side under the small tiles */
.duo-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.duo-row.n1 { grid-template-columns: minmax(0, 1fr); }
.duo { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 70px; padding: 10px 7px 10px 8px; text-align: left; background: #fff; border: 1px solid #d5dfe6; border-radius: 16px; color: var(--navy); }
.duo b { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; line-height: 1.22; letter-spacing: -0.1px; }
.duo-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #e3f4e9; color: var(--green-d); font-size: 21px; line-height: 1; }
.duo-ico svg { width: 21px; height: 21px; }
.duo-go { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #e3f4e9; }
.duo-go svg { color: var(--green-d); width: 14px; height: 14px; }
@media (max-width: 374px) { .duo { gap: 6px; padding: 9px 3px 9px 7px; } .duo b { font-size: 11.5px; } .duo-ico { width: 30px; height: 30px; font-size: 18px; border-radius: 9px; } .duo-ico svg { width: 18px; height: 18px; } .duo-go { width: 14px; background: none; } }
/* v111: softer colour on every icon across the app (emoji and coloured icons), still in colour, just less bright */
.tile-ico, .duo-ico i, .ico, .ex-ico, .game-ico, .cross-ico, .home-mine-ico, .pg-t-ico, .pg-ico, .wd-ico, .util-ico,
.tr-ico, .snap-wx-ico, .nudge-ico, .game-wait-ico, .fw-strip-ico, .lb-link > span, .bz-ver > span, .bz-label > span, .ff-stars i
{ filter: saturate(0.55) brightness(0.95); }
.duo-ico i { font-style: normal; display: block; }
/* v112: nothing of that kind here — a light green panel that points down to the nearest ones, with
   "know a good one?" as the smaller, white side panel (Nick's mock-up) */
.bzn { display: flex; align-items: stretch; margin-bottom: 14px; border-radius: 16px; background: #fff; border: 1px solid #dbe5e0; overflow: hidden; }
.bzn-main { flex: 1 1 62%; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 16px 12px 16px 14px; background: #eef7f1; }
.bzn-head { display: flex; align-items: center; gap: 10px; }
.bzn-head b { font-size: 16px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.bzn-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #d9efe1; display: grid; place-items: center; font-size: 21px; line-height: 1; }
.bzn-ico i { font-style: normal; display: block; filter: saturate(0.55) brightness(0.95); }
.bzn-more { margin: 0; padding-top: 12px; border-top: 1px solid #d3e6da; font-size: 15px; color: var(--navy); line-height: 1.35; }
.bzn-more b { color: var(--green-d); font-weight: 800; }
.bzn-side { flex: 0 0 36%; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 14px 12px; border-left: 1px solid #e3ebe6; }
.bzn-side > b { font-size: 14.5px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.bzn-side > span:not(.bzn-bulb) { font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-bottom: 4px; }
.bzn-bulb { width: 28px; height: 28px; color: var(--green-d); }
.bzn-bulb svg { width: 28px; height: 28px; display: block; }
.bzn-side .bz-btn { min-height: 38px; font-size: 13px; white-space: normal; line-height: 1.15; padding: 4px 8px; border-radius: 10px; }
@media (max-width: 359px) {
  .bzn { flex-direction: column; }
  .bzn-side { border-left: 0; border-top: 1px solid #e3ebe6; }
  .bzn-side .bz-btn + .bz-btn { margin-top: 2px; }
}
/* v113: optional screenshot on Contact us */
.msg-photo .msg-pick { margin-top: 6px; cursor: pointer; }
.msg-shot { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.msg-shot img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
/* v114/v115: What's On (and What's there to do?) pills are exactly the Business category pills:
   same border, size, weight and selected navy, with the same softened picture */
.wd-row { flex-wrap: wrap; overflow: visible; gap: 5px; padding: 2px 0 10px; margin: 0; }
.pills { gap: 5px; }
.pill, .wd-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 7px; border-radius: 999px; border: 1.5px solid #d5dfe6; background: #fff; color: var(--navy); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: none; }
.pill .pi { font-size: 14px; line-height: 1; filter: saturate(0.55) brightness(0.95); }
.pill[aria-pressed="true"], .wd-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: none; }
.pill.dt { gap: 0; padding: 0 10px; }
/* v115: Personalise back to a quiet text link (the one-time tip says what it does) */
.snap-foot .home-mine { gap: 6px; padding: 6px 2px 6px 8px; background: none; border: 0; border-radius: 8px; color: var(--muted); }
.snap-foot .home-mine .home-mine-ico { width: auto; height: auto; background: none; color: var(--muted); }
.snap-foot .home-mine .home-mine-ico svg { width: 17px; height: 17px; }
.snap-foot .home-mine .home-mine-t { font-size: 14px; font-weight: 500; color: var(--muted); }
.snap-foot .home-mine .chev { width: 14px; height: 14px; color: var(--muted); }
.tip p b { color: inherit; font-weight: 800; }
/* v116: What's there to do? — a full-screen sheet: three quick choices, then a handful of ideas */
.wq-intro { margin: -4px 0 4px; font-size: 15px; color: var(--muted); line-height: 1.4; }
.wq-q { margin: 20px 0 9px; font-size: 15.5px; font-weight: 800; color: var(--navy); }
.wq-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wq-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 76px; padding: 10px 6px; border-radius: 14px; border: 1.5px solid #d5dfe6; background: #fff; color: var(--navy); font-size: 13.5px; font-weight: 700; line-height: 1.2; text-align: center; }
.wq-opt .wq-e { font-size: 24px; line-height: 1; filter: saturate(0.55) brightness(0.95); }
.wq-opt[aria-checked="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #eef7f1; }
.wq-opt[aria-checked="true"] .wq-e { filter: none; }
.wq-opt:active { transform: scale(0.97); }
.wq-go { margin-top: 26px; min-height: 54px; font-size: 17px; }
.wq-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: -2px 0 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.wq-sum .link { font-size: 13.5px; font-weight: 700; color: var(--green-d); }
.wq-note { margin: 4px 2px 8px; font-size: 13px; color: var(--muted); }
.wq-card { position: relative; margin: 0 0 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.wq-main { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 46px 14px 14px; text-align: left; color: inherit; }
.wq-ico { flex: none; width: 52px; height: 52px; border-radius: 14px; background: #eef7f1; display: grid; place-items: center; font-size: 27px; line-height: 1; }
.wq-ico i { font-style: normal; filter: saturate(0.55) brightness(0.95); }
.wq-body { flex: 1; min-width: 0; display: block; }
.wq-body h3 { margin: 1px 0 2px; font-size: 16.5px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.wq-meta { display: block; font-size: 12.5px; color: var(--muted); }
.wq-why { display: block; margin: 7px 0 0; font-size: 14px; color: #2d4654; line-height: 1.4; }
.wq-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.wq-av { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.wq-av.now, .wq-av.sched, .wq-av.later { color: var(--green-d); }
.wq-fav { position: absolute; top: 8px; right: 6px; }
.wq-more { padding: 0 14px 14px 78px; }
.wq-more .ev-actions { margin-top: 10px; }
.wq-again { margin-top: 14px; min-height: 50px; font-size: 15.5px; }
.wq-row { display: flex; gap: 8px; margin-top: 10px; }
.wq-row > * { flex: 1; }
.wq-refine { margin-top: 12px; padding: 4px 14px 14px; border-radius: 14px; background: #f4f8fa; }
.wq-refine h4 { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.wq-seg { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: #e6edf1; }
.wq-seg button { flex: 1; min-height: 38px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.wq-seg button[aria-pressed="true"] { background: #fff; color: var(--navy); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 39, 83, .12); }
.wq-none { margin-top: 6px; }
.wq-src { margin-top: 20px; text-align: center; }
.wq-launch { margin-top: 16px; }
.wq-launch .btn { margin-top: 14px; }
@media (max-width: 374px) {
  .wq-opt { min-height: 70px; font-size: 12.5px; padding: 8px 4px; }
  .wq-more { padding-left: 14px; }
  .wq-main { gap: 10px; }
  .wq-ico { width: 44px; height: 44px; font-size: 23px; }
}
/* v117 (trial): categories folded behind one button — What's On and Businesses */
.cat-bar { align-items: center; }
.cat-tog { gap: 6px; padding: 0 10px 0 9px; border-color: var(--navy); font-weight: 700; }
.cat-tog .cat-chev { transition: transform .15s ease; }
.cat-tog.open { background: #eef3f8; }
.cat-tog.open .cat-chev { transform: rotate(180deg); }
.cat-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; }
.cat-all { display: inline-flex; align-items: center; gap: 5px; padding: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cat-all .pi, .cat-all .ico { font-size: 14px; filter: saturate(0.55) brightness(0.95); }
.cat-x { margin-left: 2px; font-size: 15px; line-height: 1; opacity: .8; }
.pills.cat-open, .bz-groups.cat-open { margin-top: 8px; padding: 10px; border-radius: 14px; background: #f3f7fa; }
.bz-groups.cat-open { margin-top: 8px; }
/* v117: the shallower "none listed here" panel */
.bzn2 { margin-bottom: 14px; border-radius: 16px; background: #eef7f1; border: 1px solid #d3e6da; overflow: hidden; }
.bzn2-top { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.bzn2-top .bzn-ico { width: 40px; height: 40px; font-size: 20px; }
.bzn2-t { min-width: 0; }
.bzn2-t > b { display: block; font-size: 15.5px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.bzn2-t > span { display: block; margin-top: 2px; font-size: 14px; color: var(--navy); }
.bzn2-t > span b { color: var(--green-d); font-weight: 800; }
.bzn2-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 9px 12px 9px 14px; background: #fff; border-top: 1px solid #dfece4; }
.bzn2-q { font-size: 13px; font-weight: 600; color: var(--muted); }
.bzn2-acts { display: flex; gap: 6px; }
.bzn2-btn { min-height: 32px; padding: 0 11px; border-radius: 999px; border: 1.5px solid #c3d0db; background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.bzn2-btn.solid { background: var(--navy); border-color: var(--navy); color: #fff; }
/* v117: the Send button on the message forms stays in view at the bottom of the sheet */
#msgf #msgf-go { position: sticky; bottom: 0; z-index: 2; margin-top: 12px; box-shadow: 0 -10px 14px 6px #fff; }
/* v117: more than one home */
.home2-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.home2-row .grow { min-width: 0; }
.home2-row b { display: block; font-size: 15px; color: var(--navy); }
.home2-row .grow > span { display: block; font-size: 13px; color: var(--muted); }
.home2-ic { font-size: 20px; filter: saturate(0.55) brightness(0.95); }
.home2-acts { display: flex; align-items: center; gap: 4px; }
.home2-x { width: 32px; height: 32px; border-radius: 50%; font-size: 20px; color: var(--muted); }
.home-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px 9px; border-radius: 999px; background: #eef3f8; color: var(--navy); font-size: 12.5px; font-weight: 700; }