/* ==========================================================================
   RiverSync — Application UI Layer
   Shared, ubiquitous design language for:
     • account.riversync.com  (account & org management)
     • portal.riversync.com   (customer portal)
   Built ON TOP of colors_and_type.css (brand tokens + Roboto).
   Adds semantic light/dark theming, the app shell, and the component kit.
   Brand DNA honored: tight radii (2–4px, Apple-inspired), Roboto, blue-tinted
   grayscale, a single restrained corporate-blue accent (#3679AC).
   ========================================================================== */

/* =========================================================
   1 · SEMANTIC THEME TOKENS  (flip for light / dark)
   ========================================================= */
:root,
[data-theme="light"] {
  --bg:            #EFF2F5;
  --surface:       #FFFFFF;
  --surface-2:     #F5F7F9;
  --surface-3:     #EBEFF3;
  --overlay:       rgba(26,32,38,0.42);

  --border:        #E4E9EE;
  --border-strong: #D2DAE1;

  --fg:            #242424;
  --fg2:           #5C666E;
  --fg3:           #8B959D;
  --fg-inverse:    #FFFFFF;

  --accent:        #3679AC;
  --accent-hover:  #2C638F;
  --accent-press:  #244F73;
  --accent-soft:   #E8F1F8;
  --accent-soft-2: #D8E8F4;
  --accent-border: #BCD6EB;
  --accent-fg:     #FFFFFF;
  --ring:          rgba(54,121,172,0.30);

  --success:#3F8A45; --success-soft:#E7F2E8; --success-border:#C4E0C7;
  --warning:#9C7A1E; --warning-soft:#FAF1D8; --warning-border:#E8D295;
  --danger: #B0474B; --danger-soft: #FAE9E9; --danger-border:#EEC8C9;
  --info:   #4C7C8A; --info-soft:   #E4EFF1; --info-border:  #C1DBE0;
  /* extended semantic families — same softened idiom */
  --critical:#8E3438;    --critical-soft:#F6DEDE;    --critical-border:#E3B5B6;
  --progress:#3679AC;    --progress-soft:#E8F1F8;    --progress-border:#BBD4E8;
  --maintenance:#7363A3; --maintenance-soft:#EDEAF6; --maintenance-border:#CFC8E6;
  --neutral:#66737F;     --neutral-soft:#EEF1F4;     --neutral-border:#D4DBE2;

  --shadow-sm: 0 1px 2px rgba(20,30,45,0.06);
  --shadow:    0 1px 2px rgba(20,30,45,0.05), 0 4px 12px rgba(20,30,45,0.06);
  --shadow-lg: 0 8px 28px rgba(20,30,45,0.12), 0 2px 6px rgba(20,30,45,0.05);

  --logo-ink:#242424;
  --logo-river:#00ADEE; --logo-sync:#EC1C24;
}
[data-theme="dark"] {
  --bg:            #0F1316;
  --surface:       #181D22;
  --surface-2:     #20262C;
  --surface-3:     #272E35;
  --overlay:       rgba(0,0,0,0.58);

  --border:        #2A323A;
  --border-strong: #3A434C;

  --fg:            #F4F8FB;
  --fg2:           #BCC8D4;
  --fg3:           #8C99A6;
  --fg-inverse:    #0F1316;

  --accent:        #5A9BD0;
  --accent-hover:  #76B0DD;
  --accent-press:  #8FC0E6;
  --accent-soft:   #182C3C;
  --accent-soft-2: #1F3A4F;
  --accent-border: #2D4F6B;
  --accent-fg:     #0B1620;
  --ring:          rgba(90,155,208,0.42);

  --success:#5DB063; --success-soft:#15241A; --success-border:#274A2C;
  --warning:#D6A845; --warning-soft:#2A2113; --warning-border:#4D3D1C;
  --danger: #D97679; --danger-soft: #2B1819; --danger-border:#4E2C2D;
  --info:   #74A9B6; --info-soft:   #15252A; --info-border:  #2A444C;
  /* extended semantic families — same softened idiom */
  --critical:#E2696E;    --critical-soft:#331416;    --critical-border:#5E2629;
  --progress:#5A9BD0;    --progress-soft:#14222E;    --progress-border:#27425A;
  --maintenance:#A795D6; --maintenance-soft:#1E1A2C; --maintenance-border:#3A3354;
  --neutral:#94A1AD;     --neutral-soft:#1F252B;     --neutral-border:#3A434C;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow:    0 2px 6px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.36);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);

  --logo-ink:#F4F8FB;
}

/* =========================================================
   2 · GEOMETRY + DENSITY
   ========================================================= */
:root {
  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:6px; --r-pill:999px;
  --sidebar-w:248px; --sidebar-w-collapsed:40px; --topbar-h:40px;
  /* nav rhythm: the row height equals the collapsed sidebar width, so a
     collapsed nav item is a full-width square; the label column sits beside
     the centered icon glyph. Both are 40px to match the top header bar. */
  --nav-cell:40px; --nav-gutter:10px;
  --ease:cubic-bezier(.4,0,.2,1); /* @kind other */

  /* compact (default) */
  --row-h:38px; --control-h:34px; --control-h-sm:28px;
  --cell-py:8px; --cell-px:14px; --card-pad:20px;
  --fs:13px; --fs-sm:12px; --fs-xs:11px;
}
[data-density="comfortable"]{
  --row-h:48px; --control-h:40px; --control-h-sm:32px;
  --cell-py:13px; --cell-px:18px; --card-pad:24px;
  --fs:14px; --fs-sm:13px; --fs-xs:12px;
}

/* =========================================================
   3 · RESET / BASE
   ========================================================= */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--rs-font-sans);
  background:var(--bg); color:var(--fg);
  font-size:var(--fs); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .25s var(--ease), color .25s var(--ease);
}
h1,h2,h3,h4,h5,h6,p{margin:0;}
a{color:var(--accent); text-decoration:none;}
button{font-family:inherit;}
img{max-width:100%; display:block;}
::selection{background:var(--accent-soft); color:var(--fg);}
/* mono runs optically large next to Roboto — always render it ~8% smaller
   than the surrounding type (.92em), matching .rs-prose code (.9em). */
.mono{font-family:var(--rs-font-mono); font-size:.92em; font-variant-numeric:tabular-nums;}
.tnum{font-variant-numeric:tabular-nums;}
hr.rs-rule{border:none; border-top:1px solid var(--border); margin:0;}

*::-webkit-scrollbar{width:11px; height:11px;}
*::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:99px; border:3px solid transparent; background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:var(--fg3); background-clip:content-box;}

/* =========================================================
   4 · APP SHELL
   ========================================================= */
.rs-app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh;
  transition:grid-template-columns .22s var(--ease);}
.rs-app.is-collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr;}

/* Sidebar */
.rs-side{position:sticky; top:0; height:100vh; background:var(--surface);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  overflow:hidden; z-index:30;}
/* brand row mirrors a nav row: switcher icon sits in the square icon column
   (at --nav-gutter); the logo aligns to the label column beside it. */
.rs-side__brand{height:var(--topbar-h); flex:none; display:flex; align-items:center;
  gap:0; padding:0 16px 0 var(--nav-gutter); border-bottom:1px solid var(--border);}
.rs-side__brand .rs-logo{height:18px; width:auto;}
/* dark theme — the logotype flips to its extra-light brand variant
   (assets/logo/logo-light.svg · river #7FD0EE / sync #F0989C) */
[data-theme="dark"]{--logo-river:#7FD0EE; --logo-sync:#F0989C;}
[data-theme="dark"] img.rs-logo{content:url("../assets/logo/logo-light.svg");}
.rs-side__brand .rs-mark{height:24px; width:24px; flex:none; display:none;}
.is-collapsed .rs-side__brand{padding:0; justify-content:center;}
.is-collapsed .rs-side__brand .rs-logo{display:none;}
.is-collapsed .rs-side__brand .rs-mark{display:block;}

.rs-side__scroll{flex:1 1 auto; overflow-y:auto; padding:0;}
.rs-side__group{margin-top:0;}
.rs-side__group:first-child{margin-top:0;}
.rs-side__label{font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg3); padding:16px 16px 6px; white-space:nowrap;}
.is-collapsed .rs-side__label{opacity:0; height:0; padding:0; overflow:hidden;}

