/* The reader screen (/czytnik): a phone on a hall, read at arm's length.
   Tokens only: every colour, size, radius, duration and layer is a var(--...) from public/style.css (loaded first by the page).
   The only literals are 0, 1px hairlines, %, unitless ratios, keywords and the breakpoints of @media. The big type is the theme's
   --text-2xl times a ratio, stepped by width (a media query cannot take a variable) instead of scaled with vw.

   What is on the screen
   - header: hall name and the phone's clock; main: the huge prompt, the hint, WŁĄCZ CZYTNIK; footer: the two status pills
   - the result layer covers the whole screen: green is the theme's success colour, red its danger colour, and the text on them is
     the page background colour, which passes contrast on both (see test/pages.reader.test.mjs). The words say the same as the colour.
   - the pairing form lives inside the red "TERMINAL NIESPAROWANY" layer
   Light and dark follow prefers-color-scheme through the tokens; reduced motion switches the one animation off; forced colors get
   borders instead of fills. */

.reader-body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
}

.reader-noscript {
  margin: 0;
  padding: var(--space-4);
  background: var(--color-warn-bg);
  color: var(--color-warn);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  text-align: center;
}

/* ---- the frame: header / main / footer, as tall as the visible screen (dvh through --screen-h), inside the safe areas ---- */

.reader {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  min-height: var(--screen-h);
  padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom))
    max(var(--space-4), env(safe-area-inset-left));
  touch-action: manipulation;
  user-select: none;
}

.reader input {
  user-select: text;
}

.reader-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* the company logo is white on transparent (made for dark backgrounds), so it sits on the near-black of the panel's sidebar in both themes */
.reader-brand {
  display: flex;
  flex: 0 0 100%;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-2);
  background: var(--color-sidebar);
}

.reader-logo {
  display: block;
  width: var(--brand-logo-w);
  max-width: 100%;
  height: auto;
}

.reader-hall {
  min-width: 0;
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
}

.reader-clock {
  flex: none;
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---- the prompt: greyed until the reader really is ready (NFC on and the server reached) ---- */

.reader-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  min-width: 0;
  min-height: 0;
  text-align: center;
}

.reader-main > p {
  margin: 0;
}

.reader-prompt {
  max-width: 100%;
  color: var(--color-muted);
  font-size: calc(var(--text-2xl) * 2);
  line-height: 1;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
  text-wrap: balance;
  transition: var(--transition);
}

.reader[data-nfc="on"][data-server="connected"] .reader-prompt,
.reader[data-nfc="on"][data-server="checking"] .reader-prompt {
  color: var(--color-text);
}

.reader[data-busy="true"] .reader-prompt {
  opacity: var(--opacity-disabled);
}

.reader-hint {
  max-width: var(--measure);
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

.reader-note {
  max-width: var(--measure);
  color: var(--color-warn);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  font-weight: var(--weight-medium);
}

.reader-start {
  width: 100%;
  max-width: var(--form-max);
  min-height: calc(var(--control-h-lg) * 2);
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-radius: var(--radius-2);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font: inherit;
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transition: var(--transition);
}

.reader-start:hover {
  background: var(--color-accent-hover);
}

.reader-start:active {
  background: var(--color-accent-press);
}

/* ---- the showcase (public/reader-demo.js): cards to hold to the reader when there is no phone ---- */

.demo-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--form-max);
  margin-top: var(--space-6);
}

.demo-cards-title {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  font-weight: var(--weight-semibold);
  text-align: center;
}

.demo-cards-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-card {
  min-height: var(--control-h-lg);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: var(--transition);
}

.demo-card:hover {
  border-color: var(--color-accent);
}

/* ---- the two statuses: a pill with a word, never a colour alone ---- */

