/* ─────────────────────────────────────────────────────────────────────────────
   RAG report: the online story.

   Customer-facing, so it keeps one light look whatever the CRM's theme. Frosted
   glass over soft, blurred One IT petals - the brand's own red, amber and green
   are the RAG colours, so the backdrop and the grades share one palette.
   Everything is scoped under .rag-story.
   ───────────────────────────────────────────────────────────────────────────── */

.rag-story {
    --rs-mist: #edf0f7;
    --rs-ink: #1c2040;
    --rs-ink-soft: #4a5072;
    --rs-ink-faint: #7a809c;
    --rs-plum: #6b4c9a;
    --rs-green: #3e9e4f;
    --rs-amber: #efa70b;
    --rs-red: #df3b3b;
    --rs-sky: #4b9fcb;
    --rs-grey: #b3b8c8;

    --rs-green-wash: rgba(62, 158, 79, 0.14);

    /* Dark enough to read as text on the wash above. */
    --rs-green-ink: #2f7a3d;
    --rs-amber-wash: rgba(239, 167, 11, 0.16);
    --rs-red-wash: rgba(223, 59, 59, 0.13);
    --rs-grey-wash: rgba(122, 128, 156, 0.12);

    --rs-glass: rgba(255, 255, 255, 0.58);
    --rs-glass-strong: rgba(255, 255, 255, 0.78);
    --rs-glass-edge: rgba(255, 255, 255, 0.85);
    --rs-glass-line: rgba(28, 32, 64, 0.08);
    --rs-shadow: 0 1px 1px rgba(28, 32, 64, 0.04), 0 18px 48px -18px rgba(44, 36, 92, 0.22);

    --rs-radius-sheet: 1.75rem;
    --rs-radius-card: 1.15rem;
    --rs-gutter: clamp(1rem, 3vw, 3.5rem);

    position: relative;
    isolation: isolate;
    /* Clip, not hidden: a hidden-overflow box can still be scrolled by "jump to section",
       and then can't be scrolled back by hand - leaving the top of the report cut off. */
    overflow: hidden;
    overflow: clip;
    min-height: 100vh;
    width: 100%;
    background: var(--rs-mist);
    color: var(--rs-ink);
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    color-scheme: light;
    font-variant-numeric: tabular-nums;
}

.rag-story *,
.rag-story *::before,
.rag-story *::after { box-sizing: border-box; }

/* The CRM's own heading colour follows its theme, which is near-white in the dark
   one - unreadable on this page's light glass. Every heading here takes the report's
   ink; the few that want something softer say so themselves, further down. */
.rag-story h1,
.rag-story h2,
.rag-story h3,
.rag-story h4,
.rag-story h5,
.rag-story h6 {
    color: var(--rs-ink);
    font-family: inherit;
}

.rag-story :focus-visible {
    outline: 3px solid var(--rs-plum);
    outline-offset: 3px;
}

/* ── The backdrop: the One IT petals, huge and out of focus ── */

.rs-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.rs-petal {
    position: absolute;
    border-radius: 60% 40% 55% 45% / 70% 30% 70% 30%;
    filter: blur(70px);
    opacity: 0.55;
}

