/* =============================================================================
   RumiNest360 — page and figure components (Phase 16C–16F)

   What the shell and the generic components do not cover: the dashboard's KPI
   tiles and charts, the sign-in pages, the bill and receipt documents, and the
   handful of genuinely page-specific arrangements.

   Loaded after components.css.
   ========================================================================== */

/* =============================================================================
   KPI tile — Vuexy's stat card: a tinted icon, the label as plain text, the
   figure large beneath it.
   ========================================================================== */
.sm-kpi {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sm-s-4);
    height: 100%;
    padding: var(--sm-s-6);
    background-color: var(--sm-surface);
    border: 0;
    border-radius: var(--sm-r);
    box-shadow: var(--sm-shadow-2);
    color: var(--sm-ink);
    text-decoration: none;
    transition: box-shadow var(--sm-fast) var(--sm-ease),
                transform var(--sm-fast) var(--sm-ease);
}

/* A tile that is a link says so by lifting, not by growing a chevron. */
.sm-kpi--link:hover {
    box-shadow: var(--sm-shadow-3);
    text-decoration: none;
    color: var(--sm-ink);
    transform: translateY(-2px);
}

.sm-kpi--link:focus-visible {
    outline: 2px solid var(--sm-focus);
    outline-offset: 2px;
}

.sm-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--sm-r-sm);
    background-color: var(--sm-primary-tint);
    color: var(--sm-primary);
}

.sm-kpi--paid .sm-kpi-icon { background-color: var(--sm-paid-tint); color: var(--sm-success); }
.sm-kpi--due .sm-kpi-icon { background-color: var(--sm-due-tint); color: var(--sm-warning); }
.sm-kpi--over .sm-kpi-icon { background-color: var(--sm-over-tint); color: var(--sm-danger); }
.sm-kpi--credit .sm-kpi-icon { background-color: var(--sm-credit-tint); color: var(--sm-info); }
.sm-kpi--neutral .sm-kpi-icon { background-color: #ebebed; color: var(--sm-secondary); }

/* Beside the icon while the figure fits; beneath it, full width, once the tile is too
   narrow for both — a rupee figure never wraps, so the tile has to. */
.sm-kpi-body {
    display: block;
    flex: 1 1 9.5rem;
    min-width: 0;
}

.sm-kpi-label {
    display: block;
    font-size: var(--sm-text);
    font-weight: 400;
    color: var(--sm-ink-2);
    line-height: 1.4;
}

.sm-kpi-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--sm-ink);
    margin-top: 0.125rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.sm-kpi-hint {
    display: block;
    font-size: var(--sm-text-sm);
    color: var(--sm-ink-3);
    margin-top: 0.125rem;
}

/* =============================================================================
   Gauge
   ========================================================================== */
.sm-gauge {
    position: relative;
    width: 132px;
    height: 132px;
    flex: none;
}

.sm-gauge--sm { width: 104px; height: 104px; }

.sm-gauge-svg {
    width: 100%;
    height: 100%;
    /* Twelve o'clock, clockwise. */
    transform: rotate(-90deg);
}

.sm-gauge-track {
    fill: none;
    stroke: var(--sm-neutral-tint);
    stroke-width: 12;
}

.sm-gauge-value {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--sm-mid) var(--sm-ease);
}

.sm-gauge-value--primary { stroke: var(--sm-primary); }
.sm-gauge-value--paid { stroke: var(--sm-success); }
.sm-gauge-value--due { stroke: var(--sm-warning); }
.sm-gauge-value--over { stroke: var(--sm-danger); }
.sm-gauge-value--credit { stroke: var(--sm-info); }

