/* ==========================================================================
   Wake family: badges.css  (requires tokens.css)
   Common-Sense Grade badges: A, C, F and "—" (no graded record).

   RULES (non-negotiable):
   1. Every grade shown links to its source (the vote, minutes, filing or
      ruling it was graded from). No source link, no letter.
   2. "—" is used whenever sourcing is missing or too thin. Never guess,
      never round up, never carry a grade over from a different office.
   3. Colour is never the only cue. Each grade has its own letter AND shape:
        A = solid circle   C = solid rounded square
        F = octagon with a hatched rim   — = dashed outline, no fill colour
   4. Every badge has an accessible name (aria-label) that spells out the
      grade, because screen readers may read "—" as nothing at all.

   Markup (grade):
     <a class="wake-grade wake-grade--a" href="SOURCE_URL"
        aria-label="Common-Sense Grade A. View source.">
       <span class="wake-grade__letter" aria-hidden="true">A</span></a>

   Markup (no grade; link to how grading works, not to a "source"):
     <a class="wake-grade wake-grade--none" href="/bear/how-we-grade"
        aria-label="No grade: not enough sourced data. How we grade.">
       <span class="wake-grade__letter" aria-hidden="true">—</span></a>
   ========================================================================== */

.wake-grade {
  --_size: 2.625rem;                      /* 42px, matches site grade tile */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: var(--_size);
  block-size: var(--_size);
  font-family: var(--wake-font-display);
  font-weight: var(--wake-fw-strong);
  font-size: calc(var(--_size) * 0.55);
  line-height: 1;
  color: var(--wake-grade-ink);
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--wake-dur-fast) var(--wake-ease);
}
.wake-grade--sm { --_size: 1.75rem; }
.wake-grade--lg { --_size: 3.5rem; }

a.wake-grade:hover { transform: translateY(-1px); }
a.wake-grade:focus-visible {
  outline: var(--wake-focus-ring);
  outline-offset: var(--wake-focus-offset);
  border-radius: var(--wake-radius-grade);
}

.wake-grade__letter { position: relative; z-index: 1; }

/* A: solid circle */
.wake-grade--a { background: var(--wake-grade-a); border-radius: 50%; box-shadow: var(--wake-shadow-sm); }

/* C: solid rounded square (the current site's grade tile shape) */
.wake-grade--c { background: var(--wake-grade-c); border-radius: var(--wake-radius-grade); box-shadow: var(--wake-shadow-sm); }

/* F: octagon, hatched rim, solid centre so the letter stays at 4.93:1 */
.wake-grade--f::before,
.wake-grade--f::after {
  content: "";
  position: absolute;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  z-index: 0;
}
.wake-grade--f::before {
  inset: 0;
  background: repeating-linear-gradient(45deg,
    var(--wake-grade-f-hatch) 0 2px, var(--wake-grade-f) 2px 5px);
}
.wake-grade--f::after { inset: 12%; background: var(--wake-grade-f); }

/* —: dashed outline, no fill colour */
.wake-grade--none {
  background: var(--wake-grade-none-fill);
  color: var(--wake-grade-none-ink);
  border: 2px dashed var(--wake-grade-none-ink);
  border-radius: var(--wake-radius-grade);
}

/* Forced colours / Windows High Contrast: shapes survive, colours don't */
@media (forced-colors: active) {
  .wake-grade { border: 2px solid CanvasText; color: CanvasText; background: Canvas; forced-color-adjust: none; }
  .wake-grade--none { border-style: dashed; }
  .wake-grade--f::before, .wake-grade--f::after { background: Canvas; }
  .wake-grade--f::before { background: repeating-linear-gradient(45deg, CanvasText 0 2px, Canvas 2px 5px); }
}

/* --------------------------------------------------------------------------
   Grade row: badge + label + one-line reason + source link
   (evolves the site's .wnw-grade-row)
   -------------------------------------------------------------------------- */
.wake-grade-row {
  display: flex;
  align-items: center;
  gap: var(--wake-space-3);
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(181,129,80,0.28);
  border-radius: 10px;
  font-family: var(--wake-font-body);
}
.wake-grade-row__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wake-grade-row__label {
  font-family: var(--wake-font-display);
  font-weight: var(--wake-fw-bold);
  font-size: var(--wake-fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--wake-track-label);
  color: var(--wake-color-text-label);
}
.wake-grade-row__desc { font-size: var(--wake-fs-small); line-height: 1.5; color: var(--wake-color-text); }
.wake-grade-row__source { font-size: var(--wake-fs-caption); color: var(--wake-color-link); }
.wake-grade-row__source:hover { color: var(--wake-color-link-hover); }

/* Legend (evolves the site's .grade-legend) */
.wake-grade-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.wake-grade-legend li { display: inline-flex; align-items: center; gap: var(--wake-space-2); color: var(--wake-color-text); font-size: var(--wake-fs-small); }