/* Készenléti térkép — funkció-oldal (readiness-map.php). oneLearning indigó, MINDIG világos (data-theme="light").
   2026-10-12: a oneStart / oneLoop microsite-ok közös vázára áll (homepage.css: .site-header, .hero-section, .section,
   .section-title, .btn) — itt csak a lap saját blokkjai: a mátrix-magyarázat, a kártyák, az interaktív demó, a szabályok. */
.rmp {
  --accent: var(--accent-learning, #5E6AD2);
  --accent-current: var(--accent);
  --accent-current-rgb: 94, 106, 210;
  --accent-soft: rgba(94, 106, 210, .09);
  --bg-tint-current: var(--bg-tint-learning, #eef0fb);
  --ink: var(--text-primary, #16202e);
  --ink-2: var(--text-secondary, #5a6678);
  --ink-3: #8a94a6;
  --line: var(--border-light, #e6eaf0);
  --bg-2: var(--bg-secondary, #f6f8fb);

  /* állapot-szintek: háttér / szöveg (a szín mellett mindig ott a szám és a felirat) */
  --rd-ready-bg: #dcfce7; --rd-ready: #166534;
  --rd-near-bg: #fef3c7;  --rd-near: #92400e;
  --rd-far-bg: #eef1f5;   --rd-far: #475569;   /* „távol" = semleges, nem riasztás */
  --rd-alert-bg: #fee2e2; --rd-alert: #991b1b; /* a piros a kockázaté: nincs helyettes, lejárt, hiányzik */
  margin: 0;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.rmp [id] { scroll-margin-top: calc(var(--header-h, 72px) + 12px); }

/* fejléc: logó + ökoszisztéma · egy kiemelt link (Próbáld ki) · nyelv · CTA — mint a oneStart */
.rmp-header .header-content { gap: var(--space-md); }
.rmp-header-key { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); text-decoration: none; margin-left: var(--space-lg); white-space: nowrap; }
.rmp-header-key:hover { color: var(--accent-current); }
.rmp-header-key-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-current); box-shadow: 0 0 0 4px rgba(var(--accent-current-rgb), .15); }
.rmp-header-spacer { flex: 1; }
.rmp-header .logo-text { white-space: nowrap; }
@media (max-width: 768px) { .rmp-header-key { display: none; } }
@media (max-width: 560px) { .rmp-header .lang-switcher { display: none; } .rmp-head-cta .btn-icon { display: none; } }
@media (max-width: 450px) { .rmp-header .logo-text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1; } .rmp-header .logo-bold { display: block; } }

/* hero: a teljes képernyő, a közös színátmenetes főcímmel */
.rmp .hero-section { min-height: 100vh; }
@supports (height: 100svh) { .rmp .hero-section { min-height: 100svh; } }
.rmp .hero-section .container { position: relative; z-index: 2; }
.rmp .hero-section .hero-content { margin: 0 auto; }
.rmp .hero-section .hero-subheadline { font-size: clamp(1.05rem, 1.7vw, 1.25rem); font-weight: 400; color: var(--text-secondary); line-height: 1.6; max-width: 720px; margin-left: auto; margin-right: auto; margin-bottom: var(--space-2xl); }
.rmp-scroll-hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--text-secondary); opacity: .55; animation: rmpHint 2.6s ease-in-out infinite; }
.rmp-scroll-hint:hover { opacity: 1; }
@keyframes rmpHint { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
@media (prefers-reduced-motion: reduce) { .rmp-scroll-hint { animation: none; } }
@media (max-height: 560px) { .rmp-scroll-hint { display: none; } }

/* szekció-fej: középre igazított cím + alcím, fölötte halk címke (mint a oneStart .os-head) */
.rmp-eyebrow { display: block; text-align: center; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-current); margin-bottom: var(--space-sm); }
.rmp-head { text-align: center; margin-bottom: var(--space-2xl); }
.rmp-head .section-title { margin-bottom: 0; }
.rmp-head .section-subtitle { margin-top: var(--space-sm); max-width: 720px; }
.rmp-tint { background: var(--bg-tint-current); }
.rmp h3 { color: var(--text-primary); }

/* 1. a képzési mátrix — három lépés + valódi képernyőkép */
.rmp-mx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.rmp-mx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-lg); }
.rmp-mx-steps li { display: flex; gap: 16px; align-items: flex-start; }
.rmp-mx-n { flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--accent-current-rgb), .12); color: var(--accent-current); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.rmp-mx-steps h3 { font-size: 1.08rem; margin: 5px 0 6px; line-height: 1.35; }
.rmp-mx-steps p { margin: 0; color: var(--text-secondary); line-height: 1.6; font-size: .97rem; }
.rmp-mx-go a { margin-left: 52px; color: var(--accent-current); font-weight: 700; text-decoration: none; }
.rmp-mx-go a:hover { text-decoration: underline; }
.rmp-mx-shot { margin: 0; }
.rmp-mx-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--border-light); box-shadow: 0 1px 2px rgba(20, 24, 60, .04), 0 24px 60px -28px rgba(var(--accent-current-rgb), .45); transform: perspective(1600px) rotateY(-5deg); transform-origin: left center; transition: transform .5s ease; background: #fff; }
.rmp-mx-shot:hover .rmp-mx-frame { transform: none; }
.rmp-mx-frame img { display: block; width: 100%; height: auto; }
.rmp-mx-shot figcaption { margin-top: 10px; font-size: .8rem; color: var(--text-secondary); text-align: right; }
@media (max-width: 900px) { .rmp-mx { grid-template-columns: 1fr; } .rmp-mx-frame { transform: none; } }

