/* Insight Metrics Content 1.0.4: the few rules the live pages need on top of the approved kit (kit.css, unchanged).
   Same tokens as the kit. Nothing here changes a kit component. */

/* the theme's page-title band (Nexros) is not used on our pages: each page has its own header */
body.imc-page #pxl-page-title-default, body.imc-page #pxl-page-title-elementor, body.imc-page .pxl-page-title-default { display: none !important; }

/* noindex preview links */
.imc-preview-bar { position: sticky; top: 0; z-index: 100000; padding: 9px 20px; text-align: center; font: 600 13px/1.3 "Rethink Sans", -apple-system, "Segoe UI", sans-serif; background: #121212; color: #fff; }

/* real page links under listings */
.imj .imc-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin: 18px 0 0; font: 500 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); }
.imj .imc-pager a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 100px; background: var(--paper); border: 1px solid var(--rule); font: 600 13.5px/1 var(--sans); color: var(--ink); text-decoration: none; }
.imj .imc-pager a:hover { border-color: var(--ink); }

/* "Clear all" is a link here (the server builds the listing) */
.imh-active a.imh-clear, .imh-empty a.imh-clear { padding: 6px 4px; font: 600 13.5px var(--sans); color: var(--brand); text-decoration: underline; }

/* "Load more" is a real link to the next page: same look as the approved button (the theme styles buttons in capitals) */
.imj a.imh-more { text-transform: uppercase; position: relative; }

/* the current topic in the topic chips */
.imh-nav a[aria-current="page"] { border-color: var(--ink); color: var(--ink); }

