/* EU AI Talk guest intake. Schibsted Grotesk in 400, 500 and 900; slate,
   grey and white; red only in the colon of the logo. Square corners. */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 900; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-ext-900-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 900; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-900-normal.woff2") format("woff2"); }

:root { --slate: #2f3133; --muted: #555759; --grey: #bebebe; --hair: #e2e2e2; --page: #f4f4f4; --white: #ffffff; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { display: flex; flex-direction: column; min-height: 100svh; margin: 0; background: var(--white); color: var(--slate); font: 400 1.0625rem/1.5 "Schibsted Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.wrap { width: 100%; max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }
/* The header stays at the top while the form scrolls. */
header.wrap { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.5rem; background: var(--white); }
header img { height: 1.625rem; width: auto; display: block; }
header .on-dark { display: none; }
.controls { display: flex; align-items: stretch; height: 100%; }
.controls a.lang, .controls button.theme { display: flex; align-items: center; height: 100%; margin: 0; padding: 0 0.875rem; background: transparent; color: inherit; font: 500 0.9375rem/1 "Schibsted Grotesk", system-ui, sans-serif; text-decoration: none; }
/* The two switches take no hover shade. */
.controls a.lang, .controls button.theme { -webkit-tap-highlight-color: transparent; }
.controls button.theme:hover { background: transparent; }
.controls a.lang:hover { background: transparent; }
.controls a.lang { margin-right: -0.875rem; }
/* The mode switch: a square, half filled; the filled half changes side. */
button.theme i { display: flex; width: 0.875rem; height: 0.875rem; border: 1px solid currentColor; }
button.theme b { width: 50%; background: currentColor; transition: transform 0.3s; }
button.theme[aria-pressed="true"] b { transform: translateX(100%); }
main.wrap { flex: 1 0 auto; padding-top: 4rem; padding-bottom: 6rem; }
footer { flex: none; }
h1 { margin: 0; font-weight: 900; font-size: clamp(2.25rem, 7vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
h1 + p { margin: 1.25rem 0 0; font-weight: 500; font-size: 1.1875rem; line-height: 1.4; }
/* Headline and intro with a slim portrait of the host as a hello. On a phone
   it stands beside the headline only; wider, beside headline and intro. The
   picture fills its column and never makes it taller than the text. */
.hello { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; grid-template-areas: "title picture" "lead lead"; column-gap: 1.25rem; }
.hello h1 { grid-area: title; }
.hello p { grid-area: lead; }
.hello-picture { grid-area: picture; display: flex; flex-direction: column; margin: 0; }
.hello-frame { position: relative; flex: 1 1 auto; min-height: 7rem; background: #0a0a0a; }
.hello-picture figcaption { margin-top: 0.5rem; font-weight: 500; font-size: 0.875rem; line-height: 1.25; }
.hello-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
@media (min-width: 40rem) { .hello { grid-template-columns: minmax(0, 1fr) 8.5rem; grid-template-areas: "title picture" "lead picture"; column-gap: 2.5rem; } }
/* The first card: the guest's own link, written out with a copy button, and the PDFs. */
.look-back ul.pdfs a { border-bottom-color: #bebebe; }
.look-back ul.pdfs a:hover { border-bottom-color: var(--slate); }
.own-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.25rem !important; }
.own-link-row a { flex: 1 1 18rem; min-width: 0; color: var(--ink, var(--slate)); font-weight: 500; overflow-wrap: anywhere; }
.own-link-row button { margin: 0; height: 2.75rem; padding: 0 1.25rem; background: var(--red); font-size: 1rem; }
.own-link-row button:hover { background: var(--slate); }
.ask { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); }
.ask p { margin: 0; color: var(--muted); }
.ask-links { display: grid; gap: 0.5rem; margin-top: 0.875rem !important; }
@media (min-width: 30rem) { .ask-links { grid-template-columns: 1fr 1fr; } }
.ask-links a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.5rem; padding: 0.625rem 1.125rem; background: #dc3338; color: var(--white); font-weight: 900; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color 0.3s; }
.ask-links a::after { content: "→"; font-weight: 500; }
.ask-links a:hover { background: var(--slate); }
.ask-links a > span { display: block; }
.ask-links small { display: block; font-weight: 500; font-size: 0.75rem; opacity: 0.75; }
h2 { margin: 0 0 0.25rem; font-weight: 900; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.012em; }
section { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--slate); }
section > p, .note { margin: 0.25rem 0 0; color: var(--muted); }
ul.rules { margin: 0.75rem 0 0; padding-left: 1.25rem; list-style: square; color: var(--muted); }
.fields { display: grid; gap: 1rem; margin-top: 1.25rem; }
.two { display: grid; gap: 1rem; }
@media (min-width: 36rem) { .two { grid-template-columns: 1fr 1fr; } .two.short-long { grid-template-columns: 9rem 1fr; } }
label, legend { display: block; font-weight: 500; font-size: 0.9375rem; }
label small, legend small { font-weight: 400; color: var(--muted); }
input[type="text"], input[type="tel"], input[type="email"], textarea { display: block; width: 100%; margin-top: 0.375rem; padding: 0.75rem 0.875rem; border: 1px solid var(--grey); border-radius: 0; background: var(--white); color: var(--slate); font: inherit; }
textarea { min-height: 7rem; resize: vertical; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
fieldset { margin: 1.25rem 0 0; padding: 0; border: 0; }
/* The date picker: one row per day, the times as square tiles. A ticked
   tile turns slate. Built from plain checkboxes, so it works without script
   and with the keyboard. */
.days { margin-top: 1.5rem; border-top: 1px solid var(--hair); }
.day { display: grid; gap: 0.75rem; margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--hair); }
.day legend { float: left; width: 100%; padding: 0; font-weight: 400; font-size: 0.9375rem; color: var(--muted); }
.day legend span { display: block; font-weight: 900; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.012em; color: var(--slate); }
.times { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; }
@media (min-width: 36rem) { .day { grid-template-columns: 11rem 1fr; align-items: start; } .day legend { width: 11rem; } .times { clear: none; grid-column: 2; } }
.proposals { margin-top: 1.5rem; border-top: 1px solid var(--slate); }
.proposal { padding: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--hair); }
.proposal h3 { margin: 0; font-weight: 900; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.012em; }
details.proposal { padding: 0; }
/* An accordion row: the title, the hint on a line of its own below it, the
   plus on the right. Nothing sits side by side that could wrap. */
details.proposal > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; row-gap: 0.25rem; padding: 1.25rem 0; cursor: pointer; list-style: none; }
details.proposal > summary h3 { grid-column: 1; }
details.proposal > summary .hint { grid-column: 1; grid-row: 2; }
details.proposal > summary .plus { grid-column: 2; grid-row: 1 / span 2; }
details.proposal > summary::-webkit-details-marker { display: none; }
details.proposal[open] { padding-bottom: 1.5rem; }
details.proposal[open] > summary { padding-bottom: 0; }
.hint { color: var(--muted); font-size: 0.9375rem; }
/* The plus of a closed proposal, built from two bars; open, it is a minus and slate turns to red. */
.plus { position: relative; flex: none; width: 1.75rem; height: 1.75rem; margin-left: auto; background: var(--slate); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 2px; margin: -1px 0 0 -0.375rem; background: var(--white); }
.plus::after { width: 2px; height: 0.75rem; margin: -0.375rem 0 0 -1px; }
details[open] .plus { background: #dc3338; }
details[open] .plus::after { display: none; }
.pick { margin: 1.25rem 0 0.5rem; font-weight: 500; font-size: 0.9375rem; color: var(--muted); }
.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.cal .gap { display: block; }
.cal .time span { flex-direction: column; height: 4rem; line-height: 1.15; font-size: 1rem; }
.cal .time small { font-weight: 400; font-size: 0.8125rem; color: inherit; opacity: 0.75; }
.proposal .times { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
.time { position: relative; display: block; }
.time input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.time span { display: flex; align-items: center; justify-content: center; height: 3.25rem; border: 1px solid var(--grey); font-weight: 500; font-size: 1.0625rem; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.time input:hover + span { border-color: var(--slate); }
.time input:checked + span { background: var(--slate); border-color: var(--slate); color: var(--white); font-weight: 900; }
.time input:focus-visible + span { outline: 2px solid var(--slate); outline-offset: 2px; }
/* A time another guest holds: still visible, but not to be picked. */
.time input:disabled { cursor: not-allowed; }
.time input:disabled + span { border-style: dashed; opacity: 0.4; }
.time input:disabled:hover + span { border-color: var(--grey); }
.choice { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 0.5rem; padding: 0.875rem; border: 1px solid var(--grey); font-weight: 400; font-size: 1.0625rem; }
.choice input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.125rem 0 0; accent-color: var(--slate); }
.choice:has(input:checked) { border-color: var(--slate); background: var(--page); }
/* Picture upload. Plain, the file field shows as it is. With the script it
   becomes a drop area with a list of the chosen pictures. */
.drop { position: relative; margin-top: 1.25rem; border: 1px solid var(--grey); }
.drop input[type="file"] { display: block; width: 100%; padding: 1.25rem; font: inherit; }
.drop-text { display: none; }
.drop.enhanced { transition: background-color 0.15s, border-color 0.15s; }
.drop.enhanced input[type="file"] { position: absolute; inset: 0; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.drop.enhanced .drop-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; min-height: 10rem; padding: 1.5rem; text-align: center; color: var(--muted); }
.drop.enhanced .drop-text strong { display: inline-flex; align-items: center; height: 3rem; padding: 0 1.5rem; background: var(--slate); color: var(--white); font-weight: 900; }
.drop.enhanced:hover, .drop.enhanced.over { border-color: var(--slate); background: var(--page); }
.drop.enhanced:has(input:focus-visible) { outline: 2px solid var(--slate); outline-offset: 2px; }
.drop.enhanced.full { display: none; }
ul.chosen { margin: 0.5rem 0 0; padding: 0; list-style: none; }
ul.chosen li { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--hair); }
ul.chosen img { display: block; width: 5.5rem; height: 3.75rem; object-fit: cover; background: var(--page); }
ul.chosen strong { display: block; font-weight: 500; overflow-wrap: anywhere; }
ul.chosen small { display: block; color: var(--muted); font-size: 0.875rem; }
ul.chosen button { margin: 0; height: 2.5rem; padding: 0 1rem; background: var(--white); color: var(--slate); border: 1px solid var(--grey); font-weight: 500; font-size: 0.9375rem; }
ul.chosen button:hover { background: var(--page); border-color: var(--slate); }
ul.files { margin: 1rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
ul.files li { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--hair); }
ul.files label { font-weight: 400; display: flex; gap: 0.5rem; align-items: center; }
.consent { margin-top: 1.25rem; padding: 1.25rem; background: var(--page); white-space: pre-line; }
.given { margin-top: 1rem; font-weight: 500; }
button { margin-top: 2.5rem; display: inline-flex; align-items: center; height: 3.25rem; padding: 0 2rem; border: 0; border-radius: 0; background: var(--slate); color: var(--white); font: 900 1.0625rem/1 "Schibsted Grotesk", system-ui, sans-serif; cursor: pointer; }
button:hover { background: #404346; }
.message { margin: 2rem 0 0; padding: 1.25rem; background: var(--slate); color: var(--white); font-weight: 500; }
.message ul { margin: 0.5rem 0 0; padding-left: 1.25rem; list-style: square; font-weight: 400; }
dl { margin: 1.25rem 0 0; display: grid; gap: 0.75rem; }
dt { font-size: 0.875rem; color: var(--muted); }
dd { margin: 0; font-weight: 500; white-space: pre-line; }
/* The information PDFs: quiet links below the two contact buttons. */
.files-head { margin-top: 1.25rem !important; font-size: 0.9375rem; }
ul.pdfs { display: grid; gap: 0 1.5rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
@media (min-width: 30rem) { ul.pdfs { grid-template-columns: 1fr 1fr; } }
ul.pdfs a { display: flex; align-items: baseline; gap: 0.625rem; padding: 0.625rem 0; border-bottom: 1px solid var(--hair); color: var(--slate); font-weight: 500; text-decoration: none; }
ul.pdfs a:hover { border-bottom-color: var(--slate); }
ul.pdfs small { font-weight: 900; font-size: 0.6875rem; letter-spacing: 0.04em; color: #dc3338; }
footer .wrap > * { margin: 0; }
footer .wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-top: 1.5rem; padding-bottom: 2rem; border-top: 1px solid var(--hair); font-size: 0.875rem; color: var(--muted); text-align: center; }
footer ul { display: flex; gap: 1.25rem; padding: 0; list-style: none; }
footer a { text-decoration: none; transition: color 0.3s; }
footer a:hover { color: var(--slate); }
@media (min-width: 48rem) { footer .wrap { flex-direction: row; justify-content: space-between; text-align: left; } }
a { color: inherit; text-underline-offset: 4px; }

/* ---------- Forgotten or wrong fields ---------- */
/* A red frame, drawn inside the white field so red never touches the
   ground. `:user-invalid` marks a field the guest left empty once they try
   to send; `aria-invalid` marks what the server found. */
input:user-invalid, textarea:user-invalid, input[aria-invalid="true"], textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 3px #dc3338; }
/* Day and time tiles are framed as one group each, not tile by tile. */
.cal[aria-invalid="true"], .times[aria-invalid="true"], .cal:has(input:user-invalid), .times:has(input:user-invalid) { outline: 3px solid #dc3338; outline-offset: 4px; }
.days[aria-invalid="true"], .drop[aria-invalid="true"] { box-shadow: inset 0 0 0 3px #dc3338; }
/* The consent stands on red: there the frame is slate. */
.choice[aria-invalid="true"], .choice:has(input:user-invalid) { box-shadow: inset 0 0 0 4px #2f3133; font-weight: 500; }
.message { border-left: 0.5rem solid #dc3338; }

/* ---------- Colour: one ground per part of the form ---------- */
/* Grounds from the website palette: light grey, sand, pale moss, petrol and
   slate. Each part carries its number and the colon, tone on tone, like the
   tiles of the website. Red is the consent and every button. */
:root { --sand: #e3dccf; --sand-mark: #a39888; --moss: #d5ead1; --moss-mark: #9bc293; --petrol: #1e4d50; --petrol-mark: #3f8487; --red: #dc3338; }
form { margin-top: 3rem; }
section.panel { margin-top: 0; margin-bottom: 1.5rem; padding: 1.5rem 1.25rem 2rem; border-top: 0; background: var(--ground); color: var(--ink); --ink: var(--slate); --mute: var(--muted); --field: var(--white); --line: rgb(47 49 51 / 0.2); --mark: #bebebe; --pick: var(--slate); --pick-ink: var(--white); }
@media (min-width: 36rem) { section.panel { padding: 2rem 2rem 2.5rem; } }
.panel.grey { --ground: var(--hair); --mark: #bebebe; --inset: #d3d4d5; }
.panel.sand { --ground: var(--sand); --mark: var(--sand-mark); --inset: #c9c0b2; }
.panel.moss { --ground: var(--moss); --mark: var(--moss-mark); --inset: #bbd9b5; }
.panel.petrol { --ground: var(--petrol); --ink: var(--white); --mute: #dcebe9; --line: rgb(255 255 255 / 0.3); --mark: var(--petrol-mark); --inset: #17393b; }
.panel.red { --ground: var(--red); --ink: var(--white); --mute: var(--white); --line: rgb(255 255 255 / 0.35); --mark: #a82328; --inset: #a82328; }
.panel.slate { --ground: var(--slate); --ink: var(--white); --mute: #d3d4d5; --line: rgb(255 255 255 / 0.25); --mark: #555759; }
.panel .no { display: flex; justify-content: space-between; align-items: flex-start; margin: 0 0 2.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--ink); }
.colon { display: block; width: 0.875rem; height: 0.875rem; background: var(--mark); box-shadow: 0 1.5rem 0 var(--mark); margin-bottom: 1.5rem; }
.panel h2 { font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.05; letter-spacing: -0.015em; }
.panel > p, .panel .note, .panel label small, .panel legend small, .panel ul.rules, .panel .pick, .panel .hint { color: var(--mute); }
/* Two tones per part: the explaining text stands in a box one step along
   the ramp of its ground, as the consent text does on red. */
.panel > h2 + p { margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--inset); color: var(--ink); }
.panel > h2 + p + ul.rules { margin-top: 0; padding: 0 1.25rem 1.125rem 2.5rem; background: var(--inset); color: var(--ink); }
.panel .consent { padding: 1rem 1.25rem; }
.panel input[type="text"], .panel input[type="tel"], .panel input[type="email"], .panel textarea { border-color: transparent; background: var(--field); color: var(--slate); }
/* The country list, drawn like the fields; the two squares on the right mark it as a list. */
select { display: block; width: 100%; margin-top: 0.375rem; padding: 0.75rem 2.5rem 0.75rem 0.875rem; border: 1px solid transparent; border-radius: 0; background-color: var(--white); background-image: linear-gradient(var(--slate), var(--slate)), linear-gradient(var(--slate), var(--slate)); background-repeat: no-repeat; background-size: 6px 6px; background-position: right 1rem top 1.05rem, right 1rem top 1.65rem; color: var(--slate); font: inherit; appearance: none; -webkit-appearance: none; }
select:focus-visible { outline: 2px solid var(--ink, var(--slate)); outline-offset: 2px; }
.two.pc-city { grid-template-columns: 1fr; }
@media (min-width: 36rem) { .two.pc-city { grid-template-columns: 10rem 1fr; } .two.pc-city.city-first { grid-template-columns: 1fr 12rem; } }
.pc-city.city-first .pc { order: 2; }
/* Street and house number side by side, in the order of the country. */
.two.street-row { grid-template-columns: 1fr 7.5rem; }
.two.street-row.number-first { grid-template-columns: 7.5rem 1fr; }
.street-row.number-first .nr { order: -1; }
[hidden] { display: none !important; }
input::placeholder { color: #bebebe; opacity: 1; }
.panel input:focus-visible, .panel textarea:focus-visible { outline-color: var(--ink); }
/* Tiles for days and times: white squares on the ground, the picked one slate. */
.panel .proposals { border-top-color: var(--line); }
.panel .proposal { border-bottom-color: var(--line); }
.panel details.second { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.panel details.second .fields { margin-top: 1rem; }
.panel .second-note { margin: 0 0 0.25rem; padding: 0.75rem 1rem; background: var(--inset); color: var(--ink); }
.panel details.second textarea { min-height: 5rem; }
/* The second headset: shown as soon as a second person is named at the top.
   Two tiles ask where it goes; "another address" opens the fields. Done
   with :has(), no script; a browser without :has() shows everything. */
.second-headset { display: none; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.second-headset h3 { margin: 0 0 0.75rem; font-weight: 900; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.012em; }
.panel .times.pair { grid-template-columns: 1fr 1fr; }
.panel .times.pair .time span { height: auto; min-height: 3.5rem; padding: 0.5rem 0.75rem; text-align: center; line-height: 1.2; }
.second-address { display: none; }
form:has(input[name="name2"]:not(:placeholder-shown)) .second-headset { display: block; }
.second-headset:has(input[value="andere"]:checked) .second-address { display: block; }
/* The second portrait: shown, like the second headset, once a second person is named. */
.second-portrait { display: none; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.second-portrait h3 { margin: 0; font-weight: 900; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.012em; }
form:has(input[name="name2"]:not(:placeholder-shown)) .second-portrait { display: block; }
@supports not selector(:has(*)) { .second-headset { display: block; } .second-address { display: block; } .second-portrait { display: block; } }
/* On a dark ground the plus is white, open or closed: red never sits on petrol. */
.panel.petrol .plus, .panel.petrol details[open] .plus { background: var(--white); }
.panel.petrol .plus::before, .panel.petrol .plus::after { background: var(--slate); }
.panel .time span { border-color: transparent; background: var(--white); color: var(--slate); }
.panel .time input:hover + span { border-color: var(--slate); }
.panel .time input:checked + span { background: var(--pick); border-color: var(--pick); color: var(--pick-ink); }
.panel .cal { gap: 2px; }
.panel .proposal .times { gap: 2px; }
.panel .choice { border-color: transparent; background: var(--white); color: var(--slate); }
.panel .choice:has(input:checked) { background: var(--white); border-color: var(--white); }
.panel .consent { background: var(--inset, #404346); color: var(--white); }
.panel .given { color: var(--white); }
.panel .drop { border-color: var(--line); background: var(--white); }
.panel .drop.enhanced:hover, .panel .drop.enhanced.over { border-color: var(--ink); background: rgb(255 255 255 / 0.5); }
.panel .drop.enhanced .drop-text { color: var(--mute); }
.panel .drop.enhanced .drop-text strong { background: var(--red); color: var(--white); }
.panel .drop input[type="file"] { color: var(--ink); }
.panel ul.chosen li, .panel ul.files, .panel ul.files li { border-color: var(--line); }
.panel ul.chosen small { color: var(--mute); }
.panel ul.chosen button { background: transparent; color: var(--ink); border-color: var(--line); }
.panel ul.chosen button:hover { background: var(--white); border-color: var(--ink); }
button.send { width: 100%; justify-content: space-between; height: 4.5rem; margin-top: 0; padding: 0 2rem; background: var(--red); font-size: 1.375rem; }
button.send:hover { background: var(--slate); }
@media (max-width: 35.999rem) { button.send { padding: 0 1.25rem; } }

/* ---------- Dark mode ---------- */
/* As on the main site: the page turns slate and type white. The coloured
   parts of the form keep their grounds. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: var(--slate); color: var(--white); }
html[data-theme="dark"] header.wrap { background: var(--slate); }
html[data-theme="dark"] header .on-light { display: none; }
html[data-theme="dark"] header .on-dark { display: block; }
html[data-theme="dark"] .ask { border-top-color: #555759; }
html[data-theme="dark"] .ask p, html[data-theme="dark"] dt { color: #d3d4d5; }
html[data-theme="dark"] ul.pdfs a { color: var(--white); border-bottom-color: #555759; }
html[data-theme="dark"] ul.pdfs a:hover { border-bottom-color: var(--white); }
html[data-theme="dark"] .ask-links a:hover { background: var(--white); color: var(--slate); }
html[data-theme="dark"] .message { background: #404346; }
html[data-theme="dark"] button.send:hover { background: var(--white); color: var(--slate); }
html[data-theme="dark"] footer .wrap { border-top-color: #555759; color: #d3d4d5; }
html[data-theme="dark"] footer a:hover { color: var(--white); }
/* The dark card would melt into the dark page: a lighter slate sets it apart. */
html[data-theme="dark"] .panel.slate { --ground: #46494c; --inset: #55585b; --mark: #6e7174; }
/* The first card stays light in dark mode, so its PDF links stay dark. */
html[data-theme="dark"] .look-back ul.pdfs a { color: var(--slate); border-bottom-color: #bebebe; }
html[data-theme="dark"] .look-back ul.pdfs a:hover { border-bottom-color: var(--slate); }
html[data-theme="dark"] .panel input:focus-visible, html[data-theme="dark"] .panel textarea:focus-visible { outline-color: var(--ink); }

/* ---------- The guest's own page ---------- */
.stack { margin-top: 3rem; }
.panel dl { margin-top: 1.25rem; gap: 1rem; }
.panel dt { color: var(--mute); }
.panel dd { color: var(--ink); }
/* One fact per box: a small label and the thing itself, large. Text around
   it stays plain, so a block never has two boxes in a row. */
.panel .fact { margin-top: 1.25rem; padding: 1.125rem 1.25rem 1.25rem; background: var(--inset); color: var(--ink); }
.panel .fact small { display: block; margin-bottom: 0.25rem; font-size: 0.875rem; color: var(--mute); }
.panel .fact strong { display: block; font-weight: 900; font-size: clamp(1.5rem, 4.5vw, 2rem); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.panel p.plain { margin: 1rem 0 0; color: var(--ink); }
.panel h3 { margin: 1.5rem 0 0.5rem; font-weight: 900; font-size: 1.125rem; }
.panel p.edit { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; }
.panel p.edit a { display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1.25rem; background: #dc3338; color: var(--white); font-weight: 900; font-size: 0.9375rem; text-decoration: none; transition: background-color 0.3s; }
.panel p.edit a:hover { background: var(--slate); }
/* Red never stands on petrol: there the button is white. */
.panel.petrol p.edit a { background: var(--white); color: var(--slate); }
.panel.petrol p.edit a:hover { background: var(--slate); color: var(--white); }
.panel p.go { display: grid; gap: 0.5rem; margin: 1.25rem 0 0; }
/* Buttons are red, as on the form. */
.panel p.go a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 0.5rem 1.25rem; background: #dc3338; color: var(--white); font-weight: 900; text-decoration: none; transition: background-color 0.3s; }
.panel p.go a:hover { background: var(--slate); }
.panel.slate p.go a:hover { background: var(--white); color: var(--slate); }
.panel.slate { --inset: #404346; }

/* The host's dashboard (/admin). */
body.admin header .logo { text-decoration: none; }
form.inline { display: inline; margin: 0; }
form.inline button { margin: 0; }
button.quiet { background: transparent; color: inherit; border: 1px solid currentColor; height: 2.75rem; padding: 0 1rem; font-size: 0.9375rem; font-weight: 500; }
button.quiet:hover { background: var(--slate); color: var(--white); border-color: var(--slate); }
header button.quiet { height: 2.25rem; margin-left: 1rem; }
.back { margin: 0 0 1.5rem; }
.back a { color: inherit; }
.lead-admin { margin: 0.75rem 0 0; color: var(--muted); font-weight: 500; }
ul.admin-list { margin: 1rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
ul.admin-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--line); }
ul.admin-list li > a { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; color: inherit; text-decoration: none; }
ul.admin-list li > a:hover span:not(.when) { text-decoration: underline; }
ul.admin-list .when { min-width: 11rem; font-weight: 900; }
ul.admin-list li > .when { flex: 1 1 auto; }
ul.admin-list small { margin-left: auto; color: var(--mute); font-size: 0.8125rem; }
ul.admin-list small.on { color: var(--ink); font-weight: 900; }
ul.admin-list button { margin: 0; height: 2.5rem; padding: 0 1.25rem; font-size: 0.9375rem; background: var(--red); }
.panel h3 { margin: 1.5rem 0 0; font-weight: 900; font-size: 1.125rem; }
.panel .fact + form.inline { display: block; margin-top: 1rem; }
.panel form > button[type="submit"]:not(.quiet), .panel > form.inline button:not(.quiet) { background: var(--red); }
.panel .plain { color: var(--mute); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.admin-actions button:not(.quiet) { background: var(--red); }
form.danger { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
form.danger .choice { background: transparent; border-color: var(--line); color: var(--ink); }
form.danger button { margin-top: 0.75rem; }
code { font: 500 0.875rem/1.5 ui-monospace, monospace; overflow-wrap: anywhere; }
.warn { display: block; color: #dc3338; font-weight: 500; }
.panel.slate .warn { color: #ffb4b6; }
figure.thumb { display: inline-block; width: 12rem; margin: 1rem 1rem 0 0; vertical-align: top; }
figure.thumb img { display: block; width: 100%; height: 12rem; object-fit: cover; background: var(--white); }
figure.thumb figcaption { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--mute); overflow-wrap: anywhere; }
.panel input[type="url"], .panel input[type="password"] { display: block; width: 100%; margin-top: 0.375rem; padding: 0.75rem 0.875rem; border: 1px solid transparent; border-radius: 0; background: var(--field); color: var(--slate); font: inherit; }

/* Closing media shares the form's width and existing footer clearance. */
.closing-video { display: block; width: 100%; height: auto; aspect-ratio: 1; margin-top: 6rem; object-fit: contain; }
@media (min-width: 48rem) { .closing-video { aspect-ratio: 16 / 9; } }