.sm-gauge-centre {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sm-gauge-figure {
    font-size: 1.375rem;
    font-weight: 680;
    letter-spacing: -0.02em;
    color: var(--sm-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.sm-gauge-caption {
    font-size: var(--sm-text-xs);
    color: var(--sm-ink-3);
    margin-top: 2px;
}

/* =============================================================================
   Split bar
   ========================================================================== */
.sm-split-bar {
    display: flex;
    height: 10px;
    border-radius: var(--sm-r-pill);
    overflow: hidden;
    background-color: var(--sm-neutral-tint);
}

.sm-split-part {
    display: block;
    height: 100%;
    transition: width var(--sm-mid) var(--sm-ease);
}

.sm-split-part--primary { background-color: var(--sm-primary); }
.sm-split-part--paid { background-color: var(--sm-success); }
.sm-split-part--due { background-color: var(--sm-warning); }
.sm-split-part--over { background-color: var(--sm-danger); }
.sm-split-part--credit { background-color: var(--sm-info); }
.sm-split-part--accent { background-color: var(--sm-chart-2); }
.sm-split-part--neutral { background-color: var(--sm-ink-4); }
.sm-split-part--empty { background-color: var(--sm-neutral-tint); }

.sm-split-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sm-s-2) var(--sm-s-5);
    list-style: none;
    margin: var(--sm-s-3) 0 0;
    padding: 0;
}

.sm-split-key {
    display: flex;
    align-items: baseline;
    gap: var(--sm-s-2);
    font-size: var(--sm-text-md);
}

.sm-split-dot {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    transform: translateY(-1px);
}

.sm-split-dot--primary { background-color: var(--sm-primary); }
.sm-split-dot--paid { background-color: var(--sm-success); }
.sm-split-dot--due { background-color: var(--sm-warning); }
.sm-split-dot--over { background-color: var(--sm-danger); }
.sm-split-dot--credit { background-color: var(--sm-info); }
.sm-split-dot--accent { background-color: var(--sm-chart-2); }
.sm-split-dot--neutral { background-color: var(--sm-ink-4); }

.sm-split-name { color: var(--sm-ink-2); }

.sm-split-amount {
    font-weight: 600;
    color: var(--sm-ink);
}

/* =============================================================================
   Dashboard
   ========================================================================== */

/* The one panel that carries the page: what was billed, and how much of it came in. */
.sm-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sm-s-6);
    padding: var(--sm-s-6);
    background-color: var(--sm-surface);
    border: 0;
    border-radius: var(--sm-r-lg);
    box-shadow: var(--sm-shadow-2);
}

.sm-hero-body {
    flex: 1 1 260px;
    min-width: 0;
}

.sm-hero-figures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sm-s-6);
    margin-top: var(--sm-s-4);
}

.sm-hero-figure {
    min-width: 0;
}

/* -----------------------------------------------------------------------------
   The brand hero (Phase 21C): Vuexy's purple analytics card.

   Measured: the gradient runs #1e676b → #267c81, so white text on it is never
   below 4.9:1; the chips darken it further (6.4:1), and a caption at 96% white
   is 4.6:1 on the lightest end.
   -------------------------------------------------------------------------- */
.sm-hero--brand {
    position: relative;
    overflow: hidden;
    align-items: stretch;
    background: linear-gradient(120deg, var(--sm-primary-700) 0%, var(--sm-primary-600) 100%);
    box-shadow: 0 0.25rem 1rem rgba(var(--sm-primary-rgb), 0.35);
    color: #fff;
}

.sm-hero-title {
    font-size: var(--sm-text-xl);
    font-weight: 500;
    color: #fff;
    margin: 0;
}

.sm-hero-subtitle {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.96);
}

.sm-hero-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: var(--sm-s-3);
    margin-top: var(--sm-s-6);
}

.sm-hero-chip {
    display: flex;
    align-items: center;
    gap: var(--sm-s-3);
    min-width: 0;
    padding: var(--sm-s-3);
    border-radius: var(--sm-r-sm);
    background-color: rgba(1, 40, 34, 0.25);
}

.sm-hero-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--sm-r-sm);
    background-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.125rem;
}

.sm-hero-chip-label,
.sm-hero-chip-caption {
    display: block;
    font-size: var(--sm-text-sm);
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.3;
}

.sm-hero-chip-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
}

