:root{
  --brand:#0BA360;          /* overwritten per organization */
  --dark:#313131;
  --bg:#FDFCFB;
  --card:#ffffff;
  --line:#e6e3df;
  --muted:#6b6b6b;
  /* --brand-ink is a darkened version of the organization's colour, calculated
     in core.js. Fatima green on white is only 3.27:1, below the 4.5:1 that WCAG AA
     requires for normal-size text, so buttons, links and small coloured text use
     this instead. Large graphics keep the pure brand colour. The fallback below
     keeps things working if the script has not run yet. */
  --brand-ink:var(--brand);
  --ok:var(--brand-ink); --warn:#c77700; --bad:#c0392b;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--dark);line-height:1.5;font-size:15px}
h1,h2,h3{line-height:1.25;margin:0 0 .5rem}
h1{font-size:1.6rem} h2{font-size:1.2rem} h3{font-size:1.02rem}
a{color:var(--brand-ink);text-decoration:none} a:hover{text-decoration:underline}
.boot{padding:3rem;text-align:center;color:var(--muted)}

/* A visible focus ring for keyboard users. The brand colour alone is not dark
   enough to be a reliable indicator, so this uses the near-black text colour. */
a:focus-visible,button:focus-visible,.btn:focus-visible,[data-action]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--dark);outline-offset:2px;border-radius:6px}

