/* ============================================================
   TRACK RECORD — operations map (Rev. H, 29·09·2026)
   Component: web/src/trmap/track-map.js. Tokens from sza.css only;
   the two component values below are derived from the .pill shadow.

   Stacking, low → high (inside .tm-stage):
     svg: land & borders < inset < arcs < origins < labels < points < clusters
          (the hovered / active point is moved last in its layer)
     .tm-zoom 20  <  .tm-tip 30  <  .tm-filters (phone sheet) 40  <  .tm-detail 50
   ============================================================ */
.tm{position:relative;--tm-shadow:0 18px 44px -22px rgba(11,42,69,.42);--tm-scrim:rgba(11,42,69,.28);margin-top:var(--sp-5)}

/* ---- filter bar ---- */
.tm-bar{display:grid;gap:var(--sp-4);padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.tm-filters-toggle,.tm-sheet-head{display:none}
.tm-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tm-chip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:0 var(--sp-4);border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--paper-hi);color:var(--ink);font-family:var(--label);font-size:var(--t-meta);
  letter-spacing:.06em;cursor:pointer;transition:background var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease),border-color var(--dur-micro)}
.tm-chip:hover{border-color:var(--ink)}
.tm-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper-hi)}
.tm-chip[aria-pressed="true"] .tm-glyph path{fill:var(--petrol-bright)}
.tm-controls{display:flex;flex-wrap:wrap;align-items:end;gap:var(--sp-4) var(--sp-6)}
.tm-controls .atlas-clear{margin-left:auto}
.tm-search input{appearance:none;width:100%;min-width:200px;padding:0 0 var(--sp-2);line-height:inherit;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;font-family:var(--tech);font-size:var(--t-body-sm);color:var(--ink)}
.tm-search input::placeholder{color:var(--ink-4)}
.tm-search input:focus-visible{outline-offset:5px}
.tm-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-3) var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line-2)}
.tm-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-4);min-width:0}
.tm-count b{font-family:var(--data);font-weight:500;font-size:var(--t-meta);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tm-count span{font-size:var(--t-caption);color:var(--ink-3);overflow-wrap:anywhere}
.tm-views{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);padding:2px}
.tm-view-btn{min-height:32px;padding:0 var(--sp-4);border:0;border-radius:var(--r-pill);background:none;cursor:pointer;
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tm-view-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper-hi)}

/* ---- the stage ---- */
.tm-stage{position:relative;aspect-ratio:1600/700;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.tm-svg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none}
.tm-land{fill:var(--mist);transition:opacity var(--dur-enter) var(--ease)}
.tm-country{fill:var(--paper-lo);opacity:0;transition:opacity var(--dur-enter) var(--ease)}
.tm-border{fill:none;stroke:var(--paper-hi);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;transition:opacity var(--dur-enter) var(--ease)}
.tm-zoomed .tm-land{opacity:0}
.tm-zoomed .tm-country,.tm-zoomed .tm-border{opacity:1}
.tm-frame{fill:none;stroke:var(--ocean);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:0;transition:opacity var(--dur-enter)}
.tm-inset{opacity:0;pointer-events:none;transition:opacity var(--dur-enter) var(--ease)}
.tm-has-inset .tm-frame,.tm-has-inset .tm-inset{opacity:1}
.tm-inset-bg{fill:var(--paper)}
.tm-inset-land{fill:var(--paper-lo);stroke:var(--paper-hi);stroke-width:1.2;vector-effect:non-scaling-stroke}
.tm-inset-edge{fill:none;stroke:var(--ocean);stroke-width:1;vector-effect:non-scaling-stroke}
.tm-inset-lead{stroke:var(--ocean);stroke-width:.8;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.tm-inset-k{font-family:var(--data);font-weight:500;font-size:15px;letter-spacing:.2em;fill:var(--petrol)}

/* markers: drawn in screen px (the group is scaled by 1 / svg scale in JS) */
.tm-pt,.tm-cl{cursor:pointer;outline:none;transition:opacity var(--dur-enter) var(--ease)}
.tm-pt.is-out,.tm-pt.in-cluster{opacity:0;pointer-events:none}
.tm-pt.is-out{visibility:hidden;transition:opacity var(--dur-enter) var(--ease),visibility 0s linear var(--dur-enter)}
.tm-hit{fill:transparent}
.tm-mark{fill:var(--petrol);stroke:var(--paper);stroke-width:1.2;transition:fill var(--dur-micro)}
.tm-halo{fill:var(--petrol);opacity:.16;transform-origin:0 0;transition:opacity var(--dur-micro)}
.tm-pt:hover .tm-halo{opacity:.3}
.tm-pt:hover .tm-mark{fill:var(--ocean)}
.tm-pt.is-active .tm-mark{fill:var(--ocean);stroke-width:2}
.tm-pt.is-active .tm-halo{opacity:.35;animation:tm-pulse 2.2s var(--ease) infinite}
.tm-pt:focus-visible .tm-halo,.tm-cl:focus-visible .tm-cl-halo{fill:none;stroke:var(--ocean);stroke-width:2;opacity:1}
@keyframes tm-pulse{0%{transform:scale(1);opacity:.35}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}
.tm-cl-dot{fill:var(--ocean);transition:fill var(--dur-micro)}
.tm-cl-halo{fill:var(--ocean);opacity:.12}
.tm-cl:hover .tm-cl-dot{fill:var(--petrol)}
.tm-cl-n{font-family:var(--data);font-weight:500;font-size:12px;fill:var(--paper-hi);text-anchor:middle;pointer-events:none}
.tm-spider-leg{stroke:var(--ocean);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke;opacity:.6}
.tm-spider-hub{fill:var(--ocean)}
.tm-or circle{fill:var(--paper);stroke:var(--ocean);stroke-width:1.6}
.tm-or{opacity:.6;transition:opacity var(--dur-enter) var(--ease)}
.tm-or.is-lit{opacity:1}
.tm-or.is-out{opacity:0}
.tm-arc{fill:none;stroke:var(--ocean);stroke-width:1.2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;opacity:.75}
.tm-lb{font-family:var(--tech);font-weight:500;fill:var(--ocean);paint-order:stroke;stroke:var(--paper);stroke-linejoin:round;pointer-events:none}
.tm-lb-or{fill:var(--steel);font-weight:400}

/* entrance: staggered, once the data is in */
.tm-pt-in{transform-origin:0 0;transform:scale(0);opacity:0;
  transition:transform .6s var(--ease) calc(var(--i) * 45ms),opacity .4s var(--ease) calc(var(--i) * 45ms)}
.tm-in .tm-pt-in{transform:scale(1);opacity:1}
.tm-cl .tm-pt-in{transition-delay:0s}

/* zoom controls, hint */
.tm-zoom{position:absolute;right:var(--sp-3);bottom:var(--sp-3);z-index:20;display:flex;gap:var(--sp-1)}
.tm-zoom button{min-width:36px;height:36px;padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-hi);
  color:var(--ink);font-family:var(--data);font-size:var(--t-caption);cursor:pointer}
