/*
 * RaffsSync — styles.vNEXT.css (DROP-IN CLEAN REORG)
 * Version: vNEXT-clean-2026.02.10a
 * Date: 2026-02-10
 * Time: 21:15 WITA
 *
 * Notes (vNEXT-clean-2026.02.10a):
 * - DEDUPE: Removed duplicate blocks for .grid / .grid.four, link-cards, rs-status-list, and exit-override.
 * - FIX: Removed broken stray comment opener that could confuse maintainers.
 * - KEEP: All existing selectors preserved to avoid regressions.
 * - STANDARD: One authoritative “Grid & Card Rhythm” section lives at EOF only.
 *
 * Design intent:
 * - Mobile-first grid that scales cleanly to desktop.
 * - Uniform card surfaces across legacy .card and canonical .rs-card.
 * - Full-card clickable “link-card” pattern that remains accessible + doesn’t break inner controls.
 */

/* =========================================================
   Hub Navigation (rs-hubnav)
   Canonical, token-driven, fallback-safe
   ========================================================= */

/* ---------- Subnav window (renderer-owned wrapper) ---------- */

.rs-subnav-window{
  margin: 0 0 12px 0;
  border: 1px solid var(--rs-border-1, rgba(231,238,252,.18));
  border-radius: var(--rs-radius-card, 16px);
  background: var(--rs-surface-2, rgba(255,255,255,.06));
  box-shadow: var(--rs-shadow-1, 0 8px 24px rgba(0,0,0,.22));
}

.rs-subnav-window__inner{
  padding: 8px 10px;
}

/* Density hooks (future styles.php control) */
.rs-subnav-window.is-tight .rs-subnav-window__inner{ padding: 6px 8px; }
.rs-subnav-window.pad-tight  .rs-subnav-window__inner{ padding: 6px 8px; }
.rs-subnav-window.pad-normal .rs-subnav-window__inner{ padding: 8px 10px; }
.rs-subnav-window.pad-roomy  .rs-subnav-window__inner{ padding: 12px 14px; }

/* ---------- Hubnav layout ---------- */

.rs-hubnav{ margin: 0; }

