/* STEPIRO: purposeful visual cues, with quiet question screens. */
.brand-mark {
  display: block; width: 38px; aspect-ratio: 1; flex-shrink: 0;
  background: var(--brand-teal);
  -webkit-mask: url('assets/brand/stepiro-symbol.png') center / contain no-repeat;
  mask: url('assets/brand/stepiro-symbol.png') center / contain no-repeat;
}
.step-intro:not(.step-intro-compact) { grid-template-columns: minmax(0,1fr) 236px; }
.intro-journey {
  align-self: center; min-width: 0; padding: 21px;
  border: 1px solid #ffffff20; border-radius: 20px; background: #ffffff05;
}
.journey-heading { display: flex; align-items: center; gap: 10px; color: var(--brand-mint); font-size: 12px; }
.journey-heading .brand-mark { width: 30px; background: var(--brand-mint); }
.journey-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 22px; }
.journey-steps li { display: flex; align-items: center; gap: 14px; position: relative; }
.journey-steps li:not(:last-child)::after {
  content: ''; position: absolute; right: 21px; top: 47px; height: 19px;
  border-inline-start: 1px dashed #bcebe454;
}
.journey-node {
  width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
  border: 1px solid #bcebe438; background: #bcebe40d; border-radius: 14px; position: relative;
}
.journey-node .icon { width: 22px; height: 22px; color: var(--brand-mint); }
.journey-node small {
  position: absolute; bottom: -4px; left: -4px; width: 17px; height: 17px;
  display: grid; place-items: center; border-radius: 50%; color: var(--brand-navy);
  background: var(--brand-mint); font: 700 10px/1 Arial, sans-serif;
}
.journey-steps strong { display: block; font-size: 15px; font-weight: 600; }
.journey-steps li > div > span { display: block; color: #bed1dc; font-size: 11px; margin-top: 3px; }
.skill-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.skill-icon {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px; color: var(--brand-deep); background: var(--brand-soft);
}
.skill-icon .icon { width: 17px; height: 17px; }
.skill-meta { gap: 8px; }
.skill-meta small { text-align: end; }
.skill-row { margin-bottom: 19px; }
.skill-row .track { margin-inline-start: 38px; }
.filters .filter { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.filters .filter .icon { width: 17px; height: 17px; }
.lesson-card.skill-card { position: relative; border-block-start: 3px solid #d4e9e5; }
.lesson-card.skill-card .lesson-number { color: #8395a5; font-variant-numeric: tabular-nums; }
.lesson-card .small-label.skill-label { color: var(--brand-deep); }
.lesson-card .skill-icon { width: 32px; height: 32px; }
.today-card { border-color: #cce2de; }
.today-card > .card-title h2 { display: flex; align-items: center; gap: 9px; }
.today-card > .card-title h2::before { content: ''; width: 4px; height: 20px; background: var(--brand-teal); border-radius: 5px; }
.stat-icon.day-progress {
  width: 46px; height: 46px; flex-shrink: 0; position: relative; isolation: isolate;
  border: none; border-radius: 50%; background: conic-gradient(var(--brand-teal) calc(var(--progress)*1%), #e4eeef 0);
}
.day-progress::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; z-index: -1; }
.day-progress .icon { width: 20px; height: 20px; }
.state-visual { position: relative; width: 108px; height: 94px; margin: 0 auto 17px; display: grid; place-items: center; }
.state-visual .brand-mark { width: 61px; background: var(--brand-teal); transform: translateY(-3px); }
.state-orbit { position: absolute; inset: 8px 9px; border-radius: 24px; border: 1px solid #d1e6e2; background: #edf7f5; transform: rotate(-7deg); }
.state-badge { position: absolute; left: 7px; bottom: 7px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-navy); border: 3px solid #fff; }
.empty .state-badge .icon { width: 15px; height: 15px; color: #fff; margin: 0; }
.branded-empty { padding-block: 34px; }
.chart-empty { padding: 22px 10px; }
.chart-empty .state-visual { transform: scale(.85); margin-bottom: 0; }
.session-complete { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--brand-deep); font-size: 13px; margin-bottom: 20px; }
.session-complete .brand-mark { width: 25px; }
.session-complete .icon { width: 17px; height: 17px; }
.score-ring { box-shadow: 0 0 0 8px #f4f9f8; }
.progress-plot { overflow: visible; }
.progress-plot polyline { stroke: var(--brand-teal); stroke-linejoin: round; stroke-linecap: round; }
.progress-plot circle { stroke: var(--brand-teal); }
.audio-player { border-color: #cde3df; background: #f4faf9; }
.audio-player-label { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--brand-deep); font-size: 12px; }
.audio-player-label .icon { width: 18px; height: 18px; }
.audio-wave { gap: 5px; margin: 12px 0 15px; }
.audio-wave i { background: #a1c7c3; width: 4px; transform-origin: center; }
.audio-player.playing .audio-wave i { background: var(--brand-teal); animation: stepiro-wave 850ms ease-in-out infinite alternate; }
.audio-player.playing .audio-wave i:nth-child(3n) { animation-delay: -420ms; }
.audio-player.playing .audio-wave i:nth-child(4n) { animation-delay: -640ms; }
.audio-status { color: #496d72; min-height: 22px; }
.audio-buttons .btn { min-height: 44px; }
@keyframes stepiro-wave { from { transform: scaleY(.38); } to { transform: scaleY(1); } }
.btn, .quick, .lesson-card, .filter, .nav-btn { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
@media (hover:hover) {
  .lesson-card:hover, .quick:hover { transform: translateY(-2px); border-color: #91c7bf; box-shadow: 0 8px 20px #142c4608; }
}
.btn:active, .quick:active, .filter:active { transform: translateY(1px); }
@media (max-width:1150px) and (min-width:851px) {
  .step-intro:not(.step-intro-compact) { grid-template-columns: minmax(0,1fr) 205px; gap: 24px; }
  .intro-journey { padding: 17px; }
}
@media (max-width:850px) {
  .step-intro:not(.step-intro-compact) { grid-template-columns: minmax(0,1fr) 210px; gap: 24px; }
}
@media (max-width:600px) {
  .step-intro:not(.step-intro-compact) { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .intro-journey { padding: 17px 0 0; background: transparent; border: none; border-top: 1px solid #ffffff20; border-radius: 0; }
  .journey-heading { justify-content: center; font-size: 11px; }
  .journey-heading .brand-mark { width: 24px; }
  .journey-steps { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
  .journey-steps li { flex-direction: column; gap: 10px; text-align: center; }
  .journey-steps li:not(:last-child)::after { top: 21px; right: calc(50% + 26px); width: calc(100% - 42px); height: 0; border-inline-start: 0; border-top: 1px dashed #bcebe454; }
  .journey-node { width: 41px; height: 41px; border-radius: 13px; }
  .journey-steps strong { font-size: 12px; }
  .journey-steps li > div > span { display: none; }
  .step-intro:not(.step-intro-compact) .intro-benefits { padding-top: 0; border: none; }
  .skill-meta { font-size: 12px; }
  .skill-meta small { font-size: 10px; }
  .skill-icon { width: 28px; height: 28px; border-radius: 8px; }
  .skill-label { gap: 7px; }
  .skill-row .track { margin-inline-start: 35px; }
  .filters { gap: 7px; }
  .filters .filter { padding-inline: 11px; }
  .lesson-card.skill-card { padding: 19px; }
}
@media (max-width:550px) {
  .progress-stat { position: relative; }
  .progress-stat .day-progress { display: grid; position: absolute; top: 17px; left: 15px; width: 28px; height: 28px; }
  .progress-stat .day-progress .icon { width: 13px; height: 13px; }
  .progress-stat .day-progress::before { inset: 3px; }
  .progress-stat .label { padding-inline-end: 26px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .lesson-card:hover, .quick:hover, .btn:active, .quick:active, .filter:active { transform: none; }
}