/* A white button on the brand card; its primary ink on white is 6.2:1. */
.sm-btn-on-brand {
    --bs-btn-color: var(--sm-primary-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--sm-primary-700);
    --bs-btn-hover-bg: #eef6f6;
    --bs-btn-hover-border-color: #eef6f6;
    --bs-btn-active-color: var(--sm-primary-700);
    --bs-btn-active-bg: var(--sm-primary-tint);
    --bs-btn-active-border-color: var(--sm-primary-tint);
    box-shadow: 0 0.125rem 0.375rem rgba(1, 40, 34, 0.25);
}

.sm-btn-on-brand:focus-visible {
    outline-color: #fff;
}

/* The big faint glyph standing in for Vuexy's illustration. Decorative. */
.sm-hero-art {
    position: absolute;
    right: -1.5rem;
    bottom: -2.5rem;
    color: rgba(255, 255, 255, 0.12);
    font-size: 13rem;
    line-height: 1;
    pointer-events: none;
}

.sm-hero-art .sm-icon {
    stroke-width: 1;
}

/* The words at the top, the figures along the bottom, however tall the row makes
   the card. */
.sm-hero--brand > .sm-hero-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.sm-hero--brand .sm-hero-chips {
    margin-top: auto;
    padding-top: var(--sm-s-6);
}

@media (max-width: 575.98px) {
    .sm-hero-art { display: none; }
}

/* -----------------------------------------------------------------------------
   Charts (ApexChart, TrendChart)
   -------------------------------------------------------------------------- */
.sm-chart {
    width: 100%;
    min-width: 0;
}

.sm-chart .apexcharts-tooltip {
    border: 0 !important;
    border-radius: var(--sm-r-sm) !important;
    box-shadow: var(--sm-shadow-3) !important;
    font-family: var(--sm-font) !important;
}

.sm-chart .apexcharts-tooltip-title {
    background-color: var(--sm-surface-sunken) !important;
    border-bottom-color: var(--sm-line) !important;
    font-weight: 500;
}

.sm-chart-loading {
    display: flex;
    align-items: flex-end;
    gap: 4%;
    padding: var(--sm-s-6) var(--sm-s-2) var(--sm-s-3);
}

.sm-chart-loading-bar {
    flex: 1 1 0;
    border-radius: var(--sm-r-xs) var(--sm-r-xs) 0 0;
    background: linear-gradient(90deg, var(--sm-neutral-tint) 0%, var(--sm-surface-sunken) 50%, var(--sm-neutral-tint) 100%);
    background-size: 200% 100%;
    animation: sm-shimmer 1.4s var(--sm-ease) infinite;
}

.sm-chart-failed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sm-s-2);
    padding: var(--sm-s-6);
    text-align: center;
    color: var(--sm-ink-3);
    font-size: var(--sm-text-md);
}

/* Where a ring chart is drawn, the split bar's legend is enough under it. */
.sm-split--legend-only .sm-split-bar { display: none; }
.sm-split--legend-only .sm-split-legend { margin-top: var(--sm-s-2); justify-content: center; }

/* -----------------------------------------------------------------------------
   List card and mini list (Vuexy's "rows with an avatar")
   -------------------------------------------------------------------------- */
.sm-list-card,
.sm-mini-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sm-list-card-row {
    display: flex;
    align-items: center;
    gap: var(--sm-s-3);
    margin: 0 calc(-1 * var(--sm-s-2));
    padding: 0.5625rem var(--sm-s-2);
    border-radius: var(--sm-r-sm);
    color: var(--sm-ink);
    text-decoration: none;
    transition: background-color var(--sm-fast) var(--sm-ease);
}

.sm-list-card-row:hover {
    background-color: rgba(var(--sm-shade-rgb), 0.04);
    color: var(--sm-ink);
}

.sm-list-card-label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--sm-ink);
}

.sm-list-card-value {
    font-size: var(--sm-text-lg);
    font-weight: 500;
    color: var(--sm-ink);
    font-variant-numeric: tabular-nums;
}

.sm-mini-list {
    display: grid;
    gap: var(--sm-s-3);
    margin-top: var(--sm-s-2);
}

.sm-mini-list li {
    display: flex;
    align-items: center;
    gap: var(--sm-s-3);
}

.sm-mini-list-label {
    flex: 1 1 auto;
    color: var(--sm-ink-2);
}

.sm-mini-list-value {
    font-weight: 500;
    color: var(--sm-ink);
}

