/* dft.hu – the phone's app shell (design_handoff_mobil_app, direction C „Csempedokk”). Everything visible is scoped to
   below 1024 px; the desktop does not change. One bottom layer (the dock: tabs or the page's action · call · menu), the top
   bar (logo or back + share, compact title), bottom sheets, the form bar, the toast, page transitions. Also loaded by the
   static Pályázatok page (public/palyazatok/index.html). Behaviour: public/js/app-shell.js. Markup: src/components/app/. */

/* tokens: the handoff's --f --h --a --o --p --i --m --r --k1, one set per palette (Gyümölcs = the barack room) */
:root { --ma-f: #7A3A1C; --ma-h: #B1542D; --ma-a: #F0A050; --ma-o: #FBDDB7; --ma-p: #FCF4EB; --ma-i: #4A2A18; --ma-m: #8C6A57; --ma-r: #DEC6B2; --ma-k1: #F0A050; --ma-dot: #FFFFFF;
  --ma-e: cubic-bezier(.2, .8, .2, 1); --ma-dock-h: 60px; --ma-dock-b: calc(env(safe-area-inset-bottom, 0px) + 6px); }
:root[data-palette="zold"] { --ma-f: #00432D; --ma-h: #006745; --ma-a: #A6DEC0; --ma-o: #E6F4EC; --ma-p: #F7F5F0; --ma-i: #15201A; --ma-m: #5E6762; --ma-r: #B9C2BC; --ma-k1: #57BB8A; --ma-dot: #F2C14E; }

/* pixel icons (src/components/app/app-icons.ts): active tones · inactive grey-greens · white glyph on a dark tile */
.ai-1 { fill: var(--ma-a); } .ai-2 { fill: var(--ma-h); } .ai-3 { fill: var(--ma-f); } .ai-d { fill: var(--ma-dot); }
.ag-l { fill: var(--ma-a); } .ag-k { fill: var(--ma-k1); }

.atb, .app-dock, .app-formbar, .app-toast { display: none; }

/* ── Továbbiak (also the /tovabbiak/ page on every width) ── */
.am { display: flex; flex-direction: column; gap: 10px; font-family: var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); color: var(--ma-i); }
.am-h { margin: 14px 4px 0; font: 700 12.5px/1 var(--fm, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--ma-h); }
.am-h--on { margin: 0 0 4px; color: var(--ma-a); }
.am-list { display: flex; flex-direction: column; background: #FFFFFF; border-radius: 26px 26px 26px 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.am-row { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 9px 14px; color: var(--ma-f); text-decoration: none; font: 600 17px/1.2 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 120ms, transform 120ms; }
.am-row + .am-row { box-shadow: inset 0 1px 0 rgba(0,0,0,.06); }
a.am-row:hover { background: color-mix(in srgb, var(--ma-o) 55%, #FFFFFF); }
a.am-row:active { background: var(--ma-o); transform: scale(.985); }
.am-row:focus-visible, .am a:focus-visible, .am-seg label:has(input:focus-visible) { outline: 3px solid var(--ma-h); outline-offset: -3px; }
.am-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px 13px 13px 4px; background: var(--ma-o); }
.am-ic svg { width: 26px; height: 26px; }
.am-row--hl .am-ic { background: var(--ma-h); }
.am-row--hl .am-ic .ai-1 { fill: rgba(255,255,255,.35); } .am-row--hl .am-ic .ai-2 { fill: rgba(255,255,255,.7); } .am-row--hl .am-ic .ai-3 { fill: #FFFFFF; } .am-row--hl .am-ic .ai-d { fill: var(--ma-k1); }
.am-ic--call { background: var(--ma-k1); } .am-ic--call svg { width: 22px; height: 22px; } .am-ic--call path { fill: var(--ma-f); }
.am-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.am-sub { font: 500 14px/1.3 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); color: var(--ma-m); }
.am-chev { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ma-r); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.am-row--set { cursor: default; }
.am-seg { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 16px 16px 16px 5px; background: var(--ma-o); }
.am-seg a, .am-seg label { min-width: 44px; min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 13px 13px 13px 4px; font: 700 15px/1 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); color: var(--ma-f); text-decoration: none; cursor: pointer; }
.am-seg a[aria-current], .am-seg label:has(input:checked) { background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.am-sw { width: 14px; height: 14px; border-radius: 50%; } .am-sw--z { background: #006745; } .am-sw--g { background: #B1542D; }
.am-call { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; margin-top: 6px; border-radius: 28px 28px 28px 8px; background: var(--ma-f); color: #FFFFFF; }
.am-call__r { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; color: #FFFFFF; text-decoration: none; }
.am-call__r > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.am-call__r b { font: 800 21px/1.1 var(--fd, -apple-system, BlinkMacSystemFont, Inter, sans-serif); letter-spacing: -.01em; }
.am-call__r > span:first-child span { font: 500 14px/1.3 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); color: rgba(255,255,255,.75); }
.am-call__tile { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 18px 6px 18px 18px; background: var(--ma-k1); transition: transform 120ms; }
.am-call__tile svg { width: 22px; height: 22px; } .am-call__tile path { fill: var(--ma-f); }
.am-call__r:active .am-call__tile { transform: scale(.92); }
.am-call__mail { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; font: 600 16px/1.2 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.am-legal { display: flex; flex-wrap: wrap; gap: 0 18px; padding: 0 4px; }
.am-legal a { min-height: 44px; display: inline-flex; align-items: center; font: 500 15px/1.3 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); color: var(--ma-i); text-decoration: none; }
.am-legal a:hover { color: var(--ma-h); }
.am-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 4px 8px; margin-top: 8px; border-top: 1px solid rgba(0,0,0,.08); }
.am-foot img { height: 30px; width: auto; }
.am-foot__m { font: 200 22px/1 "DFT Slogan", Poppins, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--ma-f); }
.am-foot__c { font: 500 13px/1.5 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); color: var(--ma-m); }
.am-foot__s { display: flex; flex-wrap: wrap; gap: 0 16px; }
.am-foot__s a { min-height: 44px; display: inline-flex; align-items: center; font: 600 14px/1 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); color: var(--ma-f); }
/* the /tovabbiak/ page itself */
.am-page { max-width: 560px; width: 100%; margin: 0 auto; }
.am-page h1 { margin: 0 4px 12px; font: 800 clamp(36px, 9vw, 48px)/1 var(--fd, -apple-system, BlinkMacSystemFont, Inter, sans-serif); letter-spacing: -.04em; color: var(--ma-f); }

