/*
 * 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.
 */

/* pades-demo — the pades-specific rules only (awa-demos W4, DESIGN.md).
 * The shell, the components and every colour come from ../../_layout/
 * (tokens.css + layout.css, linked first); this sheet paints with the
 * --demo-* / --af-* aliases and never with a literal. */

/* A flow chip is invisible while idle and empty; a hidden alert stays hidden. */
.demo-state[data-state="idle"]:empty { display: none; }
#app .hidden { display: none; }

/* The sign panel: the two option controls side by side when room allows. */
.sign-options { display: flex; flex-wrap: wrap; gap: var(--fw-space-3) var(--fw-space-6); align-items: end; margin-top: var(--fw-space-3); }
.sign-input { margin: var(--fw-space-2) 0 0; }

/* The verification rows: key, value, then the note under the value — the
 * column placement only where the grid HAS two columns (>= 40rem); under
 * that, an explicit `grid-column: 2` would add an implicit track and push
 * the page 50 px wider than a 360 px viewport (measured, W4 task 06). */
.report-rows dd + dd { color: var(--demo-muted); font-size: var(--af-step--1); }
@media (min-width: 40rem) { .report-rows dd + dd { grid-column: 2; } }
.verify-json { margin-top: var(--fw-space-3); }
.verify-json summary { min-height: 24px; cursor: pointer; }

/* The drawn page: paper is white in both schemes, the mark is the family
 * sky on navy (an AA pair of the host layer); geometry stays inline. */
#preview [data-testid="preview-doc"], #preview [data-testid="preview-page"] { max-width: 100%; overflow-wrap: anywhere; }
.preview-page-box { position: relative; margin: var(--fw-space-3) 0; background: var(--af-hero-fg); color: var(--af-hero-cta-fg); border: 1px solid var(--demo-border); }
.preview-page-box:empty { display: none; }
.preview-mark { position: absolute; overflow: hidden; border: 1px solid var(--af-hero-cta-fg); background: var(--af-hero-cta-bg); color: var(--af-hero-cta-fg); }
.preview-mark p { margin: 2px 4px; line-height: 1.2; }
.preview-unstamped { margin: var(--fw-space-2); font-size: var(--af-step--1); }
.demo-state[data-state="shown"] { font-weight: 600; }