/* ============================================================
   מסלולים · shared design system
   ============================================================ */
:root{
  --bg:#f6f8f5; --surface:#ffffff; --surface-2:#eef2ec; --surface-3:#e3e9e1;
  --ink:#14201a; --ink-2:#4b5b51; --ink-3:#5f7168;   /* ink-3 darkened for WCAG 4.5:1 on light surfaces */
  --line:#dde4dc; --line-2:#c9d4c8;

  --brand:#166534; --brand-ink:#14532d; --brand-soft:#e2f2e6; --brand-2:#22874a;
  --sand:#8a5b0d; --sand-soft:#fbf0da;               /* darkened for 4.5:1 as pill text */
  --sky:#1d6fa8; --sky-soft:#e2eff9;
  --pay:#b03f38; --pay-soft:#fbe9e7;

  --d1:#15803d; --d1s:#e3f5e8;   /* קל */
  --d2:#4d9a2a; --d2s:#edf7e2;   /* קל+ */
  --d3:#b4791a; --d3s:#fbf0da;   /* בינוני */
  --d4:#c2560a; --d4s:#fdeadd;   /* בינוני+ */
  --d5:#b03f38; --d5s:#fbe9e7;   /* מאתגר */

  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(16,32,20,.04), 0 8px 24px -14px rgba(16,32,20,.22);
  --shadow-md:0 2px 6px rgba(16,32,20,.06), 0 16px 40px -18px rgba(16,32,20,.3);
  --shadow-lg:0 24px 60px -24px rgba(16,32,20,.42);
  --maxw:1400px;
  --hdr:60px;
  /* Furball paw mark, used as a mask so the badge tints it via background */
  --paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='24' cy='47' rx='10' ry='13.5' transform='rotate(-20 24 47)'/%3E%3Cellipse cx='42.5' cy='33' rx='10.5' ry='14.5'/%3E%3Cellipse cx='62.5' cy='33' rx='10.5' ry='14.5'/%3E%3Cellipse cx='80' cy='47' rx='10' ry='13.5' transform='rotate(20 80 47)'/%3E%3Cpath d='M52 52c11 0 20 6.5 23.5 15.2 3 7.4-1.3 15.6-9 17.9-5 1.5-9.6-1.1-14.5-1.1s-9.5 2.6-14.5 1.1c-7.7-2.3-12-10.5-9-17.9C32 58.5 41 52 52 52Z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c120e; --surface:#141d17; --surface-2:#1b261f; --surface-3:#233029;
    --ink:#e7efe9; --ink-2:#a6b6ac; --ink-3:#7a8b80;
    --line:#26332b; --line-2:#33443a;

    --brand:#4ade80; --brand-ink:#86efac; --brand-soft:#12301f; --brand-2:#34d399;
    --sand:#e0a95c; --sand-soft:#31260f;
    --sky:#6fb3e8; --sky-soft:#12283b;
    --pay:#f08a83; --pay-soft:#361f1d;

    --d1:#5ec97f; --d1s:#12301d;
    --d2:#8fd45f; --d2s:#1c2d13;
    --d3:#e0a95c; --d3s:#31260f;
    --d4:#f0925c; --d4s:#38210f;
    --d5:#f08a83; --d5s:#361f1d;

    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.7);
    --shadow-md:0 2px 8px rgba(0,0,0,.4), 0 18px 44px -20px rgba(0,0,0,.8);
    --shadow-lg:0 26px 64px -26px rgba(0,0,0,.9);
  }
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 12px)}
body{
  font-family:'Heebo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:var(--brand-ink); text-decoration:none}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select{font-family:inherit; color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.narrow{max-width:1080px}
/* Numbers and ranges must be bidi-isolated inside RTL text. Without this a
   perfectly correct "90–176" renders as "176–90": the digits are LTR runs but
   the en-dash between them is neutral, so it takes the paragraph's RTL
   direction and the two runs swap. Applies to every number-bearing cell. */
.num{font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; display:inline-block}
.met b, .tnum, .rcard .mets b, .rng-val span, .profax span, .nb .n,
.hstat b, .fcard .mets b, .chip .k{
  font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;
}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ============ header ============ */
.hdr{position:sticky; top:0; z-index:1100; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.5); border-bottom:1px solid var(--line)}
.hdr-in{display:flex; align-items:center; gap:16px; height:var(--hdr); max-width:var(--maxw); margin:0 auto; padding:0 20px}
.brand{display:flex; align-items:center; gap:9px; white-space:nowrap; color:var(--ink)}
.brand-badge{width:30px; height:30px; border-radius:9px; background:#166534; flex:none; position:relative;
  box-shadow:0 2px 7px -2px rgba(22,101,52,.55)}
