/* SteamTicket exam-breakdown pages. Layered on /assets/site.css; uses its tokens only. */
.eb-wrap { max-width: 860px; margin: 0 auto; }
.eb-kicker { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); font-weight: 700; margin: 0 0 .4rem; }
.eb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.eb-facts li { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; }
.eb-facts b { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--text); }
.eb-facts span { font-size: .85rem; color: var(--text-muted); }
@media (min-width: 720px) { .eb-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Source / label badges */
.eb-badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; border: 1px solid; vertical-align: middle; white-space: nowrap; }
.eb-badge--official { color: #4ade80; border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.08); }
.eb-badge--community { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
[data-theme="light"] .eb-badge--official { color: #16713a; border-color: rgba(26,122,60,.3); background: #e6f4ea; }
.eb-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .85rem; color: var(--text-muted); margin: .75rem 0 1rem; padding: 0; list-style: none; }

/* Theme stacked bar */
.eb-stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); margin: 1rem 0 .6rem; }
.eb-stack span { display: block; height: 100%; }
.eb-themes { display: grid; gap: .5rem; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0 0 1.5rem; }
@media (min-width: 600px) { .eb-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eb-themes li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; }
.eb-themes i { width: .8rem; height: .8rem; border-radius: 3px; flex-shrink: 0; }
.eb-themes b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.eb-c1 { background: var(--accent); } .eb-c2 { background: var(--gold); } .eb-c3 { background: #22c55e; }
.eb-c4 { background: #a78bfa; } .eb-c5 { background: #f472b6; }

/* Controls (shown only when JS runs) */
.eb-controls { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.eb-controls fieldset { border: 0; padding: 0; margin: 0; }
.eb-controls legend, .eb-controls label.eb-lbl { font-size: .8rem; font-weight: 600; color: var(--text-muted); margin-bottom: .35rem; display: block; }
.eb-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.eb-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eb-seg label { padding: .45rem .75rem; font-size: .85rem; cursor: pointer; color: var(--text-muted); }
.eb-seg input:checked + label { background: var(--accent); color: #fff; }
.eb-seg input:focus-visible + label { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
.eb-hours { display: flex; gap: .4rem; align-items: center; }
.eb-hours input { width: 5.5rem; padding: .45rem .6rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); font: inherit; }
.eb-hours button { padding: .4rem .6rem; font-size: .8rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: .8rem; }
.eb-hours button:hover, .eb-hours button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }

/* The table */
.eb-table-wrap { margin: 0 0 .75rem; }
.eb-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.eb-table caption { text-align: left; font-size: .85rem; color: var(--text-muted); padding-bottom: .5rem; }
.eb-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; text-align: left; padding: .5rem .5rem; border-bottom: 2px solid var(--border-strong); }
.eb-table td, .eb-table tbody th { padding: .65rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; text-align: left; font-weight: 400; }
.eb-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eb-table thead th.num { text-align: right; }
.eb-code { display: inline-block; min-width: 2.3rem; color: var(--accent-bright); font-weight: 700; font-size: .8rem; }
.eb-topic { color: var(--text); font-weight: 600; }
.eb-practice { display: block; font-size: .78rem; margin-top: .15rem; padding-left: 2.3rem; }
.eb-q { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.eb-theme-row td { background: var(--bg-alt); border-bottom: 1px solid var(--border-strong); }
.eb-theme-row th { background: var(--bg-alt); color: var(--text); font-size: .85rem; font-weight: 700; padding: .55rem .5rem; border-bottom: 1px solid var(--border-strong); }
.eb-theme-row th small { color: var(--text-muted); font-weight: 500; margin-left: .35rem; }
.eb-theme-row i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .45rem; vertical-align: baseline; }
.eb-bar-cell { width: 26%; }
#breakdown { margin-top: 2.25rem; }
.eb-bar { display: flex; align-items: center; gap: .5rem; }
.eb-bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); overflow: hidden; }
.eb-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.eb-bar-pct { font-size: .8rem; color: var(--text-muted); min-width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.eb-table tfoot td, .eb-table tfoot th { font-weight: 700; color: var(--text); padding: .7rem .5rem; border-top: 2px solid var(--border-strong); text-align: left; }
@media (max-width: 600px) {
  .eb-table { font-size: .86rem; }
  .eb-table .eb-col-share, .eb-bar-cell { display: none; }  /* share % equals the count on a 100-question paper */
  .eb-table thead th.num, .eb-table td.num { width: 1%; padding-left: .6rem; }
  .eb-table thead .eb-badge { display: none; }   /* the legend above the table carries the labels on phones */
  .eb-practice { padding-left: 0; font-size: .76rem; }
  .eb-code { display: block; min-width: 0; }
  .eb-theme-row th { font-size: .8rem; }
  .eb-theme-row th small { display: block; margin: .15rem 0 0 1.15rem; }
}
.eb-note { font-size: .85rem; color: var(--text-muted); border-left: 3px solid var(--gold); padding: .6rem .9rem; background: var(--gold-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1rem 0 1.5rem; }
.eb-plan { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.25rem .5rem; margin: 1.5rem 0; }
.eb-plan ol { padding-left: 1.2rem; margin: .5rem 0 1rem; }
.eb-plan li { margin-bottom: .5rem; color: var(--text-muted); }
.eb-plan li b { color: var(--text); }
.eb-sources { font-size: .85rem; color: var(--text-muted); }
.eb-sources li { margin-bottom: .4rem; }
.eb-hub-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1.25rem 0 2rem; }
.eb-hub-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; color: var(--text); }
.eb-hub-card:hover { border-color: var(--accent); text-decoration: none; }
.eb-hub-card h3 { margin: .2rem 0 .35rem; font-size: 1.1rem; }
.eb-hub-card p { margin: 0; font-size: .88rem; color: var(--text-muted); }
.eb-hub-card--muted { opacity: .8; }
@media print { .site-nav, .announce-bar, .eb-controls, .cta-band, .site-footer { display: none !important; } }

/* count-source badge: ABSA result report (4A) */
.eb-badge--report { color: var(--accent-bright); border-color: var(--accent); background: var(--accent-light); }

/* save / share infographic block */
.eb-share { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem; align-items: center;
  margin: 2.5rem 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); }
.eb-share-img img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.eb-share h2 { margin: 0 0 .5rem; }
.eb-share-links { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-top: 1rem; }
@media (max-width: 760px) { .eb-share { grid-template-columns: 1fr; } }
@media print { .eb-share { display: none; } }