/* Shared styles for /vault, /docs, /proof. Token-driven: only var(--…) from /shared/base.css, no raw colours. */
.page{padding:28px 0 8px}
.page h1{font-family:var(--font-mono); font-weight:400; font-size:clamp(26px,4vw,38px); line-height:1.1; margin:0 0 8px}
.page h2{font-family:var(--font-mono); font-weight:400; font-size:20px; margin:40px 0 12px}
.page h3{font-size:16px; margin:20px 0 6px}
.page p,.page li{max-width:70ch}
.lede{color:var(--muted); font-size:18px; margin:0 0 20px}
.card{background:var(--paper); color:var(--paper-ink); border-radius:var(--radius); padding:18px; box-shadow:var(--paper-shadow); margin:0 0 16px}
.card .muted,.card .hint{color:var(--paper-muted)}
.card h3{margin:0 0 10px; font-family:var(--font-mono); font-weight:400; font-size:16px}
.card a{color:inherit}
.hint{font-size:13px; color:var(--muted); margin:6px 0 0}
.note{border:1px dashed var(--line-2); border-radius:var(--radius); padding:12px 14px; color:var(--muted); margin:0 0 16px}
.note.is-warn{border-color:var(--warn); color:var(--warn-text)}
.note.is-err{border-color:var(--refused); color:var(--refused-text)}
.grid2{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:860px){ .grid2{grid-template-columns:1fr 1fr} }
.kv{display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0; font-size:14px}
.kv dt{color:var(--paper-muted)} .kv dd{margin:0; word-break:break-all; font-family:var(--font-mono); font-size:13px}
.kv.on-bg dt{color:var(--muted)}
.field{display:block; margin:0 0 12px}
.field>span{display:block; font-size:13px; color:var(--paper-muted); margin-bottom:4px}
.field input,.field select{width:100%; height:40px; padding:0 10px; border-radius:8px; border:1px solid var(--paper-line); background:var(--paper); color:var(--paper-ink); font-family:var(--font-mono); font-size:14px}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.row>input{flex:1 1 160px; min-width:0; height:36px; padding:0 10px; border-radius:8px; border:1px solid var(--paper-line); background:var(--paper); color:var(--paper-ink); font-family:var(--font-mono); font-size:13px}
.card .hw-btn{color:var(--paper-ink); border-color:var(--paper-line)}
.card .hw-btn:hover{background:var(--paper-line)}
.card .hw-btn--primary{background:var(--bg); color:var(--ink); border-color:transparent}
.card .hw-btn--primary:hover{background:var(--bg-2)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 10px; border-radius:999px; border:1px solid var(--paper-line); font-family:var(--font-mono); font-size:12px}
.chip button{border:0; background:transparent; cursor:pointer; width:20px; height:20px; border-radius:999px; color:var(--paper-muted); padding:0}
.chip button:hover{background:var(--paper-line)}
.steps{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:4px; font-size:14px}
.steps li{display:flex; gap:8px; align-items:baseline}
.steps .st{font-family:var(--font-mono); font-size:12px; min-width:64px; color:var(--paper-muted)}
.steps .is-ok .st{color:var(--paid-text)} .steps .is-err .st{color:var(--refused-text)}
pre.code{background:var(--bg-2); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:14px; overflow-x:auto; font-family:var(--font-mono); font-size:13px; line-height:1.55; margin:8px 0 16px; position:relative}
.copy{position:absolute; top:8px; right:8px}
table.tbl{width:100%; border-collapse:collapse; font-size:14px}
table.tbl th{font-weight:500; color:var(--muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:13px; white-space:nowrap}
table.tbl td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
table.tbl td.mono,table.tbl .mono{font-family:var(--font-mono); font-size:13px}
.scroll-x{overflow-x:auto}
.tag{display:inline-block; padding:1px 8px; border-radius:999px; font-family:var(--font-mono); font-size:12px; border:1px solid currentColor}
.tag--paid{color:var(--paid-text)} .tag--refused{color:var(--refused-text)} .tag--sent{color:var(--faint)} .tag--info{color:var(--muted)}
.tabs{display:flex; gap:6px; margin:0 0 16px}
.tabs a{padding:7px 14px; border-radius:8px; border:1px solid var(--line); text-decoration:none; font-size:15px; color:var(--muted)}
.tabs a[aria-current="page"]{color:var(--ink); border-color:var(--line-2); background:var(--bg-2)}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0 0 20px}
.stat{border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; background:var(--bg-2)}
.stat b{display:block; font-family:var(--font-mono); font-weight:400; font-size:22px} .stat span{font-size:13px; color:var(--muted)}
.two-col{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:760px){ .two-col{grid-template-columns:1fr 1fr} }
.faq details{border-bottom:1px solid var(--line); padding:12px 0} .faq summary{cursor:pointer; font-weight:600}
.faq details p{margin:8px 0 0; color:var(--muted)}
.toc{display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 8px; font-size:14px}
code{font-family:var(--font-mono); font-size:.92em}
.disclaimer{color:var(--faint); font-size:13px}