/* Ilman javascriptiä osiot saavat tavallisen reunan. */
.osio {
  border-inline: 1px solid var(--reuna);
  border-block-start: 1px solid var(--reuna);
}

.osio:last-of-type { border-block-end: 1px solid var(--reuna); }

.js .osio,
.js .osio:last-of-type {
  border: 0;
}

.reunarivi,
.paatteen-loppu {
  display: block;
  width: var(--paateleveys, 100%);
  max-width: 100%;
  min-height: 1lh;
  margin: 0;
  color: var(--reuna);
  white-space: pre;
  overflow: hidden;
}

.reunateksti {
  color: var(--teksti);
  font-weight: 700;
}

.reunamerkki { color: var(--reuna); }

.osion-runko {
  position: relative;
  width: var(--paateleveys, 100%);
  max-width: 100%;
  overflow: hidden;
}

.reunasivu {
  position: absolute;
  inset-block: 0;
  width: 1ch;
  min-width: 1ch;
  margin: 0;
  color: var(--reuna);
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
}

.reunasivu.vasen { inset-inline-start: 0; }
.reunasivu.oikea { inset-inline-end: 0; }

.osion-sisus {
  min-width: 0;
  margin-inline: 1ch;
  padding: var(--sisus-y) var(--sisus-x);
}

.osion-sisalto { min-width: 0; }

.no-js .osio {
  padding: var(--sisus-y) var(--sisus-x);
}