/* ==========================================================================
   POLISH: loads after layout.css. Step badges, the rent tiles' fit, and the
   advisor banner in the hero's language. Main tool area only.
   ========================================================================== */

/* ---- Step badges: each step's number as a filled disc, so 1 and 2 read as steps ---- */
#panel-space .sp-step, #panel-lease .lc-step { align-items: center; gap: 10.8px; }
#panel-space .sp-step .step-n, #panel-lease .lc-step .step-n {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 25.2px; height: 25.2px; min-width: 0; margin: 0; border-radius: 50%;
  background: var(--kf-red); color: var(--white);
  font-family: var(--font-body); font-size: 12.6px; font-weight: 600; line-height: 1; letter-spacing: 0;
}
#panel-space .sp-how > .sp-step { margin-bottom: 10.8px; }
/* The Week plan / Rooms switch is one step with two views, not steps 2 and 3. */
#panel-space .sp-tab .step-n { display: none; }

/* ---- Rent tiles: beside the figure only when the card has room for three
        money values; otherwise on their own row under it, three even columns ---- */
#panel-space .result-pin { container: answer / inline-size; }
@container answer (max-width: 799px) {
  #panel-space .result-pin > .result-label, #panel-space .result-pin > .result-sqft, #panel-space .result-pin > .result-empty { grid-column: 1 / -1; }
  #panel-space .result-pin > .result-meta { grid-row: 5; }
  #panel-space .result-pin > .open-plan { grid-row: 6; }
}

