/* ==========================================================================
   GPS Tools (com_gpstools) · extension bridge · Studio community kit
   --------------------------------------------------------------------------
   Sections 1-5 are kit-owned and byte-identical in Vesper, Quorum and Mimeo.
   Edit them in template-studio/kit/community/tpl/media/css/ext/gpstools.css and
   run sync-kit.mjs for all three templates. Section 6 belongs to the template.

   Loaded by PageContext::useExtension('gpstools') on pages with a GPS island
   (option com_gpstools, or the com_gpstools.styles asset: {gpstrack} and
   {gpstracks} embeds) and by the chromes around mod_gpstools_* modules.
   Bootstrap stays ON: every GPS utility carries !important at 0,2,0.

   Islands: a PHP host div.gpstools-react-component[data-gps-component] holding a
   JS-made div.gpstools-react-wrapper.gpstools-scope[data-gps-theme]. GPS mirrors
   <html data-color-scheme> into html[data-gps-theme].

   The internal palette is hard-coded Tailwind stone/emerald with !important and
   cannot be re-themed; only the wrapper ground, text, borders, focus, tables
   and Leaflet read the space-separated RGB triplets mapped below. Relative
   colour syntax (rgb(from ...)) derives them from the hex tokens; browsers
   without it keep GPS's own neutral triplets (the @supports guard).
   ========================================================================== */

/* 1. Variable map ----------------------------------------------------------- */

@supports (color: rgb(from red r g b)) {
    /* 0,2,1 beats GPS's light (0,1,0) and dark (0,2,0) blocks; the tokens
       switch with the page scheme, so one block serves both. */
    html .gpstools-react-wrapper.gpstools-scope {
        --color-background: from var(--ec-bg) r g b;
        --color-surface: from var(--ec-surface) r g b;
        --color-foreground: from var(--ec-fg) r g b;
        --color-muted: from var(--ec-fg-2) r g b;
        --color-border: from var(--ec-border) r g b;
        --color-accent: from var(--ts-link) r g b;
        --color-accent-muted: from var(--ec-surface-2) r g b;
    }
}

html .gpstools-react-wrapper {
    --radius-sm: var(--ec-btn-radius);
    --radius-md: var(--ec-btn-radius);
    --radius-lg: var(--ec-radius);
}

/* Native controls and scrollbars follow the page scheme (GPS pins light). */
html[data-color-scheme="dark"] .gpstools-react-wrapper {
    color-scheme: dark;
}

/* Leaflet controls: maps.css is injected at the end of <head> at runtime and
   wins ties, hence the island-scoped selectors (0,2,1 and up). */
.gpstools-scope .leaflet-bar a,
.gpstools-scope .leaflet-bar a:hover {
    border-color: var(--ec-border);
    background-color: var(--ec-surface);
    color: var(--ec-fg);
}

.gpstools-scope .leaflet-bar a:hover {
    background-color: var(--ec-surface-2);
}

.gpstools-scope .leaflet-bar {
    border-color: var(--ec-border);
}

/* The ground under the tiles (seen while they load, offline, or at the edges):
   stock Leaflet paints #ddd in both schemes. */
.gpstools-scope .leaflet-container {
    background: var(--ec-surface-2);
}

/* 0,3,0: Leaflet's own .leaflet-container .leaflet-control-attribution (0,2,0,
   injected later) would keep its white chip under scheme-coloured text. */
.gpstools-scope .leaflet-container .leaflet-control-attribution {
    background: color-mix(in srgb, var(--ec-surface) 92%, transparent);
    color: var(--ec-fg);
}

.gpstools-scope .leaflet-container .leaflet-control-attribution a {
    color: var(--ts-link);
}

/* Dark tiles: PageContext adds body.ts-gps-lighttiles when the configured tile
   provider is a light one (anything but stadia_smooth_dark / carto_dark); in the
   dark scheme the raster tiles are inverted, the route overlay is not. */
html[data-gps-theme="dark"] .ts-gps-lighttiles .gpstools-scope .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9);
}

