/* styles/article.css
Scoped to .rm-article so it cannot leak into the rest of realtymart.ng.
Import once — in app/layout.tsx or globals.css — not per article. */
.rm-article {
line-height: 1.65;
max-width: 760px;
}
.rm-article h2 { margin: 2em 0 .5em; line-height: 1.25; }
.rm-article h3 { margin: 1.6em 0 .4em; }
.rm-article p { margin: 0 0 1em; }
.rm-article ul,
.rm-article ol { margin: 0 0 1em 1.15em; padding: 0; }
.rm-article li { margin: 0 0 .45em; }
.rm-article a { text-decoration: underline; text-underline-offset: 2px; }
/* Callout: the short answer at the top */
.rm-answer {
border-left: 4px solid currentColor;
padding: .9em 1.1em;
margin: 0 0 1.6em;
background: rgba(0, 0, 0, .035);
}
.rm-answer p:last-child { margin: 0; }
/* Callout: warnings and buyer flags */
.rm-flag {
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
padding: .9em 1.1em;
margin: 0 0 1.5em;
font-size: .95em;
}
.rm-flag p:last-child { margin: 0; }
/* Tables — wrapper is injected automatically by mdx-components.tsx */
.rm-table-wrap { overflow-x: auto; margin: 0 0 1.4em; }
.rm-article table {
border-collapse: collapse;
width: 100%;
min-width: 460px;
font-size: .95em;
}
.rm-article th,
.rm-article td {
border: 1px solid rgba(0, 0, 0, .15);
padding: .6em .7em;
text-align: left;
vertical-align: top;
}
.rm-article th { background: rgba(0, 0, 0, .05); font-weight: 600; }
.rm-sources { font-size: .9em; }
.rm-sources li { margin-bottom: .35em; }
/* ---------------- TOOLTIP ---------------- */
.rm-tip {
position: relative;
display: inline;
border: 0;
border-bottom: 1px dotted currentColor;
cursor: help;
padding: 0;
font: inherit;
color: inherit;
background: none;
text-align: left;
}
.rm-tip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.rm-tip .rm-tip-box {
visibility: hidden;
opacity: 0;
position: absolute;
z-index: 60;
bottom: 135%;
width: min(280px, 78vw);
padding: .6em .75em;
border-radius: 6px;
background: #1b1b1b;
color: #fff;
font-size: .85rem;
line-height: 1.45;
font-weight: 400;
box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
transition: opacity .15s ease;
pointer-events: none;
}
.rm-tip-left { left: 0; }
.rm-tip-right { right: 0; }
.rm-tip:hover .rm-tip-box,
.rm-tip:focus .rm-tip-box {
visibility: visible;
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.rm-tip .rm-tip-box { transition: none; }
}