/* The tablet's screens, in the design mock-up's look (DESIGN-MOCK-PLAN § 6, § 10d), carried over from
   mock/src/mock.css. Colours, fonts and the heading style come from brand.css, which the build makes
   from the brand folder; nothing here names a brand.

   Sizes: every key at least 64 × 64 px with at least 12 px between keys; the PIN pad and the main
   actions at least 88 px tall; body text at least 20 px and tile labels at least 26 px; the station's
   name at least 32 px, in its own band; the clock at least 120 px, in fixed-width figures.
   One go key per screen. Stop (red) is only Stop and Fail. Finished tasks say so in blue text. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font: 500 22px/1.3 var(--font-body);
  color: var(--on-paper);
  background: var(--paper);
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overflow: hidden;
}
button, select, input, textarea { font: inherit; color: inherit; margin: 0; }
input, textarea { -webkit-user-select: text; user-select: text; }
button { cursor: pointer; }
button:disabled { cursor: default; }
p, dl, dd, ul { margin: 0; padding: 0; }

#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* The heading face: headings, keys, task names, bike numbers. */
h1, h2, h3, .btn, .task-name, .station, .num, .initials, .clock, .reason, .check, .kicker, .chip, .finished {
  font-family: var(--font-heading);
  font-style: var(--heading-style);
  text-transform: var(--heading-case);
  font-weight: 800;
  letter-spacing: 0.01em;
}
/* Screen titles keep the heading face but not the brand's capitals: they are sentences the person
   reads ("Qui êtes-vous ?"), and the page's text must say them as written (suite 10 reads it). */
h1 { font-size: 40px; line-height: 1.1; margin: 0 0 16px; text-transform: none; }
h2 { font-size: 28px; line-height: 1.15; margin: 0 0 10px; }
h3 { font-size: 26px; line-height: 1.15; margin: 0 0 6px; }

/* ---- The header ---- */

.head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px 16px;
  padding: max(12px, env(safe-area-inset-top)) 20px 12px;
  background: var(--head);
  color: var(--on-head);
  border-bottom: 2px solid var(--line);
}
.head-left { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.head-right { flex: none; display: flex; align-items: center; gap: 14px; margin-left: auto; }
.logo { display: block; height: 40px; width: auto; max-width: 100%; }
.badge { font-size: 20px; font-weight: 700; padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.net.on { background: var(--online); color: var(--on-online); }
.net.off { background: var(--offline); color: var(--on-offline); }
.unsent.grey { background: var(--unsent); color: var(--on-unsent); }
.unsent.amber { background: var(--offline); color: var(--on-offline); }
.unsent.red, .refused { background: var(--stop); color: var(--on-stop); }
.me { font-size: 24px; font-weight: 700; }
.head .btn { font-size: 24px; padding: 10px 18px; }
.lang { min-width: 72px; }

/* The station's name, large, in its own band under the header. */
.band {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 24px;
  padding: 10px 24px 12px;
  border-bottom: 2px solid var(--line);
}
.band .station { flex: 1 1 auto; min-width: 0; font-size: 44px; line-height: 1.05; overflow-wrap: anywhere; }
.band .station.none { font-family: var(--font-body); font-style: normal; text-transform: none; font-weight: 700; font-size: 26px; color: var(--muted); }
.band-info { flex: none; display: flex; gap: 14px; font-size: 20px; color: var(--muted); }
.banner { flex: none; padding: 10px 24px; background: var(--offline); color: var(--on-offline); font-size: 22px; font-weight: 700; }

/* ---- Keys ---- */

.btn {
  min-width: 64px;
  min-height: 64px;
  padding: 10px 22px;
  border-radius: 12px;
  border: 2px solid var(--edge);
  background: var(--paper);
  color: var(--on-paper);
  font-size: 26px;
  line-height: 1.1;
}
.btn.go { background: var(--go); color: var(--on-go); border-color: var(--go); }
.btn.stop { background: var(--stop); color: var(--on-stop); border-color: var(--stop); }
.btn.big { min-height: 96px; font-size: 36px; padding: 12px 34px; }
.btn:disabled { opacity: 0.4; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn:not(:disabled):active, .tile:active, .open:active, .task:not(:disabled):active, .tick:active, .check:active { filter: brightness(0.9); }

/* ---- Screens ---- */

main.screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 28px 24px;
}
.lead { font-size: 24px; margin: 4px 0 12px; }
.note { font-size: 20px; color: var(--muted); margin-top: 16px; }
.message { font-size: 22px; font-weight: 700; margin: 6px 0; }
.message.error { color: var(--on-paper); border-left: 8px solid var(--stop); padding-left: 12px; }
.message.ok, .message.info { border-left: 8px solid var(--go); padding-left: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 16px; }
.status { font-size: 26px; font-weight: 700; text-align: center; padding: 18px 12px; border: 2px dashed var(--edge); border-radius: 12px; }

/* Enrol, set my PIN */
main.screen-enrol, main.screen-setup { align-items: center; text-align: center; }
.code-input {
  width: min(420px, 100%);
  min-height: 80px;
  margin: 8px 0 18px;
  padding: 10px 16px;
  border: 3px solid var(--edge);
  border-radius: 12px;
  background: var(--paper);
  font-size: 40px;
  text-align: center;
  letter-spacing: 0.08em;
}

/* Who are you? */
main.screen-grid h1, main.screen-pin h1 { text-align: center; }
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); justify-content: center; gap: 16px; width: 100%; }
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 20px 12px;
  border: 2px solid var(--edge);
  border-radius: 16px;
  background: var(--paper);
  color: var(--on-paper);
}
.tile .initials { font-size: 64px; line-height: 1; }
.tile .name { font-size: 28px; font-weight: 700; }
.tile .badge { font-size: 26px; border: 2px solid var(--edge); }

