/*
  Controls page styles.
  Shared route, rail, type, surfaces, and responsive foundations live in
  ../../styles/case-study.css. This file keeps only Controls-specific layouts.
*/
.section h3 { font-size:clamp(1.55rem,2.2vw,2.2rem); letter-spacing:-.03em; }
.narrow p:not(.index),.section-lead { color:var(--mute); font-size:1.05rem; }
#problem blockquote { margin:46px 0 0; padding:19px 0 19px 27px; border-left:4px solid #dc836c; color:var(--blue); font:clamp(1.7rem,3vw,2.35rem)/1.22 var(--serif); }

#control-loop .flow { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:19px; margin:62px 0 61px; padding:22px 0 0; list-style:none; }
#control-loop .flow::before { position:absolute; top:0; right:0; left:0; height:2px; background:#c3dddd; content:""; }
#control-loop .flow li { position:relative; }
#control-loop .flow em,#controls .cards em { display:inline-grid; width:36px; height:36px; place-items:center; background:var(--lime); color:var(--deep); font:700 .72rem var(--sans); font-style:normal; }
#control-loop .flow h3 { margin-top:28px; }
#control-loop .flow p { margin:11px 0 0; color:#deefec; font-size:.87rem; line-height:1.56; }

.examples { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
#examples { background:#fff; }
.example { padding:37px; background:var(--white); }
.example.provenance { background:#edf7f0; }
.example.lifecycle { background:#edf5fc; }
.example.provenance .provenance-step { background:#f2f8f3; }
.example.provenance .provenance-step:nth-child(odd) { background:#edf5f0; }
.example.provenance .provenance-step.is-result { background:#d8ece0; }
.example.lifecycle .lifecycle-step-card { background:#f2f7fc; }
.example.lifecycle .lifecycle-step-card:nth-child(odd) { background:#edf4fb; }
.example.lifecycle .lifecycle-step-card.decision-stage { background:#dcecf8; border-left-color:#1e5d73; }
.example > p:not(.card-index):not(.callout) { color:var(--mute); }
.example h3 { min-height:2.4em; margin-bottom:22px; }
.before-after { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:10px; margin-top:28px; }
.before-after > div:not(.arrow) { display:flex; flex-direction:column; justify-content:center; min-height:142px; padding:18px; background:#eaf0ec; }
.before-after > div:last-child { background:#d5e9e3; }
.before-after span { margin-bottom:9px; color:var(--blue); font-size:.67rem; font-weight:bold; letter-spacing:.12em; text-transform:uppercase; }
.before-after strong { color:var(--ink); font-family:var(--serif); font-size:1.35rem; font-weight:normal; line-height:1.1; }
.before-after small { margin-top:8px; color:var(--mute); line-height:1.35; }
.arrow { display:grid; place-items:center; color:var(--blue); font-size:1.7rem; }
.callout { margin:22px 0 0; padding:17px 18px; border-left:3px solid var(--gold); background:#fff7de; color:#46555d; font-size:.92rem; }
.mini-flow { display:flex; flex-wrap:wrap; gap:7px; margin:27px 0 0; padding:0; list-style:none; }
.mini-flow li { display:flex; align-items:center; padding:8px 10px; border:1px solid #b8c8c2; color:var(--blue); font-size:.76rem; font-weight:bold; }
.mini-flow li:not(:last-child)::after { margin-left:11px; color:var(--mute); content:"→"; }
.provenance-flow { display:grid; gap:24px; margin:26px 0 0; padding:0; list-style:none; }
.provenance-step { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:13px; align-items:start; padding:16px; border-left:3px solid #b8c8c2; background:#eaf0ec; }
.provenance-step:nth-child(odd) { background:#f2f5f1; }
.provenance-step.is-result { border-left-color:var(--blue); background:#d5e9e3; }
.provenance-step:not(:last-child)::after { position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); z-index:2; color:var(--blue); content:"↓"; font-size:1rem; font-weight:bold; }
.provenance-step .step-number { display:grid; width:28px; height:28px; place-items:center; background:var(--blue); color:var(--white); font-size:.66rem; font-weight:bold; }
.provenance-step h4 { margin:0; color:var(--ink); font-family:var(--serif); font-size:1.28rem; font-weight:normal; line-height:1.15; }
.provenance-step p { grid-column:2; margin:5px 0 0; color:var(--mute); font-size:.86rem; line-height:1.42; }
.artifact-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:27px; }
.artifact-row span { padding:8px 10px; border:1px solid #b8c8c2; color:var(--blue); font-size:.72rem; font-weight:bold; }
.lifecycle-flow { display:grid; gap:24px; margin:26px 0 0; padding:0; list-style:none; }
.lifecycle-step-card { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:13px; align-items:start; padding:16px; border-left:3px solid #b8c8c2; background:#eaf0ec; }
.lifecycle-step-card:nth-child(odd) { background:#f2f5f1; }
.lifecycle-step-card.decision-stage { border-left-color:var(--blue); background:#d5e9e3; }
.lifecycle-step-card:not(:last-child)::after { position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); z-index:2; color:var(--blue); content:"↓"; font-size:1rem; font-weight:bold; }
.lifecycle-step-card .stage-number { display:grid; width:28px; height:28px; place-items:center; background:var(--blue); color:var(--white); font-size:.66rem; font-weight:bold; }
.lifecycle-step-card h4 { margin:0; color:var(--ink); font-family:var(--serif); font-size:1.28rem; font-weight:normal; line-height:1.15; }
.lifecycle-step-card p { grid-column:2; margin:5px 0 0; color:var(--mute); font-size:.86rem; line-height:1.42; }
.decision-outcomes { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:6px; margin:13px 0 0; padding:0; list-style:none; }
.decision-outcomes li { padding:9px 7px; border:1px solid #b8c8c2; background:#f2f5f1; color:var(--blue); font-size:.7rem; font-weight:bold; text-align:center; }
.decision-outcomes li:first-child { border-color:var(--blue); background:#d5e9e3; }
.provenance-link { grid-column:2; display:inline-block; margin-top:12px; color:var(--blue); font-size:.78rem; font-weight:bold; text-underline-offset:3px; }@media(min-width:981px) {
  .provenance-step:nth-child(1),.lifecycle-step-card:nth-child(1) { min-height:100px; }
  .provenance-step:nth-child(2),.lifecycle-step-card:nth-child(2) { min-height:120px; }
  .provenance-step:nth-child(3),.lifecycle-step-card:nth-child(3) { min-height:124px; }
  .provenance-step:nth-child(4),.lifecycle-step-card:nth-child(4) { min-height:152px; }
}
.narrowish { max-width:760px; margin-right:auto; margin-left:auto; }

#controls .cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
/* Give the Practical Use explanation a clear pause before the cards begin. */
.control-cards { margin-top:32px; }
#controls .cards article { padding:29px; background:#f2f5f1; }
#controls .cards h3 { margin-top:22px; font-size:1.52rem; }
#controls .cards p { margin:13px 0 0; color:var(--mute); }
#roles .roles { margin-top:32px; }
#roles .roles article { padding:43px 48px; background:#fffdf8; }
#roles .roles article:nth-child(2) { background:#edf5f2; }
#roles .roles h3 { margin-bottom:25px; }
#roles .roles ul,#evidence .evidence ul { margin:0; padding:0; list-style:none; }
#roles .roles li,#evidence .evidence li { padding:12px 0; border-top:1px solid #d7d5cd; color:var(--mute); }
#evidence .evidence { margin-top:34px; }
#evidence .evidence article { padding:43px 46px; }
.proved { background:#e5f0ea; }
.limits { background:#f4e8d5; }
#evidence .evidence li:first-child { border-top:1px solid #cfd7d0; }

@media(max-width:980px) {
  #control-loop .flow { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:33px; }
  #control-loop .flow::before { display:none; }
  .examples { grid-template-columns:1fr; }
}
@media(max-width:720px) {
  #control-loop .flow { grid-template-columns:1fr; margin-top:38px; padding:0; }
  #control-loop .flow li { padding-left:53px; }
  #control-loop .flow em { position:absolute; top:0; left:0; }
  #control-loop .flow h3 { margin-top:0; }
  #roles .roles,#evidence .evidence { grid-template-columns:1fr; }
  .roles article,.evidence article,.example { padding:29px 25px; }
  .before-after { grid-template-columns:1fr; }
  .arrow { height:20px; transform:rotate(90deg); }
  .mini-flow { display:block; }
  .mini-flow li { margin-bottom:7px; }
  .mini-flow li:not(:last-child)::after { content:""; }
}