/* The application's only stylesheet. No framework, no build step, no client
   JavaScript; a file and not an inline <style>, because helmet's CSP forbids
   those. Every byte lands on a 2021 iPhone, so a screen's reasoning lives in
   the TS module that renders it. What stays here: rule numbers, measured
   ratios, Safari 15.0 workarounds. Budget: test/support-target.test.ts. */

:root {
  --ink: #16191d;
  --muted: #5b6470;
  --line: #d8dde3;
  --bg: #f7f8fa;
  --panel: #ffffff;
  --accent: #1d4ed8;
  --bad: #b42318;
  --good: #06603a;

  /* Green is *fatto*, and nothing else in a working screen. un-colore-suo. */
  --green: #0b5d3b;
  --green-dark: #094a2f;
  --green-soft: #e6f3ec;
  --amber-ink: #a5730a;

  /* What the week owes. Contrast pairs at the block below. */
  --bad-ink: #8a1c11;
  --bad-soft: #fdecea;
  --bad-line: #f3c2be;
  --warn-ink: #6d4a00;
  --warn-soft: #fff6e0;
  --good-soft: #e7f6ee;
  --good-line: #b7e0c9;

  /* The ink on a filled control, and the outline on her disc: one job, one
     token, so the outline follows the disc when the disc is re-lit. */
  --on-fill: #ffffff;
  /* A component's own surface: a pressed row, a table head, a code span. */
  --fill: #eef1f5;

  /* The eight women, tokens since ATO-102 so a disc can be re-lit without the
     theme reaching into every screen. Why: src/domain/users/user-identity.ts. */
  --p-azzurro: #226bbf;
  --p-notte: #003084;
  --p-oltremare: #0000fc;
  --p-glicine: #8460bc;
  --p-porpora: #40007c;
  --p-prugna: #4a1259;
  --p-orchidea: #901478;
  --p-fucsia: #c606ac;
}

/* Al buio: the same tokens, different values. Not #000 and not #fff
   (halation); the card is lighter than the page because a shadow is invisible
   here. Derived by scripts/colore-al-buio.mjs; why in src/http/ui/tema.ts.
   Read test/il-buio-che-si-legge.test.ts before touching --green or --bad. */
[data-tema='scuro'] {
  --ink: #e8e8e8; /* 15.29:1 on --bg, 13.45:1 on --panel */
  --muted: #b4b4b4; /* 9.04:1 / 7.95:1 */
  --line: #4a4a4a;
  --bg: #121212;
  --panel: #1f1f1f;
  --accent: #c9b6f5; /* 10.25:1. Violet, not blue — il-buio-che-si-legge */
  --bad: #fe8a70; /* 8.10:1 */
  --good: #6fe3c0;

  --green: #76fcda; /* 14.90:1. ΔE to --bad: 93.4 / 33.4 / 41.9 */
  --green-dark: #4fd9b4;
  --green-soft: #10312a;
  --amber-ink: #efc168; /* 11.15:1 */

  --bad-ink: #ffb4a0; /* 9.91:1 on --bad-soft */
  --bad-soft: #2e1613;
  --bad-line: #b05545;
  --warn-ink: #f5d89a; /* 11.01:1 on --warn-soft */
  --warn-soft: #2e2413;
  --good-soft: #10312a;
  --good-line: #2f8f74;

  --on-fill: #121212; /* the discs are light now, so their ink is dark */
  --fill: #2b2b2b;

  /* Re-lit: five of the eight light values are under 2.3:1 here. */
  --p-azzurro: #40a8fc;
  --p-notte: #70c8f0;
  --p-oltremare: #6c74d0;
  --p-glicine: #c070fc;
  --p-porpora: #a860bc;
  --p-prugna: #d424dc;
  --p-orchidea: #fc6ce0;
  --p-fucsia: #fc94cc;
}

/* `auto`: before she has chosen, and only then. Why it is a second copy of
   the values rather than one block: src/http/ui/tema.ts. */
