/* Commercial Insights Group: inner pages (how it works, coverage, about, request access, privacy,
   data sources, sign in, errors). Loaded after core.css and parts.css. */

/* Page heads: a title on paper */
.page-head { padding: clamp(52px, 7vw, 104px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--rule); }
.page-head .lead { margin-top: 22px; }

/* Page heads at dusk: navy beneath the navy header, the title in white (changed 28 Oct 2026). A page with one of our
   pictures sets it across the edge, half on the navy and half on the paper. */
:root { --overlap: clamp(44px, 8vw, 132px); }
.page-head.dark { border-bottom: 0; }
.page-head.dark .h1 { color: #fff; }
.page-head.has-pic { padding-bottom: calc(var(--overlap) + clamp(36px, 4.5vw, 60px)); }
.head-pic { position: relative; margin-top: calc(-1 * var(--overlap)); }
.page-pic img { aspect-ratio: 2.5 / 1; object-fit: cover; }
.page-head.dark.atlas-head { padding-bottom: clamp(40px, 5vw, 64px); }
.page-head.dark + .atlas { padding-top: clamp(40px, 5vw, 64px); }
/* The credited firm's photograph beside its brief (About) */
.split .split-photo { margin-top: 30px; }
.split-photo img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Two columns: a heading beside its text */
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); padding: clamp(48px, 6vw, 84px) 0; border-top: 1px solid var(--rule); }
.split:first-child { border-top: 0; }
.split > div > * + * { margin-top: 16px; }
.split p, .split li { color: var(--text-2); }
.split strong { color: var(--text); font-weight: 620; }
.split ul { list-style: none; display: grid; gap: 12px; }
.split ul li { padding-left: 22px; position: relative; }
.split ul li::before { content: ""; position: absolute; left: 0; top: 13px; width: 10px; height: 2px; background: var(--ink); }
@media (min-width: 961px) {
  .split > div:first-child > .h2 { position: sticky; top: 104px; }  /* the heading stays beside its text */
}

/* Data tables */
.dtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.dtable th { text-align: left; font-weight: 500; font-size: 13px; color: var(--muted); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ink); }
.dtable td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--text); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable th + th, .dtable td + td { padding-left: 20px; }
.dtable .nowrap { white-space: nowrap; }
.prose .after-table { margin-top: 16px; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; white-space: nowrap; color: var(--text); }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--brass-line); }
.status.live::before { background: var(--brass); }
.status-note { display: block; margin-top: 4px; color: var(--muted); font-size: 13.5px; }

/* Score weights */
.weights { display: grid; gap: 14px; margin-top: 8px; }
.weight { display: grid; grid-template-columns: 120px minmax(0, 1fr) 56px; gap: 16px; align-items: center; }
.weight .bar { height: 10px; background: var(--rule); }
.weight .bar i { display: block; height: 100%; background: var(--ink); width: var(--w); }
.weight b { font-weight: 620; color: var(--text); }
.weight span { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 600; font-stretch: 87%; font-size: 1.1rem; }

/* Questions */
.faq { border-bottom: 1px solid var(--ink); }
.faq details { border-top: 1px solid var(--ink); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-weight: 620; font-stretch: 104%; font-size: 1.06rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 11px; height: 11px; margin-right: 4px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.faq summary:focus-visible { outline-offset: -2px; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details > div { padding: 0 0 22px; color: var(--text-2); max-width: 46em; }

/* Prose */
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.4rem; font-stretch: 108%; margin: 2.2em 0 .6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-2); }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1em; }
.prose ul { padding-left: 1.2em; display: grid; gap: .45em; }
.prose strong { color: var(--text); font-weight: 620; }

/* Request page */
.req { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(56px, 7vw, 96px); align-items: start; }
.next { list-style: none; counter-reset: nx; display: grid; gap: 22px; margin-top: 18px; }
.next li { position: relative; padding-left: 44px; color: var(--text-2); }
.next li::before { counter-increment: nx; content: counter(nx); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink); }
.next b { display: block; color: var(--text); font-weight: 620; }

/* After a navy head, the next steps on paper (the not-found and request-received pages) */
.page-head .code { font-size: 14px; color: var(--muted); font-weight: 600; margin-bottom: 18px; }
.after-head { padding: clamp(36px, 5vw, 56px) 0 clamp(64px, 8vw, 104px); }
.after-head .sent-next { margin-top: 0; }

/* Error */
body.page-error { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }  /* a short page keeps its footer at the foot */
body.page-error main { flex: 1 0 auto; }
.error-page { padding: clamp(80px, 12vw, 160px) 0; }
.error-page .code { font-size: 14px; color: var(--muted); font-weight: 600; margin-bottom: 18px; }

