/* ============================================================================ THE TOOL PAGE'S SCALE — one size for 92 hand-authored pdf and image tools ---------------------------------------------------------------------------- Two sections: the drop zone, and the type scale around it. It was called drop-zone.css for its first hour, until measuring the 92 pages showed the oversized headings were the same request wearing a different hat. ---------------------------------------------------------------------------- Owner brief, 2026-09-01, with two screenshots of the app: "make the drop area for image tools and pdf tools more premium and medium size so user gets a premium application feel." MEASURED FIRST, IN BRAVE AT 390x844, BEFORE ANY NUMBER HERE WAS CHOSEN: page zone h % of viewport title icon button pdf-to-jpg 347px 41% 24px 64px 155x42 merge-pdf 378px 45% -- 48px 184x46 jpg-to-webp 313px 37% 24px -- 121x39 heic-to-pdf 252px 30% 24px -- 152x42 image-compressor 224px 27% -- 48px -- compress-pdf 210px 25% 17.6px 46px -- The spread is the defect. The same control is 210px on one page and 378px on another, and the two that read as "an app" in the screenshots are the two at the bottom of that table. So the target is not invented: it is compress-pdf's proportions applied to the other 91 pages -- ~200px, a 17px title, a 40px glyph. "Medium size" turned out to be a number the site already had. WHAT THIS FILE MAY AND MAY NOT DO --------------------------------- A site-wide cosmetic layer over .tool-scope was built and reverted inside one day on 2026-08-03: "you made the whole area blue", "ugly design", "dropdowns are invisible". memory/traps/glass-design-layer.md is the record, and the cause it names is that 45 tools have 45 designs, so one skin averages to something worse than any of them. That failure was about COLOUR, and this file therefore sets none. No background, no border-color, no box-shadow colour, no text colour. Every surface here keeps whatever the page already painted; what changes is how big it is. The four colour tokens the zone needs are read from the page itself -- --card-border, --accent-cyan, --text-muted, --text-main -- and all four are defined on all 44 pdf-tools and all 48 image-tools pages, verified by grep, so the zone stays that page's colour and cannot average into a blue wash. WHY THE DECLARATIONS ARE !important, WHICH IS NOT A SHORTCUT ----------------------------------------------------------- Measured across the 92 pages: 264 of the 347 rules that select a drop zone are two-class selectors and 71 are three-class. Eight are single-class. A stylesheet linked last in ties and wins only against those eight; it loses to the other 339 on specificity no matter where it sits. The alternatives were to add a markup hook to 92 hand-authored pages, or to chain ancestors this file cannot know. Both are worse. Templates/partials/ dev-glass.css already resolves the identical problem the identical way. The rule that keeps it honest: !important appears ONLY on geometry and type -- size, spacing, radius, weight. If you are about to mark a colour important here, you are writing the 2026-08-03 layer again. LOADED BY: a inserted last in on every pdf-tools and image-tools page by scripts/apply-tool-scale.mjs. Re-run that script after adding a page. ========================================================================= */ /* ═══════════════════════════════════════════════════════════════════════════ THIS SECTION APPLIES BELOW 900px ONLY. ROUND TWO ADDED TWO MORE SECTIONS AND THIS HEADING USED TO SAY "EVERYTHING IN THIS FILE". It no longer does, and the correction matters because the reason below is still exactly right for SIZE and was never right for surface: below 900px — the phone scale (this block). Round one. at 900px+ — the desktop geometry band. Round two, and it exists because "uneven" was a separate complaint from "too big". every width — the surface (fill, rim, guide, plate, CTA). Round two. A gradient and an inset highlight are proportional; a 188px min-height is not, which is the whole reason the two are not in the same block. The complaint was about a phone, every number in it was measured on a 390x844 phone, and the desktop column was laid out by hand at its own scale. Rendered at 1280px the mobile scale reads as undersized -- a 17px drop title in a 1050px-wide card -- which would be answering a question nobody asked while putting all 92 pages at risk on the width Google actually renders. THE FIRST ATTEMPT DID THIS THE OTHER WAY ROUND AND THE MECHANISM WAS WRONG. It applied the scale at every width and undid it above 900px with `font-size: revert`. That does not restore the page's own value: revert rolls a property back to the previous CASCADE ORIGIN, which is the user-agent stylesheet, so every h2 on desktop would have gone to the browser default 1.5em rather than back to what its page designed. An author-level value that has been overridden is not reachable that way at all. Not applying the rule is the only correct form. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 899px) { /* ── THE ZONE ITSELF ─────────────────────────────────────────────────────── min-height rather than height, because several tools swap the zone's contents for a file list in place and a fixed height would clip it. max-height is deliberately absent for the same reason. */ /* ROUND TWO EXTENDED THIS LIST, AND THE REASON IS A MEASUREMENT. The six classes on the first line were round one's ENTIRE list. Enumerating every class attribute across the 92 files afterwards found eleven more one-off containers and six zones addressed only by id, so EIGHTEEN PAGES never got the phone scale at all -- and nothing in this file said so. Reading the CSS could not have told you; only counting the pages could. `#drop-zone` is not a typo for `.drop-zone`. extract-pdf-pages writes `