/* The working-day rule. The only structural device in the product, and here it does the job
 * the background does in direction A: it says where in the day you are.
 *
 * A bar with no ends is a fraction with no denominator (docs/07-diseno.md section 4.2a), so it
 * carries its two anchors and a mark for now. */

.jornada { margin: 32px 0 40px; }

.jornada__pista {
  position: relative;
  height: 10px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}

.jornada__avanc {
  position: absolute; inset: 0 auto 0 0;
  background: var(--filet);
  width: 0;
}

.jornada__ara {
  position: absolute; top: -7px; bottom: -7px;
  width: 2px;
  background: var(--tinta);
}

.jornada__ancores {
  display: flex; justify-content: space-between;
  font-size: var(--mida-14); color: var(--tinta-suau);
  margin-top: 8px;
}

.capcalera__hora { display: flex; align-items: baseline; gap: 16px; }

/* --- Screen B, identification ------------------------------------------------------------
 *
 * Dots that fill, no accept button: it validates on the last digit (PLAN.md 6.2). The dots are
 * the only place in the product where a circle appears, and they are the PIN's whole feedback,
 * so they are large enough to read from a metre away. */

.punts { display: flex; gap: 28px; margin: 0 0 16px; }

.punt {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--tinta-suau);
}
.punt[data-ple] { background: var(--tinta); border-color: var(--tinta); }

.avis { font-size: var(--mida-36); margin: 0; }
.avis--suau { color: var(--tinta-suau); font-size: var(--mida-24); }

/* --- Screen C, confirmation and the moment of punching -----------------------------------
 *
 * The plates differ in POLARITY, not only in hue: light plate with dark ink to come in, dark
 * plate with light ink to leave. That is why the distinction survives the colour being taken
 * away. The dark one carries a rule because it only reaches 1.60:1 against the ground, under
 * what WCAG 2.2 asks of a control's boundary. See docs/07-diseno.md 3.4 and 4.4. */

.nom { font-size: var(--mida-72); margin: 0; }
.accio { font-size: var(--mida-96); margin: 0; line-height: 1; }
.hora-proposada { font-size: var(--mida-144); font-weight: var(--hora-pes); font-stretch: 85%;
                  margin: 0; line-height: .95; }
.avui { font-size: var(--mida-36); color: var(--tinta-suau); margin: 16px 0 0; }

.placa {
  appearance: none; border: 0; font: inherit; cursor: pointer;
  width: 100%; min-height: 168px;
  border-radius: var(--radi);
  font-size: var(--mida-60); font-weight: 550;
  display: grid; place-items: center;
  transition: transform var(--durada-segell) var(--corba-arriba);
}
.placa--entrada { background: var(--entrada); color: var(--entrada-tinta); }
.placa--sortida {
  background: var(--sortida); color: var(--sortida-tinta);
  border: var(--sortida-vora-gruix) solid var(--sortida-vora);
}
.placa:focus-visible { outline: 4px solid var(--tinta); outline-offset: 6px; }

/* The one motion the product SPENDS on: the card LANDS. Dead stop, no bounce.
 *
 * 1.04 over 140ms was restraint, and restraint is wrong HERE: this is the three seconds a
 * person gets in exchange for walking to the wall, and it has to feel finished. Laid out
 * as a filmstrip the old one barely moved -- 4% of a plate is a few pixels, spread over
 * 140ms, which reads as a repaint rather than as an arrival. 1.06 over 220ms, on the same
 * curve. See docs/07-diseno.md 8.6.
 *
 * It delays NOTHING: the punch is written and confirmed before this starts, and the text
 * is legible in the first frame. With prefers-reduced-motion the token is 0ms and the
 * plate simply appears -- the acknowledgement never goes away. */
@keyframes aterra { from { transform: scale(1.06); } to { transform: scale(1); } }
.segell { animation: aterra var(--durada-segell) var(--corba-arriba) both; }

.secundari {
  appearance: none; border: 0; background: none; color: var(--tinta-suau);
  font: inherit; font-size: var(--mida-21); text-decoration: underline;
  text-underline-offset: 5px; padding: 16px 0; min-height: var(--touch); cursor: pointer;
}

.compte { font-size: var(--mida-16); color: var(--tinta-suau); }

/* Screen C and the result. The header carries four facts and they need rhythm: with every
 * margin zeroed they stacked into one block and the day's total ran under the plate. */
.capcalera--acte { display: grid; gap: 12px; }
.capcalera--acte .avui { margin-top: 12px; }

/* The plate sits at the BOTTOM, where a thumb is. The slack goes above it, which is the same
 * decision as section 4.5: calm, not filler. */
/* `.pantalla main` in layout.css is (0,1,1) and would win over a bare `.acte`, stretching the
 * plate to fill the row. Matched here so the plate keeps the height it asks for. */
.pantalla main.acte { display: grid; grid-template-rows: 1fr auto auto; gap: 20px; min-height: 0; }
/* The result centres instead of hanging from the bottom: the plate is the hero here and it
 * wants air on both sides, not a hole above it. */
.pantalla main.acte--centrat { grid-template-rows: none; align-content: center; }

/* `a les 13:09` is a PHRASE, not a hero number, and at 144 px it broke across two lines with
 * `a les` alone on the first. The hero of this screen is the plate: the hour is a fact under
 * it. Design section 6.2 asks for the exact hour, not for the biggest hour. */
.acte--centrat .hora-proposada { font-size: var(--mida-60); }
.acte > .placa { grid-row: 2; }
.acte > .secundari { grid-row: 3; justify-self: start; }
.acte--centrat > .hora-proposada { grid-row: 3; }
.acte--centrat > .avui { grid-row: 4; }
.placa--mostra { cursor: default; }

/* The acknowledgement (C4). It shares the result screen rather than taking one of its own:
 * a screen of its own would be a step, and C4 says it must never be one. */
.acuse { display: grid; gap: 16px; margin-top: 24px; }
.acuse__titol { font-size: var(--mida-36); margin: 0; }
.acuse__pregunta { font-size: var(--mida-24); color: var(--tinta-suau); margin: 0; }
.acuse__botons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Not the plates. Green and red belong to entering and leaving and to nothing else, and the
 * green plate is right above this. Inverted for the answer that agrees, outlined for the one
 * that does not: the same inversion the keypad uses, which is already learnt by then. */
.resposta {
  appearance: none; font: inherit; font-size: var(--mida-36); font-weight: 550;
  min-height: 120px; cursor: pointer; border-radius: var(--radi);
  background: none; color: var(--tinta);
  border: 2px solid var(--filet);
}
.resposta--si { background: var(--tinta); color: var(--acer); border-color: var(--tinta); }
.resposta:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }
.acuse__nota { font-size: var(--mida-16); color: var(--tinta-suau); margin: 0; }

/* The rescue screen: two plates and nothing else, because there is nothing else to say. */
.pantalla main.acte--rescat { grid-template-rows: 1fr auto auto; gap: 32px; }
.acte--rescat > .placa { grid-row: auto; }

/* The sentence that answers the only question somebody with a finger on the screen has. */
.desat { font-size: var(--mida-48); margin: 0; line-height: 1.15; }

/* When the device clock has drifted, both times are shown and the one that counts is on top.
 * Invariant 10 made visible: the valid hour is the system's, never the appliance's. Showing
 * both says which one wins without a sentence explaining it. */
.hora-aparell { font-size: var(--mida-24); color: var(--tinta-suau); margin: 0; }