.tm-zoom .tm-world-btn{font-family:var(--label);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase}
.tm-zoom button:disabled{opacity:.4;cursor:default}
.tm-hint{position:absolute;left:var(--sp-3);top:var(--sp-3);font-family:var(--label);font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);pointer-events:none}

/* tooltip */
.tm-tip{position:absolute;top:0;left:0;z-index:30;max-width:min(280px,calc(100% - 16px));padding:var(--sp-3) var(--sp-4);background:var(--ocean);
  color:var(--dark-text);border-radius:var(--r-md);box-shadow:var(--tm-shadow);pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease)}
.tm-tip.is-on{opacity:1;transform:none}
.tm-tip b{display:block;font-family:var(--tech);font-weight:500;font-size:var(--t-body-sm);line-height:1.3}
.tm-tip span{display:block;margin-top:var(--sp-1);font-size:var(--t-caption);line-height:1.4;color:var(--dark-text-2)}
.tm-tip .tm-tip-meta{font-family:var(--label);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--petrol-bright)}

/* detail card */
.tm-detail{position:absolute;top:0;left:0;z-index:50;width:min(360px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;
  padding:var(--sp-5);background:var(--paper-hi);border:1px solid var(--line);border-top:2px solid var(--ink);border-radius:var(--r-sm);
  box-shadow:var(--tm-shadow);opacity:0;transform:translateY(6px);transition:opacity var(--dur-enter) var(--ease),transform var(--dur-enter) var(--ease)}
.tm-detail.is-on{opacity:1;transform:none}
.tm-detail-close{position:absolute;top:var(--sp-2);right:var(--sp-2);width:44px;height:44px;border:0;background:none;cursor:pointer;
  font-size:22px;line-height:1;color:var(--ink-3)}
.tm-detail-close:hover{color:var(--ink)}
.tm-d-top{display:flex;align-items:center;gap:var(--sp-2);padding-right:44px;font-family:var(--label);font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.tm-d-ix{font-family:var(--data);color:var(--petrol);letter-spacing:0}
.tm-detail h3{margin-top:var(--sp-3);font-family:var(--display);font-weight:500;font-size:clamp(22px,1.8vw,26px);line-height:1.12;color:var(--ink);overflow-wrap:anywhere}
.tm-d-route{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);font-family:var(--label);font-size:var(--t-label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--petrol)}
.tm-d-route i{width:18px;height:1px;background:currentColor;opacity:.6}
.tm-d-facts{display:grid;gap:var(--sp-2);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line-2)}
.tm-d-facts div{display:grid;grid-template-columns:12ch minmax(0,1fr);gap:var(--sp-3)}
.tm-d-facts dt{font-family:var(--label);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);padding-top:2px}
.tm-d-facts dd{font-size:var(--t-caption);line-height:1.45;color:var(--ink-2)}
.tm-d-facts em{font-style:normal;color:var(--ink-4)}
.tm-d-fig{font-family:var(--data);color:var(--ink)!important}
.tm-d-note{margin-top:var(--sp-4);font-size:var(--t-caption);line-height:1.55;color:var(--ink-3)}

