/* =============================================================================
   Siteline — theme
   -----------------------------------------------------------------------------
   Bootstrap ships as a compiled stylesheet here (no Sass build), so the palette
   is applied by overriding Bootstrap's own custom properties rather than by
   recompiling its variables. Two layers do that:

     1. `:root` — the design tokens, then Bootstrap's global variables mapped
        onto them.
     2. Component blocks — Bootstrap hard-codes hex into `.btn-primary`,
        `.form-control:focus` and friends rather than reading `--bs-primary`,
        so those few places are re-pointed at the tokens by hand.

   Colour carries meaning in this product: the sentiment index runs hostile to
   welcoming and the grid score runs distant to close. Those scales keep their
   red/amber/teal/green vocabulary. Everything else — chrome, structure,
   emphasis — is blue and green, and nothing borrows a signal colour for
   decoration.
   ============================================================================= */

:root {
    /* -- Harbour blue: the product's primary voice ------------------------- */
    --sl-blue-950: #082230;
    --sl-blue-900: #0c2b3a;
    --sl-blue-800: #123c50;
    --sl-blue-700: #175168;
    --sl-blue-600: #1a6684;
    --sl-blue-500: #23809f;
    --sl-blue-400: #4f9db6;
    --sl-blue-300: #8dbdd0;
    --sl-blue-200: #c3dce6;
    --sl-blue-100: #e2eef3;
    --sl-blue-50: #f0f6f9;

    /* -- Pine green: agreement, capacity, a reading that came back well ---- */
    --sl-green-800: #12553f;
    --sl-green-700: #1a7355;
    --sl-green-600: #238c68;
    --sl-green-500: #35a37d;
    --sl-green-200: #bfe1d2;
    --sl-green-100: #dcefe6;
    --sl-green-50: #eff8f3;

    /* -- Slate: everything that is not saying anything --------------------- */
    --sl-slate-900: #16242c;
    --sl-slate-800: #22333c;
    --sl-slate-700: #33454f;
    --sl-slate-600: #54666f;
    --sl-slate-500: #74858e;
    --sl-slate-400: #9aa9b1;
    --sl-slate-300: #c4d0d6;
    --sl-slate-200: #dde5e9;
    --sl-slate-100: #eaeff2;
    --sl-slate-50: #f5f8fa;

    /* -- Signal: reserved for the scales and for status -------------------- */
    --sl-teal-700: #0b6875;
    --sl-teal-600: #0f7f8c;
    --sl-teal-100: #dcf0f2;
    --sl-amber-700: #8a5a08;
    --sl-amber-500: #d99b34;
    --sl-amber-100: #fbf0dc;
    --sl-red-700: #93202a;
    --sl-red-600: #b4232f;
    --sl-red-100: #f9e3e4;

    /* -- Surfaces, lines and lift ------------------------------------------ */
    --sl-surface: #ffffff;
    --sl-surface-sunken: var(--sl-slate-50);
    --sl-surface-raised: #ffffff;
    --sl-line: var(--sl-slate-200);
    --sl-line-strong: var(--sl-slate-300);
    --sl-shadow-sm: 0 1px 2px rgb(16 40 52 / 0.06), 0 1px 3px rgb(16 40 52 / 0.05);
    --sl-shadow-md: 0 1px 2px rgb(16 40 52 / 0.05), 0 6px 16px -6px rgb(16 40 52 / 0.14);
    --sl-shadow-header: 0 6px 20px -12px rgb(8 34 48 / 0.55);

    /* -- Rhythm ------------------------------------------------------------ */
    --sl-radius-sm: 0.375rem;
    --sl-radius: 0.625rem;
    --sl-radius-lg: 0.875rem;

    /* -- Bootstrap: typography --------------------------------------------- */
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--sl-slate-900);
    --bs-body-color-rgb: 22, 36, 44;
    /* Bootstrap keys every raised surface — table cells, list groups, inputs, cards, dropdowns —
       off --bs-body-bg, so this stays the surface colour and the sunken page colour is painted on
       `body` below. Pointing this at the sunken grey instead tints all of them. */
    --bs-body-bg: var(--sl-surface);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-heading-color: var(--sl-blue-900);

    --bs-emphasis-color: var(--sl-slate-900);
    --bs-emphasis-color-rgb: 22, 36, 44;
    --bs-secondary-color: var(--sl-slate-600);
    --bs-secondary-color-rgb: 84, 102, 111;
    --bs-secondary-bg: var(--sl-slate-100);
    --bs-secondary-bg-rgb: 234, 239, 242;
    --bs-tertiary-color: var(--sl-slate-500);
    --bs-tertiary-color-rgb: 116, 133, 142;
    --bs-tertiary-bg: var(--sl-slate-50);
    --bs-tertiary-bg-rgb: 245, 248, 250;

    /* -- Bootstrap: palette ------------------------------------------------ */
    --bs-primary: var(--sl-blue-600);
    --bs-primary-rgb: 26, 102, 132;
    --bs-secondary: var(--sl-slate-600);
    --bs-secondary-rgb: 84, 102, 111;
    --bs-success: var(--sl-green-700);
    --bs-success-rgb: 26, 115, 85;
    --bs-info: var(--sl-teal-600);
    --bs-info-rgb: 15, 127, 140;
    --bs-warning: var(--sl-amber-500);
    --bs-warning-rgb: 217, 155, 52;
    --bs-danger: var(--sl-red-600);
    --bs-danger-rgb: 180, 35, 47;
    --bs-light: var(--sl-slate-50);
    --bs-light-rgb: 245, 248, 250;
    --bs-dark: var(--sl-blue-900);
    --bs-dark-rgb: 12, 43, 58;

    --bs-primary-text-emphasis: var(--sl-blue-800);
    --bs-secondary-text-emphasis: var(--sl-slate-700);
    --bs-success-text-emphasis: var(--sl-green-800);
    --bs-info-text-emphasis: var(--sl-teal-700);
    --bs-warning-text-emphasis: var(--sl-amber-700);
    --bs-danger-text-emphasis: var(--sl-red-700);
    --bs-light-text-emphasis: var(--sl-slate-700);
    --bs-dark-text-emphasis: var(--sl-slate-700);

    --bs-primary-bg-subtle: var(--sl-blue-100);
    --bs-secondary-bg-subtle: var(--sl-slate-100);
    --bs-success-bg-subtle: var(--sl-green-100);
    --bs-info-bg-subtle: var(--sl-teal-100);
    --bs-warning-bg-subtle: var(--sl-amber-100);
    --bs-danger-bg-subtle: var(--sl-red-100);
    --bs-light-bg-subtle: var(--sl-slate-50);
    --bs-dark-bg-subtle: var(--sl-slate-300);

    --bs-primary-border-subtle: var(--sl-blue-200);
    --bs-secondary-border-subtle: var(--sl-slate-300);
    --bs-success-border-subtle: var(--sl-green-200);
    --bs-info-border-subtle: #b3dfe4;
    --bs-warning-border-subtle: #efd9ae;
    --bs-danger-border-subtle: #edc2c5;
    --bs-light-border-subtle: var(--sl-slate-200);
    --bs-dark-border-subtle: var(--sl-slate-400);

    /* -- Bootstrap: links, lines, radii, focus ----------------------------- */
    --bs-link-color: var(--sl-blue-600);
    --bs-link-color-rgb: 26, 102, 132;
    --bs-link-hover-color: var(--sl-blue-800);
    --bs-link-hover-color-rgb: 18, 60, 80;
    --bs-code-color: var(--sl-blue-700);

    --bs-border-color: var(--sl-line);
    --bs-border-color-translucent: rgb(16 40 52 / 0.12);

    --bs-border-radius-sm: var(--sl-radius-sm);
    --bs-border-radius: var(--sl-radius);
    --bs-border-radius-lg: var(--sl-radius-lg);
    --bs-border-radius-xl: 1.125rem;

    --bs-focus-ring-width: 0.1875rem;
    --bs-focus-ring-opacity: 0.3;
    --bs-focus-ring-color: rgb(26 102 132 / 0.3);

    --bs-form-invalid-color: var(--sl-red-600);
    --bs-form-invalid-border-color: var(--sl-red-600);
    --bs-form-valid-color: var(--sl-green-700);
    --bs-form-valid-border-color: var(--sl-green-600);
}

