/* Redesign: page styles for the sales area (Quotes, the quote editor and the Plan page,
   including its "Present" slides). Uses tokens from /theme.css only.
   Loads after styles.css and theme.css, so these rules restyle the older page rules.
   Printed quotes and PDFs (quote.css) are not touched here. */

/* ======================================================================
   Quotes page (#page-quotes)
   ====================================================================== */

#page-quotes .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Follow-ups due: a normal card with a small status dot instead of a thick side bar */
#page-quotes .followups { border-left-width: 1px; }
#page-quotes .followups > h2 { display: flex; align-items: center; gap: 8px; }
#page-quotes .followups > h2::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
#page-quotes .followups .list li > button { flex: none; }

/* Quote and proforma lists */
#page-quotes .card.flush .table td:nth-child(2) { min-width: 190px; }
#page-quotes .card.flush .table td:last-child .actions { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
#page-quotes .card.flush .table td:last-child .actions > button.link:last-child { color: var(--muted); }
#page-quotes .card.flush .table td:last-child .actions > button.link:last-child:hover:not(:disabled) { color: var(--danger); }
#page-quotes .quote-proformas { margin-top: 2px; color: var(--text-2); }
#page-quotes .quote-overdue { color: var(--danger); font-weight: 550; }

/* Empty states look like the shared .empty pattern */
#page-quotes .card.empty-state {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 36px 20px;
  text-align: center;
  color: var(--muted);
}
#page-quotes .card.empty-state::before {
  content: "";
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  background: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E") center / contain no-repeat;
}
#page-quotes .card.empty-state > h2 { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--text); }
#page-quotes .card.empty-state > p { max-width: 56ch; }

/* Price list: a compact editing grid that runs edge to edge in its card */
#page-quotes .card > .table-wrap:has(> .price-table) {
  margin: 12px -18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
#page-quotes .price-table { font-size: 0.8125rem; }
#page-quotes .price-table th { padding: 8px; }
#page-quotes .price-table td { padding: 6px 8px; vertical-align: middle; }
#page-quotes .price-table th:first-child, #page-quotes .price-table td:first-child { padding-left: 18px; }
#page-quotes .price-table th:last-child, #page-quotes .price-table td:last-child { padding-right: 18px; }
#page-quotes .price-table input:not([type="checkbox"]),
#page-quotes .price-table select:not([multiple]) {
  min-height: 30px;
  height: 30px;
  margin: 0;
  padding: 0 8px;
  font-size: 0.8125rem;
}
#page-quotes .price-table select:not([multiple]) { padding-right: 26px; background-position: right 7px center; background-size: 14px; }
#page-quotes .price-table td:nth-child(1) select { min-width: 184px; }
#page-quotes .price-table td:nth-child(2) input { min-width: 176px; }
#page-quotes .price-table td:nth-child(3) { min-width: 0; }
#page-quotes .price-table td:nth-child(3) input { min-width: 240px; }
#page-quotes .price-table input[type="number"] { width: 104px; }
#page-quotes .price-table td:nth-child(8) input { width: 72px; }
#page-quotes .price-table td:nth-child(9) { white-space: nowrap; color: var(--text-2); }
#page-quotes .price-table .fits-select { min-width: 168px; min-height: 0; margin: 0; padding: 2px; font-size: 0.75rem; }
/* Only accessories fit boats: other lines show a dash instead of a greyed-out list */
#page-quotes .price-table .fits-select:disabled { display: none; }
#page-quotes .price-table td:has(> .fits-select:disabled)::after { content: "—"; color: var(--faint); }
#page-quotes .price-table tr.unconfirmed td { background: var(--warning-soft); }
#page-quotes .price-table tbody tr:hover td { background: var(--surface-2); }
#page-quotes .price-table tbody tr.unconfirmed:hover td { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); }
#page-quotes .card > .table-wrap:has(> .price-table) + .modal-actions { margin-top: 12px; }

/* The one save button stays in reach while scrolling the long price list */
#page-quotes > div:last-child > .modal-actions:last-child {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  margin-top: 0;
  pointer-events: none;
}
#page-quotes > div:last-child > .modal-actions:last-child > button { pointer-events: auto; box-shadow: var(--shadow-md); }

@media (min-width: 900px) {
  /* Long price list: scroll inside the card so the header row and the side scrollbar stay in view */
  #page-quotes .card > .table-wrap:has(> .price-table) { max-height: min(68vh, 680px); overflow: auto; }
}

@media (max-width: 640px) {
  /* Lists scroll sideways with the quote or proforma number pinned on the left */
  #page-quotes .card.flush .table th:first-child,
  #page-quotes .card.flush .table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-left: 14px;
    box-shadow: inset -1px 0 0 var(--border);
  }
  #page-quotes .card.flush .table td:first-child { background: var(--surface); }
  #page-quotes .card.flush .table th:first-child { z-index: 2; }
  #page-quotes .card.flush .table td:nth-child(2) { min-width: 170px; }
}

@media (max-width: 899px) {
  #page-quotes .tiles { gap: 8px; }
  #page-quotes .tile { padding: 10px 12px; }
  #page-quotes .tile strong { font-size: 1.125rem; }
  #page-quotes .tile-label { line-height: 1.3; }
  #page-quotes .card > .table-wrap:has(> .price-table) { margin-left: -14px; margin-right: -14px; }
  #page-quotes .price-table th:first-child, #page-quotes .price-table td:first-child { padding-left: 14px; }
  #page-quotes .price-table th:last-child, #page-quotes .price-table td:last-child { padding-right: 14px; }
  #page-quotes > div:last-child > .modal-actions:last-child { bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); }
}

/* ======================================================================
   Quote editor (opens in #modal)
   ====================================================================== */

#modal .quote-head { gap: 0 12px; align-items: end; }
@media (min-width: 1100px) {
  #modal .quote-head {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.75fr);
  }
}
@media (min-width: 641px) and (max-width: 1099px) {
  #modal .quote-head { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #modal .quote-head > label:nth-child(1), #modal .quote-head > label:nth-child(2), #modal .quote-head > label:nth-child(5) { grid-column: span 3; }
  #modal .quote-head > label:nth-child(3) { grid-column: span 2; }
}
@media (max-width: 640px) {
  #modal .quote-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #modal .quote-head > label:nth-child(1), #modal .quote-head > label:nth-child(2), #modal .quote-head > label:nth-child(5) { grid-column: 1 / -1; }
}

/* Line items */
#modal .table-wrap:has(> .quote-items) { margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
#modal .quote-items th { padding: 8px 10px; }
#modal .quote-items td { padding: 10px; vertical-align: top; }
#modal .quote-items tbody tr:hover { background: none; }
#modal .quote-items td:first-child { min-width: 240px; width: 100%; }
#modal .quote-items td:first-child > * + * { margin-top: 6px; }
#modal .quote-items select, #modal .quote-items input { margin: 0; }
#modal .quote-items .desc-input { min-height: 30px; height: 30px; padding: 0 10px; font-size: 0.8125rem; color: var(--text-2); }
#modal .quote-items input[type="number"] { width: 72px; padding: 0 8px; }
#modal .quote-items td:nth-child(3) input[type="number"] { width: 124px; }
#modal .quote-items td:nth-child(3) .muted { margin-top: 4px; font-size: 0.75rem; }
#modal .quote-items td.num,
#modal .quote-items td:last-child { padding-top: calc(10px + (var(--control-h) - 20px) / 2); }
#modal .quote-items td.num { font-weight: 600; color: var(--text); }
#modal .quote-items td:last-child .link { color: var(--muted); }
#modal .quote-items td:last-child .link:hover:not(:disabled) { color: var(--danger); }

/* Add-ons that fit the boats on the quote */
#modal .addons { margin: 12px 0 14px; gap: 10px; }
#modal .addons:empty { display: none; }
#modal .addon-group { padding: 10px 12px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
#modal .addon-group > p { margin: 0 0 8px; color: var(--text); }
#modal .addons .chips { margin: 0; gap: 6px; }
#modal .addons .chip-btn {
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 13px;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
}
#modal .addons .chip-btn.added { background: var(--success-soft); color: var(--success); border-color: transparent; cursor: default; }
#modal .addons .notice { margin: 0; }
#modal .addons .notice.misfit { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--text); }

/* Totals and the internal margin, together on the right */
#modal .quote-totals {
  max-width: 400px;
  margin: 14px 0 10px auto;
  padding: 12px 14px;
  column-gap: 0;
  row-gap: 6px;
  font-size: 0.84375rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
#modal .quote-totals dt { padding-right: 16px; color: var(--muted); }
#modal .quote-totals dd { font-weight: 550; color: var(--text); }
#modal .quote-totals .grand { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 1rem; font-weight: 650; color: var(--text); }
#modal .margin-note {
  max-width: 400px;
  margin: 0 0 12px auto;
  padding: 8px 12px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
