/* ============================================================================
   LEASE RATER — BASE & CHROME
   ============================================================================
   Loaded immediately after tokens.css and ahead of the legacy stylesheets, so
   anything not yet migrated still wins. Covers: typographic defaults, the
   navigation band, footer, buttons, form controls and flash messages.

   Reads only from tokens.css. No literal colour values below.
   ============================================================================ */

/* --- Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Explicit background-color, not just the shorthand: this is the value
     Safari samples for browser-chrome tint when no sticky element qualifies. */
  background-color: var(--lr-canvas);
  background-image: none;
  color: var(--lr-ink);
  font-family: var(--lr-font);
  font-size: var(--lr-text-body);
  line-height: var(--lr-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

/* Figures line up in columns wherever they appear. */
.lr-num, td.lr-num, .lr-figure { font-variant-numeric: tabular-nums; }

/* Visible keyboard focus everywhere. */
:focus-visible {
  outline: 2px solid var(--lr-brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================================
   NAVIGATION BAND
   The one place brand green is used as a surface.
   ========================================================================== */
/* The green band is inset rather than full-bleed, and this is load-bearing,
   not decoration.

   Safari on macOS tints its toolbar, tab bar and bookmarks bar from what the
   page paints at its top edge. It does not read <meta name="theme-color">
   (Safari 26 dropped that), and it does not read this element's declared
   background-color either: measured on the live markup, html, body and this
   header all compute to white while the element actually painted at the top
   pixel is .lr-navbar at rgb(8,80,58). So a full-bleed green bar turns the
   whole browser chrome green, and no CSS property can override that.

   Keeping a white gutter above and beside the bar means white is what gets
   painted at the page edge, so the browser chrome stays white and the green
   stays on the page where it belongs.

   Consequence: this wrapper must keep a white background and must keep its
   padding. Removing either puts the green back against the viewport edge. */
.lr-header-modern {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background-color: var(--lr-canvas);
  padding: var(--lr-space-3) var(--lr-space-3) var(--lr-space-2);
}

.lr-navbar {
  background: var(--lr-brand-deep);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
  height: 64px;
  display: flex;
  align-items: center;
  border-radius: 14px;
  max-width: var(--lr-measure-wide);
  margin: 0 auto;
}

.lr-navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lr-space-5);
  padding: 0 var(--lr-space-5);
  height: 100%;
  max-width: none;
  margin: 0;
  width: 100%;
}

/* --- Brand lockup: SVG mark + wordmark set in type ------------------------- */
.lr-navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--lr-ink-inverse);
}
.lr-navbar-brand:hover { text-decoration: none; color: var(--lr-ink-inverse); }

/* The real logo, sized to the bar. The .lr-brand-mark SVG and .lr-brand-word
   type lockup that stood in for it have gone: see the note in base.html for
   why they were wrong. Height drives the size and the width follows the
   artwork's 2.776 aspect ratio, so the lockup cannot distort. */
.lr-navbar-logo { display: none; }

.lr-navbar-logo-img {
  height: 32px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

/* --- Nav items ------------------------------------------------------------- */
.lr-navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--lr-space-1);
  flex: 1;
  margin-left: var(--lr-space-5);
}

.lr-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: var(--lr-radius-control);
  font-size: var(--lr-text-body);
  font-weight: var(--lr-weight-regular);
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--lr-transition), color var(--lr-transition);
  white-space: nowrap;
}

/* Icons were carrying the old visual weight; the type carries it now. */
.lr-nav-item i,
.lr-dropdown-icon { font-size: 12px; opacity: .7; }

.lr-nav-item:hover {
  background: rgba(255, 255, 255, .1);
  color: var(--lr-ink-inverse);
  transform: none;
  text-decoration: none;
}

.lr-nav-item.active,
.lr-nav-item.active:hover {
  background: rgba(255, 255, 255, .14);
  color: var(--lr-ink-inverse);
  box-shadow: none;
  transform: none;
  font-weight: var(--lr-weight-medium);
}

/* --- Right cluster --------------------------------------------------------- */
.lr-navbar-right {
  display: flex;
  align-items: center;
  gap: var(--lr-space-3);
  flex-shrink: 0;
}

.lr-credits-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: var(--lr-weight-medium);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .9);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--lr-radius-pill);
  padding: 3px 11px;
}
.lr-credits-badge i { font-size: 11px; opacity: .75; }

.lr-avatar-circle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: var(--lr-ink-inverse);
  font-size: 12px;
  font-weight: var(--lr-weight-semi);
}
/* navbar.css draws this as a 40px gradient disc under a green drop shadow;
   the shadow read as a halo around the initial. */
.lr-user-avatar {
  background: none;
  border: none;
  padding: 0;
  width: auto;
  height: auto;
  box-shadow: none;
  transition: none;
  cursor: pointer;
}
.lr-user-avatar:hover { transform: none; box-shadow: none; }

.lr-btn-login,
.lr-btn-register {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-medium);
  border-radius: var(--lr-radius-pill);
  padding: 6px 15px;
  text-decoration: none;
  transition: background var(--lr-transition), color var(--lr-transition);
}
/* navbar.css draws Login as a #28a745-to-#20c997 gradient and Register as
   #f87171 red, both under coloured drop shadows. Every property it sets has
   to be named here: declaring only colour and border leaves its gradient
   background in place. */
.lr-btn-login,
.lr-btn-register { box-shadow: none; transform: none; }
.lr-btn-login:hover,
.lr-btn-register:hover { box-shadow: none; transform: none; }
.lr-btn-login i, .lr-btn-register i { font-size: 12px; opacity: .7; }
.lr-btn-login {
  background: transparent;
  color: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .28);
}
.lr-btn-login:hover { background: rgba(255, 255, 255, .1); color: var(--lr-ink-inverse); text-decoration: none; }
.lr-btn-register {
  background: var(--lr-canvas);
  color: var(--lr-brand-deep);
  border: 1px solid var(--lr-canvas);
}
.lr-btn-register:hover { background: rgba(255, 255, 255, .9); color: var(--lr-brand-deep); text-decoration: none; }

.lr-navbar-toggle {
  background: none;
  border: none;
  color: var(--lr-ink-inverse);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
}

/* --- Dropdowns: the one place shadow is spent ------------------------------ */
.lr-dropdown-menu {
  background: var(--lr-canvas);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-card);
  box-shadow: var(--lr-shadow-md);
  padding: var(--lr-space-1);
  min-width: 214px;
}

.lr-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--lr-space-2);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: var(--lr-text-small);
  color: var(--lr-ink);
  text-decoration: none;
  transition: background var(--lr-transition);
}
.lr-dropdown-item i { font-size: 13px; color: var(--lr-ink-tertiary); }
.lr-dropdown-item:hover { background: var(--lr-surface); color: var(--lr-ink); text-decoration: none; }
.lr-dropdown-item.active { background: var(--lr-brand-tint); color: var(--lr-brand); font-weight: var(--lr-weight-medium); }
.lr-dropdown-item.active i { color: var(--lr-brand); }
.lr-dropdown-item-danger { color: var(--lr-danger); }
.lr-dropdown-item-danger i { color: var(--lr-danger); }
.lr-dropdown-divider { height: 1px; background: var(--lr-hairline-soft); margin: var(--lr-space-1) 0; }
.lr-dropdown-header { padding: 9px 10px 7px; border-bottom: 1px solid var(--lr-hairline-soft); margin-bottom: var(--lr-space-1); }
.lr-user-name { font-size: 11px; font-weight: var(--lr-weight-semi); letter-spacing: var(--lr-tracking-caption);
                text-transform: uppercase; color: var(--lr-ink-tertiary); }
.lr-user-email { font-size: var(--lr-text-small); color: var(--lr-ink); margin-top: 1px; word-break: break-all; }

/* ============================================================================
   FLASH MESSAGES
   ========================================================================== */
.lr-flash {
  border-radius: var(--lr-radius-control);
  padding: 11px 14px;
  font-size: var(--lr-text-small);
  margin: var(--lr-space-4) 0;
  border: 1px solid var(--lr-hairline);
  background: var(--lr-surface);
  color: var(--lr-ink);
}
.lr-flash--danger  { background: var(--lr-danger-bg);  border-color: var(--lr-danger-edge);  color: var(--lr-danger); }
.lr-flash--warning { background: var(--lr-warning-bg); border-color: var(--lr-warning-edge); color: var(--lr-warning); }
.lr-flash--success { background: var(--lr-success-bg); border-color: var(--lr-brand-edge);   color: var(--lr-success); }

/* ============================================================================
   FOOTER
   ========================================================================== */
.lr-disclaimer__text {
  font-size: var(--lr-text-small);
  line-height: var(--lr-leading-body);
  color: var(--lr-ink-secondary);
  margin: 0 0 var(--lr-space-3);
}
.lr-disclaimer__text a,
.lr-footlinks a,
.lr-footmeta a { color: var(--lr-brand); text-decoration: none; }
.lr-disclaimer__text a:hover,
.lr-footlinks a:hover,
.lr-footmeta a:hover { text-decoration: underline; }
.lr-footmeta { font-size: 12px; color: var(--lr-ink-tertiary); }

/* ============================================================================
   OBR FLOW — calculate form and review page
   ============================================================================
   These classes were duplicated verbatim between obr_index.html and
   obr_review.html, which is the drift risk recorded as deferred item 7r.
   Defined once here; both templates now carry only their page-specific rules.
   ========================================================================== */

/* --- Page header ----------------------------------------------------------- */
.obr-hero {
  background: none;
  border-bottom: 1px solid var(--lr-hairline);
  padding: var(--lr-space-6) var(--lr-gutter) var(--lr-space-5);
  margin: 0 0 var(--lr-space-6);
}
.obr-hero__title {
  margin: 0;
  text-align: left;
  color: var(--lr-ink);
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-h1);
  font-size: var(--lr-text-h1);
  max-width: var(--lr-measure);
  margin-inline: auto;
}
.obr-hero__strap {
  margin: var(--lr-space-2) auto 0;
  text-align: left;
  color: var(--lr-ink-secondary);
  font-size: var(--lr-text-body);
  max-width: var(--lr-measure);
}

/* --- Cards ----------------------------------------------------------------- */
.obr-grid { display: flex; flex-direction: column; gap: var(--lr-space-5); margin: 0 0 120px; align-items: center; }
.obr-card {
  background: var(--lr-canvas);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-card);
  box-shadow: none;
  width: 100%;
  max-width: var(--lr-measure);
  margin: 0 auto;
}
/* Section headings are type over a hairline, not painted bars. */
.obr-card__head {
  padding: var(--lr-space-4) var(--lr-space-5) var(--lr-space-3);
  border-bottom: 1px solid var(--lr-hairline);
  background: none;
  border-radius: var(--lr-radius-card) var(--lr-radius-card) 0 0;
}
.obr-card__head h2,
.obr-card__head .section-header {
  margin: 0;
  color: var(--lr-ink);
  font-weight: var(--lr-weight-semi);
  font-size: var(--lr-text-h2);
  letter-spacing: var(--lr-tracking-h2);
  text-transform: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--lr-space-2);
  flex-wrap: wrap;
}
.obr-card__body { padding: var(--lr-space-4) var(--lr-space-5) var(--lr-space-5); }
.obr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lr-space-4); }
@media (max-width: 760px) { .obr-grid-2 { grid-template-columns: 1fr; } }

/* Progress meter reads as data, not decoration. */
.section-progress { display: inline-flex; align-items: center; gap: var(--lr-space-2); margin-left: auto; font-size: 11px; color: var(--lr-ink-tertiary); font-weight: var(--lr-weight-regular); }
.section-progress__bar { display: inline-block; width: 64px; height: 3px; background: var(--lr-hairline); border-radius: 2px; overflow: hidden; }
.section-progress__fill { height: 100%; background: var(--lr-brand); transition: width var(--lr-transition); width: 0%; }
.section-progress__text { font-size: 11px; font-variant-numeric: tabular-nums; }

.section-help-link {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--lr-surface); color: var(--lr-ink-tertiary);
  text-decoration: none; font-size: 10px;
  border: 1px solid var(--lr-hairline);
}
.section-help-link:hover { background: var(--lr-brand-tint); color: var(--lr-brand); border-color: var(--lr-brand-edge); text-decoration: none; }

/* --- Fields ---------------------------------------------------------------- */
.field { position: relative; }
.field label { display: block; font-weight: var(--lr-weight-semi); margin: 0 0 5px; color: var(--lr-ink); font-size: 12.5px; }
.req { color: var(--lr-danger); }
.with-info { position: relative; display: flex; align-items: center; gap: var(--lr-space-2); }

.obr-card select,
.obr-card input[type=number],
.obr-card input[type=text],
.obr-card input[type=date],
.obr-card textarea {
  width: 100%;
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-control);
  padding: 8px 11px;
  background: var(--lr-canvas);
  color: var(--lr-ink);
  font-family: inherit;
  font-size: var(--lr-text-small);
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color var(--lr-transition), box-shadow var(--lr-transition);
}
.obr-card select:focus,
.obr-card input:focus,
.obr-card textarea:focus {
  border-color: var(--lr-brand);
  box-shadow: 0 0 0 3px var(--lr-brand-tint);
}
/* A filled field is not an achievement — no green wash on valid input. */
.obr-card input:valid,
.obr-card select:valid { border-color: var(--lr-hairline); background: var(--lr-canvas); }
.field.is-complete input,
.field.is-complete select { border-color: var(--lr-hairline) !important; background: var(--lr-canvas) !important; box-shadow: none; }
.field.is-invalid select,
.field.is-invalid input { border-color: var(--lr-danger) !important; background: var(--lr-danger-bg) !important; }
.hint.error { color: var(--lr-danger); font-size: 12px; margin-top: 4px; }

/* --- Info bubbles ---------------------------------------------------------- */
.info {
  border: 1px solid var(--lr-hairline); background: var(--lr-surface); color: var(--lr-ink-tertiary);
  border-radius: 50%; width: 19px; height: 19px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 11px; font-weight: var(--lr-weight-semi); line-height: 1;
  cursor: pointer; box-shadow: none;
}
.info:hover { background: var(--lr-brand-tint); color: var(--lr-brand); border-color: var(--lr-brand-edge); }
.bubble {
  position: absolute; top: 112%; left: 0; min-width: 260px; max-width: 420px;
  background: var(--lr-canvas); border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-card); padding: var(--lr-space-3) var(--lr-space-4);
  box-shadow: var(--lr-shadow-md); z-index: 5; display: none;
  color: var(--lr-ink); font-size: var(--lr-text-small); line-height: var(--lr-leading-body);
}
.bubble p { margin: 0 0 6px; }
.bubble ul { margin: 6px 0 0 17px; padding: 0; }
.bubble code { background: var(--lr-surface); padding: 1px 4px; border-radius: 4px; font-family: var(--lr-font-mono); font-size: 12px; }
.bubble[aria-hidden="false"] { display: block; }
.bubble-footer-link { color: var(--lr-brand); font-weight: var(--lr-weight-medium); text-decoration: none; }

