/* julia baut eine App - Basissatz.
   ================================

   Farben, Abstaende, Radien und Schriftgroessen kommen aus tokens.css. Keine
   Literale hier, ausser den wenigen Layout-Massen, die nicht auf der Skala
   liegen; die sind unten als solche markiert.

   Crimson (--pc-crimson) ist eine 10-Prozent-Farbe: genau eine Handlung pro
   Ansicht, nicht Ueberschriften und keine Flaechen.

   Haesslich darf das sein, solange es Tokens benutzt. Politur ist das, was in
   60 Minuten zuerst wegfaellt. */

@import url('tokens.css');
@import url('fonts.css');

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Muss !important sein. Ein spaeteres display:flex auf einer Komponente
   gewinnt sonst gegen das hidden-Attribut, und ein Element, das die Logik
   fuer versteckt haelt, steht trotzdem auf dem Schirm. */
[hidden] {
  display: none !important;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  background: var(--pc-bg);
  color: var(--pc-text);
  font-family: var(--pc-font-sans);
  font-size: var(--pc-fs-body);
  line-height: var(--pc-lh-normal);
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Rahmen ─────────────────────────────────────────────────────────────── */

.app {
  max-width: var(--pc-container-narrow);
  margin: 0 auto;
  padding: var(--pc-space-4) var(--pc-gutter) var(--pc-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-4);
}

.masthead {
  display: flex;
  align-items: center;
  gap: var(--pc-space-3);
  flex-wrap: wrap;
  padding-bottom: var(--pc-space-3);
  border-bottom: var(--pc-line) solid var(--pc-border-hairline);
}

.masthead__logo {
  display: block;
}

.masthead__meta {
  display: flex;
  align-items: center;
  gap: var(--pc-space-2);
  font-size: var(--pc-fs-caption);
  color: var(--pc-text-muted);
}

.masthead__tick {
  width: var(--pc-space-1);
  height: var(--pc-space-1);
  border-radius: var(--pc-radius-pill);
  background: var(--pc-accent);
}

.masthead__logout {
  margin-left: auto;
}

.main {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-4);
}

/* ── Flaechen ───────────────────────────────────────────────────────────── */

.panel {
  background: var(--pc-surface);
  border-radius: var(--pc-radius-1);
  box-shadow: var(--pc-shadow-1);
  padding: var(--pc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-3);
}

.panel--admin {
  background: var(--pc-surface-sunken);
  box-shadow: var(--pc-shadow-0);
}

.eyebrow {
  margin: 0;
  font-size: var(--pc-fs-eyebrow);
  font-weight: var(--pc-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-text-subtle);
}

.panel__title {
  margin: 0;
  font-size: var(--pc-fs-h2);
  font-weight: var(--pc-fw-semibold);
  line-height: var(--pc-lh-tight);
  color: var(--pc-ink);
}

.panel__subtitle {
  margin: 0;
  font-size: var(--pc-fs-h4);
  font-weight: var(--pc-fw-semibold);
  color: var(--pc-ink);
}

.panel__body {
  margin: 0;
  color: var(--pc-text-muted);
}

.empty {
  margin: 0;
  color: var(--pc-text-subtle);
  font-size: var(--pc-fs-body-s);
}

/* ── Eingabe ────────────────────────────────────────────────────────────── */

.field {
  width: 100%;
  padding: var(--pc-space-3);
  font-family: inherit;
  font-size: var(--pc-fs-body-l);
  color: var(--pc-text);
  background: var(--pc-white);
  border: var(--pc-line) solid var(--pc-border-rule);
  border-radius: var(--pc-radius-1);
}

.field:focus-visible {
  outline: var(--pc-space-1) solid var(--pc-accent);
  outline-offset: 0;
  border-color: var(--pc-accent-strong);
}

.compose {
  display: flex;
  gap: var(--pc-space-2);
  flex-wrap: wrap;
}

.compose .field {
  /* Nicht auf der Skala: die Mindestbreite, unter der das Feld neben dem
     Knopf unbrauchbar wird. Layoutmass, kein Token. */
  flex: 1 1 14rem;
}

.btn {
  padding: var(--pc-space-3) var(--pc-space-4);
  font-family: inherit;
  font-size: var(--pc-fs-body);
  font-weight: var(--pc-fw-semibold);
  border: var(--pc-line) solid transparent;
  border-radius: var(--pc-radius-1);
  cursor: pointer;
}

.btn:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* Die eine Handlung pro Ansicht. Deshalb Crimson und sonst nirgends. */
.btn--primary {
  background: var(--pc-crimson);
  color: var(--pc-white);
}

.btn--primary:hover:not(:disabled) {
  background: var(--pc-crimson-90);
}

.btn--quiet {
  background: transparent;
  color: var(--pc-text-muted);
  border-color: var(--pc-border-rule);
  font-size: var(--pc-fs-caption);
}

.notice {
  margin: 0;
  padding: var(--pc-space-3);
  border-radius: var(--pc-radius-1);
  background: var(--pc-crimson-08);
  color: var(--pc-crimson);
  font-size: var(--pc-fs-body-s);
}

.connection {
  margin: 0;
  padding: var(--pc-space-3);
  border-radius: var(--pc-radius-1);
  background: var(--pc-amber-15);
  color: var(--pc-ink);
  font-size: var(--pc-fs-body-s);
}

/* ── Liste ──────────────────────────────────────────────────────────────── */

.lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-2);
}

.lines__item {
  display: flex;
  align-items: baseline;
  gap: var(--pc-space-2);
  padding: var(--pc-space-3);
  border-radius: var(--pc-radius-1);
  background: var(--pc-bg-alt);
}

.lines__item.is-mine {
  background: var(--pc-lavender-15);
}

.lines__text {
  /* Fremdeingabe. Umbrechen statt das Layout sprengen lassen. */
  overflow-wrap: anywhere;
}

.lines__badge {
  margin-left: auto;
  flex: none;
  font-size: var(--pc-fs-caption);
  color: var(--pc-text-subtle);
}

/* ── Anmeldung und Zugang ───────────────────────────────────────────────── */

.login {
  display: flex;
  justify-content: center;
  padding-top: var(--pc-space-5);
}

.login__card {
  width: 100%;
  max-width: var(--pc-container-narrow);
  background: var(--pc-surface);
  border-radius: var(--pc-radius-1);
  box-shadow: var(--pc-shadow-1);
  padding: var(--pc-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-3);
}

.login__title {
  margin: 0;
  font-size: var(--pc-fs-h2);
  font-weight: var(--pc-fw-semibold);
  line-height: var(--pc-lh-tight);
  color: var(--pc-ink);
}

.login__body {
  margin: 0;
  color: var(--pc-text-muted);
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-3);
}

/* Auf dem Handy ist das Handy der Rahmen: kein zweites Chrome, Knopf unter
   dem Daumen. Die Breite ist ein Geraetemass, kein Token. */
@media (max-width: 30rem) {
  .app {
    padding-top: var(--pc-space-3);
  }

  .compose {
    flex-direction: column;
  }

  .compose .btn {
    width: 100%;
  }
}