/* Case-study extras — structures used by long-form case studies (first: 009, the
   Soft Pebble AI concierge concept). Tokens only. Loaded after case-study.css. */

/* Film chapters: eyebrow with timestamp, heading, intro, then a scene timeline */
.cs-chapter{margin-top:calc(var(--s)*10);padding-top:calc(var(--s)*6);border-top:1px solid var(--border-card)}
.cs-chapter:first-of-type{margin-top:calc(var(--s)*6)}
.cs-chapter h3{margin-top:calc(var(--s)*2)}

/* Scene timeline: timestamp column + description, with a rule linking the scenes */
.cs-scenes{list-style:none;margin:calc(var(--s)*4) 0 0;padding:0}
.cs-scenes li{display:grid;grid-template-columns:calc(var(--s)*14) minmax(0,1fr);gap:calc(var(--s)*4);padding:calc(var(--s)*3) 0;border-bottom:1px solid var(--border-card)}
.cs-scenes li:last-child{border-bottom:0}
.cs-scenes time{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-link);font-variant-numeric:tabular-nums;padding-top:calc(var(--s)*0.5)}
.cs-scenes__title{color:var(--text-primary)}

/* App screen index: numbered two-column list (one column on phones) */
.cs-screens{list-style:none;margin:calc(var(--s)*6) 0;padding:0;display:grid;gap:calc(var(--s)*3) calc(var(--s)*6)}
@media (min-width:48rem){.cs-screens{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-screens li{display:grid;grid-template-columns:calc(var(--s)*8) minmax(0,1fr);gap:calc(var(--s)*3);padding:calc(var(--s)*3) 0;border-top:1px solid var(--border-card)}
.cs-screens .num{font-size:var(--text-meta);letter-spacing:var(--text-meta--letter-spacing);color:var(--text-meta-color);padding-top:calc(var(--s)*1)}
.cs-screens b{display:block;color:var(--text-primary);font-weight:var(--weight-bold)}
.cs-screens div span{display:block;font-size:var(--text-sm);color:var(--text-secondary)}

/* Production steps: counted list with numbered markers */
.cs-steps{list-style:none;margin:calc(var(--s)*6) 0;padding:0;counter-reset:cs-step}
.cs-steps li{counter-increment:cs-step;position:relative;padding:0 0 calc(var(--s)*5) calc(var(--s)*12)}
.cs-steps li::before{content:counter(cs-step,decimal-leading-zero);position:absolute;left:0;top:0;font-size:var(--text-meta);font-weight:var(--weight-medium);letter-spacing:var(--text-meta--letter-spacing);color:var(--text-link);font-variant-numeric:tabular-nums}
.cs-steps b{display:block;color:var(--text-primary);font-weight:var(--weight-bold)}
.cs-steps span{display:block;color:var(--text-secondary)}

/* Potential outcomes: three tiles, stacked on phones */
.cs-outcomes{display:grid;gap:calc(var(--s)*4);margin:calc(var(--s)*6) 0}
@media (min-width:64rem){.cs-outcomes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cs-outcome{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:calc(var(--s)*5)}
.cs-outcome h3{font-size:var(--text-body);line-height:var(--text-body--line-height);margin:calc(var(--s)*2) 0}
.cs-outcome p{font-size:var(--text-sm);color:var(--text-secondary);margin:0}