/*
 * The connector console: the console, User Management, Tenant Management and the two sign-ins
 * (templates/console*.html, templates/console_ui/).
 */
.rv-page {
    margin: 0;
    min-height: 100vh;
    background: var(--rv-bg);
    color: var(--rv-ink);
    font-family: var(--rv-font);
    -webkit-font-smoothing: antialiased;
}
.rv-page *,
.rv-page *::before,
.rv-page *::after { box-sizing: border-box; }
.rv-page code,
.rv-page pre { font-family: var(--rv-mono); }
/* Links in running text are underlined, not told apart by colour alone (Tailwind's reset removes it).
   :where() holds this at an element's specificity: it beats that reset, and any class (navigation,
   buttons) restyles a link without !important. */
:where(.rv-page) a:where(:not(.rv-btn)) { color: var(--rv-primary); text-decoration: underline; text-underline-offset: 2px; }
/* An opaque outline rather than a shadow: no component's own shadow can replace it, and it survives
   forced-colors mode, where shadows are dropped. */
.rv-page :focus-visible { outline: 2px solid var(--rv-primary); outline-offset: 2px; }
/* A link that opens a new tab says so with the usual arrow-out-of-a-box (the text already says it to
   screen readers), so nobody mistakes API Docs for another page of the console. */
.rv-page a[target="_blank"]:not(.rv-btn)::after {
    content: ""; display: inline-block; flex: none; width: 0.9em; height: 0.9em; margin-left: 0.4em; vertical-align: -0.1em;
    background: currentColor; forced-color-adjust: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The playground's on/off switch (static/js/input.js) is a visually hidden checkbox: its focus
   shows on the slider beside it, instead of Tailwind's 1.5:1 pale ring. */
.rv-page .peer:focus-visible + div { outline: 2px solid var(--rv-primary); outline-offset: 2px; }

.rv-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.rv-filtered { display: none !important; }
/* The shared JavaScript shows and hides with Tailwind's `hidden`. It must win over every component's
   own display rule (a button is inline-flex), or the dialog shows all its buttons at once. */
.rv-page .hidden { display: none !important; }
.rv-view-hidden { display: none !important; }
.rv-skip {
    position: absolute; left: 8px; top: -60px; z-index: 60; padding: 10px 14px;
    background: var(--rv-surface); color: var(--rv-ink); border-radius: var(--rv-radius-small);
}
.rv-skip:focus { top: 8px; }

/* Buttons and fields */
.rv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--rv-target); min-width: var(--rv-target); padding: 0 16px;
    border: 1px solid transparent; border-radius: var(--rv-radius-small);
    font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2;
    text-decoration: none; text-align: center; cursor: pointer; max-width: 100%;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.rv-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* CATAPA's flat green buttons, not the marketing gradient. */