/* =============================================================================
   Base
   ============================================================================= */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--sl-surface-sunken);
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sl-blue-900);
    font-weight: 600;
    letter-spacing: -0.011em;
}

h1, .h1 {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
    letter-spacing: -0.02em;
}

h2, .h2 {
    font-size: 1.375rem;
}

h1:focus,
h1:focus-visible {
    outline: none;
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

/* Numbers that sit in a column, or that change in place, should not jitter. */
table,
.siteline-index-value,
.siteline-grid-score-value,
.sl-tabular {
    font-variant-numeric: tabular-nums;
}

::selection {
    background: var(--sl-blue-200);
}

/* =============================================================================
   Bootstrap components Bootstrap hard-codes rather than deriving
   ============================================================================= */

.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.4375rem;
    --bs-btn-border-radius: var(--sl-radius-sm);
    transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sl-blue-600);
    --bs-btn-border-color: var(--sl-blue-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sl-blue-700);
    --bs-btn-hover-border-color: var(--sl-blue-700);
    --bs-btn-focus-shadow-rgb: 26, 102, 132;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sl-blue-800);
    --bs-btn-active-border-color: var(--sl-blue-800);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--sl-blue-400);
    --bs-btn-disabled-border-color: var(--sl-blue-400);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sl-green-700);
    --bs-btn-border-color: var(--sl-green-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sl-green-800);
    --bs-btn-hover-border-color: var(--sl-green-800);
    --bs-btn-focus-shadow-rgb: 26, 115, 85;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sl-green-800);
    --bs-btn-active-border-color: var(--sl-green-800);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--sl-green-500);
    --bs-btn-disabled-border-color: var(--sl-green-500);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sl-red-600);
    --bs-btn-border-color: var(--sl-red-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sl-red-700);
    --bs-btn-hover-border-color: var(--sl-red-700);
    --bs-btn-focus-shadow-rgb: 180, 35, 47;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sl-red-700);
    --bs-btn-active-border-color: var(--sl-red-700);
}

