/* Student pages are intentionally phone-only. Keep every formal and demo view
   inside one predictable mobile canvas, even when it is opened on a desktop. */
:root {
  --student-phone-width: 480px;
  --student-phone-gutter: 12px;
}

.student-savings-body {
  min-width: 0;
  overflow-x: hidden;
}

.student-savings-body * {
  min-width: 0;
  box-sizing: border-box;
}

.student-savings-body .student-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  width: min(100%, var(--student-phone-width));
  min-height: 58px;
  height: auto;
  margin: 0 auto;
  padding: 8px var(--student-phone-gutter);
  gap: 8px;
}

.student-savings-body .student-brand {
  flex: 0 1 auto;
  gap: 7px;
  font-size: 14px;
  white-space: nowrap;
}

.student-savings-body .student-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.student-savings-body .student-nav-actions {
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 6px;
}

.student-simple-ui .student-message-link {
  position: relative;
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: visible;
  border: 1px solid #08765b;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #20bd8d, #087157);
  box-shadow: 0 8px 18px rgba(8, 113, 87, .22);
  text-decoration: none;
}

.student-simple-ui .student-message-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
}

.student-simple-ui .student-message-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.student-simple-ui .student-message-link b {
  z-index: 2;
  top: -7px;
  right: -7px;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border: 2px solid #f2f8f5;
  border-radius: 999px;
  color: #fff;
  background: #d94738;
  font-size: 13px;
  line-height: 20px;
}

.student-savings-body .student-language-control {
  flex: 0 0 auto;
}

.student-savings-body .student-language-control .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.student-savings-body .student-language-control select {
  width: 92px;
  max-width: 92px;
  min-height: 38px;
  padding: 7px 25px 7px 10px;
  border-color: rgba(20, 103, 82, .18);
  color: #0a6f56;
  background-color: #edf9f4;
  font-size: 12px;
  font-weight: 850;
}

