/* OpenVibe.Space — the home page and error pages. The shared Frame (openvibe-shared/shell) brings the
   theme variables, navbar and footer, and the home page is built from openvibe-shared/showcase sections
   (showcase.css); this is only what this site renders itself. */

body {
  font-family: var(--ov-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
}

/* The showcase sections carry their own width and gutters; the page only spaces them from the footer. */
.page {
  padding: 0;
}

/* Error pages: one centred column in the same type as the showcase hero. */
.error {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 0;
}

.error h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0.25rem 0 0.75rem;
}

.eyebrow {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-light, var(--border, #2c3d5c));
  background: var(--bg-secondary, #101828);
  color: var(--accent-light, var(--accent, #60a5fa));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.lede {
  font-size: 17px;
  line-height: 1.6;
  max-width: 640px;
  color: var(--text-secondary, #96a7c2);
}

.btn {
  display: inline-flex;
  align-items: center;
  margin: 8px 8px 0 0;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid var(--border-light, var(--border, #2c3d5c));
  color: var(--text-primary, #e6edf7);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--accent, #3b82f6);
  background: var(--bg-hover, #1c2a44);
  outline: 0;
}

/* The quotas note names its source file by URL: let it wrap on a phone. */
.sc-note a {
  overflow-wrap: anywhere;
}

/* The home's questions, in the kit's tokens. */
.space-faq { border: 1px solid var(--border, #1f2d47); border-radius: 10px; padding: 4px 16px; margin: 8px 0; background: var(--bg-card, #131c2e); }
.space-faq[open] { padding-bottom: 12px; }
.space-faq summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.space-faq p { margin: 4px 0 0; color: var(--text-secondary, #96a7c2); }

/* The shared hero's aura is drawn past its right edge (showcase .sc-hero-vis), so at 390px the home scrolled
   sideways by ~63px. Clip the page on this axis only; vertical scrolling and sticky stay as they are (2026-10-29). */
.page { overflow-x: clip; }

/* Touch targets on phones (fleet audit 2026-10-29): the touch-only hit area for this group. Nothing moves with a mouse. */
@media (pointer: coarse) { .space-faq summary { min-height: 44px; box-sizing: border-box; } }

/* Pick: on a phone every pane is shown, stacked, each with its own heading; the chips are a row of links that
   jump to a pane (the owner's rule, 2026-10-31: never hide content to shorten). A wide screen shows the panes as
   before, with no chips. */
.pick-head, .pick-row { display: none; }
@media (max-width: 640px) {
  /* The page has no gutter of its own (each showcase section brings one), so the bar brings the same 16 px: the
     heading clears the screen's edge and the chip row still bleeds to it (2026-11-08). */
  .pick-bar { margin-top: 30px; padding: 0 16px; }
  .pick-head { display: block; }
  .pick-head h2 { margin: 0 0 4px; font: 700 clamp(20px, 2.4vw, 28px)/1.2 var(--ov-font, 'Inter', system-ui, sans-serif); letter-spacing: -.02em; }
  .pick-row { display: flex; gap: 8px; overflow-x: auto; margin: 10px -16px 0; padding: 2px 16px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pick-row::-webkit-scrollbar { display: none; }
  .pick-chip { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); color: var(--text-secondary, #96a7c2); font-size: .9rem; font-weight: 650; white-space: nowrap; text-decoration: none; }
  .pick-chip:hover, .pick-chip:focus-visible { color: var(--text-primary, #e6edf7); border-color: var(--accent, #3b82f6); }
  .pick-chip:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
  .pick .pick-pane { scroll-margin-top: 72px; }
  .pick .pick-pane + .pick-pane { margin-top: 26px; }
}

/* The fold (the owner's short-pages rule): closed on a phone, and where there is room it looks like the section it
   replaces: a heading and its content, with no card around it. */
.sp-fold-block { margin-top: 32px; border: 1px solid var(--border, #1f2d47); border-radius: 14px; background: var(--bg-card, #131c2e); }
.sp-fold-block > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 16px; cursor: pointer; font-weight: 700; list-style: none; }
.sp-fold-block > summary::-webkit-details-marker { display: none; }
.sp-fold-block > summary h2 { margin: 0; font: 700 clamp(19px, 2.2vw, 26px)/1.2 var(--ov-font, 'Inter', system-ui, sans-serif); }
.sp-fold-block > summary:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: 14px; }
.sp-fold-block .sc-sec { margin: 0; padding: 0 16px 16px; }
.sp-fold-block .sc-sec > h2 { display: none; }
@media (min-width: 641px) {
  /* Where there is room the fold looks like the section it replaces: the same width and gutters as .sc-sec. */
  .sp-fold-block { border: 0; background: none; border-radius: 0; max-width: 1080px; margin: 56px auto 0; padding: 0 24px; }
  .sp-fold-block > summary { display: block; min-height: 0; padding: 0; }
  .sp-fold-block > summary h2 { margin: 0 0 6px; font: 700 clamp(22px, 2.6vw, 30px)/1.2 var(--ov-font, 'Inter', system-ui, sans-serif); }
  .sp-fold-block > summary span { display: none; }
  .sp-fold-block .sc-sec { margin: 0; max-width: none; padding: 0; }
}
@media (max-width: 640px) { .sp-fold-block { margin-top: 24px; } .sp-fold-block > summary h2 { font-size: 1.05rem; } }

/* ── The home's picture (server/render/pages.js spaceScene): a sentence in, an app out ── */
.sp-scene { width: min(100%, 400px); margin: 0 auto; display: grid; gap: 12px; }
.sp-scene-ask { display: grid; gap: 2px; margin: 0; padding: 10px 14px; border-radius: 14px 14px 14px 4px; border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 45%, transparent); background: color-mix(in srgb, var(--accent, #3b82f6) 12%, transparent); justify-self: start; max-width: 92%; }
.sp-scene-ask span { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-light, #60a5fa); }
.sp-scene-ask b { color: var(--text-primary, #e6edf7); line-height: 1.3; }
.sp-scene-win { border: 1px solid var(--border, #1f2d47); border-radius: 16px; overflow: hidden; background: linear-gradient(var(--bg-card, #131c2e), var(--bg-card, #131c2e)), var(--bg-primary, #0a0f1c); box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
    animation: spSceneIn var(--ov-dur-4, .52s) var(--ov-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) .5s both; }
.sp-scene-bar { display: flex; align-items: center; gap: 6px; margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--border, #1f2d47); background: color-mix(in srgb, var(--bg-primary, #0a0f1c) 60%, transparent); }
.sp-scene-bar i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--text-muted, #7386a3) 45%, transparent); }
.sp-scene-bar span { margin-left: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-secondary, #96a7c2); }
.sp-scene-app { display: grid; gap: 10px; padding: 14px; }
.sp-scene-app > b { font-size: 1.05rem; color: var(--text-primary, #e6edf7); }
.sp-scene-app ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-scene-app li { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--border, #1f2d47); color: var(--text-primary, #e6edf7); font-size: .92rem;
    animation: spSceneRow var(--ov-dur-3, .32s) var(--ov-ease-out, ease-out) both; }
.sp-scene-app li:nth-child(1) { animation-delay: .9s; } .sp-scene-app li:nth-child(2) { animation-delay: 1.05s; } .sp-scene-app li:nth-child(3) { animation-delay: 1.2s; }
.sp-scene-app em { margin-left: auto; font-style: normal; color: var(--text-muted, #7386a3); font-size: .82rem; }
.sp-scene-av { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: hsl(var(--h) 55% 42%); color: #fff; font-size: .72rem; font-weight: 800; }
.sp-scene-btn { justify-self: start; padding: 8px 14px; border-radius: 10px; background: var(--accent, #3b82f6); color: #fff; font-weight: 700; font-size: .9rem; }
.sp-scene figcaption { text-align: center; color: var(--text-muted, #7386a3); font-size: .8rem; }
@keyframes spSceneIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes spSceneRow { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp-scene-win, .sp-scene-app li { animation: none; } }
html[data-ov-motion=reduced] .sp-scene-win, html[data-ov-motion=reduced] .sp-scene-app li { animation: none; }