/*
 | RST Global - interface theme
 |
 | Plain CSS on purpose. Filament ships a precompiled stylesheet, so arbitrary
 | Tailwind utility classes written in our own views are never built and do
 | nothing. Everything here is real CSS against Filament's own `fi-` classes,
 | so it works without a front end build step on the demo machine.
 |
 | Design notes, so this does not drift back:
 |
 |  - Gold is the brand accent and belongs to actions: the primary button, the
 |    active state. It is not the colour of the data.
 |  - Data uses a soft multi-colour set. Each measure keeps its own colour so
 |    the eye learns them, and every colour has a pale tint for backgrounds.
 |  - Labels are sentence case. Uppercase letter-spaced micro-labels read as
 |    generic dashboard filler.
 |  - No hard accent bars down the edge of cards. Weight comes from the number
 |    and a soft tinted chip, not from a stripe.
 */

:root {
    /* brand accent, for actions only */
    --gold:        #ffce1b;
    --gold-700:    #7a5f00;
    --gold-soft:   #fff8dd;

    /* data colours, each with a pale tint */
    --blue:        #2f6fed;
    --blue-soft:   #eef3fe;
    --green:       #17a34a;
    --green-soft:  #ecfaf0;
    --amber:       #e8a900;
    --amber-soft:  #fff6de;
    --red:         #e0524d;
    --red-soft:    #fdf0ef;
    --teal:        #0e9c96;
    --teal-soft:   #e9f8f7;
    --violet:      #7a5af5;
    --violet-soft: #f2effe;

    /* neutrals */
    --ink:         #101322;
    --ink-2:       #3d4256;
    --muted:       #767c92;
    --line:        #edeff4;
    --line-2:      #f5f6f9;
    --surface:     #ffffff;
    --canvas:      #f7f8fa;

    --r-lg:        18px;
    --r-md:        14px;
    --r-sm:        10px;

    --shadow:      0 1px 3px rgba(16, 24, 40, .04),
                   0 12px 32px -18px rgba(16, 24, 40, .16);
    --shadow-lift: 0 2px 6px rgba(16, 24, 40, .06),
                   0 20px 44px -20px rgba(16, 24, 40, .22);
}

/* ---------------------------------------------------------------- canvas */

.fi-body,
.fi-layout {
    background: var(--canvas);
    color: var(--ink);
}

.fi-main,
.fi-main.fi-width-7xl { max-width: 1560px; }



/* -------------------------------------------------------------- sidebar */

.fi-sidebar,
.fi-sidebar-nav {
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.fi-sidebar-header {
    background: var(--surface);
    box-shadow: none;
    border-bottom: 0;
}

.fi-sidebar-item-btn {
    border-radius: var(--r-sm);
    font-weight: 500;
    color: var(--ink-2);
    transition: background-color .15s ease, color .15s ease;
}

.fi-sidebar-item-btn:hover {
    background: var(--line-2);
    color: var(--ink);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: var(--gold-soft);
    color: var(--ink);
    font-weight: 600;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--ink);
}

/* ---------------------------------------------------------------- cards */

.fi-section,
.fi-ta-ctn,
.fi-fo-component-ctn > .fi-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}

.fi-section-header,
.fi-section-content-ctn { border-radius: inherit; }

/* ----------------------------------------------------------- typography */

.fi-header-heading {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}

.fi-header-subheading { color: var(--muted); }

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

.fi-btn {
    border-radius: var(--r-sm);
    font-weight: 600;
    box-shadow: none;
}

.fi-btn.fi-color-primary,
.fi-btn-color-primary {
    background: var(--gold);
    color: #2b2200;
}

.fi-btn.fi-color-primary:hover,
.fi-btn-color-primary:hover { background: #c79f3c; }

.fi-icon-btn { border-radius: var(--r-sm); }

/* --------------------------------------------------------------- inputs */

.fi-input-wrp {
    border-radius: var(--r-sm);
    box-shadow: none;
    border: 1px solid var(--line);
    background: var(--surface);
}

.fi-input-wrp:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(216, 177, 74, .16);
}

/* --------------------------------------------------------------- badges */

.fi-badge {
    border-radius: 999px;
    font-weight: 600;
    padding-inline: .625rem;
}

/* --------------------------------------------------------------- tables */

/* Must stay visible. The filters panel is a child of this container, so
   clipping here cuts the panel off at the bottom edge of the card, and the
   shorter the table the more of the panel disappears. Filtering to a class
   with one person in it hid everything below "Completed from".
   Filament ships no overflow on this element for exactly that reason. The
   card's white background and rounded corners live on this element and its
   rows never reach the corners, since the toolbar sits above them and the
   pagination below, so there is nothing here that needs clipping. */
.fi-ta-ctn { overflow: visible; }

/* Sentence case, not uppercase tracking. */
.fi-ta-header-cell {
    background: transparent;
    color: var(--muted);
    font-weight: 600;
    font-size: .8125rem;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 1px solid var(--line);
}

