/* PHOBEE design system — presentation only. No logo asset is intentionally included. */
:root{
  --ph-indigo:#3F46A5;
  --ph-indigo-dark:#30388f;
  --ph-teal:#159E9A;
  --ph-teal-dark:#0f807d;
  --ph-honey:#F2B441;
  --ph-green:#49A66D;
  --ph-coral:#E97962;
  --ph-parchment:#FAF7F0;
  --ph-navy:#263347;
  --ph-slate:#667085;
  --ph-mist:#E9EDF3;
  --ph-white:#FFFFFF;
  --ph-shadow:0 8px 24px rgba(38,51,71,.07);
  --ph-radius:14px;
  --ph-radius-sm:10px;
  --ph-focus:0 0 0 3px rgba(63,70,165,.22);
  --font-ui:"Nunito Sans",system-ui,-apple-system,sans-serif;
  --font-reading:"Atkinson Hyperlegible",Arial,sans-serif;
}

html,body{background:var(--ph-parchment);color:var(--ph-navy);font-family:var(--font-ui)}
body{min-height:100vh}
h1,h2,h3,h4,h5,h6,.student-sidebar,.teacher-sidebar,.button,.ui-button,.align-button,.student-refine-action,.student-refine-hero-action,button{font-family:var(--font-ui)}
.student-main p,.practice-shell p,.practice-stage p,.student-refine-support-summary p,.student-refine-detail-card p,.student-class-card p,.student-class-card small,.student-refine-review-row span{font-family:var(--font-reading)}

