/* logo-menu.css — the menu starts at the logo (logo-menu.js). The square wears a slowly turning ring in the brand colours and the hint
   "Menü" with a grid of dots — bright on the first visit, calm once the menu was opened once; the first level fans out next to the logo,
   one item after the other; the full drop-down shows its columns the same way. No motion when the person asks for less.
   1.0.1: the smallest view in one line. 1.1.0 (owner 2026-10-31: far too much motion): the ring stands still, no wiggle; a name that
   does not fit whole steps back and becomes the tooltip of the logo picture (data-name-off). 1.2.0 (owner 2026-10-31): no ring and no
   frame around the logo; the hint "Menü" alone shows the way in. 1.3.0: the hint carries the burger (three lines, × when open); the
   smallest view tighter (6px gaps, smaller logo and buttons). 1.3.1: small windows keep the menus small (compact rows, two narrow columns).
   1.4.0: small → the burger alone; when the first level fits it stands in the bar and the burger becomes a slim stroke.
   Identical copy in friendly-apps-home and site.
   version: 1.18.0 · created 2026-10-31 by Pascal Ehlig, ITS · edited 2026-10-31 by Pascal Ehlig, ITS */
/* 1.4.2 (owner 2026-10-31: in the smallest view the menu looked unfolded): until logo-menu.js has run, the static menu line already steps
   back when scripts are on — no unfolded menu while the page loads; without scripts it stays as the way through the site */
@media (scripting: enabled){
  header.top:has(.brand-box[data-menu-start="logo"]) nav[data-nav],header.top:has(.brand-box[data-menu-start="logo"]) .fold-toggle,
  header.top .brand-box[data-menu-start="logo"] .brand-sub{display:none!important}
}
.lm-on header.top nav[data-nav],.lm-on header.top .fold-toggle,.lm-on header.top .brand-sub{display:none!important}