/* The PIN pad */
main.screen-pin { align-items: center; }
.dots { display: flex; justify-content: center; gap: 18px; min-height: 48px; align-items: center; }
.dot { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ink); }
.dot.full { background: var(--ink); }
.lock { font-size: 26px; font-weight: 700; text-align: center; min-height: 48px; }
.pad { display: grid; grid-template-columns: repeat(3, 132px); gap: 14px; margin: 12px auto 0; }
.key { min-height: 90px; padding: 0; font-size: 40px; }
.key.word { font-size: 26px; }

/* Home */
main.view-home { align-items: center; text-align: center; }
.home-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 18px; }
.home-key { min-width: 300px; min-height: 160px; font-size: 44px; }
.running { display: flex; flex-direction: column; align-items: center; margin: 6px 0 10px; padding: 10px 40px 18px; border: 2px solid var(--edge); border-radius: 16px; }
.reason { font-size: 40px; }
.since { font-size: 28px; font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.clock { font-size: 140px; line-height: 1; margin: 8px 0 4px; white-space: nowrap; font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.clock .dig { display: inline-block; width: 0.6em; text-align: center; }
.clock .sep { display: inline-block; width: 0.3em; text-align: center; }

/* The bikes at this station */
main.view-bikes, main.view-codes { overflow-y: hidden; }
.scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px; }
.bikes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card { display: flex; align-items: stretch; gap: 12px; padding: 12px; border: 2px solid var(--edge); border-radius: 16px; background: var(--paper); }
.card.ticked { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.tick {
  flex: none;
  align-self: center;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--on-paper);
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}
.tick[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.open {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 4px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--on-paper);
  text-align: left;
}
.open .num { font-size: 44px; line-height: 1.05; }
/* Build 14b: the serial first, the bike's number beside it, smaller and quieter (never on a line of its own word). The
   number is a box of its own, so when the two do not fit on one line the number goes under the serial whole, rather than
   the serial breaking at its hyphen; its space before the dot is its margin (a box drops a space it starts with). */
.num .serial { overflow-wrap: anywhere; }
.num .jobno { display: inline-block; margin-inline-start: 0.25em; font-size: 0.6em; color: var(--muted); white-space: nowrap; }
/* Build 14c (§ 3 F 2): a number wrapped under its serial never starts its line with the dot. The serial and the number sit in
   a wrapping row shifted left by the dot's room (0.6em), clipped at the row's own left edge: the serial takes that room as
   its padding, the number's dot fills it; so on a line of its own the number's dot falls in the clipped room. */
.num:has(> .jobno) { display: flex; flex-wrap: wrap; align-items: baseline; margin-inline-start: -0.6em; clip-path: inset(-0.5em -0.5em -0.5em 0.6em); }
.num:has(> .jobno) > .serial { padding-inline-start: 0.6em; min-width: 0; }
.num:has(> .jobno) > .jobno { margin-inline-start: 0; }
.num .jobno .sep { display: inline-block; width: 1em; text-align: center; }
.open .meta, .open .line { font-size: 26px; overflow-wrap: anywhere; }
.open .line { font-weight: 700; }
.open .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px; font-size: 26px; }
.ticks { color: var(--muted); font-weight: 700; }
.chip { font-size: 22px; padding: 2px 12px; border-radius: 8px; border: 2px solid var(--ink); }
.card .chip { font-size: 26px; }
.chip.amber { background: var(--offline); color: var(--on-offline); border-color: var(--offline); }
.chip.go { border-color: var(--go-text); color: var(--go-text); }
.dock { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; }
.dock .btn.go { margin-left: auto; }

