/* Design system case page (11.10.2026): additions to style.css, same tokens. Page map: ../../design-system-page-map.md */

/* problem: her four bullets as four short items, two columns (the triad pattern, one more row) */
.triad.two { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s4); }

/* screens already carry their own background (11.10, her note): no frame, no line, the image is scaled down proportionally and keeps the page corner radius, and the same soft shadow as the .window screens on Risk */
.shot-frame { background: none; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 12px 32px rgba(17, 17, 17, 0.06); align-content: start; width: min(100%, 600px); justify-self: start; }
/* the size is set on the frame, so the frame is exactly as wide as the image (no white sides); the image fills it */
.shot-frame img { display: block; width: 100%; height: auto; max-width: none; max-height: none; }
.shot-frame.tall { width: min(100%, 440px); }
.shot-frame.narrow { width: min(100%, 300px); }
.shot-frame.narrow.dark { width: min(100%, 420px); }
.shots.ds { grid-template-columns: auto auto; justify-content: start; align-items: start; gap: var(--s3); }
.shots.stack { grid-template-columns: 1fr; gap: var(--s4); }
/* the grid page and the dashboard are one unit: two tiles, one caption */
.shot-frame.pair { gap: var(--s3); grid-auto-flow: row; overflow: visible; border-radius: 0; box-shadow: none; }
.shot-frame.pair img { border-radius: var(--radius); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 12px 32px rgba(17, 17, 17, 0.06); }

/* the Design section: three short steps, each with its text and its screens */
.dstep { display: grid; gap: var(--s3); margin-top: var(--s6); }
.dstep:first-of-type { margin-top: var(--s4); }
.dstep > p, .dstep > h3 { margin: 0; }

/* design principles: five rows, icon, name, her sentence (replaces the dark image and the plain list) */
.dprin { list-style: none; margin: 0; padding: 0; display: grid; }
.dprin li { display: grid; grid-template-columns: 72px minmax(0, 200px) minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--color-line); }
.dprin li:last-child { border-bottom: 1px solid var(--color-line); }
.dprin .disc { width: 72px; height: 72px; border-radius: 50%; background: var(--color-surface-subtle); box-shadow: inset 0 0 0 1px var(--color-line); display: grid; place-items: center; }
.dprin .disc svg { width: 48px; height: 48px; fill: none; stroke: var(--color-content-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dprin .disc .acc { fill: var(--color-accent-lime); }
.dprin h3 { margin: 0; font-size: var(--t-20); }
.dprin p { margin: 0; color: var(--color-content-secondary); }

/* impact: the quote, with its source */
.dquote { margin: var(--s4) 0 0; padding: 0 0 0 var(--s3); border-left: 4px solid var(--color-accent-lime); display: grid; gap: var(--s2); }
.dquote p { margin: 0; font: 600 var(--t-28)/1.3 var(--font-head); letter-spacing: -0.015em; text-wrap: balance; }
.dquote cite { font-style: normal; font-size: var(--t-14); line-height: 1.4; color: var(--color-content-secondary); }

@media (max-width: 900px) {
  .triad.two { grid-template-columns: 1fr; }
  .shots.ds { grid-template-columns: 1fr; }
  .shot-frame.narrow, .shot-frame.narrow.dark { width: 100%; }
  .dprin li { grid-template-columns: 72px minmax(0, 1fr); row-gap: var(--s1); }
  .dprin li p { grid-column: 1 / -1; }
}

/* the figure is as wide as its frame (same numbers as the frame rules above), so the caption centers under the image and not under the page column (13.10) */
.shot:has(> .shot-frame) { width: min(100%, 600px); }
.shot:has(> .shot-frame.tall) { width: min(100%, 440px); }
.shot:has(> .shot-frame.narrow) { width: min(100%, 300px); }
.shot:has(> .shot-frame.narrow.dark) { width: min(100%, 420px); }
@media (max-width: 900px) {
  .shot:has(> .shot-frame.narrow), .shot:has(> .shot-frame.narrow.dark) { width: 100%; }
}