/* All Aboard staff & volunteer hub.
   Palette from AA_Brand_Colour_Refs.xlsx (Dave Shaw, 2026-08-06):
     primary   Black #231F20 · Blue #004385 · Grey #58595B
     secondary Green #BAD532 · Light Blue #B5E3EE · Orange #E5A520
   Washes/tints (--wash, --line, chip backgrounds) are derived from those six.
   The error red is FUNCTIONAL, not brand — the palette has no danger colour.

   Always light, like the website (Dave Shaw, 2026-11-03: "lighter colours rather than dark").
   There is deliberately no dark mode: a phone or laptop set to dark used to turn the hub black.
   Layout follows the website's pages: light-blue ground, white header and cards. */

:root{
  color-scheme:light;
  --navy:#004385; --navy-dk:#00325f;
  --ink:#231f20; --muted:#58595b;
  --green:#bad532; --lblue:#b5e3ee; --orange:#e5a520;
  --wash:#e4f4f9;                 /* light-blue tint: hovers, alerts, icon chips */
  --ground:var(--lblue);          /* page ground, as on the website */
  --bg:#ffffff; --card:#fff; --line:#cfe3ea;
  --danger:#a3282c;
  --radius:12px; --shadow:0 1px 2px rgba(35,31,32,.06),0 4px 14px rgba(35,31,32,.07);
}

/* ===== THE ACCENT SWITCH =====
   The main accent (active menu item, buttons, headings' bar, ticker, NEW pills) is green, the
   website's tile colour. Danie prefers orange. To make orange the hub's colour for EVERYONE, move
   ":root, " from the green line to the orange line, then deploy this file (it is served fresh,
   no restart). HR users also see two swatches in the header that preview either accent in their
   own browser only (header.incl). --accent-ink is the text colour on the accent, chosen for
   contrast: navy on green 5.9:1, ink on orange 7.6:1. --accent-name is read by that script. */
:root, :root[data-accent="green"]{
  --accent:var(--green); --accent-dk:#a6c021; --accent-ink:var(--navy); --accent-2:var(--orange);
  --accent-name:green; }
:root[data-accent="orange"]{
  --accent:var(--orange); --accent-dk:#cf9212; --accent-ink:var(--ink); --accent-2:var(--green);
  --accent-name:orange; }

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---- header ---- */
header.site{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
/* the accent as a band under the header, like the website's coloured strips */
header.site::after{content:"";display:block;height:4px;background:var(--accent)}
header.site .wrap{display:flex;align-items:center;gap:18px;min-height:68px;flex-wrap:wrap}
.brand img{height:34px;width:auto;display:block}
.brand:hover{text-decoration:none}
nav.main{display:flex;gap:1px;margin-left:auto;flex-wrap:wrap}
/* eight items once News and Manage are in — tightened so the bar stays on one line on a laptop */
nav.main a{padding:8px 10px;border-radius:8px;color:var(--muted);font-weight:500;font-size:14.5px;
  white-space:nowrap}
nav.main a:hover{background:var(--wash);color:var(--navy);text-decoration:none}
nav.main a.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
nav.main a.shopname{color:var(--navy);font-weight:600}

.who{display:flex;align-items:center;gap:9px;padding-left:16px;border-left:1px solid var(--line)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--lblue);color:var(--navy);
  display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 34px;
  box-shadow:0 0 0 2px var(--accent)}

/* HR only: preview the accent in this browser (header.incl). Nobody else sees a change. The dots
   sit on the "HR" line under the name, so they add no width to the header (hidden on phones,
   with .whotext). */
.accentpick{display:inline-flex;gap:4px;margin-left:7px;vertical-align:-2px}
.accentpick button{width:12px;height:12px;padding:0;border-radius:50%;border:0;
  box-shadow:0 0 0 1px var(--line);cursor:pointer}
.accentpick button[data-pick="green"]{background:var(--green)}
.accentpick button[data-pick="orange"]{background:var(--orange)}
.accentpick button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--navy)}
.accentpick button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.whotext strong{display:block;font-size:14px;line-height:1.3}
.whotext small{display:block;color:var(--muted);font-size:12px;line-height:1.3}
.signout{font-size:13px;color:var(--muted);margin-left:6px}

/* ---- typography ---- */
main{padding:30px 0 70px;display:block}
h1{font-size:27px;margin:0 0 6px;letter-spacing:-.01em}
h2{font-size:19px;margin:34px 0 12px;letter-spacing:-.01em;
  padding-left:10px;border-left:4px solid var(--accent)}
