brain-of-reese/tests/unit/test_wide_column_css.py

"""Unit: every page matches the RAG page's 72rem width (phase 100).

The measured-width browser proof is E2E-gated by the phase's width
suite (task 03); like the other frontend-adjacent unit files (the
test_save_chat_ui.py pattern), this module pins the styles.css markers
the width contract depends on, so a silent regression is caught
without a browser:

* the ``--chat-column`` custom property in ``:root`` — 72rem, EQUAL to
  the ``.container``'s 72rem cap (owner instruction 2026-09-12:
  "match the width of the RAG page for all other pages" — supersedes
  the 2026-08-31 instruction), with the provenance comment;
* NO ``@media (min-width: 1500px)`` block anywhere in the file — the
  phase-58 wide-desktop doubling is deleted in full (the token is
  72rem at every viewport);
* 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 for a max-width (exactly four rules);
* the flipped negative pin — ZERO literal ``max-width: 46rem`` rules
  remain (the phase-27/59/91 form-column caps are retired): the form
  shells (``.tuning-shell``, ``.theme-shell``, ``.doc-edit-shell``)
  carry no cap, no token, and no ``margin-inline`` — structurally
  ``.sources-shell``;
* the two source-page dialogs (phase 69 remove-confirm, phase 89
  ignore-editor) cap at the chat-column width THROUGH THE TOKEN —
  ``min(var(--chat-column), calc(100vw - 2rem))`` — or the viewport;
* the stale width comments are gone — no "46rem base" / "92rem at
  >=1500px" / "1500px" width claims remain (the "46rem column
  contract" wording was rewritten to the 72rem contract, 2026-09-12).
"""
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_72rem_equal_to_the_container() -> None:
    """:root declares --chat-column: 72rem — EQUAL to the .container's
    72rem cap (one width for everything) — with the owner-provenance
    comment (instruction 2026-09-12)."""
    css = _css()
    root = _rule_block(css, ":root")
    assert "--chat-column: 72rem" in root, (
        ":root must declare the --chat-column width (72rem)"
    )
    # The token equals the container's cap (the RAG page's width).
    container = _rule_block(css, ".container")
    assert "max-width: 72rem" in container, (
        ".container's 72rem cap is the width the token now equals"
    )
    pre = css[: css.index("--chat-column: 72rem")]
    comment = pre[pre.rindex("/*") : pre.rindex("*/")]
    assert "owner instruction 2026-09-12" in comment, (
        "the token's comment must cite the owner instruction "
        "(2026-09-12 — match the width of the RAG page)"
    )


def test_the_wide_desktop_doubling_is_retired() -> None:
    """No @media (min-width: 1500px) block remains (the phase-58 2x
    override is deleted in full, 2026-09-12) and the token is never
    assigned the old wide value — 72rem at every viewport."""
    css = _css()
    assert "@media (min-width: 1500px)" not in css, (
        "the wide-desktop media block must be deleted (retired 2026-09-12)"
    )
    assert "--chat-column: 92rem" not in css, (
        "the token is never doubled to the old wide value"
    )


def test_no_literal_46rem_width_remains() -> None:
    """Flipped negative pin (phase 100 D1): ZERO literal
    max-width: 46rem rules remain in the file — the phase-27/59/91
    form-column caps are retired, and the dialog panels ride the
    token, not a 46rem literal."""
    css = _css()
    assert css.count("max-width: 46rem") == 0, (
        "no literal max-width: 46rem rule may remain (retired 2026-09-12)"
    )
    assert "min(46rem" not in css, (
        "the dialog panels must ride the token, not a 46rem literal"
    )


# ---------- the four reading-column selectors ----------


def test_the_reading_columns_use_the_token() -> None:
    """.chat-shell, .shared-shell, .doc-md, .doc-image (phase 122,
    task 04 — the viewer's image block rides the SAME reading column
    as its .doc-md sibling) and .doc-summary:has(+ .doc-md) each cap
    with max-width: var(--chat-column) — and exactly those five rules
    use the token for a max-width (no other selector)."""
    css = _css()
    for selector in (
        ".chat-shell",
        ".shared-shell",
        ".doc-md",
        ".doc-image",
        ".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)") == 5, (
        "exactly the reading-column selectors use the token"
    )


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 — phase 100 D2)."""
    assert "width: 100%" in _rule_block(_css(), ".doc-md")


# ---------- the form shells + the dialog panels ----------


def test_the_form_shells_ride_the_full_container() -> None:
    """The form shells (.tuning-shell — phase 27, .theme-shell —
    phase 91, .doc-edit-shell — phase 59) carry NO cap, NO token, and
    NO margin-inline: the .container ancestor centers them, so they
    ride the 72rem frame like .sources-shell (flex column,
    gap 1.25rem, flex: 1 — the owner instruction 2026-09-12 retires
    the form-column caps)."""
    css = _css()
    for selector in (".tuning-shell", ".theme-shell", ".doc-edit-shell"):
        block = _rule_block(css, selector)
        assert "max-width" not in block, (
            f"{selector} must carry no cap (retired 2026-09-12)"
        )
        assert "var(--chat-column)" not in block, (
            f"{selector} rides the .container frame, not the token"
        )
        assert "margin-inline" not in block, (
            f"{selector} is centered by the .container ancestor"
        )
        for decl in (
            "display: flex",
            "flex-direction: column",
            "gap: 1.25rem",
            "flex: 1",
        ):
            assert decl in block, (
                f"{selector} keeps the .sources-shell shape ({decl})"
            )


def test_the_dialog_panels_ride_the_token() -> None:
    """The two source-page dialogs (phase 69 remove-confirm, phase 89
    ignore-editor) cap at the chat-column width THROUGH THE TOKEN —
    min(var(--chat-column), calc(100vw - 2rem)) — or the viewport,
    whichever is narrower (the 46rem literals ride no more)."""
    css = _css()
    for selector in (".remove-confirm-panel", ".ignore-editor-panel"):
        block = _rule_block(css, selector)
        assert "min(var(--chat-column), calc(100vw - 2rem))" in block, (
            f"{selector} must ride the token (the chat-column width "
            "or the viewport)"
        )


# ---------- the comment contract ----------


def test_comments_carry_the_72rem_contract() -> None:
    """The stale width claims are gone from the file: no "≤46rem",
    "46rem base", "92rem at >=1500px" or "1500px" wording (the
    2026-08-31 contract was rewritten to the 72rem contract), with the
    owner instruction (2026-09-12) as the provenance at the token and
    the reading-column comments naming 72rem."""
    css = _css()
    assert "≤46rem" not in css, (
        "the stale '≤46rem' contract wording must be updated"
    )
    assert "46rem base" not in css, "no stale '46rem base' claim may remain"
    assert "92rem at >=1500px" not in css, (
        "no stale wide-override claim may remain"
    )
    assert "1500px" not in css, (
        "the wide-desktop breakpoint wording is retired (2026-09-12)"
    )
    # Provenance at the authoritative spot (the token).
    token_idx = css.index("--chat-column: 72rem")
    assert "owner instruction 2026-09-12" in css[max(0, token_idx - 400) : token_idx]
    # The chat-shell + shared-shell comments name the 72rem contract.
    chat_comment = css[: css.index(".chat-shell {")]
    assert "72rem" in chat_comment, (
        "the chat-shell comment must name the 72rem contract"
    )
    shared_idx = css.index(".shared-shell {")
    shared_rule = css[shared_idx : shared_idx + 400]
    assert "72rem" in shared_rule, (
        "the shared-shell comment must name the 72rem contract"
    )