/*
 * Shared building navigation foundation.
 *
 * Nep Bar has its own red-light treatment in nep.css. These rules provide
 * the missing structural layer for the Ken Cowork variant without changing
 * the visual language of the first- or second-floor pages.
 */
.floor-selector--ken {
  position: absolute;
  top: 50%;
  right: clamp(24px, 5vw, 92px);
  z-index: 4;
  width: min(290px, calc(100% - 48px));
  color: var(--floor-text, #2f5154);
  transform: translateY(-45%);
}

.floor-selector--ken > p {
  margin: 0 0 12px;
  color: var(--floor-current-copy, #00757b);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-align: right;
  text-transform: uppercase;
}

.floor-selector--ken .building {
  overflow: hidden;
  border: 1px solid var(--floor-border, rgba(0, 143, 147, .45));
  border-radius: 3px;
  background: var(--floor-bg, rgba(255, 253, 247, .94));
  box-shadow: 0 30px 80px rgba(16, 69, 62, .18);
}

.floor-selector--ken .floor {
  position: relative;
  min-height: 77px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--floor-text, #2f5154);
  border-bottom: 1px solid var(--floor-divider, rgba(0, 143, 147, .2));
  text-decoration: none;
  transition: background .22s ease, color .22s ease;
}

.floor-selector--ken .floor:last-child {
  border-bottom: 0;
}

.floor-selector--ken a.floor:hover,
.floor-selector--ken a.floor:focus-visible {
  color: #143f42;
  background: var(--floor-hover, #e1f1e8);
}

.floor-selector--ken a.floor:focus-visible {
  z-index: 2;
  outline: 3px solid rgba(0, 143, 147, .35);
  outline-offset: -4px;
}

.floor-selector--ken .floor-no {
  color: var(--floor-number, #008f93);
  font-family: var(--display, serif);
  font-size: 1.55rem;
  line-height: 1;
}

.floor-selector--ken .floor-name {
  min-width: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.floor-selector--ken .floor-name small {
  display: block;
  margin-top: 3px;
  color: var(--floor-current-copy, #00757b);
  font-size: .57rem;
  letter-spacing: .13em;
}

.floor-selector--ken .floor-arrow {
  color: var(--floor-number, #008f93);
  font-size: 1rem;
  transition: transform .22s ease;
}

.floor-selector--ken a.floor:hover .floor-arrow,
.floor-selector--ken a.floor:focus-visible .floor-arrow {
  transform: translate(2px, -2px);
}

.floor-selector--ken .floor.is-current {
  background: var(--floor-active, linear-gradient(90deg, #dff2e5, #f9f1c9));
  box-shadow: inset 4px 0 var(--floor-accent, #f0a400);
}

.floor-selector--ken .current-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--floor-accent, #f0a400);
  box-shadow: 0 0 0 4px rgba(240, 164, 0, .16);
}

.floor-selector--ken .foundation {
  display: block;
  width: calc(100% + 18px);
  height: 7px;
  margin-left: -9px;
  background: linear-gradient(90deg, #00757b, #00a6a1);
  clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%);
}

@media (max-width: 1020px) {
  .floor-selector--ken {
    top: auto;
    right: 24px;
    bottom: 72px;
    width: min(320px, calc(100% - 48px));
    transform: none;
  }
}

@media (max-width: 720px) {
  .floor-selector--ken {
    position: relative;
    inset: auto;
    width: auto;
    margin: 0 16px 28px;
    transform: none;
  }

  .floor-selector--ken > p {
    text-align: left;
  }

  .floor-selector--ken .floor {
    min-height: 65px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floor-selector--ken .floor,
  .floor-selector--ken .floor-arrow {
    transition: none;
  }
}