/* Crux V5 - Platform page components (Phase B.1)
 * Builds on the A.9 home.css system (body.home). Adds only the platform-specific
 * compositions: positioning ("where Crux sits"), the connected-workflow stepper,
 * the capability register, product proof, outcomes, and platform-to-capability nav.
 * Approved brand only. IBM Plex Mono is reserved for data (statuses, codes, figures).
 */

/* ======================================================================
 * Section 2 - Where Crux sits (Field -> Crux -> QuickBooks)
 * ==================================================================== */
.home .sits { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 62rem) { .home .sits { grid-template-columns: 1fr auto 1.25fr auto 1fr; align-items: center; } }
.home .sits__node { background: var(--card); border: 1px solid var(--rule-strong); border-radius: 12px; padding: clamp(1.25rem, 3vw, 1.9rem); height: 100%; }
.home .sits__node--field { background: var(--paper-2); }
.home .sits__node--crux { background: #fffdf2; border-color: rgba(52, 70, 157, 0.34); box-shadow: 0 20px 48px rgba(20, 26, 60, 0.12); }
.home .sits__cap { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.home .sits__name { font-family: var(--font-body); font-weight: 700; color: var(--ink); font-size: 1.35rem; margin-top: 0.45rem; letter-spacing: -0.01em; }
.home .sits__node--crux .sits__name { color: var(--navy); }
.home .sits__list { margin-top: 0.9rem; display: grid; gap: 0.5rem; font-size: 0.95rem; color: var(--ink-body); }
.home .sits__list li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem; }
.home .sits__list li::before { content: ""; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 1px; background: var(--blue); }
.home .sits__node--qb .sits__list li::before { background: #2CA01C; }
.home .sits__arrow { justify-self: center; align-self: center; color: var(--blue); font-size: 1.6rem; line-height: 1; }
@media (max-width: 61.99rem) { .home .sits__arrow { transform: rotate(90deg); } }
.home .sits__note { margin-top: 1.25rem; font-size: 0.72rem; line-height: 1.5; color: var(--ink-muted); max-width: 64ch; }

/* ======================================================================
 * Section 3 - Connected workflow (stepper)
 * Progressive enhancement: without JS all stage panels show in order and the rail
 * is hidden; with JS the rail selects one stage panel at a time.
 * ==================================================================== */
.home .wf { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 62rem) { .home .wf { grid-template-columns: 17rem 1fr; align-items: start; } }
.home .wf__rail { display: none; }
.home .wf[data-enhanced] .wf__rail { display: flex; flex-direction: column; gap: 0.35rem; }
@media (max-width: 61.99rem) { .home .wf[data-enhanced] .wf__rail { flex-direction: row; flex-wrap: wrap; } }
.home .wf__step {
  display: flex; align-items: center; gap: 0.7rem; text-align: left;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--ink-muted);
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  padding: 0.7rem 0.85rem; cursor: pointer; width: 100%;
}
.home .wf__step:hover { color: var(--ink); background: var(--paper-2); }
.home .wf__step[aria-selected="true"] { color: var(--ink); background: var(--card); border-color: var(--rule-strong); box-shadow: 0 8px 22px rgba(20, 26, 60, 0.08); }
.home .wf__no { font-family: var(--font-mono); font-size: 0.75rem; color: var(--blue); }
.home .wf__step[aria-selected="true"] .wf__no { color: var(--navy); }
.home .wf__panel { border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--card); padding: clamp(1.4rem, 3vw, 2.2rem); }
.home .wf[data-enhanced] .wf__panel[hidden] { display: none; }
.home .wf__panel + .wf__panel { margin-top: 1rem; }
.home .wf[data-enhanced] .wf__panel + .wf__panel { margin-top: 0; }
.home .wf__stage { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.home .wf__h { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.75rem); color: var(--ink); margin-top: 0.35rem; }
.home .wf__detail { margin-top: 1.25rem; display: grid; gap: 1rem 2rem; }
@media (min-width: 40rem) { .home .wf__detail { grid-template-columns: 1fr 1fr; } }
.home .wf__detail dt { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.home .wf__detail dd { margin-top: 0.25rem; color: var(--ink-body); font-size: 0.98rem; line-height: 1.5; }
.home .wf__chip { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: 0.72rem; color: var(--navy); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 2px 9px; margin-top: 1.25rem; }
.home .wf__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }

/* Controlled progression: progress bar + Previous/Next (injected by workflow.js) */
.home .wf__progress { height: 3px; background: var(--rule); border-radius: 999px; margin-bottom: 1.25rem; overflow: hidden; }
.home .wf__progress-fill { display: block; height: 100%; width: 0; background: var(--yellow); transition: width var(--motion-slow) var(--ease-emphasized); }
.home .wf__nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.home .wf__count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); letter-spacing: 0.06em; }
.home .wf__nav .wf__next { margin-left: auto; }
.home .wf__nav .btn { padding-inline: 1.1rem; }
.home .wf__nav .btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 33rem) {
  .home .wf__nav { flex-wrap: wrap; }
  .home .wf__nav .wf__next { margin-left: 0; }
  .home .wf__nav .btn { flex: 1 1 auto; }
  .home .wf__count { order: -1; width: 100%; text-align: center; }
}

/* Segmented selector styles (.segbar/.segbtn) now live in home.css (loaded on
 * every body.home page) so the homepage can reuse them too. */

/* Budget before / after toggle (uses .ba cards from home.css) */
.home .baswap { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .home [data-selector]:not([data-enhanced]) .baswap { grid-template-columns: 1fr 1fr; } }
.home [data-selector][data-enhanced] .baswap [data-select-panel][hidden] { display: none; }
.home .baswap .ba { max-width: 34rem; }
/* .ba, .ba__row, .ba__k, .ba__val, .ba__tag, .ba--after come from home.css */
.home .ba-cap { margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted); line-height: 1.5; }

/* Job-cost "levels of visibility" emphasis (all levels stay visible) */
.home .hierbar { margin-bottom: 1.5rem; }
.home .hier .hlev { transition: opacity var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard); }
.home [data-selector="emphasize"][data-enhanced] .hier .hlev { opacity: 0.55; }
.home [data-selector="emphasize"][data-enhanced] .hier .hlev.is-active { opacity: 1; }
.home .hier .hlev.is-active { background: #fffdf2; border-radius: 0 8px 8px 0; box-shadow: inset 3px 0 0 var(--yellow); }
@media (prefers-reduced-motion: reduce) { .home .hier .hlev { transition: none; } }

/* ======================================================================
 * Section 4 - Capability register (connected, not equal cards)
 * ==================================================================== */
.home .capsys { border-top: 2px solid var(--navy); }
.home .capitem { display: grid; gap: 0.5rem 1.5rem; padding: clamp(1.25rem, 3vw, 1.8rem) 0; border-bottom: 1px solid var(--rule); align-items: start; }
@media (min-width: 60rem) { .home .capitem { grid-template-columns: 15rem 1fr 12rem; align-items: center; } }
.home .capitem__head { }
.home .capitem__name { font-family: var(--font-body); font-weight: 700; color: var(--ink); font-size: 1.15rem; }
.home .capitem__role { display: inline-block; margin-top: 0.4rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); }
.home .capitem__body { color: var(--ink-body); font-size: 0.98rem; line-height: 1.55; }
.home .capitem__out { display: block; margin-top: 0.5rem; color: var(--ink); font-weight: 500; }
.home .capitem__link { justify-self: start; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 1px; }
@media (min-width: 60rem) { .home .capitem__link { justify-self: end; } }
.home .capitem__link:hover { color: var(--blue); }

/* ======================================================================
 * Section 6 - Product proof (large, legible screenshots)
 * ==================================================================== */
.home .proofgrid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 56rem) { .home .proofgrid { grid-template-columns: 1fr 1fr; } }
.home .prooffig { margin: 0; }
.home .prooffig .shot { box-shadow: 0 22px 54px rgba(20, 26, 60, 0.16); }
.home .prooffig figcaption { margin-top: 0.85rem; }
.home .prooffig__what { font-family: var(--font-body); font-weight: 600; color: var(--ink); font-size: 1rem; }
.home .proffig__note, .home .prooffig__note { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: var(--ink-muted); }

/* ======================================================================
 * Section 7 - Outcomes (list band, not cards)
 * ==================================================================== */
