/* The plan is retired (owner, 30.10.2026): no pill, dock or ledger. What stays is the look of the old «+ Add to plan»
   buttons, which look/plan.js turns into «Ask about this screen →» buttons at runtime (.wl-ask, look/cta.css), until the
   templates print [data-ask] buttons themselves. Colour names from look/tokens.css with fallbacks. */
.wl-add {
  --p-ink: var(--ink, #0c111b); --p-blue: var(--blue, #285ff5); --p-glass: var(--glass, rgba(255,255,255,.66)); --p-edge: rgba(255,255,255,.8);
  appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font: 580 14.5px/1 var(--font, 'Geist', 'Helvetica Neue', Arial, sans-serif); color: var(--p-ink);
  background: var(--p-glass); border: 1px solid var(--p-edge); box-shadow: 0 10px 30px -16px rgba(12,17,27,.3);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background-color .18s var(--ease-ui, ease), color .18s var(--ease-ui, ease);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wl-add { --p-ink: var(--ink, #e9eef7); --p-glass: rgba(21,26,34,.7); --p-edge: rgba(255,255,255,.09); } }
:root[data-theme="dark"] .wl-add { --p-ink: var(--ink, #e9eef7); --p-glass: rgba(21,26,34,.7); --p-edge: rgba(255,255,255,.09); }
[data-surface="night"] .wl-add { --p-ink: var(--ink-night, #e9eef7); --p-glass: var(--glass-night, rgba(10,15,26,.62)); --p-edge: rgba(255,255,255,.12); }
.wl-add:hover { border-color: rgba(40,95,245,.4); }
.wl-add:focus-visible { outline: 2px solid var(--p-blue); outline-offset: 2px; }
.wl-add[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .wl-add { transition: none; } }