/* ===== No scrolling (kiosk mode) ===== */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;              /* disables scrollbars */
  overscroll-behavior: none;     /* disables iOS/Android bounce */
  touch-action: none;            /* prevents touch scroll gestures */
}

/* Wrapper should always fill the screen */
#burnin-shift {
  min-height: 100vh;
  position: relative;
  padding-bottom: 40px;          /* reserve space for footer */
  box-sizing: border-box;
}

/* Footer always visible */
footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;

  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(229,231,235,0.45);

  pointer-events: none;
  z-index: 10;
}


html {
    font-size: 18px;
}

/* --- Top clock + update: attach perfectly --- */
.timeBox {
  width: min(520px, 86%);
  height: 68px;
  margin: 18px auto 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.10);
  border-bottom: 0;                 /* join seam */
  background: rgba(255,255,255,0.04);

  border-radius: 18px 18px 0 0;     /* top only */
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);

  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.updateBox {
  width: min(520px, 86%);           /* MUST match timeBox */
  height: 34px;

  margin: 0 auto 18px;              /* IMPORTANT: no negative margin */
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.10);
  border-top: 0;                    /* join seam */
  background: rgba(255,255,255,0.03);

  border-radius: 0 0 18px 18px;     /* bottom only */
  box-shadow: none;                 /* prevents “double shadow overlap” look */
}

.uppdatering-tid {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(229,231,235,0.72);
}



.mainBox {
    border-radius: 18px;
    border: 2px solid black;
    padding-left: 0px;
    width: 80%;
    height: 30%;
    margin: auto; 
    display: flex; 
    background: #111827;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.left-box {
  border: 2px solid black;
  flex: 2;
  padding: 0;
  margin: 0;
  position: relative;

  display: flex;
  flex-direction: column;
}

.gångBox {
  position: absolute;
  top: 1em;
  right: 1em;
  padding: 0em 0.1em;
  border: 1px solid black;
  border-radius: 999px;

  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.gång-tid {
   text-align: center; 
   font-size: 0.9rem; 
   padding-right: 8px;
}

/*no need for a hard-coded heigh since it's a flex-child and will stretch to fit parent. */
.right-box {
    border: 0px solid black; 
    flex: 1;
    display: flex; 
    flex-direction: column; 
}

.busstitel {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-weight: bold; 
    text-align: start;
    margin-top: 0px;
    margin-bottom: 10px; 
    margin-left: 7px;
    font-family: 'Courier New', Courier; 
}

.bottom-row {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 6px;   /* gives breathing room above the mainBox border */
}

.kommande-avgångar {
  display: flex;
  align-items: stretch;

  border: 2px solid black;
  border-left: 0;
  border-bottom: 0;
  border-radius: 12px;

  font-size: 0.9rem;
  padding: 6px 8px;
  background: rgba(255,255,255,0.04);

  margin-bottom: -6px;
}

.avgång-tid {
  font-size: 3rem;
  font-weight: 700;
}

.kommande-avgångar > label {
  display: flex;          /* makes each label a flex item */
  align-items: center;    /* vertically center*/
}

label[class*="avgång"] {
    border-left: 2px solid black; 
    padding: 0px 12px 0px 12px;
}

/*removes first left-border. NOTE: this needs to be more specific than label[class="avgång"] to be able to overwrite it */
label.nästa-avgång-tid-1 {
    border-left: 0px solid black; 
    padding: 0px 12px 0px 2px; 
}

.emoji {
    font-size: 0.8em; 
}


.avgång-box {

}

.avgång-station {
    font-size: 0.8rem; 
    text-align: start; 
}

.destination-box {
    border: 2px solid green; 
}

.destination-station {
    font-size: 0.8rem; 
    text-align: start; 
}

.avgång-box,
.destination-box {
    border: 2px solid black;
    padding: 4px 8px;
    flex: 1; 
}

.avgång-box p,
.destination-box p {
    margin: 0;      /* without this, font size makes the boxes way too big */
    display: inline-block; 
    
}

/* planned/realtime behavior */
.avgång-tid .planned,
.destination-tid .planned { margin-right: 0.4em; }

.avgång-tid.delayed .planned,
.destination-tid.delayed .planned {
  text-decoration: line-through;
  opacity: 0.7;
}

.avgång-tid:not(.delayed) .realtime,
.destination-tid:not(.delayed) .realtime {
  display: none;
}

/* delay badge */
.delay-badge {
  margin-left: 0.5em;
  padding: 0.05em 0.4em;
  border: 1px solid black;
  border-radius: 999px;
  font-size: 0.7em;
  display: none; /* only show when delayed */
}

.delayed .delay-badge { display: inline-block; }

/* severity styling (you can change colors later) */
.delay-minor .delay-badge { opacity: 0.8; }
.delay-medium .delay-badge { font-weight: bold; }
.delay-major .delay-badge { font-weight: bold; text-decoration: underline; }

#cards .mainBox { margin: 18px auto; }

.avgång-box,
.destination-box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* subtle spacing between station and time */
}