.lede{color:var(--muted);margin:0 0 26px;max-width:62ch}
.count{color:var(--muted);font-size:13.5px;margin:-6px 0 14px}
.empty{color:var(--muted);font-style:italic}
.centre{text-align:center}

/* ---- cards, callouts, flashes ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px}
.card.narrow{max-width:560px}
.callout{border-left:4px solid var(--accent-2);background:var(--card);border-radius:0 10px 10px 0;
  padding:14px 18px;margin:0 0 22px;box-shadow:var(--shadow);font-size:14.5px}
.callout b{color:var(--navy)}
.flash{padding:12px 16px;border-radius:10px;margin:0 0 20px;font-size:14.5px}
.flash.error{background:#fbeaea;color:var(--danger);border:1px solid #f0cccd}
.flash.alert{background:var(--wash);color:var(--navy);border:1px solid var(--lblue)}

/* ---- hero banners — Dave Shaw's shop photography (2026-08-06), website-style ---- */
.hero{height:190px;border-radius:var(--radius);margin:0 0 20px;border:1px solid var(--line);
  background:linear-gradient(120deg,var(--wash),var(--accent)) center/cover no-repeat;
  box-shadow:var(--shadow)}
.hero-home{background-image:url(../assets/img/hero-home.jpg)}
.hero-handbook{background-image:url(../assets/img/hero-handbook.jpg)}
.hero-documents{background-image:url(../assets/img/hero-documents.jpg)}
.hero-volunteer{background-image:url(../assets/img/hero-volunteer.jpg)}
.hero-forms{background-image:url(../assets/img/hero-forms.jpg)}
.hero-profile{background-image:url(../assets/img/hero-profile.jpg)}
.hero-shops{background-image:url(../assets/img/hero-shops.jpg)}
.hero-myshop{background-image:url(../assets/img/hero-myshop.jpg)}
.hero-news{background-image:url(../assets/img/hero-news.jpg)}
.hero-admin{background-image:url(../assets/img/hero-admin.jpg)}
@media (max-width:640px){.hero{height:128px}}

/* website-style ticker strip: an accent band with caps */
.ticker{background:var(--accent);color:var(--accent-ink);border-radius:8px;padding:7px 4px;
  margin:0 0 22px;font-weight:800;font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-align:center}

/* ---- tiles ---- */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
/* the six home tiles sit two rows of three (Dave, 2026-08-06) */
.tiles.home3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.tiles.home3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.tiles.home3{grid-template-columns:1fr}}
.tile{display:flex;gap:13px;align-items:center;padding:15px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  color:inherit;transition:transform .12s ease,box-shadow .12s ease}
.tile:hover{text-decoration:none;transform:translateY(-2px);
  box-shadow:0 3px 6px rgba(35,31,32,.08),0 10px 26px rgba(35,31,32,.10)}
.tile .ic{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:var(--lblue);
  display:grid;place-items:center;font-size:19px}
.tile b{display:block;font-size:15px;font-weight:600}
.tile span span{display:block;color:var(--muted);font-size:13px;margin-top:1px}

/* ---- noticeboard ---- */
.posts{display:grid;gap:16px;margin-bottom:24px}
.post{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;color:inherit}
a.post:hover{text-decoration:none;transform:translateY(-2px);
  box-shadow:0 3px 6px rgba(35,31,32,.08),0 10px 26px rgba(35,31,32,.10)}
a.post{transition:transform .12s ease,box-shadow .12s ease}
.postimg{display:block;width:100%;max-height:340px;object-fit:cover}
.postbody{display:block;padding:16px 18px}
.post h2{margin:0 0 4px;padding:0;border:0;font-size:18px}
.post b{display:block;font-size:15.5px;font-weight:600}
.postdate{display:block;color:var(--muted);font-size:12.5px;margin:2px 0 0}
.posttext{margin:8px 0 0;white-space:pre-line}
/* the home-page strip shows three across with smaller pictures */
.posts.compact{grid-template-columns:repeat(3,1fr)}
.posts.compact .postimg{max-height:132px}
.posts.compact .postbody{padding:12px 14px}
@media (max-width:900px){.posts.compact{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.posts.compact{grid-template-columns:1fr}}

/* ---- manage screen ---- */
.card.admin{padding:20px;margin-bottom:18px}
.card.admin .f{text-align:left;margin-bottom:14px}
.card.admin textarea{width:100%;padding:11px 13px;font:inherit;font-size:15px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg);color:inherit;resize:vertical}
.card.admin input[type=text]{width:100%;padding:11px 13px;font-size:15px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg);color:inherit}
.card.admin input[type=file]{font-size:14px}
.card.admin .hint{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
.card.admin .check{display:block;margin:0 0 14px;font-size:14.5px;color:var(--muted)}
.btn.narrow{width:auto;padding:10px 20px}
.card.admin .btn{width:auto;padding:11px 24px}
form.inline{display:inline;margin:0}
.linkbtn{background:none;border:0;padding:0 0 0 14px;color:var(--danger);font:inherit;
  font-size:13.5px;cursor:pointer;text-decoration:underline}
.thumb{width:46px;height:46px;flex:0 0 46px;border-radius:7px;object-fit:cover;
  border:1px solid var(--line)}
.bannerpreview{display:block;width:100%;max-height:80px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);margin:0 0 10px}
.card.admin select{padding:11px 13px;font-size:15px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg);color:inherit;min-width:220px}

/* ---- document lists ---- */
.docs{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--card);box-shadow:var(--shadow);margin-bottom:20px}
.doc{display:flex;align-items:center;gap:13px;padding:12px 16px;
  border-bottom:1px solid var(--line);color:inherit}
.doc:last-child{border-bottom:0}
.doc:hover{background:var(--wash);text-decoration:none}
/* file-type chips on the brand secondaries: PDF/PPT amber, DOC light blue, XLS green */
.doc .ic{width:30px;height:30px;flex:0 0 30px;border-radius:7px;display:grid;place-items:center;
  font-size:10.5px;font-weight:750;background:#faeecf;color:#8a6210}
.doc .ic.tDOC{background:var(--lblue);color:var(--navy)}
.doc .ic.tXLS{background:#ebf3c6;color:#5c7016}
.doc .ic.tPPT{background:#f2d9a4;color:#7d5a0e}
.doc .ic.tFILE{background:var(--wash);color:var(--navy)}
.doc .nm{flex:1;min-width:0}
.doc .nm b{display:block;font-weight:500;font-size:15px}
.doc .nm small{color:var(--muted);font-size:12.5px}
.doc .chev{color:var(--muted)}

.pill{display:inline-block;font-size:11.5px;font-weight:650;letter-spacing:.03em;
  padding:2px 8px;border-radius:99px;background:var(--lblue);color:var(--navy)}
.pill.new{background:var(--accent);color:var(--ink)}
.pill.hr{background:var(--accent-2);color:var(--ink)}

/* ---- search ---- */
.search{position:relative;margin-bottom:16px}
.search input{width:100%;padding:12px 14px;font-size:15px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);color:inherit}
.search input:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:transparent}

/* ---- definition list ---- */
.kv{display:grid;grid-template-columns:150px 1fr;gap:10px 16px;margin:0 0 22px}
.kv dt{color:var(--muted);font-size:14px}
.kv dd{margin:0;font-size:15px;font-weight:500}

/* ---- centred pages (login / sent) ---- */
body.centred{min-height:100vh;display:grid;place-items:center;padding:24px}
.box{width:100%;max-width:420px;text-align:center}
.logo{height:44px;width:auto;margin-bottom:24px}
.box h1{font-size:22px;margin:0 0 6px}
.box .card{border-top:4px solid var(--accent)}
.sub{color:var(--muted);font-size:14.5px;margin:0 0 22px}
.f{text-align:left;margin-bottom:15px}
.f label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.f input{width:100%;padding:12px 13px;font-size:16px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg);color:inherit}
.f input:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:transparent}
.btn{width:100%;padding:12.5px;font-size:15.5px;font-weight:600;border:0;border-radius:9px;
  background:var(--accent);color:var(--accent-ink);cursor:pointer;font-family:inherit}
.btn:hover{background:var(--accent-dk)}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.note{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;line-height:1.55}
.sent{background:var(--wash);border-radius:10px;padding:22px;margin-bottom:6px}
.sent .big{font-size:34px;line-height:1}
.sent .strong{margin:10px 0 0;color:var(--ink);font-weight:600}
.foot{margin-top:22px;color:var(--muted);font-size:12.5px}

/* full-width white footer band, which reads as a band against the light-blue ground */
footer.site{background:var(--card);border-top:1px solid var(--line);margin-top:44px}
footer.site .wrap{padding:20px;color:var(--muted);font-size:13px}
footer.site p{margin:0}

/* ---- small screens: volunteers are mostly on phones ---- */
@media (max-width:640px){
  header.site .wrap{min-height:0;padding-top:12px;padding-bottom:12px}
  nav.main{order:3;width:100%;margin-left:0}
  nav.main a{padding:8px 10px;font-size:14px}
  .who{margin-left:auto;padding-left:0;border-left:0}
  .whotext{display:none}
  h1{font-size:23px}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dd{margin-bottom:12px}
}