/* ==========================================================================
   CALM: the two tools' visual layer (loads after polish.css, before motion.css).
   Scoped to #panel-space and #panel-lease only: the header, the banner, the
   footer, the dialogs and the admin view are untouched.
   One answer leads; fewer, larger, plainer elements; detail folded, not shouted.
   Sizes are in the page's 75% scale (12.6px here reads as 16.8px elsewhere), but
   touch targets and phone inputs use real pixels (52.8px, 19.2px).
   ========================================================================== */
#panel-space, #panel-lease {
  /* One radius per surface, one shadow for the answer, one type ramp. */
  --c-r: 14.4px;            /* cards */
  --c-r-ctl: 9px;       /* fields, selects, steppers */
  --c-pad: 21.6px;
  --c-shadow: 0 1px 2.4px rgba(26, 26, 26, 0.06), 0 14.4px 38.4px -18px rgba(26, 26, 26, 0.28);
  --t-title: clamp(30.6px, 3vw, 43.2px);
  --t-step: 18px;
  --t-body: 15.3px;
  --t-label: 14.4px;
  --t-hint: 13.5px;
  --t-small: 12.6px;
  --ctl-h: 50.4px;
}
@media (max-width: 900px), (pointer: coarse) {
  #panel-space, #panel-lease { --ctl-h: 52.8px; --c-pad: 18px; }
}

/* --------------------------------------------------------------------------
   Shared: headings, quiet actions, step numbers, captions
   -------------------------------------------------------------------------- */
#panel-space .sp-head, #panel-lease .lc-head { margin-bottom: 25.2px; padding-bottom: 0; border-bottom: 0; align-items: center; }
#panel-space .sp-title, #panel-lease .lc-title { font-size: var(--t-title); letter-spacing: -0.015em; text-wrap: balance; }
#panel-space .sp-head-actions .text-link, #panel-lease .lc-head-actions .text-link { font-size: var(--t-hint); color: var(--grey-strong); }
@media (hover: hover) {
  #panel-space .sp-head-actions .text-link:hover, #panel-lease .lc-head-actions .text-link:hover { color: var(--ink); }
}
/* One step on each side now: the numbered discs go, the words stay. */
#panel-space .sp-step .step-n, #panel-lease .lc-step .step-n { display: none; }
#panel-space .sp-step, #panel-lease .lc-step { font-size: var(--t-step); line-height: 1.25; gap: 0; }

/* --------------------------------------------------------------------------
   SPACE: the inputs, in one soft card
   -------------------------------------------------------------------------- */
#panel-space .sp-team { padding: var(--c-pad); background: var(--paper); border-radius: var(--c-r); }
#panel-space .sp-team > .sp-step { margin-bottom: 18px; }
#panel-space .sp-counts { gap: 18px 14.4px; }
#panel-space .sp-field .field-label { margin-bottom: 7.2px; font-size: var(--t-label); color: var(--ink-2); }
#panel-space .sp-field .input-row { border-radius: var(--c-r-ctl); overflow: hidden; background: var(--white); }
#panel-space .sp-field .btn-icon { width: 48.6px; height: var(--ctl-h); background: var(--white); color: var(--ink); font-size: 21.6px; }
@media (hover: hover) {
  #panel-space .sp-field .btn-icon:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--paper); }
}
#panel-space .sp-field .value-input { height: var(--ctl-h); font-size: 25.2px; font-variant-numeric: tabular-nums; }
#panel-space .sp-note { margin-top: 7.2px; font-size: var(--t-hint); line-height: 1.4; text-wrap: pretty; }
#panel-space .sp-desk-note::before { width: 7.2px; height: 7.2px; margin-right: 7.2px; border-radius: 50%; vertical-align: 1px; }
#panel-space .sp-field--std { margin-top: 18px; }
#panel-space .sp-field--std .standard-select {
  height: var(--ctl-h); padding-left: 14.4px; border-radius: var(--c-r-ctl); font-size: var(--t-body);
}
#panel-space .sp-team > .step-warning:not(:empty) { margin-top: 14.4px; border-radius: var(--c-r-ctl); font-size: var(--t-hint); }

/* ---- Hybrid working and rooms: one fold, closed until wanted ---- */
#panel-space .sp-how { margin-top: 14.4px; background: var(--paper); border-radius: var(--c-r); }
#panel-space .sp-more-sum {
  position: relative; display: grid; gap: 3.6px; min-height: 72px; padding: 18px 57.6px 18px var(--c-pad);
  border-radius: var(--c-r); cursor: pointer; list-style: none;
}
#panel-space .sp-more-sum::-webkit-details-marker { display: none; }
#panel-space .sp-more-sum::after {
  content: ''; position: absolute; right: 25.2px; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink); rotate: 45deg;
  transition: rotate var(--dur-base) var(--ease-standard), margin-top var(--dur-base) var(--ease-standard);
}
#panel-space .sp-how[open] > .sp-more-sum::after { rotate: 225deg; margin-top: -1.5px; }
@media (hover: hover) {
  #panel-space .sp-more-sum:hover { background: var(--paper-2); }
}
#panel-space .sp-more-sum:focus-visible { outline: 1.8px solid var(--ink); outline-offset: 2.4px; }
#panel-space .sp-more-sum .sp-step { margin: 0; }
#panel-space .sp-more-s { font-size: var(--t-hint); line-height: 1.4; color: var(--grey-strong); }
#panel-space .sp-how[open] { padding-bottom: var(--c-pad); }
#panel-space .sp-how[open] > :not(summary) { margin-inline: var(--c-pad); }
#panel-space .sp-how[open] > .sp-switch { margin-top: 3.6px; }
@media (prefers-reduced-motion: reduce) { #panel-space .sp-more-sum::after { transition: none; } }

/* The switch as a segmented control: a soft track, the choice in ink. */
#panel-space .sp-switch { gap: 3.6px; padding: 3.6px; border: 0; border-radius: 12.6px; background: var(--paper-2); }
#panel-space .sp-tab, #panel-space .sp-tab + .sp-tab { min-height: 46.8px; border: 0; border-radius: var(--c-r-ctl); background: transparent; font-size: var(--t-label); }
@media (hover: hover) {
  #panel-space .sp-tab:hover { background: rgba(255, 255, 255, 0.6); }
}
#panel-space .sp-tab-v { font-size: var(--t-small); }
#panel-space .sp-panel { padding-top: 21.6px; }
#panel-space .sp-panel-lead { font-size: var(--t-hint); }
#panel-space .sp-rooms .list-title { margin: 18px 0 3.6px; font-size: var(--t-label); letter-spacing: 0; text-transform: none; color: var(--ink); }
#panel-space .room-option { padding: 9px 0; }
#panel-space .room-option .size-label { font-size: var(--t-label); }
#panel-space .room-option .size-pax { font-size: var(--t-small); }
#panel-space .room-count .btn-icon { border-radius: 50%; }

/* The week plan, inside the fold: larger words, rounder boxes. */
#panel-space .rd-inputs-wk { gap: 14.4px; }
#panel-space .rd-inputs-wk-title { font-size: var(--t-body); }
#panel-space .rd-inputs-wk-lead { margin-top: -7.5px; font-size: var(--t-hint); }
#panel-space .rd-inputs-wk-chip { font-size: var(--t-hint); }
#panel-space .rd-inputs-wk-dk { font-size: var(--t-hint); }
#panel-space .rd-inputs-wk-hint { font-size: var(--t-hint); }
#panel-space .rd-inputs-wk-hrow { font-size: var(--t-small); letter-spacing: 0; text-transform: none; }
#panel-space .rd-inputs-wk-nm input { font-size: var(--t-label); }
#panel-space .rd-inputs-wk-day, #panel-space .rd-inputs-wk-sz input { border-radius: 7.2px; }
#panel-space .rd-inputs-wk-tot-k { font-size: var(--t-hint); }
#panel-space .rd-inputs-wk-tot-n { font-size: var(--t-small); }
#panel-space .rd-inputs-wk-tc b { font-size: var(--t-label); }
#panel-space .rd-inputs-wk-tc .rd-inputs-wk-dl { font-size: 11.7px; letter-spacing: 0; text-transform: none; }
#panel-space .rd-inputs-wk-add, #panel-space .rd-inputs-wk-spare, #panel-space .rd-inputs-wk-spare select { font-size: var(--t-hint); }
#panel-space .rd-inputs-wk-spare select { border-radius: 7.2px; }
#panel-space .rd-inputs-wk-mismatch, #panel-space .rd-inputs-wk-mismatch .text-link { font-size: var(--t-hint); }
#panel-space .rd-inputs-wk-mismatch.is-warn { border-radius: var(--c-r-ctl); }
#panel-space .rd-inputs-wk-verdict { padding: 18px; background: var(--white); border-left: 0; border-radius: var(--c-r-ctl); }
#panel-space .rd-inputs-wk-line { font-size: var(--t-label); }
#panel-space .rd-inputs-wk-apply { border-radius: 1198.8px; }
#panel-space .rd-inputs-wk-money dt { font-size: var(--t-small); }
#panel-space .rd-inputs-wk-money dd { font-size: 18px; }
#panel-space .rd-inputs-wk-money dd.rd-inputs-wk-sub { font-size: var(--t-small); }
#panel-space .rd-inputs-wk-tip { border-top: 0; padding-top: 0; }
#panel-space .rd-inputs-wk-tip p, #panel-space .rd-inputs-wk-tip .rd-inputs-wk-tip-go { font-size: var(--t-hint); }
#panel-space .rd-inputs-wk-note, #panel-space .rd-inputs-wk-src, #panel-space .rd-inputs-wk-legend { font-size: var(--t-small); }

/* --------------------------------------------------------------------------
   SPACE: the answer, one white card that leads
   -------------------------------------------------------------------------- */
#panel-space .result-pin {
  padding: 25.2px 28.8px 25.2px; background: var(--white); border: 1px solid transparent; border-top: 1px solid transparent;
  border-radius: var(--c-r); box-shadow: var(--c-shadow);
}
#panel-space .result-card .result-label.result-head { margin-bottom: 7.2px; font-size: var(--t-label); letter-spacing: 0; text-transform: none; color: var(--grey-strong); }
#panel-space .result-sqft { font-size: clamp(61.2px, 6.4vw, 97.2px); font-variant-numeric: tabular-nums lining-nums; }
#panel-space .result-sqft span:last-child { font-size: 21.6px; color: var(--grey-strong); }
#panel-space .result-card .result-empty { max-width: 24ch; font-size: 25.2px; line-height: 1.25; text-wrap: balance; }
/* The two ratios as one quiet line, label first. */
#panel-space .result-meta { gap: 3.6px 21.6px; margin-top: 10.8px; }
#panel-space .result-meta .rm-label { order: 0; font-size: var(--t-hint); }
#panel-space .result-meta .rm-value { font-size: var(--t-hint); font-variant-numeric: tabular-nums; }
#panel-space .result-card .open-plan { margin-top: 10.8px; font-size: var(--t-hint); color: var(--grey-strong); }
#panel-space .open-plan .text-link { display: inline; min-height: 0; margin: 0 0 0 3.6px; padding: 0; font-size: inherit; color: var(--ink); }
/* Before a team the month is a placeholder dash, not a figure: grey, not red. */

/* The peek while the card is off screen: a soft card too. */

/* ---- Where the space goes, the floor: plain sections under the answer ---- */
#panel-space .space-result .viz > .tile-caption, #panel-space .space-result .viz figcaption.tile-caption,
#panel-space:has(.result-card.is-empty) .result-figs::before {
  font-size: var(--t-body); letter-spacing: 0; text-transform: none; color: var(--ink);
}
#panel-space .alloc-bar { height: 18px; border-radius: 1198.8px; overflow: hidden; }
#panel-space .alloc-legend-row { font-size: var(--t-hint); }
#panel-space .sp-table > summary { font-size: var(--t-hint); }

/* ---- Below: the notes. The basis folded; the disclaimer stays in view ---- */
#panel-space .space-notes { margin-top: 28.8px; }
#panel-space .sp-basis > summary {
  display: inline-flex; align-items: center; gap: 9px; min-height: 36px; cursor: pointer; list-style: none;
  font-size: var(--t-hint); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2.7px;
}
#panel-space .sp-basis > summary::-webkit-details-marker { display: none; }
#panel-space .sp-basis > summary:focus-visible { outline: 1.8px solid var(--ink); outline-offset: 1.8px; }
#panel-space .space-notes .caption { font-size: var(--t-small); line-height: 1.5; color: var(--grey-strong); }
#panel-space .sp-basis[open] > .caption { margin: 3.6px 0 10.8px; }

/* --------------------------------------------------------------------------
   SPACE, wide screens: the same one-column journey as a phone, laid out wide.
   Your team across the top, the answer under it at full width, then the fold
   to refine it, the floor, and where the space goes. The panes flatten
   (display: contents) as they do up to 1198.8px in layout.css, so no markup or
   script moves; balance.js still finds every block.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  #panel-space .sp-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  #panel-space .sp-build,
#panel-space .sp-answer,
#panel-space .result-card,
#panel-space .sp-figs-slot{ display: contents; }
  #panel-space .sp-team { order: 1; display: grid; grid-template-columns: minmax(0, 648px) minmax(0, 396px); gap: 0 28.8px; align-items: start; padding: 25.2px 28.8px 28.8px; }
  #panel-space .sp-team > .sp-step, #panel-space .sp-team > .step-warning { grid-column: 1 / -1; }
  #panel-space .sp-team > .sp-field--std { margin-top: 0; }
  #panel-space .result-pin { order: 2; margin-top: 18px; padding: 32.4px 36px; }
  #panel-space .sp-how { order: 3; margin-top: 14.4px; }
  #panel-space .sp-more-sum { padding-inline: 28.8px 64.8px; }
  #panel-space .sp-how[open] > :not(summary) { margin-inline: 28.8px; max-width: 912px; }
  #panel-space .sp-room-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }

  #panel-space .result-figs { order: 8; margin-top: 36px; }
  
}

/* --------------------------------------------------------------------------
   SPACE: small screens. One column: team, answer, the fold, the floor.
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
  #panel-space .result-pin { margin-top: 18px; padding: 21.6px; }
  #panel-space .sp-how { margin-top: 14.4px; }
}
@media (max-width: 440px) {
  #panel-space .sp-field .btn-icon { width: 52.8px; }
}
/* Real 52.8px targets and 19.2px fields on touch (no iOS zoom). */
@media (max-width: 900px), (pointer: coarse) {
  #panel-space .sp-field .value-input { font-size: 25.2px; }
  #panel-space .sp-field--std .standard-select, #panel-space .rd-result-area { height: 52.8px; font-size: 19.2px; }
  #panel-space .sp-tab, #panel-space .sp-tab + .sp-tab { min-height: 52.8px; }
  #panel-space .room-count .btn-icon { width: 52.8px; height: 52.8px; }
  #panel-space .rd-inputs-wk-chip { min-height: 52.8px; border-radius: 26.4px; }
  #panel-space .rd-inputs-wk-chip--n { min-width: 52.8px; }
  #panel-space .rd-inputs-wk-day { height: 52.8px; }
  #panel-space .rd-inputs-wk-sz input, #panel-space .rd-inputs-wk-nm input, #panel-space .rd-inputs-wk-spare select { height: 52.8px; font-size: 19.2px; }
  #panel-space .rd-inputs-wk-rm { width: 52.8px; height: 52.8px; }
  #panel-space .rd-inputs-wk-add, #panel-space .rd-inputs-wk-apply, #panel-space .rd-inputs-wk-tip-go,
  #panel-space .rd-inputs-wk-more > summary, #panel-space .sp-table > summary, #panel-space .sp-basis > summary,
  #panel-space .sp-head-actions .text-link { min-height: 52.8px; }
}

/* --------------------------------------------------------------------------
   LEASE: the form in one soft card, the verdict in a white card
   -------------------------------------------------------------------------- */
#panel-lease .lc-build { padding: var(--c-pad); background: var(--paper); border-radius: var(--c-r); }
#panel-lease .lease-intro { margin-bottom: 18px; align-items: center; }
#panel-lease .lease-intro .lc-progress { font-size: var(--t-hint); color: var(--grey-strong); }
#panel-lease .lc-progress-marks i { border-radius: 1198.8px; }
#panel-lease .lc-form { gap: 18px 14.4px; }
#panel-lease .lc-label { margin-bottom: 7.2px; font-size: var(--t-label); color: var(--ink-2); }
/* .lc-form in each selector: calc.css's .lease-bar .s-token rules are as specific. */
#panel-lease .lc-box, #panel-lease .lc-form .lc-f > select { height: var(--ctl-h); border-radius: var(--c-r-ctl); }
#panel-lease .lc-box { padding: 0 14.4px; }
#panel-lease .lc-form .lc-f > select { padding-left: 14.4px; }
#panel-lease .lc-form .lc-f input, #panel-lease .lc-form .lc-f select { height: calc(var(--ctl-h) - 2.4px); font-size: var(--t-label); font-variant-numeric: tabular-nums; }
#panel-lease .lc-form .lc-f > select { height: var(--ctl-h); }
#panel-lease .lc-unit { font-size: var(--t-hint); }
#panel-lease .lc-hint { margin-top: 7.2px; font-size: var(--t-hint); }
#panel-lease .lease-bar .caption { margin-top: 10.8px; font-size: var(--t-hint); line-height: 1.45; }
#panel-lease .lc-optional { margin-top: 18px; border-top: 0; border-bottom: 0; }
#panel-lease .lc-optional > summary.lc-more-sum { min-height: 50.4px; font-size: var(--t-label); }
#panel-lease .lc-optional > summary .meta { font-size: var(--t-hint); }
#panel-lease .lc-optional .caption { font-size: var(--t-hint); }
#panel-lease .lc-privacy, #panel-lease .lease-inputs > .lc-privacy { margin-top: 14.4px; font-size: var(--t-small); }

/* The answer: the empty frame and the three tiles as one white card. */
#panel-lease .lc-empty-card, #panel-lease .scorecard, #panel-lease .lc-notlisted {
  background: var(--white); border: 1px solid transparent; border-top: 1px solid transparent;
  border-radius: var(--c-r); box-shadow: var(--c-shadow); overflow: hidden;
}
#panel-lease .lc-empty-card { padding: 25.2px 28.8px 28.8px; }
#panel-lease .lc-empty-k { margin-bottom: 7.2px; font-size: var(--t-label); letter-spacing: 0; text-transform: none; }
#panel-lease .lc-empty-t { font-size: 23.4px; line-height: 1.3; }
#panel-lease .lc-skel-cap { font-size: var(--t-hint); letter-spacing: 0; text-transform: none; }
#panel-lease .lc-skel-tiles { border-top-color: var(--line); }
#panel-lease .lc-skel-range, #panel-lease .lc-skel-band { border-radius: 7.2px; }
#panel-lease .lc-more { font-size: var(--t-label); }
#panel-lease .score-tile { padding: 21.6px 25.2px 23.4px; }
#panel-lease .score-tile .tile-caption { font-size: var(--t-label); letter-spacing: 0; text-transform: none; }
#panel-lease .score-value { margin: 7.2px 0 3.6px; font-size: clamp(32.4px, 3.2vw, 46.8px); font-variant-numeric: tabular-nums lining-nums; }
#panel-lease .score-status { font-size: var(--t-hint); }
#panel-lease .score-status::before { border-radius: 50%; }
#panel-lease .lc-delay { padding: 14.4px 25.2px 16.2px; font-size: var(--t-label); }
#panel-lease .lc-notlisted { padding: 21.6px 25.2px; }
#panel-lease .lc-notlisted .tile-caption { font-size: var(--t-body); letter-spacing: 0; text-transform: none; }

/* The charts: plain sections, sentence-case heads, readable notes. */
#panel-lease .lease-results .viz--dark { margin-top: 28.8px; padding-top: 0; border-top: 0; }
#panel-lease .viz .tile-caption, #panel-lease .lease-results .viz .tile-caption { font-size: var(--t-label); letter-spacing: 0; text-transform: none; color: var(--grey-strong); }
#panel-lease .chart-title, #panel-lease .lease-results .chart-title { font-size: 18px; line-height: 1.3; text-wrap: balance; }
#panel-lease .viz .caption, #panel-lease .lease-results .viz .caption { font-size: var(--t-small); line-height: 1.5; }
#panel-lease .lease-results .viz-note { font-size: var(--t-label); }
/* The range chart's title is the answer: set as the headline. */
#panel-lease .lc-range .chart-title { max-width: 36ch; font-family: var(--font-serif); font-weight: 500; font-size: clamp(23.4px, 2.3vw, 30.6px); line-height: 1.15; letter-spacing: -0.01em; }
/* One palette for every lease chart: you in red, Knight Frank in a soft grey,
   rounded bars (the same grey as the range's band). */
#panel-lease .lc-range, #panel-lease .lc-projection, #panel-lease .lc-window { --viz-kf: var(--grey); }
#panel-lease .lc-space .hbar-set--dark .hbar.is-need .hbar-fill { background: var(--grey); }
#panel-lease .pc-bar, #panel-lease .ac-seg, #panel-lease .hbar-fill, #panel-lease .tl-win { border-radius: 7.2px; }
#panel-lease .chart .lab { font-size: var(--t-hint); }
#panel-lease .lc-pdf { padding-top: 0; border-top: 0; margin-top: 25.2px; }
#panel-lease .lc-pdf-btn { min-height: 46.8px; padding: 0 21.6px; border-radius: 1198.8px; font-size: var(--t-label); }
#panel-lease .lc-pdf .caption { font-size: var(--t-small); }
@media (min-width: 1100px) {
  #panel-lease .lc-below { border-top: 0; padding-top: 7.2px; }
}

/* What to raise, what to check: soft cards, larger words. */
#panel-lease .lc-points-block, #panel-lease .lc-flags-block { padding-top: 0; border-top: 0; }
#panel-lease .lc-points-block .tile-caption, #panel-lease .lc-flags-block .tile-caption { font-size: var(--t-step); }
#panel-lease .lc-points li { padding: 18px 18px 19.8px; border-top: 0; border-radius: var(--c-r); }
#panel-lease .lc-points b { font-size: var(--t-label); }
#panel-lease .lc-points span { font-size: var(--t-hint); }
#panel-lease .lc-flags li { font-size: var(--t-hint); }

/* The advisor band under the lease: a soft card, not a ruled box. */
#lcOfferBand .lc-adviser { border: 0; border-radius: var(--c-r); background: var(--paper); }
#lcOfferBand .lc-adviser:has(#lcOffer[hidden]) { background: none; }
#lcOfferBand .offer-text, #lcOfferBand #nextStep .ns-body { font-size: var(--t-label); }
#lcOfferBand #offerUrgent, #lcOfferBand #offerFine, #lcOfferBand #offerCount { font-size: var(--t-small); }
#lcOfferBand .deliverables li b { font-size: var(--t-hint); }
#lcOfferBand #hcOpenBtn { border-radius: 1198.8px; }

