/*
 * RealtyIQ components (T43) - every class is rq-* and built only from
 * tokens.css. Mobile first: authored for 360px, widened with min-width only.
 * Motion: transitions on colour / background / border / shadow / opacity /
 * transform only, never longer than var(--rq-dur). No entrance animations.
 * The two loading loops (button spinner, skeleton shimmer) are timed from
 * --rq-dur-loader / --rq-dur-shimmer, which derive from --rq-dur, so
 * prefers-reduced-motion (--rq-dur: 0ms) stops them too.
 *
 * Breakpoints: 768px, 992px (tables instead of cards, sidebar is static), 1200px.
 */

/* ------------------------------------------------------------------ base */

.rq-app {
    margin: 0;
    min-height: 100vh;
    background: var(--rq-bg);
    color: var(--rq-text);
    font-family: var(--rq-font-body);
    font-size: var(--rq-fs-sm);
    font-weight: var(--rq-fw-regular);
    line-height: var(--rq-lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01";
    overflow-x: hidden;
}

.rq-app h1, .rq-app h2, .rq-app h3, .rq-app h4, .rq-app h5, .rq-app h6,
.rq-display {
    font-family: var(--rq-font-display);
    font-weight: var(--rq-fw-semibold);
    letter-spacing: var(--rq-tracking-display);
    line-height: var(--rq-lh-tight);
    color: var(--rq-text);
}

.rq-accent {
    font-family: var(--rq-font-accent);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
}

.rq-num { font-variant-numeric: tabular-nums; }

.rq-money { color: var(--rq-money-ink); font-variant-numeric: tabular-nums; font-weight: var(--rq-fw-semibold); }
.rq-money--lg { color: var(--rq-money); font-size: var(--rq-fs-xl); }

.rq-eyebrow {
    font-size: var(--rq-fs-xs);
    font-weight: var(--rq-fw-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rq-text-muted);
}

.rq-muted { color: var(--rq-text-muted); }

.rq-kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    font-family: var(--rq-font-body);
    font-size: 11px;
    font-weight: var(--rq-fw-medium);
    line-height: 18px;
    color: var(--rq-text-muted);
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-bottom-width: 2px;
    border-radius: var(--rq-r-sm);
}

.rq-app :focus-visible {
    outline: 2px solid var(--rq-primary-ink);
    outline-offset: 2px;
}

.rq-skip {
    position: absolute;
    left: var(--rq-s-3);
    top: -100px;
    z-index: 2000;
    padding: var(--rq-s-2) var(--rq-s-4);
    border-radius: var(--rq-r-md);
    background: var(--rq-surface);
    color: var(--rq-text);
    box-shadow: var(--rq-e-3);
    font-weight: var(--rq-fw-semibold);
    text-decoration: none;
}
.rq-skip:focus { top: var(--rq-s-3); }

/* ------------------------------------------------------------- app shell */

.rq-shell { min-height: 100vh; }

/* The <aside> wrapper. Below 992px it only hosts the offcanvas panel. */
.rq-sidebar { position: relative; }

.rq-nav-panel {
    --bs-offcanvas-width: min(300px, 86vw);
    --bs-offcanvas-bg: var(--rq-side-bg);
    --bs-offcanvas-color: var(--rq-side-text);
    --bs-offcanvas-border-color: var(--rq-side-border);
    --bs-offcanvas-transition: transform var(--rq-dur) var(--rq-ease);
    display: flex;
    flex-direction: column;
    color: var(--rq-side-text);
}

.rq-nav__head {
    display: flex;
    align-items: center;
    gap: var(--rq-s-3);
    min-height: var(--rq-topbar-h);
    padding: var(--rq-s-3) var(--rq-s-4) var(--rq-s-3) var(--rq-s-5);
    border-bottom: 1px solid var(--rq-side-border);
}

.rq-brand {
    display: flex;
    align-items: center;
    gap: var(--rq-s-3);
    min-width: 0;
    flex: 1;
    color: #FFFFFF;
    text-decoration: none;
}
.rq-brand:hover { color: #FFFFFF; }
.rq-brand__mark {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--rq-r-sm);
    background: var(--rq-primary);
    color: var(--rq-primary-contrast);
    font-size: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.rq-brand__logo { max-height: 32px; max-width: 120px; width: auto; object-fit: contain; }
.rq-brand__name {
    font-family: var(--rq-font-display);
    font-weight: var(--rq-fw-semibold);
    font-size: var(--rq-fs-md);
    letter-spacing: var(--rq-tracking-display);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rq-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--rq-s-3) var(--rq-s-3) var(--rq-s-4);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.rq-nav__group {
    margin: var(--rq-s-4) var(--rq-s-3) var(--rq-s-1);
    font-size: 11px;
    font-weight: var(--rq-fw-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rq-side-muted);
}
.rq-nav__group:first-child { margin-top: var(--rq-s-1); }

.rq-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--rq-s-3);
    min-height: var(--rq-tap);
    padding: var(--rq-s-2) var(--rq-s-3);
    margin: 2px 0;
    border-radius: var(--rq-r-md);
    color: var(--rq-side-text);
    font-weight: var(--rq-fw-medium);
    text-decoration: none;
    transition: background-color var(--rq-dur) var(--rq-ease), color var(--rq-dur) var(--rq-ease);
}
.rq-nav__link > .bi { flex: none; width: 20px; font-size: 17px; text-align: center; color: var(--rq-side-muted); transition: color var(--rq-dur) var(--rq-ease); }
.rq-nav__link:hover { background: var(--rq-side-hover); color: #FFFFFF; }
.rq-nav__link:hover > .bi { color: #FFFFFF; }
.rq-nav__link:active { background: rgba(255, 255, 255, 0.11); }
.rq-nav__link.is-active {
    background: var(--rq-primary);
    color: var(--rq-primary-contrast);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
}
.rq-nav__link.is-active > .bi { color: inherit; }
.rq-nav__link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }

.rq-nav__badge {
    margin-left: auto;
    min-width: 22px;
    padding: 0 7px;
    border-radius: var(--rq-r-full);
    background: #E5484D;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: var(--rq-fw-semibold);
    line-height: 20px;
    text-align: center;
}

.rq-nav__foot {
    padding: var(--rq-s-3);
    border-top: 1px solid var(--rq-side-border);
}
.rq-nav__user { display: flex; align-items: center; gap: var(--rq-s-3); padding: var(--rq-s-2) var(--rq-s-3) var(--rq-s-3); min-width: 0; }
.rq-nav__user-name { color: #FFFFFF; font-weight: var(--rq-fw-semibold); font-size: var(--rq-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-nav__user-role { color: var(--rq-side-muted); font-size: var(--rq-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-nav__foot form { margin: 0; }
.rq-nav__foot .rq-nav__link { width: 100%; border: 0; background: transparent; font: inherit; font-weight: var(--rq-fw-medium); text-align: left; cursor: pointer; }
.rq-nav__foot .rq-nav__link:hover { background: var(--rq-side-hover); }
.rq-nav__link--danger:hover { color: #FFB4B4; }
.rq-nav__link--danger:hover > .bi { color: #FFB4B4; }

.rq-avatar {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--rq-r-full);
    background: var(--rq-primary);
    color: var(--rq-primary-contrast);
    font-weight: var(--rq-fw-semibold);
    font-size: var(--rq-fs-sm);
}
.rq-avatar--sm { width: 30px; height: 30px; font-size: var(--rq-fs-xs); }

@media (min-width: 992px) {
    .rq-shell {
        display: grid;
        grid-template-columns: var(--rq-sidebar-w) minmax(0, 1fr);
    }
    .rq-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        background: var(--rq-side-bg);
        border-right: 1px solid var(--rq-side-border);
    }
    .rq-nav-panel { height: 100%; }
}

/* Topbar */
.rq-main-col { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.rq-topbar {
    position: sticky;
    top: 0;
    z-index: var(--rq-z-topbar);
    display: flex;
    align-items: center;
    gap: var(--rq-s-2);
    min-height: var(--rq-topbar-h);
    padding: var(--rq-s-2) var(--rq-s-3);
    background: color-mix(in srgb, var(--rq-bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--rq-border);
}
.rq-topbar__brand {
    min-width: 0;
    font-family: var(--rq-font-display);
    font-weight: var(--rq-fw-semibold);
    letter-spacing: var(--rq-tracking-display);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--rq-text);
}
.rq-topbar__actions { display: flex; align-items: center; gap: var(--rq-s-1); margin-left: auto; }

@media (min-width: 768px) {
    .rq-topbar { padding: var(--rq-s-2) var(--rq-s-6); gap: var(--rq-s-3); }
}

/* Search trigger: an icon button on phones, a field-like bar from 768px. */
.rq-search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rq-s-2);
    width: var(--rq-tap);
    height: var(--rq-tap);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--rq-r-full);
    background: transparent;
    color: var(--rq-text-muted);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--rq-dur) var(--rq-ease), background-color var(--rq-dur) var(--rq-ease), box-shadow var(--rq-dur) var(--rq-ease);
}
.rq-search-trigger .bi { font-size: 17px; }
.rq-search-trigger__label, .rq-search-trigger .rq-kbd { display: none; }
.rq-search-trigger:hover { background: var(--rq-surface); border-color: var(--rq-border); color: var(--rq-text); }
.rq-search-trigger:active { transform: scale(.98); }

