/* ============================================================
   vth-reskin.css — VTH ReSkin components (namespaced, scoped)
   All classes are prefixed `vth-` and only paint inside `.vth`, so
   they never collide with Materialize v0.100. Extend this file;
   never write bare element/`.class` selectors outside the scope.
   Requires: vth-tokens.css (vars), vth-fonts.css, vth-reset.css.
   ============================================================ */

/* ---- App shell / layout helpers ---- */
.vth-app{background:var(--surface-subtle);min-height:100%;}
/* Page wrapper for every reskinned page. Mirrors the design source's `.content`
   (ui_kits/platform/reports.html: `padding:4px 4px 40px`) — deliberately NO
   max-width. The design caps LINE LENGTH, not page width: its only max-widths are
   on prose (.hero p 640px, .infobar p 760px, .zero p 520px) and modals (540px).
   The side gutter comes from the app shell — `body #main{padding:16px}`
   (new_themes/css/style.css:149), which matches the design's `#root{padding:16px}`
   and never changes at any breakpoint — so this class needs no responsive padding
   of its own; capping here would only make reskinned pages narrower than every
   other page in the portal (onboarding included).
   `min-width:0` mirrors the design's `.main{min-width:0}`: without it a grid/flex
   child refuses to shrink below its min-content width and the page scrolls
   sideways. Do NOT override this padding inline — `padding:24px 0` is a shorthand
   and silently zeroes the sides. */
.vth-container{width:100%;min-width:0;margin:0 auto;}
.vth-grid{display:grid;gap:var(--space-6);}
.vth-row{display:flex;gap:var(--space-4);}
.vth-stack{display:flex;flex-direction:column;gap:var(--space-4);}
.vth-cluster{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;}

/* ---- Typography helpers ---- */
.vth-h1{font-size:var(--type-size-title-1);line-height:var(--type-leading-title-1);font-weight:var(--weight-semibold);}
.vth-h2{font-size:var(--type-size-title-3);line-height:var(--type-leading-title-3);font-weight:var(--weight-semibold);}
.vth-h3{font-size:var(--type-size-title-5);line-height:var(--type-leading-title-5);font-weight:var(--weight-semibold);}
.vth-h4{font-size:var(--type-size-title-6);line-height:var(--type-leading-title-6);font-weight:var(--weight-semibold);}
.vth-body{font-size:var(--type-size-base);line-height:var(--type-leading-base);font-weight:var(--weight-regular);}
.vth-small{font-size:var(--type-size-sm);line-height:var(--type-leading-sm);}
.vth-muted{color:var(--text-muted);}
.vth-eyebrow{font-size:var(--type-size-xs);line-height:var(--type-leading-xs);font-weight:var(--weight-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--vth-blue);}

/* ---- Buttons ---- */
.vth-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-sans);font-weight:var(--weight-semibold);white-space:nowrap;
  border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;text-decoration:none;}
.vth-btn--sm{height:36px;padding:0 var(--space-4);font-size:var(--type-size-sm);}
.vth-btn--md{height:44px;padding:0 var(--space-5);font-size:var(--type-size-base);}
.vth-btn--lg{height:52px;padding:0 var(--space-6);font-size:var(--type-size-lg);}
.vth-btn--pill{border-radius:var(--radius-pill);}
.vth-btn--icon{padding:0;width:44px;}
.vth-btn--primary{background:var(--vth-blue);color:var(--text-on-blue);}
.vth-btn--primary:hover{background:var(--vth-blue-hover);color:var(--text-on-blue);}
.vth-btn--primary:active{background:var(--vth-blue-focus);}
.vth-btn--secondary{background:transparent;color:var(--vth-blue);border-color:var(--vth-blue);}
.vth-btn--secondary:hover{background:var(--surface-blue-soft);}
.vth-btn--ghost{background:transparent;color:var(--text-primary);}
.vth-btn--ghost:hover{background:var(--surface-muted);}
.vth-btn--danger{background:var(--color-error);color:#fff;}
.vth-btn--danger:hover{background:var(--color-error-hover);}
.vth-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-blue);}
.vth-btn.is-disabled,.vth-btn:disabled{opacity:.5;pointer-events:none;}

