/* ==========================================================================
   LAYOUT: the main area of the tools (loads after compact.css).
   Not the header, the banner or the footer, and nothing inside #rd-floor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SPACE REQUIRED (#panel-space)
   A heading row; then two panes from 810.9px: what you tell us (team, then the
   week plan or the rooms behind one switch) on the left, the answer card and
   its floor plan on the right. Nothing sticks but the site header. Up to
   810px the panes flatten into one column: team, answer, week, floor, the
   breakdown, the next step.
   -------------------------------------------------------------------------- */
#panel-space.band, #panel-space.band--white { padding: 25.2px 0 43.2px; }

/* ---- Heading row ---- */
#panel-space .sp-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5.4px 21.6px;
  margin: 0 0 21.6px; padding-bottom: 12.6px; border-bottom: 1px solid var(--ink);
}
#panel-space .sp-title {
  margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(25.2px, 2.5vw, 34.2px);
  line-height: 1.1; letter-spacing: -0.005em; color: var(--ink);
}
#panel-space .sp-head-actions { display: flex; flex-wrap: wrap; gap: 3.6px 19.8px; margin: 0; }
#panel-space .sp-head-actions .text-link { min-height: 32.4px; padding: 3.6px 0; margin: 0; font-size: 12.6px; }
/* Nothing to copy before there is an estimate. */

/* ---- Two panes ---- */
#panel-space .sp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28.8px; align-items: start; }
/* Two panes from 900px: a fixed inputs pane, the answer beside it. Below
   that one column (a 691.2px tablet gets the floor at the full width). */
@media (min-width: 1000px) {
  #panel-space .sp-grid { grid-template-columns: 414px minmax(0, 1fr); gap: 28.8px; }
  /* A narrower people box, so the team names keep their room. */
  #panel-space .rd-inputs-wk { --wk-size: 46.8px; --wk-gap: 2.7px; }
  /* Each pane at its own height: "Where the space goes" sits under the
     answer card in every state (balance.js keeps it there), and no gaps are
     opened between blocks. The answer pane's height lets its peek stick. */
  #panel-space .sp-build, #panel-space .sp-answer { display: flex; flex-direction: column; align-self: stretch; }
  #panel-space .result-card { display: flex; flex-direction: column; }
  #panel-space .sp-figs-slot:empty { display: none; }
  #panel-space .sp-figs-slot--r { margin-top: 18px; }
}
@media (min-width: 1200px) {
  #panel-space .sp-grid { grid-template-columns: 432px minmax(0, 1fr); gap: 36px; }
}
@media (min-width: 1400px) {
  #panel-space .sp-grid { grid-template-columns: 468px minmax(0, 1fr); gap: 36px; }
}
#panel-space .sp-build, #panel-space .sp-answer { min-width: 0; }
#panel-space .sp-answer.space-result { margin-top: 0; }

/* ---- Left: your team ---- */
#panel-space .sp-step {
  display: flex; align-items: baseline; gap: 9px; margin: 0 0 10.8px;
  font-family: var(--font-body); font-size: 16.2px; font-weight: 400; line-height: 1.3; color: var(--ink);
}
#panel-space .sp-step .step-n, #panel-space .sp-tab .step-n { min-width: 0; font-size: 11.7px; }
#panel-space .sp-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10.8px 14.4px; }
#panel-space .sp-field { min-width: 0; }
#panel-space .sp-field .field-label { display: block; margin: 0 0 5.4px; font-size: 12.6px; color: var(--ink-2); letter-spacing: 0; text-transform: none; }
#panel-space .sp-field .input-row { gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); }
#panel-space .sp-field .input-row:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
#panel-space .sp-field .btn-icon { flex: none; width: 43.2px; height: 46.8px; border: 0; border-radius: 0; background: var(--paper); }
@media (hover: hover) {
  #panel-space .sp-field .btn-icon:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--paper-2); }
}
#panel-space .sp-field .value-input {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 46.8px; border: 0; border-radius: 0; background: var(--white);
  font-size: 23.4px; text-align: center;
}
#panel-space .sp-field .value-input:focus { outline: none; }
#panel-space .sp-note { margin: 5.4px 0 0; font-size: 11.26px; line-height: 1.4; color: var(--grey-strong); }
#panel-space .sp-desk-note b { font-weight: 500; color: var(--ink); }
#panel-space .sp-desk-note::before { content: ''; display: inline-block; width: 7.2px; height: 7.2px; margin: 0 5.4px 0 0; background: var(--kf-red); vertical-align: 0; }
#panel-space .sp-desk-note.is-override::before { background: #8A6D00; }
#panel-space .sp-desk-note .text-link { display: inline; min-height: 0; padding: 0; margin: 0; font-size: inherit; }
#panel-space .sp-field--std { margin-top: 12.6px; }
#panel-space .sp-field--std .standard-select { width: 100%; height: 43.2px; font-size: 13.5px; padding-left: 10.8px; background-color: var(--white); }
#panel-space .sp-team > .step-warning:not(:empty) { margin: 9px 0 0; }

