/* rooms.css, the eight room rail and the section strip.
   Loaded before fixes.css so a later fix can still win. Every value comes
   from the tokens in app.css; nothing new is defined here.

   Two rules this file exists to hold:
     1. the rail never scrolls. Eight rooms, a search, a two item foot.
     2. the strip REPLACES the tab row visually, it does not stack on top of
        it. Three bars of chrome before any data is the measured worst case
        in the teardown (Tabler, 170px). */

.sidebar--rooms {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
}

/* the jump control. It is a button, not an input, because it opens a palette
   rather than filtering the rail in place. */
.nav-jump {
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 24px);
  margin: 4px 12px 14px;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.nav-jump > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-jump:hover {
  border-color: var(--plum);
  color: var(--ink-2);
}
.nav-jump:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 1px;
}
.nav-jump svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.nav-jump kbd {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 1px 5px;
}

.nav-recent {
  padding: 0 12px 10px;
}
.nav-recent__h {
  display: block;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 4px 6px;
}
.nav-recent a {
  display: block;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 12.5px;
  text-decoration: none;
}
.nav-recent a:hover {
  background: var(--surface-2);
}

.roomnav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 12px;
}

.room-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.room-item svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--muted);
}
.room-item:hover {
  background: var(--surface-2);
}
.room-item:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: -2px;
}
.room-item.active {
  background: var(--plum-050);
  color: var(--plum);
  font-weight: 600;
}
.room-item.active svg {
  color: var(--plum);
}
.room-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 6px 6px 0;
  background: var(--plum);
}
/* how many sections are behind this room. Quiet on purpose: it is a hint
   about depth, not a count of unread anything. */
.room-item__n {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.room-item.active .room-item__n {
  color: var(--plum);
}

/* the foot: out of the scanning path, still one click */
.rail-foot {
  margin-top: auto;
  padding: 14px 12px 4px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-item--foot {
  font-size: 13px;
  color: var(--muted);
}
.nav-item--foot svg {
  color: var(--muted);
}

/* ---------------- the section strip ---------------- */

.roomstrips {
  position: sticky;
  top: var(--topbar-h);
  z-index: 6;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.roomstrip {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.roomstrip::-webkit-scrollbar {
  display: none;
}
.roomstrip[hidden] {
  display: none;
}

/* the old rail items, re-homed. They keep class="nav-item" and data-view so
   every existing selector, check and tour step still resolves. Everything
   below is a restyle of that same element in a horizontal context. */
.roomstrip .nav-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  flex: none;
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
.roomstrip .nav-item svg {
  width: 15px;
  height: 15px;
}
.roomstrip .nav-item::before {
  display: none;
}
.roomstrip .nav-item:hover {
  background: var(--surface-2);
}
.roomstrip .nav-item.active {
  background: var(--plum);
  color: #fff;
}
.roomstrip .nav-item.active svg {
  color: #fff;
}
.roomstrip .nav-item.active .count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
/* the per section settings gear rides along, but only on the open section,
   so a strip of eight gears does not read as eight more choices */
/* the per section settings gear rides along, but only on the open section,
   so a strip of six gears does not read as six more choices. It sits after
   the label with its own gap; inline with no gap it collided with the last
   glyph of the word. */
.roomstrip .nav-item .nav-cog {
  display: none;
}
.roomstrip .nav-item.active .nav-cog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: #fff;
  opacity: 0.9;
}
.roomstrip .nav-item.active .nav-cog svg {
  width: 11px;
  height: 11px;
}
.roomstrip .nav-item.active .nav-cog:hover {
  background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 1180px) {
  .roomstrip {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* a dropped rail item whose page is still real. Present for Ask EYT, the
   hotbar and roles.js; never painted. */
.nav-item--route {
  display: none !important;
}