/* Blue Volley Video pages: shared layout.
   Colours, materials and fonts come from tokens/tokens.css. Every Volley page
   (templates/volley-*.html and product-volley*.html) links this file through the
   "volley-head" partial in templates/volley-partials.html. */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--vy-font-ui);
    background: var(--vy-mat-leather-bg);
    color: var(--vy-color-cream);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--vy-shadow-vignette);
    line-height: 1.6;
    overflow-wrap: break-word;
}

a { color: var(--vy-color-stitch); }
a:focus-visible,
.platform-radio:focus-visible + .platform-label {
    outline: 2px solid var(--vy-color-stitch);
    outline-offset: 3px;
}

/* Light bar back to the corporate site (one per page). */
.utility-bar {
    background: #ffffff;
    padding: 0.5rem 2rem;
    border-bottom: 1px solid #e0e0e0;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
}
.utility-bar a {
    color: #4a5568;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s;
}
.utility-bar a:hover { color: #000; }

/* Chrome navigation bar */
.vy-nav {
    background: var(--vy-mat-chrome);
    padding: 1rem 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--vy-mat-chrome-border);
    box-shadow: var(--vy-shadow-drop);
}
.vy-nav a {
    color: #1D140E;
    text-decoration: none;
    font-weight: 600;
}
.vy-nav .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--vy-font-mono);
    font-weight: 900;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.vy-nav .brand img { width: 32px; height: 32px; flex: none; }
.vy-nav .links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
/* Current page: underlined in the same dark ink, readable on every band of the chrome. */
.vy-nav .links a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

h1, h2 {
    font-family: var(--vy-font-mono);
    color: var(--vy-color-stitch);
    line-height: 1.25;
}
h3 { color: var(--vy-color-cream); margin-top: 1.75rem; }
ul { padding-left: 1.5rem; color: var(--vy-color-muted); }
li { margin-bottom: 0.5rem; }
strong { color: var(--vy-color-cream); }
.muted { color: var(--vy-color-muted); }
code {
    font-family: var(--vy-font-mono);
    font-size: 0.9em;
    background: rgba(0, 0, 0, 0.35);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}
pre {
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    border: 1px solid var(--vy-mat-chrome-border);
    color: var(--vy-color-cream);
    font-family: var(--vy-font-mono);
    overflow-x: auto;
    border-radius: 4px;
}

.hero { text-align: center; margin-bottom: 4rem; }
.hero h1 {
    font-size: clamp(2rem, 7vw, 3.5rem);
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vy-color-cream);
}
.hero p {
    font-size: 1.25rem;
    color: var(--vy-color-muted);
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* Buttons: a solid brass border, painted with the brass gradient via border-image. */
.vy-button,
.vy-button-large {
    display: inline-block;
    max-width: 100%;
    background: var(--vy-mat-leather-active);
    color: var(--vy-color-cream);
    padding: 1rem 2rem;
    border: 2px solid var(--vy-color-brass);
    border-image: var(--vy-mat-brass) 1;
    font-family: var(--vy-font-mono);
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    box-shadow: var(--vy-shadow-drop);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}
.vy-button-large { padding: 1.25rem 3rem; font-size: 1.25rem; }
.vy-button:active,
.vy-button-large:active { transform: translateY(2px); box-shadow: var(--vy-shadow-inset); }
.vy-button-disabled,
.vy-button-disabled:active {
    background: var(--vy-mat-leather-panel);
    border-image: none;
    border-color: var(--vy-mat-chrome-border);
    color: var(--vy-color-muted);
    cursor: default;
    transform: none;
    box-shadow: var(--vy-shadow-drop);
}

.vy-panel {
    background: var(--vy-mat-leather-panel);
    border: 1px solid var(--vy-mat-chrome-border);
    padding: 2rem;
    box-shadow: var(--vy-shadow-drop);
    margin-bottom: 2rem;
    border-radius: 4px;
}
.vy-panel > h1:first-child,
.vy-panel > h2:first-child { margin-top: 0; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
}

/* Callouts (AI help boxes, notes) */
.vy-callout {
    background: var(--vy-color-brass-tint);
    border-left: 3px solid var(--vy-color-brass);
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 4px;
}
.vy-callout h4 { margin: 0 0 0.5rem; color: var(--vy-color-brass); }
.vy-callout p { margin: 0; font-size: 0.9rem; color: var(--vy-color-cream); }
.vy-callout--stitch { background: var(--vy-color-stitch-tint); border-left-color: var(--vy-color-stitch); }
.vy-callout--stitch h4 { color: var(--vy-color-stitch); }
/* A note that must not be skimmed past: wider border, normal body size. */
.vy-callout--strong { border-left-width: 5px; }
.vy-callout--strong p { font-size: 1rem; }
.vy-callout--strong ul, .vy-callout--strong ol { margin: 0.5rem 0 0; color: var(--vy-color-cream); font-size: 0.95rem; }
/* Data loss: the same, in the warning colour. */
.vy-callout--warn {
    background: var(--vy-color-danger-tint);
    border-left: 5px solid var(--vy-color-danger);
}
.vy-callout--warn h4 { color: var(--vy-color-danger); font-size: 1.05rem; }
.vy-callout--warn p { font-size: 1rem; }
.vy-callout--warn ul, .vy-callout--warn ol { margin: 0.5rem 0 0; color: var(--vy-color-cream); font-size: 0.95rem; }
.vy-callout .ask { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.vy-callout .ask a { font-weight: bold; font-size: 0.9rem; text-decoration: none; }

footer {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--vy-color-muted);
    font-family: var(--vy-font-mono);
    font-size: 0.875rem;
    border-top: 1px solid var(--vy-mat-chrome-border);
    background: rgba(0, 0, 0, 0.5);
}
footer .links {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 2rem;
}
footer a { color: var(--vy-color-stitch); text-decoration: none; }

/* ---- Downloads page: two-step app / platform selector ---- */
.step-title {
    font-family: var(--vy-font-mono);
    color: var(--vy-color-cream);
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
.selector-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}
/* Visually hidden but still focusable, so the selector works from the keyboard. */
.platform-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.platform-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--vy-mat-leather-bg);
    border: 2px solid var(--vy-mat-chrome-border);
    border-radius: 8px;
    cursor: pointer;
    width: 140px;
    transition: all 0.2s ease;
    text-align: center;
}
.platform-label:hover { border-color: var(--vy-color-stitch); background: var(--vy-color-stitch-tint); }
.platform-radio:checked + .platform-label {
    border-color: var(--vy-color-brass);
    background: var(--vy-color-brass-tint);
    box-shadow: 0 0 15px rgba(227, 185, 94, 0.2);
}
.platform-radio:checked + .platform-label .platform-icon { color: var(--vy-color-brass); }
.platform-radio:checked + .platform-label .platform-name { color: var(--vy-color-cream); font-weight: bold; }
.platform-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--vy-color-muted);
    font-family: var(--vy-font-mono);
}
.platform-name {
    font-size: 0.9rem;
    color: var(--vy-color-muted);
    text-transform: uppercase;
    font-family: var(--vy-font-mono);
}
.platform-type { font-size: 0.7rem; color: var(--vy-color-muted); opacity: 0.7; margin-top: 0.25rem; }
/* A platform that is not available yet: shown, but not selectable. */
.platform-label.is-soon { cursor: default; opacity: 0.6; border-style: dashed; }
.platform-label.is-soon:hover { border-color: var(--vy-mat-chrome-border); background: var(--vy-mat-leather-bg); }
.platform-badge {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    font-family: var(--vy-font-mono);
    text-transform: uppercase;
    color: var(--vy-color-brass);
}

