/* Student journey page — light, calm, bilingual. */
:root {
  --jy-bg: #f5f7fa;
  --jy-card: #ffffff;
  --jy-ink: #1c2733;
  --jy-muted: #5c6b7a;
  --jy-line: #dde4ec;
  --jy-primary: #1f5f8b;
  --jy-primary-dk: #174a6d;
  --jy-danger: #b3402f;
  --jy-must: #b3402f;
  --jy-important: #b07716;
  --jy-polish: #4a7a4e;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--jy-bg); color: var(--jy-ink);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  line-height: 1.55;
}
.jy-top { background: var(--jy-card); border-bottom: 1px solid var(--jy-line); }
.jy-top-inner {
  max-width: 900px; margin: 0 auto; padding: 10px 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.jy-brand { color: var(--jy-primary); text-decoration: none; font-weight: 600; }
.jy-who { color: var(--jy-muted); margin-right: 12px; }
#jyMain { max-width: 900px; margin: 0 auto; padding: 20px 16px 80px; }
.jy-card {
  background: var(--jy-card); border: 1px solid var(--jy-line);
  border-radius: 10px; padding: 22px 24px; margin-bottom: 18px;
}
.jy-narrow { max-width: 520px; margin: 24px auto; }
h1 { font-size: 1.35rem; margin: 0 0 10px; }
h2 { font-size: 1.05rem; margin: 18px 0 8px; }
label { display: block; margin: 12px 0 4px; font-weight: 600; }
input, select, textarea {
  width: 100%; padding: 9px 10px; margin-top: 4px;
  border: 1px solid var(--jy-line); border-radius: 6px;
  font: inherit; background: #fff; color: inherit;
}
textarea { resize: vertical; }
button { font: inherit; cursor: pointer; border-radius: 6px; }
.jy-primary {
  background: var(--jy-primary); color: #fff; border: none;
  padding: 10px 18px; margin-top: 14px;
}
.jy-primary:hover { background: var(--jy-primary-dk); }
.jy-primary:disabled { opacity: 0.55; cursor: wait; }
.jy-secondary {
  background: #fff; color: var(--jy-primary);
  border: 1px solid var(--jy-primary); padding: 10px 18px; margin-top: 14px;
}
.jy-danger { background: var(--jy-danger); color: #fff; border: none; padding: 10px 18px; }
.jy-link-btn {
  background: none; border: none; color: var(--jy-primary);
  text-decoration: underline; padding: 4px 0; font-size: 0.92rem;
}
.jy-muted { color: var(--jy-muted); }
.jy-small { font-size: 0.86rem; }
.jy-error { color: var(--jy-danger); font-weight: 600; }
.jy-row { display: flex; gap: 18px; flex-wrap: wrap; }
.jy-row > label { flex: 1 1 200px; }
.jy-row-split {
  display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 8px;
}
.jy-notice { padding-left: 20px; }
.jy-notice li { margin-bottom: 8px; }
.jy-check { font-weight: 400; }
.jy-check input { width: auto; margin-right: 6px; }
.jy-pill {
  display: inline-block; background: #eef3f8; color: var(--jy-primary);
  border-radius: 999px; padding: 2px 12px; font-size: 0.85rem; margin: 2px 4px 2px 0;
}
.jy-headline { font-size: 1.05rem; font-weight: 600; }
.jy-stages div { padding: 4px 0; color: var(--jy-muted); }
.jy-stages div.on { color: var(--jy-ink); font-weight: 600; }

/* task list */
.jy-task-row {
  border: 1px solid var(--jy-line); border-radius: 8px;
  padding: 12px 14px; margin: 10px 0; display: flex;
  justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.jy-task-row .jy-stage { color: var(--jy-muted); font-size: 0.9rem; }

/* lessons */
.jy-lessons a {
  display: block; border: 1px solid var(--jy-line); border-radius: 8px;
  padding: 10px 14px; margin: 8px 0; text-decoration: none; color: inherit;
}
.jy-lessons a:hover { border-color: var(--jy-primary); }

/* feedback layers */
.jy-layer { border: 1px solid var(--jy-line); border-radius: 8px; margin: 12px 0; }
.jy-layer summary {
  padding: 10px 14px; font-weight: 600; cursor: pointer; list-style: none;
}
.jy-layer[data-sev="must_fix"] summary { color: var(--jy-must); }
.jy-layer[data-sev="important"] summary { color: var(--jy-important); }
.jy-layer[data-sev="polish"] summary { color: var(--jy-polish); }
.jy-issue { border-top: 1px solid var(--jy-line); padding: 12px 14px; }
.jy-issue h3 { margin: 0 0 6px; font-size: 0.98rem; }
.jy-issue p { margin: 4px 0; }
.jy-issue .jy-links a { margin-right: 14px; font-size: 0.9rem; }

/* respond (three-state) */
.jy-respond { border: 1px solid var(--jy-line); border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.jy-respond .jy-states { margin: 8px 0; display: flex; gap: 16px; flex-wrap: wrap; }
.jy-respond .jy-states label { font-weight: 400; margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.jy-respond input[type=radio] { width: auto; }
.jy-respond.done { border-left: 4px solid var(--jy-polish); }

/* recorder */
.jy-recorder {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--jy-line); border-radius: 8px; padding: 14px; margin: 14px 0;
}
.jy-timer { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.jy-prompter {
  max-height: 220px; overflow: auto; background: #f2f5f9;
  border-radius: 8px; padding: 12px 14px; white-space: pre-wrap; font: inherit;
}
.jy-attempt {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--jy-line); border-radius: 8px; padding: 8px 12px; margin: 8px 0;
}
.jy-attempt .rep { color: var(--jy-polish); font-weight: 600; }

.jy-teacher { border-top: 1px dashed var(--jy-line); margin-top: 18px; padding-top: 6px; }
.jy-stepbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--jy-card); border-top: 1px solid var(--jy-line);
  padding: 8px 16px; text-align: center; font-size: 0.85rem; color: var(--jy-muted);
}
.jy-stepbar b { color: var(--jy-primary); }
/* Debug-only "next stage" chip (test account) */
.jy-debug-chip {
  margin-left: 10px; padding: 2px 8px; border: 1px dashed var(--jy-primary);
  border-radius: 6px; font-size: 0.75rem; cursor: pointer; background: #fff;
  color: var(--jy-primary); text-decoration: none;
}
.jy-stepbar button { margin: 0; }
code { background: #eef3f8; padding: 1px 6px; border-radius: 4px; }
@media (max-width: 600px) { .jy-card { padding: 16px; } }

/* Summary: completion progress bar + tables */
.jy-progress {
  height: 14px; background: #e2e8f0; border-radius: 999px; overflow: hidden;
  margin: 6px 0 4px;
}
.jy-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--jy-primary), #4f8fb8);
  border-radius: 999px; transition: width .4s ease;
}
.jy-summary-table { border-collapse: collapse; width: 100%; margin: 4px 0; }
.jy-summary-table th, .jy-summary-table td {
  border: 1px solid var(--jy-line); padding: 6px 10px; text-align: left;
  font-size: 0.9rem; vertical-align: top;
}
.jy-summary-table th { background: #eef3f8; }

/* Back button (fixed, top-left) — hidden on login/consent/home/setup */
.jy-back {
  position: fixed; top: 14px; left: 14px; z-index: 20;
  border: 1px solid var(--jy-line); background: var(--jy-card);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 0.9rem;
}
.jy-back:hover { border-color: var(--jy-primary); color: var(--jy-primary); }

/* Learn list rows */
.jy-lesson-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--jy-line); border-radius: 8px; padding: 10px 12px; margin: 8px 0;
}
.jy-lesson-row a { color: var(--jy-primary); text-decoration: none; font-weight: 600; }
.jy-lesson-row a:hover { text-decoration: underline; }

