/* T2 Ready — fit perfectly in portrait & landscape (no scroll inside EMAD/CodePen) */
:root{
  --bg:#0b0b0c;
  --ink:#e8eef4;      /* bright text for punchier labels */
  --muted:#b4becd;
  --line:#cfd6df;
  --perim:#e8eef4;

  /* Space to reserve for CodePen chrome in LANDSCAPE */
  --chrome: 0px;                 /* portrait default */
}
@media (orientation: landscape){
  :root{ --chrome: 120px; }      /* tune if your embed UI changes */
}

html, body{
  height:100%;
  margin:0;
  background:var(--bg);
  overflow:hidden;
}

/* Fill the iframe and center the SVG; subtract CodePen chrome in landscape */
.wrap{
  position:fixed;
  inset:0;
  width:100%;
  height:calc(100svh - var(--chrome));
  display:grid;
  place-items:center;
  background:var(--bg);
}

/* SVG uses full available area; viewBox (cropped to perimeter) preserves geometry */
svg#map{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  background:transparent;
}

/* Visual styling */
.perimeter{ fill:none; stroke:var(--perim); stroke-width:2; vector-effect:non-scaling-stroke }
.bay-outline, .return-lane{ fill:none; stroke:var(--line); stroke-width:2; vector-effect:non-scaling-stroke }
.travel-rail{ stroke:var(--line); stroke-width:2; stroke-dasharray:4 8; opacity:.9; vector-effect:non-scaling-stroke }
.slot-outline{ fill:none; stroke:var(--line); stroke-width:2; vector-effect:non-scaling-stroke }
.oval-slot{ fill:none; stroke:var(--line); stroke-width:2; vector-effect:non-scaling-stroke }
.vtext{ font-size:20px; font-weight:600; fill:var(--ink); letter-spacing:1px }

/* >>> Extra punchy bottom labels (Customer Exit, Driver Exit, Entry) <<< */
.bottom-label{
  font-size:28px;          /* larger for readability */
  font-weight:900;
  letter-spacing:.25px;
  fill:var(--ink);
  stroke:#0b0b0c;
  stroke-width:1.2px;
  paint-order: stroke fill;
  filter: drop-shadow(0 0.6px 0 #000) drop-shadow(0 1.2px 0 rgba(0,0,0,.75));
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translateY(-10px);
}

/* >>> Give "Chase" label the same punchy treatment <<< */
.small-label{
  /* make it large & bold, but a notch smaller to avoid crowding the slot */
  font-size:24px;          /* was 12px */
  font-weight:900;
  letter-spacing:.2px;
  fill:var(--ink);
  /* crisp outline for contrast on dark */
  stroke:#0b0b0c;
  stroke-width:1px;
  paint-order: stroke fill;
  filter: drop-shadow(0 0.6px 0 #000) drop-shadow(0 1.2px 0 rgba(0,0,0,.75));
  /* nudge up slightly so bigger text doesn’t overlap the slot */
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translateY(-6px);
}

/* Tokens */
.token rect{ fill:var(--ink) }
.token text{ fill:#0b0b0c; font-weight:600 }
.car rect{ fill:#d7e3f2 }
.walker{ fill:var(--ink) }

/* Gate arm rotation origin */
#gateArm{ transform-box: fill-box; transform-origin: left center }

/* --- Responsive safeguards to guarantee no scroll in tighter frames --- */
@media (orientation: landscape) and (max-height: 720px){
  .bottom-label{ font-size:26px; stroke-width:1.1px; transform: translateY(-9px); }
  .small-label{ font-size:22px; stroke-width:.95px; transform: translateY(-5px); }
}
@media (orientation: landscape) and (max-height: 640px){
  .bottom-label{ font-size:24px; stroke-width:1px;  transform: translateY(-8px); }
  .small-label{  font-size:20px; stroke-width:.9px; transform: translateY(-4px); }
}
/* Extremely tight (older small phones or split-screen) */
@media (max-height: 580px){
  svg#map text{ font-size:.9em; }
  .bay-outline,.return-lane,.travel-rail{ stroke-width:1.5 }
  .bottom-label{ font-size:22px; stroke-width:.9px; transform: translateY(-6px); }
  .small-label{  font-size:18px; stroke-width:.85px; transform: translateY(-3px); }
}
@media (orientation: portrait){
  html, body { font-size: 15px; }
  .lane-label { font-size: 14px; letter-spacing: .25px; white-space: nowrap; }
  .slot { height: 22px; line-height: 22px; font-size: 12px; white-space: nowrap; margin-bottom: 8px; }
  .legend { font-size: 13px; }
}
/* T2 Ready — shrink bottom edge labels by 25% */
#customer-exit,
#driver-exit,
#entry,
.bottom-label,
.label-bottom,
.footer-labels .label,
.exit-label,
.entry-label {
  font-size: 75% !important;   /* 25% smaller */
  line-height: 1.1;             /* stay tidy if they were tall */
  white-space: nowrap;          /* avoid wrapping */
  transform-origin: center bottom;
}

/* If you only want this in portrait, wrap with: */
/*
@media (orientation: portrait){
  #customer-exit,
  #driver-exit,
  #entry,
  .bottom-label,
  .label-bottom,
  .footer-labels .label,
  .exit-label,
  .entry-label { font-size: 75% !important; }
}
*/
/* T2 Ready — bottom labels: +15% size and bold */
#customer-exit, .customer-exit,
#driver-exit, .driver-exit,
#entry-label, .entry-label,
.label-bottom, .bottom-label,
.bottom-labels .label,
text.customer-exit, text.driver-exit, text.entry-label {
  font-weight: 800 !important;   /* strong/bold */
  font-size: 115% !important;    /* +15% from whatever it is now */
  letter-spacing: 0.2px;         /* tiny readability boost */
}