/* ============================================================ TameLink design system — hand-authored, no build step. Order: TOKENS → UTILITIES → COMPONENTS. Do not reorder. The Tailwind CDN has been removed (Phase 43 final sweep). Utility classes below reuse Tailwind's names and exact v3.4.17 values. The global reset is css/reset.css, linked before this file in every layout that loads it. BRAND COLOURS: --brand-50..900 are emitted per-request as space-separated RGB channels by BrandSetting::cssVariables() (e.g. --brand-600: 22 101 52). Always consume them as rgb(var(--brand-N)) or rgb(var(--brand-N) / 0.2). HOVERS: use --brand-hover / -hover-deep (fills) and --brand-hover-text / -hover-strong (text), not a raw shade: on a black brand every dark shade is black, so these go lighter instead (BrandSetting::hoverShades, TameLink-9hag). ============================================================ */ /* ---------- TOKENS ---------- */ :root { /* Grays — Tailwind v3.4.17 values, verbatim */ --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827; /* Semantic colour ladders (only the shades in use) */ --red-50:#fef2f2; --red-100:#fee2e2; --red-200:#fecaca; --red-300:#fca5a5; --red-400:#f87171; --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c; --red-800:#991b1b; --green-50:#f0fdf4; --green-100:#dcfce7; --green-200:#bbf7d0; --green-300:#86efac;--green-500:#22c55e; /* Batch 7b — roles legend dot */ --green-600:#16a34a; --green-700:#15803d; --green-800:#166534; --green-900:#14532d; --yellow-50:#fefce8;--yellow-100:#fef9c3;--yellow-200:#fef08a; --yellow-300:#fde047;--yellow-400:#facc15;--yellow-500:#eab308; --yellow-600:#ca8a04; /* Batch 6a — schedules.php's partial-time-off warning */ --yellow-700:#a16207;--yellow-800:#854d0e;--yellow-900:#713f12; --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-500:#3b82f6; /* Batch 7b — roles legend dot */ --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-800:#1e40af; --blue-900:#1e3a8a; --sky-100:#e0f2fe; --sky-700:#0369a1; --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-200:#99f6e4; --teal-600:#0d9488; --teal-700:#0f766e; --teal-800:#115e59; --cyan-100:#cffafe; --cyan-700:#0e7490; --indigo-100:#e0e7ff; --indigo-700:#4338ca; --violet-100:#ede9fe; --violet-700:#6d28d9; --pink-100:#fce7f3; --pink-700:#be185d; --purple-50:#faf5ff; --purple-100:#f3e8ff; --purple-200:#e9d5ff; --purple-300:#d8b4fe; --purple-500:#a855f7; --purple-700:#7e22ce; --orange-50:#fff7ed; --orange-100:#ffedd5; --orange-200:#fed7aa; --orange-300:#fdba74; --orange-400:#fb923c; --orange-500:#f97316; --orange-600:#ea580c; --orange-700:#c2410c; --orange-800:#9a3412; /* Amber — OD-N (Nix, 2026-08-17). settings/tax.php's ValorPay surcharge disclosure is a WARM caution note and stays warm; the existing .alert-warning is lemon (yellow-50/200/700) and recolouring a billing disclosure to it was rejected. Three shades, one consumer. */ --amber-50:#fffbeb; --amber-200:#fde68a; --amber-600:#d97706; --amber-700:#b45309; /* t1o6: amber text on white (5.0:1) */ --amber-800:#92400e; /* Shape */ --radius-xs:.25rem; /* = rounded — OD-A, calendar blocks keep 4px corners */ --radius-sm:.375rem; /* = rounded-md */ --radius:.5rem; /* = rounded-lg */ --radius-lg:.75rem; /* = rounded-xl */ /* Elevation — Tailwind v3.4.17 values, verbatim */ --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1); /* THE focus ring — one treatment app-wide (unifies the 3-way drift, inventory §2a/§hover-focus). 2px brand ring, no border swap. A 2px white gap sits between the element and the ring, so focus shows on a brand-coloured (even black) button too (TameLink-9hag F70). --ring-flat is the old gap-less ring, kept for selected states. */ --ring:0 0 0 2px #fff,0 0 0 4px rgb(var(--brand-500)); --ring-flat:0 0 0 2px rgb(var(--brand-500)); } /* Alpine flash-of-unstyled-content guard — global infra, kept from views/layouts/app.php's former inline rule. */ [x-cloak]{display:none!important} /* ---------- UTILITIES (Tailwind-name whitelist) ---------- Values transcribed verbatim from Tailwind v3.4.17. A class that is not in this section and not a component class below MUST NOT appear in converted markup. */ /* Display */ .block{display:block}.inline-block{display:inline-block}.inline{display:inline} .flex{display:flex}.inline-flex{display:inline-flex} .grid{display:grid}.hidden{display:none} /* Flex / grid */ .flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap} .flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0} .items-start{align-items:flex-start}.items-center{align-items:center} .justify-center{justify-content:center} .justify-between{justify-content:space-between} .justify-end{justify-content:flex-end} .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))} .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))} /* Batch 6b: profile city/state/zip row */ .col-span-2{grid-column:span 2/span 2} /* Batch 6b: profile two-thirds column */ .gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem} .gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem} /* Spacing — padding */ .p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem} .p-6{padding:1.5rem}.p-10{padding:2.5rem}.p-12{padding:3rem} .px-2{padding-left:.5rem;padding-right:.5rem} .px-3{padding-left:.75rem;padding-right:.75rem} .px-4{padding-left:1rem;padding-right:1rem} .px-6{padding-left:1.5rem;padding-right:1.5rem} .py-0\.5{padding-top:.125rem;padding-bottom:.125rem} .py-1{padding-top:.25rem;padding-bottom:.25rem} .py-1\.5{padding-top:.375rem;padding-bottom:.375rem} .py-2{padding-top:.5rem;padding-bottom:.5rem} .py-3{padding-top:.75rem;padding-bottom:.75rem} .pt-2{padding-top:.5rem} /* Spacing — margin */ .mx-auto{margin-left:auto;margin-right:auto} .mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem}.mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem} /* Stack spacing */ .space-y-1>:not([hidden])~:not([hidden]){margin-top:.25rem} .space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem} .space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem} .space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem} .space-y-5>:not([hidden])~:not([hidden]){margin-top:1.25rem} .space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem} .divide-y>:not([hidden])~:not([hidden]){border-top-width:1px;border-top-style:solid} .divide-gray-100>:not([hidden])~:not([hidden]){border-color:var(--gray-100)} /* Sizing */ .w-full{width:100%}.min-w-full{min-width:100%} .max-w-lg{max-width:32rem}.max-w-xs{max-width:20rem} .max-w-7xl{max-width:80rem} .h-16{height:4rem} .w-4{width:1rem}.h-4{height:1rem}.w-5{width:1.25rem}.h-5{height:1.25rem} .w-6{width:1.5rem}.h-6{height:1.5rem} /* Typography */ .text-xs{font-size:.75rem;line-height:1rem} .text-sm{font-size:.875rem;line-height:1.25rem} .text-base{font-size:1rem;line-height:1.5rem} .text-lg{font-size:1.125rem;line-height:1.75rem} .text-xl{font-size:1.25rem;line-height:1.75rem} .text-2xl{font-size:1.5rem;line-height:2rem} .text-3xl{font-size:1.875rem;line-height:2.25rem} .font-medium{font-weight:500}.font-semibold{font-weight:600} .font-bold{font-weight:700} .text-left{text-align:left}.text-center{text-align:center} .text-right{text-align:right} .uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize} .tracking-wide{letter-spacing:.025em} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .whitespace-nowrap{white-space:nowrap} .tabular-nums{font-variant-numeric:tabular-nums} .underline{text-decoration-line:underline} /* Text colours (prose ladder only — component colours live in components) */ .text-white{color:#fff} /* text-gray-400 uses gray-500: #9ca3af was 2.5:1 on white, under the 4.5:1 minimum (QA F74, Nix 2026-10-23) */ .text-gray-400{color:var(--gray-500)}.text-gray-500{color:var(--gray-500)} .text-gray-600{color:var(--gray-600)}.text-gray-700{color:var(--gray-700)} .text-gray-900{color:var(--gray-900)} .text-red-600{color:var(--red-600)} .text-red-700{color:var(--red-700)} .text-brand-600{color:rgb(var(--brand-600))} .text-brand-700{color:rgb(var(--brand-700))} /* Background / border / shape */ .bg-white{background-color:#fff}.bg-gray-50{background-color:var(--gray-50)} .border{border-width:1px;border-style:solid;border-color:var(--gray-200)} .border-t{border-top-width:1px;border-top-style:solid} .border-b{border-bottom-width:1px;border-bottom-style:solid} .border-gray-100{border-color:var(--gray-100)} .border-gray-200{border-color:var(--gray-200)} .border-gray-300{border-color:var(--gray-300)} .rounded{border-radius:var(--radius-xs)}.rounded-md{border-radius:var(--radius-sm)} .rounded-lg{border-radius:var(--radius)}.rounded-xl{border-radius:var(--radius-lg)} .rounded-full{border-radius:9999px} .shadow-sm{box-shadow:var(--shadow-sm)} .overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-auto{overflow:auto} /* A centred row that scrolls (the client and pet tab bars): plain centring pushes the first items off the left edge where scrolling cannot reach them on a phone. `safe center` centres only while everything fits; browsers without `safe` keep the flex-start line (TameLink-0ovg F71). */ .overflow-x-auto.justify-center{justify-content:flex-start;justify-content:safe center} /* Position / stacking */ .relative{position:relative}.absolute{position:absolute} .fixed{position:fixed}.inset-0{inset:0} /* Text for screen readers only, e.g. a label on an icon or an empty table header (portal QA F-20). */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0} /* Interaction */ .cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed} .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s} /* ---- Batch 1 whitelist additions (2026-08-03) — Tailwind v3.4.17 values ---- */ .max-w-sm{max-width:24rem;white-space:normal}.max-w-2xl{max-width:42rem}.max-w-md{max-width:28rem} .ml-4{margin-left:1rem}.text-blue-900{color:var(--blue-900)} .mb-3{margin-bottom:.75rem}.mt-3{margin-top:.75rem}.mt-5{margin-top:1.25rem} .mt-0\.5{margin-top:.125rem}.mb-0\.5{margin-bottom:.125rem} .pt-3{padding-top:.75rem}.pb-2{padding-bottom:.5rem} .pr-4{padding-right:1rem}.pl-4{padding-left:1rem} .px-1{padding-left:.25rem;padding-right:.25rem} .items-end{align-items:flex-end} .font-normal{font-weight:400}.italic{font-style:italic} .whitespace-pre-line{white-space:pre-line} .text-gray-300{color:var(--gray-300)}.text-gray-800{color:var(--gray-800)} .text-yellow-500{color:var(--yellow-500)}.text-yellow-700{color:var(--yellow-700)} .text-yellow-800{color:var(--yellow-800)} .w-3\.5{width:.875rem}.h-3\.5{height:.875rem} /* ---- Batch 2 whitelist additions (2026-08-05) — Tailwind v3.4.17 values ---- */ .max-w-3xl{max-width:48rem} .space-y-2\.5>:not([hidden])~:not([hidden]){margin-top:.625rem} .space-y-8>:not([hidden])~:not([hidden]){margin-top:2rem} .pt-1{padding-top:.25rem} .py-2\.5{padding-top:.625rem;padding-bottom:.625rem} .ml-auto{margin-left:auto} .gap-x-6{column-gap:1.5rem}.gap-y-1{row-gap:.25rem} .w-10{width:2.5rem}.h-10{height:2.5rem} .w-24{width:6rem}.h-24{height:6rem} .h-full{height:100%}.min-w-0{min-width:0} .object-cover{object-fit:cover} .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace} .bg-gray-100{background-color:var(--gray-100)} .bg-brand-50{background-color:rgb(var(--brand-50))} .text-brand-300{color:rgb(var(--brand-300))} /* ---- Batch 3 whitelist additions (2026-08-06) — Tailwind v3.4.17 values ---- */ .w-auto{width:auto} .w-16{width:4rem}.w-28{width:7rem} .min-w-48{min-width:12rem} .leading-none{line-height:1} .leading-relaxed{line-height:1.625} .ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-6{margin-left:1.5rem} .mr-4{margin-right:1rem} .mt-1\.5{margin-top:.375rem} .pb-5{padding-bottom:1.25rem} .pl-3{padding-left:.75rem} .pl-5{padding-left:1.25rem} .py-4{padding-top:1rem;padding-bottom:1rem} .list-disc{list-style-type:disc} .list-inside{list-style-position:inside} .space-y-0\.5>:not([hidden])~:not([hidden]){margin-top:.125rem} .border-t-2{border-top-width:2px;border-top-style:solid} .border-yellow-200{border-color:var(--yellow-200)} .text-yellow-900{color:var(--yellow-900)} /* text-green-600 uses green-700: #16a34a was 3.3:1 on white (QA F74) */ .text-green-600{color:var(--green-700)} .text-green-700{color:var(--green-700)} .text-green-800{color:var(--green-800)} .text-green-900{color:var(--green-900)} .text-orange-600{color:var(--orange-700)} /* AA on white (t1o6) */ .text-amber-600{color:var(--amber-700)} /* AA on white (t1o6) */ /* ---- Batch 4 whitelist additions (2026-08-11) — Tailwind v3.4.17 values ---- NB the six space-y-* rules the Batch-4 plan listed here were ALREADY present (lines above, in Tailwind's real `>:not([hidden])~:not([hidden])` form). They were not re-added: the plan's drafted `>*+*` form is not equivalent — it also targets hidden elements — so duplicating them would have changed behaviour. */ .max-h-24{max-height:6rem} .max-h-64{max-height:16rem} .transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s} .last\:border-b-0:last-child{border-bottom-width:0} /* REQUIRED, not optional: services/create.php binds :class="{'rotate-180':open}" on the reference-panel chevron. Alpine writes that class at runtime, so it is invisible to any static scan of the markup and there is no CDN fallback once Tailwind is dropped — without this rule the chevron silently stops flipping. Same trap class as Batch 3's JS-injected .text-orange-600 / .mt-1\.5. */ .rotate-180{transform:rotate(180deg)} /* Task 7 gaps found by the kept-token audit on services/create.php. */ .pt-4{padding-top:1rem} .pb-1\.5{padding-bottom:.375rem} .py-6{padding-top:1.5rem;padding-bottom:1.5rem} .border-gray-50{border-color:var(--gray-50)} /* .ref-panel-group carries only the 10px size (OD-C); the type badge above the reference list also needs the markup's tracking-wider. */ .tracking-wider{letter-spacing:.05em} /* ---- Batch 5 whitelist additions (2026-08-12) — Tailwind v3.4.17 values ---- */ .max-w-xl{max-width:36rem} /* invoices/remove.php page column */ .my-1{margin-top:.25rem;margin-bottom:.25rem} /* the .menu divider rule */ .pt-5{padding-top:1.25rem} .leading-snug{line-height:1.375} .border-gray-900{border-color:var(--gray-900)} .text-red-500{color:var(--red-600)} /* AA on white (t1o6) */ .w-32{width:8rem} .ml-7{margin-left:1.75rem} /* billing/invoices.php wrote this as the arbitrary `min-w-[160px]`. 160px is exactly Tailwind's min-w-40 (10rem), so it is renamed to the scale utility rather than teaching app.css its first escaped-bracket selector — same call Batch 3 made when it added .min-w-48. Zero delta. */ .min-w-40{min-width:10rem} .max-w-4xl{max-width:56rem} .max-w-5xl{max-width:64rem} /* Batch 6b: profile/index.php page column */ .ml-3{margin-left:.75rem} .my-4{margin-top:1rem;margin-bottom:1rem} /* checkout.php wrote this as the arbitrary `max-w-[12rem]`; 12rem is exactly Tailwind's max-w-48. Same rename call as .min-w-40 above. */ .max-w-48{max-width:12rem} .w-8{width:2rem}.h-8{height:2rem} .mb-8{margin-bottom:2rem}.mt-8{margin-top:2rem} .mr-3{margin-right:.75rem} .pb-4{padding-bottom:1rem} .bg-green-100{background-color:var(--green-100)} .text-blue-600{color:var(--blue-600)} .opacity-25{opacity:.25}.opacity-75{opacity:.75} .animate-spin{animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .opacity-50{opacity:.5} /* the three "coming soon" panels, invoices/remove.php */ /* ---- Batch 6a whitelist additions (2026-08-13) — Tailwind v3.4.17 values ---- On-scale renames (B6a-11): schedule.php wrote these as arbitrary values, but 16rem and 3rem are exactly Tailwind's min-w-64 and min-h-12, so they become the scale utilities rather than app.css's first escaped-bracket selectors — the same call as .min-w-40 / .max-w-48 above. Zero delta. */ .min-w-64{min-width:16rem} .min-h-12{min-height:3rem} /* Off-scale sizes preserved EXACTLY per OD-B (Nix, 2026-08-13). The unit suffix marks these as literal values — scale-step names are unitless, so .text-9px can never be misread as a step number. .text-9px deliberately states NO line-height: both sites are the arbitrary `text-[9px] leading-none`, and an arbitrary size sets font-size only, leaving the inherited line-height (Batch 4's F1 rule — the opposite of the named-size rule that bit Batch 3's .text-link and Batch 5's .menu-item). Do NOT pair it with 1rem. */ .text-9px{font-size:9px} .min-w-200px{min-width:200px} /* Task 8 gaps found by the kept-token audit on schedule.php. `grid-cols-7` is the month grid (3 sites); `gap-px` is the 1px hairline between day cells that lets the wrapper's gray-100 show through as gridlines. */ .grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))} .gap-px{gap:1px} .gap-x-4{column-gap:1rem} .gap-y-2{row-gap:.5rem} .p-1\.5{padding:.375rem} .select-none{user-select:none} /* The read-view day tile's enabled border. This one stays a utility — unlike the EDIT view's row (see .sched-day below) it is chosen by a plain PHP ternary, not by Alpine, so there is no component for it to lose to on source order. */ .border-brand-100{border-color:rgb(var(--brand-100))} /* ---- Batch 6b whitelist additions (2026-08-14) — Tailwind v3.4.17 values ---- Added by the task that proved each one survives as a plain utility rather than being absorbed by a component (see the scope note in the Batch 6b vocabulary block near the end of this file). Task 3, my-schedule/index.php: - .text-brand-500 is the "·" today-marker dot beside the date in the grid header — a one-off inline colour with no component to belong to. - .py-8 is the time-off panel's empty state. Deliberately NOT mapped to .empty-state: that component is 2.5rem on all four sides, while this box is 2rem vertical / 1.5rem horizontal, so the component would be a real change to a state the baseline shots do not even cover (the panel has requests in them). Exact Tailwind value, zero delta. Task 5, dashboard/index.php: - .bg-orange-100 / .text-orange-700 are the small round count chip beside "Pending Requests". Deliberately NOT minted as a component: the chip is a single site app-wide, and every other part of it (inline-flex, h-5, w-5, rounded-full, text-xs, font-bold) is already a defined utility, so two colour utilities is the smaller and more reversible change. This is the first task where a colour token survived as a utility rather than being absorbed — the deferral recorded in Task 1's scope note. */ .text-brand-500{color:rgb(var(--brand-500))} .py-8{padding-top:2rem;padding-bottom:2rem} .bg-orange-100{background-color:var(--orange-100)} .text-orange-700{color:var(--orange-700)} /* ---- Batch 7a whitelist additions (2026-08-17) — Tailwind v3.4.17 values ---- The eight core settings views. Notes on the three that are not routine: - .border-dashed is B7a-9. `border-dashed` was undefined, and .border already states `border-style:solid`, so settings/index.php's three "coming soon" placeholder tiles paint a SOLID edge under app.css alone. Defining it restores the dashed edge — a visible change back to the CDN's rendering, not damage. Same preflight family as Batch 6b's B6b-19. - .max-w-200px and .text-10px are B7a-12, both OD-B renames of arbitrary values in branding.php (`max-w-[200px]`, `text-[10px]`). Per Batch 4's F1 an arbitrary text size INHERITS line-height rather than copying a named pair, so .text-10px states font-size only. - .flex-shrink-0 is Tailwind's v2 alias for .shrink-0, which this file already defines. Both names are live in the markup; keeping the alias is smaller and more reversible than rewriting five call sites. */ .border-dashed{border-style:dashed} .flex-shrink-0{flex-shrink:0} .gap-8{gap:2rem}.gap-10{gap:2.5rem} .gap-x-3{column-gap:.75rem} .space-y-10>:not([hidden])~:not([hidden]){margin-top:2.5rem} .mx-1{margin-left:.25rem;margin-right:.25rem} .p-0{padding:0} .px-2\.5{padding-left:.625rem;padding-right:.625rem} .resize-none{resize:none} .shadow{box-shadow:var(--shadow)} .w-9{width:2.25rem}.w-12{width:3rem}.w-64{width:16rem} .inset-y-0{top:0;bottom:0} .right-3{right:.75rem} .tracking-widest{letter-spacing:.1em} .text-purple-700{color:var(--purple-700)} .bg-brand-700{background-color:rgb(var(--brand-700))} .max-w-200px{max-width:200px} .text-10px{font-size:10px} /* ---- Batch 7b whitelist additions (2026-08-17) — Tailwind v3.4.17 values ---- The twelve one-off admin views. Notes on the ones that are not routine: - .sticky/.bottom-0/.shadow-lg exist only for .save-bar's page (roles). They are kept as utilities rather than folded into the component because the component states the geometry and these state the positioning contract — see the .save-bar note for why that split was chosen. - .bg-gray-50\/50 and .hover\:bg-blue-50\/30 are the phase's FIRST slash-opacity utilities (roles' zebra + hover permission rows). Tailwind compiles the modifier to an alpha channel on the same colour, so these are literal `rgb(… / α)` copies, NOT a new token pair. Recon R3. - .hover\:bg-gray-700 and .bg-gray-800 serve vaccines-edit's dark "Add" button, which rides on .btn (which sets neither background nor colour, so there is no component-beats-utility conflict). Deliberately NOT minted as a .btn-dark arm: one site, and Batch 10 can name it if a second appears. - .h-12 and .pt-6 are also on the Batch 10 layouts-sweep list (progress.md); defining them here does not close that item, which is about auditing views/layouts/*.php, not about these names existing. - .w-48 as a BARE utility (added at Task 13). Only `.field-input.w-48` existed, and the token audit reads that compound as defining `w-48`, so the gap was invisible to the tool: tax.php's three rate boxes sit in a plain `relative w-48` wrapper that anchors the "%" glyph, and without a bare rule the wrapper would go full-width the moment the CDN is dropped, throwing the glyph to the far right. Value is Tailwind's own 12rem, so it is zero delta, and it does not weaken `.field-input.w-48` — that compound is (0,2,0) and still beats .field-input's width:100%. billing/deposits.php:106 carries the same wrapper and will need it too. */ .sticky{position:sticky} .bottom-0{bottom:0} .self-center{align-self:center} .self-start{align-self:start} .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .p-5{padding:1.25rem} .pt-6{padding-top:1.5rem}.pb-6{padding-bottom:1.5rem}.pl-6{padding-left:1.5rem} .pb-8{padding-bottom:2rem} .py-12{padding-top:3rem;padding-bottom:3rem} .h-12{height:3rem}.h-48{height:12rem} .w-48{width:12rem} .bg-gray-800{background-color:var(--gray-800)} .hover\:bg-gray-50:hover{background-color:var(--gray-50)} .hover\:bg-gray-100:hover{background-color:var(--gray-100)} .hover\:bg-gray-200:hover{background-color:var(--gray-200)} .hover\:bg-gray-700:hover{background-color:var(--gray-700)} .hover\:no-underline:hover{text-decoration-line:none} .bg-gray-50\/50{background-color:rgb(249 250 251 / 0.5)} .hover\:bg-blue-50\/30:hover{background-color:rgb(239 246 255 / 0.3)} /* ---- Batch 9 whitelist additions (2026-08-18) — Tailwind v3.4.17 values ---- Portal booking/shop views. Everything else the token audit flagged this batch maps onto an existing component (.btn-primary, .field-input, .alert-success/.alert-error, .avatar/.avatar-fallback/.avatar-lg) and needs no new CSS — see the plan's Recon section (R8-R11). These eight are the only genuinely new tokens. */ .aspect-square{aspect-ratio:1/1} /* shop.php product image tile */ .aspect-square.shop-tile-empty{aspect-ratio:auto;height:8rem} /* no photo: short placeholder, not a phone-tall square (CPv-10) */ .line-clamp-3{display:-webkit-box;-webkit-line-clamp:3; -webkit-box-orient:vertical;overflow:hidden} /* shop.php product description */ .text-gray-200{color:var(--gray-200)} /* shop.php empty-image placeholder icon */ /* Parallel to the existing .bg-green-100 utility; matches --red-100, the same variable .badge-red already uses. questionnaire.php's Yes/No answer chips are plain rounded (not pill) utility markup — every other class on those chips (px-2.5, py-1, rounded, text-sm, font-medium, text-red-700) already exists, so this one gap is filled as a bare utility rather than reaching for .badge-sq, whose padding is a different, smaller size (see R9). */ .bg-red-100{background-color:var(--red-100)} /* bookings.php's "Clear" filter link is `rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700` — a padded pill, not the plain-text .back-link shape (no padding/radius/weight there), so it stays raw utility markup and only this one missing hover leg needs filling. */ .hover\:text-gray-700:hover{color:var(--gray-700)} /* shop.php's cart-count pill is `bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700` — NOT .badge-brand: that component was byte-copied from the dashboard's brand-800 "In Progress" pill (Batch 6b) and its .badge base padding is px-2.5, both a delta from this site. Filled as a bare utility instead, same reasoning as .bg-red-100 above. */ .bg-brand-100{background-color:rgb(var(--brand-100))} /* Compound override for the Add-to-cart button's icon gap. .btn sets gap:.5rem and sits AFTER the utilities block, so a bare .gap-1 (.25rem) loses to it on source order — the same component-beats-utility hazard as the .field-input compounds above. Stated at (0,2,0) to win regardless of order. Byte-copied from the markup's own `gap-1`. */ .btn.gap-1{gap:.25rem} /* Same idiom, .gap-3 leg — login.php's "Sign in with Microsoft" OAuth button wants gap:.75rem, not .btn's own gap:.5rem. Batch 10 Task 8. */ .btn.gap-3{gap:.75rem} /* ---- Batch 10 whitelist additions (2026-08-19) — agreements/contracts admin + auth. Everything else the token audit flagged this batch maps onto an existing component (.field-input, .field-error, .field-check, .btn-primary, .btn-secondary, .btn-danger-soft, .max-h-24, .max-w-xs) or an existing hover idiom (.hover-brand, .hover-underline — see the B10-3-style correction below) and needs no new CSS. These ten are the genuinely new tokens. */ .pr-3{padding-right:.75rem} .pr-10{padding-right:2.5rem} .h-20{height:5rem} .p-8{padding:2rem} .border-2{border-width:2px} .divide-gray-200>:not([hidden])~:not([hidden]){border-color:var(--gray-200)} .hover\:border-brand-300:hover{border-color:rgb(var(--brand-300))} .hover\:text-brand-700:hover{color:rgb(var(--brand-hover))} .hover\:text-brand-800:hover{color:rgb(var(--brand-hover-strong))} .hover\:text-red-700:hover{color:var(--red-700)} .hover\:text-gray-600:hover{color:var(--gray-600)} .placeholder-gray-400::placeholder{color:var(--gray-500)} /* AA on white (t1o6) */ .text-5xl{font-size:3rem;line-height:1} .bg-green-600{background-color:var(--green-700)} /* white text contrast, as .text-green-600 already maps (CPv-05) */ .hover\:bg-green-700:hover{background-color:var(--green-800)} /* Compound override so .field-input's own `padding:.5rem .75rem` shorthand doesn't beat the bare .pr-10 at equal specificity (component-beats-utility hazard, source order) — same idiom as .btn.gap-1 above. Password show/hide icon spacing on login.php/register.php/change-password.php. */ .field-input.pr-10{padding-right:2.5rem} /* ---- Batch 10 Task 13 additions (2026-08-19) — shared layouts (views/layouts/app.php + auth.php). Closes the 12-token audit gap on the app's shared chrome (progress.md's Batch-10-carry-forward layouts sweep). app.php's portal-footer `hover:text-brand-600` reuses the existing .hover-brand idiom (Task 1's B10-3-style decision) instead of a new bare hover utility — markup changed, no CSS needed for that one. */ .min-h-full{min-height:100%} .mt-12{margin-top:3rem} .tracking-tight{letter-spacing:-.025em} .max-w-180px{max-width:180px} .max-w-260px{max-width:260px} /* ---- Batch 10 Task 14 additions (2026-08-19) — views/cart/index.php, the last CDN-audit gap before the Tailwind CDN can be dropped. Notice-box blue reuses the .alert-info palette vars but not .alert itself (its padding is p-3 uniform, not .alert's .75rem 1rem asymmetric shorthand). .hover\:text-red-500 mints the hover leg for the existing bare .text-red-500 (line ~289). .btn.py-3 follows the .btn.gap-1/.btn.gap-3 compound-override idiom above for the "Proceed to Checkout" button's taller padding. */ .bg-blue-50{background-color:var(--blue-50)} .border-blue-200{border-color:var(--blue-200)} .hover\:text-red-500:hover{color:var(--red-600)} /* AA on white (t1o6) */ .top-6{top:1.5rem} .btn.py-3{padding-top:.75rem;padding-bottom:.75rem} /* admin/questionnaire/show.php's Pending badge is px-3 py-1 text-sm — a different size than the .badge/.badge-yellow component (.125rem .625rem padding, .75rem font), so it's a bare-utility gap, not a component match. .text-yellow-700 already exists (line ~213). */ .bg-yellow-100{background-color:var(--yellow-100)} /* admin/billing/deposits.php — flash boxes are px-4 py-3 text-sm, which IS .alert's exact box model, but the source markup is a bare div, not using the .alert class; mapped as bare utilities to avoid a markup restructure for a single deferred page. .field-input.pl-7 is the "$" prefix-icon input (invoice_threshold_amount), same compound-override idiom as .field-input.pr-10 above. .btn.px-6 is the Save button's wider horizontal padding, same idiom as .btn.py-3/.btn.gap-3. Checkbox/ radio inputs converted to the existing .field-check/.field-radio components instead of minting bare focus:ring-brand-500 (OD-established idiom, Batch 7b Task 1). */ .bg-green-50{background-color:var(--green-50)} .border-green-200{border-color:var(--green-200)} .bg-red-50{background-color:var(--red-50)} .border-red-200{border-color:var(--red-200)} .text-red-800{color:var(--red-800)} .field-input.pl-7{padding-left:1.75rem} .btn.px-6{padding-left:1.5rem;padding-right:1.5rem} /* portal/booking-confirm.php — last file in the Task 14 CDN-removal audit. "Sign Contract"/"Complete Assessment" pill links are px-3 py-1.5 text-xs rounded (.25rem radius) — close to .btn-sm's box model but .btn's border-radius:var(--radius) (.5rem) would round the corners more than the source, so mapped as bare utilities rather than .btn.btn-sm to hold pixel parity. Status badge's completed/overridden PHP status strings are confirmed non-class literals (Task 14 audit triage), not real tokens. */ .bg-brand-600{background-color:rgb(var(--brand-600))} .hover\:bg-brand-700:hover{background-color:rgb(var(--brand-hover))} .bg-yellow-50{background-color:var(--yellow-50)} .bg-blue-100{background-color:var(--blue-100)} .text-blue-700{color:var(--blue-700)} /* Responsive — the app's two informal breakpoints, kept verbatim. sm: = form-grid collapse idiom; md: = nav mobile/desktop swap. */ @media (min-width:640px){ .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))} /* F-50: profile city/state/zip 2/1/2 from 640px */ .sm\:col-span-2{grid-column:span 2/span 2} .sm\:flex-row{flex-direction:row} .sm\:items-center{align-items:center} .sm\:justify-between{justify-content:space-between} .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem} .sm\:col-span-1{grid-column:span 1/span 1} /* Batch 7a: blackouts create-form grid */ .sm\:mx-auto{margin-left:auto;margin-right:auto} /* Batch 10 Task 13: auth.php card wrap */ .sm\:w-full{width:100%} /* Batch 10 Task 13: auth.php card wrap */ .sm\:max-w-md{max-width:28rem} /* Batch 10 Task 13: auth.php card wrap */ .sm\:px-10{padding-left:2.5rem;padding-right:2.5rem} /* Batch 10 Task 14: register.php card */ } @media (min-width:768px){ .md\:hidden{display:none} .md\:flex{display:flex} .md\:block{display:block} .md\:inline-flex{display:inline-flex} .md\:items-center{align-items:center} /* Batch 10 Task 13: nav desktop row */ .md\:gap-1{gap:.25rem} /* Batch 10 Task 13: nav desktop links */ .md\:gap-3{gap:.75rem} /* Batch 10 Task 13: nav user-menu row */ /* TameLink-xb1s (Nix, 2026-10-08): page layouts hold two columns from 768px, not 1024px, so a half-screen window or a tablet does not stack. A sidebar page pairs `md:grid-cols-2 lg:grid-cols-3` — two equal columns here, its 1/3 + 2/3 split from 1024px — so the narrow column's forms are not squeezed. Must stay above the lg: block: the lg: rules win at 1024px by source order. */ .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} /* invoices/detail top row */ .md\:flex-row{flex-direction:row} /* admin/settings two-column index */ .md\:items-start{align-items:flex-start} /* admin/settings two-column index */ } @media (min-width:1024px){ .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .lg\:px-8{padding-left:2rem;padding-right:2rem} .lg\:col-span-2{grid-column:span 2/span 2} .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))} .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))} /* Batch 6b: dashboard stat row */ .lg\:col-span-3{grid-column:span 3/span 3} /* Batch 4 (2026-08-11) — services/create.php two-column + sticky sidebar */ .lg\:flex-row{flex-direction:row} .lg\:max-w-2xl{max-width:42rem} .lg\:sticky{position:sticky} .lg\:top-4{top:1rem} .lg\:w-80{width:20rem} .lg\:items-start{align-items:flex-start} /* Batch 7a: settings index two-column */ .lg\:col-span-1{grid-column:span 1/span 1} /* Batch 7b: report_cards/edit sidebar */ } /* First xl: tier in the project (Batch 9) — Tailwind's own 1280px step, needed only for shop.php's 4-up product grid. Mechanical extension of the sm:/md:/lg: pattern above, not a new breakpoint decision. */ @media (min-width:1340px){ .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} } /* ---------- COMPONENTS: buttons ---------- */ /* BOX-MODEL RULE — read before mapping any button, and before writing a register entry that claims "padding is an exact match". `.btn` states `border:1px solid transparent` so that a bordered `.btn-secondary` and an unbordered `.btn-primary` sitting in the same row are the same height. The consequence, which is easy to miss when comparing padding alone: - a button that had NO border pre-conversion grows exactly 2px in BOTH axes; - a button that already had a 1px border is zero-delta (ours replaces theirs). So `.btn` = 20px line-box + 8+8 padding + 1+1 border = 38px, and `.btn-sm` = 16 + 6+6 + 2 = 30px. Matching padding is NOT the same as matching geometry. (Ruled by Nix 2026-08-10, Task 10 mobile-diff finding F5, after the Batch 3 register mis-stated the height of every button entry by this 2px. Registered as B3-21; Batches 4-6 inherit this rule rather than rediscovering it.) */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; border-radius:var(--radius);padding:.5rem 1rem; font-size:.875rem;line-height:1.25rem;font-weight:600; border:1px solid transparent;cursor:pointer; transition:color .15s,background-color .15s,border-color .15s} .btn:focus-visible{outline:none;box-shadow:var(--ring)} .btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none} .btn-primary{background:rgb(var(--brand-600));color:#fff} .btn-primary:hover{background:rgb(var(--brand-hover))} .btn-secondary{background:#fff;color:var(--gray-700);border-color:var(--gray-300);font-weight:500} .btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-400)} /* Dashed "add another" affordance (Time Clock Report's + Add Manual Punch). Sits on .btn, so it is zero-delta on geometry per the BOX-MODEL RULE above — the markup already carried a 1px border and ours replaces it. Resets font-weight to 400 because .btn is 600 and this control is deliberately quiet. Byte-copied incl. both hover legs. Batch 6b Task 6. */ .btn-dashed{background:none;border-style:dashed;border-color:var(--gray-300); color:var(--gray-500);font-weight:400} .btn-dashed:hover{border-color:rgb(var(--brand-400));color:rgb(var(--brand-600))} /* Borderless quiet button — profile/index.php's Cancel, which carries full .btn padding but no border and no fill, so it reads as text beside the solid Save. NOT .btn-link: that strips the padding to zero and would let Save shift left. Grows 2px in both axes per the BOX-MODEL RULE (it had no border to replace). Batch 6b Task 7. */ .btn-ghost{background:none;color:var(--gray-600);font-weight:500} .btn-ghost:hover{color:var(--gray-800)} .btn-danger{background:var(--red-600);color:#fff} .btn-danger:hover{background:var(--red-700)} .btn-danger-outline{background:#fff;color:var(--red-700);border-color:var(--red-300);font-weight:500} .btn-danger-outline:hover{background:var(--red-50)} /* Soft-filled danger button (bookings/show.php "Cancel Booking") — a bolder fill than .btn-danger-outline, byte-copied from the markup */ .btn-danger-soft{background:var(--red-50);color:var(--red-700); border-color:var(--red-200);font-weight:500} .btn-danger-soft:hover{background:var(--red-100)} /* Soft-filled brand button (products/index.php "Add to Cart") — the brand sibling of .btn-danger-soft above. Ruled by Nix 2026-08-11; the same idiom recurs in settings/hours*.php, which Batch 7 converts. Borderless by design: .btn's transparent border supplies the 1px, matching the markup's fill-only look (the +2px this costs is registered as B4-13). */ .btn-brand-soft{background:rgb(var(--brand-50));color:rgb(var(--brand-700))} .btn-brand-soft:hover{background:rgb(var(--brand-100))} /* Brand twin of .btn-danger-outline above (invoices/show.php "Email Invoice"). Byte-copied from `border border-brand-300 bg-white px-4 py-2 text-sm font-medium text-brand-700 hover:bg-brand-50` — zero delta, and already bordered, so B5-6's +2px does not apply here. */ .btn-brand-outline{background:#fff;color:rgb(var(--brand-700)); border-color:rgb(var(--brand-300));font-weight:500} .btn-brand-outline:hover{background:rgb(var(--brand-50))} /* Muted twin of .btn-brand-soft — the disabled "Add to Cart" shown when no customer is selected. The gray fill IS the disabled affordance, and the markup carries no opacity, so .btn:disabled's generic dimming is switched off here rather than stacking on top of it. */ .btn-muted{background:var(--gray-100);color:var(--gray-600)} /* Solid orange / solid green / soft red action buttons — employees/timeoff.php (Reassign, Approve, Deny). .btn-danger-soft already exists but is red-50 on rest and red-100 on hover; Deny is one step darker (red-100 -> red-200), so it gets its own modifier rather than shifting a shared one. Byte-copied. */ .btn-orange{background:var(--orange-700);color:#fff} /* white on orange-600 was 3.6:1 (t1o6) */ .btn-orange:hover{background:var(--orange-800)} .btn-approve{background:var(--green-700);color:#fff} /* white on green-600 was 3.3:1 (EPv-04) */ .btn-approve:hover{background:var(--green-800)} .btn-deny{background:var(--red-100);color:var(--red-700)} .btn-deny:hover{background:var(--red-200)} .btn.btn-muted:disabled{opacity:1} /* Bare "×" dismiss control (chip clear, modal close). Owns colour, reset, line-height AND size — pair it with one of the two size modifiers below. Do NOT size it with a Tailwind text-* utility (Task 10 diff finding F4, ruled by Nix 2026-08-10): while the CDN still loads, a utility's line-height BEATS this rule. Both are (0,1,0), and the CDN injects its copy after app.css, so `.text-base` re-imposed a 1.5rem line box and silently undid the `leading-none` the pre-conversion markup carried — growing the chip 4px and the modal close 8px. Keeping the size inside the component leaves no utility on the element for the CDN to win with. */ .btn-close{background:none;border:none;padding:0;line-height:1; color:var(--gray-500);cursor:pointer} .btn-close:hover{color:var(--gray-600)} .btn-close-base{font-size:1rem} .btn-close-lg{font-size:1.25rem} .btn-sm{padding:.375rem .75rem;font-size:.75rem;line-height:1rem} .btn-lg{padding:.625rem 1.5rem} .btn-xs{padding:.25rem .5rem;font-size:.75rem;line-height:1rem;border-radius:var(--radius-sm)} /* Text-only action links (row actions, modal cancel) */ .btn-link{background:none;border:none;padding:0;font-size:.875rem;line-height:1.25rem; font-weight:500;color:rgb(var(--brand-600));cursor:pointer} .btn-link:hover{color:rgb(var(--brand-hover));text-decoration-thickness:2px} .btn-link:focus-visible{outline:none;box-shadow:var(--ring);border-radius:.125rem} /* Underline text links so they read as links, not labels (Nix 2026-09-30, TameLink-gyb1). Dismiss and quiet variants stay plain. */ .btn-link:not(.btn-link-dismiss):not(.btn-link-quiet){text-decoration:underline;text-underline-offset:2px} .btn-link-danger{color:var(--red-600)} .btn-link-danger:hover{color:var(--red-700)} .btn-link-muted{color:var(--gray-500)} .btn-link-muted:hover{color:var(--gray-700)} /* Action link sitting inside an .alert-info panel (products/index.php "Change"), where brand-600 would fight the blue surround. Ruled by Nix 2026-08-11. Pair with .btn-link-sm — the markup is 12px. */ .btn-link-info{color:var(--blue-600)} .btn-link-info:hover{color:var(--blue-800)} .btn-link-sm{font-size:.75rem;line-height:1rem} /* OD-2 (ruled by Nix 2026-08-06): muted text link whose hover reads as a destructive action — the discount "Remove" link (create.php:509). Used as .btn-link.btn-link-sm.btn-link-dismiss. font-weight:400 because the markup has no weight class today and .btn-link's own 500 would otherwise apply. line-height:1rem is redundant since .btn-link-sm gained text-xs's line-height (Task 10 diff finding F1, 2026-08-07); kept so the modifier stands alone. */ .btn-link-dismiss{color:var(--gray-500);font-weight:400;line-height:1rem} .btn-link-dismiss:hover{color:var(--red-600)} /* Quiet gray text link (invoices/show.php "Print ↗"). Same shape as .btn-link-dismiss above — including font-weight:400, because the markup carries no font-weight class and .btn-link's 500 would otherwise thicken it. */ /* gray-500, not 400: gray-400 is 2.5:1 on white, under the 4.5:1 text minimum (TameLink-9hag F74). */ .btn-link-quiet{color:var(--gray-500);font-weight:400} .btn-link-quiet:hover{color:var(--gray-600)} /* Faint row-action link that warms to brand on hover — settings/services.php's "Edit →". NOT .btn-link-quiet above: that is font-weight 400 and hovers to gray-600; this one keeps .btn-link's 500 and hovers to brand-600. Used as .btn-link.btn-link-sm.btn-link-faint. Byte-copied from `text-xs font-medium text-gray-400 hover:text-brand-600 transition-colors` — colours and size are zero delta; the markup's `transition-colors` is dropped because no member of the .btn-link family carries one, so the hover colour change is instant instead of fading over 150ms. Batch 7a Task 8. */ .btn-link-faint{color:var(--gray-500)} .btn-link-faint:hover{color:rgb(var(--brand-hover-text))} /* The destructive sibling of .btn-link-faint above, and the exact parallel of it: a quiet 12px row action that only commits to red on hover. Byte-copied from settings/vaccines-edit.php:94 (`text-xs text-red-400 hover:text-red-600`) — zero delta. NOT .btn-link-danger: that is red-600 at rest and would make the "Remove" link shout beside the gray-400 "Set default" it sits next to. Use as .btn-link.btn-link-sm.btn-link-danger-faint.btn-link-normal — the fourth class is NOT optional here (corrected at Batch 7b Task 12): the markup carries no weight class, so it renders at 400, and .btn-link's own 500 would thicken it. The same applies to the "Set default" link beside it, which is .btn-link-faint without a `font-medium` (unlike services.php's "Edit →", the arm that rule was byte-copied from). Batch 7b Task 1. */ /* t1o6: red-400 was 2.8:1 on white; red-600 is the lightest red that passes AA. */ .btn-link-danger-faint{color:var(--red-600)} .btn-link-danger-faint:hover{color:var(--red-700)} /* Weight-only modifier, Batch 6b Task 2. The breadcrumb/back-link idiom (`text-sm text-gray-500 hover:text-gray-700` with NO weight class) is .btn-link-muted's colours at font-weight 400 — .btn-link's own 500 would otherwise thicken it, the same trap .btn-link-dismiss and .btn-link-quiet each solved by baking 400 into their colour rule. A third near-synonym colour modifier (quiet/muted/subtle) would be unreadable, so the weight is split out instead: use `.btn-link .btn-link-muted .btn-link-normal`. ~10 more sites app-wide in unconverted views (agreements, contracts, settings/*, questionnaire, report_cards) will want this too. */ .btn-link-normal{font-weight:400} /* Inline link inside body copy — the sibling of .btn-link above, and NOT interchangeable with it. .btn-link is a standalone action control and states its own size and weight; .text-link deliberately states neither, so it inherits the sentence it sits in. Use .btn-link for row actions and modal cancels, .text-link for a link mid-paragraph. (Ruled by Nix 2026-08-07, Task 10 diff finding F3: settings.php:39 had been mapped to .btn-link, which forced 14px/20px text inside a 12px/16px paragraph and grew the card 3px.) */ .text-link{color:rgb(var(--brand-600));text-decoration-line:none} .text-link:hover{text-decoration-line:underline} .text-link:focus-visible{outline:none;box-shadow:var(--ring);border-radius:.125rem} /* ---------- COMPONENTS: form fields ---------- */ .field-label{display:block;font-size:.875rem;line-height:1.25rem; font-weight:500;color:var(--gray-700);margin-bottom:.25rem} /* Small uppercase field label — the Time Clock Report filter bar. Same typography as .data-table th (12px/600/gray-500/uppercase/tracking-wide) but as a form label, so it keeps .field-label's bottom margin. Byte-copied from `block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1` — zero delta. Batch 6b Task 6. */ .field-label-xs{display:block;font-size:.75rem;line-height:1rem;font-weight:600; color:var(--gray-500);text-transform:uppercase;letter-spacing:.025em; margin-bottom:.25rem} .field-input{display:block;width:100%;border-radius:var(--radius); border:1px solid var(--gray-300);padding:.5rem .75rem; font-size:.875rem;line-height:1.25rem;background:#fff; box-shadow:var(--shadow-sm)} .field-input:focus{outline:none;box-shadow:var(--shadow-sm),var(--ring)} .field-input.is-invalid{border-color:var(--red-400)} .field-input:read-only:not(select),.field-input.is-locked{ background:var(--gray-50);border-color:var(--gray-200);color:var(--gray-600)} textarea.field-input{resize:vertical} /* Resize escape hatch — the OD-15/OD-16 compound-class remedy, the same shape as `.data-table th.text-right` above and for the same reason: the rule on the line above is (0,1,1), so a plain `.resize-none` (0,1,0) is silently ignored and the textarea stays draggable. Found at Batch 7a Task 4 on settings/blackouts.php, whose Notes box is written `resize-none` and whose baseline asserts `resize:none`; converting it to .field-input without this would have made it resizable. blackouts is the only site pairing the two today, checked repo-wide. */ textarea.field-input.resize-none{resize:none} .field-input-price{padding-left:1.75rem} /* room for the absolute $ glyph */ .field-input-affix{padding-right:2.5rem} /* room for a right-side affix button */ /* Room for a right-side GLYPH (settings/discounts.php's "%" on the Amount box), as .field-input-price above is for a left-side one. Distinct from .field-input-affix: that one clears a whole button at 2.5rem, this clears a single character at 2rem, byte-copied from the markup's `pr-8`. Minted rather than left as that utility because .field-input's `padding` shorthand is (0,1,0) in COMPONENTS and would swallow it once the Tailwind CDN is dropped — the same trap as .card-placeholder (OD-J), and ruled the same way by Nix 2026-08-17. Batch 7a Task 5. Zero delta. settings/tax.php carries the same `pr-8` on three rate boxes and should reuse this at Batch 7b — which is also why `.pr-8` stays in the whitelist rather than being retired here. */ .field-input-suffix{padding-right:2rem} /* ---- Batch 7b: three compound-selector remedies, recon R6 ---- The component-beats-utility hazard, 6th-10th occurrence. `.field-input` lives in COMPONENTS and the utilities block sits EARLIER in this file, so at equal (0,1,0) specificity the component wins every tie. These three pairings are live in the markup today and work ONLY because the Tailwind CDN injects after app.css and re-wins — each breaks silently the moment the CDN is dropped at Batch 10. Stating them as (0,2,0) compounds makes today's rendering survive that removal. ZERO DELTA, now and after. Never weaken .field-input, never reach for !important. Same idiom as `textarea.field-input.resize-none` above and `.data-table th.text-right`. */ .field-input.w-32{width:8rem} /* vaccines-edit: the "Label" mini-form box */ .field-input.w-24{width:6rem} /* vaccines-edit: the "Months" mini-form box */ .field-input.text-xs{font-size:.75rem;line-height:1rem} /* email-templates/edit: the two code textareas */ /* Third-level compound: agreements create/edit's section-body textarea wants text-xs's font-size but leading-relaxed's line-height (1.625), not text-xs's own 1rem — the same component-beats-utility hazard one level deeper. (0,3,0) to win over .field-input.text-xs's (0,2,0). Batch 10 Task 3. */ .field-input.text-xs.leading-relaxed{line-height:1.625} .field-input.border-brand-300{border-color:rgb(var(--brand-300))} /* agreements-sign: the per-section initials box */ .field-input-inline{display:inline-block;width:auto;padding:.25rem .5rem; font-size:.75rem;line-height:1rem;border-radius:var(--radius-sm)} /* Shrink-to-fit .field-input at the FULL size — schedule.php's "Effective from" date picker, which is a normal 14px control that simply is not full-bleed. .field-input-inline is not the match: it would also drop it to 12px and 6px corners. Width has to live in a component, not a `w-auto` utility, because .field-input's width:100% would win on source order (the OD-15 trap). */ .field-input-auto{display:inline-block;width:auto} /* 12px size step for .field-input — settings/hours.php's "Select service" dropdown, and the same control on hours-edit and services. Byte-copied from `px-3 py-1.5 text-xs`; it deliberately keeps .field-input's radius, border, shadow and 2px focus ring, which is the whole reason it is a modifier and not a standalone rule. NOT .field-input-mini: that is a different control (4px radius, .25rem/.5rem padding, 1px focus ring). Pair with .field-input-auto where the select must not stretch. Batch 7a Task 6. Zero delta. */ .field-input-sm{padding:.375rem .75rem;font-size:.75rem;line-height:1rem} /* Tighter padding at the FULL 14px size — settings/hours-edit.php's 14 time pickers, byte-copied from `px-2 py-1.5`. Nix ruled 2026-08-17 that these keep their current size rather than dropping to .field-input-inline, which is what the two employee schedule pages use (12px text, 4px radius): matching those would visibly shrink every picker on the batch's most-photographed page. So the app knowingly carries two time-picker sizes. Pair with .field-input-auto — the markup sets no width. Batch 7a Task 7. Zero delta. */ .field-input-tight{padding:.375rem .5rem} /* Standalone compact control (employees/timeoff.php's review-notes textarea). NOT a .field-input modifier: .field-input-inline sets display:inline-block and width:auto, which would stop this textarea stretching in its flex column, and .field-input would add a shadow and a 2px focus ring the markup does not have. Deliberately states no display or width, so the flex stretch is preserved exactly. Byte-copied, including the 1px focus ring. */ .field-input-mini{border-radius:var(--radius-xs);border:1px solid var(--gray-300); padding:.25rem .5rem;font-size:.75rem;line-height:1rem;background:#fff} .field-input-mini:focus{outline:none;box-shadow:0 0 0 1px rgb(var(--brand-500))} /* Right-side in-input button (password reveal etc.) — wrap input in .relative */ .field-affix{position:absolute;top:0;bottom:0;right:0;display:flex;align-items:center; padding-right:.75rem;color:var(--gray-500);background:none;border:none;cursor:pointer} .field-affix:hover{color:var(--gray-600)} /* Left-side in-input affix (the "$" on money inputs) — wrap input in .relative. Mirror of .field-affix, which is right-side only. */ .field-affix-left{position:absolute;top:0;bottom:0;left:0;display:flex; align-items:center;padding-left:.625rem;color:var(--gray-500); font-size:.875rem;line-height:1.25rem} /* Compact right-aligned money input with room for .field-affix-left (booking discount). Width stays a utility (.w-28). */ .field-amount{border-radius:var(--radius);border:1px solid var(--gray-300); padding:.375rem .5rem .375rem 1.5rem;font-size:.875rem;line-height:1.25rem; text-align:right;background:#fff;box-shadow:var(--shadow-sm)} .field-amount:focus{outline:none;box-shadow:var(--shadow-sm),var(--ring)} /* Small quantity input (products modal). Width stays a utility (.w-16). */ .field-qty{border-radius:.25rem;border:1px solid var(--gray-300); padding:.25rem .5rem;font-size:.875rem;line-height:1.25rem;background:#fff} .field-qty:focus{outline:none;box-shadow:var(--ring)} /* Width overrides for .field-input in inline contexts (filter bars, small numeric fields). COMPOUND selectors deliberately: .field-input sets width:100% and lives after the utilities block, so a bare .w-auto/.w-24 utility can never win on source order. Specificity decides instead. */ .field-input.w-auto{display:inline-block;width:auto} .field-input.w-24{display:inline-block;width:6rem} /* Batch 4: services create/edit use `block w-48` on the minutes/length numeric inputs — display stays block here, unlike the two inline cases above. */ .field-input.w-48{width:12rem} /* Batch 5: billing/invoices.php's "cancel after N days" input. Width only, as with .w-48 — it is a flex item, so display is blockified anyway. */ .field-input.w-20{width:5rem} /* Batch 5: the invoices index search box is `w-72`. Compound for the same reason as the two above — a bare .w-72 utility sits before this block and would lose to .field-input's width:100%. Display stays block, as with .w-48; the input is a flex item either way, so nothing moves. */ .field-input.w-72{width:18rem} /* Batch 7a: settings/hours.php's "Gap Between Appointments" (w-28) and "New Schedule" name box (w-64). Same reason as every rule above — the bare utilities sit in the utilities block and lose to .field-input's width:100%. Display stays block, as with .w-48 and .w-72. */ .field-input.w-28{width:7rem} .field-input.w-64{width:16rem} /* OD-1 (ruled by Nix 2026-08-06): compact input/select for tight rows — the booking status