/* Attempt history: journey page and teacher student detail. */
.journey { max-width: 980px; }
.j-title { font-family: var(--font-read); }
.j-cheer { padding: 12px 16px; border-radius: 10px; background: var(--correct-bg); color: #1E5A40; font-weight: 600; }
.journey .card { margin: 16px 0; }
.journey .card h2 { margin-top: 0; }
.h-figure { margin: 0; }
.h-chart { width: 100%; height: auto; max-height: 260px; display: block; }
.h-grid { stroke: var(--mist); stroke-width: 1; }
.h-pass { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 6 5; }
.h-axis { font: 11px var(--font-ui, sans-serif); fill: var(--ink-soft); }
.h-line { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; }
.h-dot { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.h-dot.pass { fill: var(--gold); }
.h-trends { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.h-trend { display: grid; grid-template-columns: minmax(140px, 1fr) auto; gap: 2px 14px; padding: 8px 12px; border-radius: 8px; background: var(--pearl); border-left: 4px solid var(--mist); }
.h-trend.up { border-left-color: var(--correct); }
.h-trend.down { border-left-color: #D9A9A4; }
.h-skill { font-weight: 600; text-transform: capitalize; }
.h-change { font-variant-numeric: tabular-nums; }
.h-trend small { grid-column: 1 / -1; }
.h-trend.up .h-change { color: #1E5A40; }
.st-history { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mist); }
.card.improve .kpis { margin-bottom: 8px; }
@media (max-width: 700px) {
  .h-table, .h-table tbody, .h-table tr, .h-table th, .h-table td { display: block; width: 100%; }
  .h-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .h-table tr { border-bottom: 1px solid var(--mist); padding: 6px 0; }
  .h-table th[scope="row"], .h-table td { border: 0; padding: 3px 12px; }
  .h-table td { display: flex; justify-content: space-between; }
  .h-table td::before { content: attr(data-label); color: var(--ink-soft); font-size: 0.85rem; }
}
@media (max-width: 700px) { .journey .kpis { grid-template-columns: repeat(2, 1fr); } .h-chart { max-height: none; } }

/* ===== P22: journey and My Words in the gilded room ===== */
.student-room .j-title { font-family: var(--font-display); font-weight: 600; }
.student-room .j-cheer { border-radius: 14px; background: #E4F1EA; box-shadow: inset 3px 0 0 #1D6A4E; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; font-weight: 600; }
.student-room .h-line { stroke: var(--navy); stroke-width: 2.5; }
.student-room .h-dot { fill: #FFFDF8; stroke: #8E6A22; }
.student-room .h-dot.pass { fill: #D9B560; stroke: #8E6A22; }
.student-room .h-trend { border-left: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(201, 161, 74, 0.28), inset 3px 0 0 var(--mist); }
.student-room .h-trend.up { box-shadow: 0 0 0 1px rgba(201, 161, 74, 0.28), inset 3px 0 0 #1D6A4E; }
.student-room .h-trend.down { box-shadow: 0 0 0 1px rgba(201, 161, 74, 0.28), inset 3px 0 0 #D9A9A4; }
.student-room .h-skill { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }