/* ICBC marking sheet article: /blog/icbc-road-test-marking-sheet-2026/ (run 2, 2026-10-23).
   The owner chose the "Explainer" format; the other two were removed by finalize_icbc_run2_2026_10_23.py. */

/* Each wrapper uses display: contents, so its hero and article shell are direct flex children of .bh-main-col and
   the template's order (library block below the article) holds. A hidden wrapper or sidebar list stays hidden
   although these classes set display. */
.icbc26-news,
.icbc26-qa,
.icbc26-ride { display: contents; }

.icbc26-news[hidden],
.icbc26-qa[hidden],
.icbc26-ride[hidden],
.page-blog-article .row-toc--left[hidden] { display: none !important; }

/* @format news (Explainer) */
/* ICBC marking sheet article, format "Explainer" (news explainer).
   Every selector is scoped to .icbc26-news. Builds on blog-article-shell.css components
   (row-quick-answer, row-info-card, row-callout, row-faq, row-cta-band). */

.icbc26-news {
  --nx-cyan: #00d4ff;
  --nx-cyan-soft: rgba(0, 212, 255, 0.12);
  --nx-red: #ff5d62;
  --nx-gold: #d4af5b;
  --nx-amber: #f5b14c;
  --nx-paper: #f4f1ea;
  --nx-ink: #1a2030;
  --nx-rule: #b8bec8;
  --nx-text: rgba(226, 232, 240, 0.8);
  --nx-muted: rgba(226, 232, 240, 0.62);
  --nx-line: rgba(255, 255, 255, 0.1);
  --nx-card: rgba(255, 255, 255, 0.045);
}

/* The wrapper holds the hero and the article shell; keep the column flow of .bh-main-col. */
.icbc26-news > * { min-width: 0; }
.icbc26-news .row-article-hero-content h1 { max-width: 12.5em; }
.icbc26-news .row-sheet-mini-row { grid-template-columns: 46px 1fr auto; }

/* Base article rules give direct-child lists a 72ch measure and left padding; these lists are layout. */
.icbc26-news .row-article-content > ul.nx-legend.nx-legend,
.icbc26-news .row-article-content > ul.nx-rowkeys.nx-rowkeys { max-width: none; padding-left: 0; }

