/* ============================================================
   YARD JOCKEY - Logistics Focus homepage widget
   Fixed 380 x 460. All styles namespaced .yj- to avoid
   collisions when embedded in an existing page.
   Brand: #BE185D primary | Inter | dark yard-at-night skin

   Loaded by index.html only, so the other pages do not pay
   for it and css/styles.css keeps its own cache-buster.
   ============================================================ */
/* ============================================================
   YARD JOCKEY — Logistics Focus homepage widget
   Fixed 380 x 460. All styles namespaced .yj- to avoid
   collisions when embedded in an existing page.
   Brand: #BE185D primary | Inter | dark yard-at-night skin
   ============================================================ */


/* --- widget --- */
.yj-widget {
  --yj-w: 380px;
  --yj-h: 460px;
  --yj-cell: 46px;
  --yj-n: 6;

  --yj-bg:      #15161a;
  --yj-panel:   #1d1f26;
  --yj-sunken:  #101116;
  --yj-asphalt: #0d0e12;
  --yj-line:    #2b2e38;
  --yj-line-hi: #3d414f;
  --yj-brand:   #BE185D;
  --yj-accent:  #f472b6;
  --yj-text:    #eef0f4;
  --yj-muted:   #8e94a3;
  --yj-danger:  #fb7185;
  --yj-ok:      #34d399;

  /* Parked equipment. Deliberately desaturated so the outbound
     rig is the only thing on the lot that reads as urgent. */
  --yj-v0: #49525f;
  --yj-v1: #3f5063;
  --yj-v2: #55495c;
  --yj-v3: #46564f;
  --yj-v4: #5c5340;
  --yj-v5: #414a5c;

  --yj-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  position: relative;
  box-sizing: border-box;
  width: var(--yj-w);
  height: var(--yj-h);
  padding: 11px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(120% 90% at 50% 0%, #23242c 0%, var(--yj-bg) 62%);
  color: var(--yj-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 8px 32px rgba(15, 16, 20, .3);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.yj-widget *, .yj-widget *::before, .yj-widget *::after { box-sizing: border-box; }
.yj-widget:focus { outline: none; }

/* An author display rule outranks the UA's [hidden]{display:none},
   so el.hidden = true would set the attribute without hiding anything. */
.yj-widget [hidden] { display: none !important; }

/* --- header --- */
.yj-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 34px;
  flex: none;
}
.yj-brandmark { display: flex; align-items: center; gap: 7px; min-width: 0; }
.yj-mark { width: 19px; height: 19px; flex: none; color: var(--yj-accent); }
.yj-titles { min-width: 0; }
.yj-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
.yj-kicker {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--yj-muted);
  white-space: nowrap;
}
.yj-mode {
  flex: none;
  padding: 4px 8px;
  border: 1px solid var(--yj-line);
  border-radius: 4px;
  background: var(--yj-panel);
  color: var(--yj-muted);
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.yj-mode:hover { color: var(--yj-accent); border-color: var(--yj-accent); }
.yj-mode:focus-visible { outline: 2px solid var(--yj-accent); outline-offset: 1px; }

/* --- the lot --- */
.yj-lot {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.yj-yard {
  position: relative;
  flex: none;
  width: calc(var(--yj-cell) * var(--yj-n));
  height: calc(var(--yj-cell) * var(--yj-n));
  border: 1px solid var(--yj-line);
  border-right: none;
  border-radius: 5px 0 0 5px;
  background:
    repeating-linear-gradient(to right,
      transparent 0, transparent calc(var(--yj-cell) - 1px),
      rgba(255, 255, 255, .045) calc(var(--yj-cell) - 1px), rgba(255, 255, 255, .045) var(--yj-cell)),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--yj-cell) - 1px),
      rgba(255, 255, 255, .045) calc(var(--yj-cell) - 1px), rgba(255, 255, 255, .045) var(--yj-cell)),
    var(--yj-asphalt);
  overflow: hidden;
}

/* the lane the outbound rig has to reach */
.yj-lane {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--yj-cell);
  background: rgba(190, 24, 93, .09);
  pointer-events: none;
}

/* Both layers span the whole yard, so the rig layer would otherwise
   sit as a transparent sheet over the dots and swallow every tap on
   an empty cell. The containers pass pointers through; only the
   rigs and dots themselves catch them. */
.yj-dots, .yj-rigs { position: absolute; inset: 0; pointer-events: none; }
.yj-dot, .yj-rig { pointer-events: auto; }

