/* ================= Fern Night: the liquid glass layer
   Smoked fern glass over a deep forest ground; brand colours glow through it. Loaded after site.css and
   glass-surfaces.css (generated). Styles only: no text, markup or behaviour depend on it, so removing the two
   <link>s returns the site to its original look. Designed in design/ui-refresh/ (see BRIEF.md). */
:root {
  /* material */
  --g-fill: rgba(14, 38, 29, .7);
  --g-fill-strong: rgba(19, 48, 37, .88);
  --g-fill-clear: rgba(8, 26, 19, .58);
  --g-blur: blur(28px) saturate(160%);
  --g-blur-clear: blur(20px) saturate(170%);
  --g-rim: rgba(190, 240, 214, .16);
  --g-hair: rgba(190, 240, 214, .1);
  --g-text: #F4F2EB;
  --g-muted: #BCCBC3;
  --g-hi: inset 0 1px 0 rgba(220, 255, 236, .14), inset 0 -1px 0 rgba(0, 0, 0, .3);
  --g-sheen: linear-gradient(140deg, rgba(220, 255, 236, .1) 0%, rgba(220, 255, 236, .02) 38%, rgba(255, 255, 255, 0) 60%);
  --g-shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -14px rgba(0, 0, 0, .7);
  --g-shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 50px -16px rgba(0, 0, 0, .8);
  --g-shadow-3: 0 4px 12px rgba(0, 0, 0, .4), 0 34px 76px -20px rgba(0, 0, 0, .85);
  /* tints: brand colour as glowing glass */
  --t-berry: rgba(196, 24, 68, .94);
  --t-fern: rgba(28, 112, 74, .94);
  --t-wattle: rgba(246, 200, 52, .96);
  --t-soil: rgba(4, 12, 9, .82);
  --t-ripe: rgba(255, 143, 177, .8);
  --t-glow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 12px 32px -12px var(--glow, rgba(196, 24, 68, .6));
  /* ground */
  --ground: #061410;
  --bloom-1: rgba(38, 150, 98, .36);
  --bloom-2: rgba(246, 200, 52, .13);
  --bloom-3: rgba(196, 24, 68, .2);
  /* shape */
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 14px;
  /* motion */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* the site's own tokens, turned for a dark ground */
  --soil: #F4F2EB;
  --card: rgba(14, 38, 29, .7);
  --muted: #BCCBC3;
  --line: rgba(190, 240, 214, .14);
  --open: #6FE09C;
  --closed: #FF9C9C;
  color-scheme: dark;
}

/* ---------- ground: soft blooms for the glass to bend */
html body {
  background:
    radial-gradient(60vw 50vw at 8% 12%, var(--bloom-1), transparent 60%),
    radial-gradient(50vw 40vw at 92% 30%, var(--bloom-2), transparent 62%),
    radial-gradient(55vw 45vw at 40% 95%, var(--bloom-3), transparent 60%),
    var(--ground);
  background-attachment: fixed;
  color: var(--g-text);
}

/* ---------- Jobs Board (jobs.html) & Bento Widget */
.jstats-card {
  background: var(--g-fill);
  background-image: var(--g-sheen);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-rim);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  box-shadow: var(--g-hi), var(--g-shadow-1);
}
.jstats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.jstat-pill {
  background: rgba(0, 0, 0, .24);
  border: 1px solid var(--g-hair);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jstat-pill strong {
  font-size: 20px;
  line-height: 1.1;
  color: var(--wattle);
}
.jstat-pill span {
  font-size: 11px;
  color: var(--g-muted);
}
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
main.view-list .jobs-grid {
  grid-template-columns: 1fr;
}
.employers-grid, .sources-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 820px) {
  .jobs-grid, .employers-grid, .sources-grid {
    grid-template-columns: 1fr;
  }
}
.job-card, .employer-card, .source-card {
  background: var(--g-fill);
  background-image: var(--g-sheen);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-rim);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--g-hi), var(--g-shadow-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.job-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.job-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.job-type-badge, .job-cat-badge, .job-suburb-badge, .job-local-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.job-type-badge.jtype-full {
  background: rgba(38, 150, 98, .28);
  color: #9FDDB9;
  border: 1px solid rgba(111, 224, 156, .35);
}
.job-type-badge.jtype-part {
  background: rgba(246, 200, 52, .22);
  color: #FFE08A;
  border: 1px solid rgba(246, 200, 52, .4);
}
.job-type-badge.jtype-casual {
  background: rgba(196, 24, 68, .26);
  color: #FFB8CC;
  border: 1px solid rgba(255, 143, 177, .38);
}
.job-cat-badge {
  background: rgba(255, 255, 255, .07);
  color: var(--g-text);
  border: 1px solid var(--g-hair);
}
.job-suburb-badge {
  background: rgba(255, 255, 255, .05);
  color: var(--g-muted);
  border: 1px solid var(--g-hair);
}
.job-local-badge {
  background: var(--t-wattle);
  color: #1B1513;
}
.job-pay {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wattle);
  background: rgba(0, 0, 0, .26);
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid rgba(246, 200, 52, .25);
}
.job-title {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.25;
}
.job-employer {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: var(--g-muted);
}
.job-employer strong {
  color: var(--g-text);
}
.job-summary {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--g-text);
}
.job-apply-box {
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--g-hair);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--g-muted);
}
.job-apply-box strong {
  color: var(--wattle);
}
.job-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}
.job-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.job-apply-btn {
  min-height: 32px;
  font-size: 12.5px;
  padding: 0 12px;
}
.job-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 11.5px;
  color: var(--g-muted);
}
html body h1, html body h2 { letter-spacing: -.035em }
html body .tdate strong, html body .day .hi, html body .stage-chip b, html body .dirside b,
html body .dayline, html body .temp { font-variant-numeric: tabular-nums }

/* ---------- the material, applied */
html body .daybar,
html body .navbar,
html body .hud-card,
html body .hud-trails,
html body .stage-dock,
html body .mpanel,
html body .kinds-block,
html body .weeknav,
html body .week,
html body .cnotice,
html body .dcard,
html body .railcard.spot,
html body .railcard.feature,
html body .railcard.know,
html body .addevent,
html body .empty,
html body dialog {
  background-color: var(--g-fill);
  background-image: var(--g-sheen);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-rim);
  box-shadow: var(--g-hi), var(--g-shadow-1);
  color: var(--g-text);
}

/* header: one floating bar */
html body .townbar { padding: 10px var(--gutter-r) 0 var(--gutter-l); pointer-events: none }
html body .townbar > * { pointer-events: auto }
html body .daybar {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-bottom: 0;
  box-shadow: var(--g-hi);
  max-width: 1280px; margin: 0 auto;
}
html body .navbar {
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  border-top: 1px solid var(--g-hair);
  box-shadow: var(--g-hi), var(--g-shadow-2);
  max-width: 1280px; margin: 0 auto;
}
html body .townbar > .navbar:first-child { border-radius: var(--r-xl); border-top: 1px solid var(--g-rim) }
/* the bar's blur makes it its own layer, which would trap the phone menu (z-index 40) underneath the page:
   lift the whole bar above the page instead */
html body .navbar { position: relative; z-index: 40 }
html body .dayline a:hover { color: inherit; opacity: .75 }
html body .brand, html body .brand:hover { color: var(--g-text) }
html body .nav { gap: 4px 2px }
html body .nav a { color: var(--g-text); padding: 8px 12px; border-radius: 999px; transition: background .22s var(--ease), box-shadow .22s var(--ease), transform .12s var(--spring) }
html body .nav a:active { transform: scale(.96) }
html body .nav a[aria-current]::after { display: none }
/* header pills take the same coloured glass lip as the cards, drawn with inset shadows so nothing shifts:
   a hairline ring in the lip colour, the top edge lit, the bottom edge in shadow */