/* Ensure each <p> takes its own line */
.avgång-box p,
.destination-box p {
  display: block;   /* was inline-block */
  margin: 0;
}

.installd-label {
  margin-top: 0.15em;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: darkred;
}

/* Red text for times when cancelled */
.mainBox.installd .avgång-tid,
.mainBox.installd .destination-tid {
  color: darkred;
}

.installd-label {
  margin-top: 0.15em;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: darkred;
}

.mainBox.installd .avgång-tid,
.mainBox.installd .destination-tid {
  color: darkred;
}


.anim-cancel .installd-label {
  animation: popInSubtle 200ms ease-out;
}

.anim-pop {
  animation: popInSubtle 200ms ease-out;
}

/* Default delayed styling (you already have strike-through etc) */
.avgång-tid.delayed .realtime,
.destination-tid.delayed .realtime,
.avgång-tid.delayed .delay-badge,
.destination-tid.delayed .delay-badge {
  font-weight: 700;
}

/* Severity colors (set by applyDelayClasses on the <p>) */
.avgång-tid.delay-minor .realtime,
.destination-tid.delay-minor .realtime,
.avgång-tid.delay-minor .delay-badge,
.destination-tid.delay-minor .delay-badge {
  color: #b58900; 
}

.avgång-tid.delay-medium .realtime,
.destination-tid.delay-medium .realtime,
.avgång-tid.delay-medium .delay-badge,
.destination-tid.delay-medium .delay-badge {
  color: #d17a00; 
}

.avgång-tid.delay-major .realtime,
.destination-tid.delay-major .realtime,
.avgång-tid.delay-major .delay-badge,
.destination-tid.delay-major .delay-badge {
  color: #e53935; 
}

