/* ------------------------------------------------------------------------- *
 * Cyber Readiness Check, unit tabs: the six questions (V2 lines 650 to 863).
 * Loaded only on the page, after base.css, see vallem_crc_assets().
 *
 * Verbatim from the prototype, in this order:
 *   1. parts/tabs.css, the Osmo base, then its Vallem block;
 *   2. parts/fair.css, .stack only (tab 02);
 *   3. parts/lec.css (tab 01);
 *   4. parts/v2/v2.css, the tabs rule.
 * Not ported, dead in V2: .tab-image, .tab-description, .tab-description__spacer
 * and their .crc-tabs variants; fair.css .fm*; lec.css .lec__tick--end.
 * Editor-only rules last, under .editor-styles-wrapper.
 * ------------------------------------------------------------------------- */

/* parts/tabs.css */
/* Osmo Supply "Tab System with Autoplay Option", verbatim (parts/osmo/tab-system.css), then the
   Vallem deviations in one marked block at the end. */
.tab-layout__wrap {
  z-index: 1;
  grid-row-gap: 3em;
  flex-flow: wrap;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  position: relative;
}

.tab-layout__col {
  width: 50%;
  padding-left: .5em;
  padding-right: .5em;
}

.tab-content__inner {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 100%;
  padding-top: 1em;
  padding-bottom: 0;
  padding-right: 2.5em;
  display: flex;
}

