/* Locked left rail. Every hub uses this sheet (or chrome.css, which imports it).
 * Do not override --rail-width. Do not restyle markers as dots or icon stacks.
 * Spec: RAIL.md. Snippet: snippets/rail.html.
 */

.hub-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 100%;
  /* Height-lock the rail so a long destination list scrolls inside
     .hub-rail__nav instead of clipping the hub switcher (Professional). */
  max-height: 100dvh;
  overflow: hidden;
  padding: var(--space-5) var(--space-3);
  background: linear-gradient(180deg, var(--depth) 0%, var(--marine) 100%);
  color: var(--on-dark);
}

.hub-rail a {
  color: inherit;
  text-decoration: none;
}

.hub-rail a.hub-rail__link {
  color: var(--on-dark-muted);
}

.hub-rail a:hover {
  color: inherit;
}

/* Brand: one line, CSS uppercase. Always an <a> to that hub’s home. */
.hub-rail__brand-block {
  padding: var(--space-1) var(--space-3) var(--space-4);
}

.hub-rail__brand {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--on-dark-muted);
  white-space: nowrap;
  cursor: pointer;
}

a.hub-rail__brand:hover,
a.hub-rail__brand:focus-visible {
  color: var(--on-dark);
}

.hub-rail__tagline {
  margin: var(--space-1) 0 0;
  padding: 0;
  font-size: var(--text-2xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  line-height: var(--leading-snug);
  color: var(--on-dark-muted);
  opacity: 0.72;
}

/* Optional Teaching search — on-dark field, same inset as nav. */
.hub-rail__search {
  margin: 0 var(--space-2) var(--space-3);
}

.hub-rail__search input {
  width: 100%;
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-sm);
  background: var(--on-dark-hover);
  color: var(--on-dark);
  font: inherit;
  font-size: var(--text-sm);
}

.hub-rail__search input::placeholder {
  color: var(--on-dark-muted);
}

.hub-rail__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Home / Dashboard / Archive + Chat (+ Life Calendar) sit above the rest. */
.hub-rail__majors {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hub-rail__section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  margin: var(--space-4) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  text-align: left;
  color: var(--on-dark-muted);
}

button.hub-rail__section {
  cursor: pointer;
}

button.hub-rail__section:hover,
button.hub-rail__section:focus-visible {
  color: var(--on-dark);
}

.hub-rail__section:first-child {
  margin-top: 0;
}

/* Primary destinations: 18px outline icon + title-case label. */
.hub-rail__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 2.5rem;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--on-dark-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
  text-align: left;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}

.hub-rail a.hub-rail__link:hover,
.hub-rail a.hub-rail__link:focus-visible,
.hub-rail__link:hover,
.hub-rail__link:focus-visible {
  color: var(--on-dark);
  background: var(--on-dark-hover);
}

.hub-rail a.hub-rail__link[aria-current="page"],
.hub-rail a.hub-rail__link.is-current,
.hub-rail__link[aria-current="page"],
.hub-rail__link.is-current {
  color: var(--on-dark);
  background: var(--on-dark-hover);
  font-weight: var(--weight-semibold);
}

.hub-rail__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  display: block;
}

.hub-rail__link--plain {
  padding-left: var(--space-3);
}

.hub-rail__status {
  margin: auto 0 0;
  padding: var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  line-height: var(--leading-snug);
  color: var(--on-dark-muted);
}

/* Hub accordion: label navigates, chevron previews. Height animates 0fr → 1fr.
   grid-template-columns: 1fr is required so the implicit column does not shrink
   to content width and shove the rest of the rail sideways. Padding on the
   inner stays constant so it cannot fight the row animation. */
.hub-rail__hubs,
.hub-stack {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  min-width: 0;
  width: 100%;
}

.hub-rail__hubs {
  gap: var(--space-1);
}

.hub-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  border-radius: var(--radius-sm);
}

.hub-row:hover {
  background: var(--on-dark-hover);
}

.hub-row.is-active {
  background: var(--on-dark-hover);
  color: var(--on-dark);
}

.hub-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.44rem 0.125rem 0.44rem var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
  text-align: left;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}

.hub-row.is-active .hub-label {
  color: var(--on-dark);
  font-weight: var(--weight-semibold);
}

.hub-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0.44rem 0.375rem 0.44rem 0.25rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--on-dark-muted);
  cursor: pointer;
}

.hub-toggle:hover,
.hub-toggle:focus-visible {
  color: var(--on-dark);
}

.hub-toggle svg {
  width: 0.875rem;
  height: 0.875rem;
  display: block;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.hub-row.is-open .hub-toggle svg {
  transform: rotate(180deg);
}

.hub-panel {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0fr;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.hub-panel.is-open {
  grid-template-rows: 1fr;
}

.hub-panel-inner {
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  padding: 0.125rem 0.375rem 0.5rem 1.375rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hub-panel.is-open .hub-panel-inner {
  opacity: 1;
  pointer-events: auto;
}

.hub-preview-item,
.hub-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.3rem 0 0.3rem 0.625rem;
  border: 0;
  border-left: 1px solid var(--on-dark-line);
  border-radius: 0;
  background: transparent;
  color: var(--on-dark-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
  text-align: left;
  text-transform: none;
  cursor: default;
}

.hub-nav-item {
  cursor: pointer;
}

.hub-nav-item:hover,
.hub-nav-item:focus-visible {
  color: var(--on-dark);
}

.hub-nav-item.is-current,
.hub-nav-item[aria-current="page"] {
  color: var(--on-dark);
}

.hub-nav-item .hub-rail__icon,
.hub-nav-item .nav-icon {
  width: 0.875rem;
  height: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
  .hub-panel,
  .hub-panel-inner,
  .hub-toggle svg {
    transition: none;
  }
}

@media (max-width: 720px) {
  /* Phones use the locked bottom bar + More sheet (MOBILE.md). Never restyle
     this rail into a top strip — that breaks cross-hub consistency. */
  .hub-rail {
    display: none;
  }
}