/* Wimbi Leasing site (lease.<domain>). Uses the Wimbi design tokens and components from
   /theme.css; only the site's own layout lives here. Every colour is a token.
   Live map rules live in lease-map.css.

   Spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Type: 22px page title, 15px card title,
   14px body, 13px secondary, 12px labels, 11px chart axes. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: 72px; }
body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.375rem; font-weight: 650; letter-spacing: -0.022em; }
h2 { font-size: 0.9375rem; font-weight: 600; }
h3 { font-size: 0.875rem; font-weight: 600; }
p { margin: 0 0 8px; }
ul, ol { margin: 0; padding-left: 20px; }
li + li { margin-top: 4px; }
[hidden] { display: none !important; }

/* ---------- Shell ---------- */

.lz-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
  min-height: 60px; padding: 10px 24px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.lz-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lz-brand > div { min-width: 0; }
.lz-brand strong { display: block; font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.lz-brand .muted { display: block; font-size: 0.75rem; line-height: 1.3; white-space: nowrap; }
.lz-mark {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 0.9375rem; font-weight: 750; letter-spacing: -0.04em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent), 0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.lz-nav { display: flex; gap: 2px; flex: 1; min-width: 0; }
.lz-nav a {
  position: relative; display: inline-flex; align-items: center;
  min-height: 32px; padding: 0 11px; border-radius: var(--radius);
  color: var(--text-2); font-weight: 500; font-size: 0.8125rem; white-space: nowrap; text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.lz-nav a:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.lz-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.lz-tools { display: flex; gap: 6px; flex: none; }
.lz-theme-btn { gap: 6px; }
.lz-ico { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lz-main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; }
.lz-main > * + * { margin-top: 16px; }
.lz-main > .card, .lz-main > .tiles { margin-bottom: 0; }
.lz-main:focus { outline: none; }
.lz-main h1:focus, .lz-main h2[tabindex="-1"]:focus { outline: none; }

/* Skip link and focus */
.lz-skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: var(--radius); background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); }
.lz-skip:focus { top: 8px; }
.lz-main a:focus-visible, .lz-nav a:focus-visible, tr.lz-pick:focus-visible, .lz-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
tr.lz-pick:focus-visible { outline-offset: -2px; }

/* Sign in */
.lz-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--bg); }
.lz-login .card { width: min(380px, 100%); display: grid; gap: 14px; padding: 24px; margin: 0; box-shadow: var(--shadow-md); }
.lz-login .lz-brand { margin-bottom: 6px; }
.lz-login label { display: grid; gap: 4px; }
.lz-error { color: var(--danger); margin: 0; }

/* Page head */
.lz-main .page-head { margin-bottom: 24px; }
.lz-main .page-head > div:first-child { min-width: 0; max-width: 760px; }
.lz-main .page-head .muted { margin-top: 4px; line-height: 1.5; }
.page-head .actions { flex-wrap: wrap; }
.lz-main .page-head + .tabs { margin-top: 0; }

/* ---------- Building blocks ---------- */

