/* BUBB — typography & form visual contract v1
   Normalize visual roles, not the information architecture or runtime behavior.
   Existing sections, approved artwork, People photos, camera, community swipe,
   modal positioning/scroll ownership and transmission security remain untouched. */

:root{
  --bubb-type-scale:1;
  --bubb-type-display:clamp(48px,5.6vw,64px);
  --bubb-type-page:30px;
  --bubb-type-heading:25px;
  --bubb-type-card:18px;
  --bubb-type-subtitle:17px;
  --bubb-type-body:15px;
  --bubb-type-label:14px;
  --bubb-type-input:16px; /* Prevent iOS Safari from zooming when fields focus. */
  --bubb-type-caption:12px;
  --bubb-type-button:14px;
  --bubb-form-radius:24px;
  --bubb-field-radius:14px;
  --bubb-field-height:48px;
  --bubb-field-line:var(--lce-ui-line,#d1d1d6);
  --bubb-field-bg:var(--lce-ui-surface,#fff);
  --bubb-field-fg:var(--lce-ui-text,#050505);
  --bubb-field-muted:var(--lce-ui-muted,#6e6e73);
}
html.lce-large-text{--bubb-type-scale:1.2}

/* Main image-led section titles: one exact role for all existing sections.
   The frame and the curated image remain entirely unchanged. */
html body #lce-v10-journey .lce-v9-title,
html body :is(#home,#mem,#people,#caps,#legacy,#journal,#moi,#settings) > .lce-v9-hero .lce-v9-title{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:calc(var(--bubb-type-display) * var(--bubb-type-scale))!important;
  font-weight:750!important;
  line-height:1.05!important;
  letter-spacing:-.045em!important;
}
html body #lce-v10-journey .lce-v9-desc,
html body :is(#home,#mem,#people,#caps,#legacy,#journal,#moi,#settings) > .lce-v9-hero .lce-v9-desc{
  font-size:calc(var(--bubb-type-subtitle) * var(--bubb-type-scale))!important;
  line-height:1.48!important;
  font-weight:450!important;
}
html body #lce-v10-journey .lce-v9-sub,
html body :is(#home,#mem,#people,#caps,#legacy,#journal,#moi,#settings) > .lce-v9-hero .lce-v9-sub{
  font-size:calc(var(--bubb-type-body) * var(--bubb-type-scale))!important;
  line-height:1.5!important;
}
html body #lce-v10-journey .lce-v9-eyebrow{
  font-size:calc(var(--bubb-type-caption) * var(--bubb-type-scale))!important;
  line-height:1.35!important;
}
html body #lce-v10-journey .lce-v9-actions button{
  font-size:calc(var(--bubb-type-button) * var(--bubb-type-scale))!important;
  line-height:1.25!important;
}

/* Page heading hierarchy. No blanket h1/h2 rules: cards and saved content
   keep their own semantic proportions and the People photo mosaic is untouched. */
html body :is(#mem,#people,#caps,#legacy,#journal,#moi,#settings) > .hero h1,
html body #settings .sp2-head h2{
  font-size:calc(var(--bubb-type-page) * var(--bubb-type-scale))!important;
  font-weight:750!important;
  line-height:1.16!important;
  letter-spacing:-.035em!important;
}
html body :is(#mem,#people,#caps,#legacy,#journal,#moi,#settings) > .hero p,
html body #settings .sp2-head p{
  font-size:calc(var(--bubb-type-subtitle) * var(--bubb-type-scale))!important;
  line-height:1.5!important;
  font-weight:450!important;
}
html body :is(#mem,#people,#caps,#legacy,#journal,#moi,#settings) :is(.panelhead h2,.lce-section-head h2,.mem-final-head h2),
html body #settings .sp2-cardhead h3{
  font-size:calc(var(--bubb-type-heading) * var(--bubb-type-scale))!important;
  line-height:1.2!important;
  font-weight:720!important;
  letter-spacing:-.025em!important;
}
html body #settings .sp2-cardhead p{
  font-size:calc(var(--bubb-type-body) * var(--bubb-type-scale))!important;
  line-height:1.5!important;
}


/* The existing mobile shell supplies later inline overrides. Scope to the actual
   section stop + hero so one title/subtitle scale wins without moving artwork. */
html body #lce-v10-journey .lce-v10-stop[data-page] .lce-v9-hero .lce-v9-title{
  font-size:calc(var(--bubb-type-display) * var(--bubb-type-scale))!important;
  line-height:1.05!important;
  letter-spacing:-.045em!important;
}
html body #lce-v10-journey .lce-v10-stop[data-page] .lce-v9-hero .lce-v9-desc{
  font-size:calc(var(--bubb-type-subtitle) * var(--bubb-type-scale))!important;
  line-height:1.48!important;
}
html body #lce-v10-journey .lce-v10-stop[data-page] .lce-v9-hero .lce-v9-sub{
  font-size:calc(var(--bubb-type-body) * var(--bubb-type-scale))!important;
}
html body #lce-v10-journey .lce-v10-stop[data-page] .lce-v9-hero .lce-v9-actions button{
  font-size:calc(var(--bubb-type-button) * var(--bubb-type-scale))!important;
}
html body #settings .sp2-shell .sp2-head h2{
  font-size:calc(var(--bubb-type-page) * var(--bubb-type-scale))!important;
}
html body #settings .sp2-shell .sp2-head p{
  font-size:calc(var(--bubb-type-subtitle) * var(--bubb-type-scale))!important;
}
/* Form shells: the same white surface, outline and soft corners across
   memories, capsules, journals, people, heritage, universe, settings and account.
   Never alter top/left/height/overflow or z-index: those are owned by each modal. */
