/*
 * 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/services/writer/src/styles/writer.css — the writer component sheet.
 * Painted with the awaforge tokens only (tokens.css, linked first, or the
 * host site's own awaforge layer). Every rule is scoped under `.awr`, so the
 * sheet can be linked into any page without touching the host's styles.
 * The formatting surface (menu bar, toolbar, side panel, palette, status bar)
 * is section 5; pages come later (design § 3.4). */

/* ── 1. Aliases ────────────────────────────────────────────────────────────── */
.awr {
    --awr-bg: var(--af-bg);
    --awr-fg: var(--af-fg);
    --awr-surface: var(--af-surface);
    --awr-rule: var(--af-rule);
    --awr-focus: var(--af-accent);
}

/* ── 2. Frame: menu bar, toolbar, then the text beside the side panel, then the status bar ── */
.awr {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    color: var(--awr-fg);
    background: var(--awr-bg);
}
.awr-body { display: flex; flex: 1 1 auto; min-height: 0; }
.awr-doc { flex: 1 1 auto; min-width: 0; overflow: auto; }
.awr *, .awr *::before, .awr *::after { box-sizing: inherit; }
.awr :focus-visible, .awr [data-keyfocus]:focus { outline: 2px solid var(--awr-focus); outline-offset: 2px; }

