/* ProtoLab – eigene Schicht ueber der Markenbasis.
 *
 * protoframe.css liefert Tokens, Kopf, Fuss, Knoepfe und das Schriftfeld.
 * Hier steht nur, was ProtoLab zusaetzlich braucht: die Werkbank aus Register
 * und Buehne. Nichts aus der Basis wird ueberschrieben – wer dort etwas
 * aendern will, aendert es dort.
 *
 * Aufbau dieser Datei:
 *   0  Zeichenbrett – der Hintergrund
 *   1  Wortmarke im Kopf
 *   2  Werkbank – die zwei Spalten
 *   3  Register – die Liste links
 *   4  Buehne – Zeichnung, Text, Schriftfeld rechts
 *   5  Die Zeichnung selbst (SVG)
 *   6  Schmale Geraete
 */

/* ============================================================
   0  Zeichenbrett
   ============================================================ */

:root {
  /* Vier Blaupausen-Kacheln je Karo: grob genug, dass es sich vom feinen
     Raster auf dem Blatt absetzt und Tiefe entsteht statt Unruhe. */
  --pl-karo: calc(var(--pf-grid-cell) * 4);
  /* Als Zahlenwerte, weil das Canvas die Deckkraft je Karo selbst setzt. */
  --pl-blink-rgb: 15, 94, 155;
  --pl-blink-max: 0.13;
}
[data-pf-theme="dark"] {
  --pl-blink-rgb: 110, 166, 208;
  --pl-blink-max: 0.20;
}

/* Ohne gewaehlte Bauform ist die Seite kuerzer als das Fenster. Die Fusszeile
   bliebe dann mitten im Bild stehen und zoege ihre Ober- und Unterkante als
   zwei Linien quer durchs Leere. Deshalb haelt sie hier unten fest.
   Die fixen Hintergrundebenen stehen ausserhalb des Flusses und werden
   dadurch nicht zu Flex-Elementen. */
/* Platz fuer die Scrollbar dauerhaft freihalten. Sonst erscheint sie erst
   beim Waehlen einer Bauform, nimmt in dem Moment Breite weg und das ganze
   Layout rutscht um ihre halbe Breite zur Seite.
   Bewusst 'scrollbar-gutter' und nicht 'overflow-y: scroll': ein eigenes
   overflow auf html macht html zum Scroll-Container, und dann klebt der
   Kopf (position: sticky) nicht mehr oben fest. */
html { scrollbar-gutter: stable; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* width nicht weglassen: main traegt .pf-container mit 'margin: 0 auto', und
   ein automatischer Rand in der Querachse hebt das Dehnen der Flexbox auf –
   das Element faellt dann auf seine Inhaltsbreite zusammen. */
body > main { flex: 1 0 auto; width: 100%; }

/* Die Seite liegt auf einem Zeichenbrett – die Blaetter darauf.
   Es beginnt unter dem Kopf (--pl-kopf wird in raster.js gesetzt), sonst
   laege die oberste Karo-Reihe halb darunter und waere angeschnitten.
   Der Kopf klebt oben fest, das Brett kann also dauerhaft tiefer ansetzen. */
.pl-brett {
  position: fixed;
  inset: var(--pl-kopf, 0px) 0 0 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--pf-line-construction) 1px, transparent 1px),
    linear-gradient(90deg, var(--pf-line-construction) 1px, transparent 1px);
  background-size: var(--pl-karo) var(--pl-karo);
  opacity: 0.55;
}

/* Darueber die Karos, die beim Laden einmal schraeg durchs Bild aufleuchten. */
.pl-blink {
  position: fixed;
  inset: var(--pl-kopf, 0px) 0 0 0;
  z-index: -1;
  pointer-events: none;
  display: block;
  /* Hoehe ausrechnen statt 'auto': ein <canvas> ist ein ersetztes Element und
     wuerde sich bei 'auto' nach dem Seitenverhaeltnis seiner Bitmap richten
     statt nach der aufgespannten Box. */
  width: 100%;
  height: calc(100% - var(--pl-kopf, 0px));
}

/* ============================================================
   1  Wortmarke
   ============================================================ */

.pl-mark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-decoration: none;
}
.pl-mark:hover { text-decoration: none; }
.pl-mark__wort {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.32rem;
  font-weight: var(--pf-weight-semibold);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pf-text-primary);
}
.pl-mark__haus {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-faint);
}
.pl-mark__haus a { color: var(--pf-text-accent); }

/* ============================================================
   2  Werkbank
   ============================================================ */

.pl-werkbank {
  display: grid;
  grid-template-columns: 19rem 1fr;
  gap: var(--pf-space-7);
  align-items: start;
  padding: var(--pf-space-7) 0 var(--pf-space-9);
}

