/* StockLife — Ergänzungen für die Rechner-Seite.
 *
 * Diese Datei ist absichtlich kurz. Alles, was web/assets/stocklife.css schon
 * kann — Karten, Regler, Balken, Kacheln, Typografie —, steht dort und wird
 * hier nicht wiederholt und nicht überschrieben. Hier stehen nur die drei
 * Dinge, die der Entwurf nicht kennt:
 *
 *   1. eine Karte je Baustein statt einer einzelnen Rechnerkarte,
 *   2. Eingabefelder für Zahlen, Auswahl und Schalter (der Entwurf hat nur Regler),
 *   3. Ausgabefelder, die auch bei sechs Werten noch lesbar bleiben.
 *
 * `style-src 'self'` (web/_headers) heisst: veränderliche Masse kommen als
 * CSS-Variable aus dem Skript, nie als `style`-Attribut. Hier tauchen `--p`
 * und `--h` deshalb nur als Voreinstellung auf.
 */

/* ============================== Kopf der Seite ============================== */

.rl-hero { max-width: 720px; }
.rl-hero .sl-kicker { color: var(--navmut); letter-spacing: 1.3px; }
.rl-hero .sl-lead { max-width: 640px; }

/* Die Sprungmarken zu den Bausteinen. `.sl-tags` liefert die Kacheln selbst. */
.rl-jump { margin-top: 30px; }
.rl-jump .sl-tags { margin-top: 0; }

/* ============================== Raster ============================== */

/* `.sl-calc-grid` teilt zwei ungleiche Spalten für genau eine Karte neben
   einem Text. Hier stehen viele gleichrangige Karten nebeneinander, also
   gleiche Spalten. */
.rl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
  align-items: start;
}

/* Karten mit vielen Feldern dürfen die volle Breite nehmen. */
.rl-grid > .rl-wide { grid-column: span 2; }

/* Die Karten sind in beiden Themes dunkel. Damit auch die eingebauten
   Bedienelemente des Browsers — Zahlenpfeile, Auswahlliste — dunkel bleiben,
   steht das Farbschema an der Karte. */
.sl-calc { color-scheme: dark; }

/* Die Überschrift jedes Bausteins ist ein `h2`, nicht ein `h3` wie im Entwurf:
   auf dieser Seite ist jeder Rechner ein eigener Abschnitt. Die Schrift bleibt
   dieselbe. */
.sl-calc__top h2 {
  font: 600 20px/1.15 'Outfit', system-ui, sans-serif;
  letter-spacing: -.5px;
  text-wrap: pretty;
}

/* ============================== Felder ============================== */

/* Ein Feld ist Beschriftung, Wert und Bedienelement. `.sl-fields` setzt den
   Abstand zwischen den Feldern; hier steht nur, was innen zusammenrückt. */
.rl-field > .sl-range { margin-bottom: 0; }

.rl-input,
.rl-select {
  width: 100%;
  height: 40px;
  margin-top: 9px;
  padding: 0 13px;
  border: 0;
  border-radius: 13px;
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--tx);
  font: 400 14px/1 'Outfit', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.rl-select { cursor: pointer; }

.rl-input:focus-visible,
.rl-select:focus-visible { border-radius: 13px; }

/* Zwei schmale Felder nebeneinander — etwa Anfangswert und Endwert. */
.rl-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Ein Schalter: Kästchen und Beschriftung in einer Zeile. */
.rl-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rl-check input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--lime);
  cursor: pointer;
}

.rl-check label {
  font: 400 13.5px/1.35 'Outfit', system-ui, sans-serif;
  color: var(--mut);
  cursor: pointer;
  text-wrap: pretty;
}

/* ============================== Ausgaben ============================== */

/* `.sl-calc__out` stellt bis zu drei Werte in eine Zeile. Mehrere Bausteine
   haben sechs; die brechen hier um, statt sich zu quetschen. */
.rl-out {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 16px 20px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.rl-out dt {
  font: 400 12.5px/1.35 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
  text-wrap: pretty;
}

.rl-out dd {
  margin: 8px 0 0;
  font: 600 17px/1.2 'Outfit', system-ui, sans-serif;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}

/* Der eine Wert, auf den es in der Karte ankommt. */
.rl-out .rl-lead-value {
  font-size: 26px;
  letter-spacing: -1px;
}

/* ============================== Erläuterungen ============================== */

/* Eine Zeile Formel unter der Überschrift — was die Karte tatsächlich rechnet. */
.rl-formula {
  font: 400 12.5px/1.6 'Outfit', system-ui, sans-serif;
  color: var(--mut);
  margin-top: 12px;
  text-wrap: pretty;
}

/* Der Hinweis unter den Steuerbausteinen. Leiser als die Formel, aber sichtbar. */
.rl-note {
  font: 400 11.5px/1.6 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
  margin-top: 18px;
  text-wrap: pretty;
}

/* Der Schlussabschnitt der Seite steht auf der Seitenfläche, nicht auf einer
   Karte — also die Farben der Seite. */
.rl-close { max-width: 720px; }
.rl-close .sl-kicker { color: var(--navmut); letter-spacing: 1.3px; }
.rl-close .sl-h2 { margin-top: 18px; }
.rl-close p {
  font: 400 14.5px/1.7 'Outfit', system-ui, sans-serif;
  color: var(--navmut);
  margin-top: 14px;
  text-wrap: pretty;
}

/* ============================== Schmale Fenster ============================== */

@media (max-width: 980px) {
  .rl-grid { grid-template-columns: 1fr; }
  .rl-grid > .rl-wide { grid-column: auto; }
}

@media (max-width: 720px) {
  .rl-pair { grid-template-columns: 1fr; }
  .rl-out { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
  .rl-out .rl-lead-value { font-size: 23px; letter-spacing: -.8px; }
}