@layer overscan {
ov-dial {
  position: relative;
  display: block;
  inline-size: var(--ov-dial-size, 92px);
  aspect-ratio: 1;
  cursor: ns-resize;
  touch-action: none;
}
.ov-dial__svg { inline-size: 100%; block-size: 100%; display: block; }
.ov-dial__tick { stroke: var(--ov-line-strong); stroke-width: 1.2; }
.ov-dial__body {
  fill: var(--ov-raised);
  stroke: var(--ov-line-strong);
  stroke-width: var(--ov-bezel);
}
.ov-dial__pointer {
  stroke: var(--ov-accent);
  stroke-width: 2.4;
  stroke-linecap: butt;
}
.ov-dial__read {
  position: absolute;
  inset-block-end: -2px;
  inset-inline: 0;
  text-align: center;
  font-size: var(--ov-size-1);
  color: var(--ov-dim);
  font-variant-numeric: tabular-nums;
}
ov-dial:focus-visible { outline: 2px solid var(--ov-accent); outline-offset: 2px; }
.ov-slider {
  appearance: none;
  inline-size: 100%;
  background: none;
  cursor: pointer;
}
.ov-slider::-webkit-slider-runnable-track {
  block-size: 6px;
  background: var(--ov-panel);
  border: var(--ov-rule) solid var(--ov-line-strong);
}
.ov-slider::-moz-range-track {
  block-size: 6px;
  background: var(--ov-panel);
  border: var(--ov-rule) solid var(--ov-line-strong);
}
.ov-slider::-webkit-slider-thumb {
  appearance: none;
  inline-size: 10px;
  block-size: 18px;
  margin-block-start: -7px;
  background: var(--ov-accent);
  border: 0;
}
.ov-slider::-moz-range-thumb {
  inline-size: 10px;
  block-size: 18px;
  border-radius: 0;
  background: var(--ov-accent);
  border: 0;
}
.ov-slider:focus-visible { outline: 2px solid var(--ov-accent); outline-offset: 4px; }
.ov-btn-group,
.ov-btn--split { display: inline-flex; }
.ov-btn-group .ov-btn,
.ov-btn--split > .ov-btn {
  clip-path: none;
  --ov-cut-tl: 0px;
  --ov-cut-tr: 0px;
  --ov-cut-bl: 0px;
  --ov-cut-br: 0px;
}
.ov-btn-group .ov-btn + .ov-btn,
.ov-btn--split > .ov-btn + .ov-btn {
  margin-inline-start: calc(var(--ov-btn-border) * -1);
}
.ov-btn-group .ov-btn:first-child,
.ov-btn--split > .ov-btn:first-child {
  --ov-cut-tl: var(--ov-ctl-chamfer);
  --ov-cut-bl: var(--ov-ctl-chamfer);
  clip-path: polygon(
    var(--ov-ctl-chamfer) 0,
    100% 0,
    100% 100%,
    var(--ov-ctl-chamfer) 100%,
    0 calc(100% - var(--ov-ctl-chamfer)),
    0 var(--ov-ctl-chamfer));
}
.ov-btn-group .ov-btn:last-child,
.ov-btn--split > .ov-btn:last-child {
  --ov-cut-tr: var(--ov-ctl-chamfer);
  --ov-cut-br: calc(var(--ov-ctl-corner) + var(--ov-ctl-chamfer));
  clip-path: polygon(
    0 0,
    calc(100% - var(--ov-ctl-chamfer)) 0,
    100% var(--ov-ctl-chamfer),
    100% calc(100% - var(--ov-ctl-corner) - var(--ov-ctl-chamfer)),
    calc(100% - var(--ov-ctl-corner) - var(--ov-ctl-chamfer)) 100%,
    0 100%);
}
.ov-btn--split > .ov-btn + .ov-btn {
  --ov-tick-tl: 0px;
  --ov-tick-bl: 0px;
  --ov-ctl-edge: 0px;
}
.ov-btn--split > .ov-btn:not(:last-child) {
  --ov-tick-tr: 0px;
  --ov-tick-br: 0px;
}
.ov-btn-group .ov-btn:only-child,
.ov-btn--split > .ov-btn:only-child {
  --ov-cut-tl: var(--ov-ctl-chamfer);
  --ov-cut-bl: var(--ov-ctl-chamfer);
  clip-path: var(--ov-ctl-clip);
}
.ov-btn--icon { padding-inline: 10px; }
.ov-btn--split > .ov-btn:last-child { padding-inline: 9px; }
.ov-btn--quiet {
  background: none;
  border-color: transparent;
  color: var(--ov-dim);
}
.ov-btn--quiet:hover { color: var(--ov-ink); border-color: var(--ov-line); }
.ov-btn--danger { color: var(--ov-alarm); border-color: var(--ov-alarm); }
.ov-btn--danger:hover { background: var(--ov-alarm); color: var(--ov-field); }
ov-hold { display: inline-block; }
.ov-hold__btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}
.ov-hold__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0;
  background: var(--ov-accent);
  opacity: 0.26;
  pointer-events: none;
}
.ov-hold__label, .ov-hold__price { position: relative; }
.ov-hold__price { color: var(--ov-alarm); font-size: var(--ov-size-1); }
ov-hold[data-ov-committed] .ov-hold__btn { border-color: var(--ov-accent); }
ov-hold[data-ov-committed] .ov-hold__label::after { content: " / committed"; color: var(--ov-accent); }
ov-hold[data-ov-cancelled] .ov-hold__label::after { content: " / cancelled"; color: var(--ov-alarm); }
@media (prefers-reduced-motion: reduce) {
  .ov-hold__fill { transition: none !important; }
}
[popover].ov-pop {
  margin: 0;
  padding: 4px 0 calc(4px + var(--ov-corner));
  inline-size: max-content;
  min-inline-size: 170px;
  background: var(--ov-raised);
  color: var(--ov-ink);
  font-family: var(--ov-font-mono);
  font-size: var(--ov-size-2);
  letter-spacing: var(--ov-track);
  border: var(--ov-bezel) solid var(--ov-line-strong);
  position-area: block-end span-inline-end;
  position-try-fallbacks: block-start span-inline-end, block-end span-inline-start;
}
[popover].ov-pop:popover-open { display: block; }
.ov-pop__item {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 6px 14px;
  text-transform: var(--ov-case);
  cursor: pointer;
}
.ov-pop__item:hover,
.ov-pop__item:focus-visible {
  background: var(--ov-lit-bg);
  color: var(--ov-lit-fg);
  outline: none;
}
.ov-pop__item span { color: var(--ov-faint); }
.ov-pop__item[aria-disabled="true"] { color: var(--ov-faint); cursor: not-allowed; }
.ov-pop__sep { block-size: var(--ov-rule); background: var(--ov-line); margin: 4px 0; }
ov-sound-switch { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ov-sound__cat { font-size: var(--ov-size-1); color: var(--ov-faint); }
ov-sound-switch[data-ov-on] .ov-sound__cat { color: var(--ov-dim); }
.ov-sound__cat input:disabled { opacity: 0.4; cursor: not-allowed; }
}