"""Unit: the 2x reading column on wide desktops (phase 58, task 01). The measured-width browser proof is E2E-gated by the phase-58 story suite (task 02); like the other frontend-adjacent unit files (the test_save_chat_ui.py pattern), this module pins the styles.css markers the wide-column contract depends on, so a silent regression is caught without a browser: * the ``--chat-column`` custom property in ``:root`` — 46rem base (the PLAN §7 column lineage) with the provenance comment (owner instruction 2026-08-31, TODO L5 / D2); * the ``@media (min-width: 1500px)`` block at the bottom of the responsive region — the SINGLE place that doubles the token to 92rem (2x); * the four reading-column selectors — ``.chat-shell``, ``.shared-shell``, ``.doc-md``, ``.doc-summary:has(+ .doc-md)`` — each capped with ``max-width: var(--chat-column)`` and NOTHING else in the file uses the token (exactly four rules); * the negative pin — the form columns (``.tuning-shell``; and from phase 59, task 06, ``.doc-edit-shell`` — forms, not reading surfaces) are the only literal ``max-width: 46rem`` rules left in the file, kept hard-coded so the wide-desktop doubling never stretches a form; * the "46rem column contract" block comments were updated to name the base value + the wide override (the stale "≤46rem" contract claims are gone from the reading-column comments). """ from __future__ import annotations import re from pathlib import Path FRONTEND = Path(__file__).resolve().parents[2] / "frontend" STYLES_CSS = FRONTEND / "assets" / "styles.css" def _css() -> str: return STYLES_CSS.read_text(encoding="utf-8") def _rule_block(css: str, selector: str) -> str: """The declaration block of a top-level (or nested) rule: the ``{…}`` following ``selector`` via balanced-brace counting.""" m = re.search(rf"^{re.escape(selector)} \{{", css, re.MULTILINE) assert m, f"styles.css must define a rule for {selector}" start = css.index("{", m.start()) depth = 0 for i in range(start, len(css)): if css[i] == "{": depth += 1 elif css[i] == "}": depth -= 1 if depth == 0: return css[start : i + 1] raise AssertionError(f"unbalanced braces in the {selector} rule") # ---------- the --chat-column token ---------- def test_root_declares_chat_column_46rem_base() -> None: """:root declares --chat-column: 46rem (the PLAN §7 base) with the owner-provenance comment (instruction 2026-08-31, TODO L5).""" css = _css() root = _rule_block(css, ":root") assert "--chat-column: 46rem" in root, ( ":root must declare the --chat-column base (46rem)" ) pre = css[: css.index("--chat-column: 46rem")] comment = pre[pre.rindex("/*") : pre.rindex("*/")] assert "owner instruction 2026-08-31" in comment, ( "the token's comment must cite the owner instruction " "(2026-08-31, TODO L5)" ) def test_wide_media_block_doubles_the_token() -> None: """A @media (min-width: 1500px) block sets --chat-column: 92rem on :root — the single wide override (2x the base).""" css = _css() m = re.search(r"@media \(min-width: 1500px\) \{", css) assert m, "styles.css must carry the @media (min-width: 1500px) block" start = css.index("{", m.start()) depth = 0 for i in range(start, len(css)): if css[i] == "{": depth += 1 elif css[i] == "}": depth -= 1 if depth == 0: block = css[m.start() : i + 1] break else: raise AssertionError("unbalanced braces in the wide media block") assert ":root { --chat-column: 92rem; }" in block, ( "the wide block must set :root { --chat-column: 92rem; }" ) # The wide block is the ONLY min-width:1500 media in the file and # the only place 92rem is assigned to the token. assert css.count("@media (min-width: 1500px)") == 1 assert css.count("--chat-column: 92rem") == 1 def test_wide_block_lives_in_the_bottom_responsive_region() -> None: """The min-width sibling sits alongside the max-width responsive blocks at the bottom of the file (after the <=640px block).""" css = _css() wide = css.index("@media (min-width: 1500px)") mobile = css.rindex("@media (max-width: 640px)") assert wide > mobile, ( "the wide override belongs in the bottom media-query region" ) # ---------- the four reading-column selectors ---------- def test_the_four_reading_columns_use_the_token() -> None: """.chat-shell, .shared-shell, .doc-md and .doc-summary:has(+ .doc-md) each cap with max-width: var(--chat-column) — and exactly those four rules use the token (no other selector).""" css = _css() for selector in ( ".chat-shell", ".shared-shell", ".doc-md", ".doc-summary:has(+ .doc-md)", ): assert "max-width: var(--chat-column)" in _rule_block(css, selector), ( f"{selector} must cap with max-width: var(--chat-column)" ) assert css.count("max-width: var(--chat-column)") == 4, ( "exactly the four reading-column selectors use the token" ) def test_shared_shell_keeps_the_centered_column_comment() -> None: """.shared-shell's inline comment keeps the "centered chat column" wording and notes the wide override (task 01 work item).""" css = _css() rule = css[css.index(".shared-shell {") : css.index(".shared-shell {") + 400] assert "the PLAN §7 centered chat column" in rule assert "92rem at >=1500px" in rule, "the comment must note the wide override" def test_doc_md_keeps_width_100_under_the_cap() -> None: """.doc-md stays width:100% under the token cap (the modal's 1100px panel remains its effective ceiling there).""" assert "width: 100%" in _rule_block(_css(), ".doc-md") # ---------- the negative pins ---------- def test_tuning_shell_stays_hardcoded_46rem() -> None: """.tuning-shell (the form column, out of scope) keeps its hard-coded max-width: 46rem at every width — it never widens.""" css = _css() tuning = _rule_block(css, ".tuning-shell") assert "max-width: 46rem" in tuning, ( ".tuning-shell must stay hard-coded 46rem (negative pin)" ) assert "var(--chat-column)" not in tuning, ( ".tuning-shell must NOT reference the reading-column token" ) def test_no_other_hardcoded_46rem_rule_remains() -> None: """After the switch, the form columns are the ONLY rules with a literal max-width: 46rem: .tuning-shell (phase 27), .doc-edit-shell (phase 59, task 06 — the doc edit screen is a FORM column, not a reading column, so it must not ride --chat-column and phase 58's wide-desktop doubling must never stretch the form), and .theme-shell (phase 91 task 04 — the admin Theme editor is a form column too: the palette grid + fieldsets must never ride the wide-desktop doubling). Every reading column rides the token (the --chat-column base declaration is the other non-rule occurrence of 46rem).""" css = _css() assert css.count("max-width: 46rem") == 3, ( "only the form columns (.tuning-shell, .doc-edit-shell, " ".theme-shell) may keep a literal max-width: 46rem" ) assert "max-width: 46rem" in _rule_block(css, ".tuning-shell") assert "max-width: 46rem" in _rule_block(css, ".doc-edit-shell") assert "max-width: 46rem" in _rule_block(css, ".theme-shell") def test_comments_cite_the_wide_override_with_provenance() -> None: """The block comments that claimed the "46rem column contract" now name base 46rem + the 2x wide override, with the owner instruction (2026-08-31, TODO L5) as the provenance at the token and the media block.""" css = _css() # The stale "≤46rem" contract claims are gone from the file. assert "≤46rem" not in css, ( "the stale '≤46rem' contract wording must be updated" ) # Provenance at the two authoritative spots (token + wide block). token_idx = css.index("--chat-column: 46rem") wide_idx = css.index("@media (min-width: 1500px)") assert "owner instruction 2026-08-31" in css[max(0, token_idx - 400) : token_idx] assert "owner instruction 2026-08-31" in css[max(0, wide_idx - 500) : wide_idx] # The chat-shell comment names base + override. chat_comment = css[: css.index(".chat-shell {")] assert "46rem base" in chat_comment and "92rem" in chat_comment