.yj-dot {
  position: absolute;
  width: var(--yj-cell);
  height: var(--yj-cell);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.yj-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: rgba(244, 114, 182, .5);
  transition: transform .12s, background .12s;
}
.yj-dot:hover::after { transform: scale(1.7); background: var(--yj-accent); }
.yj-dot:focus-visible { outline: 2px solid var(--yj-accent); outline-offset: -3px; }

.yj-rig {
  position: absolute;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .45);
  border-radius: 4px;
  background: var(--rig, var(--yj-v0));
  cursor: pointer;
  transition: left .16s ease, top .16s ease, filter .12s, box-shadow .12s;
  overflow: hidden;
}
.yj-rig::before {
  /* the trailer's roof rib, so a 2-cell and a 3-cell read as
     different vehicles rather than different-sized blocks */
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, .10);
}
.yj-rig:hover { filter: brightness(1.25); }
.yj-rig:focus-visible { outline: 2px solid var(--yj-accent); outline-offset: 1px; }
.yj-rig.yj-sel {
  box-shadow: 0 0 0 2px var(--yj-accent), 0 4px 14px rgba(0, 0, 0, .5);
  filter: brightness(1.2);
  z-index: 3;
}
/* Green, so dispatch's answer never reads as your own selection. */
.yj-rig.yj-tipped {
  box-shadow: 0 0 0 2px var(--yj-ok), 0 4px 14px rgba(0, 0, 0, .5);
  z-index: 3;
}
.yj-dot.yj-tipdot::after {
  background: var(--yj-ok);
  transform: scale(1.6);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .22);
}
.yj-dot.yj-tipdot:hover::after { transform: scale(2); }

.yj-rig.yj-hero {
  --rig: var(--yj-brand);
  border-color: #7d0f3d;
  z-index: 2;
}
/* the tractor unit, drawn on the leading end of the outbound rig */
.yj-cab {
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 3px;
  width: 11px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .35);
}
.yj-rig.yj-locked { cursor: default; }

/* --- the gate --- */
.yj-gate {
  position: relative;
  flex: none;
  width: 17px;
  height: calc(var(--yj-cell) * var(--yj-n));
  border: 1px solid var(--yj-line);
  border-left: none;
  border-radius: 0 5px 5px 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .05) 0 4px, transparent 4px 8px),
    var(--yj-sunken);
}
.yj-gatemark {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--yj-cell);
  display: grid;
  place-items: center;
  background: rgba(190, 24, 93, .22);
}
.yj-gatemark::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--yj-accent);
}

