/* UI v2 — shared legacy pieces (#1017, #1025 points 2–4). The established
   markup, ids, handlers and APIs stay: askDialog (#ask-overlay), the page
   toast (#msg) and the undo toast, the network banner (#network-state), the
   post-send / acceptance moments (#quotes-moment) and the legacy rules that
   leak into v2 markup (<summary>, <label>). Only their look follows the design
   system (BottomSheet, Toast, OfflineBanner, Card, Button, SecondaryButton,
   TextLink; decisions D8, D11, D16). Every selector is scoped under
   html.ui-v2, so with the flag off nothing here applies. Positions of the
   toasts are left to the screens that set them (quote-flow.css). */

/* ---------- D8: a <summary> that is an mg button (#1025 point 2) ----------
   The legacy disclosure rules (min-height 44px, padding-right 98px for the
   "Megnyitom" label, the chevron) out-rank .mg-btn-sec on "Más szakma". */
html.ui-v2 details > summary.mg-btn-sec { min-height: var(--mg-touch-min); padding: 0 var(--mg-space-14); position: static; list-style: none; justify-content: center; text-align: center; }
html.ui-v2 details > summary.mg-btn-sec::-webkit-details-marker { display: none; }
html.ui-v2 details > summary.mg-btn-sec::before, html.ui-v2 details > summary.mg-btn-sec::after { content: none; display: none; }

/* ---------- D11 / D16: v2 labels keep their own colour (#1025 point 4) ----------
   The legacy `label { color: #64748B; font-weight: 500 }` reached every v2
   label that sets no colour of its own (.v2-check, .mg-search__label,
   .v2q-sr, .mg-check). Zero-specificity :where() keeps every component rule
   that does set a colour (.mg-label, .v2-lbl) in charge. */
html.ui-v2 :where(label[class^="v2"]), html.ui-v2 :where(label[class*=" v2"]), html.ui-v2 :where(label[class^="mg-"]), html.ui-v2 :where(label[class*=" mg-"]) { color: var(--mg-text-primary); font-weight: 400; }

/* ---------- Moments in the Ajánlatok list (#1025 point 3, D7/D8/D16) ---------- */
html.ui-v2 #quotes-moment .quotes-moment { gap: var(--mg-space-12); padding: var(--mg-space-14) var(--mg-space-16); margin-bottom: var(--mg-space-12); background: var(--mg-bg-card); border: 1px solid var(--mg-border-card); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-card); color: var(--mg-text-primary); font-family: var(--font-mg-sans); }
html.ui-v2 #quotes-moment .sent-moment, html.ui-v2 #quotes-moment .accepted-moment { background: var(--mg-own-tint); border-color: var(--mg-green-200); }
html.ui-v2 #quotes-moment .moment-check { background: var(--mg-done); }
html.ui-v2 #quotes-moment .moment-copy strong { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--mg-text-primary); }
html.ui-v2 #quotes-moment .moment-copy p { font-size: 15px; line-height: 1.45; color: var(--mg-text-secondary); }
html.ui-v2 #quotes-moment .sent-moment .moment-copy p, html.ui-v2 #quotes-moment .accepted-moment .moment-copy p { color: var(--mg-text-on-tint); }
html.ui-v2 #quotes-moment .wp-offer-line .moment-copy p { color: var(--mg-text-primary); }
html.ui-v2 #quotes-moment .moment-actions { gap: var(--mg-space-4) var(--mg-space-8); margin-top: var(--mg-space-10); }
/* "Elmentem": SecondaryButton; the accepted card's "Megnyitom": Button. */
html.ui-v2 #quotes-moment .moment-actions .btn { width: auto; min-height: var(--mg-touch-min); padding: 0 var(--mg-space-14); display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--mg-border-control); border-radius: var(--mg-radius-control); background: var(--mg-bg-card); color: var(--mg-text-primary); box-shadow: none; font-family: inherit; font-size: 15px; font-weight: 600; }
html.ui-v2 #quotes-moment .moment-actions .btn.cta { border-color: transparent; background: var(--mg-action); color: var(--mg-on-action); font-size: 16px; font-weight: 700; }
/* "Mi ez?", "Ne kérdezd többet": TextLink (the last one muted). */
html.ui-v2 #quotes-moment .moment-actions .linkbtn { min-height: var(--mg-touch-min); padding: 0 var(--mg-space-6); color: var(--mg-action); font-family: inherit; font-size: 14px; font-weight: 700; text-decoration: none; }
html.ui-v2 #quotes-moment .moment-actions .linkbtn[data-act="never"] { color: var(--mg-text-secondary); }
/* "×": IconButton. */
html.ui-v2 #quotes-moment .moment-close { width: var(--mg-touch-min); height: var(--mg-touch-min); min-height: var(--mg-touch-min); margin: calc(-1 * var(--mg-space-10)) calc(-1 * var(--mg-space-10)) 0 0; border-radius: var(--mg-radius-input); color: var(--mg-text-secondary); display: inline-flex; align-items: center; justify-content: center; }
html.ui-v2 #quotes-moment .btn:focus-visible, html.ui-v2 #quotes-moment .linkbtn:focus-visible, html.ui-v2 #quotes-moment .moment-close:focus-visible { outline: 3px solid var(--mg-focus-ring); outline-offset: 2px; }
html.ui-v2 #quotes-moment .btn:active, html.ui-v2 #quotes-moment .linkbtn:active, html.ui-v2 #quotes-moment .moment-close:active { transform: scale(.98); }
@media (hover: hover) {
  html.ui-v2 #quotes-moment .moment-actions .btn:not(.cta):hover { background: var(--mg-bg-subtle); border-color: var(--mg-ink-700); }
  html.ui-v2 #quotes-moment .moment-close:hover { background: var(--mg-bg-sunken); }
}

