/* ───────────────────────────────────────────────────────────────────── SPNC — Auth shell Shared split-card design for the unauthenticated pages: login, forgot password, reset password. Colours reuse the app's existing primary ramp (primary-500 #4f8ef7 / primary-600 #3b6fd4) and the existing slate neutrals, so these pages stay on-brand. Plain CSS, scoped under .auth-* — no Tailwind rebuild required. ───────────────────────────────────────────────────────────────────── */ /* ── Page ── */ .auth-page { /* min-height: 100vh, NOT 100%. * * A percentage min-height resolves against the PARENT'S HEIGHT, and neither html nor body has a * height anywhere in this project -- app.css sets only overflow-anchor on them. With nothing * definite to resolve against, `100%` falls back to auto, so the effective min-height is 0 and * the page grows to its content and stops. On the revision refusal screen that put the bottom * edge of the background at the card's height plus the 36px padding -- about 498px -- with plain * white below it, because body sets no background of its own and the canvas shows through. * * 100vh does not depend on any ancestor, which is why .rev-done-page (min-h-screen) was never * affected and this was. * * dvh follows, so on a phone the page is one dynamic viewport tall and does not run under the * URL bar. The vh line is kept first as the fallback for anything that does not know dvh. */ min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 36px 20px; background-color: #eef2f7; background-image: radial-gradient(1100px 620px at 8% -12%, rgba(79, 142, 247, .13), transparent 62%), radial-gradient(900px 680px at 108% 112%, rgba(79, 142, 247, .10), transparent 60%), radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .07) 1px, transparent 0); background-size: auto, auto, 22px 22px; /* Per layer, matching the three sizes above. The default is repeat for ALL layers, which was * invisible while the element was only as tall as its content -- the two washes fit inside it. * At a full viewport tall they would tile, and a tiled 620px wash reads as a banding fault. The * dot texture is the one layer that IS meant to repeat. */ background-repeat: no-repeat, no-repeat, repeat; } /* ── Card ── */ .auth-card { width: 100%; max-width: 1040px; display: grid; grid-template-columns: 1.05fr .95fr; background: #fff; border: 1px solid rgba(15, 23, 42, .06); border-radius: 28px; overflow: hidden; /* clips panels to the rounded corners */ box-shadow: 0 40px 80px -34px rgba(15, 23, 42, .30), 0 12px 28px -14px rgba(15, 23, 42, .14); } /* ── The hidden attribute must WIN over any display rule ── * * This exists because it did not, and the page silently ignored its own state. * * app-tailwind.css (loaded FIRST) ships Tailwind's `[hidden]:where(:not([hidden=until-found])) * { display: none }`, which has specificity (0,1,0). auth.css (loaded LAST) set * `.auth-cover-places { display: flex }`, also (0,1,0). Equal specificity, so source order * decided and the later author rule won -- the `hidden` attribute was simply overridden, and * unticking an area left its place list on screen. That rule has since been deleted as dead CSS; * the place lists now carry Tailwind's `flex` utility, which is the same conflict with the * selector gone, and `!important` is what settles it. * * So the toggle script was setting a real attribute, the attribute was really present in the HTML, * and nothing happened. Every guard that inspected the markup passed. * * `!important` is the correct tool rather than an accident of ordering: this is a state the * ATTRIBUTE expresses, and it has to beat any component class that happens to set a display. This * is the same rule normalize.css ships for exactly this reason. */ [hidden] { display: none !important; } /* ── Utilities the PRUNED BUILD does not contain ── * * Written by hand, because the build is pruned and must never be regenerated. * HOW THIS LIST WAS MADE. Every class in the supplied reference design was extracted and looked up * in app-tailwind.css / app.css / this file: 108 are present, 54 are not. Only the 54 that the * layout actually needs are defined below. An earlier version of this project reported 1292 * "missing" classes that were all fictional, so the list is measured, not guessed. * * A note on `lg:grid-cols-3`, because it is why this block is small: it IS in the build. A previous * check tested only the unprefixed `grid-cols-3`, found it absent, and concluded that a three-column * layout was impossible here -- so a hand-written grid was written instead. `grid-cols-3` and * `lg:grid-cols-3` are different selectors and the build has the second one. The grid below is now * the reference's own `grid grid-cols-1 lg:grid-cols-3`. * * Selectors are written with the same backslash escaping Tailwind uses, because that is what the * class attribute contains: `bg-slate-50/50` in the HTML is matched by `.bg-slate-50\/50`. */ .rounded-3xl { border-radius: 1.5rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .font-black { font-weight: 900; } .tracking-tight { letter-spacing: -.025em; } .text-rose-500 { color: #f43f5e; } /* The VALIDATION ERROR treatment: the rose banner above the form, and the field-level messages * under the two confirmation boxes. * * These four were missing and were caught by the application's own css-classes.php, not by * revision-classes-guard.php, because they are only reachable when a submission is REFUSED -- so a * guard that opens the page with a valid application never renders them and never notices. That is * the worst place for a dead class to hide: an applicant who unticks a required box was told what was * wrong in unstyled text, with no banner, which is close to not being told at all. * * .bg-rose-50 the banner's fill #fff1f2 * .border-rose-200 the banner's hairline #fecdd3 * .text-rose-600 the field-level message #e11d48 * .last\:mb-0 drop the last message's bottom margin, so the banner has no ragged gap */ .bg-rose-50 { background-color: #fff1f2; } .border-rose-200 { border-color: #fecdd3; } .text-rose-600 { color: #e11d48; } .last\:mb-0:last-child { margin-bottom: 0; } /* NOT HERE: .text-amber-900 and .border-amber-300. * * The reference design styles ONE rate row in amber -- border-amber-300, bg-amber-50/30, * text-amber-900 -- to mark the figure the reviewer wants changed. This application has no way to * know which row that is: the reviewer types a free-text note, and nothing links a phrase in it to a * region. Guessing a row to highlight would be worse than not highlighting one. * * They were written here for that variant, and revision-hidden-cascade-guard.php then reported them * as dead CSS -- correctly, and after two comments in this project had already tried to keep them * alive by NAME. views/provider/register.php and views/sop/index.php both mention both classes in * prose explaining other work, and a comment is not a use. */ .gap-5 { gap: 1.25rem; } .mb-0\.5 { margin-bottom: .125rem; } .mb-1\.5 { margin-bottom: .375rem; } .mb-5 { margin-bottom: 1.25rem; } .mt-10 { margin-top: 2.5rem; } .pb-4 { padding-bottom: 1rem; } .min-h-screen { min-height: 100vh; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .appearance-none { -webkit-appearance: none; appearance: none; } .accent-indigo-600 { accent-color: #4f46e5; } .max-w-\[1400px\] { max-width: 1400px; } /* Translucent tints. The slash in the class name is escaped. */ .bg-slate-50\/50 { background-color: rgba(248, 250, 252, .5); } .bg-slate-50\/80 { background-color: rgba(248, 250, 252, .8); } .bg-indigo-50\/30 { background-color: rgba(238, 242, 255, .3); } .border-amber-200\/80 { border-color: rgba(253, 230, 138, .8); } /* .border-amber-300 and .text-amber-900 were both here, and both have gone. See the note above * .gap-5: they styled the rate row the reviewer wants changed, and this application has nothing * that identifies that row. */ .shadow-indigo-600\/20 { box-shadow: 0 4px 6px -1px rgba(79, 70, 229, .2); } /* The indigo button and its hover. */ .bg-indigo-600 { background-color: #4f46e5; } .hover\:bg-indigo-700:hover { background-color: #4338ca; } /* Quiet hover states on the chips and the declarations. */ .hover\:bg-slate-50:hover { background-color: #f8fafc; } .hover\:bg-slate-100:hover { background-color: #f1f5f9; } .hover\:text-slate-900:hover { color: #0f172a; } /* The "All" / "None" control above a place or country list. * * The build has no hover:bg-indigo-* at all -- measured, not assumed -- so the two the control * needs are written here. It is indigo because the control is indigo: it is the one action in the * coverage list that is not a tick, and it should read as a button, not as another chip. */ .hover\:bg-indigo-50:hover { background-color: #eef2ff; } .hover\:text-indigo-700:hover { color: #4338ca; } /* ── The receipt screen's hover states, and the utilities it needs ── * * The build has NO hover:shadow-*, NO hover:-translate-y-*, NO hover:border-slate-300 and no * hover:bg-slate-200 -- measured, not assumed. It does have hover:bg-slate-50/100, hover:text-slate-900 * and hover:bg-indigo-700, which are written above. * * Everything below is for views/provider/revision.php's "$done" branch: the "thank you, that's come * in" receipt. Hover is the point of the screen -- it is the one page where the only control is a * button -- so these are affordances, not decoration. */ .hover\:bg-slate-200:hover { background-color: #e2e8f0; } .hover\:bg-slate-800:hover { background-color: #1e293b; } .active\:bg-slate-900:active { background-color: #0f172a; } .hover\:border-slate-300:hover { border-color: #cbd5e1; } /* The card's lift. Both properties move together, so the box-shadow transition needs its own * transition-property -- transition-all is set on the element but a bare transition-all does not * include box-shadow's longer duration cleanly, and transition-shadow keeps the two in step. */ .hover\:shadow-md:hover { box-shadow: 0 10px 15px -3px rgba(15, 23, 42, .1), 0 4px 6px -4px rgba(15, 23, 42, .1); } .hover\:shadow-lg:hover { box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .1), 0 8px 10px -6px rgba(15, 23, 42, .1); } .hover\:-translate-y-0\.5:hover { transform: translateY(-2px); } .transition-shadow { transition-property: box-shadow; } /* Spacing and weight the receipt uses, also absent from the build. */ .font-extrabold { font-weight: 800; } .leading-6 { line-height: 1.5rem; } .py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; } .space-y-3 > * + * { margin-top: .75rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } .sm\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* THE RED ACCENT, for a control the applicant has left unticked. * * The build ships accent-indigo-600 and no other accent colour at all -- measured, not assumed -- * so there was nothing to turn a refused checkbox red with. accent-color is the right property * here: it recolours the tick and the box without touching the surrounding text. */ .accent-red-500 { accent-color: #ef4444; } /* THE LOCKED SUBMIT BUTTON. * * One class, not two class lists swapped in script. Swapping class strings means the locked and * enabled appearance live in two places and drift apart the first time either is edited; a single * class means there is one definition of "locked" and the script only adds or removes it. * * It has to override bg-blue-600 AND hover:bg-blue-700, so the :hover selector is written out * rather than left to the plain rule. Without it the button would light up blue on hover while * disabled -- a control that looks live and is not, which is worse than one that never lights up. * * auth.css is loaded last, so at equal specificity these win; the :hover form is (0,2,0), the same * as .hover\:bg-blue-700:hover, and being later in a later sheet it takes precedence. */ .submit-locked, .submit-locked:hover { background-color: #cbd5e1; /* slate-300 */ color: #64748b; /* slate-500 */ cursor: not-allowed; box-shadow: none; } /* The receipt's page wash: a pale mint bloom off the top-left and top-right, over slate. * * Two radial gradients rather than one, because the design's tint is not centred -- it is heaviest * in the two upper corners and falls away to near-white through the middle. A single centred * gradient reads as a spotlight behind the card and flattens the whole thing. * * Written here rather than as a utility because the build has no gradient utilities at all. */ .rev-done-page { background-color: #f8fafc; background-image: radial-gradient(58rem 38rem at 8% -12%, #d9f7ea 0%, rgba(217, 247, 234, 0) 62%), radial-gradient(46rem 34rem at 98% 4%, #dff6f0 0%, rgba(223, 246, 240, 0) 64%); background-repeat: no-repeat; } /* The same wash, for a page that keeps the .auth-page shell. * * views/provider/revision.php has two outcomes. The success one renders with .rev-done-page and has * always had the mint bloom. The refusal one -- the link is unknown, spent, expired, or the * application is no longer waiting -- kept the plain .auth-page background, so the two outcomes of * one screen looked like two unrelated pages. * * This is a wash ONLY, deliberately. It sets background-color, background-image and * background-repeat and nothing else: no spacing, no type, no card geometry, no colour on the * refusal's own red state icon. The four refusal reasons each carry distinct wording and a danger * icon, and restyling those from the shape of the screen would mean deciding what they should look * like without having seen them. The shell is shared and the card is untouched; only the paint * behind them changed. * * Declared after .auth-page so it wins on source order at equal specificity (both are single * class selectors), which is also why auth.css must stay the last stylesheet -- see * revision-hidden-cascade-guard.php. */ .auth-page--mint { background-color: #f8fafc; background-image: radial-gradient(58rem 38rem at 8% -12%, #d9f7ea 0%, rgba(217, 247, 234, 0) 62%), radial-gradient(46rem 34rem at 98% 4%, #dff6f0 0%, rgba(223, 246, 240, 0) 64%); background-repeat: no-repeat; } /* The button's focus ring. A button whose only affordance is a hover state is unusable by keyboard, * and the receipt is the page a keyboard user is most likely to reach after submitting. */ .rev-done-btn:focus-visible { outline: 2px solid #0f172a; outline-offset: 3px; } /* The focus treatment the design gives every input: indigo ring, white fill. */ .focus\:border-indigo-500:focus { border-color: #6366f1; }.focus\:border-amber-500:focus { border-color: #f59e0b; } .focus\:bg-white:focus { background-color: #fff; } .focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, .2); } .focus\:ring-indigo-500\/20:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, .2); } .focus\:ring-amber-500\/20:focus { box-shadow: 0 0 0 2px rgba(245, 158, 11, .2); } .focus\:ring-indigo-600:focus { outline: 2px solid transparent; box-shadow: 0 0 0 2px rgba(99, 102, 241, .35); } /* group / group-hover, used by the declaration labels. */ .group { position: relative; } .group:hover .group-hover\:text-slate-900 { color: #0f172a; } /* The checked state of a coverage chip. * * The reference expresses this as `has-[:checked]:border-indigo-500` and friends. Tailwind v3 * arbitrary variants are not in the pruned build, so the four rules are written out. * * Written as ONE rule per outcome rather than four classes, because the outcome is what matters: * a chip is either checked or it is not, and there is no state in which some of the four apply and * the others do not. A separate `:has(input:checked)` selector on the chip itself would have done * the same job, but then the class attribute would carry names that do nothing, and a reader would * reasonably expect them to be doing something. */ .has-\[\:checked\]\:border-indigo-500:has(input:checked) { border-color: #6366f1; } .has-\[\:checked\]\:bg-indigo-50\/30:has(input:checked) { background-color: rgba(238, 242, 255, .3); } .has-\[\:checked\]\:ring-1:has(input:checked) { box-shadow: 0 0 0 1px #6366f1; } .has-\[\:checked\]\:ring-indigo-500:has(input:checked) { --tw-ring-color: #6366f1; } /* The text tint on a ticked place chip. * * This one was MISSING while the view already used it: the first four variants were written and * this was not, so a ticked place chip would have kept its grey text against an indigo chip -- a * class in the markup with no rule behind it. Caught by a probe that resolves every class token * on the rendered page against the stylesheets, which is the only way a class you typed yourself * gets noticed. */ .has-\[\:checked\]\:text-indigo-700:has(input:checked) { color: #4338ca; } /* The reference's responsive steps, written out because the build lacks these utilities. */ /* The reference's responsive steps, written out because the build lacks these utilities. * * ONE RULE PER LINE, not several crammed onto one line. That is not a style preference: a probe * that reads class names out of a stylesheet by matching the text between braces mis-parses a * multi-rule line, and it mis-parsed two of these as absent while they were plainly there. Readable * CSS is also CSS that a naive reader cannot get wrong. */ @media (min-width: 640px) { .sm\:p-8 { padding: 2rem; } } @media (min-width: 768px) { .md\:flex-row { flex-direction: row; } .md\:items-end { align-items: flex-end; } } @media (min-width: 1024px) { .lg\:p-12 { padding: 3rem; } } /* ── Revision page: three columns ── * * There is nothing to write here, and the absence is the interesting part. * * An earlier version of this file hand-built the revision page's three-column grid: an * .auth-rev-grid rule with tuned fr ratios, an .auth-rev max-width, a panel header with an icon * box, and so on. It is all gone, replaced by the reference design's own `grid grid-cols-1 * lg:grid-cols-3 gap-6 items-start`. * * The reason it is gone is worth writing down, because the reasoning was wrong twice: * * 1. "The pruned Tailwind build has no grid-cols-3, so a three-column layout cannot be * assembled from utility classes here." The build has no UNPREFIXED grid-cols-3. It has * lg:grid-cols-3 -- a different selector -- and the build is full of breakpoint-prefixed ones. * The check had only ever tested the unprefixed name. revision-classes-guard.php now checks * every class token on the RENDERED page against every loaded stylesheet, which is what * turns "is it there?" into something that cannot be answered from memory. * 2. The column ratios that were then hand-tuned (0.58fr / 0.70fr / 1.02fr) came from * measuring a screenshot. The design says lg:grid-cols-3, which is THREE EQUAL TRACKS. The * design was never asking for unequal columns. * 3. The heading was made to wrap onto two lines with a two-column header grid, read off a * narrow crop. The design's header is a plain flex row and the h1 is one line. * * Two guards that encoded all three of those inferences -- revision-layout-guard.php and * revision-proportions-guard.php -- were deleted rather than left failing. A guard that asserts * the wrong thing is not neutral: it pushes the next person to either undo a correct design or * contort the code back to a layout nobody asked for. revision-design-guard.php replaces them and * asserts what the design actually specifies. */ /* ── Card without the branding panel ── * * .auth-card above is a two-column grid (1.05fr .95fr) sized for the brand panel plus the form. * An auth page that does not include views/auth/_brand.php therefore cannot simply drop the * partial: the form would occupy the first track and leave an empty second track beside it, so the * page would render as a narrow form floating against a gap. This modifier collapses the grid to * one centred column instead. * * 760px rather than the 540px the 480px breakpoint uses. This page carries the widest content in * the auth set -- the coverage chips with their place lists, and the rate table, whose three columns * are a flexible Where plus two fixed 130px rate inputs. At 540px those two fixed columns are a * third of the width and the area names wrap to two lines each. * * Only the revision page uses this. Login, activate, reset-password and forgot-password keep the * two-panel layout, which is the right shape for a page whose entire job is one field. */ .auth-card--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; } /* ── Left: branding panel ── */ .auth-brand { position: relative; display: flex; flex-direction: column; padding: 56px 52px; color: #fff; background: radial-gradient(820px 460px at 0% 0%, rgba(79, 142, 247, .22), transparent 60%), linear-gradient(160deg, #0b1220 0%, #0f172a 55%, #080d17 100%); } .auth-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border: 1px solid rgba(148, 163, 184, .40); border-radius: 999px; background: rgba(148, 163, 184, .10); color: #cbd5e1; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; } .auth-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #4f8ef7; box-shadow: 0 0 0 3px rgba(79, 142, 247, .22); } .auth-wordmark { margin: 30px 0 0; font-size: clamp(2.3rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; } .auth-tagline { margin: 16px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.65; color: #94a3b8; } .auth-rule { height: 1px; margin: 30px 0 26px; background: linear-gradient(90deg, rgba(148, 163, 184, .45), transparent); } .auth-feats { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; } .auth-feat { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: #e2e8f0; } .auth-feat-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(79, 142, 247, .16); color: #7db0fb; } .auth-feat-ico svg { width: 15px; height: 15px; } .auth-brand-foot { margin-top: auto; padding-top: 36px; font-size: 12.5px; color: #64748b; } /* ── Right: form panel ── */ .auth-form { display: flex; flex-direction: column; justify-content: center; padding: 56px 52px; background: #fff; } .auth-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: #0f172a; } .auth-sub { margin: 8px 0 0; font-size: 14.5px; color: #64748b; } /* ── Inline alert ── */ .auth-alert { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 13px 15px; border: 1px solid #fecaca; border-radius: 13px; background: #fef2f2; color: #b91c1c; font-size: 13.5px; font-weight: 500; } .auth-alert svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; } /* ── Toasts (views/auth/_toast.php) ── * * Two of these rules exist because the Tailwind utilities they replace are NOT in the pruned * build. css-class-guard.php confirmed on 2026-10-08 that `z-[60]` and `max-w-[calc(100vw-2rem)]` * do not exist there, so the auth toast has had no z-index and no width clamp at all since it was * written -- it could render behind the card, and on a narrow phone it could run off the edge. * `z-50` and `max-w-sm` ARE in the build, so those are used in the markup and the viewport clamp * -- which no single Tailwind utility expresses here -- lives here. * * .auth-toast__close matters for the same reason: it is a bare