/* The Learn page: findings, the live forgetting curve, the principles with
   per-track examples, and the evidence bars. Chart colours: --kept is the
   reviewed card (the accent, one step darker in dark mode so it stays in the
   chart lightness band), --alone the card left alone (recessive grey). */

.learn { --kept: var(--accent); --alone: var(--faint); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .learn { --kept: oklch(0.66 0.14 285); }
}
:root[data-theme="dark"] .learn { --kept: oklch(0.66 0.14 285); }

.learn-hero .lede { max-width: 42rem; margin-top: 0.75rem; font-size: 1.12rem; color: var(--fg-soft); }
.learn-hero .lede p:last-child { margin-bottom: 0; }
.learn .section-title { font-size: var(--text-xl); margin: 3rem 0 1rem; }

/* --- headline findings -------------------------------------------------- */
.findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem; margin: 0 0 2rem; }
.finding { margin: 0; padding: 1.1rem 1.2rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); }
.finding-value { font: 650 2rem/1.1 var(--font-ui); letter-spacing: -0.02em; color: var(--fg); margin-bottom: 0.45rem; }
.finding figcaption { font-size: var(--text-sm); color: var(--fg-soft); }
.finding cite { display: block; margin-top: 0.45rem; font-style: normal; font-size: var(--text-xs); color: var(--faint); }

/* --- the forgetting curve ------------------------------------------------ */
.curve-panel { padding: 1.4rem 1.5rem 1.2rem; }
.curve-panel > h2 { font-size: var(--text-lg); margin-bottom: 0.4rem; }
.curve-control { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0.9rem 0 0.2rem; }
.curve-control label { font: 500 var(--text-sm)/1.2 var(--font-ui); }
.curve-control input { flex: 1 1 12rem; max-width: 24rem; }
.curve-readout { margin: 0.6rem 0 0.8rem; font-size: var(--text-md); }
.curve-note { font-size: var(--text-xs); margin: 0.6rem 0 0; }
#curve-body.htmx-request { opacity: 0.6; transition: opacity var(--dur-2); }

.curve-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: var(--text-xs); color: var(--muted); }
.curve-legend .key { display: inline-flex; align-items: center; gap: 0.45rem; }
.curve-legend i { display: inline-block; width: 1.1rem; height: 2px; border-radius: 1px; background: var(--kept); }
.curve-legend .alone i { background: var(--alone); }

.curve-chart { margin: 0.4rem 0 0; padding: 0.9rem 3.6rem 1.9rem 2.5rem; }
.plot { position: relative; height: clamp(190px, 30vw, 290px); }
.plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plot .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plot .target { stroke: var(--kept); stroke-opacity: 0.4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.plot .kept-area { fill: var(--kept); fill-opacity: 0.1; }
.plot .kept-line, .plot .alone-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; }
.plot .kept-line { stroke: var(--kept); }
.plot .alone-line { stroke: var(--alone); }
.y-tick, .x-tick, .end-label { position: absolute; font-size: 0.7rem; line-height: 1; white-space: nowrap;
  color: var(--faint); font-variant-numeric: tabular-nums; }
.y-tick { right: calc(100% + 0.5rem); top: var(--y); transform: translateY(-50%); }
.x-tick { top: calc(100% + 0.55rem); left: var(--x); transform: translateX(-50%); }
.x-tick.last { transform: translateX(-100%); }
.end-label { left: calc(100% + 0.5rem); top: var(--y); transform: translateY(-50%); font-weight: 600; color: var(--muted); }
.end-label.aim { color: var(--accent-text); }

/* Review markers: 10px, a 2px ring in the surface colour, a 24px hit area
   and a tooltip on hover or keyboard focus. */
.review-dot { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--kept); box-shadow: 0 0 0 2px var(--card);
  transition: transform var(--dur-1) var(--ease-out); }
.review-dot::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.review-dot::after { content: attr(data-tip); position: absolute; z-index: 3; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%); padding: 0.3rem 0.55rem; border-radius: var(--r-sm); background: var(--fg); color: var(--bg);
  font: 500 0.72rem/1.3 var(--font-ui); white-space: nowrap; box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease-out); }
.review-dot.start::after { left: -6px; transform: none; }
.review-dot.end::after { left: auto; right: -6px; transform: none; }
.review-dot:hover, .review-dot:focus-visible { transform: scale(1.3); outline: none; }
.review-dot:hover::after, .review-dot:focus-visible::after { opacity: 1; }

.curve-table summary, .predict summary { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
  list-style: none; font: 500 var(--text-sm)/1.4 var(--font-ui); color: var(--accent-text); }
.curve-table summary::-webkit-details-marker, .predict summary::-webkit-details-marker { display: none; }
.curve-table summary .icon, .predict summary .icon { transition: transform var(--dur-2) var(--ease-out); }
.curve-table[open] summary .icon, .predict details[open] summary .icon { transform: rotate(90deg); }
.curve-table table { margin-top: 0.5rem; font-size: var(--text-sm); }