@media (min-width: 768px) {
    .rq-search-trigger {
        justify-content: flex-start;
        width: min(380px, 42vw);
        height: 40px;
        padding: 0 var(--rq-s-2) 0 var(--rq-s-4);
        background: var(--rq-surface);
        border-color: var(--rq-border);
        box-shadow: var(--rq-e-1);
    }
    .rq-search-trigger__label { display: block; flex: 1; text-align: left; font-size: var(--rq-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rq-search-trigger .rq-kbd { display: inline-flex; }
    .rq-search-trigger:hover { border-color: var(--rq-border-strong); box-shadow: var(--rq-e-2); }
}

/* Icon button (44px tap target) */
.rq-iconbtn {
    position: relative;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--rq-tap);
    height: var(--rq-tap);
    padding: 0;
    border: 0;
    border-radius: var(--rq-r-full);
    background: transparent;
    color: var(--rq-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--rq-dur) var(--rq-ease), color var(--rq-dur) var(--rq-ease), transform var(--rq-dur) var(--rq-ease);
}
.rq-iconbtn:hover { background: var(--rq-surface-3); color: var(--rq-text); }
.rq-iconbtn:active { transform: scale(.94); }
.rq-iconbtn:disabled, .rq-iconbtn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.rq-iconbtn--sm { width: 32px; height: 32px; font-size: 15px; }
.rq-iconbtn--on-dark { color: var(--rq-side-text); }
.rq-iconbtn--on-dark:hover { background: var(--rq-side-hover); color: #FFFFFF; }
.rq-iconbtn--sm::after { content: ""; position: absolute; inset: -6px; } /* keeps a 44px hit area */

.rq-dot-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 9px;
    height: 9px;
    border-radius: var(--rq-r-full);
    background: var(--rq-danger);
    box-shadow: 0 0 0 2px var(--rq-bg);
}

/* Main content */
.rq-main { flex: 1; min-width: 0; outline: none; }
.rq-content {
    width: 100%;
    max-width: var(--rq-content-max);
    margin: 0 auto;
    padding: var(--rq-s-5) var(--rq-s-4) var(--rq-s-10);
}
@media (min-width: 768px) { .rq-content { padding: var(--rq-s-8) var(--rq-s-6) var(--rq-s-10); } }
@media (min-width: 1200px) { .rq-content { padding: var(--rq-s-8) var(--rq-s-9) var(--rq-s-10); } }

/* Notifications + user menus (Bootstrap dropdowns, skinned) */
.rq-menu {
    --bs-dropdown-bg: var(--rq-surface);
    --bs-dropdown-border-color: var(--rq-border);
    --bs-dropdown-link-color: var(--rq-text);
    --bs-dropdown-link-hover-bg: var(--rq-surface-2);
    --bs-dropdown-link-hover-color: var(--rq-text);
    --bs-dropdown-link-active-bg: var(--rq-primary-soft);
    --bs-dropdown-link-active-color: var(--rq-text);
    --bs-dropdown-divider-bg: var(--rq-border);
    --bs-dropdown-color: var(--rq-text);
    border-radius: var(--rq-r-lg);
    box-shadow: var(--rq-e-3);
    padding: var(--rq-s-2);
    min-width: 240px;
}
.rq-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--rq-s-2);
    min-height: 40px;
    border-radius: var(--rq-r-sm);
    font-size: var(--rq-fs-sm);
}
.rq-menu .dropdown-item .bi { color: var(--rq-text-muted); width: 18px; text-align: center; }
.rq-menu__head { padding: var(--rq-s-2) var(--rq-s-3) var(--rq-s-3); border-bottom: 1px solid var(--rq-border); margin-bottom: var(--rq-s-2); }

.rq-notif { width: min(360px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.rq-notif__head { display: flex; align-items: center; justify-content: space-between; gap: var(--rq-s-2); padding: var(--rq-s-3) var(--rq-s-4); border-bottom: 1px solid var(--rq-border); }
.rq-notif__title { font-weight: var(--rq-fw-semibold); }
.rq-notif__list { max-height: 320px; overflow-y: auto; }
.rq-notif__item { padding: var(--rq-s-3) var(--rq-s-4); border-bottom: 1px solid var(--rq-border); font-size: var(--rq-fs-sm); }
.rq-notif__item:last-child { border-bottom: 0; }
.rq-notif__item.is-unread { background: var(--rq-primary-soft); }
.rq-notif__item-title { font-weight: var(--rq-fw-semibold); margin-bottom: 2px; }
.rq-notif__item-text { color: var(--rq-text-muted); }
.rq-notif__item-time { color: var(--rq-text-muted); font-size: var(--rq-fs-xs); margin-top: var(--rq-s-1); }
.rq-notif__empty { padding: var(--rq-s-6) var(--rq-s-4); text-align: center; color: var(--rq-text-muted); font-size: var(--rq-fs-sm); }

/* ----------------------------------------------------------- page header */

.rq-page-header {
    display: flex;
    flex-direction: column;
    gap: var(--rq-s-3);
    margin-bottom: var(--rq-s-6);
}
.rq-page-header__text { min-width: 0; }
.rq-page-header__titlerow { display: flex; align-items: center; gap: var(--rq-s-1); min-width: 0; }
.rq-page-header__title {
    margin: 0;
    font-size: var(--rq-fs-2xl);
    line-height: var(--rq-lh-tight);
    overflow-wrap: anywhere;
}
.rq-page-header__sub { margin: var(--rq-s-1) 0 0; color: var(--rq-text-muted); font-size: var(--rq-fs-sm); max-width: 70ch; }
.rq-page-header__eyebrow { margin-bottom: var(--rq-s-1); }
.rq-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rq-s-2); }
.rq-page-header__actions:empty { display: none; }
@media (min-width: 768px) {
    .rq-page-header { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--rq-s-6); }
    .rq-page-header__title { font-size: var(--rq-fs-3xl); }
    .rq-page-header__actions { flex: none; justify-content: flex-end; }
}

/* ------------------------------------------------------------ bento grid */

/*
 * Tiles never leave holes: dense packing back-fills gaps, a span helper fills
 * the whole row on the 2-column (576-991px) grid, and a tile left alone on the
 * last row stretches to close it. :has() is only used to skip the last-row rule
 * on grids that mix spans (their child count no longer maps to columns).
 */
