/* Badge pages — page-specific components layered on the site's style.css.
   Everything here uses the homepage's design tokens (--brand-purple, --space-*,
   --glass-*, --text-*) so these pages stay visually identical to the homepage. */

:root {
  --es-amber: #FFC96B;            /* Spanish-phrase highlight (badge pages only) */
  --card-radius: 10px;            /* founder call: 10pt on every container */
  --card-pad-x: 28px;             /* one inner padding => every container's text on one rail */
  --card-pad-y: 26px;
  --gold-step: #FFC107;           /* iOS goldAccent — earned/step marker */
  --badge-primary: var(--brand-purple);
  --badge-secondary: var(--es-amber);
}

/* One page width everywhere: the site's --container-max (1100px).
   Reading content sits in a centered 780px column inside it. */
.wrap { max-width: var(--container-max); margin: 0 auto; padding: 34px var(--container-pad) 96px;
  position: relative; z-index: 2; }
.wrap-article > * { max-width: 780px; margin-inline: auto; }
/* Scoped: this stylesheet is also loaded on the homepage, which has its own sections. */
.wrap section { margin-top: var(--space-3xl, 56px); }
.muted { color: var(--text-secondary); }

/* ===== Masthead (founder's Figma, LingoMatch-UI 3872-47) ===== */
.site-header { position: relative; height: 196px; z-index: 2; }
.header-inner { position: relative; max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 100%; }
.masthead-rule { position: absolute; left: 3.5%; right: 3.5%; top: 124px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-purple-light), transparent); }
.nav-left, .nav-right { position: absolute; top: 92px; display: flex; gap: 42px; }
.nav-left { left: 24px; }
.nav-right { right: 24px; }
.site-header .nav-link { color: var(--text-primary); text-decoration: none; font-size: 15px;
  line-height: 1; font-weight: 500; white-space: nowrap; position: relative;
  transition: color 0.2s ease; }
.site-header .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--brand-purple-light); transform: scaleX(0);
  transform-origin: left; transition: transform 0.25s ease; }
.site-header .nav-link:hover { color: var(--brand-purple-light); }
.site-header .nav-link:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-link, .site-header .nav-link::after { transition: none; }
}
.site-header .nav-link:focus-visible { outline: 2px solid var(--es-amber); outline-offset: 3px; }
.brand-lockup { position: absolute; left: 50%; transform: translateX(-50%); top: 18px;
  display: flex; flex-direction: column; align-items: center; text-decoration: none; z-index: 1; }
.brand-lockup img { height: 94px; display: block; }
.brand-lockup .fluent-text { font-size: 14px; font-weight: 500; letter-spacing: 0.35em;
  color: var(--brand-purple-light); padding-left: 0.35em; margin-top: 26px; }
@media (max-width: 900px) {
  .site-header { height: 138px; }
  .nav-left, .nav-right { display: none; }
  .masthead-rule { top: 86px; }
  .brand-lockup { top: 18px; }
  .brand-lockup img { height: 62px; }
  .brand-lockup .fluent-text { font-size: 12px; margin-top: 16px; }
}

/* ===== Breadcrumbs / headings ===== */
/* Breadcrumb lives in the header band: left edge matches the nav ("Speak Spanish"),
   vertical line matches FLUENT — up and out of the content. */
.crumbs { position: absolute; left: 24px; top: 139px; font-size: 13px; font-weight: 400;
  color: var(--text-secondary); margin: 0; display: flex; flex-wrap: wrap; gap: 6px 8px;
  align-items: center; }
@media (max-width: 900px) {
  .crumbs { position: absolute; left: 24px; top: 114px; }
}
.crumbs a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(174, 174, 178, 0.45); }
.crumbs a:hover { color: var(--text-primary); text-decoration-color: var(--brand-purple-light); }
.crumbs .sep { opacity: 0.5; }
.crumbs .here { color: var(--text-primary); font-weight: 500; }
.page-h1 { font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 800; line-height: 1.12;
  letter-spacing: -0.025em; margin: 0 0 14px; text-wrap: balance; }
/* Above a grid, the heading + subheading sit inside the grid's rails, not flush to them. */
.page-h1.centered, .page-h2.centered { max-width: 780px; }
.page-h2, .wrap h2 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); font-weight: 700; line-height: 1.25;
  margin: 0 0 22px; letter-spacing: -0.01em; text-wrap: balance; }
.kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--brand-purple-light); margin: 0 0 10px; }
.subtitle { font-size: clamp(0.95rem, 2vw, 1.1rem); font-weight: 400; line-height: 1.6;
  color: var(--text-secondary); margin: 0 0 8px; max-width: 640px; }

/* ===== Cards (site glass treatment) ===== */
a.card { text-decoration: none; color: inherit; display: block; }
/* .door/.topic set flex-column centering — they must out-specify a.card's display:block */
a.card.door, a.card.topic { display: flex; }
.card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--card-radius);
  transition: border-color 0.3s ease, transform 0.15s ease; }
a.card:hover { border-color: rgba(148, 102, 237, 0.35); transform: translateY(-2px); }
a.card:focus-visible { outline: 3px solid var(--es-amber); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { a.card:hover { transform: none; } .card { transition: none; } }

.app-store-link { display: inline-block; transition: transform 0.15s ease, opacity 0.2s ease; }
.app-store-link:hover { transform: translateY(-1px); opacity: 0.9; }
.app-store-link:active { transform: translateY(0); }
.app-store-link:focus-visible { outline: 3px solid var(--es-amber); outline-offset: 3px; }
.app-store-badge { height: 50px; width: auto; display: block; }
/* must out-specify `.earn img` below, which sizes the badge art */
.earn .app-store-badge { height: 50px; width: auto; }
@media (prefers-reduced-motion: reduce) { .app-store-link { transition: none; } }
.cta-note { display: block; margin-top: 10px; font-size: 13px; color: var(--text-secondary); }

/* ===== Topic page ===== */
/* Pack hero: badge art + name, headline, and the pack's own description in one card.
   The answer block starts fresh beneath it. */
.pack-hero { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 32px;
  align-items: center; padding: var(--card-pad-y) var(--card-pad-x); }
.pack-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 800; line-height: 1.15;
  letter-spacing: -0.02em; margin: 0 0 10px; text-wrap: balance; }
.pack-hero .subtitle { max-width: none; margin: 0 0 16px; }
.pack-hero .meta { font-size: 12px; color: var(--text-primary); opacity: 0.8; margin: 0 0 8px;
  font-weight: 700; letter-spacing: 0.09em; }
.pack-hero .pack-desc { font-size: 14.5px; color: var(--text-secondary); margin: 0; line-height: 1.6; }
.pack-hero .pack-desc + .pack-desc { margin-top: 14px; }
@media (max-width: 700px) {
  .pack-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; }
}
.hero-art { position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; }
.hero-art::before { content: ''; position: absolute; inset: -24px; pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 42%, color-mix(in srgb, var(--badge-primary) 26%, transparent) 0%, transparent 70%),
    radial-gradient(closest-side at 62% 66%, color-mix(in srgb, var(--badge-secondary) 12%, transparent) 0%, transparent 62%);
  filter: blur(6px); z-index: 0; }
/* The badge PNGs carry ~54/1014 of transparent padding above the artwork (~9px at 170px),
   which made the gap above the badge read 9px larger than the gap below the store button.
   Pull the image up by that amount so the visible artwork centres, not the image box. */
.hero-art img { position: relative; z-index: 1; width: 100%; max-width: 170px; height: auto;
  margin-top: -9px; filter: drop-shadow(0 14px 34px rgba(0,0,0,0.45)); }
/* The badge PNGs are square with transparent padding below the ribbon, so the label is
   pulled up 10px to sit against the artwork rather than the image box. */
.badge-plate { position: relative; z-index: 1; margin: -10px 0 0; font-size: 14px; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-primary); text-align: center; }
.hero-art .app-store-link { position: relative; z-index: 1; margin-top: 4px; }
.hero-art .app-store-badge { height: 50px; width: auto; }
.hero-text { min-width: 0; }
.answer { margin: 36px 0 12px; font-size: 1.1rem; line-height: 1.65; }
.answer p { margin: 0 0 16px; }
.answer p:last-child { margin-bottom: 0; }
/* The "below:" lead-in belongs to the answer above it, then gives the page a beat. */
.answer .answer-note { font-size: 15px; color: var(--text-secondary); margin: 22px 0 0; }
.answer .es, .es { color: var(--es-amber); font-weight: 600; font-style: normal; }

