/* ============================================================================
   Page styles — Dashboard & Reception Enquiries (v2, "Boardroom + Studio")
   ----------------------------------------------------------------------------
   WHY THIS EXISTS — these are the two screens staff opens most, and they
   render through the same Tailwind component set, so out of the box they
   look like one continuous grey scroll. v1 softened them with the brand
   purple; this version commits to two deliberately OPPOSITE design
   languages so each page has its own identity, while staying 100% style
   only: no markup, route, or logic change. The CSS hooks onto classes the
   compiled bundle already emits — the same approach the other files in
   public/custom take.

   THE TWO LOOKS
   * Dashboard  → "BOARDROOM": a deep navy canvas; the KPI cards, charts and
     calendar float on it as white paper sheets with a 3px gold rule on top.
     KPI numerals set in Fraunces (an editorial serif) so the numbers read
     like an annual report. Segmented navy pill tabs, gold "today" marker.
     Calm, premium, high-contrast.
   * Enquiries  → "SWISS STUDIO": warm paper canvas, near-black ink
     typography, one vermillion accent, crisp geometry (small radii, ruled
     lines, a heavy 2px rule under the table header, a 3px ink rule on top
     of the workspace panel). Buttons invert to solid ink on hover; the
     primary CTA is a solid ink block. Sharp, fast to scan, tool-like.

   SCOPING — page-styles.js mirrors the current route onto <body> as
   `page-dashboard` / `page-reception-enquiries` on every SPA navigation.
   Every rule below is namespaced under those body classes; dark mode is
   body.dark (the app's setLayout action), handled by explicit
   body.page-*.dark overrides after the light rules.
   ========================================================================== */

/* Editorial serif for the dashboard's Latin numerals + month heading.
   Arabic text is unaffected (Fraunces has no Arabic glyphs; fallback stays
   Inter/system Arabic). display=swap keeps render non-blocking. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,900&display=swap');

/* ---------------------------------------------------------------- tokens -- */

