/* Surface effects only. Geometry, base colors, page backgrounds and layout stay in the original styles. */
.btn:not(:disabled),.nav button.active,.agenda-live-dates .range-exact>.period-date-button,.calendar-icon:not(:disabled){
  background-image:linear-gradient(165deg,var(--highlight-soft),transparent 45%,var(--shade-soft));
  box-shadow:inset 0 1px 0 var(--highlight),inset 0 -1px 0 var(--shade),0 2px 5px var(--shade-soft);
}
.btn.primary:not(:disabled),.nav button.active{
  background-image:linear-gradient(165deg,var(--highlight-strong),transparent 48%,var(--shade-soft));
  box-shadow:inset 0 1px 0 var(--highlight-bright),inset 0 -1px 0 var(--shade),0 2px 6px var(--shade);
}
@media(hover:hover){
  .btn:not(:disabled):hover,.agenda-live-dates .range-exact>.period-date-button:hover,.calendar-icon:not(:disabled):hover{
    background-image:linear-gradient(165deg,var(--highlight),transparent 48%,var(--shade-soft));
    box-shadow:inset 0 1px 0 var(--highlight-strong),inset 0 -1px 0 var(--shade),0 2px 6px var(--shade);
  }
}
.btn:not(:disabled):active,.nav button.active:active,.agenda-live-dates .range-exact>.period-date-button:active,.calendar-icon:not(:disabled):active{
  background-image:linear-gradient(var(--shade-soft),transparent);
  box-shadow:inset 0 2px 4px var(--shadow),inset 0 -1px 0 var(--highlight-soft);
}
/* Keep the age track's existing color stops and both native thumb geometries. */
.age-range-track{box-shadow:inset 0 1px 0 var(--highlight),inset 0 -1px 1px var(--shadow)}
.age-range input::-webkit-slider-thumb{background-image:linear-gradient(150deg,var(--highlight-bright),transparent 55%,var(--shade-soft));box-shadow:0 0 0 1px var(--acid),inset 0 1px 0 var(--highlight-bright),0 2px 3px var(--shadow)}
.age-range input::-moz-range-thumb{background-image:linear-gradient(150deg,var(--highlight-bright),transparent 55%,var(--shade-soft));box-shadow:inset 0 1px 0 var(--highlight-bright),0 2px 3px var(--shadow)}
.request-range-track .time-segment.selected,.agenda-personal-track .selection-track .selected{
  background-image:linear-gradient(var(--highlight-strong),transparent 45%,var(--shade-soft));
  box-shadow:inset 0 1px 0 var(--highlight-strong),inset 0 -1px 0 var(--shade-soft);
}
.request-range-track input[type=range]::-webkit-slider-thumb{background-image:linear-gradient(150deg,var(--highlight-bright),transparent 60%,var(--shade-soft))}
.request-range-track input[type=range]::-moz-range-thumb{background-image:linear-gradient(150deg,var(--highlight-bright),transparent 60%,var(--shade-soft))}
/* Thin time handles retain their transparent hit area and exact 4 px visible rail. */
.request-compact-form .request-range-track input[type=range]::-webkit-slider-thumb,.agenda-handle-rail input::-webkit-slider-thumb{
  background-image:linear-gradient(90deg,transparent 9px,var(--surface) 9px,var(--surface) 10px,var(--text) 10px,var(--acid) 12px,var(--text) 14px,var(--surface) 14px,var(--surface) 15px,transparent 15px);
}
.request-compact-form .request-range-track input[type=range]::-moz-range-thumb,.agenda-handle-rail input::-moz-range-thumb{
  background-image:linear-gradient(90deg,transparent 9px,var(--surface) 9px,var(--surface) 10px,var(--text) 10px,var(--acid) 12px,var(--text) 14px,var(--surface) 14px,var(--surface) 15px,transparent 15px);
}