/* ============================================================================
   Exam keys — typewriter-key marks for examination credentials
   michaelchoi.nyc · locked 2026-08-01

   One Aboreto letter per discipline:  B Ballroom · L Latin · S Smooth · R Rhythm
   T+A = Theater Arts · N D / C A = NDCA adjudicator exam
   Negative key (amber letter, espresso face) = Associate
   Positive key (letter knocked out of solid amber) = Member / Licentiate

   Size is driven by one custom property, --k. Type size, dimple depth and cast
   shadow all scale off it. Default 42px · 28px inline in text · 64px for a
   legend or spec row. Below ~24px the NDCA block stops being readable — use a
   positive/negative N alone at that size.

   Palette and family come from the site tokens in /styles.css. The literal
   values are fallbacks only, so the sheet still renders standalone (the proof
   sheet in `icon-system/exam-keys/` loads it without styles.css). Never edit a
   fallback without changing the token it mirrors.

   The rgba() layers below are shading, not palette — they are the amber and the
   espresso at working opacities, the same way --line is written in styles.css.

   Amber on espresso only. On a light ground the dimple inverts and the negative
   key disappears. Spec, rules and open items:
   /Claude/Projects/Michael Choi/icon-system/exam-keys/HANDOFF.md
   ========================================================================== */

.exam-key {
  --k: 42px;
  --amber:      var(--accent,      #d99a3f);
  --amber-soft: var(--accent-soft, #f0c574);
  --espresso:   var(--bg,          #160f09);

  width: var(--k);
  height: var(--k);
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--font-display, "Aboreto", serif);
  font-size: calc(var(--k) * 0.46);
  line-height: 1;
  letter-spacing: .02em;
  padding-left: .02em;
  user-select: none;
}

/* Negative — Associate */
.exam-key {
  border: 1.5px solid var(--amber);
  color: var(--amber);
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
  background: radial-gradient(115% 100% at 50% 118%,
    rgba(217,154,63,.26) 0%,
    rgba(217,154,63,.11) 40%,
    rgba(217,154,63,.03) 74%,
    rgba(0,0,0,.28) 100%);
  box-shadow:
    inset 0 calc(var(--k) * .07) calc(var(--k) * .13) rgba(0,0,0,.6),       /* dimple: top shade */
    inset 0 calc(var(--k) * -.05) calc(var(--k) * .09) rgba(217,154,63,.3), /* dimple: bottom catch */
    inset 0 0 0 1px rgba(217,154,63,.12),                                   /* rim */
    0 calc(var(--k) * .045) 0 rgba(0,0,0,.6),                               /* key lip */
    0 calc(var(--k) * .12) calc(var(--k) * .26) rgba(0,0,0,.5);             /* cast */
}

/* Positive — Member / Licentiate */
.exam-key.is-member {
  border-color: var(--amber-soft);
  color: var(--espresso);
  text-shadow: 0 1px 0 rgba(255,230,187,.42);
  background: radial-gradient(115% 100% at 50% 118%,
    #f6d599 0%, #eab863 34%, #d99a3f 72%, #b97e2c 100%);
  box-shadow:
    inset 0 calc(var(--k) * .07) calc(var(--k) * .13) rgba(88,52,12,.5),
    inset 0 calc(var(--k) * -.05) calc(var(--k) * .09) rgba(255,236,203,.55),
    inset 0 0 0 1px rgba(255,225,175,.3),
    0 calc(var(--k) * .045) 0 rgba(120,80,26,.85),
    0 calc(var(--k) * .12) calc(var(--k) * .26) rgba(0,0,0,.45);
}

/* Theater Arts — T with a small A */
.exam-key .ta {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--k) * .02);
}
.exam-key .ta b { font-weight: inherit; font-size: calc(var(--k) * .42); }
.exam-key .ta i { font-style: normal;   font-size: calc(var(--k) * .25); }

/* NDCA — 2x2 letter block */
.exam-key .ndca {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: calc(var(--k) * .03) calc(var(--k) * .04);
  justify-items: center;
  font-size: max(7px, calc(var(--k) * .21));
  line-height: 1;
}

/* A row of keys */
.exam-key-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Optional — only when a key is genuinely a link.
   Brighten the border; leave the geometry alone. No hover lift. */
a.exam-key { text-decoration: none; }
a.exam-key:hover,
a.exam-key:focus-visible { border-color: var(--amber-soft); }
a.exam-key:focus-visible { outline: 2px solid rgba(240,197,116,.55); outline-offset: 2px; }

/* ── Legend for a figure whose nodes are keys ────────────────────────────────
   The keys carry real information (which exam, at what level) and `title` alone
   is invisible to touch and unreliable to screen readers — HANDOFF.md calls a
   visible legend mandatory wherever a key is load-bearing.

   It reads BEFORE the figure, not after: the marks have to be decodable at the
   moment the eye reaches the plate, not once it has already given up on them.

   A grid, not a wrapped flex row — wrapping lets each pill land wherever the
   previous label happened to end, so the column edges move with the viewport.
   Equal 1fr tracks hold the pills in register at every width. The track count
   is the only thing that changes across the breakpoint, and both counts divide
   eight items into at most three rows: 4 across (2 rows) / 3 across (3 rows).
   Keep it that way — a fourth row pushes the plate itself below the fold on a
   laptop, which is the whole thing the legend exists to serve. */
.exam-key-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 18px;
  margin-bottom: 16px;
}
.exam-key-legend > span { display: flex; align-items: center; gap: 9px; min-width: 0 }
.exam-key-legend .exam-key { --k: 40px }
.exam-key-legend .lbl {
  font-size: .7rem;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--muted, #a8937a);
}
@media (max-width: 700px) {
  .exam-key-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px }
  .exam-key-legend .exam-key { --k: 32px }
  .exam-key-legend .lbl { font-size: .62rem; letter-spacing: .08em }
}