.home .outcomes__grid { display: grid; gap: 1.25rem 2.5rem; }
@media (min-width: 52rem) { .home .outcomes__grid { grid-template-columns: 1fr 1fr; } }
.home .outcome { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.75rem; border-top: 1px solid var(--line-dark); padding-top: 1rem; }
.home .sec--dark .outcome { border-top-color: var(--line-dark); }
.home .outcome__mark { width: 9px; height: 9px; margin-top: 0.4em; background: var(--yellow); border-radius: 1px; }
.home .outcome__t { color: var(--on-dark); font-weight: 600; font-size: 1.05rem; }
.home .outcome__d { color: var(--on-dark-muted); font-size: 0.95rem; line-height: 1.5; margin-top: 0.3rem; }

/* ======================================================================
 * Section 8 - Platform to capability navigation (guided path)
 * ==================================================================== */
.home .capnav { display: grid; gap: 0.75rem; }
.home .capnav__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; border: 1px solid var(--rule-strong); border-radius: 12px;
  background: var(--card); text-decoration: none; color: var(--ink);
  transition: border-color var(--motion-fast) var(--ease-standard), transform var(--motion-base) var(--ease-emphasized);
}
.home .capnav__item:hover { border-color: var(--navy); transform: translateY(-2px); }
.home .capnav__label { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; }
.home .capnav__sub { display: block; font-size: 0.85rem; color: var(--ink-muted); font-weight: 400; margin-top: 2px; }
.home .capnav__arrow { color: var(--blue); font-size: 1.3rem; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .home .capnav__item { transition: none; } .home .capnav__item:hover { transform: none; } }

/* ======================================================================
 * Budget Lab (interactive scenario, lab.js data-lab="budget")
 * ==================================================================== */
.home .budgetlab__grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 46rem) { .home .budgetlab__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.home .budgetlab__inputs { border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--card); padding: 1.1rem 1.25rem; margin: 0; }
.home .budgetlab__legend { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--ink); padding: 0 0 0.4rem; }
.home .labchk { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.home .labchk:last-of-type { border-bottom: 0; }
.home .labchk input { width: 1.1rem; height: 1.1rem; accent-color: var(--navy); cursor: pointer; }
.home .labchk__t { font-size: 0.9rem; color: var(--ink-body); }
.home .labchk__t b { color: var(--ink); font-weight: 600; }
.home .labchk__amt { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); }
.home .budgetlab__hint { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted); line-height: 1.5; }
.home .budgetlab__out { border: 1px solid var(--rule-strong); border-radius: 12px; background: #fffdf2; padding: 1.1rem 1.25rem; }
.home .budgetlab__tag { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.home .budgetlab__bar { height: 8px; background: var(--rule); border-radius: 999px; overflow: hidden; margin: 0.55rem 0 0.8rem; }
.home .budgetlab__fill { display: block; height: 100%; width: 76%; background: var(--yellow); transition: width var(--motion-base) var(--ease-emphasized); }
.home .budgetlab__variance { font-family: var(--font-body); font-weight: 600; color: var(--navy); font-size: 1rem; margin-top: 0.5rem; }
.home .budgetlab__variance.is-over { color: #b3261e; }
@media (prefers-reduced-motion: reduce) { .home .budgetlab__fill { transition: none; } }

/* ===== Broader platform capabilities (breadth) ===== */
.home .capbreadth { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.75rem; align-items: start; }
.home .capgroup { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--rule-strong); border-radius: var(--radius-md); padding: 1.3rem 1.35rem; }
.home .capgroup__label { display: block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.9rem; }
/* Breadth groups are native <details> so they can collapse on phones; on desktop
   they behave as static labelled groups (marker hidden, not interactive). */
.home details.capgroup > summary.capgroup__label { list-style: none; cursor: default; }
.home details.capgroup > summary::-webkit-details-marker { display: none; }
.home details.capgroup > summary::marker { content: ""; }
.home .capgroup__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.home .capgroup__list li { font-size: 0.92rem; line-height: 1.35; color: var(--ink); padding-left: 1.1rem; position: relative; }
.home .capgroup__list li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--yellow-deep); font-weight: 600; }
.home .capbreadth__note { margin-top: 1.4rem; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.7; color: var(--ink-muted); max-width: 82ch; }
.home .capbreadth__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.home .capbreadth__note a:hover { color: var(--navy); }
@media (max-width: 64rem) { .home .capbreadth { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .home .capbreadth { grid-template-columns: 1fr; } }