/* Knightsman mobile & installed-app refinements. Loaded after each page's own styles. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip;-webkit-tap-highlight-color:transparent;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
header{padding-top:env(safe-area-inset-top)}
footer{padding-bottom:calc(55px + env(safe-area-inset-bottom))}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
[id]{scroll-margin-top:calc(90px + env(safe-area-inset-top))}
img,canvas,svg{max-width:100%}

/* Install hint (shown only on phones in the browser, never inside the installed app) */
.install-hint{position:fixed;z-index:60;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;padding:12px 10px 12px 12px;background:#13181bf7;border:1px solid #8e744b;border-radius:14px;box-shadow:0 18px 40px #000b;backdrop-filter:blur(12px);animation:install-in .35s ease-out}
.install-hint img{border-radius:10px;flex:none}
.install-hint p{margin:0;flex:1;font-size:13px;line-height:1.4;color:#c6c8cc}
.install-hint strong{display:block;color:#f7f5ef;font-size:14px}
.install-hint .install-go{background:linear-gradient(130deg,#f5dfaa,#d8b577);color:#15120e;border:0;border-radius:8px;min-height:44px;padding:0 16px;font-weight:700;font-size:14px}
.install-hint .install-close{background:transparent;border:0;color:#aab0b9;font-size:24px;min-width:44px;min-height:44px;line-height:1}
@keyframes install-in{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

@media (hover:none){
  .letter:hover,.pillars .pillar:hover{transform:none}
  .cta:active,.secondary:active,.outline:active,.back:active,.chart-controls button:active,.prompts button:active,.share a:active,.share button:active{transform:scale(.97);filter:brightness(1.1)}
  .cta,.secondary,.outline,.back,.chart-controls button,.prompts button,.share a,.share button,.letter summary{transition:transform .12s,filter .12s}
}

@media (max-width:760px){
  /* Comfortable 44px touch targets */
  .menu-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .chart-controls button,.filter-btn,.prompts button,.share a,.share button{min-height:44px;padding:10px 16px;font-size:13px}
  .chart-controls{gap:8px}
  .chart-controls button{flex:1}
  .cta,.secondary,.back{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .actions .cta,.actions .secondary{flex:1 1 auto}
  .footer-links{gap:6px 18px}
  .footer-links a,.letter-page-link,.source-link{display:inline-flex;align-items:center;min-height:44px}
  .nav.open{max-height:calc(100dvh - 80px - env(safe-area-inset-top));overflow-y:auto;overscroll-behavior:contain}

  /* Readable text */
  .sub,.chart-foot,.warning,.pillar p,.mini div,.term p,.founder-points span{font-size:14px}
  .letter-content>p,.thesis p{font-size:15px}
  .thesis-tag{font-size:11px}
  .letter-note{font-size:12px!important}
  .lead,.hero p{font-size:16px}
  .micro-note{font-size:12px}

  /* Chart */
  canvas{height:250px}
  .index{font-size:32px}
  .chart-tip{font-size:13px}

  /* Ask Knightsman chatbot: inputs at 16px stop iOS from zooming the page on focus */
  .ask input,.join-fields input,input[type=email],input[type=text]{font-size:16px}
  .ask input{min-height:48px}
  .ask button{min-height:48px;min-width:64px;font-weight:700;color:#15120e}
  .chatlog{height:auto;min-height:min(45vh,300px);max-height:min(62vh,520px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .bubble{font-size:15px;max-width:92%}
  .prompts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -19px;padding:0 19px 2px}
  .prompts::-webkit-scrollbar{display:none}
  .prompts button{flex:none}

  /* Newsletters */
  .letter summary{padding:20px;min-height:64px}
  .letter .issue-name{font-size:22px;padding-right:28px}
  .letter-content{padding:20px;max-height:none}
  .join-fields .cta{width:100%}
  .consent{font-size:14px}
  .consent input{width:22px;height:22px;flex:none}
}

/* Installed app (standalone) */
@media (display-mode:standalone){
  html{overscroll-behavior-y:none}
  .install-hint{display:none}
}