/* Talius Shipment Map — scoped styles (tsm- prefix) */
#talius-tsm-app{font-family:'Inter',system-ui,-apple-system,sans-serif;color:#1a1a1a;background:#fff;border:1px solid #e2e0dc;border-radius:18px;overflow:hidden;max-width:1100px;margin:0 auto;line-height:1.5}
:where(#talius-tsm-app *){margin:0;padding:0;box-sizing:border-box}
/* WP themes style bare <button>/<input> aggressively; neutralize inside the
   widget so controls look identical on any site. */
#talius-tsm-app button{-webkit-appearance:none;appearance:none;font-family:inherit;line-height:1;text-transform:none;letter-spacing:normal;box-shadow:none}
#talius-tsm-app input[type=range]{margin:0;padding:0;border:none;background:transparent}

/* Header */
.tsm-hdr{background:#fff;padding:0 1.75rem;height:58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e0dc}
.tsm-logo{height:22px;display:block}
.tsm-hdr-b{font-size:.72rem;color:#888;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

.tsm-body{padding:2rem 1.75rem 1.5rem}

/* Intro */
.tsm-intro{text-align:center;max-width:640px;margin:0 auto 1.5rem}
.tsm-title{font-size:1.9rem;font-weight:800;line-height:1.15;color:#1a1a1a;margin-bottom:.5rem}
.tsm-sub{font-size:.92rem;color:#555}

/* Hero lifetime stat */
.tsm-hero{text-align:center;margin-bottom:1.1rem}
.tsm-hero-n{display:block;font-size:3.1rem;font-weight:800;color:#E8491B;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tsm-hero-l{display:block;font-size:.72rem;font-weight:700;color:#777;text-transform:uppercase;letter-spacing:.12em;margin-top:.3rem}

/* Stats */
.tsm-stats{display:flex;justify-content:center;gap:2.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.tsm-stat{text-align:center;min-width:110px}
.tsm-stat-n{display:block;font-size:1.7rem;font-weight:800;color:#E8491B;font-variant-numeric:tabular-nums;line-height:1.2}
.tsm-stat-l{display:block;font-size:.66rem;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.09em;margin-top:.15rem}

/* Year timeline controls */
.tsm-controls{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-bottom:1rem;flex-wrap:wrap}
.tsm-controls{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#talius-tsm-app .tsm-play{width:38px;height:38px;border-radius:50%!important;border:none!important;background:#E8491B!important;color:#fff!important;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex:none;padding:0!important}
#talius-tsm-app .tsm-play svg{width:12px;height:14px;display:block}
#talius-tsm-app .tsm-play:hover{background:#d13e14!important;transform:scale(1.06)}
#talius-tsm-app .tsm-play:focus-visible{outline:2px solid #E8491B;outline-offset:2px}
#talius-tsm-app .tsm-slider{-webkit-appearance:none;appearance:none;width:min(320px,55vw);height:4px!important;border-radius:4px;background:#e2e0dc!important;cursor:pointer}
.tsm-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#E8491B;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:grab}
.tsm-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#E8491B;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:grab}
.tsm-slider:focus-visible{outline:2px solid #E8491B;outline-offset:4px}
.tsm-yearlbl{font-size:.85rem;font-weight:800;color:#1a1a1a;min-width:86px;text-align:left;font-variant-numeric:tabular-nums}

/* Map */
.tsm-map-wrap{position:relative;border:1px solid #e9e7e3;border-radius:14px;overflow:hidden;background:#eef0f2}
#tsm-gl-map{width:100%;height:clamp(340px,56vw,620px)}
#tsm-gl-map.tsm-map-failed::after{content:"Map tiles are temporarily unavailable.";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#888}

/* MapLibre chrome, themed to Talius */
#talius-tsm-app .maplibregl-ctrl-group{border-radius:10px;box-shadow:0 1px 5px rgba(0,0,0,.15)}
#talius-tsm-app .maplibregl-ctrl-group button{width:32px;height:32px}
#talius-tsm-app .maplibregl-ctrl-group button:hover{background-color:rgba(232,73,27,.1)}
#talius-tsm-app .tsm-reset-btn{font-size:1rem;line-height:1;color:#1a1a1a}
#talius-tsm-app .maplibregl-popup-content{font-family:'Inter',system-ui,sans-serif;background:#1a1a1a;color:#fff;padding:.5rem .75rem;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
#talius-tsm-app .maplibregl-popup-content strong{display:block;font-size:.78rem;font-weight:700}
#talius-tsm-app .maplibregl-popup-content span{display:block;font-size:.68rem;font-weight:600;color:#f5b9a4}
#talius-tsm-app .tsm-popup .maplibregl-popup-tip{border-top-color:#1a1a1a;border-bottom-color:#1a1a1a}
#talius-tsm-app .maplibregl-ctrl-attrib{font-size:.62rem;background:rgba(255,255,255,.75)}
#talius-tsm-app .maplibregl-cooperative-gesture-screen{font-family:'Inter',system-ui,sans-serif;font-size:.9rem}

/* Legend */
.tsm-legend{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-top:.9rem;font-size:.72rem;color:#888;text-align:center;flex-wrap:wrap}
.tsm-legend-dot{width:10px;height:10px;border-radius:50%;background:#E8491B;opacity:.6;flex:none}
.tsm-legend-note{margin-top:.35rem;font-size:.66rem;color:#aaa}

/* Responsive */
@media (max-width:640px){
  .tsm-body{padding:1.25rem .9rem 1rem}
  .tsm-title{font-size:1.4rem}
  .tsm-sub{font-size:.85rem}
  .tsm-hero-n{font-size:2.2rem}
  .tsm-hero-l{font-size:.6rem;letter-spacing:.09em}
  /* Header: keep logo + badge on one uncramped line */
  .tsm-hdr{padding:0 .9rem;height:50px}
  .tsm-logo{height:16px}
  .tsm-hdr-b{font-size:.54rem;letter-spacing:.04em;white-space:nowrap}
  /* Stats: three-up on one tidy row instead of a ragged 2+1 wrap */
  .tsm-stats{gap:.5rem;flex-wrap:nowrap;margin-bottom:1.1rem}
  .tsm-stat{min-width:0;flex:1 1 0}
  .tsm-stat-n{font-size:1.02rem;white-space:nowrap}
  .tsm-stat-l{font-size:.56rem;letter-spacing:.06em}
  /* Controls: play + slider + year label all on one line */
  .tsm-controls{gap:.6rem;flex-wrap:nowrap}
  #talius-tsm-app .tsm-play{width:34px;height:34px}
  #talius-tsm-app .tsm-slider{width:44vw}
  .tsm-yearlbl{min-width:0;font-size:.78rem}
  #tsm-gl-map{height:min(70vw,420px)}
}