/* ---- Left: the switch (Week plan | Rooms and support), one slot ---- */
#panel-space .sp-how { margin-top: 21.6px; }
#panel-space .sp-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--ink); border-radius: var(--radius); }
#panel-space .sp-tab {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 1.8px 7.2px;
  min-height: 43.2px; padding: 7.2px 9px; border: 0; background: var(--white); color: var(--ink);
  font: inherit; font-size: 13.5px; line-height: 1.25; text-align: center; cursor: pointer;
}
#panel-space .sp-tab + .sp-tab { border-left: 1px solid var(--ink); }
@media (hover: hover) {
  #panel-space .sp-tab:hover { background: var(--paper); }
}
#panel-space .sp-tab[aria-selected="true"] { background: var(--ink); color: var(--white); }
#panel-space .sp-tab[aria-selected="true"] .step-n { color: #DBA3AB; }
#panel-space .sp-tab:focus-visible { outline: 1.8px solid var(--kf-red); outline-offset: 1.8px; position: relative; z-index: 1; }
#panel-space .sp-tab-v { font-size: 11.26px; color: var(--grey-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
#panel-space .sp-tab-v:empty { display: none; }
#panel-space .sp-tab[aria-selected="true"] .sp-tab-v { color: rgba(255, 255, 255, 0.8); }
#panel-space .sp-panel { padding-top: 16.2px; }
#panel-space .sp-panel[hidden] { display: none; }
#panel-space .sp-panel-lead { margin: 0 0 3.6px; font-size: 12.6px; line-height: 1.45; color: var(--grey-strong); }
#panel-space .sp-room-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
#panel-space .sp-rooms .list-title { margin: 14.4px 0 3.6px; font-size: 10.8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-strong); }

/* ---- Right: the answer card ---- */
#panel-space .result-card { border-top: 0; }
#panel-space .result-pin {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 0 28.8px;
  padding: 16.2px 21.6px 18px; background: var(--paper); border-top: 2.7px solid var(--kf-red);
}
#panel-space .result-pin > *, #panel-space .rd-result-sum > * { grid-column: 1 / -1; min-width: 0; }
#panel-space .result-card .result-label.result-head {
  margin: 0 0 3.6px; font-size: 10.8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-strong);
}
#panel-space .result-sqft { margin: 0; font-size: clamp(57.6px, 6vw, 79.2px); line-height: 0.95; letter-spacing: -0.02em; gap: 9px; }
#panel-space .result-sqft span:last-child { font-size: 18px; letter-spacing: 0; }
#panel-space .result-card .result-empty { margin: 3.6px 0 7.2px; max-width: 22ch; font-size: 23.4px; font-weight: 300; line-height: 1.2; color: var(--ink); }
#panel-space .result-card.is-empty { min-height: 0; }
#panel-space .result-card.is-empty::after { display: none; }
#panel-space .result-card .open-plan { margin: 5.4px 0 0; font-size: 11.26px; }
/* People per desk and per person, as one quiet line (the counts are beside it). */
#panel-space .result-meta { display: flex; flex-wrap: wrap; gap: 3.6px 18px; margin: 9px 0 0; padding: 0; border: 0; }
#panel-space .result-meta[hidden] { display: none; }
#panel-space .result-meta > div { display: flex; align-items: baseline; gap: 5.4px; padding: 0; border: 0; margin: 0; }
#panel-space .result-meta > div:nth-child(-n+2) { display: none; }
#panel-space .result-meta .rm-label { order: 2; margin: 0; font-size: 11.7px; color: var(--grey-strong); }
#panel-space .result-meta .rm-value { font-size: 13.5px; font-weight: 400; line-height: 1.3; }

/* Wide right pane: the figure on the left, the rent on the right. */
@media (min-width: 1200px) {
  #panel-space .result-pin { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  #panel-space .result-pin > .result-label { grid-row: 1; grid-column: 1; }
  #panel-space .result-pin > .result-sqft, #panel-space .result-pin > .result-empty { grid-row: 2; grid-column: 1; }
  #panel-space .result-pin > .result-meta { grid-row: 4; grid-column: 1 / -1; }
  #panel-space .result-pin > .open-plan { grid-row: 5; }
}
/* Wider still: the next step beside the area. The floor plan takes the pane's
   full width under the answer; where the space goes sits below both panes. */

/* ---- Right: the floor, the busiest day, where the space goes ---- */

#panel-space .result-figs { display: block; margin-top: 3.6px; }
#panel-space .result-figs-side:not(:has(> :not([hidden]))) { display: none; }
#panel-space .space-result .viz { margin-top: 18px; }
#panel-space .space-result .viz > .tile-caption, #panel-space .space-result .viz figcaption.tile-caption { margin-bottom: 9px; padding-top: 10.8px; }
#panel-space .alloc-bar { height: 25.2px; margin-top: 0; background: var(--paper); }
#panel-space .alloc-legend { display: flex; flex-wrap: wrap; gap: 5.4px 18px; margin-top: 9px; }
#panel-space .alloc-legend[hidden] { display: none; }
#panel-space .alloc-legend-row { gap: 6.3px; font-size: 11.7px; color: var(--ink-2); }
#panel-space .alloc-legend-row b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
#panel-space .alloc-legend-pct { color: var(--grey-strong); font-variant-numeric: tabular-nums; }
#panel-space .sp-table { margin-top: 7.2px; }
#panel-space .sp-table > summary {
  display: inline-flex; align-items: center; min-height: 32.4px; cursor: pointer; list-style: none;
  font-size: 12.6px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2.7px;
}
#panel-space .sp-table > summary::-webkit-details-marker { display: none; }
#panel-space .sp-table > summary:focus-visible { outline: 1.8px solid var(--ink); outline-offset: 1.8px; }
#panel-space .sp-table[open] > summary { margin-bottom: 3.6px; }
#panel-space .breakdown { margin-top: 0; }
/* Under the answer, from 900px: "Show the table" on the caption's line and
   the legend in three columns, so the block stays short beside the inputs. */
