/* ============================================================
   Baraem GradeFlow — Notification Centre
   Calm activity counters, unmistakable quick actions, and an
   empty state that explains itself.
   ============================================================ */

/* ---- activity counters ------------------------------------
   The failure this replaces: a green glyph inside a green tile
   on a charcoal page, so the icon vanished. Identity now comes
   from three independent channels — a neutral well for the
   glyph, the numeral in brand green, and a hairline edge — so
   nothing depends on hue alone. */
.nw-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: 10px;
  cursor: help;
}
.nw-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nw-tile-ic {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* NEUTRAL ground, not brand — a white glyph reads at any contrast */
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
}
.nw-tile-ic svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nw-tile-b {
  min-width: 0;
}
.nw-tile-b .v {
  font: 600 20px/1.15 var(--font-en);
  color: var(--accent);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.nw-tile-b .k {
  font: 500 11.5px/1.35 var(--font);
  color: var(--muted-fg);
  margin-top: 2px;
}
.nw-tile-info {
  position: absolute;
  top: 7px;
  inset-inline-end: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 9.5px/1 var(--font-en);
  color: var(--text-faint);
  border: 1px solid var(--border);
  background: var(--surface);
  opacity: .7;
  pointer-events: none;
  user-select: none;
}
.nw-tile:hover .nw-tile-info,
.nw-tile:focus-visible .nw-tile-info { opacity: 1; }
.nw-tile[data-tip]:hover::after,
.nw-tile[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  width: min(280px, 60vw);
  padding: 9px 11px;
  background: var(--text);
  color: var(--text-on-brand);
  font: 400 12px/1.5 var(--font);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  text-align: start;
  pointer-events: none;
}
@media (max-height: 860px) {
  .nw-tile[data-tip]:hover::after,
  .nw-tile[data-tip]:focus-visible::after { top: auto; bottom: calc(100% + 6px); }
}

/* ---- quick templates -------------------------------------
   btn-soft sits almost the same value as the page ground, so
   these read as text rather than buttons until hovered. A
   visible border, a raised ground and a full-strength label
   make them look pressable in the resting state. */
.nw-tpl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  font: 500 12.5px/1.3 var(--font);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.nw-tpl svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nw-tpl:hover {
  background: var(--accent-soft, var(--surface));
  border-color: var(--accent);
  color: var(--accent-ink, var(--text));
}
.nw-tpl:active { transform: translateY(1px); }
.nw-tpl:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- empty state ------------------------------------------
   Calm and useful: what is missing, why it matters, and the
   one action that resolves it. No illustration. */
.nw-empty {
  padding: 44px 26px 48px;
  text-align: center;
}
.nw-empty-h {
  font: 600 12px/1 var(--font);
  letter-spacing: .13em;
  color: var(--muted-fg);
  text-transform: uppercase;
}
.nw-empty p {
  max-width: 46ch;
  margin: 12px auto 20px;
  font: 400 13.5px/1.65 var(--font);
  color: var(--muted-fg);
}
.nw-empty .btn { margin-inline: auto; }

/* ---- dark mode -------------------------------------------
   The icon well lightens and the glyph goes to full ink so it
   stays legible without brightening the whole interface. */
[data-theme="dark"] .nw-tile-ic {
  background: var(--surface-3, var(--surface-2));
  color: var(--text);
  border-color: var(--border-strong);
}
[data-theme="dark"] .nw-tpl {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
[data-theme="dark"] .nw-tpl:hover {
  background: var(--accent-soft, var(--surface-3));
  border-color: var(--accent);
}
[data-theme="dark"] .nw-tile[data-tip]:hover::after,
[data-theme="dark"] .nw-tile[data-tip]:focus-visible::after {
  background: var(--surface-3, var(--surface-2));
  color: var(--text);
  border: 1px solid var(--border-strong);
}
/* The numeral carries the brand. On a dark ground the mid-green accent only
   reached 3.6:1, so dark mode steps up to brand-300 — the same green, one
   step brighter, still restrained. */
[data-theme="dark"] .nw-tile-b .v { color: var(--brand-300); }
[data-theme="dark"] .nw-tpl svg { stroke: var(--brand-300); }

/* ---- section eyebrow -----------------------------------------
   Names the block before the numbers appear, so a reader knows
   whether the counters are activity or content. */
.nw-eyebrow {
  font: 600 11px/1 var(--font);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-3);
}