/* Copyright 2026 My Digital Sovereignty Ltd. All rights reserved. */

/* ============================================================================
   provenance-product.css: the Provenance product page (public/provenance-product.html, generated by
   scripts/build-provenance-product-page.js). Loaded after /css/village-apps.css and /css/provenance-verify.css, whose
   tokens, chrome, fonts, bands and lists it uses; this sheet defines only what the product page adds. Light and dark
   follow the shared tokens; nothing is loaded from anywhere else.
   ============================================================================ */

html { scroll-padding-top: 4.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.prose .lede { color: var(--ink-soft); }
.prose h3 { font-size: var(--t-l); margin: var(--s6) 0 var(--s2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* On this page */
/* In brief (plan row 5.15): a short summary under the hero, then who publishes the page and when it last changed. */
.pp-brief { padding-block: var(--s6) 0; }
.pp-brief h2 { font-size: var(--t-m); margin: 0 0 var(--s2); }
.pp-brief p { margin: 0 0 var(--s2); max-width: 60rem; }
.pp-brief a { color: var(--c-know); text-underline-offset: .15em; }
.pp-brief .pp-updated { margin-top: var(--s4); font-size: var(--t-s); color: var(--ink-soft); }
.pp-toc { padding-block: var(--s6) 0; }
.pp-toc h2 { font-size: var(--t-m); margin: 0 0 var(--s2); }
.pp-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); max-width: 60rem; }
.pp-toc a { color: var(--c-know); text-underline-offset: .15em; }

/* Cards */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s4); max-width: 60rem; margin-bottom: var(--s6); }
.prose > .pp-grid, .prose > .pp-table-wrap, .prose > .pp-adapter, .prose > .pp-demo { max-width: 60rem; }
.pp-card { border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s4); background: var(--bg-raise); }
.pp-card h3 { margin-top: 0; }
.pp-card p:last-child { margin-bottom: 0; }

/* Definition lists and notes */
.pp-dl { margin: 0 0 var(--s4); }
.pp-dl dt { font-weight: 700; margin-top: var(--s3); }
.pp-dl dd { margin: var(--s1) 0 0; }
.pp-note { color: var(--ink-soft); font-size: var(--t-s); }
.pp-details { margin: var(--s4) 0; }
.pp-details > summary { cursor: pointer; font-weight: 700; }
.pp-details ol { margin-top: var(--s3); }

/* Tables: scroll inside their own box, never the page */
.pp-table-wrap { overflow-x: auto; margin: 0 0 var(--s4); }
.pp-table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.pp-table caption { text-align: left; font-weight: 700; padding-bottom: var(--s2); }
.pp-table th, .pp-table td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.pp-table thead th { border-bottom: 2px solid var(--line); }
.pp-matrix td { min-width: 9rem; }
@media (max-width: 40rem) {
  .pp-table:not(.pp-matrix) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pp-table:not(.pp-matrix) tr { display: block; border-bottom: 1px solid var(--line); padding: var(--s2) 0; }
  .pp-table:not(.pp-matrix) th, .pp-table:not(.pp-matrix) td { display: block; border: 0; padding: var(--s1) 0; }
}

/* Status labels (D7) */
.pp-status { display: inline-block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; padding: .1em .55em; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-raise); color: var(--ink); vertical-align: middle; }
.pp-status--live, .pp-status--beta { border-color: var(--c-know); color: var(--c-know); }
.pp-status--roadmap, .pp-status--dev, .pp-status--scaffolded { border-style: dashed; }
.pp-status-defs dt { margin-top: var(--s2); }
.pp-adapter { border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s4); }
.pp-adapter h3 { margin-top: 0; }
.pp-checked { color: var(--ink-soft); font-size: var(--t-s); overflow-wrap: anywhere; }
.pp-planned { color: var(--ink-soft); font-style: italic; }
.pp-built { font-weight: 700; }

/* Limits and their features */
.pp-limits li { margin-bottom: var(--s4); }
.pp-feature { display: block; margin-top: var(--s1); font-size: var(--t-s); }
a.pp-feature { color: var(--c-know); }

/* Counts */
.pp-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s3); max-width: 60rem; margin: 0 0 var(--s4); }
.pp-counts > div { border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s3); background: var(--bg-raise); }
.pp-counts dt { font-size: var(--t-s); color: var(--ink-soft); }
.pp-counts dd { margin: var(--s1) 0 0; font-size: var(--t-l); font-weight: 700; }

/* Samples and hashes */
.pp-hash { display: block; font-size: var(--t-xs); overflow-wrap: anywhere; color: var(--ink-soft); }
.pp-samples li { margin-bottom: var(--s4); }
.pp-links { overflow-wrap: anywhere; }

/* The demo */
.pp-demo { border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s4); background: var(--bg-raise); margin: 0 0 var(--s4); }
.pp-demo-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s4); }
.pp-demo button[disabled] { opacity: .55; cursor: not-allowed; }
.pp-demo-out { overflow-wrap: anywhere; }
.pp-demo-result { border-left: 4px solid var(--line); padding: var(--s2) var(--s4); margin: 0 0 var(--s4); }
.pp-demo-result h3 { margin: 0 0 var(--s1); font-size: var(--t-m); }
.pp-demo-result[data-verdict="verified"] { border-left-color: var(--c-know); }
.pp-demo-result[data-verdict="changed"] { border-left-color: var(--c-decide); }
.pp-verdict { font-weight: 700; font-size: var(--t-l); margin: 0 0 var(--s1); }
.pp-demo-result p { margin: 0 0 var(--s1); }
.pp-demo-result .pp-headline { color: var(--ink-soft); font-size: var(--t-s); }