/* ------------------------------------------------------------------
   hygiene.css — legal pages (public) and the security / users / legal
   admin screens. Paper-arcade: 1px lines, hard 4px ink shadows, yellow
   as the only accent, no gradients and nothing round.

   Loaded via `styles: ['/css/hygiene.css']` on the public pages and with
   a <link> at the top of each admin view (admin-head has no styles hook).
   Both go through asset() so the fingerprint changes with the file.
   ------------------------------------------------------------------ */

/* ============================================================ public
   /privacy and /imprint
   ============================================================ */

.legal-stamp {
  margin-top: 14px;
  color: var(--muted, #6b6b6b);
}

.legal {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.legal--imprint {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}

/* --- the little index down the side --------------------------------- */

.legal__toc {
  position: sticky;
  top: 92px;
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.legal__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.legal__toc a {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
}

.legal__toc a:hover,
.legal__toc a:focus-visible {
  border-bottom-color: var(--ink);
}

.legal__toc a .micro {
  display: block;
  color: var(--muted, #6b6b6b);
  margin-bottom: 2px;
}

.legal__toc-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* --- the sections --------------------------------------------------- */

.legal__body {
  display: grid;
  gap: 36px;
  max-width: 68ch;
}

.legal__section {
  scroll-margin-top: 100px;
}

.legal__num {
  color: var(--muted, #6b6b6b);
  margin-bottom: 6px;
}

.legal__section h2 {
  margin: 0 0 12px;
}

.legal__section .prose p {
  margin: 0 0 14px;
}

.legal__section .prose p:last-child {
  margin-bottom: 0;
}

.legal__end {
  margin-top: 8px;
}

.legal__end p {
  margin: 0 0 6px;
}

.legal__end p:last-child {
  margin-bottom: 0;
}

/* --- the imprint fact table ----------------------------------------- */

.legal-facts {
  margin: 0;
  border-top: 1px solid var(--line);
}

.legal-facts__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 8px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.legal-facts dt {
  margin: 0;
  color: var(--muted, #6b6b6b);
  align-self: center;
}

.legal-facts dd {
  margin: 0;
  white-space: pre-line;
}

.legal-facts__empty {
  color: var(--muted, #6b6b6b);
  font-style: italic;
}

@media (max-width: 900px) {
  .legal {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .legal__toc {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 18px;
    order: 2;
  }
  .legal__body {
    order: 1;
  }
  .legal-facts__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Printable: a journalist or a lawyer wants this on paper. */
@media print {
  .legal__toc,
  .legal__end {
    display: none;
  }
  .legal {
    display: block;
  }
  .legal__body {
    max-width: none;
  }
}

/* ============================================================ admin
   /admin/2fa, /admin/users, /admin/legal, the 403
   ============================================================ */

.hyg-status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--hair, #d9d4c7);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 16px 18px;
  margin-bottom: 28px;
  background: var(--surface, #fff);
}

.hyg-status__line {
  margin: 0 0 4px;
  font-weight: 600;
}

.hyg-status .help {
  margin: 0;
}

.hyg-form {
  max-width: 520px;
}

.hyg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* --- enrolment ------------------------------------------------------- */

.hyg-setup {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.hyg-qr {
  border: 1px solid var(--hair, #d9d4c7);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 18px;
  background: #fff;
  line-height: 0;
}

.hyg-qr svg {
  width: 100%;
  height: auto;
  display: block;
}

.hyg-secret {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 12px;
}

.hyg-secret span {
  border: 1px solid var(--hair, #d9d4c7);
  padding: 4px 8px;
  letter-spacing: .12em;
  font-size: 14px;
}

.hyg-code {
  letter-spacing: .28em;
  font-size: 18px;
}

/* --- recovery codes -------------------------------------------------- */

.hyg-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 24px 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--hair, #d9d4c7);
  box-shadow: 4px 4px 0 var(--ink);
  max-width: 520px;
  background: var(--surface, #fff);
}

.hyg-codes li {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair, #d9d4c7);
  font-size: 16px;
  letter-spacing: .08em;
}

.hyg-codes li:nth-child(odd) {
  border-right: 1px solid var(--hair, #d9d4c7);
}

.hyg-codes li:nth-last-child(-n+2) {
  border-bottom: 0;
}

/* --- a password shown once ------------------------------------------- */

.hyg-credential {
  border: 1px solid var(--hair, #d9d4c7);
  border-left: 6px solid var(--yellow, #f5c518);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 16px 18px;
  margin-bottom: 28px;
  background: var(--surface, #fff);
}

.hyg-credential__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin: 6px 0 8px;
}

.hyg-credential__pw {
  font-size: 18px;
  letter-spacing: .06em;
  border: 1px solid var(--hair, #d9d4c7);
  padding: 3px 8px;
}

.hyg-credential .help {
  margin: 0 0 10px;
}

/* --- the users table ------------------------------------------------- */

.hyg-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.pill--owner {
  background: var(--yellow, #f5c518);
}

.pill--editor {
  background: transparent;
  border: 1px solid var(--hair, #d9d4c7);
}

.hyg-403-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

@media (max-width: 760px) {
  .hyg-setup {
    grid-template-columns: minmax(0, 1fr);
  }
  .hyg-codes {
    grid-template-columns: minmax(0, 1fr);
  }
  .hyg-codes li:nth-child(odd) {
    border-right: 0;
  }
  .hyg-codes li:nth-last-child(2) {
    border-bottom: 1px solid var(--hair, #d9d4c7);
  }
}

/* ============================================================ dashboard
   the pageview block on views/admin/dashboard.ejs
   ============================================================ */

.pv-spark {
  border: 1px solid var(--hair, #d9d4c7);
  background: var(--surface, #fff);
  padding: 12px;
  margin: 16px 0;
}

.pv-spark svg {
  display: block;
  width: 100%;
  height: auto;
}
/* long labels (Umsatzsteuer-Identifikationsnummer) wrap inside the label column */
.legal-facts__row{grid-template-columns:minmax(160px,240px) minmax(0,1fr)}
.legal-facts dt{align-self:start;overflow-wrap:anywhere;padding-top:3px}
.legal-facts dd{align-self:start}

/* ---------- /admin/traffic ---------- */
.tr-stats{margin-bottom:20px}
.tr-bars{display:flex;align-items:flex-end;gap:2px;height:120px;border-bottom:1px solid var(--line-strong,var(--line))}
.tr-bar{flex:1;display:flex;align-items:flex-end;height:100%;min-width:0}
.tr-bar i{display:block;width:100%;background:var(--yellow);border:1px solid var(--ink);border-bottom:0}
.tr-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.tr-table__bar{width:30%}
.tr-table__bar i{display:block;height:8px;background:var(--yellow);border:1px solid var(--ink)}
.tr-langs{font-size:14px;color:var(--muted)}
@media (max-width:900px){.tr-grid{grid-template-columns:1fr}}