.rq-grid { display: grid; gap: var(--rq-s-4); grid-template-columns: minmax(0, 1fr); grid-auto-flow: row dense; }
@media (min-width: 576px) {
    .rq-grid--2, .rq-grid--3, .rq-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rq-grid--2 > .rq-span-2 { grid-column: 1 / -1; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    /* Two columns: a span helper is a full row, and so is a tile left alone after it. */
    .rq-grid:is(.rq-grid--3, .rq-grid--4) > :is(.rq-span-2, .rq-span-3) { grid-column: 1 / -1; }
    .rq-grid:is(.rq-grid--2, .rq-grid--3, .rq-grid--4):not(:has(> .rq-span-2, > .rq-span-3)) > :nth-child(odd):last-child { grid-column: 1 / -1; }
    .rq-grid:is(.rq-grid--2, .rq-grid--3, .rq-grid--4) > :is(.rq-span-2, .rq-span-3) + :not(.rq-span-2, .rq-span-3):last-child { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
    .rq-grid { gap: var(--rq-s-5); }
    .rq-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rq-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rq-grid--3 > .rq-span-2, .rq-grid--4 > .rq-span-2 { grid-column: span 2; }
    .rq-grid--4 > .rq-span-3 { grid-column: span 3; }
    .rq-grid--3 > .rq-span-3 { grid-column: 1 / -1; }
    .rq-span-row-2 { grid-row: span 2; }
    .rq-grid--2:not(:has(> .rq-span-2, > .rq-span-row-2)) > :nth-child(odd):last-child { grid-column: 1 / -1; }
    /* 3 columns: 4 tiles read as 2 + 2; otherwise the last row closes up. */
    .rq-grid--3:not(:has(> .rq-span-2, > .rq-span-3, > .rq-span-row-2)):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rq-grid--3:not(:has(> .rq-span-2, > .rq-span-3, > .rq-span-row-2)):not(:has(> :nth-child(4):last-child)) > :nth-child(3n+1):last-child { grid-column: 1 / -1; }
    .rq-grid--3:not(:has(> .rq-span-2, > .rq-span-3, > .rq-span-row-2)) > :nth-child(3n+2):last-child { grid-column: span 2; }
    .rq-grid--3 > .rq-span-2:nth-child(3n+1):last-child { grid-column: 1 / -1; }
    /* 4 columns: a lone last tile (or a 2-span starting a new row) takes the whole row. */
    .rq-grid--4:not(:has(> .rq-span-2, > .rq-span-3, > .rq-span-row-2)) > :nth-child(4n+1):last-child { grid-column: 1 / -1; }
    .rq-grid--4:not(:has(> .rq-span-2, > .rq-span-3, > .rq-span-row-2)) > :nth-child(4n+2):last-child { grid-column: span 3; }
    .rq-grid--4:not(:has(> .rq-span-2, > .rq-span-3, > .rq-span-row-2)) > :nth-child(4n+3):last-child { grid-column: span 2; }
    .rq-grid--4 > .rq-span-2:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
    /* Span helpers outside the numbered grids keep their old meaning. */
    :not(.rq-grid--2, .rq-grid--3, .rq-grid--4) > .rq-span-2 { grid-column: span 2; }
    :not(.rq-grid--2, .rq-grid--3, .rq-grid--4) > .rq-span-3 { grid-column: span 3; }
}
.rq-stack { display: flex; flex-direction: column; gap: var(--rq-s-4); }
.rq-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rq-s-2); }

/* ------------------------------------------------------------------ card */

.rq-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-r-lg);
    box-shadow: var(--rq-e-1);
    color: var(--rq-text);
}
.rq-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--rq-s-2) var(--rq-s-3);
    padding: var(--rq-s-4) var(--rq-s-4) 0;
}
.rq-card__title { margin: 0; font-size: var(--rq-fs-md); font-family: var(--rq-font-display); font-weight: var(--rq-fw-semibold); letter-spacing: -0.01em; }
.rq-card__sub { margin: 2px 0 0; color: var(--rq-text-muted); font-size: var(--rq-fs-xs); }
.rq-card__actions { display: flex; align-items: center; gap: var(--rq-s-2); }
.rq-card__body { padding: var(--rq-s-4); flex: 1; min-width: 0; }
.rq-card__footer { padding: var(--rq-s-3) var(--rq-s-4); border-top: 1px solid var(--rq-border); background: var(--rq-surface-2); border-radius: 0 0 var(--rq-r-lg) var(--rq-r-lg); }
.rq-card--flush .rq-card__body { padding: 0; }
.rq-card--muted { background: var(--rq-surface-2); box-shadow: none; }
.rq-card--link { text-decoration: none; transition: box-shadow var(--rq-dur) var(--rq-ease), border-color var(--rq-dur) var(--rq-ease), transform var(--rq-dur) var(--rq-ease); }
.rq-card--link:hover { box-shadow: var(--rq-e-2); border-color: var(--rq-border-strong); color: var(--rq-text); }
.rq-card--link:active { transform: translateY(1px); }
@media (min-width: 768px) {
    .rq-card__header { padding: var(--rq-s-5) var(--rq-s-6) 0; }
    .rq-card__body { padding: var(--rq-s-5) var(--rq-s-6) var(--rq-s-6); }
    .rq-card__footer { padding: var(--rq-s-3) var(--rq-s-6); }
}

/* ------------------------------------------------------------- stat tile */

.rq-stat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--rq-s-1);
    min-width: 0;
    padding: var(--rq-s-4);
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-r-lg);
    box-shadow: var(--rq-e-1);
    color: var(--rq-text);
    text-decoration: none;
    transition: box-shadow var(--rq-dur) var(--rq-ease), border-color var(--rq-dur) var(--rq-ease), transform var(--rq-dur) var(--rq-ease);
}
.rq-stat-tile__top { display: flex; align-items: center; justify-content: space-between; gap: var(--rq-s-2); }
.rq-stat-tile__label { font-size: var(--rq-fs-xs); font-weight: var(--rq-fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--rq-text-muted); }
.rq-stat-tile__icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--rq-r-md);
    background: var(--rq-surface-3);
    color: var(--rq-text-muted);
    font-size: 15px;
}
.rq-stat-tile__value {
    margin-top: var(--rq-s-2);
    font-family: var(--rq-font-display);
    font-size: var(--rq-fs-2xl);
    font-weight: var(--rq-fw-semibold);
    letter-spacing: var(--rq-tracking-display);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.rq-stat-tile__hint { font-size: var(--rq-fs-xs); color: var(--rq-text-muted); }
.rq-stat-tile__cta { margin-top: var(--rq-s-2); font-size: var(--rq-fs-xs); font-weight: var(--rq-fw-semibold); color: var(--rq-primary-ink); display: inline-flex; align-items: center; gap: 4px; }
a.rq-stat-tile:hover { box-shadow: var(--rq-e-2); border-color: var(--rq-border-strong); color: var(--rq-text); }
a.rq-stat-tile:active { transform: translateY(1px); }
a.rq-stat-tile:hover .rq-stat-tile__cta .bi { transform: translateX(2px); }
.rq-stat-tile__cta .bi { transition: transform var(--rq-dur) var(--rq-ease); }

.rq-stat-tile--money { background: linear-gradient(180deg, var(--rq-money-soft), var(--rq-surface) 70%); border-color: color-mix(in srgb, var(--rq-money-fill) 35%, var(--rq-border)); }
.rq-stat-tile--money .rq-stat-tile__value { color: var(--rq-money); }
.rq-stat-tile--money .rq-stat-tile__icon { background: var(--rq-money-soft); color: var(--rq-money-ink); }
.rq-stat-tile--success .rq-stat-tile__value { color: var(--rq-success); }
.rq-stat-tile--success .rq-stat-tile__icon { background: var(--rq-success-soft); color: var(--rq-success); }
.rq-stat-tile--danger { border-color: color-mix(in srgb, var(--rq-danger) 30%, var(--rq-border)); }
.rq-stat-tile--danger .rq-stat-tile__value { color: var(--rq-danger); }
.rq-stat-tile--danger .rq-stat-tile__icon { background: var(--rq-danger-soft); color: var(--rq-danger); }
.rq-stat-tile--warning .rq-stat-tile__value { color: var(--rq-warning); }
.rq-stat-tile--warning .rq-stat-tile__icon { background: var(--rq-warning-soft); color: var(--rq-warning); }
@media (min-width: 768px) {
    .rq-stat-tile { padding: var(--rq-s-5) var(--rq-s-6); }
    .rq-stat-tile__value { font-size: var(--rq-fs-3xl); }
}

/* --------------------------------------------------------------- buttons */

.rq-btn {
    --rq-btn-bg: var(--rq-surface);
    --rq-btn-fg: var(--rq-text);
    --rq-btn-bd: var(--rq-border-strong);
    --rq-btn-hover-bg: var(--rq-surface-2);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rq-s-2);
    min-height: var(--rq-tap);
    padding: 0 var(--rq-s-4);
    border: 1px solid var(--rq-btn-bd);
    border-radius: var(--rq-r-md);
    background: var(--rq-btn-bg);
    color: var(--rq-btn-fg);
    font-family: var(--rq-font-body);
    font-size: var(--rq-fs-sm);
    font-weight: var(--rq-fw-semibold);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--rq-dur) var(--rq-ease), border-color var(--rq-dur) var(--rq-ease), color var(--rq-dur) var(--rq-ease), box-shadow var(--rq-dur) var(--rq-ease), transform var(--rq-dur) var(--rq-ease);
}
.rq-btn:hover { background: var(--rq-btn-hover-bg); color: var(--rq-btn-fg); }
.rq-btn:active { transform: translateY(1px) scale(.99); }
.rq-btn:focus-visible { outline: 2px solid var(--rq-primary-ink); outline-offset: 2px; }
.rq-btn:disabled, .rq-btn[aria-disabled="true"], .rq-btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}
.rq-btn .bi { font-size: 1.05em; }

