/* JuniorPreneur — shared styles. Design tokens from the handoff README. */
:root {
  --green-900: #1F5C42; --green-600: #3E9B6E; --green-300: #8FD3AE; --green-100: #E3F1E8;
  --ink: #16241D; --ink-2: #3C4A42; --muted: #55635B; --muted-2: #7A867F;
  --page: #F7F8F3; --input: #FBFCF9; --surface: #FFFFFF; --border: #E4E8DF; --border-input: #DCE2D7;
  --divider: #EEF1EA; --divider-2: #F3F5EF;
  --coral: #F2795A; --coral-tint: #FFF1EC; --coral-text: #9A4630;
  --violet: #8B6CF0; --violet-tint: #F1EDFE; --violet-text: #5B44B8;
  --yellow: #F6C445; --yellow-tint: #FEF6DC; --yellow-text: #8A6A0E;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F7F8F3; color: #16241D; font-family: 'Figtree', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body.bg-console { background: #F2F4EE; }
a { color: #1F5C42; text-decoration: none; }
a:hover { color: #3E9B6E; }
input, select, button, textarea { font-family: inherit; color: inherit; }
img { max-width: 100%; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #3E9B6E; outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
@keyframes jp-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes jp-pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
@keyframes jp-in { from { opacity: 0; transform: translate(-50%, 12px) } to { opacity: 1; transform: translate(-50%, 0) } }
.skeleton { animation: jp-pulse 1.4s ease-in-out infinite; }

/* Default field focus (matches style-focus in the designs) */
.jp-field:focus { border-color: #3E9B6E !important; background-color: #fff !important; }
select.jp-select { appearance: none; -webkit-appearance: none; padding-right: 40px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2316241D' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; }
select.jp-select:focus { border-color: #3E9B6E !important; }

/* ---------- Responsive helpers (breakpoints from the designs: 900 / 640) ---------- */
.span2 { grid-column: span 2; }
.span-all { grid-column: 1 / -1; }
@media (max-width: 899px) { .span2 { grid-column: auto; } }

/* Marketing header */
.lp-nav { display: flex; }
.lp-login { display: inline-block; }
.lp-brand { display: inline; }
.lp-menu-btn { display: none !important; }
.lp-mobile-menu { display: none; }
@media (max-width: 899px) {
  .lp-nav { display: none; }
  .lp-menu-btn { display: grid !important; }
  .lp-mobile-menu.open { display: flex; }
}
@media (max-width: 639px) { .lp-login { display: none; } }
@media (max-width: 399px) { .lp-brand { display: none; } }

/* App shell (portal + console) */
.jp-shell { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.jp-shell.console { grid-template-columns: 248px minmax(0, 1fr); }
.jp-aside { position: sticky; top: 0; left: 0; height: 100vh; width: auto; z-index: 60; overflow-y: auto; transition: transform .25s ease; }
.jp-scrim { display: none; position: fixed; inset: 0; background: rgba(22,36,29,0.45); z-index: 55; }
.jp-menu-btn { display: none !important; }
.jp-hdr { padding: 20px 36px; }
.jp-main { padding: 32px 36px 64px; }
.jp-search { width: 260px; flex: 0 0 auto; }
.jp-search.console { width: 280px; }
.msg-grid { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
.msg-list-pane { display: flex; }
@media (max-width: 899px) {
  .jp-shell, .jp-shell.console { grid-template-columns: minmax(0, 1fr); }
  .jp-aside { position: fixed; width: min(84vw, 300px); transform: translateX(-105%); }
  body.drawer-open .jp-aside { transform: translateX(0); box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
  body.drawer-open .jp-scrim { display: block; }
  .jp-menu-btn { display: grid !important; }
  .jp-hdr { padding: 16px 24px; }
  .jp-main { padding: 24px 24px 56px; }
}
@media (max-width: 639px) {
  .jp-hdr { padding: 12px 16px; }
  .jp-main { padding: 20px 16px 48px; }
  .jp-search, .jp-search.console { width: auto; flex: 1 1 0; }
  .msg-grid { grid-template-columns: minmax(0, 1fr); }
  .msg-grid.thread-open .msg-list-pane { display: none; }
  .msg-grid:not(.thread-open) .msg-thread-pane { display: none !important; }
  .msg-back { display: grid !important; }
}
.msg-back { display: none !important; }

/* Footer column that spans 2 on wide screens */
.ft-span2 { grid-column: span 2; min-width: 0; }
@media (max-width: 899px) { .ft-span2 { grid-column: auto; } }

/* Toast */
.jp-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); padding: 14px 22px; border-radius: 999px; background: #16241D; color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 20px 40px -10px rgba(22,36,29,0.4); z-index: 90; display: flex; gap: 10px; align-items: center; white-space: nowrap; animation: jp-in .2s ease; max-width: calc(100vw - 32px); }
.jp-toast .ic { width: 22px; height: 22px; border-radius: 50%; background: #3E9B6E; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.jp-toast .msg { overflow: hidden; text-overflow: ellipsis; }
.jp-toast .act { all: unset; cursor: pointer; color: #8FD3AE; font-weight: 700; }
@media (max-width: 639px) { .jp-toast { white-space: normal; border-radius: 22px; } }

/* Video in the course player */
.jp-video { width: 100%; height: 100%; display: block; background: #000; border-radius: 24px; }

/* Print: certificate */
@media print {
  @page { size: 11in 8.5in; margin: 0; }
  body { background: #fff !important; }
  .no-print { display: none !important; }
}

/* Range input accent */
input[type=range] { accent-color: #8B6CF0; }