/* ===================================================================
   RateTheLeader.com. Site stylesheet.

   Two looks from Leon's style guide of 31 October 2026, with the clear
   layout of Monday.com and a quieter, more editorial finish:
   - Light, "Clean Cobalt": a cool off-white page, white working
     surfaces, dark ink, and cobalt as the one accent. The default.
   - Dark, "Midnight & Silver": a midnight-blue page with silver for
     emphasis. Each person's own choice, set with data-theme="dark".

   Shared rules: Roboto throughout, Roboto Slab for the major page
   headings, 4 to 6 pixel corners, 1px borders, no pill shapes and no
   drop shadows. Every colour is a value on :root, so Dark is a change
   of values, never a second set of rules. Red, orange and green are
   signal colours only, always with a word or a symbol beside them.
   The one exception is the client's wordmark (Brief 5.1), where they
   colour the c, o and m in both looks.
   =================================================================== */

:root {
    /* --- Light, Clean Cobalt. The default. --- */
    --rtl-page:            #F6F8FC;
    --rtl-panel:           #FFFFFF;
    --rtl-panel-raised:    #F1F4FB;
    --rtl-line:            #DFE4EE;
    --rtl-line-strong:     #C5CDDC;
    --rtl-input:           #FFFFFF;
    --rtl-input-line:      #8C97AB;   /* 3:1 against white, so a box is always visible */
    --rtl-text:            #18233A;
    --rtl-heading:         #18233A;
    --rtl-muted:           #576782;
    --rtl-faint:           #6B7A93;
    --rtl-hover:           #F1F4FB;
    --rtl-selected:        #E8EEFB;

    /* The one accent: buttons, links, the chosen item and focus. */
    --rtl-accent:          #294FC4;
    --rtl-accent-strong:   #1E3E9F;
    --rtl-accent-text:     #FFFFFF;
    --rtl-link:            #294FC4;
    --rtl-link-hover:      #1E3E9F;
    --rtl-focus:           #294FC4;
    --rtl-focus-ring:      rgba(41, 79, 196, 0.22);
    --rtl-accent-soft:     #EEF2FC;
    --rtl-button-2:        #FFFFFF;   /* the second button: white with an accent outline */

    /* The homepage hero: a soft periwinkle wash with light curves, and a raised video card. */
    --rtl-hero:            #FBFCFE;
    --rtl-hero-glow:       rgba(196, 210, 246, 0.75);
    --rtl-hero-glow-2:     rgba(226, 232, 250, 0.9);
    --rtl-hero-curves:     0.9;       /* how strongly the white curves show */
    --rtl-card-shadow:     0 18px 40px rgba(24, 35, 58, 0.10), 0 2px 6px rgba(24, 35, 58, 0.05);

    /* --- Signal colours. Only ever a signal, always with a word or a symbol. --- */
    --rtl-red:             #EF1A2D;   /* Ferrari Red, Rosso Corsa */
    --rtl-orange:          #FF8000;   /* McLaren Papaya */
    --rtl-green:           #037A68;   /* Aston Martin Racing Green */
    /* The same signals as text, dark or light enough to read on the page. */
    --rtl-red-ink:         #C8102E;
    --rtl-orange-ink:      #B35400;
    --rtl-green-ink:       #037A68;
    --rtl-red-tint:        rgba(239, 26, 45, 0.07);
    --rtl-green-tint:      rgba(3, 122, 104, 0.08);
    --rtl-orange-tint:     rgba(255, 128, 0, 0.10);
    --rtl-on-orange:       #1B1206;   /* text on the orange Simulation bar */
    --rtl-gold:            #C9A227;   /* the gold ring of a Gold-lined Green result */

    /* --- Graph colours on the console. Kept apart from the signal colours, which only ever
       show a result band. Checked for colour blindness in both looks; every graph also writes
       its numbers, as two of them are faint on white. --- */
    --rtl-chart-1:         #2A78D6;   /* blue */
    --rtl-chart-2:         #E87BA4;   /* pink */
    --rtl-chart-3:         #EDA100;   /* yellow */
    --rtl-chart-none:      #8C97AB;   /* grey: not yet, waiting */

    /* --- Type. Roboto throughout; Roboto Slab for the major page headings. --- */
    --rtl-font:            'Roboto', system-ui, sans-serif;
    --rtl-font-slab:       'Roboto Slab', Georgia, serif;
    --rtl-font-condensed:  'Roboto', system-ui, sans-serif;
    --rtl-font-display:    'Source Serif 4', Georgia, serif;   /* the homepage headlines only */

    /* --- Shape. --- */
    --rtl-radius:          6px;
    --rtl-radius-sm:       4px;
    --rtl-side-width:      248px;

    color-scheme: light;
}

:root[data-theme="dark"] {
    /* --- Dark, Midnight & Silver. --- */
    --rtl-page:            #101722;
    --rtl-panel:           #171F2A;
    --rtl-panel-raised:    #202A36;
    --rtl-line:            #34404D;
    --rtl-line-strong:     #46525F;
    --rtl-input:           #121A24;
    --rtl-input-line:      #66737F;
    --rtl-text:            #ECF0F3;
    --rtl-heading:         #ECF0F3;
    --rtl-muted:           #AEB8C1;
    --rtl-faint:           #A3A3A3;
    --rtl-hover:           #202A36;
    --rtl-selected:        #263241;

    --rtl-accent:          #B8C7D5;
    --rtl-accent-strong:   #D7E0E7;
    --rtl-accent-text:     #111922;
    --rtl-link:            #B8C7D5;
    --rtl-link-hover:      #D7E0E7;
    --rtl-focus:           #D7E0E7;
    --rtl-focus-ring:      rgba(215, 224, 231, 0.20);
    --rtl-accent-soft:     rgba(184, 199, 213, 0.08);
    --rtl-button-2:        transparent;

    --rtl-hero:            #101722;
    --rtl-hero-glow:       rgba(90, 120, 175, 0.22);
    --rtl-hero-glow-2:     rgba(60, 85, 130, 0.18);
    --rtl-hero-curves:     0.07;
    --rtl-card-shadow:     0 18px 40px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);

    --rtl-red-ink:         #FF6B73;
    --rtl-orange-ink:      #FF9A3D;
    --rtl-green-ink:       #3DBFA6;
    --rtl-red-tint:        rgba(239, 26, 45, 0.14);
    --rtl-green-tint:      rgba(61, 191, 166, 0.12);
    --rtl-orange-tint:     rgba(255, 154, 61, 0.12);

    --rtl-chart-1:         #3987E5;
    --rtl-chart-2:         #D55181;
    --rtl-chart-3:         #C98500;
    --rtl-chart-none:      #66737F;

    color-scheme: dark;
}


/* ===================================================================
   Base
   =================================================================== */
html {
    font-size: 15px;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--rtl-page);
    color: var(--rtl-text);
    font-family: var(--rtl-font);
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rtl-font);
    color: var(--rtl-heading);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* The major page headings: the page title and the homepage headline, in Roboto Slab. */
.rtl-slab {
    font-family: var(--rtl-font-slab);
}

/* The page heading, followed by a hairline. */
main h4 {
    font-family: var(--rtl-font-slab);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 0.35rem;
}

hr {
    border: 0;
    border-top: 1px solid var(--rtl-line);
    opacity: 1;
    margin: 0.75rem 0 1.5rem;
}

a {
    color: var(--rtl-link);
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--rtl-link-hover);
    text-decoration: underline;
}

/* Links inside running text stay underlined, so they read as links. */
p a, li a, .rtl-prose a, .small a {
    text-decoration: underline;
}

.text-muted, .rtl-muted {
    color: var(--rtl-muted) !important;
}

small, .small {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--rtl-focus);
    outline-offset: 2px;
}


/* ===================================================================
   Buttons. Small corners, in sentence case. One primary per page,
   filled with the accent; the others white (or quiet, in Dark) with an
   accent outline.
   =================================================================== */
.btn {
    font-family: var(--rtl-font);
    font-weight: 500;
    letter-spacing: 0;
    border-radius: var(--rtl-radius-sm);
    border-width: 1px;
    box-shadow: none !important;
    white-space: nowrap;
}

