/* /events/ — self-contained stylesheet.
 *
 * This page deliberately does NOT link ../styles.css. That file is the slide
 * deck's CSS and its layout rules are unscoped: html,body{overflow:hidden},
 * body{position:fixed}, main{position:fixed}, main>section{position:absolute
 * !important;height:100svh!important}. Any page that links it and then tries to
 * scroll gets its content clipped into a viewport-sized box.
 *
 * The @import below and the :root block are copied VERBATIM from
 * landing/styles.css lines 1-2, which stays the source of truth for the tokens.
 * If the landing palette changes there, mirror it here.
 */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Roboto+Condensed:ital,wght@0,700;0,800;0,900;1,800;1,900&display=swap');
:root{--ink:#050607;--panel:#0c0e10;--panel2:#111417;--white:#f1f2f0;--muted:#a0a39f;--lime:#9cff00;--line:#303438;--head:'Roboto Condensed','Arial Narrow',sans-serif;--mono:'JetBrains Mono',monospace}

/* Page-local additions.
 * Colour law: --lime is the signal — «сейчас / выбрано / действие». It is never
 * decoration and never a sport. Sport identity gets its own restrained ramp so
 * a dot on the calendar and a chip in the list always mean the same thing. */
:root{
  --sport-run:#ffd166;
  --sport-roadBike:#7de2ff;
  --sport-mtb:#ff8a3d;
  --sport-hike:#b8e986;
  --sport-walk:#a0a39f;
  --sport-swim:#6aa9ff;
  --sport-other:#c9cdc7;
  --radius:10px;
  --gutter:clamp(20px,5vw,72px);
  --maxw:1320px;
  /* Amber is spent on exactly two things: the demo ribbon and the «сложно»
     level. Anything else that wants attention gets lime or nothing. */
  --amber:#ffb020;
  /* Real heights of the two sticky bars, measured in JS. Every other sticky
     element (day rail, day header) sits below their sum. */
  --hdr:70px;
  --ribbon:0px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.events-page{
  margin:0;background:var(--ink);color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--head);font-style:italic;text-transform:uppercase;margin:0}
.mono{font-family:var(--mono)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.skip-link{position:fixed;top:-60px;left:20px;background:var(--lime);color:#050607;padding:10px 16px;z-index:100;font-weight:700}
.skip-link:focus{top:20px}

/* ── Header ───────────────────────────────────────────────────────────────
 * Re-authored from landing/styles.css (.site-header / .brand / .mini-cta):
 * sticky here rather than absolute, because this page scrolls. */
.site-header{
  position:sticky;top:0;z-index:30;height:70px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--gutter);
  background:rgba(5,6,7,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font:italic 900 .9rem var(--head);letter-spacing:.16em}
.brand img{width:32px;height:32px;display:block;border-radius:8px;object-fit:cover;box-shadow:0 0 14px rgba(218,255,0,.22)}
.site-header nav{display:flex;gap:clamp(18px,3vw,38px);font-size:.7rem;letter-spacing:.04em}
.site-header nav a{opacity:.8;border-bottom:1px solid transparent;padding:7px 0}
.site-header nav a:hover{opacity:1;border-color:var(--line)}
.site-header nav a[aria-current="page"]{opacity:1;border-color:var(--lime)}
.mini-cta{
  background:var(--lime);color:#050607;border:0;border-radius:6px;
  box-shadow:0 0 18px rgba(156,255,0,.34);
  font-weight:900;cursor:pointer;padding:12px 25px;font-size:.72rem;white-space:nowrap;
}

/* ── Shell ────────────────────────────────────────────────────────────────*/
.ev-shell{display:block;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) 96px}
.ev-section{margin:0 0 clamp(40px,6vw,76px)}

/* ── Hero ─────────────────────────────────────────────────────────────────*/
.ev-hero{padding-top:clamp(56px,9vw,116px);border-bottom:1px solid var(--line);padding-bottom:clamp(28px,4vw,44px)}
.ev-eyebrow{font-size:.66rem;letter-spacing:.24em;color:var(--muted);margin:0 0 18px}
.ev-hero h1{font-size:clamp(3rem,11vw,6.4rem);line-height:.9;letter-spacing:-.01em;font-weight:900}
.ev-lede{max-width:56ch;margin:20px 0 0;color:var(--muted);font-size:clamp(.95rem,1.6vw,1.05rem);line-height:1.55}
.ev-stats{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin:30px 0 0;padding:0;font-size:.72rem;letter-spacing:.08em;color:var(--muted)}
.ev-stats li{display:flex;align-items:baseline;gap:8px}
.ev-stats b{color:var(--white);font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.ev-stats li:first-child b{color:var(--lime)}

/* ── Controls ─────────────────────────────────────────────────────────────*/
.ev-monthnav{display:flex;align-items:center;gap:16px}
.ev-month{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:800;letter-spacing:.01em;min-width:8ch}
.ev-step{
  width:44px;height:44px;flex:0 0 auto;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--radius);cursor:pointer;font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:border-color .18s,color .18s;
}
.ev-step:hover{border-color:var(--lime);color:var(--lime)}
.ev-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.ev-sports{display:flex;flex-wrap:wrap;gap:8px}
.ev-chip{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:999px;padding:9px 15px;min-height:38px;cursor:pointer;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;transition:border-color .18s,color .18s,background .18s;
}
.ev-chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.ev-chip:hover{color:var(--white);border-color:var(--muted)}
.ev-chip[aria-pressed="true"]{color:#050607;background:var(--lime);border-color:var(--lime);font-weight:700}
.ev-check{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;letter-spacing:.06em;color:var(--muted);cursor:pointer;min-height:38px}
.ev-check input{width:17px;height:17px;accent-color:var(--lime);cursor:pointer}
.ev-check.is-disabled{opacity:.45;cursor:not-allowed}
.ev-check.is-disabled input{cursor:not-allowed}
.ev-search{flex:1 1 220px;max-width:340px}
.ev-search input{
  width:100%;min-height:40px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--white);padding:10px 14px;
  font-family:var(--mono);font-size:.76rem;
}
.ev-search input::placeholder{color:#6d716d}
.ev-statusline{margin:20px 0 0;font-size:.7rem;letter-spacing:.1em;color:var(--muted)}
.ev-statusline b{color:var(--white);font-weight:700}
.ev-daylink{background:none;border:0;border-bottom:1px solid rgba(156,255,0,.4);color:var(--lime);cursor:pointer;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;padding:2px 0;margin-left:6px}
.ev-daylink:hover{border-color:var(--lime)}

/* ── Panels ───────────────────────────────────────────────────────────────*/
.ev-grid{display:grid;grid-template-columns:1fr;gap:20px}
.ev-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(16px,2.2vw,24px);min-width:0}
.ev-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.ev-panel-head h3{font-size:.86rem;letter-spacing:.12em;font-weight:800}
.ev-panel-head p{margin:0;font-size:.64rem;letter-spacing:.1em;color:var(--muted);text-align:right}

/* Calendar */
.ev-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.ev-cal-row{display:contents}
.ev-cal-dow{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--muted);
  text-align:center;padding:2px 0 8px;text-transform:uppercase;
}
.ev-cell{
  position:relative;background:transparent;border:1px solid transparent;border-radius:8px;
  min-height:52px;padding:6px 6px 5px;cursor:default;text-align:left;
  display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;
  font-family:var(--mono);color:#5d615e;font-size:.78rem;font-variant-numeric:tabular-nums;
  transition:background .16s,border-color .16s,color .16s;
}
.ev-cell.is-out{opacity:.45}
.ev-cell.has-events{color:var(--white);background:var(--panel2);border-color:var(--line);cursor:pointer}
.ev-cell.has-events:hover{border-color:var(--muted)}
.ev-cell.is-today{border-color:var(--lime)}
.ev-cell.is-today .ev-cell-n::after{content:'';display:block;height:2px;background:var(--lime);margin-top:2px}
.ev-cell.is-selected{background:var(--lime);border-color:var(--lime);color:#050607;font-weight:700}
.ev-cell.is-selected .ev-cell-n::after{background:#050607}
.ev-cell-n{display:block;line-height:1.1}
.ev-cell-dots{display:flex;flex-wrap:wrap;gap:3px;align-items:center;min-height:8px}
.ev-cell-dots i{width:6px;height:6px;border-radius:50%;display:block;background:var(--sport-other)}
.ev-cell.is-selected .ev-cell-dots i{box-shadow:0 0 0 1px rgba(5,6,7,.55)}
.ev-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);font-size:.6rem;letter-spacing:.08em;color:var(--muted)}
.ev-legend li{display:inline-flex;align-items:center;gap:7px}
.ev-legend i{width:7px;height:7px;border-radius:50%;display:block}
/* Each <li> carries both a full sport name and a 3-letter code (events.js);
   the stacked panel shows the full name, map-first's dot strip shows the
   code instead — see the override under body.ev-mapfirst below. */
.ev-lg-abbr{display:none}

/* Map */
.ev-map-panel{display:flex;flex-direction:column}
#ev-map{width:100%;height:clamp(320px,44vh,520px);border-radius:10px;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.ev-map-panel.is-band #ev-map{display:none}
.ev-map-panel.is-band .ev-map-fallback{min-height:180px}
.ev-map-fallback{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:26px 20px;border:1px dashed var(--line);border-radius:10px;background:var(--panel2);
}
.ev-map-fallback strong{font-family:var(--head);font-style:italic;text-transform:uppercase;font-size:.95rem;letter-spacing:.04em;max-width:34ch}
.ev-map-fallback span{font-family:var(--mono);font-size:.68rem;line-height:1.6;color:var(--muted);max-width:44ch}
.ev-unmapped{margin:12px 0 0;font-size:.66rem;letter-spacing:.08em;color:var(--muted)}
.ev-unmapped b{color:var(--white)}
.maplibregl-ctrl-attrib{font-size:10px}

@media (min-width:1000px){
  /* Desktop: the map panel takes the calendar's height — one instrument row,
     not two panels of unrelated heights. The map itself flexes to fill. */
  .ev-grid{grid-template-columns:minmax(340px,420px) 1fr;gap:24px;align-items:stretch}
  .ev-map-panel{min-height:0}
  #ev-map{flex:1 1 auto;height:auto;min-height:280px}
  .ev-map-panel:not(.is-band) .ev-map-fallback{flex:1 1 auto}
  .ev-grid.is-solo{grid-template-columns:minmax(0,560px)}
}

/* ── Agenda ───────────────────────────────────────────────────────────────*/
.ev-list-head{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:26px}
.ev-list-head h2{font-size:1.1rem;letter-spacing:.12em}
.ev-list{list-style:none;margin:0;padding:0}
.ev-day{margin:0 0 34px}
.ev-day-head{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.ev-day-num{font-family:var(--head);font-style:italic;font-weight:900;font-size:2.1rem;line-height:1;color:var(--white)}
.ev-day-rest{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.ev-day.is-today .ev-day-num{color:var(--lime)}
.ev-cards{display:grid;gap:12px}

.ev-card{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:0 20px;
  background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--line);
  border-radius:12px;padding:18px 20px;transition:border-color .18s,background .18s;
}
.ev-card.is-active{border-color:var(--lime);border-left-color:var(--lime);background:var(--panel2)}
.ev-card.is-past{opacity:.62}
.ev-card-time{
  font-family:var(--head);font-style:italic;font-weight:900;font-size:2rem;line-height:1;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--white);
}
.ev-card.is-active .ev-card-time{color:var(--lime)}
.ev-card-body{min-width:0}
.ev-card h3{font-size:1.05rem;line-height:1.15;letter-spacing:.01em;font-weight:800}
.ev-card h3 a{color:inherit}
.ev-card h3 a:hover,.ev-card h3 a:focus-visible{color:var(--lime);text-decoration:underline}
.ev-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:11px 0 0}
.ev-sport{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;border:1px solid currentColor;
}
.ev-tag{font-family:var(--mono);font-size:.63rem;letter-spacing:.06em;color:var(--muted);padding:4px 9px;border:1px solid var(--line);border-radius:999px}
.ev-tag b{color:var(--white);font-weight:700;font-variant-numeric:tabular-nums}
/* The club is identity, not action. Lime is reserved for «сейчас / выбрано /
   действие» (and, per the v2 brief, the «эксперт» level), so the club chip is
   white on a hairline like every other fact chip. */
