/* Shared design system for The Grid. See docs/design-notes.md — colors,
   type, and signature elements (light-trail progress, scanline sweep,
   ACCESS GRANTED/DENIED voice) are extracted from the Phase 1 prototype and
   must stay consistent as new pages/phases are added. Do not add rounded
   corners, drop shadows other than glow, or a third accent color. */
:root{
  --void:#04070b;
  --panel:#070d14;
  --grid-line:rgba(0,246,255,0.07);
  --cyan:#00f6ff;
  --cyan-dim:#0a5f6b;
  --blue:#0a84ff;
  --orange:#ff9500;
  --text:#cdeef5;
  --text-dim:#5f8791;
  --white:#eafcff;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--void);color:var(--text);
  font-family:'SF Mono','Consolas','Roboto Mono',monospace;min-height:100%;}
body{
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:38px 38px;
  background-color:var(--void);
}
::selection{background:var(--cyan);color:#000;}

/* HEADER */
header{
  padding:28px 20px 20px;
  text-align:center;
  border-bottom:1px solid var(--cyan-dim);
  position:relative;
  overflow:hidden;
}
.session-bar{
  position:absolute; top:10px; right:16px; font-size:11px; letter-spacing:1.5px;
  color:var(--text-dim); text-transform:uppercase; max-width:calc(100% - 32px);
}
.session-bar span{color:var(--cyan);}
.session-bar .career-title{color:var(--white); font-weight:700;}
.session-bar .rank{color:var(--orange); cursor:pointer;}
.session-bar .rank:hover{text-shadow:0 0 8px var(--orange);}
.session-bar .rank-detail{color:var(--text-dim); margin-left:6px; font-size:10px;}
.session-bar a{color:var(--orange); text-decoration:none; margin-left:12px; cursor:pointer;}
.session-bar a:hover{text-shadow:0 0 8px var(--orange);}
.session-bar a.active-view{text-shadow:0 0 8px var(--orange); text-decoration:underline;}
header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.eyebrow{
  font-size:11px; letter-spacing:6px; color:var(--orange);
  text-transform:uppercase; margin-bottom:10px;
}
h1{
  margin:0; font-size:clamp(24px,6vw,42px); letter-spacing:8px;
  text-transform:uppercase; font-weight:800;
  font-family:'Arial Narrow', 'Segoe UI', sans-serif;
  color:var(--white);
  text-shadow:0 0 6px var(--cyan), 0 0 22px rgba(0,246,255,0.55), 0 0 46px rgba(0,246,255,0.25);
}
.subhead{
  margin-top:10px; font-size:12px; letter-spacing:3px; color:var(--text-dim);
  text-transform:uppercase;
}

/* PROGRESS TRAIL */
.trail{
  display:flex; gap:6px; max-width:640px; margin:22px auto 0; padding:0 16px;
}
.trail-seg{
  flex:1; height:6px; background:rgba(0,246,255,0.08);
  border:1px solid var(--cyan-dim);
  position:relative; transition:all .3s ease;
}
.trail-seg.done{
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan), 0 0 22px rgba(0,246,255,.6);
  border-color:var(--cyan);
}

/* PHASE TABS — top-level curriculum nav, always shows all 7 phases */
.phase-tabs{
  display:flex; flex-wrap:wrap; gap:8px; max-width:1180px; margin:20px auto 0;
  padding:0 16px;
}
.phase-tab{
  background:var(--panel); color:var(--text-dim);
  border:1px solid var(--cyan-dim); padding:9px 14px;
  font-family:inherit; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; transition:all .15s ease; white-space:nowrap;
}
.phase-tab .num{color:var(--orange); font-weight:700; margin-right:6px;}
.phase-tab:hover{border-color:var(--cyan); color:var(--text); box-shadow:0 0 12px rgba(0,246,255,.2);}
.phase-tab{position:relative;}
.phase-tab.active{
  border-color:var(--orange); color:var(--white);
  box-shadow:0 0 14px rgba(255,149,0,.3);
}
/* Underline accent on the active tab — the same "this one's selected"
   signal a real tab bar uses, on top of the existing border/glow. */
.phase-tab.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--orange); box-shadow:0 0 8px var(--orange);
}
.phase-tab .soon{color:var(--text-dim); font-size:9px; letter-spacing:1px; margin-left:6px;}