/* glyphs (chips, legend, unplaced, detail) */
.tm-glyph{width:14px;height:14px;flex:none;overflow:visible}
.tm-glyph path{fill:var(--petrol)}
.tm-glyph-or circle{fill:var(--paper);stroke:var(--ocean);stroke-width:1.6}
.tm-glyph-cl{width:18px;height:18px}
.tm-glyph-cl circle{fill:var(--ocean)}
.tm-glyph-cl text{font-family:var(--data);font-size:10px;fill:var(--paper-hi);text-anchor:middle}

/* legend & note */
.tm-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-3) var(--sp-6);padding:var(--sp-4) 0}
.tm-legend{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5)}
.tm-legend li{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--label);font-size:var(--t-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.tm-note{font-family:var(--data);font-size:var(--t-label);color:var(--ink-4)}

/* without a single location */
.tm-unplaced{padding:var(--sp-4) 0 var(--sp-2);border-top:1px solid var(--line-2)}
.tm-unplaced .lbl{margin-bottom:var(--sp-3)}
.tm-unplaced-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tm-unplaced-list li[hidden]{display:none}
.tm-unplaced-list button{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;max-width:100%;padding:0 var(--sp-4);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-hi);cursor:pointer;text-align:left}
.tm-unplaced-list button:hover{border-color:var(--ink)}
.tm-unplaced-list span{font-family:var(--tech);font-size:var(--t-caption);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-unplaced-list small{font-family:var(--label);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}

/* list view */
.tm:not(.tm-view-list) .tm-list{display:none}
.tm-view-list .tm-stage,.tm-view-list .tm-foot{display:none}
.tm-list{margin-top:0}
.tm-list .atlas-card{cursor:pointer}
.tm-empty{padding:var(--sp-5) 0;font-size:var(--t-body-sm);color:var(--ink-3)}
.tm-empty[hidden],.tm-unplaced[hidden]{display:none}

/* ---- tablet: filters collapse behind a toggle ---- */
@media (max-width:1023px){
  .tm-bar{grid-template-columns:auto minmax(0,1fr);align-items:center}
  .tm-filters-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-5);border:1px solid var(--ink);border-radius:var(--r-pill);
    background:var(--paper-hi);font-family:var(--label);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer}
  .tm-filters-toggle[aria-expanded="true"]{background:var(--ink);color:var(--paper-hi)}
  .tm-filters{grid-column:1 / -1;display:none;gap:var(--sp-4)}
  .tm-filters-open .tm-filters{display:grid}
  .tm-meta{grid-column:2;grid-row:1;border-top:0;padding-top:0}
  .tm-hint{display:none}
}

/* ---- phone: map full width, filters and detail as bottom sheets ---- */
@media (max-width:699px){
  .tm-bar{grid-template-columns:1fr}
  .tm-filters-toggle{justify-self:start}
  .tm-meta{grid-column:1;grid-row:auto}
  .tm-stage{aspect-ratio:4/5;margin:0 calc(-1 * var(--gutter));border-left:0;border-right:0}
  .tm-filters{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;max-height:82vh;overflow:auto;padding:var(--sp-5) var(--gutter) var(--sp-6);
    background:var(--paper-hi);border-top:2px solid var(--ink);box-shadow:0 -18px 44px -22px var(--tm-scrim);
    transform:translateY(104%);visibility:hidden;transition:transform var(--dur-enter) var(--ease),visibility 0s linear var(--dur-enter)}
  .tm-filters-open .tm-filters{transform:none;visibility:visible;transition:transform var(--dur-enter) var(--ease)}
  .tm-sheet-head{display:flex;align-items:center;justify-content:space-between}
  .tm-sheet-head p{font-family:var(--label);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
  .tm-filters-done{min-height:44px;padding:0 var(--sp-5);border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--paper-hi);
    font-family:var(--label);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase}
  .tm-chip{min-height:44px}
  .tm-controls{display:grid;gap:var(--sp-4)}
  .tm-controls .atlas-clear{margin-left:0;justify-self:start}
  .tm-zoom button{min-width:44px;height:44px}
  .tm-detail{position:fixed;top:auto!important;left:0!important;right:0;bottom:0;width:auto;max-height:72vh;border-radius:var(--r-lg) var(--r-lg) 0 0;
    border-left:0;border-right:0;border-bottom:0;padding:var(--sp-5) var(--gutter) var(--sp-7);transform:translateY(100%)}
  .tm-detail.is-on{transform:none}
  .tm-unplaced-list button{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .tm *,.tm{transition:none!important;animation:none!important}
  .tm-pt-in{transform:none;opacity:1}
}