/* Dashboard — Boardroom */
body.page-dashboard {
    --db-canvas: #0e1726;
    --db-card: #ffffff;
    --db-rail: #fbf8f1;
    --db-line: #e8e2d2;
    --db-ink: #16233d;
    --db-ink-soft: rgba(22, 35, 61, 0.6);
    --db-gold: #c9a227;
    --db-gold-deep: #a8861b;
    --db-radius: 12px;
    --db-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* Enquiries — Swiss studio */
body.page-reception-enquiries {
    --eq-canvas: #faf9f5;
    --eq-card: #ffffff;
    --eq-ink: #101010;
    --eq-ink-soft: #6b675e;
    --eq-line: #e6e2d6;
    --eq-accent: #d94f30;
    --eq-accent-soft: #fbeee9;
    --eq-radius: 8px;
    --eq-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, Menlo, monospace;
}

/* Dark mode (body.dark) — Boardroom goes darker navy, Studio inverts to
   paper-on-charcoal with the ink rule becoming paper-white. */
body.page-dashboard.dark {
    --db-canvas: #0a0e1a;
    --db-card: #141d31;
    --db-rail: rgba(255, 255, 255, 0.03);
    --db-line: rgba(255, 255, 255, 0.08);
    --db-ink: #f4ede0;
    --db-ink-soft: rgba(244, 237, 224, 0.55);
    --db-gold: #d4af5a;
    --db-gold-deep: #b8933e;
}

body.page-reception-enquiries.dark {
    --eq-canvas: #131315;
    --eq-card: #1c1c1f;
    --eq-ink: #f5f2ea;
    --eq-ink-soft: #a8a49b;
    --eq-line: rgba(255, 255, 255, 0.1);
    --eq-accent: #ff6a3d;
    --eq-accent-soft: rgba(255, 106, 61, 0.1);
}

/* ============================================================================
   1) DASHBOARD — "Boardroom"
   ========================================================================== */

/* --- Canvas -------------------------------------------------------------- */

/* Deep navy stage: everything floats on it as paper. */
body.page-dashboard main {
    background: var(--db-canvas);
}

/* The version footer line sits directly on the canvas — keep it legible. */
body.page-dashboard main > .my-4 {
    color: rgba(255, 255, 255, 0.38);
}

/* --- KPI band ------------------------------------------------------------ */

/* The old black slab dissolves into the navy canvas; the stat cards float. */
body.page-dashboard main .bg-black.px-4 {
    background: transparent !important;
}

/* Stat trio cards: white paper sheets with a 3px gold rule on top. */
body.page-dashboard main .relative.w-full.rounded-lg {
    background: var(--db-card);
    border: 1px solid rgba(14, 23, 38, 0.08);
    border-top: 3px solid var(--db-gold);
    border-radius: var(--db-radius);
    box-shadow: 0 18px 42px -22px rgba(2, 8, 20, 0.55), 0 2px 6px rgba(2, 8, 20, 0.25);
    overflow: hidden;
}

.dark body.page-dashboard main .relative.w-full.rounded-lg,
body.page-dashboard.dark main .relative.w-full.rounded-lg {
    border-color: rgba(255, 255, 255, 0.07);
    border-top-color: var(--db-gold);
    box-shadow: 0 18px 42px -22px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Inner stat tiles (Student / Employee inside the Statistics card) flatten:
   no nested cards — just two zones separated by a hairline rule. */
body.page-dashboard main .bg-black .rounded-lg .rounded-lg {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--db-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard main .bg-black .rounded-lg .rounded-lg:last-child {
    border-bottom: 0 !important;
}

/* Card header rails ("Statistics", "Student attendance", "Fee summary",
   chart titles, greeting): cream rail + hairline. */
body.page-dashboard main .relative.w-full.rounded-lg .flex.justify-between.border-b {
    background: var(--db-rail) !important;
    border-bottom: 1px solid var(--db-line);
}

body.page-dashboard main .relative.w-full.rounded-lg .flex.justify-between .text-base.font-semibold {
    color: var(--db-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* --- KPI numerals -------------------------------------------------------- */

/* Big counts set in Fraunces — the "annual report" voice. */
body.page-dashboard main .text-2xl.font-semibold.leading-none,
body.page-dashboard main .text-xl.font-semibold.leading-none {
    font-family: var(--db-serif);
    font-weight: 900;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--db-ink) !important;
}

/* Fraction part (/7) fades behind the count. */
body.page-dashboard main .text-2xl.sm\:text-3xl {
    font-family: var(--db-serif);
    font-weight: 600;
    color: var(--db-ink-soft) !important;
}

/* Uppercase labels ("Student", "Employee") — small, spaced, quiet. */
body.page-dashboard main h3.mt-2.text-base.font-normal.uppercase {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--db-ink-soft);
}

/* Sub-line ("8 new") as a gold-tinted ticket chip. */
body.page-dashboard main .mt-1.flex.items-center.gap-2 {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 39, 0.45);
    background: rgba(201, 162, 39, 0.14);
    color: var(--db-gold-deep);
}

body.page-dashboard.dark main .mt-1.flex.items-center.gap-2 {
    border-color: rgba(212, 175, 90, 0.4);
    background: rgba(212, 175, 90, 0.12);
    color: var(--db-gold);
}

/* Icon medallions: deep, calm tones that don't fight the gold rule. */
body.page-dashboard main .rounded-full.h-12.w-12 {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

body.page-dashboard main .rounded-full.h-12.w-12.bg-success {
    background: #2f7d5c !important;
}

body.page-dashboard main .rounded-full.h-12.w-12.bg-primary {
    background: #581c87 !important;
}

/* --- Progress rows (attendance / fee summary) ---------------------------- */

/* Values: tabular so figures align down the column. */
body.page-dashboard main span.text-xs.text-gray-600 {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--db-ink-soft) !important;
}

/* --- Greeting + tabs ----------------------------------------------------- */

/* The date line under the greeting takes ink weight. */
body.page-dashboard main h3.text-2xl {
    color: var(--db-ink);
    font-weight: 700;
}

body.page-dashboard main h3.text-2xl + div,
body.page-dashboard main .text-base.font-semibold.leading-7 {
    color: var(--db-ink);
}

/* Tab bar: one cream pill tray instead of divided bars. */
body.page-dashboard main nav[aria-label="Tabs"].isolate.flex.divide-x {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--db-line);
    border-radius: 10px;
    background: var(--db-rail);
    box-shadow: none;
    overflow: hidden;
}

/* Kill Tailwind's divide hairlines between the pills. */
body.page-dashboard main nav[aria-label="Tabs"] > div {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-radius: 7px !important;
    background: transparent;
    transition: background-color 160ms ease, color 160ms ease;
}

body.page-dashboard main nav[aria-label="Tabs"] > div:hover {
    background: rgba(22, 35, 61, 0.06);
}

body.page-dashboard.dark main nav[aria-label="Tabs"] > div:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Active tab: solid navy pill (light) / gold pill with navy text (dark). */
body.page-dashboard main nav[aria-label="Tabs"] > div.text-gray-900 {
    background: var(--db-ink);
    color: #ffffff;
    box-shadow: 0 6px 16px -8px rgba(22, 35, 61, 0.6);
}

body.page-dashboard.dark main nav[aria-label="Tabs"] > div.text-gray-900 {
    background: var(--db-gold);
    color: #0a0e1a;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.8);
}

/* The bundle's 2px active underline is redundant inside a pill. */
body.page-dashboard main nav[aria-label="Tabs"] span.absolute.inset-x-0.bottom-0.h-0\.5 {
    display: none;
}

/* --- Calendar ------------------------------------------------------------- */

/* Month heading: Fraunces small caps voice ("September 2026" is Latin). */
body.page-dashboard main h1.text-base.font-semibold.leading-6 {
    font-family: var(--db-serif);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--db-ink) !important;
}