/* ---- Cards ---- */
.vth-card{background:var(--surface-card);border:1px solid var(--border-light);border-radius:var(--radius-xl);overflow:hidden;}
.vth-card__media{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-muted);}
.vth-card__body{padding:var(--space-6);}
.vth-card__title{font-size:var(--type-size-xl);line-height:var(--type-leading-xl);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-2);}
.vth-card__text{font-size:var(--type-size-base);line-height:var(--type-leading-base);color:var(--text-subtle);}
.vth-card__footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;}

/* ---- Forms ---- */
.vth-field{display:flex;flex-direction:column;gap:var(--space-2);}
.vth-label{font-size:var(--type-size-sm);font-weight:var(--weight-medium);color:var(--text-secondary);}
.vth-input,.vth-textarea,.vth-select{width:100%;padding:10px var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-page);font-family:var(--font-sans);font-size:var(--type-size-base);color:var(--text-primary);transition:border-color .15s ease,box-shadow .15s ease;}
.vth-input::placeholder,.vth-textarea::placeholder{color:var(--text-muted);}
.vth-input:focus,.vth-textarea:focus,.vth-select:focus{border-color:var(--vth-blue);box-shadow:var(--shadow-focus-blue);}
.vth-textarea{min-height:96px;resize:vertical;}
.vth-help{font-size:var(--type-size-xs);color:var(--text-muted);}
.vth-error{font-size:var(--type-size-xs);color:var(--color-error);}
.vth-field.is-error .vth-input,.vth-field.is-error .vth-textarea,.vth-field.is-error .vth-select{border-color:var(--color-error);}

/* ---- Badges / chips / tags ---- */
.vth-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-3);border-radius:var(--radius-pill);font-size:var(--type-size-2xs);font-weight:var(--weight-semibold);line-height:1.6;}
.vth-badge--neutral{background:var(--surface-muted);color:var(--text-subtle);}
.vth-badge--info{background:var(--surface-blue-soft);color:var(--vth-blue);}
.vth-badge--success{background:#DDFBE7;color:var(--color-success);}
.vth-badge--warning{background:#FFF2D1;color:#8A5B00;}
.vth-badge--error{background:#FEE2E2;color:var(--color-error);}
.vth-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:2px var(--space-2) ;border:1px solid var(--border-default);border-radius:var(--radius-pill);font-size:var(--type-size-2xs);background:var(--surface-page);}
.vth-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--text-muted);}

/* ---- Alerts ---- */
.vth-alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);font-size:var(--type-size-sm);border:1px solid transparent;}
.vth-alert--info{background:var(--surface-blue-soft);border-color:#BCD6FF;color:var(--vth-blue-dark);}
.vth-alert--success{background:#F0FDF4;border-color:#BDF5D1;color:var(--color-success);}
.vth-alert--warning{background:#FFFEEA;border-color:#FFF585;color:#8A5B00;}
.vth-alert--error{background:#FEF2F2;border-color:#FDCBCB;color:var(--color-error);}

/* ---- Tables ---- */
.vth-table{width:100%;border-collapse:collapse;font-size:var(--type-size-sm);}
.vth-table th{padding:var(--space-3) var(--space-4);text-align:left;font-weight:var(--weight-semibold);color:var(--text-subtle);border-bottom:1px solid var(--border-default);background:var(--surface-muted);}
.vth-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-light);color:var(--text-primary);}
.vth-table--hover tbody tr:hover{background:var(--surface-subtle);}
.vth-table--striped tbody tr:nth-child(even){background:var(--surface-subtle);}

/* ---- Navigation ---- */
.vth-navbar{display:flex;align-items:center;gap:var(--space-6);height:64px;padding:0 var(--space-6);background:var(--surface-page);border-bottom:1px solid var(--border-light);}
.vth-sidenav{width:260px;background:var(--surface-page);border-right:1px solid var(--border-light);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);}
.vth-navlink{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-4);border-radius:var(--radius-md);color:var(--text-subtle);font-weight:var(--weight-medium);cursor:pointer;}
.vth-navlink:hover{background:var(--surface-muted);color:var(--text-primary);}
.vth-navlink.is-active{background:var(--surface-blue-soft);color:var(--vth-blue);}
.vth-tabs{display:flex;gap:var(--space-2);border-bottom:1px solid var(--border-light);}
.vth-tab{padding:var(--space-3) var(--space-4);font-weight:var(--weight-medium);color:var(--text-subtle);border-bottom:2px solid transparent;cursor:pointer;}
.vth-tab.is-active{color:var(--vth-blue);border-bottom-color:var(--vth-blue);}