.rs-hubnav__tray{
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.rs-hubnav__tray::-webkit-scrollbar{ display:none; }

.rs-hubnav__row{
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- Hubnav pills (canonical look) ---------- */

.rs-hubnav-item,
.rs-hubnav__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  text-decoration: none;
  white-space: nowrap;
  user-select: none;

  background: rgba(255,255,255,.06);
  color: var(--rs-text-1, #fff);
  border: 1px solid var(--rs-border-1, rgba(255,255,255,.16));

  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.rs-hubnav-item:hover,
.rs-hubnav__item:hover{
  background: rgba(255,255,255,.10);
}

/* Active state */
.rs-hubnav-item.is-active,
.rs-hubnav-item[aria-current="page"],
.rs-hubnav__item.is-active,
.rs-hubnav__item[aria-current="page"]{
  background: color-mix(
    in oklab,
    var(--accent, #38bdf8) 22%,
    rgba(255,255,255,.06)
  );
  border-color: color-mix(
    in oklab,
    var(--accent, #38bdf8) 38%,
    rgba(255,255,255,.16)
  );
  color: var(--rs-text-1, #fff);
  font-weight: 600;
}

/* Disabled */
.rs-hubnav-item[aria-disabled="true"],
.rs-hubnav__item[aria-disabled="true"]{
  opacity: .45;
  pointer-events: none;
}

/* ---------- Optional chips ---------- */

.rs-hubnav-chip,
.rs-hubnav__chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;

  font-size: 0.7rem;
  line-height: 1;

  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: var(--rs-text-2, #cbd5e1);
  border: 1px solid var(--rs-border-1, rgba(255,255,255,.16));
}

/* =========================================================
   Form micro-utilities used by admin editors
   ========================================================= */

.input-row,
.rs-color-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

.input-row .input,
.rs-color-row .input,
.input-row .rs-color-hex,
.rs-color-row .rs-color-hex{
  flex: 1 1 auto;
  min-width: 0;
}

input[type="color"].rs-color-pick{
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
}

/* vNEXT palette preview – scoped CTA (no legacy impact) */
.btn.cta.rs-cta{
  background: var(--accent-2);
  border-color: var(--accent-2);
  box-shadow:
    0 0 0 1px var(--accent-glow) inset,
    0 8px 18px 0 var(--accent-glow);
}
.btn.cta.rs-cta:hover{
  background: var(--accent-3);
  border-color: var(--accent-3);
}

/* Utility: right-aligned header actions (pills/buttons) */
.row-actions-end{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:flex-start;
  width:100%;
}

/* =========================================================
   Grid primitives (mobile-first)
   NOTE: authoritatively overridden at EOF “Grid & Card Rhythm”
   ========================================================= */

.grid{
  display: grid;
  gap: 16px; /* base gap, refined at EOF */
}

@media (min-width: 860px){
  .grid.two{ grid-template-columns: 1fr 1fr; }
}

/* Optional layout helpers used in some pages */
.grid.three > .col-span-2{ grid-column: span 2; }
@media (max-width: 900px){
  .grid.three > .col-span-2{ grid-column: auto; }
}

/* =========================================================
   Cards / Surfaces
   ========================================================= */

/* Canonical surface: .rs-card */
.rs-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--rs-radius-card, 16px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 30px rgba(0,0,0,0.35);
}

/* Inputs inside rs-card should read as “field wells” */
.rs-card input,
.rs-card select,
.rs-card textarea{
  background: rgba(0,0,0,0.35);
}

/* Legacy surface: .card (kept for back-compat) */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--rs-border-1, rgba(255,255,255,.10));
  border-radius: var(--rs-radius-card, 16px);
  box-shadow: var(--rs-shadow-1, 0 10px 30px rgba(0,0,0,.35));
  padding: 14px;
  margin-top: 10px; /* neutralised inside grids at EOF */
  min-width: 0;
}
.card.full{ width:100%; }

/* =========================================================
   Spot images inside cards (global pattern)
   ========================================================= */

.card img.spot,
.rs-card img.spot,
.card .spot,
.rs-card .spot{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;

  background: rgba(0,0,0,.12);
}

.card img.spot{ margin: 0 0 12px 0; }
.card h3{ margin-top: 0; }

/* =========================================================
   Link Cards (full-card clickable) — canonical
   Pattern:
   <article class="rs-card link-card">
     <a class="card-link" href="...">Open</a>
     ...
   </article>
   ========================================================= */

.rs-card.link-card,
.card.link-card,
.link-card{
  position: relative;
  cursor: pointer;
}

/* Overlay link captures click */
.rs-card.link-card > .card-link,
.card.link-card > .card-link,
.link-card > .card-link{
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  text-decoration: none;
  outline: none;

  /* visually hidden label, but keep anchor for accessibility */
  color: transparent;
}

/* Visible content sits under overlay but above card background */
.rs-card.link-card > *:not(.card-link),
.card.link-card > *:not(.card-link),
.link-card > *:not(.card-link){
  position: relative;
  z-index: 2;
}

/* If there are real controls inside, keep them clickable */
.rs-card.link-card a:not(.card-link),
.rs-card.link-card button,
.rs-card.link-card input,
.rs-card.link-card select,
.rs-card.link-card textarea,
.card.link-card a:not(.card-link),
.card.link-card button,
.card.link-card input,
.card.link-card select,
.card.link-card textarea,
.link-card a:not(.card-link),
.link-card button,
.link-card input,
.link-card select,
.link-card textarea{
  position: relative;
  z-index: 6;
}

/* Hover/focus polish */
.rs-card.link-card:hover,
.card.link-card:hover,
.link-card:hover{
  transform: translateY(-1px);
}
.rs-card.link-card:focus-within,
.card.link-card:focus-within,
.link-card:focus-within{
  outline: 2px solid var(--accent-2, rgba(0,0,0,.25));
  outline-offset: 2px;
  border-radius: inherit;
}
.rs-card.link-card:hover h3,
.card.link-card:hover h3,
.link-card:hover h3{
  text-decoration: underline;
}

/* =========================================================
   Header stability + floating UI safe space
   ========================================================= */

/* Reserve safe-space so footer never gets covered by fixed UI */
.rs-page,
.site-wrap,
main{
  padding-bottom: 76px;
}

/* Supports either .rs-header or .site-header patterns */
.rs-header,
.site-header{
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | nav | controls */
  align-items: center;
  gap: 14px;
}

/* Right-side controls cluster width clamp */
.rs-header-controls,
.header-controls{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 420px;
}

/* Venue chip truncation */
.rs-venue,
.venue-chip,
.header-venue{
  max-width: 240px;
  min-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rs-venue span,
.venue-chip span,
.header-venue .label{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Responsive: stack controls under nav */
@media (max-width: 980px){
  .rs-header,
  .site-header{
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .rs-header-controls,
  .header-controls{
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .rs-venue,
  .venue-chip,
  .header-venue{
    max-width: 100%;
    min-width: 0;
  }
}

/* --- Admin lane nav: ensure dropdown overlays hero/cards --- */
.rs-admin-lane-nav,
.rs-admin-lane-nav .card {
  position: relative;
  z-index: 50;
}

.rs-admin-lane-nav .rs-dropdown,
.rs-admin-lane-nav .rs-menu,
.rs-admin-lane-nav .dropdown,
.rs-admin-lane-nav .dropdown-menu {
  position: relative;
  z-index: 2000;
}

/* Header: stop auth cluster pushing nav (legacy topbar layout) */
.topbar-inner{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; /* brand | nav | auth */
  align-items:center;
}
.topbar .nav{ min-width:0; }
.topbar .nav-link{ white-space:nowrap; }

.topbar .nav-auth{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
  max-width:42%;
}
.topbar .nav-auth > *{ min-width:0; }

.topbar .tenant-chip,
.topbar .nav-auth .role-chip{
  max-width:18rem;
}

.topbar .chip-label{
  display:inline-block;
  max-width:14ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:bottom;
}

.brand-logo-badge {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-image: url('/sync/assets/brand/atlas/atlas-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* =========================================================
   Context Pill (Header) + Dropdown (Mobile-safe)
   ========================================================= */

.context-dd > summary.context-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 40px;
  padding: 0 14px;
  border-radius: 999px;

  white-space: nowrap;
  min-width: 260px;
  max-width: 420px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.context-dd > summary.context-pill:hover{
  background: rgba(255,255,255,.08);
}
.context-dd[open] > summary.context-pill{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 30px rgba(0,0,0,.35);
}

.context-dd > summary.context-pill a,
.context-dd > summary.context-pill span,
.context-dd > summary.context-pill strong{
  white-space: nowrap;
}

.context-dd > summary.context-pill > :first-child{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.context-dd > summary.context-pill .role-badge,
.context-dd > summary.context-pill .imp,
.context-dd > summary.context-pill .caret,
.context-dd > summary.context-pill svg{
  flex: 0 0 auto;
}

/* Dropdown panel sizing + surface */
.context-panel{
  width: min(360px, calc(100vw - 24px));
  background: rgba(15,15,18,.96);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  border-radius: 14px;
}

/* Hide noisy headings inside THIS panel only */
.context-panel .auth-dd-h{ display:none; }

/* Tighten groups */
.context-panel .auth-dd-group{ padding: 8px 10px; }
.context-panel .auth-dd-meta{ margin: 0 0 6px 0; }

/* Remove marker bullets / pseudo decoration */
.context-panel .auth-dd-item::marker{ content: ""; }
.context-panel .auth-dd-item::before,
.context-panel .auth-dd-item::after{ content: none !important; }

/* Menu items */
.context-panel .auth-dd-item{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.context-panel .auth-dd-item:hover{
  background: rgba(255,255,255,.06);
}

/* Role badge base */
.context-pill .role-badge{
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}

/* Scrollable venue list if it gets long */
.context-panel .auth-dd-group{
  max-height: 50vh;
  overflow: auto;
}

/* =========================================================
   Context Pill — Role badge colours (authoritative)
   ========================================================= */

.context-pill .role-badge{
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}

.context-pill .role-customer{
  background: rgba(59,130,246,.18);
  border: 1px solid rgba(59,130,246,.45);
  color: #93c5fd;
  box-shadow: 0 0 12px rgba(59,130,246,.25);
}

.context-pill .role-admin{
  background: rgba(245,158,11,.18);
  border: 1px solid rgba(245,158,11,.45);
  color: #fcd34d;
  box-shadow: 0 0 12px rgba(245,158,11,.25);
}

.context-pill .role-override{
  background: rgba(239,68,68,.20);
  border: 1px solid rgba(239,68,68,.50);
  color: #fecaca;
  box-shadow: 0 0 14px rgba(239,68,68,.35);
}

/* Future */
.context-pill .role-partner{
  background: rgba(168,85,247,.18);
  border: 1px solid rgba(168,85,247,.45);
  color: #e9d5ff;
}
.context-pill .role-developer{
  background: rgba(16,185,129,.18);
  border: 1px solid rgba(16,185,129,.45);
  color: #a7f3d0;
}

/* =========================================================
   Context Pill — Lane surface glow (gated awareness)
   ========================================================= */

.context-dd.lane-customer > summary.context-pill{
  background: linear-gradient(180deg, rgba(59,130,246,.10), rgba(59,130,246,.04));
  border-color: rgba(59,130,246,.35);
  box-shadow:
    0 0 0 1px rgba(59,130,246,.18) inset,
    0 8px 24px rgba(59,130,246,.20);
}

.context-dd.lane-admin > summary.context-pill{
  background: linear-gradient(180deg, rgba(245,158,11,.12), rgba(245,158,11,.05));
  border-color: rgba(245,158,11,.40);
  box-shadow:
    0 0 0 1px rgba(245,158,11,.20) inset,
    0 8px 24px rgba(245,158,11,.22);
}

.context-dd.lane-override > summary.context-pill{
  background: linear-gradient(180deg, rgba(239,68,68,.14), rgba(239,68,68,.06));
  border-color: rgba(239,68,68,.45);
  box-shadow:
    0 0 0 1px rgba(239,68,68,.22) inset,
    0 8px 26px rgba(239,68,68,.30);
}

.context-dd.lane-affiliate > summary.context-pill{
  background: linear-gradient(180deg, rgba(99,102,241,.12), rgba(99,102,241,.05));
  border-color: rgba(99,102,241,.40);
  box-shadow:
    0 0 0 1px rgba(99,102,241,.20) inset,
    0 8px 24px rgba(99,102,241,.22);
}

/* Future */
.context-dd.lane-partner > summary.context-pill{
  background: linear-gradient(180deg, rgba(168,85,247,.12), rgba(168,85,247,.05));
  border-color: rgba(168,85,247,.40);
}
.context-dd.lane-developer > summary.context-pill{
  background: linear-gradient(180deg, rgba(16,185,129,.12), rgba(16,185,129,.05));
  border-color: rgba(16,185,129,.40);
}

/* =========================================================
   Header Context Dropdown — match Subnav Button Style
   ========================================================= */

.auth-dd-panel{ padding: 10px; }

.auth-dd-item{
  display: block;
  width: 100%;
  padding: 10px 14px;

  border-radius: 999px;
  margin-bottom: 6px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);

  color: var(--text-primary);
  font-weight: 500;
  text-decoration: none;

  transition: background .15s ease, border-color .15s ease;
}

.auth-dd-item:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}

.auth-dd-item:active{
  background: rgba(255,255,255,0.12);
}

/* Logout (danger) */
.auth-dd-item.logout{
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.35);
  color: #ef4444;
  font-weight: 600;
}
.auth-dd-item.logout:hover{
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.55);
  color: #fecaca;
}

/* Exit override (warning, must NOT read as danger/red) */
.auth-dd-panel .auth-dd-item.exit-override{
  background: linear-gradient(180deg, rgba(251,191,36,.28), rgba(251,191,36,.14));
  border-color: rgba(251,191,36,.70);
  color: rgba(255,245,214,.98);
  font-weight: 700;
  box-shadow:
    0 0 0 1px rgba(251,191,36,.22) inset,
    0 8px 22px rgba(251,191,36,.10);
}
.auth-dd-panel .auth-dd-item.exit-override:hover{
  background: linear-gradient(180deg, rgba(251,191,36,.38), rgba(251,191,36,.20));
  border-color: rgba(251,191,36,.88);
  color: rgba(255,251,235,.98);
}

/* Logout in hub/subnav menus (match danger pill) */
.rs-subnav-window a.logout,
.rs-hubnav a.logout{
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.35);
  color: #ef4444;
  font-weight: 600;
  text-decoration: none;
}
.rs-subnav-window a.logout:hover,
.rs-hubnav a.logout:hover{
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.55);
  color: #fecaca;
}

/* =========================================================
   Status lists (single canonical block)
   ========================================================= */

.rs-status-list{
  list-style: none;
  padding: 0;
  margin: .5rem 0 .75rem;
}
.rs-status-list li{
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  margin: .15rem 0;
}
.rs-status-list li.ok{ color: #22c55e; }
.rs-status-list li.warn{ color: #eab308; }
.rs-status-list li.info{ color: #38bdf8; }
.rs-status-list li.muted{ color: #9ca3af; }

/* =========================================================
   Media card helpers
   ========================================================= */

/* Full-bleed media card (hero-style image inside rs-card) */
.rs-card-media{ padding: 0; }
.rs-card-media .docs-figure{ margin: 0; }
.rs-card-media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Inset media inside a card: small gap, nested radius, uniform look */
.rs-media-inset{
  padding: 1%;
  border-radius: var(--radius-lg);
}
.rs-media-inset img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-lg) - 6px);
}

/* =========================================================
   vNEXT Primitive Ownership Layer (Back-compat)
   ========================================================= */

.muted{
  color: var(--rs-text-2, rgba(203,213,225,.88));
}

/* Legacy hero helpers */
.hero{ padding: 14px 0 10px; }
.hero h1{
  margin: 0 0 6px;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.02em;
}
.hero p{
  margin: 0;
  color: var(--rs-text-2, rgba(203,213,225,.88));
}

/* Notices */
.notice{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--rs-text-1, rgba(255,255,255,.92));
}
.notice + .notice{ margin-top: 10px; }
.notice strong{ font-weight: 750; }
.notice p{ margin: 8px 0 0; }
.notice ul{ margin: 8px 0 0 18px; }
.notice code{
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
}
.notice.info{
  border-color: rgba(59,130,246,.25);
  background: rgba(59,130,246,.10);
}
.notice.success,
.notice.ok{
  border-color: rgba(34,197,94,.22);
  background: rgba(34,197,94,.10);
}
.notice.warning{
  border-color: rgba(234,179,8,.22);
  background: rgba(234,179,8,.10);
}
.notice.error,
.notice.danger{
  border-color: rgba(248,113,113,.22);
  background: rgba(248,113,113,.10);
}

/* Forms */
.form-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: start;
}
@media (max-width: 860px){
  .form-grid{ grid-template-columns: 1fr; }
}

.field{
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 750;
  color: rgba(255,255,255,.88);
  font-size: 13px;
}
.field label{
  font-weight: 750;
  color: rgba(255,255,255,.88);
}

.actions{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* =========================================================
   vNEXT Doc / Content Sections
   ========================================================= */

.rs-doc{ line-height: 1.6; }
.rs-doc strong{ font-weight: 600; }
.rs-doc p{ margin: 8px 0; }
.rs-doc ul{ margin: 8px 0 12px 18px; }
.rs-doc li{ margin: 4px 0; }

.rs-doc .rs-sep{
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.14), transparent);
}

/* ==========================================================
   Monitoring & Media Utilities
   ========================================================== */

.rs-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

.rs-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.rs-localnav{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.rs-localnav .is-active{
  border-color: rgba(120, 180, 255, 0.35);
  background: rgba(120, 180, 255, 0.10);
}

.videoBox{
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #000;
}
.videoBox video{
  width: 100%;
  height: auto;
  display: block;
  max-height: 72vh;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  white-space: pre-wrap;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px;
  border-radius: 12px;
}

/* =========================================================
   Flash Alerts (Header-owned)
   ========================================================= */

.alert{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  margin: 12px 0;
}
.alert-success{
  border-color: rgba(46, 204, 113, .35);
  background: rgba(46, 204, 113, .14);
}
.alert-danger{
  border-color: rgba(231, 76, 60, .35);
  background: rgba(231, 76, 60, .14);
}
.alert-warning{
  border-color: rgba(241, 196, 15, .35);
  background: rgba(241, 196, 15, .14);
}
.alert-info{
  border-color: rgba(52, 152, 219, .35);
  background: rgba(52, 152, 219, .14);
}

/* =========================================================
   Grid helper: 4-up (single canonical block)
   ========================================================= */

.grid.four{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px; /* refined at EOF */
}
@media (max-width: 1100px){
  .grid.four{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .grid.four{ grid-template-columns:1fr; }
}

/* =========================================================
   vNEXT AUTHORITATIVE OVERRIDES — Grid & Card Rhythm
   Keep this at the VERY END of styles.vNEXT.css
   ========================================================= */

/* Grid: consistent gaps everywhere */
.grid{ gap:14px; }
@media (max-width:980px){ .grid{ gap:12px; } }
@media (max-width:620px){ .grid{ gap:10px; } }

/* 4-up helper: desktop 4, tablet 2, mobile 1 */
.grid.four{ gap:14px; }
@media (max-width:1100px){ .grid.four{ gap:12px; } }
@media (max-width:640px){ .grid.four{ gap:10px; } }

/* Prevent “skinny column / vertical-wrap” inside grids */
.grid > *{ min-width:0; }
.rs-card, .card{ overflow-wrap:anywhere; }

/* Inside a grid, legacy .card must NOT add extra top margin (causes skew) */
.grid .card{ margin-top:0; }

/* Unify legacy .card inside grids to match vNEXT surface */
.grid .card{
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
}

/* Optional: give link-cards a consistent height on desktop (premium feel) */
@media (min-width: 981px){
  .link-card{ min-height:180px; }
}

/* =========================================================
   RaffsSync — Plans Feature Matrix Layout Balance
   Purpose:
   - Prevent left-heavy table feel
   - Evenly distribute plan columns
   - Keep feature name readable but controlled width
   ========================================================= */

.rs-table[data-rs-feature-matrix] {
  table-layout: fixed;
  width: 100%;
}

.rs-table[data-rs-feature-matrix] th:first-child,
.rs-table[data-rs-feature-matrix] td:first-child {
  width: 40%;
}

.rs-table[data-rs-feature-matrix] th:not(:first-child),
.rs-table[data-rs-feature-matrix] td:not(:first-child) {
  width: calc(60% / 4); /* adjust if you change plan count */
  text-align: center;
}

/* Plans: Feature matrix spacing + alignment (replaces inline styles) */
.compare-card .rs-compare-title { margin: 0 0 10px 0; }
.compare-card .rs-compare-sub   { margin: 0 0 14px 0; }
.compare-card .rs-compare-empty { margin: 0; }
.compare-card .rs-compare-tip   { margin-top: 4px; }

.compare-table th.rs-compare-left { text-align: left; }
.compare-table th.rs-compare-center,
.compare-table td.rs-compare-center { text-align: center; }

/* Purchase → Plan Envelopes: compact table inputs (avoid giant fields) */
.rs-purchase-limits .rs-table td { vertical-align: middle; }

.rs-purchase-limits .rs-input.rs-input-num,
.rs-purchase-limits input.rs-input[type="number"]{
  padding: 8px 10px;
  height: 38px;
  min-height: 38px;
  line-height: 20px;
  width: 120px;
  max-width: 140px;
  text-align: center;
}

.rs-purchase-limits .rs-table .rs-col-narrow { width: 140px; }
.rs-purchase-limits .rs-small { font-size: 12px; }
/* Purchase → Plan Envelopes: compact plan selector */
.rs-purchase-limits select.rs-input{
  padding: 8px 12px;
  height: 42px;
  min-height: 42px;
  line-height: 22px;
}

/* =========================================================
   vNEXT — Surface System (Page + Header + Cards)
   Goal:
   - Cards sit “off the page” with dusty contrast
   - Thin dark warm border (brown-ish) + subtle lift shadow
   - Header gets its own surface + border so it doesn’t vanish
   ========================================================= */

:root{
  /* Page base */
  --rs-page-bg: #0b0a08;                 /* warm-black */
  --rs-page-vignette: rgba(56, 40, 18, .20);

  /* Surfaces */
  --rs-surface-card: rgba(255, 235, 200, .045);  /* dusty warm lift */
  --rs-surface-card-2: rgba(0, 0, 0, .22);       /* depth mix */
  --rs-surface-header: rgba(20, 16, 12, .72);    /* header bar */
  --rs-surface-header-2: rgba(0, 0, 0, .25);

  /* Borders (warm, thin, dark) */
  --rs-border-warm: rgba(140, 105, 55, .22);     /* “lighter brown” edge */
  --rs-border-cool: rgba(255,255,255,.08);       /* fallback */
  --rs-border-card: rgba(140, 105, 55, .22);

  /* Shadows */
  --rs-shadow-card:
    0 10px 28px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.05) inset;

  --rs-shadow-header:
    0 10px 30px rgba(0,0,0,.40);
}

/* Page background (safe: applies everywhere) */
body{
  background:
    radial-gradient(1000px 480px at 60% 10%, var(--rs-page-vignette), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.10)),
    var(--rs-page-bg);
}

/* Header gets a real surface again */
.topbar,
.rs-header,
.site-header{
  background: linear-gradient(
    180deg,
    var(--rs-surface-header),
    var(--rs-surface-header-2)
  );
  border-bottom: 1px solid var(--rs-border-warm);
  box-shadow: var(--rs-shadow-header);
  backdrop-filter: blur(10px);
}

/* Canonical card surface (apply to BOTH legacy + vNEXT cards) */
.rs-card,
.card{
  background: linear-gradient(
    180deg,
    var(--rs-surface-card),
    var(--rs-surface-card-2)
  );
  border: 1px solid var(--rs-border-card);
  box-shadow: var(--rs-shadow-card);
}

/* Optional: slightly stronger hover lift for “premium” feel (safe) */
.rs-card:hover,
.card:hover{
  transform: translateY(-1px);
}
/* =========================================================
   vNEXT — Canonical Media-in-Card Framing (Hero + Spot)
   Purpose:
   - Restore the visual difference between Hero image cards and Spot image cards
   - Image follows card radius with a small inset "buffer" (padding)
   - Works everywhere (public + dashboard/admin), no markup changes required
   ========================================================= */

:root{
  --rs-card-pad: 18px;
  --rs-media-inset: 10px;        /* the “buffer” you asked for */
  --rs-media-radius: 18px;       /* image radius (tracks card feel) */
}

/* Card padding (content breathing room) */
.rs-card,
.card{
  padding: var(--rs-card-pad);
}

/* Responsive card padding */
@media (min-width: 980px){
  :root{ --rs-card-pad: 20px; --rs-media-inset: 12px; }
}
@media (max-width: 620px){
  :root{ --rs-card-pad: 16px; --rs-media-inset: 10px; }
}

/* Reset first/last margins inside cards so content never “kisses” edges */
.rs-card > :first-child, .card > :first-child{ margin-top: 0; }
.rs-card > :last-child,  .card > :last-child{  margin-bottom: 0; }

/* ----- HERO IMAGE CARDS (1200x630) ----- */
/* Pattern you already use: .docs-figure inside a card */
.docs-figure{
  margin: 0;
}

/* Inset frame that matches card shape */
.docs-figure img{
  display: block;
  width: 100%;
  height: auto;

  /* “image inside card” look */
  border-radius: var(--rs-media-radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);

  /* The key: buffer between image and card edge */
  padding: 0;
}

/* If the hero image lives directly inside a card, add inset via the figure */
.rs-card .docs-figure,
.card .docs-figure{
  padding: var(--rs-media-inset);
  border-radius: calc(var(--rs-media-radius) + 6px);
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.08);
}

/* ----- SPOT IMAGES (1x1) inside cards ----- */
/* Works for: img.spot, .spot img, or existing spot containers */
img.spot,
.spot img,
.rs-card img.spot,
.card img.spot{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;

  border-radius: var(--rs-media-radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}

/* Optional wrapper (if you already use .rs-media-inset anywhere) */
.rs-media-inset{
  padding: var(--rs-media-inset);
  border-radius: calc(var(--rs-media-radius) + 6px);
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.08);
}
.rs-media-inset > img{
  border-radius: var(--rs-media-radius);
}

/* Keep text spacing consistent after media blocks */
.rs-card img.spot,
.card img.spot{
  margin: 0 0 12px 0;
}
/* =========================================================
   vNEXT — Canonical Card + Media System (ONE LOOK)
   - Identical styling for hero + spot (only aspect + grid differs)
   - Supports: full (1), 50% (2), 33% (3), 25% (4)
   - No per-page CSS, no markup changes required
   ========================================================= */

:root{
  --rs-gap: 14px;

  --rs-card-pad: 18px;       /* text padding */
  --rs-media-inset: 10px;    /* “buffer” between image and card edge */
  --rs-radius-card: 16px;
  --rs-radius-media: 14px;   /* slightly tighter than card feels premium */
  --rs-border-weak: rgba(255,255,255,.10);
  --rs-surface-inset: rgba(0,0,0,.14);
}

/* Card padding everywhere (text breathing room) */
.rs-card,
.card{
  padding: var(--rs-card-pad);
}

/* Responsive tuning */
@media (min-width: 980px){
  :root{ --rs-card-pad: 20px; --rs-media-inset: 12px; --rs-gap: 16px; }
}
@media (max-width: 620px){
  :root{ --rs-card-pad: 16px; --rs-media-inset: 10px; --rs-gap: 12px; }
}

/* Keep content from “sticking” to edges */
.rs-card > :first-child, .card > :first-child{ margin-top: 0; }
.rs-card > :last-child,  .card > :last-child{  margin-bottom: 0; }

/* -------------------------
   Grid system (1/2/3/4)
   ------------------------- */
.grid{ display:grid; gap: var(--rs-gap); }
.grid.one{ grid-template-columns: 1fr; }
.grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.four{ grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 1100px){
  .grid.three{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.four{  grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .grid.two, .grid.three, .grid.four{ grid-template-columns: 1fr; }
}

/* Prevent skinny column wrap issues */
.grid > *{ min-width: 0; }
.rs-card, .card{ overflow-wrap: anywhere; }

/* Inside a grid, legacy .card must not add top margin */
.grid .card{ margin-top: 0; }

/* -------------------------
   ONE media look (hero + spot)
   ------------------------- */

/* Wrapper frame: gives the inset/buffer effect */
.rs-media{
  padding: var(--rs-media-inset);
  border-radius: calc(var(--rs-radius-card) - 2px);
  background: var(--rs-surface-inset);
  border: 1px solid rgba(255,255,255,.08);
}

/* Any media element inside the frame */
.rs-media img,
.rs-media video{
  display:block;
  width:100%;
  height:auto;
  border-radius: var(--rs-radius-media);
  border: 1px solid var(--rs-border-weak);
  background: rgba(0,0,0,.12);
}

/* Aspect helpers (ONLY difference between hero and spot) */
.rs-media.is-hero img{ aspect-ratio: 1200 / 630; object-fit: cover; }
.rs-media.is-square img{ aspect-ratio: 1 / 1; object-fit: cover; }

/* Back-compat: if you already use docs-figure for hero images */
.docs-figure{ margin:0; }
.rs-card .docs-figure,
.card  .docs-figure{
  /* treat figure itself like rs-media frame */
  padding: var(--rs-media-inset);
  border-radius: calc(var(--rs-radius-card) - 2px);
  background: var(--rs-surface-inset);
  border: 1px solid rgba(255,255,255,.08);
}
.rs-card .docs-figure img,
.card  .docs-figure img{
  width:100%;
  height:auto;
  border-radius: var(--rs-radius-media);
  border: 1px solid var(--rs-border-weak);
  object-fit: cover;
}

/* Back-compat: existing img.spot becomes visually identical */
img.spot,
.rs-card img.spot,
.card img.spot{
  display:block;
  width:100%;
  height:auto;
  border-radius: var(--rs-radius-media);
  border: 1px solid var(--rs-border-weak);
  background: rgba(0,0,0,.12);
  object-fit: cover;
}
/* =========================================================
   vNEXT — Surface System (Page + Header + Cards)
   Goal:
   - Cards sit “off the page” with dusty contrast
   - Thin dark warm border (brown-ish) + subtle lift shadow
   - Header gets its own surface + border so it doesn’t vanish
   ========================================================= */

:root{
  /* Page base */
  --rs-page-bg: #0b0a08;                 /* warm-black */
  --rs-page-vignette: rgba(56, 40, 18, .20);

  /* Surfaces */
  --rs-surface-card: rgba(255, 235, 200, .045);  /* dusty warm lift */
  --rs-surface-card-2: rgba(0, 0, 0, .22);       /* depth mix */
  --rs-surface-header: rgba(20, 16, 12, .72);    /* header bar */
  --rs-surface-header-2: rgba(0, 0, 0, .25);

  /* Borders (warm, thin, dark) */
  --rs-border-warm: rgba(140, 105, 55, .22);     /* “lighter brown” edge */
  --rs-border-cool: rgba(255,255,255,.08);       /* fallback */
  --rs-border-card: rgba(140, 105, 55, .22);

  /* Shadows */
  --rs-shadow-card:
    0 10px 28px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.05) inset;

  --rs-shadow-header:
    0 10px 30px rgba(0,0,0,.40);
}

/* Page background (safe: applies everywhere) */
body{
  background:
    radial-gradient(1000px 480px at 60% 10%, var(--rs-page-vignette), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.10)),
    var(--rs-page-bg);
}

/* Header gets a real surface again */
.topbar,
.rs-header,
.site-header{
  background: linear-gradient(
    180deg,
    var(--rs-surface-header),
    var(--rs-surface-header-2)
  );
  border-bottom: 1px solid var(--rs-border-warm);
  box-shadow: var(--rs-shadow-header);
  backdrop-filter: blur(10px);
}

/* Canonical card surface (apply to BOTH legacy + vNEXT cards) */
.rs-card,
.card{
  background: linear-gradient(
    180deg,
    var(--rs-surface-card),
    var(--rs-surface-card-2)
  );
  border: 1px solid var(--rs-border-card);
  box-shadow: var(--rs-shadow-card);
}

/* Optional: slightly stronger hover lift for “premium” feel (safe) */
.rs-card:hover,
.card:hover{
  transform: translateY(-1px);
}
/* =========================================================
   vNEXT — Header depth + Media frame surfaces (AUTHORITATIVE)
   Date: 2026-02-10
   Notes:
   - Makes header taller + less squashed (nav + status chips breathe)
   - Header surface slightly lighter so it reads as “header”
   - Media frames (hero + spot) get a warm/dusty surface behind images
   ========================================================= */

/* -------------------------
   A) Header: taller + clearer
-------------------------- */

/* If topbar exists, give it presence */
.topbar{
  background: linear-gradient(
    180deg,
    rgba(36, 28, 18, .78),   /* warmer + lighter than page */
    rgba(10, 8, 6, .38)
  );
  border-bottom: 1px solid rgba(140,105,55,.28);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

/* Make the inner header row deeper */
.topbar-inner{
  padding: 10px 14px;     /* ↑ was too tight */
  min-height: 64px;       /* ↑ gives chips + pills room */
  gap: 14px;
}

/* Ensure nav/auth clusters don’t feel crushed */
.topbar .nav{
  padding: 4px 0;
}
.topbar .nav-auth{
  padding: 4px 0;
}

/* Make pill controls slightly taller/less cramped (safe, global) */
.rs-hubnav-item,
.rs-hubnav__item,
.pill,
.btn{
  min-height: 34px;
}

/* Context pill (venue/status dropdown) gets more vertical comfort */
.context-dd > summary.context-pill{
  height: 44px;
  padding: 0 16px;
}

/* -------------------------
   B) Media frames: warm “dusty” surface behind images
   Applies to BOTH hero + spot image patterns without markup changes
-------------------------- */

/* Common wrapper surfaces used in your pages */
.docs-figure,
.rs-media-inset,
.rs-card-media,
figure{
  background: linear-gradient(
    180deg,
    rgba(210, 165, 95, .10),  /* dusty brown tint */
    rgba(0, 0, 0, .18)
  );
  border: 1px solid rgba(140,105,55,.22);
  border-radius: var(--rs-radius-card, 16px);
  box-shadow:
    0 10px 26px rgba(0,0,0,.42),
    0 1px 0 rgba(255,255,255,.05) inset;
}

/* Ensure “frame padding” exists so image doesn’t touch edge */
.docs-figure,
.rs-media-inset,
.rs-card-media{
  padding: 10px;          /* ← the buffer you want */
}

/* Image itself follows the card geometry (no sharp corners) */
.docs-figure img,
.rs-media-inset img,
.rs-card-media img,
img.spot{
  display:block;
  width:100%;
  height:auto;
  border-radius: calc(var(--rs-radius-card, 16px) - 6px);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}

/* Keep captions neat */
.docs-figure figcaption{
  padding: 10px 2px 0;
  color: var(--rs-text-2, rgba(203,213,225,.88));
}
/* =========================================================
   vNEXT AUTHORITATIVE OVERRIDES — Header + Cards + Media + Page BG
   Version: vNEXT-clean-2026.02.10b
   Notes:
   - Adds missing padding to .rs-card (fixes “text glued to edge”).
   - Header: taller + visible surface + clamps auth/context pill.
   - Media: adds dusty brown frame behind images (hero + spot feel consistent).
   - Page BG: subtle dusty brown/green “marble” vibe via gradients (no images).
   Keep at EOF.
========================================================= */

/* ---------- A) Page background (dusty brown/green marble-ish) ---------- */
html, body{
  background-color: #060606;
  background-image:
    radial-gradient(1200px 700px at 12% 10%, rgba(74, 58, 28, .18), transparent 58%),
    radial-gradient(900px 520px at 88% 14%, rgba(22, 82, 58, .12), transparent 60%),
    radial-gradient(900px 650px at 50% 120%, rgba(88, 66, 22, .10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,0) 22%, rgba(0,0,0,.35));
  background-attachment: fixed;
}

/* ---------- B) Cards: ensure padding + “sits off the page” ---------- */
/* The big fix: rs-card had surface but not guaranteed padding */
.rs-card{
  padding: 16px;
  border-radius: var(--rs-radius-card, 16px);
  border: 1px solid rgba(110, 86, 40, .22); /* dusty brown edge */
  background: linear-gradient(180deg, rgba(90, 70, 30, .10), rgba(255,255,255,.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 30px rgba(0,0,0,.38);
}

/* Legacy .card stays compatible but matches the same rhythm */
.card{
  padding: 16px;
  border-radius: var(--rs-radius-card, 16px);
  border: 1px solid rgba(110, 86, 40, .20);
  background: linear-gradient(180deg, rgba(90, 70, 30, .09), rgba(255,255,255,.02));
}

/* Prevent “letter-by-letter” wrapping inside grids */
.grid > *{ min-width:0; }
.rs-card, .card{ overflow-wrap:anywhere; }

/* ---------- C) Header: taller + visible surface + stop pill bullying nav ---------- */
.topbar{
  background: linear-gradient(180deg, rgba(85, 66, 28, .16), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(110, 86, 40, .22);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.topbar-inner{
  padding: 10px 0;          /* makes header feel “deeper” */
  min-height: 64px;         /* gives nav + pills breathing room */
  align-items: center;
}

/* Clamp the right-side auth cluster harder (prevents nav shove) */
.topbar .nav-auth{
  max-width: 360px;         /* was too generous */
  gap: 8px;
}

/* Context pill: slimmer + truncation */
.context-dd > summary.context-pill{
  height: 38px;
  padding: 0 12px;
  min-width: 220px;
  max-width: 320px;
}

.topbar .chip-label{
  max-width: 10ch;          /* reduces the “Raffs Music Bar …” shove */
}

/* ---------- D) Media frames: hero + spot feel consistent (dusty frame + rim) ---------- */
/* Works for: <figure class="docs-figure"><img ...> and any img.spot usage */
.docs-figure{
  margin: 0;
  padding: 10px; /* frame thickness */
  border-radius: var(--rs-radius-card, 16px);
  border: 1px solid rgba(110, 86, 40, .22);
  background: linear-gradient(180deg, rgba(90, 70, 30, .18), rgba(0,0,0,.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 26px rgba(0,0,0,.35);
}

.docs-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius: calc(var(--rs-radius-card, 16px) - 6px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55); /* black rim */
}

/* Spot images when used directly (no wrapper) */
img.spot{
  box-sizing: border-box;
  padding: 8px; /* creates the “gap” without overflow */
  border-radius: var(--rs-radius-card, 16px);
  border: 1px solid rgba(110, 86, 40, .22);
  background: linear-gradient(180deg, rgba(90, 70, 30, .18), rgba(0,0,0,.10));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 10px 22px rgba(0,0,0,.32);
}

/* ---------- E) Link-cards: keep hover premium but not jumpy on mobile ---------- */
@media (hover:hover){
  .rs-card.link-card:hover,
  .card.link-card:hover{ transform: translateY(-1px); }
}

/* =========================================================
   CARD SURFACES — Subtle Depth for Grid Cards
   ========================================================= */

/* Default card stays clean */
.card {
  background-color: transparent;
}

/* Content cards (not full-width title cards) */
.card:not(.full) {
  background:
    radial-gradient(
      140% 100% at 0% 0%,
      rgba(255,255,255,0.035),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(18,22,24,0.55),
      rgba(12,15,17,0.65)
    );
  backdrop-filter: saturate(110%);
}

/* Optional colour bias variants (auto-feel, not explicit classes) */
.card:not(.full):nth-child(3n) {
  background:
    radial-gradient(
      140% 100% at 0% 0%,
      rgba(80,120,100,0.08),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(16,22,20,0.55),
      rgba(10,14,13,0.65)
    );
}

.card:not(.full):nth-child(4n) {
  background:
    radial-gradient(
      140% 100% at 0% 0%,
      rgba(60,90,130,0.08),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(14,18,24,0.55),
      rgba(10,13,18,0.65)
    );
}

/* Keep borders crisp */
.card {
  border: 1px solid rgba(255,255,255,0.10);
}

/* Slight lift on hover (desktop only) */
@media (hover: hover) {
  .card:not(.full):hover {
    border-color: rgba(255,255,255,0.18);
    background:
      radial-gradient(
        140% 100% at 0% 0%,
        rgba(255,255,255,0.06),
        transparent 60%
      ),
      linear-gradient(
        180deg,
        rgba(20,24,26,0.65),
        rgba(14,18,20,0.75)
      );
  }
}

/* =========================================================
   HERO — Unified Public & Docs
   ========================================================= */

.hero,
/* === Refined Admin Hero Surface (final polish) === */
.docs-hero {
  position: relative;
  padding: 10px 20px 12px; /* tighter */
  border-radius: 18px;
  background:
    radial-gradient(800px 260px at 10% 0%, rgba(120,90,50,0.14), transparent 70%),
    radial-gradient(600px 360px at 90% 20%, rgba(55,65,50,0.14), transparent 75%),
    linear-gradient(180deg, rgba(28,24,19,0.92), rgba(24,22,18,0.96));

  /* pencil-thin brown hairline */
  border: 1px solid rgba(145,110,60,0.35);

  /* very subtle separation */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset;
}

.docs-hero-inner {
  padding: 0;
}

.hero h1,
.docs-title {
  font-size: 40px;
  line-height: 1;
  margin: 0 0 4px 0;
  color: #efe4d3; /* dusty warm */
}

.docs-sub {
  margin: 0;
  font-size: 16px;
  opacity: 0.85;
}

.hero-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.docs-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* === END HERO — Unified Public & Docs === */
/* =========================================================
   CARD SURFACES — Full-width title cards
   ========================================================= */

.card.full{
  background:
    radial-gradient(120% 120% at 20% 0%,
      rgba(255,255,255,.05),
      transparent 62%),
    linear-gradient(180deg,
      rgba(22,18,16,.58),
      rgba(14,12,12,.70));
  border-color: rgba(255,255,255,.12);
}
/* =========================================================
   HERO — tighten vertical space
   ========================================================= */

.hero,
.docs-hero{
  padding: clamp(34px, 5vw, 64px) 16px; /* was taller */
}
/* =========================================================
   HERO LAYOUT — right-side callout card
   ========================================================= */

.hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  align-items: start;
}

.hero-copy{
  min-width: 0;
}

.hero-side{
  align-self: start;
}

.hero-side .card{
  margin: 0; /* ensure it sits level */
}

/* Mobile: stack neatly */
@media (max-width: 860px){
  .hero-inner{
    grid-template-columns: 1fr;
  }
  .hero-side{
    margin-top: 12px;
  }
}
/* =========================================================
   HERO SPLIT — hero + right-side summary card
   ========================================================= */

.hero.hero-split .hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  align-items: start;
}

.hero.hero-split .hero-copy{ min-width: 0; }

.hero.hero-split .hero-side{ align-self: start; }

.hero.hero-split .hero-side .card{ margin: 0; }

/* Right-side hero summary card surface (distinct from small cards + full cards) */
.card.hero-summary{
  background:
    radial-gradient(120% 140% at 10% 0%,
      rgba(180,140,90,.14),
      transparent 62%),
    radial-gradient(120% 120% at 90% 10%,
      rgba(60,120,110,.12),
      transparent 55%),
    linear-gradient(180deg,
      rgba(18,16,14,.70),
      rgba(10,10,10,.78));
  border-color: rgba(255,255,255,.16);
}

/* Mobile stacks */
@media (max-width: 860px){
  .hero.hero-split .hero-inner{
    grid-template-columns: 1fr;
  }
  .hero.hero-split .hero-side{
    margin-top: 12px;
  }
}
/* =========================================================
   HEADER — visible surface + sticky
   ========================================================= */

.site-header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background:
    radial-gradient(1200px 220px at 20% 0%,
      rgba(160,120,80,.18),
      transparent 60%),
    linear-gradient(180deg,
      rgba(12,12,12,.92),
      rgba(10,10,10,.78));
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

/* Give the page content room so it doesn't tuck under the sticky header */
body{
  scroll-padding-top: 84px; /* adjust if your header height differs */
}
/* =========================================================
   HEADER NAV — mobile burger
   ========================================================= */

.nav-toggle{ display: none; }          /* burger button */
.nav-links{ display: flex; gap: 14px; } /* desktop links */

@media (max-width: 980px){
  .nav-toggle{ display: inline-flex; }
  .nav-links{
    display: none;
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 10px);
    padding: 12px;
    border-radius: 16px;
    background:
      radial-gradient(120% 140% at 10% 0%,
        rgba(255,255,255,.06),
        transparent 62%),
      linear-gradient(180deg,
        rgba(14,14,14,.92),
        rgba(10,10,10,.88));
    border: 1px solid rgba(255,255,255,.12);
    z-index: 2100;
  }

  .site-header.is-nav-open .nav-links{
    display: grid;
    gap: 10px;
  }
}
/* =========================================================
   CONTEXT / GATED CHIP — smaller on mobile
   ========================================================= */

@media (max-width: 980px){
  .context-pill,
  .gated-chip{
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
  }

  .context-pill .pill-label,
  .gated-chip .pill-label{
    padding: 2px 8px;
  }
}
/* =========================================================
   RaffsSync Topbar (Sticky + Mobile Nav polish)
   Targets: /sync/partials/header.php (.topbar, .nav-toggle, .nav, .nav-auth)
   ========================================================= */

/* 1) Sticky header (preferred) */
.topbar{
  position: sticky;
  top: 0;
  z-index: 2000;
  /* keeps text readable when content scrolls under */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Ensure header surface is clearly separated */
.topbar .topbar-inner{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Desktop layout: brand left, nav center-ish, auth right */
.topbar .brand{ flex: 0 0 auto; }
.topbar .nav{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto; /* pushes nav + auth to the right */
}
.topbar .nav-auth{
  flex: 0 0 auto;
  margin-left: 10px;
}

/* 2) Burger button: higher contrast + consistent hit area */
.topbar .nav-toggle{
  /* nav.js will show/hide it via breakpoints; we only style */
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Burger “3 lines” using one span + pseudo lines */
.topbar .nav-toggle > span{
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 2px;
}
.topbar .nav-toggle > span::before,
.topbar .nav-toggle > span::after{
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 2px;
}
.topbar .nav-toggle > span::before{ top: -6px; }
.topbar .nav-toggle > span::after{ top:  6px; }

/* Slightly stronger on hover/focus for “not too light” complaint */
.topbar .nav-toggle:hover,
.topbar .nav-toggle:focus-visible{
  border-color: rgba(255,255,255,.28);
  background: rgba(0,0,0,.38);
}
.topbar .nav-toggle:focus-visible{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 2px;
}

/* 3) Mobile: burger right aligned, chip smaller, nav doesn’t get shoved */
@media (max-width: 860px){
  /* On mobile, we want: brand left, burger right, chip not oversized */
  .topbar .nav{
    margin-left: 0; /* nav is typically collapsed by nav.js CSS; avoid pushing */
  }

  .topbar .nav-toggle{
    margin-left: auto; /* forces burger to the far right */
  }

  /* If auth chip exists, keep it compact and prevent it bullying the header */
  .topbar .nav-auth{
    margin-left: 8px;
    max-width: 52vw;
    overflow: hidden;
  }

  /* Generic “chip shrink” without knowing internal classes:
     affects common pill/button-like elements inside the context menu */
  .topbar .nav-auth a,
  .topbar .nav-auth button,
  .topbar .nav-auth .pill,
  .topbar .nav-auth .chip{
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* 4) Fallback if sticky is blocked by parent overflow/transform:
   Add a class to <body> in one place only (optional):
   body.has-fixed-topbar { ... } — use only if sticky fails. */
body.has-fixed-topbar .topbar{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
body.has-fixed-topbar{
  padding-top: var(--topbar-h, 72px);
}
/* =========================================================
   MOBILE BURGER — visible + right aligned
   ========================================================= */

/* Ensure header layout can push burger to the right */
.site-header,
header.site-header,
header.header,
header {
  position: relative;
}

/* Try the common header inner wrappers */
.site-header .header-inner,
.site-header .nav-row,
.site-header .topbar,
.site-header .wrap,
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Burger button visibility + right alignment */
@media (max-width: 980px) {
  /* Common burger button selectors */
  .nav-toggle,
  .menu-toggle,
  .burger,
  .hamburger,
  button[aria-label*="menu" i],
  button[aria-controls*="nav" i] {
    margin-left: auto !important;
    order: 999 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.35);
  }

  /* If the icon is SVG */
  .nav-toggle svg,
  .menu-toggle svg,
  .burger svg,
  .hamburger svg {
    width: 22px;
    height: 22px;
    fill: rgba(255,255,255,.92);
    stroke: rgba(255,255,255,.92);
    opacity: 1;
  }

  /* If the icon is 3 spans (classic burger) */
  .nav-toggle span,
  .menu-toggle span,
  .burger span,
  .hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,.92);
    border-radius: 2px;
    opacity: 1;
  }

  /* Space out the 3 lines if spans are used */
  .nav-toggle span + span,
  .menu-toggle span + span,
  .burger span + span,
  .hamburger span + span {
    margin-top: 5px;
  }
}

/* Hover/active lift (desktop hover won’t apply on mobile, but harmless) */
@media (hover: hover) {
  .nav-toggle:hover,
  .menu-toggle:hover,
  .burger:hover,
  .hamburger:hover {
    border-color: rgba(255,255,255,.28);
    background: rgba(0,0,0,.45);
  }
}
/* =========================================================
   FIX: Global nav.js contract enforcement (desktop vs mobile)
   - nav.js toggles: [data-nav-root].is-open + .nav.is-open + .nav-backdrop hidden
   - We must NOT force .topbar .nav display:flex on mobile by default
   Paste at END of styles.vNEXT.css to override earlier rules.
   ========================================================= */

/* Always respect hidden attribute (nav.js uses backdrop.hidden) */
[hidden]{ display:none !important; }

/* Desktop (>=861px): show nav, hide burger/backdrop */
@media (min-width: 861px){
  .topbar [data-nav]{ display:flex !important; }
  .topbar [data-nav-toggle]{ display:none !important; }
  .topbar [data-nav-backdrop]{ display:none !important; }
  body.nav-open{ overflow:auto !important; }
}

/* Mobile (<=860px): hide nav by default; show burger; nav.js opens it */
@media (max-width: 860px){
  .topbar [data-nav-toggle]{ display:inline-flex !important; }

  /* CRITICAL: default closed state */
  .topbar [data-nav]{ display:none !important; }

  /* Open state driven by nav.js */
  [data-nav-root].is-open [data-nav]{ display:block !important; }
  [data-nav-root].is-open [data-nav-backdrop]{ display:block !important; }

  /* optional but recommended: prevent background scroll when menu open */
  body.nav-open{ overflow:hidden; }
}
/* =========================================================
   Mobile nav = RIGHT drawer (50% width) + right-aligned links
   Works with nav.js toggles:
   - [data-nav-root].is-open
   - body.nav-open
   ========================================================= */

@media (max-width: 860px){

  /* Backdrop covers the whole viewport behind the drawer */
  [data-nav-backdrop]{
    position: fixed;
    inset: 0;
    z-index: 2998;
    background: rgba(0,0,0,.55);
    border: 0;
    border-radius: 0;
  }

  /* Drawer panel (the nav itself) */
  .topbar [data-nav]{
    /* default closed state (JS opens via .is-open on root) */
    display: none !important;

    position: fixed;
    top: var(--topbar-h, 72px);           /* below sticky header */
    right: 0;
    width: min(50vw, 420px);              /* half page, cap for big phones */
    height: calc(100dvh - var(--topbar-h, 72px));
    z-index: 2999;

    overflow: auto;
    -webkit-overflow-scrolling: touch;

    padding: 12px;
    border-left: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* stack links vertically */
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* right-align content */
    align-items: stretch;
    text-align: right;
  }

  /* Open state */
  [data-nav-root].is-open [data-nav]{
    display: flex !important;
  }

  /* Make each link look like a pill/button and align it right */
  .topbar [data-nav] .nav-link{
    display: block;
    text-align: right;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.25);
    text-decoration: none;
  }

  /* Optional: active link reads clearer */
  .topbar [data-nav] .nav-link.is-active{
    border-color: rgba(255,255,255,.22);
    background: rgba(0,0,0,.35);
  }

  /* Ensure burger stays on the far right */
  .topbar [data-nav-toggle]{
    margin-left: auto;
  }
}
/* =========================================================
   Image Cards / Hero Cards — tighter frame, bigger image
   Goal:
   - Image uses more of the card area (mobile + desktop)
   - Outer border: thin black
   - Outline: thin dusty-brown definition line
   - Inner padding ("mat"): dusty brown
   ========================================================= */

:root{
  /* tweak these later if you want it tighter/looser */
  --rs-frame-outer: 1px;             /* thin black */
  --rs-frame-outline: 1px;           /* brown hairline */
  --rs-frame-outline-offset: 2px;    /* distance from black border */
  --rs-frame-pad: clamp(8px, 1.2vw, 12px);  /* inner mat padding */
  --rs-frame-radius: 18px;
  --rs-frame-img-radius: 14px;

  /* dusty brown mat */
  --rs-mat: rgba(88, 66, 40, .35);
  --rs-mat-2: rgba(120, 90, 55, .18);

  /* outline brown */
  --rs-outline: rgba(170, 125, 75, .40);
}

/* Target the common hero/docs figure pattern */
.card figure,
.card .docs-figure,
.card figure.docs-figure{
  margin: 0; /* kill default figure margins */
}

/* The frame lives on the figure */
.card .docs-figure,
.card figure.docs-figure,
.card figure{
  border-radius: var(--rs-frame-radius);
}

/* Only apply the “mat + double border” to figures that actually contain an image */
.card figure:has(img),
.card .docs-figure:has(img){
  padding: var(--rs-frame-pad);

  /* inner mat */
  background:
    linear-gradient(180deg, var(--rs-mat), var(--rs-mat-2));

  /* outer thin black border */
  border: var(--rs-frame-outer) solid rgba(0,0,0,.90);

  /* brown hairline outline for definition */
  outline: var(--rs-frame-outline) solid var(--rs-outline);
  outline-offset: var(--rs-frame-outline-offset);

  /* keeps the mat clean */
  overflow: hidden;
}

/* Make the image fill the available width and look premium */
.card figure:has(img) > img,
.card .docs-figure > img{
  display: block;
  width: 100%;
  height: auto;

  border-radius: var(--rs-frame-img-radius);

  /* thin inner edge so it “pops” against the mat */
  border: 1px solid rgba(0,0,0,.55);

  /* avoid tiny image feel */
  max-width: 100%;
}

/* If you use <picture> inside figure */
.card figure:has(picture) picture,
.card .docs-figure picture{
  display: block;
}
.card figure:has(picture) picture > img,
.card .docs-figure picture > img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rs-frame-img-radius);
  border: 1px solid rgba(0,0,0,.55);
}

/* Mobile: slightly tighter mat so the image reads larger */
@media (max-width: 860px){
  :root{
    --rs-frame-pad: 8px;
    --rs-frame-outline-offset: 2px;
  }
}

/* =========================================================
   RaffsSync — Native <dialog> Modal Standard (Global)
   Purpose:
   - Canonical admin modal styling using <dialog>
   - No per-page CSS; works across Admin/Dashboard/Affiliate/Partner
   - Accessible defaults + consistent RaffsSync surfaces
   ========================================================= */

/* Base dialog container */
dialog.rs-dialog,
dialog#rs-wd-dialog {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 0;
  margin: auto;
  width: min(980px, 92vw);
  max-width: 92vw;
  max-height: 86vh;
  overflow: hidden;
  color: inherit;
  background: rgba(20, 20, 20, 0.92);
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}

/* Backdrop */
dialog.rs-dialog::backdrop,
dialog#rs-wd-dialog::backdrop {
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(3px);
}

/* Inner layout: we expect the dialog to contain a single .rs-card (or form.rs-card) */
dialog.rs-dialog > .rs-card,
dialog.rs-dialog > form.rs-card,
dialog#rs-wd-dialog > .rs-card,
dialog#rs-wd-dialog > form.rs-card {
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 18px;
  background: transparent;
  box-shadow: none;
}

/* Header row within dialog (matches your card/hero spacing vibe) */
dialog.rs-dialog .rs-modal-head,
dialog#rs-wd-dialog .rs-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* Body scroll area helper (optional if you add a wrapper later) */
dialog.rs-dialog .rs-modal-body,
dialog#rs-wd-dialog .rs-modal-body {
  overflow: auto;
  max-height: 70vh;
  padding-right: 4px; /* avoids scrollbar hugging content */
}

