/* Ballistic Labs — shared design system + demo-page styles.
 *
 * Both the marketing landing (index.html) and the live demo (demo.html)
 * load this file.  Marketing-only components live in marketing.css.
 *
 * Design system principles:
 *   - Dark base, warm cream typography (vs. cold gray) for premium feel
 *   - Single warm-copper accent (#d97757) — refined-tactical vs. tacticool
 *   - Serif display headings ("serif" class) over sans body
 *   - Generous whitespace; sharp grid; minimal animation
 */

/* ── Design tokens ───────────────────────────────────────────────── */
:root {
    /* Surfaces */
    --bg:           #0a0b0d;        /* page background, near-black */
    --bg-elevated:  #14161a;        /* hero, sticky nav */
    --bg-card:      #1a1d24;        /* cards, panels */
    --bg-card-hi:   #20242c;        /* hover state on cards */
    --panel:        #161b22;        /* legacy demo panel — kept for slider box */

    /* Borders */
    --border:       #2a2d34;
    --border-soft:  rgba(244, 237, 224, 0.08);
    --divider:      rgba(244, 237, 224, 0.06);

    /* Type */
    --text:         #e8e1d3;        /* warm cream (vs. cold gray) */
    --text-strong:  #f4ede0;
    --muted:        #94908a;
    --muted-soft:   #6b6962;

    /* Accent */
    --accent:       #d97757;        /* warm copper */
    --accent-hover: #c66645;
    --accent-soft:  rgba(217, 119, 87, 0.12);
    --accent-line:  rgba(217, 119, 87, 0.32);

    /* Semantic */
    --warn:         #e0a458;
    --success:      #6db26d;
    --danger:       #d96565;

    /* Type stacks — system stack, no external fonts (CSP-clean, fast) */
    --font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-serif: ui-serif, "Charter", "Iowan Old Style", "Palatino Linotype",
                  Georgia, "Times New Roman", serif;
    --font-mono:  ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Layout */
    --max-w:        1200px;
    --max-w-narrow: 760px;
    --radius-sm:    6px;
    --radius:       10px;
    --radius-lg:    16px;

    /* Motion */
    --ease:    cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base reset ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior: contain;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Smooth-scroll for in-page anchors */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Serif accent class */
.serif {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* ── Demo page (legacy layout, refreshed colors) ─────────────────── */
body.demo-page {
    background:
        radial-gradient(ellipse at top, rgba(217, 119, 87, 0.04) 0%, transparent 60%),
        var(--bg);
}

.demo-page-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 24px 16px max(24px, env(safe-area-inset-bottom, 0));
}

.demo-header {
    margin: 24px 0 28px;
    max-width: 720px;
}
.demo-header .eyebrow {
    color: var(--accent);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 12px;
}
.demo-header h1 {
    margin: 0 0 14px;
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    color: var(--text-strong);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.demo-header .hint {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Demo layout (device + sliders) — kept from previous design ──── */
.demo-layout {
    display: grid;
    grid-template-columns: auto minmax(280px, 360px);
    gap: 28px;
    justify-content: center;
    align-items: start;
    margin-top: 12px;
}

.device {
    position: relative;
    /* Height-only sizing — width derived from aspect-ratio.  Avoids a
       browser quirk where setting BOTH explicit width AND height alongside
       aspect-ratio lets the canvas (sized in % of parent) overflow the
       parent at zoom levels where sub-pixel rounding shifts the actual
       rendered dimensions.  With only height set, the parent's reported
       width is strictly proportional at any zoom level.
       1100 CSS px tall ⇒ ~547 CSS px wide ⇒ canvas (58.52% of width)
       lands at ~320 CSS px — a 1:1 match to the firmware's native 320-px
       frame, which is the sharpest possible scale. */
    height: 1100px;
    aspect-ratio: 538 / 1082;
    /* Hard clip absolutely-positioned children to the device bounds.  If
       any zoom-level layout quirk ever makes the canvas extend beyond
       the chassis, the overflow is hidden rather than visibly stretching. */
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

/* Belt-and-suspenders: canvas can never exceed the device box, no matter
   what percentage-resolution oddity occurs at high zoom levels. */
.device #screen,
.device .overlay {
    max-width:  100%;
    max-height: 100%;
}

#screen {
    position: absolute;
    /* Internal canvas is supersampled to ≥ 1600 px wide by app.js, then
       browser-downscales bilinearly to the screen rect — gives crisp
       text at any display size without pixelated downscale artifacts. */
    image-rendering: auto;
    background: #000;
}

.btn-overlay {
    position: absolute;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 80ms;
    -webkit-tap-highlight-color: transparent;
}
.btn-overlay:hover  { background: rgba(255, 255, 255, 0.05); }
.btn-overlay:active { background: rgba(217, 119, 87, 0.18); }
/* All seven buttons (d-pad + BACK + CAPTURE) inherit the same
   transparent / circular style above — the MK2 device image already
   shows the physical buttons in the right places, so the overlays just
   need invisible hit-boxes that light up on click. */

.overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: var(--accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 4px;
    transition: opacity 0.3s;
    text-align: center;
    padding: 8px;
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    pointer-events: none;
}
.overlay.hidden { opacity: 0; }
.sleep-overlay  { font-size: clamp(1rem, 3vw, 1.5rem); }
.sleep-overlay .sleep-hint { font-size: 0.78rem; color: var(--muted); }

/* ── Calibration mode (only when ?calibrate in URL) ──────────────── */
.calibrate-panel {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 320px;
    max-height: 70vh;
    overflow: auto;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 12px;
    font: 12px/1.35 var(--font-mono);
    color: var(--text);
    z-index: 100;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.calibrate-panel.hidden { display: none; }
.calibrate-panel h3 { margin: 0 0 8px; color: var(--accent); font-size: 13px; }
.calibrate-panel pre {
    background: var(--bg); padding: 8px; border-radius: 4px;
    overflow-x: auto; margin: 8px 0; white-space: pre;
}
.calibrate-panel button {
    background: var(--accent); color: var(--bg); border: 0; padding: 6px 12px;
    border-radius: 4px; cursor: pointer; margin-right: 6px;
}
.calibrate-handle {
    position: absolute;
    border: 2px dashed var(--accent);
    background: rgba(217, 119, 87, 0.12);
    cursor: move;
    z-index: 10;
}
.calibrate-handle .label {
    position: absolute;
    top: -22px; left: 0;
    background: var(--accent); color: var(--bg);
    font: 11px var(--font-mono);
    padding: 2px 6px; border-radius: 2px;
    white-space: nowrap;
    pointer-events: none;
}
.calibrate-handle.screen { border-color: var(--warn); background: rgba(224, 164, 88, 0.12); }
.calibrate-handle.screen .label { background: var(--warn); }

/* ── Sensor sliders panel ────────────────────────────────────────── */
.sliders {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    max-height: 95vh;
    overflow-y: auto;
}
.sliders h2 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: var(--text-strong);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.sliders .muted {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0 0 4px;
}
.slider-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 24px;
    margin-top: 14px;
}
.slider-row label {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: var(--muted);
    gap: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.slider-row input[type=range] {
    width: 100%;
    accent-color: var(--accent);
    height: 24px;
}
.slider-row output {
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-transform: none;
    font-family: var(--font-mono);
}

/* ── Demo page footer ────────────────────────────────────────────── */
.demo-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--divider);
    text-align: center;
}
.demo-footer .muted {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0 0 4px;
}
.demo-footer .muted-small {
    color: var(--muted-soft);
    font-size: 0.8rem;
    margin: 0;
}
.demo-footer a {
    color: var(--accent);
    text-decoration: none;
    transition: color 120ms;
}
.demo-footer a:hover { color: var(--accent-hover); }

/* ── Site nav (shared between landing + demo) ────────────────────── */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 11, 13, 0.85);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--border-soft);
}
.site-nav-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-strong);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.brand-mark {
    width: 26px;
    height: 26px;
    color: var(--accent);
    flex-shrink: 0;
}
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.05; }
.brand-mfg {
    font-size: 0.95rem;
    font-weight: 600;
}
.site-nav-links {
    display: inline-flex;
    align-items: center;
    gap: 22px;
}
.site-nav-links a {
    color: var(--muted);
    font-size: 0.92rem;
    transition: color 120ms;
}
.site-nav-links a:hover { color: var(--text-strong); }
.site-nav-links .nav-cta {
    color: var(--text-strong);
    background: var(--accent);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: background-color 140ms;
    font-weight: 600;
}
.site-nav-links .nav-cta:hover { background: var(--accent-hover); color: var(--text-strong); }