/* ---- The advisor banner under the Space tool, in the hero's language: the red
        band with rounded corners and the skyline, white type, the one white
        button, outlined pills for the other actions, the advisors as glass cards ---- */
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep {
  position: relative; overflow: clip; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 5.4px 36px; align-items: center;
  margin: 0; padding: 23.4px 25.2px; border: 0; border-radius: 5.4px; box-shadow: none;
  background: var(--kf-red) url(/skyline.svg) no-repeat right -30px bottom -4.5px / auto 78%; color: var(--white);
}
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-title {
  margin: 0; font-family: var(--font-body); font-weight: 500; font-size: clamp(21.6px, 2vw, 27px); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--white);
}
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-body { margin: 3.6px 0 0; max-width: 56ch; font-size: 13.06px; line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12.6px; }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .kf-btn {
  min-height: 39.6px; padding: 0 16.2px; border-radius: 899.1px; font-size: 12.6px;
  transition: background 150ms, color 150ms, border-color 150ms;
}
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .kf-btn--primary { background: var(--white); color: var(--kf-red); border: 1px solid var(--white); }
@media (hover: hover) {
  :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .kf-btn--primary:hover { background: var(--paper); }
}
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .kf-btn--ghost { background: rgba(255, 255, 255, 0.08); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.5); }
@media (hover: hover) {
  :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .kf-btn--ghost:hover { background: var(--white); color: var(--kf-red); border-color: var(--white); }
}
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .kf-btn:focus-visible { outline: 1.8px solid var(--white); outline-offset: 2.7px; }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-contact { margin-top: 16.2px; }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-person {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 5.4px; color: var(--white);
  -webkit-backdrop-filter: blur(5.4px); backdrop-filter: blur(5.4px);
}
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-person * { color: var(--white); }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-title, :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-cea { color: rgba(255, 255, 255, 0.82); }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-tel { text-decoration-color: rgba(255, 255, 255, 0.6); }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-wa, :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-wa a, :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-tertiary,
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-tertiary .text-link { color: rgba(255, 255, 255, 0.9); }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-wa a, :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-tertiary .text-link { text-decoration-color: rgba(255, 255, 255, 0.6); }
@media (min-width: 1100px) {
  :is(#nextStepSlot-space, #lcOfferBand .lc-adviser:has(#lcOffer[hidden]) #nextStepSlot-lease) #nextStep { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding: 27px 30.6px; }
  :is(#nextStepSlot-space, #lcOfferBand .lc-adviser:has(#lcOffer[hidden]) #nextStepSlot-lease) #nextStep > .ns-title, :is(#nextStepSlot-space, #lcOfferBand .lc-adviser:has(#lcOffer[hidden]) #nextStepSlot-lease) #nextStep > .ns-body,
  :is(#nextStepSlot-space, #lcOfferBand .lc-adviser:has(#lcOffer[hidden]) #nextStepSlot-lease) #nextStep > .ns-actions, :is(#nextStepSlot-space, #lcOfferBand .lc-adviser:has(#lcOffer[hidden]) #nextStepSlot-lease) #nextStep > .ns-tertiary { grid-column: 1; }
  :is(#nextStepSlot-space, #lcOfferBand .lc-adviser:has(#lcOffer[hidden]) #nextStepSlot-lease) #nextStep > .ns-contact { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
@media (max-width: 640px) {
  :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep { padding: 19.8px 16.2px; background-size: auto 40%; }
}

/* In the Lease check beside the offer, the banner is the offer's right-hand column: one column inside. */
#lcOfferBand .lc-adviser:not(:has(#lcOffer[hidden])) #nextStepSlot-lease #nextStep { grid-template-columns: minmax(0, 1fr); align-self: start; }
@media (min-width: 1100px) {
  #lcOfferBand .lc-adviser:not(:has(#lcOffer[hidden])) #nextStepSlot-lease #nextStep .adv-team { grid-template-columns: minmax(0, 1fr); }
}
/* Under the offer (up to 989.1px) the band is the card's full width: the two
   advisors side by side, equal size, not a narrow centred stack. */
@media (min-width: 561px) and (max-width: 1099px) {
  #lcOfferBand .lc-adviser:not(:has(#lcOffer[hidden])) #nextStepSlot-lease #nextStep .adv-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#nextStep .adv-team { align-items: stretch; }
#nextStep .adv-team > .adv-person { height: 100%; box-sizing: border-box; }
/* The sentence beside the offer: white on a solid red row, clear of the skyline. */
#lcOfferBand .lc-adviser:has(#lcOffer:not([hidden])) #nextStepSlot-lease #nextStep .ns-body {
  position: relative; z-index: 1; margin: 0 0 10.8px; padding: 9px 10.8px; max-width: none;
  background: var(--kf-red); border-radius: 3.6px; color: var(--white); font-size: 12.6px;
}

/* ---- The lease chart pair (Rent at expiry | Space against the estimate):
        one skeleton, shared rows, so the captions, titles, chart bodies and
        notes line up across the two cards ---- */
@media (min-width: 900px) {
  #panel-lease .lc-below .lc-charts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto auto; column-gap: 43.2px; row-gap: 0;
  }
  #panel-lease .lc-below .lc-charts > .viz:not([hidden]) {
    display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; margin: 0;
  }
  #panel-lease .lc-below .lc-charts > .viz > .chart-head { align-self: start; margin-bottom: 16.2px; }
  #panel-lease .lc-below .lc-charts > .viz > :nth-child(2) { align-self: center; }
  #panel-lease .lc-below .lc-charts > .viz > .caption { align-self: start; margin-top: 12.6px; }
}
/* The space bars in the rent bars' style: label above, a 25.2px bar, the value at its end. */
#panel-lease .lc-space .hbar-set { gap: 12.6px; margin-top: 0; }
#panel-lease .lc-space .hbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 25.2px; gap: 5.4px 10.8px; }
#panel-lease .lc-space .hbar > span:first-child { grid-column: 1 / -1; font-size: 12.6px; }
#panel-lease .lc-space .hbar-track { height: 25.2px; grid-row: 2; }
#panel-lease .lc-space .hbar > span:last-child { grid-row: 2; align-self: center; font-size: 13.5px; }
/* Red is "you" in both cards (what you pay, what you lease); dark is the benchmark. */
#panel-lease .lc-space .hbar-set--dark .hbar-fill { background: var(--viz-you, var(--kf-red)); }
#panel-lease .lc-space .hbar-set--dark .hbar.is-need .hbar-fill { background: var(--viz-kf, #2B2B2B); }

/* ---- Round 1 polish ---- */
/* The floor's heading and its 3D / Plan switch clear the header when scrolled to. */

/* A phone under 378px: the three rent figures as rows (label left, figure
   right), so a long figure never runs into its neighbour or truncates a label. */

/* ---- Round 1 polish, continued ---- */
/* One desk recommendation: the week plan's "Use N desks" is the one button; a
   tip's action (try three days, make this move) is a text link beside it. */
#panel-space .rd-inputs-wk-tip .rd-inputs-wk-tip-go { flex: none; min-height: 36px; padding: 0; font-size: 12.6px; }
/* The savings pair reads as sentences ("about S$236,000 a year less"), so the figures wrap. */
#panel-space .rd-inputs-wk-money dd { font-size: 15.3px; line-height: 1.3; white-space: normal; }
#panel-space .rd-inputs-wk-money dd.rd-inputs-wk-sub { font-size: 10.8px; }
/* Phone and WhatsApp links in the advisor band: at least 21.6px tall to tap. */
#nextStep .adv-tel, #nextStep .ns-wa a, .adv-person .adv-tel { display: inline-block; min-height: 21.6px; line-height: 21.6px; }
/* The estimate offered for Size in the lease check, under its field. */
#panel-lease .lc-from-space { margin: 5.4px 0 0; }
#panel-lease .lc-from-space .text-link { min-height: 21.6px; padding: 0; font-size: inherit; }

/* ---- "Speak to an advisor", in the route's language (calc.css section 18):
        flat red with no skyline, compact, a serif title, the one white
        button, the other actions as quiet underlined links, and the advisors
        as face, name and details straight on the red ---- */
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep { padding: 16.2px 21.6px; background: var(--kf-red); }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-title { font-family: var(--font-serif); font-weight: 500; font-size: 27px; line-height: 1.05; letter-spacing: -0.01em; }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-body { font-size: 12.6px; color: rgba(255, 255, 255, 0.88); }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-actions { align-items: center; gap: 3.6px 18px; margin-top: 10.8px; }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .kf-btn--primary {
  flex: none; min-height: 39.6px; padding: 0 18px; border-radius: 1.8px; font-size: 13.5px; font-weight: 600;
}
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .kf-btn--ghost,
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .kf-btn--ghost:hover {
  flex: none; align-self: flex-start; width: auto; min-width: 0; min-height: 27px; justify-content: flex-start; text-align: left;
  padding: 0; border: 0; border-radius: 0; background: none; color: rgba(255, 255, 255, 0.9);
  font-size: 11.7px; font-weight: inherit; text-decoration: underline; text-underline-offset: 3.6px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .kf-btn--ghost:hover { color: var(--white); text-decoration-color: currentColor; }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-contact { margin-top: 12.6px; }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-team { gap: 12.6px 21.6px; }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-person {
  align-items: flex-start; gap: 10.8px; padding: 0; background: none; border: 0; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-face { width: 39.6px; height: 39.6px; font-size: 13.5px; background: rgba(255, 255, 255, 0.2); }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-name { font-size: 12.6px; font-weight: 600; }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-title, :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-cea { font-size: 10.8px; color: rgba(255, 255, 255, 0.85); }
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-tel, :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .adv-email {
  font-size: 11.7px; text-decoration: underline; text-underline-offset: 3.6px; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, 0.45);
}
:is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .ns-wa { margin-top: 9px; font-size: 11.7px; }
@media (min-width: 1100px) {
  :is(#nextStepSlot-space, #lcOfferBand .lc-adviser:has(#lcOffer[hidden]) #nextStepSlot-lease) #nextStep { padding: 16.2px 21.6px; }
}
@media (max-width: 640px) {
  :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep { padding: 14.4px; }
}