/* ============================================================
   3  Register
   ============================================================ */

.pl-register {
  position: sticky;
  top: var(--pf-space-6);
  border: var(--pf-border-hairline);
  background: var(--pf-surface-card);
}

/* Kopfzeile zaehlt, sie wirbt nicht. */
.pl-register__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pf-space-3);
  padding: var(--pf-space-4) var(--pf-space-5);
  border-bottom: var(--pf-border-strong);
}
.pl-register__titel {
  font: var(--pf-type-label);
  letter-spacing: var(--pf-tracking-stamp);
  text-transform: uppercase;
  color: var(--pf-text-primary);
}
.pl-register__zahl {
  font: var(--pf-type-dimension);
  color: var(--pf-text-faint);
  white-space: nowrap;
}

/* Gruppenueberschrift. Wird nur ausgegeben, wenn im Register ueberhaupt
   Gruppen gepflegt sind – sonst laeuft die Liste flach durch. */
.pl-gruppe {
  padding: var(--pf-space-4) var(--pf-space-5) var(--pf-space-2);
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-faint);
}
.pl-pos + .pl-gruppe { border-top: var(--pf-border-hairline); }

.pl-liste { list-style: none; margin: 0; padding: 0; }

/* Eine Position. Als <button> ausgelegt, wenn waehlbar – damit sie ohne
   Zusatzarbeit per Tastatur erreichbar ist. */
.pl-pos {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  gap: 2px var(--pf-space-3);
  width: 100%;
  padding: var(--pf-space-4) var(--pf-space-5);
  border: 0;
  border-top: var(--pf-border-hairline);
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: var(--pf-transition-surface);
}
.pl-liste > li:first-child .pl-pos { border-top: 0; }

.pl-pos__nr {
  grid-row: 1 / span 2;
  font: var(--pf-type-dimension);
  color: var(--pf-text-faint);
  padding-top: 2px;
}
.pl-pos__benennung {
  font: var(--pf-type-ui);
  font-weight: var(--pf-weight-medium);
  color: var(--pf-text-primary);
}
.pl-pos__kurz {
  font: var(--pf-type-dimension);
  color: var(--pf-text-muted);
  white-space: nowrap;
}
.pl-pos__merkmale {
  grid-column: 2 / span 2;
  font: var(--pf-type-body-sm);
  color: var(--pf-text-muted);
  text-wrap: pretty;
}

/* Waehlbar */
.pl-pos--waehlbar { cursor: pointer; }
.pl-pos--waehlbar:hover { background: var(--pf-surface-accent-quiet); }
.pl-pos--waehlbar:focus-visible {
  outline: var(--pf-focus-ring);
  outline-offset: -3px;
}

/* Ausgewaehlt: Marke an der linken Kante, wie ein gesetztes Lesezeichen. */
.pl-pos[aria-current="true"] { background: var(--pf-surface-accent-quiet); }
.pl-pos[aria-current="true"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--pf-blue-500);
}
.pl-pos[aria-current="true"] .pl-pos__benennung { color: var(--pf-text-accent); }

/* Noch nicht gezeichnet. Steht trotzdem im Register – das Programm ist
   vollstaendig, auch wo es noch nicht ausgefuehrt ist. */
.pl-pos--geplant { cursor: default; }
.pl-pos--geplant .pl-pos__benennung { color: var(--pf-text-muted); }
.pl-pos__stand {
  grid-column: 2 / span 2;
  justify-self: start;
  margin-top: 6px;
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-faint);
}
.pl-pos__stand::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 7px;
  vertical-align: 1px;
  border: 1px solid currentColor;
  border-radius: var(--pf-radius-pill);
}

/* ============================================================
   4  Buehne
   ============================================================ */

.pl-buehne { min-width: 0; }

.pl-blatt {
  border: var(--pf-border-hairline);
  background: var(--pf-surface-card);
}
.pl-blatt__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pf-space-3);
  padding: var(--pf-space-4) var(--pf-space-5);
  border-bottom: var(--pf-border-hairline);
}
.pl-blatt__titel {
  font: var(--pf-type-label);
  letter-spacing: var(--pf-tracking-stamp);
  text-transform: uppercase;
  color: var(--pf-text-primary);
}
.pl-blatt__rev {
  font: var(--pf-type-dimension);
  color: var(--pf-text-faint);
  white-space: nowrap;
}

/* Die Flaeche, auf der gezeichnet wird – als kariertes Blatt. */
.pl-stage {
  position: relative;
  padding: var(--pf-space-6);
  background:
    linear-gradient(var(--pf-line-construction) 1px, transparent 1px) 0 0 / 100% var(--pf-grid-cell),
    linear-gradient(90deg, var(--pf-line-construction) 1px, transparent 1px) 0 0 / var(--pf-grid-cell) 100%,
    var(--pf-surface-sunken);
}
/* Begrenzt, sonst streckt sich das Blatt ueber die ganze Spaltenbreite und
   die Zeichnung schwimmt in einer riesigen leeren Flaeche. */