/* --- Sticky action bar ----------------------------------------------------- */
.obr-action {
  position: sticky; bottom: 0;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-top: 1px solid var(--lr-hairline);
  box-shadow: none;
  padding: var(--lr-space-3) var(--lr-gutter);
  display: flex; justify-content: center; align-items: center;
  gap: var(--lr-space-2); flex-wrap: wrap; z-index: 10;
}

/* --- Buttons --------------------------------------------------------------- */
.btn-pill {
  appearance: none;
  border: 1px solid var(--lr-brand);
  color: var(--lr-ink-inverse);
  background: var(--lr-brand);
  padding: 9px 20px;
  border-radius: var(--lr-radius-pill);
  font-family: inherit;
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-medium);
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--lr-transition), border-color var(--lr-transition);
}
.btn-pill:hover { background: var(--lr-brand-hover); border-color: var(--lr-brand-hover); filter: none; text-decoration: none; color: var(--lr-ink-inverse); }
.btn-pill:active { transform: none; box-shadow: none; }
.btn-xl { font-size: var(--lr-text-body); padding: 10px 24px; }
.btn-secondary {
  background: var(--lr-canvas);
  color: var(--lr-ink);
  border: 1px solid var(--lr-hairline);
}
.btn-secondary:hover { background: var(--lr-surface); filter: none; box-shadow: none; color: var(--lr-ink); }

.error-summary {
  color: var(--lr-danger); background: var(--lr-danger-bg);
  border: 1px solid var(--lr-danger-edge); border-radius: var(--lr-radius-control);
  padding: 8px 12px; max-width: var(--lr-measure); font-size: var(--lr-text-small);
}
.validation-banner {
  background: var(--lr-danger-bg); border: 1px solid var(--lr-danger-edge);
  border-left: 2.5px solid var(--lr-danger);
  border-radius: var(--lr-radius-control); padding: var(--lr-space-3) var(--lr-space-4);
  max-width: var(--lr-measure); margin: var(--lr-space-4) auto; color: var(--lr-danger);
  font-size: var(--lr-text-small);
}
.validation-banner ul { margin: 6px 0 0 17px; padding: 0; }

/* --- Legal acceptance ------------------------------------------------------ */
.obr-acceptance {
  max-width: var(--lr-measure);
  margin: var(--lr-space-4) auto var(--lr-space-2);
  padding: var(--lr-space-4);
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-control);
  color: var(--lr-ink);
}
.obr-acceptance__label { display: flex; gap: var(--lr-space-3); align-items: flex-start; font-size: var(--lr-text-small); line-height: var(--lr-leading-body); }
.obr-acceptance__label input { width: auto; margin-top: 2px; flex: 0 0 auto; }
.obr-acceptance__label span { flex: 1; min-width: 0; }
.obr-acceptance a { color: var(--lr-brand); font-weight: var(--lr-weight-medium); }
.obr-acceptance .hint.error { margin: var(--lr-space-2) 0 0; }

/* --- Help banner ----------------------------------------------------------- */
.help-banner {
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-control);
  padding: var(--lr-space-3) var(--lr-space-4);
  margin: 0 auto var(--lr-space-5);
  max-width: var(--lr-measure);
  display: flex; align-items: center; justify-content: space-between; gap: var(--lr-space-4);
}
.help-banner__text { color: var(--lr-ink-secondary); font-size: var(--lr-text-small); margin: 0; line-height: var(--lr-leading-body); }
.help-banner__cta {
  background: var(--lr-canvas); color: var(--lr-ink); border: 1px solid var(--lr-hairline);
  padding: 7px 15px; border-radius: var(--lr-radius-pill); text-decoration: none;
  font-weight: var(--lr-weight-medium); white-space: nowrap; font-size: var(--lr-text-small);
}
.help-banner__cta:hover { background: var(--lr-surface); filter: none; text-decoration: none; color: var(--lr-ink); }
@media (max-width: 760px) {
  .help-banner { flex-direction: column; align-items: stretch; }
  .help-banner__cta { width: 100%; text-align: center; }
}

/* --- Currency inputs ------------------------------------------------------- */
.obr-card input[data-currency-format="true"] {
  font-family: var(--lr-font);
  letter-spacing: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.obr-card input[data-currency-format="true"]::placeholder { text-align: left; }
.obr-card input[data-currency-format="true"]:focus { background: var(--lr-canvas); }

.obr-container { display: flex; justify-content: center; padding-inline: var(--lr-gutter); }
.obr-container .obr-grid { width: 100%; max-width: var(--lr-measure); }

/* ============================================================================
   REPORT SURFACES
   Loaded after output-professional.css so these win. Converts the report from
   gradient bars and colour-filled cards to quiet type on hairline grids.
   ========================================================================== */

/* --- Section headers: type, not a painted bar ------------------------------ */
.section-header {
  background: none;
  color: var(--lr-ink);
  text-align: left;
  padding: 0 0 var(--lr-space-3);
  font-size: var(--lr-text-h2);
  font-weight: var(--lr-weight-semi);
  border-radius: 0;
  margin: var(--lr-space-7) 0 var(--lr-space-4);
  letter-spacing: var(--lr-tracking-h2);
  text-transform: none;
  box-shadow: none;
  border-bottom: 1px solid var(--lr-hairline);
}
.section-header::after { display: none; }

/* --- Entity block: a label/value list, not a bordered panel ---------------- */
.lr-entity {
  max-width: var(--lr-measure);
  margin: 0 auto;
  padding-inline: var(--lr-gutter);
}
.lr-entity__grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 9px var(--lr-space-4);
  align-items: baseline;
  padding: var(--lr-space-4) 0;
  border-top: 1px solid var(--lr-hairline);
  border-bottom: 1px solid var(--lr-hairline);
}
@media (max-width: 560px) { .lr-entity__grid { grid-template-columns: 1fr; gap: 2px var(--lr-space-4); } }
.lr-entity__k {
  font-size: 10.5px;
  font-weight: var(--lr-weight-semi);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--lr-ink-tertiary);
}
.lr-entity__v { font-size: var(--lr-text-body); color: var(--lr-ink); }
.lr-entity__v--lead { font-size: var(--lr-text-h3); font-weight: var(--lr-weight-semi); letter-spacing: -.012em; }
.lr-entity__v--mono { font-family: var(--lr-font-mono); font-size: 12.5px; color: var(--lr-ink-secondary); word-break: break-all; }

/* --- Metric cards: one hairline grid, colour only in the band -------------- */
.metric-card {
  background: var(--lr-canvas) !important;
  border: 1px solid var(--lr-hairline-soft);
  border-radius: var(--lr-radius-control);
  padding: var(--lr-space-3) var(--lr-space-4) var(--lr-space-4);
  transition: border-color var(--lr-transition);
  overflow: visible;
}
.metric-card::before { display: none; }
.metric-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--lr-hairline);
}

.metric-label {
  font-size: 10.5px;
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lr-ink-tertiary);
  margin-bottom: var(--lr-space-2);
}
.metric-value {
  font-size: 20px;
  font-weight: var(--lr-weight-semi);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-bottom: var(--lr-space-2);
  color: var(--lr-ink);
}
.metric-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 0;
}

/* Bands: desaturated, meaning in the label, colour only reinforcing. */
.metric-card.excellent,
.metric-card.strong,
.metric-card.satisfactory,
.metric-card.fair,
.metric-card.weak,
.metric-card.vulnerable { color: var(--lr-ink); }

.metric-card.excellent    .metric-badge { background: var(--lr-band-excellent-bg);    color: var(--lr-band-excellent); }
.metric-card.strong       .metric-badge { background: var(--lr-band-strong-bg);       color: var(--lr-band-strong); }
.metric-card.satisfactory .metric-badge { background: var(--lr-band-satisfactory-bg); color: var(--lr-band-satisfactory); }
.metric-card.fair         .metric-badge { background: var(--lr-band-fair-bg);         color: var(--lr-band-fair); }
.metric-card.weak         .metric-badge { background: var(--lr-band-weak-bg);         color: var(--lr-band-weak); }
.metric-card.vulnerable   .metric-badge { background: var(--lr-band-vulnerable-bg);   color: var(--lr-band-vulnerable); }

.metric-card.suppressed {
  color: var(--lr-ink-tertiary);
  background: var(--lr-surface) !important;
  border-style: solid;
  border-color: var(--lr-hairline-soft);
}

/* ============================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 860px) {
  .lr-navbar-nav {
    position: absolute;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-left: 0;
    padding: var(--lr-space-2);
    background: var(--lr-brand-deep);
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: none;
  }
  /* navbar.js toggles the class "open" (see static/js/navbar.js, the
     navbarNav.classList.toggle call). base.css was only styling ".is-open",
     so the mobile menu button set the class, flipped aria-expanded, and
     changed the icon to a cross while the panel stayed display: none. Both
     names are matched here so the two cannot drift apart again. */
  .lr-navbar-nav.open,
  .lr-navbar-nav.is-open { display: flex; }
  .lr-nav-item { justify-content: flex-start; padding: 10px 12px; }
  .lr-navbar-logo-img { height: 28px; }

  /* The mobile panel scrolls: navbar.css gives .lr-navbar-nav a max-height
     and overflow-y (see its mobile block). An absolutely positioned submenu
     inside a scrolling box is clipped to that box, so opening Resources on a
     phone showed only its first item with the rest cut off. Measured, not
     assumed: the panel was 98px tall and the open menu 427px.

     Fix: on mobile the submenu flows inline instead, as an accordion, so the
     panel itself grows and scrolls. It then sits on the dark green panel
     rather than on its own white card, so the item colours are restated for
     that ground -- the white-card colours would be dark text on dark green.

     Scoped to .lr-navbar-nav, NOT .lr-navbar: the account menu lives in
     .lr-navbar-right, outside the collapsible panel but still inside the bar,
     and it is not clipped. Scoping to the bar flattened that menu into the
     top bar as well. Specificity still matches navbar.css's
     ".lr-navbar .lr-dropdown-menu" at 0,2,0 and base.css loads last. */
  .lr-navbar-nav .lr-dropdown-menu {
    position: static;
    min-width: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    /* navbar.css hides the closed menu with visibility/opacity/transform and
       relies on position: absolute to keep it out of the flow. Made static,
       it stays invisible but still takes its full height -- that was a 203px
       blank gap under the closed Platform menu. So undo that mechanism here
       and collapse the height instead, which is what an accordion wants. */
    visibility: visible;
    opacity: 1;
    transform: none;
    max-height: 0;
    overflow: hidden;
    padding: 0 0 0 var(--lr-space-3);
    transition: max-height 250ms ease;
  }
  .lr-navbar-nav .lr-nav-dropdown.open .lr-dropdown-menu,
  .lr-navbar-nav .lr-nav-dropdown.is-open .lr-dropdown-menu {
    max-height: 1000px;
    padding-bottom: var(--lr-space-2);
  }
  @media (prefers-reduced-motion: reduce) {
    .lr-navbar-nav .lr-dropdown-menu { transition: none; }
  }

  .lr-navbar-nav .lr-dropdown-item {
    color: rgba(255, 255, 255, .82);
    padding: 10px 12px;
    min-height: 44px;
    border-radius: var(--lr-radius-control);
  }
  .lr-navbar-nav .lr-dropdown-item i { color: rgba(255, 255, 255, .55); }
  .lr-navbar-nav .lr-dropdown-item:hover,
  .lr-navbar-nav .lr-dropdown-item.active {
    background: rgba(255, 255, 255, .10);
    color: #fff;
  }
  .lr-navbar-nav .lr-dropdown-item.active i { color: #fff; }
  .lr-navbar-nav .lr-dropdown-divider { background: rgba(255, 255, 255, .16); }

  /* navbar.css sizes the mobile bar around the old 140px raster logo: 160px
     tall when logged out (a logo area with a button row stranded beneath it),
     100px when logged in, with the right-hand cluster absolutely positioned
     below the logo. It sets those heights through :has() selectors, which
     outrank a plain .lr-navbar however late this file loads, so they have to
     be matched selector for selector. */
  .lr-header-modern { padding: var(--lr-space-2) var(--lr-space-2) 6px; }
  .lr-navbar,
  .lr-navbar:has(.lr-btn-login),
  .lr-navbar:has(.lr-user-avatar) { min-height: 0; height: 58px; border-radius: 12px; }
  .lr-navbar-container { padding: 0 var(--lr-space-3); }
  .lr-navbar-container { flex-wrap: nowrap; }
  .lr-navbar-right,
  .lr-navbar-right:has(.lr-user-avatar) {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    justify-content: flex-end;
    gap: var(--lr-space-2);
  }
  .lr-btn-login,
  .lr-btn-register {
    flex: 0 0 auto;
    max-width: none;
    padding: 6px 12px;
    font-size: 12.5px;
  }
  .lr-btn-login i, .lr-btn-register i { display: none; }

  /* The toggle is taken out of the flow by navbar.css and pinned to the right
     edge, where it lands on top of the Register button. Put it back in line. */
  .lr-navbar-toggle {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--lr-radius-control);
    font-size: 17px;
    margin-left: var(--lr-space-2);
    /* The toggle sits before the nav and the right-hand cluster in the markup,
       so in the flow it lands between the mark and the auth buttons. */
    order: 9;
  }
  .lr-navbar-toggle:hover { background: rgba(255, 255, 255, .1); color: var(--lr-ink-inverse); }

  /* The open panel hangs off the bar, so it follows the bar's height. */
  .lr-navbar-nav,
  body:has(.lr-user-avatar) .lr-navbar-nav {
    top: calc(100% - 6px);
    left: var(--lr-space-2);
    right: var(--lr-space-2);
    border-radius: 12px;
    border: 1px solid var(--lr-hairline);
  }
}

/* ============================================================================
   APPLICATION PAGES
   ============================================================================
   Dashboard, pricing and the auth screens. These were the last templates
   carrying their layout as inline style attributes; everything below replaces
   that with named components reading from the token layer.

   The governing rule is the same one the report page follows: brand green is
   a mark, not a ground. There is no gradient panel, no coloured hero and no
   emoji. Hierarchy comes from type size and hairlines.
   ========================================================================== */

