/* 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; }
header.wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.5rem; }
header a { font-size: 0.9375rem; font-weight: 500; text-align: right; text-decoration: none; line-height: 1.25; }
header a span { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 30rem) { header a span { display: block; } }
header img { height: 1.625rem; width: auto; display: block; }
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; }
p.ask { margin: 0.75rem 0 0; font-size: 1.1875rem; line-height: 1.4; color: var(--muted); }
p.ask a { color: var(--slate); font-weight: 500; white-space: nowrap; }
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"], 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; }
details.proposal > summary { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 0; cursor: pointer; list-style: none; }
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; }
.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; }
footer { padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--hair); font-size: 0.875rem; color: var(--muted); }
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 used once, for the consent; the button is slate. */
: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 textarea { border-color: transparent; background: var(--field); color: var(--slate); }
.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 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: grid; }
@supports not selector(:has(*)) { .second-headset { display: block; } .second-address { display: grid; } }
/* 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(--slate); 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(--slate); font-size: 1.375rem; }
button.send:hover { background: #404346; }
@media (max-width: 35.999rem) { button.send { padding: 0 1.25rem; } }