.rs-petal-red    { top: -8rem;  right: -6rem; width: 34rem; height: 22rem; background: #f4736f; transform: rotate(-24deg); }
.rs-petal-amber  { top: 18rem;  left: -10rem; width: 30rem; height: 18rem; background: #f9c74f; transform: rotate(38deg); opacity: 0.45; }
.rs-petal-purple { top: 42%;    right: -8rem; width: 36rem; height: 20rem; background: #9d82c8; transform: rotate(12deg); opacity: 0.4; }
.rs-petal-green  { top: 68%;    left: -8rem;  width: 28rem; height: 18rem; background: #9ed27d; transform: rotate(-30deg); opacity: 0.45; }
.rs-petal-blue   { bottom: -6rem; right: 20%; width: 30rem; height: 16rem; background: #7cc0e0; transform: rotate(20deg); opacity: 0.4; }

/* ── Glass ── */

.rs-glass {
    background: var(--rs-glass);
    border: 1px solid var(--rs-glass-edge);
    box-shadow: var(--rs-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .rs-glass { background: var(--rs-glass-strong); }
}

.rs-wrap {
    width: 100%;
    padding-inline: var(--rs-gutter);
}

/* ── Hero ── */

.rs-hero {
    padding-block: clamp(1.5rem, 3vw, 2.5rem) 1rem;
}

.rs-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.rs-logo {
    display: block;
    height: clamp(4.5rem, 7.5vw, 6.5rem);
    width: auto;
    max-width: 100%;
}

.rs-hero-title {
    margin-top: clamp(2rem, 5vw, 3.5rem);
}

.rs-hero h1 {
    /* Optical alignment: at this size the first letter's side bearing makes the name look
       indented under the report title, so it is pulled back in proportion to its size. */
    margin: 0 0 0 -0.055em;
    color: var(--rs-ink);
    font-family: inherit;
    font-size: clamp(2.25rem, 5.5vw, 4.25rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.rs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--rs-ink-soft);
    font-size: 1rem;
}

.rs-report-title {
    margin: 0 0 0.35rem;
    color: var(--rs-plum);
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

/* Headline charts: the overall picture as a band across the top, then one matching card
   per graded area in a row beneath. */
.rs-charts {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-radius: var(--rs-radius-sheet);
}

.rs-chart-overall {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem);
}

.rs-chart-overall-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.rs-chart-overall-title {
    margin: 0;
    color: var(--rs-ink);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.rs-chart-overall-lead {
    margin: 0 0 0.6rem;
    color: var(--rs-ink-soft);
}

.rs-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 0.85rem;
    padding-top: clamp(1.25rem, 2.5vw, 2rem);
    border-top: 1px solid var(--rs-glass-line);
}

/* Every card the same shape: ring, title, count - centred. */
.rs-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    min-width: 0;
    padding: 1.1rem 1rem 1.15rem;
    border: 1px solid var(--rs-glass-line);
    border-radius: var(--rs-radius-card);
    background: rgba(255, 255, 255, 0.5);
    color: var(--rs-ink);
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.rs-chart:hover { background: rgba(255, 255, 255, 0.78); }

.rs-chart .rs-donut {
    --rs-donut-size: 6.5rem;
    --rs-donut-ring: 0.85rem;
}

.rs-chart .rs-donut-value { font-size: 1.35rem; }

.rs-chart-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

.rs-chart-figure {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--rs-ink-soft);
    font-size: 0.86rem;
    line-height: 1.3;
}

/* A ring, cut out of a conic gradient so the glass shows through its middle. */
.rs-donut {
    --rs-donut-size: 5.25rem;
    --rs-donut-ring: 0.8rem;
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--rs-donut-size);
    height: var(--rs-donut-size);
    animation: rs-donut-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.rs-donut-large {
    --rs-donut-size: clamp(10rem, 18vw, 13rem);
    --rs-donut-ring: clamp(1.3rem, 2.2vw, 1.75rem);
}

.rs-donut-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--rs-donut-ring)), #000 calc(100% - var(--rs-donut-ring) + 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--rs-donut-ring)), #000 calc(100% - var(--rs-donut-ring) + 1px));
}

.rs-donut-centre {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: calc(var(--rs-donut-size) - 2 * var(--rs-donut-ring) - 0.5rem);
    text-align: center;
}

.rs-donut-value {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.rs-donut-large .rs-donut-value { font-size: clamp(2rem, 3.6vw, 2.75rem); }

.rs-donut-label {
    margin-top: 0.3rem;
    color: var(--rs-ink-soft);
    font-size: 0.8rem;
    line-height: 1.2;
}

@keyframes rs-donut-in {
    from { opacity: 0; transform: scale(0.92) rotate(-12deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

.rs-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-legend li {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}

.rs-legend-count {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.rs-legend-label { color: var(--rs-ink-soft); }

/* ── Shared marks ── */

.rs-dot {
    display: inline-block;
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--rs-grey);
    transform: translateY(-0.05rem);
}

.rs-dot-green   { background: var(--rs-green); }
.rs-dot-amber   { background: var(--rs-amber); }
.rs-dot-red     { background: var(--rs-red); }
.rs-dot-unknown { background: var(--rs-sky); }
.rs-dot-general { background: var(--rs-plum); }

.rs-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.85rem 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--rs-grey-wash);
    color: var(--rs-ink);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.rs-status-green { background: var(--rs-green-wash); }
.rs-status-amber { background: var(--rs-amber-wash); }
.rs-status-red   { background: var(--rs-red-wash); }

.rs-bar {
    display: flex;
    gap: 3px;
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
}

.rs-bar span {
    min-width: 0;
    border-radius: 999px;
}

.rs-bar-green   { background: var(--rs-green); }
.rs-bar-amber   { background: var(--rs-amber); }
.rs-bar-red     { background: var(--rs-red); }
.rs-bar-unknown { background: var(--rs-grey); }

/* A grade as a coloured square: a larger cousin of the estate's squares, so an area graded
   as a whole speaks the same visual language as the picture of everything. */
.rs-mark {
    display: inline-block;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 5px;
    background: var(--rs-grey);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rs-mark-green   { background: var(--rs-green); }
.rs-mark-amber   { background: var(--rs-amber); }
.rs-mark-red     { background: var(--rs-red); }
.rs-mark-unknown { background: var(--rs-sky); }

.rs-mark-large {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 26px -10px rgba(28, 32, 64, 0.35);
}

.rs-mark-large.rs-mark-green   { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 28px -10px rgba(62, 158, 79, 0.65); }
.rs-mark-large.rs-mark-amber   { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 28px -10px rgba(239, 167, 11, 0.7); }
.rs-mark-large.rs-mark-red     { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 28px -10px rgba(223, 59, 59, 0.65); }

/* ── Areas at a glance ── */

.rs-areas {
    padding-block: clamp(1.5rem, 3vw, 2.5rem) 0.5rem;
}

.rs-section-heading {
    margin: 0 0 1rem;
    color: var(--rs-ink);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.rs-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

/* Every assessment card carries the same three things - mark, title, grade - so they sit level. */
.rs-area {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: 1.1rem 1.25rem;
    border-radius: var(--rs-radius-card);
    color: var(--rs-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rs-area .rs-mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9px;
}

.rs-area-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.rs-area-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
}

.rs-area-status {
    color: var(--rs-ink-soft);
    font-size: 0.9rem;
}

/* ── Contents and chapters ── */

.rag-story {
    --rs-toc-width: 15.5rem;
    --rs-body-gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.rs-body {
    display: grid;
    grid-template-columns: var(--rs-toc-width) minmax(0, 1fr);
    gap: var(--rs-body-gap);
    align-items: start;
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 1099.98px) {
    .rs-body { grid-template-columns: minmax(0, 1fr); }
    .rs-toc { display: none; }
}

.rs-toc {
    position: sticky;
    top: 1.25rem;
    padding: 1rem 0.6rem;
    border-radius: var(--rs-radius-card);
    /* A report with many sections has contents taller than the window; without this the
       end of the list sits below the fold with no way to reach it, because the rail
       itself is pinned and the page scroll moves the chapters instead. */
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.rs-toc {
    scrollbar-width: thin;
    scrollbar-color: rgba(31, 27, 46, 0.22) transparent;
}

.rs-toc::-webkit-scrollbar { width: 0.4rem; }
.rs-toc::-webkit-scrollbar-track { background: transparent; }
.rs-toc::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(31, 27, 46, 0.18);
}

.rs-toc-heading {
    margin: 0 0 0.4rem;
    padding-inline: 0.65rem;
    color: var(--rs-ink-faint);
    font-size: 0.85rem;
    font-weight: 500;
}

.rs-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-toc button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 0;
    border-radius: 0.6rem;
    background: none;
    color: var(--rs-ink-soft);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.rs-toc button:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--rs-ink);
}

.rs-toc-num {
    min-width: 1.4rem;
    color: var(--rs-plum);
    font-size: 0.95rem;
    font-weight: 500;
}

.rs-toc .rs-dot { margin-left: auto; }

/* A heading in the report: not a card of its own but a banner across the column,
   announcing the part that follows. The sections under it keep their cards and are
   set in from the margin, so the shape of the report is visible while scrolling. */
.rs-part {
    display: flex;
    flex-direction: column;
    margin-top: clamp(0.75rem, 1.5vw, 1.5rem);
    scroll-margin-top: 1.25rem;
}

.rs-part-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    width: 100%;
    padding: 0 0 0.7rem;
    border: 0;
    border-bottom: 2px solid var(--rs-plum);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rs-part-title {
    color: var(--rs-plum);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* How much is in the part - the only thing the heading says about its sections. */
.rs-part-count {
    color: var(--rs-ink-soft);
    font-size: 0.9rem;
}

.rs-part-chevron {
    margin-left: auto;
    color: var(--rs-plum);
    font-size: 1rem;
    transition: transform 160ms ease;
}

.rs-part.is-folded .rs-part-chevron { transform: rotate(180deg); }

.rs-part-head:hover .rs-part-title { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .rs-part-chevron { transition: none; }
}

.rs-part-num {
    color: var(--rs-plum);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.rs-part .rs-body-text {
    margin-top: 0.9rem;
}

/* A section inside a part carries no mark of its own: its number (3.2) and the part
   it folds into say where it belongs, and every card keeps the same edges as the hero,
   the contents and the footer. */

/* Contents: the same structure, read down the list. */
.rs-toc-nested button {
    padding-left: 1.6rem;
    font-size: 0.86rem;
}

.rs-toc-nested .rs-toc-num {
    min-width: 1.9rem;
    color: var(--rs-ink-faint);
    font-size: 0.82rem;
}

.rs-chapters {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.rs-chapter {
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-radius: var(--rs-radius-sheet);
    scroll-margin-top: 1.25rem;
}

.rs-chapter-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-bottom: 1.1rem;
}

/* The section number at the heading's own size, lighter, so "3  Staff laptops" reads as one title. */
.rs-num {
    min-width: 1.4ch;
    color: var(--rs-plum);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.rs-chapter-head h2 {
    flex: 1 1 auto;
    margin: 0;
    color: var(--rs-ink);
    font-family: inherit;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.rs-text {
    max-width: 72ch;
    margin: 0 0 0.9rem;
    color: var(--rs-ink-soft);
    white-space: pre-line;
}

/* A section's body text is its main message, so it reads stronger than the supporting paragraphs. */
.rs-text.rs-body-text {
    max-width: 78ch;
    margin-bottom: 1.1rem;
    color: var(--rs-ink);
    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.6;
}

.rs-empty {
    margin: 0.25rem 0 0;
    color: var(--rs-ink-faint);
}

/* Key */
.rs-key {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
}

.rs-key-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--rs-radius-card);
    background: var(--rs-grey-wash);
    font-weight: 500;
}

.rs-key-item.rs-tone-green { background: var(--rs-green-wash); }
.rs-key-item.rs-tone-amber { background: var(--rs-amber-wash); }
.rs-key-item.rs-tone-red   { background: var(--rs-red-wash); }

/* Figures above a table */
.rs-figures {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.rs-figure {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 8.5rem;
    padding: 0.7rem 1rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--rs-glass-line);
}

.rs-figure-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.rs-figure-label {
    color: var(--rs-ink-soft);
    font-size: 0.85rem;
}

.rs-figure-green { box-shadow: inset 4px 0 0 var(--rs-green); }
.rs-figure-amber { box-shadow: inset 4px 0 0 var(--rs-amber); }
.rs-figure-red   { box-shadow: inset 4px 0 0 var(--rs-red); }
.rs-figure-unknown { box-shadow: inset 4px 0 0 var(--rs-grey); }

.rs-figures-large .rs-figure {
    flex: 1 1 11rem;
    padding: 1.1rem 1.3rem;
}

.rs-figures-large .rs-figure-value { font-size: 2.6rem; }

.rs-chapter > .rs-bar { margin-bottom: 1.1rem; }

/* Tables */
.rs-table-wrap {
    overflow-x: auto;
    border-radius: var(--rs-radius-card);
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--rs-glass-line);
}

.rs-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.92rem;
}

.rs-table th {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--rs-glass-line);
    color: var(--rs-ink-faint);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

.rs-table td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(28, 32, 64, 0.05);
    color: var(--rs-ink);
    vertical-align: top;
}

.rs-table tbody tr:last-child td { border-bottom: 0; }

/* Each row's grade as a dot in its own narrow column - the same dot used everywhere else in the report. */
.rs-table .rs-grade-col {
    width: 2.4rem;
    padding-right: 0;
    text-align: center;
}

.rs-table td.rs-grade-col::before {
    content: "";
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--rs-grey);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8);
    vertical-align: -0.05rem;
}

.rs-table td.rs-row-green::before { background: var(--rs-green); }
.rs-table td.rs-row-amber::before { background: var(--rs-amber); }
.rs-table td.rs-row-red::before   { background: var(--rs-red); }

.rs-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.8rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--rs-glass-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--rs-ink);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.rs-more:hover { background: #fff; }

/* Figures that filter their table. */
button.rs-figure {
    color: var(--rs-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.rs-figure:hover:not(:disabled) { background: rgba(255, 255, 255, 0.88); }

button.rs-figure:disabled {
    cursor: default;
    opacity: 0.5;
}

.rs-figure.is-active {
    background: #fff;
    border-color: rgba(107, 76, 154, 0.5);
}

.rs-figures.has-filter .rs-figure:not(.is-active):not(:disabled) { opacity: 0.62; }
.rs-figures.has-filter .rs-figure:not(.is-active):hover { opacity: 1; }

.rs-filter-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    margin: 0 0 0.75rem;
    color: var(--rs-ink-soft);
    font-size: 0.92rem;
}

.rs-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--rs-plum);
    font: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

/* Column headings that sort. */
.rs-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.rs-sort:hover,
.rs-sort.is-sorted { color: var(--rs-ink); }

.rs-sort-icon {
    color: var(--rs-plum);
    font-size: 0.7rem;
}

.rs-sort-idle {
    color: var(--rs-ink-faint);
    opacity: 0.7;
}

@media print {
    .rs-sort-icon, .rs-filter-note { display: none !important; }
    button.rs-figure { opacity: 1 !important; }
}

/* Graded check */
.rs-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2rem;
    margin-bottom: 1.2rem;
    padding: 1.1rem 1.4rem;
    border-radius: var(--rs-radius-card);
    background: var(--rs-grey-wash);
}

.rs-check.rs-tone-green { background: var(--rs-green-wash); }
.rs-check.rs-tone-amber { background: var(--rs-amber-wash); }
.rs-check.rs-tone-red   { background: var(--rs-red-wash); }

.rs-check-verdict {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rs-check-verdict strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
}


.rs-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.25rem;
    margin: 0;
}

.rs-values > div { min-width: 0; }

.rs-values dt {
    color: var(--rs-ink-soft);
    font-size: 0.85rem;
    font-weight: 400;
}

.rs-values dd {
    margin: 0;
    font-weight: 500;
}

.rs-fields {
    margin-top: 1.2rem;
    padding: 1rem 1.25rem;
    border-radius: var(--rs-radius-card);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--rs-glass-line);
}