.rq-btn--primary {
    --rq-btn-bg: var(--rq-primary);
    --rq-btn-fg: var(--rq-primary-contrast);
    --rq-btn-bd: var(--rq-primary);
    --rq-btn-hover-bg: color-mix(in srgb, var(--rq-primary) 88%, #000);
    box-shadow: 0 1px 2px rgba(14, 26, 43, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.rq-btn--primary:hover { box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--rq-primary) 60%, transparent); }
.rq-btn--secondary { --rq-btn-bg: var(--rq-surface); --rq-btn-fg: var(--rq-text); --rq-btn-bd: var(--rq-border-strong); --rq-btn-hover-bg: var(--rq-surface-2); box-shadow: var(--rq-e-1); }
.rq-btn--ghost { --rq-btn-bg: transparent; --rq-btn-fg: var(--rq-text); --rq-btn-bd: transparent; --rq-btn-hover-bg: var(--rq-surface-3); }
.rq-btn--danger {
    --rq-btn-bg: var(--rq-danger);
    --rq-btn-fg: #FFFFFF;
    --rq-btn-bd: var(--rq-danger);
    --rq-btn-hover-bg: color-mix(in srgb, var(--rq-danger) 86%, #000);
}
:root[data-theme="dark"] .rq-btn--danger { --rq-btn-fg: #2A0A0E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rq-btn--danger { --rq-btn-fg: #2A0A0E; } }

.rq-btn--sm { min-height: 36px; padding: 0 var(--rq-s-3); font-size: var(--rq-fs-xs); border-radius: var(--rq-r-sm); }
.rq-btn--sm::after { content: ""; position: absolute; inset: -4px 0; } /* 44px hit area */
.rq-btn--md { min-height: var(--rq-tap); }
.rq-btn--block { width: 100%; }
.rq-btn--icon { width: var(--rq-tap); padding: 0; }
.rq-btn--sm.rq-btn--icon { width: 36px; }

.rq-btn.is-loading { color: transparent !important; pointer-events: none; }
.rq-btn.is-loading::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--rq-btn-fg);
    border-right-color: transparent;
    border-radius: 50%;
    animation: rq-spin var(--rq-dur-loader) linear infinite;
}
@keyframes rq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rq-btn.is-loading::before { animation: none; border-right-color: var(--rq-btn-fg); opacity: .6; } }

/* ----------------------------------------------------------------- forms */

.rq-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--rq-s-4); min-width: 0; }
.rq-label { font-size: var(--rq-fs-sm); font-weight: var(--rq-fw-semibold); color: var(--rq-text); }
.rq-label__req { color: var(--rq-danger); margin-left: 2px; }
.rq-label__opt { color: var(--rq-text-muted); font-weight: var(--rq-fw-regular); margin-left: 4px; font-size: var(--rq-fs-xs); }
.rq-hint { font-size: var(--rq-fs-xs); color: var(--rq-text-muted); }

.rq-input, .rq-select, .rq-textarea {
    display: block;
    width: 100%;
    min-height: var(--rq-tap);
    padding: 10px var(--rq-s-3);
    border: 1px solid var(--rq-border-strong);
    border-radius: var(--rq-r-md);
    background-color: var(--rq-surface);
    color: var(--rq-text);
    font-family: var(--rq-font-body);
    font-size: 16px; /* no iOS zoom on focus */
    line-height: 1.4;
    transition: border-color var(--rq-dur) var(--rq-ease), box-shadow var(--rq-dur) var(--rq-ease), background-color var(--rq-dur) var(--rq-ease);
    -webkit-appearance: none;
    appearance: none;
}
@media (min-width: 768px) { .rq-input, .rq-select, .rq-textarea { font-size: var(--rq-fs-sm); } }
.rq-input::placeholder, .rq-textarea::placeholder { color: var(--rq-text-muted); opacity: .8; }
.rq-input:hover, .rq-select:hover, .rq-textarea:hover { border-color: color-mix(in srgb, var(--rq-text-muted) 60%, var(--rq-border-strong)); }
.rq-input:focus, .rq-select:focus, .rq-textarea:focus {
    outline: none;
    border-color: var(--rq-primary-ink);
    box-shadow: 0 0 0 3px var(--rq-focus);
}
.rq-input:disabled, .rq-select:disabled, .rq-textarea:disabled { background-color: var(--rq-surface-2); color: var(--rq-text-muted); cursor: not-allowed; }
.rq-textarea { min-height: 112px; resize: vertical; }
.rq-select {
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--rq-text-muted) 50%), linear-gradient(135deg, var(--rq-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.rq-field.has-error .rq-input, .rq-field.has-error .rq-select, .rq-field.has-error .rq-textarea,
.rq-input[aria-invalid="true"], .rq-select[aria-invalid="true"], .rq-textarea[aria-invalid="true"] {
    border-color: var(--rq-danger);
}
.rq-field.has-error .rq-input:focus, .rq-field.has-error .rq-select:focus, .rq-field.has-error .rq-textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rq-danger) 30%, transparent); }
.rq-field-error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--rq-fs-xs); font-weight: var(--rq-fw-medium); color: var(--rq-danger); }
.rq-field-error > .bi { line-height: 1.35; }

.rq-check { display: flex; align-items: center; gap: var(--rq-s-2); min-height: var(--rq-tap); cursor: pointer; }
.rq-check input { width: 20px; height: 20px; accent-color: var(--rq-primary); }

/* ----------------------------------------------------------------- table */

/*
 * Tables fit their card: text cells wrap, the actions cell shrinks to its
 * buttons, and a table that is still wider than its card scrolls inside
 * .rq-table-wrap with a sticky first column and an edge fade. app.js toggles
 * .is-dense / .is-overflowing / .is-scrolled / .is-at-end on the wrap (no JS: plain scroll).
 */
.rq-table-wrap {
    position: relative;
    max-width: 100%;
    overflow: auto;
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-r-lg);
    box-shadow: var(--rq-e-1);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rq-border-strong) transparent;
}
.rq-table-wrap--tall { max-height: 70vh; }
/* Scroll affordance: the clipped edge fades out, so "there is more" is visible without the scrollbar. */
.rq-table-wrap.is-overflowing:not(.is-at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), rgba(0, 0, 0, 0.18));
    mask-image: linear-gradient(to right, #000 calc(100% - 48px), rgba(0, 0, 0, 0.18));
}

