/* =========================================================
   My Little Network Professor — IPv4 Toolkit
   Monochrome. Thin lines. Space instead of boxes.
   ========================================================= */

html {
  scroll-behavior: smooth;
}

:root {
  /* Layout */
  --sidebar-w: 340px;
  --sidebar-gap: 72px;   /* witruimte tussen nav en tools */
  --content-w: 980px;    /* tools: formulieren, knoppen, uitvoerkader */
  --prose-w: 680px;      /* lopende tekst: 980px per regel leest niet */
  --tool-gap: 7.5rem;    /* tools worden gescheiden door afstand, niet door lijnen */

  /* Monochrome palette */
  --paper: #ffffff;
  --ink: #000000;
  --muted: #666666;
  --hover: #f5f5f5;
  --fill-soft: #ebebeb;
  --line: #000000;       /* structurele hairlines */
  --line-soft: #d8d8d8;  /* binnenlijnen van tabellen */
  --ink-hover: #333333;
  --placeholder: #767676;

  /* Grijstrap voor de VLSM-balk; klapt mee om in het negatief */
  --tone-1: #d0d0d0;
  --tone-2: #b0b0b0;
  --tone-3: #8a8a8a;
  --tone-4: #666666;
  --tone-5: #3a3a3a;

  --select-arrow: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Menlo", "Consolas", "Monaco", monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  padding: 5.5rem 3rem 12rem;
  padding-left: calc(var(--sidebar-w) + var(--sidebar-gap));
  -webkit-font-smoothing: antialiased;
}

/* Content staat links, direct naast de nav — niet gecentreerd */
/* Niet main aftoppen maar de tekst zelf: uitvoer mag daardoor breder zijn
   dan de leeskolom, zonder vw-rekenwerk dat op de scrollbar stukloopt. */
main {
  max-width: none;
  margin: 0;
}

.container > form {
  max-width: var(--content-w);
}

.container > h2,
.container > p,
.uitleg,
ul.list,
.why,
.toelichting,
.introduction {
  max-width: var(--prose-w);
}

/* =========================
   SIDEBAR
   ========================= */

.sidenav {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  z-index: 1000;
  overflow-y: auto;
  padding: 4rem 2rem 2rem;
  background: var(--paper);
  border-right: 1px solid var(--line);
  color: var(--ink);
}

.sidenav h2 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  margin: 0 0 1.25rem;
  letter-spacing: 0;
}

.sidenav p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
}

.sidenav p:last-child {
  margin-top: 2.5rem;
  margin-bottom: 0;
  font-size: 0.78rem;
}

.sidenav a {
  display: block;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--muted);
  padding: 0.45rem 0;
  border-bottom: 1px solid transparent;
  transition:
    color 0.1s,
    border-color 0.1s;
}

.sidenav a:hover,
.sidenav a:focus-visible {
  background: none;
  color: var(--ink);
  border-bottom-color: var(--ink);
  outline: none;
}

.title-small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.title-large {
  display: block;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin-top: 0.35rem;
}

/* Anker scroll offset */
[id] {
  scroll-margin-top: 3rem;
}

/* =========================
   TYPOGRAFIE
   ========================= */

h1 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

h2 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

h3,
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  background: var(--hover);
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--hover);
  padding: 0.1em 0.35em;
}

/* =========================
   TOOLS — gescheiden door afstand
   ========================= */

.introduction {
  max-width: var(--prose-w);
  padding: 0;
  margin: 0 0 var(--tool-gap);
}

.container {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 var(--tool-gap);
}

.container:last-child {
  margin-bottom: 0;
}

.uitleg,
ul.list {
  font-size: 1rem;
  color: var(--muted);
  max-width: var(--prose-w);
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

ul.list {
  list-style-type: square;
  padding-left: 1.1rem;
}

.container > p {
  max-width: var(--prose-w);
  color: var(--muted);
}

.why {
  margin-top: 2rem;
  padding: 0 0 0 1.25rem;
  border-left: 1px solid var(--line);
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: var(--prose-w);
}

.why h4 {
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.toelichting {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: var(--prose-w);
}

.toelichting summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--ink);
}

/* =========================
   FORMULIEREN
   ========================= */

