/* OSS Verify splash page (layouts/_default/oss-verify.html): one reading column. */

.osv-statement { font-size: 2.6rem; line-height: 1.08; text-wrap: balance; margin-bottom: var(--sp-5); }
.oss-verify-page .lede { font-size: 17px; max-width: none; margin-bottom: var(--sp-6); }

/* the buttons: a solid brand block (blue, so it doesn't read as an accent label chip) and a text link */
.osv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin: 0 0 var(--sp-8); }
.osv-button {
  display: inline-block; padding: var(--sp-3) var(--sp-5); background: var(--brand); color: var(--paper);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; line-height: 1; white-space: nowrap;
}
.osv-button:hover { background: var(--brand-press); color: var(--paper); }
.osv-button:focus-visible { outline-color: var(--ink); }
.osv-actions__alt { font-size: 14.5px; }

/* the post: a blog-index card with a brand bar */
.osv-feature { margin: 0 0 var(--sp-4); padding: var(--sp-4) var(--sp-6) var(--sp-4); border-left: var(--sp-1) solid var(--brand); }
.osv-feature .entry__meta { margin-bottom: var(--sp-1); }
.osv-feature__title { margin: 0; font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.osv-feature__title a { color: var(--ink); text-decoration: none; }
.osv-feature__title a:hover { color: var(--accent-press); }

/* the enrollment fields */
.oss-verify-page .prose table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 var(--sp-5); }
.oss-verify-page .prose thead { display: none; }
.oss-verify-page .prose td { padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; vertical-align: top; border-top: 1.5px solid var(--ink); }
.oss-verify-page .prose td:nth-child(2) {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cyan); padding-top: var(--sp-3); white-space: nowrap;
}

@media (max-width: 640px) {
  .osv-statement { font-size: 1.9rem; }
  /* each field on its own two lines: the name and its tag, then the description */
  .oss-verify-page .prose tr { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); border-top: 1.5px solid var(--ink); padding: var(--sp-2) 0; }
  .oss-verify-page .prose td, .oss-verify-page .prose td:nth-child(2) { border: 0; padding: 0; }
  .oss-verify-page .prose td:nth-child(2) { padding-top: var(--sp-1); }
  .oss-verify-page .prose td:nth-child(3) { grid-column: 1 / -1; padding-top: var(--sp-1); }
}