/* Visual project stories, using the portfolio's existing type and data palette. */
.visual-home .hero { padding: 48px 0 28px; }
.visual-home .hero h1 { margin-bottom: 12px; }
.visual-home .hero .lede { max-width: 46ch; margin-bottom: 18px; }
.visual-home #work { padding-top: 24px; }
.sectionline { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:22px; }
.sectionline h2 { margin:0; }
.sectionline a { font-size:14px; }
.showcase { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface-1); margin-bottom:24px; }
.showcase-body { display:grid; grid-template-columns:1.15fr 1fr; }
.project-visual { margin:0; padding:28px; background:color-mix(in srgb,var(--plane) 65%,var(--surface-1)); border-right:1px solid var(--border); min-width:0; display:flex; flex-direction:column; justify-content:center; }
.project-copy { padding:30px 28px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.project-copy h3 { font-size:25px; line-height:1.2; letter-spacing:-.025em; margin:0 0 12px; }
.project-copy p { margin:0 0 18px; font-size:15px; color:var(--text-secondary); }
.project-copy .eyebrow { font-size:10px; margin-bottom:12px; }
.project-copy .project-link { font-size:14px; font-weight:600; align-self:flex-start; text-underline-offset:5px; }
.chart-label { font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); margin:0 0 22px; }
.chart-caption { font-size:12px; color:var(--text-secondary); margin:18px 0 0; line-height:1.5; }
.chart-axis { display:flex; justify-content:space-between; font:10px var(--mono); color:var(--text-muted); border-top:1px solid var(--axis); padding-top:7px; margin-top:14px; }
.bar-row { margin:0 0 15px; }
.bar-label { display:flex; justify-content:space-between; gap:12px; font-size:12px; margin-bottom:6px; }
.bar-label b { font:500 12px var(--mono); color:var(--text-primary); }
.bar-track { height:12px; border-radius:3px; background:var(--grid); overflow:hidden; }
.bar-fill { width:var(--value); height:100%; background:var(--bar,var(--series-1)); border-radius:3px; transition:width .5s cubic-bezier(.2,.7,.2,1),opacity .2s; }
.bar-row.muted-bar .bar-fill { opacity:.4; }
.mini-legend { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:11px; color:var(--text-secondary); }
.mini-legend span::before { content:''; display:inline-block; width:7px; height:7px; border-radius:2px; margin-right:6px; background:var(--bar); }
.chart-svg { display:block; width:100%; height:auto; overflow:visible; }
.chart-svg text { fill:var(--text-secondary); font-family:var(--mono); font-size:11px; }
.chart-svg .gridline { stroke:var(--grid); }
.chart-svg .chart-value { fill:var(--text-primary); font-weight:500; }
.chart-svg .focus-point { cursor:help; outline:none; }
.chart-svg .focus-point:focus-visible { stroke:var(--accent); stroke-width:3; }
.insight-strip { border-top:1px solid var(--border); padding:12px 24px; display:flex; justify-content:space-between; gap:16px; font:11px var(--mono); color:var(--text-secondary); }
.insight-strip b { color:var(--text-primary); font-weight:500; }
.routing-strip { display:flex; width:100%; height:28px; border-radius:4px; overflow:hidden; margin:18px 0 9px; background:var(--grid); }
.routing-strip span { display:block; height:100%; transition:width .5s; }
.routing-local { width:91.3%; background:var(--series-1); }
.routing-llm { width:8.7%; background:var(--series-2); }
.flow-top { border:1px solid var(--axis); border-radius:7px; padding:12px; text-align:center; font:12px var(--mono); }
.flow-line { width:1px; height:23px; background:var(--axis); margin:auto; position:relative; }
.flow-line:after { content:''; position:absolute; bottom:0; left:-3px; width:5px; height:5px; border-right:1px solid var(--axis); border-bottom:1px solid var(--axis); transform:rotate(45deg); }
.flow-apps { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.flow-app { border:1px solid var(--axis); border-top:3px solid var(--series-1); padding:12px 4px; text-align:center; font:11px var(--mono); border-radius:5px; }
.flow-app:nth-child(2) { border-top-color:var(--series-2); }
.flow-app:nth-child(3) { border-top-color:var(--series-3); }
.flow-app small { display:block; color:var(--text-muted); font:10px var(--mono); margin-top:5px; }
.compact-exp { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:24px; }
.compact-exp h3 { font-size:18px; margin:10px 0 4px; }
.compact-exp p { font-size:15px; color:var(--text-secondary); margin:0 0 12px; }
.compact-exp .eyebrow { font-size:11px; }
.detail-panel { border-top:1px solid var(--border); padding:18px 0; }
.detail-panel summary { cursor:pointer; color:var(--accent); font-size:14px; font-weight:500; }
.detail-panel summary:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.detail-panel p,.detail-panel li { font-size:14px; color:var(--text-secondary); }
.detail-panel section { padding:24px 0; }
.detail-panel .skills { grid-auto-rows:auto; }
.comparison-panel { border:1px solid var(--border); border-radius:12px; background:var(--surface-1); padding:28px; }
.policy-switch { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; }
.policy-switch button { font:13px var(--sans); padding:9px 16px; border:1px solid var(--border); border-radius:6px; background:var(--plane); color:var(--text-secondary); cursor:pointer; }
.policy-switch button[aria-pressed=true] { background:var(--text-primary); color:var(--plane); border-color:var(--text-primary); }
.compare-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:36px; }
.compare-grid figure { margin:0; min-width:0; }
.compare-grid .bar-track { height:20px; }
.compare-grid .bar-row { margin-bottom:22px; }
.policy-summary { font-size:14px; color:var(--text-secondary); margin:0; min-height:46px; }
.donut { width:160px; height:160px; position:relative; margin:4px auto 22px; border-radius:50%; background:conic-gradient(var(--series-2) 0 var(--llm,8.7%),var(--series-1) var(--llm,8.7%) 100%); }
.donut:before { content:''; position:absolute; inset:17px; background:var(--surface-1); border-radius:50%; }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font:600 28px var(--mono); letter-spacing:-.05em; }
.donut-center small { font:10px var(--mono); letter-spacing:.02em; color:var(--text-muted); margin-top:4px; }
.chart-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.chart-controls .chart-label { margin:0; }
.chart-controls select { font:11px var(--mono); color:var(--text-secondary); background:var(--surface-1); border:1px solid var(--border); padding:5px; border-radius:4px; max-width:110px; }
.method-flow { display:grid; grid-template-columns:1fr 28px 1fr 28px 1fr; align-items:center; padding:24px 0; }
.method-node { border:1px solid var(--border); border-radius:8px; padding:20px 12px; text-align:center; background:var(--surface-1); font-size:14px; }
.method-node strong { display:block; margin-bottom:4px; }
.method-node small { color:var(--text-secondary); font-size:12px; }
.method-arrow { text-align:center; color:var(--text-muted); }
.data-table { width:100%; border-collapse:collapse; font-size:12px; }
.data-table th,.data-table td { text-align:left; padding:10px 4px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
.data-table caption { text-align:left; padding:18px 0 8px; color:var(--text-secondary); }
@media(max-width:620px) {
 .showcase-body,.compare-grid,.compact-exp { grid-template-columns:1fr; }
 .project-visual { border-right:0; border-bottom:1px solid var(--border); padding:24px; }
 .project-copy { padding:24px; }
 .project-copy h3 { font-size:23px; }
 .insight-strip { flex-wrap:wrap; gap:6px 16px; padding:12px 24px; }
 .comparison-panel { padding:20px; }
 .compare-grid { gap:24px; }
 .bar-label { font-size:11px; }
 .visual-home .hero { padding:32px 0 18px; }
 .sectionline { flex-wrap:wrap; gap:8px; }
 .method-flow { grid-template-columns:1fr; gap:8px; }
 .method-arrow { transform:rotate(90deg); }
}
@media(prefers-reduced-motion:reduce) { .bar-fill,.routing-strip span { transition:none; } }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.policy-switch[hidden] { display:none; }