/* AI pictures are captioned "Illustration" (kit image rule) */
.imj .imc-ill { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 6px 10px; border-radius: 100px; background: rgba(18,18,18,.72); color: #fff; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* author pages */
.imj .imc-bio p { margin: 0 0 12px; }
.imj .imc-bio p:last-child { margin-bottom: 0; }
.imj .imc-face { display: grid; place-items: center; min-height: 360px; }
.imj .imc-face img { position: static; width: min(260px, 70%); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 20px 50px rgba(18,18,18,.16); }

/* topic pages: the filter bar has search + sort only */
.imh-tools.imc-tools-2 { grid-template-columns: minmax(0, 1fr) 200px; }

/* 1.0.1 - side column stays on screen in Firefox too. The theme's Firefox-only rule (@-moz-document: .pxl-wapper { overflow-y: auto })
   turns the page wrapper into its own scroll box, so position: sticky stops working there. These are the values Chrome already uses. */
body.imc-page #pxl-wapper.pxl-wapper, #pxl-wapper.pxl-wapper:has(#pxl-main > .imj) { overflow-x: clip; overflow-y: visible; }
@media (max-width: 1200px) { body.imc-page #pxl-main, #pxl-main:has(> .imj) { overflow-x: clip; } }

/* 1.0.1 - small headings inside the text (### in the posting Markdown) use the kit's heading font and size, not the theme's 45px h3 */
.imj .imj-h3 { margin: 36px 0 10px; font: 400 clamp(20px, 1.7vw, 23px)/1.25 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); text-wrap: balance; scroll-margin-top: 150px; }
.imj .imj-h3 + p { margin-top: 0; }

/* 1.0.2 - the side column always fits the screen. On screens too short for it (under about 1,020px), the contents list
   scrolls inside its own box, so the test box below it is always fully visible. Taller screens look exactly as before. */
@media (min-width: 1181px) {
  .imj .imj-sticky { max-height: calc(100vh - 160px); grid-template-rows: minmax(0, 1fr) auto; }
  .imj .imj-sticky > .imj-toc { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
}


/* 1.0.4 - the ↗ character showed as a blue emoji square on Windows: the tests list arrow is drawn instead (same size and grey) */
.imh-tests a::after { content: ""; width: 11px; height: 11px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 1.0.4 - no half-empty rows while a section has few posts: on desktop, a row with fewer cards than columns shares the full width.
   Full rows, tablets and phones are unchanged. */
@media (min-width: 1101px) {
  .imh-grid3:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imh-quick:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imh-quick:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 1.0.5 - pages line up with the menu bar (owner, 10 Nov 2026). The menu bar is 1280px wide with 34px side margins;
   the content now uses the same width and margins. The theme's #pxl-main is 100vw wide (it pushed content 8px off
   centre next to a scrollbar); on our pages it now fills the page instead. */
body.imc-page #pxl-main#pxl-main, #pxl-main#pxl-main:has(> .imj) { width: auto; max-width: 100%; }
@media (min-width: 783px) {
  .imj .wrap, .imj .wrap.imk-end { max-width: 1348px; padding-left: 34px; padding-right: 34px; }
}
@media (min-width: 1181px) {
  .imj .imj-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; justify-content: stretch; }
  .imj .imj-layout.short { grid-template-columns: minmax(0, 900px); justify-content: center; }
  .imj .imj-sticky { grid-template-rows: minmax(0, 1fr) auto auto; }
}

/* 1.0.5 - share buttons with platform logos */
.imj .imk-sh-list, .imj .imk-sh-icons { list-style: none; margin: 0; padding: 0; }
.imj .imk-sh-list li, .imj .imk-sh-icons li { margin: 0; padding: 0; }
.imj .imk-sh-list li::before, .imj .imk-sh-icons li::before { display: none; }
.imj .imk-sh { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink) !important; font: 600 14px/1.2 var(--sans); letter-spacing: 0; text-transform: none; text-decoration: none !important; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s; }
.imj .imk-sh svg { flex: none; width: 20px; height: 20px; color: var(--b); transition: color .2s, transform .3s cubic-bezier(.2,1.4,.4,1); }
.imj .imk-sh:hover, .imj .imk-sh:focus-visible { background: var(--b); border-color: var(--b); color: #fff !important; transform: translateY(-2px); box-shadow: 0 14px 24px -16px var(--b); }
.imj .imk-sh:hover svg, .imj .imk-sh:focus-visible svg { color: #fff; transform: scale(1.1); }
.imj .imk-sh:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.imj .imk-sh.ok { background: var(--green); border-color: var(--green); color: #fff !important; }
.imj .imk-sh.ok svg { color: #fff; }
.imj .imk-sharebox { margin: 36px 0 30px; padding: 22px 24px 24px; border-radius: 24px; background: var(--lav2); border: 1px solid var(--rule); }
.imj .imk-sharebox .hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.imj .imk-sharebox small { display: block; font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.imj .imk-sharebox .t { margin: 6px 0 4px; font: 400 clamp(23px, 2vw, 27px)/1.15 var(--serif); color: var(--ink); }
.imj .imk-sharebox .s { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.imj .imk-sharebox .imk-sh-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.imj .imk-sh-more { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font: 600 13.5px/1 var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; }
.imj .imk-sh-more[hidden] { display: none; }
.imj .imk-sh-more:hover { background: var(--brand); border-color: var(--brand); }
.imj .imk-sh-rail { padding: 16px 18px 18px; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); }
.imj .imk-sh-rail p { margin: 0 0 12px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.imj .imk-sh-icons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.imj .imk-sh-icons .imk-sh { justify-content: center; aspect-ratio: 1 / 1; min-height: 0; padding: 0; border-radius: 50%; }
.imj .imk-sh-icons .imk-sh span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.imj .imk-sh-pop { position: relative; margin-left: auto; }
.imj .imj-by .imk-sh-pop .imk-share { margin-left: 0; }
.imj .imk-share[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.imj .imk-sh-panel { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 30; width: 340px; max-width: calc(100vw - 40px); padding: 14px; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 28px 60px -24px rgba(18,18,18,.45); }
.imj .imk-sh-panel[hidden] { display: none; }
.imj .imk-sh-panel > p { margin: 2px 4px 10px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.imj .imk-sh-list.mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.imj .imk-sh-list.mini .imk-sh { min-height: 40px; padding: 8px 10px; font-size: 13.5px; border-radius: 12px; }
.imj .imk-sh-panel .imk-sh-more { width: 100%; justify-content: center; margin-top: 8px; }
@media (max-width: 980px) { .imj .imk-sh-rail { display: none; } }
@media (max-width: 760px) {
  .imj .imk-sharebox { padding: 18px 16px 18px; }
  .imj .imk-sharebox .imk-sh-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 6px; }
  .imj .imk-sharebox .imk-sh { flex-direction: column; gap: 7px; min-height: 0; padding: 0; border: 0; background: none; font-size: 11.5px; font-weight: 500; text-align: center; box-shadow: none; }
  .imj .imk-sharebox .imk-sh svg { box-sizing: content-box; width: 22px; height: 22px; padding: 12px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule); }
  .imj .imk-sharebox .imk-sh:hover, .imj .imk-sharebox .imk-sh:focus-visible { background: none; color: var(--ink) !important; transform: none; box-shadow: none; }
  .imj .imk-sharebox .imk-sh:hover svg { background: var(--b); border-color: var(--b); color: #fff; }
  .imj .imj-by { position: relative; }
  .imj .imj-by .imk-sh-pop { position: static; }
  .imj .imk-sh-panel { left: 0; right: 0; width: auto; max-width: none; }
}

/* 1.0.5 - buttons copy the home page "Take the test" button (theme Nexros .btn.btn-icon-box) exactly:
   #121212 pill, white 500 16px text (forced, so the theme's link-hover colour can't hide it), white 36px circle,
   and on hover the arrow flies out to the top right while a second arrow slides in from the bottom left (0.3s ease-out). */
.imj .imj-btn:has(.imj-arr) { gap: 0; min-height: 48px; padding: 0 6px 0 18px; border-radius: 80px; background: #121212; color: #fff !important; font: 500 16px/1.2 var(--sans); letter-spacing: -.16px; text-decoration: none !important; transform: none; transition: .25s cubic-bezier(.645, .045, .355, 1); }
.imj .imj-btn:has(.imj-arr):hover, .imj .imj-btn:has(.imj-arr):focus-visible { background: #121212; color: #fff !important; transform: none; }
.imj .imj-btn .imj-arr { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 12px; border-radius: 50%; background: #fff; overflow: hidden; line-height: 0; }
.imj .imj-btn .imj-arr svg { display: block; flex: none; width: 12px; height: 12px; padding: 0; margin: 0; border-radius: 0; background: none; transform: translateX(0) translateY(0) translateZ(0); transition: transform .3s ease-out; }
.imj .imj-btn .imj-arr svg path { fill: #121212; }
.imj .imj-btn .imj-arr svg:last-child { position: absolute; transform: translateX(-200%) translateY(200%) translateZ(0); }
.imj .imj-btn:hover .imj-arr svg:first-child, .imj .imj-btn:focus-visible .imj-arr svg:first-child { transform: translateX(200%) translateY(-200%) translateZ(0); }
.imj .imj-btn:hover .imj-arr svg:last-child, .imj .imj-btn:focus-visible .imj-arr svg:last-child { transform: translateX(0) translateY(0) translateZ(0); }
.imj .imj-btn.light:has(.imj-arr), .imj .imj-btn.light:has(.imj-arr):hover { background: #fff; color: #121212 !important; }
.imj .imj-btn.light .imj-arr { background: #121212; }
.imj .imj-btn.light .imj-arr svg path { fill: #fff; }
@media (max-width: 767px) { .imj .imj-btn:has(.imj-arr) { min-height: 42px; font-size: 14px; } }
.imj .imk-share, .imj .imk-share:hover, .imj .imk-share:focus-visible { background: var(--paper); color: var(--ink) !important; }
.imj .imk-share:hover { border-color: var(--ink); }
.imj .imk-share[aria-expanded="true"], .imj .imk-share[aria-expanded="true"]:hover { background: #0B1020; border-color: #0B1020; color: #FBF7F0 !important; }
.imj .imk-sh-more, .imj .imk-sh-more:hover, .imj .imk-sh-more:focus-visible { color: #FBF7F0 !important; }
.imj .imk-sh-more { background: #0B1020; border-color: #0B1020; transition: background .2s ease; }
.imj .imk-sh-more:hover, .imj .imk-sh-more:focus-visible { background: #1E2640; border-color: #1E2640; }

/* 1.0.6 - the theme's grid.css gives every element with the class "row" margin: 0 -15px. Our list cards (.imc.row, e.g. the
   "Latest" list on /articles/) share that class name, so they started 15px left of the column and their photos stuck
   out 15px past the menu bar on the right. */
.imj .imc.row { margin-left: 0; margin-right: 0; }

/* 1.0.8 - our content box always fills the page width (the theme's not-found layout shrank it to its content and
   pushed it left; 1.0.8 also stops our pages being flagged as not found) */
body.imc-page #pxl-main > .im-personality-content, #pxl-main > .im-personality-content.imj { width: 100%; max-width: none; flex: 1 1 100%; align-self: stretch; }

/* 1.0.12 - short articles and news briefs have the side column too (imc_extra_rail), so on desktop they line up with the
   menu bar like long articles and news stories (owner, 11 Nov 2026). Phones and tablets keep the one-column page. */
@media (max-width: 980px) { .imj .imj-rail.is-extra { display: none; } }