/* Jost, SIL Open Font License. */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 200 600; font-display: swap; src: url('/fonts/jost.woff2') format('woff2'); }
/* NTT DATA Night 2026, "Epilogue", on the agency's look and feel (meetmarcel concept, received 28/09/2026):
   black and white, one cold light (the door ajar), fine capitals spaced wide, a touch of neon blue.
   The champagne and the Cormorant serif of 25/09 are gone (Roland, 28/09: "tout Epilogue").
   The variable names --gold and --gold-2 stay so the pages keep working: they now hold the cold light
   (accent, buttons) and the brightest text. --serif now points to the same sans: the words that matter
   stand out by capitals and spacing, not by a second typeface. Everything is served by the app itself:
   it must run on NTT DATA's servers without reaching any third-party site.
   Design pass of 17/10/2026 (Fable): the dark Epilogue look is the default on every phone (the concept is
   black; the light pages stay one tap away with the ◐ button), the countdown loses its boxes and gains
   large thin numerals, the ticket becomes a white plate under a line of light, the tabs get icons, every
   motion respects prefers-reduced-motion, and no state is carried by colour alone. */
:root {
  --bg: #030303;
  --bg-2: #0b0c0e;
  --bg-3: #15171a;
  --line: #23262a;
  --line-2: #33373d;
  --text: #eef1f4;
  --muted: #9aa1a9;
  --gold: #e9eef3;
  --gold-2: #ffffff;
  --on-gold: #050505;
  --neon: #4cc3ff;
  --glow: 214, 232, 255;
  --bar: 3, 3, 3;
  --danger: #ff8a7a;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: var(--sans);
  --radius: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
/* Light background: the white pages of the concept, by the guest's choice (button ◐) or ?theme=light on a screen.
   Since 17/10/2026 the phone's own setting no longer decides: the evening is black by default. */
:root[data-theme="light"] {
  --bg: #f4f5f6; --bg-2: #ffffff; --bg-3: #eceef0; --line: #dcdfe3; --line-2: #c9cdd3;
  --text: #0a0a0a; --muted: #5a6068; --gold: #0a0a0a; --gold-2: #000000; --on-gold: #ffffff; --neon: #0072bc; --glow: 0, 0, 0; --bar: 244, 245, 246; --danger: #b3261e;
  color-scheme: light;
}
.theme-btn { position: absolute; top: calc(20px + var(--top-room)); left: max(12px, env(safe-area-inset-left)); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: .78rem; color: var(--muted); cursor: pointer; min-height: 26px; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 350; font-size: 16px; line-height: 1.55; letter-spacing: .01em; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; min-height: 100dvh; }
a { color: var(--gold-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }

/* Header. The room above it (20/10/2026, Roland on his iPhone: the ◐ and EN/FR/NL buttons sat right under the
   status bar and the Dynamic Island): the status bar's own height, plus 20 px more when there is one. On a phone
   or a computer without an overlaid status bar (safe area 0) nothing moves; the slit, the buttons and the logo keep
   their distances to each other, the whole header just starts lower under a translucent status bar. */
:root { --top-room: calc(env(safe-area-inset-top, 0px) + min(env(safe-area-inset-top, 0px), 20px)); }
.top { position: relative; overflow: hidden; text-align: center; padding: calc(56px + var(--top-room)) max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left)); background: radial-gradient(ellipse 80% 60% at 50% -15%, rgba(var(--glow), .16), transparent 70%); }
/* The door ajar of the concept: a thin slit of cold light at the top, and its beam falling on the title. */
.top::before { content: ""; position: absolute; top: calc(8px + var(--top-room)); left: 50%; width: 6px; height: 40px; margin-left: -3px; border-radius: 1px; background: linear-gradient(#fff, rgba(var(--glow), .85)); box-shadow: 0 0 18px 4px rgba(var(--glow), .45), 0 0 70px 14px rgba(var(--glow), .14); pointer-events: none; animation: slit 7s ease-in-out infinite; }
.top::after { content: ""; position: absolute; top: calc(46px + var(--top-room)); bottom: 0; left: 50%; width: 420px; margin-left: -210px; background: linear-gradient(rgba(var(--glow), .17), transparent 96%); clip-path: polygon(49.2% 0, 50.8% 0, 100% 100%, 0 100%); pointer-events: none; }
@keyframes slit { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.top > *:not(.theme-btn):not(.langs) { position: relative; z-index: 1; }
.top > .theme-btn, .top > .langs { z-index: 2; }
.top .brand { font-size: .66rem; letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.top h1 { font-weight: 200; font-size: clamp(2rem, 9vw, 2.5rem); letter-spacing: .44em; text-indent: .44em; text-transform: uppercase; margin: 8px 0 4px; color: var(--gold-2); text-shadow: 0 0 28px rgba(var(--glow), .28); }
.top .tag { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin: 0 auto; max-width: 30em; line-height: 1.8; }
:root[data-theme="light"] .top::before, :root[data-theme="light"] .top::after { display: none; }
.langs { position: absolute; top: calc(20px + var(--top-room)); right: max(12px, env(safe-area-inset-right)); display: flex; gap: 4px; }
.langs button { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: .78rem; color: var(--muted); cursor: pointer; min-height: 26px; }
.langs button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-2); font-weight: 500; }

/* Tabs at the bottom, within thumb reach: an icon and a word each; the active one is white, bold, with the neon bar. */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: rgba(var(--bar), .86); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 10; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; background: none; border: 0; padding: 9px 2px 10px; color: var(--muted); font-size: .68rem; letter-spacing: .06em; line-height: 1.2; cursor: pointer; border-top: 2px solid transparent; margin-top: -1px; position: relative; min-height: 58px; transition: color .2s var(--ease); }
.tabs .tab-i { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.tabs .tab-l { display: block; text-align: center; }
/* "Innovation Box" wraps on two lines on a small phone: "Innovation" alone there (Roland, 23/10/2026). */
.tabs .tab-short { display: none; }
@media (max-width: 430px) { .tabs .tab-long { display: none; } .tabs .tab-short { display: block; } }
.tabs .tab-n { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-size: .66rem; font-weight: 600; letter-spacing: 0; line-height: 17px; text-align: center; }
.tabs button[aria-selected="true"] { color: var(--gold-2); border-top-color: var(--neon); font-weight: 500; }
.tabs button[aria-selected="true"] .tab-i { stroke-width: 2; transform: translateY(-1px); }
/* Never a frame around a tab (Roland, 21/10/2026): the keyboard focus shows the same neon bar on top of the tab. */
.tabs button:focus, .tabs button:focus-visible { outline: none; }
.tabs button:focus-visible { border-top-color: var(--neon); }

/* Cards and text */
.card { background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 38%), var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; margin: 14px 0; }
:root[data-theme="light"] .card { background: var(--bg-2); }
h2 { font-weight: 400; font-size: 1.05rem; letter-spacing: .3em; text-transform: uppercase; line-height: 1.5; margin: 0 0 12px; color: var(--gold-2); }
h3 { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight: 400; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* Programme */
.prog { list-style: none; margin: 0; padding: 0; }
.prog li { display: flex; gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.prog li:last-child { border-bottom: 0; }
.prog li:first-child { padding-top: 4px; }
.prog .t { font-variant-numeric: tabular-nums; color: var(--gold-2); min-width: 52px; font-weight: 400; letter-spacing: .04em; }
.prog .l { flex: 1; font-family: var(--serif); font-size: 1.1rem; font-weight: 300; }
.prog .badge { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--gold); color: var(--gold-2); border-radius: 999px; padding: 1px 9px; }
.prog li.is-now .l { color: var(--gold-2); font-weight: 400; }
.facts { display: grid; gap: 14px; margin: 0; }
.facts div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.facts dt { color: var(--muted); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; padding-top: .2em; }
.facts dd { margin: 0; }

/* Forms */
label { display: block; font-size: .85rem; color: var(--muted); margin: 12px 0 4px; }
input[type=text], textarea { width: 100%; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; color: var(--text); }
input[type=text]:focus, textarea:focus { outline: 1px solid var(--neon); outline-offset: 1px; border-color: var(--neon); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--neon); flex: none; }
textarea.line { font-size: 1.1rem; font-weight: 300; min-height: 96px; resize: vertical; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--gold); color: var(--on-gold); border: 0; border-radius: 3px; padding: 14px 26px; min-height: 46px; font-weight: 500; font-size: .76rem; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 24px rgba(var(--glow), .16); transition: transform .15s var(--ease), box-shadow .25s var(--ease), background .2s; }
.btn:active { transform: scale(.98); box-shadow: 0 0 10px rgba(var(--glow), .1); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn.ghost { background: none; color: var(--gold-2); border: 1px solid var(--line-2); box-shadow: none; }
.btn.ghost:active { background: var(--bg-3); }
.row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; flex-wrap: wrap; }
.err { color: var(--danger); font-size: .9rem; min-height: 1.2em; margin: 8px 0 0; }

