/* Records growth sparkline, trimmed header version. All classes are prefixed rg-. Colours come from the site's
   tokens only (--paper, --ink, --ink-2, --muted, --line, --line-soft, --accent-text, --accent-soft, --lake, --lake-soft).
   Anything that carries meaning (selection, pressed, focus, links) uses --accent-text, never --accent: in the light
   theme --accent is 2.3:1 on --paper. Smallest text is 13px, in the chart as well (the SVG is one unit per pixel). */
.rg {
  --rg-sans: Inter, "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;   /* the site's body stack; names fonts, loads none */
  --rg-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  container: rg / inline-size;
  max-width: 64rem;
  margin: 1.2rem 0 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
  text-align: left;
}
.rg-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.rg [hidden] { display: none !important; }
.rg p, .rg dl, .rg dd, .rg ol, .rg ul, .rg h2 { margin: 0; padding: 0; }
.rg ol, .rg ul { list-style: none; }
.rg a { padding-block: .8rem; color: var(--accent-text); text-underline-offset: .18em; }   /* inline padding: a 44px target, no change to the line */
.rg a:focus-visible, .rg summary:focus-visible, .rg button:focus-visible, .rg .rg-line:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.rg .rg-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.rg .rg-h, .rg .rg-k {
  max-width: none; color: var(--accent-text);
  font: 600 .8125rem/1.4 var(--rg-sans); letter-spacing: .14em; text-transform: uppercase;
}
.rg .rg-k { color: var(--muted); }