.avgång-tid.delay-minor,
.destination-tid.delay-minor { color: #b58900; }

.avgång-tid.delay-medium,
.destination-tid.delay-medium { color: #d17a00; }

.avgång-tid.delay-major,
.destination-tid.delay-major { color: #e53935; }

/* Upcoming departures: color by severity */
.kommande-avgångar .delay-minor { color: #b58900; font-weight: 700; }
.kommande-avgångar .delay-medium { color: #d17a00; font-weight: 700; }
.kommande-avgångar .delay-major { color: #e53935; font-weight: 700; }

/* Upcoming departures – tiny delay indicator */
.kommande-avgångar .delay-sup {
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 1px;
  font-weight: 700;
}

/* Color follows severity */
.kommande-avgångar .delay-minor .delay-sup { color: #b58900; }
.kommande-avgångar .delay-medium .delay-sup { color: #d17a00; }
.kommande-avgångar .delay-major .delay-sup { color: #e53935; }

.kommande-avgångar .cancelled {
  color: #e53935;
  text-decoration: line-through;
  opacity: 0.9;
  font-weight: 700;
}

/* ===================== V2 COMPLETE THEME (Hallway Portrait Tablet) ===================== */

/* --- Base type + background --- */
html {
  font-size: 18px; /* good base for ~2m readability */
}

body {
  margin: 0;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Optional: smoother text on some devices */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Cards container spacing --- */
#cards .mainBox {
  width: min(720px, 92%);
  margin: 16px auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(17, 24, 39, 0.92);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}

/* Remove old heavy inner borders */
#cards .left-box,
#cards .right-box,
#cards .avgång-box,
#cards .destination-box {
  border: 0 !important;
}

/* Layout: make the split feel intentional */
#cards .left-box {
  flex: 2.1;
  padding: 14px 14px 10px 14px;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  display: flex;
  flex-direction: column;
}

#cards .right-box {
  flex: 1.2;
  padding: 10px;
  gap: 10px;
}

/* --- Walking pill --- */
#cards .gångBox {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(229,231,235,0.85);
  padding: 0.15em 0.55em;
}

#cards .gång-tid {
  font-size: 0.95rem;
}

/* --- Title hierarchy: clean & modern --- */
#cards .busstitel {
  margin: 0;
  margin-top: 2px;
  font-size: 1.55rem; /* ~28px */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: inherit; /* override Courier */
  color: #f3f4f6;
}

/* INSTÄLLD label beneath title */
.installd-label {
  margin-top: 0.25em;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #ff4d4d;
}

/* --- Right side: info boxes feel like panels --- */
#cards .avgång-box,
#cards .destination-box {
  background: rgba(255,255,255,0.035);
  border-radius: 16px;
  padding: 10px 12px;
}

/* Station labels */
#cards .avgång-station,
#cards .destination-station {
  font-size: 0.95rem;
  color: rgba(229,231,235,0.70);
  letter-spacing: 0.02em;
}

/* Main times: HERO */
#cards .avgång-tid,
#cards .destination-tid {
  font-size: 2.9rem; /* ~52px (big for 2m) */
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.0;
}

/* Planned/realtime behavior */
.avgång-tid .planned,
.destination-tid .planned {
  margin-right: 0.35em;
}

/* Hide realtime when not delayed */
.avgång-tid:not(.delayed) .realtime,
.destination-tid:not(.delayed) .realtime {
  display: none;
}

/* Delay badge (right box) */
.delay-badge {
  margin-left: 0.35em;
  padding: 0.12em 0.5em;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  display: none;
  background: rgba(0,0,0,0.20);
}

.delayed .delay-badge {
  display: inline-block;
}

/* --- Kommande avgångar: pill row --- */
#cards .bottom-row {
  margin-top: auto;
  padding-top: 10px;
}

#cards .kommande-avgångar {
  display: flex;
  gap: 10px;
  align-items: center;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px;

  padding: 8px 10px;
  margin: 0;
}

/* Remove separators without killing padding on upcoming time pills */
#cards .kommande-avgångar > label {
  border-left: 0 !important;
}

#cards .kommande-avgångar > label.nästa-avgång-tid-1,
#cards .kommande-avgångar > label.nästa-avgång-tid-2,
#cards .kommande-avgångar > label.nästa-avgång-tid-3 {
  padding: 1px 3px !important;
}


/* First text label */
#cards .kommande-avgångar > label:first-child {
  color: rgba(229,231,235,0.65);
  font-size: 0.95rem;
  margin-right: 6px;
}

/* Upcoming time labels */
#cards .nästa-avgång-tid-1,
#cards .nästa-avgång-tid-2,
#cards .nästa-avgång-tid-3 {
  font-size: 1.2rem; /* ~22px */
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
}

/* Upcoming cancelled */
.kommande-avgångar .cancelled {
  color: #ff4d4d;
  text-decoration: line-through;
  opacity: 0.95;
}

