/* ---------------------------------------------------------------------------
   insights.css — AREA: INSIGHTS  (owns js/ui/calendar.js, js/ui/report.js,
                                   js/lib/charts.js, css/insights.css)

   The calendar and the report — two screens on one stylesheet because they
   share the chart vocabulary. Declares NO custom property: every value comes
   from tokens.css, and the handful of properties the JS sets inline
   (--weight, --share, --tint, --i, --h) are only ever READ here, always with a
   fallback, so nothing in this file is a token.

   Naming: .cal-… for the calendar, .rep-… and .ach-… for the report, and
   .chart-… for anything js/lib/charts.js draws, since those nodes turn up on
   both screens.

   Colour rule for the charts: an SVG shape here never names a colour. It reads
   --c-accent, --c-track, --c-line and friends, so the same chart is correct in
   four themes and repaints itself the moment the accent changes — no redraw,
   no second palette, nothing for the JS to know about.
--------------------------------------------------------------------------- */

/* =========================================================================
   CHART FRAME — shared by every primitive
   ========================================================================= */

.chart {
  margin: 0;
  min-width: 0;
}

/* Wide charts scroll inside themselves. The page must never move sideways:
   at 360px a month of bars is wider than the phone, and a horizontally
   scrolling *page* would break the tab bar and the sheets with it. */
.chart__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.chart__stage {
  position: relative;
  width: 100%;
}
.chart__stage--heat { min-height: 190px; }

.chart__canvas { width: 100%; }
.chart__svg { display: block; width: 100%; overflow: visible; }

/* The scrubber: an invisible control laid exactly over the plot. It is a real
   button with role="slider", so a keyboard walks the bars and a screen reader
   hears each value — the SVG itself stays decorative. */
.chart__scrub {
  position: absolute;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: ew-resize;
  /* Vertical scrolling still belongs to the page; only sideways is ours. */
  touch-action: pan-y;
}
.chart__scrub:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 2px; }
.chart__scrub:disabled { cursor: default; }

/* =========================================================================
   BAR CHART
   ========================================================================= */

.chart-grid line {
  stroke: var(--c-line);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.chart-grid .chart-grid__base { stroke: var(--c-line-strong); }

.chart-axis,
.chart-xlabel,
.chart-avg__label,
.chart-heat__day,
.chart-heat__hour {
  font-family: var(--font-num);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  fill: var(--c-ink-3);
}
.chart-xlabel { font-size: 10.5px; transition: fill var(--d-2) var(--e-out); }
.chart-xlabel.is-selected { fill: var(--c-ink); font-weight: var(--fw-bold); }

.chart-bar {
  rx: var(--r-xs);
  fill: color-mix(in srgb, var(--c-accent) 32%, transparent);
  transition: fill var(--d-2) var(--e-out);
}
.chart-bar.is-peak { fill: color-mix(in srgb, var(--c-accent) 62%, transparent); }
.chart-bar.is-selected { fill: var(--c-accent); }
.chart-bar.is-zero { fill: var(--c-track); }
/* The brutal face outlines everything, bars included. */
:root[data-theme="brutal"] .chart-bar { stroke: var(--c-ink); stroke-width: var(--bw); }

.chart-avg {
  stroke: var(--c-ink-3);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  opacity: 0.75;
}
.chart-avg__label { fill: var(--c-ink-3); font-size: 9.5px; }

.chart-bubble { transition: transform var(--d-3) var(--e-out), opacity var(--d-2) var(--e-out); }
.chart-bubble__box {
  fill: var(--c-accent);
  stroke: var(--c-accent-line);
  stroke-width: var(--bw);
  rx: 11px;
}
:root[data-theme="brutal"] .chart-bubble__box { rx: var(--r-sm); stroke: var(--c-ink); }
.chart-bubble__tail { fill: var(--c-accent); }
.chart-bubble__text {
  fill: var(--c-accent-ink);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.chart-empty {
  fill: var(--c-ink-3);
  font-size: var(--fs-sm);
}

/* =========================================================================
   HEATMAP
   ========================================================================= */

.chart-heat__cell {
  rx: 3px;
  fill: var(--c-surface-sunken);
  transition: fill var(--d-2) var(--e-out), opacity var(--d-2) var(--e-out);
}
:root[data-theme="brutal"] .chart-heat__cell { rx: 0; stroke: var(--c-line); stroke-width: 1; }
.chart-heat__cell[data-level="1"] { fill: color-mix(in srgb, var(--c-accent) 18%, var(--c-surface-sunken)); }
.chart-heat__cell[data-level="2"] { fill: color-mix(in srgb, var(--c-accent) 36%, var(--c-surface-sunken)); }
.chart-heat__cell[data-level="3"] { fill: color-mix(in srgb, var(--c-accent) 56%, var(--c-surface-sunken)); }
.chart-heat__cell[data-level="4"] { fill: color-mix(in srgb, var(--c-accent) 78%, var(--c-surface-sunken)); }
.chart-heat__cell[data-level="5"] { fill: var(--c-accent); }
.chart-heat__cell.is-active { stroke: var(--c-ink); stroke-width: 2; }

.chart-heat__day { font-size: 10px; }
.chart-heat__hour { font-size: 9.5px; }

.chart-tip {
  position: absolute;
  z-index: var(--z-raised);
  transform: translate(-50%, -100%);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-ink);
  color: var(--c-ink-inv);
  border: var(--bw) solid var(--c-ink);
  box-shadow: var(--sh-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  pointer-events: none;
  animation: fx-pop-in var(--d-1) var(--e-out);
}

.chart-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--c-ink-3);
}
.chart-legend__ramp { display: inline-flex; gap: 3px; }
.chart-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--c-surface-sunken);
  border: var(--bw) solid var(--c-line);
}
.chart-legend__swatch[data-level="1"] { background: color-mix(in srgb, var(--c-accent) 18%, var(--c-surface-sunken)); }
.chart-legend__swatch[data-level="2"] { background: color-mix(in srgb, var(--c-accent) 36%, var(--c-surface-sunken)); }
.chart-legend__swatch[data-level="3"] { background: color-mix(in srgb, var(--c-accent) 56%, var(--c-surface-sunken)); }
.chart-legend__swatch[data-level="4"] { background: color-mix(in srgb, var(--c-accent) 78%, var(--c-surface-sunken)); }
.chart-legend__swatch[data-level="5"] { background: var(--c-accent); }