/* Sign in: the form beside a dark panel with one of our own pictures */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 73px); }
.auth-form { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 80px) var(--gutter); }
.auth-form > div { width: 100%; max-width: 400px; margin: 0 auto; }
.auth-form form { display: grid; gap: 18px; margin-top: 30px; }
.auth-form .btn { width: 100%; }
.auth-form .h1 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); }
.sent-next { margin-top: 32px; max-width: 36em; }
/* The picture's lit floor ringed in brass, above our line (28 Oct 2026) */
.auth-art { display: grid; place-items: center; padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px); }
.auth-art > div { width: min(340px, 100%); }
.auth-art .pic { margin: 0 4%; }
.auth-art p { margin-top: 40px; font-size: clamp(1.3rem, .9rem + 1vw, 1.7rem); line-height: 1.2; font-weight: 640; font-stretch: 110%; letter-spacing: -.012em; text-wrap: balance; }
.auth-art p small { display: block; margin-top: 10px; font-size: 15px; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: var(--muted); }

/* Coverage: the map's page */
.atlas-head { border-bottom: 0; padding-bottom: clamp(16px, 2.5vw, 28px); }
.atlas { padding-bottom: clamp(56px, 7vw, 96px); }
.sources, .signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); list-style: none; }
.source, .signals li { border-top: 1.5px solid var(--ink); padding-top: 22px; }
.source-from { margin-top: 4px; color: var(--muted); font-size: 14.5px; font-weight: 560; }
.source-where { margin-top: 16px; }
.source-text { margin-top: 10px; color: var(--text-2); font-size: 15.5px; }
.source-figs { margin: 18px 0 0; }
.source-figs div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule); }
.source-figs dt { color: var(--text-2); font-size: 14.5px; }
.source-figs dd { margin: 0; font-weight: 650; text-align: right; white-space: nowrap; font-stretch: 87%; font-size: 1.05rem; }
.roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; max-width: 62em; }
.roadmap h3 { font-size: 1rem; margin-bottom: 10px; }
.roadmap ul { list-style: none; display: grid; gap: 6px; color: var(--text-2); font-size: 15px; }
.roadmap-later { margin-top: clamp(36px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--ink); max-width: 62em; }
.roadmap-later p { margin-top: 8px; color: var(--text-2); }
.signals li > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.signals b { font-size: 1.1rem; font-weight: 620; font-stretch: 106%; }
.signals p { margin-top: 10px; color: var(--text-2); font-size: 15.5px; }

/* Data sources: the prose beside a short summary of every source */
.data-grid { display: grid; grid-template-columns: minmax(0, 70ch) minmax(0, 300px); justify-content: space-between; gap: clamp(32px, 5vw, 72px); align-items: start; }
.data-grid .prose { grid-column: 1; grid-row: 1; }
.glance { grid-column: 2; grid-row: 1; position: sticky; top: 104px; border-top: 1.5px solid var(--ink); padding-top: 20px; }
.glance dl { margin: 14px 0 0; display: grid; }
.glance dl > div { padding: 12px 0; border-top: 1px solid var(--rule); }
.glance dl > div:first-child { border-top: 0; padding-top: 0; }
.glance dt { font-weight: 620; font-size: 15px; }
.glance dd { margin: 6px 0 0; display: grid; gap: 4px; }
.glance .status { white-space: normal; }
.glance .lic { color: var(--muted); font-size: 13.5px; }

/* Responsive */
@media (max-width: 960px) {
  .split, .req, .auth, .data-grid { grid-template-columns: minmax(0, 1fr); }
  /* tablets and phones: a band of the lit floor above the form, so the page opens on navy like the rest */
  .auth-art { order: -1; padding: 24px var(--gutter) 30px; }
  .auth-art > div { width: min(560px, 100%); }
  .auth-art p { display: none; }
  .auth { min-height: 0; }
  .sources, .signals { grid-template-columns: minmax(0, 1fr); }
  .glance { grid-column: 1; grid-row: auto; position: static; }
  .data-grid .prose { grid-row: auto; }
}
@media (max-width: 760px) {
  .page-pic img { aspect-ratio: 16 / 10; }  /* taller on a phone; these pictures have no ring to keep in place */
  .roadmap { gap: 28px 20px; }
  .weight { grid-template-columns: 96px minmax(0, 1fr) 44px; gap: 10px; }
  .dtable.stacked thead { display: none; }
  .dtable.stacked, .dtable.stacked tbody, .dtable.stacked tr, .dtable.stacked td { display: block; }
  .dtable.stacked tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .dtable.stacked td { padding: 0; border: 0; }
  .dtable.stacked td + td { margin-top: 6px; }
  .dtable.stacked .status { white-space: normal; }
  .dtable.labelled td[data-label] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; text-align: right; }
  .dtable.labelled td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 14px; text-align: left; }
  .dtable.labelled td.block[data-label] { display: block; text-align: left; }
  .dtable.labelled td.block[data-label]::before { display: block; margin-bottom: 2px; }
}

/* About: the rules sit between two splits */
.split + .rules { padding-bottom: clamp(48px, 6vw, 84px); }