/* Weekday strip: cream rail. */
body.page-dashboard main .grid.grid-cols-7.gap-px.border-b {
    background: var(--db-rail) !important;
    color: var(--db-ink-soft);
}

/* Day cells: gold-tinted hover. */
body.page-dashboard main button.h-14.flex-col.px-3 {
    transition: background-color 140ms ease;
}

body.page-dashboard main button.h-14.flex-col.px-3:hover {
    background: rgba(201, 162, 39, 0.12) !important;
}

body.page-dashboard.dark main button.h-14.flex-col.px-3:hover {
    background: rgba(212, 175, 90, 0.1) !important;
}

/* Today: solid gold coin with navy numeral. */
body.page-dashboard main time.rounded-full.bg-primary {
    background: var(--db-gold) !important;
    color: #16233d;
    font-weight: 800;
    box-shadow: 0 4px 10px -3px rgba(201, 162, 39, 0.7);
}

body.page-dashboard.dark main time.rounded-full.bg-primary {
    color: #0a0e1a;
    box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.9);
}

/* Month stepper bar: hairline box. */
body.page-dashboard main .relative.flex.items-center.rounded-md.bg-white {
    border: 1px solid var(--db-line);
}

/* ============================================================================
   2) RECEPTION ENQUIRIES — "Swiss studio"
   ========================================================================== */

/* --- Canvas --------------------------------------------------------------- */

body.page-reception-enquiries main {
    background: var(--eq-canvas);
}

/* --- Page masthead ---------------------------------------------------------- */