/* ── 3. The editing surface (one contenteditable, rendered from the model) ── */
.awr-surface {
    min-height: 100%;
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--fw-space-6) var(--fw-space-4);
    font: 400 var(--af-step-0)/1.5 var(--af-sans);
    white-space: pre-wrap;           /* spaces and tabs as typed */
    overflow-wrap: anywhere;
    caret-color: var(--awr-focus);
}
.awr-surface:focus { outline: none; }
.awr-surface:focus-visible { outline: 2px solid var(--awr-focus); outline-offset: -2px; }
.awr-p { margin: 0 0 var(--fw-space-2); }
.awr-p[data-align="center"] { text-align: center; }
.awr-p[data-align="right"] { text-align: right; }
.awr-p[data-align="both"] { text-align: justify; }
.awr-h { font-weight: 700; margin-top: var(--fw-space-4); }
/* Drawn with its document's styles: their weight and line spacing, not the stylesheet's (single when none). */
.awr-p.awr-styled { font-weight: 400; line-height: normal; }
.awr-h1 { font-size: var(--af-step-2); }
.awr-h2 { font-size: var(--af-step-1); }
.awr-b { font-weight: 700; }
.awr-i { font-style: italic; }
.awr-u { text-decoration: underline; }
.awr-s { text-decoration: line-through; }
.awr-u.awr-s { text-decoration: underline line-through; }
.awr-sub { vertical-align: sub; font-size: 0.8em; }
.awr-sup { vertical-align: super; font-size: 0.8em; }
.awr-link { color: var(--af-accent); text-decoration: underline; }
.awr-tab { display: inline-block; min-width: 2em; }
/* Islands: one unit, shown, kept, never entered (design § 2.5.2). */
.awr-island, .awr-image, .awr-break {
    padding: 0 0.25em;
    font-size: 0.85em;
    color: var(--af-muted);
    background: var(--af-code-bg);
    border: 1px solid var(--af-rule);
    border-radius: var(--fw-radius-md);
    user-select: all;
}
/* An island showing what it keeps (design § 2.5.3): its text as text, read-only, a quiet mark that it is kept. */
/* A field's result, a table of contents, a content control: text as written, a faint tint on hover or focus only. */
.awr-island.awr-island-shown { padding: 0; font-size: inherit; color: inherit; background: none; border: 0; border-radius: 0; }
.awr-island.awr-island-shown:hover, .awr-island.awr-island-shown:focus-visible { background: var(--af-code-bg); }
/* A text box: a frame in its line (an anchored one on a line of its own), its own editable view inside. */
.awr-island.awr-box {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 2px;
    padding: 2px 6px;
    font-size: inherit;
    color: inherit;
    text-indent: 0;
    vertical-align: top;
    white-space: normal;
    background: none;
    border: 1px solid var(--awr-rule);
    border-radius: 2px;
    user-select: none;
}
.awr-island.awr-box.awr-box-anchored { display: block; margin: var(--fw-space-1) 0; }
/* Its paragraph holds those margins inside it, where its measure counts them. */
.awr-p.awr-p-boxes { display: flow-root; }
.awr-island.awr-box.awr-box-kept { white-space: pre-wrap; border-style: dashed; }
.awr-box-host { display: block; }
/* A comment: a marker in the page's right margin beside its line; its text in a panel when pressed. */
.awr-island.awr-comment {
    float: right;
    width: 0.9em;
    height: 0.9em;
    margin-inline-end: -1.9em;
    padding: 0;
    background: var(--af-accent);
    border: 0;
    border-radius: 2px 2px 2px 0;
    cursor: pointer;
    user-select: none;
}
.awr-island.awr-comment:focus-visible { outline: 2px solid var(--awr-focus); outline-offset: 2px; }
.awr-comment-pop {
    position: absolute;
    z-index: 30;
    width: min(18rem, 90vw);
    padding: var(--fw-space-2) var(--fw-space-3);
    color: var(--af-fg);
    background: var(--af-surface);
    border: 1px solid var(--awr-rule);
    border-radius: var(--fw-radius-md);
    box-shadow: var(--af-shadow);
}
.awr-comment-pop[hidden] { display: none; }
.awr-comment-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fw-space-2); }
.awr-comment-author { margin: 0; font-weight: 600; }
.awr-comment-text { margin: var(--fw-space-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.awr-box-host > .awr-surface { min-height: 1.5em; max-width: none; margin: 0; padding: 0; user-select: text; }
.awr-island-block.awr-island-shown { color: inherit; background: none; border: 0; border-inline-start: 2px solid var(--af-rule); border-radius: 0; padding: 0 0 0 var(--fw-space-2); white-space: pre-wrap; }
.awr-island-struck { text-decoration: line-through; }
.awr-island-picture { display: block; max-width: 100%; height: auto; }
.awr-island .awr-island-picture { display: inline-block; max-height: 20em; vertical-align: bottom; }
.awr-island-block {
    margin: 0 0 var(--fw-space-2);
    padding: var(--fw-space-2) var(--fw-space-3);
    color: var(--af-muted);
    background: var(--af-code-bg);
    border: 1px dashed var(--af-rule);
    border-radius: var(--fw-radius-md);
    user-select: none;
}
.awr-table { border-collapse: collapse; margin: 0 0 var(--fw-space-2); }
/* On the pages a table keeps no space after it (Word draws none; the next paragraph's space before applies). */
.awr-paper:not(.awr-reading, .awr-flow) > .awr-surface > .awr-table { margin-bottom: 0; }
/* Word's default cell margins: none above and below, 108 twips (5.4 pt) left and right. */
.awr-table td { min-width: 3em; padding: 0 5.4pt; vertical-align: top; border: 1px solid var(--af-rule); }
.awr-table td > .awr-p:last-child, .awr-cell-clip > .awr-p:last-child { margin-bottom: 0; }
.awr-cell-clip { overflow: hidden; }
/* A table without borders keeps a dashed guide on screen (same width, so the layout holds), none in print. */
.awr-table[data-borders="none"] td { border-style: dashed; border-color: var(--af-rule); }

/* ── 4. Lists: a marker the view sets as an attribute (never text) ──────── */
.awr-li { position: relative; padding-inline-start: 1.75em; margin-inline-start: var(--awr-level, 0px); }
.awr-li::before {
    content: attr(data-marker);
    position: absolute;
    inset-inline-start: 0;
    min-width: 1.5em;
    color: var(--awr-fg);
}
.awr-li[data-level="1"] { --awr-level: 1.5em; }
.awr-li[data-level="2"] { --awr-level: 3em; }
.awr-li[data-level="3"] { --awr-level: 4.5em; }
.awr-li[data-level="4"] { --awr-level: 6em; }
.awr-li[data-level="5"] { --awr-level: 7.5em; }
.awr-li[data-level="6"] { --awr-level: 9em; }
.awr-li[data-level="7"] { --awr-level: 10.5em; }
.awr-li[data-level="8"] { --awr-level: 12em; }
/* On the pages, a block of a section of another width between its own page's side margins (the view's offsets). */
.awr-paper:not(.awr-reading, .awr-flow) > .awr-surface > [data-block] {
    margin-inline-start: calc(var(--awr-level, 0px) + var(--awr-sec-start, 0px));
    margin-inline-end: var(--awr-sec-end, 0px);
}
/* A paragraph's borders (the file's horizontal lines): each edge its line, the top and bottom ones their space
   from the text. Paragraphs that share their borders are one box (the view's groups): the top line on the first,
   the bottom one on the last, Word's between line inside. */
.awr-p.awr-bdr {
    border-top: var(--awr-bdr-top, none);
    border-bottom: var(--awr-bdr-bottom, none);
    border-inline-start: var(--awr-bdr-left, none);
    border-inline-end: var(--awr-bdr-right, none);
    padding-top: var(--awr-bdr-top-space, 0);
    padding-bottom: var(--awr-bdr-bottom-space, 0);
}
.awr-p.awr-bdr:is([data-bdr-group="mid"], [data-bdr-group="last"]) { border-top: var(--awr-bdr-between, none); padding-top: var(--awr-bdr-between-space, 0); }
.awr-p.awr-bdr:is([data-bdr-group="first"], [data-bdr-group="mid"]) { border-bottom: none; padding-bottom: 0; }
/* A horizontal rule: a line across its share of the text's width, never a chip. No vertical margin: one would
   pass through its paragraph's edge, unseen by the page layout's measure (the line is the rule's own height). */
.awr-island.awr-rule { display: block; padding: 0; border: 0; border-radius: 0; margin-block: 0; margin-inline: auto; }
.awr-island.awr-rule[data-align="left"] { margin-inline: 0 auto; }
.awr-island.awr-rule[data-align="right"] { margin-inline: auto 0; }
/* A number where the file puts it: at the first line's start, in the hanging indent its level gives (the
   paragraph's own indent, not the levels' steps above), the text after it — a tab's gap, a space, or none. */
.awr-li.awr-li-file { --awr-level: 0px; padding-inline-start: 0; }
.awr-li.awr-li-file::before {
    position: static;
    display: inline-block;
    box-sizing: border-box;
    min-width: var(--awr-hang, 0);
    padding-inline-end: 0.4em;
    text-indent: 0;
}
.awr-li.awr-li-file[data-suffix="space"]::before { min-width: 0; padding-inline-end: 0.25em; }
.awr-li.awr-li-file[data-suffix="nothing"]::before { min-width: 0; padding-inline-end: 0; }
.awr-h3, .awr-h4, .awr-h5, .awr-h6 { font-size: var(--af-step-0); }

/* ── 5. The formatting surface (design § 4.3) ─────────────────────────────── */
.awr-menubar, .awr-toolbar, .awr-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fw-space-1);
    padding: var(--fw-space-1) var(--fw-space-2);
    background: var(--af-surface);
    border-bottom: 1px solid var(--awr-rule);
}
.awr-status { gap: var(--fw-space-1) var(--fw-space-3); border-top: 1px solid var(--awr-rule); border-bottom: 0; font-size: var(--af-step--1); color: var(--af-muted); }
/* Each item of the status bar apart from the one before it (the chip and the switch draw their own edges). */
.awr-status > :not(:empty, .awr-kept, .awr-view-switch, [hidden]) ~ :not(:empty, .awr-kept, .awr-view-switch, [hidden]) { padding-inline-start: var(--fw-space-3); border-inline-start: 1px solid var(--awr-rule); }
/* The kept-content chip: a quiet pill that opens Document details. */
.awr-status .awr-kept { min-height: 1.75rem; padding: 0 var(--fw-space-2); font-size: inherit; color: var(--af-fg); background: var(--af-code-bg); border: 1px solid var(--awr-rule); border-radius: 999px; cursor: pointer; }
.awr-status .awr-kept[hidden] { display: none; }
/* The zoom: Zoom out, a chooser, Zoom in, before the view switch. */
.awr-zoom-control { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.awr-zoom-control[hidden] { display: none; }
.awr-zoom-control + .awr-view-switch { margin-inline-start: var(--fw-space-2); }
.awr-zoom-control > .awr-tool { min-width: 28px; min-height: 28px; }
.awr-zoom-chooser { min-height: 28px; font: inherit; color: var(--af-fg); background: var(--af-surface); border: 1px solid var(--awr-rule); border-radius: var(--fw-radius-sm); }
/* The phone's Menu button (shown in a narrow window only). */
.awr-menu-button { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0; color: inherit; background: transparent; border: 1px solid transparent; border-radius: var(--fw-radius-sm); cursor: pointer; }
.awr-menu-button[hidden] { display: none; }
.awr-menu-button[aria-expanded="true"] { border-color: currentColor; }
/* The view switch: one segmented control at the bar's end. */
.awr-view-switch { display: inline-flex; margin-inline-start: auto; border: 1px solid var(--awr-rule); border-radius: var(--fw-radius-md); overflow: hidden; }
.awr-view-switch > .awr-tool { min-height: 1.75rem; padding: 0 var(--fw-space-3); font-size: inherit; color: var(--af-fg); border: 0; border-radius: 0; }
.awr-view-switch > .awr-tool + .awr-tool { border-inline-start: 1px solid var(--awr-rule); }
.awr-view-switch > .awr-tool[aria-pressed="true"] { color: var(--af-bg); background: var(--af-accent); }
/* The toolbar: one row centred over the page; what does not fit goes to the More panel at its end. */
.awr-toolbar { flex: 0 0 auto; flex-wrap: nowrap; justify-content: center; gap: 2px; overflow: visible; }
.awr-toolbar .awr-tool-sep { margin: 0 2px; }
.awr-toolbar > * { flex: 0 0 auto; }
.awr-more-wrap { position: relative; display: inline-flex; }
.awr-more-wrap[hidden] { display: none; }
.awr-more .awr-icon { stroke-width: 3.5; }
.awr-toolbar-more {
    position: absolute;
    z-index: 20;
    inset-block-start: 100%;
    inset-inline-end: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    width: max-content;
    max-width: min(24rem, 90vw);
    padding: var(--fw-space-1);
    background: var(--awr-bg);
    border: 1px solid var(--awr-rule);
    border-radius: var(--fw-radius-md);
    box-shadow: var(--af-shadow);
}
.awr-toolbar-more[hidden] { display: none; }
.awr-toolbar-more > .awr-tool-sep:first-child { display: none; }
.awr-menu-wrap { position: relative; }
.awr-menu-name, .awr-menu-item, .awr-tool, .awr-panel-close {
    min-height: 36px;
    font: inherit;
    color: var(--awr-fg);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--fw-radius-sm);
    cursor: pointer;
}
.awr-menu-name { padding: 0 var(--fw-space-2); }
.awr-menu-name[aria-expanded="true"], .awr-menu-name:hover, .awr-menu-item:hover, .awr-tool:hover { background: var(--af-code-bg); }
.awr-menu {
    position: absolute;
    z-index: 20;
    inset-block-start: 100%;
    inset-inline-start: 0;
    display: flex;
    flex-direction: column;
    min-width: 16rem;
    /* A menu taller than the window (Format) scrolls inside it: its last items stay within the pointer's reach. */
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    padding: var(--fw-space-1);
    background: var(--awr-bg);
    border: 1px solid var(--awr-rule);
    border-radius: var(--fw-radius-md);
    box-shadow: var(--af-shadow);
}
.awr-menu[hidden] { display: none; }
.awr-menu-item { display: flex; justify-content: space-between; gap: var(--fw-space-4); padding: 0 var(--fw-space-2); text-align: start; white-space: nowrap; }
.awr-menu-item[aria-checked="true"] .awr-label::before { content: "✓ "; }
.awr-menu-item[aria-disabled="true"], .awr-tool[aria-disabled="true"], [role=option][aria-disabled="true"] { color: var(--af-muted); cursor: default; }
.awr-menu-sep { height: 1px; margin: var(--fw-space-1) 0; background: var(--awr-rule); }
.awr-kbd { font-size: var(--af-step--1); color: var(--af-muted); }
.awr-tool { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 0 var(--fw-space-1); }
.awr-tool[aria-pressed="true"] { background: var(--af-code-bg); border-color: var(--awr-rule); }
.awr-tool-sep { width: 1px; align-self: stretch; margin: 0 var(--fw-space-1); background: var(--awr-rule); }
.awr-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The letters drawn as large and as heavy as the line icons; bold and italic set on the letter itself. */
.awr-icon-glyph { fill: currentColor; stroke: none; font-family: var(--af-sans); font-size: 19px; font-weight: 500; }
/* A colour control: its icon over a bar of the current colour, its palette under it. */
.awr-swatch { position: relative; display: inline-flex; }
.awr-swatch-button { flex-direction: column; gap: 1px; }
.awr-swatch-button .awr-icon { width: 18px; height: 18px; }
.awr-swatch-bar { width: 18px; height: 4px; background: transparent; border: 1px solid var(--awr-rule); border-radius: 1px; }
.awr-swatches {
    position: absolute;
    z-index: 20;
    inset-block-start: 100%;
    inset-inline-start: 0;
    display: grid;
    grid-template-columns: repeat(4, 32px);
    gap: var(--fw-space-1);
    padding: var(--fw-space-2);
    background: var(--awr-bg);
    border: 1px solid var(--awr-rule);
    border-radius: var(--fw-radius-md);
    box-shadow: var(--af-shadow);
}
.awr-swatches[hidden] { display: none; }
.awr-swatch-item { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--fw-radius-sm); cursor: pointer; }
.awr-swatch-item:hover, .awr-swatch-item:focus-visible { border-color: var(--af-fg); }
.awr-swatch-item[aria-checked="true"] { border-color: var(--af-accent); box-shadow: inset 0 0 0 1px var(--af-accent); }
.awr-swatch-chip { width: 22px; height: 22px; border: 1px solid var(--awr-rule); border-radius: 3px; }
/* Automatic / None: an empty chip struck through. */
.awr-swatch-none { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--af-muted) calc(50% - 1px), var(--af-muted) calc(50% + 1px), transparent calc(50% + 1px)); }
.awr-chooser, .awr-field {
    min-height: 36px;
    max-width: 11rem;
    font: inherit;
    color: var(--awr-fg);
    background: var(--awr-bg);
    border: 1px solid var(--awr-rule);
    border-radius: var(--fw-radius-sm);
}
.awr-chooser-size { max-width: 6.5rem; }
.awr-chooser-font, .awr-chooser-apply { max-width: 9rem; }
/* The side panels (as LibreOffice's sidebar): the panel open, then the rail of its tabs at the edge. */
.awr-side { display: flex; flex: 0 0 auto; min-height: 0; }
.awr-rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--fw-space-1) 2px;
    background: var(--af-surface);
    border-inline-start: 1px solid var(--awr-rule);
}
.awr-rail-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--awr-fg);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--fw-radius-sm);
    cursor: pointer;
}
.awr-rail-tab:hover { background: var(--af-code-bg); }
.awr-rail-tab[aria-selected="true"] { color: var(--af-bg); background: var(--af-accent); }
.awr-panel {
    flex: 0 0 18rem;
    width: 18rem;
    overflow: auto;
    padding: 0 var(--fw-space-3) var(--fw-space-3);
    background: var(--af-surface);
    border-inline-start: 1px solid var(--awr-rule);
}
.awr-panel[hidden], .awr-side-panel[hidden] { display: none; }
.awr-panel-head {
    position: sticky;
    z-index: 2;
    inset-block-start: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 calc(-1 * var(--fw-space-3));
    padding: var(--fw-space-1) var(--fw-space-3);
    background: var(--af-surface);
    border-bottom: 1px solid var(--awr-rule);
}
.awr-panel-title { margin: 0; font-size: var(--af-step-0); }
/* A row: its label beside its field (a hint or a group under both). */
.awr-panel-row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; align-items: center; gap: var(--fw-space-1) var(--fw-space-2); margin: var(--fw-space-1) 0; }
.awr-panel-row > :not(label, .awr-panel-label, .awr-field) { grid-column: 1 / -1; }
.awr-panel-row .awr-field { max-width: none; min-width: 0; }
.awr-panel-row > .awr-panel-aligns { grid-column: auto; }
.awr-panel-row:has(> .awr-panel-aligns) { grid-template-columns: auto minmax(0, 1fr); }
.awr-panel-row:has(> select[data-command="format.font"], > select[data-command="style.apply"]) { grid-template-columns: 4.5rem minmax(0, 1fr); }
.awr-panel-hint { margin: 0; font-size: var(--af-step--1); color: var(--af-muted); }
.awr-panel-aligns { display: flex; flex-wrap: wrap; gap: var(--fw-space-1); }
.awr-panel-actions { display: flex; flex-wrap: wrap; gap: var(--fw-space-1); margin: var(--fw-space-2) 0; }
.awr-panel-button[aria-pressed="true"] { color: var(--af-bg); background: var(--af-accent); border-color: var(--af-accent); }
/* A part of a panel, folded by its heading. */
.awr-part { margin-block-start: var(--fw-space-2); }
.awr-part[hidden] { display: none; }
.awr-part-title { margin: var(--fw-space-2) 0 var(--fw-space-1); font-size: var(--af-step--1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--af-muted); }
.awr-part-fold { display: flex; align-items: center; gap: var(--fw-space-1); width: 100%; min-height: 28px; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: start; }
.awr-part-mark { width: 0; height: 0; border-inline-start: 5px solid currentColor; border-block: 4px solid transparent; transform: rotate(90deg); transition: transform 0.1s; }
.awr-part-fold[aria-expanded="false"] .awr-part-mark { transform: none; }
@media (prefers-reduced-motion: reduce) { .awr-part-mark { transition: none; } }
.awr-part-body[hidden] { display: none; }
.awr-kept-kind { margin: 0; font-weight: 600; }
.awr-kept-text { margin: var(--fw-space-1) 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Styles: one button a style, the current one marked; a heading's level by its indent. */
.awr-style-list, .awr-nav-list { margin: 0; padding: 0; list-style: none; }
.awr-style-item, .awr-nav-item {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: var(--fw-space-1) var(--fw-space-2);
    font: inherit;
    color: var(--awr-fg);
    text-align: start;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--fw-radius-sm);
    cursor: pointer;
    overflow-wrap: anywhere;
}
.awr-style-item:hover, .awr-nav-item:hover { background: var(--af-code-bg); }
.awr-style-item[aria-current="true"] { border-color: var(--af-accent); box-shadow: inset 3px 0 0 var(--af-accent); }
.awr-style-item[data-level], .awr-nav-item[data-level="1"] { font-weight: 600; }
:is(.awr-style-item, .awr-nav-item)[data-level="2"] { padding-inline-start: calc(var(--fw-space-2) + 0.75rem); }
:is(.awr-style-item, .awr-nav-item)[data-level="3"] { padding-inline-start: calc(var(--fw-space-2) + 1.5rem); }
:is(.awr-style-item, .awr-nav-item)[data-level="4"] { padding-inline-start: calc(var(--fw-space-2) + 2.25rem); }
:is(.awr-style-item, .awr-nav-item):is([data-level="5"], [data-level="6"], [data-level="7"], [data-level="8"], [data-level="9"]) { padding-inline-start: calc(var(--fw-space-2) + 3rem); }
.awr-nav-none { margin: 0 0 var(--fw-space-2); color: var(--af-muted); }
/* Document: its figures, label beside value. */
.awr-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fw-space-1) var(--fw-space-3); margin: var(--fw-space-2) 0; }
.awr-facts dt { color: var(--af-muted); }
.awr-facts dd { margin: 0; overflow-wrap: anywhere; }
.awr-icon-small { font-size: 10px; font-weight: 600; }
.awr-palette, .awr-link-dialog {
    position: absolute;
    z-index: 30;
    inset-block-start: 4rem;
    inset-inline: 0;
    width: min(36rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: var(--fw-space-2);
    background: var(--awr-bg);
    border: 1px solid var(--awr-rule);
    border-radius: var(--fw-radius-md);
    box-shadow: var(--af-shadow);
}
.awr-palette[hidden], .awr-link-dialog[hidden] { display: none; }
.awr-link-dialog { width: min(28rem, calc(100% - 2rem)); }
.awr-link-dialog [hidden] { display: none; }
.awr-link-error { margin: var(--fw-space-1) 0; font-weight: 600; color: var(--af-fg); }
.awr-link-error:empty { display: none; }
.awr-palette-input { width: 100%; min-height: 36px; padding: 0 var(--fw-space-2); font: inherit; color: var(--awr-fg); background: var(--awr-bg); border: 1px solid var(--awr-rule); border-radius: var(--fw-radius-sm); }
.awr-palette-list { max-height: 50vh; margin: var(--fw-space-2) 0 0; padding: 0; overflow: auto; list-style: none; }
.awr-palette-list [role=option] { display: flex; gap: var(--fw-space-2); align-items: baseline; padding: var(--fw-space-1) var(--fw-space-2); border-radius: var(--fw-radius-sm); cursor: pointer; }
.awr-palette-list [role=option][aria-selected="true"] { background: var(--af-code-bg); outline: 2px solid var(--awr-focus); outline-offset: -2px; }
.awr-palette-list .awr-kbd { margin-inline-start: auto; }
.awr-where { color: var(--af-muted); }
.awr-palette-none { margin: var(--fw-space-2) 0 0; color: var(--af-muted); }
@media (pointer: coarse) {
    .awr-menu-name, .awr-menu-item, .awr-tool, .awr-chooser, .awr-field, .awr-panel-close, .awr-palette-input { min-height: 44px; }
    .awr-tool { min-width: 44px; }
}

/* ── 6. Pages (design § 3.4): sheets beside the text, the text laid on them ── */
.awr-doc:has(> .awr-zoom) { background: var(--af-code-bg); }
/* The paper's box: the margin above and below the pages, the paper centred in it; at a zoom, the zoomed size
   the area scrolls over (set by the view). Never sized by its content: that is measured at every layout. */
.awr-zoom { margin: var(--fw-space-4) 0; }
.awr-zoom > .awr-paper:not(.awr-reading, .awr-flow) { margin: 0 auto; }
.awr-zoom.awr-zoomed { margin-inline: auto; overflow: hidden; }
.awr-zoom.awr-zoomed > .awr-paper { margin: 0; }
/* The reading view and the flow: no box (the view's class, not a :has() the engines check at every edit). */
.awr-zoom.awr-continuous { display: contents; }
/*
 * The paper keeps the document's own colours in either theme: white sheets, automatic text black (the
 * system's light canvas), so a document's dark text and coloured headings read as written; what the
 * writer draws on it (kept content, rules, links) mixed from the same ink.
 */
.awr-paper {
    position: relative;
    margin: var(--fw-space-4) auto;
    color-scheme: light;
    --awr-bg: Canvas;
    --awr-fg: CanvasText;
    --awr-rule: color-mix(in srgb, CanvasText 18%, Canvas);
    --af-muted: color-mix(in srgb, CanvasText 62%, Canvas);
    --af-code-bg: color-mix(in srgb, CanvasText 6%, Canvas);
    --af-rule: color-mix(in srgb, CanvasText 18%, Canvas);
    --af-accent: LinkText;
    color: CanvasText;
}
/* The text's focus is its caret: no frame round the whole column of every page. */
.awr-paper > .awr-surface:focus-visible { outline: none; }
.awr-sheets { position: absolute; inset: 0; pointer-events: none; }
.awr-sheets[hidden] { display: none; }
.awr-sheet {
    position: absolute;
    inset-inline-start: 0;
    background: var(--awr-bg);
    border: 1px solid var(--awr-rule);
    box-shadow: var(--af-shadow);
}
.awr-sheet-header, .awr-sheet-footer {
    position: absolute;
    overflow: hidden;
    font-size: var(--af-step--1);
    color: var(--af-muted);
    white-space: pre-wrap;
}
.awr-sheet-header .awr-p, .awr-sheet-footer .awr-p { margin: 0; }
/*
 * Where a split block's next piece starts: the way to the next page's text box. In a paragraph a
 * full-width box on a line of its own (the line before it stays a full line, justified as it was); in a
 * table an empty row. Never text, never selected, never printed as anything but the space it is.
 */
/* A paragraph's at-least line spacing: the larger of its value and the face's single line (Word, LibreOffice); over
   a styled paragraph's own line height. */
.awr-p.awr-line-least { line-height: max(var(--awr-line-least), var(--awr-line-single, 1.15em)); }
.awr-page-gap { display: inline-block; width: 100%; vertical-align: top; line-height: 0; user-select: none; }
.awr-page-gap.awr-page-gap-line { display: block; }
/* What follows a page break belongs to the next page: the break's chip ends its line, so the layout can cut there
   (kept content ending with a page break too). */
.awr-break-page::after, .awr-break-column::after, .awr-island[data-page-break]::after { content: "\A"; white-space: pre; }
tr.awr-page-gap, .awr-page-gap-cell { padding: 0; border: 0 !important; background: none; }
.awr-page-repeat { position: absolute; margin: 0; padding: 0; user-select: none; }
.awr-page-repeat > table { width: 100%; margin: 0; }
.awr-sheet-overflow { position: absolute; inset-block: 0; inset-inline-end: 4px; width: 3px; background: var(--af-accent); }
.awr-paper > .awr-surface { position: relative; z-index: 1; margin: 0; background: transparent; }
/* The reading view (design § 3.4's switch) and the flow (a narrow window): continuous, the sheets gone. */
.awr-paper:is(.awr-reading, .awr-flow) { margin: 0 auto; }
.awr-paper:is(.awr-reading, .awr-flow) > .awr-surface { max-width: 48rem; margin: 0 auto; background: var(--awr-bg); }
/* A narrow window (design § 5.4): the chrome compact, its rows scrolled sideways, the text close to the edges. */
/* The compact toolbar's own controls, shown in a narrow window only. */
.awr-toolbar [data-phone-only] { display: none; }
@media (max-width: 599px) {
    /* A narrow window's compact toolbar (design § 5.4): undo, redo, the style, bold, italic, the
       lists, a link; every other command in the menus. One row: what does not fit is in its More panel. */
    .awr-toolbar { flex-wrap: nowrap; justify-content: flex-start; }
    .awr-toolbar > :not([data-phone], .awr-more-wrap), .awr-toolbar-more > :not([data-phone]) { display: none; }
    .awr-toolbar > [data-phone-only] { display: inline-flex; order: 1; }
    .awr-toolbar > .awr-more-wrap { order: 2; }
    .awr-toolbar-more > [data-phone-only] { display: inline-flex; }
    .awr-toolbar .awr-chooser-apply { width: 7rem; }
    /* The menu names wrap too: a scrolled row clipped the open menu to its first item. */
    .awr-menubar { flex: 0 0 auto; flex-wrap: wrap; overflow: visible; }
    .awr-menubar > * { flex: 0 0 auto; }
    .awr-paper.awr-flow { margin: 0; }
    /* No rail in a narrow window: the panels open from the View menu. */
    .awr-rail { display: none; }
    /* An open panel is a sheet under the text (Docs, Word on phones): the text keeps the window's width,
       the sheet at most half the height between the bars, scrolling inside. */
    .awr-body { flex-direction: column; }
    .awr-side:has(> .awr-panel:not([hidden])) { flex: 0 0 50%; }
    .awr-panel {
        flex: 1 1 auto;
        width: auto;
        border-inline-start: 0;
        border-top: 1px solid var(--awr-rule);
        border-radius: var(--fw-radius-md) var(--fw-radius-md) 0 0;
        box-shadow: var(--af-shadow);
    }
    /* The menus behind the Menu button: a column over the text, each menu opening under its name. */
    .awr-menubar[aria-orientation="vertical"] {
        position: absolute;
        z-index: 40;
        inset-inline: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        max-height: 70vh;
        overflow: auto;
        box-shadow: var(--af-shadow);
    }
    .awr-menubar[aria-orientation="vertical"][hidden] { display: none; }
    .awr-menubar[aria-orientation="vertical"] .awr-menu-name { width: 100%; text-align: start; }
    .awr-menubar[aria-orientation="vertical"] .awr-menu { position: static; min-width: 0; margin-inline-start: var(--fw-space-3); box-shadow: none; }
    .awr-paper.awr-flow > .awr-surface { padding: var(--fw-space-3); }
    :is(.awr-line, .awr-recovered, .awr-notice) { padding: var(--fw-space-1) var(--fw-space-2); font-size: var(--af-step--1); }
    :is(.awr-line, .awr-recovered) .awr-panel-button { min-height: 32px; }
}

/* ── 7. Print: the sheets back to back, the chrome gone ─────────────────── */
@media print {
    /* Printed at 100 %: the zoom is the screen's. */
    .awr-paper { transform: none !important; }
    .awr-zoom { width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; }
    .awr-menubar, .awr-toolbar, .awr-status, .awr-panel, .awr-rail, .awr-palette, .awr-link-dialog, .awr-docbar, .awr-find, .awr-notice, .awr-ask, .awr-recovered, .awr-prefs, .awr-details, .awr-line, .awr-dialog, .awr-comment-pop, .awr-island.awr-comment { display: none !important; }
    .awr-table[data-borders="none"] td { border-color: transparent; }
    .awr, .awr-body, .awr-doc { display: block; height: auto; overflow: visible; background: none; }
    .awr-paper { margin: 0; }
    .awr-sheet { border: 0; box-shadow: none; }
    .awr-surface { caret-color: transparent; }
}

/* ── 8. A header or footer edited in the side panel (design § 5.3) ───────── */
.awr-panel-story { margin: var(--fw-space-3) 0; padding-top: var(--fw-space-2); border-top: 1px solid var(--awr-rule); }
.awr-panel-story[hidden] { display: none; }
.awr-panel-story-text .awr-surface {
    min-height: 4rem;
    max-width: none;
    padding: var(--fw-space-2);
    background: var(--awr-bg);
    border: 1px solid var(--awr-rule);
    border-radius: var(--fw-radius-sm);
}
.awr-panel-state { color: var(--af-muted); font-size: var(--af-step--1); }
.awr-panel-button {
    min-height: 36px;
    padding: 0 var(--fw-space-2);
    font: inherit;
    color: var(--awr-fg);
    background: var(--awr-bg);
    border: 1px solid var(--awr-rule);
    border-radius: var(--fw-radius-sm);
    cursor: pointer;
}
.awr-panel-button[aria-disabled="true"] { color: var(--af-muted); cursor: default; }
@media (pointer: coarse) { .awr-panel-button { min-height: 44px; } }

/* ── 9. The shell (design § 5.1): the start screen, the document bar, the notice, the question, find ── */
.awr[data-state="start"] > :is(.awr-docbar, .awr-menubar, .awr-toolbar, .awr-find, .awr-body, .awr-status) { display: none; }
.awr[data-state="editing"] > .awr-start { display: none; }
.awr-start {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    flex: 1 1 auto;
    /* The home sits in the upper third, whatever the window's height. */
    padding: clamp(var(--fw-space-6), 10vh, 6rem) var(--fw-space-3) var(--fw-space-6);
    overflow: auto;
}
/* One column: the heading, the actions, the recent files, the dropzone line. */
.awr-start-main { display: grid; gap: var(--fw-space-6); width: min(44rem, 100%); }
.awr-start-title { margin: 0; font-size: var(--af-step-2); font-weight: 600; text-align: center; }
.awr-start-new-row { display: flex; flex-wrap: wrap; gap: var(--fw-space-3); justify-content: center; }
.awr-start-new, .awr-start-open {
    min-height: 3rem;
    padding: var(--fw-space-2) var(--fw-space-4);
    font: inherit;
    font-weight: 600;
    border: 1px solid var(--af-accent);
    border-radius: var(--fw-radius-md);
    cursor: pointer;
}
/* The two New buttons are the primary actions; Open sits beside them, quieter. */
.awr-start-new { color: var(--af-bg); background: var(--af-accent); }
.awr-start-new:hover { filter: brightness(1.08); }
.awr-start-open { color: var(--af-accent); background: var(--awr-bg); }
.awr-start-open:hover { background: var(--af-code-bg); }
.awr-start-recent { display: grid; gap: var(--fw-space-2); }
.awr-start-recent[hidden] { display: none; }
.awr-start-recent-title { margin: 0; font-size: var(--af-step-0); font-weight: 600; }
.awr-start-recent-hint { margin: 0; color: var(--af-muted); font-size: 0.875rem; }
.awr-start-recent-list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--awr-rule); border-radius: var(--fw-radius-md); }
.awr-start-recent-item { display: flex; align-items: center; gap: var(--fw-space-2); }
.awr-start-recent-item + .awr-start-recent-item { border-top: 1px solid var(--awr-rule); }
.awr-start-recent-open {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.75rem;
    padding: var(--fw-space-2) var(--fw-space-3);
    overflow: hidden;
    font: inherit;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--awr-fg);
    background: none;
    border: 0;
    cursor: pointer;
}
.awr-start-recent-open:hover { color: var(--af-accent); text-decoration: underline; }
.awr-start-recent-forget {
    flex: none;
    margin-inline-end: var(--fw-space-2);
    padding: var(--fw-space-1) var(--fw-space-2);
    font: inherit;
    font-size: 0.875rem;
    color: var(--af-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--fw-radius-sm);
    cursor: pointer;
}
.awr-start-recent-forget:hover { color: var(--awr-fg); border-color: var(--awr-rule); }
.awr-dropzone {
    padding: var(--fw-space-3) var(--fw-space-4);
    text-align: center;
    border: 2px dashed var(--awr-rule);
    border-radius: var(--fw-radius-md);
    cursor: pointer;
}
.awr-dropzone[data-dragover="true"], .awr-start[data-dragover="true"] .awr-dropzone { border-color: var(--af-accent); background: var(--af-code-bg); }
.awr-dropzone p { margin: var(--fw-space-1) 0; }
.awr-dropzone-title { font-weight: 600; }
.awr-dropzone-kinds, .awr-dropzone-hint { color: var(--af-muted); }
/* The whole screen takes a dropped document: while one is dragged over it, a target covers it. */
.awr-drop-overlay {
    position: absolute;
    inset: var(--fw-space-2);
    display: none;
    place-items: center;
    font-size: var(--af-step-1);
    font-weight: 600;
    color: var(--af-accent);
    background: color-mix(in srgb, var(--awr-bg) 88%, transparent);
    border: 3px dashed var(--af-accent);
    border-radius: var(--fw-radius-md);
    pointer-events: none;
}
.awr-start[data-dragover="true"] > .awr-drop-overlay { display: grid; }
@media (max-width: 599px) {
    .awr-start { align-content: start; padding: var(--fw-space-4) var(--fw-space-3); }
    .awr-start-main { gap: var(--fw-space-4); }
    .awr-start-new-row { flex-direction: column; align-items: stretch; }
}
.awr-docbar { display: flex; align-items: center; gap: var(--fw-space-2); padding: var(--fw-space-1) var(--fw-space-2); border-bottom: 1px solid var(--awr-rule); }
.awr-docname { padding: 0 var(--fw-space-1); font: inherit; font-weight: 600; color: var(--awr-fg); background: none; border: 1px solid transparent; border-radius: var(--fw-radius-sm); cursor: text; }
.awr-docname:hover { border-color: var(--awr-rule); }
.awr-docname-field { max-width: 24rem; }
.awr-unsaved { color: var(--af-accent); }
.awr-docstate { color: var(--af-muted); font-size: var(--af-step--1); }
/* Save: a button, the document's main action (at the end of the bar). */
.awr-docbar-save { min-height: 2.25rem; margin-inline-start: auto; padding: 0 var(--fw-space-3); font: inherit; font-weight: 600; color: var(--af-bg); background: var(--af-accent); border: 1px solid var(--af-accent); border-radius: var(--fw-radius-md); cursor: pointer; }
.awr-notice { margin: var(--fw-space-2); padding: var(--fw-space-2) var(--fw-space-3); border: 1px solid var(--af-accent); border-radius: var(--fw-radius-md); background: var(--awr-surface); }
.awr-notice[hidden] { display: none; }
.awr-notice-text { margin: 0 0 var(--fw-space-1); }
.awr-notice-code { margin: 0 0 var(--fw-space-2); font-family: var(--af-mono, monospace); font-size: var(--af-step--1); color: var(--af-muted); }
/*
 * The dialog family (design § 5.1): a modal in the top layer, centred, the page dimmed and inert behind it;
 * a title bar with its close button, a body, a row of buttons ending with the primary one marked.
 */
