/* Criterionyx - case study template. Reuses tokens (illustration.css) + chrome (page.css). */

/* ---------- hero meta ---------- */
.cs-hero .hero-inner { grid-template-columns: 1fr; max-width: 920px; }
.cs-hero .lede { max-width: 740px; }
.cs-meta { display: flex; flex-wrap: wrap; gap: 26px 44px; margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.cs-meta .m { display: flex; flex-direction: column; gap: 5px; }
.cs-meta .ml { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6f82a6; }
.cs-meta .mv { font-size: 14.5px; font-weight: 600; color: #eaf0fb; max-width: 240px; }

/* ---------- stat band (count-up) ---------- */
.statband { max-width: 1180px; margin: 0 auto; padding: clamp(36px, 5vw, 56px) clamp(20px, 5vw, 64px) 0; }
.statband-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.sb-cell { background: var(--surface); padding: 26px 24px; }
.sb-cell .v { font-family: "IBM Plex Mono", monospace; font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.sb-cell .v .u { color: var(--accent); }
.sb-cell.signal .v .u, .sb-cell.signal .v { color: var(--signal); }
.sb-cell .l { margin-top: 11px; font-size: 13px; line-height: 1.4; color: var(--muted); font-weight: 500; }

/* ---------- signature widget ---------- */
.cs-sig { max-width: 1180px; margin: 0 auto; padding: clamp(44px, 6vw, 76px) clamp(20px, 5vw, 64px) 0; }
.cs-sig-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.cs-sig-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 26px 0; }
.cs-sig-head h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.2vw, 24px); letter-spacing: -.02em; }
.cs-sig-head .sub { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--faint); }
.toggle { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.toggle button { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 0; background: transparent; color: var(--muted); padding: 7px 14px; border-radius: 6px; transition: all .15s ease; }
.toggle button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,24,34,.12); }
.cs-sig-body { padding: 20px 26px 28px; }

/* gauge + donut layout */
.riskviz { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; }
.gauge-wrap { text-align: center; }
.gauge-wrap svg { width: 100%; max-width: 360px; height: auto; }
.gauge-pct { font-family: "IBM Plex Mono", monospace; font-size: 46px; font-weight: 600; fill: var(--signal); }
.gauge-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.donut-wrap { display: flex; align-items: center; gap: 22px; }
.donut-wrap svg { width: 150px; height: 150px; flex: none; }
.donut-legend .dl { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); margin-bottom: 10px; font-weight: 500; }
.donut-legend .dl .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.donut-legend .dl b { color: var(--ink); font-weight: 700; }
.riskviz .note { grid-column: 1 / -1; margin-top: 8px; font-size: 12.5px; color: var(--faint); border-top: 1px solid var(--line); padding-top: 14px; }
.riskviz .note b { color: var(--muted); font-weight: 600; }

