/* devices.css — the device view in Lleu (devices.js 1.0.0, owner 2026-11-01).
   version: 1.2.0 · created 2026-11-01 by Pascal Ehlig, ITS · edited 2026-11-01 by Pascal Ehlig, ITS */
.fa-devices-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.fa-devices-bar select{min-height:40px;max-width:100%;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit}
.fa-devices-turn,.fa-devices-full{min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.fa-devices-turn[aria-pressed="true"],.fa-devices-full[aria-pressed="true"]{background:var(--action);color:var(--on-action);border-color:var(--action)}
.fa-devices-board{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:160px}
.fa-devices-screen{position:relative;overflow:hidden;border-radius:14px;border:6px solid #1c2733;background:#fff;box-shadow:0 10px 28px rgb(16 42 67 / .2)}
.fa-devices-watch{border-radius:40px}.fa-devices-tv,.fa-devices-monitor{border-radius:6px}
.fa-devices-screen iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}
.fa-devices-info{margin:0;font:var(--t-small,.85rem)/1.4 var(--mono,ui-monospace,monospace);color:var(--muted);text-align:center}
/* Vollbild (1.1.0): the fixed layer also stands in where the Fullscreen API is missing (phones) */
.fa-devices.fa-devices-is-full{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;margin:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:var(--bg,#f6fafc);overflow:hidden}
.fa-devices.fa-devices-is-full .fa-devices-board{flex:1 1 auto;min-height:0;justify-content:center}
html.fa-devices-lock,html.fa-devices-lock body{overflow:hidden}
/* 1.2.0: a real device's look (devices.js d[6]) — titanium frame, glass, status bar, island or notch, home indicator, side buttons */
.fa-devices-screen.is-real{overflow:visible;border:10px solid #2c2c2e;background:#000;box-shadow:0 0 0 1px #6b6b70,0 18px 40px rgb(16 42 67 / .3)}
.fa-devices-screen.is-real .fa-dev-glass{position:absolute;inset:0;overflow:hidden;background:var(--bg,#f6fafc)}
.fa-devices-screen.is-real iframe{z-index:1}
.fa-dev-status{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;align-items:center;padding:0 9% 0 11%;color:var(--text,#102a43);font-weight:600;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;pointer-events:none}
.fa-dev-status i{flex:1}.fa-dev-icons{display:inline-flex;gap:.3em;align-items:center}.fa-dev-icons svg{fill:currentColor}
.fa-dev-island,.fa-dev-notch{position:absolute;z-index:3;left:50%;transform:translateX(-50%);background:#000;border-radius:999px;pointer-events:none}
.fa-dev-notch{border-radius:0 0 18px 18px}
.fa-dev-home{position:absolute;z-index:3;left:50%;transform:translateX(-50%);border-radius:999px;background:var(--text,#102a43);opacity:.85;pointer-events:none}
.fa-dev-btn{position:absolute;z-index:0;width:4px;border-radius:2px;background:#4a4a4e}
.is-portrait .fa-dev-btn-action{left:-14px;top:16%;height:6%}.is-portrait .fa-dev-btn-up{left:-14px;top:25%;height:9%}.is-portrait .fa-dev-btn-down{left:-14px;top:36%;height:9%}.is-portrait .fa-dev-btn-power{right:-14px;top:28%;height:13%}
.is-landscape .fa-dev-btn{display:none}