.brand-badge::before{content:""; position:absolute; inset:0; margin:auto; width:64%; height:64%; background:#fff;
  -webkit-mask:var(--paw) center/contain no-repeat; mask:var(--paw) center/contain no-repeat}
.brand-word{font-family:"SF Pro Rounded","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  font-weight:900; font-size:1.24rem; letter-spacing:-.03em; color:var(--ink); line-height:1}
.brand-tag{font-size:.6rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--brand-ink);
  background:var(--brand-soft); padding:3px 7px; border-radius:6px; align-self:center}
.brand:hover .brand-word{color:var(--brand-ink)}
.hdr nav{display:flex; gap:2px; margin-inline-start:auto; overflow-x:auto; scrollbar-width:none}
.hdr nav::-webkit-scrollbar{display:none}
.hdr nav a{padding:7px 13px; border-radius:99px; color:var(--ink-2); font-size:.9rem; font-weight:600; white-space:nowrap; transition:.18s}
.hdr nav a:hover{background:var(--surface-2); color:var(--ink)}
.hdr nav a[aria-current="page"]{background:var(--brand); color:#fff}
@media (prefers-color-scheme:dark){ .hdr nav a[aria-current="page"]{color:#04210f} }

/* ============ legal / content pages ============ */
.legal{max-width:820px; margin:0 auto; padding:0 20px 70px}
.legal h1{font-size:clamp(1.7rem,4vw,2.3rem); font-weight:900; letter-spacing:-.035em; padding:30px 0 4px}
.legal .updated{color:var(--ink-3); font-size:.85rem; margin-bottom:14px}
.legal .lead{font-size:1.05rem; color:var(--ink); font-weight:600; line-height:1.7; margin-bottom:10px}
.legal h2{font-size:1.16rem; font-weight:900; letter-spacing:-.02em; margin:26px 0 8px}
.legal h3{font-size:.98rem; font-weight:800; margin:16px 0 5px; color:var(--ink)}
.legal p{color:var(--ink-2); line-height:1.75; margin-bottom:10px}
.legal ul{list-style:none; display:flex; flex-direction:column; gap:7px; margin:8px 0 12px}
.legal li{padding-inline-start:18px; position:relative; color:var(--ink-2); line-height:1.7}
.legal li::before{content:"▸"; position:absolute; inset-inline-start:0; color:var(--brand); font-size:.72rem; top:3px}
.legal a{color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--surface-2); padding:1px 5px; border-radius:5px}
/* CSS-only language switch, driven by <html lang> which app.js sets */
.lang{display:none}
html[lang="he"] .lang-he, html[lang="en"] .lang-en{display:block}
/* high-visibility safety callout */
.safety-box{background:var(--pay-soft); border:1px solid color-mix(in srgb,var(--pay) 30%, transparent);
  border-radius:14px; padding:16px 20px 6px; margin:16px 0 22px}
.safety-box h2{margin-top:6px; color:var(--pay)}
.safety-box h2:first-child{margin-top:0}
/* footer legal links */
.footlinks{display:flex; gap:6px 14px; flex-wrap:wrap; margin-top:9px; font-size:.82rem}
.footlinks a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}
.footlinks a:hover{color:var(--brand-ink)}

/* ============ buttons ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:.87rem; font-weight:700;
  padding:9px 16px; border-radius:99px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); transition:.18s; white-space:nowrap}
.btn:hover{background:var(--surface-2); color:var(--ink); border-color:var(--line-2)}
.btn.primary{background:var(--brand); color:#fff; border-color:transparent}
@media (prefers-color-scheme:dark){ .btn.primary{color:#04210f} }
.btn.primary:hover{filter:brightness(1.1); background:var(--brand)}
.btn.sm{padding:6px 12px; font-size:.8rem}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ============ pills / badges ============ */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:.73rem; font-weight:800; padding:3px 10px; border-radius:99px;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line); white-space:nowrap}
.pill[hidden]{display:none}   /* [hidden] alone is defeated by display:inline-flex */
/* Difficulty is deliberately NOT red/green/blue/black coded. In Israel those are
   trail-BLAZE colours (route identifiers with no difficulty meaning), so a
   traffic-light scale here would read as "the black trail" to every local.
   Ordinality is carried by a bar meter + text instead. */
