/* ===========================================================================
   Rosey Exam Wizard - design tokens (SINGLE SOURCE OF TRUTH).
   Re-skinning the whole app = editing the values in :root below.
   Derived from the school LMS charter (navy + gold crest accent).
   =========================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-600.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-700.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/inter-800.woff2") format("woff2");}

:root{
  /* brand */
  --navy:#1F2D63;
  --navy-700:#18234E;
  --gold:#C2A04A;
  --green:#2E7D32;
  --green-chip:#E7F3E8;
  --green-border:#BBD9BD;

  /* surfaces & lines */
  --page-bg:#F6F7F9;
  --surface:#FFFFFF;
  --border:#DDE1EC;
  --zebra:#EFEFF7;
  --pending:#FBF3C9;
  --accommo-bg:#F4F6FF;

  /* text */
  --ink:#1B2230;
  --label:#9AA0AB;
  --muted:#6B7280;

  /* shape */
  --radius:8px;
  --radius-sm:4px;
  --hairline:2px;

  /* type */
  --font:"Inter","Helvetica Neue","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --fs-label:11px;
  --fs-body:14px;
  --fs-h1:26px;
}

*{box-sizing:border-box;}
body{font-family:var(--font); color:var(--ink); font-size:var(--fs-body); line-height:1.45;}
h1,h2,h3{color:var(--navy);}
a{color:var(--navy);}

/* field label / value (the LMS convention) */
.field{display:flex; flex-direction:column; gap:2px;}
.field__label{
  font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase;
  color:var(--label); font-weight:600;
}
.field__value{color:var(--navy); font-weight:600;}

/* accommodation "A" badge (matches the LMS Amenagement convention) */
.badge-a{
  display:inline-block; width:20px; height:20px;
  background:var(--navy); color:#fff; font-weight:800; font-size:12px;
  border-radius:var(--radius-sm); text-align:center; line-height:20px;
  vertical-align:middle;
}

/* permitted-material chip: colour + glyph so it survives greyscale */
.chip-material{
  display:inline-flex; align-items:baseline;
  color:var(--ink); font-weight:600; font-size:12.5px;
}
.chip-material::before{
  content:"\2713"; color:var(--green); font-weight:800; margin-right:.4em;
}
/* a category explicitly set to "None" (no permitted item, so no green check) */
.material__none-tag{color:var(--muted); font-weight:600; font-size:12.5px;}

/* dropdown / tag pill */
.pill{
  display:inline-flex; align-items:center; gap:.35em;
  border:1px solid var(--border); border-radius:999px;
  padding:.15em .65em; color:var(--navy); background:var(--surface); font-weight:600;
}

/* cards & tables */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:0 1px 3px rgba(20,30,60,.05);}
table.data{border-collapse:collapse; width:100%;}
table.data th, table.data td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--border);}
table.data tbody tr:nth-child(even){background:var(--zebra);}
table.data tr.pending{background:var(--pending);}

/* buttons (outline by default, navy primary) */
.btn{
  display:inline-flex; align-items:center; gap:.4em;
  border:1px solid var(--navy); color:var(--navy); background:var(--surface);
  padding:.5em 1em; border-radius:999px; font:inherit; font-weight:600; line-height:1.2;
  text-decoration:none; cursor:pointer;
  white-space:nowrap; transition:background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn:hover{border-color:var(--navy);}
.btn:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}
.btn--primary{background:var(--navy); color:#fff;}
.btn--primary:hover{background:var(--navy-700); border-color:var(--navy-700);}
.btn--ghost{border-color:var(--border); color:var(--muted);}
.btn--ghost:hover{color:var(--navy); border-color:var(--navy);}
.btn--danger{border-color:#C0392B; color:#C0392B;}
.btn--danger:hover{background:#C0392B; color:#fff;}
.btn--lg{padding:.85em 2.6em; font-size:17px;}
.btn--primary.btn--lg{box-shadow:0 6px 18px rgba(31,45,99,.18);}
.btn--primary.btn--lg:hover{box-shadow:0 9px 24px rgba(31,45,99,.26);}

.muted{color:var(--muted);}
.gold-rule{height:var(--hairline); background:var(--gold); border:0;}