/* First Comet final typography layer.
   Loaded last so readability wins over component-level legacy sizes. */

@media (min-width:1001px){
  body{font-size:17px}

  /* Sidebar + top workspace chrome */
  .rail-create{font-size:.96rem}
  .nav-label{font-size:.76rem!important;letter-spacing:.13em}
  .nav-item b{font-size:1rem!important;line-height:1.2}
  .nav-item small{font-size:.82rem!important;line-height:1.35}
  .nav-item span{font-size:1.2rem}
  .crumb,
  .crumb span,
  .crumb b{font-size:.94rem!important}
  .mode-chip,.icon-button{font-size:.9rem}
  .rail-note b{font-size:.94rem}
  .rail-note small{font-size:.78rem}

  /* Returning homepage */
  #view-home .fc-progress-welcome .eyebrow,
  #view-home .fc-next-win .eyebrow,
  #view-home .fc-progress-details .eyebrow{font-size:.8rem!important}

  #view-home .fc-progress-welcome h1{
    font-size:clamp(2.15rem,2.7vw,3.15rem)!important;
    line-height:1.02;
  }
  #view-home .fc-progress-welcome p{
    font-size:1rem!important;
    line-height:1.5;
  }

  #view-home .fc-next-win h2{
    font-size:1.55rem!important;
    line-height:1.12;
  }
  #view-home .fc-next-win p{font-size:.92rem!important}
  #view-home .fc-next-win .primary{font-size:.96rem!important}

  #view-home .trail-stops span{
    font-size:.86rem!important;
  }
  #view-home .trail-stops b{
    font-size:.88rem;
  }

  #view-home .fc-proof-strip span{
    font-size:.9rem!important;
    line-height:1.25;
  }
  #view-home .fc-proof-strip b{
    font-size:1rem!important;
  }

  #view-home .fc-progress-details>summary{
    font-size:.9rem!important;
  }
  #view-home .fc-progress-detail-grid b{font-size:.94rem!important}
  #view-home .fc-progress-detail-grid p{font-size:.84rem!important}
  #view-home .fc-passport-step b{font-size:.84rem!important}
  #view-home .fc-passport-step small{font-size:.75rem!important}
  #view-home .fc-mini-history span{font-size:.8rem!important}

  /* New-user homepage */
  #view-home .home-mission-tag,
  #view-home .eyebrow{font-size:.8rem!important}
  #view-home .home-hero-copy>p{
    font-size:1.08rem!important;
    line-height:1.62;
  }
  #view-home .home-starter-actions button{font-size:.98rem!important}
  #view-home .home-starter-status{font-size:.9rem!important}
  #view-home .home-section-head h2{font-size:1.65rem!important}
  #view-home .home-action-card b{font-size:1.18rem!important}
  #view-home .home-action-card small{
    font-size:.9rem!important;
    line-height:1.45;
  }

  /* Collapsed home panels */
  #view-home .home-compact-details>summary .eyebrow{
    font-size:.75rem!important;
  }
  #view-home .home-compact-details>summary b{
    font-size:1.04rem!important;
  }
  #view-home .home-compact-details>summary>span:last-child{
    font-size:.86rem!important;
  }
  #view-home .home-more-grid b{font-size:.94rem!important}
  #view-home .home-more-grid small{font-size:.82rem!important}
  #view-home #fcVisitorStats{
    font-size:.8rem!important;
    line-height:1.45!important;
  }

  /* Bottom command bar */
  .command-bar{font-size:1rem!important}
  .command-bar span:nth-child(2){font-size:.98rem!important}
  .command-bar kbd{font-size:.86rem}
}

/* Tablet keeps readable labels without crowding the compact rail. */
@media (min-width:701px) and (max-width:1000px){
  body{font-size:16.5px}
  #view-home .trail-stops span{font-size:.8rem}
  #view-home .fc-proof-strip span{font-size:.84rem}
}

/* Phone sizes should still be comfortably readable. */
@media (max-width:700px){
  body{font-size:16px}
  .nav-item b{font-size:.78rem}
  #view-home .home-hero-copy>p{font-size:1rem}
  #view-home .home-action-card b{font-size:1.08rem}
  #view-home .home-action-card small{font-size:.84rem}
  #view-home .trail-stops span{font-size:.76rem}
  #view-home .fc-proof-strip span{font-size:.82rem}
  #view-home .fc-progress-details>summary{font-size:.84rem}
}


/* Progress row labels were still too small on desktop */
@media (min-width:1001px){
  #view-home .fc-proof-strip span{
    font-size:1rem!important;
    line-height:1.3!important;
    min-height:52px;
    padding:10px 14px 10px 34px;
  }
  #view-home .fc-proof-strip b{
    font-size:1.12rem!important;
    margin-right:4px;
  }
  #view-home .fc-proof-strip span:before{
    left:13px;
    width:9px;
    height:9px;
  }

  /* Small descriptive words in the left navigation */
  .nav-item small{
    font-size:.88rem!important;
    line-height:1.4!important;
  }
}


/* Guidance sentences should read as guidance, not oversized hero headlines. */
#view-vscode .vscode-heading h1,
#view-careers #careerHeroTitle,
#view-home #homeStarterTitle,
#view-learn .course-page-heading h1{
  font-size:clamp(1.9rem,2.7vw,2.75rem)!important;
  line-height:1.12!important;
  letter-spacing:-.035em!important;
  max-width:900px;
}

#view-learn #learnFocusTitle,
#view-learn .compact-intro h2,
#view-learn #teachingTitle{
  font-size:clamp(1.5rem,2.05vw,2rem)!important;
  line-height:1.18!important;
  letter-spacing:-.025em!important;
}

@media (max-width:700px){
  #view-vscode .vscode-heading h1,
  #view-careers #careerHeroTitle,
  #view-home #homeStarterTitle,
  #view-learn .course-page-heading h1{
    font-size:1.85rem!important;
    line-height:1.16!important;
  }

  #view-learn #learnFocusTitle,
  #view-learn .compact-intro h2,
  #view-learn #teachingTitle{
    font-size:1.45rem!important;
    line-height:1.2!important;
  }
}


/* ===== Subtle identity for the rest of First Comet's main headers ===== */
#view-learn .course-page-heading,
#view-settings .page-heading,
.career-hero,
.cv-hero,
.bracu-hero,
.journey-hero,
.cse110-notes-head{
  --hero-accent:var(--coral);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:2px solid var(--line)!important;
  border-top:4px solid var(--hero-accent)!important;
  border-radius:18px;
  padding:22px 24px!important;
  background:
    radial-gradient(circle at 91% 18%,color-mix(in srgb,var(--hero-accent) 17%,transparent),transparent 23%),
    linear-gradient(125deg,var(--panel),var(--paper));
  box-shadow:4px 4px 0 color-mix(in srgb,var(--line) 80%,transparent);
}

#view-learn .course-page-heading{--hero-accent:var(--coral)}
#view-settings .page-heading{--hero-accent:var(--yellow)}
.career-hero{--hero-accent:var(--pink)}
.cv-hero{--hero-accent:var(--green)}
.bracu-hero{--hero-accent:var(--yellow)}
.journey-hero{--hero-accent:var(--blue)}
.cse110-notes-head{--hero-accent:var(--blue)}

#view-learn .course-page-heading::after,
#view-settings .page-heading::after,
.career-hero::after,
.cv-hero::after,
.bracu-hero::after,
.journey-hero::after,
.cse110-notes-head::after{
  content:"☄";
  position:absolute;
  right:22px;
  top:14px;
  z-index:-1;
  font-size:1.45rem;
  opacity:.22;
  color:var(--hero-accent);
  transform:rotate(-14deg);
  animation:fcSoftHeroComet 4.8s ease-in-out infinite;
}

#view-learn .course-page-heading::before,
#view-settings .page-heading::before,
.career-hero::before,
.cv-hero::before,
.bracu-hero::before,
.journey-hero::before,
.cse110-notes-head::before{
  content:"";
  position:absolute;
  right:-42px;
  bottom:-72px;
  width:180px;
  height:180px;
  border:1.5px dashed color-mix(in srgb,var(--hero-accent) 42%,transparent);
  border-radius:50%;
  opacity:.55;
  z-index:-1;
  animation:fcSoftHeroOrbit 13s linear infinite;
}

#view-learn .course-page-heading h1,
#view-settings .page-heading h1,
.career-hero h1,
.cv-hero h1,
.bracu-hero h1,
.journey-hero h2,
.cse110-notes-head h1{
  position:relative;
  width:fit-content;
  max-width:min(900px,90%);
  margin-top:9px!important;
  margin-bottom:11px!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
}

