/* ══════════════════════════════════════════════════════════════
   Keln — the app layer. Loaded on every page, after the page's own
   styles, so that on a phone, and above all when Keln is opened from
   the home screen with no browser around it, every page behaves like
   one app rather than a set of web pages:

     · nothing sits under the notch, the rounded corners or the home
       indicator (the viewport runs edge to edge: viewport-fit=cover)
     · text fields never make iOS zoom the page (16px on touch)
     · no grey tap flash, no double-tap zoom delay, no white bounce
     · toasts stack above the tab bar, two at a time
     · the installed app's own back button, and the home-screen tip
   ══════════════════════════════════════════════════════════════ */

/* The colour behind everything, so an over-scroll never flashes
   white. :where() keeps it below any page's own rule. */
:where(html) { background-color: #05080d; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Touch: no grey flash, no 300ms double-tap wait. */
* { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], label, summary, select, input, textarea { touch-action: manipulation; }

@media (hover: none) and (pointer: coarse) {
  /* iOS zooms into any field under 16px when it is focused, and does
     not zoom back. Every field is 16px on a touch screen. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  textarea, select { font-size: max(16px, 1em) !important; }
  /* Long-press shows the system menu on text, never on controls. */
  button, [role="button"], .btn, nav a { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* Landscape on a notched phone: keep content clear of the notch. */
@media (orientation: landscape) and (max-height: 520px) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* Installed: the page is the app, so it does not rubber-band past
   its own edges. */
html.is-standalone, html.is-standalone body { overscroll-behavior-y: none; }

/* ── Toasts ─────────────────────────────────────────────────────
   One place for every page's #toasts: on a phone they run the width
   of the screen, sit above the tab bar and the home indicator, and
   only the latest two show. */
@media (max-width: 640px) {
  #toasts {
    left: var(--s-6) !important;
    right: var(--s-6) !important;
    bottom: calc(var(--s-6) + env(safe-area-inset-bottom) + var(--kn-tabs-h, 0px)) !important;
    max-width: none !important;
    align-items: stretch;
  }
  #toasts > :nth-last-child(n+3) { display: none; }
}

/* ── The installed app's back button ────────────────────────────
   With no browser chrome there is no back button, so a page without
   its own navigation gets this one (app.js decides). */
.app-back {
  position: fixed;
  left: calc(var(--s-6) + env(safe-area-inset-left));
  bottom: calc(var(--s-6) + env(safe-area-inset-bottom) + var(--kn-tabs-h, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(10, 14, 22, .78);
  color: var(--ink, #e9f0f7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  cursor: pointer;
  animation: app-in .3s ease-out both;
}
.app-back svg { width: 20px; height: 20px; }
.app-back:active { transform: scale(.94); }
.app-back[hidden] { display: none; }

/* ── The home-screen tip ────────────────────────────────────────── */
.a2hs {
  position: fixed;
  left: calc(var(--s-6) + env(safe-area-inset-left));
  right: calc(var(--s-6) + env(safe-area-inset-right));
  bottom: calc(var(--s-6) + env(safe-area-inset-bottom) + var(--kn-tabs-h, 0px));
  z-index: 960;          /* over the Aris probe (900) and the nav pop-outs (950) */
  max-width: 440px;
  margin: 0 auto;
  padding: var(--s-8);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(280px 140px at 15% 0%, rgba(34, 211, 166, .14), transparent 70%),
    rgba(9, 13, 20, .94);
  color: var(--ink, #e9f0f7);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: app-rise .45s cubic-bezier(.2, .8, .2, 1) both;
}
.a2hs[hidden] { display: none; }
.a2hs.is-leaving { animation: app-sink .28s ease-in both; }
.a2hs__head { display: flex; align-items: center; gap: var(--s-6); }
.a2hs__icon { width: 46px; height: 46px; border-radius: var(--r-md); flex: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.a2hs__title { margin: 0; font-size: var(--t-2xl); line-height: 1.25; font-weight: 700; }
.a2hs__sub { margin: var(--s-1) 0 0; font-size: var(--t-md); color: #9fb0c2; }
.a2hs__steps { margin: var(--s-7) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-4); counter-reset: a2hs; }
.a2hs__steps li {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-size: var(--t-lg);
  counter-increment: a2hs;
}
.a2hs__steps li::before {
  content: counter(a2hs);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: rgba(34, 211, 166, .16);
  color: var(--accent2, #22d3a6);
  font: 700 var(--t-sm)/1 ui-monospace, monospace;
}
.a2hs__glyph {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .08);
  vertical-align: middle;
}
.a2hs__glyph svg { width: 16px; height: 16px; }
.a2hs__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); margin-top: var(--s-8); }
.a2hs__link { color: #9fb0c2; font-size: var(--t-md); text-decoration: underline; text-underline-offset: 3px; }
.a2hs__btns { display: flex; gap: var(--s-4); }
.a2hs__btn {
  min-height: 44px;
  padding: 0 var(--s-9);
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: var(--ink, #e9f0f7);
  font: 600 var(--t-lg)/1 inherit;
  cursor: pointer;
}
.a2hs__btn--go { border-color: transparent; background: var(--ink, #e9f0f7); color: #05080d; }
.a2hs__x {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: #9fb0c2;
  font-size: var(--t-2xl);
  cursor: pointer;
}

@keyframes app-in { from { opacity: 0; transform: scale(.9); } }
@keyframes app-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes app-sink { to { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  .app-back, .a2hs, .a2hs.is-leaving { animation: none; }
}

/* Page buttons pinned to the bottom corner step up above the tab bar. */
html.kn-tabs-on #scrollTop { bottom: calc(var(--s-6) + var(--kn-tabs-h) + env(safe-area-inset-bottom)) !important; }

/* ── Thumb-sized targets ────────────────────────────────────────
   On a touch screen, the small chips and buttons used across Keln
   grow to a comfortable 44px (Apple's and Google's minimum), and a
   few text links in headers get a bigger hit area without moving. */
@media (hover: none) and (pointer: coarse) {
  .krp__chip, .krp__btn, .coach-chip, .wk-chip, .bk__tab, .btn.sm, .hbar__cta,
  .ins-btn, .td-chip, .kcv-btn, .rs-tool, .lib-icon, .tl-btn, .tl-chip { min-height: 44px; }
  .krp__chip { min-width: 44px; }
  .orbit-view, .kcv-sel { min-height: 40px; }
  .hbar__cta { display: inline-flex; align-items: center; justify-content: center; }
  #kmSignOut, #kmChatsAll { padding: var(--s-6) var(--s-3); margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-3)); }
  .kn-group__label { min-height: 40px; }
  .ins-suggest__off { padding-block: var(--s-6); margin-block: calc(-1 * var(--s-6)); }
  /* :where() keeps these at no specificity, so a page that hides or
     lays out one of these links still has the last word. */
  :where(#kmSignOut, #kmChatsAll, .km__back, .km__brand, .wk-head a, .hbar a:not(.hbar__cta), footer a) {
    display: inline-block;
    padding: var(--s-6) var(--s-3);
    margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-3));
  }
}