.btn-outline-primary {
    --bs-btn-color: var(--sl-blue-700);
    --bs-btn-border-color: var(--sl-blue-300);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sl-blue-600);
    --bs-btn-hover-border-color: var(--sl-blue-600);
    --bs-btn-focus-shadow-rgb: 26, 102, 132;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sl-blue-700);
    --bs-btn-active-border-color: var(--sl-blue-700);
    --bs-btn-disabled-color: var(--sl-blue-400);
    --bs-btn-disabled-border-color: var(--sl-blue-200);
}

/* The page's quiet action. Bootstrap's outline-secondary is a grey ghost;
   Siteline's reads as a real, if subordinate, control. */
.btn-outline-secondary {
    --bs-btn-color: var(--sl-slate-700);
    --bs-btn-bg: var(--sl-surface);
    --bs-btn-border-color: var(--sl-line-strong);
    --bs-btn-hover-color: var(--sl-blue-800);
    --bs-btn-hover-bg: var(--sl-blue-50);
    --bs-btn-hover-border-color: var(--sl-blue-300);
    --bs-btn-focus-shadow-rgb: 26, 102, 132;
    --bs-btn-active-color: var(--sl-blue-800);
    --bs-btn-active-bg: var(--sl-blue-100);
    --bs-btn-active-border-color: var(--sl-blue-300);
    --bs-btn-disabled-color: var(--sl-slate-400);
    --bs-btn-disabled-border-color: var(--sl-line);
}

.btn-link {
    --bs-btn-color: var(--sl-blue-600);
    --bs-btn-hover-color: var(--sl-blue-800);
    --bs-btn-active-color: var(--sl-blue-800);
    --bs-btn-font-weight: 500;
}

