/* =====================================================================
   DataDad metric guides (/metrics/*). Loads after ds.css, landing.css,
   and /site/products.css. One article layout: a short cobalt header
   with the definition and the formula, then the guide with a table of
   contents, a worked example, a calculator, and related metrics.
   ===================================================================== */

/* ---------- header ---------- */
.m-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;align-items:center;padding-block:28px 64px}
.m-crumbs{display:flex;gap:8px;font-size:13.5px;color:var(--hero-ink2);margin-bottom:18px}
.m-crumbs a{color:var(--hero-ink2);text-decoration:none}
.m-crumbs a:hover{color:var(--hero-ink);text-decoration:underline;text-underline-offset:3px}
.m-crumbs span[aria-hidden]{opacity:.6}
.m-hero h1{font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);letter-spacing:-.022em;font-size:clamp(38px,4.2vw,58px);line-height:1;text-wrap:balance;margin-bottom:20px}
.m-hero .lead{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--hero-ink2);max-width:52ch;text-wrap:pretty}
.m-hero .lead b{color:var(--hero-ink);font-weight:600}
.m-formula{background:var(--tile);color:var(--text);border-radius:18px;padding:22px 24px;box-shadow:var(--e-hero);display:grid;gap:12px}
.m-formula>span{font-size:12.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}
.m-eq{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(20px,2vw,26px);letter-spacing:-.015em;line-height:1.15}
.m-frac{display:inline-grid;text-align:center}
.m-frac>b{font-weight:inherit;padding:0 6px 6px;border-bottom:2px solid var(--text)}
.m-frac>b+b{border:0;padding:6px 6px 0}
.m-formula small{font-size:13.5px;color:var(--text2);line-height:1.5}
@media (max-width:900px){ .m-hero{grid-template-columns:minmax(0,1fr);padding-block:16px 44px} }

/* ---------- article layout ---------- */
.m-main{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;padding-block:64px 24px;align-items:start}
.m-toc{position:sticky;top:24px;display:grid;gap:2px;font-size:14px}
.m-toc b{font-size:12.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.m-toc a{color:var(--text2);text-decoration:none;padding:6px 10px;border-radius:8px;border-left:2px solid transparent}
.m-toc a:hover{color:var(--text);background:var(--tile)}
.m-art{max-width:740px;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.m-art>section{padding-top:8px;margin-bottom:48px;scroll-margin-top:20px}
.m-art h2{font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);letter-spacing:-.018em;font-size:clamp(26px,2.6vw,34px);line-height:1.08;margin-bottom:14px}
.m-art h3{font-size:17px;font-weight:650;margin:22px 0 6px}
.m-art p,.m-art li{font-size:16.5px;line-height:1.7;color:var(--text2)}
.m-art p+p{margin-top:12px}
.m-art strong{color:var(--text);font-weight:600}
.m-art ul,.m-art ol{padding-left:22px;display:grid;gap:6px;margin-top:10px}
.m-art a{color:var(--accent-ink);text-underline-offset:3px}
.m-art code{font-size:14px;background:var(--tile);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
@media (max-width:900px){ .m-main{grid-template-columns:minmax(0,1fr);gap:0;padding-top:40px} .m-toc{display:none} }

/* formula block inside the article */
.m-block{margin-top:16px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--tile);display:grid;gap:8px}
.m-block .m-eq{font-size:20px}
.m-block small{font-size:13.5px;color:var(--text2)}

/* worked example table; the wrapper scrolls it on narrow screens */
.m-table-wrap{margin-top:14px;overflow-x:auto;border-radius:14px}
.m-table{width:100%;border-collapse:collapse;font-size:15px;background:var(--tile);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.m-table th,.m-table td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line)}
.m-table thead th{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--tile2)}
.m-table td.num,.m-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.m-table tr:last-child>*{border-bottom:0}
.m-table tfoot th,.m-table tfoot td{font-weight:650;color:var(--text);background:var(--accent-wash)}

