/* Thin site frame for the functional apps (Study, Read): a window-style title
   strip above the app's own header. It scrolls away; the app header stays sticky.
   Link after /assets/css/base.css. See docs/STYLE_GUIDE.md section 2. */

.app-frame {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(5px, env(safe-area-inset-top)) 16px 5px;
  background: #151c26;
  color: #c9d3e3;
  border-top: 3px solid var(--petal-accent);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--font-label);
  font-size: 15px;
  line-height: 1.3;
}
.app-frame .site-nav-back { font-size: 15px; color: #c9d3e3; }
.app-frame-title { margin-left: auto; font-weight: 700; letter-spacing: .03em; }
.app-frame .wc { font-family: var(--font-meta); opacity: .6; user-select: none; }