/* ═══════════════════════════════════════════════════════════════════════════
   GLOW.CSS - Settings in Home's light, and work that comes back.

   Two things, both new, both drawn from the language Home already speaks:

     SETTINGS. Every tab opens on a hero like Home's (the lime-to-aqua
     --panel-hero), naming the tab, what it is for, and a status line that
     answers each change. The rail carries an icon per tab and one raised
     highlight that slides to the open tab. A row flashes where the finger
     was when its setting saves, rows that depend on a switch rest while it is
     off, and Notifications previews what it will send. The markup is painted
     by settingsGlowInit() and friends in app.js.

     GRADES. The card a grade or feedback note opens (openGradeReveal in
     app.js, core/grade_alerts.py): the score under a frosted cover until the
     student taps Reveal, the teacher's comment beside it, and the class's
     Grades tab row it opens on.

   Loads right after soft.css and before phone.css, because it sets corners
   and only rounded.css may follow phone.css with a radius
   (tests/test_phone_shell.py). It mints no tokens: everything here is spent
   from redesign.css (tests/test_beta_redesign.py). The `!important`s answer
   rules in soft.css and pop.css that carry their own.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · The tab hero ───────────────────────────────────────────────────── */
body[data-view="settings"] .settings-tab-content.has-hero::before { display: none !important; }

body[data-view="settings"] .set-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 var(--s-5, 24px);
  padding: 24px 72px 22px 24px;
  border-radius: var(--r-card, 28px);
  background: var(--panel-hero);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  isolation: isolate;
}
/* A slow sheen across the panel, the way Home's hero catches the light. */
body[data-view="settings"] .set-hero::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  background: radial-gradient(40% 60% at 20% 30%, rgb(255 255 255 / 0.35), transparent 70%);
  opacity: 0.6;
  animation: glow-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
html[data-theme="dark"] body[data-view="settings"] .set-hero::after,
body[data-theme="dark"][data-view="settings"] .set-hero::after { opacity: 0.12; }
@keyframes glow-drift {
  from { transform: translate3d(-4%, -2%, 0); }
  to   { transform: translate3d(6%, 4%, 0); }
}
body[data-view="settings"] .set-hero-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: var(--surface-strong);
  color: var(--accent);
  box-shadow: 0 2px 0 0 var(--lip-quiet), 0 10px 20px -14px rgb(19 32 27 / 0.45);
}
body[data-view="settings"] .set-hero-ico svg { width: 20px; height: 20px; }
body[data-view="settings"] .set-hero-text { min-width: 0; display: grid; gap: 4px; }
body[data-view="settings"] .set-hero-kicker {
  font-size: 12px;
  font-weight: 650;
  color: var(--panel-ink);
}
body[data-view="settings"] .set-hero .set-hero-title {
  margin: 0 !important;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: var(--text) !important;
}
body[data-view="settings"] .set-hero-sub {
  margin: 2px 0 0 !important;
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.45;
  color: var(--panel-ink);
}
/* The save status: quiet until something changes, then it answers. */
body[data-view="settings"] .set-hero-saved {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 11px 4px 9px;
  border-radius: var(--soft-control, 999px);
  font-size: 12px;
  font-weight: 600;
  color: var(--panel-ink);
  background: rgb(255 255 255 / 0.55);
  transition: background 200ms var(--ease-out, ease), color 200ms var(--ease-out, ease);
}
html[data-theme="dark"] body[data-view="settings"] .set-hero-saved,
body[data-theme="dark"][data-view="settings"] .set-hero-saved { background: rgb(255 255 255 / 0.08); }
body[data-view="settings"] .set-hero-saved::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
body[data-view="settings"] .set-hero-saved[data-state="saving"]::before {
  opacity: 1;
  animation: glow-pulse 900ms ease-in-out infinite;
}
body[data-view="settings"] .set-hero-saved[data-state="saved"] {
  background: var(--surface-strong);
  color: var(--accent);
}
body[data-view="settings"] .set-hero-saved[data-state="saved"]::before {
  opacity: 1;
  background: none;
  border-radius: 0;
  /* A check, drawn by its two strokes. */
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  width: 5px;
  height: 10px;
  transform: rotate(45deg) translate(-1px, -2px);
  animation: glow-pop 320ms var(--ease-out, ease) both;
}
body[data-view="settings"] .set-hero-saved[data-state="error"] {
  background: rgb(var(--danger-rgb) / 0.12);
  color: var(--danger);
}
@keyframes glow-pulse { 50% { transform: scale(0.55); opacity: 0.4; } }
@keyframes glow-pop { from { transform: rotate(45deg) translate(-1px, -2px) scale(0.2); } }