/* Upcoming superscript delay */
.kommande-avgångar .delay-sup {
  font-size: 0.60em;
  vertical-align: super;
  margin-left: 2px;
  font-weight: 900;
}

/* --- Delay colors (consistent) --- */
.avgång-tid.delayed .realtime,
.destination-tid.delayed .realtime,
.avgång-tid.delayed .delay-badge,
.destination-tid.delayed .delay-badge {
  font-weight: 900;
}

/* Minor (yellow) */
.avgång-tid.delay-minor .realtime,
.destination-tid.delay-minor .realtime,
.avgång-tid.delay-minor .delay-badge,
.destination-tid.delay-minor .delay-badge,
.kommande-avgångar .delay-minor,
.kommande-avgångar .delay-minor .delay-sup {
  color: #f6c453;
}

/* Medium (orange) */
.avgång-tid.delay-medium .realtime,
.destination-tid.delay-medium .realtime,
.avgång-tid.delay-medium .delay-badge,
.destination-tid.delay-medium .delay-badge,
.kommande-avgångar .delay-medium,
.kommande-avgångar .delay-medium .delay-sup {
  color: #ff9f43;
}

/* Major (red, readable) */
.avgång-tid.delay-major .realtime,
.destination-tid.delay-major .realtime,
.avgång-tid.delay-major .delay-badge,
.destination-tid.delay-major .delay-badge,
.kommande-avgångar .delay-major,
.kommande-avgångar .delay-major .delay-sup {
  color: #ff5a5f;
}

/* Cancellation red for right side */
.mainBox.installd .avgång-tid,
.mainBox.installd .destination-tid {
  color: #ff4d4d;
}

.anim-pop {
  animation: popInSubtle 200ms ease-out;
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 8px;

  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.04em;

  color: rgba(229,231,235,0.45);
  pointer-events: none;
  z-index: 10;
}



/* ===================== THEME VARIABLES ===================== */
:root {
  --bg: #0b1220;
  --bgGlow: rgba(56, 189, 248, 0.10);
  --text: #e5e7eb;

  --card: rgba(17, 24, 39, 0.92);
  --chip: rgba(255,255,255,0.04);
  --chip2: rgba(255,255,255,0.03);

  --border: rgba(255,255,255,0.10);
  --divider: rgba(255,255,255,0.08);

  --panel: rgba(255,255,255,0.035);
  --panel2: rgba(255,255,255,0.03);
}

/* Day mode overrides */
body.theme-day {
  --bg: #f5f7fb;
  --bgGlow: rgba(59, 130, 246, 0.10);
  --text: #0f172a;

  --card: rgba(255,255,255,0.92);
  --chip: rgba(15,23,42,0.04);
  --chip2: rgba(15,23,42,0.03);

  --border: rgba(15,23,42,0.10);
  --divider: rgba(15,23,42,0.08);

  --panel: rgba(15,23,42,0.03);
  --panel2: rgba(15,23,42,0.02);
}

/* Apply vars to your UI */
body {
  color: var(--text);
}

.timeBox,
.updateBox {
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
}

.updateBox { background: var(--chip2); }

#cards .mainBox {
  border: 1px solid var(--border);
  background: var(--card);
}

#cards .left-box { border-right: 1px solid var(--divider) !important; }

#cards .avgång-box,
#cards .destination-box { background: var(--panel); }

#cards .kommande-avgångar { background: var(--panel2); border: 1px solid var(--border) !important; }

.uppdatering-tid,
#cards .avgång-station,
#cards .destination-station,
#cards .kommande-avgångar > label:first-child,
footer {
  color: color-mix(in srgb, var(--text) 70%, transparent);
}

/* ===================== FIXED NIGHT THEME ===================== */

html {
  font-size: 18px;
}