.rs-nav{display:flex; flex-direction:column; gap:0;}
.rs-nav__item{display:flex; align-items:center; gap:0; height:var(--nav-cell); padding:0 16px 0 var(--nav-gutter);
  border-radius:0; color:var(--fg2); font-size:12.5px; font-weight:450;
  cursor:pointer; white-space:nowrap; position:relative;
  transition:background .12s var(--ease), color .12s var(--ease);}
.rs-nav__item:hover{background:var(--surface-2); color:var(--fg);}
.rs-nav__item.is-active{background:var(--accent-soft); color:var(--accent); font-weight:600;}
.rs-nav__item.is-active::before{content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--accent); border-radius:0;}
/* leading glyph fills a square cell (18px glyph + 9px padding = --nav-cell) so the
   label column begins at gutter + cell in both collapsed and expanded modes. */
.rs-nav__item > .rs-ic{flex:none; box-sizing:content-box; width:16px; height:16px; padding:8px; stroke-width:1.6;}
.rs-nav__item .rs-label{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis;}
.rs-nav__item .rs-count, .rs-nav__subitem .rs-count, .rs-navfly__item .rs-count{
  font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:99px;
  background:var(--surface-3); color:var(--fg2);}
.is-collapsed .rs-nav__item{justify-content:center; padding:0;}
.is-collapsed .rs-nav__item .rs-label,
.is-collapsed .rs-nav__item .rs-count{display:none;}
.is-collapsed .rs-nav__item.is-active::before{left:0;}
/* collapsed: the active highlight is a full-width square (sidebar width × row
   height, both 40px) with square corners — not a centered chip. */

/* ---------------------------------------------------------------------
   NESTED NAV — drop-down sub-menus (max two levels below a parent row).
   Expanded rail: a parent row accordions an indented sub-list in place.
   Collapsed rail: clicking the parent icon opens a flyout panel to the
   right of the rail; a nested branch cascades a second flyout onwards.
   Markup: .rs-nav__branch > (.rs-nav__item|.rs-nav__subitem).has-sub
            + .rs-nav__sub > .rs-nav__subin > children.
   Behavior: RS.initNavTree(sideEl) — wired automatically by mountShell.
   --------------------------------------------------------------------- */
.rs-nav__branch{display:flex; flex-direction:column;}
.rs-nav__chev{flex:none; display:inline-flex; align-items:center; justify-content:center;
  margin-left:8px; color:var(--fg3); transition:transform .18s var(--ease);}
.rs-nav__chev .rs-ic{width:14px; height:14px;}
.rs-nav__branch.is-open > .has-sub > .rs-nav__chev{transform:rotate(180deg);}
/* parent of the active descendant: text emphasis only — the 3px accent bar
   stays reserved for the single active leaf. */
.rs-nav__item.is-childactive, .rs-nav__subitem.is-childactive{color:var(--fg); font-weight:600;}

/* inline accordion (expanded rail) */
.rs-nav__sub{display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s var(--ease);}
.rs-nav__branch.is-open > .rs-nav__sub{grid-template-rows:1fr;}
.rs-nav__subin{overflow:hidden; min-width:0; position:relative;}
/* guide line under the parent glyph column */
.rs-nav__subin::before{content:""; position:absolute; left:calc(var(--nav-gutter) + 15px);
  top:5px; bottom:5px; width:1px; background:var(--border);}
.rs-nav__subitem{display:flex; align-items:center; gap:0; height:32px;
  padding:0 16px 0 calc(var(--nav-gutter) + 32px);
  color:var(--fg2); font-size:12.5px; font-weight:450; cursor:pointer;
  white-space:nowrap; position:relative;
  transition:background .12s var(--ease), color .12s var(--ease);}
.rs-nav__subitem:hover{background:var(--surface-2); color:var(--fg);}
.rs-nav__subitem.is-active{background:var(--accent-soft); color:var(--accent); font-weight:600;}
.rs-nav__subitem.is-active::before{content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--accent);}
.rs-nav__subitem .rs-label{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis;}
/* second level — one more indent step; the guide line steps with it and
   spans ONLY its own nested list (subin is the positioning context) */
.rs-nav__subin .rs-nav__subin::before{left:calc(var(--nav-gutter) + 37px);}
.rs-nav__subin .rs-nav__subin .rs-nav__subitem{padding-left:calc(var(--nav-gutter) + 54px);}

/* collapsed rail: no inline subs or chevrons; a parent whose descendant is
   active shows the full-square active state on its icon */
.is-collapsed .rs-nav__sub,
.is-collapsed .rs-nav__item .rs-nav__chev{display:none;}
.is-collapsed .rs-nav__item.is-childactive{background:var(--accent-soft); color:var(--accent);}
.is-collapsed .rs-nav__item.is-childactive::before{content:""; position:absolute; left:0; top:0;
  bottom:0; width:3px; background:var(--accent);}
.is-collapsed .rs-nav__item.is-flyopen{background:var(--surface-2); color:var(--fg);}

/* flyout panel (collapsed rail) — body-anchored, escapes the rail overflow.
   No header — the panel reads as the parent's own drop-down, items only. */
.rs-navfly{position:fixed; z-index:2100; min-width:204px; max-width:264px; padding:4px 0;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:0;
  box-shadow:var(--shadow-lg);}
.rs-navfly__item{display:flex; align-items:center; gap:0; height:34px; padding:0 12px 0 14px;
  color:var(--fg2); font-size:12.5px; font-weight:450; cursor:pointer; white-space:nowrap;
  position:relative; text-decoration:none; transition:background .1s, color .1s;}
.rs-navfly__item:hover, .rs-navfly__item.is-flyopen{background:var(--surface-2); color:var(--fg);}
.rs-navfly__item.is-active{background:var(--accent-soft); color:var(--accent); font-weight:600;}
.rs-navfly__item.is-active::before{content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--accent);}
.rs-navfly__item.is-childactive{color:var(--fg); font-weight:600;}
.rs-navfly__item .rs-label{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; margin-right:12px;}
.rs-navfly__item .rs-nav__chev{transform:none;}

.rs-side__foot{flex:none; border-top:1px solid var(--border); padding:0;}
.rs-side__collapse{display:flex; align-items:center; justify-content:flex-end; gap:11px; width:100%; height:var(--sidebar-w-collapsed); padding:0 18px;
  border:none; background:transparent; color:var(--fg3); font:inherit; font-size:12.5px; font-weight:500;
  cursor:pointer; white-space:nowrap; border-bottom:1px solid var(--border-weak); transition:background .12s, color .12s;}
.rs-side__collapse:hover{background:var(--surface-2); color:var(--fg);}
.rs-side__collapse .rs-ic{width:16px; height:16px; flex:none; transition:transform .2s var(--ease);}
.is-collapsed .rs-side__collapse{justify-content:center; padding:0;}
.is-collapsed .rs-side__collapse .rs-label{display:none;}
.is-collapsed .rs-side__collapse .rs-ic{transform:rotate(180deg);}
.rs-userchip{display:flex; align-items:center; gap:10px; padding:9px 16px; border-radius:0;
  cursor:pointer; transition:background .12s;}
