/* ===========================================================================
   Ashraya Special School — stylesheet
   Warm, welcoming, accessible (WCAG 2.1 AA). Colours chosen for >=4.5:1 text
   contrast. Mobile-first; reflows down to 320px.
   =========================================================================== */

:root {
  --teal-900:#0f3d3e; --teal-700:#155e63; --teal-600:#1a7f86;
  --amber-500:#e08a00; --amber-600:#b86e00;
  --ink:#1e2321; --muted:#4a544f; --line:#dfe6e2;
  --bg:#ffffff; --bg-alt:#f2f7f4; --bg-tint:#e8f2ee;
  --white:#fff; --radius:14px; --maxw:1120px;
  --shadow:0 6px 24px rgba(15,61,62,.08);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

* { box-sizing:border-box; }
html { font-size:125%; scroll-behavior:smooth; }
body { margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip; }

h1,h2,h3 { line-height:1.2; color:var(--teal-900); margin:0 0 .5em; }
h1 { font-size:2.3rem; } h2 { font-size:1.7rem; } h3 { font-size:1.25rem; }
p { margin:0 0 1rem; }
a { color:var(--teal-700); }
img { max-width:100%; height:auto; display:block; }

.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; }
.section { padding:3.5rem 0; }
.section-alt { background:var(--bg-alt); }
.section-title { text-align:center; }
.section-intro { text-align:center; max-width:42rem; margin:0 auto 2rem; color:var(--muted); }
.center { text-align:center; }
.prose { max-width:52rem; }
.note { background:#fff8e6; border-left:4px solid var(--amber-500); padding:.6rem .9rem;
  border-radius:6px; color:#5c4300; font-size:.92rem; }
.empty { color:var(--muted); font-style:italic; }

/* --- Accessibility helpers --- */
.skip-link { position:absolute; left:-999px; top:0; background:var(--teal-900); color:#fff;
  padding:.6rem 1rem; z-index:1000; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }
:focus-visible { outline:3px solid var(--amber-500); outline-offset:2px; border-radius:4px; }
.hp { position:absolute; left:-5000px; } /* honeypot */

/* --- Buttons --- */
.btn { display:inline-block; font-weight:600; text-decoration:none; cursor:pointer;
  border:2px solid transparent; border-radius:999px; padding:.6rem 1.3rem; font-size:1rem;
  transition:transform .05s ease, background .15s ease; }
.btn:active { transform:translateY(1px); }
.btn-lg { padding:.8rem 1.7rem; font-size:1.05rem; }
.btn-sm { padding:.3rem .8rem; font-size:.85rem; }
.btn-primary { background:var(--teal-700); color:#fff; }
.btn-primary:hover { background:var(--teal-900); }
.btn-outline { background:transparent; color:var(--teal-700); border-color:var(--teal-700); }
.btn-outline:hover { background:var(--bg-tint); }
.btn-donate { background:var(--amber-500); color:#241800; }
.btn-donate:hover { background:var(--amber-600); color:#fff; }

/* --- Header / nav --- */
.site-header { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.6rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand-logo { border-radius:8px; }
.brand-name { font-weight:800; color:var(--teal-900); font-size:1.15rem; }
.brand-text { display:flex; flex-direction:column; justify-content:center; line-height:1.15; }
.primary-nav ul { display:flex; align-items:center; gap:.25rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.primary-nav a { display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); padding:.5rem .7rem; border-radius:8px; font-weight:600; line-height:1; }
.primary-nav a:hover { background:var(--bg-tint); }
.primary-nav a[aria-current="page"] { color:var(--teal-700); background:var(--bg-tint); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.5rem; cursor:pointer; }
.nav-toggle span { width:26px; height:3px; background:var(--teal-900); border-radius:2px; }

/* --- Hero --- */
.hero { background:linear-gradient(135deg,var(--teal-700),var(--teal-900)); color:#fff; }
.hero-inner { padding:4rem 0; }
.hero-text { max-width:40rem; }
.hero h1 { color:#fff; font-size:2.6rem; }
.hero .lead { font-size:1.25rem; color:#dff0ed; }
.hero-cta { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.5rem; }
.lead { font-size:1.2rem; color:var(--muted); }

/* --- Page hero (interior) --- */
.page-hero { background:var(--bg-tint); padding:2.6rem 0; }
.page-hero h1 { margin:0; font-size:2.6rem; }
.page-hero-sub { color:var(--muted); margin:.4rem 0 0; font-size:1.2rem; }

/* --- Audience cards --- */
.audience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.audience-card { display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; text-decoration:none; color:inherit; box-shadow:var(--shadow); transition:transform .1s ease; }
.audience-card:hover { transform:translateY(-3px); }
.audience-card h2 { font-size:1.25rem; }

/* --- Chips --- */
.chip-list { list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; padding:0; justify-content:center; }
.chip { background:var(--bg-tint); color:var(--teal-900); border-radius:999px; padding:.4rem 1rem; font-weight:600; font-size:.95rem; }

/* --- Cards / grid --- */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem;
  box-shadow:var(--shadow); text-decoration:none; color:inherit; }
a.card:hover { transform:translateY(-3px); transition:transform .1s ease; }
.card-meta { color:var(--muted); font-size:.9rem; margin:-.2rem 0 .6rem; }
.card-img { border-radius:10px; margin-bottom:.8rem; aspect-ratio:16/10; object-fit:cover; width:100%; }

/* --- Journey (programmes) --- */
.journey { list-style:none; counter-reset:step; padding:0; display:grid; gap:1.1rem; }
.journey-step { counter-increment:step; }
.journey-card { display:block; background:#fff; border:1px solid var(--line); border-left:6px solid var(--teal-600);
  border-radius:var(--radius); padding:1.3rem 1.5rem; text-decoration:none; color:inherit; box-shadow:var(--shadow); }
.journey-card:hover { border-left-color:var(--amber-500); }
.journey-stage { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--teal-600); }
.journey-card h2 { margin:.2rem 0; }
.link-more { color:var(--teal-700); font-weight:700; }

/* --- Impact stats --- */
.impact { background:var(--teal-900); color:#fff; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.25rem; text-align:center; }
.stat { display:flex; flex-direction:column; }
.stat-value { font-size:2.4rem; font-weight:800; color:var(--teal-900); white-space:nowrap; }
.impact .stat-value { color:#fff; }
.impact .stat-label { color:#bfe0db; }
.stat-label { color:var(--muted); }

/* --- Detail two-column --- */
.detail-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:start; }
.detail-img { border-radius:var(--radius); box-shadow:var(--shadow); }

/* --- Forms --- */
.form-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; box-shadow:var(--shadow); }
form label { display:block; font-weight:600; margin:.9rem 0 .3rem; }
.req { color:#b00020; }
input, select, textarea { width:100%; padding:.6rem .7rem; border:1.5px solid var(--line);
  border-radius:9px; font-size:1rem; font-family:inherit; background:#fff; color:var(--ink); }
input:focus, select:focus, textarea:focus { border-color:var(--teal-600); }
.form-card button { margin-top:1.2rem; }
.form-msg { margin-top:.8rem; font-weight:600; }
.flash { padding:.8rem 1rem; border-radius:9px; margin:1rem 0; font-weight:600; }
.flash-success { background:#e3f5ea; color:#0b5c2e; border:1px solid #a8dcbd; }
.flash-error { background:#fdeaea; color:#8a1220; border:1px solid #f0b4ba; }

/* --- Donate tiers --- */
.tier-picker { border:0; padding:0; margin:0 0 .5rem; }
.tier-picker legend { font-weight:600; padding:0; }
.tier-buttons { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-top:.4rem; }
.tier-btn { background:var(--bg-tint); border:2px solid transparent; border-radius:10px; padding:.6rem;
  font-weight:700; cursor:pointer; color:var(--teal-900); display:flex; flex-direction:column; }
.tier-btn small { font-weight:500; color:var(--muted); }
.tier-btn.active { border-color:var(--teal-600); background:#fff; }
.trust-list { list-style:none; padding:0; }
.trust-list li { padding:.2rem 0; color:var(--teal-900); font-weight:600; }

/* --- Stories / quotes --- */
.story-img, .gallery-item img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
details summary { cursor:pointer; font-weight:700; color:var(--teal-700); }
.quote-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; }
.quote-card { background:#fff; border:1px solid var(--line); border-left:6px solid var(--amber-500);
  border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow); margin:0; }
.quote-card footer { color:var(--muted); font-weight:600; margin-top:.6rem; }

/* --- Gallery --- */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.gallery-item { margin:0; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.5rem; }
.gallery-item figcaption { font-size:.9rem; color:var(--muted); padding:.4rem .2rem 0; }
.map { width:100%; height:320px; border:0; border-radius:var(--radius); margin-top:1rem; }
.contact-block p { margin:.3rem 0; }

/* --- CTA band --- */
.cta-band { background:var(--amber-500); color:#241800; }
.cta-band h2 { color:#241800; }

/* --- Footer --- */
.site-footer { background:#e8f1f8; color:var(--ink); border-top:1px solid var(--line); margin-top:2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1.3fr; gap:2rem; padding:3rem 0 1.5rem; }
.site-footer h2,.site-footer h3 { color:var(--teal-900); }
.footer-brand { font-size:1.3rem; }
.footer-links, .social { list-style:none; padding:0; }
.footer-links a, .footer-contact a, .site-footer address a, .social a { color:var(--teal-700); }
.footer-links li { margin:.3rem 0; }
.badge { display:inline-block; background:rgba(255,255,255,.12); border-radius:6px; padding:.2rem .6rem;
  margin:.2rem .2rem 0 0; font-size:.82rem; }
.social { display:flex; gap:1rem; margin-top:.6rem; }
.footer-bottom { display:flex; justify-content:space-between; border-top:1px solid var(--line);
  padding:1rem 1.25rem; font-size:.9rem; flex-wrap:wrap; gap:.5rem; }
.footer-bottom a { color:var(--teal-700); }

/* --- Admin --- */
.admin { background:var(--bg-alt); }
.admin-bar { background:var(--teal-900); color:#fff; }
.admin-bar-inner { display:flex; justify-content:space-between; align-items:center; padding:.7rem 1.25rem; flex-wrap:wrap; gap:.5rem; }
.admin-bar .brand-name { color:#fff; }
.admin-nav { display:flex; gap:.4rem; flex-wrap:wrap; }
.admin-nav a { color:#dfeeeb; text-decoration:none; padding:.4rem .7rem; border-radius:8px; }
.admin-nav a:hover { background:rgba(255,255,255,.12); }
.admin-main { padding:2rem 1.25rem; }
.admin-stats .stat { padding:1.4rem; text-decoration:none; }
.table-wrap { overflow-x:auto; margin-bottom:2rem; }
table { width:100%; border-collapse:collapse; background:#fff; font-size:.92rem; }
th, td { text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:var(--bg-tint); color:var(--teal-900); }
.pill { border-radius:999px; padding:.15rem .6rem; font-size:.8rem; font-weight:700; }
.pill-paid { background:#e3f5ea; color:#0b5c2e; }
.pill-pending { background:#fff3d6; color:#7a5600; }
.login-page { display:flex; min-height:100vh; align-items:center; justify-content:center; }
.login-box { background:#fff; padding:2.2rem; border-radius:var(--radius); box-shadow:var(--shadow); width:min(92vw,380px); }
.back-link { margin-top:1rem; }

/* --- Responsive --- */
@media (max-width:820px) {
  .nav-toggle { display:flex; }
  .primary-nav { display:none; width:100%; }
  .primary-nav.open { display:block; }
  .primary-nav ul { flex-direction:column; align-items:stretch; padding:.5rem 0; }
  .header-inner { flex-wrap:wrap; }
  .topbar-inner { flex-wrap:wrap; row-gap:.2rem; }
  .audience-grid, .detail-grid, .footer-grid { grid-template-columns:1fr; }
  .hero h1 { font-size:2rem; }
}

/* --- Hero: full-bleed photo background, fills the first screen --- */
.hero-bg { position:relative; overflow:hidden; isolation:isolate;
  min-height:calc(100vh - 104px); display:flex; align-items:center; }
.hero-bg-slides { position:absolute; inset:0; z-index:-2; }
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center top;
  opacity:0; transition:opacity 1.2s ease; }
.hero-slide.active { opacity:1; }
/* dark on the left (behind text) fading to clear on the right (faces stay visible) */
.hero-bg-overlay { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(15,61,62,.92) 0%, rgba(15,61,62,.78) 34%, rgba(15,61,62,.35) 62%, rgba(15,61,62,.05) 100%); }
.hero-bg-inner { width:100%; }
.hero-bg-text { max-width:36rem; color:#fff; padding:2rem 0; }
.hero-bg-text h1 { color:#fff; font-size:2.8rem; }
.hero-bg-text .lead { color:#eaf5f2; }
.hero-bg-text .eyebrow { color:#f2c98a; }
@media (max-width:820px){
  .hero-bg { min-height:0; }
  .hero-bg-overlay { background:linear-gradient(180deg, rgba(15,61,62,.7) 0%, rgba(15,61,62,.86) 100%); }
  .hero-bg-text { max-width:none; padding:2.4rem 0; }
  .hero-bg-text h1 { font-size:2rem; }
}

/* --- Service image cards (each service with its own background photo) --- */
.service-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.1rem; }
.svc-card { position:relative; min-height:230px; border-radius:var(--radius); overflow:hidden;
  background-size:cover; background-position:center; box-shadow:var(--shadow); isolation:isolate;
  transition:transform .15s ease; }
.svc-card:hover { transform:translateY(-3px); }
.svc-card-scrim { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,61,62,0) 30%, rgba(15,61,62,.45) 55%, rgba(15,45,46,.92) 100%); }
.svc-card-body { position:absolute; inset:auto 0 0 0; padding:1.1rem 1.2rem; color:#fff; }
.svc-card-body h3 { color:#fff; margin:0 0 .25rem; font-size:1.2rem; }
.svc-card-body p { color:#eaf5f2; margin:0; font-size:.9rem; line-height:1.4; }

/* --- Interior page header with a blurred photo background --- */
.page-hero-img { position:relative; overflow:hidden; isolation:isolate; padding:3rem 0; }
.page-hero-bg { position:absolute; inset:-24px; z-index:-2;
  background-size:cover; background-position:center; filter:blur(4px) saturate(1.08); transform:scale(1.05); }
.page-hero-scrim { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, rgba(15,61,62,.8) 0%, rgba(15,61,62,.5) 100%); }
.page-hero-img h1 { color:#fff; }
.page-hero-img .page-hero-sub { color:#eaf5f2; }

/* --- Image hero (donate etc.) --- */
.image-hero { position:relative; background-size:cover; background-position:center; overflow:hidden; isolation:isolate; }
.image-hero-scrim { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(21,94,99,.9), rgba(15,61,62,.7)); }
.image-hero-inner { padding:3.2rem 1.25rem; color:#fff; max-width:var(--maxw); margin:0 auto; }
.image-hero-inner h1 { color:#fff; }
.image-hero-inner p { color:#e6f2f0; font-size:1.15rem; margin:0; }

.gallery-cat { text-align:left; margin-top:2.2rem; border-bottom:2px solid var(--line); padding-bottom:.4rem; }

/* --- Real-content additions --- */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted { color:var(--muted); }
.small { font-size:.9rem; color:var(--muted); }
.eyebrow { text-transform:uppercase; letter-spacing:.05em; font-weight:700; font-size:.85rem; color:var(--amber-500); margin-bottom:.4rem; }
.hero .eyebrow { color:#f2c98a; }

/* Top contact bar */
.topbar { background:var(--teal-900); color:#dfeeeb; font-size:.9rem; }
.topbar-inner { display:flex; justify-content:space-between; align-items:center; padding:.35rem 1.25rem; gap:1rem; }
.topbar-call { color:#fff; text-decoration:none; font-weight:600; }
.topbar-hours { color:#bfe0db; }

/* Brand eyebrow */
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-eyebrow { font-size:.7rem; color:var(--muted); font-weight:600; }

/* Buttons on dark */
.btn-outline-light { background:transparent; color:#fff; border-color:#fff; }
.btn-outline-light:hover { background:rgba(255,255,255,.14); }

/* Stats outlined */
.stat.outlined { background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow); }
.closing-line { font-size:1.15rem; font-weight:600; color:var(--teal-900); margin-top:2rem; }
.trust-line, .trust-list { color:var(--muted); }
.trust-line { margin-top:1rem; }

/* Cost gap band */
.cost-gap { background:var(--bg-tint); }
.center-cta { justify-content:center; }

/* Call band (admissions/contact) */
.call-band { background:var(--bg-tint); border-radius:var(--radius); padding:1.5rem; text-align:center; }
.call-buttons { display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin:.6rem 0; }
.form-intro { color:var(--muted); margin-top:-.3rem; }

/* Service cards accent */
.service-card { border-left:5px solid var(--teal-600); }

/* Numbered / tick lists */
.numbered { padding-left:1.3rem; }
.numbered li, .tick-list li { margin:.4rem 0; }
.tick-list { list-style:none; padding:0; }
.tick-list li::before { content:"✓ "; color:var(--leaf,#1a7f4f); font-weight:800; }
.cred-list { padding-left:1.1rem; font-size:.92rem; color:var(--muted); }

/* Person cards */
.person-img { width:96px; height:96px; border-radius:50%; object-fit:cover; margin-bottom:.6rem; border:2px solid var(--line); }

/* Bank / copy rows (donate) */
.bank-list { display:grid; grid-template-columns:auto 1fr; gap:.3rem 1rem; margin:.5rem 0; }
.bank-list dt { font-weight:700; color:var(--teal-900); }
.bank-list dd { margin:0; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.copy-row { display:flex; gap:.6rem; align-items:center; margin:.4rem 0; }
.copy-row code { background:var(--bg-tint); padding:.3rem .6rem; border-radius:6px; font-size:1rem; }
.check { display:flex; align-items:center; gap:.5rem; font-weight:500; margin-top:1rem; }
.check input { width:auto; }

/* Impact cards (donate) */
.impact-card { display:flex; flex-direction:column; gap:.3rem; }
.impact-amount { font-size:1.5rem; font-weight:800; color:var(--teal-700); }

/* Tier cards (CSR) */
.tier-card { display:flex; flex-direction:column; }
.tier-amount { font-size:1.3rem; font-weight:800; color:var(--amber-600); margin:.2rem 0; }

/* Tables: totals + narrow */
.total-row th, .total-row td { font-weight:800; background:var(--bg-tint); border-top:2px solid var(--teal-600); }
.table-wrap.narrow { max-width:640px; }

/* Footer trust strip */
.footer-eyebrow { color:var(--muted); font-size:.85rem; margin:.2rem 0; }
.footer-trust { padding:.5rem 1.25rem 0; font-size:.82rem; color:var(--muted); }

/* --- About page: tinted, blurred photo background (About only) --- */
.page-about { background:#e8f1f8; }
.page-about::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url('../images/gallery/students-group.jpg'); background-size:cover;
  background-position:center; filter:blur(5px); transform:scale(1.06); opacity:.6; }
/* Keep text readable while letting the photo show through with the page's colour */
.page-about .page-hero { background:rgba(210,232,248,.6); }
.page-about .section { background:rgba(224,240,251,.97); }
.page-about .section-alt { background:rgba(212,233,249,.96); }
.page-about .page-hero h1 { color:var(--teal-900); }

/* --- Header: keep the Donate button vertically centred with the nav --- */
.primary-nav li { display:flex; align-items:center; }
.primary-nav .btn { display:inline-flex; align-items:center; line-height:1; padding:.45rem 1.1rem; }

/* ===========================================================================
   Mobile / small-screen refinements (phones). The 820px block above handles
   nav + grid stacking; this tightens typography and makes tables usable.
   =========================================================================== */
@media (max-width:600px) {
  html { font-size:100%; }                 /* 16px base — denser, still >=16px */
  .section { padding:2.4rem 0; }
  .container { padding:0 1rem; }
  h1 { font-size:1.8rem; }
  h2 { font-size:1.4rem; }
  .lead { font-size:1.05rem; }
  .hero-bg-text h1 { font-size:1.9rem; }
  .page-hero-img { padding:2rem 0; }
  .btn-lg { padding:.7rem 1.2rem; font-size:1rem; }
  .hero-cta .btn, .call-buttons .btn { flex:1 1 auto; text-align:center; }

  /* Keep the fixed page-background cheap/stable on phones */
  body::before { background-attachment:scroll; opacity:.30; }

  /* --- 2-column info tables (At a glance, transport costs): stack --- */
  .table-wrap.narrow { overflow-x:visible; }
  .table-wrap.narrow table, .table-wrap.narrow tbody,
  .table-wrap.narrow tr, .table-wrap.narrow th, .table-wrap.narrow td { display:block; width:100%; }
  .table-wrap.narrow thead { display:none; }
  .table-wrap.narrow tr { border-bottom:1px solid var(--line); padding:.5rem 0; }
  .table-wrap.narrow th { background:none; border:0; color:var(--teal-900); padding:0 0 .1rem; }
  .table-wrap.narrow td { border:0; padding:0; }
  .table-wrap.narrow .total-row { border-top:2px solid var(--teal-600); }

  /* --- Wide labelled tables (budget): reflow each row into a card --- */
  .resp-table { min-width:0; }
  .resp-table thead { display:none; }
  .resp-table table, .resp-table tbody, .resp-table tr,
  .resp-table th, .resp-table td { display:block; width:100%; }
  .resp-table tr { background:#fff; border:1px solid var(--line); border-radius:10px;
    margin-bottom:.6rem; padding:.6rem .8rem; }
  .resp-table tr.total-row { background:var(--bg-tint); border-color:var(--teal-600); }
  .resp-table th[scope="row"] { border:0; background:none; padding:0 0 .3rem;
    font-size:1.05rem; color:var(--teal-900); }
  .resp-table td { border:0; padding:.15rem 0; display:flex; justify-content:space-between; gap:1rem; }
  .resp-table td:empty { display:none; }
  .resp-table td::before { content:attr(data-label); font-weight:700; color:var(--muted); }
  .table-wrap:has(.resp-table) { overflow-x:visible; }
}

@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
}