/*! NEXTARI · Handy-Seiten */
/* NEXTARI · HANDY-SEITEN · Games, People und Events als volle Seiten am
  Telefon, mit demselben Bausatz wie die Reiter in Pulse
  (nxm-handyreihen.js, css/nextari-handyreihen.css).

  WARUM ES SIE GIBT. Am Telefon waren die drei vollen Seiten die
  Schreibtischseite, nur entschaerft: je Wischreihe EINE Karte, Raster als
  Stapel, Reihenkoepfe drei- bis sechsmal so hoch wie am Schreibtisch, und
  zwischen Auftakt und erster Karte eine Filterflaeche aus Text. Festgelegt
  ist Netflix: Bildreihen zum Wischen, die letzte Karte rechts angeschnitten.

  NUR AM TELEFON. Die Seiten binden diese Datei mit media="(max-width:767px)"
  ein, dieselbe Schwelle wie die Registerleiste. Darum steht hier keine
  Schwelle, und am Schreibtisch aendert sich kein Punkt.

  NUR AUF DEN DREI SEITEN. Jede Regel beginnt mit
  html[data-nx-hauptseite] · das Merkmal steht im Markup der drei Seiten.
  Es gibt den Regeln zugleich den Vorrang vor den Stilbloecken, die Module
  zur Laufzeit einhaengen. Die alten Telefonregeln fuer dieselben Stellen
  (nxm-mobil.css) gelten auf diesen drei Seiten nicht mehr · ein Besitzer.

  DIE MASSE SIND DIE DES BAUSATZES. Eine Karte im Hochformat ist so breit,
  dass zwei und ein Drittel im Bild stehen; eine Karte im Querformat
  anderthalb · die eine Rechnung in nextari.css (--nx-karte-*), die auch
  der Bausatz von Pulse nutzt. Gerechnet wird gegen die Wischreihe selbst
  (sie ist ein Container, 100cqw ist ihre Breite), nicht gegen das Fenster:
  eine Reihe in einer Flaeche ist schmaler als eine auf der Seite und zeigt
  trotzdem zwei und ein Drittel. Ein Kasten mit Text steht fast ganz im
  Bild, der naechste schaut an der Kante hervor.

  Was eine Karte zeigt, bestimmen weiter ihre Bauer und die Kartenform
  (nxm-karten.js, css/nextari-karten.css). Hier steht nur, wie breit sie
  ist und wie die Reihe laeuft. */

html[data-nx-hauptseite]{
  --hs-kante:var(--nx-kopfrand);
  /* Das Kartenmass gehoert nextari.css (--nx-karte-hoch, -quer, -kasten,
  -rang, Nr. C54) · dort wird es mit derselben Kante gerechnet. */
}

/* ---------------------------------------------------------------- 1
  DIE WISCHREIHE. Jeder Kartentraeger der drei Seiten laeuft als eine Zeile
  bis an den Rand des Telefons, links wie rechts; die erste Karte steht auf
  der Kante, die letzte im Bild ist rechts angeschnitten. Am Ende schliesst
  die Zeile mit derselben Luft wie links. Raster werden zu solchen Zeilen,
  statt zu Stapeln. */
html[data-nx-hauptseite] :is(
  .carousel, .nx-gf-carou, .nx-yt-carou, .nx-kul-carou, .nx-locker, .nx-gmods,
  #friends, .nxpotm-reihe, #live, .nx-cal-week, .nxsh-grid, .nxach-row,
  .nx-slwrap:has(> .nxk-leer), #nxTeamsGrid, .chgrid, :is(#nxLocalRow, #nxWatchRow) .nx-cl,
  #my, #featured, #stream, .nxec-week, .nx-lvl-g):not([hidden]){
  display:flex;flex-wrap:nowrap;align-items:stretch;gap:var(--nx-luecke-knopf);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--hs-kante);scrollbar-width:none;
  box-sizing:border-box;width:auto;max-width:none;container-type:inline-size;
  /* Als Kind einer Zeile waere die Reihe als Container sonst null breit. */
  min-width:calc(100% + 2 * var(--hs-kante));
  margin-left:calc(-1 * var(--hs-kante));margin-right:calc(-1 * var(--hs-kante));
  padding-left:var(--hs-kante);padding-right:var(--hs-kante)}
