/* ============================================================================
   The reading pages: How it works and Security. The section rows, headings
   and body text come from public/css/site.css (the one pattern on every inner
   page); this file adds what only these pages show: the score card, the
   programme thread, the audience lists, the list of the page's sections and
   the security page's tables.
   ========================================================================== */

.ledger code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--gray-100); border-radius: 4px; padding: 1px 5px; }

/* The scorecard: the product's own artifact, shown instead of described. */
.match-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 44px; align-items: start; }
.match-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 22px 22px 18px; box-shadow: 0 10px 30px rgba(66, 31, 51, 0.07); }
.match-card .demo-tag { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 14px; }
.match-card .pair { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.match-card .who { font-size: 13.5px; line-height: 1.45; }
.match-card .who b { display: block; font-size: 14px; }
.match-card .who span { color: var(--text-muted); font-size: 12.5px; }
.match-card .who .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.mc-ring { position: relative; width: 74px; height: 74px; flex-shrink: 0; }
.mc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mc-ring .num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mc-ring .num b { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1; }
.mc-ring .num span { font-size: 10px; color: var(--text-muted); }
.mc-part { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin: 16px 0 9px; }
.mc-part:first-of-type { margin-top: 0; }
.match-card .factor { grid-template-columns: 140px 1fr 30px; gap: 10px; }
.mc-uplift { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-secondary); border-top: 1px dashed var(--border-color); margin-top: 16px; padding-top: 12px; }
.mc-uplift b { color: var(--primary-500); font-weight: 700; }
.mc-why { font-size: 13px; line-height: 1.65; color: var(--text-secondary); background: var(--gray-50); border-radius: var(--radius); padding: 12px 14px; margin-top: 14px; }
.mc-why b { color: var(--text-primary); }
.mc-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; }

/* The programme: one connected thread, top to bottom. */
.thread { list-style: none; margin: 6px 0 0; padding: 0; position: relative; counter-reset: step; }
.thread::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--primary-200), var(--primary-500)); border-radius: 2px; }
.thread li { position: relative; padding: 0 0 26px 54px; counter-increment: step; }
.thread li:last-child { padding-bottom: 0; }
.thread li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-700); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--bg-primary); }
.thread b { display: block; font-size: 16px; margin-bottom: 3px; }
.thread span { display: block; font-size: 15px; line-height: 1.65; color: var(--text-secondary); max-width: 62ch; }

.aud-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; max-width: 66ch; }
.aud-list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.65; color: var(--text-secondary); }
.aud-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-500); }
.aud-list b { color: var(--text-primary); }
.ledger .body .aud-list + p { margin-top: 18px; } /* beats .ledger .body p's margin */

/* The three audiences: a grid of tiles, the title always, the detail on hover
   or keyboard focus. Where nothing can hover (a phone), the detail is always
   open, so nobody has to find it. The detail stays in the page either way:
   it is only folded, never removed. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; }
.tile {
  position: relative; display: grid; grid-template-rows: auto 0fr; align-content: start;
  padding: 16px 18px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  background: var(--bg-card); cursor: default;
  transition: grid-template-rows .28s ease, border-color .18s ease, box-shadow .18s ease;
}
.tile-icon { display: block; width: 24px; height: 24px; margin-bottom: 12px; color: var(--primary-500); transition: color .18s ease; }
.tile b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; color: var(--text-primary); line-height: 1.3; }
.tile span { display: block; align-self: start; min-height: 0; overflow: hidden; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); opacity: 0; transition: opacity .22s ease, padding-top .28s ease; }
.tile:hover, .tile:focus-visible { grid-template-rows: auto auto 1fr; border-color: var(--primary-300); box-shadow: 0 10px 30px rgba(66, 31, 51, 0.09); }
.tile:hover .tile-icon, .tile:focus-visible .tile-icon { color: var(--primary-700); }
.tile:hover span, .tile:focus-visible span { opacity: 1; padding-top: 8px; }
.tile:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
@media (hover: none) {
  .tile { grid-template-rows: auto auto 1fr; }
  .tile span { opacity: 1; padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .tile, .tile span, .tile-icon { transition: none; } }

/* A page's list of its own sections, right under the hero. */
.toc-row { padding: 40px 0; }
.toc-row + .ledger { border-top: 1px solid var(--border-color); }
.toc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 28px; max-width: 760px; }
.toc a { font-size: 15px; line-height: 1.5; }

/* Plain tables on the security page. */
.info-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 18px; max-width: 760px; }
.info-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.info-table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--gray-500); padding: 0 16px 10px 0; border-bottom: 1px solid var(--border-color); }
.info-table td { vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--gray-100); color: var(--text-secondary); }
.info-table td:first-child { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.policy { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px; max-width: 760px; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 880px) {
  .match-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 760px) {
  .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc-row { padding: 32px 0; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .info-table td:first-child { white-space: normal; }
  /* A wide table becomes one block per row on phones. */
  .info-table.stack thead { display: none; }
  .info-table.stack tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
  .info-table.stack td { display: block; border: 0; padding: 2px 0; }
  .info-table.stack td:first-child { margin-bottom: 4px; }
  .info-table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--text-primary); font-weight: 600; }
  .match-card .factor { grid-template-columns: 132px 1fr 28px; gap: 8px; }
}