/* The bike, or the batch */
main.view-bike { overflow-y: hidden; }
.bike-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 32px;
}
.bike-body { display: contents; }
.bike-layout .left { grid-column: 1; grid-row: 1 / 3; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 2px; }
.bike-layout .right { grid-column: 2; grid-row: 1; min-height: 0; display: flex; flex-direction: column; }
.bike-dock { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.left h1.num { font-size: 60px; margin: 0; }
.meta { font-size: 30px; font-weight: 700; }
.left h2 { margin: 8px 0 0; }
.part { width: 100%; }
.part .row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.part dt { font-size: 20px; color: var(--muted); align-self: center; }
.part dd { font-size: 24px; font-weight: 700; overflow-wrap: anywhere; align-self: center; }
.tasks { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 12px; }
.task {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 10px 18px 10px 12px;
  border: 2px solid var(--edge);
  border-radius: 12px;
  background: var(--paper);
  color: var(--on-paper);
  font-size: 24px;
  line-height: 1.15;
  text-align: left;
}
.task:disabled { opacity: 1; }
.task .mark { flex: none; width: 28px; font-size: 28px; text-align: center; font-weight: 800; }
.task .label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task .aside { font-size: 20px; font-weight: 600; }
.task.done { color: var(--muted); border-style: dashed; }
.task.to-correct { border-color: var(--offline); box-shadow: inset 8px 0 0 var(--offline); }
.task.selected { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.finished { flex: none; font-size: 22px; color: var(--go-text); }
.finished.amber { color: var(--on-paper); }
.task.selected .finished { color: var(--on-ink); }
.start { width: 100%; }
.undo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 6px 6px 16px; border: 2px solid var(--ink); border-radius: 12px; font-size: 24px; font-weight: 700; }
.undo.expired { visibility: hidden; }
.batch-list { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.batch-bike { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; }
.batch-bike .num { font-size: 32px; }
.batch-bike .brief { font-family: var(--font-body); font-style: normal; text-transform: none; font-weight: 600; font-size: 22px; overflow-wrap: anywhere; }

/* The check, and a fail */
main.view-check, main.view-code { align-items: center; text-align: center; }
.pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 22px 0 16px; }
.pair .btn.big { min-width: 300px; min-height: 112px; font-size: 44px; }
.fail-tasks { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.check {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 80px;
  padding: 8px 26px 8px 12px;
  border: 2px solid var(--edge);
  border-radius: 12px;
  background: var(--paper);
  color: var(--on-paper);
  font-size: 28px;
}
.check .box { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 3px solid var(--ink); border-radius: 8px; font-size: 40px; font-style: normal; }
.check[aria-pressed="true"] .box { background: var(--ink); color: var(--on-ink); }
.field { display: block; font-size: 22px; font-weight: 700; margin: 10px 0 6px; }
textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 3px solid var(--edge);
  border-radius: 12px;
  background: var(--paper);
  font-size: 24px;
  resize: none;
}

/* Other work */
.codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; gap: 14px; width: 100%; }
.codes .btn.big { font-size: 30px; }

/* ---- The sheets: the full work order, and a note ---- */

