/* genbee design template — cream/gold foundation. Loaded after brand-signature.css. */

@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNova-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNova-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --gb-cream: #FBFAF5;
  --gb-ink: #16281C;
  --gb-body: #111417;
  --gb-muted: #6E7A6C;
  --gb-faint: #A8AFA6;
  --gb-label: #2F5D8A;
  --gb-eyebrow: #1F6B45;
  --gb-gold: #F5C518;
  --gb-gold-deep: #D9A419;
  --gb-word-gen: #1B1B1B;
  --gb-word-bee: #DFA20C;
  --gb-line: #EDEBE0;
  --gb-card-line: #EFE8D4;
  --gb-click-line: #E8CE6A;
  --gb-danger: #D70015;
  --gb-denim: #126CB8;
  --gb-denim-deep: #0E4E99;
  --gb-ease: cubic-bezier(.4, 0, .2, 1);
  --gb-card: linear-gradient(160deg, #FFFFFF 0%, #FEFCF3 55%, #FCF6E3 100%);
  --gb-card-click: linear-gradient(150deg, #FFFDEB 0%, #FCF3B8 50%, #F6E48C 100%);
  --gb-silver: linear-gradient(158deg, #FDFDFD, #D7DCE2);
  --gb-gold-btn: linear-gradient(158deg, #F8E6A0, #EBC754);
  --gb-hex: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --gb-radius-btn: 0.5rem;
  --gb-radius-card: 0.75rem;

  --forest-950: #16281C;
  --forest-800: #16281C;
  --forest-700: #1F6B45;
  --forest-100: #E8F3EC;
  --paper: #FBFAF5;
  --surface: #ffffff;
  --honey: #F5C518;
  --honey-deep: #D9A419;
  --honey-soft: #FEFCF3;
  --ink-muted: #6E7A6C;
  --line: #EDEBE0;
  --danger: #D70015;
  --danger-soft: #FDF2F3;
  --focus: #126CB8;
  --shadow-soft: 0 10px 28px rgba(22, 40, 28, 0.08);
  --shadow-sm: 0 6px 16px rgba(22, 40, 28, 0.06);
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 0.75rem;
  --page-width: 1080px;
  --hex: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --hive-hex: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --hive-cell-scale: 1;
  --hive-press-scale: 1.03;
  --genbee-canvas: #FBFAF5;
  --genbee-canvas-mist: #FBFAF5;
  --genbee-canvas-glow: transparent;
  --genbee-edge: #EDEBE0;
  --yellow: #F5C518;
  --bg: #FBFAF5;
  --card: #FEFCF3;
  --ink: #16281C;
  --dim: #6E7A6C;
  --head: #16281C;
  --border: #EDEBE0;
}

html {
  background-color: var(--gb-cream);
}

body,
button,
input,
select,
textarea {
  font-family: "Proxima Nova", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: "Proxima Nova", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}

body {
  position: relative;
  background-color: var(--gb-cream);
  background-image: none;
  color: var(--gb-ink);
}

body > header,
.site-header,
genbee-breadcrumbs,
main,
.page,
.page-shell,
.auth-gate {
  position: relative;
  z-index: 1;
}

body > header,
.site-header {
  z-index: 40;
}

body[data-gb-chrome="listing"] {
  background-color: #ffffff;
  color: #1F2931;
}

body[data-gb-chrome="listing"] .site-header,
body[data-gb-chrome="listing"] > header {
  background: #ffffff;
}

body[data-gb-chrome="listing"] .plan-card,
body[data-gb-chrome="listing"] .pack-card,
body[data-gb-chrome="listing"] .connection-card,
body[data-gb-chrome="listing"] .journey-rail,
body[data-gb-chrome="listing"] .hive-panel {
  background: #ffffff;
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
}

body[data-gb-chrome="listing"] .lede,
body[data-gb-chrome="listing"] .page-intro p {
  color: #000000;
}

body[data-gb-chrome="listing"] a:not(.button):not(.brand) {
  color: #126CB8;
}

body[data-gb-chrome="listing"] a:not(.button):not(.brand):hover {
  color: #0E4E99;
}

.auth-gate {
  background-color: var(--gb-cream);
  background-image: none;
}

@keyframes gb-press {
  0% { scale: 1; }
  40% { scale: 1.055; }
  100% { scale: 1.035; }
}

@keyframes gb-fly {
  0%   { transform: translate(-6vw, 30vh) rotate(6deg); }
  26%  { transform: translate(30vw, 10vh) rotate(-8deg); }
  52%  { transform: translate(66vw, 44vh) rotate(7deg); }
  78%  { transform: translate(96vw, 16vh) rotate(-5deg); }
  100% { transform: translate(-6vw, 30vh) rotate(6deg); }
}

@keyframes gb-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes gb-wings {
  to { background-position-x: -520px; }
}

@keyframes gb-hive-glow {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

/* Header: solid white, 64px, hairline, no blur */
body > header,
.site-header,
header.site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--gb-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header {
  height: auto;
}

.header-inner,
header .inner {
  min-height: 64px;
}

.brand img[src="/genbee-logo.svg"],
.brand img[src="/genbee-logo.png"],
.hleft .brand img {
  width: 112px;
  height: auto;
}

.brand-context,
#crumb,
.hleft .brand p {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gb-faint);
}

/* Type scale */
h1 {
  max-width: 64ch;
  margin-bottom: 10px;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h2 {
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.125rem;
}

.lede,
.auth-copy,
.page-intro p,
.hero p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--gb-muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gb-eyebrow);
}

/* Buttons: rounded rectangles, never pills */
.button,
.auth-button,
.auth-plan-link,
.skip-link,
button.honey,
a.button,
.credit-range button,
.hive-level-tab,
.hive-stat,
.credit-callout,
.current-plan-badge,
.curriculum-collection-label,
.tool-action,
#start,
#stop,
#interrupt,
#audioenable,
#activitylauncher,
#completionok,
#back,
.chipst,
.chip,
.typebar input,
.typebar button,
.act-mini-actions button,
.act-draw-tools button,
.activity-actions button,
.credit-reserve-pill,
.suggestions button,
.send {
  border-radius: var(--gb-radius-btn) !important;
}

.button,
.auth-button {
  min-height: 44px;
  padding: 10px 19px;
  border: 1px solid #C2C9D2;
  background: var(--gb-silver);
  color: var(--gb-ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  transition: filter 300ms var(--gb-ease), box-shadow 300ms var(--gb-ease), border-color 300ms var(--gb-ease);
  transform: none;
}

.button:hover:not(:disabled):not([aria-disabled="true"]),
.auth-button:hover:not(:disabled) {
  background: var(--gb-silver);
  color: var(--gb-ink);
  filter: brightness(1.05);
  box-shadow: 0 0 18px rgba(178, 188, 200, 0.8), 0 0 38px rgba(178, 188, 200, 0.35);
  transform: none;
}

.button.honey,
.button.primary,
#auth-sign-in {
  border-color: #E8CE6A;
  background: var(--gb-gold-btn);
  color: var(--gb-ink);
}

.button.honey:hover:not(:disabled):not([aria-disabled="true"]),
.button.honey:focus-visible,
#auth-sign-in:hover:not(:disabled) {
  background: var(--gb-gold-btn);
  color: var(--gb-ink);
  filter: brightness(1.08) saturate(1.3);
  box-shadow: 0 0 18px rgba(245, 197, 24, 0.65), 0 0 38px rgba(245, 197, 24, 0.28);
}

.button.secondary,
a.button.secondary {
  border: 1px solid #CFD6CC;
  background: #ffffff;
  color: var(--gb-ink);
}

.button.secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: #E8CE6A;
  background: #ffffff;
  box-shadow: 0 0 16px rgba(245, 197, 24, 0.45);
  filter: none;
}

