/* v143: stable first-trade lesson, sequential action reveal, and three-line stock identity. */

/* Keep company identity in reading order: name, ticker, then sector/dividend. */
#stock-list .stock-card-head {
  min-height: 84px !important;
  padding: 10px !important;
  grid-template-columns: 60px minmax(0, 1fr) minmax(86px, 102px) 14px !important;
  grid-template-rows: 24px 18px 20px !important;
  grid-template-areas:
    "logo name price toggle"
    "logo name price toggle"
    "logo meta meta toggle" !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  align-items: center !important;
}

#stock-list .stock-card .stock-logo,
#stock-list .stock-card.is-expanded .stock-logo {
  width: 60px !important;
  height: 40px !important;
  margin-top: 1px !important;
  align-self: start !important;
}

#stock-list .stock-card .stock-logo span {
  font-size: 8.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#stock-list .stock-card[data-logo="LGENSOLU"] .stock-logo span,
#stock-list .stock-card[data-logo="CELTRIGON"] .stock-logo span {
  font-size: 7.5px !important;
}

#stock-list .stock-card .stock-name-block,
#stock-list .stock-card:not(.is-expanded) .stock-name-block {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  grid-template-rows: 24px 18px !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 0 !important;
  overflow: visible !important;
}

#stock-list .stock-card .stock-name {
  align-self: end !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

#stock-list .stock-card .stock-name.is-long-name {
  font-size: 10.5px !important;
}

#stock-list .stock-card .stock-ticker {
  display: block !important;
  align-self: center !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: #8b95a1 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#stock-list .stock-card:not(.is-expanded) .stock-name-block > .stock-ticker {
  display: block !important;
}

#stock-list .stock-card > .stock-card-head > .stock-meta-row {
  grid-area: meta !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 20px !important;
  align-items: center !important;
  align-self: start !important;
  overflow: visible !important;
  color: #6b7684 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#stock-list .stock-card > .stock-card-head > .stock-meta-row > span {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  height: 20px !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#stock-list .stock-card > .stock-card-head > .stock-meta-row > span + span::before {
  content: "\00b7" !important;
  margin-inline: 3px !important;
  color: #b0b8c1 !important;
}

#stock-list .stock-card .stock-price-block {
  min-height: 42px !important;
  height: 42px !important;
  grid-template-rows: 24px 18px !important;
}

#stock-list .stock-card .stock-price-line {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
}

#stock-list .stock-card .stock-change {
  display: flex !important;
  height: 18px !important;
  min-height: 18px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

#stock-list .stock-card .tick-arrow {
  width: 18px !important;
  min-width: 18px !important;
  height: 20px !important;
}

#stock-list .stock-card .tick-arrow::before {
  inset: 0 1px !important;
  width: 16px !important;
  height: 20px !important;
}

/* A tutorial action should be unmistakable without shifting layout. */
body[data-quest-priority="action"][data-quest-mission] .quest-focus {
  outline: 3px solid #f5b544 !important;
  outline-offset: 3px !important;
  animation: questTargetFlashV143 0.92s ease-in-out infinite !important;
  isolation: isolate;
}

@keyframes questTargetFlashV143 {
  0%, 100% {
    filter: brightness(1) saturate(1);
    outline-color: rgba(245, 181, 68, 0.86);
    box-shadow:
      inset 0 0 0 0 rgba(255, 203, 92, 0),
      0 0 0 2px rgba(245, 181, 68, 0.18),
      0 0 10px rgba(245, 181, 68, 0.24) !important;
  }
  50% {
    filter: brightness(1.14) saturate(1.18);
    outline-color: #ffc247;
    box-shadow:
      inset 0 0 0 999px rgba(255, 205, 92, 0.12),
      0 0 0 5px rgba(255, 194, 71, 0.32),
      0 0 24px rgba(255, 194, 71, 0.7) !important;
  }
}

.stock-card.tutorial-market-shock .sparkline-wrap {
  animation: tutorialMarketShock 0.55s ease-in-out 3;
}

@keyframes tutorialMarketShock {
  0%, 100% {
    outline: 0 solid rgba(240, 68, 82, 0);
    background-color: transparent;
  }
  50% {
    outline: 4px solid rgba(240, 68, 82, 0.62);
    outline-offset: -4px;
    background-color: rgba(240, 68, 82, 0.08);
  }
}

/* Learned actions stay in place; the next action is revealed instead of replacing the whole row. */
body[data-starter-phase="buy"] #action-buttons,
body[data-starter-phase="sell"] #action-buttons,
body[data-starter-phase="analyst"] #action-buttons {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-starter-phase="work"] #panel-stocks #action-buttons > #daytrade-btn,
body[data-starter-phase="work"] #panel-stocks #action-buttons > #free-cash-btn,
body[data-starter-phase="work"] #panel-stocks #action-buttons > #boost-btn,
body[data-starter-phase="buy"] #panel-stocks #action-buttons > #daytrade-btn,
body[data-starter-phase="buy"] #panel-stocks #action-buttons > #free-cash-btn,
body[data-starter-phase="buy"] #panel-stocks #action-buttons > #boost-btn,
body[data-starter-phase="sell"] #panel-stocks #action-buttons > #daytrade-btn,
body[data-starter-phase="sell"] #panel-stocks #action-buttons > #free-cash-btn,
body[data-starter-phase="sell"] #panel-stocks #action-buttons > #boost-btn,
body[data-starter-phase="analyst"] #panel-stocks #action-buttons > #daytrade-btn,
body[data-starter-phase="analyst"] #panel-stocks #action-buttons > #free-cash-btn,
body[data-starter-phase="analyst"] #panel-stocks #action-buttons > #boost-btn,
body[data-starter-phase="daytrade"] #panel-stocks #action-buttons > #free-cash-btn,
body[data-starter-phase="daytrade"] #panel-stocks #action-buttons > #boost-btn {
  display: none !important;
}

