/* Shared styles for TNC review cards */
.preview-shell{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:48px 0 72px}
.preview-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:32px}
.preview-header img{width:190px;max-width:36vw}
.preview-title{max-width:760px}
.preview-title h1{margin:8px 0 12px}
.preview-title p{color:var(--muted);max-width:68ch}
.preview-section{margin-top:32px}
.preview-section>h2{margin-bottom:16px}
.preview-grid{display:grid;gap:16px}
.preview-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.preview-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.preview-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.preview-card{padding:24px}
.demo-stage{padding:24px;border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface)}
.demo-stage--dark{background:var(--fg);color:var(--on-dark);border-color:var(--navy-3)}
.swatch{overflow:hidden;padding:0;text-align:left;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.swatch .fill{min-height:112px}
.swatch .meta{padding:16px}
.swatch .meta b{display:block;margin-bottom:4px}
.swatch .meta span{display:block;color:var(--muted);font-size:var(--fs-small)}
.swatch .meta code{color:var(--accent-2)}
.token-row{display:grid;grid-template-columns:130px 1fr 90px;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}
.token-row:last-child{border-bottom:0}
.space-sample{height:18px;border-radius:var(--radius-sm);background:var(--accent-2)}
.radius-sample{display:grid;place-items:center;min-height:140px;color:#fff;font-weight:700;text-align:center;background:linear-gradient(135deg,var(--navy-3),var(--fg))}
.shadow-sample{display:grid;place-items:center;min-height:130px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.asset-frame{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.asset-frame img{max-height:120px;object-fit:contain}
.asset-frame--dark{background:var(--fg);border-color:var(--navy-3)}
.doc-frame{position:relative;min-height:360px;padding:28px;border-radius:var(--radius);overflow:hidden;background:var(--fg);color:#fff}
.doc-frame__title{font-size:var(--fs-small);color:var(--on-dark-muted)}
.doc-frame__logo{position:absolute;top:24px;right:24px;width:170px}
.doc-frame__folio{position:absolute;right:28px;bottom:22px;font-size:54px;font-weight:800;line-height:1}
.doc-frame--light{background:var(--surface);color:var(--fg);border:1px solid var(--border)}
.doc-frame--light .doc-frame__title{color:var(--muted)}
.doc-frame--light .doc-frame__folio{color:var(--accent)}
@media (max-width:860px){
  .preview-header{flex-direction:column}
  .preview-grid--2,.preview-grid--3,.preview-grid--4{grid-template-columns:1fr}
  .token-row{grid-template-columns:1fr;gap:8px}
}