.rs-callout {
    display: flex;
    gap: 1rem;
    max-width: 80ch;
    margin-top: 1.2rem;
    padding: 1.1rem 1.3rem;
    border-radius: var(--rs-radius-card);
    background: rgba(107, 76, 154, 0.08);
    border: 1px solid rgba(107, 76, 154, 0.16);
}

.rs-callout > i {
    color: var(--rs-plum);
    font-size: 1.4rem;
    line-height: 1.3;
}

.rs-callout h3 {
    margin: 0 0 0.2rem;
    color: var(--rs-plum);
    font-size: 0.95rem;
    font-weight: 600;
}

/* What One IT advises, rather than what it found. */
.rs-callout-green {
    background: var(--rs-green-wash);
    border-color: rgba(62, 158, 79, 0.28);
}

.rs-callout-green > i,
.rs-callout-green h3 { color: var(--rs-green-ink); }

.rs-callout .rs-text {
    margin-bottom: 0;
    color: var(--rs-ink);
}

/* Cabinets */
.rs-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.rs-gallery figure {
    margin: 0;
    padding: 0.5rem;
    border-radius: var(--rs-radius-card);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--rs-glass-line);
}

.rs-gallery a { display: block; }

.rs-gallery img {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.75rem;
}

.rs-gallery figcaption {
    display: flex;
    flex-direction: column;
    padding: 0.55rem 0.4rem 0.2rem;
}

