/* focus-mode.css — visual adjustments for Focus mode.
   - Native fullscreen (desktop browsers): focus-mode class is present.
   - Pseudo focus fallback (common on iPhone Safari): html[data-focus="pseudo"].
*/

:root{ --app-height: 100vh; }

/*
  IMPORTANT:
  This app's reader uses normal page scrolling.
  On iPhone Safari, setting overflow:hidden on html/body freezes reading.
  So Focus mode must keep scrolling enabled and only adjust sizing/safe areas.
*/
html.focus-mode,
body.focus-mode{
  height: auto !important;
  min-height: var(--app-height) !important;
  /* keep scrolling enabled */
  overflow-x: hidden !important;
}

/* Keep padding + safe areas on notch devices */
html.focus-mode #viewer{
  padding-left: calc(20px + env(safe-area-inset-left)) !important;
  padding-right: calc(20px + env(safe-area-inset-right)) !important;
}

/* Pull content up in focus mode (less whitespace) */
html.focus-mode .viewer-wrap{
  margin-top: calc(var(--progress-top, 0px) + 14px) !important;
  margin-bottom: 24px !important;
}

/* Safe-area padding for iPhone pseudo focus */
html.focus-mode[data-focus="pseudo"] .topbar-inner{
  height: calc(var(--tb-closed-height, 56px) + env(safe-area-inset-top)) !important;
  padding-top: calc(var(--tb-pad, 6px) + env(safe-area-inset-top)) !important;
  padding-left: calc(20px + env(safe-area-inset-left)) !important;
  padding-right: calc(20px + env(safe-area-inset-right)) !important;
}

html.focus-mode[data-focus="pseudo"] .topbar.is-open .topbar-inner{
  height: calc(var(--tb-open-height, 200px) + env(safe-area-inset-top)) !important;
}

/* In pseudo focus, keep topbar tappable but visually quiet unless open */
html.focus-mode[data-focus="pseudo"] .topbar{
  background: transparent !important;
  border-bottom-color: transparent !important;
}

html.focus-mode[data-focus="pseudo"] .viewer-wrap{
  padding-bottom: env(safe-area-inset-bottom) !important;
}

/* --- iOS install tip modal (shown when Focus is tapped in iPhone Safari) --- */
.ios-install-tip{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  z-index: 99999;
}
.ios-install-tip .card{
  width: min(520px, calc(100% - 24px));
  margin: 12px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: var(--panel, #ffffff);
  color: var(--fg, #111111);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.08);
}
.ios-install-tip .title{
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.ios-install-tip .body{
  font-size: 13px;
  line-height: 1.4;
}
.ios-install-tip ol{
  margin: 8px 0 8px 18px;
  padding: 0;
}
.ios-install-tip .actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.ios-install-tip .btn{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  background: rgba(0,0,0,0.06);
  color: inherit;
}
html[data-theme="dark"] .ios-install-tip .card{
  background: rgba(30,30,30,0.98);
  color: #f2f2f2;
  border-color: rgba(255,255,255,0.12);
}
html[data-theme="dark"] .ios-install-tip .btn{
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
}