/* OYOTTA interactive article components.
   Every component here renders as readable HTML with no JavaScript. Script only
   adds controls to content that is already on the page. */

.oy-figure { margin: 2rem 0; }
.oy-figure img { width: 100%; height: auto; display: block; }
.oy-figure figcaption { font-size: .88rem; line-height: 1.5; margin-top: .5rem; opacity: .8; }

/* --- Sortable / filterable catalogue table ------------------------------- */
.oy-table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.oy-table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .92rem; }
.oy-table caption { text-align: left; font-size: .85rem; opacity: .75; padding-bottom: .5rem; }
.oy-table th, .oy-table td { padding: .45rem .6rem; border-bottom: 1px solid rgba(128,128,128,.28);
  text-align: left; vertical-align: top; }
.oy-table th { font-weight: 600; white-space: nowrap; }
.oy-table td.num, .oy-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.oy-table tbody tr:hover { background: rgba(128,128,128,.07); }
.oy-sort-btn { all: unset; cursor: pointer; display: inline-flex; gap: .3rem; align-items: center; }
.oy-sort-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.oy-sort-btn::after { content: "↕"; opacity: .35; font-size: .8em; }
.oy-sort-btn[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.oy-sort-btn[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
.oy-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .5rem; align-items: center; }
.oy-filter label { font-size: .85rem; opacity: .8; }
.oy-filter select, .oy-filter input { font: inherit; font-size: .9rem; padding: .3rem .45rem;
  border: 1px solid rgba(128,128,128,.45); background: transparent; color: inherit; }
.oy-count { font-size: .85rem; opacity: .7; }

/* --- Duration / magnitude bars ------------------------------------------- */
.oy-bar { display: block; height: .55rem; background: currentColor; opacity: .45; border-radius: 1px;
  min-width: 1px; }
.oy-bar-cell { width: 34%; }
.oy-legend { font-size: .82rem; opacity: .7; margin-top: .4rem; }

/* --- Chronology --------------------------------------------------------- */
.oy-chrono { list-style: none; padding: 0; margin: 1.5rem 0; border-left: 2px solid rgba(128,128,128,.35); }
.oy-chrono > li { position: relative; padding: .1rem 0 1.15rem 1.1rem; }
.oy-chrono > li::before { content: ""; position: absolute; left: -5px; top: .45rem; width: 8px;
  height: 8px; border-radius: 50%; background: currentColor; opacity: .55; }
.oy-chrono time { font-variant-numeric: tabular-nums; font-size: .84rem; opacity: .7; display: block; }
.oy-chrono .oy-chrono-title { font-weight: 600; }
.oy-chrono .oy-chrono-meta { font-size: .86rem; opacity: .78; }
.oy-chrono li[data-era="short"] { --era: 1; }
.oy-era-mark { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; opacity: .65;
  padding: .35rem 0; border-top: 1px solid rgba(128,128,128,.3); margin-top: .4rem; }

/* --- Evidence drawer (details/summary, works with no JS) ------------------ */
.oy-evidence { margin: 1.5rem 0; border: 1px solid rgba(128,128,128,.35); }
.oy-evidence > summary { cursor: pointer; padding: .6rem .8rem; font-size: .9rem; font-weight: 600; }
.oy-evidence > summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.oy-evidence > div { padding: 0 .8rem .8rem; font-size: .9rem; line-height: 1.6; }
.oy-evidence table { font-size: .86rem; }

/* --- Gallery ------------------------------------------------------------- */
.oy-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  margin: 1.5rem 0; padding: 0; list-style: none; }
.oy-gallery li { margin: 0; }
.oy-gallery img { width: 100%; height: auto; display: block; }
.oy-gallery figcaption { font-size: .78rem; line-height: 1.4; margin-top: .35rem; opacity: .8; }

/* --- Footnotes ----------------------------------------------------------- */
.oy-note-ref { font-size: .78em; vertical-align: super; text-decoration: none; padding: 0 .1em; }
.oy-notes { font-size: .88rem; line-height: 1.6; border-top: 1px solid rgba(128,128,128,.35);
  margin-top: 2.5rem; padding-top: 1rem; }
.oy-notes li { margin-bottom: .6rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 34rem) {
  .oy-table { font-size: .86rem; }
  .oy-gallery { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
}