/* Stage 38: learning entry and historical character directory */
.character-directory-page,
.character-detail-page,
.student-learning-home { display: grid; gap: 30px; }

.character-directory-hero,
.continue-learning-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  padding: clamp(28px, 5vw, 58px);
  border-radius: var(--radius-lg);
  color: var(--brand-on-dark);
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--brand-bright) 72%, transparent), transparent 34%),
    linear-gradient(145deg, var(--brand-dark), var(--brand));
  box-shadow: var(--shadow-lg);
}
.character-directory-hero::after,
.continue-learning-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 46px 46px;
}
.character-directory-hero > *,
.continue-learning-hero > * { position: relative; z-index: 1; }
.character-directory-hero h1,
.continue-learning-hero h1 { max-width: 900px; margin: 0; }
.character-directory-hero p,
.continue-learning-hero p { max-width: 780px; margin: 18px 0 0; color: color-mix(in srgb, var(--brand-on-dark) 76%, transparent); }
.character-directory-hero .eyebrow,
.continue-learning-hero .eyebrow { color: var(--accent-line); }
.directory-count { display: grid; min-width: 150px; justify-items: end; }
.directory-count strong { font-size: clamp(46px, 7vw, 82px); line-height: .9; }
.directory-count span { margin-top: 12px; font-weight: 800; }
.directory-count small { margin-top: 4px; color: color-mix(in srgb, var(--brand-on-dark) 58%, transparent); }

.character-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(150px, .75fr)) auto auto;
  gap: 12px;
  align-items: end;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-glass);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}
.character-filter-bar label { display: grid; gap: 7px; min-width: 0; }
.character-filter-bar label > span { color: var(--text-2); font-size: 11px; font-weight: 800; }
.character-filter-bar input,
.character-filter-bar select {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.character-filter-bar input:focus,
.character-filter-bar select:focus { outline: 0; border-color: var(--ai); box-shadow: var(--focus-ring); }
.character-filter-bar .text-button { min-height: var(--control-height); padding: 0 10px; white-space: nowrap; }

.character-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.character-card {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}
.character-card:hover,
.character-card:focus-within { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow-md); }
.character-portrait-link { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-warm); }
.character-portrait-link img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-panel) ease; }
.character-card:hover .character-portrait-link img { transform: scale(1.025); }
.portrait-period {
  position: absolute;
  right: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--brand-on-dark) 32%, transparent);
  border-radius: 999px;
  color: var(--brand-on-dark);
  background: color-mix(in srgb, var(--brand-dark) 82%, transparent);
  font-size: 10px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}
.character-card-body { display: grid; align-content: start; gap: 12px; padding: 18px; }
.character-card-status { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.character-card-status > span { margin-right: auto; color: var(--brand); font-size: 11px; font-weight: 850; }
.character-card h2 { margin: 0; font-family: var(--font-reading); font-size: clamp(20px, 2vw, 26px); }
.character-card-body > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.72;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.character-card footer { display: grid; gap: 9px; align-self: end; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.character-card footer span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.character-card footer a { color: var(--brand); font-size: 12px; font-weight: 800; }
.character-empty-state { min-height: 320px; }
.character-empty-state > svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.character-detail-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 22px; align-items: start; }
.character-profile-panel,
.character-task-preview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.character-profile-panel { position: sticky; top: 92px; }
.character-detail-portrait { position: relative; aspect-ratio: 4 / 4.25; background: var(--surface-warm); }
.character-detail-portrait img { width: 100%; height: 100%; object-fit: cover; }
.character-detail-portrait > span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--brand-on-dark);
  background: color-mix(in srgb, var(--brand-dark) 84%, transparent);
  font-size: 11px;
  font-weight: 800;
}
.character-profile-copy { padding: 24px; }
.character-profile-copy h1 { font-family: var(--font-reading); font-size: clamp(34px, 4vw, 52px); }
.character-years { margin: 8px 0; color: var(--bronze); font-family: var(--font-reading); font-size: 18px; font-weight: 800; }
.character-profile-copy > p:not(.eyebrow):not(.character-years) { margin: 16px 0; color: var(--text-2); }
.character-profile-copy dl { display: grid; gap: 12px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.character-profile-copy dl div { display: grid; gap: 4px; }
.character-profile-copy dt { color: var(--muted); font-size: 10px; font-weight: 800; }
.character-profile-copy dd { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.6; }
.character-profile-copy dd a { color: var(--brand); font-weight: 800; }

.character-task-preview { display: grid; gap: 22px; padding: clamp(24px, 4vw, 42px); }
.character-task-preview > header { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.character-task-preview h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); }
.character-task-preview blockquote {
  position: relative;
  margin: 0;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(var(--paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px),
    var(--surface-warm);
  background-size: 28px 28px;
}
.character-task-preview blockquote p { position: relative; margin: 0; color: var(--text); font-family: var(--font-reading); font-size: clamp(18px, 2.2vw, 25px); line-height: 1.9; }
.character-task-preview blockquote cite { display: block; margin-top: 14px; color: var(--bronze); font-size: 12px; font-style: normal; font-weight: 800; }
.quote-mark { position: absolute; top: 6px; right: 22px; color: color-mix(in srgb, var(--bronze) 24%, transparent); font-family: var(--font-reading); font-size: 90px; line-height: 1; }
.suggested-question-panel { display: grid; gap: 13px; }
.suggested-question-panel h3 { margin: 0; }
.question-chip-list { display: flex; flex-wrap: wrap; gap: 9px; }
.question-chip-list button {
  min-height: var(--touch-target);
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--ai) 26%, var(--line));
  border-radius: 999px;
  color: var(--ai);
  background: var(--ai-soft);
  cursor: pointer;
  text-align: left;
  transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.question-chip-list button:hover { transform: translateY(-2px); border-color: var(--ai); background: var(--surface); }