.pill.diff{background:var(--surface-2); color:var(--ink-2); border-color:var(--line); gap:6px}
.meter{display:inline-flex; align-items:flex-end; gap:1.5px; height:11px}
.meter i{width:3px; border-radius:1px; background:var(--line-2); display:block}
.meter i:nth-child(1){height:4px} .meter i:nth-child(2){height:6px}
.meter i:nth-child(3){height:8px} .meter i:nth-child(4){height:9.5px}
.meter i:nth-child(5){height:11px}
.meter i.on{background:var(--ink-2)}
.pill.diff.lv4 .meter i.on, .pill.diff.lv5 .meter i.on{background:var(--sand)}
.pill.diff.lv4, .pill.diff.lv5{color:var(--sand); background:var(--sand-soft); border-color:transparent}
.pill.brand{background:var(--brand-soft); color:var(--brand-ink); border-color:transparent}
/* Season pills use warm/cool temperature colours, which carry no trail-marking
   meaning, so they don't clash with the blaze swatches the way a difficulty
   scale would. */
.pill.season-cool{background:var(--sky-soft); color:var(--sky); border-color:transparent}
.pill.season-warm{background:var(--sand-soft); color:var(--sand); border-color:transparent}
.pill.season-hot{background:var(--pay-soft); color:var(--pay); border-color:transparent}
.pill.sky{background:var(--sky-soft); color:var(--sky); border-color:transparent}
.pill.sand{background:var(--sand-soft); color:var(--sand); border-color:transparent}
.dot{width:8px; height:8px; border-radius:50%; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.14) inset}