.button.danger {
  border: 1px solid #F0C9CD;
  background: #ffffff;
  color: var(--gb-danger);
}

.button.danger:hover:not(:disabled):not([aria-disabled="true"]),
.button.danger:focus-visible {
  border-color: var(--gb-danger);
  background: #ffffff;
  color: var(--gb-danger);
  box-shadow: 0 0 16px rgba(215, 0, 21, 0.25);
}

body[data-gb-chrome="listing"] .button.honey,
body[data-gb-chrome="listing"] .marketplace-purchase .button {
  border-color: var(--gb-denim);
  background: var(--gb-denim);
  color: #ffffff;
  filter: none;
}

body[data-gb-chrome="listing"] .button.honey:hover:not(:disabled):not([aria-disabled="true"]),
body[data-gb-chrome="listing"] .marketplace-purchase .button:hover:not(:disabled) {
  background: var(--gb-denim-deep);
  color: #ffffff;
  box-shadow: none;
  filter: none;
}

/* Cards */
.connection-card,
.surface-card,
.journey-rail,
.account-identity,
.plan-card,
.pack-card,
.purchase-details,
.learner-row,
.subscription-row,
.learner-create,
.summary-stat,
.path-card,
.inspector,
.lesson,
.vocabulary-ledger,
.activity-board,
#activitypicker,
#creditpurchase,
#lessoncomplete,
.auth-panel,
.help-topic,
.support-intake,
.credit-reserve,
.credit-balance-panel,
.credit-runway,
.credit-planning-rail,
.credit-flow-row,
.credit-detail-panel,
.credit-report-empty,
.credit-purchase-panel,
.hive-panel,
.hive-peek {
  background: var(--gb-card);
  border: 1px solid var(--gb-card-line);
  border-radius: var(--gb-radius-card);
  box-shadow: none;
}

