/* ParaSign page components (/sign, /verify).
 * Uses ONLY design-system.css tokens (--ink, --bone, --space-*, etc.).
 * No hardcoded colors, no invented tokens. Dark mode follows .dark via tokens. */

.ps-wrap { max-width: 760px; margin: var(--space-6) auto; padding: 0 var(--space-4); }
.ps-head { margin-bottom: var(--space-6); }
.ps-kicker {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0 0 var(--space-2);
}
.ps-title { font-size: var(--text-3xl); margin: 0 0 var(--space-2); line-height: 1.1; }
.ps-lede { color: var(--ink-dim); font-size: var(--text-md); line-height: 1.5; margin: 0; }

.ps-panel { margin-bottom: var(--space-4); }
.ps-panel-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.ps-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; flex: 0 0 1.6rem; border-radius: 50%;
  background: var(--navy); color: var(--bone); font-family: var(--mono);
  font-size: var(--text-xs); font-weight: 700;
}
.ps-panel-title { font-size: var(--text-lg); margin: 0; }
.ps-help { color: var(--ink-dim); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 var(--space-4); }

.ps-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.ps-file {
  display: block; padding: var(--space-5); border: 1.5px dashed var(--ink-hair);
  border-radius: 10px; text-align: center; cursor: pointer; background: var(--ink-ghost);
  transition: border-color .15s, background .15s;
}
.ps-file:hover { border-color: var(--navy); }
.ps-file input[type=file] { display: none; }
.ps-file-cta { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.ps-file-meta { display: block; font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-dim); }

.ps-field { margin-top: var(--space-4); }
.ps-label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--ink-dim); margin-bottom: var(--space-2); }
.ps-input {
  width: 100%; padding: var(--space-3); border: 1.5px solid var(--ink-hair);
  border-radius: 8px; font-size: var(--text-md); background: var(--bone);
  color: var(--ink); font-family: var(--sans);
}
.ps-input.mono { font-family: var(--mono); }
.ps-input:focus { outline: none; border-color: var(--navy); }

.ps-kv { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.ps-kv dt { color: var(--ink-dim); }
.ps-kv dd { margin: 0; }
.mono { font-family: var(--mono); font-size: var(--text-xs); word-break: break-all; }

.ps-keybox { background: var(--ink-ghost); border-radius: 8px; padding: var(--space-4); margin-top: var(--space-4); }
.ps-warn { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--ink-dim); }

.ps-banner { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: 8px; font-size: var(--text-sm); border-left: 3px solid var(--ink-hair); background: var(--ink-ghost); color: var(--ink); }
.ps-banner.info { border-left-color: var(--navy); }
.ps-banner.ok   { border-left-color: var(--lime); }
.ps-banner.err  { border-left-color: var(--ink); background: var(--bone-2); }

.ps-result { margin-top: var(--space-4); padding: var(--space-4); border-radius: 8px; background: var(--ink-ghost); }
.ps-result .ps-btn-row { margin-top: var(--space-4); }

.ps-info { margin-top: var(--space-6); padding: var(--space-5); background: var(--ink-ghost); border-radius: 12px; }
.ps-info h2 { font-size: var(--text-md); margin: 0 0 var(--space-3); }
.ps-info p, .ps-info li { font-size: var(--text-sm); color: var(--ink-dim); line-height: 1.5; }
.ps-info ul { margin: 0; padding-left: var(--space-5); }

@media (max-width: 600px) {
  .ps-wrap { margin: var(--space-4) auto; }
  .ps-title { font-size: var(--text-2xl); }
  .ps-btn-row { flex-direction: column; align-items: stretch; }
  .ps-btn-row .btn { width: 100%; }
}

/* ---- Homepage showcase (real tokens only; no hardcoded hex, no fake tokens) ---- */
.home-hero { padding: var(--space-8) var(--space-4) var(--space-6); text-align: center; max-width: 860px; margin: 0 auto; }
.home-hero .eyebrow { display:inline-block; font-family: var(--mono); font-size: var(--text-xs); letter-spacing:.12em; text-transform:uppercase; color: var(--ink-dim); padding: var(--space-1) var(--space-3); border:1px solid var(--ink-hair); border-radius:999px; margin-bottom: var(--space-4); }
.home-hero h1 { font-size: var(--text-5xl); line-height:1.05; margin:0 0 var(--space-3); letter-spacing:-.02em; }
.home-hero .lede { font-size: var(--text-lg); color: var(--ink-dim); line-height:1.5; max-width:620px; margin: 0 auto var(--space-5); }
.home-cta { display:flex; gap: var(--space-3); justify-content:center; flex-wrap:wrap; }