/* ===== Phrase pack =====
   Portrait cards, because the card IS the post — it has to read as something you'd
   share, not as a table row. Ground + text colour arrive per-card as --pc-bg / --pc-fg
   from pack_grounds() in generate.py, derived from that badge's own artwork, so this
   stylesheet never hardcodes a badge colour and all 349 packs dress themselves.
   Text is live HTML, never baked into an image — the page has to stay crawlable. */
/* The pack stays inside the 780px reading column like every other section — breaking it
   out to 940px pushed its kicker/H2 80px left of every other heading on the page. */
.pack .pack-sub { font-size: 15px; margin: 0 0 26px; }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 780px) { .pack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pack-grid { grid-template-columns: 1fr; } }

.pc { background: var(--pc-bg); color: var(--pc-fg); border-radius: 12px; aspect-ratio: 4 / 5;
  padding: 22px; display: flex; flex-direction: column; overflow: hidden; }
/* Margins are set per class, never via a blanket `.pc p` reset — an element+class
   selector (0,1,1) would out-specify these class rules (0,1,0) and collapse the layout. */
.pc-label { margin: 0; font-size: 9px; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; opacity: 0.7; }
.pc-es { margin: auto 0 0; font-size: clamp(18px, 2vw, 25px); font-weight: 800; line-height: 1.08;
  letter-spacing: -0.02em; text-wrap: balance; }
.pc-en { margin: 9px 0 0; font-size: 13px; line-height: 1.35; opacity: 0.78; }
.pc-note { margin: auto 0 0; padding-top: 10px; border-top: 2px solid currentColor;
  font-size: 11.5px; line-height: 1.45; opacity: 0.88; }
.pc-mark { margin: 14px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-url { font-size: 7.4px; font-weight: 800; letter-spacing: 0.02em; opacity: 0.58; }

/* The shipped &Be wordmark is white-on-transparent (cut for the dark site), so it is
   masked and painted in the card's own ink. Same letterforms, correct colourway. */
.pc-logo { flex: 0 0 auto; display: block; width: 40px; height: 24px; background: currentColor;
  -webkit-mask: url(/assets/logo/AndBe-amp-wordmark.png) left center / contain no-repeat;
          mask: url(/assets/logo/AndBe-amp-wordmark.png) left center / contain no-repeat; }

/* End card — identical across every pack, but grounded in the CATEGORY colour (the badge
   ribbon: red = conversation, yellow = vocabulary, green = grammar), so a run of packs
   shows at a glance which channel they're on. */
.pc-end { align-items: center; text-align: center; }
.pc-end .pc-logo-lg { margin: auto auto 0; width: 96px; height: 57px;
  -webkit-mask-position: center; mask-position: center; }
.pc-fluent { margin: 8px 0 0; font-size: 9px; font-weight: 500; letter-spacing: 0.28em;
  padding-left: 0.28em; opacity: 0.85; }
.pc-hero { margin: 18px 0 0; font-size: 18px; font-weight: 800; line-height: 1.15;
  letter-spacing: -0.01em; text-wrap: balance; }
.pc-sub { margin: 9px 0 0; font-size: 11px; line-height: 1.4; opacity: 0.85; }
/* A filled button was too heavy for a card this size — it competed with the wordmark
   and the line above it. A plain bold sentence carries the offer without the chrome. */
.pc-cta { margin: auto 0 0; display: block; color: var(--pc-fg); text-decoration: none;
  font-size: 13.5px; font-weight: 800; line-height: 1.3; letter-spacing: -0.005em;
  border-bottom: 2px solid currentColor; padding-bottom: 2px; align-self: center; }
.pc-cta:hover { opacity: 0.85; }
.pc-cta:focus-visible { outline: 3px solid var(--pc-fg); outline-offset: 3px; }
.pc-end .pc-url { margin-top: 13px; }

/* One card per row at phone width. The 4:5 shape earns its keep in the desktop grid —
   it reads as something you'd post — but at full width it strands the phrase in a
   half-empty card, so let the card hug its content instead.
   MUST come after the .pc rules above: same specificity, so source order decides. */
@media (max-width: 520px) {
  .pc { aspect-ratio: auto; }
  .pc-es { margin-top: 16px; }
  .pc-note { margin-top: 18px; }
  .pc-end { padding-top: 30px; padding-bottom: 26px; }
  .pc-end .pc-logo-lg { margin-top: 0; }
  .pc-cta { margin-top: 20px; }
}

/* The all-caps header must sit closer to the list it labels than to the group above it. */
.phrase-group + .phrase-group { margin-top: 42px; }
.phrase-group h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 16px; }
ul.phrases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
ul.phrases .es { display: block; font-weight: 600; font-size: 1rem; }
ul.phrases .en { display: block; color: var(--text-secondary); font-size: 14.5px; margin-top: 2px; }