/* A figure beside its tinted icon, several to a row (Vuexy's "earning report"). */
.sm-stat-inline {
    display: flex;
    align-items: center;
    gap: var(--sm-s-3);
    min-width: 0;
}

.sm-stat-inline-value {
    font-size: var(--sm-text-lg);
    font-weight: 500;
    color: var(--sm-ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.sm-icon-tile.sm-icon-tile--sm {
    width: 32px;
    height: 32px;
    font-size: 1rem;
}

/* A quiet heading over a band of the page. */
.sm-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sm-s-3);
    margin: var(--sm-s-7) 0 var(--sm-s-3);
}

.sm-section-title {
    font-size: var(--sm-text-sm);
    font-weight: 650;
    letter-spacing: var(--sm-track-label);
    text-transform: uppercase;
    color: var(--sm-ink-3);
    margin: 0;
}

/* A row of small counts — properties, members, staff — under the money. */
.sm-counts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: var(--sm-s-3);
}

.sm-count {
    display: flex;
    align-items: center;
    gap: var(--sm-s-3);
    padding: var(--sm-s-4);
    background-color: var(--sm-surface);
    border: 0;
    border-radius: var(--sm-r);
    box-shadow: var(--sm-shadow-2);
    color: var(--sm-ink);
    text-decoration: none;
    transition: border-color var(--sm-fast) var(--sm-ease),
                box-shadow var(--sm-fast) var(--sm-ease);
}

a.sm-count:hover {
    border-color: var(--sm-primary-border);
    box-shadow: var(--sm-shadow-2);
    text-decoration: none;
    color: var(--sm-ink);
}

.sm-count-figure {
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.sm-count-label {
    display: block;
    font-size: var(--sm-text-sm);
    color: var(--sm-ink-3);
    margin-top: 1px;
}

/* =============================================================================
   Label and value pairs
   ========================================================================== */
.sm-info-list {
    display: grid;
    gap: var(--sm-s-4) var(--sm-s-5);
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .sm-info-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm-info-list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sm-info-list--1 { grid-template-columns: minmax(0, 1fr); }

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

.sm-info-item { min-width: 0; }

.sm-info-item dd { margin: 0; }

/* =============================================================================
   Forms
   ========================================================================== */
.sm-form-section + .sm-form-section {
    margin-top: var(--sm-s-6);
    padding-top: var(--sm-s-6);
    border-top: 1px solid var(--sm-line);
}

.sm-form-section-head {
    margin-bottom: var(--sm-s-4);
}

.sm-form-section-title {
    font-size: var(--sm-text-lg);
    font-weight: 500;
    color: var(--sm-ink);
    margin: 0;
}

.sm-form-section-text {
    font-size: var(--sm-text-md);
    color: var(--sm-ink-2);
    margin: 0.25rem 0 0;
    max-width: 72ch;
}

.sm-field {
    margin-bottom: var(--sm-s-4);
}

.sm-field:last-child { margin-bottom: 0; }

/* Most fields are required, so the marker names the exception rather than the rule —
   a form of asterisks tells the reader nothing. */
.sm-field-optional {
    margin-left: var(--sm-s-2);
    font-size: var(--sm-text-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--sm-ink-3);
}

.sm-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sm-s-3);
    padding: var(--sm-s-5) var(--sm-s-6);
    border-top: 1px solid var(--sm-line);
    background-color: var(--sm-surface);
    border-bottom-left-radius: var(--sm-r);
    border-bottom-right-radius: var(--sm-r);
}

.sm-form-actions-note {
    font-size: var(--sm-text-sm);
    color: var(--sm-ink-3);
    min-width: 0;
}

.sm-form-actions-buttons {
    display: flex;
    align-items: center;
    gap: var(--sm-s-2);
    margin-left: auto;
}

/* On a phone the primary comes first and both fill the width: the bottom-right
   corner is the hardest place on the screen to reach one-handed. */
