/*!
* ATG Strategy site polish — 2026-06-06
*
* Builds on mkdocs-material defaults. Applies the typography/layout/color choices
* convergent across best-in-class technical docs (Stripe, Vercel, Tailwind,
* Linear, Anthropic). See research synthesis in this session's handoff.
*
* Priorities in order:
* 1. Reading comfort first — generous spacing, ideal line length, restrained color
* 2. Strong typographic hierarchy via weight + spacing, not color
* 3. Restrained accent (links + active nav only)
* 4. Light, calm code blocks (GitHub-like) — not the heavy material defaults
* 5. Subtle admonitions (left-border + tint, no heavy title bar)
* 6. Table density without visual noise (no zebra stripes, no header fills)
*/
/* ─────────────────────────────────────────────────────────
* 1. COLOR TOKENS — light scheme
* ───────────────────────────────────────────────────────── */
[data-md-color-scheme="default"] {
--md-default-bg-color: #ffffff;
--md-default-bg-color--light: #fafafa;
--md-default-bg-color--lighter: #f6f8fa;
--md-default-bg-color--lightest: #f0f1f3;
/* 2026-06-07 Brandon: darkened muted text — "gray on white was hard to read".
* Old grays (#525252 / #737373) failed conversational readability even though they
* pass WCAG technically. New scale: secondary ~#262626 (well-readable), tertiary ~#3f3f46. */
--md-default-fg-color: #0a0a0a; /* primary text — near-black */
--md-default-fg-color--light: #262626; /* secondary text — was #525252 */
--md-default-fg-color--lighter: #3f3f46; /* tertiary / muted — was #737373 */
--md-default-fg-color--lightest: #c2c2c2; /* borders, dividers — was #d4d4d4 (kept similar) */
/* Neutral header — kill the loud color bar */
--md-primary-fg-color: #0a0a0a;
--md-primary-fg-color--light: #404040;
--md-primary-fg-color--dark: #000000;
--md-primary-bg-color: #ffffff;
--md-primary-bg-color--light: rgba(255,255,255,.7);
/* Accent — used ONLY for links + active nav + focus */
--md-accent-fg-color: #4f46e5; /* indigo-600 — calmer than royal blue */
--md-accent-fg-color--transparent: rgba(79,70,229,.08);
--md-accent-bg-color: #ffffff;
--md-typeset-a-color: #4f46e5;
/* Code blocks — github-light feel */
--md-code-bg-color: #f6f8fa;
--md-code-fg-color: #1f2328;
--md-code-hl-color: rgba(255, 235, 59, .35);
--md-code-hl-number-color: #0550ae;
--md-code-hl-special-color: #cf222e;
--md-code-hl-function-color: #8250df;
--md-code-hl-constant-color: #0550ae;
--md-code-hl-keyword-color: #cf222e;
--md-code-hl-string-color: #0a3069;
--md-code-hl-name-color: #1f2328;
--md-code-hl-operator-color: #cf222e;
--md-code-hl-punctuation-color: #24292f;
--md-code-hl-comment-color: #6e7781;
/* Admonitions — tint + 3px left border, no heavy bar */
--md-admonition-bg-color: #f6f8fa;
--md-admonition-fg-color: #1f2328;
/* Tables */
--md-typeset-table-color: rgba(0,0,0,.07);
--md-typeset-table-color--light: rgba(0,0,0,.035);
}
/* Dark scheme — clean dark, not the Material navy */
[data-md-color-scheme="slate"] {
--md-default-bg-color: #0a0a0a;
--md-default-bg-color--light: #111111;
--md-default-bg-color--lighter: #1a1a1a;
--md-default-bg-color--lightest: #262626;
--md-default-fg-color: #fafafa;
--md-default-fg-color--light: #a3a3a3;
--md-default-fg-color--lighter: #737373;
--md-default-fg-color--lightest: #404040;
--md-primary-fg-color: #0a0a0a;
--md-primary-bg-color: #fafafa;
--md-accent-fg-color: #818cf8;
--md-typeset-a-color: #818cf8;
--md-code-bg-color: #1a1a1a;
--md-code-fg-color: #e6e6e6;
--md-code-hl-keyword-color: #ff7b72;
--md-code-hl-string-color: #a5d6ff;
--md-code-hl-comment-color: #8b949e;
--md-code-hl-number-color: #79c0ff;
--md-code-hl-function-color: #d2a8ff;
--md-admonition-bg-color: #1a1a1a;
}
/* ─────────────────────────────────────────────────────────
* 2. TYPOGRAPHY (v3 — 2026-06-06 — OkiDoki-density retune)
*
* Reference: okidoki.dev/documentation-generator-comparison — DaisyUI/Tailwind
* compact technical-docs aesthetic. Body ~14-15px, h1 ~26-30px, tight 1.5/1.25
* line-heights. Density from small type + air, not big type + padding.
*
* Math note: Material's html { font-size: 125% } makes 1rem = 20px (not 16).
* All target px below resolve at 20px root.
* ───────────────────────────────────────────────────────── */
/* Body — 15px, OkiDoki compact range */
.md-typeset {
font-size: 0.75rem; /* 15px @ 20px root */
line-height: 1.5; /* tightened from 1.65 */
letter-spacing: -0.002em;
}
/* Headings — OkiDoki-tight scale. Fluid via clamp() so tablet ↔ 65" TV stay coherent.
* Targets at 20px root: h1 27-31px, h2 22-24px, h3 19-21px. */
.md-typeset h1 {
font-size: clamp(1.35rem, 1.25rem + 0.3vw, 1.55rem); /* 27-31px */
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.018em;
margin: 0 0 1rem;
color: var(--md-default-fg-color);
}
.md-typeset h2 {
font-size: clamp(1.1rem, 1.05rem + 0.2vw, 1.2rem); /* 22-24px */
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.012em;
margin: 2rem 0 0.5rem;
padding-top: 1rem;
border-top: 1px solid var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color);
}
.md-typeset h2:first-of-type { border-top: none; padding-top: 0; margin-top: 1.25rem; }
.md-typeset h3 {
font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem); /* 19-21px */
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.006em;
margin: 1.4rem 0 0.4rem;
}
.md-typeset h4 {
font-size: 0.85rem; /* ~17px */
font-weight: 700;
line-height: 1.3;
margin: 1.1rem 0 0.35rem;
color: var(--md-default-fg-color);
}
.md-typeset h5, .md-typeset h6 {
font-size: 0.7rem; /* ~14px eyebrow */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--md-default-fg-color--light);
margin: 1.1rem 0 0.3rem;
}
/* Body paragraph */
.md-typeset p {
margin: 0 0 0.8rem; /* tightened from 1rem */
color: var(--md-default-fg-color);
}
/* Lead paragraph (first paragraph after H1) — slightly larger, secondary color */
.md-typeset h1 + p {
font-size: 1.05em;
color: var(--md-default-fg-color--light);
margin-bottom: 1.25rem;
}
/* Page-meta block — compact stacked definition list at the top of each page.
*
* - Owner
- MC-ATG · corrections via Brandon
* - Updated
- 2026-06-06
* - Status
- Authoritative
* - Scope
- ATG only
*
*/
.md-typeset dl.page-meta {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.2rem 1.4rem;
margin: 0 0 1.75rem;
padding: 0.7rem 0.95rem;
background: var(--md-default-bg-color--lighter);
border-left: 3px solid var(--md-accent-fg-color);
border-radius: 3px;
font-size: 0.78rem;
line-height: 1.4;
}
.md-typeset dl.page-meta dt {
display: inline-flex;
align-items: center;
gap: 0.4em;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--md-default-fg-color--light);
font-weight: 700;
font-size: 0.68rem;
align-self: center;
margin: 0;
}
/* Icon before each label — SVG mask inherits currentColor. Order assumes
* page-meta has Owner / Updated / Status / Scope in this sequence. */
.md-typeset dl.page-meta dt::before {
content: "";
width: 1em;
height: 1em;
background-color: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
flex-shrink: 0;
}
.md-typeset dl.page-meta dt:nth-of-type(1)::before {
/* account (Owner) */
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'/%3E%3C/svg%3E");
}
.md-typeset dl.page-meta dt:nth-of-type(2)::before {
/* calendar (Updated) */
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19,3H18V1H16V3H8V1H6V3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19,3H18V1H16V3H8V1H6V3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z'/%3E%3C/svg%3E");
}
.md-typeset dl.page-meta dt:nth-of-type(3)::before {
/* check-circle (Status) */
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z'/%3E%3C/svg%3E");
}
.md-typeset dl.page-meta dt:nth-of-type(4)::before {
/* target / crosshairs (Scope) */
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11,2V4.07C7.38,4.53 4.53,7.38 4.07,11H2V13H4.07C4.53,16.62 7.38,19.47 11,19.93V22H13V19.93C16.62,19.47 19.47,16.62 19.93,13H22V11H19.93C19.47,7.38 16.62,4.53 13,4.07V2H11M12,6.5A5.5,5.5 0 0,1 17.5,12A5.5,5.5 0 0,1 12,17.5A5.5,5.5 0 0,1 6.5,12A5.5,5.5 0 0,1 12,6.5M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11,2V4.07C7.38,4.53 4.53,7.38 4.07,11H2V13H4.07C4.53,16.62 7.38,19.47 11,19.93V22H13V19.93C16.62,19.47 19.47,16.62 19.93,13H22V11H19.93C19.47,7.38 16.62,4.53 13,4.07V2H11M12,6.5A5.5,5.5 0 0,1 17.5,12A5.5,5.5 0 0,1 12,17.5A5.5,5.5 0 0,1 6.5,12A5.5,5.5 0 0,1 12,6.5M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z'/%3E%3C/svg%3E");
}
.md-typeset dl.page-meta dd {
margin: 0;
color: var(--md-default-fg-color);
align-self: center;
font-weight: 500;
}
/* ─────────────────────────────────────────────────────────
* GRID CARDS (Material's .grid.cards with our compact treatment)
* Used on entities/index.md and similar overview pages.
* Markdown syntax:
*
* - :material-office-building:{ .lg .middle } __ATE__
* Holding company description.
* [:octicons-arrow-right-24: Details](ate.md)
*
* ───────────────────────────────────────────────────────── */
.md-typeset .grid.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: 0.7rem;
margin: 1.25rem 0;
}
.md-typeset .grid.cards > ul {
display: contents;
margin: 0;
padding: 0;
list-style: none;
}
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > :not(ul) {
list-style: none;
margin: 0;
padding: 0.9rem 1rem;
background: var(--md-default-bg-color);
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 6px;
transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
font-size: 0.85em;
line-height: 1.5;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > :not(ul):hover {
border-color: var(--md-accent-fg-color);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.md-typeset .grid.cards > ul > li > p,
.md-typeset .grid.cards > :not(ul) > p {
margin: 0 0 0.4rem;
}
.md-typeset .grid.cards > ul > li > p:last-child,
.md-typeset .grid.cards > :not(ul) > p:last-child {
margin-bottom: 0;
}
/* Icon inside cards — large, accent-colored */
.md-typeset .grid.cards .twemoji svg,
.md-typeset .grid.cards .twemoji.lg svg {
width: 1.5em;
height: 1.5em;
color: var(--md-accent-fg-color);
vertical-align: middle;
margin-bottom: 0.25rem;
}
/* Strong bold title inside cards */
.md-typeset .grid.cards strong {
display: block;
margin: 0.25rem 0 0.35rem;
font-size: 1.05em;
letter-spacing: -0.005em;
}
/* "Arrow → Details" link styling */
.md-typeset .grid.cards a {
font-size: 0.9em;
font-weight: 500;
}
/* Headings that include twemoji icons (e.g. :material-rocket:) — inherit color from heading */
.md-typeset h1 .twemoji svg,
.md-typeset h2 .twemoji svg,
.md-typeset h3 .twemoji svg {
vertical-align: -0.1em;
height: 1em;
width: 1em;
}
/* Strong + emphasis */
.md-typeset strong, .md-typeset b {
font-weight: 700;
color: var(--md-default-fg-color);
}
.md-typeset em { font-style: italic; }
/* ─────────────────────────────────────────────────────────
* 3. LAYOUT
* ───────────────────────────────────────────────────────── */
/* Wider overall canvas; constrain CONTENT to ideal reading column */
.md-grid {
max-width: 1440px;
}
.md-main__inner {
margin-top: 1.5rem;
}
/* Content column width — Goldilocks ~66ch */
.md-content {
max-width: none;
}
.md-content__inner {
max-width: 46rem; /* ~736px = ~66-72ch with Inter at 17px */
margin: 0 auto;
padding: 0 1.25rem 4rem;
}
@media (max-width: 76.25em) {
/* On narrower screens (no right TOC), let content breathe further */
.md-content__inner { max-width: 48rem; }
}
/* ── LEFT SIDEBAR NAV (research-driven 2026-06-06) ──
* With `toc.integrate` the right TOC merges into the left column. We DIFFERENTIATE
* section-nav vs in-page-TOC by one font-size step + one weight step (Notion pattern,
* Next.js pattern). Active link gets accent color + bold + thin left bar (Next.js,
* Kubernetes pattern). Tight 4-12px vertical rhythm; 1px guide-line on nested
* levels (Next.js + Kubernetes).
*/
/* Container — slightly narrower font than the body, set as the base */
.md-nav {
font-size: 13.5px; /* section-nav default; ~67% of body */
line-height: 1.4; /* tight, scannable */
}
/* Section heading — small uppercase eyebrow */
.md-nav__title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--md-default-fg-color--light);
padding: 1rem 0.6rem 0.4rem;
}
/* Top-level section items — slightly larger + bolder */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav__item--section > .md-nav__link {
font-size: 14px;
font-weight: 600;
color: var(--md-default-fg-color);
}
/* Section-nav links — default (page links inside a section) */
.md-nav__link {
font-size: 13.5px;
font-weight: 400;
color: rgba(10, 10, 10, 0.82); /* 2026-06-07: darkened nav inactive (was 0.62) for readability */
padding: 4px 8px;
border-radius: 4px;
margin: 1px 0;
transition: color 120ms ease, background 120ms ease;
}
.md-nav__link:hover {
color: var(--md-default-fg-color);
background: var(--md-default-bg-color--lighter);
}
/* Active page in section nav — accent color + bold + thin left bar */
.md-nav__link--active,
.md-nav__link[aria-current="true"] {
color: var(--md-accent-fg-color);
font-weight: 600;
background: var(--md-accent-fg-color--transparent);
position: relative;
}
.md-nav__link--active::before,
.md-nav__link[aria-current="true"]::before {
content: "";
position: absolute;
left: -8px;
top: 4px;
bottom: 4px;
width: 2px;
background: var(--md-accent-fg-color);
border-radius: 1px;
}
/* Indentation per nested level — 12px (tight for source-of-truth density) */
.md-nav .md-nav { padding-left: 12px; }
/* Vertical guide-line on nested levels (Next.js + Kubernetes pattern) */
.md-nav .md-nav .md-nav__list {
border-left: 1px solid var(--md-default-fg-color--lightest);
padding-left: 12px;
margin-left: 4px;
}
/* ── INTEGRATED PAGE-TOC (md-nav--secondary nested under active page) ──
* One step smaller + one weight lighter than section nav. Signals "you're now
* inside this page's structure" without breaking the single-column layout.
*/
.md-nav--secondary {
font-size: 12.5px; /* 1px smaller than section nav */
}
.md-nav--secondary .md-nav__title {
display: none; /* duplicated "Table of contents" header — kill */
}
.md-nav--secondary .md-nav__link {
font-size: 12.5px;
font-weight: 400;
color: rgba(10, 10, 10, 0.75); /* 2026-06-07: darkened TOC inactive (was 0.55) for readability */
padding: 3px 8px;
margin: 0;
}
.md-nav--secondary .md-nav__link:hover {
color: var(--md-default-fg-color);
background: transparent; /* no fill on TOC hover — too noisy in dense nav */
}
/* Scroll-spy active heading — color + medium weight, NO border bar.
* The page link itself owns the border-bar (above); the active heading
* gets a softer treatment to signal a sub-state.
*/
.md-nav--secondary .md-nav__link--active {
color: var(--md-accent-fg-color);
font-weight: 500;
background: transparent;
}
.md-nav--secondary .md-nav__link--active::before {
display: none; /* override the bar from primary nav rule */
}
/* Secondary-nav guide-line — even lighter than section nav's */
.md-nav--secondary .md-nav__list {
border-left: 1px solid var(--md-default-fg-color--lightest);
padding-left: 10px;
margin-left: 6px;
}
/* Reduce vertical rhythm in dense secondary nav */
.md-nav--secondary .md-nav__item { margin: 0; }
/* ── Scrollable nav container — let it actually scroll if long ── */
.md-sidebar__scrollwrap { scrollbar-width: thin; }
.md-sidebar__scrollwrap::-webkit-scrollbar { width: 6px; }
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
background: var(--md-default-fg-color--lightest);
border-radius: 3px;
}
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
background: var(--md-default-fg-color--lighter);
}
/* Header — neutral, single hairline bottom border */
.md-header {
background: var(--md-default-bg-color);
color: var(--md-default-fg-color);
border-bottom: 1px solid var(--md-default-fg-color--lightest);
box-shadow: none;
}
.md-header__title {
font-weight: 700;
font-size: 0.95rem;
color: var(--md-default-fg-color);
letter-spacing: -0.005em;
}
.md-tabs {
background: var(--md-default-bg-color);
color: var(--md-default-fg-color);
border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.md-tabs__link {
font-weight: 600;
font-size: 0.78rem;
opacity: 0.65;
transition: opacity 120ms ease;
}
.md-tabs__link:hover,
.md-tabs__link--active { opacity: 1; }
/* ─────────────────────────────────────────────────────────
* 4. LINKS
* ───────────────────────────────────────────────────────── */
.md-typeset a {
color: var(--md-typeset-a-color);
text-decoration: none;
transition: color 120ms ease, border-bottom-color 120ms ease;
}
.md-typeset a:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
color: var(--md-typeset-a-color);
}
/* External links — subtle ↗ */
.md-typeset a[href^="http"]:not([href*="copperstatetruckparts.com"]):not([href*="localhost"])::after {
content: " ↗";
font-size: 0.85em;
color: var(--md-default-fg-color--lighter);
}
/* ─────────────────────────────────────────────────────────
* 5. CODE
* ───────────────────────────────────────────────────────── */
/* Inline code — minimal pill, no border */
.md-typeset code {
background: var(--md-code-bg-color);
color: var(--md-code-fg-color);
font-size: 0.85em;
padding: 0.15em 0.4em;
border-radius: 4px;
font-weight: 500;
border: none;
}
/* Code blocks — calm, GitHub-like */
.md-typeset pre {
margin: 1.2rem 0;
}
.md-typeset pre > code {
background: var(--md-code-bg-color);
color: var(--md-code-fg-color);
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 6px;
font-size: 0.82em;
line-height: 1.55;
padding: 0.95em 1.1em;
}
.highlight pre {
background: var(--md-code-bg-color);
}
/* Copy button — subtle */
.md-clipboard {
color: var(--md-default-fg-color--lighter);
opacity: 0.5;
transition: opacity 120ms ease, color 120ms ease;
}
.md-clipboard:hover {
color: var(--md-default-fg-color);
opacity: 1;
}
/* ─────────────────────────────────────────────────────────
* 6. ADMONITIONS
* ───────────────────────────────────────────────────────── */
/* Subtle full-tint background + 3px left border. No heavy title bar. */
.md-typeset .admonition,
.md-typeset details {
border: none;
border-left: 3px solid var(--md-default-fg-color--lighter);
background: var(--md-default-bg-color--lighter);
border-radius: 4px;
box-shadow: none;
padding: 0.85rem 1.1rem;
margin: 1.2rem 0;
font-size: 0.95em;
}
.md-typeset .admonition-title,
.md-typeset summary {
background: transparent;
font-weight: 700;
font-size: 0.85em;
letter-spacing: 0.02em;
padding: 0 0 0.3rem;
margin: 0;
border: none;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before {
top: 0.2rem;
background-color: currentColor;
}
/* Note — calm blue */
.md-typeset .note,
.md-typeset details.note {
border-left-color: #2563eb;
background: #eff6ff;
}
.md-typeset .note > .admonition-title,
.md-typeset details.note > summary { color: #1d4ed8; }
/* Tip / Hint / Success — green */
.md-typeset .tip,
.md-typeset .hint,
.md-typeset .success,
.md-typeset details.tip,
.md-typeset details.hint,
.md-typeset details.success {
border-left-color: #059669;
background: #ecfdf5;
}
.md-typeset .tip > .admonition-title,
.md-typeset .hint > .admonition-title,
.md-typeset .success > .admonition-title { color: #047857; }
/* Warning / Caution — amber */
.md-typeset .warning,
.md-typeset .caution,
.md-typeset details.warning {
border-left-color: #d97706;
background: #fffbeb;
}
.md-typeset .warning > .admonition-title,
.md-typeset .caution > .admonition-title { color: #b45309; }
/* Danger / Bug / Error — red */
.md-typeset .danger,
.md-typeset .error,
.md-typeset .bug,
.md-typeset details.danger {
border-left-color: #dc2626;
background: #fef2f2;
}
.md-typeset .danger > .admonition-title,
.md-typeset .error > .admonition-title,
.md-typeset .bug > .admonition-title { color: #b91c1c; }
/* Info / Abstract — slate */
.md-typeset .info,
.md-typeset .abstract,
.md-typeset .summary,
.md-typeset details.info,
.md-typeset details.abstract {
border-left-color: #475569;
background: #f8fafc;
}
.md-typeset .info > .admonition-title,
.md-typeset .abstract > .admonition-title,
.md-typeset .summary > .admonition-title { color: #334155; }
/* Quote / Cite — neutral grey */
.md-typeset .quote,
.md-typeset .cite {
border-left-color: var(--md-default-fg-color--lighter);
background: var(--md-default-bg-color--lighter);
}
/* ─────────────────────────────────────────────────────────
* 7. TABLES
* ───────────────────────────────────────────────────────── */
.md-typeset table:not([class]) {
border: none;
font-size: 0.9em;
margin: 1.5rem 0;
}
.md-typeset table:not([class]) th {
background: transparent;
color: var(--md-default-fg-color--light);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.6rem 0.8rem;
border-bottom: 2px solid var(--md-default-fg-color--lightest);
}
.md-typeset table:not([class]) td {
background: transparent;
padding: 0.7rem 0.8rem;
border-bottom: 1px solid var(--md-default-fg-color--lightest);
vertical-align: top;
}
.md-typeset table:not([class]) tr {
background: transparent !important; /* kill the default zebra striping */
transition: background 120ms ease;
}
.md-typeset table:not([class]) tbody tr:hover {
background: var(--md-default-bg-color--lighter) !important;
}
.md-typeset table:not([class]) tr:last-child td {
border-bottom: none;
}
/* ─────────────────────────────────────────────────────────
* 8. BLOCKQUOTES + LISTS
* ───────────────────────────────────────────────────────── */
.md-typeset blockquote {
border-left: 3px solid var(--md-default-fg-color--lightest);
padding: 0.1rem 1rem;
margin: 1.2rem 0;
font-style: normal;
color: var(--md-default-fg-color--light);
}
.md-typeset ul,
.md-typeset ol {
margin: 0 0 1rem 1.25rem;
padding: 0;
}
.md-typeset li {
margin: 0.3em 0;
line-height: 1.65;
}
.md-typeset li > p { margin: 0.3em 0; }
.md-typeset ul li::marker { color: var(--md-default-fg-color--lighter); }
.md-typeset ol li::marker { color: var(--md-default-fg-color--lighter); font-weight: 600; }
/* Nested list spacing */
.md-typeset li ul,
.md-typeset li ol { margin-top: 0.3em; margin-bottom: 0.3em; }
/* Definition lists */
.md-typeset dl dt {
font-weight: 700;
margin-top: 1rem;
}
.md-typeset dl dd {
margin-left: 1.25rem;
color: var(--md-default-fg-color--light);
}
/* ─────────────────────────────────────────────────────────
* 9. HORIZONTAL RULES
* ───────────────────────────────────────────────────────── */
.md-typeset hr {
border: none;
height: 1px;
background: var(--md-default-fg-color--lightest);
margin: 2.5rem 0;
}
/* ─────────────────────────────────────────────────────────
* 10. FOOTER
* ───────────────────────────────────────────────────────── */
.md-footer {
background: var(--md-default-bg-color--light);
color: var(--md-default-fg-color--light);
border-top: 1px solid var(--md-default-fg-color--lightest);
}
.md-footer-meta {
background: var(--md-default-bg-color--light);
font-size: 0.78rem;
}
/* ─────────────────────────────────────────────────────────
* 11. SEARCH
* ───────────────────────────────────────────────────────── */
.md-search__form {
background: var(--md-default-bg-color--lighter);
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 6px;
transition: border-color 120ms ease, background 120ms ease;
}
.md-search__form:hover,
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
background: var(--md-default-bg-color);
border-color: var(--md-default-fg-color--lighter);
}
.md-search__input {
color: var(--md-default-fg-color);
font-size: 0.85rem;
}
.md-search__input::placeholder {
color: var(--md-default-fg-color--lighter);
}
/* ─────────────────────────────────────────────────────────
* 12. KEYBOARD SHORTCUTS / ASCII DIAGRAMS
* ───────────────────────────────────────────────────────── */
/* The ASCII diagrams we use throughout — give them proper room. */
.md-typeset pre > code:has(+ .lineno),
.md-typeset .highlight pre {
font-feature-settings: "calt" 0; /* preserve box-drawing chars */
}
.md-typeset kbd {
background: var(--md-default-bg-color--lighter);
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 4px;
padding: 0.1em 0.4em;
font-size: 0.85em;
font-family: var(--md-code-font-family, ui-monospace, monospace);
box-shadow: 0 1px 0 var(--md-default-fg-color--lightest);
}
/* ─────────────────────────────────────────────────────────
* 13. ANIMATIONS — calm, minimal
* ───────────────────────────────────────────────────────── */
* { -webkit-font-smoothing: antialiased; }
.md-typeset { text-rendering: optimizeLegibility; }
/* ─────────────────────────────────────────────────────────
* 14. TAB CONTAINERS (pymdownx.tabbed)
* ───────────────────────────────────────────────────────── */
.md-typeset .tabbed-set {
margin: 1.2rem 0;
}
.md-typeset .tabbed-labels > label {
font-weight: 600;
font-size: 0.85em;
color: var(--md-default-fg-color--light);
padding-bottom: 0.5em;
}
.md-typeset .tabbed-labels > label:hover { color: var(--md-default-fg-color); }
.md-typeset .tabbed-labels--linked > label > a {
color: inherit;
}
/* ─────────────────────────────────────────────────────────
* 15. BUSINESS-PLAN MARKERS (custom admonition types)
*
* Convention from MC-ATG's composed plan:
* !!! gap "🔴 Gap — ..." → substance owed by Brandon/Dennis
* !!! assumption "🟡 Assumption — ..." → verify before relying
* !!! confirmed "🟢 Confirmed — ..." → Brandon-locked
* !!! target "🎯 ..." → Target | Actual | Variance | As-of table
*
* Markers MUST be scannable — readers skim the page for every 🔴 GAP as a punch-list item.
* Each rule mirrors Material's admonition shape: 3px left border + tinted background,
* title in the corresponding strong color.
* ───────────────────────────────────────────────────────── */
.md-typeset .gap {
border-left-color: #dc2626;
background: #fef2f2;
}
.md-typeset .gap > .admonition-title,
.md-typeset details.gap > summary {
color: #b91c1c;
}
.md-typeset .assumption {
border-left-color: #d97706;
background: #fffbeb;
}
.md-typeset .assumption > .admonition-title,
.md-typeset details.assumption > summary {
color: #b45309;
}
.md-typeset .confirmed {
border-left-color: #059669;
background: #ecfdf5;
}
.md-typeset .confirmed > .admonition-title,
.md-typeset details.confirmed > summary {
color: #047857;
}
.md-typeset .target {
border-left-color: #4f46e5;
background: #eef2ff;
}
.md-typeset .target > .admonition-title,
.md-typeset details.target > summary {
color: #4338ca;
}
/* Make 🎯 target tables fit snugly within the admonition (kill default top-margin) */
.md-typeset .target table {
margin: 0.5em 0 0;
width: 100%;
}
/* Tighter title for markers — letter the emoji read as a tag, not a paragraph */
.md-typeset .gap > .admonition-title,
.md-typeset .assumption > .admonition-title,
.md-typeset .confirmed > .admonition-title,
.md-typeset .target > .admonition-title {
font-size: 0.78em;
letter-spacing: 0.02em;
padding-bottom: 0.4rem;
padding-left: 0.6rem; /* reset Material's reserved left space (icon hidden below) */
}
/* Hide Material's default ::before pencil icon for marker types — the emoji
* in the title text IS the icon; the pencil is redundant. */
.md-typeset .gap > .admonition-title::before,
.md-typeset .assumption > .admonition-title::before,
.md-typeset .confirmed > .admonition-title::before,
.md-typeset .target > .admonition-title::before {
display: none;
}