/* header */
.topbar{background:#fff;border-bottom:3px solid var(--brand);display:flex;align-items:center;gap:1rem;padding:.6rem 1.25rem;position:sticky;top:0;z-index:5;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.6rem;min-height:40px;color:var(--dark)}
.logo img{max-height:42px;max-width:190px;display:block}
.wordmark{display:flex;align-items:center;gap:.5rem;font-weight:800;letter-spacing:.04em;font-size:1.05rem}
.wordmark .mark{width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:1rem}
.product{margin-left:.25rem;padding-left:.75rem;border-left:1px solid var(--line);color:var(--muted);font-size:.8rem;line-height:1.2}
.product b{color:var(--dark);display:block;font-size:.95rem;letter-spacing:.08em}
.spacer{flex:1}
.nav{display:flex;gap:1rem;align-items:center;font-size:.9rem}
.nav .who{color:var(--muted);font-size:.8rem}

/* On a phone the header is the first thing to overflow, because the product
   name, the signed-in email and two actions do not fit side by side. Drop the
   product strapline, let the rest wrap, and clip a long email address. */
@media(max-width:640px){
  .topbar{padding:.6rem .9rem;gap:.5rem}
  .product{display:none}
  .nav{gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
  .nav .who{max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  h1{font-size:1.35rem}
  .big{font-size:2rem}
  /* Seven-column tables cannot be squeezed into a phone. Give them a workable
     minimum width so the columns stay readable and the whole table scrolls
     sideways together, rather than squashing one column into a sliver. */
  table.wide{min-width:660px}
  .scorecol{min-width:130px}
}

main{max-width:1080px;margin:0 auto;padding:1.5rem 1.25rem 4rem}
footer{max-width:1080px;margin:0 auto;padding:1rem 1.25rem 2.5rem;color:var(--muted);font-size:.78rem}
.narrow{max-width:640px;margin:0 auto}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:.75rem}

/* cards & layout */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;margin-bottom:1rem}
.card.accent{border-left:5px solid var(--brand)}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.muted{color:var(--muted)} .small{font-size:.85rem}
.right{text-align:right}
.hero{padding:1.25rem 0 .5rem}
.hero p{margin:.25rem 0 0;color:var(--muted)}

/* forms */
label{display:block;font-weight:600;font-size:.85rem;margin:.6rem 0 .2rem}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=password],select,textarea{
  width:100%;padding:.55rem .65rem;border:1px solid #cfcac4;border-radius:8px;font:inherit;background:#fff;color:var(--dark)}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
input[type=color]{width:56px;height:38px;padding:2px;border:1px solid #cfcac4;border-radius:8px;background:#fff}
.inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem;align-items:end}

/* buttons */
button,.btn{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--brand-ink);background:var(--brand-ink);color:#fff;padding:.5rem 1rem;font-weight:600;display:inline-block;text-decoration:none}
button:hover,.btn:hover{filter:brightness(.93);text-decoration:none}
button.secondary,.btn.secondary{background:#fff;color:var(--brand-ink)}
button.danger{background:#fff;color:var(--bad);border-color:var(--bad)}
button.link{background:none;border:none;color:var(--brand-ink);padding:0;font-weight:600}
button:disabled{opacity:.55;cursor:not-allowed}
button.sm{padding:.25rem .6rem;font-size:.8rem}

/* chips */
.chip{display:inline-block;padding:.12rem .6rem;border-radius:999px;font-size:.75rem;font-weight:700;background:#eee;color:#555}
.chip.draft{background:#eee;color:#555}
.chip.rater_selection{background:#fff3d6;color:#8a5a00}
.chip.survey_open{background:#d9f3e6;color:#07713f}
.chip.closed{background:#e4e6ea;color:#444}
.chip.released{background:var(--brand-ink);color:#fff}

/* tables */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:.55rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#faf9f7}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* stepper */
.stepper{display:flex;gap:.25rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.step{flex:1;min-width:120px;padding:.5rem .6rem;border-radius:8px;background:#f1efec;color:var(--muted);font-size:.8rem;font-weight:600;text-align:center}
.step.done{background:#d9f3e6;color:#07713f}
.step.now{background:var(--brand-ink);color:#fff}

/* messages */
.note{padding:.7rem .9rem;border-radius:8px;background:#eef8f2;border:1px solid #cdebd9;font-size:.9rem;margin:.6rem 0}
.note.warn{background:#fff7e6;border-color:#f3dba5}
.note.bad{background:#fdecea;border-color:#f2c0ba}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--dark);color:#fff;padding:.65rem 1.1rem;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:50;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.bad{background:var(--bad)}

/* survey */
.q{padding:1rem 0;border-bottom:1px solid var(--line)}
.q:last-of-type{border-bottom:none}
.q .qt{font-weight:600;margin-bottom:.5rem}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.scale label{margin:0;font-weight:500;font-size:.78rem;text-align:center;border:1px solid #cfcac4;border-radius:8px;padding:.5rem .2rem;cursor:pointer;background:#fff}
.scale input{display:block;margin:0 auto .25rem}
.scale label:has(input:checked){border-color:var(--brand);background:#eef8f2;color:var(--dark);box-shadow:inset 0 0 0 1px var(--brand)}
.q.missing{background:#fff7f6;border-radius:8px;padding-left:.6rem}
@media(max-width:640px){.scale{grid-template-columns:1fr}.scale label{text-align:left;display:flex;gap:.5rem;align-items:center}.scale input{margin:0}}

/* report */
.bar{position:relative;height:12px;background:#eee;border-radius:99px;min-width:120px}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--brand)}
.bar b{position:absolute;top:-3px;width:2px;height:18px;background:var(--dark)}
.delta.up{color:var(--ok);font-weight:700} .delta.down{color:var(--bad);font-weight:700}
.big{font-size:2.4rem;font-weight:800;color:var(--brand-ink);line-height:1}
.pill{display:inline-block;background:#f1efec;border-radius:8px;padding:.25rem .6rem;margin:.15rem .25rem .15rem 0;font-size:.85rem}
ul.clean{list-style:none;padding:0;margin:0} ul.clean li{padding:.5rem 0;border-bottom:1px solid var(--line)} ul.clean li:last-child{border:none}
.legend{display:flex;gap:1rem;font-size:.78rem;color:var(--muted);margin-top:.5rem}
.swatch{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.3rem}
.scorecol{min-width:170px}

/* loading state */
.loading{display:flex;align-items:center;gap:.7rem;color:var(--muted);font-size:.95rem}
.spinner{width:18px;height:18px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand-ink);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
/* Respect anyone who has asked their device to reduce motion. */
@media(prefers-reduced-motion:reduce){
  .spinner{animation:none;border-top-color:var(--brand-ink)}
  *{transition:none!important}
}

@media print{
  /* A4 with sensible margins. Without an explicit @page rule browsers use their
     own default and the report table can be cut off at the right edge. */
  @page{size:A4;margin:12mm}

  /* Keep the brand colours and the score bars. Browsers default to "economy",
     which silently drops backgrounds, leaving empty grey bars in the PDF. */
  html,body{print-color-adjust:exact;-webkit-print-color-adjust:exact}

  .topbar .nav,.noprint,#toast,button,.btn{display:none!important}
  body{background:#fff}
  main{max-width:none;padding:0}
  .card{break-inside:avoid;border-color:#ccc}
  .hero{padding-top:0}

  /* Let the wide score table fit the page instead of being clipped. */
  .tablewrap{overflow:visible}
  .scorecol{min-width:0}
  table{font-size:10.5pt}
  th,td{padding:.3rem .35rem}
  .bar{min-width:70px;height:9px}
  .bar b{height:13px;top:-2px}
}