/* Borderless with FinNiki. Same build as Consultations (consult.html): green hero with the one action, the topics as
   hairline rows, what happens after you apply as a slip, past guests and questions as plain rows, a closing band.
   Every action on the page opens the guest application (borderless.js). */

/* ---------- Hero: copy left, frames from the episodes right ---------- */
.page-hero { padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 64px); }
.page-hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.page-hero h1 { font-size: var(--step-head); }
.page-hero h1 em { display: block; }
.page-hero .lead { color: var(--on-green-muted); font-size: var(--step-lead); margin-top: 24px; max-width: 42ch; }
.page-hero .actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.spec { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-top: 24px; color: var(--on-green-muted); }
.spec b { font: 300 var(--step-figure)/1 var(--display); color: var(--coral); }
.bl-frames { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--green-deep); }
.bl-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1600ms ease; }
.bl-frames img.on, html:not(.js) .bl-frames img:first-child { opacity: 1; }

.covers-band { padding-top: 0; }
.covers { max-width: min(100%, 640px); }
.covers li { padding: 16px 0; border-top: 1px solid rgba(244, 241, 232, 0.16); color: var(--on-green-muted); }
.covers li:last-child { border-bottom: 1px solid rgba(244, 241, 232, 0.16); }
.covers b { color: var(--on-green); font-weight: 600; }

/* ---------- After you apply: the same slip as Consultations ---------- */
.after { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.after h2, .ep-head h2, .qa h2, .cta-band h2 { font-size: var(--step-head); }
.after .intro p { margin-top: 24px; font-size: var(--step-lead); line-height: 1.55; max-width: 34ch; }
.after .intro .btn { margin-top: 32px; }
.slip {
  --z: 12px; justify-self: end; width: min(100%, 500px); background: #fff; color: var(--text);
  padding: 8px 32px calc(var(--z) + 32px); font-variant-numeric: tabular-nums;
  /* taste-skill-ignore: mask cuts the slip's zigzag edge */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
}
.slip-when { margin-top: 28px; font-weight: 700; color: var(--ink); }
.slip-row { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.slip-row i { flex: 1; min-width: 24px; border-bottom: 4px dotted var(--line-input); } /* dot leader */
.slip-row span:last-child { color: var(--muted); text-align: right; }
.slip-total { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; margin: 32px -16px 0; padding: 0 16px; background: var(--green); color: var(--on-green); font-weight: 600; }
.slip-total b { font: 300 var(--step-lead)/1 var(--display); color: var(--coral); }

/* ---------- Past guests: the country filter, then one row per episode ---------- */
.bl-episodes { padding-top: 0; }
.ep-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
.where { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.where legend { float: left; margin-right: 16px; font-weight: 600; color: var(--ink); }
.where label { position: relative; }
.where input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.where span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 0; background: var(--mint); color: var(--ink); font-weight: 600; transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out); }
.where label:hover span { background: #e9e2d0; }
.where input:checked + span { background: var(--green); color: var(--on-green); }
.where input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.where input:active + span { transform: scale(0.97); }
.ep { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 8px clamp(32px, 6vw, 96px); padding: 24px 0; border-top: 1px solid var(--line); }
.ep:last-child { border-bottom: 1px solid var(--line); }
.route { font: 600 var(--step-lead)/1.3 var(--serif); color: var(--ink); }
.route span { display: block; margin-top: 4px; font: 400 var(--step-small)/1.4 var(--sans); color: var(--muted); }
.ep h3 { font: 600 var(--step-lead)/1.3 var(--serif); color: var(--ink); }
.ep h3 + p { margin-top: 8px; max-width: 52ch; }
.watch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; font-weight: 600; color: var(--ink); }
.watch .arrow { transition: transform 180ms var(--ease-out); }
.watch:hover .arrow { transform: translateX(3px); }
.js .ep-list:not(.all) .ep:nth-child(n+5) { display: none; } /* four first; the rest on "Show all" or a country pick */
.ep-more { margin-top: 32px; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-input); } /* outline: it never competes with Apply */
.ep-more:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ep-list.all ~ .ep-more, html:not(.js) .ep-more { display: none; }
.ep-none { margin-top: 24px; font-size: var(--step-lead); }
.ep-none a { color: var(--ink); font-weight: 600; }

/* Questions: plain rows, question left, answer right */
.qa { margin-top: clamp(56px, 7vw, 96px); }
.qa h2 { margin-bottom: 32px; }
.qa dl > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 8px clamp(32px, 6vw, 96px); padding: 24px 0; border-top: 1px solid var(--line); }
.qa dl > div:last-child { border-bottom: 1px solid var(--line); }
.qa dt { font: 600 var(--step-lead)/1.3 var(--serif); color: var(--ink); }
.qa dd { margin: 0; max-width: 52ch; }
.qa dd a { color: var(--ink); font-weight: 600; }

.cta-band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.cta-band h2 em { display: block; }
.cta-band p { color: var(--on-green-muted); max-width: 40ch; }
.cta-band .actions { margin-top: 24px; }

