/* =============================================================================
   css2/timenews-map-card.css — the LIGHT map card for Time News and articles
   (markup: templates2/timenews-map-card.php, script: js2/timenews-map-card.js).
   The box itself is the Time News template's .tn-card; this file adds the map's own parts.
   Overrides of Leaflet's own rules win by specificity (scoped under .tn-map-box), never !important —
   Leaflet's stylesheet is appended to <head> when the map loads.
   ============================================================================= */

.tn-map { order: 5; }                          /* phones: after Plan a call, before More articles / the latest news */

/* Top bar: the title on the left; the open-clock chips, Slim / Detailed and the full-map link on the right */
.tn-map-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.tn-map-head .tn-card-title { margin: 0; }
.tn-map-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.tn-map-chips { display: contents; }           /* the chips line up with the two buttons */
.tn-map-tool {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: transparent;
  color: var(--mid); cursor: pointer; text-decoration: none;
}
.tn-map-tools .tn-map-tool:hover { border-color: var(--accent2); color: var(--accent2); }   /* (0,3,0): Slim / Detailed */
/* The way into the full map — the card's one call to action, in the site's link colour; on hover its border
   turns solid and it fills lightly. :link / :visited (0,3,1) beat the site's own a / a:visited, and the
   hover (0,4,1) beats them both — the plain hover above (0,3,0) lost to them, so the link never changed
   (review item 13, 2026-10-24). Light: (0,4,1) and (0,5,1). */
.tn-map-tools a.tn-map-full:link, .tn-map-tools a.tn-map-full:visited { color: var(--accent2); border-color: rgba(129,140,248,.45); }
.tn-map-tools a.tn-map-full:link:hover, .tn-map-tools a.tn-map-full:visited:hover { border-color: currentColor; background: rgba(129,140,248,.12); }
[data-theme="light"] .tn-map-tools a.tn-map-full:link,
[data-theme="light"] .tn-map-tools a.tn-map-full:visited { color: #0404bf; border-color: rgba(4,4,191,.35); }
[data-theme="light"] .tn-map-tools a.tn-map-full:link:hover,
[data-theme="light"] .tn-map-tools a.tn-map-full:visited:hover { border-color: currentColor; background: rgba(4,4,191,.06); }

/* Chips: one per open city clock — its name flies the map there, × closes the clock */
.tn-map-chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 20px;
  border: 1px solid var(--border); background: rgba(255,255,255,.06);
  font-family: var(--font-ui); font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--mid); white-space: nowrap;
}
[data-theme="light"] .tn-map-chip { background: rgba(0,0,0,.03); }
.tn-map-chip button { font: inherit; color: inherit; background: none; border: 0; padding: 2px 4px; cursor: pointer; border-radius: 10px; }
.tn-map-chip .tn-map-chip-x { font-size: 14px; line-height: 1; opacity: .55; }
/* Hover and keyboard focus alike: the × at full strength — at .55 its focus ring was faded too (double check
   item 5, 2026-10-24). (0,2,1) beats the × rule's (0,2,0). */
.tn-map-chip button:hover, .tn-map-chip button:focus-visible { color: var(--accent2); opacity: 1; }

/* The map */
.tn-map-box { height: 360px; border-radius: 10px; overflow: hidden; z-index: 0; }   /* z-index 0: Leaflet's panes stay inside the card */
@media (max-width: 599px) { .tn-map-box { height: 320px; } }

/* ── Map colours (user, 2026-10-24) ──
   LIGHT: white and red — Berlinera's single-colour look, in the site's own red (the fast links' #c2185b).
   Esri's light grey map recoloured on the tile layer only, so the pins and clocks keep their own
   colours: the land white, the sea pale pink, the names and borders raspberry.
   How: turn the greys round (invert), tint them with raspberry's opposite colour (sepia, saturate,
   hue-rotate), turn them back (invert) — white stays white, every darker grey becomes a shade of
   raspberry. The numbers were fitted to Esri's own greys: land #ececec → #ffffff, sea #d0ccd4 → #eed9e0,
   names #303030 → #8e1341. They give the same colours whether a browser rounds off between the steps
   or only at the end (checked).
   ⚠ Standard CSS colour steps ON PURPOSE, not an SVG colour matrix (filter: url(#…)), which was the
   first version: Safari ignores an SVG filter on a moving layer, and map tiles move (WebKit bug 184601,
   open since 2018) — iPhones would have got the plain grey map. The steps measured the same as the
   matrix in Chrome, within 1–2 shades.
   Colour steps only, no blur, and only on the map, which loads late — so this stays clear of the speed
   rules in CLAUDE.md.
   DARK: Esri's dark grey map as it is, with the site's blue pins. */
[data-theme="light"] .tn-map-box .leaflet-tile-pane {
  filter: contrast(.8) brightness(1.19) invert(1) sepia(.89) saturate(2) hue-rotate(105.5deg) brightness(.97) invert(1);
}
/* The map's own background = the sea's colour (light: what the filter makes of Esri's sea grey #d0ccd4;
   dark: Esri's dark sea), so a map zoomed out past the world's top or bottom edge — a phone showing
   two far-apart cities — just shows more sea, and so does a map whose tiles are still loading */