.rv-btn--primary { background: var(--cn-action); color: var(--rv-primary-ink); box-shadow: 0 1px 2px rgba(0, 61, 102, 0.2); }
.rv-btn--primary:hover { background: var(--cn-action-hover); }
.rv-btn--quiet { background: var(--rv-surface); color: var(--rv-ink); border-color: var(--rv-line-strong); }
.rv-btn--quiet:hover { background: color-mix(in srgb, var(--rv-surface) 90%, var(--rv-ink)); }
/* Text 6.4:1 on white and 5.7:1 on the hover tint; the border is the full-strength green. */
.rv-btn--outline { background: var(--rv-surface); color: var(--cn-action-hover); border-color: var(--cn-action); }
.rv-btn--outline:hover { background: var(--cn-action-soft); }
.rv-btn--danger { background: var(--rv-danger); color: #ffffff; }
.rv-btn--danger:hover { background: color-mix(in srgb, var(--rv-danger) 86%, black); }
.rv-btn--danger-quiet { background: transparent; color: var(--rv-danger); border-color: color-mix(in srgb, var(--rv-danger) 60%, transparent); }
.rv-btn--danger-quiet:hover { background: var(--rv-danger-soft); }
.rv-btn--small { min-height: 36px; min-width: 36px; padding: 0 12px; font-size: 0.875rem; }
.rv-btn--block { flex: 1 1 100%; width: 100%; }
.rv-inline-form { display: inline-flex; margin: 0; }

.rv-input {
    min-height: var(--rv-target); padding: 0 12px;
    border: 1px solid var(--rv-line-strong); border-radius: var(--rv-radius-small);
    background: var(--rv-surface); color: var(--rv-ink); font: inherit; font-size: 0.95rem;
}
.rv-input:focus { border-color: var(--rv-primary); }
.rv-page input::placeholder { color: var(--rv-muted); opacity: 1; }
.rv-duration { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.rv-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.rv-field__hint { font-weight: 400; color: var(--rv-muted); font-size: 0.85rem; }

/* Banners */
.rv-banner {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; border-radius: var(--rv-radius); margin: 0 0 16px;
    border: 1px solid; font-size: 0.95rem; line-height: 1.45;
}
.rv-banner p { margin: 0; }
.rv-banner--error { background: var(--rv-danger-soft); border-color: color-mix(in srgb, var(--rv-danger) 40%, transparent); color: color-mix(in srgb, var(--rv-danger) 85%, black); }
.rv-banner--ok { background: var(--rv-ok-soft); border-color: color-mix(in srgb, var(--rv-ok) 40%, transparent); color: color-mix(in srgb, var(--rv-ok) 80%, black); }
.rv-banner--warn { background: #fff4e0; border-color: #e7b766; color: #6a4300; }

/* One-time results: the only element that is meant to stop the eye. */
.rv-onetime {
    padding: 20px; margin: 0 0 16px; border-radius: var(--rv-radius);
    background: var(--rv-highlight); border: 2px solid color-mix(in srgb, var(--rv-highlight) 50%, var(--rv-ink));
}
.rv-onetime h2, .rv-onetime h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; }
.rv-onetime p { margin: 0 0 12px; color: var(--rv-ink); }

/* Secret display */
.rv-secret {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--rv-radius-small);
    background: var(--rv-surface); border: 1px solid var(--rv-line);
}
.rv-secret__label { font-weight: 600; font-size: 0.9rem; }
.rv-secret__value { font-size: 0.9rem; word-break: break-all; min-width: 0; }
.rv-secret__actions { display: inline-flex; gap: 6px; align-self: start; }
.rv-secret__hint { grid-column: 1 / -1; margin: 0; color: var(--rv-muted); font-size: 0.85rem; }
@media (max-width: 560px) {
    .rv-secret { grid-template-columns: 1fr auto; }
    .rv-secret__label { grid-column: 1 / -1; }
}

/* Search */
.rv-search { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rv-search__input {
    flex: 1 1 16rem; min-height: 48px; padding: 0 14px 0 42px;
    border: 1px solid var(--rv-line-strong); border-radius: var(--rv-radius-small);
    background: var(--rv-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2357606a' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat 14px center / 18px;
    color: var(--rv-ink); font: inherit; font-size: 1rem;
}
.rv-search__input:focus { border-color: var(--rv-primary); }
.rv-search__clear { min-height: 48px; padding: 0 14px; border: 1px solid var(--rv-line-strong); border-radius: var(--rv-radius-small); background: var(--rv-surface); color: var(--rv-ink); font: inherit; cursor: pointer; }
.rv-search__status { flex-basis: 100%; margin: 0; min-height: 1.2em; color: var(--rv-muted); font-size: 0.9rem; }
.rv-search-empty { padding: 24px; text-align: center; color: var(--rv-muted); }

/* Tabs (role=tab buttons; the original page script toggles .tab-active / .tab-inactive) */
.rv-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; }
.rv-tab {
    min-height: var(--rv-target); padding: 0 16px; border: 0; background: transparent;
    color: var(--rv-muted); font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.rv-tab.tab-active { color: var(--rv-ink); }
.rv-tab__count { font-weight: 400; }
.rv-tab__match { display: block; font-size: 0.8rem; font-weight: 400; color: var(--rv-primary); }

/* Dialogs */
.rv-dialog-backdrop { padding: 16px; }
.rv-dialog {
    width: 100%; max-width: 26rem; padding: 22px; border-radius: var(--rv-radius);
    background: var(--rv-surface); color: var(--rv-ink); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
.rv-dialog__message { margin: 0 0 18px; line-height: 1.5; }
.rv-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.rv-code-step__code { margin: 0; padding: 10px; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; overflow-x: auto; background: color-mix(in srgb, var(--rv-bg) 70%, var(--rv-surface)); border-radius: var(--rv-radius-small); }

/* Integration link result */
.rv-module-message { margin: 8px 0 0; font-size: 0.9rem; }
.rv-module-message:empty { display: none; }
.rv-auth-url { margin: 12px 0 0; padding: 14px; border-radius: var(--rv-radius-small); background: var(--rv-primary-soft); border: 1px solid color-mix(in srgb, var(--rv-primary) 30%, transparent); }
.rv-auth-url__title { margin: 0; font-size: 1rem; font-weight: 700; }
.rv-auth-url__label { margin: 0 0 4px; font-size: 0.85rem; font-weight: 600; color: var(--rv-muted); }
.rv-auth-url__body { margin: 2px 0 10px; color: var(--rv-muted); font-size: 0.9rem; }
.rv-auth-url__row { display: flex; gap: 8px; align-items: flex-start; }
.rv-auth-url__link { flex: 1; min-width: 0; font-family: var(--rv-mono); font-size: 0.85rem; word-break: break-all; overflow-wrap: anywhere; }

/* Status mark for "is this live?" */
.rv-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; }
.rv-status--on { color: var(--rv-ok); }

@media (prefers-reduced-motion: reduce) {
    .rv-page *, .rv-page *::before, .rv-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Short inline code in explanatory text (a header name, an identifier) never breaks mid-token. */
.cn-panel__lede code { white-space: nowrap; }

/* "Patch bay", in CATAPA's colours. Every connector is a socket: patched (an
   account is connected) or open. The socket ring carries live/open status on every page.

   Colour follows catapa.com and the CATAPA employee self-service: the brand gradient (blue #09f,
   teal #009c7c, green #00c983), a green-to-teal header band, deep slate-blue text (#003d66) on a
   pale blue-white page, white cards, Open Sans. The bright brand colours fall below 4.5:1 behind
   small white text, so they colour surfaces that carry none (the band, the sign-in panel, sockets,
   current markers); buttons and headings use the same three stops, deepened to 4.5:1 or better. */
.rv-console {
    --rv-bg: #f3faff;
    --rv-surface: #ffffff;
    --rv-ink: #003d66;
    --rv-muted: #4a6a85;
    --rv-line: #d5e3ee;
    /* Boundaries that identify a control (an empty field, an off socket): 3:1 or better on white. */
    --rv-line-strong: #7891a6;
    --rv-primary: #0067b0;
    --rv-primary-ink: #ffffff;
    --rv-primary-soft: #e6f5ff;
    --rv-ok: #007a55;
    --rv-ok-soft: #dcf7ea;
    --rv-warn: #9a5200;
    --rv-warn-soft: #fff4e0;
    --rv-danger: #b5412e;
    --rv-danger-soft: #fdeeeb;
    --rv-highlight: #ffeeb0;
    /* CATAPA's shapes: square, softened. Cards 8px, controls 4px. */
    --rv-radius: 8px;
    --rv-radius-small: 4px;
    --rv-font: "Open Sans", system-ui, sans-serif;
    --rv-mono: "IBM Plex Mono", ui-monospace, monospace;
    /* The brand gradient, bright (surfaces) and deepened (behind or as text). */
    --cn-brand: linear-gradient(58.68deg, #0099ff 7.77%, #009c7c 53.03%, #00c983 92.96%);
    --cn-brand-deep: linear-gradient(58.68deg, #0072c6 0%, #007f68 55%, #00845a 100%);
    /* The employee self-service header: green at the top, teal at the bottom. */
    --cn-band: linear-gradient(180deg, #00cf80 0%, #00a49b 100%);
    --cn-shadow: 0 1px 2px rgba(0, 61, 102, 0.06), 0 4px 16px rgba(51, 173, 255, 0.12);
    /* CATAPA's button green (#00d47e), deepened to 4.7:1 behind white text; hover 6.4:1. */
    --cn-action: #00854f;
    --cn-action-hover: #006e41;
    --cn-action-soft: #e8f7ef;
    --cn-socket-on: #00a36c;
    --cn-socket-off: #7891a6;
    --rv-target: 44px;
    font-size: 16px;
    line-height: 1.5;
}

.cn-shell { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }
@media (max-width: 860px) { .cn-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } }

/* Rail */
.cn-rail {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 24px;
    padding: 22px 16px; background: var(--rv-surface); color: var(--rv-ink);
    border-right: 1px solid var(--rv-line);
}
@media (max-width: 860px) {
    .cn-rail {
        position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px;
        border-right: 0; border-bottom: 1px solid var(--rv-line);
    }
}
.cn-rail__brand { display: flex; align-items: center; gap: 10px; color: var(--rv-ink); text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.cn-rail__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 860px) { .cn-rail__links { flex-direction: row; flex-wrap: wrap; } }
.cn-rail__link {
    position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--rv-radius-small);
    color: var(--rv-muted); text-decoration: none; font-weight: 600;
}
.cn-rail__link:hover { background: var(--rv-bg); color: var(--rv-ink); }
.cn-rail__link[aria-current="page"] { background: var(--rv-primary-soft); color: var(--rv-ink); }
.cn-rail__link[aria-current="page"]::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: var(--cn-action);
}
.cn-rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 860px) { .cn-rail__foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; } }
.cn-rail__who { margin: 0; font-size: 0.85rem; color: var(--rv-muted); overflow-wrap: anywhere; }
.cn-rail__who-label { display: block; }
.cn-rail__who-name { color: var(--rv-ink); font-weight: 600; }
.cn-rail__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cn-rail__icon { flex: none; width: 20px; height: 20px; }
.cn-rail__link { gap: 12px; }
.cn-rail__logout .cn-rail__icon { width: 18px; height: 18px; }
.cn-rail__initial { display: none; }
.cn-rail__toggle {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border: 0; border-radius: var(--rv-radius-small); background: transparent; color: var(--rv-muted); cursor: pointer;
}
.cn-rail__toggle:hover { background: var(--rv-bg); color: var(--rv-ink); }
.cn-rail__toggle .cn-rail__icon { transition: transform 160ms ease; }
@media (max-width: 860px) { .cn-rail__toggle { display: none; } }

/* Collapsed (wide screens only; narrow screens already have a compact top bar): icons only. Each label
   becomes its icon's tooltip on hover or keyboard focus, and stays the link's accessible name. */
@media (min-width: 861px) {
    .cn-shell { transition: grid-template-columns 160ms ease; }
    .cn-shell--collapsed { grid-template-columns: 4.5rem 1fr; }
    .cn-shell--collapsed .cn-rail { z-index: 20; align-items: center; padding: 22px 12px; }
    .cn-shell--collapsed .cn-rail__top { flex-direction: column; gap: 14px; }
    .cn-shell--collapsed .cn-rail__toggle .cn-rail__icon { transform: rotate(180deg); }
    .cn-shell--collapsed .cn-rail__links { align-items: center; }
    .cn-shell--collapsed .cn-rail__link { justify-content: center; width: 44px; padding: 0; }
    .cn-shell--collapsed .cn-rail__link[target="_blank"]::after { position: absolute; top: 5px; right: 1px; width: 0.6em; height: 0.6em; margin: 0; }
    .cn-shell--collapsed .cn-rail__foot { align-items: center; }
    .cn-shell--collapsed .cn-rail__logout { position: relative; width: 44px; padding: 0; }
    .cn-shell--collapsed .cn-rail__brand,
    .cn-shell--collapsed .cn-rail__who { position: relative; }
    .cn-shell--collapsed .cn-rail__initial {
        display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
        background: var(--rv-primary-soft); color: var(--rv-ink); font-weight: 700; font-size: 0.9rem;
    }
    /* Ink on white: 11:1. */
    .cn-shell--collapsed .cn-rail__label {
        position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 30;
        padding: 6px 10px; border-radius: var(--rv-radius-small); background: var(--rv-ink); color: #ffffff;
        font-size: 0.85rem; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0;
    }
    .cn-shell--collapsed .cn-rail__label * { color: inherit; }
    .cn-shell--collapsed :is(a, p):hover > .cn-rail__label,
    .cn-shell--collapsed a:focus-visible > .cn-rail__label { opacity: 1; }
}

/* Main column */
.cn-stage { position: relative; min-width: 0; }
/* The employee self-service header band: the page's one bright surface, with the heading card
   resting on it. It carries no text of its own. */
.cn-stage::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 168px; z-index: 0;
    background: var(--cn-band);
}
@media (max-width: 860px) { .cn-stage::before { height: 120px; } }
/* Every page uses the whole width; paragraphs keep their own measure (.cn-lede, .cn-panel__lede). */
.cn-main { position: relative; z-index: 1; padding: 40px clamp(16px, 4vw, 48px) 48px; width: 100%; }
/* The skip link's target is a landmark, not a control: it takes focus without a ring around the page. */
.rv-page .cn-main:focus-visible { outline: none; }
@media (max-width: 860px) { .cn-main { padding-top: 24px; } }
.cn-head {
    margin: 0 0 24px; padding: 24px 28px; border-radius: var(--rv-radius);
    background: var(--rv-surface); box-shadow: var(--cn-shadow);
}
@media (max-width: 520px) { .cn-head { padding: 20px; } }
.cn-title {
    margin: 0; font-size: 2rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em;
    color: #005c8f; background: var(--cn-brand-deep); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; width: fit-content; max-width: 100%;
}
.cn-lede { margin: 6px 0 0; color: var(--rv-muted); max-width: 60ch; }
.cn-link { display: inline-block; margin-top: 12px; font-weight: 500; }

/* The socket */
.cn-socket {
    flex: none; width: 16px; height: 16px; border-radius: 50%;
    border: 3px solid var(--cn-socket-off); background: transparent;
}
.cn-socket--on { border-color: var(--cn-socket-on); background: radial-gradient(circle, #00c983 0 3px, transparent 3.5px); }
.cn-socket--half { border-color: #4f8fb8; background: linear-gradient(90deg, #4f8fb8 50%, transparent 50%); }
/* The brand mark: a patched socket in the brand gradient. */
.cn-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cn-brand); position: relative; }
.cn-mark::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--rv-surface); }
.cn-mark::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #00c983; z-index: 1; }

