/* Bolt Compact: the shared stylesheet for a website in Bolt's Compact option (design/README.md, "Compact").
   Taken from Adminroo's site (Nov 2026), where it is live. Load it after bolt.css and after the site's own stylesheet:

     <link rel="stylesheet" href="/assets/bolt.css">
     <link rel="stylesheet" href="/assets/www.css">        the site's own: fonts, colour variables, buttons, its pages
     <link rel="stylesheet" href="/assets/bolt-compact.css">

   It reads the site's usual shop-window variables when they exist (--paper, --text, --muted, --rule, --card, --accent,
   --accent-text, --on-accent, --accent-wash, --shadow, --shadow-button, --display, --mono, --sans) and falls back to
   Bolt's own (the studio's accent), so dark mode follows whatever switch the site already has. The markup it expects is
   in the README. No colour, space, radius or timing is typed here: everything comes from bolt.css. No script. */

:root {
  --cx-paper: var(--paper, var(--bolt-shop-paper));
  --cx-text: var(--text, var(--bolt-shop-text));
  --cx-muted: var(--muted, var(--bolt-shop-muted));
  --cx-rule: var(--rule, var(--bolt-shop-rule));
  --cx-card: var(--card, var(--bolt-shop-card));
  --cx-accent: var(--accent, var(--bolt-studio-accent));
  --cx-on-accent: var(--on-accent, var(--bolt-studio-on-accent));
  --cx-accent-text: var(--accent-text, var(--bolt-studio-accent-text));
  --cx-wash: var(--accent-wash, var(--bolt-studio-accent-wash));
  --cx-shadow: var(--shadow, var(--bolt-shop-shadow));
  --cx-shadow-button: var(--shadow-button, var(--bolt-shop-shadow-button));
  --cx-display: var(--display, var(--bolt-font-sans));
  --cx-mono: var(--mono, var(--bolt-font-mono));
  --cx-sans: var(--sans, var(--bolt-font-sans));
  --cx-gutter: var(--bolt-compact-gutter);
}
@media (max-width: 600px) { :root { --cx-gutter: var(--bolt-compact-gutter-phone); } }
a, button, label, summary { touch-action: manipulation; }

/* ---------- The column ---------- */
.cx-wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--bolt-compact-wrap) + 2 * var(--cx-gutter)); margin: 0 auto; padding: 0 var(--cx-gutter); }
.cx-rule { border: 0; border-top: 1px solid var(--cx-rule); margin: 0; }

/* ---------- Header: logo, Log in and the one button on top; up to five links and the theme switch underneath ---------- */
.cx-hd { position: static; }
.cx-hd-top { display: flex; align-items: center; justify-content: space-between; gap: var(--bolt-space-4); padding: var(--bolt-space-4) 0 var(--bolt-space-3); border-bottom: 1px solid var(--cx-rule); }
.cx-hd-top .cx-logo { display: flex; align-items: center; min-height: 44px; }
.cx-hd-top .cx-logo img { width: auto; height: 40px; }
.cx-hd-act { display: flex; align-items: center; gap: var(--bolt-space-2); }
.cx-hd-act .cx-login { display: inline-flex; align-items: center; min-height: 44px; padding: var(--bolt-space-2) var(--bolt-space-3); border-radius: var(--bolt-radius-control); color: var(--cx-muted); font: 500 15px/1 var(--cx-sans); text-decoration: none; }
.cx-hd-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--bolt-space-3); border-bottom: 1px solid var(--cx-rule); }
.cx-nav { display: flex; margin-left: calc(-1 * var(--bolt-space-3)); }
.cx-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--bolt-space-2) var(--bolt-space-3); border-radius: var(--bolt-radius-control); color: var(--cx-muted); font: 500 15px/1 var(--cx-sans); text-decoration: none; white-space: nowrap; }
.cx-nav a[aria-current="page"] { color: var(--cx-text); }
.cx-nav a:active, .cx-login:active { transform: scale(var(--bolt-press-scale)); transition: transform var(--bolt-motion-press) var(--bolt-ease-out); }
@media (hover: hover) and (pointer: fine) { .cx-nav a:hover, .cx-login:hover { color: var(--cx-text); background: var(--cx-wash); } }
@media (max-width: 600px) {
  .cx-hd-top { padding: var(--bolt-space-3) 0 var(--bolt-space-2); }
  .cx-hd-top .cx-logo img { height: 32px; }
  .cx-hd-act .cx-login { padding: var(--bolt-space-2); }
}
@media (max-width: 360px) {
  .cx-hd-top { gap: var(--bolt-space-2); }
  .cx-hd-top .cx-logo img { height: 28px; }
  .cx-hd-act { gap: 0; }
  .cx-hd-act .cx-login { font-size: 14px; }
  .cx-nav { margin-left: calc(-1 * var(--bolt-space-2)); }
  .cx-nav a { padding: var(--bolt-space-2); }
}
@media (max-width: 340px) {
  .cx-nav { margin-left: calc(-1 * var(--bolt-space-1)); }
  .cx-nav a { padding: var(--bolt-space-2) var(--bolt-space-1); font-size: 13px; }
}

/* ---------- Landing: headline, one line, the plain facts ---------- */
.cx-hero { padding: var(--bolt-space-6) 0; }
.cx-hero > .cx-wrap > * { animation: cxIn 0.9s var(--bolt-ease-out) both; }
.cx-hero h1 { margin: 0; font: 400 clamp(28px, 9.2vw, 60px)/0.95 var(--cx-display); text-transform: uppercase; color: var(--cx-text); }
@media (min-width: 340px) { .cx-hero h1 { white-space: nowrap; } }
.cx-hero h1 .cx-accent { color: var(--cx-accent-text); }
.cx-hero .cx-sub { margin: var(--bolt-space-3) 0 0; max-width: 46ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; color: var(--cx-muted); animation-delay: 0.06s; }
.cx-hero .cx-sub b { color: var(--cx-text); font-weight: 500; }
.cx-facts { margin: var(--bolt-space-4) 0 0; font: 500 13px/1.6 var(--cx-mono); color: var(--cx-muted); animation-delay: 0.12s; }
/* A short uppercase caption: a section's name, never a label above a heading */
.cx-label { margin: 0; font: 500 13px/1 var(--cx-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--cx-muted); }
@media (max-width: 600px) {
  .cx-hero { padding: var(--bolt-space-4) 0 var(--bolt-space-5); }
  .cx-hero .cx-sub { margin-top: var(--bolt-space-2); font-size: 15px; }
  .cx-facts { margin-top: var(--bolt-space-3); font-size: 12px; }
}
/* A clip-path reveal (never opacity), so the words pass contrast in every frame */
@keyframes cxIn { from { clip-path: inset(0 0 100% 0); transform: translateY(var(--bolt-entrance-rise)); } to { clip-path: inset(0 0 -20% 0); } }

/* ---------- One sideways row of product shots (scroll snap, no script) ---------- */
.cx-row-sec > .cx-wrap { position: relative; }
.cx-row-sec > .cx-wrap::before { content: ""; display: block; border-top: 1px solid var(--cx-rule); margin-bottom: var(--bolt-space-5); }
.cx-row {
  box-sizing: border-box;
  list-style: none; margin: var(--bolt-space-5) calc(-1 * var(--cx-gutter)) 0; padding: 0 var(--cx-gutter) var(--bolt-space-2);
  display: grid; grid-auto-flow: column; grid-auto-columns: min(var(--bolt-compact-phone-shot), 56vw); gap: var(--bolt-space-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--cx-gutter);
  scrollbar-width: none; scroll-timeline: --cx-row x;
}
.cx-row::-webkit-scrollbar { display: none; }
.cx-row:focus-visible { outline-offset: -2px; }
.cx-row > li { scroll-snap-align: start; }
@media (min-width: 700px) { .cx-row { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; scroll-padding: 0; } }
/* The shot itself is the site's (a phone frame, a screenshot); a plain image gets the card corner */
.cx-row > li > img { display: block; width: 100%; height: auto; border-radius: var(--bolt-radius-card); box-shadow: var(--cx-shadow); }
/* The step number sits on the title's line, never as a label above it */
.cx-row h3 { display: flex; align-items: baseline; gap: var(--bolt-space-3); margin: var(--bolt-space-4) 0 0; font: 400 28px/1 var(--cx-display); text-transform: uppercase; color: var(--cx-text); }
.cx-row h3 .cx-n { font: 500 13px/1 var(--cx-mono); color: var(--cx-muted); }
.cx-row h3 + p { margin: var(--bolt-space-2) 0 0; font-size: 15px; line-height: 1.45; color: var(--cx-muted); }
@media (max-width: 600px) {
  .cx-row-sec > .cx-wrap::before { margin-bottom: var(--bolt-space-4); }
  .cx-row { margin-top: var(--bolt-space-4); grid-auto-columns: 40vw; gap: var(--bolt-space-3); }
  .cx-row h3 { margin-top: var(--bolt-space-3); gap: var(--bolt-space-2); font-size: 20px; }
  .cx-row h3 .cx-n { font-size: 12px; }
  .cx-row h3 + p { margin-top: var(--bolt-space-1); font-size: 13px; line-height: 1.4; }
}
/* Phones: a bar shows how far along the row you are, where scroll-driven animation exists */
.cx-row-bar { display: none; }
@supports (animation-timeline: scroll()) {
  .cx-row-sec { timeline-scope: --cx-row; }
  .cx-row-bar { display: block; height: 4px; margin-top: var(--bolt-space-3); border-radius: var(--bolt-radius-pill); background: var(--cx-rule); overflow: hidden; }
  .cx-row-bar span { display: block; height: 100%; background: var(--cx-accent); transform-origin: 0 50%; animation: cxGrow linear both; animation-timeline: --cx-row; }
  @media (min-width: 1000px) { .cx-row-bar { display: none; } }
}
@keyframes cxGrow { from { transform: scaleX(0.25); } to { transform: scaleX(1); } }
/* Wide screens: arrow buttons the browser draws itself, top right of the section */
@supports selector(::scroll-button(*)) {
  .cx-row::scroll-button(*) {
    position: absolute; top: calc(var(--bolt-space-5) - var(--bolt-space-3)); width: 44px; height: 44px; border: 1px solid var(--cx-rule); border-radius: var(--bolt-radius-control);
    background: var(--cx-card); color: var(--cx-text); font: 400 18px/1 var(--cx-sans); cursor: pointer;
    transition: transform var(--bolt-motion-press) var(--bolt-ease-out), opacity var(--bolt-motion-fade) var(--bolt-ease-out);
  }
  .cx-row::scroll-button(*):active { transform: scale(0.97); }
  .cx-row::scroll-button(*):disabled { opacity: 0.4; cursor: default; }
  .cx-row::scroll-button(left) { content: "\2190" / "Previous"; right: calc(var(--cx-gutter) + 52px); }
  .cx-row::scroll-button(right) { content: "\2192" / "Next"; right: var(--cx-gutter); }
  @media (max-width: 999px) { .cx-row::scroll-button(*) { display: none; } }
}

