/* ==========================================================================
   vsl kit: vslsafety.com's lessons in Al Safwan Academy. The exercises
   (exercises.js: timeline, explorer, defects, sort, decide), the calculators
   (calculators.js), source references and the lesson sections. From
   vslsafety.com's academy.css, on Al Safwan's tokens (01-tokens.css): ink on
   paper, hairlines, one surface (--field). Orange only for the one thing that
   matters: the part picked on a drawing and a calculator's answer. Right and
   wrong are told by weight, a mark and words; --danger only marks a wrong pick.
   Loaded on vsl lesson pages only.
   ========================================================================== */

/* Source references [n] and their anchors in the source list */
sup.ref { font-size: 0.68em; line-height: 0; margin-inline-start: 1px; font-variant-numeric: tabular-nums; }
sup.ref a { color: var(--grey-text); text-decoration: none; padding: 0 1px; }
sup.ref a:hover { color: var(--ink); text-decoration: underline; }
.lesson-sources__list:has(.ax-src) { list-style: none; padding-inline-start: 0; gap: 0; border-top: 1px solid var(--rule); }
.lesson-sources__list:has(.ax-src) > li { position: relative; padding: var(--s-3) 0 var(--s-3) 2.5rem; border-bottom: 1px solid var(--rule); }
.lesson-sources__list .ax-src { position: absolute; inset-inline-start: 0; inset-block-start: var(--s-3); display: inline; color: var(--grey-text); font-variant-numeric: tabular-nums; scroll-margin-top: calc(var(--header-h) + var(--s-6)); }
.lesson-sources__list li:has(> .ax-src:target) { background: var(--field); }

/* Lesson sections */
.vsl-lesson { display: grid; gap: var(--s-7); min-width: 0; }
.vsl-lesson > * { min-width: 0; }
.vsl-lead { font-size: var(--t-m); line-height: 1.45; }
.vsl-prose .table-wrap { overflow-x: auto; }
.vsl-what-the-rules-say ul > li { margin-block-end: 0.6em; }
.vsl-what-inspectors-find ul > li { margin-block-end: 0.5em; }
.vsl-try__title { font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); line-height: 1.3; max-width: 34em; }
.vsl-toc__list { border-top: 1px solid var(--rule); max-width: 40em; }
.vsl-toc__list li { padding-block: 8px; border-bottom: 1px solid var(--rule); color: var(--grey-text); }

/* Exercises: shared pieces */
.vsl-ex .ax-hint, .vsl-ex .ax-note { font-size: var(--t-s); color: var(--grey-text); }
.vsl-ex > .ax-hint:first-child, .vsl-ex .ax-ex__intro { margin-block-end: var(--s-5); }
.vsl-ex .ax-ex__intro { max-width: 38em; }
.vsl-ex .btn-row { margin-block-start: var(--s-5); }
.vsl-ex .ax-ex__result { margin-block-start: var(--s-4); }
.vsl-ex .ax-result__score { font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
.vsl-ex .ax-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vsl-ex .ax-chip { min-height: 40px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: var(--t-s); line-height: 1.3; text-align: start; transition: border-color 160ms var(--ease); }
.vsl-ex .ax-chip:hover:not(:disabled) { border-color: var(--ink); }
.vsl-ex .ax-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.vsl-ex .ax-chip:disabled { cursor: default; }
.vsl-ex .ax-chip:focus-visible, .vsl-ex button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.vsl-ex strong { font-weight: 500; }

/* timeline: who does what, and how often */
.ax-ex--timeline .ax-chips { margin-block-end: var(--s-5); }
.vsl-ex .ax-tl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.vsl-ex .ax-tl__row { display: grid; grid-template-columns: minmax(7rem, 2fr) minmax(0, 6fr); gap: var(--col-gap); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); transition: opacity 200ms var(--ease); }
.vsl-ex .ax-tl__row.is-dim { opacity: 0.28; }
.vsl-ex .ax-tl__when { font-weight: 500; font-variant-numeric: tabular-nums; }
.vsl-ex .ax-tl__who { margin-block-start: 4px; font-size: var(--t-s); color: var(--grey-text); }
@media (max-width: 47.99rem) { .vsl-ex .ax-tl__row { grid-template-columns: 1fr; row-gap: 4px; } }

