/* tnsn — gemeinsame Bildsprache aller Module: schwarz, Archivo für Text, Mono für
   Beschriftungen und Knöpfe, keine Rundungen, Haarlinien statt Flächen. Akzent
   ist die Umkehrung (weiss auf schwarz), damit die Palette monochrom bleibt;
   Farbe bekommt nur, was schiefging.

   Die einzige Stelle für diese Grundregeln. Jede Seite bindet sie ein mit
       <link rel="stylesheet" href="https://tnsn.ch/ui.css">
   und legt nur Eigenes in der eigenen Datei nach (dort gewinnt bei gleicher
   Spezifität die später geladene Datei). Archivo lädt die Seite selbst über
   Google Fonts, Vorlage gl/index.html. Stand: aus gl/css/guestlist.css,
   inbox/css/inbox.css und lounge/css/lounges-orga.css zusammengezogen. */

:root{
  /* Sagt dem Browser, seine eigenen Bedienelemente dunkel zu zeichnen:
     Kalender-Popup, Auswahllisten, Bildlaufleisten, Autofill. */
  color-scheme:dark;
  accent-color:#fff;   /* Auswahlfarbe der Browser-Bedienelemente */

  --bg:#000;
  --fg:#fff;
  --dim:rgba(255,255,255,.68);
  --faint:rgba(255,255,255,.44);
  --line:rgba(255,255,255,.24);
  --line-soft:rgba(255,255,255,.14);
  --panel:rgba(255,255,255,.035);
  --surface:#0a0a0a;                 /* Dialoge, Auswahllisten, Hinweise */
  --overlay:rgba(0,0,0,.8);
  --err:#ff6b6b;
  --chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='rgba(255,255,255,.55)' stroke-width='1.2'><path d='M1 1l4 4 4-4'/></svg>");
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Helles Thema: dieselbe Palette gespiegelt. Gewählt wird es über den Umschalter
   im Modul-Umschalter (nav.js), gemerkt in der Cookie tnsn_theme für alle Subdomains;
   nav.js setzt data-theme auf <html>. Ohne Cookie bleibt es dunkel. */
:root[data-theme="light"]{
  color-scheme:light;
  accent-color:#000;
  --bg:#fff;
  --fg:#000;
  --dim:rgba(0,0,0,.68);
  --faint:rgba(0,0,0,.46);
  --line:rgba(0,0,0,.26);
  --line-soft:rgba(0,0,0,.14);
  --panel:rgba(0,0,0,.035);
  --surface:#f4f4f4;
  --overlay:rgba(255,255,255,.85);
  --err:#c0392b;
  --chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='rgba(0,0,0,.55)' stroke-width='1.2'><path d='M1 1l4 4 4-4'/></svg>");
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }   /* sonst gewinnt display:flex */
button{ font:inherit; color:inherit; background:transparent; border:0;
  border-radius:0; cursor:pointer; text-align:left; }
:focus-visible{ outline:1px solid var(--fg); outline-offset:3px; }

/* Leichter Übergang beim Wechsel zwischen den Modulen: jede Seite blendet ein,
   nav.js blendet vor dem Klick auf einen Modul-Link aus (html.tnsn-leaving).
   View Transitions gehen nicht: die Module sind verschiedene Origins. Der
   Hintergrund liegt auf html, damit während des Ausblendens die Themenfarbe
   steht und nicht das Grau des Browsers. */
html{ background:var(--bg); }
body{
  font-family:var(--sans);
  background:var(--bg); color:var(--fg);
  min-height:100vh; padding:clamp(24px,5vh,56px) clamp(16px,4vw,28px);
  -webkit-font-smoothing:antialiased;
  animation:tnsn-in .22s var(--ease);
}
@keyframes tnsn-in{ from{ opacity:0; } }
html.tnsn-leaving body{ opacity:0; transition:opacity .14s ease-in; }

/* ── Seite und Kopfzeile ─────────────────────────────────────────────────── */

.page{ max-width:900px; margin:0 auto; }

.page-header{ display:flex; align-items:baseline; justify-content:space-between;
  gap:12px 24px; flex-wrap:wrap;
  margin-bottom:36px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.page-header h1{ font-size:clamp(1.4rem,3.4vw,2rem); font-weight:400;
  font-variation-settings:"wght" 700,"wdth" 88; letter-spacing:.02em; }

.back-link{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  color:var(--dim); text-decoration:none; transition:color .4s var(--ease); }
.back-link:hover{ color:var(--fg); }

/* Modul-Umschalter, den tnsn.ch/nav.js in die Kopfzeile setzt */
.tnsn-nav{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end;
  gap:.4em 1.4em; }
.tnsn-nav a[aria-current]{ color:var(--fg); pointer-events:none; }
.tnsn-nav .tnsn-home{ margin-right:.4em; }
.tnsn-nav .tnsn-admin{ margin-left:.4em; }   /* Benutzerverwaltung, nur für Admins */
.tnsn-nav .tnsn-me{ margin-left:.4em; }      /* eigener Name → Konto */
.tnsn-nav .tnsn-me::before{ content:"·"; margin-right:1.4em; color:var(--faint); }
.tnsn-theme{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; color:var(--dim);
  background:transparent; border:0; cursor:pointer; padding:0; transition:color .4s var(--ease); }
.tnsn-nav .tnsn-theme{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; }
.tnsn-theme:hover{ color:var(--fg); }
.tnsn-nav .tnsn-theme{ margin-left:.4em; }

/* ── Reiter ──────────────────────────────────────────────────────────────── */

.tabs{ display:flex; align-items:center; gap:2px; margin:0 0 18px;
  border-bottom:1px solid var(--line); overflow-x:auto; }
.tab{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:lowercase;
  color:var(--faint); background:transparent; border:0; border-bottom:1px solid transparent;
  padding:.9em 1.1em; margin-bottom:-1px; cursor:pointer; white-space:nowrap;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.tab:hover{ color:var(--dim); }
.tab.active{ color:var(--fg); border-bottom-color:var(--fg); }

/* ── Flächen ─────────────────────────────────────────────────────────────── */

.card{ background:var(--panel); border:1px solid var(--line-soft);
  padding:20px; margin-bottom:18px; }
.card h2{ font-size:.95rem; font-weight:400; font-variation-settings:"wght" 620;
  margin-bottom:16px; }

.section-title{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:lowercase; color:var(--dim); margin-bottom:14px; }

.panel-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:16px; }
.panel-head h2{ font-size:.95rem; font-weight:400; font-variation-settings:"wght" 620; }

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */

.btn{ display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:lowercase; text-decoration:none; padding:.7em 1.1em;
  border:1px solid transparent; background:transparent; color:var(--fg);
  cursor:pointer; border-radius:0; white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn-primary{ background:var(--fg); color:var(--bg); }          /* Umkehrung = Akzent */
.btn-primary:hover{ opacity:.82; }
.btn-ghost{ color:var(--dim); }
.btn-ghost:hover{ color:var(--fg); }
.btn-outline{ border-color:var(--line); color:var(--dim); }
.btn-outline:hover{ border-color:var(--fg); color:var(--fg); }
.btn-sm{ padding:.5em .8em; font-size:.63rem; }
.btn:disabled{ opacity:.35; cursor:default; }
.btn-cancel{ color:var(--dim); }
.btn-cancel:hover{ color:var(--fg); }

/* ── Formulare ───────────────────────────────────────────────────────────── */

input, select, textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  border-radius:0; color:var(--fg); font-family:var(--sans); font-size:.98rem;
  padding:.5em 0; width:100%;
  transition:border-color .4s var(--ease); }
input:focus, select:focus, textarea:focus{ outline:none; border-bottom-color:var(--fg); }
input::placeholder, textarea::placeholder{ color:var(--faint); }
input[type="checkbox"], input[type="radio"]{ width:auto; border:0; }

/* Auswahl: ohne Browser-Rahmen, dafür ein feiner Pfeil rechts */
select{ appearance:none; -webkit-appearance:none; padding-right:1.4em; min-width:9em; cursor:pointer;
  background-image:var(--chevron);
  background-repeat:no-repeat; background-position:right .2em center; background-size:10px 6px; }
select option{ background:var(--surface); color:var(--fg); }

label{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:lowercase; color:var(--dim); margin-bottom:.55em; }

.inline-form{ display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.field{ min-width:0; }
.field.grow{ flex:1 1 160px; }

/* Ankreuzfeld mit Beschriftung daneben, auf Höhe der Eingabefelder */
.check{ display:flex; align-items:center; gap:.6em; margin:0; padding:.55em 0; cursor:pointer;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:var(--dim); }
.check input{ width:15px; height:15px; margin:0; }

/* ── Text ────────────────────────────────────────────────────────────────── */

.hint{ font-family:var(--mono); font-size:.7rem; letter-spacing:.04em;
  color:var(--faint); line-height:1.75; }
.error{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--err); }
.notice{ font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--fg); line-height:1.75; }
.empty{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--faint); padding:18px 0; }
.flash{ margin-bottom:18px; }