.pl-dwg {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin: 0 auto;
}

.pl-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pf-space-5);
  align-items: start;
  padding: var(--pf-space-5);
  border-top: var(--pf-border-hairline);
}
.pl-info__text {
  margin: 0;
  max-width: var(--pf-measure-prose);
  font: var(--pf-type-body);
  color: var(--pf-text-secondary);
  text-wrap: pretty;
}

/* Leerer Zustand: kein Werbeplatz, sondern ein leeres Blatt, das sagt,
   worum es hier geht. */
/* Ungefaehr so hoch wie ein Blatt mit Zeichnung – dann springt das Layout
   nicht, sobald eine Bauform gewaehlt wird. */
.pl-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 24rem;
  padding: var(--pf-space-8) var(--pf-space-6);
  text-align: center;
}
.pl-leer__satz {
  margin: 0 auto;
  max-width: 34rem;
  font: var(--pf-type-body-lg);
  color: var(--pf-text-secondary);
  text-wrap: pretty;
}
/* Die Eigenschaft des Ganzen, als Stempel gesetzt statt in den Satz
   gepackt: der Satz sagt, was ProtoLab ist, der Stempel, wie es arbeitet. */
.pl-leer__stempel {
  margin-top: var(--pf-space-5);
  padding: 6px 12px;
  border: 1px solid var(--pf-line-accent);
  font: var(--pf-type-label);
  letter-spacing: var(--pf-tracking-stamp);
  text-transform: uppercase;
  color: var(--pf-text-accent);
  text-wrap: balance;
}
.pl-leer__hinweis {
  margin-top: var(--pf-space-5);
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-faint);
}

/* Der Hinweis nennt die Richtung zur Liste: breit steht sie links, schmal
   darunter. */
.pl-nur-schmal { display: none; }
@media (max-width: 62rem) {
  .pl-nur-breit { display: none; }
  .pl-nur-schmal { display: inline; }
}

.pl-titleblock { margin-top: var(--pf-space-6); }

/* ============================================================
   5  Die Zeichnung
   ============================================================ */

/* Durchgehend nicht skalierende Strichstaerken: das SVG wird in der Breite
   gestreckt, die Linien sollen dabei gleich duenn bleiben. */
.pl-dwg line, .pl-dwg path, .pl-dwg circle { vector-effect: non-scaling-stroke; }

.pl-dwg__kontur {
  fill: none;
  stroke: var(--pf-text-primary);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.pl-dwg__loch {
  fill: none;
  stroke: var(--pf-text-secondary);
  stroke-width: 1.2;
}
/* Strichpunktlinie, wie eine Achse auf der Zeichnung. */
.pl-dwg__mitte {
  stroke: var(--pf-graphite-400);
  stroke-width: 0.9;
  stroke-dasharray: 14 3 2 3;
}
.pl-dwg__mass line { stroke: var(--pf-text-muted); stroke-width: 1; }
.pl-dwg__hilfs { stroke: var(--pf-graphite-300); stroke-width: 0.8; }
/* Schriftgroesse in Zeichnungseinheiten, nicht als Token: im SVG skaliert sie
   mit dem viewBox mit, ein px-Wert aus der Typografie geriete dadurch riesig. */
.pl-dwg__masstext {
  font-family: var(--pf-font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  fill: var(--pf-text-muted);
}

/* ============================================================
   6  Schmale Geraete
   ============================================================ */

@media (max-width: 62rem) {
  .pl-werkbank {
    grid-template-columns: 1fr;
    gap: var(--pf-space-6);
  }
  /* Nicht kleben, wenn die Spalte ohnehin ueber die ganze Breite geht –
     sonst verdeckt das Register beim Scrollen die Zeichnung. */
  .pl-register { position: static; }
  /* Das Blatt zuerst, die Liste darunter: wer neu kommt, liest erst, was
     ProtoLab ist, statt als Erstes auf eine Liste ohne Erklaerung zu
     treffen. Nach dem Antippen steht die Zeichnung dadurch auch oben. */
  .pl-buehne { order: -1; }
  /* Beim Sprung nach dem Antippen nicht unter die feste Kopfzeile rutschen
     (etwa 4 rem hoch) – sonst verschwindet der Blattkopf mit dem Namen. */
  .pl-buehne { scroll-margin-top: 5rem; }
  .pl-info { grid-template-columns: 1fr; }
  .pl-info .pf-btn { width: 100%; }
}