/* The two figures in the letter's opening (js/losses.js): a year of clock faces (#time-lost) and a year of things
   going missing (#money-lost). Needs site.css and pricing.css. */

#time-lost {
  --pad: clamp(16px, 3vw, 24px);
  padding: var(--pad) var(--pad) calc(var(--pad) - 4px);
  border-radius: 18px; background: var(--card); box-shadow: var(--shadow);
}

/* the clocks' title */
.tl-head { margin-bottom: clamp(14px, 2.4vw, 20px); }
.tl-num {
  font-family: var(--f-display); font-weight: 720; font-variation-settings: "opsz" 72;
  font-size: clamp(30px, 4vw, 40px); line-height: 1; letter-spacing: -.035em; color: var(--ink);
}
/* ---------- time lost ---------- */
.tl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px 4px; }
@media (max-width: 520px) { .tl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 8px; } }
.tl-cell { display: grid; justify-items: center; gap: 5px; }
.tl-clock { width: 100%; max-width: 46px; height: auto; overflow: visible; }
.tl-face { fill: var(--bg-2); stroke: var(--line); stroke-width: 1; }
.tl-pie { fill: none; stroke: var(--hl-mark); }
.tl-ticks line { stroke: var(--ink-3); stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.tl-arc { fill: none; stroke: var(--brass); stroke-width: 2; stroke-linecap: round; }
.tl-hand {
  stroke: var(--ink-2); stroke-width: 1.7; stroke-linecap: round;
  transform-box: view-box; transform-origin: 22px 22px;
}
.tl-pin { fill: var(--ink-2); }
.tl-m { font: 500 10px/1 var(--f-mono); color: var(--ink-3); letter-spacing: .02em; transition: color .4s; }
.tl-cell.full .tl-m { color: var(--ink-2); }

/* ---------- money lost: a pile spilled between the paragraphs ---------- */
#money-lost { margin-block: .2em 1.2em; }
.ml {
  position: relative; container-type: inline-size;
  --u: clamp(.78px, .21cqi, 1.12px);                 /* px per floor unit */
  height: calc(var(--h) * var(--u));
}
@supports not (width: 1cqi) { .ml { --u: 1px; } }
.ml-spot { position: absolute; left: calc(50% + var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: 0; height: 0; }
.ml-obj {
  position: absolute; width: calc(var(--w) * var(--u)); height: calc(var(--hh) * var(--u));
  left: calc(var(--w) * var(--u) / -2); top: calc(var(--hh) * var(--u) / -2);
}
.ml-obj svg {
  display: block; width: 100%; height: 100%; overflow: visible; opacity: var(--item-dim);
  filter: drop-shadow(0 1.5px 1.5px rgba(30, 14, 4, .22)) drop-shadow(0 5px 8px rgba(30, 14, 4, .12));
}
.ml-puff {
  position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--ink-3) 55%, transparent), transparent 70%);
}
.ml-cost {
  position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; pointer-events: none; z-index: 5;
  font-family: var(--f-display); font-weight: 750; font-size: clamp(19px, 2vw, 23px); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--red);
  text-shadow: 0 1px 0 var(--bg), 0 0 10px var(--bg);
}