.cn-count { font-size: 0.85rem; font-weight: 600; color: var(--rv-ok); }

/* Panels */
.cn-panel { margin: 0 0 16px; padding: 20px; border-radius: var(--rv-radius); background: var(--rv-surface); box-shadow: var(--cn-shadow); }
.cn-panel--flush { padding: 0; overflow: hidden; }
.cn-panel--flush > .cn-panel__bar { padding: 20px 20px 12px; }
.cn-panel__bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.cn-panel__title { margin: 0; font-size: 1.2rem; font-weight: 700; }
.cn-panel__lede { margin: 4px 0 12px; color: var(--rv-muted); max-width: 70ch; }
.cn-panel__lede code { font-size: 0.85em; padding: 1px 5px; border-radius: 4px; background: var(--rv-bg); }
.cn-panel__search { padding: 0 20px 16px; border-bottom: 1px solid var(--rv-line); }
.cn-panel__search--loose { padding: 0; border: 0; margin: 0 0 16px; }
.cn-empty { margin: 0; padding: 16px 0 4px; color: var(--rv-muted); }

.cn-disclosure {
    display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; width: 100%;
    min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.cn-chevron { width: 22px; height: 22px; align-self: center; transition: transform 160ms ease; }

/* Filter chips */
.cn-filter { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: var(--rv-radius-small); background: var(--rv-primary-soft); }
.cn-filter__item { min-height: 38px; padding: 0 16px; white-space: nowrap; border: 0; border-radius: 3px; background: transparent; color: var(--rv-muted); font: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 520px) { .cn-filter__item { padding: 0 11px; font-size: 0.9rem; } }
.cn-filter__item[aria-pressed="true"] { background: var(--rv-surface); color: var(--rv-primary); box-shadow: 0 1px 3px rgba(0, 61, 102, 0.18); }

/* Bay of jacks (rows) */
.cn-bay { list-style: none; margin: 0; padding: 0; }
.cn-jack { padding: 14px 20px; border-top: 1px solid var(--rv-line); }
.cn-panel:not(.cn-panel--flush) .cn-jack { padding: 14px 0; }
.cn-bay > .cn-jack:first-child { border-top: 0; }
.cn-jack__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cn-jack__name { flex: 1 1 14rem; min-width: 0; }
.cn-jack__title { margin: 0; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cn-jack__title code { font-weight: 500; }
.cn-jack__meta { margin: 2px 0 0; color: var(--rv-muted); font-size: 0.9rem; }
.cn-jack__code { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--rv-muted); word-break: break-all; }
.cn-jack__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cn-tag { font-size: 0.78rem; font-weight: 600; padding: 2px 8px; border-radius: var(--rv-radius-small); background: var(--rv-bg); color: var(--rv-muted); }
.cn-tag--on { background: var(--rv-ok-soft); color: var(--rv-ok); }
.cn-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 6px 0 0; font-size: 0.88rem; }
.cn-facts div { display: flex; gap: 6px; }
.cn-facts dt { color: var(--rv-muted); }
.cn-facts dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Cables: the accounts plugged into a jack */
.cn-cables-wrap { margin: 10px 0 0 30px; }
.cn-cables-label { margin: 0 0 4px; font-size: 0.85rem; color: var(--rv-muted); }
.cn-cables { list-style: none; margin: 10px 0 0 30px; padding: 0; border-left: 2px solid #a8e8cf; }
.cn-cables-wrap .cn-cables { margin: 0; }
/* Fixed columns, so "Active" / "Select" and "Remove" line up however long an identifier is. */
.cn-cable { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem auto; align-items: center; gap: 4px 12px; padding: 4px 0 4px 14px; min-height: 44px; }
.cn-cable__who { overflow-wrap: anywhere; }
/* "Default" and "Set as Default" share one centred box, so the label and the button line up on every
   row. The label is plain text with a check, never boxed, so only the button reads as clickable. */
.cn-cable__state { display: flex; justify-content: center; }
.cn-cable__state .rv-btn { width: 100%; }
.cn-cable__state .rv-status { margin: 0; }
.cn-default__check { width: 14px; height: 14px; flex: none; }
.cn-cable__remove { display: flex; justify-content: flex-end; }
.cn-cable__when { justify-self: end; color: var(--rv-muted); font-size: 0.85rem; }
/* An account whose provider refused its credential: still listed, refused by every action until reauthorized. */
.cn-flag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--rv-radius-small); background: var(--rv-warn-soft); color: var(--rv-warn); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.cn-warn-text { color: var(--rv-warn); font-weight: 600; }
.cn-reauth-note { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--rv-radius-small); background: var(--rv-warn-soft); color: var(--rv-warn); font-size: 0.9rem; }
@media (max-width: 520px) { .cn-cable { grid-template-columns: minmax(0, 1fr) auto; } .cn-cable__who { grid-column: 1 / -1; } }

