/* ─────────────────────────────────────────────────────────────────────────
   Proms web token layer  ·  Australian Christian Proms, Sat 29 Aug 2026
   Applies the Proms-Design-Pack system to the four team sites.
   Source of truth: Projects/AChA/Proms-Design-Pack/tokens/*.css
   Loaded AFTER each site's own <style> so it overrides the generic palette.
   Structure and behaviour are untouched: this is skin only.
   ───────────────────────────────────────────────────────────────────────── */

/* Serve the AChA display and accent faces as webfonts. Without these the page
   only renders Neue Regrade on machines that happen to have it installed
   locally; every other visitor silently falls back. Absolute paths resolve on
   all four sites, which each ship /assets/fonts/. */
@font-face{font-family:'Neue Regrade';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/fonts/NeueRegrade-Regular.otf') format('opentype')}
@font-face{font-family:'Neue Regrade';font-weight:600;font-style:normal;font-display:swap;src:url('/assets/fonts/NeueRegrade-Semibold.otf') format('opentype')}
@font-face{font-family:'Brittany Signature';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/fonts/BrittanySignature.ttf') format('truetype')}

:root{
  /* grounds */
  --proms-ink:#0C0F10; --proms-ink-2:#101314;
  --proms-white:#FBFAF6; --proms-cream:#F0E9D6;
  --proms-mist:#E2EAE6; --proms-sky:#E3EAF1; --proms-blush:#F3E4DE;
  /* accent */
  --proms-teal:#4A7276; --proms-teal-soft:#7FA6A6;
  --accent-line:#C9CE55;
  /* status, drawn from the pack's watercolour tones so alerts stay in-family */
  --proms-clay:#C99A8C; --proms-gold:#D8C58A; --proms-sage:#A9B8A6;

  /* the four sites' own variable names, remapped onto Proms values so every
     existing rule inherits the campaign palette without being rewritten */
  --white:var(--proms-white);
  --offwhite:var(--proms-cream);
  --teal:var(--proms-teal);
  --taupe:var(--proms-teal-soft);
  --gray:var(--proms-mist);
  --yellow:var(--accent-line);

  --font-display:'Neue Regrade','Helvetica Neue',Arial,sans-serif;
  --font-script:'Brittany Signature','Pinyon Script',cursive;
  --track-label:0.26em;
}

body{background:var(--proms-cream);color:#22261f}

/* Masthead sits on campaign ink, never on white */
header{background:var(--proms-ink)}

/* Fact strip: the campaign's kicker treatment, wide-tracked and uppercase */
.factstrip{
  background:var(--proms-ink-2);color:rgba(255,255,255,.96);
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:var(--track-label);font-weight:500;font-size:.78rem;
  border-top:1px solid rgba(255,255,255,.10)
}
/* Welfare keeps a distinct strip: this site carries children's data and should
   never be mistaken for the general team sites. Clay, not the campaign ink. */
.factstrip.welfare,body.welfare .factstrip{background:var(--proms-clay);color:#fff}

nav{background:var(--proms-white);border-bottom:1px solid var(--proms-mist)}
nav a{font-family:var(--font-display);letter-spacing:.01em}
nav a:hover{background:var(--proms-cream)}
nav a.active{color:var(--proms-teal);border-bottom-color:var(--proms-teal)}

h2{
  font-family:var(--font-display);color:var(--proms-teal);
  border-bottom:2px solid var(--proms-teal-soft)
}
h3{font-family:var(--font-display);color:#22261f}

.card{
  background:var(--proms-white);border:1px solid var(--proms-mist);
  border-radius:12px;box-shadow:0 1px 3px rgba(12,15,16,.06)
}
.placeholder{border:2px dashed var(--proms-teal-soft);background:var(--proms-white);color:#5d6b63}

table{background:var(--proms-white)}
th{
  background:var(--proms-teal);color:var(--proms-white);
  font-family:var(--font-display);letter-spacing:.06em;
  text-transform:uppercase;font-size:.76rem
}
td{border-bottom:1px solid var(--proms-mist)}
tr:nth-child(even) td{background:var(--proms-cream)}
tr:hover td{background:var(--proms-mist)}

a{color:var(--proms-teal)}

/* Status pills, remapped onto the watercolour tones */
.pill{font-family:var(--font-display);letter-spacing:.02em}
.p-u18{background:var(--proms-blush);color:#8c4536;border:1px solid var(--proms-clay)}
.p-adt{background:var(--proms-mist);color:#3f524a;border:1px solid var(--proms-sage)}
.p-guest,.p-warn{background:#F7F0DC;color:#7a6733;border:1px solid var(--proms-gold)}
.p-out{background:#EFEFEC;color:#77776f;border:1px solid #DDDCD5}
.p-ok{background:var(--proms-mist);color:#2f5f4a;border:1px solid var(--proms-sage)}

.tag{background:var(--proms-mist);color:#22261f;font-family:var(--font-display)}

.pubbtn{
  font-family:var(--font-display);border:1px solid var(--proms-teal);
  background:var(--proms-white);color:var(--proms-teal);letter-spacing:.04em
}
.pubbtn:hover{background:var(--proms-teal);color:var(--proms-white)}
.sharebar{background:var(--proms-mist);border:1px solid var(--proms-teal-soft)}

/* Script accent, for the one hand-written line a page is allowed.
   Pack rule: script stays white on ink, deep teal on cream. Never gradient. */
.proms-script{font-family:var(--font-script);color:var(--proms-teal);line-height:1.22}
header .proms-script{color:var(--proms-white)}

/* ─── FULL ELEMENT COVERAGE ────────────────────────────────────────────────
   Every remaining element and status class across all 30 tabs of the four
   sites. Before this, these fell through to the generic AChA palette or to
   hardcoded hexes that bypassed the variables entirely.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* Welfare status colours. Deliberately DEEPENED rather than softened into
     the campaign's watercolour tones: a safeguarding warning must stay loud
     and legible. Both now exceed 4.5:1 on the cream ground. */
  --red:#9E3A2F;
  --amber:#7D5A14;
}

/* Stat blocks (welfare overview and gaps tabs) */
.stat div{background:var(--proms-white);border:1px solid var(--proms-mist);border-radius:10px}
.stat b{font-family:var(--font-display);color:var(--proms-teal);font-weight:600}
/* The site's own rules are .stat.warn b / .stat.bad b, which require both
   classes on ONE element. The generated markup is actually
   <div class="stat"><div class="bad">, so those selectors have never matched
   and welfare alerts have been rendering as ordinary teal figures. Cover the
   real descendant structure as well as the original, so a warning is loud. */
.stat.warn b,.stat .warn b{color:var(--amber)}
.stat.bad b,.stat .bad b{color:var(--red)}
.stat .warn span,.stat .bad span{font-weight:600}
.stat .bad{border-color:#D8A79C}
.stat .warn{border-color:#D9C48F}
.missing{color:var(--red);font-weight:600}

/* Inline banners: replace the hardcoded pastel fills with campaign tones */
.banner-info{background:var(--proms-mist);border-color:var(--proms-teal)}
.banner-warn{background:#F6E7E3;border-color:#D8A79C;border-left-color:var(--red)}

/* Chrome and small print, previously hardcoded #666 / #555 */
.viewer{background:var(--proms-white);border-bottom-color:var(--proms-mist);color:#5d574a}
.small{color:#5d574a}

/* Form controls, present on every site's toolbar */
/* Welfare declares no button rule at all (only production and events do), so
   without the box properties here its buttons render unpadded. */
button{font-family:var(--font-display);border:1px solid var(--proms-teal);
  background:var(--proms-white);color:var(--proms-teal);
  padding:.45rem .9rem;border-radius:8px;font-size:.85rem;cursor:pointer}
button:hover{background:var(--proms-teal);color:var(--proms-white)}
input,select,textarea{font-family:var(--font-body,'Helvetica Neue',Helvetica,Arial,sans-serif);
  border:1px solid var(--proms-mist);border-radius:8px;background:var(--proms-white);color:#22261f}
input:focus,select:focus,textarea:focus{outline:2px solid var(--proms-teal);outline-offset:1px}
input.search{border-color:var(--proms-mist)}

/* Lists and inline links inside cards, across every tab */
.card ul,.card ol{padding-left:1.15rem}
.card li{margin-bottom:.3rem}
.card a{color:var(--proms-teal)}

/* ─── READING SYSTEM ───────────────────────────────────────────────────── */
:root{--proms-ink:#000000;--proms-white:#FFFFFF;--proms-cream:#F7F6F3;--proms-mist:#E2E2E2;--proms-teal:#6E9C9C;--proms-teal-deep:#315F61;--proms-reading:68ch}
body{color:var(--proms-ink);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:17px;line-height:1.68;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
main{padding-top:2.8rem} h1,h2,h3{letter-spacing:-.018em} h1{font-family:var(--font-display);font-size:clamp(2.25rem,5vw,4rem);line-height:1.08;font-weight:600}
h2{color:var(--proms-teal-deep);font-size:clamp(1.8rem,3.2vw,2.45rem);line-height:1.15;margin:0 0 1.45rem;padding:0 0 .65rem;border-bottom:3px solid var(--proms-teal)} h3{font-size:1.2rem;line-height:1.3;margin:0 0 .65rem;font-weight:600}
p{max-width:var(--proms-reading);margin:0} p + p{margin-top:1rem} section > p{margin:0 0 1.4rem;max-width:var(--proms-reading)} strong{font-weight:700} small,.small{font-size:.82rem;line-height:1.45}
.factstrip{font-size:.73rem;line-height:1.45;letter-spacing:.14em;padding:.75rem 1.25rem} nav{gap:.15rem;padding:.5rem max(1rem,calc((100vw - 1100px)/2))} nav a{font-size:.83rem;line-height:1.25;letter-spacing:.015em;padding:.7rem .72rem .62rem}
nav a:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent-line);outline-offset:3px}.card{padding:1.6rem 1.7rem;margin-bottom:1.45rem}.card > :last-child{margin-bottom:0}.card li{margin-bottom:.55rem;padding-left:.1rem}ul,ol{line-height:1.58}a{font-weight:600;text-decoration-thickness:1px;text-underline-offset:.16em}table{font-size:.92rem;line-height:1.48}th{font-size:.7rem;letter-spacing:.09em;line-height:1.3;padding:.75rem .8rem}td{padding:.72rem .8rem}.banner-info,.banner-warn{line-height:1.58;padding:1rem 1.15rem}.viewer{font-size:.76rem;line-height:1.45;padding:.55rem max(1rem,calc((100vw - 1100px)/2))}.pill,.tag{font-size:.72rem;line-height:1.25}
@media (max-width:700px){body{font-size:16px}main{padding:1.75rem 1rem 3.5rem}h2{font-size:1.75rem}.card{padding:1.25rem 1.15rem}nav{padding:.4rem .65rem;overflow-x:auto;flex-wrap:nowrap}nav a{white-space:nowrap;font-size:.8rem}.factstrip{letter-spacing:.09em;font-size:.68rem}}

.skip-link{position:fixed;z-index:100;top:.75rem;left:.75rem;transform:translateY(-180%);background:#000;color:#fff;padding:.7rem .9rem;border-radius:.35rem}.skip-link:focus{transform:translateY(0);color:#fff}