/* Study-guide pages (/guides/**). Loaded on top of legal.css, which supplies the
   tokens, nav and base typography - this file only adds the components those
   pages need and the legal pages do not. */
.crumbs{font-size:12px;color:var(--text2);margin-top:26px;letter-spacing:-0.01em;}
.crumbs a{color:var(--text2);text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs span{opacity:0.5;margin:0 3px;}

.cta strong{display:inline-block;margin-bottom:2px;}
.cta a{font-weight:700;text-decoration:none;white-space:nowrap;}
.cta a:hover{text-decoration:underline;}

/* One card per topic. Kept as a bordered block rather than a bare list because
   a spec topic is a unit of revision - a student scanning for theirs needs the
   name to be findable at a glance, not buried in a paragraph. */
.topic{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:16px 18px;margin-bottom:10px;}
.topic h3{font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:-0.025em;color:var(--text);margin-bottom:4px;line-height:1.3;}
.topic p{font-size:14px;margin-bottom:8px;}
.topic p:last-child{margin-bottom:0;}
.topic .meta{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:var(--ls-caps);font-weight:700;margin-bottom:6px;}
/* Specification terminology, shown as chips. These are the exact words the mark
   scheme uses, which is the whole claim the page is making - so they are content,
   not decoration, and they stay readable rather than shrinking to noise. */
.topic .kw{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:5px;}
.topic .kw li{font-size:11.5px;font-weight:650;color:var(--text2);background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:3px 8px;margin:0;line-height:1.4;}

.board-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:10px;margin:16px 0 8px;}
.board-card{display:flex;flex-direction:column;gap:3px;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:16px 18px;text-decoration:none;box-shadow:0 1px 2px rgba(16,26,56,0.05);transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);}
.board-card:hover{border-color:var(--border-hover);box-shadow:0 6px 18px rgba(16,26,56,0.09);transform:translateY(-1px);}
.board-name{font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:-0.025em;color:var(--text);line-height:1.25;}
.board-meta{font-size:12.5px;color:var(--text2);}
[data-theme="dark"] .board-card{box-shadow:none;}
[data-theme="dark"] .board-card:hover{box-shadow:0 6px 18px rgba(0,0,0,0.32);}

.board-h{font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:-0.02em;color:var(--text);margin:20px 0 6px;}
.topic-list{columns:2;column-gap:24px;padding-left:20px;}
.topic-list li{font-size:13.5px;margin-bottom:4px;break-inside:avoid;}
.boards{padding-left:20px;}
.boards li{font-size:14px;}
@media (max-width:560px){.topic-list{columns:1;}}

table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:14px;}
th,td{text-align:left;padding:9px 12px;border:1px solid var(--border);color:var(--text2);vertical-align:top;}
th{color:var(--text);font-weight:600;background:var(--surface);}
.scroll{overflow-x:auto;}

/* Labels the chip row. Without it the chips read as tags on the card; with it
   they read as what they are - the vocabulary the mark scheme uses. */
.topic .kw-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text2);opacity:0.75;margin-bottom:6px;}
/* Named studies sit apart from the vocabulary chips: on the essay subjects they
   are the thing a student is actually hunting for, not supporting detail. */
.topic .kw-studies li{color:var(--text);border-color:var(--border-hover);}
.topic .kw-label + .kw{margin-bottom:10px;}
.topic .kw:last-child{margin-bottom:0;}