label {
  display: block;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

input[type="text"],
input[type="number"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 0.7rem 0.75rem;
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: background 0.1s;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
  background: var(--paper);
  box-shadow: none;
}

select {
  cursor: pointer;
  appearance: none;
  padding-right: 2.5rem;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.1em 1.1em;
}

select:hover {
  background-color: var(--hover);
}

textarea {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  resize: vertical;
  min-height: 120px;
}

.help-text {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: normal;
}

.is-invalid {
  border-color: var(--ink) !important;
  background: repeating-linear-gradient(
    -45deg,
    var(--paper),
    var(--paper) 6px,
    var(--hover) 6px,
    var(--hover) 12px
  ) !important;
}

.error {
  color: var(--ink);
  font-weight: 500;
  border-left: 1px solid var(--ink);
  padding-left: 0.75rem;
}

/* =========================
   KNOPPEN
   ========================= */

button {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.7rem 1.25rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.1s;
}

button:hover:not(:disabled) {
  background: var(--hover);
}

button:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Primaire actie: enige zwarte vlak op de pagina */
button[type="submit"] {
  color: var(--paper);
  background: var(--ink);
}

button[type="submit"]:hover:not(:disabled) {
  background: var(--ink-hover);
}

button[type="reset"],
.sample-button {
  color: var(--muted);
}

button[type="reset"]:hover,
.sample-button:hover {
  color: var(--ink);
  background: var(--hover);
}

.form-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
  flex-wrap: nowrap;
}

.form-buttons button {
  flex: 0 0 auto;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.form-buttons button[type="submit"] {
  flex: 1 1 180px;
  min-width: 180px;
}

.add-subnet {
  font-size: 1.1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  margin-left: 0.5rem;
  flex: 0 0 auto;
}

.copy-result {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.result.visible + .copy-result {
  display: flex !important;
  margin-top: 1rem;
  margin-left: 0;
  margin-bottom: 1.5rem;
}

/* =========================
   RESULTAAT
   ========================= */

.result {
  display: none;
  margin-top: 1.75rem;
  padding: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  max-width: var(--content-w);
  /* Vangnet voor smalle vensters; op desktop past alles binnen de kolom. */
  overflow-x: auto;
}

.result.visible {
  display: block;
}

.result p {
  margin: 0.5rem 0;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.6;
}

.binair-box {
  margin-top: 1.5rem;
}

.subnet-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.subnet-row label {
  width: 245px;
  margin-bottom: 0;
}

.subnet-row input {
  flex: 1;
  margin-top: 0;
}

/* =========================
   TABELLEN
   ========================= */

.cidr-table,
.poortentabel {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0;
}

.result table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  border: 1px solid var(--line);
}

.cidr-table th,
.cidr-table td,
.poortentabel th,
.poortentabel td,
.result th,
.result td {
  border: 1px solid var(--line-soft);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

.cidr-table th,
.cidr-table td {
  font-family: var(--font-mono);
}

.result th,
.result td {
  font-family: var(--font-mono);
  white-space: nowrap;
}

.cidr-table th,
.poortentabel th,
.result th {
  background: var(--hover);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink);
  border-bottom-color: var(--line);
}

.poortentabel td.tcp {
  background: var(--paper);
}

.poortentabel td.udp {
  background: var(--hover);
}

.poortentabel td.tcpudp {
  background: var(--fill-soft);
}

/* =========================
   VISUALISATIES
   ========================= */

/* 1. BIT GRID — netwerk = zwart gevuld, host = wit met rand */
.bitviz,
.andviz {
  margin-top: 2rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.bitviz-legend {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.bitviz-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  font-weight: 400;
}

.bitviz-pill::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 0;
  border: 1px solid var(--line);
}

.bitviz-pill.net::before {
  background: var(--ink);
}

.bitviz-pill.host::before {
  background: var(--paper);
}

.viz-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0 0 0.35rem;
}

.bitviz-note {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: normal;
  max-width: var(--prose-w);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.bitgrid {
  display: flex;
  flex-wrap: wrap;    /* breekt alleen af als het echt niet past */
  gap: 1.5rem;        /* ruimte tussen de octetten */
  margin-top: 1rem;
}

.bit-octet {
  display: flex;
  gap: 3px;
  flex: 0 0 auto;     /* niet laten pletten: liever een streepje breder */
}

.bit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  font-weight: 500;
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  user-select: none;
}

.bit.net {
  background: var(--ink);
  color: var(--paper);
}

.bit.host {
  background: var(--paper);
  color: var(--ink);
}

/* 2. BLOCKSTRIP */
.blockstrip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-behavior: smooth;
}

.blockstrip::-webkit-scrollbar {
  height: 6px;
}

.blockstrip::-webkit-scrollbar-track {
  background: transparent;
}

.blockstrip::-webkit-scrollbar-thumb {
  background: var(--line-soft);
}

.block {
  flex: 0 0 auto;
  min-width: 140px;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  cursor: pointer;
  transition: background 0.1s;
}

.block:hover {
  background: var(--hover);
  box-shadow: none;
}

