/* Landing page only. Builds on assets/styles.css; every class here is prefixed index-. */

/* hero */
.index-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.index-textlink { font-weight: 500; }
.index-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.index-hero__facts dd { margin-top: var(--sp-1); font-size: 14px; line-height: 20px; color: var(--text); }

/* hero co-sign strip */
.index-strip__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--row-list); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); }
.index-strip__committee { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-height: var(--row-list); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--bg); }
.index-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
.index-strip__list { min-height: 176px; }
.index-strip__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); min-width: 0; }
.index-strip__wallet { color: var(--text); font-weight: 500; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-strip__wallet:hover { color: var(--accent); text-decoration: underline; }
.index-strip__meta { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted); }
.index-strip__meta > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-strip__meta .mono { font-size: 12px; line-height: 16px; flex: none; }
.index-strip__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); font-size: 13px; line-height: 20px; color: var(--muted); }
.index-state { margin: var(--sp-4); }

/* problem diagram */
.index-figure figcaption { margin-top: var(--sp-3); font-size: 13px; line-height: 20px; color: var(--muted); max-width: 560px; }

/* how it works */
.index-step__sig { margin-top: var(--sp-4); max-width: 120px; }
.cosign__tick.index-tick--checking { border-color: var(--accent); border-style: dashed; }
.index-how__policy { margin-top: var(--sp-7); }
.index-how__policy h3 { margin-bottom: 0; }
.index-pc__head { margin-bottom: var(--sp-3); }
.index-pc__wallet { margin-bottom: var(--sp-2); font-weight: 500; }
.index-badges { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-1); }
.index-pc__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: baseline; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.index-pc__hash { word-break: break-all; color: var(--accent); }
.index-pc__date { grid-column: 1 / -1; font-size: 13px; line-height: 20px; }

/* live view */
#live.section { padding-top: 0; }
.index-divider { display: flex; margin-bottom: var(--sp-8); }
.index-live__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.index-live__head .section__head { margin-bottom: 0; }
.index-wallet__name { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-serif); letter-spacing: var(--track-tight); }
.index-wallet__meta { margin-top: var(--sp-1); font-size: 14px; line-height: 20px; }
.index-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
.index-signers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.index-signers .signer { padding: var(--sp-2) var(--sp-3); }
.index-signers .signer[data-who="committee"] { grid-column: 1 / -1; }
.index-verdict { padding: var(--sp-2) 0 var(--sp-5); }
.index-verdict__sig { height: 24px; }
.index-verdict__sig .cosign__tick { width: 16px; height: 16px; margin-left: var(--sp-7); }
.index-verdict__sig .cosign__tick[data-who="agent"] { margin-left: 0; }
.index-verdict__sig .cosign__tick.is-filled::after { left: 5px; top: 2px; width: 4px; height: 8px; }
.index-verdict__sig .cosign__tick.is-broken::after { left: 6px; top: -3px; height: 20px; }
.index-verdict__sig .cosign__tick.is-broken::before { left: 3px; top: 3px; width: 8px; height: 8px; background: var(--surface); }
.index-verdict__sig .cosign__lab { top: 20px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: var(--track-label); white-space: nowrap; }
.index-verdict__result { display: flex; flex-direction: column; gap: var(--sp-2); }
.index-verdict__line { font-size: 14px; line-height: 20px; }
.index-verdict__written { font-size: 13px; line-height: 20px; }
.btn-row .btn.is-pending { min-width: 200px; }

/* token */
.index-token__kv { margin-top: var(--sp-6); max-width: 640px; }
.index-caption { margin-top: var(--sp-3); font-size: 13px; line-height: 20px; color: var(--muted); }
.index-slash { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.index-slash .icon { margin-top: 2px; }

/* comparison */
.index-compare__row { cursor: pointer; }
.index-compare__q { display: inline-flex; align-items: flex-start; gap: var(--sp-2); font-weight: 500; }
.index-compare__q .row-toggle { flex: none; margin-top: -4px; }
.compare .table td:first-child { color: var(--text); }
.compare .table td:nth-child(2) { color: var(--muted); }
.index-compare__more { max-width: 640px; color: var(--text); }

@media (max-width: 1024px) {
  .index-divider { margin-bottom: var(--sp-7); }
}
@media (max-width: 640px) {
  .index-hero__facts { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .index-strip__list { min-height: 0; }
  .index-verdict__sig .cosign__tick:not([data-who="agent"]) { margin-left: var(--sp-6); }
  .compare .table--stack td, .compare .table--stack td:first-child { width: 100%; text-align: left; }
  .policy-card .kv, #wallet-box .kv, .index-token__kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .compare .table--stack td::before { min-width: 104px; }
  .index-compare__q { flex: 1 1 auto; }
}