.vy-step2,
.platform-content { display: none; }
.vy-step2 {
    margin-top: 2rem;
    border-top: 1px solid var(--vy-mat-chrome-border);
    padding-top: 2rem;
}
.vy-step2.active,
.platform-content.active { display: block; animation: fadeIn 0.3s ease; }
/* The same show/hide without JavaScript, driven by the checked radios. */
.vy-downloads:has(#app-recorder:checked) #step2-recorder,
.vy-downloads:has(#app-editor:checked) #step2-desktop,
.vy-downloads:has(#app-recorder:checked):has(#plat-android:checked) #content-android,
.vy-downloads:has(#app-editor:checked):has(#plat-mac:checked) #content-mac,
.vy-downloads:has(#app-editor:checked):has(#plat-windows:checked) #content-windows,
.vy-downloads:has(#app-editor:checked):has(#plat-linux:checked) #content-linux { display: block; }
.platform-content > section:first-child {
    margin-top: 2rem;
    border-top: 1px solid var(--vy-mat-chrome-border);
    padding-top: 3rem;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.download-button-container {
    text-align: center;
    margin: 2rem 0 3rem;
    padding: 1rem 0 2rem;
    border-bottom: 1px solid var(--vy-mat-chrome-border);
}
.download-meta { margin-top: 1rem; color: var(--vy-color-muted); font-size: 0.9rem; }
/* Checksum: long, and it must stay readable and selectable on a phone. */
.download-meta .sha {
    font-size: 0.78rem;
    word-break: break-all;
    color: var(--vy-color-cream);
    user-select: all;
}

@media (prefers-reduced-motion: reduce) {
    .vy-step2.active, .platform-content.active { animation: none; }
}

/* Phones: 16px gutters, smaller type, nothing wider than the screen. */
@media (max-width: 600px) {
    .utility-bar, .vy-nav { padding-left: 1rem; padding-right: 1rem; }
    .vy-nav .brand { font-size: 1rem; letter-spacing: 0.06em; }
    main { padding: 2rem 1rem; }
    .vy-panel { padding: 1.25rem; }
    .vy-panel h1 { font-size: 1.5rem; }
    .hero { margin-bottom: 2.5rem; }
    .hero p { font-size: 1.05rem; }
    .vy-button-large { padding: 1rem 1.5rem; font-size: 1rem; }
    .platform-label { width: 120px; padding: 1rem 0.5rem; }
    /* Commands stay readable and copyable instead of scrolling sideways. */
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}