html body :is(.lce-modal,.moi-modal,.lce-rel-modal,.people-complete-modal,
 .caps-seal-confirm,.lce-legacy-modal,.heritage-modal-v2,.sp1-modal,.sp2-modal,
 .ll-account-modal,.ll-auth-card){
  background:var(--bubb-field-bg)!important;
  color:var(--bubb-field-fg)!important;
  border-color:var(--bubb-field-line)!important;
  border-radius:var(--bubb-form-radius)!important;
}
html body :is(.lce-modal,.moi-modal,.lce-rel-modal,.people-complete-modal,
 .caps-seal-confirm,.lce-legacy-modal,.heritage-modal-v2,.sp1-modal,.sp2-modal,
 .ll-account-modal,.ll-auth-card) :is(h1,h2,h3){
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  color:var(--bubb-field-fg)!important;
}
/* Titles of modals are intentionally the same size as one another, not as cards. */
html body .lce-modal .lce-modalhead h2,
html body .moi-modal .moi-modalhead h2,
html body .lce-rel-modal h2,
html body .people-complete-modal .people-complete-head h2,
html body .caps-seal-confirm h3,
html body .lce-legacy-modal h2,
html body .heritage-modal-v2 h2,
html body .sp1-modal h2,
html body .sp2-modal h2,
html body .ll-account-modal h2,
html body #ll-account-gate .ll-auth-card h1{
  font-size:calc(var(--bubb-type-heading) * var(--bubb-type-scale))!important;
  font-weight:750!important;
  line-height:1.2!important;
  letter-spacing:-.03em!important;
}
html body :is(.lce-modal,.moi-modal,.lce-rel-modal,.people-complete-modal,
 .caps-seal-confirm,.lce-legacy-modal,.heritage-modal-v2,.sp1-modal,
 .sp2-modal,.ll-account-modal,.ll-auth-card) :is(.intro,.lce-modalhead p,.moi-modalhead p){
  font-size:calc(var(--bubb-type-body) * var(--bubb-type-scale))!important;
  line-height:1.5!important;
  color:var(--bubb-field-muted)!important;
}

/* Consistent 14px labels, preserving original label layout and error displays. */
html body :is(.lce-form,.lce-realform,.moi-form,.lce-rel-form,
 .people-complete-form,.ll-auth-form) label,
html body #settings .sp2-field label,
html body #ll-account-gate .ll-auth-field span,
html body .lce-legacy-confirmgrid label{
  font-size:calc(var(--bubb-type-label) * var(--bubb-type-scale))!important;
  line-height:1.4!important;
  font-weight:650!important;
  color:var(--bubb-field-fg)!important;
}

