:focus-visible {
outline: 2px solid var(--mg-primary);
outline-offset: 2px;
}
.mg-search input:focus-visible,
.pr-note:focus-visible,
.pd-rev-name:focus-visible,
.pd-rev-text-in:focus-visible,
.mg-cart-name:focus-visible,
.mg-wheel-chip-name:focus-visible {
outline: none;
}
#mgCats button:focus-visible {
outline: 2px solid var(--mg-primary) !important;
outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }
html[data-contrast="high"] :focus-visible {
outline-width: 3px;
outline-offset: 3px;
}
.mg-skip-link {
position: absolute; left: 8px; top: -60px; z-index: 3000;
padding: 9px 16px; border-radius: 0 0 10px 10px;
background: var(--mg-primary); color: #fff;
font-size: 14px; font-weight: 600; text-decoration: none;
transition: top .15s ease;
}
.mg-skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: -4px; }
.mg-sr-only {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mg-a11y { padding: 0 16px 4px; }
.mg-a11y-group { margin-bottom: 10px; }
.mg-a11y-label {
display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
font-size: 13px; font-weight: 700; color: var(--mg-text, #111);
}
.mg-a11y-label > i { color: var(--mg-primary); font-size: 15px; }
.mg-a11y-pop { margin-left: auto; }
.mg-a11y-info {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
background: transparent; color: var(--mg-text-muted, #999);
font-size: 14px; cursor: pointer;
}
.mg-a11y-pop-text {
font-size: 12px; line-height: 1.55; text-align: left;
color: var(--mg-text-soft, #666);
}
.mg-a11y-steps { display: flex; gap: 8px; }
.mg-a11y-step {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 9px 6px; border-radius: var(--mg-radius, 12px);
border: 1px solid var(--mg-border, rgba(0,0,0,.12));
background: transparent; color: var(--mg-text-soft, #666);
font-size: 11px; font-weight: 600; cursor: pointer;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mg-a11y-step .mg-a11y-a { font-weight: 800; line-height: 1; color: var(--mg-text, #111); }
.mg-a11y-a1 { font-size: 14px; }
.mg-a11y-a2 { font-size: 17px; }
.mg-a11y-a3 { font-size: 20px; }
.mg-a11y-step.is-on {
border-color: var(--mg-primary);
background: var(--mg-primary-soft);
color: var(--mg-primary);
}
.mg-a11y-step.is-on .mg-a11y-a { color: var(--mg-primary); }
.mg-a11y-reset {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: 999px;
border: 1px solid var(--mg-border, rgba(0,0,0,.12));
background: transparent; color: var(--mg-text-soft, #666);
font-size: 12.5px; font-weight: 600; cursor: pointer;
}
[data-fontscale="lg"] .pcard-title        { font-size: 15px; }   /* 12 */
[data-fontscale="lg"] .pcard-price        { font-size: 15px; }   /* 12 */
[data-fontscale="lg"] .pcard-price-sym    { font-size: 16px; }   /* 13 */
[data-fontscale="lg"] .pcard-kcal         { font-size: 13px; }   /* ~11 */
[data-fontscale="lg"] .pd-name            { font-size: 21px; }   /* 17 */
[data-fontscale="lg"] .pd-price,
[data-fontscale="lg"] .pd-price-symbol,
[data-fontscale="lg"] .pd-price-ask       { font-size: 19px; }   /* 15 */
[data-fontscale="lg"] .pd-contents,
[data-fontscale="lg"] .pd-desc,
[data-fontscale="lg"] .pd-nutri,
[data-fontscale="lg"] .pd-opt-pill,
[data-fontscale="lg"] .pd-tag,
[data-fontscale="lg"] .pd-sec-sum,
[data-fontscale="lg"] .pd-eco-val         { font-size: 15px; }   /* 12 */
[data-fontscale="lg"] .pd-sec-title,
[data-fontscale="lg"] .pd-eco-name        { font-size: 16px; }   /* 13 */
[data-fontscale="lg"] .pd-eco-sub         { font-size: 14px; }   /* 11 */
[data-fontscale="lg"] .pd-allergens-list  { font-size: 15px; }   /* 12 */
[data-fontscale="lg"] .pd-allergens-note  { font-size: 14.5px; } /* 11.5 */
[data-fontscale="lg"] .pd-rev-text,
[data-fontscale="lg"] .pd-rev-empty       { font-size: 15px; }   /* 12 */
[data-fontscale="lg"] .pd-rev-who         { font-size: 15.5px; } /* 12.5 */
[data-fontscale="lg"] .pd-rev-date        { font-size: 13.5px; } /* 11 */
[data-fontscale="lg"] .pd-rev-done        { font-size: 15px; }   /* 12 */
[data-fontscale="lg"] .pd-rev-name,
[data-fontscale="lg"] .pd-rev-text-in     { font-size: 16px; }   /* 13 */
[data-fontscale="lg"] .mg-bill-name       { font-size: 18px; }   /* 14.5 */
[data-fontscale="lg"] .mg-bill-lines li   { font-size: 15.5px; } /* 12.5 */
[data-fontscale="xl"] .pcard-title        { font-size: 18px; }
[data-fontscale="xl"] .pcard-price        { font-size: 18px; }
[data-fontscale="xl"] .pcard-price-sym    { font-size: 19px; }
[data-fontscale="xl"] .pcard-kcal         { font-size: 16px; }
[data-fontscale="xl"] .pd-name            { font-size: 25px; }
[data-fontscale="xl"] .pd-price,
[data-fontscale="xl"] .pd-price-symbol,
[data-fontscale="xl"] .pd-price-ask       { font-size: 22px; }
[data-fontscale="xl"] .pd-contents,
[data-fontscale="xl"] .pd-desc,
[data-fontscale="xl"] .pd-nutri,
[data-fontscale="xl"] .pd-opt-pill,
[data-fontscale="xl"] .pd-tag,
[data-fontscale="xl"] .pd-sec-sum,
[data-fontscale="xl"] .pd-eco-val         { font-size: 18px; }
[data-fontscale="xl"] .pd-sec-title,
[data-fontscale="xl"] .pd-eco-name        { font-size: 19px; }
[data-fontscale="xl"] .pd-eco-sub         { font-size: 16px; }
[data-fontscale="xl"] .pd-allergens-list  { font-size: 18px; }
[data-fontscale="xl"] .pd-allergens-note  { font-size: 17px; }
[data-fontscale="xl"] .pd-rev-text,
[data-fontscale="xl"] .pd-rev-empty       { font-size: 18px; }
[data-fontscale="xl"] .pd-rev-who         { font-size: 19px; }
[data-fontscale="xl"] .pd-rev-date        { font-size: 16px; }
[data-fontscale="xl"] .pd-rev-done        { font-size: 18px; }
[data-fontscale="xl"] .pd-rev-name,
[data-fontscale="xl"] .pd-rev-text-in     { font-size: 19.5px; }
[data-fontscale="xl"] .mg-bill-name       { font-size: 21px; }
[data-fontscale="xl"] .mg-bill-lines li   { font-size: 18px; }
[data-fontscale="lg"] .pd-nutrition,
[data-fontscale="xl"] .pd-nutrition { flex-wrap: wrap; }
[data-fontscale="lg"] .pcard-title,
[data-fontscale="xl"] .pcard-title { -webkit-line-clamp: 3; }
html[data-contrast="high"] {
--mg-bg:            #ffffff;
--mg-bg-alt:        #ffffff;
--mg-surface:       #ffffff;
--mg-surface-2:     #f0f0f0;
--mg-text:          #000000;
--mg-text-soft:     #1a1a1a;
--mg-text-muted:    #333333;
--mg-border:        #000000;
--mg-primary:       #000000;
--mg-primary-base:  #000000;
--mg-primary-2:     #000000;
--mg-primary-soft:  #e6e6e6;
--mg-shadow:        none;
--mg-shadow-lg:     none;
}
html[data-contrast="high"] .pd-rev-stars,
html[data-contrast="high"] .pd-rev-avg i,
html[data-contrast="high"] .pd-rev-star.is-on {
color: var(--mg-text);
}
html[data-contrast="high"] .pd-rev-star.is-on {
background: var(--mg-surface-2);
border-color: var(--mg-text);
}
html[data-theme="dark"][data-contrast="high"] {
--mg-bg:            #000000;
--mg-bg-alt:        #000000;
--mg-surface:       #000000;
--mg-surface-2:     #1a1a1a;
--mg-text:          #ffffff;
--mg-text-soft:     #f0f0f0;
--mg-text-muted:    #dddddd;
--mg-border:        #ffffff;
--mg-primary:       #ffffff;
--mg-primary-base:  #ffffff;
--mg-primary-2:     #ffffff;
--mg-primary-soft:  #262626;
}
html[data-contrast="high"] .pcard,
html[data-contrast="high"] .mg-bs,
html[data-contrast="high"] .mg-bill-card,
html[data-contrast="high"] .mg-trk-card,
html[data-contrast="high"] .mg-a11y-step,
html[data-contrast="high"] .mg-cat { border-width: 2px; }
html[data-contrast="high"] .mg-hero-pill,
html[data-contrast="high"] .mg-status-pill,
html[data-contrast="high"] .mg-hero-closed-badge {
background: #000000;
color: #ffffff;
backdrop-filter: none;
}
html[data-contrast="high"] .mg-hero-substatus {
width: fit-content;
max-width: 100%;
background: #000000;
padding: 2px 8px;
border-radius: 6px;
}
html[data-contrast="high"] .mg-hero-overlay,
html[data-contrast="high"] .pcard-imgwrap::after { background: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.pd-tts-btn { display: none; }
html[data-tts="on"] .pd-tts-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; flex-shrink: 0;
margin-left: 6px; border: 0; border-radius: 50%;
background: var(--mg-surface-2, rgba(0,0,0,.05));
color: var(--mg-primary); font-size: 15px; cursor: pointer;
}
html[data-tts="on"] .pd-tts-btn.is-speaking {
background: var(--mg-primary); color: #fff;
}
html[data-tts="on"] .pd-tts-btn.is-novoice {
background: #c0553f; color: #fff;
}
.pd-allergens {
display: flex; flex-direction: column; gap: 3px;
padding: 2px 0; text-align: center;
}
.pd-allergens-label {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
font-size: 11px; font-weight: 700; letter-spacing: .04em;
color: var(--mg-text-muted, #999);
}
.pd-allergens-list { font-size: 12px; font-weight: 400; line-height: 1.6; color: var(--mg-text-soft, #555); }
.pd-allergens-note { font-size: 11.5px; line-height: 1.5; color: var(--mg-text-soft, #666); }
.mg-a11y-switch {
display: flex; align-items: center; gap: 11px;
width: 100%; padding: 8px 0; background: transparent; border: 0;
border-top: 1px solid var(--mg-border, rgba(0,0,0,.10));
cursor: pointer; text-align: left;
}
.mg-a11y-switch-ico {
width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: var(--mg-surface-2, rgba(0,0,0,.05));
color: var(--mg-primary); font-size: 14px;
}
.mg-a11y-switch-txt { flex: 1; min-width: 0; }
.mg-a11y-switch-name { font-size: 13px; font-weight: 700; color: var(--mg-text, #111); }
.mg-a11y-switch-sub  { font-size: 11px; color: var(--mg-text-muted, #999); margin-top: 0; line-height: 1.35; }
.mg-a11y-knob {
width: 38px; height: 22px; flex-shrink: 0; border-radius: 999px;
background: var(--mg-border, rgba(0,0,0,.20)); position: relative;
transition: background .18s ease;
}
.mg-a11y-knob::after {
content: ""; position: absolute; top: 3px; left: 3px;
width: 16px; height: 16px; border-radius: 50%;
background: #fff; transition: transform .18s ease;
}
.mg-a11y-switch.is-on .mg-a11y-knob { background: var(--mg-primary); }
.mg-a11y-switch.is-on .mg-a11y-knob::after { transform: translateX(16px); }