/* Ensure pre blocks don’t explode the layout */
dialog.rs-dialog pre,
dialog#rs-wd-dialog pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-height: 44vh;
}

/* Tighter on small screens */
@media (max-width: 640px) {
  dialog.rs-dialog,
  dialog#rs-wd-dialog {
    width: 94vw;
    max-height: 90vh;
    border-radius: 14px;
  }
  dialog.rs-dialog > .rs-card,
  dialog.rs-dialog > form.rs-card,
  dialog#rs-wd-dialog > .rs-card,
  dialog#rs-wd-dialog > form.rs-card {
    padding: 14px;
  }
}

/* =========================================================
   RaffsSync — <dialog> Scroll Fix (Global)
   - Make the dialog content scroll inside the card
   - Keeps header + footer pinned
   ========================================================= */

dialog.rs-dialog > form.rs-card,
dialog#rs-wd-dialog > form.rs-card,
dialog.rs-dialog > .rs-card,
dialog#rs-wd-dialog > .rs-card {
  display: flex;
  flex-direction: column;
  max-height: 86vh;   /* match dialog cap */
  overflow: hidden;   /* prevent whole-page scroll bleed */
}

/* The 2nd direct child inside the form/card is the content block (between header and footer) */
dialog.rs-dialog > form.rs-card > div:nth-of-type(2),
dialog#rs-wd-dialog > form.rs-card > div:nth-of-type(2),
dialog.rs-dialog > .rs-card > div:nth-of-type(2),
dialog#rs-wd-dialog > .rs-card > div:nth-of-type(2) {
  flex: 1 1 auto;
  min-height: 0;      /* critical for flex scroll */
  overflow: auto;     /* ✅ scroll region */
  padding-right: 6px; /* scrollbar breathing room */
}

