MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/* Keep images from escaping their enclosures */ img {

 max-width: 100%;
 height: auto;

}

/* Main page overrides */ body.page-Main_Page main header.mw-body-header, body.page-Main_Page div.vector-page-toolbar {

 display: none;

}

/* --- Legacy landing page styles (keep as-is until you retire it) --- */

.landing-page .section span.button a {

 display: inline-block;
 padding: 0.5em 1.5em;
 background-color: rgb(177, 224, 223);
 color: black;
 text-decoration: none;
 border-radius: 5px;
 font-size: 1rem;
 font-weight: bold;

}

.landing-page .section h1, .landing-page .section h2 {

 font-family: Arial, Helvetica, sans-serif !important;
 font-weight: bold;
 border: 0;
 padding: 0;
 display: block;

} .landing-page .section h1 { margin: 0; } .landing-page .section h2 { margin: 0 0 0.55em 0; }

/* Section box base */ .landing-page .section {

 display: flex;
 flex-wrap: wrap;
 align-items: center;
 margin: 8em 0;
 padding-right: 3em;

} .landing-page .section > div { padding: 2em 0; } .landing-page .section .left { flex: 3; min-width: 350px; } .landing-page .section .right { flex: 2; min-width: 350px; } .landing-page .section p { font-size: 1.2rem; }

/* Hero box overrides */ .landing-page .hero-box { padding-right: 0; } .landing-page .hero-box h1 {

 font-size: 4rem;
 line-height: 1.0;
 margin: 0;

} .landing-page .hero-box .tagline {

 font-size: 1.2rem;
 line-height: 1.8;
 margin-top: 0;
 color: rgba(50, 60, 60, 0.8);

}

/* Landing page intro box */ .landing-page .intro {

 padding: 2em;
 border: 2px solid rgb(177, 224, 223);

} .landing-page .intro .label {

 font-family: Arial, Helvetica, sans-serif !important;
 font-weight: bold;
 font-size: 1.2rem;
 margin: 0;
 padding: 0;

} .landing-page .intro p { font-size: 1.6rem; }

/* Button strip */ .landing-page .button-strip {

 padding: 0 !important;
 margin: 1em 0;

} .landing-page .button-strip ul {

 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 justify-content: center;
 gap: 1em;
 clear: both;
 flex-wrap: wrap;

} .landing-page .button-strip li {

 display: inline-block;
 padding: 0 1em;
 margin: 0.5em 0;

} .landing-page .button-strip li .mw-parser-output a.external {

 background-image: none !important;

}

/* Section alts */ .landing-page .alt-1 {

 clear: both;
 margin: 2em 0;
 background-color: rgba(40, 60, 60, 0.05);
 padding: 3em;

} .landing-page .alt-1 p {

 border-bottom: 2px solid rgb(230, 230, 230);
 padding-bottom: 1em;
 margin-bottom: 2em;

} .landing-page .alt-2 { padding: 3em; } .landing-page .section .alt-3 .left { flex: 2; min-width: 350px; } .landing-page .section .alt-3 .right { flex: 3; min-width: 350px; }

/* --- 2026+ shared components --- */

.mw-page-lead {

 font-size: 1.9em;
 font-weight: 100;
 line-height: 1.55;
 color: #444;
 margin: 0 0 0.8em 0;

}

