:root{
  --boxBorder: 1.5px solid var(--line);

  --bg:#f4f6fb;
  --ink:#0f172a;
  --muted:#475569;
  --line:#1f2937;
  --grid:#b5b9c2;
  --paper:#ffffff;
  --side:#66fb00;
  --blue:#000000;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--ink);
}
.shell{max-width:1100px;margin:18px auto;padding:0 14px;}
.topbar{
  display:flex; gap:14px; align-items:flex-end; justify-content:space-between;
  padding:14px 16px; border:1px solid #d8dee9; border-radius:18px; background:var(--paper);
}
.h1{margin:0;font-size:22px;font-weight:900;letter-spacing:-.2px}
.sub{margin:6px 0 0;color:var(--muted);font-weight:600}
.badge{
  font-size:12px; font-weight:900; color:var(--muted);
  padding:4px 10px; border:1px solid #d8dee9; border-radius:999px; margin-left:8px;
}
.actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.btn{
  padding:10px 14px; border-radius:12px; border:1px solid #0f172a;
  background:#0f172a; color:white; font-weight:900; cursor:pointer; text-decoration:none;
}
.btn--ghost{background:white; color:#0f172a; border-color:#d8dee9}

.paperWrap{margin-top:14px; display:flex; flex-direction:column; gap:14px;}
.paperPage{
  background:var(--paper);
  border:1px solid #d8dee9;
  border-radius:18px;
  padding:12px;
  box-shadow: 0 6px 20px rgba(2,6,23,.06);
}

.qBlock{
  display:flex;
  border:1.5px solid var(--line);
  margin-top:10px;
  min-height: 250px;
}
.qNum{
  width:64px;
  border-right:var(--boxBorder);
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:0;
  font-size:28px;
  font-weight:900;
  color:var(--blue);
}
.qMain{
  flex:1;
  display:flex;
  flex-direction:column;
}
.qBox{
  height: var(--qbox-h, 92px);

  border-bottom:var(--boxBorder);
  padding:18px 18px;
  font-size:34px;
  font-weight:500;
  letter-spacing:.3px;
  text-align:left;
  display:flex;
  align-items:center;
}
.grid{
  flex:1;
  background-clip: content-box;
  aspect-ratio: 22 / 8;
  border-top:0;
  background:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: calc(100%/22) calc(100%/8);
}
.qSide{
  width:120px;
  background:var(--side);
  border-left:1.5px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  padding:16px 10px;
  gap:6px;
}
.ansBox{
  width:38px;
  height:38px;
  background:white;
  border:1.5px solid var(--line);
}
.mark{
  font-weight:900;
  font-size:18px;
  margin-top:0;
}

/* Print */
@media print{
  body{background:white}
  .topbar{display:none}
  .shell{max-width:none;margin:0;padding:0}
  .paperWrap{gap:0}
  .paperPage{
    border:none; border-radius:0; box-shadow:none;
    page-break-after: always;
    padding:10mm 10mm;
  }
  .qBlock{margin-top:6mm; min-height:auto}
  .qBox{
  height: var(--qbox-h, 92px);
font-size:18pt; padding:8mm}
  .qNum{font-size:18pt; width:16mm}
  .qSide{width:22mm}
  .ansBox{width:16mm;height:16mm;border:1pt solid #000}
  .grid{
    border:0;
    background-size: calc(100%/22) calc(100%/8);
    min-height: 40mm;
  }
}

.pageHeader{padding:6px 8px 12px; border:1.5px solid transparent;}
.testTitle{font-size:20px;font-weight:900;margin-bottom:6px;}
.nameRow{display:flex; align-items:center; justify-content:flex-start; gap:10px; font-weight:800;}

/* Large answer square inside grid (bottom-right) */
.grid{
  position: relative;
}
.grid::after{
  content: "";
  position: absolute;
  right: calc(100%/22 * 0.4);
  bottom: calc(100%/8 * 0.4);
  width: calc(100% * 4 / 22);
  height: calc(100% * 3 / 8);
  border: 4px solid #000;
  background: #fff;
  box-sizing: border-box;
}

.ansTable{width:100%; border-collapse:collapse; font-weight:800}
.ansTable th, .ansTable td{border:1px solid #d8dee9; padding:10px 12px; text-align:left}
.ansTable th{background:#f8fafc}
.ansN{width:70px; color:var(--blue); font-weight:900}
.ansA{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

.pageFooter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:10px;
  padding-top:8px;
}
.pageNum{
  position:absolute;
  right:18px;
  color:var(--muted);
  font-weight:900;
  font-size:12px;
}
.logo{
  height:34px;
  object-fit:contain;
}
@media print{
  .pageFooter{position:relative; margin-top:6mm}
  .pageNum{right:0; font-size:10pt}
  .logo{height:12mm}
}

.ansQ{
  font-weight:600;
}


/* Make number sit level with the question box (not centred in full height) */
.qBlock{
  display:grid;
  grid-template-columns: 64px 1fr 120px;
  grid-template-rows: var(--qbox-h, 92px) 1fr;
}

.qNumCol{
  grid-column:1;
  grid-row:1 / span 2;
  border-right:var(--boxBorder);
  display:flex;
  flex-direction:column;
}

.qNum{
  height: var(--qbox-h, 92px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:900;
  color:#000;
}

.qNumCol::after{
  content:"";
  flex:1;
}

.qMain{grid-column:2; grid-row:1 / span 2;}
.qSide{grid-column:3; grid-row:1 / span 2;}

.missingBox{
  display:inline-block;
  width: 120px;
  height: 34px;
  border: var(--boxBorder);
  border-radius: 2px;
  vertical-align: middle;
  margin: 0 10px;
}


/* Top navigation */
.topnav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: var(--boxBorder);
}
.nav-left{
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 12px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.navlink{
  display:inline-block;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration:none;
  color:#111;
  font-weight:800;
}
.navlink:hover{filter:brightness(0.97);}
.navlink.active{
  background:#f2f2f2;
  border: var(--boxBorder);
}

/* Centered secondary action row (Test page) */
.menuRow{
  margin-top: 10px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}


/* v7.81: center main page title */
.centerTitle{ text-align:center; width:100%; }

/* v7.81: keep nav layout, center title */
.topbarTitleWrap{flex:1; text-align:center;}


/* v7.82: restore result input grid layout exactly as v7.76 */


/* v7.84: true page-centred heading blocks */
.fullCenter{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.fullCenter .h1{
  margin-left:auto;
  margin-right:auto;
}

.fullCenter .muted{
  max-width:900px;
}





/* v7.88: headers sit on grey background, not white shell */
.topbar{
  background: transparent;
  border: none;
}


/* v7.96: page headings sit outside white nav bar */
.page-header{
  background: transparent;
  padding: 14px 0 6px 0;
}
.page-header .h1,
.page-header .muted{
  text-align:center;
}


/* v7.97: stacked fractions on-screen */
.frac{
  display:inline-block;
  vertical-align:middle;
  text-align:center;
  line-height:1;
  margin: 0 4px;
}
.frac .num{display:block; font-size:0.85em; padding-bottom:1px;}
.frac .bar{display:block; border-top:2px solid #111; margin:1px 0;}
.frac .den{display:block; font-size:0.85em; padding-top:1px;}


/* v8.03: unify page heading sizes */
.page-title,
.ri-title{
  font-size: 28px;
  font-weight: 900;
  text-align: center;
}


/* v8.04: unify heading vertical spacing */
.page-title,
.ri-title{
  margin-top: 12px;
  margin-bottom: 10px;
}


/* --- Product tiles (Home) --- */
.tileGrid4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 1100px){
  .tileGrid4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .tileGrid4{ grid-template-columns: 1fr; }
}
.tileCard{
  position:relative;
  border:1px solid #e3e3e3;
  border-radius:12px;
  padding:14px;
  background:#fff;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.tileTitle{
  font-weight:700;
  font-size:18px;
  margin-bottom:6px;
}
.tileDesc{
  opacity:0.85;
  margin-bottom:12px;
}
.tileRibbon{
  position:absolute;
  top:12px;
  right:-34px;
  transform:rotate(35deg);
  background:#111827;
  color:#fff;
  padding:6px 40px;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.2px;
}
.tileCard--soon{
  opacity:0.75;
}
.tileCard--soon .btn{
  opacity:0.6;
  cursor:not-allowed;
}
.delPupilBtn{
  width:34px; height:34px;
  border-radius:8px;
  border:2px solid #222;
  background:#fff;
  font-weight:900;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
  position:relative;
  z-index:5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.delPupilBtn:hover{ background:#f3f3f3; }


/* Home tiles (4 in a row) */
.tiles4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  align-items:stretch;
}
.tileCard{
  position:relative;
  background:#fff;
  border-radius:14px;
  padding:18px;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
  min-height:120px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.tileTitle{
  font-size:20px;
  font-weight:700;
  margin-bottom:10px;
}
.comingSoon{
  opacity:0.85;
}
.ribbon{
  position:absolute;
  top:12px;
  right:-38px;
  transform:rotate(35deg);
  background:#333;
  color:#fff;
  font-size:12px;
  padding:6px 46px;
  letter-spacing:0.2px;
}

/* Modernised home tiles */
.tileLink{ text-decoration:none; color:inherit; }
.tileMedia{
  width:100%;
  height:96px;
  border-radius:16px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  color:#111827;
}
.tileSvg{ width:46px; height:46px; }
.yearTileSvg{ width:100%; height:100%; display:block; }
.tileCta{
  margin-top:10px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid #111827;
  border-radius:10px;
  height:34px;
  padding:0 14px;
  width:max-content;
  background:#fff;
}
.tileCard--active{ border:1px solid #d1d5db; }
.tileLink:hover .tileCard{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,0.10); }
.tileLink:hover .tileCta{ filter:brightness(0.98); }
@media (max-width: 980px){
  .tiles4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .tiles4{ grid-template-columns:1fr; }
}


/* Home tiles: centered text + modern hover */
.tiles4 .tileCard{ text-align:center; align-items:center; }
.tiles4 .tileTitle{ margin-bottom:0; }
.tileLink:hover .tileCard{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.10); }
.tileCard{ transition: transform 140ms ease, box-shadow 140ms ease; }



/* v8.11 footer */
.siteFooter{
  margin-top: 24px;
  padding: 18px 0 20px;
  text-align: center;
  border-top: 1px solid #ddd;
}
.siteFooter .footerLogo{
  display:block;
  margin: 0 auto 8px auto;
  height: 44px;
  width: auto;
}
.siteFooter .footerLink{
  display:inline-block;
  text-decoration:none;
  color:#111;
  font-weight:800;
  font-size:14px;
}
.siteFooter .footerLink:hover{ text-decoration: underline; }

/* Video links + modal */
.qvid{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  background:transparent;
  border:none;
  padding:4px 2px;
  cursor:pointer;
  font:inherit;
}
.qvid .play{
  font-size:12px;
  opacity:0.8;
}
.qvid:hover .play{ opacity:1; }
.videoModal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.videoModal.open{ display:block; }
.videoModalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
}
.videoModalCard{
  position:relative;
  width:min(900px, 92vw);
  margin:8vh auto 0 auto;
  background:#fff;
  border-radius:16px;
  padding:14px 14px 10px 14px;
  box-shadow:0 18px 50px rgba(0,0,0,0.25);
}
.videoModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.videoTitle{
  font-size:18px;
  font-weight:700;
}
.videoClose{
  border:2px solid #222;
  background:#fff;
  border-radius:10px;
  width:38px;
  height:34px;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.videoPlayer{
  width:100%;
  height:auto;
  border-radius:12px;
  background:#000;
}
.videoHint{
  margin-top:8px;
  font-size:12px;
  opacity:0.75;
}