.lr-page {
  max-width: var(--lr-measure-wide);
  margin: 0 auto;
  padding: var(--lr-space-7) var(--lr-gutter) var(--lr-space-8);
}
.lr-page--narrow { max-width: 560px; }
.lr-page--measure { max-width: var(--lr-measure); }

/* --- Page masthead --------------------------------------------------------- */
.lr-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lr-space-4);
  padding-bottom: var(--lr-space-5);
  border-bottom: 1px solid var(--lr-hairline);
  margin-bottom: var(--lr-space-6);
}
.lr-masthead__eyebrow {
  font-size: var(--lr-text-caption);
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--lr-tracking-caption);
  color: var(--lr-ink-tertiary);
  margin: 0 0 var(--lr-space-2);
}
.lr-masthead__title {
  font-size: var(--lr-text-h1);
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-h1);
  line-height: var(--lr-leading-tight);
  color: var(--lr-ink);
  margin: 0;
}
.lr-masthead__strap {
  font-size: var(--lr-text-small);
  color: var(--lr-ink-secondary);
  margin: var(--lr-space-2) 0 0;
}

/* --- Panel ----------------------------------------------------------------- */
.lr-panel {
  background: var(--lr-canvas);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-card);
  margin-bottom: var(--lr-space-5);
  overflow: hidden;
}
.lr-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lr-space-3);
  padding: var(--lr-space-4) var(--lr-space-5);
  border-bottom: 1px solid var(--lr-hairline-soft);
}
.lr-panel__title {
  font-size: var(--lr-text-h3);
  font-weight: var(--lr-weight-semi);
  letter-spacing: -.012em;
  color: var(--lr-ink);
  margin: 0;
}
.lr-panel__note {
  font-size: var(--lr-text-small);
  color: var(--lr-ink-secondary);
  margin: 0;
}
.lr-panel__body { padding: var(--lr-space-5); }
.lr-panel__body--flush { padding: 0; }
.lr-panel__foot {
  padding: var(--lr-space-3) var(--lr-space-5);
  border-top: 1px solid var(--lr-hairline-soft);
  background: var(--lr-surface);
  font-size: var(--lr-text-small);
}

/* --- Credits meter ---------------------------------------------------------- */
/* The balance is the one figure on this page that deserves display type. Its
   status is carried by a small marker and the caption, not by recolouring the
   number: a red 3rem numeral read as an error state rather than a balance. */
.lr-credits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lr-space-5);
}
.lr-credits__figure {
  font-size: 44px;
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--lr-ink);
  margin: var(--lr-space-1) 0 var(--lr-space-2);
}
.lr-credits__status {
  display: inline-flex;
  align-items: center;
  gap: var(--lr-space-2);
  font-size: var(--lr-text-small);
  color: var(--lr-ink-secondary);
}
.lr-credits__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--lr-ink-tertiary);
}
.lr-credits--good     .lr-credits__dot { background: var(--lr-success); }
.lr-credits--medium   .lr-credits__dot { background: var(--lr-warning); }
.lr-credits--low      .lr-credits__dot { background: var(--lr-danger); }
.lr-credits--low      .lr-credits__status { color: var(--lr-danger); }

/* --- Data table ------------------------------------------------------------- */
.lr-table-scroll { overflow-x: auto; }
.lr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--lr-text-small);
}
.lr-table th {
  text-align: left;
  padding: var(--lr-space-3) var(--lr-space-5);
  font-size: 10.5px;
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lr-ink-tertiary);
  border-bottom: 1px solid var(--lr-hairline);
  white-space: nowrap;
}
.lr-table td {
  padding: var(--lr-space-4) var(--lr-space-5);
  border-bottom: 1px solid var(--lr-hairline-soft);
  color: var(--lr-ink);
  vertical-align: top;
}
.lr-table tbody tr:last-child td { border-bottom: none; }
.lr-table tbody tr:hover { background: var(--lr-surface); }
.lr-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.lr-table__actions { text-align: right; white-space: nowrap; }
.lr-table__primary { font-weight: var(--lr-weight-medium); color: var(--lr-ink); }
.lr-table__meta { color: var(--lr-ink-secondary); font-size: 12.5px; margin-top: 3px; }
.lr-table__co-no { color: var(--lr-ink-tertiary); font-weight: var(--lr-weight-regular); font-size: 12.5px; }
.lr-table__time { color: var(--lr-ink-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Tags ------------------------------------------------------------------- */
.lr-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--lr-surface);
  color: var(--lr-ink-secondary);
  white-space: nowrap;
}
.lr-tag--lease  { background: var(--lr-brand-tint); color: var(--lr-brand); }
.lr-tag--locked { background: var(--lr-warning-bg); color: var(--lr-warning); }

/* --- Inline action buttons --------------------------------------------------- */
/* One shape, three weights. Sized to sit in a table row without dominating it. */
.lr-action {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--lr-radius-control);
  border: 1px solid var(--lr-hairline);
  background: var(--lr-canvas);
  color: var(--lr-ink);
  font-size: 12.5px;
  font-weight: var(--lr-weight-medium);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--lr-transition), border-color var(--lr-transition);
}
.lr-action + .lr-action,
.lr-action + form,
form + .lr-action { margin-left: var(--lr-space-2); }
.lr-action:hover {
  background: var(--lr-surface);
  color: var(--lr-ink);
  text-decoration: none;
}
.lr-action--primary {
  background: var(--lr-brand);
  border-color: var(--lr-brand);
  color: var(--lr-ink-inverse);
}
.lr-action--primary:hover {
  background: var(--lr-brand-hover);
  border-color: var(--lr-brand-hover);
  color: var(--lr-ink-inverse);
}
.lr-action--brand {
  background: var(--lr-brand-tint);
  border-color: var(--lr-brand-edge);
  color: var(--lr-brand);
}
.lr-action--brand:hover { background: var(--lr-brand-tint); border-color: var(--lr-brand); color: var(--lr-brand); }
.lr-action--danger { color: var(--lr-danger); }
.lr-action--danger:hover { background: var(--lr-danger-bg); border-color: var(--lr-danger-edge); color: var(--lr-danger); }
.lr-action--block { display: block; text-align: center; padding: 10px 16px; font-size: var(--lr-text-body); }

.lr-inline-form { display: inline; }

/* --- Link list (quick actions, resources) ------------------------------------ */
.lr-linklist { display: flex; flex-direction: column; }
.lr-linklist__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lr-space-4);
  padding: var(--lr-space-3) 0;
  border-bottom: 1px solid var(--lr-hairline-soft);
  color: var(--lr-ink);
  text-decoration: none;
  transition: color var(--lr-transition);
}
.lr-linklist__item:last-child { border-bottom: none; }
.lr-linklist__item:hover { color: var(--lr-brand); text-decoration: none; }
.lr-linklist__label { font-weight: var(--lr-weight-medium); font-size: var(--lr-text-small); }
.lr-linklist__desc { color: var(--lr-ink-secondary); font-size: 12.5px; font-weight: var(--lr-weight-regular); }
.lr-linklist__chev { color: var(--lr-ink-tertiary); flex: 0 0 auto; font-size: 12px; }
.lr-linklist__item:hover .lr-linklist__chev { color: var(--lr-brand); }

/* --- Column layouts ---------------------------------------------------------- */
.lr-cols { display: grid; gap: var(--lr-space-5); }
.lr-cols--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lr-cols--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --- Empty state -------------------------------------------------------------- */
.lr-empty {
  text-align: center;
  padding: var(--lr-space-7) var(--lr-space-5);
}
.lr-empty__rule {
  width: 40px;
  height: 3px;
  background: var(--lr-brand);
  border-radius: 2px;
  margin: 0 auto var(--lr-space-5);
}
.lr-empty__title {
  font-size: var(--lr-text-h3);
  font-weight: var(--lr-weight-semi);
  letter-spacing: -.012em;
  color: var(--lr-ink);
  margin: 0 0 var(--lr-space-2);
}
.lr-empty__text {
  font-size: var(--lr-text-small);
  color: var(--lr-ink-secondary);
  margin: 0 auto var(--lr-space-5);
  max-width: 42ch;
  line-height: var(--lr-leading-body);
}

/* --- Footnote link ------------------------------------------------------------ */
.lr-more {
  display: block;
  text-align: center;
  padding: var(--lr-space-3);
  color: var(--lr-brand);
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-medium);
  text-decoration: none;
}
.lr-more:hover { text-decoration: underline; color: var(--lr-brand-hover); }

@media (max-width: 700px) {
  .lr-page { padding: var(--lr-space-5) var(--lr-gutter) var(--lr-space-7); }
  .lr-panel__head, .lr-panel__body { padding-inline: var(--lr-space-4); }
  .lr-credits { gap: var(--lr-space-4); }

  /* On a phone the reports table cannot hold three columns. Horizontal scroll
     is not the answer either: it pushes the row actions off-screen, where they
     read as missing rather than as scrolled-past. Each row becomes a stacked
     block instead, with the header row dropped since the fields are
     self-describing once they are one per line. */
  .lr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lr-table, .lr-table tbody, .lr-table tr, .lr-table td { display: block; width: 100%; }
  .lr-table tr {
    padding: var(--lr-space-4);
    border-bottom: 1px solid var(--lr-hairline-soft);
  }
  .lr-table tbody tr:last-child { border-bottom: none; }
  .lr-table td { padding: 0; border-bottom: none; }
  .lr-table td + td { margin-top: var(--lr-space-2); }
  .lr-table__actions { text-align: left; white-space: normal; }
  .lr-table__actions .lr-action,
  .lr-table__actions form { display: block; margin: var(--lr-space-2) 0 0; }
  .lr-table__actions .lr-action { width: 100%; text-align: center; }
}

/* ============================================================================
   PRICING
   ========================================================================== */
.lr-hero {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--lr-space-7);
}
.lr-hero__title {
  font-size: 36px;
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-display);
  line-height: var(--lr-leading-tight);
  color: var(--lr-ink);
  margin: 0 0 var(--lr-space-3);
}
.lr-hero__strap {
  font-size: var(--lr-text-h3);
  color: var(--lr-ink-secondary);
  line-height: var(--lr-leading-body);
  margin: 0 0 var(--lr-space-2);
}
.lr-hero__note { font-size: var(--lr-text-small); color: var(--lr-ink-tertiary); margin: 0; }

.lr-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--lr-space-4);
  margin-bottom: var(--lr-space-8);
  align-items: stretch;
}
.lr-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--lr-canvas);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-card);
  padding: var(--lr-space-6) var(--lr-space-5) var(--lr-space-5);
  transition: border-color var(--lr-transition);
}
.lr-tier:hover { border-color: var(--lr-ink-tertiary); }
/* The recommended tier is marked by a brand edge and a small flag, not by a
   different fill: the prices must stay comparable at a glance. */
.lr-tier--popular { border-color: var(--lr-brand); }
.lr-tier--popular:hover { border-color: var(--lr-brand); }
.lr-tier__flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--lr-brand);
  color: var(--lr-ink-inverse);
  padding: 3px 12px;
  border-radius: var(--lr-radius-pill);
  font-size: 10px;
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--lr-tracking-caption);
  white-space: nowrap;
}
.lr-tier__name {
  font-size: var(--lr-text-caption);
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--lr-tracking-caption);
  color: var(--lr-ink-tertiary);
  margin: 0 0 var(--lr-space-3);
}
.lr-tier__price {
  font-size: 34px;
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--lr-ink);
  margin: 0;
}
.lr-tier__credits { font-size: var(--lr-text-small); color: var(--lr-ink-secondary); margin: var(--lr-space-2) 0 0; }
.lr-tier__unit {
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-medium);
  color: var(--lr-ink);
  font-variant-numeric: tabular-nums;
  margin: var(--lr-space-1) 0 0;
}
.lr-tier__save {
  /* .lr-tier is a column flex container, so align-self is what keeps this
     badge the width of its own text rather than the width of the card. */
  align-self: flex-start;
  margin-top: var(--lr-space-3);
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--lr-brand-tint);
  color: var(--lr-brand);
  font-size: 11px;
  font-weight: var(--lr-weight-semi);
}
.lr-tier__desc {
  font-size: 12.5px;
  color: var(--lr-ink-secondary);
  line-height: var(--lr-leading-body);
  margin: var(--lr-space-4) 0 0;
  padding-top: var(--lr-space-4);
  border-top: 1px solid var(--lr-hairline-soft);
}
.lr-tier__includes { list-style: none; margin: var(--lr-space-4) 0 var(--lr-space-5); padding: 0; }
.lr-tier__includes li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--lr-ink-secondary);
  line-height: 1.75;
}
.lr-tier__includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lr-brand);
}
.lr-tier__cta { margin-top: auto; }
.lr-tier__cta .lr-action { width: 100%; }

/* --- Quiet feature band (replaces the slate gradient block) ------------------- */
.lr-band {
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-card);
  padding: var(--lr-space-7) var(--lr-space-6);
  margin-bottom: var(--lr-space-8);
  text-align: center;
}
.lr-band__title {
  font-size: var(--lr-text-h1);
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-h1);
  color: var(--lr-ink);
  margin: 0 0 var(--lr-space-3);
}
.lr-band__strap {
  font-size: var(--lr-text-small);
  color: var(--lr-ink-secondary);
  line-height: var(--lr-leading-body);
  max-width: 56ch;
  margin: 0 auto var(--lr-space-5);
}
.lr-band__actions { display: flex; justify-content: center; gap: var(--lr-space-3); flex-wrap: wrap; }
.lr-band__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--lr-space-5);
  margin-top: var(--lr-space-6);
  padding-top: var(--lr-space-6);
  border-top: 1px solid var(--lr-hairline);
  text-align: left;
}
.lr-band__point-title {
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-semi);
  color: var(--lr-ink);
  margin: 0 0 var(--lr-space-1);
}
.lr-band__point-title::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--lr-brand);
  margin-bottom: var(--lr-space-3);
}
.lr-band__point-text { font-size: 12.5px; color: var(--lr-ink-secondary); margin: 0; line-height: var(--lr-leading-body); }

