/* ============================================================
   styles.css — il tema di Shift.

   E' il design approvato dal committente (design/shift-standalone.html),
   portato sulle classi che index.html e app.js usano davvero. Qui c'e' SOLO
   aspetto: nessun id cambia e nessuna classe sparisce. Ogni classe che app.js
   crea a runtime ha una regola in questo file — .shot, .shots-day, .num,
   .row-total, .cell-empty, .input-rate, .consent-bad, .consent-none — perche'
   una classe dimenticata qui non si vede subito: compare non stilata solo
   quando qualcuno carica il primo screenshot o apre la griglia delle ore.

   TEMA UNICO, SCURO. Il mockup e' scuro e basta: non esiste una variante
   chiara, e inventarne una significherebbe consegnare un'interfaccia che il
   committente non ha visto. Per questo non c'e' nessuna media query
   prefers-color-scheme e ogni colore, sfondo del body compreso, e' dichiarato.

   TRE REGOLE CHE NON SONO ESTETICA e vanno tenute anche riscrivendo tutto:
   1. [hidden] { display: none !important } — le schermate e il lightbox si
      nascondono con l'attributo hidden, ma hanno display: flex/grid, che
      vincerebbe. Senza questa riga si vedono tutte le schermate insieme.
   2. .offscreen tiene il <video> della cattura dentro il documento con una
      dimensione VERA invece di display:none o di 1px — un video nascosto cosi'
      non decodifica fotogrammi, e il canvas ne ricava un'immagine nera: uno
      screenshot che sembra preso e non ha mai guardato niente.
   3. .table-scroll scorre da solo in orizzontale — la griglia delle ore ha
      trentuno colonne e su telefono la PAGINA non deve scorrere di lato.
   ============================================================ */

:root {
  /* Superfici, dalla piu' profonda alla piu' vicina */
  --bg:            #0d1012;   /* la pagina, e il fondo dei campi */
  --surface:       #14181b;   /* le card */
  --surface-2:     #1c2226;   /* pulsanti secondari, righe in evidenza */
  --surface-3:     #1e2327;   /* separatori interni */

  /* Bordi: sottile, marcato, e quello che risponde al passaggio del mouse */
  --line:          #262c31;
  --line-strong:   #333a40;
  --line-hover:    #4a545b;

  /* Testo, dal piu' presente al piu' tenue */
  --text:          #e8ecee;
  --text-2:        #dde2e5;
  --text-3:        #c3cace;
  --muted:         #98a2a8;
  --faint:         #6b757b;
  --fainter:       #4f585e;

  /* Accento: il blu del mockup. E' l'unico colore forte dell'interfaccia e
     sta solo sulle azioni primarie e sui collegamenti. */
  --accent:        oklch(0.7 0.08 240);
  --accent-hover:  oklch(0.76 0.08 240);
  --accent-link:   oklch(0.74 0.08 240);
  --on-accent:     #0d1012;

  /* Semantici: dicono uno STATO, non sono varianti dell'accento. Lo stato del
     turno e' sempre accompagnato da una parola, mai affidato al solo colore. */
  --ok:            oklch(0.74 0.13 150);
  --ok-text:       oklch(0.84 0.09 150);
  --warn:          oklch(0.8 0.12 78);
  --warn-text:     oklch(0.87 0.08 78);
  --warn-bg:       oklch(0.35 0.09 30 / 0.5);
  --danger:        oklch(0.55 0.13 25);
  --danger-text:   oklch(0.86 0.07 25);
  --danger-bg:     oklch(0.3 0.06 25 / 0.35);

  /* Raggi: 4px e' il valore normale, 6px sta alle card, 3px alle cose piccole */
  --r-sm: 3px;
  --r:    4px;
  --r-lg: 6px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent-link); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

button, input, select, textarea { font: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Vedi la nota 1 in cima: senza questa riga si vedono tutte le schermate
   insieme, perche' hanno display: flex/grid. */
[hidden] { display: none !important; }

/* Vedi la nota 2 in cima: dimensione VERA, fuori dallo schermo. */
.offscreen {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 320px;
  height: 200px;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------
   AVVIO
   ------------------------------------------------------------ */
.boot {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 14px;
}

/* ------------------------------------------------------------
   GUSCIO
   ------------------------------------------------------------ */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface-3);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 20;
}