body {
  margin: 0;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Top clock --- */
.timeBox {
  width: min(520px, 86%);
  height: 68px;
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.updateBox {
  width: min(420px, 78%);
  height: 34px;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 0;
  background: rgba(255,255,255,0.03);
  border-radius: 0 0 18px 18px;
}

.uppdatering-tid {
  font-size: 0.9rem;
  color: rgba(229,231,235,0.72);
}

/* --- Cards --- */
#cards .mainBox {
  width: min(720px, 92%);
  margin: 16px auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(17, 24, 39, 0.92);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}

/* Remove old heavy borders */
#cards .left-box,
#cards .right-box,
#cards .avgång-box,
#cards .destination-box {
  border: 0 !important;
}

/* Layout */
#cards .left-box {
  flex: 2.1;
  padding: 14px;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  display: flex;
  flex-direction: column;
}

#cards .right-box {
  flex: 1.2;
  padding: 10px;
  gap: 10px;
}

/* Title */
#cards .busstitel {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f3f4f6;
}

/* INSTÄLLD label */
.installd-label {
  margin-top: 0.25em;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #ff4d4d;
}

/* Panels */
#cards .avgång-box,
#cards .destination-box {
  background: rgba(255,255,255,0.035);
  border-radius: 16px;
  padding: 10px 12px;
}

/* Stations */
#cards .avgång-station,
#cards .destination-station {
  font-size: 0.95rem;
  color: rgba(229,231,235,0.70);
}

/* Times */
#cards .avgång-tid,
#cards .destination-tid {
  font-size: 2.9rem;
  font-weight: 800;
  line-height: 1;
}

/* Delay badge */
.delay-badge {
  margin-left: 0.35em;
  padding: 0.12em 0.5em;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(0,0,0,0.25);
}

/* Kommande avgångar */
#cards .kommande-avgångar {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}

#cards .nästa-avgång-tid-1,
#cards .nästa-avgång-tid-2,
#cards .nästa-avgång-tid-3 {
  font-size: 1.2rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
}

/* Cancelled upcoming */
.kommande-avgångar .cancelled {
  color: #ff4d4d;
  text-decoration: line-through;
}