/* ── bottom sheets (<dialog>, opened by app-shell.js) ── */
.app-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; margin: 0 auto; padding: 0; border: 0; border-radius: 30px 30px 0 0; background: var(--ma-p); color: var(--ma-i); overflow: hidden; overscroll-behavior: contain; }
.app-sheet--full { height: calc(100dvh - env(safe-area-inset-top, 0px) - 10px); max-height: none; }
.app-sheet::backdrop { background: rgba(21,32,26,.42); }
.app-sheet[open] { display: flex; animation: ma-sheet 360ms var(--ma-e); }
.app-sheet.is-closing { animation: ma-sheet-out 220ms ease-in forwards; }
.app-sheet.is-flung { animation: none; }   /* swiped away: the spring in app-shell.js moves it, the scrim fades */
.app-sheet.is-flung::backdrop { animation: ma-fade-out 300ms ease-out forwards; }
@keyframes ma-fade-out { to { opacity: 0; } }
.app-sheet__in { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.app-sheet__hd { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 22px 12px 10px 20px; touch-action: none; }
.app-sheet__grab { position: absolute; left: 50%; top: 8px; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--ma-r); }
.app-sheet__t { flex: 1 1 auto; margin: 0; font: 800 22px/1.15 var(--fd, -apple-system, BlinkMacSystemFont, Inter, sans-serif); letter-spacing: -.02em; color: var(--ma-f); }
.app-sheet__x { flex: none; min-width: 44px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px 22px 22px 7px; background: #FFFFFF; color: var(--ma-f); font: 700 15px/1 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.app-sheet__x:active { transform: scale(.95); }
.app-sheet__x:focus-visible { outline: 3px solid var(--ma-h); outline-offset: 2px; }
.app-sheet__bd { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px calc(env(safe-area-inset-bottom, 0px) + 20px); }
@keyframes ma-sheet { from { transform: translateY(100%); } }
@keyframes ma-sheet-out { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .app-sheet[open], .app-sheet.is-closing { animation: none; } }

@media (max-width: 1023px) {
  /* the top bar replaces the „1c Csempék” tiles; .hdwrap stays the sticky container every room already positions */
  .hdwrap:has(> .atb) { position: sticky !important; top: 0 !important; z-index: 50 !important; padding: env(safe-area-inset-top, 0px) 0 0 !important; background: none !important; box-shadow: none !important; clip-path: none !important; view-transition-name: app-top; }
  .hdwrap:has(> .atb)::before { content: none !important; }
  .hdwrap:has(> .atb) > .hd, .hdwrap:has(> .atb) > .mnav { display: none !important; }
  .atb { position: relative; display: flex; align-items: center; gap: 8px; height: 56px; isolation: isolate; }
  /* the paper behind the bar: transparent at the top, .96 after 24 px of scroll, the hairline within the first 8 (--atb-p,
     moved 1:1 by fluid.js; full bleed with box-shadow + clip-path, so it never widens the page) */
  .atb::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: var(--page, var(--canvas, #F7F5F0));
    box-shadow: 0 0 0 100vmax var(--page, var(--canvas, #F7F5F0)); clip-path: inset(calc(-1 * env(safe-area-inset-top, 0px) - 1px) -100vmax 0); opacity: calc(.96 * var(--atb-p, 0)); }
  .atb::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(0,0,0,.07); box-shadow: 0 0 0 100vmax rgba(0,0,0,.07); clip-path: inset(0 -100vmax); opacity: calc(3 * var(--atb-p, 0)); pointer-events: none; }
  .atb__logo, .atb__back, .atb__share { flex: none; display: inline-flex; align-items: center; height: 46px; background: #FFFFFF; border-radius: 22px 22px 22px 7px; box-shadow: 0 1px 0 rgba(0,0,0,.05), inset 0 0 0 1px rgba(0,0,0,.05);
    color: var(--ma-f); text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 120ms; }
  .atb__logo { padding: 0 14px; } .atb__logo img { display: block; height: 22px; width: auto; }
  .atb__back { gap: 2px; max-width: 168px; padding: 0 14px 0 8px; font: 700 16px/1 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); }
  .atb__back span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .atb__back svg, .atb__share svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .atb__share { justify-content: center; width: 46px; margin-left: auto; padding: 0; border: 0; border-radius: 22px 7px 22px 22px; cursor: pointer; }
  .atb__t + .atb__share { margin-left: 0; }
  html:not(.js) .atb__share { display: none; }
  :is(.atb__logo, .atb__back, .atb__share):active { transform: scale(.95); }
  :is(.atb__logo, .atb__back, .atb__share):focus-visible { outline: 3px solid var(--ma-h); outline-offset: 2px; }
  /* the compact title: between the left tile and share, fading in with a 6 px rise as the page's h1 goes under the bar (--atb-t, fluid.js) */
  .atb__t { flex: 1 1 auto; min-width: 0; padding: 0 4px; transform: translateY(calc(6px * (1 - var(--atb-t, 0)))); opacity: var(--atb-t, 0); pointer-events: none;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 17px/1.2 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); color: var(--ma-f); }
  .atb__prog { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: rgba(0,0,0,.06); overflow: hidden; }
  .atb__prog i { display: block; height: 100%; background: var(--ma-h); transform-origin: 0 50%; transform: scaleX(var(--app-read, 0)); }
  .ar__mprog { display: none !important; }   /* the article's own top line: the bar carries it now */

  /* ── the dock ── */
  .app-dock { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: var(--ma-dock-b); display: flex; gap: 6px; max-width: 560px; margin: 0 auto; view-transition-name: app-dock;
    font-family: var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); transition: transform 280ms var(--ma-e); }
  .app-dock__wide { flex: 1 1 auto; min-width: 0; display: flex; height: var(--ma-dock-h); background: #FFFFFF; border-radius: 26px 26px 26px 8px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 12px 28px -14px rgba(0,30,20,.55); transition: background-color 280ms var(--ma-e); }
  .app-dock__tabs { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; }
  .app-dock__tabs a { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 2px; border-radius: 21px 21px 21px 6px; color: var(--ma-m);
    text-decoration: none; text-align: center; font: 600 12px/1.05 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); hyphens: manual; overflow-wrap: break-word; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 120ms, background-color 120ms; }
  .app-dock__tabs svg { flex: none; width: 24px; height: 24px; }
  .app-dock__tabs a:not([aria-current]) .ai-1 { fill: #DDE3DF; } .app-dock__tabs a:not([aria-current]) .ai-2 { fill: #AEB8B2; } .app-dock__tabs a:not([aria-current]) .ai-3 { fill: #7C8781; } .app-dock__tabs a:not([aria-current]) .ai-d { fill: #FFFFFF; }
  .app-dock__tabs a[aria-current] { background: var(--ma-o); color: var(--ma-f); font-weight: 700; }
  .app-dock__tabs a:active { transform: scale(.92); background: rgba(0,0,0,.07); }
  .app-dock__tabs a[aria-current]:active { background: var(--ma-o); }
  .app-dock__tabs a:focus-visible { outline: 3px solid var(--ma-h); outline-offset: -3px; }
  .app-dock__action { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: inherit; color: #FFFFFF; text-decoration: none;
    font: 700 17px/1.1 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); text-align: center; animation: ma-swap 280ms var(--ma-e); -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 120ms; }
  .app-dock__action:active { transform: scale(.97); }
  .app-dock__action:focus-visible { outline: 3px solid var(--ma-f); outline-offset: 3px; }
  .app-dock[data-state="action"] .app-dock__wide { background: var(--ma-h); }
  .app-dock__call, .app-dock__menu { flex: none; width: var(--ma-dock-h); height: var(--ma-dock-h); display: grid; place-items: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: transform 120ms; box-shadow: 0 12px 28px -14px rgba(0,30,20,.55); }
  .app-dock__call { background: var(--ma-k1); border-radius: 26px 8px 26px 26px; }
  .app-dock__call path { fill: var(--ma-f); }
  .app-dock__menu { background: var(--ma-f); border-radius: 8px 26px 26px 26px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 12px 28px -14px rgba(0,30,20,.55); }   /* the ring keeps it visible over the dark tickets */
  .app-dock__call svg, .app-dock__menu svg { width: 28px; height: 28px; }
  .app-dock__call:active, .app-dock__menu:active { transform: scale(.92); }
  .app-dock__call:focus-visible, .app-dock__menu:focus-visible { outline: 3px solid var(--ma-h); outline-offset: 3px; }
  .app-dock__menu[aria-expanded="true"] { outline: 3px solid var(--ma-a); outline-offset: 2px; }
  /* compact: scrolling down – 60 → 48 px, icons only (the labels stay for screen readers). Continuous, not a state: each
     part (the pill, each key, call, menu) has its own --p, 0 = full … 1 = compact, set per frame by app-shell.js – it
     follows the scroll 1:1, then settles on a spring (a little past 1 or 0 is the bounce). Without JS --p is 0. */
  .app-dock__wide, .app-dock__call, .app-dock__menu { --dh: calc(var(--ma-dock-h) - 12px * var(--p, 0)); }
  .app-dock__wide { height: var(--dh); }
  .app-dock__call, .app-dock__menu { width: var(--dh); height: var(--dh); }
  .app-dock__tabs a { gap: calc(3px * (1 - var(--p, 0))); }
  .app-dock__tabs svg { width: calc(24px + 2px * var(--p, 0)); height: calc(24px + 2px * var(--p, 0)); }
  .app-dock__tabs span { display: block; max-height: calc(2.2em * (1 - var(--p, 0))); overflow: hidden; opacity: calc(1 - 1.8 * var(--p, 0)); }
  /* the keyboard is open: the dock steps aside (on forms the form bar takes its place) */
  .app-dock[data-state="hidden"], .app-dock[data-state="form"] { transform: translateY(calc(100% + var(--ma-dock-b) + 12px)); pointer-events: none; }
  html.app-kb .demo-ab { display: none; }

  /* the reserved space: the dock never covers the end of a page, and never shifts it (CSS, not JS) */
  body:has(> .app-dock) { padding-bottom: calc(var(--ma-dock-b) + 60px + 28px); }

  /* the form bar: the submit button rides above the keyboard (bottom follows visualViewport, app-shell.js) */
  .app-formbar:not([hidden]) { display: flex; position: fixed; z-index: 75; left: 0; right: 0; bottom: var(--app-kb, 0px); padding: 8px 12px calc(8px + var(--app-kb-safe, env(safe-area-inset-bottom, 0px)));
    background: #FFFFFF; box-shadow: 0 -1px 0 rgba(0,0,0,.08); animation: ma-swap 240ms var(--ma-e); }
  .app-formbar button { flex: 1 1 auto; min-height: 54px; border: 0; border-radius: 27px 27px 27px 8px; background: var(--ma-h); color: #FFFFFF; font: 700 17px/1 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); cursor: pointer; touch-action: manipulation; transition: transform 120ms; }
  .app-formbar button:active { transform: scale(.98); }
  .app-formbar button:focus-visible { outline: 3px solid var(--ma-f); outline-offset: 2px; }

  /* the toast: 14 px above the dock */
  .app-toast { display: block; position: fixed; z-index: 90; left: 50%; bottom: calc(var(--ma-dock-b) + var(--ma-dock-h) + 14px); transform: translate(-50%, 14px) scale(.96); opacity: 0; visibility: hidden; pointer-events: none;
    max-width: calc(100vw - 48px); padding: 13px 20px; border-radius: 22px 22px 22px 7px; background: var(--ma-i); color: #FFFFFF; font: 600 15px/1.3 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); white-space: nowrap;
    transition: transform 240ms var(--ma-e), opacity 240ms, visibility 0s 240ms; }
  .app-toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform 240ms var(--ma-e), opacity 240ms, visibility 0s; }

  /* the page bars the dock replaces: one bottom layer, never two */
  .f8-mbar, .f8-fab, .es-mbar, .es-fab, .po-mbar, .po-fab, .kp-call, .ms-bar, .esd-bar { display: none !important; }
  body[data-frame="esb"] .pg, .pg:has(.kp) { padding-bottom: 40px; }
  /* the cookie banner sits above the dock, like a sheet, never as a second bar under it */
  .ck-bn { bottom: calc(var(--ma-dock-b) + var(--ma-dock-h) + 10px) !important; left: 12px !important; right: 12px !important; border-radius: 26px 26px 26px 8px; }
  .ck-toast { bottom: calc(var(--ma-dock-b) + var(--ma-dock-h) + 10px) !important; }
  .demo-ab { bottom: calc(var(--ma-dock-b) + var(--ma-dock-h) + 12px) !important; left: 12px !important; right: auto !important; }

  /* the footer: the link columns live in Továbbiak; the slogan block and the legal line stay */
  .ft__col, .ft__legal, .ftc__col, .ftc__l { display: none !important; }
}
@media (max-width: 1023px) and (min-width: 768px) { .app-dock { left: 0; right: 0; width: min(560px, calc(100% - 24px)); } }
@media (max-width: 1023px) and (orientation: landscape) { .app-dock { left: 0; right: 0; width: min(560px, calc(100% - 24px)); } }
@keyframes ma-swap { from { transform: translateY(60%); } }

/* page transitions (cross-document View Transitions): push into a page, pop back, a short rise between tabs; never a
   cross-fade (images are never faded); the dock and the top bar stay put */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: none; }
  html[data-nav="push"]::view-transition-new(root) { animation: ma-push 380ms var(--ma-e); }
  html[data-nav="pop"]::view-transition-new(root) { animation: ma-pop 320ms var(--ma-e); }
  html[data-nav="tab"]::view-transition-new(root) { animation: ma-tab 240ms var(--ma-e); }
  html:not([data-nav])::view-transition-new(root) { animation: none; }
  ::view-transition-old(app-dock), ::view-transition-new(app-dock), ::view-transition-old(app-top), ::view-transition-new(app-top) { animation: none; }
  ::view-transition-old(app-dock), ::view-transition-old(app-top) { display: none; }
}
@keyframes ma-push { from { transform: translateX(100%); } }
@keyframes ma-pop { from { transform: translateX(-26%); } }
@keyframes ma-tab { from { transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .app-dock, .app-dock *, .atb, .atb *, .app-toast, .app-formbar { transition: none !important; animation: none !important; } }
/* the install hint's sheet */
.am-inst { display: flex; flex-direction: column; gap: 12px; padding: 0 8px; font: 500 16px/1.45 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); color: var(--ma-i); }
.am-inst p { margin: 0; }
.am-inst__b { display: flex; gap: 8px; margin-top: 6px; }
.am-inst__b button { flex: 1 1 auto; min-height: 52px; border: 0; border-radius: 26px 26px 26px 8px; font: 700 16px/1 var(--ft, -apple-system, BlinkMacSystemFont, Inter, sans-serif); cursor: pointer; }
.am-inst__go { background: var(--ma-h); color: #FFFFFF; } .am-inst__no { background: #FFFFFF; color: var(--ma-f); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.am-inst__b button[hidden] { display: none; }
/* the font setting (Beállítások › Betűtípus): only where the preview site's font switch runs; it replaces the floating pill on phones */
.am-row[hidden] { display: none; }
.am-seg__pop { font-family: Poppins, sans-serif !important; }
@media (max-width: 1023px) { .betu { display: none !important; } }