/*
 * Portaalplatform — [phrona_portaal_isolatie] en [phrona_portaal_stack]
 *
 * DE STAMMEN ZIJN ECHTE KOLOMMEN, GEEN SVG
 * Een SVG met preserveAspectRatio="none" verdeelt x evenredig over de breedte,
 * maar de harten van de kaarten liggen niet op 1/6, 3/6 en 5/6 zodra er een
 * goot tussen zit. Op de geheugenpagina ging dat goed omdat daar geen goten in
 * het raster zaten; hier zitten ze er wel, dus drie kolommen met dezelfde gap
 * als de rij erboven. Dan staat elke stam exact op het hart.
 *
 * DE BASISBALK IS EEN APART ELEMENT EN GEEN ACHTERGROND
 * Hij moet over de volle breedte doorlopen onder de stammen, terwijl de stammen
 * zelf op de kolombreedte staan. Twee verschillende breedtes, dus twee
 * elementen -- anders moet je met negatieve marges gaan schuiven.
 *
 * GEEN NIEUWE KLEUREN
 * Alleen --green-line voor de verbindingen, --bg-warm/--line-soft voor de
 * vlakken en --ink/--muted voor tekst. De drie portalen krijgen bewust geen
 * eigen accentkleur: ze zijn gelijkwaardig, niet verschillend van betekenis.
 */

/* ---------- Isolatie: drie portalen op één basis ---------- */

.pt-isolatie {
  margin: clamp(26px, 3.2vw, 40px) 0;
}

.pt-isolatie__rij {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}

.pt-portaal {
  min-width: 0;
  padding: clamp(14px, 1.8vw, 18px) clamp(14px, 1.8vw, 18px) clamp(12px, 1.6vw, 16px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.pt-portaal__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: .55em;
  border-bottom: 1px solid var(--line-soft);
}

.pt-portaal__host {
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: .82rem;
  font-weight: 650;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
}

.pt-portaal__domein {
  font-weight: 400;
  color: var(--muted);
}

.pt-portaal__slot {
  display: inline-flex;
  flex: none;
  color: var(--green);
}

.pt-portaal__label {
  margin: .6em 0 .7em;
  font-size: .8rem;
  color: var(--muted);
}

.pt-portaal__feiten {
  margin: 0;
  display: grid;
  gap: .5em;
}
.pt-portaal__feiten > div {
  display: grid;
  gap: .1em;
}
.pt-portaal__feiten dt {
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.pt-portaal__feiten dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* De drie stammen: zelfde kolommen en dezelfde gap als de rij erboven. */
.pt-isolatie__voet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  height: clamp(18px, 2vw, 24px);
}
.pt-isolatie__stam {
  justify-self: center;
  width: 1px;
  background: var(--green-line);
  position: relative;
}
.pt-isolatie__stam::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--green-line);
  border-bottom: 1.5px solid var(--green-line);
  transform: translate(-50%, -1px) rotate(45deg);
}

.pt-isolatie__basis {
  display: grid;
  gap: .2em;
  padding: clamp(12px, 1.6vw, 15px) clamp(14px, 1.8vw, 18px);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}
.pt-isolatie__basis-kop {
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
}
.pt-isolatie__basis-tekst {
  font-size: .82rem;
  color: var(--muted);
  max-width: 62ch;
  margin-inline: auto;
}

.pt-isolatie__bijschrift {
  margin-top: .9em;
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Stack: twee consolen ---------- */

.pt-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin: clamp(26px, 3.2vw, 40px) 0;
}

.pt-console {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(14px, 1.8vw, 18px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.pt-console__kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: .7em;
}
.pt-console__titel {
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.pt-console__badge {
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--green);
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: .2em .6em;
  white-space: nowrap;
}

.pt-console__body {
  margin-bottom: .8em;
  padding: .7em .8em;
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow-x: auto;
}
.pt-console__regel {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre;
}
.pt-console__prompt {
  color: var(--green);
  user-select: none;
}

.pt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 .8em;
  padding: 0;
  list-style: none;
}
.pt-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem;
  color: var(--ink);
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: .22em .55em;
}

.pt-console__noot {
  margin: auto 0 0;
  font-size: .82rem;
  color: var(--muted);
}

/* ---------- Responsief ---------- */

@media (max-width: 900px) {
  .pt-stack { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /*
   * Op één kolom staan de kaarten onder elkaar, en dan wijzen drie stammen
   * naar posities waar niets meer is. Zelfde keuze als bij de geheugen-
   * architectuur en de Plato-banen: de verbinding weg, niet verkeerd laten
   * wijzen. De basisbalk blijft -- die is nog steeds waar.
   */
  .pt-isolatie__rij { grid-template-columns: minmax(0, 1fr); }
  .pt-isolatie__voet { display: none; }
  .pt-isolatie__basis { margin-top: clamp(10px, 1.6vw, 14px); }

  .pt-portaal__feiten > div {
    grid-template-columns: minmax(0, 1fr);
  }
  .pt-console__regel { font-size: .76rem; }
}

/*
 * Op een smal scherm past een coderegel niet. Horizontaal scrollen is de
 * gebruikelijk keuze voor code, maar dan staat er wel tekst buiten beeld die je
 * moet ontdekken -- en in een voorbeeld van drie regels leest dat als een fout.
 * Dus laten wrappen. Ingediend met een hanging indent zodat een afgebroken
 * regel niet op de prompt lijkt.
 */
@media (max-width: 560px) {
  .pt-console__body { overflow-x: visible; }
  .pt-console__regel {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding-left: 1.1em;
    text-indent: -1.1em;
  }
}

@media (max-width: 420px) {
  .pt-console__regel { font-size: .72rem; }
  .pt-portaal__feiten dd { font-size: .74rem; }
}

@media print {
  .pt-portaal,
  .pt-console { break-inside: avoid; }
  .pt-isolatie__voet { display: none; }
}