/* --------------------------------------------------------------------------
   APP: the lease check as one screen. Your lease on the left, the verdict
   card on the right: one line, you against the market as a grouped list,
   the time left, and the two next steps, in the Knight Frank type and red.
   -------------------------------------------------------------------------- */
#panel-lease { --ios-r: 18px; --ios-hair: rgba(26, 26, 26, 0.12); }

/* The tiles are now rows in the card; the tiles stay in the page for the copy-summary and the phone bar. */
#panel-lease #lcScorecard { display: none; }

.lc-verdict {
  background: var(--white); border-radius: var(--ios-r); box-shadow: var(--c-shadow);
  padding: 22px 22px 18px; display: grid; gap: 14px;
}
.lc-v-k { margin: 0; font-size: 12px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-strong); }
.lc-v-head {
  margin: -6px 0 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.12; color: var(--ink); text-wrap: balance;
}

/* You against the market: an inset grouped list. */
.lc-v-cmp { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border-radius: 12px; overflow: hidden; font-variant-numeric: tabular-nums; }
.lc-v-cmp th, .lc-v-cmp td { padding: 11px 14px; text-align: right; font-size: 14px; line-height: 1.3; white-space: nowrap; }
.lc-v-cmp thead th { padding-top: 9px; padding-bottom: 7px; font-size: 11.5px; font-weight: 400; color: var(--grey-strong); }
.lc-v-cmp tbody th { text-align: left; font-weight: 400; color: var(--grey-strong); white-space: normal; }
.lc-v-cmp tbody td:nth-child(2) { color: var(--kf-red); font-weight: 400; }
.lc-v-cmp tbody td { color: var(--ink); }
/* Hairlines inset from the left, as in an iOS list. */
.lc-v-cmp tbody tr > * { box-shadow: inset 0 1px 0 var(--ios-hair); }
.lc-v-cmp .text-link { min-height: 0; padding: 0; font-size: 13px; }