@media (max-width: 575.98px) {
    .sm-form-actions-buttons {
        width: 100%;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .sm-form-actions-buttons .btn { width: 100%; }
}

/* =============================================================================
   A bill or a receipt, as a document
   ========================================================================== */
.sm-doc {
    position: relative;
    overflow: hidden;
    background-color: var(--sm-surface);
    border: 0;
    border-radius: var(--sm-r);
    box-shadow: var(--sm-shadow-2);
}

.sm-doc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sm-s-4);
    padding: var(--sm-s-6);
    border-bottom: 2px solid var(--sm-ink);
}

.sm-doc-society {
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--sm-ink);
    line-height: 1.25;
}

.sm-doc-address {
    font-size: var(--sm-text-sm);
    color: var(--sm-ink-2);
    margin: 0.25rem 0 0;
    font-style: normal;
    max-width: 44ch;
}

.sm-doc-ident {
    text-align: right;
    min-width: 0;
}

/* With no issuer beside it, the document's identity leads the letterhead. */
.sm-doc-ident--lead {
    text-align: left;
}

/* A line that no longer counts — a reversed payment, an allocation undone. */
.sm-row-void {
    color: var(--sm-ink-3);
}

.sm-row-void .sm-money {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.sm-doc-kind {
    font-size: var(--sm-text-sm);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sm-ink-3);
}

.sm-doc-number {
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--sm-ink);
    line-height: 1.2;
}

.sm-doc-meta {
    font-size: var(--sm-text-sm);
    color: var(--sm-ink-3);
    margin-top: 2px;
}

.sm-doc-body {
    padding: var(--sm-s-6);
}

/* The stamp. Decorative: whatever it says is also written in words in the body. */
.sm-doc-stamp {
    position: absolute;
    top: 108px;
    right: 30%;
    transform: rotate(-12deg);
    padding: 4px 20px;
    font-size: var(--sm-text-lg);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 2px solid currentColor;
    border-radius: var(--sm-r-xs);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.sm-doc-stamp--paid { color: var(--sm-paid); }
.sm-doc-stamp--over { color: var(--sm-over); }
.sm-doc-stamp--muted { color: var(--sm-ink-3); }

/* Decorative, and the status is written on the page: on a phone it would only cover text. */
@media (max-width: 575.98px) {
    .sm-doc-stamp { display: none; }
}

/* The amount a receipt is for. */
.sm-doc-amount {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sm-s-3);
    padding: var(--sm-s-5);
    margin: var(--sm-s-5) 0;
    background-color: var(--sm-paid-tint);
    border: 1px solid var(--sm-paid-border);
    border-radius: var(--sm-r-sm);
}

.sm-doc-amount--void {
    background-color: var(--sm-neutral-tint);
    border-color: var(--sm-neutral-border);
}

.sm-doc-amount-label {
    font-size: var(--sm-text-sm);
    font-weight: 600;
    letter-spacing: var(--sm-track-label);
    text-transform: uppercase;
    color: var(--sm-ink-2);
}

/* A total, ruled off from what it adds up. */
.sm-doc-totals {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--sm-s-5);
}

.sm-doc-totals-inner {
    width: 100%;
    max-width: 340px;
}

.sm-doc-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sm-s-4);
    padding: var(--sm-s-2) 0;
    font-size: var(--sm-text);
}

.sm-doc-total-row--rule {
    border-top: 1px solid var(--sm-line);
    margin-top: var(--sm-s-1);
    padding-top: var(--sm-s-3);
}

.sm-doc-total-row--final {
    border-top: 2px solid var(--sm-ink);
    margin-top: var(--sm-s-2);
    padding-top: var(--sm-s-3);
    font-size: var(--sm-text-lg);
    font-weight: 650;
}

.sm-doc-total-label { color: var(--sm-ink-2); }

.sm-doc-total-row--final .sm-doc-total-label { color: var(--sm-ink); }

/* A head on a bill: its code and which rule version priced it. */
.sm-head-code {
    display: inline-flex;
    align-items: center;
    gap: var(--sm-s-2);
    font-size: var(--sm-text-xs);
    color: var(--sm-ink-3);
    margin-top: 2px;
}

/* =============================================================================
   The pages reached before signing in
   ========================================================================== */
/* A picture of the product on a light panel, and a narrow white column for the form. */
.auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

