/* ============================================================================
   /what-is-inside in the sub page system (9 Oct 2026). No instrument: the page is built from
   the system's own parts (cards, runs, a comparison table) and these few page rules: the
   outcome cards' small print, the OR rule between the two halves of the fork, the runs of
   apps, the reader's arithmetic (sliders and two bars), and the included table's groups.
   Linked in PageStyles, after sub.css. Tokens only (no hex outside tos-site.css).
   ============================================================================ */

/* ---- 01 outcomes: the tool that does it is the small print under the outcome ---- */
.sp .card p.wii-tool { margin-top: 12px; font: 450 12px/1.5 var(--tos-font-mono); letter-spacing: 0; color: var(--lp-muted); }
@media (min-width: 1180px) {
  .sp .wii-outs { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
}

/* ---- 02 the fork: connectors, the OR rule, then the apps ---- */
.sp .wii-conn b, .sp .wii-apps b { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.sp .ch-b > .wii-or { margin-top: 64px; }
.sp .wii-or { display: flex; align-items: center; gap: 20px; font: 600 20px/1 var(--tos-font-body); letter-spacing: -.01em; color: var(--lp-ink); }
.sp .wii-or::before, .sp .wii-or::after { content: ""; flex: 1; height: 1px; background: var(--lp-ink); }
.sp .ch-b > .wii-half { margin-top: 40px; }
.sp .wii-half .body { margin-top: 22px; }
.sp .ch-b > .wii-half + .wii-apps { margin-top: 32px; }
/* thirty apps and the rest: two to a line on a phone, three from 600px, five from 981px, six from 1180px */
.sp .wii-apps li { flex-basis: 50%; }
.sp .wii-apps .is-more .rec { color: var(--lp-ink); font-weight: 600; }
.sp .wii-apps .is-more b { color: var(--lp-ink-2); font-weight: 500; }
/* a 320px phone: two connectors to a line; the apps size to their names (a long German or Portuguese name
   is wider than half of 320px, and a name must never break inside a word) */
@media (max-width: 359px) {
  .sp .wii-conn li { flex-basis: 50%; }
  .sp .wii-apps li { flex: 1 1 auto; }
  .sp .wii-apps b { font-size: 16px; }
}
@media (min-width: 600px) { .sp .wii-apps li { flex-basis: 33.33%; } }
@media (min-width: 981px) { .sp .wii-apps li { flex-basis: 20%; } }
@media (min-width: 1180px) {
  .sp .wii-apps li { flex-basis: 16.66%; }
  .sp .ch-b > .wii-or { margin-top: 88px; }
  .sp .ch-b > .wii-half { margin-top: 56px; max-width: 860px; }
  .sp .wii-half .body > .lead { max-width: 34em; }
}

/* ---- 03 your numbers: three sliders and two bars, in hairlines ---- */
.sp .wii-calc { display: grid; gap: 28px; border: 1px solid var(--lp-rule-2); background: var(--lp-paper); padding: 20px; }
.sp .wii-row + .wii-row { margin-top: 14px; }
.sp .wii-row label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 16px; line-height: 1.4; color: var(--lp-ink); }
.sp .wii-row label .rec { flex: none; font-size: 16px; font-weight: 600; color: var(--lp-ink); }
.sp .wii-row input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.sp .wii-row input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--lp-ink); }
.sp .wii-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -10px; border: 0; border-radius: 0; background: var(--lp-accent); }
.sp .wii-row input[type="range"]::-moz-range-track { height: 2px; background: var(--lp-ink); }
.sp .wii-row input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 0; background: var(--lp-accent); }
.sp .wii-row input[type="range"]:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 2px; }
.sp .wii-bars { border-top: 1px solid var(--lp-rule); padding-top: 22px; }
.sp .wii-bar + .wii-bar { margin-top: 20px; }
.sp .wii-blab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 16px; row-gap: 4px; }
.sp .wii-blab .rec { color: var(--lp-muted); }
.sp .wii-blab b { font: 600 clamp(26px, 7vw, 34px)/1.1 var(--tos-font-body); letter-spacing: -.03em; color: var(--lp-ink); }
.sp .wii-bar.is-hi .wii-blab b { font-size: 17px; line-height: 1.4; letter-spacing: -.01em; }
.sp .wii-track { height: 10px; margin-top: 10px; background: var(--lp-paper-2); }
.sp .wii-fill { display: block; width: 100%; height: 100%; background: var(--lp-ink); }
.sp .wii-bar.is-hi .wii-fill { width: 10px; background: var(--lp-accent); }
.sp .wii-bars .note { margin-top: 20px; }
@media (min-width: 760px) { .sp .wii-calc { padding: 28px; } }

/* ---- 04 included: the comparison table, grouped (one tbody per group) ---- */
.sp .wii-tbl caption { caption-side: top; text-align: start; padding-bottom: 12px; color: var(--lp-muted); }
.sp .wii-tbl caption::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; vertical-align: middle; background: var(--lp-accent); }
.sp .wii-tbl tr.wii-g th { text-align: start; font: 600 20px/1.25 var(--tos-font-body); letter-spacing: -.015em; color: var(--lp-ink); }
@media (max-width: 759px) {
  .sp .wii-tbl, .sp .wii-tbl tbody, .sp .wii-tbl caption { display: block; }
  .sp .wii-tbl tr.wii-g { border: 0; padding: 0; background: none; margin-top: 36px; }
  .sp .wii-tbl tbody:first-of-type tr.wii-g { margin-top: 4px; }
  .sp .wii-tbl tr.wii-g th { display: block; padding: 0 0 10px; border-bottom: 1px solid var(--lp-ink); }
  /* every row is included: on a card the mark would only repeat itself */
  .sp .wii-tbl td.is-us { display: none; }
}
@media (min-width: 760px) {
  .sp .wii-tbl thead th:first-child { width: 46%; }
  .sp .wii-tbl thead th.is-us { width: 10%; }
  .sp .wii-tbl thead th:last-child { width: auto; }
  .sp .wii-tbl tr.wii-g th { padding: 40px 0 10px; border-bottom: 1px solid var(--lp-ink); }
  .sp .wii-tbl tbody:first-of-type tr.wii-g th { padding-top: 16px; }
}
@media (min-width: 1180px) { .sp .wii-tbl tr.wii-g th { font-size: 22px; } }