/* ---------- askDialog: the BottomSheet (#1017) ---------- */
html.ui-v2 #ask-overlay { background: var(--mg-backdrop); }
html.ui-v2 #ask-overlay .ask-card { position: relative; max-width: var(--mg-content-max); padding: var(--mg-space-24) var(--mg-space-20) calc(var(--mg-space-24) + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: var(--mg-radius-sheet) var(--mg-radius-sheet) 0 0; background: var(--mg-bg-card); box-shadow: var(--mg-shadow-sheet); color: var(--mg-text-primary); font-family: var(--font-mg-sans); -webkit-font-smoothing: antialiased; }
/* The grip (decorative, as in .mg-sheet__grip). */
html.ui-v2 #ask-overlay .ask-card::before { content: ""; position: absolute; top: var(--mg-space-8); left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--mg-ink-200); }
html.ui-v2 #ask-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--mg-text-primary); }
html.ui-v2 #ask-message { margin: var(--mg-space-8) 0 0; font-size: 16px; line-height: 1.45; color: var(--mg-text-secondary); }
html.ui-v2 #ask-fields label { margin: var(--mg-space-14) 0 var(--mg-space-6); font-size: 13px; font-weight: 600; color: var(--mg-text-secondary); }
html.ui-v2 #ask-fields input, html.ui-v2 #ask-fields select, html.ui-v2 #ask-fields textarea { min-height: var(--mg-touch-min); padding: 0 var(--mg-space-14); border: 1.5px solid var(--mg-border-control); border-radius: var(--mg-radius-input); background-color: var(--mg-bg-card); color: var(--mg-text-primary); font-family: inherit; font-size: 16px; }
html.ui-v2 #ask-fields textarea { padding: var(--mg-space-12) var(--mg-space-14); }
html.ui-v2 #ask-fields input:focus, html.ui-v2 #ask-fields select:focus, html.ui-v2 #ask-fields textarea:focus { outline: 3px solid var(--mg-focus-ring); outline-offset: -1px; border-color: var(--mg-focus-ring); }
html.ui-v2 #ask-fields .muted { color: var(--mg-text-muted); }
/* The foot: the action on top (Button, green = do), then the way back and the
   third answer as TextLinks. The DOM order (extra, cancel, ok) is kept. */