.rs-userchip:hover{background:var(--surface-2);}
.rs-userchip__meta{min-width:0; line-height:1.25; flex:1 1 auto;}
.rs-userchip__meta b{font-size:13px; font-weight:600; color:var(--fg); display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rs-userchip__meta span{font-size:11.5px; color:var(--fg3); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; display:block;}
.is-collapsed .rs-userchip{justify-content:center; padding:9px 0;}
.is-collapsed .rs-userchip__meta,
.is-collapsed .rs-userchip .rs-ic{display:none;}

/* Main + topbar */
.rs-main{min-width:0; display:flex; flex-direction:column;}
.rs-top{position:sticky; top:0; z-index:20; height:var(--topbar-h); flex:none;
  display:flex; align-items:center; gap:14px; padding:0 22px;
  background:var(--surface); border-bottom:1px solid var(--border);}
[data-theme="dark"] .rs-top{background:var(--surface);}
.rs-top__crumbs{display:flex; align-items:center; gap:4px; min-width:0; color:var(--fg2); font-size:13px; overflow:hidden; white-space:nowrap;}
.rs-top__crumbs .sep{color:var(--fg3); display:inline-flex;}
.rs-top__crumbs .sep .rs-ic{width:14px; height:14px;}
.rs-top__crumbs .cur{color:var(--fg); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis;}
.rs-top__crumbs a{color:var(--fg2); text-decoration:none; transition:color .12s;}
.rs-top__crumbs a:hover{color:var(--accent); text-decoration:underline;}
.rs-top__crumbs .crumb-static{color:var(--fg2);}
/* tight on real estate: collapse the trail to just the current page (the portal
   pill still gives context); the search field gets the reclaimed room. */
@media (max-width:1100px){
  .rs-top__crumbs a, .rs-top__crumbs .sep{display:none;}
}
.rs-top__spacer{flex:1 1 auto;}
.rs-top__search{display:flex; align-items:center; gap:8px; height:28px; padding:0 10px; margin-right:8px;
  width:340px; flex:0 1 340px; min-width:170px; border:1px solid var(--border-strong); border-radius:var(--r-md);
  background:var(--surface-2); color:var(--fg3); cursor:text;}
.rs-top__search .rs-ic{width:15px; height:15px;}
.rs-top__search input{border:none; background:transparent; outline:none; flex:1; min-width:0;
  font:inherit; font-size:13px; color:var(--fg);}
.rs-top__search kbd{font-family:var(--rs-font-mono); font-size:10.5px; color:var(--fg3);
  border:1px solid var(--border-strong); border-radius:4px; padding:1px 5px; background:var(--surface);}
.rs-top__divider{width:1px; height:18px; background:var(--border); margin:0 4px;}

/* profile dropdown button (top bar) — full-height, flush to the viewport right */
#profilePop{align-self:stretch; margin-right:-22px; margin-left:0; border-left:1px solid var(--border);}
/* notifications + profile form a full-height cluster; bell is a flush square button */
#notifPop{align-self:stretch; margin:0 -14px 0 -14px;}
#notifPop > .rs-iconbtn{position:relative; height:100%; width:var(--topbar-h); border-radius:0;}
/* dropdown boxes attach flush to their button, square corners */
#profilePop > .rs-menu, #notifPop > .rs-menu{top:100%; border-radius:0;}

/* notification badge on the bell */
.rs-notif-badge{position:absolute; top:5px; right:5px; min-width:15px; height:15px; padding:0 4px;
  display:flex; align-items:center; justify-content:center; border-radius:99px; line-height:1;
  background:var(--danger); color:#fff; font-size:9.5px; font-weight:700; font-variant-numeric:tabular-nums;
  border:1.5px solid var(--surface);}

/* notifications dropdown panel */
.rs-notif{width:360px; max-width:calc(100vw - 28px); padding:0; overflow:hidden;}
.rs-notif__head{display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--border);}
.rs-notif__head b{font-size:13.5px; font-weight:600; color:var(--fg);}
.rs-notif__count{font-size:10.5px; font-weight:700; color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-border); padding:1px 7px; border-radius:99px; white-space:nowrap;}
.rs-notif__count.is-clear{color:var(--fg3); background:var(--surface-3); border-color:transparent;}
.rs-notif__markall{margin-left:auto; font:inherit; font-size:12px; font-weight:550; color:var(--accent);
  background:none; border:0; cursor:pointer; padding:0;}
.rs-notif__markall:hover{text-decoration:underline;}
.rs-notif__list{max-height:392px; overflow-y:auto;}
.rs-notif__item{display:flex; gap:11px; padding:11px 14px; cursor:pointer; position:relative;
  border-bottom:1px solid var(--border); transition:background .1s;}
.rs-notif__item:last-child{border-bottom:none;}
.rs-notif__item:hover{background:var(--surface-2);}
.rs-notif__item.is-unread{background:var(--accent-soft);}
.rs-notif__item.is-unread:hover{background:var(--accent-soft-2);}
.rs-notif__ic{flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:var(--surface-3); color:var(--fg2);}
.rs-notif__ic .rs-ic{width:17px; height:17px;}
.rs-notif__ic--success{background:var(--success-soft); color:var(--success);}
.rs-notif__ic--warning{background:var(--warning-soft); color:var(--warning);}
.rs-notif__ic--accent{background:var(--accent-soft); color:var(--accent);}
.rs-notif__ic--info{background:var(--info-soft); color:var(--info);}
.rs-notif__ic--danger{background:var(--danger-soft); color:var(--danger);}
.rs-notif__body{flex:1 1 auto; min-width:0;}
.rs-notif__body b{font-size:12.5px; font-weight:600; color:var(--fg); display:block;}
.rs-notif__body p{font-size:12px; color:var(--fg2); margin-top:2px; line-height:1.4;}
.rs-notif__time{font-size:11px; color:var(--fg3); margin-top:4px; display:block;}
.rs-notif__dot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent);
  align-self:center; opacity:0;}
.rs-notif__item.is-unread .rs-notif__dot{opacity:1;}
.rs-notif__foot{padding:10px 14px; border-top:1px solid var(--border); text-align:center;}
.rs-notif__foot a{font-size:12.5px; font-weight:550; color:var(--accent);}
.rs-notif__foot a:hover{text-decoration:underline;}
.rs-profilebtn{display:flex; align-items:center; gap:11px; height:100%; padding:0 12px 0 0;
  border:0; border-radius:0; background:transparent; cursor:pointer;
  transition:background .12s;}
/* square avatar tile covering the full button height, flush to the left edge.
   Softened to a calm neutral tile (it's large now) so it doesn't shout. */
.rs-profilebtn > .rs-av{width:var(--topbar-h); height:100%; font-size:calc(var(--topbar-h)*.38); border-radius:0; align-self:stretch;
  background:var(--surface-3); color:var(--fg2); font-weight:600;}
.rs-profilebtn:hover{background:var(--surface-2);}
/* tenant identity — the avatar tile carries the hue (echoes the AppPill domain hues):
   customer = calm neutral (default) · partner = teal · riversync staff = corporate blue */