@media (min-width: 992px) {
    .auth-grid {
        grid-template-columns: minmax(0, 1fr) minmax(400px, 32%);
    }
}

/* The picture's side (AuthCover). Below 992px it goes entirely: on a phone the form
   is the page, and a picture above it would push the fields under the fold. */
.auth-cover {
    display: none;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: var(--sm-s-9) var(--sm-s-8);
    background-color: var(--sm-page);
}

@media (min-width: 992px) {
    .auth-cover { display: flex; }
}

.auth-cover-mark {
    position: absolute;
    top: var(--sm-s-7);
    left: var(--sm-s-7);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--sm-s-3);
}

.auth-cover-name {
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--sm-ink);
}

/* The floor the picture stands on: one curve in SVG, stretched to the panel. */
.auth-cover-floor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40%;
    fill: #efeef3;
}

/* The form side. */
.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sm-s-9) var(--sm-s-8);
    background-color: var(--sm-surface);
}

@media (max-width: 575.98px) {
    .auth-form-side {
        padding: var(--sm-s-7) var(--sm-s-5);
    }
}

.auth-form {
    width: 100%;
    max-width: 400px;
}

/* A line under the sign-in button on what the account protects. */
.auth-trust {
    display: flex;
    align-items: flex-start;
    gap: var(--sm-s-2);
    margin: var(--sm-s-4) 0 0;
    font-size: var(--sm-text-sm);
    line-height: 1.45;
    color: var(--sm-ink-3);
}

.auth-trust .sm-icon {
    flex: none;
    margin-top: 1px;
    color: var(--sm-paid);
}

/* The pictures (ProductShowcase, SecurityShowcase): a scene in SVG, cards in HTML
   floating over it. The width follows the screen's height as well as the panel's
   width, so the picture never pushes the page past one screen. */
.sm-showcase {
    position: relative;
    width: min(84%, 640px, calc((100dvh - 180px) * 1.625));
    aspect-ratio: 520 / 320;
    margin: 0;
}

.sm-showcase-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sm-showcase-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--sm-s-3);
    padding: 12px 14px;
    border-radius: var(--sm-r);
    border: 1px solid var(--sm-line);
    background-color: var(--sm-surface);
    color: var(--sm-ink);
    box-shadow: var(--sm-shadow-3);
    animation: sm-float 6s var(--sm-ease) infinite;
}

/* Where a card sits over the scene. Each place floats on its own beat. */
.sm-showcase-card--top-left {
    left: -6%;
    top: 4%;
}

.sm-showcase-card--right {
    right: -8%;
    top: 40%;
    animation-delay: -2s;
}

.sm-showcase-card--bottom-left {
    left: -2%;
    bottom: 4%;
    animation-delay: -4s;
}

/* A card that leads with a figure rather than an icon. */
.sm-showcase-card--stat {
    display: block;
    min-width: 36%;
}

.sm-showcase-label {
    font-size: var(--sm-text-xs);
    font-weight: 600;
    letter-spacing: var(--sm-track-label);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sm-ink-3);
}

.sm-showcase-value {
    margin-top: 2px;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.sm-showcase-title {
    font-size: var(--sm-text-md);
    font-weight: 600;
    white-space: nowrap;
}

.sm-showcase-meta {
    font-size: var(--sm-text-xs);
    color: var(--sm-ink-3);
    white-space: nowrap;
}

.sm-showcase-bar {
    height: 6px;
    margin-top: var(--sm-s-2);
    border-radius: var(--sm-r-pill);
    background-color: var(--sm-neutral-tint);
    overflow: hidden;
}

.sm-showcase-bar span {
    display: block;
    width: 92%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #80bbbe, var(--sm-primary));
}

.sm-showcase-tile {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--sm-r-xs);
    background-color: var(--sm-primary-tint);
    color: var(--sm-primary);
}

.sm-showcase-tile--paid {
    background-color: var(--sm-paid-tint);
    color: var(--sm-paid);
}

.sm-showcase-tile--due {
    background-color: var(--sm-due-tint);
    color: var(--sm-due);
}