.lz-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.lz-grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; }
.lz-grid.three h3 { margin: 0 0 4px; }
.lz-grid.three p { margin: 0; }
.lz-grid > * { min-width: 0; }
.lz-grid > .card { margin: 0; }
.lz-stackcol { display: grid; gap: 16px; align-content: start; min-width: 0; }
.lz-stackcol > .card { margin: 0; }
.lz-scroll-y { max-height: 360px; overflow: auto; }
.lz-sub { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.lz-sub > h2 { margin: 0; }
.card > .lz-sub:first-child { margin-bottom: 14px; }
.lz-sub > .tabs { margin: 0; }
.lz-small { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; }
.lz-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

/* Card titles */
.card > h2 { margin-bottom: 12px; }
.card > h2 + .muted, .card > h2 + p { margin-top: -6px; }
.card ul:not([class]) li::marker { color: var(--faint); }
.card ul:not([class]) li + li { margin-top: 6px; }
.lz-card-title { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.card-head.lz-card-title { margin-bottom: 0; }
.lz-card-title h2 { margin: 0; }
.lz-card-title .muted { font-size: 0.75rem; }
.lz-card-foot { padding: 10px 16px; border-top: 1px solid var(--border); }
.card.flush > h2:first-child { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--border); }

/* Badges */
.lz-demo { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: var(--violet); background: var(--violet-soft); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.lz-demo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lz-est { display: inline-block; font-size: 0.6875rem; font-weight: 600; line-height: 1.5; color: var(--warning); background: var(--warning-soft); padding: 0 6px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; }
.lz-call { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; padding: 2px 9px; border-radius: 999px; text-transform: capitalize; white-space: nowrap; }
.lz-call::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lz-call[data-call="scale"], .lz-call[data-call="approve"], .lz-call[data-call="approved"] { color: var(--success); background: var(--success-soft); }
.lz-call[data-call="watch"], .lz-call[data-call="conditions"], .lz-call[data-call="new"] { color: var(--warning); background: var(--warning-soft); }
.lz-call[data-call="stop"], .lz-call[data-call="rent-first"], .lz-call[data-call="declined"] { color: var(--danger); background: var(--danger-soft); }

/* KPI tiles: the value scales with the tile, so big shilling sums stay on one line */
.lz-main .tiles { gap: 12px; }
.lz-main .tile { container-type: inline-size; gap: 6px; padding: 16px; min-width: 0; }
.lz-main .tile .tile-label { line-height: 1.35; }
.lz-main .tile strong { font-size: clamp(1.125rem, 14cqi, 1.625rem); font-weight: 650; line-height: 1.15; letter-spacing: -0.025em; overflow-wrap: normal; text-wrap: balance; }
.lz-unit { font-size: 0.6em; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-right: 0.3em; }
.lz-main .tile .muted { line-height: 1.45; }
.lz-kpis .tile .muted { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.lz-big { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }

/* Key and value lists */
.lz-kv { display: grid; grid-template-columns: minmax(min(10rem, 50%), 1fr) minmax(0, max-content); gap: 0; font-size: 0.875rem; margin: 0; }
.lz-kv dt, .lz-kv dd { padding: 6px 0; border-bottom: 1px solid var(--border); }
.lz-kv > :nth-last-child(-n+2) { border-bottom: 0; }
.lz-kv dt { color: var(--muted); }
.lz-kv dd { margin: 0; padding-left: 16px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

/* Return against the 8% target line */
.lz-bar { position: relative; height: 8px; border-radius: 999px; background: var(--surface-3); min-width: 90px; }
.lz-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--accent); }
.lz-bar[data-call="scale"] > span { background: var(--success); }
.lz-bar[data-call="watch"] > span { background: var(--warning); }
.lz-bar[data-call="stop"] > span { background: var(--danger); }
.lz-bar > i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: 0.55; }

/* Blueprint steps */
.lz-steps { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); counter-reset: step; }
.lz-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 8px; align-items: center; margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); counter-increment: step; transition: border-color 0.15s, box-shadow 0.15s; }
.lz-steps li:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.lz-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lz-steps strong { font-size: 0.875rem; }
.lz-steps li > :not(strong) { grid-column: 1 / -1; }
.lz-steps p { margin: 6px 0 0; font-size: 0.8125rem; color: var(--text-2); }
.lz-steps .lz-ctrl { display: block; align-self: end; padding-top: 10px; font-size: 0.75rem; font-weight: 500; color: var(--teal); }

/* Forms in calculators */
.lz-form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.lz-form + .lz-form { margin-top: 12px; }
.lz-form label { display: grid; gap: 4px; font-size: 0.8125rem; font-weight: 500; color: var(--text-2); align-content: start; }
.lz-form input, .lz-form select { width: 100%; min-width: 0; }
/* When one label wraps to two lines, keep every input in the row on the same line */
.lz-form:not(.lz-payform) label { display: flex; flex-direction: column; }
.lz-form:not(.lz-payform) label > :is(input, select):last-child { margin-top: auto; }
.lz-help { font-size: 0.75rem; font-weight: 400; }
.lz-help.lz-field-error { color: var(--danger); }
.lz-payform { margin-top: 16px; }
input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.lz-dl { gap: 6px; text-decoration: none; }
.lz-dl:hover { text-decoration: none; }

/* Score dial */
.lz-dial { display: grid; place-items: center; width: 140px; height: 140px; border-radius: 50%; margin: 4px auto 16px; background: var(--surface-2); border: 8px solid var(--surface-3); }
.lz-dial[data-call="approve"] { border-color: var(--success); background: var(--success-soft); }
.lz-dial[data-call="conditions"] { border-color: var(--warning); background: var(--warning-soft); }
.lz-dial[data-call="rent-first"] { border-color: var(--danger); background: var(--danger-soft); }

/* ---------- Tables ---------- */

