/* TEL SafeFlight System — supervised learning flow and classroom tools. */

.sf-system {
  --sf-accent: #cbbcff;
  --sf-blue: #9fc4ff;
  --sf-success: #83f7ad;
  --sf-warning: #ffd36a;
  --sf-danger: #ff9393;
}

.sf-intro-note {
  margin-top: 24px;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #c8c8d2;
  background: rgba(203,188,255,.055);
  border: 1px solid rgba(203,188,255,.16);
  border-radius: 15px;
  font-size: .78rem;
}

.sf-intro-note strong { color: white; }
.sf-intro-note > span { color: var(--sf-warning); }

.sf-pathway {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sf-path-card {
  min-height: 245px;
  padding: 25px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 0;
  border-radius: 21px;
}

.sf-path-card > span {
  display: inline-flex;
  margin-bottom: 34px;
  color: var(--sf-blue);
  font: 600 .66rem/1 var(--font-display);
  letter-spacing: .12em;
}

.sf-path-card h3 { margin-bottom: 10px; font-size: 1.3rem; }
.sf-path-card p { margin-bottom: 0; font-size: .8rem; }

.sf-app-shell {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(203,188,255,.2);
  border-radius: 32px;
  background:
    radial-gradient(circle at 96% 0, rgba(159,196,255,.1), transparent 31%),
    linear-gradient(145deg, rgba(17,16,25,.93), rgba(6,6,10,.93));
  box-shadow: 0 36px 110px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.05);
}

.sf-app-topbar {
  min-height: 76px;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(4,4,7,.48);
}

.sf-app-brand { display: flex; align-items: center; gap: 12px; }
.sf-app-brand > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #08080d;
  background: linear-gradient(135deg, var(--sf-accent), var(--sf-blue));
  border-radius: 11px;
  font: 700 .73rem/1 var(--font-display);
  font-style: normal;
}
.sf-app-brand strong { display: block; font: 600 .82rem/1.2 var(--font-display); letter-spacing: .05em; }
.sf-app-brand small { display: block; margin-top: 3px; color: var(--muted-2); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }

.sf-mode-pill {
  padding: 8px 11px;
  color: var(--sf-warning);
  border: 1px solid rgba(255,211,106,.23);
  border-radius: 999px;
  background: rgba(255,211,106,.04);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sf-progress-wrap { padding: 22px 24px 0; }
.sf-progress-meta { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 9px; color: var(--muted); font-size: .67rem; }
.sf-progress-track { height: 5px; overflow: hidden; background: rgba(255,255,255,.08); border-radius: 99px; }
.sf-progress-track > i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--sf-accent), var(--sf-blue)); border-radius: inherit; transition: width .35s var(--ease); }

.sf-step-nav {
  padding: 20px 24px 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.sf-step-chip {
  min-width: 0;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-2);
  background: rgba(255,255,255,.018);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: .67rem;
}

.sf-step-chip > i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-style: normal;
  font-size: .57rem;
}
.sf-step-chip.active { color: white; border-color: rgba(203,188,255,.35); background: rgba(203,188,255,.08); }
.sf-step-chip.complete { color: var(--sf-success); border-color: rgba(131,247,173,.23); }

.sf-stage { padding: clamp(30px, 4.5vw, 54px); scroll-margin-top: 118px; border-bottom: 1px solid var(--line); }
.sf-stage:last-child { border-bottom: 0; }
.sf-stage[hidden] { display: none; }
.sf-stage-heading { margin-bottom: 34px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 30px; }
.sf-stage-heading > div { max-width: 720px; }
.sf-stage-heading h3 { margin-bottom: 10px; font-size: clamp(1.8rem, 3vw, 3rem); }
.sf-stage-heading p { margin: 0; }
.sf-stage-number { color: var(--sf-blue); font: 600 .68rem/1 var(--font-display); letter-spacing: .14em; white-space: nowrap; }

.sf-access-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 15px; }
.sf-access-card, .sf-qr-card, .sf-weather-card, .sf-check-card, .sf-quiz-box, .sf-code-card, .sf-mission-card, .sf-certificate-card, .sf-calculator, .sf-teacher-card {
  padding: clamp(22px, 3.5vw, 36px);
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 22px;
}

.sf-access-card,
.sf-qr-card,
.sf-weather-card,
.sf-check-card,
.sf-quiz-box,
.sf-calculator,
.sf-teacher-card {
  min-width: 0;
}

.sf-access-card { display: grid; align-content: center; }