/* --- track picker: sticks while you read the principles ------------------ */
.track-pick { position: sticky; top: 0.75rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.25rem; margin: 0 0 1.2rem; padding: 0.35rem 0.4rem 0.35rem 0.9rem; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--shadow-1);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.track-intro { margin-right: 0.4rem; font-size: var(--text-sm); color: var(--muted); }
.track-pick label { position: relative; }
.track-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.track-pick label span { display: inline-block; padding: 0.3rem 0.8rem; border-radius: var(--r-pill);
  font: 500 var(--text-sm)/1.4 var(--font-ui); color: var(--muted);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.track-pick label:hover span { color: var(--fg); background: var(--hover); }
.track-pick input:checked + span { color: var(--fg); background: var(--card); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.track-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

.learn:has(.track-pick input[value="humanities"]:checked) .ex:not([data-track="humanities"]),
.learn:has(.track-pick input[value="sciences"]:checked) .ex:not([data-track="sciences"]),
.learn:has(.track-pick input[value="professional"]:checked) .ex:not([data-track="professional"]),
.learn:has(.track-pick input[value="languages"]:checked) .ex:not([data-track="languages"]) { display: none; }

/* --- principles ------------------------------------------------------------ */
.principle { margin-bottom: 1.1rem; padding: 1.5rem 1.6rem 1.2rem; scroll-margin-top: 5rem; }
.principle-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: start;
  margin-bottom: 1rem; }
.principle-num { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text); font: 600 1rem/1 var(--font-read); }
.principle h3 { font-size: var(--text-lg); }
.principle .hook { margin: 0.25rem 0 0; color: var(--muted); }

.predict { margin-bottom: 1.1rem; padding: 0.9rem 1rem; border-radius: var(--r); background: var(--sunken); }
.predict-q .eyebrow { display: block; margin-bottom: 0.35rem; color: var(--accent-text); }
.predict-q p:last-child, .predict-a p:last-child { margin-bottom: 0; }
.predict details { margin-top: 0.55rem; }
.predict-a { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--line);
  animation: rise-in var(--dur-3) var(--ease-out); }

.idea { font-size: 1.02rem; }

/* Evidence bars: the GRANIT way in the accent, the usual way in grey; every
   bar labelled, so colour is never the only cue. */
.evidence-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem 1.8rem;
  margin: 0.2rem 0 0.5rem; }
.bar-group-name { font: 600 0.7rem/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 0.2rem; }
.bar-row { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) 2.6rem; align-items: center;
  gap: 0.6rem; margin-top: 0.4rem; font-size: var(--text-sm); }
.bar-label { color: var(--fg-soft); }
.bar-track { display: block; height: 14px; }
.bar-fill { display: block; height: 100%; width: var(--v); border-radius: 0 4px 4px 0; background: var(--alone);
  animation: bar-grow 0.9s var(--ease-out) both; }
.ours .bar-fill { background: var(--kept); }
.bar-value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
@keyframes bar-grow { from { width: 0; } }

.evidence-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin: 0.2rem 0 0.3rem; }
.stat-value { font: 650 2rem/1.1 var(--font-ui); letter-spacing: -0.02em; }

.source { font-size: var(--text-xs); margin: 0.5rem 0 1.1rem; }
.source p { margin: 0; }

.ex { margin-bottom: 1rem; padding: 0.15rem 0 0.15rem 0.9rem; border-left: 3px solid var(--accent-line);
  animation: fade-in var(--dur-3) var(--ease-out); }
.ex .eyebrow { margin-bottom: 0.3rem; }
.ex .reading p:last-child { margin-bottom: 0; }

.in-granit { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.8rem; margin-top: 0.3rem;
  padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.in-granit .mark { width: 22px; height: 22px; border-radius: 5px; flex: none; }
.in-granit p { flex: 1 1 16rem; margin: 0; color: var(--fg-soft); }

/* --- myths and keeping it ------------------------------------------------- */
.myth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem; }
.myth h3 { margin-bottom: 0.4rem; }
.myth .reading { font-size: var(--text-sm); color: var(--fg-soft); }
.myth .reading p:last-child { margin-bottom: 0; }
.keep { margin-top: 2.5rem; display: grid; justify-items: start; gap: 0.5rem; }
.keep > h2 { margin-bottom: 0.2rem; }
.keep p { margin: 0; max-width: 40rem; }
.keep form { margin-top: 0.4rem; }

@media (max-width: 760px) {
  .track-pick { top: 3.4rem; }  /* below the menu button */
  .principle { padding: 1.15rem 1.1rem 1rem; }
  .curve-panel { padding: 1.15rem 1.1rem 1rem; }
  .curve-chart { padding-right: 3.1rem; }
}