/* Small helpers */
.icbc26-news .row-article-content .nx-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(0, 212, 255, 0.28);
  background: rgba(0, 212, 255, 0.07);
  color: var(--nx-cyan);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.icbc26-news .row-article-content .nx-label--gold { border-color: rgba(212, 175, 91, 0.45); background: rgba(212, 175, 91, 0.1); color: #e8c77f; }
.icbc26-news .row-article-content .nx-label--amber { border-color: rgba(245, 177, 76, 0.5); background: rgba(245, 177, 76, 0.1); color: #f7c477; }
.icbc26-news .row-article-content .nx-label--red { border-color: rgba(255, 93, 98, 0.45); background: rgba(255, 93, 98, 0.1); color: #ff8e92; }

.icbc26-news .row-article-content .nx-note {
  margin: 10px 0 0;
  color: var(--nx-muted);
  font-size: 0.86rem;
  line-height: 1.6;
}
.icbc26-news .row-article-content .nx-note a,
.icbc26-news .row-article-content .nx-card-copy a { color: var(--nx-cyan); }

/* Info-card icon (the doc glyph in "The sheet is yours") */
.icbc26-news .row-article-content .row-info-card .row-code svg { width: 18px; height: 18px; }

/* Callout variants */
.icbc26-news .row-article-content .row-callout.nx-callout--warn {
  border-color: rgba(245, 177, 76, 0.35);
  background: linear-gradient(180deg, rgba(245, 177, 76, 0.09), rgba(255, 255, 255, 0.03));
}
.icbc26-news .row-article-content .row-callout.nx-callout--side {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}
.icbc26-news .row-article-content .row-callout h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.icbc26-news .row-article-content .row-callout p { margin: 0; color: var(--nx-text); line-height: 1.7; }
.icbc26-news .row-article-content .row-callout p a { color: var(--nx-cyan); }

/* ---------- Four sections ---------- */
.icbc26-news .row-article-content .nx-sections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 10px;
}
.icbc26-news .row-article-content .nx-sec {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 15px;
  border-radius: 17px;
  border: 1px solid var(--nx-line);
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 45%),
    var(--nx-card);
}
.icbc26-news .row-article-content .nx-sec h3 { margin: 0 0 4px; font-size: 1.02rem; }
.icbc26-news .row-article-content .nx-sec-meta {
  margin: 0;
  color: var(--nx-cyan);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.icbc26-news .row-article-content .nx-sec-meta .nx-nof { color: rgba(226, 232, 240, 0.7); }
.icbc26-news .row-article-content .nx-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 62px;
  margin: auto 0 0;
  padding: 16px 0 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.icbc26-news .row-article-content .nx-bars i {
  flex: 1 1 0;
  max-width: 9px;
  min-width: 2px;
  border-radius: 3px 3px 1px 1px;
  background: rgba(0, 212, 255, 0.62);
}
.icbc26-news .row-article-content .nx-bars .b10 { height: 100%; }
.icbc26-news .row-article-content .nx-bars .b5 { height: 54%; background: rgba(0, 212, 255, 0.4); }
.icbc26-news .row-article-content .nx-bars .b2 { height: 24%; background: rgba(0, 212, 255, 0.28); }
.icbc26-news .row-article-content .nx-bars .f { border-top: 4px solid var(--nx-red); }
.icbc26-news .row-article-content .nx-bars .gap { margin-left: 5px; }
.icbc26-news .row-article-content .nx-sec p.nx-sec-copy {
  margin: 10px 0 0;
  color: rgba(226, 232, 240, 0.7);
  font-size: 0.86rem;
  line-height: 1.55;
}
.icbc26-news .row-article-content .nx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 4px 0 26px;
  padding: 0;
  list-style: none;
  color: var(--nx-muted);
  font-size: 0.8rem;
}
.icbc26-news .row-article-content .nx-legend li { display: inline-flex; align-items: center; gap: 7px; }
.icbc26-news .row-article-content .nx-legend i {
  display: inline-block;
  width: 7px;
  border-radius: 2px 2px 1px 1px;
  background: rgba(0, 212, 255, 0.62);
}
.icbc26-news .row-article-content .nx-legend .l10 { height: 16px; }
.icbc26-news .row-article-content .nx-legend .l5 { height: 10px; background: rgba(0, 212, 255, 0.4); }
.icbc26-news .row-article-content .nx-legend .l2 { height: 5px; background: rgba(0, 212, 255, 0.28); }
.icbc26-news .row-article-content .nx-legend .lf { height: 16px; border-top: 4px solid var(--nx-red); }

/* ---------- Two ways to fail on marks ---------- */
.icbc26-news .row-article-content .nx-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 14px;
}
.icbc26-news .row-article-content .nx-way {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--nx-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
}
.icbc26-news .row-article-content .nx-way h3 { margin: 0 0 8px; }
.icbc26-news .row-article-content .nx-way p {
  margin: 0;
  color: var(--nx-text);
  font-size: 0.94rem;
  line-height: 1.65;
}
.icbc26-news .row-article-content .nx-way-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #04a9d8);
  color: #03101a;
  font-size: 0.8rem;
  font-weight: 900;
}
.icbc26-news .row-article-content .nx-gauge-wrap { margin-top: auto; padding-top: 22px; }
.icbc26-news .row-article-content .nx-gauge {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.18) 0%, rgba(0, 212, 255, 0.85) 79%, rgba(255, 93, 98, 0.9) 79.4%, var(--nx-red) 100%);
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.18);
}
.icbc26-news .row-article-content .nx-gauge::after {
  content: "";
  position: absolute;
  left: 79.2%;
  top: -6px;
  bottom: -6px;
  width: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
.icbc26-news .row-article-content .nx-gauge-scale {
  position: relative;
  height: 34px;
  margin-top: 8px;
  font-size: 0.74rem;
  font-weight: 750;
  color: var(--nx-muted);
}
.icbc26-news .row-article-content .nx-gauge-scale span { position: absolute; top: 0; line-height: 1.3; }
.icbc26-news .row-article-content .nx-gauge-scale .s0 { left: 0; }
.icbc26-news .row-article-content .nx-gauge-scale .s95 { left: 79.2%; transform: translateX(-50%); color: #fff; text-align: center; }
.icbc26-news .row-article-content .nx-gauge-scale .sfail { right: 0; color: #ff9a9d; text-align: right; }
.icbc26-news .row-article-content .nx-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
}
.icbc26-news .row-article-content .nx-mini-name {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.84rem;
  font-weight: 750;
}
.icbc26-news .row-article-content .nx-mini-boxes { display: flex; gap: 4px; }
.icbc26-news .row-article-content .nx-mini-boxes span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--nx-red);
  font-weight: 900;
  font-size: 0.86rem;
}
.icbc26-news .row-article-content .nx-mini-boxes .t {
  background:
    linear-gradient(118deg, transparent 44%, rgba(0, 212, 255, 0.95) 44%, rgba(0, 212, 255, 0.95) 56%, transparent 56%) center / 14px 18px no-repeat,
    rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.35);
}
.icbc26-news .row-article-content .nx-mini-boxes .fx {
  border-color: rgba(255, 93, 98, 0.65);
  background: rgba(255, 93, 98, 0.14);
  box-shadow: 0 0 16px rgba(255, 93, 98, 0.25);
}

