/* Mobile-first styling for Home only. Other pages keep the original style.css. */
.ossia-mobile-page { --om-green:#118349; --om-dark:#0a4f2b; --om-soft:#e5f5ec; --om-mint:#f4f9f6; --om-ink:#172b21; --om-muted:#718279; --om-line:#dce9e1; color:var(--om-ink); font-family:var(--font-body,"Public Sans",sans-serif); max-width:720px; margin:0 auto; padding-bottom:1.5rem; }
.ossia-mobile-page * { box-sizing:border-box; }
.om-topbar { height:68px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #e6eee8; position:sticky; top:0; z-index:3; }
.om-brand { display:flex; align-items:center; gap:9px; color:var(--om-dark); font-weight:800; font-size:1.08rem; line-height:1.1; }
.om-brand small { display:block; margin-top:3px; color:var(--om-muted); font-size:.65rem; font-weight:500; }
.om-logo { width:36px; height:36px; border-radius:11px; background:var(--om-dark); color:#fff; display:grid; place-items:center; font-size:1.3rem; position:relative; }
.om-logo i { position:absolute; width:9px; height:9px; background:#f0b323; border-radius:50%; top:-2px; right:-2px; border:2px solid white; }
.om-icon-btn { width:50px; height:50px; padding:0; display:grid; place-items:center; border:1px solid var(--om-line); border-radius:17px; background:#fff; color:var(--om-dark); position:relative; cursor:pointer; }
.om-bell-icon { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.om-icon-btn b { position:absolute; top:8px; right:8px; width:8px; height:8px; background:#e45b4e; border:1px solid #fff; border-radius:50%; }
.om-content { padding:19px 15px 26px; }
.om-welcome { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 1px 20px; }
.om-eyebrow { color:var(--om-green); font-size:.62rem; letter-spacing:1.15px; font-weight:800; margin:0 0 5px; }
.om-welcome h1,.om-page-intro h1 { font-family:var(--font-head,"Bricolage Grotesque",sans-serif); font-size:1.45rem; line-height:1.18; margin:0 0 6px; }
.om-welcome h1 span { font-size:1.15rem; }
.om-welcome p:not(.om-eyebrow),.om-page-intro>p:last-child { margin:0; color:var(--om-muted); font-size:.78rem; line-height:1.5; }
.om-avatar { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border:1px solid #cce5d5; border-radius:16px; background:linear-gradient(135deg,#dff3e6,#fff); font-size:1.5rem; }
.om-card { background:#fff; border:1px solid #e4eee7; border-radius:18px; box-shadow:0 8px 24px rgba(10,79,43,.055); padding:15px; }
.om-section { margin-top:23px; }
.om-section-title { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:13px; }
.om-section-title h2 { font-family:var(--font-head,"Bricolage Grotesque",sans-serif); font-size:1.03rem; line-height:1.3; margin:0; }
.om-section-title p:not(.om-eyebrow) { color:var(--om-muted); font-size:.75rem; margin:4px 0 0; }
.om-tag { background:var(--om-soft); color:var(--om-dark); border-radius:99px; padding:5px 8px; font-size:.62rem; font-weight:700; white-space:nowrap; }
.om-dropzone { min-height:152px; padding:19px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; border:1.5px dashed #83b99a; border-radius:15px; background:linear-gradient(140deg,#eff9f3,#fbfdfb); cursor:pointer; }
.om-dropzone.dragging { background:#e3f5e9; outline:3px solid #d4eddd; }
.om-upload-symbol { width:40px; height:40px; display:grid; place-items:center; background:#dff3e6; color:var(--om-green); border-radius:13px; font-size:1.7rem; line-height:1; }
.om-dropzone strong { font-size:.82rem; }
.om-dropzone span:not(.om-upload-symbol) { font-size:.72rem; color:var(--om-muted); }
.om-dropzone small { font-size:.63rem; color:#87978d; }
.om-dropzone input { position:absolute; width:1px; height:1px; opacity:0; }
.om-primary-btn { width:100%; margin-top:12px; border:0; border-radius:13px; padding:13px 15px; background:var(--om-green); color:#fff; font-weight:800; font-size:.82rem; display:flex; justify-content:center; align-items:center; gap:10px; }
.om-primary-btn:disabled { background:#b8c9bf; cursor:not-allowed; }
.om-helper { color:var(--om-muted); text-align:center; font-size:.65rem; line-height:1.5; margin:9px 2px 0; }
.om-file-preview { margin-top:11px; padding:8px; display:flex; align-items:center; gap:10px; border:1px solid var(--om-line); border-radius:12px; }
.om-file-preview[hidden],.om-explanation[hidden] { display:none; }
.om-file-preview img { width:58px; height:58px; object-fit:cover; background:#111; border-radius:9px; }
.om-file-meta { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.om-file-meta strong { font-size:.7rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.om-file-meta span,.om-file-meta small { color:var(--om-muted); font-size:.62rem; }
.om-file-preview button { width:30px; height:30px; border:0; border-radius:9px; color:#a23b35; background:#fff0ef; font-size:1.2rem; }
.om-text-btn { border:0; padding:4px 0 4px 5px; color:var(--om-green); background:transparent; font-size:.69rem; font-weight:800; white-space:nowrap; }
.om-result-top { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:13px; }
.om-muted-small { color:var(--om-muted); font-size:.65rem; }
.om-date-dot { display:inline-block; width:6px; height:6px; background:var(--om-green); border-radius:50%; margin-right:5px; }
.om-status { border-radius:99px; padding:5px 8px; font-size:.62rem; font-weight:800; white-space:nowrap; }
.om-status.attention { background:#fff4e2; color:#ad6500; border:1px solid #f1d29b; }
.om-status.normal { background:#e7f7ed; color:#187447; border:1px solid #c7e8d3; }
.om-metrics { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.om-metrics>div { min-width:0; border:1px solid #e0ece4; border-radius:13px; background:#f4f9f6; padding:11px 10px; display:flex; flex-direction:column; gap:4px; }
.om-metrics span { font-size:.65rem; color:var(--om-muted); }
.om-metrics strong { font-family:var(--font-head,"Bricolage Grotesque",sans-serif); font-size:1.35rem; color:var(--om-dark); line-height:1.2; }
.om-metrics strong small { font-family:var(--font-body,"Public Sans",sans-serif); font-size:.65rem; font-weight:600; }
.om-metrics em { color:var(--om-muted); font-size:.62rem; font-style:normal; }
.om-metrics .om-bone-age { color:#873b3b; }
.om-result-difference { display:flex; justify-content:space-between; gap:8px; padding:12px 2px; border-bottom:1px solid #edf2ee; color:var(--om-muted); font-size:.69rem; }
.om-result-difference strong { color:#873b3b; }
.om-detail-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; border:0; padding:13px 2px 5px; color:var(--om-dark); background:transparent; font-size:.74rem; text-align:left; }
.om-detail-toggle b { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--om-soft); color:var(--om-green); margin-right:5px; }
.om-chevron { transition:transform .2s; font-size:1.05rem; }
.om-detail-toggle[aria-expanded="true"] .om-chevron { transform:rotate(180deg); }
.om-explanation { margin-top:8px; padding:12px; border:1px solid #f1d29b; border-radius:13px; background:#fffaf1; }
.om-explanation-heading { font-size:.76rem; color:#9a5b00; font-weight:800; margin-bottom:5px; }
.om-explanation>p,.om-next-step p { color:#6c5a40; font-size:.69rem; line-height:1.55; margin:0; }
.om-next-step { margin-top:10px; padding:10px; border-radius:10px; background:#edf8f1; }
.om-next-step strong { display:block; color:var(--om-dark); font-size:.68rem; margin-bottom:3px; }
.om-next-step p { color:#526e5e; }
.om-disclaimer { margin:11px 2px 0; color:#8a9890; font-size:.59rem; line-height:1.5; }
.om-toast { position:fixed; z-index:100; left:50%; bottom:85px; transform:translate(-50%,12px); opacity:0; pointer-events:none; background:#153e29; color:white; border-radius:12px; padding:10px 14px; max-width:calc(100% - 28px); font-size:.72rem; transition:.2s; }
.om-toast.show { opacity:1; transform:translate(-50%,0); }
@media(min-width:700px) {
  .ossia-mobile-page { max-width:100%; min-height:calc(100dvh - 20px); padding:0 0 20px; }
  .om-topbar { padding:0 28px; }
  .om-content { max-width:1060px; margin:0 auto; padding:26px 28px; }
  .om-welcome h1,.om-page-intro h1 { font-size:1.8rem; }
  .om-card { padding:20px; }
  .om-dropzone { min-height:170px; }
  .om-metrics strong { font-size:1.65rem; }
}
@media(max-width:360px) {
  .om-content { padding-left:11px; padding-right:11px; }
  .om-card { padding:12px; }
  .om-metrics { gap:6px; }
  .om-metrics>div { padding:9px 7px; }
  .om-metrics strong { font-size:1.15rem; }
}

/* Keep this page in the centered phone frame on laptop too. */
body > .ossia-mobile-page { width: min(390px, 100vw) !important; max-width: none !important; }
@media (min-width: 700px) {
  body > .history-page .om-content { max-width: none !important; }
}


/* Empty state: no sample examination results are shown until a real result exists. */
.om-empty-results { display:flex; flex-direction:column; align-items:center; text-align:center; padding:25px 18px; }
.om-empty-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:19px; margin-bottom:13px; color:var(--om-green); background:linear-gradient(135deg,#e2f4e9,#f4faf6); font-size:29px; }
.om-empty-results h3 { margin:0 0 7px; color:var(--om-ink); font-size:.9rem; }
.om-empty-results p { max-width:300px; margin:0 0 14px; color:var(--om-muted); font-size:.7rem; line-height:1.65; }
.om-empty-link { border:1px solid #cfe6d7; border-radius:11px; padding:9px 12px; background:#f7fcf8; color:var(--om-green); font:700 .7rem 'Public Sans',sans-serif; cursor:pointer; }
.om-empty-link:active { background:#e5f5ec; }

/* OSSIA UI refinement: header and upload card */
.ossia-mobile-page { position:relative; }
.om-topbar { min-height:68px; height:68px; padding:0 18px; display:flex; align-items:center; }
.om-brand { gap:10px; line-height:1.05; }
.om-logo { flex:0 0 38px; width:38px; height:38px; }
.om-icon-btn { width:46px; height:46px; border-radius:15px; flex:0 0 46px; }
.upload-card .om-section-title { align-items:flex-start; }
.upload-card .om-section-title > .om-tag { display:none !important; }
.om-dropzone small { display:block; }
.om-primary-btn { min-height:46px; }
.om-file-meta small { color:var(--om-muted); }
@media (min-width:431px) {
  body > .ossia-mobile-page { height:min(844px,100dvh) !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; padding-bottom:78px !important; }
  body > .ossia-mobile-page .om-topbar { position:sticky; top:0; z-index:5; }
}
@media (max-width:430px) {
  body > .ossia-mobile-page { height:100dvh !important; min-height:0 !important; overflow-y:auto !important; padding-bottom:78px !important; border-radius:0 !important; }
  .om-topbar { position:sticky; top:0; z-index:5; }
}