/* GENERATED by build-theme.mjs — do not edit. Edit resources/css/filament/admin/*. */
/* =============================================================================
   theme.css — PayPlus Subscriptions admin (Recharge-style)
   THE ONLY DECLARATION SITE for --rc-* design tokens.

   Source of truth: docs/ux/00-design-system.md (owned by product-ux-architect).
   Implemented by:  admin-design-system.

   RULES (CLAUDE.md §10 / agent §1):
     - Every color/radius/shadow/spacing literal lives here as a --rc-* var.
     - Components consume the vars through classes; they NEVER re-declare a token.
     - No raw hex anywhere outside this file (emails exempt).
     - RTL is a flip: components use logical properties; this file only flips the
       few directional glyphs + remaps Filament's primary onto the brand.

   This file is published to public/css/rc-admin.css and loaded into the Filament
   panel via FilamentAsset::register(Css::make(...)) in AdminPanelProvider — a
   Vite-free path (chosen for build reliability on this Windows/Hebrew project
   path; the brief sanctions this alternative). It is NOT compiled by Tailwind,
   so it carries no @import of Filament internals.
   ========================================================================== */

:root {
    /* --- 1.1 Brand + surface (00-design-system §1.1) --- */
    --rc-blue: #3B5BDB;
    --rc-blue-600: #2F4BC4;
    --rc-blue-bg: #EEF2FE;
    --rc-bg: #F8F8F5;
    --rc-card: #FFFFFF;
    --rc-surface: var(--rc-card);
    --rc-border: #E6E6E1;
    --rc-border-strong: #D4D4CE;

    /* --- 1.2 Text --- */
    --rc-ink: #1A1A1A;
    --rc-ink-muted: #6B7280;
    --rc-ink-on-primary: #FFFFFF;
    --rc-link: var(--rc-blue);

    /* --- 1.3 Status / semantic --- */
    --rc-green: #1E9E6A;   --rc-green-bg: #E6F4EE;
    --rc-gray: #6B7280;    --rc-gray-bg: #F0F0EE;
    --rc-teal: #0FA3A3;    --rc-teal-bg: #E2F5F5;
    --rc-red: #D64545;     --rc-red-bg: #FBE9E9;
    --rc-amber: #C77700;   --rc-amber-bg: #FBF1E0;

    /* --- 2. Typography scale --- */
    --rc-font: "Inter", "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rc-type-title: 700 22px/1.25 var(--rc-font);
    --rc-type-kpi: 600 28px/1.1 var(--rc-font);
    --rc-type-h: 600 18px/1.3 var(--rc-font);
    --rc-type-subh: 600 15px/1.35 var(--rc-font);
    --rc-type-body: 450 14px/1.5 var(--rc-font);
    --rc-type-body-strong: 600 14px/1.5 var(--rc-font);
    --rc-type-label: 600 12px/1.4 var(--rc-font);
    --rc-type-caption: 450 12px/1.4 var(--rc-font);
    --rc-kpi-size: 28px;

    /* --- 3.1 Spacing scale --- */
    --rc-space-1: 4px;  --rc-space-2: 8px;  --rc-space-3: 12px; --rc-space-4: 16px;
    --rc-space-5: 24px; --rc-space-6: 32px; --rc-space-7: 48px; --rc-space-8: 64px;

    /* --- 3.2 Radius --- */
    --rc-radius-card: 12px;
    --rc-radius-control: 8px;
    --rc-radius-pill: 999px;

    /* --- 3.3 Shadow / elevation --- */
    --rc-shadow-card: 0 1px 2px rgba(16, 24, 40, .06);
    --rc-shadow-hover: 0 4px 12px rgba(16, 24, 40, .10);
    --rc-shadow-pop: 0 8px 24px rgba(16, 24, 40, .12);
    --rc-ring: 0 0 0 3px rgba(59, 91, 219, .30);
    /* Modal/drawer scrim (same ink base as the shadow tokens). */
    --rc-scrim: rgba(16, 24, 40, .35);

    /* --- 3.4 Layout --- */
    --rc-sidebar-w: 248px;
    --rc-content-max: 1200px;
    --rc-gutter: var(--rc-space-6);

    /* --- Re-map Filament's own primary ramp onto the brand so native buttons,
           links, toggles, active states inherit Recharge blue for free. Filament
           reads these RGB-triplet custom props. --- */
    --primary-50:  238, 242, 254;
    --primary-100: 226, 232, 252;
    --primary-200: 197, 209, 248;
    --primary-300: 152, 172, 242;
    --primary-400: 102, 130, 234;
    --primary-500: 59, 91, 219;
    --primary-600: 47, 75, 196;
    --primary-700: 40, 63, 165;
    --primary-800: 35, 54, 138;
    --primary-900: 31, 47, 115;
    --primary-950: 20, 30, 74;
}

/* === Filament panel surface re-skin (via stable .fi-* hooks) ============== */
.fi-body,
.fi-simple-layout {
    background-color: var(--rc-bg);
    font-family: var(--rc-font);
    color: var(--rc-ink);
}

/* Sidebar = card surface; tight Recharge density. */
.fi-sidebar,
.fi-sidebar-nav {
    background-color: var(--rc-card);
}
.fi-sidebar {
    border-inline-end: 1px solid var(--rc-border);
}

/* Brand row wordmark spacing. */
.fi-sidebar-header {
    border-block-end: 1px solid var(--rc-border);
}

/* Active nav item: blue-bg wash + a brand inline-start accent rail (flips in RTL). */
.fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: var(--rc-blue-bg);
    border-inline-start: 3px solid var(--rc-blue);
    color: var(--rc-blue-600);
    font-weight: 600;
}
.fi-sidebar-item > .fi-sidebar-item-button {
    border-inline-start: 3px solid transparent;
    border-radius: 0 var(--rc-radius-control) var(--rc-radius-control) 0;
}
[dir="rtl"] .fi-sidebar-item > .fi-sidebar-item-button {
    border-radius: var(--rc-radius-control) 0 0 var(--rc-radius-control);
}

.fi-sidebar-group-label {
    font: var(--rc-type-label);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rc-ink-muted);
}

/* Cards / sections / tables — the Recharge card look (border + soft shadow). */
.fi-section,
.fi-wi,
.fi-ta,
.fi-modal-window {
    background-color: var(--rc-card);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-card);
    box-shadow: var(--rc-shadow-card);
}

.fi-section-header-heading,
.fi-header-heading {
    color: var(--rc-ink);
}
.fi-header-heading {
    font: var(--rc-type-title);
}

/* Table density + hairlines (skin only — never re-template Filament's table). */
.fi-ta-header-cell {
    font: var(--rc-type-label);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rc-ink-muted);
    border-block-end: 1px solid var(--rc-border-strong);
}
.fi-ta-row {
    border-block-end: 1px solid var(--rc-border);
}
.fi-ta-row:hover {
    background-color: var(--rc-blue-bg);
}
.fi-ta-record-selected {
    background-color: var(--rc-blue-bg);
}

/* Focus ring uses the brand. */
.fi-input:focus,
.fi-select-input:focus,
.fi-btn:focus-visible {
    box-shadow: var(--rc-ring);
    outline: none;
}

