/* A-39: dimensional clocks. All decoration is click-through; the original
   controls remain the input and accessibility surface. Sizes follow fitClock. */
#with-timer-minimal[data-physical] .mt-clock > .mt-unit > :is(.mt-number, .mt-number-input) {
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
  caret-color: var(--mt-fg);
}
#with-timer-minimal[data-physical] .mt-clock > .mt-unit > .mt-number-input::selection { color: transparent; background: transparent; }
.mt-physical-digits {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: .035em; pointer-events: none; user-select: none; letter-spacing: 0; direction: ltr;
}
.mt-physical-digit {
  display: inline-block; position: relative; flex: 0 0 .64em; width: .64em; height: 1.12em;
  box-sizing: border-box; isolation: isolate;
}
/* One matte leaf per time unit, with a small edge and pivot. */
.mt-flip-face::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h128v128H0z'/%3E%3C/svg%3E");
  background-size: 128px 128px; opacity: .035; mix-blend-mode: soft-light;
}
[data-physical-style="flip"] .mt-flip-card {
  flex: 0 0 calc(100% - .08em); width: calc(100% - .08em);
  perspective: 5em; border-radius: .045em; background: var(--mt-flip-edge, #080808);
  box-shadow: var(--mt-flip-drop, 0 .012em .006em #000b, 0 .04em .07em -.015em #0009);
}
[data-physical-style="flip"] .mt-flip-card::before {
  content: ""; position: absolute; inset: .007em .008em -.009em; border-radius: inherit;
  border-bottom: .006em solid var(--mt-flip-edge, #272727); background: var(--mt-flip-edge, #121212); pointer-events: none;
}
.mt-flip-face {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden;
  box-sizing: border-box; backface-visibility: hidden;
  border: 0; color: var(--mt-flip-ink, #e2e1dc);
  background: linear-gradient(110deg, #ffffff02, transparent 60%), linear-gradient(#242424, #202020);
  box-shadow: inset 0 max(.5px, .002em) 0 #ffffff0b, inset .002em 0 0 #ffffff04;
}
.mt-flip-top { top: 0; transform-origin: center bottom; border-radius: .045em .045em .004em .004em; }
.mt-flip-bottom {
  bottom: 0; transform-origin: center top; border-radius: .004em .004em .045em .045em;
  background: linear-gradient(#171717, #1c1c1c 22%, #1e1e1e);
  box-shadow: inset 0 .008em .01em var(--mt-flip-seam-shadow, #0006), inset 0 -.002em 0 #ffffff07;
}
.mt-flip-glyph {
  position: absolute; left: 0; right: 0; top: 0; height: 200%; display: grid; place-items: center;
  grid-template-columns: minmax(0, 1fr);
  font-family: "SameTimer Digits Sans", Arial, sans-serif; font-weight: 700;
  font-size: 1.08em; line-height: 1; letter-spacing: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums; transform: translateY(-.015em) scaleX(.94); text-shadow: none;
}
.mt-flip-bottom .mt-flip-glyph { top: auto; bottom: 0; color: var(--mt-flip-ink, #d6d5d0); }
.mt-flip-leaf { z-index: 3; }
.mt-flip-shadow { position: absolute; z-index: 2; inset: 50% 0 0; border-radius: 0 0 .045em .045em; background: linear-gradient(#000, #0007); pointer-events: none; }
.mt-flip-hinge { position: absolute; z-index: 5; inset: calc(50% - .003em) 0 auto; height: max(1px, .006em); background: var(--mt-flip-seam, #080808); box-shadow: 0 .003em .004em var(--mt-flip-seam-shadow, #0008); }
.mt-flip-hinge::before, .mt-flip-hinge::after {
  content: ""; position: absolute; width: .017em; height: .065em; top: -.03em;
  border-radius: .004em; background: var(--mt-flip-pin, linear-gradient(90deg, #111, #454545 40%, #222 70%));
  box-shadow: .003em .003em .005em #0009;
}
.mt-flip-hinge::before { left: 0; } .mt-flip-hinge::after { right: 0; }
/* Molded ABS housings, recessed slots and yellow bevelled shutters. */
[data-physical-style="segment"] .mt-physical-digit {
  border: .012em solid #393c3b; border-radius: .045em;
  background: repeating-linear-gradient(100deg, #ffffff02 0 1px, transparent 1px 3px), linear-gradient(125deg, #2c3030, #181b1b 60%, #252828);
  box-shadow: inset .012em .012em .016em #ffffff0c, inset -.014em -.016em .018em #0009,
    .007em .018em 0 #070909, 0 .035em .025em #0009, .025em .065em .09em #0008;
}
.mt-segment-glass { position: absolute; inset: .035em .025em; width: calc(100% - .05em); height: calc(100% - .07em); overflow: visible; }
.mt-segment-glass g { transform-box: fill-box; transform-origin: center; }
.mt-segment-depth { fill: #080a0a; stroke: #080a0a; stroke-width: 1.4; transform: translateY(1.8px); }
.mt-segment-face { fill: #202424; stroke: #343939; stroke-width: .55; stroke-linejoin: round; }
[data-physical-style="segment"] [data-on="true"] .mt-segment-depth { fill: #896211; stroke: #896211; }
[data-physical-style="segment"] [data-on="true"] .mt-segment-face { fill: var(--mt-shutter-fill); stroke: #ffe383; stroke-width: .7; }
.mt-rivet {
  position: absolute; width: .021em; height: .021em; border-radius: 50%;
  background: linear-gradient(125deg, #656969, #111414 65%); box-shadow: 0 .003em .005em #000;
}
.mt-rivet-tl { top: .025em; left: .025em; } .mt-rivet-tr { top: .025em; right: .025em; }
.mt-rivet-bl { bottom: .025em; left: .025em; } .mt-rivet-br { bottom: .025em; right: .025em; }
/* The SVG fallback uses the same mitres and italic outline as the LED lenses. */
[data-physical-style="led-red"] .mt-physical-digit { flex-basis: .62em; width: .62em; }
[data-physical-style="led-red"] .mt-segment-glass { inset: .025em; height: calc(100% - .05em); }
[data-physical-style="led-red"] .mt-segment-depth { display: none; }
[data-physical-style="led-red"] .mt-segment-face { fill: #130404; stroke: none; }
[data-physical-style="led-red"] [data-on="true"] .mt-segment-face {
  fill: #ffd4b5; stroke: #ff4926; stroke-width: .8;
  filter: drop-shadow(0 0 1px #ff220c) drop-shadow(0 0 4px #ef190577);
}
#with-timer-minimal[data-physical="led-red"] .mt-clock .mt-milliseconds {
  color: #ffd4b5; opacity: .85; transform: skewX(-6deg); transform-origin: center;
  text-shadow: 0 0 .025em #ff3819, 0 0 .07em #f51b0b90;
}
#with-timer-minimal[data-physical] .mt-clock > .mt-colon {
  position: relative; align-self: center; height: 1.12em; line-height: 1; color: transparent; text-shadow: none;
}
#with-timer-minimal[data-physical] .mt-clock > .mt-colon::before,
#with-timer-minimal[data-physical] .mt-clock > .mt-colon::after {
  content: ""; position: absolute; width: .09em; height: .09em; left: calc(50% - .045em); top: 33%;
  border-radius: .009em; background: #e7e4dc; box-shadow: 0 .009em 0 #92928e, 0 .018em .025em #000;
}
#with-timer-minimal[data-physical] .mt-clock > .mt-colon::after { top: auto; bottom: 33%; }
#with-timer-minimal[data-physical="flip"] .mt-clock > .mt-colon::before,
#with-timer-minimal[data-physical="flip"] .mt-clock > .mt-colon::after {
  width: .045em; height: .045em; left: calc(50% - .0225em); border-radius: .004em;
  background: #969592; box-shadow: none;
}
#with-timer-minimal[data-physical="segment"] .mt-clock > .mt-colon::before,
#with-timer-minimal[data-physical="segment"] .mt-clock > .mt-colon::after { background: linear-gradient(#ffe67e, #efb820); box-shadow: 0 .01em 0 #896211, 0 .025em .025em #000; }
#with-timer-minimal[data-physical="led-red"] .mt-clock > .mt-colon::before,
#with-timer-minimal[data-physical="led-red"] .mt-clock > .mt-colon::after {
  border-radius: 50%; background: radial-gradient(circle, #ffdab9 25%, #ff4926 78%);
  box-shadow: 0 0 .018em #ff2525, 0 0 .06em #ed111180;
}
/* Fixed construction samples in the existing dropdown; no new explanatory UI. */
.mt-physical-sample { display: flex; align-items: center; justify-content: center; gap: .05em; font-size: 24px; line-height: 1; direction: ltr; }
.mt-physical-sample .mt-physical-digit { width: .6em; flex-basis: .6em; height: 1.05em; }
.mt-physical-sample[data-physical-style="flip"] .mt-flip-card { width: 1.4em; flex-basis: 1.4em; }
.mt-sample-colon { font-family: Arial, sans-serif; font-size: .6em; }
#with-timer-minimal :is(.mt-theme-preview, .mt-theme-sample):has(.mt-physical-sample) { min-width: 0; overflow: hidden; }
#with-timer-minimal [data-theme-preview]:has(.mt-physical-sample) { padding: 6px; }
#with-timer-minimal [data-theme-preview] .mt-physical-sample { font-size: 20px; }
/* Material clocks keep their numbers fully readable; a narrow gauge runs below. */
#with-timer-minimal[data-physical][data-gauge="on"] .mt-progress {
  display: block; top: auto; bottom: 0; height: 5px; opacity: .9;
  background: var(--mt-digits); border-inline-end: none;
  box-shadow: 0 -2px 12px color-mix(in srgb, var(--mt-digits) 20%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .mt-physical-digit, .mt-physical-digit * { animation: none !important; transition: none !important; }
}
/* A-42: a single transparent 3D surface shares the original input geometry. */
#with-timer-minimal[data-physical] .mt-clock { position: relative; }
.mt-rendered-clock { position: absolute; inset: -.08em -.06em; pointer-events: none; user-select: none; z-index: 1; visibility: hidden; }
/* Let the flip's soft contact shadow finish inside the drawing surface. This
   decoration does not change the card/input grid or the clock's center. */
/* Bound transparent overscan while the next resize updates viewport margins. */
#with-timer-minimal[data-physical="flip"] { overflow-x: clip; }
#with-timer-minimal[data-physical="flip"] .mt-rendered-clock { inset: -.22em; }
.mt-rendered-clock canvas { display: block; width: 100%; height: 100%; }
#with-timer-minimal[data-clock-renderer="webgl"] .mt-rendered-clock { visibility: visible; }
#with-timer-minimal[data-clock-renderer="webgl"] .mt-clock .mt-physical-digits { visibility: hidden; }
#with-timer-minimal[data-clock-renderer="webgl"][data-physical="led-red"] .mt-clock > .mt-colon { visibility: hidden; }
/* The small menu samples and GPU fallback keep the same black material family. */
[data-physical-style="flip"] .mt-flip-face { background: var(--mt-flip-face, linear-gradient(#121315, #0d0e10)); }
[data-physical-style="flip"] .mt-flip-bottom { background: var(--mt-flip-bottom, linear-gradient(#090a0c, #101113)); }
[data-physical-style="segment"] .mt-physical-digit { background: #101214; border-color: #202326; }
[data-physical-style="segment"] [data-on="true"] .mt-segment-face { fill: #efc331; stroke: #b38f21; stroke-width: .5; }

/* Light construction matches the rendered material, including thumbnails and
   the live fallback when WebGL is unavailable. Yellow shutters stay yellow. */
#with-timer-minimal[data-theme="light"] .mt-clock,
#with-timer-minimal [data-preview-scheme="light"] {
  --mt-flip-face: linear-gradient(#faf9f5, #f1efe6);
  --mt-flip-bottom: linear-gradient(#deddd3, #f5f3eb 18%, #eeece3);
  --mt-flip-ink: #252725; --mt-flip-edge: #d5d3c9;
  --mt-flip-seam: #96988e; --mt-flip-seam-shadow: #25272522;
  --mt-flip-pin: linear-gradient(90deg, #92978b, #e4e6df 45%, #7f8579);
  --mt-flip-drop: 0 .01em .008em #25272516, 0 .035em .06em #25272526;
}
#with-timer-minimal[data-theme="light"][data-physical="segment"] .mt-clock > .mt-colon::before,
#with-timer-minimal[data-theme="light"][data-physical="segment"] .mt-clock > .mt-colon::after,
#with-timer-minimal[data-theme="light"][data-physical="flip"] .mt-clock > .mt-colon::before,
#with-timer-minimal[data-theme="light"][data-physical="flip"] .mt-clock > .mt-colon::after {
  background: var(--mt-fg); box-shadow: none;
}
#with-timer-minimal[data-theme="light"][data-physical="segment"] .mt-progress { background: var(--mt-fg); box-shadow: none; }
#with-timer-minimal [data-preview-scheme="light"] .mt-sample-colon { color: #2d302b; }