/* ---------- The guest application, in a pop-up over the page ---------- */
.apply-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 24px; padding: 40px; background: var(--cream); border-radius: var(--r); }
.apply-card > .apply-head, .apply-card > .wide, .apply-card > .choice:not(.half), .apply-card > .apply-btn { grid-column: 1 / -1; }
.apply-head { padding-right: 48px; }
.apply-card h2 { font-size: var(--step-figure); line-height: 1.15; }
.apply-head p { margin-top: 8px; color: var(--muted); }
/* Quiet form: small mono labels like the rest of the site, ruled answer lines instead of boxes, every control 48px tall. */
.field { display: grid; gap: 6px; align-content: start; }
.apply-card .field > span, .apply-card .field > label, .choice legend { font: 500 var(--step-label)/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.apply-card .field input, .apply-card .field select, .apply-card .cc {
  font: 400 var(--step-body)/1.4 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-input);
  border-radius: 0; padding: 10px 0; width: 100%; min-height: 48px;
}
/* the native select keeps its own inset and arrow; this one lines up with the other answers and shares the code box's chevron */
.apply-card .field select { appearance: none; padding-right: 24px; cursor: pointer; }
.sel { position: relative; display: block; }
.sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.tel .cc::after { margin-right: 16px; }
.apply-card .field input::placeholder, .apply-card .field textarea::placeholder { color: var(--muted); }
.apply-card .field textarea { font: 400 var(--step-body)/1.5 var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--line-input); border-radius: 0; padding: 12px 14px; width: 100%; min-height: 104px; resize: vertical; }
.apply-card .field input:focus, .apply-card .field select:focus, .apply-card .cc:focus-within { outline: 0; border-bottom-color: var(--focus); box-shadow: 0 1px 0 var(--focus); }
.apply-card .field textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
/* WhatsApp: a short code box (shows "SG +65"; its list names every country) and the number */
.tel { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
.apply-card .cc { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0; }
.cc::after { content: ""; width: 7px; height: 7px; margin: -4px 4px 0 0; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.cc-show { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.cc-show.empty { color: var(--muted); }
.apply-card .cc select { position: absolute; inset: 0; opacity: 0; min-height: 0; padding: 0; border: 0; cursor: pointer; }
/* Single-choice questions as one evenly split bar; the radio stays in the DOM for keyboard and screen readers. */
.choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice legend { padding: 0; margin-bottom: 6px; }
.choice div { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); border: 1px solid var(--line-input); }
.choice label { position: relative; }
.choice label + label span { border-left: 1px solid var(--line-input); }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.choice span {
  display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 8px; background: transparent; text-align: center; white-space: nowrap;
  font: 400 var(--step-small)/1.2 var(--sans); color: var(--ink); cursor: pointer; transition: background-color 160ms ease, color 160ms ease;
}
.choice label:hover span { background: #fff; }
.choice input:checked + span { background: var(--green); color: var(--on-green); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }
.apply-card .status { font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.apply-card .status:empty, #turnstile:empty { display: none; }
.apply-card .status.ok { color: var(--green); }
.apply-card .status.err { color: var(--coral-ink); }
.apply-btn {
  min-height: 56px; margin: 4px -40px -40px; border: 0; border-radius: 0 0 var(--r) var(--r); background: var(--green); color: var(--on-green);
  font: 600 var(--step-body)/1 var(--sans); cursor: pointer; transition: background-color 180ms ease;
}
.apply-btn:hover { background: var(--green-raised); }
.apply-btn:active { background: var(--green-deep); }
.apply-btn:disabled { opacity: 0.7; cursor: progress; }
.hp { position: absolute; left: -9999px; }
.apply-dlg { width: min(720px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--r); background: var(--cream); overflow: auto; overscroll-behavior: contain; }
.apply-dlg::backdrop { background: rgba(20, 28, 25, 0.72); }
html:has(.apply-dlg[open]) { overflow: hidden; }
.apply-card.sent > :not(.apply-head, .status, .dlg-x) { display: none; } /* after sending, only the thanks */
.apply-card.sent .apply-head p { display: none; }
.apply-card.sent .status { font-size: var(--step-body); }
@media (max-width: 640px) {
  .apply-card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 20px; }
  .apply-btn { margin: 4px -20px -28px; }
  .apply-head { padding-right: 40px; }
}
.dlg-x {
  position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent;
  font: 400 1.75rem/1 var(--sans); color: var(--ink); cursor: pointer; transition: background-color 160ms ease;
}
.dlg-x:hover { background: #fff; }
.dlg-x:focus-visible { outline: 2px solid var(--focus); }

@media (max-width: 900px) {
  .page-hero .wrap, .cta-band .wrap, .after, .ep, .qa dl > div { grid-template-columns: minmax(0, 1fr); }
  .page-hero .actions .btn { flex: 1 1 100%; }
  .slip { justify-self: stretch; width: 100%; padding: 8px 24px calc(var(--z) + 28px); }
  .slip-row span:last-child { white-space: nowrap; }
}

/* Frames crossfade (borderless.js); the hero rises with site.js's page-hero motion */
@media (prefers-reduced-motion: no-preference) { .apply-dlg[open] { animation: rise 280ms var(--ease-out); } }
@media (prefers-reduced-motion: reduce) { .bl-frames img { transition: none; } }