/* ComplyVox — the shell for generated pages (templates/page.html and
   templates/blog-index.html).

   Every colour is a token from _ds/.../tokens/colors.css. Nothing here
   hardcodes a hex, and nothing here belongs to the landing page: the landing
   page carries its own styles inside the design-tool source and this file is
   never loaded by it.

   The landing site is deliberately on the light editorial token set. Do not add
   a dark theme here — see context/website-mechanics.md. */

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

/* The page is a column so the footer sits at the bottom of a short page (the
   index with one post) instead of floating a third of the way up. */
body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--violet-tint); color: var(--text-primary); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Keyboard users land on the shell before the article; give them a way past
   it. Visible only when focused. */
.cvx-skip {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  z-index: 40;
}
.cvx-skip:focus { left: var(--space-4); }

/* — Appbar — the landing page's sticky bar. The translucent blur is the same
     effect the landing uses; the colour is the page token mixed with
     transparency rather than a hardcoded rgba. — */

.cvx-appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface-page);
  background: color-mix(in srgb, var(--surface-page) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.cvx-bar {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 60px;
  padding: var(--space-3) clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: var(--space-4) var(--space-7);
}

.cvx-wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-size: 19px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.6px;
  transition: color var(--motion-state) var(--ease);
}
.cvx-wordmark:hover { text-decoration: none; color: var(--link); }

.cvx-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  font-size: 14px;
}
.cvx-nav a {
  color: var(--text-secondary);
  padding: var(--space-1) 0;
  transition: color var(--motion-state) var(--ease);
}
.cvx-nav a:hover { color: var(--link); text-decoration: none; }
.cvx-nav a[aria-current="page"] {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  box-shadow: inset 0 -2px 0 var(--violet);
}

/* Qualified so it outranks the plain `a` colour above. */
a.cvx-cta {
  flex: none;
  background: var(--violet);
  color: var(--text-on-violet);
  padding: 10px var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 20px;
  transition: opacity var(--motion-state) var(--ease);
}
a.cvx-cta:hover { color: var(--text-on-violet); text-decoration: none; opacity: 0.9; }

/* Reading progress along the bottom edge of the bar, driven by the scroll
   position with no script. Browsers without scroll-driven animations get no
   bar, which is the right fallback. */
.cvx-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left center;
}
@supports (animation-timeline: scroll()) {
  .cvx-progress {
    animation: cvx-progress linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes cvx-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* — The reading column — */

.cvx-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 816px;
  margin: 0 auto;
  padding: var(--space-10) clamp(20px, 5vw, 40px) var(--space-11);
}

/* The uppercase label the landing page puts above every section. */
.cvx-eyebrow {
  margin: 0 0 var(--space-5);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
}
.cvx-eyebrow a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: -2px; /* optically align the chevron with the column edge */
  padding: 2px;
  transition: color var(--motion-state) var(--ease);
}
.cvx-eyebrow a:hover { text-decoration: none; color: var(--text-primary); }
.cvx-eyebrow svg { flex: none; }

.cvx-page-title,
.cvx-article h1 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}

.cvx-lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 44ch;
  text-wrap: pretty;
}

.cvx-index-head {
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--border);
}

.cvx-article-head {
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

/* Date · reading time · author. The dots are drawn here so the generator
   emits plain elements and a missing item leaves no stray separator. */
.cvx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) 0;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.cvx-meta > * + *::before {
  content: "·";
  margin: 0 var(--space-2);
  color: var(--text-muted);
}

/* Topic chips: the same chip the landing page uses on its problem cards. There
   are no tag pages yet, so these are labels, not links. */
.cvx-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
}
.cvx-tags li {
  font-size: 11px;
  line-height: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--violet);
  background: var(--violet-tint);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* — Long-form body. Selectors are scoped to .cvx-article because everything
     inside it is generated from a writer's Markdown. — */

.cvx-article {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-primary);
}

.cvx-article > :first-child { margin-top: 0; }
.cvx-article > :last-child { margin-bottom: 0; }

.cvx-article p { margin: 0 0 var(--space-6); text-wrap: pretty; }