@media (min-width: 1000px) {
  #panel-space #allocFigure { position: relative; }
  #panel-space #allocFigure .sp-table > summary { position: absolute; top: 1.8px; right: 0; min-height: 28.8px; }
  #panel-space #allocFigure .sp-table:not([open]) { margin-top: 0; }
  /* Columns that can shrink (minmax, not max-content): the plain names fit the
     pane at 1024 without pushing the page wider. */
  #panel-space .alloc-legend { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 5.4px 21.6px; }
  #panel-space .alloc-legend-row { min-width: 0; flex-wrap: wrap; }
}

/* ---- Empty: the same frame as the filled answer. The floor's mount is a
   drawing plate with the floor's prompt centred on it (balance.js sizes it so
   the pane ends level with the inputs), where the space goes is a grey bar
   with its legend rows, and the busiest day a row of grey figures. ---- */

/* Before anything is typed: the floor's own prompt, without the reception
   minimum the formula keeps for an office of no one. */

#panel-space:has(.result-card.is-empty) .result-figs::before {
  content: 'Where the space goes'; display: block; padding: 10.8px 0 0;
  font-size: 10.8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-strong);
  background:
    linear-gradient(var(--paper-2), var(--paper-2)) 0 34.2px / 100% 25.2px no-repeat,
    linear-gradient(var(--paper-2), var(--paper-2)) 0 70.2px / 26% 10.8px no-repeat,
    linear-gradient(var(--paper-2), var(--paper-2)) 32% 70.2px / 22% 10.8px no-repeat,
    linear-gradient(var(--paper-2), var(--paper-2)) 60% 70.2px / 18% 10.8px no-repeat,
    linear-gradient(var(--paper-2), var(--paper-2)) 0 90px / 30% 10.8px no-repeat,
    linear-gradient(var(--paper-2), var(--paper-2)) 36% 90px / 24% 10.8px no-repeat;
  min-height: 111.6px; box-sizing: border-box;
}

/* ---- Where the space goes: under the answer card, in every state ---- */
#panel-space .sp-figs-slot--r { margin-top: 18px; }
#panel-space .sp-figs-slot .result-figs, #panel-space .sp-figs-slot .viz:first-child { margin-top: 0; }

/* ---- The floor's notes, folded: one line says what the drawing is ---- */

/* From 900px: a compact card that sticks at the top of the answer pane. */

/* Up to 899.1px: a slim line fixed under the header. */

/* ---- Below: the advisor band and the notes, full width ---- */
#panel-space #nextStepSlot-space:not(:empty) { margin-top: 32.4px; }
#panel-space #nextStepSlot-space #nextStep { margin-top: 0; }
#panel-space .space-notes { max-width: none; margin-top: 18px; padding-top: 10.8px; }

/* ---- Up to 810px: tighter heads ---- */
@media (max-width: 900px) {
  #panel-space.band, #panel-space.band--white { padding: 18px 0 36px; }
  #panel-space .sp-head { margin-bottom: 16.2px; padding-bottom: 9px; }
  #panel-space .sp-tab { font-size: 12.6px; padding: 5.4px 7.2px; }
}
/* ---- Up to 899.1px: one column. Your team, then the answer card straight
   under the counts (the eye meets the number before the week table), then
   the week or the rooms, the floor and where the space goes. The peek
   carries the figure while the card is off screen. ---- */
@media (max-width: 999px) {
  #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; }
  #panel-space .result-pin { order: 2; margin: 21.6px 0 0; padding: 14.4px 14.4px 16.2px; }
  #panel-space .sp-how { order: 3; margin-top: 25.2px; }

  #panel-space .result-figs { order: 8; margin-top: 21.6px; }
}
@media (max-width: 759px) {
  /* Room under the last block for the WhatsApp button. */
  #panel-space.band, #panel-space.band--white { padding-bottom: 79.2px; }
}
@media (max-width: 440px) {
  #panel-space .sp-counts { gap: 9px; }
  #panel-space .sp-field .btn-icon { width: 39.6px; }
  #panel-space .sp-field .value-input { font-size: 19.8px; }
}

@media print {
  #panel-space .sp-switch, #panel-space .sp-head-actions { display: none !important; }
  #panel-space .sp-grid { display: block; }
}

/* --------------------------------------------------------------------------
   LEASE CHECK (#panel-lease)
   The same system as the space tool: a heading row; then two panes from
   810.9px, your lease as a labelled form on the left, the answer (three tiles
   on a paper card with a red rule, then the range, the rent at expiry beside
   the decision window, and the space) on the right. Nothing sticks. Below:
   the three points beside the checklist, then one advisor band (the offer
   and its form beside the advisors). Up to 810px the panes flatten into one
   column: the form, the tiles, the detail, the PDF, the points, the checklist,
   the advisor band.
   -------------------------------------------------------------------------- */
#panel-lease > .band--dark, #panel-lease > #leaseBand { padding: 25.2px 0 0; }
#panel-lease .field-tone { background: none; padding: 0; }

/* ---- Heading row (as .sp-head) ---- */
#panel-lease .lc-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5.4px 21.6px;
  margin: 0 0 21.6px; padding-bottom: 12.6px; border-bottom: 1px solid var(--ink);
}
#panel-lease .lc-title {
  margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(25.2px, 2.5vw, 34.2px);
  line-height: 1.1; letter-spacing: -0.005em; color: var(--ink);
}
#panel-lease .lc-head-actions { display: flex; flex-wrap: wrap; gap: 3.6px 19.8px; margin: 0; }
#panel-lease .lc-head-actions .text-link { min-height: 32.4px; padding: 3.6px 0; margin: 0; font-size: 12.6px; color: var(--ink); }
/* Nothing to copy before there is a result. */
#panel-lease:has(#lcScorecard[hidden]) #copyLeaseSummary { display: none; }

