/* netz.css: die Schublade fuer den gemeinsamen Raum.

   Eigene Datei, style.css bleibt unberuehrt. Es werden nur die
   Variablen benutzt, die dort schon fuer alle Ansichten gesetzt sind
   (--glas, --glasrand, --glanz, --cyan, --gelb, --txt, --mut, --les).
   Damit faerbt die Schublade auf Pergament und Nacht automatisch mit,
   ohne eine einzige feste Farbe.

   Eine Farbregel traegt die ganze Schublade: CYAN ist "hier bist du
   verbunden", GELB ist "hier haengt die Autoritaet". Wer rechnet, ist
   die wichtigste Information im Raum, und sie muss man sehen koennen,
   ohne zu lesen. */

.netz-mini{
  margin:6px 0 10px; font-size:11px; line-height:1.5; color:var(--mut);
}

/* ---- Kopf: Lage, Code, wer rechnet ---- */
.netz-stand{
  display:flex; flex-direction:column; gap:4px;
  padding:9px 10px; border-radius:12px;
  background:color-mix(in srgb, var(--glasrand) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--glasrand) 40%, transparent);
}
.netz-z{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:11px; letter-spacing:.4px; color:var(--mut);
}
.netz-z b{ color:var(--les); font-size:12px; letter-spacing:0; }
.netz-z.an b{ color:var(--cyan); }
/* Der Code wird abgetippt oder vorgelesen. Also gross, gesperrt und
   markierbar, nicht als Fliesstext. */
.netz-z.code b{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:17px; letter-spacing:3px; color:var(--cyan);
  user-select:all; -webkit-user-select:all;
}
.netz-z.wichtig b{ color:var(--gelb); }
.netz-meldung{
  margin:6px 0 0; padding-top:6px; font-size:11px; line-height:1.5;
  color:var(--les); border-top:1px solid color-mix(in srgb, var(--glasrand) 40%, transparent);
}

/* ---- Reihen mit Knoepfen und Feldern ---- */
.netz-reihe{ display:flex; gap:6px; margin-top:8px; align-items:stretch; }

.netz-b{
  flex:1; font:inherit; font-size:12px; line-height:1;
  color:var(--les); background:color-mix(in srgb, var(--glasrand) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--glasrand) 45%, transparent);
  border-radius:10px; padding:9px 8px; cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; gap:5px;
  transition:background .16s, color .16s, transform .1s;
}
.netz-b:hover{ color:var(--txt); background:color-mix(in srgb, var(--cyan) 16%, transparent); }
.netz-b:active{ transform:scale(.96); }
.netz-b.prim{
  color:var(--txt);
  background:linear-gradient(180deg, var(--glanz), transparent 65%),
             color-mix(in srgb, var(--cyan) 24%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cyan) 50%, transparent);
}
.netz-b.weit{ width:100%; flex:none; }
.netz-b.weg{ margin-top:10px; color:var(--mut); }
.netz-b.weg:hover{ color:var(--txt); background:color-mix(in srgb, var(--gelb) 18%, transparent); }

.netz-name, .netz-code, .netz-chatfeld, .netz-rolle{
  font:inherit; font-size:12px; color:var(--txt);
  background:color-mix(in srgb, var(--glasrand) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--glasrand) 45%, transparent);
  border-radius:10px; padding:8px 9px; min-width:0;
}
.netz-name{ flex:1; }
.netz-rolle{ flex:0 0 auto; cursor:pointer; }
.netz-rolle.klein{ padding:2px 4px; font-size:11px; margin-left:auto; }
.netz-chatfeld{ flex:1; }
/* Ein Raumcode wird getippt, oft von einem Zettel. Grossbuchstaben und
   Monospace, damit 8 und B nicht dasselbe aussehen. */
.netz-code{
  flex:1; text-transform:uppercase;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:3px; text-align:center;
}
.netz-name:focus, .netz-code:focus, .netz-chatfeld:focus{
  outline:none; border-color:color-mix(in srgb, var(--cyan) 60%, transparent);
}

/* ---- Teilnehmer ---- */
.netz-leute{ display:flex; flex-direction:column; gap:4px; margin-top:12px; }
.netz-p{
  display:flex; align-items:center; gap:7px;
  padding:7px 9px; border-radius:10px; font-size:12px;
  background:color-mix(in srgb, var(--glasrand) 8%, transparent);
  border:1px solid transparent;
}
.netz-p i{ font-style:normal; font-size:14px; }
.netz-p b{ color:var(--txt); font-weight:600; }
.netz-p span{ color:var(--mut); font-size:11px; margin-left:auto; }
.netz-p.ich{ border-color:color-mix(in srgb, var(--cyan) 45%, transparent); }
/* Wer rechnet, traegt die Welt. Das darf man sehen. */
.netz-p.gott{
  background:linear-gradient(180deg, var(--glanz), transparent 70%),
             color-mix(in srgb, var(--gelb) 18%, transparent);
  border-color:color-mix(in srgb, var(--gelb) 50%, transparent);
}
.netz-p.gott b{ color:var(--gelb); }
/* Verbindung weg, Platz noch da: ausgegraut statt verschwunden, sonst
   springt die Liste bei jedem Funkloch. */
.netz-p.fort{ opacity:.45; }

/* ---- Chat ---- */
.netz-chat{ margin-top:12px; }
.netz-chatlog{
  height:150px; overflow-y:auto; padding:8px 9px; border-radius:10px;
  display:flex; flex-direction:column; gap:3px;
  font-size:12px; line-height:1.45;
  background:color-mix(in srgb, var(--glasrand) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--glasrand) 35%, transparent);
}
.netz-c{ color:var(--les); word-break:break-word; }
.netz-c b{ color:var(--mut); font-weight:600; }
.netz-c.ich b{ color:var(--cyan); }

/* Auf dem Telefon ist die Schublade schmal. Dann brechen die Reihen um,
   statt die Knoepfe auf Briefmarkengroesse zu quetschen. */
@media (max-width:520px){
  .netz-reihe{ flex-wrap:wrap; }
  .netz-b{ min-width:44%; }
  .netz-chatlog{ height:110px; }
}