.rs-profilebtn--customer > .rs-av{background:var(--surface-3); color:var(--fg2);}
.rs-profilebtn--partner > .rs-av{background:#E4F4EF; color:#317C68;}
.rs-profilebtn--riversync > .rs-av{background:#E8F1F8; color:#2C638F;}
[data-theme="dark"] .rs-profilebtn--partner > .rs-av{background:#10291F; color:#6FC3A6;}
[data-theme="dark"] .rs-profilebtn--riversync > .rs-av{background:#16293A; color:#7FB4DE;}
.rs-pop.is-open > .rs-profilebtn{background:var(--surface-2);}
.rs-profilebtn__meta{display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; min-width:0;}
.rs-profilebtn__meta b{font-size:12.5px; font-weight:600; color:var(--fg); white-space:nowrap;}
.rs-profilebtn__meta span{font-size:11px; color:var(--fg3); white-space:nowrap;}
.rs-profilebtn__chev{width:15px; height:15px; color:var(--fg3); transition:transform .15s var(--ease);}
.rs-pop.is-open .rs-profilebtn__chev{transform:rotate(180deg);}
@media (max-width:640px){ .rs-profilebtn__meta{display:none;} }

/* profile header inside the menu */
.rs-menu__profilehead{display:flex; align-items:center; gap:11px; padding:9px 12px 11px;}
.rs-menu__profilemeta{min-width:0; line-height:1.3;}
.rs-menu__profilemeta b{font-size:13px; font-weight:600; color:var(--fg); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rs-menu__profilemeta span{font-size:11.5px; color:var(--fg3); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
a.rs-menu__item{text-decoration:none; color:var(--fg);}

/* Page */
.rs-page{padding:24px 28px 72px; max-width:1320px; width:100%;}
.rs-page--wide{max-width:none;}
.rs-pagehead{display:flex; align-items:flex-start; gap:18px; margin-bottom:22px;}
.rs-pagehead__t{flex:1 1 auto; min-width:0;}
.rs-pagehead h1{font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--fg); line-height:1.2;}
.rs-pagehead .rs-sub{font-size:13.5px; color:var(--fg2); margin-top:5px;}
.rs-pagehead__actions{display:flex; align-items:center; gap:8px; flex:none;}

.rs-eyebrow{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3);}
.rs-h2{font-size:16px; font-weight:600; color:var(--fg); letter-spacing:-.005em;}
.rs-muted{color:var(--fg2);} .rs-muted-3{color:var(--fg3);}

/* =========================================================
   5 · BUTTONS
   ========================================================= */
.rs-btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:var(--control-h); padding:0 13px; border-radius:var(--r-md);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--fg);
  font-size:13px; font-weight:550; cursor:pointer; white-space:nowrap; user-select:none;
  transition:background .13s var(--ease), border-color .13s, color .13s, box-shadow .13s, transform .04s;}
.rs-btn:hover{background:var(--surface-2); border-color:var(--fg3);}
.rs-btn:active{transform:translateY(.5px);}
.rs-btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring);}
.rs-btn .rs-ic{width:16px; height:16px; stroke-width:1.6; flex:none;}
.rs-btn[disabled],.rs-btn.is-disabled{opacity:.5; pointer-events:none;}
.rs-btn--primary{background:var(--accent); border-color:var(--accent); color:var(--accent-fg);}
.rs-btn--primary:hover{background:var(--accent-hover); border-color:var(--accent-hover);}
.rs-btn--primary:active{background:var(--accent-press);}
.rs-btn--ghost{background:transparent; border-color:var(--border-strong); color:var(--fg2);}
.rs-btn--ghost:hover{background:var(--surface-2); color:var(--fg);}
.rs-btn--danger{background:transparent; border-color:var(--border-strong); color:var(--danger);}
.rs-btn--danger:hover{background:var(--danger-soft); border-color:var(--danger-border);}
.rs-btn--danger-solid{background:var(--danger); border-color:var(--danger); color:#fff;}
.rs-btn--danger-solid:hover{background:var(--danger); border-color:var(--danger); color:#fff; filter:brightness(1.07);}
.rs-btn--sm{height:var(--control-h-sm); padding:0 9px; font-size:12px; gap:5px;}
.rs-btn--sm .rs-ic{width:14px; height:14px;}
.rs-btn--icon{width:var(--control-h); padding:0;}
.rs-btn--icon.rs-btn--sm{width:var(--control-h-sm);}
.rs-btn--block{width:100%;}
.rs-btngroup{display:inline-flex;}
.rs-btngroup .rs-btn{border-radius:0; margin-left:-1px;}
.rs-btngroup .rs-btn:first-child{border-radius:var(--r-md) 0 0 var(--r-md); margin-left:0;}
.rs-btngroup .rs-btn:last-child{border-radius:0 var(--r-md) var(--r-md) 0;}
.rs-btngroup .rs-btn.is-active{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-border); z-index:1;}

/* =========================================================
   6 · FORM CONTROLS
   ========================================================= */
.rs-field{display:flex; flex-direction:column; gap:6px;}
.rs-field__label{font-size:12.5px; font-weight:600; color:var(--fg); display:flex; align-items:center; gap:6px;}
.rs-field__label .req{color:var(--danger);}
.rs-field__hint{font-size:12px; color:var(--fg3);}
.rs-field__err{font-size:12px; color:var(--danger);}
.rs-input,.rs-select,.rs-textarea{width:100%; height:var(--control-h); padding:0 11px;
  border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--surface);
  color:var(--fg); font:inherit; font-size:13px;
  transition:border-color .13s, box-shadow .13s, background .13s;}
.rs-textarea{height:auto; padding:8px 11px; min-height:76px; resize:vertical; line-height:1.5;}
.rs-input::placeholder,.rs-textarea::placeholder{color:var(--fg3);}
.rs-input:hover,.rs-select:hover,.rs-textarea:hover{border-color:var(--fg3);}
.rs-input:focus,.rs-select:focus,.rs-textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);}
.rs-input[disabled],.rs-select[disabled]{background:var(--surface-2); color:var(--fg3); cursor:not-allowed;}
.rs-input.is-error,.rs-textarea.is-error{border-color:var(--danger);}
.rs-select{appearance:none; cursor:pointer; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B959D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;}
.rs-input-wrap{position:relative; display:flex; align-items:center;}
.rs-input-wrap .rs-ic-lead{position:absolute; left:10px; width:15px; height:15px; color:var(--fg3); pointer-events:none;}
.rs-input-wrap .rs-input{padding-left:32px;}

.rs-check{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--fg); user-select:none; position:relative;}
.rs-check input{position:absolute; opacity:0; width:0; height:0;}
.rs-check__box{width:16px; height:16px; border:1.5px solid var(--border-strong); border-radius:var(--r-sm);
  background:var(--surface); display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:background .12s, border-color .12s; color:#fff;}
.rs-check__box svg{width:11px; height:11px; opacity:0; transform:scale(.5); transition:.12s; stroke-width:3.2;}
.rs-check input:checked + .rs-check__box{background:var(--accent); border-color:var(--accent);}
.rs-check input:checked + .rs-check__box svg{opacity:1; transform:scale(1);}
.rs-check input:indeterminate + .rs-check__box{background:var(--accent); border-color:var(--accent);}
.rs-check input:indeterminate + .rs-check__box::after{content:""; width:9px; height:2px; background:#fff; border-radius:2px;}
.rs-check input:focus-visible + .rs-check__box{box-shadow:0 0 0 3px var(--ring);}
.rs-radio .rs-check__box{border-radius:50%; position:relative;}
/* dot is absolutely centered (inset:0 + margin:auto) with an even 6px size so it can't
   drift on the odd 13px inner box the way a flex-positioned 7px dot did */
.rs-radio .rs-check__box::after{content:""; position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:50%; background:#fff; opacity:0; transform:scale(.4); transition:.12s;}
.rs-radio input:checked + .rs-check__box{background:var(--accent); border-color:var(--accent);}
.rs-radio input:checked + .rs-check__box::after{opacity:1; transform:scale(1);}

.rs-switch{display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; font-size:13px; color:var(--fg);}
.rs-switch input{position:absolute; opacity:0; width:0; height:0;}
.rs-switch__track{width:34px; height:20px; border-radius:99px; background:var(--border-strong);
  position:relative; flex:none; transition:background .15s var(--ease);}
.rs-switch__track::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .17s var(--ease);}
.rs-switch input:checked + .rs-switch__track{background:var(--accent);}
.rs-switch input:checked + .rs-switch__track::after{transform:translateX(14px);}
.rs-switch input:focus-visible + .rs-switch__track{box-shadow:0 0 0 3px var(--ring);}

/* segmented control */
.rs-seg{display:inline-flex; background:var(--surface-3); border-radius:var(--r-md); padding:2px; gap:2px;}
.rs-seg button{border:none; background:transparent; color:var(--fg2); font:inherit; font-size:12.5px; font-weight:550;
  padding:0 11px; height:calc(var(--control-h) - 6px); border-radius:var(--r-sm); cursor:pointer; transition:.12s;}
.rs-seg button:hover{color:var(--fg);}
.rs-seg button.is-active{background:var(--surface); color:var(--fg); box-shadow:var(--shadow-sm);}

/* =========================================================
   7 · CARDS / PANELS / STATS
   ========================================================= */
.rs-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);}
.rs-card__head{display:flex; align-items:center; gap:12px; padding:8px var(--card-pad); min-height:42px; border-bottom:1px solid var(--border);}
.rs-card__head h3{font-size:14.5px; font-weight:600; color:var(--fg); flex:1 1 auto;}
.rs-card__head .rs-sub{font-size:12.5px; color:var(--fg3); font-weight:400;}
.rs-card__body{padding:var(--card-pad);}
.rs-card__foot{padding:10px var(--card-pad); border-top:1px solid var(--border); display:flex; align-items:center; gap:10px;}

