/* Insights page. It wears Home's own furniture rather than a copy of it:
   home-profile-strip.css draws the header row (photo, name, the four Skill
   rings, the Overall tile) and paints the canvas; home-task-map.css draws the
   container, the two-column grid, the cards, their spaced-capital heads and
   the rows with the grey pill. This sheet only adds what Home has no part
   for: the journey rings, the target editor, the calendar. Tokens only. */
.insights-page:focus { outline: none; }
.insights-page:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: -2px; }

/* The Overall card wears the Overall tile's purple. */
.home-task-map-group[data-skill="overall"] {
  --home-map-skill: var(--chrome-accent);
  --home-map-skill-ink: var(--chrome-accent);
}

/* The top row and the Skill cards are two of Home's grids, one above the other. */
.insights-board > .home-task-map-groups + .home-task-map-groups { margin-top: clamp(14px, 2.1cqi, 22px); }
/* Home's dashboard (home-dashboard.js): each section is a slot of its own in
   the board, so the same gap goes between slots and between a slot's grids. */
.insights-board > [data-dashboard-section]:empty { display: none; }
.insights-board > [data-dashboard-section]:not(:empty) ~ [data-dashboard-section] > :first-child,
.insights-board > [data-dashboard-section] > * + * { margin-top: clamp(14px, 2.1cqi, 22px); }
/* The Task map below brings its own top padding. */
.home-dashboard-board { padding-bottom: 0; }
.insights-card-body { padding: 16px clamp(14px, 1.8cqi, 18px); }
.insights-card-body:empty { display: none; }
/* A Skill card: the score part, then its Tasks under a hairline. */
.insights-card > .insights-tasks { border-top: 1px solid var(--chrome-line-soft); }
.insights-card .home-task-map-tasks { padding: 4px 0; }
.insights-card .home-task-map-tasks li[hidden] { display: none; }
/* Show all N Tasks / Show fewer: a full-width 44px row closing the card. */
.insights-more {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 16px;
  border: 0; border-top: 1px solid var(--chrome-line-soft);
  border-radius: 0 0 var(--chrome-radius-card) var(--chrome-radius-card);
  background: none; color: var(--home-map-skill-ink, var(--chrome-ink-muted));
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.insights-more:hover { background: var(--home-map-accent-tint, var(--chrome-accent-tint)); }
.insights-more:focus-visible { outline: 2px solid var(--home-map-accent, var(--chrome-accent)); outline-offset: -2px; }
.insights-more[aria-expanded="true"] .insights-chevron { transform: rotate(180deg); }
/* A row's Task name wraps rather than push the pill off a phone. */
@media (max-width: 520px) { .insights-row { flex-wrap: wrap; row-gap: 2px; } .insights-row .home-task-map-task-name { flex: 1 1 0; } }

/* A row's quiet second fact (strong / weak), between the name and the pill. */
.insights-row-meta { margin-left: auto; color: var(--chrome-ink-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.insights-row-meta + .home-task-map-task-count { margin-left: 0; }

.insights-welcome-lead { margin: 0 0 6px; color: var(--chrome-ink); font-size: 18px; font-weight: 700; }
.insights-journey-button.is-static { cursor: default; }
.insights-journey:has(.is-static):hover { background: none; }

.insights-skill { --insights-skill: var(--skill-dot-speaking); }
.insights-skill.writing { --insights-skill: var(--skill-dot-writing); }
.insights-skill.reading { --insights-skill: var(--skill-dot-reading); }
.insights-skill.listening { --insights-skill: var(--skill-dot-listening); }

.insights-skill.speaking { --insights-label: var(--skill-label-speaking); }
.insights-skill.writing { --insights-label: var(--skill-label-writing); }
.insights-skill.reading { --insights-label: var(--skill-label-reading); }
.insights-skill.listening { --insights-label: var(--skill-label-listening); }

.insights-page { --insights-skill: var(--brand-purple); }

.insights-ring.score-ring {
  --ring-size: var(--insights-ring-size, 64px);
  --ring-color: var(--insights-skill);
  --ring-track: var(--border);
  --ring-hole: var(--surface);
  --ring-chip: var(--surface);
}

.insights-ring.score-ring.is-empty { --ring-color: var(--border); }

/* The "when you started" ring is quieter: a washed-out arc, smaller figure. */
.insights-ring.score-ring.is-before:not(.is-empty) {
  --ring-color: color-mix(in srgb, var(--insights-skill) 40%, var(--surface));
  color: var(--ink-muted);
}

/* Journey row: a div holding the rings and a heading whose button stretches
   over the whole row. The "when you started" ring is its own button above it. */
.insights-journey-title { margin: 0; font-size: inherit; }

.insights-journey {
  --insights-ring-size: 64px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "rings" "bar";
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: 10px;
  color: var(--ink);
}

.insights-journey:hover { background: var(--surface-sunken); }

.insights-journey-title { grid-area: head; min-width: 0; }
.insights-journey > .insights-toggle { grid-area: bar; }

.insights-journey-button {
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.insights-journey-button:focus-visible { outline: none; }
.insights-journey:has(.insights-journey-button:focus-visible) > .insights-toggle { outline: 3px solid var(--brand-purple); outline-offset: 2px; }
.insights-journey-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* The score row is one line of rings joined by arrows: the first Exercises
   on the far left, Now in the middle, the Target on the far right. The two
   arrow columns share what the rings leave, so the arrows are one length.
   The ring columns differ by what each ring carries round it: the first ring
   sits flush with the card's left edge, Now has 4px a side, and the Target
   has 5px a side for its dashed halo, which so ends flush on the right. */
.insights-rings {
  --insights-col-now: calc(var(--insights-ring-size, 64px) + 8px);
  --insights-col-aim: calc(var(--insights-ring-size, 64px) + 10px);
  grid-area: rings;
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  align-items: start;
  justify-content: center;
  pointer-events: none;
  /* A wide card (Overall on desktop) would stretch the arrows across it. */
  width: 100%;
  max-width: 560px;
  justify-self: center;
}
.insights-rings.is-trio { grid-template-columns: var(--insights-ring-size, 64px) minmax(0, 1fr) var(--insights-col-now) minmax(0, 1fr) var(--insights-col-aim); }
/* Two rings sit in the middle, on an arrow as long as a trio's. */
.insights-rings.is-pair { grid-template-columns: var(--insights-col-now) calc(50% - var(--insights-ring-size, 64px) * 1.5 - 9px) var(--insights-col-aim); }
.insights-rings.is-pair:has(.is-before) { grid-template-columns: var(--insights-ring-size, 64px) calc(50% - var(--insights-ring-size, 64px) * 1.5 - 9px) var(--insights-col-now); }
.insights-rings > * { pointer-events: auto; }
/* Every ring column is built the same way, so the three rings share one
   centre line and their captions share one baseline: the ring with its 5px of
   halo room, then caption lines on a 16px grid. */
.insights-ring-box,
.insights-aim-button { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }
.insights-ring-box .insights-ring.score-ring,
.insights-aim-button .insights-ring.score-ring { margin: 5px 0 8px; }
.insights-ring-caption { color: var(--ink-muted); font-size: 12px; font-weight: 600; line-height: 16px; text-align: center; text-wrap: balance; }
/* The first ring's words start at the card's left edge, under the ring's own
   edge, and run on under the arrow: they are wider than the ring. */
.insights-ring-box.is-before { align-items: flex-start; }
.insights-ring-box.is-before > .insights-ring-caption,
.insights-ring-box.is-before > .insights-ring-dates { width: max-content; max-width: calc(var(--insights-ring-size, 64px) + 64px); text-align: left; }
.insights-ring-dates { color: var(--ink-muted); font-size: 12px; line-height: 16px; text-align: center; }

/* An arrow from one ring to the next, with its figure above the shaft. The
   shaft is a 2px bar that runs on under a solid head, so the two are one
   shape with no seam. Each end stops short of its ring: 8px at the tail, 6px
   at the head (the insets differ because the ring columns do, see above). */
.insights-arrow {
  --arrow-tail: 8px;
  --arrow-head: 2px;
  position: relative;
  min-width: 40px;
  height: var(--insights-ring-size, 64px);
  margin-top: 5px;
  color: var(--ink);
}
.insights-arrow.is-gap { --arrow-tail: 4px; --arrow-head: 6px; color: var(--insights-skill); }
.insights-arrow::before {
  content: "";
  position: absolute;
  left: var(--arrow-tail);
  right: calc(var(--arrow-head) + 6px);
  top: calc(50% - 1px);
  height: 2px;
  border-radius: 1px 0 0 1px;
  background: currentColor;
}
.insights-arrow::after {
  content: "";
  position: absolute;
  right: var(--arrow-head);
  top: calc(50% - 6px);
  width: 10px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.insights-arrow-figure {
  position: absolute;
  left: var(--arrow-tail);
  right: calc(var(--arrow-head) + 4px);
  bottom: calc(50% + 6px);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}
/* The Skill's label colour is its dot colour made dark enough for text. */
.insights-arrow.is-gap .insights-arrow-figure { color: var(--insights-label, var(--insights-skill)); }
/* Target reached: no head (nothing is left to travel), a tick on the line. */
.insights-arrow.is-reached::before { right: var(--arrow-head); border-radius: 1px; }
.insights-arrow.is-reached::after { content: none; }
.insights-arrow-tick {
  position: absolute;
  left: calc(50% + (var(--arrow-tail) - var(--arrow-head)) / 2 - 12px);
  top: calc(50% - 12px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--surface);
  fill: var(--insights-label, var(--insights-skill));
}
.insights-arrow-tick path { fill: none; stroke: var(--surface); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Words above the rings: only a note when there is no score to show yet. */
.insights-journey-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.insights-journey-text:not(:empty) { margin-bottom: 12px; }

.insights-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-sunken); color: var(--ink-muted); font-size: 14px; line-height: 16px; }
.insights-journey:hover > .insights-toggle { color: var(--ink); }
.insights-toggle-text { line-height: 16px; }
/* A 16px box with a 7px V drawn at its centre, so the chevron sits on the text's
   middle; the box rotates (not the V) so it turns about its own centre. */
.insights-chevron { position: relative; flex: none; width: 16px; height: 16px; }
.insights-chevron::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -50%) translateY(-2px) rotate(45deg);
}
.insights-journey:has(.insights-journey-button[aria-expanded="true"]) .insights-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .insights-chevron { transition: transform 0.2s ease; }
}

.insights-details[hidden] { display: none; }
.insights-footnote {
  margin: 18px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}
.insights-practice .insights-details { margin-top: 16px; }

.insights-note {
  margin: 0 0 4px;
  color: var(--ink-muted);
  font-size: 15px;
}

.insights-stat strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Your practice (slice 2): the Overall card. */
/* Home mounts the calendar as its own card, outside the Overall one. */
.insights-practice,
.insights-cal-card { --insights-accent: var(--brand-purple); }
.insights-practice h3 { margin: 20px 0 8px; font-size: 16px; }

.insights-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.insights-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-sunken);
}

