/* /js/homescreen.css - the quiet add-to-home-screen bar. */
.ccu-install{
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 9998;
  display: flex; align-items: center; gap: 12px;
  max-width: 460px; margin: 0 auto;
  background: #14120F;
  border: 1px solid rgba(251,250,247,.14);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  transform: translateY(140%);
  transition: transform .3s ease, opacity .3s ease;
  opacity: 0;
}
.ccu-install.on{ transform: translateY(0); opacity: 1; }
.ccu-install-icon{ width: 40px; height: 40px; border-radius: 10px; flex: none; }
.ccu-install-body{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ccu-install-t{
  font: 600 13px/1.25 'Satoshi Variable','Satoshi',system-ui,sans-serif;
  letter-spacing: .01em; color: #FBFAF7;
}
.ccu-install-s{
  font: 400 12px/1.35 'Satoshi Variable','Satoshi',system-ui,sans-serif;
  color: rgba(251,250,247,.62); margin-top: 2px;
}
.ccu-install-s b{ color: rgba(251,250,247,.85); font-weight: 600; }
.ccu-install-go{
  flex: none; margin-left: 4px;
  font: 600 12px/1 'Satoshi Variable','Satoshi',system-ui,sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: #0B0A08; background: #F2A285;
  border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer;
}
.ccu-install-go:disabled{ opacity: .6; }
.ccu-install-x{
  flex: none; align-self: flex-start;
  background: none; border: 0; cursor: pointer;
  color: rgba(251,250,247,.55); font-size: 20px; line-height: 1; padding: 2px 4px;
}
.ccu-install-x:hover{ color: #FBFAF7; }

/* ── The illustrated iPhone guide ─────────────────────────────────────
   Kai, 2026-07-21: "Add to home screen" is misunderstood by iPhone users,
   and a line of text does not fix that. Chrome can fire a real install
   prompt; Apple deliberately cannot, so on iPhone the only honest answer is
   to show people the buttons they are looking for.
   Icons are inline SVG, so this stays sharp at any size, needs no image
   files, and keeps working if it is ever baked into the offline reader. */
.ccu-guide{
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(11,10,8,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s ease; padding: 16px;
}
.ccu-guide.on{ opacity: 1; }
.ccu-guide-sheet{
  position: relative; width: 100%; max-width: 460px;
  background: #FBFAF7; color: #14120F;
  border-radius: 20px; padding: 26px 22px 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
  transform: translateY(24px); transition: transform .32s cubic-bezier(.22,1,.36,1);
  max-height: 88vh; overflow-y: auto;
}
.ccu-guide.on .ccu-guide-sheet{ transform: translateY(0); }
.ccu-guide-x{
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; cursor: pointer;
  color: rgba(20,18,15,.42); font-size: 26px; line-height: 1; padding: 4px 8px;
}
.ccu-guide-k{
  font: 700 10.5px/1 'Satoshi Variable','Satoshi',system-ui,sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(20,18,15,.45);
}
.ccu-guide-h{
  font: 400 clamp(21px,5.6vw,26px)/1.15 'Fraunces',Georgia,serif; font-style: italic;
  margin: 8px 0 0;
}
.ccu-guide-lede{
  font: 400 14px/1.5 'Satoshi Variable','Satoshi',system-ui,sans-serif;
  color: rgba(20,18,15,.66); margin: 10px 0 0;
}
.ccu-guide-steps{ list-style: none; margin: 20px 0 0; padding: 0; }
.ccu-guide-steps li{
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid rgba(20,18,15,.1);
}
.ccu-guide-ic{
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  background: #14120F; display: inline-flex; align-items: center; justify-content: center;
}
.ccu-guide-tx{
  font: 400 14px/1.5 'Satoshi Variable','Satoshi',system-ui,sans-serif;
  color: rgba(20,18,15,.72);
}
.ccu-guide-tx b{ color: #14120F; font-weight: 600; }
.ccu-guide-done{
  width: 100%; margin-top: 18px;
  font: 700 12.5px/1 'Satoshi Variable','Satoshi',system-ui,sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: #0B0A08; background: #F2A285;
  border: 0; border-radius: 999px; padding: 15px 20px; cursor: pointer;
}