/* =============================================================================
   @elements/style — native

   Native HTML widgets (progress, meter, details) styled to match the
   ink/rust/rule palette.
============================================================================= */

progress {
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border: none;
  border-radius: var(--radius-xs);
  background: var(--bg-panel);
  overflow: hidden;
}
progress::-webkit-progress-bar   { background: var(--bg-panel); }
progress::-webkit-progress-value { background: var(--ink); transition: width var(--duration-normal) var(--ease-out); }
progress::-moz-progress-bar      { background: var(--ink); }

meter {
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border: none;
  border-radius: var(--radius-xs);
  background: var(--bg-panel);
  overflow: hidden;
}
meter::-webkit-meter-bar { background: var(--bg-panel); border: none; }
meter::-webkit-meter-optimum-value        { background: var(--green); }
meter::-webkit-meter-suboptimum-value     { background: var(--amber); }
meter::-webkit-meter-even-less-good-value { background: var(--danger); }

details {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-3);
  background: var(--bg);
}

summary {
  cursor: pointer;
  font-weight: var(--font-medium);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: '';
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
details[open] > summary::before { transform: rotate(45deg); }
details[open] > summary { margin-bottom: var(--space-3); }