#modal .margin-note[data-kind="low"] { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
#modal .margin-note[data-kind="bad"] { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }

/* Save buttons stay at the bottom of the editor while it scrolls
   (sticky offsets count from inside the dialog's padding, hence the negative bottom) */
#modal .quote-head ~ .modal-actions {
  position: sticky;
  bottom: -20px;
  z-index: 3;
  margin: 14px -24px -20px;
  padding: 12px 24px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  #modal .quote-head ~ .modal-actions {
    bottom: calc(-16px - env(safe-area-inset-bottom));
    margin: 14px -16px calc(-16px - env(safe-area-inset-bottom));
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  }

  /* Each line becomes a small card: item on top, then quantity, price and amount */
  #modal .table-wrap:has(> .quote-items) { border: 0; border-radius: 0; overflow: visible; }
  #modal .quote-items, #modal .quote-items tbody { display: block; }
  #modal .quote-items thead { display: none; }
  #modal .quote-items tr {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    margin-bottom: 8px;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  #modal .quote-items td { display: block; min-width: 0; width: auto; padding: 0; border: 0; }
  #modal .quote-items td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; min-width: 0; width: auto; }
  #modal .quote-items td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; justify-self: end; margin-top: -4px; padding-top: 0; }
  #modal .quote-items td:nth-child(2) { grid-column: 1; grid-row: 2; }
  #modal .quote-items td:nth-child(3) { grid-column: 2; grid-row: 2; }
  #modal .quote-items td:nth-child(4) { grid-column: 3; grid-row: 2; padding-top: 0; text-align: right; line-height: var(--control-h); }
  #modal .quote-items td:nth-child(2)::before,
  #modal .quote-items td:nth-child(3)::before,
  #modal .quote-items td:nth-child(4)::before { display: block; margin-bottom: 4px; font-size: 0.75rem; font-weight: 500; line-height: 1.4; color: var(--muted); }
  #modal .quote-items td:nth-child(2)::before { content: "Qty"; }
  #modal .quote-items td:nth-child(3)::before { content: "Unit price excl. VAT"; }
  #modal .quote-items td:nth-child(4)::before { content: "Amount excl. VAT"; }
  #modal .quote-items input[type="number"], #modal .quote-items td:nth-child(3) input[type="number"] { width: 100%; }
  #modal .quote-totals, #modal .margin-note { max-width: none; }
}

/* ======================================================================
   Plan page (#page-plan) and its full-screen slides (.pv-present).
   The classes below are only used by the plan scripts.
   ====================================================================== */

#page-plan .plan-body > p.muted:first-child { margin: -4px 0 12px; font-size: 0.8125rem; }
#page-plan .stats, .pv-present .stats { row-gap: 6px; font-size: 0.84375rem; }
#page-plan .card h3 { font-size: 0.875rem; }

/* KPI tiles, the same as .tiles/.tile: label, then the value, then a note */
.plan-tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.plan-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.plan-tile-l { order: -1; margin: 0 0 1px; font-size: 0.78125rem; font-weight: 500; color: var(--muted); }
.plan-tile-n { font-size: 1.375rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); font-variant-numeric: normal; overflow-wrap: break-word; }
.plan-tile .muted.small { font-size: 0.78125rem; line-height: 1.4; }
.plan-tile[data-kind="good"] .plan-tile-n { color: var(--success); }
.plan-tile[data-kind="bad"] .plan-tile-n { color: var(--danger); }
.plan-tiles.inner { margin: 12px 0 4px; }
.plan-tiles.inner .plan-tile { background: var(--surface-2); box-shadow: none; }

/* Calm cards: no gradients */
.pv-hero { background: var(--surface); }
.plan-pad { padding: 16px 16px 12px; }
.plan-pad > :last-child { margin-bottom: 0; }
.plan-gap { margin-top: 12px; }
.plan-list { padding-left: 18px; }
.plan-list li { margin: 5px 0; }
.plan-list li::marker { color: var(--faint); }

/* Small badges */
.est {
  display: inline-flex;
  align-items: center;
  height: 16px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--warning);
  background: var(--warning-soft);
  vertical-align: 1px;
}
.pv-flag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.71875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--danger);
  background: var(--danger-soft);
}
.pv-flag.mid { color: var(--warning); background: var(--warning-soft); }
.pv-flag.ok { color: var(--success); background: var(--success-soft); }

/* Number fields under the charts: labels, boxes and notes line up across each row */
.plan-fields {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 4px 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.plan-field { gap: 4px; align-content: start; margin-bottom: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--text-2); }
@supports (grid-template-rows: subgrid) {
  .plan-field { grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; }
  .plan-field > :first-child { align-self: end; }
}
.plan-field input, .plan-field select { margin: 0; }
.plan-field > .muted.small { font-size: 0.75rem; font-weight: 400; line-height: 1.35; }
.plan-input { gap: 6px; }
.plan-input .muted.small { font-weight: 400; }

/* Tables */
.plan-table td { padding-top: 8px; padding-bottom: 8px; }
.plan-table input[type="number"] { width: 96px; min-height: 30px; height: 30px; margin: 0; padding: 0 8px; font-size: 0.8125rem; }
.plan-table input.is-est:not(:focus) { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 50%, var(--border-strong)); }
.plan-table select { min-height: 28px; height: 28px; margin: 6px 0 0; padding: 0 26px 0 8px; font-size: 0.78125rem; max-width: 170px; background-position: right 7px center; background-size: 13px; }
.plan-table td.pos { color: var(--success); }
.plan-table td.neg { color: var(--danger); }
.plan-table tfoot td { border-top: 1px solid var(--border-strong); border-bottom: 0; background: var(--surface-2); }
/* Headers over right-aligned number columns (these tables give only the cells a .num class) */
#page-plan .table:not(.plan-table):has(> thead th:nth-child(6)) > thead th:is(:nth-child(3), :nth-child(4), :nth-child(5)),
#page-plan .plan-table:has(> thead th:nth-child(9)) > thead th:is(:nth-child(8), :nth-child(9)),
#page-plan .plan-table:has(> tfoot) > thead th:nth-child(5) { text-align: right; }
.lease-ladder tbody tr.is-chosen td { background: var(--success-soft); }
.lease-ladder tbody tr.is-floor td { background: var(--warning-soft); }

