/* Photo 51 CIC website, v2
   Brand: Bebas Neue (display), Montserrat (text)
   Palette: black, charcoal, white, mist, mustard
   Mustard is only ever a fill behind black text, never text on white (contrast). */

@font-face { font-family: "Bebas Neue"; src: url("/assets/fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --black: #000000;
  --charcoal: #1A1A1A;
  --white: #FFFFFF;
  --mist: #F3F3F1;
  --line: #DEDEDE;
  --muted: #555555;
  --on-dark: #CFCFCF;
  --mustard: #F5B800;
  --magenta: #E91E63;
  --purple: #6C4AFF;
  --teal: #008894;
  --blue: #2563EB;
  --bg-purple: #5A3BD9;
  --bg-teal: #006B73;
  --bg-blue: #1D4ED8;
  --bg-magenta: #B0144F;

  --display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --text: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 10vw, 8.5rem);
  --measure: 64ch;
  --header-h: 4.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--text); font-size: 1.0625rem; line-height: 1.68; color: var(--charcoal); background: var(--white); text-rendering: optimizeLegibility; }
img, picture, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: break-word; }
.btn, .nav a { overflow-wrap: normal; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: .94; letter-spacing: .005em; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(3.5rem, 9vw, 7.75rem); }
h2 { font-size: clamp(2.6rem, 5.6vw, 4.75rem); }
h3 { font-size: clamp(1.7rem, 2.8vw, 2.35rem); line-height: 1; }
h4 { font-family: var(--text); font-weight: 700; font-size: 1.05rem; line-height: 1.35; letter-spacing: 0; }
.lead { font-size: clamp(1.15rem, 1.7vw, 1.38rem); line-height: 1.55; font-weight: 500; }
.sub { font-weight: 600; font-size: 1.15rem; line-height: 1.4; margin-bottom: 1.25rem; max-width: 42ch; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--mist { background: var(--mist); }
.section--dark { background: var(--black); color: var(--white); }
.section--charcoal { background: var(--charcoal); color: var(--white); }
.section--dark p, .section--charcoal p, .page-head p { color: var(--on-dark); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { margin: 0 0 .3em; }
.section-head .sub { margin-bottom: 0; }
@media (max-width: 860px) { .section-head { grid-template-columns: minmax(0, 1fr); } }

:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
.site-header :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .page-head :focus-visible, .section--dark :focus-visible, .section--charcoal :focus-visible, .zero :focus-visible { outline-color: var(--mustard); }
.concern :focus-visible { outline-color: var(--black); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--mustard); color: var(--black); padding: .8rem 1.1rem; font-weight: 700; z-index: 200; }
.skip:focus { left: 1rem; top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(0,0,0,.92); color: var(--white); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.brand { margin-right: auto; display: block; }
.brand img { width: 150px; }
.nav ul { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.6rem); }
.nav a { text-decoration: none; font-weight: 600; font-size: .92rem; padding: .4rem 0; border-bottom: 2px solid transparent; color: var(--white); }
.nav a:hover { border-bottom-color: rgba(255,255,255,.5); }
.nav a[aria-current="page"] { border-bottom-color: var(--mustard); }
.nav .nav-donate a { border: 1px solid rgba(255,255,255,.6); padding: .62rem 1rem; }
.nav .nav-donate a:hover { border-color: var(--white); background: var(--white); color: var(--black); }
.nav .nav-cta a { background: var(--mustard); color: var(--black); padding: .7rem 1rem; border: 0; }
.nav .nav-cta a:hover { background: var(--white); }
.nav-toggle { display: none; background: none; color: var(--white); border: 1px solid rgba(255,255,255,.5); padding: .55rem .9rem; font: 600 .9rem var(--text); cursor: pointer; }
@media (max-width: 1080px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; inset: 100% 0 auto 0; background: var(--black); border-bottom: 1px solid #222; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .nav.is-open { display: block; height: calc(100dvh - var(--header-h)); }
  html.menu-open { overflow: hidden; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.5rem; }
  .nav a { display: block; padding: 1rem 0; border-bottom: 1px solid #222; font-size: 1.05rem; }
  .nav a[aria-current="page"] { border-bottom-color: #222; box-shadow: inset 4px 0 0 var(--mustard); padding-left: 1rem; }
  .nav .nav-cta, .nav .nav-donate { margin-top: 1rem; }
  .nav .nav-donate a { text-align: center; padding: 1rem; border: 1px solid rgba(255,255,255,.6); }
  .nav .nav-cta a { text-align: center; padding: 1rem; }
}

/* Buttons and links */
.btn { display: inline-flex; align-items: center; gap: .6rem; font: 700 1rem/1.1 var(--text); text-decoration: none; padding: 1.05rem 1.5rem; border: 2px solid var(--mustard); background: var(--mustard); color: var(--black); transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.on-light .btn:hover, .on-light .btn--ghost:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
@media (max-width: 480px) { .btn-row .btn { flex: 1 1 100%; justify-content: center; text-align: center; } }
.text-link { font-weight: 700; text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.text-link:hover { text-decoration-color: currentColor; }

/* Viewfinder: the bracket corners from the 51 mark, framing what is in focus */
.vf { --vf: var(--black); --len: clamp(18px, 2.4vw, 30px); --w: 3px; position: relative; padding: clamp(10px, 1.2vw, 14px);
  background:
    linear-gradient(var(--vf),var(--vf)) top left/var(--len) var(--w) no-repeat, linear-gradient(var(--vf),var(--vf)) top left/var(--w) var(--len) no-repeat,
    linear-gradient(var(--vf),var(--vf)) top right/var(--len) var(--w) no-repeat, linear-gradient(var(--vf),var(--vf)) top right/var(--w) var(--len) no-repeat,
    linear-gradient(var(--vf),var(--vf)) bottom left/var(--len) var(--w) no-repeat, linear-gradient(var(--vf),var(--vf)) bottom left/var(--w) var(--len) no-repeat,
    linear-gradient(var(--vf),var(--vf)) bottom right/var(--len) var(--w) no-repeat, linear-gradient(var(--vf),var(--vf)) bottom right/var(--w) var(--len) no-repeat; }
.section--dark .vf, .section--charcoal .vf, .page-head .vf { --vf: var(--white); }
.vf picture, .vf img { width: 100%; }
.vf img { aspect-ratio: var(--ratio, 4 / 3); object-fit: cover; background: #ccc; }

/* Home hero: the one orchestrated moment. The headline resolves from blur into focus. */
.hero { position: relative; isolation: isolate; background: var(--black); color: var(--white); min-height: min(92vh, 860px); display: grid; align-items: end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media picture { display: block; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 38%, rgba(0,0,0,.25) 72%, rgba(0,0,0,.05) 100%), linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 40%); }
.hero-inner { padding-block: clamp(5rem, 12vw, 9rem) clamp(2.5rem, 5vw, 3.5rem); }
.hero h1 { font-size: clamp(4.2rem, 13vw, 11.5rem); line-height: .84; margin-bottom: 1.75rem; max-width: 12ch; }
.hero h1 span { display: block; }
.hero h1 .focus { color: var(--mustard); }
.hero .lead { color: #E4E4E4; max-width: 44ch; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span { animation: focus-in 1.4s cubic-bezier(.2,.7,.2,1) both; }
  .hero h1 span:nth-child(2) { animation-delay: .16s; }
  .hero h1 span:nth-child(3) { animation-delay: .32s; }
  .hero-media img { animation: settle 2.4s cubic-bezier(.2,.7,.2,1) both; }
}
@media (max-width: 700px) { .hero::before { background: linear-gradient(0deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.8) 55%, rgba(0,0,0,.45) 100%); } }
@keyframes focus-in { 0% { filter: blur(20px); opacity: .2; transform: translateX(-.05em); } 55% { opacity: 1; } 100% { filter: blur(0); opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); filter: blur(6px); } to { transform: none; filter: none; } }

/* Audience bar under the hero */
.audience-bar { border-top: 1px solid rgba(255,255,255,.18); margin-top: clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: auto repeat(4, 1fr); }
.audience-bar p { margin: 0; padding: 1.2rem 1.5rem 1.2rem 0; font-size: .9rem; font-weight: 600; color: #BDBDBD; align-self: center; }
.audience-bar a { display: block; text-decoration: none; padding: 1.2rem 1.25rem; border-left: 1px solid rgba(255,255,255,.18); font-family: var(--display); font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1; transition: background-color .15s ease, color .15s ease; }
.audience-bar a span { display: block; font-family: var(--text); font-size: .8rem; font-weight: 500; color: #BDBDBD; margin-top: .35rem; line-height: 1.3; }
.audience-bar a:hover { background: var(--mustard); color: var(--black); }
.audience-bar a:hover span { color: var(--black); }
@media (max-width: 900px) { .audience-bar { grid-template-columns: 1fr 1fr; } .audience-bar p { grid-column: 1 / -1; } .audience-bar a { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); } .audience-bar a:nth-of-type(odd) { border-right: 1px solid rgba(255,255,255,.18); } }

/* Inner page head */
.page-head { background: var(--black); color: var(--white); padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.page-head .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.page-head--text .wrap { grid-template-columns: minmax(0, 1fr); }
.page-head h1 { margin-bottom: .35em; }
.page-head .lead { color: #E0E0E0; }
.crumb { font-size: .9rem; font-weight: 600; margin-bottom: 1.25rem; color: #BDBDBD; }
.crumb a { color: var(--white); }
@media (max-width: 860px) { .page-head .wrap { grid-template-columns: minmax(0, 1fr); } }

/* Split layouts */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split--wide-text { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.split--flip > :first-child { order: 2; }
@media (max-width: 860px) { .split, .split--wide-text { grid-template-columns: minmax(0, 1fr); } .split--flip > :first-child { order: 0; } }

.statement { text-wrap: balance; font-family: var(--display); font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: .98; max-width: 18ch; margin: 2.25rem 0 0; color: inherit; }
.statement::before { content: ""; display: block; width: 3.5rem; height: 5px; background: var(--mustard); margin-bottom: 1.1rem; }

/* Strands (what we do) */
.strands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 3.5vw, 3rem); }
.strand h3 { margin-top: 1.5rem; }
@media (max-width: 900px) { .strands { grid-template-columns: 1fr; max-width: 560px; } }

/* Programmes in delivery */
.programmes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.programme { background: var(--white); border-top: 6px solid var(--mustard); padding: clamp(1.75rem, 3.5vw, 2.75rem); display: flex; flex-direction: column; }
.programme .status { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; margin-bottom: 1.1rem; }
.programme .status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: #1E9E52; box-shadow: 0 0 0 4px rgba(30,158,82,.18); }
.programme .status--planned::before { background: var(--mustard); box-shadow: 0 0 0 4px rgba(245,184,0,.25); }
.programme h3 { margin-bottom: .6rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 1.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .95rem; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
@media (max-width: 860px) { .programmes { grid-template-columns: 1fr; } }

/* Track record rows */
.record { border-top: 2px solid currentColor; }
.record li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, .8fr); gap: 1.5rem 2.5rem; padding: 1.75rem 0; border-bottom: 1px solid rgba(255,255,255,.18); align-items: start; }
.section--mist .record li, .on-light .record li { border-bottom-color: var(--line); }
.record h3 { margin: 0; }
.record p { margin: 0; }
.record .who { font-size: .88rem; font-weight: 600; color: #BDBDBD; }
.on-light .record .who { color: var(--muted); }
@media (max-width: 860px) { .record li { grid-template-columns: 1fr; gap: .6rem; } }

.callout-number { font-family: var(--display); font-size: clamp(4.5rem, 10vw, 8rem); line-height: .85; color: var(--mustard); }

/* Work with us rows */
.routes { border-top: 2px solid var(--black); }
.route { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) 17.5rem; gap: 1.5rem 3rem; align-items: center; padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--line); }
.route h3 { margin: 0; font-size: clamp(2rem, 3.4vw, 2.9rem); }
.route p { margin: 0; }
.route .btn { white-space: nowrap; justify-content: center; }
@media (max-width: 900px) { .route { grid-template-columns: 1fr; gap: .9rem; } .route .btn { justify-self: start; } }

/* Partners */
.partners { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.partner { background: var(--white); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.partner picture, .partner img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.partner .wordmark { aspect-ratio: 1; display: grid; place-items: center; text-align: center; background: var(--mist); font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; padding: 1rem; }
.partner span { font-weight: 600; font-size: .92rem; line-height: 1.35; }
@media (max-width: 1000px) { .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.partner a.wordmark { text-decoration: none; }
.partner a.wordmark:hover { background: var(--mustard); }

/* Trust band */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,.2); }
.trust li { padding: 1.75rem 1.75rem 1.75rem 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.trust li:not(:nth-child(3n+1)) { padding-left: 1.75rem; border-left: 1px solid rgba(255,255,255,.2); }
.trust h3 { font-size: 1.7rem; margin-bottom: .4rem; color: var(--white); }
.trust p { font-size: .95rem; margin: 0; }
@media (max-width: 860px) { .trust { grid-template-columns: 1fr; } .trust li, .trust li:not(:nth-child(3n+1)) { padding: 1.5rem 0; border-left: 0; } }

/* Examples lists */
.examples { margin-top: 1.75rem; }
.examples ul { columns: 2 15rem; column-gap: 2.5rem; }
.examples li { break-inside: avoid; position: relative; padding: .5rem 0 .5rem 1.4rem; border-top: 1px solid var(--line); font-size: .97rem; }
.examples li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .55rem; height: .55rem; background: var(--mustard); }
.work-block { align-items: start; }
@media (min-width: 861px) { .work-block > .vf { position: sticky; top: calc(var(--header-h) + 2rem); } }
.work-block + .work-block { margin-top: clamp(5rem, 10vw, 8rem); }

/* Workshops */
.workshops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18); }
.workshop { background: var(--charcoal); padding: clamp(1.75rem, 3vw, 2.5rem); }
.workshop .meta { font-size: .88rem; font-weight: 600; color: var(--mustard); margin-bottom: .8rem; }
@media (max-width: 760px) { .workshops { grid-template-columns: 1fr; } }

/* Formats and steps */
.formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); }
.formats h3 { padding-bottom: .6rem; border-bottom: 4px solid var(--mustard); }
.formats li { padding: .8rem 0; border-bottom: 1px solid var(--line); font-weight: 600; }
@media (max-width: 760px) { .formats { grid-template-columns: 1fr; } }
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.steps li { counter-increment: step; border-top: 2px solid var(--black); padding-top: 1.1rem; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--display); font-size: 2.4rem; line-height: 1; margin-bottom: .6rem; }
.steps h3 { font-family: var(--text); font-weight: 700; font-size: 1.05rem; line-height: 1.3; margin-bottom: .4rem; }
.steps p { font-size: .95rem; }
@media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Values */
.values-list { border-top: 2px solid var(--black); }
.value { display: grid; grid-template-columns: minmax(4.5rem, 8rem) minmax(0, 1fr); gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.value .num { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 3.75rem); line-height: .9; }
.value .num::after { content: ""; display: block; width: 1.75rem; height: 4px; background: var(--mustard); margin-top: .6rem; }
.value h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin-bottom: .35em; }
@media (max-width: 560px) { .value { grid-template-columns: 1fr; gap: .5rem; } }
.zero { margin-top: clamp(3rem, 6vw, 5rem); background: var(--black); color: var(--white); padding: clamp(2rem, 5vw, 3.5rem); border-left: 10px solid var(--mustard); }
.zero p { color: var(--white); font-size: 1.15rem; font-weight: 500; }

