/*
 * Copyright (c) 2026 AwaCloud SAS
 * Author: Matthieu Bouilloux
 * SPDX-License-Identifier: AGPL-3.0-only
 * Dual-licensed; see the NOTICE file for licensing and any additional terms.
 */

/* apps/demo/_layout/layout.css — the awa demos' shared page layout (awa-demos
 * amendment 2026-09-30, DL3). Plain file, no package. Linked by every demo
 * BEFORE its own sheet; copied into each dist/ by `site-kit app-dist`.
 * Seeded by W2a with the one rule set both demos already shared; W2 added the
 * banner and CTA styling, W4a the sub-identity tokens, W4 the applied
 * direction. Markup contract: README.md beside this file. */

/* W4 (awa-demos amendment 2026-10-07, DB2-DB3): the shared SHELL + COMPONENT
 * layer of the three demos, painted ONLY with the family tokens of
 * tokens.css (the derived copy of the awaforge layer, linked first). No
 * colour literal lives here (invariant I7: tokens.css is the only sheet that
 * may carry a hex); every alias below is a `var(--af-*)` / `var(--fw-*)`
 * reference, and every text/surface pair a rule paints is listed in
 * tests/demos-family-tokens.integration.test.ts `PAIRS`, which recomputes
 * WCAG AA (>= 4.5:1) in BOTH schemes from the token values. Direction and
 * microcopy: apps/demo/DESIGN.md (binding for the three demos). */

/* ── 1. Aliases — the demo-level semantic names ─────────────────────────────
 * One alias per role; a demo sheet reads these, never an --af-* directly.
 * --demo-border is the CONTROL boundary (inputs, buttons, the dropzone): it
 * aliases --af-muted, not --af-border, because the host's border token sits
 * under the 3:1 non-text floor (WCAG 1.4.11) against the page in both schemes
 * (dark navy-2 on #0f1720, light sky on white); --af-muted clears 7:1 in both.
 * --demo-rule is the decorative hairline (cards, table cells, the footer).
 * No danger/ok colour pair: the family palette carries no red or green
 * member, so error and success states are TEXT-ONLY (a sentence, a chip, a
 * left border in the accent) — the oracle decides, the alias layer complies. */
:root {
    --demo-bg: var(--af-bg);
    --demo-fg: var(--af-fg);
    --demo-muted: var(--af-muted);
    --demo-accent: var(--af-accent);
    --demo-link: var(--af-accent);
    --demo-surface: var(--af-surface);
    --demo-rule: var(--af-rule);
    --demo-border: var(--af-muted);
    --demo-chrome-bg: var(--af-chrome-bg);
    --demo-chrome-fg: var(--af-chrome-fg);
    --demo-chrome-muted: var(--af-chrome-muted);
    --demo-btn-bg: var(--af-hero-cta-bg);
    --demo-btn-fg: var(--af-hero-cta-fg);
    --demo-code-bg: var(--af-code-bg);
    --demo-code-fg: var(--af-code-fg);
    --demo-focus: var(--af-accent);
    --demo-sans: var(--af-sans);
    --demo-mono: var(--af-mono);
    --demo-measure: var(--af-measure-wide);
    --demo-radius: var(--fw-radius-lg);
    --demo-gap: var(--fw-space-4);
}

/* ── 2. Scheme — follow the host (OC-V9 a): dark by default, light by
 * preference. The ONLY color-scheme declaration under apps/demo/ (I7);
 * mirror of apps/awaforge/assets/styles.css F1. */
:root { color-scheme: dark; }
@media (prefers-color-scheme: light) {
    :root { color-scheme: light; }
}

/* ── 3. Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 400 var(--af-step-0)/1.55 var(--demo-sans);
    color: var(--demo-fg);
    background: var(--demo-bg);
}
h1 { font-size: var(--af-step-3); }
h2 { font-size: var(--af-step-2); }
h3 { font-size: var(--af-step-1); }
a { color: var(--demo-link); }
code, pre, kbd { font-family: var(--demo-mono); }
/* W0 F2 / BL-1670: a report or a Markdown source never pushes the page wider
 * than the viewport, in every demo. */
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
img, canvas, iframe { max-width: 100%; }

/* ── 4. Shell (README.md § HTML structure contract v2) ────────────────────── */
/* The chrome band: the family's header colour, the title, the tagline, the
 * three-tool nav and the (hidden until offered) install button. */
body > header {
    padding: var(--fw-space-4);
    background: var(--demo-chrome-bg);
    color: var(--demo-chrome-fg);
}
body > header > * {
    max-width: var(--demo-measure);
    margin-inline: auto;
}
header h1 { margin: 0; }
header p[data-testid="tagline"] {
    margin: var(--fw-space-2) auto 0;
    max-width: 60ch;
    color: var(--demo-chrome-muted);
}
/* Any link in the band is chrome-fg: the accent sits under AA on the light
 * chrome (3.23:1), chrome-fg clears it in both schemes. */