/* --- FAQ ---------------------------------------------------------------------- */
.lr-faq { max-width: 720px; margin: 0 auto; }
.lr-faq__title {
  font-size: var(--lr-text-h1);
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-h1);
  color: var(--lr-ink);
  text-align: center;
  margin: 0 0 var(--lr-space-5);
}
.lr-faq__list {
  background: var(--lr-canvas);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-card);
  overflow: hidden;
}
.lr-faq__item { border-bottom: 1px solid var(--lr-hairline-soft); }
.lr-faq__item:last-child { border-bottom: none; }
.lr-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--lr-space-4);
  padding: var(--lr-space-4) var(--lr-space-5);
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-medium);
  color: var(--lr-ink);
  cursor: pointer;
  list-style: none;
  transition: background var(--lr-transition);
}
.lr-faq__q::-webkit-details-marker { display: none; }
.lr-faq__q:hover { background: var(--lr-surface); }
.lr-faq__sign {
  flex: 0 0 auto;
  color: var(--lr-ink-tertiary);
  font-size: 11px;
  transition: transform var(--lr-transition);
}
.lr-faq__item[open] .lr-faq__sign { transform: rotate(180deg); }
.lr-faq__a {
  padding: 0 var(--lr-space-5) var(--lr-space-5);
  font-size: 12.5px;
  color: var(--lr-ink-secondary);
  line-height: var(--lr-leading-body);
}
.lr-faq__a a { color: var(--lr-brand); text-decoration: none; }
.lr-faq__a a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .lr-hero__title { font-size: 28px; }
  .lr-band { padding: var(--lr-space-6) var(--lr-space-4); }
  .lr-band__points { text-align: left; }
}

/* ============================================================================
   AUTHENTICATION
   ============================================================================
   Login and register shared one shape but two unrelated palettes: login was
   built on #28a745 green, register on #1a4d7f blue, neither of them brand.
   Both now use the single form below. The gradient heroes and the card that
   overlapped them have gone; the form is the page.
   ========================================================================== */
.lr-auth {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--lr-space-8) var(--lr-gutter);
}
.lr-auth__head { text-align: center; margin-bottom: var(--lr-space-6); }
.lr-auth__title {
  font-size: var(--lr-text-h1);
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-h1);
  color: var(--lr-ink);
  margin: 0 0 var(--lr-space-2);
}
.lr-auth__strap {
  font-size: var(--lr-text-small);
  color: var(--lr-ink-secondary);
  line-height: var(--lr-leading-body);
  margin: 0;
}

.lr-form { display: flex; flex-direction: column; gap: var(--lr-space-4); }
.lr-form__field { display: flex; flex-direction: column; }
.lr-form__label {
  font-size: 12.5px;
  font-weight: var(--lr-weight-semi);
  color: var(--lr-ink);
  margin-bottom: 5px;
}
.lr-form__hint { font-weight: var(--lr-weight-regular); color: var(--lr-ink-tertiary); }
.lr-form input[type="text"],
.lr-form input[type="email"],
.lr-form input[type="password"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-control);
  background: var(--lr-canvas);
  color: var(--lr-ink);
  font-family: inherit;
  font-size: var(--lr-text-body);
  transition: border-color var(--lr-transition), box-shadow var(--lr-transition);
}
.lr-form input[type="text"]:focus,
.lr-form input[type="email"]:focus,
.lr-form input[type="password"]:focus {
  outline: none;
  border-color: var(--lr-brand);
  box-shadow: 0 0 0 3px var(--lr-brand-tint);
}
.lr-form input::placeholder { color: var(--lr-ink-tertiary); }
.lr-form__error { color: var(--lr-danger); font-size: 12px; margin-top: 4px; }
.lr-form__check {
  display: flex;
  font-weight: var(--lr-weight-regular);
  gap: var(--lr-space-3);
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--lr-ink-secondary);
  line-height: var(--lr-leading-body);
}
.lr-form__check input[type="checkbox"] { width: auto; margin-top: 3px; flex: 0 0 auto; cursor: pointer; }
.lr-form__check a { color: var(--lr-brand); text-decoration: none; }
.lr-form__check a:hover { text-decoration: underline; }
.lr-form__submit { margin-top: var(--lr-space-2); }

.lr-auth__alt {
  margin-top: var(--lr-space-5);
  padding-top: var(--lr-space-5);
  border-top: 1px solid var(--lr-hairline-soft);
  text-align: center;
  font-size: var(--lr-text-small);
  color: var(--lr-ink-secondary);
}
.lr-auth__alt a { color: var(--lr-brand); font-weight: var(--lr-weight-medium); text-decoration: none; }
.lr-auth__alt a:hover { text-decoration: underline; }

/* Supporting points below the form: text only, aligned left, no cards. */
.lr-auth__points {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--lr-space-7) var(--lr-gutter) var(--lr-space-8);
  border-top: 1px solid var(--lr-hairline);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--lr-space-6);
}
.lr-auth__point-title {
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-semi);
  color: var(--lr-ink);
  margin: 0 0 var(--lr-space-2);
}
.lr-auth__point-title::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--lr-brand);
  margin-bottom: var(--lr-space-3);
}
.lr-auth__point-text { font-size: 12.5px; color: var(--lr-ink-secondary); line-height: var(--lr-leading-body); margin: 0; }

/* ============================================================================
   FOOTER
   ============================================================================
   The footer was still being laid out by page-style.css, which set the link
   row as an inline-flex containing a <br>. The copyright line therefore sat on
   the same visual row as the links, out of alignment and coloured as though it
   were one of them. The logo was also being drawn at 140px: the same opaque
   white JPG the navbar had to stop using.
   ========================================================================== */
.lr-footer {
  border-top: 1px solid var(--lr-hairline);
  background: var(--lr-canvas);
  margin-top: var(--lr-space-8);
  padding: var(--lr-space-7) 0 var(--lr-space-6);
}
/* CENTRED. The container is 1040px and centred, but the blocks inside it were
   left-aligned with their own max-widths, so the disclaimer ended 608px short
   of the right edge and its centre sat 194px left of the page's. Measured at
   1440px before this change:

       .lr-footer .container   left 200  right 1240  centre 720   (centred)
       .lr-disclaimer__text    left 220  right  832  centre 526   (194 left)
       .lr-footmeta            left 220  right  758  centre 489   (231 left)

   The container width is NOT changed: 1040px is the site's standard
   .container, so the footer lines up with the page content above it. Only the
   blocks inside are centred. */
.lr-footer .lr-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lr-space-5);
  align-items: start;
  justify-items: center;
  text-align: center;
}
.lr-footer .lr-footbrand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--lr-space-4);
}
/* The trimmed asset is all artwork, so this is the true mark height. */
.lr-footer .lr-logoimg { height: 34px; width: auto; display: block; }
.lr-disclaimer__text {
  font-size: 12.5px;
  color: var(--lr-ink-secondary);
  line-height: var(--lr-leading-body);
  max-width: 88ch;
  margin: 0 auto var(--lr-space-3);
}
.lr-footmeta {
  font-size: var(--lr-text-caption);
  color: var(--lr-ink-tertiary);
  line-height: var(--lr-leading-body);
  max-width: 88ch;
  margin-inline: auto;
}
/* Links on their own row, copyright beneath them rather than beside them. */
.lr-footer .lr-footlinks {
  display: block;
  text-align: center;
  align-self: start;
  width: 100%;          /* so the rule above the links spans the footer */
  padding-top: var(--lr-space-4);
  border-top: 1px solid var(--lr-hairline-soft);
  font-size: var(--lr-text-small);
  color: var(--lr-ink-tertiary);
  line-height: 2;
}
.lr-footer .lr-footlinks a {
  color: var(--lr-ink-secondary);
  font-weight: var(--lr-weight-regular);
  margin: 0;
  /* Keep each label whole. Centred and wrapped at 390px this row first
     stranded a separator at the start of a line, and binding the separator
     with &nbsp; then split "OBR vs IBR" across two lines instead. With both,
     a break can only happen at the space AFTER a separator. */
  white-space: nowrap;
}
.lr-footer .lr-footlinks a:hover { color: var(--lr-brand); text-decoration: underline; }

/* ============================================================================
   REPORT — PV, SCHEDULES AND SUPPORTING SURFACES
   ============================================================================
   Lifted out of obr_result.html's <style> block, which was the last part of
   the report still carrying its own palette. What changed as it moved:

     - The PV hero was a green gradient panel with a 4rem white figure and a
       text-shadow. It is now the same treatment as the OBR rate at the top of
       the page: no fill, near-black figure, a brand rule beneath it. Two
       display figures on one page, drawn the same way.
     - Three separate table styles (iteration, sensitivity, schedule) with
       #f7fbf8 heads and #0f4d2e head text collapse into one.
     - Convergence status, the compliance note and the CSV button dropped
       their saturated fills for the status and brand tokens.
     - #334155 / #64748b / #0f172a slate greys, which belonged to no palette
       on this site, are gone.
   ========================================================================== */

/* --- PV headline ------------------------------------------------------------ */
.pv-hero-card {
  background: var(--lr-canvas);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--lr-space-5) 0 var(--lr-space-6);
  margin: 0 0 var(--lr-space-5);
  border-bottom: 1px solid var(--lr-hairline);
}
.pv-main-display { text-align: left; color: var(--lr-ink); }
.pv-label {
  font-size: var(--lr-text-caption);
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-caption);
  text-transform: uppercase;
  color: var(--lr-ink-tertiary);
  opacity: 1;
  margin-bottom: var(--lr-space-2);
}
.pv-value {
  font-size: 46px;
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: none;
  color: var(--lr-ink);
  margin: 0 0 var(--lr-space-3);
}
/* The same brand rule that sits under the OBR figure at the top of the page. */
.pv-value::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  background: var(--lr-brand);
  border-radius: 2px;
  margin-top: var(--lr-space-4);
}
.pv-metadata {
  font-size: var(--lr-text-small);
  color: var(--lr-ink-secondary);
  opacity: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--lr-space-2);
  flex-wrap: wrap;
}
.pv-meta-separator { color: var(--lr-hairline); opacity: 1; }

/* --- Report panels ---------------------------------------------------------- */
.pv-details-section { display: grid; grid-template-columns: 1fr; gap: var(--lr-space-5); margin: var(--lr-space-5) 0; }
.pv-calculation-panel,
.pv-convergence-panel,
.pv-sensitivity-panel,
.journals-intro-panel,
.journals-snapshot-panel,
.journals-example-panel,
.csv-download-panel {
  background: var(--lr-canvas);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-card);
  box-shadow: none;
  padding: var(--lr-space-5);
  margin-bottom: var(--lr-space-5);
}
.pv-calculation-panel h3,
.pv-convergence-panel h3,
.pv-sensitivity-panel h3,
.journals-snapshot-panel h3,
.journals-example-panel h3 {
  color: var(--lr-ink);
  font-size: var(--lr-text-h3);
  font-weight: var(--lr-weight-semi);
  letter-spacing: -.012em;
  margin: 0 0 var(--lr-space-4);
}
.journals-intro-panel p,
.journals-intro-panel ul { color: var(--lr-ink-secondary); line-height: var(--lr-leading-body); margin: var(--lr-space-2) 0; }
.monthly-journals-section { margin: var(--lr-space-6) 0; }

/* --- Formula and inputs ------------------------------------------------------ */
.pv-formula-box {
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline-soft);
  border-radius: var(--lr-radius-control);
  padding: var(--lr-space-4);
  margin-bottom: var(--lr-space-5);
}
.pv-formula-box p { margin: var(--lr-space-2) 0; color: var(--lr-ink-secondary); font-size: var(--lr-text-small); }
.pv-formula-detail {
  font-family: var(--lr-font-mono);
  font-size: 12px;
  background: var(--lr-canvas);
  color: var(--lr-ink);
  padding: var(--lr-space-3);
  border-radius: 4px;
  border-left: 3px solid var(--lr-brand);
  margin-top: var(--lr-space-3) !important;
}
.pv-inputs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--lr-space-4); }
.pv-input-item { display: flex; flex-direction: column; gap: 5px; }
.pv-input-label {
  font-size: 10.5px;
  color: var(--lr-ink-tertiary);
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.pv-input-value {
  font-size: var(--lr-text-h3);
  color: var(--lr-ink);
  font-weight: var(--lr-weight-semi);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.012em;
}

/* --- Convergence status ------------------------------------------------------ */
.convergence-status {
  padding: var(--lr-space-3) var(--lr-space-4);
  border-radius: var(--lr-radius-control);
  margin-bottom: var(--lr-space-4);
  display: flex;
  align-items: center;
  gap: var(--lr-space-2);
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-medium);
  border: 1px solid transparent;
}
.convergence-status.success { background: var(--lr-success-bg); color: var(--lr-success); border-color: var(--lr-brand-edge); }
.convergence-status.warning { background: var(--lr-warning-bg); color: var(--lr-warning); border-color: var(--lr-warning-edge); }
.status-icon { font-size: var(--lr-text-body); }

/* --- Report tables ------------------------------------------------------------ */
/* One table style for iterations, sensitivity and the amortisation schedule. */
.iteration-table-wrapper,
.sensitivity-table-wrapper,
.schedule-table-wrapper { overflow-x: auto; margin-top: var(--lr-space-3); }

.iteration-table,
.sensitivity-table,
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.iteration-table th,
.sensitivity-table th,
.schedule-table th {
  background: var(--lr-canvas);
  color: var(--lr-ink-tertiary);
  font-size: 10.5px;
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
  padding: var(--lr-space-3);
  border-bottom: 1px solid var(--lr-hairline);
  white-space: nowrap;
}
.iteration-table td,
.sensitivity-table td,
.schedule-table td {
  padding: 9px var(--lr-space-3);
  border-bottom: 1px solid var(--lr-hairline-soft);
  color: var(--lr-ink);
}
.iteration-table tbody tr:hover,
.sensitivity-table tbody tr:hover,
.schedule-table tbody tr:hover { background: var(--lr-surface); }
.sensitivity-table tbody tr.highlight { background: var(--lr-brand-tint); font-weight: var(--lr-weight-semi); }
.sensitivity-intro { color: var(--lr-ink-secondary); font-size: var(--lr-text-small); margin-bottom: var(--lr-space-3); }
.total-row { background: var(--lr-surface); font-weight: var(--lr-weight-semi); border-top: 2px solid var(--lr-brand); }
.total-row td { padding-top: var(--lr-space-3) !important; padding-bottom: var(--lr-space-3) !important; }

/* --- Compliance note ----------------------------------------------------------- */
.pv-compliance-note {
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-left: 3px solid var(--lr-brand);
  border-radius: var(--lr-radius-control);
  padding: var(--lr-space-4) var(--lr-space-5);
  margin-top: var(--lr-space-5);
}
.pv-compliance-note h4 {
  color: var(--lr-ink);
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-semi);
  margin: 0 0 var(--lr-space-2);
}
.pv-compliance-note p { color: var(--lr-ink-secondary); font-size: 12.5px; margin: 0; line-height: var(--lr-leading-body); }