.plan-card,
.pack-card,
.connection-card,
.account-identity,
.learner-row,
.help-topic,
.auth-panel {
  transition: transform 300ms var(--gb-ease), box-shadow 300ms var(--gb-ease), border-color 300ms var(--gb-ease), background 300ms var(--gb-ease);
}

.plan-card:hover,
.pack-card:hover,
.help-topic:hover,
.learner-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 40, 28, 0.08);
}

.plan-card.is-current,
.plan-card.featured,
.plan-card:active,
.pack-card:active {
  background: var(--gb-card-click);
  border-color: var(--gb-click-line);
  box-shadow: 0 0 22px rgba(245, 197, 24, 0.45);
}

.credit-reserve,
.credit-balance-panel {
  background: linear-gradient(160deg, #FEFAEC 0%, #FBF2D6 100%);
  border-color: #F0E4BF;
}

.credit-range {
  border-radius: var(--gb-radius-btn);
  background: #ffffff;
  border: 1px solid var(--gb-line);
}

.credit-range button[aria-pressed="true"] {
  background: var(--gb-ink);
  color: #ffffff;
  border-radius: 0.375rem;
}

/* Hexagons: flat-top clip, pressed-in emboss, swell in place */
/* .auth-mark is deliberately NOT here: it wraps the full wordmark logo on the
   sign-in landing, and a hex clip beheads the wordmark. */
#subjgrid.subject-hive .subject-group-grid.comb .card,
#levelgrid.comb .card,
#coursegrid .card,
#tutorcards .tcard,
.hive-cell,
.hive-panel-mark,
.credit-flow-mark,
.completion-seal {
  clip-path: var(--gb-hex);
}

/* .hive-cell is positioned absolutely by the plans-page hive board; forcing
   position:relative there collapses the honeycomb into stacked flow. Only the
   comb cards that are static grid items get a positioning context here. */
#subjgrid.subject-hive .subject-group-grid.comb .card,
#levelgrid.comb .card,
#coursegrid .card,
#tutorcards .tcard {
  position: relative;
}

#subjgrid.subject-hive .subject-group-grid.comb .card,
#levelgrid.comb .card,
#coursegrid .card,
#tutorcards .tcard,
.hive-cell {
  border-radius: 0;
  transition: scale 420ms cubic-bezier(.2, .9, .3, 1), filter 320ms var(--gb-ease), background 320ms var(--gb-ease);
}

#subjgrid .subject-group-grid.comb .card::after,
#levelgrid.comb .card::after,
#coursegrid .card::after,
#tutorcards .tcard::after,
#roadmap .caprow::after,
.startcard::after,
.hive-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  box-shadow:
    inset 0 3px 6px var(--gb-cell-inset, rgba(80, 60, 10, 0.18)),
    inset 0 -2px 3px rgba(255, 255, 255, 0.95),
    inset 2px 0 5px var(--gb-cell-inset, rgba(80, 60, 10, 0.12)),
    inset -2px 0 4px rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

#subjgrid .subject-group-grid.comb .card:hover,
#levelgrid.comb .card:hover,
#coursegrid .card:hover,
#tutorcards .tcard:hover,
#roadmap .caprow.pickable:hover,
.hive-cell:hover {
  animation: gb-press 480ms cubic-bezier(.2, .9, .3, 1) both;
  filter: brightness(1.12) saturate(1.5) drop-shadow(0 0 14px var(--gb-cell-glow, rgba(245, 197, 24, 0.55)));
  transform: none;
  z-index: 2;
}

