/* Piggyback controls: buttons, segmented choices, switches and text fields.
   Round and glassy: frosted or tinted glass, a soft sheen on top, a gentle glow underneath. Needs tokens.css.
   Glass looks best over something with colour; see .pb-backdrop in page.css. */

/* Buttons: tinted glass with a soft sheen and a gentle coloured glow. */
.pb-btn {
  --tint: var(--pb-blue);
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 60%),
    color-mix(in srgb, var(--tint) 90%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  color: #FFFFFF;
  font: 600 16px/1 var(--pb-font);
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 18px -10px color-mix(in srgb, var(--tint) 75%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pb-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 24px -10px color-mix(in srgb, var(--tint) 80%, transparent); }
.pb-btn:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px -8px color-mix(in srgb, var(--tint) 70%, transparent); }
.pb-btn:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 3px var(--pb-paper), 0 0 0 5px color-mix(in srgb, var(--tint) 60%, transparent); }
.pb-btn:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }
.pb-btn.secondary {
  border-color: var(--pb-glass-edge);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%), var(--pb-glass);
  color: var(--pb-ink);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--pb-glass-edge), 0 0 0 1px var(--pb-glass-line), 0 6px 18px -12px rgba(20, 22, 26, 0.3);
}
.pb-btn.success { --tint: var(--pb-green); }
.pb-btn.danger { --tint: var(--pb-bad); }
.pb-btn.block { width: 100%; }
.pb-btn.small { min-height: 40px; padding: 0 18px; font-size: 15px; }

/* Segmented choice: a flat frosted track; the chosen option a glossy pink pill with white text. */
.pb-seg {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--pb-glass-edge);
  border-radius: 999px;
  background: var(--pb-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px var(--pb-glass-line);
}
.pb-seg button {
  appearance: none;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--pb-muted);
  font: 600 15px/1 var(--pb-font);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.pb-seg button:hover:not(:disabled):not([aria-selected="true"]):not([aria-pressed="true"]) { color: var(--pb-ink); }
.pb-seg button[aria-selected="true"],
.pb-seg button[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, var(--pb-pink), var(--pb-pink-deep));
  color: #FFFFFF;
  text-shadow: 0 1px 1px rgba(150, 30, 75, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 12px -8px color-mix(in srgb, var(--pb-pink-deep) 80%, transparent);
}
.pb-seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.pb-seg button:focus-visible { outline: 2px solid var(--pb-blue); outline-offset: 2px; }

/* Full-width version: equal-width options filling the row. */
.pb-seg.fill { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
.pb-seg.fill button { padding: 0 8px; }

/* Switch: a flat glass track and a glossy knob. */
.pb-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.pb-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pb-switch .track {
  position: relative;
  flex: none;
  width: 50px;
  height: 30px;
  border: 1px solid var(--pb-glass-edge);
  border-radius: 999px;
  background: var(--pb-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px var(--pb-glass-line);
  transition: background 0.25s, box-shadow 0.25s;
}
.pb-switch .track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #FFFFFF 40%, #E9ECF2 100%);
  box-shadow: 0 1px 3px rgba(20, 22, 26, 0.2), 0 0 0 0.5px rgba(20, 22, 26, 0.06);
  transition: transform 0.25s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.pb-switch input:checked + .track {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 60%), var(--pb-green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 12px -8px color-mix(in srgb, var(--pb-green) 75%, transparent);
}
.pb-switch input:checked + .track::after { transform: translateX(20px); }
.pb-switch input:focus-visible + .track { outline: 2px solid var(--pb-blue); outline-offset: 3px; }
/* Row version: label on the left, switch on the right, full width. */
.pb-switch.row { display: flex; width: 100%; justify-content: space-between; }
.pb-switch b { display: block; font-weight: 600; line-height: 1.2; }
.pb-switch small { display: block; color: var(--pb-muted); font-size: 13px; }

/* Text fields: flat frosted glass, glowing blue on focus. */
.pb-label { display: grid; gap: 6px; text-align: left; font-size: 14px; font-weight: 600; }
.pb-input {
  appearance: none;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid var(--pb-glass-edge);
  border-radius: 999px;
  background: var(--pb-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: var(--pb-ink);
  font: 400 16px/1.2 var(--pb-font);
  box-shadow: 0 0 0 1px var(--pb-glass-line);
  transition: box-shadow 0.2s;
}
.pb-input::placeholder { color: var(--pb-muted); }
.pb-input:focus { outline: none; box-shadow: 0 0 0 1px var(--pb-blue), 0 0 0 5px color-mix(in srgb, var(--pb-blue) 22%, transparent); }

/* Text links */
.pb-link { color: var(--pb-blue); font-weight: 600; text-decoration: none; }
.pb-link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pb-btn, .pb-seg button, .pb-switch .track, .pb-switch .track::after, .pb-input { transition: none; }
}