/* ================================================
   Artifacts — supporting graphics for the landing
   ================================================ */

/* --- Problem item with artifact --- */
.problem-item--with-art {
  align-items: flex-start;
  flex-direction: row;
}

.problem-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.problem-content > p {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ================================================
   PAIN artifacts (Problem section) — abstract,
   single-color, no Kairos/solution framing.
   ================================================ */
.art-pain {
  background: var(--surface-low);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.art-pain--curve { padding: 12px 14px 6px; }

.pain-svg {
  width: 100%;
  height: 130px;
  display: block;
}

.pain-axis-text {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  fill: var(--text-muted);
}

/* Curve hover: pulse the end-point */
.pain-svg circle:last-of-type {
  transform-box: fill-box;
  transform-origin: center;
}

.art-pain--curve:hover circle:last-of-type {
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.4); }
}

/* --- Pain shuffle (sorted -> shuffled tiles) --- */
.art-pain--shuffle {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shuffle-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}

.shuffle-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.shuffle-arrow {
  font-size: 18px;
  color: var(--text-muted);
}

.shuffle-caption {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.02em;
}

.shuffle-divider {
  color: var(--orange);
  font-weight: 900;
  margin: 0 4px;
}

/* hover: jitter shuffled tiles */
.art-pain--shuffle:hover .shuffle-tiles--shuffled .tile:nth-child(2n) { transform: translateY(-2px) rotate(-3deg); }
.art-pain--shuffle:hover .shuffle-tiles--shuffled .tile:nth-child(2n+1) { transform: translateY(2px) rotate(3deg); }

/* --- Abstract tiles (used in pain shuffle + solution mix) --- */
.tile {
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  transition: transform 200ms ease;
}

.tile--a { background: #c7cdfc; }                /* violet */
.tile--b { background: var(--amber-light); }     /* amber */
.tile--c { background: var(--pink-light); }      /* pink */
.tile--d { background: #b8f0e8; }                /* teal */
.tile--e { background: var(--green-light); }     /* green */

/* ================================================
   SOLUTION artifacts (Features cards)
   Compact graphics, sit at bottom of card.
   ================================================ */
.card--with-art {
  display: flex;
  flex-direction: column;
}

.card--with-art > p {
  margin-bottom: 16px;
}

.art-solution {
  margin-top: auto;
  background: var(--surface-low);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.sol-svg {
  width: 100%;
  height: 100px;
  display: block;
}

/* Variant switching for forgetting curve via Tweaks */
.art-solution[data-variant="curve"] .sol-svg--curve  { display: block; }
.art-solution[data-variant="curve"] .sol-svg--bars,
.art-solution[data-variant="curve"] .sol-calendar    { display: none; }

.art-solution[data-variant="bars"] .sol-svg--bars    { display: block; }
.art-solution[data-variant="bars"] .sol-svg--curve,
.art-solution[data-variant="bars"] .sol-calendar     { display: none; }

.art-solution[data-variant="calendar"] .sol-calendar { display: flex; }
.art-solution[data-variant="calendar"] .sol-svg--curve,
.art-solution[data-variant="calendar"] .sol-svg--bars { display: none; }

.sol-svg--bars, .sol-calendar { display: none; }

/* Calendar variant — two stacked rows of tiny squares */
.sol-calendar {
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}

.sol-cal-grid {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 2px;
}

.sol-cal-cell {
  aspect-ratio: 1 / 1;
  background: var(--surface-container);
  border: 1px solid var(--border-light);
  border-radius: 2px;
}

.sol-cal-cell--touch { background: var(--orange); border-color: var(--border); }
.sol-cal-cell--cram  { background: var(--pink);   border-color: var(--border); }

/* hover on solution forgetting graph */
.art-solution:hover .sol-svg--curve path[stroke="#fc7f02"] { stroke-width: 4; }

/* --- Solution: mix (sorted -> shuffled, abstract) --- */
.art-solution--mix {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
}

.sol-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.sol-mix-arrow {
  font-size: 22px;
  color: var(--orange);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 50%;
  padding: 4px;
  transition: transform 400ms ease;
}

.art-solution--mix:hover .sol-mix-arrow { transform: rotate(180deg); }
.art-solution--mix:hover .sol-tiles--shuffled .tile:nth-child(odd) { transform: translateY(-3px); }
.art-solution--mix:hover .sol-tiles--shuffled .tile:nth-child(even) { transform: translateY(3px); }

/* --- Solution: difficulty stair-step --- */
.art-solution--diff:hover .sol-svg--diff circle {
  transition: transform 200ms ease;
}
.art-solution--diff:hover .sol-svg--diff circle:nth-child(1) { transform: translateY(-1px); }
.art-solution--diff:hover .sol-svg--diff circle:nth-child(2) { transform: translateY(-2px); }
.art-solution--diff:hover .sol-svg--diff circle:nth-child(3) { transform: translateY(-3px); }

/* ================================================
   Stat artifact (1hr = 3.5hr)
   ================================================ */
.art-stat {
  margin: 28px auto 8px;
  max-width: 480px;
  text-align: left;
  padding: 20px 22px 16px;
  background: var(--surface-low);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
}

.stat-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.stat-row-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-primary);
}

.stat-row-bar {
  position: relative;
  height: 28px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  position: relative;
  transition: width 400ms ease;
}

.stat-bar-fill--kairos {
  background: var(--orange);
  width: 25%;
}

.stat-bar-fill--passive {
  background: var(--pink);
  width: 87.5%;
}

.stat-row-value {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Outfit', sans-serif;
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--text-primary);
}

