/* ============================================================
   Case-study narrative components — shared by the long-form
   scrollytelling pages (Provider Journey, Daily). Site chrome
   (nav, header, stats-strip, case-section, callout, footer)
   lives in base.css / case-study.css; this file holds the
   extra components those two pages need on top of that.
   ============================================================ */

/* KEYSTONE — the named rule */
.keystone{
  border:0.5px solid var(--color-border); border-radius:var(--radius-lg);
  background:var(--color-bg-zen); padding:var(--space-5) var(--space-5); margin:var(--space-5) 0 0; max-width:62ch;
}
.keystone .k-label{ font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--space-2); }
.keystone h3{ font-family:var(--font-editorial); font-size:var(--text-xl); font-weight:400; line-height:1.25; color:var(--color-text-primary); margin-bottom:var(--space-2); }
.keystone p{ font-size:var(--text-base); color:var(--color-text-secondary); line-height:1.8; font-weight:300; margin:0; max-width:none; }
.keystone p b{ color:var(--color-text-primary); font-weight:500; }

/* TENETS */
.tenets{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--color-border); border:0.5px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; margin:var(--space-5) 0 0; }
.tenet{ background:var(--color-bg-base); padding:var(--space-4) var(--space-4); }
.tenet h4{ font-size:var(--text-sm); font-weight:600; color:var(--color-text-primary); margin-bottom:var(--space-1); }
.tenet p{ font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.7; font-weight:300; margin:0; max-width:none; }
@media (max-width:680px){ .tenets{ grid-template-columns:1fr; } }

/* STAGE PILL — status tag inside process-step headings (named to avoid the filter .pill in work.css) */
.stage-pill{ font-size:10px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; padding:2px var(--space-2); border-radius:var(--radius-full); background:rgba(var(--color-accent-rgb),0.1); color:var(--color-accent); border:0.5px solid rgba(var(--color-accent-rgb),0.2); }
.stage-pill.later{ background:rgba(168,120,58,0.1); color:#A8783A; border-color:rgba(168,120,58,0.22); }

/* TWO-WRITE diagram */
.twowrite{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin:var(--space-5) 0 0; }
.tw-card{ border:0.5px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); background:var(--color-bg-zen); }
.tw-card .tw-k{ font-size:var(--text-xs); font-weight:600; color:var(--color-text-primary); margin-bottom:var(--space-2); display:flex; align-items:center; gap:var(--space-2); }
.tw-card .tw-k i{ color:var(--color-accent); }
.tw-card p{ font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.75; font-weight:300; margin:0; max-width:none; }
.tw-card code{ font-family:var(--font-mono); font-size:var(--text-xs); background:rgba(var(--color-accent-rgb),0.08); color:var(--color-accent); border-radius:var(--radius-sm); padding:1px var(--space-2); }
@media (max-width:680px){ .twowrite{ grid-template-columns:1fr; } }

/* METRICS */
.metrics{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin:var(--space-5) 0 0; }
.metric{ border:0.5px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-5); background:var(--color-bg-zen); }
.metric .big{ font-family:var(--font-editorial); font-size:var(--text-3xl); font-weight:400; line-height:1; color:var(--color-accent); margin-bottom:var(--space-2); }
.metric .big small{ font-size:var(--text-base); color:var(--color-text-secondary); font-style:italic; }
.metric .ml b{ display:block; color:var(--color-text-primary); font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-1); }
.metric .ml{ font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.7; font-weight:300; max-width:none; margin:0; }
@media (max-width:680px){ .metrics{ grid-template-columns:1fr; } }

/* IMAGERY FRAME — browser-chrome mock around a live prototype screenshot */
.browser{
  border:0.5px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; box-shadow:0 30px 70px -42px rgba(var(--color-text-primary-rgb),0.42);
}
.browser-bar{
  height:40px; display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-4);
  background:rgba(var(--color-text-primary-rgb),0.045); border-bottom:0.5px solid var(--color-border);
}
.browser-bar .dots{ display:flex; gap:var(--space-2); }
.browser-bar .dots span{ width:var(--space-3); height:var(--space-3); border-radius:50%; background:rgba(var(--color-text-primary-rgb),0.16); }
.browser-bar .url{
  margin:0 auto; font-size:var(--text-xs); color:var(--color-text-secondary); background:var(--color-bg-base);
  border:0.5px solid var(--color-border); border-radius:var(--radius-full); padding:var(--space-1) var(--space-4);
  max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.browser iframe, .browser img{ width:100%; border:0; display:block; background:rgba(var(--color-text-primary-rgb),0.03); }
.browser a{ display:block; }

.figure-caption{ font-size:var(--text-xs); color:var(--color-text-secondary); opacity:0.7; margin-top:var(--space-3); font-style:italic; text-align:center; max-width:560px; margin-left:auto; margin-right:auto; }
.figure-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
@media (max-width:760px){ .figure-grid{ grid-template-columns:1fr; } }

/* SWATCH base (per-page variants add their own chip/hex modifiers) */
.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:var(--space-3); margin:var(--space-5) 0 0; }
.swatch{ border:0.5px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; background:#fff; }
.swatch .sm{ padding:var(--space-2) var(--space-3); }
.swatch .nm{ font-size:var(--text-xs); font-weight:600; color:var(--color-text-primary); }
.swatch .role{ font-size:var(--text-xs); color:var(--color-text-secondary); opacity:0.8; margin-top:2px; line-height:1.35; }

/* AVATAR BEFORE/AFTER */
.avatar-compare{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin:var(--space-5) 0 0; }
.ac-cell{ border:0.5px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg-zen); padding:var(--space-5) var(--space-5) var(--space-4); text-align:center; }
.ac-tag{ font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-text-secondary); opacity:0.7; margin-bottom:var(--space-3); }
.ac-ring{
  width:var(--space-10); height:var(--space-10); border-radius:50%; overflow:hidden; margin:0 auto var(--space-4);
  border:3px solid #A8783A; box-shadow:0 0 0 5px rgba(168,120,58,0.14); background:#e7ecef;
}
.ac-ring svg{ display:block; width:100%; height:100%; }
.ac-ring img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.ac-k{ font-size:var(--text-sm); font-weight:600; color:var(--color-text-primary); margin-bottom:var(--space-1); }
.ac-d{ font-size:var(--text-xs); color:var(--color-text-secondary); line-height:1.6; font-weight:300; margin:0; max-width:none; }
@media (max-width:560px){ .avatar-compare{ grid-template-columns:1fr; } }