/* Page of the phone. Layout of the P/T bench (task 012, taches/maquettes/012/), of the coffee machine (016) and of the screens of 031, in
   the style of the headset's screens (task 050; taches/maquettes/048/ and 049/, validated by Adrian on 1 November): striped band, dark
   panels, yellow tabs, orange main button. Fonts of the game (plan §5, A17): Baloo 2 for titles, Nunito Sans for texts, and the logo, all
   copied from Art/ by ProjectSetup.SyncMobilePage. Every size and colour is here: the JavaScript names classes, never a value. */

@font-face { font-family: "Baloo 2"; src: url("Baloo2-Bold.ttf") format("truetype"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("NunitoSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

/* State colours keep their meaning: green is good, yellow is an alert (attention panel), red is critical; none of the three is the
   gold of the labels and tabs, which carries no state. Texts are at 4.5:1 or more on their panel. */
:root {
  --bg: #20262a; --card: #2c3235; --card-2: #1c2225; --line: #4c5252; --text: #fff4db; --muted: #c9cdc2; --accent: #ffd060; --gold: #ffc53a;
  --on-gold: #282828; --active: #f6bd35; --active-edge: #9d6417; --idle: #343e42; --idle-edge: #11191c;
  --ok: #6fdca0; --bar-ok: #2a9d66; --warn: #ffc53a; --alert: #ff7a66; --alert-bg: #3b1d1a; --alert-text: #ffd2c8;
  --refused-bg: #33291a; --done-bg: #173a2b; --disabled: #a7aea6; --grey: #7b8583; --strong: #b5772c; --water: #4a8fb0;
  --stripes: repeating-linear-gradient(125deg, #ffc53a 0 18px, #282b2c 18px 36px);
  --bar-bg: linear-gradient(110deg, #353b3e, #252b2e);
  --primary-bg: linear-gradient(#f4873f, #ec5f2c); --secondary-bg: linear-gradient(#424c4f, #343e42);
  --title: "Baloo 2", system-ui, sans-serif; --body: "Nunito Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; }
/* The band of 7 px at the top of every screen (under the notch when there is one). */
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.45; padding-top: calc(7px + env(safe-area-inset-top));
  background: var(--stripes) 0 0 / 100% calc(7px + env(safe-area-inset-top)) no-repeat, var(--bg); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hidden { display: none !important; }

#app { max-width: 480px; min-height: calc(100vh - 7px - env(safe-area-inset-top)); min-height: calc(100dvh - 7px - env(safe-area-inset-top)); margin: 0 auto; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; }
/* What is under the band of the header: the screen proper (task 050). */
.body { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); }
.screen.game > .body, .screen.manual > .body { gap: 12px; padding: 12px 14px calc(20px + env(safe-area-inset-bottom)); }
.screen.summary > .body { gap: 14px; }
.grow { flex-grow: 1; }

/* Header band: role in gold capitals above the title, buttons at the right (maquette 048). */
.bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--bar-bg); border-bottom: 2px solid #171c1f; }
.bar-text { flex: 1; min-width: 0; }
.bar-text > * { min-width: 0; }
.bar-text > .role { display: block; font-family: var(--body); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.bar-text > :not(.role), .bar-text > .role:only-child { font-family: var(--title); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: 0; text-transform: none; color: var(--text); text-align: left; }
.bar-text > h1 { font-size: 28px; line-height: 1.1; }
.bar-text > .row { gap: 4px 8px; flex-wrap: wrap; }
.bar-text > .row .strong { font-size: 22px; font-weight: 800; }
.bar-actions { flex: none; display: flex; gap: 8px; }
/* Screens without a game in progress: the logo of the game, centred, 290 px wide, 4 px above and below (maquette 049). The picture is
   cropped to its drawing (a quarter of its width is transparent), so that the drawing itself is 290 px wide. */
.bar.with-logo { position: relative; justify-content: center; padding: 4px 8px; }
.logo { width: min(290px, calc(100% - 84px)); aspect-ratio: 290 / 175; background: url("logo.png") center / 125% auto no-repeat; }
.bar.with-logo .bar-actions { position: absolute; top: 8px; right: 8px; }
@media (max-width: 360px) {
  .bar { padding-left: 12px; padding-right: 12px; }
  .bar-text > :not(.role), .bar-text > .role:only-child, .bar-text > .row .strong { font-size: 19px; }
  .bar-text > h1 { font-size: 24px; }
  .body { padding-left: 14px; padding-right: 14px; }
  .tiles > .card { padding-left: 8px; padding-right: 8px; }
}

h1 { margin: 0; font-family: var(--title); font-weight: 800; font-size: 34px; line-height: 1.05; }
h2 { margin: 0; font-family: var(--title); font-weight: 800; font-size: 22px; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.center { text-align: center; }
.strong { font-weight: 700; }
.role { font-family: var(--title); font-weight: 800; font-size: 20px; color: var(--accent); }
.label { font-size: 14px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wide { gap: 20px; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack.tight { gap: 6px; }

.icon { width: 22px; height: 22px; flex: none; fill: currentColor; }
.icon.small { width: 18px; height: 18px; }
.icon.big { width: 34px; height: 34px; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.accent { color: var(--accent); }
.icon.critical { color: var(--alert); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.card.row { flex-direction: row; align-items: center; gap: 10px; padding: 14px 16px; }
.card-title { font-family: var(--title); font-weight: 800; font-size: 22px; line-height: 1.15; }
.card-title.large { font-size: 26px; line-height: 1.1; }
.status-line { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--muted); }
.status-line .icon { width: 12px; height: 12px; }
.stack.tight .icon { width: 20px; height: 20px; }

/* Buttons: a thick lower edge makes them look pressable, as in the headset (maquette 048). Main: orange; secondary: grey; a choice or
   a tab is grey, and gold when it is the current one. At least 44 px high. */
button { font: inherit; color: var(--text); cursor: pointer; border: 0; border-radius: 11px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; }
.primary { background: var(--primary-bg); color: var(--on-gold); border: 1px solid #f7a35b; border-bottom: 4px solid #a33d17; font-family: var(--title); font-weight: 800; font-size: 21px; min-height: 56px; padding: 0 16px; }
.primary.big { min-height: 64px; font-size: 24px; }
.primary.huge { min-height: 72px; font-size: 26px; }
.primary:disabled { background: var(--card); color: var(--disabled); border-color: var(--line); border-bottom-color: var(--idle-edge); }
.dark, .secondary, .globe, .icon-button, .dose-button, .small-button { background: var(--secondary-bg); border: 1px solid #727b79; border-bottom: 4px solid #13191b; }
.dark { font-family: var(--title); font-weight: 800; font-size: 21px; min-height: 56px; display: flex; align-items: center; justify-content: center; }
.secondary { font-family: var(--title); font-weight: 800; font-size: 20px; min-height: 52px; }
/* Globe of the language, on every screen (task 031; maquette 031, planche 1): 44 px, at the right of the header band. */
.globe, .icon-button { width: 44px; height: 44px; flex: none; padding: 0; display: flex; align-items: center; justify-content: center; }
.globe { color: var(--text); }

.overlay { position: fixed; inset: 0; background: rgba(16, 20, 22, 0.82); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 480px; background: var(--card); border-top: 1px solid var(--line); border-radius: 12px 12px 0 0; padding: 20px 22px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.picker-list { display: flex; flex-direction: column; gap: 8px; }
.picker-option { min-height: 56px; background: var(--idle); border-bottom: 5px solid var(--idle-edge); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  font-weight: 700; font-size: 18px; text-align: left; border-radius: 12px; }
.picker-option[aria-pressed="true"] { background: var(--active); border-bottom-color: var(--active-edge); color: var(--on-gold); }

.seat { flex-direction: row; justify-content: space-between; align-items: center; padding: 14px 16px; }
.seat.mine { background: var(--card-2); border: 2px solid var(--gold); }
.seat-text { display: flex; flex-direction: column; gap: 2px; }
.seat-name { font-weight: 700; font-size: 18px; }
.seat-status { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; text-align: right; }
.countdown-box { flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding: 12px; font-size: 16px; color: var(--muted); }
.countdown { font-family: var(--title); font-weight: 800; font-size: 22px; color: var(--text); }

.dots { display: flex; gap: 6px; }
.icon.dot { width: 14px; height: 14px; }
.dot.done { color: var(--ok); }
.dot.current { fill: none; stroke: var(--text); stroke-width: 2; }
.dot.next { fill: none; stroke: var(--grey); stroke-width: 2; }

.tiles { display: grid; gap: 8px; }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; display: flex; flex-direction: column; min-width: 0; }
.tile.row { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; }
.tile.alert { background: var(--alert-bg); border-color: var(--alert); box-shadow: inset 0 0 0 1px var(--alert); }
.tile.alert .tile-label { color: var(--alert-text); }
.tile.alert .icon { color: var(--alert); }
.tile-label { font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.tile-value { font-family: var(--title); font-weight: 800; font-size: 22px; }
.tiles.two .tile > .tile-value { font-size: 28px; }
.tile-text { font-weight: 700; font-size: 17px; line-height: 1.2; }
.icon.symbol { width: 34px; height: 34px; color: var(--accent); }

.gauge { display: flex; flex-direction: column; gap: 6px; }
.gauge-head { display: flex; justify-content: space-between; align-items: flex-end; }
.gauge-name { display: flex; flex-direction: column; }
.gauge-letter { font-family: var(--title); font-weight: 800; font-size: 22px; line-height: 1; }
.gauge-reading { display: flex; align-items: center; gap: 8px; }
.trend { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--muted); }
.trend.rising { color: var(--warn); }
.trend.critical { color: var(--alert); font-weight: 800; text-transform: uppercase; }
.gauge-value { font-family: var(--title); font-weight: 800; font-size: 44px; line-height: 1; }
.gauge.critical .gauge-value { color: var(--alert); }
.gauge-bar { position: relative; height: 26px; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; }
.gauge.critical .gauge-bar { outline: 2px solid var(--alert); }
.gauge-zone { position: absolute; top: -1px; height: 26px; background: var(--bar-ok); }
.gauge-marker { position: absolute; top: -6px; width: 4px; height: 36px; margin-left: -2px; background: var(--text); border-radius: 2px; }
.gauge.critical .gauge-marker { width: 6px; margin-left: -3px; background: var(--alert); }
.gauge-scale { display: flex; justify-content: space-between; font-size: 13px; }

.heat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.heat { min-height: 64px; background: var(--idle); border: 3px solid transparent; border-bottom: 5px solid var(--idle-edge); border-radius: 12px; font-family: var(--title); font-weight: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.heat-number { font-size: 26px; }
.heat-zero { font-size: 22px; }
.heat-note { font-family: var(--body); font-weight: 700; font-size: 12px; margin-top: 4px; }
.heat-note:empty { display: none; }
.heat.current { background: var(--active); border-color: transparent; border-bottom-color: var(--active-edge); color: var(--on-gold); }
.heat.sent { background: var(--card); border: 3px dashed var(--accent); }
.heat.sent .heat-note { color: var(--accent); }
.heat:disabled { cursor: default; }
.heat-status { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--ok); }
.heat-status.pending { color: var(--accent); }

.banner { display: flex; gap: 12px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; }
.banner-text { display: flex; flex-direction: column; gap: 2px; }
.banner-title { font-family: var(--title); font-weight: 800; font-size: 22px; line-height: 1.1; }
.critical-banner { background: var(--alert-bg); border: 2px solid var(--alert); color: var(--text); font-size: 15px; line-height: 1.35; align-items: center; }
.critical-banner > .icon { color: var(--alert); }
.hints { display: flex; flex-direction: column; }
.refused-banner { background: var(--refused-bg); border: 2px solid var(--gold); padding: 12px; }

.hero { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 16px; }
.icon.hero-icon { width: 88px; height: 88px; }
.hero .icon.ok, .hero .icon.warn, .hero .icon.critical { width: 96px; height: 96px; }
.result-title { font-size: 44px; line-height: 1; }
.cause { font-family: var(--title); font-weight: 700; font-size: 22px; line-height: 1.2; }
.icon.error-icon { width: 40px; height: 40px; }
.screen.error h1 { font-size: 30px; line-height: 1.1; }

.manual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.manual-cell { background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.manual-cell .tile-label { font-size: 13px; text-transform: none; letter-spacing: 0; }
.manual-value { font-family: var(--title); font-weight: 800; font-size: 22px; }
.rule { align-items: flex-start; font-size: 16px; line-height: 1.4; }

.loading > .body { align-items: center; justify-content: center; }
.icon.spinner { width: 24px; height: 24px; animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: 0.25; } to { opacity: 1; } }

/* ---- Coffee machine (task 016): layout of taches/maquettes/016/ ---- */
.screen.cafe > .body { gap: 12px; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 16px; }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles.top-aligned { align-items: start; }

.choice { min-height: 64px; background: var(--idle); border: 3px solid transparent; border-bottom: 5px solid var(--idle-edge); border-radius: 12px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.choice-name { font-family: var(--title); font-weight: 800; font-size: 18px; line-height: 1.1; }
.choice-status { font-size: 14px; font-weight: 700; color: var(--muted); }
.choice.current { background: var(--active); border-color: transparent; border-bottom-color: var(--active-edge); color: var(--on-gold); }
.choice.current .choice-status { color: var(--on-gold); }
.choice.done { background: var(--done-bg); border-bottom-color: #0d241a; }
.choice.done .choice-status { color: var(--ok); }
.choice.sent { background: var(--card); border: 3px dashed var(--accent); }
.choice.sent .choice-status { color: var(--accent); }
.choice:disabled:not(.current):not(.done):not(.sent) { background: var(--card); border-bottom-color: var(--idle-edge); color: var(--disabled); }
.choice:disabled:not(.current):not(.done):not(.sent) .choice-status { color: var(--disabled); }

.recipe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-size: 16px; }
.recipe-grid .icon.symbol { width: 26px; height: 26px; }

.dose-row { display: flex; align-items: center; gap: 10px; }
.dose-button { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; flex: none; }
.dose-button .icon { width: 28px; height: 28px; }
.dose-button:disabled { background: var(--card); border-color: var(--line); border-bottom-color: var(--idle-edge); color: var(--disabled); }
.card .dose-button { width: 44px; height: 44px; }
.card .dose-row { gap: 4px; }
.tiles > .card { padding: 10px 12px; min-width: 0; }
.dose-center { flex-grow: 1; display: flex; flex-direction: column; align-items: center; }
.dose-value { font-family: var(--title); font-weight: 800; font-size: 44px; line-height: 1; }
.card .dose-value { font-size: 28px; }
.dose-kind { font-size: 14px; font-weight: 700; color: var(--muted); }
.dose-kind.normal { color: var(--ok); }
.dose-kind.strong { color: var(--warn); }
.dose-kind.refused { color: var(--alert); }
.dose-kind.unknown { color: var(--muted); }
.dose-scale, .reservoir { display: grid; grid-template-columns: repeat(var(--steps, 10), minmax(0, 1fr)); gap: 3px; }
.cell { height: 14px; border-radius: 3px; background: var(--card-2); border: 1px solid var(--line); }
.cell.normal { background: var(--bar-ok); border-color: var(--bar-ok); }
.cell.strong { background: var(--strong); border-color: var(--strong); }
.cell.refused { background: var(--alert-bg); border-color: var(--alert); }
.cell.mine { outline: 2px solid var(--text); }
.cell.water { background: var(--water); border-color: var(--water); }
.cell.unknown { background: var(--card-2); }
.reservoir .cell { height: 12px; }
.scale-legend { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.lock-line { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--accent); }
.lock-line.warn { color: var(--warn); }
.lock-line.ok { color: var(--ok); }

/* Stability counter (task 028): green while the progression advances, amber while it waits. */
.extraction { border: 2px solid var(--line); }
.extraction.stable { border-color: var(--ok); }
.extraction.paused { border-color: var(--warn); }
.extraction-count { font-family: var(--title); font-weight: 800; font-size: 26px; line-height: 1; }
.extraction.paused .extraction-count { font-size: 22px; color: var(--warn); }
.guide-text { font-size: 16px; line-height: 1.4; }
.step.waiting { background: var(--warn); animation: step-wait 1.2s ease-in-out infinite; }
@keyframes step-wait { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .step.waiting { animation: none; } }
.settings-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; font-size: 16px; }
.settings-head { font-size: 14px; font-weight: 700; color: var(--muted); }
.setting-line { gap: 12px; align-items: flex-start; }
.setting-value { text-align: right; }
.progress { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 4px; }
.step { height: 10px; border-radius: 3px; background: var(--card-2); }
.step.done { background: var(--ok); }

.command-line { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 8px 10px; font-size: 15px; background: var(--card); border: 1px solid var(--line); color: var(--accent); }
.command-line .strong { color: var(--text); }
.command-line.done { color: var(--ok); }
.command-line.failed { background: var(--refused-bg); border: 2px solid var(--gold); color: var(--warn); }

.banner.served { background: var(--done-bg); border: 2px solid var(--ok); align-items: center; }
.banner.served > .icon { color: var(--ok); }
.banner.served.refused { background: var(--refused-bg); border-color: var(--gold); }
.banner.served.refused > .icon { color: var(--warn); }

.alerts-row { display: flex; gap: 8px; align-items: stretch; }
.alerts { flex-grow: 1; display: flex; flex-direction: column; gap: 6px; }
.alert { display: flex; align-items: center; gap: 8px; background: var(--refused-bg); border: 2px solid var(--gold); border-radius: 12px; padding: 8px 10px; font-size: 15px; font-weight: 700; }
.alert .icon { color: var(--warn); }
.alert.none { background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.alert.none .icon { color: var(--ok); }
.tile.danger { flex-direction: row; justify-content: space-between; align-items: center; padding: 10px 12px; }
.tile.danger .tile-value { font-size: 22px; }
.alert-card { display: flex; flex-direction: column; gap: 8px; background: var(--refused-bg); border: 2px solid var(--gold); border-radius: 12px; padding: 12px; }
.alert-card p { font-size: 16px; line-height: 1.4; }
.alert-head { display: flex; align-items: center; gap: 8px; font-family: var(--title); font-weight: 800; font-size: 20px; }
.alert-head .icon { color: var(--warn); }
.guide-title { font-size: 15px; font-weight: 700; color: var(--accent); }
/* Pressure alert in steps (task 031; maquette 031, planche 3): one box per case, one label and one sentence per step. */
.alert-card .guide-intro { font-weight: 700; }
.guide-case { display: flex; flex-direction: column; gap: 8px; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.guide-case-title { font-family: var(--title); font-weight: 800; font-size: 18px; line-height: 1.25; color: var(--accent); }
.guide-step { display: flex; flex-direction: column; gap: 3px; }
.guide-who { align-self: flex-start; padding: 1px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; }
.guide-who.you { background: var(--text); color: var(--on-gold); }
.guide-who.mechanic { background: var(--warn); color: var(--on-gold); }
.guide-what { font-size: 16px; line-height: 1.35; }
.guide-note { font-size: 15px; line-height: 1.35; color: var(--accent); }
button.alert { width: 100%; min-height: 44px; text-align: left; }
.alert-link { color: var(--text); }
.tile.alert-tile { background: var(--alert-bg); border-color: var(--alert); }

.gauge-tile .gauge-value { font-size: 34px; line-height: 1.1; }
.gauge-tile .row { gap: 6px; align-items: baseline; }
.gauge-tile .trend { font-size: 14px; }

.small-button { min-height: 44px; font-size: 17px; }
/* « Arrêt » is the main button of the Sécurité: orange like the headset's; engaged, it turns red until it is released. */
.stop { min-height: 56px; background: var(--primary-bg); color: var(--on-gold); border: 1px solid #f7a35b; border-bottom: 4px solid #a33d17; font-family: var(--title); font-weight: 800; font-size: 19px; }
.stop.on { background: var(--alert-bg); color: var(--text); border: 2px solid var(--alert); border-bottom-width: 4px; }
.stop:disabled, .dark:disabled { opacity: 0.55; }

.code-card { background: var(--card-2); border: 3px solid var(--gold); align-items: center; }
.code-card .label { align-self: flex-start; }
.code { font-family: var(--title); font-weight: 800; font-size: 72px; letter-spacing: 0.25em; line-height: 1; padding-left: 0.25em; color: var(--accent); }
.geyser .banner-title { font-size: 24px; }

.manual-button { min-height: 52px; }
.card.sensor .tiles.four { margin-top: 2px; }
.invite-button { min-height: 44px; background: transparent; border: 2px solid var(--line); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }

.tabs .tab { min-height: 54px; background: var(--idle); border-bottom: 5px solid var(--idle-edge); border-radius: 12px; font-family: var(--title); font-weight: 800; font-size: 16px; position: relative; }
.tabs .tab.current { background: var(--active); border-bottom-color: var(--active-edge); color: var(--on-gold); }
.icon.badge { position: absolute; top: 6px; right: 8px; width: 12px; height: 12px; color: var(--alert); }
.tabs .tab.current .icon.badge { color: #a02a1c; }

.trouble { align-items: flex-start; gap: 12px; padding: 10px 12px; font-size: 15px; line-height: 1.35; }
.icon.symptom { width: 40px; height: 40px; color: var(--accent); }
.icon.symptom.ok { color: var(--ok); }

.screen.invite { align-items: stretch; }
.qr-frame { align-self: center; background: #FFFFFF; padding: 14px; border-radius: 12px; }
.qr { display: block; width: 250px; height: 250px; image-rendering: pixelated; }
.address { font-family: var(--title); font-weight: 800; font-size: 28px; overflow-wrap: anywhere; color: var(--accent); }

/* The reservoir and the dose, side by side, need 140 px each for the 44 px buttons of the dose: below that, one under the other. */
@media (max-width: 372px) { .tiles.top-aligned { grid-template-columns: minmax(0, 1fr); } }

/* ---- Reservoir warning, manual at the end of the tabs, entry of the puddle (task 048; taches/maquettes/048/) ---- */
/* The tabs of the Barista and, at the end of the same row, the button of the manual: the same in the three tabs. */
.tabbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 58px; gap: 6px; }
.tab-list { display: contents; }
.tabs .tab { padding: 0; }
.manual-tab { min-height: 54px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 2px solid var(--gold); border-radius: 12px; background: var(--card-2); color: var(--accent); font-size: 12px; font-weight: 700; line-height: 1.2; }
.manual-tab .icon { width: 20px; height: 20px; }
/* The warning that the reservoir falls too fast: a button that opens the manual on the puddle. */
.leak-warning { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) 16px; gap: 10px; align-items: center; padding: 10px 12px; text-align: left;
  background: var(--refused-bg); color: var(--text); border: 2px solid var(--gold); border-radius: 12px; }
.leak-warning .icon.leak-icon { width: 26px; height: 26px; color: var(--accent); }
.leak-warning .icon.small { width: 16px; height: 16px; color: var(--accent); }
.leak-text { display: flex; flex-direction: column; gap: 3px; }
.leak-text strong { font-size: 16px; line-height: 1.25; font-weight: 700; }
.leak-more { font-size: 14px; color: var(--accent); font-weight: 700; }
/* The entry of the puddle in the manual, complete: who acts, the gesture, then filling. Gold when the player was sent there. */
.puddle-entry { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.puddle-entry.focus { background: var(--refused-bg); border: 2px solid var(--gold); }
.puddle-entry .icon.symptom { width: 28px; height: 28px; }
.puddle-title { font-family: var(--title); font-weight: 800; font-size: 21px; line-height: 1.15; }
.steps-list { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.step-number { width: 30px; height: 30px; border-radius: 15px; background: var(--active); color: var(--on-gold); font-family: var(--title); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.steps-list .col { font-size: 15px; line-height: 1.35; }
.steps-list .col strong { font-size: 16px; }
/* The Ingénieur of two phones has no troubleshooting in his manual: he is sent to the Chef. */
.referral { display: flex; flex-direction: column; gap: 8px; background: var(--refused-bg); border: 2px solid var(--gold); border-radius: 12px; padding: 16px 14px; font-size: 16px; line-height: 1.4; }
.referral .icon { width: 28px; height: 28px; color: var(--accent); }
.referral-title { font-family: var(--title); font-weight: 800; font-size: 21px; line-height: 1.15; }
.setting-value.long { flex: 1 1 100%; text-align: left; }
.setting-line:has(.long) { flex-wrap: wrap; }

/* Task 049: the relay's home page and the screens where a game ends (maquette 049). */
.home-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > .label { letter-spacing: 0.16em; }
.code-input { width: 100%; height: 80px; padding: 0 12px; text-align: center; background: var(--card-2); color: var(--accent); border: 2px solid var(--gold); border-radius: 12px;
  font-family: var(--title); font-weight: 800; font-size: 42px; letter-spacing: 0.06em; text-transform: uppercase; }
.code-input::placeholder { color: #8c9390; opacity: 1; text-transform: none; }
.code-input:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.notice-slot:empty { display: none; }
.banner.refused-banner > .icon { color: var(--accent); margin-top: 1px; }
.banner.refused-banner > .banner-text { font-size: 16px; line-height: 1.35; }
.code-row { display: flex; justify-content: space-between; align-items: center; height: 76px; padding: 0 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.code-row > .label { letter-spacing: 0.16em; }
.code-line { font-family: var(--title); font-weight: 800; font-size: 28px; letter-spacing: 0.06em; }
.screen.home > .body { gap: 16px; }
@media (max-width: 360px) {
  .code-input { font-size: 36px; }
}