/*-----------------------------------------------------------------------------
 * Project : Athena SimLab
 * File    : frontend/css/style.css
 * Stylesheet : base styles
 * Author  : Johann Sievering
 * AI Support : Claude AI
 * Date    : 2026-06-11 (start of the project)
 * Rev     : 2026-07-03 Full code review: bug fixes, hardening, cartridge headers (Claude AI)
 * Version : 0.9.0
 *-----------------------------------------------------------------------------
 * Global resets and base element rules on top of the token system.
 *---------------------------------------------------------------------------*/

/* =====================================================================
 * style.css — global resets + glue.
 *
 * Each page also links variables.css, app-shell.css, components.css.
 * This file is small on purpose: it only holds reset / base rules that
 * apply everywhere and don't fit in the more focused files.
 * ===================================================================== */

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

h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
    margin: 0;
}

ul, ol {
    padding: 0;
    list-style: none;
}

a {
    color: var(--blue);
    text-decoration: none;
}
a:hover { text-decoration: none; }

button {
    font-family: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Default font-size on the root so all rem-based tokens scale together. */
html {
    font-size: 16px;
}

/* ── Create: output-type selector + code artifact viewer ───────────── */
.type-select {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.type-select__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid var(--gray-200, #d7dde5);
    border-radius: var(--radius-md);
    background: var(--white, #fff);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.type-select__option:has(input:checked) {
    border-color: var(--blue);
    background: var(--blue-50);
    font-weight: 600;
}

.code-result { margin-top: var(--space-md); }
.code-result__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.code-result__title  { font-weight: 700; }
.code-result__spacer { flex: 1 1 auto; }
.code-result__frame {
    width: 100%;
    height: min(70vh, 560px);
    border: 1.5px solid var(--gray-300, #cbd5e1);
    border-radius: var(--radius-md);
    background: var(--white, #fff);
}
.code-result__source {
    margin-top: var(--space-sm);
    max-height: 40vh;
    overflow: auto;
    padding: var(--space-sm) var(--space-md);
    border: 1.5px solid var(--gray-300, #cbd5e1);
    border-radius: var(--radius-md);
    background: var(--gray-50, #f8fafc);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Refinement row under the generated artifact. */
.code-refine { margin-top: var(--space-sm); }
.code-refine__label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--font-size-sm);
    font-weight: 600;
}
.code-refine__row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.code-refine__input { flex: 1 1 16rem; }

/* ── Gallery: code-production cards + playable slideshow frame ─────── */
.gallery-bar__search { flex: 1 1 10rem; min-width: 8rem; }
.gallery-card__type {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    font-size: 64px;
    background: var(--blue-50, #eff6ff);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.proj-card__type {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 9vmin;
    background: var(--blue-50, #eff6ff);
}
.slideshow__frame {
    width: min(92vw, 1100px);
    height: min(78vh, 700px);
    border: 0;
    border-radius: var(--radius-md);
    background: #fff;
}

/* =====================================================================
 * DESKTOP LAYER (2026-08 — professional laptop/desktop interface,
 * design reference: the Matériel AV admin application)
 *
 * EVERYTHING here is gated behind ONE media query: min-width 1200px AND
 * a real mouse/trackpad (hover + fine pointer). Phones and tablets —
 * iPad Pro in landscape included — never match it, so the mobile and
 * tablet interfaces stay byte-for-byte identical (Johann's rule).
 *
 * What changes on a laptop/desktop:
 *   - the bottom tab bar gives way to a horizontal menu in the header
 *     (same six sections, built by AppFooter.buildDesktopNav);
 *   - light-gray canvas, wider centered column (~960px), airier cards;
 *   - Matériel-AV-scale page titles;
 *   - the Create page's seven prompt fields flow in two columns;
 *   - the "Plus" drawer opens as a centered dialog, not a bottom sheet;
 *   - a slim © + privacy page footer replaces the tab bar at the bottom.
 * ===================================================================== */

/* The desktop-only elements' base "hidden" rules live in app-shell.css
   (NOT here): AppFooter also runs on the admin pages, which load
   app-shell.css but not this file — the elements must default to
   hidden everywhere the component can mount. */

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {

    /* (the SHELL pieces of the desktop layer — header nav + dropdown,
       tab-bar hiding, © page footer — live in app-shell.css so the
       admin pages get them too; this block styles the participant
       CONTENT only) */

    /* ── Canvas: light-gray ground, wider centered column ─────────── */
    body.app { background: var(--gray-50); }
    .app-content {
        max-width: 960px;          /* Matériel AV proportions — prose stays readable */
        padding-top: calc(var(--header-height) + var(--space-lg));
        /* clear the FIXED page footer (≈44px bar) at the bottom */
        padding-bottom: calc(44px + var(--space-lg));
    }

    /* ── Typography: Matériel-AV-scale titles ─────────────────────── */
    .page-head { margin: var(--space-lg) 0; }
    .page-head__title    { font-size: 2.1rem; letter-spacing: -0.5px; }
    .page-head__subtitle { font-size: var(--font-size-base); }
    .hero__title         { font-size: 2.75rem; }

    /* ── Cards: a touch more air ──────────────────────────────────── */
    .panel { padding: var(--space-xl); }

    /* ── Create page: the seven prompt fields in two columns
          (the final E field spans the full width) ──────────────────── */
    .cmp-fields {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md) var(--space-lg);
    }
    .cmp-fields > .cmp-field:last-child { grid-column: 1 / -1; }

    /* The home page's "Plus" CARD still opens the full drawer — that
       one becomes a centered dialog rather than a phone bottom sheet. */
    .more-menu { align-items: center; }
    .more-menu__sheet {
        max-width: 560px;
        border-radius: var(--radius-lg);
        padding: var(--space-lg);
    }

}