/* Section wrapper */ .mw-section {

 margin: 1.25rem 0;
 clear: both;
 display: flow-root;

} .mw-section::after {

 content: "";
 display: block;
 clear: both;

} .mw-parser-output .mw-section + hr {

 clear: both;

} .mw-section--primary {

 background: none;

} .mw-section--secondary {

 background: rgba(0, 0, 0, 0.06);
 padding: 1rem;
 border-radius: 10px;

} .mw-section--brief {

 margin-bottom: 0.85rem;

} .mw-section--quickpaths-strip {

 margin: 0.35rem 0 0.85rem 0;
 font-size: 0.96em;
 line-height: 1.35;
 color: rgba(0, 0, 0, 0.75);

} .mw-section--quickpaths-strip p {

 margin: 0;

} .mw-section--quickpaths-strip a {

 white-space: nowrap;

} @media (max-width: 900px) {

 .mw-section--quickpaths-strip a,
 .mw-section--quickpaths-strip .mw-parser-output a {
   white-space: normal;
 }

} .mw-section--secondary > :is(h1, h2, h3, h4, h5, h6):first-child {

 font-size: 1.3em;
 font-weight: 700;
 margin: 0 0 0.75rem 0;
 padding-bottom: 0;
 border-bottom: 0;

} .mw-parser-output .mw-section--secondary :is(h1, h2, h3, h4, h5, h6) {

 border-bottom: 0;
 padding-bottom: 0;

} .mw-parser-output .mw-section :is(h1, h2, h3, h4, h5, h6), .mw-parser-output .mw-section__card :is(h1, h2, h3, h4, h5, h6) {

 margin-top: 0;
 padding-top: 0;

} .mw-parser-output .mw-section h2, .mw-parser-output .mw-section__card h2 {

 padding-bottom: 0;

} .mw-section__layout {

 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(var(--mw-card-min, 18rem), 1fr));
 gap: var(--mw-card-gap, 0.9rem);

} .mw-section__card {

 background: rgba(255, 255, 255, 0.7);
 padding: 0.95rem 1rem;
 border-radius: 10px;
 border: 1px solid rgba(0, 0, 0, 0.06);
 line-height: 1.5; 

} .mw-section--primary .mw-section__card {

 margin-left: 0;
 margin-right: 0;

} .mw-section--secondary .mw-section__card {

 background: rgba(255,255,255, 0.6);

} .mw-section__card + .mw-section__card { margin-top: 0.9rem; } .mw-section__layout .mw-section__card + .mw-section__card { margin-top: 0; } .mw-section__card > :is(h1, h2, h3, h4, h5, h6):first-child {

 font-weight: 700;
 margin: 0 0 0.5rem 0;
 font-size: 1.2em;

} .mw-section__card h4 {

 margin: 0.8rem 0 0.35rem 0;
 padding-top: 0;
 border-top: 0;
 font-size: 0.95em;
 font-weight: 700;

} .mw-section__chips {

 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem 0.45rem;
 margin-top: 0.25rem;

}

/* --- Inline term system --- */

.mw-parser-output .term {

 position: relative;
 display: inline-block;
 text-decoration: underline dotted;
 text-underline-offset: 0.14em;
 cursor: help;

}

.mw-parser-output .term__card {

 display: none;
 position: absolute;
 left: 0;
 top: calc(100% + 0.4rem);
 width: min(20rem, 70vw);
 z-index: 100;
 padding: 0.55rem 0.65rem;
 border: 1px solid rgba(0, 0, 0, 0.16);
 border-radius: 8px;
 background: #fff;
 color: #2f3338;
 box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
 font-size: 0.9em;
 line-height: 1.35;
 font-weight: 500;
 text-decoration: none;
 pointer-events: none;

}

.mw-parser-output a:hover .term__card, .mw-parser-output a:focus .term__card, .mw-parser-output a:focus-visible .term__card, .mw-parser-output .term:hover .term__card {

 display: block;

}

.term-definition {

 margin: 0.35rem 0 0.75rem;
 padding: 0.75rem 0.9rem;
 background: rgba(0, 0, 0, 0.04);
 border: 1px solid rgba(0, 0, 0, 0.08);
 border-radius: 8px;

}

.term-definition__row + .term-definition__row {

 margin-top: 0.45rem;

} .mw-section__chips a {

 display: inline-block;
 padding: 0.18rem 0.55rem;
 border-radius: 999px;
 border: 1px solid rgba(0, 0, 0, 0.14);
 background: rgba(255, 255, 255, 0.78);
 text-decoration: none;
 line-height: 1.25;

} .mw-section__chips a:hover, .mw-section__chips a:focus {

 background: rgba(255, 255, 255, 0.96);

} .mw-section__more {

 margin-top: 0.45rem;
 margin-bottom: 0;
 font-size: 0.92em;
 line-height: 1.25;

} .mw-section__layout--build {

 grid-template-columns: 1fr;
 margin: 0.85rem 0;

} .mw-section__layout--build .mw-section__card {

 height: auto;

} .mw-section__layout--build .mw-section__card > ul:first-of-type {

 margin-top: 0.35rem;
 margin-bottom: 0;
 padding-left: 1.15rem;

} .mw-section__layout--build .mw-section__card > ul:first-of-type li {

 margin: 0.2rem 0;

} .mw-section__layout--build .mw-section__card h4 {

 margin-top: 0.5rem;
 margin-bottom: 0.35rem;
 padding-top: 0.5rem;
 border-top: 0;
 font-size: 0.88em;
 font-weight: 500;
 color: rgba(0, 0, 0, 0.58);

} .mw-section__layout--build .mw-section__more {

 margin-top: 0.55rem;

} @media (min-width: 860px) {

 .mw-section__layout--build {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }

}

