/* ═══════════════════════════════════════════════════════════════════════
   FIRST SALE SOCIETY — 5 · POLISH & FIXES
   Responsive content scaling, motion, focus, embeds, print.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   MOTION — keep entrance subtle and SAFE (no opacity:0 resting state,
   so content is never invisible in print or non-animating renderers)
   ───────────────────────────────────────────────────────────── */
@keyframes fss-rise {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}
.hero h1 { animation: fss-rise 0.5s cubic-bezier(0.2,0.7,0.2,1) both; }

/* ─────────────────────────────────────────────────────────────
   LINK / FOCUS niceties
   ───────────────────────────────────────────────────────────── */
a, button { -webkit-tap-highlight-color: transparent; }
.nav-item:focus-visible,
.dhc-btn:focus-visible,
.module-nav-btn:focus-visible,
.tkc-link:focus-visible,
.swipe-card:focus-visible,
.itkc:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   EMBEDS — twitter / video tidy-up
   ───────────────────────────────────────────────────────────── */
.twitter-tweet { margin: 0 auto !important; }
.tweet-embed-wrap iframe { border-radius: var(--r-md) !important; }
.module-tweet-wrap { max-width: 550px; margin-inline: auto; }

/* ─────────────────────────────────────────────────────────────
   DARK-MODE REFINEMENTS
   (keyed off BOTH body.dark-mode and html.preload-dark so they hold
   through hard navigations even before the body class is re-applied)
   ───────────────────────────────────────────────────────────── */
body.dark-mode .course-img-wrap img,
html.preload-dark .course-img-wrap img { border-color: var(--border2); }
body.dark-mode .hero,
html.preload-dark .hero { background: radial-gradient(ellipse 68% 58% at 50% -8%, var(--accent-glow), transparent 70%), var(--bg); }
body.dark-mode .step:hover, html.preload-dark .step:hover,
body.dark-mode .tkc:hover, html.preload-dark .tkc:hover,
body.dark-mode .swipe-card:hover, html.preload-dark .swipe-card:hover,
body.dark-mode .itkc:hover, html.preload-dark .itkc:hover { background: var(--surface2); }
/* Inputs sit a touch lighter than surface in dark for affordance */
body.dark-mode .ks-field input, html.preload-dark .ks-field input,
body.dark-mode .glossary-search, html.preload-dark .glossary-search { background: var(--surface3); }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — content scaling
   ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero { padding-top: clamp(48px, 9vw, 80px); }
  #scroll-top-btn { bottom: 18px; right: 18px; }
}
@media (max-width: 680px) {
  .module-content { font-size: 16px; }
  .step { flex-direction: row; padding: 16px; }
  .inline-tools-grid,
  .tk-grid-v2,
  .ai-tools-grid,
  .swipe-grid { grid-template-columns: 1fr; }
  .itkc { flex-wrap: wrap; }
  .itkc-cta { margin-left: 56px; }
  .hero-meta { gap: 28px; }
  .sfb-section-desc { display: none; }
  .module-nav { gap: 10px; }
  .module-nav-info { order: 3; flex-basis: 100%; }
  .inspo-card { flex-basis: 280px; }
  .community-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 430px) {
  .hero h1 { font-size: clamp(30px, 9vw, 40px); }
  .hero-meta { gap: 20px; }
  .hsv { font-size: 30px; }
  .panel-header { padding-inline: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE EXPERIENCE PASS  (≤768px)
   Breadcrumb collapse · sticky bottom action bar · table swipe-hint ·
   tighter hero · code wrapping · safe-area insets.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── #1 TOC card — hidden on mobile; breadcrumb already gives context ── */
  .module-toc-inline { display: none; }

  /* ── #2 Breadcrumb → one tidy row: phase chip + counter, nothing else ── */
  .module-topbar {
    padding-top: 12px;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .module-crumb a,
  .module-crumb .crumb-sep,
  .module-crumb .crumb-current { display: none; }
  .module-crumb {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
  }
  .module-crumb .crumb-phase {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--accent);
    font-weight: 600;
  }
  .module-counter { flex: none; }

  /* ── #6 Tighter hero so real content reaches the first screen ── */
  .hero {
    padding-top: clamp(28px, 8vw, 44px) !important;
    padding-bottom: clamp(28px, 7vw, 40px) !important;
  }
  .hero-eyebrow { display: none; }
  .hero h1 { margin-bottom: 14px !important; }
  .hero-sub { font-size: 16px !important; }
  .hero-meta {
    margin-top: 28px !important;
    gap: 14px 26px !important;
    flex-wrap: wrap;
  }

  /* ── #5 Table swipe-hint: edge fade + momentum scroll ── */
  .table-wrap {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bg));
  }
  .table-wrap table { min-width: 520px; }

  /* ── #5 Long tokens / code never break the layout ── */
  .module-content pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .module-content code,
  .module-content p,
  .module-content li { overflow-wrap: anywhere; word-break: break-word; }

  /* ── #4 Sticky bottom action bar; hide the inline one ── */
  #main > .module-nav,
  .module-content .module-nav { display: none; }

  #mobile-module-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 85;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--glass);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border);
  }
  #mobile-module-bar .mmb-prev {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: var(--r-md);
    border: 1px solid var(--border2);
    background: var(--surface);
    color: var(--text);
    font-size: 0; /* hide the verbose label; show a chevron via ::before */
    text-decoration: none;
  }
  #mobile-module-bar .mmb-prev::before {
    content: "‹";
    font-size: 24px;
    line-height: 1;
  }
  #mobile-module-bar .mmb-prev[disabled],
  #mobile-module-bar .mmb-spacer { opacity: 0.4; pointer-events: none; }
  #mobile-module-bar .mmb-next {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: var(--r-md);
    background: var(--accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: 15px; font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  #mobile-module-bar .mmb-next:active { background: var(--accent-h); }

  /* Keep content clear of the fixed bar */
  #main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* Sticky bar is mobile-only */
@media (min-width: 769px) {
  #mobile-module-bar { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   PRINT — clean, sidebar/chrome off
   ───────────────────────────────────────────────────────────── */
@media print {
  #sidebar, #desktop-header-controls, #mobile-header, #scroll-top-btn,
  #sidebar-backdrop, .module-nav, .discord-cta-block { display: none !important; }
  #main { margin-left: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .hero { background: none !important; border-bottom: 1px solid #ddd; }
  .box, .step, .framework, .tkc, .swipe-card, .itkc { box-shadow: none !important; break-inside: avoid; }
  a { color: #000 !important; text-decoration: underline; }
}