/* trail blaze colours */
.mk{display:inline-flex; align-items:center; gap:5px; font-size:.73rem; font-weight:700; color:var(--ink-2)}
.mk i{width:15px; height:9px; border-radius:2px; flex:none; border:1px solid rgba(0,0,0,.18); display:block}
.mk-כחול i{background:#2563eb} .mk-אדום i{background:#dc2626} .mk-ירוק i{background:#16a34a}
.mk-שחור i{background:#1f2937} .mk-צהוב i{background:#eab308} .mk-כתום i{background:#ea580c}
.mk-סגול i{background:#7c3aed} .mk-בורדו i{background:#881337} .mk-תכלת i{background:#38bdf8}
.mk-לבן i{background:#f8fafc} .mk-חום i{background:#78350f} .mk-ורוד i{background:#ec4899}

/* ============ cards ============ */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}

/* ============ footer ============ */
footer{border-top:1px solid var(--line); padding:34px 0 46px; margin-top:40px; color:var(--ink-3); font-size:.84rem}
footer .fwrap{max-width:var(--maxw); margin:0 auto; padding:0 20px; display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:flex-start}
footer a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}
footer .fine{font-size:.74rem; line-height:1.85; max-width:70ch; opacity:.9}

/* ============ reveal ============ */
.rv{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .rv{opacity:1 !important; transform:none !important}
}

/* ============ track-shape thumbnail ============ */
.tshape{display:block; width:100%; height:100%; background:
  radial-gradient(120% 120% at 20% 0%, var(--brand-soft), transparent 70%),
  linear-gradient(150deg, var(--surface-2), var(--surface))}
.tshape path.casing{fill:none; stroke:var(--surface); stroke-width:5; stroke-linejoin:round; stroke-linecap:round; opacity:.9}
.tshape path.line{fill:none; stroke:var(--brand); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round}
.tshape circle{fill:var(--pay); stroke:var(--surface); stroke-width:1.6}

/* ============ elevation profile ============ */
.prof-svg{width:100%; display:block; overflow:visible}
.prof-svg .pline{fill:none; stroke:var(--brand); stroke-width:1.8; vector-effect:non-scaling-stroke; stroke-linejoin:round}
.prof-svg .pgrid{stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke}

/* ============ empty state ============ */
.empty{text-align:center; padding:60px 20px; color:var(--ink-2)}
.empty .big{font-size:2.6rem; margin-bottom:10px}
.empty h3{font-size:1.15rem; font-weight:800; color:var(--ink); margin-bottom:6px}

/* ============ sync button + dialog ============ */
.ms-syncbtn{padding:7px 13px; border-radius:99px; color:var(--ink-2); font-size:.9rem; font-weight:600; white-space:nowrap; transition:.18s}
.ms-syncbtn:hover{background:var(--surface-2); color:var(--ink)}
.ms-langbtn{padding:6px 11px; border-radius:99px; color:var(--ink-2); font-size:.82rem; font-weight:800; letter-spacing:.02em;
  border:1px solid var(--line); transition:.18s; min-width:38px}
.ms-langbtn:hover{background:var(--surface-2); color:var(--ink); border-color:var(--line-2)}
/* signed-in avatar in the header button */
.ms-syncbtn{display:inline-flex; align-items:center; gap:7px}
.ms-ava{width:24px; height:24px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--line)}
.ms-ava-ph{display:grid; place-items:center; background:var(--brand); color:#fff; font-weight:900; font-size:.75rem; text-transform:uppercase}
@media (prefers-color-scheme:dark){ .ms-ava-ph{color:#04210f} }
.ms-uname{font-weight:700; font-size:.88rem}
/* account dialog */
.ms-usercard{display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; margin-bottom:12px}
.ms-ava-lg{width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none}
.ms-ava-lg.ms-ava-ph{display:grid; place-items:center; background:var(--brand); color:#fff; font-weight:900; font-size:1.2rem}
.ms-un{font-weight:900; font-size:1rem; color:var(--ink)}
.ms-ue{font-size:.82rem; color:var(--ink-3); word-break:break-all}
.ms-gbtn{display:flex; justify-content:center; margin:14px 0 6px; min-height:44px}
.ms-authfail{font-size:.84rem; color:var(--pay); text-align:center; padding:10px}
.ms-adv{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.ms-adv summary{font-size:.82rem; font-weight:700; color:var(--ink-3); cursor:pointer; list-style:none; padding:2px 0}
.ms-adv summary::-webkit-details-marker{display:none}
.ms-adv summary::before{content:"▸ "; display:inline-block; transition:transform .2s}
.ms-adv[open] summary::before{transform:rotate(90deg)}
.ms-adv summary:hover{color:var(--ink-2)}
.ms-syncbtn.on{background:var(--brand-soft); color:var(--brand-ink)}
.ms-syncbtn.bad{background:var(--pay-soft); color:var(--pay)}

.ms-dlg-scrim{position:fixed; inset:0; z-index:2000; background:rgba(6,16,10,.5); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .22s}
.ms-dlg-scrim.on{opacity:1; pointer-events:auto}
.ms-dlg{position:relative; width:min(430px,100%); max-height:88svh; overflow-y:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); padding:26px 24px 22px}
.ms-dlg h2{font-size:1.12rem; font-weight:900; letter-spacing:-.02em; margin-bottom:11px}
.ms-dlg p{font-size:.9rem; color:var(--ink-2); line-height:1.65; margin-bottom:10px}
.ms-dlg .ms-fine{font-size:.79rem; color:var(--ink-3); line-height:1.6}
.ms-dlg-x{position:absolute; inset-block-start:14px; inset-inline-end:15px; font-size:1.15rem; line-height:1;
  color:var(--ink-3); padding:4px 7px; border-radius:8px}
.ms-dlg-x:hover{background:var(--surface-2); color:var(--ink)}
.ms-w{width:100%; margin-top:9px}
.ms-or{text-align:center; font-size:.78rem; font-weight:800; color:var(--ink-3); margin:15px 0 5px; position:relative}
.ms-or::before,.ms-or::after{content:""; position:absolute; top:50%; width:calc(50% - 22px); height:1px; background:var(--line)}
.ms-or::before{inset-inline-start:0} .ms-or::after{inset-inline-end:0}
.ms-lbl{display:block; font-size:.78rem; font-weight:800; color:var(--ink-3); margin-bottom:6px}
.ms-in{width:100%; font-size:.92rem; font-weight:700; padding:11px 13px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); direction:ltr; text-align:center; letter-spacing:.06em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ms-in:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.ms-code-box{display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:11px 13px; margin-bottom:9px}
.ms-code-box code{flex:1; direction:ltr; font-size:.86rem; font-weight:700; letter-spacing:.04em; word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink)}
.ms-msg{font-size:.83rem; font-weight:700; margin-top:11px; min-height:1.2em}
.ms-msg.good{color:var(--brand-ink)}
.ms-msg.bad{color:var(--pay)}

/* ============ skeleton ============ */
@keyframes sk{ 0%{opacity:.55} 50%{opacity:1} 100%{opacity:.55} }
.skel{background:var(--surface-2); border-radius:8px; animation:sk 1.4s ease-in-out infinite}