/* ==========================================================================
   MOTION: loads last. Calm, critically damped movement that explains a change,
   confirms a touch or leads the eye to the answer, then gets out of the way.
   Transform and opacity only (a few small bars use height or flex-grow).
   Nothing here touches the banner, the header, the footer or the floor plan.
   Brief: dev/design/redesign/briefs/MOTION.md. Script: js/redesign/motion.js.
   ========================================================================== */

:root {
  --m-press: 90ms;
  --m-hover: 140ms;
  --m-swap: 220ms;
  --m-roll: 450ms;
  --m-morph: 380ms;
  --m-lead: 220ms;
  --m-trail: 320ms;
  --m-draw: 700ms;
  --m-stagger: 50ms;
  --m-still: 300ms;
  --m-quick: cubic-bezier(0.2, 0, 0, 1);
  --m-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Under 3% overshoot: settles, never bounces. */
  --m-spring: cubic-bezier(0.16, 1, 0.3, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --m-spring: linear(0, 0.34 6%, 0.7 13%, 0.93 21%, 1.025 31%, 1.012 42%, 1); }
}

/* The tool area only: the banner, header and footer keep their own motion. */
:where(#panel-space, #panel-lease) {
  --m-scope: 1;
}

/* ---- Touch: press down to 0.97, spring back; disabled controls never move ---- */
:where(#panel-space, #panel-lease) :is(.btn-icon, .kf-btn, .rd-inputs-wk-chip, .sp-tab, .rd-result-std, .lc-pdf .btn, button.btn) {
  transition-property: background, background-color, border-color, color, box-shadow, transform;
  transition-duration: var(--m-hover), var(--m-hover), var(--m-hover), var(--m-hover), var(--m-hover), 260ms;
  transition-timing-function: var(--m-quick), var(--m-quick), var(--m-quick), var(--m-quick), var(--m-quick), var(--m-spring);
}
:where(#panel-space, #panel-lease) :is(.btn-icon, .kf-btn, .rd-inputs-wk-chip, .sp-tab, .rd-result-std, button.btn):active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(0.97);
  transition-duration: var(--m-hover), var(--m-hover), var(--m-hover), var(--m-hover), var(--m-hover), var(--m-press);
  transition-timing-function: var(--m-quick);
}
/* Steppers: no long-press menu or double-tap zoom while a + is held. */
:where(#panel-space) .btn-icon { -webkit-touch-callout: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; }

/* The advisor buttons: a 1px lift on hover, with a mouse. */
@media (hover: hover) and (pointer: fine) {
  :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .kf-btn:hover { transform: translateY(-1px); }
}

/* ---- Focus: the ring eases in from a little further out ---- */
@keyframes m-focus-in { from { outline-offset: 4.5px; } }
:where(#panel-space, #panel-lease) :focus-visible { animation: m-focus-in 160ms var(--m-quick); }

/* ---- Rolling figures (motion.js rolls only the characters that changed) ---- */
.m-dg { display: inline-block; position: relative; font: inherit; color: inherit; letter-spacing: inherit; margin: 0; padding: 0; }
.m-dg::before { content: attr(data-o); position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.m-dn { display: inline-block; font: inherit; color: inherit; letter-spacing: inherit; margin: 0; padding: 0; }
/* `.result-sqft span` sizes the unit; the rolling digits keep the figure's size. */
#panel-space #result-sqft-num span { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }

/* The change chip beside the big figure: "+580 sqft", rises, holds, fades. */
#result-sqft > span:last-child { position: relative; }
#panel-space #result-sqft .m-delta { font-style: normal; }
#result-sqft .m-delta {
  position: absolute; left: calc(100% + 12.6px); bottom: 0.35em; white-space: nowrap; pointer-events: none;
  padding: 2.7px 8.1px; border: 1px solid var(--line-strong); border-radius: 899.1px; background: var(--white);
  font-family: var(--font-body); font-size: 11.7px; font-weight: 500; line-height: 1.2; letter-spacing: 0;
  color: var(--ink); font-variant-numeric: tabular-nums; opacity: 0;
}
@media (max-width: 640px) {
  #result-sqft .m-delta { left: 0; bottom: calc(100% + 5.4px); }
}

/* ---- Week table ---- */
/* A day's fill grows from its centre on a spring; un-ticking shrinks it away. */
#rd-desk-helper .rd-inputs-wk-day { isolation: isolate; overflow: hidden; -webkit-user-select: none; user-select: none; }
#rd-desk-helper .rd-inputs-wk-day::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--c);
  opacity: 0; transform: scale(0.6);
  transition: transform var(--m-morph) var(--m-spring), opacity 160ms var(--m-quick);
}
#rd-desk-helper .rd-inputs-wk-day[aria-pressed="true"] { background: var(--white); }
#rd-desk-helper .rd-inputs-wk-day[aria-pressed="true"]::before { opacity: 1; transform: none; }
#rd-desk-helper .rd-inputs-wk-day:active { transform: scale(0.96); transition: transform var(--m-press) var(--m-quick), border-color var(--m-hover) var(--m-quick); }
#rd-desk-helper .rd-inputs-wk-day { transition: transform 260ms var(--m-spring), border-color var(--m-hover) var(--m-quick), background var(--m-hover) var(--m-quick); }
/* Cross-hair: the hovered day's row and column tint lightly. */
#rd-desk-helper .rd-inputs-wk-day.m-x:not([aria-pressed="true"]) { background: var(--paper); }
#rd-desk-helper .rd-inputs-wk-dh { transition: color var(--m-hover) var(--m-quick); }
#rd-desk-helper .rd-inputs-wk-dh.m-x:not(.is-pk) { color: var(--ink); }
#rd-desk-helper .rd-inputs-wk-grid.is-painting { cursor: crosshair; }
/* Day totals: bars spring to height, the busiest day's red eases in. */
#rd-desk-helper .rd-inputs-wk-tb i { transition: height var(--m-morph) var(--m-spring), background var(--m-swap) var(--m-quick); }
#rd-desk-helper .rd-inputs-wk-tc b { transition: color var(--m-swap) var(--m-quick); }

/* ---- One pill under a segmented control, sliding between choices ---- */
.m-pill-host { position: relative; isolation: isolate; }
.m-pill {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--ink);
  opacity: 0; transition: opacity var(--m-hover) var(--m-quick);
}
.m-pill.is-on { opacity: 1; }
.m-pill-host > :not(.m-pill) { position: relative; z-index: 1; }
/* With the pill drawing the selection, the chosen item is see-through and its
   label colour crosses over at mid-move. */
