/* Forecast Ireland — highway signage design system, Irish cut
 *
 * Sibling to Forecast Britain, Forecast Euro and Forecast Canada, and readable as
 * one network: the same paper ground, Overpass / Overpass Mono, guide-sign panel,
 * exit chips, card grid and timeline, with EB Garamond Italic as the atlas voice.
 * (The explorer's rules below are Forecast Britain's, recoloured, because the
 * explorer is Forecast Britain's; the Irish additions follow them.)
 *
 * The colour is the Irish road network's own:
 *   - the panel is **national-route green** — the ground of every N-road
 *     direction sign on the island — so the site reads as Ireland at a glance
 *     and never as Britain's navy or Canada's Trans-Canada green (#00613a is
 *     darker and bluer than Canada's);
 *   - the working accent is **Irish motorway blue**, as Britain's is its own
 *     motorway blue, where a driver meets it: rules, timeline, live badges;
 *   - **route-number yellow** — the N-road number on a green sign — marks the
 *     model plate in the header and the Irish-language names.
 *
 * Irish signs are bilingual: the Irish name in italics above the English in
 * upright capitals. The header, the plate and every place page follow that
 * convention. Exit chips are JUNCTIONS (acomhal), distances are km, the wind
 * is km/h — as Met Éireann says it.
 */

:root {
  --paper: #e5e6df;
  --card: #ffffff;
  --ink: #141815;
  --ink2: #444a44;

  /* National-route green — the guide-sign panel. */
  --sign: #00613a;
  --sign-dk: #003f25;
  --sign-tx: #ffffff;
  --sign-sub: #cce8d7;

  /* Irish motorway blue — the working accent. Kept under the network's old
     name so the explorer's shared rules pick it up unchanged. */
  --motorway: #1d5fae;
  --motorway-dk: #164a88;
  --motorway-sub: #cfe0f5;

  --blue: #155a9c;
  --navy: #0f3f6e;
  --blue-sub: #cfe2f6;

  /* the N-road route number */
  --route: #ffd100;
  --route-dk: #d9a900;

  --line: #c6c9c0;
  --line2: #e2e4dc;
  --mut: #7f857c;
  --amber: #f2ac14;

  /* warning levels, as Met Éireann colours them */
  --w-yellow: #ffd100;
  --w-orange: #ff8c00;
  --w-red: #e0202a;

  --figure: #0a1210;
  --figure-line: #1f3a30;
  --figure-tx: #e1ede6;
  --figure-mut: #8fb0a0;

  --shadow: 0 6px 22px rgba(10, 40, 25, .09);
  --shadow-hi: 0 10px 26px rgba(10, 40, 25, .16);

  --font: 'Overpass', Helvetica, Arial, sans-serif;
  --mono-font: 'Overpass Mono', ui-monospace, monospace;
  --atlas-font: 'EB Garamond', Garamond, Georgia, serif;
  --maxw: 1100px;
}


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.wrap-wide { max-width: 1560px; margin: 0 auto; padding: 0 18px; }

