/* ==========================================================================
   SITE-WIDE DESIGN REFINEMENTS
   Loads after every other stylesheet. Refines the site's own elements only:
   no .rd-* or #rd-* module is styled here, no content or state is hidden, and
   the tools' bars, the result bar's show/hide and the scroll logic are left as
   they are. Light only; the lease panel renders on white.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPE: balanced headings, no one-word last lines in body copy
   Headings break into even lines ("Have an advisor review your / lease" was
   one word on its own). Body copy avoids a lone last word. Both only change
   where lines break, never the size or the measure.
   -------------------------------------------------------------------------- */
.ns-title, .offer-title, .chart-title, .kf-dialog-title, .enq-title,
.why-col-title, .result-card .result-empty, #panel-lease .lc-empty,
#panel-lease .lc-points-block .tile-caption, #panel-lease .lc-flags-block .tile-caption {
  text-wrap: balance;
}
.ns-body, .viz-note, .caption, .estimate-disclaimer, .band-line,
.kf-dialog-intro, .enq-sub, .why-list li, .why-foot, .lc-delay {
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   2. FIGURES THAT HOLD STILL
   The headline figure, the stepper values and the result bar count up or
   change as you type. Proportional numerals made the lockup (and the "sqft"
   beside it) jitter frame by frame; tabular lining figures keep the width
   fixed. A font without the feature simply ignores it.
   -------------------------------------------------------------------------- */
#result-sqft-num, .value-input, .room-count .count-val, .result-bar-text b {
  font-variant-numeric: lining-nums tabular-nums;
}

/* --------------------------------------------------------------------------
   3. ONE UPPERCASE LABEL
   The page's own rule is 10.8px at +0.08em (.modal-status). The room list
   titles and the result bar label had drifted to 0.1em. The red heads keep
   the Flex Space Portal's 0.14em eyebrow.
   -------------------------------------------------------------------------- */
.space-cmd .list-title, .result-bar-label { letter-spacing: 0.08em; }

/* --------------------------------------------------------------------------
   4. STEPPERS AT REST
   A stepper that cannot go lower was drawn at 35% opacity, so a white box on
   the paper field became a muddy see-through square. It is drawn as a resting
   control instead: solid fill, hairline edge, grey glyph. Still visibly
   unavailable, still not-allowed, with no hover response, as before.
   -------------------------------------------------------------------------- */
.btn-icon:disabled,
.btn-icon[aria-disabled="true"],
.btn-icon[aria-disabled="true"]:active {
  opacity: 1;
  background: var(--white);
  border-color: var(--line);
  color: var(--grey);
}
@media (hover: hover) {
  .btn-icon[aria-disabled="true"]:hover {
    opacity: 1;
    background: var(--white);
    border-color: var(--line);
    color: var(--grey);
  }
}

/* --------------------------------------------------------------------------
   5. COLOUR DISCIPLINE: red is not a hover colour
   The lease check's "Add detail" fold turned red on hover. Like every other
   control it now changes tone: the label stays ink and its "+" darkens.
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .lc-optional > summary:hover { color: var(--ink); }
  .lc-optional > summary:hover::after { color: var(--ink); }
}

/* --------------------------------------------------------------------------
   7. FOCUS ON RED
   The "Why calculate?" close sits on the red head, where the page's ink ring
   is about 2.3:1. It takes a white ring there (6:1), as the banner and the
   enquiry heads already do; on a phone the white ring also reads against the
   dark disc calc.css puts under the close.
   -------------------------------------------------------------------------- */
.why-dialog .modal-close:focus-visible { outline: 1.8px solid var(--white); outline-offset: 1.8px; }

/* --------------------------------------------------------------------------
   8. THE ADVISOR PROMPT'S BUTTONS
   In a column narrower than 792px the buttons wrapped wherever their labels
   allowed: a primary narrower than the secondary beside it, then a third
   across the row below. The primary now takes its own full row, and the
   secondaries share the next row equally (or each take a row when they do
   not fit), so every row has the same two edges. Below 432px the page's own
   rule stacks them all, primary first.
   -------------------------------------------------------------------------- */
@container (max-width: 880px) {
  .next-step .ns-actions > .kf-btn--primary { flex: 1 1 100%; }
  .next-step .ns-actions > .kf-btn:not(.kf-btn--primary) { flex: 1 1 0; min-width: max-content; }
}
@container (max-width: 480px) {
  .next-step .ns-actions > .kf-btn:not(.kf-btn--primary) { min-width: 0; }
}

/* --------------------------------------------------------------------------
   9. THE RESULT BAR CLEARS THE WHATSAPP BUTTON
   From 641 to 899.1px the bar ran to 10.8px from the right edge, and its "See
   result" button sat under the 48.6px WhatsApp float (18px in, 18px up). The
   bar now stops short of it, as it already does on phones. From 900px the
   bar is centred and narrow, clear of the float.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 999px) {
  .result-bar { right: 79.2px; }
}