/* tend.net.au: the AMF page only (design 05, "Your pace to 30 September"). Linked from amf.html's "styles". */

/* Moved from site.css (2026-11-07): rules only this page uses, so other pages don't carry them. */
@media (max-width: 719.98px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-stack, .table-stack tbody { display: block; background: transparent; }
  .table-stack tr { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-default); }
  .table-stack th, .table-stack td { display: block; border: 0; padding: var(--space-1) 0; }
  .table-stack td[data-label]::before { content: attr(data-label); display: block; font-size: var(--step-small); color: var(--muted); }
  .table-stack td.ref { white-space: normal; }
}
.cite { display: inline-block; font-size: var(--step-eyebrow); font-weight: 500; letter-spacing: 0.02em; color: var(--stone-700); background: var(--mist); border: 1px solid var(--rule); border-radius: var(--radius-xs); padding: 2px var(--space-2); white-space: nowrap; }
/* The year line (AMF): a timeline across the financial year. */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 2px solid var(--rule); }
.timeline li { position: relative; padding: 0 0 var(--space-6) var(--space-6); }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 0.35em; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-page); border: 2px solid var(--marigold-500); }
.timeline strong { display: block; color: var(--ink); }
@media (min-width: 960px) {
  .timeline { grid-template-columns: repeat(3, 1fr); border-left: 0; border-top: 2px solid var(--rule); }
  .timeline li { padding: var(--space-6) var(--space-6) 0 0; }
  .timeline li::before { left: 0; top: -7px; }
}


/* The words in a card on the left, the field of houses on the right (under the card on phones): no frame,
   just the houses on a pale meadow, so it sits in the background of the reading. */
.pace-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; } /* minmax: the slider's intrinsic width never widens the page */
.pace { position: relative; overflow: hidden; }
.pace-card { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); background: color-mix(in srgb, var(--bg-surface) 90%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--rule); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.pace-card > * { margin: 0; }
.pace-card .tt { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); }
/* the canvas lies under the whole section from 960 px, and inside .pace-field on phones (pace.js) */
.pace-field { position: relative; height: 300px; }
.pace-stage { display: none; }
.pace-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (min-width: 960px) {
  .pace-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-10); }
  .pace-field { height: 100%; min-height: 520px; }
}

/* Phones (owner, 2026-11-06): no card. pace.js puts the sentence, the houses and the controls in one frame sized
   to the screen less the sticky sub-nav, the slider at the bottom and the houses straight above it, so sliding and
   watching happen together. The explanation follows the frame. The frame is in the HTML and shows under .js (set
   by early.js), so its room is kept from first paint and nothing jumps when pace.js fills it. */
@media (max-width: 959.98px) {
  .pace-card { padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pace-grid > .pace-field { display: none; } /* it moves into the frame; with JS off there are no houses to hold room for */
  .js .pace-stage { display: flex; flex-direction: column; gap: var(--space-3); height: clamp(440px, calc(100vh - 72px), 720px); height: clamp(440px, calc(100svh - 72px), 720px); padding: var(--space-4); background: var(--bg-surface); border: 1px solid var(--rule); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); scroll-margin-top: 64px; }
  .pace-stage .pace-field { flex: 1; min-height: 0; height: auto; margin: 0 calc(-1 * var(--space-4)); }
  .pace-stage .pace-out { min-height: 0; font-size: var(--step-body); line-height: 1.45; }
  .pace-stage .pace-out b { font-size: 1.3em; }
}

/* The controls (pace.js builds them; with JS off the sum stands alone). */
.pace-label { font-weight: 600; color: var(--ink); }
.pace-row { display: flex; align-items: center; gap: var(--space-4); }
.pace-num { width: 5.2em; min-height: 52px; padding: var(--space-1) var(--space-2); border: 1px solid var(--stone-400); border-radius: 10px; background: var(--bg-surface); color: var(--ink); font: 380 1.75rem/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.pace-num.is-invalid { border: 2px solid var(--marigold-500); }
.pace-range { flex: 1; min-width: 0; min-height: 44px; accent-color: var(--leaf-700); }
.pace-warn { font-size: var(--step-small); color: var(--marigold-700); }
.pace-out { min-height: 4.6em; font-size: var(--step-lead); line-height: 1.55; color: var(--stone-700); }
.pace-out b { font-family: var(--font-display); font-weight: 400; font-size: 1.45em; line-height: 1; color: var(--leaf-800); font-variant-numeric: lining-nums; white-space: nowrap; }
.pace-sum { font-size: var(--step-small); color: var(--muted); }
.pace-live .pace-sum { order: 9; }
.pace-controls { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 720px) { .pace-card { padding: var(--space-6); } } /* a card: 16, then 24 (design 08) */