/* ---- Overlays (build ourselves; do not use Materialize JS modal) ---- */
.vth-modal__backdrop{position:fixed;inset:0;background:rgba(19,19,19,.5);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:1000;}
/* Whole-viewport busy overlay (e.g. the Change Account Owner wizard's submit
   step) — position:fixed so it covers the header/sidebar too, not just the
   content card; z-index 9999 matches this app's highest existing overlay
   (vth-course-access-modal.css) so nothing else can paint above it. */
.vth-page-loading-overlay{position:fixed;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;z-index:9999;}
.vth-modal__panel{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:90vh;overflow:auto;}
.vth-modal__head{padding:var(--space-6);border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;}
.vth-modal__body{padding:var(--space-6);}
.vth-modal__foot{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:var(--space-3);}

/* ---- Data display ---- */
.vth-stat-card{background:var(--surface-card);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:var(--space-6);}
.vth-stat__value{font-size:var(--type-size-3xl);line-height:var(--type-leading-3xl);font-weight:var(--weight-bold);color:var(--text-primary);}
.vth-stat__label{font-size:var(--type-size-sm);color:var(--text-muted);}
.vth-progress{height:8px;background:var(--surface-muted);border-radius:var(--radius-pill);overflow:hidden;}
.vth-progress__bar{height:100%;background:var(--vth-blue);border-radius:var(--radius-pill);}
.vth-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--surface-muted);}
.vth-avatar--sm{width:28px;height:28px;}.vth-avatar--lg{width:64px;height:64px;}
.vth-spinner{width:24px;height:24px;border:3px solid var(--border-light);border-top-color:var(--vth-blue);border-radius:50%;animation:vth-spin .7s linear infinite;}
@keyframes vth-spin{to{transform:rotate(360deg);}}

/* ---- Icons ---- */
.vth-icon{width:24px;height:24px;display:inline-block;color:currentColor;flex:none;}
.vth-icon svg{width:100%;height:100%;display:block;}

/* ---- Pagination (app-wide; paired with the vth-pagination directive) ---- */
.vth-pagination-wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;width:100%;}
.vth-pagination__summary{font-size:var(--type-size-sm);color:var(--text-muted);}
.vth-pagination{display:flex;gap:6px;margin-left:auto;}
.vth-pagination button{height:34px;min-width:34px;padding:0 10px;border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--surface-page);font-family:var(--font-sans);font-size:13px;color:var(--text-secondary);cursor:pointer;}
.vth-pagination button:hover:not(:disabled){background:var(--surface-muted);color:var(--text-primary);}
.vth-pagination button.is-active{background:var(--vth-blue);border-color:var(--vth-blue);color:var(--text-on-blue);}
.vth-pagination button:disabled{opacity:.45;cursor:default;}