.insights-stat strong { font-size: 20px; color: var(--ink); }
.insights-stat span { font-size: 13px; color: var(--ink-muted); }

.insights-cal { margin: 16px 0 0; }
.insights-cal-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 8px; }
.insights-practice .insights-cal-month { margin: 0; font-size: 16px; }
.insights-cal-total { color: var(--ink-muted); font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }

.insights-cal-grid { display: flex; flex-direction: column; gap: 4px; }
.insights-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.insights-cal-weekday { color: var(--ink-muted); font-size: 12px; font-weight: 600; line-height: 1; text-align: center; padding-bottom: 2px; }
.insights-cal-weekday.is-today { color: var(--ink); font-weight: 700; }

.insights-day {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.insights-day.is-blank { border-color: transparent; background: none; }
.insights-day.level-1 { background: color-mix(in srgb, var(--insights-accent) 38%, var(--surface)); }
.insights-day.level-2 { background: color-mix(in srgb, var(--insights-accent) 52%, var(--surface)); }
.insights-day.level-3 { background: color-mix(in srgb, var(--insights-accent) 66%, var(--surface)); }
.insights-day.level-4 { background: color-mix(in srgb, var(--insights-accent) 85%, var(--surface)); }
.insights-day.level-4 { color: var(--surface); }
.insights-day.level-1,
.insights-day.level-2,
.insights-day.level-3,
.insights-day.level-4 { border-color: color-mix(in srgb, var(--insights-accent) 55%, var(--surface)); }
.insights-day.is-today { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 45%, transparent); font-weight: 700; }
.insights-day:not(.is-blank) { cursor: pointer; transition: none; }
.insights-day:not(.is-blank):hover { outline: 2px solid var(--brand-purple); outline-offset: -1px; transform: translateY(-1px); }
.insights-day:focus-visible { outline: 2px solid var(--brand-purple); outline-offset: 2px; }

