/* CSI case-study visuals; the shared site design remains in styles.css. */
.csi-intro { margin: 1.5rem 0 2rem; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.csi-hero-art { background: #f3f1e9; }
.csi-hero-art img { display: block; width: 100%; height: clamp(220px, 30vw, 350px); object-fit: contain; }
.csi-facts { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1.25rem; padding: 1.3rem; }
.csi-facts span, .csi-dimension-label { display: block; font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .045em; text-transform: uppercase; }
.csi-facts span { color: var(--muted); margin-bottom: .4rem; }
.csi-facts strong { font-size: .85rem; font-weight: 500; line-height: 1.5; display: block; }
.csi-framework, .csi-process { margin: 1.75rem 0 2rem; }
.csi-dimension-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.csi-dimension { padding: 1.35rem; border: 1px solid var(--line); border-top: 3px solid var(--csi-accent); border-radius: 4px 4px 12px 12px; background: var(--surface, var(--paper)); }
.csi-resource { --csi-accent: #c99a50; }
.csi-compute { --csi-accent: #4f8fe8; }
.csi-labor { --csi-accent: #54ad82; }
.csi-governance { --csi-accent: #8e72d8; }
.csi-dimension svg { display: block; width: 46px; height: 46px; margin: 1.1rem 0 .7rem; fill: none; stroke: var(--csi-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.csi-dimension h3 { font-family: "Newsreader", Georgia, serif; font-size: 1.5rem; margin: 0 0 .55rem; padding: 0; border: 0; }
.csi-dimension p, .csi-process-steps p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--muted); }
.csi-framework figcaption, .csi-process figcaption { margin-top: .8rem; font-size: .8rem; line-height: 1.6; color: var(--muted); text-align: left; }
.csi-process-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.csi-process-steps li { padding: 1.35rem; margin: 0; border-bottom: 1px solid var(--line); }
.csi-process-steps li:nth-child(odd) { border-right: 1px solid var(--line); }
.csi-process-steps li:nth-last-child(-n+2) { border-bottom: 0; }
.csi-process-steps span { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #e7eced; color: #3b5966; font-family: "DM Mono", monospace; font-size: .8rem; margin-bottom: .8rem; }
.csi-process-steps strong { display: block; font-size: 1rem; margin-bottom: .5rem; }
body.quarto-dark .csi-hero-art { background: #252a2b; }
body.quarto-dark .csi-hero-art img { filter: brightness(.85) saturate(.85); }
body.quarto-dark .csi-process-steps span { background: #303e46; color: #c0d8e9; }
@media (max-width: 600px) {
  .csi-facts { grid-template-columns: 1fr; gap: .9rem; }
  .csi-facts > div + div { padding-top: .8rem; border-top: 1px solid var(--line); }
  .csi-dimension-grid, .csi-process-steps { grid-template-columns: 1fr; }
  .csi-process-steps li:nth-child(odd) { border-right: 0; }
  .csi-process-steps li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

/* Report-based figures retain readable labels and native dark-mode colors. */
.csi-data-figure { margin: 1.8rem 0; }
.csi-chart-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, var(--paper)); }
.csi-chart-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.csi-chart-scroll img { width: 100%; height: auto; max-width: none; margin: 0; }
.csi-chart-light { display: block; }
.csi-chart-dark { display: none; }
body.quarto-dark .csi-chart-light { display: none; }
body.quarto-dark .csi-chart-dark { display: block; }
.csi-data-figure figcaption { margin-top: .8rem; font-size: .8rem; line-height: 1.6; color: var(--muted); text-align: left; }
.csi-data-table { margin: 1.25rem 0 2rem; }
.csi-data-table summary { cursor: pointer; color: var(--copy); padding: .75rem 0; }
.csi-data-table table { font-size: .85rem; }
.csi-data-table details { max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  .csi-chart-scroll .csi-wide-chart { min-width: 620px; }
}
.csi-scroll-hint { display: none; }
body.quarto-light .csi-code-example div.sourceCode,
body.quarto-light .csi-code-example pre { background: #f4f2eb !important; }
.csi-code-example pre { padding: 1rem; }
.csi-code-example pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.csi-code-example code.sourceCode > span { display: block; text-indent: 0; padding-left: 0; }
body.quarto-light .csi-code-example code { color: #24282b; }
body.quarto-light .csi-code-example .cf,
body.quarto-light .csi-code-example .bu { color: #78428d; }
body.quarto-light .csi-code-example .st { color: #246950; }
body.quarto-light .csi-code-example .dv { color: #205f99; }
body.quarto-light .csi-code-example .op { color: #4b535c; }
body.quarto-dark .csi-code-example code { color: #e0e6e3; }
body.quarto-dark .csi-code-example .cf,
body.quarto-dark .csi-code-example .bu { color: #d3b6ed; }
body.quarto-dark .csi-code-example .st { color: #92d5b2; }
body.quarto-dark .csi-code-example .dv { color: #93c5ff; }
body.quarto-dark .csi-code-example .op { color: #bbc5cf; }
@media (max-width: 700px) { .csi-scroll-hint { display: inline; } }