/* =========================================================================
   SPARKLINE & RING
   ========================================================================= */

.chart-spark { display: block; width: 100%; }
.chart-spark__line { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-spark__area { fill: color-mix(in srgb, var(--c-accent) 14%, transparent); stroke: none; }
.chart-spark__head { fill: var(--c-accent); }

.chart-ring { flex: none; }
.chart-ring .c-ring__value { transition: stroke-dashoffset var(--d-4) var(--e-out); }
.chart-ring__value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.chart-ring__sub {
  font-size: var(--fs-2xs);
  color: var(--c-ink-3);
  text-transform: var(--caps-transform);
  letter-spacing: var(--ls-wide);
}

/* =========================================================================
   ENTRANCE MOTION
   transform and opacity only, and the delay is capped so the last bar of a
   long month is not still arriving after the reader has moved on.
   ========================================================================= */

@keyframes chart-grow { from { transform: scaleY(0.02); opacity: 0; } }
@keyframes chart-cell-in { from { transform: scale(0.4); opacity: 0; } }

.chart__svg.is-entering .chart-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: chart-grow var(--d-4) var(--e-out) backwards;
  animation-delay: calc(min(var(--i, 0), 30) * 20ms);
}
.chart__svg.is-entering .chart-heat__cell {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: chart-cell-in var(--d-3) var(--e-out) backwards;
  animation-delay: calc(min(var(--i, 0), 60) * 6ms);
}
.chart__svg.is-entering .chart-bubble { animation: fx-pop-in var(--d-3) var(--e-spring) 260ms backwards; }

/* =========================================================================
   CALENDAR — month card
   ========================================================================= */

.cal-month {
  /* The grid wants every pixel it can get: at 360px a 16px card gutter is the
     difference between a 40px day cell and a 44px one. */
  padding-inline: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow: hidden;
}