/* Title: near-black, heavy, tight — with a solid vermillion printer's mark. */
body.page-reception-enquiries main h2.text-xl.font-bold {
    color: var(--eq-ink);
    font-weight: 900;
    font-size: 1.55rem;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

body.page-reception-enquiries main h2.text-xl.font-bold::before {
    content: "";
    display: inline-block;
    width: 0.62em;
    height: 0.62em;
    margin-inline-end: 12px;
    border-radius: 2px;
    background: var(--eq-accent);
    transform: translateY(-0.04em);
}

/* Breadcrumbs: ink trail, current crumb in accent. */
body.page-reception-enquiries main nav[aria-label="Breadcrumb"] a {
    color: var(--eq-ink-soft);
    font-weight: 500;
    transition: color 140ms ease;
}

body.page-reception-enquiries main nav[aria-label="Breadcrumb"] a:hover {
    color: var(--eq-ink);
}

body.page-reception-enquiries main nav[aria-label="Breadcrumb"] span[aria-current="page"] {
    color: var(--eq-accent);
    font-weight: 700;
}

/* --- Toolbar --------------------------------------------------------------- */

/* NOTE ON BUTTON FILLS: the bundle paints these buttons through
   ::after (rest fill, -z-20, w-full) and ::before (hover wipe, -z-10,
   w-0 → w-full on hover) inside a z-0 stacking context — the element's own
   background is INVISIBLE behind the ::after layer. Recoloring the
   button background alone does nothing; the rules below restyle the
   pseudo layers themselves. */

/* Header action buttons: outlined ink tiles that invert on hover. */
body.page-reception-enquiries main .mt-4.flex.shrink-0.justify-end button {
    border: 1px solid var(--eq-ink) !important;
    border-radius: var(--eq-radius) !important;
    color: var(--eq-ink) !important;
    box-shadow: none;
    transition: color 150ms ease, border-color 150ms ease;
}

/* Rest fill: paper. Hover wipe (::before): solid ink. */
body.page-reception-enquiries main .mt-4.flex.shrink-0.justify-end button::after {
    background: var(--eq-card) !important;
}

body.page-reception-enquiries main .mt-4.flex.shrink-0.justify-end button::before {
    background: var(--eq-ink) !important;
}

body.page-reception-enquiries main .mt-4.flex.shrink-0.justify-end button:hover {
    color: #ffffff !important;
}

/* Primary "Add Enquiry" CTA in the toolbar: the first button of the group
   (the bundle renders it with the after:bg-white rest-fill variant; the
   icon buttons after it share that variant, so the CTA is picked by
   position, not fill class). Solid ink block + vermillion hover. */
body.page-reception-enquiries main .mt-4.flex.shrink-0.justify-end .flex.space-x-2 > button:first-child {
    color: #ffffff !important;
    box-shadow: 4px 4px 0 0 var(--eq-accent);
}

body.page-reception-enquiries main .mt-4.flex.shrink-0.justify-end .flex.space-x-2 > button:first-child::after {
    background: var(--eq-ink) !important;
}

body.page-reception-enquiries main .mt-4.flex.shrink-0.justify-end .flex.space-x-2 > button:first-child::before {
    background: var(--eq-accent) !important;
}

body.page-reception-enquiries main .mt-4.flex.shrink-0.justify-end .flex.space-x-2 > button:first-child:hover {
    color: #ffffff !important;
    box-shadow: 4px 4px 0 0 var(--eq-ink);
}

body.page-reception-enquiries.dark main .mt-4.flex.shrink-0.justify-end .flex.space-x-2 > button:first-child {
    color: #131315 !important;
}

body.page-reception-enquiries.dark main .mt-4.flex.shrink-0.justify-end .flex.space-x-2 > button:first-child::after {
    background: var(--eq-ink) !important;
}

body.page-reception-enquiries.dark main .mt-4.flex.shrink-0.justify-end .flex.space-x-2 > button:first-child::before {
    background: var(--eq-accent) !important;
}

/* CTA variant used inside the empty state (after:bg-primary): the same
   ink block, kept for the rare variant the bundle emits there. */
body.page-reception-enquiries main .mt-4.flex.shrink-0.justify-end button.after\:bg-primary {
    color: #ffffff !important;
    box-shadow: 4px 4px 0 0 var(--eq-accent);
}

body.page-reception-enquiries main .mt-4.flex.shrink-0.justify-end button.after\:bg-primary::after {
    background: var(--eq-ink) !important;
}

body.page-reception-enquiries main .mt-4.flex.shrink-0.justify-end button.after\:bg-primary::before {
    background: var(--eq-accent) !important;
}

body.page-reception-enquiries main .mt-4.flex.shrink-0.justify-end button.after\:bg-primary:hover {
    color: #ffffff !important;
    box-shadow: 4px 4px 0 0 var(--eq-ink);
}

/* Dark: outlined paper tiles; CTA inverts to a paper block. */
body.page-reception-enquiries.dark main .mt-4.flex.shrink-0.justify-end button {
    border-color: var(--eq-ink) !important;
    color: var(--eq-ink) !important;
}

body.page-reception-enquiries.dark main .mt-4.flex.shrink-0.justify-end button::after {
    background: transparent !important;
}

body.page-reception-enquiries.dark main .mt-4.flex.shrink-0.justify-end button::before {
    background: var(--eq-ink) !important;
}

body.page-reception-enquiries.dark main .mt-4.flex.shrink-0.justify-end button:hover {
    color: #131315 !important;
}

body.page-reception-enquiries.dark main .mt-4.flex.shrink-0.justify-end button.after\:bg-primary {
    color: #131315 !important;
    box-shadow: 4px 4px 0 0 var(--eq-accent);
}

body.page-reception-enquiries.dark main .mt-4.flex.shrink-0.justify-end button.after\:bg-primary::after {
    background: var(--eq-ink) !important;
}

body.page-reception-enquiries.dark main .mt-4.flex.shrink-0.justify-end button.after\:bg-primary::before {
    background: var(--eq-accent) !important;
}

body.page-reception-enquiries.dark main .mt-4.flex.shrink-0.justify-end button.after\:bg-primary:hover {
    color: #131315 !important;
    box-shadow: 4px 4px 0 0 var(--eq-ink);
}

/* --- Workspace panel ---------------------------------------------------------- */

/* The filter/table card: white sheet with a 3px ink rule on top. */
body.page-reception-enquiries main .relative.space-y-6 > .relative > div.bg-white,
body.page-reception-enquiries main .relative.space-y-6 > .relative > div.dark\:bg-dark-header {
    background: var(--eq-card);
    border: 1px solid var(--eq-line);
    border-top: 3px solid var(--eq-ink);
    border-radius: var(--eq-radius);
    box-shadow: 0 14px 30px -22px rgba(16, 16, 16, 0.4);
    overflow: hidden;
}

body.page-reception-enquiries.dark main .relative.space-y-6 > .relative > div {
    border-color: var(--eq-line);
    border-top-color: var(--eq-ink);
    box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.8);
}