/* --- panel --- */
.yj-panel {
  flex: none;
  display: flex;
  gap: 6px;
  height: 44px;
}
.yj-box {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 0 9px;
  border: 1px solid var(--yj-line);
  border-radius: 5px;
  background: var(--yj-panel);
}
.yj-l {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--yj-muted);
  white-space: nowrap;
}
.yj-v {
  font-family: var(--yj-mono);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.yj-v--big { font-size: 19px; }
.yj-v.yj-thin { color: var(--yj-danger); }

/* --- pad --- */
/* Content sized rather than three equal thirds: "Re-spot the lot" does
   not fit in a third of 356px, and an equal split would clip it. */
.yj-pad {
  flex: none;
  height: 30px;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.yj-key {
  flex: 0 0 auto;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--yj-line);
  border-radius: 4px;
  background: var(--yj-panel);
  color: var(--yj-muted);
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.yj-key svg { width: 13px; height: 13px; flex: none; }
.yj-key:hover:not(:disabled) { background: #262932; color: var(--yj-text); }
.yj-key:active:not(:disabled) { border-color: var(--yj-accent); color: var(--yj-accent); }
.yj-key:focus-visible { outline: 2px solid var(--yj-accent); outline-offset: 1px; }
.yj-key:disabled { opacity: .42; cursor: default; }

/* Native title tooltips wait about a second and cannot be sped up, so
   these are drawn here instead and come up in 90ms. pointer-events are
   off so an invisible tip can never swallow a click. */
.yj-key, .yj-mode { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 4;
  width: max-content;
  max-width: 176px;
  padding: 6px 8px;
  border: 1px solid var(--yj-line-hi);
  border-radius: 5px;
  background: #0a0b0f;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
  color: var(--yj-text);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s ease .45s;
}
.yj-key[data-tip]::after {
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
}
.yj-mode[data-tip]::after {
  right: 0;
  top: calc(100% + 6px);
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after { opacity: 1; transition-delay: .09s; }
.yj-key:disabled[data-tip]::after { content: none; }

/* --- ticker --- */
.yj-ticker {
  flex: none;
  height: 15px;
  overflow: hidden;
  color: var(--yj-muted);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.yj-ticker b { color: var(--yj-text); font-weight: 600; }

/* --- overlays --- */
/* Starts below the header rather than at inset 0. At inset 0 the
   scrim covered the mode chip, so the difficulty could not be changed
   from the start card, which is the one moment anyone would want to. */
.yj-over {
  position: absolute;
  top: 45px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13px;
  background: rgba(13, 14, 18, .5);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
}
.yj-over.yj-show { opacity: 1; visibility: visible; }

.yj-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 18px 11px;
  border: 1px solid var(--yj-line-hi);
  border-radius: 8px;
  background: rgba(16, 17, 22, .965);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  transition: opacity .18s ease;
}
.yj-quizcard  { gap: 7px; }
.yj-startcard { gap: 7px; padding: 15px 18px 14px; }

.yj-verdict {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--yj-muted);
}
.yj-headline {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-wrap: balance;
}
.yj-headline.yj-bad  { color: var(--yj-danger); }
.yj-headline.yj-good { color: var(--yj-ok); }
.yj-starthead { font-size: 21px; color: var(--yj-text); }
.yj-startsub {
  font-size: 11px;
  line-height: 1.4;
  color: var(--yj-muted);
  text-wrap: pretty;
}
.yj-rules {
  display: grid;
  gap: 7px;
  margin: 3px 0 1px;
  padding: 8px 0;
  border-top: 1px solid var(--yj-line);
  border-bottom: 1px solid var(--yj-line);
  text-align: left;
}
.yj-rule {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 9px;
  align-items: center;
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--yj-muted);
  text-wrap: pretty;
}
.yj-rule b { color: var(--yj-text); font-weight: 600; }
.yj-ruleart {
  position: relative;
  width: 26px;
  height: 15px;
  border-radius: 2px;
  background: var(--yj-sunken);
  overflow: hidden;
}
.yj-ruleart i { position: absolute; border-radius: 1px; }

.yj-keys { display: flex; justify-content: center; gap: 9px; margin-top: 1px; }
.yj-hintkey { flex: 0 0 auto; display: grid; gap: 3px; justify-items: center; }
.yj-cap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 16px;
  padding: 0 4px;
  border: 1px solid var(--yj-line-hi);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--yj-text);
}
.yj-keylabel {
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--yj-muted);
}
.yj-keynote {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.35;
  color: var(--yj-muted);
  text-wrap: pretty;
}
.yj-startbtn { align-self: center; min-width: 0; padding: 0 20px; margin-top: 4px; }

.yj-detail {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--yj-muted);
  text-wrap: pretty;
}
.yj-detail b { color: var(--yj-text); font-weight: 600; }

.yj-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 6px 0;
  border-top: 1px solid var(--yj-line);
  border-bottom: 1px solid var(--yj-line);
}
.yj-stat-v {
  font-family: var(--yj-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.yj-stat-l {
  white-space: nowrap;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yj-muted);
}

/* --- detention review --- */
.yj-qhead {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--yj-danger);
  text-wrap: balance;
}
.yj-qtext {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--yj-text);
  text-wrap: pretty;
}
.yj-options { display: grid; gap: 5px; }
.yj-option {
  padding: 7px 10px;
  border: 1px solid var(--yj-line);
  border-radius: 5px;
  background: rgba(255, 255, 255, .035);
  color: var(--yj-text);
  font: inherit;
  font-size: 10.5px;
  line-height: 1.35;
  text-align: left;
  text-wrap: pretty;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.yj-option:hover:not(:disabled) {
  background: rgba(244, 114, 182, .14);
  border-color: var(--yj-accent);
}
.yj-option:focus-visible { outline: 2px solid var(--yj-accent); outline-offset: 1px; }
.yj-option:disabled { cursor: default; }
.yj-option.yj-right {
  border-color: var(--yj-ok);
  background: rgba(52, 211, 153, .16);
  color: var(--yj-ok);
}
.yj-option.yj-wrongpick {
  border-color: var(--yj-danger);
  background: rgba(251, 113, 133, .16);
  color: var(--yj-danger);
}
.yj-qfoot {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--yj-muted);
  text-wrap: pretty;
}
.yj-qfoot.yj-good-t { color: var(--yj-ok); }
.yj-qfoot.yj-bad-t  { color: var(--yj-danger); }

