/* The approved business-card palette; no additional theme colors. */
.level-entry { max-width:720px; margin:22px auto 0; text-align:left; }
.level-entry-head { display:flex; align-items:center; justify-content:center; text-align:center; gap:12px; margin-bottom:16px; }
.level-entry-head > span { color:var(--am-ink); font-size:15px; font-weight:500; }
.feature .level-entry .f-guide { margin:0; padding:4px 12px; min-height:36px; font-size:13px; font-weight:400; box-shadow:none; }
.level-capsules { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.level-capsules > .level-pill { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:50px; margin:0; padding:9px 10px; border:1px solid color-mix(in srgb,var(--am-violet) 24%,var(--am-white)); border-radius:99px; background:var(--am-white); color:var(--am-ink); font:inherit; font-size:14px; line-height:1.4; text-decoration:none; white-space:nowrap; cursor:pointer; box-shadow:none; transition:background .15s,border-color .15s; }
.level-capsules > .level-pill b { color:var(--am-violet); font-size:18px; font-weight:600; }
.level-capsules > .level-pill:hover { border-color:var(--am-violet); background:var(--am-cream); }
.level-capsules > .level-pill.on { border:1px solid var(--am-violet); padding:9px 10px; color:var(--am-white); background:var(--am-violet); }
.level-capsules > .level-pill.on b { color:inherit; }
.level-capsules > .level-pill:focus-visible { outline:3px solid var(--am-violet); outline-offset:3px; }
.level-reference { margin:10px 0 0; font-size:12px; line-height:1.6; color:var(--am-url); font-weight:400; }
.levels-page { --bg:var(--am-cream); --card:var(--am-white); --ink:var(--am-ink); --mute:var(--am-url); --blue:var(--am-violet); --accent-deep:var(--am-code); --soft:color-mix(in srgb,var(--am-pale) 16%,var(--am-white)); --line:color-mix(in srgb,var(--am-violet) 14%,var(--am-white)); }
.level-summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; margin-top:16px; padding-top:13px; border-top:1px solid var(--line); color:var(--am-url); font-size:14px; }
.level-summary strong { color:var(--am-violet); font-weight:500; }
.level-summary span:empty { display:none; }
@media(max-width:620px) {
  .level-capsules { grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
  .level-capsules > .level-pill { grid-column:span 2; min-height:46px; padding:8px; gap:6px; }
  .level-capsules > .level-pill:nth-child(n+4) { grid-column:span 3; }
  .level-capsules > .level-pill.on { padding:8px; }
  .level-capsules > .level-pill b { font-size:17px; }
  .level-entry { margin-top:18px; }
}
@media(max-width:359px) {
  .level-capsules > .level-pill { font-size:13px; gap:5px; }
}
@media(prefers-reduced-motion:reduce) { .level-capsules > .level-pill { transition:none; } }

/* Compact round alternative. Each badge reveals one part of the same brand
   gradient, so the five circles read as one purple-to-yellow progression. */
html[data-level-shape="round"] .level-entry { max-width:520px; }
html[data-level-shape="round"] .level-capsules {
  grid-template-columns:repeat(5,minmax(0,1fr)); max-width:480px;
  margin-inline:auto; align-items:start; justify-items:center; gap:12px;
}
html[data-level-shape="round"] .level-capsules > .level-pill {
  --level-gradient-x:0%; grid-column:auto; flex-direction:column; gap:7px;
  width:100%; max-width:none; height:auto; min-height:0; aspect-ratio:auto;
  box-sizing:border-box; padding:0; border:0; border-radius:0;
  background:transparent; color:var(--am-ink); font-size:12px; text-align:center;
}
html[data-level-shape="round"] .level-capsules > .level-pill:nth-child(2) { --level-gradient-x:25%; }
html[data-level-shape="round"] .level-capsules > .level-pill:nth-child(3) { --level-gradient-x:50%; }
html[data-level-shape="round"] .level-capsules > .level-pill:nth-child(4) { --level-gradient-x:75%; }
html[data-level-shape="round"] .level-capsules > .level-pill:nth-child(5) { --level-gradient-x:100%; }
html[data-level-shape="round"] .level-capsules > .level-pill b {
  display:grid; place-items:center; width:100%; max-width:76px; aspect-ratio:1;
  box-sizing:border-box; border-radius:50%; font-size:24px; line-height:1;
  font-weight:600; letter-spacing:-.03em; color:var(--am-code);
  background:var(--am-fog); background-size:500% 100%; background-position:var(--level-gradient-x) center;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--am-violet) 15%,transparent);
}
html[data-level-shape="round"] .level-capsules > .level-pill span { line-height:1.4; }
html[data-level-shape="round"] .level-capsules > .level-pill:hover b { box-shadow:inset 0 0 0 2px var(--am-violet); }
html[data-level-shape="round"] .level-capsules > .level-pill.on b { outline:2px solid var(--am-violet); outline-offset:3px; }
html[data-level-shape="round"] .level-capsules > .level-pill.on span { color:var(--am-violet); font-weight:600; }
html[data-level-shape="round"] .level-capsules > .level-pill:focus-visible { outline:0; }
html[data-level-shape="round"] .level-capsules > .level-pill:focus-visible b { outline:3px solid var(--am-violet); outline-offset:3px; }
html[data-level-shape="round"] .level-entry .level-reference { margin-top:13px; text-align:center; }
@media(max-width:620px) {
  html[data-level-shape="round"] .level-capsules { max-width:360px; gap:6px; }
  html[data-level-shape="round"] .level-capsules > .level-pill { font-size:11px; }
  html[data-level-shape="round"] .level-capsules > .level-pill b { max-width:60px; font-size:20px; }
}
@media(max-width:359px) {
  html[data-level-shape="round"] .level-capsules > .level-pill { font-size:10px; }
  html[data-level-shape="round"] .level-capsules > .level-pill b { font-size:18px; }
}