/* Delay colors */
.delay-minor { color: #f6c453; }
.delay-medium { color: #ff9f43; }
.delay-major { color: #ff5a5f; }

/* Animations */
/* Badge needs translateX(-50%) for centering, so use a special keyframe */
@keyframes popInBadgeCentered {
  from { opacity: 0; transform: translateX(-50%) translateY(-3px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* When animating the badge, keep centering intact */
.delay-badge.anim-pop {
  animation: popInBadgeCentered 200ms ease-out;
}


.anim-pop {
  animation: popInSubtle 200ms ease-out;
}

#burnin-shift {
  will-change: transform;
  transition: transform 600ms ease;
}

/* Keep the time row compact (no vertical stacking) */
.avgång-tid,
.destination-tid {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Make planned smaller when delayed (so it doesn't dominate) */
.avgång-tid.delayed .planned,
.destination-tid.delayed .planned {
  font-size: 0.55em;       /* shrink planned */
  opacity: 0.65;
}

/* Make realtime stay big */
.avgång-tid .realtime,
.destination-tid .realtime {
  position: relative; /* <-- anchor for the absolute badge */
  display: inline-block;
}


/* Badge sits next to realtime */
.delay-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12em 0.5em;
  border-radius: 999px;
  font-size: 0.32em;       /* smaller so it fits */
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.countdown {
  margin-left: 7px;
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(229,231,235,0.75);
}

.countdown strong {
  color: #f3f4f6;
  font-size: 1.25em;
}

/* When not delayed, fully collapse the realtime + badge */
.avgång-tid:not(.delayed) .realtime,
.destination-tid:not(.delayed) .realtime,
.avgång-tid:not(.delayed) .delay-badge,
.destination-tid:not(.delayed) .delay-badge {
  display: none !important;
}

.avgång-tid:not(.delayed) .planned,
.destination-tid:not(.delayed) .planned {
  margin-right: 0; /* no phantom gap */
}

.avgång-tid.delayed .planned,
.destination-tid.delayed .planned {
  margin-right: 0.35em; /* only when we show realtime */
}

/* === Delay badge ABOVE realtime === */
.avgång-tid,
.destination-tid {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.35em;
}

/* Wrap realtime + badge */
.avgång-tid .realtime,
.destination-tid .realtime {
  position: relative;
  display: inline-block;
}

/* === Compact delay badge ABOVE realtime === */
.avgång-tid .delay-badge,
.destination-tid .delay-badge {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.05em;

  font-size: 0.40em;
  opacity: 0.85;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.08em 0.38em;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;

  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
}



/* Hide badge entirely when not delayed */
.avgång-tid:not(.delayed) .delay-badge,
.destination-tid:not(.delayed) .delay-badge {
  display: none !important;
}

.avgång-tid.delayed .planned,
.destination-tid.delayed .planned {
  font-size: 0.75em;
  opacity: 0.7;
}

.avgång-tid .realtime,
.destination-tid .realtime {
  font-weight: 900;
}

/* ===== Background: NO seams on rotation ===== */
html, body {
  height: 100%;
  margin: 0;
}

body {
  background: none !important;     /* IMPORTANT: stop other body backgrounds */
  overscroll-behavior: none;       /* <-- MUST be here, not inside ::before */
}

/* Full-screen background layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background:
    /* MAIN cyan glow from above */
    radial-gradient(
      1400px 900px at 50% -420px,
      rgba(56, 189, 248, 0.28) 0%,
      rgba(56, 189, 248, 0.14) 35%,
      rgba(56, 189, 248, 0.00) 72%
    ),

    /* purple neon accent (left) */
    radial-gradient(
      900px 700px at -160px 45%,
      rgba(168, 85, 247, 0.20) 0%,
      rgba(168, 85, 247, 0.08) 35%,
      rgba(168, 85, 247, 0.00) 70%
    ),

    /* aqua neon accent (right) */
    radial-gradient(
      900px 700px at calc(100% + 160px) 55%,
      rgba(34, 211, 238, 0.18) 0%,
      rgba(34, 211, 238, 0.07) 35%,
      rgba(34, 211, 238, 0.00) 70%
    ),

    /* vignette – keeps edges dark */
    radial-gradient(
      120% 120% at 50% 45%,
      rgba(0,0,0,0.00) 40%,
      rgba(0,0,0,0.55) 100%
    ),

    /* base */
    #0b1220;

  background-repeat: no-repeat;
}

/* Animated breathing + hue-shift neon layer 
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* extra glow blobs (separate from base background) 
  background:
    radial-gradient(900px 600px at 20% 40%, rgba(56,189,248,0.18), transparent 70%),
    radial-gradient(900px 600px at 80% 60%, rgba(168,85,247,0.14), transparent 72%),
    radial-gradient(1100px 700px at 50% -10%, rgba(34,211,238,0.16), transparent 75%);

  /* soften it 
  filter: blur(6px);
  opacity: 0.55;

  transform: translateZ(0) scale(1.00);

  animation:
    neonBreathe 10s ease-in-out infinite,
    neonHue     28s linear infinite;
} */

/* slow breathing: slightly brighter + slightly larger */
@keyframes neonBreathe {
  0%, 100% { opacity: 0.42; transform: scale(0.985); }
  50%      { opacity: 0.68; transform: scale(1.02);  }
}

/* slow color cycling (very gentle) */
@keyframes neonHue {
  0%   { filter: blur(6px) hue-rotate(0deg); }
  100% { filter: blur(6px) hue-rotate(360deg); }
}

/* Respect reduced motion (and handy for debugging) */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; opacity: 0.50; }
}


#cards .mainBox {
  box-shadow:
    0 24px 60px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 24px rgba(56, 189, 248, 0.08);
}

/* ✅ Prevent delayed-time rows from forcing the whole card wider */
*, *::before, *::after { box-sizing: border-box; }

/* Make sure the card clips anything that would otherwise spill */
.mainBox { overflow: hidden; }

/* The key fix: allow flex children to shrink below their content width */
.left-box,
.right-box,
.avgång-box,
.destination-box {
  min-width: 0;
}

/* Also allow the time rows to shrink properly inside the panels */
.avgång-tid,
.destination-tid {
  min-width: 0;
}

/* ✅ When delayed, allow the row to wrap so realtime never gets clipped */
.avgång-tid.delayed,
.destination-tid.delayed {
  flex-wrap: wrap;
}

/* Planned time takes the whole first line (small), realtime stays on next line (big) */
.avgång-tid.delayed .planned,
.destination-tid.delayed .planned {
  flex: 0 0 100%;
  margin-right: 0 !important;
}

/* Realtime keeps its normal sizing/positioning */
.avgång-tid.delayed .realtime,
.destination-tid.delayed .realtime {
  flex: 0 0 auto;
}

/* Give the right side more space */
#cards .left-box  { flex: 2.0 !important; }
#cards .right-box { flex: 1.4 !important; min-width: 0; } /* min-width:0 prevents overflow weirdness */

:root{
  --surface-bg: rgba(0,0,0,0.18);
  --surface-border: rgba(255,255,255,0.10);
  --surface-shadow: 0 8px 20px rgba(0,0,0,0.25);
  --divider-strong: rgba(255,255,255,0.08); /* default (PC) */
}

#cards .left-box{
  border-right: 1px solid var(--divider-strong) !important;
}

/* Kommande container */
#cards .kommande-avgångar{
  background: var(--surface-bg) !important;
  border: 1px solid var(--surface-border) !important;
  box-shadow: var(--surface-shadow);
}

/* The 3 time pills (if you want them consistent too) */
#cards .nästa-avgång-tid-1,
#cards .nästa-avgång-tid-2,
#cards .nästa-avgång-tid-3{
  background: var(--surface-bg) !important;
  border: 1px solid var(--surface-border);
}

