/* Metrics: the 90 day run and the 7 measure cards are the hero.
   The weekly form sits in a sticky side column on wide screens. */

.mx-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* Every number on this tab uses tabular figures: counts, dates, captions. */
.mx, .mx-deck { font-variant-numeric: tabular-nums lining-nums; }

/* Narrow: run, form, cards in one column. Wide: the form moves to a sticky side column. */
.mx { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1280px) {
  .mx { grid-template-columns: minmax(0, 1fr) 340px; }
  .mx-run { grid-column: 1; grid-row: 1; }
  .mx-cards { grid-column: 1; grid-row: 2; }
  .mx-entry { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 76px; }
}
@media (min-width: 1800px) { .mx { grid-template-columns: minmax(0, 1fr) 380px; } }

/* Shared card surface. */
.mx-run, .mx-card, .mx-form { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-1); min-width: 0; }

/* ---------- The 90 day run ---------- */
.mx-run { padding: 24px 24px 22px; display: grid; gap: 14px; container: run / inline-size; }
.mx-run-top { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: end; }
@container run (min-width: 620px) { .mx-run-top { grid-template-columns: max-content minmax(0, 1fr); gap: 32px; } .mx-tally { justify-self: end; width: 100%; max-width: 480px; } }
.mx-day { display: grid; gap: 4px; }
.mx-day h2 { font: 600 52px/1 var(--font); letter-spacing: -0.035em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.mx-day .mx-of { font-size: 24px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink-3); }
.mx-day .sub { font-size: 15px; }

.mx-tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; }
.mx-tally > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding: 0 20px; box-shadow: inset var(--hair) 0 0 var(--line-strong); min-width: 0; }
.mx-tally > div:first-child { padding-left: 0; box-shadow: none; }
.mx-tally dt { font-size: 14px; color: var(--ink-3); }
.mx-tally dd { margin: 0; font: 600 26px/1.1 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
@container run (max-width: 619px) { .mx-tally > div { padding: 0 12px; } .mx-tally dd { font-size: 22px; } }

/* 90 ticks, grouped in weeks. Past days in ink, today in the accent. */
.mx-strip { display: flex; gap: 6px; margin-top: 6px; }
.mx-wk { flex: 7 1 0; display: grid; grid-template-rows: 30px 18px; gap: 6px; min-width: 0; border-radius: 6px; cursor: default; }
.mx-ticks { display: flex; align-items: flex-end; gap: 2px; height: 30px; }
.mx-ticks i { flex: 1 1 0; min-width: 1px; height: 20px; border-radius: 2px; background: var(--line-strong); }
.mx-ticks i.past { background: var(--ink-3); }
.mx-ticks i.now { height: 30px; background: var(--primary); }
.mx-wk:hover .mx-ticks i:not(.now) { background: var(--ink-2); }
.mx-wk:hover .mx-ticks i:not(.past):not(.now) { background: color-mix(in srgb, var(--ink-3) 60%, transparent); }
.mx-mark { display: grid; justify-items: center; align-items: start; color: var(--green-ink); }
.mx-strip-cap { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-3); margin-top: -6px; }
@media (max-width: 560px) { .mx-strip { gap: 3px; } .mx-ticks { gap: 1px; } }

.mx-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--amber-wash); color: var(--ink); }
.mx-note svg { margin-top: 3px; color: var(--amber-ink); }
.mx-note.done { background: var(--green-wash); }
.mx-note.done svg { color: var(--green-ink); }
.mx-pace-help { font-size: 14px; color: var(--ink-3); max-width: 76ch; }

/* ---------- Measure cards ----------
   Each card spans 5 rows of a subgrid, so siblings line up row by row. */
.mx-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 32px) / 3)), 1fr)); container: cards / inline-size; }
.mx-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 16px; padding: 20px 20px 18px; align-content: start; }
.mx-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mx-head h3 { font: 600 15px/1.35 var(--font); letter-spacing: -0.005em; color: var(--ink); }
.mx-plat { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--sunken); color: var(--ink); }

.mx-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; align-content: start; }
.mx-now { font: 600 36px/1.05 var(--font); letter-spacing: -0.03em; min-height: 38px; font-variant-numeric: tabular-nums lining-nums; }
.mx-now.none { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-3); display: flex; align-items: flex-end; }
.mx-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; font-size: 14px; }
.mx-delta .tag { gap: 3px; padding: 0 7px 0 5px; }

/* Trend slot: same height whether it holds a line or a note. */
.mx-trend { display: grid; min-height: 92px; }
.mx-trend-none { display: grid; align-content: center; justify-items: start; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunken); font-size: 14px; color: var(--ink-2); }
.mx-trend-none a { font-weight: 500; color: var(--ink); }
@media (pointer: coarse), (max-width: 960px) { .mx-trend-none a { display: inline-flex; align-items: center; min-height: 44px; } }
/* LinkedIn's weekly email total, above the note on the per post card. */
.mx-mail { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 6px; color: var(--ink); }
.mx-mail svg { margin-top: 2px; color: var(--ink-2); }
.mx-mail .num { font-weight: 600; }