#subjgrid :is(.meta, .cap10) {
  color: var(--gb-ink);
}

/* Choose-a-lesson hive detailing: each subject family carries its own comb
   gradient, pressed-in emboss tone, ink, and hover glow (genbee Choose A
   Lesson design). The same tokens drive the plans-page hive (--cell-*) and
   the learner-app comb (--subject-*). */
.hive-cell[data-group="science-mathematics"],
#subjgrid .card[data-group="science-mathematics"] {
  --cell-fill: linear-gradient(158deg, #FAFBFC 0%, #D7DCE2 100%);
  --cell-hover: linear-gradient(158deg, #F0F2F5 0%, #C2C9D2 100%);
  --subject-fill: linear-gradient(158deg, #FAFBFC 0%, #D7DCE2 100%);
  --subject-hover: linear-gradient(158deg, #F0F2F5 0%, #C2C9D2 100%);
  --gb-cell-inset: rgba(110, 120, 134, 0.32);
  --gb-cell-glow: rgba(168, 182, 198, 0.95);
  color: #2A313A;
}

.hive-cell[data-group="computing-engineering"],
#subjgrid .card[data-group="computing-engineering"] {
  --cell-fill: linear-gradient(158deg, #F7F3FF 0%, #DED2F5 100%);
  --cell-hover: linear-gradient(158deg, #EFE8FF 0%, #CBBAF0 100%);
  --subject-fill: linear-gradient(158deg, #F7F3FF 0%, #DED2F5 100%);
  --subject-hover: linear-gradient(158deg, #EFE8FF 0%, #CBBAF0 100%);
  --gb-cell-inset: rgba(104, 78, 168, 0.28);
  --gb-cell-glow: rgba(164, 128, 240, 0.9);
  color: #2A2145;
}

.hive-cell[data-group="people-society"],
#subjgrid .card[data-group="people-society"] {
  --cell-fill: linear-gradient(158deg, #FFF4FA 0%, #F6D7E7 100%);
  --cell-hover: linear-gradient(158deg, #FFEAF4 0%, #F0C2DA 100%);
  --subject-fill: linear-gradient(158deg, #FFF4FA 0%, #F6D7E7 100%);
  --subject-hover: linear-gradient(158deg, #FFEAF4 0%, #F0C2DA 100%);
  --gb-cell-inset: rgba(168, 86, 130, 0.26);
  --gb-cell-glow: rgba(240, 140, 190, 0.9);
  color: #412330;
}

.hive-cell[data-group="language-arts"],
#subjgrid .card[data-group="language-arts"] {
  --cell-fill: linear-gradient(158deg, #FFF9E0 0%, #F6DF8E 100%);
  --cell-hover: linear-gradient(158deg, #FCF0C4 0%, #F0D26A 100%);
  --subject-fill: linear-gradient(158deg, #FFF9E0 0%, #F6DF8E 100%);
  --subject-hover: linear-gradient(158deg, #FCF0C4 0%, #F0D26A 100%);
  --gb-cell-inset: rgba(170, 126, 20, 0.32);
  --gb-cell-glow: rgba(245, 197, 24, 0.95);
  color: #3A2F10;
}

.hive-cell[data-group="business-life"],
#subjgrid .card[data-group="business-life"] {
  --cell-fill: linear-gradient(158deg, #FFF7D6 0%, #F2D874 100%);
  --cell-hover: linear-gradient(158deg, #FBEDB4 0%, #EBCB55 100%);
  --subject-fill: linear-gradient(158deg, #FFF7D6 0%, #F2D874 100%);
  --subject-hover: linear-gradient(158deg, #FBEDB4 0%, #EBCB55 100%);
  --gb-cell-inset: rgba(160, 118, 16, 0.34);
  --gb-cell-glow: rgba(240, 185, 21, 0.95);
  color: #3A3110;
}

.hive-cell[data-group="other-subjects"],
#subjgrid .card[data-group="other-subjects"] {
  --cell-fill: linear-gradient(158deg, #FAFBFC 0%, #E2E4E8 100%);
  --cell-hover: linear-gradient(158deg, #F0F1F4 0%, #D3D6DB 100%);
  --subject-fill: linear-gradient(158deg, #FAFBFC 0%, #E2E4E8 100%);
  --subject-hover: linear-gradient(158deg, #F0F1F4 0%, #D3D6DB 100%);
  --gb-cell-inset: rgba(110, 120, 134, 0.26);
  --gb-cell-glow: rgba(178, 188, 200, 0.8);
  color: #2A313A;
}

/* Comb labels sit on the emboss like the design: 700 weight, white lift. */
.hive-cell {
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

#subjgrid.subject-hive .subject-group-grid.comb .card :is(h3, .pick h3) {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Selected comb: the honey-lit clicked state from the template, not dark ink. */
.hive-cell.is-active,
.hive-cell.is-active:hover {
  background: var(--gb-card-click);
  color: var(--gb-ink);
  filter: drop-shadow(0 0 14px rgba(245, 197, 24, 0.6));
}

/* Hive stats read as text, not chips (Choose A Lesson design). */
.hive-stats {
  gap: 18px;
}

.hive-stat {
  padding: 0;
  border: none !important;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--gb-muted);
  transition: color 200ms var(--gb-ease);
}

.hive-stat:hover {
  color: var(--gb-gold-deep);
}

.hive-stat strong {
  font-weight: 700;
  color: var(--gb-ink);
}

/* Learning-theme remap: past the subject hive, every drill-down surface keeps
   the comb detailing (emboss, glow, light-to-deep ladder) but speaks the
   SUBJECT FAMILY's colors — the same families the hive cells wear on the way
   in, so subject → levels → courses reads as one continuous place. Equal
   specificity to the per-subject theme blocks; this sheet loads last, so
   these win. */
body[data-learning-theme] {
  /* Family tokens; the default family is honey. */
  --gb-theme-hi: #FFFDF2;
  --gb-theme-lo: #DFB232;
  --gb-theme-ink: var(--gb-ink);
  --gb-theme-inset: #966C0A;
  --gb-theme-glow: #F5BE19;

  --learn-soft: color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 5%);
  --learn-mid: color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 14%);
  --learn-accent: color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 45%);
  --learn-deep: var(--gb-theme-ink);
  --learn-edge: color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 85%);
  --learn-on-accent: var(--gb-theme-ink);
  --learn-on-deep: #ffffff;
  --learn-glow: color-mix(in srgb, var(--gb-theme-glow) 45%, transparent);
  --learn-outline: var(--gb-card-line);
  --genbee-edge: var(--gb-card-line);
  --genbee-canvas-mist: var(--learn-soft);
  --genbee-canvas-glow: color-mix(in srgb, var(--gb-theme-glow) 20%, transparent);
}

body[data-learning-theme="science-mathematics"] {
  --gb-theme-hi: #FAFBFC;
  --gb-theme-lo: #AEBDCE;
  --gb-theme-ink: #2A313A;
  --gb-theme-inset: #6E7886;
  --gb-theme-glow: #A8B6C6;
}

body[data-learning-theme="computing-engineering"] {
  --gb-theme-hi: #F7F3FF;
  --gb-theme-lo: #BBA4E9;
  --gb-theme-ink: #2A2145;
  --gb-theme-inset: #684EA8;
  --gb-theme-glow: #A480F0;
}

body[data-learning-theme="people-society"] {
  --gb-theme-hi: #FFF4FA;
  --gb-theme-lo: #EFB2D2;
  --gb-theme-ink: #412330;
  --gb-theme-inset: #A85682;
  --gb-theme-glow: #F08CBE;
}

body[data-learning-theme="language-arts"] {
  --gb-theme-hi: #FFF9E0;
  --gb-theme-lo: #E9C34E;
  --gb-theme-ink: #3A2F10;
  --gb-theme-inset: #AA7E14;
  --gb-theme-glow: #F5C518;
}

body[data-learning-theme="business-life"] {
  --gb-theme-hi: #FFF7D6;
  --gb-theme-lo: #DFB232;
  --gb-theme-ink: #3A3110;
  --gb-theme-inset: #A07610;
  --gb-theme-glow: #F0B915;
}

body[data-learning-theme="other-subjects"] {
  --gb-theme-hi: #FAFBFC;
  --gb-theme-lo: #C6CBD3;
  --gb-theme-ink: #2A313A;
  --gb-theme-inset: #6E7886;
  --gb-theme-glow: #B2BCC8;
}

body[data-learning-theme="custom-curriculum"] {
  --gb-theme-hi: #F6FBFA;
  --gb-theme-lo: #A9CEC7;
  --gb-theme-ink: #2A3F3A;
  --gb-theme-inset: #5E8A82;
  --gb-theme-glow: #8FC0B7;
}

body[data-learning-theme] :is(#view-levels, #view-courses) .hero p {
  color: var(--gb-muted);
}

body[data-learning-theme] :is(#levelgrid, #coursegrid) :is(.meta, .desc) {
  color: color-mix(in srgb, var(--gb-theme-ink) 90%, transparent);
}

body[data-learning-theme] :is(#levelgrid, #coursegrid) .cap10 {
  color: color-mix(in srgb, var(--gb-theme-ink) 75%, transparent);
}

/* Level combs climb the family's ladder — Level 1 lightest, Level 5 deepest
   (Canvas-2 Levels design in the subject's own hue). Hover reverses each
   gradient like the design. */
body[data-learning-theme] #levelgrid .card:nth-child(1) {
  --comb-fill: linear-gradient(158deg, var(--gb-theme-hi) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 28%) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 22%, transparent);
  --gb-cell-glow: color-mix(in srgb, var(--gb-theme-glow) 70%, transparent);
}

body[data-learning-theme] #levelgrid .card:nth-child(1):hover,
body[data-learning-theme] #levelgrid .card:nth-child(1):focus-visible {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 28%) 0%, var(--gb-theme-hi) 100%);
}

body[data-learning-theme] #levelgrid .card:nth-child(2) {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 12%) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 45%) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 26%, transparent);
  --gb-cell-glow: color-mix(in srgb, var(--gb-theme-glow) 80%, transparent);
}

body[data-learning-theme] #levelgrid .card:nth-child(2):hover,
body[data-learning-theme] #levelgrid .card:nth-child(2):focus-visible {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 45%) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 12%) 100%);
}

body[data-learning-theme] #levelgrid .card:nth-child(3) {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 25%) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 58%) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 30%, transparent);
  --gb-cell-glow: color-mix(in srgb, var(--gb-theme-glow) 90%, transparent);
}

body[data-learning-theme] #levelgrid .card:nth-child(3):hover,
body[data-learning-theme] #levelgrid .card:nth-child(3):focus-visible {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 58%) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 25%) 100%);
}

body[data-learning-theme] #levelgrid .card:nth-child(4) {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 38%) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 72%) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 34%, transparent);
  --gb-cell-glow: var(--gb-theme-glow);
}

body[data-learning-theme] #levelgrid .card:nth-child(4):hover,
body[data-learning-theme] #levelgrid .card:nth-child(4):focus-visible {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 72%) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 38%) 100%);
}

body[data-learning-theme] #levelgrid .card:nth-child(5) {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 52%) 0%, var(--gb-theme-lo) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 38%, transparent);
  --gb-cell-glow: var(--gb-theme-glow);
}

body[data-learning-theme] #levelgrid .card:nth-child(5):hover,
body[data-learning-theme] #levelgrid .card:nth-child(5):focus-visible {
  --comb-fill: linear-gradient(158deg, var(--gb-theme-lo) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 52%) 100%);
}

/* Course combs alternate two family tones so the patch reads as one hive. */
body[data-learning-theme] #coursegrid .card:nth-child(odd) {
  --comb-fill: linear-gradient(158deg, var(--gb-theme-hi) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 28%) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 22%, transparent);
  --gb-cell-glow: color-mix(in srgb, var(--gb-theme-glow) 70%, transparent);
}

