/*
 * 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/office-reader/src/styles.css — the office-reader-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, never a literal. */

/* One card per file, stacked. */
.result-card + .result-card { margin-top: var(--demo-gap); }
.result-card[data-state="error"] { border-left: 3px solid var(--demo-accent); }

/* The tab panels. */
.demo-tabs [role="tabpanel"] { margin-top: var(--fw-space-3); }

/* The reading view scrolls inside its box; images never widen the card. */
.reader { max-height: 24rem; overflow: auto; }
.reader img { max-width: 100%; height: auto; }
.reader table { max-width: 100%; overflow-wrap: anywhere; }

/* The loss ledger: codes in the mono face, the detail column takes the rest. */
.ledger caption { text-align: left; padding-bottom: var(--fw-space-1); }
.ledger td:first-child, .ledger th:first-child { width: 14rem; font-family: var(--demo-mono); font-size: var(--af-step--1); }

/* The copy feedback sits beside the buttons. */
.copy-feedback { align-self: center; }