/* tribeCast.org — Your Sovereign Space (RIGHTRAIL-01, parity pass RIGHTRAIL-02)
 *
 * Companion stylesheet to js/right-rail.js. Nothing here paints anything
 * for a logged-out visitor — every selector below only ever matches
 * elements that right-rail.js creates itself after a session exists.
 *
 * Visual language echoes the left rail (#tc-rail): row heights, icon
 * sizing, orange accent — LED-free per charter (no left-rail-style
 * active/section indicator strip on this side).
 *
 * RIGHTRAIL-02: parity values below (trademark color, shortcut chip,
 * accordion grid-rows trick, orange sub-list line) are copied verbatim
 * from #tc-rail's own .tcnav-* rules in index.html, not referenced —
 * this file keeps owning only tcrr-prefixed selectors (see
 * byte-identity.test.mjs) so the module stays decoupled from the left
 * rail's inline styles per this file's own header note above.
 *
 * RIGHTRAIL-03 (Grif spec, 2026-08-04): collapse-icon control (mirrors
 * #tc-rail's .tcnav-toggle-btn, flipped), eyebrow-size/eyebrow-trademark
 * header variants (tribeMarks™ nested under tribeCloud™), and the
 * registration-mark frames on tribeCloud™/Account/Superadmin. Frame
 * colors are derived from Grif's HSB-shift notes off house orange and
 * verified against the served silver-account.png/cyan-superadmin.png
 * icon pixels (assets.tribecast.org/rightrail-icons/v1/) — icon pixels
 * were treated as ground truth over the raw formula per spec.
 */

:root {
  --tcrr-w: 260px;
  --tcrr-frame-orange: #ff7a29;
  --tcrr-frame-grey: #c4beaa;
  --tcrr-frame-cyan: #23b6f3;
  /* NAVRAIL-04 item 5: single padding token for the three corner-bracket
     groups (tribeCloud™/Account/Superadmin) — matches the left rail's own
     icon-to-edge gap (#tc-rail's .tcnav-row padding-left, index.html) so
     both sides read as one system. Used for rail-edge→bracket (container
     padding, .tcrr-scroll/.tcrr-drawer) AND bracket→bracket (.tcrr-section
     bottom margin) — one value, one direction of margin so the two gaps
     can't collapse into an uneven double-margin. */
  --tcrr-edge-pad: 12px;
  /* NAVRAIL-05 item 4: icon-only collapsed width, matching the left
     rail's own --tcnav-w-collapsed (index.html :root). */
  --tcrr-w-collapsed: 64px;
}

/* ── Tooltip (NAVRAIL-05 items 2i/7) — pure CSS, no listener. Shared by
   the rail header's Logout icon, the nav-bar Logout icon, and the nav-bar
   Owlsy support chip (index.html). ─────────────────────────────────── */
[data-tcrr-tooltip] {
  position: relative;
}
[data-tcrr-tooltip]::after {
  content: attr(data-tcrr-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  padding: 4px 8px;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #fff;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 60;
}
[data-tcrr-tooltip]:hover::after,
[data-tcrr-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-tcrr-tooltip]::after {
    transition: none;
  }
}

/* ── Rail header (NAVRAIL-05 item 2) — carat / avatar / email / spacer /
   Logout icon, topmost strip of both shells. ──────────────────────────── */
.tcrr-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--tcrr-edge-pad) 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tcrr-header-carat,
.tcrr-header-logout {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tcrr-header-carat:hover,
.tcrr-header-carat:focus-visible,
.tcrr-header-logout:hover,
.tcrr-header-logout:focus-visible {
  color: #fff;
  border-color: rgba(255, 122, 41, 0.4);
  background: rgba(255, 122, 41, 0.08);
  outline: none;
}
.tcrr-header-carat svg,
.tcrr-header-logout svg {
  width: 15px;
  height: 15px;
}
/* MEGA-TOPNAV-02 round 3, R4: state used to be a CSS rotate(180deg) on a
   single chevron-left glyph. buildRailHeader() now picks the actual
   panel-right-close/panel-right-open glyph at build time instead (full
   re-render on every collapse toggle — see onHeaderCarat in index.html —
   so there's no in-place DOM swap to drive here, unlike #tc-rail's footer
   toggle, which mutates in place and needs its own JS-side icon swap). */
.tcrr-header-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #0a0a0a;
}
.tcrr-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tcrr-header-email {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 13px;
  color: #d4d4d8;
}
.tcrr-header-spacer {
  flex: 1 1 auto;
}

