/* ── Phone shell (phone-shell.js) ─────────────────────────────────
   Phones only: a floating dark capsule with four areas, a round Strippi button, a "+" in the page header with its bottom sheet,
   and the "Ich" page on top of the settings. Everything is hidden by default and shown only up to 760px, so larger screens stay as they are.
   "Stein" (light) and "Graphit" (html.night) share the stone variables of stone.css. Touch targets stay at least 44px, the home indicator area stays free. */
#ps-shell,#ps-plus,#ps-sheet,.ps-me{display:none}
@media(max-width:760px){
 html.stone body{--ps-h:58px;--ps-gap:12px;--ps-space:calc(var(--ps-h) + var(--ps-gap) + env(safe-area-inset-bottom,0px))}

 /* the old floating Strippi launcher gives way to the round button of the capsule; it stays in the page (greeting, tests) but is not shown */
 html.ps-ready body #strippi-companion{visibility:hidden;pointer-events:none}
 /* the daily greeting now speaks from the new button; the page and the toast clear the capsule */
 html.ps-ready body #strippi-greet{left:auto;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(var(--ps-space) + 10px);max-width:calc(100vw - 28px);transform-origin:right bottom}
 html.ps-ready[dir=rtl] body #strippi-greet{right:auto;left:max(14px,env(safe-area-inset-left,0px));transform-origin:left bottom}
 html.ps-ready body #toast{bottom:calc(var(--ps-space) + 8px)}
 html.ps-ready body:not(.vault-locked) main{padding-bottom:calc(var(--ps-space) + 34px)!important}
 html.ps-sheet-open,html.ps-sheet-open body{overflow:hidden}

 /* the capsule: dark, with the active area as a light capsule showing icon and name, the others only their icon */
 #ps-shell:not([hidden]){display:flex;align-items:flex-end;gap:10px;position:fixed;z-index:70;left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));bottom:calc(var(--ps-gap) + env(safe-area-inset-bottom,0px));pointer-events:none}
 #ps-shell>*{pointer-events:auto}
 #ps-tabs{flex:1;min-width:0;margin:0;box-sizing:border-box;height:var(--ps-h);padding:6px;border-radius:29px;display:flex;align-items:center;justify-content:space-between;gap:2px;background:#1c1c1a;
  box-shadow:0 22px 44px -14px rgba(0,0,0,.6),0 6px 16px -6px rgba(0,0,0,.4)}
 #ps-tabs .ps-tab{all:unset;box-sizing:border-box;-webkit-tap-highlight-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-width:46px;height:46px;border-radius:23px;color:#a9a69f;
  font-size:14px;font-weight:600;line-height:1;white-space:nowrap;transition:background .2s,color .2s,transform .15s}
 #ps-tabs .ps-tab svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
 #ps-tabs .ps-label{display:none}
 #ps-tabs .ps-tab.on{padding:0 16px 0 12px;background:#efede7;color:#1c1c1a}
 #ps-tabs .ps-tab.on .ps-label{display:inline}
 #ps-tabs .ps-tab:active{transform:scale(.94)}
 #ps-tabs .ps-tab:focus-visible,#ps-strippi:focus-visible,#ps-plus:focus-visible{outline:2px solid #e3b75a;outline-offset:2px}

 /* Strippi himself, alive, opens the chat */
 #ps-strippi{all:unset;pointer-events:auto;box-sizing:border-box;-webkit-tap-highlight-color:transparent;cursor:pointer;flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fbf5e8;border:3px solid #1d2a29;
  box-shadow:0 18px 36px -12px rgba(0,0,0,.55),0 4px 12px -4px rgba(0,0,0,.35);transition:transform .15s}
 #ps-strippi:active{transform:scale(.93)}
 #ps-strippi .strippi-bot-slot{display:block;width:44px;height:44px}

 /* Graphit: the capsule turns to glass, the active area to gold */
 html.stone.night #ps-tabs{background:rgba(236,233,226,.1);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(236,233,226,.16),0 22px 44px -14px rgba(0,0,0,.7)}
 html.stone.night #ps-tabs .ps-tab{color:#cfcbc2}
 html.stone.night #ps-tabs .ps-tab.on{background:#e3b75a;color:#1c1c1a}
 html.stone.night #ps-strippi{box-shadow:0 0 0 1px rgba(236,233,226,.3),0 18px 36px -12px rgba(0,0,0,.7)}

 /* hidden under a dialog (the chat, any form) */
 html.ps-ready body:has(dialog[open]) #ps-shell{opacity:0;visibility:hidden;pointer-events:none}

 /* the "+" sits in the top corner of the page heading */
 html.ps-ready .heading{position:relative}
 html.ps-ready .heading:has(#ps-plus:not([hidden]))>div{padding-inline-end:52px}
 #ps-plus:not([hidden]){all:unset;box-sizing:border-box;-webkit-tap-highlight-color:transparent;cursor:pointer;display:grid;place-items:center;position:absolute;top:0;inset-inline-end:0;z-index:2;width:40px;height:40px;border-radius:50%;
  background:var(--s-btn,#1c1c1a);color:var(--s-btn-ink,#f6f4ef);box-shadow:0 10px 22px -10px rgba(0,0,0,.6);transition:transform .15s}
 #ps-plus::before{content:"";position:absolute;inset:-4px}
 #ps-plus:active{transform:scale(.92)}
 #ps-plus svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

 /* the "+" sheet */
 #ps-sheet:not([hidden]){display:block;position:fixed;inset:0;z-index:80}
 #ps-sheet .ps-veil{position:absolute;inset:0;background:rgba(20,20,18,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
 #ps-sheet.open .ps-veil{opacity:1}
 #ps-sheet .ps-panel{position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;max-height:calc(100vh - env(safe-area-inset-top,0px) - 24px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - 24px);overflow:auto;overscroll-behavior:contain;
  padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));border-radius:28px 28px 0 0;background:#f2efe9;box-shadow:0 -20px 60px -20px rgba(0,0,0,.5);transform:translateY(105%);transition:transform .42s cubic-bezier(.2,.9,.25,1)}
 #ps-sheet.open .ps-panel{transform:none}
 #ps-sheet .ps-grab{width:38px;height:5px;border-radius:3px;margin:0 auto 8px;background:var(--s-line2,rgba(28,28,26,.2))}
 #ps-sheet .ps-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 0}
 #ps-sheet h2{margin:0;padding:0;min-width:0;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.12;letter-spacing:-.02em;color:var(--s-ink)}
 #ps-sheet button{all:unset;box-sizing:border-box;-webkit-tap-highlight-color:transparent;cursor:pointer;color:var(--s-ink)}
 #ps-sheet button:focus-visible{outline:2px solid var(--s-accent);outline-offset:2px}
 #ps-sheet svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
 #ps-sheet .ps-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(28,28,26,.07)}
 #ps-sheet .ps-close svg{width:20px;height:20px}
 #ps-sheet .ps-rows{display:grid;gap:10px;margin-top:14px}
 #ps-sheet .ps-row{display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 14px;border-radius:20px;background:#fbfaf7;box-shadow:inset 0 0 0 1px rgba(28,28,26,.06),0 1px 2px rgba(28,28,26,.04);transition:transform .15s}
 #ps-sheet .ps-row:active{transform:scale(.98)}
 #ps-sheet .ps-tile{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#efe6d3;color:#4a3d22}
 #ps-sheet .ps-tile svg{width:22px;height:22px}
 #ps-sheet .ps-text{display:grid;gap:2px;min-width:0;text-align:start}
 #ps-sheet .ps-text b{font-size:16px;font-weight:700;line-height:1.25;color:var(--s-ink)}
 #ps-sheet .ps-text small{font-size:13px;line-height:1.3;color:var(--s-muted)}
 html.stone.night #ps-sheet .ps-panel{background:#1f2022;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 -20px 60px -20px rgba(0,0,0,.8)}
 html.stone.night #ps-sheet .ps-close{background:rgba(255,255,255,.08)}
 html.stone.night #ps-sheet .ps-row{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
 html.stone.night #ps-sheet .ps-tile{background:rgba(227,183,90,.14);color:#e3b75a}

 /* "Ich": the household card and the grouped settings, like a phone's own settings */
 .ps-me{display:block;margin:0 0 22px}
 .ps-house{display:flex;align-items:center;gap:14px;padding:16px;border-radius:22px;background:var(--s-card);box-shadow:var(--s-shadow)}
 .ps-house .ps-house-bot{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:#fbf5e8;box-shadow:inset 0 0 0 2.5px #1d2a29}
 .ps-house-text{min-width:0}
 .ps-house-text strong{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;letter-spacing:-.01em;color:var(--s-ink)}
 .ps-house-text small{display:block;margin-top:2px;font-size:13px;line-height:1.35}
 .ps-group{margin-top:18px}
 .ps-group-label{margin:0 6px 8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
 .ps-list{border-radius:20px;overflow:hidden;background:var(--s-card);box-shadow:var(--s-shadow)}
 .ps-me .ps-set{all:unset;box-sizing:border-box;-webkit-tap-highlight-color:transparent;cursor:pointer;display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:8px 14px 8px 12px;font-size:15px;color:var(--s-ink)}
 .ps-me .ps-set[hidden]{display:none}
 .ps-set:not([hidden])~.ps-set:not([hidden]){border-top:1px solid var(--s-line)}
 .ps-me .ps-set:active{background:var(--s-hover)}
 .ps-me .ps-set:focus-visible{outline:2px solid var(--s-accent);outline-offset:-2px;border-radius:14px}
 .ps-set .ps-tile{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(28,28,26,.06)}
 .ps-set svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
 .ps-set .ps-tile svg{width:20px;height:20px}
 .ps-name{flex:1;min-width:0;line-height:1.3;overflow-wrap:anywhere}
 .ps-val{margin-inline-start:auto;font-size:14px;color:var(--s-muted)}
 .ps-set .ps-chev{flex:none;width:18px;height:18px;color:var(--s-muted)}
 html[dir=rtl] .ps-set .ps-chev{transform:scaleX(-1)}
 .ps-switch{position:relative;flex:none;width:50px;height:30px;border-radius:15px;background:rgba(28,28,26,.2);transition:background .2s}
 .ps-switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .2s cubic-bezier(.3,1.3,.5,1)}
 .ps-set[aria-checked=true] .ps-switch{background:var(--s-accent)}
 .ps-set[aria-checked=true] .ps-switch::after{transform:translateX(20px)}
 html[dir=rtl] .ps-set[aria-checked=true] .ps-switch::after{transform:translateX(-20px)}
 html.stone.night .ps-set .ps-tile{background:rgba(255,255,255,.07)}
 html.stone.night .ps-switch{background:rgba(236,233,226,.2)}
 html.stone.night .ps-set[aria-checked=true] .ps-switch{background:#e3b75a}

 /* Geld and Plan: a full-width segmented control at the top of the page */
 #content .ps-seg{display:flex;gap:4px;width:100%;box-sizing:border-box;padding:4px;margin:0 0 16px}
 #content .ps-seg button{flex:1 1 0;min-width:0;min-height:44px;padding:8px 6px;border-radius:999px;font-size:14px;font-weight:600;line-height:1.2;white-space:normal;overflow-wrap:anywhere}

 /* the overview serves three pages: Heute keeps the cards of today, Konten and Auswertung (under Geld) get the others */
 html.ps-ready #content.ps-ov-heute .kpis>.kpi:not(.focus-free),
 html.ps-ready #content.ps-ov-heute .focus-balances,
 html.ps-ready #content.ps-ov-heute .focus-categories,
 html.ps-ready #content.ps-ov-heute .mercury-analysis,
 html.ps-ready body:not(.simple-mode) #content.ps-ov-heute .mercury-recent{display:none!important}
 html.ps-ready #content.ps-ov-konten>:not(.ps-seg):not(.kpis):not(.focus-balances){display:none!important}
 html.ps-ready #content.ps-ov-konten .kpis>.kpi:not(.focus-balance-kpi){display:none!important}
 html.ps-ready #content.ps-ov-auswertung>:not(.ps-seg):not(.kpis):not(.focus-categories):not(.mercury-analysis){display:none!important}
 html.ps-ready #content.ps-ov-auswertung .kpis>.kpi.focus-balance-kpi,
 html.ps-ready #content.ps-ov-auswertung .kpis>.kpi.focus-free{display:none!important}
 /* the "+" covers importing on the overview, and "Budgetplan" is a tab (Plan) now */
 html.ps-ready body[data-mercury-view=overview] #focus-import-button,
 html.ps-ready .focus-plan-link{display:none!important}

 @media(max-width:350px){
  #ps-shell:not([hidden]){gap:8px;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px))}
  #ps-tabs{padding:4px}
  #ps-tabs .ps-tab.on{padding:0 12px 0 10px;gap:6px;font-size:13px}
  #ps-strippi{width:52px;height:52px}
  #ps-strippi .strippi-bot-slot{width:40px;height:40px}
 }
 @media(prefers-reduced-motion:reduce){
  #ps-sheet .ps-panel,#ps-sheet .ps-veil,#ps-tabs .ps-tab,#ps-strippi,#ps-plus,#ps-sheet .ps-row,.ps-switch,.ps-switch::after{transition:none!important}
 }
}

/* the lock screen and the website's stone: nothing of the shell shows */
body.vault-locked #ps-shell,body.vault-locked #ps-plus,body.vault-locked #ps-sheet{display:none!important}
html.fw-hold #ps-shell,html.fw-hold #ps-plus,html.fw-hold #ps-sheet{visibility:hidden}
/* arriving from the website the capsule drifts in with the page (fw-in is defined in stone.css) */
@media(max-width:760px){
 html.from-web #ps-shell{animation:fw-in .9s cubic-bezier(.2,.7,.3,1) .2s both}
 html.from-web.fw-hold #ps-shell{animation-play-state:paused}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){html.from-web #ps-shell{animation:none}}