/* Путь клиентки и полоса абонемента (v3, задача 6). Цвета только токены, обе темы. */
.jmap-box { padding: var(--s4); display: grid; gap: var(--s3); justify-items: center; }
.jmap { width: 100%; height: auto; display: block; font-family: var(--font); }
.jmap.wide { max-width: 960px; }
.jmap.tall { max-width: 340px; }
.jmap .jl { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.jmap .jl-club { stroke: var(--accent); }
.jmap .jl-mini { stroke: var(--gold); }
.jmap .jl-link { stroke: var(--muted); stroke-width: 4; stroke-linecap: round; }
.jmap .jl-off { stroke: var(--muted); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 7; opacity: .8; }
.jmap .jl-arrow { fill: none; stroke: var(--surface); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jmap .jcap { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.jmap .jcap.club { fill: var(--accent); }
.jmap .jcap.mini { fill: var(--gold); }
.jst { cursor: pointer; outline: none; }
.jst .jst-l { paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }   /* линия-связка не режет подпись */
.jst .jst-dot { fill: var(--surface); stroke-width: 4; }
.jst.club .jst-dot { stroke: var(--accent); }
.jst.mini .jst-dot { stroke: var(--gold); }
.jst.off .jst-dot { stroke: var(--muted); }
.jst .jst-n { fill: var(--ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jst .jst-l { fill: var(--ink); font-size: 12.5px; font-weight: 500; }
.jst.zero .jst-n, .jst.zero .jst-l { fill: var(--muted); }
.jst:hover .jst-dot { fill: var(--sunk); }
.jst:focus-visible .jst-dot { stroke-width: 6; }
.jst.sel.club .jst-dot { fill: var(--accent); }
.jst.sel.mini .jst-dot { fill: var(--gold); }
.jst.sel.off .jst-dot { fill: var(--muted); }
.jst.sel .jst-n { fill: var(--accent-ink); }
.jst.sel .jst-l { font-weight: 700; }
.jlegend { text-align: center; }

.jlower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.jbody { padding: var(--s4); display: grid; gap: var(--s3); }
.jmonth { justify-content: center; }
.jmove-list { display: grid; gap: 0; }
.jmove-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: var(--s2); align-items: baseline;
  padding: var(--s2) 0; border-top: 1px solid var(--line-soft); }
.jmove-list li:first-child { border-top: 0; }
.jm-arr { color: var(--muted); }
.jm-n { font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.jwho-head { display: grid; gap: 2px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); }
.jwho .empty { padding: var(--s4); }

/* чипы: компактная линия и «вы здесь» */
.jcomp { padding: var(--s4); display: grid; gap: var(--s3); }
.jrows { display: grid; gap: var(--s3); }
.jrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s1); }
.jrow-name { flex: 0 0 100%; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.jrow.club .jrow-name { color: var(--accent); }
.jrow.mini .jrow-name { color: var(--gold); }
.jchip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font-size: var(--t-sm); text-decoration: none; line-height: 1.5; }
.jchip b { font-variant-numeric: tabular-nums; }
.jchip.club { border-color: var(--accent); }
.jchip.mini { border-color: var(--gold); }
.jchip.off { border-color: var(--muted); border-style: dashed; }
.jchip.zero { color: var(--muted); }
a.jchip:hover { background: var(--sunk); }
.jchip.here { background: var(--accent); color: var(--accent-ink); font-weight: 650; }
.jchip.here.mini { background: var(--gold); }
.jchip.here.off { background: var(--muted); }
.jarr { color: var(--muted); }
.jhere-now { font-size: var(--t-lg); }

/* полоса абонемента */
.sbar { width: 100%; height: auto; display: block; font-family: var(--font); max-width: 560px; }
.sbar .sb-head { fill: var(--ink); font-size: 15px; font-weight: 650; }
.sbar.soon .sb-head { fill: var(--warn); }
.sbar.late .sb-head { fill: var(--bad); }
.sbar .sb-plan { fill: var(--muted); font-size: 12px; }
.sbar .sb-track { fill: var(--line-soft); stroke: var(--line); stroke-width: 1; }
.sbar .sb-fill { fill: var(--accent); opacity: .85; }
.sbar.soon .sb-fill { fill: var(--warn); }
.sbar.late .sb-fill { fill: var(--bad); }
.sbar .sb-freeze { fill: var(--gold); opacity: .95; stroke: var(--surface); stroke-width: 1; }
.sbar .sb-open { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 3; }
.sbar .sb-now { stroke: var(--ink); stroke-width: 2; }
.sbar .sb-pin { fill: var(--ink); }
.sbar .sb-today { fill: var(--ink); font-size: 11.5px; font-weight: 650; }
.sbar .sb-date { fill: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.sbar .sb-sub { fill: var(--muted); font-size: 11px; }
.sbar .sb-frozen { fill: var(--gold); font-size: 11px; font-weight: 600; }

@media (max-width: 760px) {
  .jlower { grid-template-columns: minmax(0, 1fr); }
  .jmap-box { padding: var(--s3); }
  .jmove-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .jmove-list .jm-arr { display: none; }
  .jmove-list .jm-b::before { content: "\2192\00a0"; color: var(--muted); }
  .jmove-list .jm-a, .jmove-list .jm-b { grid-column: 1; }
  .jmove-list .jm-n { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
}