/* The sections of an app down a rail on the leading edge, the one menu every
   Kairo app with sections draws (Neo, Kairo Tools, Kairo Agents, the admin,
   Kairo Data, Kairo Sync, Journey): the system's lavender navigation, Kairo's logo on
   the top bar's line and the app's wordmark under it, the current section
   lifted onto paper in deep violet, account business ruled off at the foot.

   The page column clears the rail by --rail: the body carries `rail-shell`
   (the admin, Data, Sync), or the app's column takes it as a margin (Neo's
   shell, .main). A reader may fold the rail to its icons where the app gives
   them the button (`body.rail-collapsed`, Neo's sidebar_controller.js).

   Below a laptop's width each app chooses what the rail becomes: a drawer
   that slides in over the page (`rail--drawer`), a band across the top
   (`rail--band`), or, with neither, the app's own (Sync's tabs, Journey's
   strip).

   The faces are kairo/base.css's aliases, which Hebrew redefines
   (kairo/localization.css); an app without that sheet gets the tokens'. */

:root {
  --rail: 232px;
}

/* Under the breakpoint the rail is out of the column's way whichever form it
   takes, so the column has the whole width. */
@media (width <= 920px) {
  :root {
    --rail: 0px;
  }
}

.rail-shell {
  min-height: 100dvh;
  padding-inline-start: var(--rail);
}

.rail {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--rail);
  /* The rail is as tall as the window and the sections as long as the app
     has, so on a short window the rail scrolls rather than cutting the foot
     off below the fold. The masthead and the foot stay put (sticky, below);
     only the sections between them move. */
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--k-color-control-border) transparent;
  color: var(--k-color-lavender-ink);
  background-color: var(--k-color-lavender);
  border-inline-end: 1px solid var(--k-color-line);
}

/* A column flex container shrinks its children before it overflows; nothing
   on the rail has anything to give. */
.rail > * {
  flex-shrink: 0;
}

/* The rail is a light surface, so lime never touches it: focus is the deep
   violet the system's dashboard shell rings its own navigation in. */
.rail :focus-visible {
  outline-color: var(--k-color-violet-deep);
}

/* --- The masthead -------------------------------------------------------- */

/* Kairo's logo takes the top bar's height (kairo/topbar.css), so the rail's
   masthead and the page's bar share a line; the wordmark and the fold button
   wrap onto a row of their own under it. Held at the top while the sections
   scroll under it. Below the brand switcher's menu (40), above the entries. */
.rail__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  padding: 0 20px 14px;
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--k-color-lavender);
}

/* The logo is Kairo's, so it leads out to the reader's apps on gokairo.ai;
   the wordmark is the app's, so it leads home. */
.rail__logo-link {
  display: flex;
  align-items: center;
  flex-basis: 100%;
  height: var(--topbar, 64px);
}

.rail__logo {
  display: block;
  height: 24px;
  width: auto;
}

/* The app's name in the display face, with whose it is set small
   underneath: the design system's dashboard wordmark. */
.rail__wordmark {
  display: block;
  font: 600 26px/1.05 var(--display, var(--k-type-display-font-family));
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--k-color-lavender-ink);
}

.rail__wordmark span {
  display: block;
  margin-top: 3px;
  font: 400 12px/1.4 var(--sans, var(--k-type-body-font-family));
  letter-spacing: 0;
  color: var(--k-color-lavender-text);
}

/* Folds the rail to its icons and back. Quiet until reached for: it is a
   setting of the window, not a place to go, so it never takes the lit state.
   Pulled 8px into the masthead's padding so the glyph, not the hit area,
   lines up with the entries' far edge. */
.rail__toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-inline: auto -8px;
  padding: 0;
  color: var(--k-color-lavender-text);
  background: none;
  border: 0;
  border-radius: var(--k-radius-control);
  cursor: pointer;
  transition: color var(--k-duration-fast) var(--k-ease-standard),
    background-color var(--k-duration-fast) var(--k-ease-standard);
}

.rail__toggle:hover {
  color: var(--k-color-lavender-ink);
  background: var(--k-color-lavender-soft);
}

/* The glyph points the way the rail folds, which is the other way in
   Hebrew. */
.rail__toggle:dir(rtl) svg {
  transform: scaleX(-1);
}

/* --- The brand switcher, drawn only for a reader with more than one brand,
       or a brand with more than one store -------------------------------- */

.brand-switcher {
  position: relative;
  margin: 16px 10px 0;
}

.brand-switcher__current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-control);
  cursor: pointer;
  list-style: none;
}

/* Safari draws its own triangle from the summary's default marker. */
.brand-switcher__current::-webkit-details-marker {
  display: none;
}

.brand-switcher__current:hover,
.brand-switcher[open] .brand-switcher__current {
  border-color: var(--k-color-control-border);
}

.brand-switcher__current small {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-color-lavender-text);
}