/* A table inside a card is part of that card: no second border, radius or shadow, flush to its edges. */
.rq-card { --rq-card-pad: var(--rq-s-4); }
@media (min-width: 768px) { .rq-card { --rq-card-pad: var(--rq-s-6); } }
.rq-card .rq-table-wrap { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.rq-card__body > .rq-table-wrap { margin-inline: calc(var(--rq-card-pad) * -1); max-width: calc(100% + var(--rq-card-pad) * 2); }
.rq-card--flush .rq-card__body > .rq-table-wrap { margin-inline: 0; max-width: 100%; }
.rq-card .rq-table :is(th, td):first-child { padding-left: var(--rq-card-pad); }
.rq-card .rq-table :is(th, td):last-child { padding-right: var(--rq-card-pad); }
.rq-card .rq-table caption { padding-left: var(--rq-card-pad); padding-right: var(--rq-card-pad); }
.rq-card .rq-table tbody tr:last-child td { border-bottom: 0; }

.rq-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--rq-fs-sm);
    color: var(--rq-text);
}
.rq-table caption { caption-side: top; padding: var(--rq-s-3) var(--rq-s-4); color: var(--rq-text-muted); font-size: var(--rq-fs-xs); text-align: left; }
.rq-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--rq-s-3) var(--rq-s-4);
    background: var(--rq-surface-2);
    border-bottom: 1px solid var(--rq-border);
    color: var(--rq-text-muted);
    font-size: var(--rq-fs-xs);
    font-weight: var(--rq-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
/* Row headers (<th scope="row"> in tbody) read as the row's label, not as another column header. */
.rq-table tbody th {
    position: static;
    z-index: auto;
    background: transparent;
    color: var(--rq-text);
    font-size: var(--rq-fs-sm);
    font-weight: var(--rq-fw-semibold);
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    overflow-wrap: break-word;
}
.rq-table td {
    padding: var(--rq-s-3) var(--rq-s-4);
    border-bottom: 1px solid var(--rq-border);
    vertical-align: middle;
    overflow-wrap: break-word;
}
@media (min-width: 992px) {
    .rq-table th, .rq-table td { padding-left: var(--rq-s-3); padding-right: var(--rq-s-3); }
}
/* app.js sets .is-dense when a table would overflow: tighter cells first, scrolling only if that is not enough. */
.rq-table-wrap.is-dense > .rq-table :is(th, td):not(:first-child):not(:last-child) { padding-left: var(--rq-s-2); padding-right: var(--rq-s-2); }
.rq-table tbody tr:last-child td { border-bottom: 0; }
.rq-table tbody tr { transition: background-color var(--rq-dur) var(--rq-ease); }
.rq-table tbody tr:hover > :is(td, th) { background: var(--rq-surface-2); }
.rq-table .rq-num, .rq-table td.is-num, .rq-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.rq-table td.is-num { white-space: nowrap; }
.rq-table a { color: var(--rq-text); font-weight: var(--rq-fw-semibold); text-decoration: none; }
.rq-table a:hover { color: var(--rq-primary-ink); text-decoration: underline; }
.rq-table a.rq-btn { color: var(--rq-btn-fg); text-decoration: none; }

/* Actions: as narrow as its buttons, never wrapping them into a tall stack; icon-only buttons stay square. */
.rq-table td.rq-cell-actions, .rq-table th.rq-cell-actions { width: 1%; white-space: nowrap; text-align: right; }
.rq-table td.rq-cell-actions .rq-cluster { flex-wrap: nowrap; justify-content: flex-end; gap: var(--rq-s-1); }
.rq-table td.rq-cell-actions .rq-btn--sm { padding: 0 var(--rq-s-2); }
.rq-table td.rq-cell-actions .rq-btn--icon, .rq-table td.rq-cell-actions .rq-iconbtn { padding: 0; }

/* Checkbox column: a 44px hit area that fits its cell. */
.rq-table .rq-cell-check { width: 56px; min-width: 56px; padding-left: 6px; padding-right: 6px; text-align: center; }
.rq-card .rq-table .rq-cell-check:first-child { padding-left: 6px; }
.rq-table .rq-cell-check label { display: inline-grid; place-items: center; width: var(--rq-tap); height: var(--rq-tap); margin: -10px 0; cursor: pointer; }

/* Wide table, still scrolling: the first column (and the one after a checkbox column) stays put. */
.rq-table-wrap.is-overflowing > .rq-table > * > tr > :first-child,
.rq-table-wrap.is-overflowing > .rq-table > * > tr > .rq-cell-check:first-child + * {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--rq-surface);
}
.rq-table-wrap.is-overflowing > .rq-table > * > tr > .rq-cell-check:first-child + * { left: 56px; }
.rq-table-wrap.is-overflowing > .rq-table > thead > tr > :first-child,
.rq-table-wrap.is-overflowing > .rq-table > thead > tr > .rq-cell-check:first-child + * { z-index: 3; background: var(--rq-surface-2); }
.rq-table-wrap.is-overflowing > .rq-table > tbody > tr:hover > :is(:first-child, .rq-cell-check:first-child + *) { background: var(--rq-surface-2); }
.rq-table-wrap.is-overflowing.is-scrolled > .rq-table > * > tr > :first-child:not(.rq-cell-check),
.rq-table-wrap.is-overflowing.is-scrolled > .rq-table > * > tr > .rq-cell-check:first-child + * {
    box-shadow: 8px 0 12px -10px rgba(14, 26, 43, 0.35);
}

/*
 * Lists as cards on phones AND tablets (below 992px): <table class="rq-table rq-table--stack">,
 * each <td data-label="...">. .rq-table--stack-lg keeps stacking up to 1199.98px, for very wide
 * tables that sit in a half-width bento tile.
 */
@media (max-width: 991.98px) {
    .rq-table-wrap:has(> :is(.rq-table--stack, .rq-table--stack-lg)) { background: transparent; border: 0; box-shadow: none; overflow: visible; border-radius: 0; -webkit-mask-image: none; mask-image: none; }
    :is(.rq-table--stack, .rq-table--stack-lg), :is(.rq-table--stack, .rq-table--stack-lg) tbody, :is(.rq-table--stack, .rq-table--stack-lg) tr, :is(.rq-table--stack, .rq-table--stack-lg) td { display: block; width: 100%; }
    :is(.rq-table--stack, .rq-table--stack-lg) caption { display: block; width: 100%; padding: 0 0 var(--rq-s-3); }
    :is(.rq-table--stack, .rq-table--stack-lg) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    :is(.rq-table--stack, .rq-table--stack-lg) tr {
        margin-bottom: var(--rq-s-3);
        padding: var(--rq-s-3) var(--rq-s-4);
        background: var(--rq-surface);
        border: 1px solid var(--rq-border);
        border-radius: var(--rq-r-lg);
        box-shadow: var(--rq-e-1);
    }
    :is(.rq-table--stack, .rq-table--stack-lg) tbody tr:hover td { background: transparent; }
    :is(.rq-table--stack, .rq-table--stack-lg) td {
        position: static;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--rq-s-3);
        min-width: 0;
        padding: 6px 0;
        border: 0;
        text-align: right;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    :is(.rq-table--stack, .rq-table--stack-lg) td[data-label]::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        color: var(--rq-text-muted);
        font-size: var(--rq-fs-xs);
        font-weight: var(--rq-fw-semibold);
        text-align: left;
    }
    :is(.rq-table--stack, .rq-table--stack-lg) td.rq-cell-title { display: block; text-align: left; padding: 0 0 var(--rq-s-2); margin-bottom: var(--rq-s-1); border-bottom: 1px solid var(--rq-border); font-size: var(--rq-fs-md); }
    :is(.rq-table--stack, .rq-table--stack-lg) td.rq-cell-title::before { display: none; }
    :is(.rq-table--stack, .rq-table--stack-lg) td.rq-cell-actions { width: 100%; justify-content: flex-end; padding-top: var(--rq-s-3); flex-wrap: wrap; }
    :is(.rq-table--stack, .rq-table--stack-lg) td.rq-cell-actions .rq-cluster { flex-wrap: wrap; }
    :is(.rq-table--stack, .rq-table--stack-lg) td.rq-cell-actions::before { display: none; }
    :is(.rq-table--stack, .rq-table--stack-lg) td:empty { display: none; }
    :is(.rq-table--stack, .rq-table--stack-lg) tr { position: relative; }
    :is(.rq-table--stack, .rq-table--stack-lg) td.rq-cell-check, .rq-card :is(.rq-table--stack, .rq-table--stack-lg) td.rq-cell-check:first-child { position: absolute; top: var(--rq-s-2); right: var(--rq-s-2); width: auto; min-width: 0; padding: 0; }
    :is(.rq-table--stack, .rq-table--stack-lg) tr:has(> td.rq-cell-check) > td.rq-cell-title { padding-right: var(--rq-s-10); }
    .rq-card :is(.rq-table--stack, .rq-table--stack-lg) caption { padding: var(--rq-s-3) var(--rq-card-pad); }
    .rq-card :is(.rq-table--stack, .rq-table--stack-lg) :is(th, td):first-child, .rq-card :is(.rq-table--stack, .rq-table--stack-lg) :is(th, td):last-child { padding-left: 0; padding-right: 0; }
    /* Inside a card the rows become a divided list, not cards inside the card. */
    .rq-card :is(.rq-table--stack, .rq-table--stack-lg) tr {
        margin: 0;
        padding: var(--rq-s-3) var(--rq-card-pad);
        border-width: 0 0 1px;
        border-style: solid;
        border-color: var(--rq-border);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .rq-card :is(.rq-table--stack, .rq-table--stack-lg) tbody tr:last-child { border-bottom-width: 0; }
}