.awr-dialog {
    position: fixed;
    inset: 0;
    width: min(32rem, calc(100% - 2rem));
    height: fit-content;
    max-height: calc(100dvh - 2 * var(--fw-space-4));
    margin: auto;
    padding: 0;
    overflow: auto;
    color: var(--af-fg);
    background: var(--af-surface);
    border: 1px solid var(--af-border);
    border-radius: var(--fw-radius-md);
    box-shadow: 0 0.5rem 1.5rem var(--af-shadow);
}
.awr-dialog[hidden] { display: none; }
.awr-dialog::backdrop { background: color-mix(in srgb, var(--af-chrome-bg) 60%, transparent); }
/* The title bar as the page's Help and About draw theirs: the chrome's band, the mono title, a framed close. */
.awr-dialog-head { position: sticky; top: 0; display: flex; align-items: center; gap: var(--fw-space-3); padding: var(--fw-space-2) var(--fw-space-3) var(--fw-space-2) var(--fw-space-4); color: var(--af-chrome-fg); background: var(--af-chrome-bg); }
.awr-dialog-title { flex: 1 1 auto; margin: 0; font: 700 var(--af-step-0)/1.2 var(--af-mono); }
.awr-dialog-close { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; color: inherit; background: transparent; border: 1px solid var(--af-chrome-muted); border-radius: var(--fw-radius-md); cursor: pointer; }
.awr-dialog-head :focus-visible { outline-color: var(--af-chrome-muted); }
.awr-dialog-body { display: grid; gap: var(--fw-space-1); padding: var(--fw-space-3) var(--fw-space-4); }
.awr-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--fw-space-1); padding: 0 var(--fw-space-4) var(--fw-space-3); }
.awr-dialog .awr-primary { color: var(--af-bg); background: var(--af-accent); border-color: var(--af-accent); }
.awr-recovered { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-space-1) var(--fw-space-3); padding: var(--fw-space-1) var(--fw-space-2); border-bottom: 1px solid var(--af-accent); background: var(--awr-surface); }
.awr-recovered[hidden], .awr-line[hidden] { display: none; }
.awr-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-space-1) var(--fw-space-3); padding: var(--fw-space-1) var(--fw-space-2); border-bottom: 1px solid var(--awr-rule); background: var(--awr-surface); }
.awr-leftout-text { margin: 0; }
.awr-recovered-text { margin: 0; }
.awr-recovered .awr-primary { border-color: var(--af-accent); }
.awr-details-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--fw-space-1) var(--fw-space-3); margin: 0; }
.awr-details-facts dt { color: var(--af-muted); }
.awr-details-facts dd { margin: 0; }
.awr-details-heading { margin: var(--fw-space-2) 0 0; font-size: var(--af-step-0); }
.awr-details-list { margin: 0; padding-inline-start: var(--fw-space-4); }
.awr-details-none, .awr-details-note { margin: 0; }
.awr-keys { border-collapse: collapse; }
.awr-keys td { padding: var(--fw-space-1) var(--fw-space-2) var(--fw-space-1) 0; vertical-align: top; }
.awr-keys td.awr-kbd { white-space: nowrap; font-family: var(--af-mono, monospace); }
.awr-keys th { text-align: start; padding: var(--fw-space-3) 0 var(--fw-space-1); font-weight: inherit; }
.awr-keys tbody:first-child th { padding-top: 0; }
.awr-keys th .awr-details-heading { margin: 0; }
.awr-prefs-label { font-weight: 600; }
.awr-prefs-check { display: inline-flex; gap: var(--fw-space-1); align-items: center; margin-block-start: var(--fw-space-2); }
.awr-prefs-hint { margin: 0; font-size: var(--af-step--1); color: var(--af-muted); }
.awr-find { display: grid; gap: var(--fw-space-1); padding: var(--fw-space-1) var(--fw-space-2); border-bottom: 1px solid var(--awr-rule); }
.awr-find[hidden], .awr-find-row[hidden] { display: none; }
.awr-find-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-space-1) var(--fw-space-2); }
.awr-find-row .awr-field { width: 14rem; max-width: 100%; }
.awr-find-count { min-width: 6rem; color: var(--af-muted); }
.awr-find-option { display: inline-flex; gap: var(--fw-space-1); align-items: center; }
.awr-status-note { color: var(--af-muted); }
::highlight(awr-find) { background-color: var(--af-code-bg); }
::highlight(awr-comment) { background-color: color-mix(in srgb, var(--af-accent) 18%, transparent); }
::highlight(awr-find-current) { background-color: var(--af-accent); color: var(--af-bg); }