/* ==========================================================================
   McHub Trainer - chrome
   --------------------------------------------------------------------------
   Light, like the rest of McHub. The app is light-only by design
   (system.css says so explicitly: many pages hardcode light backgrounds in
   inline <style>, so flipping the variables would clash), and a dark player
   wrapped around a light screen looked like a different product.

   This styles the SHELF, the PLAYER and the engine's overlay. Everything is
   prefixed .tr- / .trs- because the replica loads the real app.css alongside
   it and the two must not collide.

   Icons are Material Icons, the same set the app uses. No emoji.
   ========================================================================== */

.trainer-page {
  margin: 0;
  background: #F7F8FA;
  color: #1F2430;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
}

/* ---------------------------------------------------------------- top bar */

.tr-top {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #E6E8EC;
  position: sticky; top: 0; z-index: 30;
}
.tr-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: #5B6473; text-decoration: none; font-size: 13.5px;
  padding: 7px 12px 7px 8px; border-radius: 8px; border: 1px solid #E6E8EC;
  background: #fff;
}
.tr-back:hover { background: #F0F1F3; color: #1F2430; }
.tr-back .material-icons { font-size: 18px; }
.tr-top-title { font-size: 15.5px; font-weight: 650; color: #1F2430; letter-spacing: -.01em; }
.tr-top-sub { font-size: 12px; color: #8A93A3; }
.tr-top-spacer { flex: 1; }

.tr-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 999px; text-transform: uppercase;
}
.tr-badge.is-review    { background: #FCF1DE; color: #8A5000; }
.tr-badge.is-stale     { background: #FCE9EA; color: #A3272C; }
.tr-badge.is-unstamped { background: #E7EEFD; color: #1B4FA8; }
.tr-badge.is-broken    { background: #FCE9EA; color: #A3272C; }
.tr-badge.is-private   { background: #F2F3F5; color: #5B6473; }

/* ------------------------------------------------- capability notice */

/* A video about something this workspace has not switched on still plays -
   that is often how somebody finds out the feature exists. What it must not do
   is demonstrate a button they do not have without saying so. */
.tr-notice {
  max-width: 1280px; margin: 14px auto 0; padding: 0 20px;
}
.tr-notice-inner {
  display: flex; align-items: flex-start; gap: 10px;
  background: #FDF4E7; border: 1px solid #F0D6AC; color: #7A4B00;
  border-radius: 10px; padding: 11px 15px; font-size: 13px; line-height: 1.5;
}
.tr-notice-inner .material-icons { font-size: 19px; color: #E08600; flex-shrink: 0; }
.tr-notice b { font-weight: 700; }

.trs-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: #FDF4E7; color: #7A4B00; border: 1px solid #F0D6AC;
  border-radius: 999px; padding: 2px 8px; font-size: 10.5px; font-weight: 700;
  margin-top: 10px;
}
.trs-tag .material-icons { font-size: 13px; }

/* ------------------------------------------------------------------ stage */

/* A FIXED logical frame, scaled to fit. Every lesson is authored against these
   exact dimensions, so a ring that clears its container here clears it
   everywhere, and the ring audit has one geometry to measure against. */
.tr-stage-wrap { display: flex; justify-content: center; padding: 20px 20px 0; }
.tr-stage-fit {
  position: relative;
  width: 1280px; height: 760px;
  transform-origin: top center;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 18px 50px rgba(16,24,40,.14);
}
.tr-stage {
  position: relative;
  width: 1280px; height: 760px;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  color: #1F2430;
  font-size: 14px;
}

/* ---------------------------------------------------------------- overlay */

.tr-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 9000; }

.tr-cursor {
  position: absolute; top: 0; left: 0;
  width: 26px; height: 26px;
  transform: translate(-60px, -60px);
  transition: transform 520ms cubic-bezier(.22,.61,.36,1);
  opacity: 0;
  filter: drop-shadow(0 2px 5px rgba(16,24,40,.35));
}
.tr-cursor.is-live { opacity: 1; }
.tr-cursor svg { display: block; }

.tr-cursor-ripple {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(237,66,54,.42);
  transform: scale(0); opacity: 0;
}
.tr-cursor.is-clicking .tr-cursor-ripple { animation: tr-ripple 460ms ease-out; }
@keyframes tr-ripple {
  0%   { transform: scale(0);   opacity: .9; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* The ring: a box-shadow spreading 7px OUTSIDE the element, so the element's
   own text is never covered. */
.tr-ring {
  position: absolute; top: 0; left: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #ED4236, 0 0 0 7px rgba(237,66,54,.18);
  transition: transform 220ms ease, width 220ms ease, height 220ms ease;
  pointer-events: none;
}
/* The label sits fully OUTSIDE the ring. At -11px it overlapped the top of a
   short element and covered the very text it was pointing at, which is worse
   than having no label. `.is-below` flips it under the ring when the element
   is too near the top of the stage for the label to fit above. */
.tr-ring-label {
  position: absolute; top: -21px; left: 8px;
  background: #ED4236; color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  line-height: 1.4;
}
.tr-ring.is-below .tr-ring-label { top: auto; bottom: -21px; }

/* ------------------------------------------------------ caption (subtitle) */

.tr-caption-wrap { max-width: 1280px; margin: 0 auto; padding: 14px 20px 0; }
.tr-caption {
  min-height: 56px;
  display: flex; align-items: center;
  background: #fff;
  border: 1px solid #E6E8EC;
  border-radius: 10px;
  padding: 13px 17px;
  font-size: 15.5px; line-height: 1.5; color: #1F2430;
}
.tr-caption.is-hidden { display: none; }

/* -------------------------------------------------------------- transport */

.tr-transport {
  max-width: 1280px; margin: 12px auto 0; padding: 0 20px;
  display: flex; align-items: center; gap: 10px;
}
.tr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; min-width: 40px; padding: 0 10px;
  background: #fff; color: #5B6473;
  border: 1px solid #E6E8EC; border-radius: 9px;
  font-size: 13px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.tr-btn:hover { background: #F0F1F3; color: #1F2430; }
.tr-btn .material-icons { font-size: 20px; }
.tr-btn.is-primary {
  background: #ED4236; border-color: #ED4236; color: #fff;
  width: 46px; height: 46px; min-width: 46px; padding: 0; border-radius: 50%;
}
.tr-btn.is-primary:hover { background: #C93529; }
.tr-btn.is-primary .material-icons { font-size: 24px; }
.tr-btn[aria-pressed="false"] { color: #A9B0BD; }
.tr-btn[aria-pressed="false"] .material-icons { opacity: .75; }

.tr-time {
  font-variant-numeric: tabular-nums; font-size: 12.5px; color: #5B6473;
  min-width: 96px; text-align: center; letter-spacing: .01em;
}

.tr-scrub {
  flex: 1; height: 6px; border-radius: 999px;
  background: #E6E8EC; position: relative; cursor: pointer;
}
.tr-scrub::before { content: ''; position: absolute; inset: -9px 0; }  /* easier to grab */
.tr-scrub-fill {
  position: absolute; inset: 0 auto 0 0;
  background: #ED4236; border-radius: 999px; width: 0;
}
.tr-scrub-marks { position: absolute; inset: 0; }
/* Chapter ticks - one per spoken line, so the shape of the lesson is visible
   the way chapter marks are on a video. */
.tr-scrub-mark {
  position: absolute; top: 1px; width: 2px; height: 4px;
  background: rgba(255,255,255,.85); border-radius: 1px;
}

/* -------------------------------------------------------------- chapters */

/* Videos that cover a whole screen run long, and that is the point: nobody
   watches all of it in one go, they come back for the part they need. Which
   only works if the parts have names and can be jumped to. */
.tr-chapters {
  max-width: 1280px; margin: 12px auto 0; padding: 0 20px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tr-chapter {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #E6E8EC; border-radius: 999px;
  padding: 6px 13px 6px 10px; font-size: 12.5px; color: #5B6473; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.tr-chapter:hover { border-color: #F3B0AB; color: #1F2430; }
.tr-chapter.is-now { background: #FDECEA; border-color: #ED4236; color: #A3272C; font-weight: 650; }
.tr-chapter span.t { font-variant-numeric: tabular-nums; color: #A9B0BD; font-size: 11.5px; }
.tr-chapter.is-now span.t { color: #C9605A; }

/* Chapter boundaries on the scrubber itself. */
.tr-scrub-chapter {
  position: absolute; top: -2px; width: 2px; height: 10px;
  background: rgba(31,36,48,.28); border-radius: 1px;
}

/* ----------------------------------------------------------- safety strip */

.tr-safety { max-width: 1280px; margin: 14px auto 44px; padding: 0 20px; }
.tr-safety-inner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #F1F9F4; border: 1px solid #CDE9D8; color: #1F6B44;
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px;
}
.tr-safety-inner .material-icons { font-size: 17px; color: #1F9D57; }
.tr-safety-inner.has-blocks { background: #FDF4E7; border-color: #F0D6AC; color: #7A4B00; }
.tr-safety-inner.has-blocks .material-icons { color: #E08600; }
.tr-safety code {
  background: rgba(16,24,40,.06); padding: 1px 5px; border-radius: 4px;
  font-size: 11.5px; color: #3C4454;
}
.tr-safety-log { width: 100%; margin-top: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #7A4B00; }
.tr-safety-log div { padding: 2px 0; border-top: 1px solid rgba(0,0,0,.06); }

/* -------------------------------------------------------------- start gate */

/* A lesson does NOT begin on load. Browsers refuse to play audio without a
   user gesture, so an autoplaying lesson plays SILENTLY - and the only report
   you get back is "I hear nothing". Turning that constraint into a visible,
   explained button makes it an affordance instead of a defect. */
.tr-gate {
  position: absolute; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31,36,48,.55);
  backdrop-filter: blur(3px);
  border-radius: 14px;
}
.tr-gate.is-gone { display: none; }
.tr-gate-card {
  width: 540px; max-width: 90%;
  background: #fff; color: #1F2430;
  border-radius: 14px; padding: 28px 30px;
  box-shadow: 0 24px 60px rgba(16,24,40,.28);
}
.tr-gate-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #ED4236; }
.tr-gate-card h2 { margin: 8px 0 8px; font-size: 22px; letter-spacing: -.02em; }
.tr-gate-card p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: #5B6473; }
.tr-gate-facts { margin: 0 0 20px; padding: 0; list-style: none; font-size: 13px; color: #5B6473; }
.tr-gate-facts li { padding: 5px 0 5px 26px; position: relative; }
.tr-gate-facts li .material-icons {
  position: absolute; left: 0; top: 4px; font-size: 17px; color: #1F9D57;
}
.tr-gate-start {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ED4236; color: #fff; border: 0;
  padding: 12px 22px 12px 16px; border-radius: 10px;
  font-size: 15px; font-weight: 650; cursor: pointer;
}
.tr-gate-start:hover { background: #C93529; }
.tr-gate-start:disabled { background: #C9CFDA; cursor: default; }
.tr-gate-start .material-icons { font-size: 22px; }

/* --------------------------------------------------------------- messages */

.tr-msg {
  max-width: 720px; margin: 60px auto; padding: 28px 30px;
  background: #fff; border: 1px solid #E6E8EC; border-radius: 12px;
}
.tr-msg h2 { margin: 0 0 10px; font-size: 20px; }
.tr-msg p  { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: #5B6473; }
.tr-msg.is-error { border-color: #F3C6C8; background: #FEF7F7; }

/* ==========================================================================
   THE SHELF
   ========================================================================== */

.trs-wrap { max-width: 1060px; margin: 0 auto; padding: 40px 20px 90px; }
.trs-head h1 { margin: 0 0 8px; font-size: 32px; letter-spacing: -.025em; }
.trs-head p  { margin: 0; font-size: 15px; color: #5B6473; line-height: 1.6; max-width: 62ch; }

.trs-private {
  display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 4px;
  background: #fff; border: 1px solid #E6E8EC;
  color: #5B6473; border-radius: 9px; padding: 9px 14px; font-size: 12.5px;
}
.trs-private .material-icons { font-size: 17px; color: #8A93A3; }

/* Groups are a curriculum, not categories, so they only appear once there are
   enough lessons for an order to mean anything. Below that they are noise. */
.trs-group-title {
  margin: 34px 0 14px; font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #8A93A3;
}
.trs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }

.trs-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #E6E8EC;
  border-radius: 12px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.trs-card:hover {
  border-color: #F3B0AB; box-shadow: 0 8px 24px rgba(16,24,40,.10); transform: translateY(-2px);
}
.trs-card.is-blocked { opacity: .6; cursor: not-allowed; }
.trs-card.is-blocked:hover { transform: none; box-shadow: none; border-color: #E6E8EC; }

/* The play affordance. This is a video, so it should read as one. */
.trs-thumb {
  position: relative; height: 92px;
  background: linear-gradient(135deg, #1A1A2E 0%, #2D2D52 100%);
  display: flex; align-items: center; justify-content: center;
}
.trs-thumb .material-icons { font-size: 40px; color: rgba(255,255,255,.92); }
.trs-dur {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0,0,0,.72); color: #fff;
  font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  padding: 2px 7px; border-radius: 5px;
}
.trs-card-body { padding: 15px 16px 16px; }
.trs-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.trs-card h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; }
.trs-card p  { margin: 0 0 12px; font-size: 13px; color: #5B6473; line-height: 1.5; }
.trs-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: #8A93A3; }
.trs-meta span { display: inline-flex; align-items: center; gap: 4px; }
.trs-meta .material-icons { font-size: 15px; }
.trs-note { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: #8A5000; }

.trs-empty { padding: 40px; text-align: center; color: #8A93A3; font-size: 14px; }

@media (max-width: 900px) {
  .trs-grid { grid-template-columns: 1fr; }
  .tr-top { flex-wrap: wrap; }
  .tr-transport { flex-wrap: wrap; }
}
/* ==========================================================================
   REPLICA OVERRIDES
   --------------------------------------------------------------------------
   The replica loads the REAL app.css so a taught screen looks like the screen
   it teaches. Exactly one class of rule has to be undone: the app is built to
   fill a browser window (100vh, 100dvh) and inside the stage it must fill the
   STAGE instead. Everything else is inherited untouched, on purpose - if the
   product is restyled, the lesson is restyled with it.
   ========================================================================== */
.tr-stage .app-container,
.tr-stage .page-wrap,
.tr-stage .tasks-page { height: 100%; max-height: 100%; }
.tr-stage .app-header { position: static; }
.tr-stage .sidebar { position: static; transform: none; }
.tr-stage .sidebar-overlay { display: none; }

/* Sample data must be visibly sample. A workspace with nothing in it gets
   openly generic examples, and they say so on screen rather than pretending. */
.tr-stage .tr-sample-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: #FEF0E0; color: #8A5000; border: 1px solid #F0C48A;
  border-radius: 999px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; vertical-align: middle;
}

/* HOVER, WITHOUT A POINTER.

   Several real controls are revealed by `:hover` and a lesson has no real
   pointer, so it can never produce one. A replica marks the element `.tr-hover`
   instead, and each rule below does exactly what the real hover rule does.

   Every one of these mirrors a specific rule in the product. When one of those
   changes, this is the file that has to follow. */

/* app.css:315 - .message:hover .message-actions */
.tr-stage .message.tr-hover .message-actions { display: flex; }

/* app.css:2495 - .doc-placed-sig:hover .doc-sig-action-chip */
.tr-stage .doc-placed-sig.tr-hover .doc-sig-action-chip { display: flex; }

/* ==========================================================================
   ASK WIDGET
   ========================================================================== */

.tk-root { position: fixed; right: 20px; bottom: 20px; z-index: 4000; font-size: 14px; }

.tk-launcher {
  display: inline-flex; align-items: center; gap: 7px;
  height: 46px; padding: 0 18px 0 14px;
  background: #ED4236; color: #fff; border: 0; border-radius: 999px;
  font-size: 14px; font-weight: 650; cursor: pointer;
  box-shadow: 0 6px 20px rgba(237,66,54,.32);
}
.tk-launcher:hover { background: #C93529; }
.tk-launcher .material-icons { font-size: 21px; }
.tk-launcher.is-open .tk-launcher-text { display: none; }
.tk-launcher.is-open { padding: 0; width: 46px; justify-content: center; }

.tk-panel {
  position: absolute; right: 0; bottom: 58px;
  width: 380px; max-width: calc(100vw - 40px);
  max-height: min(560px, calc(100vh - 120px));
  background: #fff; border: 1px solid #E6E8EC; border-radius: 14px;
  box-shadow: 0 20px 50px rgba(16,24,40,.20);
  display: none; flex-direction: column; overflow: hidden;
}
.tk-panel.is-open { display: flex; }

.tk-head { display: flex; align-items: center; padding: 13px 10px 13px 16px; border-bottom: 1px solid #F0F1F3; }
.tk-title { flex: 1; font-size: 14.5px; font-weight: 650; }
.tk-close { background: none; border: 0; cursor: pointer; color: #8A93A3; display: flex; padding: 4px; }
.tk-close .material-icons { font-size: 20px; }

.tk-thread { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.tk-hint { font-size: 12.5px; color: #8A93A3; line-height: 1.55; }

.tk-turn { display: flex; }
.tk-turn.tk-you { justify-content: flex-end; }
.tk-bubble { max-width: 92%; border-radius: 12px; padding: 10px 13px; font-size: 13.5px; line-height: 1.5; }
.tk-you .tk-bubble { background: #ED4236; color: #fff; border-bottom-right-radius: 4px; }
.tk-ask .tk-bubble { background: #F4F5F7; color: #1F2430; border-bottom-left-radius: 4px; }

.tk-answer { margin-bottom: 2px; }

/* The lesson's own sentence. It renders under every answer because that line
   was checked against the code and the model's wording was not. */
.tk-quote {
  display: flex; gap: 7px; margin-top: 9px; padding: 9px 11px;
  background: #fff; border: 1px solid #E6E8EC; border-radius: 9px;
  font-size: 12.5px; color: #5B6473; line-height: 1.5;
}
.tk-quote .material-icons { font-size: 15px; color: #A9B0BD; flex-shrink: 0; }

.tk-jump {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  color: #ED4236; text-decoration: none; font-size: 12.5px; font-weight: 650;
}
.tk-jump:hover { text-decoration: underline; }
.tk-jump .material-icons { font-size: 17px; }

.tk-note { margin-top: 8px; font-size: 11.5px; color: #8A5000; line-height: 1.5; }

.tk-thinking { display: flex; gap: 4px; align-items: center; }
.tk-dot { width: 6px; height: 6px; border-radius: 50%; background: #A9B0BD; animation: tk-b 1.1s infinite; }
.tk-dot:nth-child(2) { animation-delay: .16s; } .tk-dot:nth-child(3) { animation-delay: .32s; }
@keyframes tk-b { 0%,60%,100% { opacity:.3; transform: translateY(0); } 30% { opacity:1; transform: translateY(-3px); } }

.tk-foot { display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid #F0F1F3; }
.tk-input {
  flex: 1; border: 1px solid #E6E8EC; border-radius: 9px; padding: 9px 12px;
  font-size: 13.5px; font-family: inherit; color: #1F2430;
}
.tk-input:focus { outline: none; border-color: #F3B0AB; }
.tk-send {
  width: 38px; border: 0; border-radius: 9px; background: #ED4236; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tk-send:hover { background: #C93529; }
.tk-send .material-icons { font-size: 19px; }

@media (max-width: 560px) { .tk-panel { width: calc(100vw - 32px); } }