/* RemedyLIVE kiosk — designed at 1080×1920. 1rem = 16 design px, scaled to fit the screen.
   Inside a screen, sizes are in em so the fit routine can shrink type via --fit. */

/* Brand typeface is Elza Narrow (Adobe Fonts); we use the brand-approved fallback, Helvetica Neue Condensed, instead of linking Adobe.
   Black = headings, Medium = short large text, Regular = copy.
@font-face { font-family: "Kiosk Hand"; src: url("/assets/fonts/hand.woff2") format("woff2"); font-display: swap; }
*/

:root {
  /* RemedyLIVE Brand Guidelines (rev. June 2023). Navy is not a brand color — program pages only. */
  --orange: #E55E27;
  --teal: #69C8C7;
  --deep-teal: #18565A;
  --navy: #2C3F78;
  --ink: #0D0E0E;
  --paper: #FFFFFF;
  --text-dark: #0D0E0E;
  --muted-dark: #5A5A5A;

  --font-head: "Elza Narrow", "Helvetica Neue", "Arial Narrow", sans-serif; /* with font-stretch: condensed on body */
  --font-body: var(--font-head); /* brand: one typeface, multiple weights */
  --font-hand: "Kiosk Hand", "Caveat", "Marker Felt", "Segoe Print", cursive;

  --swash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C40 3 90 2 198 5M20 10c50-4 110-5 160-3' fill='none' stroke='%23E55E27' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");

  /* On the portrait kiosk the width term wins. On wider screens the height term
     is looser than 120 so content isn't tiny; the JS fit pass shrinks any overflow. */
  font-size: min(calc(100vw / 67.5), calc(100vh / 100));
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
}

body {
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-stretch: condensed;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: scale(0.98); }
img { -webkit-user-drag: none; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

/* ---------- Stage & themes ---------- */
/* Background fills the whole screen; content stays in a centered 1080-wide column. */
.stage {
  --gutter: max(4.5rem, calc((100vw - 76rem) / 2));
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--paper);
  background: var(--ink);
}
.stage[data-theme="dark"] {
  background:
    radial-gradient(130vw 75vh at -5% -5%, rgba(229, 94, 39, 0.5), transparent 65%),
    radial-gradient(130vw 75vh at 105% 105%, rgba(105, 200, 199, 0.45), transparent 65%),
    linear-gradient(160deg, #1e130f 0%, var(--ink) 45%, #0b1c1d 100%);
}
.stage[data-theme="dark-teal"] {
  background:
    radial-gradient(55rem 45rem at 105% -5%, rgba(105, 200, 199, 0.45), transparent 60%),
    linear-gradient(165deg, var(--ink) 15%, var(--deep-teal) 100%);
}
.stage[data-theme="chat"] {
  color: var(--text-dark);
  background:
    linear-gradient(90deg, rgba(247, 190, 160, 0.55) 0, transparent 14%, transparent 86%, rgba(105, 200, 199, 0.5) 100%),
    var(--paper);
}
.stage[data-theme="navy"] { background: var(--navy); }

/* ---------- Header ---------- */
.kiosk-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 3.5rem var(--gutter) 0;
  flex: none;
}
.brand { display: flex; flex-direction: column; gap: 0.6rem; }
.label {
  color: var(--teal);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.header-btns { display: flex; gap: 1.5rem; }
.round-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.round-btn svg {
  width: 6.5rem;
  height: 6.5rem;
  padding: 1.5rem;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  stroke-width: 2.4;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
}

/* Logos */
.logo-mark {
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 3.6rem;
  line-height: 1;
  white-space: nowrap;
}
.smc-badge { align-self: center; width: 0.85em; height: 0.85em; margin: 0 -0.05em 0 0.35em; }
.logo-mark i { align-self: center; margin-left: 0.15em; font-style: normal; font-weight: 500; color: var(--teal); font-size: 0.45em; letter-spacing: 0.12em; }
.logo-img { display: block; height: 8rem; width: auto; }
.logo-img.wired { height: 5.5rem; }
.logo-img.rl-wide { height: 6.5rem; }
.logo-xl { margin: 2em 0 1.5em; }
.logo-xl .logo-img.rl-wide { height: 13em; }

/* ---------- Screens ---------- */
main { position: relative; flex: 1; min-height: 0; }
main > section {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 2.2em;
  padding: 2em var(--gutter);
  overflow: hidden;
  font-size: calc(1rem * var(--fit, 1));
}
main > section.active { display: flex; }
#home .logo-xl { margin: 0 0 1em; display: flex; align-items: center; justify-content: space-between; }
#home .rl-badge { height: 13em; width: auto; }
#home .list { margin-top: 1.5em; gap: 2em; font-size: 1.3em; }
#home .list-btn { min-height: 9em; padding-block: 1.8em; }

h1 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 5.6em;
  line-height: 1.04;
  letter-spacing: -0.005em;
}
h1 em, .stage em { font-style: normal; color: var(--orange); }
p { margin: 0; font-size: 2em; line-height: 1.35; }
strong { font-weight: 500; }
.sub { font-size: 2.3em; opacity: 0.92; }
.lead { font-size: 2.4em; font-weight: 500; }
.center { text-align: center; }
.body { display: flex; flex-direction: column; gap: 0.9em; }
.note { display: flex; align-items: center; gap: 0.6em; font-size: 1.8em; opacity: 0.85; margin-top: 2em; }
.ico { width: 1.4em; height: 1.4em; flex: none; }