/* calculator */
.m-calc{margin-top:16px;border:1px solid var(--line);border-radius:18px;background:var(--tile);box-shadow:var(--e-tile);overflow:hidden}
.m-calc-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;padding:20px}
.m-calc label{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--text)}
.m-calc label small{font-weight:400;color:var(--muted)}
.m-calc input{font:inherit;font-size:16px;font-variant-numeric:tabular-nums;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--page);color:var(--text);width:100%}
.m-calc input:focus{outline:2px solid var(--focus);outline-offset:1px}
.m-calc-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:1px solid var(--line);background:var(--accent-wash)}
.m-calc-out>div{padding:16px 20px;display:grid;gap:2px}
.m-calc-out>div+div{border-left:1px solid var(--line)}
.m-calc-out dt{font-size:12.5px;color:var(--text2)}
.m-calc-out dd{font-family:var(--font-display);font-weight:var(--display-weight);font-size:28px;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.15}
.m-calc-note{padding:12px 20px 16px;font-size:13.5px;color:var(--text2);border-top:1px solid var(--line)}
@media (max-width:560px){ .m-calc-out>div+div{border-left:0;border-top:1px solid var(--line)} }

/* callout: how DataDad shows it (one per page) */
.m-dd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:18px 20px;border-radius:16px;background:#0f1533;color:#e8ecff}
.m-dd .pm-ico{width:34px;height:34px;border-radius:10px;background:var(--accent)}
.m-dd p{color:#c3cbef;font-size:15px;line-height:1.6;margin:0}
.m-dd b{color:#fff}
.m-dd a{color:#b8c3ff}

/* related metrics */
.m-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
.m-rel a{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--tile);text-decoration:none;color:var(--text)}
.m-rel a:hover{border-color:var(--line2);transform:translateY(-1px)}
.m-rel b{font-size:15.5px;font-weight:650}
.m-rel span{font-size:13.5px;color:var(--text2);line-height:1.45}

/* FAQ inside the article reuses .faq details styling */
.m-art .m-faq details{border-bottom:1px solid var(--line)}
.m-art .m-faq details:first-child{border-top:1px solid var(--line)}
.m-art .m-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:15px 2px;font-weight:600;font-size:16px;color:var(--text)}
.m-art .m-faq summary::-webkit-details-marker{display:none}
.m-art .m-faq summary::after{content:"";width:9px;height:9px;border-right:1.8px solid var(--text2);border-bottom:1.8px solid var(--text2);transform:rotate(45deg);transition:transform .2s;flex:none;margin:6px 4px 0 0}
.m-art .m-faq details[open] summary::after{transform:rotate(-135deg)}
.m-art .m-faq details p{padding:0 2px 16px}

/* hub */
.m-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-block:64px 24px}
.m-hub a{display:grid;gap:10px;align-content:start;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--tile);box-shadow:var(--e-tile);text-decoration:none;color:var(--text);transition:transform .2s,border-color .2s}
.m-hub a:hover{transform:translateY(-2px);border-color:var(--line2)}
.m-hub .abbr{font-family:var(--font-display);font-weight:var(--display-weight);font-size:30px;letter-spacing:-.02em;color:var(--accent-ink)}
.m-hub h2{font-size:18px;font-weight:650}
.m-hub p{color:var(--text2);font-size:14.5px;line-height:1.5}
.m-hub code{font-size:12.5px;color:var(--text2);background:var(--tile2);border:1px solid var(--line);border-radius:6px;padding:4px 8px;justify-self:start}
@media (max-width:960px){ .m-hub{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .m-hub{grid-template-columns:minmax(0,1fr)} }
.m-art section>*+p{margin-top:14px}
.m-eq sup{font-size:.55em;margin-left:2px}
.m-eq>span:not(.m-frac){display:inline}

.m-hub code{white-space:normal;overflow-wrap:anywhere;max-width:100%;line-height:1.5}.m-hub>a{min-width:0}