.m-pill-host.is-ready > [aria-pressed="true"], .m-pill-host.is-ready > [aria-selected="true"] {
  background: transparent !important; border-color: transparent !important;
}
#panel-space .sp-switch.is-ready > .sp-tab[aria-selected="true"] { background: transparent; }
.m-pill-host.is-ready > :is(button, [role="tab"]) { transition: color 160ms var(--m-quick) 80ms, background var(--m-hover) var(--m-quick), border-color var(--m-hover) var(--m-quick), transform 260ms var(--m-spring); }
.m-pill-host.is-ready > :is(button, [role="tab"]) .sp-tab-v { transition: color 160ms var(--m-quick) 80ms; }

/* ---- "Use desks": the figure lands in the Desks field, whose line sweeps once ---- */
.m-ghost {
  position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; margin: 0;
  font-family: var(--font-body); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}
#panel-space .input-row { position: relative; }
#panel-space .input-row.m-landed::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.8px; background: var(--ink);
  transform-origin: left center; animation: m-sweep 560ms var(--m-out) both;
}
@keyframes m-sweep {
  0% { transform: scaleX(0); opacity: 1; }
  60% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ---- Where the space goes: segments resize in a ripple, hover spotlights one ---- */
#alloc-bar .alloc-seg { transition: flex-grow var(--m-morph) var(--m-out), opacity var(--m-hover) var(--m-quick); }
#alloc-bar .alloc-seg:nth-child(2) { transition-delay: 40ms, 0ms; }
#alloc-bar .alloc-seg:nth-child(3) { transition-delay: 80ms, 0ms; }
#alloc-bar .alloc-seg:nth-child(4) { transition-delay: 120ms, 0ms; }
#alloc-bar .alloc-seg:nth-child(5) { transition-delay: 160ms, 0ms; }
#alloc-legend .alloc-legend-row { transition: opacity var(--m-hover) var(--m-quick); }
#allocFigure.m-spot .alloc-seg:not(.m-on), #allocFigure.m-spot .alloc-legend-row:not(.m-on) { opacity: 0.45; }

/* ---- Fold-outs open from their trigger: height on a calm curve, content fades in behind ---- */
:is(#panel-space, #panel-lease) :is(details.sp-table, details.lc-optional, details.rd-inputs-wk-more){
  interpolate-size: allow-keywords;
}
:is(#panel-space, #panel-lease) :is(details.sp-table, details.lc-optional, details.rd-inputs-wk-more)::details-content{
  block-size: 0; overflow-y: clip; opacity: 0;
  transition: block-size var(--m-morph) var(--m-out), opacity 200ms var(--m-quick) 60ms, content-visibility var(--m-morph) allow-discrete;
}
:is(#panel-space, #panel-lease) :is(details.sp-table, details.lc-optional, details.rd-inputs-wk-more)[open]::details-content{
  block-size: auto; opacity: 1;
}

/* ---- Copy summary: the label becomes "Copied" with a drawn tick, then returns ---- */
.m-swap { display: inline-flex; align-items: center; justify-content: center; gap: 4.5px; }
.m-swap .m-tick { width: 10.8px; height: 10.8px; flex: none; }
.m-swap .m-tick path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: m-draw-tick 240ms var(--m-out) 60ms forwards; }
@keyframes m-draw-tick { to { stroke-dashoffset: 0; } }