/* Hand-drawn accents (swap for Canva PNG/SVG exports) */
.swash { background: var(--swash) left bottom / 100% 0.28em no-repeat; padding-bottom: 0.12em; }
.circled { position: relative; display: inline-block; }
.circled::after {
  content: "";
  position: absolute;
  inset: -0.22em -0.42em -0.14em;
  background: url("/assets/images/accents/circle.svg") center / 100% 100% no-repeat;
  transform: rotate(-2deg);
  pointer-events: none;
}

.teal-caps { color: var(--teal); font-weight: 500; letter-spacing: 0.16em; font-size: 1.8em; text-transform: uppercase; }
.teal-line { color: var(--teal); font-weight: 500; text-align: center; font-size: 2em; }

/* ---------- List buttons ---------- */
.list { display: flex; flex-direction: column; gap: 1.4em; }
.list-btn {
  display: flex;
  align-items: center;
  gap: 1.6em;
  min-height: 7.5em;
  padding: 1.3em 1.8em 1.3em 1.4em;
  background: #fff;
  color: var(--text-dark);
  border: 0.15em solid var(--orange);
  border-radius: 1.4em;
  text-align: left;
  box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.18);
}
.badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 4.4em;
  height: 4.4em;
  border-radius: 0.8em;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.1em;
}
.badge:not(.icon) { font-size: 2.2em; width: 2.2em; height: 2.2em; border-radius: 0.36em; }
.badge.icon svg { width: 2.4em; height: 2.4em; }
.lb-text { flex: 1; display: flex; flex-direction: column; gap: 0.3em; }
.lb-text b { font-size: 2.15em; font-weight: 500; line-height: 1.15; }
.lb-text small { font-size: 1.6em; color: var(--muted-dark); line-height: 1.25; }
.chev { flex: none; width: 3em; height: 3em; color: var(--orange); stroke-width: 2.6; }