/* ============================================================
   LEGACY-CLASS OVERRIDES — course catalogue (#courses_list)
   ------------------------------------------------------------
   Everything above is `.vth-*`, scoped to `.vth`, as this file's header requires.
   The block below is the one exception and is deliberately kept apart: it corrects
   pre-reskin components (.online-course-item, .multiple-check-box-select,
   .select-wrapper) that the reskin renders without the stylesheets those components
   were written against - f2fpublic.css, custom.css, sub_master(back).css are not
   loaded on reskin pages. Rewriting the components is a bigger job; until then this
   is the single place those corrections live, reaching the hub and all nine sector
   sites because the catalogue is one shared view. Scoped to #courses_list so the same
   components keep their existing look wherever those stylesheets ARE loaded.
   ============================================================ */
/* ---------- Course card titles -------------------------------------------- */
/* The theme clamps every card title to ONE line - style.css:846 sets
   display:-webkit-box + -webkit-line-clamp:1 + overflow:hidden - and its
   width:calc(100% - 30px) takes another 30px off that single line. Measured on the
   catalogue: the title box showed 34px where a four-line name needs 136px, so names
   ended in an ellipsis mid-word. At 390px most titles need three or four lines, and
   in landscape the title column is only ~394px of a 764px card, which is why it read
   as worse there. Cards are one per row at every width here, so no uniform card
   height is being protected: let the title wrap in full. */
#courses_list .online-course-item h3 {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  width: 100%;
}
/* The theme already means to shrink card titles on phones (style.css:3499 asks for
   18px/26px) but that rule is not winning here, so a 24px title kept wrapping to four
   lines in a 244px-wide card. Same intent, stated where it applies. */
/* Second condition catches a phone held sideways, which is ~851px wide and so misses
   the width test - see the landscape block at the end of this file. */
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) {
  #courses_list .online-course-item h3 {
    font-size: 18px;
    line-height: 26px;
  }
}

/* ---------- Sectors dropdown (course-selector component) ------------------- */
/* The panel opened as a plain ~1400px-tall list that pushed the whole page down
   instead of floating over it: position:absolute, z-index, background, border and
   width:100% all live in f2fpublic.css:1192, which this page does not load. The only
   rule that reaches the panel here is the theme's `display:none`, so ng-show left it
   as an inline block with no positioning and no height limit. */
#courses_list .multiple-check-div { position: relative; }
#courses_list .multiple-check-box-select {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 99;
  /* Tied to the viewport as well as a fixed ceiling: 320px is taller than a phone in
     landscape (390px), where the panel hung 384px below the fold. */
  max-height: min(320px, 55vh);
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid #e0e2e8;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  list-style: none;
}
#courses_list .multiple-check-box-select ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#courses_list .multiple-check-box-select li { padding: 4px 6px; }

/* Each sector row drew a wide red or grey ellipse above its name: the native radio was
   being stretched to the panel's full width, because the generic input rule in the
   loaded theme CSS reaches it while the rule that normally hides radios - Materialize's
   [type=radio]{position:absolute;opacity:0} - sits in a stylesheet this page does not
   load. A radio 300px wide simply paints as an oval. Give it a real 16px control on the
   same line as its label. */
#courses_list .multiple-check-box-select li:not(.multiple-search) {
  display: flex;
  align-items: center;
  gap: 10px;
}
#courses_list .multiple-check-box-select li:not(.multiple-search) input[type="radio"] {
  position: static;
  opacity: 1;
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-appearance: radio;
  appearance: auto;
  accent-color: #192ac1;
}
#courses_list .multiple-check-box-select li:not(.multiple-search) label {
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 1.35;
  cursor: pointer;
}
#courses_list .multiple-check-box-select li.multiple-search { padding: 2px 2px 8px; }
#courses_list .multiple-check-box-select li.multiple-search input {
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #e0e2e8 !important;
  border-radius: 6px;
}