/* Keep pre blocks from hijacking the scroll */
dialog.rs-dialog pre,
dialog#rs-wd-dialog pre {
  max-height: none;   /* let the container scroll instead */
}

/* =========================================================
   A) IMAGE CARDS — apply frame + bigger image to SMALL cards too
   Works for:
   - <figure class="docs-figure"><img ...></figure>
   - any common “media wrapper” divs that contain an <img>
   ========================================================= */

:root{
  --rs-frame-outer: 1px;                 /* thin black */
  --rs-frame-outline: 1px;               /* dusty-brown hairline */
  --rs-frame-outline-offset: 2px;
  --rs-frame-pad: clamp(8px, 1.0vw, 12px);
  --rs-frame-radius: 18px;
  --rs-frame-img-radius: 14px;

  --rs-mat: rgba(88, 66, 40, .35);       /* dusty brown mat */
  --rs-mat-2: rgba(120, 90, 55, .18);
  --rs-outline: rgba(170, 125, 75, .42); /* brown outline */
}

/* Kill default figure spacing everywhere inside cards */
.card figure{ margin:0; }

/* Canonical figure cases */
.card .docs-figure,
.card figure.docs-figure{
  padding: var(--rs-frame-pad);
  border-radius: var(--rs-frame-radius);
  background: linear-gradient(180deg, var(--rs-mat), var(--rs-mat-2));
  border: var(--rs-frame-outer) solid rgba(0,0,0,.90);
  outline: var(--rs-frame-outline) solid var(--rs-outline);
  outline-offset: var(--rs-frame-outline-offset);
  overflow:hidden;
}

