/* Grand Designs Live stand: kiosk overrides on top of the Savings Calculator's style.css.
   Target: 55-inch portrait touchscreen (CSS viewport ~1080x1920), rep-assisted, read from
   a metre away. Loaded after style.css so these declarations win. */

/* The hidden attribute always wins (2026-09-28, Sam's report). A class rule with display: block
   (.next-booked, for Mark's centring) overrode it, so "Booked. Thank you." showed as soon as the
   booking panel opened. This covers every element that uses hidden, not just that one. */
[hidden] { display: none !important; }

html { touch-action: manipulation; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body { user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; }

/* Bigger type on the big screen; phones and laptops keep the calculator's normal scale. */
@media (min-width: 900px) and (orientation: portrait) {
  html { font-size: 21px; }
}

/* One column always: inputs above, results below. The two-column desktop layout puts the
   headline in a 380px sidebar on a portrait screen. */
.calc-layout,
.calc-layout.has-results { grid-template-columns: 1fr; max-width: 980px; margin-inline: auto; }
.has-results .inputs-panel { position: relative; top: auto; }

/* Hero: short. The screen is the pitch, not the page. */
.hero { padding-block: 1.25rem 0.75rem; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.hero-sub { font-size: 1.05rem; max-width: 40ch; }
.hero-sub-lead { display: block; font-weight: 700; color: var(--color-text); margin-bottom: 0.15rem; }
.trust-bar { font-size: 0.85rem; }

/* Touch targets. */
.radio-card { min-height: 4.2rem; }
.toggle-option, .btn-primary, .text-input, select { min-height: 3.4rem; }
.btn-primary { font-size: 1.3rem; padding-block: 1rem; }
.slider { height: 12px; }
.slider::-webkit-slider-thumb { width: 44px; height: 44px; }
.slider::-moz-range-thumb { width: 44px; height: 44px; }
.help-icon { display: none; }            /* the rep explains; tooltips fight the touch layer */

/* Optional rates disclosure. */
.rates-optional { margin: 0.75rem 0 1rem; border: 0.5px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: 0 1rem; }
.rates-optional summary { cursor: pointer; padding: 0.9rem 0; font-weight: 600; color: var(--color-primary); list-style: none; }
.rates-optional summary::-webkit-details-marker { display: none; }
.rates-optional summary::after { content: "+"; float: right; font-size: 1.4rem; line-height: 1; }
.rates-optional[open] summary::after { content: "–"; }
.rates-optional[open] { padding-bottom: 0.5rem; }

/* Results read from six feet: the headline is the biggest thing on the screen. */
.results-headline { text-align: center; padding-block: 1.5rem; }
.headline-label { font-size: 1.4rem; font-weight: 600; color: var(--color-text-muted); }
.headline-amount { font-size: clamp(5rem, 17vw, 11.5rem); letter-spacing: -0.06em; margin-block: 0.25rem 0.5rem; }
.headline-sub { font-size: 1.25rem; }
.estimates-note { font-size: 0.9rem; max-width: 60ch; margin-inline: auto; }

/* Featured scenario forward, the other two recede. */
.scenario-label { font-size: 1.15rem; text-align: center; }
.scenarios { align-items: stretch; }
.scenario-card { opacity: 0.82; }
.scenario-card--featured { opacity: 1; transform: scale(1.04); box-shadow: var(--shadow-xl); border-color: var(--color-primary-border); z-index: 1; }
.scenario-card .metric-value { font-size: 1.6rem; }
.scenario-card--featured .metric-value { font-size: 1.75rem; }

/* Next-step card under the results (replaces the QR handoff, Mark + Sam 2026-09-22). */
.next-card {
  margin-top: 1.5rem; padding: 1.5rem 1.75rem 1.75rem;
  background: var(--color-surface); border: 0.5px solid var(--color-border-subtle);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg);
}
.next-title { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.next-sub { color: var(--color-text-muted); font-size: 1.05rem; max-width: 48ch; }
.next-review { margin-top: 0.75rem; font-size: 0.9rem; color: var(--color-warning); background: var(--color-warning-bg); border-radius: var(--radius-md); padding: 0.5rem 0.8rem; display: inline-block; }
.next-offline { margin-top: 1rem; font-size: 1.05rem; color: var(--color-warning); background: var(--color-warning-bg); border: 0.5px solid var(--color-warning-border); border-radius: var(--radius-lg); padding: 0.9rem 1.1rem; }
.next-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }
.next-choice {
  position: relative; text-align: left; font: inherit; color: var(--color-text); cursor: pointer;
  background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-xl);
  padding: 1.25rem 1.4rem 1.3rem; min-height: 6.5rem; box-shadow: var(--shadow-md);
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--transition);
}
.next-choice:active { transform: scale(0.985); }
.next-choice:disabled { opacity: 0.45; cursor: default; }
.next-choice .t { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.1; }
.next-choice .s { display: block; color: var(--color-text-muted); font-size: 1rem; margin-top: 0.4rem; }
.next-choice .tag { display: inline-block; margin-top: 0.75rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); background: var(--color-primary-bg, rgba(3,98,76,0.1)); border-radius: 999px; padding: 0.3rem 0.7rem; }
.next-choice.is-featured { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 8px 28px color-mix(in srgb, var(--color-primary) 40%, transparent); }
.next-choice.is-featured .s { color: rgba(255,255,255,0.82); }
.next-choice.is-featured .tag { color: #fff; background: rgba(255,255,255,0.18); }
.next-choice.is-active { outline: 4px solid color-mix(in srgb, var(--color-primary) 35%, transparent); outline-offset: 2px; }
.next-panel { display: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 0.5px solid var(--color-border-subtle); }
.next-panel.is-open { display: block; }
.next-panel h3 { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -0.02em; margin-bottom: 0.25rem; }
.next-panel > p { color: var(--color-text-muted); font-size: 1rem; margin-bottom: 1rem; }
.next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.next-grid .span { grid-column: 1 / -1; }
.next-field label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.3rem; }
.next-field input { width: 100%; font: inherit; font-size: 1.15rem; padding: 0.8rem 0.9rem; min-height: 3.4rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: #fff; color: var(--color-text); }
.next-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.next-consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.95rem; color: var(--color-text-muted); margin: 1rem 0 1.1rem; }
.next-consent input { width: 1.6rem; height: 1.6rem; margin: 0.1rem 0 0; flex: none; }
.next-submit { display: block; width: 100%; font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff; background: var(--color-primary); border: 0; border-radius: 999px; padding: 1rem 1.4rem; min-height: 3.6rem; cursor: pointer; }
.next-submit:disabled { opacity: 0.6; cursor: default; }
.next-submit.is-secondary { background: var(--color-surface-offset); color: var(--color-text); }
.next-msg { margin-top: 0.8rem; font-size: 1rem; min-height: 1.4em; }
.next-msg.is-ok { color: var(--color-green); font-weight: 600; }
.next-msg.is-bad { color: #b00020; }
.next-msg.is-warn { color: var(--color-warning); }
.next-rep-line { font-size: 1rem; color: var(--color-text-muted); margin-bottom: 0.9rem; }
.next-rep-line strong { color: var(--color-text); }
.next-rep-line button { font: inherit; font-size: 0.9rem; color: var(--color-primary); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0 0 0 0.4rem; }
#widgetShell { min-height: 6rem; }
.next-booked { display: block; width: 100%; max-width: 40rem; margin: 0 auto; text-align: center; padding: 1.5rem 1rem 0.5rem; }
.next-booked h3, .next-booked p { text-align: center; margin-left: auto; margin-right: auto; }
.next-booked h3 { font-size: 1.9rem; color: var(--color-green); }
.next-hint { font-size: 0.85rem; color: var(--color-text-faint, var(--color-text-muted)); margin-top: 0.3rem; }
@media (max-width: 640px) { .next-choices, .next-grid { grid-template-columns: 1fr; } }

/* Kiosk chrome injected by kiosk.js. */
.kiosk-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--color-surface-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 0.5px solid var(--color-border-subtle);
}
body { padding-bottom: 5.5rem; }
.kiosk-reset {
  font: inherit; font-weight: 700; font-size: 1.1rem; color: #fff; background: var(--color-text);
  border: 0; border-radius: 999px; padding: 0.85rem 1.6rem; min-height: 3.2rem; cursor: pointer;
}
.kiosk-reset:active { transform: scale(0.97); }
.kiosk-hint { font-size: 1rem; color: var(--color-text-muted); }