.brand { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

.topbar-spacer { flex: 1 1 auto; }

.who {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

/* Nel mockup e' un'icona; qui il markup porta la parola "Menu", quindi il
   pulsante si dimensiona sul testo invece di essere un quadrato che lo taglia.
   min-height 38px perche' resti un bersaglio comodo per il pollice. */
.nav-toggle {
  display: none;
  align-items: center;
  padding: 8px 12px;
  min-height: 38px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--line-hover); }

/* Il guscio occupa tutta l'altezza e la zona centrale se la prende: senza,
   la barra laterale sarebbe alta quanto le sue voci e il "Sign out" in fondo
   resterebbe appiccicato sotto l'ultimo collegamento invece che in basso.
   E' fatto con il flex e non con un calc(100vh - altezza barra) perche' quel
   numero cambierebbe da solo il giorno in cui l'header cresce. */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.layout { display: flex; align-items: stretch; flex: 1 1 auto; }

.sidenav {
  width: 236px;
  flex: 0 0 236px;
  border-right: 1px solid var(--surface-3);
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navlink {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r);
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
}
.navlink:hover { background: var(--surface); color: var(--text-2); text-decoration: none; }
/* La voce corrente ha un fondo pieno, non solo un colore diverso: su fondo
   scuro un semplice cambio di tinta si perde. */
.navlink.is-active { background: var(--surface-2); color: var(--text); }

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--surface-3);
}

.nav-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fainter);
  padding: 0 10px 6px;
}

/* Il fondo della barra laterale: "margin-top: auto" lo spinge in basso, cosi'
   uscire non finisce in mezzo alle voci di navigazione, che sono un'altra cosa. */
.nav-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--surface-3);
}
.nav-foot .btn { width: 100%; }

.views {
  flex: 1 1 auto;
  min-width: 0; /* senza, il contenuto largo sfonda il flex invece di scorrere */
  padding: clamp(20px, 3.4vw, 46px) clamp(16px, 3.4vw, 46px) 72px;
}

.screen { max-width: 940px; }
.screen-clock { max-width: 780px; }
.screen-consent { max-width: 680px; }

/* Le schermate pubbliche non hanno guscio e nel mockup la card sta al centro
   della pagina. Senza togliere il max-width della sezione, il "margin: auto"
   della card centrerebbe dentro 940px e non nella finestra: su uno schermo
   largo il modulo di accesso resta appiccicato a sinistra. */
.screen-login,
.screen-forgot,
.screen-invite,
.screen-reset {
  max-width: none;
  min-height: 76vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Misure prese dal mockup: clamp(20px, 2.6vw, 26px) e -0.015em. Il mockup usa
   due soli pesi, 400 e 600: qui e in tutto il file non compare mai il 500. */
.screen-title {
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0 0 6px;
  text-wrap: balance;
}

/* ------------------------------------------------------------
   CARD E TESTI DI SERVIZIO
   ------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin: 0 0 18px;
}

.card-narrow {
  width: 100%;
  max-width: 372px;
  padding: 24px;
  margin: 0 auto;
}

/* Nel mockup l'etichetta sopra un valore ("Today", "This month", "Start",
   "Net") e' una micro-label maiuscola da 11px, non un titolo: e' quella forma
   che tiene il valore grande come protagonista della card. */
.card-title {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint);
  margin: 0 0 10px;
}

.quiet { color: var(--muted); font-size: 13px; margin: 0 0 12px; }

.empty { color: var(--faint); font-size: 14px; padding: 28px 0; margin: 0; }

/* Messaggi: il bordo colorato fa il lavoro, il fondo resta scuro. Un blocco
   pieno di colore acceso su fondo scuro abbaglia e si legge peggio. */
.msg {
  font-size: 13px;
  line-height: 1.5;
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text-3);
}
.msg-error { border-color: var(--danger); background: var(--danger-bg); color: var(--danger-text); }
.msg-warn  { border-color: var(--warn);   background: var(--warn-bg);   color: var(--warn-text); }

.banner {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--warn);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text-3);
}
.banner-quiet { border-left-color: var(--faint); color: var(--muted); }

/* ------------------------------------------------------------
   MODULI
   ------------------------------------------------------------ */
.form { display: flex; flex-direction: column; }