.tab-content__top {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.tab-heading {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.5em;
  font-weight: 500;
  line-height: 1;
}

.tab-visual__wrap {
  aspect-ratio: 1.6;
  height: 50em;
  position: relative;
}

.tab-visual__item {
  visibility: hidden;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.tab-visual__item.active {
  visibility: visible;
}

.tab-visual__inner {
  border: 1px solid #0003;
  border-radius: .5em;
  width: 100%;
  height: 100%;
  padding: .5em;
  overflow: hidden;
}

.tab-content__wrap {
  width: 100%;
  max-width: 36em;
  height: 100%;
  margin-left: auto;
  margin-right: 0;
}

.tab-content__bottom {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 30em;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}

.tab-content__item {
  color: #131313;
  width: 100%;
  padding-top: 2em;
  padding-bottom: 2em;
  text-decoration: none;
  transition: opacity .25s;
  position: relative;
}

.tab-content__item-main {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.content-item__nr {
  color: #fff;
  background-color: #131313;
  border: 1px solid #131313;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  margin-top: .2em;
  font-family: RM Mono, Arial, sans-serif;
  font-size: .75em;
  font-weight: 400;
  transition: transform .4s cubic-bezier(.625, .05, 0, 1);
  display: flex;
}

.content-item__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2em;
  font-weight: 500;
  line-height: 1;
}

.tab-content__item-detail {
  width: 100%;
  height: 0;
  padding-left: 4em;
  overflow: hidden;
}

.tab-content__item-bottom {
  background-color: #0003;
  width: 100%;
  height: 1px;
  transition: background-color .2s;
  position: absolute;
  inset: auto 0% 0%;
}

.tab-progress {
  transform-origin: 0%;
  transform-style: preserve-3d;
  background-color: #ff4c24;
  width: 100%;
  height: 1px;
  transform: scale3d(0, 1, 1);
}

@media screen and (max-width: 991px) {
  .tab-layout__col {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .tab-content__inner {
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
  }

  .tab-content__top {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }

  .tab-visual__wrap {
    height: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .tab-visual__item {
    overflow: hidden;
  }

  .tab-content__wrap {
    max-width: none;
    margin-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .tab-layout__wrap {
    grid-row-gap: 2em;
  }

  .tab-heading {
    font-size: 2.8em;
  }

  .tab-visual__item {
    border-radius: .25em;
  }

  .tab-content__bottom {
    max-width: none;
  }

  .tab-content__item-main {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }

  .content-item__nr {
    margin-top: -.2em;
  }

  .content-item__heading {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 479px) {
  .tab-heading {
    font-size: 3em;
  }

  .tab-visual__inner {
    border-style: none;
    border-radius: .25em;
    padding: 0;
  }

  .tab-content__item {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .tab-content__item-main {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }

  .content-item__nr {
    flex: none;
  }

  .content-item__heading {
    font-size: 1.5em;
  }

  .tab-content__item-detail {
    padding-left: 3em;
  }
}

/* ==== Vallem deviations (listed in parts/osmo/tab-system.md) ============================== */
/* Section: white, as the original; page rhythm. The visual bleeds off the right edge as in
   the original, so the section clips it. clip, not hidden: a hidden box can still be scrolled
   sideways by focus or scrollIntoView, which would shift the whole section left. */
.crc-tabs { background: #fff; color: var(--ink); padding-block: clamp(4.5rem, 8vw, 7rem); overflow: hidden; overflow: clip; }
.crc-tabs .tab-layout__wrap { max-width: 1282px; margin-inline: auto; font-size: 16px; }
/* Type: page H2 setup; six items instead of three, so item titles one size down. */
.crc-tabs .tab-heading { color: var(--ink); font-size: clamp(2rem, 1.3rem + 1.6vw, 2.75rem); font-weight: 420; line-height: 1.06; letter-spacing: -.0223em; text-wrap: balance; }
.crc-tabs .tab-content__item { color: var(--ink); padding-top: 1.5em; padding-bottom: 1.5em; }
/* Inactive tabs dim their text, not the whole item, so every divider keeps one strength. */
.crc-tabs .tab-content__item:not(.active) .content-item__heading { color: #71717A; transition: color .25s; }
.crc-tabs .tab-content__item:hover .content-item__heading { color: var(--ink); }
.crc-tabs .tab-content__item-bottom { background-color: rgba(24, 24, 27, .1); }
.crc-tabs .tab-content__item:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.crc-tabs .content-item__heading { font-size: 1.375em; font-weight: 500; line-height: 1.2; letter-spacing: -.016em; }
/* Numbers in Inter with tabular figures. Grey badge at rest, Vallem blue when its tab is open. */
.crc-tabs .content-item__nr { color: var(--ink-muted); background-color: #EEF0F6; border-color: #EEF0F6; font-family: inherit; font-size: .8125em; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; flex: none; transition: background-color .25s, border-color .25s, color .25s, transform .4s cubic-bezier(.625, .05, 0, 1); }
.crc-tabs .tab-content__item.active .content-item__nr { color: #fff; background-color: var(--blue); border-color: var(--blue); }
.crc-tabs .tab-progress { background-color: var(--blue); }
.crc-tabs .tab-visual__wrap { height: 44em; }
/* Pause (WCAG 2.2.2; touch has no hover). Same mark as the reviews' pause. */
.crc-tabs .tab-pause { width: 2em; height: 2em; padding: 0; border: none; border-radius: 50%; background-color: #D4EAFF; cursor: pointer; display: grid; place-items: center; }
.crc-tabs .tab-pause::before { content: ""; width: .625em; height: .75em; background: linear-gradient(90deg, #183CDD 0 35%, transparent 35% 65%, #183CDD 65% 100%); }
.crc-tabs .tab-pause[aria-pressed="true"]::before { width: 0; height: 0; margin-left: .15em; background: none; border-left: .6em solid #183CDD; border-top: .375em solid transparent; border-bottom: .375em solid transparent; }
.crc-tabs .tab-pause:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media screen and (max-width: 991px) {
  .crc-tabs .tab-layout__wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
  .crc-tabs .tab-visual__wrap { height: auto; }
}
/* The side carries the content (Nol): the descriptions moved out of the tab list into the
   visual, as a title and one line above the image. The image slot stays for the report page.
   Dark panel (Nol): the brand's darkest navy, reads as black next to the white section. */
.crc-tabs .tab-visual__inner { display: flex; flex-direction: column; gap: 1.75em; padding: 2.5em; background-color: #040A17; border: 0; }
.crc-tabs .tab-visual__text { max-width: 30em; }
.crc-tabs .tab-visual__title { margin: 0; font-size: 1.75em; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.crc-tabs .tab-visual__lede { margin: .5em 0 0; font-size: 1.0625em; line-height: 1.55; color: #AEBBD8; }
.crc-tabs .tab-visual__media { flex: 1; min-height: 0; }
/* The media plate bleeds (Nol): out of the panel's padding to its bottom and right edge, so the
   image runs off the screen instead of sitting framed inside the panel. Margins match the padding. */
.crc-tabs .tab-visual__media { margin: 0 -2.5em -2.5em 0; }
@media screen and (max-width: 991px) {
  .crc-tabs .tab-visual__wrap { aspect-ratio: auto; height: 34em; }
}
@media screen and (max-width: 479px) {
  .crc-tabs .tab-visual__inner { padding: 1.5em; }
  .crc-tabs .tab-visual__media { margin: 0 -1.5em -1.5em 0; }
  /* Phone: the panel stacks title, lede and one column of ticks above the media, so it needs the
     height to leave the media a usable slot (tab 03 needs 37em for its list, tab 04 46em for totals and rows). */
  .crc-tabs .tab-visual__wrap { height: 46em; }
}

/* Panel component 1: what this deliverable gives you, as green ticks set inline. Same tick as
   the price card, so a tick means the same thing everywhere on the page. */
.crc-tabs .tab-visual__perks { list-style: none; margin: 1.5em 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75em 1.75em; }
@media screen and (max-width: 479px) { .crc-tabs .tab-visual__perks { grid-template-columns: minmax(0, 1fr); } }
.crc-tabs .tab-visual__perks li { display: inline-flex; align-items: center; gap: .625em; font-size: .9375em; font-weight: 500; line-height: 1.35; color: #fff; }
.crc-tabs .tab-visual__perks li::before { content: ""; flex: none; width: 1.25em; height: 1.25em; border-radius: 50%; background: #16A34A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.5 2.5 5-5.1' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.crc-tabs .tab-visual__text { max-width: 40em; }

/* Wider side: the list column gives up a little room to the panel (44 / 56 instead of 50 / 50). */
@media screen and (min-width: 992px) {
  .crc-tabs .tab-layout__col:first-child { width: 44%; }
  .crc-tabs .tab-layout__col:last-child { width: 56%; }
  /* The panel ends on the last divider (Nol): it takes the list column's height instead of a fixed
     44em, and the pause button sits below the list out of flow so it doesn't add to that height. */
  .crc-tabs .tab-visual__wrap { height: 100%; }
  .crc-tabs .tab-content__inner { position: relative; }
  .crc-tabs .tab-pause { position: absolute; top: calc(100% + 1.5em); left: 0; }
}

/* parts/fair.css, .stack only */
/* Tab 02 panel: the Securityprofiel itself. Three real pages from the Acme sample (cover, in één
   oogopslag, sector) laid flat and overlapping, each a step right and down. No rotation: Nol asked
   for flat, lapped, not fanned. The plate bleeds off the panel's bottom and right edge (tabs.css),
   so only its top-left corner is rounded.
   Cream plate (Nol), warmer than the palette's canvas #FDFBFA, which is too close to the white pages
   to separate them. The pages are sized off the plate's height (container units) so every page runs
   past the bottom edge at any panel height; the step right follows the page width, and the factor
   keeps the third page on screen at 1280. The first page starts close to the plate's left edge so
   the three spread out (Nol). */
.stack { position: relative; height: 100%; margin: 0; border-radius: 8px 0 0 0; overflow: hidden; container-type: size;
	--ph: calc(100cqh - 1.5em); --pw: calc(var(--ph) * 640 / 906);
	background: radial-gradient(70% 60% at 85% 0%, rgba(255, 255, 255, .55), transparent 70%), #F3EEE6; }
.stack img { position: absolute; width: auto; height: var(--ph); top: calc(2.5em + var(--i) * 2em); left: calc(1.25em + var(--i) * var(--pw) * .48); border-radius: 2px; box-shadow: 0 1px 2px rgba(24, 24, 27, .08), 0 24px 48px -24px rgba(24, 24, 27, .35); }
/* Below 1360 the visible part of the plate is narrower: a tighter step keeps the third page on screen. */
@media screen and (max-width: 1359px) { .stack img { left: calc(1.25em + var(--i) * var(--pw) * .42); } }
@media screen and (max-width: 767px) {
	.stack img { top: calc(1.5em + var(--i) * 1.25em); left: calc(1.25em + var(--i) * var(--pw) * .3); }
}

/* parts/lec.css */
/* Tab 01 panel: a FAIR loss exceedance curve that reads itself. One plain sentence is the reading
   ("In 1 van de 10 jaren kosten cyberincidenten u meer dan € 2,4 mln"), and each reading is drawn
   as a dot on the curve with its frequency next to it and its amount on the axis, so the sentence,
   the dot and the axis say the same thing. Natural frequencies with one denominator (x van de 10),
   no y axis. Fictional model: parts/tab1/build.py, the same one behind the hero card's ranges.
   The plate bleeds off the panel's bottom and right edge (tabs.css); the chart is sized in em and
   capped per breakpoint so it stays on screen while the plate runs past the viewport. */

.lec { position: relative; height: 100%; margin: 0; overflow: hidden; border-radius: 8px 0 0 0; color: #fff;
	/* Solid Vallem blue (Nol: the light gradient was "awful"; brand colour, no gradient). */
	background: #183CDD; }
/* About 100px from the ticks to the plate (Nol): the panel's 1.75em gap plus this. */
#crc-tab-1 .tab-visual__media { margin-top: 4.5em; }
@media screen and (max-width: 479px) { #crc-tab-1 .tab-visual__media { margin-top: 1em; } }
.lec__frame { height: 100%; max-width: 30em; display: flex; flex-direction: column; padding: 2em 1.5em 2.75em 2em; container-type: inline-size; }
@media screen and (min-width: 1100px) { .lec__frame { max-width: 34em; } }
@media screen and (min-width: 1280px) { .lec__frame { max-width: 40em; } }
@media screen and (min-width: 1360px) { .lec__frame { max-width: 43em; } }
@media screen and (min-width: 1440px) { .lec__frame { max-width: 45em; } }
@media screen and (max-width: 991px) { .lec__frame { max-width: none; padding-right: 2.5em; } }
@media screen and (max-width: 479px) { .lec__frame { padding: 1.25em 1.5em 2.5em 1.25em; } }

/* The reading: the numbers in white, the words around them in on-blue #D4EAFF (6.2:1 on #183CDD). */
.lec__say { margin: 0; max-width: 21em; color: #D4EAFF; font-size: 1.375em; font-weight: 400; line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; }
.lec__say b { color: #fff; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

.lec__plot { position: relative; flex: 1; min-height: 0; margin-top: 1.75em; }
.lec__plot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .55); }  /* 3.3:1 */
.lec__draw, .lec__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Flat fill under the curve, no gradient (Nol). Overrides the markup's fill attribute. */
.lec__draw path:not(.lec__line) { fill: rgba(255, 255, 255, .1); }
.lec__line { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }

/* A reading: dot on the curve, frequency beside it, a drop line to its amount on the axis. */
.lec__stop { position: absolute; inset: 0; pointer-events: none; }
.lec__dot, .lec__marker { position: absolute; left: var(--x); top: var(--y); width: .5em; height: .5em; margin: -.25em 0 0 -.25em; border-radius: 50%; background: #fff; }
.lec__drop, .lec__mdrop { position: absolute; left: var(--x); top: var(--y); bottom: 0; border-left: 1.5px dashed rgba(255, 255, 255, .6); }
.lec__n { position: absolute; left: var(--x); top: var(--y); transform: translate(.625em, -140%); white-space: nowrap; font-size: .875em; font-weight: 600; font-variant-numeric: tabular-nums; }
.lec__amt, .lec__tick { position: absolute; top: calc(100% + .75em); white-space: nowrap; font-size: .75em; font-weight: 500; font-variant-numeric: tabular-nums; }
.lec__amt { left: var(--x); transform: translateX(-50%); }
.lec__tick { left: 0; color: #D4EAFF; }
/* € 10 mln at its true place on the axis (Nol set 1 van de 10 at € 8,3 mln: the build.py curve
   with every loss scaled by 8,3 / 2,43, so the axis runs to about € 13,7 mln and the path is unchanged). */
.lec__tick--mid { transform: translateX(-50%); }
/* The headline reading, and the marker that travels to it. */
.lec__stop--key .lec__dot, .lec__marker { width: .875em; height: .875em; margin: -.4375em 0 0 -.4375em; box-shadow: 0 0 0 .375em rgba(255, 255, 255, .25); }
.lec__stop--key .lec__drop, .lec__mdrop { border-left-color: rgba(255, 255, 255, .85); }
.lec__stop--key .lec__n { font-size: 1.125em; font-weight: 650; transform: translate(.75em, -135%); }
.lec__stop--key .lec__amt { top: calc(100% + .45em); padding: .25em .625em; border-radius: 999px; background: #fff; color: #183CDD; font-weight: 650; }

/* Narrow: the dots stay, the in-between labels go; the sentence still names each one as it passes. */
@container (max-width: 31em) { .lec__tick:not(.lec__tick--end):not(.lec__tick--mid) { display: none; } }
@container (max-width: 26em) {
	.lec__stop:not(.lec__stop--key) .lec__n, .lec__stop:not(.lec__stop--key) .lec__amt { display: none; }
	.lec__say { font-size: 1.125em; }
	.lec__stop--key .lec__n { font-size: 1em; }
}

/* Motion (lec.js). Without it, or under reduced motion, the markup above is the finished state. */
.lec__marker, .lec__mdrop { display: none; }
.lec.is-playing .lec__marker, .lec.is-playing .lec__mdrop { display: block; left: var(--mx); top: var(--my); }
.lec.is-playing .lec__stop > * { opacity: 0; }
.lec.is-playing .lec__stop.is-on > * { opacity: 1; transition: opacity .35s ease; }
.lec.is-playing .lec__stop.is-on .lec__dot { animation: lec-pop .35s cubic-bezier(.2, .8, .2, 1); }
.lec.is-playing .lec__say { opacity: 0; }
.lec.is-playing .lec__say.is-on { opacity: 1; }
.lec.is-done .lec__stop--key .lec__dot { animation: lec-ring .7s ease-out; }
@keyframes lec-pop { from { transform: scale(0); } }
@keyframes lec-ring { 50% { box-shadow: 0 0 0 .75em rgba(255, 255, 255, .12); } }

/* parts/v2/v2.css */
/* Tabs on phones: the panel lands under the sticky header when a tap scrolls it up. */
@media screen and (max-width:991px){.crc-tabs .tab-visual__wrap{scroll-margin-top:108px}}

/* Editor only. The panels stack, all six visible, so each one can be edited;
   on the front end tabs.js shows one at a time. The figures sit one wrapper
   deeper in the editor (core/html's edit div), which takes the media slot's height. */
.editor-styles-wrapper .crc-tabs .tab-visual__wrap{height:auto; aspect-ratio:auto; display:flex; flex-direction:column; gap:1.5em}
.editor-styles-wrapper .crc-tabs .tab-visual__item{position:relative; visibility:visible; height:44em}
.editor-styles-wrapper .crc-tabs .tab-visual__media > .block-library-html__edit{height:100%; margin:0}
/* The pause button's html block is a flex item in the editor; keep the list under the heading. */
.editor-styles-wrapper .crc-tabs .tab-content__inner{justify-content:flex-start}
@media screen and (max-width:479px){.editor-styles-wrapper .crc-tabs .tab-visual__item{height:46em}}