.hux-wave-a { --wave-border: color-mix(in srgb, currentColor 16%, transparent); display: grid; gap: 1rem; min-width: 0; } .hux-wave-a__heading, .hux-wave-a__memory > header, .hux-wave-a__actions { align-items: start; display: flex; gap: .65rem; justify-content: space-between; } .hux-wave-a h3, .hux-wave-a h4, .hux-wave-a p { margin-block: .2rem; } .hux-wave-a__timeline { list-style: none; margin: 0; padding: 0; } .hux-wave-a__event { border-inline-start: 2px solid var(--wave-border); display: grid; gap: .25rem; padding: .4rem .4rem 1rem 1rem; } .hux-wave-a__event time, .hux-wave-a__event summary, .hux-wave-a__meta dt, .hux-wave-a__memory header { font-size: .78rem; } .hux-wave-a__evidence ul { overflow-wrap: anywhere; } .hux-wave-a__propose, .hux-wave-a__edit { display: grid; gap: .55rem; } .hux-wave-a textarea { min-height: 5rem; resize: vertical; } .hux-wave-a__memory-list { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .hux-wave-a__memory { border: 1px solid var(--wave-border); border-radius: .65rem; display: grid; gap: .7rem; overflow-wrap: anywhere; padding: .85rem; } .hux-wave-a__pill { border: 1px solid var(--wave-border); border-radius: 99rem; padding: .15rem .5rem; } .hux-wave-a__meta { display: grid; gap: .4rem; margin: 0; } .hux-wave-a__meta div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); } .hux-wave-a__meta dd { margin: 0; } .hux-wave-a__actions { flex-wrap: wrap; justify-content: start; } .hux-wave-a__error, .hux-wave-a__status, .hux-wave-a__empty { border-inline-start: .25rem solid currentColor; padding: .65rem .85rem; } .hux-wave-a__sr { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .hux-wave-a button:focus-visible, .hux-wave-a input:focus-visible, .hux-wave-a select:focus-visible, .hux-wave-a textarea:focus-visible, .hux-wave-a summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media (max-width: 40rem) { .hux-wave-a__heading { flex-direction: column; } .hux-wave-a__meta div { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .hux-wave-a *, .hux-wave-a *::before, .hux-wave-a *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }