/* Rack — this page's own layout: three views of one rack named by the address hash, the highlight chips dimming the
   drawing, the connection path diagram, the settings zones, the permit/move/adopt panels. The shared head is in
   rack-parts.css; everything else is kit. */
@layer page {
  /* Three views, named by the address hash: the one targeted (or holding the target) shows; Overview otherwise.
     The panel itself never scrolls into view, so the head stays in sight. */
  .rk-view { scroll-margin-top: 100vh; }
  main:has(.rk-view:target, .rk-view :target) .rk-view:not(:target):not(:has(:target)),
  main:not(:has(.rk-view:target, .rk-view :target)) .rk-view:not(#overview) { display: none; }
  .rk-view > section:first-child, .rk-first { padding-top: 0; }
  /* The reels Janus doesn't know, said plainly for a rack in service: only when the address asks for it (#unknown). */
  .rk-adn:not(:target) { display: none; }
  .rk-block { padding-top: 0; }

  /* Highlight chips dim every other bay on the drawing. */
  .rk-bays:has(#rk-hl input:checked) #elev [role="gridcell"] { opacity: .22; }
  .rk-bays:has(#rk-hl input[value="occ"]:checked) #elev :is([data-kind="occ"], [data-kind="res"]),
  .rk-bays:has(#rk-hl input[value="empty"]:checked) #elev [role="gridcell"]:not([data-kind]),
  .rk-bays:has(#rk-hl input[value="review"]:checked) #elev [data-kind="lit"],
  .rk-bays:has(#rk-hl input[value="res"]:checked) #elev [data-kind="res"],
  .rk-bays:has(#rk-hl input[value="unknown"]:checked) #elev [data-kind="stale"] { opacity: 1; }

  /* Connection path: server → network → controller → bus → sensors, joined by the wire's state. */
  .rk-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rk-hop { position: relative; display: grid; gap: 4px; padding: 0 var(--s4) 0 0; align-content: start; font-size: var(--t-small); }
  .rk-hop::before { content: ''; position: absolute; top: 19px; left: 40px; right: 0; height: 2px; background: var(--ok-dot); }
  .rk-hop:last-child::before { display: none; }
  .rk-hop[data-tone="warn"]::before { background: repeating-linear-gradient(90deg, var(--warn-dot) 0 6px, transparent 6px 10px); }
  .rk-hop:is([data-tone="bad"], [data-tone="idle"])::before { background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 10px); }
  .rk-hop__ic { position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--sheet); }
  .rk-hop b { font-size: var(--t-data); margin-top: var(--s2); }

  /* Settings: a zone's title and why beside its content. */
  .rk-zone { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s8); padding-block: var(--s6); border-top: 1px solid var(--line); }
  .rk-zone--first { border-top: 0; padding-top: 0; }
  .rk-zone > * { min-width: 0; }

  /* Permit, move, adopt: this page's panels. */
  .rk-pm__grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .rk-mv__route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s4); align-items: center; }
  .rk-mv__pl { display: grid; gap: 2px; min-width: 0; }
  .rk-mv__pl b { font-size: var(--t-data); font-weight: 650; }
  .rk-mv__arrow { color: var(--text-3); }
  .rk-mv__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .rk-test { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: end; }

  @media (max-width: 1000px) {
    .rk-zone { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
    .rk-path { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
    .rk-hop { grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s3); }
    .rk-hop > :not(.rk-hop__ic) { grid-column: 2; }
    .rk-hop b { margin-top: 0; }
    .rk-hop::before { top: 40px; left: 19px; right: auto; width: 2px; height: calc(100% - 24px); }
    .rk-pm__grid, .rk-mv__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
    .rk-mv__route { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .rk-mv__win { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) { .rk-test { grid-template-columns: minmax(0, 1fr); } }
}