.icbc26-news .row-article-content .nx-instant {
  margin: 0 0 30px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 93, 98, 0.28);
  background: linear-gradient(180deg, rgba(255, 93, 98, 0.075), rgba(255, 255, 255, 0.02));
}
.icbc26-news .row-article-content .nx-instant h3 { margin: 0 0 14px; }
.icbc26-news .row-article-content .nx-instant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.icbc26-news .row-article-content .nx-instant-grid li {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 10, 20, 0.45);
  color: rgba(226, 232, 240, 0.74);
  font-size: 0.9rem;
  line-height: 1.55;
}
.icbc26-news .row-article-content .nx-instant-grid strong {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.96rem;
}
.icbc26-news .row-article-content .nx-instant-grid strong span {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(255, 93, 98, 0.16);
  color: #ff8e92;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* ---------- Interactive sheet excerpt (paper look) ----------
   Phone: paper, caption, then the explanation panel under it.
   900px and up: paper on the left, explanation panel on the right.
   Each tip is absolutely positioned against the figure, so it lands on the panel
   no matter which box it belongs to. */
.icbc26-news .row-article-content .nx-sheet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 12px;
  margin: 18px 0 14px;
  padding: 12px 10px;
  border-radius: 20px;
  border: 1px solid var(--nx-line);
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 212, 255, 0.1), transparent 40%),
    rgba(6, 11, 21, 0.78);
}
.icbc26-news .row-article-content .nx-sheet .nx-paper { order: 1; }
.icbc26-news .row-article-content .nx-sheet figcaption { order: 2; }
.icbc26-news .row-article-content .nx-sheet .nx-sheet-hint { order: 3; }
.icbc26-news .row-article-content .nx-paper {
  border-radius: 10px;
  background: var(--nx-paper);
  color: var(--nx-ink);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-family: 'Inter', Arial, sans-serif;
}
.icbc26-news .row-article-content .nx-paper-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px 10px 0 0;
  border-bottom: 2px solid var(--nx-ink);
  background: #d8dbe1;
  font-size: 0.84rem;
  font-weight: 800;
}
.icbc26-news .row-article-content .nx-paper-head span:last-child {
  color: #5a6475;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.icbc26-news .row-article-content .nx-prow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px repeat(5, 44px);
  border-bottom: 1px solid var(--nx-rule);
}
.icbc26-news .row-article-content .nx-prow:last-child { border-bottom: 0; }
.icbc26-news .row-article-content .nx-pname {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-right: 1px solid var(--nx-rule);
  font-size: 0.88rem;
  line-height: 1.3;
}
.icbc26-news .row-article-content .nx-ppts {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--nx-rule);
  font-size: 0.86rem;
  font-weight: 700;
}
.icbc26-news .row-article-content .nx-box {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-right: 1px solid var(--nx-rule);
  color: #d62f2f;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  outline: none;
  transition: background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.icbc26-news .row-article-content .nx-box:last-child { border-right: 0; }
.icbc26-news .row-article-content .nx-void { border-right: 0; }
.icbc26-news .row-article-content .nx-box:hover,
.icbc26-news .row-article-content .nx-box:focus { background-color: rgba(0, 150, 200, 0.16); }
.icbc26-news .row-article-content .nx-box:focus-visible { box-shadow: inset 0 0 0 2px #0a8fbf; }
.icbc26-news .row-article-content .nx-box.nx-f:hover,
.icbc26-news .row-article-content .nx-box.nx-f:focus { background-color: rgba(214, 47, 47, 0.18); }

/* Tally slash: the examiner's mark. Ticks every box up to the one under the pointer. */
.icbc26-news .row-article-content .nx-prow:has(.nx-b1:hover, .nx-b1:focus) .nx-b1,
.icbc26-news .row-article-content .nx-prow:has(.nx-b2:hover, .nx-b2:focus) :is(.nx-b1, .nx-b2),
.icbc26-news .row-article-content .nx-prow:has(.nx-b3:hover, .nx-b3:focus) :is(.nx-b1, .nx-b2, .nx-b3),
.icbc26-news .row-article-content .nx-prow:has(.nx-b4:hover, .nx-b4:focus) :is(.nx-b1, .nx-b2, .nx-b3, .nx-b4),
.icbc26-news .row-article-content .nx-prow:has(.nx-b5:hover, .nx-b5:focus) :is(.nx-b1, .nx-b2, .nx-b3, .nx-b4, .nx-b5),
.icbc26-news .row-article-content .nx-box:hover,
.icbc26-news .row-article-content .nx-box:focus {
  background-image: linear-gradient(118deg, transparent 45%, var(--nx-ink) 45%, var(--nx-ink) 55%, transparent 55%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 22px;
}

.icbc26-news .row-article-content .nx-tip,
.icbc26-news .row-article-content .nx-sheet-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 6px 10px;
  min-height: 124px;
  padding: 12px 14px;
  border-radius: 13px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}
.icbc26-news .row-article-content .nx-sheet-hint {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--nx-muted);
}
.icbc26-news .row-article-content .nx-sheet-hint::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 0 4px 0 2px;
  border-radius: 50%;
  background: var(--nx-cyan);
  box-shadow: 0 0 0 5px rgba(0, 212, 255, 0.14), 0 0 16px rgba(0, 212, 255, 0.6);
}
.icbc26-news .row-article-content .nx-tip {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  z-index: 2;
  border: 1px solid rgba(0, 212, 255, 0.38);
  background: #0b1526;
  color: #e6f2ff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  pointer-events: none;
}
.icbc26-news .row-article-content .nx-tip.nx-tip--f { border-color: rgba(255, 93, 98, 0.55); background: #1d0f16; }
.icbc26-news .row-article-content .nx-box:focus .nx-tip { opacity: 1; visibility: visible; transform: none; z-index: 3; }
.icbc26-news .row-article-content .nx-box:hover .nx-tip { opacity: 1; visibility: visible; transform: none; z-index: 4; }
.icbc26-news .row-article-content .nx-tip-k {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(0, 212, 255, 0.14);
  color: var(--nx-cyan);
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}
.icbc26-news .row-article-content .nx-tip--f .nx-tip-k { background: rgba(255, 93, 98, 0.18); color: #ff8e92; }
.icbc26-news .row-article-content .nx-sheet figcaption {
  margin: 0 2px;
  color: var(--nx-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
.icbc26-news .row-article-content .nx-sheet figcaption a { color: var(--nx-cyan); }

@media (min-width: 900px) {
  .icbc26-news .row-article-content .nx-sheet {
    grid-template-columns: minmax(0, 1fr) 260px;
    column-gap: 18px;
    padding: 18px;
  }
  .icbc26-news .row-article-content .nx-sheet .nx-paper { grid-column: 1; grid-row: 1; }
  .icbc26-news .row-article-content .nx-sheet figcaption { grid-column: 1; grid-row: 2; }
  .icbc26-news .row-article-content .nx-sheet .nx-sheet-hint { grid-column: 2; grid-row: 1 / span 2; }
  .icbc26-news .row-article-content .nx-tip,
  .icbc26-news .row-article-content .nx-sheet-hint {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    min-height: 0;
    padding: 16px 18px;
    font-size: 0.92rem;
  }
  .icbc26-news .row-article-content .nx-sheet-hint::before { margin: 0 0 4px 2px; }
  .icbc26-news .row-article-content .nx-tip {
    left: auto;
    right: 18px;
    top: 18px;
    bottom: 18px;
    width: 260px;
  }
}

.icbc26-news .row-article-content .nx-rowkeys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.icbc26-news .row-article-content .nx-rowkeys li {
  padding: 14px 15px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.74);
  font-size: 0.88rem;
  line-height: 1.55;
}
.icbc26-news .row-article-content .nx-rowkeys b {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

/* Rows with and without F */
.icbc26-news .row-article-content .nx-rowsets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 28px;
}
.icbc26-news .row-article-content .nx-rowset {
  padding: 18px;
  border-radius: 17px;
  border: 1px solid var(--nx-line);
  background: var(--nx-card);
}
.icbc26-news .row-article-content .nx-rowset h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 1rem;
}
.icbc26-news .row-article-content .nx-rowset h3 .nx-fbadge {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(255, 93, 98, 0.6);
  background: rgba(255, 93, 98, 0.12);
  color: #ff8e92;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
}
.icbc26-news .row-article-content .nx-rowset h3 .nx-fbadge--none {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
}
.icbc26-news .row-article-content .nx-rowset > p {
  margin: 0 0 12px;
  color: var(--nx-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}
.icbc26-news .row-article-content .nx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.icbc26-news .row-article-content .nx-chips li {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 93, 98, 0.3);
  background: rgba(255, 93, 98, 0.07);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.3;
}
.icbc26-news .row-article-content .nx-chips--plain li {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.78);
}
.icbc26-news .row-article-content .nx-chips li small { color: rgba(226, 232, 240, 0.55); font-size: 0.72rem; font-weight: 700; }

/* ---------- Old vs new, ICBC's worked example ---------- */
.icbc26-news .row-article-content .nx-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 22px;
}
.icbc26-news .row-article-content .nx-ex {
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--nx-line);
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}
.icbc26-news .row-article-content .nx-ex-kicker {
  margin: 0 0 4px;
  color: var(--nx-cyan);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.icbc26-news .row-article-content .nx-ex h3 { margin: 0 0 16px; }
.icbc26-news .row-article-content .nx-lane {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 10, 20, 0.45);
}
.icbc26-news .row-article-content .nx-lane--new {
  border-color: rgba(0, 212, 255, 0.24);
  background: rgba(0, 212, 255, 0.06);
}
.icbc26-news .row-article-content .nx-lane-label {
  display: block;
  margin-bottom: 9px;
  color: var(--nx-muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.icbc26-news .row-article-content .nx-lane--new .nx-lane-label { color: var(--nx-cyan); }
.icbc26-news .row-article-content .nx-lane-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.icbc26-news .row-article-content .nx-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.84rem;
  font-weight: 700;
}
.icbc26-news .row-article-content .nx-chip i {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 900;
}
.icbc26-news .row-article-content .nx-chip--new { padding: 6px 6px 6px 10px; border-color: rgba(0, 212, 255, 0.3); }
.icbc26-news .row-article-content .nx-chip--new i { background: rgba(0, 212, 255, 0.18); color: var(--nx-cyan); }
.icbc26-news .row-article-content .nx-plus { color: var(--nx-muted); font-weight: 800; }
.icbc26-news .row-article-content .nx-lane-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 212, 255, 0.22);
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.82rem;
  font-weight: 700;
}
.icbc26-news .row-article-content .nx-total {
  min-width: 44px;
  text-align: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00d4ff, #04a9d8);
  color: #03101a;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}
.icbc26-news .row-article-content .nx-arrow {
  display: flex;
  justify-content: center;
  height: 26px;
  color: rgba(0, 212, 255, 0.7);
}
.icbc26-news .row-article-content .nx-arrow svg { width: 18px; height: 26px; }

/* Side-by-side table */
.icbc26-news .row-article-content .nx-table-wrap {
  margin: 22px 0 28px;
  border-radius: 18px;
  border: 1px solid var(--nx-line);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.icbc26-news .row-article-content .nx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.icbc26-news .row-article-content .nx-table caption {
  padding: 14px 18px 0;
  color: var(--nx-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}
.icbc26-news .row-article-content .nx-table th,
.icbc26-news .row-article-content .nx-table td {
  padding: 13px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.icbc26-news .row-article-content .nx-table thead th {
  border-top: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.icbc26-news .row-article-content .nx-table thead th:last-child { color: var(--nx-cyan); }
.icbc26-news .row-article-content .nx-table tbody th {
  width: 22%;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
.icbc26-news .row-article-content .nx-table td { color: rgba(226, 232, 240, 0.72); }
.icbc26-news .row-article-content .nx-table td:last-child { color: rgba(255, 255, 255, 0.9); background: rgba(0, 212, 255, 0.035); }

/* Readings: more forgiving vs stricter */
.icbc26-news .row-article-content .nx-readings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 28px;
}
.icbc26-news .row-article-content .nx-reading {
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--nx-line);
  border-top: 3px solid rgba(0, 212, 255, 0.7);
  background: var(--nx-card);
}
.icbc26-news .row-article-content .nx-reading--strict { border-top-color: rgba(245, 177, 76, 0.8); }
.icbc26-news .row-article-content .nx-reading h3 { margin: 0 0 12px; }
.icbc26-news .row-article-content .nx-reading ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.icbc26-news .row-article-content .nx-reading li {
  position: relative;
  padding-left: 22px;
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.93rem;
  line-height: 1.6;
}
.icbc26-news .row-article-content .nx-reading li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nx-cyan);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
.icbc26-news .row-article-content .nx-reading--strict li::before { background: var(--nx-amber); box-shadow: 0 0 10px rgba(245, 177, 76, 0.5); }

/* ---------- For you: tools + practice steps ---------- */
.icbc26-news .row-article-content .nx-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 26px;
}
.icbc26-news .row-article-content .nx-tool {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 17px;
  border: 1px solid var(--nx-line);
  background: var(--nx-card);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.icbc26-news .row-article-content .nx-tool:hover,
.icbc26-news .row-article-content .nx-tool:focus-visible {
  border-color: rgba(0, 212, 255, 0.4);
  background: rgba(0, 212, 255, 0.07);
  transform: translateY(-2px);
  outline: none;
}
.icbc26-news .row-article-content .nx-tool-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(0, 212, 255, 0.12);
  color: var(--nx-cyan);
}
.icbc26-news .row-article-content .nx-tool-icon svg { width: 19px; height: 19px; }
.icbc26-news .row-article-content .nx-tool strong { color: #fff; font-family: 'Poppins', sans-serif; line-height: 1.25; }
.icbc26-news .row-article-content .nx-tool span.nx-tool-copy { color: rgba(226, 232, 240, 0.7); font-size: 0.9rem; line-height: 1.55; }
.icbc26-news .row-article-content .nx-tool span.nx-tool-go { margin-top: auto; color: var(--nx-cyan); font-size: 0.84rem; font-weight: 800; }

.icbc26-news .row-article-content .row-step-list .nx-step-title {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

/* ---------- Opinion block ---------- */
.icbc26-news .row-article-content .nx-opinion {
  position: relative;
  margin: 46px 0 30px;
  padding: 26px 28px 24px;
  border-radius: 22px;
  border: 1px solid rgba(212, 175, 91, 0.34);
  background:
    radial-gradient(circle at 100% 0%, rgba(212, 175, 91, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(212, 175, 91, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}
.icbc26-news .row-article-content .nx-opinion::before {
  content: "\201C";
  position: absolute;
  right: 22px;
  top: -6px;
  color: rgba(212, 175, 91, 0.22);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 7rem;
  line-height: 1;
  pointer-events: none;
}
.icbc26-news .row-article-content .nx-opinion h2 { margin-top: 2px; }
.icbc26-news .row-article-content .nx-opinion p {
  max-width: 70ch;
  margin: 0 0 14px;
  color: rgba(236, 232, 222, 0.84);
  font-size: 1rem;
  line-height: 1.78;
}
.icbc26-news .row-article-content .nx-opinion-sign {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(212, 175, 91, 0.22);
  color: rgba(226, 232, 240, 0.7);
  font-size: 0.86rem;
}
.icbc26-news .row-article-content .nx-opinion-sign span.nx-ava {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8c77f, #b8913f);
  color: #1a1408;
  font-weight: 900;
}
.icbc26-news .row-article-content .nx-opinion-sign strong { display: block; color: #fff; font-size: 0.92rem; }

/* ---------- Tablets ---------- */
.icbc26-news .row-article-content .nx-tablets {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  margin: 20px 0 10px;
}
.icbc26-news .row-article-content .nx-confirmed,
.icbc26-news .row-article-content .nx-heard {
  padding: 20px;
  border-radius: 18px;
}
.icbc26-news .row-article-content .nx-confirmed {
  border: 1px solid rgba(0, 212, 255, 0.22);
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.075), rgba(255, 255, 255, 0.025));
}
.icbc26-news .row-article-content .nx-heard {
  border: 1px dashed rgba(245, 177, 76, 0.55);
  background:
    repeating-linear-gradient(135deg, rgba(245, 177, 76, 0.035) 0 12px, transparent 12px 24px),
    rgba(245, 177, 76, 0.04);
}
.icbc26-news .row-article-content .nx-confirmed h3,
.icbc26-news .row-article-content .nx-heard h3 { margin: 0 0 12px; }
.icbc26-news .row-article-content .nx-confirmed p,
.icbc26-news .row-article-content .nx-heard p,
.icbc26-news .row-article-content .nx-card-copy {
  margin: 0 0 12px;
  color: var(--nx-text);
  font-size: 0.94rem;
  line-height: 1.65;
}
.icbc26-news .row-article-content .nx-heard p:last-child,
.icbc26-news .row-article-content .nx-confirmed p:last-child { margin-bottom: 0; }
.icbc26-news .row-article-content .nx-heard p.nx-update {
  padding-top: 12px;
  border-top: 1px dashed rgba(245, 177, 76, 0.35);
  color: #f7c477;
  font-weight: 700;
}
.icbc26-news .row-article-content .nx-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 4px 0 16px;
  padding: 0;
  list-style: none;
}
.icbc26-news .row-article-content .nx-track li {
  position: relative;
  padding: 26px 14px 0 0;
}
.icbc26-news .row-article-content .nx-track li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.8), rgba(0, 212, 255, 0.25));
}
.icbc26-news .row-article-content .nx-track li:last-child::before {
  background: repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.45) 0 6px, transparent 6px 11px);
}
.icbc26-news .row-article-content .nx-track li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--nx-cyan);
  background: #071019;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
}
.icbc26-news .row-article-content .nx-track li:first-child::after { background: var(--nx-cyan); }
.icbc26-news .row-article-content .nx-track b {
  display: block;
  color: var(--nx-cyan);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.icbc26-news .row-article-content .nx-track span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.4;
}