.rs-stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-sm);}
.rs-stat__label{font-size:12px; font-weight:600; color:var(--fg3); text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; gap:7px;}
.rs-stat__value{font-size:28px; font-weight:600; color:var(--fg); letter-spacing:-.02em; margin-top:8px; line-height:1; font-variant-numeric:tabular-nums;}
.rs-stat__delta{font-size:12px; font-weight:600; margin-top:8px; display:inline-flex; align-items:center; gap:4px;}
.rs-stat__delta.up{color:var(--success);} .rs-stat__delta.down{color:var(--danger);} .rs-stat__delta.flat{color:var(--fg3);}
.rs-stat__ic{width:38px; height:38px; color:var(--accent); display:inline-flex; align-items:center; justify-content:center; float:right;}
.rs-stat__ic .rs-ic{width:20px; height:20px;}
/* =========================================================
   8 · BADGES / PILLS / TAGS / AVATARS
   ========================================================= */
.rs-badge{display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px;
  border-radius:2px; font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap;
  background:var(--surface-3); color:var(--fg2); border:1px solid transparent;}
.rs-badge .dot{display:none;}
.rs-badge--accent{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-border);}
.rs-badge--success{background:var(--success-soft); color:var(--success); border-color:var(--success-border);}
.rs-badge--warning{background:var(--warning-soft); color:var(--warning); border-color:var(--warning-border);}
.rs-badge--danger{background:var(--danger-soft); color:var(--danger); border-color:var(--danger-border);}
.rs-badge--info{background:var(--info-soft); color:var(--info); border-color:var(--info-border);}
.rs-badge--outline{background:transparent; border-color:var(--border-strong); color:var(--fg2);}
.rs-badge--solid{background:var(--accent); color:var(--accent-fg);}

/* role tag — subtle, square-ish */
.rs-tag{display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:2px;
  font-size:12px; font-weight:550; background:var(--surface-3); color:var(--fg2); border:1px solid var(--border);}
.rs-tag .rs-ic{width:13px; height:13px;}
.rs-tag--owner{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-border);}
.rs-tag--admin{background:var(--info-soft); color:var(--info); border-color:var(--info-border);}
.rs-tag--editor{background:var(--success-soft); color:var(--success); border-color:var(--success-border);}
.rs-tag--viewer{background:var(--surface-3); color:var(--fg2); border-color:var(--border);}
.rs-tag--support{background:color-mix(in srgb,var(--rs-indigo) 14%,var(--surface)); color:var(--rs-indigo); border-color:color-mix(in srgb,var(--rs-indigo) 36%,var(--surface));}
.rs-tag--billing{background:var(--warning-soft); color:var(--warning); border-color:var(--warning-border);}
.rs-tag--auditor{background:color-mix(in srgb,var(--fg) 7%,var(--surface)); color:var(--fg2); border-color:color-mix(in srgb,var(--fg) 18%,var(--surface));}
.rs-tag--remove{cursor:pointer; padding-right:5px;}
.rs-tag--remove .x{width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; border-radius:3px; color:var(--fg3);}
.rs-tag--remove .x:hover{background:var(--surface); color:var(--danger);}

/* avatars — sized by the consumed (never declared) --s knob, so inline
   style="--s:72px" overrides keep working while no custom property is
   declared under a component selector (keeps the token registry clean). */
.rs-av{width:var(--s,32px); height:var(--s,32px); border-radius:2px; flex:none; display:inline-flex;
  align-items:center; justify-content:center; font-size:calc(var(--s,32px)*.38); font-weight:600; color:#fff;
  background:var(--accent); overflow:hidden; user-select:none; position:relative;}
