/* The pages the servers write themselves (seiten.py, design-spec §9 „Seiten“): the login
   pages (deck, presenter, owner), the neutral page under „/“, „not found“, and the owner's
   overview of the decks. One stylesheet for the local server and for the online layer.

   They are interface, not slides, but they are set like one: a panel with the slide's rim
   and radius (20 and 24 on 1920, here 14 and 18), the wordmark top left on the margin, the
   headline in GT with the ink block of base.css (.h, .ink: nothing of its geometry is
   repeated here), the sentence in Tobias, the footer in Mono. Black for the pages that
   stand before a deck (structure), offwhite for the overview (reading). What one clicks or
   types into is set like the viewer's bar: pills with a 1.5 px outline that fill on hover,
   Mono. Neon appears twice, as on a black cover: the wordmark and the one ink block.
   Only palette colours (lint.py). */

html,
body.s-seite {
  min-height: 100%;
  background: var(--offwhite);
}
body.s-seite {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ---------- The panel ---------- */
.s-blatt {
  --rand: 14px;
  --m: clamp(24px, 5vw, 96px); /* the slide's margin 96 on 1920 */
  --bg: var(--offwhite);
  --fg: var(--ink);
  --fg2: var(--anthracite);
  --line: var(--rule);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 2 * var(--rand));
  min-height: calc(100svh - 2 * var(--rand));
  margin: var(--rand);
  padding: clamp(28px, 4.4vw, 64px) var(--m) clamp(22px, 2.6vw, 34px);
  border-radius: 18px;
  background: var(--bg);
  color: var(--fg);
}
.black .s-blatt {
  --bg: var(--ink);
  --fg: var(--cream);
  --fg2: var(--rule);
  --line: var(--cream-30);
}
.s-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.s-kopf .wordmark {
  flex: none;
  width: clamp(104px, 12vw, 230px); /* the slide's 230 on 1920, 154 on 1280 */
}
.s-kopf a {
  display: inline-block;
}

/* ---------- Headline, sentence, form ---------- */
.s-inhalt {
  margin: auto 0;
  padding: clamp(24px, 5vh, 96px) 0 clamp(24px, 4vh, 64px);
}
.s-h {
  font-size: clamp(56px, min(9vw, 14vh), 136px);
  line-height: 0.95; /* h-l */
}
.s-lead {
  max-width: 26em;
  margin-top: clamp(22px, 2.6vw, 36px);
  font: 400 clamp(20px, 1.9vw, 27px) / 1.32 var(--font-tobias);
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
/* What went wrong: a chip, set like the viewer's „→ 27“, in the tone's own colours. */
.s-blatt .err {
  display: inline-block;
  margin-top: clamp(20px, 2.2vw, 28px);
  padding: 11px 14px 9px;
  background: var(--fg);
  color: var(--bg);
  font: 700 16px/1.25 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.s-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 600px;
  margin-top: clamp(20px, 2.2vw, 28px);
}
/* the message belongs to the field: it stands close above it */
.s-blatt .err + .s-zeile {
  margin-top: 14px;
}
/* The name a password manager files the password under (seiten.user_name): in the form, read
   by the browser, seen and reached by nobody. Not display: none, which some managers skip. */
.s-wer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}
.s-feld,
.s-knopf,
.s-pille {
  box-sizing: border-box;
  height: 52px;
  border: 1.5px solid var(--fg);
  border-radius: 999px;
  background: none;
  color: var(--fg);
  appearance: none;
  -webkit-appearance: none;
}
.s-feld {
  flex: 1 1 220px;
  min-width: 0;
  padding: 1px 24px 0;
  font: 400 18px/1 var(--font-mono);
  letter-spacing: 0.06em;
  caret-color: currentColor;
}
/* the field one types into is the filled one (on a desk it has the keyboard from the start) */
.s-feld:focus {
  outline: none;
  background: var(--fg);
  color: var(--bg);
}
.s-feld::selection {
  background: var(--bg);
  color: var(--fg);
}
/* what belongs into the field, as long as it is empty */
.s-feld::placeholder {
  color: var(--fg2);
  opacity: 1;
}
.s-feld:focus::placeholder {
  color: var(--bg);
  opacity: 0.55;
}
.s-knopf,
.s-pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 26px 0;
  font: 700 15px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.s-knopf:hover,
.s-pille:hover {
  background: var(--fg);
  color: var(--bg);
}
.s-knopf:focus-visible,
.s-pille:focus-visible,
.s-fuss a:focus-visible,
.s-kopf a:focus-visible {
  outline: 1.5px solid var(--fg);
  outline-offset: 3px;
}

/* ---------- Footer: the slide's footer line ---------- */
.s-fuss {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font: 400 14px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
}
.s-fuss b {
  font-weight: 700;
  color: var(--fg);
}
.s-fuss a {
  white-space: nowrap;
}
.s-fuss a:hover {
  color: var(--fg);
}
.s-fuss .arrow {
  width: 0.9em;
  height: 0.9em;
  margin-left: 4px;
  vertical-align: -0.05em;
}