/* The bell heads the open tab (app.js notifDock); with a hero it sits in
   the hero's corner, and its panel drops from there. */
body[data-view="settings"] .settings-tab-content.has-hero > .notif-center-wrap > .notif-bell-btn {
  top: 18px !important;
  right: 18px !important;
  background: var(--surface-strong) !important;
}
body:not(#_)[data-view="settings"] .settings-tab-content.has-hero > .notif-center-wrap > .notif-panel {
  top: 66px !important;
  right: 10px !important;
}

@media (max-width: 767px) {
  body[data-view="settings"] .set-hero { padding: 18px 64px 18px 18px; gap: 12px; }
  body[data-view="settings"] .set-hero-ico { width: 38px; height: 38px; border-radius: 14px; }
  body[data-view="settings"] .set-hero-sub { font-size: 13px; }
  body[data-view="settings"] .settings-tab-content.has-hero > .notif-center-wrap > .notif-bell-btn {
    top: 12px !important;
    right: 12px !important;
  }
  body:not(#_)[data-view="settings"] .settings-tab-content.has-hero > .notif-center-wrap > .notif-panel { top: 62px !important; }
}

/* ── 2 · The rail: an icon per tab, one highlight that slides ───────────── */
/* Not !important: Settings search hides a tab with an inline display:none,
   and the learning group can be [hidden]; both have to keep winning. */
body[data-view="settings"] .settings-tab:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
body[data-view="settings"] .set-tab-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  color: var(--text-dim);
  transition: background 200ms var(--ease-out, ease), color 200ms var(--ease-out, ease),
              transform 260ms var(--ease-out, ease);
}
body[data-view="settings"] .settings-tab:hover .set-tab-ico { color: var(--accent); transform: translateY(-1px); }
body[data-view="settings"] .settings-tab.active .set-tab-ico {
  background: var(--panel-mint);
  color: var(--accent);
}
body[data-view="settings"] .settings-tabs.has-glider { position: relative !important; }
body[data-view="settings"] .set-rail-glider {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--soft-control, 999px);
  background: var(--surface-strong);
  box-shadow: 0 2px 0 0 var(--lip-quiet), 0 10px 20px -12px rgb(19 32 27 / 0.30);
  opacity: 0;
  pointer-events: none;
  transition: transform 380ms cubic-bezier(0.22, 1.2, 0.36, 1),
              width 380ms cubic-bezier(0.22, 1.2, 0.36, 1),
              height 380ms cubic-bezier(0.22, 1.2, 0.36, 1),
              opacity 160ms linear;
}
body[data-view="settings"] .set-rail-glider.on { opacity: 1; }
body[data-view="settings"] .set-rail-glider.no-anim { transition: opacity 160ms linear; }
/* While the highlight is on, the open tab lets it show through. (0,7,1):
   pop.css paints the open tab at (0,5,1) with !important. */
body[data-theme][data-view="settings"] .settings-tabs.glide-ready .settings-tab.active.active {
  background: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 760px) {
  body[data-view="settings"] .set-rail-glider { display: none; }
  body[data-view="settings"] .set-tab-ico { width: 22px; height: 22px; }
}

/* ── 3 · A tab arrives ──────────────────────────────────────────────────── */
/* Rows that animations.js already brings in (mo-hide / mo-in) are left to
   it: a second entrance here would restart its own when it ends. */
body[data-view="settings"] .settings-tab-content.is-entering > :not(.notif-center-wrap):not(.mo-hide):not(.mo-in) {
  animation: glow-rise 420ms var(--ease-out, ease) both;
  animation-delay: calc(var(--set-i, 0) * 24ms);
}
@keyframes glow-rise {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
}

/* ── 4 · A row answers its save; a row waiting on a switch rests ───────── */
/* The row you changed says so beside its label once the server has it
   (setSaveState in app.js). On the label, not the row: the rows carry the
   entrance animation from animations.css, and a second animation on them
   would restart it. */
body[data-view="settings"] .set-row-saved {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 1px 8px 1px 6px;
  border-radius: var(--soft-control, 999px);
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
  animation: glow-chip 1600ms var(--ease-out, ease) both;
}
body[data-view="settings"] .set-row-saved::before {
  content: "";
  width: 4px;
  height: 8px;
  margin: -2px 2px 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
body[data-view="settings"] .set-row-saved.is-error {
  background: rgb(var(--danger-rgb) / 0.12);
  color: var(--danger);
}
body[data-view="settings"] .set-row-saved.is-error::before { display: none; }
@keyframes glow-chip {
  0% { opacity: 0; transform: translateY(3px) scale(0.9); }
  12%, 75% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
body[data-view="settings"] .set-row.is-off > * {
  opacity: 0.45;
  transition: opacity 200ms var(--ease-out, ease);
}
body[data-view="settings"] .set-row.is-off { cursor: default; }

/* The toggle's knob springs, and the track takes a breath as it lands. */
body[data-view="settings"] .set-toggle .seg-knob {
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease !important;
}

/* ── 5 · Chips that switch (what the summary includes) ──────────────────── */
body[data-view="settings"] .set-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 1 auto;
}
body[data-view="settings"] .set-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: var(--soft-control, 999px);
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms var(--ease-out, ease), color 180ms var(--ease-out, ease),
              border-color 180ms var(--ease-out, ease), transform 180ms var(--ease-out, ease);
}
body[data-view="settings"] .set-chip::before {
  content: "";
  width: 6px;
  height: 10px;
  margin: -2px 0 0 -2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) scale(0);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
body[data-view="settings"] .set-chip.on {
  background: rgb(var(--accent-rgb) / 0.12);
  border-color: rgb(var(--accent-rgb) / 0.45);
  color: var(--accent);
}
body[data-view="settings"] .set-chip.on::before { transform: rotate(45deg) scale(1); }
body[data-view="settings"] .set-chip:active { transform: scale(var(--soft-press, 0.975)); }
body[data-view="settings"] .set-chip:disabled { cursor: default; }
@media (max-width: 767px) {
  body[data-view="settings"] .set-chips { justify-content: flex-start; }
}