.rs-av img{width:100%; height:100%; object-fit:cover;}
.rs-av--sm{width:var(--s,24px); height:var(--s,24px); font-size:calc(var(--s,24px)*.38);}
.rs-av--lg{width:var(--s,44px); height:var(--s,44px); font-size:calc(var(--s,44px)*.38);}
.rs-av--xl{width:var(--s,64px); height:var(--s,64px); font-size:calc(var(--s,64px)*.38);}
.rs-av-c0{background:#3679AC;} .rs-av-c1{background:#4FB89A;} .rs-av-c2{background:#8E73C2;}
.rs-av-c3{background:#DD9259;} .rs-av-c4{background:#D784B0;} .rs-av-c5{background:#5D9EAC;}
.rs-av__status{position:absolute; right:-1px; bottom:-1px; width:30%; height:30%; min-width:8px; min-height:8px;
  border-radius:50%; border:2px solid var(--surface); background:var(--fg3);}
.rs-av__status.online{background:var(--success);} .rs-av__status.away{background:var(--warning);}

/* user cell (avatar + name + sub) */
.rs-usercell{display:flex; align-items:center; gap:10px; min-width:0;}
.rs-usercell__meta{min-width:0; line-height:1.3;}
.rs-usercell__meta b{font-size:13px; font-weight:600; color:var(--fg); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rs-usercell__meta span{font-size:12px; color:var(--fg3); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* =========================================================
   9 · TABLES
   ========================================================= */
.rs-tablewrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);}
.rs-tabletools{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.rs-tabletools__spacer{flex:1 1 auto;}
.rs-table{width:100%; border-collapse:collapse; font-size:var(--fs);}
.rs-table th{text-align:left; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--fg3); padding:var(--cell-py) var(--cell-px); background:var(--surface-2);
  border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0;
  z-index:2; /* above positioned row content (avatars, checkboxes, action triggers); open menus sit at 60 */}
.rs-table th.sortable{cursor:pointer; user-select:none;}
.rs-table th.sortable:hover{color:var(--fg2);}
.rs-table th .sort-ic{display:inline-flex; vertical-align:middle; margin-left:4px; opacity:.5; width:13px; height:13px;}
.rs-table th.sorted .sort-ic{opacity:1; color:var(--accent);}
.rs-table td{padding:var(--cell-py) var(--cell-px); border-bottom:1px solid var(--border); color:var(--fg); vertical-align:middle; height:var(--row-h);}
.rs-table tbody tr{transition:background .1s;}
.rs-table tbody tr:hover{background:var(--surface-2);}
.rs-table tbody tr.is-selected{background:var(--accent-soft);}
.rs-table tbody tr:last-child td{border-bottom:none;}
.rs-table .col-check{width:40px; padding-left:14px; padding-right:0;}
.rs-table .col-actions{width:48px; text-align:right;}
.rs-table .num{text-align:right; font-variant-numeric:tabular-nums;}
.rs-table .nowrap{white-space:nowrap;}
.rs-rowactions{opacity:0; transition:opacity .12s;}
.rs-table tbody tr:hover .rs-rowactions{opacity:1;}

.rs-tablefoot{display:flex; align-items:center; gap:14px; padding:11px 14px; border-top:1px solid var(--border); color:var(--fg2); font-size:12.5px;}
.rs-tablefoot__spacer{flex:1 1 auto;}

/* table variants */
.rs-table tbody tr.is-clickable{cursor:pointer;}
.rs-table--striped tbody tr:nth-child(even){background:color-mix(in srgb, var(--surface-2) 55%, var(--surface));}
.rs-table--striped tbody tr:hover{background:var(--surface-2);}
.rs-table--striped tbody tr.is-selected{background:var(--accent-soft);}
.rs-table--lined th+th,.rs-table--lined td+td{border-left:1px solid var(--border);}

/* bulk-selection bar (replaces tools row while rows are selected) */
.rs-bulkbar{display:flex; align-items:center; gap:10px; padding:8px 14px; min-height:45px;
  background:var(--accent-soft); border-bottom:1px solid var(--accent-border); font-size:13px;}
.rs-bulkbar>b{color:var(--accent); font-size:12.5px; white-space:nowrap;}
.rs-bulkbar__spacer{flex:1 1 auto;}

/* empty state inside a table body */
.rs-table-empty{display:flex; flex-direction:column; align-items:center; gap:5px; padding:40px 20px; text-align:center;}
.rs-table-empty>.rs-ic{width:26px; height:26px; color:var(--fg3); margin-bottom:4px;}
.rs-table-empty b{font-size:13.5px; color:var(--fg);}
.rs-table-empty p{font-size:12.5px; color:var(--fg3); max-width:360px; margin:0;}
.rs-table-empty .rs-btn{margin-top:9px;}

/* loading skeleton bar */
.rs-skel{display:inline-block; height:12px; width:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size:200% 100%; animation:rs-skel 1.2s linear infinite;}
@keyframes rs-skel{to{background-position:-200% 0;}}
@media (prefers-reduced-motion: reduce){.rs-skel{animation:none;}}

.rs-pager{display:inline-flex; align-items:center; gap:2px;}
.rs-pager button{min-width:30px; height:30px; padding:0 6px; border:1px solid transparent; background:transparent;
  color:var(--fg2); border-radius:var(--r-sm); cursor:pointer; font:inherit; font-size:12.5px; transition:.12s;}
.rs-pager button:hover{background:var(--surface-2); color:var(--fg);}
.rs-pager button.is-active{background:var(--accent); color:var(--accent-fg);}
.rs-pager button[disabled]{opacity:.4; pointer-events:none;}

/* =========================================================
   10 · TABS / BREADCRUMBS
   ========================================================= */
.rs-tabs{display:flex; align-items:center; gap:2px; border-bottom:1px solid var(--border);}
.rs-tabs__item{position:relative; padding:10px 14px; font-size:13.5px; font-weight:550; color:var(--fg2);
  cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; transition:color .12s;}
.rs-tabs__item:hover{color:var(--fg);}
.rs-tabs__item.is-active{color:var(--accent);}
.rs-tabs__item.is-active::after{content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; background:var(--accent); border-radius:2px;}
.rs-tabs__item .rs-count{font-size:11px; font-weight:700; padding:0 6px; border-radius:99px; background:var(--surface-3); color:var(--fg2);}

.rs-crumbs{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--fg2); flex-wrap:wrap;}
.rs-crumbs a{color:var(--fg2);} .rs-crumbs a:hover{color:var(--accent);}
.rs-crumbs .sep{color:var(--fg3);}
.rs-crumbs .cur{color:var(--fg); font-weight:600;}

/* =========================================================
   11 · MODALS / DRAWERS / TOASTS / MENUS
   ========================================================= */
.rs-scrim{position:fixed; inset:0; background:var(--overlay); z-index:100; display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .18s var(--ease);}
.rs-scrim.is-open{opacity:1; pointer-events:auto;}
.rs-modal{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  width:480px; max-width:100%; max-height:88vh; display:flex; flex-direction:column; transform:translateY(8px) scale(.99); transition:transform .18s var(--ease);}
.rs-scrim.is-open .rs-modal{transform:none;}
.rs-modal--lg{width:640px;}
.rs-modal__head{display:flex; align-items:flex-start; gap:12px; padding:18px 20px 14px;}
.rs-modal__head h3{font-size:16px; font-weight:600; flex:1 1 auto;}
.rs-modal__head .rs-sub{font-size:13px; color:var(--fg2); margin-top:3px;}
.rs-modal__body{padding:4px 20px 18px; overflow-y:auto;}
.rs-modal__foot{display:flex; align-items:center; gap:10px; justify-content:flex-end; padding:14px 20px; border-top:1px solid var(--border);}
.rs-modal__icon{width:38px; height:38px; border-radius:var(--r-md); display:inline-flex; align-items:center; justify-content:center; flex:none;}
.rs-modal__icon .rs-ic{width:19px; height:19px;}
.rs-modal__icon.danger{background:var(--danger-soft); color:var(--danger);}
.rs-modal__icon.warning{background:var(--warning-soft); color:var(--warning);}

/* Right off-canvas variant of a scrim+modal. Design-system default for any
   EDIT / CREATE form: the same .rs-modal markup docks full-height to the
   right and slides in. Centered modals stay for confirmations only. */
.rs-scrim--drawer{justify-content:flex-end; align-items:stretch; padding:0;}
.rs-scrim--drawer .rs-modal{width:440px; max-width:100%; height:100vh; max-height:100vh;
  border-radius:0; border-top:0; border-right:0; border-bottom:0; transform:translateX(100%); transition:none; animation:none;}
.rs-scrim--drawer.is-open .rs-modal{transform:none;}
.rs-scrim--drawer .rs-modal--lg{width:520px;}
.rs-scrim--drawer .rs-modal__head{border-bottom:1px solid var(--border); padding:16px 20px;}
.rs-scrim--drawer .rs-modal__body{flex:1 1 auto; padding:20px;}

/* Off-canvas: .rs-modal markup slides in from any edge (left / right / top /
   bottom) over a frosted scrim — lighter overlay tint + backdrop blur so the
   page stays legible but clearly de-emphasized. Fade on .rs-scrim carries the
   blur in and out with the panel. */
.rs-scrim--off{padding:0; background:color-mix(in srgb, var(--overlay) 55%, transparent);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);}
.rs-scrim--off .rs-modal{border-radius:0; box-shadow:var(--shadow-lg); transition:transform .26s var(--ease); animation:none;}
.rs-scrim--off.is-open .rs-modal{transform:none;}
.rs-scrim--off .rs-modal__head{border-bottom:1px solid var(--border); padding:16px 20px;}
.rs-scrim--off .rs-modal__body{flex:1 1 auto; padding:20px; overflow:auto;}
/* sides */
.rs-scrim--off-left{justify-content:flex-start; align-items:stretch;}
.rs-scrim--off-left .rs-modal{width:440px; max-width:100%; height:100vh; max-height:100vh;
  border-top:0; border-left:0; border-bottom:0; transform:translateX(-100%);}
.rs-scrim--off-right{justify-content:flex-end; align-items:stretch;}
.rs-scrim--off-right .rs-modal{width:440px; max-width:100%; height:100vh; max-height:100vh;
  border-top:0; border-right:0; border-bottom:0; transform:translateX(100%);}
.rs-scrim--off-top{flex-direction:column; justify-content:flex-start; align-items:stretch;}
.rs-scrim--off-top .rs-modal{width:100%; max-height:46vh; border-top:0; border-left:0; border-right:0; transform:translateY(-100%);}
.rs-scrim--off-bottom{flex-direction:column; justify-content:flex-end; align-items:stretch;}
.rs-scrim--off-bottom .rs-modal{width:100%; max-height:46vh; border-bottom:0; border-left:0; border-right:0; transform:translateY(100%);}
/* lg: wider on left/right, taller on top/bottom */
.rs-scrim--off-left .rs-modal--lg,.rs-scrim--off-right .rs-modal--lg{width:520px;}
.rs-scrim--off-top .rs-modal--lg,.rs-scrim--off-bottom .rs-modal--lg{max-height:62vh;}
/* Scrimless (non-blocking) variant: no overlay tint or backdrop blur, and the
   page behind stays fully usable — pointer events pass through everywhere
   except the panel itself. For inspectors / trays you work alongside. */
.rs-scrim--off.rs-scrim--off-noscrim{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;}
.rs-scrim--off.rs-scrim--off-noscrim.is-open{pointer-events:none;}
.rs-scrim--off.rs-scrim--off-noscrim.is-open .rs-modal{pointer-events:auto;}