/* --- Journals ------------------------------------------------------------------ */
.journal-entry-box {
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline-soft);
  border-radius: var(--lr-radius-control);
  padding: var(--lr-space-4);
  margin: var(--lr-space-4) 0;
}
.journal-entry-box p { color: var(--lr-ink); font-size: var(--lr-text-small); font-weight: var(--lr-weight-semi); margin: 0 0 var(--lr-space-2); }
.journal-lines { margin-left: var(--lr-space-4); font-family: var(--lr-font-mono); font-size: 12px; }
.journal-line { padding: 3px 0; color: var(--lr-ink-secondary); }

.disclosure-note-panel {
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-left: 3px solid var(--lr-brand);
  border-radius: var(--lr-radius-control);
  padding: var(--lr-space-5);
  margin: var(--lr-space-4) 0;
  font-family: var(--lr-font-mono);
  font-size: 12px;
  color: var(--lr-ink);
  white-space: pre-wrap;
  line-height: 1.7;
}

/* --- CSV download --------------------------------------------------------------- */
.csv-download-panel { text-align: center; }
.btn-csv-download {
  display: inline-flex;
  align-items: center;
  gap: var(--lr-space-2);
  background: var(--lr-brand);
  color: var(--lr-ink-inverse);
  padding: 9px 20px;
  border-radius: var(--lr-radius-control);
  text-decoration: none;
  font-weight: var(--lr-weight-medium);
  font-size: var(--lr-text-small);
  box-shadow: none;
  transition: background var(--lr-transition);
}
.btn-csv-download:hover {
  background: var(--lr-brand-hover);
  transform: none;
  box-shadow: none;
  color: var(--lr-ink-inverse);
  text-decoration: none;
}
.download-icon { font-size: var(--lr-text-body); }

/* --- FRS 102 tabs ---------------------------------------------------------------- */
.frs-tabs {
  display: flex;
  gap: var(--lr-space-1);
  border-bottom: 1px solid var(--lr-hairline);
  margin-bottom: var(--lr-space-5);
  flex-wrap: wrap;
}
.frs-tab {
  padding: 9px var(--lr-space-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--lr-ink-secondary);
  font-family: inherit;
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-medium);
  cursor: pointer;
  transition: color var(--lr-transition), border-color var(--lr-transition);
}
.frs-tab:hover { color: var(--lr-ink); background: transparent; }
.frs-tab.active { color: var(--lr-brand); border-bottom-color: var(--lr-brand); background: transparent; }
.frs-tab-content { display: none; }
.frs-tab-content.active { display: block; }

/* --- Supporting surfaces (rate information and legacy sections) -------------------- */
.result-container { display: flex; justify-content: center; padding-inline: var(--lr-gutter); }
.result-grid {
  width: 100%;
  max-width: var(--lr-measure);
  display: grid;
  /* minmax(0, 1fr), NOT 1fr. A bare 1fr means minmax(auto, 1fr), and that auto
     minimum resolves to the widest item's MIN-CONTENT. The amortisation table
     has a min-content of 620px, so on a 390px phone the single track was
     forced to 620px inside a 302px container: every card inherited the
     oversized track, sat at a different left offset, and the page scrolled
     286px sideways. minmax(0, 1fr) lets the track shrink to its container and
     leaves the wide tables to scroll inside their own wrappers. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lr-space-5);
  margin: var(--lr-space-5) 0 var(--lr-space-8);
}
.result-grid .card {
  background: var(--lr-canvas);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-card);
  box-shadow: none;
}
.result-grid .card__head {
  padding: var(--lr-space-4) var(--lr-space-5);
  border-bottom: 1px solid var(--lr-hairline-soft);
  background: var(--lr-canvas);
  border-radius: var(--lr-radius-card) var(--lr-radius-card) 0 0;
}
.result-grid .card__head h2 {
  margin: 0;
  color: var(--lr-ink);
  font-size: var(--lr-text-h3);
  font-weight: var(--lr-weight-semi);
  letter-spacing: -.012em;
}
.result-grid .card__body { padding: var(--lr-space-5); }

/* Let the report's nested boxes shrink.

   Every grid and flex ITEM defaults to min-width: auto, which refuses to go
   below its own min-content. In the report that cascades: a wide table or a
   long formula inside a nested panel forces that panel wider, the panel forces
   its track wider, the track forces the page wider, and the whole thing scrolls
   sideways on a phone. Measured at 390px before this rule: document
   scrollWidth 676px, and top-level cards sitting at two different left offsets
   (24px and 183px) because some were centred in an oversized track.

   The wide tables already have their own overflow-x wrappers, so once the
   boxes around them can shrink, the TABLE scrolls rather than the page. */
.result-grid,
.result-grid > *,
.result-grid .card,
.result-grid .card__body,
.result-grid [class$="-section"],
.result-grid [class$="-panel"],
.result-grid [class$="-grid"],
.result-grid [class$="-grid"] > *,
.result-grid [class$="-content"],
.result-grid [class$="-item"] { min-width: 0; }

.kv {
  --kv-label: 200px;
  display: grid;
  grid-template-columns: var(--kv-label) 1fr;
  column-gap: var(--lr-space-4);
  row-gap: var(--lr-space-3);
  align-items: baseline;
  font-size: var(--lr-text-small);
}
.kv div:nth-child(odd) { color: var(--lr-ink-secondary); }
.kv div:nth-child(even) { color: var(--lr-ink); }
.kv .num { font-variant-numeric: tabular-nums; text-align: right; }
.muted { color: var(--lr-ink-secondary); }

/* --- Rate comparison --------------------------------------------------------------- */
.rate-comparison-list { display: grid; gap: var(--lr-space-3); }
.rate-comparison-item {
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-control);
  padding: var(--lr-space-4);
  background: var(--lr-canvas);
}
.rate-comparison-item--green { border-left: 3px solid var(--lr-brand); }
.rate-comparison-item--amber { border-left: 3px solid var(--lr-warning); }
.rate-comparison-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--lr-space-3); flex-wrap: wrap; }
.rate-comparison-title { color: var(--lr-ink); font-size: var(--lr-text-small); font-weight: var(--lr-weight-semi); }
.rate-comparison-meta { color: var(--lr-ink-secondary); font-size: 12.5px; margin-top: 3px; }
.rate-comparison-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--lr-space-3) var(--lr-space-4); margin-top: var(--lr-space-4); }
.rate-comparison-label {
  color: var(--lr-ink-tertiary);
  font-size: 10.5px;
  font-weight: var(--lr-weight-semi);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.rate-comparison-value { color: var(--lr-ink); font-weight: var(--lr-weight-semi); font-variant-numeric: tabular-nums; }
.rate-flag {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.rate-flag--green { background: var(--lr-band-excellent-bg); color: var(--lr-band-excellent); }
.rate-flag--amber { background: var(--lr-band-fair-bg); color: var(--lr-band-fair); }
.rate-comparison-confirmation {
  margin-top: var(--lr-space-4);
  padding: var(--lr-space-3) var(--lr-space-4);
  border-radius: var(--lr-radius-control);
  background: var(--lr-brand-tint);
  border: 1px solid var(--lr-brand-edge);
  color: var(--lr-brand);
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-medium);
}
.rate-comparison-reasons { margin: var(--lr-space-4) 0 0 var(--lr-space-4); color: var(--lr-ink-secondary); font-size: var(--lr-text-small); }
.rate-comparison-reasons li + li { margin-top: 5px; }

@media (max-width: 768px) {
  .pv-hero-card { padding: var(--lr-space-4) 0 var(--lr-space-5); }
  .pv-value { font-size: 32px; }
  .pv-inputs-grid { grid-template-columns: 1fr; }
  .pv-calculation-panel,
  .pv-convergence-panel,
  .pv-sensitivity-panel,
  .journals-intro-panel,
  .journals-snapshot-panel,
  .journals-example-panel,
  .csv-download-panel { padding: var(--lr-space-4); }

  /* These carry real column data; horizontal scroll is the right answer here,
     unlike the dashboard's three-column action table. */
  .schedule-table, .iteration-table, .sensitivity-table { font-size: 11.5px; min-width: 560px; }
  .schedule-table th, .schedule-table td { padding: 7px var(--lr-space-2); }
  .btn-csv-download { width: 100%; justify-content: center; }
  .journal-entry-box { padding: var(--lr-space-3); }
  .journal-lines { font-size: 11px; margin-left: var(--lr-space-3); }

  .result-grid { margin: var(--lr-space-4) 0 var(--lr-space-7); }
  .result-grid .card__head, .result-grid .card__body { padding: var(--lr-space-4); }
  .kv { grid-template-columns: 1fr; gap: var(--lr-space-2); }
  .kv div:nth-child(odd) { font-weight: var(--lr-weight-medium); }
  .kv .num { text-align: left; }
}

/* ============================================================================
   REPORT — KEY DRIVERS AND ASSESSMENT
   ============================================================================
   Overrides output-professional.css, which draws these as two gradient-filled
   columns (mint against orange) with filled circular icons and a third
   gradient panel beneath. Three tinted grounds stacked on one screen is the
   thing the redesign is removing everywhere else; positive and risk are
   separated here by a marker and a heading colour, both desaturated, and the
   columns sit on the page ground.
   ========================================================================== */
.key-drivers-section { margin: var(--lr-space-6) 0; }
.key-drivers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lr-space-5); margin-top: var(--lr-space-4); }

.drivers-column {
  background: var(--lr-canvas);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-card);
  padding: var(--lr-space-5);
}
.drivers-column.positives,
.drivers-column.risks { background: var(--lr-canvas); border-color: var(--lr-hairline); }

.drivers-column h3 {
  font-size: var(--lr-text-caption);
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--lr-tracking-caption);
  margin: 0 0 var(--lr-space-4);
  padding-bottom: var(--lr-space-3);
  border-bottom: 1px solid var(--lr-hairline-soft);
}
.drivers-column.positives h3 { color: var(--lr-band-excellent); }
.drivers-column.risks h3 { color: var(--lr-band-weak); }

.driver-item {
  display: flex;
  align-items: flex-start;
  gap: var(--lr-space-3);
  margin: 0 0 var(--lr-space-3);
  padding: 0 0 var(--lr-space-3);
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--lr-hairline-soft);
  transition: none;
}
.drivers-column .driver-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.driver-item:hover { transform: none; box-shadow: none; }

/* A small dot rather than a filled disc carrying a glyph: the text says which
   it is, and fourteen filled circles on one page is a lot of colour. */
.driver-icon {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 7px 0 0;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
}
.drivers-column.positives .driver-icon { background: var(--lr-band-excellent); }
.drivers-column.risks .driver-icon { background: var(--lr-band-weak); }

.driver-text { flex: 1; min-width: 0; font-size: 12.5px; line-height: var(--lr-leading-body); color: var(--lr-ink-secondary); }

.overall-assessment {
  margin-top: var(--lr-space-5);
  padding: var(--lr-space-4) var(--lr-space-5);
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-left: 3px solid var(--lr-brand);
  border-radius: var(--lr-radius-control);
}
.overall-assessment h4 {
  font-size: var(--lr-text-caption);
  font-weight: var(--lr-weight-semi);
  color: var(--lr-ink-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--lr-tracking-caption);
  margin: 0 0 var(--lr-space-2);
}
.overall-assessment p { font-size: 12.5px; line-height: var(--lr-leading-body); color: var(--lr-ink); margin: 0; }

@media (max-width: 768px) {
  .key-drivers-grid { grid-template-columns: 1fr; gap: var(--lr-space-4); }
  .drivers-column { padding: var(--lr-space-4); }
}

/* ============================================================================
   CALLOUTS
   ============================================================================
   One shape for every in-page notice. The report had four different ones, each
   written inline with its own fill, border and text colour (#fff7e6/#8a5a00,
   #f0f7ff/#2c5282, #fff3cd/#d97706, #fef9e7/#1f3b2c). Tone is carried by the
   left rule and the heading; the ground stays the same in all four.
   ========================================================================== */
.lr-callout {
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-left: 3px solid var(--lr-ink-tertiary);
  border-radius: var(--lr-radius-control);
  padding: var(--lr-space-4);
  margin: var(--lr-space-4) 0;
  font-size: 12.5px;
  line-height: var(--lr-leading-body);
  color: var(--lr-ink-secondary);
}
.lr-callout p { margin: 0 0 var(--lr-space-3); }
.lr-callout > :last-child { margin-bottom: 0; }
.lr-callout strong { color: var(--lr-ink); font-weight: var(--lr-weight-semi); }
.lr-callout ul { margin: 0 0 var(--lr-space-3) var(--lr-space-4); padding: 0; }
.lr-callout li { margin: 3px 0; }
.lr-callout svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--lr-ink-tertiary); }

.lr-callout--info    { border-left-color: var(--lr-brand); }
.lr-callout--warning { border-left-color: var(--lr-warning); }
.lr-callout--warning strong { color: var(--lr-warning); }
.lr-callout--danger  { border-left-color: var(--lr-danger); }
.lr-callout--danger strong { color: var(--lr-danger); }

.lr-callout__row { display: flex; align-items: center; gap: var(--lr-space-2); }
.lr-callout__label {
  font-size: 10.5px;
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lr-ink-tertiary);
  margin-bottom: 5px;
}
.lr-callout__box {
  background: var(--lr-canvas);
  border: 1px solid var(--lr-hairline-soft);
  border-radius: 6px;
  padding: var(--lr-space-3);
  margin-top: var(--lr-space-1);
}
.lr-callout__box .lr-callout__body { font-size: 12.5px; color: var(--lr-ink); white-space: pre-wrap; }

/* Vertical rhythm helper for report sections. */
.lr-section-gap { margin-top: var(--lr-space-6); }

/* --- Report document prose (methodology, FRS 102 narrative) ------------------- */
.lr-doc-h3 {
  color: var(--lr-ink);
  font-size: var(--lr-text-h3);
  font-weight: var(--lr-weight-semi);
  letter-spacing: -.012em;
  margin: var(--lr-space-6) 0 var(--lr-space-3);
}
.lr-doc-h3--first { margin-top: 0; }
.lr-doc-h4 {
  color: var(--lr-ink);
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-semi);
  margin: var(--lr-space-5) 0 var(--lr-space-3);
}
.lr-doc-block { margin: var(--lr-space-5) 0; }
.lr-doc-p { margin: var(--lr-space-3) 0; font-size: 12.5px; line-height: var(--lr-leading-body); color: var(--lr-ink-secondary); }
.lr-doc-list {
  margin: var(--lr-space-2) 0 var(--lr-space-2) var(--lr-space-5);
  padding: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--lr-ink-secondary);
}
.lr-doc-list strong { color: var(--lr-ink); }