.cn-jack .rv-module-message, .cn-jack .rv-auth-url { margin-left: 30px; }


/* Forms */
.cn-create { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 18px; padding: 16px; border-radius: var(--rv-radius); background: var(--rv-bg); }
.cn-create__name { flex: 1 1 14rem; }
.cn-extend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0 30px; }
/* A row's own controls are small, like its Revoke: the expiry fields match the buttons beside them. */
.cn-extend .rv-input { min-height: 36px; padding: 0 10px; font-size: 0.875rem; }
/* Extend opens under its token: the new expiry's fields, then the current and the proposed expiry side by side. */
.cn-extend-panel { margin: 12px 0 0 30px; padding: 12px 14px; border-radius: var(--rv-radius-small); background: var(--rv-bg); }
.cn-extend-panel .cn-extend { margin: 0; }
.cn-extend__label { font-size: 0.875rem; font-weight: 600; }
.cn-extend__preview { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 10px 0 0; font-size: 0.875rem; }
.cn-extend__preview div { display: flex; gap: 6px; }
.cn-extend__preview dt { color: var(--rv-muted); }
.cn-extend__preview dd { margin: 0; font-variant-numeric: tabular-nums; }
.cn-extend__preview [data-extend-new] { font-weight: 600; }

/* Tabs */
.cn-tabs { border-bottom: 1px solid var(--rv-line); gap: 0; }
.cn-tab { border-bottom: 3px solid transparent; margin-bottom: -1px; }
.cn-tab.tab-active { border-bottom-color: var(--cn-action); }