.card .docs-figure > img,
.card figure.docs-figure > img{
  display:block;
  width:100%;
  height:auto;
  border-radius: var(--rs-frame-img-radius);
  border: 1px solid rgba(0,0,0,.55);
}

/* SMALL IMAGE CARDS (generic catch-all)
   If a card has a media wrapper, apply the same frame.
   This safely hits common patterns without needing HTML changes. */
.card .card-media,
.card .media,
.card .thumb,
.card .spot,
.card .img,
.card .image,
.card .card-image,
.card .card-thumb,
.card .rs-media{
  padding: var(--rs-frame-pad);
  border-radius: var(--rs-frame-radius);
  background: linear-gradient(180deg, var(--rs-mat), var(--rs-mat-2));
  border: var(--rs-frame-outer) solid rgba(0,0,0,.90);
  outline: var(--rs-frame-outline) solid var(--rs-outline);
  outline-offset: var(--rs-frame-outline-offset);
  overflow:hidden;
}

.card .card-media img,
.card .media img,
.card .thumb img,
.card .spot img,
.card .img img,
.card .image img,
.card .card-image img,
.card .card-thumb img,
.card .rs-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius: var(--rs-frame-img-radius);
  border: 1px solid rgba(0,0,0,.55);
}

/* Mobile: tighter mat so images read larger */
@media (max-width: 860px){
  :root{
    --rs-frame-pad: 8px;
    --rs-frame-outline-offset: 2px;
  }
}