/* Slide deck (Delivery > Slide preview) */
.jy-deck {
  border: 1px solid var(--jy-line, #dce3ec); border-radius: 10px;
  margin: 14px 0; padding: 12px 14px; background: #fff;
}
.jy-deck-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 10px;
}
.jy-deck .jy-row { display: flex; gap: 8px; }
.jy-slide {
  border: 1px solid var(--jy-line, #dce3ec); border-radius: 8px;
  background: #f8fafc; padding: 16px 18px; min-height: 160px;
  font-size: 0.95rem; line-height: 1.5;
}
.jy-slide h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--jy-primary, #2563eb); }
.jy-slide pre { white-space: pre-wrap; margin: 0; font: inherit; }

/* Session reference (top-right, for support) */
.jy-session-ref {
  font-family: monospace; font-size: 0.75rem; color: var(--jy-muted, #6b7684);
  cursor: pointer; user-select: all;
}
.jy-session-ref:hover { color: var(--jy-primary, #2563eb); }

/* Long-running evaluation breakdown */
.jy-breakdown {
  margin-top: 12px; padding: 12px; background: #f8fafc;
  border-radius: 8px; border-left: 3px solid var(--jy-primary, #2563eb);
}
.jy-steps { list-style: none; padding: 0; margin: 8px 0 0; }
.jy-steps li { padding: 4px 0; color: var(--jy-muted, #6b7684); }
.jy-steps li.done { color: var(--jy-primary, #2563eb); font-weight: 600; }