html[data-nx-hauptseite] :is(
  .carousel, .nx-gf-carou, .nx-yt-carou, .nx-kul-carou, .nx-locker, .nx-gmods,
  #friends, .nxpotm-reihe, #live, .nx-cal-week, .nxsh-grid, .nxach-row,
  .nx-slwrap, #nxTeamsGrid, .chgrid, .nx-cl,
  #my, #featured, #stream, .nxec-week, .nx-lvl-g)::-webkit-scrollbar{display:none}

/* Die Karte · Hochformat ist die Regel: Plakate, Menschen, Tage, Orte. */
html[data-nx-hauptseite] :is(
  .nx-locker, #friends, .nxpotm-reihe, #live, .nx-cal-week, .nxach-row,
  .nx-slwrap:has(> .nxk-leer), #nxTeamsGrid, .chgrid, :is(#nxLocalRow, #nxWatchRow) .nx-cl, #my, .nxec-week, .nx-lvl-g) > :not(.nx-kapp-mehr){
  flex:0 0 var(--nx-karte-hoch);width:var(--nx-karte-hoch);max-width:none;min-width:0;
  margin:0;scroll-snap-align:start;box-sizing:border-box}
/* Querformat · Spielkacheln mit Bild ueber die ganze Karte, Videos,
  Beitraege, Abende und Regale der Kanaele mit Bild und Text darunter
  (im Bausatz: der Kanal-Kasten und die Querreihen). */
html[data-nx-hauptseite] :is(.carousel, .nx-gf-carou, .nx-yt-carou, .nx-kul-carou, .nxsh-grid, #featured, #stream) > :not(.nx-kapp-mehr){
  flex:0 0 var(--nx-karte-quer);width:var(--nx-karte-quer);max-width:none;min-width:0;
  margin:0;scroll-snap-align:start;box-sizing:border-box}
/* Kasten · die drei Module unter der Bibliothek. */
html[data-nx-hauptseite] .nx-gmods > *{
  flex:0 0 var(--nx-karte-kasten);width:var(--nx-karte-kasten);max-width:none;min-width:0;
  margin:0;scroll-snap-align:start;box-sizing:border-box}
/* Eine Reihe, die selbst eine Reihe im Kasten ist (Watch-Partys), traegt
  kein Polster (nxm-mobil.css, "ein Kasten im Kasten polstert nicht
  zweimal") · sie laeuft deshalb nicht bis an den Rand, sondern endet an
  der Kante der Seite. */
html[data-nx-hauptseite] .section > #stream{margin-left:0;margin-right:0;min-width:100%}
/* Die Huelle einer Reihe laeuft mit · sie haelt sonst die Zeile auf der
  Breite des Inhalts fest. */
html[data-nx-hauptseite] :is(.crow, .nx-slwrap:has(> #friends), .nx-slwrap:has(> #live)){
  overflow:visible;max-width:none}
/* Die Weiter-Pfeile sind am Finger ohne Sinn · gewischt wird. */
html[data-nx-hauptseite] :is(.nx-cnav, .arrow, .nx-nfx, .nxsh-nb, .slider-arrow){display:none}

/* Die Top 10 · grosse Rangzahl, das Plakat liegt daneben, eine Einheit ist
  so breit wie eine Karte im Hochformat (wie .hr-top im Bausatz). */
html[data-nx-hauptseite] .carousel.t10 > .t10item{
  flex:0 0 auto;width:auto;align-items:flex-end}
html[data-nx-hauptseite] .t10num{font-size:var(--nx-karte-rang);margin-right:calc(var(--nx-karte-rang) * -.08);margin-bottom:0}
html[data-nx-hauptseite] .t10poster{width:calc(var(--nx-karte-hoch) * .66);height:calc(var(--nx-karte-hoch) * .99)}

/* Eine Karte bricht nicht nach Woertern um, sondern stellt sich hoch:
  Bild oder Zeichen oben, Name darunter, Knoepfe ueber die ganze Breite. */
html[data-nx-hauptseite] #friends > .card .ctop{flex-direction:column;align-items:flex-start}
html[data-nx-hauptseite] #friends > .card .ctop > div{min-width:0;max-width:100%}
html[data-nx-hauptseite] #friends > .card .cbtns{flex-wrap:wrap}
html[data-nx-hauptseite] #friends > .card .cbtns > *{flex:1 1 100%}
/* Eine Listenzeile als Karte (Orte in Berlin, gemeinsam schauen) steht
  aufrecht: Punkt, Text, Knopf untereinander. */
html[data-nx-hauptseite] :is(#nxLocalRow, #nxWatchRow) .nx-cl > .nx-cl-row{flex-direction:column;align-items:stretch;gap:var(--nx-luecke-knopf)}

/* ---------------------------------------------------------------- 2
  DER REIHENKOPF IN EINER ZEILE. Titel links, der Weg zu allem rechts und
  leise; was die Reihe ist (die Notiz) steht klein darunter, die Reiter
  einer Reihe als eigene Wischzeile. Der Ziehgriff und die Knoepfe, die
  nur beim Zeigen erscheinen, stehen am Finger nicht im Kopf · ordnen,
  stummschalten und entfernen geht weiter in der Anpassen-Tafel und unter
  "Verwalten". */
html[data-nx-hauptseite] :is(.shead, .sphead, .nx-gr-kopf, .nx-charea-head){
  flex-direction:row;flex-wrap:wrap;align-items:baseline;
  column-gap:var(--nx-luecke-knopf);row-gap:2px;min-height:0}
html[data-nx-hauptseite] :is(.shead, .sphead, .nx-gr-kopf, .nx-charea-head) > :is(h2, h3, b, .sptitle){
  flex:1 1 0;min-width:0;width:auto;margin:0;order:1}
html[data-nx-hauptseite] :is(.shead, .sphead, .nx-gr-kopf, .nx-charea-head) > svg{flex:none;order:0}
html[data-nx-hauptseite] :is(.shead, .sphead, .nx-gr-kopf, .nx-charea-head) > :is(
  .seeall, .nx-zaehler, .nxsh-new, .nx-charea-mg, .nx-createteam, .nx-kal-woche, a.nx-quer){
  flex:none;order:2;margin-left:auto}
html[data-nx-hauptseite] :is(.shead, .sphead, .nx-gr-kopf, .nx-charea-head) > :is(.note, .sptag, .rsub, .nxad-reihenzeile){
  flex:1 1 100%;order:3;margin:0;min-width:0}
html[data-nx-hauptseite] :is(.nx-ctrls, .nxsh-ctrls){display:none}
/* Der Kopf des Ortes (LVL): Zeichen und Name in einer Zeile, Kennzeichnung
  und die zwei Wege darunter. */
html[data-nx-hauptseite] #nx-lvl-row .lvl-head{gap:var(--nx-luecke-knopf) var(--nx-luecke-kompakt)}
html[data-nx-hauptseite] #nx-lvl-row .lvl-tt{flex:1 1 60%;min-width:0}
/* Die Notiz im Titel (einige Bauer setzen sie hinein) bricht unter ihn. */
html[data-nx-hauptseite] :is(.shead, .sphead) > :is(h2, h3){display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--nx-luecke-knopf);row-gap:2px}
html[data-nx-hauptseite] :is(.shead, .sphead) > :is(h2, h3) > .note{flex:1 1 100%;margin:0}
html[data-nx-hauptseite] :is(.shead, .sphead, .nx-gr-kopf, .nx-charea-head) .note{
  font-size:var(--nx-typo-meta);line-height:1.35;color:var(--nx-dim)}
/* "Alle ansehen" · leise, rechts, und trotzdem in Fingermass (wie .hr-alle). */
html[data-nx-hauptseite] :is(.shead, .sphead, .nx-gr-kopf, .nx-charea-head) > .seeall{
  min-height:var(--nx-h-bedien);margin-top:-10px;margin-bottom:-10px;padding:0 0 0 var(--nx-luecke-knopf);
  background:none;border:0;font-size:var(--nx-typo-meta);color:var(--nx-dim);white-space:nowrap}
/* Die Reiter einer Reihe · eine Zeile zum Wischen, bis an den Rand. */
html[data-nx-hauptseite] .nx-gr-reiter{
  flex:1 1 100%;order:4;flex-wrap:nowrap;gap:var(--nx-luecke-knopf);margin-left:0;
  overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--hs-kante));padding-right:var(--hs-kante)}