/* === Hebrew RTL: typography + directional glyphs ========================== */
/* Hebrew has no case → no uppercase + no tracking (Heebo letter-spacing breaks). */
[dir="rtl"] .fi-sidebar-group-label,
[dir="rtl"] .fi-ta-header-cell,
[dir="rtl"] .rc-label,
[dir="rtl"] .rc-kpi__label {
    text-transform: none;
    letter-spacing: normal;
}
[dir="rtl"] .fi-sidebar-nav {
    text-align: start;
}

/* accordion.css — collapsible section (component §4.9)
   TOKENS: --rc-card --rc-border --rc-radius-card --rc-type-h --rc-ink --rc-shadow-card
   RTL: chevron points to start-side; flips via scaleX on the directional glyph only. */

.rc-accordion {
    background: var(--rc-card);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-card);
    box-shadow: var(--rc-shadow-card);
    overflow: hidden;
}
.rc-accordion + .rc-accordion { margin-block-start: var(--rc-space-4); }

.rc-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    padding: var(--rc-space-4) var(--rc-space-5);
    background: none;
    border: 0;
    cursor: pointer;
    font: var(--rc-type-h);
    color: var(--rc-ink);
    text-align: start;
}
.rc-accordion__title { display: inline-flex; align-items: center; gap: var(--rc-space-3); }

.rc-accordion__chevron {
    inline-size: 16px;
    block-size: 16px;
    color: var(--rc-ink-muted);
    transition: transform .18s ease;
}
[dir="rtl"] .rc-accordion__chevron { transform: scaleX(-1); }
.rc-accordion[data-open="true"] .rc-accordion__chevron { transform: rotate(90deg); }
[dir="rtl"] .rc-accordion[data-open="true"] .rc-accordion__chevron { transform: scaleX(-1) rotate(90deg); }

/* grid 0fr/1fr trick — no max-height magic number, no inline style. */
.rc-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .2s ease;
}
.rc-accordion[data-open="true"] .rc-accordion__panel { grid-template-rows: 1fr; }
.rc-accordion__panel > div { overflow: hidden; }
.rc-accordion__body { padding: 0 var(--rc-space-5) var(--rc-space-5); border-block-start: 1px solid var(--rc-border); padding-block-start: var(--rc-space-4); }

/* badge.css — status pill (component §4.2)
   TOKENS: --rc-radius-pill --rc-type-label --rc-{green|gray|teal|red|amber}
           + matching *-bg backgrounds. One class per semantic tone; the PHP
           StatusBadge const map decides which tone a status string maps to. */

.rc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--rc-space-1);
    padding-block: 2px;
    padding-inline: var(--rc-space-3);
    border-radius: var(--rc-radius-pill);
    font: var(--rc-type-label);
    white-space: nowrap;
}
[dir="rtl"] .rc-badge {
    text-transform: none;
    letter-spacing: normal;
}

.rc-badge__dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--rc-radius-pill);
    background: currentColor;
}

.rc-badge--green   { color: var(--rc-green); background: var(--rc-green-bg); }
.rc-badge--gray    { color: var(--rc-gray);  background: var(--rc-gray-bg); }
.rc-badge--neutral { color: var(--rc-gray);  background: var(--rc-gray-bg); }
.rc-badge--teal    { color: var(--rc-teal);  background: var(--rc-teal-bg); }
.rc-badge--red     { color: var(--rc-red);   background: var(--rc-red-bg); }
.rc-badge--danger  { color: var(--rc-red);   background: var(--rc-red-bg); }
.rc-badge--amber   { color: var(--rc-amber); background: var(--rc-amber-bg); }
.rc-badge--warning { color: var(--rc-amber); background: var(--rc-amber-bg); }
.rc-badge--success { color: var(--rc-green); background: var(--rc-green-bg); }

/* Standalone payment-status dot (Customers list §1.3). */
.rc-dot {
    display: inline-block;
    inline-size: 9px;
    block-size: 9px;
    border-radius: var(--rc-radius-pill);
}
.rc-dot--green { background: var(--rc-green); }
.rc-dot--amber { background: var(--rc-amber); }
.rc-dot--red   { background: var(--rc-red); }
.rc-dot--gray  { background: var(--rc-gray); }

/* buttons.css — CTAs (components §4.5/§4.6/§4.7)
   TOKENS: --rc-blue --rc-blue-600 --rc-ink-on-primary --rc-card --rc-border
           --rc-border-strong --rc-ink --rc-red --rc-red-bg --rc-radius-control --rc-ring */

.rc-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rc-space-2);
    padding-block: var(--rc-space-2);
    padding-inline: var(--rc-space-4);
    border-radius: var(--rc-radius-control);
    font: var(--rc-type-body-strong);
    cursor: pointer;
    border: 1px solid transparent;
    box-shadow: var(--rc-shadow-card);
    transition: background-color .12s ease, border-color .12s ease;
    text-decoration: none;
}
.rc-cta:focus-visible { box-shadow: var(--rc-ring); outline: none; }
.rc-cta[disabled], .rc-cta--loading { opacity: .55; pointer-events: none; box-shadow: none; }

/* primary (blue fill) */
.rc-cta--primary {
    background: var(--rc-blue);
    color: var(--rc-ink-on-primary);
}
.rc-cta--primary:hover { background: var(--rc-blue-600); }

/* secondary (white + border) */
.rc-cta--ghost {
    background: var(--rc-card);
    border-color: var(--rc-border);
    color: var(--rc-ink);
    box-shadow: none;
}
.rc-cta--ghost:hover { border-color: var(--rc-border-strong); }

/* destructive */
.rc-cta--danger {
    background: var(--rc-card);
    border-color: var(--rc-red);
    color: var(--rc-red);
    box-shadow: none;
}
.rc-cta--danger:hover { background: var(--rc-red-bg); }

/* + Add filter pill (component §4.4) — restyle Filament's native control. */
.rc-add-filter,
.fi-ta-filters-trigger .fi-btn {
    border: 1px dashed var(--rc-border-strong);
    border-radius: var(--rc-radius-control);
    color: var(--rc-ink-muted);
    background: transparent;
    box-shadow: none;
}
.fi-ta-filters-trigger .fi-btn:hover {
    border-color: var(--rc-blue);
    color: var(--rc-blue);
}

/* =============================================================================
   configure-drawer.css — the Flow-Builder slide-over drawers (docs/ux/40,
   Recharge post-purchase reference). A right-side drawer + scrim opened from a
   node in the Flow Builder. Two drawers share this markup: "Configure cross-sell"
   (Offer node) and "Configure trigger" (green Trigger node — a radio over
   match_type + the one relevant sub-field, .rc-drawer__subfield / .rc-input-prefix).
   Sectioned body, radios-with-descriptions, blue/yellow callouts (reusing
   .rc-pp-info / .rc-pp-radio-group), a sticky footer (primary "Close"/Save).
   TOKENS: --rc-card --rc-bg --rc-border --rc-border-strong --rc-blue --rc-blue-bg
           --rc-ink --rc-ink-muted --rc-radius-card --rc-radius-control
           --rc-radius-pill --rc-shadow-pop --rc-ring --rc-space-* --rc-type-*
           --rc-teal --rc-teal-bg
   RTL: drawer docks to inline-end; logical properties only. No left/right, no raw
        values, no inline CSS.
   ========================================================================== */

