/* ================================================================
   XP-PANEL.CSS — the Learner Home's left column (../practice/xp-panel.js):
   the course and its percentage, the week's XP, the daily bars
   (../practice/xp-charts.js). The card's two columns are laid out in
   practice/home.css.

   Seth, 2026-09-29: "in the top left it says which course you're in, and to
   the right of the left column it displays your percentage completion ...
   it just has the bar graph with your learning every day and above it it
   says how much exp you gained." So one header line — the course name set
   large on the left, the percentage as the column's one big numeral on the
   right, a hairline under both — then the week's XP and its bars.

   A quiet instrument (2026-09-27 cleanup). Inks, each with one job:
     * --xp-to     the learner's own numbers — the percentage, the bars.
                   Flat: no gradients;
     * --warn      a target, where a chart still draws one;
     * --accent    (the brand red) only on the one button that starts
                   practice, styled in practice/home.css.
   Numerals and the course name in Instrument Serif, words in the UI face in
   sentence case, IBM Plex Mono only for axis ticks. Both faces are already
   loaded from Google Fonts in index.html.

   Token-first: no hex here (styles/watch.py enforces it).
   ================================================================ */

.session-setup {
  --xp-display: "Instrument Serif", var(--prose-heading);
  --xp-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --xp-ink: var(--xp-to);
  --xp-quiet: var(--muted-dim);
}

.learner-xp { min-width: 0; }
.learner-xp.is-empty { display: none; }

/* ---- the course, and how far into it ---------------------------------- */