body[data-mobile-runtime-release="337"][data-starter-phase="daytrade"] #action-buttons {
  display: grid !important;
  width: calc(100% - 32px) !important;
  max-width: 540px !important;
  margin-inline: auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-starter-phase="daytrade"][data-quest-mission="daytrade"] #panel-stocks #action-buttons > #work-btn {
  display: grid !important;
}

body[data-starter-phase="work"] #action-buttons,
body[data-starter-phase="buy"] #action-buttons,
body[data-starter-phase="sell"] #action-buttons,
body[data-starter-phase="analyst"] #action-buttons {
  width: calc(100% - 32px) !important;
  max-width: 540px !important;
  margin-inline: auto !important;
}

/* Tutorial copy is numeric, large, and centered. */
#analyst-hire-modal[data-story-onboarding="true"] #analyst-hire-title {
  font-size: clamp(22px, 6vw, 28px) !important;
  line-height: 1.24 !important;
  text-align: center !important;
  word-break: keep-all !important;
}

#tier-modal-desc:empty {
  display: none !important;
}

#analyst-hire-modal[data-story-onboarding="true"] #analyst-hire-text {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 2px 0 8px !important;
}

#analyst-hire-modal[data-story-onboarding="true"] #analyst-hire-text span {
  display: grid !important;
  min-height: 48px !important;
  padding: 10px 12px !important;
  place-items: center !important;
  border: 1px solid #dbeafe !important;
  border-radius: 12px !important;
  background: #f4f8ff !important;
  color: #1769e5 !important;
  font-size: clamp(15px, 4.3vw, 18px) !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  word-break: keep-all !important;
}

#daytrade-modal .daytrade-modal-head {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px !important;
  align-items: center !important;
}

#daytrade-modal .daytrade-modal-head h2 {
  grid-column: 2 !important;
  margin: 0 !important;
  font-size: clamp(24px, 6vw, 30px) !important;
  text-align: center !important;
}

#daytrade-modal .daytrade-modal-head #daytrade-close-btn:not(.hidden) {
  grid-column: 3 !important;
  display: grid !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  place-items: center !important;
  justify-self: end !important;
  line-height: 1 !important;
  text-align: center !important;
  word-break: keep-all !important;
  white-space: nowrap !important;
}

#daytrade-modal .daytrade-desc,
#daytrade-modal .daytrade-intro-points span {
  overflow: visible !important;
  font-size: 15px !important;
  line-height: 1.42 !important;
  text-align: center !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

#daytrade-modal .daytrade-intro-points {
  gap: 8px !important;
  padding: 12px !important;
  border-radius: 12px !important;
}

#daytrade-modal .daytrade-intro-points span {
  display: block !important;
  font-weight: 700 !important;
}

.modal-actions button,
#daytrade-start-btn,
.starter-mission-cta,
.sheet button,
.bonus-confirm-benefit {
  text-align: center !important;
}

.modal-actions button,
#daytrade-start-btn,
.starter-mission-cta,
.sheet button {
  display: grid !important;
  place-items: center !important;
  justify-content: stretch !important;
}

.modal-actions button.hidden,
#daytrade-start-btn.hidden,
.starter-mission-cta.hidden,
.sheet button.hidden {
  display: none !important;
}

.bonus-confirm-benefit {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 3px !important;
  padding: 9px 12px !important;
}

.bonus-confirm-benefit strong {
  width: 100% !important;
  font-size: 17px !important;
  text-align: center !important;
}

@media (max-width: 380px) {
  #stock-list .stock-card-head {
    grid-template-columns: 54px minmax(0, 1fr) minmax(80px, 92px) 12px !important;
    column-gap: 6px !important;
  }

  #stock-list .stock-card .stock-logo,
  #stock-list .stock-card.is-expanded .stock-logo {
    width: 54px !important;
    height: 36px !important;
    margin-top: 3px !important;
  }

  #stock-list .stock-card .stock-name {
    font-size: 12px !important;
  }

  #stock-list .stock-card .stock-name.is-long-name {
    font-size: 9.5px !important;
  }

  #stock-list .stock-card .stock-ticker,
  #stock-list .stock-card > .stock-card-head > .stock-meta-row {
    font-size: 8.5px !important;
  }
}

@media (min-width: 720px) {
  #stock-list .stock-card-head {
    grid-template-columns: 60px minmax(0, 1fr) minmax(94px, 108px) 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-quest-priority="action"][data-quest-mission] .quest-focus {
    animation: none !important;
    filter: brightness(1.08) saturate(1.08) !important;
    box-shadow: 0 0 0 5px rgba(245, 181, 68, 0.32) !important;
  }

  .stock-card.tutorial-market-shock .sparkline-wrap {
    animation: none !important;
    outline: 4px solid rgba(240, 68, 82, 0.62) !important;
    outline-offset: -4px !important;
  }
}