/* ============================================================
   BARAEM GRADEFLOW — DEMO MODE MARKER

   A visitor who reaches the public demo must be able to tell, in one glance,
   that nothing they are looking at is a real pupil. This is not decoration: a
   demonstration that could be mistaken for live school data is a privacy
   problem, and the marker has to survive a screenshot taken out of context.

   It is deliberately the same restrained gold the rest of the product uses —
   an unmistakable but still academic signal, not a loud banner.
   ============================================================ */

.demo-mark {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-2) var(--s-4);
  background: linear-gradient(90deg,
    var(--gold-600) 0%, var(--gold-500) 100%);
  color: #22190a;
  font-size: var(--t-12);
  font-weight: 700;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--gold-700);
}
.demo-mark-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22190a; flex: 0 0 auto;
}
.demo-mark-t { text-transform: uppercase; }
.demo-mark-sub { font-weight: 600; opacity: .82; text-transform: none; letter-spacing: 0; }
.demo-mark-spacer { margin-inline-start: auto; }
.demo-mark-reset {
  border: 1px solid rgba(34,25,10,.42);
  background: rgba(255,255,255,.28);
  color: #22190a;
  border-radius: var(--r-xs);
  font: inherit; font-size: var(--t-11); font-weight: 700;
  padding: 1px var(--s-2);
  cursor: pointer;
}
.demo-mark-reset:hover { background: rgba(255,255,255,.5); }

@media (max-width: 640px) {
  .demo-mark { font-size: var(--t-11); padding: var(--s-2) var(--s-3); }
  .demo-mark-sub { width: 100%; }
  .demo-mark-spacer { display: none; }
}
@media print { .demo-mark { display: none !important; } }