.btn-sm {
    font-size: 0.875rem;
    padding: 0.4rem 1.05rem;
}

.btn-primary {
    background: var(--rtl-accent);
    border-color: var(--rtl-accent);
    color: var(--rtl-accent-text);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--rtl-accent-strong) !important;
    border-color: var(--rtl-accent-strong) !important;
    color: var(--rtl-accent-text) !important;
}

.btn-secondary {
    background: var(--rtl-button-2);
    border-color: var(--rtl-accent);
    color: var(--rtl-link);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background: var(--rtl-accent-soft) !important;
    border-color: var(--rtl-accent-strong) !important;
    color: var(--rtl-link-hover) !important;
}

.btn-danger {
    background: var(--rtl-button-2);
    border-color: var(--rtl-red-ink);
    color: var(--rtl-red-ink);
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background: var(--rtl-red-tint) !important;
    border-color: var(--rtl-red-ink) !important;
    color: var(--rtl-red-ink) !important;
}

/* A button that cannot be used yet looks it: faded, with a not allowed pointer. */
.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:focus-visible {
    outline: 2px solid var(--rtl-focus);
    outline-offset: 2px;
}

/* Icon only buttons, such as the PDF and Excel exports. */
.btn.p-1 img {
    width: 20px;
    height: 20px;
}


/* ===================================================================
   Forms
   =================================================================== */
.form-label, .col-form-label {
    color: var(--rtl-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.form-control, .form-select {
    background-color: var(--rtl-input);
    border: 1px solid var(--rtl-input-line);
    border-radius: var(--rtl-radius-sm);
    color: var(--rtl-text);
}

/* Focus: the accent border and a soft ring, so the box in use is plain to see. */
.form-control:focus, .form-select:focus {
    background-color: var(--rtl-input);
    border-color: var(--rtl-focus);
    color: var(--rtl-text);
    box-shadow: 0 0 0 3px var(--rtl-focus-ring);
}

.form-control::placeholder {
    color: var(--rtl-faint);
}

.form-control[readonly], .form-control:disabled, .form-select:disabled {
    background-color: var(--rtl-panel-raised);
    color: var(--rtl-muted);
}

.form-check-input {
    background-color: var(--rtl-input);
    border-color: var(--rtl-input-line);
}

.form-check-input:checked {
    background-color: var(--rtl-accent);
    border-color: var(--rtl-accent);
}

.form-check-input:focus {
    border-color: var(--rtl-focus);
    box-shadow: 0 0 0 3px var(--rtl-focus-ring);
}

/* In Dark the box fills with silver, so its tick is dark. */
:root[data-theme="dark"] .form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111922' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

:root[data-theme="dark"] .form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23111922'/%3e%3c/svg%3e");
}

.text-danger, .field-validation-error {
    color: var(--rtl-red-ink) !important;
}

.validation-summary-errors ul {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    color: var(--rtl-red-ink);
}


/* ===================================================================
   Panels, cards, alerts, dropdowns and modals: 1px borders, no shadows.
   =================================================================== */
.card, .rtl-panel {
    background: var(--rtl-panel);
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius);
    box-shadow: none !important;
    color: var(--rtl-text);
}

.card-header, .card-footer {
    background: transparent;
    border-color: var(--rtl-line);
}

.shadow-sm, .shadow, .shadow-lg {
    box-shadow: none !important;
}

.alert {
    border-radius: var(--rtl-radius-sm);
    font-size: 0.92rem;
    background: var(--rtl-panel);
    color: var(--rtl-text);
    border: 1px solid var(--rtl-line-strong);
}

.alert-danger {
    border-color: var(--rtl-red);
    background: var(--rtl-red-tint);
}

.alert-success {
    border-color: var(--rtl-green);
    background: var(--rtl-green-tint);
}

.toast {
    border-radius: var(--rtl-radius-sm);
    box-shadow: none;
}

.toast.bg-success {
    background: var(--rtl-green) !important;
}

.dropdown-menu {
    background: var(--rtl-panel);
    border: 1px solid var(--rtl-line-strong);
    border-radius: var(--rtl-radius-sm);
    box-shadow: none;
}

.dropdown-item {
    color: var(--rtl-text);
}

.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
    background: var(--rtl-hover);
    color: var(--rtl-heading);
}

.dropdown-divider {
    border-color: var(--rtl-line);
}

.modal-content {
    background: var(--rtl-panel);
    border: 1px solid var(--rtl-line-strong);
    border-radius: var(--rtl-radius);
    box-shadow: none;
    color: var(--rtl-text);
}

.modal-header, .modal-footer {
    border-color: var(--rtl-line);
}

.modal-title {
    font-family: var(--rtl-font);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--rtl-heading);
}

/* On a short screen the body of a modal scrolls and the buttons stay in reach. */
@media (max-height: 560px) {
    .modal-dialog { margin-top: 0.5rem; margin-bottom: 0.5rem; }
    .modal-body { max-height: calc(100vh - 140px); overflow-y: auto; }
}


/* ===================================================================
   The client's wordmark (Brief 5.1), never restyled: RateTheLeader in
   the text colour, then .com in bold with the c in brand red, the o in
   brand orange and the m in brand green, then the brand mark.
   =================================================================== */
.rtl-wordmark {
    font-family: var(--rtl-font);
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    color: var(--rtl-heading);
    white-space: nowrap;
    text-decoration: none;
}

a.rtl-wordmark:hover {
    color: var(--rtl-heading);
}

.rtl-wordmark .rtl-dotcom {
    font-weight: 700;
}

/* Inside a sentence the wordmark keeps the size and colour of the text. */
.rtl-inline-brand .rtl-wordmark {
    font-size: inherit;
    color: inherit;
}

.rtl-wordmark .rtl-c { color: var(--rtl-red); }
.rtl-wordmark .rtl-o { color: var(--rtl-orange); }
.rtl-wordmark .rtl-m { color: var(--rtl-green); }

.rtl-wordmark .rtl-mark {
    font-size: 0.55em;
    vertical-align: super;
    margin-left: 1px;
    font-weight: 400;
}


/* ===================================================================
   Public layout: a slim top bar, the page, and the footer.
   =================================================================== */
.rtl-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--rtl-panel);
    border-bottom: 1px solid var(--rtl-line);
}

.rtl-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 68px;
}

.rtl-topbar .rtl-wordmark {
    font-size: 1.25rem;
}

.rtl-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rtl-public-main {
    padding: 1.5rem 0 3rem;
}

/* On the homepage the hero starts right under the top bar. */
.rtl-public-main.is-home {
    padding-top: 0;
}

/* The Back button, on every page except the homepage. */
.rtl-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--rtl-muted);
}

.rtl-back:hover {
    color: var(--rtl-heading);
}

.rtl-back svg {
    width: 16px;
    height: 16px;
}

/* The footer on every page. */
.rtl-footer {
    border-top: 1px solid var(--rtl-line);
    background: var(--rtl-page);
    padding: 1.5rem 0 1.75rem;
    font-size: 0.85rem;
    color: var(--rtl-muted);
}

.rtl-footer-links {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}

.rtl-footer-links a {
    color: var(--rtl-muted);
    text-decoration: none;
}

.rtl-footer-links a:hover {
    color: var(--rtl-heading);
    text-decoration: underline;
}

/* The seal sits bottom-left, so the footer keeps clear of it. */
.rtl-footer .container,
.rtl-footer .rtl-footer-inner {
    padding-left: 96px;
}


/* ===================================================================
   Logged-in layout: a fixed side menu, never a hamburger on a desktop.
   Below 992 pixels the menu slides in from the left.
   =================================================================== */
.rtl-shell {
    min-height: 100vh;
}

.rtl-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--rtl-side-width);
    display: flex;
    flex-direction: column;
    background: var(--rtl-panel);
    border-right: 1px solid var(--rtl-line);
    z-index: 1040;
    /* On a short screen the whole menu scrolls as one: the links, then the seal and the account area. */
    overflow-y: auto;
}

