/* Page specific rules. The last stylesheet loaded and the smallest one: if
   something here grows past a handful of lines, or a second page wants it, it
   belongs in components.css.
 *
 * Convention: one .page-<name> block per page, everything inside it prefixed
 * the same way. */

/* --- error pages (404, 500) ---------------------------------------------- */

.error-detail {
  max-height: 24rem;
  font-size: var(--text-xs);
}

/* --- login /anmelden ----------------------------------------------------- */

/* A narrow column, not the full reading measure: a form with two fields looks
   abandoned across 46rem. Sits slightly above the middle of the viewport. */
.page-login {
  max-width: 24rem;
  margin-inline: auto;
  padding-block-start: var(--space-6);
}

.page-login__note {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* --- upload /hochladen and list /zuletzt --------------------------------- */

.page-upload__note,
.page-recent__note {
  max-width: var(--width-text);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* --- pattern page /muster ------------------------------------------------ */

.page-muster section {
  margin-bottom: var(--space-7);
}

.page-muster h2 {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.page-muster__note {
  max-width: var(--width-text);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Colour tokens as swatches: the neutral ramp must stay distinguishable in
   both modes, and that is only checkable by looking. */
.swatch {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}

.swatch__chip {
  height: 3rem;
  margin-bottom: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.swatch__name {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* The full type scale, one line each. */
.type-row {
  display: flex;
  flex-wrap: wrap; /* the 2xl sample does not fit next to its label on a phone */
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.type-row__label {
  flex: none;
  width: 6rem;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Every seeded subject in its own hue. This is the real test of the oklch
   derivation: sixteen hues, one lightness, all legible in both modes.
   The markup pairs this with .tinted -- that is what turns --hue into the
   three --subject-* colours (see components.css). */
.hue-card {
  padding: var(--space-3);
  border: 1px solid var(--subject-border);
  border-left: 4px solid var(--subject-mark);
  border-radius: var(--radius-md);
  background: var(--subject-surface);
  color: var(--subject-text);
}

.hue-card__name {
  font-weight: 600;
}

.hue-card__hue {
  color: var(--subject-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  opacity: 0.8;
}