/* v2-research: styles for ext/v2-research.js. --b- tokens only.
   Everything on the V2 Research pages is the site's own components: the overview's category tiles (.ov-index /
   .ov-ix), its "Start with these" panel (OBS.ovShelf), entry cards in a .list with the .why line, .hub-map,
   .hub-note, hd-chips and btn / more-link. Only what those don't cover is here. */

/* The V2 Research menu: "Browse by format" is a small labelled group of the same menu items (title only, so the icon
   sits level with it), two to a row. */
.np-grp { margin-top: var(--sp-0-5); padding-top: var(--sp-1); border-top: 1px solid var(--b-rule); }
.np-gh { margin: 0 var(--sp-1) var(--sp-0-5); font-size: 12.5px; font-weight: 600; color: var(--b-ink-3); }
.np-grp .np-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* On desktop the seven items run in two columns, four then three, so the panel stays short; the format group sits
   under both, its four items on one row */
/* Every V2 menu panel on desktop is as wide as its longest description, so each sits on one line */
html[data-ia="v2"] body:not(.nav-open) .nav-panel { width: max-content; max-width: calc(100vw - 24px); }
html[data-ia="v2"] body:not(.nav-open) .nav-panel .np-d { white-space: nowrap; }
html[data-ia="v2"] body:not(.nav-open) #np-research.nav-panel { width: 1050px; }  /* room for every description on one line */
html[data-ia="v2"] body:not(.nav-open) #np-research > .np-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: var(--sp-0-5); }
html[data-ia="v2"] body:not(.nav-open) #np-research .np-grp { grid-column: 1 / -1; grid-row: 5; }
html[data-ia="v2"] body:not(.nav-open) #np-research .np-grp .np-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.np-grp .np-ic { grid-row: auto; }
@media (max-width: 1240px) {
  body.nav-open .np-grp { padding-top: var(--sp-1); border-top: 0; }
  body.nav-open .np-gh { display: block; margin-left: var(--sp-1-5); }
}

/* "+ Thematic area": the same tile, dashed like the site's other placeholders (.empty, .hub-note), not a link */

/* Homepage: four audience tabs instead of five, on one row once all four fit (below that they wrap, two and two) */
@media (min-width: 1200px) { .v2r-aud.pj .pe-tabs { flex-wrap: nowrap; } }
/* Audience pills (Shajee, 25 Oct): fully rounded, wider, the site's line icon in a subtle circle, title over the count */
.v2r-aud.pj .pe-tab { flex: 1 1 0; min-width: 280px; padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-1); gap: 2px var(--sp-1-5); }
.v2r-aud .pe-ic { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--b-ground-card, #f6f0ee); box-shadow: inset 0 0 0 1px var(--ro-line); }
.v2r-aud .pe-ic .d-ic { width: 32px; height: 32px; }
.v2r-aud .pe-tab[aria-selected="true"] .pe-ic { background: var(--surface, #fff); box-shadow: none; }
.v2r-aud .pe-tab[aria-selected="true"] .pe-ic .d-ic { color: var(--ink-2); }
/* Their icons move while the pill is hovered or focused, with the site's icon movements (styles.css dm-*) */
.v2r-aud .pe-ic { transition: transform .35s var(--ease, ease); }
.v2r-aud .d-ic .r-flask { transform-box: view-box; transform-origin: 24px 40px; }
@media (prefers-reduced-motion: no-preference) {
  .v2r-aud .pe-tab:is(:hover, :focus-visible) .pe-ic { transform: scale(1.06); }
  .v2r-aud .pe-tab:is(:hover, :focus-visible) .r-hop { animation: dm-hop 1.4s ease-in-out infinite; }
  .v2r-aud .pe-tab:is(:hover, :focus-visible) .r-bob { animation: dm-bob 1.4s ease-in-out infinite; }
  .v2r-aud .pe-tab:is(:hover, :focus-visible) .r-flask { animation: dm-tilt 2.2s ease-in-out infinite; }
  .v2r-aud .pe-tab:is(:hover, :focus-visible) .i-spark { animation-duration: .9s; }
  .v2r-aud .pe-tab:is(:hover, :focus-visible) .r-d1 { animation-delay: .12s; }
  .v2r-aud .pe-tab:is(:hover, :focus-visible) .r-d2 { animation-delay: .25s; }
}
.v2r-aud .pj-n a { color: inherit; text-decoration: none; position: relative; z-index: 2; }

/* /research: the By enabler | By format switch (.seg), then the site's enabler cards (.mcard), all the same size */
.v2r-views { margin-bottom: var(--sp-3); }
.v2r-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--sp-grid); margin: 0; }
/* Innovation Briefs and Latest research read as two sections: the gap the overviews leave between sections */
.hub-sec.v2r-apart { padding-top: clamp(var(--sp-8), 8vw, var(--sp-14)); }

/* Innovation Briefs' two actions under its description */
.v2r-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1-5); margin: var(--sp-2) 0 0; }
/* Entry cards (the homepage's latest) in a grid; the count sits on the heading's baseline; filter chips, then the grid */
.v2r-grid { list-style: none; margin: 0; padding: 0; }
.v2r-chips { margin: 0 0 var(--sp-3); }
/* One heading-to-description gap on the Research pages: 12px, as in every .ov-top head */
[aria-labelledby="v2r-ib-h"] .ov-say { gap: var(--sp-1-5); }
/* "Browse every format" CTA cards on the enabler pages: 4 across on desktop, 2 on tablet, 1 on a phone */
.v2r-tiles.v2r-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .v2r-tiles.v2r-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .v2r-tiles.v2r-4 { grid-template-columns: minmax(0, 1fr); } }
/* By country on the enabler pages: Country overview's region map and table (.v2c-region), the country with its flag */
.v2r-cty { display: inline-flex; align-items: center; gap: var(--sp-1); }
/* Innovation Briefs, Coming next: the entry-card frame for a planned issue, not a link, so no hover lift */
.ib-next { pointer-events: none; }

