/* Exam boards: the list of exams (/exams) and one exam's page (/exams/<exam>). */
.board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:35px}

/* A board's card: a banner in the board's colour (--hue), the board's icon on a white tile, then the exam */
.board-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;container-type:inline-size;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.board-card:hover,.board-card:focus-within{transform:translateY(-3px);border-color:color-mix(in srgb,var(--hue) 45%,var(--border));box-shadow:0 12px 26px #1739691a}
.board-card.is-mine{border-color:color-mix(in srgb,var(--hue) 60%,var(--border));box-shadow:0 0 0 1px color-mix(in srgb,var(--hue) 60%,transparent)}
.board-banner{position:relative;height:112px;flex:none;color:#fff;overflow:visible;
  background:linear-gradient(115deg,color-mix(in srgb,var(--hue) 80%,#000),var(--hue) 55%,color-mix(in srgb,var(--hue) 78%,#fff))}
.board-banner::before{content:"";position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(circle at 88% -20%,#ffffff2e 0 32%,transparent 33%),radial-gradient(circle at 12% 130%,#0000001f 0 30%,transparent 31%)}
.board-banner-art{position:absolute;right:16px;bottom:-.1em;font-size:var(--art,58px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff;opacity:.16;
  white-space:nowrap;pointer-events:none;transition:opacity .18s}
.board-card:hover .board-banner-art{opacity:.24}
.board-banner-tags{position:absolute;top:14px;left:14px;right:14px;z-index:1;display:flex;align-items:center;gap:6px;pointer-events:none}
.board-banner-region,.board-banner-mine{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.board-banner-region{margin-left:auto;background:#ffffff26;border:1px solid #ffffff4d;color:#fff}
.board-banner-mine{background:#fff;color:color-mix(in srgb,var(--hue) 85%,#000);box-shadow:0 2px 8px #0b18331f}
/* A state's landmark scene (exam-boards.php .has-art): the picture fills the banner, the tags sit on its plain sky */
.board-banner.has-art{background:var(--soft)}
.board-banner.has-art::before{display:none}
.board-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right bottom;border-radius:11px 11px 0 0;transform-origin:right bottom;transition:transform .5s ease}
.board-card:hover .board-banner-img{transform:scale(1.04)}
.has-art .board-banner-region{margin-left:0;background:#ffffffe6;border-color:#fff;color:color-mix(in srgb,var(--hue) 85%,#000);box-shadow:0 2px 8px #0b18331a}
body.dark .board-banner-img{filter:brightness(.62) saturate(1.1)}
@media(prefers-reduced-motion:reduce){.board-banner-img,.board-card:hover .board-banner-img{transition:none;transform:none}}
.board-banner-mine .bi{font-size:10px}
.board-banner-icon{position:absolute;left:22px;bottom:-26px;width:56px;height:56px;border-radius:15px;display:grid;place-items:center;font-size:25px;
  background:#fff;color:color-mix(in srgb,var(--hue) 88%,#000);border:3px solid var(--surface);box-shadow:0 6px 16px #10203a1f}
body.dark .board-banner-icon{background:#f5f8ff;border-color:var(--surface)}
.board-card-body{display:flex;flex-direction:column;flex:1;padding:40px 22px 16px}
.board-card h2{font-size:19px;font-weight:750;letter-spacing:-.02em;line-height:1.3;margin:0}
.board-card h2 a{color:var(--text);text-decoration:none}
.board-card h2 a::after{content:"";position:absolute;inset:0;z-index:0}   /* the whole card opens the syllabus */
.board-card h2 a:focus-visible{outline:none}
.board-card:has(h2 a:focus-visible){outline:2px solid var(--hue);outline-offset:2px}
.board-commission{margin:3px 0 10px;font-size:12px;font-weight:500;color:var(--muted)}
.board-intro{margin:0 0 14px;font-size:13px;line-height:1.75;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.board-facts-row{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.board-facts-row li{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:5px 9px;border-radius:6px;background:var(--bg);color:var(--muted);border:1px solid var(--border)}
.board-facts-row li.is-on{color:color-mix(in srgb,var(--hue) 80%,var(--text));background:color-mix(in srgb,var(--hue) 8%,var(--surface));border-color:color-mix(in srgb,var(--hue) 22%,var(--border))}
body.dark .board-facts-row li.is-on{color:color-mix(in srgb,var(--hue) 35%,#fff);background:color-mix(in srgb,var(--hue) 18%,var(--surface))}
.board-facts-row .bi{font-size:12px}
/* Three ways in, along the bottom */
.board-actions{position:relative;z-index:1;display:grid;grid-template-columns:auto auto 1fr;border-top:1px solid var(--border)}
.board-action{display:inline-flex;align-items:center;gap:7px;padding:13px 16px;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;
  border-right:1px solid var(--border);transition:background .15s,color .15s}
.board-action:last-child{border-right:0;justify-content:flex-end}
.board-action:hover,.board-action:focus-visible{background:color-mix(in srgb,var(--hue) 7%,var(--surface));color:var(--text)}
.board-action.is-main{color:color-mix(in srgb,var(--hue) 85%,var(--text))}
body.dark .board-action.is-main{color:color-mix(in srgb,var(--hue) 40%,#fff)}
.board-action .bi{font-size:13px}
.board-go{transition:transform .15s}
.board-card:hover .board-go,.board-action.is-main:hover .board-go{transform:translateX(3px)}
/* A narrow card: the syllabus link on its own row, papers and website below it */
@container (max-width:470px){
  .board-actions{grid-template-columns:1fr 1fr}
  .board-action.is-main{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--border);padding:13px 18px}
  .board-action.is-main .board-go{margin-left:auto}
  .board-action{padding:12px 18px}
}
.board-count{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--soft);color:var(--purple);font-size:11px;font-weight:700;line-height:18px;text-align:center}
.board-action .board-count{background:color-mix(in srgb,var(--hue) 12%,var(--surface));color:color-mix(in srgb,var(--hue) 85%,var(--text))}
body.dark .board-action .board-count{background:color-mix(in srgb,var(--hue) 30%,var(--surface));color:#fff}
/* The exam page's banner mark */
.board-mark{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:20px;background:#e8f7f1;color:#0c7a5a}
.board-mark.is-national{background:#eef0fd;color:#4b3ac4}
body.dark .board-mark{background:#18302a;color:#8fd1b3}
body.dark .board-mark.is-national{background:#262246;color:#b9afff}
.board-body{margin:0 0 2px;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.board-sub{margin:2px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.primary-btn .board-count{background:#ffffff2e;color:#fff}

/* One exam */
.board-hero{display:flex;gap:20px;align-items:center;padding:28px 30px;margin-bottom:18px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(120deg,#eaf1ff 0%,var(--surface) 62%)}
body.dark .board-hero{background:linear-gradient(120deg,#1c2a48 0%,var(--surface) 62%)}
.board-hero h1{font-size:30px;font-weight:750;letter-spacing:-.035em;line-height:1.2;margin:2px 0 4px}
.board-hero .board-sub{font-size:13px}
.board-hero .exam-chip{display:inline-block;white-space:nowrap}
/* The board page's banner with the state's landmark (exam-board.php .has-art), faded in from the left */
.board-hero.has-art{position:relative;overflow:hidden;min-height:170px}
.board-hero.has-art>span,.board-hero.has-art>div{position:relative;z-index:1}
.board-hero.has-art>div{max-width:62%}
.board-hero-art{position:absolute;top:0;right:0;width:46%;height:100%;object-fit:cover;object-position:right bottom;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%);mask-image:linear-gradient(to right,transparent 0,#000 34%)}
body.dark .board-hero-art{filter:brightness(.55) saturate(1.1);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 55%);mask-image:linear-gradient(to right,transparent 0,#000 55%)}
.board-mark-lg{width:60px;height:60px;border-radius:14px;font-size:27px}
.board-tabs{display:flex;gap:4px;box-shadow:inset 0 -1px 0 var(--border);margin-bottom:22px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}  /* no stray scrollbar beside the tabs */
.board-tabs::-webkit-scrollbar{display:none}
.board-tabs a{display:inline-flex;align-items:center;gap:7px;padding:11px 14px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.board-tabs a:hover{color:var(--text)}
.board-tabs a.active{color:#245be8;border-bottom-color:#245be8}
body.dark .board-tabs a.active{color:var(--purple);border-bottom-color:var(--purple)}
.board-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px;align-items:start}
.board-main{min-width:0}
.board-aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
.board-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--ui-radius,11px);padding:22px;display:flex;flex-direction:column;gap:12px}
.board-panel h2{font-size:15px;font-weight:700;margin:0}
.board-panel p{margin:0;font-size:13px;line-height:1.75;color:var(--muted)}
.board-panel .text-link{font-size:12px}
.board-facts{margin:0;display:flex;flex-direction:column;gap:8px}
.board-facts div{display:flex;justify-content:space-between;gap:12px;font-size:12px;border-top:1px solid var(--border);padding-top:8px}
.board-facts dt{font-weight:500;color:var(--muted);white-space:nowrap}
.board-facts dd{margin:0;font-weight:600;color:var(--text);text-align:right}
.board-wide{justify-content:center;display:inline-flex;align-items:center;gap:6px;font-size:13px}
.board-quiz{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:9px;background:var(--bg);text-decoration:none}
.board-quiz strong{font-size:14px;color:var(--text);line-height:1.4}
.board-quiz span{font-size:12px;color:var(--muted)}
.board-quiz:hover strong{color:var(--purple)}
.board-more{margin:6px 0 0}

/* The syllabus */
.syllabus-toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--ui-radius,11px);padding:16px 20px;margin-bottom:18px}
.syllabus-toc p{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--muted)}
.syllabus-toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px}
.syllabus-toc li{font-size:13px;line-height:1.5;padding:3px 0;break-inside:avoid}
.syllabus-toc a{color:var(--text);text-decoration:none}
.syllabus-toc a:hover{color:var(--purple)}
.syllabus-body{background:var(--surface);border:1px solid var(--border);border-radius:var(--ui-radius,11px);padding:8px 30px 26px}
.syllabus-body h2{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.35;margin:26px 0 10px;scroll-margin-top:96px}
.syllabus-body h3{font-size:15px;font-weight:700;margin:18px 0 6px;color:var(--text)}
.syllabus-body p{font-size:14px;line-height:1.85;color:var(--muted);margin:0 0 12px;max-width:72ch}
.syllabus-body ul{margin:0 0 12px;padding-left:20px}
.syllabus-body li{font-size:14px;line-height:1.75;color:var(--text);margin:0 0 6px;max-width:72ch}
.syllabus-body li::marker{color:#245be8}
.syllabus-body strong{color:var(--text);font-weight:650}
.syllabus-table{overflow-x:auto;margin:4px 0 14px;border:1px solid var(--border);border-radius:9px}
.syllabus-table table{width:100%;border-collapse:collapse;font-size:13px}
.syllabus-table th{background:var(--bg);text-align:left;font-weight:650;color:var(--text);padding:10px 12px;white-space:nowrap}
.syllabus-table td{padding:9px 12px;border-top:1px solid var(--border);color:var(--text);vertical-align:top;white-space:nowrap}
.syllabus-table td.wrap{white-space:normal;min-width:200px}
.syllabus-table td:first-child{font-weight:600;color:var(--muted);white-space:nowrap}
.syllabus-note{margin:14px 0 0;font-size:12px;line-height:1.7;color:var(--muted)}
.syllabus-note .bi{color:var(--faint);margin-right:4px}

@media(max-width:1199px){
  .board-layout{grid-template-columns:minmax(0,1fr) 270px}
  .board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:991px){
  .board-layout{grid-template-columns:1fr}
  .board-aside{position:static}
  .syllabus-toc ol{columns:1}
}
@media(max-width:900px){.board-hero.has-art>div{max-width:66%}.board-hero-art{width:40%}}
@media(max-width:700px){
  .board-grid{grid-template-columns:1fr;gap:14px}
  .board-banner{height:96px}
  .board-banner-art{font-size:calc(var(--art,58px) * .85)}
  .board-card-body{padding:38px 18px 14px}
  .board-action{font-size:12px}
  .board-hero{padding:20px;gap:14px;align-items:flex-start}
  .board-hero.has-art{flex-wrap:wrap;padding-bottom:0;min-height:0}
  .board-hero.has-art>div{max-width:calc(100% - 62px)}
  .board-hero-art{position:static;order:3;flex:0 0 calc(100% + 40px);width:auto;height:92px;margin:2px -20px 0;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%);mask-image:linear-gradient(to bottom,transparent 0,#000 40%)}
  .board-hero h1{font-size:23px}
  .board-mark-lg{width:48px;height:48px;font-size:22px}
  .syllabus-body{padding:4px 18px 20px}
  .syllabus-body h2{font-size:18px}
}