/* Learning support on the home and subject learning lists. */
.learning-coach {
  --learning-coach-surface: var(--color-surface);
  --learning-coach-border: var(--color-surface);
  --learning-coach-character-size: 60px;
  --learning-coach-character-size-mobile: 56px;
  --learning-coach-character-filter: none;
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 1020;
  width: var(--learning-coach-character-size);
  height: var(--learning-coach-character-size);
  pointer-events: none;
  color: var(--color-text-strong);
  font-family: inherit;
}
.learning-coach[data-character-color="green"] { --learning-coach-character-filter: hue-rotate(-65deg); }
.learning-coach[data-character-color="purple"] { --learning-coach-character-filter: hue-rotate(65deg); }
.learning-coach[data-character-color="pink"] { --learning-coach-character-filter: hue-rotate(120deg); }
.learning-coach[data-character-color="orange"] { --learning-coach-character-filter: hue-rotate(180deg); }
.learning-coach[hidden], .learning-coach [hidden] { display: none !important; }
.learning-coach__bubble {
  position: absolute;
  right: 0;
  bottom: calc(100% + 18px);
  width: min(304px, calc(100vw - 24px));
  box-sizing: border-box;
  pointer-events: auto;
}
.learning-coach__bubble::before,
.learning-coach__bubble::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.learning-coach__bubble::before {
  z-index: 2;
  bottom: -16px;
  left: calc(var(--learning-coach-tail-x, 208px) - 12px);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 16px solid var(--learning-coach-border);
}
.learning-coach__bubble::after {
  z-index: 3;
  bottom: -13px;
  left: calc(var(--learning-coach-tail-x, 208px) - 9px);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid var(--learning-coach-surface);
}
.learning-coach__bubble[data-placement="below"]::before {
  top: -16px;
  bottom: auto;
  border-top: 0;
  border-bottom: 16px solid var(--learning-coach-border);
}
.learning-coach__bubble[data-placement="below"]::after {
  top: -13px;
  bottom: auto;
  border-top: 0;
  border-bottom: 14px solid var(--learning-coach-surface);
}
.learning-coach__content {
  position: relative;
  z-index: 1;
  padding: 10px 10px 8px;
  border: 2px solid var(--learning-coach-border);
  border-radius: 8px;
  background: var(--learning-coach-surface);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
  max-height: var(--learning-coach-bubble-height, min(580px, calc(100dvh - 140px)));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.learning-coach__close { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid var(--color-secondary); border-radius: 4px; background: var(--color-surface); color: var(--color-secondary); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.learning-coach__close:hover { background: var(--color-surface); color: var(--color-secondary); filter: brightness(.96); }
.learning-coach__copy { display: grid; gap: 3px; padding-right: 24px; margin-bottom: 9px; }
.learning-coach__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.learning-coach__message { margin: 0; color: var(--color-text-strong); font-size: .82rem; font-weight: 700; line-height: 1.5; }
.learning-coach__answer-count { flex-shrink: 0; color: var(--color-text-strong); font-size: .68rem; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; }
.learning-coach__answer-count > span { color: inherit; font: inherit; }
.learning-coach__total { margin: 0; color: var(--color-text-strong); font-size: .68rem; line-height: 1.6; font-variant-numeric: tabular-nums; }
.learning-coach__resume { display: block; width: 100%; margin-bottom: 8px; padding: 0; color: var(--color-text-strong); text-decoration: none; }
.learning-coach__resume:hover, .learning-coach__resume:focus { color: var(--color-text-strong); text-decoration: none; }
.learning-coach__resume-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.learning-coach__resume-title { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; max-height: 32px; margin: 0; overflow: hidden; color: var(--color-text-strong); font-size: min(.78rem, 14px); font-weight: 700; line-height: 1.1; }
.learning-coach__resume-sector, .learning-coach__resume-detail { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font: inherit; }
.learning-coach__resume-action { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 32px; padding: 6px 9px; border-radius: 6px; background: var(--color-secondary); font-size: .78rem; font-weight: 800; line-height: 1.25; }
/* The global * rule assigns a color to spans, so button text must be explicit. */
.learning-coach__resume-action, .learning-coach__resume-action * { color: var(--color-text-inverse); }
.learning-coach__resume:hover .learning-coach__resume-action { filter: brightness(.92); }
.learning-coach__resume[aria-disabled="true"] { cursor: default; }
.learning-coach__resume[aria-disabled="true"] .learning-coach__resume-action { opacity: .65; }
.learning-coach__resume[aria-disabled="true"]:hover .learning-coach__resume-action { filter: none; }
.learning-coach__toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.learning-coach__tool { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 28px; min-height: 28px; padding: 5px 7px; border: 1px solid var(--color-secondary); border-radius: 4px; background: var(--color-surface); text-decoration: none; cursor: pointer; font-size: .72rem; font-weight: 700; line-height: 1.2; }
.learning-coach__tool, .learning-coach__tool * { color: var(--color-secondary); }
.learning-coach__tool:hover { color: var(--color-secondary); text-decoration: none; filter: brightness(.96); }
.learning-coach__tool[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--color-secondary); }
.learning-coach__tool[aria-disabled="true"] { opacity: .45; cursor: default; }
.learning-coach__settings, .learning-coach__details { margin-top: 10px; border-top: 1px solid var(--color-secondary); padding-top: 10px; font-size: .75rem; }
.learning-coach__panel-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px; margin: 0 0 6px; color: var(--color-text-strong); font-size: .78rem; font-weight: 700; }
.learning-coach__panel-title span { color: var(--color-text-strong); font-size: .62rem; font-weight: 400; }
.learning-coach__legend { display: grid; gap: 4px; margin-top: 8px; }
.learning-coach__legend p { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .65rem; line-height: 1.5; }
.learning-coach__legend p span { color: var(--color-text-strong); }
.learning-coach__swatch { flex-shrink: 0; width: 17px; border-top: 3px solid; }
.learning-coach__swatch--previous { border-color: var(--color-muted); }
.learning-coach__swatch--current { border-color: var(--color-success); }
.learning-coach__swatch--target { border-top: 2px dashed var(--color-text-strong); }
.learning-coach__chart { margin-top: 8px; }
.learning-coach__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.learning-coach__chart-label { fill: var(--color-text-strong); font-size: 10px; font-family: inherit; font-variant-numeric: tabular-nums; }
.learning-coach__chart-grid { stroke: var(--color-border-soft); stroke-width: .6; }
.learning-coach__chart-target { stroke: var(--color-text-strong); stroke-width: 1.2; stroke-dasharray: 5 4; }
.learning-coach__chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.learning-coach__chart-line--previous { stroke: var(--color-muted); }
.learning-coach__chart-line--current { stroke: var(--color-success); }
.learning-coach__chart-point--previous { fill: var(--color-muted); }
.learning-coach__chart-point--current { fill: var(--color-success); }
.learning-coach__character-settings { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.learning-coach__character-settings legend { float: none; width: auto; margin: 0 0 7px; padding: 0; color: var(--color-text-strong); font-size: .72rem; font-weight: 700; }
.learning-coach__character-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.learning-coach__character-option { position: relative; min-width: 0; cursor: pointer; }
.learning-coach__character-option input { position: absolute; z-index: 1; top: 8px; left: 8px; width: 14px; height: 14px; margin: 0; accent-color: var(--color-secondary); cursor: pointer; }
.learning-coach__character-option-body { display: grid; justify-items: center; align-content: start; gap: 4px; height: 100%; box-sizing: border-box; padding: 8px 5px; border: 1px solid var(--color-border-soft); border-radius: 4px; background: var(--color-surface); }
.learning-coach__character-option-body > span { color: var(--color-text-strong); font-size: .68rem; line-height: 1.4; text-align: center; }
.learning-coach__character-option input:checked + .learning-coach__character-option-body { border-color: var(--color-secondary); box-shadow: inset 0 0 0 1px var(--color-secondary); }
.learning-coach__character-option input:focus-visible + .learning-coach__character-option-body { outline: 2px solid var(--color-text-strong); outline-offset: 2px; }
.learning-coach__character-preview { display: block; width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; pointer-events: none; filter: var(--learning-coach-character-filter); }
.learning-coach__appearance-settings { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.learning-coach__appearance-settings > legend { float: none; width: auto; margin: 0 0 8px; padding: 0; color: var(--color-text-strong); font-size: .72rem; font-weight: 700; }
.learning-coach__colors { min-width: 0; margin: 0; padding: 0; border: 0; }
.learning-coach__colors legend { float: none; width: auto; margin: 0 0 7px; padding: 0; color: var(--color-text-strong); font-size: .68rem; }
.learning-coach__color-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.learning-coach__color-option { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 4px 0; cursor: pointer; }
.learning-coach__color-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.learning-coach__color-option > span:last-child { color: var(--color-text-strong); font-size: .6rem; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.learning-coach__color-swatch { display: block; width: 28px; height: 28px; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; }
.learning-coach__color-swatch--blue { background: #277fa8; }
.learning-coach__color-swatch--green { background: #279866; }
.learning-coach__color-swatch--purple { background: #825cc5; }
.learning-coach__color-swatch--pink { background: #d16a96; }
.learning-coach__color-swatch--orange { background: #c98531; }
.learning-coach__color-option input:checked + .learning-coach__color-swatch { outline: 2px solid var(--color-text-strong); outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--color-surface); }
.learning-coach__color-option input:focus-visible + .learning-coach__color-swatch { outline: 3px solid var(--color-text-strong); outline-offset: 3px; }
.learning-coach__appearance-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 10px; }
.learning-coach__size-control { display: grid; gap: 5px; min-width: 0; margin-top: 10px; }
.learning-coach__size-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.learning-coach__size-title label, .learning-coach__size-title output { margin: 0; color: var(--color-text-strong); font-size: .68rem; }
.learning-coach__size-title output { font-variant-numeric: tabular-nums; }
.learning-coach__size-control input[type="range"] { display: block; width: 100%; min-width: 0; height: 32px; margin: 0; padding: 0; accent-color: var(--color-secondary); cursor: pointer; }
.learning-coach__movement-label { display: grid; gap: 6px; min-width: 0; color: var(--color-text-strong); font-size: .75rem; }
.learning-coach__movement-label select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid var(--color-muted); border-radius: 4px; background: var(--color-surface); color: var(--color-text-strong); font-family: inherit; font-size: 1rem; line-height: 1.5; }
.learning-coach__movement-label option { color: var(--color-text-strong); font-size: 1rem; }
.learning-coach__motion-label { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; cursor: pointer; }
.learning-coach__motion-label input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-secondary); }
.learning-coach__motion-label span { color: var(--color-text-strong); font-size: .68rem; }
.learning-coach__reset { width: 100%; margin-top: 12px; padding: 7px 9px; border: 1px solid var(--color-secondary); border-radius: 4px; background: var(--color-surface); color: var(--color-secondary); font: inherit; font-size: .68rem; cursor: pointer; }
.learning-coach__reset:hover { filter: brightness(.96); }
.learning-coach__fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 10px; margin-top: 8px; }
.learning-coach__fields label { grid-column: 1 / -1; display: block; color: var(--color-text-strong); font-size: .75rem; }
.learning-coach__goal-hint { grid-column: 1 / -1; margin: 0; color: var(--color-text-strong); font-size: .68rem; line-height: 1.6; }
.learning-coach__fields input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: 8px 10px; border: 1px solid var(--color-muted); border-radius: 4px; background: var(--color-surface); color: var(--color-text-strong); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.learning-coach__daily-average { display: flex; align-items: center; min-height: 48px; color: var(--color-text-strong); font-size: .68rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.learning-coach__goal-error { margin: 6px 0 0; color: var(--color-danger-text, #b42318); font-size: .68rem; line-height: 1.5; }
.learning-coach__notice { margin: 10px 0 0; color: var(--color-text-strong); font-size: .71rem; line-height: 1.6; }
.learning-coach__character { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: var(--learning-coach-character-filter); cursor: pointer; pointer-events: auto; }
.learning-coach__character { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; cursor: grab; }
.learning-coach[data-dragging="true"] .learning-coach__character { cursor: grabbing; }
.learning-coach__character-visual { position: relative; display: block; width: 100%; height: 100%; pointer-events: none; transform-origin: 50% 72%; }
/* Body motion stays off by default; these values reflect an explicit user choice. */
.learning-coach[data-character-movement="float"] .learning-coach__character-visual { animation: learning-coach-float 4.4s ease-in-out infinite; }
.learning-coach[data-character-movement="sway"] .learning-coach__character-visual { animation: learning-coach-sway 4.8s ease-in-out infinite; }
.learning-coach[data-animation-paused="true"] .learning-coach__character-visual,
.learning-coach[data-dragging="true"] .learning-coach__character-visual { animation-play-state: paused; }
@keyframes learning-coach-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes learning-coach-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.learning-coach__character-image { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.learning-coach__eye-layer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; shape-rendering: crispEdges; }
.learning-coach[data-blinking="true"] .learning-coach__eye-layer { opacity: 1; }
.learning-coach[data-character-motion="false"] .learning-coach__eye-layer { display: none; }
@media (prefers-reduced-motion: reduce) {
  .learning-coach__eye-layer { display: none; }
}
.learning-coach button:focus-visible, .learning-coach a:focus-visible, .learning-coach summary:focus-visible, .learning-coach input:focus-visible, .learning-coach select:focus-visible { outline: 3px solid var(--color-text-strong); outline-offset: 3px; }
@media (max-width: 480px) {
  .learning-coach { right: max(12px, env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom)); width: var(--learning-coach-character-size-mobile); height: var(--learning-coach-character-size-mobile); }
  body.learning-coach-visible footer { padding-bottom: calc(1.5rem + 90px + env(safe-area-inset-bottom)) !important; }
}