/* ============================================================ */
/* THL Theme — CPD Log + Certificate (page-cpd-log.php)         */
/* Self-contained (theme per-template convention). The shell    */
/* .phead/.kicker live in speaker.css (not global), so the bits  */
/* this page needs are redeclared here. Uses the global tokens.  */
/* ============================================================ */

/* ---- page head (local copy of the shell pattern) ------------- */
.phead.cpd-head { padding: 84px 48px 52px; background: radial-gradient(ellipse 60% 120% at 88% 0%, rgba(122,175,201,0.10) 0%, transparent 58%), linear-gradient(180deg, #16202e 0%, var(--bg-deep) 100%); border-bottom: 1px solid var(--line); }
.cpd-head .phead-inner { max-width: 1040px; margin: 0 auto; }
.cpd-head .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 14px; }
.cpd-head .kicker::before { content: ''; width: 26px; height: 1px; background: var(--blue); }
.cpd-head h1 { font-size: clamp(32px, 4vw, 50px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 14px; }
.cpd-head .lede { font-size: 15px; color: var(--t-mid); line-height: 1.7; max-width: 600px; }

/* ---- wrapper -------------------------------------------------- */
.cpd-wrap { max-width: 1040px; margin: 0 auto; padding: 56px 48px 88px; background: var(--bg); }

/* ---- empty / signed-out card --------------------------------- */
.cpd-empty { text-align: center; max-width: 520px; margin: 24px auto; padding: 48px 36px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 18px; }
.cpd-empty h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; }
.cpd-empty p { font-size: 14.5px; color: var(--t-mid); line-height: 1.65; margin-bottom: 24px; }
.cpd-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: var(--navy-deeper); padding: 14px 26px; border-radius: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; transition: all 0.3s var(--ease-out); }
.cpd-btn svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease-out); }
.cpd-btn:hover { background: var(--blue-bright); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(122,175,201,0.3); }
.cpd-btn:hover svg { transform: translateX(4px); }

/* ---- summary stats ------------------------------------------- */
.cpd-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 44px; }
.cpd-stat { background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; text-align: center; }
.cpd-stat .num { display: block; font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--t-strong); }
.cpd-stat .lbl { display: block; margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-soft); }

/* ---- year groups + table ------------------------------------- */
.cpd-yeargroup { margin-bottom: 40px; }
.cpd-yearhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.cpd-yearhead h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.015em; }
.cpd-yeartotal { font-size: 12px; font-weight: 600; color: var(--blue-bright); letter-spacing: 0.02em; }

.cpd-table { display: flex; flex-direction: column; }
/* Course row carries NO bottom border: it groups with its reflection toggle below as
   one lecture unit, and the single separator line sits at the bottom of .cpd-reflect.
   (thead keeps its own border via .cpd-thead.) */
.cpd-tr { display: grid; grid-template-columns: 1fr 130px 80px 150px; gap: 18px; align-items: center; padding: 15px 6px 5px; }
.cpd-thead { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.cpd-thead span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-soft); }
.cpd-thead span:nth-child(3), .cpd-tr .cpd-hrs { text-align: center; }
.cpd-course a { color: var(--t-strong); text-decoration: none; font-weight: 600; font-size: 14.5px; line-height: 1.4; transition: color 0.2s var(--ease); }
.cpd-course a:hover { color: var(--blue-bright); }
.cpd-course { font-size: 14.5px; color: var(--t-mid); font-weight: 600; }
.cpd-date { font-size: 13px; color: var(--t-soft); }
.cpd-hrs { font-size: 14px; color: var(--t-mid); font-weight: 700; }
.cpd-certlink { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--blue-bright); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s var(--ease), color 0.2s var(--ease); }
.cpd-certlink::after { content: '→'; transition: transform 0.2s var(--ease); }
.cpd-certlink:hover { color: var(--t-strong); }
.cpd-certlink:hover::after { transform: translateX(3px); }

/* ---- inline reflection editor (per completed lecture) -------- */
/* The reflect toggle sits tight under its course (small top padding) as part of the
   same unit; the bottom border is the single line that separates one lecture from the
   next, so the list stays easy to skim. */