.rtl-side-brand {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--rtl-line);
}

.rtl-side-brand .rtl-wordmark {
    font-size: 1.02rem;
}

.rtl-side-nav {
    flex: 1 0 auto;
    overflow: visible;
    padding: 0.85rem 0.6rem;
}

/* A group's name: a small label in capitals with letter spacing. */
.rtl-side-group {
    margin: 1rem 0.65rem 0.35rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rtl-faint);
}

.rtl-side-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    margin-bottom: 3px;
    border-radius: var(--rtl-radius-sm);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--rtl-text);
    text-decoration: none;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
}

.rtl-side-item:hover {
    background: var(--rtl-hover);
    color: var(--rtl-heading);
    text-decoration: none;
}

/* The page in use: a tinted surface, a bar of the accent on its left edge and bolder text. */
.rtl-side-item.active {
    background: var(--rtl-selected);
    color: var(--rtl-heading);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--rtl-accent);
}

.rtl-side-item.active svg {
    color: var(--rtl-link);
}

.rtl-side-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--rtl-muted);
}

/* A group that opens in place, such as Configure: the heading with a caret, then its pages
   indented under it. The heading is only marked while one of its pages is open and the group
   is shut; open, the page itself is marked. */
.rtl-side-fold > summary {
    list-style: none;
    cursor: pointer;
}

.rtl-side-fold > summary::-webkit-details-marker {
    display: none;
}

.rtl-side-fold[open] > summary.active {
    background: none;
    box-shadow: none;
    font-weight: 500;
}

.rtl-side-item .rtl-side-caret {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-left: auto;
    transition: transform 0.15s ease;
}

.rtl-side-fold[open] .rtl-side-caret {
    transform: rotate(180deg);
}

.rtl-side-sub {
    padding-left: 2.55rem;
    font-size: 0.9rem;
}

/* The account area at the foot of the menu: the person's name, which opens Account, then
   Logout, then Light or Dark. */
.rtl-side-account {
    border-top: 1px solid var(--rtl-line);
    padding: 0.75rem 0.6rem 0.9rem;
}

.rtl-side-person {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    margin-bottom: 3px;
    border-radius: var(--rtl-radius-sm);
    color: var(--rtl-text);
    text-decoration: none;
}

.rtl-side-person:hover {
    background: var(--rtl-hover);
    color: var(--rtl-heading);
    text-decoration: none;
}

.rtl-side-person.active {
    background: var(--rtl-selected);
    box-shadow: inset 3px 0 0 var(--rtl-accent);
}

.rtl-side-person-text {
    flex: 1 1 auto;
    min-width: 0;
}

.rtl-side-person-go {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--rtl-faint);
}

.rtl-side-person:hover .rtl-side-person-go {
    color: var(--rtl-link);
}

.rtl-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    border: 0;
    background: var(--rtl-selected);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rtl-link);
}

.rtl-side-person-name {
    display: block;
    color: var(--rtl-heading);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.rtl-side-person-role {
    display: block;
    color: var(--rtl-faint);
    font-size: 0.75rem;
}

/* The Light and Dark switch: two halves, the chosen one on a raised surface with a
   border and bolder text. */
.rtl-theme-switch {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--rtl-page);
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius-sm);
    margin: 0.5rem 0.65rem 0;
}

.rtl-theme-switch button {
    flex: 1 1 50%;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--rtl-muted);
    font-size: 0.82rem;
    padding: 0.25rem 0;
}

.rtl-theme-switch button.is-on {
    background: var(--rtl-panel);
    border-color: var(--rtl-line-strong);
    color: var(--rtl-heading);
    font-weight: 600;
}

.rtl-main {
    margin-left: var(--rtl-side-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.rtl-content {
    flex: 1 0 auto;
    padding: 1.75rem 2rem 3rem;
    max-width: 1280px;
    width: 100%;
}

.rtl-main .rtl-footer .rtl-footer-inner {
    padding-right: 2rem;
}

/* The bar that opens the menu on a phone or a tablet. Hidden on a desktop. */
.rtl-appbar {
    display: none;
}

.rtl-scrim {
    display: none;
}

@media (max-width: 991.98px) {
    .rtl-sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .rtl-shell.is-drawer-open .rtl-sidebar {
        transform: none;
    }

    .rtl-shell.is-drawer-open .rtl-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1030;
    }

    .rtl-main {
        margin-left: 0;
    }

    .rtl-appbar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 1020;
        min-height: 56px;
        padding: 0 1rem;
        background: var(--rtl-page);
        border-bottom: 1px solid var(--rtl-line);
    }

    .rtl-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--rtl-line-strong);
        border-radius: var(--rtl-radius-sm);
        background: transparent;
        color: var(--rtl-heading);
    }

    .rtl-menu-button svg {
        width: 20px;
        height: 20px;
    }

    .rtl-content {
        padding: 1.25rem 1rem 2.5rem;
    }

    .rtl-main .rtl-footer .rtl-footer-inner {
        padding-right: 1rem;
    }
}


/* ===================================================================
   The Seal of Security: round, fixed bottom-left. Its wording opens
   beside it on hover, focus or a tap, on a solid panel. In the logged-in
   area on a desktop it sits in the foot of the side menu instead, with
   the wording always shown, so it never covers the page.
   =================================================================== */
.rtl-seal {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1050;
}

.rtl-seal-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rtl-panel);
    border: 1px solid var(--rtl-line-strong);
    color: var(--rtl-heading);
    padding: 0;
}

.rtl-seal-badge:hover,
.rtl-seal-badge:focus-visible,
.rtl-seal.is-open .rtl-seal-badge {
    border-color: var(--rtl-muted);
}

.rtl-seal-badge svg {
    width: 24px;
    height: 24px;
}

.rtl-seal-text {
    position: absolute;
    left: 66px;
    bottom: 0;
    z-index: 2;
    width: 260px;
    padding: 0.7rem 0.85rem;
    background-color: var(--rtl-panel);
    border: 1px solid var(--rtl-line-strong);
    border-radius: var(--rtl-radius);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--rtl-text);
    display: none;
}

.rtl-seal-text strong {
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--rtl-font);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rtl-muted);
}

.rtl-seal-text a {
    display: inline-block;
    margin-top: 0.4rem;
}

.rtl-seal:hover .rtl-seal-text,
.rtl-seal:focus-within .rtl-seal-text,
.rtl-seal.is-open .rtl-seal-text {
    display: block;
}

/* The seal in the foot of the side menu. */
.rtl-seal-inline {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0 0.6rem 0.6rem;
    padding: 0.65rem;
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius);
    color: var(--rtl-muted);
    font-size: 0.74rem;
    line-height: 1.4;
    text-decoration: none;
}

.rtl-seal-inline:hover {
    color: var(--rtl-text);
    border-color: var(--rtl-line-strong);
}

.rtl-seal-inline-badge {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--rtl-line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rtl-heading);
}

.rtl-seal-inline-badge svg {
    width: 18px;
    height: 18px;
}

/* Logged in on a desktop, the side menu holds the seal, so the floating one is not shown. */
@media (min-width: 992px) {
    .rtl-app .rtl-seal {
        display: none;
    }
}

/* On a phone or tablet the floating seal steps aside while the menu is open. */
.rtl-app .rtl-shell.is-drawer-open ~ .rtl-seal {
    display: none;
}

/* On the public pages from 768 pixels wide, the page keeps a left margin for the seal, so the
   seal never sits on text. The top bar and the footer line up with it. */
@media (min-width: 768px) {
    body:not(.rtl-app) .rtl-topbar-inner,
    body:not(.rtl-app) main .container,
    body:not(.rtl-app) .rtl-footer .container {
        padding-left: 88px;
    }
}

/* The end of every page stays clear of the floating seal. */
.rtl-public-main,
.rtl-content {
    padding-bottom: 5.5rem;
}

@media (max-width: 767.98px) {
    .rtl-seal {
        left: 10px;
        bottom: 10px;
    }

    .rtl-seal-badge {
        width: 46px;
        height: 46px;
    }

    .rtl-seal-badge svg {
        width: 20px;
        height: 20px;
    }

    .rtl-seal-text {
        left: 54px;
        width: min(260px, calc(100vw - 76px));
    }

    .rtl-footer .container,
    .rtl-footer .rtl-footer-inner {
        padding-left: 64px;
    }
}


