/* ══════════════════════════════════════════════════════════
   aptEDMS — the secondary pages

   Contact, terms, third-party notices, compare. Loaded after
   landing.css, which already carries the nav, the footer, the
   buttons and the type roles; this file adds only what a page of
   prose or a comparison table needs.

   Same drawing-sheet language as the landing page, turned down.
   These are pages somebody reads rather than pages that have to
   persuade, so the measure is narrower, the rules do more of the
   work, and there is no motion at all.
   ══════════════════════════════════════════════════════════ */

/* ── Page head ─────────────────────────────────────────────
   Set as a title block, because on this site that is what a
   document identifies itself with. */
.doc-head {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.doc-head h1 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  letter-spacing: -.03em; line-height: 1.04;
  margin-top: var(--sp-3); text-wrap: balance;
}
.doc-head .lede {
  color: var(--ink-2); max-width: 62ch;
  margin-top: var(--sp-5); font-size: 1.02rem;
}
.doc-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-6);
}
.doc-meta div { display: grid; gap: 2px; }
.doc-meta dt {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.doc-meta dd { font-family: var(--f-mono); font-size: 13px; color: var(--ink-1); }

/* ── Body ──────────────────────────────────────────────────
   Two columns above 960px: a sticky contents rail and the prose.
   The rail is a list of what is in the document, which on a legal
   page is the difference between reading it and not. */
.doc-body {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 960px) {
  .doc-body { grid-template-columns: 15rem minmax(0, 1fr); }
  .toc { position: sticky; top: calc(var(--topbar-height) + var(--sp-6)); }
}

.toc h2 {
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--sp-4);
}
.toc ol { list-style: none; display: grid; gap: 1px; counter-reset: toc; }
.toc a {
  display: grid; grid-template-columns: 1.9rem 1fr; gap: var(--sp-2);
  padding: var(--sp-2) 0; font-size: 13px;
  color: var(--ink-2); text-decoration: none;
  border-top: 1px solid var(--line);
  transition: color .18s var(--ease);
}
.toc li:last-child a { border-bottom: 1px solid var(--line); }
.toc a::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-3);
}
.toc a:hover { color: var(--ink-1); }

/* ── Prose ─────────────────────────────────────────────────
   One measure, one rhythm. Headings are the only thing allowed to
   be loud, and only the first level of them. */
/* The 74ch measure is for reading, so it caps the things people read
   — not the column. Capping .prose itself squeezed the seven-vendor
   matrix into ~870px, which cut Aconex mid-word and hid four vendors
   entirely, with nothing on screen admitting the table scrolls.     */
.prose { max-width: none; min-width: 0; }
.prose p, .prose ul, .prose ol, .prose dl, .prose h2, .prose h3,
.prose details, .prose blockquote { max-width: 74ch; }
.prose > * + * { margin-top: var(--sp-5); }

.prose section { scroll-margin-top: calc(var(--topbar-height) + var(--sp-8)); }
.prose section + section {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}