.brand-switcher__current strong {
  display: block;
  overflow: hidden;
  max-width: 150px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--k-color-lavender-ink);
}

/* The folded rail's stand-in for the name; see the folded rail below. */
.brand-switcher__initial {
  display: none;
}

.brand-switcher__caret {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid var(--k-color-lavender-text);
  border-bottom: 1.5px solid var(--k-color-lavender-text);
  transform: rotate(45deg);
}

.brand-switcher[open] .brand-switcher__caret {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.brand-switcher__menu {
  position: absolute;
  z-index: 40;
  right: 0;
  left: 0;
  margin: 6px 0 0;
  padding: 6px;
  list-style: none;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-control);
  box-shadow: var(--k-shadow-raised);
}

.brand-switcher__option {
  display: block;
  overflow: hidden;
  /* A button that fills its menu without spilling out of it. */
  box-sizing: border-box;
  width: 100%;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: start;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--k-color-lavender-text);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.brand-switcher__option:hover {
  color: var(--k-color-lavender-ink);
  background: var(--k-color-lavender-soft);
}

.brand-switcher__option[aria-current] {
  font-weight: 600;
  color: var(--k-color-violet-deep);
  background: var(--k-color-lavender);
}

/* The store being looked at, under its brand's name, for a brand with
   several: quieter than the name, as it is the second half of one answer. */
.brand-switcher__store {
  display: block;
  overflow: hidden;
  max-width: 150px;
  margin-top: 2px;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--k-color-lavender-text);
}

/* A brand with several stores: its name heads them and is not a choice. */
.brand-switcher__group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-switcher__group-name {
  display: block;
  overflow: hidden;
  padding: 9px 10px 4px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--k-color-lavender-ink);
}

.brand-switcher__option--store {
  padding-inline-start: 20px;
}

/* --- The sections --------------------------------------------------------- */

.rail__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px 18px;
}

/* The heading over a group of entries: mono, spaced and quiet, so it names
   the group without reading as one more place to go. */
.rail__label {
  margin: 22px 22px 10px;
  font-family: var(--mono, var(--k-type-meta-font-family));
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--k-color-lavender-text);
  opacity: 0.8;
}

/* A second group under a rule of its own: the same line the foot is ruled
   off with, inset to the entries, because this is not the end of the rail. */
.rail__label--ruled {
  margin: 4px 22px 10px;
  padding-top: 20px;
  border-top: 1px solid var(--k-color-line);
}

/* Account business, held at the foot of the rail however short the sections
   above it are, and held there when they are longer than the window: they
   scroll under it, so the way out is never below the fold. Opaque for that
   reason. */
.rail__nav--foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--k-color-line);
  position: sticky;
  bottom: 0;
  z-index: 1;
  background-color: var(--k-color-lavender);
}