.btn:focus, .btn:active:focus, .btn:focus-visible,
.btn-link.nav-link:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1875rem rgb(26 102 132 / 0.25);
}

/* Bootstrap paints form focus with a hard-coded #86b7fe. */
.form-control:focus,
.form-select:focus {
    border-color: var(--sl-blue-400);
    box-shadow: 0 0 0 0.1875rem rgb(26 102 132 / 0.18);
}

.form-control,
.form-select {
    border-color: var(--sl-line-strong);
    border-radius: var(--sl-radius-sm);
    color: var(--sl-slate-900);
}

.form-control::placeholder {
    color: var(--sl-slate-400);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--sl-slate-50);
    color: var(--sl-slate-400);
}

.form-label {
    color: var(--sl-slate-700);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0.3125rem;
}

.form-text {
    color: var(--sl-slate-500);
    font-size: 0.8125rem;
}

.form-check-input {
    border-color: var(--sl-slate-400);
}

.form-check-input:checked {
    background-color: var(--sl-blue-600);
    border-color: var(--sl-blue-600);
}

.form-check-input:focus {
    border-color: var(--sl-blue-400);
}

/* `text-warning` at badge-background strength is unreadable as text; the
   emphasis tone is the readable member of the pair. */
.text-warning {
    color: var(--sl-amber-700) !important;
}

.badge {
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-padding-y: 0.28em;
    --bs-badge-border-radius: 0.375rem;
    letter-spacing: 0.015em;
}

.text-bg-light {
    background-color: var(--sl-slate-100) !important;
    color: var(--sl-slate-700) !important;
}

.text-bg-warning {
    background-color: var(--sl-amber-500) !important;
    color: #2a1c04 !important;
}

.alert {
    --bs-alert-border-radius: var(--sl-radius);
    border-width: 1px;
    padding: 0.9375rem 1.125rem;
}

.alert-secondary {
    --bs-alert-color: var(--sl-slate-700);
    --bs-alert-bg: var(--sl-slate-50);
    --bs-alert-border-color: var(--sl-line);
}

.list-group {
    --bs-list-group-border-color: var(--sl-line);
    --bs-list-group-border-radius: var(--sl-radius);
    --bs-list-group-action-hover-bg: var(--sl-blue-50);
    --bs-list-group-action-hover-color: var(--sl-blue-800);
    --bs-list-group-active-bg: var(--sl-blue-600);
    --bs-list-group-active-border-color: var(--sl-blue-600);
}

.table {
    --bs-table-color: var(--sl-slate-800);
    --bs-table-border-color: var(--sl-line);
    --bs-table-hover-bg: var(--sl-blue-50);
    --bs-table-hover-color: var(--sl-blue-900);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: 0.6875rem 0.875rem;
}

.table > thead th {
    background-color: var(--sl-slate-50);
    border-bottom-color: var(--sl-line-strong);
    color: var(--sl-slate-600);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table > thead th .btn-link {
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.table tbody tr[role="button"] {
    cursor: pointer;
}

.table-warning {
    --bs-table-bg: var(--sl-amber-100);
    --bs-table-color: var(--sl-slate-900);
    --bs-table-border-color: #eddcb9;
    --bs-table-hover-bg: #f7e8cd;
    --bs-table-hover-color: var(--sl-slate-900);
}

.card {
    --bs-card-border-color: var(--sl-line);
    --bs-card-border-radius: var(--sl-radius-lg);
    --bs-card-inner-border-radius: calc(var(--sl-radius-lg) - 1px);
    --bs-card-bg: var(--sl-surface-raised);
    --bs-card-spacer-x: 1.375rem;
    --bs-card-spacer-y: 1.25rem;
    box-shadow: var(--sl-shadow-sm);
}

.spinner-border {
    border-width: 0.15em;
}

.validation-message,
.invalid-feedback {
    color: var(--sl-red-600);
    font-size: 0.8125rem;
    margin-top: 0.3125rem;
}

.invalid {
    outline: 1px solid var(--sl-red-600);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--sl-green-600);
}

/* =============================================================================
   Application shell
   ============================================================================= */

.sl-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sl-main {
    flex: 1 0 auto;
    padding: 1.75rem 0 3rem;
}

@media (min-width: 992px) {
    .sl-main {
        padding: 2.25rem 0 4rem;
    }
}

.sl-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1320px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    width: 100%;
}

