/* Case detail artifacts: real supplied media plus lightweight generated workflow slices. */
.case-card-artifact { position: relative; height: 112px; margin: -25px -25px 20px; overflow: hidden; border-bottom: 1px solid var(--line, rgba(189, 224, 209, .16)); background: #101a1c; }
.case-card-artifact::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(32,83,214,.12), transparent 44%, rgba(223,91,53,.16)); mix-blend-mode: screen; }
.case-card-artifact img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(1.05); transition: transform .4s ease, filter .3s ease; }
.case-card:hover .case-card-artifact img { transform: scale(1.035); filter: saturate(.92) contrast(1.06); }
.case-card-artifact span { position: absolute; right: 9px; bottom: 8px; z-index: 1; padding: 4px 6px; border: 1px solid rgba(255,255,255,.34); color: #fff; background: rgba(9, 15, 20, .74); font: 500 8px var(--mono, monospace); letter-spacing: .07em; }
.case-human-process { margin: 21px 0 4px; padding: 13px 14px; border: 1px solid var(--line, rgba(189, 224, 209, .16)); border-left: 2px solid var(--aqua, #66d9e8); background: rgba(102,217,232,.045); }
.case-human-process > span { display: block; margin-bottom: 7px; color: var(--aqua, #66d9e8); font: 500 9px var(--mono, monospace); letter-spacing: .1em; }
.case-human-process p { margin: 0; color: var(--muted, #a8bdb7); font-size: 12px; line-height: 1.65; }
.case-artifacts { margin: 27px 0 23px; }
.case-artifacts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--acid, #c8f169); font: 500 10px var(--mono, monospace); letter-spacing: .1em; }
.case-artifacts-head small { color: var(--muted-2, #7f9592); font-size: 9px; letter-spacing: .05em; }
.case-artifact-note { margin: 0 0 11px; padding: 10px 11px; border: 1px dashed var(--line, rgba(189,224,209,.16)); color: var(--muted-2, #7f9592); background: rgba(255,255,255,.025); font-size: 11px; line-height: 1.55; }
.case-artifact-note b { margin-right: 6px; color: var(--muted, #a8bdb7); font: 500 9px var(--mono, monospace); letter-spacing: .06em; }
.case-artifact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.case-artifact { min-width: 0; min-height: 143px; margin: 0; overflow: hidden; border: 1px solid var(--line, rgba(189, 224, 209, .16)); border-radius: 10px; color: var(--paper, #f2f7ed); background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(0,0,0,.08)); }
.case-artifact-image { display: flex; flex-direction: column; }
.artifact-image-wrap { position: relative; flex: 1; min-height: 108px; overflow: hidden; background: #101a1c; }
.artifact-image-wrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(200,241,105,.16), transparent 44%, rgba(102,217,232,.14)); mix-blend-mode: screen; }
.artifact-image-wrap img { display: block; width: 100%; height: 100%; min-height: 108px; object-fit: cover; filter: saturate(.72) contrast(1.04); }
.artifact-image-wrap > span { position: absolute; right: 7px; bottom: 7px; z-index: 1; padding: 4px 5px; border: 1px solid rgba(200,241,105,.38); color: var(--acid, #c8f169); background: rgba(2, 10, 13, .78); font: 500 8px var(--mono, monospace); letter-spacing: .04em; }
.case-artifact figcaption { padding: 7px 9px 8px; color: var(--muted-2, #7f9592); font: 500 9px var(--mono, monospace); letter-spacing: .07em; }
.case-artifact-generated { position: relative; display: flex; flex-direction: column; padding: 11px; background: radial-gradient(circle at 80% 0%, rgba(102,217,232,.13), transparent 48%), linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.14)); }
.artifact-viz-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted, #a8bdb7); font: 500 9px var(--mono, monospace); letter-spacing: .07em; }
.artifact-viz-head b { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--acid, #c8f169); color: var(--acid, #c8f169); font-size: 9px; }
.artifact-viz-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-viz-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin: 14px 0 9px; opacity: .75; }
.artifact-viz-grid span { display: block; height: 11px; border: 1px solid var(--line-strong, rgba(189,224,209,.28)); background: rgba(102,217,232,.06); }
.artifact-viz-grid span:nth-child(2n) { background: rgba(200,241,105,.09); }
.artifact-viz-bars { display: grid; gap: 4px; }
.artifact-viz-bars i { display: block; width: var(--artifact-width, 65%); height: 3px; border-radius: 5px; background: linear-gradient(90deg, var(--acid, #c8f169), var(--aqua, #66d9e8)); opacity: .72; }
.artifact-viz-bars i:nth-child(2) { opacity: .49; }
.artifact-viz-bars i:nth-child(3) { opacity: .28; }
.artifact-viz-chips { display: flex; gap: 4px; margin-top: auto; padding-top: 9px; overflow: hidden; }
.artifact-viz-chips span { overflow: hidden; max-width: 48%; padding: 3px 4px; border: 1px solid var(--line, rgba(189,224,209,.16)); color: var(--muted-2, #7f9592); font: 500 7px var(--mono, monospace); text-overflow: ellipsis; white-space: nowrap; }
.artifact-viz-caption { margin-top: 8px; overflow: hidden; color: var(--muted, #a8bdb7); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 620px) { .case-artifact-grid { grid-template-columns: 1fr 1fr; }.case-artifact:last-child { grid-column: 1 / -1; }.case-artifact-generated { min-height: 132px; } }
@media (max-width: 390px) { .case-artifact-grid { grid-template-columns: 1fr; }.case-artifact:last-child { grid-column: auto; } }