/* ============================================================
   FIJILEARN PREMIUM — v1
   Loaded LAST, after fijilearn-sky.css.

   Same thesis as the debt calculator: premium is subtraction.
   One thing leads, everything else goes quiet, and the surfaces
   behave like physical objects.

   What this fixes, in order of how much it was costing:
   1. Nothing led. "Next for you" showed three identical cards,
      so the eye landed nowhere — even though the ranking code
      already marks the best one .dn-suggest--top.
   2. The background was a field of overlapping bubbles, which
      left the frosted cards nothing clean to sit on.
   3. Pure #000 text on pale blue — harsh, and not the brand.
   ============================================================ */

/* ---------- 1. THE FIELD ----------
   Deep at the top, near-white at the bottom. A card can only
   look like it is floating if there is something behind it to
   float against. The old bubble gradients fought the cards for
   attention and gave the glass nothing to refract. */
html:root {
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(255,255,255,.52), transparent 58%),
    linear-gradient(176deg, #5FB4DC 0%, #9FD6EE 32%, #BFE4F5 62%, #EAF6FC 100%) !important;
  background-attachment: fixed !important;

  /* Softer ink. #000 on pale blue is harsh and reads as unstyled;
     this is the same deep navy-teal used across the other apps. */
  --ink: #06293B;
  --muted: #2B5268;
  --teal: #0E3A52;
  --teal-dark: #06293B;
  --blue: #1773AC;
  --line: rgba(6,41,59,.14);

  --fl-accent: #1773AC;
  --fl-accent-deep: #125D8C;
  --fl-good: #0E8F6B;

  /* Depth is a stack — contact, lift, ambient. One blur reads as
     a sticker; three read as an object resting on a surface. */
  --fl-lift:
    0 1px 2px rgba(6,41,59,.07),
    0 8px 18px -8px rgba(6,41,59,.16),
    0 40px 70px -40px rgba(6,41,59,.45);

  --fl-spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%,
    .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%,
    1.015 60.2%, 1.006 80.2%, 1);
}
html body { color: #06293B; }
html body :is(h1,h2,h3,h4) { color: #06293B; }
html body :is(h1,h2,h3) span { color: #1773AC; }

/* The decorative bubble layer competes with the content for
   attention and wins. Kept in the DOM, dialled right back. */
.dn-bubbles { opacity: .22 !important; }

/* ---------- 2. THE ONE NEXT STEP ----------
   The rail already ranks its items and marks the winner
   .dn-suggest--top. Nothing used that. Now the top suggestion is
   the hero of the page and the rest are quiet alternatives. */
.dn-rail {
  /* The rail is injected after <header>, OUTSIDE .wrap, so it inherits no
     horizontal gutter and ran off the right edge. It has to carry its own. */
  margin: 10px auto 18px;
  padding-inline: var(--dm-gutter, 16px);
  max-width: var(--dm-width, 1248px);
  background: none;
  border: 0;
  box-sizing: border-box;
}
.dn-rail__head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 0 2px 10px;
}
.dn-rail__eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #2B5268;
}
.dn-rail__context { font-size: 12.5px; color: #4C7A92; }

.dn-rail__items { display: grid; gap: 10px; }

/* Secondary suggestions: quiet, single line, clearly subordinate. */
.dn-suggest {
  display: block; width: 100%; text-align: left;
  background: rgba(255,255,255,.58);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 16px;
  padding: 13px 16px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(6,41,59,.05);
  transition: transform 130ms var(--fl-spring), background 160ms linear;
  touch-action: manipulation;
}
.dn-suggest:active { transform: scale(.985); }
.dn-suggest__lead { display: flex; align-items: center; gap: 9px; }
.dn-suggest__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #1773AC; opacity: .55;
}
.dn-suggest__label { font-weight: 600; font-size: 15px; color: #06293B; }
.dn-suggest__why { font-size: 13px; color: #2B5268; margin-top: 3px; padding-left: 16px; }
.dn-suggest__meta { font-size: 12px; color: #4C7A92; margin-top: 2px; padding-left: 16px; }

/* THE HERO. White, lifted, big, with the action spelled out. */
.dn-suggest--top {
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 26px;
  padding: 24px 22px 22px;
  box-shadow: var(--fl-lift);
  position: relative; overflow: hidden;
}
/* The hairline of light along the top edge — most of what makes
   a white rectangle read as manufactured rather than drawn. */
.dn-suggest--top::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 30%, rgba(255,255,255,.95) 70%, transparent);
}
.dn-suggest--top .dn-suggest__lead { display: block; }
.dn-suggest--top .dn-suggest__dot { display: none; }
.dn-suggest--top .dn-suggest__label {
  font-family: Verdana,Geneva,Arial,sans-serif;
  font-weight: 800;
  font-size: clamp(27px, 7.6vw, 34px);
  line-height: 1.08; letter-spacing: -.035em;
  color: #06293B; display: block;
}
.dn-suggest--top .dn-suggest__why {
  font-size: 14.5px; color: #2B5268; margin-top: 8px; padding-left: 0; line-height: 1.45;
}
.dn-suggest--top .dn-suggest__meta {
  display: inline-block; margin-top: 14px; padding: 7px 13px;
  background: rgba(23,115,172,.11); color: #125D8C;
  border-radius: 999px; font-size: 12.5px; font-weight: 500;
}
/* A real affordance. The card was tappable but never said so. */
.dn-suggest--top::after {
  content: 'Start →';
  /* inline-flex with a fixed height, not min-height + padding — those
     stack on an inline-block box and inflate the pill into an oval. */
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding-inline: 24px; margin-top: 18px;
  background: var(--fl-accent); color: #fff;
  border-radius: 999px; font-weight: 600; font-size: 15px;
  box-shadow: 0 6px 18px rgba(23,115,172,.32);
}
.dn-suggest--top:active::after { background: var(--fl-accent-deep); }

/* ---------- 3. CARDS ---------- */
.levelbar, .resume, .kc-hero, .browse-row, .joinbox, .hero {
  border-radius: 20px;
}
.resume {
  background: #fff !important;
  box-shadow: var(--fl-lift);
  border: 1px solid rgba(255,255,255,.9) !important;
}

/* ---------- 4. PRESS FEEDBACK ----------
   Every tappable thing should physically give. 120ms, barely
   noticed, and it changes how responsive the whole app feels. */
button, .chip, [role="button"], .card, .crs {
  transition: transform 120ms cubic-bezier(.2,.8,.2,1);
  touch-action: manipulation;
}
button:active, .chip:active, [role="button"]:active, .crs:active { transform: scale(.97); }
button, .chip { min-height: 44px; }

/* ---------- 5. HORIZONTAL ROWS ----------
   Invisible on a phone, but a grey native bar on desktop. */
.browse-row__track, .row-track, [style*="overflow-x"], .crs-row {
  scrollbar-width: thin;
  scrollbar-color: rgba(23,115,172,.45) transparent;
}
.browse-row__track::-webkit-scrollbar, .row-track::-webkit-scrollbar, .crs-row::-webkit-scrollbar { height: 6px; }
.browse-row__track::-webkit-scrollbar-thumb, .row-track::-webkit-scrollbar-thumb, .crs-row::-webkit-scrollbar-thumb {
  background: rgba(23,115,172,.45); border-radius: 99px;
}
.browse-row__track::-webkit-scrollbar-track, .row-track::-webkit-scrollbar-track, .crs-row::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 6. TYPE ---------- */
h1, h2, h3 { text-wrap: balance; letter-spacing: -.02em; }
p { text-wrap: pretty; }
.xp, .streak, .num, .level { font-variant-numeric: tabular-nums; }

/* ---------- 7. ENTRANCE ---------- */
@keyframes fl-settle { from { opacity: 0; transform: translateY(13px) scale(.986); } to { opacity: 1; transform: none; } }
.dn-suggest--top { animation: fl-settle .7s var(--fl-spring) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 8. THE FLOATING GUIDE BUTTON ----------
   It is fixed bottom-right over the scrolling page, so the last
   thing on the page sits underneath it and can never be scrolled
   clear. Give the page room to end above it. */
body { padding-bottom: 84px; }
.dn-launcher {
  box-shadow: 0 2px 6px rgba(6,41,59,.14), 0 14px 32px -12px rgba(6,41,59,.4);
  transition: transform 140ms var(--fl-spring), opacity 180ms linear;
}
.dn-launcher:active { transform: scale(.94); }