html.ui-v2 #ask-overlay .btn-row { display: flex; flex-direction: column-reverse; gap: var(--mg-space-4); margin-top: var(--mg-space-20); }
html.ui-v2 #ask-overlay .btn-row .btn { width: 100%; min-height: var(--mg-touch-min); padding: 0 var(--mg-space-16); border: 0; border-radius: var(--mg-radius-control); background: transparent; color: var(--mg-action); box-shadow: none; font-family: inherit; font-size: 16px; font-weight: 700; }
html.ui-v2 #ask-overlay .btn-row .btn.hidden { display: none; }
html.ui-v2 #ask-overlay #ask-extra { color: var(--mg-text-secondary); font-size: 15px; font-weight: 600; }
html.ui-v2 #ask-overlay #ask-ok { min-height: var(--mg-cta-height); background: var(--mg-action); color: var(--mg-on-action); box-shadow: var(--mg-shadow-cta); font-size: 17px; }
/* Danger only for a truly destructive answer (the caller's `danger: true`). */
html.ui-v2 #ask-overlay #ask-ok.danger { background: var(--mg-danger); color: var(--mg-on-action); box-shadow: none; }
html.ui-v2 #ask-overlay .btn-row .btn:focus-visible { outline: 3px solid var(--mg-focus-ring); outline-offset: 2px; }
html.ui-v2 #ask-overlay .btn-row .btn:active { transform: scale(.98); }
@media (hover: hover) {
  html.ui-v2 #ask-overlay .btn-row .btn:not(#ask-ok):hover { background: var(--mg-bg-subtle); }
  html.ui-v2 #ask-overlay #ask-ok:not(.danger):hover { background: color-mix(in srgb, var(--mg-action), var(--mg-ink-950) 6%); }
}

/* ---------- The page toast #msg and the undo toast: Toast (#1017) ----------
   Only the look: where it sits stays with the legacy rule and quote-flow.css. */
html.ui-v2 #msg.ok, html.ui-v2 #msg.err { left: var(--mg-space-16); right: var(--mg-space-16); max-width: var(--mg-content-max); min-height: var(--mg-touch-min); gap: var(--mg-space-12); padding: var(--mg-space-4) var(--mg-space-4) var(--mg-space-4) var(--mg-space-16); border: 0; border-radius: var(--mg-radius-control); background: var(--mg-layer-bg); color: var(--mg-layer-text); box-shadow: var(--mg-shadow-preview); font-family: var(--font-mg-sans); font-size: 15px; font-weight: 400; line-height: 1.4; animation: v2-common-toast-in var(--mg-motion-base) var(--mg-ease-out) both; }
/* Opacity only: the toast never moves into the CTA or the bar it sits above. */
@keyframes v2-common-toast-in { from { opacity: 0; } to { opacity: 1; } }
/* An error the professional has to read stays a Notice colour, not the dark toast. */
html.ui-v2 #msg.err { background: var(--mg-danger-tint); color: var(--mg-danger); font-weight: 600; border: 1px solid color-mix(in srgb, var(--mg-danger), transparent 70%); }
html.ui-v2 #msg .msg-text { padding: var(--mg-space-8) 0; }
html.ui-v2 #msg .msg-close { flex: 0 0 var(--mg-touch-min); width: var(--mg-touch-min); height: var(--mg-touch-min); border-radius: var(--mg-radius-input); color: inherit; font-family: inherit; }
html.ui-v2 #msg .msg-close:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }
html.ui-v2 .mq-undo-toast { min-height: var(--mg-touch-min); padding: var(--mg-space-4) var(--mg-space-4) var(--mg-space-4) var(--mg-space-16); border-radius: var(--mg-radius-control); background: var(--mg-layer-bg); color: var(--mg-layer-text); box-shadow: var(--mg-shadow-preview); font-family: var(--font-mg-sans); font-size: 15px; line-height: 1.4; }
html.ui-v2 .mq-undo-toast button { min-height: var(--mg-touch-min); padding: 0 var(--mg-space-14); border: 0; border-radius: var(--mg-radius-input); background: transparent; color: var(--mg-layer-accent); font-size: 15px; font-weight: 700; }
html.ui-v2 .mq-undo-toast button:focus-visible { outline: 3px solid var(--mg-layer-text); outline-offset: -3px; }
@media (hover: hover) {
  html.ui-v2 #msg.ok .msg-close:hover, html.ui-v2 .mq-undo-toast button:hover { background: var(--mg-layer-card); }
  html.ui-v2 #msg.err .msg-close:hover { background: color-mix(in srgb, var(--mg-danger), transparent 88%); }
}