/* Documents */
.docs { border-top: 2px solid var(--black); }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.doc h3 { margin: 0 0 .3rem; }
.doc p { margin: 0; font-size: .95rem; color: var(--muted); }
.doc .actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.doc .actions a { font-weight: 700; font-size: .95rem; padding: .75rem 1rem; border: 2px solid var(--black); text-decoration: none; white-space: nowrap; }
.doc .actions a:hover { background: var(--black); color: var(--white); }
.doc .actions a.pdf { background: var(--mustard); border-color: var(--mustard); color: var(--black); }
.doc .actions a.pdf:hover { background: var(--black); border-color: var(--black); color: var(--white); }
@media (max-width: 760px) { .doc { grid-template-columns: 1fr; } }

.concern { background: var(--mustard); color: var(--black); padding: clamp(1.75rem, 4vw, 2.75rem); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem 3rem; }
.concern h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: .4rem; }
.concern p { color: var(--black); }
.concern dl { margin: 0; display: grid; gap: .3rem; font-weight: 600; }
.concern dt { font-size: .85rem; font-weight: 700; margin-top: .6rem; }
.concern dd { margin: 0; font-size: 1.05rem; }
.concern a { color: var(--black); font-weight: 700; }
@media (max-width: 760px) { .concern { grid-template-columns: 1fr; } }

/* Policy document pages */
.doc-body { max-width: 760px; }
.doc-body h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); margin-top: 0; }
.doc-body section + section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.doc-body ul { margin: 0 0 1.1em; }
.doc-body li { position: relative; padding: .3rem 0 .3rem 1.4rem; }
.doc-body li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .5rem; height: .5rem; background: var(--mustard); }
.doc-meta { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.5rem; margin: 0 0 2.5rem; padding: 1.5rem; background: var(--mist); font-size: .95rem; }
.doc-meta dt { font-weight: 700; }
.doc-meta dd { margin: 0; }
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.doc-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: 1.5rem; border: 2px solid var(--black); }
.doc-aside h2 { font-size: 1.6rem; }
.doc-aside li { padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.doc-aside a { text-decoration: none; }
.doc-aside a:hover, .doc-aside a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 3px; }
@media (max-width: 960px) { .doc-layout { grid-template-columns: minmax(0, 1fr); } .doc-aside { position: static; } }
@media (max-width: 600px) { .doc-meta, .facts { grid-template-columns: minmax(0, 1fr); gap: .1rem; } .doc-meta dd, .facts dd { margin-bottom: .6rem; } }

/* Founders */
.founders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 3rem); }
.founder { border-top: 6px solid var(--mustard); padding-top: 1.5rem; }
.founder h3 { margin-bottom: .2em; }
.founder .roles { font-weight: 600; font-size: .95rem; margin-bottom: 1rem; }
.founder .creds { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .92rem; }
.founder .creds li { padding: .25rem 0; }
@media (max-width: 960px) { .founders { grid-template-columns: 1fr; max-width: 640px; } }

.governance { display: grid; grid-template-columns: max-content 1fr; gap: .8rem 2.5rem; border-top: 2px solid currentColor; padding-top: 1.5rem; }
.governance dt { font-weight: 700; }
.governance dd { margin: 0; }
@media (max-width: 640px) { .governance { grid-template-columns: 1fr; gap: .2rem; } .governance dd { margin-bottom: .8rem; } }