/* ---- Two panes ---- */
#panel-lease .lc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28.8px; align-items: start; }
@media (min-width: 901px) {
  #panel-lease .lc-grid { grid-template-columns: 414px minmax(0, 1fr); gap: 25.2px; }
}
@media (min-width: 1200px) {
  #panel-lease .lc-grid { grid-template-columns: 421.2px minmax(0, 1fr); gap: 39.6px; }
}
#panel-lease .lc-build, #panel-lease .lease-results { min-width: 0; }

/* ---- Left: the step and the progress on one line ---- */
#panel-lease .lease-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3.6px 14.4px; margin: 0 0 10.8px; border: 0; }
#panel-lease .lc-step {
  display: flex; align-items: baseline; gap: 9px; margin: 0;
  font-family: var(--font-body); font-size: 16.2px; font-weight: 400; line-height: 1.3; color: var(--ink);
}
#panel-lease .lc-step .step-n { min-width: 0; font-size: 11.7px; }
#panel-lease .lease-intro .lc-progress { margin: 0; gap: 9px; font-size: 11.26px; line-height: 1.3; }
#panel-lease .lc-progress-marks i { width: 21.6px; }

/* ---- Left: the form, labelled fields (no longer a sentence or a bar) ---- */
#panel-lease .lease-bar, #panel-lease .lease-inputs { display: block; position: static; padding: 0; box-shadow: none; }
#panel-lease .lc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12.6px 12.6px; margin: 0; }
#panel-lease .lc-f { display: block; margin: 0; min-width: 0; max-width: none; }
#panel-lease .lc-f[hidden] { display: none; }
#panel-lease .lc-f--wide { grid-column: 1 / -1; }
#panel-lease .lc-label { display: block; margin: 0 0 5.4px; padding-right: 19.8px; font-size: 12.6px; line-height: 1.35; color: var(--ink-2); }
#panel-lease .lc-opt { color: var(--grey-strong); }
#panel-lease .lc-gone { display: none !important; }
/* One box per field: 43.2px, a hairline that darkens on focus. */
#panel-lease .lc-box {
  display: flex; align-items: center; gap: 5.4px; height: 43.2px; padding: 0 10.8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white);
}
@media (hover: hover) {
  #panel-lease .lc-box:hover,
  #panel-lease .lc-f > select:hover { border-color: var(--ink); }
}
#panel-lease .lc-box:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
#panel-lease .lc-f input, #panel-lease .lc-f select {
  display: block; width: 100% !important; min-width: 0; max-width: none; height: 41.4px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background-color: transparent; field-sizing: fixed;
  font: inherit; font-size: 13.5px; font-weight: 400; line-height: 1.3; color: var(--ink); text-align: left;
}
#panel-lease .lc-f input:focus, #panel-lease .lc-f input:focus-visible { outline: none; background: transparent; }
#panel-lease .lc-f > select {
  height: 43.2px; padding: 0 30.6px 0 10.8px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background-color: var(--white); background-position: right 10.8px center; text-overflow: ellipsis;
}
#panel-lease .lc-f > select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background-color: var(--white); }
#panel-lease .lc-f > select:focus-visible { outline: 1.8px solid var(--kf-red); outline-offset: 1.8px; }
#panel-lease .lc-unit { flex: none; font-size: 11.7px; color: var(--grey-strong); white-space: nowrap; }
#panel-lease .lc-unit--pre { color: var(--ink-2); }
#panel-lease .lc-box:has([aria-invalid="true"]), #panel-lease .lc-f > select[aria-invalid="true"] { border-color: var(--st-caution); box-shadow: inset 0 -1.5px 0 var(--st-caution); }
/* The tick for a filled field, at the end of its label. */
#panel-lease .lc-f.is-done::after { top: 1px; right: 0; }
#panel-lease .lc-f.is-done:has([aria-invalid="true"])::after { display: none; }
/* The notes under the form: the rent basis, the area's coverage, any check. */
#panel-lease .lease-bar .caption { max-width: none; margin: 7.2px 0 0; font-size: 11.26px; line-height: 1.45; text-align: left; }
#panel-lease .lease-bar .caption:empty { display: none; }
#panel-lease .lc-rent-hint { color: var(--grey-strong); }

/* ---- Left: the optional detail, the privacy line, the PDF ---- */
#panel-lease .lc-optional { margin: 14.4px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#panel-lease .lc-optional > summary.lc-more-sum {
  display: flex; align-items: center; gap: 10.8px; min-height: 43.2px; margin: 0; padding: 0;
  font-size: 13.5px; color: var(--ink); border: 0;
}
#panel-lease .lc-optional > summary .meta { font-size: 11.26px; color: var(--grey-strong); }
#panel-lease .lc-optional > summary:focus-visible { outline: 1.8px solid var(--ink); outline-offset: 1.8px; }
#panel-lease .lc-form--opt { padding: 3.6px 0; }
#panel-lease .lc-optional .caption { max-width: none; margin: 7.2px 0 0; font-size: 11.26px; line-height: 1.45; }
#panel-lease .lc-optional .caption:empty { display: none; }
#panel-lease .lc-optional[open] { padding-bottom: 12.6px; }
#panel-lease .lc-postcode-suggest { margin: 5.4px 0 0; }
#panel-lease .lc-privacy, #panel-lease .lease-inputs > .lc-privacy { max-width: none; margin: 10.8px 0 0; text-align: left; font-size: 11.26px; line-height: 1.45; color: var(--grey-strong); }
#panel-lease .lc-pdf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7.2px 12.6px;
  margin: 14.4px 0 0; padding-top: 14.4px; border-top: 1px solid var(--line);
}
#panel-lease .lc-pdf[hidden] { display: none; }
#panel-lease .lc-pdf-btn { min-height: 39.6px; padding: 0 16.2px; font-size: 13.5px; background: var(--white); color: var(--ink); border: 1px solid var(--ink); }
@media (hover: hover) {
  #panel-lease .lc-pdf-btn:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
}
#panel-lease .lc-pdf .caption { flex: 1 1 162px; margin: 0; font-size: 11.26px; line-height: 1.4; }
#panel-lease .lc-pdf .lc-pdf-msg { flex-basis: 100%; }
#panel-lease .lc-pdf .lc-pdf-msg:empty { display: none; }