.scrim { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.5); }
.sheet { background: var(--paper); color: var(--on-paper); overflow-y: auto; overflow-x: hidden; }
.sheet.part { width: min(920px, 100%); max-height: 100%; padding: 20px 26px 26px; border-radius: 18px; }
.sheet.full { position: absolute; inset: 0; z-index: 20; padding: max(16px, env(safe-area-inset-top)) 28px 24px; }
.sheet-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 10px; }
.sheet-head .title { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 18px; }
.sheet-head .kicker { flex-basis: 100%; }
.sheet-head .num { font-size: 48px; line-height: 1.05; margin: 0; }
.kicker { font-size: 24px; color: var(--muted); }
.close { flex: none; min-width: 220px; min-height: 88px; }
.sections { columns: 2 400px; column-gap: 44px; }
.wo-section { break-inside: avoid; margin-bottom: 14px; }
.wo-section h3 { margin-bottom: 2px; }
.wo-section .part .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 3px 0; }
.wo-section .part dd { font-size: 22px; }

/* ---- Portrait ---- */

@media (orientation: portrait) {
  .head { flex-wrap: wrap; }
  .bike-layout { display: flex; flex-direction: column; }
  .bike-body { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  .bike-layout .left, .bike-layout .right, .tasks { overflow: visible; min-height: auto; }
  .bike-layout .left { margin-bottom: 24px; }
  .bike-dock { flex: none; }
  .pair .btn.big { min-width: 260px; }
  .home-key { min-width: 260px; }
}

/* ---- Stage 4 Part C: training, the note's sheet, My day ---- */

/* "With <name>" under Done, ticked while the pair covers the task. */
.check.with { flex: none; align-self: stretch; justify-content: flex-start; font-size: 26px; }

/* A task to correct: its row, and the key that opens its whole note beside it. The note's start stays
   on one line, so a long note never moves the task's keys. */
.task-line { flex: none; display: flex; align-items: stretch; gap: 12px; }
.task-line .task { flex: 1 1 auto; min-width: 0; }
.task .correct-note { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-key { flex: none; min-width: 150px; font-size: 22px; padding: 8px 16px; white-space: normal; }
.note-sheet .note-text { font-size: 26px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 16px; -webkit-user-select: text; user-select: text; }
.note-who { font-size: 22px; font-weight: 700; color: var(--muted); }

/* My day: today, then this week; what waits for a correction first. */
main.view-my { overflow-y: hidden; }
.my-day { margin: 0 0 20px; }
.my-day h2 { margin: 4px 0 6px; }
.my-day.to-correct h2 { border-left: 8px solid var(--offline); padding-left: 12px; }
.my-list { list-style: none; display: flex; flex-direction: column; }
.my-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 24px; }
.my-row.muted { color: var(--muted); }
.my-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.my-with { font-size: 22px; font-weight: 600; color: var(--muted); }

/* ---- Stage 4 Part B: the person's codes elsewhere or left running, Punch in and out, My day grouped ---- */

/* On home, after the PIN: a code still running on another tablet, or left running at the end of the day, each
   with Stop. */
.notices { display: flex; flex-direction: column; gap: 12px; width: min(100%, 880px); margin: 0 0 12px; }
.notice-card { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 2px solid var(--offline); border-left-width: 10px; border-radius: 14px; background: var(--paper); text-align: left; }
.notice-text { flex: 1 1 auto; min-width: 0; font-size: 24px; font-weight: 700; overflow-wrap: anywhere; }
.notice-card .btn.stop { flex: none; min-height: 88px; min-width: 180px; font-size: 30px; }

/* Punch in and Punch out, with today's taps. */
.punch { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--line); width: min(100%, 880px); }
.punch-status { font-size: 24px; font-weight: 700; }
.punch-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.punch-key { min-width: 280px; min-height: 96px; font-size: 32px; }

/* My day: a group per bike and station, its tasks one tap away. */
.my-group { border-bottom: 1px solid var(--line); padding: 6px 0; }
.my-open { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 64px; padding: 10px 4px; border: 0; background: transparent; color: var(--on-paper); text-align: left; font-size: 24px; }
.my-open::after { content: "›"; font-size: 30px; font-weight: 800; }
.my-open[aria-expanded="true"]::after { content: "⌄"; }
.my-sub { padding-left: 24px; }
.my-sub[hidden] { display: none; }
.my-row.voided .my-main { text-decoration: line-through; }