/* ===================================================================
   Login and other short forms on their own.
   =================================================================== */
.rtl-auth {
    max-width: 420px;
    margin: 2.5rem auto 3rem;
}

.rtl-auth .card {
    padding: 0.5rem;
}

.rtl-auth h4 {
    margin-bottom: 1.25rem;
}


/* ===================================================================
   Tables. A plain panel with a 1px border and a quiet heading row.
   Clicking a row opens it. Columns fit the page; long text wraps.
   =================================================================== */
.table-wrapper,
.table-responsive {
    background: var(--rtl-panel);
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius);
    overflow-x: auto;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--rtl-text);
    --bs-table-hover-bg: var(--rtl-hover);
    --bs-table-hover-color: var(--rtl-heading);
    font-size: 0.88rem;
    margin-bottom: 0;
    width: 100%;
    color: var(--rtl-text);
}

.table thead th {
    background: var(--rtl-panel-raised);
    color: var(--rtl-muted);
    font-weight: 500;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--rtl-line);
    padding: 0.65rem 0.85rem;
    vertical-align: middle;
    position: relative;
}

.table tbody td {
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--rtl-line);
    border-bottom: 0;
    vertical-align: middle;
    overflow-wrap: break-word;
}

.table tbody tr:first-child td {
    border-top: 0;
}

/* Figures line up down the column. */
.table td.cell-num,
.table th.cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A row that opens its record. */
.table tbody tr[data-href] {
    cursor: pointer;
}

.table tbody tr[data-href]:hover > td {
    background: var(--rtl-hover);
    color: var(--rtl-heading);
}

/* On a phone or tablet a wide table scrolls inside its own box, never the page. */
@media (max-width: 991.98px) {
    .table-wrapper,
    .table-responsive {
        overflow-x: auto;
    }
}

/* --- Sorting --- */
.table.sortable thead th {
    cursor: pointer;
    user-select: none;
    padding-right: 1.4rem;
}

.sortable th::after {
    content: '\2195';
    position: absolute;
    right: 0.5rem;
    opacity: 0.35;
    font-size: 0.7rem;
}

.sortable th.sort-asc::after { content: '\2191'; opacity: 1; }
.sortable th.sort-desc::after { content: '\2193'; opacity: 1; }

.table.sortable thead th.no-sort {
    cursor: default;
    padding-right: 0.75rem;
}

.sortable th.no-sort::after {
    content: '';
}

/* --- Row actions: text links separated by a bar. --- */
.table-action-link {
    color: var(--rtl-link);
    font-weight: 500;
    text-decoration: none;
    font-size: 0.84rem;
    white-space: nowrap;
}

.table-action-link:hover {
    color: var(--rtl-link-hover);
    text-decoration: underline;
}

.table-action-delete,
.table-action-delete:hover {
    color: var(--rtl-red-ink);
}

.table-action-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--rtl-link);
    font-size: 0.84rem;
    cursor: pointer;
}


/* ===================================================================
   List toolbars. A filter bar with several fields sits behind one
   Filters button on a phone; on a tablet or desktop it is always shown.
   =================================================================== */
.portal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.portal-toolbar .filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.portal-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-toggle {
    display: none;
}

@media (min-width: 768px) {
    .portal-toolbar .filter-panel.collapse:not(.show) {
        display: flex;
    }
}

@media (max-width: 767.98px) {
    .filter-toggle {
        display: block;
        width: 100%;
        min-height: 38px;
    }

    .portal-toolbar .filter-panel.collapse:not(.show) {
        display: none;
    }

    .portal-toolbar .filter-panel,
    .portal-toolbar .filter-panel > * {
        width: 100%;
    }

    .portal-toolbar .portal-toolbar-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .portal-toolbar .portal-toolbar-actions .btn,
    .btn-sm {
        min-height: 38px;
    }

    /* 16 pixel text in every box on a phone, so tapping a box does not zoom the page. */
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm {
        font-size: 16px;
    }
}


/* ===================================================================
   Signals. A result is never shown by colour alone: always a word and
   an icon beside the colour.
   =================================================================== */
.rtl-signal {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
}

.rtl-signal svg {
    width: 16px;
    height: 16px;
}

.rtl-signal-red    { color: var(--rtl-red-ink); }
.rtl-signal-orange { color: var(--rtl-orange-ink); }
.rtl-signal-green  { color: var(--rtl-green-ink); }


/* ===================================================================
   Homepage. A split hero: the headline, the two equal actions and the
   confidence cues on one side, the explainer video on the other. Behind
   the hero, a soft periwinkle wash with a few light sweeping curves
   (Leon, 1 November 2026). The other registrations sit below in a
   quieter strip.
   =================================================================== */
.rtl-hero {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 5rem;
    background-color: var(--rtl-hero);
    background-image:
        radial-gradient(70rem 42rem at 100% 0%, var(--rtl-hero-glow), transparent 62%),
        radial-gradient(60rem 30rem at 55% 115%, var(--rtl-hero-glow-2), transparent 70%);
}

.rtl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 640' preserveAspectRatio='none'><defs><filter id='b'><feGaussianBlur stdDeviation='14'/></filter></defs><g fill='none' stroke='white' filter='url(%23b)'><path d='M-40 520 C 320 380 640 600 1480 250' stroke-width='70' stroke-opacity='0.55'/><path d='M380 700 C 700 470 1000 520 1480 380' stroke-width='40' stroke-opacity='0.45'/><path d='M640 -40 C 900 160 1150 120 1480 40' stroke-width='50' stroke-opacity='0.35'/></g></svg>") center / 100% 100% no-repeat;
    opacity: var(--rtl-hero-curves);
    pointer-events: none;
}

.rtl-hero > .container {
    position: relative;
}

.rtl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3.5rem;
    align-items: center;
}

/* The line above the headline: the wordmark as it always is, then the product name as a
   small label in capitals. */
.rtl-hero-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.rtl-hero-kicker .rtl-wordmark {
    font-size: 1.05rem;
}

.rtl-hero-kicker-text {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rtl-muted);
}

.rtl-hero-title {
    font-family: var(--rtl-font-display);
    font-weight: 650;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--rtl-heading);
    margin: 0 0 1.25rem;
}

.rtl-hero-sub {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--rtl-muted);
    max-width: 34rem;
    margin-bottom: 2rem;
}

/* The two main actions: equal in size, side by side. The first is filled with the accent,
   the second has an accent outline. */
.rtl-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    max-width: 34rem;
}

.rtl-hero-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--rtl-accent);
    border-radius: var(--rtl-radius-sm);
    background: var(--rtl-accent);
    color: var(--rtl-accent-text);
    font-weight: 500;
    font-size: 1.02rem;
    text-align: center;
    text-decoration: none;
}

.rtl-hero-button:hover,
.rtl-hero-button:focus-visible {
    background: var(--rtl-accent-strong);
    border-color: var(--rtl-accent-strong);
    color: var(--rtl-accent-text);
    text-decoration: none;
}

.rtl-hero-button.is-second {
    background: var(--rtl-button-2);
    color: var(--rtl-link);
}

.rtl-hero-button.is-second:hover,
.rtl-hero-button.is-second:focus-visible {
    background: var(--rtl-accent-soft);
    border-color: var(--rtl-accent-strong);
    color: var(--rtl-link-hover);
}

/* Under each main button, who it is for, in small grey text. */
.rtl-hero-action p {
    margin: 0.55rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--rtl-muted);
}

.rtl-hero-note {
    margin: 1.25rem 0 0;
    max-width: 34rem;
    font-size: 0.9rem;
    color: var(--rtl-muted);
}

/* Confidence cues under the actions: short words, each with a small symbol. */
.rtl-hero-cues {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--rtl-line);
    max-width: 34rem;
    font-size: 0.85rem;
    color: var(--rtl-muted);
}