.suggested-question-panel label { display: grid; gap: 7px; }
.suggested-question-panel label span { color: var(--text-2); font-size: 11px; font-weight: 800; }
.suggested-question-panel textarea {
  width: 100%;
  min-height: 104px;
  padding: 13px 14px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface);
}
.suggested-question-panel textarea:focus { outline: 0; border-color: var(--ai); box-shadow: var(--focus-ring); }
.suggested-question-panel > small { color: var(--muted); }
.character-activity-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.character-activity-summary div { display: grid; gap: 6px; padding: 14px; border-radius: var(--radius-sm); background: var(--brand-soft); }
.character-activity-summary span { color: var(--muted); font-size: 10px; }
.character-activity-summary strong { font-size: 12px; line-height: 1.55; }
.character-enter-button { width: 100%; min-height: 52px; }
.character-activity-empty { padding: 18px; border-left: 4px solid var(--warning); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--warning-soft); }
.character-activity-empty p { margin: 6px 0 0; color: var(--text-2); }
.character-source-section { margin-top: 12px; }
.character-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.character-source-grid > a { display: grid; gap: 10px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.character-source-grid > a:hover { transform: translateY(-3px); border-color: var(--evidence); }
.character-source-grid span { color: var(--evidence); font-size: 10px; font-weight: 800; }
.character-source-grid h3 { margin: 0; font-family: var(--font-reading); font-size: 18px; }
.character-source-grid p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.character-source-grid small { align-self: end; color: var(--brand); font-weight: 800; }

.continue-learning-hero { grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr); align-items: stretch; }
.continue-unit-label { display: inline-flex; margin: 0 0 14px; color: var(--accent-line); font-size: 12px; font-weight: 800; }
.continue-next-task { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; max-width: 760px; margin-top: 24px; padding: 16px; border: 1px solid color-mix(in srgb, var(--brand-on-dark) 18%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 10%, transparent); }
.continue-next-task > svg { width: 32px; height: 32px; fill: none; stroke: var(--accent-line); stroke-width: 1.7; }
.continue-next-task > span { display: grid; gap: 4px; }
.continue-next-task small { color: color-mix(in srgb, var(--brand-on-dark) 58%, transparent); font-weight: 800; }
.continue-next-task strong { font-size: 18px; }
.continue-next-task em { overflow: hidden; color: color-mix(in srgb, var(--brand-on-dark) 72%, transparent); font-size: 12px; font-style: normal; line-height: 1.65; text-overflow: ellipsis; white-space: nowrap; }
.continue-learning-copy .actions { margin-top: 22px; }
.continue-learning-hero .button.primary { color: var(--brand-dark); background: var(--brand-on-dark); box-shadow: none; }
.continue-learning-hero .button.secondary { color: var(--brand-on-dark); border-color: color-mix(in srgb, var(--brand-on-dark) 28%, transparent); background: color-mix(in srgb, var(--surface) 8%, transparent); }
.continue-learning-progress { display: grid; align-content: center; justify-items: center; gap: 24px; padding: 22px; border: 1px solid color-mix(in srgb, var(--brand-on-dark) 18%, transparent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand-dark) 42%, transparent); }
.progress-ring {
  display: grid;
  place-content: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, var(--brand-dark) 79%, transparent 80% 99%),
    conic-gradient(var(--accent-line) var(--progress), color-mix(in srgb, var(--brand-on-dark) 14%, transparent) 0);
  text-align: center;
}
.progress-ring strong { font-size: 27px; }
.progress-ring span { color: color-mix(in srgb, var(--brand-on-dark) 62%, transparent); font-size: 10px; }
.continue-learning-progress dl { display: grid; gap: 12px; width: 100%; margin: 0; }
.continue-learning-progress dl div { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--brand-on-dark) 14%, transparent); }
.continue-learning-progress dt { color: color-mix(in srgb, var(--brand-on-dark) 56%, transparent); font-size: 10px; }
.continue-learning-progress dd { margin: 0; font-size: 11px; font-weight: 800; text-align: right; }
.student-home-priority-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.home-feedback-card,
.home-character-card { display: grid; gap: 16px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.home-feedback-card > header,
.home-character-card > header { display: flex; justify-content: space-between; gap: 12px; }
.home-feedback-card > header a,
.home-character-card > header a { color: var(--brand); font-size: 11px; font-weight: 800; }
.feedback-score { justify-self: start; padding: 8px 11px; border-radius: 999px; color: var(--evidence); background: var(--evidence-soft); font-size: 12px; font-weight: 850; }
.home-feedback-card h2 { margin: 0; font-size: 22px; }
.home-feedback-card blockquote { margin: 0; padding: 15px 17px; border-left: 3px solid var(--evidence); background: var(--surface-warm); color: var(--text-2); line-height: 1.75; }
.home-feedback-card > a { align-self: end; color: var(--brand); font-size: 12px; font-weight: 800; }
.home-character-card > div:not(.home-inline-empty) { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; }
.home-character-card img { width: 132px; height: 165px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-warm); }
.home-character-card div > span { display: grid; align-content: start; gap: 6px; }
.home-character-card small { color: var(--bronze); font-weight: 800; }
.home-character-card h2 { margin: 0; font-family: var(--font-reading); font-size: 26px; }
.home-character-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--text-2); font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.home-character-card div > span > a { align-self: end; color: var(--brand); font-size: 12px; font-weight: 800; }
.home-inline-empty { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: center; min-height: 150px; }
.home-inline-empty > svg { width: 36px; height: 36px; fill: none; stroke: var(--muted); stroke-width: 1.5; }
.home-inline-empty h2,
.home-inline-empty p { margin: 0; }
.home-inline-empty p { color: var(--muted); }
.home-secondary-section { padding-top: 8px; }
.home-secondary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-secondary-grid > a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 90px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.home-secondary-grid > a:hover { transform: translateY(-2px); border-color: var(--brand); }
.home-secondary-grid svg { width: 28px; height: 28px; fill: none; stroke: var(--brand); stroke-width: 1.6; }
.home-secondary-grid span { display: grid; gap: 4px; min-width: 0; }
.home-secondary-grid small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1180px) {
  .character-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .character-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-filter-bar .character-search { grid-column: span 2; }
  .character-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .character-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .character-profile-panel { position: static; }
  .character-detail-layout { grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); }
  .continue-learning-hero { grid-template-columns: minmax(0, 1fr) 220px; }
}