header a { color: var(--demo-chrome-fg); }
nav[data-testid="tools-nav"] { margin-top: var(--fw-space-4); }
nav[data-testid="tools-nav"] ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fw-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
nav[data-testid="tools-nav"] a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 var(--fw-space-3);
    border: 1px solid var(--demo-chrome-muted);
    border-radius: var(--demo-radius);
    color: var(--demo-chrome-fg);
    text-decoration: none;
}
nav[data-testid="tools-nav"] a[aria-current="page"] {
    background: var(--demo-btn-bg);
    border-color: transparent;
    color: var(--demo-btn-fg);
    font-weight: 600;
}
/* The install button: a secondary pill in the band. Its `hidden` attribute is
 * the UA's to honour — no rule here sets `display` on it (B1: no nag). */
button[data-testid="pwa-install"] {
    margin-top: var(--fw-space-3);
    min-height: 2.75rem;
    padding: 0 var(--fw-space-3);
    border: 1px solid var(--demo-chrome-muted);
    border-radius: var(--demo-radius);
    background: transparent;
    color: var(--demo-chrome-fg);
    font: inherit;
    cursor: pointer;
}

/* The "100 % local" banner + contextual CTA (D58; W2). W4 moves it onto the
 * tokens; the rows and the claim sentence are unchanged (I8). The brick CTA is
 * the secondary, integrator line (DB3): muted, one step down. */
#local {
    max-width: var(--demo-measure);
    margin: var(--fw-space-6) auto 0;
    padding: var(--fw-space-3) var(--fw-space-4);
    border-left: 3px solid var(--demo-accent);
    background: var(--demo-surface);
    color: var(--demo-fg);
}
#local p { margin: var(--fw-space-1) 0; }
#local p[data-testid="brick-cta"] { color: var(--demo-muted); font-size: var(--af-step--1); }
#local a { display: inline-block; min-height: 24px; line-height: 24px; }

main#app {
    max-width: var(--demo-measure);
    margin: var(--fw-space-6) auto;
    padding-inline: var(--fw-space-4);
    display: grid;
    gap: var(--demo-gap);
}
main#app > section {
    min-width: 0;   /* a grid item never widens the page by its min-content (W4 task 06) */
    padding: var(--fw-space-4);
    border: 1px solid var(--demo-rule);
    border-radius: var(--demo-radius);
    background: var(--demo-surface);
}
.demo-panel-title { margin: 0 0 var(--fw-space-3); font-size: var(--af-step-2); }

/* The technical line, quiet: `Ready.` plus the module count as data. */
pre#status {
    max-width: var(--demo-measure);
    margin: 0 auto var(--fw-space-6);
    padding-inline: var(--fw-space-4);
    font-size: var(--af-step--1);
    color: var(--demo-muted);
    background: transparent;
}

/* Appropriate Legal Notices footer (BL-1497, awa-demos W1). Only #legal,
 * #legal summary and the additional-terms block are ever selected (I1). */
#legal {
    max-width: var(--demo-measure);
    margin: var(--fw-space-8) auto 0;
    padding: var(--fw-space-4) var(--fw-space-4) var(--fw-space-8);
    border-top: 1px solid var(--demo-rule);
    color: var(--demo-muted);
    font-size: var(--af-step--1);
}
#legal summary { min-height: 24px; cursor: pointer; }
#legal [data-aln="additional-terms"] { white-space: pre-line; }

/* ── 5. Components (prefix demo-) — markup in DESIGN.md § Component inventory */
.demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 var(--fw-space-3);
    border: 1px solid var(--demo-border);
    border-radius: var(--fw-radius-md);
    background: var(--demo-surface);
    color: var(--demo-fg);
    font: inherit;
    cursor: pointer;
}
.demo-btn-primary {
    min-height: 2.75rem;
    border-color: transparent;
    background: var(--demo-btn-bg);
    color: var(--demo-btn-fg);
    font-weight: 600;
}
/* Opacity on a DISABLED control only — muted text is never a dimmer. */
.demo-btn:disabled { opacity: .55; cursor: not-allowed; }

.demo-field { display: grid; gap: var(--fw-space-1); }
.demo-field > span:first-child { color: var(--demo-muted); font-size: var(--af-step--1); }
select,
input:not([type=checkbox]):not([type=file]) {
    min-height: 2.25rem;
    padding-inline: var(--fw-space-2);
    border: 1px solid var(--demo-border);
    border-radius: var(--fw-radius-md);
    background: var(--demo-bg);
    color: var(--demo-fg);
    font: inherit;
}
input[type=checkbox] { width: 1.5rem; height: 1.5rem; margin: 0; }
.demo-check { display: flex; gap: var(--fw-space-2); align-items: center; min-height: 2rem; }
/* A checkbox is a flex item: never let a long label shrink it under the
 * 24 px floor (measured 20.5 px at 360 px, W4 task 06). */
.demo-check > input[type=checkbox] { flex: 0 0 1.5rem; }

/* File intake: a <label> wrapping a visually hidden input[type=file]. The
 * click, the keyboard (focus-within) and the OS drop all land on one target;
 * the picker is the dragging alternative (WCAG 2.5.7). */
