/* Shared page-title treatment (dashboards, quizzes, teacher tools, …).
   Replaces plain black <h1> text that didn't resize well on small screens.
   clamp() keeps the text legible down to phone widths instead of a single
   fixed font-size; the ellipsis fallback keeps a long title from ever
   breaking the shape.

   WHY IT HAS A SURFACE AT ALL — don't "simplify" this to bare text.
   The same title renders in two very different places:
     * inside a white header bar (student pages, admin-dashboard, …)
     * directly on the blue→pink body gradient (device-check.html,
       lesson-upload.html, dashboard.html)
   Bare dark text is unreadable on the second group. The surface is what
   makes one rule safe everywhere, so it stays.

   WHY IT IS NEUTRAL, NOT BRAND-FILLED.
   It used to be a saturated --primary-color fill with white text and a
   999px radius. Two problems: at 22px/700 with a drop-shadow it read as
   cartoonish, and — because it sits inline beside the grey .return-btn —
   a filled, fully-rounded chip reads as a *second button*, making a
   heading look clickable. Now it borrows the return button's language
   (neutral surface, hairline border, restrained radius) so the header row
   reads as one coherent pair, and earns its place as a title through
   weight and size rather than colour. Branding survives as the left
   accent, which still follows --primary-color (see js/branding.js).

   If you are tempted to make this bigger or refill it: don't. It is a
   page label, subordinate to the content below it. */
.page-title-pill {
  display: inline-block;
  /* On the pages where it sits inline beside .return-btn (generate-lesson,
     placement-test), baseline alignment leaves the two visibly off-centre
     from each other — they have different line-heights. */
  vertical-align: middle;
  max-width: 100%;
  background: #ffffff;
  color: #1f2937;
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  padding: 7px 16px;
  border: 1px solid #e5e7eb;
  /* The one branded element left, and the reason the shape reads as a
     title rather than a button. */
  border-left: 3px solid var(--primary-color, #66ccff);
  border-radius: 8px;
  /* Just enough lift to separate it from the gradient backgrounds; on a
     white header bar it is effectively invisible. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* The same treatment for the person's name in a profile hero
   (student/teacher/admin profile pages), so a profile reads as part of the
   same system as every other page.

   WHY IT IS A VARIANT AND NOT JUST .page-title-pill.
   Two things make the plain pill wrong here, and both are worth knowing
   before anyone "simplifies" this into one class:

   1. SIZE. The pill above is 14-17px because it is a page LABEL, and the
      note above rightly says not to make it bigger. A profile name is not
      a label — it is the subject of the page, sitting beside a 112px
      avatar. Dropping it from 28px to 15px would read as a caption. So
      this variant keeps hero scale and clamps for small screens, which
      also replaces the old `.profile-name { font-size: 1.4rem }` media
      override those pages each carried.

   2. TRUNCATION. The pill ellipsises, which is right for a long page title
      because "Monthly Report..." still reads as a label. It is wrong for a
      person: "Alexander Leon..." is just their name spelled wrong, and
      there is no shorter correct form. This wraps instead — the reason the
      profile pages already set word-break on the name.

   What it deliberately keeps identical: the neutral surface, the hairline
   border, the 8px radius, and the branded left accent. Those four are what
   make it recognisably the same family. */
.profile-name-pill {
  display: inline-block;
  max-width: 100%;
  background: #ffffff;
  color: #1f2937;
  font-weight: 700;
  /* Hero scale, not label scale. Floor of 20px keeps a long name readable
     on a phone without the fixed-size jump the old override made. */
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  padding: 6px 14px;
  border: 1px solid #e5e7eb;
  border-left: 3px solid var(--primary-color, #66ccff);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin: 0;
  /* Wrap, never ellipsis — see (2) above. */
  word-break: break-word;
}