/* Avakode Hub — scene «inclusive» (assets/js/scenes/inclusive.js): a checkout page, the checks, the «Developer tasks» list
   (lane 4.4). Loaded by inc/scenes.php on a family page whose stage is this scene. Classes: .if-* only; the common parts
   (.sc-head, .sc-sample, .sc-panel, .sc-stamp), the stage, the rail and the caption are scene.css.
   Colour: the product's own, from forge/products/registry.json (inclusiveforge): --if = accent_light (text, lines, 5.1:1 on
   --bg-2), --if-fill = accent (the fills; white text on it is 6.2:1). Until beat 2 the frame is the grey of the hub: the
   colour sits only on the three marked elements, their rows in the checks and the selectors of the tasks. */

/* The height of the stage before the module arrives = the height it takes (measured with ?static=1, the window resized; e2e:
   ≤ 4px apart at 1440, 768, 390 and at every 20px from 360 to 1500). --stage-h: the two-column stage (window ≥ 855px);
   the middle value: window 721–854px (the rail is on the left, the stage already one column); --stage-h-narrow: window ≤ 720px
   (rail on top, one column; 1267 at 360–400px, 1271 from 401px: one value between). If the family page changes its padding,
   or a row/panel changes, re-measure. */
.hub-scene[data-scene="inclusive"] { --if: #4F7DF0; --if-fill: #2456D6; --stage-h: 724px; --stage-h-narrow: 1269px; }
@media (min-width: 721px) and (max-width: 854px) {
  .hub-scene[data-scene="inclusive"] { --stage-h: 1154px; }
}

/* two columns: the page of the store 44 %, the checks and the tasks (a column) 56 % */
.if-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 24px; align-items: start; }
.if-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.if-page, .if-checks, .if-tasks { position: relative; padding: 12px 14px 14px; }
.if-page { min-width: 0; }

/* the path wraps by rule, not by the width: two lines (the first half of the routes, the rest), the viewports on a line of their
   own — the same lines at every width, so the stage has one height (see the heights above) */
.if-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0 0 12px; font-size: 11px; color: var(--muted); }
.if-path i { font-style: normal; color: var(--muted); }
/* a step and the «›» that leads to it are one unit: the line breaks between the units, so a «›» never hangs at the end of a line */
.if-step { display: inline-flex; flex: none; gap: 8px; white-space: nowrap; }
.if-br { flex-basis: 100%; height: 0; }
.if-route.is-now { color: var(--fg); }
.if-vp { flex-basis: 100%; margin-top: 2px; color: var(--muted); letter-spacing: .04em; }

/* the page of the store is a wireframe in the grey of the hub */
.if-site { padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.if-top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.if-logo {
  position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 28px;
  border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 10px;
}
.if-nav { display: flex; flex: 1; min-width: 0; gap: 12px; white-space: nowrap; color: var(--fg-2); font-size: 11px; }
.if-cart { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 28px; color: var(--fg-2); }
.if-cart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.if-h { margin: 14px 0 10px; font-size: 14px; font-weight: 500; color: var(--fg); }
.if-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.if-field { min-width: 0; }
.if-field.is-wide { grid-column: 1 / -1; }
.if-lab { display: block; margin-bottom: 4px; font-size: 10.5px; color: var(--fg-2); }
.if-input {
  position: relative; display: block; height: 28px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--bg-2); font-size: 11px; line-height: 16px; color: var(--muted);
}
.if-input.is-ph { font-style: italic; }
/* an order summary of grey bars: it only fills the page in the two-column layout (it is hidden in one column, where the stage is already tall) */
.if-sum { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.if-sum-h { margin-bottom: 8px; font-size: 10.5px; color: var(--fg-2); }
.if-sum-row { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 8px; }
.if-sum-row i { display: block; width: 46%; height: 6px; border-radius: 3px; background: var(--line); }
.if-sum-row i:last-child { width: 18%; }
.if-btn {
  margin-top: 12px; padding: 6px 0; border: 1px solid var(--line); border-radius: 999px; text-align: center;
  font-size: 11px; letter-spacing: .06em; color: var(--fg-2);
}

/* a marked element: a ring in the product colour and a numbered pin; the same number stands in the row of its check */
.if-ring {
  position: absolute; inset: -4px; border: 1.5px solid var(--if); border-radius: 5px; pointer-events: none;
  background: color-mix(in srgb, var(--if-fill) 20%, transparent);
}
.if-pin, .if-pinmark {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--if-fill); font-size: 10px; font-weight: 500; line-height: 1; color: #fff;
}
.if-pin { position: absolute; right: -9px; top: -9px; z-index: 1; }

.if-check {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; min-height: 28px;
  padding: 4px 0; border-top: 1px solid var(--line); font-size: 11.5px;
}
.if-mark { flex: none; display: block; width: 18px; height: 18px; }
.if-check code { flex: 1 1 auto; min-width: 0; font: inherit; color: var(--fg-2); overflow-wrap: anywhere; }
.if-res { flex: none; margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.if-check.is-hit code, .if-check.is-hit .if-res { color: var(--if); }

/* the stamp straddles the bottom edge, not the top one: the head of the panel is short here, but the last card ends close
   to the edge and the stamp must not cover the head of the first. The slot is a zero-size positioned box on the bottom
   right corner; .sc-stamp keeps its common place (top -14px, right 14px) relative to it. */
.if-tasks { padding-bottom: 26px; }
.if-stamp-slot { position: absolute; right: 0; bottom: 3px; width: 0; height: 0; white-space: nowrap; }
.if-task { padding: 8px 0; border-top: 1px solid var(--line); }
.if-task-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 12px; }
.if-task-h b { min-width: 0; font-weight: 500; color: var(--fg); overflow-wrap: anywhere; }
.if-sev { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .04em; color: var(--fg-2); }
.if-sev svg { width: 11px; height: 11px; fill: currentColor; }
.if-task-std { margin-top: 3px; font-size: 11px; color: var(--fg-2); }
/* the element above its counts at every width (side by side they would wrap by chance at 375px of the column) */
.if-task-el { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.if-task-el code { min-width: 0; font: inherit; color: var(--if); overflow-wrap: anywhere; }

/* the stage's own width (not the window's): one column — the page, the checks, the tasks */
@container (max-width: 820px) {
  .if-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .if-sum { display: none; }
}
/* a window ≤ 720px (the rail on top): the parts that would wrap by chance wrap by rule — the result under its rule
   and the severity under the heading (the path and the counts wrap by rule at every width, above) — so the stage has one height from 360 to 720px
   (the height reserved before the module arrives is one number, --stage-h-narrow) */
@media (max-width: 720px) {
  .if-check.is-long .if-res { flex-basis: 100%; margin-left: 0; padding-left: 28px; }
  .if-task-h { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .if-task-std { font-size: 10px; } /* 2.4.4 Link Purpose (In Context), EN 9.2.4.4 is 43 characters: one line down to 360px */
}