...
), in other cells stays mono; on phones the first column stays put while the table scrolls sideways.
The Prerequisites table (.hm-prereq) and registry panels (.hm-reg) keep their own look. */
:root { --hm-tb-zebra: #eef3fb; --hm-tb-code: #1e3a8a; }
:root[data-scheme="dark"] { --hm-tb-zebra: #1a2850; --hm-tb-code: #a9c1ff; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --hm-tb-zebra: #1a2850; --hm-tb-code: #a9c1ff; } }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) { border-radius: 10px; box-shadow: 0 6px 16px -12px rgba(15,23,42,.4); }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) table { font-size: 0.88rem; line-height: 1.35; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) :is(th, td) { padding: 0.3rem 0.7rem; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) thead th { padding: 0.55rem 0.7rem; font: 700 0.76rem/1.25 var(--wp--preset--font-family--body); letter-spacing: 0.07em; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) tbody tr:nth-child(even) td { background: var(--hm-tb-zebra); }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) tbody td:first-child { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); font: 600 0.88rem/1.35 var(--wp--preset--font-family--body); border-right: 1px solid var(--wp--preset--color--line); border-top-color: var(--wp--preset--color--line); }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) tbody tr:nth-child(even) td:first-child { background: var(--hm-tb-zebra); }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) td code { font: 500 0.78rem/1.3 var(--wp--preset--font-family--mono); color: var(--hm-tb-code); background: none; border: 0; padding: 0; white-space: nowrap; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) td:first-child code { font: inherit; color: inherit; white-space: normal; overflow-wrap: anywhere; }
/* second line in a header cell: In-browser protection(Defender for Cloud Apps) */
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) thead th small { display: block; margin-top: 0.2rem; font-size: 0.85em; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.8; }
@media (max-width: 600px) {
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) table { font-size: 0.84rem; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) :is(th, td) { padding-inline: 0.55rem; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) :is(thead th, tbody td):first-child { position: sticky; left: 0; z-index: 1; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) tbody td:first-child { box-shadow: 4px 0 6px -4px rgba(15,23,42,.18); }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) td:not(:first-child) code { white-space: normal; overflow-wrap: anywhere; font-size: 0.72rem; }
}
/* 1.11.12: screenshot cards (div.hm-shot + div.hm-legend, inline styles in posts) stand out from the page background (Hubert picked option 1 "light-blue caption" 2026-10-19):
clearer frame and soft shadow, caption on the light-blue chip colour with a blue label. !important beats the inline styles in post markup. */
:root { --hm-shot-edge: #c3d0ea; --hm-shot-label: #2f5bb3; }
:root[data-scheme="dark"] { --hm-shot-edge: #2b3b6b; --hm-shot-label: #8fb0ff; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --hm-shot-edge: #2b3b6b; --hm-shot-label: #8fb0ff; } }
.hm-article .wp-block-post-content .hm-shot { border-color: var(--hm-shot-edge) !important; box-shadow: 0 6px 16px -12px rgba(15,23,42,.4) !important; background: var(--wp--preset--color--surface) !important; }
.hm-article .wp-block-post-content .hm-shot .hm-legend { background: var(--hm-pq-area) !important; border-top-color: var(--hm-pq-area-line) !important; color: var(--wp--preset--color--ink); }
.hm-article .wp-block-post-content .hm-shot .hm-legend > div:first-child { color: var(--hm-shot-label) !important; }
/* 1.11.13: console colours in the "In this guide" card (Hubert picked option B, 2026-10-19). guide-route.js copies the colours of the console chip under each step heading. */
.hm-here__subs li.has-console a span { padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--hm-con-bg); color: var(--hm-con-fg); font-weight: 600; }
.hm-here__subs li.is-cur.has-console a span { box-shadow: 0 0 0 1.5px var(--hm-con-fg); }
.hm-here__legend { display: none; flex-wrap: wrap; gap: 0.3rem; margin: 0.1rem 0 0.4rem 1.05rem; }
.hm-here li.is-open > .hm-here__legend { display: flex; }
.hm-here__legend span { padding: 0.18rem 0.45rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.2; }
/* 1.11.14: At a glance product chips follow the console colours (Hubert 2026-10-19): Intune blue, Entra purple, Microsoft 365 / Edge for Business green. */
.hm-chip--entra { color: #5b2d91; }
.hm-chip--m365 { color: #11645a; }
.hm-glance .hm-chip--intune { background: rgba(56,189,248,.2); box-shadow: inset 0 0 0 1px rgba(56,189,248,.5); color: #d6f1ff; }
.hm-glance .hm-chip--entra { background: rgba(139,108,240,.22); box-shadow: inset 0 0 0 1px rgba(164,140,240,.5); color: #ded4ff; }
.hm-glance .hm-chip--m365 { background: rgba(60,194,167,.18); box-shadow: inset 0 0 0 1px rgba(60,194,167,.5); color: #c5f2e7; }
/* 1.11.15: 5-item At a glance (The blog is back): three equal columns, so Next ends at the right edge; In this guide in two equal columns. */
@media (min-width: 601px) {
.hm-article .wp-block-post-content .hm-glance:has(> div:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-article .wp-block-post-content .hm-glance:has(> div:nth-child(5)) + .hm-route-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1rem; padding: 0.7rem 1.1rem 0.8rem; }
.hm-article .wp-block-post-content .hm-glance:has(> div:nth-child(5)) + .hm-route-nav b { grid-column: 1 / -1; margin: 0 0 0.25rem; }
.hm-article .wp-block-post-content .hm-glance:has(> div:nth-child(5)) + .hm-route-nav a + a::before { display: none; }
}
/* 1.11.16: guides with the "In this guide" card keep a 300px left margin for it, so on narrower screens the empty right margin shrinks first; the card hides only below 1100px. */
@media (min-width: 1100px) {
.hm-article.is-layout-constrained:has(.hm-route) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { margin-left: max(300px, calc((100% - 890px) / 2)) !important; margin-right: auto !important; }
}
@media (min-width: 1100px) and (max-width: 1239px) { .hm-here { display: block; } }
/* 1.11.17: dark mode for inline-styled post content (Hubert 2026-10-20): screenshot legends and image captions get light text, green/red comparison cells and their legend words get dark tints. Light mode unchanged. */
:root[data-scheme="dark"] .hm-article .wp-block-post-content .hm-shot .hm-legend { color: #dbe4f5 !important; }
:root[data-scheme="dark"] .hm-article .wp-block-post-content figcaption.wp-element-caption { color: #aab6cf !important; }
:root[data-scheme="dark"] .hm-article .wp-block-post-content td[style*="#e3f4e8"], :root[data-scheme="dark"] .hm-article .wp-block-post-content p > span[style*="#e3f4e8"] { background: rgba(60,194,120,.16) !important; color: #8fe0a8 !important; }
:root[data-scheme="dark"] .hm-article .wp-block-post-content td[style*="#fdecea"], :root[data-scheme="dark"] .hm-article .wp-block-post-content p > span[style*="#fdecea"] { background: rgba(240,90,90,.14) !important; color: #ffa3a3 !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) .hm-article .wp-block-post-content .hm-shot .hm-legend { color: #dbe4f5 !important; }
:root:not([data-scheme="light"]) .hm-article .wp-block-post-content figcaption.wp-element-caption { color: #aab6cf !important; }
:root:not([data-scheme="light"]) .hm-article .wp-block-post-content td[style*="#e3f4e8"], :root:not([data-scheme="light"]) .hm-article .wp-block-post-content p > span[style*="#e3f4e8"] { background: rgba(60,194,120,.16) !important; color: #8fe0a8 !important; }
:root:not([data-scheme="light"]) .hm-article .wp-block-post-content td[style*="#fdecea"], :root:not([data-scheme="light"]) .hm-article .wp-block-post-content p > span[style*="#fdecea"] { background: rgba(240,90,90,.14) !important; color: #ffa3a3 !important; }
}
/* 1.11.20: screenshots use the full text column (Hubert: thumbnails too small). */
.hm-article .wp-block-post-content figure.is-hm-zoom { max-width: 100%; }
.hm-article .wp-block-post-content .hm-shot, .hm-article .wp-block-post-content .hm-pair { max-width: 100% !important; }
/* 1.11.22: registry panels as compact as the code windows (Hubert 2026-10-20: key path was body-sized because code.hm-reg__key inherited 0.875em). */
.hm-article .wp-block-post-content code.hm-reg__key { font-size: 0.78rem; line-height: 1.5; }
.hm-article .wp-block-post-content .hm-reg figure.wp-block-table table { font-size: 0.78rem; line-height: 1.4; }
.hm-article .wp-block-post-content .hm-reg figure.wp-block-table thead th { font-size: 0.72rem; padding-block: 0.4rem; }
.hm-article .wp-block-post-content .hm-reg figure.wp-block-table tbody tr td:nth-child(n) { font-size: 0.78rem; padding-block: 0.3rem; }
@media (max-width: 760px) { .hm-article .wp-block-post-content code.hm-reg__key, .hm-article .wp-block-post-content .hm-reg figure.wp-block-table tbody tr td:nth-child(n) { font-size: 0.74rem; } }
/* 1.11.24: code window labels in the registry-hive cyan (Hubert 2026-10-20); Output label stays quieter. */
.hm-code__lang { color: #7fd9ec; font-weight: 600; }
.hm-code--output .hm-code__lang { color: #b9c7e3; font-weight: 400; }
/* 1.11.25: legend VALUE column starts at 50% of the card on desktop (Hubert 2026-10-21). */
@media (min-width: 782px){
.hm-article .wp-block-post-content .hm-legend > div:nth-child(2) > div{display:grid !important;grid-template-columns:1.25rem minmax(0,50%) auto;column-gap:0.6rem;justify-content:start !important;}
.hm-article .wp-block-post-content .hm-legend > div:nth-child(2) > div:not(:has(> span:nth-child(3))) > span:nth-child(2){grid-column:2 / -1;}
.hm-article .wp-block-post-content .hm-legend > div:nth-child(2) > div > span:nth-child(3){margin-left:0 !important;justify-self:start;}
.hm-article .wp-block-post-content .hm-legend > div:first-child{display:grid !important;grid-template-columns:calc(1.25rem + 0.6rem + 50%) auto;justify-content:start !important;column-gap:0.6rem;}
}
/* 1.11.27: Home link first in the category bar, divider after it on desktop (Hubert 2026-10-21, option C). */
.hm-catbar__link--home { display: inline-flex; align-items: center; gap: 0.4rem; }
.hm-catbar__link--home svg { flex: none; }
@media (min-width: 600px) {
.hm-catbar__link--home { padding-right: 1.4rem; margin-right: -0.2rem; }
.hm-catbar__link--home::before { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 1.1em; transform: translateY(-50%); background: rgba(230, 236, 248, 0.28); }
.hm-catbar__link--home::after { right: 1.4rem; }
}
/* 1.11.28: smaller, sharper home hero video and less space above the kicker on desktop (Hubert 2026-10-21). */
@media (min-width: 782px) {
.hm-hero--art.hm-hero--art { padding-top: 40px !important; padding-bottom: 48px !important; }
}
/* 1.11.31: the smaller video only on wide screens; narrower desktop windows keep the large video (Hubert 2026-10-21). 1.11.33: wide = 1400px and up. */
@media (min-width: 1400px) {
.hm-hero.is-layout-constrained > .hm-hero-media { inset: 50% 0 auto auto; transform: translateY(-50%); width: min(56%, 860px); height: auto; aspect-ratio: 1464 / 628;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in;
mask-image: linear-gradient(to right, transparent 0%, #000 30%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; }
}
/* 1.11.29: smaller home hero title on desktop, 34px max (Hubert 2026-10-21). */
@media (min-width: 782px) {
.hm-hero--art h1 { font-size: clamp(1.8rem, 2.3vw, 2.125rem) !important; max-width: 28ch; }
}
/* 1.11.30: home hero title and intro as wide as the search box on wide screens (Hubert 2026-10-21). */
@media (min-width: 1100px) {
.hm-hero--art h1, .hm-hero--art > p:not(.hm-hero-kicker) { max-width: 760px !important; }
}
/* 1.11.32: narrow desktop windows (782-899px) show the hero video as a dimmed background, as on phones (Hubert 2026-10-21). */
@media (min-width: 782px) and (max-width: 899px) {
.hm-hero.is-layout-constrained > .hm-hero-media { width: 100%; opacity: 0.28; -webkit-mask-image: none; mask-image: none; }
}
/* 1.11.38 (Hubert 2026-10-23): glance chips never wrap; in dark mode the light inline-styled pills (console chips, status pills)
and the TOC step badges and legend copied from them get dark tints. Inline styles win, hence !important. */
.hm-article .wp-block-post-content .hm-glance .hm-chip { white-space: nowrap; }
/* The 1.6.0 glance rule came after the phone rule and kept three narrow columns on phones; stack the items again. */
@media (max-width: 600px) { .hm-article .wp-block-post-content .hm-glance { grid-template-columns: 1fr; } }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#e6edf9"], .hm-here__legend span[style*="230, 237, 249"]) { background: rgba(91,140,245,.24) !important; color: #c9d8ff !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="230, 237, 249"] { --hm-con-bg: rgba(91,140,245,.24) !important; --hm-con-fg: #c9d8ff !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#efe8fa"], .hm-here__legend span[style*="239, 232, 250"]) { background: rgba(34,150,180,.22) !important; color: #a9e1ef !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="239, 232, 250"] { --hm-con-bg: rgba(34,150,180,.22) !important; --hm-con-fg: #a9e1ef !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#e3f2f0"], .hm-here__legend span[style*="227, 242, 240"]) { background: rgba(45,190,170,.2) !important; color: #aef0e4 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="227, 242, 240"] { --hm-con-bg: rgba(45,190,170,.2) !important; --hm-con-fg: #aef0e4 !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#e3f4e8"], .hm-here__legend span[style*="227, 244, 232"]) { background: rgba(60,190,110,.2) !important; color: #b5f0c8 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="227, 244, 232"] { --hm-con-bg: rgba(60,190,110,.2) !important; --hm-con-fg: #b5f0c8 !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#eceff4"], .hm-here__legend span[style*="236, 239, 244"]) { background: rgba(255,255,255,.1) !important; color: #d5dbe6 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="236, 239, 244"] { --hm-con-bg: rgba(255,255,255,.1) !important; --hm-con-fg: #d5dbe6 !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#fdecea"], .hm-here__legend span[style*="253, 236, 234"]) { background: rgba(240,100,100,.2) !important; color: #ffc9c4 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="253, 236, 234"] { --hm-con-bg: rgba(240,100,100,.2) !important; --hm-con-fg: #ffc9c4 !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#fdf0dc"], .hm-here__legend span[style*="253, 240, 220"]) { background: rgba(240,170,60,.2) !important; color: #ffdca3 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="253, 240, 220"] { --hm-con-bg: rgba(240,170,60,.2) !important; --hm-con-fg: #ffdca3 !important; }
/* 1.12.9 (Hubert 2026-10-28, GlassWorm critique Y2): Defender (#fbe9e9/#9b1c1c) and Admin By Request (#fdf3dc/#8a5a00) chips get dark tints too. */
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#fbe9e9"], .hm-here__legend span[style*="251, 233, 233"]) { background: rgba(240,100,100,.2) !important; color: #ffc9c4 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="251, 233, 233"] { --hm-con-bg: rgba(240,100,100,.2) !important; --hm-con-fg: #ffc9c4 !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#fdf3dc"], .hm-here__legend span[style*="253, 243, 220"]) { background: rgba(249,115,22,.22) !important; color: #fdba74 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="253, 243, 220"] { --hm-con-bg: rgba(234,88,12,.2) !important; --hm-con-fg: #ffcf9e !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#e6edf9"], .hm-here__legend span[style*="230, 237, 249"]) { background: rgba(91,140,245,.24) !important; color: #c9d8ff !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="230, 237, 249"] { --hm-con-bg: rgba(91,140,245,.24) !important; --hm-con-fg: #c9d8ff !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#efe8fa"], .hm-here__legend span[style*="239, 232, 250"]) { background: rgba(34,150,180,.22) !important; color: #a9e1ef !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="239, 232, 250"] { --hm-con-bg: rgba(34,150,180,.22) !important; --hm-con-fg: #a9e1ef !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#e3f2f0"], .hm-here__legend span[style*="227, 242, 240"]) { background: rgba(45,190,170,.2) !important; color: #aef0e4 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="227, 242, 240"] { --hm-con-bg: rgba(45,190,170,.2) !important; --hm-con-fg: #aef0e4 !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#e3f4e8"], .hm-here__legend span[style*="227, 244, 232"]) { background: rgba(60,190,110,.2) !important; color: #b5f0c8 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="227, 244, 232"] { --hm-con-bg: rgba(60,190,110,.2) !important; --hm-con-fg: #b5f0c8 !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#eceff4"], .hm-here__legend span[style*="236, 239, 244"]) { background: rgba(255,255,255,.1) !important; color: #d5dbe6 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="236, 239, 244"] { --hm-con-bg: rgba(255,255,255,.1) !important; --hm-con-fg: #d5dbe6 !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#fdecea"], .hm-here__legend span[style*="253, 236, 234"]) { background: rgba(240,100,100,.2) !important; color: #ffc9c4 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="253, 236, 234"] { --hm-con-bg: rgba(240,100,100,.2) !important; --hm-con-fg: #ffc9c4 !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#fdf0dc"], .hm-here__legend span[style*="253, 240, 220"]) { background: rgba(240,170,60,.2) !important; color: #ffdca3 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="253, 240, 220"] { --hm-con-bg: rgba(240,170,60,.2) !important; --hm-con-fg: #ffdca3 !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#fbe9e9"], .hm-here__legend span[style*="251, 233, 233"]) { background: rgba(240,100,100,.2) !important; color: #ffc9c4 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="251, 233, 233"] { --hm-con-bg: rgba(240,100,100,.2) !important; --hm-con-fg: #ffc9c4 !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#fdf3dc"], .hm-here__legend span[style*="253, 243, 220"]) { background: rgba(249,115,22,.22) !important; color: #fdba74 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="253, 243, 220"] { --hm-con-bg: rgba(234,88,12,.2) !important; --hm-con-fg: #ffcf9e !important; }
}
/* 1.11.39 (Hubert 2026-10-23): phones show only Home > Category in the post breadcrumb (the title is the H1 right below). */
@media (max-width: 600px) { .hm-article .hm-crumbs li:last-child:not(:first-child) { display: none; } }
/* 1.11.39: intro ("bridge") sentences a little darker in light mode, lighter in dark mode. */
.hm-article .wp-block-post-content .hm-bridge { color: #3f4b63; }
:root[data-scheme="dark"] .hm-article .wp-block-post-content .hm-bridge { color: #bcc7db; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) .hm-article .wp-block-post-content .hm-bridge { color: #bcc7db; } }
/* 1.11.39 (1.11.41: smaller solid circles, no ring): step lists "1)" render as red numbered circles like the screenshot badges (li.hm-num from the the_content filter). */
.wp-block-post-content ol:has(> li.hm-num) { list-style: none; padding-left: 0; }
.wp-block-post-content li.hm-num { list-style: none !important; position: relative; padding-left: 1.8rem; }
.wp-block-post-content li.hm-num + li.hm-num { margin-top: 0.35rem; }
.wp-block-post-content li.hm-num::before { content: attr(data-n); position: absolute; left: 0.1rem; top: 0.25em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #d62828; color: #fff; font: 700 0.68rem/1.15rem var(--wp--preset--font-family--body, sans-serif); text-align: center; }
/* 1.11.40: "In this guide" line fits six sections on one row on desktop (shorter connectors, slightly smaller labels). */
.hm-article .wp-block-post-content .hm-route-nav { gap: 0.3rem 0.25rem; }
.hm-article .wp-block-post-content .hm-route-nav b { margin-right: 0.15rem; }
.hm-article .wp-block-post-content .hm-route-nav a { gap: 0.35rem; padding-right: 0.4rem; font-size: 0.84rem; }
.hm-article .wp-block-post-content .hm-route-nav a + a::before { width: 7px; margin: 0 0.1rem 0 -0.2rem; }
/* 1.11.40: post cards show categories only as chips under the cover, not again on the image. */
.hm-thumb--cover .hm-thumb__top { display: none; }
/* 1.11.42: long-text tables (figure.hm-stack, e.g. Troubleshooting Symptom/Cause/Fix) become a short list on phones:
first cell bold, the other cells indented with their header as label. Other tables stay tables. */
@media (max-width: 600px) {
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack thead { display: none; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack :is(table, tbody) { display: block; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr { display: block; padding: 0.55rem 0.75rem 0.6rem; border-top: 1px solid var(--wp--preset--color--line); }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr:first-child { border-top: 0; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr td { display: block; position: static; box-shadow: none; border: 0; background: none; padding: 0; font-size: 0.86rem; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr td:first-child { font-weight: 700; margin-bottom: 0.3rem; background: none; border: 0; box-shadow: none; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr td:not(:first-child) { margin-top: 0.25rem; padding-left: 0.7rem; border-left: 3px solid var(--hm-tb-edge); }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr td:not(:first-child)::before { content: attr(data-label) ": "; font-weight: 700; color: var(--wp--preset--color--muted); }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr td[data-label=""]::before { content: none; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr:nth-child(n) td:nth-child(n) { background: none; box-shadow: none; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr:nth-child(even) { background: var(--hm-tb-zebra); }
}
/* 1.11.46: "Get new guides by email" form in the footer (option A, Hubert 2026-10-25), replaces the in-post box. Desktop: grid so the form sits under Topics-Explore, About Me spans both rows. */
@media (min-width: 782px) {
.hm-footer .hm-footer__cols:has(> .hm-fsub) { display: grid !important; grid-template-columns: 40% repeat(3, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--50) !important; row-gap: 30px; }
.hm-footer .hm-footer__cols:has(> .hm-fsub) > .wp-block-column { margin: 0 !important; min-width: 0; }
.hm-footer .hm-footer__cols:has(> .hm-fsub) > .wp-block-column:first-child { grid-row: 1 / span 2; }
.hm-footer .hm-footer__cols > .hm-fsub { grid-column: 2 / -1; }
}
.hm-footer .hm-fsub__title { margin: 0; font: 700 0.85rem/1.3 var(--wp--preset--font-family--display); color: #fff; }
.hm-footer .hm-fsub__text { margin: 0.3rem 0 0; font-size: 0.8rem; color: #a9b7d3; }
.hm-fsub .wp-block-jetpack-subscriptions { margin: 0.75rem 0 0 !important; }
.hm-fsub .wp-block-jetpack-subscriptions__form-elements { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.hm-fsub .wp-block-jetpack-subscriptions form p { margin: 0 !important; display: flex; text-align: left; }
.hm-fsub #subscribe-email, .hm-fsub p[id^="subscribe-email"] { flex: 1 1 220px; min-width: 0; }
.hm-fsub input[type="email"] { width: 100% !important; box-sizing: border-box; margin: 0 !important; padding: 8px 12px !important; font: 400 0.95rem/1.3 var(--wp--preset--font-family--body, inherit) !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,.22) !important; background: rgba(255,255,255,.08) !important; color: #fff !important; }
.hm-fsub input[type="email"]::placeholder { color: #9fb0d6; opacity: 1; }
.hm-fsub input[type="email"]:focus-visible { outline: 2px solid #6c9cff; outline-offset: 2px; }
.hm-fsub button[type="submit"], .hm-fsub .wp-block-button__link { margin: 0 !important; padding: 8px 18px !important; font: 600 0.95rem/1.3 var(--wp--preset--font-family--body, inherit) !important; border: 0 !important; border-radius: 8px !important; background: linear-gradient(135deg, #0b86a6, #4f6df5 55%, #5b3fb5) !important; color: #fff !important; cursor: pointer; white-space: nowrap; }
.hm-fsub button[type="submit"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hm-fsub .wp-block-jetpack-subscriptions__subscount, .hm-fsub .jetpack-memberships-spinner { display: none; }
/* 1.11.45: in a guide whose Configuration steps carry console chips, a step without a console (e.g. "Design decisions") gets the same pill in neutral grey, so its number and title line up with the coloured ones. */
.hm-here__subs:has(li.has-console) li:not(.has-console) a span { padding: 0.05rem 0.4rem; border-radius: 999px; background: #eceff4; color: #334155; font-weight: 600; }
:root[data-scheme="dark"] .hm-here__subs:has(li.has-console) li:not(.has-console) a span { background: rgba(255,255,255,.1); color: #d5dbe6; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) .hm-here__subs:has(li.has-console) li:not(.has-console) a span { background: rgba(255,255,255,.1); color: #d5dbe6; }
}
/* 1.11.48: category banner background from Higgsfield (set inline as --hm-cat-bg), dark on the left for the text. */
.hm-archive-hero.hm-cat-hero[style*="--hm-cat-bg"] { background: linear-gradient(90deg, rgba(4,8,20,.85) 0%, rgba(4,8,20,.6) 50%, rgba(4,8,20,.45) 100%), var(--hm-cat-bg) center / cover no-repeat !important; }
.hm-cat-hero[style*="--hm-cat-bg"] .hm-cat-tile img { box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.6); }
@media (max-width: 781px) {
.hm-archive-hero.hm-cat-hero[style*="--hm-cat-bg"] { background: linear-gradient(90deg, rgba(4,8,20,.85), rgba(4,8,20,.6)), var(--hm-cat-bg) 70% center / cover no-repeat !important; }
}
/* 1.11.50: subscribed visitors get no email field; hide its empty wrapper so the Subscribed button sits on the left. */
.hm-fsub p#subscribe-email:not(:has(input[type="email"])) { display: none !important; }
/* 1.11.51: for subscribers Jetpack renders only p#subscribe-submit.is-link (flex, centred) with a link button; align it left under the text. */
.hm-fsub #subscribe-submit.is-link { display: block !important; text-align: left !important; margin: 0 !important; }
.hm-fsub #subscribe-submit.is-link a { margin: 0 !important; display: inline-block; }
/* 1.12.0: category banner = wide Higgsfield scene with the object inside (no tile), compact height.
The scene sits in a ::before box sized to the full image (no crop), right aligned, its left edge faded out. */
.hm-archive-hero.hm-cat-hero--scene { position: relative; overflow: hidden; isolation: isolate; background: #050a18 !important; min-height: 300px; padding-top: 36px !important; padding-bottom: 36px !important; display: flex; flex-direction: column; justify-content: center; }
.hm-cat-hero--scene::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; height: 100%; aspect-ratio: 3 / 1; max-width: 66%; background: var(--hm-scene) right center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%); }
.hm-cat-hero--scene .hm-cat-tile { display: none; }
@media (min-width: 761px) {
.hm-cat-hero.hm-cat-hero--scene > :not(.hm-cat-tile) { padding-right: 0; }
.hm-cat-hero--scene .wp-block-term-description, .hm-cat-hero--scene .hm-guides-intro { max-width: 620px !important; }
}
@media (max-width: 760px) {
.hm-archive-hero.hm-cat-hero--scene { min-height: 0; display: block; padding-top: 0 !important; padding-bottom: 28px !important; }
.hm-cat-hero--scene::before { position: relative; display: block; width: auto; max-width: none; margin: 0 -24px 6px; aspect-ratio: 7 / 3; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); background-position: center; }
.hm-cat-hero--scene > .hm-crumbs, .hm-cat-hero--scene > h1 { padding-right: 0 !important; }
}
/* 1.12.6: tablet widths 761-980px, keep the description clear of the scene object. */
@media (min-width: 761px) and (max-width: 980px) {
.hm-cat-hero--scene .wp-block-term-description, .hm-cat-hero--scene .hm-guides-intro { max-width: min(620px, 50vw) !important; }
.hm-cat-hero--scene::before { max-width: 58%; }
}
/* 1.13.0 (Hubert 2026-10-28): home hero is a static Higgsfield photo (navy-graphite studio, Mac mini, iPad, iPhone, Windows laptop)
instead of the neon video loop. The image fades into #09121f on its left edge, so it never shows a seam on wide screens. */
.hm-hero--art { background: url(../images/hero.webp?v=1.13.1) right center / auto 104% no-repeat, #09121f !important; }
@media (max-width: 899px) {
.hm-hero--art { background: linear-gradient(90deg, rgba(9, 18, 31, 0.92) 0%, rgba(9, 18, 31, 0.75) 55%, rgba(9, 18, 31, 0.45) 100%), url(../images/hero.webp?v=1.13.1) 78% center / cover no-repeat, #09121f !important; }
}
/* 1.13.0: logo, menu and theme toggle line up with the page content (120px at 1440), as on category pages and cards. */
@media (min-width: 600px) {
.hm-header__inner, .hm-catbar__inner { padding-left: 0 !important; padding-right: 0 !important; }
}
/* 1.13.1 (Hubert 2026-10-28): new hero photo with a front-facing Windows laptop. Between 900 and 1399px the laptop reaches the search box, so a dark fade sits under the text there. */
@media (min-width: 900px) and (max-width: 1399px) {
.hm-hero--art { background: linear-gradient(90deg, rgba(9, 18, 31, 0.96) 0%, rgba(9, 18, 31, 0.88) 48%, rgba(9, 18, 31, 0) 74%), url(../images/hero.webp?v=1.13.1) right center / auto 104% no-repeat, #09121f !important; }
}
/* 1.13.2 (Hubert 2026-10-28): footer keeps its grid and layout; only the navy moves to the hero's steel tone (less saturated, same lightness). */
.hm-footer { background: radial-gradient(ellipse 60% 120% at 85% 0%, rgba(90, 135, 215, 0.22), transparent 60%), linear-gradient(180deg, #0c1a35 0%, #071228 100%) !important; }
/* 1.13.3 (Hubert 2026-10-28, home critique Y1-Y3, phones only). */
@media (max-width: 599px) {
/* Y1: text on solid navy at the top, the device photo shows clearly underneath. */
.hm-hero--art { padding-bottom: 190px !important; background: linear-gradient(180deg, #09121f 0%, #09121f 56%, rgba(9, 18, 31, 0) 68%), url(../images/hero.webp?v=1.13.3) 96% 100% / 160% auto no-repeat, #09121f !important; }
/* Y3: current chip is a calm white pill instead of the cyan gradient. */
.hm-catbar__link.is-current, .hm-catbar .hm-catbar__link--all.is-current { background: #fff; border-color: #fff; color: #0a1430; }
.hm-catbar__link--news.is-current::before { background: #0a1430; }
}
@media (max-width: 560px) {
/* Y2: Copilot & AI tile becomes a horizontal strip (picture left, label right) instead of one oversized tile. */
.hm-topics .hm-topic--ai { display: grid; grid-template-columns: 44% 1fr; align-items: center; column-gap: 1rem; padding: 0 1rem 0 0; }
.hm-topics .hm-topic--ai .hm-topic__art { margin: 0 !important; height: 100%; }
.hm-topics .hm-topic--ai .hm-topic__art img { aspect-ratio: auto; height: 100%; min-height: 96px; }
.hm-topics .hm-topic--ai h3 { margin: 0; }
}
/* 1.13.4 (Hubert 2026-10-28, menu option 4 from Higgsfield board): header in the hero/footer steel tone, category dots in the topic tile colours, All guides as an outlined button, quiet bottom line instead of the neon stripe. */
.hm-header { background: linear-gradient(180deg, #0c1a35 0%, #0a1630 100%) !important; }
.hm-header::after { height: 1px; background: rgba(160, 185, 230, 0.22); box-shadow: none; }
.hm-catbar { background: rgba(255, 255, 255, 0.02); }
.hm-catbar__link[href*="/category/"]:not(.hm-catbar__link--news)::before { content: ""; flex: none; display: inline-block; width: 7px; height: 7px; margin-right: 0.45rem; border-radius: 50%; background: var(--hm-dot, #9fb4d9); vertical-align: 1px; }
.hm-catbar__link[href*="/category/intune/"] { --hm-dot: #38bdf8; }
.hm-catbar__link[href*="/category/windows/"] { --hm-dot: #3b6ff0; }
.hm-catbar__link[href*="/category/macos/"] { --hm-dot: #c9d3e3; }
.hm-catbar__link[href*="/category/ios-ipados/"] { --hm-dot: #9aa3b2; }
.hm-catbar__link[href*="/category/android/"] { --hm-dot: #3ddc84; }
.hm-catbar__link[href*="/category/security/"] { --hm-dot: #f0506e; }
.hm-catbar__link[href*="/category/ai/"] { --hm-dot: #a46bff; }
@media (min-width: 600px) {
.hm-catbar__link::after { background: #7fb0ff; box-shadow: none; }
.hm-header .hm-nav-all > .wp-block-navigation-item__content { padding: 0.4rem 0.95rem; border: 1px solid rgba(160, 185, 230, 0.45); border-radius: 10px; }
.hm-header .hm-nav-all > .wp-block-navigation-item__content::after { display: none; }
.hm-header .hm-nav-all > .wp-block-navigation-item__content:hover { border-color: #fff; }
}
/* 1.13.6 category banners: footer grid (48px) on the black left side, fading out before the photo */
.hm-cat-hero--scene::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(108, 156, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 156, 255, 0.07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 70%); mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 70%); }
/* 1.13.7 News button removed from the header: no divider after All guides */
.hm-header .hm-nav-all::after { display: none; }
/* 1.13.8 banner grid lines take the category colour (very subtle) */
.hm-cat-hero--scene::after { background-image: linear-gradient(color-mix(in srgb, var(--hm-cat) 13%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--hm-cat) 13%, transparent) 1px, transparent 1px); }
/* 1.13.10 desktop: same title height in every category banner + grid line on the content edge */
@media (min-width: 981px) {
.hm-archive-hero.hm-cat-hero--scene { justify-content: flex-start; padding-top: 60px !important; }
.hm-cat-hero--scene::after { background-position: calc(50vw - 600px) 0; }
}
/* 1.13.12 iOS & iPadOS category colour: champagne gold (macOS keeps steel blue) */
.hm-catbar__link[href*="/category/ios-ipados/"] { --hm-dot: #d4b26a; }
.hm-topic--ios { --hm-cat: #d4b26a; }
/* 1.13.15 category chips (post cards, post header, All guides filters) in each category's colour */
:is(.hm-terms a, a.hm-filter)[href*="/category/intune/"] { --hm-tc: #0369a1; --hm-tk: #38bdf8; }
:is(.hm-terms a, a.hm-filter)[href*="/category/windows/"] { --hm-tc: #1e40af; --hm-tk: #1e4fd8; --hm-tcd: #8fb0ff; }
:is(.hm-terms a, a.hm-filter)[href*="/category/macos/"] { --hm-tc: #44597d; --hm-tk: #9fb4d9; --hm-tcd: #c9d3e3; }
:is(.hm-terms a, a.hm-filter)[href*="/category/ios-ipados/"] { --hm-tc: #7d5e14; --hm-tk: #d4b26a; }
:is(.hm-terms a, a.hm-filter)[href*="/category/android/"] { --hm-tc: #0f7a3e; --hm-tk: #3ddc84; }
:is(.hm-terms a, a.hm-filter)[href*="/category/security/"] { --hm-tc: #b4233f; --hm-tk: #f0506e; --hm-tcd: #ff8aa0; }
:is(.hm-terms a, a.hm-filter)[href*="/category/ai/"] { --hm-tc: #6a3bd1; --hm-tk: #a46bff; --hm-tcd: #c4a2ff; }
:is(.hm-terms a, a.hm-filter)[href*="/category/news/"] { --hm-tc: #0e7490; --hm-tk: #7dd3fc; }
:is(.hm-terms a, a.hm-filter:not(.is-active))[href*="/category/"] { color: var(--hm-tc); background: color-mix(in srgb, var(--hm-tk) 13%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hm-tk) 30%, transparent); }
a.hm-filter:not(.is-active)[href*="/category/"]:hover { background: color-mix(in srgb, var(--hm-tk) 24%, #fff); }
:root[data-scheme="dark"] :is(.hm-terms a, a.hm-filter:not(.is-active))[href*="/category/"] { color: var(--hm-tcd, var(--hm-tk)); background: color-mix(in srgb, var(--hm-tk) 16%, #111a2e); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hm-tk) 35%, transparent); }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) :is(.hm-terms a, a.hm-filter:not(.is-active))[href*="/category/"] { color: var(--hm-tcd, var(--hm-tk)); background: color-mix(in srgb, var(--hm-tk) 16%, #111a2e); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hm-tk) 35%, transparent); }
}
/* 1.13.15 macOS menu dot = macOS category colour (was paler than tile and banner) */
.hm-catbar__link[href*="/category/macos/"] { --hm-dot: #9fb4d9; }
/* 1.13.15 phone: Copilot & AI strip tile gets its purple line along the whole bottom edge */
@media (max-width: 560px) {
.hm-topics .hm-topic--ai .hm-topic__art { border-bottom: 0; }
.hm-topics .hm-topic--ai { position: relative; overflow: hidden; }
.hm-topics .hm-topic--ai::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--hm-cat); z-index: 1; pointer-events: none; }
}
/* 1.13.16 (Hubert 2026-10-28): Admin By Request chips move from amber to dark orange (#fdeadb / #9a3412) so they don't look like the iOS gold. Dark mode tint: */
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#fdeadb"], .hm-here__legend span[style*="253, 234, 219"]) { background: rgba(249,115,22,.22) !important; color: #fdba74 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="253, 234, 219"] { --hm-con-bg: rgba(234,88,12,.2) !important; --hm-con-fg: #ffcf9e !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#fdeadb"], .hm-here__legend span[style*="253, 234, 219"]) { background: rgba(249,115,22,.22) !important; color: #fdba74 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="253, 234, 219"] { --hm-con-bg: rgba(234,88,12,.2) !important; --hm-con-fg: #ffcf9e !important; }
}
/* 1.13.17 (Hubert 2026-10-28): console chip colours without editing posts.
Admin By Request: old amber (#fdf3dc) and 1.13.16 orange (#fdeadb) both show as #fdeadb / #a14a0f (orange, not red, not iOS gold).
Entra: violet (#efe8fa / #5b2d91) clashed with the Copilot & AI category, now petrol #dfeef2 / #0e5568.
Google Admin: orange (#fdeee3) matched ABR, now graphite like other non-Microsoft consoles. Dark tints sit in the 1.12.9 / 1.13.16 blocks. */
:is(.wp-block-post-content span[style*="#fdf3dc"], .wp-block-post-content span[style*="#fdeadb"], .hm-here__legend span[style*="253, 243, 220"], .hm-here__legend span[style*="253, 234, 219"]) { background: #ffedd5 !important; color: #ea580c !important; }
.hm-here__subs li.has-console:is([style*="253, 243, 220"], [style*="253, 234, 219"]) { --hm-con-bg: #ffedd5 !important; --hm-con-fg: #ea580c !important; }
/* 1.13.49 (Hubert 2026-10-29, GlassWorm critique): Admin By Request chip in the dark At a glance box, beats the post inline style. */
.wp-block-post-content .hm-chip--abr { background: rgba(249,115,22,.22) !important; border-color: rgba(251,146,60,.8) !important; color: #fdba74 !important; }
:is(.wp-block-post-content span[style*="#efe8fa"], .hm-here__legend span[style*="239, 232, 250"]) { background: #dfeef2 !important; color: #0e5568 !important; }
.hm-here__subs li.has-console[style*="239, 232, 250"] { --hm-con-bg: #dfeef2 !important; --hm-con-fg: #0e5568 !important; }
.hm-chip--entra { color: #0e5568; }
.hm-glance .hm-chip--entra { background: rgba(34,150,180,.22); box-shadow: inset 0 0 0 1px rgba(80,180,210,.5); color: #c9eef7; }
:is(.wp-block-post-content span[style*="#fdeee3"], .hm-here__legend span[style*="253, 238, 227"]) { background: #eceff3 !important; color: #334155 !important; }
.hm-here__subs li.has-console[style*="253, 238, 227"] { --hm-con-bg: #eceff3 !important; --hm-con-fg: #334155 !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#fdeee3"], .hm-here__legend span[style*="253, 238, 227"]) { background: rgba(255,255,255,.1) !important; color: #d5dbe6 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="253, 238, 227"] { --hm-con-bg: rgba(255,255,255,.1) !important; --hm-con-fg: #d5dbe6 !important; }
:root[data-scheme="dark"] .hm-chip--entra { color: #a9e1ef; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#fdeee3"], .hm-here__legend span[style*="253, 238, 227"]) { background: rgba(255,255,255,.1) !important; color: #d5dbe6 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="253, 238, 227"] { --hm-con-bg: rgba(255,255,255,.1) !important; --hm-con-fg: #d5dbe6 !important; }
:root:not([data-scheme="light"]) .hm-chip--entra { color: #a9e1ef; }
}
/* 1.13.17: dark tints for the new chip codes used in new posts (Entra petrol #dfeef2, graphite #eceff3). */
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#dfeef2"], .hm-here__legend span[style*="223, 238, 242"]) { background: rgba(34,150,180,.22) !important; color: #a9e1ef !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="223, 238, 242"] { --hm-con-bg: rgba(34,150,180,.22) !important; --hm-con-fg: #a9e1ef !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#eceff3"], .hm-here__legend span[style*="236, 239, 243"]) { background: rgba(255,255,255,.1) !important; color: #d5dbe6 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="236, 239, 243"] { --hm-con-bg: rgba(255,255,255,.1) !important; --hm-con-fg: #d5dbe6 !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#dfeef2"], .hm-here__legend span[style*="223, 238, 242"]) { background: rgba(34,150,180,.22) !important; color: #a9e1ef !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="223, 238, 242"] { --hm-con-bg: rgba(34,150,180,.22) !important; --hm-con-fg: #a9e1ef !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#eceff3"], .hm-here__legend span[style*="236, 239, 243"]) { background: rgba(255,255,255,.1) !important; color: #d5dbe6 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="236, 239, 243"] { --hm-con-bg: rgba(255,255,255,.1) !important; --hm-con-fg: #d5dbe6 !important; }
}
/* 1.13.18 (Hubert 2026-10-28, final review R1): long names in post text (bundle IDs, OMA-URI paths, URLs) wrap on phones instead of pushing the page sideways. Code blocks keep their own scroll. */
.hm-article .wp-block-post-content :is(p, li, h2, h3, h4, figcaption, blockquote, dd, dt) { overflow-wrap: break-word; }
/* 1.13.18 (Y1): 404 uses the search page hero, then the topic tiles. */
.hm-404-intro { color: #c9d5ec; margin: 0.5rem 0 0; max-width: 62ch; }
.hm-404-hero .wp-block-search { margin-top: 1.1rem; }
/* 1.13.19 (Hubert 2026-10-28): About Me header. Photo + name in a full-width navy hero; the
background art rotates per visit between two images (class set in theme-toggle.js). */
.page-id-90001 .wp-site-blocks { overflow-x: clip; }
.page-id-90001 .hm-main { padding-top: 0 !important; }
.page-id-90001 .hm-main > .wp-block-post-title { display: none; }
.page-id-90001 .hm-main > .wp-block-post-content { margin-top: 0 !important; }
.hm-abx { position: relative; width: 100vw; max-width: none !important; margin: 0 0 var(--wp--preset--spacing--50) calc(50% - 50vw) !important; padding: 64px 24px; background: #011334; color: #fff; }
.hm-abx { --abx-tx: calc(max(24px, 50vw - 600px) + 663px); background: linear-gradient(90deg, rgba(1,19,52,.82) 0, rgba(1,19,52,.82) calc(var(--abx-tx) - 10px), rgba(1,19,52,0) calc(var(--abx-tx) + 70px)), url(../images/about-pyramid.webp) right center / auto 100% no-repeat, #011334; }
.hm-abx__in { max-width: 1200px; margin: 0 auto; display: flex; gap: 32px; align-items: center; }
.hm-abx__ph { width: 184px; height: 184px; object-fit: cover; flex: none; border-radius: 20px; box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(160,190,240,.28); }
.hm-abx__eb { margin: 0 0 6px; color: #7dd3fc; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hm-abx h1 { margin: 0; font-size: 2.6rem; line-height: 1.1; color: #fff; }
.hm-abx__role { margin: .45rem 0 0; font-size: 1.12rem; color: #dbe6f8; font-weight: 600; }
.hm-abx__tag { margin: .35rem 0 0; color: #a9b9d6; font-size: 1rem; max-width: 56ch; }
.hm-abx__btn { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.hm-abx__btn a { padding: 9px 16px; border-radius: 9px; font-weight: 600; font-size: .92rem; text-decoration: none; }
.hm-abx__p { background: linear-gradient(135deg, #0b86a6, #4f6df5 55%, #5b3fb5); color: #fff !important; }
.hm-abx__s { border: 1px solid rgba(200,215,240,.35); color: #e6edf9 !important; }
.hm-abx__btn a:hover { filter: brightness(1.1); }
.hm-abx__st { list-style: none; display: flex; gap: 22px; margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(160,185,230,.18); font-size: .85rem; color: #a9b9d6; flex-wrap: wrap; }
.hm-abx__st li { margin: 0; }
.hm-abx__st b { color: #fff; margin-right: 4px; }
@media (max-width: 600px) {
.hm-abx { padding: 28px 16px 30px; }
.hm-abx { background: linear-gradient(180deg, rgba(1,19,52,0) 120px, #011334 215px), url(../images/about-pyramid.webp) right top / auto 215px no-repeat, #011334; }
.hm-abx__in { flex-direction: column; align-items: flex-start; gap: 18px; }
.hm-abx__ph { width: 112px; height: 112px; margin-top: 70px; }
.hm-abx h1 { font-size: 2rem; }
.hm-abx__st { gap: 12px 18px; }
}
/* 1.13.22 (Hubert 2026-10-28): category + All guides banners dim only where the scene runs under the text, like the About pyramid.
The dim layer is sized to the viewport and right aligned, so its stops are page x positions (--cx = text right edge). */
@media (min-width: 761px) {
.hm-cat-hero--scene { --cx: calc(max(min(4vw, 50px), 50vw - 600px) + 620px); }
.hm-cat-hero--scene::before { background: linear-gradient(90deg, rgba(5,10,24,.82) 0, rgba(5,10,24,.82) calc(var(--cx) - 10px), rgba(5,10,24,0) calc(var(--cx) + 70px)) right center / 100vw 100% no-repeat, var(--hm-scene) right center / cover no-repeat; }
}
@media (min-width: 761px) and (max-width: 980px) {
.hm-cat-hero--scene { --cx: calc(min(4vw, 50px) + min(620px, 50vw)); }
}
/* 1.13.27 (Hubert 2026-10-28): phones, search sits 8px lower under the title, with 8px more room above the photo. */
@media (max-width: 599px) {
.hm-hero--art .wp-block-search { margin-top: calc(var(--wp--preset--spacing--30) + 8px) !important; }
.hm-hero--art { padding-bottom: 198px !important; }
}
/* 1.13.28 (Hubert 2026-10-28, About critique R2): on tablets and small laptops the category menu keeps the same side margin as the logo instead of touching the screen edge (1.13.29: exactly the header padding). */
@media (min-width: 600px) and (max-width: 1260px) {
.hm-catbar__inner { padding-left: var(--wp--style--root--padding-left) !important; padding-right: var(--wp--style--root--padding-right) !important; }
}
/* 1.13.32 (Hubert 2026-10-28): category + All guides banners behave like the About pyramid: the scene keeps its full height, stays right aligned and slides under the text as the window narrows; dim only under the text. Phones: scene sits behind the breadcrumb and title and fades into the background. */
@media (min-width: 761px) {
.hm-cat-hero--scene::before { inset: 0; width: auto; height: auto; aspect-ratio: auto; max-width: none !important; background: linear-gradient(90deg, rgba(5,10,24,.82) 0, rgba(5,10,24,.82) calc(var(--cx) - 10px), rgba(5,10,24,0) calc(var(--cx) + 70px)) right center / 100vw 100% no-repeat, var(--hm-scene) right center / auto 100% no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent calc(100% - 900px), #000 calc(100% - 680px)); mask-image: linear-gradient(90deg, transparent calc(100% - 900px), #000 calc(100% - 680px)); }
}
@media (max-width: 760px) {
.hm-archive-hero.hm-cat-hero--scene { padding-top: 24px !important; }
.hm-cat-hero--scene::before { position: absolute; inset: 0 0 auto 0; margin: 0; height: 230px; aspect-ratio: auto; background: linear-gradient(180deg, rgba(5,10,24,0) 110px, #050a18 230px), linear-gradient(90deg, rgba(5,10,24,.8) 0, rgba(5,10,24,.25) 65%), var(--hm-scene) right top / auto 230px no-repeat; -webkit-mask-image: none; mask-image: none; }
.hm-cat-hero--scene > .hm-crumbs { margin-top: 0; }
.hm-cat-hero--scene > h1 { margin-top: 84px; }
}
/* Wide screens: the scene is drawn 30% larger so it reaches further left under the text. */
@media (min-width: 1281px) {
.hm-cat-hero--scene::before { background-size: 100vw 100%, auto 130%; -webkit-mask-image: linear-gradient(90deg, transparent calc(100% - 1170px), #000 calc(100% - 880px)); mask-image: linear-gradient(90deg, transparent calc(100% - 1170px), #000 calc(100% - 880px)); }
}
/* 1.13.34 About: Work experience = Europe map + split rail (Ireland / Poland). */
.hm-we { margin: 2.5rem 0 0; }
.hm-we__title { margin: 0 0 1rem; }
.hm-we__map { position: relative; margin: 0 0 1.25rem; border-radius: 14px; overflow: hidden; background: #071338; aspect-ratio: 21 / 8; max-width: 100%; }
.hm-we__map img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hm-we__pin { position: absolute; display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 8px; background: rgba(7, 19, 56, 0.8); border: 1px solid rgba(127, 176, 255, 0.35); color: #fff; font-size: 0.85rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.hm-we__pin small { font-weight: 600; color: #a9b9d6; font-size: inherit; font-variant-numeric: tabular-nums; }
.hm-we__pin--ie { left: 34.4%; top: 36.45%; transform: translate(calc(-100% + 12px), calc(-100% - 22px)); }
.hm-we__pin--pl { left: 56.25%; top: 37.35%; transform: translate(-12px, calc(-100% - 18px)); }
.hm-we__flag { width: 22px; height: 15px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45); }
.hm-we__scale { display: grid; grid-template-columns: repeat(18, 1fr); margin-bottom: 4px; font-size: 0.75rem; color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.hm-we__scale span:last-child { text-align: right; }
.hm-we__rail { display: grid; grid-template-columns: 9fr 9fr; height: 44px; border-radius: 10px; overflow: hidden; color: #fff; font-weight: 700; font-size: 0.92rem; }
.hm-we__rail > div { display: flex; align-items: center; gap: 9px; padding: 0 14px; min-width: 0; white-space: nowrap; }
.hm-we__ie { background: linear-gradient(90deg, #0f6b47, #14895c); }
.hm-we__pl { background: linear-gradient(90deg, #9e1d36, #c8324b); }
.hm-we__yrs { display: none; }
.hm-we__steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(18, 1fr); }
.hm-we__step { grid-row: 1; position: relative; margin: 0; padding-left: 10px; border-left: 2px solid var(--wp--preset--color--line); font-size: 0.9rem; line-height: 1.3; min-width: 0; }
.hm-we__step::before { content: ""; position: absolute; left: -7px; top: -12px; width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--color--base); border: 3px solid var(--wp--preset--color--brand); }
.hm-we__step.is-now::before { background: var(--wp--preset--color--brand); }
.hm-we__when { display: block; margin-bottom: 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--brand); font-variant-numeric: tabular-nums; }
.hm-we__role { display: block; font-weight: 700; font-size: 0.88rem; color: var(--wp--preset--color--ink); }
.hm-we__where { display: block; color: var(--wp--preset--color--muted); font-size: 0.8rem; }
.hm-we__step { align-self: start; }
.hm-we__s1 { grid-column: 1 / 5; }
.hm-we__s2 { grid-column: 3 / 7; margin-top: 76px; }
.hm-we__s3 { grid-column: 5 / 10; }
.hm-we__s4 { grid-column: 8 / 12; margin-top: 60px; }
.hm-we__s5 { grid-column: 10 / 14; }
.hm-we__s6 { grid-column: 14 / 19; justify-self: end; width: max-content; }
.hm-tx{margin-top:12px;display:grid;grid-template-columns:repeat(18,1fr);align-items:end}
.hm-tx + .hm-we__steps{margin-top:26px}
.hm-tx--1 .lc,.hm-tx--1 .lm{grid-row:1;font-size:.78rem;font-weight:700;white-space:nowrap;margin-bottom:5px}
.hm-tx--1 em{font-style:normal;font-weight:500;color:#64748b}
.hm-tx--1 .lc{grid-column:5/9;color:#334155}.hm-tx--1 .lm{grid-column:12/19;justify-self:end;color:#1d4ed8}
.hm-tx--1 .tc,.hm-tx--1 .tm{grid-row:2;height:5px;border-radius:999px}
.hm-tx--1 .tc{grid-column:5/12;background:linear-gradient(90deg,#475569 0%,#475569 57%,rgba(71,85,105,0) 100%)}
.hm-tx--1 .tm{grid-column:9/19;background:linear-gradient(90deg,rgba(37,99,235,0) 0%,#2563eb 43%,#2563eb 100%);mix-blend-mode:multiply}
.hm-tx--1 .y1,.hm-tx--1 .y2,.hm-tx--1 .y3{grid-row:3;margin-top:8px;font-size:.72rem;color:#64748b;font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-tx--1 .y1{grid-column:5/8}.hm-tx--1 .y2{grid-column:9/12;justify-self:center}.hm-tx--1 .y3{grid-column:16/19;justify-self:end}
@media (prefers-color-scheme:dark){:root:not([data-scheme="light"]) .hm-tx--1 .lc{color:#cbd5e1}:root:not([data-scheme="light"]) .hm-tx--1 .lm{color:#93c5fd}:root:not([data-scheme="light"]) .hm-tx--1 .tc{background:linear-gradient(90deg,#94a3b8 0%,#94a3b8 57%,rgba(148,163,184,0) 100%)}:root:not([data-scheme="light"]) .hm-tx--1 .tm{mix-blend-mode:normal;background:linear-gradient(90deg,rgba(96,165,250,0) 0%,#60a5fa 43%,#60a5fa 100%)}:root:not([data-scheme="light"]) .hm-tx--1 em{color:#94a3b8}}
:root[data-scheme="dark"] .hm-tx--1 .lc{color:#cbd5e1}:root[data-scheme="dark"] .hm-tx--1 .lm{color:#93c5fd}:root[data-scheme="dark"] .hm-tx--1 .tc{background:linear-gradient(90deg,#94a3b8 0%,#94a3b8 57%,rgba(148,163,184,0) 100%)}:root[data-scheme="dark"] .hm-tx--1 .tm{mix-blend-mode:normal;background:linear-gradient(90deg,rgba(96,165,250,0) 0%,#60a5fa 43%,#60a5fa 100%)}:root[data-scheme="dark"] .hm-tx--1 em{color:#94a3b8}
@media (max-width:781px){.hm-tx--1 em{display:none}}
@media (max-width:781px){.hm-tx--1 .lc{grid-column:1/10}.hm-tx--1 .lm{grid-column:10/19}.hm-tx--1 .tc{grid-column:1/12}.hm-tx--1 .tm{grid-column:7/19}}
@media (max-width: 760px) {
.hm-we__pin { font-size: 0.68rem; padding: 3px 6px; gap: 5px; }
.hm-we__pin small { display: none; }
.hm-we__map { aspect-ratio: 16 / 10; }
.hm-we__map img { object-position: 64.4% 0; }
.hm-we__pin--ie { left: 20.6%; top: 32.4%; transform: translate(-50%, calc(-100% - 12px)); }
.hm-we__pin--pl { left: 52.5%; top: 33.2%; transform: translate(-12px, calc(-100% - 12px)); }
.hm-we__flag { width: 18px; height: 12px; }
.hm-we__scale { display: none; }
.hm-we__rail { font-size: 0.82rem; }
.hm-we__rail > div { padding: 0 10px; gap: 6px; }
.hm-we__rail { height: 54px; }
.hm-we__city { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.hm-we__yrs { display: block; font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.78); font-variant-numeric: tabular-nums; }
.hm-we__steps { grid-template-columns: 1fr; gap: 16px; padding-left: 8px; }
.hm-we__step { grid-column: 1 !important; grid-row: auto; margin-top: 0 !important; padding-left: 14px; }
.hm-we__step::before { top: 2px; left: -8px; }
}
/* 1.13.49 (Hubert 2026-10-29, GlassWorm KQL): no ligatures in code, so != and == stay as typed. */
pre, code, kbd, samp, .wp-block-code, .wp-block-code code { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
/* 1.13.56 timeline panel + Citrix -> Microsoft curve */
.hm-we__steps{margin-top:22px}
.hm-tl{position:relative;margin:28px 0 3.5rem;padding:22px 28px 26px;border-radius:18px;border:1px solid rgba(15,23,42,.07);background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.35));overflow:hidden}
.hm-tl::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(30,58,138,.13) 1px,transparent 1.2px);background-size:18px 18px;-webkit-mask-image:radial-gradient(ellipse 80% 75% at 60% 55%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 80% 75% at 60% 55%,#000 35%,transparent 100%);pointer-events:none}
.hm-tl>*{position:relative}
.hm-tl .hm-we__scale{margin-top:0}
.hm-cv{margin:-60px 0 0;display:grid;grid-template-columns:repeat(18,1fr);height:130px}
.hm-cv svg{grid-column:5/19;grid-row:1;width:100%;height:100%;overflow:visible}
.hm-cv .c{stroke:url(#hm-cv-c);fill:none;stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hm-cv .m{stroke:#2563eb;fill:none;stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hm-cv .a{fill:url(#hm-cv-a);stroke:none}
.hm-cv .lc,.hm-cv .lm{grid-row:1;font-size:.78rem;font-weight:700;white-space:nowrap}
.hm-cv em{font-style:normal;font-weight:500;color:#64748b}
.hm-cv .lc{grid-column:5/10;align-self:end;margin-bottom:12px;color:#334155}
.hm-cv .lm{grid-column:12/19;justify-self:end;align-self:start;margin-top:14px;color:#1d4ed8}
@media (prefers-color-scheme:dark){:root:not([data-scheme="light"]) .hm-tl{border-color:rgba(148,163,184,.12);background:linear-gradient(180deg,rgba(30,41,59,.45),rgba(15,23,42,.2))}:root:not([data-scheme="light"]) .hm-tl::before{background-image:radial-gradient(rgba(148,163,184,.16) 1px,transparent 1.2px)}:root:not([data-scheme="light"]) .hm-cv .lc{color:#cbd5e1}:root:not([data-scheme="light"]) .hm-cv .lm{color:#93c5fd}:root:not([data-scheme="light"]) .hm-cv .m{stroke:#60a5fa}:root:not([data-scheme="light"]) .hm-cv em{color:#94a3b8}}
:root[data-scheme="dark"] .hm-tl{border-color:rgba(148,163,184,.12);background:linear-gradient(180deg,rgba(30,41,59,.45),rgba(15,23,42,.2))}:root[data-scheme="dark"] .hm-tl::before{background-image:radial-gradient(rgba(148,163,184,.16) 1px,transparent 1.2px)}:root[data-scheme="dark"] .hm-cv .lc{color:#cbd5e1}:root[data-scheme="dark"] .hm-cv .lm{color:#93c5fd}:root[data-scheme="dark"] .hm-cv .m{stroke:#60a5fa}:root[data-scheme="dark"] .hm-cv em{color:#94a3b8}
@media (max-width:781px){.hm-tl{padding:16px 14px 18px;margin-bottom:2.5rem}.hm-cv{margin-top:22px;height:84px}.hm-cv svg{grid-column:1/19}.hm-cv em{display:none}.hm-cv .lc{grid-column:1/10;margin-bottom:10px}.hm-cv .lm{grid-column:10/19;margin-top:10px}}
@media (max-width:781px){.hm-we__s6{justify-self:stretch;width:auto}}
/* 1.13.57 building background, grey->blue curve */
.hm-tl::before{background-image:url(../images/about-tl-build-l.webp);background-size:cover;background-position:center;opacity:.5;-webkit-mask-image:none;mask-image:none}
.hm-cv .m{stroke:url(#hm-cv-m)}.hm-cv .b{stop-color:#2563eb}
@media (min-width:782px){.hm-cv{margin-top:-38px}}
@media (prefers-color-scheme:dark){:root:not([data-scheme="light"]) .hm-tl::before{background-image:url(../images/about-tl-build-d.webp);opacity:.6}:root:not([data-scheme="light"]) .hm-cv .m{stroke:url(#hm-cv-m)}:root:not([data-scheme="light"]) .hm-cv .b{stop-color:#60a5fa}}
:root[data-scheme="dark"] .hm-tl::before{background-image:url(../images/about-tl-build-d.webp);opacity:.6}:root[data-scheme="dark"] .hm-cv .m{stroke:url(#hm-cv-m)}:root[data-scheme="dark"] .hm-cv .b{stop-color:#60a5fa}
/* 1.13.60 (Hubert 2026-11-01 "tak wdroz standard"): one At a glance chip standard.
Platforms (first column) = neutral outline for every OS. Products = colour of the console you configure it in:
Intune blue, Entra petrol, Defender red, Microsoft 365 teal-green, Admin By Request orange (1.13.49 rule), everything else graphite. */
.wp-block-post-content .hm-glance > div .hm-chip { background: rgba(148,163,184,.18); box-shadow: inset 0 0 0 1px rgba(148,163,184,.45); color: #e2e8f0; }
.wp-block-post-content .hm-glance > div .hm-chip--intune { background: rgba(96,140,255,.22); box-shadow: inset 0 0 0 1px rgba(130,165,255,.6); color: #dde6ff; }
.wp-block-post-content .hm-glance > div .hm-chip--entra { background: rgba(34,150,180,.24); box-shadow: inset 0 0 0 1px rgba(80,180,210,.55); color: #c9eef7; }
.wp-block-post-content .hm-glance > div .hm-chip--security { background: rgba(220,38,38,.24); box-shadow: inset 0 0 0 1px rgba(248,113,113,.6); color: #fecaca; }
.wp-block-post-content .hm-glance > div .hm-chip--m365 { background: rgba(60,194,167,.2); box-shadow: inset 0 0 0 1px rgba(60,194,167,.55); color: #c5f2e7; }
.wp-block-post-content .hm-glance > div:first-child .hm-chip { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); color: #eef2fa; }
/* === hm-lanes: Configuration overview as console bands (1.13.61) ===
All steps: ...
Intune
3.1Titleoptional note */
.hm-lanes { --hl-card: #fff; --hl-line: #d5deef; --hl-n: #5b6b8f; --hl-t: #0b1430; --hl-s: #5b6b8f;
--hl-intune-bg: #eef3fb; --hl-intune-fg: #1f3f7a; --hl-intune-chip: #e0e9f8;
--hl-entra-bg: #eef6f8; --hl-entra-fg: #0e5568; --hl-entra-chip: #dfeef2;
--hl-defender-bg: #fdf2f2; --hl-defender-fg: #9b1c1c; --hl-defender-chip: #fbe3e3;
--hl-m365-bg: #eef8f3; --hl-m365-fg: #0f6b4f; --hl-m365-chip: #dcf3ea;
--hl-abr-bg: #fff4ea; --hl-abr-fg: #c2410c; --hl-abr-chip: #ffe6cf;
--hl-vendor-bg: #f2f4f7; --hl-vendor-fg: #334155; --hl-vendor-chip: #e4e8ee;
display: grid; gap: .8rem; margin: 1.25rem 0 1.5rem; }
:root[data-scheme="dark"] .hm-lanes { --hl-card: #111a2e; --hl-line: #26355a; --hl-n: #93a3c4; --hl-t: #e8eefb; --hl-s: #a7b4cf;
--hl-intune-bg: rgba(96,140,255,.10); --hl-intune-fg: #c7d6ff; --hl-intune-chip: rgba(96,140,255,.24);
--hl-entra-bg: rgba(34,150,180,.10); --hl-entra-fg: #a9e1ef; --hl-entra-chip: rgba(34,150,180,.26);
--hl-defender-bg: rgba(220,38,38,.10); --hl-defender-fg: #fecaca; --hl-defender-chip: rgba(220,38,38,.26);
--hl-m365-bg: rgba(60,194,167,.10); --hl-m365-fg: #c5f2e7; --hl-m365-chip: rgba(60,194,167,.24);
--hl-abr-bg: rgba(249,115,22,.10); --hl-abr-fg: #fdba74; --hl-abr-chip: rgba(249,115,22,.24);
--hl-vendor-bg: rgba(148,163,184,.10); --hl-vendor-fg: #e2e8f0; --hl-vendor-chip: rgba(148,163,184,.24); }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) .hm-lanes { --hl-card: #111a2e; --hl-line: #26355a; --hl-n: #93a3c4; --hl-t: #e8eefb; --hl-s: #a7b4cf;
--hl-intune-bg: rgba(96,140,255,.10); --hl-intune-fg: #c7d6ff; --hl-intune-chip: rgba(96,140,255,.24);
--hl-entra-bg: rgba(34,150,180,.10); --hl-entra-fg: #a9e1ef; --hl-entra-chip: rgba(34,150,180,.26);
--hl-defender-bg: rgba(220,38,38,.10); --hl-defender-fg: #fecaca; --hl-defender-chip: rgba(220,38,38,.26);
--hl-m365-bg: rgba(60,194,167,.10); --hl-m365-fg: #c5f2e7; --hl-m365-chip: rgba(60,194,167,.24);
--hl-abr-bg: rgba(249,115,22,.10); --hl-abr-fg: #fdba74; --hl-abr-chip: rgba(249,115,22,.24);
--hl-vendor-bg: rgba(148,163,184,.10); --hl-vendor-fg: #e2e8f0; --hl-vendor-chip: rgba(148,163,184,.24); }
}
.hm-article .wp-block-post-content .hm-lanes__plat { margin: 0 0 -.2rem .2rem; font-size: .84rem; font-weight: 600; color: var(--hl-s); }
.hm-article .wp-block-post-content .hm-lane { --bg: var(--hl-intune-bg); --fg: var(--hl-intune-fg); --chip: var(--hl-intune-chip);
display: flex; flex-wrap: wrap; gap: .6rem; padding: .75rem; border-radius: 14px; background: var(--bg); }
.hm-lane--entra { --bg: var(--hl-entra-bg) !important; --fg: var(--hl-entra-fg) !important; --chip: var(--hl-entra-chip) !important; }
.hm-lane--defender { --bg: var(--hl-defender-bg) !important; --fg: var(--hl-defender-fg) !important; --chip: var(--hl-defender-chip) !important; }
.hm-lane--m365 { --bg: var(--hl-m365-bg) !important; --fg: var(--hl-m365-fg) !important; --chip: var(--hl-m365-chip) !important; }
.hm-lane--abr { --bg: var(--hl-abr-bg) !important; --fg: var(--hl-abr-fg) !important; --chip: var(--hl-abr-chip) !important; }
.hm-lane--vendor { --bg: var(--hl-vendor-bg) !important; --fg: var(--hl-vendor-fg) !important; --chip: var(--hl-vendor-chip) !important; }
.hm-article .wp-block-post-content .hm-lane__head { flex: 1 0 100%; margin: 0; }
.hm-article .wp-block-post-content .hm-lane__head span { display: inline-block; padding: .1rem .65rem; border-radius: 999px; background: var(--chip); color: var(--fg); font-size: .78rem; font-weight: 700; letter-spacing: .04em; line-height: 1.6; }
.hm-article .wp-block-post-content a.hm-lane__step { flex: 1 1 40%; min-width: 0; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .3rem; row-gap: .15rem; align-content: start;
padding: .6rem .8rem; border: 1px solid var(--hl-line); border-radius: 10px; background: var(--hl-card); text-decoration: none; color: var(--hl-t); transition: border-color .15s, transform .15s; }
.hm-article .wp-block-post-content a.hm-lane__step:hover { border-color: var(--fg); transform: translateY(-1px); }
.hm-article .wp-block-post-content .hm-lane__n { font-family: var(--wp--preset--font-family--display, Sora, sans-serif); font-weight: 700; font-size: .88rem; color: var(--hl-n); line-height: 1.4; }
.hm-article .wp-block-post-content .hm-lane__t { font-family: var(--wp--preset--font-family--display, Sora, sans-serif); font-weight: 600; font-size: .95rem; line-height: 1.35; color: var(--hl-t); }
.hm-article .wp-block-post-content .hm-lane__s { grid-column: 2; font-size: .8rem; line-height: 1.35; color: var(--hl-s); }
@media (max-width: 600px) { .hm-article .wp-block-post-content a.hm-lane__step { flex-basis: 100%; } }
/* 1.13.62 compact hm-lanes (Hubert 2026-11-01 "musi byc bardziej kompaktowe"): one band = console label on the left, steps as one-line rows. */
.hm-article .wp-block-post-content .hm-lanes { gap: .4rem; margin: 1rem 0 1.25rem; }
.hm-article .wp-block-post-content .hm-lane { display: grid; grid-template-columns: 9.5rem 1fr; align-items: start; gap: 0 .75rem; padding: .45rem .6rem; border-radius: 10px; }
.hm-article .wp-block-post-content .hm-lane > p:not(.hm-lane__head) { display: contents; } /* wpautop wraps the steps in a */
.hm-article .wp-block-post-content .hm-lane br, .hm-article .wp-block-post-content .hm-lane > p:empty { display: none; }
.hm-article .wp-block-post-content .hm-lane__head { grid-column: 1; grid-row: 1 / span 20; margin: .28rem 0 0; }
.hm-article .wp-block-post-content .hm-lane__head span { font-size: .74rem; padding: .05rem .6rem; }
.hm-article .wp-block-post-content a.hm-lane__step { grid-column: 2; display: grid; grid-template-columns: 2.1rem auto 1fr; align-items: baseline; gap: 0 .55rem; padding: .3rem .4rem; border: 0; border-radius: 6px; background: transparent; }
.hm-article .wp-block-post-content a.hm-lane__step + a.hm-lane__step { border-top: 1px solid var(--hl-line); border-radius: 0; }
.hm-article .wp-block-post-content a.hm-lane__step:hover { background: var(--hl-card); transform: none; }
.hm-article .wp-block-post-content .hm-lane__n { font-size: .82rem; }
.hm-article .wp-block-post-content .hm-lane__t { font-size: .9rem; font-weight: 600; }
.hm-article .wp-block-post-content .hm-lane__s { grid-column: 3; font-size: .78rem; }
.hm-article .wp-block-post-content .hm-lane__s::before { content: "ยท "; }
.hm-article .wp-block-post-content .hm-lanes__plat { margin: 0 0 .1rem .2rem; font-size: .8rem; }
@media (max-width: 600px) {
.hm-article .wp-block-post-content .hm-lane { grid-template-columns: 1fr; padding: .35rem .5rem; }
.hm-article .wp-block-post-content .hm-lanes { gap: .3rem; }
.hm-article .wp-block-post-content .hm-lane__head, .hm-article .wp-block-post-content a.hm-lane__step { grid-column: 1; grid-row: auto; }
.hm-article .wp-block-post-content .hm-lane__head { margin: 0 0 .1rem; }
.hm-article .wp-block-post-content a.hm-lane__step { grid-template-columns: 2rem 1fr; padding: .2rem .3rem; }
.hm-article .wp-block-post-content .hm-lane__t { font-size: .86rem; line-height: 1.3; }
.hm-article .wp-block-post-content .hm-lane__s { grid-column: 2; }
.hm-article .wp-block-post-content .hm-lane__s::before { content: none; }
}
/* 1.13.63 smaller hm-lanes text (Hubert 2026-11-01 "napisy bardziej kompaktowe mniejsza czcionka"): step titles in the body font, below body size. */
.hm-article .wp-block-post-content .hm-lane__t { font-family: inherit; font-size: .8rem; font-weight: 600; line-height: 1.3; }
.hm-article .wp-block-post-content .hm-lane__n { font-family: inherit; font-size: .74rem; }
.hm-article .wp-block-post-content .hm-lane__s { font-size: .74rem; }
.hm-article .wp-block-post-content a.hm-lane__step { padding: .2rem .4rem; grid-template-columns: 1.9rem auto 1fr; }
.hm-article .wp-block-post-content .hm-lane { padding: .35rem .55rem; grid-template-columns: 8.5rem 1fr; }
.hm-article .wp-block-post-content .hm-lane__head { margin-top: .12rem; }
.hm-article .wp-block-post-content .hm-lane__head span { font-size: .7rem; }
.hm-article .wp-block-post-content .hm-lanes { gap: .35rem; }
@media (max-width: 600px) {
.hm-article .wp-block-post-content .hm-lane { grid-template-columns: 1fr; padding: .3rem .45rem; }
.hm-article .wp-block-post-content a.hm-lane__step { grid-template-columns: 1.8rem 1fr; padding: .15rem .3rem; }
.hm-article .wp-block-post-content .hm-lane__t { font-size: .8rem; }
}
/* 1.13.64 dark mode: visible hover/focus on hm-lanes steps (Hubert 2026-11-02 "w dark mode nie widac podswietlenia"). Light mode keeps the white row. */
:root[data-scheme="dark"] .hm-article .wp-block-post-content a.hm-lane__step:hover,
:root[data-scheme="dark"] .hm-article .wp-block-post-content a.hm-lane__step:focus-visible { background: rgba(147,180,255,.18); box-shadow: inset 3px 0 0 #8fb0ff; }
:root[data-scheme="dark"] .hm-article .wp-block-post-content a.hm-lane__step:hover .hm-lane__t { color: #fff; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) .hm-article .wp-block-post-content a.hm-lane__step:hover,
:root:not([data-scheme="light"]) .hm-article .wp-block-post-content a.hm-lane__step:focus-visible { background: rgba(147,180,255,.18); box-shadow: inset 3px 0 0 #8fb0ff; }
:root:not([data-scheme="light"]) .hm-article .wp-block-post-content a.hm-lane__step:hover .hm-lane__t { color: #fff; }
}
/* 1.13.65 lane notes in brackets instead of a leading dot (Hubert 2026-11-02 "moze w nawiasie to dac"). Applies on desktop and phone. */
.hm-article .wp-block-post-content .hm-lane__s::before { content: "("; }
.hm-article .wp-block-post-content .hm-lane__s::after { content: ")"; }
/* 1.13.67 Configuration overview frame (Hubert 2026-11-03 "B ramka + lekki cien"): each console band gets a thin border and a light shadow, like the Prerequisites table. */
.hm-article .wp-block-post-content .hm-lane { border: 1px solid var(--hl-line); box-shadow: 0 6px 16px -12px rgba(15,23,42,.45); }
:root[data-scheme="dark"] .hm-article .wp-block-post-content .hm-lane { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px -12px rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) .hm-article .wp-block-post-content .hm-lane { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px -12px rgba(0,0,0,.6); } }
/* Syntax colours in code blocks (1.13.68): VS Code Dark+ palette on the navy code window, same in light and dark mode. */
.hm-code code.hm-hl { color: #d4d4d4; }
.hm-code .hm-hl .token.comment, .hm-code .hm-hl .token.prolog, .hm-code .hm-hl .token.doctype, .hm-code .hm-hl .token.cdata, .hm-code .hm-hl .token.shebang { color: #6a9955; }
.hm-code .hm-hl .token.string, .hm-code .hm-hl .token.char, .hm-code .hm-hl .token.attr-value, .hm-code .hm-hl .token.attr-value .token.punctuation { color: #ce9178; }
.hm-code .hm-hl .token.keyword, .hm-code .hm-hl .token.important { color: #c586c0; }
.hm-code .hm-hl .token.function, .hm-code .hm-hl .token.builtin { color: #dcdcaa; }
.hm-code .hm-hl .token.variable, .hm-code .hm-hl .token.property, .hm-code .hm-hl .token.attr-name, .hm-code .hm-hl .token.assign-left, .hm-code .hm-hl .token.parameter { color: #9cdcfe; }
.hm-code .hm-hl .token.number, .hm-code .hm-hl .token.boolean, .hm-code .hm-hl .token.timespan { color: #b5cea8; }
.hm-code .hm-hl .token.class-name, .hm-code .hm-hl .token.namespace { color: #4ec9b0; }
.hm-code .hm-hl .token.tag, .hm-code .hm-hl .token.tag .token.punctuation { color: #569cd6; }
.hm-code .hm-hl .token.operator, .hm-code .hm-hl .token.punctuation { color: #d4d4d4; }
.hm-code .hm-hl .token.entity, .hm-code .hm-hl .token.url { color: #d7ba7d; }
.hm-code .language-kql.hm-hl .token.keyword, .hm-code .language-kusto.hm-hl .token.keyword { color: #569cd6; }
.hm-code .language-kql.hm-hl .token.operator { color: #d4d4d4; }
.hm-code .language-powershell.hm-hl .token.boolean { color: #569cd6; }
.hm-code .hm-hl .token.bold { font-weight: 600; }
.hm-code .hm-hl .token.shebang { color: #6a9955; }
.hm-code .language-bash.hm-hl .token.builtin, .hm-code .language-shell.hm-hl .token.builtin { color: #dcdcaa; }
/* 1.13.69 CCTK + Text colours (Hubert 2026-11-03 "tak wgraj") */
.hm-code .hm-hl .token.section-name, .hm-code .hm-hl .token.selector { color: #569cd6; }
.hm-code .language-text.hm-hl .token.keyword { color: #569cd6; }
/* 1.13.71 code windows (Hubert 2026-11-03 "popraw wszystko"): scroll hint for long lines, CDATA in the string colour (green = comments only). */
.hm-code__more { display: none; margin-left: auto; font: 600 0.68rem/1 var(--wp--preset--font-family--body, inherit); color: #8fa3c9; letter-spacing: 0.02em; white-space: nowrap; }
.hm-code--more .hm-code__more { display: inline; }
.hm-article .wp-block-post-content .hm-code pre.wp-block-code.hm-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.hm-code .hm-hl .token.cdata { color: #ce9178; }