/* assets/app-native.css — makes every public page behave like a native app
   inside Android WebView / installed PWA, and polishes small screens in any browser.
   Loaded by inc/app-head.php on all public pages. Keep rules additive and low-specificity
   so page-level CSS still wins where it needs to. */

:root{
  --tab-h:62px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
  --tab-offset:0px;                      /* height of the bottom tab bar when visible */
}

/* ── Base: no zoom-on-focus jumps, no sideways scroll, no rubber-band bounce ── */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h,62px) + 10px);
}
/* NOTE: do not put overflow-x on html AND body — together they turn <body> into its own
   scroll container and mouse-wheel scrolling stops working. Layout overflow is fixed at source. */
html,body{max-width:100%}
/* On <html> only: stops the rubber-band / pull-to-refresh bounce in WebView. Never on <body> —
   the site's own CSS makes body a scroll container, and overscroll-behavior there blocks the wheel. */
html{overscroll-behavior-y:none}
body{
  -webkit-tap-highlight-color:transparent;
  padding-left:var(--sal);
  padding-right:var(--sar);
}
img,video,canvas,iframe{max-width:100%}
a,button,[role="button"],input[type="submit"],input[type="button"],label,select,summary{
  touch-action:manipulation;            /* removes the 300ms tap delay + double-tap zoom */
}

/* Status-bar / notch aware top bar */
.tdf-nav{padding-top:var(--sat)}

/* ── Touch devices: finger-sized targets, 16px inputs (stops auto-zoom), no text-selection on chrome ── */
@media (pointer:coarse){
  button,[role="button"],input[type="submit"],input[type="button"],select,summary,.btn{min-height:44px}
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{font-size:16px !important}
  nav a,.nav-link,.f-link,footer a{min-height:40px;display:inline-flex;align-items:center}
  .tdf-nav,.app-tabbar,.tdf-compare-tray,button,.back-top{
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  }
}

/* Long unbroken words / URLs must never push the layout wider than the screen */
p,li,td,th,h1,h2,h3,h4,.f-value,.f-label{overflow-wrap:anywhere}

/* Wide tables scroll inside themselves instead of the whole page */
@media (max-width:820px){
  .content-body table,.article-body table,.post-content table,article table{
    display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
}

/* ── Bottom tab bar (phones / WebView) ── */
.app-tabbar{display:none}
@media (max-width:820px){
  .app-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1000;
    background:rgba(10,11,15,.97);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,.09);
    padding:6px calc(6px + var(--sar)) calc(6px + var(--sab)) calc(6px + var(--sal));
    font-family:'Outfit','Segoe UI',system-ui,sans-serif;
  }
  .app-tabbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:48px;padding:4px 2px;border-radius:12px;
    color:#8b92a5;font-size:10.5px;font-weight:600;letter-spacing:.2px;text-decoration:none;
    transition:color .15s,background .15s;
  }
  .app-tabbar a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .app-tabbar a.on{color:#fff;background:rgba(232,0,29,.14)}
  .app-tabbar a.on svg{stroke:#ff4d63}
  .app-tabbar a:active{background:rgba(255,255,255,.08)}
  .app-tabbar [hidden]{display:none !important}
  .app-tabbar button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:48px;padding:4px 2px;border:0;border-radius:12px;background:none;cursor:pointer;
    color:#8b92a5;font:600 10.5px/1.2 'Outfit','Segoe UI',system-ui,sans-serif;letter-spacing:.2px;
    transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent;
  }
  .app-tabbar button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .app-tabbar button.on{color:#fff;background:rgba(232,0,29,.14)}
  .app-tabbar button.on svg{stroke:#ff4d63}
  .app-tabbar button:active{background:rgba(255,255,255,.08)}

  /* Voice tab = the assistant's status light: red + pulse = listening, amber = understanding, green = speaking */
  #tdfTabVoice.on{color:#fff;background:rgba(232,0,29,.30);animation:tdfTabPulse 1.1s ease-in-out infinite}
  #tdfTabVoice.on svg{stroke:#ff4d63}
  #tdfTabVoice.work{color:#fde68a;background:rgba(245,158,11,.20)}
  #tdfTabVoice.work svg{stroke:#fbbf24;animation:tdfTabBlink .7s ease-in-out infinite alternate}
  #tdfTabVoice.speak{color:#a7f3d0;background:rgba(16,185,129,.20)}
  #tdfTabVoice.speak svg{stroke:#34d399}
  @keyframes tdfTabPulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(232,0,29,.0)}50%{box-shadow:inset 0 0 0 2px rgba(232,0,29,.65)}}
  @keyframes tdfTabBlink{from{opacity:1}to{opacity:.35}}
  @media (prefers-reduced-motion:reduce){#tdfTabVoice.on,#tdfTabVoice.work svg{animation:none}}

  /* make room for the bar and lift the other fixed widgets above it */
  :root{--tab-offset:calc(var(--tab-h) + var(--sab))}
  body{padding-bottom:calc(var(--tab-h) + var(--sab))}
  /* the go-to-top button sits on the LEFT, so the right corner above the Voice tab is free for the voice assistant's little arrow */
  .back-top{bottom:calc(var(--tab-h) + var(--sab) + 14px) !important;left:14px !important;right:auto !important}
  .tdf-compare-tray{bottom:calc(var(--tab-h) + var(--sab)) !important}
}

/* ── Inside the installed app / WebView ── */
.is-app .web-only,
.is-app [data-web-only],
.is-app .app-install,
.is-app .pwa-install{display:none !important}
.is-app body{-webkit-user-select:none;user-select:none}
.is-app p,.is-app li,.is-app td,.is-app h1,.is-app h2,.is-app h3,.is-app input,.is-app textarea,.is-app .f-value{
  -webkit-user-select:text;user-select:text;
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Specific controls the audit found below finger size (min 40-44px) */
@media (pointer:coarse){
  .nav-brand,.nav-toggler{min-width:44px;min-height:44px}
  .nav-sinput{min-height:40px}
  .nudge-close{min-width:36px;min-height:36px}
  .alpha-btn,.sort-btn,.lang-btn,.lang-read-btn,.pp-tab,.see-all,.read-btn,.tcs,.f-brand-pill{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .tdf-add-compare,.tdf-save-device{min-height:44px;min-width:44px}
  .tdf-ct-remove,.tdf-ct-clear{min-width:40px;min-height:40px}
}