.cvx-article h2,
.cvx-article h3,
.cvx-article h4,
.cvx-article h5,
.cvx-article h6 {
  margin: var(--space-9) 0 var(--space-4);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: var(--fw-semibold);
  text-wrap: balance;
  scroll-margin-top: 80px; /* clear the sticky bar when a heading is linked to */
}
.cvx-article h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 27px;
  letter-spacing: -0.02em;
}
.cvx-article h3 { font-size: 21px; margin-top: var(--space-8); }
.cvx-article h4,
.cvx-article h5,
.cvx-article h6 { font-size: 18px; margin-top: var(--space-7); }
.cvx-article h2 + h3 { margin-top: var(--space-5); }

.cvx-article ul,
.cvx-article ol { margin: 0 0 var(--space-6); padding-left: var(--space-6); }
.cvx-article li { margin-bottom: var(--space-2); padding-left: var(--space-1); }
.cvx-article li::marker { color: var(--text-tertiary); }
.cvx-article ol { font-variant-numeric: tabular-nums; }

.cvx-article blockquote {
  margin: 0 0 var(--space-6);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 2px solid var(--violet);
  color: var(--text-secondary);
}
.cvx-article blockquote > :last-child { margin-bottom: 0; }

.cvx-article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.08em 0.3em;
}