/* Overlay container (covers the viewport; the panel docks inline-end) */
.rc-drawer {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    justify-content: flex-end;
}
[dir="rtl"] .rc-drawer { justify-content: flex-start; }

.rc-drawer__scrim {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: var(--rc-scrim);
    cursor: pointer;
}

/* The panel itself */
.rc-drawer__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    inline-size: 460px;
    max-inline-size: 92vw;
    block-size: 100%;
    background: var(--rc-card);
    box-shadow: var(--rc-shadow-pop);
    border-inline-start: 1px solid var(--rc-border);
}

/* Header */
.rc-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rc-space-3);
    padding: var(--rc-space-5);
    border-block-end: 1px solid var(--rc-border);
}
.rc-drawer__title { font: var(--rc-type-h); color: var(--rc-ink); margin: 0; }
.rc-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--rc-radius-pill);
    border: 1px solid var(--rc-border);
    background: var(--rc-card);
    color: var(--rc-ink-muted);
    cursor: pointer;
}
.rc-drawer__close:hover { border-color: var(--rc-border-strong); color: var(--rc-ink); }
.rc-drawer__close-icon { inline-size: 16px; block-size: 16px; }

/* Scrollable body */
.rc-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--rc-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--rc-space-5);
}
.rc-drawer__subtitle { font: var(--rc-type-body); color: var(--rc-ink-muted); margin: 0; }

/* DEV-ONLY screenshot mode (?shot=1): expand to full content height so the
   harness captures the whole drawer in one fullPage image. Never reached in
   production (hard-gated in the Blade). */
.rc-drawer--shot { position: absolute; block-size: auto; }
.rc-drawer--shot .rc-drawer__panel { block-size: auto; }
.rc-drawer--shot .rc-drawer__body { overflow-y: visible; }

/* Selected-product card inside the "Specific products" radio */
.rc-drawer__product {
    display: flex;
    align-items: center;
    gap: var(--rc-space-3);
    margin-block-start: var(--rc-space-3);
    padding: var(--rc-space-3);
    background: var(--rc-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
}
.rc-drawer__product-info { display: flex; flex-direction: column; gap: 1px; }

/* Sticky footer */
.rc-drawer__foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rc-space-3);
    padding: var(--rc-space-4) var(--rc-space-5);
    border-block-start: 1px solid var(--rc-border);
    background: var(--rc-card);
}

/* ---------------------------------------------- Shared form primitives --- */

.rc-field { display: flex; flex-direction: column; gap: var(--rc-space-3); border: 0; padding: 0; margin: 0; }
.rc-field__label {
    font: var(--rc-type-body-strong);
    color: var(--rc-ink);
    padding: 0;
}
.rc-field__control { align-self: stretch; }

/* Radio title/hint (extends the existing .rc-pp-radio layout) */
.rc-pp-radio__title { font: var(--rc-type-body-strong); color: var(--rc-ink); }
.rc-pp-radio__hint { font: var(--rc-type-caption); color: var(--rc-ink-muted); }

/* Checkbox row (Apply discount on top / Show timer) */
.rc-check {
    display: flex;
    align-items: flex-start;
    gap: var(--rc-space-3);
    cursor: pointer;
}
.rc-check input { margin-block-start: 3px; accent-color: var(--rc-blue); }
.rc-check__body { display: flex; flex-direction: column; gap: var(--rc-space-1); }
.rc-check__title { font: var(--rc-type-body-strong); color: var(--rc-ink); }
.rc-check__hint { font: var(--rc-type-caption); color: var(--rc-ink-muted); }

/* Info pill (e.g. "This product only has 1 variant") */
.rc-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--rc-space-2);
    align-self: flex-start;
    padding-block: var(--rc-space-1);
    padding-inline: var(--rc-space-3);
    border-radius: var(--rc-radius-pill);
    font: var(--rc-type-caption);
}
.rc-pill--info { background: var(--rc-blue-bg); color: var(--rc-blue); }
.rc-pill__icon { inline-size: 14px; block-size: 14px; }

/* Plain number/text input + a suffix unit (the "%" discount input) */
.rc-input {
    inline-size: 100%;
    padding-block: var(--rc-space-2);
    padding-inline: var(--rc-space-3);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    background: var(--rc-card);
    font: var(--rc-type-body);
    color: var(--rc-ink);
}
.rc-input:focus-visible { outline: none; border-color: var(--rc-blue); box-shadow: var(--rc-ring); }
.rc-input-suffix {
    display: flex;
    align-items: stretch;
    max-inline-size: 160px;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    overflow: hidden;
    background: var(--rc-card);
}
.rc-input-suffix .rc-input {
    border: 0;
    border-radius: 0;
}
.rc-input-suffix .rc-input:focus-visible { box-shadow: none; }
.rc-input-suffix:focus-within { border-color: var(--rc-blue); box-shadow: var(--rc-ring); }
.rc-input-suffix__unit {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--rc-space-3);
    background: var(--rc-bg);
    border-inline-start: 1px solid var(--rc-border);
    font: var(--rc-type-body-strong);
    color: var(--rc-ink-muted);
}

/* Money input with a leading currency unit (the "Order value over ₪X" field).
   Mirrors .rc-input-suffix but the unit leads (inline-start) — logical, so it
   sits on the correct side in RTL. */
.rc-input-prefix {
    display: flex;
    align-items: stretch;
    max-inline-size: 200px;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    overflow: hidden;
    background: var(--rc-card);
}
.rc-input-prefix .rc-input { border: 0; border-radius: 0; }
.rc-input-prefix .rc-input:focus-visible { box-shadow: none; }
.rc-input-prefix:focus-within { border-color: var(--rc-blue); box-shadow: var(--rc-ring); }
.rc-input-prefix__unit {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--rc-space-3);
    background: var(--rc-bg);
    border-inline-end: 1px solid var(--rc-border);
    font: var(--rc-type-body-strong);
    color: var(--rc-ink-muted);
}

/* Conditional sub-field revealed under a selected trigger radio (Alpine x-show).
   Stacks its label + control; indents from the radio body via the group gap. */
.rc-drawer__subfield {
    display: flex;
    flex-direction: column;
    gap: var(--rc-space-2);
    margin-block-start: var(--rc-space-3);
}

/* Alpine x-show guard: keep the element hidden until Alpine evaluates, so the
   sub-field never flashes on load before its match_type is the selected one. */
[x-cloak] { display: none !important; }

/* Inline link (e.g. "store's settings") */
.rc-link { color: var(--rc-link); text-decoration: none; }
.rc-link:hover { text-decoration: underline; }

/* CTA leading icon + ghost-disabled state (footer "View post-purchase") */
.rc-cta__icon { inline-size: 16px; block-size: 16px; }
.rc-cta--ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--rc-space-2);
}
.rc-cta--ghost[disabled] { opacity: .5; cursor: not-allowed; }

/* data-table.css — list-view density + section layout helpers
   TOKENS: --rc-card --rc-border --rc-radius-card --rc-shadow-card --rc-type-*
   Skins Filament's native table via stable .fi-* hooks (no re-templating). */

/* page-level utility wrappers used by custom pages (dashboard, settings). */
.rc-stack { display: flex; flex-direction: column; gap: var(--rc-space-5); }
.rc-stack--tight { gap: var(--rc-space-3); }
.rc-row { display: flex; align-items: center; gap: var(--rc-space-3); flex-wrap: wrap; }
.rc-row--between { justify-content: space-between; }
.rc-grow { flex: 1 1 auto; }