/* ── My Search (NAVRAIL-05 item 1) — mirrors #tc-rail's Quick search box
   (field + icon), inert until a client-reachable "my info + my tribes"
   query surface exists (see buildSearchBox()'s own comment). ─────────── */
.tcrr-search-wrap {
  padding: 10px var(--tcrr-edge-pad) 0;
}
.tcrr-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
}
.tcrr-search svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.tcrr-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #d4d4d8;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 13px;
}
.tcrr-search-input::placeholder {
  color: #71717a;
}
.tcrr-search-input:disabled {
  cursor: not-allowed;
}

/* ── Avatar chip ─────────────────────────────────────────────────────── */

.tcrr-avatar-chip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #0a0a0a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.tcrr-avatar-chip:hover,
.tcrr-avatar-chip:focus-visible {
  border-color: rgba(255, 122, 41, 0.6);
  outline: none;
}
.tcrr-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tcrr-avatar-initials {
  color: #ff7a29;
}

/* ── Nav-bar chrome (RIGHTRAIL-02 spec 0/0b, revised NAVRAIL-04) ───────
   #tc-login-wrap/#tcrr-logout-mount live in index.html's header nav,
   outside #tcrr-avatar-mount/#tcrr-root — styled here since both are this
   lane's own additions, auth-modal-live.js untouched.

   NAVRAIL-04 item 2/3: the old icon+"Login" text pair and the JS-driven
   "Logout" text trigger (.tcrr-nav-logout-btn, filled by right-rail.js's
   buildNavLogoutTrigger) are gone — one icon-only login button now, and
   nothing at all in the nav bar once signed in (the right rail's Account
   menu is the one door for sign-out). */

/* NAVRAIL-04b item 1 (Grif live findings, 2026-08-05): the button itself
   now matches .tcrr-avatar-chip's exact box — same 36px circle, same
   border/background — so the logged-out login slot and the logged-in
   avatar slot render at identical size (spec: "perfect symmetry between
   states"). Previously a plain transparent button around a 20px icon
   (~32px total, visibly smaller side-by-side with the avatar chip — the
   live finding this fixes). Icon is a lucide log-in glyph, not the banked
   orange-login-v2.png raster (see index.html's own comment on this
   button: that asset has "Login" text baked into its pixels, which fights
   this same item's "icon ONLY" requirement — .tcrr-nav-ico below is kept,
   unused by this button now, only because other markup/tests may still
   reference the class name). */
.tcrr-nav-ico {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tcrr-nav-login-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  outline: none;
  background: #0a0a0a;
  padding: 0;
  color: #ff7a29;
  transition: border-color 0.15s ease, transform 0.2s ease;
}
.tcrr-nav-login-btn svg {
  width: 17px;
  height: 17px;
}
.tcrr-nav-login-btn:hover {
  border-color: rgba(255, 122, 41, 0.6);
}
.tcrr-nav-login-btn:active {
  transform: scale(0.94);
}
.tcrr-nav-login-btn:focus-visible {
  outline: 2px solid rgba(255, 122, 41, 0.6);
  outline-offset: 2px;
}

/* NAVRAIL-05 item 5: nav-bar Logout icon, directly right of the avatar —
   same 36px-adjacent icon-button treatment as the rail header's own
   Logout (.tcrr-header-logout) but sized for the nav bar's denser row. */
.tcrr-nav-logout-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tcrr-nav-logout-btn:hover,
.tcrr-nav-logout-btn:focus-visible {
  color: #fff;
  border-color: rgba(255, 122, 41, 0.4);
  background: rgba(255, 122, 41, 0.08);
  outline: none;
}
.tcrr-nav-logout-btn svg {
  width: 17px;
  height: 17px;
}

/* NAVRAIL-05 item 7: Owlsy support chip — owl icon in an orange circle,
   nav bar only, directly left of the avatar/login slot. Lives in
   index.html (a static, always-present button, not session-rendered), so
   the class is defined here per this file's own tcrr-prefixed-selector
   rule rather than as an inline style. */