.lc-v-time { margin: 0; padding-left: 17px; text-indent: -17px; font-size: 14px; line-height: 1.4; color: var(--ink-2, var(--ink)); }
.lc-v-time::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--grey); transform: translateY(-1px); }
.lc-v-time[data-status="good"]::before { background: var(--st-good, #2E7D4F); }
.lc-v-time[data-status="caution"]::before { background: var(--st-caution, #8A6D00); }
.lc-v-time[data-status="risk"]::before { background: var(--kf-red); }
.lc-v-time b { font-weight: 400; color: var(--ink); }

/* The two next steps: pills, side by side; the PDF note under them. */
.lc-v-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.lc-v-actions .kf-btn, #panel-lease .lc-v-actions .lc-pdf-btn { width: 100%; min-height: 48px; border-radius: 999px; justify-content: center; text-align: center; }
#panel-lease .lc-v-actions .lc-pdf { margin: 0; display: contents; }
#panel-lease .lc-v-actions .lc-pdf .caption { grid-column: 1 / -1; margin: 0; font-size: 12px; text-align: center; }
#panel-lease .lc-v-actions .lc-pdf .caption:empty { display: none; }

/* The range chart follows the card, which already states its title. */
#panel-lease .lc-verdict:not([hidden]) ~ .lc-range .chart-title { display: none; }
#panel-lease .lc-verdict + * { margin-top: 0; }
#panel-lease .lease-results .lc-range { margin-top: 22px; }

/* ---- Wide: two panes, the form beside the answer ---- */
@media (min-width: 1100px) {
  #panel-lease .lc-grid { grid-template-columns: 400px minmax(0, 1fr); gap: 28px; align-items: start; }
  #panel-lease .lc-build { border-radius: var(--ios-r); }
  #panel-lease .lc-form, #panel-lease .lc-optional .lc-form--opt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-lease .lc-f--wide { grid-column: 1 / -1; }
  #panel-lease #lcGradeField, #panel-lease #lcAreaTextField { grid-column: auto; grid-row: auto; }
  #panel-lease .lc-result-head { display: none; }
  #panel-lease .lc-verdict { padding: 26px 28px 22px; }
}

/* ---- Phone: the card full width, the next steps stacked ---- */
@media (max-width: 600px) {
  .lc-verdict { padding: 18px 16px 16px; border-radius: 16px; }
  .lc-v-cmp th, .lc-v-cmp td { padding: 10px 10px; font-size: 13.5px; }
  .lc-v-actions { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   SPACE, wide: the same two panes. Your team on the left; the
   answer card and the floor on the right. Undoes calm.css's one column (the
   layout.css panes it flattened come back as they were).
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  #panel-space .sp-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 28px; align-items: start; }
  #panel-space .sp-build, #panel-space .sp-answer { display: flex; flex-direction: column; align-self: stretch; min-width: 0; }
  #panel-space .result-card { display: flex; flex-direction: column; }
  #panel-space .sp-figs-slot{ display: block; }
  #panel-space .sp-figs-slot:empty { display: none; }
  #panel-space .sp-team { display: block; padding: 22px 24px 24px; border-radius: var(--ios-r, 18px); }
  #panel-space .sp-team .sp-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-space .sp-team > .sp-field--std { margin-top: 18px; }
  #panel-space .result-pin { margin-top: 0; padding: 28px 30px; border-radius: var(--ios-r, 18px); }
  #panel-space .sp-how { margin-top: 14px; }
  #panel-space .sp-how[open] > :not(summary) { margin-inline: 24px; }
  #panel-space .sp-room-cols { grid-template-columns: minmax(0, 1fr); }
  
  #panel-space .result-figs { margin-top: 28px; }
  /* calm.css orders the flattened blocks; here the card leads, then where the space goes, then the floor. */
  #panel-space .result-card > .result-pin { order: 1; }
  #panel-space .result-card > * { order: 2; }
  
}
/* The inputs stay beside the answer as the page scrolls; a pane taller than
   the window (the hybrid week open) scrolls inside itself, so none is cut off. */
@media (min-width: 1100px) {
  #panel-lease .lc-build, #panel-space .sp-build {
    position: sticky; top: calc(var(--header-h) + 14px); align-self: start;
    max-height: calc(100vh - var(--header-h) - 28px); overflow-y: auto; overscroll-behavior: contain;
  }
}

/* SPACE, before there is a team: the card's own prompt is the only ask.
   No grey stand-ins, no half-drawn floor under it. */
#panel-space .result-card.is-empty .result-figs,
#panel-space .result-card.is-empty .sp-figs-slot,
#panel-space .result-card.is-empty .sp-standards{ display: none; }
/* The Space card's next steps: the lease card's pills. */
#panel-space .sp-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 20px; }
#panel-space .sp-actions .kf-btn { width: 100%; min-height: 48px; border-radius: 999px; justify-content: center; text-align: center; }
#panel-space .result-card.is-empty .sp-actions { display: none; }
@media (max-width: 600px) { #panel-space .sp-actions { grid-template-columns: minmax(0, 1fr); } }

/* Very wide screens: the content runs to the banner's edges, as the header
   does, instead of a 1584px column with empty bands either side. */
@media (min-width: 1640px) {
  .wrap { max-width: none; padding-left: clamp(28.8px, 2.2vw, 56px); padding-right: clamp(28.8px, 2.2vw, 56px); }
  #panel-lease .lc-grid, #panel-space .sp-grid { grid-template-columns: 440px minmax(0, 1fr); gap: 36px; }
}
/* Buttons keep a button's length on a wide card. */
.lc-v-actions, #panel-space .sp-actions { max-width: 620px; }

/* A wide card: the comparison on the left, the time left and the next steps beside it. */
@media (min-width: 1400px) {
  .lc-verdict { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); column-gap: 36px; align-items: start; }
  .lc-v-k, .lc-v-head { grid-column: 1 / -1; }
  .lc-v-cmp { grid-column: 1; grid-row: 3 / span 2; }
  .lc-v-time { grid-column: 2; grid-row: 3; }
  .lc-v-cmp { grid-row: 3 / span 3; }
  .lc-v-meter { grid-column: 2; grid-row: 4; }
  .lc-v-actions { grid-column: 2; grid-row: 5; align-self: start; grid-template-columns: minmax(0, 1fr); max-width: none; }
}

/* --------------------------------------------------------------------------
   SPACE, first visit: what you get, then one question with one-tap answers.
   -------------------------------------------------------------------------- */
#panel-space .sp-intro { display: grid; gap: 8px; }
.sp-promise { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--grey-strong); }
.sp-promise span { padding: 4px 12px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; }
.sp-trust { margin: 0; font-size: 12px; color: var(--grey-strong); }

/* The quick team sizes: only on the empty card. */
.sp-quick { display: none; }
#panel-space .result-card.is-empty .sp-quick { display: grid; gap: 12px; margin-top: 18px; }
.sp-quick-k { font-size: 16px; color: var(--ink); }
.sp-quick-picks { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-quick-picks button {
  min-width: 72px; min-height: 52px; padding: 0 18px; border: 1px solid var(--line-strong, #B7B4AE); border-radius: 999px;
  background: var(--white); color: var(--ink); font: inherit; font-size: 20px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.sp-quick-picks button:hover { border-color: var(--kf-red); color: var(--kf-red); }
.sp-quick-picks button:focus-visible { outline: 2px solid var(--kf-red); outline-offset: 2px; }
.sp-quick-or { font-size: 12.6px; color: var(--grey-strong); }

/* Until there is a team, the form is the one question too: desks, the
   standard and the week plan appear once the team size is in. */
#panel-space:has(.result-card.is-empty) .sp-counts > .sp-field + .sp-field,
#panel-space:has(.result-card.is-empty) .sp-field--std,
#panel-space:has(.result-card.is-empty) #spMore { display: none; }

/* The nudge into the week plan: one plain line with an arrow. */
.sp-nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 18px;
  padding: 14px 18px; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink);
  font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.sp-nudge span { color: var(--kf-red); font-size: 18px; }
.sp-nudge:hover { background: #EAE9E6; }
#panel-space .result-card.is-empty .sp-nudge { display: none; }

/* The floor is a picture, said up front. */

/* --------------------------------------------------------------------------
   SPACE: the dot grid is the picture. One grid of 100 dots is a typical
   Grade A floor; your space fills it, coloured as the legend below.
   -------------------------------------------------------------------------- */
.sp-dots-head { margin: 0 0 4px; font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.15; color: var(--ink); }
.sp-dots-head:empty { display: none; }
#allocFigure > .tile-caption { margin-bottom: 14px; }
.sp-dots-key { margin: 0 0 12px; font-size: 12px; color: var(--grey-strong); }
.sp-dots-key:empty { display: none; }

/* The sample floor, opt-in. */

/* --------------------------------------------------------------------------
   SPACE: two small charts under the answer (insights.js).
   -------------------------------------------------------------------------- */
.rd-ins-row.is-base .rd-ins-track i { background: #8A8880; }
.rd-ins-row.is-here .rd-ins-k { color: var(--ink); font-weight: 400; }
.rd-ins-bars:has(.is-here) .rd-ins-row:not(.is-here) .rd-ins-track i { background: #B7B4AE; }

/* --------------------------------------------------------------------------
   LEASE card visuals: you and the market as two bars per row, and the time
   left as a meter over the planning window.
   -------------------------------------------------------------------------- */
.lc-v-bar.is-mkt { background: #8A8880; }
/* The market's range: a lighter band from its bottom to its top, on the market bar's line. */
.lc-v-key i.is-mkt { margin-left: 6px; background: #8A8880; }

.lc-v-meter { display: grid; gap: 6px; }
.lc-v-meter-track { position: relative; height: 10px; border-radius: 999px; background: #EAE9E6; overflow: hidden; }
.lc-v-meter-track i { position: absolute; inset: 0 auto 0 0; width: var(--gone, 0%); background: #8A8880; border-radius: 999px; }
.lc-v-meter[data-status="risk"] .lc-v-meter-track i { background: var(--kf-red); }
.lc-v-meter[data-status="caution"] .lc-v-meter-track i { background: var(--st-caution, #8A6D00); }
.lc-v-meter-l { font-size: 12.5px; color: var(--grey-strong); }

/* The three points: titles, each opening to its one sentence. */
#panel-lease .lc-points li details > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; font-size: 16px; line-height: 1.35; color: var(--ink); }
#panel-lease .lc-points li details > summary::-webkit-details-marker { display: none; }
#panel-lease .lc-points li details > summary::after { content: '+'; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 14px; color: var(--grey-strong); }
#panel-lease .lc-points li details[open] > summary::after { content: '-'; }
#panel-lease .lc-points li details > span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--grey-strong); }

/* "Where the space goes": one track is a typical floor, the coloured bar in it is
   your space split by what it holds, the four parts named underneath. */
#panel-space #allocFigure { --share: 0.02; }
#panel-space #allocFigure .alloc-track { height: 22px; margin-top: 4px; border-radius: 999px; background: #EAE9E6; overflow: hidden; }
#panel-space #allocFigure #alloc-bar {
  display: flex; gap: 2px; width: calc(var(--share) * 100%); min-width: 14px; height: 100%; margin: 0;
  border-radius: 999px; overflow: hidden; background: none; transition: width var(--dur-slow, 400ms) var(--ease-standard, ease);
}
#panel-space #allocFigure #alloc-bar .alloc-seg { border-radius: 0; }
#panel-space #allocFigure > .sp-dots-key { margin: 8px 0 0; text-align: right; }
#panel-space #allocFigure > .alloc-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 24px; margin-top: 16px; }
#panel-space #allocFigure .alloc-legend-row { display: block; font-size: 13px; color: var(--grey-strong); line-height: 1.35; }
#panel-space #allocFigure .alloc-legend-row b { display: block; font-size: 20px; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
#panel-space #allocFigure .alloc-legend-row .alloc-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
#panel-space #allocFigure .alloc-legend-pct { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { #panel-space #allocFigure #alloc-bar { transition: none; } }

/* The week plan and the rooms make the inputs taller than the window. Rather
   than a second scrollbar inside the page, the inputs flow with the page and the
   answer card stays pinned beside them, so every desk you change is in view. */
@media (min-width: 1100px) {
  #panel-space .sp-build:has(#spMore[open]) { position: static; max-height: none; overflow: visible; }
}
/* Pinned only where the window is tall enough to leave room beside it: a short window would be covered by the card. */
@media (min-width: 1100px) and (min-height: 780px) {
  #panel-space .sp-build:has(#spMore[open]) ~ .sp-answer .result-pin { position: sticky; top: calc(var(--header-h) + 14px); z-index: 2; }
  /* Opaque behind the pinned card, so the page scrolling past never shows through the gap above it or its rounded corners. */
  #panel-space .sp-build:has(#spMore[open]) ~ .sp-answer .result-pin::before {
    content: ''; position: absolute; z-index: -1; inset: -14px -10px 0; background: var(--white); border-radius: 0 0 26px 26px;
  }
}

/* The two tabs: the label sits in the middle of the pill, not at the top of it. */
#panel-space .sp-tab { display: flex; align-items: center; justify-content: center; gap: 7px; padding-block: 0; line-height: 1.2; }
#panel-space .sp-tab .sp-tab-name, #panel-space .sp-tab .sp-tab-v { display: inline-block; line-height: 1.2; }

/* The pattern chips: one tidy row, smaller, with the days-a-week choice on a row of its own. */
#panel-space .rd-inputs-wk-tools { display: grid; gap: 10px; }
#panel-space .rd-inputs-wk-presets { display: flex; flex-wrap: wrap; gap: 6px; }
#panel-space .rd-inputs-wk-presets .rd-inputs-wk-chip { min-height: 34px; padding: 0 11px; font-size: 13px; }
#panel-space .rd-inputs-wk-dk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grey-strong); }
#panel-space .rd-inputs-wk-dk #rd-inputs-wk-dk { margin-right: auto; }
#panel-space .rd-inputs-wk-chip--n { min-width: 34px; min-height: 34px; padding: 0; font-size: 13px; }

/* "Your team on the busiest day": one bar split by who has a desk, each share named under it. */

/* The team bar fills the strip (its parent is a wrapping flex box, which would shrink it to nothing). */

/* The lease result: the detail is part of the result, not behind a fold. A plain heading, then the four blocks in a grid. */
#panel-lease .lc-detail-h { margin: 0 0 14px; font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--ink); }
@media (min-width: 900px) {
  #panel-lease .lc-detail .lc-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #panel-lease .lc-detail .lc-charts > .viz { margin: 0; padding: 18px 20px; background: var(--paper); border-radius: 16px; }
  #panel-lease .lc-detail > .lc-window { margin-top: 16px; padding: 18px 20px; background: var(--paper); border-radius: 16px; }
  #panel-lease .lc-detail .lc-flags-block { margin-top: 16px; }
}

/* A narrow phone: the team and desks fields stack, so each number has room (they were squeezed to 13px at 320). */
@media (max-width: 359px) { #panel-space .sp-counts, #panel-space .sp-team .sp-counts { grid-template-columns: minmax(0, 1fr); } }

/* LEASE CHECK, wide: less scrolling.
   The form no longer scrolls inside itself: it flows with the page and the verdict card stays pinned beside it (when the window is tall enough). */
@media (min-width: 1100px) {
  #panel-lease .lc-build { position: static; max-height: none; overflow: visible; }
}
@media (min-width: 1100px) and (min-height: 760px) {
  #panel-lease .lc-verdict { position: sticky; top: calc(var(--header-h) + 14px); z-index: 2; }
  #panel-lease .lc-verdict::before { content: ''; position: absolute; z-index: -1; inset: -14px -10px 0; background: var(--white); border-radius: 0 0 26px 26px; }
}
/* The numbers behind the result sit in one row: rent at expiry, space and the decision window side by side, then the lease checklist across. */
@media (min-width: 1100px) {
  #panel-lease .lc-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  #panel-lease .lc-detail > .lc-detail-h, #panel-lease .lc-detail > .lc-flags-block { grid-column: 1 / -1; }
  #panel-lease .lc-detail .lc-charts { grid-column: 1 / span 2; grid-row: 2; column-gap: 16px; min-width: 0; }
  #panel-lease .lc-detail .lc-charts > .viz, #panel-lease .lc-detail > .lc-window { margin: 0; padding: 16px 18px; min-width: 0; background: var(--paper); border-radius: 16px; }
  #panel-lease .lc-detail > .lc-window { grid-column: 3; grid-row: 2; align-self: stretch; }
  #panel-lease .lc-detail > .lc-window:not([hidden]) ~ .lc-flags-block, #panel-lease .lc-detail > .lc-flags-block { grid-row: 3; }
  #panel-lease .lc-detail > .lc-charts:not(:has(.viz:not([hidden]))) { display: none; }
  #panel-lease .lc-detail .lc-flags-block { margin-top: 0; }
  #panel-lease .lc-detail #lcFlags, #panel-lease .lc-detail #lcOpenQs { columns: 2; column-gap: 28px; display: block; }
  #panel-lease .lc-detail #lcFlags > li, #panel-lease .lc-detail #lcOpenQs > li { break-inside: avoid; margin-bottom: 7px; }
}