/* .rq-table--stack-xl: a many-column table in a two-thirds column (project units) keeps
   stacking up to 1599.98px, where it would otherwise be twice as wide as its card. */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .rq-table-wrap:has(> .rq-table--stack-xl) { background: transparent; border: 0; box-shadow: none; overflow: visible; border-radius: 0; -webkit-mask-image: none; mask-image: none; }
    .rq-table--stack-xl, .rq-table--stack-xl tbody, .rq-table--stack-xl tr, .rq-table--stack-xl td { display: block; width: 100%; }
    .rq-table--stack-xl caption { display: block; width: 100%; padding: 0 0 var(--rq-s-3); }
    .rq-table--stack-xl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .rq-table--stack-xl tr {
        margin-bottom: var(--rq-s-3);
        padding: var(--rq-s-3) var(--rq-s-4);
        background: var(--rq-surface);
        border: 1px solid var(--rq-border);
        border-radius: var(--rq-r-lg);
        box-shadow: var(--rq-e-1);
    }
    .rq-table--stack-xl tbody tr:hover td { background: transparent; }
    .rq-table--stack-xl td {
        position: static;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--rq-s-3);
        min-width: 0;
        padding: 6px 0;
        border: 0;
        text-align: right;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .rq-table--stack-xl td[data-label]::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        color: var(--rq-text-muted);
        font-size: var(--rq-fs-xs);
        font-weight: var(--rq-fw-semibold);
        text-align: left;
    }
    .rq-table--stack-xl td.rq-cell-title { display: block; text-align: left; padding: 0 0 var(--rq-s-2); margin-bottom: var(--rq-s-1); border-bottom: 1px solid var(--rq-border); font-size: var(--rq-fs-md); }
    .rq-table--stack-xl td.rq-cell-title::before { display: none; }
    .rq-table--stack-xl td.rq-cell-actions { width: 100%; justify-content: flex-end; padding-top: var(--rq-s-3); flex-wrap: wrap; }
    .rq-table--stack-xl td.rq-cell-actions .rq-cluster { flex-wrap: wrap; }
    .rq-table--stack-xl td.rq-cell-actions::before { display: none; }
    .rq-table--stack-xl td:empty { display: none; }
    .rq-table--stack-xl tr { position: relative; }
    .rq-table--stack-xl td.rq-cell-check, .rq-card .rq-table--stack-xl td.rq-cell-check:first-child { position: absolute; top: var(--rq-s-2); right: var(--rq-s-2); width: auto; min-width: 0; padding: 0; }
    .rq-table--stack-xl tr:has(> td.rq-cell-check) > td.rq-cell-title { padding-right: var(--rq-s-10); }
    .rq-card .rq-table--stack-xl caption { padding: var(--rq-s-3) var(--rq-card-pad); }
    .rq-card .rq-table--stack-xl :is(th, td):first-child, .rq-card .rq-table--stack-xl :is(th, td):last-child { padding-left: 0; padding-right: 0; }
    /* Inside a card the rows become a divided list, not cards inside the card. */
    .rq-card .rq-table--stack-xl tr {
        margin: 0;
        padding: var(--rq-s-3) var(--rq-card-pad);
        border-width: 0 0 1px;
        border-style: solid;
        border-color: var(--rq-border);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .rq-card .rq-table--stack-xl tbody tr:last-child { border-bottom-width: 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .rq-table-wrap:has(> .rq-table--stack-lg) { background: transparent; border: 0; box-shadow: none; overflow: visible; border-radius: 0; -webkit-mask-image: none; mask-image: none; }
    .rq-table--stack-lg, .rq-table--stack-lg tbody, .rq-table--stack-lg tr, .rq-table--stack-lg td { display: block; width: 100%; }
    .rq-table--stack-lg caption { display: block; width: 100%; padding: 0 0 var(--rq-s-3); }
    .rq-table--stack-lg thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .rq-table--stack-lg tr { margin-bottom: var(--rq-s-3); padding: var(--rq-s-3) var(--rq-s-4); background: var(--rq-surface); border: 1px solid var(--rq-border); border-radius: var(--rq-r-lg); box-shadow: var(--rq-e-1); }
    .rq-table--stack-lg tbody tr:hover td { background: transparent; }
    .rq-table--stack-lg td { position: static; display: flex; align-items: baseline; justify-content: space-between; gap: var(--rq-s-3); min-width: 0; padding: 6px 0; border: 0; text-align: right; overflow-wrap: anywhere; white-space: normal; }
    .rq-table--stack-lg td[data-label]::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--rq-text-muted); font-size: var(--rq-fs-xs); font-weight: var(--rq-fw-semibold); text-align: left; }
    .rq-table--stack-lg td.rq-cell-title { display: block; text-align: left; padding: 0 0 var(--rq-s-2); margin-bottom: var(--rq-s-1); border-bottom: 1px solid var(--rq-border); font-size: var(--rq-fs-md); }
    .rq-table--stack-lg td.rq-cell-title::before, .rq-table--stack-lg td.rq-cell-actions::before { display: none; }
    .rq-table--stack-lg td.rq-cell-actions { width: 100%; justify-content: flex-end; padding-top: var(--rq-s-3); flex-wrap: wrap; }
    .rq-table--stack-lg td:empty { display: none; }
    .rq-table--stack-lg tr { position: relative; }
    .rq-table--stack-lg td.rq-cell-check, .rq-card .rq-table--stack-lg td.rq-cell-check:first-child { position: absolute; top: var(--rq-s-2); right: var(--rq-s-2); width: auto; min-width: 0; padding: 0; }
    .rq-table--stack-lg tr:has(> td.rq-cell-check) > td.rq-cell-title { padding-right: var(--rq-s-10); }
    .rq-card .rq-table--stack-lg caption { padding: var(--rq-s-3) var(--rq-card-pad); }
    .rq-card .rq-table--stack-lg :is(th, td):first-child, .rq-card .rq-table--stack-lg :is(th, td):last-child { padding-left: 0; padding-right: 0; }
    .rq-card .rq-table--stack-lg tr { margin: 0; padding: var(--rq-s-3) var(--rq-card-pad); border-width: 0 0 1px; border-style: solid; border-color: var(--rq-border); border-radius: 0; box-shadow: none; background: transparent; }
    .rq-card .rq-table--stack-lg tbody tr:last-child { border-bottom-width: 0; }
}

.rq-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rq-s-3); padding: var(--rq-s-3) var(--rq-s-4); color: var(--rq-text-muted); font-size: var(--rq-fs-xs); }
.rq-pagination .pagination { margin: 0; flex-wrap: wrap; }

/* ------------------------------------------------------------------ chip */

.rq-chip {
    --rq-chip-fg: var(--rq-neutral);
    --rq-chip-bg: var(--rq-neutral-soft);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 10px 2px 8px;
    border-radius: 12px; /* a pill on one line, a rounded box when the text wraps */
    background: var(--rq-chip-bg);
    color: var(--rq-chip-fg);
    font-size: var(--rq-fs-xs);
    font-weight: var(--rq-fw-semibold);
    line-height: 20px;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
    vertical-align: middle;
}
.rq-chip::before { content: ""; flex: none; align-self: flex-start; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: currentColor; }
.rq-chip--plain::before { display: none; }
.rq-chip--neutral { --rq-chip-fg: var(--rq-neutral); --rq-chip-bg: var(--rq-neutral-soft); }
.rq-chip--primary { --rq-chip-fg: var(--rq-primary-ink); --rq-chip-bg: var(--rq-primary-soft); }
.rq-chip--info { --rq-chip-fg: var(--rq-info); --rq-chip-bg: var(--rq-info-soft); }
.rq-chip--violet { --rq-chip-fg: var(--rq-violet); --rq-chip-bg: var(--rq-violet-soft); }
.rq-chip--success { --rq-chip-fg: var(--rq-success); --rq-chip-bg: var(--rq-success-soft); }
.rq-chip--warning { --rq-chip-fg: var(--rq-warning); --rq-chip-bg: var(--rq-warning-soft); }
.rq-chip--orange { --rq-chip-fg: var(--rq-orange); --rq-chip-bg: var(--rq-orange-soft); }
.rq-chip--danger { --rq-chip-fg: var(--rq-danger); --rq-chip-bg: var(--rq-danger-soft); }
.rq-chip--money { --rq-chip-fg: var(--rq-money-ink); --rq-chip-bg: var(--rq-money-soft); }

