/* The callout lane is separate from cabinets, worktops and remainder targets. */
.filler-callouts[hidden], .filler-callout[hidden] { display: none; }
.filler-callouts { min-width: 0; }
.filler-callout-lines { display: block; width: 100%; height: var(--space-sm); overflow: hidden; pointer-events: none; }
.filler-callout-lines path { fill: none; stroke: var(--color-text-muted); stroke-width: var(--size-line-width); }
.filler-callout-lines path.selected { stroke: var(--color-accent); stroke-width: var(--size-border-selected); }
.filler-callout-scroll { width: 100%; overflow: visible; padding: 0; }
.filler-callout-items { position: relative; height: var(--size-filler-callout-height); }
.filler-callout { position: absolute; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; width: calc(var(--size-touch-min) + var(--space-lg) + var(--space-xs)); height: var(--size-touch-min); padding: var(--space-xs); border: var(--size-line-width) solid var(--color-line); border-radius: var(--size-radius-field); background: var(--color-tile-filler); color: var(--color-text); font-family: var(--font-family); font-size: var(--font-size-label); cursor: pointer; }
.filler-callout span { font-size: var(--font-size-caption); line-height: 1; }
.filler-callout small { color: var(--color-text-muted); font-size: var(--font-size-caption); line-height: 1; }
.filler-callout[aria-pressed="true"] { border-color: var(--color-accent); outline: var(--size-border-selected) solid var(--color-accent); outline-offset: calc(-1 * var(--size-border-selected)); font-weight: var(--font-weight-bold); }
.filler-callout[aria-pressed="true"] small { color: var(--color-accent); }
.filler-callout:focus-visible { outline: var(--size-border-selected) solid var(--color-accent); outline-offset: var(--size-line-width); }