/* 3DML Members: forms and lists on /join/ and /my-account/. Colours and fonts come from the course's tokens. */
.tdml-m--narrow { max-width: 620px; }
.tdml-m__card { padding: clamp(24px, 4vw, 40px); background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow); border-top: 6px solid var(--color-golden); text-align: left; }
.tdml-m__card h1 { margin: 0 0 8px; font-size: var(--text-h2); }
.tdml-m__price { margin-left: 8px; font-size: .7em; color: var(--color-hazard-deep); white-space: nowrap; }
.tdml-m__desc { margin: 0 0 var(--space-18); color: var(--color-text-muted); }
.tdml-m__form { display: grid; gap: 14px; margin-top: var(--space-18); }
.tdml-m__form label { display: grid; gap: 6px; font: 700 14px/1.3 var(--font-heading); color: var(--color-midnight); }
.tdml-m__form input:not([type=radio]):not([type=checkbox]), .tdml-m__form textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); font: 400 16px/1.4 var(--font-body); }
.tdml-m__form input:focus, .tdml-m__form textarea:focus { outline: var(--focus-ring); border-color: var(--color-midnight); }
.tdml-m__form small { font: 400 13px/1.4 var(--font-body); color: var(--color-text-muted); }
.tdml-m__form .lc-btn { justify-self: start; }
.tdml-m__form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.tdml-m__form legend { margin-bottom: 6px; font: 700 15px/1.3 var(--font-heading); color: var(--color-midnight); }
.tdml-m__radio { display: flex !important; align-items: center; gap: 10px; font-weight: 400 !important; font-family: var(--font-body) !important; }
.tdml-m__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.tdml-m__notice { margin: var(--space-18) 0 0; padding: 12px 16px; border-left: 5px solid var(--color-golden); background: #fffaf0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tdml-m__sim { margin: 0; padding: 12px 16px; background: var(--color-offwhite); border-radius: var(--radius-sm); font-size: 14px; color: var(--color-text-muted); }
.tdml-m__cohort { padding: 12px 16px; background: var(--color-offwhite); border-radius: var(--radius-sm); }
.tdml-m__who, .tdml-m__small { font-size: 14px; color: var(--color-text-muted); }
.tdml-m__list { margin-top: var(--space-18); display: grid; gap: 10px; }
.tdml-m__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding: 16px 20px; background: #fff; border: var(--border-hair); border-radius: var(--radius-md); }
.tdml-m__item.is-ended { opacity: .6; }
.tdml-m__item small { color: var(--color-text-muted); }
.tdml-m__tag { margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-bg-alt); font: 700 12px/1.4 var(--font-heading); }
.tdml-m__item.is-active .tdml-m__tag { background: var(--color-midnight); color: var(--color-golden); }
.tdml-m__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 14px; }
.tdml-m__cohort-box { margin-top: var(--space-18); padding: 16px 20px; background: #fff; border: var(--border-hair); border-radius: var(--radius-md); overflow-x: auto; }
.tdml-m__cohort-box code { font-size: 12px; word-break: break-all; }
.tdml-m__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tdml-m__table th, .tdml-m__table td { padding: 8px 6px; border-bottom: var(--border-hair); text-align: left; }
.tdml-m__bar { display: inline-block; width: 90px; height: 8px; margin-right: 6px; border-radius: 99px; background: var(--color-bg-alt); overflow: hidden; vertical-align: middle; }
.tdml-m__bar span { display: block; height: 100%; background: var(--color-golden); }
.tdml-m__buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tdml-m__quiet { background: transparent; color: var(--color-text-muted); border: 1.5px solid var(--color-border-strong); box-shadow: none; }
.tdml-m__quiet:hover { color: var(--color-hazard-deep); border-color: var(--color-hazard-deep); background: transparent; }

/* Lead teacher's students page (templates/students.php) */
.tdml-m__group { margin-top: var(--space-36); padding: clamp(18px, 3vw, 28px); background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow); }
.tdml-m__group-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.tdml-m__group-head h2 { margin: 0; font-size: var(--text-h3); }
.tdml-m__seats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; }
.tdml-m__seatbar { display: inline-block; width: 120px; height: 10px; border-radius: 99px; background: var(--color-bg-alt); overflow: hidden; }
.tdml-m__seatbar span { display: block; height: 100%; background: var(--color-golden); }
.tdml-m__buy { padding: 8px 14px; font-size: 14px; }
.tdml-m__group .tdml-m__card { margin-top: var(--space-18); box-shadow: none; border: var(--border-hair); border-top: 4px solid var(--color-golden); }
.tdml-m__group h3 { margin: 0; font-size: 18px; } .tdml-m__group h3 small { font: 400 14px/1.4 var(--font-body); color: var(--color-text-muted); }
.tdml-m__row--3 { grid-template-columns: 1fr 1fr 1.4fr; }
@media (max-width: 560px) { .tdml-m__row--3 { grid-template-columns: 1fr; } }
.tdml-m__form details summary { cursor: pointer; color: var(--color-link); font-size: 14px; }
.tdml-m__form details textarea { margin-top: 8px; }
.tdml-m__group .tdml-m__table { margin-top: var(--space-18); }