/* Brief section: right-side card + media container */ .mw-section__brief-aside {

 float: right;
 width: min(100%, 26rem);
 margin: 0 0 1rem 1rem;
 display: grid;
 gap: 0.9rem;

} .mw-section__media {

 background: rgba(255, 255, 255, 0.7);
 padding: 0.95rem 1rem;
 border-radius: 10px;
 border: 0;

} .mw-section__media figure[typeof~="mw:File/Thumb"], .mw-section__media figure[typeof~="mw:File/Frame"] {

 float: none !important;
 margin: 0 !important;
 width: 100% !important;
 max-width: 100% !important;
 display: flex !important;
 flex-direction: column;
 border: 0 !important;
 background: transparent !important;
 padding: 0 !important;
 box-shadow: none !important;
 line-height: normal !important;
 min-width: 0;

} .mw-section__media figure > a.mw-file-description {

 display: block;
 width: 100%;

} .mw-section__media img.mw-file-element {

 width: 100% !important;
 height: auto;
 display: block;
 border: 0 !important;
 background: transparent !important;
 box-shadow: none !important;

} .mw-section__media figure > figcaption {

 display: block !important;
 margin-top: 0.6rem;
 width: auto !important;
 max-width: none !important;
 inline-size: 100% !important;
 min-width: 0;
 padding: 0 !important;
 border: 0 !important;
 background: transparent !important;
 white-space: normal;
 overflow-wrap: break-word;
 word-break: normal !important;
 hyphens: none !important;
 float: none !important;
 clear: both !important;

} .mw-section__media .thumbinner, .mw-section__media .thumbcaption {

 width: 100% !important;
 max-width: 100% !important;
 inline-size: 100% !important;
 box-sizing: border-box;
 border: 0 !important;
 background: transparent !important;
 padding: 0 !important;
 float: none !important;

} .mw-section__media figure > figcaption::before, .mw-section__media figure > figcaption::after {

 content: none !important;

} @media (max-width: 900px) {

 .mw-section__brief-aside {
   float: none;
   width: 100%;
   margin: 0 0 1rem 0;
 }

}

.mw-section-wrapper-secondary {

 background: rgba(0, 0, 0, 0.04);
 padding: 1rem;
 border-radius: 10px;
 margin: 1.25rem 0;
 clear: both;

} .mw-section-wrapper-secondary__title {

 font-size: 1.3em;
 font-weight: 700;
 margin: 0 0 0.75rem 0;
 padding-bottom: 0.4rem;
 border-bottom: 1px solid rgba(0, 0, 0, 0.15);

} .mw-section-wrapper-secondary .mw-card {

 background: rgba(255, 255, 255, 0.7);
 padding: 0.95rem 1rem;
 border-radius: 10px;
 border: 1px solid rgba(0, 0, 0, 0.06);

} .mw-section-wrapper-secondary .mw-card__title { font-weight: 700; margin: 0 0 0.5rem 0; font-size: 1.2em; } .mw-section-wrapper-secondary .mw-card__body { line-height: 1.5; }

/* Card row wrapper */ .mw-cardrow {

 padding: 1rem;
 border-radius: 10px;
 margin: 1.25rem 0;
 clear: both;

}

/* Responsive grid */ .mw-cardgrid {

 display: grid;
 grid-template-columns: 1fr;
 gap: 0.9rem;

} @media (min-width: 900px) {

 .mw-cardgrid { grid-template-columns: repeat(3, 1fr); }

}

/* Cards */ .mw-card {

 background: rgba(255, 255, 255, 0.7);
 padding: 0.95rem 1rem;
 border-radius: 10px;
 border: 1px solid rgba(0, 0, 0, 0.06);

} .mw-card__title { font-weight: 700; margin: 0 0 0.5rem 0; font-size: 1.2em; } .mw-card__body { line-height: 1.5; }

/* Card row title */ .mw-cardrow__title {

 font-size: 1.3em;
 font-weight: 700;
 margin: 0 0 0.75rem 0;
 padding-bottom: 0.4rem;
 border-bottom: 1px solid rgba(0, 0, 0, 0.15);

}

/* --- Opt-in thumbnail card: class=mw-thumb-card (locked 50%) --- */

/* Frame + layout */ figure.mw-thumb-card[typeof~="mw:File/Thumb"], figure.mw-thumb-card[typeof~="mw:File/Frame"] {

 float: right;
 clear: right;

 /* Override Vector thumb table model */
 display: block !important;
 line-height: normal !important;
 border-collapse: separate !important;

 /* Lock width (responsive) */
 width: 50%;
 max-width: 100%;

 /* Frame */
 border: 0px solid rgba(0, 0, 0, 0.15) !important;
 border-radius: 10px;
 background: none !important;

 padding: 1rem;
 margin: 0.5em 0 1.3em 1.4em;
 box-sizing: border-box;

 text-align: center;

}