/* ── 6 · Previews on Notifications ──────────────────────────────────────── */
body[data-view="settings"] .set-preview {
  margin-top: var(--s-3, 12px);
  padding: 16px 18px;
  border-radius: var(--soft-panel, 28px);
  background: var(--panel-mint);
  transition: filter 220ms var(--ease-out, ease), opacity 220ms var(--ease-out, ease);
}
body[data-view="settings"] .set-preview.set-preview-mail { background: var(--panel-aqua); }
body[data-view="settings"] .set-preview.is-off { filter: saturate(0.2); opacity: 0.7; }
body[data-view="settings"] .set-pv-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--panel-ink);
  margin-bottom: 8px;
}
body[data-view="settings"] .set-pv-note {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 20px;
  background: var(--surface-strong);
  box-shadow: 0 1px 2px rgb(19 32 27 / 0.06);
  transition: transform 300ms var(--ease-out, ease), box-shadow 300ms var(--ease-out, ease);
}
body[data-view="settings"] .set-pv-note.is-pop {
  box-shadow: 0 18px 36px -20px rgb(19 32 27 / 0.45), 0 1px 2px rgb(19 32 27 / 0.06);
  transform: translateY(-2px);
}
body[data-view="settings"] .set-pv-note .notif-who { grid-row: auto; margin: 0; }
body[data-view="settings"] .set-pv-text { min-width: 0; display: grid; gap: 2px; }
body[data-view="settings"] .set-pv-text strong { font-size: 14px; font-weight: 700; color: var(--text); }
body[data-view="settings"] .set-pv-text span { font-size: 13px; color: var(--text-dim); }
body[data-view="settings"] .set-pv-score {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 64px;
  height: 36px;
  padding: 0 10px;
  border-radius: 14px;
  background: rgb(34 160 108 / 0.14);
  color: #146b46;
  font-weight: 800;
  overflow: hidden;
}
body[data-view="settings"] .set-pv-score b { transition: filter 260ms ease; }
body[data-view="settings"] .set-pv-score em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  opacity: 0;
  transition: opacity 260ms ease;
}
body[data-view="settings"] .set-pv-score.is-covered b { filter: blur(6px); }
body[data-view="settings"] .set-pv-score.is-covered em { opacity: 1; }
body[data-view="settings"] .set-pv-where {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--panel-ink);
}
body[data-view="settings"] .set-pv-mail {
  border-radius: 20px;
  background: var(--surface-strong);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(19 32 27 / 0.06);
}
body[data-view="settings"] .set-pv-mail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
body[data-view="settings"] .set-pv-mail-head span { color: var(--text-dim); }
body[data-view="settings"] .set-pv-mail-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 10px 14px;
  font-size: 13px;
  animation: glow-rise 280ms var(--ease-out, ease) both;
}
body[data-view="settings"] .set-pv-mail-row + .set-pv-mail-row { border-top: 1px solid var(--border); }
body[data-view="settings"] .set-pv-mail-h { font-weight: 700; color: var(--text); }
body[data-view="settings"] .set-pv-mail-a { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-view="settings"] .set-pv-mail-b { color: var(--text-dim); text-align: right; }
body[data-view="settings"] .set-pv-mail-row.is-empty { display: block; color: var(--text-dim); }
@media (max-width: 767px) {
  body[data-view="settings"] .set-pv-mail-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  body[data-view="settings"] .set-pv-mail-b { text-align: left; }
}