/* ---- Right: the answer ---- */
/* Its heading stays for the result bar's focus and for screen readers. */
#panel-lease .lc-result-head {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#panel-lease #warn-3:not(:empty) { margin: 0 0 10.8px; }
#panel-lease .lc-empty-card { padding: 16.2px 21.6px 19.8px; background: var(--paper); border-top: 2.7px solid var(--kf-red); }
#panel-lease .lc-empty-card[hidden] { display: none; }
#panel-lease .lc-empty-k { margin: 0 0 5.4px; font-size: 10.8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-strong); }
#panel-lease .lc-empty-t { margin: 0; max-width: 40ch; font-size: 21.6px; font-weight: 300; line-height: 1.25; color: var(--ink); text-wrap: balance; }
#panel-lease .lc-more { margin: 10.8px 0 0; font-size: 13.5px; color: var(--ink-2); }
#panel-lease .lc-more[hidden] { display: none; }

/* The three tiles: one paper card, a red rule over it, hairlines between. */
#panel-lease .scorecard {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0;
  background: var(--paper); border-top: 2.7px solid var(--kf-red);
}
#panel-lease .scorecard[hidden] { display: none; }
#panel-lease .score-tile { grid-column: auto; min-height: 0; padding: 14.4px 18px 16.2px; gap: 5.4px; background: none; box-shadow: none; }
#panel-lease .score-tile + .score-tile, #panel-lease .lc-delay + .score-tile { border-left: 1px solid var(--line); }
#panel-lease .score-tile .tile-caption { margin: 0; font-size: 10.8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-strong); }
#panel-lease .score-value { margin: 3.6px 0 1.8px; font-size: clamp(25.2px, 2.9vw, 39.6px); line-height: 1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
#panel-lease .score-status { margin-top: 0; font-size: 12.16px; line-height: 1.35; align-items: flex-start; }
#panel-lease .score-status::before { width: 9px; height: 9px; margin-top: 3.6px; }
#panel-lease .lc-delay {
  grid-column: 1 / -1; order: 1; max-width: none; margin: 0; padding: 10.8px 18px 12.6px;
  border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.4;
}
#panel-lease .lc-delay[hidden] { display: none; }
#panel-lease .lc-delay-fig { font-size: 18.9px; }
#panel-lease .lc-notlisted { margin: 0; padding: 16.2px 21.6px; background: var(--paper); border-top: 2.7px solid var(--kf-red); }
#panel-lease .lc-notlisted[hidden] { display: none; }

/* The detail under the tiles: compact charts on hairlines. */
#panel-lease .lease-results .viz--dark { margin-top: 21.6px; padding-top: 10.8px; border-top: 1px solid var(--line); }
#panel-lease .lease-results .chart-head { margin-bottom: 12.6px; }
#panel-lease .lease-results .chart-head .viz-head { margin-bottom: 3.6px; }
#panel-lease .lease-results .viz .tile-caption { font-size: 10.8px; letter-spacing: 0.08em; text-transform: uppercase; }
#panel-lease .lease-results .chart-title { max-width: 60ch; font-size: 15.3px; line-height: 1.35; font-weight: 400; }
#panel-lease .lease-results .viz .caption { max-width: 72ch; font-size: 11.7px; line-height: 1.45; margin-top: 5.4px; }
#panel-lease .lease-results .viz-note { max-width: 72ch; font-size: 12.6px; line-height: 1.45; margin-top: 7.2px; }
#panel-lease .lease-results .viz .caption:empty, #panel-lease .lease-results .viz-note:empty { display: none; }
/* The months left are the Time to decide tile; said once. */
#panel-lease .lc-window .tl-figure { display: none; }
#panel-lease .lc-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 25.2px; }
#panel-lease .lc-charts > .viz { grid-column: auto; min-width: 0; }
@media (min-width: 1200px) {
  #panel-lease .lc-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-lease .lc-charts > .viz[hidden] + .viz:not([hidden]),
  #panel-lease .lc-charts > .viz:not([hidden]):has(+ .viz[hidden]) { grid-column: 1 / -1; }
}
#panel-lease .lc-space .hbar-set { margin-top: 9px; }
#panel-lease .lc-space .text-link { margin-top: 5.4px; }

