@layer components {
  /* Account history (account/histories/show) */
  .history, .history__entries { list-style: none; margin: 0; padding: 0; text-align: start; }
  .history__day + .history__day { border-top: 1px solid #eef0f5; }
  .history__date { margin: 0; padding: 12px 16px 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #829ab1; }
  .history__entry { display: grid; grid-template-columns: 3.5rem 1fr; gap: 12px; padding: 8px 16px; }
  .history__entry + .history__entry { border-top: 1px dashed #f0f2f7; }
  .history__time { font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: #829ab1; padding-top: 1px; }
  .history__body { min-width: 0; }
  .history__sentence { margin: 0; font-size: 0.875rem; color: #334e68; overflow-wrap: anywhere; }
  .history__sentence b { color: #243b53; }
  .history__sentence a { color: inherit; text-decoration: underline; text-decoration-color: #bcccdc; }
  .history__detail { margin: 2px 0 0; font-size: 0.8125rem; color: #627d98; }
  .history__changes { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 0.8125rem; color: #486581; }
  .history__field { display: inline-block; min-width: 9ch; font-weight: 600; color: #627d98; }
  .history__changes del { color: #9c4221; text-decoration: line-through; text-decoration-color: #e8b4a0; }
  .history__changes ins { color: #0a7d55; text-decoration: none; font-weight: 600; }
  .history__hidden { font-style: italic; color: #829ab1; }
  @media (max-width: 639px) { .history__entry { grid-template-columns: 1fr; gap: 2px; } }
}