:root{
  --jk-blue:#002060;
  --jk-gold:#D5AA00;
  --jk-gray:#DDD;
  --jk-white:#FFF;
  --jk-black:#000;

  --jk-radius:16px;
  --jk-shadow:0 8px 24px rgba(0,0,0,.12);
  --jk-border:1px solid rgba(0,0,0,.10);
  --jk-topbars: 0px; /* JS sets this for mobile height calculations */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--jk-black);
  background:#f6f7fb;
  overflow-x:hidden;
}

.jk-app{ min-height:100%; display:flex; flex-direction:column; }

/* Header */
.jk-header{
  background:var(--jk-blue);
  color:var(--jk-white);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  position:sticky;
  top:0;
  z-index:50;
}
.jk-header__left{ display:flex; align-items:center; gap:12px; min-width:0; }
.jk-logoLink{ display:flex; align-items:center; line-height:0; }
.jk-logo{ height:40px; width:auto; display:block; }
.jk-title{ font-weight:800; font-size:18px; letter-spacing:.2px; white-space:nowrap; }
.jk-header__right{ display:flex; align-items:center; }
.jk-clock{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  font-size:14px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  background: rgba(255,255,255,.08);
}

/* Global notice */
.jk-alert{
  background:#d11a2a;
  color:#fff;
  padding:8px 0;
  position:sticky;
  /* Stick directly under the header (the header itself is sticky at top:0). */
  top:var(--jk-header-h, 0px);
  /* Above main/map, below the header. */
  z-index:49;
}
.jk-alert__viewport{ overflow:hidden; white-space:nowrap; }
/*
  Default (non-marquee): single centered line.
  When marquee is enabled we switch to a moving inline-flex track with a cloned copy.
*/
.jk-alert__track{ display:flex; align-items:center; justify-content:center; width:100%; }
.jk-alert__text{ padding:0 16px; font-weight:700; }
.jk-alert__text--clone{ display:none; }
.jk-alert.is-marquee .jk-alert__track{
  width:max-content;
  justify-content:flex-start;
  animation:none;
}
.jk-alert.is-marquee .jk-alert__text{ padding-right:64px; }
.jk-alert.is-marquee .jk-alert__text--clone{ display:inline; }
/*
  Pixel-based distance + duplicated content: seamless loop without end-of-animation "jump".
*/
@keyframes jk-marquee{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(calc(-1 * var(--marquee-distance, 0px)),0,0); }
}
@media (prefers-reduced-motion: reduce){
  .jk-alert.is-marquee .jk-alert__track{ animation:none; }
}

/* Main layout */
.jk-main{
  flex:1;
  width:100%;
  max-width:1280px;
  margin:16px auto;
  padding:0 16px;
  display:grid;
  /* a picit szélesebb jobb oszlop, hogy a táblázat fejlécei ne törjenek csúnyán */
  grid-template-columns: 1fr 420px;
  gap:16px;
  align-items:start;
}

.jk-card{
  background:var(--jk-white);
  border:var(--jk-border);
  border-radius:var(--jk-radius);
  box-shadow:var(--jk-shadow);
}

.jk-mapcard{ height:calc(100vh - 160px); min-height:420px; overflow:hidden; border-radius:var(--jk-radius); border:var(--jk-border); box-shadow:var(--jk-shadow); background:var(--jk-white); position:relative; }
/*
  iOS Safari can miscompute percentage heights inside flex items.
  Use absolute positioning so the map always has a concrete box.
*/
#jkMap{ position:absolute; inset:0; width:100%; height:100%; min-width:1px; }

.jk-maploading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--jk-blue);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(2px);
  z-index:600; /* above tiles, below Leaflet controls (typically 1000+) */
}

.jk-maploading[hidden]{ display:none; }

/* Defensive: avoid theme collisions on .jk-map class */
.jk-map{ width:100%; height:100%; }

.jk-side{ display:flex; flex-direction:column; gap:12px; }

/* Controls card */
.jk-controls{
  padding:12px;
  border-radius:var(--jk-radius);
  border:var(--jk-border);
  box-shadow:var(--jk-shadow);
  background:var(--jk-white);
}

/* Fields (used to allow responsive side-by-side controls on mobile) */
.jk-field{ display:flex; flex-direction:column; }