.mxs { margin: 0; display: grid; gap: 6px; border-radius: var(--r-sm); }
.mxs:focus-visible { outline-offset: 4px; }
.mxs-plot { position: relative; height: 64px; margin: 0 5px; }
.mxs-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mxs-area { stroke: none; }
.mxs-s0 { stop-color: var(--ink); stop-opacity: 0.11; }
.mxs-s1 { stop-color: var(--ink); stop-opacity: 0; }
.mxs-line { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mxs-end, .mxs-pt { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.mxs-hit { position: absolute; top: -6px; bottom: -6px; cursor: default; }
.mxs-x { position: absolute; top: 6px; bottom: 6px; width: 1px; margin-left: -0.5px; background: var(--line-strong); opacity: 0; transition: opacity var(--duration-quick) var(--ease-out); }
.mxs-pt { background: var(--ink); margin-top: 1px; opacity: 0; transition: opacity var(--duration-quick) var(--ease-out); }
.mxs-hit:hover .mxs-x, .mxs-hit:hover .mxs-pt { opacity: 1; }
.mxs-cap { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-3); }

.mx-prog { display: grid; gap: 8px; align-content: start; }
.mx-prog-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; font-size: 14px; }
.mx-pct { color: var(--ink-2); }
.mx-pct .num { font-weight: 600; color: var(--ink); font-size: 15px; }
.mx-state { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.mx-state svg { color: var(--ink-3); }
.mx-state.ahead svg, .mx-state.on svg, .mx-state.reached svg { color: var(--green-ink); }
.mx-state.behind svg { color: var(--amber-ink); }
.mx-state.away svg { color: var(--red-ink); }
.mx-track { position: relative; }
.mx-track .bar { height: 8px; }
.mx-tick { position: absolute; top: -4px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.mx-ends { display: flex; justify-content: space-between; gap: 12px; margin: 2px 0 0; }
.mx-ends > div { display: grid; gap: 1px; min-width: 0; }
.mx-ends > div:last-child { text-align: right; }
.mx-ends dt { font-size: 14px; color: var(--ink-3); }
.mx-ends dd { margin: 0; font-weight: 600; }
.mx-src { font-size: 14px; color: var(--ink-3); align-self: end; }

/* The odd card out takes the whole row and lays out sideways. */
.mx-card.wide { grid-column: 1 / -1; }
@container cards (min-width: 600px) {
  .mx-card.wide {
    grid-row: span 1; grid-template-rows: auto auto 1fr; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
    grid-template-areas: "head head head" "fig trend prog" "src trend prog"; gap: 12px 32px;
  }
  .mx-card.wide .mx-head { grid-area: head; }
  .mx-card.wide .mx-fig { grid-area: fig; flex-direction: column; align-items: flex-start; }
  .mx-card.wide .mx-trend { grid-area: trend; }
  .mx-card.wide .mx-prog { grid-area: prog; align-self: start; }
  .mx-card.wide .mx-src { grid-area: src; }
}

/* Arrival: lines draw in from the left, then the latest point lands. */
main.enter .mxs-plot svg { animation: mxs-reveal var(--duration-very-slow) var(--ease-smooth-out) var(--duration-fast) both; }
main.enter .mxs-end { animation: mxs-land var(--duration-fast) var(--ease-bounce) calc(var(--duration-very-slow) + var(--duration-fast)) both; }
main.enter .mx-ticks i { animation: mx-tick var(--duration-slow) var(--ease-smooth-out) both; }
main.enter .mx-ticks i.now { animation: mx-now var(--duration-medium) var(--ease-bounce) var(--duration-medium) both; }
@keyframes mxs-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mxs-land { from { transform: scale(0.4); opacity: 0; } }
@keyframes mx-tick { from { transform: scaleY(0.3); opacity: 0; } }
@keyframes mx-now { from { transform: scaleY(0.2); } }
.mx-ticks i { transform-origin: bottom; }

/* ---------- Weekly numbers ---------- */
.mx-form { padding: 20px 22px 22px; display: grid; gap: 16px; }
.mx-form .section-head { margin-bottom: 0; }
.mx-fields { display: grid; gap: 10px; }
.mx-field { display: grid; grid-template-columns: minmax(0, 1fr) 124px; align-items: center; gap: 12px; }
.mx-field label { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 15px; font-weight: 500; min-width: 0; }
.mx-field label > svg { flex: none; color: var(--ink-2); }
.mx-field label > .mono-in { flex: none; }
.mx-field input { min-height: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.mx-in { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; border-radius: 50%; background: var(--green-wash); color: var(--green-ink); }
.mx-field input::placeholder { text-align: right; }
.mx-date { padding-bottom: 10px; margin-bottom: 2px; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--line-strong); grid-template-columns: minmax(0, 1fr) 168px; }
.mx-date input { text-align: left; }
.mx-form .btn.primary { width: 100%; min-height: 44px; font-size: 15px; }
.mx-form .error { margin-top: -4px; }
/* The 42px box above outranks the shared 44px touch rule, so restate it here. */
@media (pointer: coarse), (max-width: 960px) { .mx-field input { min-height: 44px; } }
/* Which numbers the browser scout fills, so he only types the rest. */
.mx-scout { display: flex; align-items: flex-start; gap: 8px; margin-top: -4px; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunken); font-size: 14px; color: var(--ink-2); }
.mx-scout svg { margin-top: 2px; color: var(--ink-3); }
@media (max-width: 400px) { .mx-field { grid-template-columns: minmax(0, 1fr) 116px; } .mx-date { grid-template-columns: minmax(0, 1fr) 150px; } }