/* --- Table --------------------------------------------------------------------- */

/* Header: cream rail with a heavy 2px ink rule under it. */
body.page-reception-enquiries main thead.bg-gray-50 {
    background: #f4f1e8 !important;
}

body.page-reception-enquiries main thead.bg-gray-50 th {
    color: var(--eq-ink) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-bottom: 2px solid var(--eq-ink);
}

body.page-reception-enquiries.dark main thead,
body.page-reception-enquiries.dark main thead.bg-gray-50 {
    background: rgba(255, 255, 255, 0.04) !important;
}

body.page-reception-enquiries.dark main thead th {
    color: var(--eq-ink) !important;
    border-bottom-color: var(--eq-ink);
}

/* Rows: hairline rules, vermillion-tint hover, tabular figures. */
body.page-reception-enquiries main tbody td {
    border-bottom: 1px solid var(--eq-line);
    font-variant-numeric: tabular-nums;
}

body.page-reception-enquiries main tbody tr.hover\:bg-gray-100:hover {
    background: var(--eq-accent-soft) !important;
}

/* Selected-records / not-found bar: mono, quiet. */
body.page-reception-enquiries main td[colspan="100"] > div {
    font-family: var(--eq-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--eq-ink-soft);
}

/* --- Badges ---------------------------------------------------------------------- */

/* All badges: squared chips with an ink keyline. */
body.page-reception-enquiries main td span.rounded-md.items-center {
    border-radius: 4px;
    border: 1px solid rgba(16, 16, 16, 0.28);
    font-weight: 600;
}

/* Nature chip (primary): solid ink. */
body.page-reception-enquiries main td span.bg-primary {
    background: var(--eq-ink) !important;
    color: #ffffff !important;
    border-color: var(--eq-ink) !important;
}

/* Online chip (info): vermillion. */
body.page-reception-enquiries main td span.bg-info {
    background: var(--eq-accent) !important;
    color: #ffffff !important;
    border-color: var(--eq-accent) !important;
}

/* Semantic chips keep their hue, deepened for white text. */
body.page-reception-enquiries main td span.bg-success {
    background: #0f7a55 !important;
    border-color: #0f7a55 !important;
}

body.page-reception-enquiries main td span.bg-warning {
    background: #b96a00 !important;
    border-color: #b96a00 !important;
    color: #ffffff !important;
}

body.page-reception-enquiries main td span.bg-danger {
    background: #c0392b !important;
    border-color: #c0392b !important;
}

/* Dark: nature chip inverts to paper. */
body.page-reception-enquiries.dark main td span.rounded-md.items-center {
    border-color: rgba(255, 255, 255, 0.35);
}

body.page-reception-enquiries.dark main td span.bg-primary {
    background: var(--eq-ink) !important;
    color: #131315 !important;
    border-color: var(--eq-ink) !important;
}

body.page-reception-enquiries.dark main td span.bg-info {
    background: var(--eq-accent) !important;
    color: #131315 !important;
}

