/* /files, /about, /privacy: what you can upload and the info pages. Roomy, one readable column, three cards across at most. */
.files-page, .files-hero, .files-section { --gap: clamp(1.25rem, 2.5vw, 2rem); }
.files-hero { padding: var(--s8) 0 var(--s7); background: var(--surface); border-bottom: 1px solid var(--border); }
.files-hero .wrap-pub > * { margin: 0; }
.files-hero .wrap-pub > * + * { margin-top: var(--s4); }
.files-hero .eyebrow { margin-top: var(--s5); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 600; }
.files-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-top: var(--s2); }
.files-hero .lead { max-width: 58ch; font-size: 1.1rem; line-height: 1.65; color: var(--text); }
.files-hero .btn { margin-right: var(--s2); }
.files-section { padding: var(--s8) 0 0; }
.files-last { padding-bottom: var(--s9, 5rem); }
.files-section h2 { margin: 0 0 var(--s5); font-size: 1.45rem; }
.files-section > .wrap-pub > p.quiet { margin-top: var(--s4); color: var(--text-muted); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; }
.chip { display: inline-block; padding: 3px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-strong); font-size: var(--t-sm); white-space: nowrap; }
.chip-accent { background: color-mix(in srgb, var(--brand-green) 14%, transparent); border-color: var(--brand-green); }
.chips.big .chip { padding: 6px 16px; font-size: .95rem; }

.check-flow { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); list-style: none; padding: 0; margin: 0; }
.check-flow li { display: grid; gap: var(--s2); align-content: start; padding: var(--s5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-muted); line-height: 1.55; }
.check-flow strong { color: var(--text-strong); font-size: 1.05rem; }
.flow-n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand-green); color: #fff; font-weight: 700; margin-bottom: var(--s1); }

.doc-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.doc-card { display: grid; gap: var(--s3); align-content: start; padding: var(--s5) var(--s5) var(--s4); background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--brand-green); border-radius: var(--r-md); line-height: 1.55; }
.doc-card h3 { margin: 0; font-size: 1.15rem; }
.doc-card .chips { gap: var(--s1) var(--s2); }
.doc-needs { margin: 0; color: var(--text); }
.doc-card details { color: var(--text-muted); font-size: var(--t-sm); }
.doc-card details p { margin: var(--s2) 0 0; }
.doc-card summary { cursor: pointer; color: var(--text-strong); font-weight: 600; }
.doc-size { margin: 0; padding-top: var(--s2); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--t-sm); }

.files-two { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.files-panel { padding: var(--s5) var(--s6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); line-height: 1.6; }
.files-panel-warn { border-top: 4px solid #d9962b; }
.files-panel h2 { margin: 0 0 var(--s3); font-size: 1.3rem; }
.files-panel p { margin: 0 0 var(--s3); }
.tick-list, .cross-list { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: var(--s3); line-height: 1.6; }
.tick-list li, .cross-list li { position: relative; padding-left: 1.9rem; }
.tick-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand-green); font-weight: 700; }
.cross-list li::before { content: "\00D7"; position: absolute; left: .1rem; color: #b8731a; font-weight: 700; font-size: 1.3rem; line-height: 1.2; }
.files-last .btn { margin-top: var(--s3); }

/* The same pages inside the signed-in app (sidebar layout): one centred column, public-only helper classes get app equivalents */
body:not(.pub) .wrap-pub { width: min(1040px, 100% - 3rem); margin-inline: auto; }
body:not(.pub) .files-hero { background: transparent; padding-top: var(--s6); }
body:not(.pub) .files-hero .eyebrow { margin-top: var(--s3); }
body:not(.pub) .pub-section { padding: var(--s6) 0 var(--s8); }
body:not(.pub) .prose { max-width: 48rem; line-height: 1.65; }
body:not(.pub) .prose h2 { margin-top: var(--s6); }
body:not(.pub) .prose p, body:not(.pub) .prose li { margin-bottom: var(--s3); }
@media (max-width: 520px) {
  .files-hero { padding: var(--s6) 0 var(--s5); }
  .files-section { padding-top: var(--s6); }
  .doc-card, .files-panel, .check-flow li { padding: var(--s4); }
}