/* framework-tree.css — shared figure layer for the modelling case studies:
   reference markers, framework diagram, interactive figure shell, figure panes, tables, pull quote, limits, repository. */

/* reference markers */
.refm{font-family:'DM Mono',monospace;font-size:0.62em;font-weight:500;letter-spacing:0.02em;line-height:0;vertical-align:super;}
.refm a{color:var(--accent);text-decoration:none;}
.refm a:hover{text-decoration:underline;}

/* framework diagram */
.fw{margin:24px 0 0;}
.fw__cols{display:grid;grid-template-columns:0.85fr 1.15fr 1fr 1fr;gap:16px;align-items:start;}
@media(max-width:900px){.fw__cols{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.fw__cols{grid-template-columns:1fr;}}
.fw__col{display:flex;flex-direction:column;gap:12px;min-width:0;}
.fw__head{font-family:'DM Mono',monospace;font-size:var(--fs-sm);letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);padding-bottom:8px;border-bottom:2px solid var(--ink);}
.fw__note{font-family:'DM Mono',monospace;font-size:var(--fs-sm);color:var(--mut);line-height:1.5;}
.fw__b{border:1px solid var(--bd);border-top:2px solid var(--accent);padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--bg);}
.fw__b h4{font-family:var(--f);font-size:var(--fs-p);font-weight:600;color:var(--ink);line-height:1.3;}
.fw__b p{font-family:var(--f);font-size:var(--fs-sm);color:var(--sec);line-height:1.55;}
.fw__b ul{list-style:none;display:flex;flex-direction:column;gap:4px;margin:0;padding:0;}
.fw__b li{font-family:'DM Mono',monospace;font-size:var(--fs-sm);color:var(--mut);line-height:1.5;}
.fw__b--plain{border-top-color:var(--ink);}
.fw__vf{margin-top:24px;border-top:2px solid var(--ink);padding-top:20px;}
.fw__vf__head{font-family:'DM Mono',monospace;font-size:var(--fs-sm);letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);margin-bottom:16px;}
.fw__vf__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.fw__v{border:1px solid var(--bd);padding:16px;display:flex;flex-direction:column;gap:8px;}
.fw__v h5{font-family:var(--f);font-size:var(--fs-p);font-weight:600;color:var(--ink);}
.fw__v p{font-family:'DM Mono',monospace;font-size:var(--fs-sm);color:var(--mut);line-height:1.5;}
.fw__v b{font-family:'DM Mono',monospace;font-size:var(--fs-sm);font-weight:500;color:var(--accent);}
.fw__v--fail b{color:var(--ink);}
.fw figcaption{margin-top:16px;font-family:var(--f);font-size:var(--fs-sm);color:var(--sec);line-height:1.65;text-align:justify;text-align-last:left;}
.fw figcaption b{font-family:'DM Mono',monospace;color:var(--accent);font-weight:500;letter-spacing:0.06em;margin-right:8px;}

/* interactive figure shell */
.mfig{--rule:#cfcabc;--rule-soft:#e5dfd0;--muted:#6b6455;--petrol:#2a78d6;--ember:#b8860a;position:relative;margin:24px 0 0;}
.mfig svg{display:block;width:100%;height:auto;overflow:visible;}
.mfig svg text{font-family:'DM Mono',monospace;}
.mfig figcaption{margin-top:16px;font-family:var(--f);font-size:var(--fs-sm);color:var(--sec);line-height:1.65;text-align:justify;text-align-last:left;}
.mfig figcaption b{font-family:'DM Mono',monospace;color:var(--accent);font-weight:500;letter-spacing:0.06em;margin-right:8px;}
.mprov{margin-top:12px;font-family:'DM Mono',monospace;font-size:var(--fs-sm);color:var(--mut);line-height:1.6;}
.mctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px 24px;margin:0 0 20px;font-family:'DM Mono',monospace;font-size:var(--fs-sm);color:var(--ink);}
.mctl__row{display:flex;flex-direction:column;gap:8px;}
.mctl__lbl{color:var(--mut);letter-spacing:0.08em;text-transform:uppercase;font-size:0.92em;}
.mctl__val{color:var(--ink);}
.mctl input[type="range"]{accent-color:var(--accent);width:100%;min-height:44px;}
.mctl__seg{display:flex;gap:0;border:1px solid var(--bd);width:fit-content;flex-wrap:wrap;}
.mctl__seg label{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;cursor:pointer;color:var(--mut);}
.mctl__seg label:has(input:checked){background:var(--ink);color:var(--bg);}
.mctl__seg input{position:absolute;opacity:0;width:1px;height:1px;}
.mctl__seg label:focus-within{outline:2px solid var(--accent);outline-offset:2px;}
.mplay{display:flex;gap:16px;align-items:center;margin:0 0 16px;font-family:'DM Mono',monospace;font-size:var(--fs-sm);}
.mplay button{min-height:44px;min-width:44px;padding:0 20px;border:1px solid var(--bd);background:none;color:var(--ink);font-family:inherit;font-size:inherit;cursor:pointer;transition:border-color .25s,color .25s;}
.mplay button:hover{border-color:var(--accent);}
.mplay button:focus-visible,.mctl input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.mplay input[type="range"]{flex:1;accent-color:var(--accent);min-height:44px;}
.mread{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px 24px;margin-top:20px;padding-top:20px;border-top:1px solid var(--bd);font-family:'DM Mono',monospace;font-size:var(--fs-sm);}
.mread div{display:flex;flex-direction:column;gap:6px;}
.mread span{color:var(--mut);letter-spacing:0.06em;text-transform:uppercase;font-size:0.92em;}
.mread b{color:var(--ink);font-weight:500;font-size:1.15em;}

