/* Signal Room mobile guide previews v1
 *
 * The six compact controls remain their original Guide links.  On narrow
 * screens each one now renders a miniature of the destination Guide's actual
 * header, title, engineering image and first answer marker so the destination
 * is clear before the reader follows the link.
 */
.obor-field-ledger .signal-room__guide-page-preview {
  display: none;
}

/* The Guide page miniatures are a phone-only affordance.  Keep the inherited
 * Server Room hit map visually clean once the wider scene is restored. */
.obor-field-ledger #fieldBand .signal-room__guide-page-preview {
  display: none !important;
}

/* The full Server Room remains the tablet/desktop source of truth.  The Guide
 * card treatment is deliberately phone-only, so it never replaces that scene
 * at the intermediate viewport captured in the regression. */
@media (max-width: 640px) {
  .obor-field-ledger .signal-room__canvas {
    height: 34rem;
    overflow: hidden;
    background: #07101d;
    border-top: 1px solid rgba(131, 165, 255, .3);
    border-bottom: 1px solid rgba(131, 165, 255, .3);
  }

  .obor-field-ledger .signal-room__canvas::after,
  .obor-field-ledger .signal-room__canvas > .signal-room__plate,
  .obor-field-ledger .signal-room__monitor,
  .obor-field-ledger .signal-room__play,
  .obor-field-ledger .signal-room__aperture-readout,
  .obor-field-ledger .signal-room__field-arrows,
  .obor-field-ledger .signal-room__focus-brackets {
    display: none;
  }

  .obor-field-ledger .signal-room__hotspots {
    z-index: 21;
    inset: 1.1rem 1rem auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 8.55rem;
    gap: .48rem;
    height: auto;
    padding-top: 1.18rem;
    pointer-events: auto;
  }

  .obor-field-ledger .signal-room__hotspots::before {
    content: "EXPLORE THE EQUIPMENT";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0;
    color: #9fc0ff;
    font-family: var(--mono);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .17em;
    line-height: 1.1;
    text-align: center;
  }

  .obor-field-ledger .signal-room__hotspot,
  .obor-field-ledger .signal-room__hotspot--repeater,
  .obor-field-ledger .signal-room__hotspot--charger,
  .obor-field-ledger .signal-room__hotspot--backup,
  .obor-field-ledger .signal-room__hotspot--bda,
  .obor-field-ledger .signal-room__hotspot--distribution,
  .obor-field-ledger .signal-room__hotspot--monitoring {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: .24rem .24rem .38rem;
    overflow: hidden;
    color: #fffed5;
    background: #0c1a2c;
    background-image: none;
    border: 1px solid rgba(131, 165, 255, .32);
    border-radius: .32rem;
    box-shadow: inset 0 0 1.45rem rgba(3, 2, 29, .32);
    text-align: left;
  }

  .obor-field-ledger .signal-room__hotspot::before {
    display: none;
  }

  .obor-field-ledger .signal-room__hotspot::after {
    position: static;
    display: block !important;
    grid-row: 2;
    width: auto;
    height: auto;
    margin: .34rem .14rem 0;
    color: rgba(255, 254, 213, .94);
    border: 0;
    font-family: var(--mono);
    font-size: .42rem;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: .035em;
    opacity: 1;
  }

  .obor-field-ledger .signal-room__hotspot > span:first-child {
    position: absolute;
    z-index: 3;
    top: .4rem;
    left: .4rem;
    display: grid;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0;
    place-items: center;
    color: #b7d1ff;
    background: rgba(4, 11, 24, .78);
    border: 1px solid rgba(183, 209, 255, .58);
    border-radius: 50%;
    font-family: var(--mono);
    font-size: .42rem;
    opacity: 1;
  }

  .obor-field-ledger .signal-room__guide-page-preview {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    color: #172338;
    background: #e9eef5;
    border: 1px solid rgba(205, 220, 241, .88);
    border-radius: .15rem;
    box-shadow: 0 .35rem .82rem rgba(0, 0, 0, .23);
    isolation: isolate;
    pointer-events: none;
  }

  .obor-field-ledger .signal-room__guide-page-preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: .82rem;
    padding: 0 .3rem;
    color: #f4f7fb;
    background: #65769b;
    font-family: var(--mono);
    font-size: .23rem;
    font-style: normal;
    font-weight: 750;
    letter-spacing: .055em;
    line-height: 1;
  }

  .obor-field-ledger .signal-room__guide-page-preview__bar i,
  .obor-field-ledger .signal-room__guide-page-preview__body em {
    font: inherit;
  }

  .obor-field-ledger .signal-room__guide-page-preview__body {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: .18rem;
    min-height: 0;
    padding: .35rem;
    background: linear-gradient(155deg, #eef3f8 0%, #dde5ef 100%);
  }

  .obor-field-ledger .signal-room__guide-page-preview__body small {
    display: block;
    margin: 0;
    color: #5774aa;
    font-family: var(--mono);
    font-size: .22rem;
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1.1;
  }

  .obor-field-ledger .signal-room__guide-page-preview__body strong {
    display: block;
    min-height: 0;
    color: #1b2637;
    font-family: var(--display);
    font-size: .43rem;
    font-weight: 760;
    letter-spacing: -.025em;
    line-height: .92;
  }

  .obor-field-ledger .signal-room__guide-page-preview__body img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(82, 108, 149, .25);
    border-radius: .08rem;
  }

  .obor-field-ledger .signal-room__guide-page-preview__body em {
    display: block;
    margin: 0;
    color: #4e6590;
    font-family: var(--mono);
    font-size: .2rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .045em;
    line-height: 1.1;
  }

  .obor-field-ledger .signal-room__hotspot:hover,
  .obor-field-ledger .signal-room__hotspot:focus-visible,
  .obor-field-ledger .signal-room__hotspot.is-active {
    background: #102746;
    background-image: none;
    border-color: #b7d1ff;
    box-shadow: inset 0 0 0 1px #b7d1ff, 0 0 1.1rem rgba(49, 94, 241, .22);
  }

  .obor-field-ledger .signal-room__hotspot:hover > span:first-child,
  .obor-field-ledger .signal-room__hotspot:focus-visible > span:first-child,
  .obor-field-ledger .signal-room__hotspot.is-active > span:first-child {
    color: #06101f;
    background: #fffed5;
  }

  .obor-field-ledger .signal-room__field-notes {
    z-index: 22;
    inset: auto 1rem 1rem;
    width: auto;
    height: 8.6rem;
  }

  .obor-field-ledger .signal-room__field-note:not(.is-active) {
    display: none;
  }

  .obor-field-ledger .signal-room__field-note.is-active {
    position: relative;
    inset: auto !important;
    display: grid;
    grid-template-columns: minmax(6.6rem, 38%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: .7rem;
    row-gap: .24rem;
    width: 100%;
    max-width: none !important;
    min-height: 8.6rem;
    padding: .52rem;
    overflow: hidden;
    color: #fffed5;
    background: linear-gradient(112deg, #0b1e38, #061120);
    border: 1px solid rgba(131, 165, 255, .42);
    border-left: 3px solid #b7d1ff;
    border-radius: .38rem;
    box-shadow: 0 .95rem 1.8rem rgba(0, 0, 0, .28);
    text-align: left;
    text-shadow: none;
    transform: none;
  }

  .obor-field-ledger .signal-room__field-note.is-active::before {
    display: none;
  }

  .obor-field-ledger .signal-room__field-note > .signal-room__guide-page-preview--detail {
    display: grid;
    grid-column: 1;
    grid-row: 1 / -1;
    height: 100%;
  }

  .obor-field-ledger .signal-room__field-note.is-active > b,
  .obor-field-ledger .signal-room__field-note.is-active > small,
  .obor-field-ledger .signal-room__field-note.is-active > em {
    grid-column: 2;
    min-width: 0;
    margin: 0;
  }

  .obor-field-ledger .signal-room__field-note.is-active > b {
    grid-row: 1;
    align-self: end;
    color: #fffed5;
    font-size: .74rem;
    line-height: 1.04;
  }

  .obor-field-ledger .signal-room__field-note.is-active > small {
    grid-row: 2;
    align-self: start;
    max-width: 24ch;
    color: rgba(229, 239, 255, .78);
    font-size: .48rem;
    line-height: 1.34;
    letter-spacing: .008em;
  }

  .obor-field-ledger .signal-room__field-note.is-active > em {
    grid-row: 3;
    align-self: end;
    display: inline-flex;
    width: max-content;
    padding-bottom: .16rem;
    color: #b7d1ff;
    border-bottom: 1px solid rgba(183, 209, 255, .8);
    font-family: var(--mono);
    font-size: .42rem;
    font-style: normal;
    font-weight: 750;
    letter-spacing: .08em;
  }
}

@media (max-width: 360px) {
  .obor-field-ledger .signal-room__hotspots {
    grid-auto-rows: 7.85rem;
    gap: .34rem;
  }

  .obor-field-ledger .signal-room__hotspot::after {
    font-size: .37rem;
  }

  .obor-field-ledger .signal-room__field-note.is-active {
    grid-template-columns: minmax(5.9rem, 37%) minmax(0, 1fr);
    column-gap: .52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .obor-field-ledger .signal-room__hotspot,
  .obor-field-ledger .signal-room__guide-page-preview {
    transition: none;
  }
}

/* Restore the actual Signal Room system on phones.  The card treatment is an
 * index below the room; it must never remove the monitor film or engineering
 * annotations that explain the physical equipment. */
@media (max-width: 640px) {
  .obor-field-ledger #fieldBand .signal-room__canvas {
    position: relative;
    container-type: inline-size;
  }

  .obor-field-ledger #fieldBand .signal-room__monitor {
    position: absolute !important;
    z-index: 12;
    left: 30.3%;
    top: 7.61cqw;
    display: block !important;
    width: 39.8%;
    height: 25.44cqw;
    min-height: 0;
    overflow: hidden;
    border: 0;
    box-shadow: 0 0 1rem rgba(5, 15, 34, .34);
  }

  .obor-field-ledger #fieldBand .signal-room__monitor video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .obor-field-ledger #fieldBand .signal-room__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex !important;
    min-width: 0;
    min-height: 0;
    padding: 0;
  }

  .obor-field-ledger #fieldBand .signal-room__play svg {
    width: clamp(2rem, 10cqw, 3rem);
  }

  .obor-field-ledger #fieldBand .signal-room__play span {
    display: none;
  }

  .obor-field-ledger #fieldBand .signal-room__aperture-readout {
    position: absolute;
    z-index: 17;
    top: 2.5cqw;
    left: 3.4%;
    display: grid !important;
    max-width: 38%;
    gap: .22rem;
  }

  .obor-field-ledger #fieldBand .signal-room__aperture-readout span {
    font-size: clamp(.34rem, 1.3cqw, .48rem);
  }

  .obor-field-ledger #fieldBand .signal-room__aperture-readout strong {
    font-size: clamp(.68rem, 3.6cqw, 1.06rem);
    line-height: .96;
  }

  .obor-field-ledger #fieldBand .signal-room__mobile-callouts {
    position: absolute;
    z-index: 16;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(100cqw * 941 / 1671);
    pointer-events: none;
  }

  .obor-field-ledger #fieldBand .signal-room__mobile-callout {
    position: absolute;
    display: block;
    max-width: 17cqw;
    color: rgba(213, 229, 255, .84);
    font-family: var(--mono);
    font-size: clamp(.4rem, 1.8cqw, .57rem);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -.02em;
    text-shadow: 0 1px .5rem rgba(3, 9, 20, .96);
    transition: color .18s ease, opacity .18s ease, transform .18s ease;
  }

  .obor-field-ledger #fieldBand .signal-room__mobile-callout.is-active {
    color: #fffed5;
    opacity: 1;
    text-shadow: 0 0 .75rem rgba(157, 193, 255, .85), 0 1px .5rem rgba(3, 9, 20, .96);
    transform: scale(1.06);
  }

  .obor-field-ledger #fieldBand .signal-room__mobile-callout--repeater { top: 11.55cqw; left: 1.6%; }
  .obor-field-ledger #fieldBand .signal-room__mobile-callout--charger { top: 27.95cqw; left: 1.4%; }
  .obor-field-ledger #fieldBand .signal-room__mobile-callout--backup { top: 45.6cqw; left: 2.4%; }
  .obor-field-ledger #fieldBand .signal-room__mobile-callout--bda { top: 16.6cqw; right: 1.2%; text-align: right; }
  .obor-field-ledger #fieldBand .signal-room__mobile-callout--distribution { top: 47.3cqw; left: 39%; text-align: center; }
  .obor-field-ledger #fieldBand .signal-room__mobile-callout--monitoring { top: 37.7cqw; right: 1.3%; text-align: right; }
}