.lz-main .table td.num, .lz-main .table th.num { white-space: nowrap; }
.lz-main .table tbody th { vertical-align: middle; }
.lz-main .table tr:last-child > th { border-bottom: 0; }
.lz-main .table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.lz-main .table tbody tr:hover { background: var(--surface-2); }
.lz-main .table-wrap { max-width: 100%; }
.tile strong { overflow-wrap: anywhere; }
tr.lz-pick { cursor: pointer; }
.lz-main .table tbody tr.lz-pick:hover { background: var(--accent-soft); }
tr.lz-pick[aria-selected="true"], .lz-main .table tbody tr.lz-pick[aria-selected="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
tr.lz-mark-row, .lz-main .table tbody tr.lz-mark-row { background: var(--warning-soft); }
tr.lz-gap td { text-align: center; font-size: 0.78125rem; color: var(--muted); }
.lz-cell-actions { white-space: nowrap; }

/* ---------- Overview ---------- */

.lz-ov { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.lz-links { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.lz-link { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; transition: border-color 0.15s, background-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.lz-link:hover { border-color: var(--border-strong); background: var(--surface); box-shadow: var(--shadow-sm); transform: translateY(-1px); text-decoration: none; }
.lz-link b { font-weight: 600; color: var(--accent-text); }
.lz-link b::after { content: " \2192"; opacity: 0; transition: opacity 0.15s; }
.lz-link:hover b::after { opacity: 1; }
.lz-link span { font-size: 0.78125rem; color: var(--muted); line-height: 1.45; }

/* ---------- Charts (drawn by chart() in lease.js). Series classes set --lz-c. ---------- */

.lz-chart { margin: 0; width: 100%; min-height: 40px; }
.lz-chart + p, .lz-legend + p, .lz-chart + .lz-small { margin-top: 12px; }
.lz-chart-h { font-size: 0.75rem; font-weight: 600; color: var(--text-2); margin: 0 0 6px; }
.lz-chart-h ~ .lz-chart-h { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.lz-svg { display: block; overflow: visible; font-family: var(--font); }
.lz-svg .lz-gridline { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.lz-svg .lz-gridline.lz-zero { stroke: var(--border-strong); stroke-dasharray: none; }
.lz-svg .lz-axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.lz-svg .lz-rowlabel { fill: var(--text-2); font-size: 12px; }
.lz-svg .lz-val { fill: var(--text); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lz-svg .lz-m { fill: var(--lz-c); transition: opacity 0.15s; }
.lz-svg:hover .lz-m { opacity: 0.75; }
.lz-svg .lz-m:hover { opacity: 1; }
.lz-svg .lz-track { fill: var(--surface-3); }
.lz-svg .lz-line { fill: none; stroke: var(--lz-c); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.lz-svg .lz-dot { fill: var(--lz-c); stroke: var(--surface); stroke-width: 2; }
.lz-svg .lz-target { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.55; }
.lz-s-accent { --lz-c: var(--accent); }
.lz-s-teal { --lz-c: var(--teal); }
.lz-s-muted { --lz-c: color-mix(in srgb, var(--faint) 45%, var(--surface-3)); }
.lz-s-good { --lz-c: var(--success); }
.lz-s-warn { --lz-c: var(--warning); }
.lz-s-bad { --lz-c: var(--danger); }
.lz-s-target { --lz-c: var(--text); }
.lz-legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.75rem; color: var(--text-2); }
.lz-legend li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.lz-key { display: inline-block; flex: none; background: var(--lz-c); }
.lz-key-bar { width: 10px; height: 10px; border-radius: 3px; }
.lz-key-line { width: 14px; height: 2px; border-radius: 1px; }
.lz-s-target .lz-key-line { opacity: 0.55; }

/* Payment progress on a contract */
.lz-pay-progress { display: grid; gap: 8px; margin-bottom: 16px; }
.lz-pay-progress p { margin: 0; }
.lz-progress { position: relative; height: 10px; border-radius: 999px; background: var(--surface-3); }
.lz-progress > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--success); transition: width 0.3s var(--ease); }
.lz-progress > i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: 0.6; }

/* ---------- Toasts and dialog ---------- */

.lz-toasts { position: fixed; z-index: 60; right: 20px; bottom: 20px; display: grid; gap: 8px; width: min(380px, calc(100vw - 24px)); pointer-events: none; }
.lz-toast { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 12px 12px 14px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); pointer-events: auto; animation: lz-toast-in 0.22s var(--ease); }
/* Soft status tints are see-through in dark mode, so lay them over a solid surface */
.lz-toast.notice { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); color: var(--text); }
.lz-toast.notice.success { background: linear-gradient(var(--success-soft), var(--success-soft)), var(--surface); }
.lz-toast.notice.danger { background: linear-gradient(var(--danger-soft), var(--danger-soft)), var(--surface); }
.lz-toast > span { flex: 1; padding-top: 1px; }
.lz-toast-x { flex: none; min-height: 0; height: 24px; width: 24px; padding: 0; border-radius: var(--radius-sm); background: none; color: var(--text-2); border: 0; box-shadow: none; font-size: 1.125rem; line-height: 1; }
.lz-toast-x:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
@keyframes lz-toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

.lz-dialog { width: min(440px, calc(100vw - 24px)); }
.lz-dialog p { color: var(--text-2); line-height: 1.55; }
.lz-busy [aria-busy="true"] { cursor: progress; opacity: 0.7; }

/* ---------- How it works ---------- */

.lzt-stack { overflow-x: auto; }
.lzt-lanes { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr) 36px) minmax(170px, 1fr); align-items: stretch; min-width: 1000px; }
.lzt-lane { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); padding: 12px; border-top: 3px solid var(--lzt-c); }
.lzt-lane h2 { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; line-height: 1.35; margin-bottom: 10px; }
.lzt-lane h2 span { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--lzt-c); color: #fff; font-size: 0.6875rem; }
.lzt-lane ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.lzt-lane li { margin: 0; padding: 8px 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.lzt-lane li b { display: block; font-size: 0.8125rem; }
.lzt-lane li small { display: block; font-size: 0.75rem; color: var(--muted); line-height: 1.4; }
.lzt-lane[data-lane="boat"] { --lzt-c: var(--teal); }
.lzt-lane[data-lane="net"] { --lzt-c: var(--violet); }
.lzt-lane[data-lane="core"] { --lzt-c: var(--accent); }
.lzt-lane[data-lane="money"] { --lzt-c: var(--success); }
.lzt-lane[data-lane="people"] { --lzt-c: var(--warning); }
.lzt-flow { position: relative; align-self: center; height: 2px; margin: 0 4px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 10px); }
.lzt-flow i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: lzt-move 2.4s linear infinite; }
.lzt-flow i:nth-child(2) { animation-delay: 0.8s; }
.lzt-flow i:nth-child(3) { animation-delay: 1.6s; }
@keyframes lzt-move { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
@keyframes lzt-move-down { from { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 8px); opacity: 0; } }