/* figure panes: a 3D solid beside its 2D companion, and small multiples */
.mfig__duo{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:end;}
.mfig__duo--wide{grid-template-columns:2fr 1fr;gap:24px;}
.mfig__panes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:820px){.mfig__panes{grid-template-columns:1fr;gap:24px;}}
@media(max-width:700px){.mfig__duo,.mfig__duo--wide{grid-template-columns:1fr;gap:16px;}}

/* data table inside a figure */
.mtable{border-collapse:collapse;width:100%;font-family:'DM Mono',monospace;font-size:var(--fs-sm);}
.mtable th,.mtable td{border:1px solid var(--rule-soft,#e5dfd0);padding:8px 12px;text-align:left;color:var(--ink);font-weight:400;vertical-align:top;}
.mtable th{color:var(--mut);font-weight:500;text-transform:uppercase;font-size:0.9em;letter-spacing:0.08em;}

/* audit table: hover or focus a row for its detail */
.audit{border-collapse:collapse;width:100%;font-family:'DM Mono',monospace;font-size:var(--fs-sm);margin:24px 0 0;}
.audit th,.audit td{border:1px solid var(--rule-soft,#e5dfd0);padding:12px 14px;text-align:left;color:var(--ink);font-weight:400;vertical-align:top;}
.audit th{color:var(--mut);font-weight:500;text-transform:uppercase;font-size:0.92em;letter-spacing:0.08em;}
.audit tbody tr{cursor:default;transition:background .2s;}
.audit tbody tr:hover,.audit tbody tr:focus-within{background:rgba(184,134,10,0.07);}
.audit .audit__d{display:none;font-family:var(--f);color:var(--sec);line-height:1.6;}
.audit tr:hover .audit__d,.audit tr:focus-within .audit__d{display:block;margin-top:8px;}
.audit td b{font-weight:500;color:var(--accent);}

/* pull quote, limits, repository, cross link */
.sp__sec .cs-pull{border-left:2px solid var(--accent);padding-left:24px;}
.sp__sec .cs-pull .sp__p{margin-bottom:0;}
.limits{border-top:1px solid var(--bd);padding-top:24px;}
.repo-grid{max-width:480px;}
.repo-grid:has(+ .xlink){margin-bottom:48px;}
.xlink{border-top:1px solid var(--bd);padding-top:24px;}
.xlink .lbl{font-family:'DM Mono',monospace;font-size:var(--fs-sm);letter-spacing:0.14em;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:10px;}
.xlink a{color:var(--accent);}
.xlink .sp__p:last-child{margin-bottom:0;}

/* phones: 2D figures keep a legible minimum width and scroll sideways, 3D figures narrow their view box instead */
@media(max-width:640px){
.mfig__mount:not(:has(> svg.s3d)),.mfig__psub,.fig__mount,.pfig>[class$="-mount"]{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.mfig__mount>svg:not(.s3d),.mfig__psub>svg,.fig__mount>svg,.pfig [class$="-mount"]>svg{min-width:560px;}
svg.s3d text{font-size:11px;}
}

@media print{.mctl,.mplay,.mread{display:none!important;}.audit .audit__d{display:block!important;}}