/* ---------------------------------------------------------------------------------------------
   Console workspace: the connectors on the left, your access on the right.
   --------------------------------------------------------------------------------------------- */
/* Narrow: your access, then the connectors. Wide: the connectors on the left, your access on the right. */
.cn-workspace { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "list"; align-items: start; }
.cn-workspace__list { grid-area: list; margin: 0; }
.cn-workspace__aside { grid-area: aside; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); align-content: start; }
@media (min-width: 1180px) {
    .cn-workspace { grid-template-columns: minmax(0, 1fr) 22rem; grid-template-areas: "list aside"; }
    .cn-workspace__aside { grid-template-columns: 1fr; }
}

.cn-card { padding: 20px; border-radius: var(--rv-radius); background: var(--rv-surface); box-shadow: var(--cn-shadow); }
.cn-card__title { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1rem; font-weight: 600; }
.cn-card__body { margin: 8px 0 14px; color: var(--rv-muted); font-size: 0.92rem; }
.cn-card__body code { font-size: 0.85em; padding: 1px 5px; border-radius: 4px; background: var(--rv-bg); white-space: nowrap; }
.cn-card__hint { margin: 2px 0 0; color: var(--rv-muted); font-size: 0.88rem; }
.cn-card__more { margin-top: 12px; }
.cn-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Credentials: the recommended way (a personal access token) and the discouraged one (the console's
   own sign-in token), side by side in one card. */
.cn-access { margin-top: 16px; padding: 16px; border: 1px solid var(--rv-line); border-radius: var(--rv-radius); }
.cn-access--recommended { border-color: color-mix(in srgb, var(--cn-action) 45%, transparent); }
.cn-access--recommended .cn-card__body { margin-bottom: 4px; }
.cn-access__why { margin: 0 0 12px; color: var(--rv-ink); font-size: 0.88rem; }
.cn-access--discouraged { background: var(--rv-danger-soft); border-color: color-mix(in srgb, var(--rv-danger) 30%, transparent); }
.cn-access__title { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1rem; font-weight: 600; }
.cn-access__title--toggle { display: block; }
.cn-access__title--toggle .cn-disclosure { display: flex; justify-content: space-between; align-items: center; min-height: 36px; font-weight: 600; }
.cn-access__name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Ink on the soft red is 10:1, the link 5.2:1: the box and its tag carry the warning, not the text. */
.cn-access__warning { margin: 4px 0 0; color: var(--rv-ink); font-size: 0.88rem; }
/* The heading already names the token: its row keeps the label for screen readers only, and gives the
   value the room. */
.cn-access--discouraged .rv-secret { grid-template-columns: minmax(0, 1fr) auto; }
.cn-access--discouraged .rv-secret__actions .rv-btn { padding: 0 10px; }
.cn-access--discouraged .rv-secret__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
/* Copying the discouraged token is possible, never the card's highlighted action. */
.cn-access--discouraged .rv-btn--primary { background: var(--rv-surface); color: var(--rv-ink); border-color: var(--rv-line-strong); box-shadow: none; }
.cn-access--discouraged .rv-btn--primary:hover { background: color-mix(in srgb, var(--rv-surface) 90%, var(--rv-ink)); }
.cn-tag--warn { background: var(--rv-surface); color: var(--rv-danger); }
.cn-access ~ .cn-link { margin-top: 14px; }

.cn-toolbar { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--rv-line); }
.cn-toolbar__controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; }
.cn-toolbar__search { flex: 1 1 18rem; }
.cn-toolbar__search .rv-search__input { min-height: 44px; }
.cn-toolbar__search .rv-search__clear { min-height: 44px; }
.cn-toolbar .cn-filter { min-height: 44px; }
.cn-panel__count { margin-left: 6px; font-weight: 500; color: var(--rv-muted); font-variant-numeric: tabular-nums; }

.cn-group__head {
    margin: 0; padding: 10px 20px; display: flex; align-items: baseline; gap: 8px;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--rv-muted); background: var(--rv-bg);
    border-bottom: 1px solid var(--rv-line);
}
.cn-group + .cn-group .cn-group__head { border-top: 1px solid var(--rv-line); }
.cn-group__count { font-weight: 500; font-variant-numeric: tabular-nums; }
.cn-jack__actions .rv-btn { min-width: 0; }

