/* 3D Sand Timer. The canvas (or the flat SVG) fills the stage; the time
   left and the buttons sit underneath the glass. */

.sg { overflow: hidden; }
.sg-host { cursor: pointer; }

.sg-time {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  bottom: calc(clamp(36px, 8.4cqmin, 84px) + 2 * clamp(8px, 2.6cqmin, 28px) - .4cqmin);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.sg-digits {
  font: 600 clamp(20px, 7.4cqmin, 120px)/1.05 var(--font-display); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--stage-ink);
}
.sg-sub {
  min-height: 1.2em; font: 650 clamp(10px, 2.4cqmin, 26px)/1.2 var(--font-display);
  letter-spacing: .07em; text-transform: uppercase; color: color-mix(in srgb, var(--stage-ink) 55%, transparent);
}
.sg-sub:empty { min-height: 0; }
.sg.no-time .sg-time { display: none; }
.sg[data-phase="paused"] .sg-digits { animation: t-flash 1.6s ease-in-out infinite; }
.sg[data-phase="done"] .sg-sub { color: var(--danger); }
.sg[data-phase="done"] .sg-digits { color: color-mix(in srgb, var(--stage-ink) 45%, transparent); }

.sg-dur { min-width: 4.4em; justify-content: center; font-variant-numeric: tabular-nums; }

/* ---- the flat hourglass ---- */
.sgf-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
.sgf { position: absolute; inset: 1.5cqmin; width: calc(100% - 3cqmin); height: calc(100% - 3cqmin); overflow: visible; }
.sgf-flip { --sg-glass: color-mix(in srgb, var(--stage-ink) 5%, transparent); }
.sgf-glass-bg { fill: var(--sg-glass); }
.sgf-glass { fill: none; stroke: color-mix(in srgb, var(--stage-ink) 38%, transparent); stroke-width: 2.4; }
.sgf-shine { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 5; stroke-linecap: round; opacity: .7; }
.sgf-sand { fill: var(--sg-sand, #d6a55a); }
.sgf-stream { stroke: var(--sg-sand, #d6a55a); stroke-width: 3; stroke-linecap: round; }
.sgf-w0 { stop-color: #c99460; }
.sgf-w1 { stop-color: #a8703f; }
.sgf-w2 { stop-color: #774523; }
.sgf-post { stroke: rgba(0, 0, 0, .12); stroke-width: 1; }
.sgf-cap { stroke: rgba(0, 0, 0, .18); stroke-width: 1; }
.sgf-shadow { fill: rgba(0, 0, 0, .14); filter: blur(4px); }

@container (max-width: 340px) {
  .sg-dur { display: none; }
}
@container (max-height: 300px) {
  .sg-sub { display: none; }
}