.fi-ta-row { transition: background-color .12s ease; }
.fi-ta-row:hover { background: var(--line-2); }
.fi-ta-cell { border-color: var(--line); }

.fi-ta-record-checkbox,
.fi-checkbox-input { border-radius: 6px; }

/* ================================================== dashboard: structure */

.rst-grid { display: grid; gap: 1rem; }

.rst-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 860px) {
    .rst-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rst-two { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1100px) {
    .rst-two   { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .rst-two-e { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rst-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 1.375rem 1.5rem;
}

.rst-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.rst-card-title {
    font-size: 1rem;
    font-weight: 650;
    color: var(--ink);
    letter-spacing: -.015em;
}

.rst-card-sub {
    font-size: .8125rem;
    color: var(--muted);
    margin-top: .1875rem;
}

.rst-link {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}

.rst-link:hover { color: var(--ink); }

/* ------------------------------------------------------ dashboard: KPIs */

.rst-kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 1.5rem 1.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: box-shadow .2s ease, transform .2s ease;
}

.rst-kpi:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

/* Two lines are reserved so every card's number sits on the same baseline,
   however long the label runs. */
.rst-kpi-label {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.3;
}

.rst-kpi-value {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.04em;
    margin-top: .25rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.rst-kpi-foot {
    font-size: .875rem;
    color: var(--muted);
    margin-top: .5rem;
    line-height: 1.4;
}

.rst-kpi > div:first-child { min-width: 0; }

/* Soft ring, the way a modern console shows a share without shouting. */
.rst-ring { flex: none; }
.rst-ring text {
    font-size: 18px;
    font-weight: 700;
    fill: var(--ink-2);
}

/* --------------------------------------------------- tinted status rows */

.rst-note {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .8125rem .875rem;
    border-radius: var(--r-md);
    margin-bottom: .5rem;
}

.rst-note:last-child { margin-bottom: 0; }

.rst-note-blue   { background: var(--blue-soft); }
.rst-note-green  { background: var(--green-soft); }
.rst-note-amber  { background: var(--amber-soft); }
.rst-note-red    { background: var(--red-soft); }
.rst-note-plain  { background: var(--line-2); }

.rst-note-icon {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.rst-ico-blue  { color: var(--blue); }
.rst-ico-green { color: var(--green); }
.rst-ico-amber { color: var(--amber); }
.rst-ico-red   { color: var(--red); }

.rst-note-body  { min-width: 0; flex: 1; }
.rst-note-title { font-size: .875rem; font-weight: 600; color: var(--ink); }
.rst-note-sub {
    font-size: .8125rem;
    color: var(--ink-2);
    opacity: .82;
    margin-top: .0625rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rst-note-side  { flex: none; text-align: right; font-size: .8125rem; color: var(--ink-2); }

/* ------------------------------------------------------ dashboard: bars */

.rst-bar-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .4375rem 1rem;
    align-items: center;
    padding: .5rem 0;
}

.rst-bar-label { font-size: .875rem; color: var(--ink-2); font-weight: 500; }

.rst-bar-value {
    font-size: .875rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.rst-bar-track {
    grid-column: 1 / -1;
    height: 7px;
    border-radius: 999px;
    background: var(--line-2);
    overflow: hidden;
}

.rst-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.f-blue   { background: var(--blue); }
.f-green  { background: var(--green); }
.f-amber  { background: var(--amber); }
.f-red    { background: var(--red); }
.f-teal   { background: var(--teal); }
.f-violet { background: var(--violet); }
.f-gold   { background: var(--gold); }
.f-muted  { background: #d3d7e0; }

/* ------------------------------------------------------ dashboard: list */

.rst-list { display: flex; flex-direction: column; }

.rst-list-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .8125rem 0;
    border-top: 1px solid var(--line);
}

.rst-list-item:first-child { border-top: 0; padding-top: 0; }

.rst-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 700;
    background: var(--blue-soft);
    color: var(--blue);
}

.rst-av-green  { background: var(--green-soft);  color: var(--green); }
.rst-av-amber  { background: var(--amber-soft);  color: var(--amber); }
.rst-av-red    { background: var(--red-soft);    color: var(--red); }
.rst-av-teal   { background: var(--teal-soft);   color: var(--teal); }
.rst-av-violet { background: var(--violet-soft); color: var(--violet); }

.rst-list-main  { min-width: 0; flex: 1; }
.rst-list-title { font-size: .875rem; font-weight: 600; color: var(--ink); }
.rst-list-sub   { font-size: .8125rem; color: var(--muted); margin-top: .0625rem; }
.rst-list-side  { flex: none; text-align: right; }

.rst-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .1875rem .625rem;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.p-blue  { background: var(--blue-soft);  color: var(--blue); }
.p-green { background: var(--green-soft); color: var(--green); }
.p-amber { background: var(--amber-soft); color: #a2711a; }
.p-red   { background: var(--red-soft);   color: var(--red); }
.p-gold  { background: var(--gold-soft);  color: var(--gold-700); }
.p-grey  { background: var(--line-2);     color: var(--ink-2); }

.rst-empty {
    padding: 1.75rem 0;
    text-align: center;
    font-size: .875rem;
    color: var(--muted);
}

/* ----------------------------------------------------- dashboard: chart */

.rst-chart { width: 100%; height: auto; display: block; }

.rst-axis {
    display: flex;
    justify-content: space-between;
    margin-top: .625rem;
    font-size: .6875rem;
    color: var(--muted);
}

.rst-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    font-size: .8125rem;
    color: var(--muted);
}

.rst-legend span { display: inline-flex; align-items: center; gap: .375rem; }

.rst-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: none; }

.rst-donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.rst-donut-centre { font-size: 22px; font-weight: 700; fill: var(--ink); }
.rst-donut-sub    { font-size: 10px; fill: var(--muted); }

.rst-footnote {
    margin-top: 1rem;
    padding: .75rem .875rem;
    border-radius: var(--r-md);
    background: var(--blue-soft);
    font-size: .8125rem;
    color: #1c3f8f;
    line-height: 1.45;
}

/* ==========================================================================
   Buttons
   Primary is near black. Colour on this screen is reserved for data and for
   status, so a coloured primary button competes with the very thing it should
   be pointing at.
   ========================================================================== */

.fi-btn.fi-color-primary,
.fi-btn-color-primary {
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
}

.fi-btn.fi-color-primary:hover,
.fi-btn-color-primary:hover {
    background: #000;
    border-color: #000;
}

/* Destructive actions are outlined, not filled. Filling them makes delete the
   loudest thing on the page. */
.fi-btn.fi-color-danger {
    background: #fff;
    color: var(--red);
    border: 1px solid #f3cdcb;
}

.fi-btn.fi-color-danger:hover {
    background: var(--red-soft);
    border-color: var(--red);
}

.fi-btn.fi-color-gray {
    background: #fff;
    color: var(--ink-2);
    border: 1px solid var(--line);
}

.fi-btn.fi-color-gray:hover { background: var(--line-2); }

/* ==========================================================================
   Forms
   Hierarchy, in order of loudness: field label, then the value, then the hint.
   Previously the hint sat at almost the same weight as the label, so nothing
   led the eye.
   ========================================================================== */

.fi-fo-field-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.005em;
}

.fi-fo-field-label-required-mark { color: var(--red); }

/* Hint text under a field. Quiet, and clearly subordinate to the label. */
.fi-sc-text {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--muted);
}

.fi-input-wrp input,
.fi-input-wrp textarea,
.fi-input-wrp select {
    font-size: .9375rem;
    color: var(--ink);
}

.fi-input-wrp input::placeholder,
.fi-input-wrp textarea::placeholder { color: #a8adbd; }

/* Sections read as grouped headings with air, not boxed panels stacked
   against each other. */
.fi-section-header { padding-block: 1.25rem; }

.fi-section-header-heading {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--ink);
}

.fi-section-content { padding-block-end: 1.5rem; }

/* ==========================================================================
   Modals
   ========================================================================== */

.fi-modal-window {
    border-radius: var(--r-lg);
    box-shadow: 0 24px 64px -24px rgba(16, 24, 40, .35);
}

.fi-modal-heading {
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--ink);
}