/* Not-connected connectors are most of the console's list: one line each, so it scans quickly. */
.module-card[data-cn-state="off"] { padding-top: 8px; padding-bottom: 8px; }
.module-card[data-cn-state="off"] .cn-jack__name { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.module-card[data-cn-state="off"] .cn-jack__meta { margin: 0; font-size: 0.85rem; }

/* Credential listings: the status filter above the rows. */
.cn-listbar { display: flex; justify-content: flex-end; margin: 0 0 8px; }

/* ---------------------------------------------------------------------------------------------
   Sign-in pages: the patch bay on the left, the card on the right; stacked on narrow screens.
   --------------------------------------------------------------------------------------------- */
.cn-auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; }
@media (max-width: 860px) { .cn-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } }
.cn-auth__bay {
    /* One screen tall and held in place, like the console's rail: a long form scrolls past it
       instead of stretching it, which pulled the brand, the panel and the tagline apart. */
    position: sticky; top: 0; height: 100vh; align-self: start; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    padding: 40px clamp(24px, 5vw, 64px); color: #ffffff;
    /* A light shade at the top and bottom gives the white text there more than the bare 3:1. */
    background:
        linear-gradient(180deg, rgba(0, 40, 80, 0.2) 0, rgba(0, 40, 80, 0) 22%, rgba(0, 40, 80, 0) 68%, rgba(0, 40, 80, 0.24) 100%),
        var(--cn-brand);
}
/* White on the bright gradient is large text only (3:1): the brand is 1.2rem bold, the tagline 1.5rem. */
.cn-auth__brand { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; color: #ffffff; }
.cn-auth__brand .cn-mark { background: #ffffff; }
.cn-auth__brand .cn-mark::before { background: #009c7c; }
.cn-auth__panel {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; width: min(100%, 22rem); padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--rv-radius); background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 61, 102, 0.18);
}
.cn-socket--lg { width: 26px; height: 26px; border-width: 4px; border-color: rgba(255, 255, 255, 0.45); justify-self: center; }
.cn-auth__panel .cn-socket--on { border-color: #ffffff; background: radial-gradient(circle, #ffffff 0 5px, transparent 5.5px); }
.cn-auth__tagline { margin: 0; max-width: 26ch; font-size: 1.5rem; line-height: 1.35; color: #ffffff; font-weight: 700; }
.cn-auth__main {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 40px 20px;
    /* catapa.com's hero wash: a faint green-to-blue glow on the pale page. */
    background: radial-gradient(circle farthest-side at 75% 25%, rgba(0, 201, 131, 0) 15%, rgba(0, 201, 131, 0.05) 65%, rgba(0, 153, 255, 0.1)), var(--rv-bg);
}
.cn-auth__card { width: min(100%, 27rem); padding: 32px; border-radius: var(--rv-radius); background: var(--rv-surface); box-shadow: var(--cn-shadow); }
/* 320px wide (WCAG reflow): a 12px gutter and 20px card padding leave the 240px Google button room. */
@media (max-width: 520px) { .cn-auth__card { padding: 24px 20px; } .cn-auth__main { padding-inline: 12px; } }
.cn-auth__title {
    margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em;
    color: #005c8f; background: var(--cn-brand-deep); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; width: fit-content; max-width: 100%;
}
/* Gradient text is invisible in forced-colors mode: fall back to the system text colour. */
@media (forced-colors: active) { .cn-title, .cn-auth__title { -webkit-text-fill-color: currentColor; background: none; } }
.cn-auth__lede { margin: 4px 0 20px; color: var(--rv-muted); }
.cn-auth__tabs { display: flex; gap: 0; margin: 0 0 18px; border-bottom: 1px solid var(--rv-line); }
.cn-auth__tab {
    flex: 1; min-height: 44px; padding: 0 8px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
    background: transparent; color: var(--rv-muted); font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer;
}
.cn-auth__tab.tab-active { color: var(--rv-ink); border-bottom-color: var(--cn-action); }
.cn-auth__note { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--rv-radius-small); background: var(--rv-primary-soft); font-size: 0.92rem; }
.cn-auth__form { display: flex; flex-direction: column; gap: 16px; }
.cn-auth__form .rv-input { width: 100%; }
.cn-auth__form code, .cn-auth__note code { font-size: 0.85em; }
.cn-auth__submit { width: 100%; }
.cn-auth__google { display: flex; justify-content: center; min-height: 44px; }
.cn-auth__aside { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--rv-line); font-size: 0.9rem; color: var(--rv-muted); }
.cn-auth__aside p { margin: 0 0 4px; }
.cn-auth__terms { margin: 22px 0 0; font-size: 0.82rem; color: var(--rv-muted); text-align: center; }
/* The custom-auth configure page: the sign-in card, wide enough for a connector's settings. */
.cn-auth__card:has(.cn-config) { width: min(100%, 34rem); }
.cn-config custom-input { margin: 0; }
.cn-config custom-input input, .cn-config custom-input textarea { width: 100%; margin-top: 0; }
.cn-config__label { color: var(--rv-ink); }
.cn-config .rv-field__hint { overflow-wrap: anywhere; }
.cn-config__required { color: var(--rv-danger); }
.cn-config .field-error { margin: 4px 0 0; color: var(--rv-danger); font-size: 0.85rem; font-weight: 600; }
.cn-config .cn-reauth-note { margin: 0; }
.cn-config__note-title { margin: 0 0 4px; font-weight: 700; }
.cn-config .cn-reauth-note p { margin: 0; }
.cn-config__accounts { margin: 6px 0 0; padding-left: 20px; overflow-wrap: anywhere; }
.cn-config__back { margin-top: 16px; }
#form-message.hidden { display: none; }
.cn-auth__links { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--rv-muted); text-align: center; }