html[data-nx-hauptseite] .nx-gr-reiter::-webkit-scrollbar{display:none}
html[data-nx-hauptseite] .nx-gr-reiter > *{flex:none;white-space:nowrap}

/* ---------------------------------------------------------------- 3
  DIE FILTERLEISTE ALS SCHMALE LEISTE IN EINER ZEILE (vorher 254 bis 304
  Punkte Text). Vorne steht, was die Seite filtert und ordnet: die Auswahl
  "Du siehst" und Anpassen; dann die Demo-Marke mit "Beispieldaten" (einmal
  je Seite, nxm-marken.js); dann die Zeichen der verbundenen Plattformen
  und der Weg, weitere zu verbinden. Ist noch nichts verbunden, ist dieser
  Weg der eine gefuellte Knopf und steht vorn. Reicht die Breite nicht,
  wischt die Zeile. Der Satz dazu bleibt im Dokument (Vorlesehilfe), am
  Telefon sichtbar ist er nicht: was die Bibliothek enthaelt, zeigt die
  Reihe darunter. "Du siehst" ebenso · die Auswahl nennt sich selbst und
  traegt ihren Namen fuer die Vorlesehilfe (nxm-nur-spiel.js). */
html[data-nx-hauptseite] .nx-stg{margin-bottom:var(--nx-luecke-wort)}
html[data-nx-hauptseite] .nx-stg-in{
  flex-wrap:nowrap;align-items:center;gap:var(--nx-luecke-knopf);
  padding:calc(var(--nx-luecke-knopf) / 2) var(--nx-luecke-kompakt);border-radius:var(--nx-r-pille);
  background:var(--nx-hebung);overflow-x:auto;scrollbar-width:none}