/* the square and its hint */
.lm-on header.top .brand-mark{gap:var(--s2);margin:-6px;padding:6px 10px 6px 6px;border-radius:14px;isolation:isolate}
.lm-on header.top .brand-mark::after{display:none}
.lm-on header.top .brand-mark,.lm-on header.top .brand-mark:hover,.lm-on header.top .brand-mark[aria-expanded="true"]{background:none}
.lm-on header.top .brand-mark picture{position:relative;display:block}
.lm-hint{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 7px;border-radius:999px;font-size:var(--t-small);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent-text);background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);white-space:nowrap;transition:background var(--dur),color var(--dur)}
.lm-dots{position:relative;width:12px;height:10px;flex:none;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;border-radius:1px}
.lm-on header.top .brand-mark:hover .lm-hint,.lm-on header.top .brand-mark[aria-expanded="true"] .lm-hint{background:var(--accent);color:#fff;border-color:var(--accent)}
.lm-on header.top .brand-mark[aria-expanded="true"] .lm-dots{background:none;position:relative}
.lm-on header.top .brand-mark[aria-expanded="true"] .lm-dots::before,.lm-on header.top .brand-mark[aria-expanded="true"] .lm-dots::after{content:"";position:absolute;
  left:5px;top:-2px;width:2px;height:14px;background:currentColor;border-radius:1px;transform:rotate(45deg)}
.lm-on header.top .brand-mark[aria-expanded="true"] .lm-dots::after{transform:rotate(-45deg)}

/* shared look of the levels */
.lm-list{display:flex;margin:0;padding:0;list-style:none}
.lm-list>li{position:relative;animation:lm-in .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
.lm-link{display:flex;align-items:center;gap:var(--s2);min-height:40px;padding:0 var(--s3);border:0;border-radius:8px;background:none;
  color:var(--text);font:inherit;font-size:var(--t-base);text-decoration:none;white-space:nowrap;cursor:pointer;text-align:start}
.lm-link:hover{background:var(--sunken)}
.lm-link:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.lm-link[aria-current="page"],.lm-link[aria-current="location"]{font-weight:700;box-shadow:inset 0 -2px 0 var(--line)}
.lm-link .icon{flex:none;width:20px;height:20px;color:var(--muted)}
.lm-link[aria-current="page"] .icon,.lm-link[aria-current="location"] .icon{color:var(--accent)}
.lm-group::after{content:"";width:6px;height:6px;margin-left:2px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);
  opacity:.6;transition:transform var(--dur)}
.lm-group[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.lm-group[aria-expanded="false"]+.lm-list{display:none}
.lm-tag{padding:0 7px;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--warn-bg,#fff4d6);color:var(--warn,#8a5a00)}
@keyframes lm-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* row: the first level next to the logo, the second under its group; the parent's name steps aside while it is open */
.lm-row-open header.top .brand-root,.lm-row-open header.top .brand-sep{display:none}
.lm-row{flex:1 1 0;min-width:0;overflow:hidden;padding-inline:var(--s2)}
.lm-row.lm-fit{overflow:visible}
.lm-row.lm-compact .lm-depth-1>li>.lm-link>.icon{display:none}.lm-row.lm-compact .lm-depth-1>li>.lm-link{padding-inline:var(--s2)}
.lm-row>.lm-list{gap:2px;width:max-content}
.lm-row .lm-depth-1>li>.lm-link{font-size:var(--t-small);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.lm-row .lm-depth-1>li>.lm-link:hover,.lm-row .lm-depth-1>li>.lm-link[aria-current="page"],.lm-row .lm-depth-1>li>.lm-link[aria-current="location"],.lm-row .lm-depth-1>li>.lm-group[aria-expanded="true"]{color:var(--text)}
.lm-row .lm-depth-2,.lm-drop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;flex-direction:column;min-width:13rem;padding:var(--s1);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 10px 30px #00000030}
.lm-row .lm-depth-2>li,.lm-drop li{animation-name:lm-down}
.lm-row .lm-depth-3,.lm-drop .lm-list .lm-list{position:static;flex-direction:column;padding-left:var(--s4);border:0;box-shadow:none}
@keyframes lm-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* drop: the first level as a list under the logo */
.lm-drop{left:-6px}.lm-drop>.lm-list{flex-direction:column}

/* mega: the full drop-down under the header, the columns one after the other */
.lm-mega{position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--surface);border-bottom:1px solid var(--border);
  box-shadow:0 18px 40px #0000002a;max-height:calc(100dvh - 72px);overflow:auto;animation:lm-open .24s ease-out}   /* no fill: a kept transform would hold the fixed × inside */
/* 1.4.1 (owner 2026-10-31): the columns as wide as their content; what does not fit side by side goes below */
.lm-mega-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s4) var(--s6);padding-block:var(--s5) var(--s6)}
.lm-col{flex:0 0 auto;min-width:min(100%,12rem);max-width:100%;animation:lm-down .3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
.lm-col>h2{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s2);padding:0 var(--s3) var(--s2);font-size:var(--t-small);
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:2px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.lm-col>h2 .icon{width:18px;height:18px;color:var(--accent)}
.lm-col .lm-list{flex-direction:column}
.lm-col .lm-list .lm-list{padding-left:var(--s4)}
header.top .lm-mega .lm-mega-grid{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start}
@keyframes lm-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* phone: the hint keeps its dots; the breadcrumb already steps back (nav.css) */
/* the smallest view (owner 2026-10-31): one line — logo with "Menü", the name (shortened visibly), language, the account as its initials */
@media (max-width:34rem){
  .lm-mega-grid{gap:var(--s4) var(--s5);padding-block:var(--s3) var(--s4)}.lm-col{min-width:min(100%,9rem)}
  .lm-mega{max-height:min(70dvh,520px)}
  .lm-link{min-height:34px;padding:0 var(--s2);font-size:.9rem;gap:6px}.lm-link .icon{width:17px;height:17px}
  .lm-col>h2{font-size:.68rem;margin-bottom:4px;padding:0 var(--s2) 4px}.lm-col>h2 .icon{width:15px;height:15px}
  .lm-drop,.lm-row .lm-depth-2{min-width:11rem}
  .lm-on header.top .wrap{flex-wrap:nowrap;column-gap:6px;padding-block:6px;padding-inline:10px}
  .lm-on header.top .brand-box{flex:1 1 auto;min-width:0;max-width:none;gap:6px}
  .lm-on header.top .brand-mark{gap:5px;margin:0;padding:2px}
  .lm-on header.top .brand-mark picture img{width:28px}
  .lm-hint{gap:5px;padding:2px 8px 2px 6px;font-size:.72rem}
  .lm-on header.top .brand{flex:0 1 auto;min-width:0;max-width:none;overflow:hidden;font-size:.95rem}
  .lm-on header.top .brand>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lm-on header.top .lang-menu .lang-current{min-width:40px;min-height:40px;padding:0 8px}
  .lm-on header.top .dock-account{flex:none;max-width:none}
  .lm-on header.top .dock-account .gw-dock-name,.lm-on header.top .dock-account .gw-dock-caret{display:none}
  .lm-on header.top .dock-account .gw-dock-account{padding:1px;min-width:0;min-height:40px;gap:0}
}
@media (max-width:34rem){.lm-on header.top .brand-mark .lm-word{display:none}.lm-hint{padding:5px 6px}}
.fold-on header.top[data-folded] .lm-hint{padding-block:1px}
@media (prefers-reduced-motion:reduce){
  .lm-hint,.lm-list>li,.lm-col,.lm-mega{animation:none!important}
}
.brand-box[data-name-off] .brand,.brand-box[data-name-off] .brand-root,.brand-box[data-name-off] .brand-sep{display:none!important}
/* 1.4.0 (owner 2026-10-31): the first level stands in the bar when it fits — the burger steps back for a slim stroke in the logo's colours */
.lm-pinned:not(.lm-pin-hidden) header.top .lm-hint{width:3px;height:22px;padding:0;border:0;border-radius:2px;gap:0;background:linear-gradient(180deg,var(--accent),#c8dfe9)}
.lm-pinned:not(.lm-pin-hidden) header.top .lm-hint>*{display:none}
.lm-pinned:not(.lm-pin-hidden) header.top .brand-mark:hover .lm-hint,.lm-pinned:not(.lm-pin-hidden) header.top .brand-mark[aria-expanded="true"] .lm-hint{background:linear-gradient(180deg,var(--accent),var(--accent))}
.lm-row.lm-pin>.lm-list>li{animation-duration:.4s}
.lm-pinned header.top .brand-root,.lm-pinned header.top .brand-sep{display:none}
.lm-on header.top .lm-mega .lm-mega-grid{flex-wrap:wrap;padding-inline:var(--s4)}   /* it carries .wrap: the bar's nowrap must not reach it */
/* 1.5.0 (owner 2026-10-31): the open menu's own close button — top right in the drop-down and the full menu, at the end of the row */
.lm-close{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--surface);
  color:var(--muted);cursor:pointer;flex:none}
.lm-close .icon{width:18px;height:18px}
.lm-close:hover{color:var(--text);background:var(--sunken)}
.lm-close:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lm-mega>.lm-close,.lm-drop>.lm-close{position:absolute;top:8px;right:max(12px,calc((100% - 68rem) / 2 + 12px))}
.lm-drop>.lm-close{right:6px;top:6px;width:30px;height:30px}
.lm-drop{padding-top:40px}
.lm-row{display:flex;align-items:center;gap:var(--s2)}
.lm-row>.lm-close{width:30px;height:30px}
.lm-row.lm-pin>.lm-close{display:none}
.lm-mega{padding-top:4px}
.lm-on header.top .lm-mega .lm-mega-grid{padding-right:56px}
/* 1.5.1 (owner 2026-10-31: always the place that makes most sense to the person and is easiest to reach in the space there is): on a small
   touch screen the open menu's × sits in the thumb zone, bottom right — where Lleu's × sits too */
@media (max-width:600px),(pointer:coarse) and (max-width:900px){
  .lm-mega>.lm-close,.lm-drop>.lm-close{position:fixed;top:auto;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
    z-index:70;width:52px;height:52px;border:0;background:var(--action);color:var(--on-action);box-shadow:0 10px 28px rgb(16 42 67 / .25)}
  .lm-mega>.lm-close .icon,.lm-drop>.lm-close .icon{width:22px;height:22px}
  .lm-on header.top .lm-mega .lm-mega-grid{padding-right:var(--s4)}
}
/* 1.6.0 (owner 2026-10-31): the drop-down as cards — brand with its logo, the groups, languages, account; one opening movement only */
.lm-mega{container-type:inline-size;animation:none}
.lm-mega .lm-col,.lm-mega .lm-list>li{animation:none!important}
.lm-col>h2 .lm-logo,.lm-col>h2 .lm-logo img{width:20px;height:auto;display:block}
.lm-meta{cursor:default;color:var(--muted)}
.lm-langs [aria-current="true"]{font-weight:700;color:var(--accent)}
@container (min-width:46rem){
  .lm-on header.top .lm-mega .lm-mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:14px;align-items:stretch}
  .lm-mega .lm-card{min-width:0;padding:14px 14px 10px}   /* the look: card.css */
  .lm-mega .lm-card>h2{font-size:1rem;text-transform:none;letter-spacing:0;color:var(--text);padding:0 4px 10px;margin:0 0 6px;border-bottom:1px solid var(--border)}
  .lm-mega .lm-card>h2 .icon{width:24px;height:24px}
  .lm-mega .lm-card>h2 .lm-logo,.lm-mega .lm-card>h2 .lm-logo img{width:28px}
  .lm-mega .lm-card .lm-link{min-height:40px;flex-wrap:wrap;row-gap:2px;max-width:100%}
}
/* 1.9.0: a page with entries of its own — in the bar link + small opener, in a card the entries indented below it */
.lm-split{display:flex;align-items:center}
.lm-opener{padding-inline:6px;min-width:28px}.lm-opener::after{margin-left:0}
.lm-split>.lm-opener+.lm-list{position:absolute;top:calc(100% + 6px);left:0}
.lm-under{flex-direction:column;padding-left:var(--s5)}
.lm-under .lm-link{min-height:34px;font-size:.92em}
/* 1.10.0: the brand is Home — its opener sits right after the name; the brand card's title leads home */
.lm-brand-open{margin-left:calc(-1 * var(--s2))}
.lm-card-home{color:inherit;text-decoration:none}.lm-card-home:hover{text-decoration:underline}
.lm-card-home[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
/* 1.15.0 (owner 2026-11-01): a visible hint that logo and name open a menu — a small chevron after the name (turned while it is open) */
.lm-on header.top a.brand{display:inline-flex;align-items:center;gap:6px}
.lm-on header.top a.brand::after{content:"";flex:none;width:7px;height:7px;margin-top:-3px;border:solid currentColor;border-width:0 2px 2px 0;
  transform:rotate(45deg);opacity:.7;transition:transform var(--dur),margin var(--dur),opacity var(--dur)}
.lm-on header.top a.brand:hover::after{opacity:1;color:var(--accent)}
[data-lm-open] header.top a.brand::after{transform:rotate(-135deg);margin-top:3px;opacity:1;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.lm-on header.top a.brand::after{transition:none}}
/* 1.18.0 (owner 2026-11-01: menus stay understandable — where two are open, both stay usable): while π is open at the bottom, the logo
   menu's × leaves the thumb corner and sits at the top of its own panel */
@media (max-width:34rem),(pointer:coarse) and (max-width:48rem){
  html:has(details[data-gwydion-pi][open]) .lm-mega>.lm-close,html:has(details[data-gwydion-pi][open]) .lm-drop>.lm-close{position:absolute;top:8px;bottom:auto;right:12px}
}