/* training-mode.css - fetch-1865: the Training Mode icon above Crystal, the banner row in the brand bar and the page tint.
   Tokens only (color-mix of existing ones; no hex). Live Online reads --tm-slot to move up one slot while the icon is drawn. */
body:has(.trmd-fab:not([hidden])) { --tm-slot: calc(var(--control-height-touch) + var(--s-2)); }
.trmd-fab { position: fixed; z-index: 26; right: var(--s-3); bottom: calc(var(--s-3) + var(--control-height-touch) + var(--s-2)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); color: var(--ink); font-size: var(--t-sub); }
.trmd-fab[hidden], body:has(.crystal-page-guide__dock.is-docked, .wrap.w-bleed, .wrap.w-bleed-x) .trmd-fab { display: none; }
@media (max-width: 1099px) { body:has(#content [data-staffing-plan]) .trmd-fab { display: none; } }
@media (max-width: 899px) { body:has(.ulp--uni) .trmd-fab { display: none; } } /* the phone lesson frame (fetch-1858) takes the whole screen: no floating element, Live Online included (university-courses.css) */
@media (max-width: 900px) { body.has-rail .trmd-fab { bottom: calc(2 * var(--control-height-touch) + var(--s-3) + 2 * var(--s-2) + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 640px) {
  body:has(.pdx-savebar:not(:empty)) .trmd-fab, body:has(:is(input, textarea, select, [contenteditable="true"]):focus:not(.trmd-fab *)) .trmd-fab { display: none; }
  body:has(#verPill) .trmd-fab { bottom: calc(18px + 4.5rem + var(--s-2)); }
  body.has-rail:has(#verPill) .trmd-fab { bottom: calc(var(--control-height-touch) + 2 * var(--s-3) + 4.5rem + var(--s-2) + env(safe-area-inset-bottom, 0px)); }
}
.trmd-row { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.trmd-wrap { position: relative; display: inline-grid; place-items: center; width: var(--control-height-touch); height: var(--control-height-touch); }
.trmd-fab .trmd-btn { position: relative; z-index: 1; width: var(--control-height-touch); height: var(--control-height-touch); padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-card); color: var(--navy); box-shadow: 0 3px 12px rgb(0 0 0 / .12); }
.trmd-fab .trmd-btn:hover, .trmd-fab .trmd-btn:focus-visible { border-color: var(--gold); }
.trmd-ring { position: absolute; inset: -3px; border-radius: 50%; opacity: .6; pointer-events: none;
  background: conic-gradient(from 0deg, var(--bad-fg), var(--warn-fg), var(--brand-gold-light), var(--ok-fg), var(--info-fg), var(--bad-fg));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), var(--navy) calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), var(--navy) calc(100% - 3px)); }
.trmd-fab.is-on .trmd-ring { opacity: 1; animation: trmd-spin 2.4s linear infinite; }
.trmd-fab.is-busy .trmd-ring { opacity: 1; animation: trmd-spin 1.1s linear infinite; }
.trmd-fab.is-on .trmd-btn { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-gold-light) 45%, transparent), 0 3px 12px rgb(0 0 0 / .14); }
@keyframes trmd-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .trmd-fab.is-on .trmd-ring, .trmd-fab.is-busy .trmd-ring { animation: none; inset: -4px; } }
.trmd-pill { padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: 999px; background: var(--surface-card); color: var(--navy); font-weight: 600; white-space: nowrap; box-shadow: 0 3px 12px rgb(0 0 0 / .1); }
.trmd-pill[hidden] { display: none; }
.trmd-note, .trmd-pop { box-sizing: border-box; width: min(22rem, calc(100vw - 2 * var(--s-3))); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-card); color: var(--ink); box-shadow: 0 6px 24px rgb(0 0 0 / .14); overflow-wrap: anywhere; }
.trmd-note[hidden], .trmd-pop[hidden] { display: none; }
.trmd-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.trmd-note > span { flex: 1 1 12rem; }
.trmd-note .btn, .trmd-pop .btn { min-height: var(--control-height-touch); }
.trmd-pop-t { margin: 0; color: var(--navy); font-size: var(--t-body); font-weight: 700; }
.trmd-pop-p { margin: var(--s-2) 0 0; color: var(--muted); }
.trmd-pop-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.trmd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* fetch-1868 (phase 3): the not-sent card above the icon, and the preview of what would have gone */
.trmd-sent { box-sizing: border-box; width: min(24rem, calc(100vw - 2 * var(--s-3))); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-left: 4px solid var(--info-fg); border-radius: var(--r-l); background: var(--surface-card); color: var(--ink); box-shadow: 0 6px 24px rgb(0 0 0 / .14); overflow-wrap: anywhere; }
.trmd-sent[hidden] { display: none; }
.trmd-sent-t { margin: 0; color: var(--info-fg); font-size: var(--t-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.trmd-sent-p { margin: var(--s-1) 0 0; font-size: var(--t-body); line-height: 1.45; }
.trmd-sent-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.trmd-sent-acts .btn { min-height: var(--control-height-touch); }
.trmd-preview { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: color-mix(in srgb, var(--navy-dark) 92%, transparent); }
.trmd-preview-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); color: var(--surface-card); font-size: var(--t-body); }
.trmd-preview-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trmd-preview-frame { flex: 1 1 auto; width: min(52rem, 100%); margin: 0 auto var(--s-4); border: 0; border-radius: var(--r-l) var(--r-l) 0 0; background: var(--surface-card); }
/* on: the page tint and the banner row inside the brand bar (the bar is sticky on every width and measured into --phone-nav-height) */
body.is-training-mode { background: color-mix(in srgb, var(--info-bg) 55%, var(--bg)); }
body.is-training-mode .brandbar { flex-wrap: wrap; }
body.is-training-mode .brandbar::before { content: "Training Mode \00b7  Nothing here is real \00b7  Tap the spinning icon to go back"; flex: 0 0 100%; order: -1; box-sizing: border-box; margin: 0 0 var(--s-1); padding: 2px var(--s-3); border-radius: var(--r-m); background: var(--info-bg); color: var(--info-fg); font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { body.is-training-mode .brandbar::before { content: "Training Mode \00b7  Nothing here is real"; } }
.trmd-ended .trmd-ended-p { margin: var(--s-3) 0 var(--s-4); color: var(--muted); font-size: var(--t-body); line-height: 1.45; }
.trmd-ended #trainingModeEndedNote { color: var(--brand-pink); }
@media print { .trmd-fab { display: none; } }