.rtl-hero-cues li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rtl-hero-cues svg {
    width: 16px;
    height: 16px;
    color: var(--rtl-link);
}

/* The explainer video: a raised white card holding a 16 by 9 screen with a clear play
   control, then a short description and a time label. */
.rtl-video {
    margin: 0;
    padding: 0.5rem;
    border: 1px solid var(--rtl-line);
    border-radius: 12px;
    background: var(--rtl-panel);
    box-shadow: var(--rtl-card-shadow);
}

.rtl-video-screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background:
        radial-gradient(40rem 20rem at 0% 0%, var(--rtl-hero-glow-2), transparent 70%),
        linear-gradient(160deg, var(--rtl-accent-soft), var(--rtl-panel-raised));
}

/* The same light curves as the hero, inside the screen. */
.rtl-video-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 360' preserveAspectRatio='none'><defs><filter id='b'><feGaussianBlur stdDeviation='8'/></filter></defs><g fill='none' stroke='white' filter='url(%23b)'><path d='M-20 280 C 160 200 320 320 660 150' stroke-width='38' stroke-opacity='0.7'/><path d='M180 380 C 330 260 470 300 660 240' stroke-width='22' stroke-opacity='0.6'/></g></svg>") center / 100% 100% no-repeat;
    opacity: var(--rtl-hero-curves);
}

.rtl-video-play {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--rtl-accent);
    color: var(--rtl-accent-text);
    box-shadow: 0 8px 22px var(--rtl-focus-ring);
}

.rtl-video-play svg {
    width: 24px;
    height: 24px;
    margin-left: 3px;
}

.rtl-video-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.5rem 0.25rem;
    font-size: 0.875rem;
    color: var(--rtl-text);
}

.rtl-video-time {
    flex: 0 0 auto;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--rtl-line);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--rtl-muted);
}

/* Why it matters: a section title, then three reasons side by side, divided by fine
   borders, each with a small symbol, a label in capitals, a title and a line of text. */
.rtl-reasons {
    padding: 3.5rem 0 3rem;
    background: var(--rtl-panel);
    border-bottom: 1px solid var(--rtl-line);
}

.rtl-eyebrow {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rtl-muted);
}

.rtl-section-title {
    font-family: var(--rtl-font-display);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 600;
    margin: 0.4rem 0 2rem;
}

.rtl-reasons-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rtl-reasons-list li {
    padding: 0.25rem 2rem 0.5rem 0;
}

.rtl-reasons-list li + li {
    padding-left: 2rem;
    border-left: 1px solid var(--rtl-line);
}

.rtl-reasons-list svg {
    width: 22px;
    height: 22px;
    margin-bottom: 0.85rem;
    color: var(--rtl-link);
}

.rtl-reasons-list h3 {
    font-size: 1.1rem;
    margin: 0.35rem 0 0.5rem;
}

.rtl-reasons-list p {
    margin: 0;
    color: var(--rtl-muted);
    line-height: 1.55;
}

@media (max-width: 991.98px) {
    .rtl-reasons-list {
        grid-template-columns: 1fr;
    }

    .rtl-reasons-list li,
    .rtl-reasons-list li + li {
        padding: 1.25rem 0;
        border-left: 0;
        border-top: 1px solid var(--rtl-line);
    }
}

/* The other registrations: a quieter strip below, divided by fine borders. Each has a line
   on who it is for, shows Opening soon and is not clickable. */
.rtl-others {
    padding: 2.75rem 0 2rem;
    background: var(--rtl-page);
}

.rtl-others-title {
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.rtl-others-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--rtl-line);
}

.rtl-others-item {
    padding: 0.9rem 1rem 0.9rem 0;
    cursor: default;
}

.rtl-others-item + .rtl-others-item {
    padding-left: 1rem;
    border-left: 1px solid var(--rtl-line);
}

.rtl-others-name {
    display: block;
    color: var(--rtl-text);
    font-weight: 500;
}

.rtl-others-text {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--rtl-muted);
}

.rtl-others-soon {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rtl-muted);
}

@media (max-width: 991.98px) {
    .rtl-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    .rtl-others-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rtl-others-item,
    .rtl-others-item + .rtl-others-item {
        padding: 0.8rem 0;
        border-left: 0;
        border-bottom: 1px solid var(--rtl-line);
    }
}

@media (max-width: 575.98px) {
    .rtl-hero {
        padding: 2rem 0 2.5rem;
    }

    .rtl-hero-actions {
        grid-template-columns: 1fr;
    }

    .rtl-others-list {
        grid-template-columns: 1fr;
    }
}

/* Questionnaires: the active version as a panel with the band scale, the rules as tiles and
   the four answers as chips. */
.rtl-qv {
    padding: 1.25rem;
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius);
    background: var(--rtl-panel);
}

.rtl-qv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rtl-line);
}

.rtl-qv-count {
    font-size: 0.875rem;
    color: var(--rtl-muted);
}

.rtl-qv-label {
    margin: 1.25rem 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rtl-muted);
}

.rtl-qv-scale {
    display: flex;
    gap: 2px;
    height: 14px;
}

.rtl-qv-band:first-child { border-radius: 4px 0 0 4px; }
.rtl-qv-band:last-child  { border-radius: 0 4px 4px 0; }

.rtl-qv-band.is-red,    .rtl-qv-swatch.is-red    { background: var(--rtl-red); }
.rtl-qv-band.is-orange, .rtl-qv-swatch.is-orange { background: var(--rtl-orange); }
.rtl-qv-band.is-green,  .rtl-qv-swatch.is-green  { background: var(--rtl-green); }
.rtl-qv-band.is-gold,   .rtl-qv-swatch.is-gold   { background: var(--rtl-gold); }

.rtl-qv-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin: 0.6rem 0 0;
    padding: 0;
    font-size: 0.875rem;
    color: var(--rtl-muted);
}

.rtl-qv-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rtl-qv-legend strong {
    font-weight: 600;
    color: var(--rtl-heading);
}

.rtl-qv-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.rtl-qv .rtl-tile {
    background: var(--rtl-panel-raised);
}

.rtl-qv-answers {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.rtl-qv-answers li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius);
}

.rtl-qv-answers strong {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--rtl-heading);
}

.rtl-qv-answers li > span:last-child > span {
    font-size: 0.8rem;
    color: var(--rtl-muted);
}

.rtl-qv-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rtl-accent-soft);
    color: var(--rtl-link);
    font-weight: 600;
}

/* Security and Trust: a short lead, the protections as cards with an icon each, then the
   OWASP Top 10 as a two column list. */
.rtl-trust {
    padding-bottom: 2.5rem;
}

.rtl-trust-lead {
    max-width: 46rem;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--rtl-muted);
}

.rtl-trust-heading {
    font-family: var(--rtl-font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 600;
    margin: 2.25rem 0 1rem;
}

.rtl-trust-intro {
    max-width: 46rem;
    color: var(--rtl-muted);
    margin-bottom: 1.25rem;
}

.rtl-trust-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

.rtl-trust-grid li {
    padding: 1.1rem 1.1rem 1rem;
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius);
    background: var(--rtl-panel);
}

.rtl-trust-grid h3,
.rtl-trust-list h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.75rem 0 0.35rem;
}

.rtl-trust-grid p,
.rtl-trust-list p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--rtl-muted);
}

.rtl-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--rtl-accent-soft);
    color: var(--rtl-link);
}

.rtl-trust-icon svg {
    width: 22px;
    height: 22px;
}

.rtl-trust-icon.is-small {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.rtl-trust-icon.is-small svg {
    width: 18px;
    height: 18px;
}

.rtl-trust-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
    border-top: 1px solid var(--rtl-line);
}

.rtl-trust-list li {
    display: flex;
    gap: 0.9rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rtl-line);
}

.rtl-trust-list h3 {
    margin-top: 0.1rem;
}

.rtl-trust-foot {
    margin: 1.75rem 0 0;
    font-size: 0.85rem;
    color: var(--rtl-muted);
}

@media (max-width: 767.98px) {
    .rtl-trust-list {
        grid-template-columns: 1fr;
    }
}

