/* /ncm catalog. Extends recursos.css (loaded first); this file only adds what
   the catalog templates need beyond the editorial guide family, so the two
   surfaces cannot drift apart on shared components.

   ⚠️ LABEL TEXT USES --muted-foreground, NEVER --muted. This design system uses
   shadcn semantics: --muted (#efece4) is a cream SURFACE, and --muted-foreground
   (#615f58) is the text on it. An earlier draft set label colour to var(--muted)
   on Tailwind instincts, which painted every rate-box and stat label cream on a
   cream panel: present in the DOM, invisible on screen, and invisible to every
   text-based check too. Caught only by looking at the rendered page. */

.ncm .ncrumb { font-size: .82rem; color: var(--muted-foreground, #615f58); margin-bottom: .55rem;
  white-space: nowrap; overflow-x: auto; }
.ncm .ncrumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.ncm .ncrumb a:hover { border-bottom-color: currentColor; }
.ncm .ncrumb i { font-style: normal; opacity: .45; margin: 0 .45rem; }

.ncm h1 code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* rate box + CTA. N4: BOTH cards stretch to the row height and the content is
   centred INSIDE the card; HTS gets that from "items-stretch" on the row plus
   "flex flex-col justify-center" on the card, never from a padding constant.
   The C1.3 round hardcoded the resulting 42px ink offset as padding instead,
   which is why our right card stayed at its content height (101px against
   their 221px) while the left one grew. Mechanism here, not its symptom.
   Every metric for .nbox / .nrates / .ncta lives in the identity block below. */
.ncm .nrates { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  border-style: solid; border-color: rgba(0,0,0,.09);
  background: rgba(0,0,0,.015); align-content: center; }
.ncm .nrates span { display: block; font-size: 9.6px; font-weight: 700;
  letter-spacing: .05em; line-height: 14.4px; margin-bottom: 2px;
  text-transform: uppercase; color: var(--muted-foreground, #615f58); }
.ncm .nrates b { font-size: 16px; line-height: 24px; font-weight: 400;
  font-variant-numeric: tabular-nums; }
.ncm .nrates > div:first-child b { font-weight: 600; }
.ncm .nctas { display: grid; gap: 12px; grid-auto-rows: 1fr; }
.ncm .ncta { display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none; border-style: solid; border-color: rgba(0,0,0,.09);
  background: #fff; color: inherit; }
.ncm .ncta:hover { border-color: rgba(0,0,0,.22); }
.ncm .ncta b { display: block; font-size: .95rem; }
.ncm .ncta span { display: block; font-size: .82rem; color: var(--muted-foreground, #615f58); margin-top: .15rem; }

/* market section */
.ncm .nnota { font-size: .95rem; }
/* M2f. The 24/8 split is the whole point: 3x more air above than below, so the
   sentence reads as belonging to the cards under it rather than to the lede
   over it. Specificity has to beat `.gart .nsection > p` (0,3,1), which is why
   this is written as a `.nsection > p.nmeta` rather than a bare class. */
.ncm .gart .nsection > p.nmeta { font-size: 13px; line-height: 19px;
  margin: 24px 0 8px; }
.ncm .nstats { display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); gap: 16px; margin: 0; }
.ncm .nstats > div { border: 1px solid var(--border, rgba(0,0,0,.09));
  border-radius: 14px; padding: 12px 16px; background: rgba(0,0,0,.015);
  display: flex; flex-direction: column; justify-content: center; }
.ncm .nstats span { display: block; font-size: 9.6px; line-height: 14.4px;
  font-weight: 600; letter-spacing: .05em; margin-bottom: 2px;
  text-transform: uppercase; color: var(--muted-foreground, #615f58); }
.ncm .nstats b { font-size: 18px; line-height: 26px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
/* M2d: one muted line per figure, directly under the figures they define.
   Deliberately NOT a bordered box: these are definitions, not a caveat, and the
   box treatment is what M2c just removed from the unit note. */
.ncm .nfoot { list-style: none; margin: 12px 0 0; padding: 0; }
.ncm .nfoot li { font-size: 13px; line-height: 19px; margin-top: 6px;
  padding-left: 14px; position: relative;
  color: var(--muted-foreground, #615f58); }
.ncm .nfoot li::before { content: ""; position: absolute; left: 4px; top: 8px;
  width: 3px; height: 3px; border-radius: 50%; background: currentColor;
  opacity: .55; }

/* M2e: the origin mix as a labelled bar chart. The TRACK is full width on every
   row so the fills share a baseline and can be compared by eye; the percentage
   sits past the end of the track in its own column, which is what keeps a 2%
   share readable. Grid, not flex, so the four columns line up across rows
   whatever the flag and label widths do. */
.ncm .norigchart { margin-top: 20px; }
.ncm .norigttl { font-size: 9.6px; line-height: 14.4px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; margin: 0 0 10px;
  color: var(--muted-foreground, #615f58); }
.ncm .norigchart ul { list-style: none; margin: 0; padding: 0; }
.ncm .norigchart li { display: grid; align-items: center; gap: 10px;
  grid-template-columns: 20px 34px minmax(0, 1fr) 40px; margin-top: 8px; }
.ncm .norigchart li:first-child { margin-top: 0; }
.ncm .oflag { font-size: 15px; line-height: 20px; }
.ncm .oiso { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums;
  color: var(--muted-foreground, #615f58); }
.ncm .obar { display: block; height: 10px; border-radius: 999px;
  background: rgba(0,0,0,.06); overflow: hidden; }
.ncm .obar i { display: block; height: 100%; border-radius: 999px;
  min-width: 2px; }
.ncm .opct { font-size: 13px; line-height: 20px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--muted-foreground, #615f58); }
/* .nsub is deliberately NOT here: its size is declared once, with the other
   .nsection > p rules, at the specificity that actually wins. A second value
   here would read authoritative and lose, which is the failure this file has
   now repeated five times. */
/* .nmeta is a `.nsection > p`, so the body-paragraph rule (15.2px, higher
   specificity) has always won here and the .82rem this used to declare never
   rendered. Deleting the dead value rather than leaving it to look
   authoritative; the RENDERED size is unchanged by C1.6. Whether the window
   line should read quieter than body copy is a design question the work order
   does not rule on, so it is flagged rather than decided here. */
.ncm .nmeta { color: var(--muted-foreground, #615f58); }
.ncm .nsub { color: var(--muted-foreground, #615f58); }

/* code / position lists, shared by leaf, aggregated and hub. STRUCTURE ONLY:
   padding and type belong to each consumer (.nhub .nsibs, .gart .nlist), never
   here, because a shared metric here is a metric every consumer has to
   override and that is how the cascade bit this file three times. */
.ncm .nsibs, .ncm .nex { list-style: none; padding: 0; margin: .6rem 0 0; }
.ncm .nsibs li + li, .ncm .nex li + li { border-top: 1px solid rgba(0,0,0,.07); }
.ncm .nsibs a { display: flex; text-decoration: none; color: inherit; }
.ncm .nsibs a:hover span { text-decoration: underline; }
.ncm .nsibs code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: .7; flex: 0 0 auto; }
.ncm .nsibs span { flex: 1 1 auto; min-width: 0; }
.ncm .nsibs i { font-style: normal; color: var(--muted-foreground, #615f58);
  font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.ncm .nex li { padding: .5rem 0; font-size: .9rem; }

/* ND-3: the catalog code list is a CONTAINER, not a bare <ul>. HTS wraps both
   #child-lines and #related-codes in "rounded-xl border overflow-hidden
   divide-y" and insets every row by px-4, so the rows read as one object and
   the code column starts at 383 rather than flush at the text margin. Measured
   on /hts-catalog/8481.30: container radius 14 / border 1, row py-2.5 px-4,
   row pitch 41.0, and the three cells at text-sm inside a 16px row. */
.ncm .gart .nlist { border: 1px solid var(--border, rgba(0,0,0,.09));
  border-radius: 14px; overflow: hidden; margin: 0; background: #fff; }
.ncm .gart .nlist li + li { border-top-color: var(--border, rgba(0,0,0,.09)); }
.ncm .gart .nlist a { align-items: center; gap: 12px; padding: 10px 16px;
  font-size: 16px; line-height: 24px; }
.ncm .gart .nlist a:hover { background: var(--tint, #faf9f6); }
.ncm .gart .nlist a > * { font-size: 14px; line-height: 20px; }
.ncm .gart .nlist code { color: var(--primary, #3d63d8); opacity: 1; }

/* .nhub h2 metrics live once, on the card-header rule further down; an earlier
   1.05rem here never won on source order and is deleted rather than left to
   look authoritative. */

@media (max-width: 760px) {
  .ncm .nbox { grid-template-columns: 1fr; }
  .ncm .nrates { grid-template-columns: 1fr 1fr; }
  .ncm .nstats { grid-auto-flow: row; }
}


/* --------------------------------------------------------------------------
   METRIC IDENTITY WITH tariffs.tandom.ai (Marcelo, 2026-08-12).
   Only FONTS and COLORS may differ. Every value below was READ OFF THE LIVE
   HTS PAGE (getComputedStyle + the element class lists on
   /hts-catalog/4001.10.00.00), not chosen by eye. The class string that
   produced each value is quoted beside it so a reviewer can re-derive it, and
   so a future Tailwind change on that side is diffable rather than mysterious.
   Contract + parity-gate selector list: NCM_IDENTITY_CONTRACT.md.
   -------------------------------------------------------------------------- */

/* main: "bg-white text-slate-900 pt-[71px]" -> their header is 71px.
   OURS IS NOT 71px, and this is the one place identity is relative to chrome:
   the offset must equal OUR header height or the visual result diverges while
   the number matches. --ncm-header is the single knob; measure and set it. */
.ncm { --ncm-header: 71px; }

/* container: "mx-auto max-w-[1180px] px-5 sm:px-10 py-10 sm:py-14" */
.ncm .csgrid, .ncm .rgrid, .ncm .gwrap {
  max-width: 1180px; margin-inline: auto;
  padding-left: 20px; padding-right: 20px;
}
@media (min-width: 640px) {
  .ncm .csgrid, .ncm .rgrid, .ncm .gwrap {
    padding-left: 40px; padding-right: 40px;
  }
}
.ncm .rgrid, .ncm .csgrid { padding-top: 40px; padding-bottom: 40px; }
@media (min-width: 640px) {
  .ncm .rgrid, .ncm .csgrid { padding-top: 56px; padding-bottom: 56px; }
}

/* grid: "grid grid-cols-1 lg:grid-cols-[220px_minmax(0,1fr)] gap-10 lg:gap-14" */
.ncm .rgrid, .ncm .csgrid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1024px) {
  .ncm .rgrid, .ncm .csgrid {
    grid-template-columns: 220px minmax(0, 1fr); gap: 56px;
  }
}

/* sidebar: "lg:sticky lg:top-28 self-start lg:mt-[5.5rem]" */
.ncm .rside, .ncm .csbar { align-self: start; position: static; width: auto;
  max-height: none; overflow: visible; }
@media (min-width: 1024px) {
  .ncm .rside, .ncm .csbar { position: sticky; top: 112px; margin-top: 88px; }
  .ncm .csbar { margin-top: 0; overflow-y: auto; }
}
.ncm .rside ul, .ncm .csbar ul { display: flex; flex-direction: column;
  list-style: none; margin: 0; padding: 0; }
.ncm .rside ul { gap: 8px; }

/* on-this-page rail link: "block border-l-2 py-1.5 pl-3 text-sm" */
.ncm .rside a {
  display: block; border-left-width: 2px; border-left-style: solid;
  padding: 6px 0 6px 12px; font-size: 14px; line-height: 20px;
  text-decoration: none; transition: color .15s, border-color .15s;
}
/* ND-2: sections-index chapter row, a DIFFERENT component:
   "flex gap-2 px-2 py-1 rounded text-[0.85rem] leading-snug", no stripe. */
.ncm .csbar li a {
  display: flex; align-items: baseline; gap: 8px; border-left-width: 0;
  padding: 4px 8px; font-size: 13.6px; line-height: 18.7px; border-radius: 4px;
  text-decoration: none; transition: color .15s, background-color .15s;
}
/* ND-2: and the group it sits in, "ml-6 mt-1 mb-1.5 border-l pl-2 space-y-0" */
.ncm .csbar details ul { margin: 4px 0 6px 24px; padding: 0 0 0 8px; gap: 0;
  border-left: 1px solid var(--border, rgba(0,0,0,.09)); }

/* H1 TYPE: "text-2xl sm:text-3xl font-bold tracking-tight leading-tight" */
.ncm .gart h1 {
  font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.025em;
}
@media (min-width: 640px) { .ncm .gart h1 { font-size: 30px; line-height: 37.5px; } }
/* H1 MARGINS: per template, on selectors that cannot both match one element.
   HTS uses different values per page class and so do we: the 10-digit page is
   "mt-6 mb-8", the aggregated page is "mb-6" with no top margin (the chip strip
   above it carries the air), the chapter head owns its own spacing. */
.ncm .ncode h1 { margin: 24px 0 32px; }
.ncm .nagg h1 { margin: 0 0 24px; }

/* ND-11: the code renders at the H1's OWN size, and the join carries no
   literal spaces: HTS is `<code>…</code><span class="mx-2">—</span>Title`, so
   the 8px of air on each side is the separator's margin. Ours was 0.95em with
   " — " typed into the markup. ⚠️ Flagged for Marcelo's walk: matching HTS is
   the identity default, and pt-BR typography would normally space a travessão.
   ONE definition of the code's size lives here; the generic `.ncm h1 code`
   rule above keeps only the face and the tint. */
.ncm .gart h1 code { font-size: 1em; letter-spacing: 0.01em; opacity: .72;
  margin-right: 0; }
/* C5: the spaces now live INSIDE the span (H1_SEP), so that extracted text
   reads "01012100 — Cavalos" instead of "01012100—Cavalos". The CSS margin
   that used to create that gap therefore goes to 0, or the air would be
   counted twice. This is a DELIBERATE divergence from HTS, which has the same
   run-together extraction problem: the visual result is unchanged, the
   mechanism moved from margin to text. */
.ncm .gart h1 .h1sep { margin: 0 3.6px; font-weight: 400; opacity: .45;
  font-family: inherit; white-space: pre; }

/* ND-1: the chip strip above the aggregated H1 ("6-digit subheading" on HTS,
   "mt-6 mb-6 flex items-center gap-2 flex-wrap" holding a
   "text-[0.65rem] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded"
   chip). A <p> would not do: its line box takes the 24px strut and the strip
   grows from 19.6px to 24px. */
.ncm .nchip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 24px 0; }
.ncm .nchip span { font-size: 10.4px; line-height: 15.6px; font-weight: 600;
  letter-spacing: .52px; text-transform: uppercase; padding: 2px 6px;
  border-radius: 4px; background: var(--secondary, #f5f3ee);
  color: var(--muted-foreground, #615f58); }

/* breadcrumb: "text-[0.85rem] text-slate-500" */
.ncm .ncrumb { font-size: 13.6px; }

/* section h2: "text-xl font-semibold tracking-tight scroll-mt-24", parent "mb-3" */
.ncm .gart h2, .ncm .nhub h2 {
  font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em;
  margin: 0 0 12px; scroll-margin-top: 96px;
}
/* their subtitle sits inside the mb-3 wrapper: "text-sm text-slate-500 mt-1".
   Its metrics live with the other .nsection > p rules further down, where they
   can win against the body-paragraph rule that targets the same elements. */
.ncm .gart h2:has(+ .nsub) { margin-bottom: 0; }

/* section rhythm: first section "mb-10", the rest "mb-8", all "scroll-mt-24" */
.ncm .gart .nsection { margin: 0 0 32px; scroll-margin-top: 96px; }
/* measured: the CODE page's plain-English section is "mb-10"; the aggregated
   page's is "mb-8" like the rest. Per page class, so one value each. */
.ncm .ncode section.nsection:first-of-type { margin-bottom: 40px; }
.ncm .gart .gfaq { margin: 0 0 32px; scroll-margin-top: 96px; }

/* rate box row: "grid gap-4 md:grid-cols-2 mb-6 items-stretch" */
.ncm .nbox { display: grid; gap: 16px; margin-top: 0; margin-bottom: 24px;
  align-items: stretch; }
@media (min-width: 768px) { .ncm .nbox { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* rate card: "rounded-xl border border-primary/15 bg-primary/5 px-4 py-3".
   ⚠️ rounded-xl on THEIR site computes to 14px, not the 12px Tailwind ships by
   default: their config customises the radius scale. Measured, not read off the
   anatomy doc, which is the whole reason the parity gate exists. */
.ncm .nrates { border-radius: 14px; border-width: 1px;
  padding: 12px 16px; column-gap: 16px; row-gap: 16px; }
/* ND-1: the aggregated two-card rate box. Same card shell as .nrates, which
   is why the radius/border/padding are repeated from ONE measured source
   ("rounded-xl border border-primary/15 bg-primary/5 px-4 py-3 flex flex-col
   justify-center") rather than invented here. */
.ncm .nrcard { border-radius: 14px; border: 1px solid var(--border, rgba(0,0,0,.09));
  padding: 12px 16px; display: flex; flex-direction: column; justify-content: center;
  background: rgba(0,0,0,.015); }
.ncm .nrcard + .nrcard { background: #fff; }
.ncm .nrlabel { font-size: 9.6px; line-height: 14.4px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; margin: 0 0 2px;
  color: var(--muted-foreground, #615f58); }
.ncm .nrcard + .nrcard .nrlabel { margin-bottom: 4px; }
.ncm .nrvalue { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0;
  font-variant-numeric: tabular-nums; }
.ncm .nrsub { font-size: 12px; line-height: 16px; margin: 4px 0 0;
  color: var(--muted-foreground, #615f58); }
.ncm .nrcov { font-size: 14px; line-height: 20px; margin: 0; }
.ncm .nrcov b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ncm .nrcov i { font-style: normal; opacity: .45; margin: 0 8px; }
.ncm .nrup { font-size: 12px; line-height: 16px; margin: 8px 0 0;
  color: var(--muted-foreground, #615f58); }
.ncm .nrup a { color: inherit; text-decoration: none; }
.ncm .nrup a:hover { color: var(--primary, #3d63d8); }
.ncm .nrup code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* CTA banner: "p-6 min-h-[200px]" when it is alone, and the compact "p-4" pair
   ("grid grid-rows-2 gap-3") when a second banner stacks under it. */
.ncm .ncta { border-radius: 14px; border-width: 1px; padding: 24px; min-height: 200px; }
.ncm .nctas:has(.ncta + .ncta) .ncta { padding: 16px; min-height: 0; }

/* table: wrap "rounded-xl border overflow-hidden"; table "w-full text-base";
   th "py-2.5 px-4 text-[0.65rem] font-semibold uppercase tracking-wider";
   body "divide-y" -> 1px row rules */
.ncm .gtable { border-radius: 14px; border-width: 1px; border-style: solid;
  overflow: hidden; margin: 0; }
.ncm .gtable table { width: 100%; font-size: 16px; border-collapse: collapse; margin: 0; }
.ncm .gtable th { text-align: left; padding: 10px 16px; font-size: 10.4px;
  line-height: 15.6px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; border-bottom-width: 1px; border-bottom-style: solid; }
/* N3: a numeric column is right-aligned in the HEADER as well as the body, so
   the header sits over its own values ("text-right py-2.5 px-4" on their Rate
   th). A left header above right values is the mismatch the review caught. */
.ncm .gtable th.num { text-align: right; }
.ncm .gtable td { padding: 10px 16px; border-top-width: 1px; border-top-style: solid; }
.ncm .gtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* the inner scroller HTS puts INSIDE the radius container */
.ncm .gtscroll { overflow-x: auto; }
.ncm .nsection > .gtable td:nth-child(odd) { font-size: 16px; line-height: 24px; }
.ncm .nsection > .gtable td:nth-child(even) { font-size: 14px; line-height: 20px; }

/* --------------------------------------------------------------------------
   C1 design review (Marcelo, 2026-08-12): the catalog FOLLOWS tariffs.tandom.ai,
   not the /recursos editorial family. These are data pages, not essays, so the
   guide aesthetic was the wrong parent. HTS_CATALOG_ANATOMY.md is the FORMATTING
   source from here, not only the structural one. Site chrome (header, footer)
   stays Fraunces; catalog page INTERNALS do not.
   -------------------------------------------------------------------------- */

/* F5: type scale. The guide scale (Fraunces, clamp 28-44px serif) reads enormous
   on a page whose job is a rate and a table. HTS scale instead: H1 24/30px bold
   tracking-tight, section headings 20px semibold. */
/* FACE ONLY, and the face is OURS (Marcelo, C1.2: "use our fonts... but keep the
   font sizes and spacing consistent with the hts catalog"). Site canon for
   headings is Fraunces at opsz 26 / weight 530, per partials/shell-css.html:7
   and recursos.css. Every METRIC for these elements, letter-spacing included,
   is defined once in the identity block above and stays at the measured HTS
   value. An earlier revision of this rule also set letter-spacing and won on
   source order, which is how -0.6px/-0.4px survived under a block claiming
   -0.75px/-0.5px. Face here, metrics there, never both. */
.ncm .gart h1,
.ncm .nhubmain h1,
.ncm .gart h2,
.ncm .gart h3,
.ncm .nhub h2 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 26;
  font-weight: 530;
}
/* Body, tables, labels and the section index stay Inter at HTS metrics; the
   code digits stay mono. Only HEADINGS take the serif. */
.ncm .gart, .ncm .gtable, .ncm .csbar, .ncm .nlede, .ncm .nbrowse,
.ncm .nrates, .ncm .ncta, .ncm .ncrumb {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}
/* Every h3 on this surface now declares its own size (guide card 16px,
   position card 16px, FAQ question 15.2px), so the 1rem here only looked
   authoritative while losing on specificity. Weight is the one thing all three
   share and stays as the single declaration. */
.ncm .gart h3 { font-weight: 600; }

/* F4: the SectionHeading contract, one visual definition for every section.
   Sections were butting against each other and the subtitle floated loose. */
.ncm .gart .nsection > p { font-size: 15.2px; line-height: 1.625; }
/* The subtitle is also a `.nsection > p`, so its metrics must be declared at a
   specificity that actually wins. This is the ONE definition of them. */
.ncm .gart .nsection > p.nsub { font-size: 14px; line-height: 20px;
  margin: 4px 0 12px; }
/* ND-5: HTS closes the plain-English section with a quiet primer link,
   "mt-3 text-[0.85rem] text-slate-500". */
.ncm .gart .nsection > p.nprimer { font-size: 13.6px; line-height: 20.4px;
  margin: 12px 0 0; }
.ncm .nprimer a { color: var(--muted-foreground, #615f58); text-decoration: none; }
.ncm .nprimer a:hover { color: var(--primary, #3d63d8); }

/* F4: table treatment, applied to every catalog table including Medidas de
   defesa comercial, which was rendering as unstyled text rows. */
.ncm .gtable thead { background: var(--secondary, #f5f3ee); }
.ncm .gtable tbody tr:hover { background: var(--tint, #faf9f6); }
.ncm .gtable td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* F1/F2/F3: the catalog sidebar, the sections/chapters index the hub and the
   capítulo pages both carry. Its own scroll region, one section open at a time
   by default with the current one pre-opened. */
/* index label: "text-[0.65rem] font-semibold uppercase tracking-wider px-2 mb-2" */
.ncm .csbar > b { display: block; font-size: 10.4px; line-height: 15.6px;
  font-weight: 600; letter-spacing: .52px; text-transform: uppercase;
  color: var(--muted-foreground, #615f58); margin-bottom: 8px; }
.ncm .csbar summary { cursor: pointer; list-style: none; }
.ncm .csbar summary::-webkit-details-marker { display: none; }
/* Colour and flex only. The TYPE metrics for the index item live once, in the
   DEFECT 7 block below; carrying a second copy here won on specificity
   (`.ncm .csbar summary .stitle` beats `.ncm .csbar .stitle`) and quietly kept
   the item at 12.8px/16.64px under a block that claimed 13.6/18.7. Fourth
   cascade-order incident in this file: the loser is deleted, not overridden. */
.ncm .csbar summary .stitle { color: var(--foreground, #0a0a0a); flex: 1 1 auto; }
.ncm .csbar li a:hover { color: var(--foreground, #0a0a0a);
  background: var(--tint, #faf9f6); }
.ncm .csbar li a.on { color: var(--primary, #3d63d8); font-weight: 600; }

/* F2: hub section cards, with the blue section eyebrow.
   Every metric below was read off the live hub card at 1280px on 2026-08-13:
   details "rounded-lg border bg-white mb-3" -> 10px radius, 12px gap (N13);
   summary "px-4 sm:px-5 py-3.5" -> 14/20 padding, a 71.6px header block (27)
   and a 417px content inset (N10); eyebrow "text-[0.7rem] font-semibold
   uppercase tracking-wider"; h2 "mt-0.5 text-lg font-bold tracking-tight
   leading-snug"; range "text-xs italic"; then the collapse chevron (12). */
.ncm .nhub .nsec { border: 1px solid var(--border, rgba(0,0,0,.09)); border-radius: 10px;
  margin: 0 0 12px; background: #fff; }
.ncm .nhub .seyebrow { display: block; font-size: 11.2px; line-height: 16.8px;
  font-weight: 600; letter-spacing: .56px; text-transform: uppercase;
  color: var(--primary, #3d63d8); margin: 0; }
.ncm .nhub .nsec > summary > .nsecmain > h2 { font-size: 18px; line-height: 24.75px;
  letter-spacing: -0.45px; margin: 2px 0 0; }
.ncm .nhub .nsechead { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; }
.ncm .nhub .nsecmain { min-width: 0; flex: 1 1 auto; }
.ncm .nhub .nsecaside { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.ncm .nhub .nsechead .srange { font-size: 12px; line-height: 16px;
  color: var(--muted-foreground, #615f58); white-space: nowrap; }
.ncm .nhub .nsechead .scaret { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .ncm .csgrid { grid-template-columns: 1fr; }
  .ncm .csbar { position: static; max-height: none; }
}

/* colour only; every metric for these lives in the identity block above */
.ncm .gart .nsub, .ncm .csbar li a { color: var(--muted-foreground, #615f58); }
.ncm .gtable, .ncm .gtable th, .ncm .gtable td { border-color: var(--border, rgba(0,0,0,.09)); }
.ncm .gtable thead { background: var(--secondary, #f5f3ee); }
.ncm .gtable th { color: var(--muted-foreground, #615f58); }
.ncm .csbar { font-size: 14px; }

/* chapter-page controls, mirroring the HTS chapter page (anatomy §6):
   Jump-to-FAQ, Collapse-all, and the About-chapter <details>. Their toolbar row
   is "mb-5 flex items-center justify-between gap-4"; the links are 13.6px. */
.ncm .nchapmain { min-width: 0; }
.ncm .njump, .ncm .ncollapse { font-size: 13.6px; line-height: 20.4px; }
.ncm .njump { text-decoration: none; color: var(--muted-foreground, #615f58); }
.ncm .njump:hover { color: var(--primary, #3d63d8); }
.ncm .ncollapse { background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--primary, #3d63d8); font: inherit; font-size: 13.6px; font-weight: 500; }
.ncm .ncollapse:hover { text-decoration: underline; }
/* N5 + N6: the head is one "header mb-6" block. Overline "mb-2", H1 with NO
   margins of its own (the code page's mt-6/mb-8 is a different template), then
   the description at "mt-3 text-[0.95rem] leading-relaxed" at full measure. */
.ncm .nchaphead { margin-bottom: 24px; }
.ncm .nchapmain h1 { margin: 0; }
.ncm .nchaplede { font-size: 15.2px; line-height: 24.7px; margin: 12px 0 0;
  max-width: none; }
/* N12: ONE rule, under the label. Their About is a bare <details> whose SUMMARY
   carries "pb-1 border-b"; the details itself has no border at all. Ours drew a
   hairline above it as well. */
.ncm .nabout { margin: 0 0 24px; border: 0; border-radius: 0; padding: 0; }
.ncm .nabout summary { cursor: pointer; font-size: 13.6px; line-height: 20.4px;
  font-weight: 600; padding: 0 0 4px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.09)); }
.ncm .naboutbody { margin-top: 12px; }
.ncm .naboutbody p { font-size: 14.72px; line-height: 23.92px; margin: 0 0 12px; }
.ncm .naboutbody p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   HUB. Cloned from the live HTS hub, which has NO hero band and DIFFERENT
   metrics from the detail page: container max-w-6xl (1152px) rather than
   1180px, sidebar 260px rather than 220px, gap-8 rather than gap-10/14. Those
   were measured, not assumed from the detail page.
   -------------------------------------------------------------------------- */
/* "mx-auto max-w-6xl px-5 sm:px-10 py-10" */
.ncm .nhubwrap { max-width: 1152px; margin-inline: auto; padding: 40px 20px; }
@media (min-width: 640px) { .ncm .nhubwrap { padding-left: 40px; padding-right: 40px; } }
/* grid: "grid grid-cols-1 md:grid-cols-[260px_1fr] gap-8". The HUB adds mt-11
   on top of it; the CHAPTER container IS the grid with no offset at all
   (measured: their chapter grid starts at y=111, ours at 155). N5. */
.ncm .nhubgrid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.ncm .nhubpage .nhubgrid { margin-top: 44px; }
@media (min-width: 768px) { .ncm .nhubgrid { grid-template-columns: 260px 1fr; } }
/* "min-w-0 space-y-6" — but the hub's own header stack is tighter than 24px at
   every step, so the gaps are per-child rather than one flex gap. Measured on
   the live hub: H1→lede 8 (mt-2), lede→search 20 (mt-5), search→browse 24
   (header mb-6), browse→cards 24 (mb-6). The single 19px gap this replaces was
   defect 30. */
.ncm .nhubmain { min-width: 0; display: flex; flex-direction: column; }
.ncm .nhubmain > * { margin: 0; }
.ncm .nhubmain > .nlede { margin-top: 8px; }
.ncm .nhubmain > .nsearch { margin-top: 20px; }
.ncm .nhubmain > .nbrowse { margin-top: 24px; }
.ncm .nhubmain > .nhub { margin-top: 24px; }
/* hub H1: 30px/36px, tracking -0.75px, no margins (measured) */
.ncm .nhubmain h1 { font-size: 30px; line-height: 36px; letter-spacing: -0.75px; }
/* "mt-2 text-[0.92rem] leading-relaxed" and "text-[0.95rem] leading-relaxed
   max-w-2xl" respectively */
.ncm .nlede { font-size: 14.72px; line-height: 23.92px; }
.ncm .nbrowse { font-size: 15.2px; line-height: 24.7px; max-width: 672px; }

/* search: "w-full rounded-xl border pl-10 pr-4 py-3 text-base" -> 50px tall,
   16px text, 14px radius, padding 12px 16px 12px 40px (measured) */
.ncm .nsearch { position: relative; }
.ncm .nsearch input { width: 100%; box-sizing: border-box; border-radius: 14px;
  border: 1px solid var(--border, rgba(0,0,0,.09)); background: var(--tint, #faf9f6);
  padding: 12px 16px 12px 40px; font-size: 16px; line-height: 24px; font: inherit;
  font-size: 16px; }
.ncm .nsearch input:focus { outline: 2px solid var(--ring, #5076d6); outline-offset: 1px; }
.ncm .nresults { list-style: none; margin: 6px 0 0; padding: 6px; position: absolute;
  left: 0; right: 0; z-index: 40; background: #fff; border-radius: 14px;
  border: 1px solid var(--border, rgba(0,0,0,.09)); max-height: 340px; overflow-y: auto; }
.ncm .nresults li a { display: flex; gap: 12px; align-items: baseline; padding: 8px 10px;
  text-decoration: none; color: inherit; border-radius: 8px; font-size: 14px; }
.ncm .nresults li a:hover { background: var(--tint, #faf9f6); }
.ncm .nresults .ccode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--muted-foreground, #615f58); flex: 0 0 auto; }

/* chapter rows inside the sidebar: HTS renders a mono, tabular, small prefix
   ("Ch. 01") then the title. Ours reads "Cap. 01" with the same treatment.
   NOTE: the fix order described that prefix as blue; the live page computes it
   as a muted slate (font-mono tabular-nums text-slate-500 text-sm). Colour is a
   permitted delta, so ours uses the site's muted token; flagged rather than
   silently resolved. */
.ncm .csbar .ccode, .ncm .nsibs .ccode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
  color: var(--muted-foreground, #615f58); }
.ncm .csbar .ccode { font-size: 13.6px; }
.ncm .nsibs .ccode { font-size: 14px; }
.ncm .csbar { width: auto; }
@media (min-width: 768px) { .ncm .csbar { width: 260px; } }


/* --------------------------------------------------------------------------
   ORIGIN SELECTOR. Static: a radio group plus sibling selectors, so the content
   is readable with JS disabled and costs no API call. It is NOT a calculator.
   -------------------------------------------------------------------------- */
.ncm .oselect { border: 1px solid var(--border, rgba(0,0,0,.09)); border-radius: 14px;
  overflow: hidden; }
.ncm .oselect .oradio { position: absolute; opacity: 0; pointer-events: none; }
.ncm .oselect > label { display: inline-block; padding: 10px 16px; font-size: 14px;
  line-height: 20px; cursor: pointer; color: var(--muted-foreground, #615f58);
  border-bottom: 2px solid transparent; }
.ncm .oselect > label:hover { color: var(--foreground, #0a0a0a); }
.ncm .opanels { border-top: 1px solid var(--border, rgba(0,0,0,.09)); padding: 16px; }
.ncm .opanel { display: none; }
/* nth-of-type pairing: radio N selected shows panel N */
.ncm .oradio:nth-of-type(1):checked ~ .opanels .opanel:nth-child(1),
.ncm .oradio:nth-of-type(2):checked ~ .opanels .opanel:nth-child(2),
.ncm .oradio:nth-of-type(3):checked ~ .opanels .opanel:nth-child(3),
.ncm .oradio:nth-of-type(4):checked ~ .opanels .opanel:nth-child(4) { display: block; }
.ncm .oradio:nth-of-type(1):checked + label,
.ncm .oradio:nth-of-type(2):checked + label,
.ncm .oradio:nth-of-type(3):checked + label,
.ncm .oradio:nth-of-type(4):checked + label {
  color: var(--foreground, #0a0a0a); font-weight: 600;
  border-bottom-color: var(--primary, #3d63d8); }
.ncm .oradio:focus-visible + label { outline: 2px solid var(--ring, #5076d6); outline-offset: -2px; }

.ncm .orate { margin: 0 0 8px; font-size: 14px; line-height: 20px; }
.ncm .orate b { font-size: 24px; line-height: 30px; margin-right: 8px;
  font-variant-numeric: tabular-nums; }
.ncm .opending b { font-size: 16px; }
/* State 3a: coverage carried by the agreement's joint schedule, with no rate
   row of our own for this origin. It states COVERAGE, never a number, because a
   number here would be an inference and not a reading. */
.ncm .ocover { margin: 0 0 8px; font-size: 14px; line-height: 20px; }
.ncm .ocover b { font-size: 16px; }
/* R1: the approved copy shape is "Coberto pelo acordo · ACE-18", a middot and
   not a plain space. */
.ncm .ocover i { font-style: normal; opacity: .45; margin: 0 8px; }
/* The two condition lines are SEPARATE blocks on purpose: documentary and
   origin-side are different obligations and a buyer who reads them as one
   concludes the certificate settles it. */
.ncm .ocond { margin: 0 0 6px; padding-left: 12px; font-size: 14px; line-height: 20px;
  border-left: 2px solid var(--border, rgba(0,0,0,.09)); }
.ncm .ocite { margin: 0 0 8px; font-size: 13px; line-height: 19px;
  color: var(--muted-foreground, #615f58); }
/* Agreement-level scope exclusion (used goods and the like). Same family as
   .ocond and .onote by design: it is a limitation on the preference, not an
   alert, and it renders verbatim from the row. Dormant today, so this rule
   matches nothing in the shipped corpus. */
.ncm .oscope { margin: 0 0 8px; font-size: 13px; line-height: 19px;
  color: var(--muted-foreground, #615f58); }
.ncm .onote { margin: 8px 0 0; font-size: 13px; line-height: 19px;
  color: var(--muted-foreground, #615f58); }


/* --------------------------------------------------------------------------
   C1.3 fixes. Measured against the live HTS pages per page TYPE, after the
   C1.2 round wrongly generalised the code page's sticky sidebar to the hub and
   chapter pages, which do not have it.
   -------------------------------------------------------------------------- */

/* DEFECT 5: the HTS sections index is NOT sticky. It is a fixed-height panel
   that scrolls internally and scrolls AWAY with the page:
   md:h-[calc(100vh-71px-1rem)] md:overflow-y-auto md:pr-6 md:border-r.
   Ours was pinned. Overriding the earlier sticky rule for the INDEX only; the
   code page's on-this-page rail keeps whatever that page type actually does. */
@media (min-width: 768px) {
  .ncm .csbar {
    position: static; top: auto; margin-top: 0;
    height: calc(100vh - var(--ncm-header, 71px) - 16px);
    overflow-y: auto; padding-right: 24px;
    border-right: 1px solid var(--border, rgba(0,0,0,.09));   /* DEFECT 6 */
  }
}

/* DEFECT 14: toolbar links sit ON the breadcrumb row, right-aligned, as plain
   text rather than a bordered pill in a row of their own. */
/* Their breadcrumb row is "mb-5 flex items-center justify-between gap-4"; the
   20px belongs to the ROW, so the nav inside it carries none of its own. */
.ncm .ncrumbrow { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; }
.ncm .ncrumbrow .ncrumb { margin-bottom: 0; }
.ncm .ncrumbrow .nchaptools { display: inline-flex; gap: 16px; align-items: center; }

/* DEFECT 15: the section overline above the chapter H1.
   "text-[0.65rem] font-semibold uppercase tracking-wider mb-2" (measured). */
.ncm .noverline { font-size: 10.4px; line-height: 15.6px; letter-spacing: .52px;
  font-weight: 600; text-transform: uppercase;
  color: var(--muted-foreground, #615f58); margin: 0 0 8px; }

/* DEFECT 13: About is a hairline disclosure ROW, collapsed by default, chevron
   on the RIGHT, not a padded bordered card. Metrics for the row live in the
   chapter block above; this rule owns only the flex composition and the glyph,
   which is the same 12px chevron mask HTS rotates on open. */
.ncm .nabout summary { list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 8px; }
.ncm .nabout summary::-webkit-details-marker { display: none; }
.ncm .nabout summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px;
  background: currentColor; opacity: .5; transition: transform .15s;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>') no-repeat center/contain; }
.ncm .nabout[open] summary::after { transform: rotate(90deg); }

/* N1: chapter IA. ONE bordered container ("rounded-xl border overflow-hidden")
   holding a divide-y list of positions, so the container borders run unbroken
   from the first position to the last. Ours were detached rounded cards with
   16px white gaps between them. */
.ncm .nposcards { border: 1px solid var(--border, rgba(0,0,0,.09)); border-radius: 14px;
  overflow: hidden; background: #fff; }
.ncm .nposcard { border: 0; border-radius: 0; }
.ncm .nposcard + .nposcard { border-top: 1px solid var(--border, rgba(0,0,0,.09)); }
.ncm .nposcard > summary { list-style: none; padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.09)); }   /* DEFECT 10 */
.ncm .nposcard > summary::-webkit-details-marker { display: none; }
.ncm .nposcard > summary > h3 { display: flex; align-items: center; gap: 12px;
  font-size: 16px; line-height: 22px; margin: 0; }
.ncm .nposcard > summary code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
.ncm .nposcard .ptitle { flex: 1 1 auto; min-width: 0; }
.ncm .nposcard > summary .scaret { width: 12px; height: 12px; }
.ncm .nposcard .gtable { border: 0; border-radius: 0; }
.ncm .nposcard td.ccode a { text-decoration: none; color: var(--primary, #3d63d8);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* N2 + N14 + N15: the chapter table is ChapterHierarchy, a DIFFERENT component
   from the code page's Ch99 table, and it was measured separately on the live
   chapter page: "w-full table-fixed text-sm" with a 128/auto/80/80/128/80
   colgroup, th "px-4|px-2 py-2 text-sm font-semibold" in SENTENCE case with no
   tracking, td "px-4|px-2 py-1.5 align-top". That yields a 37px header band and
   a 33px one-line row pitch; ours inherited the Ch99 treatment and ran 52px and
   47px. Column count is ours (a permitted data delta); the treatment is not. */
.ncm .nposcard .gtable table { table-layout: fixed; font-size: 14px; line-height: 20px; }
.ncm .nposcard .gtable col.c1 { width: 128px; }
.ncm .nposcard .gtable col.c3 { width: 80px; }
.ncm .nposcard .gtable col.c4 { width: 104px; }
/* The last column takes their 128px "Special" width: at 104 the header wrapped
   to two lines and the band grew from 37px to 56px, which is N14 all over
   again from the other side. */
.ncm .nposcard .gtable col.c5 { width: 128px; }
.ncm .nposcard .gtable th { padding: 8px; font-size: 14px; line-height: 20px;
  font-weight: 600; text-transform: none; letter-spacing: normal;
  color: var(--foreground, #0a0a0a); }
.ncm .nposcard .gtable th:first-child, .ncm .nposcard .gtable th:last-child {
  padding-left: 16px; padding-right: 16px; }
.ncm .nposcard .gtable td { padding: 6px 8px; vertical-align: top;
  border-top-width: 0; border-bottom-width: 1px; border-bottom-style: solid; }
.ncm .nposcard .gtable td:first-child, .ncm .nposcard .gtable td:last-child {
  padding-left: 16px; padding-right: 16px; }
.ncm .nposcard .gtable tbody tr:last-child td { border-bottom-width: 0; }

/* DEFECT 8 + 9: search is fixed-width with a leading magnifier, not full-bleed. */
.ncm .nsearch { max-width: 576px; }
.ncm .nsearch::before { content: ""; position: absolute; left: 14px; top: 50%;
  width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none;
  background: currentColor; opacity: .45;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>') no-repeat center/contain; }

/* DEFECT 11: hub card row dividers are full-bleed, not inset. */
.ncm .nhub .nsec { padding: 0; }
.ncm .nhub .nsechead { border-bottom: 1px solid var(--border, rgba(0,0,0,.09)); }
.ncm .nhub .nsibs { margin: 0; }

/* DEFECT 34: no overline above the on-this-page rail (removed in markup). */


/* --------------------------------------------------------------------------
   C1.3 batch 2: treatment defects 16, 17, 19, 21, 32, 33, 35.
   Values are the reviewer's pixel measurements off the live HTS tiles.
   -------------------------------------------------------------------------- */

/* DEFECT 16: FAQ rows were 36% taller. HTS divider pitch is 46px (measured
   216/262/308 on the chapter page, 87/133/178/224 on the code leaf); ours was
   62.5px. The pitch is set by the summary's own box, so it is fixed there
   rather than by squeezing margins around it. */
/* DEFECT 33: the rules run only BETWEEN rows. HTS puts a border-BOTTOM on every
   row and none on the last (divide-y), so there is no rule above the first row
   and none under the last. Ours drew both, partly because recursos.css already
   gives .gfaq details a bottom border and a top border was added on top of it. */
.ncm .gfaq details { border-top: 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.09)); }
.ncm .gfaq details:last-of-type { border-bottom: 0; }
/* ND-6: the row's height comes from the DETAILS ("group py-3"), not from a
   min-height on the summary, and the summary itself is a bare flex row at
   gap-3. Ours reached a similar pitch with padding + a 44px floor, which is
   the same number by a different mechanism and drifts the moment the question
   wraps. The question is an <h3> at "text-[0.95rem] font-semibold leading-snug"
   (15.2/20.9), the level HTS renders it at; ours was 15px summary text. */
.ncm .gfaq details { padding: 12px 0; }
.ncm .gfaq summary { display: flex; justify-content: space-between;
  align-items: flex-start; gap: 12px; padding: 0; margin: 0; font-size: 16px;
  line-height: 24px; list-style: none; cursor: pointer; }
.ncm .gfaq summary::-webkit-details-marker { display: none; }
.ncm .gfaq summary h3 { font-size: 15.2px; line-height: 20.9px; margin: 0;
  min-width: 0; }
/* DEFECT 17 + ND-6: the disclosure mark is a 12x12 chevron pinned to the right
   edge (x=1178 on their 366..1190 column), not an 18px "\203A" glyph 6.9px
   wide. Same mask as every other chevron on this surface, same 90deg turn. */
.ncm .gfaq .gmark { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 4px;
  background: currentColor; opacity: .5; transition: transform .15s;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>') no-repeat center/contain; }
.ncm .gfaq details[open] .gmark { transform: rotate(90deg); }
/* ND-4: recursos.css clamps .ga to 72ch for the editorial guides, which is
   right there and wrong here: the answer measured 635.9px against HTS's 824,
   and it is the FAQPage answer text, the highest-value block on the page for
   answer engines. It is also a size step small ("mt-2 text-[0.9rem]
   leading-relaxed" = 14.4/23.4) and carries a bottom pad HTS does not have.
   ncm.css extends recursos.css, so the override belongs here; the losing
   declaration is another surface's and cannot simply be deleted. */
.ncm .gfaq .ga { max-width: none; padding: 0; margin-top: 8px;
  font-size: 14.4px; line-height: 23.4px; }
.ncm .gfaq .ga p { margin: 0; }
/* DEFECT 33: HTS separates sections with whitespace, no full-width hairline
   above the FAQ H2 or below the last row. recursos.css also pads .gfaq 22px at
   the top for its rule; with the rule gone the padding is dead space HTS does
   not have. The chapter template's FAQ is the one that carries a gap, "mt-12". */
.ncm .gart .gfaq { border: 0; padding-top: 0; }
.ncm .gart .gfaq > h2 { border: 0; }
.ncm .nchapmain > .gfaq { margin-top: 48px; }
.ncm .nchapmain > .gfaq > h2 { margin-bottom: 8px; }

/* DEFECT 19: breadcrumb separator glyphs differ per page type on HTS and the
   current crumb is not a link. Chapter uses an arrow, code pages a chevron.
   Set per page via the data attribute the generator emits. */
.ncm .ncrumb i { font-style: normal; margin: 0 .45rem; opacity: .45; }
.ncm .ncrumb[data-sep="arrow"] i::before { content: "\2192"; }
.ncm .ncrumb[data-sep="chevron"] i::before { content: "\203A"; }
.ncm .ncrumb a { color: var(--primary, #3d63d8); }
.ncm .ncrumb > span:last-child { color: var(--foreground, #0a0a0a); }

/* DEFECT 21 / N4: the ~42px the reviewer measured off HTS is the ink offset a
   STRETCHED card with centred content produces, not a padding value. Their card
   is px-4 py-3 and grows because the row is items-stretch. Pinning 42px here
   reproduced the number on one card and left the other unstretched, so this
   declaration is deleted and the mechanism lives with .nbox/.nrates above.
   ONE definition per metric: the loser goes, it does not get overridden. */

/* DEFECT 32: HTS pairs every list H2 with a muted count. */
.ncm .gart h2 .ncount { margin-left: 8px; font-weight: 400; font-size: 16px;
  line-height: 24px; color: var(--muted-foreground, #615f58);
  font-variant-numeric: tabular-nums; }

/* DEFECT 35: the rail marks item 1 active at scroll 0 rather than showing no
   active item until the reader scrolls.
   M5 (Marcelo, C1.6): the ACTIVE marker is gold, not --primary. It was the one
   blue thing in a rail whose idle marks are already a faint gold
   (rgba(156,122,32,.22), from recursos.css) and whose hover is already
   --gold1, so the active state was the odd one out in its own component.
   Same posture as the M1 guide stripe: gold1 at full strength, which is also
   what recursos.css's own `.rside a.on` uses. TEXT treatment is untouched:
   colour stays --foreground and the weight stays at the measured 500 (the
   parent stylesheet's 600 is deliberately overridden here and still is). */
.ncm .rside a.on { color: var(--foreground, #0a0a0a); font-weight: 500;
  border-left-color: var(--gold1, #d9a944); }


/* DEFECT 18 + ND-11: the H1 code span and its em-dash join. Both metrics now
   live once, in the identity block above; this note stays because the em-dash
   is a RULED EXCEPTION to the site's no-em-dash rule (Marcelo, 2026-08-13),
   narrowed in the build gate to this one markup fragment. */


/* --------------------------------------------------------------------------
   C1.3 batch 3: defects 7, 20, 23, 24, 25-32. Values measured off the live HTS
   hub and code pages at 1280px.
   -------------------------------------------------------------------------- */

/* DEFECT 7: index item is one line, caret LEFT, no rules between items.
   HTS summary: "flex items-start gap-2 px-2 py-1.5", 16px/24px, no border. */
.ncm .csbar details { border: 0; }
.ncm .csbar summary { display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 8px; border-radius: 6px; font-size: 16px; line-height: 24px; }
.ncm .csbar summary:hover { background: var(--tint, #faf9f6); }
/* The disclosure caret, shared by the index item (10px) and the hub section
   card (14px). One mask, sized per context: HTS uses the same chevron in both. */
.ncm .scaret { flex: 0 0 auto; background: currentColor; opacity: .5;
  transition: transform .15s;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>') no-repeat center/contain; }
.ncm .csbar .scaret { width: 10px; height: 10px; margin-top: 7px; }
.ncm details[open] > summary .scaret,
.ncm details[open] > summary > h3 > .scaret { transform: rotate(90deg); }
/* N11 + DEFECT 7 residual: HTS's item title is 13.6px/18.7px at weight 600
   ("text-[0.85rem] font-semibold leading-snug"), which is what sets the 32.7px
   one-line pitch; ours was 12.8px/16.64px at weight 400 and pitched at 29px.
   The 2px between items is the nav's space-y-0.5. */
.ncm .csbar details + details { margin-top: 2px; }
.ncm .csbar .stitle { font-size: 13.6px; line-height: 18.7px; font-weight: 600; }
.ncm .csbar .stitle b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; margin-right: 6px; }
.ncm .csbar .seyebrow, .ncm .csbar .srange { display: none; }
/* DEFECT 31 + N11: the 8px inset belongs to the LABEL (their "Sections" p is
   px-2) and to the summary (px-2), not to the aside. Carrying it on the aside
   too double-counted it and pushed every caret 8px right of theirs. */
.ncm .csbar > b { padding-left: 8px; }

/* DEFECT 20 + N9: guide cards, HTS treatment: "rounded-lg border p-5" = 10px
   radius, 20px padding, a 4px accent stripe, and inside it a ROW
   ("flex items-start gap-3"): a 36px icon chip WITH ITS GLYPH, then a flex-1
   column of h3 (16/22, 600), summary (mt-2, 14.4/23.4) and the action link
   (mt-4, 14/20, 500). Ours stacked an EMPTY chip above the title, which made
   the card 282px against their 227px and read as a broken image. */
.ncm .gcards .gcard { border-radius: 10px; padding: 20px; position: relative;
  border: 1px solid var(--border, rgba(0,0,0,.09));
  flex-direction: row; align-items: flex-start; gap: 12px; }
.ncm .gcards .gcard::before { content: ""; position: absolute; inset-block: 0; left: 0;
  width: 4px; background: var(--gold1, #d9a944);
  border-radius: 10px 0 0 10px; }
/* M6 (Marcelo, C1.6): the icon chip joins the gold family. The TINT PERCENTAGE
   is unchanged at 10%, so only the hue moves and the soft-tint posture is
   exactly what shipped.
   The GLYPH is NOT --gold1, and that is deliberate. M1 and M5 put gold1 on a
   4px and a 2px bar, where it reads at full strength; here it would be a fine
   18px mark sitting ON a gold tint, and the pair measures 2.01:1 against the
   4.61:1 the blue chip held (#3d63d8 on #eceffb). #8a7440 is the editorial
   gold ink this site already uses for .ghead .eyebrow and the guide rules in
   recursos.css, and on the same tint it measures 4.19:1, which keeps the
   contrast discipline the order asked for. Same family, right weight for the
   job. */
.ncm .gcard .gchip { flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; width: 36px; height: 36px; border-radius: 8px;
  background: color-mix(in srgb, var(--gold1, #d9a944) 10%, transparent); }
.ncm .gcard .gchip::before { content: ""; width: 18px; height: 18px;
  background: #8a7440;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/><path d="M9 13h6M9 17h6"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/><path d="M9 13h6M9 17h6"/></svg>') no-repeat center/contain; }
/* NOT .gbody: recursos.css already owns that name for the guide ARTICLE body
   ("margin: 44px 0 0"), and inheriting it pushed the card text 44px below its
   own chip. A collision, not a cascade bug, but the same class of failure. */
.ncm .gcard .gcbody { flex: 1 1 auto; min-width: 0; }
.ncm .gcard h3 { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0; }
.ncm .gcard p { font-size: 14.4px; line-height: 23.4px; margin: 8px 0 0; }
.ncm .gcard .gopen { display: inline-flex; margin-top: 16px; font-size: 14px;
  line-height: 20px; font-weight: 500; color: var(--primary, #3d63d8); }
.ncm .gcard .gk { display: none; }

/* DEFECT 23 + N7 + N8: the floating scroll cluster, right edge, hub + chapter
   only. ONE 42x122 rounded pill with three 40x40 buttons split by internal
   hairlines, not three detached squares with 6px gaps. Its right offset is
   theirs verbatim: max(1rem, (100vw - 72rem)/2 - 3rem), which parks it in the
   gutter beside the 1152px container and falls back to 16px when there is
   none. It mounts on scroll (N8): present but transparent and inert at the top
   of the page, faded in by ncm.js once the reader moves. */
.ncm .nscroll { position: fixed; z-index: 30;
  right: max(16px, calc((100vw - 1152px) / 2 - 48px));
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column;
  border: 1px solid var(--border, rgba(0,0,0,.09)); border-radius: 14px;
  background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  opacity: 0; pointer-events: none; transition: opacity .2s; }
.ncm .nscroll.on { opacity: 1; pointer-events: auto; }
.ncm .nscroll button { display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
  color: var(--muted-foreground, #615f58); font: inherit; }
.ncm .nscroll button + button { border-top: 1px solid var(--border, rgba(0,0,0,.09)); }
.ncm .nscroll button:first-child { border-radius: 14px 14px 0 0; }
.ncm .nscroll button:last-child { border-radius: 0 0 14px 14px; }
.ncm .nscroll button:hover { color: var(--primary, #3d63d8); background: var(--tint, #faf9f6); }
/* ND-13: HTS ships a visually-hidden label inside each button. Ours carried
   only an aria-label, so the buttons read as empty to anything computing the
   accessible name from content. */
.ncm .nsr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
/* 14px chevron glyphs: up, double-up (recolher tudo), down. */
.ncm .nsi { width: 14px; height: 14px; background: currentColor; }
.ncm .nsi.up { -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>') no-repeat center/contain; }
.ncm .nsi.collapse { -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 11 12 6 17 11"/><polyline points="7 18 12 13 17 18"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 11 12 6 17 11"/><polyline points="7 18 12 13 17 18"/></svg>') no-repeat center/contain; }
.ncm .nsi.down { -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat center/contain; }
@media (max-width: 1100px) { .ncm .nscroll { display: none; } }

/* DEFECT 24: the chapter description filled a ~445px measure inside a
   full-width band; it now sits in the content column like every other block.
   N6 moved it out of the About disclosure entirely (see .nchaplede); the About
   body keeps the same full measure. */
.ncm .naboutbody p { max-width: none; }

/* DEFECT 25-30 + 27 + N10: hub card rhythm, re-measured. Their row is
   "flex items-baseline gap-3 px-4 sm:px-5 py-2.5 text-[0.95rem]" -> 15.2px on a
   22.8px line at 10/20 padding, giving a 42.8px row and a 43.8px pitch; the
   last row is the same as the rest (no trailing pad). The C1.3 round reached
   the 44px pitch with a min-height and then added 12px under the last row,
   which is not what the reference does. */
.ncm .nhub .nsibs li a { padding: 10px 20px; font-size: 15.2px; line-height: 22.8px;
  gap: 12px; align-items: baseline; box-sizing: border-box; }
.ncm .nhub .nsechead { padding: 14px 20px; }
/* DEFECT 28: the chapter range reads italic on HTS. */
.ncm .nhub .srange { font-style: italic; }
/* DEFECT 29: the row code prefix sits in a ~50px mono column, not bare digits. */
.ncm .nhub .nsibs code { display: inline-block; min-width: 50px; font-size: 14px;
  line-height: 20px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums; }