/* The same field treatment, without touching file uploads, toggles, security
   checkboxes (34px transfer confirmation), audio trim controls, or camera. */
html body :is(.lce-modal,.moi-modal,.lce-rel-modal,.people-complete-modal,
 .lce-legacy-modal,.heritage-modal-v2,.sp1-modal,.sp2-modal,
 .ll-account-modal,.ll-auth-card)
 :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),textarea,select),
html body #settings .sp2-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,select),
html body :is(.lce-form,.lce-realform) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="color"]):not([type="button"]):not([type="submit"]),textarea,select){
  box-sizing:border-box!important;
  min-height:var(--bubb-field-height)!important;
  max-width:100%!important;
  min-width:0!important;
  padding:11px 13px!important;
  border:1px solid var(--bubb-field-line)!important;
  border-radius:var(--bubb-field-radius)!important;
  background:var(--bubb-field-bg)!important;
  background-image:none!important;
  color:var(--bubb-field-fg)!important;
  box-shadow:none!important;
  font:500 calc(var(--bubb-type-input) * var(--bubb-type-scale))/1.35 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
html body :is(.lce-modal,.moi-modal,.lce-rel-modal,.people-complete-modal,
 .lce-legacy-modal,.heritage-modal-v2,.sp1-modal,.sp2-modal,
 .ll-account-modal,.ll-auth-card) textarea,
html body :is(.lce-form,.lce-realform) textarea{
  height:auto; /* Preserve user-resizable textarea and module-defined minima. */
  resize:vertical;
}
html body :is(.lce-form,.lce-realform,.moi-form,.lce-rel-form,.people-complete-form)
 :is(input,textarea)::placeholder,
html body #settings .sp2-field input::placeholder,
html body #ll-account-gate .ll-auth-field input::placeholder{
  color:var(--lce-ui-faint,#8e8e93)!important;
  opacity:1!important;
}
html body :is(.lce-form,.lce-realform,.moi-form,.lce-rel-form,
 .people-complete-form,.ll-auth-form) :is(input,textarea,select):focus-visible,
html body #settings .sp2-field :is(input,textarea,select):focus-visible{
  outline:2px solid var(--lce-ui-blue,#0a84ff)!important;
  outline-offset:1px!important;
  border-color:var(--lce-ui-blue,#0a84ff)!important;
}

/* One button text size and comfortable tap target, without overriding primary/
   danger/outlined button colors or special close, swipe and recording controls. */
html body :is(.lce-modal,.moi-modal,.lce-rel-modal,.people-complete-modal,
 .lce-legacy-modal,.heritage-modal-v2,.ll-account-modal)
 :is(button[type="submit"],.lce-form .primary,.lce-form .soft,.lce-rel-btn,
 .ll-account-modal-actions button,.moi-form > button[type="submit"]),
html body #settings .sp2-btn,
html body #ll-account-gate :is(.ll-auth-primary,.ll-auth-secondary),
html body .caps-seal-confirm-actions button{
  min-height:44px!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:calc(var(--bubb-type-button) * var(--bubb-type-scale))!important;
  line-height:1.25!important;
  font-weight:650!important;
}

/* Preserve 16px+ mobile input text, compact responsive layouts, pinned media
   sizing and already-approved section gallery art. */
@media(max-width:820px){
  :root{
    --bubb-type-display:clamp(38px,10vw,46px);
    --bubb-type-page:28px;
    --bubb-type-heading:23px;
    --bubb-type-subtitle:15.5px;
    --bubb-type-body:14.5px;
  }
}


/* BUBB_FORM_FIRST_TAP_V1
   Mobile form controls keep their native browser behavior, but opt out of
   double-tap gesture arbitration so the first real tap can focus immediately.
   No synthetic click/focus is used; range dragging, layout and scroll owners
   remain untouched. */
@media (hover:none) and (pointer:coarse){
  html body :is(
    input:not([type="hidden"]):not([type="range"]),
    textarea,
    select,
    [contenteditable="true"]
  ){
    touch-action:manipulation!important;
  }
}