/* Secondary notes: the report used four slate greys for these. */
.lr-note { margin-top: var(--lr-space-3); font-size: 12px; color: var(--lr-ink-tertiary); line-height: var(--lr-leading-body); }
.lr-note-inline { font-size: 10.5px; color: var(--lr-ink-tertiary); font-weight: var(--lr-weight-regular); }
.lr-note-absent { font-size: 12.5px; color: var(--lr-ink-tertiary); font-style: italic; }
.lr-input-flag { display: block; margin-top: 3px; font-size: 11px; color: var(--lr-warning); }
.lr-badge-trailing { font-size: 10px; margin-left: var(--lr-space-2); }
.lr-journal-pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--lr-font-mono);
  font-size: 12px;
  color: var(--lr-ink);
}

/* --- PV iteration audit panel -------------------------------------------------- */
.pv-iter-panel {
  margin-top: var(--lr-space-4);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-control);
  padding: var(--lr-space-3) var(--lr-space-4);
}
.pv-iter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lr-space-3);
  cursor: pointer;
  font-size: var(--lr-text-small);
}
.pv-iter-panel__state { margin-left: var(--lr-space-2); font-size: 12px; }
.pv-iter-panel__state--ok { color: var(--lr-success); }
.pv-iter-panel__state--warn { color: var(--lr-warning); }
.pv-iter-panel__toggle { font-size: 11px; color: var(--lr-ink-tertiary); white-space: nowrap; }
.pv-iter-panel__body { margin-top: var(--lr-space-3); }

/* --- Pillar bar labels ----------------------------------------------------------- */
.pill-label--plain { text-transform: none; letter-spacing: 0; font-weight: var(--lr-weight-regular); }
.pill-unit { font-size: 12px; color: var(--lr-ink-tertiary); font-weight: var(--lr-weight-regular); margin-left: 3px; }

/* --- Start page and wide tables ------------------------------------------------ */
.lr-tiers--pair { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 760px; margin-inline: auto; }
.lr-start__smallprint { text-align: center; max-width: 60ch; margin: 0 auto; }
.lr-tag--full { background: var(--lr-band-excellent-bg); color: var(--lr-band-excellent); }

/* The admin reports table carries eleven columns of real data whose headers the
   reader needs, so it scrolls on a phone rather than stacking the way the
   dashboard's three-column table does. */
@media (max-width: 700px) {
  .lr-table--wide thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .lr-table--wide,
  .lr-table--wide tbody,
  .lr-table--wide tr,
  .lr-table--wide td { display: revert; width: auto; }
  .lr-table--wide { min-width: 900px; }
  .lr-table--wide tr { padding: 0; }
  .lr-table--wide td { padding: var(--lr-space-3) var(--lr-space-4); border-bottom: 1px solid var(--lr-hairline-soft); }
  .lr-table--wide td + td { margin-top: 0; }
  .lr-table--wide .lr-table__actions { text-align: right; white-space: nowrap; }
  .lr-table--wide .lr-table__actions .lr-action { width: auto; display: inline-block; margin: 0 0 0 var(--lr-space-2); }
  .lr-table--wide .lr-table__actions form { display: inline; margin: 0; }
}

/* ============================================================================
   CONTENT PAGES
   ============================================================================
   landing, why-lease-rater, for-accountants, how-to-use and the FRS 102 guide
   each carried their own copy of the same 80-to-450-line style block: a green
   gradient hero with an inline SVG cross pattern at 0.15 opacity, a 3rem/900
   heading with a text-shadow, and a grid of cards lifting 4px on hover under a
   heavy shadow. The duplication meant a change to one page reached none of the
   others. They share these components now.

   The hero is type on the page ground. The pattern, the gradient and the
   text-shadow are gone: a shadow behind white text on green is compensating
   for contrast the colour should not have been asking for.
   ========================================================================== */
.lr-content-hero {
  background: var(--lr-canvas);
  color: var(--lr-ink);
  padding: var(--lr-space-8) var(--lr-gutter) var(--lr-space-6);
  text-align: center;
  border-bottom: 1px solid var(--lr-hairline);
}
.lr-content-hero::before { content: none; }
.lr-content-hero .container { max-width: 760px; margin: 0 auto; padding: 0; }
.lr-content-hero h1 {
  font-size: 36px;
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-display);
  line-height: var(--lr-leading-tight);
  color: var(--lr-ink);
  text-shadow: none;
  margin: 0 0 var(--lr-space-4);
}
.lr-content-hero .hero-sub {
  font-size: var(--lr-text-h3);
  color: var(--lr-ink-secondary);
  line-height: var(--lr-leading-body);
  opacity: 1;
  max-width: 60ch;
  margin: 0 auto;
}
.lr-content-hero .hero-badge,
.lr-content-hero .badge {
  display: inline-block;
  background: var(--lr-brand-tint);
  border: 1px solid var(--lr-brand-edge);
  color: var(--lr-brand);
  padding: 3px 12px;
  border-radius: var(--lr-radius-pill);
  font-size: 10.5px;
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--lr-tracking-caption);
  margin-bottom: var(--lr-space-4);
}

.lr-content-section {
  padding: var(--lr-space-7) var(--lr-gutter);
  background: var(--lr-canvas);
}
.lr-content-section--sunken { background: var(--lr-surface); }
.lr-content-section .container { max-width: var(--lr-measure); margin: 0 auto; padding: 0; }
.lr-content-section h2 {
  text-align: center;
  color: var(--lr-ink);
  font-size: var(--lr-text-h1);
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-h1);
  margin: 0 0 var(--lr-space-3);
}
.lr-content-section .lead {
  text-align: center;
  /* .lead.prose is a multi-paragraph intro, not a one-line strapline; it is
     left-aligned below. */
  font-size: var(--lr-text-small);
  color: var(--lr-ink-secondary);
  line-height: var(--lr-leading-body);
  max-width: 68ch;
  margin: 0 auto var(--lr-space-6);
}

.lr-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--lr-space-4);
  max-width: var(--lr-measure);
  margin: 0 auto;
  align-items: start;
}
.lr-content-card {
  background: var(--lr-canvas);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-card);
  box-shadow: none;
  padding: var(--lr-space-5);
  transition: border-color var(--lr-transition);
}
.lr-content-card:hover { transform: none; box-shadow: none; border-color: var(--lr-ink-tertiary); }
.lr-content-card h2,
.lr-content-card h3,
.lr-content-card h4 {
  color: var(--lr-ink);
  font-size: var(--lr-text-h3);
  font-weight: var(--lr-weight-semi);
  letter-spacing: -.012em;
  text-align: left;
  margin: 0 0 var(--lr-space-3);
}

/* Prose inside a content card or section. */
.lr-content-section .prose,
.lr-content-card .prose {
  color: var(--lr-ink-secondary);
  font-size: 12.5px;
  line-height: var(--lr-leading-body);
}
.lr-content-section .prose p,
.lr-content-card .prose p { margin: 0 0 var(--lr-space-3); }
.lr-content-section .prose > :last-child,
.lr-content-card .prose > :last-child { margin-bottom: 0; }
.lr-content-section .prose ul,
.lr-content-card .prose ul { margin: var(--lr-space-3) 0; padding-left: var(--lr-space-5); }
.lr-content-section .prose li,
.lr-content-card .prose li { margin-bottom: 5px; }
.lr-content-section .prose strong,
.lr-content-card .prose strong { color: var(--lr-ink); font-weight: var(--lr-weight-semi); }
.lr-content-section .prose a,
.lr-content-card .prose a { color: var(--lr-brand); text-decoration: none; }
.lr-content-section .prose a:hover,
.lr-content-card .prose a:hover { text-decoration: underline; }

/* The .prose link rules above colour EVERY link inside prose brand green, at
   0,2,1. A button marked up as a link (.lr-action--primary, 0,1,0) therefore
   lost its label colour and rendered brand green on a brand green fill --
   invisible. Restate the button's own colours at a specificity that wins over
   both this file's .prose rules and page-style.css's .lr-page .prose a. */
.prose a.lr-action.lr-action--primary,
.prose a.lr-action.lr-action--primary:hover { color: var(--lr-ink-inverse); }
.prose a.lr-action:hover { text-decoration: none; }
.lr-content-section .prose h3,
.lr-content-section .prose h4 {
  color: var(--lr-ink);
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-semi);
  text-align: left;
  margin: var(--lr-space-5) 0 var(--lr-space-2);
}

.lr-content-actions {
  display: flex;
  justify-content: center;
  gap: var(--lr-space-3);
  flex-wrap: wrap;
  margin-top: var(--lr-space-5);
}

@media (max-width: 700px) {
  .lr-content-hero { padding: var(--lr-space-6) var(--lr-gutter) var(--lr-space-5); }
  .lr-content-hero h1 { font-size: 28px; }
  .lr-content-section { padding: var(--lr-space-6) var(--lr-gutter); }
  .lr-content-card { padding: var(--lr-space-4); }
}

/* --- Content page extras --------------------------------------------------------- */
.lr-content-page .lr-content-section + .lr-content-section { padding-top: 0; }
/* ----------------------------------------------------------------------------
   CONTENT FLOW -- the single-column layout for long-form content pages.

   .lr-content-grid pairs sections side by side, and a CSS grid row is as tall
   as its tallest card. align-items: start stops a short card stretching, but
   the space still belongs to the row, so it sits there empty. Measured across
   the seven content pages: 19,802px of dead vertical space at 1280px wide, the
   worst being 4,753px below one card on /how-to-use.

   The cause is that the component was asked to lay out content it does not
   suit. Section lengths inside a single page vary by up to 56x (21 words to
   1,182 on /how-to-use), and the template paired them by POSITION, not length.
   Cards also imply equivalence: a 21-word section and a 1,182-word section in
   identical boxes tells a reader they are peers.

   So long-form pages now flow in one column, separated by hairlines, which is
   the rule the rest of the design system already follows: hierarchy is carried
   by type size and hairlines, not by boxes. The card grid stays where content
   genuinely IS parallel and short -- the landing page's comparison and
   audience cards.
   -------------------------------------------------------------------------- */
.lr-content-flow {
  /* 76ch, matching .lead.prose above it, NOT --lr-measure (1040px).

     The two-column grid was accidentally doing a job nobody had specified:
     each card was about 500px, which is a readable line. Take the columns away
     and the text runs the full 1040px, roughly 120 characters a line, which is
     far past comfortable reading and looks worse than the gaps it replaced.
     One measure for the whole page: intro and body in the same column. */
  max-width: 76ch;
  margin: 0 auto;
}
.lr-content-flow > article {
  padding-block: var(--lr-space-6);
  border-top: 1px solid var(--lr-hairline);
}
.lr-content-flow > article:first-child {
  border-top: none;
  padding-top: var(--lr-space-2);
}
.lr-content-flow > article:last-child { padding-bottom: var(--lr-space-2); }
.lr-content-flow h2 {
  color: var(--lr-ink);
  font-size: var(--lr-text-h3);
  font-weight: var(--lr-weight-semi);
  letter-spacing: -.012em;
  text-align: left;
  margin: 0 0 var(--lr-space-3);
}

/* ============================================================================
   EDITORIAL CONTENT PAGES

   Applies ONLY inside .lr-content-page--editorial, which app.py sets on the
   seven guide pages. /terms, /privacy and /cookies share content.html and
   deliberately do not get it, so legal copy stays plain.

   WHY THIS EXISTS. The guide pages read as monotonous. Measured on
   /obtainable-borrowing-rate before this block: body copy 12.5px (hardcoded,
   the same size as a form label), section headings 16px, so a HEADING-TO-BODY
   RATIO OF 1.28:1. Apple's editorial pages run about 2.35:1. That ratio is why
   every section looked identical -- there was almost no hierarchy to see.

   The fix is mostly on the heading side, which costs almost no vertical space,
   plus tonal bands instead of hairlines.

   NO SHADOWS, DELIBERATELY. The owner asked about alternating shadows. Three
   sources say no: Material Design 3 moved to "tone and tint as the primary
   means of illustrating elevation"; Material reserves elevation for
   INTERACTIVITY, so a shadow on a static paragraph tells a reader it can be
   lifted; and Apple uses "no shadows on chrome". Closest to home, this site's
   own redesign removed every gradient and text-shadow and sets
   .lr-content-card { box-shadow: none }. Tone reads as document; shadow reads
   as consumer app.
   ========================================================================== */

/* --- Type. Body moves from a hardcoded 12.5px to the site's own body token;
       headings do the heavy lifting at 28px, giving a 2:1 ratio. ---------- */
.lr-content-page--editorial .prose {
  font-size: var(--lr-text-body);
  line-height: 1.6;
}
.lr-content-page--editorial .lr-content-flow h2 {
  font-size: 28px;
  font-weight: var(--lr-weight-semi);
  /* Negative tracking at display sizes, as Apple does at 17px and above. */
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 var(--lr-space-4);
}

/* --- Section numbering. A CSS counter, so no content file changes and no
       numbers to keep in sync when a section is added or removed. -------- */
.lr-content-page--editorial .lr-content-flow { counter-reset: lr-section; }
.lr-content-page--editorial .lr-content-flow > article { counter-increment: lr-section; }
.lr-content-page--editorial .lr-content-flow h2::before {
  content: counter(lr-section, decimal-leading-zero);
  display: block;
  font-size: var(--lr-text-caption);
  font-weight: var(--lr-weight-medium);
  letter-spacing: .14em;
  color: var(--lr-brand);
  margin-bottom: var(--lr-space-2);
}

/* --- Bands. The colour change IS the divider, so the hairlines go.
       Measured luminance: canvas 100%, brand-tint 91.6%, sunken 87.2%.
       --lr-surface is only 0.08% from brand-tint, so it is not used here:
       the two are indistinguishable. Body ink keeps 14.8:1 or better on all
       three. --------------------------------------------------------------- */
.lr-content-page--editorial .lr-content-flow,
.lr-content-page--editorial .lr-content-flow__lead {
  max-width: none;          /* the BAND is full-bleed; the prose is not */
}
.lr-content-page--editorial .lr-content-flow__lead { padding-block: var(--lr-space-7) var(--lr-space-4); }
/* The lead keeps its own max-width and 12.5px size from .lr-content-section
   .lead.prose, which put it on a different measure and a different left edge
   from every section below it (measured 475/489 against 455/529). The inner
   wrapper owns the measure here; the lead only sets its size, one step above
   body, which is what makes it read as an opening paragraph. */