#view-learn .course-page-heading h1::after,
#view-settings .page-heading h1::after,
.career-hero h1::after,
.cv-hero h1::after,
.bracu-hero h1::after,
.journey-hero h2::after,
.cse110-notes-head h1::after{
  content:"";
  display:block;
  width:min(132px,42%);
  height:5px;
  margin-top:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--hero-accent),color-mix(in srgb,var(--hero-accent) 20%,transparent));
  transform-origin:left;
  animation:fcSoftHeroLine .65s cubic-bezier(.2,.8,.2,1) both;
}

#view-learn .course-page-heading .eyebrow,
#view-settings .page-heading .eyebrow,
.career-hero .eyebrow,
.cv-hero .eyebrow,
.bracu-hero .eyebrow,
.journey-hero .eyebrow,
.cse110-notes-head .eyebrow{
  color:color-mix(in srgb,var(--hero-accent) 78%,var(--ink));
  font-weight:700;
}

#view-learn .course-page-heading>p,
#view-settings .page-heading>p,
.career-hero>div>p,
.cv-hero>div>p,
.bracu-hero>div>p,
.journey-hero>div>p,
.cse110-notes-head>div>p{
  max-width:720px;
  line-height:1.55;
}

/* Keep side information useful without making every header a full hero. */
.career-hero aside,
.cv-hero aside,
.bracu-hero aside,
.journey-hero aside{
  transform:translateY(0);
  transition:transform .22s ease,box-shadow .22s ease;
}
.career-hero aside:hover,
.cv-hero aside:hover,
.bracu-hero aside:hover,
.journey-hero aside:hover{
  transform:translateY(-3px);
  box-shadow:3px 3px 0 var(--line);
}

.dark #view-learn .course-page-heading,
.dark #view-settings .page-heading,
.dark .career-hero,
.dark .cv-hero,
.dark .bracu-hero,
.dark .journey-hero,
.dark .cse110-notes-head{
  background:
    radial-gradient(circle at 91% 18%,color-mix(in srgb,var(--hero-accent) 12%,transparent),transparent 23%),
    linear-gradient(125deg,var(--panel),var(--paper));
}

@keyframes fcSoftHeroComet{
  0%,100%{transform:translate(0,0) rotate(-14deg)}
  50%{transform:translate(-9px,7px) rotate(-8deg)}
}
@keyframes fcSoftHeroOrbit{
  to{transform:rotate(360deg)}
}
@keyframes fcSoftHeroLine{
  from{transform:scaleX(.15);opacity:.2}
  to{transform:scaleX(1);opacity:1}
}

@media(max-width:760px){
  #view-learn .course-page-heading,
  #view-settings .page-heading,
  .career-hero,
  .cv-hero,
  .bracu-hero,
  .journey-hero,
  .cse110-notes-head{
    padding:18px!important;
    border-radius:15px;
  }
  #view-learn .course-page-heading::after,
  #view-settings .page-heading::after,
  .career-hero::after,
  .cv-hero::after,
  .bracu-hero::after,
  .journey-hero::after,
  .cse110-notes-head::after{
    right:14px;
    top:10px;
    font-size:1.2rem;
  }
  #view-learn .course-page-heading h1,
  #view-settings .page-heading h1,
  .career-hero h1,
  .cv-hero h1,
  .bracu-hero h1,
  .journey-hero h2,
  .cse110-notes-head h1{
    max-width:88%;
  }
}

@media(prefers-reduced-motion:reduce){
  #view-learn .course-page-heading::after,
  #view-settings .page-heading::after,
  .career-hero::after,
  .cv-hero::after,
  .bracu-hero::after,
  .journey-hero::after,
  .cse110-notes-head::after,
  #view-learn .course-page-heading::before,
  #view-settings .page-heading::before,
  .career-hero::before,
  .cv-hero::before,
  .bracu-hero::before,
  .journey-hero::before,
  .cse110-notes-head::before{
    animation:none!important;
  }
}


/* Remove Learn header blob/orbit decoration */
#view-learn .course-page-heading{
  background:linear-gradient(125deg,var(--panel),var(--paper))!important;
}
#view-learn .course-page-heading::before{
  content:none!important;
}


/* Smaller CV Studio hero title */
.cv-hero #cvHeroTitle{
  font-size:clamp(1.75rem,2.55vw,2.6rem)!important;
  line-height:1.08!important;
  max-width:760px!important;
}
@media(max-width:700px){
  .cv-hero #cvHeroTitle{
    font-size:1.65rem!important;
    line-height:1.12!important;
    max-width:92%!important;
  }
}