/* ---------- CTAs ---------- */
.ctas { display: flex; flex-direction: column; gap: 1.4em; }
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  min-height: 3em;
  padding: 0.6em 1.4em;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-weight: 900;
  font-size: 2.2em;
  border: 0.1em solid var(--orange);
  box-shadow: 0 0.3em 1em rgba(229, 94, 39, 0.3);
}
.cta.secondary { background: #fff; color: var(--text-dark); box-shadow: none; }
.cta:disabled { opacity: 0.4; box-shadow: none; transform: none; }
.cta.big { justify-content: flex-start; text-align: left; border-radius: 1.4em; padding: 1em 1.6em; font-size: 1em; min-height: 7.5em; }
.cta.big .ico { width: 3.6em; height: 3.6em; padding: 0.7em; border-radius: 50%; background: rgba(255, 255, 255, 0.2); stroke-width: 2.4; }
.cta.big.secondary .ico { background: var(--orange); color: #fff; }
.cta.big span { display: flex; flex-direction: column; gap: 0.3em; }
.cta.big b { font-size: 2.2em; }
.cta.big small { font-size: 1.6em; font-weight: 400; opacity: 0.9; }
.text-link {
  align-self: center;
  min-height: 4em;
  padding: 0 1em;
  font-size: 1.9em;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 0.25em;
}

/* ---------- Content blocks ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; align-items: center; }
.dots { list-style: none; margin: 0.8em 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7em; }
.dots li { font-size: 2.1em; font-weight: 500; display: flex; align-items: center; gap: 0.6em; }
.dots li::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--teal); flex: none; }

.photo {
  display: grid;
  place-items: center;
  border-radius: 1.2em;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 1em, rgba(255, 255, 255, 0.14) 1em 2em);
  border: 0.12em dashed rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.4em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.collage-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1.2em; height: 17em; }
.collage-img { display: block; align-self: center; max-width: 100%; height: 30em; object-fit: contain; }
.collage-stack { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1em; height: 28em; }
.collage-stack .photo:first-child { grid-row: span 2; }
.collage-pair { display: grid; grid-template-rows: 1fr 1fr; gap: 1em; height: 28em; }
/* Mission: two tilted photos with hand-drawn accents */
.mission-h1 { font-size: 6.2em; }
.mission-lead { position: relative; z-index: 3; font-size: 2.4em; }
.mission-split { grid-template-columns: auto 1fr; gap: 2.5em; margin-top: 1.5em; }
.mission-split .dots { position: relative; z-index: 3; padding-left: 1.4em; gap: 0.9em; }
.mission-split .dots li { font-size: 2.3em; white-space: nowrap; }
#mission .list { font-size: 1.15em; }
#mission .list-btn { min-height: 7.5em; }
.collage-tilt { position: relative; height: 27em; margin-right: -1.5em; }
.collage-tilt > img, .tilt-b { position: absolute; display: block; border: 0.4em solid #111; border-radius: 2.2em; box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.5); }
.collage-tilt > img { object-fit: cover; }
.tilt-a { left: 0; top: 0; width: 40%; aspect-ratio: 4 / 3; transform: rotate(-8deg); z-index: 1; }
.tilt-b { right: 0; bottom: 0.5em; width: 64%; aspect-ratio: 3 / 2; transform: rotate(6deg); }
.tilt-b img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1.8em; }
/* Burst traces the wall shadow; viewBox matches the photo's 3:2 frame so it rotates with it. */
.tilt-b .burst-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--orange); }
.scribble { position: absolute; left: 9%; bottom: 20%; width: 8em; fill: none; stroke: var(--orange); stroke-linecap: round; stroke-width: 1.2; z-index: 2; }

/* GST Jr.: scattered photos on a torn-paper strip. One fixed-aspect box so the
   pieces scale together and never spill past it; each piece is placed by its centre. */
.collage-jr { position: relative; align-self: center; width: min(100%, 66em); aspect-ratio: 2.2; flex: none; }
.collage-jr img { position: absolute; display: block; translate: -50% -50%; }
.collage-jr .jr-paper { translate: none; left: -50vw; top: 30%; height: 52%; width: calc(50vw + 93%); max-width: none; rotate: -1.5deg; }
.jr-photo { object-fit: cover; border: 0.35em solid #111; border-radius: 1.8em; box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.45); }
.jr-a { left: 32%; top: 60%; width: 47%; aspect-ratio: 1100 / 606; rotate: 10deg; z-index: 2; }
.jr-b { left: 60%; top: 29%; width: 45%; aspect-ratio: 1100 / 606; rotate: -4deg; z-index: 1; }
.jr-c { left: 81%; top: 68%; width: 33%; aspect-ratio: 3 / 2; rotate: -10deg; z-index: 4; }
.jr-hatch { left: 61%; top: 70%; width: 15%; z-index: 3; }
.jr-bolts { left: 25%; top: 25%; width: 22%; z-index: 3; }

/* Wired: three tilted photos with waves, burst and stars. Same fixed-aspect,
   centre-placed approach as GST Jr. */
.collage-wired { position: relative; align-self: center; width: min(100%, 64em); aspect-ratio: 2.05; flex: none; }
.collage-wired > * { position: absolute; display: block; translate: -50% -50%; }
.wd-photo { aspect-ratio: 1076 / 812; object-fit: cover; border: 0.35em solid #111; border-radius: 1.8em; box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.45); }
.wd-a { left: 21%; top: 32%; width: 37%; rotate: 5deg; z-index: 1; }
.wd-b { left: 50%; top: 63%; width: 42%; rotate: -5deg; z-index: 2; }
.wd-c { left: 79%; top: 35%; width: 39%; rotate: 10deg; z-index: 3; }
.wd-waves { left: 21%; top: 80%; width: 18%; z-index: 0; fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; }
.wd-burst { left: 51%; top: 55%; width: 26%; z-index: 4; fill: var(--teal); }
.wd-stars { left: 92%; top: 76%; width: 13%; z-index: 4; fill: var(--orange); }
.wd-stars .ln { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; }

.collage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 1.2em; }

.program-tiles { display: flex; flex-direction: column; gap: 1.8em; }
.program-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 10em;
  padding: 1.5em 2.5em;
  border-radius: 1.6em;
  background: rgba(255, 255, 255, 0.06);
  border: 0.15em solid rgba(255, 255, 255, 0.25);
}
.program-tile img { height: 15em; max-width: 80%; object-fit: contain; object-position: left center; }
.program-tile[data-go="wired"] img { height: 11em; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; }
.card {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 1.8em;
  border-radius: 1.4em;
  background: var(--deep-teal);
  color: #fff;
}
.card .ico { width: 3.4em; height: 3.4em; color: var(--teal); }
.card .ico-free { width: 4.5em; }
.card b { font-size: 2.2em; font-family: var(--font-head); font-weight: 900; }
.card span { font-size: 1.65em; line-height: 1.3; }

.talk-box {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1.8em 2.2em;
  border-radius: 1.4em;
  background: var(--deep-teal);
  color: #fff;
}
.talk-box.teal { background: var(--teal); color: var(--text-dark); }
.talk-box b { font-size: 2.3em; font-family: var(--font-head); font-weight: 900; }
.talk-box span { font-size: 1.8em; line-height: 1.35; }