/* explorer: click the parts of a drawing */
.vsl-ex .ax-explorer { display: grid; gap: var(--s-6); }
.vsl-ex .ax-explorer__side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.vsl-ex .ax-explorer__side > .ax-hint { grid-column: 1 / -1; }
.vsl-ex .ax-explorer__stage { position: relative; width: 100%; color: var(--ink); background: var(--field); border-radius: var(--radius); }
.vsl-ex .ax-explorer__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; --paper: #ffffff; }
.vsl-ex .ax-hot { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.vsl-ex .ax-hot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.vsl-ex .ax-explorer__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.vsl-ex .ax-explorer__item { display: flex; gap: 10px; align-items: baseline; width: 100%; min-height: 40px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--grey-text); text-align: start; }
.vsl-ex .ax-explorer__item.is-seen { color: var(--ink); }
.vsl-ex .ax-explorer__item[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
.vsl-ex .ax-explorer__n { min-width: 1.5em; font-variant-numeric: tabular-nums; color: var(--grey-text); font-weight: 400; }
.vsl-ex .ax-explorer__info { min-height: 6em; padding-block-start: var(--s-3); border-top: 1px solid var(--ink); }
.vsl-ex .ax-explorer__title { font-weight: 500; margin-block-end: 6px; }
.vsl-ex .ax-explorer__side .ax-hint { margin-block-start: var(--s-3); }
@media (max-width: 47.99rem) {
  .vsl-ex .ax-explorer__side { grid-template-columns: 1fr; }
  .vsl-ex .ax-explorer__info { order: -1; }
  .vsl-ex .ax-hot { width: 24px; height: 24px; font-size: 11px; }
}

/* defects: spot the deficiencies */
.vsl-ex .ax-defects, .vsl-ex .ax-sort { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.vsl-ex .ax-defects__item { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
.vsl-ex .ax-defects__label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.vsl-ex .ax-defects__label input { flex: none; appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 3px 0 0; border: 1px solid var(--grey); border-radius: 3px; background: var(--paper); }
.vsl-ex .ax-defects__label input:checked { background: var(--ink); border-color: var(--ink); }
.vsl-ex .ax-defects__label input:checked::after { content: ""; width: 8px; height: 4px; border: solid var(--paper); border-width: 0 0 1.5px 1.5px; transform: translateY(-1px) rotate(-45deg); }
.vsl-ex .ax-defects__label input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.vsl-ex .ax-defects__why, .vsl-ex .ax-sort__why { margin: var(--s-2) 0 0 30px; font-size: var(--t-s); color: var(--grey-text); max-width: 40em; }
.vsl-ex .ax-defects__why strong, .vsl-ex .ax-sort__why strong { color: var(--ink); }
.vsl-ex .ax-defects__item.is-wrong .ax-defects__label span::after, .vsl-ex .ax-sort__item.is-wrong .ax-sort__text::after { content: "  ✕ check this"; color: var(--danger); font-size: var(--t-s); white-space: nowrap; }
.vsl-ex .ax-defects__item.is-right .ax-defects__label span::after, .vsl-ex .ax-sort__item.is-right .ax-sort__text::after { content: "  ✓"; color: var(--ink); }

/* sort: put each item in the right group */
.vsl-ex .ax-sort__item { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.vsl-ex .ax-sort__text { margin-block-end: var(--s-3); }
.vsl-ex .ax-sort__why { margin-inline-start: 0; }

/* decide: a scenario with choices */
.vsl-ex .ax-decide { display: grid; gap: var(--s-6); }
.vsl-ex .ax-decide__step { padding-block-start: var(--s-4); border-top: 1px solid var(--ink); }
.vsl-ex .ax-decide__n { font-size: var(--t-s); color: var(--grey-text); }
.vsl-ex .ax-decide__situation { margin-block: var(--s-2) var(--s-4); font-size: var(--t-m); line-height: 1.4; max-width: 34em; }
.vsl-ex .ax-decide__options { display: grid; gap: 8px; max-width: 40em; }
.vsl-ex .ax-decide__opt { padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); text-align: start; line-height: 1.35; transition: border-color 160ms var(--ease); }
.vsl-ex .ax-decide__opt:hover:not(:disabled) { border-color: var(--ink); }
.vsl-ex .ax-decide__opt:disabled { cursor: default; color: var(--grey-text); }
.vsl-ex .ax-decide__opt.is-right, .vsl-ex .ax-decide__opt.is-answer { border-color: var(--ink); color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.vsl-ex .ax-decide__opt.is-wrong { border-color: var(--danger); color: var(--ink); }
.vsl-ex .ax-decide__why { margin-block-start: var(--s-4); max-width: 40em; color: var(--grey-text); }
.vsl-ex .ax-decide__why p { margin-block-end: var(--s-3); }
.vsl-ex .ax-decide__why strong { color: var(--ink); }

/* calculators */
.vsl-ex .ax-calc { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--s-5) var(--s-6); align-items: end; max-width: 48rem; }
.vsl-ex .ax-calc--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
@media (max-width: 47.99rem) { .vsl-ex .ax-calc--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vsl-ex .ax-calc .field { margin: 0; }
.vsl-ex .ax-calc__out { grid-column: 1 / -1; padding-block-start: var(--s-4); border-top: 1px solid var(--ink); display: grid; gap: var(--s-2); }
.vsl-ex .ax-calc__big { font-size: var(--t-xl); line-height: 1.1; font-weight: 500; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.vsl-ex .ax-calc__out .ax-tl { margin-block-start: var(--s-2); }
.vsl-ex .ax-curve { width: 100%; height: auto; margin-block-start: var(--s-4); }

@media print { .vsl-ex { display: none; } }