.field { display: block; margin: 0 0 18px; }

.field-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; }

.input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--text);
  min-width: 0;
}
.input:hover { border-color: var(--line-hover); }
.input:focus { border-color: var(--accent); outline: none; }
.input::placeholder { color: var(--fainter); }
select.input { cursor: pointer; }

/* Il campo della tariffa vive dentro una cella di tabella: stretto, in
   monospace e allineato ai numeri della colonna. */
.input-rate {
  width: 84px;
  padding: 7px 9px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Nelle barre degli strumenti l'etichetta sta sopra il campo, e la barra
   dispone le coppie in riga. */
.field-inline { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.field-inline .input { width: auto; }

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--text-3);
  cursor: pointer;
}
.field-check input { margin-top: 3px; accent-color: var(--accent); width: auto; }

.form-row { flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
/* In riga i margini verticali dei campi disallineerebbero tutto rispetto al
   pulsante, che e' allineato in basso. */
.form-row .field,
.form-row .field-check { margin: 0; }
.form-row .field-check { align-items: center; padding-bottom: 9px; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 0 0 18px;
}

/* ------------------------------------------------------------
   PULSANTI
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { border-color: var(--line-hover); text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { border: 0; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }

.btn-quiet { background: transparent; border-color: var(--line-strong); color: var(--text-3); }
.btn-quiet:hover { border-color: var(--line-hover); }

/* Chiudere un turno e cancellare uno screenshot non sono azioni primarie:
   il rosso qui e' un contorno, non un invito a premere. */
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger-text); }
.btn-danger:hover { background: var(--danger-bg); }

.btn-big { padding: 14px 26px; font-size: 16px; font-weight: 600; min-height: 48px; }

/* Nei moduli verticali il pulsante occupa la riga; nelle barre no. */
.form > .btn { width: 100%; margin-top: 4px; }
.form-row > .btn, .toolbar > .btn { width: auto; margin-top: 0; }

/* ------------------------------------------------------------
   OROLOGIO
   ------------------------------------------------------------ */
.clock-card { padding: clamp(22px, 4vw, 34px); margin-bottom: 20px; }

/* Stato: pallino piu' parola. Il colore lo decide la classe sulla card, che
   app.js aggiorna a ogni battito. */
.clock-state-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--faint);
  margin: 0 0 clamp(14px, 3vw, 22px);
}
.clock-state-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 8px;
}
.clock-card.is-running .clock-state-label { color: var(--ok); }
.clock-card.is-paused  .clock-state-label { color: var(--warn); }

/* Il cronometro e' l'unica cosa grande della schermata. tabular-nums non e'
   un vezzo: senza, le cifre cambiano larghezza a ogni secondo e il numero
   trema per otto ore. */
.clock-timer {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(56px, 13vw, 132px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}
.clock-card.is-paused .clock-timer { color: var(--muted); }

#clock-started { margin: 14px 0 0; }

.clock-actions {
  margin-top: clamp(22px, 4vw, 34px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* L'indicatore di cattura e' la promessa dell'informativa resa visibile:
   non si nasconde e non si fa piccolo. */
.capture-card { margin-bottom: 20px; }

.capture-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text-2);
}

.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--faint); }
.dot-on { background: var(--ok); box-shadow: 0 0 0 3px oklch(0.74 0.13 150 / 0.18); }
.dot-paused { background: var(--warn); }
.dot-off { background: var(--fainter); }

#capture-last { margin: 0; }

.totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.total-card { margin: 0; }

.total-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.total-pay {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 0;
}

.summary-card { border-color: var(--line-strong); }
.summary-line {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--text-2);
  margin: 0 0 6px;
}
#summary-reason { margin: 0; }

.consent-recap { margin-top: 4px; }

/* ------------------------------------------------------------
   INFORMATIVA
   ------------------------------------------------------------ */
.consent-version { font-size: 12px; color: var(--faint); margin: 0 0 30px; }

.consent-intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-3);
  margin: 0 0 32px;
  max-width: 58ch;
  text-wrap: pretty;
}

/* I punti sono numerati perche' l'ordine e' quello in cui vanno letti, e
   perche' un punto si cita per numero quando qualcuno chiede spiegazioni.
   Il numero e' in monospace e tenue: guida, non urla. */