.cal-nav { display: flex; align-items: center; gap: var(--sp-1); }
.cal-nav__btn { flex: none; }
.cal-nav__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding-inline: var(--sp-2);
  border-radius: var(--r-btn);
  color: var(--c-ink);
  transition: background var(--d-2) var(--e-out);
}
.cal-nav__title:hover { background: var(--c-surface-sunken); }
.cal-nav__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  text-transform: var(--caps-transform);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-tools { display: flex; align-items: center; gap: var(--sp-2); }
.cal-tools > .c-seg { flex: 1 1 auto; }
.cal-today { flex: none; }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-weekdays__cell {
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-grid.is-sliding-next { animation: fx-slide-in-r var(--d-3) var(--e-out); }
.cal-grid.is-sliding-prev { animation: fx-slide-in-l var(--d-3) var(--e-out); }

/* =========================================================================
   CALENDAR — one day
   ========================================================================= */

.cal-cell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 46px;
  padding: 2px;
  border-radius: var(--r-md);
  border: var(--bw) solid transparent;
  background: transparent;
  color: var(--c-ink);
  transition: background var(--d-2) var(--e-out), transform var(--d-1) var(--e-out), border-color var(--d-2) var(--e-out);
}
/* The activity mark: a tint whose weight is the day's minutes, not merely the
   fact that something happened. Twenty minutes and four hours must not look
   the same from across the room. */
.cal-cell::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: var(--r-sm);
  background: var(--c-accent);
  opacity: calc(var(--weight, 0) * 0.34);
  transition: opacity var(--d-3) var(--e-out);
}
.cal-cell:hover { background: var(--c-surface-sunken); }
.cal-cell:active { transform: scale(0.94); }

.cal-cell__num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.cal-cell__dots { display: flex; gap: 2px; height: 4px; }
.cal-cell__dot {
  width: 4px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
}
.cal-cell__bar { display: none; }

.cal-cell[data-outside="true"] { opacity: 0.34; }
.cal-cell[data-future="true"] .cal-cell__num { color: var(--c-ink-3); }
.cal-cell[data-today="true"] {
  border-color: var(--c-accent);
  font-weight: var(--fw-bold);
}
.cal-cell[data-today="true"] .cal-cell__num { color: var(--c-accent); font-weight: var(--fw-bold); }
/* Goal met: a notch in the corner, away from the density dots. */
.cal-cell[data-goal="true"]::after {
  content: "";
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--c-ok);
}
.cal-cell.is-selected {
  background: var(--c-accent);
  border-color: var(--c-accent-line);
  box-shadow: var(--sh-1);
}
.cal-cell.is-selected .cal-cell__num,
.cal-cell.is-selected[data-today="true"] .cal-cell__num { color: var(--c-accent-ink); }
.cal-cell.is-selected .cal-cell__dot { background: var(--c-accent-ink); }
.cal-cell.is-selected::before { opacity: 0; }

/* The week strip: the same grid at one row, with a minute bar per day so a
   phone can read a week at a glance without opening anything. */
.cal-grid[data-view="week"] .cal-cell {
  min-height: 92px;
  justify-content: flex-start;
  padding-top: var(--sp-2);
  background: var(--c-surface-2);
}
.cal-grid[data-view="week"] .cal-cell.is-selected { background: var(--c-accent); }
.cal-grid[data-view="week"] .cal-cell__bar {
  display: block;
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 6px;
  height: var(--h, 0%);
  min-height: 2px;
  margin-left: -3px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  /* --h is the value and stays a height; the reveal is a scale, so paging a
     week draws seven bars with one layout pass instead of transitioning seven
     heights. Same division of labour as .rep-stack__slice below. */
  transform-origin: bottom;
  animation: cal-bar-grow var(--d-3) var(--e-out) backwards;
}
@keyframes cal-bar-grow { from { transform: scaleY(0); } }
.cal-grid[data-view="week"] .cal-cell.is-selected .cal-cell__bar { background: var(--c-accent-ink); }

/* =========================================================================
   CALENDAR — the jump sheet
   ========================================================================= */

.cal-jump__year {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}
.cal-jump__months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.cal-jump__month { justify-content: center; min-height: var(--tap); }

/* =========================================================================
   CALENDAR — the day panel
   ========================================================================= */

.cal-panel { display: flex; flex-direction: column; gap: var(--sp-4); }
.cal-panel__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.cal-panel__date {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}
.cal-panel__stats {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.cal-panel__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  flex: 1 1 auto;
}
.cal-panel__empty { padding: var(--sp-2) 0; }

