/* ============================================================================
   EAS · roambook — the field-intervention vertical's look.

   Loaded (by public/index.php) only while this module is active, so nothing
   here can reach another EAS flavour's screens.

   Scope on purpose: the shell — sidebar, header, avatar, menus — stays the
   platform's own (the devkit look), and everything here dresses the CONTENT
   area, where this vertical's screens live. The dark navy of the design
   survives where it belongs: on the boarding pass and the dispatch strip,
   which are objects on the page, not chrome around it.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --rb-navy: #101c33;
  --rb-navy-2: #1d3050;
  --rb-line: #e6e9ef;
  --rb-line-soft: #eef1f5;
  --rb-ink: #0f172a;
  --rb-mute: #64748b;
  --rb-faint: #94a3b8;
  --rb-blue: #2563eb;
  --rb-blue-dark: #1d4ed8;
  --rb-blue-soft: #eff4ff;
  --rb-canvas: #f7f8fa;
  --rb-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------ shell ------------------------------
   The sidebar, the header and the rest of the chrome stay exactly as the
   platform draws them (the devkit look) — this module only dresses the
   content area, and adds the one thing the flat nav registry cannot
   express on its own: a second level under Session Manager.        */
.content { padding: 20px 24px 48px; background: var(--rb-canvas); }
/* The menu has five sections; at laptop height that overran the sidebar and
   grew a scrollbar. Tighter rows and section labels bring it back within
   the viewport, and the scrollbar itself is never drawn — the list still
   scrolls on a screen too short for it. */