.stat-axis {
  display: grid;
  grid-template-columns: 110px repeat(4, 1fr);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 6px;
  padding-left: 4px;
}

.stat-axis span:first-child { visibility: hidden; }
.stat-axis span             { text-align: left; }

/* ================================================
   Tweaks panel (vanilla)
   ================================================ */
.tweaks {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 150;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-md);
  display: none;
  min-width: 240px;
}

.tweaks.active { display: block; }

.tweaks-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.tweaks-sub {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.tweaks-section { margin-bottom: 8px; }

.tweaks-section-label {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.tweaks-radio {
  display: flex;
  gap: 4px;
  background: var(--surface-container);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  padding: 3px;
}

.tweaks-radio button {
  flex: 1;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.tweaks-radio button.active {
  background: var(--orange);
  color: var(--white);
}

.tweaks-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-muted);
}

/* ================================================
   Smart Practice — simplified, matches landing brand
   (chunky 2px borders, Outfit headings, sticker tone)
   ================================================ */

/* ── Inline math typography (no external library) ── */
.kx-v {
  font-family: 'Cambria Math', 'STIX Two Math', 'Latin Modern Math', 'Times New Roman', Cambria, Georgia, serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Inside fractions, variables are italic per math convention */
.kx-frac .kx-v { font-style: italic; }

.kx-sub, .kx-sup {
  font-family: 'Cambria Math', 'STIX Two Math', 'Times New Roman', Cambria, Georgia, serif;
  font-size: 0.72em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  font-weight: 500;
  font-style: normal;
}

.kx-sub { top: 0.32em; margin-left: 0.05em; }
.kx-sup { top: -0.5em; margin-left: 0.05em; }

/* Stacked fraction — numerator over denominator with a 1px rule */
.kx-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: -0.55em;
  margin: 0 0.1em;
  font-family: 'Cambria Math', 'Times New Roman', Cambria, Georgia, serif;
  font-size: 1em;
  line-height: 1;
}

.kx-num, .kx-den {
  display: inline-flex;
  align-items: baseline;
  padding: 0 0.4em;
  font-size: 0.92em;
}

.kx-num { padding-bottom: 2px; }
.kx-den {
  border-top: 1.5px solid currentColor;
  padding-top: 2px;
}

/* Shell */
.sp-shell {
  display: grid;
  grid-template-columns: 1fr 240px;
  background: var(--cream);
  min-height: 440px;
}

/* ── Main canvas ── */
.sp-main {
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
}

.sp-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sp-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--pink-light);
  border: 2px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.sp-qnum {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sp-question {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 22px;
  text-wrap: pretty;
}

/* Options — single column for breathing room, sticker borders */
.sp-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.sp-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  min-height: 56px;
}

.sp-option--correct {
  background: var(--green-light);
  box-shadow: 4px 4px 0px 0px var(--green);
}

.sp-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--surface-container);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
}

.sp-option--correct .sp-letter {
  background: var(--green);
  color: var(--white);
}

.sp-opt-text { flex: 1; }
.sp-opt-text em { font-style: italic; }
.sp-opt-mark { color: var(--green); margin-left: auto; }

/* CTA row */
.sp-cta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.sp-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Right sidebar ── */
.sp-side {
  background: var(--surface-low);
  border-left: 2px solid var(--border);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sp-side-section { display: flex; flex-direction: column; gap: 10px; }

.sp-side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sp-side-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.sp-side-count {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Subjects */
.sp-subjects { display: flex; flex-direction: column; gap: 6px; }

.sp-subject {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-muted);
}

.sp-subject--active {
  background: var(--orange);
  color: var(--white);
  box-shadow: 3px 3px 0px 0px var(--border);
}

/* Question grid — sticker squares */
.sp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.sp-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--text-muted);
}

.sp-cell--correct { background: var(--green); color: var(--white); }
.sp-cell--wrong   { background: var(--pink-light); color: var(--text-primary); }
.sp-cell--current {
  background: var(--orange);
  color: var(--white);
  box-shadow: 2px 2px 0px 0px var(--border);
}

/* Hint card */
.sp-hint {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: 3px 3px 0px 0px var(--amber);
}

.sp-hint-bulb { color: var(--amber); }

.sp-hint-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.sp-hint-body {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.sp-hint-body em { font-style: italic; }

/* Tablet / mobile: stack sidebar below */
@media (max-width: 768px) {
  .sp-shell { grid-template-columns: 1fr; }
  .sp-side { border-left: none; border-top: 2px solid var(--border); flex-direction: row; flex-wrap: wrap; gap: 18px; }
  .sp-side-section { flex: 1 1 140px; }
  .sp-main { padding: 24px 20px; }
}