.xp-course {
  align-items: flex-end;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
}
.xp-course-id { min-width: 0; }
.xp-course-name {
  color: var(--white);
  font-family: var(--xp-display);
  font-size: clamp(34px, 4.2vw, 44px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
  overflow-wrap: anywhere;
}
/* "Practising" + "+ 2 other courses · View" (../practice/home-courses.js,
   Seth 2026-10-06): the name is the course you are in, not always ARENA. */
.xp-course-eyebrow {
  color: var(--xp-to);
  font: 500 11px/1.4 var(--xp-mono);
  letter-spacing: 0.12em;
  margin: 0 0 6px;
  text-transform: uppercase;
}
.xp-course-more {
  align-items: baseline;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13.5px;
  gap: 4px 10px;
  margin: 8px 0 0;
}
.xp-course-view {
  background: none;
  border: 0;
  color: var(--xp-to);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: rgb(var(--xp-glow-rgb) / 0.45);
  text-underline-offset: 3px;
}
.xp-course-view:hover { text-decoration-color: currentColor; }
.xp-course-view:focus-visible { outline: 2px solid var(--xp-to); outline-offset: 2px; border-radius: 2px; }
.xp-course-pct[hidden] { display: none; }
.xp-course-sub {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 0;
}
.xp-course-pct {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
}
.xp-course-pct-num {
  color: var(--xp-ink);
  font-family: var(--xp-display);
  font-size: clamp(44px, 5.4vw, 58px);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
  line-height: 0.9;
}
.xp-course-pct-label {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

/* ---- today toward the daily target (../practice/xp-target.js) ---------- */

.xp-goal { margin: 0 0 18px; }
.xp-goal-head {
  align-items: baseline;
  color: var(--text);
  display: flex;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  justify-content: space-between;
  margin-bottom: 6px;
}
.xp-goal-pct { color: var(--warn); font-family: var(--xp-mono); font-size: 12px; }
.xp-goal-bar {
  background: rgb(var(--tint-rgb) / calc(0.08 * var(--tint-k)));
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.xp-goal-fill {
  background: var(--warn);
  border-radius: inherit;
  height: 100%;
  transition: width 0.25s ease;
  width: 0;
}
.xp-goal.is-unset .xp-goal-head { color: var(--muted); }
.xp-goal-finish {
  color: var(--muted);
  font-size: 13px;
  margin: 10px 0 0;
}
.xp-goal-pick { display: inline-block; position: relative; }
.xp-goal-date {
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--warn);
  color: var(--white);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0 0 1px;
}
.xp-goal-date::after { color: var(--warn); content: " ▾"; font-size: 11px; }
.xp-goal-date:hover { color: var(--warn); }
.xp-goal-date:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }
/* The native date input under the button: invisible, but where its picker
   opens from. */
.xp-goal-input {
  border: 0;
  bottom: 0;
  height: 1px;
  left: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.xp-goal-note {
  color: var(--xp-quiet);
  font-size: 11.5px;
  margin: 4px 0 0;
  min-height: 1.3em;
}
.xp-goal-note.is-error { color: var(--danger); }

/* ---- the week's XP, over its bars -------------------------------------- */

.xp-gained {
  align-items: baseline;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13.5px;
  gap: 0 4px;
  margin: 0 0 12px;
}
.xp-gained-num {
  color: var(--white);
  font-family: var(--xp-display);
  font-size: 30px;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  margin-right: 2px;
}
.xp-gained-unit { color: var(--text); }
.xp-gained-today { color: var(--xp-quiet); font-variant-numeric: tabular-nums; }

/* ---- the graphs -------------------------------------------------------- */

.xp-chart + .xp-chart {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.xp-chart-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.xp-chart-title {
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.xp-chart-note {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.xp-chart-frame { width: 100%; }
.xp-bars {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

.xp-grid {
  stroke: var(--border);
  stroke-width: 1;
}
.xp-floor { stroke: var(--border-strong); stroke-width: 1; }
.xp-axis {
  fill: var(--xp-quiet);
  font-family: var(--xp-mono);
  font-size: 10px;
}
.xp-axis.is-now { fill: var(--text); }
/* Mon–Sun: days of the week still to come (Seth 2026-10-01). */
.xp-axis.is-ahead { opacity: 0.45; }
.xp-hatch-ink { fill: var(--xp-ink); }

.xp-bar-hit { fill: transparent; }
.xp-bar:hover .xp-bar-hit { fill: rgb(var(--tint-rgb) / calc(0.04 * var(--tint-k))); }
.xp-bar-fill {
  fill: var(--xp-ink);
  opacity: 0.88;
  transition: opacity 0.15s;
}
.xp-bar:hover .xp-bar-fill { opacity: 1; }
/* Today is provisional: hatched. In CSS, since a stylesheet `fill` beats the
   SVG attribute. */
.xp-bar.is-today .xp-bar-fill { fill: url(#xp-hatch); opacity: 1; stroke: var(--xp-ink); stroke-width: 1; }

.xp-target-line {
  stroke: var(--warn);
  stroke-dasharray: 4 4;
  stroke-width: 1.25;
  opacity: 0.8;
}
.xp-target-label {
  fill: var(--warn);
  font-family: var(--xp-mono);
  font-size: 10px;
  /* A halo in the card colour keeps the label legible where it crosses a bar. */
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* The target's knob (drag: ../practice/xp-target.js). */
.xp-target-knob { cursor: ns-resize; outline: none; touch-action: none; }
.xp-target-knob-hit { fill: transparent; }
.xp-target-knob-dot {
  fill: var(--warn);
  stroke: var(--surface);
  stroke-width: 2;
  transition: r 0.12s;
}
.xp-target-knob-grip { fill: none; stroke: var(--surface); stroke-width: 1.2; stroke-linecap: round; }
.xp-target-knob:hover .xp-target-knob-dot,
.xp-bars.is-dragging .xp-target-knob-dot { r: 8; }
.xp-target-knob:focus-visible .xp-target-knob-hit { stroke: var(--warn); stroke-width: 1.5; }
.xp-bars.is-dragging { cursor: ns-resize; user-select: none; }
.xp-bars.is-dragging .xp-target-line { opacity: 1; }
/* No target saved yet: the line is a faint suggestion until it is moved. */
.xp-bars.is-target-unset .xp-target-line,
.xp-bars.is-target-unset .xp-target-label { opacity: 0.4; }

.xp-readout {
  color: var(--xp-quiet);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 0;
  min-height: 1.4em;
}

/* ---- first paint: one staggered rise, bars growing from the floor ------ */

@keyframes xp-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes xp-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.session-setup.is-revealing .xp-panel-body > *,
.session-setup.is-revealing .home-graphs > * {
  animation: xp-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.session-setup.is-revealing .xp-panel-body > :nth-child(2) { animation-delay: 70ms; }
.session-setup.is-revealing .home-graphs > :nth-child(2) { animation-delay: 90ms; }
.session-setup.is-revealing .home-graphs > :nth-child(3) { animation-delay: 180ms; }
.session-setup.is-revealing .xp-bar-fill {
  animation: xp-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(160ms + var(--i, 0) * 14ms);
  transform-box: fill-box;
  transform-origin: bottom;
}

@media (prefers-reduced-motion: reduce) {
  .session-setup *,
  .session-setup.is-revealing * {
    animation: none !important;
    transition: none !important;
  }
}