/* RY Tracker — Matcha Slate onboarding and selectable preview themes */
#matcha-onboarding {
    --ob-bg: #f5f4ef;
    --ob-surface: #fffefa;
    --ob-ink: #233126;
    --ob-copy: #68736b;
    --ob-line: #dfe4dc;
    --ob-accent: #48654d;
    --ob-accent-soft: #dfe9df;
    position: absolute;
    inset: 0;
    z-index: 100005;
    display: none;
    overflow: hidden !important;
    background: var(--ob-bg);
    color: var(--ob-ink);
    height: 100% !important;
    max-height: 100% !important;
}

#matcha-onboarding.is-visible { 
    display: flex !important; 
    flex-direction: column !important;
    z-index: 100005 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

/* Onboarding açıkken tab-bar, fab ve header kesinlikle gizlenir */
body:has(#matcha-onboarding.is-visible) .tab-bar,
body:has(#matcha-onboarding.is-visible) .fab-btn,
body:has(#matcha-onboarding.is-visible) .app-header,
.tab-bar.onboarding-hidden,
.fab-btn.onboarding-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
#matcha-onboarding.theme-terra { --ob-bg:#fbf5ef; --ob-surface:#fffdfa; --ob-ink:#48291d; --ob-copy:#82675a; --ob-line:#eedfd3; --ob-accent:#ad4a2e; --ob-accent-soft:#f4dfd3; }
#matcha-onboarding.theme-midnight { --ob-bg:#12192a; --ob-surface:#192237; --ob-ink:#f6f4ff; --ob-copy:#bcb6d2; --ob-line:#303c58; --ob-accent:#8e5bd1; --ob-accent-soft:#30254a; }
#matcha-onboarding.theme-paper { --ob-bg:#f5f3ea; --ob-surface:#fffef9; --ob-ink:#28352f; --ob-copy:#6d796d; --ob-line:#d9ddd1; --ob-accent:#3e5e4d; --ob-accent-soft:#e4eadc; }

.ob-shell { 
    height: 100% !important; 
    max-height: 100% !important; 
    width: 100%;
    max-width: 440px; 
    margin: 0 auto; 
    padding: 16px 20px 18px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: space-between !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.ob-progress { display:flex; justify-content:center; align-items:center; gap:8px; margin: 0 auto 12px !important; flex-shrink: 0; }
.ob-progress span { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:var(--ob-line); color:var(--ob-copy); font-size:10px; font-weight:700; }
.ob-progress span.active { background:var(--ob-accent); color:#fff; }
.ob-card { display:none; flex:1; flex-direction:column; text-align:center; animation:obIn .2s ease-out; overflow:hidden; justify-content:space-between; }
.ob-card.active { display:flex !important; }
.ob-mark { width:38px; height:38px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin:4px auto 10px; flex-shrink:0; }
.ob-mark i { display:block; border-radius:3px; background:var(--ob-line); }.ob-mark i:nth-child(1),.ob-mark i:nth-child(5),.ob-mark i:nth-child(7),.ob-mark i:nth-child(9){background:var(--ob-accent);}
.ob-wordmark { font-size:10px; letter-spacing:.14em; color:var(--ob-copy); font-weight:700; margin-bottom:8px; }
.ob-card h1 { margin:0 0 6px; font-size:22px; line-height:1.18; letter-spacing:-.03em; color:var(--ob-ink); }
.ob-card p { margin:0; color:var(--ob-copy); font-size:12px; line-height:1.45; }
.ob-grow { flex:1; min-height:6px; }
.ob-primary { appearance:none; width:100%; min-height:44px; padding:11px 14px; border:0; border-radius:10px; background:var(--ob-accent); color:#fff; font:700 13px var(--font-family); cursor:pointer; flex-shrink:0; }
.ob-text-btn { appearance:none; background:transparent; border:0; color:var(--ob-copy); font:600 11.5px var(--font-family); padding:8px 6px 0; cursor:pointer; flex-shrink:0; }
.ob-steps { text-align:left; margin:6px 0; flex-shrink:0; }
.ob-step-row { display:flex; gap:10px; padding:9px 0; border-top:1px solid var(--ob-line); text-align:left; }
.ob-step-row b{font-size:11px;color:var(--ob-accent);}
.ob-step-row strong{display:block;font-size:12px;margin-bottom:2px}
.ob-step-row span{font-size:11px;line-height:1.35;color:var(--ob-copy)}
.ob-id { margin:12px 0; padding:10px 12px; border:1px dashed var(--ob-line); border-radius:10px; text-align:left; }
.ob-id small{display:block;color:var(--ob-copy);font-size:9px;font-weight:700;letter-spacing:.1em}
.ob-id code{display:block;margin-top:4px;color:var(--ob-ink);font-size:12px}
.ob-chip-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:10px 0; }
.ob-chip { appearance:none; border:1px solid var(--ob-line); border-radius:99px; background:var(--ob-surface); color:var(--ob-ink); padding:6px 11px; font:600 11px var(--font-family); cursor:pointer; }
.ob-chip.selected { color:#fff; background:var(--ob-accent); border-color:var(--ob-accent); }
.ob-bell { width:48px; height:48px; border-radius:50%; background:var(--ob-accent); color:#fff; display:grid; place-items:center; margin:12px auto 10px; font-size:22px; }
.ob-input { width:100%; margin:12px 0 6px; border:1px solid var(--ob-line); border-radius:9px; padding:10px 12px; background:var(--ob-surface); color:var(--ob-ink); font:12.5px var(--font-family); }
.ob-input::placeholder{color:var(--ob-copy)}
.ob-week { display:flex; gap:5px; margin:10px 0 12px; }
.ob-week i { flex:1; aspect-ratio:1; border:1px solid var(--ob-line); border-radius:4px; }
.ob-week i.done{background:var(--ob-accent);border-color:var(--ob-accent)}
.ob-checklist{display:grid;gap:7px;text-align:left;margin:0 4px}
.ob-checklist div{font-size:11.5px}
.ob-checklist b{color:var(--ob-accent);margin-right:6px}
.ob-theme-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px; }
.ob-theme-choice { appearance:none; padding:10px 8px; border:2px solid var(--border); border-radius:10px; background:var(--bg-surface); text-align:left; cursor:pointer; font:600 11.5px var(--font-family); color:var(--text-primary); }
.ob-theme-choice small{display:block;margin-top:2px;color:var(--text-secondary);font-weight:400}
.ob-theme-choice.active{border-color:var(--ob-accent);box-shadow:0 0 0 2px var(--ob-accent-soft)}
@keyframes obIn { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
@media (prefers-reduced-motion:reduce){.ob-card.active{animation:none}}