/* PHASE SCORE LINE (under the trail) */
.trail-score{
  max-width:640px; margin:8px auto 0; padding:0 16px; text-align:center;
  font-size:11px; letter-spacing:2px; color:var(--text-dim); text-transform:uppercase;
  min-height:14px;
}
.trail-score .val{color:var(--orange);}

/* POINTS BADGES */
.points-badge{
  display:inline-block; font-size:10px; letter-spacing:1px; color:var(--void);
  background:var(--cyan); padding:2px 6px; margin-left:6px; font-weight:700;
  vertical-align:middle;
}
.points-badge.first-try{background:var(--orange);}
.stage-score{
  display:inline-block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--cyan); border:1px solid var(--cyan-dim); padding:4px 10px; margin-left:10px;
}
.stage-score.first-try{color:var(--orange); border-color:var(--orange);}

/* LEADERBOARD */
.leaderboard-table{width:100%; border-collapse:collapse; margin-top:6px;}
.leaderboard-table th{
  text-align:left; font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--text-dim); padding:8px 12px; border-bottom:1px solid var(--cyan-dim);
}
.leaderboard-table td{
  padding:12px; border-bottom:1px solid rgba(10,95,107,.35); font-size:14px; color:var(--text);
}
.leaderboard-table tr.you{background:rgba(255,149,0,.06);}
.leaderboard-table tr.you td:first-child{color:var(--orange);}
.leaderboard-table .rank-num{color:var(--text-dim); width:36px;}
.leaderboard-table .lb-points{color:var(--cyan); font-weight:700;}
.leaderboard-table .lb-title{color:var(--text-dim); font-size:11px; letter-spacing:1px; text-transform:uppercase;}
.leaderboard-table .lb-mood{font-size:56px; text-align:center; line-height:1;}
.leaderboard-table .lb-actions{white-space:nowrap;}
.table-scroll{overflow-x:auto;}

.lb-mini{
  background:transparent; border:1px solid var(--cyan-dim); color:var(--cyan);
  font-family:inherit; font-size:10px; letter-spacing:1px; text-transform:uppercase;
  padding:5px 8px; margin:2px; cursor:pointer; transition:all .15s ease;
}
.lb-mini:hover{border-color:var(--cyan); background:rgba(0,246,255,.1);}
.lb-mini.danger{border-color:var(--orange); color:var(--orange);}
.lb-mini.danger:hover{background:rgba(255,149,0,.1);}

.mini-input{
  width:100%; background:#020508; border:1px solid var(--cyan-dim); color:var(--white);
  font-family:inherit; font-size:16px; letter-spacing:normal; padding:12px 14px;
  /* 16px avoids iOS Safari's auto-zoom-on-focus (anything smaller triggers it) */
}
.mini-input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 10px rgba(0,246,255,.25);}

/* NEXT-SECTOR CONTROL */
#nextControl:empty{margin:0;}

/* SUBMIT MEME FLASH — happy/unhappy emoji burst on every Challenge
   submit, separate from the leaderboard's rank-mood emoji. */
.submit-meme{
  text-align:center; min-height:0; margin-top:4px;
}
.submit-meme .burst{
  display:inline-block; font-size:52px; animation:memePop .9s ease;
}
.submit-meme .burst.sad{
  animation:memeSad .9s ease;
}
@keyframes memePop{
  0%{transform:scale(.2) rotate(-8deg); opacity:0;}
  30%{transform:scale(1.3) rotate(4deg); opacity:1;}
  55%{transform:scale(.95) rotate(-2deg); opacity:1;}
  100%{transform:scale(1) rotate(0); opacity:0;}
}
@keyframes memeSad{
  0%{transform:translateY(-6px) scale(.4); opacity:0;}
  30%{transform:translateY(0) scale(1.15); opacity:1;}
  45%{transform:translateX(-6px);}
  55%{transform:translateX(6px);}
  65%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
  100%{transform:translateY(4px) scale(1); opacity:0;}
}

/* BONUS: LIFTOFF REVEAL — the Launch Sequence module's console reveals
   the student's own print() output one line at a time instead of all at
   once, so their countdown/ascii art visually plays out like an ascending
   sequence. Driven by their actual code, not a canned animation — see
   revealLiftoff() in app.js. */
.liftoff-line{
  animation:liftoffLineIn .3s ease-out;
  white-space:pre-wrap;
}
@keyframes liftoffLineIn{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}

/* PHASE 0: WELCOME / ORIENTATION */
.fun-heading{
  font-size:16px; font-weight:700; letter-spacing:.5px; color:var(--white);
  margin:24px 0 6px; text-shadow:0 0 6px rgba(0,246,255,.35);
}
.fact-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:10px; margin-top:6px;
}
.fact-tile{
  background:var(--panel); border:1px solid var(--cyan-dim); color:var(--text);
  font-family:inherit; text-align:center; padding:16px 10px; cursor:pointer;
  transition:all .15s ease;
}
.fact-tile:hover{border-color:var(--cyan); box-shadow:0 0 12px rgba(0,246,255,.25);}
.fact-tile.open{border-color:var(--orange); box-shadow:0 0 14px rgba(255,149,0,.3);}
.fact-tile .emoji{display:block; font-size:34px; margin-bottom:6px;}
.fact-tile .label{display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim);}
.fact-tile .fact{
  display:none; font-size:11.5px; line-height:1.5; color:var(--text); margin-top:8px;
}
.fact-tile.open .fact{display:block;}
.lang-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.lang-badge{
  border:1px solid var(--cyan-dim); background:var(--panel); color:var(--text-dim);
  font-size:12px; padding:7px 12px;
}
.lang-badge strong{color:var(--white);}

/* STUB / COMING-SOON PANEL */
.stub-badge{
  display:inline-block; border:1px solid var(--cyan-dim); color:var(--text-dim);
  font-size:11px; letter-spacing:2px; text-transform:uppercase; padding:5px 12px;
  margin-bottom:20px;
}
.concept-list, .project-list{
  list-style:none; margin:0 0 20px; padding:0;
}
.concept-list li, .project-list li{
  font-size:14px; line-height:1.7; padding-left:18px; position:relative; color:var(--text);
}
.concept-list li::before{
  content:"›"; position:absolute; left:0; color:var(--cyan);
}
.project-list li::before{
  content:"▸"; position:absolute; left:0; color:var(--orange);
}
.stub-note{
  margin-top:24px; padding:14px 16px; border:1px solid var(--orange);
  background:rgba(255,149,0,.04); font-size:13px; line-height:1.6; color:var(--text);
}

/* LAYOUT */
.app{
  display:flex; max-width:1180px; margin:0 auto; padding:22px 16px 60px; gap:20px;
  align-items:flex-start;
}
nav{
  flex:0 0 250px;
  position:sticky; top:16px;
}
/* "Current sector" summary bar — hidden on desktop (the full list is
   always visible there), the primary sector-nav UI on mobile. See
   renderNav() in app.js. */
.nav-summary{display:none;}
.nav-list{display:flex; flex-direction:column; gap:10px;}
.nav-btn{
  text-align:left; background:var(--panel); color:var(--text);
  border:1px solid var(--cyan-dim); padding:14px 14px;
  font-family:inherit; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; position:relative; transition:all .15s ease;
}
.nav-btn .num{color:var(--orange); font-weight:700; margin-right:8px;}
.nav-btn .check{float:right; color:var(--cyan); opacity:0; font-size:24px; line-height:0.7; text-shadow:0 0 8px var(--cyan);}
.nav-btn.complete .check{opacity:1;}
.nav-btn:hover{border-color:var(--cyan); box-shadow:0 0 12px rgba(0,246,255,.25);}
.nav-btn.active{
  border-color:var(--orange); border-left-width:4px;
  box-shadow:0 0 14px rgba(255,149,0,.3);
  color:var(--white);
}

.app.no-nav nav{display:none;}

main{flex:1; min-width:0;}
.stage{
  background:var(--panel); border:1px solid var(--cyan-dim);
  padding:26px; position:relative; overflow:hidden;
}
.scan{
  position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow:0 0 12px var(--cyan);
  animation:sweep .9s ease-out;
  pointer-events:none;
}
@keyframes sweep{
  from{transform:translateY(0); opacity:1;}
  to{transform:translateY(480px); opacity:0;}
}
/* PAGE/SECTOR TRANSITION — plays every time the stage's content is
   swapped (module, phase, or leaderboard change). See setStageHTML() in
   app.js, which removes+re-adds this class to force the animation to
   replay on every call, not just the first. */
