/* notice.css — the line that says a page has a new version, and the one question before (notice.js 1.0.0).
   1.6.0 (wish ba39b4): where the system puts its own — touch: at the top under the header like a banner (pushed up and away);
   computer: bottom right above the footer; never over the dock or a field in use (.fa-notice-flip: the other edge); the person's choice wins.
   version: 1.6.0 · created 2026-11-01 by Pascal Ehlig, ITS · edited 2026-11-02 by Pascal Ehlig, ITS */
.fa-notice{position:fixed;left:50%;bottom:calc(var(--sheet-bottom,var(--fold-foot,0px)) + 12px);transform:translateX(-50%);z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  width:min(34rem,calc(100vw - 24px));box-sizing:border-box;padding:10px 12px;border:1px solid var(--muted,#486581);border-radius:14px;background:var(--surface,#fff);color:var(--text,#102a43);
  box-shadow:0 10px 28px rgb(16 42 67 / .18);font:500 .95rem/1.35 var(--sans,system-ui)}
.fa-notice[hidden]{display:none}
.fa-notice>span,.fa-notice>div{flex:1 1 14rem}
.fa-notice small{display:block;margin-top:2px;color:var(--muted,#486581);font-size:.8rem}
.fa-notice button{min-height:44px;padding:0 14px;border-radius:999px;font:600 .9rem/1 var(--sans,system-ui);cursor:pointer}
.fa-notice-go{border:1px solid var(--action,#102a43);background:var(--action,#102a43);color:var(--on-action,#fff)}
.fa-notice-later{border:1px solid var(--border);background:var(--surface,#fff);color:var(--text,#102a43)}
.fa-notice button:focus-visible{outline:3px solid var(--focus,#2563eb);outline-offset:2px}
[data-view="print"] .fa-notice{display:none!important}
/* 1.2.0: the switch for the automatic update of this session */
.fa-notice-auto{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:.85rem;cursor:pointer}.fa-notice-auto input{width:20px;height:20px;accent-color:var(--accent,#fb683e)}
/* 1.3.0: while Lleu is open the notices live in his window, above his bar */
.lleu-panel .fa-notice.fa-notice-in-lleu{position:static;transform:none;flex:none;order:98;width:auto;margin:6px 10px;box-shadow:none;border-color:var(--border)}
/* 1.4.0: inside Lleu the news is one short line; the subject stays in the Posteingang */
.lleu-panel .fa-notice-lleu.fa-notice-in-lleu{padding:6px 10px;gap:8px;font-size:.88rem}
.lleu-panel .fa-notice-lleu.fa-notice-in-lleu small{display:none}
/* the place the person chose for notices (user-nav.js 1.4.0, html data-notices); inside Lleu they stay in Lleu */
html[data-notices="top"] .fa-notice:not(.fa-notice-in-lleu){top:calc(env(safe-area-inset-top) + 72px);bottom:auto}
html[data-notices="center"] .fa-notice:not(.fa-notice-in-lleu){top:50%;bottom:auto;transform:translate(-50%,-50%)}
html[data-notices="left"] .fa-notice:not(.fa-notice-in-lleu){left:max(12px,env(safe-area-inset-left));transform:none;top:50%;bottom:auto;translate:0 -50%;max-width:min(380px,calc(100vw - 24px))}
html[data-notices="right"] .fa-notice:not(.fa-notice-in-lleu){left:auto;right:max(12px,env(safe-area-inset-right));transform:none;top:50%;bottom:auto;translate:0 -50%;max-width:min(380px,calc(100vw - 24px))}
/* 1.6.0 (wish ba39b4): the default place by device — the rules above stay for a place the person chose (html[data-notices]) */
html:not([data-notices]) .fa-notice:not(.fa-notice-in-lleu){left:auto;right:max(16px,env(safe-area-inset-right));transform:none;width:min(26rem,calc(100vw - 32px));
  bottom:calc(var(--sheet-bottom,var(--fold-foot,0px)) + 16px)}
html:not([data-notices]) .fa-notice.fa-notice-flip:not(.fa-notice-in-lleu){bottom:auto;top:var(--fa-notice-top,16px)}
@media (pointer:coarse){
  html:not([data-notices]) .fa-notice:not(.fa-notice-in-lleu){top:var(--fa-notice-top,calc(env(safe-area-inset-top) + 8px));bottom:auto;left:50%;right:auto;
    transform:translate(-50%,var(--fa-notice-drag,0px));width:min(34rem,calc(100vw - 16px));border-radius:18px;padding:10px 12px;
    box-shadow:0 8px 24px rgb(16 42 67 / .2);touch-action:pan-x;transition:transform .2s ease,opacity .2s ease;animation:fa-notice-in .28s ease-out}
  html:not([data-notices]) .fa-notice.is-dragged:not(.fa-notice-in-lleu){transition:none}
  html:not([data-notices]) .fa-notice.is-leaving:not(.fa-notice-in-lleu){transform:translate(-50%,-140%);opacity:0}
  html:not([data-notices]) .fa-notice.fa-notice-flip:not(.fa-notice-in-lleu){top:auto;bottom:calc(var(--gw-dock-h,var(--sheet-bottom,0px)) + 8px);animation:none}
  .fa-notice:not(.fa-notice-in-lleu)::before{content:"";position:absolute;left:50%;bottom:4px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:color-mix(in srgb,var(--muted,#486581) 45%,transparent)}
}
@keyframes fa-notice-in{from{transform:translate(-50%,-120%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media (prefers-reduced-motion:reduce){.fa-notice{animation:none!important;transition:none!important}}
/* the explicit bottom choice (this session) keeps the old bottom place above the dock */
html[data-notices="bottom"] .fa-notice:not(.fa-notice-in-lleu){top:auto;bottom:calc(var(--sheet-bottom,var(--fold-foot,0px)) + 12px)}