/* S1 navigation: flat role-keyed rail, phone dock, tab strip, avatar menu. Tokens: s1-tokens.css.
 * The rail and dock hosts are empty containers that s1-nav.js fills; the release label is shown in the rail and the avatar menu only. */
body.s1-shell .mobile-dock > .portal-release-version,
body.s1-shell .mobile-dock > :not(.s1n-dock):not(.s1n-sheet),
body.s1-shell .topbar .main-site { display: none !important; }

.s1n-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; }
.s1n-ico .s1-icon { width: 20px; height: 20px; stroke-width: 1.8; }
.s1n-badge { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--s1-wait); color: #fff; font: 700 11px/20px var(--s1-font-ui); text-align: center; }
.s1n-badge[hidden] { display: none; }

/* rail */
.s1n-rail { display: none; }
@media (min-width: 901px) {
  body.s1-shell .s1n-rail { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; }
  .s1n-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: var(--s1-radius-control); color: #c9ccd4; font: 600 14px var(--s1-font-ui); text-decoration: none; }
  .s1n-item .s1n-label { flex: 1; min-width: 0; }
  .s1n-item::before { content: ""; position: absolute; left: -12px; top: 11px; width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: transparent; }
  .s1n-item:hover { color: #fff; background: rgba(255, 255, 255, .08); }
  .s1n-item.is-active, .s1n-item[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .14); }
  .s1n-item.is-active::before { background: #fff; }
  .s1n-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .s1n-item[data-s1n="manage"] { margin-top: 8px; }
  .s1n-item[data-s1n="manage"]::after { content: ""; position: absolute; left: 12px; right: 12px; top: -5px; height: 1px; background: rgba(255, 255, 255, .1); }
}

/* dock (phone). s1-base.css decides when the dock shows; here only its contents. */
body.s1-shell .mobile-dock { grid-template-columns: 1fr !important; padding: 7px; }
.s1n-dock { display: grid; grid-template-columns: repeat(var(--s1n-cols, 5), minmax(0, 1fr)); gap: 2px; min-width: 0; }
.s1n-dock-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 2px; border: 0; border-radius: 14px; background: transparent; color: #c9ccd4; font: 600 10.5px/1.1 var(--s1-font-ui); text-decoration: none; cursor: pointer; }
.s1n-dock-item.is-active, .s1n-dock-item[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .14); }
.s1n-dock-item:focus-visible, .s1n-sheet-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.s1n-dock-item .s1n-badge { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; line-height: 18px; border-radius: 9px; }
.s1n-sheet { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 200px; padding: 6px; border-radius: 14px; background: var(--s1-rail); box-shadow: 0 16px 40px rgba(17, 19, 24, .35); }
.s1n-sheet[hidden] { display: none; }
.s1n-sheet-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--s1-radius-control); color: #e3e5ea; font: 600 14px var(--s1-font-ui); text-decoration: none; }
.s1n-sheet-item .s1n-label { flex: 1; }
.s1n-sheet-item:hover, .s1n-sheet-item.is-active { background: rgba(255, 255, 255, .14); color: #fff; }

/* tab strip: Projects Mine | Find | Partner | Personal, Tasks Board | Calendar, Messages | Inbox | Requests */
.s1n-tabs { display: flex; gap: 4px; margin: 4px clamp(16px, 2.6vw, 44px) 0; padding: 0; border-bottom: 1px solid var(--s1-line); overflow-x: auto; scrollbar-width: none; }
.s1n-tabs[hidden] { display: none; }
.s1n-tab { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; color: var(--s1-mute); font: 600 14px var(--s1-font-ui); text-decoration: none; white-space: nowrap; }
.s1n-tab:hover { color: var(--s1-ink); }
.s1n-tab[aria-current="page"] { color: var(--s1-ink); }
.s1n-tab[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--s1-ink); }
.s1n-tab:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: -2px; border-radius: 6px; }
body.s1-shell.s1-project-mode .s1n-tabs { display: none; }