/* ---------- The owner's overview: a reading page ---------- */
.s-liste .s-inhalt {
  margin: 0;
  padding-top: clamp(36px, 5vw, 72px);
}
.s-liste .s-h {
  font-size: clamp(48px, 6.4vw, 100px);
  line-height: 0.98; /* h-m */
}
.s-label {
  margin-bottom: clamp(14px, 1.6vw, 22px);
  font: 700 14px/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.s-label span {
  font-weight: 400;
  color: var(--fg2);
}
.s-hinweis {
  max-width: 44em;
  margin-top: clamp(18px, 2vw, 26px);
  font: 400 14px/1.5 var(--font-mono);
  color: var(--fg2);
}
.s-decks {
  margin-top: clamp(32px, 4vw, 56px);
  border-top: 2px solid var(--fg);
}
.s-deck {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(24px, 3vw, 40px);
  row-gap: 26px;
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--line);
}
.s-adresse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font: 700 16px/1.25 var(--font-mono);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
/* where a deck is: a chip (ink surface with cream), „nur lokal“ as an outline */
.s-marke {
  flex: none;
  padding: 5px 8px 3px;
  background: var(--fg);
  color: var(--bg);
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.s-marke.s-lokal {
  background: none;
  color: var(--fg);
  box-shadow: inset 0 0 0 1.5px var(--fg);
}
.s-titel {
  margin-top: 12px;
  font-size: clamp(30px, 2.9vw, 44px); /* h-xs */
  line-height: 1.02;
  text-wrap: balance;
}
.s-daten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px 24px;
  align-content: start;
}
.s-daten dt {
  font: 700 12px/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg2);
}
.s-daten dd {
  margin-top: 3px;
  font: 400 15px/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.s-links,
.s-empfaenger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.s-liste .s-pille,
.s-liste .s-feld {
  height: 40px;
  font-size: 14px;
}
.s-liste .s-pille {
  padding: 1px 16px 0;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}
.s-liste .s-pille .arrow {
  width: 0.9em;
  height: 0.9em;
  margin-left: 6px;
}
.s-liste .s-feld {
  flex: 0 0 132px;
  padding: 1px 16px 0;
  letter-spacing: 0.02em;
}
/* a name that is no code (a folder of the deck): the outline breaks, a chip says why */
.s-liste .s-feld[aria-invalid="true"] {
  border-style: dashed;
}
.s-sagt {
  flex: 0 1 auto;
  padding: 6px 8px 4px;
  background: var(--fg);
  color: var(--bg);
  font: 700 12px/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.s-ab {
  flex: none;
}
.s-links {
  margin-top: 20px;
}
/* The links of a deck stand in two columns: the deck as its presenter and as a recipient,
   below them the PDF and the presenter view. Four pills do not fit the column in one row
   (452 wide on 1280), and one alone in a second row is an orphan. Under 700 they wrap as
   they fit, two and two as well. */
@media (min-width: 701px) {
  .s-links {
    display: grid;
    grid-template-columns: repeat(2, max-content);
  }
}
.s-empfaenger {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--ink-30);
}
.s-empfaenger label {
  flex: 0 0 100%;
  font: 700 12px/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg2);
}
.s-link {
  flex: 1 1 280px;
  min-width: 0;
  padding: 4px 0 3px;
  border-bottom: 1.5px solid var(--fg);
  font: 400 14px/1.3 var(--font-mono);
  overflow-wrap: anywhere;
  user-select: all;
}
.s-leer {
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
  font: 400 clamp(20px, 1.9vw, 27px) / 1.32 var(--font-tobias);
}
.s-liste .s-fuss {
  margin-top: auto;
  padding-top: clamp(40px, 5vw, 72px);
}

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  .s-blatt {
    --rand: 10px;
    border-radius: 16px;
  }
  .s-knopf {
    flex: 1 1 100%;
  }
  .s-deck {
    grid-template-columns: minmax(0, 1fr);
  }
  .s-daten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
  /* what a finger hits: 44 and more */
  .s-liste .s-pille,
  .s-liste .s-feld {
    height: 44px;
  }
  .s-liste .s-feld {
    flex: 1 1 132px;
  }
  /* why a name is no code stands right under the field it is about, before link and button */
  .s-empfaenger .s-link,
  .s-empfaenger .s-pille {
    order: 2;
  }
  .s-sagt {
    order: 1;
    flex: 0 0 100%;
    box-sizing: border-box;
  }
  .s-fuss {
    font-size: 12px;
  }
}

/* ---------- A small phone held upright (320 × 568): the same page, set closer ----------
   The headline one step smaller, the sentence in 18, less air around the form, the error
   message flatter. So the login fits without scrolling there too, in German (the longer
   sentence, three lines) and with an error message that takes two lines. */
@media (max-width: 700px) and (max-height: 600px) {
  .s-inhalt {
    padding: 16px 0;
  }
  .s-h {
    font-size: 48px;
  }
  .s-lead {
    margin-top: 14px;
    font-size: 18px;
  }
  .s-blatt .err {
    padding: 8px 12px 6px;
  }
}

/* ---------- A low window (a phone held sideways): the same page, set closer ----------
   Nothing is left out. The rim and the radius are the phone's, the headline follows the
   height more closely, the sentence runs in one line, the button stays beside the field,
   the margins shrink, the error message is flatter. So the login fits a phone held sideways
   without scrolling, with its error message too and with air above the headline and below
   the field (844 × 390, 667 × 375). */
@media (max-height: 480px) {
  .s-blatt {
    --rand: 10px;
    padding-top: 16px;
    padding-bottom: 12px;
    border-radius: 16px;
  }
  .s-inhalt {
    padding: 10px 0;
  }
  .s-h {
    font-size: clamp(40px, min(9vw, 11vh), 136px);
  }
  .s-blatt .err {
    padding: 8px 12px 6px;
  }
  .s-lead {
    max-width: none;
    margin-top: 12px;
    font-size: 18px;
  }
  .s-zeile,
  .s-blatt .err {
    margin-top: 12px;
  }
  .s-blatt .err + .s-zeile {
    margin-top: 10px;
  }
  .s-knopf {
    flex: 0 0 auto;
  }
}