.contact-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; text-align: center; }
.contact-row div { display: flex; flex-direction: column; align-items: center; gap: 0.35em; }
.contact-row .ico { width: 3.4em; height: 3.4em; color: var(--teal); }
.contact-row b { font-size: 1.4em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.contact-row span { font-size: 1.75em; font-weight: 500; }

/* QR codes (generated by `npm run qr`) */
.qr { position: relative; align-self: center; width: 24em; padding: 1.4em; background: #fff; border-radius: 1.4em; }
.qr-lg { width: 30em; }
.qr img { display: block; width: 100%; height: auto; }
/* Hand-drawn arrows around the QR codes (assets/images/arrows) */
.qr .ha img { position: absolute; height: auto; pointer-events: none; }
.qr .ha-tl { right: calc(100% + 1em); top: 4%; width: 10em; }
.qr .ha-l  { right: calc(100% + 0.8em); top: 38%; width: 12em; }
.qr .ha-bl { right: calc(100% + 1em); bottom: 2%; width: 10em; }
.qr .ha-tr { left: calc(100% + 1em); top: 2%; width: 11em; }
.qr .ha-r  { left: calc(100% + 0.8em); top: 34%; width: 13em; }
.qr .ha-br { left: calc(100% + 1em); bottom: 0; width: 11em; }

.bubbles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em 2em; }
.bubble {
  position: relative;
  padding: 1em 1.2em;
  background: #fff;
  color: var(--text-dark);
  border-radius: 1em;
  font-family: var(--font-hand);
  font-size: 2.3em;
  line-height: 1.2;
}
.bubble::after {
  content: "";
  position: absolute;
  bottom: -0.6em;
  left: 1.4em;
  border: 0.35em solid transparent;
  border-top: 0.45em solid #fff;
  border-left: 0.35em solid #fff;
}
.bubble.alt { background: var(--teal); }
.bubble.alt::after { left: auto; right: 1.4em; border-color: transparent; border-top-color: var(--teal); border-right: 0.35em solid var(--teal); }

/* ---------- Chat Later form ---------- */
.schedule { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5em; }
.col { display: flex; flex-direction: column; gap: 1em; min-width: 0; }
.field-label { font-size: 1.7em; font-weight: 500; }
.field {
  display: flex;
  align-items: center;
  width: 100%;
  height: 3.2em;
  padding: 0 0.7em;
  border: 0.08em solid var(--orange);
  border-radius: 0.5em;
  background: #fff;
  color: var(--text-dark);
  font: 700 2.2em/1 var(--font-body);
  outline: none;
  caret-color: var(--orange);
}
.field::placeholder, .field.placeholder { color: #aaa; font-weight: 400; }
.keypad, .picker { display: grid; gap: 0.7em; }
.keypad { grid-template-columns: repeat(3, 1fr); }
.hours { grid-template-columns: repeat(4, 1fr); }
.minutes { grid-template-columns: repeat(4, 1fr); }
.meridiem { grid-template-columns: 1fr 1fr; }
.keypad button, .picker button {
  border-radius: 0.8em;
  border: 0.15em solid var(--orange);
  background: #fff;
  color: var(--text-dark);
  font-size: 2.1em;
  font-weight: 500;
  min-height: 2.4em;
}
.keypad button.muted { font-size: 1.6em; color: var(--muted-dark); border-color: #ccc; }
.keypad svg { width: 1.5em; height: 1.5em; }
.picker button.on { background: var(--orange); color: #fff; }
.consent { font-size: 1.4em; color: var(--muted-dark); line-height: 1.4; }
.form-error {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1.4em 1.8em;
  border-radius: 1.2em;
  background: #fdece4;
  border: 0.12em solid var(--orange);
}
.form-error p { font-size: 1.8em; font-weight: 500; }
.form-error .cta { font-size: 1.8em; min-height: 3em; }

/* ---------- Confirm ---------- */
.confirm { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2em; }
.confirm-check { width: 14em; height: 14em; border-radius: 50%; background: var(--orange); display: grid; place-items: center; }
.confirm-check svg { width: 8em; height: 8em; color: #fff; stroke-width: 2.6; }

/* ---------- Footer ---------- */
.kiosk-footer {
  flex: none;
  padding: 1.5rem var(--gutter) 3rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  min-height: 6rem;
}
.stage[data-theme="chat"] .kiosk-footer { color: var(--muted-dark); }
#footer:empty { visibility: hidden; }

/* ---------- Idle overlay ---------- */
.idle-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.72);
}
.idle-card {
  width: 50rem;
  padding: 5rem 4rem;
  border-radius: 2.5rem;
  background: #fff;
  color: var(--text-dark);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  font-size: 1rem;
}
.idle-card h2 { margin: 0; font-family: var(--font-head); font-size: 6em; }
.idle-card p { font-size: 2.4em; }
.idle-card strong { color: var(--orange); }