/* ---- Below: the three points beside the checklist ---- */
#panel-lease .lc-advice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28.8px; margin-top: 32.4px; }
#panel-lease .lc-advice:not(:has(> :not([hidden]))) { display: none; }
@media (min-width: 901px) {
  #panel-lease .lc-advice { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 25.2px 28.8px; }
  #panel-lease .lc-advice > [hidden] + :not([hidden]),
  #panel-lease .lc-advice > :not([hidden]):has(+ [hidden]) { grid-column: 1 / -1; }
}
#panel-lease .lc-points-block, #panel-lease .lc-flags-block { margin: 0; padding-top: 10.8px; border-top: 1px solid var(--ink); }
#panel-lease .lc-points-block .tile-caption, #panel-lease .lc-flags-block .tile-caption {
  margin: 0 0 12.6px; font-size: 15.3px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink);
}
#panel-lease .lc-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10.8px; }
#panel-lease .lc-points li { grid-column: auto; padding: 12.6px 14.4px 14.4px; gap: 3.6px; border-top: 1.8px solid var(--kf-red); }
#panel-lease .lc-points li::before { font-family: var(--font-serif); font-weight: 500; font-size: 21.6px; line-height: 1.1; }
#panel-lease .lc-points b { font-size: 13.5px; line-height: 1.35; }
#panel-lease .lc-points span { font-size: 12.16px; line-height: 1.45; color: var(--ink-2); }
#panel-lease .lc-flags, #panel-lease #lcFlagsBlock ul { columns: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7.2px; }
#panel-lease .lc-flags li { max-width: none; font-size: 12.6px; line-height: 1.4; padding-left: 19.8px; }
#panel-lease .lc-flags li::before { top: 3.6px; }
#panel-lease .lc-flags-block .lc-flags + .lc-flags { margin-top: 7.2px; }