/* --- newsletter prompt --- */
.yj-capture { display: grid; gap: 6px; }
.yj-capture-copy {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--yj-muted);
  text-wrap: pretty;
}
.yj-capture-copy.yj-err { color: var(--yj-danger); }
.yj-form { display: flex; gap: 5px; }
.yj-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--yj-line);
  border-radius: 4px;
  background: var(--yj-sunken);
  color: var(--yj-text);
  font: inherit;
  font-size: 11.5px;
}
.yj-input::placeholder { color: #5d6272; }
.yj-input:focus { outline: none; border-color: var(--yj-accent); }
.yj-input.yj-invalid { border-color: var(--yj-danger); }
.yj-input:disabled { opacity: .6; cursor: default; }

.yj-cta {
  flex: none;
  height: 30px;
  min-width: 92px;
  padding: 0 12px;
  border: none;
  border-radius: 4px;
  background: var(--yj-brand);
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.yj-cta:hover:not(:disabled) { background: #d61f6c; }
.yj-cta:focus-visible { outline: 2px solid var(--yj-accent); outline-offset: 2px; }
.yj-cta:disabled { opacity: .6; cursor: default; }

.yj-actions { display: flex; align-items: center; justify-content: center; gap: 11px; }
.yj-divider { width: 1px; height: 10px; background: var(--yj-line); }
.yj-link {
  padding: 4px 2px;
  border: none;
  background: none;
  color: var(--yj-accent);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.yj-link:hover { color: var(--yj-text); }
.yj-link:focus-visible { outline: 2px solid var(--yj-accent); outline-offset: 1px; }

.yj-restore {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 7px 14px;
  border: 1px solid var(--yj-line);
  border-radius: 5px;
  background: rgba(16, 17, 22, .95);
  color: var(--yj-accent);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
}
.yj-restore:hover { color: var(--yj-text); border-color: var(--yj-accent); }
.yj-restore:focus-visible { outline: 2px solid var(--yj-accent); outline-offset: 2px; }
.yj-over.yj-peek { background: transparent; }
.yj-over.yj-peek .yj-card { opacity: 0; visibility: hidden; }
.yj-over.yj-peek .yj-restore { opacity: 1; visibility: visible; }

.yj-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .yj-widget *, .yj-widget *::before { transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------------
   Homepage slot.

   The markup for this widget is inlined in index.html inside .hero__sidebar,
   replacing the Top Stories list. .hero__grid is already `1fr 380px`, so at
   full width the widget fits the slot exactly and nothing below applies.
   ------------------------------------------------------------------------ */

/* styles.css hides .hero__sidebar at <=1024px, where it held Top Stories. The
   game is meant to show on tablets and phones, so that is reverted here.
   .hero__grid is already a single column at this width, and the widget simply
   stacks under the cover story. */
@media (max-width: 1024px) {
  .hero__grid .hero__sidebar { display: flex; }
}

/* Two levels on purpose. .yj-fit is the LAYOUT box and is sized to the scaled
   dimensions; .yj-widget keeps its real 380 x 460 and is transformed down to
   fill it. Putting the transform on .yj-fit itself does not work: a transform
   leaves the layout box at full size, so a 380px box would stay 380px inside a
   narrower grid track and push the page sideways. Sizing the box and scaling
   the contents means the track only ever sees the scaled width. */
.yj-fit {
  --yj-s: 1;
  width:  calc(380px * var(--yj-s));
  height: calc(460px * var(--yj-s));
  margin-inline: auto;
}

.yj-fit > .yj-widget {
  transform: scale(var(--yj-s));   /* --yj-s inherits from .yj-fit */
  transform-origin: top left;
}

/* The widget is a fixed 380px block whose copy was measured at that width, and
   the ticker is white-space: nowrap. Reflowing it would truncate the ticker, so
   it is scaled instead. Each step is the largest scale that still fits 380px
   inside the viewport minus the container's 48px of padding, so the widget
   never overflows and never triggers a sideways scroll. Unscaled above 435px,
   where the widget clears the container by 8px. */
@media (max-width: 435px) { .yj-fit { --yj-s: .94; } }  /* 409-435 */
@media (max-width: 408px) { .yj-fit { --yj-s: .89; } }  /* 390-408 */
@media (max-width: 389px) { .yj-fit { --yj-s: .85; } }  /* 374-389 */
@media (max-width: 373px) { .yj-fit { --yj-s: .81; } }  /* 359-373 */
@media (max-width: 358px) { .yj-fit { --yj-s: .73; } }  /* 329-358 */
@media (max-width: 328px) { .yj-fit { --yj-s: .67; } }  /* to 320   */