/* ============================================================
   site.css - the site-wide furniture that every page shares:
   the legal footer and the cookie consent banner.

   Both are injected by site.js, so this file is the only place
   their styling lives. It deliberately defines no colour tokens
   of its own - it inherits whatever --ink / --surface / etc. the
   host page already declares, so it drops into the app pages and
   the policy pages alike and follows the active theme.
   ============================================================ */

/* ---------- text sitting ON the accent colour ----------
   White on the light-theme blue is 5.97:1, but the dark theme lightens the
   blue to #5b8def and white drops to 3.23:1 - below the 4.5:1 minimum for the
   button labels that use it. Dark ink on the lighter blue gets back to 5.7:1.
   Defined here because every page loads this file and none of them declare
   this token themselves. */
:root{ --on-accent:#ffffff }
:root[data-theme="dark"]{ --on-accent:#0d141d }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --on-accent:#0d141d }
}

/* ---------- skip link (WCAG 2.4.1 Bypass Blocks) ----------
   Off-screen until focused, then the first thing a keyboard user lands on.
   Lives here rather than in a per-page <style> so every page - app and
   policy alike - gets the same control in the same place. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:9500;
  background:var(--surface);color:var(--ink);border:1px solid var(--consensus);
  border-radius:10px;padding:10px 16px;font-size:14px;
  font-family:inherit;text-decoration:none;box-shadow:var(--shadow);
}
.skip:focus{left:12px;top:12px}

/* Skip-link and panel-switch targets are focused programmatically only; the
   ring would be noise on a heading or a whole region. */
main[tabindex="-1"]:focus,h1[tabindex="-1"]:focus{outline:none}

/* Available to assistive technology, invisible on screen. Used for chart
   summaries and live-region announcements. Not display:none - that would
   hide it from screen readers too. */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- footer ---------- */
.site-footer{
  /* width/align-self keep it full-bleed when the host page centres its
     content with flexbox (login.html) instead of a block wrapper. */
  width:100%;
  align-self:stretch;
  flex-shrink:0;
  max-width:960px;
  margin:0 auto;
  padding:26px 20px 32px;
  border-top:1px solid var(--hairline);
  color:var(--muted);
  font-size:12.5px;
  line-height:1.6;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 22px;
}
/* The app's own .wrap already reserves bottom padding; the footer
   supplies the rule that separates itself from it. */
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.site-footer a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;
}
.site-footer a:hover{color:var(--consensus);border-bottom-color:var(--consensus)}
.site-footer a:focus-visible{
  outline:2px solid var(--consensus);outline-offset:3px;border-radius:3px;
}
.site-footer .copy{white-space:nowrap}
.site-footer button.linklike{
  background:none;border:0;padding:0;margin:0;
  font-family:inherit;font-size:inherit;color:var(--muted);cursor:pointer;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s;
}
.site-footer button.linklike:hover{color:var(--consensus);border-bottom-color:var(--consensus)}
.site-footer button.linklike:focus-visible{outline:2px solid var(--consensus);outline-offset:3px;border-radius:3px}

@media (max-width:560px){
  .site-footer{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------- cookie consent banner ---------- */
.cc-banner{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:9000;
  background:var(--surface);
  border-top:1px solid var(--hairline);
  box-shadow:0 -8px 32px -16px rgba(13,28,48,.35);
  padding:18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
}
:root[data-theme="dark"] .cc-banner{box-shadow:0 -8px 32px -16px rgba(0,0,0,.7)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cc-banner{box-shadow:0 -8px 32px -16px rgba(0,0,0,.7)}
}
.cc-inner{
  max-width:960px;margin:0 auto;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.cc-copy{flex:1;min-width:260px}
.cc-copy h2{
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;
  color:var(--ink);margin:0 0 5px;letter-spacing:-.005em;
}
.cc-copy p{color:var(--ink-soft);font-size:13.5px;line-height:1.55;margin:0}
.cc-copy a{color:var(--consensus);text-decoration:underline;text-underline-offset:2px}
.cc-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
.cc-btn{
  height:42px;padding:0 20px;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;
  border:1px solid var(--hairline);background:var(--surface);color:var(--ink-soft);
  transition:border-color .15s,color .15s,background .15s,transform .1s;
}
.cc-btn:hover{border-color:var(--consensus);color:var(--consensus)}
.cc-btn:active{transform:translateY(1px)}
.cc-btn:focus-visible{outline:2px solid var(--consensus);outline-offset:2px}
.cc-btn.primary{
  background:var(--consensus);border-color:var(--consensus);color:var(--on-accent);
}
.cc-btn.primary:hover{filter:brightness(1.07);color:var(--on-accent)}

/* Both choices are equally prominent - same size, same weight, side by
   side. Making "decline" harder to find than "accept" is exactly what
   the ICO tells you not to do. */
@media (max-width:640px){
  .cc-inner{gap:16px}
  .cc-actions{width:100%}
  .cc-btn{flex:1;min-width:130px}
}

@media (prefers-reduced-motion:no-preference){
  .cc-banner{animation:cc-rise .3s ease both}
  @keyframes cc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* Keep the banner clear of the page's own bottom padding while it's up. */
body.cc-open{padding-bottom:150px}
@media (max-width:640px){ body.cc-open{padding-bottom:230px} }