.rust-skin-history {
  --rust-history-accent: var(--rs-red-hi, #cd412b);
  display: grid;
  gap: 10px;
  min-width: 0;
}

.rust-skin-history h2,
.rust-skin-history p { margin: 0; }
.rust-skin-history [hidden] { display: none; }

.rust-history-current {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  color: var(--rs-dim, #bab1a8);
}
.rust-history-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.rust-history-current > strong { color: var(--rs-paper, #f7ebe1); font-size: 28px; line-height: 1.15; }
.rust-history-change {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 1px 8px;
  border: 1px solid var(--rs-line-2, #ffffff29);
  border-radius: 999px;
  font-size: 13px;
}
.rust-history-change[data-direction="1"] b { color: #7ac694; }
.rust-history-change[data-direction="-1"] b { color: var(--rs-red-text, #ec7556); }

.rust-history-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.rust-history-ranges { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; border: 0; margin: 0; padding: 0; }
.rust-history-controls button {
  min-height: 40px;
  min-width: 40px;
  padding: 0 11px;
  border: 1px solid var(--rs-line-2, #ffffff29);
  border-radius: 999px;
  color: var(--rs-dim, #bab1a8);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.rust-history-controls button:hover,
.rust-history-controls button[aria-pressed="true"] {
  border-color: var(--rust-history-accent);
  color: var(--rs-paper, #f7ebe1);
}
.rust-history-controls button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--rust-history-accent); }
.rust-history-hint { margin-left: auto; color: var(--rs-dim, #bab1a8); font-size: 12px; }

.rust-history-plot { position: relative; min-width: 0; border-radius: 8px; }
.rust-history-plot svg { display: block; width: 100%; height: auto; }
[data-skin-history-ready] .rust-history-plot { cursor: crosshair; touch-action: pan-y pinch-zoom; user-select: none; }
.rust-history-plot:focus-visible,
.rust-history-controls button:focus-visible { outline: 2px solid var(--rs-red-text, #ec7556); outline-offset: 2px; }
.rust-history-axis { fill: var(--rs-dim, #bab1a8); font-size: 13px; }
.rust-history-grid { stroke: currentColor; opacity: .14; }
.rust-history-area { fill: var(--rust-history-accent); opacity: .16; }
.rust-history-line { fill: none; stroke: var(--rust-history-accent); stroke-width: 2.4px; stroke-linejoin: round; }
.rust-history-crosshair { stroke: currentColor; opacity: .48; }
.rust-history-point { fill: var(--rust-history-accent); stroke: var(--rs-panel, #1c1a17); stroke-width: 2px; }
.rust-history-brush { fill: var(--rust-history-accent); opacity: .24; }

.rust-history-tip {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 0;
  z-index: 1;
  display: grid;
  gap: 3px;
  min-width: min(145px, 100%);
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rs-line-2, #ffffff29);
  border-radius: 8px;
  background: var(--rs-panel-2, #24211d);
  color: var(--rs-paper, #f7ebe1);
  box-shadow: 0 8px 18px -7px #000b;
  font-size: 12px;
  pointer-events: none;
}
.rust-history-tip span { color: var(--rs-dim, #bab1a8); }
.rust-history-tip strong { margin-left: 4px; color: var(--rs-paper, #f7ebe1); font-variant-numeric: tabular-nums; }
.rust-history-extents,
.rust-history-note { color: var(--rs-dim, #bab1a8); font-size: 13px; }
.rust-history-data summary { cursor: pointer; color: var(--rs-paper, #f7ebe1); font-size: 13px; }
.rust-history-data[open] summary { margin-bottom: 8px; }
.rust-history-data :is(td, th) { padding: 7px 9px; }
.rust-history-data tbody th { font-weight: normal; white-space: nowrap; }
.rust-history-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  .rust-history-hint { display: none; }
  .rust-skin-history:not([data-skin-history-ready]) .rust-history-axis { font-size: 18px; }
}