.jk-label{ font-size:12px; font-weight:800; color:var(--jk-blue); margin-bottom:6px; letter-spacing:.2px; }
.jk-input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  font-size:14px;
  outline:none;
  text-align:center;
  text-align-last:center;
}
.jk-input:focus{ border-color: var(--jk-gold); box-shadow:0 0 0 3px rgba(213,170,0,.18); }

.jk-tablecard{
  position:relative;
  padding:0;
  border-radius:var(--jk-radius);
  border:var(--jk-border);
  box-shadow:var(--jk-shadow);
  background:var(--jk-white);
  overflow:hidden;
  /* Allow inner areas to size/scroll correctly */
  display:flex;
  flex-direction:column;
  min-height:0;
}




.jk-tableloading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(246,247,251,.66);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  z-index:650;
}
.jk-tableloading[hidden]{ display:none !important; }
.jk-tableloading__inner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:min(320px, 88%);
  padding:14px 18px;
  border-radius:14px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(0,32,96,.14);
  color:var(--jk-blue);
  font-size:16px;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  text-align:center;
}

.jk-closebtn{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-weight:400;
  cursor:pointer;
  z-index:700;
  box-shadow:none;
}
.jk-closebtn:hover{ filter:brightness(.98); }
.jk-closebtn:focus-visible{ outline:2px solid rgba(213,170,0,.85); outline-offset:2px; }
.jk-closebtn[hidden]{ display:none !important; }

.jk-closebtn--map{
  top:16px;
  right:16px;
  width:48px;
  height:48px;
  font-size:28px;
  line-height:1;
  padding:0;
  border:1px solid rgba(0,0,0,.16);
}

.jk-closebtn--table{
  top:-12px;
  right:14px;
  padding:4px 10px;
  font-size:11px;
  line-height:1;
  min-height:24px;
  border:1px solid #002060;
  color:#002060;
}
.jk-closebtn__x{ font-size:16px; line-height:1; }

#jkTableCard{ position:relative; overflow:visible; margin-top:10px; }
body.jk-no-route #jkTableCard{ margin-top:0; }
body.jk-no-route .jk-closebtn--table{ display:none !important; }