/* ---------- The network banner #network-state: OfflineBanner (#1017) ----------
   A full-width dark band over the top bar while offline (the yellow icon: not
   an error); "back online" is the light green --back state. */
html.ui-v2 .network-state { top: 0; left: 0; right: 0; max-width: none; transform: translateY(-100%); display: flex; align-items: center; gap: var(--mg-space-10); min-height: calc(var(--mg-touch-min) + env(safe-area-inset-top, 0px)); padding: calc(var(--mg-space-10) + env(safe-area-inset-top, 0px)) var(--mg-space-16) var(--mg-space-10); border: 0; border-radius: 0; background: var(--mg-layer-bg); color: var(--mg-layer-text); box-shadow: none; font-family: var(--font-mg-sans); font-size: 14px; font-weight: 700; line-height: 1.4; transition: opacity var(--mg-motion-base) var(--mg-ease-out), transform var(--mg-motion-base) var(--mg-ease-out); }
html.ui-v2 .network-state::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--mg-yellow-100); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 2l20 20'/><path d='M8.5 16.5a5 5 0 0 1 7 0'/><path d='M5 12.9a10 10 0 0 1 5.2-2.8'/><path d='M14.8 10.2A10 10 0 0 1 19 12.9'/><path d='M2 8.8a15 15 0 0 1 4.2-2.6'/><path d='M10.7 5A15 15 0 0 1 22 8.8'/><path d='M12 20h.01'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 2l20 20'/><path d='M8.5 16.5a5 5 0 0 1 7 0'/><path d='M5 12.9a10 10 0 0 1 5.2-2.8'/><path d='M14.8 10.2A10 10 0 0 1 19 12.9'/><path d='M2 8.8a15 15 0 0 1 4.2-2.6'/><path d='M10.7 5A15 15 0 0 1 22 8.8'/><path d='M12 20h.01'/></svg>") center / contain no-repeat; }
html.ui-v2 .network-state.show { transform: none; }
html.ui-v2 .network-state.online { background: var(--mg-done-tint); color: var(--mg-own-text); }
html.ui-v2 .network-state.online::before { background: var(--mg-own-text); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>"); }

@media (prefers-reduced-motion: reduce) {
  html.ui-v2 #msg.ok, html.ui-v2 #msg.err { animation: none; }
  html.ui-v2 .network-state { transition: none; }
  html.ui-v2 #quotes-moment .btn:active, html.ui-v2 #quotes-moment .linkbtn:active, html.ui-v2 #quotes-moment .moment-close:active, html.ui-v2 #ask-overlay .btn-row .btn:active { transform: none; }
}

/* ---------- Overlay levels (#1074/4) ----------
   mg.css names bar 5 < menu 6 < layer 40 < backdrop 44 < sheet 46. The
   onboarding wizard sat on an unnamed sheet + 10, above the offline banner
   (legacy z 44), so going offline mid-wizard hid the banner. Two named levels
   above sheet: the wizard, then everything that must stay readable on top of
   it (toast, offline banner). #msg, askDialog (60) and the undo toast (80)
   already sit there. */
html.ui-v2 { --mg-z-wizard: calc(var(--mg-z-sheet) + 10); --mg-z-toast: 60; }
html.ui-v2 .mg-toast-region, html.ui-v2 .network-state { z-index: var(--mg-z-toast); }