@media (prefers-color-scheme: dark) {
  [data-tema='auto'] {
    --ink: #e8e8e8;
    --muted: #b4b4b4;
    --line: #4a4a4a;
    --bg: #121212;
    --panel: #1f1f1f;
    --accent: #c9b6f5;
    --bad: #fe8a70;
    --good: #6fe3c0;
    --green: #76fcda;
    --green-dark: #4fd9b4;
    --green-soft: #10312a;
    --amber-ink: #efc168;
    --bad-ink: #ffb4a0;
    --bad-soft: #2e1613;
    --bad-line: #b05545;
    --warn-ink: #f5d89a;
    --warn-soft: #2e2413;
    --good-soft: #10312a;
    --good-line: #2f8f74;
    --on-fill: #121212;
    --fill: #2b2b2b;
    --p-azzurro: #40a8fc;
    --p-notte: #70c8f0;
    --p-oltremare: #6c74d0;
    --p-glicine: #c070fc;
    --p-porpora: #a860bc;
    --p-prugna: #d424dc;
    --p-orchidea: #fc6ce0;
    --p-fucsia: #fc94cc;
  }
}

/* The switch: R3 64px, R6 quiet, R8 a control and not a destination; it reuses
   .button-undo's shape. Why: src/http/ui/tema.ts. */
.tema {
  max-width: 34rem;
  margin: 2rem 0 0;
}

* {
  box-sizing: border-box;
}

/* R1: 21px body, inherited by every unsized element. `rem` not `px` so the
   largest-text setting scales it (R1b). 1.2rem = 19.2px floor, 1.3125 = 21,
   1.5 = 24, 1.875 = 30. Why: layout.ts. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    1.3125rem/1.5 system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
}

.bar {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap; /* Why: layout.ts, on the office account's seven entries. */
}

nav a {
  color: var(--accent);
}

/* R3: 64px. Why the flex: layout.ts. */
.brand,
nav a {
  display: flex;
  align-items: center;
  min-height: 4rem;
}

.who {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  color: var(--muted);
  font-size: 1.2rem;
}

.role {
  display: inline-block;
  padding: 0 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 1.2rem;
  color: var(--muted);
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

h1 {
  font-size: 1.875rem; /* R1: 30px, page title */
}

h2 {
  font-size: 1.5rem; /* R1: 24px */
  margin-top: 2rem;
}

a {
  color: var(--accent);
}

/* Messages ---------------------------------------------------------------- */

.notice,
.error {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  /* `anywhere` is Safari 15.4 and the floor is 15.0 (SUPPORT.md), so the value
     old Safari understands goes first and it keeps that one. */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

.notice {
  background: var(--good-soft);
  border: 1px solid var(--good-line);
  color: var(--good);
}

.error {
  background: var(--bad-soft);
  border: 1px solid var(--bad-line);
  color: var(--bad);
}

.hint,
.empty,
.muted {
  color: var(--muted);
  font-size: 1.2rem;
}

/* Forms ------------------------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 26rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem;
}

.row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.inline {
  display: inline;
}

label {
  font-weight: 600;
  font-size: 1.2rem;
}

input,
select {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

select {
  min-height: 4rem; /* R3 */
  max-width: 100%; /* R14 */
}

/* The focus ring. Never remove it without replacing it. Two rules, not a bare
   `:focus-visible` (Safari 15.4, floor 15.0): an unknown pseudo-class kills the
   whole rule it sits in. 3:1 on --bg and --panel in both. layout.ts. */
input:focus,
select:focus,
button:focus,
a:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

button,
.button {
  font: inherit;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-fill);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  min-height: 4rem; /* R3 */
}

button.link {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  text-decoration: underline;
}

/* Tables ------------------------------------------------------------------ */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 1rem 0;
}

th,
td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 1.2rem;
}