@media (min-width: 992px) {
    .sl-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* -- Header ---------------------------------------------------------------- */

.sl-header {
    background: linear-gradient(100deg, var(--sl-blue-900) 0%, var(--sl-blue-800) 58%, var(--sl-blue-700) 100%);
    box-shadow: var(--sl-shadow-header);
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* A thin green underline: the one place the second brand colour is structural. */
.sl-header::after {
    background: linear-gradient(90deg, var(--sl-green-600), var(--sl-blue-500) 55%, rgb(35 128 159 / 0));
    content: "";
    display: block;
    height: 2px;
}

.sl-footer {
    background-color: var(--sl-surface);
    border-top: 1px solid var(--sl-line);
    color: var(--sl-slate-500);
    flex-shrink: 0;
    font-size: 0.8125rem;
    padding: 1.25rem 0;
}

.sl-footer-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    justify-content: space-between;
}

.sl-footer p {
    margin: 0;
}

.sl-footer-mark {
    color: var(--sl-slate-700);
    font-weight: 600;
}

/* =============================================================================
   Page furniture
   ============================================================================= */

.sl-page-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.sl-page-header-text {
    max-width: 64ch;
    min-width: 0;
}

.sl-eyebrow {
    color: var(--sl-blue-500);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.375rem;
    text-transform: uppercase;
}

.sl-page-title {
    margin-bottom: 0.375rem;
}

.sl-page-lead {
    color: var(--sl-slate-600);
    font-size: 1rem;
    margin-bottom: 0;
}

.sl-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

/* -- Panel: the standard content container --------------------------------- */

.sl-panel {
    background-color: var(--sl-surface-raised);
    border: 1px solid var(--sl-line);
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow-sm);
    overflow: hidden;
}

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

.sl-panel-head-text {
    min-width: 0;
}

.sl-panel-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sl-panel-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin: 0;
}

.sl-panel-note {
    color: var(--sl-slate-600);
    font-size: 0.8125rem;
    margin: 0.3125rem 0 0;
}

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

.sl-panel-body {
    padding: 1.375rem;
}

.sl-panel-body > :last-child {
    margin-bottom: 0;
}

/* Tables and list groups reach the panel's edges instead of floating inside it. */
.sl-panel-body--flush {
    padding: 0;
}

.sl-panel-body--flush .table > :not(caption) > * > *:first-child {
    padding-left: 1.375rem;
}

.sl-panel-body--flush .table > :not(caption) > * > *:last-child {
    padding-right: 1.375rem;
}

.sl-panel-body--flush .table > thead th {
    background-color: transparent;
}

.sl-panel-body--flush .list-group {
    --bs-list-group-border-radius: 0;
}

.sl-panel-body--flush .list-group-item {
    border-left: 0;
    border-right: 0;
}

.sl-panel-body--flush .list-group-item:first-child {
    border-top: 0;
}

.sl-panel-body--flush .list-group-item:last-child {
    border-bottom: 0;
}

/* Padding back, for the one block inside a flush panel that is not a table. */
.sl-panel-inset {
    padding: 1.375rem;
}

/* A search box docked in a panel head. */
.sl-filter {
    min-width: 15rem;
}

.sl-panel-foot {
    background-color: var(--sl-slate-50);
    border-top: 1px solid var(--sl-line);
    color: var(--sl-slate-600);
    font-size: 0.8125rem;
    padding: 0.75rem 1.375rem;
}

.sl-panel-foot p:last-child {
    margin-bottom: 0;
}

