/* Section 02: restrained material and icon polish. Existing tab logic is intact. */
#problem .condition-panels {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 3h2M8 9h1' stroke='%23ecd8a5' stroke-opacity='.055'/%3E%3Cpath d='M5 6h2' stroke='%2300120c' stroke-opacity='.12'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #e6c58208, transparent 58%, #001d140d);
  box-shadow: inset 0 0 0 5px #cfb5740b, inset 0 1px 0 #f5ddb52b,
    0 8px 0 -6px #8b784b38, 0 17px 34px #213e291a;
}
#problem .condition-icon {
  filter: drop-shadow(0 1px 0 #fff8e4b3);
  transition: transform 200ms ease, filter 200ms ease;
}
#problem .condition-icon > g { stroke-width: 2.5; }
#problem .condition-icon .icon-copper { stroke-width: 2.6; }
#problem .condition-tabs button {
  box-shadow: inset 0 1px 0 #fffaf080, 0 2px 3px #213e2908;
}
#problem .condition-tabs button[aria-selected="true"] {
  box-shadow: inset 0 1px 0 #fff6d5a6, 0 3px 10px #36503114;
}
#problem .condition-tabs button:focus-visible .condition-icon {
  transform: translateY(-3px);
}
@media (hover: hover) {
  #problem .condition-tabs button:hover .condition-icon {
    transform: translateY(-3px);
    filter: drop-shadow(0 3px 2px #24412c26);
  }
}
@media (prefers-reduced-motion: reduce) {
  #problem .condition-icon { transition: none; }
  #problem .condition-tabs button:is(:hover, :focus-visible) .condition-icon { transform: none; }
}