/* Pins pane (PinsPane.swift): tiles use .tile from notch.css; these are the pieces specific to pins. */
.pins { position: relative; height: 100%; }

/* The dashed "add a tile" tile */
.tile.pin-add {
  flex: 1; align-items: center; justify-content: center; gap: 6px; background: none; color: var(--dim);
  outline: 1px dashed var(--rule); outline-offset: -1px;
}
.tile.pin-add:hover { color: var(--ink); outline-color: rgba(255, 255, 255, 0.34); }
.tile.pin-add svg { width: 18px; height: 18px; }
.pins .wall .tile { flex: 1; }

/* Now playing (no press tilt: the controls are the buttons) */
.tile.pin-player:active { transform: none; }
.pin-player .pin-ctl {
  width: 24px; height: 20px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  display: grid; place-items: center;
}
.pin-player .pin-ctl svg { width: 13px; height: 13px; }
.pin-player .pin-ctl:active { opacity: 0.6; }
.pin-player::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.2); }
.pin-progress { position: absolute; left: 0; bottom: 0; height: 2px; background: #fff; z-index: 1; transition: width 1s linear; }

/* Context menu and pretend pickers */
.pin-menu { position: absolute; z-index: 30; min-width: 160px; }
.popover .sep { height: 1px; margin: 4px 8px; background: rgba(255, 255, 255, 0.14); }
.popover.pick { min-width: 230px; }
.popover .pick-head { padding: 4px 10px 3px; font: 500 11px var(--nf); color: var(--faint); }
.popover.pick button { display: flex; flex-direction: column; gap: 1px; }
.popover.pick button span { font-size: 10px; color: var(--faint); }
.popover.pick button:hover span { color: rgba(255, 255, 255, 0.75); }

/* The inline AddPin form, outlined in the accent */
.pin-form { padding: 14px; border: 1.5px solid var(--accent); }
.pin-form .chip svg { width: 13px; height: 13px; }