.ev-club{font-family:var(--mono);font-size:.63rem;letter-spacing:.06em;color:var(--white);border:1px solid var(--line);padding:4px 9px;border-radius:999px}
/* Only «прошёл» is chipped: «открыто» labels the default case and «мест нет»
   lives in the decision strip. See cardHtml(). */
.ev-state{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.ev-state.is-past{color:var(--muted);background:rgba(160,163,159,.1)}
.ev-where{margin:12px 0 0;font-size:.85rem;line-height:1.5;color:var(--muted)}
.ev-where b{color:var(--white);font-weight:400}
.ev-where .ev-pin{color:var(--lime)}
.ev-card-links{display:flex;flex-wrap:wrap;gap:14px;margin:13px 0 0}
.ev-card-links a{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;color:var(--lime);border-bottom:1px solid rgba(156,255,0,.35);padding-bottom:2px}
.ev-card-links a:hover{border-color:var(--lime)}

/* .ev-open — the primary action on a card: the detail page. Same pill
   language as .button (landing/styles.css), scaled down for a chip row. */
.ev-card-links a.ev-open,.ev-open{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lime);color:var(--ink);border:0;border-bottom:0;
  border-radius:6px;font-family:var(--head);font-weight:900;font-size:.72rem;
  letter-spacing:.03em;text-transform:uppercase;padding:0 16px;min-height:40px;
  transition:background .18s,color .18s,transform .18s;
}
.ev-card-links a.ev-open:hover,.ev-card-links a.ev-open:focus-visible{background:#fff;color:var(--ink);border-color:transparent;transform:translateY(-1px)}
.ev-card-links a.ev-open{padding-bottom:0}

@media (min-width:900px){
  .ev-day{display:grid;grid-template-columns:190px 1fr;gap:26px;align-items:start}
  .ev-day-head{flex-direction:column;align-items:flex-start;gap:4px;position:sticky;top:calc(var(--hdr) + var(--ribbon) + 22px)}
  .ev-day-num{font-size:2.9rem}
}

/* Hero-event mode — exactly one event in view. This is a designed state, not a
 * fallback: one lit cell in a quiet month is the composition. */
.ev-list.is-hero .ev-day{grid-template-columns:1fr;gap:14px}
/* The card carries the spelled-out date itself in hero mode, so the day rail
   would only repeat it. */
.ev-list.is-hero .ev-day-head{display:none}
.ev-list.is-hero .ev-card{
  grid-template-columns:1fr;gap:0;padding:clamp(22px,3.5vw,38px);
  border-top:2px solid var(--lime);border-left:1px solid var(--line);
}
.ev-list.is-hero .ev-card-time{font-size:clamp(3rem,8vw,5.5rem);color:var(--lime);margin-bottom:6px}
.ev-list.is-hero .ev-card-date{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--white);text-transform:uppercase;margin-bottom:20px}
.ev-list.is-hero .ev-card h3{font-size:clamp(1.4rem,3.4vw,2.1rem);line-height:1.05}
.ev-list.is-hero .ev-where{font-size:1rem;max-width:60ch}
.ev-card-date{display:none}

/* ── Sparse / loading / error states ──────────────────────────────────────*/
.ev-block{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:clamp(24px,4vw,40px)}
.ev-block h3{font-size:clamp(1.1rem,2.6vw,1.6rem);line-height:1.1;max-width:22ch}
.ev-block p{margin:14px 0 0;color:var(--muted);font-size:.9rem;line-height:1.6;max-width:56ch}
.ev-block-actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.ev-ghost{
  border:1px solid var(--line);background:transparent;border-radius:var(--radius);
  padding:11px 18px;min-height:42px;cursor:pointer;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.08em;color:var(--white);
}
.ev-ghost:hover{border-color:var(--lime);color:var(--lime)}
.ev-strip{
  margin:22px 0 0;padding:16px 18px;border-left:2px solid var(--lime);background:var(--panel);
  font-family:var(--mono);font-size:.7rem;line-height:1.7;color:var(--muted);border-radius:0 10px 10px 0;
}
.ev-error strong{display:block;font-family:var(--head);font-style:italic;text-transform:uppercase;font-size:1.1rem;margin-bottom:8px}
.ev-error code{font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.ev-skel{background:var(--panel2);border-radius:10px;position:relative;overflow:hidden}
.ev-skel-cell{min-height:52px}
.ev-skel-card{height:104px;margin-bottom:12px}
.ev-skel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(241,242,240,.05),transparent);
  transform:translateX(-100%);animation:ev-sheen 1.4s infinite;
}
@keyframes ev-sheen{to{transform:translateX(100%)}}