/* Support */
.asks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ask { background: var(--white); padding: clamp(1.75rem, 3vw, 2.5rem); }
.ask h3 { margin-bottom: .5rem; }
@media (max-width: 760px) { .asks { grid-template-columns: 1fr; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
address { font-style: normal; font-size: 1.1rem; line-height: 1.6; font-weight: 500; }
.enquiries li { border-bottom: 1px solid var(--line); }
.enquiries li:first-child { border-top: 2px solid var(--black); }
.enquiries a { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: 1.25rem 0; text-decoration: none; }
.enquiries strong { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1; }
.enquiries span { grid-column: 1; font-size: .93rem; color: var(--muted); }
.enquiries a::after { content: ""; grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 2.75rem; height: 2.75rem; background: var(--mustard) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/1.2rem no-repeat; }
.enquiries a:hover strong { text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.map-box { position: relative; aspect-ratio: 4 / 3; background: var(--charcoal); color: var(--white); display: grid; place-items: center; text-align: center; padding: 2rem; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-box p { color: var(--on-dark); margin-inline: auto; }

/* CTA band */
.cta-band h2 { max-width: 14ch; }

/* Footer */
.site-footer { background: var(--black); color: var(--on-dark); padding: clamp(4rem, 8vw, 6rem) 0 2.5rem; font-size: .95rem; }
.footer-top { display: grid; grid-template-columns: 1.3fr .8fr 1.1fr 1.3fr; gap: 2.5rem; }
@media (max-width: 960px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.site-footer .logo { width: 240px; margin-bottom: 1.25rem; }
.site-footer h2 { font-size: 1.55rem; color: var(--white); margin-bottom: .8rem; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: var(--white); text-decoration-color: rgba(245,184,0,.8); }
.legal { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid #2A2A2A; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; font-size: .84rem; }
.legal p { color: #A8A8A8; max-width: 80ch; margin: 0; }

.print-only { display: none; }

/* Print: policy pages print as clean documents */
@media print {
  .site-header, .site-footer, .skip, .doc-aside, .no-print { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .page-head { background: none; color: #000; padding: 0 0 12pt; border-bottom: 3pt solid var(--mustard); }
  .page-head p, .page-head .lead { color: #000; }
  .section { padding: 12pt 0; }
  .doc-layout { display: block; }
  a { text-decoration: none; }
  .print-only { display: block; width: 46mm; margin-bottom: 8mm; }
  .page-head h1 { font-size: 34pt; }
  .page-head .lead { font-size: 12pt; }
  .doc-body { max-width: none; }
  .doc-body h2 { font-size: 20pt; break-after: avoid; }
  .doc-body section + section { margin-top: 16pt; padding-top: 12pt; }
  .doc-body li, .doc-body p { break-inside: avoid; }
  .doc-meta { break-inside: avoid; }
  .wrap { padding-inline: 0; }
}
.label { font-family: var(--text); font-weight: 700; font-size: 1.05rem; line-height: 1.35; letter-spacing: 0; margin-bottom: .6rem; }

/* Read only policy documents */
[data-protected] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.print-block { display: none; }
@media print {
  body.protected-page > *:not(.print-block) { display: none !important; }
  body.protected-page .print-block { display: block; font: 14pt/1.5 Arial, sans-serif; padding: 20mm; }
}

/* Feature photos */
.feature-photo { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.feature-photo figcaption { font-size: .88rem; font-weight: 600; color: var(--muted); margin-top: .6rem; }
.section--dark .feature-photo figcaption { color: #BDBDBD; }
.founders-photo { max-width: 480px; }
.vf img { object-position: center 30%; }
.feature-photo--wide img { object-position: center 46%; }
@media (max-width: 700px) { .feature-photo--wide img { aspect-ratio: 4 / 3 !important; } }
@media (max-width: 700px) { .hero-media img { object-position: 30% center; } }
.thumb-photo { margin: 1.5rem 0 0; max-width: 320px; }
.thumb-photo figcaption { font-size: .85rem; font-weight: 600; color: var(--muted); margin-top: .5rem; }
.thumb-photo img { object-position: center 55%; }

/* Read only policies: visible watermark and focus shield */
.protected-page .doc-body { position: relative; }
.protected-page .doc-body::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--wm, none); background-repeat: repeat; background-size: 460px 280px; z-index: 2; }
.shield { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; text-align: center; padding: 2rem; background: rgba(0,0,0,.94); color: var(--white); font: 600 1.1rem/1.5 var(--text); }
.shield p { color: var(--white); margin: 0 auto; }
html.shielded .shield { display: grid; }
html.shielded .doc-body { filter: blur(14px); }

/* Email fallback links and enquiry form */
.form-alt { font-size: .88rem; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.form-alt-wrap { margin: .9rem 0 0; }
.route-cta { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; }
.route-cta .form-alt { text-align: center; }
@media (max-width: 900px) { .route-cta { align-items: flex-start; } .route-cta .form-alt { text-align: left; } }
.enquiry-form { background: var(--white); padding: clamp(1.5rem, 3vw, 2.5rem); border-top: 6px solid var(--mustard); display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.field label { font-weight: 700; font-size: .95rem; }
.field .opt { font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; padding: .8rem .9rem; border: 2px solid #8A8A8A; background: var(--white); color: var(--charcoal); border-radius: 0; width: 100%; }
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; border-color: var(--black); }
.field [aria-invalid="true"] { border-color: #B00020; }
.hint { font-size: .85rem; color: var(--muted); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-form .btn { justify-self: start; cursor: pointer; }
.enquiry-form .btn[disabled] { opacity: .6; cursor: wait; }
.form-status { margin: 0; font-weight: 600; }
.form-status.is-error { color: #B00020; }
.form-status.is-ok { color: #1E7A44; }
.form-layout { align-items: start; }
.view-stamp { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .78rem; line-height: 1.45; color: var(--muted); }

/* Cross-page transitions (Chrome, Edge, Safari; others simply load normally) */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Photos develop into focus as they scroll into view, echoing the logo. CSS only, no JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main .section .vf picture { animation: develop linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes develop { from { filter: blur(10px) saturate(.4); opacity: .35; transform: scale(1.03); } to { filter: none; opacity: 1; transform: none; } }
  }
}


/* ---------- Photo headers and colour accents (Oct 2026) ----------
   Every main page opens on a full colour photo of real people, with a band of
   one brand colour along the bottom. Black and mustard stay as accents. */
.acc-magenta { --accent: var(--magenta); }
.acc-purple  { --accent: var(--purple); }
.acc-teal    { --accent: var(--teal); }
.acc-blue    { --accent: var(--blue); }

.page-head--photo { padding: 0; min-height: clamp(32rem, 76vh, 46rem); display: grid; align-items: end; isolation: isolate; border-bottom: 10px solid var(--accent, var(--mustard)); }
.page-head--photo .ph-media { position: absolute; inset: 0; z-index: -2; }
.ph-media picture { display: block; height: 100%; }
.ph-media img { width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; object-position: center 35%; }
.ph-media.pos-top img { object-position: center 22%; }
.ph-media.pos-high img { object-position: center 12%; }
.ph-media.pos-mid img { object-position: center 50%; }
.ph-media.pos-low img { object-position: center 44%; }
.page-head--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.12) 66%, rgba(0,0,0,0) 100%); }
@media (min-width: 861px) { .page-head--photo::before { background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 36%, rgba(0,0,0,0) 68%), linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 58%); } }
.page-head--photo .wrap { display: block; padding-block: clamp(9rem, 22vw, 14rem) clamp(2.25rem, 4vw, 3.25rem); }
.page-head--photo .ph-copy { max-width: 44rem; }
.page-head--photo h1, .page-head--photo .lead { text-shadow: 0 1px 18px rgba(0,0,0,.45); }
.page-head--photo .lead { color: #F2F2F2; }
.page-head--photo p { color: #EDEDED; }
.page-head--photo .form-alt-wrap { color: #E6E6E6; }

/* Home hero: real photo in full colour, colour band beneath */
.hero--photo::before { background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.08) 72%, rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.15) 50%, rgba(0,0,0,0) 70%); }
.hero--photo .hero-media img { object-position: center 30%; }
@media (max-width: 700px) { .hero--photo::before { background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 50%, rgba(0,0,0,.2) 80%, rgba(0,0,0,0) 100%); } .hero--photo .hero-media img { object-position: center 20%; } }
.hero--photo h1 { font-size: clamp(3.6rem, 10vw, 8.5rem); text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.colour-band { display: grid; grid-template-columns: repeat(4, 1fr); height: 10px; }
.colour-band span:nth-child(1) { background: var(--magenta); }
.colour-band span:nth-child(2) { background: var(--purple); }
.colour-band span:nth-child(3) { background: var(--teal); }
.colour-band span:nth-child(4) { background: var(--blue); }

/* Splash of colour through the page: each card picks up its own brand colour */
.accent-top { border-top: 6px solid var(--accent, var(--mustard)); }
@media print { .page-head--photo .ph-media, .page-head--photo::before, .colour-band { display: none; } .page-head--photo { min-height: 0; border-bottom: 3pt solid var(--mustard); } }

/* Phones: show the photo clearly, title on its bottom edge, text beneath */
@media (max-width: 860px) {
  .page-head--photo, .hero--photo { display: block; min-height: 0; }
  .page-head--photo .ph-media, .hero--photo .hero-media { position: relative; height: 52vh; min-height: 17rem; max-height: 30rem; }
  .page-head--photo::before, .hero--photo::before { bottom: auto; height: min(max(52vh, 17rem), 30rem); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.6) 22%, rgba(0,0,0,0) 48%); }
  .page-head--photo .wrap { position: relative; margin-top: -4.25rem; padding-block: 0 2.5rem; }
  .hero--photo .hero-inner { position: relative; margin-top: -7rem; padding-top: 0; }
  .page-head--photo h1, .page-head--photo .lead { text-shadow: none; }
}

.strand[class*="acc-"] h3, .work-block[class*="acc-"] h2 { padding-bottom: .45rem; border-bottom: 4px solid var(--accent); display: inline-block; }
.programme[class*="acc-"] { border-top-color: var(--accent); }

/* Header photos: softened out of focus on purpose (the brand story), washed with the page colour.
   This also hides the low resolution of phone photos at full width. */
.ph-media { overflow: hidden; }
.ph-media img { filter: blur(6px) saturate(1.25); transform: scale(1.08); }
.page-head--photo .ph-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, transparent) 45%, transparent 85%); opacity: .7; }
@media (max-width: 860px) { .ph-media img { filter: blur(4px) saturate(1.25); } .page-head--photo .ph-media::after { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent) 60%, transparent) 100%); } }

/* Coloured sections replace the all black ones */
.bg-purple { --bg: var(--bg-purple); } .bg-teal { --bg: var(--bg-teal); } .bg-blue { --bg: var(--bg-blue); } .bg-magenta { --bg: var(--bg-magenta); }
.section--colour { background: var(--bg); color: var(--white); }
.section--colour h2, .section--colour h3, .section--colour p, .section--colour li, .section--colour dt, .section--colour dd, .section--colour .sub { color: var(--white); }
.section--colour .vf { --vf: var(--black); }
.section--colour .workshop .meta { color: var(--white); }
.section--colour .feature-photo figcaption { color: #F0F0F0; }
.section--colour :focus-visible { outline-color: var(--mustard); }
.page-head.bg-blue, .page-head.bg-purple, .page-head.bg-teal, .page-head.bg-magenta { background: var(--bg); }
.page-head[class*="bg-"] .lead, .page-head[class*="bg-"] p { color: #F2F2F2; }
.dominoes { margin: 0; }
.section--colour .record .who { color: #ECECEC; }

/* ---------- Team onboarding and safeguarding dashboard ---------- */
.eyebrow { font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .8rem; color: #F2F2F2; }
.btn--small { padding: .7rem 1.05rem; font-size: .9rem; }
.btn--ghost-dark { background: transparent; border-color: var(--black); color: var(--black); }
.btn--ghost-dark:hover { background: var(--black); border-color: var(--black); color: var(--white); }
.btn--danger { background: transparent; border-color: var(--bg-magenta); color: var(--bg-magenta); }
.btn--danger:hover { background: var(--bg-magenta); border-color: var(--bg-magenta); color: var(--white); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.team-wrap { max-width: 50rem; }
.team-block { border: 0; border-top: 6px solid var(--accent, var(--bg-purple)); background: var(--white); margin: 0 0 1.75rem; padding: 1.5rem clamp(1.1rem, 3vw, 2rem) 1.75rem; box-shadow: 0 1px 0 var(--line); }
.team-block > legend { float: left; width: 100%; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1; margin: 0 0 1rem; display: flex; gap: .7rem; align-items: center; }
.team-block > legend ~ * { clear: both; }
.team-block .num { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; background: var(--black); color: var(--white); font-size: 1.2rem; }
.ta-field { display: grid; gap: .35rem; margin: 0 0 1rem; font-weight: 600; font-size: .95rem; }
.ta-field small { display: block; font-weight: 500; color: var(--muted); font-size: .82rem; }
.ta-field input, .ta-field select { font: inherit; font-weight: 500; padding: .75rem .85rem; border: 2px solid #BDBDBD; background: var(--white); color: var(--black); width: 100%; max-width: 100%; }
.ta-field input:focus, .ta-field select:focus { border-color: var(--black); outline: 3px solid var(--mustard); outline-offset: 1px; }
.sig-input { font-style: italic; font-size: 1.25rem !important; }
.tick { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .75rem; align-items: start; padding: .85rem 0; border-top: 1px solid var(--line); cursor: pointer; }
.tick input { width: 1.35rem; height: 1.35rem; margin: .1rem 0 0; accent-color: var(--bg-purple); }
.tick input:disabled + span { color: var(--muted); }
.pol-list { list-style: none; margin: 0; padding: 0; }
.pol { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; border-top: 1px solid var(--line); }
.pol .tick { order: -1; border-top: 0; }
.pol .ver, .pol .note, .pol .hint { font-size: .85rem; color: var(--muted); font-weight: 500; }
.pol .hint { color: var(--bg-purple); font-weight: 600; }
.ta-small { font-size: .88rem; color: var(--muted); }
.team-privacy { margin-top: 1.5rem; }
.team-done { background: var(--white); border-left: 10px solid var(--teal); padding: 2rem; }
.form-msg { font-weight: 700; color: var(--bg-magenta); min-height: 1.5em; }
.form-msg.is-ok { color: var(--bg-teal); }
.ta-banner { background: var(--white); border-left: 8px solid var(--line); padding: 1rem 1.25rem; margin: 0 0 1rem; font-weight: 600; }
.ta-banner p { margin: 0; }
.ta-banner.is-ok { border-left-color: var(--teal); }
.ta-banner.is-warn { border-left-color: var(--mustard); }
.ta-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.ta-bar .g-filters { margin: 0; }
.ta-filter span { display: inline-block; min-width: 1.4em; margin-left: .35rem; padding: 0 .35rem; background: var(--line); color: var(--black); font-size: .8rem; }
.ta-filter[aria-pressed="true"] span { background: var(--mustard); }
.ta-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--black); }
.ta-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; padding: 1.1rem .5rem; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.ta-row:hover { background: var(--white); }
.ta-name { font-weight: 700; font-size: 1.05rem; }
.ta-role { display: block; font-weight: 500; font-size: .88rem; color: var(--muted); }
.ta-flags { display: flex; flex-wrap: wrap; gap: .4rem; }
.ta-empty { padding: 1.5rem .5rem; color: var(--muted); list-style: none; }
.st { display: inline-block; padding: .3rem .6rem; font-size: .8rem; font-weight: 700; background: var(--line); color: var(--black); white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.st-invited { background: #E8E8E8; }
.st-checks { background: var(--mustard); }
.st-resign { background: var(--bg-purple); color: var(--white); }
.st-cleared { background: var(--bg-teal); color: var(--white); }
.st-left { background: #5A5A5A; color: var(--white); }
.st-due { background: #FFF1C2; }
.st-overdue { background: var(--bg-magenta); color: var(--white); }
.ta-back a { font-weight: 700; }
.ta-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.ta-head h2 { margin: 0 0 .25rem; }
.ta-head h2:focus { outline: none; }
.ta-head p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.ta-card { background: var(--white); padding: 1.5rem clamp(1rem, 3vw, 2rem); margin: 0 0 1.5rem; border-top: 6px solid var(--black); }
.ta-card h3 { margin-top: 0; }
.ta-card fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1.25rem; }
.ta-card legend { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin-bottom: .6rem; color: var(--bg-purple); }
.ta-ticks { padding-left: 1.2rem; }
.ta-ticks li { margin: .25rem 0; }
.ta-warn { font-weight: 700; color: var(--bg-purple); }
.ta-log { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.ta-log li { padding: .5rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.ta-log time { color: var(--muted); margin-right: .4rem; }
.ta-dialog { border: 0; padding: 2rem clamp(1rem, 4vw, 2rem); width: min(32rem, calc(100vw - 2rem)); border-top: 8px solid var(--bg-purple); }
.ta-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.ta-dialog h2 { margin-top: 0; }
.ta-dialog .ta-close { position: absolute; top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem; border: 0; background: var(--black); color: var(--white); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.ta-dialog .ta-close:hover { background: var(--bg-purple); }
.ta-dialog .ta-close:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.ta-dialog { position: relative; }
.ta-link { display: flex; gap: .5rem; margin-top: .75rem; }
.ta-link input { flex: 1; min-width: 0; font: inherit; font-size: .85rem; padding: .6rem; border: 2px solid #BDBDBD; }
.ta-linkbox { margin-top: 1rem; }
@media print {
  #team-admin .ta-card { border-top: 2pt solid #000; break-inside: avoid; padding: 8pt 0; }
  #team-admin .ta-field input, #team-admin .ta-field select { border: 0; padding: 0; appearance: none; }
  #team-admin .ta-printed { width: auto; font-weight: 700; }
  .st { border: 1pt solid #000; background: none !important; color: #000 !important; }
}

/* Induction, quick check and practical details */
.extras { margin-top: .5rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.extras summary, .ind summary { cursor: pointer; font-weight: 700; }
.extras[open] summary { margin-bottom: 1rem; }
.photo-pick { margin-top: .5rem; }
.photo-btn { position: relative; cursor: pointer; }
.photo-btn:focus-within { outline: 3px solid var(--mustard); outline-offset: 2px; }
.photo-preview { display: block; margin-top: 1rem; width: 160px; height: 160px; object-fit: cover; border: 3px solid var(--black); }
.ind { border-top: 1px solid var(--line); padding: .9rem 0; }
.ind summary { display: flex; align-items: center; gap: .7rem; list-style: none; font-size: 1.05rem; }
.ind summary::-webkit-details-marker { display: none; }
.ind-n { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 2px solid var(--black); font-size: .9rem; flex: none; }
.ind-done { margin-left: auto; font-size: .8rem; padding: .2rem .55rem; background: var(--bg-teal); color: var(--white); }
.ind-body { padding: .75rem 0 0 2.5rem; }
.ind-body ul, .ind-body ol { padding-left: 1.2rem; }
.ind-body li { margin: .35rem 0; }
#quiz[disabled] .quiz { opacity: .6; }
#quiz:not([disabled]) .quiz-lock { display: none; }
.quiz { padding-left: 1.4rem; margin: 1rem 0 0; }
.quiz > li { margin: 0 0 1.25rem; padding-left: .3rem; }
.quiz fieldset { border: 0; padding: 0; margin: 0; }
.quiz legend { font-family: var(--text); font-size: 1rem; line-height: 1.45; font-weight: 700; margin-bottom: .3rem; text-transform: none; letter-spacing: 0; padding: 0; }
.quiz .tick { padding: .55rem 0; }
.quiz > li.is-wrong legend { color: var(--bg-magenta); }
.quiz > li.is-right legend::after { content: " ✓"; color: var(--bg-teal); }
.quiz-why { margin: .4rem 0 0; padding: .6rem .8rem; background: #FFF1C2; font-weight: 600; font-size: .92rem; }
#after-quiz.locked .team-block { opacity: .5; }
.ta-detail-grid { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-start; }
.ta-photo img { display: block; width: 160px; height: 160px; object-fit: cover; border: 3px solid var(--black); }
.ta-photo .btn-row { margin-top: .75rem; }
.ta-details .facts { margin: 0; border-top: 0; padding-top: 0; }
#ta-kit { margin: -.5rem 0 1rem; }
.coc li { margin: 0 0 .7rem; }
@media (max-width: 600px) { .ind-body { padding-left: 0; } }

.doc-body ol.coc { list-style: none; counter-reset: coc; padding: 0; margin: 0 0 1.1em; }
.doc-body ol.coc li { counter-increment: coc; padding-left: 2.6rem; }
.doc-body ol.coc li::before { content: counter(coc); width: 1.8rem; height: 1.8rem; top: .2rem; background: var(--black); color: var(--white); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }

/* On white backgrounds the default white hover made buttons vanish, and phones keep hover after a tap. */
.on-light .btn:not(.btn--ghost-dark):not(.btn--danger):hover, .ta-dialog .btn:hover, .team-block .btn:not(.btn--ghost-dark):hover { background: var(--black); border-color: var(--black); color: var(--white); }

/* ---------- Onboarding: before you start, progress, induction infographics ---------- */

.team-progress { position: sticky; top: calc(var(--header-h) + 1px); z-index: 20; background: var(--white); margin: 0 0 1.75rem; padding: .85rem clamp(.85rem, 3vw, 1.25rem) .9rem; box-shadow: 0 2px 0 var(--line), 0 6px 18px rgba(0,0,0,.06); }
.tp-label { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .55rem; font-weight: 700; font-size: .92rem; }
#tp-pct { color: var(--bg-purple); white-space: nowrap; }
.tp-bar { height: 10px; background: #ECEAF7; overflow: hidden; }
#tp-fill { display: block; height: 100%; width: 0; background: #1B7F3B; transition: width .4s ease; }
.tp-steps { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem; padding: 0; margin: .65rem 0 0; }
.tp-steps li { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; font-size: .72rem; font-weight: 600; color: var(--muted); }
.tp-dot { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 2px solid #C9C9C9; font-size: .78rem; background: var(--white); }
.tp-steps li { cursor: pointer; }
.tp-dot { font-weight: 700; }
.tp-steps li[data-state="done"] .tp-dot, .tp-key .k-done::before { background: #1B7F3B; border-color: #1B7F3B; color: var(--white); }
.tp-steps li[data-state="current"] .tp-dot, .tp-key .k-current::before { background: var(--mustard); border-color: var(--black); color: var(--black); }
.tp-steps li[data-state="current"] { color: var(--black); }
.tp-steps li[data-state="todo"] .tp-dot, .tp-key .k-todo::before { background: var(--white); border-color: #8A8A8A; color: var(--black); }
.tp-steps li[data-state="locked"] .tp-dot, .tp-key .k-locked::before { background: #C62828; border-color: #C62828; color: var(--white); }
.tp-steps li[data-state="done"] .tp-dot { font-size: 0; }
.tp-steps li[data-state="done"] .tp-dot::after { content: "✓"; font-size: .85rem; }
.tp-key { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .55rem 0 0; font-size: .72rem; color: var(--muted); }
.tp-key span { display: inline-flex; align-items: center; gap: .3rem; }
.tp-key span::before { content: ""; width: .7rem; height: .7rem; border: 2px solid; display: inline-block; }
.is-missing { outline: 3px solid #C62828; outline-offset: 2px; }
#team-start [data-step], #team-start details.ind, #team-start .quiz > li, #team-start .ta-field { scroll-margin-top: calc(var(--header-h) + 11rem); }
@media (max-width: 520px) { .tp-name { display: none; } .tp-steps { margin-top: .5rem; } }
@media (prefers-reduced-motion: reduce) { #tp-fill { transition: none; } }

.team-sub { font-family: var(--text); font-size: 1.02rem; font-weight: 700; margin: 1.5rem 0 .3rem; padding-top: 1rem; border-top: 1px solid var(--line); text-transform: none; letter-spacing: 0; }
.team-sub .opt { font-weight: 600; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-left: .35rem; }
.photo-pick { margin-top: 0; }
.photo-btn span { pointer-events: none; }

.ind summary { align-items: center; padding: .25rem 0; scroll-margin-top: 9rem; }
.ind-t { display: flex; flex-direction: column; line-height: 1.25; }
.ind-t small { font-weight: 600; font-size: .78rem; color: var(--bg-purple); text-transform: uppercase; letter-spacing: .06em; }
.ind.is-done .ind-n { background: var(--bg-teal); border-color: var(--bg-teal); color: var(--white); }
.ind[open] { background: #FAF9F6; margin: 0 calc(-1 * clamp(1.1rem, 3vw, 2rem)); padding-left: clamp(1.1rem, 3vw, 2rem); padding-right: clamp(1.1rem, 3vw, 2rem); }
.ind-body { padding-left: 0; }
.ind-body .btn-row { margin-top: 1.5rem; }
#quiz, #after-quiz, .team-block { scroll-margin-top: 9rem; }

.ig { margin: 1.25rem 0; padding: 0; }
.ig figcaption { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--bg-purple); margin-bottom: .6rem; }
.ig-i { width: 1.9rem; height: 1.9rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ig-grid { display: grid; gap: .6rem; }
.ig-2 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.ig-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ig-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .ig-3, .ig-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ig-tile { display: flex; flex-direction: column; gap: .35rem; padding: .9rem; background: var(--white); border: 2px solid var(--black); }
.ig-tile strong { line-height: 1.25; }
.ig-tile span { font-size: .85rem; color: var(--muted); line-height: 1.35; }
.ig-tile.t-purple { background: var(--bg-purple); border-color: var(--bg-purple); color: var(--white); }
.ig-tile.t-teal { background: var(--bg-teal); border-color: var(--bg-teal); color: var(--white); }
.ig-tile.t-purple span, .ig-tile.t-teal span { color: #F0F0F0; }
.ig-tile.t-warn { border-color: var(--mustard); border-width: 0 0 0 6px; background: #FFF8DF; }
.ig-foot { display: flex; align-items: center; gap: .5rem; margin: .7rem 0 0; font-weight: 600; }
.ig-foot span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ig-foot .ig-i { width: 1.4rem; height: 1.4rem; }
.ig-rank { list-style: none; counter-reset: r; padding: 0; margin: 0; display: grid; gap: .35rem; }
.ig-rank li { counter-increment: r; display: flex; align-items: center; gap: .75rem; padding: .55rem .8rem; background: var(--white); border: 1px solid var(--line); font-weight: 600; }
.ig-rank li::before { content: counter(r); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: none; background: #E9E9E9; font-size: .85rem; }
.ig-rank li:first-child { background: var(--bg-teal); border-color: var(--bg-teal); color: var(--white); font-size: 1.05rem; }
.ig-rank li:first-child::before { background: var(--white); color: var(--bg-teal); }
.ig-rank li:nth-child(2) { margin-left: .75rem; } .ig-rank li:nth-child(3) { margin-left: 1.5rem; } .ig-rank li:nth-child(4) { margin-left: 2.25rem; color: var(--muted); }
.ig-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.ig-chips li { padding: .45rem .75rem; background: var(--bg-magenta); color: var(--white); font-weight: 600; font-size: .88rem; }
.ig-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; }
.ig-steps li { counter-increment: s; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: start; padding: .9rem .9rem .9rem 2.9rem; background: var(--white); border: 2px solid var(--black); }
.ig-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; bottom: 0; width: 2.1rem; display: grid; place-items: center; background: var(--black); color: var(--white); font-weight: 700; }
.ig-steps li:last-child { border-color: var(--bg-magenta); }
.ig-steps li:last-child::before { background: var(--bg-magenta); }
.ig-steps .ig-i { grid-row: span 2; }
.ig-steps strong { line-height: 1.25; }
.ig-steps span { font-size: .87rem; color: var(--muted); line-height: 1.35; }
.ig-flow { display: grid; gap: .5rem; }
.ig-q { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; background: var(--black); color: var(--white); }
.ig-branch { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .6rem; align-items: stretch; margin-left: 1rem; position: relative; }
.ig-branch::before { content: ""; position: absolute; left: -1rem; top: -.5rem; bottom: 50%; width: .75rem; border-left: 3px solid var(--black); border-bottom: 3px solid var(--black); }
.ig-yes, .ig-no { display: grid; place-items: center; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; background: #EDEDED; text-align: center; padding: .3rem; }
.ig-a { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; padding: .8rem .9rem; color: var(--white); }
.ig-a .ig-i { grid-row: span 2; }
.ig-a span { font-size: .87rem; color: #F2F2F2; line-height: 1.35; }
.ig-a.t-magenta { background: var(--bg-magenta); } .ig-a.t-purple { background: var(--bg-purple); } .ig-a.t-teal { background: var(--bg-teal); }
@media (max-width: 520px) { .ig-branch { grid-template-columns: 1fr; gap: 0; } .ig-yes, .ig-no { justify-self: start; padding: .25rem .6rem; } }
.ig-dd { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; }
.ig-do, .ig-dont { list-style: none; margin: 0; padding: .9rem; background: var(--white); border-top: 8px solid var(--bg-teal); }
.ig-dont { border-top-color: var(--bg-magenta); }
.ig-do::before, .ig-dont::before { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin-bottom: .4rem; }
.ig-do::before { content: "Always"; color: var(--bg-teal); } .ig-dont::before { content: "Never"; color: var(--bg-magenta); }
.ig-do li, .ig-dont li { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; border-top: 1px solid var(--line); line-height: 1.4; }
.ig-do .ig-i, .ig-dont .ig-i { width: 1.5rem; height: 1.5rem; }
@media print { .team-progress, .tp-saved { display: none; } }

/* Contact details, right to work, monitoring */
.ta-field textarea { font: inherit; font-weight: 500; padding: .75rem .85rem; border: 2px solid #BDBDBD; background: var(--white); color: var(--black); width: 100%; resize: vertical; }
.ta-field textarea:focus { border-color: var(--black); outline: 3px solid var(--mustard); outline-offset: 1px; }
.ta-field input[readonly] { background: #F1F1F1; color: var(--muted); }
.ta-short input { max-width: 11rem; text-transform: uppercase; }
.ta-radios { border: 0; padding: 0; margin: .5rem 0 0; }
.ta-radios legend { font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.eo-box { margin-top: .5rem; }
.st-u18 { background: var(--bg-magenta); color: var(--white); }
.linklike { font: inherit; font-weight: 700; font-size: .9rem; background: none; border: 0; padding: 0 .2rem; color: var(--bg-purple); text-decoration: underline; cursor: pointer; }
.linklike[aria-pressed="true"] { color: var(--black); text-decoration: none; background: var(--mustard); padding: .1rem .4rem; }
.ta-view { margin-top: .4rem; }
.ta-card h4 { margin: 1.25rem 0 .5rem; font-family: var(--text); font-size: .95rem; text-transform: none; letter-spacing: 0; }
.ta-card fieldset[disabled] { opacity: .6; }
.ta-files { list-style: none; padding: 0; margin: 0 0 1rem; }
.ta-files li { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--line); }
.ta-files a { font-weight: 700; overflow-wrap: anywhere; }
.ta-eo { margin: 0 0 1.25rem; background: var(--white); padding: .8rem 1rem; border-left: 6px solid var(--bg-purple); }
.ta-eo summary { cursor: pointer; font-weight: 700; }
.ta-eo h4 { margin: 1rem 0 .4rem; font-size: .92rem; }
.ta-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.ta-bars li { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr 3rem; gap: .6rem; align-items: center; font-size: .85rem; }
.eo-meter { height: .8rem; background: #EEE; }
.eo-meter > span { display: block; height: 100%; background: var(--bg-purple); }
@media (max-width: 600px) { .ta-bars li { grid-template-columns: 1fr 3rem; } .ta-bars li .eo-meter { grid-column: 1 / -1; grid-row: 2; } }
.eo-meter > .w0 { width: 0%; }
.eo-meter > .w5 { width: 5%; }
.eo-meter > .w10 { width: 10%; }
.eo-meter > .w15 { width: 15%; }
.eo-meter > .w20 { width: 20%; }
.eo-meter > .w25 { width: 25%; }
.eo-meter > .w30 { width: 30%; }
.eo-meter > .w35 { width: 35%; }
.eo-meter > .w40 { width: 40%; }
.eo-meter > .w45 { width: 45%; }
.eo-meter > .w50 { width: 50%; }
.eo-meter > .w55 { width: 55%; }
.eo-meter > .w60 { width: 60%; }
.eo-meter > .w65 { width: 65%; }
.eo-meter > .w70 { width: 70%; }
.eo-meter > .w75 { width: 75%; }
.eo-meter > .w80 { width: 80%; }
.eo-meter > .w85 { width: 85%; }
.eo-meter > .w90 { width: 90%; }
.eo-meter > .w95 { width: 95%; }
.eo-meter > .w100 { width: 100%; }

/* Dashboard toolbar filters (own styles, not shared with the gallery) */
.ta-bar .g-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.ta-filter { font: inherit; font-weight: 700; font-size: .9rem; padding: .6rem .9rem; border: 2px solid var(--black); background: var(--white); color: var(--black); cursor: pointer; }
.ta-filter[aria-pressed="true"] { background: var(--black); color: var(--white); }
#ta-kit { margin: 0 0 1rem; }
.ta-missing { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; width: 100%; font-size: .8rem; font-weight: 700; color: var(--muted); }
.ta-missing .st { background: var(--white); border: 2px solid var(--bg-magenta); color: var(--bg-magenta); padding: .15rem .45rem; }
@media (max-width: 600px) { .ta-bar { flex-direction: column; align-items: stretch; } .ta-bar #ta-add { justify-content: center; } }

.tp-saved { margin: -.5rem 0 1.25rem; }
.ta-send { border: 0; padding: 0; margin: 1rem 0 0; }
.ta-send legend { font-weight: 700; margin-bottom: .4rem; padding: 0; }
.ta-msg-preview { white-space: pre-wrap; font-size: .85rem; background: #f4f1ea; border: 1px solid #ddd6c8; padding: .75rem; max-height: 14rem; overflow: auto; margin: .75rem 0; }
.ta-send-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.ta-send-row .btn { flex: 1 1 10rem; }
.ta-field[hidden], .ta-dialog [hidden] { display: none !important; }

.st-started { background: #E3F1FF; color: #0B4A8B; }
.ta-seen { font-size: .72rem; color: var(--muted); align-self: center; }
.inv-detail { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: .5rem 0 1rem; }
.inv-steps { display: inline-flex; gap: 3px; }
.inv-steps i { width: 1.1rem; height: .7rem; background: #E2E2E2; border: 1px solid #C9C9C9; }
.inv-steps i.on { background: #1B7F3B; border-color: #1B7F3B; }

/* Dashboard switch: Team | Young people */
.ta-switch { background: var(--black); border-bottom: 4px solid var(--mustard); }
.ta-switch .wrap { display: flex; gap: .25rem; }
.ta-switch a { color: var(--white); text-decoration: none; font-weight: 700; padding: .8rem 1.1rem; }
.ta-switch a[aria-current="page"] { background: var(--mustard); color: var(--black); }
.ta-switch a:hover:not([aria-current]) { background: #222; }

/* Young people: sign up, parent consent, dashboard */
.yn { border: 0; padding: .8rem 0; margin: 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; }
.yn legend { float: left; width: 100%; font-weight: 700; padding: 0 0 .4rem; }
.yn legend small { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); }
.yj-age { margin-top: .5rem; font-weight: 600; }
.yr-photo { list-style: none; padding: 0; margin: .5rem 0 0; }
.yr-photo li { border-top: 1px solid var(--line); padding: .5rem 0; }
.yr-no { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.ya-progs { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .75rem; }
.ya-prog { display: grid; gap: .5rem; padding: 1rem 1.1rem; border: 2px solid var(--black); color: inherit; text-decoration: none; background: var(--white); }
.ya-prog:hover { background: #FFF8DF; }
.ya-pname { font-family: var(--display); font-size: 1.8rem; line-height: 1; }
.ya-pname small { font-family: var(--text); font-size: .85rem; color: var(--muted); margin-left: .5rem; }
.ya-ph { display: flex; flex-wrap: wrap; gap: .3rem; }
.ya-ph span { font-size: .75rem; font-weight: 700; padding: .2rem .5rem; border: 1.5px solid; }
.ya-ph .on { color: #1B7F3B; border-color: #1B7F3B; }
.ya-ph .off { color: #8A8A8A; border-color: #C9C9C9; text-decoration: line-through; }
.ya-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ya-qr-wrap { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.ya-qr-wrap > div { flex: 1 1 16rem; min-width: 0; }
#ya-qr { width: 220px; height: 220px; border: 2px solid var(--black); image-rendering: pixelated; }
.ya-big { position: fixed; inset: 0; z-index: 200; background: var(--white); display: grid; place-items: center; align-content: center; gap: 1rem; padding: 1rem; text-align: center; }
.ya-big canvas { width: min(80vw, 70vh); height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.ya-big p { font-family: var(--display); font-size: 2rem; margin: 0; }
.ya-form { display: grid; gap: .5rem; margin-top: .75rem; }
.ya-sheet { display: none; }
.ya-sheet table { width: 100%; border-collapse: collapse; margin-top: 10pt; }
.ya-sheet th, .ya-sheet td { border: 1pt solid #000; padding: 5pt 7pt; text-align: left; font-size: 11pt; }
@media print {
  body.printing-sheet .page-head, body.printing-sheet .ta-switch { display: none !important; }
  body.printing-sheet #ya-prog > *:not(#ya-sheet) { display: none !important; }
  body.printing-sheet #ya-sheet { display: block; }
}
@media (max-width: 520px) { .ya-row { grid-template-columns: 1fr; } }

/* Anything marked hidden stays hidden, whatever display a class gives it. */
[hidden] { display: none !important; }
.ya-h { margin-top: 2rem; }
.ya-signup { margin-bottom: 1rem; }
.ya-note { margin: .75rem 0 0; padding: .75rem 1rem; border-left: 6px solid var(--bg-purple); background: #F4F1FF; white-space: normal; }
.yj-warn { border-left: 4px solid var(--mustard); padding-left: .75rem; }

/* Schedule, sessions, registers, calendar */
.ya-days { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .75rem; }
.ya-day { position: relative; }
.ya-day input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ya-day span { display: inline-block; min-width: 3.1rem; text-align: center; padding: .55rem .5rem; border: 2px solid var(--black); font-weight: 700; }
.ya-day input:checked + span { background: var(--mustard); }
.ya-day input:focus-visible + span { outline: 3px solid var(--bg-purple); outline-offset: 2px; }
.ya-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; margin: 1rem 0; }
.ya-stats div { border: 2px solid var(--black); padding: .6rem .75rem; display: grid; }
.ya-stats strong { font-family: var(--display); font-size: 2rem; line-height: 1; }
.ya-stats span { font-size: .78rem; color: var(--muted); }
.ya-sv h4 { margin: 1.25rem 0 .25rem; }
.ya-extra { margin-top: 1rem; }
.ya-staff { list-style: none; padding: 0; margin: .5rem 0 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 .5rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-d { font-size: .72rem; font-weight: 700; text-align: center; color: var(--muted); padding: .2rem 0; }
.cal-c { min-height: 4.2rem; border: 1px solid var(--line); padding: .2rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-x { border: 0; }
.cal-today { border: 2px solid var(--black); }
.cal-n { font-size: .75rem; font-weight: 700; }
.cal-s { display: block; font-size: .68rem; font-weight: 700; padding: .1rem .25rem; text-decoration: none; color: var(--black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-done { background: #DDF1E3; color: #145C2B; }
.cal-plan { background: #E3F1FF; color: #0B4A8B; }
.cal-miss { background: #FBE0EA; color: #8A0F3D; }
.cal-cancel { background: #EAEAEA; color: #666; text-decoration: line-through; }
.cal-extra { box-shadow: inset 0 0 0 2px var(--bg-purple); }
.cal-key { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.cal-key .cal-s { display: inline-block; }
.rg-count { font-weight: 700; margin: .5rem 0; }
.rg-list { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.rg-row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: .75rem 0; }
.rg-who { flex: 1 1 14rem; min-width: 0; display: grid; gap: .3rem; }
.rg-em { font-size: .9rem; }
.rg-marks { display: flex; gap: .3rem; }
.rg-m { font: inherit; font-weight: 700; font-size: .9rem; padding: .6rem .8rem; min-width: 4.2rem; border: 2px solid var(--black); background: var(--white); color: var(--black); cursor: pointer; }
.rg-m:focus-visible { outline: 3px solid var(--bg-purple); outline-offset: 2px; }
.rg-present[aria-pressed="true"] { background: #1B7F3B; border-color: #1B7F3B; color: #fff; }
.rg-late[aria-pressed="true"] { background: var(--mustard); }
.rg-drop { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: .75rem 0; }
.rg-step { display: flex; gap: .3rem; align-items: center; }
.rg-step input { width: 4.5rem; font: inherit; font-weight: 700; text-align: center; padding: .5rem; border: 2px solid var(--black); }
.rg-sheet { margin: 1rem 0; }
.rg-sheet summary { cursor: pointer; }
.fac-who { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
.ts-box { margin: 1rem 0 .25rem; min-height: 65px; }
@media (max-width: 520px) { .cal-c { min-height: 3.2rem; } .cal-s { font-size: .6rem; padding: 0 .15rem; } .rg-m { min-width: 0; flex: 1; } .rg-marks { width: 100%; } }
.ya-viewtog { display: flex; gap: .4rem; }
.rg-abs { font: inherit; font-weight: 700; font-size: .9rem; padding: .55rem .4rem; border: 2px solid var(--black); background: var(--white); color: var(--black); min-width: 6.5rem; }
.rg-abs.is-on { background: #6B6B6B; border-color: #6B6B6B; color: #fff; }
.rg-m:disabled, .rg-abs:disabled { opacity: .75; cursor: default; }
.rg-prev { border-left: 6px solid var(--bg-teal); }
.rg-debrief { margin-top: 1.5rem; border-top: 6px solid var(--bg-teal); }
.rg-sg textarea { border-color: #C62828; }
@media (max-width: 520px) { .rg-abs { flex: 1.3; min-width: 0; } }

/* ---- Safeguarding concerns ---- */
.btn--alert { background: var(--bg-magenta); border-color: var(--bg-magenta); color: var(--white); }
.on-light .btn.btn--alert:hover, .btn--alert:hover { background: var(--black); border-color: var(--black); color: var(--white); }
.ta-banner.is-danger { border-left-color: var(--bg-magenta); }
.ta-banner.is-danger ul { margin: .5rem 0; padding-left: 1.2rem; font-weight: 500; }
.ta-banner a { font-weight: 700; }
.cn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1.25rem; }
.cn-bar p, .cn-count { margin: 0; }
.cn-count { color: var(--bg-magenta); }
.rg-debrief .cn-count { margin-bottom: .5rem; }
.cn-form fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.cn-form legend { font-weight: 700; margin-bottom: .4rem; }
.cn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 1.25rem; }
.cn-list .tick { padding: .6rem 0; }
.cn-intro { border-left-color: var(--bg-magenta); font-weight: 500; }
.cn-quote { white-space: normal; overflow-wrap: anywhere; }
.cn-who { list-style: none; margin: 0; padding: 0; }
.cn-who li { margin: 0 0 .3rem; }
.cn-kind { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .4rem; background: var(--line); margin-left: .25rem; }
.cn-status, .cn-kind.cn-status { background: #FFF1C2; }
.cn-kind.cn-followup { background: #E8E8E8; }
.cn-kind.cn-action { background: var(--bg-teal); color: var(--white); }
.cn-text { margin: .35rem 0 0; }
.cn-chron { list-style: none; margin: 0; padding: 0; }
.cn-chron h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.cn-home { border-top-color: var(--bg-magenta); }
@media print {
  #ya-cn .ta-card { border-top-width: 2pt; padding: 8pt 0; }
  #ya-cn a { color: inherit; text-decoration: none; }
}
#ya-cn .cn-quote { margin: .5rem 0 1.5rem; }
#ya-cn h3 { margin-top: 1.25rem; }

.ta-switch .wrap { flex-wrap: wrap; align-items: center; }
.ta-me { margin: 0 0 0 auto; padding: .5rem 0; color: var(--white); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.ta-me strong { color: var(--mustard); }
.ta-switch a.ta-out { padding: .3rem .7rem; border: 2px solid var(--white); font-size: .85rem; }
.ta-switch a.ta-out:hover { background: var(--white); color: var(--black); }
@media (max-width: 40rem) { .ta-me { margin: 0; width: 100%; border-top: 1px solid #333; } }
.cn-me { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; background: var(--black); color: var(--white); padding: .75rem 1rem; margin: 0 0 1rem; font-weight: 600; }
.cn-me strong { color: var(--mustard); }
.cn-me .linklike, .cn-me a { color: var(--white); }
.cn-adult-box { margin: 0 0 0 2.35rem; }
.cn-fix .ta-field { margin-bottom: .75rem; }
.cn-kind.cn-correction { background: var(--bg-purple); color: var(--white); }
.ta-switch button.ta-out { background: transparent; color: var(--white); border: 2px solid var(--white); padding: .3rem .7rem; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.ta-switch button.ta-out:hover { background: var(--white); color: var(--black); }
.ya-acc { padding-top: 0; padding-bottom: 0; }
.ya-acc > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 1.1rem 0; cursor: pointer; list-style: none; }
.ya-acc > summary::-webkit-details-marker { display: none; }
.ya-acc > summary::before { content: "+"; font-weight: 700; font-size: 1.4rem; width: 1rem; }
.ya-acc[open] > summary::before { content: "−"; }
.ya-acc-h { font-family: var(--display); font-size: clamp(1.7rem, 2.8vw, 2.35rem); line-height: 1; }
.ya-acc[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.ya-acc > div { padding-bottom: 1.5rem; }
.ya-todo ul { margin: .5rem 0 0; padding-left: 1.2rem; font-weight: 500; }
.ya-todo li { margin: .25rem 0; }
.rg-duty { border: 0; padding: 0; margin: 0 0 1rem; }
.rg-duty legend { font-weight: 700; margin-bottom: .25rem; }
.rg-duty-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 1.25rem; }
.rg-duty-list .tick { padding: .55rem 0; }
.rg-dropins { border-top: 2px solid var(--black); margin-top: 1.25rem; padding-top: 1rem; }
.rg-dropins h4 { margin: 0 0 .25rem; }
.rg-dlist { list-style: none; margin: .5rem 0; padding: 0; }
.rg-dlist li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.rg-dact { display: flex; gap: .75rem; align-items: center; }
.rg-dadd { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; margin: .5rem 0 1rem; }
.rg-dadd input { min-width: 0; padding: .6rem .7rem; border: 2px solid var(--line); font: inherit; }
@media (max-width: 30rem) { .rg-dadd { grid-template-columns: 1fr 1fr; } .rg-dadd button { grid-column: 1 / -1; } }
.rg-auto { margin: 0 0 1rem; }
.rg-status { min-height: 1.5em; }
.rg-db { margin-bottom: 1rem; }
.rg-db label span { display: block; font-weight: 700; }
.rg-db label small { display: block; font-weight: 400; color: var(--muted); }
.rg-db textarea { width: 100%; }
.rg-dbst { margin: .25rem 0 0; min-height: 1.2em; }
.rg-nlist { list-style: none; margin: 0 0 1rem; padding: 0; }
.rg-nlist li { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.rg-nby { margin: 0 0 .25rem; }
.rg-nby time { color: var(--muted); font-size: .85rem; margin-left: .35rem; }
.rg-ntext { overflow-wrap: anywhere; }
.rg-ntext textarea, .rg-nadd textarea { width: 100%; font: inherit; padding: .6rem .7rem; border: 2px solid var(--line); }
.rg-nact { margin: .35rem 0 0; font-size: .9rem; }
.rg-nadd { display: grid; gap: .5rem; }
.rg-nadd .btn { justify-self: start; }

.rg-snote { margin: .4rem 0 0; padding: .45rem .7rem; background: #FFF1C2; border-left: 4px solid var(--mustard); font-size: .92rem; }
.cl-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.cl-form legend { font-weight: 700; margin-bottom: .4rem; }
.cl-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.cl-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cl-pill span { display: inline-block; padding: .6rem .9rem; border: 2px solid var(--black); font-weight: 700; cursor: pointer; background: var(--white); }
.cl-pill input:checked + span { background: var(--black); color: var(--white); }
.cl-pill input:focus-visible + span { outline: 3px solid var(--mustard); outline-offset: 2px; }
.cl-when { display: flex; gap: .75rem; align-items: center; }
.cl-recent { margin: 0 0 1rem; }
/* ---- Staff guide ---- */
.sg-quick { border-top-color: var(--mustard); }
.sg-links { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .6rem; }
.sg-links li { display: grid; gap: .1rem; padding: .7rem .9rem; background: #F4F1FF; border-left: 6px solid var(--bg-purple); }
.sg-links strong { font-size: 1.15rem; }
.sg-links span { color: var(--muted); font-size: .92rem; }
.sg-toc ol { columns: 2 14rem; margin: 0 0 1.5rem; padding-left: 1.2rem; }
.sg-toc li { margin: .2rem 0; }
.sg-sec h2 { display: flex; gap: .6rem; align-items: center; }
.sg-sec h2 .num { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; background: var(--bg-purple); color: var(--white); font-size: 1.3rem; flex: none; }
.sg-steps, .sg-list { padding-left: 1.3rem; }
.sg-steps li, .sg-list li { margin: .45rem 0; }
.sg-tip { background: #FFF1C2; padding: .7rem .9rem; font-size: .95rem; }
.sg-warn { background: var(--bg-magenta); color: var(--white); padding: .8rem 1rem; }
.sg-phone { max-width: 22rem; margin: 0 0 1rem; padding: 1rem; border: 3px solid var(--black); border-radius: 18px; background: var(--white); display: grid; gap: .6rem; }
.sg-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.sg-btns { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.sg-btns span { border: 2px solid var(--black); padding: .35rem .7rem; font-weight: 700; font-size: .9rem; }
.sg-btns span.on { background: var(--black); color: var(--white); }
.sg-btns em { font-size: .85rem; color: var(--muted); }
.sg-chip { display: inline-block; padding: .15rem .45rem; font-size: .8rem; font-weight: 700; background: var(--line); }
.sg-chip.red { background: var(--bg-magenta); color: var(--white); }
.sg-chip.amber { background: #FFF1C2; }
.sg-done { border-top-color: var(--bg-teal); }
.ts-login { background: #F4F1FF; border-left: 6px solid var(--bg-purple); padding: .9rem 1rem; margin: 0 0 1.25rem; }
.ts-login p { margin: 0 0 .5rem; }
.ts-part2 { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px solid var(--line); }

/* ---- Staff pages: slim frame (no public menu, short headers, one line footer) ---- */
.staff-page .site-header .wrap { min-height: 3.5rem; }
.staff-page .site-header .brand img { height: 1.9rem; width: auto; }
.page-head--slim { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem); }
.page-head--slim h1 { font-size: clamp(2rem, 6vw, 3.25rem); margin-bottom: .2em; }
.page-head--slim .lead { font-size: 1rem; margin: 0; max-width: 46rem; }
.page-head--slim .eyebrow { margin-bottom: .35rem; }
.page-head--bar { padding-block: .9rem; }
.page-head--bar h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin: 0; }
.site-footer--slim { padding: 1.5rem 0; font-size: .85rem; }
.site-footer--slim p { margin: 0 0 .25rem; }
.site-footer--slim .build { color: #9a9a9a; font-size: .75rem; }
.staff-page .section { padding-block: clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 40rem) {
  .ta-switch a { padding: .7rem .75rem; }
  .ta-me { font-size: .85rem; padding: .35rem 0; }
}

/* ---- Programme page tabs ---- */
.ya-tabs { display: flex; gap: .25rem; border-bottom: 3px solid var(--black); margin: 1rem 0 1.25rem; overflow-x: auto; }
.ya-tabs button { font: inherit; font-weight: 700; background: none; border: 0; padding: .75rem 1rem; cursor: pointer; color: var(--black); white-space: nowrap; }
.ya-tabs button[aria-selected="true"] { background: var(--black); color: var(--white); }
.ya-tabs button span { font-weight: 600; font-size: .85em; opacity: .75; }
.ya-tabs .ya-tab-flag { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--bg-magenta); color: #fff; opacity: 1; margin-left: .25rem; }
.ya-tabs .ya-tab-flag[hidden] { display: none; }
.ya-find { margin-bottom: 1rem; }
.ya-find input[type="search"] { width: 100%; max-width: 28rem; padding: .7rem .9rem; border: 2px solid var(--line); font: inherit; margin-bottom: .75rem; }
.ya-phl { color: #8a5a00; font-weight: 600; }
#ya-plist > li[hidden] { display: none; }
@media (max-width: 40rem) {
  .ya-tabs button { padding: .65rem .6rem; font-size: .95rem; }
  .ya-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
  .ya-stats div { padding: .4rem .5rem; }
  .ya-stats strong { font-size: 1.45rem; }
  .ya-stats span { font-size: .7rem; line-height: 1.2; }
  .ya-find .g-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .35rem; }
  .ya-find .ta-filter { white-space: nowrap; font-size: .85rem; padding: .5rem .7rem; }
}
.ya-find .g-filters { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---- Register: count, save status and Report a concern stay in view at the bottom ---- */
.rg-bar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; background: var(--black); color: var(--white); padding: .6rem .85rem; margin: 1rem calc(-1 * clamp(0rem, 1vw, .5rem)) 0; box-shadow: 0 -4px 14px rgba(0,0,0,.18); }
.rg-bar .rg-count { margin: 0; font-weight: 700; font-size: .9rem; flex: 1 1 14rem; }
.rg-bar .rg-status { margin: 0; color: var(--mustard); font-size: .85rem; min-height: 0; }
.rg-bar .rg-status.is-ok { color: #8fe3c9; }
.rg-bar .btn { margin-left: auto; }
.rg-started { margin-top: .5rem; }
.rg-bar .btn { padding: .45rem .7rem; font-size: .8rem; }
@media (max-width: 40rem) { .rg-bar { padding: .45rem .7rem; } .rg-bar .rg-count { font-size: .82rem; flex-basis: 100%; } }

/* ---- Records: attendance squares, two columns on wide screens, delete kept apart ---- */
.att-row { display: flex; flex-wrap: wrap; gap: 4px; margin: .5rem 0; }
.att { display: inline-block; width: 22px; height: 22px; border: 2px solid var(--black); vertical-align: middle; }
.att-key .att { width: 14px; height: 14px; border-width: 1px; margin: 0 .2rem 0 .6rem; }
.att-key .att:first-child { margin-left: 0; }
.att-here { background: #1f7a4a; border-color: #1f7a4a; }
.att-late { background: var(--mustard); border-color: #b88a00; }
.att-reason { background: #9a9a9a; border-color: #9a9a9a; }
.att-miss { background: #fff; border-color: var(--bg-magenta); }
.att-none { background: repeating-linear-gradient(45deg, #fff 0 3px, #ddd 3px 6px); border-color: #bbb; }
.att-cancel { background: #fff; border-color: #ddd; border-style: dashed; }
.rec-danger { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.rec-danger summary { cursor: pointer; color: var(--bg-magenta); font-weight: 700; }
@media (min-width: 64rem) {
  .rec-cols { columns: 2; column-gap: 1.5rem; }
  .rec-cols > * { break-inside: avoid; display: inline-block; width: 100%; }
}
.pay-flag { margin-left: .3rem; font-size: 1rem; line-height: 1; cursor: help; }
.dob3 { display: flex; gap: .5rem; }
.dob3 input, .dob3 select { font: inherit; padding: .7rem .6rem; border: 2px solid var(--line); background: var(--white); min-width: 0; }
.dob3 input:first-child { width: 4.5rem; }
.dob3 select { flex: 1 1 8rem; }
.dob3 input:last-child { width: 5.5rem; }
.cn-q { width: 100%; padding: .7rem .9rem; border: 2px solid var(--line); font: inherit; margin: .25rem 0 .5rem; }
.cn-list label[hidden] { display: none; }
.tp-nav { justify-content: space-between; margin: 1rem 0 2rem; }
.tp-nav[hidden] { display: none; }
.tp-steps li.is-shown .tp-dot { outline: 3px solid var(--black); outline-offset: 2px; }
fieldset.team-block[hidden] { display: none; }

/* Long labels wrap instead of pushing the page wider than the phone */

.rg-who-st, .rg-who-st .st { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.rg-bar .rg-count { overflow-wrap: anywhere; }
form.rg { min-width: 0; }

/* Onboarding progress box on a staff record */
.ob-box { border-top-color: var(--mustard); }
.ob-head { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin: 0 0 .25rem; }
/* "Staff on duty" reads like the other labels in Who is on today */


/* ---- Pay page ---- */
.pay-month { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin: 0 0 1rem; }
.pay-month strong { font-family: var(--display); font-size: 1.6rem; font-weight: 400; min-width: 9rem; text-align: center; }
.pay-month .btn:last-child { margin-left: auto; }
.pay-list > li { padding: 1rem .25rem; border-bottom: 1px solid var(--line); display: grid; gap: .5rem; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto; gap: .5rem 1rem; align-items: center; }
.pay-row .ta-role { display: block; }
.pay-nums { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-variant-numeric: tabular-nums; }
.pay-nums strong { font-size: 1.1rem; }
.pay-needs { color: var(--bg-magenta); margin: 0; }
.pay-acts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pay-acts input { font: inherit; padding: .45rem .6rem; border: 2px solid var(--line); min-width: 0; flex: 1 1 12rem; max-width: 18rem; }
.pay-table { overflow-x: auto; margin-top: .5rem; }
.pay-table table { border-collapse: collapse; width: 100%; font-size: .85rem; min-width: 34rem; }
.pay-table th, .pay-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.pay-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 40rem) { .pay-row { grid-template-columns: minmax(0, 1fr); } .pay-month .btn:last-child { margin-left: 0; } }
/* Hours on the register (leads) and on the facilitator page */
.rg-hours table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.rg-hours td { padding: .4rem .3rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rg-hours input { font: inherit; width: 5.5rem; padding: .35rem .4rem; border: 2px solid var(--line); }
.rg-hours .rsn { width: 100%; min-width: 8rem; }
@media (max-width: 40rem) {
  .rg-hours table, .rg-hours tbody { display: block; }
  .rg-hours tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem .5rem; padding: .6rem 0; border-bottom: 1px solid var(--line); align-items: center; }
  .rg-hours td { border: 0; padding: 0; min-width: 0; }
  .rg-hours td:first-child, .rg-hours td:last-child { grid-column: 1 / -1; }
  .rg-hours .rsn { min-width: 0; }
}

/* ---- Check-ins ---- */
.ci-people { list-style: none; padding: 0; margin: .5rem 0 0; }
.ci-people li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid rgba(0,0,0,.12); }
.ci-people li > span { min-width: 0; }
.rg-ci h4 { margin: 1.25rem 0 .4rem; }
.ci-bigurl { font-size: .9rem; word-break: break-all; }
.oc-o { margin-top: 1rem; }
.oc-o h4 { margin: 0 0 .4rem; }
.oc-st { padding: .5rem 0; border-top: 1px solid rgba(0,0,0,.1); }
.oc-q { margin: 0 0 .2rem; font-weight: 600; }
.oc-list { list-style: none; padding: 0; }
.oc-edit { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .75rem 0; border-bottom: 1px solid rgba(0,0,0,.12); }
.oc-edit ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.oc-follow li, .oc-due li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.rec-ci-one { margin: .5rem 0; }
.rec-ci-t { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.rec-ci-t td { padding: .45rem .3rem; border-top: 1px solid rgba(0,0,0,.1); vertical-align: top; }
.rec-ci-t td:last-child { white-space: nowrap; width: 6.5rem; }
.ya-big .ci-bigurl { font-family: inherit; font-size: .9rem; }
.ci-people .btn { white-space: nowrap; flex: 0 0 auto; }

/* ---- Check-in deck: one statement per screen, answered on a level meter ---- */
body.ci-open { overflow: hidden; }
.ci-deck { --bg: #000; --ink: #fff; --accent: var(--mustard); position: fixed; inset: 0; z-index: 1000; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; transition: background-color .5s ease, color .3s ease; overflow: hidden; font-family: var(--text); }
.ci-deck.is-light { --ink: #000; }
.ci-prog { display: flex; gap: 4px; padding: 10px 16px 0; }
.ci-prog span { flex: 1; height: 5px; background: rgba(255,255,255,.28); border-radius: 3px; transition: background-color .3s; }
.ci-prog span.done { background: var(--accent); }
.ci-prog span.now { background: #fff; }
.ci-deck .ci-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 8px 16px; min-height: 44px; margin: 0; font-weight: 600; font-size: .95rem; }
.ci-count { opacity: .85; }
.ci-link { background: none; border: 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: .5rem .25rem; cursor: pointer; }
.ci-link:hover { text-decoration-thickness: 3px; }
.ci-link:focus-visible, .ci-go:focus-visible, .ci-bar:focus-visible, .ci-deck input:focus-visible, .ci-deck select:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ci-stage { position: relative; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ci-slide { position: absolute; inset: 0; overflow-y: auto; padding: 1rem 16px 2.5rem; display: flex; flex-direction: column; opacity: 0; transform: translateX(48px); transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.2,1); }
.ci-slide.from-left { transform: translateX(-48px); }
.ci-slide.in { opacity: 1; transform: none; }
.ci-slide.out-left { opacity: 0; transform: translateX(-48px); }
.ci-slide.out-right { opacity: 0; transform: translateX(48px); }
.ci-slide > * { width: 100%; max-width: 34rem; margin: auto; }
.ci-slide h2:focus { outline: none; }
.ci-kicker { font-weight: 600; margin: 0 0 .25rem; color: var(--accent); }
.ci-deck.is-light .ci-kicker { color: inherit; }
.ci-big { font-family: var(--display); font-weight: 400; font-size: clamp(3.4rem, 15vw, 6rem); line-height: .9; margin: 0 0 1rem; letter-spacing: .01em; }
.ci-sub { font-size: 1.05rem; line-height: 1.55; margin: 0 0 1.5rem; }
.ci-promises { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .6rem; }
.ci-promises li { padding: .7rem .9rem; border-left: 4px solid var(--accent); background: rgba(255,255,255,.08); line-height: 1.45; }
.ci-go { display: block; width: 100%; max-width: 34rem; margin: 0 auto; padding: 1.1rem 1.5rem; border: 0; background: var(--accent); color: #000; font: 700 1.15rem/1.1 var(--text); cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.35); transition: transform .12s ease, box-shadow .12s ease, background-color .15s; }
.ci-go:hover { background: #FFD23F; transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0,0,0,.35); }
.ci-go:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.ci-go.is-dark { background: #000; color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.ci-go.is-dark:hover { background: #262626; }
.ci-hello .ci-link { display: block; margin: 1rem auto 0; }
/* the demo meter on the hello screen fills up once, to show how answering works */
.ci-demo { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin: 0 0 1.5rem; }
.ci-demo span { width: 18px; height: calc(var(--h) * 11px); background: rgba(255,255,255,.25); animation: ci-demo 2.6s ease-in-out infinite; animation-delay: calc(var(--h) * 120ms); }
@keyframes ci-demo { 0%, 15% { background: rgba(255,255,255,.25); } 35%, 75% { background: var(--mustard); } 100% { background: rgba(255,255,255,.25); } }
/* the question */
.ci-ask { margin: 0 0 .4rem; font-weight: 600; opacity: .9; }
.ci-say { font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 10vw, 3.6rem); line-height: 1; margin: 0 0 1.75rem; letter-spacing: .01em; }
.ci-w { display: inline-block; opacity: 0; animation: ci-rise .5s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(120ms + var(--i) * 45ms); color: rgba(255,255,255,.4); transition: color .3s ease; }
.ci-say.is-sung .ci-w, .ci-w.sung { color: #fff; }
.ci-w.now { color: var(--mustard); }
.fx-flip { perspective: 600px; }
.fx-flip .ci-w { animation-name: ci-flip; transform-origin: 50% 100%; }
.fx-blur .ci-w { animation-name: ci-blur; animation-duration: .6s; }
.fx-drop .ci-w { animation-name: ci-drop; animation-timing-function: cubic-bezier(.3,1.5,.5,1); }
.fx-zoom .ci-w { animation-name: ci-zoom; transform-origin: 50% 80%; }
@keyframes ci-rise { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
@keyframes ci-flip { from { opacity: 0; transform: rotateX(-90deg); } to { opacity: 1; transform: none; } }
@keyframes ci-blur { from { opacity: 0; filter: blur(10px); letter-spacing: .12em; } to { opacity: 1; filter: none; } }
@keyframes ci-drop { from { opacity: 0; transform: translateY(-.7em) rotate(-5deg); } to { opacity: 1; transform: none; } }
@keyframes ci-zoom { from { opacity: 0; transform: scale(1.7); } to { opacity: 1; transform: none; } }
.ci-meter { transition: opacity .4s ease; }
.ci-meter.is-waiting { opacity: .45; }
.ci-meter { --mh: clamp(150px, 27vh, 230px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; }
.ci-bar { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.ci-col { position: relative; display: block; height: calc(var(--mh) * (.12 + var(--h) * .176)); border: 3px solid #fff; overflow: hidden; transition: transform .15s ease; }
.ci-fill { position: absolute; inset: 0; background: var(--mustard); transform: scaleY(0); transform-origin: bottom; transition: transform .28s cubic-bezier(.3,1.4,.5,1); }
.ci-bar.lit .ci-fill { transform: scaleY(1); transition-delay: calc(var(--d) * 70ms); }
.ci-bar:hover .ci-col { transform: translateY(-4px); }
.ci-bar.picked .ci-col { animation: ci-pop .45s ease calc(var(--d) * 70ms + 120ms); }
@keyframes ci-pop { 40% { transform: scale(1.08, 1.06); } 100% { transform: none; } }
.ci-num { font-family: var(--display); font-size: 2rem; line-height: 1; text-align: center; margin-top: .45rem; }
.ci-word { font-size: .78rem; font-weight: 600; line-height: 1.15; text-align: center; min-height: 2.3em; }
.ci-skip { display: block; margin: 1.1rem auto 0; }
/* who are you */
.ci-field { display: block; border: 0; padding: 0; margin: 0 0 1rem; }
.ci-field > span, .ci-field legend { display: block; font-weight: 600; margin-bottom: .35rem; padding: 0; }
.ci-deck input, .ci-deck select { width: 100%; font: 600 1.15rem var(--text); padding: .85rem .9rem; border: 3px solid #fff; background: #fff; color: #000; border-radius: 0; }
.ci-dob { display: grid; grid-template-columns: 1fr 2fr 1.3fr; gap: 8px; }
.ci-dob legend { grid-column: 1 / -1; }
.ci-msg { min-height: 1.5em; margin: .9rem 0 0; color: var(--accent); font-weight: 600; }
/* sending and done: an equaliser */
.ci-eq { display: flex; align-items: flex-end; gap: 7px; height: 110px; margin: 0 0 1.25rem; }
.ci-eq span { width: 22px; height: 100%; background: currentColor; transform-origin: bottom; animation: ci-eq .9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -170ms); }
.ci-eq.is-wait span { background: var(--mustard); animation-duration: .6s; }
@keyframes ci-eq { 0% { transform: scaleY(.15); } 50% { transform: scaleY(.85); } 100% { transform: scaleY(.4); } }
.ci-done .ci-eq span { animation-iteration-count: 6; }
.ci-hand { font-weight: 700; font-size: 1.15rem; margin: 0 0 1rem; }
.ci-deck.is-light .ci-prog span { background: rgba(0,0,0,.2); }
@media (prefers-reduced-motion: reduce) {
  /* No movement, but colour and fades stay: the read-along still works. */
  .ci-slide, .ci-slide.from-left, .ci-slide.out-left, .ci-slide.out-right { transform: none !important; transition: opacity .3s ease; }
  .ci-fill, .ci-col, .ci-go { transition: none !important; }
  .ci-say .ci-w { animation-name: ci-fade !important; animation-duration: .4s; }
  @keyframes ci-fade { from { opacity: 0; } to { opacity: 1; } }
  .ci-demo span, .ci-eq span, .ci-bar.picked .ci-col { animation: none; }
  .ci-demo span:nth-child(-n+4) { background: var(--mustard); }
}
@media (min-height: 760px) { .ci-slide { padding-top: 2rem; } }
.ci-slide.leaving { pointer-events: none; }

/* ---- Outcomes results: headline, percentage, start and now on the 1 to 5 scale, and the split ---- */
.oc-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 1rem 0 1.25rem; }
.oc-hero > div { background: var(--black); color: var(--white); padding: 1rem 1.1rem; }
.oc-hero > div:first-child { background: var(--teal); }
.oc-hero b { display: block; font-family: var(--display); font-weight: 400; font-size: 3.2rem; line-height: 1; }
.oc-hero span { display: block; font-size: .9rem; line-height: 1.35; margin-top: .3rem; }
.oc-st { padding: 1rem 0; border-top: 1px solid var(--line); }
.oc-st.is-thin .oc-q { opacity: .75; }
.oc-row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 560px) { .oc-row { grid-template-columns: 1fr; gap: .6rem; } }
.oc-pct b { display: block; font-family: var(--display); font-weight: 400; font-size: 3rem; line-height: 1; color: var(--teal); }
.oc-pct span { display: block; font-size: .85rem; line-height: 1.35; }
.oc-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); margin-bottom: .2rem; }
.oc-db { position: relative; height: 34px; margin: 0 14px; }
.oc-db::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line); }
.oc-db-line { position: absolute; top: calc(50% - 3px); height: 6px; left: var(--a); width: calc(var(--b) - var(--a)); background: var(--teal); opacity: .35; border-radius: 3px; }
.oc-dot { position: absolute; top: 50%; left: var(--x); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; font-weight: 700; }
.oc-dot i { font-style: normal; }
.oc-dot-a { background: var(--white); border: 2px solid var(--charcoal); color: var(--charcoal); }
.oc-dot-b { background: var(--teal); color: var(--white); border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--teal); }
.oc-db.is-look .oc-dot-b, .oc-db.is-look .oc-db-line { background: var(--purple); }
.oc-db.is-look .oc-dot-b { box-shadow: 0 0 0 2px var(--purple); }
.oc-legend, .oc-split-key { font-size: .78rem; color: var(--muted); margin: .25rem 0 .6rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.oc-k { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }
.oc-k-a { background: var(--white); border: 2px solid var(--charcoal); }
.oc-k-b { background: var(--teal); }
.oc-k-up { background: var(--teal); border-radius: 2px; }
.oc-k-same { background: #C9C9C9; border-radius: 2px; }
.oc-k-down { background: var(--magenta); border-radius: 2px; }
.oc-split { display: flex; gap: 2px; height: 14px; }
.oc-split span { flex: var(--w) 1 0; min-width: 4px; }
.oc-split span:first-child { border-radius: 4px 0 0 4px; }
.oc-split span:last-child { border-radius: 0 4px 4px 0; }
.oc-s-up { background: var(--teal); }
.oc-s-same { background: #C9C9C9; }
.oc-s-down { background: var(--magenta); }
.oc-look-h { font-size: .8rem; font-weight: 600; margin: .4rem 0 .1rem; }
@media (max-width: 560px) {
  .oc-hero { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .oc-hero > div { padding: .7rem .6rem; }
  .oc-hero b { font-size: 2.2rem; }
  .oc-hero span { font-size: .72rem; }
}
.oc-legend .oc-k { margin-right: .3rem; }
.oc-legend { gap: .3rem .9rem; }
/* What actually happened */
.oc-wait { font-weight: 600; }
.oc-facts h4 { margin: 1.25rem 0 .4rem; }
.oc-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: end; margin: .5rem 0 .3rem; }
.oc-step { background: var(--mist); border-top: 5px solid var(--purple); padding: .6rem .6rem .7rem; min-height: calc(4.2rem + var(--i) * 1.4rem); display: flex; flex-direction: column; justify-content: flex-end; }
.oc-step b { font-family: var(--display); font-weight: 400; font-size: 2.2rem; line-height: 1; }
.oc-step span { font-size: .78rem; font-weight: 600; line-height: 1.2; }
.oc-dest { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .45rem; }
.oc-dest li { display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr 2rem; gap: .75rem; align-items: center; font-size: .9rem; }
.oc-dest-bar { height: 12px; background: var(--mist); border-radius: 0 4px 4px 0; }
.oc-dest-bar i { display: block; height: 100%; width: var(--w); min-width: 4px; background: var(--purple); border-radius: 0 4px 4px 0; }
.oc-dest b { text-align: right; }
@media (max-width: 560px) { .oc-dest li { grid-template-columns: 1fr 2rem; } .oc-dest-bar { grid-column: 1 / -1; grid-row: 2; } }
.rec-pr h4 { margin: 1rem 0 .4rem; }
.pr-ladder { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; counter-reset: st; }
.pr-ladder li { counter-increment: st; padding: .55rem .5rem; background: var(--mist); font-size: .8rem; font-weight: 600; line-height: 1.2; border-bottom: 4px solid transparent; }
.pr-ladder li::before { content: counter(st); display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.pr-ladder li.on { background: #E9E4FF; border-bottom-color: var(--purple); }
.pr-ladder li.top { background: var(--purple); color: var(--white); }
.pr-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }

/* ---- Reports ---- */
.ya-home-btns { margin-top: 0; }
.rp-presets, .rp-progs { border: 0; padding: 0; margin: 0 0 1rem; }
.rp-presets legend, .rp-progs legend { font-weight: 700; margin-bottom: .4rem; }
.rp-title { font-family: var(--display); font-weight: 400; font-size: 2.2rem; margin: 1.5rem 0 0; }
.rp-sub { margin: 0 0 1rem; color: var(--muted); }
.rp-hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 1.5rem; }
.rp-hero > div { background: var(--black); color: var(--white); padding: 1rem; }
.rp-hero > div:first-child { background: var(--teal); }
.rp-hero b { display: block; font-family: var(--display); font-weight: 400; font-size: 3rem; line-height: 1; }
.rp-hero span { display: block; font-size: .85rem; line-height: 1.35; margin-top: .35rem; }
@media (max-width: 760px) { .rp-hero { grid-template-columns: repeat(2, 1fr); } .rp-hero b { font-size: 2.4rem; } }
.rp-sec h4 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 0 0 .5rem; }
.rp-cap { font-weight: 600; font-size: .9rem; margin: .8rem 0 .35rem; }
.rp-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.rp-bars li { display: grid; grid-template-columns: minmax(7rem, 14rem) 1fr 2.2rem; gap: .6rem; align-items: center; font-size: .9rem; }
.rp-bar { height: 14px; background: var(--mist); }
.rp-bar i { display: block; height: 100%; width: var(--w); min-width: 3px; background: var(--teal); border-radius: 0 4px 4px 0; }
.rp-bars.is-purple .rp-bar i { background: var(--purple); }
.rp-bars.is-small li { font-size: .8rem; grid-template-columns: minmax(7rem, 12rem) 1fr 2rem; }
.rp-bars.is-small .rp-bar { height: 10px; }
.rp-bars b { text-align: right; }
@media (max-width: 560px) { .rp-bars li, .rp-bars.is-small li { grid-template-columns: 1fr 2rem; } .rp-bar { grid-column: 1 / -1; grid-row: 2; } }
.rp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 760px) { .rp-two { grid-template-columns: 1fr; } }
.rp-eo { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .5rem 1.5rem; }
.rp-tablewrap { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rp-table th, .rp-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.rp-table th:first-child { text-align: left; white-space: normal; }
@media print {
  body.printing-report .site-header, body.printing-report .site-footer, body.printing-report .page-head, body.printing-report .ta-switch, body.printing-report .no-print, body.printing-report header, body.printing-report footer { display: none !important; }
  body.printing-report .ta-card { break-inside: avoid; border-top-width: 3px; padding: .6rem 0; }
  body.printing-report .rp-hero > div { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-report .rp-bar i, body.printing-report .rp-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.ci-deck textarea { width: 100%; font: 500 1.05rem/1.45 var(--text); padding: .8rem .9rem; border: 3px solid #fff; background: #fff; color: #000; border-radius: 0; resize: vertical; }
.ci-left { display: block; font-size: .78rem; opacity: .75; margin-top: .3rem; }
.ci-tick { display: flex; gap: .7rem; align-items: flex-start; margin: .4rem 0 1rem; cursor: pointer; line-height: 1.4; }
.ci-tick input { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; accent-color: var(--mustard); margin: .05rem 0 0; }
.ci-note { font-size: .88rem; line-height: 1.45; opacity: .85; margin: 0 0 1.25rem; padding-left: .8rem; border-left: 3px solid var(--mustard); }
.ci-tick input { padding: 0; border: 0; }
.oc-quotes { list-style: none; padding: 0; margin: .5rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem; }
.oc-quotes li { background: var(--mist); border-left: 5px solid var(--purple); padding: .8rem 1rem; }
.oc-quotes blockquote, .cs-one blockquote, .rp-cs blockquote { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
.cs-one blockquote, .rp-cs blockquote { border-left: 4px solid var(--purple); padding-left: .8rem; margin: .5rem 0; }
.oc-unread li { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.cs-one { border-top: 1px solid var(--line); padding: .8rem 0; }
.cs-one h4 { margin: 0 0 .2rem; }
.cs-story { white-space: normal; }
.rec-ci-comment { background: var(--mist); padding: .6rem .8rem; margin-top: .5rem; }
.rec-ci-comment p { margin: 0 0 .2rem; }
.rp-cs { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .8rem; }
.rp-cs h5 { font-size: 1.05rem; margin: 0; }
.rp-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .4rem; }
.rp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 6px; margin: .3rem 0 .8rem; }
.rp-stats > div { background: var(--mist); padding: .7rem .8rem; }
.rp-stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1; }
.rp-stats span { display: block; font-size: .8rem; line-height: 1.3; margin-top: .25rem; }
.rp-list { margin: .2rem 0 .6rem; padding-left: 1.1rem; font-size: .92rem; }
.rp-list li { margin: .15rem 0; }
.rp-st th { font-weight: 600; }
.rp-st small { color: var(--muted); font-weight: 400; }
.rp-internal { border-top-color: var(--mustard); }
.rp-doc { font-size: .95rem; max-width: 46rem; }
.rp-doc h1 { font-size: 1.5rem; margin: .5rem 0; font-family: var(--text); font-weight: 700; }
.rp-doc h2 { font-size: 1.15rem; margin: 1.2rem 0 .4rem; font-family: var(--text); font-weight: 700; }
.rp-doc h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.rp-doc table { border-collapse: collapse; margin: .5rem 0; font-size: .85rem; }
.rp-doc td, .rp-doc th { border: 1px solid var(--line); padding: .3rem .5rem; }
.rp-doc blockquote { border-left: 4px solid var(--purple); margin: .5rem 0; padding-left: .8rem; }
.rp-doc ul { list-style: disc; padding-left: 1.4rem; margin: .3rem 0 .7rem; }
.rp-doc li { margin: .15rem 0; }
.rp-doc p { margin: .3rem 0 .6rem; }

/* ---- Time and expenses ---- */
.mn-start { margin-top: .5rem; }
.mn-sec { margin-top: 1.25rem; }
.mn-sec > summary { cursor: pointer; padding: .4rem 0; }
.mn-sec h3 { margin: 0 0 .3rem; }
.mn-list { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .6rem; }
.mn-item { border: 1px solid var(--line); border-left: 5px solid var(--line); padding: .7rem .9rem; background: var(--white); }
.mn-item.mn-pending { border-left-color: var(--mustard); }
.mn-item.mn-authorised { border-left-color: var(--blue); }
.mn-item.mn-query { border-left-color: var(--magenta); }
.mn-item.mn-approved, .mn-item.mn-paid { border-left-color: var(--teal); }
.mn-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.mn-val { font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.mn-kind { font-weight: 700; }
.mn-meta { font-size: .85rem; color: var(--muted); margin: .25rem 0 0; }
.mn-what { margin: .3rem 0 0; }
.mn-notes { list-style: none; padding: .5rem .7rem; margin: .5rem 0 0; background: var(--mist); font-size: .9rem; display: grid; gap: .4rem; }
.mn-acts { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin-top: .6rem; }
.mn-acts .btn-row { margin: 0; }
.mn-form { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.mn-new .mn-form { border: 2px solid var(--black); padding: 1rem; margin-top: 1rem; }
.mn-form fieldset { border: 0; padding: 0; margin: 0 0 .9rem; }
.mn-form legend { font-weight: 700; margin-bottom: .4rem; }
.mn-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.mn-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mn-chip span { display: inline-block; padding: .5rem .8rem; border: 2px solid var(--black); font-weight: 600; font-size: .9rem; cursor: pointer; background: var(--white); }
.mn-chip input:checked + span { background: var(--black); color: var(--white); }
.mn-chip input:focus-visible + span { outline: 3px solid var(--mustard); outline-offset: 2px; }
.mn-pound { display: flex; align-items: center; gap: .3rem; font-weight: 700; font-size: 1.2rem; }
.mn-pound input { max-width: 9rem; font-size: 1.2rem; }
.mn-other { margin-top: .6rem; max-width: 12rem; }
.mn-addr { cursor: pointer; }
.rg-exp { margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.mn-fixed { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .9rem; } .mn-fixed input { width: 6rem; }
.rp-price { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--line); } .rp-price .mn-pound input { max-width: 5rem; } .rp-price-out { font-size: 1.05rem; }

/* Facilitator home: space between the session lists */
#fac-list > h3 { margin-top: 2rem; }
/* Register: expenses already logged for the session */
.mn-sum { margin: 0 0 .75rem; }
.rg-exp .mn-start { margin-top: 1rem; }
/* Register: who is on today. Prominent until the leads are chosen, then a quiet one line summary. */
.rg-team { border-left: 8px solid var(--line); transition: border-color .3s ease, background-color .3s ease; }
.rg-team.is-needed { border-left-color: var(--mustard); background: #FFF9E5; }
.rg-team.is-needed .rg-team-h { font-size: 1.15rem; }
.rg-team:not(.is-needed) .rg-team-why { display: none; }
.rg-team summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; min-width: 0; }
.rg-team[open] summary { margin-bottom: .75rem; }
.rg-team select { max-width: 100%; }
.rg-team .rg-duty legend { text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--black); font-weight: 700; }
.rg-team, .rg-team .ya-row > * { min-width: 0; }
.rg-phase { margin: 2.5rem 0 .75rem; font-size: 1.6rem; }
/* Staff pages: confirmations that slide up from the bottom, out of the way of the work */
.p51-toasts { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: grid; gap: .5rem; width: min(26rem, calc(100vw - 2rem)); pointer-events: none; }
.p51-toast { margin: 0; padding: .8rem 1rem; background: var(--black); color: var(--white); font-weight: 600; border-left: 6px solid var(--mustard); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.p51-toast.is-warn { border-left-color: #C62828; }
/* Summaries look pressable, and the marker turns as a section opens */
.p51-motion details > summary { cursor: pointer; }
.p51-motion details > summary::-webkit-details-marker { transition: transform .2s ease; }
.pay-todo-n:not([hidden]) { display: inline-grid; place-items: center; min-width: 1.5em; padding: 0 .35em; border-radius: 1em; background: var(--mustard); color: var(--black); opacity: 1 !important; margin-left: .25rem; }

/* ---- Sign up: one short page at a time ---- */
.yj-form { background: var(--white); border-top: 6px solid var(--bg-purple); padding: 1.25rem clamp(1.1rem, 3vw, 2rem) 1.5rem; box-shadow: 0 1px 0 var(--line); }
.yj-prog { margin: 0 0 1.25rem; }
.yj-bar { height: 10px; background: var(--mist, #EEE); border-radius: 10px; overflow: hidden; }
.yj-bar span { display: block; height: 100%; width: var(--p, 10%); background: linear-gradient(90deg, var(--bg-purple), var(--bg-teal)); border-radius: 10px; transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.yj-count { margin: .5rem 0 0; font-size: .85rem; font-weight: 600; color: var(--muted); }
.yj-step { display: none; }
.yj-step.is-on { display: block; }
.yj-step h2 { font-size: clamp(1.8rem, 6vw, 2.4rem); margin: 0 0 .5rem; outline: none; }
.yj-step h2 .opt { font-family: inherit; font-size: .9rem; vertical-align: middle; }
.yj-two { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.yj-sub { border: 0; margin: 1.25rem 0 0; padding: 1rem 1rem .25rem; background: #F6F3FF; border-left: 6px solid var(--bg-purple); }
.yj-sub legend { float: left; width: 100%; font-weight: 700; font-size: 1.1rem; padding: 0 0 .25rem; }
.yj-sub.yj-contacts { background: #EFF8F7; border-left-color: var(--bg-teal); }
.yj-age { margin: .25rem 0 0; padding: .6rem .8rem; background: #FFF6D6; border-left: 5px solid var(--mustard); }
/* Big tap cards for choices */
.yj-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1rem 0; }
.yj-card { position: relative; display: block; cursor: pointer; }
.yj-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.yj-card > span { display: block; height: 100%; padding: 1rem 1.1rem 1rem 3.1rem; border: 2px solid var(--black); background: var(--white); transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease; position: relative; font-size: .9rem; color: var(--muted); }
.yj-card > span strong { display: block; font-size: 1.05rem; color: var(--black); margin-bottom: .15rem; }
.yj-card > span::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 1.35rem; height: 1.35rem; border: 2px solid var(--black); background: var(--white); transition: background-color .2s ease, transform .2s ease; }
.yj-card input[type=radio] + span::before { border-radius: 50%; }
.yj-card:hover > span { box-shadow: 4px 4px 0 var(--black); transform: translate(-2px, -2px); }
.yj-card input:focus-visible + span { outline: 3px solid var(--bg-purple); outline-offset: 3px; }
.yj-card input:checked + span { background: #FFF6D6; box-shadow: 4px 4px 0 var(--mustard); }
.yj-card input:checked + span::before { background: var(--black); box-shadow: inset 0 0 0 3px var(--white); animation: yj-pop .3s ease; }
.yj-card--wide { margin: 1rem 0 0; }
@keyframes yj-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* Yes and No as two big buttons */
.yj-form .yn { gap: .5rem; }
.yj-form .yn .tick { border: 2px solid var(--black); padding: .7rem 1.4rem; min-width: 6.5rem; display: inline-flex; gap: .6rem; align-items: center; transition: background-color .2s ease, color .2s ease; }
.yj-form .yn .tick input { accent-color: var(--white); }
.yj-form .yn .tick:has(input[value=yes]:checked) { background: #1B7A43; color: var(--white); border-color: #1B7A43; }
.yj-form .yn .tick:has(input[value=no]:checked) { background: var(--black); color: var(--white); }
.yj-eo { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
/* Check page */
.yj-review { margin: 1rem 0; display: grid; gap: .1rem; }
.yj-review > div { display: grid; grid-template-columns: minmax(7rem, 30%) 1fr; gap: .25rem 1rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.yj-review dt { font-weight: 700; }
.yj-review dd { margin: 0; overflow-wrap: anywhere; }
.yj-review .linklike { margin-left: .4rem; font-size: .85rem; }
@media (max-width: 34rem) { .yj-review > div { grid-template-columns: 1fr; } }
.yj-privacy { margin-top: .5rem; border-top: 0; }
/* What still needs filling in */
.yj-form .is-missing { outline: none; }
.yj-form .ta-field.is-missing input, .yj-form .ta-field.is-missing select { border: 2px solid #C62828; background: #FFF5F5; }
.yj-form .yn.is-missing legend, .yj-form .tick.is-missing span { color: #C62828; }
.yj-form .yn:has(.is-missing) legend { color: #C62828; }
.yj-nav { display: flex; gap: .75rem; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.yj-nav [data-yj=next], .yj-nav .yj-send { margin-left: auto; min-width: 9rem; }
.yj-msg:empty { display: none; }
.yj-msg { margin: 1rem 0 0; color: #C62828; font-weight: 600; }
.yj-done { text-align: center; }
.yj-done .yj-eq { justify-content: center; color: var(--bg-teal); height: 80px; }
.yj-done .yj-eq span { animation-iteration-count: 6; }
/* Sign up, livelier: a colour for each step, a heading that underlines itself, boxes that react, a Next button that says when you are ready */
.yj-form { border-top: 0; --acc: var(--bg-purple); }
.yj-bar { height: 12px; }
.yj-bar span { background: linear-gradient(90deg, var(--bg-purple), var(--acc)); position: relative; overflow: hidden; }
.yj-bar span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%); transform: translateX(-100%); animation: yj-shine 2.8s ease-in-out infinite; }
@keyframes yj-shine { 0%, 40% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.yj-count { color: var(--black); }
.yj-step h2 { position: relative; padding-bottom: .55rem; margin-bottom: .9rem; }
.yj-step h2::after { content: ""; position: absolute; left: 0; bottom: 0; height: 6px; width: 4.5rem; background: var(--acc); transform-origin: left; transform: scaleX(0); }
.yj-step h2.is-in::after { animation: yj-line .6s .15s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes yj-line { to { transform: scaleX(1); } }
.yj-form .ta-field input, .yj-form .ta-field select, .yj-form .ta-field textarea { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.yj-form .ta-field input:focus, .yj-form .ta-field select:focus, .yj-form .ta-field textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 22%, transparent); outline: none; }
.yj-form .ta-field:focus-within > span { color: var(--acc); }
.yj-form .ta-field { position: relative; }
.yj-form .ta-field.is-ok input { border-color: #1B7A43; padding-right: 2.6rem; }
.yj-form .ta-field.is-ok::after { content: "✓"; position: absolute; right: .9rem; bottom: .75rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: #1B7A43; color: #fff; font-weight: 700; font-size: .85rem; animation: yj-pop .35s ease; pointer-events: none; }
.yj-form .ta-field:has(.yj-hint:not(:empty)).is-ok::after { bottom: auto; top: 2.35rem; }
.yj-form .ta-field.is-bad input { border: 2px solid #C62828; background: #FFF5F5; }
.yj-hint { display: block; margin-top: .35rem; font-size: .85rem; color: #8A1C1C; }
.yj-hint:empty { display: none; }
.yj-hint .linklike { font-weight: 700; }
.yj-card input:checked + span { background: color-mix(in srgb, var(--acc) 10%, white); box-shadow: 4px 4px 0 var(--acc); border-color: var(--acc); }
.yj-sub { animation: yj-drop .4s cubic-bezier(.2, .7, .2, 1); }
@keyframes yj-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.yj-nav [data-yj=next]::after, .yj-nav .yj-send::after { content: " →"; display: inline-block; transition: transform .2s ease; }
.yj-nav [data-yj=next]:hover::after, .yj-nav .yj-send:hover::after { transform: translateX(4px); }
.yj-nav [data-yj=next].is-ready { animation: yj-ready 1.6s ease-in-out 2; box-shadow: 0 0 0 0 rgba(245, 184, 0, .6); }
@keyframes yj-ready { 0% { box-shadow: 0 0 0 0 rgba(245, 184, 0, .7); } 70% { box-shadow: 0 0 0 12px rgba(245, 184, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 184, 0, 0); } }
.yj-review dd .linklike { display: inline-block; padding: .1rem .55rem; border: 1.5px solid currentColor; border-radius: 1rem; text-decoration: none; }
.yj-review dd { font-weight: 600; }
.yj-done h2 { animation: yj-pop .5s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .yj-bar span::after { animation: none; }
  .yj-step h2.is-in::after { animation-duration: .01s; }
  .yj-nav [data-yj=next].is-ready { animation: none; outline: 3px solid var(--mustard); outline-offset: 3px; }
}

/* ---- Talk it through: a voice debrief ---- */
.vd { margin: 0 0 1.5rem; padding: 1.1rem 1.1rem 1.2rem; background: #F6F3FF; border-left: 6px solid var(--bg-purple); }
.vd-start p { margin: .6rem 0 0; }
.vd-btn { display: inline-flex; align-items: center; gap: .6rem; }
.vd-mic { width: .9rem; height: .9rem; border-radius: 50%; background: #C62828; box-shadow: 0 0 0 0 rgba(198, 40, 40, .5); }
.vd-btn:hover .vd-mic { animation: vd-pulse 1.4s ease-out infinite; }
.vd-live { text-align: center; }
.vd-meter { display: flex; justify-content: center; align-items: center; gap: 5px; height: 72px; margin: .25rem 0 .5rem; }
.vd-meter span { width: 8px; height: 100%; border-radius: 4px; background: var(--bg-purple); transform: scaleY(var(--v, .08)); transition: transform .08s linear; }
.vd-meter span:nth-child(3n) { background: var(--bg-teal); }
.vd-meter span:nth-child(4n) { background: #C62828; }
.vd-time { font-family: var(--font-display, inherit); font-size: 2rem; margin: 0 0 .5rem; }
.vd-time::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .5rem; border-radius: 50%; background: #C62828; vertical-align: middle; animation: vd-blink 1.2s steps(2, start) infinite; }
.vd-live .btn-row { justify-content: center; }
.vd-wait { display: flex; gap: 1rem; align-items: center; }
.vd-wait .ci-eq { height: 48px; margin: 0; color: var(--bg-purple); }
.vd-wait .ci-eq span { width: 10px; }
.vd-lead { margin: .25rem 0 .75rem; }
.vd-box { background: var(--white); padding: .6rem 1rem .4rem; margin: 0 0 .75rem; border-top: 4px solid var(--bg-teal); animation: yj-drop .4s cubic-bezier(.2, .7, .2, 1) both; }
.vd-box:nth-child(2) { animation-delay: .08s; } .vd-box:nth-child(3) { animation-delay: .16s; } .vd-box:nth-child(4) { animation-delay: .24s; } .vd-box:nth-child(5) { animation-delay: .32s; }
.vd-h { font-weight: 700; margin: 0 0 .25rem; }
.vd-box ul { list-style: none; margin: 0; padding: 0; }
.vd-box .tick { padding: .5rem 0; }
.vd-heard { margin-top: .75rem; }
.vd-heard p { white-space: pre-line; font-size: .95rem; color: var(--muted); }
@keyframes vd-pulse { 0% { box-shadow: 0 0 0 0 rgba(198, 40, 40, .55); } 100% { box-shadow: 0 0 0 12px rgba(198, 40, 40, 0); } }
@keyframes vd-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .vd-time::before { animation: none; } .vd-box { animation: none; } }
.vd-box textarea { width: 100%; font: inherit; line-height: 1.5; padding: .6rem .7rem; border: 1px solid var(--line); background: #FCFCFB; resize: vertical; }
.vd-box textarea:focus { outline: none; border-color: var(--bg-purple); box-shadow: 0 0 0 3px rgba(91, 61, 214, .18); }
.vd-box .vd-h.tick { border-top: 0; padding: .3rem 0 .5rem; font-weight: 700; }
.vd-box.vd-sg { border-top-color: #C62828; background: #FFF6F6; }
.vd-alert { margin-bottom: 1rem; }
.vd-left { margin: .5rem 0 0; }
.vd-left.is-full { padding: .6rem .8rem; background: #FFF6D6; border-left: 5px solid var(--mustard); }
.vd-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Staff onboarding: short pages in step 1, cards, live checks, saved progress ---- */
.ts-pages { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin: -.25rem 0 1rem; padding: .55rem .8rem; background: #F6F3FF; border-left: 5px solid var(--bg-purple); }
.ts-pages span { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.ts-page { animation: yj-drop .35s cubic-bezier(.2, .7, .2, 1); }
.ts-cards { display: grid; gap: .6rem; }
.ts-cards > .tick { border: 2px solid var(--black); padding: .85rem 1rem; background: var(--white); transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.ts-cards > .tick:hover { box-shadow: 4px 4px 0 var(--black); transform: translate(-2px, -2px); }
.ts-cards > .tick:has(input:checked) { background: #F6F3FF; box-shadow: 4px 4px 0 var(--bg-purple); border-color: var(--bg-purple); }
#team-start .ta-field { position: relative; }
#team-start .ta-field.is-ok input { border-color: #1B7A43; padding-right: 2.6rem; }
#team-start .ta-field.is-ok::after { content: "✓"; position: absolute; right: .9rem; bottom: .75rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: #1B7A43; color: #fff; font-weight: 700; font-size: .85rem; animation: yj-pop .35s ease; pointer-events: none; }
#team-start .ta-field.is-bad input { border: 2px solid #C62828; background: #FFF5F5; }
#team-start .ta-field.is-bad.is-ok::after { display: none; }
.tp-nav { align-items: center; }
.tp-nav [data-go=next].is-ready { animation: yj-ready 1.6s ease-in-out 2; }
.tp-nav .ts-later { margin-left: auto; }
.tp-saved.is-ok { color: #1B7A43; }
.tp-saved.is-ok::before { content: "✓ "; font-weight: 700; }
.ts-later-done { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .tp-nav [data-go=next].is-ready { animation: none; outline: 3px solid var(--mustard); outline-offset: 3px; } .ts-page { animation: none; } }

/* ---------- Staff app home (/register) ---------- */
.app-hello { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .25rem 1rem; margin: 0 0 1.25rem; }
.app-hi { font-family: var(--display); font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1; margin: 0 0 .2rem; letter-spacing: .01em; }
.app-hello .ta-small, .app-hello .fac-who { margin: 0; }
.app-today { margin: 0 0 1.5rem; }
.app-today h2 { font-size: 1.1rem; font-family: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .6rem; color: var(--muted); }
.app-none { margin: 0 0 .75rem; color: var(--muted); }
.app-sess { display: grid; gap: .2rem; padding: 1.1rem 1.15rem 1rem; margin: 0 0 .75rem; background: var(--bg-purple); color: var(--white); text-decoration: none; border-radius: 14px; box-shadow: 0 6px 18px rgba(58, 31, 160, .22); transition: transform .18s ease, box-shadow .18s ease; }
.app-sess:hover, .app-sess:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(58, 31, 160, .3); color: var(--white); }
.app-sess:active { transform: translateY(0) scale(.99); }
.app-sess strong { font-size: 1.3rem; line-height: 1.25; }
.app-sess .ta-small { color: #E6E0FF; }
.app-sess-when { font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mustard); }
.app-sess .ta-flags { margin: .3rem 0 0; }
.app-sess-go { margin-top: .5rem; justify-self: start; background: var(--mustard); color: var(--black); font-weight: 700; padding: .55rem 1rem; border-radius: 999px; }
.app-sess.is-off { background: var(--mist); color: var(--charcoal); box-shadow: none; }
.app-sess.is-off .ta-small { color: var(--muted); }
.app-sess.is-off .app-sess-go { background: var(--white); border: 1px solid var(--line); }
.app-todo { margin: 0 0 1.5rem; }
.app-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0 0 2rem; }
.app-tile { display: grid; align-content: start; gap: .25rem; padding: 1rem; min-height: 8.5rem; background: var(--white); color: var(--charcoal); text-decoration: none; border: 1px solid var(--line); border-radius: 14px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.app-tile:hover, .app-tile:focus-visible { transform: translateY(-2px); border-color: var(--bg-purple); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); color: var(--charcoal); }
.app-tile:active { transform: scale(.98); }
.app-tile strong { font-size: 1.02rem; line-height: 1.25; }
.app-tile span { font-size: .85rem; line-height: 1.35; color: var(--muted); }
.app-tile .app-ico { width: 2.2rem; height: 2.2rem; padding: .4rem; margin-bottom: .35rem; border-radius: 10px; background: #EEE9FF; color: var(--bg-purple); }
.app-tile.is-alert { grid-column: 1 / -1; min-height: 0; background: var(--bg-magenta); border-color: var(--bg-magenta); color: var(--white); grid-template-columns: auto 1fr; column-gap: .9rem; align-items: center; }
.app-tile.is-alert .app-ico { grid-row: span 2; margin: 0; background: rgba(255, 255, 255, .18); color: var(--white); }
.app-tile.is-alert span { color: #FFE3EC; }
.app-tile.is-alert:hover, .app-tile.is-alert:focus-visible { color: var(--white); border-color: var(--black); }
.app-ico { width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.app-help { padding: 0; border-top: 6px solid var(--mustard); }
.app-help > summary { list-style: none; cursor: pointer; padding: 1.1rem clamp(1rem, 3vw, 2rem); display: grid; gap: .1rem; }
.app-help > summary::-webkit-details-marker { display: none; }
.app-help > summary::after { content: "+"; position: absolute; right: 1.25rem; top: 1rem; font-size: 1.6rem; line-height: 1; }
.app-help { position: relative; }
.app-help[open] > summary::after { content: "−"; }
.app-help-t { font-weight: 700; font-size: 1.1rem; }
.app-help-body { padding: 0 clamp(1rem, 3vw, 2rem) 1.25rem; }
.app-help h4 { margin: 1.1rem 0 .35rem; font-size: 1rem; }
.app-leads { list-style: none; padding: 0; margin: 0 0 .5rem; font-weight: 600; }
.app-add { border-top-color: var(--mustard); }
.app-add-head { display: flex; gap: .9rem; align-items: center; margin-bottom: .75rem; }
.app-add-head img { border-radius: 13px; flex: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.app-add h3 { margin: 0 0 .15rem; font-size: 1.1rem; }
.app-add-head p { margin: 0; }
.app-steps { margin: 0 0 .75rem; padding-left: 1.3rem; }
.app-steps li { margin: .2rem 0; }
.fac-code { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.fac-code input[name=code] { font-size: 1.6rem; letter-spacing: .3em; max-width: 12rem; text-align: center; font-variant-numeric: tabular-nums; }
@media (display-mode: standalone) { .fac-head { display: none; } }
@media (prefers-reduced-motion: reduce) { .app-sess, .app-tile { transition: none; } .app-sess:hover, .app-tile:hover { transform: none; } }
button.app-tile { font: inherit; text-align: left; cursor: pointer; width: 100%; }
/* Practice site and the end of the staff guide */
.practice-bar { background: repeating-linear-gradient(-45deg, var(--mustard) 0 14px, #FFD54A 14px 28px); color: var(--black); padding: .7rem var(--gutter); font-size: .9rem; line-height: 1.45; text-align: center; border-bottom: 2px solid var(--black); }
.practice-try { border-top-color: var(--mustard); }
.practice-try > summary { font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.practice-try ol { margin-top: .75rem; }
.sg-try { border-top-color: var(--bg-purple); }
.sg-next .ta-card { animation: sg-in .4s ease both; }
@keyframes sg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sg-next .ta-card { animation: none; } }