/* A short window: the sticky panel is one screen tall, so the socket grid steps aside rather
   than crowd the brand and the tagline. */
@media (min-width: 861px) and (max-height: 600px) { .cn-auth__panel { display: none; } }
/* Narrow: the panel steps aside so the card is in view; only the brand and tagline remain. */
@media (max-width: 860px) {
    .cn-auth__bay { position: static; height: auto; overflow: visible; padding: 20px 24px; gap: 8px; justify-content: flex-start; }
    .cn-auth__panel { display: none; }
    .cn-auth__tagline { font-size: 1.2rem; }
    .cn-auth__main { justify-content: flex-start; padding-top: 24px; }
}

/* ---------------------------------------------------------------------------------------------
   Playground tab: pick, fill in, run; the result and the same call as Python beside the form.
   --------------------------------------------------------------------------------------------- */
.cn-play__picker { display: grid; gap: 16px; }
.cn-play__intro .cn-panel__lede { margin-bottom: 0; }
.cn-play__fields { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); align-items: start; }
.cn-play__fields .rv-input, .cn-play__fields select { width: 100%; }
/* Wide: pickers; the form beside its Python (which stays in view, scrolling within itself); the result,
   full width. Narrow: pickers, the Python folded, form, result: a run's answer sits right under its
   Run, and nothing below the result is pushed when the answer arrives. */
.cn-play { display: flex; flex-direction: column; gap: 16px; }
.cn-play.hidden { display: none; }
.cn-play > .cn-panel, .cn-play__work > .cn-panel { margin: 0; }
.cn-play__work { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.cn-play__code { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
@media (max-width: 1179px) {
    .cn-play__work { display: contents; }
    .cn-play__code { order: 1; position: static; max-height: none; }
    .cn-play__form { order: 2; }
    .cn-play__result { order: 3; }
    /* The status line wraps to two lines here: it keeps that room before the first answer. */
    #pg-result-meta { display: flex; min-height: 4em; align-content: flex-start; }
    .cn-play__result > .cn-play__result-bar { align-items: flex-start; }
}
.cn-play__heading { margin: 0; font-size: 1rem; font-weight: 700; }
.cn-play__result-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cn-play__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; color: var(--rv-muted); font-size: 0.85rem; }
.cn-play__meta:empty { display: none; }
.cn-play__result-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.cn-play__result-tools.is-idle { visibility: hidden; }
.cn-play__stale { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--rv-radius-small); background: var(--rv-highlight); }
.cn-play__stale.hidden { display: none; }
.cn-play__stale p { margin: 0; font-weight: 600; }
.cn-res__request { padding-bottom: 12px; border-bottom: 1px solid var(--rv-line); }
.cn-res__request .cn-play__json { margin-top: 6px; max-height: 16rem; }
.cn-play__result-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#pg-fold { display: inline-flex; gap: 8px; }
#pg-fold.hidden { display: none; }
#pg-result-pretty, .cn-play__json { max-height: min(70vh, 40rem); overflow: auto; }
#pg-result-pretty > .cn-empty { padding-top: 12px; }
.cn-play__json {
    margin: 0; padding: 12px; border-radius: var(--rv-radius-small); background: var(--rv-bg);
    font-size: 0.82rem; line-height: 1.5; white-space: pre; tab-size: 2;
}
/* Status: green or red, each with a word, never colour alone. */
.cn-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--rv-radius-small); font-weight: 700; font-size: 0.8rem; background: var(--rv-bg); color: var(--rv-ink); }
.cn-badge--ok { background: var(--rv-ok-soft); color: var(--rv-ok); }
.cn-badge--error { background: var(--rv-danger-soft); color: var(--rv-danger); }