/* ---- A verdict that changes tints its tile's border once ---- */
.score-tile.m-changed { animation: m-tint 400ms var(--m-quick); }
@keyframes m-tint { 0%, 40% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kf-red) 35%, transparent); } 100% { box-shadow: inset 0 0 0 1px transparent; } }

/* ---- Admin: a settings tab's panel rises 9.6px as it appears, the same swap as the tool panels ---- */
@keyframes m-panel-in { from { opacity: 0; transform: translateY(9.6px); } }
#admin-view .settings-card:not([hidden]) { animation: m-panel-in var(--m-swap) var(--m-out) both; }

/* ---- Reduced motion: nothing translates or scales; colour and border feedback stays ---- */
@media (prefers-reduced-motion: reduce) {
  :where(#panel-space, #panel-lease) :is(.btn-icon, .kf-btn, .rd-inputs-wk-chip, .sp-tab, .rd-result-std, button.btn, .rd-inputs-wk-day):active { transform: none !important; }
  :is(#nextStepSlot-space, #nextStepSlot-lease) #nextStep .kf-btn:hover { transform: none; }
  :where(#panel-space, #panel-lease) :focus-visible { animation: none; }
  #rd-desk-helper .rd-inputs-wk-day::before { transform: none; transition: opacity 120ms linear; }
  #rd-desk-helper .rd-inputs-wk-tb i, #alloc-bar .alloc-seg { transition-duration: 0ms !important; transition-delay: 0ms !important; }
  .m-pill { transition: none; }
  #admin-view .settings-card:not([hidden]) { animation: none; }
  #panel-space .input-row.m-landed::after { animation: none; }
  :is(#panel-space, #panel-lease) :is(details.sp-table, details.lc-optional, details.rd-inputs-wk-more)::details-content{ transition: none; }
  .m-swap .m-tick path { animation: none; stroke-dashoffset: 0; }
}