/* ---- The advisor band: the offer beside the advisors, one card ---- */
#lcOfferBand.band, #lcOfferBand.band--paper { padding: 32.4px 0 43.2px; background: var(--white); }
#lcOfferBand:has(#lcOffer[hidden]) { padding: 32.4px 0 43.2px; }
#lcOfferBand .lc-adviser {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 21.6px 36px; align-items: start;
  padding: 19.8px 21.6px 21.6px; background: var(--white); border: 1px solid var(--line); border-top: 2.7px solid var(--ink);
}
@media (min-width: 1100px) {
  #lcOfferBand .lc-adviser:has(#lcOffer:not([hidden])) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
/* With the form open, the form takes the card; the advisors are in its own head. */
#lcOfferBand .lc-adviser:has(#hcForm:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
#lcOfferBand .lc-adviser:has(#hcForm:not([hidden])) #nextStepSlot-lease { display: none; }
#lcOfferBand .offer { padding: 0; background: none; border: 0; }
#lcOfferBand .offer-chip { margin: 0; }
#lcOfferBand .offer-title { max-width: none; margin-top: 9px; font-family: var(--font-serif); font-weight: 500; font-size: clamp(21.6px, 2.2vw, 28.8px); line-height: 1.15; letter-spacing: -0.005em; }
#lcOfferBand #offerCount { margin: 5.4px 0 0; font-size: 11.7px; }
#lcOfferBand .offer-text { margin: 7.2px 0 0; max-width: 64ch; font-size: 13.06px; line-height: 1.5; }
#lcOfferBand .deliverables { grid-template-columns: repeat(auto-fit, minmax(171px, 1fr)); gap: 3.6px 18px; margin: 12.6px 0 16.2px; }
#lcOfferBand .deliverables li::before { font-size: 10.36px; }
/* The memo's six parts by name; the words under each are in the form's intro. */
#lcOfferBand .deliverables li span { display: none; }
#lcOfferBand .deliverables li b { font-size: 12.6px; line-height: 1.35; }
#lcOfferBand #hcOpenBtn { min-height: 43.2px; padding: 0 19.8px; font-size: 13.5px; }
#lcOfferBand #offerUrgent, #lcOfferBand #offerFine { margin: 9px 0 0; font-size: 11.26px; line-height: 1.45; max-width: 72ch; }
/* The advisor prompt in the band: no card of its own. */
#lcOfferBand #nextStep { display: block; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
#lcOfferBand #nextStep .ns-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(21.6px, 2.2vw, 28.8px); line-height: 1.15; }
#lcOfferBand #nextStep .ns-body { margin: 7.2px 0 12.6px; font-size: 13.06px; }
#lcOfferBand #nextStep .ns-actions { margin-top: 0; }
#lcOfferBand #nextStep .ns-contact { margin-top: 14.4px; }
@media (min-width: 1100px) {
  /* No offer: the prompt alone, its words and buttons beside the advisors. */
  #lcOfferBand .lc-adviser:has(#lcOffer[hidden]) #nextStep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3.6px 36px; }
  #lcOfferBand .lc-adviser:has(#lcOffer[hidden]) #nextStep > * { grid-column: 1; }
  #lcOfferBand .lc-adviser:has(#lcOffer[hidden]) #nextStep > .ns-contact { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
/* With the offer showing it leads: its button is the request, so the
   prompt's own request and title step back, and its advisor button is
   secondary. The advisors come first in that column. */
#lcOfferBand .lc-adviser:has(#lcOffer:not([hidden])) #nextStep { display: flex; flex-direction: column; }
#lcOfferBand .lc-adviser:has(#lcOffer:not([hidden])) #nextStep .ns-title,
#lcOfferBand .lc-adviser:has(#lcOffer:not([hidden])) #nsRequest { display: none; }
#lcOfferBand .lc-adviser:has(#lcOffer:not([hidden])) #nextStep .ns-contact { order: -1; margin: 0 0 12.6px; }
#lcOfferBand .lc-adviser:has(#lcOffer:not([hidden])) #nextStep .ns-body { margin: 0 0 10.8px; font-size: 12.16px; color: var(--ink-2); }
#lcOfferBand .lc-adviser:has(#lcOffer:not([hidden])) #help-btn.kf-btn--primary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
@media (hover: hover) {
  #lcOfferBand .lc-adviser:has(#lcOffer:not([hidden])) #help-btn.kf-btn--primary:hover { background: var(--paper); }
}
#lcOfferBand .lc-disclaimer { max-width: 110ch; margin: 12.6px 0 0; font-size: 10.8px; line-height: 1.5; color: var(--grey-strong); }

/* ---- 901-899.25px: the answer pane is narrow, so the tiles are rows ---- */
@media (min-width: 901px) and (max-width: 1199px) {
  #panel-lease .scorecard { grid-template-columns: minmax(0, 1fr); }
  #panel-lease .score-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.8px 10.8px; padding: 10.8px 16.2px; }
  #panel-lease .score-tile + .score-tile, #panel-lease .lc-delay + .score-tile { border-left: 0; border-top: 1px solid var(--line); }
  #panel-lease .score-tile .tile-caption, #panel-lease .score-status { grid-column: 1; }
  #panel-lease .score-value { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 30.6px; text-align: right; overflow-wrap: normal; white-space: nowrap; }
}

/* ---- Up to 810px: one column, form, tiles, detail, PDF, points, checklist ---- */
@media (max-width: 900px) {
  #panel-lease > #leaseBand { padding-top: 18px; }
  #panel-lease .lc-head { margin-bottom: 16.2px; padding-bottom: 9px; }
  #panel-lease .lc-grid { display: flex; flex-direction: column; gap: 0; }
  #panel-lease .lc-build, #panel-lease .lease-inputs { display: contents; }
  #panel-lease .lease-intro { order: 1; }
  #panel-lease .lease-bar { order: 2; }
  #panel-lease .lc-optional { order: 3; }
  #panel-lease .lc-privacy { order: 4; }
  #panel-lease .lease-intro, #panel-lease .lease-bar, #panel-lease .lc-optional, #panel-lease .lc-privacy, #panel-lease .lc-pdf { width: 100%; max-width: none; align-self: stretch; }
  #panel-lease .lease-results { order: 5; margin-top: 21.6px; }
  #panel-lease .lc-pdf { order: 6; margin-top: 21.6px; }
  #panel-lease .lc-empty-card, #panel-lease .scorecard, #panel-lease .lc-notlisted { margin-left: -12px; margin-right: -12px; }
  #panel-lease .lc-empty-card { padding: 14.4px; }
  #panel-lease .lc-empty-t { font-size: 18px; }
  /* The tiles as rows: the label and status left, the figure right. */
  #panel-lease .scorecard { grid-template-columns: minmax(0, 1fr); }
  #panel-lease .score-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.8px 10.8px; padding: 10.8px 14.4px; }
  #panel-lease .score-tile + .score-tile, #panel-lease .lc-delay + .score-tile { border-left: 0; border-top: 1px solid var(--line); }
  #panel-lease .score-tile .tile-caption { grid-column: 1; }
  #panel-lease .score-value { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 27px; text-align: right; overflow-wrap: normal; white-space: nowrap; }
  #panel-lease .score-status { grid-column: 1; }
  #panel-lease .lc-delay { padding: 9px 14.4px 10.8px; }
  #panel-lease .lc-advice { margin-top: 28.8px; }
  #panel-lease .lc-points { grid-template-columns: minmax(0, 1fr); gap: 7.2px; }
  #panel-lease .lc-points li { grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; padding: 10.8px 12.6px 12.6px; }
  #panel-lease .lc-points li::before { grid-row: 1; font-size: 18px; }
  #panel-lease .lc-points li > * { grid-column: 2; }
  #lcOfferBand.band, #lcOfferBand.band--paper, #lcOfferBand:has(#lcOffer[hidden]) { padding: 25.2px 0 36px; }
  #lcOfferBand .lc-adviser { margin: 0 -12px; padding: 16.2px 14.4px 18px; border-left: 0; border-right: 0; }
  #lcOfferBand .deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.6px 12.6px; }
  #lcOfferBand #hcOpenBtn { width: 100%; }
}
@media (min-width: 561px) and (max-width: 900px) {
  #panel-lease .lc-empty-card, #panel-lease .scorecard, #panel-lease .lc-notlisted { margin-left: 0; margin-right: 0; }
  #lcOfferBand .lc-adviser { margin: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
@media (max-width: 560px) {
  #panel-lease .lc-form { gap: 10.8px 9px; }
  #panel-lease .lc-box { padding: 0 9px; gap: 3.6px; }
  #panel-lease .lc-f > select { padding-left: 9px; padding-right: 27px; background-position: right 9px center; }
  #panel-lease #lcPostcodeRow { grid-column: 1 / -1; }
}
@media (max-width: 340px) {
  #panel-lease .lc-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  #lcOfferBand .deliverables { grid-template-columns: minmax(0, 1fr); }
}

/* The phone's result bar for the lease check: the same slim line. */
@media (max-width: 900px) {
  body:has(#panel-lease:not([hidden])) #resultBar { padding-top: 7.2px; padding-bottom: 7.2px; min-height: 46.8px; }
  body:has(#panel-lease:not([hidden])) #resultBar .result-bar-label { display: none; }
  body:has(#panel-lease:not([hidden])) #resultBar .result-bar-go { min-height: 36px; }
}

@media print {
  #panel-lease .lc-head-actions, #panel-lease .lc-pdf { display: none !important; }
  #panel-lease .lc-grid { display: block; }
}

/* --------------------------------------------------------------------------
   BALANCE: the two panes hold only what is the same weight on both sides
   (your inputs beside the answer and its picture); everything that explains
   the answer runs at full width underneath, in even rows.
   -------------------------------------------------------------------------- */
#panel-space .sp-below { margin-top: 36px; }
#panel-space .sp-below #nextStepSlot-space:not(:empty) { margin-top: 0; }
#panel-lease .lc-below { margin-top: 32.4px; }
#panel-lease .lc-below:not(:has(.viz:not([hidden]))) { display: none; }
#panel-lease .lc-below .lc-charts .viz--dark:first-child, #panel-lease .lc-below .lc-charts .viz--dark { margin-top: 0; }
#panel-lease .lc-below > .lc-window { margin-top: 28.8px; }
@media (min-width: 1100px) {
  #panel-lease .lc-below { padding-top: 21.6px; border-top: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   ROUND 2: the lease result's empty frame, the date hint, one advisor band on
   both tools, and touch targets.
   -------------------------------------------------------------------------- */
@keyframes kfPeek { from { opacity: 0; translate: 0 -4.5px; } to { opacity: 1; translate: 0 0; } }

/* ---- Lease, empty: the filled frame in grey under the prompt ---- */
#panel-lease .lc-skel { margin-top: 18px; color: var(--grey-strong); }
#panel-lease .lc-skel-cap { display: block; font-size: 10.8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-strong); }
#panel-lease .lc-skel-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
#panel-lease .lc-skel-tile { display: grid; gap: 7.2px; padding: 12.6px 14.4px 14.4px; }
#panel-lease .lc-skel-tile:first-child { padding-left: 0; }
#panel-lease .lc-skel-tile + .lc-skel-tile { border-left: 1px solid var(--line); }
#panel-lease .lc-skel-tile b { font-family: var(--font-serif); font-weight: 400; font-size: 32.4px; line-height: 1; color: var(--line-strong); }
#panel-lease .lc-skel-tile i { display: block; width: 70%; height: 9px; background: var(--paper-2); }
#panel-lease .lc-skel-block { margin-top: 16.2px; padding-top: 12.6px; border-top: 1px solid var(--line); }
#panel-lease .lc-skel-range { position: relative; height: 30.6px; margin-top: 12.6px; background: var(--paper-2); }
#panel-lease .lc-skel-band {
  position: absolute; left: 36%; width: 30%; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  background: var(--line-strong); color: var(--ink); font-size: 10.8px; white-space: nowrap; overflow: hidden;
}
#panel-lease .lc-skel-scale { display: flex; justify-content: space-between; margin-top: 7.2px; }
#panel-lease .lc-skel-scale i { display: block; width: 32.4px; height: 7.2px; background: var(--paper-2); }
#panel-lease .lc-skel-time { position: relative; display: flex; justify-content: space-between; align-items: center; height: 21.6px; margin-top: 12.6px; }
#panel-lease .lc-skel-time::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3.6px; margin-top: -1.5px; background: var(--paper-2); }
#panel-lease .lc-skel-time i { position: relative; width: 12.6px; height: 12.6px; border-radius: 50%; background: var(--white); border: 2.7px solid var(--line-strong); }
#panel-lease .lc-skel-scale--t i { width: 57.6px; }
@media (max-width: 560px) {
  #panel-lease .lc-skel-tiles { grid-template-columns: minmax(0, 1fr); }
  #panel-lease .lc-skel-tile { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 9px 0; }
  #panel-lease .lc-skel-tile + .lc-skel-tile { border-left: 0; border-top: 1px solid var(--line); }
  #panel-lease .lc-skel-tile b { grid-row: 1 / span 2; grid-column: 2; font-size: 25.2px; }
}

/* ---- Lease: the date hint under "Lease ends" ---- */
#panel-lease .lc-hint { display: block; margin: 5.4px 0 0; font-size: 11.26px; line-height: 1.4; color: var(--grey-strong); }

/* ---- One advisor band on both tools: with no offer showing, the lease
   check's prompt is the same red band as the space tool's (polish.css) ---- */
#lcOfferBand .lc-adviser:has(#lcOffer[hidden]) { padding: 0; border: 0; background: none; }

/* ---- Touch: every text control at least 39.6px tall ---- */
@media (max-width: 900px), (pointer: coarse) {
  #panel-space .sp-head-actions .text-link, #panel-lease .lc-head-actions .text-link,
  #panel-space .sp-table > summary, #panel-space .rd-inputs-wk-add, #panel-space .rd-inputs-wk-mismatch .text-link,
  #panel-space .rd-inputs-wk-more > summary, #panel-lease .lc-space .text-link, #panel-lease .lc-postcode-suggest .text-link {
    display: inline-flex; align-items: center; min-height: 39.6px;
  }
  /* Links inside a sentence: a 39.6px hit area without opening up the lines. */
  #panel-space .sp-desk-note .text-link,
#nextStep .ns-wa a,
#nextStep .adv-tel,
#panel-lease .caption a,
#panel-lease .viz .caption a,
#lcOfferBand a:not(.kf-btn){
    padding-top: 10.8px; padding-bottom: 10.8px;
  }
  #panel-space .sp-desk-note .text-link{ display: inline-flex; align-items: center; min-height: 39.6px; padding-top: 0; padding-bottom: 0; }
}
#panel-space .rd-inputs-wk-gap { display: block; margin-top: 5.4px; }
/* The detail disclosure spans the advice grid; the checklist inside it keeps its rule. */
#panel-lease .lc-advice > .lc-points-block, #panel-lease .lc-advice > .lc-detail { grid-column: 1 / -1; }
#panel-lease .lc-advice > .lc-detail { margin-top: 0; }
#panel-lease .lc-detail .lc-flags-block { margin-top: 36px; }