/*
 * 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/md-to-html/src/styles.css — the md-to-html-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. ONE declared exception
 * below: the preview frame's white background. */

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

/* The file list: one row per file, name, size, Remove. */
.file-list { list-style: none; margin: var(--fw-space-3) 0 0; padding: 0; display: grid; gap: var(--fw-space-2); }
.file-row { display: flex; flex-wrap: wrap; gap: var(--fw-space-2) var(--fw-space-3); align-items: center; }
.file-name { font-weight: 600; overflow-wrap: anywhere; }

/* The options: two grouped fieldsets on the family tokens. */
fieldset { display: grid; gap: var(--fw-space-3); margin: 0 0 var(--fw-space-3); padding: var(--fw-space-3) var(--fw-space-4); border: 1px solid var(--demo-rule); border-radius: var(--fw-radius-md); }
legend { padding: 0 var(--fw-space-1); color: var(--demo-muted); font-size: var(--af-step--1); }

/* The notes about links and the warnings list. */
.result-notes { margin: var(--fw-space-3) 0; }
.result-notes summary { min-height: 24px; cursor: pointer; }
[data-testid="warnings"] li { overflow-wrap: anywhere; }

/* EXCEPTION (the only colour literal of the demos outside tokens.css,
 * declared here and pinned by b2c-shell.test.js): the framed document is
 * the module's own themed page, so the frame's canvas is white whatever the
 * host scheme — a token would tint the module's page with the demo's. The
 * frame is border-box so it never widens main#app (W3 § 5 item 1). */
iframe[data-testid="preview-frame"] { box-sizing: border-box; width: 100%; height: min(60vh, 40rem); border: 1px solid var(--demo-rule); background: #fff; }