/* Row action trigger: a small ink-outlined square button. */
body.page-reception-enquiries main td .inline-flex.items-center.justify-center.rounded-full {
    border-radius: 6px;
    border: 1px solid var(--eq-line);
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

body.page-reception-enquiries main td .inline-flex.items-center.justify-center.rounded-full:hover {
    background: var(--eq-ink);
    color: #ffffff;
    border-color: var(--eq-ink);
}

body.page-reception-enquiries.dark main td .inline-flex.items-center.justify-center.rounded-full:hover {
    background: var(--eq-ink);
    color: #131315;
}

/* --- Pagination -------------------------------------------------------------------- */

/* Page buttons: ink-outlined squares; current page is a solid ink block. */
body.page-reception-enquiries main .relative.inline-flex.items-center.border.px-4 {
    border: 1px solid var(--eq-ink) !important;
    border-radius: 6px !important;
    color: var(--eq-ink) !important;
    background: var(--eq-card) !important;
    font-weight: 600;
    transition: background-color 150ms ease, color 150ms ease;
}

body.page-reception-enquiries main .relative.inline-flex.items-center.border.px-4:hover {
    background: var(--eq-ink) !important;
    color: #ffffff !important;
}

body.page-reception-enquiries main .relative.inline-flex.items-center.bg-primary,
body.page-reception-enquiries main a.bg-primary {
    background: var(--eq-ink) !important;
    color: #ffffff !important;
    border-color: var(--eq-ink) !important;
}

body.page-reception-enquiries.dark main .relative.inline-flex.items-center.border.px-4 {
    background: transparent !important;
}

body.page-reception-enquiries.dark main .relative.inline-flex.items-center.border.px-4:hover,
body.page-reception-enquiries.dark main .relative.inline-flex.items-center.bg-primary,
body.page-reception-enquiries.dark main a.bg-primary {
    background: var(--eq-ink) !important;
    color: #131315 !important;
}

/* --- Empty state ---------------------------------------------------------------------- */

/* Poster-style hero: vermillion plate, heavy ink headline, ink CTA. */
body.page-reception-enquiries main .py-10.text-gray-500 > .fas.fa-list.fa-4x {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.6rem;
    border-radius: var(--eq-radius);
    color: #ffffff;
    background: var(--eq-accent);
    box-shadow: 6px 6px 0 0 var(--eq-ink);
}

body.page-reception-enquiries main .py-10.text-gray-500 > .text-lg {
    color: var(--eq-ink);
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

body.page-reception-enquiries main .py-10.text-gray-500 > p:not(.text-lg) {
    max-width: 46ch;
    color: var(--eq-ink-soft);
    line-height: 1.7;
}

/* Same pseudo-fill treatment as the toolbar CTA (see toolbar note). */
body.page-reception-enquiries main .py-10 button.after\:bg-primary {
    padding-inline: 22px;
    padding-block: 10px;
    border-radius: var(--eq-radius);
    color: #ffffff !important;
    box-shadow: 4px 4px 0 0 var(--eq-accent);
    transition: color 150ms ease;
}

body.page-reception-enquiries main .py-10 button.after\:bg-primary::after {
    background: var(--eq-ink) !important;
}

body.page-reception-enquiries main .py-10 button.after\:bg-primary::before {
    background: var(--eq-accent) !important;
}

body.page-reception-enquiries main .py-10 button.after\:bg-primary:hover {
    color: #ffffff !important;
    box-shadow: 4px 4px 0 0 var(--eq-ink);
}

body.page-reception-enquiries.dark main .py-10 button.after\:bg-primary {
    color: #131315 !important;
}

body.page-reception-enquiries.dark main .py-10 button.after\:bg-primary::after {
    background: var(--eq-ink) !important;
}

body.page-reception-enquiries.dark main .py-10 button.after\:bg-primary::before {
    background: var(--eq-accent) !important;
}

body.page-reception-enquiries.dark main .py-10.text-gray-500 > .text-lg {
    color: var(--eq-ink);
}

body.page-reception-enquiries.dark main .py-10.text-gray-500 > p:not(.text-lg) {
    color: var(--eq-ink-soft);
}

/* ============================================================================
   Guards
   ----------------------------------------------------------------------------
   * Only these two routes are styled; every selector is namespaced by the
     body.page-* class set by page-styles.js.
   * !important only where Tailwind utilities of equal-or-higher specificity
     would win (bg-black, thead bg, hover fills, badge fills).
   * Layout untouched: paddings, grids, flex structures and hit targets are
     exactly the bundle's; only surfaces, color, type and radius change.
   ========================================================================== */