/* ── thin utility bar ─────────────────────────────────── */
.util {
  background: var(--ink); color: #cfccc4; border-bottom: 3px solid var(--sign);
  position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0, 0, 0, .22);
}
.util .bar {
  max-width: 1560px; margin: 0 auto; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 34px; flex-wrap: wrap;
}
.util .mono { font-size: 11px; letter-spacing: .06em; }
.util .lnks { display: flex; gap: 16px; flex-wrap: wrap; }
.util a { color: #e9e7e0; font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.util a:hover { color: var(--sign-sub); text-decoration: none; }
.util a[aria-current="page"] { color: var(--sign-sub); }

/* ── province strip ───────────────────────────────────────
   A second tier of the top navigation, because a province is a destination people
   return to and the models are not — you look up Ontario far more often than you
   choose between HRDPS and RDPS. Sits directly under the utility bar and shares its
   geometry so the two read as one masthead.

   Short forms rather than full names: thirteen provinces at full length wrap on any
   laptop, and "Sask." is unambiguous to every Canadian in a way that a truncated
   "Saskatch…" is not. The full name is the link's title. */
.provbar {
  background: var(--sign-dk); color: var(--sign-sub);
  border-bottom: 1px solid rgba(0, 0, 0, .25);
}
.provbar .bar {
  max-width: 1560px; margin: 0 auto; padding: 5px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.provbar .lbl {
  font: 700 9px var(--mono-font); letter-spacing: .14em;
  color: rgba(255, 255, 255, .55); white-space: nowrap;
}
.provbar .lnks { display: flex; gap: 4px; flex-wrap: wrap; }
.provbar a {
  font: 800 11px var(--font); letter-spacing: .02em; color: #fff;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.provbar a:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
.provbar a[aria-current="page"] { background: #fff; color: var(--sign-dk); }

/* ── guide sign panel ─────────────────────────────────── */
.sign {
  background: var(--sign); border-radius: 10px; color: var(--sign-tx);
  padding: 26px 24px 24px; position: relative;
  box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 6px rgba(255, 255, 255, .9),
              0 10px 30px rgba(0, 0, 0, .16);
}
.sign a { color: #fff; }
.signhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.signhead img { width: 62px; height: 62px; flex: none; display: block; }
.word {
  font-weight: 900; font-size: clamp(28px, 5.4vw, 50px); line-height: .92;
  letter-spacing: -.02em; margin: 0;
}
.word .yl { color: var(--sign-sub); }
.tag {
  margin: 8px 0 0; font-weight: 700; font-size: clamp(13px, 2.2vw, 16px);
  color: var(--sign-sub); letter-spacing: .01em;
}

/* UK motorway route plate.
   The real sign is white Transport lettering on motorway blue inside a white
   keyline — the "M 6" confirmation plate — so this one is motorway blue on the
   navy panel, outlined in white, rather than the solid white shield the
   Trans-Canada marker uses. */
.shield {
  background: var(--motorway); color: #fff; border: 2.5px solid #fff;
  border-radius: 6px; padding: 5px 11px 6px; text-align: center; line-height: 1;
  flex: none; display: inline-block; box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}
.shield .a { font-size: 8px; font-weight: 700; letter-spacing: .16em; color: var(--motorway-sub); display: block; }
.shield .b { font-size: 20px; font-weight: 900; letter-spacing: .04em; display: block; color: #fff; }
.shield .c { font-size: 8px; font-weight: 700; letter-spacing: .12em; color: var(--motorway-sub); display: block; }

/* Junction-style chips — Britain numbers junctions, not exits. */
.exits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.exits .lbl { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--sign-sub); }
.mm {
  background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 5px; padding: 6px 12px; font-family: inherit; font-weight: 700;
  font-size: 12px; letter-spacing: .03em; cursor: pointer; color: #fff;
}
.mm:hover { background: #fff; color: var(--sign); text-decoration: none; }

/* ── section rule header ──────────────────────────────── */
section { padding: 26px 0 4px; }
.rule { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rule .ln {
  height: 3px; flex: 1;
  background: repeating-linear-gradient(90deg, var(--motorway) 0 18px, transparent 18px 34px);
}
.rule h2 {
  margin: 0; color: var(--motorway); font-size: 15px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
}
.rule .sub { color: var(--mut); font-size: 11px; font-weight: 700; letter-spacing: .06em; }

/* ── cards ────────────────────────────────────────────── */
.card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 0; overflow: hidden; display: block; color: inherit;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .08); transition: transform .14s, box-shadow .14s;
}
a.card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .13); text-decoration: none; }
.card .chead {
  background: var(--motorway); color: #fff; padding: 9px 14px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.card .chead.blue { background: var(--blue); }
.card .chead.red { background: var(--sign); }
.card .chead .k { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--motorway-sub); }
.card .chead.blue .k { color: var(--blue-sub); }
.card .chead.red .k { color: var(--sign-sub); }
.card .cbody { padding: 14px; }
.card h3 { margin: 0 0 5px; font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink2); font-size: 13.5px; font-weight: 600; line-height: 1.5; }

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px; box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}

/* ── controls ─────────────────────────────────────────── */
.btn {
  cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink2);
  border-radius: 3px; font-family: var(--font); font-weight: 700; font-size: 11.5px;
  letter-spacing: .02em; padding: 7px 12px; line-height: 1.3;
}
.btn:hover { border-color: var(--motorway); color: var(--ink); }
.btn.on, .btn[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: #08488a; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-go { background: var(--blue); color: #fff; border-color: #08488a; font-weight: 900; letter-spacing: .06em; }
.btn-go:hover { background: #0b6bc4; color: #fff; }

select, input[type="text"], input[type="search"] {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  border-radius: 3px; padding: 6px 9px; font-family: var(--font);
  font-weight: 700; font-size: 12px;
}
select:focus, input:focus, .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* The `hidden` attribute is a promise the HTML makes, and a layout rule as ordinary
   as `.toolbar .group > div { display: flex }` outranks it on specificity and quietly
   breaks it — which is how the wind options first shipped visible while switched off.
   Restore it once, globally, rather than re-winning the argument per component. */
[hidden] { display: none !important; }

label { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }

/* ── timeline ─────────────────────────────────────────────
   Transport, scrubber and a UTC tick strip, in one card under the map. Shared by
   every model viewer, because a forecast loop is a forecast loop whether the frames
   are HRDPS hours or GDPS days.

   The range is index-based, so every frame gets equal width and the thumb always
   lands on one, and ticks are drawn on frames rather than at arbitrary clock times.
   Labels therefore thin out across a run exactly where its cadence coarsens. */
.timeline {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px 9px; box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}
.tl-side { display: flex; flex-direction: column; gap: 5px; }
.tl-lab { font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mut); }
.tl-transport { display: flex; align-items: center; gap: 5px; }
.tl-track { flex: 1 1 340px; min-width: 240px; display: flex; flex-direction: column; }
.tl-track input[type="range"] { width: 100%; margin: 0; accent-color: var(--motorway); }
/* Inset by half a thumb so the first and last ticks sit under the thumb's travel,
   not under the ends of the groove the thumb never reaches. */
.tl-ticks { position: relative; height: 23px; margin: 3px 9px 0; pointer-events: none; }
.tl-ticks .tk { position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; }
.tl-ticks .tk.at-start { transform: translateX(-2px); align-items: flex-start; }
.tl-ticks .tk.at-end { transform: translateX(calc(-100% + 2px)); align-items: flex-end; }
.tl-ticks .tk i { width: 1px; height: 5px; background: var(--line); display: block; }
.tl-ticks .tk span { font: 700 8.5px var(--mono-font); color: var(--mut);
  white-space: nowrap; line-height: 1; margin-top: 3px; letter-spacing: .02em; }
/* The tick that opens each forecast day carries the date and the accent green;
   the hours within that day are hairlines. */
.tl-ticks .tk.day i { height: 9px; width: 2px; background: var(--motorway); }
.tl-ticks .tk.day span { color: var(--ink2); font-weight: 800; }
/* Buffer fill. Sits between the scrubber and the tick strip, so the thing that says
   "the loop is ready" is directly under the thing you drag. It fades out once full
   rather than staying as chrome nobody needs. */
.tl-buffer { height: 2px; margin: 2px 9px 0; border-radius: 2px; background: var(--line2);
  overflow: hidden; transition: opacity .4s ease .3s; }
.tl-buffer::before { content: ""; display: block; height: 100%; width: var(--pct, 0%);
  background: var(--motorway); transition: width .15s linear; }
.tl-buffer.is-full { opacity: 0; }
.tl-ends { display: flex; justify-content: space-between; gap: 10px;
  font: 700 9.5px var(--mono-font); color: var(--mut); letter-spacing: .02em; }
.tl-count { font: 900 13px var(--mono-font); color: var(--ink); }
.tl-hint { margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--mut); }

