/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS — status first. Owner, 2026-09-23, on the old pages: "I am not
   liking at all. It should smarter, easier and premium not dull." The
   approved mockup is the canvas "Reachly Settings Redesign".

   What changed in how it reads, not only how it looks:
     · Settings opens on an Overview that says what is set up, what is not,
       and which one thing to fix next.
     · The rail shows each section's live state beside its name, and every
       setting can be found by what it is called ("/" from anywhere here).
     · Text that says something is dark enough to read. The washed-out grey
       captions were most of why the old pages looked dull.
     · A button that carries white text is the deeper coral, which reaches
       4.5:1; the bright brand coral stays for rings, dots and highlights.

   Tokens come from rl-ui.css; the few set here are settings' own.
   ══════════════════════════════════════════════════════════════════════════ */
/* #rlOverlays too: a drawer opened from a settings page (the invite) lives in
   the overlay root, outside the page, and without these its picked chips
   rendered white on white. */
.content.settings-mode,.rlx.st-pg,#settingsRail,#rlOverlays{--st-cap:#646c7f;--st-acc:#d6402a;--st-acc2:#c2381f;--st-acc-t:#b93520;
  --st-char:#1e2230;--st-char2:#161a24;--st-onchar:#c9cfda;--st-onchar2:#98a1b3}
@media (min-width:761px){.content.settings-mode{grid-template-columns:264px minmax(0,1fr);gap:30px}}
/* The gutter. rl-page.css takes the content wrapper's padding away whenever a
   list page is showing (.content:has(> .rl-page.active)), because a list runs
   edge to edge — and a settings page carries .rl-page for its own scroller.
   So about a second after load, once a module had painted its page, the rail
   snapped flush against the main navbar (owner, 2026-09-23: "active menu is
   touching main navbar"). Settings keeps its sides from the very first
   paint, out-ranking that rule; the page scrolls itself, so no top or bottom
   padding comes back with them and nothing moves. */
@media (min-width:761px){
  .content.settings-mode,.content.settings-mode:has(> .rl-page.active){padding:0 34px!important}
}

/* ── the rail ──────────────────────────────────────────────────────────────
   The rail is shell chrome, not page markup: it is a grid sibling of every
   settings page (`.content.settings-mode`), and on a phone it is half of a
   master/detail pair that the old stylesheet already drives. So it is
   RESTYLED in place rather than rebuilt — the behaviour is right, and the rows
   stay `.sx-item` with their data-sp, which is what that behaviour reads.
   Each row now carries its section's live state (.mt), filled by
   settings-rail.js from the same calls the pages make. */
.settings-mode #settingsRail.sx-rail{border:0;background:none;padding:24px 0 18px;top:14px;display:flex;flex-direction:column;gap:2px;
  min-height:calc(100vh - var(--rl-topbar-desk-h,72px) - 48px - var(--rl-banner-h,0px));box-sizing:border-box}
.settings-mode #settingsRail .sx-rail-h{display:none}
.sx-ws{display:flex;align-items:center;gap:11px;width:100%;margin:0 0 10px;padding:10px 11px;border:1px solid var(--rl-line);border-radius:14px;
  background:var(--rl-surface);font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .14s,box-shadow .14s}
.sx-ws:hover{border-color:#d4d8e1;box-shadow:var(--rl-sh-xs)}
.sx-ws.is-one{cursor:default}
.sx-ws.is-one:hover{border-color:var(--rl-line);box-shadow:none}
.sx-ws .lg{flex:none;width:36px;height:36px;border-radius:10px;background:var(--st-char);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800}
.sx-ws .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sx-ws .t b{font-size:14px;font-weight:700;color:var(--rl-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-ws .t span{font-size:12px;font-weight:500;color:var(--st-cap);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-ws>.rl-ic{flex:none;color:var(--st-cap);transform:rotate(90deg)}
.sx-ws.is-one>.rl-ic{display:none}

.sx-find{position:relative;margin:0 0 6px}
.sx-find>.rl-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--st-cap);pointer-events:none}
.sx-find input{width:100%;box-sizing:border-box;height:38px;padding:0 34px;border:1px solid var(--rl-line);border-radius:10px;background:var(--rl-surface);
  font:inherit;font-size:13.5px;font-weight:500;color:var(--rl-ink);transition:border-color .14s,box-shadow .14s}
.sx-find input::placeholder{color:#8a92a6}
.sx-find input:focus{outline:none;border-color:var(--rl-acc);box-shadow:0 0 0 3px var(--rl-ring)}
.sx-find kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:1px 6px;border:1px solid var(--rl-line);border-radius:6px;
  background:var(--rl-surface2);font-family:"DM Mono",ui-monospace,monospace;font-size:11px;color:var(--st-cap);pointer-events:none}
.sx-res{position:absolute;left:0;top:44px;z-index:60;width:320px;max-width:calc(100vw - 32px);padding:6px;display:none;background:#fff;
  border:1px solid var(--rl-line);border-radius:14px;box-shadow:var(--rl-sh-lg)}
.sx-res.is-on{display:block;animation:stRise .16s var(--rl-ease)}
.sx-res .h{padding:8px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--st-cap)}
.sx-res button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:none;font:inherit;
  color:var(--rl-ink);text-align:left;cursor:pointer}
.sx-res button:hover,.sx-res button.is-hi{background:var(--rl-surface2)}
.sx-res button .tile{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--rl-surface2);color:var(--rl-ink2)}
.sx-res button.is-hi .tile{background:#fff}
.sx-res button b{display:block;font-size:13.5px;font-weight:600}
.sx-res button .w{display:block;margin-top:1px;font-size:12px;color:var(--st-cap)}
.sx-res .none{padding:10px 10px 12px;font-size:13px;line-height:1.5;color:var(--rl-ink2)}

/* The platform owner's group is hidden from everyone else. `hidden` alone
   loses to the display:flex below, so it is said outright. */
#settingsRail [data-owner-only][hidden]{display:none!important}
.settings-mode #settingsRail .sx-grp{padding:14px 10px 5px;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--st-cap)}
.settings-mode #settingsRail .sx-item{display:flex;align-items:center;gap:11px;width:100%;min-height:40px;padding:0 10px;margin:1px 0;border:0;border-radius:10px;
  background:none;font:inherit;font-size:14px;font-weight:600;color:var(--rl-ink);text-align:left;cursor:pointer;transition:background .14s,color .14s}