.insights-cal-line { margin: 8px 0 0; min-height: 1.3em; color: var(--ink); font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insights-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 8px 0 0; color: var(--ink); font-size: 13px; }
.insights-legend > span:first-child { margin-right: 2px; }
.insights-legend > span:last-child { margin-left: 2px; }
.insights-legend-swatch { width: 14px; height: 14px; border: 1px solid color-mix(in srgb, var(--ink) 40%, var(--surface)); border-radius: 3px; background: var(--surface-sunken); }
.insights-legend-swatch.level-1 { background: color-mix(in srgb, var(--insights-accent) 38%, var(--surface)); }
.insights-legend-swatch.level-2 { background: color-mix(in srgb, var(--insights-accent) 52%, var(--surface)); }
.insights-legend-swatch.level-3 { background: color-mix(in srgb, var(--insights-accent) 66%, var(--surface)); }
.insights-legend-swatch.level-4 { background: color-mix(in srgb, var(--insights-accent) 85%, var(--surface)); }

.insights-week { margin: 16px 0 0; }

.insights-trends { margin: 0; padding-left: 20px; }
.insights-trends li { margin: 0 0 4px; }

@media (max-width: 520px) {
  .insights-stats { grid-template-columns: 1fr; }
  .insights-day { height: 34px; font-size: 13px; }
  .insights-stat { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
}

.insights-next-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.insights-next-task { margin: 0; font-size: 18px; font-weight: 600; }
.insights-next-reason { margin: 2px 0 0; }
.insights-page a.insights-next-start, .insights-next-start { display: inline-block; padding: 10px 22px; border-radius: 8px; color: var(--surface) !important; font-weight: 600; text-decoration: none; }

/* Target score (slice G), inside the Your target card. */
.insights-target { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--ink); font-size: 15px; }
.insights-target-change { padding: 6px 4px; border: 0; background: none; color: var(--brand-purple); font: inherit; text-decoration: underline; cursor: pointer; }
.insights-target-form { width: 100%; }
.insights-target-label { display: block; margin: 0 0 6px; font-weight: 700; }
.insights-target-row { display: flex; flex-wrap: wrap; gap: 8px; }
.insights-target-input { box-sizing: border-box; width: 110px; padding: 10px 12px; border: 1px solid var(--ink-muted); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.insights-target-input[aria-invalid="true"] { border-color: var(--error-ink); }
.insights-target-save { padding: 10px 18px; border: 0; border-radius: 8px; background: var(--brand-purple); color: var(--surface); font: inherit; font-weight: 600; cursor: pointer; }
.insights-target-error { margin: 6px 0 0; color: var(--error-ink); font-size: 14px; }
.insights-target-error[hidden] { display: none; }
.insights-target-note { width: 100%; margin: 6px 0 0; color: var(--ink-muted); font-size: 14px; }
.insights-target-note:empty { display: none; }
.insights-target-input:focus-visible, .insights-target-save:focus-visible, .insights-target-change:focus-visible { outline: 3px solid var(--brand-purple); outline-offset: 2px; }

/* The Target ring: a full ring in the Target's ink with a dashed halo round
   it, so it reads as a mark to reach rather than a score. Its caption shares
   that ink. */
.insights-journey { --insights-target-ink: var(--ink); }
.insights-ring.score-ring.is-aim:not(.is-empty) {
  --ring-color: var(--insights-target-ink);
  outline: 2px dashed color-mix(in srgb, var(--insights-target-ink) 45%, var(--surface));
  outline-offset: 3px;
}
.insights-aim-button .insights-ring-caption { color: var(--insights-target-ink); }

/* "Do this next" Start: brand purple, white text. */
.insights-page a.insights-next-start, .insights-next-start { background: var(--brand-purple); }
.insights-next-start:hover { background: color-mix(in srgb, var(--brand-purple) 85%, var(--ink-strongest)); }
.insights-next-start:focus-visible { outline: 3px solid var(--brand-purple); outline-offset: 2px; }
/* Narrow cards take smaller rings; the arrows take up the slack. */
@media (max-width: 400px) {
  .insights-journey { --insights-ring-size: 56px; }
}

/* Aim buttons and the shared aim editor. Every aim score is a 44px-or-bigger button. */
.insights-aim-button { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; }
.insights-aim-button:hover { background: color-mix(in srgb, var(--brand-purple) 8%, var(--surface)); }
.insights-aim-button:focus-visible, .insights-target-cancel:focus-visible, .insights-target-slider:focus-visible { outline: 3px solid var(--brand-purple); outline-offset: 2px; }
.insights-target-change { min-height: 44px; min-width: 44px; }
.insights-target-save, .insights-target-cancel, .insights-target-input { min-height: 44px; }
.insights-target-cancel { padding: 10px 18px; border: 1px solid var(--ink-muted); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.insights-target-slider { display: block; box-sizing: border-box; width: 100%; max-width: 360px; min-height: 44px; margin: 0 0 8px; accent-color: var(--brand-purple); }
.insights-target-row { align-items: center; }
.insights-aim-editor-wrap { grid-column: 1 / -1; position: relative; z-index: 2; padding: 12px 0 0; }
/* Native spinner arrows stay visible on the number box. */
.insights-target-input[type="number"] { -moz-appearance: number-input; appearance: auto; }

/* The target card: the Target ring, scaled up, is the centrepiece. Saved, the
   ring (a button) sits beside one line and Change; editing, it sits between a
   - and a + with the slider and number box under it. Same dashed-ring
   language as the rows: a full ring in ink with a dashed halo. */
.insights-target-card { --insights-target-ink: var(--ink); }
.insights-ring.score-ring.is-big { --ring-size: 120px; --ring-thickness: 9px; }
.insights-ring.score-ring.is-big.is-aim:not(.is-empty) { outline-width: 3px; outline-offset: 6px; margin: 9px; }
.insights-target.is-saved { flex-wrap: nowrap; gap: 8px clamp(14px, 4cqi, 24px); }
.insights-target.is-saved .insights-target-value { flex: 0 0 auto; padding: 6px; }
.insights-target-side { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.insights-target-line { margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.35; text-wrap: balance; }
.insights-target-stage { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 5cqi, 28px); margin: 0 0 12px; }
.insights-target-step { box-sizing: border-box; width: 48px; height: 48px; padding: 0; border: 1px solid var(--ink-muted); border-radius: 50%; background: var(--surface); color: var(--ink); font: inherit; font-size: 24px; font-weight: 600; line-height: 1; cursor: pointer; }
.insights-target-step:hover { background: color-mix(in srgb, var(--brand-purple) 8%, var(--surface)); border-color: var(--brand-purple); }
.insights-target-step:focus-visible { outline: 3px solid var(--brand-purple); outline-offset: 2px; }
.insights-target-card .insights-target-form { display: flex; flex-direction: column; align-items: center; }
.insights-target-card .insights-target-label { text-align: center; }
.insights-target-card .insights-target-row { justify-content: center; }
.insights-target-card .insights-target-slider { max-width: 320px; }
.insights-target-card .insights-target-error, .insights-target-card .insights-target-note { text-align: center; }
@media (max-width: 400px) {
  .insights-ring.score-ring.is-big { --ring-size: 104px; }
}