/* RMK-CONNECT-01: the few Institute-only pieces of the RMK Connect shell (loaded only when
   RMK_CONNECT_UI is on, after lesson.css). Colours come from rmk_ui/css/tokens.css. */
.inst-subnav { background: var(--rmk-dark, #1F2328); border-bottom: 1px solid var(--rmk-dark-border, #2D333B); }
.inst-subnav__inner { max-width: 1120px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 4px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.inst-subnav__inner::-webkit-scrollbar { display: none; }
.inst-subnav__name { color: var(--rmk-accent, #00E5FF); font-weight: 700; font-size: 14px; white-space: nowrap; margin-right: 8px; }
.inst-subnav a, .inst-subnav__form button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: #FFFFFF; text-decoration: none; font: inherit; font-size: 14px; white-space: nowrap; background: none; border: 0; cursor: pointer; }
.inst-subnav a:hover, .inst-subnav a:focus-visible, .inst-subnav__form button:hover { color: var(--rmk-accent, #00E5FF); text-decoration: underline; }
.inst-subnav a[aria-current="page"] { color: var(--rmk-accent, #00E5FF); font-weight: 700; }
.inst-subnav__form { margin: 0; }

/* RMK-CONNECT-02: the role chip and its bottom sheet (rmklink/_role_chip.html), and the start view. */
.inst-rolechip { position: static; flex-shrink: 0; margin-right: 8px; }
.inst-rolechip__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 4px 0; padding: 0 14px;
  border-radius: var(--rmk-r-chip, 999px); background: var(--rmk-accent, #00E5FF); color: var(--rmk-ink, #0A0A0A);
  font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; list-style: none; }
.inst-rolechip__btn::-webkit-details-marker { display: none; }
.inst-rolechip__btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.inst-rolesheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; max-width: 560px; margin: 0 auto;
  background: var(--rmk-card, #FFFFFF); color: var(--rmk-ink, #0A0A0A); border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .35); padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
.inst-rolesheet__title { margin: 0 0 12px; font-weight: 800; font-size: 18px; }
.inst-rolesheet__list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inst-rolesheet__list form { margin: 0; }
.inst-rolesheet .inst-rolesheet__role { display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 0 14px; border: 1px solid var(--rmk-border, #D0D7DE); border-radius: 12px;
  background: var(--rmk-card, #FFFFFF); color: var(--rmk-ink, #0A0A0A); font: inherit; font-weight: 600; text-align: left;
  text-decoration: none; cursor: pointer; white-space: normal; }
.inst-rolesheet .inst-rolesheet__role.is-active { border: 2px solid var(--rmk-ink, #0A0A0A); }
.inst-rolesheet .inst-rolesheet__role.is-pending { cursor: default; color: var(--rmk-muted, #57606A); }
.inst-rolesheet__tick { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--rmk-muted, #57606A); }
.inst-start { max-width: 640px; padding-top: 24px; padding-bottom: 32px; }
.inst-start__card { margin: 0 0 16px; }
.inst-start__other { color: var(--rmk-muted, #57606A); }