/* MARKETING OS · KÖZÖS RÉSPONZÍV RÉTEG (vizuális bejárás nyomán): minden képernyő és belső nézet olvasható legyen asztali, laptop, tablet és telefon méreten.
   A prototípus (generált app.css) szabályait itt írjuk felül, a prototípushoz nem nyúlunk. A fájl neve a betöltési sorrend miatt z0: a live-f, live-w és live-wp fájlok UTÁN,
   a live-z1/z2 és a live.css ELŐTT jön (a build live-*.css glob + ábécé-sorrend), tehát azonos specificitásnál ez nyer a korábbiakon.
   A képernyő-specifikus javítások (A/B csomag) a saját live-*.css fájljukban élnek; itt csak a több képernyőn közös ok van. */

/* ── Színtokenek: legalább 4,5:1 a tónusos háttéren (világos téma; a sötét blokkok :root:not([data-theme=light]) / [data-theme=dark] erősebbek, így nem sérülnek) ── */
:root {
  --warn: #8F5400;      /* 5,5:1 a --warn-bg-n, 4,9:1 a 15 %-os tónuson */
  --ok: #17692F;        /* 5,4:1 a --ok-bg-n, 4,6:1 a szürke alapú 15 %-os tónuson */
  --primary: #C93009;   /* fehér szöveg 5,4:1; a --primary-subtle chipen 4,7:1 */
  --primary-hover: #A82707;
  --ai: #5B21B6;        /* lila szöveg (agent-pill, ✦) 7:1 */
  --mk-g1p: #C8227A;    /* a magenta gradiens sötétített első megállója: fehér szöveg 5,3:1 (a #F0509F csak 3,3:1) */
}
.mk .btn-p, #s-14 .phone .btn-p, .tr-card .btn-p, .pu .btn-p, .mos-modal-wrap .btn-p {
  background: linear-gradient(135deg, var(--mk-g1p) 0%, var(--mk-g2) 55%, var(--mk-g3) 130%); color: #fff;
}
.tr-btn, .le-tb span:first-child { background: linear-gradient(135deg, var(--mk-g1p), var(--mk-g2)); }
.mk .side .nav .dot { background: linear-gradient(135deg, var(--mk-g1p), var(--mk-g2)); }
.mk .brief .go { background: linear-gradient(135deg, var(--mk-g1p), var(--mk-g2)); color: #fff; }
.seg small, .mf-tabs .seg small, .mx-tt small { opacity: 1; color: var(--text-2); }
.seg span.on small { color: var(--mk-deep); }

/* ── Ablakok: a <body>-ra csatolt .mos-modal-wrap kívül esik a .proto.mk-n, ezért a magenta tokeneket itt adjuk meg (nem narancs "Bezárás") ── */
.mos-modal-wrap {
  --primary: var(--mk-primary); --primary-hover: var(--mk-primary-h); --primary-subtle: var(--mk-subtle); --on-primary: var(--mk-on);
}
.mos-modal-wrap .btn-p { box-shadow: none; }
/* görgethető ablaktörzs: az alsó sáv elhalványul, jelezve, hogy van még lejjebb tartalom (a 28 px alsó tartalék miatt a legalsó sor sosem kerül a halványításba) */
.mos-modal-b { padding-bottom: 28px; -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }

/* ── Törzs: nincs 8 px alapmargó (a fix oldalsáv 100vh-ja pontosan a képernyőre ül, a felső sáv nem lóg be) ── */
body.mos-live { margin: 0; }

/* ── Felső sáv ── */
.proto .p-tagline { border-style: solid; border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.brief .txt { min-width: 0; }
.def { font-size: 11px; }

/* ── Szélesség: a prototípus .view { min-width: 960px } (és #s-3 1080, #s-14 .content 1180) minden képernyőt vízszintesen kilógatott keskeny képernyőn ── */
@media (max-width: 1320px) { #s-3 { min-width: 0; } #s-14 .content { min-width: 0; } }
@media (max-width: 1100px) {
  .view { min-width: 0; }
  .view > .content { min-width: 0; max-width: 100%; }
  /* Egyoszlopos tartalék: a puszta 1fr = minmax(auto,1fr), egy széles gyerek (nowrap pill/gomb, hosszú szó) kinyújtaná a sávot */
  .proto .ma-cols, .proto .ma-g21, .proto #s-6 .mb-cols, .proto .mx-two, .proto .mx-pw, .proto .mf-reg, .proto .mg-top, .proto .mg-lay, .proto .pe-two { grid-template-columns: minmax(0, 1fr) !important; }
  .mx-two > *, .mx-pw > *, .ma-cols > *, .ma-g21 > *, .mf-reg > *, .mg-top > *, .mg-lay > *, .pe-two > *, #s-6 .mb-cols > * { min-width: 0; }
  /* Érintési célok: a 28 px-es gombok / chipek / szegmensek / szöveges vezérlők legalább 36 px magasak (laptopon marad a sűrű kép) */
  :where(.btn, .chip, .seg > span, .kill.mos-desk-kill) { min-height: 36px; display: inline-flex; align-items: center; }
  .seg > span { box-sizing: border-box; }
  .mos-x { min-width: 36px; min-height: 36px; display: inline-grid; place-items: center; }
  :where(.ptr, .f2-link, .mos-link, .mx-src, .mx-undo) { display: inline-flex; align-items: center; min-height: 32px; }
  :where(select, summary) { min-height: 36px; }
  .def { width: 24px; height: 24px; }
  .mb-ib { width: 36px; height: 36px; }
  .f2-x { min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; }
  .cp-mic { width: 36px; height: 36px; } .cp-in { min-height: 36px; }
  .wt-cap, .vz-dirs, a.kr-open, [data-act="intMode"] { display: inline-flex; align-items: center; min-height: 32px; }
  [data-act="tb"] { min-height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; }
  html { scroll-padding-top: 68px; scroll-padding-bottom: 140px; } /* fókusz / görgetés ne csússzon a ragadós felső sáv vagy az alsó sáv alá */
  .toggle { width: 52px; height: 32px; border-radius: 16px; }
  .toggle::after { top: 5px; left: 5px; width: 20px; height: 20px; }
  .toggle.on::after { left: 27px; }
}
@media (pointer: coarse) {
  :where(.btn, .chip, .seg > span, .kill.mos-desk-kill) { min-height: 36px; display: inline-flex; align-items: center; }
  .mos-x { min-width: 36px; min-height: 36px; display: inline-grid; place-items: center; }
  :where(select, summary) { min-height: 36px; }
}

/* ── Fejlécsorok, fülek, szegmensek: keskeny képernyőn törjenek / görgessenek, ne lógjanak ki ── */
@media (max-width: 860px) {
  .page-h { flex-wrap: wrap !important; }
  .page-h > div:first-child { flex: 1 1 100%; min-width: 0; }
  .page-h .act { flex-wrap: wrap !important; margin-left: 0; max-width: 100%; }
  .card-h { flex-wrap: wrap; }
  .card-h .r { flex-wrap: wrap; max-width: 100%; }
}
@media (max-width: 767px) {
  .ptabs { overflow-x: auto; overflow-y: hidden; padding-bottom: 1px; scrollbar-width: none; }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptabs span { flex: 0 0 auto; white-space: nowrap; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg > span { flex: 0 0 auto; white-space: nowrap; }
}

/* ── Telefon: az alsó fül-sáv alatt ne maradjon takart tartalom (html,body{height:100%} mellett a padding nem nyújtotta a görgethető területet) ── */
@media (max-width: 767px) {
  html, body.mos-live { height: auto; min-height: 100%; }
  .mos-tabbar [data-tab] i svg { width: 21px; height: 21px; display: block; }
  .mos-tabbar [data-tab] .mos-tb-n { font-size: 11px; }
  /* Súgó panel: ne csússzon a fül-sáv alá; az értesítés-lap a képernyőn belül marad */
  .p-guide { height: calc(100vh - 56px - 64px - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 56px - 64px - env(safe-area-inset-bottom, 0px)); bottom: auto; }
  .p-pop { left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; max-height: calc(100dvh - 56px - 72px); }
  /* iOS: 16 px alatti beviteli mező fókuszkor ráközelít */
  input, select, textarea, .f2-in, .f3b-in, .mos-field input, .mos-field select, .mos-field textarea { font-size: 16px !important; }
}
@media (max-width: 860px) {
  /* A leállító gomb szöveg nélkül nem derül ki, mi: tabletig a felirat, telefonon rövid felirat */
  .proto .kill span.p-kl { display: inline; }
  .proto .p-tagline { display: inline-block; font-size: 0; color: transparent; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: none; flex: 0 0 auto; }
  .proto .p-tagline::before { content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
}
@media (max-width: 600px) {
  .proto .kill span.p-kl { font-size: 0; }
  .proto .kill span.p-kl::after { content: 'Leállít'; font-size: 13px; }
  .proto .kill.mos-killed span.p-kl::after { content: 'Leállítva'; }
}
@media (max-width: 480px) {
  /* a felső sáv ikonjai (burger, brief, Bemutató, Leállít, keresés, telefon, harang, súgó) 390 px-en is elférjenek, vízszintes görgetés nélkül */
  .proto .top { padding: 0 8px; gap: 6px; }
  .proto .top-r { gap: 3px; }
  .proto .top .ib { width: 32px; height: 32px; }
  .proto .p-tagline { display: none; }
  .proto .kill { padding: 0 8px; gap: 4px; }
}
@media (max-width: 370px) { .proto .tr-btn { display: none; } }
@media (max-width: 767px) {
  .mos-tabbar [data-tab].on { color: var(--mk-primary, #A3157A); }
}

/* ══ Bejárás nyomán (S csomag, 2. kör): tablet / telefon túlfutások, kontraszt, üres szerkesztő-nézet ══ */

/* ── Kimenő lista: a 6 oszlopos tábla 768–1100 px között 996 px széles volt, a Művelet oszlop kilógott. Itt is sorkártya (idő | csatorna + anyag | címzett + állapot + művelet) ── */
@media (min-width: 768px) and (max-width: 1100px) {
  .mos-kim table.mb-q, .mos-kim table.mb-q tbody { display: block; width: 100%; }
  .mos-kim table.mb-q thead { display: none; }
  .mos-kim table.mb-q tr { display: grid; grid-template-columns: 84px 112px minmax(0, 1fr) minmax(0, 230px); gap: 3px 14px; padding: 12px 14px; border-top: 1px solid var(--border); align-items: start; }
  .mos-kim table.mb-q tr.mb-day { display: block; padding: 0; border-top: 0; }
  .mos-kim table.mb-q td { display: block; min-width: 0; padding: 0 !important; border: 0 !important; }
  .mos-kim table.mb-q td.mb-t { grid-column: 1; grid-row: 1 / span 3; }
  .mos-kim table.mb-q td:nth-child(2) { grid-column: 2; grid-row: 1 / span 3; }
  .mos-kim table.mb-q td:nth-child(3) { grid-column: 3; grid-row: 1 / span 3; }
  .mos-kim table.mb-q td:nth-child(4) { grid-column: 4; grid-row: 1; }
  .mos-kim table.mb-q td:nth-child(5) { grid-column: 4; grid-row: 2; }
  .mos-kim table.mb-q td.r { grid-column: 4; grid-row: 3; text-align: left; margin-top: 4px; }
  .mos-kim table.mb-q td.mb-mat, .mos-kim table.mb-q td.mb-to { overflow-wrap: anywhere; }
}
/* a kártyasor hátterét a sor adja (a cellánkénti háttér a rácsban foltos lett); a bal csík a soré */
@media (max-width: 1100px) {
  .mos-kim table.mb-q tr.mb-need, .mos-kim table.mb-q tr.mb-focus { background: color-mix(in srgb, var(--warn-bg) 50%, var(--surface)); box-shadow: inset 3px 0 0 var(--warn); }
  .mos-kim table.mb-q tr.mb-focus { background: var(--warn-bg); }
  .mos-kim table.mb-q tr.mb-stop { box-shadow: inset 3px 0 0 var(--border-strong); }
  .mos-kim table.mb-q tr.mb-need > td, .mos-kim table.mb-q tr.mb-focus > td { background: transparent !important; box-shadow: none !important; }
  .mos-kim table.mb-q tr.mb-stop > td:first-child { box-shadow: none !important; }
  .mos-kim table.mb-q tr.mb-drawer { display: block; }
}

/* ── Teljes képernyős szerkesztők (szöveg, flow, landing ...): a fejléc tabletig törjön, a fő gomb ne lógjon ki ── */
@media (max-width: 1100px) {
  .view .le-top { flex-wrap: wrap; height: auto !important; min-height: 56px; padding-top: 8px !important; padding-bottom: 8px !important; row-gap: 8px; }
  .view .le-top .le-act, .view .le-top .le-mid { flex-wrap: wrap; max-width: 100%; }
  .view .le-top .le-name { flex: 1 1 200px; }
}
/* Üres szerkesztő-nézet (nincs megnyitott anyag / flow): a szerkesztő teljes szélességű, 0 oldalsó térköze itt a falra tapasztotta a szöveget és a kártyát */
#s-9 .content:not(:has(> .le-top)), #s-20 .content:not(:has(> .le-top)) { padding: 0 24px 40px; gap: 16px; min-height: 0; }
#s-9 .content:not(:has(> .le-top)) > .btn, #s-20 .content:not(:has(> .le-top)) > .btn { align-self: flex-start; }
#s-20 .content:not(:has(> .le-top)) > .page-h { margin: 0 -24px; padding: 20px 24px 0; }
@media (max-width: 767px) { #s-9 .content:not(:has(> .le-top)), #s-20 .content:not(:has(> .le-top)) { padding-left: 16px; padding-right: 16px; } }

/* ── Blog sor telefonon: a cím oszlop 70 px-re szűkült, a „Megnyitás” gomb kilógott → cím és kivonat teljes szélesen, alatta a státusz-sor ── */
@media (max-width: 767px) {
  .bl-row { grid-template-columns: minmax(0, 1fr) auto auto !important; gap: 8px 10px; }
  .bl-row .bl-n { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
  .bl-row .bl-m { grid-column: 1; min-width: 0; }
  .bl-row .bl-st { grid-column: 2; }
  .bl-row > .btn { grid-column: 3; }
}

/* ── Rácsok, amelyek 1fr-re (= minmax(auto,1fr)) estek vissza: a széles táblázat kinyújtotta a kártyát (Napló hash-lánc, telefonon 727 px) → a táblázat a saját keretében görgessen ── */
@media (max-width: 1100px) {
  .f2-lay, .f2-grid2 { grid-template-columns: minmax(0, 1fr); }
  .f2-lay > *, .f2-grid2 > * { min-width: 0; }
}

/* ── Szabályok · Korlátok és autonómia: a „Ki dönt” oszlop (3 gomb) és az első oszlop 260 px-es minimuma kitolta a táblát ── */
@media (max-width: 1100px) {
  .aut-t td:first-child { min-width: 0; }
  .aut-t td:first-child { overflow-wrap: break-word; }
  .aut-t td:nth-child(2), .aut-t td:nth-child(3) { white-space: nowrap; }
  .aut-t .aut-seg { flex-wrap: wrap; max-width: 100%; height: auto; }
  .aut-t .aut-seg > span { flex: 0 1 auto; }
}

/* ── Felmérés e-mail előnézet: a hosszú nyilvános link nem törik → levágta a kártya ── */
.mg-mail, .mg-mail * { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

/* ── Kontraszt: elhalványított elemeken a szöveg ne menjen 4,5:1 alá (az elhalkítást a keret / háttér adja, nem a teljes átlátszóság) ── */
.mos-card.vz-c.dim { opacity: 1; box-shadow: none; border-color: var(--border); }
.mos-card.vz-c.dim:not(.ghost) { background: var(--surface-2); }
.mos-card.vz-c.dim .vz-port { opacity: .4; }
.rb-row.off .rb-n, .rb-row.off .rb-logic { opacity: 1; }
.rb-row.off { background: var(--surface-2); }
.rb-row.off .rb-n b, .rb-row.off .rb-hit, .rb-row.off .rb-logic > span { color: var(--text-2); }
label.f3b-check.f3b-off { opacity: 1; color: var(--text-2); }
label.f3b-check.f3b-off .ver { color: var(--text-2); }
/* Flow szerkesztő 1200 px alatt: a prototípus elrejti a lépés-palettát (.fl-pal), de a vászon rácsa a 72 px-es sávot meghagyta → a vászon 56 px-es csíkba szorult. Palettával együtt a vászon kapja a teljes szélességet */
@media (max-width: 1200px) { #s-9 .mc-split.fl-ed { grid-template-columns: minmax(0, 1fr) !important; } }