/* ============================================================
   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; } }

/* ---- one-click demo sign-in ------------------------------------
   Three role buttons that sign in immediately. They are the first
   thing a reviewer sees, so they must look pressable in the resting
   state: full-strength ink, a visible edge, and a filled brand
   ground rather than a tint that reads as disabled. */
.demo-quick {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.demo-quick-h {
  font: 700 11px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 9px;
}
.demo-quick-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.demo-quick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  font: 600 13px/1.2 var(--font);
  color: var(--text-on-brand);
  background: var(--bg-green-700);
  border: 1px solid var(--bg-green-800);
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}
.demo-quick-btn svg {
  width: 15px; height: 15px; flex: 0 0 auto;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.demo-quick-btn:hover { background: var(--bg-green-600); }
.demo-quick-btn:active { transform: translateY(1px); }
.demo-quick-btn:focus-visible {
  outline: 2px solid var(--bg-green-300);
  outline-offset: 2px;
}
.demo-quick-btn[disabled] { opacity: .55; cursor: not-allowed; }
.demo-quick-note { margin-top: 9px; line-height: 1.5; }

@media (max-width: 420px) {
  .demo-quick-row { grid-template-columns: 1fr; }
}
[data-theme="dark"] .demo-quick-btn {
  background: var(--bg-green-600);
  border-color: var(--bg-green-400);
  color: #fff;
}
[data-theme="dark"] .demo-quick-btn:hover { background: var(--bg-green-500); }