/* 2. Containment ------------------------------------------------------------ */

/* GPS's Preflight prints before Bootstrap Reboot's later rules only in part;
   inside the islands the app expects Preflight, so Reboot's link underline,
   heading sizes and list/paragraph margins are undone (0,0,1, loaded last). */
:where(.gpstools-scope) a {
    color: inherit;
    text-decoration: inherit;
}

:where(.gpstools-scope) :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

:where(.gpstools-scope) :is(p, ul, ol, dl, blockquote, figure) {
    margin: 0;
}

:where(.gpstools-scope) :is(ul, ol) {
    padding: 0;
    list-style: none;
}

/* Rich text in route and track descriptions: the reset above zeroes its margins; restore a flow rhythm. */
:where(.gpstools-scope) .prose > * + * {
    margin-block-start: 0.85em;
}

:where(.gpstools-scope) .prose :is(ul, ol) {
    padding-inline-start: 1.5em;
    list-style: disc;
}

:where(.gpstools-scope) .prose ol {
    list-style: decimal;
}

:where(.gpstools-scope) .prose blockquote {
    padding-inline-start: 1em;
    border-inline-start: 3px solid var(--ec-border);
}

/* A {gpstrack}/{gpsroute} embed in article text keeps the text's block rhythm (the island zeroes
   its margins; the Community Quiz embed has the same 1.5rem). */
.ts-prose .gpstools-react-component.gpstools-react-component {
    margin-block: 1.5rem;
}

/* 3. Leak neutralisers ------------------------------------------------------ */

/* None. GPS's global Preflight and .container are element-level or generic
   names: the template's own chrome declares these properties explicitly
   (contract 5.5 item 3), so nothing is re-declared here. */

/* 4. Default module markup -------------------------------------------------- */

/* mod_gpstools_tracks prints an inline <style> reading Bootstrap variables with
   Bootstrap-light fallbacks; the module root supplies them from the tokens so the
   list also reads right where Bootstrap is off. Its badges and empty alert are
   Bootstrap classes, themed by the bridge on Bootstrap pages. */
.gpstools-tracks {
    --bs-border-color: var(--ec-border);
    --bs-card-bg: var(--ec-surface);
    --bs-primary: var(--ts-link);
    --bs-secondary-color: var(--ec-fg-2);
}

.gpstools-tracks .gpstools-track-title {
    font-family: var(--ec-font-display);
    font-weight: 700;
    line-height: 1.3;
}

.gpstools-tracks .gpstools-track-title a {
    color: var(--ec-fg);
}

.gpstools-tracks .gpstools-track-title a:hover {
    color: var(--ts-link);
}

.gpstools-tracks .gpstools-track-thumbnail {
    overflow: clip;
    border-radius: var(--ec-btn-radius);
    background: var(--ec-surface-2);
}

.gpstools-tracks .gpstools-track-thumbnail img {
    display: block;
}

.gpstools-tracks-cards .gpstools-track-item,
.gpstools-tracks-grid .gpstools-track-item {
    border-radius: var(--ec-radius);
}

.gpstools-tracks-cards .gpstools-track-thumbnail {
    border-radius: 0;
}

.gpstools-tracks .gpstools-track-stats {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-variant-numeric: tabular-nums;
}

.gpstools-tracks .badge {
    border-radius: var(--ec-btn-radius);
}

/* The card grid keeps two columns down to 480px, too narrow for a sidebar or a
   phone column: one card per row below 40rem of viewport or inside a narrow
   column (auto-fill on the track width). */
.gpstools-tracks-cards,
.gpstools-tracks-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)) !important;
}

/* Bootstrap-off pages: the module's badges and empty state without Bootstrap. */
.ts-bs-off .gpstools-tracks .badge {
    display: inline-block;
    padding: 0.2em 0.55em;
    background: var(--ec-surface-2);
    color: var(--ec-fg);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
}

/* mod_gpstools_map: its inline <style> sets --gpsm-* on an ID and switches on
   html[data-color-scheme]; !important on the module class wins over both. */
