/* openvibe.actor's home page only (server/http/pages.js). The pieces are the shared kit's (kit.css: the numbers, rows and
   folds; room.css: the cards and the rail; showcase.css: the hero, the steps, the questions and the launcher); this file
   only places them. Colours come from the Frame's theme tokens, so it follows the person's theme, light or dark. */
.page { --hm-accent-text: color-mix(in srgb, var(--accent-light, #60a5fa) 45%, var(--text-primary, #e6edf7)); }
.sc-eyebrow { color: var(--hm-accent-text); }
.sc-table thead th { color: var(--text-secondary, #96a7c2); }

/* The numbers, one strip under the hero. */
.hm-stats-sec { margin: 22px 0 0; }

/* The task box, then the tasks to start from: a rail on a phone; from 760 px a grid that wraps, so it needs no arrows. */
.hm-task .sc-lede { margin-bottom: 0; }
.hm-task .ovk-rail { margin-top: 22px; }
@media (min-width: 760px) {
    .hm-task .ovk-rail-track { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 2px 0 6px; }
    .hm-task .ovk-rail-btn { display: none; }
}
.hm-needs { margin: 0; font-size: 13.5px; color: var(--text-secondary, #96a7c2); }
.hm-chosen { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--accent, #3b82f6); border-radius: 0 10px 10px 0; background: var(--bg-primary, #0a0f1c); font-size: 15px; overflow-wrap: anywhere; }

/* How it works: each part is a fold; a showcase block inside one drops its section spacing. A link to a part (#tools)
   lands on its anchor inside the fold, which opens it; the margin keeps the fold's title in view under the navbar. */
.hm-more .ovk-fold-body > div { scroll-margin-top: calc(var(--ovnav-real-h, 56px) + 84px); }
.hm-more .ovk-fold-body .sc-sec { margin: 0; }
.hm-more .ovk-fold-body .sc-lede { margin-bottom: 14px; }
.hm-more .ovk-fold-body > div > p:first-child { margin-top: 0; }
.hm-api-more { margin: 16px 0 0; }

/* The rest of OpenVibe (showcase.apps, whose four tiles fill their rows since openvibe-shared 4.39.0): room before the
   Frame's "Recently shipped" under it. */
.hm-net { margin-bottom: 48px; }

/* The tools the runtime can run, as chips. */
.hm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-chips li { min-width: 0; }
.hm-chips a, .hm-chips li:not(:has(a)) { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-light, var(--border, #2c3d5c)); background: var(--bg-secondary, #101828); color: var(--text-primary, #e6edf7); font-size: 13.5px; text-decoration: none; overflow-wrap: anywhere; }
.hm-chips a:hover, .hm-chips a:focus-visible { border-color: var(--accent, #3b82f6); }

/* The shared steps and code grids ask for 280–320 px; a 320 px phone has less (and a fold's padding takes more). */
.sc-steps { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.sc-code { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
@media (max-width: 520px) { .sc-code pre { white-space: pre-wrap; overflow-wrap: anywhere; } }
@media (max-width: 420px) { .sc-hero, .sc-sec, .sc-cta { padding-left: 16px; padding-right: 16px; } }

/* The fold (the owner's short-pages rule, 2026-10-30): a part a reader rarely needs. On a phone it is closed — the
   title row is a 44 px target that opens it — and where there is room it is open and looks like the section it
   replaces. A checkbox and a label, no script: the part stays in the page for the crawlers. */
.fold { margin-top: 26px; }
.fold-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fold-h { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.fold-h > h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; flex: 1 1 auto; }
.fold-h:focus-within { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
.fold-mark { flex: none; }
.fold-n { flex: none; font-size: .82rem; font-weight: 600; color: var(--text-muted, #7386a3); font-variant-numeric: tabular-nums; }
.fold-mark::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--text-muted, #7386a3); }
.fold-toggle:checked ~ .fold-h .fold-mark::after { content: "\2212"; }
.fold-body { display: none; }
.fold-toggle:checked ~ .fold-body { display: block; }
.fold-body > .sc-sec { margin-top: 16px; }
/* The title row names the part, so a part that keeps its own heading gives way to it on a phone (and keeps it where
   there is room). */
@media (max-width: 640px) {
  .fold-bare .fold-body > section > h2, .fold-bare .fold-body > .sc-sec > h2, .fold-bare .fold-body .ov-shipped-home h3 { display: none; }
}
.fold:not(.fold-bare) .fold-body .ov-shipped-home h3 { display: none; }
@media (min-width: 641px) {
    .fold { margin-top: 56px; }
    .fold-toggle { display: none; }
    .fold-h { min-height: 0; margin-bottom: 10px; cursor: default; }
    .fold-mark, .fold-n { display: none; }
    .fold-body { display: block; }
    .fold-bare > .fold-h { display: none; }
    .fold-bare { margin-top: 0; }
    .fold:not(.fold-bare) .fold-body > .sc-sec { margin-top: 0; }
}