html body .navrow .nav a:hover, html body .navrow .nav a[aria-current], html body .account button {
  --lip: rgb(190, 240, 214);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--lip) 72%, white 28%),
    inset 1px 0 0 color-mix(in srgb, var(--lip) 38%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset -1px 0 0 rgba(0, 0, 0, .25),
    inset 0 0 0 1px color-mix(in srgb, var(--lip) 30%, transparent),
    var(--g-shadow-1);
}
html body .navrow .nav a:hover { background: var(--g-fill-clear); color: var(--g-text) }
/* this page: clear glass with a wattle lip, in place of the underline */
html body .navrow .nav a[aria-current] { --lip: #F6C834; background: var(--g-fill-strong) }
/* Visiting: wattle glass, its lip a brighter wattle, with a soft glow */
html body .navrow .nav a.visit, html body .navrow .nav a.visit:hover {
  --lip: #FFF0B0; background: var(--t-wattle); color: #1B1513;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--lip) 90%, white 10%),
    inset 1px 0 0 color-mix(in srgb, var(--lip) 60%, transparent),
    inset 0 -1px 0 rgba(90, 60, 0, .45),
    inset -1px 0 0 rgba(90, 60, 0, .25),
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    0 10px 30px -12px rgba(244, 196, 48, .7);
}
html body .navrow .nav a.visit:hover { filter: brightness(1.06) }
html body .account button { border: 0; background: var(--g-fill-clear); color: var(--g-text); transition: transform .12s var(--spring), background .22s var(--ease) }
html body .account button:hover { background: var(--g-fill-strong) }
html body .account button:active { transform: scale(.96) }

/* map HUD */
html body .hud-card.weekcard { background-color: var(--g-fill); color: var(--g-text) }
html body .hud-card { border-radius: var(--r-xl); box-shadow: var(--g-hi), var(--g-shadow-3) }
html body .hud-trails, html body .stage-dock { border-radius: 22px; box-shadow: var(--g-hi), var(--g-shadow-3) }
html body .hud-collapse, html body .tool, html body .close, html body .mpanel .close {
  background: var(--g-fill-clear); border: 1px solid var(--g-rim); color: var(--g-text);
  -webkit-backdrop-filter: var(--g-blur-clear); backdrop-filter: var(--g-blur-clear);
  box-shadow: var(--g-hi), var(--g-shadow-1); border-radius: 12px;
  transition: transform .12s var(--spring), background .22s var(--ease);
}
html body .tool:hover, html body .hud-collapse:hover { background: var(--g-fill-strong) }
html body .tool:active, html body .hud-collapse:active { transform: scale(.94) }
html body .dock-item { color: var(--g-text); border-radius: 16px; transition: background .22s var(--ease), transform .12s var(--spring) }
html body .dock-item:hover { background: var(--g-fill-strong); color: var(--g-text); transform: translateY(-2px) }
html body .dock-kicker { color: var(--g-muted) }
html body #dockEventCount, html body #dockDirCount { background: var(--t-wattle); color: #1B1513 }
html body .zoomhint { background: var(--t-soil); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border: 1px solid rgba(255, 255, 255, .2) }

/* pills and chips */
html body .stage-chip,
html body .trail-pill,
html body .kind,
html body .dmap,
html body .dirside button,
html body #dirOpen,
html body .ftab {
  background: var(--g-fill-clear);
  background-image: var(--g-sheen);
  border: 1px solid var(--g-rim);
  color: var(--g-text);
  box-shadow: var(--g-hi), 0 1px 2px rgba(12, 42, 31, .06);
  transition: background-color .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease), transform .14s var(--spring);
}
html body .stage-chip:hover, html body .trail-pill:hover, html body .kind:hover,
html body .dirside button:hover, html body #dirOpen:hover, html body .ftab:hover {
  background-color: var(--g-fill-strong); color: var(--g-text); transform: translateY(-1px);
  box-shadow: var(--g-hi), var(--g-shadow-1);
}
html body .stage-chip:active, html body .trail-pill:active, html body .kind:active,
html body .dmap:active, html body .dirside button:active, html body .ftab:active { transform: scale(.96) }
html body .stage-chip[aria-pressed="true"],
html body .trail-pill.active,
html body .kind.now,
html body .dirside button[aria-pressed="true"],
html body .ftab.on {
  background-color: var(--t-fern); color: #fff; border-color: rgba(255, 255, 255, .35);
  box-shadow: var(--g-hi), var(--t-glow); --glow: rgba(18, 57, 43, .55);
}
html body .stage-chip[aria-pressed="true"] b, html body .dirside button[aria-pressed="true"] b { color: var(--wattle) }
html body .stage-chip b, html body .dirside button b {
  background: rgba(255, 255, 255, .5); color: inherit; border-radius: 999px; padding: 1px 7px;
  box-shadow: inset 0 1px 2px rgba(27, 21, 19, .12);
}
html body .stage-chip[aria-pressed="true"] b, html body .dirside button[aria-pressed="true"] b { background: rgba(0, 0, 0, .22) }
html body .dirside { padding: 6px; border-radius: 20px; background: var(--g-fill-clear); border: 1px solid var(--g-rim); -webkit-backdrop-filter: var(--g-blur-clear); backdrop-filter: var(--g-blur-clear); box-shadow: var(--g-hi) }
html body .dirside button { border-radius: 14px; border-color: transparent; background-color: transparent; box-shadow: none }
html body .dmap { color: #8f1232; border-color: rgba(181, 23, 63, .35) }
html body .dmap:hover { background-color: var(--t-berry); color: #fff; border-color: rgba(255, 255, 255, .35) }

/* tinted glass buttons */
html body .btn { border: 1px solid rgba(255, 255, 255, .35); transition: transform .14s var(--spring), box-shadow .22s var(--ease), filter .22s; box-shadow: var(--g-hi), var(--g-shadow-1) }
html body .btn:hover { transform: translateY(-1px); filter: brightness(1.06) saturate(1.05) }
html body .btn:active { transform: scale(.97) }
html body .btn.berry { background: var(--t-berry); box-shadow: var(--g-hi), var(--t-glow); --glow: rgba(181, 23, 63, .55) }
html body .btn.fern { background: var(--t-fern); box-shadow: var(--g-hi), var(--t-glow); --glow: rgba(18, 57, 43, .5) }
html body .btn.wattle { background: var(--t-wattle); color: #1B1513; box-shadow: var(--g-hi), var(--t-glow); --glow: rgba(244, 196, 48, .65) }
html body .btn.soil { background: var(--t-soil); box-shadow: var(--g-hi), var(--t-glow); --glow: rgba(27, 21, 19, .45) }
html body .btn.outline-dark, html body .btn.ghost { background: var(--g-fill-clear); border-color: var(--g-rim); color: var(--g-text); -webkit-backdrop-filter: var(--g-blur-clear); backdrop-filter: var(--g-blur-clear) }
html body .back-to-map-fab { background: var(--t-wattle); border: 1px solid rgba(255, 255, 255, .5); box-shadow: var(--g-hi), var(--g-shadow-3); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur) }

/* weather week and week navigation */
html body .week { border-radius: var(--r-lg); overflow: hidden }
html body .day { border-color: var(--g-hair) }
html body .day.today { background: var(--t-fern); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25) }
html body .weeknav { border-radius: 999px; box-shadow: var(--g-hi), var(--g-shadow-2) }
html body .wkarrow { background: var(--g-fill-strong); color: var(--g-text); box-shadow: var(--g-hi); transition: transform .14s var(--spring), background .22s }
html body .wkarrow.next { background: var(--t-berry); color: #fff; box-shadow: var(--g-hi), var(--t-glow); --glow: rgba(181, 23, 63, .5) }
html body .wkarrow:active:not(:disabled) { transform: scale(.95) }

/* tiles and cards */
html body .tile {
  border: 1px solid var(--g-rim); border-radius: var(--r-lg);
  background-color: var(--g-fill); background-image: var(--g-sheen);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-hi), var(--g-shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
html body .tile:hover { transform: translateY(-3px); box-shadow: var(--g-hi), var(--g-shadow-2) }
html body .tile.tone-wattle { background-color: var(--t-wattle) }
html body .tile.tone-berry { background-color: var(--t-berry) }
html body .tile.tone-fern { background-color: var(--t-fern) }
html body .tile.tone-soil { background-color: var(--t-soil) }
html body .tile.tone-local { box-shadow: var(--g-hi), inset 0 6px 0 var(--ripe), var(--g-shadow-1) }
html body .tile.today { box-shadow: var(--g-hi), 0 0 0 2px rgba(255, 255, 255, .6), var(--g-shadow-2) }
html body .tile.today .tdate span { box-shadow: 0 0 0 0 rgba(181, 23, 63, .5); animation: g-pulse 2.6s var(--ease) infinite }
html body .cnotice { border-radius: var(--r-lg); border-left: 1px solid var(--g-rim); box-shadow: var(--g-hi), inset 4px 0 0 var(--wattle), var(--g-shadow-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease) }
html body .cnotice:hover { transform: translateY(-2px) }
html body .dcard { border-radius: var(--r-lg); border-width: 1px; transition: transform .3s var(--ease), box-shadow .3s var(--ease) }
html body .dcard:hover { transform: translateY(-3px); box-shadow: var(--g-hi), var(--g-shadow-2) }
html body .kinds-block { border-radius: var(--r-xl) }
html body .railcard, html body .promo, html body .mlink { border-radius: var(--r-lg); transition: transform .3s var(--ease), box-shadow .3s var(--ease) }
html body .railcard.buscard, html body .promo.fern, html body .fernpanel { background-color: var(--t-fern); background-image: var(--g-sheen); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--g-shadow-2) }
html body .railcard.firecard, html body .mlink { background-color: var(--t-soil); background-image: var(--g-sheen); border: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), var(--g-shadow-2) }
html body .promo.wattle, html body .mlink#visiting { background-color: var(--t-wattle); background-image: var(--g-sheen); border: 1px solid rgba(255, 255, 255, .5); box-shadow: var(--g-hi), var(--g-shadow-2) }
html body .mlink:nth-child(2) { background-color: var(--t-berry) }
html body .mlink:nth-child(3) { background-color: var(--t-fern) }
html body a.promo:hover, html body a.mlink:hover { transform: translateY(-3px); box-shadow: var(--g-hi), var(--g-shadow-3) }
html body .fernpanel .empty { background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .25); box-shadow: none; color: inherit }