/* MEGA-TOPNAV-02 round 2, D5: circle chrome removed (was border-radius:
   50% + orange #ff7a29 fill + 7px padding, framing the icon like an
   avatar) - just the Owlsy icon now, same treatment as the other rail
   icons. Behavior/delegation target untouched.
   MEGA-TOPNAV-02 round 3, R1: box 36px->56px, icon 19px->40px - matches
   the tribeSupport morph button's own new size exactly (index.html
   .t-morph-wrap/.t-morph-icon-wrap), keeping the two nav-bar icons in
   this cluster at parity with each other. Still vertically centered with
   avatar/logout/login via the cluster's own flex align-items:center -
   "aligned with avatar/logout" is about alignment, not equal size; those
   stay their existing 36px, only tribeSupport+Owlsy were asked to grow. */
.tcrr-owlsy-support-btn {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.2s ease, background 0.15s ease;
}
.tcrr-owlsy-support-btn:hover,
.tcrr-owlsy-support-btn:focus-visible {
  filter: brightness(1.12);
  background: rgba(255, 122, 41, 0.08);
  outline: none;
}
.tcrr-owlsy-support-btn:active {
  transform: scale(0.94);
}
.tcrr-owlsy-support-btn img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* NAVRAIL-05 item 5/6 (hamburger clearance) — a real narrow-viewport
   screenshot caught this: at 390px, Get tribePassport™ + the Owlsy chip +
   avatar + Logout together overflowed the nav bar and pushed #tc-hamburger
   off past the right edge of the viewport (html,body has overflow-x:hidden
   — it wasn't just visually crowded, it was completely unreachable).
   #tc-login-wrap already solves exactly this for the logged-out login
   button (`hidden sm:flex`, same 640px breakpoint); this mirrors that for
   the two other items that don't need to survive down to mobile width —
   the avatar/login slot and the Logout icon stay visible at every width,
   same as before. */
@media (max-width: 639px) {
  #tcrr-passport-cta,
  .tcrr-owlsy-support-btn {
    display: none !important;
  }
}

/* ── Shared row language (mirrors .tcnav-row: 44px rows, 32px icons) ──── */

.tcrr-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 8px 0 12px;
  border-radius: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  color: #d4d4d8;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tcrr-row:hover,
.tcrr-row:focus-visible {
  background: rgba(255, 122, 41, 0.08);
  color: #fff;
  outline: none;
}
.tcrr-row[aria-disabled="true"] {
  cursor: default;
  opacity: 0.72;
}
.tcrr-row--sub {
  min-height: 38px;
  font-size: 14px;
  padding-left: 0;
}
.tcrr-row-ico {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.tcrr-row-ico svg {
  width: 20px;
  height: 20px;
}
.tcrr-row-ico img {
  /* Grif, 2026-08-04 (live review): match the left rail's own icon size
     exactly (#tc-rail's .tcnav-row-ico fills its full 32px box) rather
     than the paste block's original ~20-24px note — side-by-side on the
     live site, 22px read visibly smaller than the left rail. */
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.tcrr-row-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcrr-stub-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 1px 7px;
}
/* RAIL-2 (Grif dispatch, 2026-08-27): same pill shape as .tcrr-stub-badge
   (this file had no "live but early" badge to reuse — .tcrr-stub-badge's
   own "Soon" is for inert not-yet-wired rows, the opposite signal), house
   orange instead of muted grey — same #ff7a29 value as .tcrr-tribe and
   index.html's own --preview status-canon token, not a new color. */
.tcrr-alpha-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ff7a29;
  border: 1px solid rgba(255, 122, 41, 0.4);
  background: rgba(255, 122, 41, 0.08);
  border-radius: 999px;
  padding: 1px 7px;
}

/* Trademark-name coloring — copied from #tc-rail's .tc-tribe. */
.tcrr-tribe {
  color: #ff7a29;
}

/* Shortcut-key chip — copied from #tc-rail's .tcnav-key-chip. */
.tcrr-key-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #ededed;
  background: #1f1f1f;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  flex: 0 0 auto;
}

/* Section-header carat — copied from #tc-rail's .tcnav-chevron, rotates
   90deg open exactly like the left rail's own accordion parents. */
.tcrr-chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-left: auto;
  color: #a1a1aa;
  opacity: 0.4;
  transition: transform 200ms ease, opacity 200ms ease;
}
.tcrr-row:hover .tcrr-chevron {
  opacity: 1;
}
.tcrr-row[aria-expanded="true"] .tcrr-chevron {
  transform: rotate(90deg);
  opacity: 1;
}
.tcrr-key-chip ~ .tcrr-chevron {
  margin-left: 0;
}

