/* Parleybox APP pages (/proof /docs /vaults/:n): style A, built on base.css tokens */
body { overflow-x: hidden; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--violet); color: var(--ink); padding: 10px 14px; }
.skip:focus { left: 8px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s5); border-radius: var(--r2); font: 700 .78rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--line-2); background: transparent; color: var(--bone); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.btn:hover { border-color: var(--bone-2); color: var(--bone); }
.btn--buy { border-color: var(--violet); color: var(--violet); }
.btn--buy:hover { background: var(--violet); color: var(--ink); border-color: var(--violet); }
.btn--plain { font-size: .72rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* nav */
.nav { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: var(--ink); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); text-decoration: none; font: 700 1.05rem/1 var(--f-display); min-height: var(--tap); }
.wordmark:hover { color: var(--bone); }
.wordmark__lamp { flex: none; width: 22px; height: 22px; fill: var(--violet); stroke: var(--bone-2); stroke-width: 1.6; stroke-linecap: round; }
.wordmark__lamp path:first-child { stroke: none; }
.nav__links { display: flex; align-items: center; gap: var(--s5); font-size: var(--fs-s); }
.nav__links > a:not(.btn) { color: var(--bone-2); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.nav__links > a:not(.btn):hover, .nav__links > a[aria-current] { color: var(--bone); }
.nav__links > a[aria-current] { box-shadow: inset 0 -2px 0 var(--violet); }
.buy-short { display: none; }
@media (max-width: 620px) {
  .nav { gap: var(--s2); }
  .nav__links { gap: var(--s3); }
  .buy-long { display: none; } .buy-short { display: inline; }
  .nav__links .btn { padding: 0 var(--s3); }
  .wordmark span { font-size: .95rem; }
}
@media (max-width: 400px) { .wordmark span { display: none; } }

/* CA chip */
.ca { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s3) 0; margin: var(--s5) 0 0; }
.ca__row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.ca__sym { font: 700 .82rem/1 var(--f-display); }
.ca__addr { font: 400 .9rem/1.3 var(--f-mono); color: var(--bone); overflow-wrap: anywhere; flex: 1 1 18ch; min-width: 0; }
.ca__addr.is-pending { color: var(--bone-2); }
.ca__copy, .ca__scan { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s4); border: 1px solid var(--line-2); border-radius: var(--r2); background: none; color: var(--bone-2); font: 700 var(--fs-xs)/1 var(--f-mono); letter-spacing: var(--track-tag); text-transform: uppercase; cursor: pointer; text-decoration: none; }
.ca__copy:hover:not([disabled]), .ca__scan:hover { border-color: var(--violet); color: var(--violet); }
.ca__copy[disabled] { cursor: default; opacity: .7; }
.ca__copy.is-copied { color: var(--ink); background: var(--violet); border-color: var(--violet); }
.ca__warn { margin: var(--s2) 0 0; font-size: var(--fs-xs); color: var(--bone-3); }

/* page */
.page { max-width: 1040px; margin: 0 auto; padding: var(--s6) var(--gutter) var(--s8); }
.page__eyebrow { margin: 0 0 var(--s3); font: 700 var(--fs-xs)/1 var(--f-mono); letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--bone-2); }
.page h1 { margin: 0; font: 700 var(--fs-xl)/1.08 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.page h1 em { font-style: normal; color: var(--violet); }
.lede { margin: var(--s4) 0 0; color: var(--bone-2); max-width: 66ch; }
.page h2 { margin: var(--s8) 0 var(--s4); font: 700 1.15rem/1.2 var(--f-display); letter-spacing: -.01em; scroll-margin-top: 16px; }
.page h2 a.anchor { color: var(--bone-3); text-decoration: none; margin-left: 8px; font-weight: 400; }
.page h3 { margin: var(--s5) 0 var(--s2); font: 700 .8rem/1.3 var(--f-mono); letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--bone-2); }
.page p, .page li { max-width: 72ch; }
.page code { font-family: var(--f-mono); font-size: .92em; background: var(--ink-3); padding: 1px 5px; border-radius: var(--r1); overflow-wrap: anywhere; }
.page a code { color: inherit; }
pre { margin: var(--s3) 0; padding: var(--s4); background: var(--ink-2); border: 1px solid var(--line-2); border-left: 3px solid var(--violet); border-radius: var(--r2); overflow-x: auto; font: 400 .86rem/1.5 var(--f-mono); tab-size: 2; max-width: 100%; }
pre code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; }
pre.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.note { border: 1px solid var(--line-2); border-left: 3px solid var(--bone-2); background: var(--ink-2); padding: var(--s3) var(--s4); font-size: var(--fs-s); margin: var(--s4) 0; max-width: 72ch; }
.note--violet { border-left-color: var(--violet); }
.note--red { border-left-color: var(--red); }
.note b { font: 700 var(--fs-xs)/1.4 var(--f-mono); letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--bone); margin-right: 8px; }

