/* =========================================================
   Dashboard analytics
   ========================================================= */

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--s-3);
}
.stat-tile{
  display:grid;
  align-content:start;
  gap:var(--s-2);
  padding:var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.stat-label{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  color:var(--text-2);
  font-size:var(--fs-xs);
  font-weight:500;
}
.stat-label .i{ width:15px; height:15px; color:var(--text-3); }
.stat-value-row{ display:flex; align-items:baseline; gap:var(--s-3); }
.stat-value{
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.03em;
}
.stat-value small{ margin-left:6px; color:var(--text-3); font-family:var(--font-body); font-size:var(--fs-sm); font-weight:400; letter-spacing:0; }
.stat-delta{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:var(--fs-sm);
  font-weight:400;
  font-variant-numeric:tabular-nums;
}
.stat-delta .i{ width:13px; height:13px; stroke-width:2.2; }
.stat-delta.is-good{ color:var(--good); }
.stat-delta.is-bad{ color:var(--bad); }
.stat-foot{ color:var(--text-3); font-size:var(--fs-xs); }

.dash-grid{ display:grid; gap:var(--s-3); margin-top:var(--s-3); }

.chart-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:visible;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  animation:fade-up var(--dur-3) var(--ease-out) both;
}
.main-inner:not(.view-enter) .chart-card{ animation:none; }
.dash-grid > .chart-card:nth-child(2){ animation-delay:60ms; }
.chart-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--line);
}
.chart-card-title{ display:grid; flex:1; gap:3px; min-width:0; }
.chart-card-title h3{ font-family:var(--font-serif); font-size:1.45rem; font-weight:400; line-height:1.1; letter-spacing:-.01em; }
.chart-card-title p{ color:var(--text-3); font-size:var(--fs-xs); line-height:1.45; }
.chart-card-body{ display:flex; flex:1; flex-direction:column; gap:var(--s-4); padding:var(--s-5); }

.chart-empty{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:140px;
  padding:var(--s-4);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--line-soft) 45%, transparent);
  color:var(--text-3);
  font-size:var(--fs-xs);
  text-align:center;
}
.chart-empty .i{ width:20px; height:20px; }

.chart-legend-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-2) var(--s-4);
  color:var(--text-3);
  font-size:var(--fs-xs);
}
.chart-legend-row > span{ display:inline-flex; align-items:center; gap:6px; }

/* ---------- Answers over time (stacked area) ---------- */

/* the de-emphasised series: a step toward the surface, so it separates from the accent in both modes */
.dash-grid{ --chart-muted:color-mix(in srgb, var(--text-3) 55%, var(--surface)); }

.chart-range{ flex:none; width:156px; }
.chart-range .select-trigger{ height:var(--control-h-sm); border-radius:calc(var(--radius) * .65); font-size:var(--fs-xs); }
.chart-range .select-menu{ left:auto; min-width:100%; }