.block[aria-current="true"] {
  background: var(--ink);
  box-shadow: none;
}

.block[aria-current="true"] .block-label,
.block[aria-current="true"] .block-range {
  color: var(--paper);
}

.block-label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.block-range {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  font-family: var(--font-mono);
  line-height: 1.4;
}

.block-ellipsis {
  flex: 0 0 auto;
  min-width: 60px;
  border: 1px dashed var(--line-soft);
  border-radius: 0;
  background: transparent;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  padding: 0.85rem;
  user-select: none;
}

/* 3. VLSM / SUPERNETTING BALK — grijstrap, zie visualizations.js */
.viz-bar,
.block-bar {
  display: flex;
  height: 52px;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-top: 1.5rem;
  box-shadow: none;
}

.viz-segment,
.subnet-block {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.5rem;
  white-space: nowrap;
  border-right: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.viz-shade-0 {
  background: var(--paper);
  color: var(--ink);
}

.viz-shade-1 {
  background: var(--ink);
  color: var(--paper);
}

.viz-shade-2 {
  background: var(--tone-1);
  color: var(--ink);
}

.viz-shade-3 {
  background: var(--tone-4);
  color: var(--paper);
}

.viz-shade-4 {
  background: var(--fill-soft);
  color: var(--ink);
}

.viz-shade-5 {
  background: var(--tone-5);
  color: var(--paper);
}

.viz-shade-6 {
  background: var(--tone-2);
  color: var(--ink);
}

.viz-shade-7 {
  background: var(--tone-3);
  color: var(--paper);
}

.viz-segment:last-child,
.subnet-block:last-child {
  border-right: none;
}

.viz-segment:hover,
.subnet-block:hover {
  opacity: 0.85;
}

/* 4. BITWISE AND */
.andviz-pre {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  overflow-x: auto;
  line-height: 1.8;
  color: var(--ink);
  white-space: pre;
}

.andviz-pre > span.and-arrow {
  color: var(--ink);
  font-weight: 600;
}

.andviz-pre > span.and-label {
  display: inline-block;
  width: 120px;
  font-weight: 500;
  color: var(--muted);
  margin-right: 0.5rem;
}

/* 5. BADGES — onderscheid via vulling, niet via kleur */
.proto-badge,
.dns-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-left: 0.5rem;
  vertical-align: middle;
  background: var(--paper);
  color: var(--ink);
}

.proto-badge.udp,
.dns-badge.aaaa,
.dns-badge.cname {
  background: var(--hover);
}

.proto-badge.both,
.dns-badge.ptr,
.dns-badge.mx {
  background: var(--ink);
  color: var(--paper);
}

.dns-badge.a {
  background: var(--paper);
}

/* 6. BIT WEIGHTS */
.bit-weights {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  font-family: var(--font-mono);
}

.bit-weight {
  width: 32px;
  text-align: center;
}

/* =========================================================
   NEGATIEF — dezelfde tokens, omgeklapt.
   Elke tint wisselt van lichtheid, dus alle contrasten
   die in het positief kloppen, kloppen hier ook.

   Wit is bewust de standaard: het negatief verschijnt alleen
   als de bezoeker er zelf voor kiest, niet op basis van een
   systeeminstelling.
   ========================================================= */


