/* user-nav.css — the user navigation inside the account menu (user-nav.js 1.0.0): sections with small heads, choices as pressed rows.
   1.4.0: development preview (gw-soon and the example workshop hidden unless data-gw-preview="on") and the „neu“ mark.
   version: 1.4.0 · created 2026-11-01 by Pascal Ehlig, ITS · edited 2026-11-02 by Pascal Ehlig, ITS */
html.gw-user-nav-on header.top .fa-theme-btn,html.gw-user-nav-on header.top .lang-menu{display:none!important}
.gw-user-nav{display:flex;flex-direction:column;gap:4px;min-width:min(300px,calc(100vw - 32px));padding:4px 0 8px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.gw-un-head{margin:8px 4px 2px;font:600 .72rem/1 system-ui;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#486581)}
.gw-un-seg{display:flex;gap:2px;padding:2px;border-radius:12px;background:color-mix(in srgb,var(--muted,#486581) 12%,transparent)}
.gw-un-seg button{flex:1 1 0;min-height:40px;padding:0 8px;border:0;border-radius:10px;background:transparent;color:var(--text,#102a43);font:500 .85rem/1.2 inherit;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw-un-seg button[aria-pressed="true"]{background:var(--surface,#fff);color:var(--accent,#fb683e);font-weight:700;box-shadow:0 1px 3px rgb(16 42 67 / .15)}
.gw-un-size{display:flex;align-items:center;gap:6px}.gw-un-size>span{flex:1}
.gw-un-size button{min-width:40px;min-height:40px;border:1px solid var(--border);border-radius:10px;background:var(--surface,#fff);color:var(--text,#102a43);font:600 1rem/1 inherit;cursor:pointer}
.gw-un-size .gw-un-reset{font-size:.8rem;padding:0 8px}.gw-un-size output{min-width:3.4em;text-align:center;font-variant-numeric:tabular-nums}
.gw-un-check{display:flex;align-items:center;gap:8px;min-height:40px;font-size:.9rem;cursor:pointer}.gw-un-check input{width:20px;height:20px;accent-color:var(--accent,#fb683e)}
.gw-un-link{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 6px;border-radius:10px;color:var(--text,#102a43);text-decoration:none}
.gw-un-link:hover,.gw-un-link:focus-visible{background:color-mix(in srgb,var(--accent,#fb683e) 12%,transparent);outline:none}
.gw-un-sign{width:22px;text-align:center}.gw-un-planned{color:var(--muted,#486581)}.gw-un-planned small{margin-left:auto;font-size:.72rem}
.gw-un-seg button:focus-visible,.gw-un-size button:focus-visible{outline:3px solid var(--accent,#fb683e);outline-offset:1px}
@media (forced-colors:active){.gw-un-seg button[aria-pressed="true"]{outline:2px solid Highlight}}
.gw-un-seg{flex-wrap:wrap}.gw-un-seg button{flex:1 1 30%}
.gw-un-fb{width:100%;border:0;background:transparent;font:inherit;cursor:pointer;text-align:left}
/* 1.3.0 (wishes 32d170, 044c29, bc26e1: the account menu on iPhone and iPad — not a long list falling down, but compact settings as in 2026):
   on phones and tablets it opens as a sheet from the bottom (on the iPad a sheet in the middle), the page dimmed behind it — a tap there
   closes it; the settings are grouped like iOS Settings: a small head, below it one rounded group, switches instead of check boxes */
@media (max-width:600px),(pointer:coarse) and (max-width:1366px){
  header.top details[data-gwydion-account][open]>summary::after{content:"";position:fixed;inset:0;z-index:2147479990;background:rgb(16 42 67 / .32);cursor:default}
  header.top details[data-gwydion-account][open]>.gw-dock-menu{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;z-index:2147479999!important;
    width:auto!important;max-width:none!important;max-height:84vh;overflow:auto;overscroll-behavior:contain;box-sizing:border-box;margin:0!important;
    padding:22px 16px calc(16px + env(safe-area-inset-bottom))!important;border:0!important;border-radius:18px 18px 0 0!important;background:var(--surface,#fff)!important;
    box-shadow:0 -14px 40px rgb(16 42 67 / .28)!important;animation:gw-un-up .22s ease-out}
  header.top details[data-gwydion-account][open]>.gw-dock-menu::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:color-mix(in srgb,var(--text,#102a43) 22%,transparent)}
  .gw-user-nav{gap:0;min-width:0;border:0}
  .gw-user-nav .gw-un-head{margin:16px 12px 6px}
  .gw-user-nav>:not(.gw-un-head){margin:0;padding:8px 12px;background:color-mix(in srgb,var(--text,#102a43) 5%,transparent)}
  .gw-user-nav .gw-un-head+*{border-radius:12px 12px 0 0}
  .gw-user-nav>:not(.gw-un-head):has(+ .gw-un-head),.gw-user-nav>:not(.gw-un-head):last-child{border-radius:0 0 12px 12px}
  .gw-user-nav .gw-un-head+*:has(+ .gw-un-head),.gw-user-nav .gw-un-head+*:last-child{border-radius:12px}
  .gw-user-nav>:not(.gw-un-head)+:not(.gw-un-head){border-top:.5px solid color-mix(in srgb,var(--text,#102a43) 12%,transparent)}
  .gw-un-check{flex-direction:row-reverse;justify-content:space-between;min-height:44px}
  .gw-un-check input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:46px!important;height:28px!important;margin:0;border-radius:14px;background:color-mix(in srgb,var(--text,#102a43) 22%,transparent);transition:background .2s;cursor:pointer}
  .gw-un-check input::before{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .3);transition:transform .2s}
  .gw-un-check input:checked{background:#34c759}.gw-un-check input:checked::before{transform:translateX(18px)}
}
@media (pointer:coarse) and (min-width:700px) and (max-width:1366px){   /* the iPad: a popover docked under its button (wish d80c46), not a sheet at the bottom */
  header.top details[data-gwydion-account][open]>.gw-dock-menu{left:auto!important;right:max(12px,env(safe-area-inset-right))!important;top:calc(env(safe-area-inset-top) + 64px)!important;bottom:auto!important;
    width:min(400px,calc(100vw - 32px))!important;transform:none;border-radius:16px!important;max-height:calc(100vh - 120px);padding-top:16px!important;box-shadow:0 16px 44px rgb(16 42 67 / .26)!important}
  header.top details[data-gwydion-account][open]>.gw-dock-menu::before{display:none}
  header.top details[data-gwydion-account][open]>summary::after{background:rgb(16 42 67 / .12)}
}
@keyframes gw-un-up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (pointer:coarse) and (min-width:700px) and (max-width:1366px){@keyframes gw-un-up{from{transform:translateY(-8px) scale(.97);opacity:0}to{transform:none;opacity:1}}}
@media (prefers-reduced-motion:reduce){header.top details[data-gwydion-account][open]>.gw-dock-menu{animation:none}}
/* the header's glass (backdrop-filter) would hold the sheet inside the header — while the menu is open the header is plain */
@media (max-width:600px),(pointer:coarse) and (max-width:1366px){header.top:has(details[data-gwydion-account][open]){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;filter:none!important}}
html:has(header.top details[data-gwydion-account][open]) .gw-tabbar{display:none!important}   /* the sheet is modal: the tab bar steps back */
html:not([data-gw-preview="on"]) .gw-soon,
html:not([data-gw-preview="on"]) .nav-example,
html:not([data-gw-preview="on"]) [data-ws-example] { display: none !important; }
html[data-gw-preview="on"] .gw-soon { opacity: .75; }
.gw-new { display: inline-block; margin-inline-start: .45em; padding: .05em .5em; border-radius: 999px; font-size: .7em; font-weight: 700; line-height: 1.5;
  vertical-align: middle; letter-spacing: .02em; text-transform: lowercase; background: var(--accent, #fb683e); color: #fff; cursor: pointer; }