/* ---------- Level and Country selects ------------------------------------- */
/* These two are Materialize `material-select` fields, so they already open as proper
   dropdowns - the problem is that they do not look like the Sectors box they sit under.
   Measured side by side: Sectors is 60px tall, 18px type, 10px radius, #e0e2e8 border;
   Level and Country came out 50px, 14px, 6px radius and a border with no colour of its
   own. Match them to the Sectors box so the filter column reads as one control set. */
/* font-size and border-radius carry !important only because the catalogue view's own
   inline block sets them on every text input with !important
   (#courses_list input[type="text"] {font-size:14px!important;border-radius:6px!important}),
   and Materialize renders this select as input[type="text"]. Those inline rules belong in
   a stylesheet too; when they move here the !important can go. */
#courses_list .select-wrapper input.select-dropdown {
  height: 60px;
  line-height: 60px;
  font-size: 18px !important;
  border: 1px solid #e0e2e8;
  border-radius: 10px !important;
  padding: 0 20px;
  margin: 0;
  background: #fff;
  box-sizing: border-box;
}
/* Materialize draws the caret as a separate <span class="caret"> pinned to the right;
   the taller box needs it re-centred. */
#courses_list .select-wrapper .caret {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
/* The options panel gets the same frame as the Sectors panel above. */
#courses_list .select-wrapper .dropdown-content {
  max-height: min(320px, 55vh);
  border: 1px solid #e0e2e8;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}
#courses_list .select-wrapper .dropdown-content li > span {
  font-size: 15px;
  color: #131313;
}



/* ============================================================
   Course Test Functionality
   Added components. New class names only - no existing rule is
   redefined, so other vth pages are unaffected.
   ============================================================ */

/* ---- Test mode shell ---- */
.vth-testmode{display:flex;flex-direction:column;gap:var(--space-5);}
.vth-testmode__bar{display:flex;align-items:flex-start;gap:var(--space-4);justify-content:space-between;}
.vth-testmode__bar .vth-alert{flex:1;margin:0;}
.vth-testmode__grid{display:grid;grid-template-columns:1fr 380px;gap:var(--space-5);align-items:start;}

/* ---- Player ---- */
.vth-player{position:relative;background:var(--surface-card);border:1px solid var(--border-light);border-radius:var(--radius-20);padding:var(--space-5);box-shadow:var(--shadow-xs);}
.vth-player__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4);}
.vth-player__title{font-size:var(--type-size-xl);line-height:var(--type-leading-xl);font-weight:var(--weight-semibold);color:var(--text-primary);margin:0;}
.vth-player__step{font-size:var(--type-size-xs);color:var(--text-muted);white-space:nowrap;}
.vth-player__stage{position:relative;border:1px solid var(--border-light);border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-muted);}
.vth-player__stage iframe{display:block;width:100%;aspect-ratio:16/9;border:0;}
.vth-player__pill{position:absolute;top:var(--space-3);right:var(--space-3);z-index:2;background:rgba(0,0,0,.62);color:#fff;font-size:var(--type-size-2xs);font-weight:var(--weight-semibold);padding:4px var(--space-3);border-radius:var(--radius-pill);}
.vth-player__controls{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);background:var(--surface-dark);border-radius:0 0 var(--radius-xl) var(--radius-xl);padding:var(--space-3) var(--space-4);}
.vth-player__units{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.vth-player__unit{appearance:none;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font-family:var(--font-sans);font-size:var(--type-size-2xs);padding:4px var(--space-3);border-radius:var(--radius-pill);cursor:pointer;}
.vth-player__unit:hover{background:rgba(255,255,255,.14);}
.vth-player__unit.is-active{background:#fff;color:var(--text-primary);border-color:#fff;font-weight:var(--weight-semibold);}
.vth-player__nofile{padding:var(--space-8);text-align:center;color:var(--text-muted);font-size:var(--type-size-sm);}

/* ---- Notes panel ---- */
.vth-notes{position:sticky;top:16px;background:var(--surface-card);border:1px solid var(--border-light);border-radius:var(--radius-20);padding:var(--space-5);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:var(--space-4);}
.vth-notes__head{display:flex;align-items:center;gap:var(--space-3);}
.vth-notes__icon{width:40px;height:40px;flex:0 0 40px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-10);background:var(--status-warning-bg);color:var(--status-warning-fg);font-size:18px;}
.vth-notes__title{font-size:var(--type-size-base);line-height:var(--type-leading-base);font-weight:var(--weight-semibold);color:var(--text-primary);margin:0;}
.vth-notes__hint{font-size:var(--type-size-xs);color:var(--text-muted);margin:2px 0 0;}
.vth-notes__state{font-size:var(--type-size-2xs);color:var(--text-muted);min-height:18px;}
.vth-notes__foot{font-size:var(--type-size-2xs);line-height:var(--type-leading-2xs);color:var(--text-muted);}
.vth-notes .vth-textarea{min-height:280px;}

/* ---- Status banner: icon + title + body + optional action ---- */
.vth-statusbar{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-4) var(--space-5);border-radius:var(--radius-14);border:1px solid transparent;}
.vth-statusbar__icon{flex:0 0 24px;font-size:22px;line-height:1;}
.vth-statusbar__body{flex:1;}
.vth-statusbar__title{font-size:var(--type-size-sm);font-weight:var(--weight-semibold);margin:0 0 2px;}
.vth-statusbar__text{font-size:var(--type-size-xs);line-height:var(--type-leading-xs);margin:0;opacity:.92;}
.vth-statusbar--success{background:var(--status-success-bg);border-color:var(--status-success-border);color:var(--status-success-fg);}
.vth-statusbar--warning{background:var(--status-warning-bg);border-color:var(--status-warning-border);color:var(--status-warning-fg);}
.vth-statusbar--danger{background:var(--status-danger-bg);border-color:var(--status-danger-border);color:var(--status-danger-fg);}