th {
  background: var(--fill);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

tr:last-child td {
  border-bottom: none;
}

tr.inactive td {
  color: var(--muted);
  text-decoration: line-through;
}

/* The audit trail is read on a phone at least as often as on a desktop. */
table.audit {
  display: block;
  overflow-x: auto;
}

.changes {
  margin: 0;
  padding-left: 1rem;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

.facts dt {
  font-weight: 600;
  color: var(--muted);
  font-size: 1.2rem;
}

.facts dd {
  margin: 0;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.2rem;
  background: var(--fill);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

/* The duty badge. A solid colour from the row, inline, carrying a white glyph.
   Literal white and not --on-fill: a duty colour is data, so it is the same in
   both appearances and its glyph must be too. Why: area-badge.ts. */
.area-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  flex: none;
  /* The tile is the identity; a long name beside it must not squeeze it. */
  aspect-ratio: 1;
}

/* Badge and name as one unit, so they wrap together. */
.duty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Linea di Produzione is not cleaning. Marked, not merely coloured (R2). */
.duty .not-cleaning {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}

/* The daily loop — Oggi, Fatto, Questa settimana. A phone in a stairwell at
   seven: R1, R2, R3 64px, R4, R6, R12, capped at 34rem. Why: turni.ts. */

.today-date,
.today-week,
.today-state,
.today-note,
.duties,
.week,
.week-quando,
.go-on,
.confirm-mark,
.confirm-what,
.button-big {
  max-width: 34rem;
}

.today-date,
.today-week {
  font-size: 1.3rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* The 1.4 keeps .today-chip inside .today-date's 31.2px, so no duty moves
   down — the arithmetic is in turni.ts, which is also why. */
.today-week {
  display: flex;
  justify-content: space-between;
  line-height: 1.4;
}

.today-week .today-chip {
  margin-left: 0;
}

/* R12. The days that are not a list of duties each say so in one sentence. */
.today-state {
  font-size: 1.45rem;
  margin: 1.25rem 0;
}

/* Body size (R1), full ink (R2): the sentence that stops "non lavori" being
   read as a fault is not fine print. Why: turni.ts. */
.today-note {
  font-size: 1.3125rem;
  margin: 1.25rem 0;
}

.today-done {
  color: var(--green);
  font-weight: 700;
}

.duties {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One duty. The button inside is the only thing on the card that presses. */
.duty-card {
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 1rem;
  margin-bottom: 1rem; /* R4 */
}

.duty-done {
  border-color: var(--green);
  background: var(--green-soft);
}

.duty-what {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.duty-name {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.15rem;
}

.duty-when {
  font-size: 1.2rem;
  margin: 0;
}

/* R6, R3. One action, full width. Green means exactly one thing in this app:
   this cleaning is done. */
.button-ok {
  display: block;
  width: 100%;
  min-height: 4.75rem;
  margin-top: 0.9rem; /* R4 */
  border: none;
  border-radius: 12px;
  background: var(--green);
  color: var(--on-fill);
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
}

.button-ok:active {
  background: var(--green-dark);
}

.duty-mark {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--green);
  margin: 0.75rem 0 0;
}

/* Undo: quieter than the tick, nowhere near hidden. */
.button-undo {
  display: block;
  width: 100%;
  min-height: 4rem; /* R3 */
  margin-top: 0.6rem; /* R4 */
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}

/* What the week still owes. Four channels and only one is colour (R2):
   position, size, the left bar, the words. AAA per pair: --bad-ink on
   --bad-soft 8.1 light / 9.9 dark, --warn-ink on --warn-soft 7.4 / 11.0.
   Why: arretrati.ts. */

.arretrati,
.questa-settimana {
  max-width: 34rem;
  margin: 1.5rem 0;
}

.arretrati-titolo,
.settimana-titolo {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.arretrati-titolo {
  color: var(--bad-ink);
}

.owed-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.owed-card {
  border: 2px solid var(--line);
  border-left: 8px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 1rem;
  margin-bottom: 1rem; /* R4 */
}

.owed-what {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.owed-name {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.15rem;
}

.owed-quanto {
  font-size: 1.25rem;
  margin: 0;
}

/* Monday and Tuesday. A weekly duty early in the week is not news. */
.owed-inizio {
  border-left-color: var(--line);
}

/* Wednesday. Already moved above the day's work; the colour confirms it. */
.owed-meta {
  border-left-color: var(--accent);
}

/* Thursday onwards: the week is about to close on it. */
.owed-fine {
  border-color: var(--warn-ink);
  background: var(--warn-soft);
}

.owed-fine .owed-name {
  font-size: 1.45rem;
}

.owed-fine .owed-quanto {
  color: var(--warn-ink);
  font-weight: 700;
}

/* A week closed with it undone — the state this application exists to shout. */
.arretrato-card {
  border-color: var(--bad);
  border-left-width: 12px;
  background: var(--bad-soft);
  padding: 1.15rem;
}

.arretrato-card .owed-name {
  font-size: 1.6rem;
}

.arretrato-card .owed-quanto {
  color: var(--bad-ink);
  font-size: 1.35rem;
  font-weight: 700;
}

/* Second step, at two weeks. There is no third — the number says the rest. */
.owed-molto {
  border-left-width: 18px;
}

.owed-molto .owed-name {
  font-size: 1.75rem;
}

/* Ordinary text on purpose: inside an open week this is recoverable. */
.owed-era-per,
.owed-di-chi,
.owed-nessuno {
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0.75rem 0 0;
}

/* The confirmation screen ------------------------------------------------- */

.confirm-mark {
  font-size: 4.5rem;
  line-height: 1;
  color: var(--green);
  margin: 0.5rem 0 0.75rem;
}

.confirm-what {
  font-size: 1.45rem;
  margin: 0 0 1.5rem;
}

.button-big,
.button-plain {
  display: block;
  min-height: 4rem;
  border-radius: 12px;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  /* Padding, not flex centring: a block anchor with a minimum height is the
     one shape that behaves the same back to the 2021 floor. */
  padding: 1.1rem 1rem;
}

.button-big {
  background: var(--ink);
  border: 2px solid var(--ink);
  color: var(--on-fill);
}

.button-plain {
  background: var(--panel);
  border: 2px solid var(--ink);
  color: var(--ink);
  margin-top: 1.5rem;
}

.go-on {
  margin: 1.5rem 0 0;
}

/* The week ---------------------------------------------------------------- */

.week {
  list-style: none;
  margin: 0;
  padding: 0;
}

.week-day {
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 0.9rem 1rem;
  margin-bottom: 0.85rem;
}

.week-today {
  border-color: var(--ink);
}

.week-when {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

/* R8, settled at three: the way into a day. The whole line is the target and
   inherits .week-when's size, so R1's floor stays one declaration. turni.ts. */
.week-apri {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 5.5rem; /* R3: 88px */
  color: inherit;
}

.week-freccia {
  color: var(--ink);
}

.today-chip {
  display: inline-block;
  background: var(--ink);
  color: var(--on-fill);
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  margin-left: 0.5rem;
  vertical-align: 0.12em;
}

/* Saturday is worked, and it is overtime: marked rather than hidden. */
.overtime {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--amber-ink);
  margin-left: 0.5rem;
}

/* Her row is the large one. Everyone seeing everyone's work is the owner's
   instruction, not a permission bug. */
.week-mine {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3125rem; /* R1: 21px, body */
  margin: 0.5rem 0 0;
}

.week-mark {
  color: var(--green);
  font-weight: 700;
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* R2: not-done is a word, not the absence of one. Muted, not red: inside an
   open week nothing here is late. Why: turni.ts. */
.week-manca {
  color: var(--muted);
}

.week-free,
.week-others,
.week-away {
  color: var(--muted);
  margin: 0.5rem 0 0;
}

.week-free {
  font-size: 1.3125rem;
}

/* One line per woman, each with her circle. Why: turni.ts. */
.week-others,
.week-away {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
}

.week-away {
  color: var(--amber-ink);
}

/* The exception. R7 the whole row
   is the target, R8 a choice is a list and never a menu. Why: eccezioni.ts. */

.premessa,
.domanda,
.esito,
.turni,
.scelte,
.secondaria,
.indietro {
  max-width: 34rem;
}

.premessa {
  font-size: 1.3125rem;
  color: var(--muted);
  margin: 0 0 0.8rem;
}

.domanda {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 1.25rem 0 0.9rem;
}

/* The way back, at the top, where a thumb reaches without shifting grip. */
.indietro {
  margin: 0 0 0.75rem;
}

.indietro a {
  display: inline-block;
  min-height: 4rem; /* R3 */
  padding: 0.7rem 0.2rem;
  color: var(--ink);
  font-size: 1.3125rem;
  font-weight: 700;
  text-decoration: underline;
}

/* What the last correction did, on both screens that can. Not on a timer (R16). */
.esito,
.piano-esito {
  background: var(--fill);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  margin: 0 0 1.25rem;
}

.esito p {
  font-size: 1.3125rem;
  font-weight: 600;
  margin: 0;
}

.esito button {
  display: block;
  width: 100%;
  min-height: 4rem; /* R3 */
  margin-top: 0.75rem; /* R4 */
  font: inherit;
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
}

/* The first of the two taps: the largest targets after the green OK itself. */
.turni,
.scelte {
  list-style: none;
  margin: 0;
  padding: 0;
}

.turno-card,
.scelta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 5.5rem; /* R3, generously */
  text-align: left;
  font: inherit;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem; /* R4 */
  text-decoration: none;
  cursor: pointer;
}

.turno-card:active,
.scelta:active {
  background: var(--fill);
}

.turno-card .chi {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
}

.turno-card .mansione {
  display: block;
  font-size: 1.3125rem;
}

.turno-card .quando {
  display: block;
  font-size: 1.2rem;
  color: var(--muted);
}

.turno-card .nota {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--amber-ink);
}

/* The production line is not cleaning to be finished. Dashed, so it does not
   read as a job. */
.non-pulizia {
  border-color: var(--line);
  border-style: dashed;
}

/* A choice: the large line is the answer, the small line is why. */
.scelta .etichette,
.nonpuo .etichette {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
}

.scelta .sotto,
.nonpuo .sotto {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.1rem;
}

.scelte .sotto.vuoto {
  color: var(--amber-ink);
  font-weight: 700;
}

/* A row that cannot be tapped must not look like one, and must not vanish:
   a name that disappears sends her looking. */
.nonpuo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 5.5rem;
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  background: var(--bg);
  color: var(--muted);
}

/* The one answer that destroys something. Amber means exactly one thing in
   this app: look at this before you press it. */
.scelta.togli {
  border-color: var(--amber-ink);
  background: var(--warn-soft);
  color: var(--ink);
}

/* Adding a shift: visible, and visibly secondary. */
.secondaria {
  margin-top: 2.25rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

.secondaria p {
  font-size: 1.2rem;
  color: var(--muted);
  margin: 0;
}

/* Chi fa che cosa. R1 nothing under 1.2rem, R3
   targets 4rem and row cells 4.5, R4 0.875rem apart, R7 whole cells, R12 state
   in words. Why: src/http/ui/chi-fa-che-cosa.ts. */

.piano,
.piano-quando,
.piano-stato,
.piano-avviso,
.piano-esito,
.scelta-cosa,
.scelta-domanda {
  max-width: 34rem;
}

.piano-quando,
.week-quando {
  font-size: 1.2rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

/* R12. The state of the week, in words, and the first thing read. */
.piano-stato {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

/* R17. Never red: a week nobody organised is a fact, not an error. Amber. */
.piano-avviso {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--amber-ink);
  background: var(--warn-soft);
  border: 2px solid var(--amber-ink);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  margin: 0 0 1.25rem;
}

/* R10. What just happened and the way back out of it; the box is declared with
   .esito above. */
.piano-esito p {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}

.piano {
  list-style: none;
  margin: 0;
  padding: 0;
}

.piano-riga {
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.875rem; /* R4 */
  background: var(--panel);
}

/* Nobody has placed this yet: not green (that means *fatto*) and not amber
   (this is not a fault). Why: chi-fa-che-cosa.ts. */
.piano-da-fare {
  border-color: var(--ink);
}

.piano-cosa {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.piano-nome {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}

/* R2: the word carries the state; the colour only agrees with it. */
.piano-ritardo {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0.2rem 0 0;
}

.piano-recuperabile {
  color: var(--amber-ink);
}

.piano-arretrato {
  color: var(--bad);
}

/* Side by side on a tablet, stacked on a phone, 14px apart either way (R4). */
.piano-celle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem; /* R4 */
  margin-top: 0.875rem;
}

.piano-cella {
  flex: 1 1 12rem;
  min-height: 4.5rem; /* R3 */
  display: block;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
}

.piano-cella:active {
  background: var(--fill);
}

.piano-etichetta {
  display: block;
  font-size: 1.2rem;
  color: var(--muted);
}

.piano-valore {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
}

/* One target, not two, when there is nothing to change yet (R6). */
.piano-scegli {
  display: block;
  min-height: 4.5rem; /* R3 */
  margin-top: 0.875rem; /* R4 */
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 1.1rem 1rem;
  background: var(--ink);
  color: var(--on-fill);
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

/* The pickers reuse `.scelte`/`.scelta`, so a choice looks the same wherever
   she meets one. */
.scelta-cosa {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.scelta-domanda {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

/* Where it already is. Marked by a word as well as a fill (R2). */
.scelta-adesso {
  background: var(--fill);
}

/* Chi sei? — the way in on the shared tablet, and her name on every screen.
   R9b/R9c. Why: src/http/ui/chi-sei.ts. */
.chi-sei {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem; /* R4 asks 14px; a mis-tap here misattributes a shift */
  margin: 1rem 0 0;
}

.chi-sei-nome {
  flex: 1 1 14rem;
  min-height: 13rem; /* R3, far past the 88px of a list row */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background: var(--panel);
  border: 3px solid var(--ink); /* a hairline says nothing at arm's length */
  border-radius: 0.75rem;
  color: var(--ink);
  cursor: pointer;
}

.chi-sei-etichetta {
  font-size: 1.875rem; /* R1: 30px. It is the page. */
  font-weight: 700;
}

/* After the tablet has come back here on its own (E1). R15: what to do next. */
.chi-sei-tornata {
  font-size: 1.3125rem; /* R1: 21px */
  background: var(--warn-soft);
  color: var(--warn-ink);
  border-left: 6px solid var(--amber-ink);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}

.chi-sei-vuoto {
  font-size: 1.3125rem;
  color: var(--bad-ink);
}

/* A face, or the outline standing in until she takes one. Sized inline by the
   caller. */
.volto {
  border-radius: 50%;
  object-fit: cover;
  background: var(--fill);
  flex: none;
  vertical-align: middle; /* the small ones sit in running text */
}

/* The face-outline default; the circle under it is hers, inline. chi-sei.ts. */
.volto-linee {
  fill: none;
  stroke: var(--on-fill); /* >= 4.5:1 on every disc, in both appearances */
  stroke-width: 2.1;
  stroke-linecap: round;
}

/* La mia foto. Why: la-mia-foto.ts. */
.foto-mia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.foto-mia form {
  width: 100%;
}

.foto-mia input[type='file'],
.foto-mia button {
  min-height: 4rem; /* R3 */
}

.foto-mia input[type='file'] {
  padding: 0.9rem;
  width: 100%;
}

.foto-altra {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  min-height: 4rem; /* R3 */
}

/* Her circle is the way to it. Why: layout.ts. */
.who-mia {
  color: inherit;
  text-decoration: none;
  min-height: 4rem; /* R3 */
}

/* Her name on every screen, and the way out beside it (R9c). */
.chi-sono {
  margin-left: auto;
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

.chi-sono-nome {
  font-size: 1.3125rem; /* R1: 21px */
  font-weight: 700;
  color: var(--ink);
}

/* Outlined, never filled: R6 allows one primary action and this is not it. */
.ho-finito {
  min-height: 4rem; /* R3: 64px */
  padding: 0 1.5rem;
  font-size: 1.3125rem;
  font-weight: 700;
  background: var(--panel);
  color: var(--ink); /* 17.6:1 on white */
  border: 3px solid var(--ink);
  border-radius: 0.5rem;
  cursor: pointer;
}