/* Text-only brand until the final logo is approved. */
.student-sidebar__brand-mark,.student-brand .sound-circle,.student-access__brand .sound-circle,.teacher-header .sound-circle{display:none!important}
.student-sidebar__brand{padding-left:15px!important;gap:0!important}
.student-sidebar__brand strong{font-size:0!important;letter-spacing:.07em}
.student-sidebar__brand strong::after{content:"PHOBEE";font-size:1.15rem;font-weight:900;color:#fff}
.teacher-sidebar .student-brand span,.teacher-header .student-brand span{font-size:0!important}
.teacher-sidebar .student-brand span::after,.teacher-header .student-brand span::after{content:"PHOBEE";font-size:1.16rem;font-weight:900;letter-spacing:.075em;color:#fff}
.student-header:not(.teacher-header) .student-brand span{font-size:0!important}
.student-header:not(.teacher-header) .student-brand span::after{content:"PHOBEE";font-size:1.18rem;font-weight:900;letter-spacing:.075em;color:var(--ph-navy)}
.student-access__brand span{font-size:0!important}
.student-access__brand span::after{content:"PHOBEE";font-size:1.25rem;font-weight:900;letter-spacing:.075em;color:var(--ph-navy)}

/* Surfaces + typography hierarchy */
.student-main,.teacher-main{background:var(--ph-parchment)}
.page-heading h1,.align-topbar h1,.student-refine-heading h1,.student-class-hero h1{color:var(--ph-navy);font-weight:800;letter-spacing:-.02em}
.ui-eyebrow,.eyebrow,.section-kicker,.student-refine-heading .eyebrow,.student-class-card__head p{color:var(--ph-indigo);font-weight:800;letter-spacing:.075em;text-transform:uppercase}
.ui-card,.align-table-card,.align-quick-panel,.align-class-card,.student-refine-up-next,.student-refine-home-card,.student-refine-detail-card,.student-refine-progress-panel,.student-class-card,.student-class-hero,.student-class-summary article,.student-class-assignments,.student-class-work-card,.student-class-next-card{background:var(--ph-white);border:1px solid var(--ph-mist);border-radius:var(--ph-radius);box-shadow:var(--ph-shadow)}

/* Buttons */
.ui-button,.button,.align-button,.student-refine-action,.student-refine-hero-action,.student-join-class-button,.student-class-small-action,.student-class-work-action,.student-class-next-action{
  min-height:44px;border-radius:var(--ph-radius-sm);font-weight:800;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease
}
.ui-button--primary,.button--primary,.align-button--primary,.student-refine-action--primary,.student-refine-hero-action,.student-class-next-action,.student-class-work-action.is-primary{
  background:var(--ph-indigo)!important;border-color:var(--ph-indigo)!important;color:#fff!important;box-shadow:none!important
}
.ui-button--primary:hover,.button--primary:hover,.align-button--primary:hover,.student-refine-action--primary:hover,.student-refine-hero-action:hover,.student-class-next-action:hover,.student-class-work-action.is-primary:hover{background:var(--ph-indigo-dark)!important}
.ui-button--secondary,.button--secondary,.align-button:not(.align-button--primary),.student-refine-action--secondary,.student-join-class-button,.student-class-small-action,.student-class-work-action:not(.is-primary){background:#fff!important;border-color:var(--ph-indigo)!important;color:var(--ph-indigo)!important}
.text-button,a{accent-color:var(--ph-indigo)}

/* Accessible focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ph-indigo)!important;outline-offset:2px!important;box-shadow:var(--ph-focus)!important}
button,a.button,a.ui-button,.teacher-sidebar-link,.student-side-nav__item{min-height:44px}

/* Form controls */
input,select,textarea,.class-code-input{border-color:#cfd7e3!important;border-radius:9px!important;color:var(--ph-navy)!important;background:#fff!important}
input:focus,select:focus,textarea:focus{border-color:var(--ph-indigo)!important;box-shadow:var(--ph-focus)!important}
input[type="checkbox"],input[type="radio"]{accent-color:var(--ph-indigo)}

/* Teacher sidebar: PHOBEE order and restrained navigation. */
.teacher-sidebar{background:#213754!important;border-right:0!important;box-shadow:5px 0 18px rgba(38,51,71,.08)!important}
.teacher-sidebar-nav{display:flex!important;flex-direction:column!important}
.teacher-sidebar-link{color:#dbe4ee!important;border-radius:9px!important}
.teacher-sidebar-link:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
.teacher-sidebar-link.is-active{background:rgba(89,109,193,.5)!important;color:#fff!important}
.teacher-sidebar-link[data-nav-key="dashboard"]{order:1}.teacher-sidebar-link[data-nav-key="classes"]{order:2}.teacher-sidebar-link[data-nav-key="library"]{order:3}.teacher-sidebar-link[data-nav-key="assignments"]{order:4}.teacher-sidebar-link[data-nav-key="reports"]{order:5}.teacher-sidebar-link[data-nav-key="create"]{display:none!important}
.teacher-sidebar-divider{display:none!important}
.teacher-sidebar-link[data-nav-key="dashboard"] .teacher-sidebar-label,.teacher-sidebar-link[data-nav-key="library"] .teacher-sidebar-label{font-size:0}
.teacher-sidebar-link[data-nav-key="dashboard"] .teacher-sidebar-label::after{content:"Home";font-size:.95rem}
.teacher-sidebar-link[data-nav-key="library"] .teacher-sidebar-label::after{content:"Collections";font-size:.95rem}
.teacher-sidebar-icon svg{stroke-width:2!important}
.teacher-account{border-top-color:rgba(255,255,255,.15)!important}

/* Student sidebar mirrors teacher structure but stays simpler. */
.student-sidebar{background:#213754!important;border-right:0!important;box-shadow:5px 0 18px rgba(38,51,71,.08)!important}
.student-side-nav__item,.student-side-profile,.student-side-signout{color:#dbe4ee!important;border-radius:9px!important}
.student-side-nav__item:hover,.student-side-profile:hover,.student-side-signout:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
.student-side-nav__item.is-active{background:rgba(89,109,193,.5)!important;color:#fff!important}
.student-side-nav__divider{background:rgba(255,255,255,.15)!important}
.student-side-profile small{color:#acbbcd!important}

/* Teacher workspace: calmer PHOBEE cards and tables. */
.teacher-align-page{color:var(--ph-navy)}
.align-topbar{border-bottom-color:var(--ph-mist)!important}
.align-topbar p,.align-section-head p,.align-class-recent-meta,.align-table-count{color:var(--ph-slate)!important}
.align-class-grid{gap:16px!important}
.align-class-card{overflow:hidden!important}
.align-class-banner{background:#f7f8fc!important;color:var(--ph-navy)!important;border-bottom:1px solid var(--ph-mist)!important}
.align-class-banner--2{background:#f0faf9!important}.align-class-banner--3{background:#fff8e8!important}.align-class-banner--4{background:#f3f7f4!important}
.align-class-banner h2,.align-class-banner p,.align-class-banner span{color:inherit!important}
.align-class-code{background:#fff!important;border:1px solid var(--ph-mist)!important;color:var(--ph-indigo)!important}
.align-class-recent{background:#fff!important}
.align-mode{border-radius:999px!important;font-weight:800!important}
.align-mode--practice{background:#e3f6f2!important;color:var(--ph-teal-dark)!important}.align-mode--assessment{background:#eef0ff!important;color:var(--ph-indigo)!important}
.align-status--completed{background:#e5f4e9!important;color:#257644!important}.align-status--in-progress{background:#fff2d5!important;color:#996710!important}.align-status--not-started{background:#eef2f6!important;color:#59677a!important}
.align-progress,.student-refine-progress{background:var(--ph-mist)!important;border-radius:999px!important;overflow:hidden!important}.align-progress i,.student-refine-progress i{background:var(--ph-green)!important;border-radius:999px!important}
.align-assignment-table th{background:#f7f8fa!important;color:var(--ph-slate)!important}.align-assignment-table td{border-color:var(--ph-mist)!important}.align-analyze,.align-report-link{color:var(--ph-teal-dark)!important;font-weight:800!important}

/* Teacher list/collection workspace */
.teacher-design-page,.teacher-content-page,.teacher-list-builder-page{background:var(--ph-parchment)!important;color:var(--ph-navy)!important}
.teacher-content-card,.teacher-list-card,.teacher-builder-card,.teacher-recording-card,.teacher-word-editor,.teacher-design-card{background:#fff!important;border-color:var(--ph-mist)!important;border-radius:var(--ph-radius)!important;box-shadow:var(--ph-shadow)!important}
.teacher-content-actions .ui-button,.teacher-builder-actions .ui-button{border-radius:var(--ph-radius-sm)!important}
.teacher-record-button,.record-button,.audio-button,[data-action*="record"]{border-radius:999px!important}
.teacher-record-button,.record-button{color:var(--ph-teal)!important}
.ready-badge,.is-ready,.status-ready{background:#e5f4e9!important;color:#257644!important}

/* Student home + assignments */
.student-refine-page{max-width:1120px!important;color:var(--ph-navy)!important}
.student-refine-heading p,.student-refine-assignment-title p,.student-refine-assignment-progress span,.student-refine-detail-head p,.student-class-work-card p{color:var(--ph-slate)!important}
.student-refine-up-next{border-color:#dfe3f5!important}
.student-refine-up-next::before{background:var(--ph-indigo)!important}
.student-refine-home-grid{gap:16px!important}
.student-refine-home-icon{background:#e3f6f2!important;color:var(--ph-teal)!important}
.student-refine-home-card strong{color:var(--ph-navy)!important}
.student-refine-mode{border-radius:999px!important;font-weight:800!important}
.student-refine-mode--practice{background:#e3f6f2!important;color:var(--ph-teal-dark)!important}.student-refine-mode--assessment{background:#eef0ff!important;color:var(--ph-indigo)!important}
.student-refine-status--completed{background:#e5f4e9!important;color:#257644!important}.student-refine-status--in-progress{background:#fff2d5!important;color:#996710!important}.student-refine-status--not-started{background:#eef2f6!important;color:#59677a!important}
.segmented-control{background:#f5f6f9!important;border-color:var(--ph-mist)!important}.segmented-control button.is-active{background:var(--ph-indigo)!important;color:#fff!important}

/* Student classes and card workflow */
.student-class-card__icon{background:#eef0ff!important;color:var(--ph-indigo)!important}
.student-class-card__stats{background:#fafbfc!important;border-color:var(--ph-mist)!important}
.student-class-card__action{color:var(--ph-teal-dark)!important;background:#fff!important}
.student-class-hero,.student-class-summary article,.student-class-assignments{border-color:var(--ph-mist)!important}
.student-class-next,.student-class-next-card{background:#f4fbfa!important;border-color:#cce8e4!important}
.student-class-work-card{border-color:var(--ph-mist)!important;box-shadow:0 5px 16px rgba(38,51,71,.05)!important}
.student-class-work-tabs button{border-radius:999px!important}
.student-class-work-tabs button.is-active{background:var(--ph-indigo)!important;color:#fff!important;border-color:var(--ph-indigo)!important}
.student-class-due-badge.is-due-soon{background:#fff2d5!important;color:#996710!important}.student-class-due-badge.is-past-due{background:#fde9e5!important;color:#b34c39!important}

/* Practice: preserve circles/chunk mechanics; apply PHOBEE states only. */
.practice-shell,.practice-screen,.practice-page{background:var(--ph-parchment)!important;color:var(--ph-navy)!important}
.practice-card,.practice-stage,.practice-panel{background:#fff!important;border-color:var(--ph-mist)!important;box-shadow:var(--ph-shadow)!important}
.practice-progress i,.practice-progress-bar i{background:var(--ph-teal)!important}
.sound-button,.whole-word-button,[data-action="play-word"],[data-action="play-chunk"]{min-height:44px}
.whole-word-button,.practice-audio-primary{background:var(--ph-teal)!important;border-color:var(--ph-teal)!important;color:#fff!important}
.sound-circle.is-selected,.chunk-button.is-selected,.sound-chunk.is-selected{border-color:var(--ph-indigo)!important;color:var(--ph-indigo)!important;box-shadow:var(--ph-focus)!important}
.sound-circle.is-playing,.chunk-button.is-playing,.sound-chunk.is-playing{background:var(--ph-teal)!important;border-color:var(--ph-teal)!important;color:#fff!important}
.letter-slot,.letter-box,.practice-letter{border-color:#bac5d5!important;background:#fff!important;color:var(--ph-navy)!important}
.letter-slot.is-active,.letter-box.is-active,.practice-letter.is-active{border-color:var(--ph-indigo)!important;box-shadow:var(--ph-focus)!important}
.letter-slot.is-correct,.letter-box.is-correct,.practice-letter.is-correct{border-color:var(--ph-green)!important;color:#237444!important;background:#f4fbf6!important}
.letter-slot.is-error,.letter-box.is-error,.practice-letter.is-error{border-color:var(--ph-coral)!important;box-shadow:0 0 0 3px rgba(233,121,98,.16)!important}
.definition-card,.example-card,.practice-support-card{background:#f5f8fb!important;border-color:var(--ph-mist)!important}
.points-badge,.practice-points{color:#8b630d!important;border-color:var(--ph-honey)!important;background:#fff9e9!important}

/* Results + review */
.results-card,.review-card,.student-refine-review-panel{background:#fff!important;border-color:var(--ph-mist)!important;box-shadow:var(--ph-shadow)!important}
.result-correct,.correct-state{color:#257644!important}.result-error,.incorrect-state{color:#b34c39!important}
.review-progress i,.student-refine-mastery i{background:var(--ph-green)!important}

/* Status meaning beyond color */
.align-status,.student-refine-status,.student-refine-mode,.status-badge{font-weight:800!important}

/* Reduce motion without changing functionality. */
.reduce-motion *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}

@media(max-width:900px){
  .teacher-main,.student-main{padding-left:20px!important;padding-right:20px!important}
  .align-topbar,.student-refine-heading{gap:16px!important}
}
@media(max-width:650px){
  .ui-card,.align-table-card,.align-quick-panel,.align-class-card,.student-refine-up-next,.student-refine-home-card,.student-refine-detail-card,.student-class-card,.student-class-hero,.student-class-assignments{border-radius:12px!important}
  .student-refine-page{padding-left:10px!important;padding-right:10px!important}
}