/* ═══════════════════════════════════════════════════════════════════════════
   massar_theme.css — the light palette.

   Every page was built dark, on a shared set of surface tokens: --night for
   the page, --night-2 for a card, --night-3 for something raised on top of it,
   --moon for text, --muted for secondary text, --line for borders. Light mode
   redefines exactly those tokens and nothing else, so a page does not need to
   know a second theme exists.

   `data-theme` lives on <html> and is written before the first paint by the
   inline script in each page's head — without that the dark background would
   flash for a frame on every load.

       (unset)  → follow the operating system
       "light"  → forced light
       "dark"   → forced dark

   The green stays green in both, but a mid green on white is too pale to read,
   so text-weight greens step down while fills keep their brightness.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
  /* surfaces, lightest to most raised */
  --night:   #F6F9F7;
  --night-2: #FFFFFF;
  --night-3: #EDF3EF;

  /* text */
  --moon:  #0C1512;
  --muted: #5A6B63;

  /* raw channels, for the places that need an alpha */
  --night-rgb:   246,249,247;
  --night-2-rgb: 255,255,255;
  --night-3-rgb: 237,243,239;
  --moon-rgb:    12,21,18;

  /* borders and separators */
  --line: rgba(22,163,74,.20);

  /* accents — the names differ per page, so all of them are covered */
  --purple:       #16A34A;
  --purple-2:     #15803D;
  --purple-l:     #15803D;
  --purple-light: #15803D;
  --green:        #16A34A;
  --green-2:      #15803D;
  --green-l:      #15803D;
  --sun:          #16A34A;
  --sky:          #0284C7;
  --teal:         #0284C7;
  --lime:         #4D7C0F;
  --gold:         #B45309;
  --danger:       #DC2626;

  /* pale accents, darkened so they survive a white background */
  --soft:  #15803D;
  --warn:  #B45309;
  --fresh: #15803D;
  --info:  #0369A1;
  --peach: #B45309;

  /* the rest of the palette, darkened for a white ground */
  --sand:   #A65A26;
  --slate:  #475569;
  --violet: #6D28D9;
  --aqua:   #0F766E;
  --dsoft:  #B91C1C;
  --ember:  #C2410C;

  /* difficulty pills, read by lvlColor() at runtime */
  --map-bg: #E8EDE9;   /* behind the tiles while they load */
  --lvl-easy: #15803D;
  --lvl-mid:  #B45309;
  --lvl-hard: #B91C1C;

  /* route difficulty — same hues, darkened enough to read on white */
  --easy:  #0284C7;
  --mid:   #B45309;
  --hard:  #15803D;
  --mtb-e: #15803D;
  --mtb-m: #1D4ED8;
  --mtb-h: #B91C1C;

  color-scheme: light;
}

/* ── things that cannot be expressed as a token swap ──────────────────────── */

:root[data-theme="light"] body { background: var(--night); color: var(--moon); }

/* Translucent bars were written as literal rgba of the dark page colour, so a
   token cannot reach them. They are relisted here against the light page. */
:root[data-theme="light"] nav,
:root[data-theme="light"] .nav,
:root[data-theme="light"] header.site {
  background: rgba(246,249,247,.92) !important;
  border-bottom-color: var(--line) !important;
}

/* A dark map is wrong on a light page: switch the raster inversion off and let
   the vector style pick its own light variant. */
:root[data-theme="light"] .leaflet-tile-pane { filter: none !important; }

/* Shadows on white have to be far lighter or every card looks bruised. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .rcard,
:root[data-theme="light"] .feat-card,
:root[data-theme="light"] .stat-item {
  box-shadow: 0 6px 20px rgba(13,21,18,.06) !important;
}

/* the warm tone used for a rider's name; readable on white */
:root{
  --sand:#D9944B;
  --tier-bronze:#D9944B; --tier-silver:#CBD5E1; --tier-gold:#FBBF24;
}
:root[data-theme="light"]{
  --tier-bronze:#A65A26; --tier-silver:#5A6B7A; --tier-gold:#A16207;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tier-bronze:#D9944B; --tier-silver:#CBD5E1; --tier-gold:#FBBF24;
  }
}