/* Accordion region — copied from #tc-rail's .tcnav-region grid-rows
   trick: pushes following content down as it opens, never an overlay. */
.tcrr-region {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease;
}
.tcrr-region.is-open {
  grid-template-rows: 1fr;
}
.tcrr-region-inner {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .tcrr-region {
    transition: none;
  }
}

.tcrr-section {
  position: relative;
  /* Single bottom-only margin (not margin: X 0) so adjacent sections can't
     collapse two top+bottom margins into a gap wider than --tcrr-edge-pad —
     see the token's definition in :root above. The gap before the FIRST
     section comes from the container's own top padding (.tcrr-scroll /
     .tcrr-drawer), same value, so the whole rhythm reads as one grid. */
  margin: 0 0 var(--tcrr-edge-pad) 0;
}

/* Registration-mark frames (RIGHTRAIL-03 spec 3b/c/d) — tribeCloud™
   (orange), Account (grey), Superadmin (cyan). Corners are ALWAYS
   present (the 8-layer background below draws 4 L-shaped brackets);
   opening the section's own header animates the transparent border to
   the frame color, which — combined with the always-on corners already
   sitting at the frame's exact corners — reads as the corners expanding
   into a complete rectangle enclosing the open header + sub-list. Uses
   :has() instead of a JS-toggled class so no new listener is needed
   (fragment-contract §3: listeners stay inside the fragment they
   belong to; this needs none at all). inset covers the whole
   .tcrr-section box, which grows with it as .tcrr-region's grid-rows
   animates open — no separate resize logic required. */
.tcrr-section[data-tcrr-id="cloud"] {
  --tcrr-frame-color: var(--tcrr-frame-orange);
}
.tcrr-section[data-tcrr-id="account"] {
  --tcrr-frame-color: var(--tcrr-frame-grey);
}
.tcrr-section[data-tcrr-id="superadmin"] {
  --tcrr-frame-color: var(--tcrr-frame-cyan);
}
.tcrr-section[data-tcrr-id="cloud"]::before,
.tcrr-section[data-tcrr-id="account"]::before,
.tcrr-section[data-tcrr-id="superadmin"]::before {
  content: '';
  position: absolute;
  inset: -4px -6px;
  pointer-events: none;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--tcrr-frame-color), var(--tcrr-frame-color)) top left / 9px 1.5px no-repeat,
    linear-gradient(var(--tcrr-frame-color), var(--tcrr-frame-color)) top left / 1.5px 9px no-repeat,
    linear-gradient(var(--tcrr-frame-color), var(--tcrr-frame-color)) top right / 9px 1.5px no-repeat,
    linear-gradient(var(--tcrr-frame-color), var(--tcrr-frame-color)) top right / 1.5px 9px no-repeat,
    linear-gradient(var(--tcrr-frame-color), var(--tcrr-frame-color)) bottom left / 9px 1.5px no-repeat,
    linear-gradient(var(--tcrr-frame-color), var(--tcrr-frame-color)) bottom left / 1.5px 9px no-repeat,
    linear-gradient(var(--tcrr-frame-color), var(--tcrr-frame-color)) bottom right / 9px 1.5px no-repeat,
    linear-gradient(var(--tcrr-frame-color), var(--tcrr-frame-color)) bottom right / 1.5px 9px no-repeat;
  /* Same timing as .tcrr-region's own open transition below, so the
     frame "expands" in step with the submenu it encloses. */
  transition: border-color 250ms ease;
}
.tcrr-section[data-tcrr-id="cloud"]:has(> .tcrr-row[aria-expanded="true"])::before,
.tcrr-section[data-tcrr-id="account"]:has(> .tcrr-row[aria-expanded="true"])::before,
.tcrr-section[data-tcrr-id="superadmin"]:has(> .tcrr-row[aria-expanded="true"])::before {
  border-color: var(--tcrr-frame-color);
}
@media (prefers-reduced-motion: reduce) {
  .tcrr-section[data-tcrr-id="cloud"]::before,
  .tcrr-section[data-tcrr-id="account"]::before,
  .tcrr-section[data-tcrr-id="superadmin"]::before {
    transition: none;
  }
}
/* Eyebrow modifier — Account/Your Tribe/Superadmin headers (not
   trademarked product names) keep the small-caps treatment RIGHTRAIL-01
   shipped; tribeCloud™/tribeMarks™/tribeCommand™ headers use the plain
   .tcrr-row scale instead, matching the left rail's own row weight. */