body[data-learning-theme] #coursegrid .card:nth-child(odd):hover,
body[data-learning-theme] #coursegrid .card:nth-child(odd):focus-visible {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 28%) 0%, var(--gb-theme-hi) 100%);
}

body[data-learning-theme] #coursegrid .card:nth-child(even) {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 12%) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 45%) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 26%, transparent);
  --gb-cell-glow: color-mix(in srgb, var(--gb-theme-glow) 80%, transparent);
}

body[data-learning-theme] #coursegrid .card:nth-child(even):hover,
body[data-learning-theme] #coursegrid .card:nth-child(even):focus-visible {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 45%) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 12%) 100%);
}

/* Lobby combs: roadmap states, tutor cells, and the queen start cell carry
   the family's gradients with the pressed-in emboss instead of flat theme
   fills. Done stays green in every family. */
body[data-learning-theme] #roadmap .caprow {
  --comb-fill: linear-gradient(158deg, var(--gb-theme-hi) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 28%) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 22%, transparent);
  --gb-cell-glow: color-mix(in srgb, var(--gb-theme-glow) 70%, transparent);
}

body[data-learning-theme] #roadmap .caprow.locked {
  --comb-fill: color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 4%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 10%, transparent);
}

body[data-learning-theme] #roadmap .caprow.done {
  --comb-fill: linear-gradient(158deg, #F2FAF5 0%, #DCF0E5 100%);
  --gb-cell-inset: rgba(31, 107, 69, 0.18);
  --gb-cell-glow: rgba(31, 107, 69, 0.35);
}