/* =========================================================
   B) MOBILE NAV DRAWER — FORCE RIGHT-ANCHORED + CORRECT WIDTH
   Problem: legacy CSS still positions the panel from the left / full width.
   Fix: hard override position + inset + width.
   ========================================================= */

@media (max-width: 860px){

  /* Backdrop stays full-screen */
  [data-nav-backdrop]{
    position: fixed !important;
    inset: 0 !important;
    z-index: 2998 !important;
    background: rgba(0,0,0,.55) !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  /* Nav panel: RIGHT drawer (half screen-ish) */
  .topbar [data-nav]{
    /* default closed; JS opens via .is-open */
    display: none !important;

    position: fixed !important;
    top: var(--topbar-h, 72px) !important;
    bottom: 0 !important;

    right: 0 !important;
    left: auto !important;                 /* CRITICAL: don’t anchor left */

    width: min(50vw, 360px) !important;    /* half screen; cap */
    max-width: 50vw !important;

    z-index: 2999 !important;

    overflow: auto !important;
    -webkit-overflow-scrolling: touch;

    padding: 12px !important;

    border-left: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(0,0,0,.72) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    /* right aligned content */
    text-align: right !important;
  }

  /* Open state */
  [data-nav-root].is-open [data-nav]{
    display: block !important;
  }

  /* Right align links (you already see this working, we keep it) */
  .topbar [data-nav] .nav-link{
    display: block !important;
    text-align: right !important;
    padding: 14px 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(0,0,0,.25) !important;
    text-decoration: none !important;
  }

  /* Ensure burger stays on the far right */
  .topbar [data-nav-toggle]{
    margin-left: auto !important;
  }

  /* Prevent background scroll while open */
  body.nav-open{ overflow: hidden !important; }
}
/* =========================================================
   Keep current image frame — only refine:
   1) Inner buffer = brown
   2) Outer buffer = black
   3) Outer pin-line = brown
   4) Image corners follow card radius
   ========================================================= */

:root{
  /* adjust if your .card radius differs */
  --rs-card-radius: 18px;

  /* frame spacing (keeps your current look) */
  --rs-frame-pad: 12px;                 /* inner brown buffer */
  --rs-frame-black: 10px;               /* outer black buffer thickness */

  /* colours */
  --rs-brown-inner: rgba(88,66,40,.38); /* dusty brown inner buffer */
  --rs-brown-pin: rgba(170,125,75,.45); /* brown pin-line */
}

/* Target your current pattern: figure/docs-figure inside card */
.card .docs-figure,
.card figure.docs-figure,
.card figure:has(img){
  /* keep existing geometry; enforce the triple-layer system */
  border-radius: calc(var(--rs-card-radius) - 2px);
  overflow: hidden;

  /* Outer black rim (buffer) */
  border: 1px solid rgba(0,0,0,.85);
  box-shadow: 0 0 0 var(--rs-frame-black) rgba(0,0,0,.85);

  /* Outer brown pin-line */
  outline: 1px solid var(--rs-brown-pin);
  outline-offset: 2px;

  /* Inner brown buffer (mat) */
  background: linear-gradient(180deg, var(--rs-brown-inner), rgba(120,90,55,.20));
  padding: var(--rs-frame-pad);
}

/* Image corners follow the frame/card contour */
.card .docs-figure > img,
.card figure.docs-figure > img,
.card figure:has(img) > img{
  display: block;
  width: 100%;
  height: auto;

  /* radius = card radius minus buffers */
  border-radius: calc(var(--rs-card-radius) - (var(--rs-frame-pad) + 6px));
}

/* If you use <picture> */
.card .docs-figure picture > img,
.card figure picture > img{
  border-radius: calc(var(--rs-card-radius) - (var(--rs-frame-pad) + 6px));
}
/* =========================================================
   Card Spot Image Frame (img.spot)
   Keep current layout — just apply:
   - inner mat: dusty brown
   - outer rim: thin black
   - outer pin-line: brown
   - image corners follow card radius
   ========================================================= */

:root{
  --rs-card-radius: 18px;                 /* match your .card radius */
  --rs-spot-mat: rgba(88,66,40,.38);      /* dusty brown inner surround */
  --rs-spot-mat2: rgba(120,90,55,.18);

  --rs-spot-pad: 10px;                    /* inner brown buffer thickness */
  --rs-spot-black: 1px;                   /* black rim thickness (thin) */
  --rs-spot-pin: rgba(170,125,75,.45);    /* brown pin-line */
}

/* The spot image becomes its own framed block */
.card > img.spot{
  display: block;
  width: 100%;
  height: auto;

  /* inner dusty brown surround */
  padding: var(--rs-spot-pad);
  background: linear-gradient(180deg, var(--rs-spot-mat), var(--rs-spot-mat2));

  /* black rim + brown pin-line */
  border: var(--rs-spot-black) solid rgba(0,0,0,.90);
  outline: 1px solid var(--rs-spot-pin);
  outline-offset: 2px;

  /* follow the card contour */
  border-radius: calc(var(--rs-card-radius) - 6px);

  /* keep the image from touching the frame edges */
  box-sizing: border-box;
}

/* Make the visible image corners match the frame contour.
   This works because the <img> itself is the framed element. */
@media (max-width: 860px){
  :root{
    --rs-spot-pad: 8px; /* slightly tighter on mobile */
  }
}
/* =========================================================
   Round image corners inside .card.full .docs-figure
   Keep existing frame/borders untouched
   ========================================================= */

:root{
  --rs-card-radius: 22px; /* match your .card radius */
}

/* Make the figure follow the card contour */
.card.full .docs-figure{
  border-radius: calc(var(--rs-card-radius) - 2px);
  overflow: hidden; /* ensures image clips correctly */
}

/* Make the image follow the same contour */
.card.full .docs-figure > img{
  display:block;
  width:100%;
  height:auto;

  /* subtract padding so curve aligns visually */
  border-radius: calc(var(--rs-card-radius) - 10px);
}
:root{ --rs-inner-r: 18px; }

/* =========================================================
   Clickable Pricing Cards
   ========================================================= */

/* Pricing cards: whole card clickable (overlay link) without breaking inner controls */
.pricing-card{ position:relative; }
.pricing-card .pricing-card-link{
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:1;
}
.pricing-card button,
.pricing-card .btn,
.pricing-card .billing-toggle{
  position:relative;
  z-index:2;
}

/* =========================================================
   Carosel Main
   ========================================================= */

.rs-hero-viewport { overflow: hidden; }
.rs-hero-track { display: flex; width: 200%; transition: transform 500ms ease; }
.rs-hero-slide { width: 100%; flex: 0 0 100%; }

.rs-hero-dots { display: flex; gap: .5rem; margin-top: 1rem; }
.rs-dot { width: .65rem; height: .65rem; border-radius: 999px; opacity: .35; }
.rs-dot.is-active { opacity: 1; }

/* =========================================================
   Plans Builder — Wizard progress (Enhanced)
   ========================================================= */

.builder-status{
  display:block;
  margin: 4px 0 14px 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.builder-status .muted{
  font-weight: 500;
  opacity: .8;
}

/* Step container */
.builder-steps{
  display:flex;
  align-items:center;
  gap: 14px;
  position:relative;
}

/* Base pill */
.step-pill{
  position:relative;
  z-index:2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: 0.95rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  transition: all .2s ease;
}

/* Connector line */
.step-pill:not(:last-child)::after{
  content:'';
  position:absolute;
  right:-14px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:2px;
  background: rgba(255,255,255,.12);
  z-index:1;
}

/* Completed */
.step-pill.done-step{
  background: rgba(0,200,120,.15);
  border-color: rgba(0,200,120,.6);
  color: #00d084;
}

.step-pill.done-step::after{
  background: rgba(0,200,120,.5);
}

/* Current */
.step-pill.current-step{
  background: linear-gradient(90deg,#f5a623,#ffcc66);
  border-color: #f5a623;
  color:#111;
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(245,166,35,.15);
}

/* =========================================================
   Plans Builder — CTA Button Style
   ========================================================= */
.btn.cta-builder{
  font-size: 1.05rem;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  background: linear-gradient(90deg,#f5a623,#ffcc66);
  color:#111;
  border: none;
  box-shadow: 0 6px 18px rgba(245,166,35,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn.cta-builder:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(245,166,35,.35);
}


/* Builder dropdowns: compact selects */
.rs-select-compact{
  height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.2;
}
/* Builder: compact selects (force override of rs-input sizing) */
.rs-input.rs-select-compact{
  height: 42px !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  line-height: 1.2 !important;
}
/* Builder: consistent bottom nav row */
.builder-nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 18px;
}

.builder-nav-row .btn.cta-builder{
  margin-left:auto;
}
/* Builder: top-aligned row (no inline styles allowed) */
.row-top{
  align-items:flex-start;
}


/* =========================================================
   Pricing Context Panel (Plans Page)
   ========================================================= */

.context-panel {
  background: rgba(20, 20, 20, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
}

.context-header {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: rgba(255,255,255,0.75);
}

.context-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.context-field select {
  height: 44px;
  font-size: 15px;
  border-radius: 12px;
}

.context-note {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

/* =========================================================
   Plans — Yearly Billing promo under per-card toggle
   ========================================================= */

.billing-promo {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.2;

  background: rgba(255, 200, 60, 0.12);
  border: 1px solid rgba(255, 200, 60, 0.35);
  color: rgba(255, 235, 190, 0.95);

  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.billing-promo strong {
  font-weight: 800;
  color: rgba(255, 215, 120, 1);
}
/* =========================================================
   Popular
   ========================================================= */
.pricing-card.is-popular{
  border-color: rgba(255, 200, 60, 0.6);
  box-shadow: 0 0 0 1px rgba(255,200,60,0.15), 0 10px 30px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}

/* ================================
   Plans – Industry Focus Highlight
   ================================ */

.compare-card tr.industry-focus td {
  background: rgba(0, 0, 0, 0.04);
}

.compare-card tr.industry-focus td:first-child strong {
  text-decoration: underline;
}

/* vNEXT — mobile breakpoints (requested) */
@media (max-width: 740px) {
  .hero.hero-split .hero-inner { display: block; }
  .hero.hero-split .hero-side { margin-top: 14px; }
  .hero .hero-cta { flex-wrap: wrap; gap: 10px; }
  .hero .hero-cta .btn { width: 100%; }
}

@media (max-width: 360px) {
  .hero .hero-inner { padding-left: 14px; padding-right: 14px; }
  .badges { gap: 8px; }
  .badge { font-size: 12px; }
}

/* Builder — Slot cards polish */
.slot-card { position: relative; padding-bottom: 54px; }

.slot-card .slot-price { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; }
.slot-card .slot-price-label { font-size: 12px; letter-spacing: .02em; }
.slot-card .slot-price-amt { font-weight: 700; font-size: 18px; line-height: 1.1; }
.slot-card .slot-price-tail { font-size: 12px; }

.slot-card .slot-qty {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.slot-card .slot-qty .rs-select-compact {
  height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  min-width: 84px;
}

.slot-summary .slot-summary-main { font-size: 18px; font-weight: 700; }

/* =========================================================
   RaffsSync — Plans Feature Matrix
   State: Not configured (⚙️)
   Purpose:
   - Visually soften features that exist in the catalog
     but are not yet configured for a specific plan.
   - Keeps matrix readable without implying denial (🚫)
     or explicit disable (⛔).
   ========================================================= */
.rs-table td.rs-matrix-muted {
  opacity: 0.45;
}
/* Normalize feature matrix icon sizing */
.rs-table td {
  font-size: 1.05rem;
  line-height: 1.2;
}
/* =========================================================
   RaffsSync — Feature Matrix Readability (Scoped)
   Purpose:
   - Subtle row/column guides for eye tracking
   - Very light zebra striping for long lists
   - Soft hover highlight
   - Scoped strictly to feature matrix only
   ========================================================= */

[data-rs-feature-matrix-wrap] .rs-table[data-rs-feature-matrix] th,
[data-rs-feature-matrix-wrap] .rs-table[data-rs-feature-matrix] td {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

[data-rs-feature-matrix-wrap] .rs-table[data-rs-feature-matrix] th:not(:first-child),
[data-rs-feature-matrix-wrap] .rs-table[data-rs-feature-matrix] td:not(:first-child) {
  border-left: 1px solid rgba(255,255,255,0.04);
}

[data-rs-feature-matrix-wrap] .rs-table[data-rs-feature-matrix] tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.025);
}

[data-rs-feature-matrix-wrap] .rs-table[data-rs-feature-matrix] tbody tr:hover td {
  background: rgba(255,255,255,0.045);
}
/* =========================================================
   RaffsSync — Feature Matrix Legend (Vertical Key)
   Purpose:
   - Clear, compact icon key with even spacing
   - Keeps the “Compare plans” block feeling important
   ========================================================= */

[data-rs-feature-matrix-wrap] .rs-matrix-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  max-width: 520px;
}

[data-rs-feature-matrix-wrap] .rs-matrix-legend > div {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: 0.6rem;
}

[data-rs-feature-matrix-wrap] .rs-matrix-legend span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}

[data-rs-feature-matrix-wrap] .rs-matrix-legend small {
  opacity: 0.8;
  font-size: 0.92rem;
}
[data-rs-feature-matrix-wrap] .rs-matrix-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .5rem;
}

[data-rs-feature-matrix-wrap] .rs-matrix-legend li {
  display: flex;
  align-items: center;
  gap: .6rem;
}

[data-rs-feature-matrix-wrap] .rs-legend-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1;
  font-size: 1.15rem;
}

[data-rs-feature-matrix-wrap] .rs-legend-txt {
  font-size: .95rem;
}

/* Top compare card internal layout */
[data-rs-feature-matrix-wrap] .rs-matrix-top-grid{
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 1rem;
  align-items:start;
}

/* Legend inset panel (selector-window feel) */
[data-rs-feature-matrix-wrap] .rs-matrix-legend-inset{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: .9rem .95rem;
  background: rgba(255,255,255,.03);
}

/* Legend list */
[data-rs-feature-matrix-wrap] .rs-matrix-legend{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.55rem;
}

[data-rs-feature-matrix-wrap] .rs-matrix-legend li{
  display:flex;
  align-items:center;
  gap:.6rem;
}

[data-rs-feature-matrix-wrap] .rs-legend-ico{
  width: 1.6rem;
  height: 1.6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 1.1rem;
  line-height: 1;
}

[data-rs-feature-matrix-wrap] .rs-legend-txt{
  font-size: .95rem;
}

/* Buffer between the top card and the table card so they don't “kiss” */
[data-rs-feature-matrix-wrap] .rs-matrix-top-card + .rs-card{
  margin-top: 1rem;
}

/* Mobile: stack legend under copy */
@media (max-width: 860px){
  [data-rs-feature-matrix-wrap] .rs-matrix-top-grid{
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   RaffsSync vNEXT — Canonical Admin Tables
   Block: RS_TABLE_ADMIN (Platform Standard)
   Purpose:
     - One reusable “SaaS-grade” table contract for Admin/Dashboard pages.
     - Fine dividers, zebra rows, subtle hover, consistent padding.
     - Works with existing .rs-table markup, no per-page CSS allowed.

   Usage:
     <div class="rs-table-wrap">
       <table class="rs-table rs-table-admin">
         ...
       </table>
     </div>

   Notes:
     - Do NOT create new page-specific table styles.
     - If a table needs compact spacing, add rs-table-compact (optional modifier below).
     - Keep backgrounds token-driven; avoid hardcoded page-level overrides.
   ====================================================================== */

.rs-table-wrap {
  width: 100%;
  overflow-x: auto;
}

/* Base Admin table modifier */
.rs-table.rs-table-admin {
  width: 100%;
  border-collapse: collapse;
}

/* Header cells */
.rs-table.rs-table-admin thead th {
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 12px 14px;
}

/* Body cells */
.rs-table.rs-table-admin tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  vertical-align: middle;
}

/* Zebra striping */
.rs-table.rs-table-admin tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.02);
}

/* Hover */
.rs-table.rs-table-admin tbody tr:hover td {
  background: rgba(255,255,255,.05);
}

/* Common column helpers */
.rs-table.rs-table-admin .col-code code {
  white-space: nowrap;
}

.rs-table.rs-table-admin .col-actions {
  text-align: right;
  white-space: nowrap;
}

/* Optional: compact spacing modifier (safe, reusable) */
.rs-table.rs-table-admin.rs-table-compact thead th,
.rs-table.rs-table-admin.rs-table-compact tbody td {
  padding: 10px 12px;
}
/* =========================================================
   Layout Utilities — Alignment Helpers
   Version: 2026.02.20
   ========================================================= */

.rs-actions-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

.rs-actions-right .btn {
  margin-left: 0; /* prevent inherited spacing issues */
}
/* =========================================================
   RS_TABLE_ADMIN — Link polish (admin tables)
   Version: 2026.02.20
   ========================================================= */

.rs-table.rs-table-admin a {
  text-decoration: none;
}

.rs-table.rs-table-admin a:hover {
  text-decoration: underline;
}

.rs-table.rs-table-admin a:focus-visible {
  outline: 2px solid var(--rs-accent, #7bd7c7);
  outline-offset: 2px;
  border-radius: 6px;
}
/* =========================================================
   Admin Table Links
   ========================================================= */

.rs-table.rs-table-admin a.rs-table-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.rs-table.rs-table-admin a.rs-table-link:hover code {
  text-decoration: underline;
}

.rs-table.rs-table-admin a.rs-table-link:focus-visible {
  outline: 2px solid var(--rs-accent, #7bd7c7);
  outline-offset: 2px;
  border-radius: 6px;
}
/* =========================================================
   Secondary Card (supporting info)
   Version: 2026.02.20
   ========================================================= */

.rs-card-subtle {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}

.rs-card-subtle h3 {
  font-size: 0.95rem;
  opacity: 0.85;
}

.rs-card-subtle .muted {
  font-size: 0.9rem;
}

/* Thin animated underline under main header/nav */
.rs-header-underline{
  height: 2px;
  width: 100%;
  opacity: .95;

  /* Uses theme tokens (fallbacks included) */
  --u1: var(--rs-accent, #6ee7ff);
  --u2: var(--rs-accent-2, #a78bfa);
  --u3: var(--rs-accent-3, #34d399);

  background: linear-gradient(90deg, var(--u1), var(--u2), var(--u3), var(--u1));
  background-size: 220% 100%;

  /* “Modern shimmer” */
  animation: rs-underline-shift 7s linear infinite;
}

@keyframes rs-underline-shift{
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

/* ================================
   Atlas Header Underline
   ================================= */

.rs-header-underline {
  height: 2px;
  width: 100%;
  opacity: 0.85;

  --u1: var(--rs-accent, #00d4ff);
  --u2: var(--rs-accent-2, #8b5cf6);
  --u3: var(--rs-accent-3, #22c55e);

  background: linear-gradient(
    90deg,
    var(--u1),
    var(--u2),
    var(--u3),
    var(--u1)
  );

  background-size: 250% 100%;
  animation: rs-underline-shift 8s linear infinite;

  pointer-events: none;
}

@keyframes rs-underline-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}