.nav { padding: 4px 12px; gap: 1px; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-item { padding: 7px 11px; }
.nav-label { padding: 10px 10px 3px; }
.side-foot { padding: 6px 12px 10px; }

/* A sub-entry: the rule marks the nesting, and the highlight sits INSIDE
   it, so a selected sub-entry lights up after the rule rather than across
   the whole row. */
.nav-item:has(.rb-subnav) { padding: 1px 11px; background: transparent; }
.nav-item:has(.rb-subnav):hover { background: transparent; }
.rb-subnav { display: block; padding-left: 12px; border-left: 1px solid #e2e5ea; margin-left: 6px; }
.rb-sub-item { display: block; padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: #5b6072; }
.nav-item:has(.rb-subnav):hover .rb-sub-item { background: #f3f5f8; }
.nav-item.active:has(.rb-subnav) .rb-sub-item { background: #eef3ff; color: #1b4fc4; font-weight: 600; }
/* A parent that has sub-entries open beneath it shares its key with the
   first of them, so the shell would highlight both. One highlight per
   selection: the sub-entry says where you are, the parent stays plain. */
/* (Only the parent: a sub-entry is also followed by a sub-entry, and must keep
   its own inset highlight and hover.) */
.nav-item.active:not(:has(.rb-subnav)):has(+ .nav-item .rb-subnav) { background: transparent; color: #5b6072; font-weight: 500; }
.nav-item.active:not(:has(.rb-subnav)):has(+ .nav-item .rb-subnav):hover { background: #f3f5f8; }

/* ------------------------------ shared bits ------------------------------ */
.rb-mono { font-family: var(--rb-mono); }
.rb-chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; white-space: nowrap; letter-spacing: .2px; background: #f1f5f9; color: #475569; }
.rb-chip.st-scheduled { background: #eff4ff; color: #1d4ed8; }
.rb-chip.st-in-progress { background: #ecfdf5; color: #047857; }
.rb-chip.st-awaiting-crew { background: #fff7ed; color: #b45309; }
.rb-chip.st-blocked { background: #fef2f2; color: #b91c1c; }
.rb-chip.st-completed { background: #f1f5f9; color: #475569; }
.rb-risk { font-size: 10.5px; font-weight: 600; color: var(--rb-mute); white-space: nowrap; }
.rb-risk.rk-high-risk { color: #b91c1c; }
.rb-risk.rk-medium { color: #92400e; }
.rb-av { border-radius: 50%; color: #fff; font-weight: 700; display: flex; align-items: center;
  justify-content: center; flex: 0 0 auto; border: 2px solid #fff; }
.rb-k { font-size: 9.5px; letter-spacing: .7px; color: var(--rb-faint); font-weight: 700; }
.rb-empty { border: 1px dashed var(--rb-line); border-radius: 10px; padding: 22px 16px; font-size: 12.5px;
  color: var(--rb-faint); text-align: center; }
.rb-btn { background: var(--rb-blue); color: #fff; border: none; border-radius: 9px; padding: 9px 15px;
  font-size: 13px; font-weight: 700; cursor: pointer; }
.rb-btn:hover { background: var(--rb-blue-dark); }
.rb-btn[disabled] { background: #f1f5f9; color: var(--rb-faint); cursor: default; }
/* the check-in / check-out button while its request is on its way: keeps its colour, shows the ring turning */
.rb-btn.rb-btn-wait[disabled] { background: var(--rb-blue); color: #fff; opacity: .85; cursor: progress; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.rb-btn.rb-btn-wait svg { width: 15px; height: 15px; flex: 0 0 15px; }
/* the request flow: the pass button waiting (orange) or declined (red), dispatch's green / red decision, the chip and the strips */
/* every state of the pass's main button has one shape: same height, same padding, icon and words centred */
.rb-btn.rb-btn-stage { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 16px; line-height: 1.3; text-align: center; }
.rb-btn.rb-btn-stage svg { flex: 0 0 auto; }
.rb-btn.rb-btn-waiting[disabled] { background: #d97706; color: #fff; opacity: 1; cursor: default; animation: rbBreath 2.4s ease-out infinite; }
@keyframes rbBreath { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,.45); } 60% { box-shadow: 0 0 0 7px rgba(217,119,6,0); } }
@keyframes rbTick { to { transform: rotate(360deg); } }
.rb-clock-hand { transform-origin: 12px 12px; animation: rbTick 4s linear infinite; }
.rb-btn.rb-btn-declined { background: #dc2626; color: #fff; }
.rb-btn.rb-btn-declined:hover { background: #b91c1c; }
.rb-btn.rb-btn-declined[disabled] { background: #fecaca; color: #991b1b; }
.rb-chip.st-request { background: #fff7ed; color: #c2410c; }
.rb-mini { width: 30px; height: 30px; border-radius: 8px; border: none; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 30px; padding: 0; }
.rb-mini.ok { background: #16a34a; } .rb-mini.ok:hover { background: #15803d; }
.rb-mini.no { background: #dc2626; } .rb-mini.no:hover { background: #b91c1c; }
.rb-mini[disabled] { opacity: .7; cursor: progress; }
.rb-mini svg { width: 15px; height: 15px; }
.rb-card-req, .rb-list-req { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff7ed; border-top: 1px solid #fed7aa; font-size: 12px; color: #9a3412; }
.rb-list-req { grid-column: 1 / -1; border-top: 1px dashed #fed7aa; margin-top: -2px; }
/* where the panel decides: the request section above the title */
.rb-decide-btns { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rb-decide-sec .rb-mini { width: 28px; height: 28px; flex-basis: 28px; border-radius: 50%; }
.rb-decide-sec { background: #fff7ed; border-bottom-color: #fed7aa; }
.rb-decide-sec .rb-secbar { margin-bottom: 0; align-items: center; }
.rb-decide-sec-who { font-size: 12.5px; font-weight: 600; color: #7c2d12; margin-top: 3px; line-height: 1.4; overflow-wrap: anywhere; }
.rb-btn-ghost { border: 1px solid #dfe3ea; background: #fff; border-radius: 9px; padding: 8px 13px;
  font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; }
.rb-btn-ghost:hover { border-color: #c3cad6; }
.rb-btn-dark { background: var(--rb-ink); color: #fff; border: none; border-radius: 9px; padding: 9px 14px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rb-btn-dark:hover { background: #1e293b; }
.rb-input { width: 100%; border: 1px solid #dfe3ea; border-radius: 9px; padding: 9px 11px; font-size: 13px;
  color: var(--rb-ink); background: #fbfcfd; outline: none; font-family: inherit; }
.rb-input:focus { border-color: var(--rb-blue); background: #fff; }
.rb-input.rb-t { font-family: var(--rb-mono); }
.rb-box { flex: 0 0 17px; width: 17px; height: 17px; border-radius: 5px; display: flex; align-items: center;
  justify-content: center; font-size: 11px; color: #fff; border: 1.5px solid #cbd5e1; background: #fff; }
.rb-box.on { border-color: var(--rb-blue); background: var(--rb-blue); }

/* ------------------------------ bookings board ------------------------------ */
/* The board is exactly the content area (its padding folded back in), never
   taller: the cards column and the session panel each scroll on their own,
   so the panel stays put while the page has nothing to scroll. */
.content:has(> .rb-board), .content:has(> .rb-eng) { overflow: hidden; }
.rb-board { display: flex; align-items: stretch; margin: -20px -24px -48px; height: calc(100% + 68px); min-height: 0; overflow: hidden; }
.rb-board-main { flex: 1 1 auto; min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.rb-board-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 24px 84px; }
/* The view switcher floats at the bottom centre of the board, over the
   cards, and stays there while they scroll — the extra bottom padding on
   the scroller keeps the last row from hiding behind it. */
.rb-viewbar-wrap { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center;
  pointer-events: none; z-index: 5; }
.rb-viewbar { pointer-events: auto; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: #fff;
  border: 1px solid var(--rb-line); box-shadow: 0 10px 28px rgba(15,23,42,.16), 0 1px 3px rgba(15,23,42,.08); }
.rb-viewbar .rb-segset-b { border-radius: 999px; padding: 8px 16px; font-size: 12.5px; }
.rb-viewbar .rb-segset-b.on { background: var(--rb-ink); color: #fff; box-shadow: none; }

.rb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
/* The week arrows sit close to the week label — one control, not three buttons. */
.rb-weeknav { display: inline-flex; align-items: center; gap: 3px; }
/* the three buttons share one exact height, so the week button is the same size whatever it says — and whatever colour it is */
.rb-weeknav .rb-btn-ghost { padding: 0 11px; height: 32px; display: inline-flex; align-items: center; line-height: 1; box-sizing: border-box; }
.rb-weeknav .rb-week-arrow { padding: 0 10px; font-size: 16px; }
.rb-weeknav .rb-btn-ghost.on { background: var(--rb-ink); border-color: var(--rb-ink); color: #fff; }
.rb-fpill { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 13px;
  font-weight: 600; cursor: pointer; border: 1px solid #e2e8f0; background: #fff; color: #475569; }
.rb-fpill span { font-size: 11.5px; font-weight: 700; color: var(--rb-faint); }
.rb-fpill.on { border-color: var(--rb-ink); background: var(--rb-ink); color: #fff; }
.rb-fpill.on span { color: #93b4fd; }
.rb-note { font-size: 12.5px; color: var(--rb-mute); }
.rb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; }
.rb-card { background: #fff; border: 1px solid var(--rb-line); border-radius: 12px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color 120ms, box-shadow 120ms; }
.rb-card:hover { border-color: #bfd3fb; }
.rb-card.on { border-color: var(--rb-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.rb-card-top { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 12px; }
.rb-card-marks { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.rb-card-t { font-size: 14.5px; font-weight: 700; letter-spacing: -.15px; line-height: 1.3; min-height: 38px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rb-card-ref { font-family: var(--rb-mono); font-size: 11.5px; color: var(--rb-mute); margin-top: 4px; }
.rb-card-grid { border-top: 1px solid var(--rb-line-soft); padding: 12px 16px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 12px 10px; }
/* A long site name is the one card value that regularly outgrows its column.
   One clipped line ("Client site — Belgiuminv…") throws away the half that
   identifies it, so these wrap to TWO lines and only then clip — with the
   full value on the element's title, so nothing is ever unreachable. */
.rb-card-v, .rb-card-s { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rb-card-v { font-size: 12.5px; font-weight: 600; margin-top: 3px; -webkit-line-clamp: 2; }
.rb-card-s { font-size: 12px; color: #475569; -webkit-line-clamp: 2; }
.rb-card-s.rb-nowrap { -webkit-line-clamp: 1; white-space: nowrap; }
.rb-card-foot { border-top: 1px solid var(--rb-line-soft); padding: 11px 16px; display: flex; align-items: center; gap: 10px; }
.rb-crewline { font-size: 12.5px; color: #334155; font-weight: 500; flex: 1 1 auto; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rb-prog { font-size: 11.5px; font-family: var(--rb-mono); color: var(--rb-mute); }

/* --- the same sessions as rows --- */
.rb-list { background: #fff; border: 1px solid var(--rb-line); border-radius: 12px; overflow: hidden; }
.rb-list-head, .rb-list-row { display: grid; align-items: center;
  grid-template-columns: minmax(120px,1.1fr) minmax(180px,2.2fr) minmax(130px,1.5fr) minmax(130px,1.4fr) minmax(96px,.8fr) 58px;
  gap: 14px; padding: 11px 16px; }
.rb-list-head { background: #fbfcfd; border-bottom: 1px solid var(--rb-line-soft); font-size: 9.5px;
  letter-spacing: .7px; color: var(--rb-faint); font-weight: 700; }
.rb-list-row { border-bottom: 1px solid var(--rb-line-soft); font-size: 13px; cursor: pointer; }
.rb-list-row:last-child { border-bottom: none; }
.rb-list-row:hover { background: #f8fafc; }
.rb-list-row.on { background: var(--rb-blue-soft); box-shadow: inset 3px 0 0 var(--rb-blue); }
.rb-list-row > div { min-width: 0; }
.rb-lc-prog { text-align: right; }
@media (max-width: 1180px) {
  .rb-list-head .rb-lc-where, .rb-list-row .rb-lc-where { display: none; }
  .rb-list-head, .rb-list-row { grid-template-columns: minmax(110px,1fr) minmax(160px,2fr) minmax(120px,1.3fr) minmax(90px,.8fr) 54px; }
}

/* ------------------------------ session panel ------------------------------ */
.rb-panel { flex: 0 1 400px; width: 400px; min-width: 328px; background: #fff; border-left: 1px solid var(--rb-line);
  align-self: stretch; overflow-y: auto; }
.rb-panel.rb-panel-in { animation: rbPanelIn 180ms ease-out; }
@keyframes rbPanelIn { from { transform: translateX(24px); opacity: 0 } to { transform: none; opacity: 1 } }
.rb-psec { padding: 18px 22px; border-bottom: 1px solid var(--rb-line-soft); }
.rb-phead { padding: 20px 22px 16px; border-bottom: 1px solid var(--rb-line-soft); }
.rb-ptitle { font-size: 18px; font-weight: 800; letter-spacing: -.35px; line-height: 1.25; }
.rb-x { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; border: 1px solid #e2e8f0; color: var(--rb-mute);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; background: #fff; }
.rb-x:hover { background: #f1f5f9; color: var(--rb-ink); }
.rb-x.off, .rb-x.off:hover { opacity: .35; cursor: not-allowed; background: transparent; color: var(--rb-mute); }
.rb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rb-v { font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.rb-vs { font-size: 13px; color: #475569; }
.rb-secbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.rb-link { font-size: 12px; font-weight: 700; color: var(--rb-blue); cursor: pointer; }
.rb-crew-row { display: flex; align-items: center; gap: 11px; border: 1px solid var(--rb-line-soft);
  border-radius: 10px; padding: 9px 11px; }
.rb-tag { font-size: 11px; font-weight: 700; color: #047857; background: #ecfdf5; padding: 3px 8px; border-radius: 999px; }
/* who checked in and out, on the people's cards: where the person is, the information mark, the detail it unfolds */
.rb-ck-block-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--rb-ink); margin-bottom: 8px; }
.rb-ck-block-h span { font-size: 11.5px; color: var(--rb-mute); font-family: var(--rb-mono); }
.rb-ck-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 8px; }
.rb-ck-dot.on { background: #22c55e; } .rb-ck-dot.off { background: #cbd5e1; } .rb-ck-dot.none { background: transparent; border: 1.5px solid #cbd5e1; }
.rb-ptag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #047857; white-space: nowrap; }
.rb-ptag.mute { color: var(--rb-mute); font-weight: 600; }
.rb-ck-info { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; font-family: Georgia, serif; font-style: italic;
  background: var(--rb-blue-soft); color: var(--rb-blue-dark); cursor: pointer; }
.rb-ck-info.off { background: #f1f5f9; color: var(--rb-mute); }
.rb-ck-info.on, .rb-ck-info:hover { background: var(--rb-blue); color: #fff; }
.rb-crew-row.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* the site contact among the people */
.rb-av-contact { background: #0f766e !important; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.rb-contact-row { cursor: pointer; border-style: dashed; }
.rb-contact-row:hover { border-color: #99f6e4; background: #f0fdfa; }
.rb-contact-row.is-empty { color: var(--rb-mute); }
.rb-contact-row.is-empty .rb-av-contact { background: #cbd5e1 !important; }
.rb-contact-rule { height: 1px; background: var(--rb-line-soft); margin: 2px 0; }
.rb-tag.site { color: #0f766e; background: #f0fdfa; }
.rb-tel { color: var(--rb-blue-dark); text-decoration: none; font-family: var(--rb-mono); }
.rb-tel:hover { text-decoration: underline; }
.rb-contact-form { padding: 12px; border: 1px solid var(--rb-line-soft); border-radius: 10px; background: #fbfcfd; }
/* picking a location for the site contact */
.rb-select { appearance: auto; -webkit-appearance: auto; background: #fff; }
.rb-loc-list { margin-top: 8px; max-height: 236px; overflow: auto; border: 1px solid var(--rb-line-soft); border-radius: 10px; background: #fff; }
.rb-loc-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--rb-line-soft); }
.rb-loc-row:last-child { border-bottom: none; }
.rb-loc-row:hover { background: #f0fdfa; }
.rb-loc-row.own { background: #f7fffd; }
.rb-loc-none { padding: 12px; font-size: 12.5px; color: var(--rb-mute); }
.rb-loc-row .rb-av-contact svg { width: 13px; height: 13px; }
.rb-ck-ack { display: inline-flex; align-items: center; gap: 5px; color: #15803d; font-weight: 600; }
.rb-ck-ack svg { width: 13px; height: 13px; stroke: #16a34a; }
.rb-ck-detail { margin-top: -8px; padding: 12px; border: 1px solid var(--rb-line-soft); border-top: none; border-radius: 0 0 10px 10px; background: #fbfcfd; }
.rb-tag.open { color: #b45309; background: #fff7ed; }
.rb-pick { margin-top: 10px; border: 1px solid #dbe6fb; background: #f5f8ff; border-radius: 10px; padding: 11px; }
.rb-pick-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.rb-pick-row:hover { border-color: var(--rb-blue); }
/* --- picker design 2 · chips: the roster at a glance --- */
.rb-chipbtn { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px;
  border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; cursor: pointer; font-size: 12.5px;
  font-weight: 600; color: #334155; }
.rb-chipbtn:hover { border-color: var(--rb-blue); background: var(--rb-blue-soft); color: var(--rb-blue-dark); }
.rb-chipbtn.clash { border-style: dashed; }
.rb-clash { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%;
  background: #f59e0b; border: 1.5px solid #fff; display: inline-block; }

/* --- picker design 3 · palette: keyboard-first overlay --- */
.rb-kbd { margin-left: auto; font-family: var(--rb-mono); font-size: 10.5px; color: var(--rb-faint);
  border: 1px solid #e2e8f0; border-radius: 4px; padding: 1px 5px; }
.rb-pal-bg { position: fixed; inset: 0; background: rgba(15,23,42,.42); z-index: 70; display: flex;
  align-items: flex-start; justify-content: center; padding: 90px 20px 20px; }
.rb-pal { width: 100%; max-width: 560px; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 28px 64px -24px rgba(15,23,42,.6); }
.rb-pal-head { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--rb-line-soft); }
.rb-pal-input { flex: 1 1 auto; min-width: 0; border: none; outline: none; font-family: inherit; font-size: 15px;
  color: var(--rb-ink); background: transparent; }
.rb-pal-input::placeholder { color: var(--rb-faint); }
.rb-pal-body { max-height: 46vh; overflow-y: auto; padding: 6px; }
.rb-pal-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.rb-pal-row:hover { background: #f8fafc; }
.rb-pal-row.on { background: var(--rb-blue-soft); }
.rb-load { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.rb-load.free { color: #047857; }
.rb-load.busy { color: var(--rb-mute); }
.rb-load.clash { color: #b45309; }
.rb-pal-foot { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: #fbfcfd;
  border-top: 1px solid var(--rb-line-soft); font-size: 11.5px; color: var(--rb-mute); }

.rb-status-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.rb-sopt { padding: 7px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1px solid #e2e8f0; background: #fff; color: #475569; }
.rb-sopt.on { border-color: currentColor; }
.rb-sopt.on.st-scheduled { background: #eff4ff; color: #1d4ed8; }
.rb-sopt.on.st-in-progress { background: #ecfdf5; color: #047857; }
.rb-sopt.on.st-awaiting-crew { background: #fff7ed; color: #b45309; }
.rb-sopt.on.st-blocked { background: #fef2f2; color: #b91c1c; }
.rb-sopt.on.st-completed { background: #f1f5f9; color: #475569; }
.rb-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.rb-step:hover { background: #f8fafc; }
.rb-step-t { font-size: 13.5px; line-height: 1.4; color: #1e293b; }
.rb-step.done .rb-step-t { color: var(--rb-faint); text-decoration: line-through; }
.rb-note-row { border-left: 2px solid #e2e8f0; padding-left: 11px; }
.rb-note-h { font-size: 12px; color: var(--rb-mute); }
.rb-note-h b { color: #334155; }
.rb-note-b { font-size: 13px; line-height: 1.5; margin-top: 3px; }
.rb-hist { display: flex; gap: 11px; }
.rb-hist-rail { flex: 0 0 8px; display: flex; flex-direction: column; align-items: center; padding-top: 5px; }
.rb-hist-dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.rb-hist-line { width: 1px; flex: 1 1 auto; background: var(--rb-line); min-height: 14px; }
.rb-hist-w { font-size: 13px; font-weight: 500; }
.rb-hist-m { font-size: 11.5px; color: var(--rb-faint); margin-top: 2px; }

/* ------------------------------ schedule ------------------------------ */
/* A week of five columns cannot squeeze a card designed for 228px into
   whatever is left after the sidebar and the session panel — at 1440 with the
   panel open that is 132px. So the columns have a FLOOR and the week scrolls
   sideways instead of crushing its contents, and the card reflows below its
   comfortable width (see the container query under the card). */
.rb-week { background: #fff; border: 1px solid var(--rb-line); border-radius: 12px;
  overflow-x: auto; overflow-y: hidden; }
.rb-week-grid { display: grid; grid-template-columns: repeat(5, minmax(196px, 1fr)); }
.rb-day { border-right: 1px solid var(--rb-line-soft); }
.rb-day:last-child { border-right: none; }
.rb-day-head { padding: 13px 14px 11px; border-bottom: 1px solid var(--rb-line-soft); background: #fbfcfd; }
.rb-day.today .rb-day-head { background: #f5f8ff; }
.rb-day-n { font-size: 13.5px; font-weight: 800; letter-spacing: -.2px; }
.rb-day.today .rb-day-n { color: var(--rb-blue-dark); }
.rb-day-d { font-family: var(--rb-mono); font-size: 11.5px; color: var(--rb-faint); }
.rb-day.today .rb-day-d { color: #60a5fa; }
.rb-day-k { font-size: 9px; letter-spacing: .8px; font-weight: 700; margin-top: 5px; color: var(--rb-faint); }
.rb-day.today .rb-day-k { color: var(--rb-blue-dark); }
/* Each day column is a container the card can respond to, so the card stays
   ONE component with one markup and simply lays itself out for the room it
   has. The board's cells are always ≥228px, so nothing there changes. */
.rb-day-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 420px;
  container-type: inline-size; }

@container (max-width: 250px) {
  /* Stacked, not squeezed: the chips drop under the title instead of stealing
     80px from it, and the two meta columns become one. */
  .rb-card-top { flex-direction: column; gap: 8px; padding: 12px 13px 10px; }
  .rb-card-marks { flex-direction: row; align-items: center; gap: 8px; }
  .rb-card-t { min-height: 0; -webkit-line-clamp: 3; }
  .rb-card-grid { grid-template-columns: 1fr; gap: 10px; padding: 10px 13px; }
  .rb-card-foot { padding: 10px 13px; flex-wrap: wrap; gap: 6px 10px; }
  .rb-crewline { flex: 1 1 100%; order: 3; font-size: 12px; }
}
@container (max-width: 190px) {
  /* Narrower still (the panel open on a small screen): the site line and the
     crew names go, because a truncated word helps nobody — the avatars and
     the window still say who and when. */
  .rb-card-s { display: none; }
  .rb-crewline { display: none; }
}
/* the original layout's tinted blocks, coloured by status */

/* ------------------------------ engineer ticket ------------------------------ */
.rb-eng { display: flex; align-items: stretch; margin: -20px -24px -48px; height: calc(100% + 68px); min-height: 0; overflow: hidden; }
.rb-ticket-wrap { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.rb-finder { flex: 0 1 372px; width: 372px; min-width: 268px; border-right: 1px solid var(--rb-line);
  background: #fff; overflow-y: auto; }
.rb-seg { display: flex; gap: 2px; background: var(--rb-line-soft); border-radius: 9px; padding: 2px; }
.rb-seg-b { flex: 1 1 0; text-align: center; padding: 7px 6px; border-radius: 7px; font-size: 11.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; color: var(--rb-mute); }
.rb-seg-b.on { background: #fff; color: var(--rb-ink); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.rb-agenda-h { padding: 14px 16px 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .2px; color: var(--rb-ink);
  background: #fbfcfd; border-top: 1px solid var(--rb-line-soft); border-bottom: 1px solid var(--rb-line-soft); }
.rb-agenda-h span { font-weight: 600; color: var(--rb-faint); margin-left: 8px; }
.rb-agenda-row { display: flex; gap: 11px; padding: 13px 16px; border-bottom: 1px solid #f1f5f9; cursor: pointer; background: #fff; }
.rb-agenda-row.on { background: #f5f8ff; }
.rb-strail { flex: 0 0 3px; width: 3px; border-radius: 2px; background: #dbe6fb; }
.rb-strail.st-blocked { background: #fca5a5; }
.rb-strail.st-in-progress { background: #6ee7b7; }
.rb-mail-row { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; cursor: pointer; background: #fff;
  border-left: 3px solid transparent; }
.rb-mail-row.on { background: #f5f8ff; border-left-color: var(--rb-blue); }
.rb-mail-s { font-size: 13.5px; font-weight: 600; margin-top: 5px; line-height: 1.35; }
.rb-mail-p { font-size: 12.5px; color: var(--rb-mute); margin-top: 3px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rb-ticket-wrap { flex: 1 1 auto; min-width: 300px; padding: 26px 24px 0; display: flex; justify-content: center; align-items: flex-start; }
/* The space under the buttons is the ticket's own padding, not the wrapper's: a scrolling flex column drops its end
   padding once the content overflows. The ticket sizes to its content (align-items: flex-start — stretched to the
   column's height its content would overflow its own box and the padding would sit out of sight), so the 26px under
   the buttons matches the 26px above the pass. */
.rb-ticket { width: 100%; max-width: 640px; padding-bottom: 26px; }
.rb-pass { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0;
  box-shadow: 0 12px 28px -18px rgba(15,23,42,.35); position: relative; }
.rb-pass-head { background: var(--rb-navy); color: #fff; padding: 18px 22px; display: flex; align-items: center; gap: 14px; }
.rb-pass-logo { width: 28px; height: 28px; border-radius: 8px; background: var(--rb-blue); display: flex;
  align-items: center; justify-content: center; flex: 0 0 28px; font-size: 13px; font-weight: 800; }
.rb-pass-big { font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; margin-top: 4px; }
.rb-perf { position: relative; height: 1px; background: repeating-linear-gradient(to right, #cbd5e1 0 6px, transparent 6px 12px); }
.rb-perf i { position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--rb-canvas);
  border: 1px solid #e2e8f0; }
.rb-perf i.l { left: -9px } .rb-perf i.r { right: -9px }
.rb-pass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 16px; padding: 20px 22px; }
/* The top of the pass in its designs on trial (Developer → User experiences → Boarding pass). The secondary lines
   (.rb-pass-s1 / .rb-pass-s2) and the "nobody" word take their colour from the design they sit in. */
.rb-pass-s1 { color: #475569; }
.rb-pass-s2 { color: var(--rb-mute); }
.rb-pass-sub { color: #475569; }
.rb-pass-none { color: var(--rb-faint); }
/* Dark brief: everything on navy */
.rb-pass-dark { background: var(--rb-navy); color: #fff; padding: 18px 22px 20px; }
.rb-pass-dark .rb-k { color: rgba(255,255,255,.55); }
.rb-pass-dark .rb-pass-s1, .rb-pass-dark .rb-pass-sub { color: rgba(255,255,255,.78); }
.rb-pass-dark .rb-pass-s2, .rb-pass-dark .rb-pass-none { color: rgba(255,255,255,.5); }
.rb-pass-dark .rb-ci-leaf { color: rgba(255,255,255,.78); }
.rb-pass-dark .rb-ci-line { border-color: rgba(255,255,255,.35); }
.rb-pass-dark .rb-ci-dot { background: #93c5fd; }
.rb-pass-dark .rb-link { color: #93c5fd; }
.rb-pass-dark .rb-ico { color: rgba(255,255,255,.6); }
.rb-pass-dark .rb-ico:hover { background: rgba(255,255,255,.14); color: #fff; }
.rb-pass-dark .rb-prio { color: #93c5fd; }   /* the priority's level colours, lightened for navy */
.rb-pass-dark .rb-prio.lvl-1 { color: #fca5a5; }
.rb-pass-dark .rb-prio.lvl-2 { color: #fcd34d; }
/* Two columns: the figures left, the facts as a list right */
.rb-pass-cols { display: flex; flex-wrap: wrap; gap: 0 22px; padding: 20px 22px; }
.rb-pass-col-l { flex: 1 1 180px; min-width: 0; padding-right: 22px; border-right: 1px solid var(--rb-line-soft); }
.rb-pass-col-r { flex: 1 1 220px; min-width: 0; }
.rb-pass-lrow { padding: 9px 0; border-bottom: 1px solid var(--rb-line-soft); }
.rb-pass-lrow:first-child { padding-top: 0; }
.rb-pass-lrow:last-child { border-bottom: none; padding-bottom: 0; }
@media (max-width: 560px) { .rb-pass-col-l { border-right: none; padding-right: 0; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--rb-line-soft); } }
/* Ticket stubs: four stubs torn along dashed lines */
.rb-pass-stubs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 6px 0 0; }
.rb-pass-stub { padding: 18px 18px 20px; border-left: 1px dashed #cbd5e1; min-width: 0; }
.rb-pass-stub:first-child { border-left: none; }
/* Plain list: one labelled row per fact */
.rb-pass-list { padding: 18px 22px 16px; }
.rb-pass-row { display: flex; gap: 14px; padding: 11px 0; border-top: 1px solid var(--rb-line-soft); }
.rb-pass-row-k { flex: 0 0 118px; padding-top: 3px; }
.rb-pass-row-v { flex: 1 1 auto; min-width: 0; }
.rb-pass-row-v .rb-tdesc { max-height: 10em; }
@media (max-width: 480px) { .rb-pass-row { flex-direction: column; gap: 4px; } .rb-pass-row-k { flex-basis: auto; } }
/* Time first: the window as the hero on a soft blue block */
.rb-pass-hero { background: var(--rb-blue-soft); padding: 20px 22px 18px; }
.rb-pass-huge { font-size: 42px; font-weight: 800; letter-spacing: -1.4px; line-height: 1; margin-top: 4px; color: var(--rb-ink); }
.rb-steps-sec { border-top: 1px solid var(--rb-line-soft); padding: 18px 22px; background: #fbfcfd; }
.rb-steps-sec.off { opacity: .45; pointer-events: none; }
.rb-tstep { display: flex; gap: 13px; cursor: pointer; }
.rb-mark { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: 0 0 22px; border: 1.5px solid #cbd5e1; background: #fff; color: var(--rb-mute); }
.rb-mark.on { border-color: var(--rb-blue); background: var(--rb-blue); color: #fff; }
.rb-mark-line { width: 1.5px; flex: 1 1 auto; min-height: 10px; background: var(--rb-line); }
.rb-mark-line.on { background: #bfd3fb; }
.rb-tstep-t { font-size: 13.5px; font-weight: 700; color: var(--rb-ink); }
.rb-tstep.done .rb-tstep-t { color: var(--rb-faint); text-decoration: line-through; }
.rb-tstep-d { font-size: 12.5px; color: var(--rb-mute); margin-top: 2px; line-height: 1.45; }
.rb-contact { border-top: 1px dashed #cbd5e1; padding: 18px 22px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 18px; background: #fff; }
.rb-pass-instr { border-top: 1px dashed #cbd5e1; padding: 14px 22px 16px; background: #fff; }
/* The QR code: a real one (roambook.qr.js), ~3.5px a module at version 4 with a quiet zone of four modules around it */
.rb-qr-box { padding: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
.rb-qr { display: grid; width: 112px; height: 112px; }
.rb-qr i { display: block; background: transparent; }
.rb-qr i.d { background: #0f172a; }
.rb-qr.rb-qr-none { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--rb-faint); text-align: center; }
.rb-stub { border-top: 1px dashed #cbd5e1; background: #fbfcfd; padding: 16px 22px 20px; }
.rb-stub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
/* the stub while its request waits for dispatch: what was filed, read-only */
.rb-stub.locked { opacity: .62; pointer-events: none; user-select: none; }
/* the stub's read-only arrival time (the Brussels clock), its session-type switch, its configuration-item picker and its note */
.rb-stub-ro { display: flex; align-items: center; gap: 8px; background: #f1f5f9; color: var(--rb-ink); cursor: default; }
.rb-stub-ro-tz { margin-left: auto; font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: var(--rb-faint); text-transform: uppercase; }
.rb-stub-seg { display: flex; gap: 2px; background: var(--rb-line-soft); border-radius: 9px; padding: 2px; }
.rb-stub-seg-b { flex: 1 1 0; text-align: center; padding: 8px 10px; border-radius: 7px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--rb-mute); min-height: 38px; display: flex; align-items: center; justify-content: center; }
.rb-stub-seg-b.on { background: #fff; color: var(--rb-blue-dark); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.rb-stub-cis { display: flex; flex-direction: column; gap: 6px; }
.rb-stub-ci { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #dfe3ea; border-radius: 9px; background: #fff; cursor: pointer; min-height: 44px; }   /* a thumb-sized row */
.rb-stub-ci.on { border-color: var(--rb-blue); background: var(--rb-blue-soft); }
.rb-stub-ci.all { border-style: dashed; }
.rb-stub-ci.all.on { border-style: solid; }
.rb-stub-ci .rb-box { width: 18px; height: 18px; flex: 0 0 18px; }
.rb-stub-ci-t { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.rb-stub-ci-n { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: var(--rb-faint); text-transform: uppercase; }
.rb-stub-note { resize: vertical; min-height: 64px; line-height: 1.45; font-family: inherit; }
.rb-pillopt { border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid #e2e8f0; background: #fff; color: #475569; }
.rb-pillopt.on { border-color: var(--rb-blue); background: var(--rb-blue-soft); color: var(--rb-blue-dark); font-weight: 700; }
.rb-share { margin-top: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 10px 26px -18px rgba(15,23,42,.4); }
.rb-share-link { flex: 1 1 220px; min-width: 0; border: 1px solid #dfe3ea; background: #fbfcfd; border-radius: 9px;
  padding: 9px 11px; font-family: var(--rb-mono); font-size: 12.5px; line-height: 1.35; color: #334155; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }   /* the same box as .rb-input, so it lines up with the search field below */
.rb-share-link.empty { font-family: inherit; font-size: 13px; color: var(--rb-faint); }   /* no link yet: reads as a placeholder, like the search field's */

/* ------------------------------ settings ------------------------------ */
.rb-set { max-width: 780px; }
.rb-set.rb-center { max-width: none; }
.rb-set-card { background: #fff; border: 1px solid var(--rb-line); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.rb-set-head { padding: 15px 20px 13px; border-bottom: 1px solid var(--rb-line-soft); background: #fbfcfd; }
.rb-set-t { font-size: 15px; font-weight: 800; letter-spacing: -.25px; margin-top: 5px; }
.rb-set-s { font-size: 12.5px; color: var(--rb-mute); margin-top: 3px; line-height: 1.5; }
/* A folding card head (Checklists): click anywhere on it to open or close the white area underneath. */
.rb-set-head.rb-fold { display: flex; align-items: center; gap: 16px; cursor: pointer; user-select: none; }
.rb-set-head.rb-fold:hover { background: #f5f7fa; }
.rb-set-head.rb-fold:not(.open) { border-bottom: none; }
.rb-fold-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.rb-fold-count { font-size: 11.5px; font-weight: 600; color: var(--rb-mute); background: #eef0f3; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.rb-fold-chev { display: flex; color: var(--rb-mute); transition: transform 140ms; }
.rb-set-head.rb-fold.open .rb-fold-chev { transform: rotate(180deg); }
/* Locations: Directions as a small button in the table's action column (the other actions stay text links). */
.rb-dir-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 11.5px; text-decoration: none; vertical-align: middle; margin-right: 10px; }
.rb-dir-btn svg { color: var(--rb-blue); }
/* Locations: the instructions file as a link in tables and as a small button on the pass and panel. */
.rb-file-link { display: inline-flex; align-items: center; gap: 5px; color: var(--rb-blue); font-weight: 600; text-decoration: none; }
.rb-file-link:hover { text-decoration: underline; }
.rb-file-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 11px; font-size: 12px; text-decoration: none; }
/* Product roadmap (Design 9): a table sectioned by release month, every field edited in place. */
.rb-rm td { padding: 8px 16px; }
.rb-rm tr.id-section td { padding: 10px 16px 5px; }
.rb-rm-sel { display: inline-flex; align-items: center; border-radius: 5px; padding: 0 6px 0 0; font-size: 10.5px; font-weight: 600; position: relative; }
.rb-rm-sel select { appearance: none; -webkit-appearance: none; border: none; background: transparent; color: inherit; font: inherit; font-size: 10.5px; font-weight: 600;
  padding: 3px 14px 3px 8px; cursor: pointer; outline: none; }
.rb-rm-sel::after { content: '▾'; position: absolute; right: 6px; font-size: 9px; opacity: .7; pointer-events: none; }
.rb-rm-tag .rb-rm-sel select { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }
.rb-rm-tag.unset .rb-rm-sel { border: 1px dashed var(--rb-line); }
.rb-rm-date { position: relative; display: inline-flex; align-items: center; font-family: var(--rb-mono); font-size: 11.5px; color: var(--rb-mute); padding: 3px 6px; border-radius: 5px; cursor: pointer; }
.rb-rm-date.none { color: var(--rb-faint); }
.rb-rm-date:hover { background: var(--rb-line-soft); }
.rb-rm-date input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* Roadmap item: the summary is a text area at all times — borderless until hovered or focused, wrapping and taking the height of its text. */
.rb-rm-live { width: calc(100% + 16px); box-sizing: border-box; display: block; border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; margin: -5px -8px;
  font: inherit; font-size: 13px; line-height: 1.45; color: #3a3f4c; background: transparent; outline: none; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.rb-rm-live:hover { border-color: var(--rb-line); }
.rb-rm-live:focus { border-color: var(--rb-blue); background: #fff; text-decoration: none; }
.rb-rm tr.id-off .rb-rm-live { color: #9aa1ad; text-decoration: line-through; }
/* My schedule — taking a session yourself: the palette's rows, and the three openers on trial (Developer → User experiences → Taking a session). */
.rb-self-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; cursor: pointer; background: #fff; }
.rb-self-row:hover, .rb-self-row.on { background: #f5f8ff; }
.rb-self-take { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--rb-blue); background: #fff; border: 1px solid #c7d7fb; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.rb-self-row.on .rb-self-take, .rb-self-row:hover .rb-self-take { background: var(--rb-blue); border-color: var(--rb-blue); color: #fff; }
.rb-self-none { padding: 18px 16px; font-size: 12.5px; color: var(--rb-mute); text-align: center; line-height: 1.5; }
/* the wait while the external ticket system is asked: a small ring turning above the line (the platform's .spin animation) */
.rb-ext-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rb-ext-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #dbe6fb; border-top-color: var(--rb-blue); display: block; margin-bottom: 2px; }
.rb-ext-ref { font-size: 13px; font-weight: 700; color: var(--rb-ink); letter-spacing: .03em; }
/* Session panel · CONFIGURATION ITEM: the main CI as the root of a small tree, the affected CIs on branches under it. */
.rb-ci-tree { display: flex; flex-direction: column; gap: 4px; }
.rb-ci-root { display: flex; align-items: center; gap: 8px; }
.rb-ci-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rb-blue); flex: 0 0 8px; }
.rb-ci-leaf { display: flex; align-items: center; gap: 8px; padding-left: 3px; font-size: 12.5px; color: #334155; }
.rb-ci-line { width: 14px; height: 10px; border-left: 1.5px solid #cbd5e1; border-bottom: 1.5px solid #cbd5e1; border-bottom-left-radius: 4px; margin-top: -8px; flex: 0 0 14px; }
/* Session panel · the configuration items pop-up */
.rb-ci-pal-main { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 2px 2px 6px; border-radius: 10px; background: var(--rb-blue-soft); }
.rb-ci-pal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 8px; font-size: 12.5px; color: #334155; }   /* the same face as a branch of the panel's tree */
.rb-ci-pal-row:hover { background: #f8fafc; }
/* Session panel · a reference with its icons beside it: copy, and open in the ticket system */
.rb-ref-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rb-ref-line > span:first-child { overflow-wrap: anywhere; }
.rb-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: var(--rb-faint); cursor: pointer; flex: 0 0 22px; }
.rb-ico:hover { background: #f1f5f9; color: var(--rb-blue); }
/* Session panel · OPEN THE TICKET — five designs on trial */
.rb-open-hdr { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.rb-open-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.rb-open-bar { padding: 10px 22px; border-bottom: 1px solid var(--rb-line-soft); background: #fbfcfd; }
.rb-open-bar .rb-btn { display: inline-flex; align-items: center; gap: 7px; }
.rb-open-float { position: sticky; bottom: 18px; margin: -46px 18px 18px auto; width: 44px; height: 44px; border-radius: 50%; background: var(--rb-blue); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px rgba(37,99,235,.35); z-index: 3; }
.rb-open-float:hover { background: var(--rb-blue-dark); }
.rb-ptitle-link { cursor: pointer; }
.rb-ptitle-link:hover { color: var(--rb-blue); }
.rb-ltag .rb-ico { width: 18px; height: 18px; flex-basis: 18px; margin: -2px -4px -2px 0; color: inherit; opacity: .7; }
.rb-ltag .rb-ico:hover { background: rgba(255,255,255,.18); opacity: 1; }
/* Labelled tags — a small caption on the tag itself: the ticket's receiving team, priority, urgency, impact under the panel's title. */
.rb-ltags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rb-ltag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 7px; background: #f1f5f9; color: #334155; }
.rb-ltag.dark { background: var(--rb-ink); color: #fff; }
.rb-ltag i { font-style: normal; font-size: 9px; letter-spacing: .08em; opacity: .7; }
/* Session panel · the ticket's priority text in the risk level's place — plain text like the risk, coloured by its level */
.rb-prio.lvl-1 { color: #b91c1c; }
.rb-prio.lvl-2 { color: #b45309; }
.rb-prio.lvl-3, .rb-prio.lvl-4, .rb-prio.lvl-5, .rb-prio.lvl-6, .rb-prio.lvl-7, .rb-prio.lvl-8, .rb-prio.lvl-9 { color: #1d4ed8; }
/* Session panel · RECEIVING ORGANISATION — five places on trial */
.rb-org-corner { padding-top: 4px; flex: 0 0 auto; }
.rb-org-band { display: flex; align-items: center; gap: 10px; padding: 10px 22px; border-bottom: 1px solid var(--rb-line-soft); background: #fbfcfd; font-size: 13px; color: var(--rb-ink); }
/* Session panel · REFERENCES — three designs on trial */
.rb-ref-bar { display: flex; align-items: center; gap: 10px; padding: 10px 22px; border-bottom: 1px solid var(--rb-line-soft); background: #fbfcfd; font-family: var(--rb-mono); font-size: 12.5px; font-weight: 500; }
.rb-ref-arrow { color: var(--rb-blue); font-weight: 700; padding: 0 4px; }
/* Session panel · the ticket's description, as the ticket system holds it */
.rb-tdesc { font-size: 12.5px; color: #334155; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14em; overflow-y: auto; padding: 10px 12px; background: #f8fafc; border-radius: 8px; }
/* Data → Sessions → Test a ticket: the ticket read through one connection, in a wide palette */
.rb-pal.rb-pal-wide { max-width: 860px; }
.rb-pal.rb-pal-wide .rb-pal-body { max-height: 76vh; }
.rb-tst { padding: 4px 6px 8px; }
.rb-tst-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 10px 10px 14px; border-bottom: 1px solid var(--rb-line-soft); }
.rb-tst-ref { font-size: 11.5px; color: var(--rb-faint); letter-spacing: .04em; }
.rb-tst-title { font-size: 16px; font-weight: 700; line-height: 1.3; margin-top: 3px; }
.rb-tst-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding-top: 4px; }
.rb-tst-state { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #475569; white-space: nowrap; }
.rb-tst-sec { padding: 14px 10px 4px; }
.rb-tst-sec + .rb-tst-sec { border-top: 1px solid var(--rb-line-soft); margin-top: 10px; }
.rb-tst-desc { font-size: 12.5px; color: #334155; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16em; overflow-y: auto; padding: 10px 12px; background: #f8fafc; border-radius: 8px; }
.rb-tst-note { font-size: 12px; color: var(--rb-mute); line-height: 1.5; margin-top: 8px; }
.rb-tst-notes { display: flex; flex-direction: column; gap: 8px; }
.rb-tst-n { padding: 8px 12px; border-radius: 8px; background: #f8fafc; }
.rb-tst-n-h { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 700; color: var(--rb-ink); }
.rb-tst-n-h span { font-weight: 500; color: var(--rb-faint); white-space: nowrap; }
.rb-tst-n-t { font-size: 12px; color: #334155; line-height: 1.45; margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 1 · Slot · pinned: a dashed free slot of the agenda, in its own band pinned to the bottom of the scrolling column. */
.rb-self-slot { margin: 12px 14px 4px; padding: 12px; border: 1px dashed #c7d7fb; border-radius: 10px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--rb-blue); cursor: pointer; }
.rb-self-slot:hover { background: #f5f8ff; border-color: var(--rb-blue); }
.rb-self-band { padding: 14px; }
.rb-self-band .rb-self-slot { margin: 0; }
.rb-self-band.over { border-top: 1px solid var(--rb-line-soft); }
.rb-self-band.pin { position: sticky; bottom: 0; background: #fff; z-index: 2; }
/* 2–3 · the + Assign link with room around it and a target big enough to hit. */
.rb-self-linkband { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rb-line-soft); }
.rb-self-linkbtn { font-size: 13px; font-weight: 700; color: var(--rb-blue); padding: 8px 12px; margin: -8px -12px; border-radius: 8px; cursor: pointer; }
.rb-self-linkbtn:hover { background: #f5f8ff; }
.rb-set-row { display: flex; align-items: flex-start; gap: 18px; padding: 14px 20px; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.rb-set-row:last-child { border-bottom: none; }
.rb-set-k { font-size: 13.5px; font-weight: 600; }
.rb-set-d { font-size: 12.5px; color: var(--rb-mute); margin-top: 3px; line-height: 1.45; }
.rb-toggle { width: 42px; height: 24px; border-radius: 999px; cursor: pointer; flex: 0 0 42px; background: #dfe3ea;
  padding: 3px; display: flex; justify-content: flex-start; transition: background 140ms; }
.rb-toggle.on { background: var(--rb-blue); justify-content: flex-end; }
.rb-toggle i { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.3); display: block; }
.rb-segset { display: flex; gap: 2px; background: var(--rb-line-soft); border-radius: 9px; padding: 2px; }
.rb-segset-b { padding: 6px 11px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap; color: var(--rb-mute); }
.rb-segset-b.on { background: #fff; color: var(--rb-ink); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.rb-picks { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rb-picks .rb-pillopt { font-family: var(--rb-mono); }
.rb-cron { font-family: var(--rb-mono); font-size: 12px; line-height: 1.6; color: #334155; background: #f8fafc;
  border: 1px solid var(--rb-line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre;
  user-select: all; }

/* ------------------------------ announcements ------------------------------ */
/* The banner sits ABOVE the shell, so the shell gives up exactly its height. */
#app.rb-with-banner { display: flex; flex-direction: column; height: 100vh; }
#app.rb-with-banner .shell { flex: 1 1 auto; min-height: 0; height: auto; }
.rb-banner { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; padding: 11px 20px;
  font-size: 13.5px; font-weight: 500; line-height: 1.45; color: #fff; }
.rb-banner-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.75); flex: 0 0 7px; }
.rb-banner-t { flex: 1 1 auto; min-width: 0; }
.rb-banner-x { flex: 0 0 auto; cursor: pointer; opacity: .75; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.rb-banner-x:hover { opacity: 1; background: rgba(255,255,255,.16); }
.rb-banner.preview { border-radius: 8px; }
.rb-banner.c-blue { background: #2563eb; }
.rb-banner.c-green { background: #0f766e; }
.rb-banner.c-amber { background: #b45309; }
.rb-banner.c-red { background: #b91c1c; }
.rb-banner.c-slate { background: #101c33; }

.rb-pop-bg { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 80; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.rb-pop { position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px -26px rgba(15,23,42,.65); }
.rb-pop-preview .rb-pop { max-width: 340px; border: 1px solid var(--rb-line); box-shadow: 0 10px 26px -18px rgba(15,23,42,.4); }
.rb-pop-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(15,23,42,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; }
.rb-pop-x:hover { background: rgba(15,23,42,.8); }
.rb-pop-img { background: #f1f5f9; aspect-ratio: 2 / 1; }
.rb-pop-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rb-pop-body { padding: 22px 26px 24px; }
.rb-pop-k { font-size: 10.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--rb-blue); margin-bottom: 8px; }
.rb-pop-t { font-size: 21px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; color: var(--rb-ink); overflow-wrap: anywhere; }
.rb-pop-p { font-size: 14.5px; color: #475569; line-height: 1.65; margin-top: 10px; overflow-wrap: anywhere; }
.rb-pop-btn { display: block; width: 100%; margin-top: 20px; padding: 12px 16px; border: none; border-radius: 11px;
  background: var(--rb-ink); color: #fff; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: -.1px; cursor: pointer;
  transition: background 120ms, transform 120ms; }
.rb-pop-btn:hover { background: #1e293b; }
.rb-pop-btn:active { transform: translateY(1px); }
.rb-pop-btn[disabled] { cursor: default; opacity: .6; }
.rb-pop-preview .rb-pop-body { padding: 18px 20px 20px; }
.rb-pop-preview .rb-pop-t { font-size: 18px; }
.rb-pop-preview .rb-pop-p { font-size: 13.5px; }

.rb-swatch { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px;
  border: 1px solid #e2e8f0; background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #475569; }
.rb-swatch i { width: 16px; height: 16px; border-radius: 50%; display: block; }
.rb-swatch.on { border-color: var(--rb-ink); color: var(--rb-ink); font-weight: 700; }
.rb-swatch.c-blue i { background: #2563eb } .rb-swatch.c-green i { background: #0f766e }
.rb-swatch.c-amber i { background: #b45309 } .rb-swatch.c-red i { background: #b91c1c }
.rb-swatch.c-slate i { background: #101c33 }
.rb-swatch.c-white i { background: #fff; box-shadow: inset 0 0 0 1px #cbd5e1; }
.rb-swatch.c-none i  { background: repeating-conic-gradient(#e2e8f0 0 25%, #fff 0 50%) 0 0 / 8px 8px; box-shadow: inset 0 0 0 1px #cbd5e1; }

/* ------------------------------ workspace mark ------------------------------ */
.rb-logo.c-blue { background: #2563eb } .rb-logo.c-green { background: #0f766e }
.rb-logo.c-amber { background: #b45309 } .rb-logo.c-red { background: #b91c1c }
.rb-logo.c-slate { background: #101c33 }
.rb-logo.c-white { background: #fff; box-shadow: inset 0 0 0 1px #e7e9ee; color: var(--rb-ink); }
.rb-logo.c-none  { background: transparent; box-shadow: none; color: var(--rb-ink); }
.rb-logo.c-white .rb-logo-mark, .rb-logo.c-none .rb-logo-mark { color: var(--rb-ink); }
/* The platform glyph hard-codes white strokes; on a light tile it is drawn in ink. */
.rb-logo.c-white svg, .rb-logo.c-none svg { stroke: var(--rb-ink); }
.rb-logo.c-white svg [fill="#fff"], .rb-logo.c-none svg [fill="#fff"] { fill: var(--rb-ink); }
.rb-logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.rb-logo-mark { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.rb-logo-preview { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center;
  justify-content: center; flex: 0 0 34px; overflow: hidden; }

/* ------------------------------ checklist editor ------------------------------ */
/* Deployment facts, laid out the way the platform lays them out: a fixed
   label column, plain value lines, no chips borrowed from another vocabulary. */
.rb-fact { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start;
  padding: 12px 20px; border-bottom: 1px solid #f1f5f9; }
.rb-fact:last-child { border-bottom: none; }
.rb-fact-k { font-size: 13px; color: var(--rb-mute); }
.rb-fact-v { font-size: 13px; color: #5b6072; line-height: 1.8; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 820px) { .rb-fact { grid-template-columns: 1fr; gap: 4px; } }

.rb-step-num { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #eef1f5; color: #475569;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 9px; }
.rb-move { width: 24px; height: 24px; border-radius: 7px; border: 1px solid #e2e8f0; color: #475569; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 12px; background: #fff; }
.rb-move:hover { border-color: var(--rb-blue); color: var(--rb-blue); }
.rb-move.off { opacity: .3; cursor: default; }
.rb-move.off:hover { border-color: #e2e8f0; color: #475569; }

/* ------------------------------ modal ------------------------------ */
.rb-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rb-flabel { font-size: 11.5px; color: #334155; font-weight: 700; margin-bottom: 7px; }
.rb-warn { background: #fff7ed; border: 1px solid #fed7aa; color: #b45309; border-radius: 10px; padding: 11px 13px;
  font-size: 13px; line-height: 1.45; }

/* ------------------------------ not in the agreement ------------------------------ */
/* Visible, but plainly not yours: dimmed row, a lock, and no pretence that
   clicking it opens a report. */
.nav-item:has(.rb-locked) { color: #9aa1ad; }
.nav-item:has(.rb-locked):hover { background: #f7f8fa; }
.nav-item.active:has(.rb-locked) { background: #f1f2f4; color: #5b6072; }
.nav-item:has(.rb-locked) svg { opacity: .55; }
.rb-lock-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .2px; color: #9aa1ad; background: #f1f2f4; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }

.rb-locked-wrap { display: flex; justify-content: center; padding: 24px 0 40px; }
.rb-locked-card { width: 100%; max-width: 620px; background: #fff; border: 1px solid var(--rb-line);
  border-radius: 14px; padding: 30px 32px 28px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.rb-locked-ic { width: 44px; height: 44px; border-radius: 12px; background: #f1f5f9; display: flex;
  align-items: center; justify-content: center; margin-bottom: 18px; }
.rb-locked-t { font-size: 19px; font-weight: 800; letter-spacing: -.35px; line-height: 1.25; }
.rb-locked-s { font-size: 13.5px; color: var(--rb-mute); line-height: 1.65; margin-top: 9px; }
.rb-locked-list { margin-top: 22px; border-top: 1px solid var(--rb-line-soft); }
.rb-locked-row { padding: 13px 0; border-bottom: 1px solid var(--rb-line-soft); }
.rb-locked-row-t { font-size: 13.5px; font-weight: 700; }
.rb-locked-row-d { font-size: 12.5px; color: var(--rb-mute); line-height: 1.5; margin-top: 3px; }
.rb-locked-contact { margin-top: 22px; background: #fbfcfd; border: 1px solid var(--rb-line-soft);
  border-radius: 12px; padding: 16px 18px; }
.rb-locked-am { font-size: 14.5px; font-weight: 700; margin-top: 6px; }

/* ------------------------------ collapsed sidebar ------------------------------ */
/* Icons only. The shell's own widths are overridden here rather than in EOS,
   and everything that carries words simply stops being rendered. */
/* Visible enough to be found: a real bordered control, not a bare glyph. */
.rb-rail-btn { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: #5b6072; font-size: 13px; flex: 0 0 auto;
  border: 1px solid #e7e9ee; background: #fff; line-height: 1; user-select: none; }
.rb-rail-btn:hover { background: #f1f2f4; border-color: #d6dae2; color: #1b4fc4; }
.rb-rail-btn:focus-visible { outline: 2px solid var(--rb-blue); outline-offset: 2px; }

#app.rb-rail .sidebar { width: 64px; }
#app.rb-rail .side-head { flex-direction: column; gap: 8px; padding: 14px 8px 12px; }
#app.rb-rail .side-head > div:not(.side-logo):not(.rb-rail-btn) { display: none; }
#app.rb-rail .rb-rail-btn { margin-left: 0; }
/* A 64px rail cannot print a section name — "Field engineering" would come
   out as "Field en…", which says less than nothing. The groups become a rule
   instead, so the sections stay separated and the words are free to be as
   long as they need to be when the menu is open. */
#app.rb-rail .nav-label { font-size: 0; padding: 0; margin: 9px 10px; height: 1px; background: #edeff3; }
#app.rb-rail .nav-item { justify-content: center; padding: 10px 0; gap: 0; }
#app.rb-rail .nav-item .grow,
#app.rb-rail .nav-item .nav-count,
#app.rb-rail .nav-item .rb-lock-badge { display: none; }
/* A sub-entry has no icon of its own, so in the rail it becomes a dot on the
   rule rather than an empty row. */
#app.rb-rail .nav-item:has(.rb-subnav) { display: none; }
#app.rb-rail .side-foot { padding: 8px 6px 12px; }

/* ------------------------------ activation designs ------------------------------ */
.rb-act-shot { position: relative; border: 1px solid var(--rb-line); border-radius: 12px; overflow: hidden;
  background: #fbfcfd; padding: 16px; }
.rb-act-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rb-act-tile { background: #fff; border: 1px solid var(--rb-line-soft); border-radius: 9px; padding: 11px 12px; }
.rb-act-tile-k { font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: #b6bdc9; font-weight: 700; }
.rb-act-bar-fake { height: 12px; width: 62%; border-radius: 4px; background: #e6e9ef; margin-top: 9px; }
.rb-act-chart { display: flex; align-items: flex-end; gap: 10px; height: 120px; margin-top: 14px;
  padding: 0 2px; border-bottom: 1px solid var(--rb-line-soft); }
.rb-act-bar { flex: 1 1 auto; border-radius: 5px 5px 0 0; background: linear-gradient(#dbe4f5, #e9edf4); }
.rb-act-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(247,248,250,.55); backdrop-filter: blur(2px); }
.rb-act-veil-ic { width: 44px; height: 44px; border-radius: 50%; background: rgba(15,23,42,.7);
  display: flex; align-items: center; justify-content: center; }
.rb-act-caption { font-size: 11.5px; color: var(--rb-faint); text-align: center; margin-top: 9px; }
/* The request form under the invitation, and its sent state. */
.rb-act-form { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.rb-act-form .rb-input { flex: 1 1 220px; min-width: 200px; }
.rb-act-sent { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 12px; border-radius: 9px;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; font-size: 13px; font-weight: 600; }
.rb-act-sent svg { flex: 0 0 auto; }
@media (max-width: 720px) { .rb-act-tiles { grid-template-columns: repeat(2, 1fr); } }

.rb-segset { flex-wrap: wrap; }




.rb-act-benefits { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rb-line-soft); }
.rb-act-benefit { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; }
.rb-act-benefit b { font-size: 13px; }
.rb-act-benefit span { font-size: 12.5px; color: var(--rb-mute); line-height: 1.55; }

/* ------------------------------ notifications ------------------------------ */
/* The shell's .toast is a dark pill bottom centre; every design below starts
   from it and moves, recolours or restructures it. The kind (ok | error)
   colours the mark, and for the coloured designs the whole thing. */
.rb-toast-ic { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 800; line-height: 1; background: #16a36a; color: #fff; }
.rb-toast.is-error .rb-toast-ic { background: #d8463c; }
@keyframes rbToastUp   { from { opacity: 0; transform: translate(-50%, 8px) } to { opacity: 1; transform: translate(-50%, 0) } }
@keyframes rbToastIn   { from { opacity: 0; transform: translateX(16px) }     to { opacity: 1; transform: none } }
@keyframes rbToastFade { from { opacity: 0 } to { opacity: 1 } }

/* ink — the platform's pill, plus the mark */
.rb-toast-ink { animation: rbToastUp 160ms ease-out; font-size: 13px; padding: 11px 16px 11px 12px; border-radius: 11px; }

/* card — top-right, a heading above the message */
.rb-toast-card { left: auto; right: 22px; top: 74px; bottom: auto; transform: none; max-width: 360px; min-width: 260px;
  display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: start;
  background: #fff; color: #334155; font-weight: 500; font-size: 13px; line-height: 1.45; padding: 13px 16px 13px 14px;
  border: 1px solid var(--rb-line); border-left: 4px solid #16a36a; border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(15,23,42,.28); animation: rbToastIn 180ms ease-out; }
.rb-toast-card.is-error { border-left-color: #d8463c; }
.rb-toast-card .rb-toast-ic { grid-row: 1 / span 2; margin-top: 1px; }
.rb-toast-card .rb-toast-k { display: block; font-size: 13.5px; font-weight: 800; color: var(--rb-ink); letter-spacing: -.1px; }

/* minimal — the view switcher's floating pill, bottom-left of the content area,
   with the green / red mark */
.rb-toast-minimal { left: 252px; bottom: 22px; transform: none; padding: 4px 16px 4px 4px; gap: 10px; border-radius: 999px;
  max-width: 560px; background: #fff; color: var(--rb-ink); font-size: 13px; font-weight: 700; letter-spacing: -.1px;
  border: 1px solid var(--rb-line); box-shadow: 0 10px 28px rgba(15,23,42,.16), 0 1px 3px rgba(15,23,42,.08);
  animation: rbToastFade 160ms ease-out; }
.rb-toast-minimal .rb-toast-ic { width: 28px; height: 28px; flex-basis: 28px; font-size: 12px; }
#app.rb-rail .rb-toast-minimal { left: 84px; }

/* ------------------------------ board filters (dropdowns · tokens) ------------------------------ */
/* dropdowns */
.rb-dd { position: relative; }
.rb-dd-btn { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; border: 1px solid #e2e8f0;
  background: #fff; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; user-select: none; }
.rb-dd-btn i { font-style: normal; font-size: 10px; color: var(--rb-faint); }
.rb-dd-btn b { font-size: 10.5px; font-weight: 800; color: #fff; background: var(--rb-ink); border-radius: 999px; padding: 1px 6px; }
.rb-dd-btn.on { border-color: var(--rb-ink); color: var(--rb-ink); }
.rb-dd-btn.open { border-color: var(--rb-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.rb-dd-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid var(--rb-line); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(15,23,42,.28); padding: 6px; }
.rb-dd-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.rb-dd-row:hover { background: #f8fafc; }
.rb-dd-n { font-family: var(--rb-mono); font-size: 11px; color: var(--rb-faint); }
.rb-dd-clear { justify-content: center; color: var(--rb-blue); font-weight: 700; border-top: 1px solid var(--rb-line-soft); border-radius: 0; margin-top: 4px; }
/* tokens */
.rb-tokens { position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 320px; min-width: 240px;
  padding: 5px 8px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.rb-tokens:focus-within { border-color: var(--rb-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.rb-tokens input { flex: 1 1 140px; min-width: 120px; border: none; outline: none; font: inherit; font-size: 13px; padding: 4px 2px; background: transparent; }
.rb-token { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 9px; border-radius: 999px; background: var(--rb-ink); color: #fff;
  font-size: 12px; font-weight: 600; }
.rb-token b { font-weight: 600; color: #93b4fd; }
.rb-token i { font-style: normal; cursor: pointer; opacity: .7; padding: 0 3px; }
.rb-token i:hover { opacity: 1; }
.rb-sugg { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid var(--rb-line);
  border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(15,23,42,.28); padding: 6px; }
.rb-sugg-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.rb-sugg-row b { flex: 0 0 64px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--rb-faint); }
.rb-sugg-row span { margin-left: auto; font-family: var(--rb-mono); font-size: 11px; color: var(--rb-faint); }
.rb-sugg-row.on, .rb-sugg-row:hover { background: #f8fafc; }

/* ---- the ticket behind a session (session panel + boarding pass) ---- */
.rb-tk-title{font-size:13.5px;font-weight:700;color:#0f172a;line-height:1.35;margin:2px 0 10px}
.rb-tk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.rb-tk-grid.compact{grid-template-columns:1fr 1fr;padding:0 22px}
.rb-tk-row{min-width:0}
.rb-tk-k{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rb-faint,#94a3b8)}
.rb-tk-v{display:block;font-size:12.5px;color:#334155;margin-top:2px;overflow-wrap:anywhere}
.rb-tk-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.rb-tk-note{font-size:11.5px;color:var(--rb-mute,#64748b);line-height:1.5}
.rb-tk-err{color:#b91c1c;margin-top:8px}
.rb-pass .rb-psec{padding:16px 22px;border-top:1px solid var(--rb-line-soft,#eef2f7);border-bottom:none}
.rb-pass .rb-tk-grid.compact{padding:0}

/* ---- presence in the assign palette: online (in the app within minutes) or offline ---- */
.rb-load.online { color: #047857; }
.rb-load.offline { color: var(--rb-faint, #94a3b8); font-weight: 600; }
.rb-presence { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: #94a3b8; }
.rb-presence.online { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }

/* ------------------------------ the loading screen ------------------------------ */
/* Shown between signing in and the first load of the workspace's data, in place
   of the shell's grey line: navy, the workspace mark with an arc going round
   it, the name, and a bar sliding until the data is in. */
.rb-boot { position: fixed; inset: 0; background: var(--rb-navy); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 50; }
.rb-boot-glow { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.rb-boot-glow.a { background: radial-gradient(circle, rgba(37,99,235,.55), transparent 60%); top: -20vmax; left: -15vmax; animation: rbBootDrift 14s ease-in-out infinite alternate; }
.rb-boot-glow.b { background: radial-gradient(circle, rgba(14,165,233,.35), transparent 60%); bottom: -25vmax; right: -15vmax; animation: rbBootDrift 18s ease-in-out infinite alternate-reverse; }
@keyframes rbBootDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vmax, 6vmax) scale(1.15); } }
.rb-boot-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; animation: rbBootIn 320ms ease-out; }
@keyframes rbBootIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rb-boot-mark { position: relative; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.rb-boot-orbit { position: absolute; inset: 0; width: 100%; height: 100%; }
.rb-boot-arc { transform-origin: 50% 50%; animation: rbBootSpin 1.6s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes rbBootSpin { to { transform: rotate(360deg); } }
.rb-boot-tile { width: 60px; height: 60px; border-radius: 16px; background: var(--rb-blue); color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -.5px; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 34px -10px rgba(37,99,235,.7); }
.rb-boot-name { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.rb-boot-sub { font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: -6px; }
.rb-boot-bar { width: 180px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 14px; }
.rb-boot-bar i { display: block; width: 40%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2563eb, #60a5fa, #2563eb); animation: rbBootSlide 1.3s ease-in-out infinite; }
@keyframes rbBootSlide { from { transform: translateX(-120%); } to { transform: translateX(300%); } }
.rb-boot-cap { font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 4px; }
.rb-boot-dots i { font-style: normal; animation: rbBootDot 1.2s ease-in-out infinite; }
.rb-boot-dots i:nth-child(2) { animation-delay: .2s; } .rb-boot-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes rbBootDot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rb-boot-glow, .rb-boot-arc, .rb-boot-bar i, .rb-boot-dots i { animation: none; } .rb-boot-bar i { width: 100%; opacity: .6; } }