.rc-section {
    background: var(--rc-card);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-card);
    box-shadow: var(--rc-shadow-card);
    padding: var(--rc-space-5);
}
.rc-section__title { font: var(--rc-type-h); color: var(--rc-ink); margin-block-end: var(--rc-space-4); }
.rc-section__subtitle { font: var(--rc-type-subh); color: var(--rc-ink); }

.rc-label { font: var(--rc-type-label); text-transform: uppercase; letter-spacing: .04em; color: var(--rc-ink-muted); }
.rc-muted { color: var(--rc-ink-muted); font: var(--rc-type-body); }
.rc-strong { font: var(--rc-type-body-strong); color: var(--rc-ink); }

/* key/value rows for detail panels (component §4.10). */
.rc-kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--rc-space-2) var(--rc-space-4); }
.rc-kv__k { font: var(--rc-type-label); text-transform: uppercase; letter-spacing: .04em; color: var(--rc-ink-muted); }
[dir="rtl"] .rc-kv__k { text-transform: none; letter-spacing: normal; }
.rc-kv__v { font: var(--rc-type-body-strong); color: var(--rc-ink); }

/* monospace / LTR-locked numeric + masked refs inside RTL rows. */
.rc-ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }

/* simple plain table for schedule + ledger inside detail pages. */
.rc-table { inline-size: 100%; border-collapse: collapse; }
.rc-table th {
    font: var(--rc-type-label); text-transform: uppercase; letter-spacing: .04em;
    color: var(--rc-ink-muted); text-align: start;
    padding: var(--rc-space-2) var(--rc-space-3);
    border-block-end: 1px solid var(--rc-border-strong);
}
[dir="rtl"] .rc-table th { text-transform: none; letter-spacing: normal; }
.rc-table td {
    font: var(--rc-type-body); color: var(--rc-ink);
    padding: var(--rc-space-3);
    border-block-end: 1px solid var(--rc-border);
}
.rc-table tbody tr:hover { background: var(--rc-blue-bg); }

/* 70/30 detail split (--rc-split). Mirrors in RTL because grid columns follow
   the writing direction; no left/right used. Collapses to one column on narrow. */
.rc-detail {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--rc-space-5);
    align-items: start;
}
@media (max-width: 900px) {
    .rc-detail { grid-template-columns: 1fr; }
}

/* anchor-as-card reset for clickable subscription rows. */
a.rc-railed { display: flex; flex-direction: column; gap: var(--rc-space-1); text-decoration: none; padding-block: var(--rc-space-3); }
a.rc-railed:hover { background: var(--rc-blue-bg); }

/* detail.css — subscription/customer detail extras: progress bar, consent, banner
   TOKENS: --rc-green --rc-amber --rc-red --rc-blue --rc-blue-bg --rc-border
           --rc-radius-card --rc-radius-pill --rc-amber-bg --rc-type-* */

/* installments paid-of-total progress (fills from start-side; flips in RTL). */
.rc-progress { inline-size: 100%; }
.rc-progress__track {
    inline-size: 100%; block-size: 8px;
    background: var(--rc-gray-bg);
    border-radius: var(--rc-radius-pill);
    overflow: hidden;
}
.rc-progress__fill {
    block-size: 100%;
    background: var(--rc-green);
    border-radius: var(--rc-radius-pill);
}
.rc-progress__meta { display: flex; justify-content: space-between; margin-block-start: var(--rc-space-2); font: var(--rc-type-caption); color: var(--rc-ink-muted); }

/* left-rule status accents on subscription cards (§4.11). */
.rc-railed { border-inline-start: 3px solid var(--rc-border); padding-inline-start: var(--rc-space-4); }
.rc-railed--failed { border-inline-start-color: var(--rc-red); }
.rc-railed--awaiting { border-inline-start-color: var(--rc-amber); }
.rc-railed--active { border-inline-start-color: var(--rc-green); }

/* fulfillment-lock chip. */
.rc-lock {
    display: inline-flex; align-items: center; gap: var(--rc-space-2);
    padding-block: 2px; padding-inline: var(--rc-space-3);
    border-radius: var(--rc-radius-pill);
    background: var(--rc-amber-bg); color: var(--rc-amber);
    font: var(--rc-type-label); text-transform: none; letter-spacing: normal;
}

/* consent disclosure block (component §4.16 — saved-token charges). */
.rc-consent {
    border: 1px solid var(--rc-border);
    border-inline-start: 3px solid var(--rc-amber);
    background: var(--rc-amber-bg);
    border-radius: var(--rc-radius-card);
    padding: var(--rc-space-4);
    font: var(--rc-type-body);
    color: var(--rc-ink);
}

/* dashboard onboarding / promo banner. */
.rc-banner {
    display: flex; align-items: center; justify-content: space-between; gap: var(--rc-space-4);
    background: var(--rc-blue-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-card);
    padding: var(--rc-space-5);
}
.rc-banner__text { display: flex; flex-direction: column; gap: var(--rc-space-1); }
.rc-banner__title { font: var(--rc-type-subh); color: var(--rc-ink); }
.rc-banner__body { font: var(--rc-type-body); color: var(--rc-ink-muted); }

/* connection-status badge row for settings. */
.rc-conn { display: inline-flex; align-items: center; gap: var(--rc-space-2); }

/* progress fill in 5% steps — keeps the bar token-pure with NO inline style
   (the view picks .rc-progress__fill--NN by rounding the percent to the step). */
.rc-progress__fill { inline-size: 0; }
.rc-progress__fill--0   { inline-size: 0; }
.rc-progress__fill--5   { inline-size: 5%; }
.rc-progress__fill--10  { inline-size: 10%; }
.rc-progress__fill--15  { inline-size: 15%; }
.rc-progress__fill--20  { inline-size: 20%; }
.rc-progress__fill--25  { inline-size: 25%; }
.rc-progress__fill--30  { inline-size: 30%; }
.rc-progress__fill--35  { inline-size: 35%; }
.rc-progress__fill--40  { inline-size: 40%; }
.rc-progress__fill--45  { inline-size: 45%; }
.rc-progress__fill--50  { inline-size: 50%; }
.rc-progress__fill--55  { inline-size: 55%; }
.rc-progress__fill--60  { inline-size: 60%; }
.rc-progress__fill--65  { inline-size: 65%; }
.rc-progress__fill--70  { inline-size: 70%; }
.rc-progress__fill--75  { inline-size: 75%; }
.rc-progress__fill--80  { inline-size: 80%; }
.rc-progress__fill--85  { inline-size: 85%; }
.rc-progress__fill--90  { inline-size: 90%; }
.rc-progress__fill--95  { inline-size: 95%; }
.rc-progress__fill--100 { inline-size: 100%; }

/* small inline icon sizing (used by the lock chip) without per-call styles. */
.rc-icon-sm { inline-size: 14px; block-size: 14px; }

/* kpi-card.css — KPI card (component §4.1)
   TOKENS: --rc-card --rc-border --rc-radius-card --rc-shadow-card --rc-shadow-hover
           --rc-type-kpi --rc-type-label --rc-ink --rc-ink-muted --rc-green --rc-red
   RTL: card grid mirrors via flex order; the delta arrow is vertical (no flip). */

.rc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--rc-space-4);
}

.rc-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--rc-space-2);
    background: var(--rc-card);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-card);
    box-shadow: var(--rc-shadow-card);
    padding: var(--rc-space-5);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}
.rc-kpi[href]:hover {
    box-shadow: var(--rc-shadow-hover);
    transform: translateY(-1px);
}

.rc-kpi__label {
    font: var(--rc-type-label);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rc-ink-muted);
}
[dir="rtl"] .rc-kpi__label {
    text-transform: none;
    letter-spacing: normal;
}

.rc-kpi__value {
    font: var(--rc-type-kpi);
    font-size: var(--rc-kpi-size);
    color: var(--rc-ink);
}
.rc-kpi__value--empty {
    color: var(--rc-ink-muted);
}

.rc-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--rc-space-1);
    font: var(--rc-type-label);
    text-transform: none;
    letter-spacing: normal;
}
.rc-kpi__delta--up   { color: var(--rc-green); }
.rc-kpi__delta--down { color: var(--rc-red); }
.rc-kpi__delta--flat { color: var(--rc-ink-muted); }

.rc-kpi__sub {
    font: var(--rc-type-caption);
    color: var(--rc-ink-muted);
}

/* loading skeleton (no magic numbers reach inline styles) */
.rc-kpi__skeleton {
    block-size: var(--rc-space-6);
    inline-size: 60%;
    border-radius: var(--rc-radius-control);
    background: linear-gradient(90deg, var(--rc-gray-bg) 25%, var(--rc-border) 37%, var(--rc-gray-bg) 63%);
    background-size: 400% 100%;
    animation: rc-shimmer 1.4s ease infinite;
}
@keyframes rc-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* platform.css — the platform-admin "Viewing as {shop}" banner (W2).
   TOKENS: --rc-amber --rc-amber-bg --rc-ink-muted --rc-space-* --rc-radius-control
           --rc-border-strong --rc-type-body-strong --rc-type-caption --rc-type-label.
   One amber attention bar shown ONLY while a platform admin is entered into a shop;
   logical properties so it mirrors cleanly in RTL. ZERO inline CSS in the Blade. */

.rc-platform-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rc-space-4);
    flex-wrap: wrap;
    margin-block-end: var(--rc-space-5);
    padding-block: var(--rc-space-3);
    padding-inline: var(--rc-space-5);
    background: var(--rc-amber-bg);
    border: 1px solid var(--rc-amber);
    border-radius: var(--rc-radius-control);
    color: var(--rc-amber);
}

.rc-platform-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rc-platform-banner__title {
    font: var(--rc-type-body-strong);
    color: var(--rc-amber);
}

.rc-platform-banner__note {
    font: var(--rc-type-caption);
    color: var(--rc-ink-muted);
}

.rc-platform-banner__form {
    margin: 0;
}

.rc-platform-banner__exit {
    font: var(--rc-type-label);
    color: var(--rc-amber);
    background: transparent;
    border: 1px solid var(--rc-amber);
    border-radius: var(--rc-radius-pill);
    padding-block: var(--rc-space-1);
    padding-inline: var(--rc-space-4);
    cursor: pointer;
}

.rc-platform-banner__exit:hover {
    background: var(--rc-amber);
    color: var(--rc-ink-on-primary);
}

/* =============================================================================
   post-purchase.css — Post-Purchase Offers hub + Flow Builder (docs/ux/40).
   TOKENS: --rc-card --rc-bg --rc-border --rc-border-strong --rc-blue --rc-blue-bg
           --rc-blue-600 --rc-ink --rc-ink-muted --rc-green --rc-green-bg --rc-red
           --rc-amber --rc-amber-bg --rc-teal --rc-radius-card --rc-radius-control
           --rc-radius-pill --rc-shadow-card --rc-shadow-hover --rc-space-* --rc-type-*
   RTL: logical properties only; the Flow-Builder flow mirrors (connector arrows
        point start-ward). No left/right, no raw values, no inline CSS.
   ========================================================================== */

/* ---------------------------------------------------------------- Tabs --- */
.rc-pp-tabs {
    display: flex;
    gap: var(--rc-space-5);
    border-block-end: 1px solid var(--rc-border);
    margin-block-end: var(--rc-space-5);
}
.rc-pp-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--rc-space-2);
    padding-block: var(--rc-space-3);
    background: transparent;
    border: 0;
    border-block-end: 2px solid transparent;
    font: var(--rc-type-body-strong);
    color: var(--rc-ink-muted);
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease;
}
.rc-pp-tab:hover { color: var(--rc-ink); }
.rc-pp-tab--active {
    color: var(--rc-blue);
    border-block-end-color: var(--rc-blue);
}
.rc-pp-tab__new {
    padding-block: 1px;
    padding-inline: var(--rc-space-2);
    font-size: 10px;
}

/* --------------------------------------------------------- Info banner --- */
.rc-pp-info {
    display: flex;
    align-items: center;
    gap: var(--rc-space-3);
    padding: var(--rc-space-4);
    background: var(--rc-blue-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    color: var(--rc-ink);
    font: var(--rc-type-body);
}
.rc-pp-info--warning {
    background: var(--rc-amber-bg);
}
.rc-pp-info__icon {
    inline-size: 20px;
    block-size: 20px;
    color: var(--rc-blue);
    flex: 0 0 auto;
}
.rc-pp-info--warning .rc-pp-info__icon { color: var(--rc-amber); }

/* ------------------------------------------------------ Your flows card --- */
.rc-pp-flows__head { margin-block-end: var(--rc-space-4); }
.rc-pp-flows__title { margin-block-end: 0; }

.rc-pp-flows__controls {
    margin-block-end: var(--rc-space-4);
}

/* Active | Inactive segment */
.rc-pp-segment {
    display: inline-flex;
    background: var(--rc-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    padding: var(--rc-space-1);
    gap: var(--rc-space-1);
}
.rc-pp-segment__item {
    border: 0;
    background: transparent;
    padding-block: var(--rc-space-2);
    padding-inline: var(--rc-space-4);
    border-radius: var(--rc-radius-control);
    font: var(--rc-type-body-strong);
    color: var(--rc-ink-muted);
    cursor: pointer;
}
.rc-pp-segment__item--active {
    background: var(--rc-card);
    color: var(--rc-ink);
    box-shadow: var(--rc-shadow-card);
}

/* Reorder priority pill (outlined) */
.rc-pp-reorder {
    display: inline-flex;
    align-items: center;
    gap: var(--rc-space-2);
    padding-block: var(--rc-space-2);
    padding-inline: var(--rc-space-4);
    background: var(--rc-card);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-pill);
    font: var(--rc-type-body-strong);
    color: var(--rc-ink);
    cursor: pointer;
}
.rc-pp-reorder:hover { border-color: var(--rc-border-strong); }
.rc-pp-reorder__icon { inline-size: 16px; block-size: 16px; color: var(--rc-ink-muted); }

/* Flows table */
.rc-pp-flows__table { margin-block-start: var(--rc-space-2); }
.rc-pp-col-priority { inline-size: 110px; }
.rc-pp-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--rc-radius-control);
    background: var(--rc-bg);
    border: 1px solid var(--rc-border);
    font: var(--rc-type-body-strong);
    color: var(--rc-ink);
}
.rc-pp-flows__row { cursor: pointer; }
.rc-pp-flows__link {
    color: var(--rc-ink);
    text-decoration: none;
    font: var(--rc-type-body-strong);
}
.rc-pp-flows__link:hover { color: var(--rc-blue); text-decoration: underline; }
.rc-pp-flows__meta {
    display: block;
    font: var(--rc-type-caption);
    color: var(--rc-ink-muted);
}

