/* ==========================================================================
   TebZone bridge — tebzone.css   (v2)
   The TebZone-powered surfaces: the account chip in the header, the
   sign-in / sign-up card, the live course catalogue, and the wrapper that
   course material from the platform is rendered inside.

   PORTABLE BY DESIGN

   This file is deployed unchanged to every partner site. It never names a
   partner's own tokens directly — it reads them once, here, into a --tz-*
   set with a fallback chain, so a site whose palette is called --brand-*
   and one whose palette is called --navy-* both work with the same
   stylesheet. Adding a partner means extending this block, nothing below it.

   BOTH DIRECTIONS

   Everything below is written in logical properties, because these screens
   are published in Arabic and in English on the same markup. The only
   physical values left are the ones that should not flip: a shadow's light
   source, and the two gradients whose angle is decorative.
   ========================================================================== */

@layer components {

:root {
  /* Surfaces */
  --tz-surface:      var(--surface, #ffffff);
  --tz-surface-soft: var(--surface-muted, var(--ink-50, #f7fafb));
  --tz-line:         var(--line, rgb(0 0 0 / 0.1));
  --tz-line-strong:  var(--line-strong, rgb(0 0 0 / 0.18));

  /* Text */
  --tz-heading:  var(--brand-900, var(--navy-800, #10243a));
  --tz-body:     var(--ink-700, #33454f);
  --tz-muted:    var(--ink-500, #6b8391);
  --tz-faint:    var(--ink-400, #8fa4af);

  /* Neutral steps used for fills and borders */
  --tz-n100: var(--ink-100, #eef3f6);
  --tz-n200: var(--ink-200, #dbe4ea);
  --tz-n300: var(--ink-300, #b9c8d1);

  /* Accent — the colour a partner uses for its calls to action */
  --tz-accent:      var(--accent-600, var(--green-500, #5aaa42));
  /* The deep accent is used for 10–13px text on a light card, so it has to
     clear 4.5:1 against white — one step darker than the brand's own
     mid-tone. A dark partner overrides it upward again. */
  --tz-accent-deep: var(--accent-800, var(--green-700, #3d8a2e));
  --tz-accent-soft: var(--accent-50, var(--green-50, #f3faef));
  --tz-accent-tint: var(--accent-100, var(--green-100, #e5f4dd));

  /* Brand — the deep colour behind panels and headers */
  --tz-brand-soft: var(--brand-50, var(--navy-50, #f3f9fc));
  --tz-brand-tint: var(--brand-100, var(--navy-100, #e4f0f6));
  --tz-brand-mid:  var(--brand-600, var(--navy-600, #004b73));
  --tz-brand-deep: var(--brand-900, var(--navy-900, #06243a));

  /* Gradients, elevation, motion */
  --tz-grad-brand:  var(--grad-brand, linear-gradient(135deg, #0b2b40, #17567d));
  --tz-grad-accent: var(--grad-accent, var(--grad-green, linear-gradient(135deg, #459334, #7cc45f)));
  --tz-on-accent:   var(--on-accent, #06280a);
  --tz-shadow-sm:   var(--shadow-sm, 0 2px 6px rgb(0 0 0 / 0.06));
  --tz-shadow-md:   var(--shadow-md, 0 10px 26px -12px rgb(0 0 0 / 0.22));
  --tz-shadow-lg:   var(--shadow-lg, 0 24px 52px -22px rgb(0 0 0 / 0.34));

  --tz-r-xs: var(--r-xs, 8px);
  --tz-r-sm: var(--r-sm, 12px);
  --tz-r-md: var(--r-md, 18px);
  --tz-r-lg: var(--r-lg, 26px);
  --tz-r-full: var(--r-full, 999px);

  --tz-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --tz-fast: var(--t-fast, 0.18s);
  --tz-base: var(--t-base, 0.32s);
  --tz-slow: var(--t-slow, 0.6s);

  --tz-font-display: var(--font-heading, system-ui, sans-serif);

  /* Danger — the one colour the partner themes do not define */
  --tz-danger: #c2453a;
  --tz-danger-soft: #fdf2f1;
  --tz-danger-line: #f3d5d1;
}

.tz-visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   1. Header account
   -------------------------------------------------------------------------- */
.tz-account-slot { display: inline-flex; align-items: center; }
.tz-account-slot:empty { display: none; }

.tz-account { position: relative; }

.tz-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 5px;
  padding-inline-end: 0.75rem;
  border-radius: var(--tz-r-full);
  border: 1px solid var(--tz-line-strong);
  background: var(--tz-surface);
  box-shadow: var(--tz-shadow-sm);
  transition: border-color var(--tz-base) var(--tz-ease),
              box-shadow var(--tz-base) var(--tz-ease);
}
.tz-account-chip:hover { border-color: var(--tz-accent); box-shadow: var(--tz-shadow-md); }
.tz-account-chip > svg:last-child { color: var(--tz-faint); transition: rotate var(--tz-base) var(--tz-ease); }
.tz-account.is-open .tz-account-chip > svg:last-child { rotate: 180deg; }

.tz-account-avatar {
  inline-size: 34px;
  block-size: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--tz-font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: #fff;
  background: var(--tz-grad-brand);
}
.tz-account-text { display: grid; text-align: start; line-height: 1.2; }
.tz-account-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.63rem;
  font-weight: 700;
  color: var(--tz-accent-deep);
}
.tz-account-name { font-size: 0.85rem; font-weight: 600; color: var(--tz-heading); }

.tz-account-menu {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 60;
  inline-size: 250px;
  padding: 0.5rem;
  border-radius: var(--tz-r-md);
  border: 1px solid var(--tz-line);
  background: var(--tz-surface);
  box-shadow: var(--tz-shadow-lg);
  opacity: 0;
  visibility: hidden;
  translate: 0 -8px;
  transition: opacity var(--tz-base) var(--tz-ease),
              translate var(--tz-base) var(--tz-ease),
              visibility var(--tz-base);
}
.tz-account.is-open .tz-account-menu { opacity: 1; visibility: visible; translate: 0 0; }
.tz-account-head {
  display: grid;
  gap: 2px;
  padding: 0.6rem 0.7rem 0.8rem;
  border-block-end: 1px solid var(--tz-line);
  margin-block-end: 0.35rem;
}
.tz-account-head strong { font-size: 0.92rem; color: var(--tz-heading); }
.tz-account-head span { font-size: 0.78rem; color: var(--tz-muted); word-break: break-all; }
.tz-account-menu :is(a, button) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  inline-size: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: var(--tz-r-xs);
  font-size: 0.88rem;
  color: var(--tz-body);
  text-align: start;
  transition: background-color var(--tz-fast) var(--tz-ease), color var(--tz-fast) var(--tz-ease);
}
.tz-account-menu :is(a, button):hover { background: var(--tz-brand-soft); color: var(--tz-heading); }

/* --------------------------------------------------------------------------
   2. The catalogue
   -------------------------------------------------------------------------- */
.tz-catalog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.5rem;
}
.tz-catalog-head h3 { font-size: 1.2rem; font-weight: 600; color: var(--tz-heading); }
.tz-catalog-head p { font-size: 0.92rem; color: var(--tz-muted); }

.tz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}

.tz-grid--loading > span {
  display: block;
  block-size: 330px;
  border-radius: var(--tz-r-md);
  background: linear-gradient(100deg, var(--tz-n100) 30%, var(--tz-surface) 50%, var(--tz-n100) 70%);
  background-size: 220% 100%;
  animation: tz-shimmer 1.4s linear infinite;
}
@keyframes tz-shimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) {
  .tz-grid--loading > span { animation: none; }
}

/* --- One course --------------------------------------------------------- */
.tz-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border-radius: var(--tz-r-md);
  border: 1px solid var(--tz-line);
  background: var(--tz-surface);
  overflow: hidden;
  transition: transform var(--tz-base) var(--tz-ease),
              box-shadow var(--tz-base) var(--tz-ease),
              border-color var(--tz-base) var(--tz-ease);
}
.tz-card:hover, .tz-card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--tz-shadow-lg);
  border-color: var(--tz-accent);
}

/* The whole card is the target. A link stretched over it keeps one tab stop
   and one announcement per course instead of four. */
.tz-card-link { position: absolute; inset: 0; z-index: 3; }
.tz-card-link:focus-visible { outline-offset: -4px; }

.tz-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--tz-n100);
  overflow: hidden;
}
.tz-card-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--tz-slow) var(--tz-ease);
}
.tz-card:hover .tz-card-media img { scale: 1.05; }
.tz-card-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--tz-n300);
  background: var(--tz-grad-brand);
  opacity: 0.16;
}

.tz-card-flag,
.tz-card-cat {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.3rem 0.65rem;
  border-radius: var(--tz-r-full);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tz-card-flag {
  inset-block-start: 0.7rem;
  inset-inline-start: 0.7rem;
  /* Solid, not the accent gradient. Eleven-pixel bold text on the dark end
     of that gradient lands at about 2.8:1 — under AA for small text — and a
     badge that says "Free" is exactly the kind of thing somebody needs to be
     able to read. The flat accent is 5:1 or better on both partner
     palettes. */
  background: var(--tz-accent);
  color: var(--tz-on-accent);
}
.tz-card-cat {
  inset-block-end: 0.7rem;
  inset-inline-start: 0.7rem;
  background: rgb(255 255 255 / 0.92);
  color: var(--tz-heading);
  backdrop-filter: blur(6px);
}

.tz-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
  padding: 1.1rem 1.15rem 1.15rem;
}
.tz-card-body h3 {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tz-heading);
  /* Two lines, then an ellipsis: a nine-word oncology title must not make
     one card twice the height of its neighbours. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tz-card-summary {
  font-size: 0.86rem;
  color: var(--tz-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tz-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  font-size: 0.78rem;
  color: var(--tz-muted);
}
.tz-card-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.tz-card-meta svg { color: var(--tz-accent); }

.tz-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: auto;
  padding-block-start: 0.85rem;
  border-block-start: 1px solid var(--tz-line);
}
.tz-card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--tz-brand-mid);
}
.tz-card-action svg { transition: translate var(--tz-base) var(--tz-ease); }
.tz-card:hover .tz-card-action { color: var(--tz-accent-deep); }
.tz-card:hover .tz-card-action svg { translate: 3px 0; }
[dir="rtl"] .tz-card:hover .tz-card-action svg { translate: -3px 0; }

.tz-card-teacher { font-size: 0.8rem; color: var(--tz-muted); }
.tz-stars { display: inline-flex; gap: 2px; color: var(--tz-n300); }
.tz-stars .is-on { color: #e8a33d; }

/* --- Empty / error ------------------------------------------------------ */
.tz-state {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: clamp(2.25rem, 5vw, 3.5rem) 1.5rem;
  border-radius: var(--tz-r-md);
  border: 1px dashed var(--tz-line-strong);
  background: var(--tz-surface-soft);
  text-align: center;
}
.tz-state svg { color: var(--tz-accent); }
.tz-state h4 { font-size: 1.05rem; font-weight: 600; color: var(--tz-heading); }
.tz-state p { font-size: 0.92rem; color: var(--tz-muted); max-inline-size: 52ch; }
.tz-state--error { border-color: var(--tz-danger-line); background: var(--tz-danger-soft); }
.tz-state--error svg { color: var(--tz-danger); }
.tz-state-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-block-start: 0.75rem; }

/* --------------------------------------------------------------------------
   Text that came from the platform

   A course title is written in whichever language its author used, and this
   page is read in two. Dropping an English title into an Arabic paragraph
   without isolating it moves its full stop to the front — ".Updates on
   Doctors' Pathways" — because the surrounding paragraph's direction wins.
   `plaintext` lets the browser take the direction from the text itself, which
   is the only thing that can be right for content we do not control.
   -------------------------------------------------------------------------- */
.tz-bidi,
.tz-card-body h3,
.tz-card-summary,
.tz-card-teacher,
.tz-card-cat,
.tz-panel-course strong,
.tz-rich {
  unicode-bidi: plaintext;
  text-align: start;
}

/* --------------------------------------------------------------------------
   3. Sign in / create account
   -------------------------------------------------------------------------- */
.tz-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  border-radius: var(--tz-r-lg);
  border: 1px solid var(--tz-line);
  background: var(--tz-surface);
  box-shadow: var(--tz-shadow-md);
  overflow: hidden;
}
@media (max-width: 860px) {
  .tz-panel { grid-template-columns: minmax(0, 1fr); }
}

.tz-panel-aside {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--tz-grad-brand);
  color: rgb(255 255 255 / 0.76);
}
.tz-panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--tz-r-full);
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}
.tz-panel-aside h3 {
  margin-block: 1.1rem 0.75rem;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem);
  font-weight: 600;
  color: #fff;
  text-wrap: balance;
}
.tz-panel-aside > p { font-size: 0.92rem; }

/* The course the visitor asked for, restated inside the card, so that the
   sign-in never feels like it came out of nowhere. */
.tz-panel-course {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-block-start: 1.5rem;
  padding: 0.7rem;
  border-radius: var(--tz-r-sm);
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.16);
}
.tz-panel-course img {
  inline-size: 64px;
  block-size: 46px;
  border-radius: var(--tz-r-xs);
  object-fit: cover;
  flex-shrink: 0;
}
.tz-panel-course span { display: block; font-size: 0.68rem; color: rgb(255 255 255 / 0.6); }
.tz-panel-course strong { font-size: 0.88rem; color: #fff; font-weight: 600; line-height: 1.3; }

.tz-panel-points { display: grid; gap: 0.9rem; margin-block-start: 1.75rem; }
.tz-panel-points li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.88rem; }
.tz-panel-points svg { flex-shrink: 0; color: var(--tz-accent); margin-block-start: 2px; }
.tz-panel-points strong { color: #fff; font-weight: 600; }

.tz-panel-main { padding: clamp(1.5rem, 4vw, 2.25rem); }

.tz-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-block-end: 1.5rem;
  border-radius: var(--tz-r-full);
  background: var(--tz-n100);
}
.tz-tab {
  position: relative;
  z-index: 1;
  padding-block: 0.6rem;
  border-radius: var(--tz-r-full);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tz-muted);
  transition: color var(--tz-base) var(--tz-ease);
}
.tz-tab.is-active { color: var(--tz-heading); }
.tz-tab-marker {
  position: absolute;
  z-index: 0;
  inset-block: 4px;
  inset-inline-start: 4px;
  inline-size: calc(50% - 4px);
  border-radius: var(--tz-r-full);
  background: var(--tz-surface);
  box-shadow: var(--tz-shadow-sm);
  transition: translate var(--tz-base) var(--tz-ease);
}
.tz-tabs:has(.tz-tab:nth-child(2).is-active) .tz-tab-marker { translate: 100% 0; }
[dir="rtl"] .tz-tabs:has(.tz-tab:nth-child(2).is-active) .tz-tab-marker { translate: -100% 0; }

.tz-forms { position: relative; }
.tz-forms [data-tz-form] { display: none; }
.tz-forms[data-showing="login"] [data-tz-form="login"],
.tz-forms[data-showing="register"] [data-tz-form="register"] { display: block; }

.tz-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem 1rem;
  margin-block-end: 1.25rem;
}
.tz-field { display: grid; gap: 0.35rem; }
.tz-field--wide { grid-column: 1 / -1; }
.tz-field-label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tz-heading);
}
.tz-field-label em { font-style: normal; font-weight: 400; font-size: 0.74rem; color: var(--tz-faint); }

.tz-control { position: relative; display: block; }
.tz-control :is(input, select) {
  inline-size: 100%;
  min-block-size: 46px;
  padding-inline: 0.85rem;
  padding-block: 0.6rem;
  border: 1px solid var(--tz-n200);
  border-radius: var(--tz-r-sm);
  background: var(--tz-surface);
  color: var(--tz-body);
  font-size: 0.93rem;
  transition: border-color var(--tz-fast) var(--tz-ease), box-shadow var(--tz-fast) var(--tz-ease);
}
.tz-control :is(input, select):focus {
  outline: none;
  border-color: var(--tz-accent);
  box-shadow: 0 0 0 3px var(--tz-accent-tint);
}
.tz-control :is(input, select):disabled { background: var(--tz-n100); color: var(--tz-faint); }
.tz-control--select { display: block; }
.tz-control--select select {
  appearance: none;
  padding-inline-end: 2.4rem;
}
.tz-control--select > svg {
  position: absolute;
  inset-inline-end: 0.85rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  pointer-events: none;
  color: var(--tz-faint);
}
.tz-control input[type="password"],
.tz-control input[type="text"].has-reveal { padding-inline-end: 2.8rem; }
.tz-reveal {
  position: absolute;
  inset-inline-end: 0.35rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--tz-r-xs);
  color: var(--tz-faint);
}
.tz-reveal:hover { color: var(--tz-heading); background: var(--tz-n100); }

.tz-field-error { font-size: 0.78rem; color: var(--tz-danger); display: none; }
.tz-field-error.is-shown { display: block; }
.tz-field-error.is-hint { color: var(--tz-muted); }
.tz-field-hint { font-size: 0.75rem; color: var(--tz-faint); }
.tz-field.is-invalid .tz-control :is(input, select) { border-color: var(--tz-danger); }
.tz-check.is-invalid { color: var(--tz-danger); }

.tz-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.65rem;
  align-items: start;
  margin-block-end: 1.25rem;
  font-size: 0.85rem;
  color: var(--tz-muted);
}
.tz-check input {
  inline-size: 20px;
  block-size: 20px;
  margin: 2px 0 0;
  accent-color: var(--tz-accent-deep);
}
.tz-check .tz-field-error { grid-column: 2; }
.tz-check a { color: var(--tz-brand-mid); text-decoration: underline; text-underline-offset: 2px; }

.tz-form-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  margin-block-end: 1rem;
  border-radius: var(--tz-r-sm);
  font-size: 0.86rem;
  border: 1px solid;
}
.tz-form-note svg { flex-shrink: 0; margin-block-start: 2px; }
.tz-form-note.is-error { background: var(--tz-danger-soft); border-color: var(--tz-danger-line); color: var(--tz-danger); }
.tz-form-note.is-info { background: var(--tz-accent-soft); border-color: var(--tz-accent-tint); color: var(--tz-accent-deep); }

.tz-form-switch {
  margin-block-start: 1.1rem;
  text-align: center;
  font-size: 0.86rem;
  color: var(--tz-muted);
}
.tz-form-switch button {
  font-weight: 600;
  color: var(--tz-brand-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tz-form-switch button:hover { color: var(--tz-accent-deep); }

.tz-panel-skeleton {
  display: grid;
  gap: 0.75rem;
  padding: 2rem;
  border-radius: var(--tz-r-lg);
  border: 1px solid var(--tz-line);
  background: var(--tz-surface);
}
.tz-panel-skeleton span {
  display: block;
  block-size: 18px;
  border-radius: var(--tz-r-xs);
  background: linear-gradient(100deg, var(--tz-n100) 30%, var(--tz-surface) 50%, var(--tz-n100) 70%);
  background-size: 220% 100%;
  animation: tz-shimmer 1.4s linear infinite;
}
.tz-panel-skeleton span:nth-child(2) { inline-size: 80%; }
.tz-panel-skeleton span:nth-child(3) { inline-size: 55%; }

/* --- Signed in ---------------------------------------------------------- */
.tz-signed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  border-radius: var(--tz-r-lg);
  border: 1px solid var(--tz-accent-tint);
  background: var(--tz-accent-soft);
}
.tz-signed-mark {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  /* Solid, for the same reason as .tz-card-flag: the accent gradient is
     tuned per partner for the text it carries — near-black on a light site,
     white on a dark one — and this mark always carries near-black. */
  background: var(--tz-accent);
  color: var(--tz-on-accent);
}
.tz-signed-copy { flex: 1 1 260px; }
.tz-signed-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tz-accent-deep);
}
.tz-signed-copy h3 { margin-block: 0.35rem 0.4rem; font-size: 1.2rem; font-weight: 600; color: var(--tz-heading); }
.tz-signed-copy p { font-size: 0.9rem; color: var(--tz-muted); }
.tz-signed-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* --------------------------------------------------------------------------
   4. Course material from the platform

   Everything TebZone's authors wrote lands inside .tz-rich. The bridge has
   already stripped what is unsafe and scoped their <style> block to this
   class; what is left is to make it look like it belongs here.
   -------------------------------------------------------------------------- */
.tz-rich { color: var(--tz-body); line-height: 1.8; overflow-wrap: anywhere; }
.tz-rich > * + * { margin-block-start: 1rem; }
.tz-rich :is(h1, h2, h3, h4) { color: var(--tz-heading); font-weight: 600; line-height: 1.3; }
.tz-rich h1 { font-size: 1.5rem; }
.tz-rich h2 { font-size: 1.28rem; }
.tz-rich h3 { font-size: 1.1rem; }
.tz-rich :is(ul, ol) { padding-inline-start: 1.35rem; list-style: revert; }
.tz-rich li + li { margin-block-start: 0.4rem; }
.tz-rich a { color: var(--tz-brand-mid); text-decoration: underline; text-underline-offset: 2px; }
.tz-rich img { border-radius: var(--tz-r-sm); }
.tz-rich blockquote {
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--tz-accent);
  color: var(--tz-muted);
  font-style: italic;
}
.tz-rich table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  display: block;
  overflow-x: auto;
}
.tz-rich :is(th, td) { padding: 0.6rem 0.8rem; border: 1px solid var(--tz-line); text-align: start; }
.tz-rich th { background: var(--tz-surface-soft); color: var(--tz-heading); font-weight: 600; }
.tz-rich iframe {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  block-size: auto;
  border: 0;
  border-radius: var(--tz-r-md);
  background: #000;
}
.tz-rich-external a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: var(--tz-r-full);
  background: var(--tz-brand-soft);
  color: var(--tz-brand-mid);
  font-weight: 600;
  text-decoration: none;
}

}   /* @layer components */