/* STANDALONE — Rechtsseiten, Einstellungen, Digest-Liste
   ==========================================================================
   Aus `styles.css` herausgeloest (Block 6e). Die Regeln sind WOERTLICH
   uebernommen, keine einzige wurde angefasst.

   --- Kaskade: das Wichtigste an dieser Datei ---------------------------

   Sie MUSS ueber `{% block seiten_css %}` eingebunden werden, also zwischen
   `styles.css` und `tailwind.css`. Steht sie dahinter, schlaegt jede
   `display`-Regel hier die Tailwind-Utility `.hidden`, und per JS
   ausgeblendete Elemente bleiben sichtbar. Genau das ist in Block 3 mit
   `connected.css` passiert und lag bis Block 6a auch in `trends.css` vor.
   Festgenagelt in `tests/test_css_kaskade.py`.

   --- Warum gerade dieser Abschnitt sicher war -------------------------

   Gemessen wurde vor dem Verschieben, ob ein Selektor hier ALS AUCH weiter
   unten in `styles.css` dieselbe Eigenschaft setzt -- denn die Regeln
   dahinter kommen jetzt davor. Ergebnis fuer diesen Abschnitt: kein
   einziger Konflikt. Der Responsive-Block ist unkritisch, weil er ohnehin
   VOR diesem Abschnitt stand und das so bleibt.
   ========================================================================== */

/* ============================================================
   LEGAL PAGES (Impressum, Datenschutz) — legal_base.html
   Standalone-Layout ohne Sidebar. Zentrierter Lesebereich.
   ============================================================ */

.legal-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.legal-header__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 24px;
}
.legal-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: opacity var(--dur) var(--ease);
}
.legal-header__brand:hover { opacity: 0.75; }

.legal-main {
  padding: 40px 24px 64px;
}
.legal-article {
  max-width: 760px;
  margin: 0 auto;
  /* Fließtext: etwas größere Grundschrift als das App-UI */
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}
/* Überschriften */
.legal-article h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.2;
}
.legal-article .legal-meta {
  font-size: 12px;
  color: var(--ink-subtle);
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.legal-article h2 {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin: 32px 0 10px;
}
.legal-article h3 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0 6px;
}
.legal-article p {
  margin: 0 0 12px;
}
.legal-article ul, .legal-article ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.legal-article li { margin-bottom: 4px; }
.legal-article a {
  color: var(--brand-blue-deep);
  text-decoration: underline;
}
.legal-article a:hover { opacity: 0.8; }
.legal-article strong { color: var(--ink); }
/* Hervorhebungs-Block (z.B. "kein Cookie-Banner nötig") */
.legal-callout {
  background: var(--moss-soft);
  border-left: 3px solid var(--moss);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--moss-deep);
  margin: 16px 0;
}

.legal-footer {
  border-top: 1px solid var(--border);
  padding: 16px 24px;
  background: var(--surface-sunken);
}
.legal-footer__nav {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.legal-footer__nav a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.legal-footer__nav a:hover { color: var(--ink); }
.legal-footer__sep { color: var(--ink-subtle); }

/* Login-Seite: dezente Rechtliche Links unterhalb des Hinweis-Textes (AP-3) */
.login-legal-links {
  color: var(--ink-subtle);
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.login-legal-links a {
  color: var(--ink-subtle);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.login-legal-links a:hover { color: var(--ink-muted); }

/* ============================================================
   SETTINGS — settings.html (eingeloggte Seite, extends base.html)
   ============================================================ */

/* Danger-Bereich: roter Rahmen zur optischen Abgrenzung */
.settings-danger-zone {
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.02);
  padding: 20px 24px;
}
.settings-danger-zone__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--danger);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-danger-zone p {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 16px;
}
/* Password-Input in normaler Höhe (inherit aus globalem Input-Reset),
   aber explizit damit mobile Zoom verhindert wird */
.settings-danger-zone input[type="password"] {
  font-size: 16px;
  max-width: 320px;
}
.settings-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin: 0 0 14px;
}
/* Fehler-Banner auf der Settings-Seite (analog zu agent_form.html) */
.settings-error {
  margin-bottom: 20px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  color: #B91C1C;
  font-size: 13px;
}

/* ============================================================
   STANDALONE LAYOUT — base_standalone.html / digest_standalone.html
   Oeffentliche, login-freie geteilte Seite (GET /d/{token}). Kein Sidebar,
   angelehnt an .legal-header/.legal-main (gleiche Econova-Sprache), erweitert
   um einen Login-/Account-Slot rechts, weil die Seite hybrid ist (anonym ODER
   eingeloggt).
   ============================================================ */