body[data-learning-theme] #roadmap .caprow.next {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 38%) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 72%) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 34%, transparent);
  --gb-cell-glow: var(--gb-theme-glow);
}

/* Selected cells HOLD a deep family fill — unmistakably darker than any resting
   or hovered neighbor, so the picked lesson/tutor stays visibly picked. */
body[data-learning-theme] #roadmap .caprow.selcap {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 55%) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 92%) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 45%, transparent);
  --gb-cell-glow: var(--gb-theme-glow);
}

body[data-learning-theme] #tutorcards .tcard {
  --comb-fill: linear-gradient(158deg, var(--gb-theme-hi) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 28%) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 22%, transparent);
  --gb-cell-glow: color-mix(in srgb, var(--gb-theme-glow) 70%, transparent);
}

body[data-learning-theme] #tutorcards .tcard.sel {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 55%) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 92%) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 45%, transparent);
  --gb-cell-glow: var(--gb-theme-glow);
}

/* The hover wash must never disguise the held selection. */
body[data-learning-theme] #tutorcards .tcard.sel:hover,
body[data-learning-theme] #roadmap .caprow.selcap:hover {
  filter: drop-shadow(0 0 14px var(--gb-cell-glow));
}

body[data-learning-theme] .startcard {
  --comb-fill: linear-gradient(158deg, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 12%) 0%, color-mix(in srgb, var(--gb-theme-hi), var(--gb-theme-lo) 45%) 100%);
  --gb-cell-inset: color-mix(in srgb, var(--gb-theme-inset) 26%, transparent);
}