.student-savings-body .network-chip {
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-savings-body .student-savings-main,
.student-savings-body.student-onboarding .student-savings-main {
  display: block;
  width: 100%;
  max-width: var(--student-phone-width);
  min-height: 0;
  margin: 0 auto;
  padding: 12px var(--student-phone-gutter)
    max(132px, calc(122px + env(safe-area-inset-bottom)));
}

.student-savings-body.student-onboarding .student-hero {
  display: none;
}

.student-savings-body .student-hero,
.student-savings-body .student-hero-grid,
.student-savings-body .student-metrics,
.student-savings-body .student-grid,
.student-savings-body .student-dashboard-grid,
.student-savings-body .student-two-column,
.student-savings-body .growth-center-grid,
.student-savings-body .education-quiz,
.student-savings-body .term-product-grid,
.student-savings-body .term-portfolio-grid,
.student-savings-body .term-goal-form,
.student-savings-body .challenge-grid,
.student-savings-body .student-profit-hero,
.student-savings-body .student-profit-grid,
.student-savings-body .student-referral-hero,
.student-savings-body .student-referral-share-card,
.student-savings-body .investment-product-grid,
.student-savings-body .investment-portfolio-grid {
  grid-template-columns: minmax(0, 1fr);
}

.student-savings-body .student-card,
.student-savings-body .student-panel,
.student-savings-body .onboarding-card,
.student-savings-body .growth-center-card,
.student-savings-body .term-learning-card,
.student-savings-body .term-ladder-section,
.student-savings-body .student-profit-card,
.student-savings-body .student-referral-card {
  width: 100%;
  padding: 16px;
  border-radius: 20px;
}

.student-savings-body .onboarding-card {
  min-height: calc(100dvh - 94px);
}

.student-savings-body .student-section-head,
.student-savings-body .student-panel-head,
.student-savings-body .growth-center-head,
.student-savings-body .term-learning-head,
.student-savings-body .term-ladder-head {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}

.student-savings-body .student-section-head .actions,
.student-savings-body .student-panel-head .actions,
.student-savings-body .growth-center-tools,
.student-savings-body .term-ladder-head .actions {
  width: 100%;
  align-items: stretch;
  flex-direction: column;
}

.student-savings-body .student-section-head .btn,
.student-savings-body .student-panel-head .btn,
.student-savings-body .growth-center-tools .btn,
.student-savings-body .term-ladder-head .btn {
  width: 100%;
}

.student-savings-body h1 {
  font-size: clamp(25px, 8vw, 34px);
  line-height: 1.16;
}

.student-savings-body h2 {
  font-size: 21px;
  line-height: 1.28;
}

.student-savings-body h3 {
  font-size: 16px;
  line-height: 1.45;
}

.student-savings-body p,
.student-savings-body li,
.student-savings-body label,
.student-savings-body small {
  overflow-wrap: anywhere;
}

.student-savings-body small,
.student-savings-body .muted,
.student-savings-body .student-hint {
  font-size: 12px;
  line-height: 1.55;
}

.student-savings-body input:not([type='radio']):not([type='checkbox']),
.student-savings-body select,
.student-savings-body textarea,
.student-savings-body button,
.student-savings-body .btn {
  max-width: 100%;
  min-height: 46px;
  font-size: 15px;
}

/* Native choice controls must never inherit the global full-width input rule. */
.student-savings-body input[type='radio'],
.student-savings-body input[type='checkbox'] {
  flex: 0 0 22px;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px;
  min-height: 22px !important;
  margin: 0;
  padding: 0;
  accent-color: #149b75;
}

.student-savings-body .education-question {
  width: 100%;
  padding: 15px;
  border-radius: 18px;
}

.student-savings-body .education-question header {
  align-items: flex-start;
  gap: 9px;
}

.student-savings-body .education-question h3 {
  flex: 1 1 auto;
  font-size: 16px;
  line-height: 1.55;
}

.student-savings-body .education-question header span {
  flex: 0 0 auto;
  padding: 5px 9px;
  font-size: 12px;
}

.student-savings-body .education-answers {
  gap: 9px;
  margin-top: 14px;
}

.student-savings-body .education-answer {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  font-size: 14px;
  line-height: 1.55;
}

.student-savings-body .education-answer input {
  margin-top: 1px;
}

.student-savings-body .education-answer > span {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.student-savings-body .term-ladder-section {
  margin: 0 0 18px;
  padding: 14px;
}

.student-savings-body .term-ladder-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  font-size: 23px;
}

.student-savings-body .term-ladder-form {
  padding: 12px;
  border-radius: 17px;
}

.student-savings-body .term-ladder-inputs {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.student-savings-body .term-ladder-product {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border-radius: 16px;
}

.student-savings-body .term-ladder-product > input[type='checkbox'] {
  grid-column: 1;
  grid-row: 1;
  margin-top: 1px;
}

.student-savings-body .term-ladder-product > div:first-of-type {
  grid-column: 2;
  grid-row: 1;
}

.student-savings-body .term-ladder-product strong {
  font-size: 15px;
  line-height: 1.45;
}

.student-savings-body .term-ladder-product span {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
}

.student-savings-body .term-ladder-product > .field,
.student-savings-body .term-ladder-product > input[type='number'],
.student-savings-body .term-ladder-preview {
  grid-column: 1 / -1;
  width: 100%;
}

.student-savings-body .term-ladder-product > input[type='number'] {
  margin-top: 2px;
}

.student-savings-body .term-ladder-preview {
  padding: 11px 12px;
  font-size: 13px;
  text-align: left;
}

.student-savings-body .term-ladder-summary,
.student-savings-body .term-confirm-summary,
.student-savings-body .achievement-grid,
.student-savings-body .student-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-savings-body .term-ladder-legs,
.student-savings-body .term-calendar-list,
.student-savings-body .term-goal-form,
.student-savings-body .term-portfolio-item {
  grid-template-columns: minmax(0, 1fr);
}

.student-savings-body .term-ladder-plan header,
.student-savings-body .term-product-foot,
.student-savings-body .term-row-actions,
.student-savings-body .student-activity-item,
.student-savings-body .student-message-item {
  align-items: stretch;
  flex-direction: column;
}

.student-savings-body .term-product-foot .btn,
.student-savings-body .term-row-actions .btn,
.student-savings-body .term-renew-select,
.student-savings-body .term-renew-select select,
.student-savings-body .term-portfolio-item > .btn {
  width: 100%;
}

.student-savings-body .student-subnav {
  display: flex;
  width: calc(100% + 8px);
  margin-right: -8px;
  padding: 2px 8px 7px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  flex-wrap: nowrap;
}

.student-savings-body .student-subnav::-webkit-scrollbar {
  display: none;
}

.student-savings-body .student-subnav a,
.student-savings-body .student-subnav button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 13px;
  font-size: 13px;
  white-space: nowrap;
}

.student-savings-body .student-table-wrap {
  width: calc(100% + 4px);
  margin-right: -4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.student-savings-body .student-profit-hero,
.student-savings-body .student-referral-hero,
.student-savings-body .student-referral-share-card {
  gap: 12px;
}

.student-savings-body .student-profit-amount,
.student-savings-body .student-referral-code {
  font-size: clamp(28px, 9vw, 40px);
  overflow-wrap: anywhere;
}

.student-savings-body .student-bottom-nav {
  left: 50%;
  right: auto;
  bottom: max(6px, env(safe-area-inset-bottom));
  width: min(calc(100vw - 12px), calc(var(--student-phone-width) - 12px));
  max-width: none;
  transform: translateX(-50%);
  padding: 6px;
  gap: 2px;
  border-radius: 22px;
}

.student-savings-body .student-bottom-nav a {
  min-height: 56px;
  padding: 6px 2px;
}

.student-savings-body .student-bottom-nav a span {
  font-size: 18px;
  line-height: 1;
}

.student-savings-body .student-bottom-nav a b {
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.student-savings-body .student-modal,
.student-savings-body .student-dialog,
.student-savings-body .modal-card {
  width: min(calc(100vw - 24px), 440px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

@media (max-width: 360px) {
  :root {
    --student-phone-gutter: 10px;
  }

  .student-savings-body .student-brand span:last-child,
  .student-savings-body .network-chip {
    display: none;
  }

  .student-savings-body .term-ladder-summary,
  .student-savings-body .term-confirm-summary,
  .student-savings-body .achievement-grid,
  .student-savings-body .student-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-savings-body .student-card,
  .student-savings-body .student-panel,
  .student-savings-body .onboarding-card,
  .student-savings-body .growth-center-card,
  .student-savings-body .term-learning-card,
  .student-savings-body .term-ladder-section {
    padding: 13px;
  }

  .student-savings-body .student-bottom-nav a b {
    font-size: 11px;
  }
}

@media (max-width: 420px) {
  .student-savings-body .student-brand {
    flex: 0 0 34px;
  }

  .student-savings-body .student-brand span:last-child {
    display: none;
  }

  .student-savings-body .network-chip {
    max-width: 96px;
  }
}

/* Compact student mode: put the balance and next action first, then keep the
   learning detail available below it without surrounding every item in a
   second large card. Formal and demo routes share this exact layout. */
.student-simple-ui {
  --student-phone-gutter: 5px;
}

.student-simple-ui .student-nav {
  padding-inline: 6px;
}

.student-simple-ui .student-savings-main,
.student-simple-ui.student-onboarding .student-savings-main {
  padding: 8px var(--student-phone-gutter)
    max(124px, calc(114px + env(safe-area-inset-bottom)));
}

.student-simple-ui [data-student-view],
.student-simple-ui #connectCard {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.student-simple-ui [data-student-view].card,
.student-simple-ui #connectCard.card {
  padding: 13px !important;
  border-radius: 16px !important;
}

.student-simple-ui .student-bottom-nav {
  width: min(calc(100vw - 8px), calc(var(--student-phone-width) - 8px));
  padding: 5px;
  border-radius: 19px;
}

.student-simple-ui .student-bottom-nav a {
  min-height: 52px;
}

.student-simple-ui .section-kicker,
.student-simple-ui .student-section-head p,
.student-simple-ui .rules-title p,
.student-simple-ui .term-learning-head p,
.student-simple-ui .term-product-title p,
.student-simple-ui .student-referral-head p {
  display: none;
}

.student-simple-ui .student-section-head,
.student-simple-ui .student-panel-head,
.student-simple-ui .growth-center-head,
.student-simple-ui .term-learning-head,
.student-simple-ui .term-ladder-head {
  margin-bottom: 10px;
  gap: 8px;
}

.student-simple-ui .student-section-head h2,
.student-simple-ui .term-learning-head h2,
.student-simple-ui .rules-title h2 {
  margin-top: 0;
  font-size: 21px;
}

/* The home screen starts with money, timing and the main action. */
.student-simple-ui #jarDashboard:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.student-simple-ui #jarDashboard > * {
  margin-top: 0;
  margin-bottom: 0;
}

.student-simple-ui #jarDashboard .jar-welcome { order: 0; }
.student-simple-ui #jarDashboard .student-balance-stage { order: 1; }
.student-simple-ui #jarDashboard .daily-growth { order: 2; }
.student-simple-ui #jarDashboard .student-metrics { order: 3; }
.student-simple-ui #jarDashboard .student-actions { order: 4; }
.student-simple-ui #jarDashboard .data-quality-banner { order: 5; }
.student-simple-ui #jarDashboard .jar-status-row { order: 6; }
.student-simple-ui #jarDashboard .student-today-card { order: 7; }
.student-simple-ui #jarDashboard .level-progress-card { order: 8; }

.student-simple-ui .jar-welcome {
  align-items: center;
  gap: 8px;
}

.student-simple-ui .jar-welcome h2,
.student-simple-ui .streak-badge small {
  display: none;
}

.student-simple-ui #studentLabel {
  display: block;
  color: #cdebe2;
  font-size: 13px;
  letter-spacing: 0;
}

.student-simple-ui .streak-badge {
  padding: 6px 9px;
}

.student-simple-ui .streak-badge > div {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.student-simple-ui .student-balance-stage {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding: 14px;
  border-radius: 17px;
}

.student-simple-ui .student-balance-stage > .student-content-image,
.student-simple-ui .student-balance-stage .mini-jar,
.student-simple-ui .balance-copy small {
  display: none !important;
}

.student-simple-ui .balance-copy strong {
  margin-top: 5px;
  font-size: clamp(31px, 10vw, 42px);
}

.student-simple-ui .daily-growth {
  padding: 12px;
  border-radius: 16px;
}

.student-simple-ui .growth-track,
.student-simple-ui .growth-foot > span:first-child,
.student-simple-ui .estimate-note {
  display: none;
}

.student-simple-ui .growth-head {
  align-items: start;
}

.student-simple-ui .growth-head > div:first-child strong {
  font-size: 12px;
}

.student-simple-ui .growth-foot {
  justify-content: flex-start;
  margin-top: 8px;
}

.student-simple-ui .growth-forecast {
  width: 100%;
  text-align: left;
}

.student-simple-ui .settlement-withdraw-forecast {
  margin-top: 8px;
  padding: 10px;
}

.student-simple-ui .student-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.student-simple-ui .student-metric,
.student-simple-ui .student-metric:last-child {
  grid-column: auto;
  min-height: 78px;
  padding: 9px 7px;
  border-radius: 13px;
}

.student-simple-ui .student-metric .metric-icon {
  display: none;
}

.student-simple-ui .student-metric small {
  font-size: 10px;
  line-height: 1.25;
}

.student-simple-ui .student-metric strong {
  margin-top: 5px;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.student-simple-ui .student-metric em {
  font-size: 10px;
}

.student-simple-ui .student-actions .btn {
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  text-align: center;
}

.student-simple-ui .student-actions small {
  display: none;
}

.student-simple-ui .data-quality-banner {
  padding: 9px 10px;
  border-radius: 13px;
}

.student-simple-ui #dataQualityBanner.good {
  display: none;
}

.student-simple-ui .jar-status-row {
  align-items: center;
  flex-direction: row;
  gap: 8px;
  padding: 8px;
  border-radius: 13px;
}

.student-simple-ui .jar-status-row .last-updated strong {
  display: none;
}

.student-simple-ui .jar-refresh-button {
  width: auto;
  min-height: 38px;
  margin-left: auto;
  padding: 8px 11px;
  font-size: 12px;
}

.student-simple-ui .student-today-card {
  padding: 10px;
  border-radius: 14px;
}

.student-simple-ui .student-today-head {
  margin-bottom: 7px;
}

.student-simple-ui .student-today-head h3 {
  font-size: 15px;
}

.student-simple-ui .student-today-list {
  gap: 6px;
}

.student-simple-ui .student-today-task {
  min-height: 0;
  padding: 8px;
  border-radius: 12px;
}

.student-simple-ui .student-today-task small,
.student-simple-ui .level-progress-card {
  display: none;
}

/* Growth keeps the learning activity, while duplicated level/history cards
   are removed from the student menu. */
.student-simple-ui #studentGrowthCenter .student-section-content-image,
.student-simple-ui #studentGrowthCenter .growth-center-icon,
.student-simple-ui .rules-mascot,
.student-simple-ui #levelsCard,
.student-simple-ui #habitCard,
.student-simple-ui .habit-quote {
  display: none !important;
}

.student-simple-ui .education-progress,
.student-simple-ui .student-challenge-center,
.student-simple-ui .education-question,
.student-simple-ui .achievement-badge {
  padding: 11px;
  border-radius: 14px;
}

.student-simple-ui .achievement-title {
  margin-top: 14px !important;
  padding-top: 13px;
}

.student-simple-ui .achievement-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.student-simple-ui .achievement-badge {
  gap: 5px;
}

.student-simple-ui .achievement-badge p {
  display: none;
}

.student-simple-ui .habit-rule-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.student-simple-ui .habit-rule-list article {
  gap: 7px;
  padding: 9px;
  border-radius: 13px;
}

.student-simple-ui .habit-rule-list p {
  display: none;
}

.student-simple-ui .rule-number {
  width: 26px;
  height: 26px;
}

.student-simple-ui .rule-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
  border-radius: 13px;
}

.student-simple-ui .rule-summary > div {
  padding: 9px 7px;
  border-top: 0 !important;
}

/* The term screen now leads directly to its products and records. */
.student-simple-ui .term-learning-card > .student-section-content-image,
.student-simple-ui .term-learning-icon,
.student-simple-ui .term-learning-steps {
  display: none !important;
}

.student-simple-ui .term-savings-card .student-subnav {
  margin-top: 4px;
  margin-bottom: 10px;
}

.student-simple-ui .term-product-grid {
  gap: 8px;
}

.student-simple-ui .term-product-card,
.student-simple-ui .term-ladder-section,
.student-simple-ui .term-ladder-form,
.student-simple-ui .term-portfolio-item {
  min-height: 0;
  padding: 12px;
  border-radius: 15px;
}

.student-simple-ui .term-product-card h3 {
  margin: 9px 0 5px;
  font-size: 18px;
}

.student-simple-ui .term-product-card > p {
  display: none;
}

.student-simple-ui .term-product-math {
  margin: 9px 0;
  padding: 10px;
}

.student-simple-ui .term-product-card details {
  margin-bottom: 10px;
}

/* List and personal pages show the result first and trim presentation copy. */
.student-simple-ui .student-profile-avatar,
.student-simple-ui .student-referral-mascot,
.student-simple-ui .student-profit-primary > p,
.student-simple-ui .student-referral-reward > p {
  display: none;
}

.student-simple-ui .student-profit-hero,
.student-simple-ui .student-referral-hero,
.student-simple-ui .student-referral-share-card {
  padding: 13px;
  border-radius: 16px;
}

.student-simple-ui .student-profit-primary > strong,
.student-simple-ui .student-referral-reward > strong {
  margin-block: 6px;
}

.student-simple-ui .student-profit-actions {
  margin-top: 12px;
}

.student-simple-ui .student-profit-panel,
.student-simple-ui .student-referral-progress-card,
.student-simple-ui .student-referral-rules,
.student-simple-ui .student-referral-stats > div {
  padding: 12px;
  border-radius: 15px;
}

.student-simple-ui .student-list-tools,
.student-simple-ui .activity-filter-row {
  gap: 6px;
}

@media (max-width: 360px) {
  .student-simple-ui {
    --student-phone-gutter: 4px;
  }

  .student-simple-ui .student-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .student-simple-ui .student-metric {
    padding-inline: 5px;
  }
}