/* read-only (edit-gated) card: inputs disabled + body controls inert until Edit */
.rs-card.is-locked .rs-input:disabled,.rs-card.is-locked .rs-select:disabled,.rs-card.is-locked textarea:disabled{
  background:var(--surface-2); color:var(--fg2); cursor:default; opacity:1;}
.rs-card.is-locked .rs-card__body .rs-swatch,.rs-card.is-locked .rs-card__body .rs-btn{pointer-events:none; opacity:.55;}

.rs-drawer{position:fixed; top:0; right:0; height:100vh; width:440px; max-width:100%; background:var(--surface);
  border-left:1px solid var(--border); box-shadow:var(--shadow-lg); z-index:100; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .24s var(--ease);}
.rs-drawer.is-open{transform:none;}
.rs-drawer__head{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border);}
.rs-drawer__head h3{font-size:16px; font-weight:600; flex:1 1 auto;}
.rs-drawer__body{flex:1 1 auto; overflow-y:auto; padding:20px;}
.rs-drawer__foot{padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:10px;}

.rs-toasts{position:fixed; bottom:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px; width:340px; max-width:calc(100vw - 40px);}
.rs-toast{display:flex; align-items:flex-start; gap:11px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:13px 14px; position:relative; overflow:hidden;}
/* toasts carry a darker tonal border than alerts — they float over content */
.rs-toast.success{background:var(--success-soft); border-color:color-mix(in srgb, var(--success) 55%, var(--success-border));}
.rs-toast.warning{background:var(--warning-soft); border-color:color-mix(in srgb, var(--warning) 55%, var(--warning-border));}
.rs-toast.danger{background:var(--danger-soft); border-color:color-mix(in srgb, var(--danger) 55%, var(--danger-border));}
.rs-toast .rs-toast__ic{flex:none; width:30px; height:30px; padding:6.5px; box-sizing:border-box; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border); color:var(--accent); margin-top:0;}
.rs-toast.success .rs-toast__ic{color:var(--success); border-color:var(--success-border);}
.rs-toast.danger .rs-toast__ic{color:var(--danger); border-color:var(--danger-border);}
.rs-toast.warning .rs-toast__ic{color:var(--warning); border-color:var(--warning-border);}
.rs-toast__progress{position:absolute; left:0; bottom:0; height:2px; background:var(--accent); opacity:.55;}
.rs-toast.success .rs-toast__progress{background:var(--success);}
.rs-toast.warning .rs-toast__progress{background:var(--warning);}
.rs-toast.danger .rs-toast__progress{background:var(--danger);}
.rs-toast__body{flex:1 1 auto; min-width:0;}
.rs-toast__body b{font-size:13px; font-weight:600; display:block;}
.rs-toast__body p{font-size:12.5px; color:var(--fg2); margin-top:2px;}

.rs-menu{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:4px 0; min-width:184px;}
.rs-menu__item{display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:0; font-size:13px; color:var(--fg); cursor:pointer; white-space:nowrap;}
.rs-menu__item:hover{background:var(--surface-2);}
.rs-menu__item .rs-ic{width:15px; height:15px; color:var(--fg3); flex:none;}
.rs-menu__item.danger{color:var(--danger);} .rs-menu__item.danger .rs-ic{color:var(--danger);}
.rs-menu__item.danger:hover{background:var(--danger-soft);}
.rs-menu__item:focus-visible{outline:none; box-shadow:inset 0 0 0 3px var(--ring);}
.rs-menu__sep{height:1px; background:var(--border); margin:4px 0;}

/* =========================================================
   12 · ALERTS / EMPTY STATES
   ========================================================= */
.rs-alert{display:flex; align-items:flex-start; gap:12px; padding:13px 15px; border-radius:var(--r-lg);
  border:1px solid var(--border); background:var(--surface-2); font-size:13px; position:relative; overflow:hidden;}
.rs-alert .rs-alert__ic{flex:none; width:32px; height:32px; padding:7px; box-sizing:border-box; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border); color:var(--fg2); margin-top:0;}
.rs-alert__body{padding-top:1px;}
.rs-alert__body b{font-weight:600; display:block; margin-bottom:2px;}
.rs-alert__body p{color:var(--fg2);}
.rs-alert__actions{display:flex; gap:8px; margin-top:9px;}
.rs-alert--info{background:var(--info-soft); border-color:var(--info-border);}
.rs-alert--info .rs-alert__ic, .rs-alert--info .rs-alert .rs-alert__ic{color:var(--info); border-color:var(--info-border);}
.rs-alert--success{background:var(--success-soft); border-color:var(--success-border);}
.rs-alert--success .rs-alert__ic{color:var(--success); border-color:var(--success-border);}
.rs-alert--warning{background:var(--warning-soft); border-color:var(--warning-border);}
.rs-alert--warning .rs-alert__ic{color:var(--warning); border-color:var(--warning-border);}
.rs-alert--danger{background:var(--danger-soft); border-color:var(--danger-border);}
.rs-alert--danger .rs-alert__ic{color:var(--danger); border-color:var(--danger-border);}

/* custom dropdown (branded select — no native OS menu) */
.rs-selectbox{position:relative; display:inline-flex; flex-direction:column; min-width:0; width:100%;}
.rs-selectbox__btn{display:flex; align-items:center; gap:8px; width:100%; height:var(--ctl-h,34px); padding:0 10px;
  font:inherit; font-size:var(--fs,13px); text-align:left; color:var(--fg); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r-md); cursor:pointer;
  transition:border-color .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease);}
.rs-selectbox__btn:hover{background:var(--surface-2);}
.rs-selectbox__btn:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);}
.rs-selectbox.is-open .rs-selectbox__btn{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);}
.rs-selectbox__val{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rs-selectbox__val.is-placeholder{color:var(--fg3);}
.rs-selectbox__btn > .rs-ic{flex:none; width:15px; height:15px; color:var(--fg3); transition:transform .15s var(--ease);}
.rs-selectbox.is-open .rs-selectbox__btn > .rs-ic.rs-selectbox__chev{transform:rotate(180deg);}
.rs-selectbox__btn:disabled{background:var(--surface-3); color:var(--fg3); cursor:default;}
.rs-selectbox__menu{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60; padding:4px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  max-height:248px; overflow:auto; opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .14s var(--ease), transform .14s var(--ease);}
.rs-selectbox.is-open .rs-selectbox__menu{opacity:1; transform:none; pointer-events:auto;}
.rs-selectbox__opt{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:var(--r-sm);
  font-size:var(--fs,13px); color:var(--fg); cursor:pointer;}
.rs-selectbox__opt:hover, .rs-selectbox__opt.is-hl{background:var(--surface-2);}
.rs-selectbox__opt.is-selected{background:var(--accent-soft); color:var(--accent); font-weight:600;}
.rs-selectbox__opt .rs-ic{flex:none; width:15px; height:15px; color:var(--fg3);}
.rs-selectbox__opt.is-selected .rs-ic{color:var(--accent);}
.rs-selectbox__optmeta{flex:1 1 auto; min-width:0;}
.rs-selectbox__optmeta small{display:block; font-size:11px; font-weight:400; color:var(--fg3);}
.rs-selectbox__opt .rs-selectbox__check{margin-left:auto; opacity:0;}
.rs-selectbox__opt.is-selected .rs-selectbox__check{opacity:1;}

.rs-empty{text-align:center; padding:48px 24px; color:var(--fg2);}
.rs-empty__ic{width:46px; height:46px; border-radius:var(--r-lg); background:var(--surface-3); color:var(--fg3);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px;}
.rs-empty__ic .rs-ic{width:24px; height:24px;}
.rs-empty h4{font-size:15px; font-weight:600; color:var(--fg); margin-bottom:5px;}
.rs-empty p{font-size:13px; max-width:340px; margin:0 auto 16px;}

/* =========================================================
   13 · MISC UTILITIES
   ========================================================= */
.rs-row{display:flex; align-items:center; gap:10px;}
.rs-col{display:flex; flex-direction:column;}
.rs-wrap{flex-wrap:wrap;}
.rs-grow{flex:1 1 auto;}
.rs-gap-sm{gap:6px;} .rs-gap-lg{gap:16px;}
.rs-grid{display:grid; gap:var(--gap,16px);}
.rs-divider{height:1px; background:var(--border); margin:18px 0;}
.rs-kbd{font-family:var(--rs-font-mono); font-size:11px; border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:4px; padding:1px 5px; color:var(--fg2); background:var(--surface);}
.rs-progress{height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden;}
.rs-progress__bar{height:100%; background:var(--accent); border-radius:99px;}

/* color swatch (branding picker) */
.rs-swatch{width:30px; height:30px; border-radius:var(--r-md); background:var(--c); cursor:pointer; position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); transition:transform .1s;}
.rs-swatch:hover{transform:scale(1.08);}
.rs-swatch.is-active{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--c);}
.rs-swatch.is-active::after{content:""; position:absolute; inset:0; display:flex;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center no-repeat;}

