/* ============================================================
MUSCLE + BRAWN — WordPress layer
Everything the mock-up didn't cover: article pages, archives,
comments, widgets, blocks. Same tokens, same voice.
============================================================ */
/* ---------- Accessibility & utility ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--paper);border-radius:6px;box-shadow:0 0 2px 2px rgba(11,18,32,.6);clip:auto!important;clip-path:none;color:var(--ink);display:block;font-family:var(--display);font-weight:700;font-size:14px;height:auto;left:12px;line-height:normal;padding:14px 20px;text-decoration:none;top:12px;width:auto;z-index:200}
.mb-hp{position:absolute!important;left:-9999px!important;height:1px;width:1px;overflow:hidden}
.alignleft{float:left;margin:6px 28px 20px 0}
.alignright{float:right;margin:6px 0 20px 28px}
.aligncenter{margin-inline:auto}
/* ---------- Newsletter form states ---------- */
.mb-form-msg{font-family:var(--mono);font-size:11px;color:var(--news);margin-top:8px;min-height:1em;flex-basis:100%}
.mb-form-msg:empty{display:none}
.header-subscribe .mb-form-msg{display:none}
.mb-inline-subscribe{margin-block:32px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2)}
.mb-esp-form{margin-block:20px}
/* ---------- Search form ---------- */
.mb-search-inp{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding-left:14px;transition:border-color .18s,box-shadow .18s}
.mb-search-inp:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mb-search-inp svg{width:17px;height:17px;color:var(--faint);flex-shrink:0}
.mb-search-inp input{flex:1;min-width:0;border:none;background:transparent;font-size:.98rem;color:var(--ink);padding:13px 0}
.mb-search-inp input:focus{outline:none}
.mb-search-inp .btn{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
/* ---------- Archive header ---------- */
.archive-head{max-width:760px;margin-bottom:clamp(28px,4vw,44px)}
.archive-head .h-sec{margin-top:14px}
.archive-desc{color:var(--muted);font-size:1.06rem;margin-top:14px;max-width:62ch}
.archive-desc p+p{margin-top:12px}
.archive-search{margin-top:24px;max-width:520px}
/* ---------- Entry header ---------- */
.entry-head{padding-top:clamp(28px,4vw,48px)}
/* .entry-head-inner is also .wrap. It once carried a second, narrower
max-width, which centred the heading block and indented the title. The fix
applied then was max-width:none, and that traded one bug for a worse one:
with no cap at all the header ran the full width of the window, so on a wide
screen the title began well to the left of the article body beneath it.
Neither is needed. .wrap supplies the width and the gutters, and the cap
belongs on the text — .entry-title holds 20ch and .entry-dek 64ch below,
and a block with a max-width and no auto margins already sits left. */
.crumbs{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:20px;flex-wrap:wrap}
.crumbs a{color:var(--muted);transition:color .16s}
.crumbs a:hover{color:var(--accent)}
.crumbs span{color:var(--line-strong)}
.entry-title{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.05;letter-spacing:0;color:var(--ink);margin-top:14px;max-width:20ch}
.entry-dek{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--muted);line-height:1.55;margin-top:18px;max-width:64ch}
.entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.entry-meta .meta{display:inline-flex;align-items:center;gap:7px;text-transform:none;font-size:11.5px;letter-spacing:.02em;color:var(--muted)}
.entry-meta .meta a{color:var(--ink);font-weight:600}
.entry-meta .meta a:hover{color:var(--accent)}
.entry-meta .reviewed{color:var(--accent)}
.entry-meta .reviewed svg{flex-shrink:0}
.entry-figure{margin-top:clamp(24px,3vw,36px);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative}
/* No fixed box here, so height follows the image. object-fit had nothing to
act on, and would only have started cropping if a height were ever added. */
.entry-figure img{width:100%;height:auto;display:block}
.entry-figure figcaption{font-family:var(--mono);font-size:11px;color:var(--faint);padding:12px 16px;background:var(--paper-2);border-top:1px solid var(--line)}
/* ---------- Entry layout ---------- */
.entry-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:30px;padding-block:clamp(36px,5vw,56px) clamp(48px,7vw,80px)}
.entry-layout.no-aside{grid-template-columns:minmax(0,1fr);max-width:860px}
/* page.php pairs .no-aside with .entry-head-inner, and .no-aside is a centred
860px column. The header has to be centred to the same 860 or the title
hangs to the left of the body text it introduces. This is the one place a
narrower cap on a .wrap is wanted rather than a mistake: the block it lines
up with is centred too. single.php uses the full-width .entry-layout, so its
header stays at the ordinary wrap and is untouched by this. */
.entry-page .entry-head-inner{max-width:860px}
.entry-main{min-width:0}
.entry-aside{min-width:0}
.aside-sticky{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
@media(max-width:980px){
.entry-layout{grid-template-columns:1fr}
.aside-sticky{position:static}
}
/* ---------- Entry content typography ---------- */
.entry-content{font-size:1.06rem;line-height:1.75;color:var(--text)}
.entry-content>*+*{margin-top:1.25em}
.entry-content h2{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.4vw,1.95rem);line-height:1.15;letter-spacing:-.008em;color:var(--ink);margin-top:1.9em;scroll-margin-top:120px}
.entry-content h3{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,1.8vw,1.4rem);line-height:1.25;color:var(--ink);margin-top:1.6em;scroll-margin-top:120px}
.entry-content h4{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ink);margin-top:1.5em}
.entry-content h2+*,.entry-content h3+*,.entry-content h4+*{margin-top:.7em}
.entry-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);transition:text-decoration-color .16s,color .16s}
.entry-content a:hover{color:var(--accent-hover);text-decoration-color:currentColor}
.entry-content strong,.entry-content b{color:var(--ink);font-weight:700}
.entry-content ul,.entry-content ol{padding-left:1.35em}
.entry-content li+li{margin-top:.5em}
.entry-content li::marker{color:var(--accent)}
.entry-content blockquote{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:20px 24px;font-size:1.1rem;color:var(--ink)}
.entry-content blockquote cite{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.entry-content img,.entry-content figure img{border-radius:var(--radius-sm)}
.entry-content figure{margin-block:2em}
.entry-content figcaption{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:10px;text-align:center}
.entry-content hr{border:none;border-top:1px solid var(--line);margin-block:2.4em}
.entry-content code{font-family:var(--mono);font-size:.86em;background:var(--paper-3);padding:2px 6px;border-radius:4px;color:var(--ink)}
.entry-content pre{background:var(--ink);color:#E9EDF7;padding:20px;border-radius:var(--radius-sm);overflow-x:auto;font-family:var(--mono);font-size:.85rem;line-height:1.6}
.entry-content pre code{background:none;padding:0;color:inherit}
/* Tables are styled further down, under "Article tables". The rule that used to
sit here made the table itself display:block with overflow-x:auto — a common
trick, but it stops the cells behaving like table cells, so width:100% and
column alignment both go. The scrolling now belongs to a wrapper around it. */
.entry-content .wp-block-button__link{background:var(--data);color:#fff;font-family:var(--display);font-weight:700;border-radius:var(--radius-sm);padding:13px 22px;text-decoration:none;display:inline-block}
.entry-content .wp-block-button__link:hover{filter:brightness(1.07)}
.entry-content .is-style-outline .wp-block-button__link{background:none;border:1px solid var(--line-strong);color:var(--ink)}
.entry-content .wp-block-pullquote{border-block:2px solid var(--accent);padding:28px 0;text-align:center}
.entry-content .wp-block-separator{border-top:1px solid var(--line)}
.entry-content .alignwide{width:min(100vw - var(--gutter)*2,1060px);max-width:none;margin-inline:calc(50% - min(50vw - var(--gutter),530px))}
.entry-content .alignfull{width:100vw;max-width:none;margin-inline:calc(50% - 50vw)}
.entry-content .wp-caption-text{font-family:var(--mono);font-size:11px;color:var(--faint)}
.page-links{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;margin-top:2.4em}
.page-links a{border:1px solid var(--line-strong);border-radius:6px;padding:6px 12px}
.page-links a:hover{border-color:var(--accent);color:var(--accent)}
/* ---------- Tags ---------- */
.entry-tags{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tag-chip{font-family:var(--mono);font-size:11px;letter-spacing:.04em;border:1px solid var(--line-strong);border-radius:999px;padding:6px 13px;color:var(--muted);transition:.16s}
.tag-chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
/* ---------- Reviewer card under an article ---------- */
.entry-reviewer{margin-top:32px}
.after-article{margin-top:32px}
/* ---------- Widgets ---------- */
.widget{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--sh-card)}
.widget-title{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:14px}
.widget ul{list-style:none}
.widget li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.94rem}
.widget li:last-child{border-bottom:none}
.widget a{color:var(--text);transition:color .16s}
.widget a:hover{color:var(--accent)}
.widget select{width:100%;padding:10px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--paper)}
/* ---------- Pagination ---------- */
.mb-pagination{margin-top:clamp(36px,5vw,56px)}
.pg-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.pg-inner .page-numbers{display:inline-flex;align-items:center;gap:8px;min-width:42px;height:42px;padding-inline:14px;justify-content:center;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--ink);transition:.16s}
.pg-inner .page-numbers svg{width:15px;height:15px}
.pg-inner a.page-numbers:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.pg-inner .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.pg-inner .page-numbers.dots{border:none}
/* ---------- Comments ---------- */
.comments{margin-top:48px;padding-top:36px;border-top:1px solid var(--line)}
.comments-title{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--ink);margin-bottom:22px}
.comment-list{list-style:none}
.comment-list ol{list-style:none;padding-left:clamp(16px,4vw,44px)}
.comment-body{padding:20px 0;border-bottom:1px solid var(--line)}
.comment-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.comment-author{font-family:var(--display);font-weight:700;color:var(--ink);font-size:.95rem;display:flex;align-items:center;gap:10px}
.comment-author img{border-radius:50%}
.comment-metadata{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.comment-content{font-size:.98rem;line-height:1.7}
.comment-content>*+*{margin-top:.9em}
.reply{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.reply a{color:var(--accent)}
.comment-notes,.comment-form .logged-in-as{font-size:.88rem;color:var(--muted);margin-bottom:16px}
.comment-form{margin-top:28px}
.comment-form p{margin-bottom:16px}
.comment-form label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--paper);padding:12px 14px;font-size:1rem;color:var(--ink);transition:border-color .18s,box-shadow .18s}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.comment-form .comment-form-cookies-consent{display:flex;align-items:center;gap:9px}
.comment-form .comment-form-cookies-consent label{margin:0;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.9rem}
.no-comments{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:16px}
.comment-navigation{display:flex;justify-content:space-between;gap:16px;margin-top:24px;font-family:var(--mono);font-size:12px}
/* ---------- Empty state ---------- */
.mb-empty{max-width:560px;margin-inline:auto;text-align:center;padding-block:clamp(40px,7vw,72px)}
.mb-empty .empty-ico{width:38px;height:38px;color:var(--faint);margin-inline:auto;margin-bottom:20px}
.mb-empty h2{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--ink)}
.mb-empty p{color:var(--muted);margin-top:12px}
.mb-empty form,.mb-empty .btn{margin-top:24px}
/* ---------- Related ---------- */
.related .latest-hd{margin-bottom:8px}
/* ---------- Tools rail without the calculator ---------- */
.tools-wrap.no-calc{grid-template-columns:1fr}
.tools-wrap.no-calc .tool-list{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* ---------- Author meta bar ---------- */
@media(max-width:640px){
.author-meta-bar{gap:16px;padding:14px 16px}
}
/* ---------- Sidebar: The Morning Dose ---------- */
.side-dose{background:linear-gradient(150deg,#5B76F5 0%,#3D5AF0 45%,#2E43D6 100%);color:#fff;
border:0;border-radius:var(--radius);padding:28px 26px;margin-top:22px;
box-shadow:0 14px 30px -10px rgba(52,88,250,.5)}
.side-dose h3{font-family:var(--display);font-weight:700;font-size:14.5px;line-height:1.4;color:#fff;opacity:.92;
text-transform:none;letter-spacing:0;margin:0 0 14px}
.side-dose h4{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.35;color:#fff;margin:0 0 10px}
.side-dose p{font-size:13.5px;line-height:1.6;color:#DCE2FC;margin:0 0 18px}
.side-dose .fine{font-size:11px;color:#B7C7E8;margin-top:8px}
.side-dose form{display:block}
.side-dose input[type=email]{width:100%;padding:12px 14px;border:0;border-radius:var(--radius);
font-family:var(--body);font-size:13.5px;color:var(--ink);background:#fff;margin-bottom:12px}
.side-dose input[type=email]::placeholder{color:#9AA1B5}
.side-dose input[type=email]:focus{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.side-dose .btn,.side-dose button{display:block;width:100%;padding:12px;border:0;border-radius:var(--radius);
background:var(--data);color:#fff;font-family:var(--display);font-weight:700;
font-size:13.5px;text-align:center;cursor:pointer;
box-shadow:0 6px 16px -4px rgba(0,0,0,.25);transition:filter .15s ease,transform .15s ease}
.side-dose .btn:hover,.side-dose button:hover{filter:brightness(1.07);transform:translateY(-1px)}
.side-dose .mb-form-msg{font-size:12px;color:#DCE2FC;margin:10px 0 0;min-height:1em}
.side-dose .mb-hp{position:absolute;left:-9999px}
/* Measure
--------
The page is 1480px wide, which gives the article column roughly 937px. At the
body size that is about 109 characters a line, well past the 60 to 75 where
the eye still finds the next line reliably. Capping the flow elements keeps
reading comfortable while the page itself stays wide for boards, listings,
the header and the footer. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote,
.entry-content > .wp-block-heading,
.entry-content > .wp-block-paragraph,
.entry-content > .wp-block-list,
.entry-content > .wp-block-quote {
max-width: 74ch;
}
/* Anything visual keeps the full column: images, tables, embeds, separators
and blocks that were designed to fill the width. */
.entry-content > figure,
.entry-content > table,
.entry-content > iframe,
.entry-content > hr,
.entry-content > .wp-block-image,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-table,
.entry-content > .wp-block-embed,
.entry-content > .wp-block-separator,
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > .wp-block-group,
.entry-content > .wp-block-columns {
max-width: none;
}
@media (max-width: 980px) {
/* One column already constrains the measure, so let it be. */
.entry-content > * {
max-width: none;
}
}
/* Application screens inside the measure
-------------------------------------
The cap above keeps article prose readable, but a dashboard, a planner or an
atlas is not prose: they are laid out to a width of their own. A shortcode
dropped into a paragraph block inherits the cap from that paragraph, so the
exception has to reach the paragraph as well as the panel. */
.entry-content > .ma-account,
.entry-content > .ma-signed-out,
.entry-content > .ma-card,
.entry-content > .dp,
.entry-content > .ci-wrap,
.entry-content > p:has(> .ma-account),
.entry-content > p:has(> .ma-signed-out),
.entry-content > p:has(> .ma-card),
.entry-content > p:has(> .dp),
.entry-content > .wp-block-paragraph:has(> .ma-account),
.entry-content > .wp-block-paragraph:has(> .dp),
.entry-content > .wp-block-shortcode {
max-width: none;
}
/* A shortcode returning block level markup inside a paragraph leaves an empty
paragraph behind once the browser closes it. */
.entry-content > p:empty {
display: none;
}
/* Header submenus
---------------
The header nav was a single row of links. These give a top level item with
children a dropdown, opened by hover, by keyboard focus, or by the caret
button on touch, where there is no hover to rely on. */
.nav-has-sub {
position: relative;
display: inline-flex;
align-items: center;
}
.nav-caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 6px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
opacity: 0.55;
transition: transform 0.18s ease;
}
.nav-has-sub:hover .nav-caret,
.nav-has-sub:focus-within .nav-caret,
.nav-has-sub.is-open .nav-caret {
transform: rotate(180deg);
}
/* A wider hit area on touch, invisible on a pointer. */
.nav-sub-toggle {
position: absolute;
inset: 0;
border: 0;
background: none;
padding: 0;
cursor: pointer;
display: none;
}
.nav-sub {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 210px;
margin: 0;
padding: 6px;
list-style: none;
background: var(--paper, #fff);
border: 1px solid var(--line, #e6e9f0);
border-radius: var(--radius-sm, 8px);
box-shadow: 0 18px 40px -18px rgba(19, 27, 46, 0.4);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
z-index: 60;
}
/* A gap between the link and the panel would drop the hover on the way down,
so the panel reaches up behind it. */
.nav-sub::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -10px;
height: 10px;
}
.nav-has-sub:hover .nav-sub,
.nav-has-sub:focus-within .nav-sub,
.nav-has-sub.is-open .nav-sub {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-sub li {
margin: 0;
list-style: none;
}
.nav-sub a {
display: block;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.94rem;
line-height: 1.35;
color: var(--ink-2, #4a5060);
text-decoration: none;
white-space: nowrap;
}
.nav-sub a:hover,
.nav-sub a:focus-visible,
.nav-sub a.on {
background: var(--accent-soft, #e9edfe);
color: var(--accent, #3458fa);
}
@media (prefers-reduced-motion: reduce) {
.nav-sub,
.nav-caret {
transition: none;
}
}
/* Touch: there is no hover, so the caret becomes the control. */
@media (hover: none) {
.nav-sub-toggle {
display: block;
position: static;
width: 26px;
height: 26px;
margin-left: -22px;
}
.nav-has-sub:hover .nav-sub {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.nav-has-sub.is-open .nav-sub {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
/* A provider's embedded signup form
--------------------------------
Their markup, their styling. This only gives it room to sit in and stops it
inheriting widths meant for the built-in form. */
.mb-esp--embed {
width: 100%;
max-width: 100%;
}
.mb-esp--embed > * {
max-width: 100%;
}
/* In the header the row is tight, so an embed there is capped rather than
allowed to push the navigation around. */
.mb-esp-header.mb-esp--embed {
max-width: 420px;
}
.mb-esp-dose.mb-esp--embed {
margin: 20px 0 0;
}
.mb-esp-aside.mb-esp--embed {
margin: 12px 0 0;
}
/* ===== Contact page ===== */
/* ===== CMS pages: privacy, disclaimers, methodology, guidelines ===== */
.cms-hero {
position: relative;
overflow: hidden;
padding-block: clamp(38px, 5.5vw, 64px) clamp(32px, 4.5vw, 56px);
background:
radial-gradient(680px 420px at 88% -8%, var(--accent-soft) 0%, rgba(233, 237, 254, 0) 70%),
radial-gradient(520px 360px at -6% 90%, var(--data-soft) 0%, rgba(253, 236, 245, 0) 70%),
var(--paper-2);
border-bottom: 1px solid var(--line);
}
.cms-hero-media {
position: absolute;
inset: 0;
z-index: 0;
}
.cms-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Washed out rather than darkened: these pages read as documents, and the
picture is a backdrop to them rather than the subject. */
.cms-hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
92deg,
rgba(247, 249, 255, 0.97) 0%,
rgba(247, 249, 255, 0.9) 46%,
rgba(247, 249, 255, 0.62) 100%
);
}
.cms-hero-inner {
position: relative;
z-index: 1;
padding-left:25px;
}
.cms-crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
color: var(--muted);
margin-bottom: 20px;
}
.cms-crumbs a {
color: var(--muted);
text-decoration: none;
}
.cms-crumbs a:hover {
color: #3458fa;
}
.cms-sep {
color: var(--line-strong);
}
.cms-current {
color: var(--ink);
}
.cms-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
background: #e9edfe;
color: #3458fa;
font-family: var(--mono);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 7px 13px;
border-radius: 8px;
margin-bottom: 16px;
}
.entry-cms .cms-hero h1 {
font-family: var(--display);
font-size: clamp(30px, 4.4vw, 48px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
max-width: 20ch;
color: var(--ink);
}
.cms-hero-sub {
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.6;
color: var(--muted);
margin: 14px 0 0;
max-width: 62ch;
}
/* ===== Contents list ===== */
/* The list as written in the editor. On a wide screen it sits in the flow of
the page; on a phone it is replaced by the bar below once it scrolls past. */
.side-nav {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin: 0 0 28px;
}
.side-nav h4 {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 10px;
}
.side-nav ol {
list-style: none;
margin: 0;
padding: 0;
counter-reset: none;
}
.side-nav li {
border-left: 2px solid transparent;
margin: 0;
}
.side-nav li.active,
.side-nav li:hover {
border-left-color: var(--accent);
}
.side-nav a {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 0 8px 14px;
font-size: 14.5px;
font-weight: 600;
line-height: 1.35;
color: var(--muted);
text-decoration: none;
}
.side-nav a:hover,
.side-nav li.active a {
color: var(--accent);
}
/* The body headings number their sections in the page's own face; the list
should match. IBM Plex Mono draws a slashed zero, which beside an unslashed
one in the same document reads as two different numbering schemes. */
.side-nav .num {
flex: 0 0 auto;
font-size: 12.5px;
font-weight: 700;
color: var(--line-strong);
font-variant-numeric: tabular-nums;
}
.side-nav li.active .num,
.side-nav a:hover .num {
color: var(--accent);
}
/* The bar that stands in for it on a phone.
---------------------------------------
Fixed rather than sticky: it has to sit under a header whose height changes
with the viewport, so its position is measured and set rather than declared. */
.toc-bar {
position: fixed;
left: 0;
right: 0;
z-index: 90;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
box-shadow: 0 6px 18px -12px rgba(19, 27, 46, 0.45);
}
.toc-bar[hidden] {
display: none;
}
.toc-bar__button {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 9px 16px;
background: none;
border: 0;
font: inherit;
text-align: left;
cursor: pointer;
color: var(--ink);
}
.toc-bar__text {
min-width: 0;
flex: 1;
}
.toc-bar__label {
display: block;
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 1px;
}
.toc-bar__current {
display: block;
font-size: 13.5px;
font-weight: 700;
letter-spacing: -0.01em;
/* One line: the bar names the section, it does not quote it. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.toc-bar__num {
color: var(--accent);
margin-right: 7px;
font-variant-numeric: tabular-nums;
}
.toc-bar__chev {
width: 17px;
height: 17px;
flex: none;
color: var(--muted);
transition: transform 0.22s ease;
}
.toc-bar.is-open .toc-bar__chev {
transform: rotate(180deg);
}
.toc-bar__list {
max-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
transition: max-height 0.28s ease;
border-top: 1px solid transparent;
}
.toc-bar.is-open .toc-bar__list {
border-top-color: var(--line);
}
.toc-bar__list ol {
list-style: none;
margin: 0;
padding: 6px 16px 12px;
}
.toc-bar__list li {
margin: 0;
border-left: 2px solid transparent;
}
.toc-bar__list li.is-current {
border-left-color: var(--accent);
}
.toc-bar__list a {
display: flex;
align-items: baseline;
gap: 10px;
padding: 10px 0 10px 12px;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: var(--muted);
text-decoration: none;
}
.toc-bar__list li.is-current a {
color: var(--accent);
}
.toc-bar__list a .toc-bar__num {
color: var(--line-strong);
margin-right: 0;
flex: none;
}
.toc-bar__list li.is-current a .toc-bar__num {
color: var(--accent);
}
/* Headings need to clear both the site header and the bar when jumped to. */
@media (max-width: 900px) {
.entry-content h2[id] {
scroll-margin-top: 130px;
}
}
@media (prefers-reduced-motion: reduce) {
.toc-bar__list,
.toc-bar__chev {
transition: none;
}
}
/* Part of a page title, picked out in the brand blue.
------------------------------------------------
Stated outright rather than through --accent. That property can be reset by
the Customizer, and anything on the page carrying an inline style inherits
whatever it sets, so a title on one page could come out a different colour
from the same title on another. This is a fixed part of the page furniture
and should not move with a theme setting. */
.title-accent {
color: #3458fa;
}
/* ===== Full width sections inside page content =====
For a section written in a Custom HTML block that needs its background to
reach the window edges. The content sits inside .wrap, which caps it at the
site width, so a coloured section drawn there stops short of the edge.
Put mb-bleed on the outer element and .wrap on an inner one: the background
runs the full width while the words stay on the same measure as everything
else on the page.
*/
.entry-content .mb-bleed {
/* Pulled out by half the difference between the container and the window,
which is what reaches the edges without knowing either width. */
width: auto;
max-width: none;
margin-inline: calc(50% - 50vw);
/* The gutters come from the inner .wrap, so anything placed directly in
here still clears the window edge. */
padding-inline: 0;
}
/* A scrollbar is not counted in 100vw, so on a page with one the section would
otherwise be a scrollbar's width too wide and add a horizontal scroll. */
@supports (width: 100dvw) {
.entry-content .mb-bleed {
margin-inline: calc(50% - 50dvw);
}
}
/* A bleed section supplies its own padding down the page; the wrap inside it
supplies the padding across. */
.entry-content .mb-bleed > .wrap {
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* The two backgrounds these sections tend to want. */
.entry-content .mb-bleed.is-white {
background: var(--paper);
}
.entry-content .mb-bleed.is-tint {
background: var(--paper-2);
}
/* ===== Contact Form 7 forms in page content =====
Written against the markup Contact Form 7 produces, so a form can be dropped
into a page with a shortcode and look like the rest of the site. Scoped to
page content, so it cannot reach a form anywhere else. */
.entry-content .wpcf7 {
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
padding: clamp(24px, 3vw, 40px);
box-shadow: 0 2px 8px rgba(19, 27, 46, 0.05),
0 24px 48px -20px rgba(52, 88, 250, 0.18);
}
.entry-content .wpcf7 form {
display: flex;
flex-direction: column;
gap: 20px;
}
.mb-form-head h2 {
font-family: var(--display);
font-size: clamp(20px, 2.4vw, 24px);
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 6px;
color: var(--ink);
}
.mb-form-head p {
color: var(--muted);
font-size: 14.5px;
line-height: 1.55;
margin: 0;
}
.mb-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.mb-field > label {
font-size: 14px;
font-weight: 700;
color: var(--ink);
}
/* Contact Form 7 wraps every control in a span of its own, which would
otherwise sit between the label and the field as an inline box. */
.entry-content .wpcf7 .wpcf7-form-control-wrap {
display: block;
}
.entry-content .wpcf7 input[type="text"],
.entry-content .wpcf7 input[type="email"],
.entry-content .wpcf7 input[type="url"],
.entry-content .wpcf7 input[type="tel"],
.entry-content .wpcf7 textarea {
width: 100%;
font-family: var(--ui, inherit);
font-size: 14.5px;
padding: 12px 14px;
border: 1.5px solid var(--line);
border-radius: 8px;
color: var(--ink);
background: var(--paper-2);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.entry-content .wpcf7 textarea {
min-height: 130px;
resize: vertical;
}
.entry-content .wpcf7 input:focus,
.entry-content .wpcf7 textarea:focus {
outline: none;
border-color: #3458fa;
background: var(--paper);
box-shadow: 0 0 0 3px rgba(52, 88, 250, 0.14);
}
.entry-content .wpcf7 ::placeholder {
color: var(--faint);
}
/* Yes and no, as a pair of buttons rather than dots. */
.entry-content .wpcf7 .wpcf7-radio {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.entry-content .wpcf7 .wpcf7-list-item {
margin: 0;
}
.entry-content .wpcf7 .wpcf7-list-item label {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
padding: 10px 18px;
border: 1.5px solid var(--line);
border-radius: 8px;
background: var(--paper-2);
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.entry-content .wpcf7 .wpcf7-list-item label:hover {
border-color: #3458fa;
}
/* :has lets the whole button light up rather than only the dot inside it.
Where it is unsupported the radio still works, it simply does not fill. */
.entry-content .wpcf7 .wpcf7-list-item label:has(input:checked) {
border-color: #3458fa;
background: var(--accent-soft);
color: #3458fa;
}
.entry-content .wpcf7 .wpcf7-list-item input[type="radio"] {
accent-color: #3458fa;
width: 16px;
height: 16px;
margin: 0;
}
.mb-form-submit {
margin-top: 4px;
}
.entry-content .wpcf7 input[type="submit"] {
display: block;
width: 100%;
background: #3458fa;
color: #fff;
font-family: inherit;
font-weight: 700;
font-size: 15.5px;
padding: 15px 22px;
border: 0;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 10px 24px -10px rgba(52, 88, 250, 0.45);
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.entry-content .wpcf7 input[type="submit"]:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 14px 28px -10px rgba(52, 88, 250, 0.5);
}
/* While it is sending */
.entry-content .wpcf7 .wpcf7-spinner {
margin: 10px auto 0;
display: block;
}
/* What it says back
----------------
Contact Form 7 prints one message element and changes its class, so each
state is styled rather than each being its own box. */
.entry-content .wpcf7 .wpcf7-response-output {
margin: 4px 0 0;
padding: 13px 16px;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
background: var(--paper-2);
color: var(--ink);
}
.entry-content .wpcf7 form.sent .wpcf7-response-output {
border-color: rgba(28, 122, 74, 0.4);
background: #e8f6ee;
color: #14603a;
}
.entry-content .wpcf7 form.invalid .wpcf7-response-output,
.entry-content .wpcf7 form.failed .wpcf7-response-output,
.entry-content .wpcf7 form.aborted .wpcf7-response-output {
border-color: rgba(176, 52, 52, 0.35);
background: #fceeed;
color: #8f2626;
}
/* A field that needs attention says so under itself, in the same place every
time, rather than in a tooltip that moves. */
.entry-content .wpcf7 .wpcf7-not-valid-tip {
display: block;
font-size: 12.5px;
font-weight: 600;
color: #b03434;
margin-top: 6px;
}
.entry-content .wpcf7 .wpcf7-not-valid {
border-color: rgba(176, 52, 52, 0.55);
}
.entry-content .wpcf7 .screen-reader-response {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ===== Article hero =====
The default backdrop for every article. A picture behind the title rather
than above it, so the page opens on the words and the image sets the tone
without pushing the article down the screen. */
.single .entry-head {
position: relative;
overflow: hidden;
padding-top: clamp(30px, 4vw, 46px);
padding-bottom: clamp(4px, 1vw, 12px);
background-color: var(--paper-2);
background-image:
/* Two soft washes of colour, then the photograph, which is held to the
right so the words never sit over the busy part of it. */
radial-gradient(680px 420px at 88% -8%, var(--accent-soft) 0%, rgba(233, 237, 254, 0) 70%),
radial-gradient(520px 360px at -6% 90%, var(--data-soft) 0%, rgba(253, 236, 245, 0) 70%),
linear-gradient(90deg,
var(--paper-2) 0%,
var(--paper-2) 40%,
rgba(245, 248, 255, 0.6) 62%,
rgba(245, 248, 255, 0.15) 100%),
url("../img/article-hero.webp");
background-repeat: no-repeat;
background-size: auto, auto, auto, 78%;
background-position: 0 0, 0 0, 0 0, right center;
}
/* A page with its own featured image does not need the stock one behind the
title as well. */
.single.has-post-thumbnail .entry-head {
background-image:
radial-gradient(680px 420px at 88% -8%, var(--accent-soft) 0%, rgba(233, 237, 254, 0) 70%),
radial-gradient(520px 360px at -6% 90%, var(--data-soft) 0%, rgba(253, 236, 245, 0) 70%);
}
.single .entry-head-inner,
.single .entry-head > .wrap {
position: relative;
z-index: 1;
}
/* Height comes from the padding, as it does in the design. Making this a flex
container to centre the words vertically had a side effect: .entry-head-inner
is also .wrap, and a flex item sizes to its content rather than to the
container, so the wrap shrank to fit the title and its auto margins then
centred that shrunken box. */
.single .entry-head {
padding-top: clamp(34px, 4.5vw, 52px);
padding-bottom: clamp(24px, 3vw, 36px);
}
@media (max-width: 900px) {
.single .entry-head {
background-size: auto, auto, auto, cover;
}
}
/* ===== Article hero, ported from the design ===== */
/* The words keep to a measure of their own, clear of the photograph behind.
----------------------------------------------------------------------
The cap goes on the children, not on .entry-head-inner itself. That element
is also .wrap, which centres what it holds; a narrower max-width on the same
element therefore centres that narrower block instead of aligning it left.
Children with a max-width and no auto margins sit against the left edge,
which is what is wanted.
What must NOT happen is removing the cap from .entry-head-inner. It carried
max-width:none, which took away the 1480px .wrap gives it, so on any screen
wider than that the hero ran to the window edges while the article below
stayed centred — the title started left of its own body text. The element
keeps the ordinary .wrap width; only the children are held to the measure. */
.single .entry-head-copy > *,
.single .entry-head-copy > a > .cat-badge {
max-width: 820px;
}
/* ----- The hero grid: words on the left, the post's own picture on the right.
Same proportions as the front page hero so an article opens the way the site
does. The grid goes on this inner element, not on .entry-head-inner: that one
is also .wrap and its job is the page width, which is easier to reason about
if it is not also a layout container. ----- */
.single .entry-head-grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
/* No featured image: one column, and the copy keeps its 820px measure exactly
as it did before. */
.single .entry-head-grid.is-solo {
grid-template-columns: minmax(0, 1fr);
}
/* A grid item will not shrink below its content unless told to, which is what
sends a long unbroken title out past the column. */
.single .entry-head-copy,
.single .entry-lead {
min-width: 0;
}
.single .entry-lead {
margin: 0;
border-radius: var(--radius-lg, 20px);
overflow: hidden;
background: color-mix(in srgb, var(--cat, var(--accent)) 8%, var(--paper));
border: 1px solid var(--line);
}
.single .entry-lead img {
display: block;
width: 100%;
/* mb-lead is registered as a hard crop at 1200x760, so every thumbnail is
already exactly this shape. Matching it means the picture fills the panel
with nothing letterboxed and nothing cropped twice. The framing decision
lives in add_image_size(), not here — changing the ratio in CSS alone
would only chop the crop that WordPress already made. */
aspect-ratio: 16 / 9;
object-fit: cover;
}
.single .entry-lead figcaption {
font-family: var(--mono);
font-size: 11px;
color: var(--faint);
padding: 10px 14px;
background: var(--paper-2);
border-top: 1px solid var(--line);
}
@media (max-width: 900px) {
.single .entry-head-grid {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.single .entry-lead {
max-width: 560px;
}
}
.single .crumbs {
font-size: 13.5px;
color: var(--muted);
margin-bottom: 18px;
}
.single .crumbs a {
color: var(--muted);
text-decoration: none;
}
.single .crumbs a:hover {
color: #3458fa;
}
/* The category, as a soft chip rather than a solid pill. */
.single .cat-badge,
.single .entry-head .cat-badge {
display: inline-block;
background: #e9edfe;
color: #3458fa;
font-family: var(--ui, inherit);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
padding: 5px 12px;
border-radius: 8px;
margin-bottom: 14px;
border: 0;
text-decoration: none;
}
.single .entry-title {
font-family: var(--display);
font-size: clamp(28px, 4vw, 40px);
line-height: 1.15;
letter-spacing: 0;
color: #202729;
margin: 0 0 16px;
/* The same measure the rest of the hero keeps, so a long title wraps
against the photograph rather than running under it. Scoped to .single,
which WordPress puts on articles only, so a page title is untouched. */
max-width: 820px;
}
.single .entry-dek {
font-size: 16.5px;
line-height: 1.6;
color: var(--muted);
margin: 0 0 4px;
max-width: 68ch;
}
/* The author line
--------------
One row: the photograph, the name with its chips, and the dates beneath.
Replaces the labelled columns, which took three times the height to say the
same thing. */
.single .author-meta-bar {
position: relative;
display: flex;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
padding: 18px 0 20px;
margin-top: 22px;
border-top: 1px solid rgba(19, 27, 46, 0.08);
background: none;
border-radius: 0;
}
.amb-avatar {
flex: 0 0 auto;
width: 48px;
height: 48px;
padding: 2px;
border-radius: 50%;
/* The ring is the gradient showing through from behind the photograph. */
background: linear-gradient(135deg, #3458fa, var(--data));
}
.amb-avatar-img,
.amb-avatar img {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center 20%;
border: 2px solid var(--paper);
}
.amb-info {
flex: 1 1 auto;
min-width: 0;
}
.amb-name-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.single .amb-name {
font-family: var(--ui, inherit);
font-weight: 700;
font-size: 15px;
color: var(--ink);
line-height: 1.3;
text-decoration: none;
}
.single .amb-name:hover {
color: #3458fa;
}
.amb-role-chip {
display: inline-flex;
align-items: center;
background: #e9edfe;
color: #22308a;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
padding: 3px 9px;
border-radius: 8px;
}
.amb-fact-pill {
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
background: rgba(29, 161, 117, 0.08);
border: 1px solid rgba(29, 161, 117, 0.25);
color: #1da175;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.01em;
padding: 3px 9px 3px 7px;
border-radius: 8px;
white-space: nowrap;
}
.amb-fact-pill svg {
width: 13px;
height: 13px;
flex: none;
}
.amb-meta-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
font-size: 12.5px;
color: var(--muted);
}
.amb-meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.amb-meta-item svg {
width: 14px;
height: 14px;
flex: none;
}
.amb-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--muted);
opacity: 0.5;
flex: 0 0 auto;
}
/* The author's picture
-------------------
Whatever fills this slot is sized by the slot, not by itself. The account
plugin draws an initial in a span carrying its own width, height and font
size inline, and an inline style beats a stylesheet, so these have to be
insistent to bring it down to the 48px the row allows. */
.amb-avatar > * {
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
/* An initial set for a 96px circle is twice the size this needs. */
font-size: 20px !important;
line-height: 1 !important;
border: 2px solid var(--paper);
box-sizing: border-box;
}
/* A photograph still crops rather than stretches. */
.amb-avatar img {
object-fit: cover;
object-position: center 20%;
}
/* The trail. The current page is named but not linked, and it is the piece
that gives way first when the line runs out of room. */
.single .crumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
.crumbs-sep {
color: var(--line-strong);
}
.crumbs-current {
color: var(--ink);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 40ch;
}
/* How far through the article you are.
---------------------------------
Above the sticky header, since it describes the whole page rather than
sitting within it, and below the compound popup so a dialog still covers
everything. */
.reading-progress {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 4px;
background: var(--line);
z-index: 300;
pointer-events: none;
}
.reading-progress-fill {
width: 0;
height: 100%;
background: #3458fa;
/* Smoothed just enough that the bar does not jitter on a trackpad, and not
so much that it lags behind the scroll. */
transition: width 0.08s linear;
}
@media (prefers-reduced-motion: reduce) {
.reading-progress-fill {
transition: none;
}
}
@media print {
.reading-progress {
display: none;
}
}
/* The headline ticker
------------------
One headline at a time. Each is laid over the others and only the current one
is shown, so every headline gets the full width and none is ever cut. */
.ticker-inner {
position: relative;
max-width: 100%;
overflow: hidden;
}
.ticker-label {
flex: 0 0 auto;
position: relative;
z-index: 2;
}
.ticker-items {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
/* Until the script runs, the headlines sit in a row that can be scrolled: a
reader without JavaScript still sees them all. */
.ticker-items.is-rotating {
display: block;
position: relative;
overflow: hidden;
}
.ticker-items.is-rotating .ticker-item {
/* Stacked, so the row is as tall as one headline rather than all of them. */
position: absolute;
inset: 0;
width: 100%;
border-right: 0;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}
/* The first is in the flow, so the row has a height to be. */
.ticker-items.is-rotating .ticker-item:first-child {
position: relative;
inset: auto;
}
.ticker-items.is-rotating .ticker-item.is-shown {
opacity: 1;
visibility: visible;
transform: translateY(0);
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.ticker-items.is-rotating .ticker-item {
transition: none;
transform: none;
}
}
/* A soft edge where headlines arrive, so they fade in rather than appearing
mid-word against a hard line. */
/* The headline must be able to shrink, and say so when it has been cut.
.ti-head is a flex child with white-space:nowrap, and a flex item will not go
below its content width without min-width:0 — the same rule that once sent
this whole row off the side of the page. Without the ellipsis the surplus is
simply clipped, which reads as a bug rather than as a truncation. */
.ticker-items.is-rotating .ticker-item {
min-width: 0;
}
.ticker-items.is-rotating .ticker-item .ti-head {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* On a phone the label and its divider took most of the row, leaving the
headline 99px on a 320px screen — thirteen characters. Stacked, the headline
gets the full width and two lines to use. */
@media (max-width: 720px) {
/* Prefixed with .ticker throughout. The theme's own rules on .ticker-inner
and .ticker-label carry the same weight as a bare class here, so which
won would come down to which stylesheet loaded last — and that has
already been the cause of several bugs in this header. One extra class
settles it outright. */
.ticker .ticker-inner {
flex-direction: column;
align-items: stretch;
}
.ticker .ticker-label {
padding: 14px 0 0;
border-right: 0;
}
/* Date above, headline beneath, both across the full width. */
.ticker .ticker-items.is-rotating .ticker-item {
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 6px 0 14px;
}
.ticker .ticker-item .ti-date {
font-size: 9.5px;
}
/* Two lines, and always exactly two.
-----------------------------------
The carousel lays every headline over the first one and takes its height
from that first headline alone. Left to size themselves, a one-line
headline would set the row height and the next two-line headline would be
cut off by the overflow. A fixed two-line box means every headline fits
whatever its length, and the row never changes height as they rotate.
Height is in rem rather than em so it follows the headline's own size
rather than whatever it happens to inherit. */
.ticker .ticker-items.is-rotating .ticker-item .ti-head {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.35;
height: calc(0.92rem * 1.35 * 2);
text-overflow: ellipsis;
}
}
/* Below about 400px two lines is not enough: at 360px a Morning Dose headline
runs to roughly a hundred characters and two lines hold eighty-four. A third
line costs 20px of height and lets every current headline through whole. */
@media (max-width: 420px) {
.ticker .ticker-items.is-rotating .ticker-item .ti-head {
-webkit-line-clamp: 3;
line-clamp: 3;
height: calc(0.92rem * 1.35 * 3);
}
}
/* ---------------------------------------------------------------------------
Latest articles: the follow-through button under the grid.
Its label and target change with the active tab, so it is centred and given
room rather than sitting tight against the last row of cards.
--------------------------------------------------------------------------- */
.latest-more {
margin: 28px 0 0;
text-align: center;
}
.latest-more .btn-more {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border: 1px solid var(--line, #e3e6ef);
border-radius: 10px;
background: #fff;
color: var(--ink, #10131c);
font-weight: 650;
font-size: 15px;
line-height: 1;
text-decoration: none;
transition: border-color .15s, background .15s, transform .15s;
}
.latest-more .btn-more:hover,
.latest-more .btn-more:focus-visible {
border-color: var(--brand, #3458fa);
color: var(--brand, #3458fa);
transform: translateY(-1px);
}
.latest-more .btn-more[hidden] {
display: none;
}
/* ---------------------------------------------------------------------------
All articles page: filter rail plus results.
--------------------------------------------------------------------------- */
.articles-head {
margin-bottom: 22px;
}
.articles-head .h-sec {
margin: 12px 0 0;
}
.articles-intro {
margin-top: 10px;
max-width: 680px;
color: var(--muted, #5c6478);
}
.articles-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-bottom: 22px;
}
.articles-search {
flex: 1 1 260px;
min-width: 0; /* or the field refuses to shrink inside the flex row */
}
.articles-search input,
.articles-sort select {
width: 100%;
height: 44px;
padding: 0 14px;
border: 1px solid var(--line, #e3e6ef);
border-radius: 10px;
background: #fff;
font: inherit;
font-size: 15px;
color: var(--ink, #10131c);
}
.articles-sort {
flex: 0 0 190px;
}
.articles-search input:focus,
.articles-sort select:focus {
outline: 2px solid var(--brand, #3458fa);
outline-offset: 1px;
}
.articles-layout {
display: grid;
grid-template-columns: 248px minmax(0, 1fr);
gap: 26px;
align-items: start;
}
.articles-filters {
position: sticky;
top: 90px;
padding: 16px;
border: 1px solid var(--line, #e3e6ef);
border-radius: 14px;
background: #fff;
max-height: calc(100vh - 120px);
overflow-y: auto;
}
.articles-filters-hd {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
font-weight: 700;
font-size: 15px;
}
.articles-filters-hd a {
font-weight: 500;
font-size: 13px;
color: var(--brand, #3458fa);
}
.articles-chips,
.articles-cloud {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.articles-chips {
margin-bottom: 14px;
}
.chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border: 1px solid var(--line, #e3e6ef);
border-radius: 999px;
background: #fff;
font-size: 12.5px;
line-height: 1;
color: var(--muted, #5c6478);
text-decoration: none;
}
.chip:hover {
border-color: var(--brand, #3458fa);
color: var(--brand, #3458fa);
}
.chip.is-on {
border-color: transparent;
background: #e9edfe;
color: var(--brand, #3458fa);
font-weight: 600;
}
.articles-group {
padding-top: 14px;
margin-top: 14px;
border-top: 1px solid var(--line, #e3e6ef);
}
.articles-group-t {
margin: 0 0 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: .02em;
color: var(--ink, #10131c);
}
.articles-list {
list-style: none;
margin: 0;
padding: 0;
}
.articles-list a {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 14px;
color: var(--ink, #10131c);
text-decoration: none;
}
.articles-list .box {
flex: 0 0 auto;
width: 15px;
height: 15px;
border: 1px solid var(--line, #cfd5e4);
border-radius: 4px;
background: #fff;
}
.articles-list a.is-on .box {
border-color: var(--brand, #3458fa);
background: var(--brand, #3458fa);
box-shadow: inset 0 0 0 2px #fff;
}
.articles-list .nm {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.articles-list a.is-on .nm {
font-weight: 650;
color: var(--brand, #3458fa);
}
.articles-list .ct {
flex: 0 0 auto;
font-size: 11.5px;
color: var(--muted, #8b93a7);
font-variant-numeric: tabular-nums;
}
.articles-more-terms {
margin-top: 6px;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 13px;
color: var(--brand, #3458fa);
cursor: pointer;
}
.articles-count {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 12px;
font-size: 14px;
color: var(--muted, #5c6478);
}
.articles-empty {
padding: 48px 20px;
border: 1px dashed var(--line, #e3e6ef);
border-radius: 14px;
text-align: center;
color: var(--muted, #5c6478);
}
.articles-empty p {
margin: 0 0 14px;
}
.articles-pages {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
margin-top: 26px;
}
.articles-pages .page-numbers {
min-width: 40px;
padding: 9px 12px;
border: 1px solid var(--line, #e3e6ef);
border-radius: 9px;
background: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
color: var(--ink, #10131c);
}
.articles-pages .page-numbers:hover {
border-color: var(--brand, #3458fa);
color: var(--brand, #3458fa);
}
.articles-pages .page-numbers.current {
border-color: transparent;
background: var(--brand, #3458fa);
color: #fff;
font-weight: 650;
}
.articles-pages .page-numbers.dots {
border-color: transparent;
background: none;
}
/* The toggle, the close button and the scrim only exist for the mobile
drawer. On desktop the rail is simply there. */
.articles-toggle,
.articles-close,
.articles-scrim,
.articles-done {
display: none;
}
@media (max-width: 980px) {
.articles-layout {
grid-template-columns: minmax(0, 1fr);
}
.articles-filters {
position: static;
max-height: none;
}
/* Everything below is the drawer, and it is scoped to .has-drawer, which
the script adds. Without JavaScript none of it applies and the filters
stay on the page as an ordinary block — hiding them by default would
leave them unreachable. */
.has-drawer .articles-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding: 11px 18px;
border: 1px solid var(--line, #e3e6ef);
border-radius: 10px;
background: #fff;
font: inherit;
font-size: 15px;
font-weight: 650;
color: var(--ink, #10131c);
cursor: pointer;
}
.has-drawer .articles-toggle-i {
width: 15px;
height: 11px;
border-top: 2px solid currentColor;
border-bottom: 2px solid currentColor;
position: relative;
}
.has-drawer .articles-toggle-i::after {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 9px;
border-top: 2px solid currentColor;
}
.has-drawer .articles-toggle-n {
min-width: 20px;
padding: 2px 6px;
border-radius: 999px;
background: var(--brand, #3458fa);
color: #fff;
font-size: 12px;
line-height: 1.4;
text-align: center;
}
.has-drawer .articles-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 140;
background: rgba(13, 17, 23, .4);
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
.has-drawer .articles-scrim.open {
opacity: 1;
pointer-events: auto;
}
.has-drawer .articles-filters {
position: fixed;
inset: 0 auto 0 0;
z-index: 150;
width: min(340px, 86vw);
max-height: none;
height: 100%;
border: 0;
border-right: 1px solid var(--line, #e3e6ef);
border-radius: 0;
padding: 18px 18px 90px;
overflow-y: auto;
transform: translateX(-100%);
transition: transform .3s cubic-bezier(.4, 0, .2, 1);
box-shadow: 20px 0 60px -30px rgba(13, 17, 23, .25);
}
.has-drawer .articles-filters.open {
transform: translateX(0);
}
.has-drawer .articles-close {
display: inline-block;
margin-left: auto;
padding: 0 4px;
border: 0;
background: none;
font-size: 26px;
line-height: 1;
color: var(--muted, #5c6478);
cursor: pointer;
}
.has-drawer .articles-filters-hd {
gap: 12px;
}
/* Pinned so the way out is always in reach, however long the list runs. */
.has-drawer .articles-done {
display: block;
position: sticky;
bottom: -90px;
margin: 18px -18px -90px;
padding: 12px 18px;
border-top: 1px solid var(--line, #e3e6ef);
background: #fff;
}
.has-drawer .articles-done .btn {
width: 100%;
justify-content: center;
}
}
/* Scroll lock while the filter drawer is open. A class rather than an inline
style on body, so it cannot be left behind by a handler that forgot to
clear it. */
html.articles-locked,
html.articles-locked body {
overflow: hidden;
}
/* ---------------------------------------------------------------------------
Article contents list.
Two copies of one list: inline above the article, closed by default, and in
the sidebar where it stays in view. Both use the .side-nav markup the CMS
pages already use, so the numbering, the hover and the current-section
marker are inherited rather than restated here. Only the two containers and
the .is-current alias are new.
--------------------------------------------------------------------------- */
.toc-inline {
margin: 0 0 clamp(24px, 3vw, 34px);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper-2);
}
.toc-inline > summary {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
cursor: pointer;
list-style: none;
font-family: var(--display);
font-weight: 700;
font-size: 1rem;
color: var(--ink);
}
.toc-inline > summary::-webkit-details-marker {
display: none;
}
.toc-inline > summary::after {
content: "";
width: 8px;
height: 8px;
margin-left: auto;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg);
transition: transform .2s;
}
.toc-inline[open] > summary::after {
transform: rotate(-135deg);
}
.toc-inline__count {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.toc-inline .side-nav {
padding: 0 18px 16px;
}
/* The spy marks a row with both names: "active", which the editor-written CMS
lists use, and "is-current", which the phone bar uses. The theme styles
.active already; this points .is-current at the same look. */
.side-nav li.is-current {
border-left-color: var(--accent);
}
.side-nav li.is-current a,
.side-nav li.is-current a .num {
color: var(--accent);
}
@media (max-width: 900px) {
/* On a phone the list behaves like the one on a CMS page: open in the
flow, no disclosure to tap, and the sticky bar takes over once it has
scrolled past. The script adds .is-static and sets it open. */
.toc-inline.is-static > summary {
display: none;
}
.toc-inline.is-static .side-nav {
padding: 14px 18px;
}
}
/* ---------------------------------------------------------------------------
The mark after each section heading, on articles only.
Drawn as a pseudo element rather than added to the markup. The heading's
own text is what generates its anchor and its line in the contents list —
a real span inside the h2 would land in textContent, so every anchor would
change and every contents entry would read "Section name +".
Two gradients rather than a "+" character: the glyph's weight and centring
vary between the display face and any fallback, and it sat visibly off the
baseline in testing.
--------------------------------------------------------------------------- */
.single-post .entry-content h2::after {
content: "";
display: inline-block;
width: .52em;
height: .52em;
margin-left: .38em;
vertical-align: baseline;
background:
linear-gradient(var(--accent), var(--accent)) center / 100% .16em no-repeat,
linear-gradient(var(--accent), var(--accent)) center / .16em 100% no-repeat;
}
/* Not on the contents list's own heading, nor on anything inside the list. */
.single-post .side-nav h2::after,
.single-post .toc-inline h2::after {
content: none;
}
/* ---------------------------------------------------------------------------
Header: search button and panel, Subscribe popover.
The mega menu's own styling ships with the plugin; these are the theme's
controls beside it.
--------------------------------------------------------------------------- */
.nav-cta .icon-btn {
width: 37px;
height: 37px;
border-radius: 9px;
border: 1px solid var(--line);
display: grid;
place-items: center;
background: var(--paper);
cursor: pointer;
transition: border-color .15s, background .15s;
}
.nav-cta .icon-btn:hover,
.nav-cta .icon-btn:focus-visible {
border-color: var(--accent);
background: var(--accent-soft);
}
.nav-cta .icon-btn svg {
width: 17px;
height: 17px;
stroke: var(--ink);
fill: none;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.btn-sub {
display: inline-flex;
align-items: center;
height: 37px;
padding: 0 16px;
border: 0;
border-radius: 9px;
background: var(--data);
color: #fff;
font: inherit;
font-weight: 700;
font-size: 14px;
white-space: nowrap;
cursor: pointer;
}
.btn-sub:hover {
filter: brightness(.95);
}
.sub-wrap {
position: relative;
}
.sub-pop {
position: absolute;
right: 0;
top: calc(100% + 10px);
width: 320px;
padding: 18px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
box-shadow: var(--sh-lift);
display: none;
z-index: 320;
}
.sub-wrap.open .sub-pop {
display: block;
}
/* The header newsletter form was built to sit in a row. Inside the popover it
stacks, so the field is not squeezed to nothing. */
.sub-pop .nl-form {
display: block;
}
.sub-pop .nl-form input[type="email"] {
width: 100%;
margin-bottom: 8px;
}
.sub-pop .nl-form button {
width: 100%;
justify-content: center;
}
.nav-search-panel {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: var(--paper);
border-bottom: 1px solid var(--line);
box-shadow: 0 24px 40px -28px rgba(19, 27, 46, .28);
z-index: 295;
}
.nav-search-panel[hidden] {
display: none;
}
.nav-search-in {
padding: 22px 0 26px;
}
/* Held to a readable width and centred. Stretched across the full 1480px wrap
a single input line looks like a mistake, and the eye has to travel the whole
bar to get from the field to the button. */
.nav-search-in .mb-search {
max-width: 620px;
margin-inline: auto;
}
/* 960px, matching the breakpoint where the theme swaps the bar for the burger.
At 1160 these vanished while the menu was still showing, leaving a gap
between 960 and 1160 with no search and no Subscribe. */
@media (max-width: 960px) {
.nav-cta .nav-search,
.nav-cta .sub-wrap {
display: none;
}
}
/* ---------------------------------------------------------------------------
Mobile drawer: search at the top, subscribe and account at the foot.
The menu between them is drawn by the mega menu plugin.
--------------------------------------------------------------------------- */
.drawer-search {
margin-bottom: 14px;
}
/* The theme has ".drawer .btn { width:100%; margin-top:22px }", which is right
for the standalone buttons it was written for and wrong for the search
button, which sits inside the search pill as a flex item. Left alone it took
the whole row, squeezed the input to nothing and pushed itself past the
pill's edge. Three classes here, so this beats the two-class rule whatever
order the stylesheets load in. */
.drawer .drawer-search .btn {
width: auto;
flex: 0 0 auto;
margin-top: 0;
}
.drawer-foot {
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.drawer-sub h4 {
margin: 0 0 8px;
font-family: var(--display);
font-size: 1rem;
font-weight: 700;
}
.drawer-sub .mb-esp-form,
.drawer-sub form {
display: block;
}
.drawer-sub input[type="email"] {
width: 100%;
height: 44px;
margin-bottom: 8px;
padding: 0 14px;
border: 1px solid var(--line-strong);
border-radius: 11px;
font: inherit;
font-size: 15px;
}
.drawer-sub button,
.drawer-sub input[type="submit"] {
width: 100%;
height: 44px;
border: 0;
border-radius: 11px;
background: var(--data);
color: #fff;
font: inherit;
font-weight: 700;
font-size: 15px;
cursor: pointer;
}
.drawer-acct {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.drawer-who {
margin: 0 0 6px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--faint);
}
/* Named so the theme's own ".drawer a" rule does not make these menu-sized. */
.drawer .drawer-acct .drawer-link {
display: block;
padding: 11px 0;
border-bottom: 0;
font-family: var(--display);
font-weight: 650;
font-size: 15px;
color: var(--ink);
}
.drawer .drawer-acct .drawer-link:hover {
color: var(--accent);
}
.drawer .drawer-acct .drawer-link.is-out {
color: var(--news);
}
/* ---------------------------------------------------------------------------
Reader tools: the gradient cards from the calculator hub.
Class names are prefixed mbt- rather than reusing .tool-card, whose existing
rules paint a white bordered card and would have had to be unpicked one
property at a time.
Each card carries --tc and --tc-dark inline. Only the light end is chosen by
an editor; the dark end is worked out in PHP, so no one has to pick two
colours that sit well together.
--------------------------------------------------------------------------- */
/* Scoped with .tools-wrap. The theme's own ".tool-list { grid-template-columns:
1fr 1fr }" carries the same weight as a bare class, and settling that by
stylesheet order is what caused the run of header bugs. */
.tools-wrap .tool-list {
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px;
}
.mbt-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 9px;
min-height: 196px;
padding: 20px 18px 18px;
border: 0;
border-radius: 14px;
/* visible, so the sponsor tag can hang over the top edge. The dotted
texture below keeps its own clip. */
overflow: visible;
color: #fff;
text-align: left;
text-decoration: none;
background:
radial-gradient(120% 100% at 100% 0%, rgba(255, 255, 255, .22), transparent 55%),
radial-gradient(1px 1px at 13px 13px, rgba(255, 255, 255, .14) 1px, transparent 0) 0 0 / 15px 15px,
linear-gradient(155deg, var(--tc, #3B63FF), var(--tc-dark, #223994));
box-shadow: 0 10px 26px -14px var(--tc-dark, #223994);
transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s cubic-bezier(.2, .8, .2, 1);
}
/* The hairline highlight along the top edge. */
.mbt-card::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background: linear-gradient(155deg, rgba(255, 255, 255, .55), transparent 55%);
opacity: .6;
pointer-events: none;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
transition: opacity .28s ease;
}
.mbt-card:hover,
.mbt-card:focus-visible {
transform: translateY(-5px);
box-shadow: 0 20px 38px -14px var(--tc-dark, #223994);
}
.mbt-card:hover::before,
.mbt-card:focus-visible::before {
opacity: .9;
}
.mbt-card:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.mbt-card.is-static {
cursor: default;
}
.mbt-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
gap: 10px;
}
.mbt-icon {
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 255, 255, .16);
color: #fff;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, .35),
inset 0 -6px 12px -6px rgba(0, 0, 0, .3),
0 1px 0 rgba(255, 255, 255, .15);
transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .3s ease;
}
/* The theme's icons come through mnb_icon() and are sized elsewhere, so they
are pinned here rather than left to whatever that helper decides. */
.mbt-icon svg {
width: 21px;
height: 21px;
color: #fff;
transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.mbt-led {
position: absolute;
top: -3px;
right: -3px;
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, .35);
border: 2px solid var(--tc-dark, #223994);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
transition: background .25s ease, box-shadow .25s ease;
}
.mbt-card:hover .mbt-icon,
.mbt-card:focus-visible .mbt-icon {
transform: translateY(-1px) scale(1.06);
background: rgba(255, 255, 255, .26);
}
.mbt-card:hover .mbt-icon svg,
.mbt-card:focus-visible .mbt-icon svg {
transform: scale(1.08);
}
.mbt-card:hover .mbt-led,
.mbt-card:focus-visible .mbt-led {
background: #fff;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .28), 0 0 8px 1px rgba(255, 255, 255, .9);
}
.mbt-readout {
flex: 0 0 auto;
margin-top: 2px;
padding: 4px 7px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 5px;
background: rgba(255, 255, 255, .14);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
color: rgba(255, 255, 255, .95);
}
.mbt-title {
font-family: var(--display);
font-weight: 700;
font-size: 1.06rem;
line-height: 1.2;
letter-spacing: -.01em;
color: #fff;
}
/* .92 rather than the .85 the hub uses. Paired with the darker gradient end,
this keeps the description above 4.5:1 on every colour in the set, amber
included — it was the one that failed. */
.mbt-desc {
font-size: .84rem;
line-height: 1.45;
color: rgba(255, 255, 255, .92);
}
.mbt-cta {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: auto;
padding-top: 12px;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255, 255, 255, .9);
transition: color .22s ease, gap .22s cubic-bezier(.2, .8, .2, 1);
}
.mbt-cta::before {
content: "";
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, .4);
transition: background .22s ease, box-shadow .22s ease;
}
.mbt-cta svg {
width: 13px;
height: 13px;
transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.mbt-card:hover .mbt-cta,
.mbt-card:focus-visible .mbt-cta {
gap: 10px;
color: #fff;
}
.mbt-card:hover .mbt-cta::before,
.mbt-card:focus-visible .mbt-cta::before {
background: #fff;
box-shadow: 0 0 6px 1px rgba(255, 255, 255, .9);
}
.mbt-card:hover .mbt-cta svg,
.mbt-card:focus-visible .mbt-cta svg {
transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
.mbt-card,
.mbt-icon,
.mbt-icon svg,
.mbt-cta,
.mbt-cta svg,
.mbt-led {
transition: none;
}
.mbt-card:hover,
.mbt-card:focus-visible,
.mbt-card:hover .mbt-icon,
.mbt-card:focus-visible .mbt-icon {
transform: none;
}
}
/* Two per row on a phone as well, the way the desktop grid reads.
-------------------------------------------------------------
auto-fit would drop to one column here, because a 210px minimum cannot fit
twice into a 320px screen. The count is stated outright instead, and the
card is scaled down to suit: at 360px each card is about 155px wide, which
the icon and the unit tag fit across only at these smaller sizes. */
@media (max-width: 720px) {
.tools-wrap .tool-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.mbt-card {
min-height: 0;
gap: 7px;
padding: 14px 12px 13px;
border-radius: 12px;
}
.mbt-icon {
width: 36px;
height: 36px;
border-radius: 10px;
}
.mbt-icon svg {
width: 17px;
height: 17px;
}
.mbt-readout {
padding: 3px 5px;
font-size: 8.5px;
}
.mbt-title {
font-size: .92rem;
}
/* Clamped rather than dropped: at this width a long description would
otherwise make one card twice the height of the one beside it. */
.mbt-desc {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: .75rem;
}
.mbt-cta {
padding-top: 9px;
font-size: 9.5px;
letter-spacing: .06em;
}
/* The calculator is a desktop-side companion to the tool list. On a phone
it sits under the cards as a tall form nobody asked for, so it comes
out. Scoped to .tools-wrap, because the same calculator is available as
a shortcode inside articles and must still work there. */
.tools-wrap .calc {
display: none;
}
}
/* Under 380px the unit tag and the icon stop fitting on one line, and the tag
is the more expendable of the two. */
@media (max-width: 380px) {
.mbt-readout {
display: none;
}
}
/* ---------------------------------------------------------------------------
Footer columns: headings fold on a phone.
The heading is still an — the button sits inside it — so the document
outline is the same whether or not anything collapses.
--------------------------------------------------------------------------- */
.foot-col .foot-col-h {
margin: 0 0 16px;
}
/* The button inherits the heading's type rather than restating it, so changing
.foot-col h5 above still changes this. */
.foot-col-t {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
text-align: left;
cursor: default;
}
.foot-col-t .chev {
display: none;
flex: 0 0 auto;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform .25s;
}
/* Below 520px the footer is already one column per row, which is where folding
earns its place. Between 520 and 860 it is two columns and short enough to
leave alone.
Everything is scoped to .has-toggle, which the script adds. With no
scripting the columns stay open — hiding them by default would leave the
links unreachable. */
@media (max-width: 520px) {
.foot-col.has-toggle {
border-top: 1px solid rgba(255, 255, 255, .08);
}
.foot-col.has-toggle .foot-col-h {
margin: 0;
}
.foot-col.has-toggle .foot-col-t {
padding: 17px 0;
cursor: pointer;
}
.foot-col.has-toggle .foot-col-t .chev {
display: block;
}
.foot-col.has-toggle .foot-col-t[aria-expanded="true"] .chev {
transform: rotate(-135deg) translate(-2px, -2px);
}
.foot-col.has-toggle .foot-col-b {
display: none;
}
.foot-col.has-toggle.open .foot-col-b {
display: block;
padding-bottom: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.foot-col-t .chev {
transition: none;
}
}
/* ---------------------------------------------------------------------------
Reconstitution calculator — the design from the tools mockup.
The theme already styles .calc and its parts in style.css. These rules are
the differences, and each carries an extra class so it beats the original
outright rather than by stylesheet order. Rules the mockup left unchanged
are not restated.
--------------------------------------------------------------------------- */
.calc .calc-head {
position: relative;
gap: 14px;
border-bottom: 0;
background: linear-gradient(180deg, #FFFFFF, #FAFBFF);
}
/* A dotted rule rather than a solid border, so the head reads as part of the
instrument rather than a stacked panel. */
.calc .calc-head::after {
content: "";
position: absolute;
right: 24px;
bottom: 0;
left: 24px;
height: 1px;
opacity: .6;
background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 9px);
}
.calc-head-left {
display: flex;
align-items: center;
gap: 14px;
}
.calc-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 11px;
color: #fff;
background: linear-gradient(155deg, #3B63FF, #22308A);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, .35),
0 6px 14px -6px rgba(52, 88, 250, .55);
}
.calc-icon svg {
width: 19px;
height: 19px;
}
.calc-eyebrow {
display: block;
margin-bottom: 3px;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--data);
}
.calc-live {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--faint);
}
.calc-live i {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #1DA175;
animation: calc-live-pulse 2.2s ease-in-out infinite;
}
@keyframes calc-live-pulse {
0% { box-shadow: 0 0 0 0 rgba(29, 161, 117, .45); }
70% { box-shadow: 0 0 0 6px rgba(29, 161, 117, 0); }
100% { box-shadow: 0 0 0 0 rgba(29, 161, 117, 0); }
}
/* ---- unit toggles ---- */
.field .unit-toggle {
display: inline-flex;
gap: 2px;
}
.field .unit-toggle button {
padding: 2px 6px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--faint);
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.field .unit-toggle button:hover {
color: var(--ink);
}
.field .unit-toggle button.active {
border-color: var(--data);
background: var(--data-soft);
color: var(--data);
}
/* ---- the metrics strip, replacing the stacked list ---- */
.result-primary .rp-metrics {
display: flex;
flex: 1 1 240px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.result-primary .rp-metric {
flex: 1 1 0;
min-width: 0;
padding: 11px 14px 10px;
border-top: 2px solid var(--data);
border-right: 1px solid var(--line);
background: #fff;
}
.result-primary .rp-metric:nth-child(2) { border-top-color: var(--accent); }
.result-primary .rp-metric:nth-child(3) { border-top-color: #F5A524; }
.result-primary .rp-metric:last-child { border-right: 0; }
.rp-metric-label {
margin-bottom: 4px;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.rp-metric-value {
font-family: var(--display);
font-size: 14px;
font-weight: 700;
color: var(--ink);
}
/* ---- syringe: the plunger rod, and the states it can be in ---- */
.syringe .sy-rod {
position: absolute;
top: 45%;
right: 0;
bottom: 45%;
z-index: 2;
background: linear-gradient(180deg, #FFFFFF, #D6DBE4);
transition: left .35s cubic-bezier(.4, 0, .2, 1);
}
.syringe .sy-marker {
cursor: grab;
touch-action: none;
}
.syringe .sy-marker:hover {
background: linear-gradient(180deg, #6B7280 0%, #3B4048 55%, #20242C 100%);
}
.syringe .sy-marker:focus-visible {
outline: 2px solid var(--data);
outline-offset: 3px;
}
/* While dragging, the transition has to go — otherwise the plunger eases
towards the pointer instead of following it. */
.syringe.dragging .sy-fill,
.syringe.dragging .sy-rod,
.syringe.dragging .sy-marker {
transition: none;
}
.syringe.dragging .sy-marker {
cursor: grabbing;
}
.syringe.over .sy-marker {
background: linear-gradient(180deg, #F2857A 0%, #E0523F 55%, #C0392B 100%);
}
.syringe.over .sy-fill {
background: linear-gradient(180deg, rgba(224, 82, 63, .14) 0%, rgba(224, 82, 63, .26) 55%, rgba(224, 82, 63, .36) 100%);
}
.syringe-hint {
margin: 8px 0 0;
font-family: var(--body);
font-size: 11.5px;
text-align: center;
color: var(--faint);
}
/* ---- copy and reset ---- */
.calc-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.calc-actions button {
padding: 7px 14px;
border: 1px solid var(--line-strong);
border-radius: 8px;
background: none;
font-family: var(--body);
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
cursor: pointer;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.calc-actions button:hover {
border-color: var(--accent);
color: var(--accent-hover);
}
.calc-actions button.confirmed {
border-color: #1DA175;
background: #EAFBF4;
color: #1DA175;
}
@media (prefers-reduced-motion: reduce) {
.calc-live i,
.syringe .sy-rod {
animation: none;
transition: none;
}
}
@media (max-width: 640px) {
.calc .calc-head {
flex-wrap: wrap;
row-gap: 8px;
padding: 16px 18px;
}
.calc .calc-head::after {
right: 18px;
left: 18px;
}
.result-primary .rp-metrics {
flex: 0 0 auto;
width: 100%;
}
.result-primary .rp-metric {
padding: 9px 6px 8px;
}
.rp-metric-label {
font-size: 8px;
letter-spacing: .02em;
line-height: 1.25;
white-space: normal;
}
.rp-metric-value {
font-size: 12.5px;
}
}
@media (max-width: 420px) {
.calc-icon {
width: 34px;
height: 34px;
}
.calc-icon svg {
width: 16px;
height: 16px;
}
}
/* ---- syringe: the mockup's rendering over the theme's earlier one ----
Scoped with .calc so each of these beats the .syringe .sy-* rules in
style.css on specificity rather than on which file loads last. */
.calc .syringe .sy-barrel {
height: 38px;
border-radius: 8px;
background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(233, 237, 247, .5) 50%, rgba(255, 255, 255, .95) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .85),
inset 0 -1px 4px rgba(11, 18, 32, .06);
}
/* The glare along the top of the barrel. */
.calc .syringe .sy-barrel::before {
content: "";
position: absolute;
top: 3px;
right: 5px;
left: 5px;
z-index: 3;
height: 6px;
border-radius: 8px;
background: linear-gradient(180deg, rgba(255, 255, 255, .9), transparent);
pointer-events: none;
}
.calc .syringe .sy-fill {
top: 3px;
bottom: 3px;
left: 1px;
z-index: 1;
border-radius: 8px;
background: linear-gradient(180deg, rgba(52, 88, 250, .12) 0%, rgba(52, 88, 250, .24) 55%, rgba(52, 88, 250, .34) 100%);
}
.calc .syringe .sy-fill::before {
content: "";
position: absolute;
top: 1px;
right: -3px;
bottom: 1px;
width: 5px;
border-radius: 8px;
opacity: .85;
background: linear-gradient(90deg, rgba(52, 88, 250, .1), rgba(52, 88, 250, .3));
}
.calc .syringe .sy-fill::after {
background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 35%);
}
.calc .syringe .sy-barrel .sy-gradlines {
z-index: 2;
}
.calc .syringe .sy-barrel .sy-gradlines span {
margin-block: 7px;
opacity: .5;
}
.calc .syringe .sy-barrel .sy-gradlines span:nth-child(4n+1) {
margin-block: 3px;
background: var(--muted);
opacity: .85;
}
.calc .syringe .sy-marker {
top: 2px;
bottom: 2px;
z-index: 4;
width: 6px;
margin-left: -3px;
border-radius: 8px;
background: linear-gradient(180deg, #565D6D 0%, #2E323C 55%, #1B1E25 100%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 2px rgba(11, 18, 32, .25);
transition: left .35s cubic-bezier(.4, 0, .2, 1), background .15s ease;
}
.calc .syringe .sy-marker::after {
top: -22px;
padding: 1px 6px;
border-radius: 8px;
box-shadow: var(--sh-card);
}
.calc .syringe .sy-needle {
background: linear-gradient(180deg, #F4F6F9 0%, #B7BFCC 45%, #8A93A3 100%);
}
.calc .syringe .sy-hub {
background: linear-gradient(180deg, #E9ECF3 0%, #C7CDDB 55%, #AEB6C4 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.calc .syringe .sy-flange {
height: 50px;
border-radius: 8px;
background: linear-gradient(180deg, #E9ECF3 0%, #C7CDDB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}
.calc .syringe .sy-flange::before {
width: 6px;
height: 24px;
border-radius: 8px;
background: linear-gradient(180deg, #E9ECF3 0%, #C7CDDB 100%);
}
/* The mockup sets this in the reading face rather than the mono face. */
.calc .calc-note {
font-family: var(--body);
font-size: 13.5px;
}
/* ---------------------------------------------------------------------------
All Tools page.
Generated from the supplied standalone page, with every selector scoped to
.mb-tools. That scoping is not cosmetic: the original redefines :root with
its own meanings for --accent, --mono and the rest, and restyles body, a and
.wrap. Loaded unscoped it would have reskinned the whole site.
Its :root block is now a .mb-tools block, so those custom properties inherit
through the page and stop at its edge. Keyframes are renamed with a prefix,
because animation names are global however the selectors are scoped.
--------------------------------------------------------------------------- */
.mb-tools {--paper:#F5F8FF;
--panel:#FFFFFF;
--ink:#131B2E;
--ink-soft:#5B6478;
--ink-faint:#8891A6;
--line:#E3E9F5;
--line-strong:#C7D3F0;
--teal:#3458FA;
--teal-dark:#22308A;
--teal-soft:#E9EDFE;
--amber:#F5A524;
--amber-soft:#FEF3DE;
--accent:#ED4A9B;
--accent-soft:#FDECF5;
--green:#1DA175;
--radius:8px;
--mono: "Public Sans", system-ui, sans-serif;
--sans: "Public Sans", system-ui, sans-serif;
--display: "PT Serif", serif;
--shadow:0 2px 10px rgba(52,88,250,0.07);
--shadow-md:0 8px 24px rgba(52,88,250,0.12);}
.mb-tools .brand {font-family:var(--display); font-weight:700; font-size:15px;
letter-spacing:0.02em; color:var(--ink); text-decoration:none;
display:flex; align-items:center; gap:8px;}
.mb-tools .brand svg {display:block;}
.mb-tools .crumb {font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:0.03em;}
.mb-tools .crumb a {color:var(--ink-faint); text-decoration:none;}
.mb-tools .crumb a:hover {color:var(--teal-dark);}
.mb-tools .hero {padding:64px 0 40px;}
.mb-tools .kicker {font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
color:var(--teal-dark); margin:0 0 14px; display:flex; align-items:center; gap:10px;}
.mb-tools .kicker::before {content:""; width:22px; height:1px; background:#ED4A9B; display:inline-block;}
.mb-tools h1.h1 {font-family:var(--display); font-weight:700; font-size:clamp(40px,7vw,64px);
line-height:0.98; letter-spacing:-0.02em; margin:0 0 24px; color:var(--ink);}
.mb-tools .standfirst {font-size:19px; color:var(--ink); max-width:none; margin:0 0 16px; font-weight:400;}
.mb-tools .supporting {font-size:15px; color:var(--ink-soft); max-width:none; margin:0;}
.mb-tools .jumpnav-intro {font-size:14px; color:var(--ink-soft); margin:36px 0 14px;}
.mb-tools .chips {display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:8px;
counter-reset:chip;}
.mb-tools .chip {counter-increment:chip;
position:relative;
display:flex; align-items:flex-start; gap:12px;
font-family:var(--sans); color:var(--ink);
background:var(--panel); border:1px solid var(--line);
padding:14px 40px 14px 14px; border-radius:var(--radius); text-decoration:none;
box-shadow:0 1px 2px rgba(16,24,40,0.06);
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;}
.mb-tools .chip::before {content:counter(chip);
font-family:var(--sans); font-size:12px; font-weight:700; color:#fff;
letter-spacing:0; flex:0 0 auto;
width:22px; height:22px; border-radius:50%;
background:var(--teal);
display:flex; align-items:center; justify-content:center;}
.mb-tools .chip::after {content:"→";
position:absolute; top:50%; right:14px; transform:translateY(-50%);
font-size:16px; font-weight:700; color:#ED4A9B;
transition: transform .15s ease, color .15s ease;}
.mb-tools .chip-text {display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; width:100%;}
.mb-tools .chip b {font-weight:700; font-size:14px; color:var(--ink); letter-spacing:-0.01em;}
.mb-tools .chip-sub {font-size:12.5px; color:var(--ink-soft); line-height:1.35;}
.mb-tools .chip:hover {border-color:var(--teal); box-shadow:var(--shadow); transform:translateY(-1px);
text-decoration:none; background:var(--teal-soft);}
.mb-tools .chip:hover::before {background:var(--teal-dark);}
.mb-tools .chip:hover b {color:var(--teal-dark);}
.mb-tools .chip:hover::after {transform:translateY(-50%) translateX(3px); color:#ED4A9B;}
.mb-tools .chip:focus-visible {outline:2px solid var(--teal); outline-offset:2px;}
@media (max-width:780px) {
.mb-tools .chips {grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:520px) {
.mb-tools .chips {grid-template-columns:1fr;}
}
.mb-tools section.tool {padding:56px 0 8px; border-top:1px solid var(--line); scroll-margin-top:74px;}
.mb-tools .tool-label-row {display:flex; align-items:center; gap:10px; margin:0 0 14px;}
.mb-tools .tool-label {display:inline-block;
font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.02em; text-transform:none;
color:var(--teal); background:var(--teal-soft);
padding:5px 12px; border-radius:var(--radius); margin:0;}
.mb-tools h2.h2 {font-family:var(--display); font-weight:700; font-size:clamp(26px,4vw,34px);
letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink);}
.mb-tools .intro p {font-size:16px; color:var(--ink-soft); margin:0 0 14px;}
.mb-tools .intro p:last-child {margin-bottom:0;}
.mb-tools .panel {background:var(--panel); border:1px solid var(--line);
border-radius:var(--radius); margin:26px 0 18px; overflow:hidden;
box-shadow:var(--shadow);}
.mb-tools .panel-head {display:flex; align-items:center; gap:12px;
background:var(--panel); color:var(--ink); padding:16px 22px;
font-family:var(--sans); font-size:14px;
border-bottom:1px solid var(--line);}
.mb-tools .panel-head .head-icon {flex:0 0 auto; width:34px; height:34px; border-radius:50%;
background:var(--teal); color:#fff;
display:flex; align-items:center; justify-content:center;}
.mb-tools .panel-head .head-icon svg {width:16px; height:16px;}
.mb-tools .panel-head .head-label {font-weight:700; font-size:14px; color:var(--ink);}
.mb-tools .panel-head .ticks {display:none;}
.mb-tools .panel-body {padding:22px;}
.mb-tools .tabs {display:flex; gap:0; margin-bottom:18px; border-bottom:1px solid var(--line);}
.mb-tools .tabbtn {font-family:var(--sans); font-weight:600; font-size:13.5px; letter-spacing:0.01em;
background:none; border:none; padding:9px 4px; margin-right:24px; cursor:pointer;
color:var(--ink-faint); border-bottom:2px solid transparent; position:relative; top:1px;}
.mb-tools .tabbtn.active {color:var(--ink); border-bottom-color:var(--teal);}
.mb-tools .tabpanel {display:none;}
.mb-tools .tabpanel.active {display:block;}
.mb-tools .field-grid {display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;}
.mb-tools .field-grid.single {grid-template-columns:1fr;}
.mb-tools .field {display:flex; flex-direction:column; gap:6px;}
.mb-tools .field.span2 {grid-column:1 / -1;}
.mb-tools label {font-size:13px; font-weight:600; color:var(--ink); letter-spacing:0.01em;}
.mb-tools .helper {font-size:12px; color:var(--ink-faint); line-height:1.4;}
.mb-tools input[type=number], .mb-tools input[type=text], .mb-tools select {font-family:var(--sans); font-size:14.5px; color:var(--ink);
background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius);
padding:9px 10px; width:100%; outline:none;}
.mb-tools input:focus, .mb-tools select:focus {border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft);}
.mb-tools .unit-suffix {position:relative;}
.mb-tools select {appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235B6478'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:28px;}
.mb-tools .btnrow {display:flex; gap:10px; margin-top:16px; margin-bottom:8px; flex-wrap:wrap;}
.mb-tools button.primary {font-family:var(--sans); font-weight:700; font-size:14px; cursor:pointer;
background:var(--teal); color:#fff; border:none; border-radius:var(--radius);
padding:11px 20px; box-shadow:0 6px 16px -4px rgba(52,88,250,0.45);
transition:transform .12s ease, box-shadow .12s ease, background .12s ease;}
.mb-tools button.primary:hover {background:var(--teal-dark); transform:translateY(-1px); box-shadow:0 8px 20px -4px rgba(52,88,250,0.5);}
.mb-tools button.ghost {font-family:var(--sans); font-weight:600; font-size:14px; cursor:pointer;
background:none; color:var(--ink); border:1px solid var(--line-strong); border-radius:var(--radius);
padding:11px 18px; transition:border-color .12s ease, color .12s ease;}
.mb-tools button.ghost:hover {border-color:var(--teal); color:var(--teal);}
.mb-tools .readout {position:relative; margin-top:22px;}
.mb-tools .readout-flex {display:flex; align-items:stretch; gap:28px; flex-wrap:wrap;}
.mb-tools .readout-figure {flex:0 0 auto; padding-top:2px; min-width:110px;}
.mb-tools .readout.empty {background:var(--teal-soft); border:1px dashed var(--line-strong); color:var(--ink-soft);
box-shadow:none; display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--radius);}
.mb-tools .empty-icon {flex:0 0 auto; width:30px; height:30px; border-radius:50%;
background:#fff; border:1px solid var(--line-strong); color:var(--teal);
display:flex; align-items:center; justify-content:center;}
.mb-tools .empty-icon svg {width:15px; height:15px;}
.mb-tools .readout.error {background:#fff; border:1px solid var(--amber-soft); border-radius:var(--radius);
padding:16px 18px;}
.mb-tools .readout-main {font-family:var(--display); font-weight:800; font-size:40px; color:var(--teal);
line-height:1.02; letter-spacing:-0.015em;}
.mb-tools .readout-main .unit {font-family:var(--sans); font-size:13px; color:var(--ink-soft); font-weight:600; margin-left:6px;}
.mb-tools .readout-subline {font-family:var(--mono); font-size:12.5px; color:var(--green); margin-top:8px; letter-spacing:0.01em;}
.mb-tools .readout-metrics {flex:1 1 260px; display:flex; border:1px solid var(--line); border-radius:12px; overflow:hidden;
box-shadow:0 1px 2px rgba(16,24,40,0.04);}
.mb-tools .readout-metric {flex:1 1 0; padding:13px 16px 12px; border-right:1px solid var(--line); min-width:0;
border-top:2px solid var(--teal); background:#fff;}
.mb-tools .readout-metric:nth-child(2) {border-top-color:var(--accent);}
.mb-tools .readout-metric:nth-child(3) {border-top-color:var(--amber);}
.mb-tools .readout-metric:last-child {border-right:none;}
.mb-tools .rm-label {font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
color:var(--ink-faint); margin-bottom:5px;}
.mb-tools .rm-value {font-family:var(--sans); font-weight:700; font-size:15px; color:var(--ink);}
.mb-tools .readout-foot {font-size:12.5px; color:var(--amber); margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.mb-tools .readout-note {font-size:12.5px; color:var(--amber); line-height:1.5; padding-top:2px;}
.mb-tools .readout.error .readout-main {color:#B4790C; font-size:15px; font-weight:700;}
@media (max-width:560px) {
.mb-tools .readout-flex {flex-direction:column;}
.mb-tools .readout-metrics {flex-direction:column; border-radius:12px;}
.mb-tools .readout-metric {border-right:none; border-bottom:1px solid var(--line); border-top:2px solid var(--teal);}
.mb-tools .readout-metric:nth-child(2) {border-top-color:var(--accent);}
.mb-tools .readout-metric:nth-child(3) {border-top-color:var(--amber);}
.mb-tools .readout-metric:last-child {border-bottom:none;}
}
.mb-tools .presets-row {display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.mb-tools .presets-label {font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);}
.mb-tools .preset-btn {font-family:var(--sans); font-weight:600; font-size:12.5px; cursor:pointer;
background:#fff; color:var(--ink-soft); border:1px solid var(--line-strong); border-radius:999px;
padding:6px 14px; transition:border-color .12s ease, color .12s ease;}
.mb-tools .preset-btn:hover {border-color:var(--teal); color:var(--teal-dark);}
.mb-tools .input-with-unit {display:flex; align-items:stretch;}
.mb-tools .input-with-unit input {flex:1 1 auto; width:auto; min-width:0; border-top-right-radius:0; border-bottom-right-radius:0; border-right:none;}
.mb-tools .unit-select {font-family:var(--sans); font-weight:600; font-size:13px; color:var(--ink-faint);
background-color:#fbfcfe; border:1px solid var(--line-strong); border-left:none;
border-top-right-radius:var(--radius); border-bottom-right-radius:var(--radius);
padding:9px 22px 9px 10px; outline:none; flex:0 0 auto; width:auto;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238891A6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 8px center;}
.mb-tools .unit-select:focus {border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft);}
.mb-tools .unit-suffix-badge {display:flex; align-items:center; font-family:var(--sans); font-weight:600; font-size:13px; color:var(--ink-faint);
background:#fbfcfe; border:1px solid var(--line-strong); border-left:none;
border-top-right-radius:var(--radius); border-bottom-right-radius:var(--radius);
padding:0 14px; flex:0 0 auto; width:auto;}
.mb-tools .recon-layout {display:grid; grid-template-columns:1fr 230px; gap:32px; align-items:start;}
@media (max-width:640px) {
.mb-tools .recon-layout {grid-template-columns:1fr;}
}
.mb-tools .cost-layout {display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;}
@media (max-width:760px) {
.mb-tools .cost-layout {grid-template-columns:1fr;}
}
.mb-tools .cost-visual {position:relative;
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
padding:22px;}
.mb-tools .cost-result-main {text-align:center; padding-bottom:16px; margin-bottom:14px; border-bottom:1px solid var(--line);}
.mb-tools .cost-result-label {font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);}
.mb-tools .cost-result-value {font-family:var(--display); font-weight:800; font-size:32px; color:var(--teal); margin:6px 0 4px; line-height:1.1; letter-spacing:-0.01em;}
.mb-tools .cost-result-sub {font-size:12.5px; color:var(--ink-faint);}
.mb-tools .cost-metric-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:10px;}
.mb-tools .cost-metric {background:#fff; border:1px solid var(--line); border-top:2px solid var(--teal); border-radius:10px; padding:12px 16px;}
.mb-tools .cost-metric:nth-child(2) {border-top-color:var(--accent);}
.mb-tools .cost-metric:nth-child(3) {border-top-color:var(--amber);}
.mb-tools .cost-metric:nth-child(4) {border-top-color:var(--green);}
.mb-tools .cost-metric.wide {grid-column:1 / -1;}
.mb-tools .cost-metric-label {font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px;}
.mb-tools .cost-metric-value {font-family:var(--sans); font-weight:700; font-size:15px; color:var(--ink);}
.mb-tools .cost-visual .readout {margin-top:0;}
.mb-tools .syringe-cards {display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (max-width:520px) {
.mb-tools .syringe-cards {grid-template-columns:1fr;}
}
.mb-tools .syringe-card {text-align:left; cursor:pointer; background:#fff;
border:1px solid var(--line-strong); border-radius:var(--radius);
padding:12px 12px 13px; transition:border-color .12s ease, box-shadow .12s ease;}
.mb-tools .syringe-card:hover {border-color:var(--ink-faint);}
.mb-tools .syringe-card.selected {border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft);}
.mb-tools .syringe-card svg {display:block; margin-bottom:8px;}
.mb-tools .syringe-card .sc-title {font-family:var(--sans); font-weight:700; font-size:12.5px; color:var(--ink);}
.mb-tools .syringe-card .sc-sub {font-family:var(--sans); font-size:11px; color:var(--ink-faint); margin-top:2px;}
.mb-tools .syringe-visual-panel {background:#fbfcfe; border:1px solid var(--line); border-radius:var(--radius);
padding:20px 12px; display:flex; flex-direction:column; align-items:center; gap:6px;}
.mb-tools .vial-svg {width:64px; height:auto; flex:0 0 auto;}
.mb-tools .vial-arrow {flex:0 0 auto; margin:2px 0;}
.mb-tools #syringe_svg, .mb-tools #rv_syringe_svg {width:100%; max-width:140px; height:auto; touch-action:none; margin-top:8px;}
.mb-tools .hgh-layout {display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:start;}
@media (max-width:640px) {
.mb-tools .hgh-layout {grid-template-columns:1fr;}
}
.mb-tools .hgh-gauge-wrap {background:#fbfcfe; border:1px solid var(--line); border-radius:var(--radius);
padding:20px 8px; display:flex; flex-direction:column; align-items:center; gap:4px;}
.mb-tools #hgh_gauge_svg {width:100%; max-width:210px; height:auto; touch-action:none;}
.mb-tools .hgh-form .field {margin-bottom:14px;}
.mb-tools .trt-week-strip {display:flex; gap:8px; margin:4px 0 22px;}
.mb-tools .trt-day {flex:1 1 0; text-align:center; padding:10px 4px; border-radius:10px;
background:#fff; border:1px solid var(--line); font-family:var(--sans); font-size:11.5px; font-weight:700; color:var(--ink-faint);
transition:background .15s ease, border-color .15s ease, color .15s ease;}
.mb-tools .trt-day.on {background:var(--accent-soft); border-color:var(--accent); color:var(--accent-dark, #A62368);}
.mb-tools .trt-day .dot {display:block; width:7px; height:7px; border-radius:50%; margin:5px auto 0; background:transparent;}
.mb-tools .trt-day.on .dot {background:var(--accent);}
.mb-tools .trt-gauge-wrap {background:#fbfcfe; border:1px solid var(--line); border-radius:var(--radius);
padding:14px 18px 8px; margin-bottom:8px;}
.mb-tools #trt_gauge_svg {width:100%; height:auto; touch-action:none;}
.mb-tools .trt-gauge-hit {cursor:grab;}
.mb-tools .trt-gauge-hit:active {cursor:grabbing;}
.mb-tools .syringe-hint {font-size:11.5px; color:var(--ink-faint); text-align:center; margin:8px 0 0; line-height:1.4;}
.mb-tools .syr-plunger-hit {cursor:grab;}
.mb-tools .syr-plunger-hit:active {cursor:grabbing;}
.mb-tools .syr-plunger-hit:focus .syr-plunger-mark {stroke:var(--teal-dark); stroke-width:3;}
.mb-tools .syr-plunger-hit:focus {outline:none;}
.mb-tools .result-actions {display:flex; gap:10px; margin-top:18px; padding-top:16px; flex-wrap:wrap;
border-top:1px solid var(--line);}
.mb-tools .result-actions .ghost {font-size:13px; padding:9px 16px; border-radius:10px; transition:border-color .15s ease, color .15s ease;}
.mb-tools .result-actions .ghost.confirmed {border-color:var(--green); color:var(--green);}
.mb-tools #r_foot:empty {display:none;}
.mb-tools #r_foot .readout-note {margin-top:14px;}
.mb-tools table.data {width:100%; border-collapse:collapse; margin-top:18px; font-size:13.5px;}
.mb-tools table.data caption {text-align:left; font-family:var(--sans); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:8px;}
.mb-tools table.data th {background:var(--teal-dark); color:#fff; text-align:left; font-weight:600;
padding:9px 12px; font-size:12px; letter-spacing:0.02em;}
.mb-tools table.data th:first-child {border-top-left-radius:var(--radius);}
.mb-tools table.data th:last-child {border-top-right-radius:var(--radius);}
.mb-tools table.data td {padding:8px 12px; border-bottom:1px solid var(--line); font-family:var(--sans); color:var(--ink);}
.mb-tools table.data tbody tr:nth-child(even) {background:rgba(52,88,250,0.03);}
.mb-tools table.data tbody tr.best td {background:var(--teal-soft);}
.mb-tools .flag {display:inline-block; font-family:var(--sans); font-size:11px; font-weight:700; color:var(--teal-dark); background:var(--teal-soft); border:1px solid var(--teal); padding:2px 8px; border-radius:999px; margin-left:8px;}
.mb-tools .scroll-x {overflow-x:auto;}
.mb-tools table.compare-table {width:100%; border-collapse:separate; border-spacing:0 10px; margin-top:8px; font-size:13.5px;}
.mb-tools table.compare-table thead th {background:transparent; color:var(--ink-faint); text-align:left; font-weight:600;
padding:0 12px 8px; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; border:none;}
.mb-tools table.compare-table tbody td {padding:10px 12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
background:var(--panel); vertical-align:middle; font-family:var(--sans); color:var(--ink);}
.mb-tools table.compare-table tbody td:first-child {border-left:1px solid var(--line); border-top-left-radius:var(--radius); border-bottom-left-radius:var(--radius);}
.mb-tools table.compare-table tbody td:last-child {border-right:1px solid var(--line); border-top-right-radius:var(--radius); border-bottom-right-radius:var(--radius);}
.mb-tools table.compare-table tbody tr:hover td {background:#FAFBFF;}
.mb-tools table.compare-table tbody tr.best td {background:var(--teal-soft); border-color:var(--line-strong);}
.mb-tools table.compare-table tbody tr.best:hover td {background:var(--teal-soft);}
.mb-tools table.compare-table input {width:100%; min-width:0; border:1px solid var(--line); border-radius:6px; padding:7px 9px;
font-family:var(--mono); font-size:13px; color:var(--ink); background:#fff; transition:border-color .12s ease, box-shadow .12s ease;}
.mb-tools table.compare-table input::placeholder {color:var(--ink-faint);}
.mb-tools table.compare-table input:focus {outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft);}
.mb-tools table.compare-table td[data-f-cell] {min-width:88px;}
.mb-tools table.compare-table .cell-doses, .mb-tools table.compare-table .cell-result, .mb-tools table.compare-table .cell-fullrun {font-family:var(--mono); font-weight:700; color:var(--ink); white-space:nowrap;}
.mb-tools table.compare-table .cell-result {color:var(--teal-dark);}
.mb-tools table.compare-table .row-remove {background:none; border:none; color:var(--ink-faint); font-family:var(--sans); font-size:12px;
cursor:pointer; text-decoration:underline; padding:4px; white-space:nowrap;}
.mb-tools table.compare-table .row-remove:hover {color:var(--accent);}
.mb-tools table.compare-table .flag {margin-left:0; margin-top:4px; display:inline-block;}
@media (max-width:700px) {
.mb-tools .scroll-x:has(table.compare-table) {overflow-x:visible;}
.mb-tools table.compare-table, .mb-tools table.compare-table tbody, .mb-tools table.compare-table tr, .mb-tools table.compare-table td {display:block; width:100%;}
.mb-tools table.compare-table thead {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.mb-tools table.compare-table tbody tr {border:1px solid var(--line); border-radius:var(--radius); padding:6px 4px; margin-bottom:12px;
background:var(--panel); box-shadow:var(--shadow);}
.mb-tools table.compare-table tbody tr.best {border-color:var(--teal); box-shadow:0 0 0 2px var(--teal-soft);}
.mb-tools table.compare-table td {border:none !important; border-radius:0 !important; background:transparent !important;
padding:8px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.mb-tools table.compare-table td:not(:last-child) {border-bottom:1px solid var(--line) !important;}
.mb-tools table.compare-table td::before {content:attr(data-label); flex:0 0 auto; font-family:var(--sans); font-size:11px; font-weight:700;
color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em;}
.mb-tools table.compare-table td input {width:60%; text-align:right;}
.mb-tools table.compare-table td[data-label="What you're buying"] input {width:65%; text-align:left;}
.mb-tools table.compare-table td:last-child {justify-content:flex-end; padding-top:10px;}
.mb-tools table.compare-table td:last-child::before {content:none;}
.mb-tools table.compare-table .row-remove {font-size:12.5px;}
}
.mb-tools .comparison-controls {margin-top:14px;}
.mb-tools .cost-chart-card {background:#fbfcfe; border:1px solid var(--line); border-radius:var(--radius);
padding:18px 20px 14px; margin:16px 0 20px;}
.mb-tools .cost-chart-title {font-family:var(--sans); font-weight:700; font-size:12.5px; color:var(--ink); margin-bottom:14px;}
.mb-tools .cost-bar-row {display:grid; grid-template-columns:120px 1fr 70px; align-items:center; gap:10px; margin-bottom:10px;}
.mb-tools .cost-bar-row:last-child {margin-bottom:0;}
.mb-tools .cost-bar-label {font-size:12.5px; color:var(--ink-soft); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mb-tools .cost-bar-track {background:var(--line); border-radius:99px; height:14px; overflow:hidden;}
.mb-tools .cost-bar-fill {height:100%; background:var(--amber); border-radius:99px; transition:width .18s ease;}
.mb-tools .cost-bar-fill.cheapest {background:var(--green);}
.mb-tools .cost-bar-value {font-family:var(--sans); font-weight:700; font-size:12.5px; color:var(--ink); text-align:right;}
@media (max-width:520px) {
.mb-tools .cost-bar-row {grid-template-columns:80px 1fr 60px;}
.mb-tools .cost-bar-label {font-size:11.5px;}
}
.mb-tools .row-remove {background:none; border:none; color:var(--ink-faint); font-family:var(--sans); font-weight:600; font-size:12px; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px;}
.mb-tools .row-remove:hover {color:var(--ink);}
.mb-tools .disclaimer {display:flex; gap:14px; align-items:flex-start; margin:20px 0 4px; padding:16px 18px;
border:1px solid var(--line);
background:#fff; border-radius:var(--radius); font-size:13px; color:var(--ink-soft);}
.mb-tools .disclaimer .d-icon {flex:0 0 auto; width:26px; height:26px; border-radius:50%;
background:var(--amber-soft); color:var(--amber);
display:flex; align-items:center; justify-content:center; margin-top:1px;}
.mb-tools .disclaimer .d-icon svg {width:13px; height:13px;}
.mb-tools .disclaimer b {color:var(--ink); display:block; font-size:13.5px; margin-bottom:3px;}
.mb-tools .faq {margin:32px 0 8px; background:var(--teal-soft); border:1px solid var(--line); border-radius:var(--radius); padding:28px;}
.mb-tools .faq-heading-row {display:flex; align-items:center; gap:14px; margin-bottom:20px;}
.mb-tools .faq-heading-row .faq-icon {flex:0 0 auto; width:44px; height:44px; border-radius:50%;
background:var(--teal); color:#fff; font-weight:700; font-size:20px;
display:flex; align-items:center; justify-content:center;}
.mb-tools .faq-heading-row h2 {font-family:var(--display); font-weight:700; font-size:20px; margin:0; color:var(--ink);}
.mb-tools .faq-item {border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; background:var(--panel); overflow:hidden; transition:border-color .15s ease;}
.mb-tools .faq-item:last-child {margin-bottom:0;}
.mb-tools .faq-q {width:100%; text-align:left; background:none; border:none; cursor:pointer;
padding:16px 18px; font-family:var(--sans); font-weight:600; font-size:15px; color:var(--ink);
display:flex; align-items:center; justify-content:space-between; gap:12px;}
.mb-tools .faq-q .qmark {flex:0 0 auto; width:22px; height:22px; border-radius:50%;
background:var(--teal); color:#fff; border:1px solid var(--teal); font-size:12px; font-weight:700;
display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; line-height:1;
margin-right:8px;}
.mb-tools .faq-q .faq-q-text {flex:1;}
.mb-tools .faq-chevron {flex-shrink:0; color:var(--ink-faint); transition:transform .2s ease, color .2s ease;}
.mb-tools .faq-item.open {border-color:var(--teal);}
.mb-tools .faq-item.open .faq-chevron {transform:rotate(180deg); color:var(--teal-dark);}
.mb-tools .faq-a {max-height:0; overflow:hidden; transition:max-height .25s ease;}
.mb-tools .faq-item.open .faq-a {max-height:400px;}
.mb-tools .faq-a-inner {padding:0 18px 18px; padding-left:52px;}
.mb-tools .faq-a p {font-size:14px; color:var(--ink-soft); margin:0; max-width:64ch;}
.mb-tools .crosslink {font-size:13.5px; margin-top:10px;}
.mb-tools .crosslink a {color:var(--teal); font-weight:600; text-decoration:none;}
.mb-tools .crosslink a:hover {text-decoration:underline;}
.mb-tools .ref-table-title {font-family:var(--sans); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin:26px 0 8px;}
.mb-tools footer.pagefoot {margin-top:70px; padding:44px 0 60px; border-top:1px solid var(--line);}
.mb-tools footer.pagefoot h3 {font-family:var(--display); font-weight:700; font-size:20px; margin:0 0 10px;}
.mb-tools footer.pagefoot p {font-size:14.5px; color:var(--ink-soft); margin:0;}
@media (max-width:640px) {
.mb-tools .field-grid {grid-template-columns:1fr;}
.mb-tools .hero {padding:44px 0 30px;}
.mb-tools section.tool {padding:44px 0 8px;}
}
.mb-tools .tool-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin:18px 0 8px;}
@media (max-width:820px) {
.mb-tools .tool-grid {grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:520px) {
.mb-tools .tool-grid {grid-template-columns:1fr;}
}
.mb-tools .tool-card {position:relative; display:flex; flex-direction:column; justify-content:space-between;
aspect-ratio:1 / 0.86; padding:22px 20px 20px; border-radius:var(--radius); text-decoration:none;
color:#fff; overflow:hidden; isolation:isolate;
box-shadow:0 10px 24px -12px rgba(19,27,46,0.28);
transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease;}
.mb-tools .tool-card:hover, .mb-tools .tool-card:focus-visible {transform:translateY(-5px) scale(1.015);
box-shadow:0 20px 34px -14px rgba(19,27,46,0.4);
text-decoration:none;}
.mb-tools .tool-card:active {transform:translateY(-2px) scale(1.005);}
.mb-tools .tool-card::after {content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
background:radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,0.35), transparent 55%);}
.mb-tools .tool-card.c1 {background:linear-gradient(155deg,#3B63FF,#22308A);}
.mb-tools .tool-card.c2 {background:linear-gradient(155deg,#22B8A6,#0E6E63);}
.mb-tools .tool-card.c3 {background:linear-gradient(155deg,#F5A524,#C6720A);}
.mb-tools .tool-card.c4 {background:linear-gradient(155deg,#ED4A9B,#A62368);}
.mb-tools .tool-card.c5 {background:linear-gradient(155deg,#8A5CF6,#4B2C9E);}
.mb-tools .tool-card.c6 {background:linear-gradient(155deg,#2FB1E8,#12628F);}
.mb-tools .tc-icon {width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,0.18);
display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px);}
.mb-tools .tc-icon svg {width:22px; height:22px;}
.mb-tools .tc-num {position:absolute; top:20px; right:20px; font-family:var(--sans); font-weight:700;
font-size:11px; letter-spacing:0.05em; color:rgba(255,255,255,0.65);}
.mb-tools .tc-body {margin-top:16px;}
.mb-tools .tc-title {font-family:var(--display); font-weight:700; font-size:19px; line-height:1.15; margin:0 0 6px;}
.mb-tools .tc-sub {font-family:var(--sans); font-size:12.5px; line-height:1.4; color:rgba(255,255,255,0.88); margin:0; max-width:22ch;}
.mb-tools .tc-arrow {margin-top:14px; display:flex; align-items:center; gap:6px;
font-family:var(--sans); font-weight:700; font-size:12px; color:#fff;
opacity:.9;}
.mb-tools .tc-arrow svg {width:14px; height:14px; transition:transform .18s ease;}
.mb-tools .tool-card:hover .tc-arrow svg {transform:translateX(4px);}
.mb-tools .option-row-label {font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
color:var(--ink-faint); margin:0 0 10px;}
.mb-tools .compound-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px;}
@media (max-width:640px) {
.mb-tools .compound-grid {grid-template-columns:repeat(2, 1fr);}
}
.mb-tools .compound-card {display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer;
background:#fff; border:1.5px solid var(--line-strong); border-radius:var(--radius);
padding:12px 12px; transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;}
.mb-tools .compound-card:hover {transform:translateY(-1px); border-color:var(--ink-faint);}
.mb-tools .compound-card.selected {border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft); background:var(--teal-soft);}
.mb-tools .compound-dot {flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:flex; align-items:center;
justify-content:center; font-family:var(--sans); font-weight:700; font-size:12px; color:#fff;}
.mb-tools .compound-name {font-family:var(--sans); font-weight:700; font-size:13px; color:var(--ink); line-height:1.25;}
.mb-tools .compound-tag {font-family:var(--sans); font-size:11px; color:var(--ink-faint); margin-top:1px;}
.mb-tools .compound-search {position:relative; margin-bottom:20px;}
.mb-tools .compound-search input {padding-left:38px;}
.mb-tools .compound-search svg {position:absolute; left:11px; top:50%; transform:translateY(-50%);
width:15px; height:15px; color:var(--ink-faint); pointer-events:none;}
.mb-tools .or-divider {display:flex; align-items:center; gap:10px; margin:2px 0 12px;
font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);}
.mb-tools .or-divider::before, .mb-tools .or-divider::after {content:""; flex:1; height:1px; background:var(--line);}
.mb-tools .tdose-layout {display:grid; grid-template-columns:1.15fr 1fr; gap:18px; align-items:stretch; margin-top:22px;}
@media (max-width:860px) {
.mb-tools .tdose-layout {grid-template-columns:1fr;}
}
.mb-tools .tdose-col {display:flex; flex-direction:column; min-width:0;}
.mb-tools .dose-graph-card {background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FF 100%);
border:1px solid var(--line); border-radius:var(--radius);
padding:22px 22px 16px; margin:0; flex:1 1 auto;
box-shadow:0 10px 28px -16px rgba(52,88,250,0.28);}
.mb-tools .dose-graph-head {display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.mb-tools .dose-graph-title {font-family:var(--sans); font-weight:700; font-size:13px; color:var(--ink);}
.mb-tools .dose-graph-peak {font-family:var(--sans); font-weight:700; font-size:12.5px; color:var(--teal-dark);
background:var(--teal-soft); padding:5px 12px; border-radius:999px; display:inline-flex; align-items:baseline; gap:4px;}
.mb-tools .dose-graph-peak b {font-family:var(--display); font-size:15px;}
.mb-tools .dose-graph-peak span {font-family:var(--sans); font-size:11px; font-weight:600; color:var(--ink-faint);}
.mb-tools #t_graph_svg {width:100%; height:auto; display:block; overflow:visible;}
.mb-tools .dose-table-card {background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
overflow:hidden; flex:1 1 auto; display:flex; flex-direction:column;
box-shadow:0 10px 28px -18px rgba(19,27,46,0.22);}
.mb-tools .dose-table-scroll {overflow-y:auto; max-height:308px;}
.mb-tools .dose-table-card table.data {margin:0; width:100%;}
.mb-tools .dose-table-card table.data thead th {position:sticky; top:0; z-index:1; border-radius:0 !important;}
.mb-tools .dose-table-scroll::-webkit-scrollbar {width:7px;}
.mb-tools .dose-table-scroll::-webkit-scrollbar-thumb {background:var(--line-strong); border-radius:99px;}
.mb-tools .trt-hero {background:linear-gradient(155deg,#FDECF5,#FFFFFF); border:1px solid var(--accent-soft);
border-radius:var(--radius); padding:22px; margin-bottom:22px; text-align:center;}
.mb-tools .trt-hero-label {font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px;}
.mb-tools .trt-hero input {max-width:320px; margin:0 auto; text-align:center; font-weight:700; font-size:16px;
border-color:var(--accent); background:#fff;}
.mb-tools .trt-hero input:focus {box-shadow:0 0 0 3px var(--accent-soft);}
.mb-tools .trt-hero-display {margin-top:16px; font-family:var(--display); font-weight:700; letter-spacing:0.01em;
font-size:clamp(26px,5vw,38px); color:var(--accent); text-transform:uppercase; line-height:1.1;
min-height:1.2em;}
.mb-tools .trt-hero-display .placeholder {font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink-faint); text-transform:none;}
.mb-tools .appshell {display:flex; align-items:flex-start; width:100%; max-width:1600px; margin:0 auto; gap:22px; padding:22px;}
.mb-tools .main-col {flex:1 1 auto; min-width:0; padding:0 0 40px;}
.mb-tools .main-topbar {position:sticky; top:0; z-index:40; background:rgba(245,248,255,0.92); backdrop-filter:blur(6px);
border-bottom:1px solid var(--line); padding:16px 32px;}
.mb-tools .main-topbar .crumb-active {font-family:var(--sans); font-weight:700; font-size:14px; color:var(--ink);}
.mb-tools .main-topbar .crumb-active .dim {font-weight:500; color:var(--ink-faint); margin-right:6px;}
.mb-tools .dash-hero {padding:32px 32px 8px; text-align:center;}
.mb-tools .dash-kicker {display:block; font-family:var(--sans); font-weight:700; font-size:12px;
letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px;}
.mb-tools .dash-hero h1 {font-family:var(--display); font-weight:700; font-size:clamp(28px,3.6vw,40px); margin:0 0 10px; letter-spacing:-0.015em; color:var(--ink);}
.mb-tools .dash-hero p {font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0 auto; max-width:58ch;}
.mb-tools .tool-hub {display:grid; grid-template-columns:1fr; gap:16px; padding:20px 32px 40px; max-width:1080px; margin:0 auto;}
.mb-tools .hub-card {position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
width:100%; text-align:left; font-family:var(--sans); cursor:pointer;
color:#fff; border:none; border-radius:14px;
background:
radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,0.22), transparent 55%),
radial-gradient(1px 1px at 13px 13px, rgba(255,255,255,0.14) 1px, transparent 0) 0 0/15px 15px,
linear-gradient(155deg, var(--accent), var(--accent-dark));
padding:22px 20px 20px; overflow:visible;
box-shadow:0 10px 26px -14px var(--accent-dark);
transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1);}
.mb-tools .hub-card::before {content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
background:linear-gradient(155deg, rgba(255,255,255,0.55), transparent 55%); opacity:.6;
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
transition:opacity .28s ease;}
.mb-tools .hub-card:hover, .mb-tools .hub-card:focus-visible {transform:translateY(-5px); box-shadow:0 20px 38px -14px var(--accent-dark);
outline:none;}
.mb-tools .hub-card:hover::before, .mb-tools .hub-card:focus-visible::before {opacity:.9;}
.mb-tools .hub-card:active {transform:translateY(-2px); transition-duration:.1s;}
.mb-tools .hub-card:focus-visible {outline:2px solid #fff; outline-offset:2px;}
.mb-tools .hub-top {display:flex; align-items:flex-start; justify-content:space-between; width:100%; gap:10px;}
.mb-tools .hub-icon {position:relative; flex:0 0 auto; width:48px; height:48px; border-radius:12px;
background:rgba(255,255,255,0.16);
display:flex; align-items:center; justify-content:center; color:#fff;
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.35),
inset 0 -6px 12px -6px rgba(0,0,0,0.3),
0 1px 0 rgba(255,255,255,0.15);
backdrop-filter:blur(2px);
transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, box-shadow .3s ease;}
.mb-tools .hub-icon svg {width:22px; height:22px; transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.mb-tools .hub-led {position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%;
background:rgba(255,255,255,0.35); box-shadow:inset 0 1px 1px rgba(0,0,0,0.15);
border:2px solid var(--accent-dark);
transition:background .25s ease, box-shadow .25s ease;}
.mb-tools .hub-card:hover .hub-icon, .mb-tools .hub-card:focus-visible .hub-icon {transform:translateY(-1px) scale(1.06);
background:rgba(255,255,255,0.26);}
.mb-tools .hub-card:hover .hub-icon svg, .mb-tools .hub-card:focus-visible .hub-icon svg {transform:scale(1.08);}
.mb-tools .hub-card:hover .hub-led, .mb-tools .hub-card:focus-visible .hub-led {background:#fff;
box-shadow:0 0 0 3px rgba(255,255,255,0.28), 0 0 8px 1px rgba(255,255,255,0.9);
animation:mbtools-hub-blink 1.6s ease-in-out infinite;}
.mb-tools .hub-card:active .hub-icon {transform:translateY(0) scale(1.02);}
@keyframes mbtools-hub-blink {0%, 100%{ opacity:1; } 50%{ opacity:.45; }}
.mb-tools .hub-readout {flex:0 0 auto; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:0.04em;
color:rgba(255,255,255,0.95); background:rgba(255,255,255,0.14);
border:1px solid rgba(255,255,255,0.28);
border-radius:5px; padding:4px 7px; white-space:nowrap; margin-top:2px;}
.mb-tools .hub-title {font-family:var(--display); font-weight:700; font-size:19px; color:#fff; letter-spacing:-0.01em;}
.mb-tools .hub-desc {display:block; font-size:13.5px; color:rgba(255,255,255,0.85); line-height:1.45; margin:0; max-width:44ch;}
.mb-tools .hub-cta {margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:7px;
font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
color:rgba(255,255,255,0.9);
transition:color .22s ease, gap .22s cubic-bezier(.2,.8,.2,1);}
.mb-tools .hub-cta::before {content:""; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.4); flex:0 0 auto;
transition:background .22s ease, box-shadow .22s ease;}
.mb-tools .hub-card:hover .hub-cta, .mb-tools .hub-card:focus-visible .hub-cta {gap:10px; color:#fff;}
.mb-tools .hub-card:hover .hub-cta::before, .mb-tools .hub-card:focus-visible .hub-cta::before {background:#fff; box-shadow:0 0 6px 1px rgba(255,255,255,0.9);}
.mb-tools .hub-cta svg {width:13px; height:13px; transition:transform .22s cubic-bezier(.2,.8,.2,1);}
.mb-tools .hub-card:hover .hub-cta svg, .mb-tools .hub-card:focus-visible .hub-cta svg {transform:translateX(3px);}
@media (prefers-reduced-motion: reduce) {
.mb-tools .hub-card, .mb-tools .hub-cta svg, .mb-tools .hub-icon, .mb-tools .hub-icon svg, .mb-tools .hub-cta, .mb-tools .hub-title, .mb-tools .hub-led {transition:none;}
.mb-tools .hub-card:hover, .mb-tools .hub-card:focus-visible {transform:none;}
.mb-tools .hub-card:hover .hub-icon, .mb-tools .hub-card:focus-visible .hub-icon {transform:none;}
.mb-tools .hub-card:hover .hub-led, .mb-tools .hub-card:focus-visible .hub-led {animation:none;}
}
@media (min-width:620px) {
.mb-tools .tool-hub {grid-template-columns:repeat(2, 1fr);}
}
@media (min-width:920px) {
.mb-tools .tool-hub {grid-template-columns:repeat(3, 1fr); gap:20px;}
.mb-tools .hub-card {padding:28px 24px; min-height:210px;}
}
.mb-tools .drawer-overlay {position:fixed; inset:0; z-index:90; background:rgba(11,15,28,0.55); backdrop-filter:blur(3px);
display:flex; align-items:flex-end; justify-content:center;
opacity:0; pointer-events:none; transition:opacity .2s ease;}
.mb-tools .drawer-overlay.is-open {opacity:1; pointer-events:auto;}
.mb-tools .mbt-drawer {position:relative; width:100%; flex:0 1 auto;
background:var(--paper); border-radius:20px 20px 0 0; overflow:hidden;
max-height:88vh; max-height:88dvh; display:flex; flex-direction:column; min-height:0;
transform:translateY(100%); transition:transform .28s cubic-bezier(.32,.72,0,1);
box-shadow:0 -20px 50px -20px rgba(10,14,28,0.4);
outline:none;}
.mb-tools .mbt-drawer.is-open {transform:translateY(0);}
.mb-tools .drawer-handle {flex:0 0 auto; display:flex; justify-content:center; padding:10px 0 2px; background:var(--paper);}
.mb-tools .drawer-handle span {width:36px; height:4px; border-radius:99px; background:var(--line-strong);}
.mb-tools .drawer-bar {flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:10px 18px 14px; border-bottom:1px solid var(--line); background:var(--paper);}
.mb-tools .drawer-bar-left {display:flex; align-items:center; gap:10px; min-width:0;}
.mb-tools .drawer-dot {flex:0 0 auto; width:32px; height:32px; border-radius:9px; background:linear-gradient(155deg, var(--teal), var(--teal-dark)); display:flex; align-items:center; justify-content:center; color:#fff;}
.mb-tools .drawer-dot svg {width:16px; height:16px;}
.mb-tools .drawer-title {font-family:var(--display); font-weight:700; font-size:16.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mb-tools .drawer-close {flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong);
background:#fff; color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.mb-tools .drawer-close:hover {background:var(--teal-soft); color:var(--teal-dark); border-color:var(--teal);}
.mb-tools .drawer-body {flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
body.mbt-drawer-locked {overflow:hidden; height:100%;}
.mb-tools .tool-panels .wrap {padding:0; max-width:none;}
.mb-tools .tool-panels section.tool {display:none; padding:6px 22px 28px; border-top:none; scroll-margin-top:0;}
.mb-tools .tool-panels section.tool.active-panel {display:block;}
.mb-tools .tool-panels .disclaimer, .mb-tools .tool-panels .faq {margin-left:0; margin-right:0;}
.mb-tools .dash-footer {padding:8px 32px 0;}
.mb-tools .dash-footer .pagefoot {margin-top:24px;}
@media (min-width:760px) {
.mb-tools .drawer-overlay {align-items:center; padding:32px;}
.mb-tools .drawer-handle {display:none;}
.mb-tools .mbt-drawer {width:100%; max-width:900px; max-height:86vh; border-radius:20px;
transform:translateY(16px) scale(.98); opacity:0; transition:transform .22s ease, opacity .22s ease;}
.mb-tools .mbt-drawer.is-open {transform:translateY(0) scale(1); opacity:1;}
.mb-tools .drawer-bar {padding:18px 26px; border-radius:20px 20px 0 0;}
.mb-tools .tool-panels section.tool {padding:8px 30px 30px;}
}
@media (max-width:900px) {
.mb-tools .appshell {padding:0; gap:0;}
.mb-tools .main-topbar {padding:14px 20px;}
.mb-tools .dash-hero {padding:22px 20px 4px;}
.mb-tools .tool-hub {padding:16px 20px 30px;}
.mb-tools .dash-footer {padding:0 20px;}
}
.mb-tools .panel {position:relative;}
.mb-tools .panel-head {position:relative;
background:linear-gradient(180deg, #FFFFFF, #FAFBFF);}
.mb-tools .panel-head::after {content:""; position:absolute; left:22px; right:22px; bottom:0; height:1px;
background:repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 9px);
opacity:.55;}
.mb-tools .panel-head .live-dot {margin-left:auto; display:flex; align-items:center; gap:6px; flex:0 0 auto;
font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint);}
.mb-tools .panel-head .live-dot i {width:6px; height:6px; border-radius:50%; background:var(--green); display:block;
box-shadow:0 0 0 0 rgba(29,161,117,.5); animation:mbtools-live-pulse 2.2s ease-in-out infinite;}
@keyframes mbtools-live-pulse {0%{ box-shadow:0 0 0 0 rgba(29,161,117,.45); }
70%{ box-shadow:0 0 0 6px rgba(29,161,117,0); }
100%{ box-shadow:0 0 0 0 rgba(29,161,117,0); }}
@media (prefers-reduced-motion: reduce) {
.mb-tools .panel-head .live-dot i {animation:none;}
}
.mb-tools .dial-field {display:flex; flex-direction:column; gap:2px;}
.mb-tools .dial-head {display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:2px;}
.mb-tools .dial-value {font-family:var(--mono); font-weight:700; font-size:12.5px; color:var(--teal-dark);
background:var(--teal-soft); border-radius:6px; padding:2px 8px; letter-spacing:.01em; white-space:nowrap;}
.mb-tools .dial-track {display:flex; align-items:center; gap:10px;}
.mb-tools .dial-track input[type=number] {width:84px; flex:0 0 auto;}
.mb-tools input[type=range] {-webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; margin:0; flex:1 1 auto;}
.mb-tools input[type=range]::-webkit-slider-runnable-track {height:5px; border-radius:99px;
background:linear-gradient(90deg, var(--teal) 0%, var(--teal) var(--fill,50%), var(--line) var(--fill,50%), var(--line) 100%);}
.mb-tools input[type=range]::-webkit-slider-thumb {-webkit-appearance:none; width:17px; height:17px; border-radius:50%; margin-top:-6px;
background:#fff; border:3px solid var(--teal); box-shadow:0 2px 6px rgba(19,27,46,0.25); cursor:grab;}
.mb-tools input[type=range]::-webkit-slider-thumb:active {cursor:grabbing;}
.mb-tools input[type=range]::-moz-range-track {height:5px; border-radius:99px; background:var(--line);}
.mb-tools input[type=range]::-moz-range-progress {height:5px; border-radius:99px; background:var(--teal);}
.mb-tools input[type=range]::-moz-range-thumb {width:17px; height:17px; border-radius:50%; background:#fff; border:3px solid var(--teal); box-shadow:0 2px 6px rgba(19,27,46,0.25); cursor:grab;}
.mb-tools input[type=range]:focus-visible {outline:none;}
.mb-tools input[type=range]:focus-visible::-webkit-slider-thumb {box-shadow:0 0 0 4px var(--teal-soft);}
.mb-tools .dial-ticks {display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--ink-faint); padding:0 1px;}
.mb-tools .readout-main.flash, .mb-tools .cost-result-value.flash {animation:mbtools-readout-flash .5s ease;}
@keyframes mbtools-readout-flash {0%{ color:var(--accent); } 100%{ color:var(--teal); }}
@media (prefers-reduced-motion: reduce) {
.mb-tools .readout-main.flash, .mb-tools .cost-result-value.flash {animation:none;}
}
/* ---- All Tools drawer: fixes for living inside the theme ----
The supplied page had no sticky header, so its overlay sat at z-index 90.
Here header.site is sticky at 100 and the nav drawer at 150, so the tool
drawer opened behind both. 400 clears them with room to spare.
The drawer element itself was renamed .mbt-drawer, because .drawer is the
theme's mobile navigation panel — it would have arrived carrying
transform:translateX(100%), a 340px width cap and 88px of top padding. */
.mb-tools .drawer-overlay {
z-index: 400;
}
/* Defensive: the same treatment for a drawer still carrying the theme's
.drawer class.
-----------------------------------------------------------------------
The element was renamed to .mbt-drawer because .drawer is the theme's
mobile navigation panel, which parks it off-screen with
transform:translateX(100%). If the template is ever out of step with this
stylesheet — an older copy uploaded, a cached page — the overlay appears and
the drawer does not, which reads as a drawer that opens empty. Matching both
names costs a few lines and removes that failure entirely. */
.mb-tools .drawer-overlay > .drawer {
position: relative;
inset: auto;
z-index: auto;
width: 100%;
max-width: none;
max-height: 88vh;
max-height: 88dvh;
flex: 0 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
padding: 0;
border: 0;
border-radius: 20px 20px 0 0;
overflow: hidden;
background: var(--paper);
box-shadow: 0 -20px 50px -20px rgba(10, 14, 28, .4);
transform: translateY(100%);
transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}
.mb-tools .drawer-overlay > .drawer.is-open {
transform: translateY(0);
}
/* ---------------------------------------------------------------------------
Sign in page.
Generated from the supplied standalone page, scoped to .mb-auth for the same
reason the tools page is scoped to .mb-tools: it redefines :root and restyles
body and a. Its one keyframe is renamed too, because animation names stay
global however the selectors are scoped.
*/
.mb-auth {--blue-deep:#22308A;
--blue-main:#3458FA;
--blue-soft:#E9EDFE;
--blue-mist:#F5F8FF;
--pink-main:#ED4A9B;
--pink-soft:#FCE7F1;
--accent-soft:#FDECF5;
--heading-color:#202729;
--ink:#131B2E;
--ink-soft:#5B6478;
--line:#E3E9F5;
--white:#FFFFFF;
--radius:8px;
--shadow-soft:0 1px 2px rgba(19,27,46,0.04), 0 12px 32px -16px rgba(19,27,46,0.10);
--error:#D14343;}
.mb-auth h1, .mb-auth h2 {font-family:"PT Serif",serif;
color:var(--heading-color);
margin:0 0 .5em;}
.mb-auth button {font-family:inherit;}
.mb-auth :focus-visible {outline:2.5px solid var(--blue-main); outline-offset:2px; border-radius:4px;}
.mb-auth .page-outer {padding:56px 24px;
display:flex;
justify-content:center;}
.mb-auth .shell {width:100%;
max-width:900px;
display:grid;
grid-template-columns:minmax(0,420px) minmax(0,460px);
align-items:stretch;
background:var(--white);
border-radius:16px;
overflow:hidden;
box-shadow:0 2px 8px rgba(19,27,46,0.05), 0 32px 64px -24px rgba(34,48,138,0.28);}
.mb-auth .brand-panel {position:relative;
background:linear-gradient(135deg, #5C7BFF 0%, var(--blue-main) 45%, var(--blue-deep) 100%);
color:#fff;
padding:48px 44px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:24px;
overflow:hidden;}
.mb-auth .brand-mark {position:relative;
z-index:2;
display:inline-flex;
align-items:center;
gap:10px;
font-family:"PT Serif",serif;
font-weight:700;
font-size:20px;
letter-spacing:.01em;
color:#fff;}
.mb-auth .brand-mark img {width:72px; height:72px;
display:block;
flex:none;}
.mb-auth .brand-copy {position:relative; z-index:2; max-width:340px;}
.mb-auth .brand-eyebrow {display:inline-flex;
align-items:center;
background:var(--pink-main);
color:#fff;
font-size:11.5px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
padding:7px 14px;
border-radius:6px;
margin-bottom:18px;}
.mb-auth .brand-headline {font-size:clamp(28px,3vw,34px);
line-height:1.18;
margin-bottom:14px;
color:#fff;}
.mb-auth .brand-sub {color:#EAEDFB;
font-size:15px;
margin:0;}
.mb-auth .brand-stats {position:relative;
z-index:2;
display:flex;
gap:28px;
padding-top:28px;
margin-top:28px;
border-top:1px solid rgba(255,255,255,0.28);}
.mb-auth .brand-stats div {display:flex; flex-direction:column; gap:2px;}
.mb-auth .brand-stats strong {font-family:"PT Serif",serif; font-size:22px; line-height:1; color:#fff;}
.mb-auth .brand-stats span {font-size:12.5px; color:#DCE3FF;}
.mb-auth .plate-rack {position:absolute;
right:-70px;
bottom:-70px;
width:340px;
height:340px;
z-index:1;
opacity:.6;}
.mb-auth .plate-rack circle {fill:none;}
.mb-auth .form-panel {background:var(--white);
display:flex;
align-items:center;
justify-content:center;
padding:56px 40px;}
.mb-auth .form-col {width:100%; max-width:380px;}
.mb-auth .page-head {margin-bottom:24px;}
.mb-auth .page-title {font-size:28px; line-height:1.15; margin-bottom:6px;}
.mb-auth .page-sub {color:var(--ink-soft); font-size:14.5px; margin:0;}
.mb-auth .tabs {display:grid;
grid-template-columns:1fr 1fr;
background:var(--blue-soft);
border-radius:var(--radius);
padding:4px;
margin-bottom:24px;
position:relative;}
.mb-auth .tab-btn {border:none;
background:transparent;
cursor:pointer;
padding:10px 12px;
font-size:14px;
font-weight:700;
color:var(--blue-deep);
border-radius:6px;
position:relative;
z-index:2;
transition:color .15s ease;}
.mb-auth .tabs[data-active="signup"] .tab-btn[data-tab="signin"], .mb-auth .tabs[data-active="signin"] .tab-btn[data-tab="signup"] {color:var(--ink-soft);}
.mb-auth .tab-indicator {position:absolute;
top:4px; bottom:4px; left:4px;
width:calc(50% - 4px);
background:var(--white);
border-radius:6px;
box-shadow:0 2px 6px rgba(34,48,138,0.14);
transition:transform .25s cubic-bezier(.4,0,.2,1);
z-index:1;}
.mb-auth .tabs[data-active="signup"] .tab-indicator {transform:translateX(100%);}
.mb-auth .auth-form {display:flex;
flex-direction:column;
gap:18px;}
.mb-auth .auth-form[hidden] {display:none;}
.mb-auth .form-field {display:flex; flex-direction:column; gap:7px;}
.mb-auth .form-field label {font-size:13.5px; font-weight:700; color:var(--heading-color); letter-spacing:.01em;}
.mb-auth .input-wrap {position:relative; display:flex; align-items:center;}
.mb-auth .input-wrap svg {position:absolute;
left:13px;
width:17px; height:17px;
color:#9AA3C0;
pointer-events:none;}
.mb-auth .form-field input {width:100%;
font-family:"Public Sans",sans-serif;
font-size:14.5px;
padding:12px 14px 12px 40px;
border:1.5px solid var(--line);
border-radius:var(--radius);
color:var(--ink);
background:var(--blue-mist);
transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;}
.mb-auth .form-field input::placeholder {color:#9AA3B8;}
.mb-auth .form-field input:focus {outline:none;
border-color:var(--blue-main);
background:var(--white);
box-shadow:0 0 0 4px rgba(52,88,250,0.12);}
.mb-auth .form-field input:invalid[data-touched="true"], .mb-auth .form-field.has-error input {border-color:var(--error);
background:#FEF4F4;}
.mb-auth .form-field.has-error input:focus {box-shadow:0 0 0 4px rgba(209,67,67,0.12);}
.mb-auth .field-msg {font-size:12.5px; color:var(--ink-soft); margin-top:1px;}
.mb-auth .field-msg.error {color:var(--error); display:none;}
.mb-auth .form-field.has-error .field-msg.error {display:block;}
.mb-auth .form-field.has-error .field-msg.hint {display:none;}
.mb-auth .pw-toggle {position:absolute;
right:6px;
background:none;
border:none;
cursor:pointer;
padding:6px 8px;
font-size:12px;
font-weight:700;
color:var(--blue-main);
border-radius:6px;}
.mb-auth .pw-toggle:hover {background:var(--blue-soft);}
.mb-auth .row-between {display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:-4px;}
.mb-auth .check-option {display:flex;
align-items:center;
gap:8px;
font-size:13.5px;
font-weight:600;
color:var(--ink);
cursor:pointer;}
.mb-auth .check-option input[type="checkbox"] {width:16px; height:16px;
accent-color:var(--blue-main);
margin:0;
border-radius:4px;}
.mb-auth .forgot-link {font-size:13.5px; font-weight:700; color:var(--blue-main);}
.mb-auth .submit-btn {display:flex;
align-items:center;
justify-content:center;
gap:8px;
background:var(--blue-main);
color:#fff;
font-weight:700;
font-size:15px;
padding:14px 22px;
border:none;
border-radius:var(--radius);
cursor:pointer;
width:100%;
box-shadow:0 10px 24px -10px rgba(52,88,250,0.45);
transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
margin-top:2px;}
.mb-auth .submit-btn:hover {filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 14px 28px -10px rgba(52,88,250,0.5);}
.mb-auth .submit-btn:active {transform:translateY(0);}
.mb-auth .submit-btn:disabled {cursor:default; filter:none; transform:none; opacity:.85;}
.mb-auth .spinner {width:15px; height:15px;
border-radius:50%;
border:2px solid rgba(255,255,255,0.4);
border-top-color:#fff;
animation:mbauth-spin .7s linear infinite;
display:none;
flex:none;}
.mb-auth .submit-btn.loading .spinner {display:inline-block;}
.mb-auth .submit-btn.loading .btn-label {opacity:.85;}
@keyframes mbauth-spin {to{transform:rotate(360deg);}}
.mb-auth .form-divider {display:flex;
align-items:center;
gap:12px;
color:var(--ink-soft);
font-size:11.5px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
margin:20px 0;}
.mb-auth .form-divider::before, .mb-auth .form-divider::after {content:""; flex:1; height:1px; background:var(--line);}
.mb-auth .oauth-row {display:flex; flex-direction:column; gap:10px;}
.mb-auth .oauth-btn {display:flex;
align-items:center;
justify-content:center;
gap:10px;
width:100%;
padding:11px 16px;
border:1.5px solid var(--line);
border-radius:var(--radius);
background:var(--white);
font-size:14px;
font-weight:600;
color:var(--ink);
cursor:pointer;
transition:border-color .15s ease, background .15s ease;}
.mb-auth .oauth-btn:hover {border-color:var(--blue-main); background:var(--blue-mist);}
.mb-auth .oauth-btn svg {width:17px; height:17px; flex:none;}
.mb-auth .footnote {text-align:center;
font-size:12.5px;
color:var(--ink-soft);
margin-top:22px;}
@media (max-width:900px) {
.mb-auth .page-outer {padding:40px 20px;}
.mb-auth .shell {grid-template-columns:1fr; max-width:480px; margin:0 auto; border-radius:14px;}
.mb-auth .brand-panel {padding:36px 30px 32px;}
.mb-auth .brand-copy {max-width:none;}
.mb-auth .brand-headline {font-size:24px;}
.mb-auth .brand-stats {gap:22px; padding-top:22px; margin-top:22px;}
.mb-auth .plate-rack {width:200px; height:200px; right:-60px; bottom:-60px;}
.mb-auth .form-panel {padding:36px 28px 40px;}
}
@media (max-width:480px) {
.mb-auth .page-outer {padding:20px 12px;}
.mb-auth .shell {border-radius:12px; box-shadow:0 2px 8px rgba(19,27,46,0.05), 0 20px 40px -20px rgba(34,48,138,0.28);}
.mb-auth .brand-panel {padding:28px 22px 26px;}
.mb-auth .brand-headline {font-size:22px;}
.mb-auth .brand-stats {flex-wrap:wrap; row-gap:14px;}
.mb-auth .form-panel {padding:28px 18px 36px;}
.mb-auth .row-between {flex-wrap:wrap; gap:10px;}
.mb-auth .oauth-row {gap:8px;}
}
/* ---------------------------------------------------------------------------
Sign in: dressing the My Account plugin's form in the page's design.
The markup below belongs to the plugin — .ma-field, .ma-label, .ma-button and
the rest — because the plugin owns the posting, the nonces and the notices.
Only the appearance is the theme's. Nothing here changes what a field is
named or where the form goes, so the plugin can be updated without taking
the design with it.
--------------------------------------------------------------------------- */
.mb-auth .auth-pane[hidden] {
display: none;
}
/* The plugin wraps its form in a card. Inside this page the card is the panel
around it, so the inner one is flattened. */
.mb-auth .ma-card,
.mb-auth .ma-auth {
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
/* Its own heading duplicates "Welcome back" above the tabs. */
.mb-auth .ma-auth__title {
display: none;
}
.mb-auth .ma-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.mb-auth .ma-field {
display: flex;
flex-direction: column;
gap: 7px;
}
.mb-auth .ma-label {
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.mb-auth .ma-form input[type="text"],
.mb-auth .ma-form input[type="email"],
.mb-auth .ma-form input[type="password"],
.mb-auth .ma-form input[type="url"] {
width: 100%;
height: 46px;
padding: 0 14px;
border: 1px solid var(--line-strong);
border-radius: 10px;
background: #fff;
font: inherit;
font-size: 15px;
color: var(--ink);
transition: border-color .15s ease, box-shadow .15s ease;
}
.mb-auth .ma-form input:focus {
outline: none;
border-color: var(--teal, #3458FA);
box-shadow: 0 0 0 3px var(--teal-soft, #E9EDFE);
}
.mb-auth .ma-check {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--ink-soft, #5B6478);
}
.mb-auth .ma-check input {
width: auto;
height: auto;
margin: 0;
}
.mb-auth .ma-button {
width: 100%;
height: 48px;
border: 1px solid var(--line-strong);
border-radius: 10px;
background: #fff;
font: inherit;
font-size: 15px;
font-weight: 700;
color: var(--ink);
cursor: pointer;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mb-auth .ma-button--primary {
border-color: transparent;
background: linear-gradient(155deg, #3B63FF, #22308A);
color: #fff;
box-shadow: 0 8px 18px -10px rgba(52, 88, 250, .8);
}
.mb-auth .ma-button--primary:hover {
filter: brightness(1.06);
}
.mb-auth .ma-button:not(.ma-button--primary):hover {
border-color: var(--teal, #3458FA);
color: var(--teal, #3458FA);
}
/* Forgotten password is a disclosure in the plugin. Kept as one — it opens
without script and needs no page of its own — but styled as the quiet link
the design puts there. */
.mb-auth .ma-lost {
margin-top: 14px;
border-top: 1px solid var(--line);
padding-top: 14px;
}
.mb-auth .ma-lost > summary {
list-style: none;
cursor: pointer;
font-size: 13.5px;
font-weight: 600;
color: var(--teal, #3458FA);
}
.mb-auth .ma-lost > summary::-webkit-details-marker {
display: none;
}
.mb-auth .ma-lost .ma-form {
margin-top: 12px;
}
.mb-auth .ma-notice {
margin: 0 0 16px;
padding: 11px 14px;
border-radius: 10px;
border: 1px solid var(--line-strong);
background: #fff;
font-size: 13.5px;
line-height: 1.5;
}
.mb-auth .ma-notice--error {
border-color: #F5C2C7;
background: #FDF2F3;
color: #A3242C;
}
.mb-auth .ma-notice--success {
border-color: #A7E3CB;
background: #EAFBF4;
color: #0B6B4F;
}
.mb-auth .ma-hint {
font-size: 12.5px;
color: var(--ink-faint, #8891A6);
}
/* The registration honeypot must stay in the DOM and out of sight — it is how
the plugin spots bots. Not display:none, which some fillers ignore. */
.mb-auth .ma-hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* The signed-in dashboard is the theme's own template now — my-account/account.php
— styled under .mb-dash further down. The .mb-auth-in rules that used to dress
the plugin's default dashboard were removed with it rather than left behind to
confuse the next person. */
/* ---------------------------------------------------------------------------
Member dashboard.
The plugin's own account template is replaced by the theme's — see
my-account/account.php — and this is its styling. Scoped to .mb-dash for the
same reason as the other two: the source redefines :root and restyles body,
and its keyframes are renamed because animation names stay global.
*/
.mb-dash {--blue-deep:#22308A;
--blue-main:#3458FA;
--blue-soft:#E9EDFE;
--blue-mist:#F5F8FF;
--pink-main:#ED4A9B;
--pink-soft:#FCE7F1;
--accent-soft:#FDECF5;
--gold-main:#B7791F;
--gold-soft:#FBF0DC;
--heading-color:#202729;
--ink:#131B2E;
--ink-soft:#5B6478;
--line:#E3E9F5;
--white:#FFFFFF;
--radius:8px;
--shadow-soft:0 1px 2px rgba(19,27,46,0.04), 0 12px 32px -16px rgba(19,27,46,0.10);
--error:#D14343;
--success:#1F9254;}
.mb-dash button {font-family:inherit;}
.mb-dash :focus-visible {outline:2.5px solid var(--blue-main); outline-offset:2px; border-radius:8px;}
.mb-dash h1, .mb-dash h2, .mb-dash h3 {font-family:"Public Sans",sans-serif; margin:0;}
.mb-dash .eyebrow {display:inline-flex;
align-items:center;
gap:6px;
background:var(--white);
border:1px solid var(--line);
color:var(--blue-deep);
font-size:11.5px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
padding:6px 12px;
border-radius:8px;
margin-bottom:14px;}
.mb-dash .eyebrow svg {width:12px; height:12px;}
.mb-dash .page-title {font-weight:800;
font-size:clamp(30px,4vw,40px);
letter-spacing:-.02em;
color:var(--ink);
margin:0 0 6px;}
.mb-dash .page-kicker {font-size:14.5px; color:var(--ink-soft); margin:0; max-width:480px;}
.mb-dash .quick-actions {display:flex; gap:10px; flex-wrap:wrap;}
.mb-dash .ghost-btn {display:inline-flex; align-items:center; gap:7px;
background:var(--white);
border:1.5px solid var(--line);
color:var(--ink);
font-weight:700;
font-size:13.5px;
padding:10px 16px;
border-radius:8px;
cursor:pointer;
transition:border-color .15s ease, background .15s ease, color .15s ease;}
.mb-dash .ghost-btn:hover {border-color:var(--blue-main); background:var(--white); color:var(--blue-main); text-decoration:none;}
.mb-dash .ghost-btn svg {width:15px; height:15px; flex:none;}
.mb-dash .ghost-btn.danger:hover {border-color:var(--error); color:var(--error); background:#FEF4F4;}
.mb-dash .page-shell {max-width:1120px; margin:0 auto; padding:28px 24px 80px;}
.mb-dash .dashboard {display:grid; grid-template-columns:264px 1fr; gap:24px; align-items:start;}
.mb-dash .dashboard > * {min-width:0;}
.mb-dash .sidebar {position:sticky; top:20px;
background:var(--white);
border:1px solid var(--line);
border-radius:8px;
padding:24px 20px;
box-shadow:0 2px 8px rgba(19,27,46,0.05), 0 20px 40px -24px rgba(34,48,138,0.25);}
.mb-dash .avatar-block {display:flex; flex-direction:column; align-items:center; text-align:center; padding-bottom:18px;}
.mb-dash .avatar-wrap {position:relative; margin-bottom:14px; flex:none;}
.mb-dash .avatar-meta {display:flex; flex-direction:column; align-items:center; min-width:0;}
.mb-dash .avatar {width:76px; height:76px;
border-radius:50%;
background:linear-gradient(135deg, var(--blue-main), var(--blue-deep));
background-size:cover; background-position:center;
color:#fff;
display:flex; align-items:center; justify-content:center;
font-weight:800; font-size:26px;
box-shadow:0 0 0 4px var(--white), 0 0 0 5.5px var(--pink-main), 0 6px 18px -6px rgba(52,88,250,0.5);}
.mb-dash .avatar-edit {position:absolute; right:-2px; bottom:-2px;
width:28px; height:28px; border-radius:50%;
background:var(--blue-main); color:#fff;
border:2.5px solid var(--white);
display:flex; align-items:center; justify-content:center;
cursor:pointer;
transition:filter .15s ease;}
.mb-dash .avatar-edit:hover {filter:brightness(1.1);}
.mb-dash .avatar-edit svg {width:13px; height:13px;}
.mb-dash .avatar-block .username {font-weight:800; font-size:17px; color:var(--ink); margin:0 0 2px; letter-spacing:-.01em;}
.mb-dash .avatar-block .member-since {font-size:12.5px; color:var(--ink-soft); margin:0 0 10px;}
.mb-dash .tier-row {display:inline-flex; align-items:center; gap:8px;
font-size:12px; color:var(--ink-soft);}
.mb-dash .tier-pill {font-weight:800; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
background:var(--blue-soft); color:var(--blue-deep);
padding:3px 8px; border-radius:8px;}
.mb-dash .sidebar-divider {height:1px; background:var(--line); margin:16px 0;}
.mb-dash .streak-block {padding-bottom:4px;}
.mb-dash .streak-head {display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.mb-dash .streak-chip {display:inline-flex; align-items:center; gap:5px;
background:var(--pink-soft); color:#B8286E;
font-size:12px; font-weight:800;
padding:4px 10px; border-radius:8px;}
.mb-dash .week-tracker {display:flex; gap:6px; justify-content:space-between;}
.mb-dash .week-day {display:flex; flex-direction:column; align-items:center; gap:5px; flex:1;}
.mb-dash .week-day span {font-size:10px; font-weight:700; color:var(--ink-soft);}
.mb-dash .week-dot {width:22px; height:22px; border-radius:8px;
background:var(--blue-soft);
display:flex; align-items:center; justify-content:center;}
.mb-dash .week-day.done .week-dot {background:linear-gradient(135deg, var(--blue-main), var(--blue-deep)); box-shadow:0 3px 8px -2px rgba(52,88,250,0.5);}
.mb-dash .week-day.done .week-dot svg {width:11px; height:11px; stroke:#fff;}
.mb-dash .week-day.today .week-dot {outline:2px solid var(--blue-main); outline-offset:2px;}
.mb-dash .streak-note {font-size:12px; color:var(--ink-soft); margin:12px 0 0;}
.mb-dash .side-nav {display:flex; flex-direction:column; gap:2px;}
.mb-dash .nav-item {display:flex; align-items:center; gap:11px;
border:none; background:transparent; cursor:pointer;
padding:10px 12px; border-radius:8px;
font-size:14px; font-weight:700; color:var(--ink-soft);
text-align:left; width:100%;
transition:background .15s ease, color .15s ease;}
.mb-dash .nav-item svg {width:17px; height:17px; flex:none;}
.mb-dash .nav-item:hover {background:var(--blue-mist); color:var(--ink);}
.mb-dash .nav-item.active {background:var(--blue-soft); color:var(--blue-deep);}
.mb-dash .nav-item .nav-count {margin-left:auto; font-size:11.5px; font-weight:800;
background:var(--white); color:var(--ink-soft);
padding:2px 7px; border-radius:8px;}
.mb-dash .nav-item.active .nav-count {background:var(--white); color:var(--blue-deep);}
.mb-dash .signout-btn {width:100%;
display:flex; align-items:center; justify-content:center; gap:8px;
background:var(--white);
border:1.5px solid var(--line);
color:var(--ink);
font-weight:700; font-size:13.5px;
padding:11px 16px; border-radius:8px;
cursor:pointer;
transition:border-color .15s ease, background .15s ease, color .15s ease;}
.mb-dash .signout-btn:hover {border-color:var(--error); color:var(--error); background:#FEF4F4;}
.mb-dash .signout-btn svg {width:14px; height:14px;}
.mb-dash .tab-panel {display:none;}
.mb-dash .tab-panel.active {display:block; animation:mbdash-fadeIn .2s ease;}
@keyframes mbdash-fadeIn {from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}
.mb-dash .card {background:var(--white);
border:1px solid var(--line);
border-radius:8px;
padding:24px;
box-shadow:var(--shadow-soft);}
.mb-dash .card + .card {margin-top:20px;}
.mb-dash .section-head {display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
.mb-dash .section-head h2 {font-weight:800; font-size:17px; color:var(--ink);}
.mb-dash .section-head a {font-size:13.5px; font-weight:700;}
.mb-dash .section-note {font-size:13px; color:var(--ink-soft); margin:-10px 0 18px;}
.mb-dash .resume-card {position:relative;
overflow:hidden;
background:linear-gradient(120deg, #4A67FF 0%, var(--blue-main) 50%, var(--blue-deep) 100%);
border-radius:8px;
padding:26px 26px 24px;
color:#fff;
margin-bottom:20px;
box-shadow:0 20px 40px -20px rgba(34,48,138,0.55);}
.mb-dash .resume-rings {position:absolute; right:-40px; top:-40px; width:220px; height:220px; z-index:0; opacity:.7;}
.mb-dash .resume-inner {position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.mb-dash .resume-copy {max-width:420px;}
.mb-dash .resume-eyebrow {display:inline-flex; align-items:center; gap:6px;
font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
color:#DCE3FF; margin-bottom:8px;}
.mb-dash .resume-title {font-family:"PT Serif",serif; font-size:22px; line-height:1.25; margin:0 0 6px; color:#fff;}
.mb-dash .resume-sub {font-size:13.5px; color:#DCE3FF; margin:0 0 16px;}
.mb-dash .resume-progress {display:flex; align-items:center; gap:10px; max-width:280px;}
.mb-dash .resume-track {flex:1; height:6px; border-radius:8px; background:rgba(255,255,255,0.25); overflow:hidden;}
.mb-dash .resume-fill {height:100%; background:#fff; border-radius:8px;}
.mb-dash .resume-progress span {font-size:12px; font-weight:700; color:#EAEDFB; white-space:nowrap;}
.mb-dash .resume-actions {display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
.mb-dash .resume-btn {background:#fff; color:var(--blue-deep);
font-weight:800; font-size:14px;
padding:12px 22px; border:none; border-radius:8px;
cursor:pointer; white-space:nowrap;
display:inline-flex; align-items:center; gap:8px;
transition:transform .15s ease, filter .15s ease;}
.mb-dash .resume-btn:hover {transform:translateY(-1px); filter:brightness(1.03);}
.mb-dash .resume-btn svg {width:15px; height:15px;}
.mb-dash .resume-meta {font-size:12px; color:#DCE3FF;}
.mb-dash .stat-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.mb-dash .stat-box {background:var(--blue-mist);
border-radius:8px;
padding:20px 20px 18px;
display:flex; align-items:flex-start; gap:14px;
transition:transform .15s ease, box-shadow .15s ease;}
.mb-dash .stat-box:hover {transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(19,27,46,0.18);}
.mb-dash .stat-box .stat-icon {width:36px; height:36px; border-radius:8px;
background:var(--white);
display:flex; align-items:center; justify-content:center;
flex:none; color:var(--blue-main);}
.mb-dash .stat-box .stat-icon svg {width:18px; height:18px;}
.mb-dash .stat-box .stat-value {font-weight:800; font-size:24px; color:var(--ink); line-height:1.1; margin:0 0 2px;}
.mb-dash .stat-box .stat-label {font-size:13px; color:var(--ink-soft); margin:0;}
.mb-dash .activity-row {display:flex; align-items:flex-start; gap:14px; padding:13px 0; border-top:1px solid var(--line);}
.mb-dash .activity-row:first-of-type {border-top:none; padding-top:0;}
.mb-dash .activity-icon {width:30px; height:30px; border-radius:50%; flex:none;
display:flex; align-items:center; justify-content:center;
background:var(--blue-soft); color:var(--blue-deep);}
.mb-dash .activity-icon svg {width:14px; height:14px;}
.mb-dash .activity-icon.pink {background:var(--pink-soft); color:#B8286E;}
.mb-dash .activity-row p {margin:0; font-size:14.5px;}
.mb-dash .activity-row .activity-time {color:var(--ink-soft); font-size:12.5px; margin-top:2px;}
.mb-dash .activity-row .activity-link {color:var(--blue-main); font-weight:700; text-decoration:underline;}
.mb-dash .activity-row .activity-link:hover {text-decoration:none;}
.mb-dash .rec-grid {display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.mb-dash .rec-card {border:1px solid var(--line); border-radius:8px;
overflow:hidden;
display:flex; flex-direction:column;
cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.mb-dash .rec-card:hover {transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(19,27,46,0.22); border-color:var(--blue-main);}
.mb-dash .rec-card:hover .item-title {color:var(--blue-main); text-decoration:underline;}
.mb-dash .rec-card:hover .rec-cta svg {transform:translateX(3px);}
.mb-dash .rec-media {position:relative; width:100%; height:132px; flex:none; background:var(--blue-soft);}
.mb-dash .rec-media img {width:100%; height:100%; object-fit:cover; display:block;}
.mb-dash .rec-media .item-tag {position:absolute; top:10px; left:10px; margin:0; background:rgba(255,255,255,.95); backdrop-filter:blur(2px);}
.mb-dash .rec-body {padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1;}
.mb-dash .rec-top {display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.mb-dash .rec-card .item-title {font-size:14.5px; white-space:normal; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; transition:color .15s ease;}
.mb-dash .rec-save {flex:none; width:30px; height:30px; border-radius:8px;
border:1.5px solid var(--line); background:var(--white); color:var(--ink-soft);
display:flex; align-items:center; justify-content:center; cursor:pointer;
transition:border-color .15s ease, color .15s ease, background .15s ease;}
.mb-dash .rec-save svg {width:14px; height:14px;}
.mb-dash .rec-save:hover {border-color:var(--blue-main); color:var(--blue-main); background:var(--blue-mist);}
.mb-dash .rec-save.saved {background:var(--blue-main); border-color:var(--blue-main); color:#fff;}
.mb-dash .rec-meta {display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto;}
.mb-dash .rec-cta {display:inline-flex; align-items:center; gap:5px;
font-size:12.5px; font-weight:800; color:var(--blue-main);}
.mb-dash .rec-cta svg {width:13px; height:13px; transition:transform .15s ease;}
.mb-dash .filter-row {display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
.mb-dash .chip {border:1.5px solid var(--line); background:var(--white); color:var(--ink-soft);
font-size:13px; font-weight:700; padding:7px 14px; border-radius:8px; cursor:pointer;
transition:border-color .15s ease, background .15s ease, color .15s ease;}
.mb-dash .chip:hover {border-color:var(--blue-main); color:var(--blue-main);}
.mb-dash .chip.active {background:var(--blue-deep); border-color:var(--blue-deep); color:#fff;}
.mb-dash .item-list {display:flex; flex-direction:column; gap:14px;}
.mb-dash .item-row {display:flex; align-items:center; gap:16px; padding:16px;
background:var(--blue-mist); border-radius:8px;
transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;}
.mb-dash .item-row:hover {transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(19,27,46,0.18); border-color:var(--blue-main);}
.mb-dash .item-row {border:1px solid transparent;}
.mb-dash .item-row.removing {opacity:0; transform:scale(.97);}
.mb-dash .item-link {display:flex; align-items:center; gap:16px; flex:1; min-width:0; cursor:pointer;}
.mb-dash .item-link:hover {text-decoration:none;}
.mb-dash .item-link:hover .item-title {color:var(--blue-main); text-decoration:underline;}
.mb-dash .item-thumb {width:64px; height:64px; border-radius:8px; flex:none;
display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:800; font-size:13px;
overflow:hidden; position:relative;}
.mb-dash .item-thumb img {width:100%; height:100%; object-fit:cover; display:block;}
.mb-dash .item-body {flex:1; min-width:0;}
.mb-dash .item-body .item-title {transition:color .15s ease;}
.mb-dash .item-chevron {flex:none; width:30px; height:30px; border-radius:8px;
display:flex; align-items:center; justify-content:center;
color:var(--ink-soft); transition:transform .15s ease, color .15s ease;}
.mb-dash .item-chevron svg {width:16px; height:16px;}
.mb-dash .item-row:hover .item-chevron {color:var(--blue-main); transform:translateX(3px);}
.mb-dash .item-tag {display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
color:var(--blue-main); background:var(--blue-soft);
padding:3px 9px; border-radius:8px; margin-bottom:6px;}
.mb-dash .item-tag.tag-pink {color:#B8286E; background:var(--pink-soft);}
.mb-dash .item-tag.tag-deep {color:var(--blue-deep); background:#E3E7FA;}
.mb-dash .item-tag.tag-gold {color:var(--gold-main); background:var(--gold-soft);}
.mb-dash .item-title {font-weight:700; font-size:15px; color:var(--ink); margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mb-dash .item-sub {font-size:13px; color:var(--ink-soft); margin:0;}
.mb-dash .progress-track {height:5px; background:var(--white); border-radius:8px; margin-top:8px; overflow:hidden; max-width:200px;}
.mb-dash .progress-fill {height:100%; background:var(--blue-main); border-radius:8px;}
.mb-dash .item-actions {display:flex; align-items:center; gap:6px; flex:none;}
.mb-dash .item-resume {background:var(--white); border:1.5px solid var(--line); color:var(--blue-deep);
font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:8px; cursor:pointer;
white-space:nowrap;}
.mb-dash .item-resume:hover {border-color:var(--blue-main); background:var(--blue-soft);}
.mb-dash .item-remove {display:inline-flex; align-items:center; gap:6px;
background:var(--white); border:1.5px solid var(--line); color:var(--ink-soft);
font-size:12.5px; font-weight:700;
cursor:pointer; padding:8px 13px; border-radius:8px; flex:none; white-space:nowrap;
transition:border-color .15s ease, background .15s ease, color .15s ease;}
.mb-dash .item-remove svg {width:13px; height:13px; flex:none;}
.mb-dash .item-remove:hover {border-color:#F6D3D3; background:#FEF4F4; color:var(--error);}
.mb-dash .empty-state {display:flex; flex-direction:column; align-items:center; text-align:center;
padding:44px 20px; color:var(--ink-soft);}
.mb-dash .empty-state .empty-icon {width:48px; height:48px; border-radius:50%;
background:var(--blue-mist); color:var(--blue-main);
display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.mb-dash .empty-state .empty-icon svg {width:22px; height:22px;}
.mb-dash .empty-state p {margin:0 0 4px;}
.mb-dash .empty-state .empty-title {font-weight:800; color:var(--ink); font-size:15px;}
.mb-dash .empty-state .empty-sub {font-size:13.5px;}
.mb-dash .empty-state a {font-size:13.5px; font-weight:700; margin-top:10px;}
.mb-dash .settings-avatar-row {display:flex; align-items:center; gap:16px; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line);}
.mb-dash .settings-avatar {width:56px; height:56px; border-radius:50%;
background:linear-gradient(135deg, var(--blue-main), var(--blue-deep));
background-size:cover; background-position:center;
color:#fff; display:flex; align-items:center; justify-content:center;
font-weight:800; font-size:20px; flex:none;
box-shadow:0 0 0 3px var(--white), 0 0 0 4.5px var(--pink-main);}
.mb-dash .settings-avatar-actions {display:flex; gap:8px;}
.mb-dash .form-grid {display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:520px;}
.mb-dash .form-grid .form-field.full {grid-column:1 / -1;}
.mb-dash .form-field {display:flex; flex-direction:column; gap:7px;}
.mb-dash .form-field label {font-size:13.5px; font-weight:700; color:var(--heading-color);}
.mb-dash .form-field input {font-family:"Public Sans",sans-serif; font-size:14.5px;
padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--radius);
color:var(--ink); background:var(--blue-mist);
transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;}
.mb-dash .form-field input:focus {outline:none; border-color:var(--blue-main); background:var(--white);
box-shadow:0 0 0 4px rgba(52,88,250,0.12);}
.mb-dash .field-hint {font-size:12px; color:var(--ink-soft);}
.mb-dash .save-btn {align-self:flex-start; background:var(--blue-main); color:#fff;
font-weight:700; font-size:14.5px; padding:12px 24px;
border:none; border-radius:var(--radius); cursor:pointer;
box-shadow:0 10px 24px -10px rgba(52,88,250,0.45);
transition:filter .15s ease, transform .15s ease;
display:inline-flex; align-items:center; gap:8px;
margin-top:4px;}
.mb-dash .save-btn:hover {filter:brightness(1.08); transform:translateY(-1px);}
.mb-dash .save-btn .spinner {width:14px; height:14px; border-radius:50%;
border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
animation:mbdash-spin .7s linear infinite; display:none;}
.mb-dash .save-btn.loading .spinner {display:inline-block;}
@keyframes mbdash-spin {to{transform:rotate(360deg);}}
.mb-dash .oauth-list {display:flex; flex-direction:column; gap:10px; max-width:440px;}
.mb-dash .oauth-item {display:flex; align-items:center; gap:12px;
border:1.5px solid var(--line); border-radius:var(--radius); padding:12px 14px;}
.mb-dash .oauth-title-row {display:flex; align-items:center; gap:9px;}
.mb-dash .oauth-title-row svg {width:19px; height:19px; flex:none; display:block;}
.mb-dash .oauth-item-meta {flex:1; min-width:0;}
.mb-dash .oauth-item .oauth-name {font-weight:700; font-size:14px; line-height:1;}
.mb-dash .oauth-item .oauth-status {font-size:12.5px; color:var(--ink-soft); margin-top:5px;}
.mb-dash .oauth-item .oauth-btn-sm {align-self:center; flex:none;
background:none; border:1.5px solid var(--line); color:var(--blue-main);
font-weight:700; font-size:12.5px; padding:7px 13px; border-radius:8px; cursor:pointer;}
.mb-dash .oauth-item.connected .oauth-btn-sm {color:var(--error); border-color:#F6D3D3;}
.mb-dash .oauth-item.connected .oauth-btn-sm:hover {background:#FEF4F4;}
.mb-dash .oauth-item .oauth-btn-sm:hover {background:var(--blue-mist);}
.mb-dash .toggle-list {display:flex; flex-direction:column; gap:4px; max-width:520px;}
.mb-dash .toggle-row {display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:14px 0; border-top:1px solid var(--line);}
.mb-dash .toggle-copy {min-width:0;}
.mb-dash .toggle-row:first-child {border-top:none; padding-top:0;}
.mb-dash .toggle-copy p {margin:0;}
.mb-dash .toggle-copy .toggle-title {font-weight:700; font-size:14px; color:var(--ink);}
.mb-dash .toggle-copy .toggle-sub {font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.mb-dash .switch {position:relative; width:42px; height:24px; flex:none;}
.mb-dash .switch input {opacity:0; width:0; height:0; position:absolute;}
.mb-dash .switch-track {position:absolute; inset:0; background:var(--line); border-radius:8px; cursor:pointer;
transition:background .15s ease;}
.mb-dash .switch-track::before {content:""; position:absolute; width:18px; height:18px; left:3px; top:3px;
background:#fff; border-radius:50%; transition:transform .15s ease;
box-shadow:0 1px 3px rgba(19,27,46,0.25);}
.mb-dash .switch input:checked + .switch-track {background:var(--blue-main);}
.mb-dash .switch input:checked + .switch-track::before {transform:translateX(18px);}
.mb-dash .switch input:focus-visible + .switch-track {outline:2.5px solid var(--blue-main); outline-offset:2px;}
.mb-dash .danger-row {display:flex; align-items:center; justify-content:space-between; gap:16px;
padding-top:20px; margin-top:20px; border-top:1px solid var(--line);}
.mb-dash .danger-row p {margin:0; font-size:13.5px; color:var(--ink-soft); max-width:320px;}
.mb-dash .danger-btn {background:#FEF4F4; color:var(--error); border:1.5px solid #F6D3D3;
font-weight:700; font-size:13.5px; padding:10px 18px; border-radius:var(--radius);
cursor:pointer; white-space:nowrap;}
.mb-dash .danger-btn:hover {background:#FCE7E7;}
.mb-dash .toast {position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px);
background:var(--ink); color:#fff; font-size:13.5px; font-weight:600;
padding:12px 20px; border-radius:8px; display:flex; align-items:center; gap:8px;
opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
box-shadow:0 12px 28px -8px rgba(19,27,46,0.45); z-index:50;}
.mb-dash .toast.show {opacity:1; transform:translate(-50%, 0); pointer-events:auto;}
.mb-dash .toast svg {width:15px; height:15px; color:#6BE38A; flex:none;}
@media (max-width:900px) {
.mb-dash .dashboard {grid-template-columns:1fr;}
.mb-dash .sidebar {position:static;}
.mb-dash .avatar-block {flex-direction:row; text-align:left; padding-bottom:16px; gap:14px;}
.mb-dash .avatar-meta {flex:1; min-width:0; align-items:flex-start;}
.mb-dash .avatar-block .username, .mb-dash .avatar-block .member-since, .mb-dash .tier-row {text-align:left;}
.mb-dash .tier-row {flex-wrap:wrap;}
.mb-dash .side-nav {flex-direction:column; gap:2px;}
.mb-dash .nav-item {white-space:normal;}
.mb-dash .signout-btn {margin-top:14px;}
.mb-dash .item-row {flex-wrap:wrap;}
.mb-dash .item-actions {margin-left:auto;}
.mb-dash .item-title {white-space:normal; overflow:visible; text-overflow:clip;}
}
@media (max-width:640px) {
.mb-dash .page-shell {padding:20px 18px 56px;}
.mb-dash .card {padding:18px;}
.mb-dash .stat-grid {grid-template-columns:1fr; gap:10px;}
.mb-dash .stat-box {align-items:center; gap:14px;
padding:14px 16px;}
.mb-dash .stat-box .stat-icon {width:34px; height:34px;}
.mb-dash .stat-box .stat-icon svg {width:16px; height:16px;}
.mb-dash .stat-box > div:last-child {flex:1; min-width:0;
display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.mb-dash .stat-box .stat-value {order:2; font-size:20px; margin:0;}
.mb-dash .stat-box .stat-label {order:1; margin:0;}
.mb-dash .rec-grid {grid-template-columns:1fr;}
.mb-dash .form-grid {grid-template-columns:1fr;}
.mb-dash .resume-inner {flex-direction:column; align-items:flex-start;}
.mb-dash .resume-actions {align-items:flex-start; width:100%;}
.mb-dash .resume-btn {width:100%; justify-content:center;}
.mb-dash .danger-row {flex-direction:column; align-items:flex-start;}
.mb-dash .settings-avatar-row {flex-wrap:wrap;}
.mb-dash .filter-row {gap:7px;}
.mb-dash .chip {font-size:12.5px; padding:7px 12px;}
.mb-dash .item-row {row-gap:12px;}
.mb-dash .item-link {flex:1 1 100%;}
.mb-dash .item-actions {margin-left:auto; order:2; gap:8px;}
.mb-dash .item-chevron {display:none;}
.mb-dash .progress-track {max-width:none;}
}
@media (max-width:400px) {
.mb-dash .item-row {padding:14px; gap:12px;}
.mb-dash .item-thumb {width:44px; height:44px; font-size:11.5px;}
}
/* The dashboard's own header.
-------------------------
These .topbar rules were dropped when the page was scoped: the script that
did it was written for the All Tools page, where .topbar is the site's own
strip and had no business being carried over. Here .topbar is the dashboard's
heading block, and losing it left the page with no header styling at all. */
.mb-dash .topbar {background:linear-gradient(180deg, #E3E9FE 0%, var(--blue-mist) 100%);
border-bottom:1px solid var(--line);}
.mb-dash .topbar-inner {max-width:1120px; margin:0 auto;
padding:40px 24px 28px;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;}
/* The plugin's notices, inside the dashboard. The design has no rule for them
because it never had a plugin behind it. */
.mb-dash .ma-notice {
margin: 0 0 18px;
padding: 12px 15px;
border: 1px solid var(--line, #E3E9F5);
border-radius: 12px;
background: #fff;
font-size: 13.5px;
line-height: 1.5;
}
.mb-dash .ma-notice--error {
border-color: #F5C2C7;
background: #FDF2F3;
color: #A3242C;
}
.mb-dash .ma-notice--success {
border-color: #A7E3CB;
background: #EAFBF4;
color: #0B6B4F;
}
/* Dashboard pieces the design did not have a rule for: the activity list is
built from real timestamps rather than the mocked-up feed, the saved articles
use the site's own article card, and the avatar form is the plugin's upload
rather than a decorative button. */
.mb-dash .activity-list {
display: flex;
flex-direction: column;
}
/* Scoped past the design's own .mb-dash .activity-row, which sets a top border
and flex-start. Two classes there, three here, so this wins on weight rather
than on which rule happens to come last. */
.mb-dash .activity-list .activity-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 13px 0;
border-bottom: 1px solid var(--line, #E3E9F5);
}
.mb-dash .activity-list .activity-row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.mb-dash .activity-body {
min-width: 0;
}
.mb-dash .activity-kind {
display: block;
margin-bottom: 2px;
font-size: 12px;
color: var(--ink-soft, #5B6478);
}
.mb-dash .activity-link {
font-weight: 650;
font-size: 14.5px;
color: var(--ink, #131B2E);
text-decoration: none;
}
.mb-dash a.activity-link:hover {
color: var(--blue-deep, #22308A);
text-decoration: underline;
}
.mb-dash .activity-time {
flex: 0 0 auto;
font-size: 12px;
color: var(--ink-faint, #8891A6);
white-space: nowrap;
}
/* The saved articles use the site's own card, so the grid is the site's too —
just held to two columns inside the narrower dashboard column. */
.mb-dash .saved-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.mb-dash .avatar-form {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid var(--line, #E3E9F5);
}
.mb-dash .avatar-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.mb-dash .avatar-actions input[type="file"] {
max-width: 210px;
font-size: 12.5px;
}
/* Saved plans is switched off. The link stays, plainly unavailable rather than
quietly missing. */
.mb-dash .nav-item.is-off {
opacity: .45;
cursor: not-allowed;
}
.mb-dash .nav-item.is-off:hover {
background: none;
}
@media (max-width: 560px) {
.mb-dash .saved-grid {
grid-template-columns: minmax(0, 1fr);
}
.mb-dash .activity-row {
flex-direction: column;
gap: 3px;
}
}
/* Each saved article is the site's own card with the plugin's save button under
it, so it can be removed from here rather than only from the article. */
.mb-dash .saved-item {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.mb-dash .saved-item .card {
flex: 1 1 auto;
}
.mb-dash .saved-item__actions {
display: flex;
}
.mb-dash .saved-item__actions .mnb-wishlist-btn,
.mb-dash .saved-item__actions button {
width: 100%;
justify-content: center;
}
/* ---------------------------------------------------------------------------
Article tables.
Any table an editor puts in the content gets this — the imported articles
included, which is most of them. No block, no shortcode, no class to
remember.
The scrolling belongs to the wrapper, not the table. Making the table itself
display:block, which is the usual shortcut, stops its cells behaving like
table cells: width:100% stops working and the columns no longer line up.
--------------------------------------------------------------------------- */
.entry-content .mb-table {
margin: 0 0 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
box-shadow: var(--sh-card);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.entry-content .mb-table table {
width: 100%;
margin: 0;
border-collapse: separate;
border-spacing: 0;
font-family: var(--display);
font-size: 14px;
line-height: 1.55;
}
.entry-content .mb-table th,
.entry-content .mb-table td {
padding: 14px 18px;
text-align: left;
vertical-align: top;
border: 0;
border-bottom: 1px solid var(--line);
overflow-wrap: break-word;
}
.entry-content .mb-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--accent-soft);
color: #22308A;
font-weight: 700;
font-size: 13px;
white-space: nowrap;
}
.entry-content .mb-table tbody tr:nth-child(odd) {
background: var(--paper-2);
}
.entry-content .mb-table tbody tr:last-child td {
border-bottom: 0;
}
/* A hint that there is more to the right, fading out as it is scrolled. Pointer
events off so it never sits between a finger and a link. */
.entry-content .mb-table {
background-image:
linear-gradient(90deg, var(--paper) 30%, rgba(255, 255, 255, 0)),
linear-gradient(90deg, rgba(255, 255, 255, 0), var(--paper) 70%),
linear-gradient(90deg, rgba(19, 27, 46, .08), rgba(19, 27, 46, 0)),
linear-gradient(90deg, rgba(19, 27, 46, 0), rgba(19, 27, 46, .08));
background-position: 0 0, 100% 0, 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
@media (prefers-reduced-motion: reduce) {
.entry-content .mb-table {
scroll-behavior: auto;
}
}
/* ---- phones ----
Two treatments, chosen by the script from the table's own shape and marked on
the wrapper. The table stays in the page either way; on a comparison table it
is simply hidden in favour of the picker.
--------------------------------------------------------------------------- */
/* The picker is built for every comparison table but only shown on a phone. */
.entry-content .mb-table__pick {
display: none;
}
/* scroll mode: pin the first column, so the row's own name stays put while the
rest slides under it. */
.entry-content .mb-table[data-mode="scroll"] th:first-child,
.entry-content .mb-table[data-mode="scroll"] td:first-child {
position: sticky;
left: 0;
z-index: 2;
background: var(--paper);
border-right: 1px solid var(--line-strong);
font-weight: 700;
}
.entry-content .mb-table[data-mode="scroll"] thead th:first-child {
z-index: 3;
background: var(--accent-soft);
}
.entry-content .mb-table[data-mode="scroll"] tbody tr:nth-child(odd) td:first-child {
background: var(--paper-2);
}
@media (max-width: 640px) {
.entry-content .mb-table[data-mode="pick"] {
overflow: visible;
background-image: none;
}
.entry-content .mb-table[data-mode="pick"] > table {
display: none;
}
.entry-content .mb-table__pick {
display: block;
padding: 12px;
}
.entry-content .mb-table__tabs {
display: flex;
gap: 6px;
overflow-x: auto;
margin-bottom: 11px;
padding-bottom: 2px;
scrollbar-width: none;
}
.entry-content .mb-table__tabs::-webkit-scrollbar {
display: none;
}
.entry-content .mb-table__tab {
flex: 0 0 auto;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--paper);
font-family: var(--display);
font-size: 12.5px;
font-weight: 700;
color: var(--muted);
white-space: nowrap;
cursor: pointer;
}
.entry-content .mb-table__tab.is-on {
border-color: transparent;
background: var(--accent);
color: #fff;
}
.entry-content .mb-table__spec {
margin: 0;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.entry-content .mb-table__pair {
display: grid;
grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
gap: 12px;
padding: 11px 13px;
border-bottom: 1px solid rgba(19, 27, 46, .06);
font-size: 12.5px;
}
.entry-content .mb-table__pair:nth-child(odd) {
background: var(--paper-2);
}
.entry-content .mb-table__pair:last-child {
border-bottom: 0;
}
.entry-content .mb-table__pair dt {
margin: 0;
font-family: var(--display);
font-size: 11px;
font-weight: 700;
line-height: 1.35;
color: #22308A;
}
.entry-content .mb-table__pair dd {
margin: 0;
color: var(--muted);
overflow-wrap: anywhere;
}
.entry-content .mb-table__pair dd img.emoji,
.entry-content .mb-table__pair dt img.emoji {
width: 1em;
height: 1em;
vertical-align: -.12em;
}
/* scroll mode on a phone: tighter, and the pinned column narrower so more
of the data is visible beside it. */
.entry-content .mb-table[data-mode="scroll"] th,
.entry-content .mb-table[data-mode="scroll"] td {
padding: 10px 12px;
font-size: 12.5px;
}
.entry-content .mb-table[data-mode="scroll"] td:first-child {
max-width: 128px;
}
}
/* ---------------------------------------------------------------------------
A tool's own page, at /tools/.
The calculator itself is the All Tools markup, so it is already styled under
.mb-tools. These are only the wrapper: the heading, the lede and the way
back.
--------------------------------------------------------------------------- */
.mb-tools .tool-head {
padding-block: clamp(28px, 4vw, 44px) clamp(14px, 2vw, 22px);
}
.mb-tools .tool-crumbs {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.mb-tools .tool-crumbs a {
color: var(--faint);
text-decoration: none;
}
.mb-tools .tool-crumbs a:hover {
color: var(--accent);
}
.mb-tools .tool-lede {
max-width: 62ch;
margin: 10px 0 0;
font-family: var(--body);
font-size: 1.02rem;
line-height: 1.6;
color: var(--muted);
}
.mb-tools .tool-body {
padding-bottom: clamp(36px, 5vw, 64px);
}
/* On its own page the section has no drawer around it, so the padding the
drawer used to supply has to come from here. */
.mb-tools .tool-body > section.tool {
display: block;
padding: 0;
border-top: 0;
}
.mb-tools .tool-notes {
max-width: 72ch;
margin-top: clamp(26px, 4vw, 40px);
padding-top: clamp(20px, 3vw, 28px);
border-top: 1px solid var(--line);
}
.mb-tools .tool-back {
margin-top: clamp(24px, 3vw, 34px);
font-size: 14px;
font-weight: 600;
}
.mb-tools .tool-back a {
color: var(--accent);
text-decoration: none;
}
.mb-tools .tool-back a:hover {
text-decoration: underline;
}
/* The hub card is a link now rather than a button, so it needs the reset a
button got for free. */
.mb-tools a.hub-card {
text-decoration: none;
}
/* ---------------------------------------------------------------------------
Sponsor credit and the independence strip, on a tool page.
The credit sits on the title row; the strip runs under it between two
hairlines. Both are above everything else on the page, which is where a
disclosure has to be — one a reader meets after they already have their
answer is one most of them never see.
--------------------------------------------------------------------------- */
.mb-tools .tool-title-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 20px;
}
.mb-tools .tool-title-row .h-sec {
margin: 0;
}
/* ---- the credit ---- */
.tool-credit {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 7px 14px;
border: 1px solid #254CFE;
border-radius: 8px;
background: #F0F3FF;
/* Nudged off the baseline the flex row sets, so the box reads as sitting
beside the title rather than sinking below it. */
position: relative;
top: -3px;
}
.tool-credit__label {
font-family: var(--body);
font-size: 15px;
color: var(--muted);
}
.tool-credit__brand {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* A 26px square rendered a wordmark five pixels tall — the shorter side of the
box decides the size, and most brand logos are far wider than they are high.
A wide, shallow box gives a wordmark its full width and still holds a square
badge at a readable size. */
.tool-credit__logo {
display: grid;
place-items: center;
width: auto;
max-width: 150px;
height: 40px;
flex: 0 0 auto;
}
.tool-credit__logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
/* contain, never cover — a cropped logo misrepresents the brand. */
object-fit: contain;
display: block;
}
.tool-credit__brand b {
font-family: var(--display);
font-weight: 800;
font-size: 17px;
letter-spacing: -.01em;
color: var(--ink);
}
/* A divider before the link, drawn rather than typed so it does not get read
out as a character. */
.tool-credit__more {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding-left: 20px;
font-family: var(--display);
font-size: 14.5px;
font-weight: 650;
color: #254CFE;
text-decoration: none;
}
.tool-credit__more::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 18px;
transform: translateY(-50%);
background: rgba(37, 76, 254, .28);
}
.tool-credit__more:hover {
text-decoration: underline;
}
.tool-credit__more svg {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
/* ---- the strip ---- */
.tool-trust {
display: flex;
align-items: center;
gap: 11px;
margin: 16px 0 0;
padding: 11px 0;
/* Dotted, so it reads as a note rather than as another band of content. */
border-top: 1px dashed var(--line-strong);
border-bottom: 1px dashed var(--line-strong);
}
.tool-trust__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 26px;
height: 26px;
color: var(--deep, #22308A);
}
.tool-trust__icon svg {
width: 22px;
height: 22px;
}
.tool-trust__text {
margin: 0;
font-family: var(--display);
font-size: 14.5px;
font-weight: 600;
line-height: 1.45;
color: var(--ink);
}
.tool-trust__more {
margin-left: 8px;
font-weight: 650;
color: var(--accent);
text-decoration: none;
white-space: nowrap;
}
.tool-trust__more:hover {
text-decoration: underline;
}
@media (max-width: 720px) {
.mb-tools .tool-title-row {
gap: 8px;
}
.tool-credit {
top: 0;
padding: 6px 11px;
gap: 8px;
}
.tool-credit__label,
.tool-credit__brand b {
font-size: 14px;
}
.tool-credit__logo {
max-width: 118px;
height: 32px;
}
.tool-trust {
align-items: flex-start;
}
.tool-trust__text {
font-size: 13.5px;
}
/* On its own line, since it wraps mid-sentence otherwise. */
.tool-trust__more {
display: block;
margin: 4px 0 0;
white-space: normal;
}
}
/* ---------------------------------------------------------------------------
The hanging "Sponsored by" tag on a tool card.
Used on the home page cards and on the All Tools cards, which are different
components — so everything here is prefixed sp-tag rather than hung off
either one's class.
The card it sits on is a link. The tag is not: an anchor inside an anchor is
invalid, and browsers close the outer one early, which breaks the card from
that point down.
--------------------------------------------------------------------------- */
/* Both card types set overflow:visible where they are declared, so the tag can
hang over the top edge. Their inner texture layers clip themselves. */
.mb-tools .hub-card::before,
.mbt-card::before {
overflow: hidden;
}
.sp-tag {
position: absolute;
top: -10px;
right: 16px;
z-index: 3;
display: block;
width: 124px;
pointer-events: none;
}
/* The cord: a loop rising out of the tag and over the card's edge. */
.sp-tag__cord {
position: absolute;
top: -12px;
left: 50%;
width: 16px;
height: 26px;
margin-left: -8px;
border: 2.5px solid rgba(255, 255, 255, .78);
border-bottom: 0;
border-radius: 9px 9px 0 0;
background: none;
}
.sp-tag__body {
position: relative;
display: block;
padding: 16px 10px 11px;
border-radius: 10px;
background: #fff;
box-shadow: 0 6px 16px -6px rgba(10, 14, 28, .45), 0 1px 2px rgba(10, 14, 28, .12);
text-align: center;
}
/* The eyelet the cord passes through. */
.sp-tag__hole {
position: absolute;
top: 7px;
left: 50%;
width: 9px;
height: 9px;
margin-left: -4.5px;
border-radius: 50%;
background: var(--paper-3, #E9EDFE);
box-shadow: inset 0 1px 2px rgba(10, 14, 28, .35);
}
.sp-tag__label {
display: block;
margin-bottom: 5px;
font-family: var(--body, Georgia, serif);
font-size: 9.5px;
line-height: 1.2;
color: var(--muted, #5B6478);
}
.sp-tag__brand {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 0;
}
/* The box is sized to the logo's own proportions, set as a class in PHP from
the stored image dimensions.
---------------------------------------------------------------------------
Fitting inside means the shorter side decides the size, so one box cannot
serve both a 5:1 wordmark and a portrait badge: wide and shallow renders the
tall one at a fifth of the space, tall and narrow squashes the wordmark.
Three boxes, and every shape lands between 21px and 54px tall. */
.sp-tag__logo {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 100%;
}
.sp-tag__logo.is-wide {
max-width: 104px;
height: 26px;
}
.sp-tag__logo.is-mid {
max-width: 96px;
height: 40px;
}
.sp-tag__logo.is-tall {
max-width: 58px;
height: 54px;
}
.sp-tag__logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
/* contain, never cover — at this size a crop would leave a fragment. */
object-fit: contain;
display: block;
}
.sp-tag__brand b {
font-family: var(--display, system-ui, sans-serif);
font-weight: 800;
font-size: 11.5px;
line-height: 1.15;
letter-spacing: -.01em;
color: var(--ink, #131B2E);
/* One line: a wrapped brand name makes the tags different heights and the
row stops reading as a set. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* The card leans away slightly on hover; the tag stays put, as though pinned. */
.mbt-card:hover .sp-tag,
.mb-tools .hub-card:hover .sp-tag {
transform: none;
}
@media (max-width: 640px) {
/* On a phone the cards are narrower and the tag has to give the title room,
so everything steps down by roughly a sixth. */
.sp-tag {
width: 104px;
right: 10px;
top: -8px;
}
.sp-tag__body {
padding: 13px 7px 8px;
}
.sp-tag__logo.is-wide {
max-width: 86px;
height: 22px;
}
.sp-tag__logo.is-mid {
max-width: 80px;
height: 32px;
}
.sp-tag__logo.is-tall {
max-width: 46px;
height: 42px;
}
.sp-tag__body {
padding: 14px 8px 9px;
}
.sp-tag__label {
font-size: 9px;
}
.sp-tag__brand b {
font-size: 10.5px;
}
}
/* The tag lands on the corner where both card types keep their unit chip —
"MG → ML" and the like. Two things in one place is worse than one, and the
sponsor credit is the one that has to be legible, so the chip stands down.
The unit is still on the tool's own page and in its description. */
.mbt-card.has-tag .mbt-readout,
.mb-tools .hub-card.has-tag .hub-readout {
display: none;
}
/* Room for the tag, so a long title cannot run under it. */
.mbt-card.has-tag .mbt-title,
.mb-tools .hub-card.has-tag .hub-title {
padding-right: 96px;
}
@media (max-width: 640px) {
.mbt-card.has-tag .mbt-title,
.mb-tools .hub-card.has-tag .hub-title {
padding-right: 84px;
}
}