.prose h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  letter-spacing: -.02em; line-height: 1.2;
}
.prose h3 {
  font-size: 1rem; font-weight: 650; letter-spacing: -.01em;
  margin-top: var(--sp-8);
}
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink-1); font-weight: 600; }
.prose ul, .prose ol { padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.prose li::marker { color: var(--ink-3); }
.prose code {
  font-family: var(--f-mono); font-size: .88em;
  background: var(--sunk); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 1px 5px; color: var(--ink-1);
}
.prose a { color: var(--accent); text-underline-offset: 3px; }

/* A button is not prose. `.prose a` (0-1-1) outweighs `.btn-fill`
   (0-1-0), which repainted the button's text in the accent colour it
   already uses as a background — accent on accent, a button you can
   only find by hovering. The classic class-cancellation defect: both
   rules look correct alone, and the page shows neither.             */
.prose a.btn { color: var(--on-accent); text-decoration: none; }
.prose a.btn-line { color: var(--ink-1); }
.prose a.btn-line:hover { color: var(--ink-1); }

/* ── Callout ───────────────────────────────────────────────
   Used where a page says something about itself that the reader
   would otherwise have to infer — a draft, an exception, a thing
   that still needs a person to sign it off. */
.note {
  border-left: 3px solid var(--st-ifr);
  background: var(--st-ifr-bg);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.note p { color: var(--ink-1); font-size: 14px; }
.note p + p { margin-top: var(--sp-3); }
.note-title {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--st-ifr);
  display: block; margin-bottom: var(--sp-2);
}

/* ── Tables ────────────────────────────────────────────────
   The comparison and the notices are both registers, so they are
   set like the register: hairlines, mono for anything that is a
   code, and horizontal scroll contained rather than pushing the
   page sideways. */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.prose table { width: 100%; border-collapse: collapse; min-width: 34rem; }
/* The seven-vendor matrix: eight columns cannot share 34rem. It scrolls
   inside .table-wrap rather than compressing to a word per line. */
.prose table.matrix { min-width: 76rem; }
.prose table.matrix thead th:first-child { min-width: 12rem; white-space: normal; }

/* The dimension labels stay put while the vendors scroll under them.
   A comparison row without its label is just a row of adjectives.   */
.matrix thead th:first-child,
.matrix tbody th {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface);
  /* The hairline says where the column ends; the cast shadow says the
     rest of the table passes underneath it. Without the shadow a cell
     cut at the seam reads as broken, not as scrolled. */
  box-shadow: inset -1px 0 0 var(--line), 6px 0 10px -6px rgba(0,0,0,.22);
}
.table-wrap { background: var(--surface); overscroll-behavior-x: contain; }

/* Balance: the aptEDMS column was greedy and the six vendors were
   starved to a word per line. Give ours a ceiling and theirs a floor. */
.matrix th:nth-child(2), .matrix td:nth-child(2) { min-width: 13rem; max-width: 17rem; }
.matrix td:nth-child(n+3) { min-width: 8.5rem; }

.table-hint {
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--sp-2) !important;
}

@media (max-width: 640px) {
  .matrix thead th:first-child, .matrix tbody th { min-width: 8rem; }
}
.prose thead th {
  text-align: left; font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-2);
  background: var(--surface);
  white-space: nowrap;
}
.prose tbody td {
  padding: var(--sp-3) var(--sp-4); font-size: 14px;
  border-bottom: 1px solid var(--line); color: var(--ink-2);
  vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody th {
  text-align: left; padding: var(--sp-3) var(--sp-4); font-size: 14px;
  border-bottom: 1px solid var(--line); color: var(--ink-1);
  font-weight: 600; vertical-align: top;
}
.prose td .mono, .prose th .mono { font-size: 12px; }

/* Yes / no / partial, in the status palette rather than a new one. */
.mark { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; white-space: nowrap; }
.mark-yes  { color: var(--st-ifc); }
.mark-part { color: var(--st-ifr); }
.mark-no   { color: var(--ink-3); }

/* ── Contact ───────────────────────────────────────────────
   No form. A form that posts nowhere is the same defect as a
   check that asserts nothing — it looks like it worked. These are
   addresses that actually receive mail. */
.contact-grid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: var(--sp-8);
}
.contact-card { background: var(--surface); padding: var(--sp-6); display: grid; gap: var(--sp-2); align-content: start; }
.contact-card h3 { font-size: 15px; font-weight: 650; }
.contact-card p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.contact-card a { font-family: var(--f-mono); font-size: 13px; color: var(--accent); word-break: break-all; }



/* ── The compare page as tabs ──────────────────────────────
   Two layers of them, one decision behind both: nothing on this
   page requires sideways scrolling to read.

   The seven sections were a document with a sidebar; they are now
   panels under a sticky strip, because this is a reference a buyer
   consults, not a narrative they read top to bottom. And nobody
   compares seven vendors at once — they arrive with a shortlist —
   so the matrix shows aptEDMS beside ONE vendor, fully visible at
   every width, and the vendor is a tab.

   All of it is enhancement: with no JavaScript the strip is a list
   of working anchors over the full stacked document, and the table
   keeps every column with the sticky-label fallback above.       */