/* ── buffer policy chrome ──────────────────────────────────
   New with the converged maptimeline.js. The buffer bar's dashed tail is the part of
   the run deliberately not fetched (see Timeline.buffer); LOAD ALL beside the frame
   counter fetches it, and says what that costs. The button is created by the module,
   so there is no markup for it here — only these rules. */
.tl-buffer { position: relative; }
.tl-buffer.is-held::after {
  content: ""; position: absolute; right: 0; top: 0; height: 100%; width: var(--held, 0%);
  background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px);
}
.tl-load { font-size: 10px; padding: 4px 8px; margin-top: 4px; letter-spacing: .06em;
           font-family: var(--mono-font); white-space: nowrap; }
.tl-load:hover { border-color: var(--sign); color: var(--sign); }


/* Segmented control — the speed menu, and anything else that is one choice of a few */
.seg { display: flex; }
.seg button { font: 700 11px var(--mono-font); background: var(--card); color: var(--ink2);
  border: 1px solid var(--line); border-left-width: 0; padding: 5px 8px; cursor: pointer; }
.seg button:first-child { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.seg button:last-child { border-radius: 0 4px 4px 0; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--motorway); color: #fff; border-color: var(--motorway); }
.seg button:disabled { cursor: not-allowed; }
/* A segment the active model or cycle cannot drive at all. Greyed as a block rather
   than hidden: a control that quietly vanishes reads as a bug, one that is greyed out
   reads as an answer, and a control strip that changes length as you switch models is
   disorienting. */
.seg.unavailable { opacity: .35; }
.seg.unavailable button { cursor: not-allowed; text-decoration: line-through;
  text-decoration-thickness: 1px; }

/* Breadcrumbs and drill chips are anchors now, not buttons, so places can be
   middle-clicked into a new tab and right-click-copied. They still have to look
   exactly like the controls they replaced — an underline on hover is the browser's
   idea, not ours. */
a.crumb, a.chip { text-decoration: none; display: inline-block; }
a.crumb:hover, a.chip:hover { text-decoration: none; }
.crumb.on { color: var(--ink); text-decoration: underline;
            text-decoration-color: var(--sign); text-underline-offset: 3px;
            text-decoration-thickness: 2px; }

/* Unit toggle — a segmented control, but a primary one, so it is a touch larger
   than the speed menu and uses the maple red rather than the accent green. Two
   buttons rather than a menu: it is a binary people flip back and forth, and a
   select turns one click into two. */
#units button { font: 800 12px var(--mono-font); padding: 6px 11px; }
#units button.on { background: var(--sign); border-color: var(--sign-dk); color: #fff; }

/* The wind overlay sits above the map and takes no pointer events — the map still
   drags and the value probe still reads through it. */
#wind-overlay {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
#wind-mode button { font: 700 10.5px var(--mono-font); padding: 5px 8px; }
#wind-mode button.on { background: var(--motorway); border-color: var(--motorway); color: #fff; }

/* ── misc ─────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 3px;
  font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.badge-live { background: var(--motorway); color: #fff; }
.badge-new { background: var(--sign); color: #fff; }
.badge-soon { background: #efece5; color: var(--mut); border: 1px solid var(--line); }

.dim { color: var(--ink2); }
.faint { color: var(--mut); }

.site-footer {
  border-top: 3px solid var(--sign); margin-top: 44px; padding: 18px 0 34px;
  color: var(--ink2); font-size: 12px; font-weight: 600; background: #ddd8ce;
}
.site-footer a { color: var(--navy); font-weight: 800; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--sign); color: #fff;
  padding: 9px 14px; z-index: 200; font-weight: 800;
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── wind options ─────────────────────────────────────────
   Sub-controls of the wind mode segment, and styled to read as subordinate to it:
   indented under a rule, smaller labels, and hidden outright when the active mode
   has nothing for them to change. */
.wind-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 6px;
             padding-left: 9px; border-left: 2px solid var(--line2); }
