/* ═══════════════════════════════════════════════════════════════════════════ WAM Ai — REPORT KIT The masthead every printed report in the app wears. ONE definition. WHY THIS IS A FILE AND NOT INLINE ANYWHERE The app's printed reports live in three different kinds of document: · the single-page app itself (wam.html) · standalone pages (report.html, daily-margin-report.html, fuel-inventory-report.html) · pop-up windows opened by wam.js (invoice detail, invoice summary, price tags) A pop-up gets its OWN document and cannot see wam.html's stylesheet — which is precisely why every report grew its own header over time. A linkable file is the only thing all three can reach, so this is the source of truth. wam.js fetches it once and inlines it into pop-ups (so nothing prints unstyled while a stylesheet is still loading); everything else just links it. ⚠️ THE RULE UNDER THE MASTHEAD IS DELIBERATE — AND IT REVERSES AN EARLIER DECISION, SO READ THIS BEFORE REMOVING IT. On 2026-07-27 a ruled masthead was rejected: the sheet already carries five horizontal rules, and a sixth read as the ledger's first row. A teal bar down the left was used instead. On 2026-07-29 Munier chose the rule, having seen his own Gilbarco Passport "Store Close" report and SSCS's "Daily Book Analysis" — BOTH of which put a rule under a prominent title. The earlier objection no longer applies because the teal bar is gone: the rule is now the header's ONLY mark, so it separates the masthead from the ledger instead of competing with it. ⚠️ NO STATUS CHIP, AND NOTHING THAT ASSUMES A SINGLE DAY. The masthead is shared by six reports. Some cover one day, some a month, some a year. So the period slot takes ANY string ("07/28/2026", "July 2026", "2026") and there is no "open/closed" chip — a day's status lives in the Day Status panel on the sheet, where it belongs. Munier, 2026-07-29: "don't use the preliminary bubble... with other reports it could be a month/year instead of exact date." Layout — three rows sharing one left edge and one right edge, then the rule: [WAM Ai lockup] DAILY BOOKS RECONCILIATION Gordon Plaza Sunoco 07/28/2026 Afshar Limited II LLC · Store #5586 · 1260 Annapolis Way, … ──────────────────────────────────────────────────────────────── The identity line spans the full width, so a long address can never be clipped — it was being truncated on both stores when it shared a row. ⚠️ CACHE-BUST THIS FILE WHEN YOU CHANGE IT. Every page links it as `report-kit.css?v=kitNN` (and report-kit.js the same). It shipped for two days with NO version at all, so a browser that had already loaded it would keep serving the old masthead no matter what was deployed — the same trap wam.js?v=wamsheetNN exists to avoid. Bump the NN in ALL FOUR pages (wam.html, report.html, daily-margin-report.html, fuel-inventory-report.html) in the same commit as any edit here. ═══════════════════════════════════════════════════════════════════════════ */ .rh { /* margin-bottom is the BREATHING ROOM AFTER THE RULE, before the report starts. Munier, 2026-07-29: "enforce a padding after the header black line... right now it's a little tight. a slight bit more space." 12px -> 18px. */ margin: 0 0 18px; padding-bottom: 4px; /* snug to the last line — Munier, 2026-07-29 */ border-bottom: 1px solid var(--ink, #16181F); } .rh-r1, .rh-r2, .rh-r3 { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; } /* Centred, not baseline: an baseline is its BOTTOM edge, so baseline alignment drops the mark below the type. Equal heights + centre = one line. */ .rh-r1 { align-items: center; } /* ⚠️ THE THREE ROWS ARE NOT THREE EQUAL THINGS — SPACE THEM ACCORDINGLY. ⚠️ AND DO NOT "MEASURE" THIS WITH ESTIMATED CAP-HEIGHT MATHS. A first pass computed ink-to-ink gaps using assumed cap-height/descender ratios, concluded row 3 needed a NEGATIVE margin, and shipped a header where the address line nearly touched the store name above it. The constants did not match this typeface. Rendered at 2x and looked at instead — which is how the numbers below were chosen. Measured 2026-07-29, ink-to-ink (box gaps lie: a 21px line carries far more internal leading than a 14px one). The header was reading as three unrelated stripes because the optical gaps came out 15.5 / 13.7 / 14.6px — near identical. But row 3 DESCRIBES row 2: the address belongs to the store named above it. So rows 2+3 are one group, and row 1 is separate: row 1 -> row 2 a clear break row 2 -> row 3 tight, so they read as one block The numbers below are chosen to produce that OPTICALLY, which is why row 3's is so much smaller than you would expect — the 21px store name's descender space is already doing most of the work. Re-measure if any type size changes. Tightened 2026-07-29 on Munier's read of the printed sheet: the whole block read as too airy, so row 2 pulled up under the wordmark and row 3 up under the store name, and the address line grew (it had gone abnormally small). */ .rh-r2 { margin-top: 5px; } .rh-r3 { margin-top: 1px; } /* Brand — the PRIMARY LOCKUP (icon + wordmark), which the brand kit says to use by default. Two artworks: dark text for a light ground, white for a dark one. Getting this backwards prints an invisible logo. */ /* ⚠️ THE WORDMARK, NOT THE FULL LOCKUP — AND ITS PADDING IS CANCELLED. Munier, 2026-07-29: the icon's solid black squircle was the heaviest mark on an otherwise light page. The kit forbids recolouring that container, and the "transparent" icon variant only has transparent CORNERS, so the sanctioned answer is the wordmark — which is also the right mark for a printed record (an app icon belongs on a phone home screen, not a letterhead). ⚠️ THE ARTWORK HAS BAKED-IN PADDING, so it cannot simply be dropped in. Measured by rasterising it and scanning for ink (design-explorations/ header-2026-07-29/measure.html): box 1600 x 446 · ink x 73-1525, y 73-373 left padding = 4.563% of the WIDTH top/bottom = 16.4% / 16.1% of the HEIGHT letters occupy only 67.5% of the box height Two consequences, both handled below: 1. the left edge is indented, so it would NOT line up with the store name under it or with the rule — margin-left cancels exactly that 4.563%, which works out to 0.1637 x the rendered height; 2. the box must be taller than the letters you want. At 16px the letters render ~10.8px, which reads level with the 14px uppercase title. ⚠️ If the height changes, the negative margin MUST change with it — it is derived from the height, not a fixed nudge. */ .rh-lock { height: 22px; width: auto; display: block; margin-left: -3.6px; /* 0.1637 x 22px — cancels the artwork's left padding */ } .rh-lock.dark { display: none; } :root[data-theme="dark"] .rh-lock.light, .dark .rh-lock.light { display: none; } :root[data-theme="dark"] .rh-lock.dark, .dark .rh-lock.dark { display: block; } /* ⚠️ THE TITLE IS A TITLE. It used to print at 11.5px in mid-grey against a 21px black store name — so the page announced STORE, then DATE, then whispered what the report actually was. Munier, 2026-07-29: "the report name should be very clearly at the top." Near-black and 14px; still smaller than the store name and the period, because it is the LABEL and they are the payload. */ .rh-title { font-size: 21px; font-weight: 800; letter-spacing: -.022em; text-transform: uppercase; color: var(--ink, #16181F); white-space: nowrap; text-align: right; } /* The two things an operator uses to file and find a printed report. */ .rh-store { font-size: 21px; font-weight: 800; letter-spacing: -.022em; line-height: 1.05; color: var(--ink, #16181F); min-width: 0; } /* The PERIOD. Any shape — a date, a month, a year, a range. */ .rh-when { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink, #16181F); font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; } /* The record detail — quiet, but always present: it is what makes the page a record. Spans the row so a long address is never clipped. */ /* ⚠️ 12px, not 10.5px. Munier, 2026-07-29: "the site id line is abnormally smaller text." It carried the two things you file a sheet by — the Site ID and the address — at a size that read as fine print. Bumped so it is plainly legible, still clearly below the store name. .rh-sub (the note on the same row) matches it, so the row reads level. */ .rh-ident { font-size: 12px; color: var(--ink-3, #6E7280); line-height: 1.4; min-width: 0; } .rh-dot { margin: 0 6px; opacity: .45; } /* A GAP between two already-labelled facts ("Site ID: 5586" / "Address: ..."), where a dot would just be one more mark to read past. */ .rh-gap { display: inline-block; width: 22px; } /* Optional right-hand note (the invoice puts its vendor here). Plain text — NOT a chip, and never a day status. */ .rh-sub { font-size: 12px; color: var(--ink-3, #6E7280); white-space: nowrap; flex: 0 0 auto; } /* The period exists twice on purpose: a picker on screen, plain text on paper. A