.lzt-money { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; counter-reset: m; margin-bottom: 12px; }
.lzt-money li { position: relative; margin: 0; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 18%, transparent); counter-increment: m; }
.lzt-money li::before { content: counter(m); position: absolute; top: 10px; right: 12px; font-size: 1.25rem; font-weight: 700; color: var(--success); opacity: 0.3; font-variant-numeric: tabular-nums; }
.lzt-money b { display: block; color: var(--success); padding-right: 20px; }
.lzt-money small { display: block; font-size: 0.78125rem; color: var(--text-2); line-height: 1.45; margin-top: 2px; }

.lzt-day { list-style: none; padding: 0; position: relative; display: grid; gap: 0; }
.lzt-day::before { content: ""; position: absolute; left: 51px; top: 12px; bottom: 12px; width: 2px; background: var(--border); }
.lzt-day li { display: grid; grid-template-columns: 44px 1fr; gap: 20px; margin: 0; padding: 7px 0; position: relative; }
.lzt-day li::before { content: ""; position: absolute; left: 47px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.lzt-day time { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.lzt-day p { margin: 2px 0 0; font-size: 0.8125rem; color: var(--text-2); }

.lzt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lzt-chips span { padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.78125rem; font-weight: 500; }

.lzt-phases { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.lzt-phases li { margin: 0; padding: 14px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); }
.lzt-phases li[data-now="true"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
.lzt-phases span { font-size: 0.75rem; font-weight: 650; color: var(--accent-text); }
.lzt-phases b { display: block; margin-top: 2px; }
.lzt-phases p { margin: 4px 0 0; font-size: 0.8125rem; color: var(--text-2); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .lz-top { padding: 8px 20px 0; }
  .lz-nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 8px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scroll-padding: 0 24px; }
  .lz-nav::-webkit-scrollbar { display: none; }
  .lz-nav.lz-more-end { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .lz-nav.lz-more-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
  .lz-nav.lz-more-start.lz-more-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .lz-tools { margin-left: auto; }
  html { scroll-padding-top: 110px; }
}

/* Six KPI tiles sit 3 + 3 on tablets instead of 4 + 2 */
@media (min-width: 641px) and (max-width: 1100px) {
  .lz-main .tiles:has(> .tile:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .lzt-lanes.lzt-fold { grid-template-columns: 1fr; min-width: 0; }
  .lzt-fold .lzt-flow { justify-self: center; width: 2px; height: 22px; margin: 4px 0; background: repeating-linear-gradient(180deg, var(--border-strong) 0 6px, transparent 6px 10px); }
  .lzt-fold .lzt-flow i { left: -3px; top: 0; animation-name: lzt-move-down; }
  .lzt-fold .lzt-lane ul { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 640px) {
  .lz-top { padding: 8px 12px 0; gap: 8px; min-height: 0; }
  .lz-nav { margin: 0 -12px; padding: 2px 12px 8px; }
  .lz-brand .muted { font-size: 0.71875rem; }
  .lz-theme-btn span { display: none; }
  .lz-main { padding: 18px 12px 48px; }
  .lz-main .page-head { margin-bottom: 16px; }
  .lz-main > * + * { margin-top: 12px; }
  .lz-grid, .lz-ov { grid-template-columns: 1fr; gap: 12px; }
  .lz-stackcol { gap: 12px; }
  .lz-main .tiles { gap: 10px; }
  .lz-main .tile { padding: 12px 14px; }
  .lz-links { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lz-link b::after { content: none; }
  .lz-main .tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .lz-main .tabs::-webkit-scrollbar { display: none; }
  .lz-main .tabs > button { flex: none; }
  .lz-sub > .tabs { width: 100%; }
  .lz-toasts { right: 12px; left: 12px; bottom: 12px; width: auto; }

  /* Wide tables (5+ columns) scroll sideways inside .table-wrap instead of crushing every column */
  .lz-main .table:not(.lz-stack):has(thead th:nth-child(5)) { min-width: 680px; }

  /* Key tables reflow into cards */
  .table.lz-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table.lz-stack, .table.lz-stack tbody { display: block; width: 100%; }
  .table.lz-stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .lz-main .table.lz-stack tbody tr:nth-child(even) { background: none; }
  .table.lz-stack tr:last-child { border-bottom: 0; }
  .lz-main .table.lz-stack th, .lz-main .table.lz-stack td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  .card.flush .table.lz-stack th:first-child, .card.flush .table.lz-stack td:first-child, .card.flush .table.lz-stack td:last-child { padding: 0; }
  .table.lz-stack th[data-label]:first-child { grid-column: 1 / -1; font-size: 0.875rem; }
  .table.lz-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 0.6875rem; font-weight: 500; color: var(--muted); }
  .table.lz-stack td.lz-cell-actions, .table.lz-stack td.lz-small, .table.lz-stack td[colspan] { grid-column: 1 / -1; }
  .table.lz-stack td.lz-cell-actions { display: flex; gap: 8px; }
  .table.lz-stack td.lz-cell-actions > * { flex: 1; margin: 0; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .lz-nav { scroll-behavior: auto; }
  .lz-toast, .lzt-flow i { animation: none; }
  .lzt-flow i:not(:first-child) { display: none; }
  .lz-link, .lz-link:hover, .lz-steps li, .lz-progress > span, .lz-svg .lz-m, .lz-nav a { transition: none; transform: none; }
}

/* ---------- Print (investor report and any page) ---------- */

@media print {
  @page { margin: 14mm 12mm; }
  /* Print on white whatever the screen theme is: system colours, not raw values */
  :root:not(#lz-print) {
    color-scheme: light;
    --bg: Canvas; --surface: Canvas; --surface-2: Canvas; --surface-3: color-mix(in srgb, CanvasText 8%, Canvas);
    --text: CanvasText; --text-2: CanvasText; --muted: GrayText; --faint: GrayText;
    --border: color-mix(in srgb, CanvasText 18%, Canvas); --border-strong: color-mix(in srgb, CanvasText 35%, Canvas);
    --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  }
  body { background: Canvas; font-size: 12px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lz-top, .lz-skip, .lz-toasts, .lz-login, button, .tabs, .page-head .actions, .lz-actions, .lz-dl, .lz-links, .lz-cell-actions { display: none !important; }
  .lz-main { max-width: none; padding: 0; }
  .lz-main .page-head { margin-bottom: 12px; }
  .card, .tile, .lz-steps li { box-shadow: none; break-inside: avoid; }
  .lz-grid, .lz-ov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lz-main .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lz-main .table thead th { position: static; }
  .lz-main .table tbody tr:nth-child(even) { background: none; }
  .lz-scroll-y { max-height: none; overflow: visible; }
  a { color: inherit; text-decoration: none; }
  .lzt-flow i { display: none; }
}