/* surface-dot-matrix — the panel face. The dots themselves are canvas; this file owns the glass, the mask and fallbacks. */
.mc-dotm {
  --mc-dotm-face: color-mix(in oklab, var(--mc-bg) 6%, black); /* palette-exception: a device face is dark glass in both themes */
  --mc-dotm-rim: color-mix(in oklab, var(--mc-fg) 14%, transparent);
  --mc-dotm-inset: 7%;
  --mc-dotm-border-w: 1px;
  position: relative; display: block; inline-size: 100%; aspect-ratio: var(--mc-dotm-aspect, 1 / 1);
  border-radius: var(--mc-radius-lg); overflow: hidden; isolation: isolate; contain: layout paint;
  color: var(--mc-fg);
}
.mc-dotm[data-face="device"] {
  background:
    radial-gradient(120% 90% at 30% 0%, color-mix(in oklab, white 9%, transparent), transparent 55%), /* palette-exception: glass sheen */
    var(--mc-dotm-face);
  box-shadow: inset 0 0 0 var(--mc-dotm-border-w) var(--mc-dotm-rim), inset 0 1px 0 color-mix(in oklab, white 10%, transparent); /* palette-exception: rim light */
}
.mc-dotm[data-face="flush"] { background: transparent; }
.mc-dotm[data-shape="circle"] { border-radius: 50%; }
.mc-dotm[data-shape="square"] { --mc-dotm-inset: 3.5%; }
.mc-dotm[data-shape="square"][data-wide] { border-radius: var(--mc-radius); }
.mc-dotm__canvas { position: absolute; inset: var(--mc-dotm-inset); inline-size: calc(100% - 2 * var(--mc-dotm-inset)); block-size: calc(100% - 2 * var(--mc-dotm-inset)); display: block; }
.mc-dotm[data-shape="square"][data-wide] .mc-dotm__canvas { inset: 10% 2%; inline-size: 96%; block-size: 80%; }
.mc-dotm__sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the panel has no CSS motion of its own; the canvas sleeps at rest. Reduced motion: a still frame, no persistence trail (JS). */
@media (prefers-reduced-motion: reduce) { .mc-dotm, .mc-dotm__canvas { transition: none; animation: none; } }
@media (prefers-contrast: more) { .mc-dotm { --mc-dotm-border-w: 2px; --mc-dotm-rim: var(--mc-fg); } }
/* forced colours: the poster (a still frame drawn in CanvasText) inside a system-colour border */
@media (forced-colors: active) {
  .mc-dotm, .mc-dotm[data-face="device"] { background: Canvas; color: CanvasText; border: 2px solid CanvasText; box-shadow: none; forced-color-adjust: none; }
}
:root[data-mc-forced="active"] .mc-dotm { background: Canvas; color: CanvasText; border: 2px solid CanvasText; box-shadow: none; }