/* avatar (Me) menu */
.topbar .avatar[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--s1-panel), 0 0 0 4px var(--s1-ink); }
.s1n-menu { position: fixed; z-index: 90; width: min(288px, calc(100vw - 16px)); padding: 6px; border: 1px solid var(--s1-line); border-radius: 12px; background: var(--s1-panel); box-shadow: 0 16px 40px rgba(17, 19, 24, .18); font-family: var(--s1-font-ui); }
.s1n-menu[hidden] { display: none; }
.s1n-menu-head { display: grid; gap: 2px; padding: 10px 12px 8px; }
.s1n-menu-head strong { font: 700 14px var(--s1-font-ui); color: var(--s1-ink); }
.s1n-menu-head span { font: 400 12px var(--s1-font-ui); color: var(--s1-mute); overflow-wrap: anywhere; }
.s1n-menu [role="menuitem"] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 12px; border: 0; border-radius: var(--s1-radius-control); background: transparent; color: var(--s1-ink); font: 600 14px var(--s1-font-ui); text-align: left; text-decoration: none; cursor: pointer; }
.s1n-menu [role="menuitem"]:hover, .s1n-menu [role="menuitem"]:focus-visible { background: var(--s1-column); outline: none; }
.s1n-menu [role="menuitem"]:focus-visible { box-shadow: inset 0 0 0 2px var(--s1-ink); }
.s1n-menu .s1n-ico, .s1n-menu .s1n-ico .s1-icon { width: 16px; height: 16px; }
.s1n-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--s1-line-soft); }
.s1n-menu-version { margin: 4px 12px 6px; color: var(--s1-mute); font: 500 11px var(--s1-font-ui); }

/* One title per page: these routes render their own heading, so the legacy topbar copy (title, subtitle) is not shown. */
body.s1-shell[data-route="tasks"] .topbar-copy, body.s1-shell[data-route="calendar"] .topbar-copy, body.s1-shell[data-route="messages"] .topbar-copy,
body.s1-shell[data-route="inbox"] .topbar-copy, body.s1-shell[data-route="activity"] .topbar-copy, body.s1-shell[data-route="requests"] .topbar-copy,
body.s1-shell[data-route="resources"] .topbar-copy, body.s1-shell[data-route="resource"] .topbar-copy, body.s1-shell[data-route="settings"] .topbar-copy { display: none; }

/* the floating Ask button steps aside while the phone More sheet is open */
body.s1n-more-open .asst-trigger { display: none; }

/* Calendar (classic page) inside the S1 shell: same gutters, ink controls, no maroon chrome */
body.s1-shell[data-route="calendar"] #student-page-root { padding: 16px clamp(16px, 2.6vw, 44px) 32px; box-sizing: border-box; } /* the S1 Calendar page carries its own Add item button */

/* Version + build at the bottom-left of the S1 rail (owner: always visible, so COTR/LLU parity is checkable). */
body.s1-shell .rail > .portal-release-version { display: block !important; margin: auto 0 0; padding: 10px 24px 14px; font-size: 11px; letter-spacing: .02em; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }

/* Help modal (Kit.modal body): link rows */
.s1n-help-intro { margin: 0 0 12px; color: var(--s1-ink-2); font: var(--s1-text-small)/1.5 var(--s1-font-ui); }
.s1n-help { display: grid; gap: 6px; }
.s1n-help-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); background: var(--s1-panel); color: var(--s1-ink); text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.s1n-help-row:hover { background: var(--s1-panel-head); border-color: var(--s1-checkbox); }
.s1n-help-row:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 2px; }
.s1n-help-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.s1n-help-text strong { font: 650 var(--s1-text-base) var(--s1-font-ui); }
.s1n-help-text small { color: var(--s1-mute); font: var(--s1-text-small) var(--s1-font-ui); }
.s1n-help-go { color: var(--s1-mute); display: inline-grid; }

/* Tour modal (portal-guide.js) */
.s1-tour { display: flex; gap: 14px; align-items: flex-start; }
.s1-tour-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); background: var(--s1-panel-head); color: var(--s1-ink); }
.s1-tour p { margin: 0; color: var(--s1-ink-2); font: var(--s1-text-base)/1.55 var(--s1-font-ui); }