/* plan-controls.css — the plan switch and the billing switch, ONE copy for every page that
   shows plans (Or approved the design on /pricing, 2.11.2026: "מאשר"; then "תאמת שזה העיצוב
   בכל הדפים שלנו ממש מקצה לקצה"). Used by /pricing and every music-for-* page
   (scripts/build_use_case_page.py links it). Change it here, never in a page.

   .kind            the plan switch: a fully rounded track, tabs inside it (role="tab"), the
                    selected tab a full-height pill (no inset ring, no border, no shadow), a
                    small line icon before each label. Selected label full contrast, others muted.
   .cyc .sw         the billing switch: a 48x28 pill with a 22px round knob.
   .plc-light       the same two controls on a light page (set on any ancestor).

   Colours are variables so the light pages only swap values, never rules. */
:root{
  --plc-track:#232428; --plc-pill:#2c2d32; --plc-on:#fff; --plc-off:rgba(255,255,255,.55); --plc-hover:rgba(255,255,255,.8);
  --plc-focus:#fff;
  --plc-sw-off:#232428; --plc-sw-on:#55565d; --plc-knob-off:#9a9aa3; --plc-knob-on:#fff;
}
.plc-light{
  --plc-track:#ebebee; --plc-pill:#fff; --plc-on:#141416; --plc-off:rgba(20,20,22,.5); --plc-hover:rgba(20,20,22,.78);
  --plc-focus:#141416;
  --plc-sw-off:#dcdce0; --plc-sw-on:#141416; --plc-knob-off:#fff; --plc-knob-on:#fff;
}

/* ── the plan switch ── tabs are 226px each, so a centered switch lands on whole pixels */
html body .kind{display:flex;width:max-content;max-width:100%;margin-left:auto;margin-right:auto;padding:0;border:0;
  box-shadow:none;border-radius:32px!important;background:var(--plc-track)}
html body .kind [role="tab"]{flex:0 0 226px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:64px;
  padding:0 20px;box-sizing:border-box;margin:0;border-radius:32px!important;border:0;box-shadow:none!important;outline:0;
  background:transparent;cursor:pointer;font-family:inherit;font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.2;
  white-space:nowrap;text-decoration:none;color:var(--plc-off);transition:background-color .2s ease,color .2s ease}
.kind [role="tab"] svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kind [role="tab"]:hover{color:var(--plc-hover)}
html body .kind [role="tab"][aria-selected="true"]{background:var(--plc-pill);color:var(--plc-on)}
.kind [role="tab"]:focus-visible{outline:2px solid var(--plc-focus);outline-offset:3px}
@media (max-width:600px){
  html body .kind{width:100%}
  html body .kind [role="tab"]{flex:1 1 0;min-width:0;height:52px;gap:7px;padding:0 6px;font-size:14.5px}
  .kind [role="tab"] svg{width:17px;height:17px}
}

/* ── the billing switch ── site-shapes.css squares every .sw with !important; the pill radius
   is restated with a stronger selector */
.cyc .sw{position:relative;flex:none;width:48px;height:28px;padding:0;border:0;cursor:pointer;
  background:var(--plc-sw-off);box-shadow:none;transition:background .25s ease}
html body .cyc .sw{border-radius:999px!important}
.cyc .sw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--plc-knob-off);
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .25s ease,background .25s ease}
.cyc .sw[aria-checked="true"]{background:var(--plc-sw-on)}
.cyc .sw[aria-checked="true"] i{transform:translateX(20px);background:var(--plc-knob-on)}
.cyc .sw:focus{outline:none}
.cyc .sw:focus-visible{outline:2px solid var(--plc-focus);outline-offset:3px}