.rs-gallery figcaption strong { font-weight: 600; }
.rs-gallery figcaption span { color: var(--rs-ink-soft); font-size: 0.88rem; }

/* Recommendations: one column per year, across the width. */
.rs-years {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
}

.rs-year {
    padding: 1.1rem 1.2rem 1.25rem;
    border-radius: var(--rs-radius-card);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--rs-glass-line);
}

.rs-year h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.8rem;
    color: var(--rs-ink);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.rs-year h3 span {
    color: var(--rs-ink-faint);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0;
}

.rs-year ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-rec {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.8);
}

/* ── Footer ── */

.rs-footer {
    padding-block: 0 clamp(1.5rem, 3vw, 2.5rem);
}

/* Lines up under the chapters, not across the contents column beside them. */
@media (min-width: 1100px) {
    .rs-footer-inner { margin-left: calc(var(--rs-toc-width) + var(--rs-body-gap)); }

    /* The dashboard has no contents rail to clear, so its footer sits square. */
    .rs-dashboard .rs-footer-inner { margin-left: 0; }
}

.rs-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--rs-radius-card);
}

.rs-logo-small { height: clamp(2.5rem, 4vw, 3.25rem); }

.rs-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.75rem;
    color: var(--rs-ink-soft);
    font-size: 0.92rem;
}