.mod-gpstools-map {
    --gpsm-bg: var(--ec-surface-2) !important;
    --gpsm-surface: var(--ec-surface) !important;
    --gpsm-ink: var(--ec-fg) !important;
    --gpsm-ink-muted: var(--ec-fg-2) !important;
    --gpsm-border: var(--ec-border) !important;
    --gpsm-accent: var(--ts-link) !important;
}

/* mod_gpstools_categories: six of its icon classes do not exist in Joomla's
   Font Awesome 6 build (they render blank). The build prints
   [class*=" icon-"]::before { content: var(--fa) }, so the glyph is supplied
   as --fa (Font Awesome 6 Free solid code points). */
.mod-gpstools-categories .icon-bicycle {
    --fa: "\f206";
}

.mod-gpstools-categories .icon-hiking {
    --fa: "\f6ec";
}

.mod-gpstools-categories .icon-mountain {
    --fa: "\f6fc";
}

.mod-gpstools-categories .icon-walk {
    --fa: "\f554";
}

.mod-gpstools-categories .icon-building {
    --fa: "\f1ad";
}

.mod-gpstools-categories .icon-trending-up {
    --fa: "\e098";
}

.mod-gpstools-categories .mod-list-icon {
    font-weight: 900;
}

/* Its stylesheet hard-codes Bootstrap greys, a light hover and a blue focus
   ring, with a dark block at 0,4,1 (:root[data-color-scheme="dark"] ...);
   0,4,2 wins in both schemes wherever the module's CSS prints. */
html:root[data-color-scheme] .mod-gpstools-categories .mod-list a {
    min-block-size: 44px;
    border-radius: var(--ec-btn-radius);
    color: var(--ec-fg);
}

html:root[data-color-scheme] .mod-gpstools-categories .mod-list a:hover {
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
}

html:root[data-color-scheme] .mod-gpstools-categories .mod-list a .mod-list-icon {
    color: var(--ec-fg-2);
}

html:root[data-color-scheme] .mod-gpstools-categories .mod-list a:focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: -2px;
}

/* 5. Page frame ------------------------------------------------------------- */

/* The host keeps a 1rem radius and, in the dark scheme, a stone gradient behind
   the island (and before it mounts): both give way to the template ground and
   corner. */
html:root .gpstools-react-component {
    border-radius: var(--ec-radius);
    background: none;
}

html .gpstools-react-wrapper {
    border-radius: var(--ec-radius);
}

/* Focus: GPS draws a 1px accent outline on links and a 1px stone ring on its
   fields, and .outline-none / focus-visible:outline-none (0,2,0 !important)
   clear the outline. Every control and link in the island takes the template
   ring (0,4,1 !important; WCAG 2.4.7). */
html .gpstools-react-wrapper.gpstools-scope :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus) !important;
    outline-offset: 2px !important;
}

/* Keep that ring whole: the list header clips only its decor layers (inset-0,
   rounded like it), so it can show overflow; controls flush with another
   clipping box (the sort group) take the ring inside; a truncating meta
   row gets room for it without moving its text. */
html .gpstools-scope header.overflow-hidden {
    overflow: visible !important;
}

html .gpstools-react-wrapper.gpstools-scope .overflow-hidden:not(header, article) :is(a, button, input, select):focus-visible {
    outline-offset: calc(-1 * var(--ts-focus-width, 2px)) !important;
}

/* The card's map link is covered by its own positioned tiles: ring the card. */
html .gpstools-scope article.overflow-hidden:has(> a:first-child:focus-visible) {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
}

html .gpstools-scope .truncate:has(a) {
    margin: -6px;
    padding: 6px;
}

/* @ts-kit section-6 begin: 6. Design skin (template-owned; sync-kit.mjs keeps everything between these two markers) */
/* Mimeo (design spec §6.11): 2px corners, flat cards, Zilla titles and figures, the route in
   action blue on a paper casing over muted tiles, stone colours on the zine's tokens (AA). */