/* ---- Result option cards ---- */
.vth-choice{display:flex;flex-direction:column;gap:var(--space-3);}
.vth-choice__item{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-4) var(--space-5);border:1.5px solid var(--border-light);border-radius:var(--radius-xl);cursor:pointer;transition:border-color .15s ease,background .15s ease;}
.vth-choice__item:hover{background:var(--surface-subtle);}
.vth-choice__item input{margin:0;order:2;width:22px;height:22px;flex:0 0 22px;align-self:center;accent-color:var(--vth-blue);}
.vth-choice__copy{order:1;flex:1;}
.vth-choice__title{font-size:var(--type-size-sm);font-weight:var(--weight-semibold);color:var(--text-primary);margin:0 0 2px;}
.vth-choice__text{font-size:var(--type-size-xs);line-height:var(--type-leading-xs);color:var(--text-subtle);margin:0;}
.vth-choice__item.is-live.is-selected{border-color:var(--status-success-accent);background:#F4FCF8;}
.vth-choice__item.is-hold.is-selected{border-color:var(--status-warning-accent);background:#FFFBF0;}
.vth-choice__item.is-issue.is-selected{border-color:var(--status-danger-accent);background:#FEF7F6;}

/* ---- Outcome summary ---- */
.vth-summary{background:var(--surface-subtle);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);}
.vth-summary__row{display:grid;grid-template-columns:104px 1fr;gap:var(--space-4);font-size:var(--type-size-xs);}
.vth-summary__key{color:var(--text-muted);}
.vth-summary__val{color:var(--text-primary);font-weight:var(--weight-medium);word-break:break-word;}

/* Mobile-only pieces: hidden by default, switched on inside the media query
   below. These must stay above it so the media query wins. */
.vth-notesbar{display:none;}
.vth-sheet{display:none;}

/* ---- Course Test: mobile (<=767px) ----
   Scoped to the feature's own classes so no other vth page is affected. */
@media (max-width:767px){
  .vth-testmode__grid{grid-template-columns:1fr;}
  .vth-summary__row{grid-template-columns:1fr;gap:2px;}

  /* Warning strip stacks, Exit test becomes a full-width action beneath it */
  .vth-testmode__bar{flex-direction:column;align-items:stretch;gap:var(--space-3);}
  .vth-testmode__bar .vth-btn{width:100%;justify-content:center;}

  /* Player runs edge to gutter; controls wrap instead of scrolling sideways */
  .vth-player{padding:var(--space-4);border-radius:var(--radius-xl);}
  .vth-player__head{flex-direction:column;align-items:flex-start;gap:4px;}
  .vth-player__controls{flex-wrap:wrap;gap:var(--space-2);}
  .vth-player__unit{min-height:36px;min-width:36px;}

  /* The side panel is replaced by a sticky bar plus a sheet, so it is hidden
     rather than restyled - the textarea inside it must keep existing because
     the sheet reuses it and the iframe must never be re-rendered. */
  .vth-notes{display:none;}

  .vth-notesbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1050;height:64px;
    display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-4);
    background:var(--surface-card);border-top:1px solid var(--border-light);
    box-shadow:0 -2px 10px rgba(16,24,40,.08);}
  .vth-notesbar__icon{width:40px;height:40px;flex:0 0 40px;display:inline-flex;
    align-items:center;justify-content:center;border-radius:var(--radius-10);
    background:var(--status-warning-bg);color:var(--status-warning-fg);font-size:18px;}
  .vth-notesbar__label{font-size:var(--type-size-sm);font-weight:var(--weight-medium);
    color:var(--text-primary);margin-right:auto;}
  .vth-notesbar__count{font-size:var(--type-size-2xs);color:var(--text-muted);}
  .vth-testmode{padding-bottom:80px;}

  /* Bottom sheet: 60dvh, drag handle, slides up in 200ms */
  .vth-sheet{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.45);display:none;}
  .vth-sheet.is-open{display:block;}
  .vth-sheet__panel{position:absolute;left:0;right:0;bottom:0;height:60dvh;
    background:var(--surface-card);border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    padding:var(--space-4) var(--space-4) var(--space-5);display:flex;flex-direction:column;
    gap:var(--space-3);animation:vthSheetUp .2s ease-out;}
  .vth-sheet__grip{width:44px;height:4px;border-radius:var(--radius-pill);
    background:var(--border-default);margin:0 auto var(--space-2);}
  .vth-sheet__panel .vth-textarea{flex:1;min-height:0;}
  @keyframes vthSheetUp{from{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}

  /* Stacked, full-width actions on every Course Test screen */
  .vth-choice__item{padding:var(--space-4);}
  .vth-choice__title{font-size:var(--type-size-sm);}
  .vth-choice__text{font-size:var(--type-size-2xs);}
  .vth-cardfoot{flex-direction:column;align-items:stretch;gap:var(--space-3);}
  .vth-cardfoot .vth-btn,.vth-cardfoot>span.vth-btn{width:100%;justify-content:center;}
  .vth-cardfoot__meta{margin-right:0;}
  .vth-statusbar{flex-wrap:wrap;}
  .vth-statusbar .vth-btn{width:100%;justify-content:center;margin-top:var(--space-3);}

  /* History table becomes one card per run */
  .vth-runlist thead{display:none;}
  .vth-runlist,.vth-runlist tbody,.vth-runlist tr,.vth-runlist td{display:block;width:100%;}
  .vth-runlist tr{border:1px solid var(--border-light);border-radius:var(--radius-xl);
    padding:var(--space-4);margin-bottom:var(--space-3);}
  .vth-runlist td{border:0;padding:0 0 var(--space-2);}
  .vth-runlist td:last-child{padding-top:var(--space-3);border-top:1px solid var(--divider);}
}