/* ---- three plain figures ---- */
.rg-figs { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; }
.rg-figs dt { color: var(--muted); font-size: .8125rem; line-height: 1.3; }
.rg-figs dd { color: var(--ink); font: 700 1.5rem/1.15 var(--rg-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- the line ---- */
.rg-mount { min-width: 0; }
.rg .rg-line { display: block; height: 104px; border: 1px solid var(--line); background: var(--paper); cursor: crosshair; touch-action: pan-y; }
.rg-line svg { display: block; overflow: visible; }
.rg-area { fill: var(--lake-soft); }
.rg-path { fill: none; stroke: var(--lake); stroke-width: 2; stroke-linejoin: round; }
.rg-base, .rg-tickline { stroke: var(--line); stroke-width: 1; }
.rg-pt { fill: var(--lake); stroke: var(--paper); stroke-width: 1.5; }
.rg-tick { fill: var(--muted); font: 13px/1 var(--rg-mono); }
.rg-lab { fill: var(--ink); font: 600 13px/1 var(--rg-sans); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.rg-end { fill: var(--ink); font: 700 14px/1 var(--rg-mono); }
.rg-guide { stroke: var(--accent-text); stroke-width: 1.5; stroke-dasharray: 3 3; }
.rg-ring { fill: none; stroke: var(--accent-text); stroke-width: 2.5; }

/* ---- [earlier] the day [later] ---- */
.rg-ctl { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.rg .rg-day { flex: 1 1 auto; min-width: 0; color: var(--ink-2); font-size: .875rem; line-height: 1.4; }
.rg-day-h { color: var(--ink); font-weight: 700; }
.rg-btn, .rg-topbtn {
  min-height: 2.75rem; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink);
  font: inherit; font-size: .875rem; cursor: pointer;
}
.rg-btn { flex: 0 0 2.75rem; width: 2.75rem; padding: 0; font-size: 1.5rem; line-height: 1; }
.rg-btn:hover:not(:disabled), .rg-topbtn:hover { border-color: var(--accent-text); }
.rg-btn:disabled { color: var(--muted); cursor: default; opacity: .6; }

/* ---- largest days ---- */
.rg-tops { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }
.rg-top { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; font-size: .875rem; }
.rg-top li { color: var(--ink-2); }
.rg-top-t { color: var(--ink); font-weight: 700; }
.rg-topbtn { display: block; width: 100%; height: 100%; padding: .3rem .6rem; text-align: left; line-height: 1.3; }
.rg-topbtn .rg-top-t { font-weight: 600; }
.rg-topbtn[aria-pressed="true"] { border-color: var(--accent-text); background: var(--accent-soft); box-shadow: inset .25rem 0 0 var(--accent-text); }
.rg[data-rg-ready="1"] .rg-top { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }

/* ---- folded: how to read it, the table, the notes, the source ---- */
.rg-text { border: 1px solid var(--line); background: var(--paper); }
.rg-text > summary { display: flex; align-items: center; min-height: 2.75rem; padding: .3rem .9rem; color: var(--ink); font-size: .9375rem; font-weight: 700; cursor: pointer; }
.rg-text-in { padding: 0 .9rem .8rem; }
.rg .rg-read, .rg .rg-src, .rg .rg-note { max-width: 70ch; margin-top: .6rem; color: var(--ink-2); font-size: .875rem; line-height: 1.55; }
.rg .rg-read { margin-top: 0; }
.rg .rg-src { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.rg-table { width: 100%; margin-top: .6rem; border-collapse: collapse; font-size: .875rem; }
.rg-table caption { padding: 0 0 .4rem; color: var(--ink-2); font-size: .875rem; text-align: left; }
.rg-table th, .rg-table td { padding: .4rem .6rem .4rem 0; border-top: 1px solid var(--line); color: var(--ink-2); font-weight: 400; text-align: left; vertical-align: top; }
.rg-table thead th { color: var(--muted); font-size: .8125rem; font-weight: 600; }
.rg-table tbody th, .rg-table tfoot th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.rg-table .rg-num { font-family: var(--rg-mono); font-variant-numeric: tabular-nums; text-align: right; }
.rg-table tfoot th, .rg-table tfoot td { border-top: 2px solid var(--line); color: var(--ink); font-weight: 700; }
.rg-table tr.rg-undated th { white-space: normal; }
.rg-list summary { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--accent-text); cursor: pointer; }
.rg-list li { padding: .3rem 0; border-bottom: 1px solid var(--line-soft, var(--line)); line-height: 1.4; }
.rg-what { display: block; }
.rg-cat { color: var(--muted); font-size: .8125rem; white-space: nowrap; }

@container rg (max-width: 34rem) {         /* narrow: each date becomes a small block */
  .rg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rg-table, .rg-table tbody, .rg-table tfoot, .rg-table tr, .rg-table th, .rg-table td { display: block; }
  .rg-table tr { padding: .5rem 0; border-top: 1px solid var(--line); }
  .rg-table caption { display: block; }
  .rg-table th, .rg-table td, .rg-table tfoot th, .rg-table tfoot td { padding: .1rem 0; border: 0; text-align: left; }
  .rg-table tfoot tr { border-top-width: 2px; }
  .rg-table td.rg-num { display: inline-block; margin-right: 1rem; text-align: left; }
  .rg-table tbody td.rg-num:nth-of-type(1)::before, .rg-table tfoot td.rg-num:nth-of-type(1)::before { content: "added "; font-family: var(--rg-sans); color: var(--muted); }
  .rg-table tbody td.rg-num:nth-of-type(2)::before, .rg-table tfoot td.rg-num:nth-of-type(2)::before { content: "total "; font-family: var(--rg-sans); color: var(--muted); }
  .rg-figs { gap: .3rem 1.1rem; }
  .rg-topbtn { padding: .2rem .45rem; font-size: .8125rem; }
  .rg-topbtn .rg-y { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rg .rg-day-w { font-size: .8125rem; }
}
@container rg (min-width: 48rem) {         /* wide: figures beside the line, largest days in one row */
  .rg-in { grid-template-columns: 13rem minmax(0, 1fr); column-gap: 1.4rem; }
  .rg-h, .rg-figs { grid-column: 1; }
  .rg-h { grid-row: 1; }
  .rg-figs { grid-row: 2; flex-direction: column; align-self: start; gap: .3rem; }
  .rg-figs > div { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding-bottom: .25rem; border-bottom: 1px solid var(--line-soft); }
  .rg-mount { grid-column: 2; grid-row: 1 / span 2; }
  .rg-tops, .rg-text { grid-column: 1 / -1; }
  .rg-tops { flex-wrap: nowrap; }
  .rg-top { flex: 1 1 auto; }
  .rg[data-rg-ready="1"] .rg-top { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  .rg-mark { transition: transform .12s ease-out; }
}
@media print {
  .rg-ctl { display: none; }
  .rg-text-in { display: block !important; }
}