@media (max-width: 767px) {
  .character-directory-hero,
  .continue-learning-hero,
  .character-detail-layout,
  .student-home-priority-grid { grid-template-columns: 1fr; }
  .directory-count { justify-items: start; }
  .character-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-detail-portrait { aspect-ratio: 4 / 3; }
  .character-detail-portrait img { object-position: center 24%; }
  .continue-learning-progress { grid-template-columns: 140px minmax(0, 1fr); justify-items: stretch; }
  .home-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .character-directory-page,
  .character-detail-page,
  .student-learning-home { gap: 22px; }
  .character-directory-hero,
  .continue-learning-hero { padding: 28px 22px; border-radius: 18px; }
  .character-filter-bar { grid-template-columns: 1fr; padding: 14px; }
  .character-filter-bar .character-search { grid-column: 1; }
  .character-filter-bar .button { width: 100%; min-height: var(--touch-target); }
  .character-card-grid { gap: 10px; }
  .character-card-body { gap: 9px; padding: 13px; }
  .character-card-status { align-items: flex-start; flex-direction: column; }
  .character-card-status > span { margin: 0; }
  .character-card h2 { font-size: 19px; }
  .character-card-body > p { display: none; }
  .character-card footer { border: 0; padding-top: 0; }
  .character-card footer span { display: none; }
  .character-card footer a { min-height: var(--touch-target); display: flex; align-items: center; }
  .portrait-period { right: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 6px 8px; }
  .character-task-preview,
  .character-profile-copy { padding: 20px; }
  .character-task-preview > header,
  .character-source-section .split-heading { align-items: flex-start; flex-direction: column; }
  .character-activity-summary,
  .character-source-grid { grid-template-columns: 1fr; }
  .question-chip-list { display: grid; }
  .question-chip-list button { width: 100%; }
  .continue-next-task em { white-space: normal; }
  .continue-learning-progress { grid-template-columns: 1fr; }
  .continue-learning-progress .progress-ring { justify-self: center; }
  .continue-learning-copy .actions { align-items: stretch; flex-direction: column; }
  .continue-learning-copy .actions .button { width: 100%; }
  .home-character-card > div:not(.home-inline-empty) { grid-template-columns: 96px minmax(0, 1fr); }
  .home-character-card img { width: 96px; height: 120px; }
  .home-secondary-grid { grid-template-columns: 1fr; }
  .home-secondary-grid > a { min-height: var(--touch-target); }
}

@media (prefers-reduced-motion: reduce) {
  .character-card:hover,
  .character-card:focus-within,
  .character-card:hover .character-portrait-link img,
  .character-source-grid > a:hover,
  .home-secondary-grid > a:hover,
  .question-chip-list button:hover { transform: none; }
}