/* --------------------------------------------------- Performance chart --- */
.rc-pp-chart {
    display: flex;
    flex-direction: column;
    gap: var(--rc-space-3);
}
.rc-pp-chart__svg {
    inline-size: 100%;
    block-size: 200px;
    display: block;
}
.rc-pp-chart__area {
    fill: var(--rc-blue-bg);
}
.rc-pp-chart__line {
    fill: none;
    stroke: var(--rc-blue);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}
.rc-pp-chart__axis {
    display: flex;
    justify-content: space-between;
    font: var(--rc-type-caption);
}

/* -------------------------------------------------------- Settings tab --- */
.rc-pp-settings__intro { margin-block-end: var(--rc-space-4); }
.rc-pp-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--rc-space-3);
}
.rc-pp-radio {
    display: flex;
    align-items: flex-start;
    gap: var(--rc-space-3);
    padding: var(--rc-space-4);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    cursor: pointer;
}
.rc-pp-radio:hover { border-color: var(--rc-border-strong); }
.rc-pp-radio input { margin-block-start: 3px; accent-color: var(--rc-blue); }
.rc-pp-radio__body { display: flex; flex-direction: column; gap: var(--rc-space-1); }
.rc-pp-settings__window {
    display: flex;
    flex-direction: column;
    gap: var(--rc-space-2);
    margin-block-start: var(--rc-space-4);
    max-inline-size: 280px;
}
.rc-pp-select {
    /* Filament forms.css sets `select{background-image:<chevron svg>}` but lets it
       TILE; pin it to a single inline-end chevron + our surface color. We keep
       Filament's SVG (its stroke is the muted ink) instead of re-declaring one. */
    background-repeat: no-repeat;
    background-position: right var(--rc-space-3) center;
    background-size: 16px 16px;
    padding-block: var(--rc-space-2);
    padding-inline-start: var(--rc-space-3);
    padding-inline-end: var(--rc-space-6);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    background-color: var(--rc-card);
    font: var(--rc-type-body);
    color: var(--rc-ink);
}
[dir="rtl"] .rc-pp-select { background-position: left var(--rc-space-3) center; }
.rc-pp-select:focus-visible { outline: none; border-color: var(--rc-blue); box-shadow: var(--rc-ring); }
.rc-pp-settings__actions {
    margin-block-start: var(--rc-space-5);
}

/* ====================================================== FLOW BUILDER ====== */

.rc-fb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rc-space-4);
    margin-block-end: var(--rc-space-4);
    flex-wrap: wrap;
}
.rc-fb-toolbar__name { font: var(--rc-type-h); color: var(--rc-ink); }
.rc-fb-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--rc-radius-control);
    border: 1px solid var(--rc-border);
    background: var(--rc-card);
    color: var(--rc-ink);
}
.rc-fb-back:hover { background: var(--rc-blue-bg); }
.rc-fb-back__icon { inline-size: 18px; block-size: 18px; }
/* directional glyph flips in RTL */
[dir="rtl"] .rc-fb-back__icon { transform: scaleX(-1); }

.rc-fb-issues__list {
    margin: 0;
    padding-inline-start: var(--rc-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--rc-space-1);
}

/* Canvas shell */
.rc-fb-canvas {
    position: relative;
    block-size: 560px;
    background-color: var(--rc-bg);
    background-image:
        radial-gradient(circle, var(--rc-border) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-card);
    overflow: hidden;
    touch-action: none;
}

/* Zoom controls (top-inline-end) */
.rc-fb-zoom {
    position: absolute;
    inset-block-start: var(--rc-space-3);
    inset-inline-end: var(--rc-space-3);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--rc-space-1);
    background: var(--rc-card);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    padding: var(--rc-space-1);
    box-shadow: var(--rc-shadow-card);
}
.rc-fb-zoom__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
    border: 0;
    background: transparent;
    border-radius: var(--rc-radius-control);
    font: var(--rc-type-body-strong);
    color: var(--rc-ink);
    cursor: pointer;
}
.rc-fb-zoom__btn:hover { background: var(--rc-blue-bg); }
.rc-fb-zoom__icon { inline-size: 16px; block-size: 16px; }
.rc-fb-zoom__level {
    font: var(--rc-type-caption);
    color: var(--rc-ink-muted);
    min-inline-size: 40px;
    text-align: center;
}

/* Pan/zoom stage — transform reads CSS custom props set by Alpine (no inline literal) */
.rc-fb-stage {
    position: absolute;
    inset: 0;
    transform: translate(var(--rc-fb-x, 0), var(--rc-fb-y, 0)) scale(var(--rc-fb-scale, 1));
    transform-origin: center center;
    cursor: grab;
}
.rc-fb-stage:active { cursor: grabbing; }

.rc-fb-graph {
    display: flex;
    align-items: center;
    gap: var(--rc-space-5);
    padding: var(--rc-space-6);
    min-block-size: 100%;
}

/* Nodes */
.rc-fb-node {
    flex: 0 0 auto;
    inline-size: 240px;
    background: var(--rc-card);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-card);
    box-shadow: var(--rc-shadow-card);
    padding: var(--rc-space-4);
    position: relative;
}
/* Offer node is a <button> (clickable → opens the drawer): reset button chrome,
   keep the card look + a clear pointer/hover affordance. */
button.rc-fb-node {
    appearance: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
button.rc-fb-node--offer:hover {
    box-shadow: var(--rc-shadow-hover);
    border-inline-start-color: var(--rc-blue-600);
    transform: translateY(-1px);
}
/* Trigger node is also a <button> now (opens the "Configure trigger" drawer):
   same lift, green accent so the hover reads as the trigger's color. */
button.rc-fb-node--trigger:hover {
    box-shadow: var(--rc-shadow-hover);
    transform: translateY(-1px);
}
button.rc-fb-node:focus-visible {
    outline: none;
    box-shadow: var(--rc-ring);
}

/* Offer-node header: blue cart-plus chip + "Cross-sell / A single product". */
.rc-fb-node__head {
    display: flex;
    align-items: center;
    gap: var(--rc-space-3);
    margin-block-end: var(--rc-space-3);
}
.rc-fb-node__cart {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--rc-radius-control);
    background: var(--rc-blue-bg);
    color: var(--rc-blue);
}
.rc-fb-node__cart-icon { inline-size: 18px; block-size: 18px; }
.rc-fb-node__heading { display: flex; flex-direction: column; gap: 1px; }
.rc-fb-node__subtitle { font: var(--rc-type-caption); color: var(--rc-ink-muted); }