.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: var(--text);
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    gap: 4px;
}
.nav-toggle span {
    width: 22px; height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 200ms var(--ease), opacity 200ms;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Compact variant on demo page */
.site-nav-compact .site-nav-inner { padding: 10px 22px; }

/* ── Buttons (shared, used on both pages) ────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 140ms, color 140ms, border-color 140ms, transform 80ms;
    text-decoration: none;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--accent);
    color: var(--text-strong);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost {
    background: transparent;
    color: var(--text-strong);
    border-color: var(--border);
}
.btn-ghost:hover {
    border-color: var(--text-strong);
    background: rgba(244, 237, 224, 0.04);
}
.btn-block {
    display: flex;
    width: 100%;
    padding: 14px 22px;
}

/* Eyebrow label (small uppercase tag above section headings) */
.eyebrow {
    color: var(--accent);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 14px;
}

/* ── Short viewport (e.g. 1080p laptops) — compact header so the
       device gets the vertical real estate it needs to render large. */
@media (min-width: 861px) and (max-height: 900px) {
    .demo-page-inner { padding: 12px 16px; }
    .demo-header     { margin: 8px 0 14px; }
    .demo-header h1  { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0 0 6px; }
    .demo-header .eyebrow { font-size: 0.72rem; margin: 0 0 6px; }
    .demo-header .hint    { font-size: 0.85rem; line-height: 1.5; }
    .demo-layout     { margin-top: 0; gap: 18px; }
}

/* ── Mobile / narrow viewport tweaks ─────────────────────────────── */
@media (max-width: 860px) {
    .demo-layout {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }
    .device {
        height: auto;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
    }
    .sliders {
        max-height: none;
        overflow: visible;
    }
    .site-nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
        padding: 8px 0;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: transform 200ms var(--ease), opacity 200ms;
    }
    .site-nav-links.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .site-nav-links a {
        padding: 12px 22px;
        border-bottom: 1px solid var(--divider);
    }
    .site-nav-links .nav-cta {
        margin: 8px 22px;
        text-align: center;
    }
    .nav-toggle { display: inline-flex; }
}
@media (max-width: 600px) {
    .demo-page-inner { padding: 12px 8px; }
    .slider-row { gap: 10px 14px; }
    .sliders { padding: 14px 14px; }
}
@media (orientation: landscape) and (max-height: 480px) {
    .site-nav { display: none; }
    .demo-header, .demo-footer { display: none; }
    .demo-layout { grid-template-columns: auto 1fr; gap: 12px; }
    .device { height: 92vh; }
    .sliders { max-height: 92vh; font-size: 0.75rem; padding: 10px 12px; }
}