/* Stille Post — eigene Optik. Chrome kommt aus ../style.css, die Zeichen-
   Bauteile (.lwd-*) aus ../shell.css. */

/* ── Der Auftrag ist die Ansage — er klebt oben ──
   Beim Malen und beim Lesen scrollt man; ausgerechnet „was soll ich hier
   eigentlich" darf dabei nicht aus dem Bild wandern (dieselbe Lehre wie die
   Buchstabenleiste in Stadt Land Fluss). Rechts bleibt Platz für die fixe
   Knopfreihe der Shell. */
.task-bar {
    display: flex; align-items: center; gap: 12px; margin: 2px 0 12px;
    padding: 8px 0; padding-right: 164px;
}
@media (min-width: 900px) { .task-bar { padding-right: 0; } }
.step-chip {
    font-size: 13px; font-weight: 700; color: var(--muted);
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.task-kind {
    margin-left: auto; margin-right: auto;
    font-size: clamp(17px, 4.5vw, 24px); font-weight: 800; line-height: 1.1;
    text-align: center;
}
/* Nicht zusammenstauchen lassen — aus „8 s" wurde in einer früheren Messung
   schon einmal ein „8". */
.step-chip, .sp-timer { flex: 0 0 auto; }
.sp-timer { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-timer.urgent { color: var(--red); font-weight: 800; }

/* ── Was ich bekommen habe ──
   Der geerbte Satz ist das Wichtigste auf der Seite, solange man malt (S21):
   er bekommt Größe, nicht die Umrandung. */
.prompt-box { width: 100%; margin-bottom: 14px; }
.prompt-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.prompt-text {
    margin: 0 0 4px; padding: 14px 16px; border-radius: 12px;
    font-size: clamp(18px, 5vw, 26px); font-weight: 700; line-height: 1.3;
    background: rgba(242, 193, 78, .1); border: 1px solid rgba(242, 193, 78, .4);
    overflow-wrap: anywhere;
}
/* Die fremde Fläche ist zum Ansehen — kein Fadenkreuz, kein Antippen. */
.prompt-paper { pointer-events: none; max-height: 46vh; }

/* ── Was ich abgebe ── */
.write-box { width: 100%; margin-bottom: 12px; }
.write-box input {
    width: 100%; min-height: 52px;
    font-size: 17px;   /* ≥16px: iOS zoomt sonst beim Fokus */
}
.ready-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ready-hint { font-size: 12.5px; color: var(--muted); }
#btn-ready:disabled { opacity: .5; }

/* ── Auflösung ──
   Die Kette liest man von oben nach unten; der Eintrag, der GERADE
   aufgeblättert wird, ist hervorgehoben, die davor bleiben als Verlauf
   stehen — sonst verliert man, worüber man gerade lacht. */
.reveal-box { width: 100%; margin-bottom: 14px; }
.reveal-box h2 { font-size: 17px; margin: 0 0 10px; }
.album { display: grid; gap: 6px; }
.al {
    display: grid; grid-template-columns: minmax(4.5em, auto) 1fr auto;
    align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px; font-size: 14.5px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--panel-border);
    opacity: .62;
}
.al.now { opacity: 1; border-color: rgba(79, 140, 255, .5); background: rgba(79, 140, 255, .08); }
.al .who { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al .what { font-weight: 600; overflow-wrap: anywhere; }
.al.draw .what { color: var(--muted); font-weight: 500; }
.heart {
    border: 1px solid var(--panel-border); background: transparent; color: var(--muted);
    border-radius: 999px; padding: 4px 10px; font-size: 13px; cursor: pointer;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.heart:hover:not(:disabled) { border-color: rgba(229, 72, 77, .6); color: var(--red); }
.heart.on { color: var(--red); border-color: rgba(229, 72, 77, .55); background: rgba(229, 72, 77, .1); }
.heart:disabled { cursor: default; opacity: .5; }
.reveal-foot { margin-top: 12px; }

/* ── Wer ist fertig / Stand ── */
.board { display: grid; gap: 6px; margin-bottom: 14px; }
.bl {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px; border-radius: 11px; background: var(--panel);
    border: 1px solid var(--panel-border);
}
.bl.me { border-color: rgba(79, 140, 255, .45); background: rgba(79, 140, 255, .07); }
.bl .nm { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600;
    flex: 1 1 auto; min-width: 5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl .tag { font-size: 11px; color: var(--green); border: 1px solid rgba(63, 191, 111, .5);
    border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
/* Die eine Zahl (S21) */
.bl .pts { font-size: 20px; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }

/* E69: Gestrichen — die Herzen bleiben sichtbar, sie zählen nur nicht mehr.
   Wegräumen wäre falsch: Man soll sehen, was da passiert ist. */
.al.gestrichen { opacity: .5; }
.al.gestrichen .what { text-decoration: line-through; }
.al.gestrichen .heart { opacity: .6; }