/* Sample report, question list plus face block (card b6d6a494, 2026-09-29).
   A separate file on purpose: app.css and lap.css differ between repo and live
   (measured 2026-09-29), so this change must not ship either of them. */

/* chart: the same rules the tenant dashboard uses (public/style.css) */
.mr-abra .abra { margin: 1.4rem 0 0; }
/* hidden below 760 px: the axis labels would shrink under 11 px, the card
   sparklines carry the trend there (lap-atvetel, 2026-09-29) */
@media (max-width: 759px) { .mr-abra { display: none; } }
.mr-abra .abra svg { display: block; width: 100%; height: auto; background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--sugar); }
.mr-abra .racs { stroke: var(--racs); stroke-width: 1; }
.mr-abra .tengely { font-size: 12px; fill: var(--navy-halk); font-family: inherit; }
.mr-abra .tengely.halk { font-size: 10.5px; opacity: 0.7; }
.mr-abra .tengely-felirat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--navy-halk); margin: 0 0 0.3rem; }
.mr-abra .ervonal-cimke { font-size: 13px; font-weight: 700; }
.mr-abra .pont { stroke: #fff; stroke-width: 1.5; }
.mr-abra .jelmagyarazat { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.86rem; color: var(--navy-halk); margin: 0.7rem 0 0; }
.mr-abra .jelmagyarazat i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 0.4rem; vertical-align: -1px; }
.mr-abra .sorozat path { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: mr-rajzol 1.4s ease-out forwards; }
@keyframes mr-rajzol { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .mr-abra .sorozat path { animation: none; stroke-dashoffset: 0; } }

.mr-idoszak { color: var(--navy-halk); max-width: 46rem; margin: 0 0 1.4rem; }
.mr-nincs { background: var(--piros-halk); border-left: 4px solid var(--piros); padding: 0.9rem 1rem; border-radius: var(--sugar); }

.mr-kartyak { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
/* three columns only from 1000 px: at 768-900 a third of the row is about 190 px,
   the sparkline labels would render at 8.9 px (lap-atvetel, 2026-09-29) */
@media (min-width: 1000px) { .mr-kartyak { grid-template-columns: repeat(3, 1fr); } }
.mr-kartya { background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 1.1rem 1.2rem; }
.mr-kartya h3 { font-size: 0.95rem; margin: 0 0 0.4rem; color: var(--navy); }
.mr-szam { font-size: 2.4rem; font-weight: 800; color: var(--navy); margin: 0; line-height: 1.1; }
.mr-szam span { display: block; font-size: 0.82rem; font-weight: 600; color: var(--navy-halk); margin-top: 0.2rem; }
.mr-szikra { display: block; width: 100%; height: auto; margin: 0.7rem 0 0.2rem; }
.mr-alsor { font-size: 0.85rem; color: var(--navy-halk); margin: 0.5rem 0 0; }

.mr-tabla-gorgo { overflow-x: auto; margin-top: 1.8rem; border: 1px solid var(--vonal); border-radius: var(--sugar); background: var(--lap); }
.mr-tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mr-tabla th { text-align: left; background: var(--navy); color: #fff; padding: 0.7rem 0.8rem; font-size: 0.8rem; font-weight: 700; }
.mr-tabla td { padding: 0.75rem 0.8rem; border-top: 1px solid var(--racs); vertical-align: top; color: var(--navy); }
.mr-kerdes { min-width: 16rem; }
.mr-cella { white-space: nowrap; }
.mr-cella b { font-size: 1.15rem; }
.mr-cella span { color: var(--navy-halk); }
.mr-cella i { display: block; font-style: normal; font-size: 0.78rem; color: var(--navy-halk); }
.mr-helyette span { display: inline-block; background: var(--tort); border-radius: 999px; padding: 0.15rem 0.6rem; margin: 0 0.3rem 0.3rem 0; font-size: 0.8rem; }
.mr-helyette small { color: var(--navy-halk); }
.mr-halk { color: var(--navy-halk); font-size: 0.82rem; }
/* 390 px: rows become cards, the header labels move into data-cimke */
@media (max-width: 699px) {
	.mr-tabla thead { display: none; }
	.mr-tabla, .mr-tabla tbody, .mr-tabla tr, .mr-tabla td { display: block; width: 100%; }
	.mr-tabla tr { border-top: 1px solid var(--vonal); padding: 0.4rem 0; }
	.mr-tabla td { border: 0; padding: 0.35rem 0.9rem; white-space: normal; }
	.mr-tabla td::before { content: attr(data-cimke); display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy-halk); }
	.mr-kerdes { min-width: 0; font-weight: 700; }
	.mr-tabla-gorgo { overflow-x: visible; }
}

.mr-kerdesek { counter-reset: mr; list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 0.55rem; max-width: 46rem; }
.mr-kerdesek li { counter-increment: mr; background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 0.75rem 0.9rem 0.75rem 3.1rem; position: relative; color: var(--navy); }
.mr-kerdesek li::before { content: counter(mr); position: absolute; left: 0.8rem; top: 0.65rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sarga); color: var(--navy); font-weight: 800; font-size: 0.85rem; display: grid; place-items: center; }

.arc-blokk { display: grid; gap: 1.4rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 700px) { .arc-blokk { grid-template-columns: 11rem 1fr; } }
.arc-blokk img { width: 11rem; height: 11rem; border-radius: 50%; object-fit: cover; border: 4px solid var(--sarga); box-shadow: 0 8px 24px rgba(15, 28, 56, 0.18); }
.arc-blokk h2 { margin: 0 0 0.2rem; }
.arc-blokk .arc-szerep { color: var(--navy-halk); font-weight: 700; margin: 0 0 0.7rem; }
.arc-blokk p { color: var(--navy-halk); max-width: 40rem; }
.arc-blokk a[href^="mailto:"] { color: var(--navy); font-weight: 700; }

.mr-link-sor { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; }