.lr-content-page--editorial .lr-content-flow__lead .lead.prose {
  max-width: none;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lr-ink-secondary);
}
/* The section block sits outside .container on editorial pages, so the
   section's own horizontal padding has to come back. */
.lr-content-page--editorial .lr-content-section { padding-inline: 0; }
.lr-content-page--editorial .lr-content-flow > article {
  border-top: none;
  padding-block: var(--lr-space-8);
  background: var(--lr-canvas);
}
.lr-content-page--editorial .lr-content-flow > article:nth-child(3n+2) {
  background: var(--lr-brand-tint);
}
.lr-content-page--editorial .lr-content-flow > article:nth-child(3n+3) {
  background: var(--lr-surface-sunken);
}
/* Scoped to editorial. content.html emits .lr-content-flow__inner on EVERY
   page that uses it, including /terms, /privacy and /cookies, so an unscoped
   rule here would silently reflow the legal pages. On those pages the wrapper
   is an inert div and the existing .lr-content-flow measure still governs. */
.lr-content-page--editorial .lr-content-flow__inner {
  max-width: 68ch;
  margin: 0 auto;
  padding-inline: var(--lr-gutter);
}

/* --- Two-column section: heading rail on the left, prose on the right.

   A full-bleed band with a 489px column centred in 1376px still reads as an
   empty page, which was half the original complaint. Widening the prose is
   the wrong answer: it was already running ~95 characters. Instead the
   heading and its number move into their own rail, so the section occupies
   about 900px of the width while the READING LINE STAYS SHORT. This is the
   pattern technical documentation uses for exactly this reason.

   Only above 1100px. Below that the rail stacks back on top, which is the
   single-column layout unchanged. ------------------------------------------ */
@media (min-width: 1100px) {
  .lr-content-page--editorial .lr-content-flow__inner {
    max-width: 62rem;
    display: grid;
    grid-template-columns: 15rem minmax(0, 34rem);
    gap: var(--lr-space-7);
    align-items: start;
  }
  .lr-content-page--editorial .lr-content-flow h2 {
    grid-column: 1;
    margin: 0;
    font-size: 24px;          /* a rail heading needs less size than a full-width one */
    /* Not sticky. A sticky rail heading collides with the sticky nav band,
       which is position: sticky; top: 0 with its own inset wrapper -- the
       heading rode up underneath it. Not worth the flourish. */
  }
  .lr-content-page--editorial .lr-content-flow .prose { grid-column: 2; }
  /* The lead has no heading, so it sits in the prose column to stay on the
     same left edge as every section below it. */
  .lr-content-page--editorial .lr-content-flow__lead .lr-content-flow__inner > * {
    grid-column: 2;
  }
}

/* --- Subheadings. Measured before this rule: h2 24px, h3 13px, body 14px,
       definition label 14px bold -- so a SUBHEADING WAS SMALLER THAN THE TEXT
       IT HEADS, and weaker than the bold labels sitting under it. Sizes here
       put the ladder back in order: 24 / 17 / 15 / 14. -------------------- */
.lr-content-page--editorial .prose h3 {
  font-size: 17px;
  font-weight: var(--lr-weight-semi);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--lr-ink);
  margin: var(--lr-space-6) 0 var(--lr-space-2);
}
.lr-content-page--editorial .prose h4 {
  font-size: 15px;
  font-weight: var(--lr-weight-semi);
  color: var(--lr-ink);
  margin: var(--lr-space-5) 0 var(--lr-space-2);
}
/* A subheading that opens a section has the h2's margin above it already. */
.lr-content-page--editorial .prose > h3:first-child,
.lr-content-page--editorial .prose > h4:first-child { margin-top: 0; }

/* --- Label-shaped list items become definition rows.

       app.py marks these lists with .lr-deflist. It is NOT done with
       :has(> li > strong:first-child) here, because :first-child ignores text
       nodes: in "<li>a borrowing <strong>term</strong> similar to..." the
       <strong> is a first child too, and styling it as a label pushed the
       rest of the sentence onto its own line starting with a comma. The
       distinction is about where the bold run starts, which only the markup
       can answer, so app.py answers it. Unmarked lists keep their bullets. */
.lr-content-page--editorial .prose ul.lr-deflist {
  list-style: none;
  padding-left: 0;
  margin: var(--lr-space-4) 0;
}
.lr-content-page--editorial .prose ul.lr-deflist > li {
  padding-block: var(--lr-space-3);
  border-top: 1px solid var(--lr-hairline-soft);
  margin-bottom: 0;
}
.lr-content-page--editorial .prose ul.lr-deflist > li:first-child {
  border-top: none;
  padding-top: 0;
}
.lr-content-page--editorial .prose ul.lr-deflist > li > strong:first-child {
  display: block;
  color: var(--lr-ink);
  font-weight: var(--lr-weight-semi);
  margin-bottom: 2px;
}

/* --- Numbered steps. Seven ordered lists across the pages. ------------- */
.lr-content-page--editorial .prose ol {
  list-style: none;
  padding-left: 0;
  counter-reset: lr-step;
}
.lr-content-page--editorial .prose ol > li {
  counter-increment: lr-step;
  position: relative;
  padding-left: var(--lr-space-6);
  margin-bottom: var(--lr-space-3);
}
.lr-content-page--editorial .prose ol > li::before {
  content: counter(lr-step);
  position: absolute;
  left: 0;
  top: -1px;
  font-size: var(--lr-text-h3);
  font-weight: var(--lr-weight-semi);
  font-variant-numeric: tabular-nums;
  color: var(--lr-brand);
  opacity: .5;
}

/* --- Figures. 99 currency and percentage values inline; tabular numerals
       stop them jittering between lines. ---------------------------------- */
.lr-content-page--editorial .prose { font-variant-numeric: tabular-nums; }

/* --- Elements that may run wider than the prose measure. This is what uses
       the page width without stretching the paragraphs: a table at 95
       characters would be unreadable as prose but is fine as data. -------- */
.lr-content-page--editorial .prose table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  margin: var(--lr-space-4) 0;
  font-size: var(--lr-text-small);
}
.lr-content-page--editorial .prose th,
.lr-content-page--editorial .prose td {
  text-align: left;
  padding: var(--lr-space-3) var(--lr-space-3) var(--lr-space-3) 0;
  border-bottom: 1px solid var(--lr-hairline-soft);
  vertical-align: top;
}
.lr-content-page--editorial .prose th {
  font-weight: var(--lr-weight-semi);
  color: var(--lr-ink);
  border-bottom-color: var(--lr-hairline);
}

.lr-content-card--feature { margin: var(--lr-space-4) 0; }
.lr-content-grid + .lr-content-card--feature,
.lr-content-card--feature + .lr-content-grid { margin-top: var(--lr-space-4); }
.lr-content-section .lead + .lr-content-grid { margin-top: 0; }

/* A closing call to action: centred type, no coloured band behind it.
   Named .lr-closing rather than .lr-cta because app_v5.css already owns
   .lr-cta as an inline nav button, complete with a green fill, a radius and
   a shadow; reusing the name made this section render as a 445px green pill. */
.lr-closing { text-align: center; border-top: 1px solid var(--lr-hairline); }
.lr-closing h2 { margin-bottom: var(--lr-space-3); }
.lr-closing p {
  font-size: var(--lr-text-small);
  color: var(--lr-ink-secondary);
  max-width: 56ch;
  margin: 0 auto var(--lr-space-5);
  line-height: var(--lr-leading-body);
}
.lr-more--inline {
  display: inline-block;
  text-align: left;
  padding: 0;
  margin-top: var(--lr-space-3);
}

/* ============================================================================
   LANDING PAGE
   ========================================================================== */
.lr-content-hero--landing { padding-bottom: var(--lr-space-7); }
.lr-content-hero--landing .hero-sub { max-width: 72ch; font-size: var(--lr-text-small); text-align: left; }
.lr-hero-trust { margin-top: var(--lr-space-5); }

/* These cards used to open each heading with a red cross and carried an amber
   left rule. Both suited the old copy, which was written to alarm. The copy is
   factual now, so six amber rules down one screen would be arguing with it. */
.lr-content-card--problem h3 { color: var(--lr-ink); }

.lr-audience-card ul { list-style: none; margin: var(--lr-space-3) 0 var(--lr-space-5); padding: 0; }
.lr-audience-card li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--lr-ink-secondary);
  line-height: 1.9;
}
.lr-audience-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lr-brand);
}
.lr-audience-card p { font-size: var(--lr-text-small); color: var(--lr-ink-secondary); margin: 0; }
.lr-audience-card strong { color: var(--lr-ink); }

/* --- Steps ------------------------------------------------------------------ */
.lr-step { position: relative; }
.lr-step__num {
  font-size: var(--lr-text-caption);
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-caption);
  color: var(--lr-brand);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--lr-space-3);
}
.lr-step__num::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--lr-brand);
  margin-top: var(--lr-space-2);
}
.lr-step h4 { margin-bottom: var(--lr-space-2); }
.lr-step p { font-size: 12.5px; color: var(--lr-ink-secondary); line-height: var(--lr-leading-body); margin: 0; }

/* --- Price comparison -------------------------------------------------------- */
.lr-compare { align-items: stretch; }
.lr-compare__option { display: flex; flex-direction: column; }
.lr-compare__option--best { border-color: var(--lr-brand); }
.lr-compare__option--best:hover { border-color: var(--lr-brand); }
.lr-compare__option--muted { background: var(--lr-canvas); }
.lr-compare__option--muted h3,
.lr-compare__option--muted .lr-compare__price { color: var(--lr-ink-tertiary); }
.lr-compare__price {
  font-size: 26px;
  font-weight: var(--lr-weight-semi);
  letter-spacing: var(--lr-tracking-h1);
  font-variant-numeric: tabular-nums;
  color: var(--lr-ink);
  line-height: 1;
  margin-bottom: var(--lr-space-2);
}
.lr-compare__price--struck { text-decoration: line-through; text-decoration-thickness: 1px; }
.lr-compare__unit { font-size: 12px; color: var(--lr-ink-tertiary); margin-bottom: var(--lr-space-4); }
.lr-compare__option ul { list-style: none; margin: 0 0 var(--lr-space-5); padding: 0; }
.lr-compare__option li {
  font-size: 12.5px;
  color: var(--lr-ink-secondary);
  padding: 6px 0;
  border-bottom: 1px solid var(--lr-hairline-soft);
}
.lr-compare__option li:last-child { border-bottom: none; }
.lr-compare__verdict {
  margin-top: auto;
  padding: 8px 0 0;
  font-size: var(--lr-text-caption);
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--lr-tracking-caption);
  color: var(--lr-ink-tertiary);
  text-align: center;
}
.lr-compare__cta { margin-top: auto; }

.lr-content-section .lead.prose {
  text-align: left;
  max-width: 76ch;
  font-size: var(--lr-text-small);
}

/* ============================================================================
   LEGACY COMPATIBILITY LAYER
   ============================================================================
   Three of the old stylesheets each declare their own :root block, and later
   sheets read variables the earlier ones set. style.css defines --brand as
   #0A3B2E, app.css as #17a460 and page-style.css as #16a34a, so whichever
   loads last silently decides what "brand" means for every rule that reads it.

   That interdependence is what makes those files hard to delete: removing any
   one of them takes variables the others still read with it. Redefining the
   names here, mapped onto the design tokens, breaks that coupling. base.css
   loads last, so these values win regardless of which sheets remain, and each
   sheet can be removed independently once nothing else depends on its rules.

   Nothing here is for new code to use. New rules read tokens.css directly.
   ========================================================================== */
:root {
  --bg:          var(--lr-canvas);
  --surface:     var(--lr-canvas);
  --card:        var(--lr-canvas);
  --card-border: var(--lr-hairline);
  --border:      var(--lr-hairline);
  --line:        var(--lr-hairline);
  --fg:          var(--lr-ink);
  --ink:         var(--lr-ink);
  --muted:       var(--lr-ink-secondary);
  --brand:       var(--lr-brand);
  --brand-2:     var(--lr-brand-deep);
  --shadow:      var(--lr-shadow-sm);
}

/* The page container: declared in style.css, app.css and page-style.css with
   three different max-widths (1040, 1100, 1040) and three different margins. */
.container {
  max-width: var(--lr-measure);
  margin-inline: auto;
  margin-block: 0;
  padding-inline: var(--lr-gutter);
}

/* Injected prose (content pages, the methodology narrative). page-style.css
   sets this at 17px/1.65, which is two steps off the body scale. */
.prose { font-size: var(--lr-text-small); line-height: var(--lr-leading-body); color: var(--lr-ink-secondary); }
.prose h1, .prose h2, .prose h3, .prose h4 {
  line-height: var(--lr-leading-tight);
  color: var(--lr-ink);
  font-weight: var(--lr-weight-semi);
  letter-spacing: -.012em;
  margin: var(--lr-space-5) 0 var(--lr-space-2);
}
.prose h2 { font-size: var(--lr-text-h3); }
.prose h3, .prose h4 { font-size: var(--lr-text-small); }
.prose p { margin: 0 0 var(--lr-space-3); }
.prose ul, .prose ol { margin: var(--lr-space-3) 0; padding-left: var(--lr-space-5); }
.prose li { margin-bottom: 5px; }
.prose strong { color: var(--lr-ink); font-weight: var(--lr-weight-semi); }
.prose a { color: var(--lr-brand); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--lr-space-4) 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.prose th, .prose td { border: 1px solid var(--lr-hairline-soft); padding: 7px 10px; text-align: left; }
.prose thead th {
  background: var(--lr-canvas);
  color: var(--lr-ink-tertiary);
  font-size: 10.5px;
  font-weight: var(--lr-weight-semi);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Element defaults style.css was providing. */
h1, h2, h3, h4 { color: var(--lr-ink); }
h1 { font-size: var(--lr-text-h1); font-weight: var(--lr-weight-semi); letter-spacing: var(--lr-tracking-h1); margin: 0 0 var(--lr-space-3); }
h2 { font-size: var(--lr-text-h2); font-weight: var(--lr-weight-semi); letter-spacing: var(--lr-tracking-h2); }
h3 { font-size: var(--lr-text-h3); font-weight: var(--lr-weight-semi); letter-spacing: -.012em; }
h4 { font-size: var(--lr-text-small); font-weight: var(--lr-weight-semi); }
label { font-weight: var(--lr-weight-semi); }

/* Links inside a callout take brand, not the browser default. */
.lr-callout a { color: var(--lr-brand); text-decoration: none; }
.lr-callout a:hover { text-decoration: underline; }

/* --- Admin sensitivity page. Two small utilities; everything else on that
       page reuses .lr-panel, .lr-table and .lr-action. ------------------- */
.lr-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lr-space-3);
  margin-bottom: var(--lr-space-3);
}
.lr-field-row label { font-weight: var(--lr-weight-medium); }
.lr-field-row input {
  width: 7rem;
  padding: var(--lr-space-2) var(--lr-space-3);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-sm, 6px);
  background: var(--lr-canvas);
  color: var(--lr-ink);
  font: inherit;
}
.lr-section-heading {
  margin: var(--lr-space-7) 0 var(--lr-space-3);
  font-size: var(--lr-text-h3);
  font-weight: var(--lr-weight-semi);
  color: var(--lr-ink);
}

