:root {
  /* short names for the shared tokens in tokens.css (the same desk as the control center) */
  --bg: var(--fi-night-desk); --card: var(--fi-panel-navy); --line: var(--fi-line-blue); --text: var(--fi-text-ice); --dim: var(--fi-text-dim);
  --accent: var(--fi-action-blue);  /* dark blue like the primary button of the control center (Peter 2026-10-24) */ --talk: var(--fi-talk-amber); --regie: var(--fi-regie-red); --bad: var(--fi-bad-red);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; }
#app { max-width: 560px; margin: 0 auto; padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); }  /* less room above the header (Peter 2026-10-24) */
header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 4px 0 12px; min-height: 66px; }
.logo { display: block; height: 34px; width: auto; }
/* the logo is the "Reply last" button: hold it to talk back to whoever called last */
.logoBtn { background: var(--fi-tile-blue); border: 2px solid var(--fi-ring-blue); padding: 4px 9px 5px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 12px; }  /* a visible button, not just a logo */
.logoBtn { position: relative; -webkit-touch-callout: none; -webkit-user-select: none; }
.logoBtn img { pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.logoBtn .shield { position: absolute; inset: 0; border-radius: 12px; }  /* a transparent layer: iOS must not take the logo for a picture to save */
.logoBtn span { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .3px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logoBtn:disabled { opacity: .55; cursor: default; }
.logoBtn.on { background: var(--talk); border-color: var(--talk); }
.logoBtn.on span { color: #111; }
.pill { justify-self: center; padding: 3px 10px; border: 1px solid; border-radius: 12px; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pill.ok { border-color: #2f8f6a; color: #8edac4; background: #123a2e; }
.pill.bad { border-color: #86535c; color: #ffb5ad; background: #3b2530; }
.right { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.channel { border: 1px solid var(--talk); color: var(--talk); border-radius: 6px; padding: 0 7px; font-size: 13px; letter-spacing: .5px; }
.credit { color: var(--dim); font-size: 10px; line-height: 1.25; text-align: right; max-width: 92px; }
.hint { color: var(--dim); font-size: 13px; margin: 10px 0 0; }
.hint strong { color: var(--text); font-weight: 600; }
.regieTop { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.regieTop .vol { flex: 1 1 0; min-width: 0; }
.regieTop button { flex: none; padding: 8px 14px; font-size: 15px; }
#regieVol { width: 100%; margin: 12px 0 2px; }
.allCard .keys { margin-bottom: 0; }  /* the tiles of the Talk to all card are as large as the online tiles; the rest of the row is free */
.vol strong { color: var(--text); font-weight: 700; }
.regie .callers { font-size: 20px; margin-top: 10px; }
.regie .callers .tag { width: auto; }
.keys { margin-bottom: 12px; }
.card { background: var(--card); border: 2px solid var(--fi-ring-blue); border-radius: 14px; padding: 16px; margin-bottom: 12px; box-shadow: var(--fi-shadow-card); }
button { font: inherit; color: var(--text); border: 2px solid var(--line); background: var(--fi-tile-blue); border-radius: 12px; cursor: pointer; }
#micFix { margin-bottom: 12px; background: #e05050; border-color: #e05050; color: #fff; }
#playFix { margin-bottom: 12px; background: var(--talk); border-color: var(--talk); color: #111; }
button.big { width: 100%; padding: 16px; font-size: 18px; background: var(--accent); border-color: var(--accent); }
.vol { display: block; color: var(--dim); font-size: 14px; }
.vol input { width: 100%; margin-top: 6px; }
.line { display: flex; gap: 8px; padding: 2px 0; }
.tag { width: 56px; flex: none; color: var(--dim); }
.callers #talking.on { color: var(--talk); font-weight: 600; }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
@media (max-width: 640px) { .keys.dense { grid-template-columns: repeat(3, 1fr); } }
.keys.dense .key { min-height: 76px; padding: 4px 3px; }
.keys.dense .kRole { font-size: 17px; }
.keys.dense .kName { font-size: 14px; }
.keys.dense small { font-size: 11px; }
.key { min-height: 90px; font-size: 20px; font-weight: 600; touch-action: none; user-select: none; -webkit-user-select: none; }
.key { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 6px; }
.key .kRole { font-size: 22px; line-height: 1.15; }
.key .kName { font-size: 17px; font-weight: 600; color: #fff; line-height: 1.2; min-height: 1.2em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* the person, white; the line stays even without one */
.key small { display: block; font-weight: 400; font-size: 13px; color: #fff; margin: 0; line-height: 1.2; }
.key { border-width: 2px; background: var(--fi-tile-blue); }  /* lighter than the page (night desk) so the tiles stand out */
.key.here { border-color: #2e9d70; box-shadow: inset 0 0 0 6px #2e9d70; }   /* a wide inner frame: reachable = green */
.key.away { border-color: #c4495a; box-shadow: inset 0 0 0 6px #c4495a; }   /* nobody there = red */
.key.calling, .key.answering, .lineRow.active .lineName { animation: blink 0.8s steps(1) infinite; }
.key.calling, .key.answering { border-color: var(--regie); box-shadow: inset 0 0 0 6px var(--regie); }
.key.answering small { color: #fff; font-weight: 600; }
@keyframes blink { 50% { background: var(--regie); color: #fff; border-color: var(--regie); } }
.lineRow { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; background: var(--card); }
.lineRow .lineName { padding: 2px 8px; border-radius: 6px; }
.lineRow .lineSub { color: var(--dim); font-size: 13px; margin-left: 6px; }
.lineRow button { padding: 6px 12px; font-size: 14px; }
.lineRow.muted button { background: var(--bad); border-color: var(--bad); }
.lineRow .vol { grid-column: 1 / -1; margin: 0; }
.key.on { background: var(--talk); border-color: var(--talk); box-shadow: none; color: #111; }
.key.on small { color: #3a2a00; }
.meter { height: 6px; background: #4a5666; border-radius: 3px; margin: 2px 0 12px; overflow: hidden; }
.meter div { height: 100%; width: 0; background: var(--fi-signal-blue); transition: width 60ms linear; }
#message { color: var(--bad); min-height: 1.4em; }
[hidden] { display: none !important; }

/* the Regie button is a state display: green = I hear the Regie, red = I switched it off, strong red = the control center's microphone is off */
#regieMute.isOn, .lineRow button.isOn { background: #14503a; border-color: #2e9d70; color: #7bf0c0; }
#regieMute.isOff, .lineRow button.isOff { background: #5a1c26; border-color: #b3414f; color: #ffb3bb; }
#regieMute.master { background: var(--regie); border-color: var(--regie); color: #fff; }
#regieMute:disabled { opacity: 1; cursor: default; }

.key.locked { box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .35); }  /* locked: stays open until it is tapped */
.keys.dense .key.here { box-shadow: inset 0 0 0 4px #2e9d70; }
.keys.dense .key.away { box-shadow: inset 0 0 0 4px #c4495a; }
.keys.dense .key.calling, .keys.dense .key.answering { box-shadow: inset 0 0 0 4px var(--regie); }
.keys.dense .key.on { box-shadow: none; }
.keys.dense .key.locked { box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .35); }

/* whoever is not connected: a small red strip (one third of a tile) below the big tiles; it cannot be pressed */
.keysAway { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin: 0 0 12px; }
.keysAway[hidden] { display: none; }
.keysAway .key { min-height: 30px; padding: 2px 6px; flex-direction: row; gap: 5px; font-size: 13px; background: var(--fi-panel-navy); box-shadow: none; opacity: .9; }
.keysAway .key .kRole { font-size: 13px; line-height: 1.1; }
.keysAway .key .kName { font-size: 13px; font-weight: 600; min-height: 0; }
.keysAway .key .kName:not(:empty)::before { content: "\00b7\00a0"; }
.keysAway .key small { display: none; }
.keysAway .key:disabled { cursor: default; color: #ffd0d4; }

/* the same grey line as the level bar: between the online tiles and the offline strips */
.sepBar { height: 6px; background: #4a5666; border-radius: 3px; margin: 18px 0 14px; }
.sepBar[hidden] { display: none; }
/* The level symbol on a tile and its floating window: how loud I hear the people behind that key (Peter 2026-10-23). */
.key { position: relative; }
.key .lvlBtn { position: absolute; right: 7px; bottom: 7px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: #0f1930; border: 1px solid #5b6f9a; color: #cfe0ff; touch-action: manipulation; }
.key .lvlBtn.set { color: var(--talk); border-color: var(--talk); }
.key.on .lvlBtn { color: #cfe0ff; }
.keys.dense .key .lvlBtn { width: 24px; height: 24px; right: 5px; bottom: 5px; }
.keys.dense .key .lvlBtn svg { width: 16px; height: 16px; }
.keysAway .key .lvlBtn { display: none; }
.pop { position: fixed; z-index: 60; width: min(300px, calc(100vw - 24px)); background: var(--card); border: 2px solid var(--fi-ring-blue);
  border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .65); }
.pop[hidden] { display: none; }
.popHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px 4px 14px; }
.popHead button { padding: 0 10px; font-size: 22px; line-height: 1.2; }
.popBody { padding: 2px 14px 14px; display: grid; gap: 8px; }
.popHint { color: var(--dim); font-size: 14px; }
.popBody input[type="range"] { width: 100%; }
.popScale { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 14px; color: var(--dim); }
.popScale span:last-child { text-align: right; }
.popScale button { padding: 4px 12px; font-size: 14px; }
/* the colour of a role: a stripe at the left of its tile, the role name in that colour; the frame keeps showing the state */
.key.colored::before { content: ""; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 6px; border-radius: 3px; background: var(--rc); }
.key.colored .kRole { color: var(--rc); }
.key.colored.on .kRole { color: #111; }
.keys.dense .key.colored::before { left: 7px; width: 5px; top: 9px; bottom: 9px; }
.keysAway .key.colored::before { display: none; }  /* offline strips stay plain: no role colour */
.keysAway .key.colored .kRole { color: inherit; }
/* offline strips (Peter 2026-10-23): red, but a quiet indian red, little eye-catching */
.keysAway .key, .keysAway .key.away { border: 1px solid #cd5c5c; box-shadow: none; }
.keysAway .key:disabled { color: #e3a6a6; }
/* the level of whoever calls me, across below the logo; shown only while connected (Peter 2026-10-23) */
.callerMeter { display: block; width: 100%; height: 4px; border-radius: 2px; background: #2a3444; overflow: hidden; }
.callerMeter[hidden] { display: none; }
.callerMeter b { display: block; height: 100%; width: 0; background: #f3f6fb; transition: width .15s linear; }
.micLive { margin: 0 0 8px; padding: 5px 10px; border: 2px solid #f5c542; border-radius: 8px; font-size: 13px; font-weight: 600; color: #fff; }
.micLive[hidden] { display: none; }
/* the commentator panel (Peter 2026-10-23): six keys in two rows of three, a big MIC key and a cough key below */
body.commentator #keys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.commentator #keysAway, body.commentator #keysSep { display: none; }
.commentBox { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 10px; margin: 10px 0 14px; }
.commentBox[hidden] { display: none; }
.micBtn { min-height: 120px; font-size: 34px; font-weight: 800; letter-spacing: 2px; border: 3px solid var(--fi-ring-blue); background: var(--fi-panel-navy); color: #fff; }
.micBtn.on { background: #c0392b; border-color: #ff6b5b; }
.micBtn:disabled { opacity: .45; }
.coughBtn { min-height: 120px; font-size: 20px; font-weight: 700; border: 3px solid var(--fi-ring-blue); background: var(--fi-tile-blue); color: #fff;
            touch-action: none; user-select: none; -webkit-user-select: none; }
.coughBtn small { display: block; font-size: 12px; font-weight: 400; opacity: .8; }
.coughBtn.on { background: #f5c542; color: #111; border-color: #f5c542; }
/* the MIC went off after a long break: the page blinks until the MIC is switched on again */
body.micLost { animation: micLostBlink 1s steps(1) infinite; }
@keyframes micLostBlink { 50% { box-shadow: inset 0 0 0 10px #e5483c; } }
.micLostText { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: #c0392b; color: #fff; font-weight: 700; }
.micLostText[hidden] { display: none; }
.regieBox { margin: 10px 0 14px; } .regieBox[hidden] { display: none; }
.openBtn { width: 100%; min-height: 70px; font-size: 22px; font-weight: 800; letter-spacing: 1px; border: 3px solid var(--fi-ring-blue); background: var(--fi-panel-navy); color: #fff; }
.openBtn.on { background: #1d6b4c; border-color: #2fc486; }
.micBtn.talkback { background: #5a4a1e; border-color: #f5c542; color: #f5c542; font-size: 28px; }  /* talking back: muted, not red */
/* the commentator panel (Peter 2026-10-23): the listening controls on top and half as high, the talk keys in the
   middle, the MIC key always at the bottom */
body.commentator #live { display: flex; flex-flow: row wrap; gap: 6px; align-content: flex-start; }
body.commentator #live > * { flex: 1 1 100%; margin-left: 0; margin-right: 0; }
/* the Regie and the listened lines side by side, two per row, each half as wide (Peter 2026-10-23) */
body.commentator #lines { display: contents; }
body.commentator #regieCard, body.commentator #lines .lineRow { flex: 0 0 calc(50% - 3px); min-width: 0; }
body.commentator #regieCard { order: -2; padding: 4px 8px; margin: 0; }
body.commentator #lines .lineRow { order: -1; padding: 4px 8px; margin: 0; gap: 2px 8px; }
body.commentator #regieCard .regieTop { gap: 6px; }
body.commentator #regieCard .regieTop strong { display: none; }  /* (no room for the headset note there) */
body.commentator #lines .lineRow button { padding: 3px 8px; font-size: 12px; }
body.commentator #regieCard .regieTop button { padding: 4px 10px; font-size: 13px; }
body.commentator #regieCard .vol, body.commentator #lines .vol { font-size: 12px; }
body.commentator #regieCard input[type=range], body.commentator #lines input[type=range] { margin: 0; height: 18px; }
body.commentator .meter { order: 5; }
body.commentator #commentBox { order: 10; margin-top: 8px; }
/* the commentator panel: every listening card the same – name and on/off on top, the slider below (Peter 2026-10-23) */
body.commentator #live { align-items: stretch; }
body.commentator #lines .lineSub { display: none; }
body.commentator #lines .vol { font-size: 0; }  /* (the word \"volume\" goes, the slider stays) */
body.commentator #lines .lineRow, body.commentator #regieCard { display: flex; flex-direction: column; justify-content: space-between; }
body.commentator #lines .lineRow { display: grid; grid-template-columns: 1fr auto; align-content: space-between; }
body.commentator #lines .lineRow button, body.commentator #regieMute { white-space: nowrap; }
body.commentator #regieCard .regieTop .vol { font-size: 15px; color: #fff; }  /* the same size as the names of the lines */
.popTalk { width: 100%; margin-top: 10px; padding: 10px; font-size: 15px; font-weight: 600; }
.popTalk.on { background: #eab308; border-color: #eab308; color: #111; }  /* as a locked tile; the text says it too */

/* The gear: microphone and output of this device (Peter 2026-10-24) */
.gearBtn { display: inline-flex; align-items: center; justify-content: center; padding: 6px; background: transparent; border: 1px solid #5b6f9a; border-radius: 10px; color: inherit; }
.gearPop { width: min(340px, calc(100vw - 24px)); }
.gearLine { display: block; margin: 8px 0; font-size: 14px; }
.gearLine select { display: block; width: 100%; margin-top: 4px; padding: 8px; font: inherit; color: inherit; background: #0b1530; border: 1px solid #5b6f9a; border-radius: 8px; }
.gearLine[hidden] { display: none; }
/* Who I am, in the header (Peter 2026-10-24): large, as wide as a key tile and filling the room between the logo and the
   gear/channel column, never below it; the logo a little smaller for it */
header .pill { justify-self: center; width: 100%; max-width: 220px; box-sizing: border-box; text-align: center; padding: 6px 10px; border-width: 2px;
  display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
header .pill b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: clamp(17px, 5vw, 21px); font-weight: 800; }
header .pill small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600; opacity: .85; }
header .logo { height: 28px; max-width: 96px; object-fit: contain; }
.logoBtn span { max-width: 96px; }
/* hint to add the web app to the home screen, on the start card (Peter 2026-10-25) */
.installHint p { margin: 0; }
.installHint button { margin-top: 8px; padding: 10px 16px; font-size: 15px; }