/* ── the switch itself ────────────────────────────────────────────────────── */
.mm-theme-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--moon);
  border-radius: 9px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: border-color .2s, transform .2s;
  flex: none;
}
.mm-theme-btn:hover { border-color: var(--purple, #16A34A); transform: translateY(-1px); }
.mm-theme-btn:focus-visible { outline: 3px solid var(--purple, #16A34A); outline-offset: 2px; }

/* A theme change repaints most of the page at once; a short tint transition
   stops that reading as a flicker. Anyone who has asked for less motion is
   left alone. */
@media (prefers-reduced-motion: no-preference) {
  body, .card, .rcard, nav { transition: background-color .25s ease, color .25s ease; }
}

/* ── contrast repairs that apply to BOTH themes ───────────────────────────── */
/* White text on the mid green measured 2.28:1. One step darker reaches 3.3:1
   and is hard to tell apart; the pale green is kept for large display type,
   where the threshold is lower. */
.btn-primary, .nav-join, .nav-join:hover, .auth-submit, .wall-btn-main, .join-btn,
.hbtn.active, .chip.active, .fpill.active, .fchip.active,
.ai-send, .preset-pill.active, button.primary, .cta, .btn-join {
  background: var(--purple-2, #16A34A) !important;
}

/* Map pins are emoji on a coloured plate. They do not take the page's text
   colour, and forcing the theme's near-black onto them only affects the rare
   text-presentation glyph — so they stay light in both themes. */
.leaflet-marker-icon, .leaflet-marker-icon * { color: #F1F5F9; }

/* A muted grey on a muted panel measured 1.3:1 in dark and 1.1:1 in light —
   the colour was chosen against the page, not against the card it sits on.
   Secondary text inside a raised panel steps up to the body colour. */
/* Secondary text inside a tinted panel was coloured against the page, not the
   panel, and fell to 1.3:1. Inside a panel it steps up to the body colour. */
.cta p, .card p[style*="--muted"], .empty p, .empty-state p,
[class*="empty"] p { color: var(--moon) !important; opacity: .74; }

/* Every green call-to-action, however it is spelled across the pages. */
nav button, .drawer button, #navDrawer button, .nav-cta {
  background-color: var(--purple-2, #16A34A);
}

/* ── first-visit theme choice ───────────────────────────────────────────────
   Shown once, before the rider has a preference of their own. It paints its
   own colours rather than the page's tokens, because the whole point is to
   show both grounds side by side while the page behind it is still in one. */
.mm-theme-ask{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 20px) 20px
          calc(env(safe-area-inset-bottom,0px) + 20px);
  background:rgba(4,8,6,.72); backdrop-filter:blur(8px);
}
.mm-ask-box{
  background:var(--night-2,#0E1020); color:var(--moon,#F1F5F9);
  border:1px solid var(--line,rgba(34,197,94,.18));
  border-radius:16px; padding:26px 24px; width:100%; max-width:430px;
  text-align:center; box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.mm-ask-box h2{
  margin:0 0 6px; font-size:1.12rem; font-weight:700;
  font-family:'Noto Kufi Arabic','Cairo',system-ui,sans-serif;
}
.mm-ask-box p{
  margin:0 0 20px; font-size:.83rem; color:var(--muted,#94A3B8);
  font-family:'Noto Kufi Arabic','Cairo',system-ui,sans-serif;
}
.mm-ask-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:360px){ .mm-ask-row{grid-template-columns:1fr} }
.mm-ask-opt{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:16px 10px; cursor:pointer; border-radius:13px;
  background:none; border:1.5px solid var(--line,rgba(34,197,94,.22));
  color:inherit; font-family:'Noto Kufi Arabic','Cairo',system-ui,sans-serif;
  transition:border-color .18s, transform .18s;
}
.mm-ask-opt:hover{ border-color:var(--purple,#22C55E); transform:translateY(-2px) }
.mm-ask-opt:focus-visible{ outline:3px solid var(--purple,#22C55E); outline-offset:2px }
.mm-ask-opt b{font-size:.95rem; font-weight:700}
.mm-ask-opt small{font-size:.7rem; color:var(--muted,#94A3B8); line-height:1.5}

/* a miniature page, so the choice is seen rather than read */
.mm-swatch{
  width:76px; height:52px; border-radius:8px; margin-bottom:8px;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:9px; border:1px solid rgba(128,128,128,.28);
}
.mm-swatch i{display:block; height:5px; border-radius:2px}
.mm-sw-light{background:#F6F9F7}
.mm-sw-light i:nth-child(1){background:#0C1512; width:82%}
.mm-sw-light i:nth-child(2){background:#9FB0A6; width:62%}
.mm-sw-light i:nth-child(3){background:#16A34A; width:44%}
.mm-sw-dark{background:#07080F}
.mm-sw-dark i:nth-child(1){background:#F1F5F9; width:82%}
.mm-sw-dark i:nth-child(2){background:#5A6B7A; width:62%}
.mm-sw-dark i:nth-child(3){background:#22C55E; width:44%}

/* ── touch targets ──────────────────────────────────────────────────────────
   Measured at phone width: thirteen "View all →" links were 56×15 px, the
   route sort was 190×20, the theme switch 34×34. Apple asks for 44×44 and
   Android for 48 — a 15 px target is a mis-tap waiting to happen, and a
   mis-tap on a phone reads as the site being broken.

   Only the hit area grows. Padding would move the text and reshuffle every
   layout that was just checked, so the extra area comes from a transparent
   overlay on the element itself, which changes nothing that is drawn. */
@media (pointer: coarse) {
  a[href], button, select, summary, [role="button"] {
    position: relative;
  }
  a[href]::after, button::after, select::after,
  summary::after, [role="button"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top:  calc((44px - 100%) / -2);
    bottom: calc((44px - 100%) / -2);
    min-height: 44px;
    pointer-events: auto;
  }
  /* Elements already big enough, and any whose ::after the page already uses
     for a visual effect, are left exactly as they were. */
  a[href]:has(> img)::after, .rcard::after, .feat-card::after, .stat-item::after,
  .shop-card::after, .ob-step::after, .mm-ask-opt::after, .opt::after,
  a[href].btn-primary::after, a[href].btn-outline::after { content: none; }

  /* A <select> renders its own control and ignores ::after, so this one has
     to grow for real. Padding, not height, so the text stays centred. */
  select { min-height: 42px; padding-block: 10px; }

  .mm-theme-btn { width: 40px; height: 40px; }
}

/* ── phones, measured — tests/mobile_audit.mjs ─────────────────────────────
   Everything below came out of opening every page at 390 px with touch. */

/* The wordmark is SVG text, and SVG text inherits the page's direction: on the
   Arabic pages "MASSAR" was laid out right-to-left from its anchor and ran off
   the edge, leaving "SAR". It was also filled a fixed near-white, so on the
   light theme it vanished. Always left-to-right, always the text colour. */
.nav-logo svg, .footer-brand svg, #loader svg { direction: ltr; }
svg text[fill="#F1F5F9"], .nav-logo svg text[fill="currentColor"] { fill: var(--moon); }

@media (pointer: coarse) {
  /* iOS zooms the whole page into any field under 16 px, and stays zoomed. */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  select, textarea { font-size: 16px !important; }

  /* Leaflet's touch buttons are 30 px and the route pins 14–16 px dots.
     The pins keep their look; only the area that answers a tap grows. */
  /* leaflet.css loads after this file and sets 30 px, hence !important */
  .leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; }
  .leaflet-marker-icon::after { content: ""; position: absolute; inset: -12px; }
}

/* A floor for the small capital labels: 8.8–10.6 px does not read at arm's
   length on a phone. */
@media (max-width: 600px) {
  .type-badge, .rstats small, #sheetHint, .nav-label, .nav-presets-label, .tab,
  .stat-label, .hero-badge, .lb-title, .aw .ds, .eyebrow, .crumb, .crumb a,
  .type-pill, .stat small, .calc-row label, .rate-your label, .panel > h2,
  .sum small, .rdate, .m-item { font-size: 11px !important; }
  /* a route's distance and climb are what a rider opens the card for */
  .rstats b { font-size: 13px !important; }
}

/* ── Arabic is never letter-spaced ──────────────────────────────────────────
   Arabic letters join; spacing them breaks the word apart. Many labels here
   were styled for English capitals (Space Mono, wide tracking) and kept that
   tracking when the dictionary turned them Arabic. In Arabic mode nothing is
   tracked — except the SVG logo, which is drawn, not written. */
html[lang="ar"] body :not(svg):not(svg *) { letter-spacing: 0 !important; }


/* ── Arabic labels in Cairo ─────────────────────────────────────────────────
   These labels were designed in Space Mono, which has no Arabic: the letters
   fall through to Cairo (next in each stack), but the spaces stay monospace
   and open wide gaps between the words. In Arabic mode the whole label is set
   in Cairo instead. */
html[lang="ar"] :is(.eyebrow, .head-eyebrow, .section-eyebrow, .hero-badge, #tpLabel, .m-item, .crumb,
  .type-pill, .type-badge, .ride-title, .ride-stat-label, .tab, label) {
  font-family: 'Cairo', sans-serif !important;
}