/* Long reading pages, such as How It Works. */
.rtl-prose {
    max-width: 760px;
}

.rtl-prose h2 {
    font-size: 1.3rem;
    margin: 2rem 0 0.75rem;
}

.rtl-prose h3 {
    font-family: var(--rtl-font);
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 0.35rem;
}

.rtl-prose p {
    color: var(--rtl-text);
}


/* ===================================================================
   The console home: every topic as a button, in alphabetical order.
   =================================================================== */
.rtl-topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.rtl-topic {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 0.9rem 1rem;
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius);
    background: var(--rtl-panel);
    color: var(--rtl-heading);
    font-family: var(--rtl-font);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
}

.rtl-topic:hover,
.rtl-topic:focus-visible {
    background: var(--rtl-accent-soft);
    border-color: var(--rtl-accent);
    color: var(--rtl-heading);
    text-decoration: none;
}

/* The graphs under the topics: a period choice, five numbers, then the graphs in panels. */
.rtl-overview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.rtl-overview-period {
    display: flex;
    gap: 0.5rem;
}

.rtl-overview-period .form-select {
    width: auto;
}

.rtl-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.rtl-tile {
    display: flex;
    flex-direction: column;
    padding: 0.8rem 1rem;
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius);
    background: var(--rtl-panel);
}

.rtl-tile-value {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--rtl-heading);
}

.rtl-tile-label {
    font-size: 0.85rem;
    color: var(--rtl-muted);
}

.rtl-charts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.75rem;
}

.rtl-chart {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius);
    background: var(--rtl-panel);
}

.rtl-chart-wide {
    grid-column: 1 / -1;
}

.rtl-chart-title {
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: var(--rtl-heading);
}

.rtl-chart-empty {
    margin: 0;
    font-size: 0.9rem;
    color: var(--rtl-muted);
}

/* Each colour class sets the one colour its marks use. */
.rtl-c1       { --rtl-c: var(--rtl-chart-1); }
.rtl-c2       { --rtl-c: var(--rtl-chart-2); }
.rtl-c3       { --rtl-c: var(--rtl-chart-3); }
.rtl-c-none   { --rtl-c: var(--rtl-chart-none); }
.rtl-c-red    { --rtl-c: var(--rtl-red); }
.rtl-c-orange { --rtl-c: var(--rtl-orange); }
.rtl-c-green  { --rtl-c: var(--rtl-green); }
.rtl-c-gold   { --rtl-c: var(--rtl-gold); }

.rtl-donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.rtl-donut {
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
}

.rtl-donut circle {
    fill: none;
    stroke-width: 18;
}

.rtl-donut-track {
    stroke: var(--rtl-panel-raised);
}

.rtl-donut-slice {
    stroke: var(--rtl-c);
}

.rtl-donut-slice:hover {
    stroke-width: 22;
}

.rtl-donut-total {
    text-anchor: middle;
    font-size: 22px;
    font-weight: 500;
    fill: var(--rtl-heading);
}

.rtl-donut-label {
    text-anchor: middle;
    font-size: 11px;
    fill: var(--rtl-muted);
}

.rtl-legend {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.rtl-legend li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

.rtl-legend-swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--rtl-c);
}

.rtl-legend-label {
    flex: 1 1 auto;
    color: var(--rtl-text);
}

.rtl-legend-value {
    font-variant-numeric: tabular-nums;
    color: var(--rtl-heading);
    white-space: nowrap;
}

.rtl-legend-value span {
    display: inline-block;
    min-width: 2.6em;
    text-align: right;
    color: var(--rtl-muted);
}

.rtl-legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin-bottom: 0.5rem;
}

.rtl-legend-row li {
    flex: 0 0 auto;
}

.rtl-bars {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.rtl-bars li {
    display: grid;
    grid-template-columns: minmax(0, 11rem) 1fr 2.5rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0;
}

.rtl-bars-label {
    color: var(--rtl-text);
}

.rtl-bars-track {
    height: 12px;
}

.rtl-bars-fill {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 0 4px 4px 0;
    background: var(--rtl-c, var(--rtl-chart-1));
}

.rtl-bars-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--rtl-heading);
}

.rtl-columns {
    display: flex;
    gap: 0.5rem;
}

.rtl-columns-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 160px;
    font-size: 0.75rem;
    color: var(--rtl-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rtl-columns-plot {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    border-top: 1px dashed var(--rtl-line);
}

.rtl-columns-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rtl-columns-col:hover .rtl-columns-stack {
    background: var(--rtl-hover);
}

.rtl-columns-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    height: 160px;
    border-bottom: 1px solid var(--rtl-line-strong);
}

.rtl-columns-part {
    display: block;
    width: 100%;
    background: var(--rtl-c);
}

.rtl-columns-stack .rtl-columns-part:last-child {
    border-radius: 4px 4px 0 0;
}

.rtl-columns-label {
    height: 1.2rem;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: var(--rtl-muted);
    white-space: nowrap;
    overflow: visible;
}

@media (max-width: 767.98px) {
    .rtl-charts {
        grid-template-columns: 1fr;
    }

    .rtl-overview-period .form-select {
        font-size: 16px;
    }

    .rtl-overview-period .btn {
        min-height: 38px;
    }

    .rtl-bars li {
        grid-template-columns: minmax(0, 8.5rem) 1fr 2rem;
    }
}


/* ===================================================================
   The PDF window: a PDF opens over the page with Download and Close.
   =================================================================== */
.doc-preview-body {
    padding: 0;
    min-height: 70vh;
    background: var(--rtl-panel-raised);
}

.doc-preview-pdf {
    display: block;
    width: 100%;
    height: 70vh;
    border: 0;
}

.doc-preview-fallback {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--rtl-muted);
}

@media (max-width: 575.98px) {
    .doc-preview-body,
    .doc-preview-pdf {
        min-height: calc(100vh - 130px);
        height: calc(100vh - 130px);
    }
}


/* ===================================================================
   Two factor set up: the QR code on white so every app can read it,
   and the key in groups of four.
   =================================================================== */
.rtl-qr {
    display: inline-block;
    padding: 8px;
    margin-bottom: 1rem;
    background: #FFFFFF;
    border: 1px solid var(--rtl-line-strong);
    border-radius: var(--rtl-radius-sm);
}

.rtl-qr img {
    display: block;
}

.rtl-key {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: var(--rtl-heading);
    overflow-wrap: anywhere;
}


/* ===================================================================
   A wide list on a phone: each row becomes a small stacked card. The
   name in bold, the line under it, then the other columns as short
   labelled lines. The whole card still opens the record.
   =================================================================== */
@media (max-width: 767.98px) {
    .table.rtl-cards thead {
        display: none;
    }

    .table.rtl-cards,
    .table.rtl-cards tbody,
    .table.rtl-cards tr,
    .table.rtl-cards td {
        display: block;
        width: 100%;
    }

    .table.rtl-cards tbody tr {
        padding: 0.75rem 0.9rem;
        border-top: 1px solid var(--rtl-line);
    }

    .table.rtl-cards tbody tr:first-child {
        border-top: 0;
    }

    .table.rtl-cards tbody td {
        border: 0;
        padding: 0.1rem 0;
    }

    .table.rtl-cards td.rtl-card-title {
        font-weight: 600;
        color: var(--rtl-heading);
        font-size: 1rem;
    }

    .table.rtl-cards td.rtl-card-sub {
        color: var(--rtl-muted);
        margin-bottom: 0.35rem;
    }

    .table.rtl-cards td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--rtl-muted);
    }

    .table.rtl-cards td.rtl-card-hide {
        display: none;
    }

    .table.rtl-cards .rtl-card-only {
        display: inline;
    }

    .table.rtl-cards td.rtl-card-actions {
        margin-top: 0.35rem;
    }

    .table-wrapper:has(.rtl-cards) {
        overflow-x: visible;
    }
}


/* ===================================================================
   A block of plain facts: a small muted label with the value under it.
   Each fact takes the width its value needs and the row wraps, so a
   value only breaks when it is wider than the panel.
   =================================================================== */