/* V2 "Folder" (A/B audLook): the chosen pill is the folder's tab, joined to one white container like a browser's
   active tab (curved feet either side), the others sit back as quiet tabs; the three cards sit inside on a soft tint */
.v2r-aud.is-folder .pe-tabs { width: auto; margin: 0; gap: 6px; align-items: flex-end; padding: 0;
  /* one strip behind all four: the file's top edge, the bookmarks sit on it (Shajee, 25 Oct) */
  border-radius: 28px 28px 0 0; background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.v2r-aud.is-folder { --fold-line-top: color-mix(in srgb, var(--b-accent) 60%, transparent); --fold-line: color-mix(in srgb, var(--b-accent) 20%, transparent); }  /* the hairline in the brand red, strongest over the tab */
.v2r-aud.is-folder .pe-tabs { position: relative; }
/* the hairline along the strip's foot, fading out toward both ends; the chosen tab sits over it */
.v2r-aud.is-folder .pe-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--fold-line) 18%, var(--fold-line) 82%, transparent); }
.v2r-aud.is-folder .pe-tab { border: 1px solid transparent; border-bottom: 0; }
.v2r-aud.is-folder .pe-tab:first-child { border-top-left-radius: 28px; }
.v2r-aud.is-folder .pe-tab:last-child { border-top-right-radius: 28px; }
.v2r-aud.is-folder .pe-tab { min-width: 0; }
.v2r-aud.is-folder .pe-tab { position: relative; align-self: stretch; min-height: 76px; border-radius: 22px 22px 0 0; margin: 0; padding: 12px var(--sp-3) 12px 12px; color: var(--ink-2);
  background: transparent; box-shadow: none; transition: background .2s ease, border-radius .2s ease; }
/* the others sit back like a browser's inactive tabs: no fill, a hairline between them, a soft rounded wash on hover */
.v2r-aud.is-folder .pe-tab:not([aria-selected="true"]):hover { background: color-mix(in srgb, var(--surface) 45%, transparent); }
.v2r-aud.is-folder .pe-tab:not([aria-selected="true"])::after { content: ""; position: absolute; right: -4px; top: 28%; height: 44%; width: 1px; background: var(--ro-line, rgba(0, 0, 0, .12)); transition: opacity .2s ease; }
.v2r-aud.is-folder .pe-tab:not([aria-selected="true"]):is(:last-child, :hover, :has(+ .pe-tab:hover), :has(+ [aria-selected="true"]))::after { opacity: 0; }
:root .pj.v2r-aud.is-folder .pe-tab[aria-selected="true"], :root .pj.v2r-aud.is-folder .pe-tab[aria-selected="true"]:hover {
  z-index: 1; border-color: transparent; margin-bottom: -1px; padding-bottom: 13px;  /* 1px over the container hides a sub-pixel seam */  /* a faint grey at its top, white where it meets the page, and a hairline over it that fades down its sides */
  background: none; color: var(--ink); box-shadow: none; }