/* The action's form, rendered by the server, in the console's look. */
.cn-play__form .action-form { margin: 0; }
.cn-play__form .action-form > h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; }
.cn-play__form .action-form > p { margin: 8px 0; color: var(--rv-muted); font-size: 0.85rem; font-family: var(--rv-mono); overflow-wrap: anywhere; }
.cn-play__docs { margin: 4px 0 12px; }
.cn-play__docs svg { width: 16px; height: 16px; }
.cn-play__form .request-sample { margin: 0 0 16px; }
.cn-play__form .request-sample summary { color: var(--rv-primary); font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.cn-play__form .request-sample-body { margin: 8px 0 0; padding: 10px; border-radius: var(--rv-radius-small); background: var(--rv-bg); font-size: 0.8rem; overflow-x: auto; }
.cn-play__form form { display: grid; gap: 16px; }
.cn-play__form .form-group label { color: var(--rv-ink); font-weight: 600; font-size: 0.9rem; }
.cn-play__form .form-group label .text-gray-500 { color: var(--rv-muted); font-weight: 400; font-family: var(--rv-mono); font-size: 0.8rem; }
.cn-play__form .form-group label .text-red-500 { color: var(--rv-danger); }
.cn-play__form custom-input input:not([type="checkbox"]), .cn-play__form custom-input textarea,
.cn-config custom-input input:not([type="checkbox"]), .cn-config custom-input textarea {
    min-height: 40px; padding: 8px 10px; border: 1px solid var(--rv-line-strong); border-radius: var(--rv-radius-small);
    background: var(--rv-surface); color: var(--rv-ink); font: inherit; font-size: 0.95rem; box-shadow: none;
}
.cn-play__form custom-input input:focus, .cn-play__form custom-input textarea:focus,
.cn-config custom-input input:focus, .cn-config custom-input textarea:focus { border-color: var(--rv-primary); }
.cn-play__run { justify-self: start; }
.cn-play__inline-result { display: none !important; }

/* The four code steps: the boilerplate folds away, the execution step stays open. */
.cn-play__code .cn-play__meta { margin-bottom: 8px; }
.cn-play__step { border-top: 1px solid var(--rv-line); }
.cn-play__step > summary { padding: 10px 0; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.cn-play__step-body { position: relative; padding: 0 0 12px; }
.cn-play__step-copy { position: absolute; top: 6px; right: 6px; }
.cn-play__step-body .rv-code-step__code { padding-right: 76px; min-height: 48px; }

/* The formatted result. */
.cn-res { font-size: 0.9rem; }
.cn-res__root { display: grid; gap: 12px; }
.cn-res__fields { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.cn-res__key { font-family: var(--rv-mono); font-size: 0.82rem; color: var(--rv-muted); padding-top: 1px; overflow-wrap: anywhere; }
.cn-res__value { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cn-res__null { color: var(--rv-muted); font-style: italic; }
.cn-res__num, .cn-res__bool { font-family: var(--rv-mono); font-size: 0.85rem; }
.cn-res__long { display: block; white-space: pre-wrap; }
.cn-res__link { word-break: break-all; }
.cn-res__nest > summary { color: var(--rv-muted); font-size: 0.85rem; cursor: pointer; }
.cn-res__nest[open] > summary { margin-bottom: 6px; }
.cn-res__nest > :not(summary) { padding-left: 12px; border-left: 2px solid var(--rv-line); }
.cn-res__meta { padding-top: 12px; border-top: 1px solid var(--rv-line); }
.cn-res__list { margin: 0; padding-left: 1.4rem; display: grid; gap: 4px; }
.cn-res__block { display: grid; gap: 6px; }
.cn-res__note { margin: 0; color: var(--rv-muted); font-size: 0.82rem; }
.cn-res__error { margin: 0; padding: 10px 12px; border-radius: var(--rv-radius-small); background: var(--rv-danger-soft); color: var(--rv-danger); font-weight: 600; }
.cn-res__table-wrap { overflow: auto; max-height: 28rem; border: 1px solid var(--rv-line); border-radius: var(--rv-radius-small); }
.cn-res__table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.cn-res__table th, .cn-res__table td { padding: 6px 10px; border-bottom: 1px solid var(--rv-line); text-align: left; vertical-align: top; }
.cn-res__table th { position: sticky; top: 0; background: var(--rv-bg); font-family: var(--rv-mono); font-size: 0.78rem; color: var(--rv-muted); font-weight: 600; white-space: nowrap; }
.cn-res__table tbody tr:last-child td { border-bottom: 0; }
/* One line per cell, so a row reads across; long text wraps in a column of its own, and a long link
   is cut short with the whole address in its tooltip and in the JSON. */
.cn-res__table td { white-space: nowrap; }
.cn-res__table td .cn-res__long { min-width: 16rem; max-width: 28rem; white-space: normal; }
.cn-res__table td .cn-res__link { display: inline-block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; word-break: normal; }
.cn-res__table td .cn-res__nest > :not(summary) { white-space: normal; }
/* A record opened inside a cell: a table cell has no width of its own to share, so its values get a
   real minimum instead of shrinking to nothing (the table scrolls sideways when it grows). */
.cn-res__table td .cn-res__fields { grid-template-columns: max-content minmax(16rem, max-content); }
.cn-res__table td .cn-res__list { min-width: 16rem; }
/* A shortened link never reaches past its own column. */
.cn-res__table td .cn-res__value .cn-res__link, .cn-res__table td .cn-res__list .cn-res__link { max-width: 100%; }

/* No layout shift when a page grows long enough to scroll: the scrollbar's room is always kept. */
html { scrollbar-gutter: stable; }

/* Connectors: the way into the Playground, quiet beside the account count. */
.cn-try { font-weight: 600; white-space: nowrap; }

/* Searchable picker (rvCombobox): a text field over a native select, with a listbox below it. */
.cn-combo { position: relative; }
.cn-combo__input { width: 100%; padding-right: 36px; text-overflow: ellipsis; }
.cn-combo__input::placeholder { color: var(--rv-muted); opacity: 1; }
.cn-combo.is-disabled .cn-combo__input { background: var(--rv-bg); cursor: not-allowed; }
.cn-combo__toggle {
    position: absolute; top: 0; right: 0; bottom: 0; width: 36px; display: flex; align-items: center; justify-content: center;
    color: var(--rv-muted); cursor: pointer;
}
.cn-combo__toggle::before {
    content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.cn-combo.is-disabled .cn-combo__toggle { cursor: not-allowed; }
.cn-combo__list {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; margin: 0; padding: 4px; list-style: none;
    max-height: 20rem; overflow: auto; background: var(--rv-surface); border: 1px solid var(--rv-line-strong);
    border-radius: var(--rv-radius-small); box-shadow: 0 12px 32px rgba(0, 61, 102, 0.18);
}
.cn-combo__list[hidden] { display: none; }
.cn-combo__option { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 3px; cursor: pointer; }
.cn-combo__option.is-active { background: var(--rv-primary-soft); }
.cn-combo__option.is-current .cn-combo__label { font-weight: 700; }
.cn-combo__label { min-width: 0; overflow-wrap: anywhere; }
.cn-combo__hint { flex: none; max-width: 55%; color: var(--rv-muted); font-size: 0.82rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-combo__group { padding: 8px 10px 4px; color: var(--rv-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cn-combo__empty, .cn-combo__count { padding: 8px 10px; color: var(--rv-muted); font-size: 0.85rem; }
.cn-combo__count { border-top: 1px solid var(--rv-line); margin-top: 4px; }

/* Connecting an account from the Playground. */
.cn-play__connect { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--rv-radius-small); background: var(--rv-primary-soft); }
.cn-play__connect.hidden { display: none; }
.cn-play__connect--warn { background: var(--rv-warn-soft); color: var(--rv-warn); }
.cn-play__connect-message { margin: 0; }
.cn-play__connect-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cn-play__connect-card { display: grid; gap: 12px; justify-items: start; }
.cn-play__connect-card p { margin: 0; color: var(--rv-muted); }