/* Portal v10 shared components: embedded tools, the flow diagram and the author module.
   Loaded only by pages that use them. Colours and type come from the existing tokens in style.css. */

/* --- tool shell --------------------------------------------------------- */
.selfcheck{background:var(--cream);border:1px solid var(--line);padding:27px;scroll-margin-top:100px}
.selfcheck p{font-size:14px}
.selfcheck h2{font-size:31px}
.selfcheck-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.selfcheck label{font:600 13px/1.6 var(--sans);margin-bottom:6px}
.selfcheck label small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.selfcheck input[type=number]{font-size:15px}
.selfcheck form>.button{margin-top:22px}
.tool-result:not(:empty){border-top:1px solid var(--line);padding-top:25px;margin-top:25px}
.tool-result h3{font-size:28px;margin:0 0 15px}
.tool-result dt{font:700 12px var(--sans);margin-top:16px}
.tool-result dd{margin:5px 0 0;font-size:15px}
.tool-result details{border-bottom:0}
.tool-facts{font-size:13px;padding-left:20px}
.tool-checklist{display:grid;gap:12px}
.tool-check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.6}
.tool-check input{margin-top:3px}
.tool-question{font:600 15px/1.6 var(--sans);margin-bottom:14px}
.tool-options{display:flex;flex-wrap:wrap;gap:9px}
.tool-options .button{font-size:12px;padding:10px 14px;background:var(--paper)}
.tool-tree [data-tree-back]{display:inline-block;margin-top:16px;background:none;padding:0;font-size:12px;color:var(--muted)}

/* --- flow diagram ------------------------------------------------------- */
.kpd-flow{margin:30px 0;border:1px solid var(--line);background:var(--paper-2);padding:22px 20px 16px}
.kpd-flow>.eyebrow{margin-bottom:14px}
.kpd-flow figure{margin:0}
.kpd-flow svg{display:block;width:100%;height:auto}
.kpd-flow .flow-stage{fill:var(--paper);stroke:var(--line)}
.kpd-flow .flow-stage-weak{fill:#efe0d1;stroke:var(--copper)}
.kpd-flow .flow-label{font:600 11px var(--sans);fill:var(--ink)}
.kpd-flow .flow-sub{font:10px var(--sans);fill:var(--muted)}
.kpd-flow .flow-link{stroke:var(--copper);stroke-width:1.5;fill:none}
.kpd-flow .flow-node{font:600 10px var(--sans);fill:var(--copper-dark);letter-spacing:1px}
.kpd-flow figcaption{font-size:12px;line-height:1.7;color:var(--muted);margin-top:14px}

/* --- author module ------------------------------------------------------ */
.kpd-founder{display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:start;margin:34px 0;padding:26px;border:1px solid var(--line);background:var(--paper-2)}
.kpd-founder .founder-portrait{aspect-ratio:1;border:1px solid var(--line);background:var(--cream);display:grid;place-items:center;text-align:center;padding:10px}
.kpd-founder .founder-portrait span{font:26px/1 var(--serif);color:var(--copper-dark);display:block}
.kpd-founder .founder-portrait small{display:block;font-size:9px;line-height:1.5;color:var(--muted);margin-top:8px}
.kpd-founder h2{font-size:24px;margin-bottom:10px}
.kpd-founder p{font-size:14px;line-height:1.75;margin-bottom:10px}
.kpd-founder p:last-child{margin-bottom:0}
.kpd-founder .founder-role{font-size:11px;color:var(--muted)}

@media(max-width:650px){
  .selfcheck{padding:19px}
  .selfcheck-fields{grid-template-columns:1fr}
  .selfcheck h2{font-size:29px}
  .kpd-flow{padding:16px 14px 12px}
  .kpd-flow figure{overflow-x:auto}
  .kpd-flow svg{min-width:520px}
  .kpd-founder{grid-template-columns:1fr;gap:18px;padding:20px}
  .kpd-founder .founder-portrait{width:96px}
}

/* --- recognition -------------------------------------------------------- */
.kpd-recognition{margin:28px 0;padding:22px 24px;border-left:2px solid var(--copper);background:var(--cream)}
.kpd-recognition p:last-child{margin-bottom:0}
.recognition-list{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.recognition-list li{font:italic 16px/1.6 var(--serif);color:var(--ink-2);margin:0}