/* /vs and the pages under it (fivebar/vs.py), after prose.css. */

/* /vs's list of rivals: a row each, the rival's icon, from home's own route for site icons, beside its name and the
   line that says where fivebar differs, each row parted from the next by a --rule line, as a table's are. */
.prose .rivals { list-style: none; padding: 0; margin: 0 0 2rem; border-top: 1px solid var(--rule) }
.prose .rivals li { position: relative; margin: 0; padding: .8rem 0 .8rem 2.25rem; border-bottom: 1px solid var(--rule) }
.prose .rivals .icon { position: absolute; left: 0; top: 1.05rem; width: 20px; height: 20px; border-radius: 4px;
                       object-fit: contain }
.prose .rivals a { font-weight: 500 }

/* A screenshot of fivebar: the image in a --rule-strong edge with the 6px radius, its light or dark version as the
   reader's own theme is, and its caption under it in graphite. */
.prose .shot { margin: 1.5rem 0 1.75rem }
.prose .shot img { display: block; width: 100%; height: auto; box-sizing: border-box; padding: .5rem;
                   border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper) }
.prose .shot figcaption { margin-top: .5rem; font-size: var(--text-sm); line-height: 1.5; color: var(--graphite) }

/* The prices side by side: the figures right-aligned, so their digits line up. */
.prose .table.prices :is(td, th):not(:first-child) { text-align: right; padding-right: 0; padding-left: .9rem }

/* The line that says when every claim was checked, last on the page. */
.prose .checked { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: var(--text-sm);
                  color: var(--graphite) }