/* --------------------------------------------------------------------------
   LEASE, wide screens: one column too. Your lease as one form across the top
   (each field keeps its column, so a grade appearing moves nothing), then the
   verdict, the range, the charts and the advice at full width.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  #panel-lease .lc-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #panel-lease .lc-build { padding: 25.2px 28.8px 21.6px; }
  #panel-lease .lc-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #panel-lease .lc-f--wide { grid-column: 1 / 3; }
  #panel-lease #lcGradeField, #panel-lease #lcAreaTextField { grid-column: 3; grid-row: 1; }
  #panel-lease .lease-bar .caption { max-width: 80ch; }
  #panel-lease .lc-optional .lc-form--opt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The verdict at full width: three tiles side by side again. */
  #panel-lease .scorecard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #panel-lease .score-tile { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 5.4px; padding: 25.2px 28.8px 27px; }
  #panel-lease .score-tile + .score-tile, #panel-lease .lc-delay + .score-tile { border-top: 0; border-left: 1px solid var(--line); }
  #panel-lease .score-tile .tile-caption, #panel-lease .score-status, #panel-lease .score-value { grid-column: 1; grid-row: auto; }
  #panel-lease .score-value { margin: 7.2px 0 3.6px; font-size: clamp(36px, 3.4vw, 50.4px); text-align: left; white-space: normal; }
  #panel-lease .lc-skel-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #panel-lease .lc-empty-card { padding: 32.4px 36px 36px; }
}
@media (min-width: 1200px) {
  #panel-lease .lc-form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #panel-lease .lc-optional .lc-form--opt { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   LEASE: small screens
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* The form's parts are laid out one by one here (layout.css), so the card
     falls to its pieces: the form itself carries the soft card. */
  #panel-lease .lc-build { padding: 0; background: none; border-radius: 0; }
  #panel-lease .lease-bar { padding: var(--c-pad); background: var(--paper); border-radius: var(--c-r); }
  /* The column's items start-align (layout.css), which shrank the answer to its content. */
  #panel-lease .lease-results { width: 100%; align-self: stretch; }
  #panel-lease .lc-empty-card, #panel-lease .scorecard, #panel-lease .lc-notlisted { margin-left: 0; margin-right: 0; }
  #panel-lease .lc-empty-card { padding: 21.6px; }
  #panel-lease .lc-empty-t { font-size: 19.8px; }
  #panel-lease .score-tile { padding: 16.2px 18px; }
  #panel-lease .score-value { font-size: 30.6px; }
  #panel-lease .lc-delay { padding: 12.6px 18px 14.4px; }
  #lcOfferBand .lc-adviser { margin: 0; border-radius: var(--c-r); }
}
@media (max-width: 900px), (pointer: coarse) {
  #panel-lease .lc-form .lc-f input, #panel-lease .lc-form .lc-f select { font-size: 19.2px; }
  #panel-lease .lc-optional > summary.lc-more-sum, #panel-lease .lc-pdf-btn, #panel-lease .lc-head-actions .text-link { min-height: 52.8px; }
}

@media print {
  #panel-space .result-pin, #panel-lease .scorecard, #panel-lease .lc-empty-card { box-shadow: none; border: 1px solid var(--line); }
  /* The basis prints with the estimate, as it did before it was folded. */
  #panel-space .sp-basis::details-content { content-visibility: visible; }
}

/* --------------------------------------------------------------------------
   TIPS: the small "i" beside a label and its one shared tooltip (tips.js).
   The tooltip matches the microsite's (.skyline-tip, .lunch-tip): ink, white
   14.4px body type, no arrow, the same shadow, a muted second line.
   -------------------------------------------------------------------------- */
.kf-tip-i {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px;
  margin: 0 0 0 7.2px; padding: 0; vertical-align: -2.25px; border: 1px solid var(--line-strong); border-radius: 50%;
  background: transparent; color: var(--grey-strong); cursor: help;
  font: italic 400 11.7px/1 var(--font-serif); transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.kf-tip-i::before { content: 'i'; }
/* The labels the tips sit beside run inline with them. */
#panel-space .sp-field .field-label, #panel-lease .lc-label { display: inline-block; }
#panel-lease .lc-label { padding-right: 0; }
#panel-space .rd-inputs-wk-spare .kf-tip-i, #panel-space .rd-result-where .kf-tip-i { margin-left: -3px; }
/* Said by the tip now, and still read with the field (aria-describedby). */
#panel-space #hint-hc, #panel-lease #lcRentHint {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* A 28.8px target on a pointer, 52.8px on touch, without moving the glyph. */
.kf-tip-i::after { content: ''; position: absolute; inset: -5px; }
@media (pointer: coarse) { .kf-tip-i::after { inset: -14.5px; } }
@media (hover: hover) {
  .kf-tip-i:hover { color: var(--ink); border-color: var(--ink); }
}
.kf-tip-i[aria-describedby] { color: var(--white); border-color: var(--ink); background: var(--ink); }
.kf-tip-i:focus-visible { outline: 2px solid var(--kf-red); outline-offset: 2px; }
.kf-tip {
  position: fixed; z-index: 2000; display: grid; gap: 1px; max-width: 288px; padding: 10px 12px;
  background: var(--ink); color: var(--white); border-radius: 12px;
  font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.35; text-align: left;
  box-shadow: 0 4px 16px rgba(26,26,26, 0.25); pointer-events: none;
  opacity: 0; transition: opacity var(--m-swap, 220ms) var(--m-out, ease-out);
}
.kf-tip.is-two { line-height: 1.35; }
.kf-tip span { color: rgba(255, 255, 255, 0.75); }
.kf-tip.is-on { opacity: 1; }
.kf-tip[hidden] { display: none; }
@media print { .kf-tip-i, .kf-tip { display: none; } }

/* --------------------------------------------------------------------------
   DISCLAIMERS: a short tag beside each estimate or illustration (real text,
   read and printed with it), one plain line where advice is given, and the
   full note at the foot of each tool.
   -------------------------------------------------------------------------- */
.kf-tag {
  display: inline-block; margin: 0 0 0 7.2px; padding: 1.8px 7.2px; border-radius: 1198.8px; vertical-align: 1px;
  background: var(--paper-2); color: var(--grey-strong); font-family: var(--font-body); font-size: 12.6px; font-weight: 400;
  line-height: 1.3; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
#panel-space .result-pin .kf-tag { background: var(--paper); }
#panel-space .rd-inputs-wk-disc { margin: 0; font-size: var(--t-small); line-height: 1.4; color: var(--grey-strong); }
#panel-space .rd-inputs-wk-disc .kf-tag { margin: 0 5.4px 0 0; background: var(--white); }
#panel-space .space-notes .sp-disc-more { margin-top: 7.2px; }
#panel-lease .lc-advice-note { grid-column: 1 / -1; margin: 0; max-width: 80ch; font-size: var(--t-small); line-height: 1.45; color: var(--grey-strong); }
#panel-lease .lc-advice:not(:has(> .lc-points-block:not([hidden]), > .lc-flags-block:not([hidden]))) { display: none; }
@media print {
  .kf-tag { border: 1px solid var(--line); }
}

/* Phones and tablets: the charts, standards and sample-floor link follow the
   team inputs and the answer, never above them (they had no order, so 0 put them first). */

/* Space against the estimate: two bars, red is you, grey the estimate, one line for the gap. */
.hbar.is-you .hbar-fill, .hbar-set--dark .hbar.is-you .hbar-fill { background: var(--kf-red); }
.hbar.is-need .hbar-fill, .hbar-set--dark .hbar.is-need .hbar-fill { background: #8A8880; }
.hbar-key { margin: 8px 0 0; font-size: 13px; color: var(--ink); }
/* Rent at expiry now lives on the rent strip: the space card takes the row. */
#panel-lease .lc-charts:has(#lcProjection[hidden]) #lcSpace { grid-column: 1 / -1; }
/* One chart carries the time left (the decision window); the meter above repeated it. */
#panel-lease #lcVMeter { display: none; }

/* "Where the space goes", zoomed: the floor is one track with your space as a
   single block; below it the same space opens to full width, each part named in
   place. The share is no longer read against two different totals. */
#panel-space #allocFigure #alloc-bar .alloc-seg { background: var(--kf-red) !important; }
#panel-space #allocFigure #alloc-bar { gap: 0; }
#panel-space #allocFigure .alloc-zoom-link { display: block; height: 18px; background: var(--paper-2, #EAE9E6); clip-path: polygon(0 0, calc(var(--share) * 100%) 0, 100% 100%, 0 100%); opacity: 0.9; }
#panel-space #allocFigure .alloc-zoom-bar { display: flex; gap: 2px; border-radius: 10px; overflow: hidden; }
#panel-space #allocFigure .alloc-zoom-seg { display: grid; align-content: center; gap: 2px; min-width: 0; min-height: 64px; padding: 10px 12px; color: #fff; }
#panel-space #allocFigure .alloc-zoom-n { font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-space #allocFigure .alloc-zoom-v { font-size: 15px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-space #allocFigure > .alloc-legend { display: none !important; }
#panel-space #allocFigure > .sp-dots-key { order: 0; }
@media (max-width: 640px) {
  /* Too narrow to name three parts inside the bar: the bar keeps colour, the legend names them. */
  #panel-space #allocFigure .alloc-zoom-n, #panel-space #allocFigure .alloc-zoom-v { display: none; }
  #panel-space #allocFigure .alloc-zoom-seg { min-height: 22px; padding: 0; }
  #panel-space #allocFigure > .alloc-legend { display: grid !important; }
}

/* Reception and shared areas: an option, a row of presets like the office-day chips. */
.sp-field--amen { margin-top: 14px; }
.amen-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.amen-opt { min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--white); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.amen-opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Explore your estimate: one picture at a time under the answer. */
#panel-space[data-explore="days"] #allocFigure, #panel-space[data-explore="days"] #spaceVsLease,
#panel-space[data-explore="areas"] #allocFigure, #panel-space[data-explore="areas"] #spaceVsLease { display: none; }
#panel-space[data-explore="where"] .result-figs::before { content: none; }

/* Where the space goes: the one zoom bar carries it; the floor track and funnel above it only repeated the share, now in the heading. */
#panel-space #allocFigure .alloc-track, #panel-space #allocFigure .alloc-zoom-link { display: none; }

/* The lease result in plain words: three numbered sentences, big and calm. */
.lc-plain { list-style: none; counter-reset: lcp; display: grid; gap: 10px; margin: 14px 0 18px; padding: 0; }
.lc-plain[hidden] { display: none; }
.lc-plain li { counter-increment: lcp; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.45; color: var(--ink); }
.lc-plain li::before { content: counter(lcp); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kf-red); color: var(--white); font-size: 14px; }

/* One type and button scale for both tools (the hero and the advisor banner keep their own).
   Text: 12 small, 14 body and labels, 16 lead, 20 headings, 28 section, then the big figure.
   Buttons: 14px, 44px tall for the main action; chips and tabs 14px, 40px tall. */
:is(#panel-space, #panel-lease) :is(.kf-btn):not(#nextStep *) { font-size: 14px; min-height: 44px; padding-inline: 22px; }
:is(#panel-space, #panel-lease) :is(.amen-opt, .rd-inputs-wk-chip, .rd-explore-tab, .rd-ins-tab) { font-size: 14px; min-height: 40px; }
:is(#panel-space, #panel-lease) :is(.text-link):not(#nextStep *) { font-size: 14px; }
:is(#panel-space, #panel-lease) :is(.caption, .meta, .sp-note, .viz-note, .rd-ins-s, .rd-ins-t, .rd-result-tile dt, .hbar-key, .tile-caption, .lc-v-k, .kf-tag):not(#nextStep *) { font-size: 12px; }
:is(#panel-space, #panel-lease) :is(.field-label, .lc-label, .rd-result-where-k, .sp-nudge, .lc-v-time, .lc-v-cmp td, .lc-v-cmp th):not(#nextStep *){ font-size: 14px; }
/* The scale, applied to the pieces that still carried their own size. */
html body :is(#panel-space, #panel-lease) :is(small, .dr-pct, .rd-result-scen-k, .rd-result-std-c, .rd-result-std-n, .rd-result-std-d, .rd-inputs-wk-sz-u, .rd-inputs-wk-dl, .rd-inputs-wk-dh, .rd-inputs-wk-tot-n, .rd-inputs-wk-disc, .sp-tab-v, .alloc-zoom-n):not(#nextStep *) { font-size: 12px; }
html body :is(#panel-space, #panel-lease) :is(.dr-name, .dr-value, .sp-tab-name, .rd-inputs-wk-line, .rd-inputs-wk-gap, .rd-inputs-wk-lead, .rd-inputs-wk-hint, .rd-inputs-wk-tot-k, .rm-label, .rm-value, .sp-more-s, .alloc-zoom-v, summary, label, .rd-inputs-wk-chip):not(#nextStep *) { font-size: 14px; }
html body #panel-space .rd-inputs-wk-presets .rd-inputs-wk-chip, html body #panel-space .rd-inputs-wk-chip { min-height: 40px; }

/* The step trail above each tool and the Next links at the end of the first containers. */

/* The (i) tip button sits on the label's centre line (it was 2px low once labels went to 14px). */
html body :is(#panel-space, #panel-lease) .kf-tip-i { vertical-align: 0; }

/* The tool heading: the question, one plain sentence, the source as a quiet footnote. */
html body #panel-space .sp-promise { display: block; max-width: 62ch; margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--grey-strong); }
html body #panel-space .sp-promise b { font-weight: 400; color: var(--ink); background: linear-gradient(transparent 62%, rgba(166, 25, 46, 0.14) 62%); }
html body #panel-space .sp-trust { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #DBD9D5); font-size: 12px; color: var(--grey-strong); max-width: 62ch; }

/* The advisor banner on a phone: one left edge for the title, the line, the faces and both buttons; buttons full width. */
@media (max-width: 640px) {
  html body #nextStep .ns-body { padding-left: 0; padding-right: 0; border: 0; margin-left: 0; max-width: none; }
  html body #nextStep .ns-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; margin-left: 0; }
  html body #nextStep .ns-actions .kf-btn { width: 100%; margin: 0; justify-content: center; }
  html body #nextStep .ns-contact { margin-left: 0; }
}
@media (max-width: 640px) {
  html body :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; justify-items: stretch !important; gap: 8px !important; width: 100% !important; }
  html body :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-actions .kf-btn { width: 100% !important; margin: 0 !important; }
}

/* Phone: the form fields are 44px tall at 16px text (16 stops iOS zooming in), not the oversized desktop sizes. */
@media (max-width: 640px) {
  html body #panel-lease :is(#lcArea, #lcGrade, #lcSqft, #lcRent) { font-size: 16px; height: 44px; min-height: 44px; }
  html body #panel-lease #leaseExpiryDate { font-size: 14px; height: 44px; min-height: 44px; }
  html body #panel-lease #leaseBar { padding: 14px; }
  html body #panel-lease #leaseBar .lc-f { gap: 4px; }
  html body #panel-lease #lcGrade { padding-right: 28px; text-overflow: ellipsis; }
  html body #panel-space #standard { font-size: 16px; height: 44px; min-height: 44px; }
  html body #panel-space .sp-team :is(.stepper, .sp-stepper, [class*="stepper"]) { min-height: 48px; }
  html body #panel-space .sp-team input[type="number"], html body #panel-space .sp-team input[type="text"] { font-size: 22px; }
}

/* The small print is folded by default: one line, open it to read it. */
.lc-notes { margin: 18px 0 0; border-top: 1px solid var(--line, #DBD9D5); }
.lc-notes[hidden] { display: none; }
.lc-notes > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 14px; color: var(--grey-strong); }
.lc-notes > summary::-webkit-details-marker { display: none; }
.lc-notes > summary::after { content: '+'; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); }
.lc-notes[open] > summary::after { content: '-'; }
.lc-notes .lc-disclaimer { margin: 0 0 12px; }