.sf-field { display: grid; gap: 8px; }
.sf-field label { color: #d6d6de; font-size: .7rem; }
.sf-input-row { display: flex; gap: 10px; }
.sf-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  color: white;
  background: #08080d;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  outline: none;
}
.sf-field input:focus { border-color: var(--sf-blue); box-shadow: 0 0 0 3px rgba(159,196,255,.09); }
.sf-help { margin: 12px 0 0; color: var(--muted-2); font-size: .68rem; }
.sf-form-status { min-height: 22px; margin: 12px 0 0; color: var(--sf-warning); font-size: .73rem; }
.sf-form-status.success { color: var(--sf-success); }

.sf-qr-card { display: grid; grid-template-columns: 108px 1fr; gap: 22px; align-items: center; }
.sf-qr-art {
  width: 108px;
  aspect-ratio: 1;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  background: white;
  border-radius: 14px;
}
.sf-qr-art i { background: #09090d; border-radius: 1px; }
.sf-qr-art i:nth-child(3n) { opacity: .15; }
.sf-qr-card h4 { margin: 0 0 7px; font-family: var(--font-display); font-size: 1rem; }
.sf-qr-card p { margin: 0; font-size: .75rem; }

.sf-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; align-items: stretch; }
.sf-module {
  min-width: 0;
  min-height: 330px;
  height: 100%;
  padding: 25px;
  display: grid;
  grid-template-rows: auto auto auto minmax(54px, 1fr) auto auto;
  align-items: start;
  background: rgba(255,255,255,.022);
  border: 1px solid var(--line);
  border-radius: 19px;
}
.sf-module.complete { border-color: rgba(131,247,173,.3); background: rgba(131,247,173,.035); }
.sf-module-top { width: 100%; min-height: 18px; display: flex; justify-content: space-between; gap: 15px; color: var(--muted-2); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.sf-module-icon { margin: 28px 0 20px; color: var(--sf-accent); font: 500 2rem/1 var(--font-display); }
.sf-module h4 { margin: 0 0 8px; font: 500 1.15rem/1.2 var(--font-display); }
.sf-module p { margin: 0 0 20px; font-size: .76rem; }
.sf-module > [data-sf-module-open] { width: 100%; min-height: 46px; margin-top: auto; align-self: end; justify-content: center; }

.sf-lesson {
  margin-top: 15px;
  padding: 18px;
  display: none;
  background: rgba(6,6,10,.72);
  border: 1px solid rgba(203,188,255,.16);
  border-radius: 16px;
}
.sf-lesson.open { display: grid; align-content: start; animation: sfFade .25s ease; }
.sf-lesson h4 { margin-bottom: 8px; font: 500 1.05rem/1.2 var(--font-display); }
.sf-lesson p { margin: 0; font-size: .76rem; }
.sf-lesson [data-sf-module-complete] { margin-top: 16px; }

.sf-control-gateway {
  padding: clamp(28px, 5vw, 55px);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 35px;
  background:
    radial-gradient(circle at 88% 12%, rgba(159,196,255,.11), transparent 34%),
    linear-gradient(145deg, rgba(22,20,32,.9), rgba(7,7,11,.94));
  border: 1px solid rgba(203,188,255,.22);
  border-radius: 24px;
}
.sf-control-gateway-brand { grid-column: 1 / -1; padding-bottom: 22px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); }
.sf-control-gateway-brand img { width: 125px; }
.sf-control-gateway-brand span { padding-left: 18px; color: #b9b9c4; border-left: 1px solid var(--line); font: 600 .7rem/1 var(--font-display); letter-spacing: .14em; }
.sf-control-gateway-copy { max-width: 720px; }
.sf-control-gateway-copy h4 { margin: 10px 0 12px; font: 500 clamp(1.8rem, 3.5vw, 3.6rem)/1 var(--font-display); letter-spacing: -.045em; }
.sf-control-gateway-copy .sf-code-display { margin-bottom: 10px; }
.sf-control-gateway > .button { min-height: 52px; align-self: end; justify-content: center; white-space: nowrap; }

.sf-condition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 15px; }
.sf-check-card, .sf-weather-card { height: 100%; display: flex; flex-direction: column; }
.sf-check-list { display: grid; gap: 9px; }
.sf-check-card .sf-check-list { flex: 1; }
.sf-check {
  width: 100%;
  padding: 15px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  background: rgba(255,255,255,.018);
  border: 1px solid var(--line);
  border-radius: 13px;
  cursor: pointer;
}
.sf-check > i { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; color: transparent; border: 1px solid var(--line-bright); border-radius: 7px; font-style: normal; font-size: .7rem; }
.sf-check strong { display: block; font-size: .78rem; }
.sf-check small { display: block; margin-top: 2px; color: var(--muted-2); font-size: .64rem; }
.sf-check.selected { border-color: rgba(131,247,173,.32); background: rgba(131,247,173,.035); }
.sf-check.selected > i { color: #07150c; background: var(--sf-success); border-color: var(--sf-success); }

.sf-weather-card h4, .sf-check-card h4, .sf-quiz-box h4, .sf-code-card h4, .sf-mission-card h4, .sf-certificate-card h4, .sf-calculator h3, .sf-teacher-card h3 { margin: 0 0 9px; font-family: var(--font-display); }
.sf-weather-card > p, .sf-check-card > p { margin-top: 0; font-size: .74rem; }
.sf-weather-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.sf-weather-search { display: flex; gap: 8px; margin-bottom: 14px; }
.sf-weather-search input { min-width: 0; flex: 1; }
.sf-weather-state { min-height: 190px; padding: 17px; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 14px; }
.sf-weather-state.caution { border-color: rgba(255,211,106,.35); background: rgba(255,211,106,.04); }
.sf-weather-state.pause { border-color: rgba(255,147,147,.35); background: rgba(255,147,147,.04); }
.sf-weather-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.sf-weather-head strong { font: 500 1rem/1.2 var(--font-display); }
.sf-weather-head span { color: var(--sf-warning); font-size: .63rem; text-align: right; }
.sf-weather-metrics { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sf-weather-metrics div { padding: 11px; background: rgba(0,0,0,.2); border-radius: 10px; }
.sf-weather-metrics small { display: block; color: var(--muted-2); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.sf-weather-metrics strong { display: block; margin-top: 3px; font-size: .8rem; }
.sf-weather-note { margin: 12px 0 0; color: var(--muted-2); font-size: .62rem; }

.sf-quiz-box { max-width: 920px; min-height: 520px; margin-inline: auto; display: flex; flex-direction: column; }
.sf-quiz-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 20px; }
.sf-quiz-meta h4 { margin-bottom: 8px; }
.sf-quiz-meta span { color: var(--muted); font-size: .68rem; }
.sf-bank-size { display: inline-flex; align-items: center; gap: 5px; color: #d9d9e2 !important; }
.sf-bank-size b { color: var(--sf-accent); font-family: var(--font-display); font-size: .78rem; }
.sf-quiz-stats { display: flex; align-items: center; gap: 8px; }
.sf-quiz-stats span { padding: 8px 10px; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.sf-quiz-track { height: 4px; margin-bottom: 28px; overflow: hidden; background: rgba(255,255,255,.08); border-radius: 9px; }
.sf-quiz-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--sf-accent), var(--sf-blue)); transition: width .25s ease; }
.sf-question { min-height: 2.5em; max-width: 790px; font: 500 clamp(1.25rem, 2.4vw, 2rem)/1.18 var(--font-display); }
.sf-options { display: grid; gap: 9px; margin-top: 24px; }
.sf-option { min-height: 60px; padding: 15px 17px; display: flex; align-items: center; gap: 12px; text-align: left; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 13px; cursor: pointer; }
.sf-option i { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line-bright); border-radius: 50%; font-style: normal; font-size: .62rem; }
.sf-option:hover, .sf-option:focus-visible { border-color: rgba(203,188,255,.45); }
.sf-option.correct { border-color: rgba(131,247,173,.45); background: rgba(131,247,173,.05); }
.sf-option.wrong { border-color: rgba(255,147,147,.45); background: rgba(255,147,147,.05); }
.sf-quiz-feedback { min-height: 56px; margin: 16px 0 0; color: #d3d3dc; font-size: .77rem; }
.sf-quiz-actions { display: flex; justify-content: flex-end; margin-top: 15px; }
[data-sf-quiz-next][hidden], [data-sf-quiz-content][hidden], [data-sf-quiz-result][hidden] { display: none !important; }
.sf-result { padding: 20px 0 5px; text-align: center; }
.sf-result-mark { width: 74px; height: 74px; margin: 0 auto 20px; display: grid; place-items: center; color: var(--sf-success); border: 1px solid currentColor; border-radius: 50%; font: 500 2rem/1 var(--font-display); }
.sf-result h4 { font-size: 1.8rem; }
.sf-result p { max-width: 620px; margin-inline: auto; }

.sf-unlock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sf-code-display { margin: 24px 0 14px; display: flex; gap: 8px; }
.sf-code-display span { width: 58px; height: 72px; display: grid; place-items: center; color: white; background: #07070b; border: 1px solid rgba(203,188,255,.28); border-radius: 13px; font: 600 2rem/1 var(--font-display); }
.sf-demo-label { color: var(--sf-warning); font-size: .64rem; }
.sf-mission-display { min-height: 118px; margin: 22px 0 16px; display: grid; place-items: center; text-align: center; background: radial-gradient(circle, rgba(203,188,255,.13), transparent 65%); border: 1px solid var(--line); border-radius: 17px; }
.sf-mission-display strong { display: block; font: 500 3.2rem/1 var(--font-display); }
.sf-mission-display span { display: block; margin-top: 6px; color: var(--muted-2); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.sf-mission-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-certificate-card .sf-field { margin: 18px 0 15px; }
.sf-certificate-card .button { width: 100%; justify-content: center; }

.sf-secondary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 15px; }
.sf-calculator, .sf-teacher-card { height: 100%; }
.sf-calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 12px; }
.sf-calc-result { margin: 18px 0 0; padding: 20px; background: rgba(203,188,255,.045); border: 1px solid rgba(203,188,255,.16); border-radius: 14px; }
.sf-calc-result strong { display: block; color: white; font: 500 2rem/1.1 var(--font-display); }
.sf-calc-result small { color: var(--muted-2); }
.sf-formula { color: var(--sf-blue); font-family: var(--font-display); }

.sf-teacher-lock { margin: 22px 0 16px; display: flex; gap: 8px; }
.sf-teacher-lock span { flex: 0 0 44px; height: 52px; display: grid; place-items: center; background: #08080d; border: 1px solid var(--line); border-radius: 11px; font: 600 1.2rem/1 var(--font-display); }
.sf-teacher-tips { margin: 18px 0 0; padding-left: 18px; color: var(--muted); font-size: .76rem; }
.sf-teacher-tips li + li { margin-top: 8px; }
.sf-security-note { margin-top: 15px; padding: 13px 14px; color: #cfcfd8; background: rgba(255,211,106,.035); border-left: 2px solid var(--sf-warning); font-size: .68rem; }

.sf-inline-status { margin: 16px 0 0; color: var(--muted); font-size: .73rem; }
.sf-inline-status.success { color: var(--sf-success); }
.sf-inline-status.warning { color: var(--sf-warning); }
.sf-hidden { display: none !important; }

@keyframes sfFade { from { opacity: 0; transform: translateY(5px); } }

@media (max-width: 1000px) {
  .sf-pathway, .sf-unlock-grid { grid-template-columns: 1fr 1fr; }
  .sf-code-card { grid-column: 1 / -1; }
  .sf-step-nav { padding-inline: 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sf-step-chip { padding-inline: 9px; gap: 6px; font-size: .61rem; }
}

@media (max-width: 820px) {
  .sf-access-grid, .sf-condition-grid, .sf-secondary-grid { grid-template-columns: 1fr; }
  .sf-app-topbar, .sf-stage-heading { grid-template-columns: 1fr; align-items: start; }
  .sf-step-nav { grid-template-columns: repeat(5, 124px); overflow-x: auto; scrollbar-width: thin; }
  .sf-input-row { flex-direction: column; }
  .sf-control-gateway { grid-template-columns: 1fr; align-items: start; }
  .sf-control-gateway > .button { justify-content: center; white-space: normal; }
  .sf-quiz-meta { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 600px) {
  .sf-pathway, .sf-module-grid, .sf-unlock-grid, .sf-calc-fields { grid-template-columns: 1fr; }
  .sf-code-card { grid-column: auto; }
  .sf-app-shell { border-radius: 23px; }
  .sf-app-topbar, .sf-progress-wrap, .sf-step-nav { padding-left: 17px; padding-right: 17px; }
  .sf-stage { padding: 27px 18px; }
  .sf-step-nav { grid-template-columns: repeat(5, 116px); }
  .sf-step-chip { min-height: 46px; }
  .sf-qr-card { grid-template-columns: 1fr; }
  .sf-weather-metrics { grid-template-columns: 1fr; }
  .sf-weather-head { flex-direction: column; }
  .sf-weather-head span { text-align: left; }
  .sf-quiz-box { min-height: 0; padding: 22px 18px; }
  .sf-quiz-stats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .sf-quiz-stats span { text-align: center; }
  .sf-question { min-height: 0; font-size: 1.25rem; }
  .sf-option { min-height: 0; }
  .sf-stage { scroll-margin-top: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-lesson.open { animation: none; }
}