.wind-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wind-opt label { font-size: 9px; letter-spacing: .09em; }
.wind-opt select { padding: 3px 5px; font-size: 11px; font-weight: 700; min-width: 92px; }

/* ══════════════════════════════════════════════════════════════════════════
   Place pages — /<province> and /<province>/<city>
   ------------------------------------------------------------------------
   The explorer is the site's model side; these are its place side, reading
   Environment Canada's City Page Weather rather than the GEM grids. Same
   paper, same maple-red panel, same Trans-Canada green for anything that
   does work; the only new colour is the amber already in the palette, used
   for a watch, and the maple red re-used for a warning.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── breadcrumb + compass row above the sign ───────────────────────────── */
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono-font, 'Overpass Mono', monospace);
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mut); margin: 0 0 12px; }
.crumbs a { color: var(--motorway); }
.crumbs .sep { color: var(--line); }

/* ── the live conditions headline on a city page ───────────────────────── */
.nowcard { display: grid; gap: 18px; grid-template-columns: minmax(210px, 300px) 1fr;
  align-items: center; }
@media (max-width: 660px) { .nowcard { grid-template-columns: 1fr; } }
.nowtemp { display: flex; align-items: baseline; gap: 10px; }
.nowtemp .deg { font-size: clamp(52px, 11vw, 78px); font-weight: 900; line-height: .95;
  letter-spacing: -.03em; color: var(--ink); }
.nowtemp .un { font-size: 17px; font-weight: 900; color: var(--mut); }
.nowcond { font-size: 17px; font-weight: 800; margin: 6px 0 0; }
.nowmeta { display: grid; gap: 10px 22px; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
.nowmeta div { border-left: 3px solid var(--motorway); padding-left: 10px; }
.nowmeta .k { display: block; font-family: 'Overpass Mono', monospace; font-size: 10px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.nowmeta .v { display: block; font-size: 17px; font-weight: 800; }

/* ── metro / city tiles carrying a live reading ────────────────────────── */
.placegrid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(182px, 1fr)); }
.placetile { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 13px; display: block; color: inherit;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .07); transition: transform .14s, box-shadow .14s; }
a.placetile:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(0, 0, 0, .12);
  text-decoration: none; }