.settings-mode #settingsRail .sx-item .ic{flex:none;width:20px;height:20px;display:grid;place-items:center;color:var(--st-cap);font-size:0;transition:color .14s}
.settings-mode #settingsRail .sx-item .ic svg{width:18px;height:18px;display:block}
.settings-mode #settingsRail .sx-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-mode #settingsRail .sx-item .ar{display:none}
.settings-mode #settingsRail .sx-item:hover{background:var(--rl-surface2)}
.settings-mode #settingsRail .sx-item:focus-visible{outline:2px solid var(--rl-acc);outline-offset:1px}
.settings-mode #settingsRail .sx-item.on{background:var(--st-char);color:#fff}
.settings-mode #settingsRail .sx-item.on .ic{color:#ff9a85}
/* A section's live state: a dot and a word, a count, or a plain word. */
.sx-item .mt{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--st-cap);white-space:nowrap}
.sx-item .mt:empty{display:none}
.sx-item .mt>i{width:7px;height:7px;border-radius:50%;background:currentColor}
.sx-item .mt.is-ok{color:#067a55}.sx-item .mt.is-ok>i{background:#0e9f6e}
.sx-item .mt.is-warn{color:#a15c07}.sx-item .mt.is-warn>i{background:#d97706}
.sx-item .mt.is-bad{color:#be123c}.sx-item .mt.is-bad>i{background:#e11d48}
.sx-item .mt.is-n{min-width:22px;height:20px;padding:0 6px;box-sizing:border-box;justify-content:center;border-radius:999px;background:var(--rl-surface3);color:var(--rl-ink2);font-weight:700}
.settings-mode #settingsRail .sx-item.on .mt{color:var(--st-onchar)}
.settings-mode #settingsRail .sx-item.on .mt.is-ok{color:#9ff0cf}.settings-mode #settingsRail .sx-item.on .mt.is-ok>i{background:#34d399}
.settings-mode #settingsRail .sx-item.on .mt.is-warn{color:#fcd79b}
.settings-mode #settingsRail .sx-item.on .mt.is-n{background:rgba(255,255,255,.14);color:#fff}
/* You, at the foot of the rail: personal, so apart from the workspace's own. */
.settings-mode #settingsRail .sx-item.sx-me{margin-top:auto;min-height:0;padding:10px;border:1px solid var(--rl-line);border-radius:12px;background:var(--rl-surface)}
.settings-mode #settingsRail .sx-item.sx-me:hover{background:var(--rl-surface2)}
.settings-mode #settingsRail .sx-item.sx-me.on{background:var(--st-char);border-color:var(--st-char)}
.sx-me .rl-av{flex:none;width:34px;height:34px;font-size:12px}
/* The rail is not inside .rlx, so the house avatar (.rlx .rl-av) never reached
   it and "Your profile" showed its initials as two bare letters. */
#settingsRail .rl-av{border-radius:50%;display:grid;place-items:center;font-weight:700;letter-spacing:0;
  color:var(--c,var(--rl-ink2));background:color-mix(in srgb,var(--c,#8a92a6) 13%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#8a92a6) 22%,transparent)}
.sx-me .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sx-me .t b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-me .t span{font-size:12px;font-weight:500;color:var(--st-cap);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-mode #settingsRail .sx-item.sx-me.on .t span{color:var(--st-onchar)}
/* The readiness card is the phone's way in to the Overview; a desktop has the
   Overview row and the page itself, so it stays out of the way there. */
.settings-mode #settingsRail .sx-item.sx-ready{display:none}

/* ── the page ──────────────────────────────────────────────────────────────
   One column of cards, capped — a settings form that runs the full width of a
   27in screen is unreadable, and every control ends up miles from its label.
   The grid column comes from .content.settings-mode; the page owns its own
   breathing room and nothing else. */
/* Two traps in one rule, both measured.

   ONE: do not set display here without the .active guard. `.page{display:none}`
   is one class; `.rlx.st-pg` is two, so an unguarded display wins over it and
   EVERY settings page renders at once, stacked, with the rail highlighting one
   of them. Opening My Profile showed the Team page.

   TWO: `.rlx.rl-page` gives every rebuilt page a FIXED height of the viewport
   with overflow:hidden, because those pages scroll an inner pane — a list
   body, a board. A settings page is a document with no inner pane, so it was
   simply clipped: Brand Brain measured 4,024px of content inside a 732px box
   that could not scroll, and everything past the first card was unreachable.
   The page is its own scroller. */
.rlx.st-pg{padding:28px 4px 64px}
.rlx.st-pg.active{display:block;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-padding-bottom:80px}
.rlx .st-main{min-width:0;max-width:1000px}
.rlx .st-stack{display:flex;flex-direction:column;gap:20px}
.rlx .st-footnote{padding:14px 2px 0;font-size:12px;color:var(--st-cap)}
.rlx.st-pg .rl-help{color:var(--st-cap)}
/* White text on the brand coral is 3.2:1. On a settings page, where every
   primary action is one somebody reads before pressing, it is the deeper
   coral instead. */
.rlx.st-pg .rl-btn.is-pri,#settingsRail .rl-btn.is-pri{background:linear-gradient(180deg,#d6402a,#c2381f);border-color:#b3341c}
.rlx.st-pg .rl-btn.is-pri:hover{background:linear-gradient(180deg,#c93a23,#b3341c)}

/* The page head: where you are, what it is for, and its state on the right. */
.rlx .st-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 24px}
.rlx .st-hd .ey{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--st-acc-t)}
.rlx .st-hd h1{margin:6px 0 0;font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.025em;color:var(--rl-ink)}
.rlx .st-hd p{margin:8px 0 0;max-width:640px;font-size:15px;line-height:1.55;font-weight:500;color:var(--rl-ink2)}
.rlx .st-hd .acts{display:flex;align-items:center;gap:10px;flex:none}

/* A pill: a state in a word, with a dot when it is a live state. */
.rlx .st-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--rl-surface3);
  color:var(--rl-ink2);font-size:12px;font-weight:700;white-space:nowrap}
.rlx .st-pill>i{width:7px;height:7px;border-radius:50%;background:currentColor}
.rlx .st-pill.is-ok{background:#e7f7f0;color:#067a55}.rlx .st-pill.is-ok>i{background:#0e9f6e}
.rlx .st-pill.is-warn{background:#fff5e6;color:#a15c07}.rlx .st-pill.is-warn>i{background:#d97706}
.rlx .st-pill.is-bad{background:#fff0f3;color:#be123c}.rlx .st-pill.is-bad>i{background:#e11d48}
.rlx .st-pill.is-dark{background:var(--st-char);color:#fff}.rlx .st-pill.is-dark>i{background:#ff9a85}
.rlx .st-pill.is-acc{background:var(--rl-acc-soft);color:var(--st-acc-t)}
.rlx .st-pill.is-info{background:#eef3ff;color:#1d4ed8}

/* ── a section card ────────────────────────────────────────────────────────
   Title, one line saying what it is for, then the fields. The sub-line is not
   decoration: a settings page is where somebody changes something they do not
   fully understand, and the cost of guessing wrong is a customer seeing it.
   The header's tile takes its tint from --t and --ti. */
.rlx .st-card{background:var(--rl-surface);border:1px solid var(--rl-line);border-radius:18px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.rlx .st-card>.hd{display:flex;align-items:flex-start;gap:14px;padding:20px 24px 16px}
.rlx .st-card>.hd .tile{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--t,var(--rl-surface2));color:var(--ti,var(--rl-ink2))}
.rlx .st-card>.hd>div{min-width:0}
.rlx .st-card>.hd h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--rl-ink)}
.rlx .st-card>.hd p{margin:3px 0 0;font-size:14px;line-height:1.5;font-weight:500;color:var(--rl-ink2)}
.rlx .st-card>.hd .acts{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
/* ONE text edge per card. The header's icon tile pushes its title to
   24 + 38 + 14 = 76px, so the body starts there too. Measured before this:
   row labels at 341, the card title at 385 and a name at 400 — three columns
   inside one card, which is precisely what reads as sloppy. */
.rlx .st-card{--st-in:76px}
.rlx .st-card>.bd{padding:0 24px 20px var(--st-in)}
/* A body that runs edge to edge (a table, a list of rows) or across the whole
   card (a grid of tiles) says so, rather than fighting the indent. */
.rlx .st-card>.bd.is-flush{padding:0}
.rlx .st-card>.bd.is-full{padding:0 24px 22px}
.rlx .st-card>.ft{display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid var(--rl-line);
  background:var(--rl-surface2);border-radius:0 0 18px 18px}
.rlx .st-card>.ft .sp{flex:1}
.rlx .st-card.is-danger{border-color:#f7c6d2}
.rlx .st-card.is-danger>.hd .tile{background:#fff0f3;color:#be123c}
.rlx [data-anchor].st-flash{animation:stFlash 1.6s var(--rl-ease)}
@keyframes stFlash{0%,35%{box-shadow:0 0 0 3px rgba(241,91,65,.45)}100%{box-shadow:0 0 0 3px rgba(241,91,65,0)}}

/* ── a field row ───────────────────────────────────────────────────────────
   Label and help on the left, the control on the right, so a column of rows
   reads as a list of decisions rather than a wall of boxes. */
.rlx .st-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:12px 24px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--rl-hair)}
.rlx .st-row:last-child{border-bottom:0}
.rlx .st-row>.k{min-width:0}
.rlx .st-row>.k b{display:block;font-size:14px;font-weight:600;color:var(--rl-ink)}
.rlx .st-row>.k p{margin:3px 0 0;font-size:13px;color:var(--st-cap);line-height:1.5}
.rlx .st-row>.v{min-width:0;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.rlx .st-row>.v>.rl-ipt,.rlx .st-row>.v>select.rl-ipt,.rlx .st-row>.v>textarea.rl-ipt{width:100%}
.rlx .st-row.is-wide{grid-template-columns:minmax(0,1fr)}
/* A row whose control is one switch: the label keeps the width, even on a phone. */
.rlx .st-row.is-sw{grid-template-columns:minmax(0,1fr) auto}
/* The theme gives every settings button a 38px minimum height on a phone (with
   !important). A switch is a 38x22 track: held to 38px tall it became a green
   circle with its knob stuck in a corner. Three classes outrank its two. */
.content.settings-mode .rl-sw{min-height:0!important}
.rlx .st-row.is-wide>.v{justify-content:stretch}
.rlx .st-row.is-top{align-items:start}
.rlx .st-row.is-top>.k{padding-top:7px}
.rlx .st-row.is-off{opacity:.55}
.rlx .st-row>.v.st-col{flex-direction:column;align-items:stretch;gap:8px}
/* A label only a screen reader hears: the card title already says it on screen. */
.rlx .st-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── the save bar ──────────────────────────────────────────────────────────
   It appears only once something has actually changed, and it says so in
   words. A Save button that is always there teaches people to ignore it.
   Dark and floating, so it cannot be mistaken for another card. */
.rlx .st-savebar{position:sticky;bottom:18px;z-index:6;display:none;align-items:center;gap:12px;width:max-content;max-width:100%;
  box-sizing:border-box;margin:22px auto 0;padding:9px 9px 9px 18px;border-radius:999px;background:var(--st-char);color:#fff;
  box-shadow:0 24px 48px -18px rgba(16,24,40,.6)}
.rlx .st-savebar.is-on{display:flex;animation:stRise .22s var(--rl-ease)}
.rlx .st-savebar .t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff}
.rlx .st-savebar .t .rl-ic{color:#ff9a85}
.rlx .st-savebar .sp{flex:0 0 4px}
.rlx .st-savebar .rl-btn.is-quiet{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.rlx .st-savebar .rl-btn.is-quiet:hover{background:rgba(255,255,255,.13)}
.rlx .st-savebar .rl-btn{border-radius:999px}
@keyframes stRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rlx .st-savebar.is-on,.sx-res.is-on,.rlx [data-anchor].st-flash{animation:none}}

/* ══════════════════════════════════════════════════════════════════════════
   OVERVIEW
   ══════════════════════════════════════════════════════════════════════════ */
.rlx .st-ready{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) 300px;gap:30px;align-items:center;
  padding:28px 30px;border-radius:22px;background:var(--st-char);color:#fff;box-shadow:0 22px 44px -26px rgba(16,24,40,.6)}
.rlx .st-ready::before{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(241,91,65,.22),rgba(241,91,65,0));pointer-events:none}
.rlx .st-ready>*{position:relative}
.rlx .st-ring{position:relative;width:140px;height:140px}
.rlx .st-ring svg{display:block}
.rlx .st-ring .arc{transition:stroke-dashoffset 1s var(--rl-ease)}
.rlx .st-ring .n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.rlx .st-ring .n b{font-size:34px;font-weight:800;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.rlx .st-ring .n span{font-size:12px;font-weight:600;color:var(--st-onchar2)}
.rlx .st-next{display:flex;flex-direction:column;gap:10px;min-width:0}
.rlx .st-next .ey{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ff9a85}
.rlx .st-next h2{margin:0;font-size:23px;line-height:1.25;font-weight:800;letter-spacing:-.02em;color:#fff}
.rlx .st-next p{margin:0;max-width:480px;font-size:15px;line-height:1.55;font-weight:500;color:var(--st-onchar)}
.rlx .st-next .a{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.rlx .st-ready .rl-btn.is-ghostd{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.rlx .st-ready .rl-btn.is-ghostd:hover{background:rgba(255,255,255,.13)}
.rlx .st-ess{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.rlx .st-ess .h{padding:2px 4px 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--st-onchar2)}
.rlx .st-ess .r{display:flex;align-items:center;gap:10px;padding:6px 4px;font-size:14px;font-weight:600;color:#fff}
.rlx .st-ess .r .d{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(251,191,36,.18);color:#fbbf24}
.rlx .st-ess .r.is-bad .d{background:rgba(251,113,133,.2);color:#fb7185}
.rlx .st-ess .r.is-ok{color:var(--st-onchar)}
.rlx .st-ess .r.is-ok .d{background:rgba(52,211,153,.16);color:#34d399}
.rlx .st-ess .r.is-wait{color:var(--st-onchar2)}
.rlx .st-ess .r.is-wait .d{background:rgba(255,255,255,.08);color:var(--st-onchar2)}
.rlx .st-ess .more{padding:6px 4px 0 36px;font-size:13px;font-weight:600;color:var(--st-onchar2)}
.rlx .st-spin{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:stSpin .8s linear infinite}
@keyframes stSpin{to{transform:rotate(360deg)}}

.rlx .st-sechd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 0 -6px}
.rlx .st-sechd h2{margin:0;font-size:17px;font-weight:700;color:var(--rl-ink)}
.rlx .st-sechd span{font-size:13px;font-weight:500;color:var(--st-cap)}
.rlx .st-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rlx .st-tile{display:flex;flex-direction:column;gap:16px;min-width:0;padding:20px;border:1px solid var(--rl-line);border-radius:18px;background:var(--rl-surface);
  box-shadow:0 1px 2px rgba(16,24,40,.05);font:inherit;color:inherit;text-align:left;cursor:pointer;transition:box-shadow .2s,transform .2s,border-color .2s}
.rlx .st-tile:hover{transform:translateY(-2px);border-color:#d7dbe5;box-shadow:0 14px 30px -14px rgba(16,24,40,.28)}
.rlx .st-tile:focus-visible{outline:2px solid var(--rl-acc);outline-offset:2px}
.rlx .st-tile .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rlx .st-tile .tile{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--t,var(--rl-surface2));color:var(--ti,var(--rl-ink2))}
.rlx .st-tile .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.rlx .st-tile .tx b{font-size:16px;font-weight:700;color:var(--rl-ink)}
.rlx .st-tile .tx .l1{font-size:13px;line-height:1.45;font-weight:600;color:var(--rl-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .st-tile .tx .l2{font-size:13px;line-height:1.45;font-weight:500;color:var(--st-cap);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .st-attn .r{display:flex;align-items:center;gap:16px;padding:16px 24px;border-top:1px solid var(--rl-line)}
.rlx .st-attn .r .d{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff5e6;color:#a15c07}
.rlx .st-attn .r.is-bad .d{background:#fff0f3;color:#be123c}
.rlx .st-attn .r.is-tip .d{background:var(--rl-surface2);color:var(--rl-ink2)}
.rlx .st-attn .r .t{flex:1;min-width:0}
.rlx .st-attn .r .t b{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;font-weight:700;color:var(--rl-ink)}
.rlx .st-attn .r .t p{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--rl-ink2)}
.rlx .st-attn .clear{display:flex;align-items:center;gap:14px;padding:18px 24px;border-top:1px solid var(--rl-line);font-size:14px;font-weight:600;color:#067a55}
.rlx .st-attn .clear .d{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#e7f7f0;color:#067a55}

/* ══════════════════════════════════════════════════════════════════════════
   WHATSAPP (the page id is still `config`)
   ══════════════════════════════════════════════════════════════════════════ */
.rlx .st-conn{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));overflow:hidden}
.rlx .st-conn .me{display:flex;align-items:center;gap:16px;min-width:0;padding:22px 24px}
.rlx .st-conn .me .tile{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#e7f7f0;color:#067a55}
.rlx .st-conn .me.is-off .tile{background:#fff5e6;color:#a15c07}
.rlx .st-conn .me .tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.rlx .st-conn .me .tx b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--rl-ink);font-variant-numeric:tabular-nums}
.rlx .st-conn .me .tx span{font-size:14px;font-weight:600;color:var(--rl-ink2)}
.rlx .st-conn .me .chips{display:flex;gap:6px;flex-wrap:wrap}
.rlx .st-stat{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;padding:20px 22px;border-left:1px solid var(--rl-line)}
.rlx .st-stat .l{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--st-cap)}
.rlx .st-stat .v{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--rl-ink)}
.rlx .st-stat .v>i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c,var(--rl-ink4))}
.rlx .st-stat .c{font-size:12px;line-height:1.45;color:var(--st-cap)}
.rlx .st-callouts{display:flex;flex-direction:column;gap:8px;padding:0 24px 16px}

/* The connection check: the server names every question it asked and how to
   fix the one that failed. The old page showed a single green line. A failed
   one takes the whole width, because it is the only one worth reading. */
.rlx .st-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:2px}
.rlx .st-checks .r{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid transparent;border-radius:10px;background:var(--rl-bg,#f6f7fa)}
.rlx .st-checks .r .rl-ic{flex:none;margin-top:1px;color:var(--rl-warn)}
.rlx .st-checks .r.is-ok .rl-ic{color:var(--rl-ok)}
.rlx .st-checks .r b{display:block;font-size:14px;font-weight:600;color:var(--rl-ink)}
.rlx .st-checks .r p{margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--rl-ink2)}
.rlx .st-checks .r p.fix{color:#a15c07;font-weight:600}
.rlx .st-checks .r:not(.is-ok){grid-column:1/-1;padding:14px 16px;background:#fff5e6;border-color:#fbe0b8}
.rlx .st-checks .r.is-note{background:var(--rl-bg,#f6f7fa);border-color:var(--rl-line,#e6e8ee)}
.rlx .st-checks .r.is-note .rl-ic{color:var(--rl-info)}
.rlx .st-checks .r.is-note p.fix{color:var(--rl-ink2);font-weight:500}
.rlx .st-checks.is-busy{opacity:.45;transition:opacity .2s}
.rlx .st-sum{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:14px;font-weight:600;color:var(--rl-ink)}
.rlx .st-sum .rl-ic{color:var(--rl-ok)}
.rlx .st-sum.is-warn .rl-ic{color:var(--rl-warn)}

/* The business profile, edited where it is shown, with what the customer
   sees beside it. */
.rlx .st-prof{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px}
.rlx .st-prof .f{display:flex;flex-direction:column;gap:16px;min-width:0}
.rlx .st-prof .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rlx .st-prof .rl-fld>span{font-size:13px;font-weight:700;color:var(--rl-ink)}
.rlx .st-prof .cnt{margin-top:4px;font-size:12px;color:var(--st-cap);font-family:"DM Mono",ui-monospace,monospace}
.rlx .st-photo{display:flex;align-items:center;gap:16px;padding:14px;border-radius:14px;border:1px dashed #d7dbe5;background:var(--rl-bg,#f6f7fa)}
.rlx .st-photo .rl-av{flex:none;width:64px;height:64px;overflow:hidden;border:2px dashed #c7ccd8;background:#fff;color:var(--rl-ink4)}
.rlx .st-photo .rl-av.has{border:0}
.rlx .st-photo .rl-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.rlx .st-photo .t{flex:1;min-width:0}
.rlx .st-photo .t b{display:block;font-size:14px;font-weight:700}
.rlx .st-photo .t p{margin:3px 0 0;font-size:13px;color:var(--st-cap)}
.rlx .st-pv{align-self:start;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;background:var(--rl-surface2)}
.rlx .st-pv .h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--st-cap)}
.rlx .st-pv .c1{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px 18px;border-radius:16px;background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.06);text-align:center}
.rlx .st-pv .av{position:relative;width:84px;height:84px;border-radius:50%;overflow:visible;background:var(--rl-surface3);display:grid;place-items:center;color:var(--rl-ink4)}
.rlx .st-pv .av img{width:84px;height:84px;border-radius:50%;object-fit:cover;display:block}
.rlx .st-pv .av .st-pill{position:absolute;right:-12px;bottom:-4px}
.rlx .st-pv .nm{margin-top:6px;font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--rl-ink)}
.rlx .st-pv .ct{font-size:12px;font-weight:600;color:var(--st-cap)}
.rlx .st-pv .ab{font-size:14px;line-height:1.45;font-weight:600;color:var(--rl-ink);word-break:break-word}
.rlx .st-pv .c2{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:16px;background:#fff}
.rlx .st-pv .ds{font-size:13px;line-height:1.5;color:var(--rl-ink2);white-space:pre-line;word-break:break-word}
.rlx .st-pv .ln{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;font-weight:600;color:var(--rl-ink2)}
.rlx .st-pv .ln span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .st-pv .ln.is-empty{color:var(--rl-ink4)}

/* ══════════════════════════════════════════════════════════════════════════
   REPLIES & HOURS (the page id is still `autoreply`)
   ══════════════════════════════════════════════════════════════════════════ */
.rlx .st-replies{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.rlx .st-replies>.l{display:flex;flex-direction:column;gap:20px;min-width:0}
/* The week, drawn from the saved closed hours: coral is open, grey is closed.
   --wd and --wh are the day and hours columns, so the "now" line can sit on
   the same scale as every bar: --f is how far through the day India is. */
.rlx .st-week{--wd:96px;--wh:132px;position:relative;display:flex;flex-direction:column;margin-bottom:34px}
.rlx .st-week .ax,.rlx .st-wk{display:grid;grid-template-columns:var(--wd) minmax(0,1fr) var(--wh);gap:16px;align-items:center}
.rlx .st-week .ax{height:20px;font-size:11px;font-weight:600;color:var(--st-cap)}
.rlx .st-week .ax .s{position:relative;height:16px}
.rlx .st-week .ax .s span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.rlx .st-week .ax .s span:first-child{transform:none}
.rlx .st-week .ax .s span:last-child{transform:translateX(-100%)}
.rlx .st-wk{height:42px;border-top:1px solid #eef0f4}
.rlx .st-wk .d{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;font-size:14px;font-weight:600;line-height:1.2;color:var(--rl-ink)}
.rlx .st-wk .d .sh{display:none}
.rlx .st-wk.is-today .d{color:var(--st-acc-t)}
.rlx .st-wk .d em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--st-acc-t)}
.rlx .st-bar{position:relative;height:12px;border-radius:999px;background:#e6e9ef;overflow:hidden}
.rlx .st-bar i{position:absolute;top:0;bottom:0;background:var(--st-acc)}
.rlx .st-bar.is-off i{background:#c6ccd8}
.rlx .st-wk .h{font-size:13px;font-weight:600;color:var(--rl-ink);white-space:nowrap}
.rlx .st-wk .h.is-closed{color:var(--st-cap)}
.rlx .st-now{position:absolute;top:22px;bottom:0;width:2px;margin-left:-1px;border-radius:2px;background:var(--rl-ink);pointer-events:none;
  left:calc(var(--wd) + 16px + (100% - var(--wd) - var(--wh) - 32px) * var(--f,0))}
.rlx .st-now span{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:999px;white-space:nowrap;
  background:var(--st-char);color:#fff;font-size:11px;font-weight:700}
.rlx .st-legend{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:0 0 4px;font-size:12px;font-weight:600;color:var(--st-cap)}
.rlx .st-legend i{display:inline-block;width:18px;height:8px;margin-right:6px;border-radius:999px;background:var(--st-acc);vertical-align:middle}
.rlx .st-legend i.is-shut{background:#e6e9ef}
.rlx .st-legend .nw{display:none}
.rlx .st-legend i.is-now{width:2px;height:12px;border-radius:1px;background:var(--rl-ink)}
.rlx .st-days{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%}
.rlx .st-days.is-muted{opacity:.45}
.rlx .st-days .sp{flex:1;min-width:8px}
.rlx .st-day{width:40px;height:34px;border-radius:9px;border:1px solid var(--rl-line);background:var(--rl-surface);
  font:inherit;font-size:12px;font-weight:700;color:var(--st-cap);text-align:center;cursor:pointer;transition:.14s}
.rlx .st-day.is-on{border-color:var(--st-char);background:var(--st-char);color:#fff}
.rlx .st-day:disabled{cursor:default}
.rlx .st-pd{display:flex;flex-direction:column;gap:6px;width:100%}
.rlx .st-pd .r{display:grid;grid-template-columns:96px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
.rlx .st-pd .r b{font-size:13px;font-weight:600;color:var(--rl-ink2)}
/* A day not on its own hours says what it does, instead of two idle pickers. */
.rlx .st-pd .r .fx{grid-column:span 2;font-size:13px;font-weight:600;color:var(--st-cap)}

/* The order they fire in, numbered, because it IS an order: the first one
   that fits is the only one sent. */
.rlx .st-seq{display:flex;flex-direction:column}
.rlx .st-fire{display:flex;gap:14px}
.rlx .st-fire>.n{flex:none;width:30px;display:flex;flex-direction:column;align-items:center}
.rlx .st-fire>.n b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--st-char);color:#fff;font-size:13px;font-weight:800}
.rlx .st-fire.is-first>.n b{background:var(--rl-surface3);color:var(--rl-ink2)}
.rlx .st-fire>.n i{flex:1;width:2px;margin:6px 0 -14px;background:var(--rl-line)}
.rlx .st-fire:last-child>.n i{display:none}
.rlx .st-fire>.c{flex:1;min-width:0;padding-bottom:14px}
.rlx .st-fire:last-child>.c{padding-bottom:0}
.rlx .st-first{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:18px;border:1px dashed #d7dbe5;background:#fbfbfd}
.rlx .st-first .tile{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f3efff;color:#6d3fd6}
.rlx .st-first .t{flex:1;min-width:0}
.rlx .st-first .t b{display:block;font-size:15px;font-weight:700}
.rlx .st-first .t p{margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--rl-ink2)}
.rlx .st-msg>.hd{align-items:center}
.rlx .st-msg>.hd .rl-sw{margin-left:auto}
.rlx .st-msg>.bd{display:flex;flex-direction:column;gap:10px}
.rlx .st-msg textarea.rl-ipt{min-height:88px;font-size:14px;line-height:1.55}
.rlx .st-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rlx .st-tools .sp{flex:1}
.rlx .st-tools .hint{font-size:12px;font-weight:600;color:var(--st-cap)}
.rlx .st-tok{font-family:"DM Mono",ui-monospace,monospace;color:var(--rl-ink2)}
.rlx .st-ai{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--st-char);border-radius:999px;
  background:var(--st-char);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .14s,opacity .14s}
.rlx .st-ai:hover{background:#2a2f3d}
.rlx .st-ai .rl-ic{color:#ff9a85}
.rlx .st-ai:disabled{opacity:.6;cursor:progress}
.rlx .st-gap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--rl-bg,#f6f7fa)}
.rlx .st-gap b{font-size:13px;font-weight:700}
.rlx .st-gap span{font-size:12px;color:var(--st-cap)}
.rlx .st-words{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rlx .st-words code{padding:4px 9px;border-radius:8px;background:var(--rl-surface2);font-family:"DM Mono",ui-monospace,monospace;font-size:12px;color:var(--rl-ink)}
.rlx .st-words span{padding:4px 2px;font-size:12px;font-weight:600;color:var(--st-cap)}

/* What the customer sees, next to what you are writing. */
.rlx .st-chat{position:sticky;top:6px;display:flex;flex-direction:column;gap:14px;padding:18px}
.rlx .st-chat .top{display:flex;align-items:center;justify-content:space-between}
.rlx .st-chat .top b{font-size:15px;font-weight:700}
.rlx .st-chat .top span{font-size:12px;font-weight:600;color:var(--st-cap)}
.rlx .st-chat .rl-seg button{flex:1}
.rlx .st-chat .win{display:flex;flex-direction:column;gap:10px;min-height:300px;padding:16px 14px 18px;border-radius:16px;background:#eef0f4}
.rlx .st-chat .who{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #e2e5ec}
.rlx .st-chat .who .lg{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--st-char);color:#fff;font-size:12px;font-weight:800}
.rlx .st-chat .who b{display:block;font-size:13px;font-weight:700}
.rlx .st-chat .who span{display:block;font-size:11px;font-weight:600;color:var(--st-cap)}
.rlx .st-chat .when{align-self:center;padding:3px 10px;border-radius:999px;background:#fff;font-size:11px;font-weight:700;color:var(--st-cap)}
.rlx .st-chat .in,.rlx .st-chat .out{max-width:84%;padding:9px 12px;font-size:14px;line-height:1.45;word-break:break-word;white-space:pre-line}
.rlx .st-chat .in{align-self:flex-start;border-radius:14px 14px 14px 4px;background:#fff;box-shadow:0 1px 1px rgba(16,24,40,.05)}
.rlx .st-chat .out{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--rl-acc-soft);border:1px solid #ffd9cf;animation:stRise .2s var(--rl-ease)}
.rlx .st-chat .out.is-empty{color:var(--st-cap);font-style:italic}
.rlx .st-chat .tm{margin-top:4px;text-align:right;font-size:11px;font-weight:600;color:#8a92a6}
.rlx .st-chat .out .tm{color:var(--st-acc-t);font-weight:700}
.rlx .st-chat .off{align-self:center;margin-top:4px;padding:6px 10px;border-radius:10px;background:#fff;font-size:12px;font-weight:600;color:#a15c07}
.rlx .st-chat .note{font-size:12px;line-height:1.5;color:var(--st-cap)}

/* ══════════════════════════════════════════════════════════════════════════
   TEAM and YOUR PROFILE
   ══════════════════════════════════════════════════════════════════════════ */
/* The person IS the card header. There is no second "You" row above it any
   more, and the avatar is the house .rl-av — the bespoke one here used
   hsl(var(--h)…) while RlUI.hue() returns a HEX colour, so the circle
   resolved to transparent and rendered as two bare letters. */
.rlx .st-card>.hd .rl-av{flex:none;width:32px;height:32px;font-size:11.5px}
.rlx .st-card>.hd.is-person{align-items:center;padding:26px 28px}
.rlx .st-card>.hd.is-person .rl-av{width:72px;height:72px;font-size:24px}
.rlx .st-card>.hd.is-person h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:22px;font-weight:800;letter-spacing:-.02em}
.rlx .st-card>.hd.is-person p{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:14px;font-weight:600;color:var(--rl-ink2)}
.rlx .st-card>.hd.is-person .ok{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#067a55}
.rlx .st-card>.hd.is-person small{display:block;margin-top:6px;font-size:13px;font-weight:500;color:var(--st-cap)}
/* Your photo (owner, 2026-09-24: "Cant we set profile picture?"): the avatar
   is the button, with a camera on its edge; a photo fills the circle wherever
   a person is drawn (this card, the Team list, the rail's Your profile). */
.rlx .rl-av.is-photo,#settingsRail .rl-av.is-photo{overflow:hidden;background:var(--rl-surface3,#eceef3);box-shadow:none}
.rlx .rl-av.is-photo>img,#settingsRail .rl-av.is-photo>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.rlx .st-me-photo{position:relative;flex:none;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer}
.rlx .st-me-photo .rl-av{transition:filter .15s}
.rlx .st-me-photo:hover .rl-av{filter:brightness(.93)}
.rlx .st-me-photo:focus-visible{outline:0;box-shadow:0 0 0 4px var(--rl-ring)}
.rlx .st-me-photo .cam{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#161a24;color:#fff;box-shadow:0 0 0 3px var(--rl-surface,#fff)}
.rlx .st-me-photo.is-busy{cursor:progress}
.rlx .st-me-photo.is-busy::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(15,18,24,.45)}
.rlx .st-me-photo.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;box-sizing:border-box;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:stSpin .8s linear infinite}
.rlx .st-me-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}

.rlx .st-ppl{display:flex;flex-direction:column}
.rlx .st-ppl .r{display:grid;grid-template-columns:minmax(0,2.1fr) 116px minmax(0,1.7fr) minmax(0,1.1fr);gap:16px;align-items:center;
  padding:14px 24px;border-top:1px solid var(--rl-line)}
.rlx .st-ppl .r.is-h{padding:11px 24px;background:var(--rl-bg,#f6f7fa);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--st-cap)}
.rlx .st-ppl .who{display:flex;align-items:center;gap:12px;min-width:0}
.rlx .st-ppl .who .rl-av{flex:none;width:38px;height:38px;font-size:13px}
.rlx .st-ppl .who .t{min-width:0}
.rlx .st-ppl .who b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--rl-ink)}
.rlx .st-ppl .who span{display:block;font-size:13px;color:var(--st-cap);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .st-ppl .cap{font-size:13px;line-height:1.45;font-weight:600;color:var(--rl-ink2)}
.rlx .st-ppl .ws{font-size:13px;line-height:1.45;color:var(--st-cap)}
.rlx .st-counts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* Roles, as a grid of what each one opens. Worked out from the same role
   defaults the invite uses, so the two can never disagree. */
.rlx .st-mx{overflow-x:auto}
.rlx .st-mx .r{display:grid;grid-template-columns:minmax(180px,1.6fr) repeat(4,minmax(84px,1fr));gap:12px;align-items:center;padding:12px 24px;border-top:1px solid var(--rl-line)}
.rlx .st-mx .r.is-h{align-items:end;padding-top:2px;border-top:0}
.rlx .st-mx .r.is-h>div{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.rlx .st-mx .r.is-h>div span{font-size:12px;line-height:1.4;color:var(--st-cap)}
.rlx .st-mx .k b{display:block;font-size:14px;font-weight:700;color:var(--rl-ink)}
.rlx .st-mx .k span{display:block;margin-top:1px;font-size:12px;color:var(--st-cap)}
.rlx .st-mx .c{display:flex;justify-content:center}
.rlx .st-mx .y{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e7f7f0;color:#067a55}
.rlx .st-mx .p{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:var(--rl-surface3);font-size:12px;font-weight:700;color:var(--rl-ink2)}
.rlx .st-mx .no{color:#c3c8d3}
.rlx .st-mx .c small{display:none}
.rlx .st-mx .c.no>.rl-ic{margin:6px 0}   /* as tall as a tick, so a stacked label lines up */

.rlx .st-wsl .r{display:flex;align-items:center;gap:14px;padding:14px 24px;border-top:1px solid var(--rl-line)}
.rlx .st-wsl .lg{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--rl-surface3);color:var(--rl-ink2);font-size:15px;font-weight:800}
.rlx .st-wsl .r.is-here .lg{background:var(--st-char);color:#fff}
.rlx .st-wsl .t{flex:1;min-width:0}
.rlx .st-wsl .t b{display:block;font-size:15px;font-weight:700}
.rlx .st-wsl .t span{display:block;font-size:13px;color:var(--st-cap)}
.rlx .st-capgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.rlx .st-capgrid>div{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 12px;border-radius:12px;background:var(--rl-bg,#f6f7fa)}
.rlx .st-capgrid>div .rl-ic:first-child{flex:none;color:var(--rl-ink2)}
.rlx .st-capgrid>div b{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .st-capgrid>div .rl-ic:last-child{flex:none;color:var(--rl-ok)}

/* The owner's margin read-out. Three figures, so a table would be overkill. */
.rlx .st-margin{display:flex;gap:10px;width:100%;flex-wrap:wrap}
.rlx .st-margin .f{flex:1;min-width:120px;padding:12px 14px;border-radius:12px;background:var(--rl-bg,#f6f7fa)}
.rlx .st-margin .f span{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--st-cap)}
.rlx .st-margin .f b{display:block;margin-top:3px;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.rlx .st-margin .f b.is-ok{color:var(--rl-ok)}
.rlx .st-margin .f b.is-bad{color:var(--rl-danger)}

/* ── the invite ── */
.rlx .st-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rlx .st-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:5px}
.rlx .st-role{padding:12px;border:1px solid var(--rl-line);border-radius:12px;background:var(--rl-surface);text-align:left;
  transition:border-color .14s,background .14s}
.rlx .st-role b{display:block;font-size:14px;font-weight:700}
.rlx .st-role span{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--rl-ink2)}
.rlx .st-role:hover{border-color:var(--rl-ink4)}
.rlx .st-role.is-on{border-color:var(--st-acc);background:var(--rl-acc-soft);box-shadow:0 0 0 1px var(--st-acc)}
.rlx .st-caps{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.rlx .st-cap{display:flex;align-items:center;gap:5px;padding:6px 11px 6px 8px;border-radius:999px;
  border:1px solid var(--rl-line);background:var(--rl-surface);font-size:13px;font-weight:600;color:var(--st-cap);
  transition:border-color .14s,color .14s,background .14s}
.rlx .st-cap .rl-ic{opacity:0;transition:opacity .14s;color:#fff}
.rlx .st-cap:hover{border-color:var(--rl-ink4);color:var(--rl-ink2)}
.rlx .st-cap.is-on{border-color:var(--st-char);background:var(--st-char);color:#fff}
.rlx .st-cap.is-on .rl-ic{opacity:1}
/* A read-only list of capabilities, not a picker. */
.rlx .st-caps.is-read .st-cap{cursor:default;border-color:var(--rl-line);background:var(--rl-surface);color:var(--rl-ink2)}
.rlx .st-caps.is-read .st-cap .rl-ic{opacity:1;color:var(--rl-ok)}
/* A temporary password is shown once and is the only copy of it. The old page
   wrote it into a line of page text with nothing to copy it with. */
.rlx .st-pw{display:flex;align-items:center;gap:8px;margin-top:8px}
.rlx .st-pw code{flex:1;min-width:0;padding:8px 11px;border-radius:var(--rl-r8);background:var(--rl-surface);
  border:1px solid var(--rl-line);font-family:"DM Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.02em;
  overflow:auto;white-space:nowrap}
/* An area this person does not hold: present, so the list is complete, but quiet. */
.rlx .st-capgrid>div.is-off{background:transparent;box-shadow:inset 0 0 0 1px var(--rl-line)}
.rlx .st-capgrid>div.is-off b,.rlx .st-capgrid>div.is-off .rl-ic{color:var(--st-cap)!important}
/* The invite's area picker sits in its own well, so it reads as one decision. */
.rlx .st-capbox{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:14px;background:var(--rl-bg,#f6f7fa);border:1px solid var(--rl-line)}
.rlx .st-capbox .t{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rlx .st-capbox .t b{font-size:13px;font-weight:700}
.rlx .st-capbox .t span{font-size:12px;font-weight:600;color:var(--st-cap);font-variant-numeric:tabular-nums}
.rlx .st-capbox .st-caps{margin-top:0}
.rlx .st-role{position:relative}
.rlx .st-role::after{content:"";position:absolute;top:12px;right:12px;width:16px;height:16px;border-radius:50%;box-sizing:border-box;border:2px solid #c3c8d3;background:#fff}
.rlx .st-role.is-on::after{border:5px solid var(--st-acc)}
.rlx .st-role b{padding-right:22px}
/* Created: the one copy of the password, and a message ready to send with it. */
.rlx .st-sent{display:flex;flex-direction:column;gap:14px}
.rlx .st-sent .ok{display:flex;align-items:center;gap:12px}
.rlx .st-sent .ok .rl-tile{--c:var(--rl-ok)}
.rlx .st-sent .ok b{display:block;font-size:16px;font-weight:800}
.rlx .st-sent .ok span{display:block;margin-top:2px;font-size:13px;color:var(--rl-ink2)}
.rlx .st-sent .msg{padding:12px 14px;border-radius:12px;background:var(--rl-bg,#f6f7fa);border:1px solid var(--rl-line);font-size:13px;line-height:1.55;white-space:pre-line;color:var(--rl-ink)}
.rlx .st-sent .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rlx .st-sent .row b{font-size:13px;font-weight:700}
/* Platform-owner only: marked as such, in the danger tint, because it reaches every client. */
.rlx .st-card .st-ey{display:block;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#be123c}

/* ══════════════════════════════════════════════════════════════════════════
   PLAN & BILLING
   ══════════════════════════════════════════════════════════════════════════ */
.rlx .st-planhero{display:grid;grid-template-columns:320px minmax(0,1fr);overflow:hidden}
.rlx .st-planhero .l{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:26px 28px;background:var(--st-char);color:#fff}
.rlx .st-planhero .l::after{content:"";position:absolute;right:-90px;bottom:-110px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(241,91,65,.22),rgba(241,91,65,0));pointer-events:none}
.rlx .st-planhero .l>*{position:relative}
.rlx .st-planhero .l .ey{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--st-onchar2)}
.rlx .st-planhero .l h2{margin:0;font-size:28px;font-weight:800;letter-spacing:-.025em;color:#fff}
.rlx .st-planhero .l .pr{font-size:15px;font-weight:600;color:var(--st-onchar)}
.rlx .st-planhero .l .st-pill{align-self:flex-start;margin-top:6px}
.rlx .st-planhero .r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.rlx .st-planhero .r>div{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;padding:22px 24px;border-left:1px solid var(--rl-line)}
.rlx .st-planhero .r>div:first-child{border-left:0}
.rlx .st-planhero .r .l2{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--st-cap)}
.rlx .st-planhero .r b{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--rl-ink)}
.rlx .st-planhero .r span{font-size:13px;color:var(--st-cap)}
/* What you are using, with no ceiling beside it. Owner's standing rule is
   that plan limits are not advertised in the product; a bar reading "8,412 of
   10,000" is exactly that. The count is a fact about the account. */
.rlx .st-use{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rlx .st-use .f{padding:16px 18px;border-radius:14px;background:var(--rl-bg,#f6f7fa)}
.rlx .st-use .f b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--rl-ink);font-variant-numeric:tabular-nums}
.rlx .st-use .f span{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--rl-ink2);line-height:1.4}
.rlx .st-cyc em{font-style:normal;margin-left:6px;padding:2px 6px;border-radius:6px;background:#e7f7f0;color:#067a55;font-size:11px;font-weight:800}
.rlx .st-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.rlx .st-plan{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--rl-line);border-radius:18px;
  background:var(--rl-surface);box-shadow:0 1px 2px rgba(16,24,40,.05);font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:border-color .14s,box-shadow .14s,transform .14s}
.rlx .st-plan:hover{border-color:#d4d8e1;transform:translateY(-1px)}
/* A plan this person cannot pick (the current one mid-term, or any plan for a non-owner): a card, not a control. */
.rlx .st-plan:disabled{cursor:default}
.rlx .st-plan:disabled:hover{transform:none;border-color:var(--rl-line)}
.rlx .st-plan.is-on{border-color:var(--st-acc);box-shadow:0 0 0 1px var(--st-acc),0 18px 36px -20px rgba(214,64,42,.45)}
.rlx .st-plan .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rlx .st-plan .nm{font-size:17px;font-weight:800;letter-spacing:-.015em;color:var(--rl-ink)}
.rlx .st-plan .tl{min-height:42px;font-size:14px;line-height:1.5;color:var(--rl-ink2)}
.rlx .st-plan .pr{font-size:32px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--rl-ink)}
.rlx .st-plan .pr em{font-style:normal;margin-left:6px;font-size:14px;font-weight:600;letter-spacing:0;color:var(--st-cap)}
.rlx .st-plan .was{font-size:13px;font-weight:600;color:#067a55}
.rlx .st-plan .was.is-m{color:var(--st-cap)}
.rlx .st-plan .fe{display:flex;flex-direction:column;gap:9px;margin-top:auto;padding-top:14px;border-top:1px solid var(--rl-line)}
.rlx .st-plan .fe i{display:flex;align-items:flex-start;gap:9px;font-style:normal;font-size:14px;line-height:1.45;font-weight:600;color:var(--rl-ink)}
.rlx .st-plan .fe i .rl-ic{flex:none;margin-top:2px;color:var(--rl-ok)}
.rlx .st-plan .cta{margin-top:6px;padding:11px;border-radius:11px;border:1px solid var(--rl-line);text-align:center;font-size:14px;font-weight:700;color:var(--rl-ink)}
.rlx .st-plan.is-on .cta{border-color:var(--st-acc);background:var(--st-acc);color:#fff}
.rlx .st-plan.is-cur .cta{background:var(--rl-surface2);border-color:var(--rl-surface2);color:var(--st-cap)}
.rlx .st-plan.is-cur.is-on .cta{background:var(--st-acc);border-color:var(--st-acc);color:#fff}
.rlx .st-checkout .amt{font-size:15px;font-weight:800;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.rlx .st-checkout .amt em{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--st-onchar);letter-spacing:0}
.rlx .st-checkout .save{padding:4px 10px;border-radius:999px;background:rgba(52,211,153,.16);color:#34d399;font-size:13px;font-weight:700}

/* ══════════════════════════════════════════════════════════════════════════
   BLUEPRINTS
   ══════════════════════════════════════════════════════════════════════════ */
.rlx .st-tabs{width:auto;align-self:flex-start;display:inline-flex;margin-bottom:14px}
.rlx .st-tabs button i{font-style:normal;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--rl-surface3);
  font-size:11px;font-weight:700;color:var(--rl-ink2)}
.rlx .st-tabs button.is-on i{background:var(--rl-acc-soft);color:var(--st-acc-t)}
.rlx .st-bps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:16px}
.rlx .st-bp{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--rl-line);
  border-radius:18px;background:var(--rl-surface);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.rlx .st-bp .h{display:flex;align-items:flex-start;gap:12px}
.rlx .st-bp .h .tile{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--t,var(--rl-surface2));color:var(--ti,var(--rl-ink2))}
.rlx .st-bp .h b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.rlx .st-bp .h span{display:block;margin-top:2px;font-size:12px;font-weight:600;color:var(--st-cap)}
.rlx .st-bp .h .tag{flex:none;margin-left:auto}
.rlx .st-bp p{margin:0;font-size:14px;line-height:1.55;color:var(--rl-ink2)}
.rlx .st-bp .bits{display:flex;flex-wrap:wrap;gap:6px}
.rlx .st-bp .bits i{display:inline-flex;align-items:center;gap:5px;font-style:normal;height:26px;padding:0 9px;border-radius:8px;
  background:var(--rl-surface2);font-size:12px;font-weight:700;color:var(--rl-ink2)}
.rlx .st-bp .a{display:flex;gap:7px;margin-top:auto;padding-top:4px}
.rlx .st-bp .a .rl-btn:first-child{flex:1;justify-content:center}
.rlx .st-bp .a .rl-btn.is-added{background:#e7f7f0;border-color:#bfe8d5;color:#067a55}
.rlx .st-bp .a .rl-btn.is-added .rl-ic{color:#067a55}

/* ══════════════════════════════════════════════════════════════════════════
   DEVELOPERS (the page id is still `api`)
   ══════════════════════════════════════════════════════════════════════════ */
.rlx .st-keybox{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--rl-bg,#f6f7fa);border:1px solid var(--rl-line)}
.rlx .st-keybox>b{flex:none;width:96px;font-size:13px;font-weight:700;color:var(--rl-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .st-key{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
.rlx .st-key code{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--rl-line);border-radius:var(--rl-r8);
  background:var(--rl-surface);font-family:"DM Mono",ui-monospace,monospace;font-size:13px;
  overflow:auto;white-space:nowrap;letter-spacing:.02em}
.rlx .st-key.is-masked code{color:var(--rl-ink4)}
.rlx .st-keymeta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--st-cap)}
.rlx .st-keynote{margin-top:10px;font-size:13px;line-height:1.5;font-weight:600;color:var(--st-cap)}
.rlx .st-keynote.is-live{color:var(--st-acc-t)}
.rlx .st-olds{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:14px}
.rlx .st-olds .r{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--rl-line);border-radius:10px;font-size:13px}
.rlx .st-olds .r b{font-weight:600}
.rlx .st-olds .r code{font-family:"DM Mono",ui-monospace,monospace;color:var(--st-cap)}
.rlx .st-olds .r span{margin-left:auto;color:var(--st-cap)}
/* What a key may do, or when it was turned off; a turned-off key stays, dimmed. */
.rlx .st-olds .r em{font-style:normal;font-size:12.5px;color:var(--st-cap);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .st-olds .r .rl-btn{flex:none}
.rlx .st-olds .r.is-off{opacity:.6}
.rlx .st-abilities{display:flex;flex-direction:column;gap:8px}
@media (max-width:560px){.rlx .st-olds .r{flex-wrap:wrap}.rlx .st-olds .r em{flex-basis:100%;order:3}}
/* The old sheet carries `pre{background:#f8fafc!important}`, which beat this
   and left light text on a near-white block — the snippet was invisible.
   Answering in kind is the house convention for a contested property. */
.rlx .st-codebox{border-radius:14px;overflow:hidden;border:1px solid #2a2f3d;background:#14161b}
.rlx .st-codebox .bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid #2a2f3d}
.rlx .st-codebox .bar span{font-family:"DM Mono",ui-monospace,monospace;font-size:12px;color:var(--st-onchar2)}
.rlx .st-codebox .bar button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:8px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.rlx .st-codebox .bar button:hover{background:rgba(255,255,255,.12)}
.rlx .st-code{margin:0;padding:15px 18px;border-radius:0;background:#14161b!important;color:#e8ebf2;
  font-family:"DM Mono",ui-monospace,monospace;font-size:13px;line-height:1.7;overflow-x:auto;white-space:pre}
.rlx .st-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:16px}
.rlx .st-link{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--rl-line);border-radius:14px;
  text-decoration:none;color:inherit;transition:border-color .14s,transform .14s,box-shadow .14s}
.rlx .st-link:hover{border-color:#d4d8e1;transform:translateY(-1px);box-shadow:var(--rl-sh-sm)}
.rlx .st-link>.rl-ic{flex:none;width:34px;height:34px;padding:8px;box-sizing:border-box;border-radius:10px;background:var(--rl-surface2);color:var(--rl-ink2)}
.rlx .st-link b{display:block;font-size:14px;font-weight:700}
.rlx .st-link span{display:block;margin-top:1px;font-size:12px;color:var(--st-cap)}

/* ══════════════════════════════════════════════════════════════════════════
   AI USAGE (platform owner)
   ══════════════════════════════════════════════════════════════════════════ */
.rlx .st-figs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.rlx .st-fig{padding:12px 14px;border:1px solid var(--rl-line);border-radius:var(--rl-r12);background:var(--rl-surface)}
.rlx .st-fig b{display:block;font-size:21px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.rlx .st-fig span{display:block;margin-top:1px;font-size:12px;color:var(--st-cap)}
.rlx .st-figs.is-six{grid-template-columns:repeat(6,minmax(0,1fr))}
.rlx .st-fig em{display:block;margin-top:2px;font-style:normal;font-size:11px;color:var(--rl-ink4)}
/* A table of numbers, built from rows rather than <table>, so a workspace can
   open into its own small table with its OWN headings. The old sub-rows
   carried eight cells to match an eight-column parent, two of them empty
   padding, with cache reads sitting under a column headed "Cost (month)". */
.rlx .st-tbl{display:flex;flex-direction:column;font-size:12.5px}
.rlx .st-tbl .hd,.rlx .st-tbl .r{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(4,minmax(0,1fr));gap:10px;align-items:center;padding:9px 2px}
.rlx .st-tbl .hd{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--rl-ink4);
  border-bottom:1px solid var(--rl-ink);padding-bottom:8px}
.rlx .st-tbl .r{border-bottom:1px solid var(--rl-hair)}
.rlx .st-tbl .r[data-ws]{cursor:pointer}
.rlx .st-tbl .r[data-ws]:hover{background:var(--rl-surface2)}
.rlx .st-tbl .r .t{display:flex;align-items:center;gap:7px;min-width:0;position:relative}
.rlx .st-tbl .r .t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .st-tbl .r .t em{font-style:normal;font-size:11px;color:var(--rl-ink4);margin-left:4px}
.rlx .st-tbl .r .t .rl-ic{flex:none;color:var(--rl-ink4);transition:transform .16s}
.rlx .st-tbl .r[aria-expanded="true"] .t .rl-ic{transform:rotate(180deg)}
.rlx .st-tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rlx .st-tbl .n em{font-style:normal;font-size:11px;color:var(--rl-ink4)}
.rlx .st-tbl .n.is-ok{color:var(--rl-ok)}
.rlx .st-tbl .n.is-bad{color:var(--rl-danger)}
.rlx .st-tbl .sub{margin:2px 0 10px;padding:4px 12px 2px;border-left:2px solid var(--rl-acc);background:var(--rl-surface2);border-radius:0 var(--rl-r10) var(--rl-r10) 0}
.rlx .st-tbl .sub .hd{border-bottom-color:var(--rl-line);font-size:10px}
.rlx .st-tbl .sub .r{border-bottom:0;padding:7px 2px}
.rlx .st-tbl .r.is-opus{background:rgba(37,99,235,.045)}
.rlx .st-tbl .bar{position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--rl-acc);
  width:var(--w,0);opacity:.35}
.rlx .st-days-bars{display:flex;flex-direction:column;gap:4px;padding:6px 0 2px}
.rlx .st-days-bars .r{display:grid;grid-template-columns:44px minmax(0,1fr) 78px;gap:9px;align-items:center;font-size:12px}
.rlx .st-days-bars .d{color:var(--rl-ink4);font-variant-numeric:tabular-nums}
.rlx .st-days-bars i{height:9px;border-radius:5px;background:var(--rl-surface3);position:relative}
.rlx .st-days-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0);border-radius:5px;background:var(--rl-acc)}
.rlx .st-days-bars .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--rl-ink2)}
.rlx .st-pair{margin-top:10px;padding:13px;border:1px solid var(--rl-line);border-radius:var(--rl-r12)}
.rlx .st-pair .q b{font-size:13.5px;font-weight:700}
.rlx .st-pair .q span{display:block;margin-top:1px;font-size:11.5px;color:var(--rl-ink4)}
.rlx .st-pair .two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.rlx .st-pair .m{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--rl-ink4);margin-bottom:4px}
.rlx .st-pair .a{max-height:230px;overflow:auto;padding:10px 12px;border-radius:var(--rl-r10);background:var(--rl-surface2);
  font-size:12.5px;line-height:1.6}
.rlx .st-pair .j{display:flex;gap:7px;flex-wrap:wrap}

/* ── narrower screens ──────────────────────────────────────────────────────
   These used to sit inside the Brand Brain hero's media block and went with
   it when the brain moved to the AI section — every settings page lost its
   phone layout at once. Shared rules live in their own blocks now. */
@media (max-width:1180px){
  .rlx .st-ready{grid-template-columns:auto minmax(0,1fr)}
  .rlx .st-ess{grid-column:1/-1}
  .rlx .st-conn{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rlx .st-conn .me{grid-column:1/-1;border-bottom:1px solid var(--rl-line)}
  .rlx .st-conn .st-stat:nth-child(2){border-left:0}
  .rlx .st-replies{grid-template-columns:minmax(0,1fr)}
  .rlx .st-chat{position:static}
  .rlx .st-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .rlx .st-main{max-width:none;width:100%}
  .rlx .st-prof{grid-template-columns:minmax(0,1fr)}
  .rlx .st-planhero{grid-template-columns:minmax(0,1fr)}
  .rlx .st-capgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rlx .st-figs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rlx .st-figs.is-six{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rlx .st-tbl .hd,.rlx .st-tbl .r{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr))}
  .rlx .st-tbl .hd span:nth-child(n+4),.rlx .st-tbl .r span:nth-child(n+4){display:none}
  .rlx .st-pair .two{grid-template-columns:1fr}
}
@media (max-width:860px){
  .rlx .st-roles{grid-template-columns:1fr}
  .rlx .st-2col{grid-template-columns:1fr}
}
@media (max-width:760px){
  .rlx.st-pg{padding:14px 0 34px}
  .rlx .st-main{padding:0 12px}
  .settings-mode #settingsRail.sx-rail{padding:10px 0 4px}
  /* The rail is the settings index on a phone: a heading, where you are, a
     way in to the Overview, and the list. */
  .settings-mode #settingsRail .sx-rail-h{display:block;padding:14px 16px 4px;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--rl-ink)}
  .sx-ws,.sx-find{margin:10px 16px 0;width:auto}
  .sx-find{margin-bottom:10px}
  .sx-res{left:0;right:0;width:auto}
  .settings-mode #settingsRail .sx-item[data-sp="setup"]:not(.sx-ready){display:none !important}
  .settings-mode #settingsRail .sx-item .ar{display:block}
  .settings-mode #settingsRail .sx-item.on .ic{color:var(--st-cap)}
  .settings-mode #settingsRail .sx-item.on .mt{color:var(--st-cap)}
  .settings-mode #settingsRail .sx-item.sx-me{margin:14px 16px 0 !important;width:auto !important;border:1px solid var(--rl-line) !important;border-radius:14px !important}
  .settings-mode #settingsRail .sx-item.sx-ready{display:flex !important;align-items:center;gap:14px !important;width:auto !important;min-height:0 !important;
    margin:4px 16px 8px !important;padding:16px !important;border:0 !important;border-radius:18px !important;background:var(--st-char) !important;color:#fff !important}
  .sx-ready .st-ring{flex:none;width:64px;height:64px}
  .sx-ready .st-ring .n b{font-size:15px}
  .sx-ready .st-ring .n span{display:none}
  .sx-ready .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .sx-ready .t em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ff9a85}
  .sx-ready .t b{font-size:15px;line-height:1.3;font-weight:800;color:#fff}
  .sx-ready .t span{font-size:13px;color:var(--st-onchar)}
  .rlx .st-hd{flex-direction:column;align-items:flex-start;margin:4px 0 18px}
  .rlx .st-hd h1{font-size:24px}
  .rlx .st-hd p{font-size:14px}
  .rlx .st-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .rlx .st-row>.v{justify-content:stretch}
  /* 76px of indent is a fifth of a phone screen, so the tile goes and the
     one text edge moves to the card's own padding. */
  .rlx .st-card>.hd .tile{display:none}
  .rlx .st-card>.bd{padding:0 16px 16px}
  .rlx .st-card>.bd.is-full{padding:0 16px 16px}
  .rlx .st-card>.hd,.rlx .st-card>.ft{padding:16px}
  .rlx .st-card>.hd{flex-wrap:wrap}
  .rlx .st-card>.hd .acts{margin-left:0}
  /* ...but a reply's switch stays beside its title: it is the title's answer. */
  .rlx .st-msg>.hd{flex-wrap:nowrap;align-items:flex-start}
  .rlx .st-msg>.hd>div{flex:1 1 auto}
  .rlx .st-first{flex-wrap:wrap;align-items:flex-start;padding:14px 16px}
  .rlx .st-first .t{flex:1 1 calc(100% - 48px)}
  .rlx .st-first .rl-btn{margin-left:48px}
  .rlx .st-card>.hd.is-person{padding:18px 16px}
  .rlx .st-card>.hd.is-person .rl-av{width:56px;height:56px;font-size:19px}
  .rlx .st-ready{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px}
  .rlx .st-ring{width:110px;height:110px}
  .rlx .st-ring svg{width:110px;height:110px}
  .rlx .st-tiles{grid-template-columns:minmax(0,1fr)}
  .rlx .st-attn .r{flex-wrap:wrap;padding:14px 16px}
  .rlx .st-attn .r .rl-btn{margin-left:52px}
  .rlx .st-conn{grid-template-columns:minmax(0,1fr)}
  .rlx .st-conn .st-stat{border-left:0;border-top:1px solid var(--rl-line);padding:14px 16px}
  .rlx .st-conn .me{padding:18px 16px}
  .rlx .st-checks{grid-template-columns:minmax(0,1fr)}
  .rlx .st-prof .two{grid-template-columns:minmax(0,1fr)}
  /* Too narrow for three columns: each day becomes the bar with its hours
     under it, and the axis keeps its noon and midnights. A line through the
     whole week would cross every hours label, so "now" is a tick in today's
     bar and its time moves into the legend. */
  .rlx .st-week{--wd:40px;margin-bottom:14px}
  /* The seven days share one row; the quick picks start the next. */
  .rlx .st-days .sp{flex-basis:100%;height:0}
  .rlx .st-day{flex:1 1 0;min-width:0;width:auto}
  .rlx .st-week .ax,.rlx .st-wk{grid-template-columns:var(--wd) minmax(0,1fr);gap:3px 12px}
  .rlx .st-week .ax>span:last-child,.rlx .st-week .ax .s .q{display:none}
  .rlx .st-wk{height:auto;padding:9px 0}
  .rlx .st-wk .d{grid-row:span 2}
  .rlx .st-wk .h{grid-column:2;font-size:12px}
  .rlx .st-now{display:none}
  .rlx .st-wk.is-today .st-bar::after{content:"";position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;left:calc(var(--f,0) * 100%);background:var(--rl-ink)}
  .rlx .st-legend .nw{display:inline-flex;align-items:center}
  .rlx .st-wk .d em,.rlx .st-wk .d .fl{display:none}
  .rlx .st-wk .d .sh{display:inline}
  /* Each day is one block: its name beside its choice, anything more under
     the choice, and a hairline before the next day. */
  .rlx .st-sechd{flex-direction:column;align-items:flex-start;gap:3px}
  .rlx .st-pd{gap:0}
  .rlx .st-pd .r{grid-template-columns:84px minmax(0,1fr) minmax(0,1fr);gap:6px;padding:10px 0;border-top:1px solid var(--rl-hair)}
  .rlx .st-pd .r:first-child{border-top:0;padding-top:0}
  .rlx .st-pd .r select:first-of-type{grid-column:2/-1}
  .rlx .st-pd .r .fx{grid-column:2/-1}
  .rlx .st-pd .r select[data-k="fromHour"]{grid-column:2}
  .rlx .st-ppl .r{grid-template-columns:minmax(0,1fr) auto;padding:12px 16px}
  .rlx .st-ppl .r .cap,.rlx .st-ppl .r .ws,.rlx .st-ppl .r.is-h{display:none}
  /* The role table stacks: each row is its title, then four marks that name
     their role, instead of a table scrolling sideways inside its card. */
  .rlx .st-mx{overflow:visible}
  .rlx .st-mx .r{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px;padding:12px 16px}
  .rlx .st-mx .r.is-h{display:none}
  .rlx .st-mx .r .k{grid-column:1/-1}
  .rlx .st-mx .c{flex-direction:column;align-items:center;gap:4px}
  .rlx .st-mx .c small{display:block;font-size:11px;font-weight:600;color:var(--st-cap)}
  .rlx .st-planhero .r{grid-template-columns:minmax(0,1fr)}
  .rlx .st-planhero .r>div{border-left:0;border-top:1px solid var(--rl-line);padding:14px 16px}
  .rlx .st-use{grid-template-columns:minmax(0,1fr)}
  .rlx .st-capgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rlx .st-keybox{flex-wrap:wrap}
  .rlx .st-keybox>b{width:auto}
  .rlx .st-savebar{width:auto;margin:16px 0 0;border-radius:16px;flex-wrap:wrap}
  .rlx .st-savebar .t{width:100%}
  .rlx .st-savebar .rl-btn{flex:1;justify-content:center}
  .rlx .st-checkout .amt{text-align:left}
  /* Four ways to pay are wider than a phone: two by two, each still one tap. */
  .rlx .st-cyc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .rlx .st-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rlx .st-figs.is-six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rlx .st-kbrow{flex-direction:column;gap:9px}
  .rlx .st-kbrow .a{width:100%}
  .rlx .st-kbrow .a .rl-btn:first-child{flex:1;justify-content:center}
}