/* Undo Vector’s thumb background/border rules that leak through media queries */ @media screen {

 figure.mw-thumb-card[typeof~="mw:File/Thumb"],
 figure.mw-thumb-card[typeof~="mw:File/Frame"] {
   background-color: transparent !important;
   border-bottom: 0px solid rgba(0, 0, 0, 0.15) !important;
 }

}

/* Image wrapper */ figure.mw-thumb-card > a.mw-file-description {

 display: block;
 padding: 2px;
 border-radius: 9px;

}

/* Image fills the 400px frame */ figure.mw-thumb-card img.mw-file-element {

 display: block;
 width: 100% !important;
 height: auto;

 background: transparent !important; /* defeat Vector’s thumb image fill */
 border: 0 !important;
 outline: 0 !important;
 box-shadow: none !important;

 border-radius: 6px;
 margin: 0 auto;

}

/* Caption inside the frame */ figure.mw-thumb-card > figcaption {

 display: block !important;
 margin: 1rem 0 0 0;
 padding: 0;

 background: none !important;
 border: 0 !important;

 color: rgba(0, 0, 0, 0.75);
 font-size: 0.95em;
 line-height: 1.35;
 text-align: left;

 /* wrap without “skinny column” behavior */
 overflow-wrap: break-word;
 word-break: normal !important;
 hyphens: none !important;
 white-space: normal;

}

figure.mw-thumb-card > figcaption::before, figure.mw-thumb-card > figcaption::after {

 content: none !important;

}

/* What People Build: light card grid */

.mw-build-grid {

 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 gap: 1.5rem;
 margin: 2rem 0;

}

.mw-build-card {

 padding: 1.25rem 1.4rem;

 border: 1px solid rgba(0,0,0,0.08);
 border-radius: 10px;

 background: white;

 box-sizing: border-box;

}

.mw-build-card h3 {

 margin: 0 0 0.4rem 0;

 font-size: 1.05rem;
 font-weight: 700;

}

.mw-build-card p {

 margin: 0;

 font-size: 0.95rem;
 line-height: 1.45;
 color: rgba(0,0,0,0.75);

}

/* Procedure step layout */ .mw-step {

 margin: 2rem 0 4rem 0;
 display: grid;
 grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
 gap: 0.9rem 3rem;
 align-items: start;

} .mw-step--plain {

 padding: 0;
 border: 0;
 border-radius: 0;
 background: transparent;

} .mw-step--card {

 padding: 0.95rem 1rem;
 border-radius: 10px;
 border: 1px solid rgba(0, 0, 0, 0.06);
 background: rgba(255, 255, 255, 0.7);

} .mw-step--shaded {

 padding: 1rem;
 border: 0;
 border-radius: 10px;
 background: rgba(0, 0, 0, 0.04);

} .mw-step :is(h1, h2, h3, h4, h5, h6) {

 margin-top: 0;
 padding-top: 0;

} .mw-step__image {

 grid-column: 1;
 min-width: 0;

} .mw-step__text {

 grid-column: 2;
 min-width: 0;

} .mw-step__text :is(h1, h2, h3, h4, h5, h6) {

 margin-top: 1rem;

} .mw-parser-output .mw-step__text :is(ul, ol), .mw-content-ltr .mw-parser-output .mw-step__text :is(ul, ol) {

 margin-left: 1.5rem;
 padding-left: 0;

} .mw-parser-output .mw-step__text :is(ul, ol) > li, .mw-content-ltr .mw-parser-output .mw-step__text :is(ul, ol) > li {

 margin-left: 0;

} .mw-step__image figure[typeof~="mw:File/Thumb"], .mw-step__image figure[typeof~="mw:File/Frame"] {

 float: none !important;
 margin: 0 !important;
 width: 100% !important;
 max-width: 100% !important;
 display: flex !important;
 flex-direction: column;
 border: 0 !important;
 background: transparent !important;
 padding: 0 !important;
 box-shadow: none !important;
 line-height: normal !important;
 min-width: 0;

} .mw-step__image figure > a.mw-file-description {

 display: block;
 width: 100%;

} .mw-step__image figure > figcaption {

 display: block !important;
 margin-top: 0.6rem;
 width: auto !important;
 max-width: none !important;
 inline-size: 100% !important;
 min-width: 0;
 padding: 0 !important;
 border: 0 !important;
 background: transparent !important;
 white-space: normal;
 overflow-wrap: break-word;
 word-break: normal !important;
 hyphens: none !important;
 float: none !important;
 clear: both !important;

} .mw-step__image .thumbinner, .mw-step__image .thumbcaption {

 width: 100% !important;
 max-width: 100% !important;
 inline-size: 100% !important;
 box-sizing: border-box;
 border: 0 !important;
 background: transparent !important;
 padding: 0 !important;
 float: none !important;

} .mw-step__image img.mw-file-element {

 width: 100% !important;
 height: auto;
 display: block;
 border: 0 !important;
 background: transparent !important;
 box-shadow: none !important;

} .mw-step__image figure > figcaption::before, .mw-step__image figure > figcaption::after {

 content: none !important;

} @media screen {

 .mw-step__image figure[typeof~="mw:File/Thumb"],
 .mw-step__image figure[typeof~="mw:File/Frame"] {
   background-color: transparent !important;
   border-bottom: 0 !important;
 }

} @media (max-width: 900px) {

 .mw-step {
   grid-template-columns: 1fr;
 }
 .mw-step__image,
 .mw-step__text {
   grid-column: 1;
 }

}