/* leads.status */
.rq-chip--lead-new { --rq-chip-fg: var(--rq-info); --rq-chip-bg: var(--rq-info-soft); }
.rq-chip--lead-contacted { --rq-chip-fg: var(--rq-primary-ink); --rq-chip-bg: var(--rq-primary-soft); }
.rq-chip--lead-site_visit { --rq-chip-fg: var(--rq-violet); --rq-chip-bg: var(--rq-violet-soft); }
.rq-chip--lead-negotiation { --rq-chip-fg: var(--rq-warning); --rq-chip-bg: var(--rq-warning-soft); }
.rq-chip--lead-converted { --rq-chip-fg: var(--rq-success); --rq-chip-bg: var(--rq-success-soft); }
.rq-chip--lead-lost { --rq-chip-fg: var(--rq-neutral); --rq-chip-bg: var(--rq-neutral-soft); }
/* leads.age_bucket */
.rq-chip--age-fresh { --rq-chip-fg: var(--rq-success); --rq-chip-bg: var(--rq-success-soft); }
.rq-chip--age-warm { --rq-chip-fg: var(--rq-warning); --rq-chip-bg: var(--rq-warning-soft); }
.rq-chip--age-cooling { --rq-chip-fg: var(--rq-orange); --rq-chip-bg: var(--rq-orange-soft); }
.rq-chip--age-cold { --rq-chip-fg: var(--rq-danger); --rq-chip-bg: var(--rq-danger-soft); }
/* project_units.availability_status */
.rq-chip--unit-available { --rq-chip-fg: var(--rq-success); --rq-chip-bg: var(--rq-success-soft); }
.rq-chip--unit-hold { --rq-chip-fg: var(--rq-warning); --rq-chip-bg: var(--rq-warning-soft); }
.rq-chip--unit-blocked { --rq-chip-fg: var(--rq-orange); --rq-chip-bg: var(--rq-orange-soft); }
.rq-chip--unit-booked { --rq-chip-fg: var(--rq-violet); --rq-chip-bg: var(--rq-violet-soft); }
.rq-chip--unit-sold { --rq-chip-fg: var(--rq-neutral); --rq-chip-bg: var(--rq-neutral-soft); }

/* ----------------------------------------------------------------- toast */

.rq-toast-region {
    position: fixed;
    z-index: var(--rq-z-toast);
    left: var(--rq-s-3);
    right: var(--rq-s-3);
    bottom: max(var(--rq-s-3), env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column-reverse;
    gap: var(--rq-s-2);
    pointer-events: none;
}
@media (min-width: 768px) { .rq-toast-region { left: auto; right: var(--rq-s-6); bottom: var(--rq-s-6); width: 380px; } }
.rq-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--rq-s-3);
    padding: var(--rq-s-3) var(--rq-s-2) var(--rq-s-3) var(--rq-s-4);
    background: var(--rq-navy);
    color: #F1F5FB;
    border-radius: var(--rq-r-md);
    box-shadow: var(--rq-e-3);
    font-size: var(--rq-fs-sm);
    transition: opacity var(--rq-dur) var(--rq-ease), transform var(--rq-dur) var(--rq-ease);
}
:root[data-theme="dark"] .rq-toast { background: var(--rq-surface-3); border: 1px solid var(--rq-border-strong); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rq-toast { background: var(--rq-surface-3); border: 1px solid var(--rq-border-strong); } }
.rq-toast.is-leaving { opacity: 0; transform: translateY(4px); }
.rq-toast__icon { font-size: 18px; line-height: 20px; margin-top: 1px; }
.rq-toast--success .rq-toast__icon { color: #4ADE80; }
.rq-toast--error .rq-toast__icon { color: #FF8A8A; }
.rq-toast--warning .rq-toast__icon { color: #FFB338; }
.rq-toast--info .rq-toast__icon { color: #8DB4FF; }
.rq-toast__text { flex: 1; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.rq-toast__action, .rq-toast__close {
    flex: none;
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    margin: -8px 0;
    padding: 0 var(--rq-s-2);
    border: 0;
    border-radius: var(--rq-r-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: var(--rq-fw-semibold);
    cursor: pointer;
    transition: background-color var(--rq-dur) var(--rq-ease);
}
.rq-toast__action { color: #8DB4FF; }
.rq-toast__action:hover, .rq-toast__close:hover { background: rgba(255, 255, 255, 0.1); }

/* ------------------------------------------------- modal + offcanvas skin */

.rq-modal {
    --bs-modal-bg: var(--rq-surface);
    --bs-modal-color: var(--rq-text);
    --bs-modal-border-color: var(--rq-border);
    --bs-modal-border-radius: var(--rq-r-lg);
    --bs-modal-inner-border-radius: calc(var(--rq-r-lg) - 1px);
    --bs-modal-box-shadow: var(--rq-e-3);
    --bs-modal-header-border-color: var(--rq-border);
    --bs-modal-footer-border-color: var(--rq-border);
    --bs-modal-padding: var(--rq-s-5);
    --bs-modal-header-padding: var(--rq-s-4) var(--rq-s-5);
}
.rq-modal .modal-content { box-shadow: var(--rq-e-3); }
.rq-modal .modal-title { font-family: var(--rq-font-display); font-weight: var(--rq-fw-semibold); font-size: var(--rq-fs-lg); letter-spacing: -0.01em; }
.rq-modal .modal-footer { gap: var(--rq-s-2); }
.rq-modal .modal-footer > * { margin: 0; }
@media (max-width: 575.98px) {
    .rq-modal .modal-dialog { margin: var(--rq-s-3); }
}

.rq-offcanvas {
    --bs-offcanvas-bg: var(--rq-surface);
    --bs-offcanvas-color: var(--rq-text);
    --bs-offcanvas-border-color: var(--rq-border);
    --bs-offcanvas-width: min(560px, 100vw);
    --bs-offcanvas-height: auto;
    --bs-offcanvas-transition: transform var(--rq-dur) var(--rq-ease);
    box-shadow: var(--rq-e-3);
}
.rq-offcanvas .offcanvas-header { min-height: var(--rq-topbar-h); border-bottom: 1px solid var(--rq-border); }
.rq-offcanvas .offcanvas-title { font-family: var(--rq-font-display); font-weight: var(--rq-fw-semibold); font-size: var(--rq-fs-lg); letter-spacing: -0.01em; }
.rq-offcanvas.offcanvas-bottom { max-height: 88vh; border-radius: var(--rq-r-lg) var(--rq-r-lg) 0 0; }

/* Bootstrap's own .3s modal/offcanvas transitions are capped at --rq-dur in the app. */
.rq-app .modal.fade .modal-dialog { transition: transform var(--rq-dur) var(--rq-ease); }
.rq-app .fade { transition: opacity var(--rq-dur) var(--rq-ease); }
.rq-app .modal-backdrop, .rq-app .offcanvas-backdrop { --bs-backdrop-bg: var(--rq-navy); --bs-backdrop-opacity: .5; }
.rq-app .offcanvas, .rq-app .offcanvas-lg, .rq-app .offcanvas-md { --bs-offcanvas-transition: transform var(--rq-dur) var(--rq-ease); }

/* -------------------------------------------------------------- skeleton */

.rq-skeleton {
    position: relative;
    display: block;
    height: 14px;
    overflow: hidden;
    border-radius: var(--rq-r-sm);
    background-color: var(--rq-surface-3);
    isolation: isolate;
}
/* The shimmer is a transform-only sweep (no repaint), timed from the motion tokens: 0ms = still. */
.rq-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--rq-surface) 70%, transparent) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: rq-shimmer var(--rq-dur-shimmer) ease-in-out infinite;
    will-change: transform;
}
.rq-skeleton--text { height: 12px; margin: 6px 0; }
.rq-skeleton--text:last-child { width: 62%; }
.rq-skeleton--title { height: 22px; width: 45%; margin-bottom: var(--rq-s-3); }
.rq-skeleton--row { height: 44px; border-radius: var(--rq-r-md); }
.rq-skeleton--tile { height: 120px; border-radius: var(--rq-r-lg); }
.rq-skeleton--circle { width: 40px; height: 40px; border-radius: 50%; }
.rq-skeleton-stack { display: flex; flex-direction: column; gap: var(--rq-s-2); padding: var(--rq-s-2) 0; }
@keyframes rq-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .rq-skeleton::after { animation: none; display: none; } }

/* ----------------------------------------------------------------- empty */

.rq-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--rq-s-3);
    padding: var(--rq-s-9) var(--rq-s-5);
    color: var(--rq-text-muted);
}
.rq-empty__art { width: min(200px, 60vw); height: auto; color: var(--rq-primary-ink); }
.rq-empty__art svg { width: 100%; height: auto; display: block; }
.rq-empty__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--rq-r-lg); background: var(--rq-primary-soft); color: var(--rq-primary-ink); font-size: 28px; }
.rq-empty__line { margin: 0; max-width: 44ch; font-size: var(--rq-fs-md); color: var(--rq-text); font-weight: var(--rq-fw-medium); }
.rq-empty__action { margin-top: var(--rq-s-1); }

