/*
  SchemeReady: small additions used by the marketing pages written by the
  pages agent (index, how-it-works, whats-inside, sample-report, pricing,
  for-consultants, about, welcome, templates, accessibility).
  Everything here builds on the tokens and classes in site.css. Load after it.
*/

/* Centre a button group inside a text-center block. */
.cluster-center { justify-content: center; }

/* A list of downloadable files: name, format and size on one line each. */
.file-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .6rem; }
.file-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .75rem 1rem; background: var(--sr-surface); border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm); margin: 0;
}
.file-list .file-name { font-weight: 600; color: var(--sr-heading); flex: 1 1 14rem; }
.file-list .file-meta { color: var(--sr-muted); font-size: var(--sr-fs-sm); }

/* Template shop cards. */
.template-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.template-card { display: flex; flex-direction: column; gap: .6rem; }
.template-card .template-ref { font-family: var(--sr-font-mono); font-size: var(--sr-fs-sm); color: var(--sr-muted); }
.template-card .template-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .5rem; }
.template-card p { margin: 0; }
.template-card .template-meta { font-size: var(--sr-fs-sm); color: var(--sr-muted); }

/* The sample report embed sits beside its callouts from 900px up. */
@media (min-width: 900px) {
  .sample-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: 2rem; align-items: start; }
}
.sample-callouts { display: grid; gap: 1rem; }
.sample-callouts .callout { margin: 0; }

/* Welcome page form width. */
.welcome-form { max-width: 34rem; }
.welcome-form .field + .field { margin-top: 1rem; }
.key-input { font-family: var(--sr-font-mono); letter-spacing: .04em; }

/* Definition-style rows for the accessibility statement and about page. */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0 0 1.25rem; }
.kv dt { font-weight: 600; color: var(--sr-heading); }
.kv dd { margin: 0; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: .5rem; } }

/* Heading that must be an h2 for outline reasons but sized as an h3 inside a card. */
.h3 { font-size: var(--sr-fs-h3); margin-top: 0; }

/* Grid and flex children default to min-width:auto, so a table with a
   min-width inside a card would widen the column and the page. Let the
   .table-wrap scroll instead. */
.split > *, .sample-layout > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .template-grid > *, .frame { min-width: 0; }