/* Kundenportal — Verlag J. Maiß
 *
 * Nur das, was es im Desk nicht gibt. Rahmen, Kopf, Flächen, Knöpfe, Felder
 * und Status kommen aus maiss/base.css, die Werte aus maiss/tokens.css.
 *
 * Die Leitfrage dieser Seiten ist eine andere als im Desk: hier sitzt jemand,
 * der ein Problem hat und keine Übung mit diesem Werkzeug. Deshalb eine
 * Spalte, großzügige Abstände und immer nur eine naheliegende nächste
 * Handlung — nicht die Dichte, von der eine Warteschlange lebt. */

/* ---- Die Vorgangsnummer ----------------------------------------------- */

/* Das Einzige, was sich jemand aufschreibt. Sie darf groß sein — und sie
 * steht nicht-proportional, weil sie zeichenweise vorgelesen und abgetippt
 * wird: "M-A-T, null null null, eins zwei drei". */
.ticket-number {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-result);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--black);
}

/* Einmalige Bewegung, wie ein Stempel, der aufgesetzt wird. Unterdrückt,
 * wenn das Betriebssystem weniger Bewegung verlangt. */
@media (prefers-reduced-motion: no-preference) {
  .ticket-number--fresh { animation: stamp .34s cubic-bezier(.2, .9, .3, 1) both; }
}
@keyframes stamp {
  from { opacity: 0; transform: scale(1.1); }
  to   { opacity: 1; transform: none; }
}

/* ---- Liste der eigenen Anfragen --------------------------------------- */

.ticket-list { list-style: none; margin: 0; padding: 0; border-top: var(--bw-hairline) solid var(--border-strong); }

.ticket-list__item { border-bottom: var(--bw-hairline) solid var(--border-hairline); }

/* Die ganze Zeile ist der Link, nicht nur der Betreff: auf dem Telefon ist
 * eine Zeile eine bequeme Tippfläche und ein Wort keine. */
.ticket-list__link {
  display: grid;
  grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-6);
  align-items: baseline;
  padding: var(--sp-5) var(--sp-2);
  color: inherit;
}
.ticket-list__link:hover { background: var(--surface-subtle); text-decoration: none; }
.ticket-list__link:hover .ticket-list__title { text-decoration: underline; }

.ticket-list__number { font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--text-muted); }
.ticket-list__title { font-weight: var(--fw-bold); color: var(--black); }
.ticket-list__foot { grid-column: 2; display: flex; gap: var(--sp-5); align-items: baseline; flex-wrap: wrap; }

/* ---- Antwortfeld ------------------------------------------------------ */

.reply { margin-top: var(--sp-10); }

/* ---- Responsiv --------------------------------------------------------- */

/* Siehe den Hinweis am Fuß von maiss/base.css: responsive Regeln stehen am
 * Ende der Datei, damit sie im Kaskadenlauf nach den einfachen Regeln
 * kommen, die sie überschreiben sollen. */

@media (max-width: 640px) {
  /* minmax(0, 1fr), nicht 1fr: die Voreinstellung einer Rasterspalte ist
     min-content, und ein Betreff mit einem langen deutschen Kompositum
     macht die Spalte dann breiter als die Seite. */
  .ticket-list__link { grid-template-columns: minmax(0, 1fr); }
  .ticket-list__foot { grid-column: 1; }
}