/* Algemene_Voorwaarden_DEFINITIEF_v30_echt(2).txt: a full-height window with its own scroller,
   a checkered reading bar at the top and the buttons in the thumb zone. */

.scr-tos {
  height: 100%;
  min-height: 0;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  gap: 0;
}

.scr-tos .tos-win {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 720px;
}

/* the long file name wraps after its underscores instead of being cut off */
.scr-tos .tos-win .win__bar { flex: none; }

.scr-tos .tos-win .win__title {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 13px; /* window chrome: LEESBRIL enlarges the document, not the file name */
  line-height: 1.3;
  text-transform: none;
}

@media (max-width: 359px) {
  .scr-tos .tos-win .win__icon { display: none; } /* room for the name on two lines */
}

/* × is the way out of a full-screen window: a 44 px tap area around the small pixel box */
.scr-tos .tos-win .win__close { position: relative; }

.scr-tos .tos-win .win__close::after {
  content: "";
  position: absolute;
  inset: -11px -9px; /* from the padding box (inside the 3 px border): 26 x 22 -> 44 x 44 */
}

.scr-tos .tos-win .win__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.scr-tos .tos-win .win__body > * + * { margin-top: 0; }

/* reading progress: the style guide's checkered bar fills from the left */
.scr-tos .tos-progress {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--shade);
  border-bottom: var(--bw) solid var(--ink);
}

.scr-tos .tos-meter {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
}

.scr-tos .tos-meter__rest {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: var(--paper);
}

.scr-tos .tos-read {
  flex: none;
  min-width: 8.6em;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the document */
.scr-tos .tos-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 28px;
  background: var(--paper);
  outline: none;
}

.scr-tos .tos-scroll:focus-visible { box-shadow: inset 0 0 0 3px var(--lav); }

.scr-tos .tos-doc {
  font-family: var(--font-body);
  font-size: var(--fs-s);
  line-height: 1.45;
  overflow-wrap: break-word;
}

.scr-tos .tos-letterhead {
  padding-bottom: 12px;
  margin-bottom: 4px;
  text-align: center;
  border-bottom: 3px dotted var(--lav-d);
}

.scr-tos .tos-letterhead__title {
  font-family: var(--font-ui);
  font-size: var(--fs-m);
  line-height: 1.2;
  margin-bottom: 6px;
}

.scr-tos .tos-letterhead p {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.scr-tos .tos-letterhead span { display: inline-block; }

@media (max-width: 374px) {
  .scr-tos .tos-letterhead__title { font-size: var(--fs-s); }
}

/* every chapter skips rendering while it's off screen (an extra; sizes are estimated until seen) */
.scr-tos .tos-ch {
  content-visibility: auto;
  contain-intrinsic-size: auto 1400px;
}

.scr-tos .tos-h {
  margin: 20px 0 8px;
  padding-bottom: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-m);
  line-height: 1.25;
  border-bottom: 3px solid var(--ink);
}

.scr-tos .tos-p { margin: 0 0 8px; }
.scr-tos .tos-d2 { padding-left: 12px; }
.scr-tos .tos-d3 { padding-left: 24px; }
.scr-tos .tos-d4 { padding-left: 32px; }
.scr-tos .tos-n { font-weight: 700; }

/* art. 21: kleine lettertjes */
.scr-tos .tos-ch.is-small .tos-p {
  font-size: calc(10px * var(--text-scale));
  line-height: 1.35;
  margin-bottom: 4px;
}

/* "Halverwege!": a yellow note between two articles */
.scr-tos .tos-ch--note {
  margin: 24px 0 8px;
  padding: 10px 12px;
  text-align: center;
  background: var(--yellow);
  border: var(--bw) solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
}

.scr-tos .tos-ch--note .tos-p { margin: 0; font-weight: 700; }

.scr-tos .tos-ch--annex .tos-p { margin: 0 0 2px; }

/* the hidden clause looks like everything else (no rule for it at all, not even a cursor), until... */
.scr-tos .tos-clause.is-found {
  background-color: var(--pink);
  box-shadow: 0 0 0 2px var(--pink);
}

/* ...NIET AKKOORD frames it with a blinking selection (the shared .marquee, made inline). No negative
   margins: the frame would cover the full stop of "…geldt als indicatief." right before it. */
.scr-tos .tos-clause.marquee {
  position: static;
  padding: 3px 4px;
  margin: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.scr-tos .tos-clause.marquee.is-blinking {
  animation:
    ants calc(600ms / var(--speed)) steps(4) infinite,
    tos-frame-blink calc(800ms / var(--speed)) steps(1) infinite;
}

@keyframes tos-frame-blink {
  50% { background-size: 0 0, 0 0, 0 0, 0 0; }
}

/* buttons in the thumb zone */
.scr-tos .tos-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 10px 10px;
  background: var(--shade);
  border-top: var(--bw) solid var(--ink);
}

.scr-tos .tos-foot__lie {
  display: flex;
  justify-content: flex-end;
}

.scr-tos .tos-lied {
  min-height: var(--tap);
  padding: 4px 2px;
}

.scr-tos .tos-foot__row {
  display: flex;
  gap: 10px;
}

/* the footer keeps its size with LEESBRIL on, so the document keeps its room */
.scr-tos .tos-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 8px;
  font-size: 13px;
}

.scr-tos .tos-accept { font-size: 16px; }

@media (min-width: 768px) {
  .scr-tos { padding-top: 16px; padding-bottom: 16px; }
  .scr-tos .tos-scroll { padding: 18px 24px 32px; }
}

/* A phone on its side: the three footer rows would leave the document a single line, so everything
   goes in one row (the lie on the left, AKKOORD under the right thumb; labels may wrap). */
@media (orientation: landscape) and (max-height: 500px) {
  .scr-tos { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .scr-tos .tos-progress { padding-top: 5px; padding-bottom: 5px; }
  .scr-tos .tos-scroll { padding-top: 10px; padding-bottom: 16px; }

  .scr-tos .tos-foot {
    flex-direction: row;
    align-items: center;
    padding: 6px 10px 8px;
  }

  .scr-tos .tos-foot__lie,
  .scr-tos .tos-foot__row { display: contents; }

  .scr-tos .tos-lied { flex: 0 1 auto; max-width: 8.5em; text-align: left; }
  .scr-tos .tos-btn { flex: 1 1 auto; min-width: auto; } /* a label may wrap between words, never inside one */

  .scr-tos .tos-accept {
    flex: 1.4 1 auto;
    width: auto;
  }
}