.gpstools-scope.gpstools-scope :is([class*="rounded-md"], [class*="rounded-lg"], [class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"], [class*="rounded-["]) {
    border-radius: 2px !important;
}

.gpstools-scope.gpstools-scope :is([class~="border-stone-100"], [class~="border-stone-200"]) {
    border-color: var(--ec-border) !important;
}

.gpstools-scope.gpstools-scope :is([class~="bg-white"], [class~="bg-white/95"]) {
    background-color: var(--ec-surface) !important;
}

.gpstools-scope.gpstools-scope [class*="shadow"]:not(:focus-visible) {
    box-shadow: none;
}

.gpstools-scope.gpstools-scope [class~="bg-gradient-to-br"] {
    background-image: none;
}

/* The tracks page head is the zine's page head (§9): the 2px ink rule, no tinted panel or
   dotted pattern, the display H1 on the page's left edge. */
.gpstools-scope.gpstools-scope .gpstools-tracks-page > header > .absolute {
    display: none;
}

.gpstools-scope.gpstools-scope .gpstools-tracks-page > header {
    overflow: visible;
    border-top: 2px solid var(--mm-rule-strong);
    border-radius: 0 !important;
}

.gpstools-scope.gpstools-scope .gpstools-tracks-page > header > .relative {
    padding: 1.125rem 0 0 !important;
}

.gpstools-scope.gpstools-scope .gpstools-tracks-page > header h1 {
    margin-block-end: var(--mm-s-3);
}

.gpstools-scope.gpstools-scope h1 {
    font-family: var(--ec-font-display);
    font-size: clamp(2.25rem, 1.4rem + 2.8vw, 4rem) !important;
    font-weight: 700;
    line-height: 1 !important;
    letter-spacing: -0.015em;
    text-shadow: 0.04em 0.03em 0 var(--mm-misreg);
}

.gpstools-scope.gpstools-scope :is(h2, h3) {
    font-family: var(--ec-font-display);
    font-weight: 700;
}

.gpstools-scope.gpstools-scope span[class~="tabular-nums"][class~="text-lg"] {
    font-family: var(--ec-font-display);
    font-size: clamp(1.25rem, 0.9rem + 2vw, 2rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.gpstools-scope.gpstools-scope .leaflet-overlay-pane path[stroke="#3B82F6"] {
    stroke: var(--mm-action);
}

.gpstools-scope.gpstools-scope .leaflet-overlay-pane path[stroke="#000000"] {
    stroke: var(--mm-map-route-casing);
}

.gpstools-scope.gpstools-scope .leaflet-tile-pane {
    filter: grayscale(0.85) sepia(0.12) contrast(0.9) brightness(1.04);
}

[data-color-scheme="dark"] .gpstools-scope.gpstools-scope .leaflet-tile-pane {
    filter: grayscale(1) invert(1) sepia(0.1) contrast(0.85) brightness(0.85);
}

.gpstools-scope.gpstools-scope .leaflet-bar,
.gpstools-scope.gpstools-scope .leaflet-bar a {
    border-radius: 2px;
    box-shadow: none;
}

html[data-gps-theme="dark"] .gpstools-scope.gpstools-scope :is([class~="dark:bg-stone-900"], [class~="dark:bg-stone-900/80"], [class~="dark:bg-stone-900/95"]) {
    background-color: var(--ec-surface) !important;
}

html[data-gps-theme="dark"] .gpstools-scope.gpstools-scope :is([class~="dark:bg-stone-800"], [class~="dark:bg-stone-800/50"], [class~="dark:bg-stone-800/30"]) {
    background-color: var(--ec-surface-2) !important;
}

html[data-gps-theme="dark"] .gpstools-scope.gpstools-scope :is([class~="dark:border-stone-800"], [class~="dark:border-stone-700"]) {
    border-color: var(--ec-border) !important;
}

/* Stone meta text (2.5:1) and the difficulty chips take AA pairs. */
.gpstools-scope.gpstools-scope :is(.text-stone-400, .text-stone-500, [class~="dark:text-stone-400"], [class~="dark:text-stone-500"]) {
    color: var(--ec-fg-2) !important;
}

/* Difficulty chips in two inks, no traffic-light ramp: easy on the tag pair, moderate the
   tag pair with an ink edge, hard an accent-ink stamp. The featured badge is the yellow
   highlighter with ink, not a solid orange square. */
.gpstools-scope.gpstools-scope :is(.bg-emerald-50[class*="text-emerald-"], .bg-amber-50[class*="text-amber-"]) {
    border: 1px solid transparent;
    background-color: var(--mm-tag-bg) !important;
    color: var(--mm-tag-fg) !important;
}

.gpstools-scope.gpstools-scope .bg-amber-50[class*="text-amber-"] {
    border-color: currentColor;
}

.gpstools-scope.gpstools-scope .bg-rose-50[class*="text-rose-"] {
    border: 1px solid currentColor;
    background-color: transparent !important;
    color: var(--mm-accent-ink) !important;
}

.gpstools-scope.gpstools-scope [class*="bg-amber-500"] {
    background-color: var(--mm-yellow) !important;
    color: var(--mm-yellow-ink) !important;
}

/* Two inks: stat icons print in ink, the start link in action blue (not emerald/rose/amber). */
.gpstools-scope.gpstools-scope :is(.text-emerald-500, .text-rose-500, .text-amber-500, .text-blue-500) {
    color: var(--ec-fg-2) !important;
}

.gpstools-scope.gpstools-scope :is(a, button)[class~="bg-emerald-50"][class*="text-emerald-"] {
    background-color: var(--mm-tag-bg) !important;
    color: var(--mm-tag-fg) !important;
}
/* The zine type scale: the lede at 17/1.55 under the H1, card titles Zilla 22, card meta (place,
   author, distance, climb, time) Courier 700 15. */
.gpstools-scope.gpstools-scope .gpstools-tracks-page > header p {
    margin-block-start: 0.75rem !important;
    font-size: 1.0625rem !important;
    line-height: 1.55 !important;
}

.gpstools-scope.gpstools-scope h3[class~="text-sm"] {
    font-size: 1.375rem !important;
    line-height: 1.2 !important;
}

.gpstools-scope.gpstools-scope div[class~="text-xs"] {
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem !important;
    font-weight: 700;
    line-height: 1.35 !important;
}

/* Track page: the road book's later steps dim to 85% (40% took their text under 3:1), the
   featured tag is the yellow highlighter with ink, the active chart tab the tag pair. */
.gpstools-scope.gpstools-scope [class~="opacity-40"] {
    opacity: 0.85 !important;
}

.gpstools-scope.gpstools-scope [class~="bg-amber-100"][class*="text-amber-"] {
    background-color: var(--mm-yellow) !important;
    color: var(--mm-yellow-ink) !important;
}

.gpstools-scope.gpstools-scope [class~="bg-primary-100"][class*="text-primary-"] {
    background-color: var(--mm-tag-bg) !important;
    color: var(--mm-tag-fg) !important;
}

/* Chart.js paints its ticks and axis titles in a fixed #666 (2.8:1 on the Night card): in the
   dark scheme the chart sits on a paper plate (5.5:1). */
[data-color-scheme="dark"] .gpstools-scope.gpstools-scope div:has(> canvas) {
    background-color: var(--mm-paper) !important;
}

/* The list thumbnails are pre-rendered full-colour maps with a pure-blue line: toned to the stock
   (the line shifts toward riso blue), and dimmed on the Night stock. */
.gpstools-scope.gpstools-scope img[src*="/com_gpstools/images/thumbnails/"] {
    filter: saturate(0.55) hue-rotate(-38deg);
}

[data-color-scheme="dark"] .gpstools-scope.gpstools-scope img[src*="/com_gpstools/images/thumbnails/"] {
    filter: saturate(0.55) hue-rotate(-38deg) brightness(0.8);
}
/* @ts-kit section-6 end */