/* --- Sample report page. The first content page to carry images, so these
       rules exist nowhere else and apply nowhere else. ------------------- */
.lr-sample-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-sm, 6px);
  margin: var(--lr-space-4) 0;
  background: var(--lr-canvas);
}

/* Above 1100px the editorial layout puts prose in a 34rem column, which caps a
   screenshot at about 544px -- too small to read on a page whose whole job is
   showing the output.

   THE FIRST ATTEMPT AT THIS BROKE THE IMAGES OUT LEFTWARDS with a negative
   margin, across the heading rail. It made them 832px and it COLLIDED: where a
   section heading wraps to three lines, the image sat on top of the third
   line. The owner caught it on section 02, "The entity the rate was calculated
   for".

   So the column itself is wider on these pages instead. Nothing overlaps,
   because nothing leaves its column. Applied via page_class from the route, so
   it reaches only the pages that ask for it. */
@media (min-width: 1100px) {
  .lr-content-page--editorial.lr-content-page--wide .lr-content-flow__inner {
    max-width: 74rem;
    grid-template-columns: 15rem minmax(0, 46rem);
  }
}

/* The sample-report line under the How it works steps. Centred to sit with
   the three step cards above it. Used on the landing page only. */
.lr-steps__after {
  margin: var(--lr-space-5) 0 0;
  text-align: center;
  color: var(--lr-ink-tertiary);   /* same token as .lr-hero__note */
  font-size: 0.95rem;
}
.lr-steps__after a { color: var(--lr-brand); font-weight: var(--lr-weight-semi); }

/* --- Admin SONIA curve status panel ---------------------------------------
   Admin-only; app.py withholds the data from non-admin sessions, so these
   rules never apply on a customer's dashboard. The dot colours mirror
   .lr-credits--* so the two status panels read the same way. */
.lr-curve__headline {
  display: flex;
  align-items: center;
  gap: var(--lr-space-2);
  font-weight: var(--lr-weight-semi);
  margin: 0 0 var(--lr-space-4);
}
.lr-curve--current  .lr-credits__dot { background: var(--lr-success); }
.lr-curve--due_soon .lr-credits__dot { background: var(--lr-warning); }
.lr-curve--overdue  .lr-credits__dot,
.lr-curve--blocked  .lr-credits__dot { background: var(--lr-danger); }
.lr-curve--due_soon .lr-curve__headline { color: var(--lr-warning); }
.lr-curve--overdue  .lr-curve__headline,
.lr-curve--blocked  .lr-curve__headline { color: var(--lr-danger); }

.lr-curve__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--lr-space-3) var(--lr-space-5);
  margin: 0 0 var(--lr-space-4);
}
.lr-curve__grid dt {
  font-size: var(--lr-text-small);
  color: var(--lr-ink-secondary);
  margin-bottom: 2px;
}
.lr-curve__grid dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* --- Worked examples grid (/worked-examples) -------------------------------
   The first column is a ROW HEADER carrying a label and a description beneath
   it. .lr-table th is styled for COLUMN headers -- uppercase, 10.5px, letter
   spaced and white-space:nowrap -- and all four of those are wrong here. The
   nowrap in particular made the description run straight across the numeric
   columns. Caught by rendering the page, not by reading the CSS. */
.lr-examples-grid { table-layout: fixed; }
.lr-examples-grid__col-label { width: 46%; }
.lr-examples-grid__col-rate  { width: 18%; }

/* The definitions table carries five columns and no <colgroup>, so
   table-layout:fixed would split it into five equal parts and wrap
   "Established performer" over three lines. Fixed layout reads widths from the
   FIRST ROW, which here is the thead row, so setting them on the header cells
   works where setting them on tbody cells would be ignored. */
.lr-examples-grid--defs th:first-child { width: 32%; }
.lr-examples-grid--defs th:not(:first-child) { width: 17%; }
.lr-examples-grid--defs th[scope="row"] { font-weight: var(--lr-weight-medium); }
.lr-examples-grid th[scope="row"] {
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  font-size: var(--lr-text-small);
  font-weight: var(--lr-weight-regular);
  color: var(--lr-ink);
  vertical-align: top;
  padding: var(--lr-space-4) var(--lr-space-5);
  border-bottom: 1px solid var(--lr-hairline-soft);
}
.lr-examples-grid tbody tr:last-child th[scope="row"] { border-bottom: none; }
.lr-examples-grid__note {
  display: block;
  margin-top: 3px;
  font-size: var(--lr-text-small);
  line-height: var(--lr-leading-body);
  color: var(--lr-ink-secondary);
}
.prose .lr-examples-grid td {
  /* .prose scopes this rule. Content pages render inside DIV.prose, and
     ".prose th, .prose td { text-align: left }" (base.css) plus
     ".lr-page .prose td" (page-style.css) both beat or tie a bare
     ".lr-examples-grid td", so the rates came out left-aligned. Verified by
     reading the computed style and the ancestor chain in the browser, not by
     counting selectors on paper. */
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: top;
}
.lr-examples-grid__caption {
  font-size: var(--lr-text-small);
  color: var(--lr-ink-secondary);
  margin-top: var(--lr-space-3);
}
@media (max-width: 700px) {
  /* base.css already stacks every .lr-table into blocks below 700px and hides
     the header row -- right for the reports table, where each cell is
     self-describing, but a bare "6.49%" is not. So each rate cell prints its
     own column name from data-label, and the row header becomes the title of
     the block. Fighting the stack with horizontal scroll was the first attempt
     and was worse: table-layout:fixed does not survive display:block, so every
     column came out 448px wide and the rates went off-screen. */
  .lr-examples-grid th[scope="row"] {
    display: block;
    width: 100%;
    padding: var(--lr-space-4) var(--lr-space-4) var(--lr-space-2);
    border-bottom: none;
  }
  .prose .lr-examples-grid td {
    display: flex;
    justify-content: space-between;
    gap: var(--lr-space-4);
    width: 100%;
    text-align: right;
    padding: 3px var(--lr-space-4);
    border-bottom: none;
  }
  .prose .lr-examples-grid td::before {
    content: attr(data-label);
    color: var(--lr-ink-secondary);
    font-size: var(--lr-text-small);
    text-align: left;
  }
  .lr-examples-grid tbody tr { padding-bottom: var(--lr-space-4); }
}

/* =========================================================================
   How the spread is built (.sv-*)
   Tokens only -- no new hex values. Colour never encodes SIZE: the family
   comes from the metric card's assessment, or from the direction on a
   non-financial row, and the two marker lengths are fixed classes.
   ========================================================================= */

.sv { margin-top: var(--lr-space-4); }

.sv-legend,
.sv-foot {
  color: var(--lr-ink-secondary);
  font-size: var(--lr-text-small);
  line-height: 1.55;
  max-width: var(--lr-measure);
  margin: 0 0 var(--lr-space-4);
}
.sv-foot { margin: var(--lr-space-5) 0 0; }

/* Summary strip -------------------------------------------------------- */
.sv-strip { width: 100%; border-collapse: separate; border-spacing: var(--lr-space-2); }
.sv-strip__cell {
  border: 1px solid var(--lr-hairline);
  background: var(--lr-surface);
  border-radius: var(--lr-radius-card);
  padding: var(--lr-space-3);
  vertical-align: top;
  width: 25%;
}
.sv-strip__label { display: block; color: var(--lr-ink-secondary); font-size: var(--lr-text-caption); }
.sv-strip__fig { display: block; color: var(--lr-ink); font-size: var(--lr-text-h3); font-weight: 650; }
.sv-strip__weight { display: block; color: var(--lr-ink-tertiary); font-size: var(--lr-text-caption); }

.sv-total { width: 100%; border-collapse: collapse; margin-top: var(--lr-space-2); }
.sv-total__row td { border-top: 1px solid var(--lr-hairline); padding: var(--lr-space-2) var(--lr-space-3); }
.sv-total__label { color: var(--lr-ink-secondary); font-size: var(--lr-text-small); }
.sv-total__fig { text-align: right; color: var(--lr-ink); font-weight: 650; }
.sv-total__row--clamp .sv-total__fig { font-weight: 500; color: var(--lr-ink-secondary); }

/* Pillar heading, collapsible ------------------------------------------ */
.sv-pillar { margin-top: var(--lr-space-5); }
.sv-pillar__head { margin: 0; }
.sv-toggle {
  display: grid;
  grid-template-columns: 1fr auto auto 1.25rem;
  align-items: center;
  gap: var(--lr-space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--lr-space-2) var(--lr-space-1);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--lr-hairline);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--lr-ink);
}
.sv-toggle__name { font-weight: 650; }
.sv-toggle__fig { font-weight: 650; font-variant-numeric: tabular-nums; }
.sv-toggle__weight { color: var(--lr-ink-tertiary); font-size: var(--lr-text-caption); }
.sv-toggle__chev { justify-self: end; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--lr-ink-tertiary); }
.sv-toggle[aria-expanded="false"] .sv-toggle__chev { transform: rotate(-90deg); }
/* *** THE LEGACY SHEET STYLES BARE <button>. *** static/css/app.css carries
   `button, .btn-primary { background: var(--brand) }` and
   `button:hover { background: var(--brand-2) }`. The hover rule is (0,1,1)
   and `.sv-toggle` is only (0,1,0), so it WON: rendering the page showed the
   pillar heading turning into a solid dark-green bar under the pointer, with
   the text still dark on it. These are (0,2,0) and take it back. */
.sv-toggle:hover,
.sv-toggle:focus,
.sv-toggle:focus-visible,
.sv-toggle:active {
  background: var(--lr-surface);
  color: var(--lr-ink);
}
.sv-toggle:hover .sv-toggle__weight,
.sv-toggle:focus .sv-toggle__weight { color: var(--lr-ink-tertiary); }

/* Rows ------------------------------------------------------------------ */
.sv-rows { list-style: none; margin: 0; padding: 0; }
.sv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(9rem, auto);
  align-items: baseline;
  gap: var(--lr-space-3);
  padding: var(--lr-space-2) var(--lr-space-1);
  border-bottom: 1px solid var(--lr-hairline-soft);
}
.sv-cell--label { color: var(--lr-ink); min-width: 0; }
.sv-note { display: block; color: var(--lr-ink-tertiary); font-size: var(--lr-text-caption); }
.sv-cell--dir { display: flex; align-items: center; gap: var(--lr-space-2); justify-self: end; }
.sv-dir { color: var(--lr-ink-secondary); font-size: var(--lr-text-small); white-space: nowrap; }

/* Markers: two fixed lengths, nothing scaled --------------------------- */
.sv-mark { display: inline-block; height: 0.5rem; border-radius: 2px; flex: none; }
.sv-mark--short { width: 1.25rem; }
.sv-mark--long { width: 2.5rem; }
.sv-mark--none { width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: none; border: 1px solid var(--lr-ink-tertiary); }

.sv-tone--good .sv-mark { background: var(--lr-success); }
.sv-tone--watch .sv-mark { background: var(--lr-warning); }
.sv-tone--adverse .sv-mark { background: var(--lr-danger); }
.sv-tone--quiet .sv-mark { background: var(--lr-ink-tertiary); }
/* A non-financial adder: mid grey, darker than the hollow
   no-adjustment dot, and not borrowing a band's severity colour. */
.sv-tone--neutral .sv-mark { background: var(--lr-ink-secondary); }
.sv-tone--quiet .sv-mark--none,
.sv-tone--neutral .sv-mark--none,
.sv-tone--good .sv-mark--none,
.sv-tone--watch .sv-mark--none,
.sv-tone--adverse .sv-mark--none { background: none; }

/* The badge chip is the metric card's, unchanged, so the two match. */
.sv-badge {
  display: inline-block;
  padding: 2px var(--lr-space-2);
  border-radius: 999px;
  font-size: var(--lr-text-caption);
  font-weight: 600;
  white-space: nowrap;
  color: var(--lr-ink-secondary);
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
}
.sv-badge--excellent { color: var(--lr-band-excellent); background: var(--lr-band-excellent-bg); border-color: transparent; }
.sv-badge--strong { color: var(--lr-band-strong); background: var(--lr-band-strong-bg); border-color: transparent; }
.sv-badge--satisfactory { color: var(--lr-band-satisfactory); background: var(--lr-band-satisfactory-bg); border-color: transparent; }
.sv-badge--fair { color: var(--lr-band-fair); background: var(--lr-band-fair-bg); border-color: transparent; }
.sv-badge--weak { color: var(--lr-band-weak); background: var(--lr-band-weak-bg); border-color: transparent; }
.sv-badge--vulnerable { color: var(--lr-band-vulnerable); background: var(--lr-band-vulnerable-bg); border-color: transparent; }
/* The engine CHARGES for a distressed ratio at the worst band, so its
   chip is the vulnerable chip. Without this rule it fell through to the
   default grey while the PDF printed it red -- the two surfaces
   disagreeing about the row that costs the customer most. */
.sv-badge--not-measurable-distressed,
.metric-card.not-measurable-distressed .metric-badge { color: var(--lr-band-vulnerable); background: var(--lr-band-vulnerable-bg); border-color: transparent; }

@media (max-width: 640px) {
  .sv-strip__cell { display: inline-block; width: 46%; }
  .sv-row { grid-template-columns: minmax(0, 1fr); gap: var(--lr-space-1); }
  .sv-cell--badge, .sv-cell--dir { justify-self: start; }
  .sv-toggle { grid-template-columns: 1fr auto 1.25rem; }
  .sv-toggle__weight { display: none; }
}