.area-chart{ position:relative; padding-left:34px; }
.area-plot{ position:relative; height:240px; }
.area-plot svg{ display:block; width:100%; height:100%; overflow:visible; }
.area-grid{ stroke:var(--line-soft); stroke-width:1; vector-effect:non-scaling-stroke; }
.area-line{
  fill:none;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.area-cursor{
  stroke:var(--line-strong);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  opacity:0;
  transition:opacity var(--dur-1);
}

/* axis labels live in HTML so the stretched SVG never distorts the text */
.area-y{ position:absolute; top:0; bottom:0; left:-34px; width:28px; }
.area-y span,
.area-x span{
  position:absolute;
  color:var(--text-3);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.area-y span{ right:0; transform:translateY(-50%); }
.area-x{ position:relative; height:26px; margin-top:6px; }
.area-x span{ top:0; transform:translateX(-50%); }
.area-x span:first-child{ transform:none; }
.area-x span:last-child:not(:first-child){ transform:translateX(-100%); }

.area-dot{
  position:absolute;
  width:10px;
  height:10px;
  border:2px solid var(--surface);
  border-radius:50%;
  background:var(--dot);
  transform:translate(-50%, -50%);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-1);
}
.area-hit{ position:absolute; inset:0; cursor:crosshair; }
.area-chart.is-hovering .area-dot,
.area-chart.is-hovering .area-cursor{ opacity:1; }

.area-tip{
  position:absolute;
  z-index:5;
  display:grid;
  gap:4px;
  min-width:150px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  box-shadow:var(--shadow-md);
  font-size:var(--fs-xs);
  transform:translate(14px, -50%);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-1);
}
.area-tip.is-left{ transform:translate(calc(-100% - 14px), -50%); }
.area-chart.is-hovering .area-tip{ opacity:1; }
.area-tip strong{ color:var(--text); font-weight:500; }
.area-tip-row{ display:grid; grid-template-columns:8px minmax(0, 1fr) auto; align-items:center; gap:8px; color:var(--text-2); }
.area-tip-row i{ width:8px; height:8px; border-radius:50%; }
.area-tip-row b{ color:var(--text); font-family:var(--font-mono); font-weight:500; font-variant-numeric:tabular-nums; }
.area-tip-foot{ padding-top:4px; border-top:1px solid var(--line-soft); color:var(--text-3); }

.area-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--s-2) var(--s-5);
  color:var(--text-2);
  font-size:var(--fs-xs);
}
.area-legend span{ display:inline-flex; align-items:center; gap:6px; }
.area-legend i{ width:10px; height:10px; border-radius:3px; }

/* ---------- Activity calendar ---------- */

.calendar{ display:flex; gap:var(--s-2); }
.calendar-days{
  display:grid;
  grid-template-rows:repeat(7, 1fr);
  gap:3px;
  padding-top:17px;
  color:var(--text-3);
  font-size:10px;
}
.calendar-days span{ display:flex; align-items:center; line-height:1; }
.calendar-body{ flex:1; min-width:0; overflow-x:auto; scrollbar-width:thin; }
.calendar-months{
  display:grid;
  grid-template-columns:repeat(var(--weeks), minmax(10px, 1fr));
  gap:3px;
  height:14px;
  margin-bottom:3px;
  color:var(--text-3);
  font-size:10px;
}
.calendar-months span{ white-space:nowrap; }
.calendar-grid{ display:grid; grid-template-columns:repeat(var(--weeks), minmax(10px, 1fr)); gap:3px; }
.calendar-week{ display:grid; grid-template-rows:repeat(7, 1fr); gap:3px; }
.calendar-cell{
  display:block;
  aspect-ratio:1;
  border-radius:3px;
  background:var(--line-soft);
}
.calendar-cell.lv-1{ background:color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.calendar-cell.lv-2{ background:color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.calendar-cell.lv-3{ background:color-mix(in srgb, var(--accent) 78%, var(--surface)); }
.calendar-cell.lv-4{ background:var(--accent); }
.calendar-cell.lv-x{ background:transparent; }
/* the hover ring is drawn inside the square, so the scrolling year never clips it */
.calendar-grid .calendar-cell:not(.lv-x):hover{ box-shadow:inset 0 0 0 2px var(--text), inset 0 0 0 3px rgba(0, 0, 0, .45); }
.calendar-scale{ gap:3px !important; }
.calendar-scale .calendar-cell{ width:11px; height:11px; aspect-ratio:auto; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px){
  .stat-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .stat-grid{ grid-template-columns:1fr; }
  .stat-tile{ padding:var(--s-4); }
  .chart-card-head{ padding:var(--s-3) var(--s-4); }
  .chart-card-body{ padding:var(--s-4); }
  .stat-value{ font-size:var(--fs-xl); }
}

/* =========================================================
   Dashboard top (home.js): resume, term of the day and library
   ========================================================= */

.home-grid{ display:grid; gap:var(--s-4); margin-top:var(--s-4); }
.home-grid-a{ grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); margin-top:0; }

/* ---------- shared card parts ---------- */

.home-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent), 0 1px 2px rgba(0, 0, 0, .12);
}
.home-card-head{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); min-height:54px; padding:0 var(--s-5); border-bottom:1px solid var(--line-soft); }
.home-card-head strong{ font-size:var(--fs-base); font-weight:600; letter-spacing:-.01em; }
.home-card-meta, .home-card-kicker{ display:inline-flex; align-items:center; gap:5px; color:var(--text-3); font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.home-card-meta i{ font-style:normal; opacity:.5; }
.home-card-kicker{ color:var(--accent-text); }
.home-card-foot{ display:flex; align-items:center; gap:var(--s-3); min-height:52px; margin-top:auto; padding:0 var(--s-3) 0 var(--s-5); border-top:1px solid var(--line-soft); }
.home-empty{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-6) var(--s-5); color:var(--text-3); font-size:var(--fs-sm); line-height:1.5; }
.home-empty .i{ flex:none; width:18px; height:18px; }

