/* ==========================================================================
   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) */
/* Forme: the route is marigold over an ink casing (design spec §2.3 map tokens). */
.gpstools-scope {
    font-stretch: var(--fm-disp-stretch);
}

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

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

/* The app's white (light) and stone (dark) panels take the venue surfaces in both schemes. */
.gpstools-scope :is([class~="bg-white"], [class*="bg-white/"], [class*="dark:bg-stone-900"], [class*="dark:bg-stone-950"]) {
    background-color: var(--ec-surface) !important;
}

.gpstools-scope :is([class*="dark:bg-stone-800"], [class~="bg-stone-50"], [class~="bg-stone-100"]):not([class~="bg-stone-900"]) {
    background-color: var(--ec-surface-2) !important;
}

/* The headline stat tile is drawn inverse (fg ground, page-ground text) in both schemes. */
.gpstools-scope [class~="bg-stone-900"][class*="dark:bg-stone-800"],
.gpstools-scope [class~="bg-stone-900"][class*="dark:bg-stone-800"] [class*="text-white"] {
    background-color: var(--ec-fg) !important;
    color: var(--ec-bg) !important;
}

.gpstools-scope [class~="bg-stone-900"][class*="dark:bg-stone-800"] [class*="text-white"] {
    background-color: transparent !important;
}

/* Its icon box stays a translucent chip on the tile ground, the glyph in the tile's text colour. */
.gpstools-scope [class~="bg-stone-900"][class*="dark:bg-stone-800"] [class*="bg-white/"] {
    background-color: color-mix(in srgb, var(--ec-bg) 14%, transparent) !important;
    color: var(--ec-bg) !important;
}

.gpstools-scope [class~="bg-stone-900"][class*="dark:bg-stone-800"] [class*="bg-white/"] svg {
    color: inherit !important;
}

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

.gpstools-scope [class*="from-stone-"][class*="bg-gradient-to-"] {
    background-image: none !important;
    background-color: var(--ec-surface) !important;
}

.gpstools-scope :is(section, div)[class*="rounded-2xl"][class*="border"] {
    border-radius: var(--fm-r-bubble);
}

/* Contrast (WCAG 1.4.3): the route cards' stone meta text (2.5:1 light, 3.7:1 dark) takes the
   quiet text token, and the difficulty chips (emerald, amber, rose: 3.6:1 and less on their
   tints) take the success, warning and danger pairs. */
.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;
}

.gpstools-scope .bg-emerald-50[class*="text-emerald-"] {
    background-color: var(--ts-success-bg) !important;
    color: var(--ts-success) !important;
}

.gpstools-scope .bg-amber-50[class*="text-amber-"] {
    background-color: var(--ts-warning-bg) !important;
    color: var(--ts-warning) !important;
}

.gpstools-scope .bg-rose-50[class*="text-rose-"] {
    background-color: var(--ts-danger-bg) !important;
    color: var(--ts-danger) !important;
}
/* Page head (§9): the tracks H1 is the Mona page title; type floor as on the forum: meta 15px,
   UI 16px, card titles 17px (the app sets its utilities !important). */
:root .gpstools-scope h1 {
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-h1-page) !important;
    font-weight: 700;
    line-height: 1.07 !important;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

:root .gpstools-scope :is(.text-xs, [class~="text-[9px]"], [class~="text-[10px]"], [class~="text-[11px]"], [class~="text-[12px]"]) {
    font-size: 0.9375rem !important;
    line-height: 1.33 !important;
}

:root .gpstools-scope .text-sm {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

:root .gpstools-scope .prose-sm {
    font-size: 1.0625rem !important;
    line-height: 1.6 !important;
}

:root .gpstools-scope h3.text-sm {
    font-size: 1.0625rem !important;
    font-weight: 700;
}
/* Chart.js is bundled in GPS Tools with its default #666 ticks and titles and no way to theme
   them (2.7:1 on the dark card). In the dark scheme every chart (track page, {gpstrack} embed) sits
   on a light plate (the cream ink, lightened) so the ticks read at 5:1 or better; on the track page
   the tab row above keeps the dark card. */
html[data-gps-theme="dark"] .gpstools-scope div:has(> canvas[style*="box-sizing"]) {
    margin: 0 1rem 1rem;
    border-radius: var(--ec-radius);
    background-color: color-mix(in srgb, var(--ec-fg) 60%, #fff);
}

html[data-gps-theme="dark"] .gpstools-scope div.p-4:has(> canvas) {
    margin: 0;
    border-radius: 0 0 var(--ec-radius) var(--ec-radius);
}
/* Contrast (1.4.3): the road book dims the waypoints away from the current one to 40% and the
   stat units to 60% (!important utilities), which takes their text under 4.5:1: the dim stays as
   a lighter step, the units print at full strength. */
html .gpstools-scope .opacity-40[class*="scale-[0.97]"] {
    opacity: 0.85 !important;
}

html .gpstools-scope span.opacity-60 {
    opacity: 1 !important;
}
/* @ts-kit section-6 end */