.standalone-topbar {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.standalone-topbar__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.standalone-topbar__left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.standalone-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
  transition: opacity var(--dur) var(--ease);
}
.standalone-topbar__brand:hover { opacity: 0.75; }
.standalone-topbar__brand-name {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.standalone-topbar__dashboard-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.standalone-topbar__dashboard-link:hover {
  background: var(--surface-sunken);
  color: var(--ink);
  border-color: var(--border-strong);
}
.standalone-topbar__dashboard-link svg { flex-shrink: 0; }
.standalone-topbar__right { flex-shrink: 0; max-width: 42vw; }
.standalone-topbar__account {
  display: block;
  font-size: 12.5px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.standalone-topbar__account strong { color: var(--ink); font-weight: 600; }

.standalone-main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 36px 24px 64px;
}

@media (max-width: 640px) {
  .standalone-topbar__inner { padding: 12px 16px; gap: 10px; }
  /* Auf sehr schmalen Screens genuegt das Logo — spart Platz fuer den
     Login-Button/Account-Text rechts, kein horizontales Gequetsche. */
  .standalone-topbar__brand-name { display: none; }
  .standalone-topbar__dashboard-link span { display: none; }
  .standalone-topbar__dashboard-link { padding: 7px; }
  .standalone-main { padding: 24px 16px 48px; }
}

/* ----- Digest-Standalone-Hero (Zeitraum prominent) ----- */
.digest-standalone-hero {
  margin-bottom: 24px;
}
.digest-standalone-hero__period {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin: 6px 0 10px;
}
.digest-standalone-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.digest-standalone-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 22px;
}

/* ----- Zurueck-Button (Punkt 7: nur wenn aus der E-Mail-Update-Historie
   verlinkt, siehe back_url) — gleiche Sprache wie .page-header__back. ----- */
.digest-standalone-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.digest-standalone-back:hover { color: var(--ink); }

/* ============================================================
   DIGEST-KOMPAKT-LISTE (.digest-compact-list / .digest-row)
   Ersetzt partials/paper_card.html auf der Standalone-Digest-Seite: eine
   dichte, seitenbreite Zeile pro Paper statt der grossen Ticket-Karte —
   bessere Uebersicht bei vielen Papern. paper_card.html bleibt fuer alle
   App-Views unveraendert.
   ============================================================ */
.digest-compact-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.digest-row {
  display: grid;
  /* Nr | Datum | Inhalt | Aktionen */
  grid-template-columns: 2.6rem 86px 1fr auto;
  align-items: start;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.digest-row:last-child { border-bottom: none; }
.digest-row:hover { background: var(--surface-sunken); }

/* Laufende Nummer. Gedaempft und rechtsbuendig: sie soll beim Zitieren
   ("Nummer 37") helfen, aber nicht mit dem Titel um Aufmerksamkeit ringen. */
.digest-row__nr {
  padding-top: 2px;
  font-size: 11.5px;
  color: var(--ink-subtle);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.digest-row__date {
  padding-top: 2px;
  font-size: 11.5px;
  color: var(--ink-subtle);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.digest-row__date--empty { font-style: italic; }

.digest-row__main { min-width: 0; }
.digest-row__title {
  margin: 0 0 3px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.digest-row__title a {
  color: inherit;
  text-decoration: none;
}
.digest-row__title a:hover { color: var(--brand-blue-deep); }

.digest-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-muted);
}
/* Erstautor fett + Markenblau — gleiche Design-Spec wie .paper-card__authors b */
.digest-row__authors b { font-weight: 600; color: var(--brand-blue-deep); }
.digest-row__sep { color: var(--ink-subtle); }
.digest-row__journal {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-muted);
}
.digest-row__cites { color: var(--ink-subtle); }

/* Marker/list-style bereits global entfernt (details > summary, s.o.) —
   hier nur die Zeilen-spezifische Typo + der 2-Zeilen-Clamp. */
.digest-row__abstract summary {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.digest-row__abstract[open] summary {
  -webkit-line-clamp: unset;
  overflow: visible;
  /* Erst hier begrenzen, nicht im geschlossenen Zustand: dort sind
     es 2 geklammerte Zeilen, und schmaler hiesse schlicht weniger
     Vorschautext. Aufgeklappt laeuft der volle Abstract sonst ueber
     1002px, also rund 130 Zeichen je Zeile (gemessen). */
  max-width: var(--text-max);
}

/* Aktions-Icons: quadratische, kleine Buttons — bewusst nur Icon (kein
   Label), damit die Zeile dicht bleibt. */
.digest-row__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 1px;
}
.digest-row__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-subtle);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .digest-row__action:hover {
    background: var(--surface);
    color: var(--ink);
  }
}
.digest-row__action.is-on {
  color: var(--brand-blue-deep);
  background: var(--brand-blue-soft);
}
.digest-row__action.has-note {
  color: var(--moss-deep);
  background: var(--moss-soft);
}
.digest-row__action.is-locked,
.digest-row__action[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .digest-row__action.is-locked:hover,
  .digest-row__action[disabled]:hover {
    background: transparent;
    color: var(--ink-subtle);
  }
}

/* Gelesen-Zustand: Zeile dimmen — gleiche Sprache wie .paper-card.is-read */
.digest-row.is-read .digest-row__title { color: var(--ink-subtle); font-weight: 500; }
.digest-row.is-read .digest-row__meta,
.digest-row.is-read .digest-row__abstract summary { color: var(--ink-subtle); }

@media (max-width: 640px) {
  /* Zwei Spalten statt einer: Nummer und Datum teilen sich die erste Zeile,
     alles andere laeuft ueber die volle Breite. Mit `1fr` stuende die
     Nummer sonst allein auf einer eigenen Zeile. */
  .digest-row {
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
  }
  .digest-row__nr   { grid-column: 1; grid-row: 1; text-align: left; }
  .digest-row__date { grid-column: 2; grid-row: 1; }
  .digest-row__main { grid-column: 1 / -1; }
  .digest-row__actions { grid-column: 1 / -1; margin-top: 4px; }
}