.sm-showcase-pill {
    position: absolute;
    right: 2%;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--sm-r-pill);
    border: 1px solid var(--sm-line);
    background-color: var(--sm-surface);
    box-shadow: var(--sm-shadow-2);
    color: var(--sm-ink-2);
    font-size: var(--sm-text-sm);
    white-space: nowrap;
    animation: sm-float 6s var(--sm-ease) infinite;
    animation-delay: -3s;
}

.sm-showcase-pill .sm-icon,
.sm-showcase-pill strong {
    color: var(--sm-paid);
}

@keyframes sm-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.auth-form-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--sm-r-sm);
    background: linear-gradient(135deg, #80bbbe 0%, var(--sm-primary) 100%);
    color: #fff;
    box-shadow: var(--sm-shadow-primary);
    margin-bottom: var(--sm-s-5);
}

/* Shown only where the picture is not (below 992px), so the product is still named. */
.auth-form-mark-name {
    display: block;
    font-size: var(--sm-text-sm);
    font-weight: 600;
    letter-spacing: var(--sm-track-label);
    text-transform: uppercase;
    color: var(--sm-ink-3);
    margin-bottom: var(--sm-s-2);
}

@media (min-width: 992px) {
    .auth-form-mark,
    .auth-form-mark-name { display: none; }
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.022em;
    margin: 0;
}

.auth-lede {
    font-size: var(--sm-text);
    color: var(--sm-ink-2);
    margin: var(--sm-s-2) 0 var(--sm-s-6);
}

.auth-vendor {
    margin-top: var(--sm-s-7);
    padding-top: var(--sm-s-4);
    border-top: 1px solid var(--sm-line);
    font-size: var(--sm-text-sm);
    color: var(--sm-ink-3);
    text-align: center;
}

/* A password field with the control that reveals it. */
.auth-reveal {
    position: relative;
}

.auth-reveal .form-control {
    padding-right: 2.75rem;
}

.auth-reveal-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--sm-r-xs);
    background: none;
    color: var(--sm-ink-3);
}

.auth-reveal-btn:hover {
    background-color: var(--sm-neutral-tint);
    color: var(--sm-ink);
}

/* Choosing between societies: a list of real targets, not a dropdown. */
.auth-choice {
    display: flex;
    align-items: center;
    gap: var(--sm-s-3);
    width: 100%;
    padding: var(--sm-s-3) var(--sm-s-4);
    margin-bottom: var(--sm-s-2);
    text-align: left;
    background-color: var(--sm-surface);
    border: 1px solid var(--sm-line-solid);
    border-radius: var(--sm-r-sm);
    transition: border-color var(--sm-fast) var(--sm-ease),
                background-color var(--sm-fast) var(--sm-ease);
}

.auth-choice:hover {
    border-color: var(--sm-primary-border);
    background-color: var(--sm-primary-tint);
}

.auth-choice.is-chosen {
    border-color: var(--sm-primary);
    background-color: var(--sm-primary-tint);
    box-shadow: 0 0 0 1px var(--sm-primary);
}

.auth-choice-name {
    display: block;
    font-weight: 600;
    color: var(--sm-ink);
}

.auth-choice-role {
    display: block;
    font-size: var(--sm-text-sm);
    color: var(--sm-ink-3);
}

/* =============================================================================
   Profile card (Phase 21E) — Vuexy's user view: a large initials square, the
   name, its status, a stat or two, then the details as label: value lines, and
   the record's actions centred at the foot.
   ========================================================================== */
.sm-profile-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sm-s-2);
    padding-top: var(--sm-s-4);
    text-align: center;
}

.sm-profile-name {
    margin-top: var(--sm-s-2);
    font-size: var(--sm-text-xl);
    font-weight: 500;
    color: var(--sm-ink);
    overflow-wrap: anywhere;
}

.sm-profile-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sm-s-6);
    margin: var(--sm-s-6) 0 var(--sm-s-2);
}

.sm-profile-stat {
    display: flex;
    align-items: center;
    gap: var(--sm-s-3);
}

.sm-profile-stat-value {
    display: block;
    font-size: var(--sm-text-lg);
    font-weight: 500;
    color: var(--sm-ink);
    line-height: 1.2;
}