/* Each fact is a soft tile in a grid that fills the row and wraps, two to a row on a phone
   (Leon, 1 November 2026: the same look as the tiles on the console). */
.rtl-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}

.rtl-facts > div {
    min-width: 0;
    padding: 0.65rem 0.85rem 0.7rem;
    border-radius: var(--rtl-radius);
    background: var(--rtl-panel-raised);
    color: var(--rtl-heading);
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.rtl-facts > div > span:first-child {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rtl-muted);
}

@media (max-width: 575.98px) {
    .rtl-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Text that only shows when a row is a card on a phone, such as a question's number. */
.rtl-card-only {
    display: none;
}


/* ===================================================================
   Forms: the info button to the right of a field and the small box
   its note opens in, a note in small grey text (the Monitor's
   settings), the help cloud's text, and the three step date of birth.
   =================================================================== */
.rtl-hint-col {
    padding-left: 0;
}

.rtl-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--rtl-radius-sm);
    background: none;
    color: var(--rtl-muted);
}

.rtl-hint:hover,
.rtl-hint[aria-describedby] {
    color: var(--rtl-link);
}

.rtl-hint:focus-visible {
    outline: 2px solid var(--rtl-focus);
    outline-offset: 1px;
}

.rtl-hint-box {
    --bs-popover-bg: var(--rtl-panel);
    --bs-popover-border-color: var(--rtl-line-strong);
    --bs-popover-body-color: var(--rtl-text);
    --bs-popover-arrow-border: var(--rtl-line-strong);
    --bs-popover-border-radius: var(--rtl-radius-sm);
    --bs-popover-inner-border-radius: calc(var(--rtl-radius-sm) - 1px);
    --bs-popover-max-width: 300px;
    --bs-popover-font-size: 0.85rem;
    --bs-popover-body-padding-x: 0.8rem;
    --bs-popover-body-padding-y: 0.6rem;
    --bs-popover-box-shadow: none;
    line-height: 1.45;
    font-family: var(--rtl-font);
}
.rtl-field-note {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--rtl-muted);
    padding-top: 0.45rem;
}

.rtl-info {
    border: 0;
    background: none;
    padding: 0 0.15rem;
    color: var(--rtl-link);
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
}

.rtl-info-text {
    margin-top: 0.35rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius-sm);
    background: var(--rtl-panel);
    color: var(--rtl-text);
}

.rtl-dob {
    display: grid;
    grid-template-columns: 1fr 1.4fr 0.9fr;
    gap: 0.5rem;
}

/* On a phone the note goes under its field, a few pixels below the box. */
@media (max-width: 575.98px) {
    .rtl-field-note {
        padding-top: 0;
        margin-top: 0.3rem;
    }
}


/* ===================================================================
   Rating the leader (Brief 7.4): a thin progress bar, questions under
   their subscale headings, the help cloud, and four large answer
   buttons. The chosen answer uses the accent colour only, never red,
   orange or green, so nothing hints at scoring.
   =================================================================== */
.rtl-progress {
    height: 4px;
    background: var(--rtl-line);
    border-radius: 2px;
    overflow: hidden;
}

.rtl-progress-bar {
    height: 100%;
    background: var(--rtl-accent);
    transition: width 0.3s ease;
}

.rtl-subscale {
    font-family: var(--rtl-font);
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--rtl-line);
}

.rtl-question {
    margin-bottom: 1.25rem;
    max-width: 56rem;
}

.rtl-question-text {
    float: none;
    width: auto;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--rtl-heading);
    margin-bottom: 0.6rem;
}

.rtl-help {
    color: var(--rtl-muted);
    padding: 0 0 0 0.2rem;
}

.rtl-help:hover, .rtl-help[aria-expanded="true"] {
    color: var(--rtl-link);
}

.rtl-answers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.rtl-answer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 3.4rem;
    padding: 0.5rem 0.4rem;
    text-align: center;
    border: 1px solid var(--rtl-line-strong);
    border-radius: var(--rtl-radius-sm);
    background: var(--rtl-panel);
    color: var(--rtl-text);
    font-size: 0.85rem;
    line-height: 1.25;
    cursor: pointer;
    user-select: none;
}

.rtl-answer span {
    font-size: 0.75rem;
    color: var(--rtl-muted);
}

.rtl-answer:hover {
    background: var(--rtl-hover);
}

.btn-check:checked + .rtl-answer {
    border-color: var(--rtl-accent);
    background: var(--rtl-selected);
    color: var(--rtl-heading);
}

.btn-check:focus-visible + .rtl-answer {
    outline: 2px solid var(--rtl-focus);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .rtl-answers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rtl-answer {
        min-height: 3.6rem;
        font-size: 0.95rem;
    }
}

/* On a phone the help cloud gets a thumb sized tap area while the icon stays small, and
   Next or Submit is a full width button with Go Back under it. */
@media (max-width: 767.98px) {
    .rtl-help {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: -14px -10px -14px -6px;
    }

    .rtl-rate-actions {
        flex-direction: column-reverse;
    }

    .rtl-rate-actions .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* Overview on a phone: the two start buttons full width, one under the other, as on the
   homepage. */
@media (max-width: 767.98px) {
    .rtl-overview-actions {
        flex-direction: column;
    }

    .rtl-overview-actions .btn {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* A status as a small tag that never breaks across lines: its words, with a dot before
   an open one. Open requests use the accent tint; the rest stay grey. Never red, orange or
   green: those are kept for results. */
.rtl-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.12rem 0.5rem;
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius-sm);
    background: var(--rtl-panel-raised);
    color: var(--rtl-text);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.rtl-status.is-open {
    background: var(--rtl-selected);
    border-color: transparent;
    color: var(--rtl-heading);
}

.rtl-status.is-open::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rtl-accent);
}


/* ===================================================================
   Simulation mode (testing only). The orange bar across the top of
   every page while staff act as a test person, and the Simulation
   page. Orange is the alert colour, always with the word Simulation.
   =================================================================== */
.rtl-sim-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    padding: 0.55rem 1rem;
    background: var(--rtl-orange);
    color: var(--rtl-on-orange);
    font-size: 0.875rem;
    line-height: 1.35;
}

.rtl-sim-bar svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.rtl-sim-bar-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-left: auto;
}

.rtl-sim-bar a,
.rtl-sim-bar button {
    color: var(--rtl-on-orange);
    font-weight: 600;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
}

.rtl-sim-bar form {
    margin: 0;
}

/* On a desktop the bar is fixed above everything, one line high, and the side menu and the
   page start under it. */
@media (min-width: 992px) {
    .rtl-sim-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1060;
        height: 42px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .rtl-sim-bar > span:first-of-type {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body:has(.rtl-sim-bar) {
        padding-top: 42px;
    }

    body:has(.rtl-sim-bar) .rtl-sidebar {
        top: 42px;
    }

    body:has(.rtl-sim-bar) .rtl-topbar {
        top: 42px;
    }
}

.rtl-sim-note {
    padding: 0.85rem 1rem;
    border: 1px solid var(--rtl-orange);
    border-left-width: 4px;
    border-radius: var(--rtl-radius-sm);
    background: var(--rtl-orange-tint);
    color: var(--rtl-text);
    font-size: 0.9rem;
}

.rtl-sim-rating {
    padding: 1rem 1.1rem;
}

.rtl-sim-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.rtl-sim-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.1rem;
    font-size: 0.875rem;
    color: var(--rtl-muted);
}

.rtl-sim-move {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.rtl-sim-move form {
    margin: 0;
}

.rtl-sim-jump {
    display: flex;
    gap: 0.4rem;
}

.rtl-sim-jump input {
    width: 5.5rem;
}

@media (max-width: 767.98px) {
    .rtl-sim-move,
    .rtl-sim-move form,
    .rtl-sim-jump {
        width: 100%;
    }

    .rtl-sim-move .btn {
        min-height: 40px;
    }

    .rtl-sim-move > form:first-child .btn {
        width: 100%;
    }

    .rtl-sim-jump input {
        flex: 1 1 auto;
        width: auto;
    }
}

/* Save and reset the test data, the guide to how a rating runs, and each rating's next step. */
.rtl-sim-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius-sm);
    background: var(--rtl-panel);
    font-size: 0.9rem;
}

