/* =========================================================================
   PostureCo Cloud · "Digitize right in the cloud. No iPad needed." (#cl-web; tools/pages/parts/cloud-web.mjs)
   Joe, Oct 10 2026 (WEB-161): start new exams and do the assessments that don't need the iPad's sensors right in the
   browser; "the bigger screen makes a difference too". A static blue iMac (Apple's bezel, devices-apple.css) plays his
   recordings; the steps beside it follow the video (cloud-web.js). Reads top to bottom at every size (no pinning).
   Step lists never move (Joe's "no jumping step lists" rule): every description stays laid out, the inactive ones are
   only dimmed, and the three tab lists share one grid cell so the column always reserves the tallest.
   Tokens from cloud.css (.cl-page) and pages.css.
   ========================================================================= */
.cl-web { position: relative; padding-top: var(--pad); padding-bottom: clamp(56px, 6vw, 96px); overflow: clip;
  /* Joe's Oct 12 Loom: between #cl-flow and #cl-big now, so white at both edges (the same edges #cl-day had there: the sky's
     white waves meet white above, Big screen's mist starts below), the iMac still on mist in the middle */
  background:
    radial-gradient(45% 35% at 85% 38%, rgba(38, 188, 215, .10), transparent 70%),
    linear-gradient(180deg, #fff 0%, #f3f8fb 14%, #edf4f8 50%, #f3f8fb 86%, #fff 100%); }
html.pbg main .cl-web { background: radial-gradient(45% 35% at 85% 38%, rgba(38, 188, 215, .10), transparent 70%); }
.cl-web__head { text-align: center; display: grid; justify-items: center; }
.cl-web__head .cl-h2 > span { display: block; }
.cl-web__head .lede { margin-top: 16px; max-width: 62ch; }

/* ---------- segmented tabs ---------- */
.cw-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; width: max-content; max-width: 100%; margin: clamp(26px, 3vw, 40px) auto 0;
  padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(11, 26, 46, .08), 0 14px 30px -24px rgba(11, 40, 80, .5); }
.cw-tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px 0 14px; border-radius: 999px; font-size: 15px; font-weight: 650; letter-spacing: -.005em; color: var(--ink-2); white-space: nowrap; transition: background .35s var(--cl-ease), color .35s, box-shadow .35s; }
.cw-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.cw-tab.is-active { color: #fff; background: linear-gradient(160deg, #1aa6d6, var(--blue) 58%, #005f88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 24px -12px rgba(0, 106, 153, .85); }
.cw-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- stage: the iMac + the steps ---------- */
/* the stage breaks out of the 1200 px wrap so the iMac reads as the bigger screen (Joe: "the bigger screen makes a difference") */
.cw-stage { --sw: min(1320px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: clamp(24px, 2.6vw, 44px); align-items: start; width: var(--sw); margin: clamp(26px, 3.4vw, 46px) auto 0; }
@media (min-width: 1300px) { .cl-web .wrap > .cw-stage { --sw: min(1320px, 100vw - 96px); margin-inline: calc((100% - var(--sw)) / 2); } }
.cw-stage__dev { position: relative; min-width: 0; }
.cw-imac { --abz-screen-bg: #0b1622; }
/* devices-apple.css grows the screen 35 art px past Apple's display hole on every side (no gaps at any width); these
   videos are exactly the 16:9 display, so they sit in the hole itself and nothing (menu bar, traffic lights) is cropped */
.cw-imac .abz__screen > video, .cw-imac .abz__screen > img { inset: auto; top: 1.3514%; left: .7692%; width: 98.4616%; height: 97.2972%; object-position: top center; }

/* pause / play: on the screen's bottom-right corner (the hole's bottom is 33.65 % above the device bottom, its right edge
   2.52 % in from the device's right), Apple-style dark glass; 44 px hit area on touch */
.cw-play { position: absolute; z-index: 3; bottom: calc(33.65% + 12px); right: calc(2.52% + 12px); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: #fff; background: rgba(11, 22, 34, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 20px -10px rgba(0, 0, 0, .6); transition: background .25s, transform .25s var(--cl-ease); }
.cw-play::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.cw-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--blue); }
.cw-play svg { width: 15px; height: 15px; }
.cw-play__pause { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cw-play__play { fill: currentColor; display: none; }
.cw-play[aria-pressed="true"] .cw-play__pause { display: none; }
.cw-play[aria-pressed="true"] .cw-play__play { display: block; }
.cw-play[hidden] { display: none; }
.cw-play--sm { bottom: 10px; right: 10px; width: 32px; height: 32px; }
.cw-play--sm::before { inset: -6px; }
.cw-play--sm svg { width: 13px; height: 13px; }

.cw-stage__steps { display: grid; min-width: 0; }
.cw-steps { grid-area: 1 / 1; display: grid; align-content: start; gap: 6px; margin: 0; padding: 0; list-style: none; transition: opacity .3s var(--cl-ease); }
.cw-steps.is-off { visibility: hidden; opacity: 0; pointer-events: none; }
.cw-step button { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; width: 100%; padding: 13px 16px 17px 12px; border-radius: 18px; text-align: left; color: var(--ink-3); transition: background .35s var(--cl-ease), box-shadow .35s; }
.cw-step button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cw-step__n { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--blue-t); background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .28); transition: background .35s, color .35s, box-shadow .35s; }
.cw-step__t { display: grid; gap: 3px; }
.cw-step__t b { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.3; letter-spacing: -.012em; font-weight: 700; color: var(--cl-ink); }
.cw-step__t span { font-size: 14.5px; line-height: 1.48; color: var(--ink-3); transition: opacity .35s var(--cl-ease); }
.cw-step:not(.is-active) .cw-step__t span { opacity: .62; }
.cw-step__bar { position: absolute; left: 54px; right: 18px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(11, 26, 46, .07); overflow: hidden; opacity: 0; transition: opacity .3s; }
.cw-step__bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #1aa6d6, var(--blue)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.cw-step.is-active button { background: #fff; box-shadow: 0 18px 36px -26px rgba(11, 40, 80, .55), inset 0 0 0 1px rgba(11, 26, 46, .05); }
.cw-step.is-active .cw-step__n { color: #fff; background: var(--blue); box-shadow: none; }
.cw-step.is-active .cw-step__bar { opacity: 1; }
@media (hover: hover) {
  .cw-tab:hover { color: var(--blue-t); }
  .cw-tab.is-active:hover { color: #fff; }
  .cw-step:not(.is-active) button:hover { background: rgba(255, 255, 255, .55); }
  .cw-play:hover { background: rgba(11, 22, 34, .72); transform: scale(1.06); }
}

.cw-steps--one { align-content: start; gap: 10px; padding: 8px 6px; }
.cw-one__b b { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -.02em; font-weight: 800; color: var(--cl-ink); }
.cw-steps--one > p:not(.cw-one__b):not(.cw-one__ex) { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cw-only { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: #fff; background: linear-gradient(160deg, #1aa6d6, var(--blue) 58%, #005f88); box-shadow: 0 10px 22px -14px rgba(0, 106, 153, .9); }
.cw-only svg { width: 13px; height: 13px; fill: currentColor; }

/* desktop: the steps centre on the SCREEN, not on the whole iMac with its stand (row 1 = top bezel + display, 69.3 %) */
@media (min-width: 900px) {
  .cw-stage__steps { align-self: stretch; grid-template-rows: 69.3% 1fr; }
  .cw-stage__steps > * { grid-row: 1; align-self: safe center; }
}

/* ---------- what works in the browser ---------- */
.cw-can { width: min(1200px, 100%); margin: clamp(48px, 6vw, 84px) auto 0; }
.cw-can__h, .cw-tiles__h { text-align: center; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; color: var(--cl-ink); text-wrap: balance; }
.cw-can__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: clamp(20px, 2.4vw, 30px) 0 0; padding: 0; list-style: none; }
.cw-can__it { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(11, 26, 46, .06); }
.cw-can__it b { display: block; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--cl-ink); letter-spacing: -.01em; }
.cw-can__it b + span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.cw-can__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--blue); background: linear-gradient(160deg, #e6f5fb, #d3ecf7); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .14); }
.cw-can__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.cw-can__rom { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 62ch; margin: 18px auto 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); text-align: left; }
.cw-can__half { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--blue); background: linear-gradient(90deg, var(--blue) 50%, transparent 50%); }

/* ---------- close-up tiles ---------- */
.cw-tiles-wrap { width: min(1200px, 100%); margin: clamp(48px, 6vw, 84px) auto 0; }
.cw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: clamp(20px, 2.4vw, 30px) 0 0; padding: 0; list-style: none; }
.cw-tile { display: grid; align-content: start; gap: 8px; }
.cw-tile__vis { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: #0b1622; box-shadow: 0 30px 50px -36px rgba(11, 40, 80, .7), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.cw-tile__vis video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-tile__h { margin-top: 10px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.3; letter-spacing: -.012em; font-weight: 700; color: var(--cl-ink); }
.cw-tile p { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }

/* ---------- narrow screens ---------- */
@media (max-width: 899px) {
  .cw-stage { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cw-stage__steps { width: min(100%, 600px); margin-inline: auto; }
  .cw-can__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .cw-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .cw-tile p { font-size: 13.5px; }
}
@media (max-width: 599px) {
  .cw-tabs { width: 100%; }
  .cw-tab { flex: 1 1 auto; justify-content: center; padding: 0 12px; font-size: 14px; }
  .cw-tab svg { display: none; }
  .cw-play { width: 34px; height: 34px; bottom: calc(33.65% + 8px); right: calc(2.52% + 8px); }
  .cw-play::before { inset: -5px; }
  .cw-can__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cw-can__it { padding: 14px 16px; }
  .cw-can__rom { align-items: flex-start; }
  .cw-step button { padding: 12px 12px 16px 10px; }
  /* the tiles become a swipeable row (they were three full-width cards stacked) */
  .cw-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter, 16px)); padding: 0 var(--gutter, 16px) 6px; scrollbar-width: none; }
  .cw-tiles::-webkit-scrollbar { display: none; }
  .cw-tile { scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-step button, .cw-tab, .cw-play, .cw-step__n, .cw-steps, .cw-step__t span { transition: none; }
}