/* ============================================================
   THE ROAD -- Brian has the keys. The route is already filed.
   All additions stay on their own circuit.
   ============================================================ */
.rd-probe{ --rd-sheet:1 }

/* -- the truck passes the office ---------------------------- */
.rd-car-paper{ position:relative }
.rd-road-note{ background:var(--void) }
.rd-car-sweep{
  position:absolute; inset:0; padding:6px; border-radius:2px;
  pointer-events:none; opacity:var(--rd-car-power,0);
  background:linear-gradient(105deg,transparent calc(var(--rd-car,-40%) - 24%),
    rgba(255,178,77,.95) var(--rd-car,-40%),transparent calc(var(--rd-car,-40%) + 24%));
  mix-blend-mode:soft-light;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.rd-month.rd-month{
  background:var(--void); border-color:rgba(109,95,131,.55);
  box-shadow:inset 0 0 9px rgba(76,255,60,.10);
}
.rd-month .rd-month-name{ color:var(--parchment) }
.rd-month .rd-month-state{
  font-family:'Bungee',sans-serif; color:var(--bog-green);
  text-shadow:0 0 5px rgba(76,255,60,.8),0 0 10px rgba(76,255,60,.35);
}
.rd-month.rd-month-dead{ box-shadow:none; border-color:rgba(109,95,131,.35) }
.rd-month.rd-month-dead .rd-month-name,.rd-month.rd-month-dead .rd-month-state{
  color:#a698c0; text-shadow:none;
}

/* -- 2. the connections remain on the itinerary -------------- */
.rd-route-board{ position:relative }
.rd-route{
  position:absolute; top:0; left:-64px; width:56px; height:100%;
  overflow:visible; pointer-events:none;
}
.rd-route-track{ fill:none; stroke:var(--carbon); stroke-width:1; stroke-dasharray:2 7; opacity:.45 }
.rd-route-leg{ fill:none; stroke-width:1.5; stroke-dasharray:4 5 }
.rd-route-no{ stroke:#ff8fc4 }
.rd-route-maybe{ stroke:var(--tallow) }
.rd-route-yes{ stroke:var(--bog-green) }
.rd-route-dot{ fill:var(--void); stroke-width:1.5 }
.rd-route-ink{ fill:none; stroke:white; stroke-width:26; stroke-dasharray:1 1; stroke-dashoffset:var(--rd-route-offset,0) }
.rd-route-plane{ fill:var(--parchment); stroke:var(--void); stroke-width:.8; paint-order:stroke; pointer-events:none }
@media (min-width:900px) and (max-width:1250px){
  .rd-route{ left:-25px; width:22px }
}
@media (max-width:899px){ .rd-route{ display:none } }
@supports (animation-timeline:view()){
  .rd-route-board{ view-timeline-name:--rd-itinerary; view-timeline-axis:block }
  .rd-route-live .rd-route-ink{
    animation:rd-route-draw 1s linear both;
    animation-timeline:--rd-itinerary;
    animation-range:cover 15% cover 85%;
  }
}
@keyframes rd-route-draw{ from{stroke-dashoffset:1} to{stroke-dashoffset:0} }
.rd-sock.rd-sock{ animation:none; transform:rotate(var(--rd-wind-angle,12deg)) scaleX(var(--rd-wind-length,.82)) skewY(var(--rd-wind-fold,3deg)) }
.rd-pass{
  position:relative;
  -webkit-mask:radial-gradient(circle at right center,transparent 3px,#000 3.7px) 0 0/100% 12px;
  mask:radial-gradient(circle at right center,transparent 3px,#000 3.7px) 0 0/100% 12px;
}
.rd-pass-stub{ position:relative }
.rd-barcode{
  position:absolute; bottom:3px; left:14px; right:14px; height:7px;
  pointer-events:none; overflow:hidden;
  background:repeating-linear-gradient(90deg,var(--void) 0 1px,transparent 1px 3px,var(--void) 3px 5px,transparent 5px 6px,var(--void) 6px 7px,transparent 7px 11px);
  opacity:.8;
}
.rd-scanner{
  position:absolute; inset:0 auto 0 0; width:2px; background:var(--hex-pink);
  box-shadow:0 0 5px var(--hex-pink); opacity:0; pointer-events:none;
}
.rd-barcode.rd-barcode,.rd-barcode .rd-scanner{ margin:0 }
.rd-scanning .rd-scanner{ opacity:1; animation:rd-scan 1.1s ease-in-out both }
@keyframes rd-scan{ from{left:0;opacity:0} 15%,85%{opacity:1} to{left:100%;opacity:0} }
.rd-month.rd-month-buzz .rd-month-state{
  color:var(--hex-pink); text-shadow:0 0 5px rgba(255,45,149,.6);
}

/* -- 3. the next birthday is mechanically unavailable -------- */
.rd-age-anchor{ position:relative; display:inline-block }
.rd-age-real{ opacity:0 }
.rd-flap-case{
  position:absolute; inset:-3px -5px; border:1px solid var(--carbon); border-radius:2px;
  background:var(--void); color:var(--bog-green); pointer-events:none;
  box-shadow:0 1px 2px rgba(7,3,13,.6); perspective:140px;
}
.rd-flap-print{ position:absolute; inset:2px 4px; text-align:center; font:inherit; line-height:1; pointer-events:none }
.rd-flap-next{ clip-path:inset(0 0 50%); color:var(--tallow) }
.rd-flap-lower{ clip-path:inset(50% 0 0) }
.rd-flap-leaf{
  position:absolute; top:0; left:0; right:0; height:50%; overflow:hidden;
  background:var(--void); transform-origin:50% 100%;
  transform:rotateX(var(--rd-flap-angle,0deg));
  border-bottom:1px solid var(--carbon); backface-visibility:hidden;
}
.rd-flap-leaf .rd-flap-print{ bottom:auto; height:1em }
.rd-flap-case::after{
  content:''; position:absolute; top:50%; left:0; right:0; height:1px;
  background:rgba(109,95,131,.7); pointer-events:none;
}
.rd-flap-knock{ animation:knock .28s ease-out }
.rd-hex-cell{ position:relative }
.rd-hex-glyphs{
  position:absolute; top:11px; bottom:11px; left:14px; right:14px;
  overflow:hidden; display:none; pointer-events:none;
  font-family:'Bungee',sans-serif; font-size:.82em; line-height:1.98;
  color:var(--parchment); overflow-wrap:anywhere;
}
.rd-hex-running .rd-hex-real{ opacity:0 }
.rd-hex-running .rd-hex-glyphs{ display:block }
.rd-hex-row.rd-hex-row .rd-hex-td{ background:rgba(255,45,149,var(--rd-hex-power,0)) }

/* -- 4. the goat has reviewed three copies ------------------- */
.rd-bite-box.rd-bite-box{
  padding:0; border:0; background:none; box-shadow:none;
  filter:drop-shadow(0 12px 14px rgba(7,3,13,.7)) drop-shadow(0 1px 1px rgba(7,3,13,.8));
}
.rd-bite-paper{
  padding:12px 16px; border-left:3px solid var(--bog-green); border-radius:0 3px 3px 0;
  color:#2a2018; background:var(--parchment);
  box-shadow:inset 0 1px rgba(255,255,255,.45);
}
.rd-bite-paper .rd-goat-title{ color:#1b1410 }
.rd-bite-one{
  clip-path:polygon(0 0,calc(100% - 35px) 0,calc(100% - 33px) 4px,calc(100% - 28px) 3px,
    calc(100% - 27px) 9px,calc(100% - 20px) 7px,calc(100% - 18px) 15px,
    calc(100% - 12px) 13px,calc(100% - 9px) 20px,calc(100% - 4px) 18px,100% 26px,100% 100%,0 100%);
}
.rd-bite-two{
  clip-path:polygon(0 0,100% 0,100% calc(100% - 25px),calc(100% - 5px) calc(100% - 24px),
    calc(100% - 4px) calc(100% - 18px),calc(100% - 11px) calc(100% - 19px),
    calc(100% - 13px) calc(100% - 11px),calc(100% - 19px) calc(100% - 12px),
    calc(100% - 22px) calc(100% - 5px),calc(100% - 29px) calc(100% - 6px),calc(100% - 33px) 100%,0 100%);
}
.rd-bite-three{
  clip-path:polygon(0 0,100% 0,100% 100%,28px 100%,26px calc(100% - 4px),20px calc(100% - 3px),
    18px calc(100% - 9px),12px calc(100% - 7px),13px calc(100% - 14px),6px calc(100% - 12px),
    4px calc(100% - 20px),0 calc(100% - 19px));
}
.rd-initial-cell{ position:relative }
.rd-initial{
  position:absolute; left:1px; top:50%; width:12px; height:18px;
  transform:translateY(-50%) rotate(-7deg); pointer-events:none;
  font-family:'Caveat',cursive; font-size:15px; line-height:18px;
  color:var(--ballpoint); background:var(--parchment); text-align:center;
  clip-path:polygon(0 0,100% 0,100% 85%,75% 100%,0 100%);
}
.rd-initial-ink{ display:block; pointer-events:none }
.rd-initial-pending .rd-initial-ink{ clip-path:inset(0 100% 0 0) }
.rd-initial-writing .rd-initial-ink{ animation:rd-sign .3s ease-out both }
@keyframes rd-sign{ from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }

@media (prefers-reduced-motion:reduce){
  .rd-car-sweep{ display:none }
  .rd-route-ink{ animation:none !important; stroke-dashoffset:0 !important }
  .rd-sock.rd-sock{ transform:rotate(-1.5deg) }
  .rd-scanner{ display:none }
  .rd-age-real,.rd-hex-running .rd-hex-real{ opacity:1 }
  .rd-flap-case,.rd-hex-running .rd-hex-glyphs{ display:none }
  .rd-hex-row.rd-hex-row .rd-hex-td{ background:none }
  .rd-initial-pending .rd-initial-ink{ clip-path:none }
}