/* The themed layer must not strip the gold-action treatment from primary CTAs. */
body[data-learning-theme] #start,
body[data-learning-theme] #audioenable,
body[data-learning-theme] #completionok,
body[data-learning-theme] .activity-actions .activity-submit {
  border: 1px solid #E8CE6A;
  background: var(--gb-gold-btn);
  color: var(--gb-ink);
  box-shadow: none;
}

body[data-learning-theme] #start:hover,
body[data-learning-theme] #audioenable:hover,
body[data-learning-theme] #completionok:hover,
body[data-learning-theme] .activity-actions .activity-submit:hover {
  filter: brightness(1.08) saturate(1.3);
  box-shadow: 0 0 18px rgba(245, 197, 24, 0.65), 0 0 38px rgba(245, 197, 24, 0.28);
}

/* Auth gate */
.auth-panel {
  padding: 32px 28px;
}

.auth-kicker {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gb-eyebrow);
}

.auth-button {
  width: 100%;
}

.auth-plan-link {
  color: var(--gb-ink);
  font-size: 0.875rem;
}

.auth-plan-link:hover {
  color: var(--gb-gold-deep);
  text-decoration: none;
}

/* Footer / legal chrome */
footer,
.site-footer,
.legal-footer {
  border-top: 1px solid var(--gb-line);
  background: #ffffff;
  font-size: 0.75rem;
}

footer a:hover,
.site-footer a:hover,
.legal-footer a:hover {
  color: var(--gb-gold-deep);
  text-decoration: none;
}

/* Learning space specifics */
body[data-gb-chrome="space"] .page-intro h1 {
  font-size: 2rem;
}

body[data-gb-chrome="space"] .credit-balance strong {
  font-size: 2.25rem;
  letter-spacing: -0.03em;
}

/* Index subjects hero */
.hero h2,
#subject-view-title,
#phtitle,
#thtitle {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Pills leftover on index / plans */
header button,
#back,
.curriculum-collection-option,
.credit-legend i,
.credit-method-list b,
.credit-flow-track {
  border-radius: var(--gb-radius-btn);
}

#back {
  border: 1px solid var(--gb-line);
  background: #ffffff;
  color: var(--gb-ink);
}

/* Subject/curricula switcher: white hairline tray, rounded-rect segments,
   honey-lit active segment — no pills, no old-yellow underline. */
