/* ============================================================
   262-php-13-micro-attachment — EIN Anhang, ueberall einsetzbar

   Diese Datei ist absichtlich kurz. Titel und Kleingedrucktes
   benutzen .x-file__name und .x-file__meta aus 02-elements.css —
   dieselben Klassen wie jede Dateizeile der Website. Neue Klassen
   dafuer waeren ein zweites Aussehen fuer dieselbe Sache.

   Hier steht nur, was es vorher nicht gab: das Schloss.
   ============================================================ */

/* Schloss vor dem Titel eines Dokuments, das eine Anmeldung verlangt.
   Nur das Zeichen — der Satz "Nur für Mitglieder" stand vorher neben
   jeder Zeile und war auf einer Seite mit drei Dokumenten dreimal
   dasselbe Wort. Er lebt weiter in der Sprechblase (title) und als
   unsichtbarer Text fuer Screenreader. */
.x-attach__lock {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    vertical-align: -.1875em;
}
.x-attach__lock svg {
    width: 1.0625rem;
    height: 1.0625rem;
    display: block;
}

/* Angemeldet ist nichts mehr verschlossen: das Schloss verschwindet, und
   die Zeile sieht aus wie jede andere. (Diese Regel stand vorher in der
   Verzeichnis-CSS und waere beim Umzug beinahe liegengeblieben — ein
   Mitglied haette dann ein Schloss vor einer Datei gesehen, die es
   oeffnen darf.) */
[data-auth="member"] .x-attach__lock { display: none; }

/* Nur fuer Screenreader — nie sichtbar, aber immer vorgelesen. */
.x-attach__sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* In einer Karte sitzt der Anhang eng am Text darueber. */
.x262-member__doc { margin-top: .5rem; }

/* ---- Anhang als BLOCK: Vorschau + Aktion ------------------------------
   EIN Kasten aus ZWEI Teilen, die zusammengehoeren:

       +---------------------+
       |                     |   Vorschaufeld (Seitenverhaeltnis A4)
       |        PDF          |   spaeter das Bild der ersten Seite
       |                     |
       +---------------------+
       | Titel               |   Leiste: Titel, Groesse
       | 2,6 MB              |
       +----------+----------+
       | Öffnen   | Herunter-|   die ZWEI Wahlmoeglichkeiten
       |          | laden    |   (Style Guide, "Documents")
       +----------+----------+

   Beide Teile auf DERSELBEN Breite und derselben linken Kante. Vorher
   standen Plakette links und Pfeil rechts auf verschiedenen Hoehen, und
   der Kasten wirkte schief.
   ------------------------------------------------------------------------ */
.x-docblock {
    display: block;
    /* Feste Breite statt 100 %: als Flex-Kind einer Reihe schrumpfte der
       Kasten sonst auf die Breite seines Inhalts zusammen — und der Inhalt
       ist ein leeres Vorschaufeld, also fast nichts. */
    flex: 0 0 auto;
    width: 19rem;
    max-width: 100%;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .14s ease, box-shadow .14s ease;
}

/* Vorschaufeld. Leer bis eine echte Seitenvorschau vorliegt — dann traegt
   es das Bild und sonst gross die Endung. Nie ein erfundenes Bild. */
.x-docblock__preview {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1.294;      /* A4 hoch */
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
    overflow: hidden;
}
.x-docblock__preview img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.x-docblock__ext {
    font: var(--w-heading, 500) 1.25rem/1 var(--font-body);
    letter-spacing: .08em;
    color: var(--text-muted);
}

/* Leiste unter der Vorschau — Titel links, Zeichen rechts, gleiche Hoehe. */
.x-docblock__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .625rem;
    align-items: center;
    padding: .75rem .875rem;
}
.x-docblock__text { display: grid; gap: .125rem; min-width: 0; }
.x-docblock__name {
    font: var(--w-heading, 500) var(--fs-body-sm)/1.3 var(--font-body);
    overflow-wrap: anywhere;
}
.x-docblock__meta { font-size: var(--fs-meta); color: var(--text-muted); }
.x-docblock__go { display: inline-flex; color: var(--text-muted); }
.x-docblock__go svg { width: 1.25rem; height: 1.25rem; display: block; }
/* ---- The two choices: open in the browser, or save --------------------
   Style guide, "Documents - the file itself": the visitor decides. A
   document behind the login shows no actions - first the login. */
.x-docblock__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border-soft);
}
.x-docblock__act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .625rem .5rem;
    font: var(--w-heading, 500) var(--fs-body-sm)/1.3 var(--font-body);
    color: var(--brand-strong);
    text-decoration: none;
    transition: background-color .14s ease;
}
.x-docblock__act + .x-docblock__act { border-left: 1px solid var(--border-soft); }
.x-docblock__act:hover { background: var(--brand-tint); }
.x-docblock__act svg { width: 1.0625rem; height: 1.0625rem; display: block; }

.x-docblock--locked { background: var(--surface-2); border-style: dashed; cursor: default; }
[data-auth="member"] .x-docblock--locked { display: none; }

/* Mehrere Anhaenge nebeneinander statt untereinander.
   align-items: flex-start — sonst zieht ein Kasten mit Entwicklernotiz
   alle anderen auf seine Hoehe mit. */
.x-docblocks { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }

/* Umschlag um Kasten + Entwicklernotiz. Er ist das Flex-Kind, nicht der
   Kasten — die Notiz gehoert UNTER ihn, nicht daneben. Die Breite steht
   hier, damit sie an einer Stelle steht und nicht an zweien. */
.x-docblock-wrap {
    flex: 0 0 auto;
    width: 19rem;
    max-width: 100%;
}
.x-docblock-wrap > .x-docblock { width: 100%; }

/* ---- VERWEIS auf ein Dokument (kein Download) --------------------------
   Sichtbar anders als der Download-Kasten: eine Zeile mit Pfeil nach
   RECHTS. Wer den Unterschied nicht liest, sieht ihn.
   ------------------------------------------------------------------------ */
.x-doclink {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    max-width: 28rem;
    padding: .75rem .875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .14s ease, background-color .14s ease;
}
.x-doclink:hover { border-color: var(--brand); background: var(--brand-tint); }
.x-doclink__text { display: grid; gap: .125rem; min-width: 0; }
.x-doclink__name {
    font: var(--w-heading, 500) var(--fs-body-sm)/1.3 var(--font-body);
    overflow-wrap: anywhere;
}
.x-doclink__meta { font-size: var(--fs-meta); color: var(--text-muted); }
.x-doclink__go { display: inline-flex; color: var(--brand); }
.x-doclink__go svg { width: 1.25rem; height: 1.25rem; display: block; }

/* ---- Entwicklungs-Hinweis am Vorschaufeld ------------------------------
   Nur in der lokalen Vorschau sichtbar (99-demo-flags.css laedt nur dort).
   Er sagt, warum das Feld leer ist — damit niemand es fuer einen Fehler
   haelt oder ein Bild hineinlegt, das nicht die Datei zeigt. */
.x-docblock__hint {
    margin: .625rem 0 0;    /* etwas Luft fuer die gestrichelte Umrandung */
    /* Breite kommt vom Umschlag .x-docblock-wrap — hier KEINE zweite
       Angabe, sonst stehen zwei Breiten fuer dasselbe Element.

       Farbe, Groesse, Deckkraft und Linie kommen aus 99-demo-flags.css
       (data-demo), das NUR in der lokalen Vorschau geladen wird. Auf dem
       Server bleibt hier nichts uebrig. Diese Datei gestaltet die Notiz
       NICHT — sie raeumt ihr nur einen Platz ein. */
}