/* forms and the dialog */
html body input:not([type=checkbox]):not([type=radio]), html body select, html body textarea {
  background: rgba(255, 255, 255, .55); border: 1px solid var(--g-hair); border-radius: 12px;
  box-shadow: inset 0 1px 3px rgba(27, 21, 19, .1);
  transition: box-shadow .22s var(--ease), background .22s;
}
html body input:focus, html body select:focus, html body textarea:focus { background: rgba(255, 255, 255, .85); box-shadow: inset 0 1px 3px rgba(27, 21, 19, .08), 0 0 0 4px rgba(244, 196, 48, .45); outline: none }
html body dialog { border-radius: var(--r-xl); background-color: var(--g-fill-strong); box-shadow: var(--g-hi), var(--g-shadow-3) }
html body dialog[open] { animation: g-settle .42s var(--ease) both }
html body dialog::backdrop { background: rgba(12, 42, 31, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }

/* status gems */
html body .dot, html body .firedot, html body .live-dot, html body .fire::before, html body .bin::before {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), 0 0 8px currentColor;
}
html body .dot.open, html body .live-dot { color: rgba(31, 122, 69, .6) }
html body .dot.closed { color: rgba(154, 46, 46, .35) }
html body .live-dot { animation: g-breathe 2.4s var(--ease) infinite }

@keyframes g-pulse { 0% { box-shadow: 0 0 0 0 rgba(181, 23, 63, .45) } 70% { box-shadow: 0 0 0 10px rgba(181, 23, 63, 0) } 100% { box-shadow: 0 0 0 0 rgba(181, 23, 63, 0) } }
@keyframes g-breathe { 50% { opacity: .55; transform: scale(.85) } }
@keyframes g-settle { from { opacity: 0; transform: scale(.98); filter: blur(4px) } to { opacity: 1; transform: none; filter: none } }

/* ---------- respect the reader */
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { animation: none !important; transition-duration: .01ms !important }
  html body .tile:hover, html body .dcard:hover, html body .cnotice:hover { transform: none }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --g-fill: #10271E; --g-fill-strong: #153128; --g-fill-clear: #0D2119; --card: #10271E }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --g-fill: rgba(14, 34, 27, .97); --g-fill-strong: rgba(19, 44, 35, .98); --g-fill-clear: rgba(10, 26, 20, .94); --card: rgba(14, 34, 27, .97) }
}
@media (max-width: 820px) {
  :root { --g-blur: blur(16px) saturate(170%); --g-blur-clear: blur(12px) saturate(180%) }
}