.trust-bar { display:flex; justify-content:center; flex-wrap:wrap; gap: var(--space-4) var(--space-6); padding: var(--space-4) var(--space-4); border-top:1px solid var(--ink-hair); border-bottom:1px solid var(--ink-hair); font-size: var(--text-sm); color: var(--ink-dim); }
.trust-bar strong { color: var(--ink); }

.home-section { padding: var(--space-8) var(--space-4); max-width: 1140px; margin: 0 auto; }
.home-section.alt { background: var(--ink-ghost); max-width:none; }
.home-section.alt > * { max-width: 1140px; margin-left:auto; margin-right:auto; }
.home-section-head { text-align:center; margin-bottom: var(--space-7); }
.home-section-head .eyebrow { display:block; font-family: var(--mono); font-size: var(--text-xs); letter-spacing:.12em; text-transform:uppercase; color: var(--navy); margin-bottom: var(--space-2); }
.home-section-head h2 { font-size: var(--text-3xl); margin:0 0 var(--space-2); letter-spacing:-.02em; }
.home-section-head p { color: var(--ink-dim); max-width: 620px; margin: 0 auto; line-height:1.5; }

.pgrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: var(--space-4); }
.pcard { display:flex; flex-direction:column; padding: var(--space-5); border:1px solid var(--ink-hair); border-radius:14px; background: var(--bone); text-decoration:none; color:inherit; transition: border-color .15s, transform .15s; }
a.pcard:hover { border-color: var(--navy); transform: translateY(-2px); }
.pcard .ptag { align-self:flex-start; font-family: var(--mono); font-size: var(--text-xs); letter-spacing:.08em; padding: var(--space-1) var(--space-2); border-radius:999px; background: var(--ink-ghost); color: var(--navy); margin-bottom: var(--space-3); }
.pcard h3 { font-size: var(--text-xl); margin:0 0 var(--space-2); }
.pcard p { font-size: var(--text-sm); color: var(--ink-dim); line-height:1.5; margin:0 0 var(--space-3); flex-grow:1; }
.pcard .pcta { font-size: var(--text-sm); font-weight:600; color: var(--navy); }
.pcard .pcta::after { content:" \2192"; }

.sgrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: var(--space-4); }
.scard { padding: var(--space-5); border:1px solid var(--ink-hair); border-radius:14px; background: var(--bone); display:flex; flex-direction:column; }
.scard .slabel { font-family: var(--mono); font-size: var(--text-xs); letter-spacing:.12em; text-transform:uppercase; color: var(--navy); margin-bottom: var(--space-2); }
.scard h3 { font-size: var(--text-lg); margin:0 0 var(--space-2); }
.scard .suse { font-size: var(--text-sm); color: var(--ink-dim); line-height:1.5; margin:0 0 var(--space-3); flex-grow:1; }
.schips { display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top:auto; }
.schip { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius:6px; background: var(--ink-ghost); color: var(--ink); text-decoration:none; }
.schip:hover { color: var(--navy); }
.slink { margin-top: var(--space-3); font-size: var(--text-sm); }
.slink a { color: var(--navy); text-decoration:none; }

.steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: var(--space-4); list-style:none; padding:0; margin:0; counter-reset: st; }
.steps li { position:relative; padding: var(--space-6) var(--space-4) var(--space-4); background: var(--ink-ghost); border-radius:12px; counter-increment: st; }
.steps li::before { content: counter(st, decimal-leading-zero); position:absolute; top: var(--space-3); left: var(--space-4); font-family: var(--mono); font-size: var(--text-xs); font-weight:700; color: var(--navy); }
.steps h3 { font-size: var(--text-md); margin:0 0 var(--space-2); }
.steps p { font-size: var(--text-sm); color: var(--ink-dim); line-height:1.5; margin:0; }

.selfhost { text-align:center; padding: var(--space-7) var(--space-4); background: var(--ink-ghost); border-radius:16px; margin: var(--space-5) var(--space-4); }
.selfhost h2 { margin:0 0 var(--space-2); font-size: var(--text-2xl); }
.selfhost p { color: var(--ink-dim); max-width:560px; margin: 0 auto var(--space-4); line-height:1.5; }
.selfhost code { display:inline-block; padding: var(--space-2) var(--space-4); background: var(--bone); border:1px solid var(--ink-hair); border-radius:6px; font-family: var(--mono); font-size: var(--text-sm); }
.home-center { text-align:center; }

/* ---- Homepage section-dark inversion (tokens only) ---- */
.section-dark .home-section { background: transparent; }
.section-dark .home-section-head .eyebrow { color: var(--lime); }
.section-dark .home-section-head h2 { color: var(--bone-on-navy); }
.section-dark .home-section-head p  { color: var(--bone-on-navy-dim); }
.section-dark .pcard { background: transparent; border-color: var(--bone-on-navy-hair); }
.section-dark a.pcard:hover { border-color: var(--lime); transform: translateY(-2px); }
.section-dark .pcard h3 { color: var(--bone-on-navy); }
.section-dark .pcard p  { color: var(--bone-on-navy-dim); }
.section-dark .pcard .ptag { background: var(--bone-on-navy-hair); color: var(--lime); }
.section-dark .pcard .pcta { color: var(--lime); }

/* Algorithm chip strip (tokens only) */
.crypto-strip { display:flex; flex-wrap:wrap; gap: var(--space-3); list-style:none; padding:0; margin: 0 0 var(--space-6); justify-content:center; }
.crypto-strip li { display:flex; flex-direction:column; gap: 4px; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--lime); background: var(--bone-on-navy-hair); border-radius: 4px; }
.crypto-strip .alg-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--lime); }
.crypto-strip strong { font-family: var(--mono); font-size: var(--text-sm); color: var(--bone-on-navy); font-weight: 600; letter-spacing: .02em; }

/* Homepage live CT-widget (.ctw) -- base tokens only, designed to read on .section-dark */
.ctw { max-width: 920px; margin: 0 auto; }
.ctw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding: var(--space-6) 0; border-top: 2px solid var(--lime); border-bottom: 1px solid var(--bone-on-navy-hair); }
.ctw-stat { text-align: left; }
.ctw-num { font-family: var(--mono); font-size: clamp(2.4rem, 5.5vw, 3.6rem); font-weight: 700; line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-bottom: var(--space-3); }
.ctw-num-sm { font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: .04em; }
.ctw-lbl { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .15em; text-transform: uppercase; color: var(--bone-on-navy-dim); }
.ctw-root { padding: var(--space-5) 0; border-bottom: 1px solid var(--bone-on-navy-hair); }
.ctw-root-lbl { display: block; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .15em; text-transform: uppercase; color: var(--bone-on-navy-dim); margin-bottom: var(--space-2); }
.ctw-root-val { font-family: var(--mono); font-size: var(--text-sm); color: var(--bone-on-navy); word-break: break-all; display: block; line-height: 1.7; background: transparent; padding: 0; }
.ctw-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) 0 0; flex-wrap: wrap; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .06em; color: var(--bone-on-navy-dim); }
.ctw-status { display: inline-flex; align-items: center; gap: var(--space-2); }
.ctw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bone-on-navy-dim); }
@media (max-width: 700px) {
  .ctw-stats { grid-template-columns: 1fr; gap: 0; padding: var(--space-2) 0; border-bottom: none; }
  .ctw-stat { padding: var(--space-4) 0; border-bottom: 1px solid var(--bone-on-navy-hair); }
  .ctw-stat:last-child { border-bottom: none; }
  .ctw-num { font-size: clamp(2rem, 9vw, 3rem); }
  .ctw-foot { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .ctw-foot .btn-lime { align-self: stretch; text-align: center; }
}

@media (max-width:600px){ .home-hero{padding: var(--space-6) var(--space-4);} .home-hero h1{font-size: var(--text-4xl);} .home-cta{flex-direction:column;align-items:stretch;} .home-cta .btn{width:100%;} .crypto-strip{justify-content:flex-start} }