/* ============================================================
   App-shell mock + annotation chrome (MOCKUPS ONLY)
   A lightweight stand-in for the EmojiCopy UI so marketing
   elements can be shown in context. Approximate, not the real
   components — see ui/blocks/* and ui/pages/* for the originals.
   ============================================================ */

/* ---- gallery page chrome ---- */
.page { max-width: 1080px; margin: 0 auto; padding: var(--sp-9) var(--sp-6) var(--sp-10); }
.page-head { margin-bottom: var(--sp-8); }
.page-head h1 { font-size: 4.4rem; margin: 10px 0 12px; }
.page-head p { max-width: 60ch; font-size: 1.6rem; color: var(--c-text-tertiary); }
.back-link { font-size:1.3rem; font-weight:700; color: var(--c-icon-green); text-decoration:none; }
.back-link:hover { text-decoration: underline; }

.section { margin: var(--sp-9) 0; }
.section > h2 { font-size: 2.6rem; margin-bottom: 8px; }
.section > .lede { font-size:1.5rem; color: var(--c-text-tertiary); margin-bottom: var(--sp-6); max-width:64ch; }

/* annotation note attached to a mockup */
.note {
    display:flex; gap:10px; align-items:flex-start;
    font-size:1.3rem; color: var(--c-text-tertiary);
    background: var(--c-surface-cta); border:1px dashed var(--c-border-secondary);
    border-radius: var(--r-md); padding: 12px 16px; margin-top: 14px;
}
.note b { color: var(--c-text-secondary); }
.note .tag { flex:none; font-weight:700; color: var(--c-icon-green); }

/* state caption above a frame */
.state-label { font-family:var(--ff-inter); font-weight:700; font-size:1.2rem; letter-spacing:.06em; text-transform:uppercase; color: var(--c-text-tertiary); margin-bottom: 10px; }

/* ---- browser frame ---- */
.frame {
    border-radius: 16px; overflow:hidden;
    border:1px solid var(--c-border-primary);
    box-shadow: 0 24px 80px rgba(15,16,18,.16);
    background: var(--c-surface-primary);
}
.frame__bar { display:flex; align-items:center; gap:8px; padding:11px 14px; background: var(--c-surface-tertiary); border-bottom:1px solid var(--c-border-primary); }
.frame__dots { display:flex; gap:6px; }
.frame__dots i { width:11px; height:11px; border-radius:50%; background: var(--metal-300); }
.frame__url { margin-left:8px; font-size:1.1rem; color: var(--c-text-tertiary); background: var(--c-surface-primary); border-radius:6px; padding:4px 12px; }

/* ---- app shell ---- */
.app { display:grid; grid-template-columns: 220px 1fr; min-height: 460px; position:relative; }
.app--mini { grid-template-columns: 1fr; min-height: 0; width: 360px; }

.sidebar { background: var(--c-surface-cta); border-right:1px solid var(--c-border-primary); padding: var(--sp-5) var(--sp-4); display:flex; flex-direction:column; gap:6px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius: var(--r-md); font-size:1.4rem; font-weight:500; color: var(--c-text-secondary); cursor:default; }
.nav-item .ico { font-size:1.8rem; line-height:1; }
.nav-item--active { background: var(--c-surface-highlight); color: light-dark(var(--green-900), var(--white)); font-weight:700; }
.sidebar__spacer { flex:1; }

.main { display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; gap:14px; padding: var(--sp-4) var(--sp-5); border-bottom:1px solid var(--c-border-primary); }
.search { flex:1; background: var(--c-surface-tertiary); border-radius: var(--r-pill); padding:10px 18px; font-size:1.4rem; color: var(--c-text-tertiary); }

.grid-wrap { padding: var(--sp-5); overflow:hidden; }
.grid-wrap h4 { font-size:1.6rem; margin-bottom: 14px; }
.emoji-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(48px,1fr)); gap:6px; }
.emoji-grid span { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:2.4rem; border-radius:10px; }
.emoji-grid span:hover { background: var(--c-surface-tertiary); }