/* ---------- Fold: whatever is secondary sits behind one tap, still in the page ---------- */
.cx-fold { border-top: 1px solid var(--cx-rule); border-bottom: 1px solid var(--cx-rule); }
.cx-fold > summary {
  display: flex; align-items: center; gap: var(--bolt-space-2); min-height: 44px; list-style: none; cursor: pointer; user-select: none;
  font: 500 13px/1 var(--cx-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--cx-muted);
}
.cx-fold > summary::-webkit-details-marker { display: none; }
.cx-fold > summary::after { content: "+"; font: 400 18px/1 var(--cx-sans); transition: transform var(--bolt-motion-snappy) var(--bolt-ease-out); }
.cx-fold[open] > summary::after { transform: rotate(45deg); }
.cx-fold[open] > summary { margin-bottom: var(--bolt-space-4); }
.cx-fold > summary:active { transform: scale(var(--bolt-press-scale)); transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) { .cx-fold > summary:hover { color: var(--cx-text); } }

/* ---------- Video: one 16:9 frame (a placeholder until the video exists) ---------- */
.cx-video { margin: 0; }
.cx-video-frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--cx-rule); border-radius: var(--bolt-radius-card); background: var(--cx-card); box-shadow: var(--cx-shadow); }
.cx-video-frame > img, .cx-video-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-video-frame.cx-soon > img { opacity: 0.35; object-position: top left; }
.cx-play { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--bolt-radius-pill); background: var(--cx-accent); color: var(--cx-on-accent); box-shadow: var(--cx-shadow-button); }
.cx-play svg { width: 28px; height: 28px; margin-left: 4px; }
.cx-video figcaption { margin-top: var(--bolt-space-3); font: 500 13px/1.5 var(--cx-mono); color: var(--cx-muted); }
@media (max-width: 600px) {
  .cx-video-frame { border-radius: var(--bolt-radius-control); }
  .cx-play { width: 56px; height: 56px; }
  .cx-play svg { width: 22px; height: 22px; }
}

/* ---------- Footer: one ruled line, then the fold ---------- */
.cx-ft { margin-top: var(--bolt-space-7); padding-bottom: var(--bolt-space-2); }
.cx-ft-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--bolt-space-5); padding: var(--bolt-space-2) 0; border-top: 1px solid var(--cx-rule); border-bottom: 1px solid var(--cx-rule); font: 500 13px/1.6 var(--cx-mono); color: var(--cx-muted); }
.cx-ft-line p { margin: 0; }
.cx-ft-line a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cx-muted); text-decoration: none; }
.cx-ft-line a:active { transform: scale(var(--bolt-press-scale)); }
@media (hover: hover) and (pointer: fine) { .cx-ft-line a:hover { color: var(--cx-text); } }
.cx-ft .cx-fold { border-top: 0; }
@media (max-width: 600px) {
  .cx-ft { margin-top: var(--bolt-space-5); }
  .cx-ft-line { padding: var(--bolt-space-1) 0; font-size: 12px; }
  .cx-ft-line a { min-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-hero > .cx-wrap > * { animation: none; }
  .cx-row { scroll-behavior: auto; }
  .cx-fold > summary::after { transition: none; }
}