/* The presenter screen, the same in every tool: the page, the setup form, and the live frame
   with its top bar, join panel, ••• menu, licence dialog and toast. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; }

/* setup */
.setup { max-width: 560px; margin: 6vh auto; padding: 6px 16px 0; width: 100%; overflow: auto; } /* the top padding: room for the focus ring on the way back */
.setup .backlink { margin-bottom: 12px; }
.setup .marks img { width: 32px; height: 32px; }
.setup h1 { font-size: 30px; margin: 18px 0 24px; letter-spacing: -.015em; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field select { border: 1px solid var(--edge); border-radius: 10px; padding: 11px 12px; background: var(--surface); font-size: 16px; width: 100%; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.recent { margin-top: 36px; }
.recent h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.recent a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }

/* live: one picture at every window size. Every size below is a multiple of --u, one
   design pixel on a 1600×900 screen, so only the scale changes, never the arrangement.
   Width 1600–1890 and height 900–1000 (in u) fill the window; a window of a more extreme
   shape shows the same picture centred, like a slide. Hairlines stay in real pixels. */
:root { --u: min(100vw / 1600, 100vh / 900); }
@supports (height: 1dvh) { :root { --u: min(100vw / 1600, 100dvh / 900); } }
.live { font-size: calc(var(--u) * 16); flex: none; margin: auto; width: min(100%, calc(var(--u) * 1890)); height: min(100%, calc(var(--u) * 1000));
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(var(--u) * 20) calc(var(--u) * 32) calc(var(--u) * 14); gap: calc(var(--u) * 16); }
.topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: calc(var(--u) * 18); }
.topbar .marks { gap: calc(var(--u) * 5); }
.topbar .marks img { width: calc(var(--u) * 29); height: calc(var(--u) * 29); }
.topbar h1 { margin: 0; font-size: calc(var(--u) * 30); line-height: 1.15; letter-spacing: -.015em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
[dir="rtl"] .topbar h1 { text-align: right; } /* beside the marks, even when the title itself is left-to-right */
.controls { display: flex; gap: calc(var(--u) * 8); justify-content: flex-end; align-items: center; }
.controls .btn { padding: .55em 1em; font-size: calc(var(--u) * 15); white-space: nowrap; }
.pill { border: 0; font-size: calc(var(--u) * 15); font-weight: 600; padding: .55em 1em; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.pill:enabled:hover { background: var(--well); }
/* drawn by hand: a native dropdown keeps a minimum size and wouldn't scale with the picture */
.langsel { -webkit-appearance: none; appearance: none; padding: .55em 1.7em .55em .85em; max-width: 7.6em; cursor: pointer; color: var(--ink); text-overflow: ellipsis;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b645e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .7em center / .7em; }
[dir="rtl"] .langsel { padding: .55em .85em .55em 1.7em; background-position: left .7em center; }
.pill:disabled { cursor: default; color: inherit; }
.tpill { font-size: calc(var(--u) * 17); font-weight: 800; font-variant-numeric: tabular-nums; padding: .4em .9em; border-radius: 999px; background: var(--ink); color: var(--bg); white-space: nowrap; }
.tpill.done { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.join { background: var(--surface); border-radius: calc(var(--u) * 20); box-shadow: inset 0 0 0 1px var(--line); padding: calc(var(--u) * 20); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 12); min-height: 0; }
.join .label { font-size: calc(var(--u) * 26); font-weight: 700; line-height: 1.2; }
#qr { width: 100%; }
#qr svg { display: block; width: 100%; height: auto; }
.join .url { font-size: calc(var(--u) * 15); line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; max-width: 100%; }
#orGo { display: block; }
.join .bigcode { font-size: calc(var(--u) * 42); font-weight: 800; letter-spacing: .08em; line-height: 1.1; white-space: nowrap; }
.more { position: relative; }
.more summary { list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more .menu { position: absolute; inset-inline-end: 0; top: calc(100% + var(--u) * 6); z-index: 20; background: var(--surface); border-radius: calc(var(--u) * 14); box-shadow: 0 0 0 1px var(--line), 0 calc(var(--u) * 16) calc(var(--u) * 40) rgba(0,0,0,.12); padding: calc(var(--u) * 6); display: grid; min-width: calc(var(--u) * 250); }
.more .menu button { border: 0; background: none; text-align: start; padding: .7em .9em; border-radius: calc(var(--u) * 9); font-size: calc(var(--u) * 15); font-weight: 500; }
.more .menu button:hover { background: var(--well); }

/* what the facilitator works with, along the bottom: choices on the left, the main actions on the right */
.bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 8); }
.tools { display: flex; align-items: center; flex-wrap: nowrap; gap: calc(var(--u) * 22); }
.tools .group { display: flex; align-items: center; gap: calc(var(--u) * 6); white-space: nowrap; }
.tools .group > span:not(.tpill) { font-size: calc(var(--u) * 14); font-weight: 600; color: var(--muted); margin-inline-end: calc(var(--u) * 3); }
.tools .grow { flex: 1; }
.chip { border: 0; border-radius: 999px; min-width: calc(var(--u) * 38); font-size: calc(var(--u) * 15); font-weight: 600; padding: .5em .85em; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.chip:hover { background: var(--well); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.tools .btn { font-size: calc(var(--u) * 15); padding: .6em 1.1em; white-space: nowrap; }

/* a running clock: the ring empties as the time goes */
.quiet { display: flex; align-items: center; gap: calc(var(--u) * 14); }
.quiet .ring { width: calc(var(--u) * 62); height: calc(var(--u) * 62); }
.quiet .time { font-size: calc(var(--u) * 38); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.quiet .lab { font-size: calc(var(--u) * 17); font-weight: 600; color: var(--muted); }
.quiet.done .ring, .quiet.done .lab { display: none; }

.legal { display: flex; justify-content: flex-end; gap: calc(var(--u) * 16); align-items: baseline; }
.live .attribution { font-size: calc(var(--u) * 12); line-height: 1.4; margin: 0; }
.keys { font-size: calc(var(--u) * 11); color: var(--muted); white-space: nowrap; }

/* licence and source, from the ••• menu */
#licDlg { border: 0; border-radius: calc(var(--u) * 20); padding: calc(var(--u) * 28) calc(var(--u) * 32); width: calc(var(--u) * 660); max-width: 94vw; background: var(--surface); color: var(--ink); box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 60) rgba(0,0,0,.25); }
#licDlg::backdrop { background: rgba(0,0,0,.35); }
#licDlg h2 { margin: 0 0 .6em; font-size: calc(var(--u) * 24); }
#licBody { font-size: calc(var(--u) * 17); line-height: 1.45; }
#licBody p { margin: 0 0 .7em; }
#licBody a { color: inherit; }
#licClose { font-size: calc(var(--u) * 15); padding: .6em 1.2em; margin-top: calc(var(--u) * 6); }
.toast { position: fixed; left: 50%; bottom: calc(var(--u) * 96); transform: translateX(-50%); z-index: 30; width: max-content; max-width: calc(var(--u) * 820); background: var(--ink); color: var(--bg); border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 14) calc(var(--u) * 24); font-size: calc(var(--u) * 17); line-height: 1.35; text-align: center; }
[hidden] { display: none !important; }