/* Aanbod en cases (src/pages/offer.mjs): /custom-builds/, /cases/ and the three case pages. Loaded after pages.css on
   those routes only. Colours come from tokens.css; every example surface keeps a fixed size, so nothing moves while it
   plays. Clicked states (.is-clicked) are set by the black pointer (site/sim-cursor.js). */

/* ── Small parts inside example windows ── */
.mk-logo--bol { width: 28px; aspect-ratio: 200 / 78; }
.mk-ok--wait { background: var(--ochre-soft); color: var(--ochre); }
.mk-num.cx-q { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--hue-soft); color: var(--hue); font-size: 12.5px; }
.mk .mk-propose { padding: 12px 14px; gap: 0; }
.mk .mk-propose p { font-size: 14px; line-height: 1.5; }

/* A row, an option or a slot the pointer picks: it takes the area's hue. */
.cx-tap, .cb-pick, .mk-slots li { transition: border-color var(--base), background var(--base), box-shadow var(--base); }
.mk-row.cx-tap { margin-inline: -8px; padding-inline: 8px; border-radius: 10px; }
.cx-tap.is-clicked { border-bottom-color: transparent; background: var(--hue-soft); box-shadow: inset 0 0 0 1px var(--hue); }
.mk-slots li.is-clicked { border-color: var(--hue); background: var(--hue-soft); box-shadow: inset 0 0 0 1px var(--hue); }
.mk-slots li.is-clicked span { color: var(--hue); }

/* Before and after the pointer clicks a go-ahead: both states share one cell, so nothing moves. The after state shows
   once the window (an example screen, a hero card or a rail scene) holds a clicked element. */
.cx-swap { display: inline-grid; justify-items: start; align-items: center; vertical-align: middle; }
.cx-swap--block { display: grid; }
/* One state fades out before the other fades in, so the two texts never show on top of each other. */
.cx-swap > * { grid-area: 1 / 1; transition: opacity .15s ease, visibility .15s; }
.mk-row > .cx-swap:last-child, .mk-meta > .cx-swap { justify-items: end; }
.cx-before { transition-delay: .15s; }
.cx-after { visibility: hidden; opacity: 0; }
:is(.mk, .cs-scene):has(.is-clicked) .cx-before { visibility: hidden; opacity: 0; transition-delay: 0s; }
:is(.mk, .cs-scene):has(.is-clicked) .cx-after { visibility: visible; opacity: 1; transition-delay: .15s; }
.mk-flag.cx-okline { background: var(--green-soft); color: var(--green); }
/* A restarted printer loses its warning colours. */
.mk:has(.is-clicked) .cx-printers > li.is-warn .cx-cam i { background: var(--hue-on-ink); }
.mk:has(.is-clicked) .cx-printers .cx-bars .is-warn b { color: var(--ink); }
.mk:has(.is-clicked) .cx-printers .cx-bars .is-warn i { background: linear-gradient(90deg, var(--hue) calc(var(--v) * 1%), var(--wash) 0); }

/* Bars with a label and a value; the warning one in orange. */
.cx-bars { display: grid; gap: 10px; }
.cx-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; font-size: 13.5px; }
.cx-bars b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-bars i { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--hue) calc(var(--v) * 1%), var(--wash) 0); }
.cx-bars .is-warn b { color: var(--orange); }
.cx-bars .is-warn i { background: linear-gradient(90deg, var(--orange) calc(var(--v) * 1%), var(--wash) 0); }

/* A window photo with the measuring lines drawn on it. */
.cx-photo { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: var(--hue-soft); }
.cx-sketch { display: block; width: 100%; height: auto; max-height: 132px; }
.cx-sk-wall { fill: var(--canvas); }
.cx-sk-frame { fill: var(--paper); stroke: var(--ink-subtle); stroke-width: 2; }
.cx-sk-glass { fill: var(--wash); stroke: var(--line-ink); }
.cx-sk-line { fill: none; stroke: var(--hue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 250; }
.cx-dims { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-dims .pf { background: var(--canvas); }
.mk--hero .cx-sk-line, .cx-built[data-active="2"] [data-screen="2"] .cx-sk-line { animation: cx-draw 1.4s var(--enter) .5s both; }
@keyframes cx-draw { from { stroke-dashoffset: 250; } }

/* A price line, a camera view per printer, cost per channel and a photographed order list. */
.cx-spark { display: block; width: 100%; height: auto; max-height: 48px; }
.cx-spark polyline { fill: none; stroke: var(--hue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-spark circle { fill: var(--hue); }
.cx-printers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cx-printers > li { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.cx-printers > li > b { font-size: 14px; font-weight: 500; }
.cx-printers > li > small { color: var(--ink-muted); font-size: 12.5px; line-height: 1.35; }
.cx-printers .cx-bars { margin-top: 6px; }
.cx-cam { position: relative; display: block; height: 52px; margin-bottom: 6px; overflow: hidden; border-radius: 8px; background: var(--ink-800); }
.cx-cam::before { content: ""; position: absolute; left: 25%; right: 25%; top: 12px; height: 4px; border-radius: 2px; background: var(--muted-on-ink); }
.cx-cam i { position: absolute; left: 34%; right: 34%; bottom: 8px; height: calc(var(--v) * .3px); border-radius: 3px 3px 0 0; background: var(--hue-on-ink); }
.cx-printers .is-warn .cx-cam i, .cx-printers > li.is-warn .cx-cam i { background: var(--orange-on-ink); }
.cx-printers > li.cx-tap { margin: 0; padding: 10px; border-radius: 12px; }
.cx-channels { display: grid; gap: 6px; }
.cx-channels li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.cx-channels li > :first-child { justify-self: center; }
.cx-channels b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-channels li:nth-child(2) { border-color: var(--hue); background: var(--hue-soft); }
.cx-paper { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--paper); transform: rotate(-1deg); }
.cx-paper i { display: block; width: calc(var(--w) * 1%); height: 5px; border-radius: 3px; background: var(--line-ink); }

/* ── Custom Builds: the agreements card in the hero ── */
.cb-sec { display: grid; gap: 4px; }
.cb-sec + .cb-sec { padding-top: 10px; border-top: 1px solid var(--line-soft); }
.cb-sec .mk-row { min-height: 0; padding-block: 4px 6px; }
.cb-roles { display: grid; gap: 4px; }
.cb-roles li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; font-size: 14px; }
.cb-apps { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
.cb-apps li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 13px; font-weight: 500; }
.cb-foot { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 13.5px; font-weight: 500; }
/* The small labels under each agreement are the other three build widgets: they flow into the tile's proof row. */
.cb-proof { display: contents; }
.cb-agreed .actions { margin-top: 28px; }

/* The first conversation: the pointer picks the task to start with. */
.cb-picks { display: grid; gap: 8px; }
.cb-pick { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.cb-pick > span:last-child { display: grid; min-width: 0; }
.cb-pick b { font-weight: 500; }
.cb-pick small { color: var(--ink-muted); font-size: 13px; }
.cb-pick.is-clicked { border-color: var(--hue); background: var(--hue-soft); box-shadow: inset 0 0 0 1px var(--hue); }
.cb-pick.is-clicked .mk-radio { border: 5px solid var(--hue); }
.cb-route .steps-stage, .cx-built .steps-stage { grid-template-rows: minmax(0, 1fr); }
.cb-route .mk-log span { overflow: visible; white-space: normal; }

/* ── Case cards: client logos in grey until the pointer is on them ── */
.cs-card .result-logo img, .cx-logo img { filter: grayscale(1); opacity: .72; transition: filter var(--base), opacity var(--base); }
.cs-card:hover .result-logo img, .cs-card:focus-visible .result-logo img, .cx-facts:hover .cx-logo img { filter: none; opacity: 1; }
.cs-card:focus-visible { outline: none; box-shadow: var(--focus); }
.cs-summary { font-size: 15.5px; line-height: 1.5; }
.cs-built { display: grid; align-content: start; gap: 8px; }
.cs-built > span { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-muted); font-size: 14px; line-height: 1.45; }
.cs-built .i { flex: none; margin-top: 2px; color: var(--hue); }
.cs-grid .result-figure { margin-top: 4px; }
/* One row of three: logo, sector, summary, parts, figure and link line up across the cards. */
@media (min-width: 961px) {
  .cs-grid { grid-template-rows: repeat(7, auto); row-gap: 0; }
  .cs-grid > li { display: grid; grid-row: span 7; grid-template-rows: subgrid; }
  .cs-grid .cs-card { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 14px; }
  .cs-grid .result-link { align-self: end; }
}

/* The rail of three moments from the cases (sims.css drives it). The three tabs sit together at the top. */
.cs-rail .sim-tabs { align-content: start; }
.cs-scene { max-width: 460px; }
.cs-body { display: grid; gap: 12px; padding: 14px 16px 16px; }
.cs-body .mk-rows .mk-row { border-bottom: 0; }
.cs-body > div { display: grid; gap: 12px; }
@media (max-width: 899px) { .cs-body { gap: 8px; padding: 12px 14px 14px; } }
@media (max-width: 379px) { .cs-body .mk-row .mk-tag { display: none; } .cs-body { padding: 12px; } }

/* ── Case pages ── */
.cx-hero { position: relative; }
.cx-hero .mk-foot { flex-wrap: wrap; }
.cx-overview { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; gap: 16px; }
.cx-facts, .cx-numbers { min-width: 0; padding: 28px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--panel); }
.cx-logo { display: flex; align-items: center; height: 56px; margin-bottom: 8px; }
.cx-logo img { width: auto; max-width: 220px; height: 28px; object-fit: contain; object-position: left center; }
.cx-logo .case-logo--lumoa { height: 36px; }
.cx-logo .case-logo--topline { height: 46px; }
/* Verduin's logo is a wide drawing with small lettering (1390 × 312): at the shared height it reads much smaller than
   Lumoa and Topline, so it gets a taller box and the room to use it. Same on the case cards. */
.cx-logo .case-logo--podotherapie-verduin, .cs-card .result-logo .case-logo--podotherapie-verduin { height: 56px; max-width: 100%; }
.cs-card .result-logo { height: 56px; }
.cx-facts dl > div { display: grid; gap: 6px; padding-block: 16px; border-top: 1px solid var(--line); }
.cx-facts dl > div:last-child { padding-bottom: 0; }
.cx-facts dt { color: var(--ink-muted); font-size: 14px; }
.cx-facts dd { font-size: 16px; line-height: 1.45; }
.cx-facts .chips { gap: 6px; margin-top: 4px; }
.cx-facts .chip { min-height: 36px; font-size: 13.5px; }
.cx-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cx-figures > div { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 16px; border: 1px solid var(--line-soft); border-radius: var(--r-tile); background: var(--canvas); }
.cx-figures b { font-size: 30px; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-figures > div:first-child b { color: var(--hue); }
.cx-figures span { color: var(--ink-muted); font-size: 13.5px; line-height: 1.35; }
.cx-calc { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: 14.5px; }
.cx-calc caption { padding-bottom: 6px; font-size: 15px; font-weight: 500; text-align: left; }
.cx-calc th, .cx-calc td { padding: 10px 0; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.cx-calc th { padding-right: 12px; font-weight: 500; }
.cx-calc td { color: var(--ink-muted); }
.cx-calc td:last-child { padding-left: 12px; color: var(--ink); font-weight: 500; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-calc .cx-total th, .cx-calc .cx-total td { border-top-color: var(--line-ink); color: var(--ink); font-weight: 600; }
.cx-basis { margin-top: 14px; color: var(--ink-muted); font-size: 13.5px; line-height: 1.55; }

/* What we built: six parts beside one stage. Like every step list, each part always shows its description and only
   the chosen one is highlighted, so no row changes height while the parts play. The stage takes the list's height. */
.cx-built { align-items: stretch; }
.cx-built .steps-stage { height: auto; min-height: 480px; }
.cx-built .flow-screen { align-self: center; }
/* sims.js resets a screen's clicks as the next step starts: the screen that leaves hides at once, so it never shows
   its waiting state again on the way out. The next one still fades in. */
.cx-built .flow-screen, .cb-route .flow-screen { transition: none; }
.cx-built .flow-steps { align-content: start; gap: 6px; }
.cx-built .flow-step { padding: 14px 18px 16px 14px; }
.cx-built .flow-text span { font-size: 14px; }
/* Short texts end on a pair of words, never on one: Chrome's 'pretty' leaves a long last word alone, 'balance' does not. */
:is(.cx-built .flow-text span, .cx-more p, .cs-rates .stat-label) { text-wrap: balance; }
/* An amount stays on one line on a phone; the note beside it wraps instead. */
.mk-amount b { flex: none; white-space: nowrap; }
.sim-flow[data-active="4"] [data-screen="4"],
.sim-flow[data-active="5"] [data-screen="5"] { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--enter) .18s, transform .4s var(--enter) .18s, visibility 0s .18s; }

/* Also built: rows of three (9, 6 and 3 items), then who decides as a band across the full width. */
.cx-extra { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cx-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cx-more li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-content: start; gap: 4px 12px; padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: var(--r-tile); background: var(--panel); }
.cx-more .i { grid-row: span 2; margin-top: 1px; color: var(--ok); }
.cx-more h3 { font-size: 16px; line-height: 1.35; }
.cx-more p { color: var(--ink-muted); font-size: 14.5px; }
.cx-control { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 20px; padding: 28px 32px; border-radius: var(--r-card); background: var(--hue-soft); }
.cx-control .tile-icon { grid-row: span 2; border-color: var(--canvas); background: var(--canvas); }
.cx-control h3 { font-size: 20px; }
.cx-control p { max-width: 72ch; line-height: 1.55; }

/* The next case, as one link across the width, close under the section before it. */
.cx-next-block { padding-top: 0; }
.cx-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; padding: 28px 32px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--panel); color: var(--ink); text-decoration: none; transition: border-color var(--base), box-shadow var(--base); }
.cx-next:hover { border-color: var(--line); box-shadow: var(--shadow-tab); }
.cx-next:focus-visible { outline: none; box-shadow: var(--focus); }
.cx-next-meta { color: var(--hue); font-size: 14px; font-weight: 500; }
.cx-next > b { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.cx-next-text { max-width: 64ch; color: var(--ink-muted); font-size: 15.5px; line-height: 1.5; }
.cx-next .result-link { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0; white-space: nowrap; }
.cx-next:hover .result-link .i { transform: translateX(3px); }

/* ── Breakpoints ── */
@media (max-width: 960px) {
  .cx-overview { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .cx-built .steps-stage { height: 560px; min-height: 0; }
}
@media (max-width: 699px) {
  .cx-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cx-facts, .cx-numbers { padding: 20px; }
  .cx-figures { grid-template-columns: minmax(0, 1fr); }
  .cx-figures > div { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 14px; }
  .cx-figures b { font-size: 24px; }
  .cx-calc, .cx-calc tbody, .cx-calc caption { display: block; }
  .cx-calc tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding-block: 10px; border-top: 1px solid var(--line-soft); }
  .cx-calc th { grid-column: 1 / -1; }
  .cx-calc th, .cx-calc td { padding: 0; border: 0; }
  .cx-calc .cx-total { border-top-color: var(--line-ink); }
  .cx-more li { padding: 16px; }
  .cx-control { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .cx-control .tile-icon { grid-row: auto; margin-bottom: 4px; }
  .cx-next { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .cx-next .result-link { grid-column: 1; grid-row: auto; margin-top: 10px; }
}
@media (max-width: 479px) {
  .cx-printers { gap: 6px; }
  .cx-printers > li, .cx-printers > li.cx-tap { padding: 8px; }
  .cb-pick { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sim-flow[data-active="4"] [data-screen="4"], .sim-flow[data-active="5"] [data-screen="5"] { transition: none; }
  .mk--hero .cx-sk-line, .cx-built .cx-sk-line { animation: none; }
  .cx-tap, .cb-pick, .mk-slots li, .cs-card .result-logo img, .cx-logo img, .cx-swap > *, .cx-next, .cx-next .result-link .i { transition: none; }
  /* Without the pointer the examples show their approved end state, like the agent boxes (components.css). */
  :is(.cx-built, .cb-route, .cs-rail, .cx-hero) .cx-before { visibility: hidden; opacity: 0; }
  :is(.cx-built, .cb-route, .cs-rail, .cx-hero) .cx-after { visibility: visible; opacity: 1; }
  :is(.cx-built, .cb-route, .cs-rail) .mk-btn--ink { border-color: var(--green); background: var(--green); color: var(--on-ink); }
}