/* /sources/ register tables, stat strip, filters and callouts.
   Translated from elements/Ancient Measures Web Elements.dc.html:
   board 05 (sortable register table, compact stat table, NOTE / SOURCE /
   DISPUTED callouts), board 04 (search, segmented control, tabs) and
   board 06 (evidence badges). Builds on article-evidence-table.20260829a.css. */

.sources-page {
  --reg-panel: #0e1022;
  --reg-panel-2: #101226;
  --reg-rule: rgba(163, 158, 196, 0.2);
  --reg-rule-soft: rgba(163, 158, 196, 0.1);
  --reg-gold: #d4a94c;
  --reg-gold-bright: #ecc56e;
  --reg-text: #c6c1dc;
  --reg-muted: #8f89b3;
  --reg-dim: #9a95bb;
  --reg-parchment: #ece7d9;
  --reg-attested: #c9b98a;
  --reg-violet: #a49bdb;
  --reg-slate: #9aa5bd;
}

/* ---- Compact stat table (board 05) -------------------------------------- */
.register-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--reg-panel);
  border: 1px solid color-mix(in srgb, var(--reg-gold) 34%, transparent);
  box-shadow: var(--shadow);
}
.register-stats > div,
.register-stats > li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.35rem 1.2rem;
  border-left: 1px solid var(--reg-rule-soft);
}
.register-stats > :first-child { border-left: 0; }
.register-stats dt,
.register-stats .stat-label {
  color: var(--reg-muted);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.register-stats dd,
.register-stats .stat-value {
  margin: 0;
  color: var(--reg-gold-bright);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.register-stats .stat-note {
  color: var(--reg-dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}
.converter-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0.5rem; }

/* ---- Tabs (board 04) ----------------------------------------------------- */
.register-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.register-tabs a {
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 0.55rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}
.register-tabs a:hover,
.register-tabs a:focus-visible {
  color: var(--ink-deep);
  background: color-mix(in srgb, var(--reg-gold) 16%, transparent);
  border-color: color-mix(in srgb, var(--reg-gold) 60%, transparent);
}

/* ---- Search + segmented control (board 04) ------------------------------ */
.register-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin: 1.6rem 0 -1.4rem;
  padding: 0.9rem;
  background: var(--reg-panel-2);
  border: 1px solid color-mix(in srgb, var(--reg-gold) 32%, transparent);
  border-bottom: 0;
}
.register-toolbar[hidden] { display: none; }
.register-search { flex: 1 1 16rem; display: flex; }
.register-search input {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.6rem 0.85rem;
  color: var(--reg-parchment);
  background: #14162b;
  border: 1px solid rgba(163, 158, 196, 0.28);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.register-search input::placeholder { color: var(--reg-dim); }
.register-search input:focus { outline: 2px solid var(--reg-gold); outline-offset: 1px; border-color: var(--reg-gold); }
.segmented {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgba(163, 158, 196, 0.24);
}
.segmented button {
  min-height: 2.6rem;
  padding: 0.5rem 0.85rem;
  color: var(--reg-text);
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(163, 158, 196, 0.24);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.segmented button:first-child { border-left: 0; }
.segmented button:hover { color: var(--reg-gold-bright); }
.segmented button[aria-pressed="true"] { color: #14162b; background: var(--reg-gold); font-weight: 600; }
.segmented button:focus-visible { outline: 2px solid var(--reg-gold-bright); outline-offset: -2px; }

/* ---- Register table (board 05) ------------------------------------------ */
.register-card { margin-top: 1.4rem; }
.register-card.compact .article-data-table { min-width: 36rem; }
.register-table { min-width: 62rem; }
.register-table caption { background: var(--reg-panel-2); }
.register-table thead th { white-space: nowrap; vertical-align: bottom; }
.register-table th.num,
.register-table td.num { text-align: right; }
.register-table td { color: var(--reg-text); font-size: 0.9rem; vertical-align: top; }
.register-table tbody th { font-size: 1.05rem; }
.register-table tbody th a,
.register-table td a { color: var(--reg-gold-bright); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--reg-gold) 40%, transparent); }
.register-table tbody th a:hover,
.register-table td a:hover { color: #f6dfa4; border-bottom-color: currentColor; }
.register-table td.mono { color: var(--reg-gold-bright); font-family: var(--mono); font-size: 0.8rem; }
.register-table tbody tr[hidden] { display: none; }
.register-table tbody tr:target { background: color-mix(in srgb, var(--reg-gold) 14%, transparent); }
.register-title cite { color: var(--reg-parchment); font-family: var(--serif); font-size: 1.05rem; }
.register-title .gloss { color: var(--reg-muted); }
.register-imprint,
.register-use { display: block; margin-top: 0.35rem; line-height: 1.55; }
.register-imprint { color: var(--reg-dim); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.02em; }
.register-use { color: var(--reg-text); font-size: 0.86rem; }
.register-units { color: var(--reg-muted); font-size: 0.84rem; }
.sources-page .orig { font-family: "Noto Serif TC", var(--serif); }

.sort-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.sort-button:focus-visible { outline: 2px solid var(--reg-gold-bright); outline-offset: 3px; }
.sort-glyph::after { content: "↕"; opacity: 0.45; }
[aria-sort="ascending"] .sort-glyph::after { content: "▴"; opacity: 1; }
[aria-sort="descending"] .sort-glyph::after { content: "▾"; opacity: 1; }
.register-table:not(.is-sortable) .sort-glyph { display: none; }
.register-table:not(.is-sortable) .sort-button { cursor: default; }

.register-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.35rem;
  border-top: 1px solid color-mix(in srgb, var(--reg-gold) 30%, transparent);
  color: var(--reg-dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- Evidence badges and chips (board 06) ------------------------------- */
.evidence-badge,
.register-chip,
.rights-chip {
  display: inline-block;
  margin: 0 0.3rem 0.3rem 0;
  padding: 0.2rem 0.45rem;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.role-survey { color: var(--reg-gold); }
.role-text { color: var(--reg-attested); }
.role-reference { color: var(--reg-attested); border-style: dashed; }
.role-analysis { color: var(--reg-slate); }
.role-interpretive { color: var(--reg-violet); }
.register-chip { color: var(--reg-gold-bright); border-color: color-mix(in srgb, var(--reg-gold) 50%, transparent); font-weight: 500; }
.rights-chip { font-weight: 500; letter-spacing: 0.1em; }
.rights-pd { color: var(--reg-gold-bright); }
.rights-ccby { color: #9fcfb0; }
.rights-copyright { color: #e3a39a; }

/* ---- Callouts (board 05: NOTE / SOURCE / DISPUTED) ----------------------- */
.register-callouts { display: grid; gap: 1rem; margin: 1.6rem 0; }
.register-note {
  margin: 1.4rem 0;
  padding: 1rem 1.2rem;
  color: var(--reg-text);
  background: var(--reg-panel);
  border: 1px solid color-mix(in srgb, var(--reg-gold) 28%, transparent);
  border-left: 4px solid var(--reg-gold);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.7;
}
.register-callouts .register-note { margin: 0; }
.register-note p { margin: 0; }
.register-note p + p { margin-top: 0.5rem; }
.register-note-kicker {
  margin-bottom: 0.4rem !important;
  color: var(--reg-gold);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.register-note.source { border-left-color: var(--reg-slate); border-color: var(--reg-rule); border-left-width: 4px; }
.register-note.source .register-note-kicker { color: var(--reg-slate); }
.register-note.disputed { background: #16152e; border-color: rgba(143, 134, 201, 0.4); border-left-color: #8f86c9; }
.register-note.disputed .register-note-kicker { color: var(--reg-violet); }
.role-key { margin: 0; padding: 0; list-style: none; }
.role-key li { margin: 0 0 0.45rem; }
.role-key .evidence-badge { margin-right: 0.45rem; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 56rem) {
  .register-stats,
  .converter-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .register-stats > div,
  .register-stats > li { border-left: 0; border-top: 1px solid var(--reg-rule-soft); }
  .register-stats > :nth-child(-n+2) { border-top: 0; }
  .register-stats > :nth-child(even) { border-left: 1px solid var(--reg-rule-soft); }
}
@media (max-width: 30rem) {
  .register-toolbar { margin-bottom: -1.4rem; padding: 0.7rem; }
  .segmented { width: 100%; }
  .segmented button { flex: 1 1 auto; }
  .register-foot { flex-direction: column; }
}
@media print {
  .register-toolbar, .register-tabs { display: none !important; }
  .register-table tbody tr[hidden] { display: table-row; }
}

/* ---- Phone: register rows become compact stacked records ---------------- */
@media (max-width: 48rem) {
  .register-card { overflow: visible; }
  .register-table,
  .register-card.compact .article-data-table { min-width: 0; }
  .register-table,
  .register-table tbody { display: block; width: auto; }
  .register-table caption { display: block; }
  .register-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .register-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--reg-rule);
  }
  .register-table tbody tr[hidden] { display: none; }
  .register-table tbody th,
  .register-table td { display: block; flex: 0 1 auto; order: 2; padding: 0; border: 0; text-align: left; }
  .register-table tbody th { flex-basis: 100%; order: 0; min-width: 0; }
  .register-table td.register-title,
  .register-table td.register-units,
  .register-card.compact .register-table td { flex-basis: 100%; order: 1; }
  .register-table th.num, .register-table td.num { text-align: left; }
  .register-table td .evidence-badge,
  .register-table td .register-chip,
  .register-table td .rights-chip { margin-bottom: 0; }
  .register-table td[data-label]::before {
    content: attr(data-label);
    margin-right: 0.4rem;
    color: var(--reg-dim);
    font-family: var(--mono);
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .register-table td.register-title::before,
  .register-table td.register-units::before,
  .register-table td[data-label="Evidence role"]::before,
  .register-table td[data-label="Rights"]::before,
  .register-table td[data-label="Converters"]::before,
  .register-card.compact .register-table td::before { display: none; }
  .register-card.compact .register-table td[data-label="Secondary"]::before { display: inline; }
}