/* MyEClass Phase 2 shared product layer.
   Non-versioned classes are used by Teacher, Admin and Student flows. */

.mye-phase2-skip-link {
  position: fixed;
  inset: .75rem auto auto .75rem;
  z-index: 10000;
  padding: .7rem 1rem;
  border-radius: .7rem;
  background: var(--mye-ui-primary, #2c94e8);
  color: #06121f;
  font-weight: 850;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .15s ease;
}
.mye-phase2-skip-link:not(:focus):not(:focus-visible) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}
.mye-phase2-skip-link:focus,
.mye-phase2-skip-link:focus-visible {
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  pointer-events: auto;
  transform: translateY(0);
}
.mye-phase2-live-region { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mye-phase2-surface { width: 100%; min-width: 0; max-width: var(--mye-ui-content-max, 1440px); margin-inline: auto; }
.mye-phase2-page-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin: .25rem 0 1.25rem;
  padding: 1.4rem;
  border: 1px solid var(--mye-ui-border, #294b6c);
  border-radius: var(--mye-ui-radius-lg, 1rem);
  background: linear-gradient(140deg, rgba(16,41,68,.9), rgba(8,25,44,.95));
  box-shadow: var(--mye-ui-shadow-card, 0 18px 50px rgba(0,0,0,.24));
}
.mye-phase2-page-intro-copy { min-width: 0; max-width: 850px; }
.mye-phase2-eyebrow { margin: 0 0 .35rem; color: var(--mye-ui-info, #65baff); font-size: .72rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.mye-phase2-page-intro h1 { margin: 0; color: var(--mye-ui-text, #f4f8ff); font-size: clamp(1.75rem, 3.3vw, 2.55rem); line-height: 1.08; }
.mye-phase2-page-intro-copy > p:not(.mye-phase2-eyebrow) { max-width: 780px; margin: .55rem 0 0; color: var(--mye-ui-text-muted, #9db3ca); line-height: 1.55; }
.mye-phase2-page-actions, .mye-phase2-section-actions, .mye-phase2-state-actions, .mye-phase2-safe-action-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.mye-phase2-page-meta { display: flex; flex-wrap: wrap; gap: .55rem; margin: .85rem 0 0; }
.mye-phase2-page-meta div { display: flex; align-items: center; gap: .35rem; min-height: 30px; padding: .32rem .6rem; border: 1px solid var(--mye-ui-border, #294b6c); border-radius: 999px; background: rgba(6,20,35,.46); }
.mye-phase2-page-meta dt { color: var(--mye-ui-text-subtle, #7895b2); font-size: .7rem; font-weight: 750; }
.mye-phase2-page-meta dd { margin: 0; color: var(--mye-ui-text, #f4f8ff); font-size: .72rem; font-weight: 800; }

.mye-phase2-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 42px;
  padding: .66rem .95rem;
  border: 1px solid var(--mye-ui-border-strong, #38668f);
  border-radius: .72rem;
  background: #0b1f35;
  color: var(--mye-ui-text, #f4f8ff);
  font: inherit;
  font-size: .82rem;
  font-weight: 820;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}
.mye-phase2-button:hover { border-color: #65baff; background: #123454; color: #fff; text-decoration: none; }
.mye-phase2-button:focus-visible { outline: 3px solid rgba(101,186,255,.28); outline-offset: 2px; }
.mye-phase2-button.is-primary { border-color: #44a9f1; background: linear-gradient(180deg, #52b2f4, #2c94e8); color: #05111d; }
.mye-phase2-button.is-quiet { background: transparent; }
.mye-phase2-button.is-danger { border-color: rgba(240,107,120,.65); background: rgba(106,31,45,.3); color: #ffb7bf; }
.mye-phase2-button[disabled], .mye-phase2-button[aria-disabled="true"] { opacity: .5; pointer-events: none; cursor: not-allowed; }

.mye-phase2-flow { margin: 0 0 1.25rem; overflow-x: auto; scrollbar-width: thin; }
.mye-phase2-flow ol { display: grid; grid-template-columns: repeat(var(--mye-phase2-step-count, 4), minmax(145px, 1fr)); gap: .65rem; min-width: max-content; margin: 0; padding: .25rem 0 .5rem; list-style: none; }
.mye-phase2-flow-step { min-width: 150px; }
.mye-phase2-flow-step > a, .mye-phase2-flow-step > span { display: flex; align-items: center; gap: .68rem; height: 100%; min-height: 62px; padding: .68rem .76rem; border: 1px solid var(--mye-ui-border, #294b6c); border-radius: .8rem; background: rgba(10,30,50,.76); color: var(--mye-ui-text-muted, #9db3ca); text-decoration: none; }
.mye-phase2-flow-step b { display: block; color: inherit; font-size: .78rem; line-height: 1.25; }
.mye-phase2-flow-step small { display: block; margin-top: .15rem; color: var(--mye-ui-text-subtle, #7895b2); font-size: .66rem; line-height: 1.25; }
.mye-phase2-flow-index { display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--mye-ui-border-strong, #38668f); border-radius: 999px; background: #071726; color: #b8cde1; font-size: .72rem; font-weight: 900; }
.mye-phase2-flow-step.is-current > a, .mye-phase2-flow-step.is-current > span { border-color: #50acf0; background: linear-gradient(145deg, rgba(25,80,123,.85), rgba(13,49,79,.92)); color: #fff; box-shadow: 0 12px 32px rgba(22,107,169,.2); }
.mye-phase2-flow-step.is-current .mye-phase2-flow-index { border-color: #85d0ff; background: #55b5f4; color: #06131f; }
.mye-phase2-flow-step.is-complete > a, .mye-phase2-flow-step.is-complete > span { border-color: rgba(50,196,141,.5); color: #b8edd9; }
.mye-phase2-flow-step.is-complete .mye-phase2-flow-index { border-color: rgba(50,196,141,.7); background: rgba(22,99,73,.7); color: #a9ecd2; }
.mye-phase2-flow-step.is-upcoming { opacity: .67; }

.mye-phase2-status { display: inline-flex; align-items: center; gap: .38rem; min-height: 27px; padding: .3rem .58rem; border: 1px solid var(--mye-ui-border, #294b6c); border-radius: 999px; background: #0a2138; color: #c7dbed; font-size: .7rem; font-weight: 820; white-space: nowrap; }
.mye-phase2-status > span { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.mye-phase2-status.is-success, .mye-phase2-status.is-ready, .mye-phase2-status.is-published { border-color: rgba(50,196,141,.55); color: #91e5c2; }
.mye-phase2-status.is-warning, .mye-phase2-status.is-pending { border-color: rgba(241,184,75,.58); color: #f6d58b; }
.mye-phase2-status.is-error { border-color: rgba(240,107,120,.62); color: #ffadb6; }
.mye-phase2-status.is-locked { color: #b5c3d0; }

.mye-phase2-section { margin: 1rem 0; border: 1px solid var(--mye-ui-border, #294b6c); border-radius: var(--mye-ui-radius-lg, 1rem); background: linear-gradient(145deg, rgba(14,34,58,.98), rgba(8,25,44,.98)); box-shadow: var(--mye-ui-shadow-card, 0 18px 50px rgba(0,0,0,.24)); overflow: clip; }
.mye-phase2-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--mye-ui-border, #294b6c); background: rgba(13,42,69,.52); }
.mye-phase2-section h2, .mye-phase2-section h3 { margin: 0; color: var(--mye-ui-text, #f4f8ff); }
.mye-phase2-section > header p { margin: .35rem 0 0; color: var(--mye-ui-text-muted, #9db3ca); font-size: .84rem; line-height: 1.45; }
.mye-phase2-section-body { min-width: 0; padding: 1.2rem; }

.mye-phase2-state { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: flex-start; margin: 1rem 0; padding: 1rem; border: 1px solid var(--mye-ui-border, #294b6c); border-radius: .9rem; background: rgba(10,31,52,.82); }
.mye-phase2-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 999px; color: var(--mye-ui-info, #65baff); font-weight: 900; }
.mye-phase2-state h2 { margin: 0; color: var(--mye-ui-text, #f4f8ff); font-size: 1rem; }
.mye-phase2-state-copy > small { display: block; margin-bottom: .25rem; color: var(--mye-ui-text-subtle, #7895b2); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.mye-phase2-state-body { margin-top: .3rem; color: var(--mye-ui-text-muted, #9db3ca); font-size: .84rem; line-height: 1.5; }
.mye-phase2-state-body > :first-child { margin-top: 0; }
.mye-phase2-state-body > :last-child { margin-bottom: 0; }
.mye-phase2-state-actions { margin-top: .75rem; }
.mye-phase2-state.is-success, .mye-phase2-state.is-published { border-color: rgba(50,196,141,.5); }
.mye-phase2-state.is-success .mye-phase2-state-icon, .mye-phase2-state.is-published .mye-phase2-state-icon { color: var(--mye-ui-success, #32c48d); }
.mye-phase2-state.is-warning { border-color: rgba(241,184,75,.52); }
.mye-phase2-state.is-warning .mye-phase2-state-icon { color: var(--mye-ui-warning, #f1b84b); }
.mye-phase2-state.is-error { border-color: rgba(240,107,120,.55); }
.mye-phase2-state.is-error .mye-phase2-state-icon { color: var(--mye-ui-danger, #f06b78); }
.mye-phase2-state.is-loading .mye-phase2-state-icon { animation: mye-phase2-pulse 1.25s ease-in-out infinite; }
@keyframes mye-phase2-pulse { 50% { transform: scale(.86); opacity: .55; } }

.mye-phase2-math-preview { min-width: 0; border: 1px solid var(--mye-ui-border, #294b6c); border-radius: .9rem; background: rgba(6,21,37,.66); overflow: hidden; }
.mye-phase2-math-preview > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--mye-ui-border, #294b6c); }
.mye-phase2-math-preview h3 { margin: 0; font-size: .94rem; }
.mye-phase2-math-statement { padding: 1rem; overflow-x: auto; }
.mye-phase2-math-content { min-width: 0; color: var(--mye-ui-text, #f4f8ff); line-height: 1.72; overflow-wrap: anywhere; }
.mye-phase2-math-content mjx-container { max-width: 100%; overflow-x: auto; overflow-y: hidden; }

.mye-phase2-rationale { margin: 1rem 0; padding: 1rem; border: 1px solid rgba(101,186,255,.45); border-left-width: 4px; border-radius: .8rem; background: rgba(14,53,83,.4); }
.mye-phase2-rationale > div { display: flex; gap: .75rem; align-items: flex-start; }
.mye-phase2-rationale > div > span { color: var(--mye-ui-info, #65baff); font-size: 1.35rem; }
.mye-phase2-rationale h3 { margin: 0; font-size: .92rem; }
.mye-phase2-rationale p { margin: .3rem 0 0; color: var(--mye-ui-text-muted, #9db3ca); line-height: 1.5; }
.mye-phase2-rationale ul, .mye-phase2-guardrails { display: grid; gap: .4rem; margin: .8rem 0 0; padding-left: 1.2rem; color: var(--mye-ui-text-muted, #9db3ca); font-size: .78rem; }
.mye-phase2-rationale.is-warning { border-color: rgba(241,184,75,.6); background: rgba(83,57,14,.28); }

.mye-phase2-safe-action { margin: 1rem 0; padding: 1rem; border: 1px solid rgba(101,186,255,.45); border-radius: .9rem; background: linear-gradient(145deg, rgba(12,43,70,.72), rgba(8,28,48,.82)); }
.mye-phase2-safe-action > header { display: flex; gap: .75rem; align-items: flex-start; }
.mye-phase2-safe-action > header > span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #65baff; border-radius: 999px; color: #83c9fa; }
.mye-phase2-safe-action h3 { margin: 0; font-size: .96rem; }
.mye-phase2-safe-action p { margin: .3rem 0 0; color: var(--mye-ui-text-muted, #9db3ca); font-size: .82rem; line-height: 1.48; }
.mye-phase2-safe-action-controls { margin-top: .9rem; }

.mye-phase2-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.mye-phase2-col-4 { grid-column: span 4; }
.mye-phase2-col-6 { grid-column: span 6; }
.mye-phase2-col-8 { grid-column: span 8; }
.mye-phase2-col-12 { grid-column: 1 / -1; }
.mye-phase2-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mye-phase2-form-grid > .is-wide { grid-column: 1 / -1; }
.mye-phase2-form-grid label { min-width: 0; margin: 0; }
.mye-phase2-form-grid label > span { display: block; margin-bottom: .42rem; font-size: .78rem; font-weight: 820; }
.mye-phase2-form-grid label > small { display: block; margin-top: .35rem; color: var(--mye-ui-text-subtle, #7895b2); font-size: .7rem; font-weight: 600; line-height: 1.4; }

html.mye-phase2-is-submitting .mye-phase2-button[type="submit"] { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .mye-phase2-state.is-loading .mye-phase2-state-icon { animation: none; } * { scroll-behavior: auto !important; } }

@media (max-width: 900px) {
  .mye-phase2-page-intro { flex-direction: column; }
  .mye-phase2-page-actions { width: 100%; }
  .mye-phase2-grid { grid-template-columns: 1fr; }
  .mye-phase2-col-4, .mye-phase2-col-6, .mye-phase2-col-8, .mye-phase2-col-12 { grid-column: 1; }
}
@media (max-width: 620px) {
  .mye-phase2-page-intro, .mye-phase2-section > header, .mye-phase2-section-body { padding: 1rem; }
  .mye-phase2-page-actions, .mye-phase2-page-actions .mye-phase2-button, .mye-phase2-section-actions, .mye-phase2-section-actions .mye-phase2-button { width: 100%; }
  .mye-phase2-form-grid { grid-template-columns: 1fr; }
  .mye-phase2-form-grid > .is-wide { grid-column: 1; }
  .mye-phase2-state { grid-template-columns: 1fr; }
  .mye-phase2-flow-step { min-width: 136px; }
  .mye-phase2-flow-step > a, .mye-phase2-flow-step > span { min-height: 58px; padding: .6rem; }
}