/* Info box template */ .mw-info {

 margin: 0.9rem 0;
 padding: 0.7rem 0.95rem;
 border-radius: 8px;
 border: 1px solid rgba(0, 0, 0, 0.12);
 border-left-width: 4px;
 background: rgba(80, 110, 140, 0.08);
 border-left-color: rgba(60, 95, 130, 0.55);
 display: flow-root;

} .mw-info__title {

 margin: 0 0 0.25rem 0;
 font-weight: 700;
 font-size: 0.95em;
 letter-spacing: 0.01em;

} .mw-info__body > :first-child {

 margin-top: 0;

} .mw-info__body > :last-child {

 margin-bottom: 0;

} .mw-info--info {

 background: rgba(80, 110, 140, 0.08);
 border-left-color: rgba(60, 95, 130, 0.55);

} .mw-info--note {

 background: rgba(84, 110, 160, 0.08);
 border-left-color: rgba(74, 96, 143, 0.6);

} .mw-info--tip {

 background: rgba(72, 130, 72, 0.09);
 border-left-color: rgba(57, 112, 57, 0.6);

} .mw-info--warning {

 background: rgba(185, 122, 44, 0.12);
 border-left-color: rgba(161, 94, 25, 0.68);

}

/* TOC limits */ .toclimit-2 .toclevel-2, .toclimit-2 .toclevel-3, .toclimit-2 .toclevel-4 { display:none; }

.toclimit-3 .toclevel-3, .toclimit-3 .toclevel-4 { display:none; }

.toclimit-4 .toclevel-4 { display:none; }

/* Vector 2022 sidebar TOC support */ body:has(.toclimit-2) .vector-toc .vector-toc-level-2, body:has(.toclimit-2) .vector-toc .vector-toc-level-3, body:has(.toclimit-2) .vector-toc .vector-toc-level-4, body:has(.toclimit-2) .vector-toc .vector-toc-level-5, body:has(.toclimit-2) .vector-toc .vector-toc-level-6, body:has(.toclimit-2) .vector-toc .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item.vector-toc-level-2, body:has(.toclimit-2) .vector-toc .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item.vector-toc-level-3, body:has(.toclimit-2) .vector-toc .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item.vector-toc-level-4, body:has(.toclimit-2) .vector-toc .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item.vector-toc-level-5, body:has(.toclimit-2) .vector-toc .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item.vector-toc-level-6 { display: none !important; }

body:has(.toclimit-3) .vector-toc .vector-toc-level-3, body:has(.toclimit-3) .vector-toc .vector-toc-level-4, body:has(.toclimit-3) .vector-toc .vector-toc-level-5, body:has(.toclimit-3) .vector-toc .vector-toc-level-6, body:has(.toclimit-3) .vector-toc .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item.vector-toc-level-3, body:has(.toclimit-3) .vector-toc .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item.vector-toc-level-4, body:has(.toclimit-3) .vector-toc .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item.vector-toc-level-5, body:has(.toclimit-3) .vector-toc .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item.vector-toc-level-6 { display: none !important; }

body:has(.toclimit-4) .vector-toc .vector-toc-level-4, body:has(.toclimit-4) .vector-toc .vector-toc-level-5, body:has(.toclimit-4) .vector-toc .vector-toc-level-6, body:has(.toclimit-4) .vector-toc .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item.vector-toc-level-4, body:has(.toclimit-4) .vector-toc .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item.vector-toc-level-5, body:has(.toclimit-4) .vector-toc .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item.vector-toc-level-6 { display: none !important; }