/* GamingBroject s145 lab · WS4 · articles (single posts). Lab only: /testqq/, manifest part 40-articles.json, loaded
 * only on body.single-post, together with article.js and tx-articles.php.
 *
 * BASE. The judged merge of design/articles-final (merge-test.css, CLS 0.0020, #comments at 84 px): lens A (editorial
 * craft) sits in s145.art-a; the kept lens B blocks (identity) and the judge's overrides sit in s145.art-b, which wins for
 * !important exactly as the judge tested it. Selectors keep their tested specificity: lens B's ":root.gb-human" became
 * ":root:not(.s145-never)" (same weight, always true), so nothing here depends on humanize (?gbhuman=0 keeps every fix);
 * the inert ":not(.s145-ab-off)" parts stay.
 *
 * CASCADE. index.php prints "@layer s145, gbl, gbu;" first. For !important: s145.sys (global.css) > s145.art-b > s145.art-a
 * > s145 (home.css) > gbl (Day mode, humanize) > gbu (UI v2) > unlayered. Normal declarations here lose to every live rule,
 * so anything that must beat live carries !important. Transitions never carry it; the only motion is a press scale inside
 * (prefers-reduced-motion: no-preference), and hover sits behind (hover: hover) and (pointer: fine).
 *
 * TOKENS. Private --s5-* on body.single-post alias the shared --s145-* tokens (WS1, global.css) with fallbacks, so the file
 * also works alone (?gb145only=articles). Day values follow html[data-gb-theme="light"]; Halloween (pumpkin) and the flat
 * black ground (?s145black=1, ART-16: panels go frameless) come through the shared tokens.
 *
 * NOT HERE (plan section 4): fills under white text (Follow, Write a comment, buttons: WS1), offer pill colours (WS3),
 * the related grid and every card or archive rule (WS5), the focus ring (WS1), the global press scale (WS1).
 * Dropped from the merge: lens B's source-box restyle, the red card focus ring, the verdict fill animation and its
 * transitions, the ?s145art and ?s145ab switches, oneAuthor and its row.
 *
 * Copy rule: this file never holds the document-head tag text. */

@layer s145.art-b, s145.art-a;

/* ============================================================================================================
 * s145.art-a: lens A (editorial craft) and every other WS4 rule (F3, Day fixes for the offer blocks, verdict scores).
 * ============================================================================================================ */