/* Two lessons paid for here. Sticky at top:0 parked the strip under
   the site header — sticky at top:0 itself, higher z-index — so the
   strip was pinned, working, and invisible; the header measures 61px,
   so 62 clears it. And the stickiness must live on the WRAPPER: the
   strip's own parent was exactly as tall as the strip, and a sticky
   element cannot stick inside a container it already fills. */
.doc-tabs-wrap {
  position: sticky; top: 62px; z-index: 90;
  background: var(--base);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-6);
}
.doc-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: var(--sp-4) 0 var(--sp-3);
}
.doc-tabs a {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 13px; border: 1px solid var(--line-2); border-radius: 9px;
  color: var(--ink-2); text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.doc-tabs a:hover { color: var(--ink-1); border-color: var(--ink-3); }
.doc-tabs a[aria-selected="true"] {
  color: var(--accent); border-color: var(--accent);
  background: var(--accent-wash); font-weight: 600;
}
.doc-tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.doc-body.is-tabbed { display: block; }
.doc-body.is-tabbed .prose section + section {
  border-top: 0; margin-top: 0; padding-top: 0;
}
.prose section[hidden] { display: none; }

/* ── The vendor lens ── */
.vendor-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.vendor-bar .table-hint { margin: 0 !important; }
.vendor-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.vendor-tabs button {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 9px;
  color: var(--ink-2); background: transparent; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.vendor-tabs button:hover { color: var(--ink-1); border-color: var(--ink-3); }
.vendor-tabs button[aria-selected="true"] {
  color: var(--accent); border-color: var(--accent);
  background: var(--accent-wash); font-weight: 600;
}
.vendor-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Three columns, no scroll, no sticky machinery. The nth-child map:
   column 1 is the dimension, 2 is aptEDMS, 3..8 are the six vendors
   in tab order — so vendor N shows column N+2 and hides the rest. */
[data-vendor].table-wrap { max-width: 60rem; }
/* `table.matrix` not `.matrix`: the base rule is `.prose table.matrix`
   (0-2-1) and an attribute+class selector (0-2-0) loses to it — the
   same cancellation defect as the invisible button, caught by the same
   measurement. Specificity matched, source order decides, this wins. */
.prose [data-vendor] table.matrix { min-width: 0; width: 100%; }
.prose [data-vendor] table.matrix th,
.prose [data-vendor] table.matrix td,
.prose [data-vendor] table.matrix thead th:first-child { min-width: 0; }
/* .mark is nowrap so a verdict never breaks mid-badge in a wide table.
   In the three-column view the nowrap IS the overflow: one long verdict
   held the aptEDMS column at 367px on a 340px screen. Let them wrap. */
.prose [data-vendor] table.matrix .mark { white-space: normal; }
[data-vendor] .matrix th:nth-child(n+3),
[data-vendor] .matrix td:nth-child(n+3) { display: none; }
[data-vendor="1"] .matrix th:nth-child(3), [data-vendor="1"] .matrix td:nth-child(3),
[data-vendor="2"] .matrix th:nth-child(4), [data-vendor="2"] .matrix td:nth-child(4),
[data-vendor="3"] .matrix th:nth-child(5), [data-vendor="3"] .matrix td:nth-child(5),
[data-vendor="4"] .matrix th:nth-child(6), [data-vendor="4"] .matrix td:nth-child(6),
[data-vendor="5"] .matrix th:nth-child(7), [data-vendor="5"] .matrix td:nth-child(7),
[data-vendor="6"] .matrix th:nth-child(8), [data-vendor="6"] .matrix td:nth-child(8) { display: table-cell; }
[data-vendor] .matrix td:nth-child(2) { max-width: none; }
[data-vendor] .matrix td:nth-child(n+3) { min-width: 0; }
[data-vendor] .matrix thead th:first-child,
[data-vendor] .matrix tbody th {
  position: static;
  box-shadow: inset -1px 0 0 var(--line);
}

/* The last 30px on a phone were pure padding: three columns carrying
   16px a side. Tighter cells, slightly smaller type, no scroll. */
@media (max-width: 640px) {
  .prose [data-vendor] table.matrix th,
  .prose [data-vendor] table.matrix td { padding: 10px 9px; font-size: 13px; }
  .prose [data-vendor] table.matrix .mono { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .doc-tabs a, .vendor-tabs button { transition: none; }
}