/* pull.css — the page's own pull (pull.js 2.0.0, owner 2026-11-01): like a browser, the page moves with the finger and the ground behind it
   shows the Friendly-Apps signs; the reload arrow turns around the small logo in the middle of the opened band.
   version: 2.8.0 · created 2026-11-01 by Pascal Ehlig, ITS · edited 2026-11-01 by Pascal Ehlig, ITS */
.fa-pull-ground{background:var(--sunken,#e9eef3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23fb683e' stroke-opacity='.28' stroke-width='1.6'%3E%3Cpath d='M18 8c6 8 9 13 9 17a9 9 0 0 1-18 0c0-4 3-9 9-17z'/%3E%3Ccircle cx='15' cy='24' r='2.4'/%3E%3Ccircle cx='21' cy='24' r='2.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%235b7a93' stroke-opacity='.25' stroke-width='1.4'%3E%3Cpath d='M48 44h16M48 44v16M44 48h4M44 56h4'/%3E%3Ccircle cx='54' cy='16' r='5'/%3E%3Cpath d='M54 9v3M54 20v3M47 16h3M58 16h3'/%3E%3C/g%3E%3C/svg%3E") repeat}
/* 2.2.0: the ground opens in the gap the content leaves — fixed parts (header, footer, side menus, strip) stay where they are */
.fa-pull-ground{position:fixed;left:0;right:0;z-index:30;height:var(--pull,0px);display:flex;align-items:center;justify-content:center;pointer-events:none}
.fa-pull-ground[hidden]{display:none}
.fa-pull-ground-top{top:var(--pull-edge,0px)}
.fa-pull-ground-end{bottom:var(--pull-edge,0px)}
.fa-pull-ground .fa-pull{position:static;transform:none}
.fa-pull{position:fixed;left:50%;z-index:95;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;
  transform:translateX(-50%);color:var(--accent,#fb683e);font-size:var(--t-small,.85rem)}
.fa-pull[hidden]{display:none}
/* inside the moved page: half the opened band above the page's top edge, or below its end */
.fa-pull-top{top:calc(var(--pull,0px) / -2 - 30px)}
.fa-pull-end{bottom:calc(var(--pull,0px) / -2 - 30px);flex-direction:column-reverse}
/* 2.1.0: one pill — logo, the function's sign, its words; it fills with the pull and turns coral at the mark */
.fa-pull-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;border:1px solid var(--border);color:var(--text);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,var(--surface)) var(--fill,0%),var(--surface) var(--fill,0%));
  box-shadow:0 6px 18px rgb(16 42 67 / .18);font-weight:600;opacity:min(1,calc(var(--pull,0px) / 30px))}
.fa-pull-logo{width:24px;height:auto}
.fa-pull-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sunken);color:var(--text)}
.fa-pull-icon .icon{width:20px;height:20px}
.fa-pull-ready .fa-pull-pill{border-color:var(--accent)}
.fa-pull-ready .fa-pull-icon{background:var(--accent);color:#fff}
.fa-pull-say{white-space:nowrap}
.fa-pull-busy .fa-pull-icon .icon{animation:fa-pull-spin .8s linear infinite}
@keyframes fa-pull-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fa-pull-busy .fa-pull-icon .icon{animation:none}}
/* 2.3.0: the side edges of the sheets — the ground opens at the left or right edge, the pill stands in the middle of the screen */
.fa-pull-ground-left,.fa-pull-ground-right{top:var(--sheet-top,0px);bottom:var(--sheet-bottom,0px);height:auto;width:var(--pull,0px)}
.fa-pull-ground-left{left:0;right:auto}.fa-pull-ground-right{right:0;left:auto}
.fa-pull.fa-pull-side{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}
.fa-pull-left .fa-pull-sign{transform:rotate(-90deg)}.fa-pull-right .fa-pull-sign{transform:rotate(90deg)}
/* 2.4.0: the resistance between "to the last card" and "reload" — the pill holds and shakes a little */
.fa-pull-detent .fa-pull-pill{animation:fa-pull-detent .18s ease-in-out 2}
@keyframes fa-pull-detent{50%{transform:translateY(2px) scale(.98)}}
.fa-pull-say{white-space:normal;max-width:min(70vw,22rem)}
@media (prefers-reduced-motion:reduce){.fa-pull-detent .fa-pull-pill{animation:none}}
/* 2.5.0: the traffic light — green: pulling over the edge (info), yellow: about to happen, red: letting go does it; the ground and the
   pill's edge take the colour, the words say the same (colour is never the only sign) */