.consent-points {
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 22px;
  counter-reset: punto;
}
.consent-points li {
  counter-increment: punto;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}
.consent-points li::before {
  content: counter(punto, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--faint);
  padding-top: 3px;
}

.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Stati del consenso, scritti da app.js nella riga della persona. */
.consent-bad  { color: var(--warn-text); }
.consent-none { color: var(--danger-text); }

/* ------------------------------------------------------------
   SCREENSHOT
   ------------------------------------------------------------ */
.shots-days { display: flex; flex-direction: column; gap: 30px; margin-top: 20px; }

.shots-day-title {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--surface-3);
}

.shots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.shot {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Il rapporto 16:9 e' fissato: senza, ogni miniatura che finisce di caricare
   sposta quelle sotto e la griglia balla mentre si scorre. */
.shot-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--bg);
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0;
  cursor: zoom-in;
  color: var(--faint);
  font-size: 12px;
}

.shot-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 11px;
  font-size: 12px;
  color: var(--muted);
}

.shot-time { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
.shot-diff { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.shot-who  { color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cancellare uno screenshot e' irreversibile: il pulsante e' piccolo, senza
   colore, in fondo alla riga, e chiede conferma da codice. */
.shot-del {
  margin-left: auto;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: var(--r-sm);
  color: var(--faint);
  border-color: transparent;
  background: transparent;
}
.shot-del:hover { color: var(--danger-text); border-color: var(--danger); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 8, 9, 0.9);
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}

.lightbox-bar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.lightbox-caption {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  flex: 1 1 auto;
}

.lightbox-img {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  border-radius: var(--r);
}

/* ------------------------------------------------------------
   TABELLE (pannello amministratore)
   ------------------------------------------------------------ */
.table-scroll {
  overflow-x: auto;               /* vedi la nota 3 in cima */
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin: 0 0 18px;
}

.table { width: 100%; border-collapse: collapse; font-size: 14px; }

.table th {
  text-align: left;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--surface-3);
  color: var(--text-2);
  vertical-align: middle;
  white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }

/* La riga dei totali delle paghe sta in un tfoot fatto di th. */
.table tfoot th {
  border-top: 1px solid var(--line-strong);
  border-bottom: 0;
  color: var(--text);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  background: var(--surface-2);
}

/* Dentro le celle i campi si dimensionano sul contenuto: con width 100% il
   menu del ruolo veniva troncato a meta' parola. */
.table td .input { width: auto; min-width: 7rem; }
/* Alla stessa specificita' della riga sopra, altrimenti la larghezza fissa
   del campo tariffa perderebbe e la colonna dei numeri si allargherebbe. */
.table td .input-rate { width: 84px; min-width: 0; }

/* Ogni numero incolonnato e' in monospace a larghezza fissa: in una colonna
   di ore e di importi e' l'unico modo perche' le cifre stiano incolonnate. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* .row-total sta sulla CELLA del totale di riga, non sulla riga. */
.row-total {
  color: var(--text);
  font-weight: 600;
  background: var(--surface-2);
}

/* Le celle vuote della griglia restano leggere: trentuno colonne di zeri
   sarebbero un muro in cui non si trova piu' il giorno che si cercava. */
.cell-empty { color: var(--fainter); }

/* ------------------------------------------------------------
   TELEFONO
   ------------------------------------------------------------ */
@media (max-width: 780px) {
  .nav-toggle { display: inline-flex; }

  .layout { display: block; }

  /* La barra laterale diventa un pannello a comparsa sotto l'intestazione.
     app.js aggiunge .is-collapsed dopo ogni scelta, altrimenti resterebbe
     aperta sopra la schermata su cui si e' appena arrivati. */
  .sidenav {
    width: auto;
    flex: none;
    border-right: 0;
    border-bottom: 1px solid var(--surface-3);
    padding: 14px 16px;
  }
  .sidenav.is-collapsed { display: none; }

  .navlink { padding: 11px 10px; font-size: 15px; }

  .views { padding: 20px 16px 64px; }

  .card { padding: 18px 16px; }
  .card-narrow { padding: 20px 18px; margin: 24px auto; }

  /* I pulsanti del turno stanno uno per riga: sono l'azione piu' importante
     della schermata e si premono col pollice. */
  .clock-actions .btn { flex: 1 1 100%; }

  .who { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}