/* Light skin for the pre-2026 blocks — 2026-09-22.
 *
 * The site's base layer (base/modules/chrome.css) is a LIGHT design; the dark
 * look comes from theme-dashboard.css, which light pages do not load. So a
 * converted page is already close: what is left is the handoff's own measures.
 * Loaded after vnce.css on pages whose Page chrome > Page style is "vnce", so
 * every rule here is scoped to .vnce and the dark pages are untouched.
 *
 * Only blocks with no vn-* equivalent need this (card-grid, split-pair,
 * rich-text, illustration, arch-stack, stat-row, app-mockup, matrix…);
 * hero/faq/cta/steps/timeline are re-seeded as vn-* blocks instead.
 */

/* Accents: the dashboard maps the old mint/forest family onto the blue; light
   pages need the same mapping or the green comes back (app chips, check marks,
   .surface-forest). */
body.vnce {
	--mint: var( --blue, #007bff );
	--mint-bright: #58aaff;
	--mint-soft: rgba( 0, 123, 255, 0.34 );
	--mint-wash: rgba( 0, 123, 255, 0.14 );
	--forest: #007bff;
	--shadow-mint: none;
	/* base.css keeps the old emerald as --accent-rgb; everything built on
	   rgba( var( --accent-rgb ), … ) turns green without this. */
	--accent-rgb: 0, 123, 255;
}

/* One chip hardcodes the emerald instead of the token (appui.css:182). */
main.vnce .app-chip.on {
	border-color: rgba( 0, 123, 255, 0.5 );
}

/* Container: the handoff's .vw is 1320px, the site's .wrap/.wrap-wide 1440. */
main.vnce :is( .wrap, .wrap-wide ) {
	max-width: 1320px;
	padding-inline: clamp( 20px, 4vw, 48px );
}

/* Type: body copy at the handoff's 16px/1.6, card titles at 600.
   Scoped to .wrap/.wrap-wide — the pre-2026 containers. The VN blocks use .vw,
   and an unscoped rule here beat their own sizes: it shrank .vn-quote from
   52px to 16px (and with it the em-based measure, from 708px to 219px). */
main.vnce :is( .wrap, .wrap-wide ) :is( p, li, dd, dt, figcaption ) {
	font-size: 16px;
	line-height: 1.6;
}

main.vnce :is( .card, .panel, .cell, .tile, .step, .layer ) h3 {
	font-weight: 600;
	letter-spacing: -0.02em;
}

main.vnce .sec-title {
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 0.98;
}

main.vnce .eyebrow,
main.vnce .sec-chip {
	color: var( --blue, #007bff );
}

/* Dark bands: on a light page the old .surface-dark / .surface-forest sections
   become the handoff's paper. Deliberately dark surfaces — admin mockups, code
   blocks, terminals, the dark VNCE panes — keep their own background because
   they are UI, not a section wrapper. */
main.vnce section:is( .surface-dark, .surface-forest ) {
	background: var( --paper, #f8f8f8 );
	color: var( --ink, #1d1d1d );
}

main.vnce section:is( .surface-dark, .surface-forest ) :is( h2, h3, h4, .sec-title, .stat .num ) {
	color: var( --ink, #1d1d1d );
}

main.vnce section:is( .surface-dark, .surface-forest ) :is( p, li, .sec-sub, .stat .lbl ) {
	color: var( --ink-2, #4a4a4a );
}

main.vnce section:is( .surface-dark, .surface-forest ) :is( .card, .panel ) {
	background: #fff;
	border-color: var( --line, #e3e6e8 );
}

/* Admin mockups stay dark, framed the way the handoff frames its demo: paper
   section, 12px radius, hairline, no heavy shadow. */
main.vnce .app {
	border-radius: 12px !important;
	border: 1px solid var( --line, #e3e6e8 );
	box-shadow: 0 30px 80px rgba( 20, 20, 60, 0.12 );
}

/* Cards: the handoff's radius and hairline, with the .hm-tile hover lift.
   The square corners come from a family rule in modules.css that carries
   !important ("Measured: radius 0" — the pre-2026 design), so restoring the
   handoff's 5-6px needs the same weight. */
main.vnce :is( .card, .card-dark, .glass-quote, .plan, .compare, .ctable, .form-card, .tile, .preview ) {
	border-radius: 6px !important;
	border-color: var( --line, #e3e6e8 );
}

main.vnce :is( .code-block, .code-snip, .lead-box.chat ) {
	border-radius: 5px !important;
}

main.vnce .card-hover:hover {
	transform: translateY( -4px );
	box-shadow: 0 18px 40px rgba( 20, 20, 60, 0.1 );
}

/* Buttons: the site's .btn keeps its shape, but takes the handoff's height,
   radius and weight so it matches a .vbtn on the same page. */
main.vnce :is( .btn, .btn-primary, .btn-ghost, .btn-lime-outline ) {
	/* Same !important flatten as the cards and fields (base.css). */
	border-radius: 5px !important;
	font-weight: 600;
}

main.vnce .btn-lg {
	height: 52px;
	padding: 0 24px;
	font-size: 16px;
}

/* The lime family (#bde763) is hardcoded in modules.css for the architecture
   core layer, doc callouts, code blocks and endpoint methods. The dark theme
   never remapped it, so it is still green on the site today; in the 2026 style
   green is status only, so on light pages it becomes the handoff's blue and
   the blue→violet gradient. */
main.vnce .arch-layer.core {
	background: linear-gradient( 140deg, #007bff, #3f6cff 55%, #6a3bff );
	box-shadow: 0 14px 44px -10px rgba( 0, 123, 255, 0.45 ), 0 0 0 1px rgba( 0, 123, 255, 0.3 );
}

main.vnce .arch-layer.core::after {
	background: radial-gradient( circle, rgba( 189, 178, 255, 0.35 ), transparent 65% );
}

main.vnce .doc-callout {
	background: rgba( 0, 123, 255, 0.1 );
}

main.vnce .cb-tab.active {
	background: rgba( 0, 123, 255, 0.14 );
}

/* The mono green stays inside the dark code blocks only; the endpoint chips
   are handled with the rest of the method chips further down, on light rows. */
main.vnce .code-block .k {
	color: #9fe8c2;
}

main.vnce .code-block {
	box-shadow: 0 30px 80px rgba( 20, 20, 60, 0.18 );
}

/* The hairline-grid family — dark cells separated by 2px seams: .efeat
   (Enterprise features), .featgrid (illustration grid), .steps3 (three-up
   steps), .b2bf (B2B features), .stat4 (quad stats), .cat (component
   catalogue), .tl/.tl4 (timelines), .req (integration requirements), .sd (structured
   data), .flow4 (four-step flow), .pkg (package list), .mods (module index), .clouds (cloud providers) and .flow (release flow). All are deliberately dark spec sheets
   in the pre-2026 design. On a light page they become the handoff's
   card family: white cells on hairline seams, sans copy, mono kept only for
   the eyebrow, and plain blue links. */
main.vnce :is( .featgrid, .steps3, .b2bf, .stat4, .cat, .tl, .tl4, .req, .sd, .flow4, .flow, .pkg, .mods, .clouds ) {
	background: var( --line, #e3e6e8 );
	border-color: var( --line, #e3e6e8 );
	border-radius: 6px;
	overflow: hidden;
}

main.vnce :is( .featgrid, .steps3, .b2bf, .stat4, .cat, .tl, .tl4, .req, .sd, .flow4, .flow, .pkg, .mods, .clouds ) > :is( div, a, li ) {
	background: #fff;
}

main.vnce :is( .efeat, .featgrid, .steps3, .b2bf, .stat4, .cat, .tl, .tl4, .req, .sd, .flow4, .flow, .pkg, .mods, .clouds ) > a:hover {
	background: var( --paper, #f8f8f8 );
}

main.vnce :is( .featgrid, .steps3, .b2bf, .stat4, .cat, .tl, .tl4, .req, .sd, .flow4, .flow, .pkg, .mods, .clouds ) :is( h3, h4, b, strong ) {
	color: var( --ink, #1d1d1d );
}

main.vnce :is( .tl, .tl4 ) .d {
	color: var( --blue, #007bff );
}

main.vnce :is( .featgrid, .steps3, .b2bf, .stat4, .cat, .tl, .tl4, .req, .sd, .flow4, .flow, .pkg, .mods, .clouds ) :is( p, li, span:not( .eb ):not( .tag ) ) {
	color: var( --ink-2, #4a4a4a );
}

main.vnce :is( .featgrid, .steps3, .b2bf, .stat4, .cat, .tl, .tl4, .req, .sd, .flow4, .flow, .pkg, .mods, .clouds ) :is( .eb, .tag, .k ) {
	color: var( --blue, #007bff ) !important;
}

main.vnce :is( .featgrid, .steps3, .b2bf, .stat4, .cat, .tl, .tl4, .req, .sd, .flow4, .flow, .pkg, .mods, .clouds ) :is( h3 i, .tag i ) {
	background: var( --blue, #007bff );
}

/* .win — the "order window" cards above the season-selling mockup (b2b) are
   the same dark card in a row rather than a grid. Same treatment: white card,
   hairline border, ink title, mono detail list in --ink-2 with --mute labels,
   and the eyebrow in blue. */
main.vnce .win > div {
	background: #fff;
	border-color: var( --line, #e3e6e8 );
	border-radius: 6px;
}

main.vnce .win.on > div:first-child {
	border-color: rgba( 0, 123, 255, 0.45 );
}

main.vnce .win .p {
	color: var( --blue, #007bff );
}

main.vnce .win b {
	color: var( --ink, #1d1d1d );
	font-weight: 600;
}

main.vnce .win dt {
	color: var( --mute, #7a7e83 );
}

main.vnce .win dd {
	color: var( --ink-2, #4a4a4a );
}

main.vnce .efeat {
	background: var( --line, #e3e6e8 );
	border-color: var( --line, #e3e6e8 );
	border-radius: 6px;
	overflow: hidden;
}

main.vnce .efeat > a,
main.vnce .efeat > div {
	background: #fff;
}

main.vnce .efeat > a:hover {
	background: var( --paper, #f8f8f8 );
}

/* base.css forces every .tag/.pill/.eyebrow to --slate with !important, so the
   handoff's blue eyebrow needs the same weight. Scoped to this grid: the other
   .tag users are grey labels by design. */
main.vnce .efeat .tag {
	color: var( --blue, #007bff ) !important;
}

main.vnce .efeat .tag i {
	background: var( --blue, #007bff );
}

main.vnce .efeat h3 {
	color: var( --ink, #1d1d1d );
	font-weight: 600;
	letter-spacing: -0.02em;
}

main.vnce .efeat p {
	color: var( --ink-2, #4a4a4a );
}

main.vnce .efeat li {
	font-family: var( --font, inherit );
	font-size: 15px;
	line-height: 1.5;
	color: var( --ink-2, #4a4a4a );
}

main.vnce .efeat li b {
	color: var( --mute, #7a7e83 );
}

main.vnce .efeat .go {
	font-family: var( --font, inherit );
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var( --blue, #007bff );
}

/* .int-logo — the integration directory's cards are flat dark tiles inside a
   hairline grid (integrationer). Same light card treatment. */
main.vnce .int-logo {
	background: #fff;
}

main.vnce .int-logo:hover {
	background: var( --paper, #f8f8f8 );
}

main.vnce .int-logo .hd i {
	background: var( --blue, #007bff );
}

/* The last small labels (key/value keys, breadcrumb trails, meta rows) sit
   between 3.4:1 and 4.1:1. A broad --slate sweep made some of them WORSE,
   because several sit on a tinted chip rather than on white, so they are left
   as they are and listed in the QA notes instead of guessed at. */
main.vnce .int-logo .d {
	color: var( --ink-2, #4a4a4a );
}

main.vnce :is( .int-cat h3, .int-logo .hd ) {
	color: var( --ink, #1d1d1d );
}

/* Code blocks stay dark, but their accents follow the 2026 palette: the
   handoff keeps one mono green (#9FE8C2) inside dark cards and puts everything
   else on blue. The lime keyword colour and the green method chips are the
   pre-2026 accent. */
main.vnce :is( .code-block, .cbx-code ) .k {
	color: #9fe8c2;
}

main.vnce .cb-tab.active {
	color: #58aaff;
}

/* This chip lives on a LIGHT row, so it takes the deep blue on paper, not the
   on-dark #58AAFF (2.3:1 here). The per-method colours below refine it. */
main.vnce :is( .endpoint, .ep, .endpoint-list ) .m {
	background: var( --paper, #f8f8f8 );
	color: var( --blue-h, #0069d9 );
}

/* .ep — the endpoint list (api-nycklar, search-api, erp-api, solaris) is a
   stack of near-black rows in mono. It is content, not a code block, so on a
   light page it becomes white rows on hairline borders with ink mono text;
   only the method chip carries colour: blue to read, blue-deep to write, red
   to delete. The code block beside it stays dark. */
main.vnce .ep > div {
	background: #fff;
	border-color: var( --line, #e3e6e8 );
	border-radius: 5px;
	color: var( --ink, #1d1d1d );
}

main.vnce .ep .m {
	border-radius: 4px;
	background: rgba( 0, 123, 255, 0.12 );
	border-color: rgba( 0, 123, 255, 0.35 );
	color: var( --blue-h, #0069d9 );
}

main.vnce .ep .m.post,
main.vnce .ep .m.put,
main.vnce .ep .m.patch {
	background: rgba( 106, 59, 255, 0.1 );
	border-color: rgba( 106, 59, 255, 0.35 );
	color: var( --violet, #6a3bff );
}

main.vnce .ep .m.del {
	background: rgba( 220, 53, 69, 0.08 );
	border-color: rgba( 220, 53, 69, 0.35 );
	color: #c2323f;
}

main.vnce .ep-terms b {
	color: var( --blue-h, #0069d9 );
}

main.vnce :is( .f-hit, .f-hit i, .f-hit svg ) {
	color: var( --blue, #007bff );
}

/* .stmt-dark — the statement block. Its name is the old design's: muted grey
   display type with a white or blue highlight chip, drawn for a dark ground.
   On light pages it follows the handoff's .vn-stmt instead: ink type at 600,
   with the chip inverted to ink-on-paper and the blue chip kept blue. */
main.vnce .stmt-dark {
	color: var( --ink, #1d1d1d );
	font-weight: 600;
	letter-spacing: -0.045em;
}

main.vnce .stmt-dark .hlw {
	background: var( --ink, #1d1d1d );
	color: #fff;
}

main.vnce .stmt-dark .hlb {
	background: var( --blue, #007bff );
	color: #fff;
}

main.vnce .stmt-dark .hlb .sq {
	background: #fff;
	color: var( --blue, #007bff );
}

/* Blog: article and listings — 2026-09-22.
   Posts, archives, search and 404 follow the light style (hdl_site_is_light).
   The article chrome is the pre-2026 one: display headings in 300 and body
   copy in 300, drawn for the old scale. The handoff sets headings at 600 and
   body at 400, so the article takes those weights and the VNCE measure. */
main.vnce .art-top h1 {
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1.02;
	font-size: clamp( 38px, 5vw, 66px );
}

main.vnce .art-body :is( h2, h3, h4 ) {
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var( --ink, #1d1d1d );
}

main.vnce .art-body h2 {
	font-size: clamp( 26px, 2.6vw, 34px );
	margin-top: 1.6em;
}

main.vnce .art-body h3 {
	font-size: clamp( 20px, 1.9vw, 24px );
	margin-top: 1.3em;
}

main.vnce .art-body :is( p, li ) {
	font-weight: 400;
	font-size: 18px;
	line-height: 1.7;
	color: var( --ink-2, #4a4a4a );
}

main.vnce .art-body a {
	color: var( --blue, #007bff );
	text-underline-offset: 3px;
}

main.vnce .art-body :is( blockquote, .wp-block-quote ) {
	border-left: 2px solid var( --blue, #007bff );
	color: var( --ink, #1d1d1d );
}

/* Dotted rules in the article chrome are drawn for a dark ground. */
main.vnce :is( .art-rel, .art-foot, .art-share, .art-next ) {
	border-color: var( --line, #e3e6e8 );
}

/* Post cards: the blog index block, the archive loop and the related list. */
main.vnce :is( .post, .feature-post, .art-next ) {
	background: #fff;
	border-color: var( --line, #e3e6e8 );
	border-radius: 6px;
}

main.vnce :is( .post, .feature-post ) :is( h2, h3, .ttl ) {
	color: var( --ink, #1d1d1d );
	font-weight: 600;
}

main.vnce :is( .post, .feature-post ) :is( p, .ex ) {
	color: var( --ink-2, #4a4a4a );
}

main.vnce :is( .post, .feature-post ) .cat {
	color: var( --blue, #007bff );
}

/* The article lead keeps its own size but takes the handoff's weight; its
   rule in modules.css carries !important, so this one has to as well. */
main.vnce .art-body .art-lead {
	font-weight: 400 !important;
	font-size: clamp( 19px, 1.6vw, 21px );
	line-height: 1.55;
	color: var( --ink-2, #4a4a4a );
}

/* Forms — 2026-09-22. The dark theme skins fields through
   theme-dashboard.css §15, which light pages never load, so they fall back to
   the browser's own box. These are the same rules in the handoff's light
   values: white field, hairline border, 5px radius, 44px tall, blue focus
   ring. Covers hdl-forms (contact, report gate, newsletter) and the theme's
   own .field markup. */
main.vnce :is( .field input, .field select, .field textarea, .lf-input, .hdl-form__field input, .hdl-form__field select, .hdl-form__field textarea ) {
	min-height: 44px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var( --line, #e3e6e8 );
	/* base.css flattens every control to radius 0 with !important. */
	border-radius: 5px !important;
	color: var( --ink, #1d1d1d );
	font-family: var( --font, inherit );
	font-size: 15px;
}

main.vnce :is( .field textarea, .hdl-form__field textarea ) {
	padding: 12px 14px;
	min-height: 120px;
	line-height: 1.5;
}

main.vnce :is( .field, .hdl-form__field ) :is( input, textarea )::placeholder {
	color: var( --mute, #7a7e83 );
}

main.vnce :is( .field input, .field select, .field textarea, .hdl-form__field input, .hdl-form__field select, .hdl-form__field textarea ):hover {
	border-color: #c9cfd4;
}

main.vnce :is( .field input, .field select, .field textarea, .lf-input, .hdl-form__field input, .hdl-form__field select, .hdl-form__field textarea ):focus {
	outline: none;
	border-color: var( --blue, #007bff );
	box-shadow: 0 0 0 3px rgba( 0, 123, 255, 0.25 );
}

main.vnce :is( .field input.err, .field select.err, .field textarea.err, .hdl-form__field [aria-invalid="true"] ) {
	border-color: #dc3545;
}

main.vnce :is( .field .hint, .hdl-form__error ) {
	font-size: 12.5px;
	color: #c2323f;
}

main.vnce .field label {
	font-size: 12px;
	color: var( --ink, #1d1d1d );
}

main.vnce :is( .form-card, .lead-box ) {
	background: #fff;
	border-color: var( --line, #e3e6e8 );
}

/* Focus ring — 2026-09-22 QA. theme-dashboard.css gives the dark pages a blue
   ring; light pages had only the browser default, which is inconsistent and
   nearly invisible on the blue button. Same ring in light values, on the
   controls the handoff draws: buttons, links, fields, summaries and the
   card-sized links. */
main.vnce :is( a, button, summary, input, select, textarea, .vbtn, .btn, [tabindex] ):focus-visible {
	outline: 2px solid var( --blue, #007bff );
	outline-offset: 2px;
	border-radius: 5px;
}

main.vnce :is( .vbtn.p, .btn-primary, .vbtn.w ):focus-visible {
	outline-color: var( --ink, #1d1d1d );
}

/* Contrast — 2026-09-22 QA, owner decision: adjust the small text, leave the
   headings and the primary button as the handoff draws them.
   #007BFF on white is 3.98:1, which passes AA for large text only; #0069D9
   (the handoff's own hover blue) is 5.2:1. The muted grey #7A7E83 is 3.98:1;
   #6B6F74 is 4.6:1. Both stay inside the palette. */
body.vnce {
	/* 4.6:1 on white was still short of AA on the --paper sections, so one
	   step further: #63676C is 5.0:1 on white and 4.8:1 on #F8F8F8. */
	--mute: #63676c;
	--slate: #5c6572;
}

/* Inline links in content are the brand blue at 15-18px, which needs the
   deeper blue to pass. Buttons keep their own colours. */
main.vnce a:not( .vbtn ):not( [class*="btn" ] ):not( .row ):not( .hm-tile ):not( .int-logo ) {
	color: var( --blue-h, #0069d9 );
}

main.vnce :is( .eb, .sec-chip, .cat, .lk, .go, .tag, .live, .win .p, .tl .d, .tl4 .d, .ep-terms b, .int-cat .ic ) {
	color: var( --blue-h, #0069d9 ) !important;
}

/* Numerals and small links in the content rhythm. */
main.vnce :is( .hm-chap .n, .vn-grid4 .n, .vn-steps .s, .art-body a, .post a, .feature-post a ) {
	color: var( --blue-h, #0069d9 );
}

/* The eyebrow chips (.sec-chip, .cat, .tag) put blue on a grey pill, which
   lands at 4.2:1. The handoff sets its eyebrows as plain blue text with no
   pill at all, so lightening the pill to --paper is both the accessible and
   the closer reading: 4.9:1. Two labels still carried the pre-2026 greys
   directly. */
main.vnce :is( .sec-chip, .cat, .tag ) {
	background: var( --paper, #f8f8f8 );
}

main.vnce :is( .by, .lbl, .meta, .art-foot small ) {
	color: var( --mute, #63676c );
}

main.vnce .int-logo .d {
	color: var( --ink-2, #4a4a4a );
}

/* .ownership — the two "who owns what" columns are dashboard-token cards
   (--hdl-card on --hdl-border), which fall back to their dark defaults on a
   light page. Same card as everywhere else here: white on a hairline, ink
   heading, --ink-2 copy, and the neutral tag on --paper. The "you" column
   keeps its blue border and blue tag. */
main.vnce .own-col {
	background: #fff;
	border-color: var( --line, #e3e6e8 );
}

main.vnce .own-col.you {
	border-color: rgba( 0, 123, 255, 0.35 );
}

main.vnce .own-hd h3 {
	color: var( --ink, #1d1d1d );
	font-weight: 600;
}

main.vnce :is( .own-hd p, .own li span ) {
	color: var( --ink-2, #4a4a4a );
}

main.vnce .own-tag {
	background: var( --paper, #f8f8f8 );
	color: var( --slate, #5c6572 );
}

main.vnce .own-col.you .own-tag {
	background: var( --blue, #007bff );
	color: #fff;
}

main.vnce .own li b {
	color: var( --ink, #1d1d1d );
}

/* Preset palette — 2026-09-22. theme.json's palette is the DARK one (base
   #1D1D1D, contrast #F8F8F8, body-text #DAE0E4), because the dark theme owns
   it. Any pre-2026 component that colours itself with those presets therefore
   renders light-on-white here: .fields on /seo/ was #DAE0E4 on #fff, all but
   invisible. Light pages remap the text presets; the deliberately dark islands
   (admin mockups, code, terminals, gradient panels, dark cards) set them back,
   because inside those the light values are the correct ones. */
main.vnce {
	--wp--preset--color--body-text: #4a4a4a;
	--wp--preset--color--contrast: #1d1d1d;
	--wp--preset--color--muted: #63676c;
	--wp--preset--color--dim: #5c6572;
	--wp--custom--dim: #5c6572;
	--wp--custom--ink: #1d1d1d;
}

main.vnce :is( .app, .dm-term, .code-block, .cbx-code, .osheet, .shop, .win, .vn-pane.dark, .vn-cta, .dm-cta, .vn-gp, .dm-pipe, .arch-layer.core, .hm-flip .ent, .hm-flip .bak, .hm-tile.img, .hm-tile.lt, .hm-tile.grad, .vn-own .us, .dm-seal, .dm-code, .dm-diff ) {
	--wp--preset--color--body-text: #dae0e4;
	--wp--preset--color--contrast: #f8f8f8;
	--wp--preset--color--muted: #b0b6ba;
	--wp--preset--color--dim: #8f8f8f;
	--wp--custom--dim: #8f8f8f;
	--wp--custom--ink: #f8f8f8;
}

/* The entitlement badge (span.ent, e.g. "Endast Enterprise") is drawn in the
   on-dark blue #58AAFF, which is 2.4:1 on white. */
main.vnce span.ent {
	color: var( --blue-h, #0069d9 );
}

main.vnce span.ent i {
	background: var( --blue-h, #0069d9 );
}

/* Method chips outside the .ep list (.endpoint rows on /utvecklare/, /erp-api/
   and /enrichment-api/, the flowmap's live node, admin tags) were still the
   on-dark blue #58AAFF at 2.3:1. Same reading as the endpoint list: blue to
   read, violet to write, red to delete — and the chip itself on --paper so the
   text has a light ground to sit on. */
main.vnce :is( .endpoint, .ep, .endpoint-list ) :is( .m.post, .m.put, .m.patch ) {
	background: rgba( 106, 59, 255, 0.1 );
	color: var( --violet, #6a3bff );
}

main.vnce :is( .endpoint, .ep, .endpoint-list ) .m.del {
	background: rgba( 220, 53, 69, 0.08 );
	color: #c2323f;
}

main.vnce :is( .m.get, .m.read, .m.hook, .fm-node.live, .app-tag, .tag.live ) {
	background: var( --paper, #f8f8f8 );
	color: var( --blue-h, #0069d9 );
}

main.vnce :is( .m.post, .m.put, .m.patch ) {
	background: rgba( 106, 59, 255, 0.1 );
	color: var( --violet, #6a3bff );
}

main.vnce .m.del {
	background: rgba( 220, 53, 69, 0.08 );
	color: #c2323f;
}

/* The statement's text lives in a <p> inside .stmt-dark, and the display
   tracking (-0.045em) is set on the container, so it computes to -2.27px and
   INHERITS as that pixel value. The 16px body rule above then applied it to a
   16px paragraph — about -14% tracking, which overlaps the letters. The
   statement's own paragraphs take the display size back. */
main.vnce .stmt-dark :is( p, span ) {
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}