.cal-sessions { gap: var(--sp-2); }
.cal-session {
  position: relative;
  overflow: hidden;
  padding-inline-start: var(--sp-5);
}
.cal-session__rail {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--dot, var(--c-accent));
}
.cal-session[data-kind="short"] .cal-session__rail,
.cal-session[data-kind="long"] .cal-session__rail { background: var(--c-break); }
.cal-session[data-kind="long"] .cal-session__rail { background: var(--c-long); }
.cal-session__time {
  min-width: 3.2rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}
.cal-session__flag { color: var(--c-warn); font-weight: var(--fw-semibold); }
.cal-session .c-row__trail { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-2); }

.cal-add { border-style: dashed; border-color: var(--c-line-strong); }
.cal-danger .c-row__title { color: var(--c-danger); }
.cal-danger .c-tile { background: var(--c-danger-soft); color: var(--c-danger); }

/* =========================================================================
   REPORT — range and totals
   ========================================================================= */

.rep { display: flex; flex-direction: column; gap: var(--sp-4); }

/* The range switcher follows the page down, so the answer to "which period is
   this?" is never scrolled away. It needs its own ground: the segmented pill is
   opaque but the air around it is not, and without this the heatmap slides
   visibly through the gap. Flatly opaque, not blurred — a translucent sticky
   bar makes the phone re-read and re-blur the strip under it every frame, and
   over a heatmap that is the most expensive thing on the screen. */
.rep-range {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding-block: var(--sp-2);
  background: var(--c-bg);
}

.rep-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.rep-tile { gap: 3px; }
.rep-tile .c-stat__value { font-size: var(--fs-xl); }
.rep-tile .c-stat__label {
  font-size: var(--fs-2xs);
  line-height: 1.25;
  /* Twelve languages: "Общее время фокуса" has to be allowed to wrap. */
  overflow-wrap: anywhere;
}

.rep-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--c-ink-3);
}
.rep-delta[data-tone="up"] { color: var(--c-ok); }
.rep-delta[data-tone="down"] { color: var(--c-danger); }
.rep-delta > svg { flex: none; }

.rep-peak,
.rep-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  min-height: 1.5em;
}
.rep-note > svg { flex: none; color: var(--c-accent); margin-top: 1px; }

/* =========================================================================
   REPORT — streaks
   ========================================================================= */

.rep-streak__figures {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.rep-streak__now { display: flex; align-items: center; gap: var(--sp-2); }
.rep-streak__flame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.rep-streak__spark { flex: 1 1 auto; min-width: 60px; }

.rep-streak__strip {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 2px;
}
.rep-streak__day {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--c-surface-sunken);
  border: var(--bw) solid transparent;
}
.rep-streak__day[data-level="1"] { background: color-mix(in srgb, var(--c-accent) 30%, var(--c-surface-sunken)); }
.rep-streak__day[data-level="2"] { background: color-mix(in srgb, var(--c-accent) 60%, var(--c-surface-sunken)); }
.rep-streak__day[data-level="3"] { background: var(--c-accent); }
.rep-streak__day[data-today="true"] { border-color: var(--c-ink); }

/* =========================================================================
   REPORT — where the time went
   ========================================================================= */

.rep-breakdown { gap: var(--sp-3); }

.rep-stack {
  display: flex;
  height: 14px;
  gap: 2px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--c-track);
}
.rep-stack__slice {
  width: var(--share, 0%);
  min-width: 2px;
  background: var(--tint, var(--c-accent));
  transform-origin: left center;
  animation: chart-slice-in var(--d-4) var(--e-out) backwards;
  animation-delay: calc(min(var(--i, 0), 8) * 45ms);
}
@keyframes chart-slice-in { from { transform: scaleX(0); } }
[dir="rtl"] .rep-stack__slice { transform-origin: right center; }

.rep-legend { display: flex; flex-direction: column; gap: var(--sp-2); }
.rep-legend__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  min-height: 22px;
}
.rep-legend__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--tint, var(--c-accent));
}
.rep-legend__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-ink-2);
}
.rep-legend__value { font-weight: var(--fw-semibold); }
.rep-legend__pct { min-width: 3.2rem; text-align: end; color: var(--c-ink-3); font-size: var(--fs-xs); }

/* =========================================================================
   REPORT — the achievement shelf
   ========================================================================= */

.rep-shelf__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}
.rep-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-1);
  border-radius: var(--r-card);
  background: var(--c-surface-2);
  border: var(--bw) solid var(--c-line);
  text-align: center;
}
.rep-badge__emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
}
.rep-badge__title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.rep-badge[data-earned="false"] { opacity: 0.55; }
.rep-badge[data-earned="false"] .rep-badge__emblem {
  background: var(--c-surface-sunken);
  color: var(--c-ink-3);
}

