/* Templar Lend — protocol documentation (docs/, en/docs/). Loaded after style.css and docs.css, whose skin and
   chapter vocabulary it keeps (hairlines, one 4px radius, no shadows, no gradients). It adds only what the protocol
   chapters need and docs.css does not have:
   .pd-wide  a chapter whose tables and diagram use the sheet's full width while the prose keeps its measure
   .pd-flow  the flow as a three-lane diagram (maker · Templar · taker); one column with a role chip on phones
   .pd-pair  two callouts side by side (what the wallet shares / never shares)
   .pd-faq   questions that open in place
   .pd-us / .pd-q / .pd-n / .pd-total   the Templar column, the question under a row name, figures, a total row */

/* ---------- wide chapters ---------- */
.doc.pd-wide { max-width: none; }
.doc.pd-wide > :not(.dtable-wrap):not(.pd-flow) { max-width: 72ch; }

/* the hero panel carries the cross instead of the GitHub mark */
.gh-panel img.gh-mark { width: 40px; height: 40px; }

/* ---------- tables ---------- */
.dtable .pd-q { display: block; margin-top: 4px; font: 500 12px/1.45 var(--mono); letter-spacing: .02em; color: var(--muted); }
.dtable th.pd-us { color: var(--ink-strong); border-bottom: 2px solid var(--primary); }
.dtable td.pd-us { background: color-mix(in srgb, var(--primary) 5%, var(--bg)); color: var(--ink-strong); }
.dtable.pd-num th, .dtable.pd-num td { min-width: 0; }
.dtable .pd-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable tbody tr.pd-total td { border-top: 1px solid var(--line-strong); font-weight: 650; color: var(--ink-strong); }
.dtable sub, .doc p sub, .doc li sub { font-size: .72em; line-height: 0; }

/* ---------- two callouts side by side ---------- */
.pd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); align-items: stretch; }
.pd-pair .callout .doc-list { gap: 6px; }
.pd-pair .callout .doc-list li { font-size: 16px; line-height: 1.55; }

/* ---------- the flow: three lanes, one row per step ---------- */
.pd-flow { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); overflow: hidden; }
.doc > .pd-flow { margin-block-start: var(--s4); }
.pf-head, .pf-row, .pf-rails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s2); }
.pf-head { padding: 14px var(--s2) 12px; border-bottom: 1px solid var(--line-strong); background: var(--surface); }
.pf-lane { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; }
.pf-lane img { width: 22px; height: 22px; }
.pf-lane b { font-family: var(--display); font-stretch: 106%; font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--ink-strong); }
.pf-lane i { font: 500 11px/1.4 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pf-body { position: relative; padding: var(--s2); }
.pf-rails { position: absolute; top: 0; bottom: 0; left: var(--s2); right: var(--s2); pointer-events: none; }
.pf-rails i { position: relative; }
.pf-rails i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line); }
.pf-rails i:nth-child(2)::before { background: var(--line-strong); }
.pf-steps { position: relative; display: grid; gap: 10px; }
.pf-row { align-items: start; }
.pf-box {
  position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg);
  font-size: 14px; line-height: 1.45; color: var(--ink);
}
.pf-box[data-l="m"] { grid-column: 1; }
.pf-box[data-l="t"] { grid-column: 2; border-color: var(--primary); }
.pf-box[data-l="k"] { grid-column: 3; }
.pf-box.is-all { grid-column: 1 / -1; background: var(--surface); }
.pf-k { display: flex; align-items: baseline; gap: 8px; }
.pf-k em { flex: 0 0 auto; font: 600 11px/1 var(--mono); font-style: normal; letter-spacing: .02em; color: var(--muted); }
.pf-k b { font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink-strong); }
.pf-to { font: 500 12px/1.45 var(--mono); letter-spacing: .02em; color: var(--muted); }
.pf-who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pf-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.pf-outs li { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.pf-outs li b { display: block; font-weight: 650; color: var(--ink-strong); }
.pd-flow figcaption { padding: 12px var(--s2); border-top: 1px solid var(--line); font: 500 12px/1.55 var(--mono); letter-spacing: .02em; color: var(--muted); }

/* ---------- questions ---------- */
.pd-faq { border-top: 1px solid var(--line-strong); }
.pd-faq > details { border-bottom: 1px solid var(--line); }
.pd-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 56px; padding: 14px 0;
  list-style: none; cursor: pointer;
  font-family: var(--display); font-weight: 650; font-size: 18px; line-height: 1.35; color: var(--ink-strong);
}
.pd-faq summary::-webkit-details-marker { display: none; }
.pd-plus { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: var(--r); transition: background-color .15s, border-color .15s; }
.pd-plus::before, .pd-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: var(--ink-strong); transition: rotate .25s cubic-bezier(.2, .7, .2, 1); }
.pd-plus::after { rotate: 90deg; }
.pd-faq summary:hover .pd-plus { border-color: var(--primary); }
.pd-faq details[open] .pd-plus { background: var(--primary); border-color: var(--primary); }
.pd-faq details[open] .pd-plus::before, .pd-faq details[open] .pd-plus::after { background: var(--on-primary); rotate: 45deg; }
.pd-faq details[open] .pd-plus::after { rotate: 135deg; }
.pd-a { max-width: 66ch; padding: 0 0 var(--s3); }
.pd-a > * + * { margin-top: var(--s1); }
.pd-a p { line-height: 1.65; }
.doc > .pd-faq { margin-top: var(--s4); }

/* ---------- widths ---------- */
@media (max-width: 720px) {
  .pd-pair { grid-template-columns: minmax(0, 1fr); }
  .pd-faq summary { font-size: 17px; }
}

/* phones: the lanes fold into one column; each box names its role */
@media (max-width: 640px) {
  .pf-head, .pf-rails { display: none; }
  .pf-body { padding: 12px; }
  .pf-steps { gap: 8px; }
  .pf-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pf-box[data-l], .pf-box.is-all { grid-column: 1; }
  .pf-who {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none;
    justify-self: start; padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: var(--r);
    font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-strong);
  }
  .pf-box[data-l="t"] .pf-who { border-color: var(--primary); }
  .pf-outs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .dtable.is-stack td.pd-n { text-align: left; }
  .dtable.is-stack td.pd-us { background: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-plus::before, .pd-plus::after { transition: none; }
}