/* Cleaning page. It builds on installation.css (grid, heads, intro, timeline) and keeps its type sizes: the middle
   compares the same unit before and after the cleaning under a draggable line (assets/js/cleaning.js), with a legend set
   like the installation legend, then the cleaning intervals over twelve months. */

/* Before/after: the stage keeps the render's proportions and the frame crops it round the unit (--sl, --sw: stage left
   and width as fractions of the frame; --st: stage top). The before render is clipped at the line, --p (0 to 100, percent
   of the frame width, set by the script). */
.lb__fig { --p: 50; --sl: 0; --sw: 1; --st: 0%; position: relative; overflow: hidden; aspect-ratio: 2 / 1; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgb(0 36 80 / .3); }
.lb.is-ready .lb__fig { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lb__stage { position: absolute; top: var(--st); left: calc(var(--sl) * 100%); width: calc(var(--sw) * 100%); aspect-ratio: 3 / 2; }
.lb__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.lb__before { position: absolute; inset: 0; clip-path: inset(0 calc((1 - (var(--p) / 100 - var(--sl)) / var(--sw)) * 100%) 0 0); }
.lb__line { position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 1%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgb(0 36 80 / .18), 0 0 14px rgb(0 36 80 / .25); pointer-events: none; }
.lb__line > span { position: absolute; top: 50%; left: 50%; display: block; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -6px rgb(0 36 80 / .45); }
/* Two small arrows on the handle: drag sideways */
.lb__line > span::before, .lb__line > span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.lb__line > span::before { left: 7px; border-right: 7px solid var(--navy); border-left: 0; }
.lb__line > span::after { right: 7px; border-left: 7px solid var(--navy); border-right: 0; }
.lb:not(.is-ready) .lb__line > span { display: none; }
.lb__fig.is-dragging .lb__line > span { transform: scale(1.08); }
.lb__fig:has(.lb__range:focus-visible) .lb__line > span { outline: 3px solid #1f74d3; outline-offset: 3px; }
/* The range keeps keyboard and screen reader control; dragging goes through the figure */
.lb__range { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.lb:not(.is-ready) .lb__range { display: none; }
.lb__tag { position: absolute; top: 14px; padding: 6px 11px; border-radius: 999px; background: rgb(255 255 255 / .92); box-shadow: 0 2px 8px rgb(0 36 80 / .14); font: 600 .8rem/1 "Poppins", sans-serif; color: var(--navy); pointer-events: none; }
.lb__tag--before { left: 14px; }
.lb__tag--after { right: 14px; }
/* Numbered like a drawing legend: the same number marks the part and its row in the list */
.lb__n { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--navy); font: 600 12px/1 "Poppins", sans-serif; color: #fff; box-shadow: 0 0 0 2px #fff, 0 3px 10px rgb(0 36 80 / .35); pointer-events: none; }

/* The legend: every part with what builds up on it and what the cleaning does */
.lb__list { display: grid; align-content: start; }
.lb__list li { padding: 14px 4px; border-bottom: 1px solid #d3e1ef; }
.lb__list li:first-child { border-top: 1px solid #d3e1ef; }
.lb__list h3 { display: flex; align-items: center; gap: 14px; font-family: "Poppins", sans-serif; font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--navy); }
.lb__dot { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--navy); font: 600 12px/1 "Poppins", sans-serif; }
.lb__list p { margin-top: 6px; padding-left: 38px; font-size: .95rem; line-height: 1.6; color: #5d6f84; }
@media (min-width: 901px) {
  .ig .lb { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); justify-content: stretch; align-items: start; }
}
@media (max-width: 900px) {
  .ig .lb .ax__media { max-width: none; }
}

/* How often: the two intervals over the same twelve months, each cleaning a filled month. Labels use the legend's type. */
.lf { --label: 18rem; }
.lf__months, .lf__row { display: grid; grid-template-columns: var(--label) repeat(12, minmax(0, 1fr)); column-gap: 8px; align-items: center; }
.lf__months { padding: 0 0 12px; font-family: "Poppins", sans-serif; font-size: .8rem; font-weight: 600; line-height: 1; text-align: center; color: #5d6f84; }
.lf__months span:first-child { text-align: left; }
.lf__row { padding: 20px 0; border-top: 1px solid #d3e1ef; }
.lf__row:last-child { border-bottom: 1px solid #d3e1ef; }
.lf__label { padding-right: 24px; }
.lf__label h3 { font-family: "Poppins", sans-serif; font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--navy); }
.lf__label p { margin-top: 6px; font-size: .95rem; line-height: 1.6; color: #5d6f84; }
.lf__track { display: contents; }
.lf__track li { position: relative; height: 44px; border-radius: 10px; background: #e9f0f7; }
.lf__track li.is-on { background: var(--navy); }
/* A check on each month with a cleaning */
.lf__track li.is-on::before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 13px; margin: -9px 0 0 -4px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@media (max-width: 900px) {
  .lf { --label: 13rem; }
}
/* Phones: the label above its row of months */
@media (max-width: 720px) {
  .lf__months, .lf__row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 4px; }
  .lf__months span:first-child { display: none; }
  .lf__label { grid-column: 1 / -1; padding: 0 0 14px; }
  .lf__track li { height: 34px; border-radius: 7px; }
  .lf__track li.is-on::before { width: 6px; height: 11px; margin: -8px 0 0 -3px; }
}
/* Wide screens: the legend texts a step smaller, as on the installation and maintenance legends */
@media (min-width: 1301px) {
  .lb__list p, .lf__label p { font-size: .93rem; line-height: 1.55; }
}

/* Generated from the render data (render3d/compose.py, gen_lb.py): markers and the stage framing */
.lb__fig { --sl: 0.0; --sw: 1.0; --st: -14.96%; }
@media (max-width: 600px) {
  .lb__fig { aspect-ratio: 1.6; --sl: -0.1215; --sw: 1.262; --st: -15.58%; }
}
.lb__n--1 { left: 36.26%; top: 37.75%; }
.lb__n--2 { left: 61.77%; top: 48.61%; }
.lb__n--3 { left: 22.7%; top: 54.16%; }
.lb__n--4 { left: 74.58%; top: 61.0%; }