/* Tablet-only boost: touch + no hover + small-ish screen */
@media (hover: none) and (pointer: coarse) and (max-width: 900px) {
  :root{
    --surface-bg: rgba(0,0,0,0.28);
    --surface-border: rgba(255,255,255,0.16);
    --surface-shadow: 0 10px 26px rgba(0,0,0,0.35);

    /* NEW: stronger dividers on tablet */
    --divider-strong: rgba(255,255,255,0.14);
  }
}


#cards .kommande-avgångar{
  background: rgba(255,255,255,0.04);

}

html, body {
  height: 100%;
  margin: 0;
}

#burnin-shift {
  min-height: 100vh;
  position: relative;
}

.title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* Bus title (unchanged hierarchy) */
.busstitel {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
  color: #f3f4f6;
}

/* Walking time */
.walk-time {
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 1.1rem;          /* larger than before */
  font-weight: 700;
  white-space: nowrap;

  color: rgba(229,231,235,0.85);
}

/* Emoji slightly toned down */
.walk-time .emoji {
  font-size: 1.05em;
  opacity: 0.85;
}

/* Minutes emphasized */
.walk-time .walk-min {
  letter-spacing: 0.02em;
}

.walk-time {
  opacity: 0.9;
}

.mainBox:hover .walk-time {
  opacity: 1;
}

/* Default: no animation (fast) */
body::before { animation: none; }

/* Optional: only animate opacity (much cheaper than animating gradients) */
@keyframes glowOpacity {
  0%,100% { opacity: 0.22; }
  50%     { opacity: 0.32; }
}

body.glow-on::before {
  animation: glowOpacity 18s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
}

.mainBox {
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}

@media (min-width: 1400px) {
  body.neon-on::after { animation-duration: 16s; }
}