/* ── CTA + footer ─────────────────────────────────────────────────────────*/
.ev-cta{border-top:1px solid var(--line);padding-top:clamp(34px,5vw,54px)}
.ev-cta h2{font-size:clamp(1.6rem,4.6vw,2.8rem);line-height:1;max-width:16ch}
.ev-cta p{color:var(--muted);margin:16px 0 0;max-width:52ch;font-size:.95rem;line-height:1.6}
.ev-cta-links{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 0}
.button{
  display:inline-flex;align-items:center;justify-content:center;background:var(--lime);color:#050607;
  border:0;border-radius:6px;box-shadow:0 0 18px rgba(156,255,0,.34);font-weight:900;cursor:pointer;
  padding:15px 28px;min-width:185px;font-family:var(--head);font-size:1rem;letter-spacing:.02em;transition:.2s;
}
.button:hover,.button:focus-visible{background:#fff;transform:translateY(-2px)}
.ev-note{margin:20px 0 0;font-size:.62rem;letter-spacing:.06em;line-height:1.8;color:var(--muted);max-width:60ch}
.ev-noscript{border:1px solid var(--line);border-radius:12px;padding:18px;font-size:.72rem;line-height:1.7;color:var(--muted)}
footer{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  border-top:1px solid var(--line);padding:26px var(--gutter);
  max-width:var(--maxw);margin:0 auto;font-size:.66rem;letter-spacing:.1em;color:var(--muted);
  font-family:var(--mono);text-transform:uppercase;
}
footer .brand img{width:27px;height:27px;border-radius:7px}
footer .brand{color:var(--white)}

/* ── Narrow ───────────────────────────────────────────────────────────────*/
@media (max-width:680px){
  .site-header{height:62px;gap:10px}
  .site-header nav{gap:16px;font-size:.64rem}
  .mini-cta{padding:10px 16px;font-size:.66rem}
  /* 44px minimum tap target at 390px: the panel gives up padding and the grid
     gives up gap so the cell does not. */
  .ev-cal-panel{padding:16px 12px}
  .ev-cal{gap:3px}
  .ev-cell{min-height:46px;padding:5px 4px 4px;font-size:.72rem}
  .ev-cell-dots i{width:5px;height:5px}
  .ev-card{grid-template-columns:1fr;gap:6px;padding:16px}
  .ev-card-time{font-size:1.55rem}
  .button{flex:1 1 100%;min-width:0}
  .ev-search{max-width:none}
}

/* Touch devices get the full 44px target; a mouse does not need it and the
   chip row reads better tighter. */
@media (pointer:coarse){
  .ev-chip,.ev-check,.ev-search input{min-height:44px}
  .ev-card-links a{padding-bottom:8px}
}

/* Below 480px the wordmark is the first thing to go: the icon still carries the
   brand and still links home (the aria-label is on the anchor), and the header
   then holds its shape even at 130% text, where it otherwise pushed 46px past
   the viewport. */
@media (max-width:480px){
  .site-header .brand-word{display:none}
  /* Primary action (.ev-open, always first — see cardHtml()) gets the full
     row to itself; the secondary links wrap onto their own row below it
     (.ev-card-links already wraps by default). */
  .ev-card-links .ev-open{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::after,*::before{transition:none!important;animation:none!important}
  .ev-skel::after{display:none}
}

/* ── Demo ribbon — visible ONLY while config.js `source: 'mock'` feeds the page.
   Deliberately loud: an invented calendar must never pass as the live one. */
.ev-demo{position:sticky;top:var(--hdr);z-index:29;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px clamp(18px,6vw,92px);background:#1a1503;border-top:1px solid rgba(255,176,32,.35);border-bottom:1px solid rgba(255,176,32,.35);color:#ffc86b;font-size:.62rem;letter-spacing:.08em;line-height:1.5}
.ev-demo b{padding:3px 8px;border:1px solid #ffb020;border-radius:4px;color:#ffb020;font-weight:700;letter-spacing:.14em}
@media(max-width:620px){.ev-demo{font-size:.58rem;padding-block:8px}}

/* ═════════════════════════════════════════════════════════════════════════
   v2 — плотные дни
   Календарь читается количеством, день читается как прибор: ось, риски,
   ночь заливкой. Лайм по-прежнему означает «сейчас / выбрано / действие»,
   янтарный — только «сложно» и демо-плашку.
   ═════════════════════════════════════════════════════════════════════════*/

/* ── Календарь: плотность ─────────────────────────────────────────────────*/
.ev-cell.is-dense{
  background:linear-gradient(0deg,rgba(156,255,0,var(--tint,.08)),rgba(156,255,0,var(--tint,.08))),var(--panel2);
  border-color:rgba(156,255,0,.28);
}
.ev-cell.is-dense:hover{border-color:rgba(156,255,0,.6)}
.ev-cell-count{
  font-family:var(--mono);font-weight:700;font-size:1.02rem;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--white);letter-spacing:-.02em;
}
.ev-cell.is-dense .ev-cell-n{opacity:.55;font-size:.66rem}
.ev-cell.is-dense{justify-content:space-between}
.ev-cell.is-selected.is-dense{background:var(--lime);border-color:var(--lime)}
.ev-cell.is-selected .ev-cell-count{color:#050607}
.ev-cell.is-selected .ev-cell-n{opacity:.7}
.ev-calnote{margin:10px 0 0;font-size:.58rem;letter-spacing:.09em;color:var(--muted);line-height:1.6}

/* ── «Ближе ко мне» ───────────────────────────────────────────────────────*/
.ev-near{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:999px;padding:9px 15px;min-height:38px;cursor:pointer;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .18s,color .18s;
}
.ev-near:hover:not(:disabled){color:var(--white);border-color:var(--muted)}
.ev-near.is-on{color:var(--lime);border-color:rgba(156,255,0,.5)}
.ev-near.is-off{color:#ffc86b;border-color:rgba(255,176,32,.45)}
.ev-soft{color:var(--muted)}
.ev-near:disabled{opacity:.55;cursor:progress}
.ev-geonote{margin:14px 0 0;font-size:.62rem;letter-spacing:.05em;line-height:1.7;color:var(--muted);max-width:70ch}

/* ── Решающая строка ──────────────────────────────────────────────────────*/
.ev-decide{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
  margin:9px 0 0;font-size:.64rem;letter-spacing:.05em;color:var(--muted);line-height:1.5;
}
.ev-decide:empty{display:none}
.ev-decide b{color:var(--white);font-weight:700;font-variant-numeric:tabular-nums}
.ev-d-sep{font-style:normal;opacity:.4}
.ev-d-wx{display:inline-flex;align-items:center;gap:5px}
.ev-d-rain,.ev-d-night{display:inline-flex;align-items:center;gap:4px}
.ev-d-rain b,.ev-d-wind b{color:var(--white)}
.ev-d-night{color:var(--white)}
.ev-d-night .ev-wi,.ev-d-rain .ev-wi{color:inherit}
.ev-d-full{color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.ev-d-soft{opacity:.72}
.ev-wi{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.ev-wi circle{fill:none}
.ev-wi .ray,.ev-wi .drop,.ev-wi .bolt{stroke-width:1.2}

/* ── Уровень ──────────────────────────────────────────────────────────────*/
.ev-lvl{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
}
.ev-lvl.is-lvl-moderate{color:var(--white)}
.ev-lvl.is-lvl-hard{color:var(--amber);border-color:rgba(255,176,32,.42)}
.ev-lvl.is-lvl-expert{color:var(--lime);border-color:var(--lime)}

/* ── Расчётный финиш / .ics ───────────────────────────────────────────────*/
.ev-est{margin:12px 0 0;font-size:.6rem;letter-spacing:.04em;line-height:1.7;color:var(--muted);max-width:62ch}
.ev-ics{
  background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;color:var(--muted);padding:0 0 2px;
}
.ev-ics:hover{color:var(--white);border-color:var(--muted)}

/* ── Свёрнутая группа месяца ──────────────────────────────────────────────*/
.ev-more{
  display:flex;align-items:center;gap:7px;width:100%;
  border:1px dashed var(--line);background:transparent;border-radius:12px;
  padding:14px 18px;min-height:48px;cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;color:var(--muted);
  transition:border-color .18s,color .18s;
}
.ev-more:hover{border-color:var(--lime);color:var(--lime)}
.ev-more b{color:var(--white);font-weight:700}
.ev-more:hover b{color:var(--lime)}

/* ── День ─────────────────────────────────────────────────────────────────*/
.ev-dayhead{
  position:sticky;top:calc(var(--hdr) + var(--ribbon));z-index:12;
  background:rgba(5,6,7,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  margin:0 0 18px;padding:14px 0 12px;
}
.ev-dayhead-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ev-dayhead-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:1rem}
.ev-dayhead-dow{font-family:var(--mono);font-style:normal;font-size:.66rem;letter-spacing:.18em;color:var(--muted)}
.ev-dayhead-date{font-size:clamp(1.3rem,3.4vw,2rem);font-weight:900;letter-spacing:.01em;color:var(--white)}
.ev-dayhead-n{font-style:normal;font-size:.66rem;letter-spacing:.12em;color:var(--lime);text-transform:none}
.ev-dayclose{padding:8px 14px;min-height:36px;font-size:.62rem;flex:0 0 auto}

/* Полоса погоды — одна плотная строка, без единого выдуманного числа. */
.ev-wxstrip{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin:12px 0 0}
.ev-wxstrip:empty{display:none}
.ev-wxsvg{flex:1 1 320px;min-width:220px;max-width:620px;height:auto}
.ev-wxline{fill:none;stroke:var(--white);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
.ev-wxbar{fill:var(--muted);opacity:.3}
.ev-wxbar.is-wet{fill:var(--sport-roadBike);opacity:.75}
.ev-wxnight{fill:#000;opacity:.42}
.ev-wxtick{fill:var(--muted);font-family:var(--mono);font-size:9px;text-anchor:middle;opacity:.75}
.ev-wxbadges{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:.62rem;letter-spacing:.07em;color:var(--muted)}
.ev-wxb{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ev-wxb .ev-wi{color:inherit}
.ev-wxb b{color:var(--white);font-weight:700;font-variant-numeric:tabular-nums}
.ev-wxb.is-wet{color:var(--sport-roadBike)}
.ev-wxb.is-wind{color:var(--white)}
.ev-wxb.is-soft{opacity:.75}
.ev-wxb-glyph .ev-wi{width:15px;height:15px;color:var(--white)}

/* Быстрые фильтры дня */
.ev-dayfilters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:0 0 22px}
.ev-fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ev-fgroup-label{font-size:.56rem;letter-spacing:.18em;color:#6d716d;margin-right:4px}
.ev-fchip{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:999px;padding:7px 12px;min-height:34px;cursor:pointer;
  font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  transition:border-color .18s,color .18s,background .18s;
}
.ev-fchip:hover{color:var(--white);border-color:var(--muted)}
.ev-fchip.is-lvl-hard{color:var(--amber)}
.ev-fchip.is-lvl-expert{color:var(--lime)}
.ev-fchip[aria-pressed="true"]{color:#050607;background:var(--lime);border-color:var(--lime);font-weight:700}
.ev-select{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--white);padding:8px 12px;min-height:34px;font-size:.62rem;letter-spacing:.06em;cursor:pointer;
}
.ev-select option:disabled{color:#6d716d}
.ev-fcount{width:100%;margin:2px 0 0;font-size:.6rem;letter-spacing:.09em;color:var(--muted)}
.ev-fcount b{color:var(--white)}

/* ── Таймлайн — ось, риски, ночь ──────────────────────────────────────────*/
.ev-tl{--gut:64px;position:relative;padding-left:var(--gut)}
.ev-tl-axis{position:absolute;inset:0;pointer-events:none}
.ev-tl-h{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--line);opacity:.55}
.ev-tl-h.is-odd{opacity:.3}
.ev-tl-h b{
  position:absolute;left:0;top:-7px;width:calc(var(--gut) - 14px);text-align:right;
  font-family:var(--mono);font-weight:500;font-size:.58rem;letter-spacing:.06em;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.ev-tl-h.is-odd b{opacity:.6}
.ev-tl-night{position:absolute;left:var(--gut);right:0;background:#000;opacity:.55;border-radius:2px}
.ev-tl-sun{position:absolute;left:calc(var(--gut) - 26px);right:0;height:0;border-top:1px dashed rgba(241,242,240,.45)}
.ev-tl-sun span{
  position:absolute;right:0;top:-9px;background:var(--ink);padding:0 0 0 8px;
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:var(--white);white-space:nowrap;
}
.ev-tl-sun .ev-wi{color:var(--white);width:12px;height:12px}
.ev-tl-rows{position:relative}
.ev-tl.is-plotted .ev-tl-rows{position:absolute;left:var(--gut);right:0;top:0}
.ev-tl-slot{position:relative;margin:0 0 8px}
.ev-tl.is-plotted .ev-tl-slot{position:absolute;left:0;right:0;margin:0}

.ev-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:0 14px;width:100%;
  background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--line);
  border-radius:10px;padding:9px 14px;cursor:pointer;text-align:left;
  transition:border-color .18s,background .18s;
}
.ev-row:hover{border-color:var(--muted)}
.ev-tl-slot.is-active .ev-row{border-color:var(--lime);border-left-color:var(--lime);background:var(--panel2)}
.ev-tl-slot.is-past .ev-row{opacity:.6}
.ev-row-time{
  font-family:var(--mono);font-weight:700;font-size:1.02rem;line-height:1.2;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--white);
}
.ev-tl-slot.is-active .ev-row-time{color:var(--lime)}
.ev-row-main{min-width:0;display:block}
.ev-row-title{
  display:block;font-family:var(--head);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:.92rem;line-height:1.2;letter-spacing:.01em;color:var(--white);
}
.ev-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:5px 0 0;font-size:.62rem;letter-spacing:.06em;color:var(--muted)}
.ev-row-meta .ev-decide{display:contents}
.ev-row-meta b{color:var(--white);font-weight:700;font-variant-numeric:tabular-nums}
.ev-row-sport{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase}
.ev-row-chevron{font-family:var(--mono);font-size:1rem;line-height:1;color:var(--muted);padding-top:2px}
.ev-row-detail{overflow:hidden}
.ev-row-detail .ev-card{
  grid-template-columns:1fr;border:0;border-top:1px solid var(--line);border-radius:0;
  background:transparent;padding:14px 16px 4px;
}
.ev-tl-slot.is-open .ev-row{border-color:var(--lime);border-left-color:var(--lime);border-bottom-left-radius:0;border-bottom-right-radius:0}
.ev-tl-slot.is-open .ev-row-detail{border:1px solid var(--lime);border-top:0;border-radius:0 0 10px 10px;background:var(--panel2)}

/* Ось на узком экране отдаёт ширину строкам. */
@media (max-width:680px){
  .ev-tl{--gut:46px}
  .ev-tl-h b{font-size:.54rem}
  .ev-row{grid-template-columns:auto 1fr;gap:0 12px;padding:11px 12px}
  .ev-row-chevron{display:none}
  .ev-row-time{font-size:.95rem}
  .ev-row-title{font-size:.88rem}
  .ev-dayhead{padding-top:10px}
  .ev-dayfilters{gap:8px 14px}
  .ev-fgroup{width:100%}
  .ev-fsort{width:100%}
  .ev-select{flex:1 1 auto}
  .ev-near{width:100%}
}
@media (pointer:coarse){
  .ev-fchip,.ev-select,.ev-near{min-height:44px}
  .ev-more{min-height:52px}
}

.ev-block-inline{margin:0}
.ev-tl-note{margin:0 0 14px;font-size:.6rem;letter-spacing:.08em;color:var(--muted);line-height:1.6}
.ev-tl.is-ranked{padding-left:0}
.ev-tl.is-ranked .ev-tl-slot{margin-bottom:8px}

/* ── v3 · «Открыть в Dopamine» + честная строка про срез окна ─────────────*/
/* Matches .ev-ics in height and rhythm, but carries the lime hairline: this
   is the one link on the card that leads INTO the product. */
.ev-app{
  display:inline-block;background:none;border:0;border-bottom:1px solid rgba(156,255,0,.35);
  font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;color:var(--lime);
  padding:0 0 2px;cursor:pointer;
}
.ev-card-links a.ev-app{padding-bottom:2px}
.ev-app:hover{border-color:var(--lime)}
/* Demo mode: reads as an unavailable control, not as a link that lost its
   href. `cursor:help` plus the title says «спроси, почему» rather than
   «сломалось». */
.ev-app.is-demo{
  color:var(--muted);border-bottom-style:dashed;border-bottom-color:var(--line);
  cursor:help;opacity:.72;
}
.ev-app.is-demo:hover{color:var(--white);border-bottom-color:var(--muted)}

.ev-trunc{
  margin:10px 0 0;font-size:.62rem;letter-spacing:.05em;line-height:1.7;
  color:var(--amber);max-width:62ch;
}

@media (pointer:coarse){
  .ev-card-links .ev-app{padding-bottom:8px}
}

/* Server-rendered upcoming list (#ev-ssr): plain, readable without JS, and
   removed by events.js after the live feed renders. */
.ev-ssr ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:6px}
.ev-ssr li a{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:border-color .2s}
.ev-ssr li a:hover,.ev-ssr li a:focus-visible{border-color:var(--lime)}
.ev-ssr time{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--muted)}
.ev-ssr b{font:900 .95rem var(--head);font-style:italic;text-transform:uppercase;line-height:1.1}
.ev-ssr small{display:block;margin-top:3px;font-size:.68rem;color:#b5b8b4}
.ev-ssr .ev-ssr-note{margin:0 0 10px;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--muted)}
@media (max-width:480px){.ev-ssr li a{grid-template-columns:1fr;gap:4px}}

/* ═════════════════════════════════════════════════════════════════════════
   v4 — «map-first» HUD layout (2026-09-08)

   Everything above this line is untouched and stays the real fallback: when
   `body` does NOT carry `.ev-mapfirst` — the map failed, was banded (nothing
   to plot), or JS never ran — the page is exactly the stacked panel design it
   always was. Every rule below is scoped under `body.ev-mapfirst` for
   precisely that reason: it only ever describes the ONE state where a real
   map is actually drawn (events.js flips the class in `renderMapPanel`/
   `band()` — see the comment on `setMapFirst`), so there is nothing here to
   "undo" on the fallback path.

   Mechanism: `.ev-shell` becomes the full-viewport stage (below the sticky
   header/ribbon, which are untouched and stay on top of everything). Inside
   it, `.ev-map-panel` is pulled out of flow (`position:absolute;inset:0`) to
   become the literal page background; every other direct child of the stage
   (hero, controls, calendar strip, the list sheet/panel) stays enough "out of
   flow" itself (position:absolute/fixed, explicit z-index) to float over the
   map instead of pushing it down. No element depends on another's measured
   height — each one is anchored directly to the stage's edges, so this holds
   up under localization-driven text reflow without new JS measurement.
   ═════════════════════════════════════════════════════════════════════════*/

:root{
  /* fitBounds padding (MapCtl.fit, events.js). Plain 48px on every edge is
     the ORIGINAL hardcoded value — kept here as the :root default so a
     fallback/banded map (no `.ev-mapfirst` on body) frames exactly as before.
     `body.ev-mapfirst` below overrides these per breakpoint to the space its
     own overlays actually occupy. */
  --ev-pad-top:48px; --ev-pad-bottom:48px; --ev-pad-left:48px; --ev-pad-right:48px;
}

body.ev-mapfirst{
  overflow:hidden;height:100dvh;
  /* Mobile figures: ~150px covers header+ribbon+hero+controls+calendar strip;
     the bottom sheet is 58dvh, so the fit padding matches it 1:1. */
  --ev-hud-top:150px; --ev-sheet-h:40dvh; --ev-panel-w:440px;
  /* --ev-hud-top / --ev-pad-top / --ev-pad-bottom are MEASURED by events.js
     measureChrome() from the real HUD + sheet boxes; these are only the
     pre-measurement defaults. */
  --ev-pad-top:150px; --ev-pad-bottom:340px; --ev-pad-left:16px; --ev-pad-right:16px;
}
@media (min-width:900px){
  body.ev-mapfirst{
    /* Desktop: the sheet becomes a left panel, so the bottom pad shrinks back
       down and the left pad instead reserves the panel's own width + gutter. */
    --ev-hud-top:140px; --ev-panel-w:440px;
    --ev-pad-top:140px; --ev-pad-bottom:32px; --ev-pad-left:480px; --ev-pad-right:32px;
  }
}

body.ev-mapfirst .ev-shell{
  position:relative;max-width:none;margin:0;padding:0;
  min-height:calc(100dvh - var(--hdr) - var(--ribbon));
  overflow:hidden;
}
body.ev-mapfirst .ev-section{margin:0}
body.ev-mapfirst footer{display:none}
/* .ev-map-panel is pulled out of flow below (position:absolute), leaving
   .ev-cal-panel as the grid's only remaining item — undo the base two-column
   grid (it would otherwise cap the calendar strip to a ~400px column on
   desktop) so the strip spans the full width at every breakpoint. */
body.ev-mapfirst .ev-grid{display:block}

/* ── Map: the page background ────────────────────────────────────────────*/
body.ev-mapfirst .ev-map-panel{
  position:absolute;inset:0;z-index:0;
  display:block;padding:0;border:0;border-radius:0;background:var(--panel2);
}
body.ev-mapfirst .ev-map-panel #ev-map{width:100%;height:100%;min-height:0;border:0;border-radius:0}
body.ev-mapfirst .ev-map-panel .ev-panel-head{
  position:absolute;left:12px;bottom:calc(var(--ev-sheet-h) + 12px);z-index:1;margin:0;
  display:inline-flex;align-items:baseline;gap:8px;max-width:calc(100% - 24px);
  background:rgba(5,6,7,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;
}
body.ev-mapfirst .ev-map-panel .ev-panel-head h3{font-size:.6rem;letter-spacing:.08em}
body.ev-mapfirst .ev-map-panel .ev-panel-head p{font-size:.56rem;letter-spacing:.06em}
body.ev-mapfirst #ev-unmapped{
  position:absolute;right:12px;left:auto;bottom:calc(var(--ev-sheet-h) + 12px);z-index:1;margin:0;
  max-width:min(60vw,340px);
  background:rgba(5,6,7,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.58rem;
}
@media (min-width:900px){
  body.ev-mapfirst .ev-map-panel .ev-panel-head{left:calc(var(--ev-panel-w) + 48px);bottom:16px}
  body.ev-mapfirst #ev-unmapped{bottom:16px}
}

/* ── Hero: eyebrow dropped, h1 shrunk into the HUD title, lede sr-only ────*/
body.ev-mapfirst .ev-hero{
  position:relative;z-index:5;padding:10px 14px 8px;
  background:linear-gradient(rgba(5,6,7,.82),rgba(5,6,7,.35));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
body.ev-mapfirst .ev-eyebrow{display:none}
body.ev-mapfirst .ev-hero h1{font-size:.92rem;line-height:1;letter-spacing:.1em;font-weight:800}
body.ev-mapfirst .ev-lede{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.ev-mapfirst #ev-stats{margin:10px 0 0;gap:4px 20px;font-size:.56rem}
body.ev-mapfirst #ev-stats b{font-size:1.15rem}

/* ── Controls: the HUD strip proper ───────────────────────────────────────*/
body.ev-mapfirst .ev-controls{
  position:relative;z-index:5;padding:8px 14px 10px;
  background:linear-gradient(rgba(5,6,7,.6),rgba(5,6,7,.3));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
body.ev-mapfirst .ev-monthnav{gap:8px}
body.ev-mapfirst .ev-month{font-size:1.05rem;min-width:0}
body.ev-mapfirst .ev-step{width:32px;height:32px;border-radius:8px}
body.ev-mapfirst .ev-filters{gap:8px;margin-top:9px}
body.ev-mapfirst .ev-chip{padding:6px 11px;min-height:30px;font-size:.6rem}
/* Redundant once every visible pin already lives on the map background — one
   fewer control to scan in a HUD that is explicitly reducing text/controls. */
body.ev-mapfirst #ev-mapped-label{display:none}
body.ev-mapfirst .ev-near{padding:6px 12px;min-height:30px;font-size:.6rem}

body.ev-mapfirst .ev-search{position:relative;display:flex;align-items:center;flex:0 0 auto}
body.ev-mapfirst .ev-search-toggle{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:rgba(12,14,16,.65);color:var(--muted);cursor:pointer;padding:0;
}
body.ev-mapfirst .ev-search-toggle:hover{color:var(--white);border-color:var(--muted)}
body.ev-mapfirst .ev-ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.ev-mapfirst .ev-search input{
  width:0;min-width:0;height:32px;margin-left:0;padding:0;border:0;opacity:0;
  background:var(--panel);color:var(--white);pointer-events:none;
}
body.ev-mapfirst .ev-search.is-open input{
  width:min(46vw,220px);opacity:1;margin-left:8px;padding:0 12px;pointer-events:auto;
  border:1px solid var(--line);border-radius:8px;
}

body.ev-mapfirst .ev-statusline{margin:8px 0 0;font-size:.62rem}
body.ev-mapfirst .ev-geonote,
body.ev-mapfirst .ev-trunc{
  display:inline-block;margin:6px 6px 0 0;padding:4px 10px;max-width:100%;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;
}

/* ── Calendar: one horizontal day strip ──────────────────────────────────*/
body.ev-mapfirst .ev-cal-panel{
  position:relative;z-index:5;background:rgba(5,6,7,.55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:0;border-radius:0;padding:8px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
body.ev-mapfirst .ev-cal-panel .ev-panel-head{margin-bottom:6px}
body.ev-mapfirst .ev-cal-panel .ev-panel-head h3{font-size:.58rem;letter-spacing:.1em}
body.ev-mapfirst .ev-cal-panel .ev-panel-head p{font-size:.54rem}
/* `.ev-cal-row` is already `display:contents` (base CSS) — with the grid
   below turned into a flex row, that unwraps every row into ONE flat scroll
   strip in document order without touching renderCalendar()'s markup. */
body.ev-mapfirst .ev-cal{
  display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:2px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
body.ev-mapfirst .ev-cal-dow{display:none}
body.ev-mapfirst .ev-cell{
  flex:0 0 auto;min-width:38px;min-height:38px;padding:4px 3px 3px;
  border-radius:9px;scroll-snap-align:start;
}
/* A leading/trailing cell from the neighbouring month reads as noise once
   every cell is the same size in a single scrolling row — the strip only
   needs to answer "which day, in this month". */
body.ev-mapfirst .ev-cell.is-out{display:none}
body.ev-mapfirst .ev-legend{
  border-top:0;margin:6px 0 0;padding:0;gap:5px 12px;font-size:.52rem;
}
body.ev-mapfirst .ev-lg-full{display:none}
body.ev-mapfirst .ev-lg-abbr{display:inline}
body.ev-mapfirst .ev-calnote{display:none}

/* ── List sheet: bottom sheet (mobile) / left panel (≥900px) ─────────────*/
body.ev-mapfirst .ev-list-wrap{
  position:absolute;z-index:6;left:0;right:0;bottom:0;top:auto;
  max-height:var(--ev-sheet-h);margin:0;padding:0 14px 18px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:rgba(5,6,7,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);border-bottom:0;
  border-radius:18px 18px 0 0;box-shadow:0 -10px 34px rgba(0,0,0,.45);
}
body.ev-mapfirst .ev-sheet-handle{width:36px;height:4px;border-radius:999px;background:var(--line);margin:10px auto 8px}
body.ev-mapfirst .ev-list-head{
  position:sticky;top:0;z-index:1;margin:0 -14px 12px;padding:6px 14px 10px;
  background:rgba(5,6,7,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* The day-mode header/rail are sticky against whatever scrolls past them —
   that used to be the whole page (offset below the fixed chrome above them);
   now it is this sheet's own scroll box, so the offset collapses to 0. */
body.ev-mapfirst .ev-dayhead,
body.ev-mapfirst .ev-day-head{top:0}
/* .ev-list-head ("ЛЕНТА"/"ДЕНЬ" + the clock note) is only sticky above so it
   reads as the sheet's own masthead; in day mode `#ev-daymode` renders its
   own richer sticky header (.ev-dayhead — date, count, weather, the "← весь
   месяц" exit) at the same top:0, so keeping both would stack them on top of
   each other. Drop the redundant one instead of fighting that collision. */
body.ev-mapfirst.is-daymode .ev-list-head{display:none}

@media (min-width:900px){
  body.ev-mapfirst .ev-list-wrap{
    left:24px;right:auto;bottom:24px;top:var(--ev-hud-top);
    width:var(--ev-panel-w);max-height:none;
    border-radius:14px;border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 42px rgba(0,0,0,.5);
  }
  body.ev-mapfirst .ev-sheet-handle{display:none}
}

/* ── Cards: dense HUD rows, not boxes ─────────────────────────────────────
   Description, requirements, the estimated-finish line, the .ics button and
   the operator's own source link all belong to the detail page (.ev-open) —
   see the honesty-rule comment on cardHtml() in events.js for why a card
   here never repeats a claim the detail page already makes in full. */
body.ev-mapfirst .ev-card{
  background:rgba(14,16,18,.6);border-radius:10px;padding:10px 12px;gap:0 12px;
}
body.ev-mapfirst .ev-card.is-active{background:rgba(20,26,10,.55)}
body.ev-mapfirst .ev-card-time{font-size:1.25rem}
body.ev-mapfirst .ev-card h3{font-size:.84rem;line-height:1.2}
body.ev-mapfirst .ev-card-meta{margin-top:6px;gap:6px}
body.ev-mapfirst .ev-where{margin-top:6px;font-size:.72rem}
body.ev-mapfirst .ev-req,
body.ev-mapfirst .ev-desc,
body.ev-mapfirst .ev-est,
body.ev-mapfirst .ev-ics,
body.ev-mapfirst .ev-src,
body.ev-mapfirst .ev-club,
body.ev-mapfirst .ev-state,
body.ev-mapfirst .ev-tag.ev-ptcp,
body.ev-mapfirst .ev-tag.ev-hash{display:none}
/* Sport chip → sport dot: same markup and colour, just a dot instead of a
   labelled pill — the meta line is meant to read as sport-dot · km · ↗ m ·
   level, nothing more. */
body.ev-mapfirst .ev-card-meta .ev-sport{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:currentColor;overflow:hidden;text-indent:-999px;flex:0 0 auto;
}
body.ev-mapfirst .ev-card-links{margin-top:8px;gap:8px}
body.ev-mapfirst .ev-card-links a.ev-open{min-height:32px;padding:0 12px;font-size:.64rem}
body.ev-mapfirst .ev-app{font-size:.6rem;padding-bottom:1px}
body.ev-mapfirst .ev-row{background:rgba(14,16,18,.6)}
body.ev-mapfirst .ev-row-detail .ev-card{background:transparent}

/* ── Install CTA: one line + two buttons, at the end of the sheet ────────*/
body.ev-mapfirst #ev-install{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
body.ev-mapfirst #ev-install h2{font-size:.86rem;max-width:none;letter-spacing:.02em}
body.ev-mapfirst #ev-install>p:not(.ev-note){display:none}
body.ev-mapfirst #ev-install .ev-cta-links{margin-top:10px;gap:8px}
body.ev-mapfirst #ev-install .button{min-width:0;flex:1 1 auto;padding:11px 16px;font-size:.78rem;box-shadow:none}
body.ev-mapfirst #ev-install .ev-note{margin-top:10px;font-size:.55rem}

/* ── Map-first: tuning after the first render pass ───────────────────────
   The map must stay visible between the HUD block and the sheet on a phone:
   stats hidden (the count lives in #ev-status), the geolocation note is one
   ellipsised line, the sheet peeks at 40dvh and scrolls inside. */
@media (max-width:899px){
  body.ev-mapfirst #ev-stats{display:none}
  body.ev-mapfirst .ev-hero{padding-top:8px;padding-bottom:0;border-bottom:0}
  body.ev-mapfirst .ev-controls{padding-top:6px;gap:6px}
  body.ev-mapfirst #ev-geonote{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:6px 10px;font-size:.55rem;margin:4px 0 0}
  body.ev-mapfirst #ev-status{margin:4px 0 0}
  body.ev-mapfirst .ev-cal{margin-top:6px}
}
@media (min-width:900px){
  body.ev-mapfirst #ev-geonote{max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ── Map-first: second pass — the HUD is a strip, not a page ─────────────
   Calendar chrome (label, hint, legend) and the geolocation prose are gone
   from the HUD; the near-me pill already states its own state. On desktop
   hero + controls + day strip stack in the SAME left column as the feed,
   so the map owns everything to the right. */
body.ev-mapfirst .ev-cal-panel .ev-panel-head{display:none}
body.ev-mapfirst #ev-calnote{display:none}
body.ev-mapfirst #ev-legend{display:none}
body.ev-mapfirst #ev-geonote{display:none}
body.ev-mapfirst #ev-status{font-size:.52rem;opacity:.8}
body.ev-mapfirst .ev-cal-panel{padding:0;border:0;background:none}
@media (min-width:900px){
  body.ev-mapfirst .ev-hero,body.ev-mapfirst .ev-controls,body.ev-mapfirst .ev-cal-panel{
    position:relative;z-index:5;width:var(--ev-panel-w);margin-left:24px;
  }
  body.ev-mapfirst .ev-controls{padding-right:0}
  body.ev-mapfirst .ev-cal{max-width:100%}
}
/* Map-first: the two map pills stack instead of overlapping on a phone. */
@media (max-width:899px){
  body.ev-mapfirst #ev-unmapped{bottom:calc(var(--ev-sheet-h) + 48px);left:12px;right:12px;max-width:none}
}
/* Map-first day strip: glides and snaps like a game HUD, not a table. */
body.ev-mapfirst .ev-cal{scroll-snap-type:x proximity;scroll-behavior:smooth;scroll-padding:0 40px;overscroll-behavior-x:contain}
body.ev-mapfirst .ev-cell{scroll-snap-align:center;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s}
body.ev-mapfirst .ev-cell.is-selected{transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){body.ev-mapfirst .ev-cal{scroll-behavior:auto}body.ev-mapfirst .ev-cell{transition:none}body.ev-mapfirst .ev-cell.is-selected{transform:none}}