/* ismerős helyzetek, vezetői kártyák — a brand-oldalak kártyái */
.rmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-lg); max-width: 1100px; margin: 0 auto; }
.rmp-card { background: var(--bg-primary, #fff); border: 1px solid var(--border-light); border-radius: 16px; padding: var(--space-lg) var(--space-xl); box-shadow: 0 1px 2px rgba(20, 24, 60, .04); transition: transform .2s ease, box-shadow .2s ease; }
.rmp-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -20px rgba(var(--accent-current-rgb), .5); }
.rmp-card h3 { font-size: 1.08rem; margin: 0 0 8px; line-height: 1.35; }
.rmp-card p { color: var(--text-secondary); font-size: .97rem; line-height: 1.6; margin: 0; }
.rmp-cards--accent .rmp-card { border-top: 3px solid var(--accent-current); }

/* demó */
.rmd { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(22, 32, 46, .08); padding: 18px; }
.rmd-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 4px 4px 14px; border-bottom: 1px solid var(--line); }
.rmd-slider { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; margin: 0; flex-wrap: wrap; }
.rmd-slider input { width: 170px; accent-color: var(--accent); }
.rmd-slider output { font-weight: 800; font-size: 1.15rem; min-width: 3.2em; font-variant-numeric: tabular-nums; color: var(--accent); }
.rmd-muted { color: var(--ink-2); font-weight: 400; }
.rmd-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--ink-2); }
.rmd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rmd-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.rmd-sw.is-ready { background: var(--rd-ready-bg); border: 1px solid #22c55e; }
.rmd-sw.is-near { background: var(--rd-near-bg); border: 1px solid #f59e0b; }
.rmd-sw.is-far { background: var(--rd-far-bg); border: 1px solid #94a3b8; }
.rmd-sw.is-own { background: #fff; border: 2px solid var(--accent); }
.rmd-hg { font-style: normal; font-size: .8rem; }

.rmd-risk { margin: 14px 4px 4px; padding: 10px 14px; border-radius: 10px; font-size: .92rem; line-height: 1.5; background: var(--rd-alert-bg); color: var(--rd-alert); }
.rmd-risk.is-ok { background: var(--rd-ready-bg); color: var(--rd-ready); }

.rmd-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; margin-top: 14px; align-items: start; }
.rmd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rmd-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .86rem; }
.rmd-table th, .rmd-table td { padding: 0; border-bottom: 1px solid var(--line); }
.rmd-table thead th { vertical-align: bottom; font-weight: 600; }
.rmd-table .rmd-name { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; padding: 6px 10px 6px 4px; min-width: 132px; white-space: nowrap; }
.rmd-table .rmd-name b { display: block; font-weight: 600; }
.rmd-table .rmd-name small { color: var(--ink-3); font-size: .76rem; }
.rmd-role { height: 132px; width: 68px; min-width: 64px; padding: 4px 2px 8px !important; }
.rmd-role span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: inline-block; max-height: 124px; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.rmd-cell { text-align: center; }
.rmd-cell button { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 2px; width: calc(100% - 4px);
  margin: 2px; height: 34px; border-radius: 6px; font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.rmd-cell button:hover { transform: scale(1.04); }
.rmd-cell button:focus-visible { outline: 3px solid rgba(94, 106, 210, .5); outline-offset: 1px; }
.rmd-cell button.is-ready { background: var(--rd-ready-bg); color: var(--rd-ready); }
.rmd-cell button.is-near { background: var(--rd-near-bg); color: var(--rd-near); }
.rmd-cell button.is-far { background: var(--rd-far-bg); color: var(--rd-far); }
.rmd-cell button.is-own { box-shadow: inset 0 0 0 2px var(--accent); }
.rmd-cell button.is-active { box-shadow: 0 0 0 3px var(--ink); }
.rmd-cell button .rmd-hg { font-size: .66rem; }
.rmd-vers { text-align: center; font-weight: 800; color: var(--accent); min-width: 64px; font-variant-numeric: tabular-nums; }
.rmd-table thead .rmd-vers { font-size: .78rem; font-weight: 600; color: var(--ink-2); vertical-align: bottom; padding-bottom: 8px; }
.rmd-table tfoot td, .rmd-table tfoot th { border-bottom: 0; border-top: 2px solid var(--line); background: var(--bg-2); }
.rmd-table tfoot .rmd-name { background: var(--bg-2); font-weight: 600; font-size: .8rem; }
.rmd-bench { text-align: center; font-weight: 800; padding: 6px 2px !important; font-variant-numeric: tabular-nums; }
.rmd-bench small { display: block; font-weight: 400; font-size: .7rem; color: var(--ink-3); }
.rmd-bench.is-zero { color: var(--rd-alert); }

.rmd-panel { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--bg-2); min-height: 220px; position: sticky; top: calc(var(--header-h, 72px) + 16px); }
.rmd-panel h3 { font-size: 1rem; margin: 0 0 2px; }
.rmd-panel .rmd-role-line { color: var(--ink-2); font-size: .88rem; margin: 0 0 12px; }
.rmd-pct { font-size: 2rem; font-weight: 800; line-height: 1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.rmd-pct.is-ready { color: var(--rd-ready); }
.rmd-pct.is-near { color: var(--rd-near); }
.rmd-pct.is-far { color: var(--rd-far); }
.rmd-items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rmd-items li { display: flex; justify-content: space-between; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px; padding: 7px 10px; font-size: .86rem; }
.rmd-items li.st-v { border-left-color: #22c55e; }
.rmd-items li.st-w { border-left-color: #f59e0b; }
.rmd-items li.st-x, .rmd-items li.st-m { border-left-color: #ef4444; }
.rmd-chip { font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.rmd-chip.st-v { background: var(--rd-ready-bg); color: var(--rd-ready); }
.rmd-chip.st-w { background: var(--rd-near-bg); color: var(--rd-near); }
.rmd-chip.st-x, .rmd-chip.st-m { background: var(--rd-alert-bg); color: var(--rd-alert); }
.rmd-note { margin: 12px 4px 0; font-size: .8rem; color: var(--ink-3); }

/* szabályok */
.rmp-rules { list-style: none; counter-reset: r; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); }
.rmp-rules li { counter-increment: r; background: var(--bg-primary, #fff); border: 1px solid var(--border-light); border-radius: 16px; padding: 22px 22px 22px 68px; position: relative; }
.rmp-rules li::before { content: counter(r); position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--accent-current-rgb), .12); color: var(--accent-current); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.rmp-rules h3 { font-size: 1.02rem; margin: 5px 0 6px; }
.rmp-rules p { color: var(--text-secondary); font-size: .95rem; line-height: 1.6; margin: 0; }

/* vezető + nézőpontok */
.rmp-h-sm { text-align: center; font-size: clamp(1.15rem, 2vw, 1.4rem); margin: var(--space-3xl) 0 var(--space-lg); }
.rmp-views { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: grid; gap: 12px; }
.rmp-views li { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-primary, #fff); border: 1px solid var(--border-light); border-radius: 14px; padding: 14px 18px; }
.rmp-views-n { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-current); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.rmp-views b { display: block; margin-bottom: 2px; color: var(--text-primary); }
.rmp-views p { margin: 0; color: var(--text-secondary); font-size: .95rem; line-height: 1.55; }

/* GYIK */
.rmp-faq-list { max-width: 820px; margin: 0 auto; }
.rmp-faq details { border-bottom: 1px solid var(--border-light); padding: 16px 0; }
.rmp-faq summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; color: var(--text-primary); }
.rmp-faq details p { margin: 10px 0 0; color: var(--text-secondary); line-height: 1.65; font-size: .97rem; }

/* zárás + lábléc */
.rmp-close-cta { text-align: center; }
.rmp-footer { border-top: 1px solid var(--border-light); padding: var(--space-xl) var(--space-lg) var(--space-2xl); text-align: center; font-size: var(--text-sm); }
.rmp-footer a { color: var(--accent-current); font-weight: 600; text-decoration: none; }
.rmp-footer a:hover { text-decoration: underline; }

/* a demó a közös szekció-vázban: a kártya a konténer szélességét kapja */
.rmp-demo { background: linear-gradient(180deg, var(--bg-primary, #fff), var(--bg-tint-current)); }

@media (max-width: 900px) {
  .rmd-body { grid-template-columns: 1fr; }
  .rmd-panel { position: static; min-height: 0; }
}
@media (max-width: 560px) {
  .rmd { padding: 12px; border-radius: 12px; }
  .rmd-slider input { width: 130px; }
  .rmd-role { height: 116px; width: 48px; min-width: 46px; }
  .rmd-table .rmd-name { min-width: 104px; }
  .rmd-cell button { height: 30px; font-size: .74rem; }
}

/* mobil fejléc: a brand-oldalak elrejtik a fejléc-gombot (ott hamburger van) — itt marad, kompakt, ikon nélkül */
@media (max-width: 768px) {
  .rmp-header .header-actions .rmp-head-cta { display: inline-flex; padding: 8px 14px; font-size: .85rem; }
}

/* RÖVIDEN (espresso, 2026-10-12): három sor + rövid zárás; a fejléc nézetjelzője mobilon elfér */
.rmp-pts { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.rmp-pts li { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-primary, #fff); border: 1px solid var(--border-light); border-radius: 16px; padding: var(--space-lg); }
.rmp-pts h3 { font-size: 1.05rem; margin: 5px 0 6px; line-height: 1.35; }
.rmp-pts p { margin: 0; color: var(--text-secondary); font-size: .95rem; line-height: 1.55; }
@media (max-width: 860px) { .rmp-pts { grid-template-columns: 1fr; } }
.rmp-full-link { margin: var(--space-lg) 0 0; font-size: var(--text-sm); }
.rmp-full-link a { color: var(--accent-current); font-weight: 600; text-decoration: none; }
.rmp-full-link a:hover { text-decoration: underline; }
.rmp-header .depth-status { margin-right: 4px; }
@media (max-width: 560px) { .rmp-header .depth-status { display: none; } }