.tcrr-row--eyebrow {
  min-height: 40px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}
.tcrr-row--eyebrow:hover {
  color: rgba(255, 255, 255, 0.7);
}
/* Icon stays the left rail's full 32px (see .tcrr-row-ico img above,
   Grif 2026-08-04) even on the smaller eyebrow rows — bumped min-height
   above (36px -> 40px) so the icon isn't cramped against the row edge. */

/* RIGHTRAIL-03 hierarchy spec (Grif, 2026-08-04) — two trademarked
   exceptions layered on top of the eyebrow treatment above:

   tribeMarks™ (now nested under tribeCloud™) drops to eyebrow SIZE only
   — min-height + font-size — keeping its current trademark color/font
   (no grey, no uppercase, no letter-spacing). Applied WITHOUT
   .tcrr-row--eyebrow, so none of that class's color/case/spacing rules
   are in play to begin with. */
.tcrr-row--eyebrow-size {
  min-height: 40px;
  font-size: 11px;
}

/* tribeCloud™ becomes an eyebrow-sized parent too, but "in this ONE
   instance the eyebrow keeps tribeCloud's orange icon and its trademark
   color/font in the eyebrow text (do not grey it)" — applied WITH
   .tcrr-row--eyebrow (full uppercase/letter-spacing/size treatment),
   this modifier only overrides the color back to trademark orange for
   the whole label (the leading "tribe" span already carries that color
   via .tcrr-tribe; this covers the "Cloud™" suffix, which would
   otherwise inherit the eyebrow's grey). The icon itself was never
   greyed — no rule anywhere dims .tcrr-row-ico — so no icon override is
   needed to satisfy "do not grey it". Placed after .tcrr-row--eyebrow's
   own rules (including its :hover) so equal-specificity source order
   wins here. */
.tcrr-row--eyebrow-trademark,
.tcrr-row--eyebrow-trademark:hover {
  color: #ff7a29;
}

/* Sub-list — copied from #tc-rail's .tcnav-sub: orange connector line +
   dot indicators, indented right of the line (spec item 2). Nesting
   recurses automatically (tribeCommand™'s own sub-list inside
   Superadmin gets the same math one level deeper). */
.tcrr-sub {
  position: relative;
  list-style: none;
  margin: 2px 0 4px;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  row-gap: 1px;
}
.tcrr-sub::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 1px;
  bottom: 1px;
  width: 1px;
  background: rgba(255, 122, 41, 0.35);
}
.tcrr-sub > li {
  position: relative;
}
.tcrr-dot {
  position: absolute;
  left: 19px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #ff7a29;
  opacity: 0.4;
}
.tcrr-group-link .tcrr-sub {
  margin-top: 2px;
}
.tcrr-group-link > .tcrr-row {
  padding-right: 8px;
}

/* ── Collapse control (footer, both shells) ────────────────────────────
   RIGHTRAIL-03 (Grif spec, 2026-08-04): replaces the old text "Layout: …"
   mode toggle with the left rail's own icon control (#tc-rail's
   .tcnav-toggle-btn — same 34px box, same colors, same hover/focus
   states), reused verbatim and mirrored, since this rail sits on the
   opposite edge and opens/closes in the opposite direction. */