/* "Product" subsection inside the offer node */
.rc-fb-section {
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    padding: var(--rc-space-3);
}
.rc-fb-section__label {
    display: block;
    font: var(--rc-type-label);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rc-ink-muted);
    margin-block-end: var(--rc-space-2);
}
[dir="rtl"] .rc-fb-section__label { text-transform: none; letter-spacing: normal; }
.rc-fb-offer__meta { font: var(--rc-type-caption); color: var(--rc-ink-muted); }
.rc-fb-node--trigger {
    border-color: var(--rc-green);
    border-inline-start: 4px solid var(--rc-green);
    inline-size: 220px;
}
.rc-fb-node--offer {
    border-inline-start: 4px solid var(--rc-blue);
}
.rc-fb-node--invalid {
    border-color: var(--rc-red);
    box-shadow: var(--rc-shadow-hover);
}
.rc-fb-node--ghost {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rc-space-2);
    text-align: center;
}
.rc-fb-node__type {
    display: inline-flex;
    align-items: center;
    gap: var(--rc-space-1);
    font: var(--rc-type-label);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rc-green);
    margin-block-end: var(--rc-space-2);
}
.rc-fb-node__type--offer { color: var(--rc-blue); }
[dir="rtl"] .rc-fb-node__type { text-transform: none; letter-spacing: normal; }
.rc-fb-node__icon { inline-size: 14px; block-size: 14px; }
.rc-fb-node__icon--ghost { inline-size: 28px; block-size: 28px; color: var(--rc-ink-muted); }
.rc-fb-node__title { font: var(--rc-type-body-strong); color: var(--rc-ink); margin-block-end: var(--rc-space-2); }
.rc-fb-node__body { display: flex; flex-direction: column; gap: var(--rc-space-1); }
.rc-fb-node__reason {
    margin-block-start: var(--rc-space-2);
    font: var(--rc-type-caption);
    color: var(--rc-red);
}

.rc-fb-cond {
    font: var(--rc-type-caption);
    color: var(--rc-ink-muted);
    padding-block: 2px;
    padding-inline: var(--rc-space-2);
    background: var(--rc-bg);
    border-radius: var(--rc-radius-control);
}
.rc-fb-cond--empty { color: var(--rc-red); }

/* Offer product card */
.rc-fb-offer { display: flex; gap: var(--rc-space-3); align-items: flex-start; }
.rc-fb-offer__thumb {
    flex: 0 0 auto;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--rc-radius-control);
    background: var(--rc-bg);
    border: 1px solid var(--rc-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rc-fb-offer__thumb-icon { inline-size: 22px; block-size: 22px; color: var(--rc-ink-muted); }
.rc-fb-offer__info { display: flex; flex-direction: column; gap: 2px; }
.rc-fb-offer__name { font: var(--rc-type-body-strong); color: var(--rc-ink); }
.rc-fb-offer__headline { font: var(--rc-type-caption); color: var(--rc-ink-muted); }
.rc-fb-offer__price { font: var(--rc-type-body-strong); color: var(--rc-ink); }
.rc-fb-offer__was {
    font: var(--rc-type-caption);
    color: var(--rc-ink-muted);
    text-decoration: line-through;
    margin-inline-start: var(--rc-space-2);
}
.rc-fb-offer__consent {
    margin-block-start: var(--rc-space-2);
    padding: var(--rc-space-2);
    background: var(--rc-amber-bg);
    border-radius: var(--rc-radius-control);
    font: var(--rc-type-caption);
    color: var(--rc-amber);
}

/* Branch ports */
.rc-fb-branches {
    margin-block-start: var(--rc-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--rc-space-2);
    border-block-start: 1px solid var(--rc-border);
    padding-block-start: var(--rc-space-3);
}
.rc-fb-branch {
    display: flex;
    align-items: center;
    gap: var(--rc-space-2);
    font: var(--rc-type-caption);
}
.rc-fb-branch__label {
    padding-block: 1px;
    padding-inline: var(--rc-space-2);
    border-radius: var(--rc-radius-pill);
    font: var(--rc-type-label);
    text-transform: none;
}
.rc-fb-branch--accept .rc-fb-branch__label { color: var(--rc-green); background: var(--rc-green-bg); }
.rc-fb-branch--decline .rc-fb-branch__label { color: var(--rc-gray); background: var(--rc-gray-bg); }
.rc-fb-branch__arrow { color: var(--rc-ink-muted); }
[dir="rtl"] .rc-fb-branch__arrow { transform: scaleX(-1); }
.rc-fb-branch__next { color: var(--rc-ink); font: var(--rc-type-body-strong); }

/* Ports */
.rc-fb-port {
    position: absolute;
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--rc-radius-pill);
    background: var(--rc-green);
    inset-block-start: 50%;
}
.rc-fb-port--out { inset-inline-end: -5px; }

