/* [MFB-INHERIT-20260730] MUST stay above every component rule below.

   The host theme ships bare `h1..h6 { color: … }`. Our headings set margin and size but take
   their colour by INHERITANCE, and an inherited value has no specificity at all — so it loses to
   ANY matching rule, including that bare one. Measured on :5131 before this line existed:
   `.mfb-card-body h3` computed to rgb(173,175,174) — the theme's grey — on a white card.

   This block goes FIRST, not last, on purpose: it ties with the component rules on specificity,
   and on a tie the LATER rule wins, which must be the component. Moving it to the end of the
   file would flatten every intentional muted colour in the sheet.
   `a` is excluded deliberately: link colour is set by the module's own classes. */
.mfb :where(h1,h2,h3,h4,h5,h6,p,li,td,th,dt,dd,label,legend,strong,b,em,i,small,time,
            figcaption,summary,blockquote){color:inherit}
.mfb{--mfb-surface:var(--mf-page-surface,var(--bs-body-bg,var(--surface-color,#fff)));--mfb-ink:var(--mf-page-text,var(--bs-body-color,var(--default-color,#101828)));--mfb-muted:var(--mf-page-muted,var(--bs-secondary-color,#667085));--mfb-line:var(--mf-page-border,var(--border-color,#e4e7ec));--mfb-accent:var(--mf-page-primary,var(--accent-color,#6d4aff));--mfb-soft:#f6f5ff;background:var(--mfb-surface);color:var(--mfb-ink);font-family:Inter,"Segoe UI",system-ui,sans-serif;line-height:1.55}.mfb *{box-sizing:border-box}.mfb a{color:inherit;text-decoration:none}.mfb img{display:block;max-width:100%}.mfb-shell{width:min(1180px,calc(100% - 36px));margin:auto}.mfb-hero{margin-top:-20px;padding:76px 0 54px;background:radial-gradient(circle at 15% 10%,#e9e4ff 0,transparent 33%),linear-gradient(145deg,#fbfbff,#f5f7fb);border-bottom:1px solid var(--mfb-line)}.mfb-eyebrow{display:inline-flex;color:var(--mfb-accent);font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.mfb-hero>div>h1,.mfb-article-head h1{margin:8px 0 10px;font-size:clamp(42px,7vw,72px);line-height:1.03;letter-spacing:-.045em}.mfb-hero>div>p,.mfb-lead{max-width:720px;margin:0;color:var(--mfb-muted);font-size:19px}.mfb-search{position:relative;max-width:680px;margin:30px 0 38px}.mfb-search input{width:100%;height:58px;padding:0 132px 0 22px;border:1px solid #d0d5dd;border-radius:999px;background:#fff;font-size:16px;box-shadow:0 14px 35px #1018280c}.mfb-search button,.mfb-newsletter button,.mfb-button{border:0;border-radius:999px;background:var(--mfb-accent);color:#fff;font-weight:750;cursor:pointer}.mfb-search button{position:absolute;right:6px;top:6px;height:46px;padding:0 26px}.mfb-feature{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);overflow:hidden;border:1px solid var(--mfb-line);border-radius:26px;background:#fff;box-shadow:0 22px 60px #10182814}.mfb-feature-image{position:relative;min-height:430px;overflow:hidden}.mfb-feature-image img,.mfb-card-image img,.mfb-article-hero img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.mfb-feature:hover img,.mfb-card:hover img{transform:scale(1.035)}.mfb-feature-image>span,.mfb-card-image>span{position:absolute;left:18px;top:18px;padding:6px 11px;border-radius:999px;background:var(--mfb-accent);color:#fff;font-size:12px;font-weight:800}.mfb-feature-copy{display:flex;flex-direction:column;justify-content:center;padding:40px}.mfb-chip{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--mfb-soft);color:var(--mfb-accent);font-size:12px;font-weight:800}.mfb-feature-copy small,.mfb-card-body small{margin-left:9px;color:var(--mfb-muted)}.mfb-feature-copy h2{margin:17px 0 12px;font-size:32px;line-height:1.18;letter-spacing:-.025em}.mfb-feature-copy p,.mfb-card-body p{color:var(--mfb-muted)}.mfb-card-foot{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-top:auto;padding-top:22px;border-top:1px solid var(--mfb-line);color:var(--mfb-muted);font-size:12px}.mfb-card-foot>span:first-child{display:flex;flex-direction:column}.mfb-card-foot strong{color:var(--mfb-ink);font-size:13px}.mfb-card-foot small{margin:0}.mfb-content{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:42px;padding-top:58px;padding-bottom:70px}.mfb-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.mfb-section-head>div{display:flex;align-items:center;gap:10px}.mfb-section-head h2{margin:0;font-size:24px}.mfb-section-head>span{color:var(--mfb-muted);font-size:13px}.mfb-trend{color:var(--mfb-accent);font-size:25px;font-weight:900}.mfb-categories{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px}.mfb-categories a{padding:8px 14px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:13px;font-weight:700}.mfb-categories a.active,.mfb-categories a:hover{background:var(--mfb-accent);color:#fff}.mfb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.mfb-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--mfb-line);border-radius:18px;background:#fff;box-shadow:0 4px 15px #10182808;transition:transform .25s,box-shadow .25s}.mfb-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px #10182814}.mfb-card-image{position:relative;aspect-ratio:16/10;overflow:hidden}.mfb-card-body{display:flex;flex:1;flex-direction:column;padding:20px}.mfb-card-body h3{margin:12px 0 7px;font-size:20px;line-height:1.25}.mfb-card-body p{display:-webkit-box;overflow:hidden;margin:0 0 18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}.mfb-sidebar{display:flex;flex-direction:column;gap:20px}.mfb-side-card,.mfb-author-card,.mfb-newsletter,.mfb-panel,.mfb-editor{padding:22px;border:1px solid var(--mfb-line);border-radius:18px;background:#fff}.mfb-side-card h2,.mfb-author-card h2,.mfb-newsletter h2{margin:0 0 13px;font-size:17px}.mfb-tags{display:flex;flex-wrap:wrap;gap:8px}.mfb-tags a{padding:7px 10px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:12px}.mfb-tags a:hover{background:var(--mfb-soft);color:var(--mfb-accent)}.mfb-newsletter{border:0;background:linear-gradient(145deg,#7657ff,#4f35d3);color:#fff}.mfb-newsletter p,.mfb-newsletter small{color:#e7e1ff}.mfb-newsletter input{width:100%;height:44px;margin:8px 0;padding:0 13px;border:1px solid #ffffff55;border-radius:10px;background:#ffffff17;color:#fff}.mfb-newsletter input::placeholder{color:#ffffffaa}.mfb-newsletter button{width:100%;height:42px;background:#fff;color:#4f35d3}.mfb-newsletter small{display:block;margin-top:10px}.mfb-state{margin:30px auto;padding:25px;border:1px dashed #cbd5e1;border-radius:16px;background:#f8fafc;color:#475467;text-align:center}.mfb-state-error{border-color:#fda29b;background:#fff1f0;color:#b42318}.mfb-state span{display:block;margin-top:5px}.mfb-button{display:inline-block;padding:10px 17px}.mfb-article{width:min(1180px,calc(100% - 36px));margin:40px auto 80px}.mfb-breadcrumb{display:flex;gap:9px;color:var(--mfb-muted);font-size:13px}.mfb-article-head{max-width:900px;margin:42px auto;text-align:center}.mfb-lead{margin:16px auto}.mfb-byline{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:25px}.mfb-byline img,.mfb-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover}.mfb-avatar{display:inline-grid;place-items:center;background:var(--mfb-soft);color:var(--mfb-accent);font-weight:850}.mfb-byline>span:last-child{display:flex;flex-direction:column;text-align:left}.mfb-byline small{color:var(--mfb-muted)}.mfb-article-hero{overflow:hidden;margin:0;border-radius:24px}.mfb-article-hero img{aspect-ratio:16/8;object-fit:cover}.mfb-article-hero figcaption{padding-top:8px;color:var(--mfb-muted);font-size:12px}.mfb-article-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:52px;max-width:1000px;margin:45px auto}.mfb-prose{font-family:Georgia,serif;font-size:18px;line-height:1.85}.mfb-prose h2,.mfb-prose h3{font-family:Inter,"Segoe UI",sans-serif;line-height:1.25}.mfb-prose img{height:auto;border-radius:14px}.mfb-prose blockquote{margin:28px 0;padding:8px 0 8px 20px;border-left:4px solid var(--mfb-accent);color:#475467}.mfb-article-layout aside{display:flex;flex-direction:column;gap:18px}.mfb-author-card{text-align:center}.mfb-avatar-lg{width:64px;height:64px;margin:auto}.mfb-author-card h2{margin:12px 0 0}.mfb-muted{color:var(--mfb-muted)}.mfb-attachment{display:block;padding:8px 0;border-top:1px solid var(--mfb-line);color:var(--mfb-accent)!important;font-size:13px}.mfb-admin{width:min(1220px,calc(100% - 32px));margin:30px auto 70px}.mfb-admin-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px}.mfb-admin-head h1{margin:5px 0 0;font-size:36px}.mfb-admin-head>span{color:var(--mfb-muted)}.mfb-notice{margin:0 0 18px;padding:12px 15px;border-radius:10px}.mfb-notice.success{background:#ecfdf3;color:#027a48}.mfb-notice.error{background:#fef3f2;color:#b42318}.mfb-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.mfb-kpis>div{padding:20px;border:1px solid var(--mfb-line);border-radius:14px;background:#fff}.mfb-kpis strong,.mfb-kpis span{display:block}.mfb-kpis strong{font-size:30px}.mfb-kpis span{color:var(--mfb-muted);font-size:13px}.mfb-editor{margin-bottom:22px}.mfb-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}.mfb-form-grid label{font-size:12px;font-weight:750}.mfb-form-grid label.wide{grid-column:1/-1}.mfb-form-grid input,.mfb-form-grid textarea,.mfb-task input,.mfb-inline-search input{width:100%;margin-top:5px;padding:10px 11px;border:1px solid #d0d5dd;border-radius:9px;font:inherit;font-weight:400}.mfb-files{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.mfb-files a{color:var(--mfb-accent)}.mfb-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.mfb-task,.mfb-register-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-top:1px solid var(--mfb-line)}.mfb-task>div,.mfb-register-row>div{display:flex;flex-direction:column}.mfb-task span,.mfb-register-row span{color:var(--mfb-muted);font-size:12px}.mfb-task form{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.mfb-task input{flex-basis:100%}.mfb-task button,.mfb-inline-search button{padding:7px 10px;border:0;border-radius:7px;background:#344054;color:#fff;font-weight:700;cursor:pointer}.mfb-task button.danger{background:#b42318}.mfb-register-row>a{color:var(--mfb-accent);font-weight:750}.mfb-inline-search{display:flex;gap:7px;margin-bottom:8px}.mfb-inline-search input{margin:0}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:900px){.mfb-feature,.mfb-content,.mfb-article-layout,.mfb-admin-grid{grid-template-columns:1fr}.mfb-feature-image{min-height:300px}.mfb-sidebar{display:grid;grid-template-columns:1fr 1fr}.mfb-kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.mfb-shell,.mfb-article,.mfb-admin{width:min(100% - 22px,1180px)}.mfb-hero{padding:52px 0 34px}.mfb-hero>div>h1,.mfb-article-head h1{font-size:40px}.mfb-feature-copy{padding:24px}.mfb-feature-copy h2{font-size:25px}.mfb-grid,.mfb-sidebar,.mfb-form-grid{grid-template-columns:1fr}.mfb-card-foot,.mfb-admin-head,.mfb-task{align-items:flex-start;flex-direction:column}.mfb-kpis{gap:8px}.mfb-kpis>div{padding:14px}.mfb-content{gap:25px}.mfb-article-layout{gap:25px}}
.mfb-article-layout>*{min-width:0}.mfb-prose{min-width:0;overflow-wrap:anywhere;word-break:normal}.mfb-prose pre{max-width:100%;overflow:auto;white-space:pre-wrap}.mfb-prose code{overflow-wrap:anywhere;word-break:break-word}
.mfb-task-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.mfb-form-grid>div.wide{grid-column:1/-1}.mfb-media-field{display:flex;align-items:end;gap:9px}.mfb-media-field label{flex:1}.mfb-media-button{flex:0 0 auto;min-height:40px;padding:8px 12px;border:1px solid #d0d5dd;border-radius:9px;background:#fff;color:#344054;font-size:12px;font-weight:750;cursor:pointer}.mfb-media-button:hover{border-color:var(--mfb-accent);color:var(--mfb-accent)}.mfb-media-button.primary{border-color:#d9d2ff;background:var(--mfb-soft);color:var(--mfb-accent)}.mfb-editor-toolbar{display:flex;align-items:center;gap:12px;margin:-2px 0 18px}.mfb-editor-toolbar span{color:var(--mfb-muted);font-size:12px}.mfb-rich-field .mfw-rte-wrap{margin:0}.mfb-rich-field .mfw-rte-label{font-size:12px;font-weight:750}.mfb-rich-field .mfw-rte-help{font-size:12px}.mfb-rich-field .ql-editor{font-size:16px;line-height:1.65}.mfb-rich-field .ql-editor img{max-width:100%;height:auto}.mfb-gallery-open{overflow:hidden}.mfb-gallery-dialog{position:fixed;z-index:100000;inset:0;display:grid;place-items:center;padding:24px}.mfb-gallery-dialog[hidden]{display:none}.mfb-gallery-backdrop{position:absolute;inset:0;background:#101828b8;backdrop-filter:blur(4px)}.mfb-gallery-sheet{position:relative;display:flex;width:min(1060px,100%);max-height:min(780px,calc(100vh - 48px));flex-direction:column;overflow:hidden;border:1px solid #ffffff4d;border-radius:22px;background:#fff;box-shadow:0 30px 90px #10182866}.mfb-gallery-sheet>header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--mfb-line)}.mfb-gallery-sheet>header h2{margin:3px 0 0;font-size:24px}.mfb-gallery-close{width:40px;height:40px;border:0;border-radius:50%;background:#f2f4f7;color:#344054;font-size:28px;line-height:1;cursor:pointer}.mfb-gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;border-bottom:1px solid var(--mfb-line);background:#fcfcfd}.mfb-gallery-tabs{display:flex;gap:7px}.mfb-gallery-tabs button{padding:8px 12px;border:1px solid #d0d5dd;border-radius:999px;background:#fff;color:#475467;font-weight:750;cursor:pointer}.mfb-gallery-tabs button.active{border-color:var(--mfb-accent);background:var(--mfb-accent);color:#fff}.mfb-gallery-tabs span{opacity:.75}.mfb-gallery-controls input{width:min(330px,45vw);padding:9px 12px;border:1px solid #d0d5dd;border-radius:9px}.mfb-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;overflow:auto;padding:22px}.mfb-gallery-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;padding:0;border:1px solid var(--mfb-line);border-radius:14px;background:#fff;color:var(--mfb-ink);text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}.mfb-gallery-card:hover,.mfb-gallery-card:focus-visible{transform:translateY(-2px);border-color:var(--mfb-accent);box-shadow:0 10px 25px #10182817;outline:none}.mfb-gallery-thumb{display:block;aspect-ratio:4/3;overflow:hidden;background:#f2f4f7}.mfb-gallery-card.author .mfb-gallery-thumb{background:linear-gradient(145deg,#f1efff,#f8fafc)}.mfb-gallery-thumb img{width:100%;height:100%;object-fit:cover}.mfb-gallery-card.author .mfb-gallery-thumb img{object-position:center}.mfb-gallery-card strong{overflow:hidden;padding:11px 12px 2px;text-overflow:ellipsis;white-space:nowrap}.mfb-gallery-card small{padding:0 12px 12px;color:var(--mfb-muted)}.mfb-gallery-empty{grid-column:1/-1;padding:50px 20px;color:var(--mfb-muted);text-align:center}.mfb-gallery-sheet>footer{padding:12px 22px;border-top:1px solid var(--mfb-line);color:var(--mfb-muted);font-size:12px}
.mfb-gallery-grid{min-height:0;grid-auto-rows:max-content;align-content:start}.mfb-gallery-card[hidden]{display:none}
@media(max-width:760px){.mfb-gallery-dialog{padding:8px}.mfb-gallery-sheet{max-height:calc(100vh - 16px);border-radius:15px}.mfb-gallery-controls{align-items:stretch;flex-direction:column}.mfb-gallery-controls input{width:100%}.mfb-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px}.mfb-media-field,.mfb-editor-toolbar{align-items:stretch;flex-direction:column}.mfb-media-button{width:100%}}
@media(max-width:620px){.mfb .acme-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.mfb .acme-footer-grid,.mfb .acme-footer-col{min-width:0!important}.mfb .acme-footer-col ul{display:block!important}}

/* ============================================================================
   [MFB-MULTIPURPOSE-20260730] Search bar, pagination, states and the console
   launcher added when the module became a multi-purpose Blog/News surface.

   House rules followed here (see CLAUDE_HANDOFF_20260730b §2.2):
    - every selector is scoped under .mfb - never a bare element, never :root;
    - colours come from the .mfb token block, which itself chains
      MegaForm page channel -> host theme -> literal;
    - no viewport @media for layout that must survive inside a narrow pane;
      container-relative sizing instead.
   Appended at end-of-file on purpose: at equal specificity, source order wins.
   ============================================================================ */

.mfb-filterbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 1.25rem}
.mfb-filterbar input[type=search]{flex:1 1 12rem;min-width:0;padding:.55rem .75rem;
  border:1px solid var(--mfb-line);border-radius:6px;background:var(--mfb-surface);
  color:var(--mfb-ink);font:inherit}
.mfb-filterbar button{padding:.55rem 1rem;border:1px solid var(--mfb-accent);border-radius:6px;
  background:var(--mfb-accent);color:#fff;font:inherit;cursor:pointer}
.mfb-filterbar button:hover{filter:brightness(.94)}
.mfb-filter-clear{padding:.55rem .5rem;color:var(--mfb-muted);text-decoration:underline}

.mfb-btn{display:inline-block;padding:.55rem 1rem;border:1px solid var(--mfb-accent);
  border-radius:6px;background:var(--mfb-accent);color:#fff;text-decoration:none;font:inherit}
.mfb-btn:hover{filter:brightness(.94);color:#fff}

.mfb-state-empty{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.mfb-state-note{border-left:3px solid var(--mfb-accent);padding-left:.75rem;color:var(--mfb-muted)}

.mfb-pager{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin:1.75rem 0 0;
  padding-top:1.25rem;border-top:1px solid var(--mfb-line)}
.mfb-pager a,.mfb-pager strong{padding:.35rem .65rem;border-radius:6px;text-decoration:none;
  border:1px solid var(--mfb-line);color:var(--mfb-ink);min-width:2.25rem;text-align:center}
.mfb-pager strong{background:var(--mfb-accent);border-color:var(--mfb-accent);color:#fff}
.mfb-pager a:hover{border-color:var(--mfb-accent);color:var(--mfb-accent)}
.mfb-pager-pages{display:flex;gap:.35rem;flex-wrap:wrap}
.mfb-pager-of{margin-left:auto;color:var(--mfb-muted);font-size:.875rem}

.mfb-console-launch{display:flex;justify-content:flex-end;margin:0 0 1rem}

/* Profile presets. "news" is denser and squarer than the blog reading layout. */
.mfb-profile-news .mfb-card{border-radius:8px}
.mfb-profile-news .mfb-hero{padding-bottom:1.25rem}
.mfb-profile-news .mfb-card-body{padding-top:.65rem}

/* Layout variants selected in Module Settings. Container-relative, pane-safe. */
.mfb-layout-list .mfb-grid{grid-template-columns:1fr}
.mfb-layout-compact .mfb-grid{grid-template-columns:1fr}
.mfb-layout-compact .mfb-card-image,.mfb-layout-compact .mfb-card p{display:none}
.mfb-layout-compact .mfb-card{flex-direction:row}
.mfb-layout-magazine .mfb-grid{grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}

/* ============================================================================
   [MFB-THEMEBLEED-20260730] host-theme colour guard for headings.

   Every heading rule in this sheet sets margin/size but no `color`, so headings
   take their colour by INHERITANCE from `.mfb`. An inherited value has no
   specificity, so it loses to ANY matching rule — and Oqtane themes ship bare
   `h1..h6 { color: … }`. It only looks fine on a light theme by luck; on the stock
   dark theme those headings go white on the white `.mfb-card` and vanish. This is
   the exact failure that was measured on the admin console (contrast 1.00).

   `.mfb :where(h1)` is specificity (0,1,0): it beats the theme's (0,0,1) element
   rule, and `:where()` keeps it weak enough that this sheet's own component rules
   still win. `p` and `small` are deliberately excluded — they carry `.mfb-muted`
   (also (0,1,0)), and blanketing them would flatten intentional muted text.
   ============================================================================ */
.mfb :where(h1,h2,h3,h4,h5,h6,time,figcaption,blockquote,li,th,td,label){color:inherit}

/* ============================================================================
   [MFB-THEMECOMPAT-20260730] Follow the host theme instead of assuming daylight.

   THE MEASUREMENT THAT DROVE THIS (localhost:5131, stock Oqtane 10.2.1):
     body                 #060606 / #adafae      → the default theme is DARK
     --mfb-surface        #060606                → the token chain was already correct
     .mfb-card   painted  rgb(255,255,255)       → …and the rules under it hardcoded white
     .mfb-card-body h3    rgb(173,175,174)       → grey text on that white card. Unreadable.

   So the tokens were never the problem. Everything below re-expresses the literal light
   colours in the sheet as token arithmetic, which is the only part that was missing.

   🔴 --bs-secondary-bg / --bs-tertiary-bg / --bs-border-color ARE NOT USABLE. On that same
   dark theme they measured #e9ecef, #f8f9fa and #dee2e6 — daylight values on a black page.
   Bootstrap's surface ramp is not maintained by the theme, only --bs-body-bg/-color are. Deriving
   from those two with color-mix is what makes this work on ANY skin rather than on Bootstrap's.

   color-mix is also the graceful-degradation story: a browser that does not support it drops the
   whole declaration and keeps the literal above, i.e. exactly today's light rendering.

   Percentages are chosen so a LIGHT theme lands within a shade of the original palette
   (--mfb-line 82/18 → #e0e1e4 vs the old #e4e7ec), which keeps the approved light design
   pixel-stable while giving a dark theme correct surfaces.
   ============================================================================ */

.mfb{
  /* Cards sit ON the page rather than punching a hole in it. Deliberately equal to the surface
     so a light theme renders exactly as before (white card, white page, visible border). */
  --mfb-card: var(--mfb-surface);
  /* Secondary text. This was the LAST --bs-* dependency and it measured as a real failure:
     --bs-secondary-color is not kept in step with the theme's body colour, so a light skin
     inherited the dark skin's rgba(173,175,174,.75) and body copy landed at contrast 2.21 on
     white. Deriving it from the ink the theme really uses is the only version that holds:
     dark 5.4, light 7.6, navy 8.0 — all measured, all above 4.5. */
  --mfb-muted: color-mix(in srgb, var(--mfb-ink) 72%, var(--mfb-surface));
  /* Chips, tags, wells: a slight lift in whichever direction the theme runs. */
  --mfb-fill: color-mix(in srgb, var(--mfb-surface) 92%, var(--mfb-ink) 8%);
  --mfb-line: color-mix(in srgb, var(--mfb-surface) 82%, var(--mfb-ink) 18%);
  --mfb-soft: color-mix(in srgb, var(--mfb-surface) 92%, var(--mfb-accent) 8%);
}

/* surfaces that were literal #fff */
.mfb-feature,.mfb-card,.mfb-side-card,.mfb-author-card,.mfb-panel,.mfb-editor,
.mfb-kpis>div,.mfb-gallery-sheet,.mfb-gallery-card{
  background:var(--mfb-card);color:var(--mfb-ink);
}

/* the hero's daylight gradient */
.mfb-hero{
  background:linear-gradient(145deg,
    color-mix(in srgb, var(--mfb-accent) 7%, var(--mfb-surface)), var(--mfb-surface));
}

/* form controls: white boxes with light-grey borders */
.mfb-search input,.mfb-form-grid input,.mfb-form-grid textarea,.mfb-task input,
.mfb-inline-search input,.mfb-gallery-controls input,.mfb-media-button,
.mfb-gallery-tabs button{
  border-color:var(--mfb-line);background:var(--mfb-card);color:var(--mfb-ink);
}
.mfb-search input::placeholder,.mfb-filterbar input::placeholder{color:var(--mfb-muted)}

/* pill lists */
.mfb-categories a,.mfb-tags a,.mfb-gallery-close,.mfb-gallery-thumb{
  background:var(--mfb-fill);color:var(--mfb-muted);
}
.mfb-categories a.active,.mfb-categories a:hover{background:var(--mfb-accent);color:#fff}
.mfb-tags a:hover{background:var(--mfb-soft);color:var(--mfb-accent)}

/* states and quiet prose */
.mfb-state{border-color:var(--mfb-line);background:var(--mfb-fill);color:var(--mfb-muted)}
.mfb-prose blockquote{color:var(--mfb-muted)}
.mfb-gallery-controls{background:var(--mfb-fill)}
.mfb-notice.success,.mfb-notice.error{color:#fff}
.mfb-notice.success{background:#027a48}
.mfb-notice.error{background:#b42318}

/* The card title is the exact element that measured grey-on-white. State its colour rather
   than inheriting it — see the [MFB-INHERIT] note at the top of this file. */
.mfb-card-body h3,.mfb-feature-copy h2,.mfb-section-head h2,.mfb-card-foot strong{
  color:var(--mfb-ink);
}

/* Hero with its heading turned off (the 1.4.0 default). The 76px top padding existed to give a
   72px display title room to breathe; with no title it was just a screen of empty page above the
   first story — which is exactly what it looked like. The negative top margin also goes: it was
   there to pull the hero band under the page chrome, and a bare hero is not a band. */
.mfb-hero-bare{margin-top:0;padding-top:20px;padding-bottom:28px;background:none;border-bottom:0}

/* ============================================================================
   [MFB-COMMENTS-20260808] Public article comments (1.4.0): approved list +
   submit form on the article detail page. Same house rules as above: scoped
   under .mfb, colours from the token chain, appended at end-of-file so equal
   specificity resolves by source order.
   ============================================================================ */
.mfb-comments{margin-top:44px;padding-top:26px;border-top:1px solid var(--mfb-line)}
.mfb-comments h2{margin:0 0 14px;font-size:26px;letter-spacing:-.02em}
.mfb-comments .mfb-notice{margin:0 0 14px;padding:12px 16px;border-radius:10px;font-size:14px}
.mfb-comment{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--mfb-line)}
.mfb-comment:last-of-type{border-bottom:0}
.mfb-comment .mfb-avatar{flex:0 0 auto}
.mfb-comment-body{min-width:0}
.mfb-comment-body>header{display:flex;align-items:baseline;gap:10px}
.mfb-comment-body>header small{color:var(--mfb-muted)}
.mfb-comment-body p{margin:4px 0 0;overflow-wrap:anywhere}
.mfb-comment-form{margin-top:22px;padding:20px;border:1px solid var(--mfb-line);border-radius:14px;
  background:var(--mfb-surface)}
.mfb-comment-form h3{margin:0 0 14px;font-size:18px}
.mfb-comment-form label{display:block;margin:10px 0 5px;font-size:13px;font-weight:700}
.mfb-comment-form label em{color:#b42318;font-style:normal}
.mfb-comment-form label small{color:var(--mfb-muted);font-weight:400}
.mfb-comment-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mfb-comment-form input[type=text],.mfb-comment-form input[type=email],
.mfb-comment-form textarea{width:100%;padding:.6rem .75rem;border:1px solid var(--mfb-line);
  border-radius:8px;background:var(--mfb-surface);color:var(--mfb-ink);font:inherit}
.mfb-comment-form input:focus,.mfb-comment-form textarea:focus{outline:2px solid var(--mfb-accent);
  outline-offset:0;border-color:var(--mfb-accent)}
.mfb-comment-form .mfb-btn{margin-top:14px;border:0;cursor:pointer}
.mfb-comment-form>small{display:block;margin-top:8px}
.mfb-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media(max-width:620px){.mfb-comment-grid{grid-template-columns:1fr}}

/* ============================================================================
   [MFB-LENSES-20260809] author / tag / trending / archive views. They reuse the
   card grid and pager; only the header above them changes.
   ============================================================================ */
.mfb-lens{padding:26px 0 6px}
.mfb-lens-title{margin:10px 0 6px;font-size:clamp(30px,5vw,44px);line-height:1.05;letter-spacing:-.03em}
.mfb-lens-author{display:flex;align-items:flex-start;gap:18px;margin-top:12px}
.mfb-lens-author>img,.mfb-lens-author .mfb-avatar-lg{width:84px;height:84px;flex:0 0 auto;border-radius:50%;object-fit:cover}
.mfb-lens-author h1{margin:0 0 4px;font-size:clamp(26px,4vw,38px);line-height:1.1;letter-spacing:-.02em}
.mfb-lens-author p{margin:0 0 4px}
.mfb-lens .mfb-tags{margin-top:12px}
.mfb-rank{position:absolute;left:18px;top:18px;display:inline-grid;min-width:28px;height:28px;
  place-items:center;padding:0 8px;border-radius:999px;background:var(--mfb-ink);color:var(--mfb-surface);
  font-size:13px;font-weight:800}
.mfb-archive-month{margin:26px 0 10px;font-size:18px;letter-spacing:-.01em}
.mfb-archive-list{margin:0;padding:0;list-style:none}
.mfb-archive-list li{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--mfb-line)}
.mfb-archive-list a{flex:1;min-width:0;color:var(--mfb-ink);font-weight:600}
.mfb-archive-list a:hover{color:var(--mfb-accent)}
.mfb-archive-list span{color:var(--mfb-accent);font-size:12px;white-space:nowrap}
.mfb-archive-list time{color:var(--mfb-muted);font-size:12px;white-space:nowrap}
@media(max-width:620px){.mfb-lens-author{flex-direction:column}.mfb-archive-list li{flex-wrap:wrap;gap:6px}}

/* [MFB-TOC-20260809] Article table of contents and the related-stories strip. */
/* Not floated: the article layout is already prose + aside, and a 260px float inside the prose
   left a 370px column of body text. Full width above the article reads far better. */
.mfb-toc{width:100%;margin:0 0 22px;padding:16px 18px;
  border:1px solid var(--mfb-line);border-radius:14px;background:var(--mfb-fill);
  font-family:Inter,"Segoe UI",system-ui,sans-serif;font-size:14px}
.mfb-toc strong{display:block;margin-bottom:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mfb-muted)}
.mfb-toc ol{margin:0;padding-left:18px}
.mfb-toc li{margin:4px 0;line-height:1.35}
.mfb-toc li.sub{margin-left:12px;list-style:circle;font-size:13px}
.mfb-toc a{color:var(--mfb-ink)}
.mfb-toc a:hover{color:var(--mfb-accent);text-decoration:underline}
.mfb-related{clear:both;margin-top:44px;padding-top:26px;border-top:1px solid var(--mfb-line)}
.mfb-related h2{margin:0 0 16px;font-size:22px;letter-spacing:-.02em}
.mfb-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:18px}
.mfb-related-card{display:flex;overflow:hidden;flex-direction:column;gap:6px;padding-bottom:12px;
  border:1px solid var(--mfb-line);border-radius:14px;background:var(--mfb-card);transition:transform .2s,box-shadow .2s}
.mfb-related-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px #10182814}
.mfb-related-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.mfb-related-card .mfb-chip{align-self:flex-start;margin:10px 14px 0}
.mfb-related-card strong{padding:0 14px;font-size:15px;line-height:1.3}
.mfb-related-card small{padding:0 14px;color:var(--mfb-muted);font-size:12px}
.mfb-toc ol{columns:2;column-gap:24px}
@media(max-width:620px){.mfb-toc ol{columns:1}}

/* ── formats: breaking ticker, gallery, live coverage ─────────────────── */

.mfb-breaking { background: #0f172a; color: #fff; }
.mfb-breaking .mfb-shell { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.mfb-breaking-tag {
  flex: none; padding: 3px 10px; border-radius: 999px; background: #e7000b;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.mfb-breaking a, .mfb-breaking span:not(.mfb-breaking-tag) { color: #fff; font-size: 15px; font-weight: 500; }
.mfb-breaking a:hover { text-decoration: underline; }

/* The badge that says a card is not a plain article. It sits on the image, like "Featured". */
.mfb-format {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: rgba(15, 23, 42, .85); color: #fff; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.mfb-format.live { background: #e7000b; }
.mfb-format.live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: mfb-pulse 1.6s ease-in-out infinite;
}
.mfb-format.gallery::before { content: "\25A6"; font-size: 12px; }
.mfb-format.video::before { content: "\25B6"; font-size: 10px; }
@keyframes mfb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .mfb-format.live::before { animation: none; } }

.mfb-live-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: #e7000b; color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.mfb-live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: mfb-pulse 1.6s ease-in-out infinite; }
.mfb-live-badge.ended { background: #62748e; }
.mfb-live-badge.ended::before, .mfb-live-badge.gallery::before { animation: none; }
.mfb-live-badge.gallery { background: #7f22fe; }

.mfb-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;
  margin: 0 0 32px;
}
.mfb-gallery-item { margin: 0; cursor: zoom-in; }
.mfb-gallery-item img {
  display: block; width: 100%; height: 220px; border-radius: 12px;
  background: #f1f5f9; object-fit: cover; transition: transform .2s;
}
.mfb-gallery-item:hover img { transform: scale(1.01); }
.mfb-gallery-item figcaption { padding: 8px 2px 0; color: #475569; font-size: 13px; line-height: 1.45; }
.mfb-gallery-item figcaption small { display: block; margin-top: 2px; color: #94a3b8; font-size: 11px; }

.mfb-lightbox {
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 32px;
  background: rgba(2, 6, 23, .92); cursor: zoom-out;
}
.mfb-lightbox[hidden] { display: none; }
.mfb-lightbox img { max-width: min(1100px, 92vw); max-height: 82vh; border-radius: 8px; object-fit: contain; }
.mfb-lightbox p { max-width: 720px; margin: 0; color: #e2e8f0; font-size: 14px; text-align: center; }
.mfb-lightbox-close {
  position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}

.mfb-live { margin: 40px 0; }
.mfb-live-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.mfb-live-head h2 { margin: 0; font-size: 22px; }
.mfb-live-head p { margin: 0; color: #64748b; font-size: 13px; }
.mfb-live-feed { margin: 0; padding: 0; list-style: none; border-left: 2px solid #e2e8f0; }
.mfb-live-feed li { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 0 0 24px 24px; }
.mfb-live-feed li::before {
  content: ""; position: absolute; top: 6px; left: -7px; width: 12px; height: 12px;
  border: 2px solid #fff; border-radius: 50%; background: #94a3b8;
}
.mfb-live-feed li.key::before { background: #e17100; }
.mfb-live-feed li.closing::before { background: #62748e; }
.mfb-live-feed time { color: #64748b; font-size: 13px; font-variant-numeric: tabular-nums; }
.mfb-live-feed h3 { margin: 0 0 4px; font-size: 17px; }
.mfb-live-feed p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.mfb-live-feed small { color: #94a3b8; font-size: 12px; }
.mfb-key-flag {
  display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 999px;
  background: #fffbeb; color: #e17100; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.mfb-keymoments ol { margin: 0; padding-left: 18px; }
.mfb-keymoments li { margin-bottom: 10px; font-size: 14px; line-height: 1.45; }
.mfb-keymoments small { display: block; color: #94a3b8; font-size: 12px; }

@media (max-width: 640px) {
  .mfb-live-feed li { grid-template-columns: 1fr; gap: 4px; }
  .mfb-gallery-item img { height: 180px; }
}

/* A rendered template owns the surface; .mfb-tpl exists so a template can scope its own CSS and
   so the built-in look does not bleed into it. Only the reset stays. */
.mfb-tpl { padding: 0; }
.mfb-tpl-stamp {
  width: min(1180px, calc(100% - 36px)); margin: 8px auto 24px; padding: 8px 12px;
  border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc;
  color: #64748b; font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 12px;
}

/* ---- article-list: the built-in face of a TREE channel (1.17.0) ------------------------
   Tree on the left, the open article on the right, one page. This is the fallback a channel
   gets before anyone writes a template for it, and the design a broken template falls back to.
   A DNN skin styles h1..h6 and a/p DIRECTLY and a direct rule beats an inherited one, so the
   font is declared on the elements, not only on the wrapper. */
.mfb-tree-shell {
  /* Wide enough for the left pane to be a real ARTICLE LIST - title, section and a line of
     description - rather than a strip of nav links. */
  display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 44px; align-items: start;
  width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 56px;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; color: #0f172a;
}
.mfb-tree-shell h1, .mfb-tree-shell h2, .mfb-tree-shell h3, .mfb-tree-shell h4,
.mfb-tree-shell p, .mfb-tree-shell a, .mfb-tree-shell li, .mfb-tree-shell small,
.mfb-tree-shell strong, .mfb-tree-shell td, .mfb-tree-shell th { font-family: inherit; }
.mfb-tree-shell a { color: inherit; text-decoration: none; }

.mfb-tree-nav { position: sticky; top: 16px; max-height: calc(100vh - 40px); overflow: auto; padding-right: 10px; }
/* The list itself is the blog's own archive markup, so only the parts that differ in this
   two-pane context are restated: a tighter section heading, and a row that can be "open". */
.mfb-tree-nav .mfb-archive-month {
  margin: 22px 0 6px; color: #64748b; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; font-family: inherit;
}
.mfb-tree-nav .mfb-archive-month:first-child { margin-top: 0; }
.mfb-tree-nav .mfb-archive-list li {
  display: block; padding: 0; border-top: 1px solid #e2e8f0; border-radius: 8px;
}
.mfb-tree-nav .mfb-archive-list li:hover { background: #f6f8fb; }
/* The whole row is one link — padding lives on the anchor so the click target covers the
   metrics line too, not just the line of title text.
   [MFB-TREE-DENSITY-20260811] Tightened once the description moved to title=: a row is now two
   short lines, and 9px of padding around them left the list looking half empty. */
.mfb-tree-nav .mfb-archive-list a { display: block; padding: 7px 12px; color: #0f172a; }
.mfb-tree-nav .mfb-archive-list a strong {
  display: block; color: inherit; font-family: inherit; font-size: 14.5px;
  font-weight: 600; line-height: 1.35;
}
.mfb-tree-nav .mfb-archive-list small {
  display: block; margin-top: 3px; color: #5b6577; font-family: inherit;
  font-size: 12.5px; line-height: 1.45;
}
/* The selected row, and the only state this list has that the blog's archive does not. */
.mfb-tree-nav .mfb-archive-list li.on { background: rgba(37, 99, 235, .10); border-top-color: transparent; }
.mfb-tree-nav .mfb-archive-list li.on a { color: #2563eb; }
.mfb-tree-nav .mfb-archive-list li.on small { color: #4b6ab0; }

.mfb-tree-main h1,
.mfb-tree-main .mfb-prose h1 { margin: 0 0 10px; font-size: clamp(27px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.mfb-tree-main .mfb-lead { margin: 0 0 24px; color: #5b6577; font-size: 17px; line-height: 1.6; }
/* 🔴 The body copy needs its own font declaration at TWO class levels deep, not the inherited one
   from .mfb-tree-shell. A DNN skin styles p / h2 / li DIRECTLY, and its rule can carry the same
   specificity as a single-class ancestor selector and simply come later in the cascade. Measured:
   the headline was Inter while every paragraph, heading and list item inside the article fell back
   to the skin's serif — which also broke Vietnamese diacritics, because that serif face composes
   them badly ("tuyê´n" instead of "tuyến"). */
.mfb-tree-main .mfb-prose,
.mfb-tree-main .mfb-prose h1, .mfb-tree-main .mfb-prose h2, .mfb-tree-main .mfb-prose h3,
.mfb-tree-main .mfb-prose h4, .mfb-tree-main .mfb-prose h5, .mfb-tree-main .mfb-prose h6,
.mfb-tree-main .mfb-prose p, .mfb-tree-main .mfb-prose li, .mfb-tree-main .mfb-prose a,
.mfb-tree-main .mfb-prose td, .mfb-tree-main .mfb-prose th, .mfb-tree-main .mfb-prose strong,
.mfb-tree-main .mfb-prose em, .mfb-tree-main .mfb-prose blockquote, .mfb-tree-main .mfb-prose span,
.mfb-tree-main .mfb-prose small, .mfb-tree-main .mfb-prose figcaption {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}
.mfb-tree-main .mfb-prose { font-size: 16px; line-height: 1.72; }
.mfb-tree-main .mfb-prose h2 { margin: 38px 0 12px; font-size: 25px; font-weight: 700; letter-spacing: -.015em; }
.mfb-tree-main .mfb-prose h3 { margin: 28px 0 8px; font-size: 19px; font-weight: 700; }
.mfb-tree-main .mfb-prose p { margin: 0 0 18px; }
.mfb-tree-main .mfb-prose a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.mfb-tree-main .mfb-prose ul, .mfb-tree-main .mfb-prose ol { margin: 0 0 18px; padding-left: 22px; }
.mfb-tree-main .mfb-prose li { margin-bottom: 7px; }
.mfb-tree-main .mfb-prose img { max-width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 10px; }
/* A screenshot or screen recording sits alone in its own paragraph, and max-width alone left those
   stranded: the capture is narrower than the reading column, so the rule above caps a size it never
   reaches and the figure renders as a small island with a wide empty gutter beside it. Give a
   standalone figure the full column. Scoped to `p > img:only-child` on purpose - an image sharing a
   paragraph with text is an inline badge or icon, and stretching one of those to 100% would be
   absurd. width beats max-width here because the point is to scale UP as well as down. */
.mfb-tree-main .mfb-prose p > img:only-child { display: block; width: 100%; margin: 4px 0 6px; }

/* Per-article metrics and the rating control. */
.mfb-tree-main .mfb-docmeta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid #eef1f5; color: #5b6577; font-size: 13.5px; }
.mfb-tree-main .mfb-docmeta .mfb-stars { color: #f59e0b; letter-spacing: 1px; }
.mfb-tree-main .mfb-docmeta small { color: #8a94a6; }
.mfb-rate { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 26px 0 4px; padding-top: 18px; border-top: 1px solid #eef1f5; }
.mfb-rate .mfb-rate-q { margin-right: 4px; color: #26303d; font-size: 14.5px; font-weight: 600; }
/* The stars are submit buttons on the DNN page form, so every skin rule for `button` has to be
   undone here or they arrive as grey chrome boxes. */
.mfb-rate button { padding: 2px 4px; border: 0; background: none; color: #cbd3de; font-size: 22px; line-height: 1; cursor: pointer; transition: color .12s, transform .12s; }
.mfb-rate button:hover, .mfb-rate button:focus { color: #f59e0b; transform: scale(1.12); outline: none; }
.mfb-rate .mfb-rate-msg { margin-left: 8px; color: #16794c; font-size: 13.5px; font-style: normal; }
.mfb-tree-nav .mfb-archive-list .mfb-nodemeta { display: block; margin-top: 3px; color: #8a94a6; font-size: 12px; }
.mfb-tree-nav .mfb-archive-list .mfb-nodemeta .mfb-stars { color: #f59e0b; }
.mfb-tree-main .mfb-prose blockquote { margin: 22px 0; padding: 2px 0 2px 18px; border-left: 3px solid #2563eb; color: #5b6577; }
.mfb-tree-main .mfb-prose pre { margin: 0 0 20px; padding: 16px; overflow-x: auto; border-radius: 10px; background: #0f172a; color: #e2e8f0; font-size: 13.5px; line-height: 1.6; }
.mfb-tree-main .mfb-prose code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .93em; }
.mfb-tree-main .mfb-prose :not(pre) > code { padding: 2px 6px; border-radius: 5px; background: #f6f8fb; }
.mfb-tree-main .mfb-prose table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 14.5px; }
.mfb-tree-main .mfb-prose th, .mfb-tree-main .mfb-prose td { padding: 9px 11px; border: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.mfb-tree-main .mfb-prose th { background: #f6f8fb; font-weight: 700; }
/* Markdig emits these for the DocFX "> [!NOTE]" syntax. */
.mfb-tree-main .mfb-prose .markdown-alert { margin: 0 0 20px; padding: 12px 16px; border-left: 4px solid #2563eb; border-radius: 0 8px 8px 0; background: #f6f8fb; }
.mfb-tree-main .mfb-prose .markdown-alert p:last-child { margin-bottom: 0; }
.mfb-tree-main .mfb-prose .markdown-alert-title { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.mfb-tree-main .mfb-prose .markdown-alert-warning { border-left-color: #d97706; }
.mfb-tree-main .mfb-prose .markdown-alert-important { border-left-color: #7c3aed; }
.mfb-tree-main .mfb-prose .markdown-alert-caution { border-left-color: #dc2626; }

.mfb-tree-pager { display: flex; justify-content: space-between; gap: 14px; margin-top: 34px; padding-top: 20px; border-top: 1px solid #e2e8f0; }
.mfb-tree-pager a { max-width: 46%; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 14px; }
.mfb-tree-pager a:hover { border-color: #2563eb; color: #2563eb; }
.mfb-tree-pager small { display: block; color: #5b6577; font-size: 12px; }

@media (max-width: 900px) {
  .mfb-tree-shell { grid-template-columns: 1fr; gap: 28px; }
  .mfb-tree-nav { position: static; max-height: none; }
}

/* ── [MFB-ARTICLE-COLUMN-20260811] article width, sticky rail, body type ──────────────── */
/* Measured on the live article, not inferred: the grid ran 220..1220 inside a skin whose own
   content band runs 130..1310, so the prose column was 658px and the page read as a 560px white
   gutter down the right of 12 of 15 screens.
   That gutter is NOT a centring mistake — it is the second grid column. It holds the author card
   and Topics, runs out of widgets after ~430px, and then keeps its 290px of reserved space for the
   remaining 12,000px of article. Widening the grid to the skin's band and sticking the rail keeps
   the column occupied instead of removing it: a 13,000px article wants the author and topics in
   view, not only at the top.
   Kept inside min-width:901px so the earlier single-column @media rules still win on narrow
   screens — these declarations sit later in the file and would otherwise override them. */
@media (min-width: 901px) {
  .mfb-article-layout { max-width: 1180px; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; }
  /* 176px clears the skin's fixed masthead: 40px utility bar + 120px header + 16px of air. */
  .mfb-article-layout > aside { position: sticky; top: 176px; align-self: start; max-height: calc(100vh - 200px); overflow: auto; }
}
/* Scoped to the article layout on purpose: the docs tree page reuses .mfb-prose at a different
   measure, and a bare .mfb-prose rule here would narrow that page too. */
.mfb-article-layout > .mfb-prose { max-width: 740px; font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 17px; }

/* ── [MFB-PROSE-BLOCKS-20260811] editorial blocks inside a post body ──────────────────── */
/* The classes an article body can use for a card row or a numbered sequence. They exist because
   the body of the launch post was authored as bare <div><span>Payment</span><h3>..</h3><p>..</p>,
   with no class on anything: the reader saw twelve labels floating in body type, equally far from
   the heading above and the one below, which reads as a rendering failure rather than a label.
   Diagnosed by counting the DOM, not by looking: 53 classless <div> and 8 classless <span> in one
   post body. Nothing was failing to load - there was simply nothing for CSS to attach to. */
.mfb-prose .mfb-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 16px; margin: 28px 0; }
.mfb-prose .mfb-block { padding: 18px 20px; border: 1px solid var(--mfb-line); border-radius: 14px; background: var(--mfb-card, #fff); }
.mfb-prose .mfb-block h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; }
.mfb-prose .mfb-block p { margin: 0; color: var(--mfb-muted); font-size: 15px; line-height: 1.6; }
/* The label. A chip, so it belongs to the card it sits in and stops competing with the heading. */
.mfb-prose .mfb-block-tag { display: inline-block; margin-bottom: 9px; padding: 4px 10px; border-radius: 999px;
  background: var(--mfb-soft); color: var(--mfb-accent); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
/* The step number. Given weight of its own so "1" outranks the sentence under it rather than
   sitting smaller and paler than the body copy, which is how it shipped. */
.mfb-prose .mfb-block-num { display: inline-grid; width: 30px; height: 30px; margin-bottom: 10px; place-items: center;
  border-radius: 999px; background: var(--mfb-accent); color: #fff; font-size: 14px; font-weight: 800; }