.tdml-m__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tdml-m__tiers summary { cursor: pointer; color: var(--color-link); font-size: 14px; }
/* Panels on the course home (inc/panels.php) */
.tdml-panel { margin-top: var(--space-24); padding: clamp(20px, 3vw, 32px); background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow); border-top: 6px solid var(--color-golden); }
.tdml-panel h2 { margin: 0 0 12px; font-size: var(--text-h3); }
.tdml-panel h3 { margin: var(--space-24) 0 8px; font-size: 19px; }
.tdml-panel h4 { margin: 18px 0 6px; font-size: 16px; }
.tdml-panel p, .tdml-panel li { max-width: 72ch; }
.tdml-panel__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-24); }
.tdml-panel__enrol { padding: 18px 20px; background: var(--color-offwhite); border-radius: var(--radius-sm); }
.tdml-panel__enrol h3 { margin-top: 0; }
.tdml-panel__small { font-size: 14px; color: var(--color-text-muted); }
.tdml-panel details { margin-top: var(--space-18); } .tdml-panel summary { cursor: pointer; font: 700 16px/1.4 var(--font-heading); color: var(--color-link); }
.tdml-panel__try { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.tdml-panel .lc-offers { margin-top: var(--space-18); }

/* One page width everywhere: the narrow pages (login, checkout, cancel) sit in the same 1200px frame, with their
   card centred at a comfortable width. */
.tdml-m--narrow { max-width: var(--container); }
.tdml-m--narrow > .tdml-m__card { max-width: 620px; margin-left: auto; margin-right: auto; }

.tdml-m__agreement { margin-top: var(--space-36); padding: 16px 20px; background: #fff; border: var(--border-hair); border-radius: var(--radius-md); }
.tdml-m__inline { margin: 0; }
.tdml-m__linkbtn { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--color-link); text-decoration: underline; cursor: pointer; }
.tdml-m__stripe { margin-top: var(--space-18); min-height: 40px; }

/* Teacher dashboard: following the students (FR-11, 27 Sept 2026; the mockup David approved, in the site's light style) */
.tdml-t__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; }
.tdml-t__stats > div { background: #fff; border-radius: var(--radius-md, 8px); box-shadow: var(--shadow); padding: 14px 16px; }
.tdml-t__stats strong { display: block; font: 700 28px/1.1 var(--font-heading); color: var(--color-midnight); font-variant-numeric: tabular-nums; }
.tdml-t__stats span { font-size: 14px; color: var(--color-text-muted); }
.tdml-t__stats .is-alert strong { color: var(--color-hazard-deep); }
.tdml-t__two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; margin-bottom: 18px; }
.tdml-t__two h3, .tdml-t__h { margin: 0 0 10px; font-size: 19px; }
.tdml-t__h { margin-top: 28px; }
.tdml-t__attn { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tdml-t__attn li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; font-size: 15px; }
.tdml-t__hard { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tdml-t__hard li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: baseline; font-size: 15px; }
.tdml-t__hard small { display: block; color: var(--color-text-muted); font-size: 13px; }
.tdml-t__pct { font: 700 18px/1 var(--font-heading); color: var(--color-hazard-deep); text-align: right; font-variant-numeric: tabular-nums; }
.tdml-t__pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font: 700 12px/1.6 var(--font-heading); white-space: nowrap; }
.tdml-t__pill--done { background: var(--color-lime); color: var(--color-midnight); }
.tdml-t__pill--ok { background: #EEF7DE; color: #4E7A12; }
.tdml-t__pill--stuck { background: #FDEDE3; color: var(--color-hazard-deep); }
.tdml-t__pill--idle { background: #EFEFF2; color: #5C5C64; }
.tdml-t__nudge { font: 700 13px/1 var(--font-heading); padding: 7px 11px; border-radius: 6px; border: 1.5px solid var(--color-action); background: #fff; color: var(--color-hazard-deep); cursor: pointer; white-space: nowrap; }
.tdml-t__nudge:hover { background: #FDEDE3; }
.tdml-t__nudge[disabled] { border-color: var(--color-border); color: var(--color-text-muted); background: #fff; cursor: default; }
.tdml-t__tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin: 10px 0; }
.tdml-t__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tdml-t__chip { font: 700 13px/1 var(--font-heading); padding: 8px 12px; border-radius: 99px; border: 1px solid var(--color-border); background: #fff; color: var(--color-midnight); cursor: pointer; }
.tdml-t__chip[aria-pressed="true"] { background: var(--color-midnight); color: var(--color-golden); border-color: var(--color-midnight); }
.tdml-t__scroll { overflow-x: auto; }
.tdml-t__table { min-width: 820px; }
.tdml-t__table td small { display: block; color: var(--color-text-muted); font-size: 13px; }
.tdml-t__row { cursor: pointer; }
.tdml-t__row:hover td { background: var(--color-bg-alt, #F6F6F4); }
.tdml-t__row:focus-visible { outline: 3px solid var(--color-focus, #1B6FD8); outline-offset: -3px; }
.tdml-t__acts { white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.tdml-t__detail td { background: var(--color-bg-alt, #F6F6F4); }
.tdml-t__mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 18px; }
.tdml-t__mods > div { display: grid; grid-template-columns: 1fr 70px 36px; gap: 8px; align-items: center; font-size: 13px; }
.tdml-t__mods .tdml-m__bar { width: 100%; }
.tdml-t__v { text-align: right; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.tdml-m__bar.is-full > span { background: var(--color-lime); }
.tdml-t__grid { border-collapse: separate; border-spacing: 3px; font-size: 13px; min-width: 640px; }
.tdml-t__grid th { font: 700 12px/1 var(--font-heading); color: var(--color-text-muted); padding: 4px; }
.tdml-t__grid td:first-child, .tdml-t__grid th:first-child { text-align: left; white-space: nowrap; padding-right: 10px; }
.tdml-t__cell { display: block; min-width: 26px; height: 22px; border-radius: 4px; background: #EFEFF2; font: 700 11px/22px var(--font-heading); text-align: center; color: var(--color-midnight); }
.tdml-t__cell.is-done { background: var(--color-lime); }
.tdml-t__cell.is-part { background: var(--color-golden); }
.tdml-t__legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--color-text-muted); }
.tdml-t__legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: #EFEFF2; vertical-align: -2px; margin-right: 5px; }
.tdml-t__legend i.is-done { background: var(--color-lime); }
.tdml-t__legend i.is-part { background: var(--color-golden); }
.tdml-t__add { margin-top: 24px; }
.tdml-t__add > summary { cursor: pointer; list-style: none; }
.tdml-t__add > summary::-webkit-details-marker { display: none; }
.tdml-t__add > summary h3 { display: inline; font-size: 19px; }
.tdml-t__add > summary::after { content: " +"; font: 700 19px/1 var(--font-heading); color: var(--color-hazard-deep); }
.tdml-t__add[open] > summary::after { content: " −"; }
.tdml-t__dialog { border: 0; border-radius: 12px; padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.tdml-t__dialog::backdrop { background: rgba(14,14,15,.45); }
.tdml-t__dlg { padding: 22px; display: grid; gap: 12px; }
.tdml-t__dlg h2 { margin: 0; font-size: 22px; }
.tdml-t__dlg label { display: grid; gap: 5px; font: 700 13px/1.3 var(--font-heading); color: var(--color-text-muted); }
.tdml-t__dlg input, .tdml-t__dlg textarea { font: 15px/1.5 var(--font-body); padding: 9px 10px; border: 1px solid var(--color-border-strong); border-radius: 6px; width: 100%; }
.tdml-t__dlgacts { display: flex; justify-content: flex-end; gap: 12px; align-items: center; }
/* The module grid: easy to follow a row across (David, 27 Sept 2026) */
.tdml-t__grid { border-collapse: collapse; border-spacing: 0; width: 100%; background: #fff; border: var(--border-hair); border-radius: var(--radius-sm); }
.tdml-t__grid th, .tdml-t__grid td { padding: 6px 4px; text-align: center; border-bottom: var(--border-hair); }
.tdml-t__grid thead th { background: var(--color-bg-alt, #F6F6F4); }
.tdml-t__grid td:first-child, .tdml-t__grid th:first-child { text-align: left; padding-left: 12px; }
.tdml-t__grid tbody tr:nth-child(even) td { background: #FAFAF8; }
.tdml-t__grid tbody tr:hover td { background: #FFF6E0; }
.tdml-t__cell { margin: 0 auto; }
.tdml-t__dlgnote { margin: 0; padding: 10px 12px; background: #FFF6E0; border-left: 4px solid var(--color-golden); border-radius: 0 6px 6px 0; font-size: 14px; }