.kiosk-overlay {
  position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  background: rgba(29,29,31,0.82); padding: 2rem;
}
.kiosk-overlay.is-open { display: flex; }
.kiosk-dialog {
  width: min(92vw, 34rem); background: var(--color-surface); border-radius: var(--radius-2xl);
  padding: 2rem; box-shadow: var(--shadow-xl); text-align: center;
}
.kiosk-dialog h2 { font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.kiosk-dialog p { color: var(--color-text-muted); font-size: 1.1rem; }
.kiosk-dialog .kiosk-count { font-family: var(--font-display); font-size: 4rem; font-weight: 700; color: var(--color-primary); line-height: 1; margin: 1rem 0; }
.kiosk-dialog input { width: 100%; font: inherit; font-size: 1.3rem; padding: 0.9rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: 1rem 0; }
.kiosk-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.kiosk-actions button { font: inherit; font-weight: 700; font-size: 1.05rem; border-radius: 999px; padding: 0.8rem 1.4rem; min-height: 3rem; cursor: pointer; border: 0; }
.kiosk-actions .is-primary { background: var(--color-primary); color: #fff; }
.kiosk-actions .is-secondary { background: var(--color-surface-offset); color: var(--color-text); }

.kiosk-diag { text-align: left; font-size: 0.95rem; }
.kiosk-diag dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 1rem 0; }
.kiosk-diag dt { color: var(--color-text-muted); }
.kiosk-diag dd { font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.kiosk-diag .is-bad { color: #b00020; }
.kiosk-diag .is-good { color: var(--color-green); }

/* A 4K panel driven at 100% scaling (CSS viewport 2160 wide): scale the whole page up.
   Last in the file on purpose: it must beat the 980px max-width above. The tested target is
   1080 wide (a 4K screen at 200% Windows scaling), see REP-CARD / HANDOFF. */
@media (min-width: 1800px) and (orientation: portrait) {
  html { font-size: 40px; }
  .calc-layout, .calc-layout.has-results { max-width: 1900px; }
  .container, .container--wide { max-width: 1960px; }
}

/* Trust line: all four on one line on anything wider than a phone (Mark, 2026-09-29: the last one dropped to a
   second row between about 600 and 900px wide). It shrinks to fit instead of wrapping. Phones (640px and below)
   keep the stacked layout, where one line would be too small to read. Kept last so it wins over earlier rules. */
@media (min-width: 641px) {
  .trust-bar { flex-wrap: nowrap; white-space: nowrap; font-size: min(0.85rem, calc((100vw - 5rem) / 49)); gap: min(var(--space-3), 1.2vw); }
}