/* The book */
.book { font-family: var(--serif); }
.book blockquote { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.15rem; }
.book blockquote:last-child { border-bottom: 0; }
.book cite { display: block; font-style: normal; font-family: var(--sans); font-size: .8rem; color: var(--muted); margin-top: 4px; }
.status { display: inline-block; font-family: var(--sans); font-size: .75rem; margin-top: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.status.approved { border-color: var(--gold); color: var(--gold-2); }

/* Feed */
.post { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); margin: 14px 0; overflow: hidden; }
.post img { display: block; width: 100%; height: auto; background: var(--bg-3); }
.post .body { padding: 12px 14px 14px; }
.post .who { font-weight: 500; }
.post .when { color: var(--muted); font-size: .8rem; margin-left: 6px; font-weight: 400; }
.post p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.reacts button { background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; min-height: 34px; cursor: pointer; font-size: .9rem; }
.reacts button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-2); font-weight: 600; }
.replies { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.replies div { font-size: .92rem; padding: 3px 0; }
.replies b { font-weight: 500; }
/* A reply of mine waiting for a moderator (25/10/2026): dashed, the words below say why (never a colour alone). */
.replies .reply-waiting { border-left: 2px dashed var(--line-2); padding-left: 8px; opacity: .85; }
.replies .reply-waiting .small { display: block; }
.reply-form { display: flex; gap: 8px; margin-top: 8px; }
.reply-form input { flex: 1; min-width: 0; }
.reply-form .btn { padding-left: 16px; padding-right: 16px; }
.file-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; } /* not the form label's margins: it sits level with the button beside it */
.file-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.preview { margin-top: 10px; max-width: 160px; border-radius: 10px; display: block; }
/* Photos tab (25/10/2026, Roland): a shorter form so the wall of photos comes up sooner, and "Add a photo" and "Post"
   side by side on one line, same width and height, down to a 320 px phone in EN, FR and NL. The tagline of the header
   gives way on this tab only (it already goes on every tab once the doors open). */