@layer s145.art-a {

/* ---------- 0. Tokens (private, single posts only) ---------- */
body.single-post {
  --s5-ink: var(--s145-ink, #f7f5fb);
  --s5-text: #e9e5ef;
  --s5-tx2: var(--s145-ink-2, #c9c3d1);
  --s5-tx3: #a69fb2;            /* 7.7:1 on the panel */
  --s5-b-tx3: #a39cad;          /* lens B's muted grey, kept for parity */
  --s5-warm: var(--s145-warm, #c9b8a6);
  --s5-line: rgba(255, 255, 255, .1);
  --s5-line-2: rgba(255, 255, 255, .16);
  --s5-b-line: rgba(255, 255, 255, .08);
  --s5-hair: var(--s145-hairline, rgba(255, 255, 255, .07));
  --s5-panel: var(--s145-surface-1, #0f0916);
  --s5-s2: var(--s145-surface-2, #171021);
  --s5-box: var(--s145-surface-2, #171021);
  --s5-track: rgba(255, 255, 255, .1);
  --s5-accent: var(--s145-red, #ff2948);
  --s5-gold: #ffd35a;
  --s5-link: #21eaff;
  --s5-r: var(--s145-r-l, 14px);
  --s5-r-s: var(--s145-r-s, 6px);
  --s5-col: 756px;              /* the reading column at desktop width: 68ch of 19px Inter */
  --s5-head: "GB Barlow Condensed", Inter, system-ui, sans-serif;
}
html[data-gb-theme="light"] body.single-post {
  --s5-ink: var(--s145-ink, #15121b);
  --s5-text: #26222d;
  --s5-tx2: var(--s145-ink-2, #4f4958);
  --s5-tx3: #6a6474;
  --s5-b-tx3: #625c6c;
  --s5-warm: var(--s145-warm, #7a6450);
  --s5-line: rgba(21, 18, 27, .1);
  --s5-line-2: rgba(21, 18, 27, .18);
  --s5-b-line: rgba(21, 18, 27, .1);
  --s5-hair: var(--s145-hairline, var(--gl-line, #e4e0ea));
  --s5-panel: var(--s145-surface-1, var(--gl-card, #ffffff));
  --s5-s2: var(--s145-surface-2, #f4f2f7);
  --s5-box: var(--s145-surface-1, var(--gl-card, #ffffff));   /* Day: the take and verdict boxes are white on the grey ground */
  --s5-track: rgba(21, 18, 27, .1);
  --s5-accent: var(--s145-red, #d1123a);
  --s5-gold: #9a6400;           /* 5.0:1 on white */
  --s5-link: #007385;
}
/* Halloween (25/10 to 5/11): the accent follows the pumpkin even when global.css is not loaded. */
html.gb-hw:not([data-gb-theme="light"]) body.single-post { --s5-accent: var(--s145-red, #ff7a1a); }

/* ---------- 1. Article header: one column, a real standfirst, no repeated section line (ART-07) ---------- */
/* Desktop: the dek and the byline/share bar end where the hero and the text end (one right edge, not four). */
@media (min-width: 1181px) {
  html body.single-post .gb-article-header > :is(.gb-article-deck, .gb-article-meta-bar) { max-width: var(--s5-col) !important; }
  /* A long byline (a review score, an Updated date) wraps inside its own column, so the share icons stay on its row and
     the hero does not drop by a row. */
  html body.single-post .gb-article-header .gb-article-meta-bar { flex-wrap: nowrap !important; }
  html body.single-post .gb-article-header .gb-article-publish-meta { flex: 1 1 auto !important; min-width: 0 !important; }
  /* An Updated stamp does not fit on the first line: it gets its own line, so line 1 never ends with a lone dot. */
  html body.single-post .gb-article-publish-meta > span[aria-hidden="true"]:has(+ span > time) { display: none !important; }
  html body.single-post .gb-article-publish-meta > span[aria-hidden="true"] + span:has(> time) { flex-basis: 100% !important; }
}
/* The dek was 20px against 19px body text (17 against 17 on phones): it read as a grey first paragraph. */
html body.single-post .gb-article-header > .gb-article-deck {
  font-size: 22px !important; line-height: 1.45 !important; font-weight: 450 !important; letter-spacing: -.003em !important;
  color: var(--s5-tx2) !important; margin: 0 0 22px !important; text-wrap: pretty;
}
/* The red section line above the title repeats the breadcrumb right above it. A free-offer chip stays. */
html body.single-post .gb-breadcrumbs ~ .gb-article-header > .gb-kicker:not(:has(.gb-offer-pill)) { display: none !important; }
html body.single-post .gb-breadcrumbs ~ .gb-article-header > .gb-kicker:has(.gb-offer-pill) > :not(.gb-offer-pill) { display: none !important; }
html body.single-post .gb-breadcrumbs { margin-bottom: 20px !important; }
@media (max-width: 760px) {
  html body.single-post .gb-article-header > .gb-article-deck { font-size: 18.5px !important; line-height: 1.48 !important; margin-bottom: 18px !important; }
  /* The theme's column direction plus gb-ui's "align-items: center" centred the byline block: 20px off the text edge. */
  html body.single-post .gb-article-header .gb-article-meta-bar { align-items: stretch !important; }
}

/* ---------- 2. Reading column ---------- */
html body.single-post .gb-article-content > p { text-wrap: pretty; }
html body.single-post .gb-article-content :is(h2, h3) { text-wrap: balance; }
html:not([data-gb-theme="light"]) body.single-post ::selection { background: rgba(255, 41, 72, .38) !important; color: #fff !important; }
html body.single-post .gb-article-content > figure,
html body.single-post .gb-article-content > .wp-block-image { margin: 30px 0 !important; }
/* Captions: a quiet, readable credit line (was 12px in the body colour). */
html body.single-post :is(.gb-article-content, .gb-article-hero) figcaption {
  font-size: 14px !important; line-height: 1.45 !important; font-style: normal !important; text-align: left !important;
  color: var(--s5-tx3) !important; margin: 10px 2px 0 !important; padding: 0 !important; background: none !important; text-wrap: pretty;
}
/* One corner size for media: the hero frame was 28px around a 12px picture, videos 18px. */
html body.single-post .gb-article-hero { border-radius: var(--s5-r) !important; overflow: hidden !important; }
html body.single-post .gb-article-hero img { border-radius: 0 !important; }
html body.single-post .gb-article-content :is(figure, .wp-block-image) img { border-radius: var(--s5-r) !important; }
html body.single-post :is(.gb-article-video, .gb-article-content .gb-ytf, .gb-article-content figure.wp-block-embed .gb-ytf) { border-radius: var(--s5-r) !important; }
/* Video frames: the bar says "Video" or "Official video" (article.js drops the number), not "Video 2". */
html body.single-post .gb-article-video { box-shadow: none !important; border-color: var(--s5-line-2) !important; }
html body.single-post .gb-article-video-head { background: var(--s5-panel) !important; padding: 11px 16px !important; border-bottom-color: var(--s5-line) !important; }
html body.single-post .gb-article-video-head > span {
  font: 600 14px/1.35 var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--s5-ink) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
html body.single-post .gb-article-video-head > small { display: none !important; }

/* ---------- 3. "Our take": the editor's voice, not an alert (no-JS base; s145.art-b draws the dialogue box) ---------- */
html body.single-post :is(.gbu-take, section.gb-editor-take) {
  margin: 44px 0 !important; padding: 22px 26px !important;
  border: 1px solid var(--s5-line-2) !important; border-radius: var(--s5-r) !important;
  background: var(--s5-panel) !important; box-shadow: none !important;
}
html body.single-post :is(section.gb-editor-take > h2#gb-editor-take-title, .gbu-take > .gbu-take-h.gbu-take-kicker, .gbu-take > .gbu-kicker) {
  display: flex !important; align-items: center !important; gap: 10px !important;
  font: 700 15px/1.3 var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--s5-accent) !important; margin: 0 0 12px !important;
}
html body.single-post .gbu-take > .gbu-take-h:not(.gbu-take-kicker) { font-size: 24px !important; line-height: 1.2 !important; margin: 0 0 10px !important; color: var(--s5-ink) !important; }
html body.single-post :is(.gbu-take, section.gb-editor-take) > :is(p, ul, ol) { font-size: 18px !important; line-height: 1.6 !important; }
/* The signature line ("Panos, GamingBroject editor") without the script: a byline under a hairline, not grey italics. */
html body.single-post section.gb-editor-take > p:is(.s5-take-sign, [style*="italic"]:last-child) {
  font: 600 14px/1.4 var(--font-sans) !important; font-style: normal !important; opacity: 1 !important; color: var(--s5-tx2) !important;
  margin: 16px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid var(--s5-line) !important;
}
@media (max-width: 760px) {
  html body.single-post :is(.gbu-take, section.gb-editor-take) { margin: 36px 0 !important; padding: 18px !important; }
  html body.single-post :is(.gbu-take, section.gb-editor-take) > :is(p, ul, ol) { font-size: 16.5px !important; }
}

/* ---------- 4. Facts: "Release date, platforms and price" reads as a fact sheet (ART-10) ---------- */
/* article.js splits each "Label: value" line into two cells (li.s5-fact > .s5-k + .s5-v); the words do not change. */
html body.single-post :is(ul.gb-release-info, ul.gbq-ctx-facts):has(> li.s5-fact) {
  list-style: none !important; padding: 0 !important; margin: 0 0 28px !important; border-top: 1px solid var(--s5-line) !important;
  border-radius: 0 !important; background: none !important;
}
html body.single-post .gbq-game-card ul.gbq-ctx-facts:has(> li.s5-fact) { margin: 12px 0 16px !important; }
html body.single-post li.s5-fact {
  display: grid !important; grid-template-columns: minmax(8.5em, 30%) minmax(0, 1fr) !important; gap: 2px 18px !important;
  margin: 0 !important; padding: 10px 0 !important; border-bottom: 1px solid var(--s5-line) !important; list-style: none !important;
}
html body.single-post li.s5-fact::marker { content: none; }
html body.single-post li.s5-fact > .s5-k { font: 600 14px/1.5 var(--font-sans) !important; color: var(--s5-tx3) !important; padding-top: 2px; }
html body.single-post li.s5-fact > .s5-v { color: var(--s5-ink) !important; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: break-word; }
html body.single-post ul.gb-release-info > li.s5-fact { font-size: 17px !important; line-height: 1.5 !important; }
@media (max-width: 760px) {
  html body.single-post li.s5-fact { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding: 9px 0 !important; }
  html body.single-post li.s5-fact > .s5-k { padding-top: 0; font-size: 13px !important; }
  html body.single-post ul.gb-release-info > li.s5-fact { font-size: 16px !important; }
}

/* ---------- 5. Tables: soft rows instead of a bright grid; numbers line up (ART-11 base) ---------- */
html body.single-post .gb-article-content figure.wp-block-table { margin: 30px 0 !important; overflow-x: auto !important; }
html body.single-post .gb-article-content figure.wp-block-table table {
  border-collapse: collapse !important; border: 0 !important; width: 100% !important;
  font-size: 16px !important; line-height: 1.45 !important; font-variant-numeric: tabular-nums lining-nums;
}
html body.single-post .gb-article-content figure.wp-block-table :is(thead, tbody, tfoot, tr) { border: 0 !important; background: none !important; }
html body.single-post .gb-article-content figure.wp-block-table :is(th, td) {
  border: 0 !important; border-bottom: 1px solid var(--s5-line) !important; background: none !important;
  padding: 11px 16px 11px 0 !important; text-align: left !important; vertical-align: top !important; color: var(--s5-ink) !important;
}
html body.single-post .gb-article-content figure.wp-block-table :is(th, td):last-child { padding-right: 0 !important; }
html body.single-post .gb-article-content figure.wp-block-table thead th {
  font-size: 13px !important; font-weight: 700 !important; color: var(--s5-tx3) !important; padding-top: 0 !important;
  border-bottom: 1px solid var(--s5-line-2) !important; vertical-align: bottom !important;
}
html body.single-post .gb-article-content figure.wp-block-table tbody :is(th, td):first-child { color: var(--s5-tx2) !important; font-weight: 600 !important; width: 30%; }
@media (max-width: 760px) {
  html body.single-post .gb-article-content figure.wp-block-table table { font-size: 14.5px !important; }
  html body.single-post .gb-article-content figure.wp-block-table :is(th, td) { padding: 10px 12px 10px 0 !important; overflow-wrap: break-word; }
  html body.single-post .gb-article-content figure.wp-block-table thead th { font-size: 12.5px !important; }
}

/* ---------- 6. Sources (ART-01) ---------- */
/* Without the script: the one-paragraph-per-outlet lines become a compact list under a hairline. */
html body.single-post .gb-article-content > p.gb-source { font-size: 15px !important; line-height: 1.5 !important; color: var(--s5-tx2) !important; margin: 0 0 4px !important; }
html body.single-post .gb-article-content > :not(p.gb-source) + p.gb-source { margin-top: 36px !important; padding-top: 14px !important; border-top: 1px solid var(--s5-line) !important; }
/* With the script: one "Sources" block in the article's closing section. */
html body.single-post .s5-sources { padding: 16px 0 0 !important; border-top: 1px solid var(--s5-line-2) !important; }
html body.single-post .s5-sources > h2 {
  font: 700 15px/1.3 var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--s5-tx2) !important; margin: 0 0 8px !important;
}
html body.single-post .s5-sources > ul { list-style: none !important; display: flex !important; flex-wrap: wrap !important; margin: 0 !important; padding: 0 !important; }
html body.single-post .s5-sources > ul > li { margin: 0 !important; font-size: 16px !important; line-height: 1.5 !important; color: var(--s5-tx3) !important; }
html body.single-post .s5-sources > ul > li + li::before { content: "\00B7"; margin: 0 10px; color: var(--s5-tx3); }
html body.single-post .s5-sources a {
  display: inline-block; padding-block: 4px; color: var(--s5-link) !important; text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, var(--s5-link) 45%, transparent) !important; text-underline-offset: 3px !important;
}
html body.single-post .s5-sources .s5-sources-note { font-size: 15px !important; line-height: 1.55 !important; color: var(--s5-tx3) !important; margin: 8px 0 0 !important; max-width: none !important; }
html body.single-post .s5-sources .s5-sources-note :is(em, i) { font-style: normal !important; }
html body.single-post .s5-sources .gb-preferred-source { margin: 10px 0 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--s5-tx3) !important; }
html body.single-post .s5-sources .gb-preferred-source a {
  font-size: 14px !important; font-weight: 500 !important; color: var(--s5-tx2) !important;
  text-decoration: underline !important; text-decoration-color: var(--s5-line-2) !important; text-underline-offset: 3px !important;
}

/* ---------- 7. The closing section: one of each, in reading order (ART-01) ---------- */
/* Order set by the script: sources, tags, author, more on this game; then the F2 slot (aside.gbs145-free-now, WS6, never
 * styled or moved here), the comments and the related stories. */
html body.single-post .s5-moved { display: none !important; }
html body.single-post .s5-tail { display: flex !important; flex-direction: column !important; gap: 22px !important; margin: 44px 0 32px !important; font-size: 16px; }
html body.single-post .s5-tail > * { margin: 0 !important; }
html body.single-post .s5-tail > .gb-tags { margin: 0 !important; }
/* Author: one box with the bio, the story count and Follow (was two boxes saying "Written by"). */
html body.single-post .s5-tail > .gb-author-box {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 0 18px !important; align-items: start !important;
  padding: 20px 22px !important; border: 1px solid var(--s5-hair) !important; border-radius: var(--s5-r) !important; background: var(--s5-panel) !important;
}
html body.single-post .s5-tail > .gb-author-box > :first-child { width: 64px !important; height: 64px !important; font-size: 22px !important; }
html body.single-post .s5-tail > .gb-author-box h2 { margin: 2px 0 6px !important; }
html body.single-post .s5-author-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
html body.single-post .s5-author-row .gbc-muted { font-size: 13px !important; color: var(--s5-tx3) !important; }
/* "More on this game" keeps its panel; links already there are not listed twice. */
html body.single-post .s5-tail > :is(.gb-game-related, .gb-editorial-related-v1) { padding: 20px 22px !important; border: 1px solid var(--s5-hair) !important; border-radius: var(--s5-r) !important; background: var(--s5-panel) !important; }
html body.single-post .s5-tail > .gb-editorial-related-v1 > h2 { font-size: 20px !important; margin: 0 0 10px !important; }
/* The editorial list alone (no "More on this game" list to join): out of the text it lost the article link style, so its
   lines take the other list's size and spacing and its links read as links again (cyan, soft underline), in both themes. */
html body.single-post .s5-tail > .gb-editorial-related-v1 li { font-size: 16px !important; line-height: 1.45 !important; margin: 0 0 8px !important; }
html body.single-post .s5-tail > .gb-editorial-related-v1 li:last-child { margin-bottom: 0 !important; }
html body.single-post .s5-tail > .gb-editorial-related-v1 a {
  color: var(--s5-link) !important; text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, var(--s5-link) 45%, transparent) !important; text-underline-offset: 3px !important;
}
/* Boxes in and after the article share one corner size. */
html body.single-post :is(.gbq-game-card, #comments.gb-comments) { border-radius: var(--s5-r) !important; }
/* Labels above titles that repeat what the title says ("Community", "Keep playing"). */
html body.single-post :is(#comments .gb-comments-heading > .gb-kicker, .gb-related > .gb-kicker) { display: none !important; }
@media (max-width: 760px) {
  html body.single-post .s5-tail { gap: 18px !important; margin-top: 36px !important; }
  html body.single-post .s5-tail > .gb-author-box { padding: 18px !important; gap: 0 14px !important; }
  html body.single-post .s5-tail > .gb-author-box > :first-child { width: 52px !important; height: 52px !important; font-size: 18px !important; grid-row: 1 / span 2; align-self: center; }
  /* Phone: photo and name side by side, the bio and Follow use the full width. */
  html body.single-post .s5-tail > .gb-author-box > div { display: contents !important; }
  html body.single-post .s5-tail > .gb-author-box > div > small { grid-column: 2; align-self: end; }
  html body.single-post .s5-tail > .gb-author-box > div > h2 { grid-column: 2; align-self: start; margin-bottom: 0 !important; }
  html body.single-post .s5-tail > .gb-author-box > div > :is(p, .s5-author-row) { grid-column: 1 / -1; }
  html body.single-post .s5-tail > .gb-author-box > div > p { margin-top: 12px !important; }
}

/* ---------- 8. Free-game posts: the status first, then the story once (ART-02, both themes) ---------- */
/* The lead that repeats the dek word for word (tx-articles.php marks it; article.js is the fallback). */
html body.single-post .s5-dup-lead { display: none !important; }
/* Day mode: the offer box kept its dark inline background (#140811) under dark ink (about 1.1:1, unreadable), and the
   status box faded into a dark gradient. Both get the panel colour; dark keeps its look. */
html[data-gb-theme="light"] body.single-post .gb-offer-widget { background: var(--s5-panel) !important; background-image: none !important; }
html body.single-post .gb-free-claim-window { padding: 18px 22px !important; border-width: 1px !important; border-color: var(--s5-line-2) !important; border-radius: var(--s5-r) !important; background: var(--s5-panel) !important; }
/* Flat black (?s145black=1, ART-16): the claim window goes frameless with the other panels (the hairline token is
   transparent there); the violet default keeps its judged frame. */
html.s145-black:not(.gb-hw):not([data-gb-theme="light"]) body.single-post .gb-free-claim-window { border-color: var(--s5-hair) !important; }
html body.single-post .gb-free-claim-window .wp-block-group__inner-container > p:first-child { font-size: 12px !important; letter-spacing: .06em !important; margin: 0 0 6px !important; color: var(--s5-accent) !important; }
html body.single-post .gb-free-claim-window h2 { font-size: 22px !important; line-height: 1.2 !important; margin: 0 0 10px !important; }
html body.single-post .gb-free-claim-window p { font-size: 16px !important; line-height: 1.55 !important; margin: 0 0 8px !important; }
html body.single-post .gb-free-claim-window p:last-child { margin: 0 !important; }
/* Day ink inside the box (platform lines 76 and 78, kept with the panel fix). */
html[data-gb-theme="light"] body.single-post .gb-free-claim-window :is(h2, h3, h4, p, li, small, strong) { color: var(--s5-ink) !important; }
html[data-gb-theme="light"] body.single-post .gb-free-claim-window a { color: var(--s5-link) !important; }
/* Offer state words on the article banner in Day mode, from the shared offer tokens (dark keeps the live accents). */
html[data-gb-theme="light"] body.single-post .gb-offer-widget.is-active :is(.gb-offer-head, .gb-offer-rel) { color: var(--s145-ok, #0b7a46) !important; }
html[data-gb-theme="light"] body.single-post .gb-offer-widget:is(.is-upcoming, .is-unknown) :is(.gb-offer-head, .gb-offer-rel) { color: var(--s145-wait, #8a5a00) !important; }
html[data-gb-theme="light"] body.single-post .gb-offer-widget.is-ended :is(.gb-offer-head, .gb-offer-rel) { color: var(--s145-end, #5f5852) !important; }
html[data-gb-theme="light"] body.single-post .gb-offer-widget :is(.gb-offer-when, .gb-offer-type) { color: var(--s5-tx2) !important; }
/* The status dot says the same state as the words (it was the Day red next to green words). */
html[data-gb-theme="light"] body.single-post .gb-offer-widget.is-active .gb-offer-status-dot { background: var(--s145-ok-fill, #0b7a46) !important; box-shadow: none !important; }
html[data-gb-theme="light"] body.single-post .gb-offer-widget:is(.is-upcoming, .is-unknown) .gb-offer-status-dot { background: var(--s145-wait-fill, #ffb536) !important; box-shadow: none !important; }
html[data-gb-theme="light"] body.single-post .gb-offer-widget.is-ended .gb-offer-status-dot { background: var(--s145-end, #5f5852) !important; box-shadow: none !important; }
/* The WordPress button inside articles kept a dark default fill under dark Day text (1.5:1). */
html[data-gb-theme="light"] body.single-post .gb-article-content .wp-block-button__link {
  background-color: var(--s145-red-fill, #d1123a) !important; background-image: none !important; color: #ffffff !important;
}

/* ---------- 9. Guides: the contents list is for the guide's own steps (ART-13) ---------- */
html body.single-post #gbArticleToc > div > span { display: none !important; }

/* ---------- 10. F3: the release facts near the top, said once ---------- */
/* tx-articles.php copies Release date, Out now on, Price and Developer from the article's own game card into the Key facts
 * box (or adds the box before the hero) and marks the lines it copied in the card; the card hides exactly those lines.
 * Its links stay. The hub link closes the Key facts box. */
html body.single-post section.gbq-game-card li.s5-gc-copied { display: none !important; }
html body.single-post aside.gb-key-facts > .s5-facts-hub {
  margin: 14px 0 0 !important; padding: 12px 0 0 !important; border-top: 1px solid var(--s5-line) !important;
  font-size: 15px !important; line-height: 1.5 !important; color: var(--s5-tx2) !important;
}
html body.single-post aside.gb-key-facts > .s5-facts-hub a {
  color: var(--s5-link) !important; font-weight: 600 !important; text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, var(--s5-link) 45%, transparent) !important; text-underline-offset: 3px !important;
}

/* ---------- 11. Review verdict scores in Day mode (platform line 95): amber at 4.2:1 became 7:1 ---------- */
html[data-gb-theme="light"] body.single-post .gbu-verdict-bars b { color: #7a4f00 !important; }

} /* @layer s145.art-a */


/* ============================================================================================================
 * s145.art-b: the kept lens B blocks (identity) and the judge's overrides. Wins over art-a for !important.
 * ============================================================================================================ */
@layer s145.art-b {

/* ---------- [AB-01] The people speak: quotes and "Our take" as a dialogue box (ART-06) ---------- */
/* A tone-step box (no side stripe, no tint), the speaker's face and name on top, an 8-bit "next" caret bottom right.
 * .gbu-take (gb-ui-v2's take on guide and hardware pieces) gets the same box. */
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content :is(blockquote.wp-block-quote, section.gb-editor-take, section.gbu-take) {
  position: relative !important;
  margin: 48px 0 !important;
  padding: 22px 28px 30px !important;
  border: 0 !important;
  border-radius: var(--s5-r) !important;
  background: var(--s5-box) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--s5-text) !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content :is(blockquote.wp-block-quote, section.gb-editor-take, section.gbu-take)::after {
  content: "" !important;
  position: absolute !important;
  right: 22px !important;
  bottom: 16px !important;
  width: 12px !important;
  height: 6px !important;
  background: var(--s5-accent) !important;
  clip-path: polygon(0 0, 100% 0, 100% 33.34%, 83.34% 33.34%, 83.34% 66.67%, 66.67% 66.67%, 66.67% 100%, 33.34% 100%, 33.34% 66.67%, 16.67% 66.67%, 16.67% 33.34%, 0 33.34%);
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content blockquote.wp-block-quote {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content blockquote.wp-block-quote > p {
  margin: 0 !important;
  font-size: 21px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  font-style: normal !important;
  color: var(--s5-ink) !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content blockquote.wp-block-quote > cite {
  order: -1 !important;
  display: block !important;
  font-style: normal !important;
  font-size: 15px !important;
  color: var(--s5-warm) !important;
}
:root:not(.s145-never):not(.s145-ab-off) body section.gb-editor-take .s5-take-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px 20px !important;
  margin: 0 0 14px !important;
}
:root:not(.s145-never):not(.s145-ab-off) body section.gb-editor-take h2#gb-editor-take-title {
  margin: 0 !important;
  font-family: var(--s5-head) !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  letter-spacing: .005em !important;
  text-transform: none !important;
  color: var(--s5-ink) !important;
}
/* .gbu-take: "Our take" as the box title, the topic line under it ("Which one to buy"). */
:root:not(.s145-never):not(.s145-ab-off) body section.gbu-take > :is(.gbu-take-h.gbu-take-kicker, .gbu-kicker) {
  display: block !important;
  margin: 0 0 12px !important;
  font-family: var(--s5-head) !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  letter-spacing: .005em !important;
  text-transform: none !important;
  color: var(--s5-ink) !important;
}
:root:not(.s145-never):not(.s145-ab-off) body section.gbu-take > :is(.gbu-take-h.gbu-take-kicker, .gbu-kicker)::before { content: none !important; display: none !important; }
:root:not(.s145-never):not(.s145-ab-off) body section.gbu-take > .gbu-take-h:not(.gbu-take-kicker) {
  margin: 0 0 12px !important;
  font: 700 21px/1.25 var(--font-sans) !important;
  letter-spacing: -.005em !important;
  color: var(--s5-ink) !important;
}
:root:not(.s145-never):not(.s145-ab-off) body :is(section.gb-editor-take, section.gbu-take) > :is(p, ul, ol) {
  font-size: 19px !important;
  line-height: 1.62 !important;
  color: var(--s5-text) !important;
}
:root:not(.s145-never):not(.s145-ab-off) body section.gb-editor-take > p.s5-sig-moved { display: none !important; }
/* The speaker plate (article.js builds it from the cite or the take's signature line, same words regrouped). */
:root:not(.s145-never):not(.s145-ab-off) body .s5-plate {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-style: normal !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .s5-plate > .s5-face { width: 40px !important; height: 40px !important; font-size: 15px !important; }
:root:not(.s145-never):not(.s145-ab-off) body .s5-plate .s5-who { display: grid !important; gap: 3px !important; }
:root:not(.s145-never):not(.s145-ab-off) body .s5-plate .s5-who > b {
  font-family: var(--s5-head) !important;
  font-weight: 700 !important;
  font-size: 21px !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  color: var(--s5-ink) !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .s5-plate .s5-who > small {
  font: 500 13px/1.3 Inter, system-ui, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--s5-warm) !important;
}
/* Faces: one shape for the PK monogram, GB and photos. PK's colours are the shared .hz-mono look (WS3, humanize); without
 * humanize the face keeps a quiet tone step so it never shows bare letters. */
:root:not(.s145-never):not(.s145-ab-off) body .s5-face {
  flex: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
:root:not(.s145-never):not(.s145-ab-off) body span.s5-face { display: inline-grid !important; place-items: center !important; }
html:not(.gb-human) body.single-post span.s5-face { background: #2b2420; color: #f3e9df; font-family: Inter, system-ui, sans-serif; font-weight: 700; line-height: 1; }
html:not(.gb-human)[data-gb-theme="light"] body.single-post span.s5-face { background: #efe4d8; color: #4a3a2c; }
@media (max-width: 760px) {
  :root:not(.s145-never):not(.s145-ab-off) body .gb-article-content :is(blockquote.wp-block-quote, section.gb-editor-take, section.gbu-take) {
    margin: 36px 0 !important;
    padding: 18px 18px 28px !important;
  }
  :root:not(.s145-never):not(.s145-ab-off) body .gb-article-content blockquote.wp-block-quote > p { font-size: 19px !important; }
  :root:not(.s145-never):not(.s145-ab-off) body section.gb-editor-take h2#gb-editor-take-title,
  :root:not(.s145-never):not(.s145-ab-off) body section.gbu-take > :is(.gbu-take-h.gbu-take-kicker, .gbu-kicker) { font-size: 25px !important; }
  :root:not(.s145-never):not(.s145-ab-off) body :is(section.gb-editor-take, section.gbu-take) > :is(p, ul, ol) { font-size: 17px !important; }
}

/* ---------- [AB-02] Review verdict as a flat HUD (ART-09, Panos decides: ?s145off=art09 brings back the live ring) ---------- */
/* A big flat score, 10-segment stat bars, no glow, no fill animation. Guarded by :where(), which adds no weight. */
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict.gbu-verdict {
  display: grid !important;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) !important;
  gap: 24px 40px !important;
  align-items: center !important;
  margin: 16px 0 48px !important;
  padding: 28px 32px !important;
  border: 0 !important;
  border-radius: var(--s5-r) !important;
  background: var(--s5-box) !important;
  background-image: none !important;
  box-shadow: none !important;
}
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-verdict-score {
  display: block !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  place-items: start !important;
}
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-verdict-score > div:first-child {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: 8px !important;
}
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-verdict-score strong {
  font-family: var(--s5-head) !important;
  font-weight: 700 !important;
  font-size: 112px !important;
  line-height: .8 !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--s5-gold) !important;
  text-shadow: none !important;
}
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-verdict-score span {
  font-family: var(--s5-head) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  color: var(--s5-tx2) !important;
}
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-verdict-score small {
  flex-basis: 100% !important;
  max-width: none !important;
  margin: 14px 0 0 !important;
  font: 500 13px/1.35 Inter, system-ui, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--s5-b-tx3) !important;
}
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .s5-verdict-by {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: none !important;
  margin: 16px 0 0 !important;
  font: 600 14px/1.2 Inter, system-ui, sans-serif !important;
  color: var(--s5-warm) !important;
}
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .s5-verdict-by > .s5-face { width: 28px !important; height: 28px !important; font-size: 11px !important; }
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-verdict-bars { gap: 14px !important; }
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-verdict-bars li {
  grid-template-columns: minmax(90px, 128px) minmax(0, 1fr) 56px !important;
  gap: 16px !important;
  font: 600 15px/1.2 Inter, system-ui, sans-serif !important;
  color: var(--s5-ink) !important;
}
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-bar {
  height: 14px !important;
  border-radius: 0 !important;
  background: var(--s5-track) !important;
  background-image: none !important;
  overflow: hidden !important;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%) !important;
  mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%) !important;
}
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-bar > i {
  border-radius: 0 !important;
  background: var(--s5-gold) !important;
  background-image: none !important;
  box-shadow: none !important;
  clip-path: inset(0 2px 0 0) !important; /* the last 2px always fall in a segment gap: no 1px sliver at 9/10 */
}
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-verdict-bars b {
  font-family: var(--s5-head) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-align: right !important;
  color: var(--s5-gold) !important;
  font-variant-numeric: tabular-nums !important;
}
/* The byline score pill: flat, same gold, no ring. */
:root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body .gbu-score-pill {
  border: 0 !important;
  border-radius: var(--s5-r-s) !important;
  background: var(--s5-s2) !important;
  color: var(--s5-gold) !important;
  box-shadow: none !important;
}
/* Day: on the grey step (#f4f2f7 on the #f4f3f6 page) the pill did not read as a chip and its gold sat at 4.5:1 with no
   margin. On the white box colour of the take and verdict it reads as a chip, and the gold reaches 5.0:1. */
:root:not(.s145-never)[data-gb-theme="light"]:not(.s145-ab-off):where(:not(.s145-off-art09)) body .gbu-score-pill { background: var(--s5-box) !important; }
/* With the HUD off (?s145off=art09) the live ring comes back whole: no "Verdict by" line either. */
html.s145-off-art09 body.single-post #gbu-verdict .s5-verdict-by { display: none !important; }
@media (max-width: 760px) {
  :root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict.gbu-verdict {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 22px 18px 24px !important;
  }
  :root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-verdict-score { width: auto !important; margin: 0 !important; }
  :root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-verdict-score strong { font-size: 92px !important; }
  /* phone: label and value on one row, the bar under them (the bundle's own grid areas) */
  :root:not(.s145-never):not(.s145-ab-off):where(:not(.s145-off-art09)) body #gbu-verdict .gbu-verdict-bars li { grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px 12px !important; }
}

/* ---------- [AB-03] One clean ending: an 8-bit end mark, one author block, quiet labels, panels (ART-01, ART-16) ---------- */
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content .s5-end {
  display: inline-block !important;
  width: .5em !important;
  height: .5em !important;
  margin-left: .4em !important;
  background: var(--s5-accent) !important;
  vertical-align: baseline !important;
}
/* "Written by": a quiet 13px warm line, not a red tracked label. */
:root:not(.s145-never):not(.s145-ab-off) body section.gb-author-box small {
  font: 500 13px/1.3 Inter, system-ui, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--s5-warm) !important;
}
/* Panels: one surface and the 14px radius. They keep a faint hairline while the violet ground stays (frameless panels read
 * as holes in the radial wash); with ?s145black=1 the hairline token is transparent, so they go frameless with the home. */
:root:not(.s145-never):not(.s145-ab-off) body.single-post :is(section.gbq-game-card, aside.gb-game-related, section.gb-author-box, section#comments, aside.gb-key-facts, .gb-article-toc, aside.gbc-guide-box) {
  border: 1px solid var(--s5-hair) !important;
  border-radius: var(--s5-r) !important;
  background: var(--s5-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}
/* Guide and fact boxes (ART-13): no "Long guide" / "At a glance" labels over their titles; titles in the heading face;
 * numbers warm; the bullets lose their glow. */
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-toc > div > span,
:root:not(.s145-never):not(.s145-ab-off) body aside.gb-key-facts > div > span,
:root:not(.s145-never):not(.s145-ab-off) body aside.gbc-guide-box .gbc-guide-dot { display: none !important; }
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-toc #gb-article-toc-title,
:root:not(.s145-never):not(.s145-ab-off) body aside.gbc-guide-box .gbc-guide-top > strong,
:root:not(.s145-never):not(.s145-ab-off) body aside.gb-key-facts > div > h2 {
  font-family: var(--s5-head) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.05 !important;
  letter-spacing: .005em !important;
  text-transform: none !important;
  color: var(--s5-ink) !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-toc ol > li::marker { color: var(--s5-warm) !important; font-family: var(--s5-head) !important; font-weight: 700 !important; }
:root:not(.s145-never):not(.s145-ab-off) body aside.gbc-guide-box .gbc-guide-line { font-size: 14px !important; color: var(--s5-tx2) !important; }
:root:not(.s145-never):not(.s145-ab-off) body.single-post aside.gb-key-facts li::before {
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 6px !important;
  height: 6px !important;
}
/* Sources without the script: quiet lines, not boxes. */
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content p.gb-source {
  margin: 0 0 6px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--s5-b-tx3) !important;
}
:root:not(.s145-never):not(.s145-ab-off) body.single-post p.gb-preferred-source { font-size: 14px !important; line-height: 1.5 !important; }
/* Tags: plain chips on one surface; the "Tags" label in the quiet grey (platform line 40). */
:root:not(.s145-never):not(.s145-ab-off) body.single-post .gb-tags > span { font: 500 14px/1 Inter, system-ui, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; color: var(--s5-b-tx3) !important; }
:root:not(.s145-never):not(.s145-ab-off) body.single-post .gb-tags > a {
  border: 0 !important;
  border-radius: var(--s5-r-s) !important;
  background: var(--s5-panel) !important;
  color: var(--s5-tx2) !important;
  font-weight: 500 !important;
}
/* Comments: no "Community" label over "Comments". Related stories: no "Keep playing" label over the heading. */
:root:not(.s145-never):not(.s145-ab-off) body section#comments .gb-comments-heading > .gb-kicker { display: none !important; }
:root:not(.s145-never):not(.s145-ab-off) body section.gb-related > p.gb-kicker { display: none !important; }

/* ---------- [AB-07] Release info as a spec plate (ART-10) ---------- */
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content h2.gb-release-info-h { margin-bottom: 14px !important; }
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content ul.gb-release-info {
  list-style: none !important;
  margin: 0 0 40px !important;
  padding: 6px 24px !important;
  border: 0 !important;
  border-radius: var(--s5-r) !important;
  background: var(--s5-panel) !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content ul.gb-release-info > li {
  margin: 0 !important;
  padding: 13px 0 !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  color: var(--s5-ink) !important;
  font-variant-numeric: tabular-nums !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content ul.gb-release-info > li + li { box-shadow: inset 0 1px 0 var(--s5-b-line) !important; }
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content ul.gb-release-info > li::before { content: none !important; display: none !important; }
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content ul.gb-release-info > li > strong:first-child {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--s5-warm) !important;
}
@media (max-width: 760px) {
  :root:not(.s145-never):not(.s145-ab-off) body .gb-article-content ul.gb-release-info { padding: 4px 16px !important; }
  :root:not(.s145-never):not(.s145-ab-off) body .gb-article-content ul.gb-release-info > li { padding: 12px 0 !important; font-size: 16px !important; }
  :root:not(.s145-never):not(.s145-ab-off) body .gb-article-content ul.gb-release-info > li > strong:first-child { font-size: 14px !important; }
}

/* ---------- [AB-08] Spec tables: no grid lines, row tone steps, a label column, phone scroll with a pinned first column (ART-11) ---------- */
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table {
  margin: 28px 0 36px !important;
  border-radius: var(--s5-r) !important;
  background: var(--s5-panel) !important;
  overflow-x: auto !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table table {
  width: 100% !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 16px !important;
  font-variant-numeric: tabular-nums !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table :is(th, td) {
  border: 0 !important;
  padding: 12px 16px !important;
  text-align: left !important;
  vertical-align: top !important;
  line-height: 1.45 !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table thead th {
  font: 600 14px/1.3 Inter, system-ui, sans-serif !important;
  color: var(--s5-warm) !important;
  padding-top: 16px !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table tbody tr:nth-child(odd) > * { background: var(--s5-s2) !important; }
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table tbody td:first-child { font-weight: 600 !important; color: var(--s5-ink) !important; }
@media (max-width: 760px) {
  /* Two products side by side stay side by side: tighter cells instead of a sideways scroll. */
  :root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table table { font-size: 14px !important; }
  :root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table :is(th, td) { padding: 10px !important; }
  :root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table thead th { font-size: 13px !important; }
  :root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table :is(th, td):first-child { width: 30% !important; }
  /* Four or more columns: scroll sideways inside the table's own box, with the label column pinned. */
  :root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table:has(tr > :nth-child(4)) table { min-width: 560px !important; }
  :root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table:has(tr > :nth-child(4)) :is(th, td):first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 1 !important;
    width: 112px !important;
    min-width: 112px !important;
    background: var(--s5-panel) !important;
  }
  :root:not(.s145-never):not(.s145-ab-off) body .gb-article-content figure.wp-block-table:has(tr > :nth-child(4)) tbody tr:nth-child(odd) > :first-child { background: var(--s5-s2) !important; }
}

/* ---------- [AB-09] Video tiles: the play button leaves the middle of the thumbnail, where it covered the titles (ART-12) ---------- */
:root:not(.s145-never):not(.s145-ab-off) body .gb-ytf .gb-ytf__play {
  left: auto !important;
  top: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  width: 56px !important;
  height: 56px !important;
  transform: none !important;
  box-shadow: none !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-ytf .gbu-yt-title { right: 92px !important; }
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-video-head {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-video-head > small { display: none !important; }
:root:not(.s145-never):not(.s145-ab-off) body .gb-article-video-head > span { font: 600 14px/1.2 Inter, system-ui, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; color: var(--s5-warm) !important; }
/* Day mode: the video section stays black, so a see-through bar put the warm label on black (3.8:1). The bar takes the
 * panel colour instead (warm on white, 5.9:1), with the section's top corners. */
:root:not(.s145-never)[data-gb-theme="light"]:not(.s145-ab-off) body .gb-article-video-head {
  background: var(--s5-panel) !important;
  border-radius: var(--s5-r) var(--s5-r) 0 0 !important;
}

/* ---------- [AB-10] Article head rhythm: no duplicate kicker, a face on the byline, one corner size, aligned phone byline (ART-07) ---------- */
:root:not(.s145-never):not(.s145-ab-off) body.single-post .gb-article-header .gb-kicker:not(:has(.gb-offer-pill)) { display: none !important; }
:root:not(.s145-never):not(.s145-ab-off) body.single-post .gb-article-header .gb-kicker:has(.gb-offer-pill) > :not(.gb-offer-pill) { display: none !important; }
:root:not(.s145-never):not(.s145-ab-off) body.single-post .gbu-byline { align-items: center !important; column-gap: 10px !important; }
:root:not(.s145-never):not(.s145-ab-off) body.single-post .gbu-byline > .s5-face { width: 28px !important; height: 28px !important; font-size: 11px !important; margin: 0 !important; }
:root:not(.s145-never):not(.s145-ab-off) body.single-post figure.gb-article-hero { border: 0 !important; border-radius: var(--s5-r) !important; overflow: hidden !important; }
:root:not(.s145-never):not(.s145-ab-off) body.single-post :is(figure.gb-article-hero img, .gb-article-content figure img, section.gb-article-video) { border-radius: var(--s5-r) !important; }
:root:not(.s145-never):not(.s145-ab-off) body.single-post section.gb-article-video { border: 0 !important; }
@media (max-width: 760px) {
  :root:not(.s145-never):not(.s145-ab-off) body.single-post .gb-article-meta-bar { align-items: stretch !important; }
}
/* The phone action tiles in one style (they were red, cyan, navy and grey); the Comments label reads like the others. */
:root:not(.s145-never):not(.s145-ab-off) body.single-post nav.gb-article-actions .gb-article-action {
  border: 0 !important;
  background: var(--s5-panel) !important;
  color: var(--s5-tx2) !important;
  box-shadow: none !important;
}
:root:not(.s145-never):not(.s145-ab-off) body.single-post nav.gb-article-actions .gb-article-action :is(span, b, strong) { color: inherit !important; }
@media (hover: hover) and (pointer: fine) {
  :root:not(.s145-never):not(.s145-ab-off) body.single-post nav.gb-article-actions .gb-article-action:hover { color: var(--s5-accent) !important; }
}

/* ---------- [AB-12] Press feel (one site scale, the scale property), only when motion is welcome ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root:not(.s145-never):not(.s145-ab-off) body.single-post nav.gb-article-actions .gb-article-action:active { scale: var(--s145-press, .97) !important; }
  :root:not(.s145-never):not(.s145-ab-off) body .gb-ytf .gb-ytf__btn:active .gb-ytf__play { scale: var(--s145-press, .97) !important; }
}

/* ---------- Judge overrides (in s145.art-b, so they win over lens A) ---------- */
/* Our take title: the merged look has no red dot before the heading. */
html body section.gb-editor-take h2#gb-editor-take-title::before { content: none !important; display: none !important; }
/* Fact sheet: lens A's split (li.s5-fact) inside lens B's plate; warm 15px labels. */
html body .gb-article-content ul.gb-release-info > li.s5-fact { box-shadow: none !important; padding: 12px 0 !important; }
html body .gb-article-content ul.gb-release-info > li.s5-fact:last-child { border-bottom: 0 !important; }
html body .gb-article-content ul.gb-release-info > li.s5-fact > .s5-k { font: 600 15px/1.45 Inter, system-ui, sans-serif !important; color: var(--s5-warm) !important; }

} /* @layer s145.art-b */