/* activity feed (legacy — renamed from .rs-tl to avoid clashing with the Timeline component) */
.rs-timeline{display:flex; flex-direction:column;}
.rs-feed{display:flex; gap:14px; padding-bottom:18px; position:relative;}
.rs-feed::before{content:""; position:absolute; left:5px; top:14px; bottom:-4px; width:2px; background:var(--border);}
.rs-feed:last-child{padding-bottom:0;}
.rs-feed:last-child::before{display:none;}
.rs-feed__dot{width:12px; height:12px; border-radius:50%; background:var(--border-strong); flex:none; margin-top:2px;
  border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border-strong); position:relative; z-index:1;}
.rs-feed__body{font-size:13px; color:var(--fg2); line-height:1.5;}
.rs-feed__body b{color:var(--fg); font-weight:600;}
.rs-dot{width:7px; height:7px; border-radius:50%; flex:none;}
.rs-dot.online{background:var(--success);} .rs-dot.idle{background:var(--warning);} .rs-dot.off{background:var(--fg3);}
.rs-ic{display:inline-block; vertical-align:middle; width:16px; height:16px; flex:none;}
.rs-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* icon button (topbar / inline) */
.rs-iconbtn{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:var(--r-md); border:1px solid transparent; background:transparent; color:var(--fg2);
  cursor:pointer; flex:none; transition:background .12s, color .12s, border-color .12s;}
.rs-iconbtn:hover{background:var(--surface-2); color:var(--fg);}
.rs-iconbtn .rs-ic{width:18px; height:18px; stroke-width:1.6;}

/* popover wrapper for menus */
.rs-pop{position:relative; display:inline-flex;}
.rs-pop > .rs-menu{position:absolute; top:calc(100% + 5px); right:0; z-index:60; opacity:0; transform:translateY(-4px);
  pointer-events:none; transition:opacity .13s var(--ease), transform .13s var(--ease);}
.rs-pop.is-open > .rs-menu{opacity:1; transform:none; pointer-events:auto;}
.rs-pop--left > .rs-menu{right:auto; left:0;}

/* tiny inline help / kbd hint row */
.rs-fieldrow{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.rs-formstack{display:flex; flex-direction:column; gap:16px;}

/* =========================================================
   14 · EMAIL VERIFICATION (banner / locks / OTP)
   ========================================================= */
/* persistent banner under the topbar */
.rs-verifybar{position:sticky; top:var(--topbar-h); z-index:15;
  display:flex; align-items:center; gap:14px; padding:11px 22px;
  background:var(--warning-soft); border-bottom:1px solid var(--warning-border);}
.rs-verifybar__ic{flex:none; width:34px; height:34px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--warning) 18%, transparent); color:var(--warning);}
.rs-verifybar__ic .rs-ic{width:18px; height:18px;}
.rs-verifybar__body{flex:1 1 auto; min-width:0; font-size:12.5px; line-height:1.45;}
.rs-verifybar__body b{font-size:13px; font-weight:600; color:var(--fg); display:block;}
.rs-verifybar__body p{color:var(--fg2); margin-top:1px;}
.rs-verifybar__body strong{color:var(--fg); font-weight:600;}
.rs-verifybar__actions{display:flex; align-items:center; gap:8px; flex:none;}
@media (max-width:720px){
  .rs-verifybar{flex-wrap:wrap;}
  .rs-verifybar__actions{width:100%; padding-left:48px;}
}

/* gated sidebar items */
.rs-nav__lock{margin-left:auto; display:inline-flex; align-items:center; color:var(--fg3);}
.rs-nav__lock .rs-ic{width:14px; height:14px;}
.rs-nav__item.is-locked{color:var(--fg3);}
.rs-nav__item.is-locked > .rs-ic:first-child{opacity:.65;}
.is-collapsed .rs-nav__lock{display:none;}

/* full-page lock state */
.rs-lockstate{display:flex; align-items:center; justify-content:center; min-height:62vh; padding:36px 0;}
.rs-lockpanel{max-width:480px; width:100%; text-align:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:40px 38px;}
.rs-lockpanel__ic{width:62px; height:62px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--warning-soft); color:var(--warning); border:1px solid var(--warning-border);}
.rs-lockpanel__ic .rs-ic{width:28px; height:28px;}
.rs-lockpanel h2{font-size:20px; font-weight:650; letter-spacing:-.01em; color:var(--fg);}
.rs-lockpanel p{font-size:13.5px; color:var(--fg2); margin-top:9px; line-height:1.55;}
.rs-lockpanel__email{display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  padding:7px 13px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--border);
  font-size:12.5px; font-weight:550; color:var(--fg);}
.rs-lockpanel__email .rs-ic{width:14px; height:14px; color:var(--fg3);}
.rs-lockpanel__actions{display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap;}
.rs-lockpanel__feat{margin-top:24px; padding-top:20px; border-top:1px solid var(--border); text-align:left;}
.rs-lockpanel__feat .rs-eyebrow{margin-bottom:10px;}
.rs-lockfeat{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--fg2); padding:4px 0;}
.rs-lockfeat .rs-ic{width:14px; height:14px; color:var(--fg3); flex:none;}

/* inline lock card (within gated org tabs) */
.rs-lockcard{display:flex; align-items:center; gap:16px; padding:20px 22px;
  background:var(--warning-soft); border:1px solid var(--warning-border); border-radius:var(--r-lg);}
.rs-lockcard__ic{flex:none; width:44px; height:44px; border-radius:var(--r-md);
  background:color-mix(in srgb, var(--warning) 16%, transparent); color:var(--warning);
  display:flex; align-items:center; justify-content:center;}
.rs-lockcard__ic .rs-ic{width:22px; height:22px;}
.rs-lockcard__body{flex:1 1 auto; min-width:0;}
.rs-lockcard__body b{font-size:14px; font-weight:600; color:var(--fg); display:block;}
.rs-lockcard__body p{font-size:12.5px; color:var(--fg2); margin-top:3px;}

/* 6-digit code (OTP) entry */
.rs-otp{display:flex; gap:10px; justify-content:center; margin:8px 0 6px;}
.rs-otp input{width:46px; height:54px; text-align:center; font-size:22px; font-weight:600;
  border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--surface); color:var(--fg);
  font-variant-numeric:tabular-nums; transition:border-color .13s, box-shadow .13s;}
.rs-otp input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);}
.rs-otp__hint{text-align:center; font-size:12.5px; color:var(--fg2); margin-top:10px;}
.rs-otp__hint .auth-link{color:var(--accent); cursor:pointer; font-weight:550;}
.rs-otp__hint .auth-link:hover{text-decoration:underline;}

/* lock glyph appended to a gated tab */
.rs-tablock{display:inline-flex; align-items:center; margin-left:6px; color:var(--fg3);}
.rs-tablock .rs-ic{width:13px; height:13px;}