/* A quiet full-width statement: an empty state, or a wait. */
.sl-empty {
    background-color: var(--sl-surface-raised);
    border: 1px dashed var(--sl-line-strong);
    border-radius: var(--sl-radius-lg);
    color: var(--sl-slate-600);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.sl-empty-title {
    color: var(--sl-blue-900);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.sl-empty p:last-child {
    margin-bottom: 0;
}

.sl-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* The standard gap between two stacked panels or sections. */
.sl-section-gap {
    margin-top: 1.5rem;
}

/* -- Numbered explainer ---------------------------------------------------- */

.sl-steps {
    counter-reset: sl-step;
    color: var(--sl-slate-600);
    font-size: 0.875rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sl-steps li {
    counter-increment: sl-step;
    padding-left: 2.125rem;
    position: relative;
}

.sl-steps li + li {
    border-top: 1px solid var(--sl-slate-100);
    margin-top: 0.875rem;
    padding-top: 0.875rem;
}

.sl-steps li::before {
    align-items: center;
    background: var(--sl-blue-100);
    border-radius: 50%;
    color: var(--sl-blue-700);
    content: counter(sl-step);
    display: flex;
    font-size: 0.6875rem;
    font-weight: 700;
    height: 1.5rem;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0.0625rem;
    width: 1.5rem;
}

.sl-steps li + li::before {
    top: 0.9375rem;
}

.sl-step-title {
    color: var(--sl-blue-900);
    display: block;
    font-weight: 600;
    margin-bottom: 0.125rem;
}

/* -- Definition lists ------------------------------------------------------ */

/* Columns touch, and the term carries the gutter as padding: a grid gap would break the row rules
   into two segments with a gap down the middle. */
.sl-facts {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(7rem, max-content) 1fr;
    margin: 0;
}

.sl-facts dt {
    color: var(--sl-slate-600);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.4375rem 1.5rem 0.4375rem 0;
}

.sl-facts dd {
    color: var(--sl-slate-900);
    margin: 0;
    padding: 0.4375rem 0;
}

.sl-facts dt + dd + dt,
.sl-facts dt + dd + dt + dd {
    border-top: 1px solid var(--sl-slate-100);
}

/* -- Small muted note ------------------------------------------------------ */

.sl-note {
    color: var(--sl-slate-600);
    font-size: 0.8125rem;
    margin-bottom: 0;
}

/* -- Prose ----------------------------------------------------------------- */

.sl-prose {
    max-width: 72ch;
}

.sl-prose p:last-child {
    margin-bottom: 0;
}

/* -- A source or layer name: data provenance, not a status ----------------- */

.sl-source {
    background: var(--sl-slate-100);
    border-radius: 0.3125rem;
    color: var(--sl-slate-600);
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.125rem 0.4375rem;
    white-space: nowrap;
}

/* -- A counted tally: source on the left, how many on the right ------------ */

.sl-tally {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sl-tally li {
    align-items: baseline;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.4375rem 0;
}

.sl-tally li + li {
    border-top: 1px solid var(--sl-slate-100);
}

.sl-tally-name {
    color: var(--sl-slate-900);
    font-weight: 600;
}

.sl-tally-count {
    color: var(--sl-slate-600);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* -- Caveats --------------------------------------------------------------- */

.sl-caveats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sl-caveats li {
    padding-left: 1rem;
    position: relative;
}

.sl-caveats li + li {
    margin-top: 0.75rem;
}

.sl-caveats li::before {
    color: currentColor;
    content: "";
    background: currentColor;
    border-radius: 50%;
    height: 0.3125rem;
    left: 0;
    opacity: 0.45;
    position: absolute;
    top: 0.625rem;
    width: 0.3125rem;
}

/* The screening caveats: a warning about how far the numbers below can be trusted, so amber, and
   a callout rather than a footnote. Closed, it is one line — the three caveats in summary — and
   opening it gives the §6 wording in full. */
.sl-caveat-notice {
    background: var(--sl-amber-100);
    border: 1px solid var(--bs-warning-border-subtle);
    border-left: 4px solid var(--sl-amber-500);
    border-radius: var(--sl-radius);
    color: var(--sl-amber-700);
    font-size: 0.875rem;
}

.sl-caveat-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.625rem;
    list-style: none;
    padding: 0.6875rem 1rem;
}

/* Two engines, two ways of drawing the marker this replaces. */
.sl-caveat-summary::-webkit-details-marker {
    display: none;
}

.sl-caveat-summary::marker {
    content: "";
}

.sl-caveat-summary:hover .sl-caveat-lead {
    text-decoration: underline;
    text-decoration-color: rgb(138 90 8 / 0.35);
}

/* On the summary rather than the details, and focus-visible rather than focus-within: a mouse
   click would otherwise leave the whole callout ringed until the reader clicked elsewhere. */
.sl-caveat-summary:focus-visible {
    border-radius: calc(var(--sl-radius) - 1px);
    outline: 2px solid var(--sl-amber-700);
    outline-offset: -2px;
}

.sl-caveat-icon {
    flex: 0 0 auto;
}

.sl-caveat-lead {
    flex: 1 1 auto;
    min-width: 0;
}

.sl-caveat-chevron {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    flex: 0 0 auto;
    height: 0.4375rem;
    margin-right: 0.1875rem;
    opacity: 0.65;
    transform: rotate(45deg) translate(-0.09375rem, -0.09375rem);
    transition: transform 0.15s ease-in-out;
    width: 0.4375rem;
}

.sl-caveat-notice[open] .sl-caveat-chevron {
    transform: rotate(-135deg) translate(-0.09375rem, -0.09375rem);
}

.sl-caveat-notice[open] .sl-caveat-summary {
    border-bottom: 1px solid var(--bs-warning-border-subtle);
}

.sl-caveat-notice > .sl-caveats {
    padding: 0.875rem 1.125rem 1rem 2.5rem;
}

/* =============================================================================
   Siteline instruments
   -----------------------------------------------------------------------------
   The sentiment index and the grid proximity score. These keep a signal palette
   because here the colour is the reading, not the decoration.
   ============================================================================= */

.siteline-index-value,
.siteline-grid-score-value {
    font-size: 2.875rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

/* In a table cell the instrument collapses to its reading. */
.siteline-index--compact .siteline-index-value {
    font-size: 1.375rem;
    font-weight: 650;
    line-height: 1.2;
}

.siteline-index--compact .siteline-index-caption {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.35;
}

.siteline-index--compact .sl-index-count {
    color: var(--sl-slate-500);
}

/* The superseded reading in the places table, matched to the compact instrument. */
.sl-index-compact {
    font-size: 1.375rem;
    font-weight: 650;
    line-height: 1.2;
}

/* Sort direction sits alongside the column name without moving it. */
.sl-sort {
    display: inline-block;
    color: var(--sl-blue-600);
    width: 0.75em;
}

.sl-col-index {
    min-width: 9rem;
}

/* A screening score in a table row: legible as a number, not as a badge of status. */
.sl-score-pill {
    background: var(--sl-blue-100);
    border-radius: 0.375rem;
    color: var(--sl-blue-800);
    display: inline-block;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    min-width: 3.25rem;
    padding: 0.1875rem 0.5rem;
    text-align: center;
}

.siteline-index-scale,
.siteline-grid-score-scale {
    position: relative;
    height: 0.875rem;
    margin: 0.75rem 0 0.375rem;
}

.siteline-index-track {
    position: absolute;
    inset: 0.25rem 0;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--sl-red-600) 0%,
        var(--sl-amber-500) 28%,
        var(--sl-slate-300) 50%,
        var(--sl-teal-600) 72%,
        var(--sl-green-600) 100%);
}

.siteline-grid-score-track {
    position: absolute;
    inset: 0.25rem 0;
    border-radius: 999px;
    background: linear-gradient(to right, var(--sl-slate-200), var(--sl-blue-400) 55%, var(--sl-blue-700));
}

.siteline-index-marker,
.siteline-grid-score-marker {
    position: absolute;
    top: 0;
    width: 3px;
    height: 100%;
    margin-left: -1.5px;
    background: var(--sl-slate-900);
    border-radius: 2px;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9);
}

.siteline-grid-score-interval-band {
    position: absolute;
    top: 0.125rem;
    bottom: 0.125rem;
    border-radius: 999px;
    background: rgb(26 102 132 / 0.2);
    border: 1px solid rgb(26 102 132 / 0.45);
}

.siteline-index-legend,
.siteline-grid-score-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--sl-slate-500);
}