:root[data-theme="dark"] {
  --paper: #000000;
  --ink: #ffffff;
  --muted: #9a9a9a;
  --hover: #1a1a1a;
  --fill-soft: #242424;
  --line: #ffffff;
  --line-soft: #3d3d3d;
  --ink-hover: #cccccc;
  --placeholder: #8f8f8f;

  --tone-1: #303030;
  --tone-2: #4f4f4f;
  --tone-3: #757575;
  --tone-4: #999999;
  --tone-5: #c5c5c5;

  --select-arrow: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* De schakelaar zelf */
.theme-toggle {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1100;
  width: 46px;
  height: 46px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
}

.theme-toggle span {
  display: block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(
    to right,
    var(--ink) 0 50%,
    var(--paper) 50% 100%
  );
}

/* Kleurloos afdrukken */
@media print {
  .theme-toggle {
    display: none;
  }
}

/* Zorgt dat de kleuromslag ook de browser-UI meeneemt
   (scrollbars, autofill, form controls) */
html {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* =========================
   IPv6-TOOLKIT — uitvoer
   ========================= */

/* Label/waarde-paren. Een hairline per rij houdt lange lijsten leesbaar
   zonder dat er een kader omheen komt. */
.v6-rows {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 0;
  margin: 0 0 1.5rem;
  max-width: var(--content-w);
}

.v6-rows dt,
.v6-rows dd {
  padding: 0.5rem 0;
  border-top: 1px solid var(--line-soft);
  margin: 0;
}

.v6-rows dt {
  font-size: 0.85rem;
  color: var(--muted);
  padding-right: 2rem;
}

.v6-rows dd {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.v6-rows dd.mono {
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

/* Uitkomst van de prefixcheck. Geen kleur: gevulde streep is ja,
   onderbroken streep is nee. */
.v6-verdict {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 1.5rem;
  padding-left: 1rem;
  max-width: var(--prose-w);
}

.v6-verdict.yes {
  border-left: 3px solid var(--ink);
}

.v6-verdict.no {
  border-left: 1px dashed var(--ink);
  color: var(--muted);
}

.v6-note {
  max-width: var(--prose-w);
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}

.v6-section {
  margin: 2rem 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: var(--content-w);
}

/* Bits per hextet: hexwaarde links, zestien bits ernaast. */
.v6-hextet {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 4px;
}

.v6-hextet-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  width: 4ch;
  text-align: right;
  flex: 0 0 auto;
}

.v6-hextet-bits {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

/* De achtste bit van elke halve groep krijgt wat lucht, zodat je
   de bytes kunt tellen. */
.v6-hextet-bits .bit:nth-child(8) {
  margin-right: 0.6rem;
}

@media (max-width: 600px) {
  .v6-rows {
    grid-template-columns: 1fr;
  }

  .v6-rows dt {
    border-top: 1px solid var(--line-soft);
    padding-bottom: 0;
  }

  .v6-rows dd {
    border-top: 0;
    padding-top: 0.15rem;
  }

  /* Twee octetten naast elkaar passen zo nog op een telefoon van 360px. */
  .bit {
    width: 15px;
    height: 15px;
    font-size: 0.55rem;
  }

  .bitgrid {
    gap: 0.9rem;
  }
}

/* =========================================================
   PASSEND HOUDEN

   De uitvoer heeft een kader, dus wat er niet in past zou moeten
   scrollen. De breedste tabel is de IPv4 VLSM-uitvoer met zeven
   kolommen; die vraagt zo'n 845px binnen het kader. Bij een vaste
   navigatie van 340px plus 72px tussenruimte betekent dat een venster
   van ongeveer 1305px.

   Daaronder laten we de dichte tabellen in twee stappen meekrimpen en
   halen we ruimte weg bij de navigatie, in plaats van te gaan scrollen.
   Onder 1100px staat de navigatie bovenaan en is er ruimte zat.
   ========================================================= */

@media (max-width: 1400px) {
  .result table,
  .cidr-table,
  .poortentabel {
    font-size: 0.72rem;
  }

  /* Bij 20px vragen vier octetten 796px; bij 17px nog 700px, en dan
     passen ze ook in de smalste band waar de navigatie nog vast staat. */
  .bit {
    width: 17px;
    height: 17px;
    font-size: 0.62rem;
  }

  .bitgrid {
    gap: 1.15rem;
  }

  .result th,
  .result td,
  .cidr-table th,
  .cidr-table td,
  .poortentabel th,
  .poortentabel td {
    padding: 0.4rem 0.5rem;
  }
}

@media (max-width: 1240px) {
  :root {
    --sidebar-w: 260px;
    --sidebar-gap: 40px;
  }

  .sidenav {
    padding: 4rem 1.5rem 2rem;
  }
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1100px) {
  body {
    padding: 0 0 6rem;
  }

  main {
    max-width: none;
    padding: 2rem 1.5rem 0;
  }

  .sidenav {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 2rem 1.5rem;
    z-index: auto;
    display: block;
  }

  .sidenav a {
    white-space: normal;
    font-size: 1rem;
  }

  .sidenav h2 {
    padding-right: 3.5rem;
  }

  .container,
  .introduction {
    margin-bottom: 5rem;
  }
}

@media (max-width: 600px) {
  main {
    padding: 1.5rem 1.25rem 0;
  }

  .sidenav {
    padding: 1.75rem 1.25rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .title-large {
    font-size: 1.55rem;
  }

  .form-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .form-buttons button {
    flex: 1 1 0;
    min-width: 0;
  }

  .form-buttons button[type="submit"] {
    flex: 1 1 100%;
    min-width: 0;
  }

  .subnet-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .subnet-row label {
    width: 100%;
    margin-bottom: 0.35rem;
  }

  .add-subnet {
    margin-left: 0;
    margin-top: 0.5rem;
    width: 100%;
  }

  input[type="text"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px;
  }

  .result {
    padding: 1rem;
  }

  .result table,
  .cidr-table,
  .poortentabel {
    font-size: 0.78rem;
  }
}