/* Modelling Programme hero sheet: "Change the rent". Loaded after sales.css on the Modelling Programme page only.
   The control, hint and readout are shown only when the page's early script has added html.hs, so with JavaScript off
   this file changes nothing and the static sheet stands. Movement is transform, opacity and colour only. */

/* The rent control sits between the formula bar and the sheet */
.model .ctl,.model .hint,.model .note{display:none}
html.hs .model .ctl{display:grid;grid-template-columns:auto 44px 1fr 44px;gap:8px;align-items:center;padding:8px 10px 8px 14px;border-bottom:1px solid rgba(255,255,255,.1);font-size:.74rem;color:rgba(255,255,255,.7)}
.ctl label{display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.ctl output{color:#fff;font-weight:500;min-width:4ch;display:inline-block;font-variant-numeric:tabular-nums}
.ctl .step{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:500 1.1rem/1 var(--mono);cursor:pointer;padding:0;touch-action:manipulation;transition:background-color .4s var(--ease),transform .4s var(--ease)}
.ctl .step:hover{background:rgba(255,255,255,.16)}
.ctl .step:active{transform:scale(.94);background:rgba(255,255,255,.24)}
.ctl .step:focus-visible,.ctl input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.model .ctl input[type=range]{position:static;opacity:1;pointer-events:auto;-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer;min-width:0}
.ctl input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:rgba(255,255,255,.18)}
.ctl input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.18)}
.ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:0;margin-top:-9.5px;box-shadow:0 0 0 4px rgba(255,255,255,.15),0 6px 16px -6px rgba(0,0,0,.6);transition:box-shadow .3s var(--ease)}
.ctl input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 4px rgba(255,255,255,.15)}
.ctl input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(255,255,255,.2)}

/* Once the formula bar shows a cell's contents instead of the typed formula */
.hero .model .chrome .formula.done{animation:none;max-width:none;border-right-color:transparent}

/* The readout under the sheet */
html.hs .model .note{display:block;font-family:var(--sans);font-size:.8rem;color:rgba(255,255,255,.62);padding:10px 14px 12px;border-top:1px solid rgba(255,255,255,.1);line-height:1.4;min-height:62px}
.model .note b{color:#fff;font-weight:600}
.model .note em{font-style:normal;color:#9cc2ff}
.model .note .warn{color:#ffa3b5}

/* Hint pill: arrives once, leaves on the first touch */
html.hs .model .hint{display:inline-flex;position:absolute;right:12px;top:104px;z-index:3;align-items:center;gap:8px;background:#fff;color:var(--ink);font-family:var(--sans);font-size:.78rem;font-weight:600;padding:8px 12px;border-radius:999px;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);pointer-events:none;opacity:0;animation:hintin .8s var(--ease) forwards 3.2s;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.hint svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:nudge 1.6s var(--ease) infinite 4s}
@keyframes hintin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateX(3px)}}
html.hs .model .hint.off{opacity:0;transform:translateY(6px);animation:none}

/* Live state: the entrance build and the first-row flash have done their job, so they stop competing with the lit cells */
.model.live .sheet tbody tr,.model.live .sheet tr.sel td{animation:none}
.sheet td.neg{color:#ffa3b5 !important}
.model.live .sheet td.chg{animation:chg .6s var(--ease)}
.model.live .sheet tr.sel td.chg{animation:chgsel .6s var(--ease)}
@keyframes chg{0%{background:rgba(156,194,255,.35)}100%{background:transparent}}
@keyframes chgsel{0%{background:rgba(31,101,204,.75)}100%{background:rgba(31,101,204,.35)}}

/* Narrow phones: the label takes its own line so every control stays 44 px */
@media (max-width:359px){html.hs .model .ctl{grid-template-columns:44px 1fr 44px;gap:4px 6px;padding-left:10px}.ctl label{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){
  html.hs .model .hint{animation:none;opacity:1}
  .hint svg{animation:none}
  .ctl .step,.ctl input[type=range]::-webkit-slider-thumb{transition:none}
}