/* ── 7 · The bell: a grade or a comment has its own mark ────────────────── */
body:not(#_) .notif-item:is([data-kind="grade"], [data-kind="feedback"]) {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 3px;
  align-items: start;
}
.notif-item:is([data-kind="grade"], [data-kind="feedback"]) > :not(.notif-who) { grid-column: 2; }
.notif-who.is-grade { background: var(--panel-lime); color: #3f6b12; }
html[data-theme="dark"] .notif-who.is-grade,
body[data-theme="dark"] .notif-who.is-grade { background: rgb(164 223 92 / 0.18); color: #c8ef9a; }

/* A grade popup carries the lime of the mark, so it reads as news. */
.aluma-popup.aluma-popup-grade { border-color: rgb(164 223 92 / 0.55) !important; }

/* ── 8 · The reveal card ────────────────────────────────────────────────── */
.gr-back {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(10 20 16 / 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 200ms var(--ease-out, ease);
}
.gr-back.show { opacity: 1; }
.gr-card {
  position: relative;
  width: min(480px, 100%);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  padding: 24px 24px 20px;
  border-radius: var(--r-dialog, 32px);
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: 0 40px 80px -30px rgb(10 20 16 / 0.55), 0 1px 2px rgb(10 20 16 / 0.08);
  transform: translateY(14px) scale(0.98);
  transition: transform 340ms cubic-bezier(0.22, 1.2, 0.36, 1);
}
.gr-back.show .gr-card { transform: none; }
/* The top of the card is Home's panel, faded into the white. */
.gr-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 150px;
  background: var(--panel-hero);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
  mask-image: linear-gradient(180deg, #000 30%, transparent);
  pointer-events: none;
}
.gr-card > * { position: relative; }
.gr-x {
  position: absolute !important;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--surface-strong);
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(19 32 27 / 0.10);
}
.gr-kicker { font-size: 12.5px; font-weight: 650; color: var(--panel-ink); padding-right: 44px; }
.gr-title {
  margin: 4px 0 14px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  padding-right: 44px;
}
.gr-reveal-all {
  margin: -4px 0 12px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  background: rgb(var(--accent-rgb) / 0.10);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.gr-items { display: grid; gap: 12px; }
.gr-item {
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--bg-elev-1);
  animation: glow-rise 360ms var(--ease-out, ease) both;
}
.gr-item + .gr-item { animation-delay: 60ms; }
.gr-item-title { font-weight: 700; font-size: 15px; line-height: 1.3; }
.gr-item-meta { margin-top: 2px; font-size: 12.5px; color: var(--text-dim); }
.gr-score-box {
  position: relative;
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
}
.gr-score {
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgb(var(--accent-rgb) / 0.08);
  transition: filter 420ms var(--ease-out, ease), transform 420ms var(--ease-out, ease);
}
.gr-score.grade-a { background: rgb(34 160 108 / 0.12); }
.gr-score.grade-b { background: rgb(var(--accent-rgb) / 0.10); }
.gr-score.grade-c { background: rgb(214 158 46 / 0.14); }
.gr-score.grade-low { background: rgb(220 60 60 / 0.10); }
.gr-big {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gr-score.grade-a .gr-big { color: #1d8a5c; }
.gr-score.grade-c .gr-big { color: #9a6a0a; }
.gr-score.grade-low .gr-big { color: var(--danger, #c53030); }
.gr-small { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.gr-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* The cover: frosted over the number until the student asks to see it. */
.gr-cover {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.92), rgb(var(--accent-rgb) / 0.78));
  color: var(--accent-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 320ms var(--ease-out, ease), transform 320ms var(--ease-out, ease);
}
.gr-cover:hover { filter: brightness(1.05); }
.gr-cover-ico { display: grid; place-items: center; }
.gr-cover-ico svg { width: 18px; height: 18px; }
.is-covered .gr-cover { display: flex; }
.is-covered .gr-score { filter: blur(14px); transform: scale(0.96); }
.is-revealed .gr-score { animation: glow-land 520ms cubic-bezier(0.22, 1.2, 0.36, 1) both; }
@keyframes glow-land {
  from { filter: blur(10px); transform: scale(0.94); }
  60% { filter: blur(0); transform: scale(1.02); }
  to { transform: none; }
}
/* The comment waits under the cover too, unless the note was about it. */
.gr-item.is-covered .gr-fb:not(.is-open) { display: none; }
.gr-fb { margin-top: 12px; display: grid; gap: 8px; }
.gr-fb .fb-comment { margin: 0; }
.is-revealed .gr-fb { animation: glow-rise 360ms var(--ease-out, ease) 120ms both; }
.gr-more-note { font-size: 12.5px; color: var(--text-dim); }
.gr-note { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.gr-item .gb-open { display: inline-block; margin-top: 10px; }
/* The class line: under the work, or the whole card when the class moved. */
.gr-class {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--panel-mint);
  overflow: hidden;
}
.gr-class-label { font-size: 12.5px; font-weight: 650; color: var(--panel-ink); }
.gr-class-val { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; transition: filter 320ms ease; }
.gr-class-was { font-size: 12.5px; color: var(--panel-ink); flex-basis: 100%; }
.gr-class.is-focus { display: grid; gap: 4px; padding: 18px; margin-top: 0; }
.gr-class.is-focus .gr-class-val { font-size: 2.2rem; letter-spacing: -0.045em; line-height: 1; }
.gr-class.is-covered .gr-class-val,
.gr-class.is-covered .gr-class-was { filter: blur(8px); }
.gr-class:not(.is-focus).is-covered::after {
  content: "Shows when you reveal a grade";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--panel-ink);
}
.gr-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.gr-card.is-loading .gr-items .skeleton { height: 120px; border-radius: 22px; }
@media (max-width: 767px) {
  .gr-back { place-items: end center; padding: 0; }
  .gr-card {
    width: 100%;
    max-height: 88vh;
    border-radius: var(--r-dialog, 32px) var(--r-dialog, 32px) 0 0;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(40px);
  }
  .gr-actions > * { flex: 1 1 0; }
}

/* ── 9 · The Grades tab: new work, the row a note opened, its feedback ──── */
.gb-pill.gb-new {
  margin-left: 8px;
  vertical-align: 1px;
  background: var(--panel-lime);
  color: #3f6b12;
}
html[data-theme="dark"] .gb-pill.gb-new,
body[data-theme="dark"] .gb-pill.gb-new { background: rgb(164 223 92 / 0.18); color: #c8ef9a; }
.gb-row.is-focus {
  background: rgb(var(--accent-rgb) / 0.10);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.45);
  border-radius: 14px;
  animation: glow-focus 2600ms ease-out both;
}
@keyframes glow-focus {
  0%, 70% { box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.45); }
  to { box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0); }
}
.gb-row-detail .gb-row-fb { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 6px; cursor: auto; }
/* redesign.css sets every span in a row's detail as a small block label;
   inside the thread they are the comment's own parts. */
.gb-row-detail .gb-row-fb span { display: inline; font-size: 12px; color: var(--text-muted); }
.gb-row-detail .gb-row-fb :is(.fb-rubric-total, .fb-crit-pts) { font-size: 13px; color: var(--text); }

/* ── 10 · Popups: one at a time, from the bell ──────────────────────────────
   app.js queues them (showAlumaPopup), waits for the page to settle, and
   docks the rail under the bell (_popupPlace), so a popup reads as the bell
   speaking rather than a card dropped over the page title. It rises in on a
   spring, leaves the way it came, and says how many are waiting. Its words
   wrap: a long assignment title is never cut. */
.aluma-popup-wrap.is-docked {
  top: var(--popup-top, 76px);
  right: var(--popup-right, 24px);
  left: auto;
  transform: none;
  align-items: flex-end;
  width: min(380px, calc(100vw - 32px));
}
@media (max-width: 767px) {
  .aluma-popup-wrap { top: calc(var(--topbar-h, 56px) + 14px); }
}
.aluma-popup {
  padding: 16px 18px 14px !important;
  border-radius: 22px !important;
  opacity: 0;
  transform: translate3d(0, -12px, 0) scale(0.96);
  transform-origin: top right;
  transition: opacity 260ms ease, transform 560ms cubic-bezier(0.22, 1.2, 0.36, 1);
}
.aluma-popup.show { opacity: 1; transform: none; }
.aluma-popup.leaving {
  opacity: 0;
  transform: translate3d(0, -8px, 0) scale(0.98);
  transition: opacity 200ms ease, transform 240ms ease;
}
.aluma-popup .aluma-popup-title {
  margin-right: 30px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.aluma-popup .aluma-popup-body {
  margin: 6px 0 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.aluma-popup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.aluma-popup-foot:not(:has(> :not([hidden]))) { display: none; }
.aluma-popup .aluma-popup-cta { padding: 8px 16px; border-radius: 999px; font-size: 13px; }
.aluma-popup-more {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.aluma-popup .aluma-popup-x {
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background 160ms ease, color 160ms ease;
}
.aluma-popup .aluma-popup-x:hover { background: rgb(var(--accent-rgb) / 0.10); color: var(--text); }
/* The bell answers as its popup arrives. */
.notif-bell-btn.is-ringing svg {
  transform-origin: 50% 10%;
  animation: glow-ring 900ms ease-in-out;
}
@keyframes glow-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  75% { transform: rotate(2deg); }
}

/* ── 11 · Less motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-view="settings"] .set-hero::after,
  body[data-view="settings"] .settings-tab-content.is-entering > *,
  body[data-view="settings"] .set-pv-mail-row,
  body[data-view="settings"] .set-hero-saved::before,
  body[data-view="settings"] .set-row-saved,
  .gr-item, .is-revealed .gr-score, .is-revealed .gr-fb, .gb-row.is-focus {
    animation: none !important;
    animation-delay: 0s !important;
  }
  body[data-view="settings"] .set-rail-glider,
  .gr-back, .gr-card, .gr-score, .gr-cover {
    transition: none !important;
  }
  .aluma-popup, .aluma-popup.leaving { transform: none !important; transition: opacity 160ms linear !important; }
  .notif-bell-btn.is-ringing svg { animation: none !important; }
}