.sm-profile-stat-label {
    display: block;
    font-size: var(--sm-text-sm);
    color: var(--sm-ink-3);
}

.sm-profile-section {
    margin: var(--sm-s-6) 0 var(--sm-s-3);
    padding-bottom: var(--sm-s-2);
    border-bottom: 1px solid var(--sm-line);
    font-size: var(--sm-text-sm);
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--sm-ink-3);
}

.sm-profile-details {
    display: grid;
    gap: var(--sm-s-2);
    margin: 0;
}

.sm-profile-details > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sm-s-2);
}

.sm-profile-details dt {
    font-weight: 500;
    color: var(--sm-ink);
}

.sm-profile-details dd {
    margin: 0;
    color: var(--sm-ink-2);
    overflow-wrap: anywhere;
}

.sm-profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sm-s-2);
    margin-top: var(--sm-s-6);
}

/* =============================================================================
   Document layout (Phase 21E) — the actions card beside a bill or a receipt.
   ========================================================================== */
.sm-doc-actions .btn {
    width: 100%;
}

@media (min-width: 1200px) {
    .sm-doc-actions {
        position: sticky;
        top: calc(var(--sm-topbar-gap) + var(--sm-topbar-h) + var(--sm-s-4));
    }
}

/* =============================================================================
   Timeline (Phase 21E) — Vuexy's activity timeline: a coloured point on a rule,
   what happened, when, and who.
   ========================================================================== */
.sm-timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.75rem;
}

.sm-timeline::before {
    content: "";
    position: absolute;
    left: 0.4375rem;
    top: 0.5rem;
    bottom: 0.5rem;
    border-left: 1px dashed var(--sm-line-strong);
}

.sm-timeline-item {
    position: relative;
    padding-bottom: var(--sm-s-6);
}

.sm-timeline-item:last-child {
    padding-bottom: 0;
}

.sm-timeline-point {
    position: absolute;
    left: -1.75rem;
    top: 0.3rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background-color: var(--sm-primary);
    box-shadow: 0 0 0 4px var(--sm-primary-tint);
}

.sm-timeline-point--paid { background-color: var(--sm-success); box-shadow: 0 0 0 4px var(--sm-paid-tint); }
.sm-timeline-point--due { background-color: var(--sm-warning); box-shadow: 0 0 0 4px var(--sm-due-tint); }
.sm-timeline-point--over { background-color: var(--sm-danger); box-shadow: 0 0 0 4px var(--sm-over-tint); }
.sm-timeline-point--credit { background-color: var(--sm-info); box-shadow: 0 0 0 4px var(--sm-credit-tint); }
.sm-timeline-point--neutral { background-color: var(--sm-secondary); box-shadow: 0 0 0 4px #ebebed; }

.sm-timeline-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sm-s-1) var(--sm-s-3);
}

.sm-timeline-title {
    font-weight: 500;
    color: var(--sm-ink);
}

.sm-timeline-when {
    font-size: var(--sm-text-sm);
    color: var(--sm-ink-3);
    white-space: nowrap;
}

.sm-timeline-body {
    margin-top: var(--sm-s-1);
    color: var(--sm-ink-2);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* A staff member's photo in the profile card, in the initials' place and shape. */
.sm-profile-photo {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--sm-r-sm);
}

/* =============================================================================
   Account pills (Phase 21F)
   ========================================================================== */
.sm-account-nav {
    margin-bottom: var(--sm-s-6);
}

.sm-account-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sm-s-2);
}

/* A button in the brand hero keeps its own width; the column would stretch it. */
.sm-hero--brand > .sm-hero-body > .btn {
    align-self: flex-start;
}

/* -----------------------------------------------------------------------------
   Website editor (marketing phase W3)
   -------------------------------------------------------------------------- */
.sm-website-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--sm-radius, 6px);
    border: 1px solid var(--sm-border-color, #e6e6e8);
    background: #f8f7fa;
    flex: none;
}

.sm-website-image {
    aspect-ratio: 16 / 10;
    object-fit: contain;
    background: #f8f7fa;
}