/* predictors (COVID widget) */
.predictors { display: flex; flex-direction: column; justify-content: center; }
.pred-h { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink); margin-bottom: 16px; }
.pred-list { display: flex; flex-direction: column; gap: 14px; }
.pred { display: grid; grid-template-columns: 1fr; gap: 6px; }
.pred .pl { font-size: 14px; font-weight: 600; color: var(--ink); }
.pred .pb { height: 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.pred .pb i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #6fa3ef)); transition: width 1.1s cubic-bezier(.4,0,.2,1); }
.pred-note { margin-top: 16px; font-size: 12px; color: var(--faint); line-height: 1.5; }
.pred-note b { color: var(--muted); font-weight: 600; }

/* forest plot (GLP-1 widget) */
.forest { position: relative; }
.forest-axis { display: flex; justify-content: space-between; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--faint); padding: 0 64px 0 130px; margin-bottom: 10px; }
.forest-rows { display: flex; flex-direction: column; gap: 4px; }
.frow { display: grid; grid-template-columns: 118px 1fr 44px; gap: 12px; align-items: center; padding: 9px 0; }
.frow .ft { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.frow .ftrack { position: relative; height: 22px; }
/* ROR=1.0 reference line lives at xp(1.0) = (ln1-ln.5)/(ln8-ln.5)=0.25 -> 25% within the 0.5..8 axis */
.frow .ftrack::before { content: ""; position: absolute; left: 25%; top: -4px; bottom: -4px; width: 1.5px; background: var(--line-strong); }
.frow .fci { position: absolute; top: 50%; height: 6px; transform: translateY(-50%) scaleX(0); transform-origin: left; background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 4px; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.frow .fpt { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--accent); border: 2.5px solid var(--surface); box-shadow: 0 1px 4px rgba(20,24,34,.25); transition: opacity .3s ease; }
.frow.sig .fci { background: var(--signal-soft); }
.frow.sig .fpt { background: var(--signal); }
.frow .fv { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; font-weight: 700; color: var(--muted); text-align: right; }
.frow.sig .fv { color: var(--signal); }
.forest-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.forest-key .fk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.forest-key .fk .line { width: 14px; height: 0; border-top: 2px solid var(--line-strong); }
.forest-key .fk .sig { width: 12px; height: 12px; border-radius: 50%; background: var(--signal); }
@media (max-width: 560px) {
  .forest-axis { padding-left: 96px; }
  .frow { grid-template-columns: 84px 1fr 38px; }
}

/* ---------- narrative ---------- */
.cs-body { max-width: 820px; margin: 0 auto; padding: clamp(48px, 7vw, 84px) clamp(20px, 5vw, 64px) 0; }
.cs-block { margin-bottom: clamp(36px, 5vw, 52px); }
.cs-block .lab { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.cs-block .lab::before { content: ""; width: 22px; height: 1.5px; background: var(--accent); }
.cs-block h2 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(23px, 3vw, 31px); letter-spacing: -.02em; line-height: 1.12; }
.cs-block p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.cs-block p b { color: var(--ink); font-weight: 600; }
.cs-block ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cs-block li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.cs-block li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.4 2.4L12 5' stroke='%232d6fd2' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cs-block.impact li::before { background: var(--signal-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.4 2.4L12 5' stroke='%23e53935' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* numbered solution steps */
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step .sn { width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 15px; }
.step h4 { margin: 0 0 5px; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* insight callout */
.insight-card { background: linear-gradient(150deg, #0a1d3d, #0e2a57); color: #eaf0fb; border-radius: 18px; padding: clamp(28px, 4vw, 44px); position: relative; overflow: hidden; }
.insight-card::before { content: "\201C"; position: absolute; top: -10px; left: 22px; font-family: Georgia, serif; font-size: 120px; color: rgba(255,255,255,.08); line-height: 1; }
.insight-card .lab { color: #8fb4f0; }
.insight-card .lab::before { background: #8fb4f0; }
.insight-card p { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2.4vw, 25px); line-height: 1.4; color: #fff; margin: 0; letter-spacing: -.01em; }
.insight-card p b { color: #8fb4f0; font-weight: 600; }

/* ---------- related / next ---------- */
.related { max-width: 1180px; margin: 0 auto; padding: clamp(48px, 7vw, 84px) clamp(20px, 5vw, 64px) 0; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rel-card { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 26px; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .18s ease, border-color .18s ease; }
.rel-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.rel-card .rk { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
.rel-card h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; line-height: 1.16; }
.rel-card .more { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--accent); }

/* ---------- index page ---------- */
.cs-index { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 64px) 0; display: flex; flex-direction: column; gap: 20px; }
.cs-tile { display: grid; grid-template-columns: 220px 1fr auto; gap: 30px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 30px; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.cs-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 18px 44px -22px rgba(10,29,61,.3); }
.cs-tile-viz { width: 220px; height: 130px; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #0a1d3d, #0e2a57); position: relative; flex: none; }
.cs-tile-viz svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-tile-body .tag { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; }
.cs-tile-body h3 { margin: 0 0 9px; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; line-height: 1.18; }
.cs-tile-body p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 560px; }
.cs-tile-body .metrics { display: flex; gap: 22px; flex-wrap: wrap; }
.cs-tile-body .metrics .mm { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--ink); font-weight: 600; }
.cs-tile-body .metrics .mm span { color: var(--faint); font-weight: 500; }
.cs-tile-go { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--accent); flex: none; transition: all .18s ease; }
.cs-tile:hover .cs-tile-go { background: var(--accent); color: #fff; border-color: var(--accent); }

/* reveal animation - base visible; hidden only once JS arms it */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal.armed { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.armed.in { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .statband-grid { grid-template-columns: 1fr 1fr; }
  .riskviz { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .cs-tile { grid-template-columns: 1fr; }
  .cs-tile-viz { width: 100%; }
}