.cpd-reflect { border-bottom: 1px solid var(--line); }
.cpd-reflect-head { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 3px 6px 13px; background: none; border: 0; cursor: pointer; color: var(--t-soft); font-family: inherit; font-size: 12px; transition: color 0.2s var(--ease); }
.cpd-reflect-head:hover { color: var(--t-mid); }
.cpd-reflect-ic { display: inline-flex; flex-shrink: 0; color: var(--blue-bright); }
.cpd-reflect-ic svg { width: 14px; height: 14px; }
.cpd-reflect-title { font-weight: 600; letter-spacing: 0.02em; flex-shrink: 0; }
.cpd-reflect.has .cpd-reflect-title { color: var(--blue-bright); }
.cpd-reflect-preview { flex: 1; min-width: 0; color: var(--t-soft); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpd-reflect-chev { margin-left: auto; flex-shrink: 0; display: inline-flex; transition: transform 0.25s var(--ease); }
.cpd-reflect-chev svg { width: 14px; height: 14px; }
.cpd-reflect.is-open .cpd-reflect-chev { transform: rotate(180deg); }
.cpd-reflect-body { padding: 4px 6px 18px; }
.cpd-reflect-prompt { font-size: 12.5px; color: var(--t-mid); line-height: 1.55; margin-bottom: 10px; }
.cpd-reflect-text { width: 100%; min-height: 92px; resize: vertical; background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: 13.5px; line-height: 1.6; color: var(--t-strong); outline: none; transition: border-color 0.2s var(--ease); }
.cpd-reflect-text:focus { border-color: var(--blue); }
.cpd-reflect-text::placeholder { color: var(--t-soft); }
.cpd-reflect-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.cpd-reflect-save { padding: 10px 20px; font-size: 11.5px; }
.cpd-reflect-status { font-size: 12px; color: var(--t-soft); }
.cpd-reflect-status.is-ok { color: #7fcf9b; }
.cpd-reflect-status.is-error { color: #e6a17a; }

/* ---- footer pace block --------------------------------------- */
.cpd-foot { margin-top: 32px; }
.cpd-pace { font-size: 12.5px; color: var(--t-soft); line-height: 1.7; background: rgba(255,255,255,0.025); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; }
.cpd-pace strong { color: var(--t-mid); font-weight: 600; display: block; margin-bottom: 4px; }
.cpd-pace-meta { display: block; margin-top: 8px; font-size: 11.5px; }

/* ---- responsive (log) ---------------------------------------- */
@media (max-width: 760px) {
	.phead.cpd-head { padding: 56px 24px 40px; }
	.cpd-wrap { padding: 40px 24px 64px; }
	.cpd-summary { grid-template-columns: 1fr; gap: 12px; }
	.cpd-thead { display: none; }
	.cpd-tr { grid-template-columns: 1fr auto; gap: 6px 14px; padding: 16px 4px; }
	.cpd-course { grid-column: 1 / -1; }
	.cpd-date { font-size: 12px; }
	.cpd-hrs { text-align: left; }
	.cpd-hrs::before { content: 'CPD: '; font-weight: 400; color: var(--t-soft); }
	.cpd-cell-cert { grid-column: 1 / -1; margin-top: 4px; }
}

/* ---- registration-number field + flash ----------------------- */
.cpd-flash { background: rgba(122,175,201,0.12); border: 1px solid var(--blue); border-radius: 12px; padding: 14px 20px; margin-bottom: 24px; font-size: 13.5px; font-weight: 600; color: var(--blue-bright); }
.cpd-regcard { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; margin-bottom: 44px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; scroll-margin-top: 90px; }
.cpd-regcard.is-missing { background: rgba(122,175,201,0.07); border-color: rgba(122,175,201,0.4); }
.cpd-reg-text { display: flex; flex-direction: column; gap: 6px; min-width: 260px; flex: 1 1 320px; }
.cpd-reg-lbl { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--t-strong); }
.cpd-reg-hint { font-size: 12.5px; color: var(--t-soft); line-height: 1.55; }
.cpd-reg-row { display: flex; align-items: center; gap: 10px; flex: 0 1 360px; }
.cpd-reg-input { flex: 1 1 auto; min-width: 160px; background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 14px; font-size: 14px; color: var(--t-strong); font-family: inherit; transition: border-color 0.2s var(--ease); }
.cpd-reg-input:focus { outline: none; border-color: var(--blue); }
.cpd-reg-input::placeholder { color: var(--t-soft); }
.cpd-reg-save { padding: 12px 22px; }

/* ============================================================ */
/* CERTIFICATE (?cert=SERIAL)                                   */
/* on-screen preview of the signed-off design; the PDF is the   */
/* download. Light sheet, mirrors certificate-mockup.html.       */
/* ============================================================ */
.cpd-certpage { max-width: 880px; margin: 0 auto; padding: 40px 48px 80px; background: var(--bg); }
.cpd-cert-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.cpd-textlink { color: var(--t-mid); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: color 0.2s var(--ease); }
.cpd-textlink:hover { color: var(--blue-bright); }
.cpd-print { padding: 12px 22px; }
.cpd-cert-regnote { font-size: 13px; color: var(--t-mid); background: rgba(122,175,201,0.07); border: 1px solid rgba(122,175,201,0.4); border-radius: 10px; padding: 12px 18px; margin-bottom: 22px; line-height: 1.55; }
.cpd-cert-regnote a { color: var(--blue-bright); font-weight: 700; text-decoration: none; }
.cpd-cert-regnote a:hover { text-decoration: underline; }

/* the certificate sheet — light */
.cpd-cert { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.cpd-cert-frame { border: 1px solid rgba(45,55,72,0.25); border-radius: 6px; padding: 48px 54px 38px; text-align: center; color: #2d3748; }
.cpd-cert-top { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cpd-cert-logo { height: 30px; width: auto; }
.cpd-cert-brand { font-size: 19px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #2d3748; }
.cpd-cert-kicker { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: #3f7191; margin-top: 22px; }
.cpd-cert-kicker span { width: 56px; height: 1px; background: #7aafc9; }
.cpd-cert-awarded { font-size: 12.5px; color: #535f6e; margin: 22px 0 0; }
.cpd-cert-name { font-size: clamp(30px, 4.6vw, 42px); font-weight: 300; letter-spacing: 0.005em; color: #2d3748; margin: 6px 0 0; line-height: 1.12; }
.cpd-cert-awarded + .cpd-cert-name { margin-top: 6px; }
.cpd-cert-course { font-size: clamp(18px, 2.3vw, 21px); font-weight: 700; color: #2d3748; margin: 6px auto 0; max-width: 580px; line-height: 1.3; }
.cpd-cert-speaker { font-size: 13.5px; color: #535f6e; margin: 9px 0 0; }
.cpd-cert-speaker strong { color: #2d3748; font-weight: 700; }
.cpd-cert-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 26px 0 0; border-top: 1px solid rgba(45,55,72,0.16); border-bottom: 1px solid rgba(45,55,72,0.16); }
.cpd-cert-metaitem { padding: 15px 10px; }
.cpd-cert-metaitem + .cpd-cert-metaitem { border-left: 1px solid rgba(45,55,72,0.16); }
.cpd-cert-metaitem .lbl { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #7d8794; margin-bottom: 5px; }
.cpd-cert-metaitem .val { display: block; font-size: 14px; font-weight: 700; color: #2d3748; }
.cpd-cert-aimsh { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #7d8794; margin-top: 24px; }
.cpd-cert-aims { list-style: none; counter-reset: aim; max-width: 620px; margin: 12px auto 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 7px; }
.cpd-cert-aims li { counter-increment: aim; position: relative; padding-left: 22px; font-size: 11px; color: #535f6e; line-height: 1.55; }
.cpd-cert-aims li::before { content: counter(aim) ')'; position: absolute; left: 0; top: 0; font-weight: 700; color: #3f7191; font-size: 10px; }
.cpd-cert-out { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; margin-top: 22px; }
.cpd-cert-out:has(.cpd-cert-outbox:only-child) { grid-template-columns: 1fr; }
.cpd-cert-outbox { border: 1px solid rgba(45,55,72,0.16); border-radius: 8px; padding: 12px 16px; text-align: center; }
.cpd-cert-outbox .k { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #7d8794; margin-bottom: 4px; }
.cpd-cert-outbox .v { display: block; font-size: 12.5px; font-weight: 700; color: #2d3748; }
.cpd-cert-paceblk { display: flex; align-items: center; gap: 20px; border: 1px solid rgba(45,55,72,0.16); border-radius: 8px; padding: 15px 20px; margin-top: 22px; text-align: left; }
.cpd-cert-pacelogo { height: 58px; width: auto; flex-shrink: 0; }
.cpd-cert-paceblk p { font-size: 10.5px; color: #535f6e; line-height: 1.6; margin: 0; }
.cpd-cert-paceblk strong { color: #2d3748; font-weight: 700; }
.cpd-cert-legal { font-size: 9.5px; color: #7d8794; line-height: 1.6; max-width: 620px; margin: 22px auto 0; }
.cpd-cert-site { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #2d3748; margin: 12px 0 0; }

@media (max-width: 760px) {
	.cpd-certpage { padding: 28px 16px 60px; }
	.cpd-cert { padding: 10px; }
	.cpd-cert-frame { padding: 34px 22px 28px; }
	.cpd-cert-meta { grid-template-columns: 1fr; }
	.cpd-cert-metaitem + .cpd-cert-metaitem { border-left: 0; border-top: 1px solid rgba(45,55,72,0.16); }
	.cpd-cert-out { grid-template-columns: 1fr; }
	.cpd-cert-paceblk { flex-direction: column; text-align: center; }
	.cpd-regcard { flex-direction: column; align-items: stretch; }
	/* In a column flex, a child's flex-basis is its HEIGHT — so the row layout's
	   320px/360px width bases would force tall boxes (a big void above the input).
	   Reset both children to content height. */
	.cpd-reg-text { flex: 0 1 auto; }
	.cpd-reg-row { flex-basis: auto; }
}

/* ---- print fallback: isolate just the certificate sheet ------ */
/* The PDF download is the primary path; this keeps Ctrl+P clean. */
@media print {
	body * { visibility: hidden !important; }
	#thl-cert, #thl-cert * { visibility: visible !important; }
	.nav, .footer, .annc, .cpd-cert-actions, .cpd-cert-regnote, .thl-modal, #signinModal { display: none !important; }
	#thl-cert { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; padding: 0; }
	.cpd-cert { box-shadow: none; padding: 0; }
	.cpd-certpage { padding: 0; }
	@page { size: A4 portrait; margin: 0; }
}

/* ============================================================ */
/* CPD LOG REDESIGN (2 Jul 2026) — at-a-glance band, milestones */
/* strip, filter toolbar, speaker avatars, prominent years.     */
/* Additive to the component language above (a few base rules   */
/* are deliberately re-declared later here to win).             */
/* ============================================================ */

/* ---- at-a-glance band (replaces the flat 3 tiles) ------------ */
.cpd-glance { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px 44px; align-items: center; background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px 24px; margin-bottom: 26px; }
.cpd-glance-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 18px; }
.cpd-glance .cpd-stat { background: none; border: 0; border-radius: 0; padding: 0; text-align: left; }
.cpd-glance .cpd-stat .num { font-size: clamp(30px, 3.6vw, 42px); }
.cpd-glance .cpd-stat .lbl { text-align: left; }
.cpd-stat .cmp { display: block; margin-top: 6px; font-size: 11.5px; color: var(--t-soft); }
.cpd-stat .cmp b { color: var(--blue-bright); font-weight: 600; }
.cpd-bars { display: flex; align-items: flex-end; gap: 14px; height: 104px; }
.cpd-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.cpd-bar i { display: block; width: 100%; max-width: 74px; background: linear-gradient(180deg, rgba(122,175,201,0.75), rgba(122,175,201,0.28)); border-radius: 5px 5px 2px 2px; min-height: 4px; }
.cpd-bar.is-now i { background: linear-gradient(180deg, var(--blue-bright), rgba(122,175,201,0.45)); }
.cpd-bar b { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--t-soft); }
.cpd-bar span { font-size: 10.5px; color: var(--t-mid); font-weight: 600; margin-bottom: -2px; }

/* ---- milestones strip (achievements — behind an enable flag) -- */
.cpd-miles { background: rgba(255,255,255,0.025); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px 22px; margin-bottom: 40px; }
.cpd-miles-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cpd-miles-head h2 { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t-soft); }
.cpd-miles-head span { font-size: 11.5px; color: var(--t-soft); }
.cpd-miles-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cpd-mile { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.03); border-radius: 999px; padding: 8px 14px 8px 10px; font-size: 12px; font-weight: 600; color: var(--t-mid); }
.cpd-mile svg { width: 13px; height: 13px; color: var(--blue-bright); flex-shrink: 0; }
.cpd-mile.is-fact { border-color: rgba(122,175,201,0.45); background: rgba(122,175,201,0.08); color: var(--blue-bright); }
.cpd-mile small { font-weight: 400; color: var(--t-soft); font-size: 11px; }
.cpd-next { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cpd-next-card { border: 1px dashed var(--line-2); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 7px; }
.cpd-next-card .k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--t-mid); }
.cpd-next-card .k em { font-style: normal; color: var(--t-soft); font-weight: 600; }
.cpd-next-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.07); overflow: hidden; }
.cpd-next-bar i { display: block; height: 100%; background: var(--blue); border-radius: 2px; }
.cpd-next-card .s { font-size: 10.5px; color: var(--t-soft); }

/* ---- filter / sort toolbar ----------------------------------- */
/* Not sticky (2 Jul 2026): sticky made the mobile view unusable and wasn't needed. */
.cpd-toolbar { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 34px; display: flex; flex-direction: column; gap: 10px; }
.cpd-toolbar-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cpd-search { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); border-radius: 8px; padding: 0 12px; }
.cpd-search svg { width: 14px; height: 14px; color: var(--t-soft); flex-shrink: 0; }
.cpd-search input { flex: 1; background: none; border: 0; outline: none; color: var(--t-strong); font-family: inherit; font-size: 13px; padding: 10px 0; min-width: 0; }
.cpd-search input::placeholder { color: var(--t-soft); }
.cpd-select { background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); border-radius: 8px; color: var(--t-mid); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 10px 12px; outline: none; cursor: pointer; max-width: 240px; }
.cpd-select:focus { border-color: var(--blue); }
.cpd-select option { background: var(--bg-elev); color: var(--t-strong); }
.cpd-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cpd-chip { border: 1px solid var(--line-2); background: none; color: var(--t-mid); border-radius: 999px; padding: 7px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; font-family: inherit; cursor: pointer; transition: all 0.2s var(--ease); }
.cpd-chip:hover { color: var(--t-strong); border-color: rgba(255,255,255,0.3); }
.cpd-chip.is-on { background: var(--blue); border-color: var(--blue); color: var(--navy-deeper); }
.cpd-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--t-mid); cursor: pointer; margin-left: auto; user-select: none; }
.cpd-check input { accent-color: var(--blue); width: 14px; height: 14px; cursor: pointer; }
.cpd-results { display: none; font-size: 12.5px; font-weight: 600; color: var(--blue-bright); padding: 2px 4px 0; }
.cpd-results a { color: var(--t-soft); font-weight: 600; margin-left: 10px; font-size: 12px; }
.cpd-wrap.is-filtering .cpd-results { display: block; }
.cpd-wrap.is-filtering .cpd-yeartotal { display: none; }
.cpd-noresults { display: none; text-align: center; max-width: 520px; margin: 24px auto; padding: 42px 36px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 18px; }
.cpd-noresults.show { display: block; }
.cpd-noresults h2 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.cpd-noresults p { font-size: 13.5px; color: var(--t-mid); }
.cpd-noresults p a { color: var(--blue-bright); font-weight: 700; }
.cpd-item.hide, .cpd-yeargroup.hide { display: none; }

/* ---- prominent year headings --------------------------------- */
.cpd-yearhead h2 { font-size: clamp(30px, 3.6vw, 42px); letter-spacing: -0.025em; line-height: 1; display: inline-flex; align-items: center; gap: 14px; }
.cpd-yearhead h2::after { content: ''; width: 30px; height: 3px; border-radius: 2px; background: var(--blue); opacity: 0.7; }

/* ---- row: speaker avatar + sub-line + chips + per-row PDF ----- */
.cpd-course { display: flex; align-items: center; gap: 13px; min-width: 0; }
.cpd-ava { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(145deg, #27394f, #16202e); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--blue-bright); overflow: hidden; }
.cpd-ava img { width: 100%; height: 100%; object-fit: cover; }
.cpd-course-txt { min-width: 0; }
.cpd-course-sub { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.cpd-course-sub .sp { font-size: 11.5px; color: var(--t-soft); }
.cpd-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-soft); border: 1px solid var(--line-2); border-radius: 5px; padding: 2.5px 7px; white-space: nowrap; }
.cpd-tag--reg { color: rgba(168,200,219,0.8); border-color: rgba(122,175,201,0.35); }
.cpd-cell-cert { display: flex; align-items: center; gap: 14px; }
.cpd-pdf { display: inline-flex; align-items: center; color: var(--t-soft); transition: color 0.2s var(--ease); }
.cpd-pdf:hover { color: var(--blue-bright); }
.cpd-pdf svg { width: 15px; height: 15px; }

/* ---- certificate view: verification serial + LinkedIn -------- */
.cpd-cert-verify { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; padding: 12px 18px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 10px; }
.cpd-cert-serial { font-size: 12px; color: var(--t-soft); }
.cpd-cert-serial b { color: var(--t-mid); font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }
.cpd-linkedin { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--blue-bright); }
.cpd-linkedin svg { width: 15px; height: 15px; }

/* ---- redesign responsive ------------------------------------- */
@media (min-width: 761px) {
	/* Wider cert cell for "View certificate" + the PDF icon; tighter date/hours. */
	.cpd-tr { grid-template-columns: 1fr 108px 64px 168px; }
}
@media (max-width: 760px) {
	.cpd-glance { grid-template-columns: 1fr; }
	.cpd-glance-stats { grid-template-columns: 1fr; gap: 16px; }
	.cpd-check { margin-left: 0; }
}