.tn-map-box.leaflet-container { background: #202024; font-family: var(--font-ui); }
[data-theme="light"] .tn-map-box.leaflet-container { background: #eed9e0; }

/* Pins — the article's cities: a round pin, the one strong colour; every other city: a quieter small
   dot, still a clock one click away. Both are centred in a 24px tap area (the script's iconSize).
   (0,2,0) beats Leaflet's .leaflet-marker-icon { display: block } (0,1,0) by specificity, not file order —
   the dots' rule was a bare .tn-map-dot (0,1,0), a tie only file order won (review item 13, 2026-10-24). */
.tn-map-box .tn-map-pin, .tn-map-box .tn-map-dot { display: flex; align-items: center; justify-content: center; }
.tn-map-pin span { display: block; width: 14px; height: 14px; border-radius: 50%; background: #a5b4fc; border: 2px solid #ffffff; box-shadow: 0 0 0 4px rgba(165,180,252,.3), 0 2px 10px rgba(0,0,0,.55); box-sizing: border-box; }
.tn-map-dot span { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(129,140,248,.6); border: 1.5px solid rgba(255,255,255,.4); box-shadow: 0 1px 3px rgba(0,0,0,.45); box-sizing: border-box; }
[data-theme="light"] .tn-map-pin span { background: #c2185b; box-shadow: 0 0 0 4px rgba(194,24,91,.22), 0 2px 8px rgba(0,0,0,.25); }
[data-theme="light"] .tn-map-dot span { background: #dd80a5; border-color: #ffffff; box-shadow: 0 0 0 1px rgba(194,24,91,.18); }

/* On-map buttons — the article's city, World view (bottom left), My location (bottom right) — like the main map's */
.tn-map-box .tn-map-btn {
  display: block; font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
  padding: 4px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(7,7,14,.75); border: 1px solid rgba(255,255,255,.18); color: rgba(241,240,249,.85);
}
.tn-map-box .tn-map-btn:hover { background: rgba(7,7,14,.92); border-color: rgba(129,140,248,.5); color: #f1f0f9; }
[data-theme="light"] .tn-map-box .tn-map-btn { background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.16); color: #3a3a5c; }
[data-theme="light"] .tn-map-box .tn-map-btn:hover { background: #ffffff; border-color: rgba(194,24,91,.45); color: #3a3a5c; }
/* (the colour again, on purpose: otherwise the dark hover's near-white (0,3,0) and the light rule above (0,3,0)
   tie, and only file order kept the light text dark — double check item 4, 2026-10-24) */
/* Dark: Leaflet's white + / − box in the card's dark button style.
   (0,3,1) beats Leaflet's .leaflet-touch .leaflet-bar a (0,2,1). */
[data-theme="dark"] .tn-map-box .leaflet-bar { border-color: rgba(255,255,255,.18); }
[data-theme="dark"] .tn-map-box .leaflet-bar a { background: rgba(7,7,14,.75); color: rgba(241,240,249,.85); border-bottom-color: rgba(255,255,255,.12); }
[data-theme="dark"] .tn-map-box .leaflet-bar a:hover { background: rgba(7,7,14,.92); color: #f1f0f9; }
[data-theme="dark"] .tn-map-box .leaflet-bar a.leaflet-disabled { color: rgba(241,240,249,.3); }

/* The map's credit — small print under the map (review item 12; the text is in the PHP file). The site's
   12px floor, its quiet grey, right-aligned like a map credit. The links in the same grey, underlined:
   (0,2,1) / (0,3,1) beat the site's own a / a:visited / a:hover by specificity. */
.tn-map-credit { margin: 6px 0 0; font-family: var(--font-ui); font-size: 12px; line-height: 1.4; color: var(--dim); text-align: right; }
.tn-map .tn-map-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tn-map .tn-map-credit a:hover { color: var(--accent2); }

/* Clock popups — the main map's look (css2/city-map-card.css), scoped to this map */
.tn-map-box .leaflet-popup-content-wrapper {
  background: rgba(12,12,26,.93); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.55); color: var(--text); padding: 1px;
}
.tn-map-box .leaflet-popup-tip { background: rgba(12,12,26,.93); }
.tn-map-box .leaflet-popup-content { margin: 10px 14px; font-family: var(--font-ui); line-height: 1.3; }
[data-theme="light"] .tn-map-box .leaflet-popup-content-wrapper { background: rgba(255,255,255,.97); border-color: rgba(0,0,0,.10); box-shadow: 0 4px 18px rgba(0,0,0,.18); }
[data-theme="light"] .tn-map-box .leaflet-popup-tip { background: rgba(255,255,255,.97); }
/* The clock's ×. (0,3,1) beats Leaflet's .leaflet-container a.leaflet-popup-close-button (0,2,1); hover AND
   keyboard focus (0,4,1) beat Leaflet's own :hover, :focus (0,3,1) — focus used to tie with the plain rule, which
   only file order won, and Leaflet's dim grey #585858 would have made a focused × vanish on the dark clock
   (review item 13, 2026-10-24). Light: (0,4,1) and (0,5,1). */
.tn-map-box.leaflet-container a.leaflet-popup-close-button {
  top: 5px; right: 8px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 300; line-height: 1; color: rgba(241,240,249,.35); background: none; padding: 0;
}
.tn-map-box.leaflet-container a.leaflet-popup-close-button:hover,
.tn-map-box.leaflet-container a.leaflet-popup-close-button:focus { color: rgba(241,240,249,.85); }
[data-theme="light"] .tn-map-box.leaflet-container a.leaflet-popup-close-button { color: rgba(30,30,60,.35); }
[data-theme="light"] .tn-map-box.leaflet-container a.leaflet-popup-close-button:hover,
[data-theme="light"] .tn-map-box.leaflet-container a.leaflet-popup-close-button:focus { color: rgba(30,30,60,.75); }