.tcrr-footer {
  padding: 10px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tcrr-footer-logout {
  min-height: 38px;
}
.tcrr-toggle-btn {
  /* Left rail's footer is a single-child flex row, so its button rests
     at that footer's flex-start — the rail's own OUTER edge (screen
     left). This footer is a column with two children (logout row above,
     toggle below); flex-end mirrors the same "outer edge" placement on
     this rail's own outer edge, the screen's right side. */
  align-self: flex-end;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tcrr-toggle-btn:hover,
.tcrr-toggle-btn:focus-visible {
  color: #fff;
  border-color: rgba(255, 122, 41, 0.4);
  background: rgba(255, 122, 41, 0.08);
  outline: none;
}
.tcrr-toggle-btn svg {
  width: 16px;
  height: 16px;
}
/* RAIL-1: layout-panel-left isn't a directional open/close chevron like
   the carat's panel-*-close glyphs (buildRailHeader), so it no longer
   flips/rotates per state — that transform was part of what made this
   control read as "the same button" as the carat. The label/tooltip
   (buildModeToggle) now carries the state distinction instead. */

/* ── Mode B — drawer sliding from the right off the avatar chip ───────── */

.tcrr-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.tcrr-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
  /* RAIL-1: the exposed backdrop area (outside .tcrr-drawer) is a real
     click-to-close target (see the click listener in right-rail.js) —
     cursor says so. .tcrr-drawer overrides this back to default below so
     the panel itself doesn't look clickable-everywhere. */
  cursor: pointer;
}
.tcrr-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--tcrr-w);
  max-width: 88vw;
  background: #050505;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -20px 0 60px -10px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px var(--tcrr-edge-pad) 0;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}
.tcrr-drawer-backdrop.is-open .tcrr-drawer {
  transform: translateX(0);
}
/* RAIL-1: escape hint (mode B only) — the toggle-vs-carat mix-up this
   lane fixes could still land a visitor on a blocking backdrop mid-
   transition (stale storage, or an explicit desktop toggle click); this
   names the two ways out instead of leaving it undiscoverable. */
.tcrr-drawer-hint {
  margin: 0 0 4px;
  padding: 0 2px;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 11px;
  color: #71717a;
  text-align: center;
}

/* ── Mode C — persistent mirror rail, symmetric to #tc-rail ──────────── */

.tcrr-rail {
  display: none;
  flex-direction: column;
  position: fixed;
  right: 0;
  /* NAVRAIL-04b item 2: top offset = the real nav bar height (h-16 =
     64px, same value #tc-rail itself uses) — slides out BELOW the nav
     bar, never over it. Was already 64px; kept explicit here since
     NAVRAIL-05 item 6 (slide-under) depends on this staying correct. */
  top: 64px;
  bottom: 0;
  width: var(--tcrr-w);
  transition: width 0.25s ease;
  overflow: hidden;
  z-index: 40;
  background: #050505;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.tcrr-rail[data-tcrr-mode="C"] {
  display: flex;
}
/* NAVRAIL-05 item 4: icon-only collapsed mode, mirroring #tc-rail's own
   [data-collapsed="true"] treatment (index.html ~L1488-1594) — same
   values, same idea, kept in this file's own tcrr-prefixed scope per its
   header note (byte-identity.test.mjs enforces that boundary). */
@media (prefers-reduced-motion: reduce) {
  .tcrr-rail {
    transition: none;
  }
}
.tcrr-rail[data-tcrr-collapsed="true"] {
  width: var(--tcrr-w-collapsed);
}
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-header {
  justify-content: center;
  flex-wrap: wrap;
  padding: 12px 8px 10px;
}
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-header-email,
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-header-spacer {
  display: none;
}
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-search-wrap {
  padding: 10px 8px 0;
}
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-search {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  margin: 0 auto;
}
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-search-input {
  display: none;
}
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-scroll {
  padding: var(--tcrr-edge-pad) 8px;
}
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-row {
  justify-content: center;
  padding: 0;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-row-label,
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-chevron,
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-key-chip,
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-stub-badge,
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-alpha-badge {
  display: none;
}
/* Accordions can't usefully open in a 64px column — icon-only mode is a
   destination list, not a browsable tree, same tradeoff #tc-rail makes
   (its own [data-collapsed="true"] hides .tcnav-region the same way). */
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-region {
  display: none;
}
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-section[data-tcrr-id]::before {
  display: none;
}
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-footer {
  padding: 10px 8px;
  align-items: center;
}
.tcrr-rail[data-tcrr-collapsed="true"] .tcrr-footer-logout {
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
/* MEGA-TOPNAV-02 round 3, R5: hover-expand ("peek"), mirroring #tc-rail's
   own .tcnav-peek block (index.html ~L1420-1433) rule-for-rule against
   this file's tcrr-prefixed equivalents. Selector specificity ([data-tcrr-
   collapsed="true"] + .tcrr-peek, two components on the root) beats the
   plain [data-tcrr-collapsed="true"] rules above, same trick the left rail
   uses. Driven by mouseenter/mouseleave in index.html (same 150ms intent-
   delay as #tc-rail's own peek) — never writes to the persisted
   tcrr-collapsed state, purely a temporary visual expansion. */
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek {
  width: var(--tcrr-w);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.6);
}
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-header {
  justify-content: flex-start;
  flex-wrap: nowrap;
  padding: 12px var(--tcrr-edge-pad) 10px;
}
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-header-email,
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-header-spacer {
  display: revert;
}
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-search-wrap {
  padding: 10px var(--tcrr-edge-pad) 0;
}
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-search {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  justify-content: flex-start;
  margin: 0;
}
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-search-input {
  display: revert;
}
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-scroll {
  padding: var(--tcrr-edge-pad) var(--tcrr-edge-pad);
}
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-row {
  justify-content: flex-start;
  padding: 0 8px 0 12px;
  width: 100%;
  height: auto;
  min-height: 44px;
  margin: 0;
}
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-row-label,
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-chevron,
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-key-chip,
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-stub-badge,
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-alpha-badge {
  display: revert;
}
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-region {
  display: grid;
}
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-section[data-tcrr-id]::before {
  display: revert;
}
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-footer {
  padding: 10px 8px;
  align-items: stretch;
}
.tcrr-rail[data-tcrr-collapsed="true"].tcrr-peek .tcrr-footer-logout {
  /* Its own base rule (line ~700) only overrides .tcrr-row's min-height
     (44px -> 38px); everything else (width/padding/margin) it inherits
     from .tcrr-row itself, whose own peek rule above already restores
     those. Re-asserting just the min-height here is enough to match the
     true expanded row exactly, rather than restating the whole box. */
  min-height: 38px;
}
.tcrr-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--tcrr-edge-pad) var(--tcrr-edge-pad);
  scrollbar-width: thin;
}