.rs-contact a {
    color: var(--rs-ink);
    font-weight: 500;
    text-decoration: none;
}

.rs-contact a:hover { text-decoration: underline; }

.rs-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: var(--rs-ink);
    box-shadow: 0 10px 24px -12px rgba(28, 32, 64, 0.6);
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.rs-download:hover { background: #2c3160; color: #fff; }
.rs-download:disabled { opacity: 0.6; cursor: default; }

/* ── The shared page's loading and "not available" states ── */

.rs-state {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 2rem 1rem;
    background: #edf0f7;
    color: #1c2040;
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    color-scheme: light;
}

.rs-state-card {
    max-width: 30rem;
    padding: 2.25rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 18px 48px -18px rgba(44, 36, 92, 0.22);
    text-align: center;
}

.rs-state-card .rs-logo { margin: 0 auto 1.5rem; }

/* Colours set outright: the CRM's dark theme gives headings and links pale colours
   meant for a dark background, which vanish on this white card. */
.rs-state-card h1 {
    margin: 0 0 0.6rem;
    color: #1c2040;
    font-size: 1.4rem;
    font-weight: 600;
}

.rs-state-card p {
    margin: 0;
    color: #3a4062;
    line-height: 1.6;
}

.rs-state-card a,
.rs-state-card a:visited {
    color: #6b4c9a;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.rs-state-card a:hover { color: #52387a; }

/* ── The CRM's preview frame and the editor's share box ── */

.rs-preview-frame {
    overflow: hidden;
    overflow: clip;
    border: 1px solid var(--border-default);
    border-radius: 0.75rem;
}

/* ── Motion and print ── */

@media (prefers-reduced-motion: reduce) {
    .rs-donut { animation: none; }
    .rag-story * { scroll-behavior: auto !important; }
}

@media print {
    .rag-story { background: #fff; overflow: visible; }
    .rs-backdrop, .rs-toc, .rs-more, .rs-download { display: none !important; }
    .rs-glass {
        background: #fff !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-color: #dde1ea !important;
    }
    .rs-body { grid-template-columns: minmax(0, 1fr); }
    .rs-footer-inner { margin-left: 0 !important; }
    .rs-chapter { break-inside: avoid-page; }
    .rs-donut { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Trust dashboard: the same glass, one level up - a trust across its schools.
   Shares the hero, charts, contents rail, chapters and footer with the report;
   what follows is only what a trust view adds.
   ───────────────────────────────────────────────────────────────────────────── */

/* Live, not published - said once, quietly, next to the logo. */
.rs-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem 0.4rem 0.75rem;
    border: 1px solid var(--rs-glass-line);
    border-radius: 999px;
    background: var(--rs-glass);
    color: var(--rs-ink-soft);
    font-size: 0.85rem;
    font-weight: 500;
}

.rs-live-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--rs-green);
    box-shadow: 0 0 0 0 rgba(62, 158, 79, 0.55);
    animation: rs-pulse 2.4s ease-out infinite;
}

@keyframes rs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(62, 158, 79, 0.5); }
    70%  { box-shadow: 0 0 0 0.5rem rgba(62, 158, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(62, 158, 79, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .rs-live-dot { animation: none; }
}

/* Every area across the trust, one chart each. */
.rs-area-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 0.85rem;
}

.rs-area-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1.15rem 1rem 1.25rem;
    border: 1px solid var(--rs-glass-line);
    border-radius: var(--rs-radius-card);
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.rs-area-card .rs-donut {
    --rs-donut-size: 6.5rem;
    --rs-donut-ring: 0.85rem;
}

.rs-area-card .rs-donut-value { font-size: 1.35rem; }

.rs-area-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

.rs-area-card-figure {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--rs-ink-soft);
    font-size: 0.86rem;
    line-height: 1.3;
}

.rs-area-card-meta {
    margin: 0;
    color: var(--rs-ink-faint);
    font-size: 0.8rem;
}

/* School by school, as tabs: one panel at a time, whatever the size of the trust. */
.rs-single {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* One tab per kind of report, in the hero above the figures. Deliberately larger and
   quieter than the school tabs below: this chooses which picture of the trust you are
   looking at, and the two must not read as the same control. */
.rs-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.rs-kind {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--rs-glass-line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    color: var(--rs-ink-soft);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.rs-kind:hover {
    background: #fff;
    transform: translateY(-1px);
}

.rs-kind-on,
.rs-kind-on:hover {
    border-color: transparent;
    background: var(--rs-plum);
    color: #fff;
}

.rs-kind-name {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.rs-kind-meta {
    font-size: 0.82rem;
    opacity: 0.8;
}

/* The whole page below the hero belongs to the chosen kind, and is rebuilt with it. */
.rs-kind-panel {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    animation: rs-tab-in 220ms ease-out both;
}

/* Who isn't in these figures, under the schools of this kind of report. */
.rs-not-reported {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rs-glass-line);
    color: var(--rs-ink-soft);
    font-size: 0.9rem;
}

.rs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.35rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--rs-glass-line);
}

.rs-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.55rem 1rem;
    border: 1px solid var(--rs-glass-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--rs-ink-soft);
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
}

