/* ============================================================
   Case study: MIHWA — page-only decoration.

   Loads ON TOP of pages/casestudy.css, which carries the shared
   case-study shell (hero, breadcrumb, glance card, chart, feature
   cards, mid-CTA, close). Everything here is unique to MIHWA: the
   format-redesign centrepiece, the animated comparison bars, the
   broadcast flow diagram, the AI recap mock, the browser frame and
   the top-pages list.

   CYAN leads, green marks the "after" state, red the "before", and
   amber the controversy beat. Tier chips carry their own palette
   (Elite / Middle / Developing) taken from the real bracket artwork.

   Keyframes are global, so everything here is `mh`-prefixed.

   NOTE on <p>/<b>/<a>/<i>: the theme and DS style bare elements at
   specificity 0,1,1, which beats any single-class rule here (0,1,0).
   Every rule below that lands on one of those is scoped under
   `.xs-page` for that reason.
   ============================================================ */

/* ---------- before / after ---------- */
.mh-ba{border-radius:16px;padding:26px}
.mh-ba--before{background:#0b1120;border:1px solid rgba(255,107,107,.3)}
.mh-ba--after{background:linear-gradient(160deg,#0c2417,#0b1120);border:1px solid rgba(58,219,118,.4)}
.mh-ba__tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.64rem;font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;margin-bottom:.9rem}
.mh-ba--before .mh-ba__tag{color:var(--coral)}
.mh-ba--after .mh-ba__tag{color:var(--success)}
.xs-page .mh-ba__body{font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.78);margin:0}

/* ---------- the format redesign band ---------- */
/* Its own surface, not the DS --ink-radial (which is red-tinted for the
   pages that lead with red). Same cool blue-black as the results band. */
.mh-format{background:radial-gradient(circle at 50% 0%,#0a1526,#020409 72%);color:#fff}

/* Ireland cold open */
.mh-open{background:#0b1120;border:1px solid rgba(0,212,255,.35);border-radius:18px;padding:28px;
	box-shadow:0 30px 70px rgba(0,0,0,.5)}
.mh-open__row{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;justify-content:space-between}
.xs-page .mh-open__title{font-family:var(--font-display);font-weight:400;
	font-size:clamp(1.4rem,3vw,1.9rem);margin:0;color:#fff;line-height:1.1}
.xs-page .mh-open__body{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.78);margin:.8rem 0 0}
.mh-open__stats{flex:0 0 auto;display:flex;gap:1.4rem;text-align:center;align-items:center}
.mh-open__k{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.mh-open__v{font-family:var(--font-display);font-size:2.6rem;line-height:1.1}
.mh-open__v--bad{color:var(--coral)}
.mh-open__v--good{color:var(--success)}
.mh-open__arrow{color:var(--cyan);font-size:1.4rem}

/* the problem, in three numbers */
.mh-prob{background:#0b1120;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px;text-align:center}
.mh-prob__v{font-family:var(--font-display);color:var(--coral);font-size:2.3rem;line-height:1}
.mh-prob__k{font-size:.85rem;color:rgba(255,255,255,.6);margin-top:.4rem}

/* old way vs new way */
.mh-way{border-radius:16px;padding:24px}
.mh-way--old{background:#0b1120;border:1px solid rgba(255,107,107,.3)}
.mh-way--new{background:linear-gradient(160deg,#0a2233,#0b1120);border:1px solid rgba(0,212,255,.45)}
.mh-way__tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.64rem;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;margin-bottom:.8rem}
.mh-way--old .mh-way__tag{color:var(--coral)}
.mh-way--new .mh-way__tag{color:var(--cyan)}
.xs-page .mh-way__body{font-size:.96rem;line-height:1.6;color:rgba(255,255,255,.75);margin:0 0 .8rem}
.xs-page .mh-way--new .mh-way__body{color:rgba(255,255,255,.82)}
/* the seed-list sample reads as data, so it gets a mono block */
.mh-code{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:rgba(255,255,255,.55);
	background:#0a0f1c;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px 12px;line-height:1.7}
/* tier chip colours come from the printed bracket artwork */
.mh-tiers{display:flex;gap:8px;flex-wrap:wrap}
.mh-tier{font-size:.7rem;font-weight:700;color:#fff;border-radius:6px;padding:.3rem .6rem}
.mh-tier--elite{background:#c0392b}
.mh-tier--middle{background:#1e7a46}
.mh-tier--dev{background:#1f6f9c}

/* quarterfinal twist */
.mh-qf{background:#0b1120;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px}
.mh-qf__row{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}
.xs-page .mh-qf__body{font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.8);margin:0}
.xs-page .mh-qf__body b{color:#fff}
.mh-qf__pair{flex:0 0 auto;display:flex;align-items:center;gap:.7rem}
.mh-qf__seed{text-align:center}
.mh-qf__box{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;
	font-family:var(--font-display);color:#fff;font-size:1.5rem}
.mh-qf__box--b{background:#1e7a46}
.mh-qf__box--c{background:#1f6f9c}
.mh-qf__cap{font-size:.6rem;color:rgba(255,255,255,.5);margin-top:.3rem}
.mh-qf__vs{font-family:var(--font-display);color:rgba(255,255,255,.4);font-size:1.1rem}

/* the controversy beat — amber, the only warm card on the page */
.mh-contro{background:linear-gradient(160deg,#231007,#0b1120);border:1px solid rgba(255,178,122,.35);
	border-radius:16px;padding:24px}
.mh-contro__tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.64rem;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:.8rem}
.xs-page .mh-contro__body{font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.82);margin:0}

/* did it work — animated comparison bars */
.mh-result{background:#0b1120;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:28px}
.mh-result__k{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:rgba(255,255,255,.5);margin-bottom:1.4rem}
.mh-metrics{display:flex;flex-direction:column;gap:1.4rem}
.mh-metric__head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.4rem;font-size:.9rem;margin-bottom:.5rem}
.mh-metric__name{color:#fff}
.mh-metric__delta{color:rgba(255,255,255,.55)}
.xs-page .mh-metric__delta b{color:var(--success)}
.mh-metric__rows{display:flex;flex-direction:column;gap:6px}
.mh-row{display:flex;align-items:center;gap:.6rem}
.mh-row__year{width:38px;flex:none;font-size:.68rem;color:rgba(255,255,255,.5)}
.mh-row__track{flex:1;height:14px;background:rgba(255,255,255,.06);border-radius:7px;overflow:hidden}
/* width is set inline per-bar (it IS the datum); the fill animates in */
.mh-bar{height:100%;border-radius:7px;transform:scaleX(0);transform-origin:left;
	transition:transform 1.1s var(--ease)}
.mh-bar--bad{background:var(--coral)}
.mh-bar--good{background:var(--success)}
.mh-bar--pages{background:linear-gradient(90deg,#1276c4,#00d4ff)}
.is-filled .mh-bar,.mh-bar.is-filled{transform:scaleX(1)}
.mh-bar--delay{transition-delay:.15s}

/* fun score */
.mh-fun{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.08);
	display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between}
.mh-fun__k{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--cyan);margin-bottom:.5rem}
.xs-page .mh-fun__body{font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.7);margin:0}
.mh-fun__scores{flex:0 0 auto;display:flex;gap:1rem}
.mh-score{background:rgba(58,219,118,.1);border:1px solid rgba(58,219,118,.35);border-radius:12px;
	padding:14px 18px;text-align:center}
.mh-score__name{font-size:.7rem;color:rgba(255,255,255,.6)}
.mh-score__v{font-family:var(--font-display);color:var(--success);font-size:1.7rem;line-height:1.1}

.mh-caveat{text-align:center;color:rgba(255,255,255,.45);font-size:.82rem}

/* ---------- printable bracket ---------- */
.mh-bracket{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
	box-shadow:0 30px 70px rgba(0,0,0,.6)}
.mh-bracket img{width:100%;height:auto;display:block}
.mh-caption{text-align:center;font-size:.78rem;color:rgba(255,255,255,.45);margin-top:.7rem}
/* the inline "go deeper" link that closes several sections */
.xs-page .mh-link,
.xs-page .mh-link:link,
.xs-page .mh-link:visited{display:inline-flex;align-items:center;gap:.5rem;color:var(--cyan);
	font-size:.95rem;text-decoration:none;font-weight:700}
.xs-page .mh-link:hover{text-decoration:underline}
.mh-link i{font-size:.8rem}
.mh-ticks{display:flex;flex-direction:column;gap:8px;margin-bottom:1.4rem}
.mh-tick{display:flex;align-items:center;gap:.6rem;font-size:.95rem;color:rgba(255,255,255,.82)}
.mh-tick i{color:var(--cyan);font-size:.85rem;flex:none}

/* ---------- icon-above-title cards (jumbotron, broadcast grid) ---------- */
.mh-icard{background:#0b1120;border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:24px}
.mh-icard--accent{background:linear-gradient(160deg,#0a2233,#0b1120);border-color:rgba(0,212,255,.4)}
.mh-icard>i{color:var(--cyan);font-size:1.4rem}
.xs-page .mh-icard__title{font-family:var(--font-display);font-weight:400;font-size:1.2rem;
	margin:.7rem 0 .5rem;color:#fff}
.xs-page .mh-icard__body{font-size:.94rem;line-height:1.55;color:rgba(255,255,255,.72);margin:0}

/* ---------- AI recap mock ---------- */
.mh-ai{background:#0b1120;border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;
	box-shadow:0 30px 70px rgba(0,0,0,.6)}
.mh-ai__bar{padding:14px 18px;background:#111a2e;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.mh-ai__badge{width:22px;height:22px;border-radius:6px;background:var(--cyan);color:#04070f;display:flex;
	align-items:center;justify-content:center;font-size:.6rem;font-family:var(--font-display);flex:none}
.mh-ai__barlbl{font-size:.74rem;color:rgba(255,255,255,.6)}
/* This card is a WORKED EXAMPLE, not a real recap — the label says so
   in the UI, so nobody reads the headline as a reported result. */
.mh-ai__mock{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
	color:rgba(255,255,255,.5);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
	border-radius:999px;padding:.2rem .55rem;margin-left:auto}
.mh-ai__body{padding:20px}
.mh-ai__title{font-family:var(--font-display);color:#fff;font-size:1.3rem;line-height:1.15;margin-bottom:.3rem}
.mh-ai__meta{font-size:.7rem;color:var(--cyan);margin-bottom:.9rem}
.xs-page .mh-ai__text{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.7);margin:0 0 .8rem}
.mh-ai__tags{display:flex;gap:8px;flex-wrap:wrap}
.mh-ai__tag{font-size:.66rem;color:rgba(255,255,255,.7);background:#0f1830;
	border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.25rem .6rem}
.mh-note{display:flex;align-items:center;gap:.7rem;margin-top:1rem;background:#0b1120;
	border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px;
	font-size:.9rem;color:rgba(255,255,255,.78)}
.mh-note i{color:var(--cyan);font-size:1.1rem;flex:none}
.xs-page .mh-note b{color:#fff}

/* ---------- results / GA4 ---------- */
.mh-results{background:radial-gradient(circle at 50% 0%,#0a1526,#020409 72%);color:#fff}
.mh-stat{background:#0b1120;border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:22px;text-align:center}
.mh-stat--accent{background:linear-gradient(160deg,#0a2233,#0b1120);border-color:rgba(0,212,255,.45)}
.mh-stat__v{font-family:var(--font-display);color:var(--cyan);font-size:2.2rem;line-height:1}
.mh-stat__k{font-size:.82rem;color:rgba(255,255,255,.55);margin-top:.3rem}

.mh-pages{background:#0b1120;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:26px}
.mh-pages__k{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:rgba(255,255,255,.5);margin-bottom:1.2rem}
.mh-pages__list{display:flex;flex-direction:column;gap:12px}
.mh-page{display:flex;align-items:center;gap:.9rem}
.mh-page__path{width:96px;flex:none;font-family:ui-monospace,Menlo,monospace;font-size:.82rem;color:#fff}
.mh-page__track{flex:1;height:16px;background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden}
.mh-page__track .mh-bar{border-radius:8px}
.mh-page__views{width:78px;flex:none;text-align:right;font-size:.82rem;color:rgba(255,255,255,.7)}
.mh-pages__foot{margin-top:1.2rem;font-size:.82rem;color:rgba(255,255,255,.45);text-align:center}

@media (prefers-reduced-motion:reduce){
	.mh-bar{transform:scaleX(1);transition:none}
}