/* ---------------------------------------------------------------- banner */

.rq-banner {
    --rq-banner-fg: var(--rq-info);
    --rq-banner-bg: var(--rq-info-soft);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rq-s-3);
    margin-bottom: var(--rq-s-5);
    padding: var(--rq-s-3) var(--rq-s-4);
    border: 1px solid color-mix(in srgb, var(--rq-banner-fg) 28%, transparent);
    border-radius: var(--rq-r-lg);
    background: var(--rq-banner-bg);
    color: var(--rq-text);
}
.rq-banner__text { display: flex; align-items: flex-start; gap: var(--rq-s-2); min-width: 0; flex: 1 1 260px; }
.rq-banner__text > .bi { color: var(--rq-banner-fg); font-size: 18px; line-height: 1.3; }
.rq-banner__aside { font-size: var(--rq-fs-xs); color: var(--rq-text-muted); }
.rq-banner--info { --rq-banner-fg: var(--rq-info); --rq-banner-bg: var(--rq-info-soft); }
.rq-banner--warning { --rq-banner-fg: var(--rq-warning); --rq-banner-bg: var(--rq-warning-soft); }
.rq-banner--danger { --rq-banner-fg: var(--rq-danger); --rq-banner-bg: var(--rq-danger-soft); }
.rq-banner--success { --rq-banner-fg: var(--rq-success); --rq-banner-bg: var(--rq-success-soft); }
.rq-banner blockquote { margin: var(--rq-s-2) 0; padding-left: var(--rq-s-3); border-left: 3px solid var(--rq-banner-fg); white-space: pre-line; }

/* --------------------------------------------------- command palette (Ctrl-K) */

.rq-palette .modal-content { overflow: hidden; }
.rq-palette__field { position: relative; border-bottom: 1px solid var(--rq-border); }
.rq-palette__field > .bi { position: absolute; left: var(--rq-s-5); top: 50%; transform: translateY(-50%); color: var(--rq-text-muted); font-size: 18px; pointer-events: none; }
.rq-palette__input {
    width: 100%;
    min-height: 60px;
    padding: var(--rq-s-4) var(--rq-s-5) var(--rq-s-4) 52px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--rq-text);
    font-family: var(--rq-font-body);
    font-size: 17px;
}
.rq-palette__input::placeholder { color: var(--rq-text-muted); }
.rq-palette__results { max-height: min(420px, 60vh); overflow-y: auto; padding: var(--rq-s-3); }
.rq-palette__hint { padding: var(--rq-s-6) var(--rq-s-4); text-align: center; color: var(--rq-text-muted); }
.rq-palette__foot { display: none; gap: var(--rq-s-4); padding: var(--rq-s-2) var(--rq-s-5); border-top: 1px solid var(--rq-border); background: var(--rq-surface-2); color: var(--rq-text-muted); font-size: var(--rq-fs-xs); }
@media (min-width: 768px) { .rq-palette__foot { display: flex; } }

/* ------------------------------------------------------- onboarding tour */

.rq-tour {
    position: fixed;
    z-index: 1045;
    left: var(--rq-s-3);
    right: var(--rq-s-3);
    bottom: max(var(--rq-s-3), env(safe-area-inset-bottom));
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-r-lg);
    box-shadow: var(--rq-e-3);
    overflow: hidden;
}
@media (min-width: 576px) { .rq-tour { left: auto; right: var(--rq-s-6); bottom: var(--rq-s-6); width: 360px; } }
.rq-tour__head { display: flex; align-items: center; justify-content: space-between; gap: var(--rq-s-2); padding: var(--rq-s-2) var(--rq-s-2) var(--rq-s-2) var(--rq-s-4); background: var(--rq-navy); color: #FFFFFF; font-weight: var(--rq-fw-semibold); font-size: var(--rq-fs-sm); }
.rq-tour__head .bi-rocket-takeoff { color: var(--rq-money-fill); }
.rq-tour__body { padding: var(--rq-s-4); }
.rq-tour__title { margin: 0 0 var(--rq-s-1); font-size: var(--rq-fs-md); }
.rq-tour__text { margin: 0 0 var(--rq-s-4); color: var(--rq-text-muted); font-size: var(--rq-fs-sm); }
.rq-tour__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--rq-s-2); }
.rq-tour__progress { color: var(--rq-text-muted); font-size: var(--rq-fs-xs); font-variant-numeric: tabular-nums; }
/* Anchored next to the step's target (app.js sets top/left); the docked corner position is the fallback. */
.rq-tour.is-anchored { right: auto; bottom: auto; width: min(360px, calc(100vw - 24px)); }
.rq-tour-target {
    outline: 3px solid var(--rq-primary-ink) !important;
    outline-offset: 3px;
    border-radius: var(--rq-r-md);
    box-shadow: 0 0 0 8px var(--rq-focus);
    transition: outline-color var(--rq-dur) var(--rq-ease), box-shadow var(--rq-dur) var(--rq-ease);
}
.rq-nav__link.rq-tour-target { outline-color: #FFFFFF !important; outline-offset: -3px; }

/* ------------------------------------------------------------------ code */

.rq-app code, .rq-code {
    padding: 1px 6px;
    border-radius: var(--rq-r-sm);
    background: var(--rq-surface-3);
    color: var(--rq-text);
    font-family: var(--rq-font-mono);
    font-size: .875em;
    overflow-wrap: anywhere;
}
.rq-app pre code { padding: 0; background: transparent; font-size: inherit; }
.rq-app a > code { color: inherit; }

/* -------------------------------------------------- WhatsApp click-to-chat */

/* WhatsApp-green fill with white text in both themes (4.9:1), instead of a status colour that turns bright in dark mode. */
.rq-btn.rq-btn--wa {
    --rq-btn-bg: var(--rq-whatsapp);
    --rq-btn-fg: var(--rq-whatsapp-contrast);
    --rq-btn-bd: var(--rq-whatsapp);
    --rq-btn-hover-bg: var(--rq-whatsapp-hover);
}

/* ------------------------------------------------------------- utilities */

.rq-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.rq-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rq-text-xs { font-size: var(--rq-fs-xs); }
.rq-text-sm { font-size: var(--rq-fs-sm); }
.rq-text-md { font-size: var(--rq-fs-md); }
.rq-text-lg { font-size: var(--rq-fs-lg); }
.rq-text-muted { color: var(--rq-text-muted); }
.rq-text-success { color: var(--rq-success); }
.rq-text-danger { color: var(--rq-danger); }
.rq-text-warning { color: var(--rq-warning); }
.rq-fw-medium { font-weight: var(--rq-fw-medium); }
.rq-fw-semibold { font-weight: var(--rq-fw-semibold); }
.rq-mt-0 { margin-top: 0; } .rq-mt-2 { margin-top: var(--rq-s-2); } .rq-mt-4 { margin-top: var(--rq-s-4); } .rq-mt-6 { margin-top: var(--rq-s-6); } .rq-mt-8 { margin-top: var(--rq-s-8); }
.rq-mb-0 { margin-bottom: 0; } .rq-mb-2 { margin-bottom: var(--rq-s-2); } .rq-mb-4 { margin-bottom: var(--rq-s-4); } .rq-mb-6 { margin-bottom: var(--rq-s-6); } .rq-mb-8 { margin-bottom: var(--rq-s-8); }
.rq-gap-2 { gap: var(--rq-s-2); } .rq-gap-3 { gap: var(--rq-s-3); } .rq-gap-4 { gap: var(--rq-s-4); } .rq-gap-6 { gap: var(--rq-s-6); }
.rq-p-0 { padding: 0; } .rq-p-4 { padding: var(--rq-s-4); } .rq-p-6 { padding: var(--rq-s-6); }
@media (max-width: 767.98px) { .rq-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .rq-only-mobile { display: none !important; } }

/* Dark theme: a dark tenant colour on a dark page still needs an edge. */
:root[data-theme="dark"] .rq-btn--primary,
:root[data-theme="dark"] .btn-premium { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rq-btn--primary,
    :root:not([data-theme="light"]) .btn-premium { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
}