/* Landscape phone: keep the player tall, drop the notes bar label */
@media (max-width:900px) and (orientation:landscape){
  .vth-notesbar{height:52px;}
  .vth-notesbar__label,.vth-notesbar__count{display:none;}
}

/* ---- Course card footer: last-test meta + Test course action ---- */
.vth-cardfoot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-4);
  margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--divider);}
.vth-cardfoot__meta{font-size:var(--type-size-2xs);color:var(--text-muted);margin-right:auto;}

/* Make It Live actions stack on mobile, test first per the design order */
@media (max-width:767px){
  .vth-actions-stack{display:flex;flex-direction:column;gap:var(--space-3);align-items:stretch;}
  .vth-actions-stack>a,.vth-actions-stack>span,.vth-actions-stack>input{width:100%;justify-content:center;margin-right:0!important;}
  .vth-actions-stack .vth-btn{order:1;}
  .vth-actions-stack .secondry-btn{order:2;}
  .vth-actions-stack>a:first-child{order:3;}
}

/* ---- Course Test: card and action row corrections ---- */

/* The card's badge must hug its text; legacy card CSS stretches bare spans. */
.course-info .vth-badge{display:inline-flex!important;width:auto!important;max-width:max-content;
  vertical-align:middle;margin:0 0 var(--space-2);}