/* Connector trigger → offer (SVG path + arrowhead; flips in RTL) */
.rc-fb-connector {
    flex: 0 0 auto;
    inline-size: 80px;
    position: relative;
    display: flex;
    align-items: center;
}
.rc-fb-connector__svg { inline-size: 100%; block-size: 40px; }
.rc-fb-connector__path {
    fill: none;
    stroke: var(--rc-blue);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.rc-fb-connector__arrow {
    position: absolute;
    inset-inline-end: 0;
    color: var(--rc-blue);
    font-size: 12px;
}
[dir="rtl"] .rc-fb-connector__svg { transform: scaleX(-1); }
[dir="rtl"] .rc-fb-connector__arrow { transform: scaleX(-1); inset-inline-end: auto; inset-inline-start: 0; }

/* Minimap (bottom-inline-end) */
.rc-fb-minimap {
    position: absolute;
    inset-block-end: var(--rc-space-3);
    inset-inline-end: var(--rc-space-3);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: var(--rc-space-2);
    background: var(--rc-card);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    box-shadow: var(--rc-shadow-card);
}
.rc-fb-minimap__node {
    inline-size: 14px;
    block-size: 10px;
    border-radius: 2px;
}
.rc-fb-minimap__node--trigger { background: var(--rc-green); }
.rc-fb-minimap__node--offer { background: var(--rc-blue); }

/* Issues chip in toolbar */
.rc-fb-issues { text-transform: none; }

/* =============================================================================
   products.css — the Products screen (Work Package W1, plan §E). The LIST's
   "Markets" info banner, the DETAIL page (product header, details card, per-
   variant plan groupings + reorder, side column, tag chips), and the small extras
   the "Edit subscription plan" slide-over needs on top of configure-drawer.css
   (the stepper row, the read-only price summary, a small ghost CTA, the native
   <select> skin .rc-pp-select).
   TOKENS: --rc-card --rc-bg --rc-border --rc-border-strong --rc-blue --rc-blue-bg
           --rc-ink --rc-ink-muted --rc-radius-card --rc-radius-control
           --rc-radius-pill --rc-shadow-card --rc-ring --rc-space-* --rc-type-*
           --rc-teal --rc-teal-bg --rc-green --rc-amber
   RTL: logical properties only (margin/padding/border -inline-*, inset-inline-*);
        no left/right, no raw values, no inline CSS.
   ========================================================================== */

/* ---- List: "Markets" info banner -------------------------------------- */
.rc-products-banner { margin-block-end: var(--rc-space-4); }

/* ---- Native <select> skin (drawer purchase/frequency/charge-day) ------- */
.rc-pp-select {
    inline-size: 100%;
    padding-block: var(--rc-space-2);
    padding-inline: var(--rc-space-3);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    background: var(--rc-card);
    font: var(--rc-type-body);
    color: var(--rc-ink);
    cursor: pointer;
}
.rc-pp-select:focus-visible { outline: none; border-color: var(--rc-blue); box-shadow: var(--rc-ring); }

/* ---- Detail: header --------------------------------------------------- */
.rc-prod-header { margin-block-end: var(--rc-space-5); gap: var(--rc-space-4); }
.rc-prod-header__title { font: var(--rc-type-title); color: var(--rc-ink); }

/* ---- Detail: product details card ------------------------------------- */
.rc-prod-details { display: flex; align-items: flex-start; gap: var(--rc-space-4); }
.rc-prod-details__thumb {
    flex: 0 0 auto;
    inline-size: 72px;
    block-size: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rc-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    overflow: hidden;
}
.rc-prod-details__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.rc-prod-details__placeholder { inline-size: 28px; block-size: 28px; color: var(--rc-ink-muted); }
.rc-prod-details__info { display: flex; flex-direction: column; gap: var(--rc-space-2); }
.rc-prod-details__name { font: var(--rc-type-subh); color: var(--rc-ink); }
.rc-prod-details__meta { display: flex; align-items: center; gap: var(--rc-space-2); flex-wrap: wrap; }
.rc-prod-details__link { display: inline-flex; align-items: center; gap: var(--rc-space-2); }
.rc-prod-details__link-icon { inline-size: 14px; block-size: 14px; }

/* ---- Detail: per-variant plan group ----------------------------------- */
.rc-plan-group { padding-block: var(--rc-space-4); }
.rc-plan-group + .rc-plan-group { border-block-start: 1px solid var(--rc-border); }
.rc-plan-group__head { margin-block-end: var(--rc-space-3); gap: var(--rc-space-3); }
.rc-plan-group__title { display: inline-flex; align-items: center; gap: var(--rc-space-3); flex-wrap: wrap; }
.rc-plan-group__icon { inline-size: 18px; block-size: 18px; color: var(--rc-ink-muted); }
.rc-plan-group__actions { gap: var(--rc-space-2); }

/* ---- Detail: plan row ------------------------------------------------- */
.rc-plan-row {
    display: flex;
    align-items: center;
    gap: var(--rc-space-3);
    padding: var(--rc-space-3);
    background: var(--rc-card);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
}
.rc-plan-row + .rc-plan-row { margin-block-start: var(--rc-space-2); }
.rc-plan-row--draft { background: var(--rc-bg); }

.rc-plan-row__reorder { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.rc-plan-row__move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 22px;
    block-size: 18px;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-control);
    background: var(--rc-card);
    color: var(--rc-ink-muted);
    cursor: pointer;
}
.rc-plan-row__move:hover { border-color: var(--rc-border-strong); color: var(--rc-ink); }
.rc-plan-row__move:disabled { opacity: .4; cursor: not-allowed; }
.rc-plan-row__move-icon { inline-size: 12px; block-size: 12px; }

.rc-plan-row__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--rc-space-1); min-inline-size: 0; }
.rc-plan-row__line { display: flex; align-items: center; gap: var(--rc-space-2); flex-wrap: wrap; }
.rc-plan-row__price { color: var(--rc-ink-muted); font: var(--rc-type-body); margin-inline-start: auto; }
.rc-plan-row__meta { display: flex; align-items: center; gap: var(--rc-space-2); flex-wrap: wrap; font: var(--rc-type-caption); }

.rc-plan-row__end { display: flex; align-items: center; gap: var(--rc-space-3); flex: 0 0 auto; }

.rc-plan-empty { padding: var(--rc-space-3); }

/* ---- Detail: side column ---------------------------------------------- */
.rc-prod-side__title { margin-block-end: var(--rc-space-4); }
.rc-prod-side__section { margin-block-start: var(--rc-space-4); display: flex; flex-direction: column; gap: var(--rc-space-2); }
.rc-prod-side__label { margin-block-end: var(--rc-space-1); }
[dir="rtl"] .rc-prod-side__label { text-transform: none; letter-spacing: normal; }

.rc-prod-tags { gap: var(--rc-space-2); }
.rc-prod-tag {
    display: inline-flex;
    align-items: center;
    padding-block: var(--rc-space-1);
    padding-inline: var(--rc-space-3);
    background: var(--rc-blue-bg);
    color: var(--rc-blue);
    border-radius: var(--rc-radius-pill);
    font: var(--rc-type-caption);
}

/* ---- Drawer extras (on top of configure-drawer.css) ------------------- */
.rc-cta--sm { padding-block: var(--rc-space-1); padding-inline: var(--rc-space-3); font: var(--rc-type-caption); }

.rc-plan-ship { gap: var(--rc-space-3); align-items: stretch; }
.rc-plan-ship__count { max-inline-size: 96px; }
.rc-plan-ship__unit { flex: 1 1 auto; max-inline-size: 200px; }

.rc-plan-price-summary { font: var(--rc-type-body-strong); }

/* timeline.css — activity / timeline rows (components §4.14)
   TOKENS: --rc-border --rc-green --rc-red --rc-gray --rc-blue --rc-type-*
   RTL: the rail + dot move to start-side via logical inset; markers do not flip. */

.rc-timeline { display: flex; flex-direction: column; }
.rc-timeline__row {
    position: relative;
    display: flex;
    gap: var(--rc-space-4);
    padding-block: var(--rc-space-3);
    padding-inline-start: var(--rc-space-5);
    border-inline-start: 2px solid var(--rc-border);
}
.rc-timeline__row:last-child { border-inline-start-color: transparent; }

.rc-timeline__dot {
    position: absolute;
    inset-inline-start: -5px;
    inset-block-start: var(--rc-space-4);
    inline-size: 9px;
    block-size: 9px;
    border-radius: var(--rc-radius-pill);
    background: var(--rc-gray);
}
.rc-timeline__dot--success { background: var(--rc-green); }
.rc-timeline__dot--failure { background: var(--rc-red); }
.rc-timeline__dot--info    { background: var(--rc-blue); }

.rc-timeline__body { display: flex; flex-direction: column; gap: var(--rc-space-1); }
.rc-timeline__title { font: var(--rc-type-body-strong); color: var(--rc-ink); }
.rc-timeline__meta { display: inline-flex; gap: var(--rc-space-2); align-items: center; font: var(--rc-type-caption); color: var(--rc-ink-muted); }
.rc-timeline__actor {
    padding-block: 1px; padding-inline: var(--rc-space-2);
    border-radius: var(--rc-radius-pill);
    background: var(--rc-gray-bg); color: var(--rc-ink-muted);
    font: var(--rc-type-caption);
}
.rc-timeline__summary { font: var(--rc-type-body); color: var(--rc-ink-muted); }

/* empty state for any list region (component §4.13). */
.rc-empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--rc-space-3);
    padding: var(--rc-space-7) var(--rc-space-5);
    text-align: center;
}
.rc-empty__icon { color: var(--rc-ink-muted); inline-size: 40px; block-size: 40px; }
.rc-empty__title { font: var(--rc-type-subh); color: var(--rc-ink); }
.rc-empty__body { font: var(--rc-type-body); color: var(--rc-ink-muted); max-inline-size: 380px; }