.siteline-index-caption,
.siteline-grid-score-caption {
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-size: 0.8125rem;
    color: var(--sl-slate-600);
}

.siteline-grid-score-interval {
    margin-top: 0.25rem;
    font-size: 1rem;
    color: var(--sl-slate-600);
}

.siteline-grid-score-coverage {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--sl-slate-600);
}

/* -- Index history chart --------------------------------------------------- */

.siteline-chart svg {
    width: 100%;
    height: 170px;
    overflow: visible;
}

.siteline-chart-zero {
    stroke: var(--sl-slate-300);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.siteline-chart-line {
    fill: none;
    stroke: var(--sl-blue-600);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.siteline-chart-point {
    fill: var(--sl-blue-600);
    stroke: #fff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.siteline-chart-caption {
    font-size: 0.75rem;
    color: var(--sl-slate-500);
    margin-top: 0.5rem;
}

/* =============================================================================
   Stories
   ============================================================================= */

#stories summary,
#context-stories summary,
.siteline-rationale summary {
    cursor: pointer;
}

#stories .list-group-item,
#context-stories .list-group-item {
    padding: 0.9375rem 1.25rem;
    transition: background-color 0.12s ease-in-out;
}

#stories .list-group-item[open],
#context-stories .list-group-item[open] {
    background-color: var(--sl-blue-50);
}

