/* =============================================================================
   ZAZTEK header inside Mathematics Genie
   -----------------------------------------------------------------------------
   zaz-header.css carries rules on the bare elements `header` and `nav`,
   because that is how the site header is written. Mathematics Genie uses both
   for its own chrome and inside result cards, so those rules have to be
   confined to the injected header and nowhere else.

   Without this, every result card header pins itself to the top of the screen
   — the same fault that hit the Gen Z term cards.
   ============================================================================= */

/* The injected header owns the top of the page. */
#site-header{position:relative;z-index:300}

/* Everything else that happens to be a <header> or <nav> is the module's. */
.mg-top,
main header, .mg-card header, .card header, .panel header, .step header,
.practice-item header, .answer-box header{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  background:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
.mg-top{background:var(--navy) !important}

main nav, .mg-top nav, .mg-tabs nav{
  display:flex;
  align-items:center;
  gap:.75rem !important;
}

/* The module bar sits under the site header, not beside it. */
.mg-top{margin-top:0}

/* Sharing a class: the link, a copy button and WhatsApp on one line. */
.mg-joinshare{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-top:.6rem}
.mg-joinshare input{flex:1;min-width:220px;padding:8px 10px;border:1px solid var(--rule);
  border-radius:6px;font:13px ui-monospace,Menlo,monospace;background:#fff;color:var(--text)}
.mg-joinshare .mg-btn{padding:8px 14px;font-size:13px}

/* A student's work list */
.mg-worklist{list-style:none;margin:0;padding:0}
.mg-worklist li{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  padding:.7rem 0;border-top:1px solid var(--rule);flex-wrap:wrap}
.mg-worklist li:first-child{border-top:0}
.mg-worklist li .mg-fine{display:block;margin-top:2px}
.mg-worklist li.done b{color:var(--muted);font-weight:500}
.mg-worklist li.late b{color:var(--red)}
.mg-tag{font:700 11px ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;background:#EEF2F6;color:var(--muted)}
.mg-tag.ok{background:#EAF7F1;color:#0F6B47}