/* =========================================================================
   ACHIEVEMENTS
   ========================================================================= */

.ach-head { gap: var(--sp-3); }
.ach-group__title { margin-bottom: var(--sp-1); }

.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--sp-3);
}

.ach-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4);
  text-align: start;
  border-radius: var(--r-card);
  background: var(--c-surface);
  border: var(--card-border);
  box-shadow: var(--sh-card);
  color: var(--c-ink);
  transition: transform var(--d-1) var(--e-out), box-shadow var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
.ach-card:hover { transform: translateY(-2px); box-shadow: var(--sh-pop); }
.ach-card:active { transform: translate(var(--btn-translate), var(--btn-translate)); box-shadow: var(--sh-press); }
.ach-card[data-earned="true"] { border-color: var(--c-accent-line); }

.ach-card__emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
  border: var(--bw) solid transparent;
}
.ach-card__emblem--lg { width: 72px; height: 72px; align-self: center; }
.ach-card[data-earned="true"] .ach-card__emblem {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent-line);
  box-shadow: var(--sh-accent);
}
/* Locked, not mysterious: the requirement stays perfectly readable. */
.ach-card[data-earned="false"] .ach-card__emblem {
  background: var(--c-surface-sunken);
  color: var(--c-ink-3);
  opacity: 0.75;
}

.ach-card__title { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.ach-card__desc { font-size: var(--fs-xs); color: var(--c-ink-2); line-height: 1.35; }
.ach-card__meta { font-size: var(--fs-2xs); color: var(--c-ink-3); font-weight: var(--fw-semibold); }
.ach-card__bar { display: block; width: 100%; margin-top: auto; }
.ach-sheet { align-items: stretch; text-align: center; }

/* =========================================================================
   WIDER SCREENS
   The report section is .screen--wide, so past the phone it earns a second
   column instead of a single ribbon of cards down the middle of a monitor.
   ========================================================================= */

@media (min-width: 760px) {
  .cal-month { padding-inline: var(--sp-4); }
  .cal-cell { min-height: 54px; }
  .rep-tiles { gap: var(--sp-4); }
  .rep-tile .c-stat__value { font-size: var(--fs-2xl); }
  .rep-tile .c-stat__label { font-size: var(--fs-xs); }
}

@media (min-width: 900px) {
  /* Only the report pairs into columns. The achievements view is already a
     grid of its own and would be cut in half by this one. */
  .rep[data-view="report"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  /* The heading, the range, the totals and the focus-time chart stay full
     width; the smaller cards below them pair off. */
  .rep[data-view="report"] > h1,
  .rep[data-view="report"] > .rep-range,
  .rep[data-view="report"] > .rep-tiles,
  .rep[data-view="report"] > section:nth-of-type(2) { grid-column: 1 / -1; }
}

/* =========================================================================
   REDUCED MOTION
   base.css already crushes durations, which is right for a transition and
   wrong for nothing here: every animation in this file has a still end state,
   so flattening it simply shows the finished chart.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .chart__svg.is-entering .chart-bar,
  :root:not([data-motion="full"]) .chart__svg.is-entering .chart-heat__cell,
  :root:not([data-motion="full"]) .chart__svg.is-entering .chart-bubble,
  :root:not([data-motion="full"]) .rep-stack__slice,
  :root:not([data-motion="full"]) .cal-grid[data-view="week"] .cal-cell__bar,
  :root:not([data-motion="full"]) .cal-grid.is-sliding-next,
  :root:not([data-motion="full"]) .cal-grid.is-sliding-prev { animation: none; }
}
:root[data-motion="reduced"] .chart__svg.is-entering .chart-bar,
:root[data-motion="reduced"] .chart__svg.is-entering .chart-heat__cell,
:root[data-motion="reduced"] .chart__svg.is-entering .chart-bubble,
:root[data-motion="reduced"] .rep-stack__slice,
:root[data-motion="reduced"] .cal-grid[data-view="week"] .cal-cell__bar,
:root[data-motion="reduced"] .cal-grid.is-sliding-next,
:root[data-motion="reduced"] .cal-grid.is-sliding-prev { animation: none; }