/* Progress meters */
.plan-meter { margin-bottom: 10px; }
.plan-meter-head { font-size: 0.8125rem; color: var(--text-2); }
.plan-meter-head strong { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.plan-meter .bar { margin: 6px 0 0; height: 8px; }
.plan-progress { height: 10px; margin: 4px 0 10px; }
/* The unfilled track is a light step of the fill's colour, like the rings */
.plan-meter .bar:has(> span[data-level="ok"]), .bar.plan-progress { background: var(--success-soft); }
.plan-meter .bar:has(> span[data-level="mid"]) { background: var(--warning-soft); }
.plan-meter .bar:has(> span[data-level="low"]) { background: var(--danger-soft); }
.plan-meter .bar > span[data-level="mid"] { background: var(--warning); }
.plan-meter .bar > span[data-level="low"] { background: var(--danger); }

/* Horizontal bars: thin, square at the baseline, round at the value end */
.hbars { gap: 2px; margin-top: 10px; }
.hbar {
  grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0 -6px;
  padding: 4px 6px;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
}
.hbar:hover { background: var(--surface-2); }
.hbar-label { line-height: 1.3; color: var(--text-2); }
.hbar-label strong { font-weight: 600; color: var(--text); }
.hbar-track { height: 10px; }
.hbar-fill { border-radius: 0 4px 4px 0; background: var(--accent); }
.hbars:not(.rate-bars) .hbar:hover .hbar-fill:not(.neg) { background: var(--accent-hover); }
.hbar-fill.neg { background: var(--danger); }
.hbar-value { min-width: 84px; font-size: 0.8125rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rate-bars .hbar { grid-template-columns: minmax(170px, 270px) minmax(0, 1fr) auto; }
.rate-bars .hbar-fill { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.rate-bars .hbar-fill.floor { background: var(--warning); }
.rate-bars .hbar-fill.ours { background: var(--brand-green); }

/* Columns over time: slim columns on one baseline, values on the caps */
.vcols { gap: 0; height: 180px; margin-top: 14px; }
.vcol { border-radius: var(--radius-sm); }
.vcol:hover { background: var(--surface-2); }
.vcol-track { width: 100%; justify-content: center; border-bottom-color: var(--border-strong); }
.vcol-fill { width: min(24px, 72%); border-radius: 4px 4px 0 0; background: var(--accent); }
.vcol:hover .vcol-fill { background: var(--accent-hover); }
.vcol-value, .vcol-label { font-size: 0.6875rem; color: var(--muted); }
.vcol-value { margin-bottom: 4px; color: var(--text-2); }
.vcol-label { margin-top: 6px; }

/* Funnel: centred bars, the count inside each bar */
.pv-funnel { gap: 8px; }
.pv-funnel-row { grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) 44px; gap: 12px; }
.pv-funnel-label { font-size: 0.84375rem; line-height: 1.3; color: var(--text); }
.pv-funnel-bar { min-width: 28px; height: 28px; border-radius: var(--radius-sm); font-size: 0.8125rem; }
.pv-funnel-bar strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.pv-funnel-rate { font-variant-numeric: tabular-nums; }

/* Stacked bar and its legend: 2px gaps between the parts */
.pv-stack { height: 28px; gap: 2px; margin: 12px 0 10px; border-radius: var(--radius); }
.pv-seg { font-size: 0.75rem; font-weight: 600; }
.pv-legend { gap: 6px 16px; font-size: 0.8125rem; color: var(--text-2); }
.pv-legend strong { font-weight: 600; color: var(--text); }
.pv-key { width: 10px; height: 10px; border-radius: 3px; }

/* Labels inside coloured fills: white on dark fills, near-black on light ones, in both themes.
   The fills are set by plan-visuals.js (theme colours at the time of drawing, or fixed series colours). */
.pv-funnel-bar, .pv-seg { color: #fff; }
:root[data-theme="dark"] .pv-funnel-bar { color: #0f1b2d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pv-funnel-bar { color: #0f1b2d; }
}
:root .pv-funnel-bar:is([style*="rgb(17, 94, 166)"], [style*="rgb(21, 128, 61)"], [style*="rgb(100, 116, 139)"], [style*="rgb(139, 92, 246)"]) { color: #fff; }
:root .pv-funnel-bar:is([style*="rgb(208, 138, 11)"], [style*="rgb(90, 163, 234)"], [style*="rgb(76, 203, 127)"], [style*="rgb(242, 180, 75)"], [style*="rgb(138, 151, 169)"]),
:root .pv-seg:is([style*="rgb(20, 163, 139)"], [style*="rgb(224, 160, 25)"], [style*="rgb(148, 163, 184)"]) { color: #0f1b2d; }

/* Ring gauges: thin rings on a light step of the same colour */
.pv-rings { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 4px 0 18px; }
.pv-ring, .pv-ring[data-level] {
  --ring: var(--success);
  --track: var(--success-soft);
  --hole: var(--surface);
  width: 104px;
  height: 104px;
  background: radial-gradient(closest-side, var(--hole) 81%, transparent 82%), conic-gradient(var(--ring) calc(var(--p) * 1%), var(--track) 0);
}
.pv-ring[data-level="high"] { --ring: var(--warning); --track: var(--warning-soft); }
.pv-ring[data-level="over"] { --ring: var(--danger); --track: var(--danger-soft); }
.pv-ring .pv-icon { width: 18px; height: 18px; color: var(--muted); }
.pv-ring strong { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; }
.pv-ring-label { margin-top: 6px; font-size: 0.875rem; font-weight: 600; }

/* Plan on one page: four boxes with arrows */
.pv-flow { gap: 8px; }
.pv-step-box { gap: 8px; padding: 12px 14px; font-size: 0.84375rem; background: var(--surface-2); border-color: var(--border); border-radius: var(--radius-lg); }
.pv-step-head { gap: 10px; font-size: 0.875rem; font-weight: 600; color: var(--text); }
.pv-step-head .pv-icon { width: 30px; height: 30px; padding: 6px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-text); }
.pv-arrow { font-size: 1.125rem; font-weight: 400; color: var(--faint); }
.pv-lines { gap: 8px; }
.pv-lines li { gap: 10px; }
.pv-lines li .pv-icon.small { margin-top: 2px; }
.pv-how { gap: 6px; }
.pv-how li { padding-left: 14px; font-size: 0.84375rem; }
.pv-how li::before { top: 0.6em; width: 6px; height: 6px; }
.pv-big { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; }
.pv-mini { font-size: 0.8125rem; color: var(--text-2); }

/* Break-even in pictures */
.pv-even { gap: 16px; margin-top: 12px; }
.pv-even-n { font-size: 1.625rem; font-weight: 650; letter-spacing: -0.02em; }
.pv-or { font-size: 0.8125rem; font-weight: 500; color: var(--faint); }
.pv-grid { gap: 3px; margin-top: 10px; }

/* Lease cycle diagram */
.pv-loop { stroke: var(--surface-3); }
.pv-node { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.pv-node-title { font: 600 14px var(--font); fill: var(--text); }
.pv-node-text { font: 400 11.5px var(--font); fill: var(--text-2); }
.pv-cycle-mid { font: 700 22px var(--font); fill: var(--text); }
.pv-cycle-sub { font: 400 12px var(--font); fill: var(--muted); }

/* People: soft avatars, one colour each */
.pv-avatar { width: 24px; height: 24px; font-size: 0.65625rem; font-weight: 650; color: var(--text-2); background: var(--surface-3); }
.pv-avatar.big { width: 40px; height: 40px; font-size: 0.8125rem; }
.pv-avatar[data-who="nilesh"] { color: var(--accent-text); background: var(--accent-soft); }
.pv-avatar[data-who="bhavik"] { color: var(--teal); background: var(--teal-soft); }
.pv-avatar[data-who="kelvin"] { color: var(--warning); background: var(--warning-soft); }
.pv-avatar[data-who="james"] { color: var(--violet); background: var(--violet-soft); }
.pv-people { gap: 8px 18px; margin-top: 14px; font-size: 0.8125rem; color: var(--text-2); }
.pv-cards { gap: 12px; }
.pv-person { gap: 12px; padding: 14px; background: var(--surface-2); border-color: var(--border); border-radius: var(--radius-lg); }
.pv-person strong { font-weight: 600; }
.pv-person p { color: var(--text-2); }

/* Roadmap: five quarter columns of milestone chips */
.pv-roadmap { grid-template-columns: repeat(5, minmax(160px, 1fr)); gap: 10px; }
.pv-quarter { min-width: 0; gap: 6px; padding: 10px; background: var(--surface-2); border-color: var(--border); border-radius: var(--radius-lg); }
.pv-quarter-head { gap: 8px; margin-bottom: 2px; font-size: 0.8125rem; font-weight: 600; }
.pv-step { width: 20px; height: 20px; font-size: 0.6875rem; font-weight: 650; color: var(--accent-text); background: var(--accent-soft); }
button.pv-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 7px 8px;
  white-space: normal;
  text-align: left;
  font-size: 0.78125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
button.pv-chip:hover:not(:disabled) { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.pv-chip-text { overflow-wrap: anywhere; }
.pv-chip-mark { font-weight: 600; color: var(--faint); }
button.pv-chip[data-status="doing"] { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
button.pv-chip[data-status="doing"] .pv-chip-mark { color: var(--warning); }
button.pv-chip[data-status="done"], button.pv-chip[data-status="done"]:hover:not(:disabled) { background: var(--success-soft); border-color: transparent; }
button.pv-chip[data-status="done"] .pv-chip-mark { color: var(--success); }

/* Milestones and decisions with a status chip */
.plan-miles { gap: 8px; }
.plan-miles li { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; font-size: 0.84375rem; }
.plan-miles.gtm-decisions li { grid-template-columns: 118px minmax(0, 1fr); }
.plan-status[data-status="doing"], button.plan-status[data-status="doing"]:hover:not(:disabled) { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.plan-status[data-status="done"], button.plan-status[data-status="done"]:hover:not(:disabled) { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }

/* Market data facts */
.plan-market { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0 0 16px; }
.plan-market .card { gap: 6px; padding: 14px 16px; }
.plan-market .plan-fact { display: flex; flex-direction: column; align-items: flex-start; }
.plan-fact > .pv-icon { width: 32px; height: 32px; margin-bottom: 4px; padding: 7px; border-radius: var(--radius); color: var(--accent-text); background: var(--accent-soft); }
.plan-fact .plan-tile-n { font-size: 1.375rem; }
.plan-fact p { font-size: 0.84375rem; color: var(--text-2); }
.plan-fact > a { margin-top: auto; }

/* Map tab */
.pv-map-card { margin-bottom: 16px; }
.pv-map-card .map-tools { gap: 6px 16px; padding: 10px 16px; font-size: 0.8125rem; }
.pv-map-card .map-legend { gap: 6px 16px; padding: 10px 16px; font-size: 0.78125rem; color: var(--text-2); }
.pv-map-card .map-dot { width: 9px; height: 9px; border: 0; box-shadow: none; }
.pv-map-card .map-note { margin: 0; padding: 0 16px 14px; }
.pv-live { color: var(--success); }
.pv-live-dot { background: var(--success); }

/* Go-to-market tab */
.gtm-pitch {
  position: relative;
  margin: 12px 0 0;
  padding: 10px 14px 10px 38px;
  font-size: 0.875rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.gtm-pitch::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 12px;
  width: 16px;
  height: 16px;
  background: var(--brand-green-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M19 3v4M21 5h-4M5 17v4M7 19H3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M19 3v4M21 5h-4M5 17v4M7 19H3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gtm-steps { gap: 10px; }
.gtm-steps > li { gap: 12px; padding: 12px 14px; background: var(--surface-2); border-color: var(--border); border-radius: var(--radius-lg); }
.gtm-step-n { width: 26px; height: 26px; font-size: 0.8125rem; font-weight: 650; color: var(--accent-text); background: var(--accent-soft); }
.gtm-step-head { gap: 4px 10px; min-height: 26px; }
.gtm-step-head strong { font-weight: 600; }
.gtm-steps .plan-list { margin: 6px 0 0; font-size: 0.84375rem; }
.gtm-done { margin: 8px 0 0; color: var(--text-2); }
.gtm-done strong { font-weight: 600; color: var(--accent-text); }
.gtm-channel { gap: 8px; }
.gtm-pay { gap: 12px; }
.gtm-pay .pv-step-box > strong { font-size: 0.875rem; }
.gtm-compare th[scope="row"] {
  position: static;
  padding: 10px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  vertical-align: top;
  background: none;
}
.gtm-compare td { vertical-align: top; }
.gtm-compare tbody tr:last-child th { border-bottom: 0; }
.gtm-compare td.gtm-us { font-weight: 500; background: color-mix(in srgb, var(--brand-green) 10%, transparent); }
.gtm-compare th.gtm-us { color: var(--brand-green-text); background: color-mix(in srgb, var(--brand-green) 14%, var(--surface-2)); }
.gtm-ideas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gtm-idea { gap: 6px; padding: 12px 14px; background: var(--surface-2); border-color: var(--border); border-radius: var(--radius-lg); }
.gtm-idea-head { align-items: start; gap: 8px; }
.gtm-idea-head strong { font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.gtm-idea-n { width: 22px; height: 22px; font-size: 0.71875rem; font-weight: 650; color: var(--brand-green-text); background: color-mix(in srgb, var(--brand-green) 20%, transparent); }
.gtm-idea p { color: var(--text-2); }
.gtm-idea .gtm-first strong { font-weight: 600; color: var(--accent-text); }

/* Leasing tab */
.lease-routes { gap: 12px; margin-top: 12px; }
.lease-routes .pv-step-box p { margin: 0; color: var(--text-2); }
.pv-two { gap: 16px; }

/* ---------- Present mode (full-screen slides) ---------- */

.pv-present { background: var(--bg); color: var(--text); }
.pv-slide {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  max-width: 1240px;
  padding: clamp(20px, 3.5vw, 48px) clamp(16px, 5vw, 64px);
}
.pv-slide > * { flex-shrink: 0; }
/* The map slide's body also has the class "map", which styles.css sizes for the Leads map */
.pv-slide-body.map { height: auto; background: none; }
/* The map slide sizes its map to the window, so it gets slimmer margins */
.pv-slide:has(> .pv-slide-body.map) { padding-top: 20px; padding-bottom: 12px; }
.pv-slide:has(> .pv-slide-body.map) .pv-slide-head { margin-bottom: 12px; }
@media (min-width: 900px) {
  /* plan.js gives the map (window height - 260px); this keeps the whole slide on screen */
  .pv-slide-body.map .pv-map { height: max(320px, calc(100dvh - 312px)) !important; }
}
.pv-slide-head { margin-bottom: 24px; }
.pv-slide-head h1 { font-size: clamp(1.5rem, 3vw, 2.375rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: var(--text); }
.pv-slide-head p { max-width: 72ch; margin-top: 6px; font-size: clamp(0.9375rem, 1.4vw, 1.0625rem); color: var(--muted); }
.pv-slide-body h3 { margin: 0 0 12px; font-size: 1rem; font-weight: 600; }
.pv-slide-body > .card, .pv-slide-body .pv-map-card { margin: 0; }
.pv-slide-lead { max-width: 34ch; font-size: clamp(1.125rem, 2.2vw, 1.625rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--text); }
.pv-slide-cover { gap: 20px; padding-top: 0; }
.pv-cover-icons { gap: 14px; }
.pv-cover-icons .pv-icon.xl { width: 48px; height: 48px; }
.pv-slide-facts { gap: 16px; }
.pv-slide-fact { gap: 10px; padding: 22px 24px; background: var(--surface); border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.pv-slide-fact .pv-icon.xl { width: 40px; height: 40px; }
.pv-slide-n { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.035em; }
.pv-slide-fact p { font-size: 0.9375rem; color: var(--text-2); }
.pv-next { gap: 10px; }
.pv-next li { gap: 14px; font-size: 1.0625rem; }
.pv-next .pv-avatar { width: 32px; height: 32px; font-size: 0.75rem; }
.pv-present-bar {
  gap: 10px;
  padding: 10px clamp(12px, 3vw, 24px) calc(10px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.pv-present-bar .muted { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }

/* Charts at slide size */
.pv-slide .vcols { height: clamp(220px, 42vh, 420px); }
.pv-slide .vcol-fill { width: min(36px, 72%); }
.pv-slide .vcol-value, .pv-slide .vcol-label { font-size: 0.8125rem; }
.pv-slide .hbar { padding: 6px; font-size: 0.9375rem; }
.pv-slide .hbar-track { height: 14px; }
.pv-slide .hbar-value { font-size: 0.9375rem; }
.pv-slide .pv-funnel-row { grid-template-columns: minmax(130px, 220px) minmax(0, 1fr) 52px; }
.pv-slide .pv-funnel-label { font-size: 1rem; }
.pv-slide .pv-funnel-bar { height: 40px; font-size: 1rem; }
.pv-slide .pv-stack { height: 44px; font-size: 0.875rem; }
.pv-slide .pv-seg { font-size: 0.875rem; }
.pv-slide .pv-legend { font-size: 0.9375rem; }
.pv-slide .pv-rings { gap: 24px; }
.pv-slide .pv-ring { --hole: var(--bg); width: 136px; height: 136px; }
.pv-slide .pv-ring strong { font-size: 1.5rem; }
.pv-slide .pv-ring-label { font-size: 1rem; }
.pv-slide .pv-ring-box .muted.small { font-size: 0.875rem; }
.pv-slide .gtm-steps.compact > li { padding: 10px 14px; }
.pv-slide .gtm-pitch { padding-top: 12px; padding-bottom: 12px; font-size: 1rem; }
.pv-slide .gtm-pitch::before { top: 15px; }

/* ---------- Plan on smaller screens ---------- */

@media (max-width: 899px) {
  .plan-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .plan-tile { padding: 12px 14px; }
  .plan-tile-n { font-size: clamp(0.9375rem, 4.2vw, 1.125rem); }
  .pv-roadmap { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .pv-flow { gap: 4px; }
  .pv-arrow { height: 20px; }
}

@media (max-width: 640px) {
  .plan-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: 10px; }
  .plan-field:has(input[type="month"]) { grid-column: 1 / -1; }
  .hbar, .rate-bars .hbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .hbar-track { grid-column: 1 / -1; grid-row: 2; }
  .hbar-value { min-width: 0; }
  /* Every column keeps its value and label: they turn upright so 12 or 24 months fit */
  .vcols { overflow-x: auto; overflow-y: hidden; }
  .vcol { min-width: 12px; }
  .vcol-value { display: block; }
  .vcols:has(> .vcol:nth-child(7)) :is(.vcol-value, .vcol-label) { writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1.1; font-size: 0.625rem; }
  /* Fixed lengths keep every column on the same baseline */
  .vcols:has(> .vcol:nth-child(7)) .vcol-value { height: 34px; }
  .vcols:has(> .vcol:nth-child(7)) .vcol-label { height: 38px; text-align: end; }
  .pv-funnel-row { grid-template-columns: minmax(84px, 112px) minmax(0, 1fr) 36px; gap: 8px; }
  .pv-funnel-label { font-size: 0.8125rem; }
  .pv-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pv-ring, .pv-ring[data-level] { width: 92px; height: 92px; }
  .pv-ring strong { font-size: 1.125rem; }
  .pv-even { gap: 12px; }
  .plan-miles li, .plan-miles.gtm-decisions li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .gtm-steps > li { padding: 12px; gap: 10px; }
  .gtm-who { margin-left: 0; }
  .pv-slide { padding: 20px 16px; }
  .pv-slide-head { margin-bottom: 16px; }
  .pv-slide-fact { padding: 16px 18px; }
  .pv-slide .pv-ring { width: 104px; height: 104px; }
  .pv-present-bar { gap: 8px; }
}