/* its shape and hairline are one SVG path drawn behind its content (shapeTab in v2-research.js) */
.v2r-aud .fold-shape { position: absolute; top: -1px; z-index: -1; max-width: none; overflow: visible; pointer-events: none; }  /* drawn at its own size (the site caps svgs at 100%) */
.v2r-aud .fold-shape .fs-fill { fill: url(#fold-fill); }
.v2r-aud .fold-shape .fs-line { fill: none; stroke: url(#fold-line); stroke-width: 1; }
.v2r-aud .fold-shape .fs-top { stop-color: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.v2r-aud .fold-shape .fs-base { stop-color: var(--surface); }
.v2r-aud .fold-shape .fl-top { stop-color: var(--fold-line-top); }
.v2r-aud .fold-shape .fl-base { stop-color: var(--fold-line); }
:root .pj.v2r-aud.is-folder .pe-tab[aria-selected="true"] .pe-tc { color: var(--ink-3); }
.v2r-aud.is-folder .pe-tab[aria-selected="true"] .pe-ic { background: var(--b-ground-card, #f6f0ee); box-shadow: inset 0 0 0 1px var(--ro-line); }
.v2r-aud.is-folder .pe-panel { margin-top: 0; padding: clamp(var(--sp-3), 3.2vw, var(--sp-5)); border-radius: 0 0 32px 32px; background: var(--surface);
  box-shadow: 0 30px 60px -44px rgba(var(--b-shadow, 40, 10, 10), .55); }
.v2r-aud.is-folder .pe-tabs { align-items: stretch; }
.v2r-aud.is-folder .pe-ic { width: 46px; height: 46px; background: var(--surface); }
.v2r-aud.is-folder .pe-ic .d-ic { width: 30px; height: 30px; }
.v2r-aud.is-folder .pe-tn { font-size: 15px; }
.v2r-aud.is-folder .pe-tc { margin-top: 2px; }
/* inside the folder: everything starts at the left edge; the cards sit on a tint so the three read apart from the page */
.v2r-aud.is-folder .pj-intro { max-width: none; margin-left: 0; text-align: left; }
.v2r-aud.is-folder .pj-text { text-wrap: pretty; }  /* one line where the folder has room */
.v2r-aud.is-folder .pj-all { text-align: left; }
.v2r-aud.is-folder .pj-cards { gap: clamp(var(--sp-2), 1.8vw, var(--sp-3)); }
.v2r-aud.is-folder .pj-intro { margin-bottom: clamp(var(--sp-2-5), 2.4vw, var(--sp-4)); }
.v2r-aud.is-folder .pj-card.nc::before { background: color-mix(in srgb, var(--b-deep-900, #efe8e3) 60%, var(--surface)); }
/* no lift: the doubled class outweighs the site-wide .nc:not(:hover)... card-lift filter */
.v2r-aud.is-folder .pj-card.nc.nc:not(:hover):not(:focus-within) { filter: none; }
/* hover like every other card (Shajee, 29 Oct): white, lifted, the site's soft shadow */
.v2r-aud.is-folder .pj-card.nc:is(:hover, :focus-within)::before { background: var(--surface, #fff); }
.v2r-aud.is-folder .pj-all { margin-top: clamp(var(--sp-2-5), 2.4vw, var(--sp-4)); }
@media (max-width: 760px) {
  .v2r-aud.is-folder .pe-tabs { padding: 0; overflow-y: hidden; }
  .v2r-aud.is-folder .pe-tab { flex: 0 0 auto; min-width: 248px; }
  .v2r-aud.is-folder .pe-panel { padding: var(--sp-2); border-radius: 0 0 24px 24px; }
  .v2r-aud.is-folder .pe-tabs { border-radius: 24px 24px 0 0; }
}