/* Eine Adresse zum Weitergeben (Türlink, Einladung) */
.token-box{ border:1px solid var(--line-soft); padding:14px; background:var(--panel); }
.token-url{ font-family:var(--mono); font-size:.7rem; letter-spacing:0;
  color:var(--dim); word-break:break-all; line-height:1.8; user-select:all; }

/* ── Listenzeilen: Titel, Zusatz, Aktionen ───────────────────────────────── */

.link-row{ padding:14px 0; border-bottom:1px solid var(--line-soft); }
.link-row:last-child{ border-bottom:0; }
.link-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.link-name{ font-size:.92rem; }
.link-url{ font-family:var(--mono); font-size:.66rem; letter-spacing:0; color:var(--dim);
  word-break:break-all; line-height:1.7; margin-top:6px; }
.link-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }

/* ── Dialoge und Hinweise ────────────────────────────────────────────────── */

.modal-overlay{ position:fixed; inset:0; background:var(--overlay);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); z-index:50; }
.modal-overlay.visible{ opacity:1; pointer-events:auto; }
.modal{ background:var(--surface); border:1px solid var(--line); padding:24px;
  width:min(420px,100%); }
.modal h3{ font-size:1rem; font-weight:400; font-variation-settings:"wght" 620;
  margin-bottom:18px; }
.modal .field{ margin-bottom:16px; }
.modal-footer{ display:flex; gap:8px; justify-content:flex-end; margin-top:22px; }

.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,12px);
  background:var(--surface); border:1px solid var(--line); color:var(--fg);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  padding:.9em 1.3em; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .35s var(--ease); z-index:60; }
.toast.visible{ opacity:1; transform:translate(-50%,0); }

@media (max-width:620px){
  body{ padding:20px 14px; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}