.rs-tab:hover { background: #fff; }

.rs-tab-on {
    border-color: transparent;
    background: var(--rs-ink);
    color: #fff;
    font-weight: 500;
}

.rs-tab-on:hover { background: var(--rs-ink); }

.rs-tab-on .rs-tag {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.rs-tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-tab-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1.1rem;
}

.rs-tab-head h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.rs-tab-panel {
    animation: rs-tab-in 220ms ease-out both;
}

@keyframes rs-tab-in {
    from { opacity: 0; transform: translateY(0.35rem); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rs-tab-panel,
    .rs-kind-panel { animation: none; }
}

/* A school's own panel: the ring and its latest report, then its areas as chips. */
.rs-school {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rs-school-figures {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
}

.rs-school-latest {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.rs-school-date {
    margin: 0.15rem 0 0.6rem;
    color: var(--rs-ink-soft);
    font-size: 0.9rem;
}

.rs-school-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rs-open {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--rs-glass-line);
    border-radius: 999px;
    background: var(--rs-glass-strong);
    color: var(--rs-ink);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
}

.rs-open:hover {
    background: #fff;
    color: var(--rs-plum);
}

.rs-open-quiet { color: var(--rs-ink-soft); }

/* Earlier reports: a plain list, because they're for reaching, not reading. */
.rs-archive {
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rs-glass-line);
}

.rs-archive h3 {
    margin: 0 0 0.75rem;
    color: var(--rs-ink-soft);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rs-archive ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-archive li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--rs-radius-card);
    background: rgba(255, 255, 255, 0.45);
}

.rs-archive-title {
    flex: 1 1 12rem;
    font-weight: 500;
}

.rs-archive-date {
    color: var(--rs-ink-soft);
    font-size: 0.88rem;
}

/* "Trust" beside a name, where the trust reports on its own kit. */
.rs-tag {
    margin-left: 0.6rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(107, 76, 154, 0.12);
    color: var(--rs-plum);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Back to wherever the report was opened from, inside the hero so it keeps the
   page's own gutter instead of sitting in a band above it. */
.rs-back {
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Where the investment is needed: what to fund now, and what to budget for. */
.rs-invest {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1rem;
}

.rs-invest-panel {
    padding: 1.25rem 1.35rem 1.35rem;
    border: 1px solid var(--rs-glass-line);
    border-left: 4px solid var(--rs-grey);
    border-radius: var(--rs-radius-card);
    background: rgba(255, 255, 255, 0.5);
}

.rs-invest-red   { border-left-color: var(--rs-red); background: var(--rs-red-wash); }
.rs-invest-amber { border-left-color: var(--rs-amber); background: var(--rs-amber-wash); }

.rs-invest-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.rs-invest-head h3 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.rs-invest-total {
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

.rs-invest-lead {
    margin: 0 0 0.9rem;
    color: var(--rs-ink-soft);
    font-size: 0.88rem;
}

.rs-invest-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-invest-list > li {
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
}

.rs-invest-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.rs-invest-title { font-weight: 600; }

.rs-invest-count {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.rs-invest-schools {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.45rem 0 0;
    padding: 0;
    color: var(--rs-ink-soft);
    font-size: 0.86rem;
    line-height: 1.45;
    list-style: none;
}

.rs-invest-schools > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
    border-top: 1px solid var(--rs-glass-line);
}

.rs-invest-schools > li:first-child { border-top: 0; }

.rs-invest-school {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-invest-school-count {
    color: var(--rs-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}