/* Who is signed in. Signing out is gokairo.ai's, so nothing here does it. */
.rail__user {
  overflow: hidden;
  margin: 0 12px 8px;
  font-family: var(--mono, var(--k-type-meta-font-family));
  font-size: 12px;
  color: var(--k-color-lavender-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rail__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  /* The 100% that lets a <button> fill the rail keeps the padding inside it,
     or the entry runs 24px past the rail and over the page. */
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: start;
  text-decoration: none;
  color: var(--k-color-lavender-text);
  background: none;
  border: 0;
  border-radius: var(--k-radius-control);
  cursor: pointer;
  transition: color var(--k-duration-fast) var(--k-ease-standard),
    background-color var(--k-duration-fast) var(--k-ease-standard);
}

.rail__item:hover {
  color: var(--k-color-lavender-ink);
  background: var(--k-color-lavender-soft);
}

/* The current section: lifted onto paper in deep violet with a bar down its
   leading edge, as the design system's shell marks it, so the entry reads as
   marked rather than merely hovered. Inset rather than in the gutter so the
   bar stays with the pill when the rail folds. */
.rail__item--current {
  color: var(--k-color-violet-deep);
  background: var(--k-color-paper);
  box-shadow: inset 3px 0 var(--k-color-violet-deep);
}

/* box-shadow has no logical form, so in Hebrew the bar is moved to the
   leading edge by hand. */
.rail__item--current:dir(rtl) {
  box-shadow: inset -3px 0 var(--k-color-violet-deep);
}

/* One line, always: the rail's width animates when it folds, and a label
   that wrapped on the way would push the entry's icon off its centre. */
.rail__item-label {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The glyphs are inline SVG on the design system's 24-unit grid, stroked in
   currentColor, so hover and the lit state carry the icon with the label. */
.rail__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  opacity: 0.9;
}

/* How many are waiting, pushed to the far edge of the entry. It takes the
   entry's own colour, tinted, so it is violet on the lit entry and quiet on
   the others. */
.rail__count {
  min-width: 22px;
  margin-inline-start: auto;
  padding: 3px 6px;
  box-sizing: border-box;
  font-family: var(--mono, var(--k-type-meta-font-family));
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 6px;
}

/* A laptop's window is shorter than the full rail at 48px an entry. Tighter
   rows fit every section without scrolling down to about 720px; under that
   the rail scrolls. Desktop widths only: on a phone the rows are touch
   targets and keep their height. */
@media (width > 920px) and (height <= 920px) {
  .rail__item {
    height: 40px;
  }

  .rail__label {
    margin-top: 16px;
    margin-bottom: 6px;
  }

  .rail__label--ruled {
    margin-top: 0;
    padding-top: 14px;
  }

  .rail__nav {
    padding-bottom: 12px;
  }

  .rail__nav--foot {
    padding-top: 10px;
  }
}

/* --- The folded rail ------------------------------------------------------ */

/* 64px, icons only, the reader's choice. Desktop widths only: below 920px the
   rail is a drawer or a band, and a folded one would be a strip of icons over
   the page. Every name stays in the markup, clipped rather than removed, so a
   screen reader hears the same rail; a pointer gets it as the entry's
   tooltip. */
@media (width > 920px) {
  body.rail-collapsed {
    --rail: 64px;
  }

  .rail {
    transition: width var(--k-duration-standard) var(--k-ease-standard);
  }

  .rail-shell {
    transition: padding-inline-start var(--k-duration-standard) var(--k-ease-standard);
  }

  /* The wordmark does not fit, so the masthead holds the button alone, on
     the entries' centre line. */
  .rail-collapsed .rail__brand {
    justify-content: center;
    height: var(--topbar, 64px);
    padding: 0;
  }

  .rail-collapsed .rail__logo-link,
  .rail-collapsed .rail__wordmark {
    display: none;
  }

  .rail-collapsed .rail__toggle {
    margin-inline: 0;
  }

  .rail-collapsed .brand-switcher__current {
    justify-content: center;
    height: 44px;
    padding: 0;
  }

  .rail-collapsed .brand-switcher__initial {
    display: block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--k-color-lavender-ink);
  }

  .rail-collapsed .brand-switcher__caret {
    display: none;
  }

  .rail-collapsed .brand-switcher__name,
  .rail-collapsed .rail__item-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* The list of brands is wider than the rail it hangs in, and the rail clips
     what overflows it, so the menu leaves for the viewport and opens beside
     the switcher instead of under it. 80px is the masthead plus the
     switcher's top margin. */
  .rail-collapsed .brand-switcher__menu {
    position: fixed;
    top: 80px;
    inset-inline: calc(var(--rail) + 6px) auto;
    width: 220px;
    margin: 0;
  }

  /* A group's heading has no room either; what is left of it is its spacing,
     and for a ruled one its rule: still two groups, told apart by the line. */
  .rail-collapsed .rail__label {
    overflow: hidden;
    height: 0;
    margin: 16px 14px 0;
  }

  .rail-collapsed .rail__label--ruled {
    margin: 4px 14px 14px;
    padding-top: 0;
  }

  .rail-collapsed .rail__item {
    justify-content: center;
    gap: 0;
    padding: 0;
  }

  /* The count has no far edge to sit at, so it rides the icon's corner. Its
     wash is mixed into the rail's lavender rather than left transparent: it
     now lies over the glyph, which would show through. */
  .rail-collapsed .rail__count {
    position: absolute;
    top: 2px;
    inset-inline-end: 0;
    min-width: 18px;
    padding: 0 4px;
    background: color-mix(in srgb, currentColor 22%, var(--k-color-lavender));
  }
}

/* --- Below a laptop's width ----------------------------------------------- */

@media (width <= 920px) {
  /* Nothing to fold: the rail is a drawer or a band. */
  .rail__toggle {
    display: none;
  }

  /* The drawer: the whole rail, slid off the leading edge until the top
     bar's button opens it (`rail--open`) over the page. */
  .rail--drawer {
    width: 236px;
    transform: translateX(-102%);
    transition: transform var(--k-duration-standard) var(--k-ease-standard);
  }

  .rail--drawer:dir(rtl) {
    transform: translateX(102%);
  }

  .rail--drawer.rail--open {
    transform: translateX(0);
  }

  /* The band: the pages are tables, and a table wants the whole width more
     than a fixed column, so the rail lies across the top instead. */
  .rail--band {
    position: static;
    width: auto;
    border-inline-end: 0;
    border-bottom: 1px solid var(--k-color-line);
  }

  .rail--band .rail__brand {
    position: static;
    flex-wrap: nowrap;
    gap: 14px;
    padding-bottom: 0;
  }

  .rail--band .rail__logo-link {
    flex-basis: auto;
  }

  .rail--band .rail__nav {
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 10px;
  }

  /* The foot holds only who is signed in, which a band has no room for. */
  .rail--band .rail__nav--foot {
    display: none;
  }

  .rail--band .rail__item {
    width: auto;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail,
  .rail-shell {
    transition: none;
  }
}