.placetile .nm { font-size: 15px; font-weight: 900; letter-spacing: -.01em; display: block; }
.placetile .sub { font-family: 'Overpass Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.placetile .row { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 9px; }
.placetile .tm { font-size: 27px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.placetile .gl { font-size: 21px; line-height: 1; }
.placetile .cd { font-size: 12px; font-weight: 700; color: var(--ink2); margin-top: 4px;
  min-height: 1.2em; }

/* ── the seven-day column set ──────────────────────────────────────────── */
.fcstrip { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.fcday { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 12px; }
.fcday .d { font-family: 'Overpass Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--motorway); }
.fcday .g { font-size: 25px; line-height: 1.15; }
.fcday .t { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.fcday .t .lo { color: var(--blue); }
.fcday .c { font-size: 12px; font-weight: 600; color: var(--ink2); line-height: 1.35; }
.fcday .p { font-family: 'Overpass Mono', monospace; font-size: 10.5px; font-weight: 700;
  color: var(--blue); letter-spacing: .05em; }

/* ── the 24-hour scroller ──────────────────────────────────────────────── */
.hrscroll { overflow-x: auto; padding-bottom: 4px; }
.hrrow { display: flex; gap: 8px; min-width: max-content; }
.hrcell { flex: 0 0 auto; width: 74px; text-align: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 4px; }
.hrcell .h { font-family: 'Overpass Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--mut); letter-spacing: .05em; }
.hrcell .g { font-size: 17px; line-height: 1.3; }
.hrcell .t { font-size: 16px; font-weight: 900; }
.hrcell .p { font-family: 'Overpass Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--blue); }

/* ── warnings. Red is the maple-red panel colour doing double duty here,
      which is right: on this site red already means "the sign is talking". ── */
.alerts { display: grid; gap: 9px; }
.alert { border-radius: 7px; padding: 11px 14px; border: 1px solid transparent;
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.alert .lv { font-family: 'Overpass Mono', monospace; font-size: 10px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; }
.alert .tx { font-size: 14.5px; font-weight: 800; }
.alert.warning { background: #fdeceb; border-color: var(--sign); color: var(--sign-dk); }
.alert.watch { background: #fdf4e0; border-color: var(--amber); color: #7a5405; }
.alert.statement, .alert.advisory { background: var(--card); border-color: var(--line); color: var(--ink2); }
.alert-none { font-size: 14px; font-weight: 700; color: var(--motorway-dk);
  background: #eef7f2; border: 1px solid var(--motorway-sub); border-radius: 7px; padding: 11px 14px; }

/* ── the province outline map ──────────────────────────────────────────── */
.provmap { background: linear-gradient(180deg, #eef1f2 0%, #dfe4e5 100%);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
/* Saskatchewan is twice as tall as it is wide in true proportion, and Alberta and
   the territories are not far off. Left alone those render as a metre-long column,
   so the frame is capped and the outline letterboxes inside it — the shape stays
   honest, which a squashed viewBox would not. */
.provmap svg { display: block; width: 100%; height: auto; max-height: 620px; }
.provmap .ghost { fill: #d8d3c8; stroke: #c2bcae; stroke-width: 1.4; }
.provmap .home { fill: #fbe3e0; stroke: var(--sign); stroke-width: 2.4; stroke-linejoin: round; }
.provmap .dot { fill: var(--motorway); stroke: #fff; stroke-width: 2; cursor: pointer; }
.provmap .dot.big { stroke-width: 2.4; }
.provmap text.lb { font-family: 'Overpass', sans-serif; font-weight: 800; fill: #fff;
  paint-order: stroke; stroke: rgba(12, 16, 20, .9); stroke-width: 4.5;
  stroke-linejoin: round; pointer-events: none; }

/* ── unit toggle, sitting where the explorer's own one does ────────────── */
.unitrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.unitrow .lbl { font-family: 'Overpass Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--mut); }

/* ── neighbour compass, the province-to-province step ──────────────────── */
.compass { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.compass .nb { display: inline-flex; align-items: center; gap: 7px; background: var(--card);
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 13px;
  font-size: 13.5px; font-weight: 800; color: inherit; }
.compass .nb:hover { border-color: var(--motorway); text-decoration: none; }
.compass .nb .ar { color: var(--motorway); font-weight: 900; }

.stamp { font-family: 'Overpass Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }

/* ══════════════════════════════════════════════════════════════════════════
   The national hero map
   ------------------------------------------------------------------------
   Flat colour, not terrain. The explorer carries shaded relief; the front
   page is the guide sign, and the whole point of this map is that a province
   and a city are things you click, which a photographic basemap would fight.
   Land is the paper one step warmer, water is the autoroute blue at low
   saturation, the roads are Trans-Canada green, and maple red is reserved
   for the two things that are live: a hovered province and a city dot.
   ══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   Forecast Ireland — the Irish additions
   ═══════════════════════════════════════════════════════════════════════════ */

.atlas { font-family: var(--atlas-font); font-style: italic; }
.ga { font-family: var(--atlas-font); font-style: italic; font-weight: 500; }
.prose p { font-size: 14.5px; font-weight: 600; line-height: 1.62; color: var(--ink2); margin: 0 0 12px; }
.prose a, a.inl { color: var(--motorway); font-weight: 800; }
.prose h3 { margin: 18px 0 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sign); }
.prose ul { margin: 0 0 12px 18px; padding: 0; color: var(--ink2); font-weight: 600; font-size: 14px; line-height: 1.6; }
.dim { color: var(--ink2); }
.faint { color: var(--mut); }

/* ── the sign: Irish above English, as on every direction sign ── */
.sign .ga-line { display: block; font: italic 500 clamp(15px, 2.6vw, 21px) var(--atlas-font); color: var(--route); letter-spacing: .01em; margin-bottom: 3px; line-height: 1.15; }
.signhead .mark { flex: none; width: 66px; height: 66px; border-radius: 50%; background: var(--sign-dk); display: grid; place-items: center; box-shadow: inset 0 0 0 2.5px #fff; }
.signhead .mark img { width: 46px; height: 46px; }
/* the N-road plate: yellow number on the green, keylined */
.nplate { flex: none; background: var(--sign-dk); border: 2.5px solid #fff; border-radius: 5px; padding: 5px 10px 4px; text-align: center; min-width: 96px; line-height: 1; }
.nplate .a { display: block; font: 800 8px var(--mono-font); letter-spacing: .16em; color: var(--sign-sub); }
.nplate .b { display: block; font-size: 25px; font-weight: 900; color: var(--route); letter-spacing: .02em; margin: 4px 0 3px; }
.nplate .c { display: block; font: 700 8px var(--mono-font); letter-spacing: .12em; color: var(--sign-sub); }
.mm .ga { color: var(--route); font-size: 12.5px; margin-left: 5px; font-weight: 500; }
.mm b { color: var(--route); }

/* ── live warnings strip ── */
.warnbar { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.warn { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 8px solid var(--w-yellow); border-radius: 6px; padding: 8px 12px; box-shadow: var(--shadow); }
.warn.orange { border-left-color: var(--w-orange); }
.warn.red { border-left-color: var(--w-red); }
.warn .lv { font: 800 10px var(--mono-font); letter-spacing: .12em; padding: 3px 7px; border-radius: 3px; background: var(--w-yellow); color: #1a1a1a; white-space: nowrap; }
.warn.orange .lv { background: var(--w-orange); }
.warn.red .lv { background: var(--w-red); color: #fff; }
.warn .hd { font-weight: 800; font-size: 13.5px; }
.warn .when { font: 700 11px var(--mono-font); color: var(--mut); white-space: nowrap; }
.warn .ds { grid-column: 2 / 4; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.warn.advisory { border-left-color: var(--line); box-shadow: none; }
.warn.advisory .lv { background: var(--line2); color: var(--ink2); border: 1px solid var(--line); }
.warn.advisory .hd { font-weight: 700; color: var(--ink2); }
.warn-none { font-size: 13px; font-weight: 700; color: var(--mut); padding: 6px 2px; }
@media (max-width: 620px) { .warn { grid-template-columns: auto 1fr; } .warn .when { grid-column: 2; } .warn .ds { grid-column: 1 / 3; } }

/* ── the plate ── */
.platewrap { position: relative; }
.plate {
  position: relative; background: #b9cfdf; border-radius: 10px; overflow: hidden;
  border: 1px solid #9fb3bf; box-shadow: var(--shadow-hi);
}
.plate svg { display: block; width: 100%; height: auto; }
#plateMap .grat path { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: .8; stroke-dasharray: 3 5; }
#plateMap .tick { font: 700 10px var(--mono-font); fill: rgba(20, 40, 55, .55); letter-spacing: .06em; }
#plateMap .nb path { fill: rgba(236, 234, 226, .38); stroke: rgba(80, 90, 90, .35); stroke-width: .6; }
#plateMap .near { font: 800 11px var(--font); letter-spacing: .28em; fill: rgba(60, 70, 70, .5); }
#plateMap .riv path { fill: none; stroke: rgba(55, 110, 160, .55); stroke-width: .9; stroke-linejoin: round; }
#plateMap .lake path { fill: rgba(150, 190, 220, .95); stroke: rgba(55, 110, 160, .55); stroke-width: .6; }
#plateMap .cty path { fill: transparent; stroke: rgba(40, 60, 50, .28); stroke-width: .6; stroke-dasharray: 2 2.5; }
#plateMap .cty path.w-yellow { fill: rgba(255, 209, 0, .38); stroke: rgba(170, 130, 0, .7); stroke-dasharray: none; }
#plateMap .cty path.w-orange { fill: rgba(255, 140, 0, .42); stroke: rgba(180, 90, 0, .8); stroke-dasharray: none; }
#plateMap .cty path.w-red { fill: rgba(224, 32, 42, .40); stroke: rgba(150, 10, 20, .85); stroke-dasharray: none; }
#plateMap .prov path { fill: rgba(255, 255, 255, 0); stroke: rgba(20, 45, 30, .55); stroke-width: 1.1; transition: fill .15s; }
#plateMap .prov a:hover path, #plateMap .prov a:focus path { fill: rgba(255, 255, 255, .16); stroke: var(--sign); stroke-width: 2; }
#plateMap .border { fill: none; stroke: rgba(30, 30, 30, .6); stroke-width: 1.2; stroke-dasharray: 6 3 1.5 3; }
#plateMap .coast { fill: none; stroke: rgba(30, 60, 80, .5); stroke-width: .7; }
#plateMap .plabel text { font: 800 12.5px var(--font); letter-spacing: .34em; fill: rgba(25, 50, 35, .52); text-anchor: middle; pointer-events: none; }
#plateMap .plabel text.pga { font: italic 500 13px var(--atlas-font); letter-spacing: .06em; fill: rgba(25, 50, 35, .5); }
#plateMap .wlabel text { font-family: var(--atlas-font); font-style: italic; fill: #2d5a7a; pointer-events: none; }
#plateMap .wlabel text.ocean { font-size: 19px; letter-spacing: .3em; font-weight: 500; }
#plateMap .wlabel text.sea { font-size: 15px; letter-spacing: .24em; }
#plateMap .wlabel text.minor { font-size: 12px; letter-spacing: .1em; }
#plateMap .wlabel text.bay { font-size: 11.5px; letter-spacing: .06em; }
#plateMap .wlabel text.ga { font-size: 12px; letter-spacing: .08em; fill: #4d7593; font-weight: 400; }
#plateMap .pl { cursor: pointer; }
#plateMap .pl .dot { fill: var(--ink); stroke: #fff; stroke-width: 1.6; }
#plateMap .pl.station .dot { fill: var(--sign); }
#plateMap .pl.island .dot { fill: #2f6f8f; }
#plateMap .pl.peak .dot { fill: #7a4b24; }
#plateMap .pl.buoy .dot { fill: var(--route); stroke: #1a1a1a; stroke-width: 1.2; }
#plateMap .pl:hover .dot, #plateMap .pl:focus .dot { stroke: var(--route); stroke-width: 3; }
#plateMap .pl text { font: 800 12px var(--font); fill: #0f1712; paint-order: stroke; stroke: rgba(255, 255, 255, .88); stroke-width: 3.2px; stroke-linejoin: round; }
#plateMap .pl text.lga { font: italic 500 12px var(--atlas-font); fill: #37503f; }
#plateMap .pl text.val { font: 800 11.5px var(--mono-font); fill: var(--motorway-dk); }
#plateMap .pl .arr { fill: var(--motorway-dk); stroke: rgba(255, 255, 255, .9); stroke-width: 1; paint-order: stroke; }
.platehint {
  position: absolute; left: 12px; top: 12px; max-width: 290px; pointer-events: none; opacity: 0;
  transition: opacity .12s; background: rgba(6, 22, 14, .9); color: var(--figure-tx);
  border: 1px solid var(--figure-line); border-radius: 6px; padding: 9px 11px; font-size: 12.5px; line-height: 1.45; font-weight: 600;
}
.platehint.on { opacity: 1; }
.platehint b { font-size: 14px; color: #fff; }
.platehint .ga { color: var(--route); }
.platehint .v { font-family: var(--mono-font); color: #bfe6ff; }
.platehint .faint { color: var(--figure-mut); }
.plate .scalebar { position: absolute; right: 12px; bottom: 10px; font: 700 10px var(--mono-font); color: #213542; letter-spacing: .08em; }
.plate .scalebar i { display: block; height: 5px; border: 1.5px solid #213542; border-top: 0; margin-bottom: 3px; }
.legendrow { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--ink2); align-items: center; }
.legendrow .sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 5px; border: 1.6px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.legendrow .sq { display: inline-block; width: 14px; height: 10px; vertical-align: -1px; margin-right: 5px; border-radius: 2px; }
.ctlrow { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 10px; }
.ctlrow .lab { font: 700 9.5px var(--mono-font); letter-spacing: .14em; color: var(--mut); text-transform: uppercase; }

/* ── the fingerposts: white boards, black letters, Irish over English, km ── */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-top: 10px; }
.post { position: relative; padding: 4px 0 18px 26px; }
.post::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 9px; background: linear-gradient(90deg, #6d6a63, #9b978d 45%, #5c5952); border-radius: 2px; }
.post .top { font: 800 12px var(--font); letter-spacing: .14em; color: var(--ink); margin: 0 0 10px -18px; padding-left: 18px; text-transform: uppercase; }
.post .top .ga { display: block; text-transform: none; letter-spacing: .02em; font-size: 14px; color: var(--ink2); }
.finger {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
  background: #fbfbf7; color: #111; border: 2px solid #111; border-right: 0; margin: 0 22px 8px 0;
  padding: 3px 8px 3px 10px; min-height: 40px; box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}
.finger::after {
  content: ""; position: absolute; right: -21px; top: -2px; bottom: -2px; width: 21px;
  background: #111; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.finger::before {
  content: ""; position: absolute; right: -18px; top: 1px; bottom: 1px; width: 18px; z-index: 1;
  background: #fbfbf7; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.finger.l { border-right: 2px solid #111; border-left: 0; margin: 0 0 8px 22px; padding: 3px 10px 3px 8px; }
.finger.l::after { right: auto; left: -21px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.finger.l::before { right: auto; left: -18px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.finger .nm { font-weight: 800; font-size: 13.5px; line-height: 1.1; }
.finger .nm .ga { display: block; font-size: 12.5px; color: #333; }
.finger .km { font: 800 13px var(--mono-font); white-space: nowrap; }
.finger.far { background: #eef3fa; }
.finger.far::before { background: #eef3fa; }

/* ── model switch on the plate ── */
.seg button.on { background: var(--sign); border-color: var(--sign-dk); color: #fff; }
.seg.acc button.on { background: var(--motorway); border-color: var(--motorway-dk); }

/* ── towns index and town pages ── */
.townlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.towncard { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; box-shadow: var(--shadow); color: inherit; }
a.towncard:hover { text-decoration: none; border-color: var(--sign); transform: translateY(-1px); }
.towncard .nm { font-weight: 900; font-size: 15px; }
.towncard .ga { display: block; font-size: 13.5px; color: var(--ink2); }
.towncard .meta { font: 700 10px var(--mono-font); color: var(--mut); letter-spacing: .08em; margin-top: 4px; text-transform: uppercase; }
.towncard .now { font: 800 13px var(--mono-font); color: var(--motorway-dk); margin-top: 6px; }
.provhead { margin: 22px 0 8px; font: 900 13px var(--font); letter-spacing: .16em; color: var(--sign); text-transform: uppercase; }
.provhead .ga { text-transform: none; letter-spacing: .02em; font-size: 15px; color: var(--ink2); margin-left: 8px; }

.townhead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 22px; }
.townhead h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); font-weight: 900; letter-spacing: -.01em; line-height: 1; }
.townhead .ga-name { display: block; font: italic 500 clamp(18px, 3vw, 24px) var(--atlas-font); color: var(--sign); margin-bottom: 4px; }
.townhead .where { font: 700 11px var(--mono-font); color: var(--mut); letter-spacing: .1em; text-transform: uppercase; }
.nowgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.nowgrid .k { font: 700 9.5px var(--mono-font); letter-spacing: .14em; color: var(--mut); text-transform: uppercase; }
.nowgrid .v { font: 900 26px var(--font); line-height: 1.15; }
.nowgrid .v small { font-size: 13px; font-weight: 700; color: var(--ink2); margin-left: 3px; }
.nowgrid .s { font: 700 11px var(--mono-font); color: var(--ink2); }
.meteo { background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 10px 10px 4px; overflow-x: auto; }
.meteo svg { display: block; min-width: 720px; width: 100%; height: auto; }
.meteo .ax { font: 700 10px var(--mono-font); fill: var(--mut); }
.meteo .axl { font: 800 9.5px var(--mono-font); letter-spacing: .12em; fill: var(--ink2); }
.meteo .grid { stroke: var(--line2); stroke-width: 1; }
.meteo .day { stroke: var(--line); stroke-width: 1; }
.meteo .now { stroke: var(--w-red); stroke-width: 1.4; stroke-dasharray: 3 3; }
.meteo .dayl { font: 800 11px var(--font); fill: var(--ink); letter-spacing: .06em; }
.meteo .src { font: 700 9px var(--mono-font); fill: var(--mut); letter-spacing: .08em; }
.meteo .srcband { fill: var(--line2); }
.meteo .t2 { fill: none; stroke: #d0452b; stroke-width: 2.2; stroke-linejoin: round; }
.meteo .td { fill: none; stroke: #2f8f5b; stroke-width: 1.5; stroke-dasharray: 4 3; }
.meteo .alt { fill: none; stroke-width: 1.4; stroke-linejoin: round; opacity: .9; }
.meteo .alt.harmonie { stroke: var(--sign); stroke-dasharray: 5 3; }
.meteo .alt.ukv { stroke: var(--motorway); stroke-dasharray: 2 2.5; }
.meteo .ws { fill: none; stroke: var(--motorway); stroke-width: 2; }
.meteo .gust { fill: none; stroke: var(--motorway); stroke-width: 1; stroke-dasharray: 3 2; }
.meteo .bar { fill: #3f86c8; }
.meteo .mslp { fill: none; stroke: #6a5a8c; stroke-width: 1.6; }
.meteo .cloud { fill: #9aa3a8; }
.meteo .barb { stroke: var(--ink); stroke-width: 1.1; fill: none; }
.meteo .zero { stroke: #6fa8dc; stroke-width: 1; stroke-dasharray: 2 2; }
.daystrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.dayc { background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; box-shadow: var(--shadow); }
.dayc .d { font: 900 12px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.dayc .dga { font: italic 500 12.5px var(--atlas-font); color: var(--ink2); display: block; }
.dayc .t { font: 900 20px var(--font); margin-top: 4px; }
.dayc .t .lo { font-size: 14px; color: var(--mut); font-weight: 800; margin-left: 4px; }
.dayc .m { font: 700 11px var(--mono-font); color: var(--ink2); margin-top: 3px; line-height: 1.5; }
.hrtable { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--card); }
.hrtable th, .hrtable td { padding: 5px 8px; border-bottom: 1px solid var(--line2); text-align: right; white-space: nowrap; }
.hrtable th { font: 800 9.5px var(--mono-font); letter-spacing: .1em; color: var(--mut); text-transform: uppercase; position: sticky; top: 0; background: var(--card); }
.hrtable td { font-family: var(--mono-font); font-weight: 700; }
.hrtable td:first-child, .hrtable th:first-child { text-align: left; }
.hrtable tr.day td { background: var(--line2); font-family: var(--font); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.tablewrap { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.twarn { margin: 14px 0 0; }

/* Light only: the network rule is never a dark page theme (no dark media-query
   override, no toggle). */
:root { color-scheme: light; }

@media (max-width: 620px) {
  .rule .sub { display: none; }
  .util .long { display: none; }
}