/* tables */
.tbl-wrap { overflow-x: auto; margin: var(--s3) 0; border: 1px solid var(--line); border-radius: var(--r2); max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-s); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 700 var(--fs-xs)/1.2 var(--f-mono); letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--bone-3); background: var(--ink-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .hash, td a.hash { overflow-wrap: anywhere; word-break: break-all; }
.wide-hash { font-size: .8rem; }

/* TOC */
.toc { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: var(--s5) 0 0; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r1); color: var(--bone-2); text-decoration: none; font-size: var(--fs-xs); letter-spacing: .04em; }
.toc a:hover { border-color: var(--violet); color: var(--violet); }

/* vault cards (proof + vault page) */
.vcard { margin: var(--s6) 0 0; border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--ink-2); }
.vcard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--line); }
.vcard__title { margin: 0; font: 700 1.1rem/1.2 var(--f-display); }
.vcard__title a { color: inherit; text-decoration: none; }
.vcard__title a:hover { color: var(--violet); }
.vcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vcard__body { padding: var(--s4); }
.vcard__body > h3:first-child { margin-top: 0; }
.tag--practice { color: var(--bone); border-color: var(--bone-2); border-style: dashed; }
.tag--ok { color: var(--ink); background: var(--violet); border-color: var(--violet); }
.tag--bad { color: var(--ink); background: var(--red-ink); border-color: var(--red-ink); }
.tag--na { color: var(--bone-2); border-style: dashed; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px var(--s4); margin: 0; font-size: var(--fs-s); }
.kv dt { font: 700 var(--fs-xs)/1.6 var(--f-mono); letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--bone-3); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 620px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dt { margin-top: 10px; } }
.check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.skel { color: var(--bone-3); }

/* attempts (transcript) */
.feed { margin: var(--s3) 0 0; padding: 0; list-style: none; }
.att { padding: var(--s4) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 150px 1fr; gap: var(--s2) var(--s4); }
.att:first-child { border-top: 0; }
.att__meta { font-size: var(--fs-xs); color: var(--bone-3); display: grid; gap: 6px; align-content: start; }
.att__msg, .att__reply { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.att__reply { color: var(--bone-2); margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line-2); }
.att__who { color: var(--bone-2); }
.att.is-win { border: 1px solid var(--violet); border-radius: var(--r2); padding: var(--s4); background: rgba(157, 123, 255, .06); }
@media (max-width: 620px) { .att { grid-template-columns: 1fr; } .att__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; } }
.more { margin-top: var(--s4); }

.state { padding: var(--s6) 0; color: var(--bone-2); }
.state.is-err { color: var(--red-ink); }

/* footer */
.foot { border-top: 1px solid var(--line); margin-top: var(--s8); }
.foot__in { max-width: 1040px; margin: 0 auto; padding: var(--s6) var(--gutter) var(--s7); font-size: var(--fs-s); color: var(--bone-2); }
.foot__in p { margin: 0 0 var(--s3); max-width: 80ch; }
.foot__ca code { overflow-wrap: anywhere; color: var(--bone); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.foot__links a { min-height: var(--tap); display: inline-flex; align-items: center; }