/* Lumen · exploration personnelle. Loaded after style.css. */

:root {
  --lumen-paper: #fffaf0;
  --lumen-reading: 70ch;
  --lumen-soft-line: #3c6267;
}

/* Generous targets and legible support text, including compact controls. */
button, input:not([type="checkbox"]):not([type="radio"]), select,
.primary, .secondary, .ghost, summary {
  min-height: 44px;
}
button, a, input, select, textarea, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
textarea { font: inherit; color: var(--ink); }
button, .primary, .secondary, .ghost { white-space: normal; }
.switch { display: flex; align-items: center; width: 52px; min-height: 44px; }
.rating button, .profilebtn { min-width: 44px; min-height: 44px; }
.page, .page-intro, .card, .grid2 > *, .grid3 > *, .experiment { min-width: 0; }
.hero-copy .under-note { font-size: .83rem !important; line-height: 1.55; }
.field-hint {
  display: block;
  max-width: var(--lumen-reading);
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.65;
  margin: 8px 0 0;
}
.field-hint + .field-hint { margin-top: 5px; }

/* A quiet companion: present at transitions, never over a measured stimulus. */
.guide-note {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px 22px;
  margin: 22px 0;
  border: 1px solid #548078;
  border-radius: 20px;
  background: linear-gradient(125deg, #183f43, #102e35);
}
.guide-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  min-height: 48px;
  border: 1px solid #e6c98278;
  border-radius: 50%;
  color: var(--gold);
  background: #274947;
  font-family: Georgia, serif;
  font-size: 1.55rem;
}
.guide-avatar svg { width: 29px; height: 29px; }
.guide-copy { min-width: 0; max-width: var(--lumen-reading); }
.guide-copy > :last-child { margin-bottom: 0; }
.guide-copy h3, .guide-copy strong { color: var(--gold); }
.guide-copy h3 { margin-bottom: 6px; font-size: 1rem; }
.guide-copy p { font-size: .95rem; line-height: 1.7; color: var(--ink); }

