/* Stillhaven — the live demo recorder on /features/record.
 *
 * A COPY of the console recorder's styles (console/public/assets/css/app.css, the "/record: the
 * recorder" block, copied 2026-10-24), by owner decision: the demo shares nothing with the console
 * recorder. The first block re-creates the few console base styles the recorder leans on (fields,
 * buttons, muted text), scoped to .demo-rec so they cannot leak into the marketing site. The second
 * is the console block as it was. The last is the demo's own post-record screen. */

/* ---- Console base styles, scoped ----------------------------------------------------------- */
.demo-rec { --radius-box: 0; font-size: 16px; color: var(--ink, #1A1A1A); text-align: left; }
.demo-rec .muted { color: var(--gray, #888888); font-size: 13px; }
.demo-rec .field { display: block; margin: 0; }
.demo-rec .field > span { display: block; font-size: 13px; font-weight: 500; margin-bottom: 0.3rem; }
.demo-rec .field select,
.demo-rec .field input[type="email"] { width: 100%; padding: 0.5rem; border: 1px solid var(--n-300, #CCCCC4); border-radius: 0; font: inherit; background: #fff; color: var(--ink, #1A1A1A); }
.demo-rec .form-error { margin: 0 0 1rem; color: var(--clay-dark, #9E5A2D); font-size: 13px; }
.demo-rec .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 1.1rem; border-radius: 0; border: 1px solid transparent; font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; box-shadow: none; text-decoration: none; }
.demo-rec .btn-lg { padding: 0.85rem 1.5rem; font-size: 16px; }
.demo-rec .btn-sm { padding: 0.35rem 0.7rem; font-size: 13px; }
.demo-rec .btn-accent { background: var(--clay, #BE6E3A); color: #fff; }
.demo-rec .btn-accent:hover { background: var(--clay-dark, #9E5A2D); }
.demo-rec .btn-ghost { background: #fff; border-color: var(--n-300, #CCCCC4); color: var(--ink, #1A1A1A); }
.demo-rec .btn-ghost:hover { background: var(--n-100, #F1F1ED); }
.demo-rec .btn:disabled { opacity: 0.6; cursor: default; }

/* ---- The console recorder block, as copied --------------------------------------------------- */
.record-screen[hidden], .record [hidden] { display: none !important; }
.record-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.record-mode { display: grid; gap: 0.25rem; text-align: left; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-box); cursor: pointer; font: inherit; color: var(--ink); }
.record-mode:hover:not([disabled]) { border-color: var(--sage-400); }
.record-mode.is-selected { border-color: var(--sage-500); box-shadow: inset 0 0 0 1px var(--sage-500); }
.record-mode[disabled] { opacity: 0.55; cursor: not-allowed; }
.record-mode-title { font-weight: 600; }
.record-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.record-fields { display: grid; gap: 0.85rem; }
.record-preview-wrap { background: var(--sage-900); aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; position: relative; }
/* The blurred preview sits OVER the video rather than replacing it: a video that is display:none
   stops decoding in Safari, and the model then has no frame to segment (2026-10-01). */
canvas.record-preview { position: absolute; inset: 0; z-index: 1; transform: scaleX(-1) translateZ(0); }
video.record-preview { position: relative; z-index: 0; }
.record-preview { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.record-preview[hidden] { display: none; }
.demo-rec .field small.muted { font-weight: 400; font-size: 0.85rem; }
.record-preview-note { color: var(--sage-200); padding: 1rem; text-align: center; }
.record-limit { font-size: 0.9rem; }
.record-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }
.record-countdown { display: grid; place-items: center; gap: 1rem; min-height: 40vh; }
.record-count { font-size: clamp(64px, 18vw, 160px); font-weight: 700; line-height: 1; margin: 0; color: var(--sage-700); }
.record-bar { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-box); }
.record-dot { width: 12px; height: 12px; background: #a2402f; animation: record-pulse 1.2s ease-in-out infinite; }
@keyframes record-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.record-elapsed { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 1.1rem; }
.record-remaining { font-family: 'Space Mono', monospace; color: #a2402f; }
.record-bytes { font-family: 'Space Mono', monospace; font-size: 0.85rem; }
.record-spacer { flex: 1; }
.record-live-preview { width: 100%; max-width: 640px; margin-top: 1rem; background: var(--sage-900); }
.record-live-preview.is-mirrored { transform: scaleX(-1); }
/* The camera's place in the frame: a miniature with a button in each corner, the chosen one
   drawn in sage at the chosen size and shape, so the picker shows what the recording will do. */
.record-pip-label { display: block; font-weight: 500; margin-bottom: 0.4rem; }
.record-pip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: center; }
.record-pip-frame { position: relative; width: 160px; aspect-ratio: 16 / 9; background: var(--sage-900); border: 1px solid var(--n-300); }
.record-pip-corner { position: absolute; width: 34%; height: 50%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; }
.record-pip-corner.is-top-left { top: 0; left: 0; place-items: start; }
.record-pip-corner.is-top-right { top: 0; right: 0; place-items: start end; }
.record-pip-corner.is-bottom-left { bottom: 0; left: 0; place-items: end start; }
.record-pip-corner.is-bottom-right { bottom: 0; right: 0; place-items: end; }
.record-pip-corner span { display: block; width: 16px; height: 16px; margin: 6px; border: 2px solid var(--sage-300); border-radius: 50%; opacity: 0.6; transition: width 0.15s ease, height 0.15s ease; }
.record-pip-frame[data-size="large"] .record-pip-corner span { width: 24px; height: 24px; }
.record-pip-frame[data-shape="rounded"] .record-pip-corner span { border-radius: 4px; }
.record-pip-corner[aria-checked="true"] span { background: var(--sage-500); border-color: var(--sage-200); opacity: 1; }
.record-pip-corner:hover span { opacity: 1; }
.record-pip-corner:focus-visible { outline: 2px solid var(--sage-500); outline-offset: -2px; }
.record-pip-opts { display: grid; gap: 0.5rem; justify-items: start; }
.record-seg { display: inline-flex; border: 1px solid var(--n-300); background: #fff; }
.record-seg button { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.7rem; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.record-seg button + button { border-left: 1px solid var(--n-300); }
.record-seg button[aria-checked="true"] { background: var(--sage-500); color: #fff; }
.record-pip-compact .record-pip-frame { width: 96px; }
.record-pip-compact .record-pip-corner span { width: 10px; height: 10px; margin: 4px; }
.record-pip-compact .record-pip-frame[data-size="large"] .record-pip-corner span { width: 15px; height: 15px; }
.record-pip-compact .record-seg button { font-size: 0.8rem; padding: 0.25rem 0.55rem; }
.record-share { display: flex; gap: 0.5rem; }
.record-share input { flex: 1; min-width: 0; font-family: 'Space Mono', monospace; font-size: 0.85rem; }
.record-share-note { display: block; font-size: 0.85rem; margin-top: 0.3rem; }
.record-live-pip { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; margin-top: 0.75rem; }
.record-review { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
.record-playback { width: 100%; background: var(--sage-900); }
@media (max-width: 800px) { .record-modes, .record-setup, .record-review { grid-template-columns: 1fr; } }


/* ---- The demo's own pieces ----------------------------------------------------------------- */
.demo-rec { background: var(--paper, #FBFBF9); border: 1px solid var(--n-200, #E3E3DD); padding: 24px; }
.demo-rec .record-mode .muted { font-size: 14px; }
.demo-rec .record-nodisplay { margin: -0.5rem 0 1rem; font-size: 14px; }
.demo-rec .record-live-preview { max-width: 100%; }
.demo-rec .record-countdown { min-height: 320px; }
.demo-rec-noscript { padding: 16px; border: 1px solid var(--n-200, #E3E3DD); }
.demo-rec-summary { margin: 0.5rem 0 0; font-family: 'Space Mono', monospace; }
.demo-rec-next { display: grid; gap: 0.85rem; justify-items: start; }
.demo-rec-line { font-size: 17px; line-height: 1.55; margin: 0; }
.demo-rec-share { margin-top: 1rem; padding: 1rem; border: 1px solid var(--sage-300, #B7C691); background: var(--sage-50, #F5F7EF); }
.demo-rec-share p { margin: 0; }
.demo-rec-share .record-actions { margin-top: 0.75rem; }
.demo-rec-countnote { margin: 0; color: var(--n-700, #54544E); }
/* The download modal. Square, like every brand surface; the dialog carries its own dim. */
.demo-rec-modal { width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--n-200, #E3E3DD); border-radius: 0; background: var(--paper, #FBFBF9); color: var(--ink, #1A1A1A); }
.demo-rec-modal::backdrop { background: rgba(26, 26, 26, 0.55); }
.demo-rec-modal h2 { font-size: 22px; font-weight: 600; margin: 0 0 1rem; }
.demo-rec-email { position: relative; padding: 24px; display: grid; gap: 0.75rem; }
.demo-rec-email .field input[type="email"] { font-size: 16px; }
.demo-rec-modal-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--n-700, #54544E); cursor: pointer; }
.demo-rec-email .record-actions { margin-top: 0.25rem; }
.demo-rec-email-copy { margin: 0.5rem 0 0; line-height: 1.5; }
.demo-rec-email-note { margin: 0.5rem 0 0; font-size: 14px; color: var(--sage-700, #556231); }
.demo-rec-email-note.is-error { color: var(--clay-dark, #9E5A2D); }
.demo-rec-again { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--sage-700, #556231); text-decoration: underline; cursor: pointer; }
.demo-rec-cap { font-size: 14px; color: var(--n-700, #54544E); margin: 0 0 10px; }
@media (max-width: 560px) {
    .demo-rec { padding: 16px; }
    .demo-rec .record-bar { flex-wrap: wrap; }
}