/* Label and value pairs inside a modal. */
.rst-dl {
    display: grid;
    grid-template-columns: minmax(130px, max-content) 1fr;
    gap: .625rem 1.5rem;
    align-items: baseline;
}

.rst-dl dt { font-size: .8125rem; color: var(--muted); }

.rst-dl dd {
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
}

.rst-dl dd.rst-missing { color: var(--red); font-weight: 600; }

.rst-modal-sec {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.rst-modal-sec-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .625rem;
}

/* ==========================================================================
   Check the details
   The values on the left, the actual page on the right. Reading a list of
   values and seeing the document are different kinds of check, so both are
   on screen at once rather than behind a switch.
   ========================================================================== */

.rst-check {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: 1.5rem;
    align-items: start;
}

/* One column on a narrow window. The values matter more than the picture, so
   they keep the top of the modal when there is no room for both. */
@media (max-width: 60rem) {
    .rst-check { grid-template-columns: minmax(0, 1fr); }
}

.rst-check-values { min-width: 0; }

.rst-check-paper { min-width: 0; }

.rst-paper-frame {
    position: relative;
    border: 1px solid var(--line);
    border-radius: .75rem;
    overflow: hidden;
    background: var(--line-2);

    /* US Letter, so the frame is the shape of the thing inside it and the
       page is not letterboxed into a box of the wrong proportion. */
    aspect-ratio: 612 / 792;
}

.rst-paper-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.rst-paper-frame-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.rst-paper-frame-empty span {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--muted);
}