/* Figure-style annotation layer for every non-phone Signal Room.  It restores
 * the side notes and routing arrows around the real rack without using the
 * guide thumbnails as a substitute for the equipment scene. */
@media (min-width: 641px) {
  .obor-field-ledger #fieldBand .signal-room__mobile-callouts {
    display: none !important;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note > .signal-room__guide-page-preview--detail {
    display: none !important;
  }
}

/* The high portrait and near-square desktop surfaces use the same reading
 * layout as tablet.  Give those layouts the new full-page Guide cards while
 * keeping Figure 04's physical-room annotations, monitor and route arrows. */
@media (min-width: 641px) and (max-width: 1199px),
       (min-width: 641px) and (max-aspect-ratio: 4 / 3),
       (min-width: 641px) and (max-height: 650px) {
  .obor-field-ledger #fieldBand .signal-room__canvas {
    position: relative;
    overflow: visible;
    container-type: inline-size;
  }

  .obor-field-ledger #fieldBand .signal-room__field-arrows,
  .obor-field-ledger #fieldBand .signal-room__field-notes {
    position: absolute;
    z-index: 15;
    top: 0;
    left: 0;
    display: block !important;
    width: 100%;
    height: calc(100cqw * 941 / 1671);
    margin: 0;
    grid-column: auto;
    grid-row: auto;
    pointer-events: none;
  }

  .obor-field-ledger #fieldBand .signal-room__field-arrows {
    z-index: 14;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note {
    position: absolute !important;
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #cfdbff;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", "Comic Sans", cursive;
    font-size: clamp(.76rem, 1.22vw, 1.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.025em;
    text-shadow: 0 1px 8px rgba(3, 2, 29, .78);
    transform-origin: left center;
    pointer-events: auto;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note b {
    display: inline-block;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note.is-active {
    position: absolute !important;
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: inherit !important;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note.is-active > b,
  .obor-field-ledger #fieldBand .signal-room__field-note.is-active > small,
  .obor-field-ledger #fieldBand .signal-room__field-note.is-active > em {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note small {
    display: none;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note.is-active small {
    display: block;
    max-width: 25ch;
    margin-top: .75rem;
    color: rgba(207, 220, 255, .84);
    font-family: var(--mono);
    font-size: clamp(.44rem, .56vw, .6rem);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: .025em;
    opacity: 1;
    transform: none;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note em {
    display: none;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note.is-active em {
    display: inline-block !important;
    margin-top: .75rem;
    padding-bottom: .16rem;
    color: #b9d5ff;
    border-bottom: 1px solid rgba(185, 213, 255, .78);
    font: 600 clamp(.4rem, .52vw, .52rem)/1.1 var(--mono);
    letter-spacing: .07em;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note.is-active {
    color: #fffed5;
    opacity: 1;
    text-shadow: 0 0 14px rgba(131, 165, 255, .72), 0 2px 8px rgba(3, 2, 29, .9);
  }

  .obor-field-ledger #fieldBand .signal-room__field-note--repeater { left: 2.3% !important; top: 20.5% !important; max-width: 12.5%; transform: rotate(-3deg); }
  .obor-field-ledger #fieldBand .signal-room__field-note--charger { left: 1.8% !important; top: 49.6% !important; max-width: 13.5%; transform: rotate(2deg); }
  .obor-field-ledger #fieldBand .signal-room__field-note--backup { left: 3% !important; top: 81% !important; max-width: 12.5%; transform: rotate(-2deg); }
  .obor-field-ledger #fieldBand .signal-room__field-note--bda { right: 1.7% !important; top: 29.5% !important; max-width: 13.5%; transform: rotate(3deg); }
  .obor-field-ledger #fieldBand .signal-room__field-note--distribution { left: 40.2% !important; top: 84.2% !important; max-width: 19%; text-align: center; transform: rotate(-1deg); transform-origin: center top; }
  .obor-field-ledger #fieldBand .signal-room__field-note--monitoring { right: 1.7% !important; top: 67% !important; max-width: 13.5%; transform: rotate(2deg); }

  /* The legacy reading panel resets `inset` on its selected item.  Repeat the
   * physical equipment coordinates at the active specificity so selection
   * enriches the label instead of lifting it out of the diagram. */
  .obor-field-ledger #fieldBand .signal-room__field-note--repeater.is-active { inset: auto !important; left: 2.3% !important; top: 20.5% !important; }
  .obor-field-ledger #fieldBand .signal-room__field-note--charger.is-active { inset: auto !important; left: 1.8% !important; top: 49.6% !important; }
  .obor-field-ledger #fieldBand .signal-room__field-note--backup.is-active { inset: auto !important; left: 3% !important; top: 81% !important; }
  .obor-field-ledger #fieldBand .signal-room__field-note--bda.is-active { inset: auto !important; right: 1.7% !important; top: 29.5% !important; }
  .obor-field-ledger #fieldBand .signal-room__field-note--distribution.is-active { inset: auto !important; left: 40.2% !important; top: 84.2% !important; }
  .obor-field-ledger #fieldBand .signal-room__field-note--monitoring.is-active { inset: auto !important; right: 1.7% !important; top: 67% !important; }

  .obor-field-ledger #fieldBand .signal-room__aperture-readout {
    position: absolute;
    z-index: 17;
    top: 2.5cqw;
    left: 3.4%;
    display: grid !important;
    max-width: 34%;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspots {
    position: relative;
    z-index: 20;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    display: grid !important;
    width: auto;
    height: auto;
    margin: clamp(1.45rem, 2.4vw, 2.5rem) var(--sr-gutter) 0;
    padding: 1.7rem 0 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: clamp(10.25rem, 14vw, 13.5rem);
    gap: clamp(.68rem, 1.1vw, 1rem);
    overflow: visible;
    perspective: 70rem;
    pointer-events: auto;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspots::before {
    content: "EXPLORE THE EQUIPMENT";
    position: absolute;
    inset: 0 0 auto;
    display: block;
    margin: 0;
    color: #abc8ff;
    font: 600 clamp(.62rem, .9vw, .78rem)/1.2 var(--mono);
    letter-spacing: .14em;
    text-align: center;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot,
  .obor-field-ledger #fieldBand .signal-room__hotspot--repeater,
  .obor-field-ledger #fieldBand .signal-room__hotspot--charger,
  .obor-field-ledger #fieldBand .signal-room__hotspot--backup,
  .obor-field-ledger #fieldBand .signal-room__hotspot--bda,
  .obor-field-ledger #fieldBand .signal-room__hotspot--distribution,
  .obor-field-ledger #fieldBand .signal-room__hotspot--monitoring {
    position: relative;
    inset: auto;
    display: grid !important;
    width: auto;
    height: auto;
    min-height: 0;
    padding: .5rem .5rem .62rem;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: .45rem;
    overflow: hidden;
    color: #e9eff9;
    background: linear-gradient(145deg, #10243b, #081626);
    border: 1px solid rgba(136, 177, 236, .38);
    border-radius: .5rem;
    box-shadow: inset 0 0 0 1px rgba(4, 12, 25, .44), 0 .4rem 1rem rgba(0, 0, 0, .2);
    text-align: left;
    transform-style: preserve-3d;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot::after {
    content: attr(data-title);
    position: static;
    display: block !important;
    grid-row: 2;
    min-height: 1.75rem;
    margin: 0 .18rem;
    overflow: hidden;
    color: #f3f0e7;
    border: 0;
    font-family: var(--sans, sans-serif);
    font-size: clamp(.62rem, .96vw, .82rem);
    font-weight: 720;
    letter-spacing: .005em;
    line-height: 1.08;
    opacity: 1;
    text-transform: uppercase;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot > span:first-child {
    position: absolute;
    z-index: 4;
    top: .58rem;
    left: .58rem;
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    margin: 0;
    place-items: center;
    color: #d7e5ff;
    background: rgba(5, 16, 31, .84);
    border: 1px solid rgba(190, 214, 251, .48);
    border-radius: 50%;
    font: 600 .52rem/1 var(--mono);
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview {
    position: relative;
    z-index: 1;
    display: grid !important;
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: .78rem minmax(0, 1fr);
    overflow: hidden;
    color: #172338;
    background: #e9eef5;
    border: 1px solid rgba(202, 220, 242, .72);
    border-radius: .16rem;
    box-shadow: 0 .3rem .72rem rgba(1, 7, 18, .26);
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot > .signal-room__guide-page-preview {
    position: relative;
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview__bar {
    display: flex;
    min-height: 0;
    padding: 0 .36rem;
    color: rgba(248, 251, 255, .94);
    background: #53698d;
    font-size: .21rem;
    letter-spacing: .055em;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview__body {
    display: grid;
    min-height: 0;
    padding: .45rem;
    grid-template-rows: auto minmax(1.15rem, auto) minmax(0, 1fr) auto;
    gap: .24rem;
    background: linear-gradient(155deg, #dce6f1, #b9c8d9);
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview__body small {
    color: #54729f;
    font-size: .2rem;
    letter-spacing: .06em;
    line-height: 1.05;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview__body strong {
    min-height: 0;
    overflow: hidden;
    color: #152338;
    font-size: .56rem;
    font-weight: 760;
    line-height: .94;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview__body img {
    min-height: 0;
    border-color: rgba(61, 88, 127, .32);
    border-radius: .05rem;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview__body em {
    color: #54719c;
    font-size: .17rem;
    letter-spacing: .03em;
    line-height: 1.05;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot.is-active,
  .obor-field-ledger #fieldBand .signal-room__hotspot:hover,
  .obor-field-ledger #fieldBand .signal-room__hotspot:focus-visible {
    background: linear-gradient(145deg, #163b62, #0a1d33);
    border-color: #d9e8ff;
    box-shadow: inset 0 0 0 1px #d9e8ff, 0 0 1rem rgba(97, 153, 255, .2);
  }
}

/* Phone hierarchy: keep Section 02 cinematic intact, then retain the
 * full-proportion Server Room view above the Guide cards.  The physical room
 * anchors the miniature destination pages to the systems they explain. */
@media (max-width: 640px) {
  .obor-field-ledger #fieldBand .signal-room__systems {
    display: none !important;
  }

  .obor-field-ledger #fieldBand .signal-room__stage {
    display: block;
    margin: 0;
  }

  .obor-field-ledger #fieldBand .signal-room__canvas {
    display: flex;
    height: auto !important;
    min-height: 0;
    padding: 0 1rem 1rem;
    flex-direction: column;
    gap: .72rem;
    overflow: visible;
    background: #081624;
  }

  .obor-field-ledger #fieldBand .signal-room__canvas > .signal-room__plate {
    position: relative;
    z-index: 1;
    inset: auto;
    display: block !important;
    order: 0;
    width: calc(100% + 2rem);
    max-width: none;
    height: auto;
    aspect-ratio: 1671 / 941;
    margin: 0 -1rem .02rem;
    object-fit: contain;
    object-position: center;
    filter: brightness(.76) saturate(.84);
  }

  .obor-field-ledger #fieldBand .signal-room__hotspots {
    position: relative;
    inset: auto;
    display: grid;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 1.62rem 0 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 8.7rem;
    gap: .44rem;
    order: 1;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspots::before {
    content: "SERVER ROOM / SELECT EQUIPMENT GUIDE";
    position: absolute;
    inset: 0 0 auto;
    margin: 0;
    color: #abc8ff;
    font-size: .59rem;
    letter-spacing: .135em;
    text-align: left;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot,
  .obor-field-ledger #fieldBand .signal-room__hotspot--repeater,
  .obor-field-ledger #fieldBand .signal-room__hotspot--charger,
  .obor-field-ledger #fieldBand .signal-room__hotspot--backup,
  .obor-field-ledger #fieldBand .signal-room__hotspot--bda,
  .obor-field-ledger #fieldBand .signal-room__hotspot--distribution,
  .obor-field-ledger #fieldBand .signal-room__hotspot--monitoring {
    display: grid !important;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: .3rem .28rem .38rem;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: .32rem;
    overflow: hidden;
    color: #e9eff9;
    background: linear-gradient(145deg, #10243b, #081626);
    border: 1px solid rgba(136, 177, 236, .38);
    border-radius: .42rem;
    box-shadow: inset 0 0 0 1px rgba(4, 12, 25, .44), 0 .28rem .78rem rgba(0, 0, 0, .18);
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot::after {
    content: attr(data-title);
    position: static;
    display: block !important;
    grid-row: 2;
    min-height: 1.5rem;
    margin: 0 .12rem;
    overflow: hidden;
    color: #f3f0e7;
    border: 0;
    font-family: var(--sans, sans-serif);
    font-size: .44rem;
    font-weight: 720;
    letter-spacing: .005em;
    line-height: 1.08;
    opacity: 1;
    text-transform: uppercase;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot > span:first-child {
    position: absolute;
    z-index: 4;
    top: .38rem;
    left: .38rem;
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    place-items: center;
    color: #d7e5ff;
    background: rgba(5, 16, 31, .84);
    border: 1px solid rgba(190, 214, 251, .48);
    border-radius: 50%;
    font-size: .38rem;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot.is-active,
  .obor-field-ledger #fieldBand .signal-room__hotspot:focus-visible {
    background: linear-gradient(145deg, #163b62, #0a1d33);
    border-color: #d9e8ff;
    box-shadow: inset 0 0 0 1px #d9e8ff, 0 0 .85rem rgba(97, 153, 255, .18);
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot.is-active > span:first-child,
  .obor-field-ledger #fieldBand .signal-room__hotspot:focus-visible > span:first-child {
    color: #071423;
    background: #eaf2ff;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview {
    position: relative;
    display: grid !important;
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: .56rem minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(202, 220, 242, .72);
    border-radius: .12rem;
    box-shadow: 0 .22rem .54rem rgba(1, 7, 18, .26);
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview__bar {
    min-height: 0;
    padding: 0 .22rem;
    color: rgba(248, 251, 255, .94);
    background: #53698d;
    font-size: .15rem;
    letter-spacing: .045em;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview__body {
    display: grid;
    min-height: 0;
    padding: .24rem;
    grid-template-rows: auto minmax(.78rem, auto) minmax(0, 1fr) auto;
    gap: .14rem;
    background: linear-gradient(155deg, #dce6f1, #b9c8d9);
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview__body small {
    color: #54729f;
    font-size: .15rem;
    letter-spacing: .045em;
    line-height: 1.05;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview__body strong {
    min-height: 0;
    overflow: hidden;
    color: #152338;
    font-size: .34rem;
    font-weight: 760;
    line-height: .94;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview__body img {
    min-height: 0;
    border-color: rgba(61, 88, 127, .32);
    border-radius: .04rem;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview__body em {
    color: #54719c;
    font-size: .13rem;
    letter-spacing: .026em;
    line-height: 1.05;
  }

  .obor-field-ledger #fieldBand .signal-room__field-notes {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    order: 2;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note.is-active {
    position: relative;
    inset: auto !important;
    display: grid !important;
    width: 100%;
    min-height: 10.2rem;
    padding: .64rem;
    grid-template-columns: minmax(6.7rem, 42%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: .62rem;
    row-gap: .26rem;
    overflow: hidden;
    color: #fffed5;
    background: linear-gradient(125deg, #0b203c, #07111e);
    border: 1px solid rgba(155, 194, 252, .55);
    border-left: 3px solid #cce1ff;
    border-radius: .48rem;
    box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .26);
  }

  .obor-field-ledger #fieldBand .signal-room__field-note > .signal-room__guide-page-preview--detail {
    display: grid !important;
    grid-column: 1;
    grid-row: 1 / -1;
    height: 100%;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview--detail {
    grid-template-rows: .7rem minmax(0, 1fr);
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview--detail .signal-room__guide-page-preview__bar {
    padding: 0 .28rem;
    font-size: .17rem;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview--detail .signal-room__guide-page-preview__body {
    padding: .31rem;
    gap: .2rem;
  }

  /* The inherited note rules position nested `small` as panel copy.  Reset
   * those placements so this remains one coherent miniature page. */
  .obor-field-ledger #fieldBand .signal-room__guide-page-preview--detail .signal-room__guide-page-preview__body > small,
  .obor-field-ledger #fieldBand .signal-room__guide-page-preview--detail .signal-room__guide-page-preview__body > strong,
  .obor-field-ledger #fieldBand .signal-room__guide-page-preview--detail .signal-room__guide-page-preview__body > img,
  .obor-field-ledger #fieldBand .signal-room__guide-page-preview--detail .signal-room__guide-page-preview__body > em {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview--detail .signal-room__guide-page-preview__body > img {
    width: 100%;
    height: 100% !important;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview--detail .signal-room__guide-page-preview__body small {
    font-size: .18rem;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview--detail .signal-room__guide-page-preview__body strong {
    font-size: .45rem;
  }

  .obor-field-ledger #fieldBand .signal-room__guide-page-preview--detail .signal-room__guide-page-preview__body em {
    font-size: .16rem;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note.is-active > b,
  .obor-field-ledger #fieldBand .signal-room__field-note.is-active > small,
  .obor-field-ledger #fieldBand .signal-room__field-note.is-active > em {
    grid-column: 2;
    min-width: 0;
    margin: 0;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note.is-active > b {
    grid-row: 1;
    align-self: end;
    color: #fffed5;
    font-size: .82rem;
    line-height: 1.04;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note.is-active > small {
    grid-row: 2;
    align-self: start;
    max-width: 24ch;
    color: rgba(230, 240, 255, .8);
    font-size: .48rem;
    line-height: 1.36;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note.is-active > em {
    grid-row: 3;
    align-self: end;
    display: inline-flex !important;
    width: max-content;
    padding-bottom: .16rem;
    color: #b9d5ff;
    border-bottom: 1px solid rgba(185, 213, 255, .78);
    font-size: .4rem;
    letter-spacing: .07em;
  }

  /* JS arms this only while the grid is off-screen, so the visitor can see
   * the full measured turn on arrival instead of missing a load-time flash. */
  .obor-field-ledger #fieldBand .signal-room__hotspots {
    perspective: 54rem;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s ease;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspots.is-guide-cards-armed .signal-room__hotspot {
    opacity: .001;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspots.is-guide-cards-revealed .signal-room__hotspot {
    animation: signal-room-guide-card-turn-in 1.08s cubic-bezier(.18, .74, .2, 1) both;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspots.is-guide-cards-revealed .signal-room__hotspot:nth-child(2) { animation-delay: .12s; }
  .obor-field-ledger #fieldBand .signal-room__hotspots.is-guide-cards-revealed .signal-room__hotspot:nth-child(3) { animation-delay: .24s; }
  .obor-field-ledger #fieldBand .signal-room__hotspots.is-guide-cards-revealed .signal-room__hotspot:nth-child(4) { animation-delay: .38s; }
  .obor-field-ledger #fieldBand .signal-room__hotspots.is-guide-cards-revealed .signal-room__hotspot:nth-child(5) { animation-delay: .5s; }
  .obor-field-ledger #fieldBand .signal-room__hotspots.is-guide-cards-revealed .signal-room__hotspot:nth-child(6) { animation-delay: .62s; }

  .obor-field-ledger #fieldBand .signal-room__hotspot > .signal-room__guide-page-preview {
    transform: translateZ(0);
    transform-origin: 50% 52%;
    backface-visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .72, .24, 1), box-shadow .28s ease;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot:active {
    transform: rotateX(3deg) scale(.985);
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot {
    touch-action: pan-y;
  }

  @media (hover: hover) and (pointer: fine) {
    .obor-field-ledger #fieldBand .signal-room__hotspot:hover > .signal-room__guide-page-preview,
    .obor-field-ledger #fieldBand .signal-room__hotspot:focus-visible > .signal-room__guide-page-preview {
      transform: rotateY(-7deg) translateZ(.42rem) scale(1.025);
      box-shadow: .28rem .38rem .82rem rgba(0, 0, 0, .32);
    }

    .obor-field-ledger #fieldBand .signal-room__hotspot:hover,
    .obor-field-ledger #fieldBand .signal-room__hotspot:focus-visible {
      transform: translateY(-.14rem);
    }
  }
}

@keyframes signal-room-guide-card-turn-in {
  0% {
    opacity: .01;
    transform: rotateX(-48deg) translateY(.94rem) scale(.975);
  }
  68% {
    opacity: 1;
    transform: rotateX(4deg) translateY(-.08rem) scale(1.006);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 481px) and (max-width: 640px) {
  .obor-field-ledger #fieldBand .signal-room__hotspots {
    grid-auto-rows: 10.4rem;
  }

  .obor-field-ledger #fieldBand .signal-room__field-note.is-active {
    min-height: 12rem;
  }
}

/* Keep the section title clear of the fixed mobile rail when this is a hash target. */
@media (max-width: 640px) {
  .obor-field-ledger #fieldBand #signalRoomStage {
    scroll-margin-top: 3.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .obor-field-ledger #fieldBand .signal-room__hotspots.is-guide-cards-armed .signal-room__hotspot {
    opacity: 1;
  }

  .obor-field-ledger #fieldBand .signal-room__hotspot,
  .obor-field-ledger #fieldBand .signal-room__hotspot > .signal-room__guide-page-preview {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}