/* Strippi-Ansicht (?ansicht=strippi): three quiet tiles for the tab in Strippi Desktop (592 × 263 px), in the look of its own
   "Übersicht" stat tiles (clock / weather / disks). Only active with html.strippi-ansicht (theme-boot.js); the normal app is not
   affected by anything in this file. The page itself is transparent so the tiles sit on Strippi Desktop's smoked-glass notch. */
html.strippi-ansicht,html.strippi-ansicht body{background:transparent!important;margin:0!important;padding:0!important;height:100%;overflow:hidden!important;min-height:0!important}
html.strippi-ansicht body{display:block!important;font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.35;color:#fff}
/* Everything around the page is left out: sidebar, top bar with dock, page heading, month and person switch, footer,
   chat button, mascot, light ribbons, stone wall, tour, hints. Only the page, the lock screen, dialogs and short messages remain. */
html.strippi-ansicht body>*:not(.shell):not(#vault-gate):not(#toast):not(dialog),
html.strippi-ansicht body>aside,html.strippi-ansicht .shell>header,html.strippi-ansicht main>:not(#content),
html.strippi-ansicht #strippi-companion,html.strippi-ansicht #coach-dialog,html.strippi-ansicht #light-ribbons,html.strippi-ansicht canvas{display:none!important}
html.strippi-ansicht body.vault-locked>.shell{display:none!important}
html.strippi-ansicht .shell{margin:0!important;padding:0!important;min-height:0!important;width:auto!important;max-width:none!important;background:transparent!important}
html.strippi-ansicht body main{margin:0!important;padding:0!important;max-width:none!important;background:transparent!important}
html.strippi-ansicht #content{margin:0!important;padding:0!important}
html.strippi-ansicht #content,html.strippi-ansicht #content *{animation:none!important;transition:none!important}
/* nothing but the view: whatever another script put into the page is not shown (no flash of the overview while loading) */
html.strippi-ansicht #content>:not(#strippi-view):not(#strippi-connect){display:none!important}

/* ── the tiles ── */
.sv{box-sizing:border-box;height:100vh;max-height:263px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;overflow:hidden;color:#fff;
 font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif}
.sv *{box-sizing:border-box}
.sv-tile,.sv-block{min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:14px 16px;border-radius:22px;background:rgba(255,255,255,.1);border:0;box-shadow:none}
html.strippi-ansicht .sv h2,html.strippi-ansicht #vault-gate .gate-card>h1{margin:0;font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;font-size:10.5px;line-height:1.3;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.strippi-ansicht .sv .sv-big{display:block;margin:2px 0 0;font-family:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;font-weight:700;font-size:30px;line-height:1.15;
 letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
html.strippi-ansicht .sv small{display:block;margin:0;font-size:12px;line-height:1.3;font-weight:600;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-demo{margin-left:6px;font-size:9.5px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.45)}
html.strippi-ansicht #toast{left:12px!important;right:12px!important;bottom:8px!important;max-width:none!important;font-size:12px}

/* ── shared form look for the lock screen and the connect screen: fields rgba(255,255,255,.14), pill buttons like Strippi ── */
html.strippi-ansicht #vault-gate input:not([type=checkbox]),html.strippi-ansicht .sv-connect input{height:34px!important;min-height:0!important;margin:0!important;padding:5px 14px!important;font:600 13px/1.2 "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif!important;
 color:#fff!important;background:rgba(255,255,255,.14)!important;border:0!important;border-radius:999px!important;box-shadow:none!important;outline-offset:2px;width:100%}
html.strippi-ansicht #vault-gate button,html.strippi-ansicht .sv-connect button{min-height:0!important;margin:0!important;font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif!important;font-weight:600!important;border:0!important;border-radius:999px!important;box-shadow:none!important;cursor:pointer}
html.strippi-ansicht #vault-gate button.primary,html.strippi-ansicht #vault-gate #gate-form [type=submit],html.strippi-ansicht .sv-connect button.primary{height:34px!important;padding:0 18px!important;font-size:13px!important;background:#fff!important;color:#141414!important;white-space:nowrap}
html.strippi-ansicht #vault-gate button:not(.primary):not([type=submit]){height:auto!important;padding:4px 12px!important;font-size:11.5px!important;width:auto!important;background:rgba(255,255,255,.1)!important;color:rgba(255,255,255,.85)!important}
html.strippi-ansicht #vault-gate label,html.strippi-ansicht .sv-connect label{font-size:10.5px!important;font-weight:700!important;letter-spacing:.06em;color:rgba(255,255,255,.7)!important}

/* ── lock screen: one wide tile; header line, password (and Windows Hello / passkey if set up), remember device ── */
html.strippi-ansicht body #vault-gate{box-sizing:border-box;height:100vh;max-height:263px;min-height:0!important;padding:0!important;display:flex!important;align-items:stretch;justify-content:center;overflow:auto;background:transparent!important}
html.strippi-ansicht #vault-gate>:not(.sg-login):not(.gate-card):not(#strippi-gate-connect),html.strippi-ansicht #vault-gate .gg-bot,html.strippi-ansicht #vault-gate .gate-card>img,
html.strippi-ansicht #vault-gate .footnote,html.strippi-ansicht #vault-gate .explain,html.strippi-ansicht #vault-gate .st-legal,html.strippi-ansicht #vault-gate .gate-card>p.muted:empty,
html.strippi-ansicht #vault-gate [data-action="demo-mode"]{display:none!important}
html.strippi-ansicht #vault-gate .sg-login{min-height:0!important;padding:0!important;margin:0!important;width:100%;display:flex!important;align-items:stretch;justify-content:center}
html.strippi-ansicht body #vault-gate .gate-card.gg-card,html.strippi-ansicht body #vault-gate .gate-card{width:100%!important;max-width:none!important;margin:0!important;padding:14px 18px!important;border-radius:22px!important;
 display:flex!important;flex-wrap:wrap;align-content:center;align-items:baseline;column-gap:10px;row-gap:7px;text-align:left!important;box-shadow:none!important;background:rgba(255,255,255,.1)!important;border:0!important;backdrop-filter:none!important;color:#fff!important}
html.strippi-ansicht body #vault-gate .gate-card::before{display:none!important}
html.strippi-ansicht #vault-gate .gate-card>*{margin:0!important;animation:none!important;opacity:1!important;transform:none!important}
html.strippi-ansicht #vault-gate .gate-card>p{font-size:12px!important;line-height:1.3!important;font-weight:600;color:rgba(255,255,255,.7)!important}
html.strippi-ansicht #vault-gate .gate-card>p.muted{flex:1 1 100%}
html.strippi-ansicht #vault-gate #gate-form{flex:1 1 100%;display:flex!important;flex-wrap:wrap;align-items:flex-end;gap:7px 8px}
html.strippi-ansicht #vault-gate #gate-form>*{margin:0!important}
html.strippi-ansicht #vault-gate #gate-form>label:not(.check-label){flex:1 1 200px;display:flex;flex-direction:column;gap:4px;line-height:1.3}
html.strippi-ansicht #vault-gate #gate-form .bio-unlock{flex:1 1 100%}
html.strippi-ansicht #vault-gate #gate-form .check-label{flex:1 1 100%;display:flex!important;align-items:center;gap:8px;font-size:12px!important;letter-spacing:0;font-weight:600!important;line-height:1.3}
html.strippi-ansicht #vault-gate #gate-form .check-label input{width:16px!important;height:16px!important;min-height:0!important;margin:0!important;flex:none}
html.strippi-ansicht #vault-gate #gate-error{flex:1 1 100%;font-size:12px!important;min-height:0!important;color:#ffb4a8!important}
html.strippi-ansicht #vault-gate #gate-error:empty{display:none!important}
html.strippi-ansicht #vault-gate .gate-card>.actions{display:flex!important;flex-wrap:wrap;gap:6px}

/* ── connect screen (no vault on this device) and the same steps on the lock screen: one wide tile ── */
.sv-connect{grid-template-columns:minmax(0,1fr)}
.sv-connect .sv-block{gap:7px;padding:14px 18px}
html.strippi-ansicht .sv-connect p{margin:0;font-size:12px;line-height:1.35;font-weight:600;color:rgba(255,255,255,.7)}
html.strippi-ansicht .sv-connect p strong{color:#fff}
.sv-connect-row{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.sv-connect-row label{flex:1 1 240px;display:flex;flex-direction:column;gap:4px}
html.strippi-ansicht .sv-connect small{white-space:normal}
html.strippi-ansicht .sv-connect .sv-link-button,html.strippi-ansicht #vault-gate .sv-connect .sv-link-button{display:inline;height:auto!important;margin:0 0 0 4px!important;padding:0!important;background:none!important;font-size:12px!important;color:#fff!important;text-decoration:underline;border-radius:0!important}
html.strippi-ansicht .sv-connect p.sv-error{color:#ffb4a8}
.sv-connect .sv-error:empty{display:none}
html.strippi-ansicht body #vault-gate.sv-gate-connecting .gate-card.gg-card,html.strippi-ansicht body #vault-gate.sv-gate-connecting .gate-card{display:none!important}
html.strippi-ansicht #strippi-gate-connect{width:100%}

/* ── dialogs of the existing flows (confirm account, take over the online vault) fit into the small tab ── */
html.strippi-ansicht dialog{max-width:calc(100vw - 16px)!important;max-height:calc(100vh - 16px)!important;width:560px!important;margin:auto!important;padding:12px 16px!important;overflow:auto!important;border-radius:22px!important;font-size:12.5px}
html.strippi-ansicht dialog h2{font-size:15px!important;margin:0 0 6px!important}
html.strippi-ansicht dialog p{margin:0 0 6px!important;font-size:12px!important;line-height:1.35}
html.strippi-ansicht dialog label{font-size:12px!important;margin:0 0 6px!important}
html.strippi-ansicht dialog input:not([type=checkbox]),html.strippi-ansicht dialog select{height:32px!important;min-height:0!important;padding:4px 10px!important;font-size:13px!important}
html.strippi-ansicht dialog .actions{margin-top:6px!important;gap:6px}
html.strippi-ansicht dialog .actions button{min-height:0!important;height:32px!important;padding:0 14px!important;font-size:12.5px!important;border-radius:999px!important}
html.strippi-ansicht .sv small.sv-stale{color:#f2c46d}
.sv-demo.sv-sync{color:#f2c46d}