@media (max-width: 767px) {
  /* Mirror rail is a desktop-width feature, same as the left rail
     (#tc-rail is `hidden md:flex`). Known v0 scope gap, flagged in the
     PR/SEEING GUIDE: mode C has no mobile fallback yet — a visitor who
     picks C on desktop and later opens the site on a phone sees no right
     side at all until they switch back to B. RIGHTRAIL-03 addendum
     (2026-08-04): the DEFAULT is now C (mirror rail, non-modal) on
     desktop widths, but right-rail.js's computeDefaultMode() still
     defaults a visitor with no stored preference to B below this same
     768px breakpoint, so mobile always gets a working right side out of
     the box — mode B remains available at every width regardless of
     which mode a wider screen defaulted to. */
  .tcrr-rail {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcrr-drawer,
  .tcrr-drawer-backdrop {
    transition: none !important;
  }
}

/* NAVRAIL-04 item 7: the Owlsy row now carries a real icon (owlsy-icon-v1-512.png,
   set on the agent-owlsy row's icon field in right-rail.js, rendered at the
   standard 32px .tcrr-row-ico size) instead of the orange status dot this block
   used to draw via ::before. The BTT docked-live glow cue that used to ride the
   dot's background-color has no replacement here — Grif's live-eyeball pass
   should confirm the icon alone reads clearly enough for "docked" state, or
   flag if a distinct live indicator is still wanted elsewhere on the row. */

/* ── PANE-SHRINK (Grif ruling, Aug 14): a locked-open mode-C rail
   reserves real layout width — the center pane shrinks instead of
   being occluded, exactly mirroring the LEFT rail's sibling-margin
   pattern (#tc-rail ~ .tcnav-main). #tcrr-root precedes .tcnav-main
   in the DOM, so ~ reaches it; renderPanel() syncs the attribute
   (set per collapsed state in mode C, removed entirely in drawer
   mode and when logged out, since the mount only carries it while
   a mirror rail is rendered). Peek never sets the attribute — peek
   is an overlay, lock is layout. md+ only, matching both the left
   rail's scope and .tcrr-rail's own display gate. */
@media (min-width: 768px){
  #tcrr-root[data-tcrr-collapsed="false"] ~ .tcnav-main{margin-right:var(--tcrr-w);transition:margin-right .25s ease}
  #tcrr-root[data-tcrr-collapsed="true"] ~ .tcnav-main{margin-right:var(--tcrr-w-collapsed);transition:margin-right .25s ease}
}
@media (prefers-reduced-motion: reduce){
  #tcrr-root[data-tcrr-collapsed] ~ .tcnav-main{transition:none}
}