.stage.stage-anim{
  animation:stageMaterialize .38s ease-out;
}
@keyframes stageMaterialize{
  0%{opacity:0; transform:translateY(10px) scale(.99); filter:brightness(1.8);}
  55%{opacity:1; filter:brightness(1.15);}
  100%{opacity:1; transform:translateY(0) scale(1); filter:brightness(1);}
}
.stage h2{
  margin:0 0 4px; font-size:22px; letter-spacing:3px; text-transform:uppercase;
  color:var(--white); text-shadow:0 0 8px rgba(0,246,255,.5);
}
.stage .tag{font-size:11px; color:var(--orange); letter-spacing:2px; text-transform:uppercase; margin-bottom:18px;}
.briefing{font-size:14.5px; line-height:1.7; color:var(--text); margin-bottom:20px;}
.briefing code{color:var(--cyan); background:rgba(0,246,255,.08); padding:1px 5px;}

.block-label{
  font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim);
  margin:24px 0 8px; display:flex; justify-content:space-between; align-items:center;
}
.code-block{
  background:#020508; border:1px solid var(--cyan-dim); padding:14px 16px;
  font-size:13.5px; line-height:1.6; color:var(--cyan); white-space:pre-wrap;
  overflow-x:auto;
}
textarea.editor{
  width:100%; background:#020508; border:1px solid var(--cyan-dim); color:var(--white);
  font-family:inherit; font-size:13.5px; line-height:1.6; padding:14px 16px;
  resize:vertical; min-height:110px;
}
textarea.editor:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 10px rgba(0,246,255,.25);}