/* Small "checked on" line */
.icbc26-news .row-article-content .nx-checked {
  margin: 28px 0 0;
  color: var(--nx-muted);
  font-size: 0.88rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .icbc26-news .row-article-content .nx-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .icbc26-news .row-article-content .nx-tablets { grid-template-columns: 1fr; }
  .icbc26-news .row-article-content .nx-rowkeys { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .icbc26-news .row-article-content .nx-ways,
  .icbc26-news .row-article-content .nx-pair,
  .icbc26-news .row-article-content .nx-readings,
  .icbc26-news .row-article-content .nx-rowsets,
  .icbc26-news .row-article-content .nx-tools,
  .icbc26-news .row-article-content .nx-instant-grid { grid-template-columns: 1fr; }

  .icbc26-news .row-article-content .nx-sections { gap: 10px; }
  .icbc26-news .row-article-content .nx-sheet-hint { flex-wrap: nowrap; }
  .icbc26-news .row-article-content .nx-ex { padding: 16px 14px; }
  .icbc26-news .row-article-content .nx-lane { padding: 10px; }
  .icbc26-news .row-article-content .nx-lane-chips { gap: 5px; }
  .icbc26-news .row-article-content .nx-chip { gap: 6px; font-size: 0.8rem; }
  .icbc26-news .row-article-content .nx-chip--new { padding: 5px 5px 5px 8px; }
  .icbc26-news .row-article-content .nx-chip i { min-width: 22px; height: 22px; }
  /* The glance card is taller than the template's 130px allowance; keep the meta pills visible. */
  .icbc26-news .row-article-hero-content { padding-bottom: 206px; }
  .icbc26-news .row-article-content .nx-sec { padding: 14px 13px 13px; }
  .icbc26-news .row-article-content .nx-sec p.nx-sec-copy { font-size: 0.8rem; }

  .icbc26-news .row-article-content .nx-sheet { margin-left: -4px; margin-right: -4px; }
  .icbc26-news .row-article-content .nx-prow { grid-template-columns: minmax(0, 1fr) 28px repeat(5, 31px); }
  .icbc26-news .row-article-content .nx-pname { padding: 9px 8px; font-size: 0.76rem; }
  .icbc26-news .row-article-content .nx-ppts { font-size: 0.76rem; }
  .icbc26-news .row-article-content .nx-box { min-height: 40px; font-size: 0.86rem; }

  .icbc26-news .row-article-content .nx-opinion { margin-top: 38px; padding: 22px 18px 20px; }
  .icbc26-news .row-article-content .nx-opinion::before { font-size: 5.5rem; right: 14px; }

  /* Comparison table stacks into cards */
  .icbc26-news .row-article-content .nx-table thead { display: none; }
  .icbc26-news .row-article-content .nx-table,
  .icbc26-news .row-article-content .nx-table tbody,
  .icbc26-news .row-article-content .nx-table tr,
  .icbc26-news .row-article-content .nx-table th,
  .icbc26-news .row-article-content .nx-table td { display: block; width: 100%; }
  .icbc26-news .row-article-content .nx-table tbody tr { padding: 4px 0 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .icbc26-news .row-article-content .nx-table tbody th { width: 100%; padding: 12px 16px 4px; border-top: 0; }
  .icbc26-news .row-article-content .nx-table td { padding: 6px 16px; border-top: 0; background: none; }
  .icbc26-news .row-article-content .nx-table td:last-child { background: none; }
  .icbc26-news .row-article-content .nx-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--nx-muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .icbc26-news .row-article-content .nx-table td:last-child::before { color: var(--nx-cyan); }
}

@media (max-width: 420px) {
  .icbc26-news .row-article-content .nx-track { grid-template-columns: 1fr; gap: 6px; }
  .icbc26-news .row-article-content .nx-track li { padding: 0 0 12px 26px; }
  .icbc26-news .row-article-content .nx-track li::before { left: 6px; right: auto; top: 16px; bottom: -2px; width: 2px; height: auto; }
  .icbc26-news .row-article-content .nx-track li:last-child::before { display: none; }
  .icbc26-news .row-article-content .nx-track li::after { top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .icbc26-news .row-article-content .nx-tip,
  .icbc26-news .row-article-content .nx-tool { transition: none; }
}


/* ---------- review fixes 2, 2026-10-23 ---------- */

/* The cell after the Observation F is not a tally box: hatched and inert, as in the Q&A version. */
.icbc26-news .row-article-content .nx-void {
  background: repeating-linear-gradient(135deg, rgba(26, 32, 48, 0.09) 0 4px, transparent 4px 8px);
  cursor: default;
}

/* Hero mini card on phones: the fifth tile spans both columns instead of sitting next to an empty slot. */
@media (max-width: 480px) {
  .icbc26-news .row-sheet-mini-row:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}


/* ---------- polish round, 2026-10-23 ---------- */

/* Hero mini card on tablets: five tiles share one row, so the 46px value column left the labels about 55px and
   "In use from" and "Demerit limit" broke over two lines. The value column now takes only the width it needs. */
@media (min-width: 481px) and (max-width: 768px) {
  .icbc26-news .row-sheet-mini-row { grid-template-columns: minmax(24px, auto) minmax(0, 1fr); }
}

/* Hero mini card between phone and tablet widths: auto-fit left the fifth tile alone on its row (3 + 2 with an empty
   slot, or 4 + 1). Three tiles on top and two wider ones below instead. At 768px all five fit in one row. */
@media (min-width: 481px) and (max-width: 767px) {
  .icbc26-news .row-sheet-mini-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .icbc26-news .row-sheet-mini-row { grid-column: span 2; }
  .icbc26-news .row-sheet-mini-row:nth-child(n+4) { grid-column: span 3; }
}

/* Hero mini card on small laptops and tablets in landscape (769-919px): the card is 240-290px wide, so the third
   column ("2 on hazard row", "for the debrief") squeezed the labels onto two lines. The extra detail is dropped there,
   as it already is on phones. */
@media (min-width: 769px) and (max-width: 919px) {
  .icbc26-news .row-sheet-mini-row { grid-template-columns: 46px minmax(0, 1fr); }
  .icbc26-news .row-sheet-mini-row em { display: none; }
}

/* ---------- re-check fixes, 2026-10-23 ---------- */

/* Hero mini card: the labels now carry the qualifiers ("Most marks", "Debrief minutes"), so they have to stay on one
   line wherever the card is shown. */

/* Phones: the empty third column and its gap left "In use from", "Demerit limit" and "Most marks" 61px at 360px, and
   they broke over two lines. Two columns, the value column as wide as "Oct 19". The fifth tile spans the card, so it
   has room for its detail too: "drive not longer". */
@media (max-width: 480px) {
  .icbc26-news .row-sheet-mini-row { grid-template-columns: 40px minmax(0, 1fr); }
  .icbc26-news .row-sheet-mini-row:last-child:nth-child(odd) { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .icbc26-news .row-sheet-mini-row:last-child:nth-child(odd) em { display: block; }
}

/* 768px (iPad portrait), five tiles in one row: equal tiles left "Debrief minutes" 1px short. The tiles take their
   content width instead, and the spare room is shared out. */
@media (min-width: 768px) and (max-width: 768px) {
  .icbc26-news .row-sheet-mini-grid { grid-template-columns: repeat(5, auto); }
}

/* Where the card is about 300px wide or less (920-1023px, and 1181-1299px next to both sidebars), the third column
   squeezed "Debrief minutes" and "Most marks" onto two lines. The extra detail is dropped there, as at 769-919px. */
@media (min-width: 920px) and (max-width: 1023px), (min-width: 1181px) and (max-width: 1299px) {
  .icbc26-news .row-sheet-mini-row { grid-template-columns: 46px minmax(0, 1fr); }
  .icbc26-news .row-sheet-mini-row em { display: none; }
}
/* Assembly fix: on phones the comparison table is display: block, which left its caption one word wide
   ("Side / by / side"). */
@media (max-width: 768px) {
  .icbc26-news .row-article-content .nx-table caption { display: block; width: 100%; padding-bottom: 4px; }
}
/* @end news */