.reader-footer {
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.reader-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reader-pill {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-neutral-bg);
  color: var(--color-neutral);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

.reader-pill-name {
  font-weight: var(--weight-medium);
}

.reader-pill-name::after {
  content: ":";
}

.reader-pill-value {
  font-weight: var(--weight-bold);
}

.reader-pill[data-tone="ok"] {
  border-color: var(--color-ok-border);
  background: var(--color-ok-bg);
  color: var(--color-ok);
}

.reader-pill[data-tone="warn"] {
  border-color: var(--color-warn-border);
  background: var(--color-warn-bg);
  color: var(--color-warn);
}

.reader-pill[data-tone="danger"] {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* ---- the result layer: the whole screen, green or red ---- */

.reader-result {
  position: fixed;
  inset: 0;
  z-index: var(--z-skip);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* the centring is done by the two auto margins below, see there */
  gap: var(--space-4);
  padding: max(var(--space-6), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-6), env(safe-area-inset-bottom))
    max(var(--space-4), env(safe-area-inset-left));
  overflow-y: auto;
  background: var(--color-danger);
  color: var(--color-bg);
  text-align: center;
}

.reader-result[data-tone="ok"] {
  background: var(--color-ok);
}

/* Centred while the content fits. With justify-content: center a content taller than the screen (a phone on its side showing the
   pairing form) would overflow upwards as well, and the part above the top edge cannot be scrolled to; auto margins only take
   free space, so then the top stays where it is and the rest is reached by scrolling. */
.reader-result::before,
.reader-result::after {
  content: "";
  margin-block: auto;
}

.reader-result-title {
  max-width: 100%;
  margin: 0;
  font-size: calc(var(--text-2xl) * 1.25);
  line-height: 1;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.reader-result-detail {
  max-width: 100%;
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.reader-result :focus-visible {
  outline-color: var(--color-bg);
}

/* ---- the pairing form (inside the red layer) ---- */

.reader-pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--form-max);
  margin-top: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  box-shadow: var(--shadow-3);
  user-select: text;
}

.reader-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.reader-pair input {
  height: var(--control-h-lg);
  font-size: var(--text-md);
}

.reader-pair :focus-visible {
  outline-color: var(--color-focus);
}

/* the token is a secret: masked on the screen (where the browser knows how), and no password manager is involved */
.reader-secret {
  -webkit-text-security: disc;
}

.reader-pair-error {
  margin: 0;
}

.reader-pair-submit {
  width: 100%;
}

/* ---- bigger screens: the type steps up (the theme's --text-2xl times a ratio) ---- */

@media (max-width: 359px) {
  .reader-prompt {
    font-size: calc(var(--text-2xl) * 1.5);
  }

  .reader-result-title {
    font-size: var(--text-2xl);
  }
}

@media (min-width: 480px) {
  .reader-prompt {
    font-size: calc(var(--text-2xl) * 2.5);
  }

  .reader-result-title {
    font-size: calc(var(--text-2xl) * 1.75);
  }

  .reader-result-detail {
    font-size: var(--text-2xl);
    line-height: var(--leading-2xl);
  }
}

@media (min-width: 720px) {
  .reader-hall,
  .reader-clock {
    font-size: calc(var(--text-2xl) * 1.5);
    line-height: 1;
  }

  .reader-prompt {
    font-size: calc(var(--text-2xl) * 3.5);
  }

  .reader-hint {
    font-size: var(--text-xl);
    line-height: var(--leading-xl);
  }

  .reader-pill {
    font-size: var(--text-xl);
    line-height: var(--leading-xl);
  }

  .reader-result-title {
    font-size: calc(var(--text-2xl) * 2.25);
  }

  .reader-result-detail {
    font-size: calc(var(--text-2xl) * 1.25);
    line-height: var(--leading-2xl);
  }
}

@media (min-width: 1000px) {
  .reader-prompt {
    font-size: calc(var(--text-2xl) * 4.5);
  }

  .reader-result-title {
    font-size: calc(var(--text-2xl) * 2.75);
  }
}

/* ---- a phone on its side (little height): everything smaller and tighter so the prompt and the pills fit without scrolling ---- */

@media (orientation: landscape) and (max-height: 520px) {
  .reader {
    gap: var(--space-2);
  }

  .reader-header {
    padding-bottom: var(--space-2);
  }

  .reader-hall,
  .reader-clock {
    font-size: var(--text-xl);
    line-height: var(--leading-xl);
  }

  .reader-main {
    gap: var(--space-3);
  }

  .reader-prompt {
    font-size: calc(var(--text-2xl) * 1.75);
  }

  .reader-hint {
    font-size: var(--text-md);
    line-height: var(--leading-md);
  }

  .reader-start {
    min-height: calc(var(--control-h-lg) * 1.5);
  }

  .reader-pill {
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-md);
    line-height: var(--leading-md);
  }

  .reader-result {
    gap: var(--space-2);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .reader-result-title {
    font-size: calc(var(--text-2xl) * 1.5);
  }

  .reader-result-detail {
    font-size: var(--text-xl);
    line-height: var(--leading-xl);
  }

  .reader-pair {
    padding: var(--space-3);
    gap: var(--space-2);
  }
}

/* ---- motion: one short entrance, only for people who have not asked for less (the theme also switches every animation off) ---- */

@media (prefers-reduced-motion: no-preference) {
  .reader-result:not([hidden]) {
    animation: reader-pop var(--duration-slow) var(--ease);
  }

  @keyframes reader-pop {
    from {
      opacity: 0;
      transform: scale(1.02);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

/* ---- Windows / Android forced colors: fills are replaced by the system's, so the shapes get borders ---- */

@media (forced-colors: active) {
  .reader-result {
    border: var(--space-4) solid CanvasText;
  }

  .reader-pill,
  .reader-start {
    border: 1px solid CanvasText;
  }
}