.table-scroll { overflow-x: auto; border: 1px solid var(--glass-border); border-radius: var(--card-radius);
  background: var(--glass-bg); margin-top: 22px; }
.table-scroll table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; }
.table-scroll th, .table-scroll td { text-align: left; padding: 11px 16px;
  border-bottom: 1px solid var(--glass-border); vertical-align: top; }
.table-scroll thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-secondary); }
.table-scroll tbody tr:last-child td { border-bottom: none; }
.table-scroll td.concept { color: var(--text-secondary); font-size: 13.5px; }
ul.locals { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column;
  gap: 10px; font-size: 15px; }
ul.locals li { color: var(--text-secondary); }

ol.pitfalls { margin: 0; padding: 0 0 0 2px; list-style: none; counter-reset: pit;
  display: flex; flex-direction: column; gap: 18px; }
ol.pitfalls li { counter-increment: pit; display: grid; grid-template-columns: 36px 1fr; gap: 18px; }
ol.pitfalls li::before { content: counter(pit); width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold-step); display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--gradient-top); margin-top: 0;
  box-shadow: 0 2px 10px rgba(255, 193, 7, 0.25); }
ol.pitfalls .wrong { font-weight: 600; }
ol.pitfalls .fix { color: var(--text-secondary); font-size: 15px; margin-top: 3px; display: block; }

.teacher { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.teacher img { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(148, 102, 237, 0.5); box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
.teacher .t-name { font-size: 16px; font-weight: 800; margin: 0; }
.teacher .t-role { font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-secondary); margin: 2px 0 0; }
.rehearse { background: var(--glass-bg); border: 1px solid rgba(148, 102, 237, 0.4);
  border-radius: var(--card-radius); padding: var(--card-pad-y) var(--card-pad-x); }
.rehearse .scene { font-size: 15.5px; }
.rehearse .scene em { color: var(--es-amber); font-style: normal; font-weight: 600; }
.rehearse .twists { margin: 14px 0 22px; padding: 0; list-style: none; display: flex;
  flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--text-secondary); }
.rehearse .twists li { padding-left: 18px; position: relative; }
.rehearse .twists li::before { content: '\2192'; position: absolute; left: 0;
  color: var(--brand-purple-light); }
.earn { display: flex; gap: 16px; align-items: center; border-top: 1px solid var(--glass-border);
  margin-top: 22px; padding-top: 22px; }
.earn img { width: 111px; height: 111px; flex-shrink: 0; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)); }
.earn p { margin: 0 0 10px; font-size: 15px; }

.video-slot { border: 1.5px dashed rgba(250, 250, 252, 0.25); border-radius: var(--card-radius);
  padding: var(--card-pad-y) var(--card-pad-x); display: flex; gap: 18px; align-items: center; }
.video-slot .play { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--text-secondary); display: flex; align-items: center; justify-content: center; }
.video-slot .play span { width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--text-secondary); margin-left: 4px; }
.video-slot p { margin: 0; font-size: 14.5px; color: var(--text-secondary); }
.video-slot .label { font-weight: 700; color: var(--text-primary); font-size: 15px; display: block;
  margin-bottom: 3px; }

.faq details { border: 1px solid var(--glass-border); border-radius: var(--card-radius); margin-bottom: 12px;
  background: var(--glass-bg); margin-left: -2px; margin-right: -2px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15.5px; padding: 18px var(--card-pad-x);
  list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--brand-purple-light); font-weight: 700;
  font-size: 19px; line-height: 1; }
.faq details[open] summary::after { content: '\2013'; }
.faq details > p { padding: 0 var(--card-pad-x) 20px; margin: 0; font-size: 15px; color: var(--text-secondary); }

/* ===== Hub pages ===== */
.levels { display: flex; flex-direction: column; gap: 16px; margin: 40px auto 0; max-width: 820px; }
.level { padding: 24px 28px; display: grid; grid-template-columns: 86px minmax(0,1fr) auto;
  gap: 24px; align-items: center; }