#stories summary::marker,
#context-stories summary::marker {
    color: var(--sl-slate-400);
}

.sl-story-summary {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-left: 1.375rem;
    position: relative;
}

/* A flex <summary> loses its ::marker, so the affordance is drawn back on. */
.sl-story-summary::before {
    border-bottom: 2px solid var(--sl-slate-400);
    border-right: 2px solid var(--sl-slate-400);
    content: "";
    height: 0.4375rem;
    left: 0.1875rem;
    position: absolute;
    top: 0.4375rem;
    transform: rotate(-45deg);
    transition: transform 0.15s ease-in-out;
    width: 0.4375rem;
}

details[open] > .sl-story-summary::before {
    transform: rotate(45deg);
}

.sl-story-summary:hover::before {
    border-color: var(--sl-blue-600);
}

.sl-story-head {
    min-width: 0;
}

.sl-story-title {
    color: var(--sl-blue-900);
    display: block;
    font-weight: 600;
    line-height: 1.45;
}

.sl-story-meta {
    color: var(--sl-slate-500);
    display: block;
    font-size: 0.8125rem;
    margin-top: 0.1875rem;
}

.sl-story-verdict {
    align-self: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.25rem;
}

.sl-story-body {
    border-top: 1px solid var(--sl-slate-100);
    margin-top: 0.875rem;
    padding-top: 0.875rem;
}

.sl-story-link {
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.sl-story-link:hover {
    text-decoration: underline;
}

.sl-outlets {
    font-size: 0.8125rem;
    margin: 0;
    padding-left: 1.125rem;
}

.sl-disclosure > summary {
    color: var(--sl-slate-600);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
}

.sl-disclosure > summary:hover {
    color: var(--sl-blue-700);
}

/* =============================================================================
   Home: the city autocomplete
   ============================================================================= */

#city-matches {
    box-shadow: var(--sl-shadow-md);
    max-height: 18rem;
    overflow-y: auto;
}

#city-matches .list-group-item {
    cursor: pointer;
    padding: 0.5625rem 1rem;
}

/* =============================================================================
   Error surfaces
   ============================================================================= */

.blazor-error-boundary {
    background: var(--sl-red-600);
    border-radius: var(--sl-radius);
    color: #fff;
    padding: 1rem 1.25rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}