/* Fuel Price Zone Map widget — theme with the variables below.
   To re-theme, override them on .fzm (or a wrapper), e.g. .fzm{--fzm-accent:#5b6b8c} */
@font-face{font-family:"Noto Serif Display";src:url("fonts/NotoSerifDisplay-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Glacial Indifference";src:url("fonts/GlacialIndifference-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Glacial Indifference";src:url("fonts/GlacialIndifference-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

.fzm{
  --fzm-bg:#F6F4F0;          /* page / widget background (warm ivory) */
  --fzm-surface:#FFFCF8;     /* cards, inputs */
  --fzm-sea:#EBE7E0;         /* map background */
  --fzm-ink:#3B3937;         /* main text (charcoal) */
  --fzm-ink-soft:#5E5C59;
  --fzm-muted:#7A7773;
  --fzm-line:#FFFCF8;        /* district borders */
  --fzm-border:#D4D0CA;
  --fzm-accent:#C4842A;      /* amber */
  --fzm-accent-deep:#A36C1E;
  --fzm-accent-soft:#E8C98A;
  --fzm-nodata:#D9D5CF;
  /* zone colour ramp, low -> high transport cost */
  --fzm-scale-1:#F3E3BF; --fzm-scale-2:#E3B567; --fzm-scale-3:#C4842A; --fzm-scale-4:#8E4F1C; --fzm-scale-5:#4E2A17;
  /* categorical zone palette (colour-blind-friendly; Okabe-Ito + Tol) */
  --fzm-cat-0:#0072B2; --fzm-cat-1:#E69F00; --fzm-cat-2:#009E73; --fzm-cat-3:#CC79A7; --fzm-cat-4:#56B4E9; --fzm-cat-5:#D55E00; --fzm-cat-6:#F0E442; --fzm-cat-7:#882255; --fzm-cat-8:#44AA99; --fzm-cat-9:#999933; --fzm-cat-10:#AA4499; --fzm-cat-11:#332288; --fzm-cat-12:#DDCC77; --fzm-cat-13:#117733; --fzm-cat-14:#88CCEE;
  --fzm-font-head:"Noto Serif Display",Georgia,"Times New Roman",serif;
  --fzm-font-body:"Glacial Indifference","Century Gothic","Avenir Next",Avenir,"Segoe UI",sans-serif;
  --fzm-radius:14px;
  --fzm-map-height:min(68vh,640px);

  font-family:var(--fzm-font-body);color:var(--fzm-ink);background:var(--fzm-bg);
  max-width:1100px;margin:0 auto;padding:clamp(16px,3vw,32px);box-sizing:border-box;position:relative;
}
.fzm *,.fzm *::before,.fzm *::after{box-sizing:border-box}
.fzm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fzm-head{margin-bottom:14px}
.fzm-title{font-family:var(--fzm-font-head);font-weight:500;font-size:clamp(1.55rem,3.4vw,2.3rem);line-height:1.15;margin:0 0 6px;letter-spacing:.005em}
.fzm-title::after{content:"";display:block;width:56px;height:3px;background:var(--fzm-accent);margin-top:10px;border-radius:2px}
.fzm-sub{margin:0;color:var(--fzm-ink-soft);font-size:1.02rem;line-height:1.45;max-width:60ch}

.fzm-search{position:relative;z-index:1002;margin:14px 0 12px}
.fzm-inputwrap{position:relative;display:flex;align-items:center}
.fzm-icon{position:absolute;left:14px;width:20px;height:20px;fill:none;stroke:var(--fzm-muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.fzm-input{width:100%;font:inherit;font-size:1.08rem;color:var(--fzm-ink);background:var(--fzm-surface);border:1.5px solid var(--fzm-border);border-radius:999px;padding:14px 48px 14px 44px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.fzm-input::-webkit-search-cancel-button{display:none}
.fzm-input:focus{border-color:var(--fzm-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--fzm-accent) 22%,transparent)}
.fzm-clear{position:absolute;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--fzm-muted);font-size:1.5rem;line-height:1;cursor:pointer}
.fzm-clear:hover{background:var(--fzm-bg);color:var(--fzm-ink)}
.fzm-list{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;background:var(--fzm-surface);border:1px solid var(--fzm-border);border-radius:var(--fzm-radius);box-shadow:0 14px 34px rgba(40,30,20,.16);max-height:min(60vh,420px);overflow:auto}
.fzm-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer}
.fzm-opt.is-active,.fzm-opt:hover{background:color-mix(in srgb,var(--fzm-accent-soft) 40%,var(--fzm-surface))}
.fzm-opt-txt{display:flex;flex-direction:column;min-width:0}
.fzm-opt-txt b{font-weight:700;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fzm-opt-txt small{color:var(--fzm-muted);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fzm-opt-zone{flex:none;font-weight:700;color:var(--fzm-accent-deep);background:color-mix(in srgb,var(--fzm-accent-soft) 45%,transparent);border-radius:8px;padding:4px 9px;font-size:.95rem}
.fzm-empty{padding:12px;color:var(--fzm-muted)}

.fzm-result{margin:0 0 12px}
.fzm-card{position:relative;display:flex;gap:16px;align-items:stretch;background:var(--fzm-surface);border:1px solid var(--fzm-border);border-left:5px solid var(--fzm-accent);border-radius:var(--fzm-radius);padding:14px 50px 14px 16px;box-shadow:0 6px 18px rgba(40,30,20,.07)}
.fzm-card-main{flex:1;min-width:0}
.fzm-kicker{margin:0;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--fzm-muted);font-weight:700}
.fzm-card h3{font-family:var(--fzm-font-head);font-weight:500;font-size:1.45rem;margin:2px 0 4px;line-height:1.2}
.fzm-meta{margin:0;color:var(--fzm-ink-soft);font-size:.95rem;line-height:1.4}
.fzm-note{margin:6px 0 0;color:var(--fzm-muted);font-size:.86rem;line-height:1.4}
.fzm-card-zone{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:92px;text-align:center}
.fzm-card-zone small{text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--fzm-muted);font-weight:700;margin-bottom:4px}
.fzm-zone{display:inline-block;font-family:var(--fzm-font-head);font-weight:500;font-size:2rem;line-height:1;color:var(--fzm-surface);background:var(--fzm-accent);border-radius:12px;padding:8px 12px 9px}
.fzm-or{display:block;font-size:.75rem;color:var(--fzm-muted);margin:3px 0}
.fzm-nozone span{font-weight:700;color:var(--fzm-muted)}
.fzm-warn{color:var(--fzm-accent-deep)}
.fzm-x{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;font-size:1.4rem;color:var(--fzm-muted);cursor:pointer}
.fzm-x:hover{background:var(--fzm-bg)}

.fzm-mapwrap{position:relative;border-radius:var(--fzm-radius);overflow:hidden;border:1px solid var(--fzm-border);background:var(--fzm-sea)}
.fzm-map{height:var(--fzm-map-height);min-height:340px;background:var(--fzm-sea);touch-action:none}
.fzm .leaflet-container{font-family:var(--fzm-font-body);background:var(--fzm-sea)}
.fzm-tools{position:absolute;top:12px;right:12px;z-index:1000;display:flex;flex-direction:column;gap:8px}
.fzm-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--fzm-border);background:var(--fzm-surface);color:var(--fzm-ink);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 10px rgba(40,30,20,.12);padding:0}
.fzm-btn:hover{border-color:var(--fzm-accent);color:var(--fzm-accent-deep)}
.fzm-btn:focus-visible,.fzm-srcbtn:focus-visible,.fzm-x:focus-visible{outline:3px solid var(--fzm-accent);outline-offset:2px}
.fzm-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fzm-legend{position:absolute;left:12px;bottom:12px;z-index:1000;background:color-mix(in srgb,var(--fzm-surface) 92%,transparent);border:1px solid var(--fzm-border);border-radius:10px;padding:7px 10px;display:grid;grid-template-columns:auto 110px auto;align-items:center;gap:4px 8px;font-size:.8rem;color:var(--fzm-ink-soft)}
.fzm-ramp{display:block;height:10px;border-radius:5px}
.fzm-legend small{grid-column:1/-1;color:var(--fzm-muted);font-size:.72rem}

.fzm-lbl{pointer-events:none;text-align:center;white-space:nowrap;transform:translate(-50%,-50%);color:var(--fzm-ink);text-shadow:0 0 3px rgba(255,252,248,.95),0 0 2px rgba(255,252,248,.95)}
.fzm-lbl b{display:block;font-size:11px;font-weight:700;letter-spacing:.02em}
.fzm-lbl span{display:none;font-size:10px;color:var(--fzm-ink-soft)}
.fzm-lbl-dark{color:#fff;text-shadow:0 0 3px rgba(0,0,0,.55)}
.fzm-lbl-dark span{color:#f3ece2}
.fzm-z-names .fzm-lbl span{display:block}
.fzm-city{pointer-events:none;white-space:nowrap}
.fzm-city i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--fzm-ink);border:2px solid var(--fzm-surface)}
.fzm-city span{position:absolute;left:8px;top:-9px;font-size:12px;font-weight:700;color:var(--fzm-ink);text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff}
.fzm-z-names .fzm-city{display:none}
.fzm-city-left span{left:auto;right:8px}
.fzm-city-up span{top:-22px;left:6px}
.fzm-z-far .fzm-city-up{display:none}

.fzm-disclaimer{margin:12px 2px 0;font-size:.86rem;color:var(--fzm-muted);line-height:1.45}
.fzm-srcbtn{font:inherit;color:var(--fzm-accent-deep);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.fzm-sources{font-size:.82rem;color:var(--fzm-muted);line-height:1.45;margin:6px 2px 0}
.fzm-sources a{color:var(--fzm-accent-deep)}

@media (max-width:600px){
  .fzm{padding:14px 12px 18px}
  .fzm-card{padding:12px 44px 12px 12px;gap:10px}
  .fzm-card h3{font-size:1.25rem}
  .fzm-zone{font-size:1.6rem;padding:7px 10px 8px}
  .fzm-card-zone{min-width:72px}
  .fzm-map{height:min(62vh,520px)}
  .fzm-legend{grid-template-columns:auto 70px auto;font-size:.72rem}
  .fzm-btn{width:42px;height:42px}
}

/* Zone colour mode + legend */
.fzm-legend{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:260px}
.fzm-mode{display:inline-flex;border:1px solid var(--fzm-ink);border-radius:999px;overflow:hidden}
.fzm-mode[hidden]{display:none}
.fzm-mode-btn{font:inherit;font-size:.74rem;padding:4px 10px;background:transparent;color:var(--fzm-ink);border:0;cursor:pointer}
.fzm-mode-btn[aria-pressed="true"]{background:var(--fzm-ink);color:#fff}
.fzm-leg-zones,.fzm-leg-cost{display:grid;gap:4px}
.fzm-leg-zones[hidden],.fzm-leg-cost[hidden]{display:none}
.fzm-leg-cost{grid-template-columns:auto 110px auto;align-items:center}
.fzm-sw{display:flex;gap:2px}
.fzm-sw i{width:14px;height:10px;border-radius:2px;display:block}
.fzm-legend small{color:var(--fzm-muted);font-size:.72rem;line-height:1.3}
.fzm-lbl-dark{color:#fff;text-shadow:0 0 3px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,.6)}

/* close zoom: towns, streets, legend toggle */
.fzm-town{pointer-events:none;white-space:nowrap}
.fzm-town i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--fzm-ink);border:1.5px solid #fff}
.fzm-town span{position:absolute;left:7px;top:-8px;font-size:11.5px;font-weight:700;color:var(--fzm-ink);text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff}
.fzm-z-close .fzm-lbl span{display:none}
.fzm-z-close .fzm-lbl b{font-size:13px;opacity:.9}
.fzm-z-close .fzm-city{display:none}
.fzm-streets[aria-pressed="true"]{background:var(--fzm-ink);color:#fff;border-color:var(--fzm-ink)}
.fzm .leaflet-control-attribution{font-size:10px;background:rgba(255,252,248,.85)}
.fzm-leg-toggle{display:none;font:inherit;font-size:.74rem;font-weight:700;padding:4px 10px;border:1px solid var(--fzm-border);border-radius:999px;background:var(--fzm-surface);color:var(--fzm-ink);cursor:pointer}
.fzm-leg-body{display:flex;flex-direction:column;gap:6px}
.fzm-leg-nz,.fzm-leg-pi{display:flex;align-items:center;gap:6px}
.fzm-leg-nz i,.fzm-leg-pi i{width:14px;height:10px;border-radius:2px;display:block;flex:0 0 14px}
.fzm-leg-nz i{background:var(--fzm-nodata)}
.fzm-leg-pi i{background:repeating-linear-gradient(-45deg,#C9B86A 0 2px,#F3E9C4 2px 6px);border:1px solid rgba(0,0,0,.08)}
.fzm-hints{margin-top:6px;font-size:.85rem;color:var(--fzm-ink-soft)}
.fzm-hints summary{cursor:pointer;color:var(--fzm-accent-deep)}
.fzm-nozone span{font-size:.95rem!important;color:var(--fzm-ink-soft)}
@media (max-width:600px){
  .fzm-leg-toggle{display:inline-block}
  .fzm-legend{left:8px;bottom:8px;padding:5px 7px;max-width:210px}
  .fzm-legend.fzm-leg-closed{padding:0;border:0;background:transparent}
  .fzm-leg-closed .fzm-leg-body{display:none}
  .fzm-tools{top:8px;right:8px;gap:6px}
  .fzm-btn{width:40px;height:40px}
}
.fzm-z-streets .fzm-lbl-dark{color:var(--fzm-ink);text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff}
.fzm-z-streets .fzm-lbl-dark span{color:var(--fzm-ink-soft)}