/* X-ray cutaway of the page fiber (js/xray/fiber-cutaway.js). The existing line stays the core.
   The jacket is yellow because TIA-598 codes singlemode (OS1/OS2) yellow; the light stays teal
   because 1310/1550 nm is infrared, so its colour here is only a stand-in. */
.xr-fc-jacket, .xr-fc-cladding { display: none; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.xr-active .xr-fc-jacket { display: inline; stroke: #f0c832; stroke-width: 20; opacity: .72; }
.xr-active .xr-fc-cladding { display: inline; stroke: #f7e7a6; stroke-width: 12; opacity: .14; }

/* Straight runs: jacket, cladding, and a singlemode core. The core is only 9 µm in
   125 µm of cladding, too narrow for light to bounce, so it runs straight down the middle. */
.xr-fiber-cut {
  position: absolute; z-index: 2; top: 0; bottom: 0;
  left: var(--fiber-x); width: 20px; margin-left: -10px;
  border-inline: 3px solid #f0c832b8; background: #f7e7a624;
  pointer-events: none; overflow: hidden;
}
.xr-fiber-cut::before, .xr-fiber-cut::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
}
.xr-fiber-cut::before { background: #72e5ef66; box-shadow: 0 0 5px #72e5ef80; }
.xr-fiber-cut::after {
  background-image: linear-gradient(to bottom, transparent, #dffcff 50%, transparent);
  background-size: 2px 60px; background-repeat: repeat-y; opacity: .85;
}
@media (prefers-reduced-motion: no-preference) {
  .xr-fiber-cut::after { animation: xr-fiber-pulse 1s linear infinite; }
}
@keyframes xr-fiber-pulse { to { background-position: 0 60px; } }
/* The cutaway ends at the connector, like the fiber does. */
.contact > .xr-fiber-cut { bottom: auto; height: calc(var(--node-y, 186px) - 62px); }

/* A link event at each station node, just above it. */
.xr-fiber-event {
  position: absolute; z-index: 4;
  left: calc(var(--fiber-x) + 14px); top: calc(var(--node-y, 120px) - 34px);
  padding: 3px 8px; border: 1px solid #35505d; border-radius: 999px;
  background: #07151de6; color: #b3cdd7; white-space: nowrap;
  font: 500 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  pointer-events: none;
}
.xr-fiber-event b { color: #f2c58b; font-weight: 600; }
.xr-fiber-event { transition: opacity .25s; }
.xr-fiber-event.is-passing { opacity: 0; }
.xr-fiber-receiver { border-color: #87e8a066; }
.xr-fiber-receiver b { color: #87e8a0; }

/* The light meter sits at the foot of the screen on the line, clear of the text people are reading. */
.xr-active .xr-fiber-meter { display: none !important; }
.xr-active .xr-fiber-meter.is-shown {
  position: fixed; z-index: 30; bottom: 20px; left: calc(var(--fiber-x) + 16px);
  display: grid !important; gap: 1px;
  padding: 7px 11px; border: 1px solid #72e5ef66; border-radius: 8px;
  background: #07151df0; box-shadow: 0 6px 24px #0007; pointer-events: none;
  transform: translateY(calc(-1 * var(--dock-lift, 0px)));
}
.xr-fiber-meter::before { content: ''; position: absolute; top: 50%; left: -16px; width: 16px; border-top: 1px dashed #72e5ef88; }
.xr-fiber-meter::after {
  content: ''; position: absolute; bottom: 50%; left: -16px; height: var(--tip-lead, 0px);
  border-left: 1px dashed #87e8a0aa; opacity: 0; transition: opacity .25s;
}
.xr-fiber-meter.is-arrived::after { opacity: 1; }
.xr-fiber-meter.is-arrived::before { border-top-color: #87e8a0aa; }
.xr-fiber-meter-label { color: #72e5ef; font: 500 9px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.xr-fiber-meter strong { color: #e6f7fb; font: 600 16px/1.2 var(--mono); }
.xr-fiber-meter-sub { color: #8fa9b6; font: 400 10px/1.3 var(--mono); }
.xr-fiber-meter.is-event { border-color: #f2b56b; }
.xr-fiber-meter.is-event .xr-fiber-meter-sub { color: #f2c58b; }
.xr-fiber-meter.is-arrived { border-color: #87e8a0aa; }
.xr-fiber-meter.is-arrived strong { color: #87e8a0; }

@media (max-width: 1023.98px) {
  .xr-active .xr-fiber-meter.is-shown { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 699px) {
  .xr-fiber-cut { width: 14px; margin-left: -7px; border-width: 2px; }
  .contact > .xr-fiber-cut { height: calc(var(--node-y, 186px) - 34px); }
  .xr-active .xr-fiber-meter.is-shown { left: calc(var(--fiber-x) + 10px); padding: 5px 8px; }
  .xr-fiber-meter::before { left: -10px; width: 10px; }
  .xr-fiber-meter::after { left: -10px; }
  .xr-fiber-meter strong { font-size: 13px; }
  .xr-fiber-meter-sub { display: none; }
  .xr-fiber-meter.is-event .xr-fiber-meter-sub, .xr-fiber-meter.is-arrived .xr-fiber-meter-sub { display: block; }
}