.fa-pull-ground.fa-pull-g{box-shadow:inset 0 0 0 3px var(--ok,#1e6b45);background-color:color-mix(in srgb,var(--ok,#1e6b45) 14%,var(--sunken,#e9eef3))}
.fa-pull-ground.fa-pull-y{box-shadow:inset 0 0 0 3px #c98a00;background-color:color-mix(in srgb,#e0a100 22%,var(--sunken,#e9eef3))}
.fa-pull-ground.fa-pull-r{box-shadow:inset 0 0 0 3px var(--danger,#b3261e);background-color:color-mix(in srgb,var(--danger,#b3261e) 18%,var(--sunken,#e9eef3))}
.fa-pull.fa-pull-g .fa-pull-pill{border-color:var(--ok,#1e6b45);border-width:2px}
.fa-pull.fa-pull-y .fa-pull-pill{border-color:#c98a00;border-width:2px}
.fa-pull.fa-pull-r .fa-pull-pill{border-color:var(--danger,#b3261e);border-width:2px}
.fa-pull.fa-pull-r .fa-pull-icon{background:var(--danger,#b3261e);color:#fff}
.fa-pull.fa-pull-y .fa-pull-icon{background:#e0a100;color:#102a43}
.fa-pull.fa-pull-g .fa-pull-icon{background:var(--ok,#1e6b45);color:#fff}
.fa-pull-pill{opacity:1}
/* 2.6.0: the sign big in the middle — a 60 px disc with a 34 px sign above the words */
.fa-pull-pill{flex-direction:column;gap:6px;padding:12px 18px 10px;border-radius:22px;text-align:center}
.fa-pull-logo{display:none}
.fa-pull-icon{width:60px;height:60px}
.fa-pull-icon .fa-pull-big svg{width:34px;height:34px;display:block}
.fa-pull-busy .fa-pull-icon .fa-pull-big svg{animation:fa-pull-spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.fa-pull-busy .fa-pull-icon .fa-pull-big svg{animation:none}}
.fa-pull-left .fa-pull-big,.fa-pull-right .fa-pull-big{transform:none}
/* 2.6.1: the big pill never hides under the header or the footer — it stands right below the header (top) or above the footer (end) */
.fa-pull-ground-top .fa-pull,.fa-pull-ground-end .fa-pull{position:fixed;left:50%;transform:translateX(-50%);z-index:96}
.fa-pull-ground-top .fa-pull{top:calc(var(--pull-edge,0px) + 8px);bottom:auto}
.fa-pull-ground-end .fa-pull{bottom:calc(var(--pull-edge,0px) + 8px);top:auto}
/* 2.6.2: the pill lies in the page's top layer (not inside the ground): right below the header at the top, right above the highest
   bottom bar at the end; the ground at the end opens above the dock and the sheet bar */
.fa-pull.fa-pull-top,.fa-pull.fa-pull-end{position:fixed;left:50%;transform:translateX(-50%);z-index:96}
.fa-pull.fa-pull-top{top:calc(var(--pull-edge,0px) + 8px);bottom:auto}
.fa-pull.fa-pull-end{bottom:calc(var(--pull-edge,0px) + 8px);top:auto}
.fa-pull-ground{z-index:39}
/* 2.7.0: the finger shows the way (green), finger + what comes next side by side (yellow), only the action (red) */
.fa-pull-icon.fa-pull-two{width:auto;min-width:60px;padding:0 12px;gap:10px;display:flex;align-items:center;justify-content:center;border-radius:30px}
.fa-pull-finger svg{width:30px;height:30px}
.fa-pull-finger-down{animation:fa-pull-way-down 1s ease-in-out infinite}
.fa-pull-finger-up{animation:fa-pull-way-up 1s ease-in-out infinite}
.fa-pull-finger-left{animation:fa-pull-way-left 1s ease-in-out infinite}
.fa-pull-finger-right{animation:fa-pull-way-right 1s ease-in-out infinite}
@keyframes fa-pull-way-down{0%,100%{transform:translateY(-4px)}50%{transform:translateY(5px)}}
@keyframes fa-pull-way-up{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}
@keyframes fa-pull-way-left{0%,100%{transform:translateX(4px)}50%{transform:translateX(-5px)}}
@keyframes fa-pull-way-right{0%,100%{transform:translateX(-4px)}50%{transform:translateX(5px)}}
.fa-pull-next{opacity:.85}.fa-pull-next svg{width:26px!important;height:26px!important}
@media (prefers-reduced-motion:reduce){.fa-pull-finger{animation:none!important}}
/* 2.8.0 (owner 2026-11-01: the release/pull-further bars stood under or over the dots): the pill is the topmost layer of the window —
   at the very top over the page (header included) when pulling at the beginning, at the very bottom over the page (the dock included)
   when pulling at the end; the ground keeps opening in the gap */
.fa-pull.fa-pull-top,.fa-pull-ground-top .fa-pull{top:max(8px,calc(env(safe-area-inset-top) + 6px))!important;bottom:auto!important;z-index:2147483000!important}
.fa-pull.fa-pull-end,.fa-pull-ground-end .fa-pull{bottom:max(10px,calc(env(safe-area-inset-bottom) + 8px))!important;top:auto!important;z-index:2147483000!important}
.fa-pull.fa-pull-side{z-index:2147483000!important}