/* SPDX-License-Identifier: GPL-3.0-or-later */
/* Copyright (C) 2026 the tapey-1 contributors */

/*
 * The web version on phones and tablets (mobile.js): the notch and the home bar, no
 * zooming or bouncing, the panel turned sideways on a phone held upright, and the
 * banner that offers to install the page as an app. Only the web build loads it.
 */

/* The panel fits inside the screen's safe area: clear of the notch, the rounded
   corners and the home bar (the page asks for the whole screen: viewport-fit=cover). */
:root {
  --vw: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  --vh: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
@supports (height: 100dvh) {
  :root { --vh: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}
.stage {
  padding-top: calc(12px + var(--room-top) + env(safe-area-inset-top, 0px));
  padding-right: calc(16px + var(--room-x) + env(safe-area-inset-right, 0px));
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
}

/* An instrument, not a page: no double-tap zoom, no pull-to-refresh, no bounce, no
   long-press menu or magnifier on the panel. */
html, body {
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}
.unit, .unit * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

/* ------------------------------------------------------------ sideways
   A phone held upright: the body becomes a landscape frame, turned a quarter turn
   clockwise to fill the screen's height. mobile.js sizes it (inside the notch and
   the home bar), sets --vw and --vh to the frame, and maps every touch into it. */
html.sideways { overflow: hidden; height: 100%; }
html.sideways body {
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  overflow: hidden;
}
/* The frame is already inside the safe area: the turned screen's own insets do not apply. */
html.sideways .stage { padding: calc(12px + var(--room-top)) calc(16px + var(--room-x)) 12px 16px; }

/* ------------------------------------------------------------- install */
.install-banner {
  position: fixed;
  z-index: 60;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(var(--vw) - 16px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border-radius: 12px;
  background: var(--panel, #24272c);
  color: var(--text, #e2e4e8);
  border: 1px solid var(--panel-line, rgba(255, 255, 255, 0.1));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  font: 13px/1.4 var(--sans, system-ui, sans-serif);
}
html.sideways .install-banner { top: 8px; }
.install-banner img { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.install-banner .ib-text { flex: 1; min-width: 0; }
.install-banner b { display: block; font-weight: 650; font-size: 13.5px; }
.install-banner .ib-how { color: var(--text-soft, #9aa0a8); font-size: 12px; }
.install-banner .ib-how svg { width: 14px; height: 14px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.install-banner button {
  flex: none;
  font: 600 12.5px var(--sans, system-ui, sans-serif);
  border-radius: 8px;
  padding: 7px 11px;
  border: 1px solid var(--panel-line, rgba(255, 255, 255, 0.14));
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.install-banner .ib-go { background: #ec5a1c; border-color: #ec5a1c; color: #fff; }
.install-banner .ib-x { padding: 6px 8px; border: 0; color: var(--text-soft, #9aa0a8); font-size: 16px; line-height: 1; }
@media (max-width: 420px) {
  .install-banner { flex-wrap: wrap; }
  .install-banner .ib-text { flex-basis: calc(100% - 90px); }
}