.demo-dropzone {
    display: grid;
    gap: var(--fw-space-2);
    place-items: center;
    min-height: 7rem;
    padding: var(--fw-space-4);
    border: 2px dashed var(--demo-border);
    border-radius: var(--demo-radius);
    text-align: center;
    cursor: pointer;
}
.demo-dropzone:focus-within,
.demo-dropzone[data-dragover="true"] { border-color: var(--demo-accent); border-style: solid; }
.demo-dropzone .demo-link { color: var(--demo-link); text-decoration: underline; }
.demo-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* State chip: idle | working | done | error. Working shows a ring that spins
 * only when motion is welcome; a static dot otherwise. Done and error are
 * text-only (no red/green in the palette). */
.demo-state[data-state] {
    display: inline-flex;
    align-items: center;
    gap: var(--fw-space-2);
    min-height: 1.5rem;
    padding: 0 var(--fw-space-2);
    border: 1px solid var(--demo-rule);
    border-radius: var(--demo-radius);
    font-size: var(--af-step--1);
}
.demo-state[data-state="working"]::before {
    content: "";
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: var(--demo-accent);
}
@media (prefers-reduced-motion: no-preference) {
    .demo-state[data-state="working"]::before {
        background: transparent;
        border: 2px solid var(--demo-rule);
        border-top-color: var(--demo-accent);
        animation: demo-spin 0.9s linear infinite;
    }
    @keyframes demo-spin { to { transform: rotate(360deg); } }
}
.demo-state[data-state="done"] { font-weight: 600; }
.demo-state[data-state="error"] { font-weight: 600; border-color: var(--demo-accent); }

.demo-alert[role="alert"],
.demo-alert[data-kind] {
    margin: var(--fw-space-3) 0 0;
    padding: var(--fw-space-3) var(--fw-space-4);
    border-left: 3px solid var(--demo-accent);
    border-radius: 0 var(--fw-radius-md) var(--fw-radius-md) 0;
    background: var(--demo-bg);
    color: var(--demo-fg);
}
.demo-alert small { display: block; color: var(--demo-muted); font-family: var(--demo-mono); }
.demo-note { color: var(--demo-muted); font-size: var(--af-step--1); }

.demo-card {
    padding: var(--fw-space-4);
    border: 1px solid var(--demo-rule);
    border-radius: var(--demo-radius);
    background: var(--demo-bg);
}
.demo-card-title { margin: 0 0 var(--fw-space-2); font-size: var(--af-step-1); overflow-wrap: anywhere; }

.demo-kv {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) 2fr;
    gap: var(--fw-space-1) var(--fw-space-3);
    margin: 0;
}
.demo-kv dt { color: var(--demo-muted); }
.demo-kv dd { margin: 0; overflow-wrap: anywhere; }

.demo-tabs [role="tablist"] { display: flex; gap: var(--fw-space-1); flex-wrap: wrap; }
[role="tab"] { min-height: 2.25rem; }
[role="tab"][aria-selected="true"] {
    background: var(--demo-btn-bg);
    border-color: transparent;
    color: var(--demo-btn-fg);
}

.demo-pre-scroll {
    max-height: 24rem;
    overflow: auto;
    padding: var(--fw-space-3);
    border-radius: var(--fw-radius-md);
    background: var(--demo-code-bg);
    color: var(--demo-code-fg);
}
.demo-actions { display: flex; flex-wrap: wrap; gap: var(--fw-space-2); margin-top: var(--fw-space-3); }

.demo-table { border-collapse: collapse; width: 100%; }
.demo-table th,
.demo-table td {
    padding: var(--fw-space-1) var(--fw-space-2);
    border: 1px solid var(--demo-rule);
    text-align: left;
    vertical-align: top;
}

/* ── 6. Focus, motion, print, small screens ───────────────────────────────── */
:focus-visible { outline: 2px solid var(--demo-focus); outline-offset: 2px; }
/* The visually hidden file picker takes the keyboard focus; its ring is drawn on the dropzone that wraps it (2.4.7: a border colour change alone is not a ring). */
.demo-dropzone:has(input:focus-visible) { outline: 2px solid var(--demo-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
    header nav, aside#local, .demo-dropzone, button, pre#status { display: none; }
    main#app > section { border: 0; break-inside: avoid; }
}

@media (min-width: 40rem) {
    h1 { font-size: var(--af-step-4); }
    body > header { padding: var(--fw-space-6) var(--fw-space-4); }
    main#app > section { padding: var(--fw-space-6); }
}
@media (max-width: 40rem) {
    .demo-kv { grid-template-columns: 1fr; }
    .demo-actions > * { flex: 1 1 100%; }
}

/* ── 7. The UA `hidden` semantics, restored — LAST RULE ──────────────────────
 * `.demo-btn { display: inline-flex }` and `.demo-kv { display: grid }` would
 * otherwise outrank the UA's `[hidden] { display: none }` (measured in
 * Chromium, W4 task 06: the install button showed on every page). Same
 * specificity as the component classes, later in source, no !important;
 * the oracle pins it as the sheet's last rule. */
[hidden] { display: none; }