.rst-paper-note {
    margin: .625rem 0 0;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--muted);
}

/* ==========================================================================
   Issuing a class in one go
   The counts lead, because the number skipped is the thing most easily
   missed and the one that matters most.
   ========================================================================== */

.rst-batch-head { margin-bottom: .25rem; }

.rst-batch-lead {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.rst-batch-lead-none { color: var(--muted); }

.rst-batch-sub {
    margin: .375rem 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--ink-2);
}

.rst-batch-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 13rem;
    overflow-y: auto;
}

.rst-batch-list li {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: .125rem 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--line);
}

.rst-batch-list li:last-child { border-bottom: 0; }

.rst-batch-name {
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink);
}

.rst-batch-course {
    font-size: .875rem;
    color: var(--ink-2);
    min-width: 0;
}

/* The reason spans both columns so it sits under the name, reading as a
   consequence of the row rather than as another column of data. */
.rst-batch-why {
    grid-column: 1 / -1;
    font-size: .8125rem;
    color: var(--muted);
}

.rst-batch-list-skip .rst-batch-why { color: var(--red); }

/* ==========================================================================
   Hero figure
   One card carries the headline number, so the eye has somewhere to land
   first. Everything else on the row is deliberately quieter.
   ========================================================================== */

.rst-kpi-hero {
    background: linear-gradient(120deg, #ffce1b 0%, #ffdf6b 42%, #fff8dd 100%);
    border-color: #f0c11a;
}

.rst-kpi-hero .rst-kpi-label { color: #4d3c00; }
.rst-kpi-hero .rst-kpi-value { color: #1f1800; }
.rst-kpi-hero .rst-kpi-foot  { color: #5c4800; }
.rst-kpi-hero .rst-ring text { fill: #1f1800; }
.rst-kpi-hero .rst-ring-cap  { color: #5c4800; }

/* Three across, for the renewals summary. */
.rst-three { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 800px) {
    .rst-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A soft numeral block, used where a ring would imply a share that does not
   exist. */
.rst-tile-mark {
    flex: none;
    min-width: 56px;
    height: 56px;
    padding-inline: .625rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The table inside a card should not draw its own frame on top of the card. */
.rst-card .fi-ta-ctn {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* ==========================================================================
   Period selector
   Lost in a stylesheet rewrite, which left these rendering as bare text.
   ========================================================================== */

.rst-periods {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    background: var(--line-2);
    border-radius: 999px;
    flex: none;
}

.rst-period {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: .4375rem .875rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.rst-period:hover    { color: var(--ink); }
.rst-period-on       { background: var(--ink); color: #fff; }
.rst-period-on:hover { color: #fff; }

/* A soft icon square beside a headline figure. Repeating the number next to
   itself, which is what this replaced, told the reader nothing. */
.rst-tile-icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
}

.rst-tile-icon svg { width: 24px; height: 24px; }

/* Row actions collapsed behind a single menu, so the table reads as data
   rather than as a wall of links. */
.fi-dropdown-panel {
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    box-shadow: 0 16px 40px -16px rgba(16, 24, 40, .28);
}

.fi-dropdown-list-item { border-radius: 8px; }

/* The one action that matters on a row stays visible and reads as the primary
   thing to do. */
.fi-ta-actions .fi-btn.fi-color-primary {
    padding-inline: .875rem;
}


/* The ring is meaningless without its denominator, so it carries one. */
.rst-ring-wrap {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
}

.rst-ring-cap {
    font-size: .6875rem;
    color: var(--muted);
    white-space: nowrap;
}

/* ==========================================================================
   Stat card
   Label and icon share the top line, the figure sits under them. The previous
   version pushed the number hard left and the icon hard right, which left a
   void down the middle of a wide card and made the two halves look unrelated.
   ========================================================================== */

.rst-stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 1.375rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    transition: box-shadow .2s ease, transform .2s ease;
}

.rst-stat:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

.rst-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .625rem;
}

.rst-stat-label {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ink-2);
}

.rst-stat-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.rst-stat-icon svg { width: 20px; height: 20px; }

.rst-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.rst-stat-foot {
    font-size: .875rem;
    color: var(--muted);
    margin-top: .25rem;
}

/* ==========================================================================
   Tables
   The primary cell carries the weight and a quiet second line. Everything
   else steps back, so a row can be read in one pass instead of scanned
   column by column.
   ========================================================================== */

.fi-ta-text-item-label { font-size: .875rem; }

.fi-ta-cell { padding-block: .3125rem; }

/* The small grey line under a cell's main value. */
.fi-ta-text-description {
    font-size: .78125rem;
    color: var(--muted);
    margin-top: .0625rem;
}

/* Row actions sit together and stay quiet until wanted. */
.fi-ta-actions { gap: .25rem; }

.fi-ta-actions .fi-icon-btn {
    color: var(--muted);
    border-radius: 8px;
}

.fi-ta-actions .fi-icon-btn:hover {
    color: var(--ink);
    background: var(--line-2);
}

/* Empty cells should read as empty, not as a word repeated down the page. */
.fi-ta-placeholder { color: #c3c7d2; }

/* ==========================================================================
   Sidebar
   Grouped, collapsible, and the account sits at the bottom where it belongs
   rather than floating in the top right corner away from everything else.
   ========================================================================== */

.fi-sidebar-nav { padding-block: .75rem; }

.fi-sidebar-group-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a3a8b8;
    padding-inline: .75rem;
    margin-bottom: .25rem;
}

.fi-sidebar-item-btn { padding-block: .5rem; }

/* Count badge on a nav item, the way an unread count reads. */
.fi-sidebar-item-badge {
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
}

/* The account block pinned to the bottom of the sidebar. */
.rst-side-user {
    border-top: 1px solid var(--line);
    padding: .875rem .75rem;
    display: flex;
    align-items: center;
    gap: .625rem;
    background: var(--surface);
}

.rst-side-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--gold-soft);
    color: var(--gold-700);
    font-size: .75rem;
    font-weight: 700;
}

.rst-side-user-main { min-width: 0; flex: 1; }

.rst-side-name {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rst-side-mail {
    font-size: .75rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rst-side-out {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: .375rem;
    border-radius: 8px;
    line-height: 0;
}

.rst-side-out:hover { color: var(--red); background: var(--red-soft); }
.rst-side-out svg { width: 18px; height: 18px; }



/* Collapsed sidebar hides the text, so the account block collapses to just the
   avatar rather than clipping a name in half. */
.fi-sidebar:not(.fi-sidebar-open) .rst-side-user-main,
.fi-sidebar:not(.fi-sidebar-open) .rst-side-out { display: none; }
.fi-sidebar:not(.fi-sidebar-open) .rst-side-user { justify-content: center; }

/* ==========================================================================
   Row actions
   A row level action is not a page level action. The page's primary button is
   solid; a row's is outlined, so the two stop competing.
   ========================================================================== */

.fi-ta-actions .fi-btn.fi-color-primary {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid #d7dae2;
    font-weight: 600;
}

.fi-ta-actions .fi-btn.fi-color-primary:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

/* ==========================================================================
   Brand mark
   Full name when the sidebar is open, the seal alone when it is collapsed.
   Filament hides the whole logo container on collapse, so the container is
   forced back and only the wordmark is dropped.
   ========================================================================== */

.rst-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .9375rem;
    color: var(--ink);
    white-space: nowrap;
}

.rst-brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: none;
}





/* Room between the header and the first nav item. They were sitting on top of
   each other, which made the header read as part of the list. */
.fi-sidebar-nav { padding-top: 1.5rem; }

.fi-sidebar-header { padding-block: 1rem; }

/* ==========================================================================
   Sidebar owns the left column
   The topbar is switched off in the panel, so the sidebar runs the full height
   of the window and carries the brand, the search, the notifications and the
   account. Nothing spans across the top of it.
   ========================================================================== */

/* The seal alone, shown only while the sidebar is collapsed. Filament already
   hides the full wordmark on collapse, so this sits in the LOGO_BEFORE hook and
   simply takes its place. */
.rst-brand-collapsed {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-inline: auto;
}

.fi-sidebar-header-ctn { border-bottom: 0; }

.fi-sidebar-header {
    gap: .625rem;
    padding: 1.125rem 1rem .5rem;
}

/* Collapsed, everything in the header centres on the rail. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
    flex-direction: column;
    padding-inline: 0;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn { justify-content: center; }


/* ==========================================================================
   SHELL
   The sidebar is a floating panel, the topbar sits only over the content, and
   the page behind both is a soft wash rather than flat white.
   ========================================================================== */

.fi-body,
.fi-layout {
    background:
        radial-gradient(1100px 600px at 0% 0%, #eef1fb 0%, rgba(238, 241, 251, 0) 60%),
        radial-gradient(900px 500px at 100% 100%, #f6f1e4 0%, rgba(246, 241, 228, 0) 55%),
        var(--canvas);
    background-attachment: fixed;
}

/* ------------------------------------------------------------- sidebar --- */

/* The whole sidebar is a single rounded panel. Styling the header and the nav
   as two separate cards left a full width band across the top, which is what
   made it look broken. */
.fi-sidebar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-radius: 32px;
    margin: 1rem 0 1rem 1rem;
    padding: 1.5rem 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04), 0 20px 46px -28px rgba(16, 24, 40, .2);

    /* Stays in view while the page scrolls, and never grows past the window. It
       ran the full height of the document before, which is why it slid away. */
    /* Sized for where it actually starts, which is below the topbar, not for
       where it ends up once pinned. Sizing it for the pinned position left it
       running 48px past the bottom of the window before any scrolling. */
    position: sticky;
    top: 80px;
    height: calc(100dvh - 96px);
    max-height: calc(100dvh - 96px);
    align-self: flex-start;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fi-sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; }

.fi-sidebar-header-ctn,
.fi-sidebar-header,
.fi-sidebar-nav {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.fi-sidebar-header-ctn { padding: 0 .25rem 1.5rem; }
.fi-sidebar-header { padding: 0; }
.fi-sidebar-nav { padding: 0; }

.fi-sidebar-group-label {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #9aa0b0;
    padding-inline: .875rem;
    margin: 1.5rem 0 .5rem;
}

.fi-sidebar-item-btn {
    border-radius: 14px;
    padding: .8125rem .875rem;
    font-weight: 500;
    color: var(--ink-2);
    gap: .875rem;
}

.fi-sidebar-item-btn:hover { background: var(--line-2); color: var(--ink); }

/* Active is a solid dark pill, the way the reference marks position. */
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: var(--ink);
    color: #fff;
    font-weight: 600;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #fff; }

/* Collapse control, straddling the panel edge, vertically centred. */
.fi-sidebar-open-collapse-sidebar-btn,
.fi-sidebar-close-collapse-sidebar-btn {
    position: absolute;
    top: 50%;
    inset-inline-end: -2px;
    transform: translateY(-50%);
    z-index: 40;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .14);
    color: var(--muted);
}

.fi-sidebar-open-collapse-sidebar-btn:hover,
.fi-sidebar-close-collapse-sidebar-btn:hover { color: var(--ink); }

.fi-sidebar-open-collapse-sidebar-btn svg,
.fi-sidebar-close-collapse-sidebar-btn svg { width: 15px; height: 15px; }

/* Collapsed rail: everything centres on one axis. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header-ctn,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav { padding-inline: .5rem; }

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    margin-inline: auto;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-label,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge { display: none; }

.rst-brand-collapsed { width: 30px; height: 30px; border-radius: 50%; margin: 0 auto; }

/* -------------------------------------------------------------- topbar --- */

.fi-topbar > nav,
.fi-topbar nav {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    padding-block: 1.25rem;
}

/* Search as a wide rounded field, the way a command bar reads. */
.fi-global-search-field .fi-input-wrp,
.fi-topbar .fi-input-wrp {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    min-width: 320px;
}

/* Bell and avatar as separate round chips. */
.fi-topbar .fi-icon-btn,
.fi-topbar-database-notifications-btn {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    width: 42px;
    height: 42px;
}

.fi-topbar .fi-avatar,
.fi-user-menu .fi-avatar { border-radius: 999px; }

.fi-main { padding-top: .5rem; max-width: 1560px; }

/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.rst-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04), 0 18px 44px -28px rgba(16, 24, 40, .18);
    padding: 1.5rem;
}

.rst-hello { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.rst-hello-sub { font-size: .9375rem; color: var(--muted); margin-top: .25rem; }

.rst-row { display: grid; gap: 1rem; }

@media (min-width: 1180px) {
    .rst-row-top   { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); }
    .rst-row-lower { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); }
}

.rst-kpi-row { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; }

@media (min-width: 760px) {
    .rst-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- the headline cards -------------------------------------------------
   Flat pastel blocks with the figure at the foot and a round action sitting in
   the corner. No rings, no percentages: a number, what it means, and a way in.
   ------------------------------------------------------------------------ */

/* The notch is cut out of a background layer sitting behind the content, not
   out of the tile itself. Masking the tile masked the arrow button along with
   the corner, which is why the button vanished and left a white hole. */
.rst-tile {
    position: relative;
    border-radius: 26px;
    padding: 1.5rem 1.625rem 1.625rem;
    min-height: 296px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform .18s ease;
}

.rst-tile-bg {
    position: absolute;
    inset: 0;
    border-radius: 26px;
    -webkit-mask-image: radial-gradient(circle 50px at calc(100% - 34px) calc(100% - 34px),
        transparent 0 49px, #000 50px);
    mask-image: radial-gradient(circle 50px at calc(100% - 34px) calc(100% - 34px),
        transparent 0 49px, #000 50px);
}

.rst-tile > *:not(.rst-tile-bg):not(.rst-tile-go) { position: relative; z-index: 1; }

.rst-tile-cream .rst-tile-bg { background: #fbeec6; }
.rst-tile-mist .rst-tile-bg  { background: #eef0f4; }
.rst-tile-stone .rst-tile-bg { background: #e4e7ec; }

.rst-tile:hover { transform: translateY(-2px); }

.rst-tile-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
}

.rst-tile-sub { font-size: .8125rem; color: rgba(25, 27, 32, .58); margin-top: .25rem; }

.rst-tile-value {
    margin-top: auto;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* The button sits in the gap the mask left, unmasked and on top. */
.rst-tile-go {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    transition: transform .18s ease;
}

.rst-tile:hover .rst-tile-go { transform: translate(2px, -2px); }
.rst-tile-go svg { width: 19px; height: 19px; }

/* ---- the two summary pills ---------------------------------------------- */

.rst-strip-stack { position: relative; display: flex; flex-direction: column; }

.rst-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: .875rem;
    border-radius: 999px;
    padding: 1.375rem 1.5rem 1.375rem 1rem;
    border: 1px solid var(--line);
    background: var(--surface);
}

/* Each strip tucks under the one above it, so the stack reads with depth
   instead of as three separate rows floating apart. */
.rst-strip-stack .rst-strip + .rst-strip {
    margin-top: -22px;
    padding-top: calc(1.375rem + 22px);
    z-index: 1;
}

.rst-strip-stack .rst-strip:nth-child(1) { z-index: 3; }
.rst-strip-stack .rst-strip:nth-child(2) { z-index: 2; }

.rst-strip-dark {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    box-shadow: 0 14px 28px -14px rgba(16, 19, 34, .55);
}

.rst-strip-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--gold);
    color: #2b2200;
}

.rst-strip-dark .rst-strip-icon { background: var(--gold); }
.rst-strip-icon svg { width: 20px; height: 20px; }
.rst-strip-main { flex: 1; min-width: 0; }
.rst-strip-value { font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; }
.rst-strip-note { font-size: .75rem; opacity: .62; }
.rst-strip-tag { font-size: .8125rem; font-weight: 600; opacity: .85; white-space: nowrap; }

/* ---- bar chart ---------------------------------------------------------- */

.rst-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    padding-top: 2.5rem;
}

.rst-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
}

/* Fixed height track. The bar grows from the bottom of it and the callout is
   positioned against the same box, so it always sits just above the bar's top
   rather than floating at the top of the chart. */
.rst-bar-slot {
    position: relative;
    width: 100%;
    height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.rst-bar {
    width: 100%;
    max-width: 46px;
    border-radius: 999px;
    background: var(--gold);
    transition: filter .15s ease;
    min-height: 14px;
}

.rst-bar-soft { background: #f2dd9a; }
.rst-bar-pale { background: #f7ecc9; }

/* The gap in the series, drawn rather than left blank. */
.rst-bar-empty {
    background: repeating-linear-gradient(
        45deg, #eceef3, #eceef3 4px, #f7f8fa 4px, #f7f8fa 8px
    );
}

.rst-bar-col:hover .rst-bar { filter: brightness(.94); }

.rst-bar-label { font-size: .75rem; color: var(--muted); }

.rst-bar-tip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 16px;
    background: var(--ink);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: .3125rem .625rem;
    border-radius: 8px;
    white-space: nowrap;
}

.rst-bar-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #fff;
    border: 2.5px solid var(--ink);
}

.rst-figure {
    background: var(--line-2);
    border-radius: 22px;
    padding: 1.125rem 1.25rem;
    min-width: 190px;
}

.rst-figure-value { font-size: 2rem; font-weight: 700; letter-spacing: -.04em; color: var(--ink); }
.rst-figure-note { font-size: .8125rem; color: var(--muted); margin-top: .125rem; }

.rst-delta {
    display: inline-block;
    margin-top: .75rem;
    background: var(--surface);
    border-radius: 999px;
    padding: .3125rem .75rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--green);
}

.rst-delta-down { color: var(--red); }

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

.rst-table { width: 100%; border-collapse: collapse; }

.rst-table th {
    text-align: left;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--muted);
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--line);
}

.rst-table td {
    padding: .875rem .75rem;
    font-size: .875rem;
    color: var(--ink);
    border-bottom: 1px solid var(--line-2);
}

.rst-table tr:last-child td { border-bottom: 0; }
.rst-table td.rst-num { font-variant-numeric: tabular-nums; }

.rst-status { display: inline-flex; align-items: center; gap: .4375rem; font-weight: 600; font-size: .8125rem; }
.rst-status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.rst-ok   { color: var(--green); }
.rst-warn { color: #b8860b; }
.rst-bad  { color: var(--red); }

/* ---- insight cards ------------------------------------------------------ */

.rst-insight {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1rem 1.125rem;
    margin-bottom: .75rem;
}

.rst-insight:last-child { margin-bottom: 0; }

.rst-insight-head { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; }

.rst-insight-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
}

.rst-insight-icon svg { width: 16px; height: 16px; }
.rst-ico-amber2 { background: var(--amber); }
.rst-ico-red2   { background: var(--red); }
.rst-ico-green2 { background: var(--green); }

.rst-insight-title { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.rst-insight-body  { font-size: .8125rem; color: var(--ink-2); line-height: 1.5; }

.rst-insight-link {
    display: inline-block;
    margin-top: .5rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   Chart interaction
   ========================================================================== */

/* Every column carries its readout; it appears on hover or keyboard focus. The
   busiest month keeps its label up permanently so the chart still says
   something without being touched. */
.rst-bar-tip {
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease;
}

.rst-bar-tip-on,
.rst-bar-col:hover .rst-bar-tip,
.rst-bar-col:focus-visible .rst-bar-tip { opacity: 1; }

.rst-bar-col { cursor: default; outline: none; }
.rst-bar-col:focus-visible .rst-bar { outline: 2px solid var(--ink); outline-offset: 3px; }
.rst-bar-col:hover .rst-bar { filter: brightness(.93); }

/* Twelve columns need thinner bars than eight did. */
.rst-bar { max-width: 34px; }

/* Year selector. */
.rst-year {
    appearance: none;
    background: var(--line-2) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23767c92' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") no-repeat right .75rem center / 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .5rem 2.25rem .5rem 1rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.rst-year:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Panels size to their own content instead of stretching to match the tallest
   column, which was leaving a slab of empty space under the chart. */
.rst-row-lower { align-items: start; }

/* ==========================================================================
   Sidebar refinements
   ========================================================================== */

/* Fully round, not a softly cornered rectangle. */
.fi-sidebar-item-btn { border-radius: 999px; }

/* The icon must not jump when the sidebar collapses. Expanded it sits 35px in
   from the panel edge; the collapsed rail's padding is set so the same 46px
   circle puts the icon on that identical line. Measured, not guessed. */
.fi-sidebar:not(.fi-sidebar-open) { padding-inline: 12px; }

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    margin-inline: 0;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: 0;
}

/* ==========================================================================
   Lower row
   Both panels share a height again now the third insight card is gone, and the
   chart grows into its panel rather than leaving a slab of empty space.
   ========================================================================== */

.rst-row-lower { align-items: stretch; }

.rst-row-lower > .rst-panel { display: flex; flex-direction: column; }

.rst-chart-body {
    flex: 1;
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.rst-chart-body .rst-figure { display: flex; flex-direction: column; justify-content: center; }

.rst-chart-plot { flex: 1; min-width: 280px; display: flex; flex-direction: column; justify-content: flex-end; }

/* A tile rendered as a button still has to look like a tile. */
button.rst-tile {
    border: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

/* Marks which period the table below is currently showing. */
.rst-tile-on { box-shadow: 0 0 0 2px var(--ink); }

/* ==========================================================================
   The design editor's preview
   The certificate stays beside the fields while the list of rows is scrolled,
   because the whole point is watching the page change as wording is edited.
   ========================================================================== */

.rst-design-preview {
    position: sticky;
    top: 1.5rem;
}

/* Three designs in the library are landscape. The frame is the shape of the
   page inside it, so a landscape design is not letterboxed into a tall box. */
.rst-paper-frame-landscape {
    aspect-ratio: 792 / 612;
}

.rst-redraw-row {
    display: flex;
    align-items: baseline;
    gap: .625rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}

.rst-redraw-row .rst-paper-note { margin: 0; }

.rst-redraw-button {
    flex: none;
    padding: .3125rem .625rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: #fff;
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

.rst-redraw-button:hover { background: var(--line-2); }
.rst-redraw-button[disabled] { opacity: .6; cursor: default; }

/* ==========================================================================
   The login screen (Q22)
   One centred card on a very light ground, and nothing else on the page. The
   panel behind it carries the mustard accent; this deliberately does not, so
   the button reads as a decision rather than as a colour that failed to load.
   ========================================================================== */

.fi-simple-layout {
    background: #fafafa;
}

.fi-simple-main {
    background: #fff;
    border: 1px solid var(--line, #e7e7e7);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    padding: 2.75rem 2.5rem;
    max-width: 25rem;
}

/* The brand block above the form. The mark only: the wordmark would say
   "RST Global Solutions" immediately above a heading that says the same. */
.fi-simple-header .rst-brand-text { display: none; }

.fi-simple-header .rst-brand-mark {
    height: 2.25rem;
    width: 2.25rem;
    margin: 0 auto .875rem;
    display: block;
}

.fi-simple-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.fi-simple-header .fi-header-heading,
.fi-simple-header h1 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink, #101828);
}

.fi-simple-header .fi-header-subheading,
.fi-simple-header p {
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--muted, #667085);
}

/* Full width, black, and squarely a button rather than an accent. */
.fi-simple-main .fi-form .fi-ac,
.fi-simple-main .fi-form .fi-ac-btn-action {
    width: 100%;
}

.fi-simple-main .fi-form .fi-btn {
    width: 100%;
    justify-content: center;
    background: #101828;
    border-color: #101828;
    color: #fff;
    font-weight: 600;
    padding-top: .625rem;
    padding-bottom: .625rem;
}

.fi-simple-main .fi-form .fi-btn:hover {
    background: #1d2939;
    border-color: #1d2939;
}

.fi-simple-main .fi-form .fi-btn .fi-btn-label { color: #fff; }

/* Nothing else belongs on this page. */
.fi-simple-main .fi-simple-footer,
.fi-simple-layout .fi-simple-footer { display: none; }