.curriculum-collection-options {
  border: 1px solid var(--gb-card-line);
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: none;
}

.curriculum-collection-label {
  border-radius: 0.5rem;
  color: var(--gb-muted);
  font-size: 0.875rem;
  font-weight: 700;
  transition: background 300ms var(--gb-ease), color 300ms var(--gb-ease), box-shadow 300ms var(--gb-ease);
}

.curriculum-collection-option:hover input:not(:checked) + .curriculum-collection-label {
  color: var(--gb-gold-deep);
}

.curriculum-collection-option input:checked + .curriculum-collection-label {
  background: var(--gb-card-click);
  color: var(--gb-ink);
  box-shadow: inset 0 0 0 1px var(--gb-click-line), 0 0 14px rgba(245, 197, 24, 0.35);
}

.curriculum-collection-option input:focus-visible + .curriculum-collection-label {
  outline: 3px solid rgba(245, 197, 24, 0.6);
  outline-offset: 2px;
}

.curriculum-collection-count {
  background: #FBF2D6;
  color: var(--gb-ink);
  font-weight: 700;
}

.curriculum-collection-option input:checked + .curriculum-collection-label .curriculum-collection-count {
  background: var(--gb-gold);
}

#start,
#audioenable,
#completionok {
  border: 1px solid #E8CE6A;
  background: var(--gb-gold-btn);
  color: var(--gb-ink);
}

#start:hover,
#audioenable:hover,
#completionok:hover {
  filter: brightness(1.08) saturate(1.3);
  box-shadow: 0 0 18px rgba(245, 197, 24, 0.65);
}

/* Overlay is restyled last by genbee-look.js so injected overlay CSS cannot win. */

.gb-hive-corner,
.gb-bee-layer {
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

.gb-hive-corner {
  top: 0;
  right: 0;
  width: min(760px, 70vw);
  height: min(620px, 70vh);
}

body[data-gb-chrome="listing"] .gb-hive-corner {
  inset: 0;
  width: 100%;
  height: 100%;
  right: auto;
}

.gb-bee-layer {
  inset: 0;
  z-index: 12;
  overflow: hidden;
}

.gb-bee-fly {
  position: absolute;
  top: 0;
  left: 0;
  animation: gb-fly 110s ease-in-out infinite;
}

.gb-bee-sprite {
  /* The layer is click-through; only the bee itself is interactive (bee antics). */
  pointer-events: auto;
  cursor: pointer;
  display: block;
  width: 52px;
  aspect-ratio: 227 / 226;
  background: url("/assets/bee-frames.png") 0 0 no-repeat;
  background-size: 1000% 100%;
  transform: scaleX(-1);
  filter: drop-shadow(0 0 8px rgba(245, 197, 24, 0.85)) drop-shadow(0 0 20px rgba(245, 197, 24, 0.45));
  animation: gb-bob 4.2s ease-in-out infinite, gb-wings 0.45s steps(10) infinite;
}

/* Terminator bee: chrome exoskeleton, pulsing red eye. It'll be back. */
.gb-bee-sprite.gb-bee-terminator {
  position: relative;
  filter: grayscale(1) contrast(1.5) brightness(0.8)
    drop-shadow(0 0 10px rgba(255, 30, 30, 0.9)) drop-shadow(0 0 24px rgba(255, 30, 30, 0.5));
}

.gb-bee-sprite.gb-bee-terminator::after {
  content: "";
  position: absolute;
  left: 14%;
  top: 30%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff2020;
  box-shadow: 0 0 8px 3px rgba(255, 32, 32, 0.95), 0 0 18px 8px rgba(255, 32, 32, 0.5);
  animation: gb-term-eye 1.1s ease-in-out infinite;
}

@keyframes gb-term-eye {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .gb-bee-fly,
  .gb-bee-sprite,
  .gb-hive-corner rect[data-glow] {
    animation: none;
  }
  #subjgrid.subject-hive .subject-group-grid.comb .card:hover,
  #levelgrid.comb .card:hover,
  #coursegrid .card:hover,
  #tutorcards .tcard:hover,
  .hive-cell:hover,
  .plan-card:hover,
  .pack-card:hover {
    animation: none;
    transform: none;
    filter: none;
  }
}

@media print {
  .gb-hive-corner,
  .gb-bee-layer {
    display: none;
  }
}