.btn-row{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;}
button.action{
  background:transparent; border:1px solid var(--cyan); color:var(--cyan);
  font-family:inherit; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  padding:10px 20px; cursor:pointer; transition:all .15s ease;
}
button.action:hover{background:var(--cyan); color:#000; box-shadow:0 0 16px rgba(0,246,255,.5);}
button.action.orange{border-color:var(--orange); color:var(--orange);}
button.action.orange:hover{background:var(--orange); color:#000; box-shadow:0 0 16px rgba(255,149,0,.5);}
button.action:disabled{opacity:.4; cursor:not-allowed;}
button.action:disabled:hover{background:transparent; color:var(--cyan); box-shadow:none;}

.console{
  background:#000; border:1px solid var(--cyan-dim); border-top:none;
  padding:12px 16px; font-size:13px; min-height:28px; color:var(--white);
  white-space:pre-wrap;
}
.console .err{color:var(--orange);}
.console .empty{color:var(--text-dim);}

.challenge{
  margin-top:30px; padding:18px; border:1px solid var(--orange);
  background:rgba(255,149,0,.04);
}
.challenge .block-label{color:var(--orange);}
.feedback{margin-top:10px; font-size:13px; letter-spacing:1px; padding:10px 14px; display:none;}
.feedback.pass{
  display:block; border:1px solid var(--cyan); color:var(--white);
  text-shadow:0 0 8px var(--cyan); background:rgba(0,246,255,.06);
  animation:flash .4s ease;
}
.feedback.fail{
  display:block; border:1px solid var(--orange); color:var(--orange);
  background:rgba(255,149,0,.06);
}
@keyframes flash{ 0%{background:rgba(0,246,255,.4);} 100%{background:rgba(0,246,255,.06);} }

footer{
  text-align:center; padding:20px; font-size:11px; color:var(--text-dim);
  letter-spacing:2px; text-transform:uppercase; border-top:1px solid var(--cyan-dim);
}

@media (max-width:820px){
  .app{flex-direction:column;}
  nav{width:100%; position:static;}

  /* Collapsed (default): just the summary bar. Tap it to expand into the
     full list below — closes again once a sector's picked. Replaces what
     used to be a horizontal-scrolling row of buttons here, which gave no
     hint there was more to scroll to and made for cramped touch targets. */
  .nav-summary{
    display:flex; align-items:center; gap:10px;
    background:var(--panel); border:1px solid var(--cyan-dim);
    padding:14px 16px; cursor:pointer; user-select:none;
  }
  .nav-summary-label{
    flex:1; min-width:0; font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .nav-summary-label .num{color:var(--orange); font-weight:700; margin-right:8px;}
  .nav-summary-chevron{
    color:var(--text-dim); font-size:11px; transition:transform .2s ease; flex:0 0 auto;
  }
  nav.nav-expanded .nav-summary-chevron{transform:rotate(180deg);}
  .nav-arrow{
    background:transparent; border:1px solid var(--cyan-dim); color:var(--cyan);
    font-family:inherit; font-size:13px; padding:10px 14px; cursor:pointer;
    flex:0 0 auto; min-width:44px; min-height:44px; /* real touch target */
  }
  .nav-arrow:hover:not(:disabled){border-color:var(--cyan); box-shadow:0 0 10px rgba(0,246,255,.25);}
  .nav-arrow:disabled{opacity:.3; cursor:not-allowed;}

  .nav-list{
    display:none; flex-direction:column; gap:8px;
    margin-top:8px; padding:10px; background:var(--panel);
    border:1px solid var(--cyan-dim); border-top:2px solid var(--orange);
    max-height:60vh; overflow-y:auto;
  }
  nav.nav-expanded .nav-list{display:flex;}
  .nav-list .nav-btn{min-height:44px; padding:12px 14px;}

  /* Phase tabs: a single scrollable strip instead of wrapping into 3-4
     rows of buttons — wrapping ate a lot of vertical space and read as
     clutter on a phone. The fade at each edge is the visual cue that
     there's more to scroll to (a plain cut-off edge doesn't read as
     "scrollable" the way a fade does). */
  .phase-tabs{
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-bottom:2px;
    mask-image:linear-gradient(90deg, transparent, black 16px, black calc(100% - 16px), transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, black 16px, black calc(100% - 16px), transparent);
  }
  .phase-tab{
    scroll-snap-align:start; flex:0 0 auto;
    display:flex; align-items:center; min-height:44px;
  }

  /* The session bar's content (name/score/rank/2 links) is too long to
     float top-right without colliding with the centered title on a
     phone-width screen — drop it into the normal flow instead. */
  .session-bar{
    position:static; display:block; max-width:100%; margin-bottom:14px;
    text-align:center; white-space:normal;
  }

  .stage{padding:18px;}
  .stage h2{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:18px;}
  #stageScoreBadge:empty{display:none;}

  .leaderboard-table .lb-mood{font-size:36px;}
  .leaderboard-table th, .leaderboard-table td{padding:8px 6px; font-size:12.5px;}

  /* Real touch targets throughout — Run/Submit/Continue Lesson etc. are
     the core interactions here, and the default padding leaves them a
     bit short of the ~44px guideline on a phone. */
  button.action{min-height:44px; padding:12px 20px;}
  .lb-mini{min-height:38px; padding:8px 12px; font-size:11px;}
  .profile-btn{min-height:44px;}
}

@media (max-width:480px){
  h1{letter-spacing:5px;}
  .eyebrow{letter-spacing:4px;}
  .phase-tab{padding:8px 10px; font-size:10px;}
  button.action{padding:9px 14px; font-size:11px;}
}

/* LOGIN SCREEN (new — not in prototype, follows the same system) */
.login-wrap{
  max-width:420px; margin:60px auto; padding:0 16px;
}
.login-panel{
  background:var(--panel); border:1px solid var(--cyan-dim); padding:30px;
  position:relative; overflow:hidden;
}
.profile-list{display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}
.profile-btn{
  text-align:left; background:transparent; color:var(--text);
  border:1px solid var(--cyan-dim); padding:14px 16px;
  font-family:inherit; font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; transition:all .15s ease;
}
.profile-btn:hover, .profile-btn.selected{
  border-color:var(--cyan); box-shadow:0 0 12px rgba(0,246,255,.25); color:var(--white);
}
.profile-btn.selected{border-color:var(--orange); box-shadow:0 0 12px rgba(255,149,0,.3);}
input.passcode{
  width:100%; background:#020508; border:1px solid var(--cyan-dim); color:var(--white);
  font-family:inherit; font-size:16px; letter-spacing:4px; padding:14px 16px;
  margin-bottom:14px;
}
input.passcode:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 10px rgba(0,246,255,.25);}
.login-error{
  color:var(--orange); font-size:12px; letter-spacing:1px; margin-top:10px; min-height:16px;
}