/* BSUK Introductions admin screen; use existing colour, border and typography tokens. */
.admin-body .intro-admin-workspace{display:grid;gap:22px;min-width:0}
.admin-body .intro-admin-flash{margin:0 0 18px}
.admin-body .intro-admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:14px}
.admin-body .intro-stat{display:grid;gap:5px;min-width:0}
/* The cards are as narrow as 145px, and the 32px each side left 81px for words like "Introductions" (83px), so they were cut off (visual audit, 4 November 2026). */
html:root body.admin-body .admin-view .intro-stat.acard{padding-left:20px;padding-right:20px}
/* The same figures as the admin's own .stat cards: the studio heading size and its .84rem label. */
.admin-body .intro-stat strong{font:500 var(--h1-studio)/1.15 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.admin-body .intro-stat span{color:var(--muted);font-size:.84rem}
.admin-body .intro-admin-tabs{display:flex;gap:10px;flex-wrap:wrap}
.admin-body .intro-admin-section{display:grid;gap:14px}
.admin-body .intro-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px}
.admin-body .intro-admin-card{display:grid;align-content:start;gap:14px;min-width:0}
.admin-body .intro-admin-card h2,.admin-body .intro-admin-card h3{margin:0;overflow-wrap:anywhere}
.admin-body .intro-admin-card h3{font-size:var(--h3-studio)}
.admin-body .intro-facts{display:grid;gap:4px}
.admin-body .intro-facts p{margin:0;color:var(--ink);overflow-wrap:anywhere}
.admin-body .intro-facts a{overflow-wrap:anywhere}
.admin-body .intro-action-form{display:grid;gap:12px;margin:0}
.admin-body .intro-label{display:grid;gap:4px;min-width:0}
.admin-body .intro-label input,.admin-body .intro-label select{width:100%;min-width:0}
.admin-body .intro-input-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.admin-body .intro-action-form button{justify-self:start}
.admin-body .intro-admin-card button[aria-disabled="true"]{opacity:.65;cursor:progress}
body.referral-page .referral-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(285px,440px);gap:clamp(24px,4vw,68px);align-items:start;padding-block:clamp(36px,5vw,85px)}
body.referral-page .referral-copy{max-width:65ch}
/* Aligned with the contact page (Nadine, 4 November 2026: "Standardise the page designs, the referral page seems slightly off"): the same paper background and
   breadcrumb trail (markup), the same muted lead under the title, section headings at card scale rather than page-title scale, and a card title the size of the
   contact card's. */
body.referral-page .referral-copy>h1{margin:0}
body.referral-page .referral-copy>.lead{max-width:520px;margin:22px 0 0;color:var(--muted);font-size:1.1rem}
body.referral-page .referral-copy h2{margin:44px 0 14px;font-size:clamp(1.45rem,1.2rem + .8vw,1.9rem)}
body.referral-page .referral-copy .referral-terms h2{margin-top:10px}
body.referral-page .referral-form>h2{margin:0 0 10px;font:500 1.4rem/1.25 var(--display);letter-spacing:0}
body.referral-page .referral-confirm>h2{margin:0 0 10px;font:500 1.4rem/1.25 var(--display);letter-spacing:0}
body.referral-page .referral-layout{padding-top:clamp(36px,4vw,64px)}
body.referral-page .referral-steps{display:grid;gap:12px;padding-left:1.35rem}
body.referral-page .referral-terms{margin-top:32px}
body.referral-page .referral-terms li{margin-bottom:8px}
body.referral-page .referral-form{display:grid;gap:15px}
body.referral-page .referral-form .form-note{min-height:1.8em}
body.referral-page .referral-confirm{margin-bottom:26px}
/* /referred-enquiry: these were inline style attributes, which the site's security policy refuses (review PRIV-8). */
body.referral-page .referred-enquiry{max-width:850px;padding-block:clamp(2rem,6vw,5rem)}
body.referral-page .referred-full-brief{margin-top:2rem}
/* The shared required-fields line sits 6px into a small form label (site.css); under this page's h2 it ran into the descenders. */
body.referral-page .referred-enquiry .contact-card>p.form-required{margin-top:10px}
@media(max-width:780px){body.referral-page .referral-layout{grid-template-columns:1fr}}

/* Scalable, keyboard-accessible referral casework and finance reconciliation. */
.admin-body .intro-admin-section>input[type="search"]{width:100%;max-width:34rem;min-height:44px;padding:.72rem .9rem;border:1px solid var(--line,#b9c9c2);border-radius:12px;background:var(--surface,#fff);color:var(--ink)}
.admin-body .intro-pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.admin-body .intro-pager .muted{font-variant-numeric:tabular-nums;min-width:8rem;text-align:center}
.admin-body .intro-pager button{min-height:40px}
.admin-body .intro-admin-card .form-note{overflow-wrap:anywhere}
.admin-body .intro-admin-card .intro-input-grid .intro-label{min-width:0}
.admin-body .intro-admin-card .intro-action-form input[type="checkbox"]{justify-self:start;width:auto;min-width:24px;min-height:24px}
/* The pine the admin inputs use for focus (--pine-700); --accent is not defined anywhere, so its off-palette fallback showed. */
.admin-body .intro-admin-card:focus-within{border-color:var(--pine-700)}
@media(max-width:640px){.admin-body .intro-pager .muted{order:-1;flex-basis:100%;text-align:left}.admin-body .intro-cards{grid-template-columns:minmax(0,1fr)}}