import assert from "node:assert/strict";
import test from "node:test";
import { readFile } from "node:fs/promises";

const css = await readFile(new URL("../static/css/styles.css", import.meta.url), "utf8");

function rule(selector) {
  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  const match = css.match(new RegExp(`${escaped}\\s*\\{([^}]*)\\}`));
  assert.ok(match, `Missing CSS rule: ${selector}`);
  return match[1];
}

test("top-level page headers share one compact height", () => {
  assert.match(css, /--top-header-height:\s*54px;/);
  for (const selector of [".site-header", ".app-header", ".public-header"]) {
    assert.match(rule(selector), /min-height:\s*var\(--top-header-height\)/);
  }
});

test("header actions use the shared compact control height", () => {
  assert.match(css, /--top-header-control-height:\s*34px;/);
  assert.match(css, /\.app-header \.secondary-button,[\s\S]*?min-height:\s*var\(--top-header-control-height\)/);
  assert.match(css, /\.public-header \.secondary-button,[\s\S]*?min-height:\s*var\(--top-header-control-height\)/);
});

test("small screens retain taller header controls", () => {
  assert.match(css, /@media \(max-width: 720px\)[\s\S]*?\.public-header \.secondary-button,[\s\S]*?min-height:\s*36px;/);
});