.cvx-article pre {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.cvx-article pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

/* A post image is always inside a <p> — the Markdown subset has no block-level
   image — so the paragraph carries the spacing and this only has to stop the
   image overflowing the measure on a narrow screen. */
.cvx-article img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* A figure: a titled list of labelled items, generated from a ```figure
   block (tools/build_content.py, FIGURES). It is words, so it is set as
   words — the column's own face, a size the eye reads without a change of
   gear, real text a phone reflows and a screen reader speaks. It sits on the
   sunken surface behind the hairline, the same panel a code block uses, so it
   reads as an exhibit the prose refers to: a record, the Article's own list.

   Two columns on a desktop: the label column takes what its longest label
   needs, up to 13em, and the items share it through a subgrid so the text
   starts at one edge down the whole record. A phone stacks each item. */
.cvx-article .cvx-figure {
  margin: var(--space-7) 0;
  padding: 0;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.55;
}
.cvx-article .cvx-figure figcaption {
  padding: var(--space-4) var(--space-5);
  font-size: 16px;
  line-height: 1.4;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  text-wrap: balance;
}
.cvx-article .cvx-figure dl {
  display: grid;
  grid-template-columns: fit-content(13em) minmax(0, 1fr);
  margin: 0;
  padding: 0;
}
.cvx-article .cvx-figure dl > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-interior);
}
.cvx-article .cvx-figure dl > div:first-child { border-top: 0; }
.cvx-article .cvx-figure dt {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.cvx-article .cvx-figure dd {
  margin: 0;
  color: var(--text-secondary);
  text-wrap: pretty;
}
/* The note is a citation, set as the meta line is: 14px, tertiary. */
.cvx-article .cvx-figure > p {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.cvx-article hr {
  margin: var(--space-8) 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.cvx-article a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  transition: text-decoration-color var(--motion-state) var(--ease);
}
.cvx-article a:hover { text-decoration-color: var(--link); }

/* — Older / newer, at the foot of a post — */

.cvx-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border);
}

.cvx-post-nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: border-color var(--motion-state) var(--ease),
              background var(--motion-state) var(--ease);
}
.cvx-post-nav-link:hover {
  text-decoration: none;
  border-color: var(--violet);
  background: var(--violet-tint-2);
}
/* Older always sits on the right, even when it is the only link. */
.cvx-post-nav-link[rel="next"] { grid-column: 2; text-align: right; }

.cvx-post-nav-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cvx-post-nav-title {
  font-size: 16px;
  line-height: 1.4;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* — The index — */

.cvx-entries { list-style: none; margin: 0; padding: 0; }

.cvx-entry {
  position: relative;
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--border);
}
.cvx-entry:first-child { padding-top: 0; }

.cvx-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 var(--space-3);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.cvx-entry-meta > * + *::before {
  content: "·";
  margin: 0 var(--space-2);
  color: var(--text-muted);
}

.cvx-entry-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}
.cvx-entry-title a {
  color: var(--text-primary);
  transition: color var(--motion-state) var(--ease);
}
/* The whole entry is the target, not just the title. The pseudo-element sits
   above the summary and chips, so nothing else in the entry needs to be a link. */
.cvx-entry-title a::after { content: ""; position: absolute; inset: 0; }
.cvx-entry-title a:hover,
.cvx-entry:hover .cvx-entry-title a { color: var(--link); text-decoration: none; }
.cvx-entry-title a:focus-visible { outline-offset: 4px; }

.cvx-entry-summary {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
  text-wrap: pretty;
}

.cvx-empty {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* — Waitlist panel, at the foot of every generated page — */

.cvx-panel {
  margin-top: var(--space-10);
  padding: var(--space-7) clamp(20px, 4vw, 32px);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cvx-panel-eyebrow {
  margin: 0 0 var(--space-3);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cvx-panel-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(24px, 3.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}
.cvx-panel-text {
  margin: 0 0 var(--space-5);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 48ch;
  text-wrap: pretty;
}

a.cvx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-6);
  background: var(--violet);
  color: var(--text-on-violet);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: var(--fw-medium);
  transition: opacity var(--motion-state) var(--ease);
}
a.cvx-button:hover { color: var(--text-on-violet); text-decoration: none; opacity: 0.9; }

/* — Footer — mirrors the landing page's — */

.cvx-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
}

.cvx-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px clamp(20px, 4vw, 40px) 32px;
}

.cvx-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  flex-wrap: wrap;
}

.cvx-footer-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) 10px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.4px;
}
.cvx-footer-tagline {
  font-size: var(--t-label-size);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--text-tertiary);
}
.cvx-footer-tagline::before { content: "· "; }

.cvx-footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: var(--t-label-size);
  color: var(--text-tertiary);
}

.cvx-footer-legal {
  margin-top: 26px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-7);
  flex-wrap: wrap;
  font-size: var(--t-label-size);
  line-height: 1.6;
  color: var(--text-tertiary);
}
.cvx-footer-legal address { margin: 0; font-style: normal; }

/* — Phones. The site is opened on one, from a procurement email. — */

@media (max-width: 640px) {
  /* Wordmark and button share the first row; the links take a second. */
  .cvx-bar { flex-wrap: wrap; padding: var(--space-3) var(--space-5) var(--space-3); gap: var(--space-3) var(--space-4); }
  .cvx-wordmark { order: 0; }
  a.cvx-cta { order: 1; margin-left: auto; padding: 8px var(--space-4); }
  .cvx-nav { order: 2; flex-basis: 100%; margin-left: 0; gap: var(--space-5); }

  .cvx-main { padding-top: var(--space-8); padding-bottom: var(--space-9); }
  .cvx-page-title, .cvx-article h1 { line-height: 1.15; }
  .cvx-lede { font-size: 18px; }
  .cvx-article { font-size: 17px; }
  .cvx-article h2 { font-size: 24px; }
  .cvx-article h3 { font-size: 20px; }
  .cvx-article h2, .cvx-article h3, .cvx-article h4 { scroll-margin-top: 112px; }
  .cvx-entry { padding: var(--space-6) 0; }
  .cvx-entry-title { font-size: 22px; }
  .cvx-entry-summary { font-size: 16px; }
  .cvx-article .cvx-figure { margin: var(--space-6) 0; }
  .cvx-article .cvx-figure figcaption,
  .cvx-article .cvx-figure dl > div,
  .cvx-article .cvx-figure > p { padding-left: var(--space-4); padding-right: var(--space-4); }
  .cvx-article .cvx-figure dl > div { display: block; }
  .cvx-article .cvx-figure dt { margin-bottom: var(--space-1); }
  .cvx-post-nav { grid-template-columns: 1fr; }
  .cvx-post-nav-link[rel="next"] { grid-column: auto; text-align: left; }
  .cvx-panel { margin-top: var(--space-9); }
  a.cvx-button { width: 100%; }

  .cvx-footer-brand { align-items: flex-start; }
  .cvx-footer-tagline { flex-basis: 100%; }
  .cvx-footer-tagline::before { content: none; }
}

/* — Print: the article, nothing that only makes sense on screen — */

@media print {
  .cvx-appbar, .cvx-skip, .cvx-post-nav, .cvx-panel, .cvx-footer { display: none; }
  .cvx-main { max-width: none; padding: 0; }
  .cvx-article { font-size: 12pt; line-height: 1.5; }
  .cvx-article a { text-decoration: none; color: inherit; }
  .cvx-article pre { white-space: pre-wrap; }
}