/* Make It Live actions sit on one baseline; the legacy button, the input and
   the vth button have different intrinsic heights. */
.vth-actions-stack{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap;}
.vth-actions-stack>a,.vth-actions-stack>span{margin-right:0!important;display:inline-flex;align-items:center;}
.vth-actions-stack .btn,.vth-actions-stack input.btn{margin:0!important;}

/* Course test - steps drawn in place of a package (quiz, handbook, review) */
/* Nothing plays here, so the panel grows with its content and the page
   scrolls: a long quiz is read, not scrubbed through a letterbox. */
.vth-stagepanel{width:100%;min-height:52vh;background:var(--surface-card);}
.vth-stagepanel__inner{padding:var(--space-8) var(--space-7);max-width:720px;margin:0 auto;}
.vth-stagepanel__kind{font-size:var(--type-size-2xs);font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--space-2);}
.vth-stagepanel__title{font-size:var(--type-size-lg);font-weight:var(--weight-semibold);color:var(--text-strong);margin:0 0 var(--space-4);}
.vth-stagepanel__body{font-size:var(--type-size-sm);color:var(--text-default);line-height:1.6;margin-bottom:var(--space-5);}
.vth-stagepanel__hint{font-size:var(--type-size-xs);color:var(--text-muted);margin-top:var(--space-4);}
.vth-stagepanel__list li{margin-bottom:var(--space-3);line-height:1.5;}

.vth-quiz__item{padding:var(--space-5) 0;border-bottom:1px solid var(--border-light);}
.vth-quiz__item:last-child{border-bottom:0;}
.vth-quiz__q{display:flex;gap:var(--space-3);font-size:var(--type-size-sm);font-weight:var(--weight-medium);color:var(--text-strong);line-height:1.5;margin:0 0 var(--space-3);}
.vth-quiz__no{color:var(--text-muted);font-variant-numeric:tabular-nums;}
.vth-quiz__note{font-size:var(--type-size-xs);color:var(--text-muted);margin:0 0 var(--space-3);}
.vth-quiz__missing{font-size:var(--type-size-xs);color:var(--status-danger-fg);margin:0;}
.vth-quiz__choices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);}
.vth-quiz__choice{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--border-light);border-radius:var(--radius-md);font-size:var(--type-size-sm);color:var(--text-default);}
.vth-quiz__choice.is-correct{border-color:var(--status-success-fg);background:rgba(22,125,74,.06);color:var(--text-strong);font-weight:var(--weight-medium);}
.vth-quiz__tick{flex:none;font-size:var(--type-size-2xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--status-success-fg);}

@media (max-width:767px){
    .vth-stagepanel{min-height:auto;}
    .vth-stagepanel__inner{padding:var(--space-5) var(--space-4);}
}