html[data-nx-hauptseite] .nx-stg-in::-webkit-scrollbar{display:none}
html[data-nx-hauptseite] .nx-stg-in > *{flex:none;order:0}
html[data-nx-hauptseite] .nx-stg-in > .nx-stg-kn:not(.nx-stg-leise){order:-3}
html[data-nx-hauptseite] .nx-stg-in > .nx-stg-werkzeuge{order:-2}
html[data-nx-hauptseite] .nx-stg-in > .nx-demopill{order:-1}
html[data-nx-hauptseite] .nx-stg-in > .nx-stg-kn.nx-stg-leise{order:1}
html[data-nx-hauptseite] :is(.nx-stg-tx, #nxNurSpiel > .vor){
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-nx-hauptseite] .nx-stg-kn{flex:none;padding:0 var(--nx-luecke-knopf);white-space:nowrap}
html[data-nx-hauptseite] .nx-stg-werkzeuge{flex:none;flex-wrap:nowrap;margin-left:0;gap:var(--nx-luecke-knopf)}
html[data-nx-hauptseite] .nx-stg-werkzeuge #nxNurSpiel{flex-wrap:nowrap;align-items:center;gap:var(--nx-luecke-knopf)}
html[data-nx-hauptseite] .nx-stg-werkzeuge #nxNurSpiel > *{flex:none}
/* Die Auswahl ist so breit wie "Alle Spiele", nicht wie der laengste
  Spielname der Liste; ein gewaehlter langer Name wird gekuerzt. */
html[data-nx-hauptseite] #nxNurSpiel .feld{max-width:10em}
html[data-nx-hauptseite] #nxNurSpiel select{max-width:100%;text-overflow:ellipsis}
html[data-nx-hauptseite] .nx-stg-werkzeuge .czfab.czfab-leiste{
  width:var(--nx-h-bedien);height:var(--nx-h-bedien);border:0;background:var(--nx-hebung)}

/* ---------------------------------------------------------------- 4
  Auf Games und People bleibt die Huelle main leer (die Reihen stehen
  direkt im body) und trug trotzdem 32 Punkte Polster · ein Band ohne
  Inhalt zwischen Auftakt und Leiste. */
html[data-nx-hauptseite] main.wrap:not(:has(> *)){padding-top:0}