/* CEFR level codes in gold — the iOS token's own rule: gold = achievement / status /
   earned value, and "level" is named explicitly (Colors.swift, goldAccent). */
.level .code { font-size: 34px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--gold-step); }
.level .code small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
  color: var(--text-secondary); margin-top: 2px; }
.level .label { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.level .desc { font-size: 14.5px; color: var(--text-secondary); margin: 0; }
.level .count { font-size: 13.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap;
  text-align: right; }
.level .count small { display: block; font-weight: 600; color: var(--text-secondary); margin-top: 2px; }
@media (max-width: 620px) {
  .level { grid-template-columns: 64px minmax(0,1fr); }
  .level .code { font-size: 26px; }
  .level .count { display: none; }
}
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px auto 0; max-width: 940px; }
.door { padding: 28px 24px 26px; text-align: center; display: flex; flex-direction: column;
  align-items: center; }
.door img { width: 96px; height: 96px; border-radius: 50%; border: 2px solid rgba(148, 102, 237, 0.4);
  box-shadow: 0 6px 22px rgba(0,0,0,0.4); margin-bottom: 16px; }
.door .cat { font-size: 19px; font-weight: 800; margin: 0 0 2px; }
.door .teach { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 12px; }
.door .desc { font-size: 14.5px; color: var(--text-secondary); margin: 0 0 16px; }
.door .count { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--brand-purple-light); }
@media (max-width: 680px) { .doors { grid-template-columns: 1fr; } }
.teacher-line { display: flex; align-items: center; gap: 14px; margin: 22px auto 0; max-width: 940px; }
.teacher-line img { width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid rgba(148, 102, 237, 0.4); }
.teacher-line p { margin: 0; font-size: 14.5px; color: var(--text-secondary); }
.teacher-line strong { color: var(--text-primary); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 36px auto 0; max-width: 940px; }
.topic { padding: 24px 20px 22px; text-align: center; display: flex; flex-direction: column;
  align-items: center; }
.topic img { width: 121px; height: 121px; margin-bottom: 12px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.4)); }
.topic .name { font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 6px; }
.topic .q { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.45; }
@media (max-width: 720px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .grid { grid-template-columns: 1fr; } }



/* Centering utility. Needs (0,2,0) specificity to beat component rules that combine
   a class with an element selector (e.g. `.wrap h2`, which sets a `margin` shorthand). */
.wrap .centered, .wrap-article .centered, .centered {
  text-align: center; margin-left: auto; margin-right: auto;
}

/* ===== Badge search — header band, right side, on the breadcrumb line ===== */
/* Sits on the breadcrumb's line, right-aligned under "Download the App". */
.badge-search { position: absolute; right: 24px; top: 139px; width: 210px; z-index: 5; }
.badge-search input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.2;
  height: 26px; padding: 0 12px; border-radius: var(--card-radius);
  background: rgba(250, 250, 252, 0.06); color: var(--text-primary);
  border: 1px solid var(--glass-border); transition: border-color 0.2s ease;
}
.badge-search input::placeholder { color: var(--text-tertiary); }
.badge-search input:focus { outline: none; border-color: var(--brand-purple); }
.badge-search input::-webkit-search-cancel-button { filter: invert(0.7); }
.badge-search-results {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #201033; border: 1px solid var(--glass-border);
  border-radius: var(--card-radius); overflow: hidden auto; max-height: 320px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.badge-search.open .badge-search-results { display: block; }
.badge-search-results a {
  display: block; padding: 9px 14px; text-decoration: none;
  border-bottom: 1px solid var(--glass-border);
}
.badge-search-results a:last-child { border-bottom: none; }
.badge-search-results a:hover, .badge-search-results a.active { background: rgba(148, 102, 237, 0.18); }
.badge-search-results .bs-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.badge-search-results .bs-meta { display: block; font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
.badge-search-empty { margin: 0; padding: 12px 14px; font-size: 13px; color: var(--text-secondary); }
@media (max-width: 900px) { .badge-search { display: none; } }

.cefr-note { font-size: 14px; margin-top: 10px; }
.cefr-note a { color: var(--brand-purple-light); text-decoration: underline; text-underline-offset: 3px; }