body:has(#feed:not([hidden])) .top .tag { display: none; }
#postCard { padding: 14px 14px 12px; margin: 10px 0; }
#postCard h2 { margin-bottom: 2px; }
#postCard label:not(.file-label) { margin: 8px 0 3px; }
#postCard input[type=text], #postCard textarea { padding: 10px 12px; }
#postCard textarea { min-height: 46px; max-height: 10em; resize: vertical; field-sizing: content; }
.post-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.post-actions .btn { width: 100%; min-height: 46px; padding: 11px 6px; letter-spacing: .1em; text-indent: .1em; font-size: .7rem; line-height: 1.3; text-align: center; }
/* A 320 px phone: "Ajouter une photo" and "Foto toevoegen" keep one line, the shorter "Post" gives up a little room. */
@media (max-width: 359px) {
  .post-actions { grid-template-columns: 3fr 2fr; gap: 8px; }
  .post-actions .btn { padding: 11px 4px; letter-spacing: .06em; text-indent: .06em; font-size: .68rem; }
}
#postCard .preview { margin-top: 8px; }
#pErr:empty { min-height: 0; margin: 0; }

.banner { position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; background: #0d1b26; color: var(--gold-2); text-align: center; padding: 6px; font-size: .85rem; z-index: 20; }
/* Innovation Box */
.sr-pass { font-family: ui-monospace, Consolas, monospace; font-size: 2.6rem; letter-spacing: .25em; text-align: center; color: var(--gold-2); margin: 8px 0; }
.sr-clock { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--gold-2); }
.sr-clock.big { display: block; font-size: 4.2rem; font-weight: 200; line-height: 1; letter-spacing: .02em; text-align: center; margin: 8px 0 10px; }
.sr-keys { list-style: none; padding: 0; margin: 0 0 12px; }
.sr-keys li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.sr-mark { display: inline-block; width: 1.6em; color: var(--gold); font-weight: 500; }

/* NTT DATA logo: one official file, painted white on dark and NTT blue (#0072BC) on light. */
:root { --logo: #ffffff; }
:root[data-theme="light"] { --logo: #0072bc; }
.ntt-logo { width: 150px; height: 31px; margin: 0 auto 10px; background: var(--logo);
  -webkit-mask: url(/logo.svg) center / contain no-repeat; mask: url(/logo.svg) center / contain no-repeat; }
/* Partners, as on the Golf Day (Roland, 25/09: "they moved among themselves", not a scrolling strip).
   Logos on white boxes (guidelines forbid stretching a logo or a coloured ground), a slow shared float,
   and every 30 s the order moves on with a glide. The name stands in until a logo is uploaded. */
.br-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.br-cell { flex: none; animation: float 6s ease-in-out infinite; }
.br-cell:nth-child(5n+2) { animation-delay: -1.2s; }
.br-cell:nth-child(5n+3) { animation-delay: -2.4s; }
.br-cell:nth-child(5n+4) { animation-delay: -3.6s; }
.br-cell:nth-child(5n+5) { animation-delay: -4.8s; }
.brbox { display: inline-flex; align-items: center; justify-content: center; width: 140px; height: 54px; background: #fff; border: 1px solid #e2e5e9; border-radius: 8px; padding: 6px 10px; overflow: hidden; text-decoration: none; color: #111; flex: none; transition: transform .2s ease; }
.brbox:active { transform: scale(.96); }
.brbox:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.brbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.brbox .brname { font-family: var(--serif); font-size: .85rem; text-align: center; line-height: 1.1; }
.brand-card h3 { text-align: center; }
/* The yes in one tap under the selfie (17/10/2026): the main button full width, "No thanks" under it. */
.face-ask { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 14px 0 6px; }
.face-ask .face-yes { width: 100%; text-transform: none; letter-spacing: .02em; text-indent: 0; font-size: .95rem; }
.face-ask .linkish { min-height: 44px; }
/* The Platinum partners a size above the others (Roland, 17/10/2026), two per row on a phone. */
.br-grid[data-group="t-Platinum"] .br-cell { width: calc(50% - 5px); max-width: 180px; }
.br-grid[data-group="t-Platinum"] .brbox { width: 100%; height: 70px; padding: 8px 14px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .br-cell { animation: none; } .brbox { transition: none; } }

/* Countdown: large thin numerals, a hairline between the units, no boxes (17/10/2026). Used in the header
   of the code screen, at the top of the Ticket tab (.when-cd) and on the big screen (.big-cd). */
.countdown { margin: 18px auto 4px; max-width: 460px; }
.cd-units { display: flex; justify-content: center; align-items: flex-start; }
.cd-unit { position: relative; min-width: 0; padding: 2px 14px 0; border: 0; background: none; text-align: center; }
.cd-unit + .cd-unit::before { content: ""; position: absolute; left: 0; top: 10%; height: 62%; width: 1px; background: linear-gradient(transparent, var(--line-2), transparent); }
.cd-unit b { display: block; font-family: var(--serif); font-weight: 200; font-size: 2.6rem; line-height: 1; color: var(--gold-2); font-variant-numeric: tabular-nums; letter-spacing: -.01em; animation: cd-in .6s var(--ease) both; }
.cd-unit span { display: block; font-size: .6rem; letter-spacing: .28em; text-indent: .28em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.cd-sub { margin-top: 10px; font-size: .7rem; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; color: var(--muted); }
.cd-line { font-family: var(--serif); font-size: 1.3rem; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; font-weight: 300; color: var(--gold-2); margin-bottom: 8px; }
@keyframes cd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The people of NTT DATA */
.face-today { max-width: 420px; margin: 14px auto 0; text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--bg-2); }
.ft-k { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ft-row { display: flex; gap: 12px; align-items: flex-start; }
.ft-row b { display: block; }
.ft-row span { display: block; font-size: .8rem; color: var(--muted); }
.ft-row q { display: block; font-family: var(--serif); font-style: italic; font-size: .95rem; margin-top: 4px; quotes: '“' '”'; }
.av, .av-lg { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.av-lg { width: 54px; height: 54px; }
.av-i { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-3); color: var(--gold-2); border: 1px solid var(--line); font-weight: 300; font-size: .85rem; letter-spacing: .16em; text-indent: .16em; }
/* .ft-row span (the person's role) turned the initials into a block, pinned top left and grey. */
.ft-row .av-i { display: inline-flex; font-size: .85rem; color: var(--gold-2); }
.people .person { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.people .person:last-child { border-bottom: 0; }
.person .pb { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.person .cap { font-size: .8rem; color: var(--gold-2); }
.person .now-at { color: var(--gold-2); font-weight: 500; }
.person .now-at::before { content: '● '; color: #0072bc; }
.person .met { font-size: .75rem; border: 1px solid var(--gold); color: var(--gold-2); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.demo-tag { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0; }
.stamp { text-align: center; border: 1px dashed var(--line); border-radius: 12px; padding: 8px 2px; }
.stamp b { display: block; font-size: 1.3rem; color: var(--muted); }
.stamp span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stamp.on { border-style: solid; border-color: var(--gold); }
.stamp.on b, .stamp.on span { color: var(--gold-2); }
.sel { width: 100%; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; color: var(--text); }
.page2030 .pg-label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.pg-text p { font-family: var(--serif); font-size: 1.1rem; line-height: 1.6; margin: 0 0 8px; }
.pg-author { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.pg-author b, .pg-author span { display: block; }
.conc-log { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.conc-log .msg { padding: 8px 12px; border-radius: 12px; max-width: 88%; font-size: .95rem; white-space: pre-wrap; }
.conc-log .me { align-self: flex-end; background: var(--gold); color: var(--on-gold); }
.conc-log .bot { align-self: flex-start; background: var(--bg-3); border: 1px solid var(--line); }
.guard { font-size: .72rem; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.table-out { margin-top: 10px; }
.table-hit { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--gold); border-radius: var(--radius); margin-top: 10px; text-align: left; }
.table-hit b { font-family: var(--serif); font-size: 1.6rem; color: var(--gold-2); font-weight: 400; letter-spacing: .08em; }
.menu .course { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.menu .course span { color: var(--muted); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; padding-top: .3em; }
.menu .course b { font-family: var(--serif); font-weight: 300; font-size: 1.05rem; text-align: right; }

.page2030.example { border: 1px dashed var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.page2030.example .pg-text p { font-size: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .85rem; color: var(--text); cursor: pointer; text-align: left; }

/* The guest */
.me-name { font-family: var(--serif); font-size: 1.4rem; margin: 0; color: var(--gold-2); }
.vip-tag { display: inline-block; margin-top: 8px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--gold); color: var(--gold-2); border-radius: 999px; padding: 2px 10px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.q-a { border-left: 3px solid var(--gold); padding-left: 10px; font-family: var(--serif); }

/* The surprise DJ: the reveal fills the screen */
.dj-mystery b, .dj-on b { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--gold-2); }
.reveal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px;
  background: radial-gradient(circle at 50% 40%, rgba(var(--glow), .45), rgba(5,5,5,.96) 60%); animation: rv-in .6s ease-out; }
.rv-in { max-width: 460px; color: #f4efe6; }
.rv-k { letter-spacing: .4em; text-transform: uppercase; font-size: .8rem; color: #d6b97c; }
.rv-name { font-family: var(--serif); font-size: 3.2rem; line-height: 1.1; color: var(--gold-2); margin: 12px 0; animation: rv-pulse 1.6s ease-in-out infinite; }
@keyframes rv-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes rv-pulse { 0%, 100% { text-shadow: 0 0 0 rgba(241,223,178,0); } 50% { text-shadow: 0 0 28px rgba(241,223,178,.7); } }
@media (prefers-reduced-motion: reduce) { .reveal, .rv-name { animation: none; } }

/* Journey into the future */
.journey h2 { margin-top: 6px; }
.j-body { font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; }
.chat-to { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.chat-item { display: block; width: 100%; text-align: left; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 8px; color: var(--text); cursor: pointer; font: inherit; }
.chat-item span.small { display: block; margin-top: 2px; }
/* The two "New message" buttons of a person of NTT DATA (21/10/2026): one under the other, each on one line. */
.chat-new { display: grid; gap: 8px; margin-bottom: 12px; }
.my-guests { margin-bottom: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.my-guests > p { margin: 0 0 8px; }
.chat-new .btn { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-msgs { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.chat-msg { max-width: 85%; align-self: flex-start; background: var(--bg-3); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 9px 13px; white-space: pre-wrap; }
.chat-msg.mine { align-self: flex-end; border-color: var(--gold); border-radius: 14px 14px 4px 14px; }
.chat-meta { font-size: .72rem; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
.linkish { background: none; border: 0; color: var(--gold-2); cursor: pointer; padding: 0 2px; font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; min-height: 32px; }
.small-btn { padding: 6px 12px; font-size: .8rem; margin-top: 6px; }
#chatCompose textarea, #chatReply, #chatWho input { width: 100%; box-sizing: border-box; margin: 6px 0; }
#chatReplyForm { align-items: flex-end; gap: 8px; }
.poi-key { display: inline-block; margin-right: 10px; white-space: nowrap; }
.poi-key b { display: inline-block; min-width: 1.6em; text-align: center; border: 1px solid var(--text); border-radius: 4px; padding: 0 4px; font-size: .75em; }
.poi-note { color: var(--muted); font-style: italic; }
.map-hit { cursor: pointer; }
.find-map { width: 100%; height: auto; display: block; margin: 8px 0 4px; }
.j-dots { display: flex; gap: 6px; margin: 4px 0 6px; }
.j-dots span { width: 26px; height: 4px; border-radius: 2px; background: var(--line); }
.j-dots span.on { background: var(--gold); height: 7px; margin-top: -1.5px; }
[hidden] { display: none !important; }
/* Room screens (map, big screen): a discreet dark or light switch; ?theme=light|dark also works. */
.screen-theme { position: fixed; top: 10px; left: 10px; z-index: 70; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); cursor: pointer; opacity: .35; }
.screen-theme:hover, .screen-theme:focus { opacity: 1; }
.badge { display: inline-block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--gold); color: var(--gold-2); border-radius: 999px; padding: 0 8px; }

/* Ticket and Innovation Box pass (01/10/2026): a QR code, always dark on white so every camera reads it.
   17/10/2026: a white plate with a soft shadow under a line of light, the name in spaced capitals. */
.ticket { position: relative; text-align: center; padding-top: 24px; }
.ticket::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--glow), .75), transparent); }
:root[data-theme="light"] .ticket::before { display: none; }
.ticket-qr svg { display: block; width: min(236px, 64vw); height: auto; margin: 6px auto 0; padding: 10px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 14px 44px rgba(0, 0, 0, .45); }
:root[data-theme="light"] .ticket-qr svg { box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(0, 0, 0, .08); }
.ticket #ticketText { font-size: 1.1rem; letter-spacing: .16em; text-indent: .16em; text-transform: uppercase; font-weight: 400; color: var(--gold-2); margin: 18px 0 4px; }
.ticket #ticketMore { margin: 6px auto 0; max-width: 30em; line-height: 1.5; }

/* "Keep it simple" redesign (06/10/2026): the guest's selfie in the ticket tab, the Who is Who search.
   17/10/2026: the portrait and the words side by side, the two buttons on one line underneath, the consent in its own frame. */
.selfie-row { display: flex; gap: 16px; align-items: center; }
.selfie-row .selfie-intro { margin: 0; }
.selfie-frame { flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line-2); background: var(--bg-3); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(var(--glow), .04); }
.selfie-frame img { width: 100%; height: 100%; object-fit: cover; }
.selfie-none { width: 100%; height: 100%; border: 0; font-size: 1.3rem; }
.selfie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
/* Two words of French ("Choisir une photo") must fit half the card on a 390 px phone: tighter spacing (design pass, 20/10/2026). */
.selfie-actions .btn { width: 100%; padding: 13px 6px; letter-spacing: .1em; text-indent: .1em; font-size: .7rem; }
.selfie-actions .linkish { grid-column: 1 / -1; justify-self: start; }
/* On a computer the camera button is hidden (index.js): the one remaining button takes the whole line instead of half of it. */
.selfie-actions #selfieCamLabel[hidden] + .file-label { grid-column: 1 / -1; }
#faceRow:not([hidden]) { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg-3); align-items: flex-start; }
#faceRow input { margin-top: 2px; }
#faceInfo { margin: 8px 0 0; line-height: 1.5; }
#faceMsg:empty, #selfieMsg:empty { display: none; }
#faceMsg, #selfieMsg { margin: 10px 0 0; }
.search { width: 100%; margin: 6px 0 4px; }
input[type=search], input[type=email] { background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; font: inherit; }
input[type=search]:focus, input[type=email]:focus { outline: 1px solid var(--neon); outline-offset: 1px; border-color: var(--neon); }
.ticket .for-two { display: inline-block; margin-top: 6px; color: var(--muted); letter-spacing: .14em; text-indent: .14em; text-transform: uppercase; font-size: .72rem; font-weight: 400; }
input[type=email] { width: 100%; }

/* A post waiting for approval (06/10/2026): only its author sees it, dimmed with a dashed border. */
.post.waiting { opacity: .7; border-style: dashed; }

/* The Innovation Box tab (06/10/2026): invitation, then the countdown. */
.sr-invite { font-size: 1.2rem; line-height: 1.5; font-weight: 300; margin: 0; }
.sr-timer { text-align: center; }
.sr-two { color: var(--gold-2); font-weight: 500; }
.sr-two::before { content: '⏱ '; }
.sr-end { font-size: 1.1rem; line-height: 1.5; }

/* Face first (Roland, 17/10/2026): with face recognition on, the selfie card is the way in, under the line of
   light, the portrait larger; the QR code is a small backup (a button, a tap enlarges it on a white page). */
#selfieCard.face-first, .sr-face { position: relative; }
#selfieCard.face-first::before, .sr-face::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--glow), .75), transparent); }
:root[data-theme="light"] #selfieCard.face-first::before, :root[data-theme="light"] .sr-face::before { display: none; }
.face-first .selfie-frame, .sr-portrait { width: 116px; height: 116px; }
.face-first .selfie-none, .sr-portrait .selfie-none { font-size: 1.7rem; }
.face-first .selfie-intro { color: var(--text); font-size: .95rem; line-height: 1.5; }
.face-step { margin: 14px 0 0; font-size: .95rem; font-weight: 500; color: var(--gold-2); line-height: 1.45; }
.face-step:empty { display: none; }
.face-step.ready { border: 1px solid var(--gold); border-radius: var(--radius); padding: 10px 14px; }
.qr-btn { display: block; margin: 0 auto; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: center; border-radius: 16px; -webkit-tap-highlight-color: transparent; }
.qr-btn .ticket-qr { display: block; }
.qr-tap { display: block; margin-top: 8px; font-size: .66rem; letter-spacing: .18em; text-indent: .18em; text-transform: uppercase; color: var(--muted); }
.ticket.backup { display: grid; grid-template-columns: 96px 1fr; column-gap: 16px; text-align: left; padding-top: 18px; }
.ticket.backup::before { display: none; }
.ticket.backup h3 { grid-column: 1 / -1; margin-bottom: 8px; }
.ticket.backup .qr-btn { grid-row: 2 / span 2; margin: 0; align-self: start; width: 96px; border-radius: 10px; }
.ticket.backup .ticket-qr svg { width: 96px; margin: 0; padding: 6px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .35); }
.ticket.backup .qr-tap { margin-top: 6px; font-size: .64rem; letter-spacing: .1em; text-indent: 0; }
.ticket.backup > p { grid-column: 2; margin: 0; }
.ticket.backup #ticketText { font-size: .95rem; letter-spacing: .1em; text-indent: 0; align-self: end; }
.ticket.backup #ticketMore { margin: 4px 0 0; max-width: none; align-self: start; }
.ticket.backup > p:only-of-type { grid-row: 2 / span 2; align-self: center; }
.sr-face-row { display: flex; gap: 16px; align-items: center; }
.sr-face-words { flex: 1; min-width: 0; }
.sr-face-words p { margin: 0; font-size: 1.05rem; line-height: 1.5; font-weight: 300; }
.sr-face-words .btn { margin-top: 10px; padding: 11px 16px; }
/* The code full screen: white page, dark words, the code at least as large as the former ticket (236 px). */
.qr-big { position: fixed; inset: 0; z-index: 60; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; padding: 12px; overflow-y: auto; } /* no fade: pure white at once */
.qr-big-in { text-align: center; max-width: 720px; width: 100%; }
.qr-big-name { font-size: 1rem; letter-spacing: .16em; text-indent: .16em; text-transform: uppercase; font-weight: 500; margin: 0 0 14px; color: #0a0a0a; }
/* 20/10/2026: as large as the screen allows (pure black on pure white, the code's own quiet zone kept). */
.qr-big-code svg { display: block; width: min(96vw, 66vh); height: auto; margin: 0 auto; }
.qr-big-code svg rect, .qr-big-code svg path { shape-rendering: crispEdges; }
.qr-big-bright { color: #000; font-weight: 500; margin: -8px auto 18px; max-width: 26em; line-height: 1.45; }
.qr-big-hint { color: #3d434a; margin: 16px auto 20px; max-width: 26em; line-height: 1.5; }
.qr-big-close { background: #0a0a0a; color: #fff; box-shadow: none; min-width: 180px; }
body.qr-open { overflow: hidden; }
@keyframes qr-in { from { opacity: 0; } to { opacity: 1; } }

/* The contest pill (Roland, 17/10/2026): on every tab while the contest is open, neon border, trophy, a slow
   sheen (stopped by the reduced-motion rule below); calm, outlined, with a check mark once the entry is complete. */
.ebc-pill { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 0; padding: 11px 14px 11px 16px; min-height: 56px; background: linear-gradient(90deg, rgba(76, 195, 255, .16), rgba(76, 195, 255, .03)), var(--bg-2); border: 1px solid var(--neon); border-radius: 999px; color: var(--text); text-align: left; cursor: pointer; position: relative; overflow: hidden; font: inherit; }
.ebc-pill::after { content: ""; position: absolute; top: -40%; bottom: -40%; width: 26%; left: -35%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); transform: skewX(-18deg); animation: sheen 3.4s var(--ease) infinite; pointer-events: none; }
.ebc-pill.done { border-color: var(--line-2); background: var(--bg-2); }
.ebc-pill.done::after { display: none; }
.ebc-pill .pill-i { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--neon); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ebc-pill.done .pill-i { stroke: var(--gold-2); }
.ebc-pill .pill-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ebc-pill .pill-t b { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: var(--gold-2); }
.ebc-pill .pill-t span { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.ebc-pill .pill-c { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sheen { 0% { left: -35%; } 55%, 100% { left: 115%; } }
/* The destinations of the contest: a row of cards to swipe, photo, vendor logo on a white plate, place and city.
   A photo the server does not serve (no-pic) gives way to the city name on a dark gradient. */
.contest-note { font-size: .8rem; color: var(--muted); margin: 0 0 4px; }
.ebc-k { margin: 16px 0 8px; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.ebc-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 2px 18px 10px; scroll-padding: 0 18px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ebc-row:focus-visible { outline-offset: -2px; }
.ebc-card { flex: none; width: 236px; margin: 0; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-3); }
.ebc-pic { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #1b2b3b, #0b0c0e); }
.ebc-pic .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.ebc-pic.no-pic .photo { display: none; }
.ebc-pic .ebc-city { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 1.3rem; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; color: #eef1f4; font-weight: 300; }
.ebc-pic.no-pic .ebc-city { display: flex; }
.ebc-logo { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 34px; padding: 5px 8px; background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.ebc-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.ebc-logo .ntt { width: 100%; height: 100%; background: #0072bc; -webkit-mask: url(/logo.svg) center / contain no-repeat; mask: url(/logo.svg) center / contain no-repeat; }
.ebc-logo .ebc-vendor { font-size: .6rem; color: #111; text-align: center; line-height: 1.1; font-weight: 500; }
.ebc-card figcaption { padding: 10px 12px 12px; }
.ebc-card figcaption b { display: block; font-weight: 500; font-size: .92rem; line-height: 1.3; color: var(--text); }
.ebc-card figcaption span { display: block; font-size: .74rem; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }
.ebc-credits { margin-top: 6px; font-size: .75rem; color: var(--muted); }
.ebc-credits summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.ebc-credits ul { margin: 2px 0 0; padding-left: 18px; }
.ebc-credits li { margin: 3px 0; line-height: 1.4; }
.ebc-credits a { color: var(--muted); }

/* An open conversation (Roland, 17/10/2026: "everything moves, not only the little chat"): a full-height panel
   over the page, the messages in their own scroll area, the field at the bottom, the page behind locked. */
.chat-sheet { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--bg); height: 100vh; height: 100dvh; padding: calc(8px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); overscroll-behavior: contain; }
.chat-sheet > * { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
.chat-sheet .sheet-head { flex: none; padding: 4px 2px 8px; border-bottom: 1px solid var(--line); }
.chat-sheet .sheet-head p { margin: 2px 0 0; }
.chat-sheet .chat-msgs { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px 2px; margin: 0; }
.chat-sheet .sheet-form { flex: none; padding: 8px 0 calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.chat-sheet .sheet-form textarea { margin: 0; }
.chat-sheet .sheet-form .row { margin-top: 8px; flex-wrap: nowrap; }
body.sheet-open { overflow: hidden; }
body.sheet-open .tabs, body.sheet-open .newpill, body.sheet-open .ebc-pill { visibility: hidden; }


/* "New version ready" pill (06/10/2026, as on the Golf Day): above the tabs, never over the ticket's QR. */
.newpill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(64px + env(safe-area-inset-bottom) + 14px); z-index: 20;
  border: 1px solid var(--gold); border-radius: 999px; background: var(--gold); color: var(--on-gold); padding: 10px 18px; min-height: 44px;
  font: inherit; font-size: .7rem; letter-spacing: .1em; white-space: nowrap; max-width: 94vw; text-transform: uppercase; box-shadow: 0 0 22px rgba(var(--glow), .3); cursor: pointer; }
.newpill::before { content: '↻ '; }
.newpill[hidden] { display: none; }
.newpill.no-tabs { bottom: calc(env(safe-area-inset-bottom) + 18px); }

/* A checkbox line that the hidden attribute can still hide (06/10/2026). */
.check-row:not([hidden]) { display: flex; gap: 10px; align-items: center; color: var(--text); margin-top: 10px; }

/* When and where in the Ticket tab (17/10/2026): days, hours, minutes until 18:30 in Brussels, then the
   date, the time and the place, large. The header countdown gives way to it once the app is open.
   Design pass: the first screen is a hero without a frame, the numerals the largest thing on the page. */
body.unlocked .top #countdown { display: none; }
/* 20/10/2026 (Roland): the When card sits in the header, under EPILOGUE, on the Ticket view only; the tagline follows it.
   Once the doors open (body.started) the countdowns, the date and the tagline go: logo, EPILOGUE, then the pill. */
body:not(.tab-ticket) .top #whenCard, body:not(.unlocked) .top #whenCard { display: none; }
.top .when { padding: 4px 0 6px; margin: 0; }
.top .when .when-date { margin-top: 2px; }
.top .when + .tag { margin-top: 10px; }
body.started .top #countdown, body.started .top #whenCard, body.started .top .tag { display: none; }
.when { text-align: center; background: none; border: 0; padding: 2px 0 14px; margin: 0 0 6px; }
.when-cd { margin: 4px auto 14px; }
.when-cd .cd-unit { padding: 2px 16px 0; }
.when-cd .cd-unit b { font-size: clamp(3.4rem, 16vw, 4.6rem); }
.when-cd .cd-unit span { font-size: .66rem; margin-top: 10px; }
.when-date { font-size: .98rem; letter-spacing: .1em; text-transform: uppercase; margin: 12px 0 0; color: var(--text); font-weight: 300; }
.when-date b { display: block; color: var(--gold-2); font-weight: 300; font-size: 1.9rem; letter-spacing: .1em; text-indent: .1em; margin-top: 4px; line-height: 1.2; }
.when-place { margin: 10px 0 0; line-height: 1.55; color: var(--muted); }
.when-place b { color: var(--text); font-weight: 400; letter-spacing: .06em; }
.when-place a { display: inline-block; margin-top: 8px; font-size: .72rem; letter-spacing: .22em; text-indent: .22em; text-transform: uppercase; color: var(--gold-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 16px; text-decoration: none; min-height: 32px; }
/* Test version (17/10/2026): one tab only, the tab bar is not needed. Launch version (20/10/2026): the same. */
.tabs.single, body.launch:not(.launch-chat) .tabs { display: none; }
body.launch .ebc-pill { display: none; }
.install-steps { margin: 6px 0 10px; padding-left: 1.2em; line-height: 1.55; }
.install-steps li { margin: 6px 0; }
/* Lot 2 (17/10/2026): partners by level, the contest card, late questions, the Innovation Box's hours. */
.br-tier { margin: 14px 0 0; text-align: center; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.contest-prize { font-size: 1.05rem; line-height: 1.5; color: var(--gold-2); margin: 4px 0 10px; font-weight: 300; }
.contest-q { margin: 18px 0 4px; font-weight: 500; letter-spacing: .02em; }
.contest-vendors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
.contest-thanks { font-size: 1.05rem; line-height: 1.6; margin: 10px 0 0; }
.contest-code { border: 1px solid var(--neon); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; }
.late-tag { display: inline-block; border: 2px solid var(--danger); border-radius: 999px; padding: 0 8px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.sr-hours { color: var(--gold-2); letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; margin: 0 0 10px; }
.sr-own { white-space: pre-line; }

/* The code screen (gate): a welcome worth the evening. */
#gate { text-align: center; padding: 26px 18px 24px; }
#gate h2 { font-size: .9rem; }
#gate #codeInput { text-align: center; font-size: 1.1rem; letter-spacing: .12em; margin-top: 14px; }
#gate .row { justify-content: center; }

/* Motion: everything that moves stops for whoever asked their phone for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Colleague chat (20/10/2026): what a conversation is, in words above its name; the picker's list scrolls. */
.chat-item .chat-kind { display: block; letter-spacing: .14em; text-transform: uppercase; font-size: .68rem; }
.pick-list .check-row { padding: 10px 2px; border-bottom: 1px solid var(--line); min-height: 44px; }
/* The keyboard up (20/10/2026): no tab bar above it while a text field has the focus. */
body.typing .tabs { display: none !important; }
/* Swipe between tabs (20/10/2026): the browser's own horizontal swipe (history back in Chrome) is left to the app. */
html, body { overscroll-behavior-x: none; }
/* The fluid swipe (21/10/2026, js/index.js): the page's content box is the frame; while a finger drags, the tab coming in
   lies beside the current one (absolute, same width), and what crosses the sides is clipped without any scroll container. */
.wrap { position: relative; }
.wrap.swiping { overflow-x: hidden; overflow-y: visible; overflow: clip visible; }
.wrap > section.swipe-in { position: absolute; margin: 0; }
/* An open panel dragged to the right (the "back" gesture): a shadow on its left edge, the list showing behind. */
.chat-sheet.sheet-drag { box-shadow: -14px 0 34px rgba(0, 0, 0, .5); }
:root[data-theme="light"] .chat-sheet.sheet-drag { box-shadow: -14px 0 34px rgba(0, 0, 0, .16); }
/* iPhone (20/10/2026): no double-tap zoom when tapping the tabs quickly; pinch zoom stays (no user-scalable=no).
   Every field at 16 px or more, so iOS does not zoom in when it gets the focus; a larger field keeps its size. */
html, body, a, button, label, summary, input, select, textarea, [role="tab"] { touch-action: manipulation; }
input, select, textarea { font-size: max(16px, 1em); }

/* The guest search under "My guests" and the attendance tiles (people of NTT DATA, 21/10/2026). */
.my-guests .chat-item b { overflow-wrap: anywhere; }
/* The one search of "New message" (25/10/2026). */
.pick-list label[for=chooseQ] { margin-top: 0; }
.choose-list:not(:empty) { margin-top: 8px; }
/* A partner in the search and in the conversations (25/10/2026): its logo on a white plate as the picture, then the text. */
.chat-item.with-logo { display: flex; align-items: center; gap: 12px; }
.chat-item .chat-body { flex: 1 1 auto; min-width: 0; }
.chat-item .chat-body b { overflow-wrap: anywhere; }
.chat-ava { flex: none; width: 72px; height: 40px; border-radius: 6px; box-sizing: border-box; }
.chat-ava.logo { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); padding: 4px 6px; }
.chat-ava.logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.at-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.at-tile { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0; }
.at-tile p { margin: 0; overflow-wrap: anywhere; }
.at-tile .at-pct { font-size: 1.9rem; font-weight: 300; line-height: 1.15; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.at-tile .at-name { font-weight: 500; margin: 2px 0 4px; }
@media (min-width: 640px) { .at-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* After the entrance scan (24/10/2026): the guest's photo in a small round badge above "Welcome, {first name}", the
   initials without a photo (the Who is Who style); a magnifier badge marks the photo as tappable, never a colour alone. */
.ticket-me { display: flex; justify-content: center; margin: 2px 0 14px; }
.ticket-ava { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-3); padding: 0; box-shadow: 0 0 0 5px rgba(var(--glow), .05), 0 0 22px rgba(var(--glow), .14); }
button.ticket-ava { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ticket-ava img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ticket-me .selfie-none { width: 60px; height: 60px; border: 1px solid var(--line-2); font-size: 1.15rem; }
.ticket-ava-zoom { position: absolute; right: -5px; bottom: -3px; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line-2); fill: none; stroke: var(--neon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The photo enlarged: the page darkened, the photo alone, the name, Close. Works in both themes (--bar, --gold-2). */
.photo-big { position: fixed; inset: 0; z-index: 60; background: rgba(var(--bar), .94); display: flex; align-items: center; justify-content: center; padding: 24px; }
.photo-big-in { text-align: center; max-width: 520px; width: 100%; }
.photo-big img { display: block; max-width: min(86vw, 520px); max-height: 68vh; width: auto; height: auto; margin: 0 auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 70px rgba(0, 0, 0, .6); }
.photo-big-name { font-size: .9rem; letter-spacing: .16em; text-indent: .16em; text-transform: uppercase; color: var(--gold-2); margin: 16px 0 14px; }
.photo-big-close { min-width: 160px; }
body.photo-open { overflow: hidden; }

/* Notifications (24/10/2026, Roland: lighter, a secondary thing): the title and "Turn on" on one line, one short line
   under them; once on, a single discreet line "✓ Notifications on" with "Turn off" small at the right. */
.notify-card { padding: 14px 18px; }
.notify-card.on { padding: 6px 18px; }
.notify-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.notify-head h3, .notify-head .notify-state { margin: 0; }
.notify-btn { padding: 9px 16px; min-height: 36px; font-size: .68rem; letter-spacing: .14em; text-indent: .14em; box-shadow: none; }
.notify-intro { margin: 8px 0 0; line-height: 1.45; }
.notify-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; color: var(--muted); }
.notify-line .linkish { min-height: 36px; color: var(--muted); font-size: .8rem; }

/* One "New message" (21/10/2026): the chooser's search, then the two titled groups, guests and colleagues. */
#chooseQ { width: 100%; box-sizing: border-box; margin-bottom: 4px; }
.pick-group { margin: 14px 0 8px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, inherit); }
#chooseList .chat-item b { overflow-wrap: anywhere; }