.jk-empty{ margin:12px; padding:16px; border-radius:14px; background:#f2f4fa; border:1px solid rgba(0,0,0,.08); }
.jk-empty__title{ font-weight:900; color:var(--jk-blue); margin-bottom:4px; }
.jk-empty__sub{ font-size:13px; opacity:.85; }


/* The wrapper itself should not scroll. We scroll only the stop rows area inside the table. */
.jk-tablewrap{
  overflow:hidden;
  /* Reserve a fixed area on desktop so ONLY the stop rows scroll */
  height: calc(100vh - 330px);
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Be defensive: some themes/plugins override the [hidden] attribute.
   Ensure the table wrapper is truly removed from layout when hidden, otherwise
   it can reserve a huge height even when no route is selected. */
.jk-tablewrap[hidden]{
  display:none !important;
}

/* Make the shortcode table box a flex column so the header/livebar stay fixed */
.jk-tablewrap .jk-box{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* This wrapper will be injected around the <table> so ONLY rows scroll */
.jk-pwa-tbody-scroll{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  min-height:0;
  flex:1 1 auto;
}

/* A táblázat fejléce maradjon látható görgetés közben */
.jk-tablewrap table.jk-table thead th{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

/* A fejléc feliratok legyenek kompaktabbak a PWA-n belül */
.jk-tablewrap table.jk-table th{
  padding: 5px 4px;
  line-height: 1.15;
}
.jk-tablewrap table.jk-table thead tr:nth-child(2) th{
  white-space: nowrap;
}

/* The shortcode table wrapper should not add extra margins */
.jk-tablewrap .jk-box{ margin:0 !important; width:100%; }


/* Do NOT override the shortcode table styles (they are already tuned) */
.jk-tablewrap table{ width:100%; }

/* Vehicle marker */
.jk-veh-dot{
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
/* Keep these in sync with the shortcode delay colors */
.jk-veh-green{ background:#68F527; }
.jk-veh-yellow{ background:#ffeb3b; }
.jk-veh-orange{ background:#ff9800; }
.jk-veh-red{ background:#FF0000; }
.jk-veh-gray{ background:#bdbdbd; }

.jk-veh-icon{
  /* Must match buildVehicleIcon() iconSize; otherwise the SVG can be clipped and
     the arrow may appear different length depending on rotation. */
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  box-shadow:none; /* a div-arnyek teglalap lenne */
}
/* Ensure no theme styles add a square background around Leaflet divIcons */
.leaflet-marker-icon{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


.jk-veh-icon svg{
  /* az arnyek a valodi alakzatot kovesse, ne teglalap legyen */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
.jk-veh-icon svg{
  width:28px;
  height:28px;
  display:block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}

/* Ensure rotation never gets visually clipped (Safari can be strict on root SVG overflow). */
.jk-veh-svg{ overflow: visible; }
.jk-veh-svg{ overflow: visible; }

/* Tooltip */
.leaflet-tooltip.jk-tooltip{
  background:#fff;
  color:#000;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  padding:8px 10px;
  border-radius:12px;
}
.jk-tip__title{ font-weight:900; font-size:13px; line-height:1.2; margin-bottom:4px; color:var(--jk-blue); }
.jk-tip__route{ font-weight:400; font-size:12px; line-height:1.2; margin:-2px 0 4px; opacity:.92; }
.jk-tip__meta{ font-size:12px; opacity:.9; }

/* Footer */
.jk-footer{ padding:16px; text-align:center; font-size:12px; opacity:.75; }

/* Responsive */
@media (max-width: 980px){
  html,body{ height:100%; overflow:hidden; }
  body{ overflow:hidden; }
  /* iOS Safari: stabilabb magasság */
  .jk-app{ height:100vh; height:100dvh; }

  .jk-main{
    max-width:unset;
    margin:0;
    padding:12px;
    gap:12px;
    grid-template-columns:1fr;
    display:flex;
    flex-direction:column;
    width:100%;
    align-items:stretch;
    height: calc(100vh - var(--jk-topbars, 56px));
    overflow:hidden;
  }

  /* Map uses remaining space by default */
  .jk-mapcard{
    height:auto;
    min-height:220px;
    flex:1;
  }

  .jk-mapcard{ width:100%; min-width:0; }

  .jk-side{ overflow:hidden; min-height:0; flex:1 1 auto; }
  .jk-controls{ flex:0 0 auto; }
  .jk-tablecard{ flex:1 1 auto; }

  /* Put date + route next to each other on mobile */
  .jk-controls{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    align-items:stretch;
    padding:10px;
  }

  .jk-field{ min-width:0; }
  .jk-label{ margin-bottom:4px; }
  .jk-input{ min-height:44px; height:44px; padding:8px 10px; font-size:14px; }
  input.jk-input[type="date"]{ -webkit-appearance:none; appearance:none; }

  /* When a table is shown, shrink the map to make room (target ~40% map / ~60% controls+table) */
  body.jk-has-table .jk-mapcard{
    flex:0 0 40%;
    height:40%;
    min-height:160px;
    max-height:45vh;
  }

  /* The card is fixed; only the stop rows area scrolls */
  .jk-tablecard{ display:flex; flex-direction:column; min-height:0; }
  .jk-tablewrap{ max-height: unset; height:100%; flex:1; min-height:0; overflow:hidden; }

  /* No page scrolling on mobile: drop footer to keep everything in-view */
  .jk-footer{ display:none; }
}

@media (max-width:480px){
  .jk-closebtn--map{ top:12px; right:12px; width:44px; height:44px; font-size:26px; }
  .jk-closebtn--table{ top:-10px; right:10px; padding:3px 9px; min-height:22px; font-size:10px; }
  .jk-closebtn__x{ font-size:14px; }
  #jkTableCard{ margin-top:8px; }
  .jk-header{ padding:10px 12px; }
  .jk-logo{ height:34px; }
  .jk-title{ font-size:16px; }
  .jk-clock{ font-size:13px; padding:5px 8px; border-radius:10px; }
  .jk-main{ padding:12px; gap:12px; }
  body.jk-has-table .jk-mapcard{ flex-basis:38%; height:38%; min-height:140px; max-height:42vh; }
}

/* Mobile state: hide table until a route is selected */
@media (max-width: 980px){
  /* On mobile we still show the "Válasszon járatot" message under the picker */
  body.jk-no-route #jkTableCard{ display:block; flex:0 0 auto; }
  body.jk-no-route #jkTableWrap{ display:none !important; }

  /* When no route is selected, keep the controls at the bottom and the map fills the middle */
  body.jk-no-route .jk-side{ flex:0 0 auto; margin-top:auto; }
  body.jk-no-route .jk-mapcard{ flex:1 1 auto; min-height:240px; }
}



/* Make Leaflet attribution as unobtrusive as possible */
.leaflet-control-attribution{
  font-size:9px !important;
  line-height:1.1 !important;
  opacity:0.55;
  padding:0 4px !important;
  background:transparent !important;
}
.leaflet-control-attribution a{
  font-size:inherit !important;
}


@media (max-width: 980px){
  body.jk-browser-mobile .jk-main{ gap:10px; }
  body.jk-browser-mobile .jk-controls{ padding:8px; gap:8px; }
  body.jk-browser-mobile .jk-label{ margin-bottom:3px; }
  body.jk-browser-mobile .jk-input{ min-height:42px; height:42px; padding:7px 9px; font-size:13px; }
  body.jk-browser-mobile.jk-has-table .jk-mapcard{ flex:0 0 31%; height:31%; min-height:120px; max-height:33vh; }
  body.jk-browser-mobile.jk-has-table .jk-tablecard{ min-height:260px; }
  body.jk-browser-mobile.jk-has-table #jkTableCard{ margin-top:4px; }
}
@media (max-width: 480px){
  body.jk-browser-mobile.jk-has-table .jk-mapcard{ flex-basis:29%; height:29%; min-height:116px; max-height:31vh; }
  body.jk-browser-mobile .jk-controls{ padding:8px; gap:8px; }
}

/* 1.58.2: the familiar flat blue-white appearance, with shared layout constraints. */
#app > .jk-header{ background:#002060; color:#fff; padding:12px 16px; border:0; border-radius:0; font-size:inherit; flex-wrap:nowrap; }
.jk-header__right{ gap:10px; --jk-header-control-height:32px; }
.jk-header__right .jk-clock,.jk-ticket-link{ height:var(--jk-header-control-height); min-height:0; display:inline-flex; align-items:center; justify-content:center; padding:0 10px; border:1px solid rgba(255,255,255,.25); border-radius:10px; background:rgba(255,255,255,.08); color:#fff; line-height:1; }
.jk-ticket-link{ gap:6px; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
.jk-ticket-short{ display:none; }
.jk-ticket-link:hover{ background:rgba(255,255,255,.16); }
.jk-controls{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.jk-field{ min-width:0; }
.jk-field--picker{ grid-column:1 / -1; }
.jk-input{ height:40px; min-width:0; color:#002060; font-family:inherit; }
.jk-mode-switch{ display:flex; height:40px; border:1px solid #c9cfda; border-radius:12px; overflow:hidden; }
.jk-mode-switch button{ flex:1; min-width:0; border:0; padding:6px; background:#fff; color:#002060; font:inherit; font-size:13px; cursor:pointer; }
.jk-mode-switch button + button{ border-left:1px solid #c9cfda; }
.jk-mode-switch button[aria-pressed="true"]{ background:#002060; color:#fff; }
.jk-ticket-link:focus-visible,.jk-mode-switch button:focus-visible,.jk-stop-link:focus-visible,.jk-train-link:focus-visible,.jk-station-expand:focus-visible,.jk-map-tooltip:focus-visible{ outline:2px solid #d5aa00; outline-offset:2px; }
.jk-side{ min-width:0; }
#jkTableWrap{ border-radius:14px; min-height:0; }
#jkTableWrap .jk-box{ min-height:0; border:0; border-radius:0; box-shadow:none; background:#f0f0f0; }
#jkTableWrap .jk-box > .jk-header,#jkTableWrap .jk-station-titlebar{ position:static; flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:56px; padding:14px 12px; border:0; border-radius:0; background:#0f2b57; color:#fff; font-size:15px; line-height:22px; flex-wrap:nowrap; box-shadow:none; }
#jkTableWrap .jk-station-titlebar time{ flex:none; font-weight:700; }
#jkTableWrap .jk-livebar{ flex-shrink:0; }
#jkTableWrap .jk-pwa-table-head{ flex:none; background:#fff; }
#jkTableWrap table.jk-table{ border-collapse:collapse; table-layout:fixed; margin:0; font-variant-numeric:tabular-nums; }
#jkTableWrap table.jk-table thead th{ font-size:12px; color:#000; line-height:1.25; background:#fff; }
#jkTableWrap table.jk-table .jk-sr-thead{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); }
#jkTableWrap .jk-pwa-tbody-scroll{ position:relative; overscroll-behavior:contain; overflow-anchor:none; }
.jk-stop-link{ color:#002060; text-decoration:none; text-underline-offset:3px; }
.jk-stop-link:hover{ text-decoration:underline; }
.jk-closebtn--back{ top:-12px; left:14px; padding:4px 10px; min-height:24px; border:1px solid #002060; color:#002060; font-size:11px; line-height:1; }
.jk-closebtn--back span{ font-size:15px; }
#jkTableWrap .jk-station-table th,#jkTableWrap .jk-station-table td{ padding:6px; border:0; font-size:13px; color:#000; text-align:center; vertical-align:middle; }
#jkTableWrap .jk-station-table thead th{ padding:5px 3px; border-bottom:1px solid #eee; }
#jkTableWrap .jk-station-train > tr > *{ background:#f7f7f7; }
#jkTableWrap .jk-station-train:nth-of-type(even) > tr > *{ background:#fff; }
#jkTableWrap .jk-station-train.jk-done > tr > *{ background:#d9f3e2; }
#jkTableWrap .jk-station-train.jk-done:nth-of-type(even) > tr > *{ background:#b7e6c6; }
#jkTableWrap .jk-station-train > tr:first-child > td{ padding-top:9px; padding-bottom:2px; border-top:1px solid #ddd; }
#jkTableWrap .jk-station-train > tr[data-time-row] > td{ padding:2px 5px 9px; }
.jk-station-time-col{ width:58px; }
.jk-station-info-col{ width:var(--jk-station-info-width,32px); }
#jkTableWrap .jk-station-table td.jk-station-service{ text-align:center; overflow-wrap:anywhere; }
#jkTableWrap .jk-station-train > tr > td.jk-station-info-cell{ padding-left:3px; padding-right:3px; text-align:right; }
.jk-train-link{ color:#002060; text-decoration:none; line-height:1.35; overflow-wrap:anywhere; }
.jk-train-link:hover{ text-decoration:underline; text-underline-offset:3px; }
.jk-train-link .jk-map-route-badge{ white-space:nowrap; }
.jk-train-link span{ font-size:12px; }
.jk-station-flags{ display:inline-flex; align-items:center; justify-content:flex-end; gap:4px; margin-right:5px; vertical-align:middle; }
.jk-station-flags > *{ flex:0 0 16px; width:16px; height:16px; }
.jk-station-icon{ width:16px; height:16px; object-fit:contain; background:transparent; }
/* White pixels in the existing pictograms blend into the underlying row. */
#jkTableWrap .jk-station-icon,#jkTableWrap .jk-stop-info img{ mix-blend-mode:multiply; }
.jk-station-expand{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; margin-left:auto; border:1px solid #b7c2d3; border-radius:7px; background:transparent; color:#002060; cursor:pointer; padding:3px 0; }
.jk-station-expand[aria-expanded="true"]{ background:#002060; border-color:#002060; color:#fff; }
.jk-station-journey{ display:flex; width:fit-content; max-width:100%; margin:0 auto; gap:5px; align-items:center; justify-content:center; text-align:left; font-size:11px; line-height:1.4; }
.jk-station-journey > span:not(.jk-endpoint-arrow){ flex:0 1 auto; min-width:0; overflow-wrap:anywhere; }
.jk-station-origin{ text-align:right; }
.jk-station-journey b{ font-weight:400; }
.jk-station-journey time{ white-space:nowrap; }
.jk-endpoint-arrow{ color:#526884; }
#jkTableWrap .jk-station-table td.jk-station-realtime.is-changed{ color:#c00020; }
#jkTableWrap .jk-station-table td.jk-station-realtime.is-ontime{ color:#187335; }
.jk-station-table sup{ font-size:8px; margin-left:1px; }
.jk-station-details[hidden],.jk-station-status[hidden]{ display:none !important; }
#jkTableWrap .jk-station-details td{ text-align:left; padding:0 8px 8px; }
.jk-station-notice,.jk-station-message{ margin-top:7px; padding:9px 10px; border:1px solid #ead376; border-left:3px solid #d5aa00; border-radius:0 7px 7px 0; background:#fff6cc; color:#0f2b57; font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.jk-station-notice p,.jk-station-message p{ margin:3px 0 0; }
.jk-station-message{ border-color:#efc5cd; border-left-color:#c40028; background:#fff2f4; }
.jk-station-message p{ white-space:pre-line; }
.jk-station-status{ margin:0; padding:8px 12px; font-size:12px; background:#fff4cd; color:#694c00; flex:none; }
#jkTableWrap .jk-station-empty{ padding:22px 16px; line-height:1.5; color:#444; }
.jk-retry{ background:#002060; border:0; border-radius:10px; padding:10px 16px; color:#fff; cursor:pointer; }
/* The map and the entire right column share one definite grid row. */
@media(min-width:981px){
  .jk-main{ height:calc(100vh - 160px); min-height:420px; flex:0 0 auto; grid-template-rows:minmax(0,1fr); align-items:stretch; }
  .jk-mapcard{ height:100%; min-height:0; }
  .jk-side{ height:100%; min-height:0; }
  .jk-controls{ flex:none; }
  #jkTableCard{ flex:1 1 0; min-height:0; }
  #jkTableWrap{ height:auto; flex:1 1 0; min-height:0; }
  body.jk-no-route #jkTableCard{ flex:0 0 auto; }
}
@media(max-width:980px){
  .jk-main{ flex:1; min-height:0; height:auto; }
  body.jk-has-table .jk-side{ flex:1; }
  body.jk-has-table .jk-mapcard,body.jk-browser-mobile.jk-has-table .jk-mapcard{ flex:0 0 31%; height:31%; min-height:100px; max-height:33vh; }
  body.jk-has-table .jk-tablecard,body.jk-browser-mobile.jk-has-table .jk-tablecard{ min-height:0; }
  body.jk-has-table.jk-station-view .jk-mapcard{ display:none; }
  .jk-tablewrap{ height:100%; }
  .jk-side{ gap:12px; }
  body.jk-no-route .jk-mapcard{ min-height:80px; }
  .jk-controls,body.jk-browser-mobile .jk-controls{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:8px; gap:8px; }
  .jk-field--picker{ grid-column:1 / -1; }
  .jk-controls .jk-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); }
  .jk-controls .jk-input,body.jk-browser-mobile .jk-controls .jk-input{ height:40px; min-height:40px; padding:7px 8px; border-radius:9px; font-size:13px; }
  .jk-mode-switch{ display:flex; height:40px; }
}
@media(max-width:480px){
  #app > .jk-header{ padding:9px 10px; gap:6px; }
  .jk-header__left,.jk-header__right{ gap:7px; }
  .jk-header__right{ --jk-header-control-height:30px; }
  .jk-title{ font-size:15px; }
  .jk-logo{ height:32px; }
  .jk-header__right .jk-clock{ font-size:12px; padding:0 6px; }
  .jk-ticket-link{ font-size:11px; padding:0 7px; gap:4px; }
  .jk-ticket-full{ display:none; } .jk-ticket-short{ display:inline; }
  .jk-main{ padding:10px; }
  .jk-closebtn--back{ left:10px; top:-10px; min-height:22px; padding:3px 9px; font-size:10px; }
  #jkTableWrap .jk-box > .jk-header,#jkTableWrap .jk-station-titlebar{ min-height:50px; padding:12px 10px; font-size:14px; line-height:20px; }
  #jkTableWrap table.jk-table thead th{ font-size:11px; }
  #jkTableWrap .jk-station-table th,#jkTableWrap .jk-station-table td{ padding-left:5px; padding-right:5px; font-size:12px; }
}
@media(max-width:360px){
  .jk-ticket-link svg{ display:none; }
  .jk-title{ font-size:14px; }
  .jk-logo{ height:28px; }
  .jk-header__left{ gap:5px; }
  .jk-controls,body.jk-browser-mobile .jk-controls{ gap:7px; padding:7px; }
  .jk-station-time-col{ width:51px; }
  .jk-station-info-col{ width:var(--jk-station-info-width,32px); }
}
@media(max-width:980px) and (max-height:560px){
  .jk-main{ padding:6px 10px; gap:6px; }
  body.jk-has-table .jk-mapcard,body.jk-browser-mobile.jk-has-table .jk-mapcard{ flex:0 0 70px; height:70px; min-height:70px; }
  .jk-side{ gap:8px; }
}
/* Interactive map information, constrained inside the map at every screen size. */
.jk-map-tooltip{ position:absolute; z-index:1100; box-sizing:border-box; width:max-content; max-width:min(480px,calc(100% - 20px)); overflow:visible; border-radius:10px; color:#000; font-size:12px; cursor:pointer; }
.jk-map-tooltip::before{ content:""; position:absolute; left:-12px; top:var(--jk-tip-pointer-y,50%); transform:translateY(-50%); width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:12px solid #002060; }
.jk-map-tooltip-content{ box-sizing:border-box; max-width:100%; max-height:inherit; overflow:auto; overscroll-behavior:contain; padding:10px 12px; border:1px solid #b9c5d7; border-radius:10px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.18); }
.jk-map-tooltip[hidden]{ display:none; }
.jk-map-tooltip .jk-tip__title{ color:#002060; font-size:14px; margin:0 0 4px; }
.jk-map-tip-period{ margin:0 0 7px; color:#555; font-size:11px; }
/* Auto table layout shares the widest number/name/time cell across departures. */
.jk-map-departures{ border-collapse:collapse; table-layout:auto; width:auto; margin:0; font-size:12px; }
.jk-map-departures td{ padding:6px 0; vertical-align:middle; border-top:1px solid #e5e8ed; }
.jk-map-departures td + td{ padding-left:8px; }
.jk-map-departures td:first-child,.jk-map-departure-times{ white-space:nowrap; }
.jk-map-departure-times{ text-align:right; }
.jk-map-planned-time{ color:#555; font-size:12px; margin-right:6px; }
.jk-vehicle-title{ display:flex; align-items:center; gap:7px; }
.jk-vehicle-title > span:last-child{ overflow-wrap:anywhere; }
.jk-map-tooltip .jk-tip__route{ overflow-wrap:anywhere; }
.jk-map-route-badge{ display:inline-block; padding:3px 6px; border-radius:4px; font-size:12px; font-weight:700; line-height:1.2; }
.jk-map-departure-name{ display:block; line-height:1.25; overflow-wrap:anywhere; }
.jk-map-departure-journey{ display:block; color:#444; font-size:11px; line-height:1.3; overflow-wrap:anywhere; }
.jk-map-departure-time{ color:#000; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.jk-map-departure-time.is-ontime{ color:#187335; }
.jk-map-departure-time.is-late{ color:#c00020; }

/* Compact map previews on mobile; timetable badges keep their normal size. */
@media(max-width:980px){
  .jk-map-tooltip{ font-size:10px; }
  .jk-map-tooltip-content{ padding:7px 8px; }
  .jk-map-tooltip-content > p{ margin:6px 0; }
  .jk-map-tooltip .jk-tip__title{ font-size:12px; margin-bottom:3px; }
  .jk-map-tooltip .jk-tip__route,.jk-map-tooltip .jk-tip__meta{ font-size:10px; }
  .jk-map-tooltip .jk-map-tip-period{ font-size:9px; margin:0 0 5px; }
  .jk-map-tooltip .jk-map-departures{ font-size:10px; }
  .jk-map-tooltip .jk-map-departures td{ padding-top:4px; padding-bottom:4px; }
  .jk-map-tooltip .jk-map-departures td + td{ padding-left:5px; }
  .jk-map-tooltip .jk-map-route-badge{ font-size:10px; padding:2px 4px; }
  .jk-map-tooltip .jk-map-departure-journey{ font-size:9px; }
  .jk-map-tooltip .jk-map-departure-time{ font-size:12px; }
  .jk-map-tooltip .jk-map-planned-time{ font-size:10px; margin-right:4px; }
  .jk-map-tooltip .jk-vehicle-title{ gap:5px; }
}