/* Component tokens inherit the game's theme. Glass belongs to the existing outer panel. */
.cr-stock {
  --stock-text: var(--cr-object-text);
  --stock-muted: var(--cr-object-muted);
  --stock-rule: var(--cr-object-line);
  --stock-focus: var(--cr-object-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--stock-text);
  font-size: 15px;
  line-height: 1.5;
  width: 100%;
  min-width: 0;
}
.cr-stock *, .cr-stock *::before, .cr-stock *::after { box-sizing: border-box; }
.cr-stock .stock-field { border: 0; padding: 12px 0 16px; margin: 0; min-width: 0; }
.cr-stock .stock-field:first-child { padding-top: 0; }
.cr-stock .stock-field:last-of-type { padding-bottom: 0; }
.cr-stock .stock-field + .stock-field { border-top: 1px solid var(--stock-rule); }
.cr-stock .stock-field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; min-height: 44px; }
.cr-stock .stock-label { font-size: 14px; font-weight: 600; color: var(--stock-muted); }
.cr-stock .stock-value { font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cr-stock .stock-choices { display: grid; gap: 1px 8px; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); }
.cr-stock .stock-choice { position: relative; display: flex; min-width: 0; min-height: 46px; align-items: center; justify-content: center; text-align: center; }
.cr-stock .stock-choice input { position: absolute; width: 100%; height: 100%; margin: 0; inset: 0; opacity: 0; cursor: inherit; border: 0; outline: none; }
.cr-stock .stock-choice-text { position: relative; display: block; padding: 12px 3px; font-size: 15px; font-weight: 400; pointer-events: none; }
.cr-stock .stock-choice-text::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  left: calc(50% - 10px);
  background: currentColor;
  opacity: 0;
  scale: .6 1;
  transition: opacity var(--ui-control-duration) ease,
    scale var(--ui-content-duration) var(--ui-ease-out);
}
.cr-stock .stock-choice input:checked + .stock-choice-text { font-weight: 650; }
.cr-stock .stock-choice input:checked + .stock-choice-text::after { opacity: 1; scale: 1; }
.cr-stock .stock-choice input:focus-visible + .stock-choice-text::after {
  opacity: 1;
  scale: 1;
  width: 32px;
  left: calc(50% - 16px);
  height: 3px;
}
.cr-stock .stock-choice:has(input:disabled) { opacity: .48; cursor: not-allowed; }
.cr-stock .stock-cars { grid-template-columns: repeat(auto-fit, minmax(max(44px, 20%), 1fr)); column-gap: 0; }
.cr-stock .stock-speed { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
.cr-stock .stock-extra { margin-top: 4px; }
.cr-stock .stock-extra[hidden] { display: none; }
.cr-stock .stock-more { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; gap: 6px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--stock-muted); font: inherit; font-size: 12px; font-weight: 400; white-space: nowrap; user-select: none; }
.cr-stock .stock-more::after { content: '+'; font-size: 17px; width: 15px; text-align: center; }
.cr-stock .stock-more[aria-expanded="true"]::after { content: '−'; }
.cr-stock .stock-more:focus-visible { outline: 2px solid var(--stock-focus); outline-offset: 2px; border-radius: 4px; }
.cr-stock .stock-extra .stock-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-stock .stock-extra .stock-speed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cr-stock .stock-extra .stock-choice-text { font-size: 13px; }
.cr-stock .stock-metrics { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--stock-muted); font-variant-numeric: tabular-nums; }
.cr-stock .stock-metrics strong { font-weight: 500; color: var(--stock-text); }
.cr-stock .stock-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cr-stock .stock-track .stock-choice { justify-content: flex-start; text-align: left; }
.cr-stock .stock-track .stock-choice-text { width: 100%; padding: 9px 0 15px; }
.cr-stock .stock-track .stock-choice-text::after { left: 0; bottom: 4px; }
.cr-stock .stock-track-name { display: block; font-size: 15px; }
.cr-stock .stock-track-caption { display: block; color: var(--stock-muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
.cr-stock .stock-track-drawing { display: block; height: 22px; position: relative; max-width: 140px; margin: 9px 0 3px; color: var(--stock-muted); }
.cr-stock .stock-track-drawing::before, .cr-stock .stock-track-drawing::after { position: absolute; left: 0; right: 0; border-top: 1px solid currentColor; height: 0; content: ''; }
.cr-stock .stock-track-drawing::before { top: 6px; }
.cr-stock .stock-track-drawing::after { top: 15px; }
.cr-stock .stock-track-single::before { top: 11px; }
.cr-stock .stock-track-single::after { content: none; }
.cr-stock .stock-track-arrow { display: block; position: absolute; left: 45%; top: -3px; font-size: 17px; line-height: 17px; font-weight: 400; background: transparent; }
.cr-stock .stock-track-arrow:last-child { top: 6px; }
.cr-stock .stock-track-single .stock-track-arrow { top: 2px; }
.cr-stock .stock-message { color: var(--stock-muted); font-size: 12px; margin: 4px 0 0; }
.cr-stock .stock-error { color: var(--ui-danger); }
.cr-stock .stock-message:empty { display: none; }
.cr-stock .stock-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (forced-colors: active) {
  .cr-stock .stock-choice input { opacity: 1; width: 16px; height: 16px; inset: 15px auto auto 0; }
  .cr-stock .stock-choice-text { padding-left: 20px; }
}