/* User-requested hover: retain the Interactive test card accent, keep all other
   feedback neutral and quiet. These are adaptations of the existing palette. */
:root {
 --hover-surface:color-mix(in srgb,var(--surface-light) 50%,var(--canvas));
 --card-hover-surface:color-mix(in srgb,var(--brand) 8%,var(--canvas));
 --card-hover-border:color-mix(in srgb,var(--brand) 55%,var(--border-input));
}
:root :is(a[href],button,summary,input,select,textarea,[role=button],[role=tab],[role=option],[role=slider],[draggable=true],.saved-toggle,.ui-switch,.file-label,.shl-booth) {
 transition:background-color 140ms var(--ease),filter 140ms var(--ease);
}
.interactive-example-card,.interactive-example-card>.ui-card-body,.interactive-example-card::after {
 transition:background-color 140ms var(--ease),border-color 140ms var(--ease),box-shadow 140ms var(--ease);
}
@media (hover:hover) and (pointer:fine) {
 /* Faint grey for links and other clickable surfaces. Text and borders retain
    their normal colours; focus and selection treatments remain independent. */
 :root :is(a[href],summary,[role=button],[draggable=true],.shl-booth):not(button,.ui-button,.ui-reasoning,.sidebar nav a.active,[draggable=true],:disabled,[aria-disabled=true],[aria-disabled=true] *,[inert] *,svg *):hover {
  background-color:var(--hover-surface);
 }
 :root .sidebar nav a:not(.active):hover { background:var(--hover-surface); }
 :root .sidebar nav a.active:hover { filter:brightness(.96); }
 :root .numerical-footer a:hover { text-decoration:none; }
 :root a.ui-reasoning:hover {
  background-color:var(--hover-surface);background-blend-mode:multiply;
 }
 :root :is(input,select,textarea):not(:disabled,[aria-disabled=true],[readonly],[type=checkbox],[type=hidden],[type=file],.custom-select-native):hover {
  background-color:var(--surface-light);
 }
 :root :is(.saved-toggle,.ui-switch,.file-label):not(:has(input:disabled),[aria-disabled=true]):hover { background-color:var(--hover-surface); }
 :root label[for]:not(:has(:disabled)):hover { cursor:pointer; }
 /* Darken each button's own appearance so navy, orange, green and selected
    controls retain their meaning. Transparent buttons receive a grey base. */
 :root :is(button,.ui-button,input[type=checkbox],[role=slider],svg [role=button],[draggable=true]):not(:disabled,[aria-disabled=true],[aria-disabled=true] *,[inert] *, .interactive-example-card .ui-button):hover {
  filter:brightness(.96);
 }
 :root :is(.ui-button--outline,.ui-button--ghost,.custom-select-option,.shl-calendar button,.shl-template-dates .calendar-day):not(:disabled,[aria-disabled=true],.active,.selected,.current,[aria-pressed=true],[aria-selected=true]):hover {
  background-color:var(--hover-surface);
 }
 :root .shl-page :is(.shl-reset,.shl-next):hover { background:#1d3d6a; }
 :root .shl-slot:hover:not(.locked) { box-shadow:none; }
 :root :is(.shl-calendar button,.shl-template-dates .calendar-day):not(.selected):hover { border-color:transparent; }
 :root .shl-template-dates .calendar-day.selected:hover { border-color:#111; }
 :root .source-page-step:hover { color:var(--text-secondary); }
 /* Retain the current orange tint, border and soft shadow only on these cards.
    Filtering the stretched action link would shrink its full-card hit area. */
 :root .interactive-example-card:hover {
  background:var(--card-hover-surface);box-shadow:0 4px 12px rgb(0 0 0 / .1);
 }
 :root .interactive-example-card:hover>.ui-card-body { background:var(--card-hover-surface); }
 :root .interactive-example-card:hover::after { border-color:var(--card-hover-border); }
 :root .interactive-example-card:hover .ui-button {
  background:var(--canvas);border-color:var(--card-hover-border);
 }
 /* Keep the bar's drag affordance; other chart grips only darken slightly. */
 :root .numerical-handle:not([aria-disabled=true]):hover .numerical-top-handle { opacity:1; }
 :root .tracker-point:hover { filter:brightness(.96); }
}
@media (prefers-reduced-motion:reduce) {
 :root :is(a[href],button,summary,input,select,textarea,[role=button],[role=tab],[role=option],[role=slider],[draggable=true],.saved-toggle,.ui-switch,.file-label,.shl-booth),
 .interactive-example-card,.interactive-example-card>.ui-card-body,.interactive-example-card::after { transition:none; }
}