.rtl-sim-data-text span {
    display: block;
}

.rtl-sim-guide {
    border: 1px solid var(--rtl-line);
    border-radius: var(--rtl-radius-sm);
    background: var(--rtl-panel);
    padding: 0.85rem 1rem;
}

.rtl-sim-guide summary {
    font-weight: 600;
    color: var(--rtl-heading);
    cursor: pointer;
}

.rtl-sim-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
    margin-top: 0.85rem;
    font-size: 0.875rem;
}

.rtl-sim-guide h6 {
    font-size: 0.95rem;
    margin: 0 0 0.15rem;
}

.rtl-sim-guide ul {
    margin: 0;
    padding-left: 1.1rem;
}

.rtl-sim-guide li {
    margin-bottom: 0.35rem;
}

.rtl-sim-next {
    margin: 0.5rem 0 0;
    max-width: 52rem;
    font-size: 0.875rem;
    color: var(--rtl-text);
}

@media (max-width: 991.98px) {
    .rtl-sim-guide-grid {
        grid-template-columns: 1fr;
    }
}

/* The saved message, near the top of the page. While the Simulation bar shows on a phone or
   tablet, the bar is not fixed and can be several lines high, so the message sits at the foot
   of the screen instead, above the seal, and never covers the bar's links (Snag 50). */
.rtl-toast-host {
    top: 80px;
    z-index: 1100;
    max-width: calc(100vw - 2rem);
}

@media (max-width: 991.98px) {
    body:has(.rtl-sim-bar) .rtl-toast-host {
        top: auto;
        bottom: 72px;
    }
}


/* ===================================================================
   Buy my report (Task 1.21): the bands a result can be, in words only,
   and the checkout, in a window on the Overview or on its own page.
   =================================================================== */
.rtl-bands {
    padding-left: 1.1rem;
    max-width: 52rem;
}

.rtl-bands li {
    margin-bottom: 0.4rem;
}

.rtl-checkout-lead {
    font-family: var(--rtl-font-slab);
    font-size: 1.15rem;
    line-height: 1.45;
    color: var(--rtl-heading);
    margin-bottom: 1.1rem;
}

.rtl-checkout-page .rtl-checkout-step + .rtl-checkout-step {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rtl-line);
}

.rtl-checkout .form-check-label {
    font-size: 0.9rem;
    line-height: 1.45;
}

.rtl-test-note {
    display: inline-block;
    margin: 0.5rem 0 0.9rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--rtl-orange);
    border-radius: var(--rtl-radius-sm);
    background: var(--rtl-orange-tint);
    color: var(--rtl-text);
    font-size: 0.85rem;
}

/* ===================================================================
   The paid result (Task 1.22): a large circle in the exact signal
   colour, the same in Light and Dark, with the word and an icon beside
   it. Gold-lined Green is the green circle with a gold ring.
   =================================================================== */
.rtl-result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
}

.rtl-result-circle {
    flex: 0 0 auto;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: var(--rtl-line);
}

.rtl-result-circle.is-red    { background: var(--rtl-red); }
.rtl-result-circle.is-orange { background: var(--rtl-orange); }
.rtl-result-circle.is-green  { background: var(--rtl-green); }
.rtl-result-circle.is-gold {
    background: var(--rtl-green);
    border: 8px solid var(--rtl-gold);
    outline: 2px solid var(--rtl-green);
    outline-offset: -12px;
}

.rtl-result-word {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--rtl-font-slab);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--rtl-heading);
}

.rtl-result-word svg {
    width: 26px;
    height: 26px;
}

.rtl-result-word.is-red svg    { color: var(--rtl-red-ink); }
.rtl-result-word.is-orange svg { color: var(--rtl-orange-ink); }
.rtl-result-word.is-green svg,
.rtl-result-word.is-gold svg   { color: var(--rtl-green-ink); }

.rtl-result-index {
    margin-top: 0.35rem;
}

.rtl-result-index-label {
    display: block;
    font-size: 0.8rem;
    color: var(--rtl-muted);
}

.rtl-result-index-value {
    font-family: var(--rtl-font-slab);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--rtl-heading);
    font-variant-numeric: tabular-nums;
}

.rtl-result-ratedby {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: var(--rtl-text);
}

.rtl-result-message {
    margin: 1.25rem 0 0.9rem;
    max-width: 52rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--rtl-text);
}

.rtl-result-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.rtl-soon-note {
    font-size: 0.85rem;
    color: var(--rtl-muted);
}

.rtl-result-note {
    margin: 0.9rem 0 0;
    max-width: 52rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--rtl-line-strong);
    background: var(--rtl-panel-raised);
    font-size: 0.9rem;
}

@media (max-width: 767.98px) {
    .rtl-result-circle {
        width: 88px;
        height: 88px;
    }

    .rtl-result-actions .btn {
        flex: 1 1 100%;
        min-height: 44px;
    }
}

/* ===================================================================
   Leadership Scores (Task 1.23): the radar beside the subscale table,
   the history graph, and the small star in the band's colour with the
   band word, never colour alone.
   =================================================================== */
.rtl-star {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.rtl-star svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    fill: var(--rtl-line-strong);
}

.rtl-star.is-red svg    { fill: var(--rtl-red); }
.rtl-star.is-orange svg { fill: var(--rtl-orange); }
.rtl-star.is-green svg  { fill: var(--rtl-green); }
.rtl-star.is-gold svg   { fill: var(--rtl-green); stroke: var(--rtl-gold); stroke-width: 2.2px; }

.rtl-scores-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.rtl-scores-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1rem;
    margin-top: 0.3rem;
    font-size: 1.05rem;
    font-weight: 500;
}

.rtl-scores-index {
    font-family: var(--rtl-font-slab);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--rtl-heading);
}

.rtl-scores-others {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    font-size: 0.875rem;
}

.rtl-scores-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 1.25rem;
    align-items: start;
}

.rtl-chart-box svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.rtl-chart-point:hover circle:last-child {
    r: 7;
}

@media (max-width: 1199.98px) {
    .rtl-scores-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   Detailed Assessment (Task 1.24): the three development areas side by
   side, then every question under its subscale with a short bar.
   =================================================================== */
.rtl-dev-areas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.rtl-dev-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.rtl-dev-score {
    font-family: var(--rtl-font-slab);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rtl-heading);
    white-space: nowrap;
}

.rtl-dev-questions {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0.6rem 0 0;
    border-top: 1px solid var(--rtl-line);
    font-size: 0.85rem;
}

.rtl-dev-questions li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.rtl-dev-q-score {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--rtl-heading);
    font-weight: 500;
}

.rtl-q-subscale {
    font-size: 1rem;
    margin: 0 0 0.6rem;
}

.rtl-q-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rtl-q-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px 64px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--rtl-line);
    font-size: 0.9rem;
}

.rtl-q-list li:first-child {
    border-top: 0;
}

.rtl-q-number {
    color: var(--rtl-muted);
    font-variant-numeric: tabular-nums;
}

.rtl-q-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--rtl-panel-raised);
    border: 1px solid var(--rtl-line);
    overflow: hidden;
}

.rtl-q-bar span {
    display: block;
    height: 100%;
    background: var(--rtl-accent);
}

.rtl-q-score {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--rtl-heading);
}

@media (max-width: 991.98px) {
    .rtl-dev-areas {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .rtl-q-list li {
        grid-template-columns: minmax(0, 1fr) 56px;
    }

    .rtl-q-bar {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* My Ratings History (Task 1.25): a row not yet bought opens Buy my report on a click. */
.table tbody tr.rtl-row-opens {
    cursor: pointer;
}

.table tbody tr.rtl-row-opens:hover > td {
    background: var(--rtl-hover);
    color: var(--rtl-heading);
}

/* Export as PDF (Task 1.26): at the top right of the result, beside the links elsewhere. */
.rtl-result-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.rtl-scores-others .rtl-pdf-button {
    margin-left: 0.25rem;
}