/* ================= Fern Night: colour, accents and fixes */
/* ---------- type and links */
html body a, html body .cnotice a, html body .dfix { color: #FF9EBB }
html body a:hover { color: #FFD0DD }
html body .eyebrow, html body .greeting, html body .railcard.spot .eyebrow { color: #FF9EBB }
html body .dkind, html body .stand { color: var(--g-muted) }
html body .kind small { color: #9FDDB9 }
html body .fernpanel .eyebrow, html body .railcard.buscard .eyebrow, html body #busRoute { color: #FFD35A }
html body .dmap { color: #FFC2D3; border-color: rgba(255, 158, 187, .4) }
html body .dmap:hover { color: #fff }

/* light surfaces keep dark type */
html body .tile.tone-wattle, html body .tile.tone-wattle *, html body .btn.wattle, html body .nav a.visit,
html body .promo.wattle, html body .promo.wattle *, html body .mlink#visiting, html body .mlink#visiting *,
html body .back-to-map-fab, html body #dockEventCount, html body #dockDirCount, html body .btn.mist,
html body .skip, html body .menubtn, html body .menubtn * { color: #1B1513 }
html body .btn.mist { background: rgba(244, 242, 235, .94) }

/* tinted tiles: denser colour, a lit glass edge */
html body .tile.tone-berry { background-color: var(--t-berry) }
html body .tile.tone-fern { background-color: var(--t-fern) }
html body .tile.tone-berry.today .tdate span { background: #1B1513; color: #fff }
html body .tile.tone-mist, html body .tile.tone-plain { background-color: var(--g-fill) }
html body .day.today { background: linear-gradient(160deg, rgba(246, 200, 52, .3), rgba(246, 200, 52, .12)) }

/* chips and counts stay readable over the bright map */
html body .stage-chip b, html body .dirside button b { background: rgba(255, 255, 255, .1); color: var(--g-text) }
html body .stage-chip[aria-pressed="true"] b, html body .dirside button[aria-pressed="true"] b { background: rgba(0, 0, 0, .28); color: #FFD35A }

/* forms */
html body input:not([type=checkbox]):not([type=radio]), html body select, html body textarea { background: rgba(0, 0, 0, .3); color: var(--g-text); border-color: var(--g-hair) }
html body input::placeholder, html body textarea::placeholder { color: rgba(188, 203, 195, .75) }
html body input:focus, html body select:focus, html body textarea:focus { background: rgba(0, 0, 0, .4) }
html body .dot.closed { color: rgba(255, 140, 140, .45) }

/* ---------- accents: a coloured glass lip.
   Each card's colour (--lip) lives only in a crisp 1px bevel: the top edge catches the light in that colour,
   the left edge carries a little of it, and the bottom and right edges fall into shadow. The face stays clear
   glass. Cards with no colour of their own get the same bevel in neutral glass. */
html body .cnotice { --lip: #F6C834 }
html body .tile.tone-local { --lip: #FF8FB1 }
html body .dcard.isopen { --lip: #6FE09C }
html body .dcard.iscreator, html body .railcard.credit { --lip: #FF2A9D }
html body .pin.light.pink button { background: #FF1493; color: #fff; border-color: rgba(255, 255, 255, .4) }
html body .btn.pink-cta { background: linear-gradient(145deg, #FF2A9D, #D80E7A); color: #fff; box-shadow: var(--g-hi), var(--t-glow); --glow: rgba(255, 20, 147, .6) }
html body .railcard.spot { --lip: #FF9EBB }
html body .railcard.know, html body .railcard.feature { --lip: #8FD9B0 }
html body .rjump a, html body .ccard { --lip: var(--k) }
html body .rjump .tone-soil { --k: #D9DDD8 }
html body .vsignpost, html body .vstop-card { --lip: #FF9EBB }
html body .isec .iitem { --lip: var(--k, rgb(190, 240, 214)) }
html body .cnotice, html body .tile.tone-local, html body .tile.tone-plain, html body .tile.tone-mist,
html body .dcard, html body .railcard.spot, html body .railcard.know, html body .railcard.feature,
html body .rjump a, html body .ccard,
html body .vtile:not(.lead):not(.second), html body .vstop-card, html body .vcard2, html body .vsignpost,
html body .iitem, html body .inbox {
  background: var(--g-fill);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid color-mix(in srgb, var(--lip, rgb(190, 240, 214)) 30%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--lip, rgb(190, 240, 214)) 72%, white 28%),
    inset 1px 0 0 color-mix(in srgb, var(--lip, rgb(190, 240, 214)) 38%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset -1px 0 0 rgba(0, 0, 0, .25),
    var(--g-shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
html body .cnotice:hover, html body .tile.tone-local:hover, html body .tile.tone-plain:hover, html body .tile.tone-mist:hover,
html body .dcard:hover, html body .rjump a:hover, html body .ccard:hover,
html body .vtile:not(.lead):not(.second):hover, html body .vstop-card:hover, html body .vcard2:hover, html body .iitem:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--lip, rgb(190, 240, 214)) 50%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--lip, rgb(190, 240, 214)) 85%, white 15%),
    inset 1px 0 0 color-mix(in srgb, var(--lip, rgb(190, 240, 214)) 52%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset -1px 0 0 rgba(0, 0, 0, .25),
    var(--g-shadow-2);
}
html body .cnotice .kicker { color: var(--lip) }
/* tinted tiles: a bright glass lip on the top-left edge */
html body .tile.tone-wattle, html body .tile.tone-berry, html body .tile.tone-fern, html body .tile.tone-soil {
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .38), inset -1px -1px 0 rgba(0, 0, 0, .18), var(--t-glow);
}
html body .tile.tone-wattle { --glow: rgba(246, 200, 52, .45) }
html body .tile.tone-berry { --glow: rgba(196, 24, 68, .5) }
html body .tile.tone-fern { --glow: rgba(28, 112, 74, .5) }

/* ---------- over the live map: denser glass, since the town render behind it is bright */
html body .hud-card, html body .hud-card.weekcard, html body .stage-dock, html body .hud-trails, html body .mpanel { background-color: rgba(9, 28, 21, .86) }
html body .trail-pill, html body .tool, html body .hud-collapse { background-color: rgba(9, 28, 21, .72) }
html body span.hint {
  background: rgba(9, 28, 21, .72); -webkit-backdrop-filter: var(--g-blur-clear); backdrop-filter: var(--g-blur-clear);
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--g-rim);
}

/* ---------- small type on fern and berry glass */
html body .railcard.buscard .then, html body #busNote, html body .fernpanel .note { color: #E2ECE6 }
html body #busCard a, html body .promo.fern .cta, html body .fernpanel a { color: #FFE7A3 }
html body .mlink .eyebrow { color: #FFE08A }
html body .mlink#visiting .eyebrow { color: #1B1513 }

/* ---------- light cards inside dark sections keep their light-page colours */
html body .postcard .pc-name { color: #12392B }
html body .postcard .pc-greet { color: #B5173F }
html body .iitem.big a.ibig { color: #B5173F }
html body .iitem.big .dfix { color: #5A5250 }
html body .vspot .vkind { color: #FFE08A }
/* forms are dark glass: their labels follow the dark page */
html body .formcard { --soil: #F4F2EB; --muted: #BCCBC3; color: var(--g-text) }
html body .formcard label { color: var(--g-muted) }
/* the bus card link is coloured inline by site.js (color: var(--wattle)): lighten the token on it alone */
html body #busNote a { --wattle: #FFE7A3 }

/* ================= Activities (activities.html)
   Each card carries its kind's colour (--k, set by the tone-* classes) as its glass lip (see "accents"),
   in place of the flat side and top bars. */
html body .rjump a { color: var(--g-text) }
html body .ccard { border-radius: var(--r-lg) }
html body .ccard.flash { box-shadow: var(--g-hi), 0 0 0 3px rgba(246, 200, 52, .8), 0 0 40px -6px rgba(246, 200, 52, .6) }
html body .ckind b, html body .cnick { color: #FF9EBB }

/* how to join: an inset glass well */
html body .cjoin {
  background: rgba(0, 0, 0, .24); border: 1px solid var(--g-hair); border-radius: var(--r-md);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(220, 255, 236, .06);
}
html body .ccontact a { text-decoration-color: rgba(246, 200, 52, .7) }

/* club links: berry glass button */
html body .clinks .cbtn {
  background: var(--t-berry); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: var(--g-hi), var(--t-glow); --glow: rgba(196, 24, 68, .55);
  transition: transform .14s var(--spring), filter .22s var(--ease);
}
html body .clinks .cbtn:hover { background: var(--t-berry); color: #fff; filter: brightness(1.12); transform: translateY(-1px) }
html body .clinks .cbtn:active { transform: scale(.97) }

/* the filter: glass pills, the chosen one in fern glass */
html body .rfilter button {
  background: var(--g-fill-clear); background-image: var(--g-sheen); border: 1px solid var(--g-rim); color: var(--g-text);
  -webkit-backdrop-filter: var(--g-blur-clear); backdrop-filter: var(--g-blur-clear);
  box-shadow: var(--g-hi), 0 1px 2px rgba(0, 0, 0, .2);
  transition: background-color .22s var(--ease), box-shadow .22s var(--ease), transform .14s var(--spring);
}
html body .rfilter button:hover { background-color: var(--g-fill-strong); transform: translateY(-1px) }
html body .rfilter button:active { transform: scale(.96) }
html body .rfilter button[aria-pressed="true"] {
  background-color: var(--t-fern); color: #fff; border-color: rgba(255, 255, 255, .3);
  box-shadow: var(--g-hi), var(--t-glow); --glow: rgba(28, 112, 74, .55);
}
html body .rfilter button[aria-pressed="true"] b { color: #FFD35A; opacity: 1 }

/* the scoreboard: still a black board with yellow figures, now smoked glass with a wattle lip */
html body .scoreboard {
  --lip: #F6C834;
  border-radius: var(--r-xl); background: rgba(4, 12, 9, .78);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid color-mix(in srgb, var(--lip) 30%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--lip) 72%, white 28%),
    inset 1px 0 0 color-mix(in srgb, var(--lip) 38%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    var(--g-shadow-2);
}
html body .fx {
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(246, 200, 52, .18); border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 22px -14px rgba(0, 0, 0, .8);
  transition: border-color .22s var(--ease), transform .3s var(--ease);
}
html body .fx:hover { border-color: rgba(246, 200, 52, .4); transform: translateY(-2px) }
html body .fxempty { border-color: rgba(190, 240, 214, .2); background: rgba(255, 255, 255, .03) }

/* the year at the Rec: glass cells, the season lit in its colour, this month ringed in wattle */
html body .scell { background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); border-radius: 7px }
html body .scell.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--k) 100%, white 14%), var(--k));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 14px -6px color-mix(in srgb, var(--k) 80%, transparent);
}
html body .sband .tone-soil { --k: #6E7A74 }
html body .scell.now { outline: 2px solid rgba(246, 200, 52, .85); outline-offset: 1px; box-shadow: 0 0 14px -2px rgba(246, 200, 52, .55) }
html body .srow:not(.shead):hover .sname { color: #FF9EBB }
html body .sall a { color: var(--g-text) }

/* outside: fern glass */
html body .pcard {
  background-color: var(--t-fern); background-image: var(--g-sheen); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--g-shadow-2);
  transition: transform .3s var(--ease);
}
html body .pcard:hover { transform: translateY(-3px) }
html body .pcard .csrc, html body .pcard .csrc a { color: #E2ECE6 }

/* also in town: glass pills; run a club: wattle glass */
html body .ralso { border-top: 1px solid var(--g-hair) }
html body .ralso li { background: var(--g-fill); border: 1px solid var(--g-rim); box-shadow: var(--g-hi) }
html body .rrun {
  background-color: var(--t-wattle); background-image: linear-gradient(150deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 45%);
  border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r-xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 24px 60px -24px rgba(246, 200, 52, .45);
}

/* ---------- the hills under each page's hero: the front ridge was mist, now it meets the forest ground */
html body .ridge path:last-child { fill: var(--ground) }

/* ================= Shared by the Visiting and Local info pages (their cards take the glass lip, see "accents") */
/* tinted panels: the colour as dense glass, a bright lip on the top-left edge, a glow beneath */
html body .vtile.lead, html body .vpractical, html body .tone-fern .vcard2 { --tint: rgba(16, 66, 45, .95); --glow: rgba(28, 112, 74, .55); --sheen: .1 }
html body .vtile.second, html body .tone-wattle .vcard2, html body .icontact { --tint: var(--t-wattle); --glow: rgba(246, 200, 52, .45) }
html body .vspot, html body .iemergency { --tint: var(--t-berry); --glow: rgba(196, 24, 68, .5); --sheen: .1 }
html body .tone-ripe .vcard2 { --tint: rgba(255, 143, 177, .92); --glow: rgba(255, 143, 177, .45) }
html body .vtile.lead, html body .vtile.second, html body .vpractical, html body .vspot,
html body .tone-fern .vcard2, html body .tone-wattle .vcard2, html body .tone-ripe .vcard2,
html body .iemergency, html body .icontact {
  background-color: var(--tint); background-image: linear-gradient(150deg, rgba(255, 255, 255, var(--sheen, .2)), rgba(255, 255, 255, 0) 45%);
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .34), inset -1px -1px 0 rgba(0, 0, 0, .16), 0 22px 56px -26px var(--glow), var(--g-shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
html body .vtile.lead, html body .vtile.second, html body .vspot { border-radius: var(--r-lg) }
html body .iemergency, html body .icontact, html body .vpractical { border-radius: var(--r-xl) }
html body .tone-fern .vcard2:hover, html body .tone-wattle .vcard2:hover, html body .tone-ripe .vcard2:hover,
html body .vtile.second:hover, html body .vspot:hover { transform: translateY(-3px) }
/* rules between parts: a gradient hairline instead of a heavy bar */
html body .vchead { border-bottom: 1px solid; border-image: linear-gradient(90deg, rgba(246, 200, 52, .85), rgba(246, 200, 52, .2) 35%, rgba(190, 240, 214, .08)) 1 }
html body .isite { border-top: 1px solid; border-image: linear-gradient(90deg, rgba(190, 240, 214, .5), rgba(190, 240, 214, .06)) 1 }

/* ================= Visiting (visit.html) */
html body .vchapters a { transition: color .22s var(--ease), padding-left .3s var(--ease) }
html body .vchapters a:hover { padding-left: 8px }
html body .vchnum { -webkit-text-stroke: 2px rgba(246, 200, 52, .55) }
html body .postcard { background-image: linear-gradient(150deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 40%); box-shadow: 0 34px 70px -22px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .5) inset }
html body .stamp { box-shadow: inset 0 0 0 5px var(--berry), inset 0 0 0 7px rgba(255, 255, 255, .7), 0 10px 26px -6px rgba(196, 24, 68, .6) }
html body .vsticker { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 12px 30px -10px rgba(246, 200, 52, .7) }
/* the road between the villages: dark glass with its wattle centre line */
html body .vroad::before { background-color: rgba(4, 12, 9, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 18px -8px rgba(0, 0, 0, .8) }
html body .vstop-dot { border-color: #F4F2EB; box-shadow: 0 0 0 4px rgba(196, 24, 68, .25), 0 0 16px rgba(196, 24, 68, .6) }
html body .vrow { border-top: 1px solid var(--g-hair) }
html body .vrow:last-child { border-bottom: 1px solid var(--g-hair) }
/* Main Road as a menu board: smoked glass with a ripe lip */
html body .vmenu {
  --lip: #FF8FB1;
  border-radius: var(--r-xl); background: rgba(4, 12, 9, .78);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid color-mix(in srgb, var(--lip) 30%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--lip) 72%, white 28%),
    inset 1px 0 0 color-mix(in srgb, var(--lip) 38%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    var(--g-shadow-2);
}
html body .vmenu-item { transition: background .22s var(--ease) }
html body .vmenu-item:hover { background: rgba(255, 255, 255, .05) }
html body .vfacts { border-top: 1px solid rgba(255, 255, 255, .2) }

/* ================= Local info (info.html) */
html body .ijump a {
  background: var(--g-fill-clear); background-image: var(--g-sheen); border: 1px solid var(--g-rim);
  box-shadow: var(--g-hi); transition: background-color .22s var(--ease), transform .14s var(--spring);
}
html body .ijump a:hover { background-color: var(--g-fill-strong); transform: translateY(-1px) }
html body .ijump a:active { transform: scale(.96) }
html body .ijump a::before { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 0 10px var(--k, #F4F2EB) }
html body .isechead { border-bottom: 1px solid; border-image: linear-gradient(90deg, var(--k, rgba(190, 240, 214, .6)), color-mix(in srgb, var(--k, rgb(190, 240, 214)) 20%, transparent) 40%, rgba(190, 240, 214, .06)) 1 }
/* the emergency block: berry glass; its cards are dark wells, the two big numbers white glass */
html body .iemergency .isechead { border-image: linear-gradient(90deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .1)) 1 }
html body .iemergency .iitem {
  background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 26px -16px rgba(0, 0, 0, .7);
}
html body .iemergency .iitem.big {
  background: rgba(255, 255, 255, .95); background-image: linear-gradient(150deg, rgba(255, 255, 255, 1), rgba(255, 236, 242, .9));
  border-color: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 #fff, 0 16px 36px -16px rgba(0, 0, 0, .6);
}
html body .iemergency .iitem:hover { transform: translateY(-3px) }
html body .vopen.is-shut { color: #C8D5CE }
html body .vtile.second .vopen.is-shut, html body .tone-wattle .vopen.is-shut, html body .tone-ripe .vopen.is-shut { color: #3A3230 }

/* ================= The place inspector (the panel that opens when you pick a building on the map) */
html body .stage-mapwrap .place {
  background-color: rgba(9, 28, 21, .9); background-image: var(--g-sheen);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-rim); border-radius: var(--r-xl); color: var(--g-text);
  box-shadow: var(--g-hi), var(--g-shadow-3);
}
html body .place .addr small, html body .place dt, html body .place .src { color: var(--g-muted) }
html body .place .biz, html body .p-neighbors, html body .p-events { border-top: 1px solid var(--g-hair) }
html body .place .src { border-top-color: var(--g-hair) }
html body .p-neighbors-title { color: #8FD9B0 }
html body .p-events-title { color: #FF9EBB }
/* quick actions: glass buttons, Directions in fern glass */
html body .p-act-btn {
  background: var(--g-fill-clear); background-image: var(--g-sheen); border: 1px solid var(--g-rim); color: var(--g-text);
  box-shadow: var(--g-hi); transition: background-color .22s var(--ease), transform .14s var(--spring);
}
html body .p-act-btn:hover { background-color: var(--g-fill-strong); color: var(--g-text); transform: translateY(-1px) }
html body .p-act-btn:active { transform: scale(.96) }
html body .p-act-btn.primary { background-color: var(--t-fern); border-color: rgba(255, 255, 255, .3); color: #fff; box-shadow: var(--g-hi), var(--t-glow); --glow: rgba(28, 112, 74, .55) }
html body .p-act-btn.primary:hover { background-color: var(--t-berry); color: #fff; --glow: rgba(196, 24, 68, .55) }
/* nearby and events: glass cards; long names shrink to an ellipsis instead of widening the panel */
html body .p-neighbor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
html body .p-neighbor-btn, html body .p-event-card {
  min-width: 0; background: var(--g-fill-clear); background-image: var(--g-sheen); border: 1px solid var(--g-rim); color: var(--g-text);
  box-shadow: var(--g-hi); transition: background-color .22s var(--ease), transform .14s var(--spring);
}
html body .p-neighbor-btn:hover { background-color: var(--g-fill-strong); transform: translateY(-1px) }
html body .p-neighbor-btn small, html body .p-event-card span { color: var(--g-muted) }
html body .p-open-badge.open { background: rgba(111, 224, 156, .14); border-color: rgba(111, 224, 156, .35) }
html body .p-open-badge.closed { background: rgba(255, 156, 156, .12); border-color: rgba(255, 156, 156, .3) }
html body .place .close { background: var(--g-fill-clear); border: 1px solid var(--g-rim); color: var(--g-text) }
html body .inbox .note { color: #C8D5CE }
/* rainy days: the rain blue, lifted for the dark ground */
html body .day.wet .hi { color: #8FB4FF }

/* ---------- the phone menu: a dark glass sheet under the bar, with straight dividers between the links */
@media (max-width: 800px) {
  html body .navrow.open > .nav {
    background: rgba(9, 28, 21, .98); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-rim); border-top: 0; border-radius: 0 0 var(--r-xl) var(--r-xl);
    box-shadow: var(--g-shadow-3);
  }
  html body .navrow.open > .nav a:not(.visit) { border-radius: 0; background: none }
  html body .navrow.open > .nav a:not(.visit):first-child { border-top: 0 }
}

/* ---------- directory sub-filters (Community) */
html body .dir-subchip {
  background: var(--g-fill-clear);
  background-image: var(--g-sheen);
  border: 1px solid var(--g-rim);
  color: var(--g-text);
  box-shadow: var(--g-hi);
}
html body .dir-subchip:hover {
  background: var(--g-fill-strong);
}
html body .dir-subchip[aria-pressed="true"] {
  background: var(--t-fern);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
  box-shadow: var(--g-hi), var(--t-glow);
}


/* ================= List view in Fern Night: glass panels with the coloured lip, hairline rows, quiet glass actions */
html body .viewswitch {
  border: 1px solid var(--g-rim); background: var(--g-fill-clear); background-image: var(--g-sheen);
  -webkit-backdrop-filter: var(--g-blur-clear); backdrop-filter: var(--g-blur-clear);
  box-shadow: inset 0 1px 0 rgba(220, 255, 236, .14), inset 0 -1px 0 rgba(0, 0, 0, .35);
}
html body .viewswitch button { color: var(--g-muted); transition: background-color .22s var(--ease), color .22s var(--ease), transform .14s var(--spring) }
html body .viewswitch button:hover { color: var(--g-text) }
html body .viewswitch button:active { transform: scale(.96) }
html body .viewswitch button[aria-pressed="true"] {
  --lip: #8FD9B0; background: var(--t-fern); color: #fff;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--lip) 72%, white 28%),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 6px 18px -8px rgba(28, 112, 74, .7);
}
html body .lpanel {
  --lip: rgb(190, 240, 214);
  background: var(--g-fill);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid color-mix(in srgb, var(--lip) 30%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--lip) 72%, white 28%),
    inset 1px 0 0 color-mix(in srgb, var(--lip) 38%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    var(--g-shadow-1);
}
html body .lpanel[class*="tone-"], html body .isec .lpanel { --lip: var(--k, rgb(190, 240, 214)) }
html body .lrow { border-top-color: var(--g-hair); transition: background-color .22s var(--ease) }
html body .lrow:hover { background-color: rgba(190, 240, 214, .05) }
html body .lrow:focus-within { background-color: rgba(190, 240, 214, .07) }
html body .lrow-detail, html body .lsub-head { color: var(--g-muted) }
html body .lsub-head { border-top-color: var(--g-hair) }
html body .lbadge { border-color: rgba(143, 217, 176, .3); color: #9FDDB9 }
html body .lbadge.creator { border-color: rgba(255, 158, 187, .4); color: #FF9EBB }
html body .lstatus.closed .ldot { box-shadow: 0 0 6px rgba(255, 156, 156, .6) }
html body .lstatus.open .ldot { box-shadow: 0 0 8px rgba(111, 224, 156, .8) }
html body .lphone { color: var(--g-text) }
html body .lphone:hover { color: #FFD35A }
html body .lact, html body .lmore summary {
  border-color: var(--g-rim); background: var(--g-fill-clear); color: var(--g-text);
  box-shadow: inset 0 1px 0 rgba(220, 255, 236, .14), inset 0 -1px 0 rgba(0, 0, 0, .35);
  transition: background-color .22s var(--ease), border-color .22s var(--ease), transform .14s var(--spring);
}
html body .lact:hover, html body .lmore summary:hover, html body .lmore[open] summary { background: var(--g-fill-strong); border-color: rgba(190, 240, 214, .32) }
html body .lact:active, html body .lmore summary:active { transform: scale(.96) }
html body .lmore-list {
  background: rgba(12, 32, 25, .97); border: 1px solid var(--g-rim);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: inset 0 1px 0 rgba(220, 255, 236, .12), var(--g-shadow-3);
}
html body .lmore-list a { color: var(--g-text) }
html body .lmore-list a:hover { background: rgba(190, 240, 214, .08) }
/* the emergency block keeps its berry glass: its list sits in a dark well, the big numbers white */
html body .iemergency .lpanel { --lip: rgb(255, 210, 220); background: rgba(0, 0, 0, .2) }
html body .iemergency .lrow { border-top-color: rgba(255, 255, 255, .14) }
html body .iemergency .lrow-detail { color: rgba(255, 255, 255, .86) }
html body .iemergency .lphone { color: #fff }
@media (prefers-reduced-motion: reduce) { html body .lrow, html body .lact { transition: none } }

/* ================= Combined Concept A + C: 3-Column Bento Dashboard ================= */
.ac-dash-section { margin: 0 0 32px; }   /* no top margin, so it lines up with the right-hand rail */
.ac-dashbar {
  padding: clamp(16px, 2.2vw, 22px);
  border-radius: var(--r-xl, 26px);
  background-color: var(--g-fill);
  background-image: var(--g-sheen);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-rim);
  box-shadow: var(--g-hi), var(--g-shadow-2);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.ac-dashbar h2 {
  margin: 4px 0 0;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1;
  letter-spacing: -.035em;
}
.ac-dashbar h2 span { color: var(--wattle); }
.ac-dash-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-ctrl-btn {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--g-rim);
  background: var(--g-fill-clear);
  color: var(--g-text);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .18s var(--ease), transform .12s var(--spring);
}
.ac-ctrl-btn:hover { background: var(--g-fill-strong); }
.ac-ctrl-btn[aria-pressed="true"], .ac-ctrl-btn[aria-expanded="true"] {
  background: var(--t-wattle);
  color: #1B1513;
  border-color: #FFF0B0;
}
.ac-ctrl-badge {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(246, 200, 52, .22);
  color: var(--wattle);
}
.ac-ctrl-btn[aria-expanded="true"] .ac-ctrl-badge {
  background: rgba(27, 21, 19, .2);
  color: #1B1513;
}
.ac-tray {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg, 20px);
  background: var(--g-fill-strong);
  border: 1px dashed rgba(246, 200, 52, .55);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ac-tray-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac-tray-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-restore-btn {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(246, 200, 52, .45);
  background: rgba(246, 200, 52, .14);
  color: var(--wattle);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ac-restore-btn:hover { background: var(--t-wattle); color: #1B1513; }

/* 3-Column Bento Grid (1, 2, or 3 columns wide) */
.ac-bento-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 16px;
  align-items: stretch;
}
.dash-widget {
  position: relative;
  grid-column: span 1;
  border-radius: var(--r-xl, 24px);
  padding: 10px clamp(15px, 1.8vw, 20px) clamp(16px, 2vw, 20px);
  background-color: var(--g-fill);
  background-image: var(--g-sheen);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-rim);
  box-shadow: var(--g-hi), var(--g-shadow-1);
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.dash-widget[data-cols="1"] { grid-column: span 1; }
.dash-widget[data-cols="2"] { grid-column: span 2; }
.dash-widget[data-cols="3"] { grid-column: span 3; }
.dash-widget[data-tall] { grid-row: span 2; }   /* two 1-wide tiles stack beside it */
.dash-widget.dragging { opacity: .55; transform: scale(.98); border-color: var(--wattle); }
.dash-widget.drag-over { border: 2px dashed var(--wattle); box-shadow: 0 0 0 3px rgba(246, 200, 52, .25), var(--g-shadow-2); }

/* Top Horizontal 6-Dot Drag Handle */
.w-grip-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -2px 0 -4px;
}
.w-drag-grip {
  cursor: grab;
  background: transparent;
  border: 0;
  padding: 5px 18px;
  border-radius: 999px;
  color: var(--g-muted);
  opacity: .55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, background .15s, color .15s;
}
.w-drag-grip:hover, .w-drag-grip:focus-visible {
  opacity: 1;
  color: var(--wattle);
  background: rgba(255, 255, 255, .06);
  outline: none;
}
.w-drag-grip:active { cursor: grabbing; }

/* Widget Header + Top-Right Hamburger Menu */
.w-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 10px; }
.w-title-wrap { min-width: 0; flex: 1; }
.w-title-wrap h3 { margin: 2px 0 0; font-size: clamp(18px, 1.85vw, 22px); line-height: 1.1; letter-spacing: -.03em; }
.w-head-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; position: relative; }
.w-menu-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--g-rim);
  background: var(--g-fill-clear);
  color: var(--g-muted);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.w-menu-btn:hover, .w-menu-btn[aria-expanded="true"] {
  background: var(--g-fill-strong);
  color: var(--wattle);
  border-color: rgba(246, 200, 52, .45);
}
.w-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 195px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(10, 28, 22, .97);
  border: 1px solid var(--g-rim);
  box-shadow: var(--g-hi), var(--g-shadow-3);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.w-menu-popover[hidden] { display: none !important; }
.w-menu-section-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--g-muted); padding: 2px 6px 0; }
.w-size-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 2px; }
.w-size-btn { padding: 5px 0; border-radius: 8px; border: 1px solid var(--g-rim); background: var(--g-fill-clear); color: var(--g-text); font-family: var(--mono); font-size: 11px; font-weight: 600; cursor: pointer; }
.w-size-btn[aria-pressed="true"] { background: var(--t-wattle); color: #1B1513; border-color: #FFF0B0; }
.w-remove-btn {
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 143, 177, .28);
  background: rgba(196, 24, 68, .22);
  color: #FF9EBB;
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.w-remove-btn:hover { background: var(--t-berry); color: #fff; }

.ac-chip-row { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
.ac-chip-row::-webkit-scrollbar { display: none; }
.spot-box { padding: 14px; border-radius: 16px; background: rgba(246, 200, 52, .08); border: 1px solid rgba(246, 200, 52, .28); display: flex; flex-direction: column; gap: 10px; }
.spot-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--wattle); }
.spot-headline { font-size: 15px; font-weight: 700; color: var(--g-text); margin: 0; line-height: 1.35; }
.spot-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 8px; }
.spot-detail-block { padding: 10px 12px; border-radius: 12px; background: var(--g-fill-clear); border: 1px solid var(--g-rim); font-size: 13px; line-height: 1.42; }
.spot-detail-block strong { color: var(--wattle); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 3px; }
.fact-box { padding: 14px; border-radius: 16px; background: rgba(28, 112, 74, .28); border: 1px solid rgba(111, 224, 156, .3); display: flex; flex-direction: column; justify-content: space-between; gap: 10px; flex: 1; }
.fact-quote { font-size: 14.5px; line-height: 1.48; margin: 0; color: var(--g-text); }
.pin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 9px; }
.pin-tile { padding: 11px 12px; border-radius: 14px; background: var(--g-fill-clear); border: 1px solid var(--g-rim); display: flex; flex-direction: column; justify-content: space-between; gap: 5px; min-width: 0; }
.pin-tile-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.pin-tile strong { font-size: 14px; line-height: 1.2; color: var(--g-text); }
.pin-tile .pin-num { font-size: 16.5px; font-weight: 800; color: var(--wattle); text-decoration: none; font-variant-numeric: tabular-nums; }
.pin-picker-drawer { padding: 12px; border-radius: 14px; background: var(--g-fill-strong); border: 1px solid rgba(246, 200, 52, .4); max-height: 290px; overflow-y: auto; }
.pin-option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 6px; margin-top: 8px; }
.pin-opt-btn { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--g-rim); background: var(--g-fill-clear); color: var(--g-text); font-size: 12px; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pin-opt-btn[aria-pressed="true"] { background: rgba(246, 200, 52, .2); border-color: var(--wattle); color: var(--wattle); font-weight: 700; }
.fx-card-row { padding: 10px 12px; border-radius: 12px; background: var(--g-fill-clear); border: 1px solid var(--g-rim); display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.fx-badge { font-family: var(--mono); font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: rgba(246, 200, 52, .16); color: var(--wattle); font-weight: 600; }
/* This week's forecast, straight under "Today in Monbulk" */
.ac-weather { margin-top: 16px; }
#noticeboard .board { margin-top: 2px; }
@media (max-width: 1060px) {
  .ac-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-widget[data-cols="3"] { grid-column: span 2; }
  .dash-widget[data-tall] { grid-row: auto; }
}
@media (max-width: 820px) {
  .ac-bento-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-widget, .dash-widget[data-cols="1"], .dash-widget[data-cols="2"], .dash-widget[data-cols="3"] { grid-column: 1 / -1 !important; }
}
@media (max-width: 420px) {
  .pin-tiles { grid-template-columns: minmax(0, 1fr); }
}


/* ================= What's on and Directory pages ================= */
.wopage, .dirpage { padding-top: 24px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 56px }
.wopage > .block, .dirpage > .block { margin: 0 }

/* The month calendar: glass panel, one glass cell per day, event titles as tone chips */
.calbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px }
.calbar h2 { margin: 6px 0 0; font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: -.04em }
.calnav { display: flex; align-items: center; gap: 8px }
.calnav .btn { min-height: 44px }
.calgrid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 12px;
  border-radius: var(--r-xl); border: 1px solid var(--g-rim);
  background-color: var(--g-fill); background-image: var(--g-sheen);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-hi), var(--g-shadow-1);
}
.calhd { padding: 2px 8px 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--g-muted) }
.calday {
  min-height: 108px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 8px;
  border-radius: var(--r-md); border: 1px solid var(--g-hair); background: var(--g-fill-clear); color: var(--g-text);
  font: inherit; text-align: left; cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.calday:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--g-rim); background-color: rgba(190, 240, 214, .06) }
.calday:focus-visible { outline: 2px solid var(--wattle); outline-offset: 2px }
.calday.out { opacity: .5 }
.calday.past, .calday:disabled { opacity: .38; cursor: default }
.calday.sel { border-color: var(--wattle); box-shadow: inset 0 0 0 1px var(--wattle), 0 0 0 3px rgba(246, 200, 52, .22) }
.calnum { align-self: flex-start; font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 1px 0 }
.calday.today .calnum { padding: 1px 8px; border-radius: 999px; background: var(--t-berry); color: #fff }
.calevs { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.calev { padding: 3px 7px; border-radius: 7px; background: rgba(238, 237, 231, .12); font-size: 11.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.calmore { font-family: var(--mono); font-size: 10.5px; color: var(--g-muted) }
.caldots { display: none; gap: 3px; flex-wrap: wrap }
.caldots i, .calkey i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(238, 237, 231, .5) }
.calev.tone-wattle, .caldots i.tone-wattle, .calkey i.tone-wattle { background: var(--t-wattle); color: #1B1513 }
.calev.tone-berry, .caldots i.tone-berry, .calkey i.tone-berry { background: var(--t-berry); color: #fff }
.calev.tone-fern, .caldots i.tone-fern, .calkey i.tone-fern { background: var(--t-fern); color: #fff }
.calev.tone-soil, .caldots i.tone-soil, .calkey i.tone-soil { background: var(--t-soil); color: var(--g-text); box-shadow: inset 0 0 0 1px var(--g-rim) }
.calev.tone-mist, .caldots i.tone-mist, .calkey i.tone-mist { background: rgba(238, 237, 231, .88); color: #1B1513 }
.calev.tone-local, .caldots i.tone-local, .calkey i.tone-local { background: var(--t-ripe); color: #1B1513 }
.calkey { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px }
.calkey i { margin-right: 7px; vertical-align: 0 }
html body .tile.calsel { box-shadow: var(--g-hi), 0 0 0 3px var(--wattle), var(--g-shadow-2) }
@media (max-width: 700px) {
  .calgrid { gap: 4px; padding: 6px; border-radius: var(--r-lg) }
  .calhd { padding: 2px 2px 4px; font-size: 10px; letter-spacing: .06em; text-align: center }
  .calday { min-height: 54px; padding: 6px 4px; align-items: center; gap: 4px }
  .calnum { align-self: center }
  .calevs { display: none }
  .caldots { display: flex; justify-content: center }
}

/* The directory page: cards and list rows both in three columns */
.page-directory .dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.page-directory .llist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 6px 0 }
.page-directory .lsub-head + .llist { padding-top: 0 }
.page-directory .lrow { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; border: 1px solid var(--g-hair); background: var(--g-fill-clear) }
.page-directory .llist > .lrow:first-child { border-top-color: var(--g-hair) }
.page-directory .lrow-side { justify-content: flex-start }
@media (max-width: 1100px) {
  .page-directory .dgrid, .page-directory .llist { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
  .page-directory .dgrid, .page-directory .llist { grid-template-columns: minmax(0, 1fr) }
}

/* Places widget category pills: one line each, scrolling sideways with a soft fade at the edge */
.ac-chip-row { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 30px }
html body .ac-chip-row .stage-chip { flex: none; white-space: nowrap; min-height: 36px; padding: 0 14px; font-size: 13px; line-height: 1 }

/* The 3D map tile. No blur or transform on the tile, so the phone's full-screen map (position: fixed) covers the
   screen rather than the tile. The stage keeps its own HUD; the parts the dashboard already shows are hidden. */
html body .dash-widget.map-widget { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--g-fill-strong) }
html body .dash-widget.map-widget:hover { transform: none }
.map-widget .stage-hero { border-bottom: 0; border-radius: var(--r-lg); overflow: hidden; isolation: isolate }
.map-widget .stage-mapwrap.mapwrap { height: clamp(520px, 72vh, 760px) }
.map-widget .stage-pulse, .map-widget .stage-dock { display: none !important }
@media (max-width: 820px) {
  .map-widget .stage-hero:not(.mobile-map-open) { border-radius: var(--r-lg) }
  .map-widget .stage-hero.mobile-map-open { border-radius: 0; isolation: auto }
}

/* A small search card on the map tile, so most of the tile is map */
.map-widget .stage-intro { width: min(400px, 100%); padding: 10px 12px 12px; gap: 8px }
.map-widget .stage-intro .hud-card-bar .eyebrow { font-size: 10.5px }
.map-widget .stage-intro .intro-body { display: flex; flex-direction: column; gap: 8px }
.map-widget .stage-find { gap: 6px }
.map-widget .stage-find input { min-height: 38px; font-size: 14px }
.map-widget .stage-find .btn { min-height: 38px; padding: 0 14px; font-size: 14px }
.map-widget .stage-filter-bar { flex-wrap: wrap; overflow: visible; gap: 6px; -webkit-mask-image: none; mask-image: none; padding-right: 0 }
.map-widget .stage-filter-bar .stage-chip { flex: none; white-space: nowrap; min-height: 28px; padding: 0 8px; gap: 5px; font-size: 12px }
html body .map-widget .stage-filter-bar .stage-chip b { padding: 1px 5px; font-size: 10.5px }
.map-widget .findmsg:empty { display: none }

/* Quick links under the weather: dark glass, each with its own accent (stripe, icon, label) instead of a solid fill */
.qlinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px }
html body a.qlink {
  --acc: #D8E2DC;
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 12px 12px 12px 16px;
  border-radius: var(--r-lg); color: var(--g-text); text-decoration: none; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 14%, transparent), transparent 65%), var(--g-fill);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent);
  box-shadow: var(--g-hi), var(--g-shadow-1);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
html body a.qlink::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acc) }
.qlink-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 28%, transparent) }
.qlink-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.qlink-kick { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acc) }
html body a.qlink strong { font-size: 14px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--g-text) }
.qlink-arrow { flex: none; color: var(--g-muted); font-size: 16px; transition: transform .25s var(--ease), color .25s var(--ease) }
html body a.qlink:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: var(--g-hi), var(--g-shadow-2) }
html body a.qlink:hover .qlink-arrow { transform: translateX(3px); color: var(--acc) }
html body a.qlink:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px }
html body a.qlink[data-tone="berry"] { --acc: #FF6B88 }
html body a.qlink[data-tone="fern"] { --acc: #6FD8A2 }
html body a.qlink[data-tone="wattle"] { --acc: #F6C834 }
html body a.qlink[data-tone="mist"] { --acc: #CFDDD5 }
@media (max-width: 1060px) { .qlinks { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 520px) { .qlinks { grid-template-columns: minmax(0, 1fr); gap: 8px } html body a.qlink { min-height: 64px; padding: 10px 14px 10px 16px } }
@media (prefers-reduced-motion: reduce) { html body a.qlink, .qlink-arrow { transition: none } }

/* ================= Notices page: official notices beside the pinned notes ================= */
.noticepage { padding-top: 24px; padding-bottom: 80px }
.nlayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 32px; align-items: start }
.nhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.nhead h2 { margin: 6px 0 0; font-size: clamp(30px, 4vw, 44px); line-height: 1; letter-spacing: -.04em }
.nhead .asof { margin: 8px 0 0 }
.nkinds { margin-bottom: 8px }
.ngroup + .ngroup { margin-top: 28px }
.ngroup-head { margin: 18px 0 10px; font-size: 18px; letter-spacing: -.01em }
.ngroup-head span { margin-left: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--g-muted) }
.ncards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.ncard, html body a.nwhere {
  --acc: #CFDDD5;
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 14px 18px; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--acc) 24%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 12%, transparent), transparent 60%), var(--g-fill);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-hi), var(--g-shadow-1); color: var(--g-text);
}
.ncard::before, html body a.nwhere::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acc) }
[data-tone="berry"] { --acc: #FF6B88 } [data-tone="fern"] { --acc: #6FD8A2 } [data-tone="wattle"] { --acc: #F6C834 } [data-tone="sky"] { --acc: #9DC4FF }
.ncard-kick { margin: 0; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--acc) }
.ncard-when { color: var(--g-muted); letter-spacing: .06em }
.ncard h3 { margin: 2px 0 0; font-size: 17px; line-height: 1.2; letter-spacing: -.01em }
.ncard-where { margin: 0; font-size: 13px; font-weight: 600; color: var(--g-text) }
.ncard-body { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--g-muted) }
.ncard-foot { margin: auto 0 0; padding-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px }
.ncard-ref { font-family: var(--mono); font-size: 11px; color: var(--g-muted) }
html body .ncard-foot a { color: var(--acc); font-weight: 700 }
.nwhere-head { margin-top: 34px }
.nwheres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px }
html body a.nwhere { gap: 3px; padding: 12px 14px 12px 16px; text-decoration: none; transition: transform .25s var(--ease), border-color .25s var(--ease) }
html body a.nwhere strong { font-size: 14px; color: var(--g-text) }
html body a.nwhere span { font-size: 12.5px; line-height: 1.35; color: var(--g-muted) }
html body a.nwhere:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 55%, transparent) }
.npinned { position: sticky; top: calc(var(--bar, 112px) + 16px); padding: 18px; border-radius: var(--r-xl); border: 1px solid var(--g-rim);
  background-color: var(--t-fern); background-image: var(--g-sheen); box-shadow: var(--g-hi), var(--g-shadow-2) }
.npinned .nhead { margin-bottom: 10px }
.npinned .nhead h2 { font-size: clamp(26px, 3vw, 34px) }
.npinned .eyebrow { color: #FFD35A }
.npinned .board { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; max-height: 70vh; overflow-y: auto }
.npinned .formcard { margin-top: 12px }
.npinned .formcard .fields { grid-template-columns: minmax(0, 1fr) }
@media (max-width: 1060px) {
  .nlayout { grid-template-columns: minmax(0, 1fr) }
  .npinned { position: static }
  .npinned .board { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); max-height: none }
}
@media (max-width: 640px) { .ncards { grid-template-columns: minmax(0, 1fr) } }

/* ================= Fuel prices tile ================= */
.fuel-types .stage-chip { flex: none; min-height: 30px; padding: 0 11px; font-size: 12px }
.fuel-body { display: flex; flex-direction: column; gap: 10px }
.fuel-home { padding: 12px 14px; border-radius: 14px; background: rgba(246, 200, 52, .08); border: 1px solid rgba(246, 200, 52, .3); display: grid; gap: 4px }
.fuel-home-name { margin: 0; font-weight: 800; font-size: 15px }
.fuel-home-price { margin: 2px 0 0; display: flex; align-items: baseline; gap: 4px }
.fuel-home-price strong { font-size: 34px; line-height: 1; letter-spacing: -.03em; color: var(--wattle); font-variant-numeric: tabular-nums }
.fuel-home-price span, .fuel-home-vs { font-size: 12.5px; color: var(--g-muted) }
.fuel-home-vs { margin: 0 }
.fuel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto }
.fuel-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px }
.fuel-row:nth-child(odd) { background: rgba(255, 255, 255, .035) }
.fuel-row.is-home { box-shadow: inset 3px 0 0 var(--wattle); background: rgba(246, 200, 52, .07) }
.fuel-st { min-width: 0; display: flex; flex-direction: column }
.fuel-st strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fuel-st small { font-size: 11.5px; color: var(--g-muted) }
.fuel-p { flex: none; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums }
.fuel-p b { font-size: 15px }
.fuel-p em, .fuel-p i { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--g-muted) }
.fuel-p i { color: #6FD8A2 }
.fuel-src { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--g-muted) }
.fuel-cta { align-self: flex-start; min-height: 36px; font-size: 13px }