/* a row separator that starts at the text, not the icon */
.home-resume{ --lead:26px; }
.home-resume-list li + li .home-resume-row{
  background-image:linear-gradient(var(--line-soft), var(--line-soft));
  background-repeat:no-repeat;
  background-position:right top;
  background-size:calc(100% - var(--s-5) - var(--lead, 36px) - var(--s-4)) 1px;
}

/* ---------- pick up where you left off ---------- */

.home-resume-lead{
  position:relative;
  display:grid;
  grid-template-columns:26px minmax(0, 1fr) auto;
  align-items:center;
  gap:var(--s-4);
  width:100%;
  padding:var(--s-5);
  border-bottom:1px solid var(--line-soft);
  background-image:linear-gradient(100deg, color-mix(in srgb, var(--c) 11%, transparent), transparent 58%);
  text-align:left;
  transition:background-color var(--dur-1);
}
.home-resume-lead::before{ content:""; position:absolute; top:var(--s-5); bottom:var(--s-5); left:0; width:3px; border-radius:0 3px 3px 0; background:var(--c); }
.home-resume-lead:hover{ background-color:var(--hover); }
.home-resume-lead:focus-visible, .home-resume-row:focus-visible, .home-ledger-cell:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
/* the kind of place, as a bare icon in its subject's colour */
.home-resume-mark{ display:grid; place-items:center; color:var(--c); }
.home-resume-mark .i{ width:18px; height:18px; }
.home-resume-mark.is-lg .i{ width:24px; height:24px; }
.home-resume-copy{ display:grid; gap:3px; min-width:0; }
.home-resume-copy strong{ overflow:hidden; font-size:var(--fs-sm); font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.home-resume-copy small{ overflow:hidden; color:var(--text-3); font-size:var(--fs-xs); text-overflow:ellipsis; white-space:nowrap; }
.home-resume-copy small > span{ color:var(--text-2); }
.home-resume-copy small > span::after{ content:"·"; margin:0 6px; color:var(--text-3); }
.home-resume-kind{ display:inline-flex; align-items:center; gap:8px; min-width:0; color:var(--c); font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.home-resume-kind i{ width:6px; height:6px; border-radius:50%; background:var(--c); }
/* pale folder colours (amber, yellow) are deepened on light surfaces so the label stays readable */
.home-resume-kind b{ overflow:hidden; color:var(--text-3); font-weight:500; text-overflow:ellipsis; }
.home-resume-kind b::before{ content:"/"; margin-right:8px; opacity:.6; }
.home-resume-lead .home-resume-copy strong{ font-size:var(--fs-lg); letter-spacing:-.01em; }
.home-resume-go .i{ transition:transform var(--dur-2) var(--ease-out); }
.home-resume-lead:hover .home-resume-go .i{ transform:translateX(3px); }

.home-resume-list{ margin:0; padding:6px 0; list-style:none; }
.home-resume-row{
  display:grid;
  grid-template-columns:26px minmax(0, 1fr) auto 14px;
  align-items:center;
  gap:var(--s-4);
  width:100%;
  padding:10px var(--s-5);
  text-align:left;
  transition:background-color var(--dur-1);
}
.home-resume-row:hover{ background-color:var(--hover); }
.home-resume-row time{ color:var(--text-3); font-size:var(--fs-2xs); font-variant-numeric:tabular-nums; white-space:nowrap; }
.home-resume-row > .i{ width:14px; height:14px; color:var(--text-3); transition:transform var(--dur-2) var(--ease-out), color var(--dur-1); }
.home-resume-row:hover > .i{ transform:translateX(2px); color:var(--text); }

/* ---------- term of the day ---------- */

.home-term-body{ display:flex; flex:1; flex-direction:column; padding:var(--s-5) var(--s-5) var(--s-4); }
.home-term-source{ display:inline-flex; align-items:center; gap:8px; min-width:0; color:var(--text-3); font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.home-term-source i{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.home-term-source b{ overflow:hidden; color:var(--text-2); font-weight:500; text-overflow:ellipsis; }
.home-term-source b::before{ content:"/"; margin-right:8px; color:var(--text-3); opacity:.6; }
.home-term-word{ margin-top:var(--s-3); font-family:var(--font-serif); font-size:clamp(2.1rem, 3vw, 2.75rem); font-weight:400; line-height:1.05; letter-spacing:-.01em; overflow-wrap:anywhere; }
.home-term-def{ position:relative; flex:1; min-height:96px; margin-top:var(--s-4); }
.home-term-def p{ padding:var(--s-2) 0; color:var(--text-2); font-family:var(--font-serif); font-size:1.15rem; font-style:italic; line-height:1.45; opacity:0; translate:0 6px; transition:opacity var(--dur-3) var(--ease-out) .12s, translate var(--dur-3) var(--ease-out) .12s; }

/* the definition sits under a hatched cover that wipes upward when revealed */
.home-term-cover{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background-color:var(--surface-sunken);
  background-image:repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 7%, transparent) 0 1px, transparent 1px 8px);
  clip-path:inset(0 0 0 0 round var(--r-md));
  cursor:pointer;
  transition:clip-path .5s var(--ease-in-out), border-color var(--dur-2);
}
.home-term-cover > span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  color:var(--text);
  font-size:var(--fs-sm);
  font-weight:600;
  transition:border-color var(--dur-2), color var(--dur-2);
}
.home-term-cover .i{ width:15px; height:15px; }
.home-term-cover:hover{ border-color:var(--line-strong); animation:hatch-drift 1.4s linear infinite; }
.home-term-cover:hover > span{ border-color:var(--accent-line); color:var(--accent-text); }
.home-term-cover:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@keyframes hatch-drift{ to{ background-position:11.314px 0; } }
.home-term.is-revealed .home-term-cover{ clip-path:inset(0 0 100% 0 round var(--r-md)); pointer-events:none; }
.home-term.is-revealed .home-term-def p{ opacity:1; translate:0 0; }

.home-term-steps{ display:inline-flex; gap:3px; }
.home-term-steps i{ width:14px; height:4px; border-radius:2px; background:var(--line-strong); transition:background-color var(--dur-3); }
.home-term-steps i.is-done, .home-term.is-revealed .home-term-steps i{ background:var(--c); }
.home-term-hint{ flex:1; min-width:0; overflow:hidden; color:var(--text-3); font-size:var(--fs-xs); text-overflow:ellipsis; white-space:nowrap; }

/* ---------- library ---------- */

.home-ledger{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); margin-top:var(--s-4); padding:6px; }
.home-ledger-cell{
  position:relative;
  display:grid;
  align-content:start;
  min-width:0;
  padding:var(--s-4) var(--s-5) var(--s-5);
  border-radius:calc(var(--r-lg) - 6px);
  text-align:left;
  transition:background-color var(--dur-2);
}
/* hairline dividers that stop short of the card's edges */
.home-ledger-cell + .home-ledger-cell::before{ content:""; position:absolute; top:var(--s-5); bottom:var(--s-5); left:-.5px; width:1px; background:var(--line-soft); transition:opacity var(--dur-2); }
.home-ledger-cell:hover::before, .home-ledger-cell:hover + .home-ledger-cell::before{ opacity:0; }
/* a short accent rule draws under the number on hover */
.home-ledger-cell::after{ content:""; position:absolute; left:var(--s-5); bottom:12px; width:28px; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-3) var(--ease-out); }
.home-ledger-cell:hover{ background:var(--hover); }
.home-ledger-cell:hover::after, .home-ledger-cell:focus-visible::after{ transform:scaleX(1); }
.home-ledger-label{ display:flex; justify-content:space-between; align-items:center; color:var(--text-3); font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; }
.home-ledger-label .i{ width:14px; height:14px; opacity:0; translate:-3px 3px; transition:opacity var(--dur-2), translate var(--dur-2) var(--ease-out); }
.home-ledger-cell:hover .home-ledger-label, .home-ledger-cell:focus-visible .home-ledger-label{ color:var(--text-2); }
.home-ledger-cell:hover .home-ledger-label .i, .home-ledger-cell:focus-visible .home-ledger-label .i{ opacity:1; translate:0 0; }
.home-ledger-num{ margin-top:var(--s-3); font-family:var(--font-display); font-size:2.6rem; font-weight:500; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.home-ledger-note{ display:flex; align-items:center; gap:6px; min-width:0; margin-top:10px; overflow:hidden; color:var(--text-3); font-size:var(--fs-xs); text-overflow:ellipsis; white-space:nowrap; }
.home-ledger-note b{ color:var(--accent-text); font-weight:600; font-variant-numeric:tabular-nums; }
.home-ledger-note i{ font-style:normal; opacity:.6; }

@media (prefers-reduced-motion: reduce){
  .home-term-cover, .home-term-def p{ transition:none; }
  .home-term-cover:hover{ animation:none; }
}

@media (max-width: 1024px){
  .home-grid-a{ grid-template-columns:1fr; }
  .home-ledger{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .home-ledger-cell:nth-child(3)::before{ display:none; }
}
@media (max-width: 640px){
  .home-card-head{ padding:0 var(--s-4); }
  .home-resume-lead{ grid-template-columns:26px minmax(0, 1fr) auto; gap:var(--s-3); padding:var(--s-4); }
  .home-resume-go{ width:34px; padding:0; justify-content:center; }
  .home-resume-go > span{ display:none; }
  .home-resume-row{ grid-template-columns:26px minmax(0, 1fr) auto; gap:var(--s-3); padding:10px var(--s-4); }
  .home-resume-row > .i{ display:none; }
  .home-term-body{ padding:var(--s-4); }
  .home-card-foot{ padding-left:var(--s-4); }
  .home-ledger-cell{ padding:var(--s-4); }
  .home-ledger-cell::after{ left:var(--s-4); bottom:10px; }
  .home-ledger-num{ font-size:2.1rem; }
  .home-ledger-note{ flex-wrap:wrap; row-gap:2px; white-space:normal; }
}

/* statistics on narrow screens: the range picker drops under the title, the date axis thins out,
   and the year of activity fades in from the left edge where it is scrolled */
@media (max-width: 640px){
  .chart-card-head{ flex-wrap:wrap; }
  .chart-card-head .chart-range{ width:100%; }
  .area-x span:nth-child(even):not(:last-child){ display:none; }
  .calendar-body{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 28px); mask-image:linear-gradient(90deg, transparent, #000 28px); }
}