.journey-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 22px 0;
  counter-reset: journey;
}
.journey-steps li {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #102c33;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.4;
  counter-increment: journey;
}
.journey-steps li::before {
  content: counter(journey);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: .8rem;
}
.journey-steps li.is-current { border-color: var(--gold); color: var(--gold); background: #353f35; }
.journey-steps li.is-current::before { border-color: var(--gold); background: var(--gold); color: #173239; }
.journey-steps li.is-done { color: var(--teal); border-color: #497e74; }
.journey-steps li.is-done::before { content: "✓"; color: var(--teal); border-color: #497e74; }
.journey-steps li:has(> span:first-child)::before { display: none; }
.journey-steps li > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  min-width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .8rem;
}
.journey-steps li.is-current > span:first-child { color: #173239; border-color: var(--gold); background: var(--gold); }
.journey-steps li.is-done > span:first-child { color: var(--teal); border-color: #497e74; }

.scene-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 5vw, 44px);
  margin: 22px 0;
  border: 1px solid #6c8270;
  border-radius: var(--radius);
  background: linear-gradient(115deg, #183e43 0%, #173a40 65%, #314b43 100%);
}
.scene-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  right: -80px;
  top: -100px;
  border: 1px solid #f1ce8a3b;
  border-radius: 50%;
  box-shadow: 0 0 0 30px #f1ce8a0b, 0 0 0 60px #f1ce8a05;
  pointer-events: none;
}
.scene-kicker, .moment-tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: bold;
  letter-spacing: .07em;
  line-height: 1.55;
  color: var(--gold);
  margin: 0 0 12px;
}
.scene-title {
  font-family: Georgia, serif;
  font-size: clamp(1.65rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  max-width: 28ch;
  margin: 0 0 16px;
}
.scene-copy { max-width: 60ch; font-size: 1rem; line-height: 1.75; color: var(--ink); }
.scene-copy:last-child { margin-bottom: 0; }
.scene-banner .actions { margin-top: 22px; }
.moment-tag { padding: 6px 10px; border: 1px solid #76856a; border-radius: 8px; background: #233c37; }

.onboarding-steps, .plan-steps {
  padding-left: 1.5rem;
  margin: 18px 0;
  max-width: var(--lumen-reading);
  line-height: 1.7;
}
.onboarding-steps li, .plan-steps li { padding-left: 6px; margin: 12px 0; }
.onboarding-steps li::marker, .plan-steps li::marker { color: var(--gold); font-weight: bold; }
.onboarding-steps strong, .plan-steps strong { color: var(--ink); }
.support-ribbon {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 15px 18px;
  margin: 18px 0;
  color: var(--muted);
  background: #0b252d;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: .875rem;
  line-height: 1.6;
}
.support-ribbon > p { margin: 0; max-width: var(--lumen-reading); }
.support-ribbon strong { color: var(--ink); }

.context-options { display: flex; flex-wrap: wrap; gap: 10px; margin: 13px 0 8px; }
.context-options .chip { max-width: 100%; }
.context-options button.chip, .context-options .chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid #597c80;
  border-radius: 25px;
  background: #123039;
  color: var(--ink);
  text-align: center;
  line-height: 1.4;
  font-size: .92rem;
}
.context-options button.chip.active, .context-options .chip.active button,
.context-options .chip button.active, .context-options button[aria-pressed="true"] {
  color: #133a38;
  background: var(--teal);
  border-color: var(--teal);
  font-weight: bold;
  box-shadow: inset 0 0 0 2px #133a3855;
}

/* The carnet describes observations; its hierarchy never implies an ability rank. */
.insight-hero {
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid #749789;
  border-radius: var(--radius);
  background: linear-gradient(130deg, #20474a, #102e35);
  margin: 22px 0;
}
.insight-status {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid #b69d66;
  border-radius: 8px;
  color: var(--gold);
  font-size: .82rem;
  font-weight: bold;
  line-height: 1.45;
  margin-bottom: 16px;
}
.insight-title {
  font-family: Georgia, serif;
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -.025em;
  max-width: 32ch;
  margin: 0 0 16px;
  color: var(--lumen-paper);
}
.insight-hero > p { max-width: var(--lumen-reading); color: var(--ink); }
.insight-hero > :last-child { margin-bottom: 0; }
.observation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.observation-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid #496b6f;
  border-radius: 18px;
  background: #102e35;
}
.observation-label { display: block; color: var(--muted); font-size: .875rem; line-height: 1.5; margin: 0 0 12px; }
.observation-value { display: block; font-family: Georgia, serif; color: var(--teal); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; margin: 0 0 12px; overflow-wrap: anywhere; }
.observation-detail { display: block; color: var(--muted); font-size: .875rem; line-height: 1.65; margin: 0; }
.evidence-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 15px 0;
  margin: 18px 0;
  border-top: 1px solid var(--lumen-soft-line);
  border-bottom: 1px solid var(--lumen-soft-line);
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.65;
}
.evidence-strip p { margin: 0; max-width: var(--lumen-reading); }
.evidence-strip strong { color: var(--ink); }
.plan-card, .next-step-card {
  padding: clamp(22px, 3.5vw, 32px);
  margin: 24px 0;
  border: 1px solid #9b996c;
  border-radius: 22px;
  background: linear-gradient(130deg, #293f3a, #153237);
}
.plan-card h3, .next-step-card h3 { color: var(--gold); font-family: Georgia, serif; font-size: 1.6rem; margin-bottom: 14px; }
.plan-card > p, .next-step-card > p { max-width: var(--lumen-reading); }
.plan-card > :last-child, .next-step-card > :last-child { margin-bottom: 0; }
.comparison-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(100px, 2fr); gap: 14px; align-items: center; margin: 18px 0; }
.comparison-label { color: var(--ink); font-size: .92rem; line-height: 1.55; }
.comparison-track { position: relative; min-width: 0; height: 12px; overflow: hidden; border-radius: 8px; background: #061e26; border: 1px solid #567278; }
.comparison-fill { display: block; height: 100%; max-width: 100%; border-radius: 6px; background: var(--teal); }
.comparison-row:nth-of-type(even) .comparison-fill { background: var(--gold); }
.session-summary { margin: 18px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: #0a2730; font-size: .92rem; line-height: 1.7; }
.session-summary > :last-child { margin-bottom: 0; }
.session-summary strong { color: var(--gold); }
.saved-plan {
  padding: 18px 20px;
  margin: 18px 0;
  border-left: 3px solid var(--teal);
  border-radius: 0 14px 14px 0;
  background: #123b3b;
  color: var(--ink);
  line-height: 1.7;
}
.saved-plan > :last-child { margin-bottom: 0; }
.insight-observation { max-width: var(--lumen-reading); font-size: 1.02rem; line-height: 1.75; color: var(--ink); }
.report-page { max-width: 1030px; margin-left: auto; margin-right: auto; }
.detail-disclosure { border: 1px solid var(--line); border-radius: 16px; padding: 0 20px; margin: 20px 0; background: #0d2931; }
.detail-disclosure > summary { padding: 14px 0; color: var(--teal); cursor: pointer; font-size: .95rem; line-height: 1.55; }
.detail-disclosure[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.detail-disclosure > :last-child:not(summary) { margin-bottom: 20px; }
.detail-disclosure p, .detail-disclosure li { line-height: 1.7; }
.home-journey { max-width: 1030px; margin: 30px auto; }
.report-only { display: none !important; }

/* Measured observations stay still, regardless of system animation preferences. */
.game-board *, .game-board *::before, .game-board *::after,
.game-bottom *, .progress-track span,
.playing *, .playing *::before, .playing *::after {
  animation: none !important;
  transition: none !important;
}
.rune-stone, .rune-stone svg, .completed-scene svg { animation: none !important; }
.game-board .option:hover:not(:disabled), .game-bottom .primary:hover { transform: none; }
.scene-banner { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  :root:not(.calm) .scene-banner { animation: lumen-scene-in 220ms ease-out both; }
}
@keyframes lumen-scene-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) {
  .context-options button.chip:hover, .context-options .chip button:hover { border-color: var(--gold); }
  .detail-disclosure > summary:hover { color: var(--gold); }
}
@media (max-width: 850px) {
  .observation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .observation-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  .guide-note { padding: 18px; gap: 12px; }
  .guide-avatar { width: 38px; min-height: 38px; flex-basis: 38px; font-size: 1.3rem; }
  .guide-avatar svg { width: 23px; height: 23px; }
  .guide-copy p { font-size: .92rem; }
  .journey-steps { gap: 8px; }
  .journey-steps li { flex-basis: 130px; padding: 10px; font-size: .82rem; }
  .observation-grid { grid-template-columns: 1fr; gap: 12px; }
  .observation-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .observation-card { padding: 20px; }
  .observation-value { font-size: 1.8rem; }
  .scene-banner, .insight-hero { padding: 24px 20px; border-radius: 20px; }
  .scene-title { font-size: 1.8rem; }
  .scene-copy { font-size: .96rem; }
  .comparison-row { grid-template-columns: 1fr; gap: 8px; margin: 20px 0; }
  .comparison-track { height: 13px; }
  .support-ribbon, .session-summary { padding: 16px; }
  .evidence-strip { gap: 9px; }
  .detail-disclosure { padding: 0 16px; }
  .plan-card .actions > button, .next-step-card .actions > button { flex: 1 1 170px; }
  .context-options { gap: 8px; }
  .context-options button.chip, .context-options .chip button { padding: 10px 13px; }
  .topbar { height: auto; min-height: 75px; padding: 12px 0; flex-wrap: wrap; }
  .topnav { flex-wrap: wrap; max-width: 100%; }
  .topnav .navbtn { font-size: .8rem; }
  .game-label, .game-bottom p, .ambient-note, .pause-text { font-size: .82rem; }
  .hero p { font-size: .98rem; }
  .hero { min-height: 670px; }
  .hero-art { top: auto; bottom: 0; height: 350px; }
  .hero-badge { bottom: 28px; }
}
@media (max-width: 370px) {
  .shell { width: calc(100% - 24px); }
  .hero { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .hero h1 { font-size: 2.7rem; }
  .hero .actions { align-items: stretch; flex-direction: column; max-width: 275px; }
  .hero .actions button { width: 100%; min-height: 46px; }
  .hero { min-height: 720px; }
  .hero-badge { right: 14px; bottom: 20px; max-width: calc(100% - 28px); }
  .guide-note { display: block; }
  .guide-avatar { margin-bottom: 12px; }
  .journey-steps li { flex-basis: 100%; }
  .card { padding: 19px 16px; }
  .game-board { padding: 22px 12px; }
  .option { padding: 13px 10px; font-size: .9rem; }
  .scene-title, .insight-title { font-size: 1.65rem; }
  .topnav .navbtn { padding-left: 9px; padding-right: 9px; }
  .tabs { flex-wrap: wrap; }
}

/* A readable, portable carnet; print is deliberately free of game chrome. */
@media print {
  @page { size: A4; margin: 16mm; }
  :root, :root.large {
    --ink: #183239;
    --muted: #3d5358;
    --bg: #fff;
    --panel: #fff;
    --line: #b7c7c8;
    --teal: #14594e;
    --gold: #625022;
    --dim: #3d5358;
    --lumen-paper: #183239;
    --lumen-soft-line: #b7c7c8;
    font-size: 10.5pt;
    background: white;
    color: #183239;
  }
  body { min-height: 0; background: white; color: #183239; }
  *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; }
  .topbar, .topnav, footer, .modal-shade, .actions, .tabs, .no-print,
  button, nav, .hero-art, .hero-badge, .map-panel, .game-board, .game-bottom,
  .guide-avatar, .journey-steps, .progress-track, .star-dust, .scene-banner::after { display: none !important; }
  .report-only { display: block !important; }
  .shell, .page, .home-journey { width: 100%; max-width: none; padding: 0; margin: 0; }
  h1 { font-size: 26pt; letter-spacing: -.025em; }
  h2 { font-size: 20pt; }
  h3 { font-size: 13pt; }
  h1, h2, h3, summary { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  p, li, td, th { color: #183239; }
  .page-intro { max-width: none; margin-bottom: 6mm; }
  .card, .guide-note, .scene-banner, .insight-hero, .observation-card,
  .plan-card, .next-step-card, .support-ribbon, .session-summary,
  .detail-disclosure, .saved-plan, .metric {
    background: white !important;
    color: #183239 !important;
    border: 1px solid #b7c7c8;
    border-radius: 0;
    padding: 5mm;
    margin-top: 4mm;
    margin-bottom: 4mm;
  }
  .scene-banner, .insight-hero, .plan-card, .next-step-card, .detail-disclosure { overflow: visible; }
  .guide-copy p, .scene-copy, .insight-hero > p,
  .plan-card h3, .next-step-card h3, .session-summary strong { color: #183239; }
  .insight-title, .scene-title { font-size: 20pt; max-width: none; }
  .insight-status, .moment-tag { color: #183239; border-color: #78928c; background: white; }
  .observation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; margin: 4mm 0; }
  .observation-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .observation-card { margin: 0; padding: 4mm; break-inside: avoid; }
  .observation-value { font-size: 17pt; color: #14594e; }
  .observation-label, .observation-detail, .field-hint, .evidence-strip, .table-note { font-size: 9pt; }
  .evidence-strip { padding: 3mm 0; margin: 4mm 0; }
  .comparison-row { break-inside: avoid; grid-template-columns: minmax(100px, 1fr) minmax(100px, 2fr); gap: 4mm; }
  .comparison-track { background: white; border-color: #78928c; }
  .comparison-fill { background: #466b63 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .table-wrap { overflow: visible; }
  table { font-size: 9pt; }
  th, td { padding: 3mm 2mm; border-color: #b7c7c8; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  a { color: #14594e; text-decoration: underline; overflow-wrap: anywhere; }
  .report-only a { font-size: 9pt; }
  .detail-disclosure > summary { border-bottom: 0; min-height: 0; padding: 0; }
  details { display: block !important; }
  details:not([open]) > :not(summary) { display: block !important; }
  details::details-content { display: block !important; content-visibility: visible !important; height: auto !important; }
}